From cd7ad03cf0b6c58475a242890f724725b52a7779 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 29 Mar 2021 12:56:51 +0200
Subject: [PATCH] :bug: Fix drag-select when renaming layer text
---
CHANGES.md | 1 +
frontend/src/app/main/ui/hooks.cljs | 20 +++++++++++-------
.../app/main/ui/workspace/sidebar/layers.cljs | 21 +++++++++----------
3 files changed, 23 insertions(+), 19 deletions(-)
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")