From b7bec599082ef55e9e30c7c72847910151a1fc37 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sat, 16 Nov 2024 10:49:44 +0100
Subject: [PATCH] fix problem that resizing redraw the editor and preview

---
 core/wiki/macros/sidebar-resizer.tid          | 23 ++++++++-------
 themes/tiddlywiki/vanilla/base.tid            |  4 ++-
 themes/tiddlywiki/vanilla/sidebar-resizer.tid | 28 +++++++++++++++----
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/core/wiki/macros/sidebar-resizer.tid b/core/wiki/macros/sidebar-resizer.tid
index 34b8483f7..d250f7905 100644
--- a/core/wiki/macros/sidebar-resizer.tid
+++ b/core/wiki/macros/sidebar-resizer.tid
@@ -503,7 +503,7 @@ title: $:/core/procedures/sidebar-resizer
 			class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
 			selector=".tc-slider"
 			matchSelector=".tc-slider"
-			$pointerup=<<sidebar-resizer-pointercancel-actions>>>
+			$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
 
 			<$eventcatcher
 				tag="div"
@@ -517,7 +517,6 @@ title: $:/core/procedures/sidebar-resizer
 				$pointerdown=<<sidebar-resizer-pointercancel-actions>>
 				$touchstart=<<sidebar-resizer-pointercancel-actions>>
 				$pointermove=<<sidebar-resizer-pointermove-actions>>
-				$touchmove=<<sidebar-resizer-pointermove-actions>>
 				$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
 
 				<div class=<<get.active.class tc-slider-pointermove>>/>
@@ -532,18 +531,18 @@ title: $:/core/procedures/sidebar-resizer
 
 			<% endif %>
 
-			<%if [<template>is[variable]] %>
-
-				<$transclude $variable=<<template>> mode=<<mode>>/>
-
-			<% else %>
-
-				<$transclude $tiddler=<<template>> mode=<<mode>>/>
-
-			<% endif %>
-
 		</$eventcatcher>
 
+		<%if [<template>is[variable]] %>
+
+			<$transclude $variable=<<template>> mode=<<mode>>/>
+
+		<% else %>
+
+			<$transclude $tiddler=<<template>> mode=<<mode>>/>
+
+		<% endif %>
+
 	<% endif %>
 
 </$eventcatcher>
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index d36e9f98e..7ba95c5f6 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -1394,6 +1394,7 @@ html[dir="rtl"] .tc-tiddler-frame .tc-tiddler-controls {
 
 .tc-tiddler-frame iframe.tc-edit-texteditor {
 	background-color: <<colour tiddler-background>>;
+	z-index: 1;
 }
 
 .tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,
@@ -1464,7 +1465,7 @@ html body.tc-body.tc-single-tiddler-window {
 
 .tc-editor-toolbar {
 	background-color: <<colour tiddler-background>>;
-	z-index: 1;
+	z-index: 2;
 	padding-top: 8px;
 	margin-left: -2px;
 	margin-right: -2px;
@@ -1749,6 +1750,7 @@ html body.tc-body.tc-single-tiddler-window {
 	border: 1px solid <<colour tiddler-editor-border>>;
 	margin: 4px 0 3px 0;
 	padding: 3px 3px 3px 3px;
+	z-index: 1;
 }
 
 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview > iframe[sandbox] {
diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
index e1480ef38..b1abb5005 100644
--- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@@ -46,13 +46,16 @@ code-body: yes
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
+	align-items: stretch;
 }
 
 .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
+	position: absolute;
+	width: 100%;
 	flex-direction: row;
 }
 
-.tc-slider-pointerdown-eventcatcher:not(.tc-main-slider), .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
+.tc-slider-pointerdown-eventcatcher:not(.tc-main-slider) {
 	position: relative;
 }
 
@@ -61,19 +64,34 @@ code-body: yes
 	user-select: none;
 }
 
-.tc-slider-pointermove-eventcatcher-wrapper.tc-resizer-active {
+.tc-slider-pointermove-eventcatcher-wrapper.tc-main-slider.tc-resizer-active {
 	z-index: 801;
 }
 
-.tc-slider-pointermove-eventcatcher.tc-resizer-active {
+.tc-slider-pointermove-eventcatcher.tc-main-slider.tc-resizer-active {
 	z-index: 802;
 }
 
-.tc-slider-pointermove.tc-resizer-active {
+.tc-slider-pointermove.tc-main-slider.tc-resizer-active {
 	z-index: 803;
+}
+
+.tc-slider-pointermove.tc-resizer-active {
 	cursor: ew-resize;
 }
 
+.tc-slider-pointermove-eventcatcher-wrapper.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 2;
+}
+
+.tc-slider-pointermove-eventcatcher.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 3;
+}
+
+.tc-slider-pointermove.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 4;
+}
+
 .tc-slider.tc-resizer-active {
 	opacity: <<get.theme.metric slideropacityhover>>;
 }
@@ -211,7 +229,7 @@ div[class*="tc-editor-preview-slider-"] {
 		<%if [[$:/state/resizing/editor-preview-]addsuffix<identifier>is[tiddler]] %>
 
 			div.tc-slider.tc-editor-preview-slider-<<identifier>> {
-				opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1);
+				opacity: min(<<get.theme.metric slideropacityhover>>,1);
 			}
 
 		<% endif %>