[*] refactor video editor

heng30 · heng30 · commit f1aa1d26e280 · 2026-03-26T14:29:20.000+08:00
diff --git a/wayshot/src/logic/video_editor/conversion.rs b/wayshot/src/logic/video_editor/conversion.rs
@@ -668,12 +668,21 @@ pub fn layer_frame_to_ui(layer: &LayerFrame) -> Option<UIVideoEditorLayerImage>
                 .from_segment
                 .as_ref()
                 .and_then(|(_, segment)| {
-                    segment
-                        .video_filters
-                        .iter()
-                        .find(|f| f.inner.name() == TransformFilter::NAME)
-                        .and_then(|f| f.inner.as_any().downcast_ref::<TransformFilter>())
-                        .map(|t| t.clone().into())
+                    if segment.metadata.is_overlay() {
+                        segment
+                            .overlay_filters
+                            .iter()
+                            .find(|f| f.inner.name() == TransformFilter::NAME)
+                            .and_then(|f| f.inner.as_any().downcast_ref::<TransformFilter>())
+                            .map(|t| t.clone().into())
+                    } else {
+                        segment
+                            .video_filters
+                            .iter()
+                            .find(|f| f.inner.name() == TransformFilter::NAME)
+                            .and_then(|f| f.inner.as_any().downcast_ref::<TransformFilter>())
+                            .map(|t| t.clone().into())
+                    }
                 })
                 .unwrap_or_else(|| TransformFilter::default().into());
 
@@ -965,63 +974,5 @@ fn overlay_filters_to_ui(filters: &[Arc<OverlayFilterWrapper>]) -> Vec<UISegment
 }
 
 pub fn overlay_filter_to_json_detail(filter: &Box<dyn VideoFilter>) -> String {
-    match filter.name() {
-        ColorBalanceFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<ColorBalanceFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        CrossDissolveFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<CrossDissolveFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        FadeInFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<FadeInFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        FadeOutFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<FadeOutFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        MovingFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<MovingFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        SlideFromLeftFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<SlideFromLeftFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        SlideFromTopFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<SlideFromTopFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        WipeLeftToRightFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<WipeLeftToRightFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        WipeTopToBottomFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<WipeTopToBottomFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        ZoomInFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<ZoomInFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        ZoomOutFilter::NAME => {
-            if let Some(f) = filter.as_any().downcast_ref::<ZoomOutFilter>() {
-                return serde_json::to_string(f).unwrap_or_default();
-            }
-        }
-        _ => {}
-    }
-    String::new()
+    video_filter_to_json_detail(filter)
 }
