diff --git a/CHANGES.md b/CHANGES.md index d82692940..efa75abdd 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -64,6 +64,7 @@ - Fix cannot click on blocked elements in viewer [Taiga #1430](https://tree.taiga.io/project/penpot/issue/1430) - Fix SVG not showing properties at code [Taiga #1437](https://tree.taiga.io/project/penpot/issue/1437) - Fix shadows when exporting groups [Taiga #1495](https://tree.taiga.io/project/penpot/issue/1495) +- Fix drag-select when renaming layer text [Taiga #1307](https://tree.taiga.io/project/penpot/issue/1307) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs index 81c7f6fa4..81fcba93e 100644 --- a/frontend/src/app/main/ui/hooks.cljs +++ b/frontend/src/app/main/ui/hooks.cljs @@ -14,6 +14,7 @@ [app.common.spec :as us] [app.main.data.shortcuts :refer [bind-shortcuts]] [app.util.dom :as dom] + [app.util.object :as obj] [app.util.dom.dnd :as dnd] [app.util.logging :as log] [app.util.timers :as ts] @@ -97,7 +98,7 @@ ;; things go weird. (defn use-sortable - [& {:keys [data-type data on-drop on-drag on-hold detect-center?] :as opts}] + [& {:keys [data-type data on-drop on-drag on-hold disabled detect-center?] :as opts}] (let [ref (mf/use-ref) state (mf/use-state {:over nil :timer nil @@ -125,13 +126,16 @@ on-drag-start (fn [event] - (dom/stop-propagation event) - ;; (dnd/trace event data "drag-start") - (dnd/set-data! event data-type data) - (dnd/set-drag-image! event (invisible-image)) - (dnd/set-allowed-effect! event "move") - (when (fn? on-drag) - (on-drag data))) + (if disabled + (dom/prevent-default event) + (let [target (dom/get-target event)] + (dom/stop-propagation event) + ;; (dnd/trace event data "drag-start") + (dnd/set-data! event data-type data) + (dnd/set-drag-image! event (invisible-image)) + (dnd/set-allowed-effect! event "move") + (when (fn? on-drag) + (on-drag data))))) on-drag-enter (fn [event] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index ecd5f26ee..b49e90087 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -54,31 +54,25 @@ (l/derived (l/in [:workspace-local :shape-for-rename]) st/state)) (mf/defc layer-name - [{:keys [shape] :as props}] + [{:keys [shape on-start-edit on-stop-edit] :as props}] (let [local (mf/use-state {}) shape-for-rename (mf/deref shape-for-rename-ref) name-ref (mf/use-ref) - set-draggable (fn [value] - (let [parent (.. (mf/ref-val name-ref) - -parentNode - -parentNode)] - (set! (.-draggable parent) value))) - start-edit (fn [] - (set-draggable false) + (on-start-edit) (swap! local assoc :edition true)) accept-edit (fn [] (let [name-input (mf/ref-val name-ref) name (dom/get-value name-input)] - (set-draggable true) + (on-stop-edit) (swap! local assoc :edition false) (st/emit! (dw/end-rename-shape) (dw/update-shape (:id shape) {:name name})))) cancel-edit (fn [] - (set-draggable true) + (on-stop-edit) (swap! local assoc :edition false) (st/emit! (dw/end-rename-shape))) @@ -124,6 +118,8 @@ selected? (contains? selected id) container? (or (= (:type item) :frame) (= (:type item) :group)) + disable-drag (mf/use-state false) + expanded-iref (mf/use-memo (mf/deps id) (make-collapsed-iref id)) @@ -203,6 +199,7 @@ :on-drop on-drop :on-drag on-drag :on-hold on-hold + :disabled @disable-drag :detect-center? container? :data {:id (:id item) :index index @@ -229,7 +226,9 @@ :on-click select-shape :on-double-click #(dom/stop-propagation %)} [:& element-icon {:shape item}] - [:& layer-name {:shape item}] + [:& layer-name {:shape item + :on-start-edit #(reset! disable-drag true) + :on-stop-edit #(reset! disable-drag false)}] [:div.element-actions [:div.toggle-element {:class (when (:hidden item) "selected")