[*] refactor

Author: heng30

todo.md

@@ -1,6 +1,4 @@
 ## 问题
-- segment 向右拖拽时，segment长度有时会发生跳变。检查有哪些缓存变量没有及时更新，导致segment长度跳变
-
 - 焦点获取问题，很多地方或获取程序焦点，导致快捷键无法成功使用
 
 - 圆形裁剪有问题，现在是椭圆形，不是圆形。宽和高不一致。

wayshot/ui/panel/desktop/video-editor/left-panel/media-library.slint

@@ -203,8 +203,6 @@ export component MediaLibrary inherits Rectangle {
                 }
 
                 if Store.video-editor-media-library-in-edit-mode: VerticalLayout {
-                    alignment: end;
-
                     Divider { }
 
                     HorizontalLayout {

wayshot/ui/panel/desktop/video-editor/preview/preview-crop-layers.slint

@@ -25,6 +25,21 @@ export component PreviewCropLayers inherits Rectangle {
         private property <CropDetail> crop: layer.crop;
         private property <bool> is-edited-track: Store.video-editor-current-edited-track-index == layer.track-index;
 
+        function keep-circle-size() {
+            let img-width = img.source.width;
+            let img-height = img.source.height;
+
+            let px-width = crop.width * img-width;
+            let px-height = crop.height * img-height;
+
+            if (px-width == px-height) {
+                return;
+            }
+            let diameter-px = min(px-width, px-height);
+            crop.width = diameter-px / img-width;
+            crop.height = diameter-px / img-height;
+        }
+
         container-rec := Rectangle {
             width: img.width;
             height: img.height;
@@ -297,7 +312,7 @@ export component PreviewCropLayers inherits Rectangle {
                     }
                 }
 
-                Rectangle {
+                if crop.shape == 0: Rectangle {
                     x: top-line.x;
                     y: top-line.y;
                     width: top-line.width;
@@ -307,13 +322,19 @@ export component PreviewCropLayers inherits Rectangle {
                 }
 
                 if crop.shape == 1: Rectangle {
+                    init => {
+                        keep-circle-size();
+                    }
+
                     x: top-line.x;
                     y: top-line.y;
                     width: top-line.width;
                     height: left-line.height;
                     border-radius: self.width / 2;
                     border-width: 2px;
                     border-color: Theme.danger-color;
+                    background: Theme.hover-background;
+                    opacity: Theme.golden-ratio;
                 }
 
                 top-line := HorizontalLayout {

wayshot/ui/panel/desktop/video-editor/right-panel/filter/filter.slint

@@ -265,10 +265,27 @@ component SegmentFilterList inherits Rectangle {
                 border-radius: Theme.border-radius;
                 background: selected-index == index ? Theme.checked-background.darker(20%) : (ta.has-hover ? Theme.thirdly-background : mod(index, 2) == 0 ? Theme.table-item-first : Theme.table-item-second);
 
+                private property <bool> is-manual-clicked;
+                private property inner-selected-index <=> root.selected-index;
+                changed inner-selected-index => {
+                    if (is-manual-clicked) {
+                        is-manual-clicked = false;
+                        return;
+                    }
+                    is-manual-clicked = false;
+
+                    VEFilter.selected-filter = filter;
+                    VEFilter.is-in-edit-mode = VEFilter.is-edit-mode-filter(filter.name);
+                    Store.video-editor-segment-filter-flag = !Store.video-editor-segment-filter-flag;
+                    root.filter-selected(filter.ty);
+                }
+
                 ta := TouchArea {
                     mouse-cursor: MouseCursor.pointer;
 
                     clicked => {
+                        is-manual-clicked = true;
+
                         if (selected-index == index) {
                             selected-index = -1;
                             VEFilter.selected-filter = { };
@@ -417,6 +434,10 @@ component SegmentFilter inherits Rectangle {
         }
     }
 
+    public function update-selected-index() {
+        sl.selected-index = segment.filters.length - 1;
+    }
+
     clip: true;
 
     tab := FilterDetailTab {
@@ -469,12 +490,10 @@ component SegmentFilter inherits Rectangle {
     rec := Rectangle {
         y: td.y + td.height;
         visible: sl.selected-index >= 0;
-        // visible: true; // todo
         max-height: root.height - tab.height;
         height: root.height * 2 / 3;
         background: Theme.secondary-background;
 
-        // todo
         if tab.checked-index == 0: FilterVideoDetail {
             y: 0;
             selected-filter: selected-filter;
@@ -494,7 +513,6 @@ component SegmentFilter inherits Rectangle {
         }
     }
 
-    // todo
     if sl.selected-index < 0: NoDataImg {
         y: td.y + td.height;
         height: root.height * 2 / 3;
@@ -671,17 +689,21 @@ component FilterSelector inherits VerticalLayout {
 export component Filter inherits Rectangle {
     private property <bool> is-show-selector;
     private property <FilterType> filter-tab-type;
+    private property <bool> update-selected-filter-flag;
     private property <bool> is-subtitle-track: Logic.video-editor-is-subtitle-track(Store.video-editor-current-edited-track-index);
     private property <bool> is-show-segment-filter: Store.video-editor-current-edited-track-index >= 0 && Store.video-editor-selected-segments-index.length > 0 && !is-subtitle-track;
 
-    // private property <bool> is-subtitle-track: true; // todo
-        // private property <bool> is-show-segment-filter: true; // todo
-
     if !is-show-segment-filter && !is-subtitle-track: NoDataImg {
         text: Logic.tr("No Filter");
     }
 
     if is-show-segment-filter: SegmentFilter {
+        private property flag <=> root.update-selected-filter-flag;
+
+        changed flag => {
+            self.update-selected-index();
+        }
+
         open-filters-selector(ty) => {
             is-show-selector = true;
             filter-tab-type = ty;
@@ -699,6 +721,7 @@ export component Filter inherits Rectangle {
             clicked(entry) => {
                 VEFilter.add-filter(entry);
                 is-show-selector = false;
+                root.update-selected-filter-flag = !root.update-selected-filter-flag;
             }
 
             preset-clicked(filter) => {
@@ -718,6 +741,7 @@ export component Filter inherits Rectangle {
             clicked(entry) => {
                 VEFilter.add-filter(entry);
                 is-show-selector = false;
+                root.update-selected-filter-flag = !root.update-selected-filter-flag;
             }
 
             preset-clicked(filter) => {
@@ -737,6 +761,7 @@ export component Filter inherits Rectangle {
             clicked(entry) => {
                 VEFilter.add-filter(entry);
                 is-show-selector = false;
+                root.update-selected-filter-flag = !root.update-selected-filter-flag;
             }
 
             preset-clicked(filter) => {

wayshot/ui/store.slint

@@ -836,7 +836,20 @@ export global Store {
 
     in-out property <bool> video-editor-playlist-in-edit-mode;
     in-out property <bool> video-editor-media-library-in-edit-mode;
-    in-out property <[VideoEditorPlaylistItem]> video-editor-playlist: [];
+    in-out property <[VideoEditorPlaylistItem]> video-editor-playlist: [
+        // {
+        //     file-path: "xxxx",
+        //     name: "xxxxxx",
+        //     media-type: MediaType.Video,
+        //     file-size: "10M",
+        // },
+        // {
+        //     file-path: "xxxx",
+        //     name: "xxxxxx",
+        //     media-type: MediaType.Video,
+        //     file-size: "10M",
+        // },
+    ];
     in-out property <[VideoEditorPlaylistItem]> video-editor-media-library: [];
 
     in-out property <bool> video-editor-is-recording-audio;