From 86936a66e0d20c23e2972bfe6d0ef03dfc64e734 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 21 Jan 2021 16:09:13 +0100 Subject: [PATCH] :bug: Fixed issues with text selection and edition --- frontend/src/app/main/ui/modal.cljs | 2 +- .../src/app/main/ui/workspace/effects.cljs | 29 +-- .../src/app/main/ui/workspace/selection.cljs | 170 +++++++++++------- .../app/main/ui/workspace/shapes/frame.cljs | 33 ++-- .../main/ui/workspace/shapes/path/editor.cljs | 13 +- .../app/main/ui/workspace/shapes/text.cljs | 3 +- .../main/ui/workspace/shapes/text/editor.cljs | 15 +- .../src/app/main/ui/workspace/viewport.cljs | 5 +- frontend/src/app/util/dom.cljs | 3 + 9 files changed, 164 insertions(+), 109 deletions(-) diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs index e9fa25c7a..a3de8bf92 100644 --- a/frontend/src/app/main/ui/modal.cljs +++ b/frontend/src/app/main/ui/modal.cljs @@ -50,7 +50,7 @@ (when (and wrapper (not allow-click-outside) (not (.contains wrapper current)) - (not (= type (keyword (.getAttribute current "data-allow-click-modal"))))) + (not (= type (keyword (dom/get-data current "allow-click-modal"))))) (dom/stop-propagation event) (dom/prevent-default event) (st/emit! (dm/hide))))) diff --git a/frontend/src/app/main/ui/workspace/effects.cljs b/frontend/src/app/main/ui/workspace/effects.cljs index f35dc62c4..b646717ec 100644 --- a/frontend/src/app/main/ui/workspace/effects.cljs +++ b/frontend/src/app/main/ui/workspace/effects.cljs @@ -52,21 +52,24 @@ drawing? @refs/selected-drawing-tool button (.-which (.-nativeEvent event)) shift? (kbd/shift? event) - ctrl? (kbd/ctrl? event)] - (dom/prevent-default event) - (when-not blocked + ctrl? (kbd/ctrl? event) + + allow-click? (and (not blocked) + (not drawing?) + (not ctrl?) + (not edition))] + + (when (and (= button 1) allow-click?) (cond - (or (not= 1 button) drawing? ctrl? edition) - nil - - (= type :frame) - (when selected? - (do - (dom/stop-propagation event) - (st/emit! (dw/start-move-selected)))) - - :else + (and (= type :frame) selected?) (do + (dom/prevent-default event) + (dom/stop-propagation event) + (st/emit! (dw/start-move-selected))) + + (not= type :frame) + (do + (dom/prevent-default event) (dom/stop-propagation event) (let [toggle-selected? (and selected? shift?) diff --git a/frontend/src/app/main/ui/workspace/selection.cljs b/frontend/src/app/main/ui/workspace/selection.cljs index 911db1deb..76f57dbdc 100644 --- a/frontend/src/app/main/ui/workspace/selection.cljs +++ b/frontend/src/app/main/ui/workspace/selection.cljs @@ -34,7 +34,7 @@ [app.main.ui.measurements :as msr] [app.main.ui.workspace.shapes.path.editor :refer [path-editor]])) -(def rotation-handler-size 25) +(def rotation-handler-size 20) (def resize-point-radius 4) (def resize-point-circle-radius 10) (def resize-point-rect-size 8) @@ -43,6 +43,7 @@ (def selection-rect-color-component "#00E0FF") (def selection-rect-width 1) (def min-selrect-side 10) +(def small-selrect-side 30) (mf/defc selection-rect [{:keys [transform rect zoom color]}] (when rect @@ -57,66 +58,78 @@ :stroke-width (/ selection-rect-width zoom) :fill "transparent"}}]))) -(defn- handlers-for-selection [{:keys [x y width height]}] - (->> - [ ;; TOP-LEFT - {:type :rotation - :position :top-left - :props {:cx x :cy y}} +(defn- handlers-for-selection [{:keys [x y width height]} {:keys [type]} zoom] + (let [zoom-width (* width zoom) + zoom-height (* height zoom) - (when (and (> width min-selrect-side) (> height min-selrect-side)) - {:type :resize-point + align (when (or (<= zoom-width small-selrect-side) + (<= zoom-height small-selrect-side)) + :outside) + show-resize-point? (or (not= type :path) + (and + (> zoom-width min-selrect-side) + (> zoom-height min-selrect-side))) + min-side-top? (or (not= type :path) (> zoom-height min-selrect-side)) + min-side-side? (or (not= type :path) (> zoom-width min-selrect-side))] + (->> + [ ;; TOP-LEFT + {:type :rotation :position :top-left - :props {:cx x :cy y}}) + :props {:cx x :cy y}} - {:type :rotation - :position :top-right - :props {:cx (+ x width) :cy y}} + (when show-resize-point? + {:type :resize-point + :position :top-left + :props {:cx x :cy y :align align}}) - (when (and (> width min-selrect-side) (> height min-selrect-side)) - {:type :resize-point + {:type :rotation :position :top-right - :props {:cx (+ x width) :cy y}}) + :props {:cx (+ x width) :cy y}} - {:type :rotation - :position :bottom-right - :props {:cx (+ x width) :cy (+ y height)}} + (when show-resize-point? + {:type :resize-point + :position :top-right + :props {:cx (+ x width) :cy y :align align}}) - (when (and (> width min-selrect-side) (> height min-selrect-side)) - {:type :resize-point + {:type :rotation :position :bottom-right - :props {:cx (+ x width) :cy (+ y height)}}) + :props {:cx (+ x width) :cy (+ y height)}} - {:type :rotation - :position :bottom-left - :props {:cx x :cy (+ y height)}} + (when show-resize-point? + {:type :resize-point + :position :bottom-right + :props {:cx (+ x width) :cy (+ y height) :align align}}) - (when (and (> width min-selrect-side) (> height min-selrect-side)) - {:type :resize-point + {:type :rotation :position :bottom-left - :props {:cx x :cy (+ y height)}}) + :props {:cx x :cy (+ y height)}} - (when (> height min-selrect-side) - {:type :resize-side - :position :top - :props {:x x :y y :length width :angle 0 }}) + (when show-resize-point? + {:type :resize-point + :position :bottom-left + :props {:cx x :cy (+ y height) :align align}}) - (when (> width min-selrect-side) - {:type :resize-side - :position :right - :props {:x (+ x width) :y y :length height :angle 90 }}) + (when min-side-top? + {:type :resize-side + :position :top + :props {:x x :y y :length width :angle 0 :align align}}) - (when (> height min-selrect-side) - {:type :resize-side - :position :bottom - :props {:x (+ x width) :y (+ y height) :length width :angle 180 }}) + (when min-side-side? + {:type :resize-side + :position :right + :props {:x (+ x width) :y y :length height :angle 90 :align align}}) - (when (> width min-selrect-side) - {:type :resize-side - :position :left - :props {:x x :y (+ y height) :length height :angle 270 }})] + (when min-side-top? + {:type :resize-side + :position :bottom + :props {:x (+ x width) :y (+ y height) :length width :angle 180 :align align}}) - (filterv (comp not nil?)))) + (when min-side-side? + {:type :resize-side + :position :left + :props {:x x :y (+ y height) :length height :angle 270 :align align}})] + + (filterv (comp not nil?))))) (mf/defc rotation-handler [{:keys [cx cy transform position rotation zoom on-rotate]}] (let [size (/ rotation-handler-size zoom) @@ -137,13 +150,11 @@ :on-mouse-down on-rotate}])) (mf/defc resize-point-handler - [{:keys [cx cy zoom position on-resize transform rotation color overflow-text]}] - (let [{cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform) - rot-square (case position - :top-left 0 - :top-right 90 - :bottom-right 180 - :bottom-left 270)] + [{:keys [cx cy zoom position on-resize transform rotation color overflow-text align]}] + (let [cursor (if (#{:top-left :bottom-right} position) + (cur/resize-nesw rotation) (cur/resize-nwse rotation)) + {cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform)] + [:g.resize-handler [:circle {:r (/ resize-point-radius zoom) :style {:fillOpacity "1" @@ -154,24 +165,53 @@ :cx cx' :cy cy'}] - [:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %) - :r (/ resize-point-circle-radius zoom) - :fill (if (debug? :resize-handler) "red" "transparent") - :cx cx' - :cy cy' - :style {:cursor (if (#{:top-left :bottom-right} position) - (cur/resize-nesw rotation) (cur/resize-nwse rotation))}}] - ])) + (if (= align :outside) + (let [resize-point-circle-radius (/ resize-point-circle-radius zoom) + offset-x (if (#{:top-right :bottom-right} position) 0 (- resize-point-circle-radius)) + offset-y (if (#{:bottom-left :bottom-right} position) 0 (- resize-point-circle-radius)) + cx (+ cx offset-x) + cy (+ cy offset-y) + {cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform)] + [:rect {:x cx' + :y cy' + :width resize-point-circle-radius + :height resize-point-circle-radius + :transform (str/fmt "rotate(%s, %s, %s)" rotation cx' cy') + :style {:fill (if (debug? :resize-handler) "red" "transparent") + :cursor cursor} + :on-mouse-down #(on-resize {:x cx' :y cy'} %)}]) -(mf/defc resize-side-handler [{:keys [x y length angle zoom position rotation transform on-resize]}] + (let [rot-square (case position + :top-left 0 + :top-right 90 + :bottom-right 180 + :bottom-left 270)] + [:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %) + :r (/ resize-point-circle-radius zoom) + :cx cx' + :cy cy' + :style {:fill (if (debug? :resize-handler) "red" "transparent") + :cursor cursor}}]) + )])) + +(mf/defc resize-side-handler + "The side handler is always rendered horizontaly and then rotated" + [{:keys [x y length align angle zoom position rotation transform on-resize]}] (let [res-point (if (#{:top :bottom} position) {:y y} {:x x}) target-length (max 0 (- length (/ (* resize-point-rect-size 2) zoom))) + width (if (< target-length 6) length target-length) - height (/ resize-side-height zoom)] - [:rect {:x (+ x (/ (- length width) 2)) - :y (- y (/ height 2)) + height (/ resize-side-height zoom) + + offset-x (/ (- length width) 2) + offset-y (if (= align :outside) (- height) (- (/ height 2))) + + target-x (+ x offset-x) + target-y (+ y offset-y)] + [:rect {:x target-x + :y target-y :width width :height height :transform (gmt/multiply transform @@ -217,7 +257,7 @@ [:& outline {:shape shape :color color}] ;; Handlers - (for [{:keys [type position props]} (handlers-for-selection selrect)] + (for [{:keys [type position props]} (handlers-for-selection selrect shape zoom)] (let [common-props {:key (str (name type) "-" (name position)) :zoom zoom :position position diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 72c2cbbb9..0afcd9c19 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -43,20 +43,23 @@ (recur (first ids) (rest ids)) false)))))) -(defn use-select-shape [{:keys [id]}] +(defn use-select-shape [{:keys [id]} edition] (mf/use-callback - (mf/deps id) + (mf/deps id edition) (fn [event] - (let [selected @refs/selected-shapes - selected? (contains? selected id)] - (dom/prevent-default event) - (if selected? - (when (kbd/shift? event) - (st/emit! (dw/select-shape id true))) - (do - (when-not (or (empty? selected) (kbd/shift? event)) - (st/emit! (dw/deselect-all))) - (st/emit! (dw/select-shape id)))))))) + (when (not edition) + (let [selected @refs/selected-shapes + selected? (contains? selected id) + shift? (kbd/shift? event)] + (cond + (and selected? shift?) + (st/emit! (dw/select-shape id true)) + + (and (not (empty? selected)) (not shift?)) + (st/emit! (dw/deselect-all) (dw/select-shape id)) + + (not selected?) + (st/emit! (dw/select-shape id)))))))) ;; Ensure that the label has always the same font ;; size, regardless of zoom @@ -72,8 +75,9 @@ [{:keys [frame]}] (let [{:keys [width x y]} frame zoom (mf/deref refs/selected-zoom) + edition (mf/deref refs/selected-edition) label-pos (gpt/point x (- y (/ 10 zoom))) - handle-click (use-select-shape frame) + handle-click (use-select-shape frame edition) handle-pointer-enter (we/use-pointer-enter frame) handle-pointer-leave (we/use-pointer-leave frame)] [:text {:x 0 @@ -123,6 +127,7 @@ (let [shape (unchecked-get props "shape") objects (unchecked-get props "objects") ghost? (mf/use-ctx muc/ghost-ctx) + edition (mf/deref refs/selected-edition) moving-iref (mf/use-memo (mf/deps (:id shape)) #(make-is-moving-ref (:id shape))) @@ -137,7 +142,7 @@ ds-modifier (get-in shape [:modifiers :displacement]) handle-context-menu (we/use-context-menu shape) - handle-double-click (use-select-shape shape) + handle-double-click (use-select-shape shape edition) handle-mouse-down (we/use-mouse-down shape) hide-moving? (and (not ghost?) moving?)] diff --git a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs index e8367bcd0..52ce86258 100644 --- a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs @@ -45,6 +45,7 @@ (and (= edit-mode :move) selected?) (st/emit! (drp/deselect-node position)))))) + on-mouse-down (fn [event] (when-not last-p? @@ -60,6 +61,7 @@ (and (= edit-mode :draw) (not start-path?)) (st/emit! (drp/close-path-drag-start position))))))] + [:g.path-point [:circle.path-point {:cx x @@ -182,11 +184,18 @@ editor-dom (mf/ref-val editor-ref)] (when-not (or (.contains editor-dom current) (dom/class? current "viewport-actions-entry")) - (st/emit! (drp/deselect-all)))))] + (st/emit! (drp/deselect-all))))) + + handle-double-click-outside + (fn [event] + (when (= edit-mode :move) + (st/emit! :interrupt)))] (mf/use-layout-effect + (mf/deps edit-mode) (fn [] - (let [keys [(events/listen js/document EventType.CLICK handle-click-outside)]] + (let [keys [(events/listen (dom/get-root) EventType.CLICK handle-click-outside) + (events/listen (dom/get-root) EventType.DBLCLICK handle-double-click-outside)]] #(doseq [key keys] (events/unlistenByKey key))))) diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index 1d10b2347..40f1ba745 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -59,7 +59,6 @@ render-editor (mf/use-state false) edition? (= edition id) - embed-resources? (mf/use-ctx muc/embed-ctx) handle-mouse-down (we/use-mouse-down shape) @@ -116,7 +115,7 @@ :shape shape :selected? selected? :grow-type (:grow-type shape)}]] - (when edition? + (when (and (not ghost?) edition?) [:& editor/text-shape-edit {:key (str "editor" (:id shape)) :shape shape}]) diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index 79b27658f..665065b8f 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -167,19 +167,18 @@ on-click-outside (fn [event] - (let [options (dom/get-element-by-class "element-options") + (let [target (dom/get-target event) + options (dom/get-element-by-class "element-options") assets (dom/get-element-by-class "assets-bar") cpicker (dom/get-element-by-class "colorpicker-tooltip") self (mf/ref-val self-ref) - target (dom/get-target event) selecting? (mf/ref-val selecting-ref)] + (when-not (or (and options (.contains options target)) (and assets (.contains assets target)) (and self (.contains self target)) (and cpicker (.contains cpicker target))) (do - (dom/prevent-default event) - (dom/stop-propagation event) (if selecting? (mf/set-ref-val! selecting-ref false) @@ -203,16 +202,16 @@ on-mount (fn [] - (let [lkey1 (events/listen js/document EventType.CLICK on-click-outside) - lkey2 (events/listen js/document EventType.KEYUP on-key-up)] + (let [keys [(events/listen js/document EventType.CLICK on-click-outside) + (events/listen js/document EventType.KEYUP on-key-up)]] (st/emit! (dwt/assign-editor id editor) (dwc/start-undo-transaction)) #(do (st/emit! (dwt/assign-editor id nil) (dwc/commit-undo-transaction)) - (events/unlistenByKey lkey1) - (events/unlistenByKey lkey2)))) + (doseq [key keys] + (events/unlistenByKey key))))) on-focus (fn [event] diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index cf5417551..cbf3beb37 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -345,10 +345,7 @@ (let [ctrl? (kbd/ctrl? event) shift? (kbd/shift? event) alt? (kbd/alt? event)] - (st/emit! (ms/->MouseEvent :double-click ctrl? shift? alt?)) - - (if (not drawing-path?) - (st/emit! dw/clear-edition-mode))))) + (st/emit! (ms/->MouseEvent :double-click ctrl? shift? alt?))))) on-key-down (mf/use-callback diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index bf42d709f..c446c5baa 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -253,3 +253,6 @@ (defn active? [node] (= (.-activeElement js/document) node)) + +(defn get-data [^js node ^string attr] + (.getAttribute node (str "data-" attr)))