diff --git a/wayshot/ui/panel/desktop/video-editor/preview/preview-transform-layers.slint b/wayshot/ui/panel/desktop/video-editor/preview/preview-transform-layers.slint
@@ -58,6 +58,7 @@ export component PreviewTransformLayers inherits Rectangle {
 
         private property <VideoEditorLayerImage> layer: layers[layers.length - 1 - index];
         private property <TransformDetail> transform: layer.transform;
+        private property <bool> is-edited-track: Store.video-editor-current-edited-track-index == layer.track-index;
 
         container-rec := Rectangle {
             x: root.width * transform.center-x-percent - self.width / 2;
@@ -119,7 +120,7 @@ export component PreviewTransformLayers inherits Rectangle {
                 image-fit: ImageFit.contain;
                 transform-rotation: transform.rotation;
 
-                Rectangle {
+                if is-edited-track: Rectangle {
                     top-line := HorizontalLayout {
                         x: top-left-handle.x + top-left-handle.width / 2;
                         y: top-left-handle.y + top-left-handle.height / 2;
@@ -238,7 +239,7 @@ export component PreviewTransformLayers inherits Rectangle {
                 }
             }
 
-            TouchArea {
+            if is-edited-track: TouchArea {
                 scroll-event(event) => {
                     if (Store.video-editor-keyboard-modifiers.shift) {
                         if (event.delta-y > 0) {
@@ -271,7 +272,7 @@ export component PreviewTransformLayers inherits Rectangle {
                 }
             }
 
-            TouchArea {
+            if is-edited-track: TouchArea {
                 mouse-cursor: self.pressed ? grabbing : grab;
 
                 moved => {
@@ -288,7 +289,7 @@ export component PreviewTransformLayers inherits Rectangle {
                 }
             }
 
-            Rectangle {
+            if is-edited-track: Rectangle {
                 y: img.height / 2 - self.height / 2;
                 width: Theme.icon-size * 1.5;
                 height: self.width;
diff --git a/wayshot/ui/panel/desktop/video-editor/preview/preview.slint b/wayshot/ui/panel/desktop/video-editor/preview/preview.slint
@@ -131,7 +131,7 @@ component PreviewWindow inherits Rectangle {
         private property <int> preview-width: preivew-size.width;
         private property <int> preview-height: preivew-size.height;
         private property <float> width-height-rate: preview-width / preview-height;
-        private property <bool> in-edit-mode: !Store.video-editor-is-previewing && VEFilter.is-in-edit-mode;
+        private property <bool> in-edit-mode: !Store.video-editor-is-previewing && VEFilter.is-in-edit-mode && VEFilter.selected-filter.enabled;
 
         changed width-height-rate => {
             self.update-size();
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/compressor.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/compressor.slint
@@ -31,7 +31,7 @@ export component Compressor inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.threshold;
+                text: config.threshold.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -50,7 +50,7 @@ export component Compressor inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.ratio;
+                text: config.ratio.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -69,7 +69,7 @@ export component Compressor inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.attack;
+                text: config.attack.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -88,7 +88,7 @@ export component Compressor inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.release;
+                text: config.release.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -107,7 +107,7 @@ export component Compressor inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.makeup-gain;
+                text: config.makeup-gain.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/gain.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/gain.slint
@@ -31,7 +31,7 @@ export component Gain inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.amplitude;
+                text: config.amplitude.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/limiter.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/limiter.slint
@@ -31,7 +31,7 @@ export component Limiter inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.threshold;
+                text: config.threshold.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/noise-gate.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/noise-gate.slint
@@ -31,7 +31,7 @@ export component NoiseGate inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.threshold;
+                text: config.threshold.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -50,7 +50,7 @@ export component NoiseGate inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.ratio;
+                text: config.ratio.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -69,7 +69,7 @@ export component NoiseGate inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.attack;
+                text: config.attack.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -88,7 +88,7 @@ export component NoiseGate inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.hold;
+                text: config.hold.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -107,7 +107,7 @@ export component NoiseGate inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.release;
+                text: config.release.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/normalize.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/audio/normalize.slint
@@ -31,7 +31,7 @@ export component Normalize inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.target-level-db;
+                text: config.target-level-db.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/graph/draw_circle.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/graph/draw_circle.slint
@@ -37,7 +37,7 @@ export component DrawCircle inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.center-x;
+                text: config.center-x.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -54,7 +54,7 @@ export component DrawCircle inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.center-y;
+                text: config.center-y.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/graph/draw_rectangle.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/graph/draw_rectangle.slint
@@ -37,7 +37,7 @@ export component DrawRectangle inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.x;
+                text: config.x.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -54,7 +54,7 @@ export component DrawRectangle inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.y;
+                text: config.y.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/brightness.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/brightness.slint
@@ -39,7 +39,7 @@ export component Brightness inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.adjustment;
+                text: config.adjustment.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/chroma-key.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/chroma-key.slint
@@ -128,7 +128,7 @@ export component ChromaKey inherits Rectangle {
                     LineInput {
                         enabled: selected-filter.enabled;
                         input-type: InputType.decimal;
-                        text: config.similarity;
+                        text: config.similarity.to-fixed(2);
                         border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                         accepted => {
@@ -145,7 +145,7 @@ export component ChromaKey inherits Rectangle {
                     LineInput {
                         enabled: selected-filter.enabled;
                         input-type: InputType.decimal;
-                        text: config.softness;
+                        text: config.softness.to-fixed(2);
                         border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                         accepted => {
@@ -162,7 +162,7 @@ export component ChromaKey inherits Rectangle {
                     LineInput {
                         enabled: selected-filter.enabled;
                         input-type: InputType.decimal;
-                        text: config.feather;
+                        text: config.feather.to-fixed(2);
                         border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                         accepted => {
@@ -179,7 +179,7 @@ export component ChromaKey inherits Rectangle {
                     LineInput {
                         enabled: selected-filter.enabled;
                         input-type: InputType.decimal;
-                        text: config.spill-reduction;
+                        text: config.spill-reduction.to-fixed(2);
                         border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                         accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/contrast.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/contrast.slint
@@ -33,7 +33,7 @@ export component Contrast inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: number;
-                text: config.factor;
+                text: config.factor.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/gaussian-blur.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/gaussian-blur.slint
@@ -33,7 +33,7 @@ export component GaussianBlur inherits Rectangle {
             LineInput {
                 enabled: selected-filter.enabled;
                 input-type: InputType.decimal;
-                text: config.radius;
+                text: config.radius.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/moving.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/moving.slint
@@ -53,7 +53,7 @@ export component Moving inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.start-x;
+                text: config.start-x.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -73,7 +73,7 @@ export component Moving inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.start-y;
+                text: config.start-y.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -93,7 +93,7 @@ export component Moving inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.end-x;
+                text: config.end-x.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
@@ -113,7 +113,7 @@ export component Moving inherits Rectangle {
 
             LineInput {
                 input-type: InputType.decimal;
-                text: config.end-y;
+                text: config.end-y.to-fixed(2);
                 border-color: self.has-focus ? Theme.thirdly-brand-color : Theme.is-dark ? Theme.base-border-color.brighter(20%) : Theme.base-border-color.darker(10%);
 
                 accepted => {
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/saturation.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/saturation.slint
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/sharpen.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/sharpen.slint
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/transform.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/transform.slint
diff --git a/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/zoom.slint b/wayshot/ui/panel/desktop/video-editor/right-panel/filter/video/zoom.slint

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ export component PreviewTransformLayers inherits Rectangle {`
`58`	`58`
`59`	`59`	`private property <VideoEditorLayerImage> layer: layers[layers.length - 1 - index];`
`60`	`60`	`private property <TransformDetail> transform: layer.transform;`
	`61`	`+ private property <bool> is-edited-track: Store.video-editor-current-edited-track-index == layer.track-index;`
`61`	`62`
`62`	`63`	`container-rec := Rectangle {`
`63`	`64`	`x: root.width * transform.center-x-percent - self.width / 2;`
`@@ -119,7 +120,7 @@ export component PreviewTransformLayers inherits Rectangle {`
`119`	`120`	`image-fit: ImageFit.contain;`
`120`	`121`	`transform-rotation: transform.rotation;`
`121`	`122`
`122`		`- Rectangle {`
	`123`	`+ if is-edited-track: Rectangle {`
`123`	`124`	`top-line := HorizontalLayout {`
`124`	`125`	`x: top-left-handle.x + top-left-handle.width / 2;`
`125`	`126`	`y: top-left-handle.y + top-left-handle.height / 2;`
`@@ -238,7 +239,7 @@ export component PreviewTransformLayers inherits Rectangle {`
`238`	`239`	`}`
`239`	`240`	`}`
`240`	`241`
`241`		`- TouchArea {`
	`242`	`+ if is-edited-track: TouchArea {`
`242`	`243`	`scroll-event(event) => {`
`243`	`244`	`if (Store.video-editor-keyboard-modifiers.shift) {`
`244`	`245`	`if (event.delta-y > 0) {`
`@@ -271,7 +272,7 @@ export component PreviewTransformLayers inherits Rectangle {`
`271`	`272`	`}`
`272`	`273`	`}`
`273`	`274`
`274`		`- TouchArea {`
	`275`	`+ if is-edited-track: TouchArea {`
`275`	`276`	`mouse-cursor: self.pressed ? grabbing : grab;`
`276`	`277`
`277`	`278`	`moved => {`
`@@ -288,7 +289,7 @@ export component PreviewTransformLayers inherits Rectangle {`
`288`	`289`	`}`
`289`	`290`	`}`
`290`	`291`
`291`		`- Rectangle {`
	`292`	`+ if is-edited-track: Rectangle {`
`292`	`293`	`y: img.height / 2 - self.height / 2;`
`293`	`294`	`width: Theme.icon-size * 1.5;`
`294`	`295`	`height: self.width;`