diff --git a/CHANGES.md b/CHANGES.md index 406336ce0d..d47f02e453 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -27,6 +27,7 @@ - Improve french translations [#731](https://github.com/penpot/penpot/pull/731) - Reimplement workspace presence (remove database state). - Remember last visited team when you re-enter the application [Taiga #1376](https://tree.taiga.io/project/penpot/us/1376) +- Rename artboard with double click on the title [Taiga #1392](https://tree.taiga.io/project/penpot/us/1392) - Replace Slate-Editor with DraftJS [Taiga #1346](https://tree.taiga.io/project/penpot/us/1346) - Set proper page title [Taiga #1377](https://tree.taiga.io/project/penpot/us/1377) - Several enhancements in shape selection [Taiga #1195](https://tree.taiga.io/project/penpot/us/1195) diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index 08d079d5f7..3127d69145 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -423,13 +423,6 @@ (rx/tap on-success) (rx/catch on-error)))))) -(def clear-project-for-edit - (ptk/reify ::clear-project-for-edit - ptk/UpdateEvent - (update [_ state] - (assoc-in state [:dashboard-local :project-for-edit] nil)))) - - (defn toggle-project-pin [{:keys [id is-pinned team-id] :as params}] (us/assert ::project params) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 1334cbad8d..cff48386b4 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -599,7 +599,6 @@ (assoc :zoom zoom) (update :vbox merge srect))))))))))) - ;; --- Update Shape Attrs (defn update-shape @@ -611,6 +610,21 @@ (watch [_ state stream] (rx/of (dwc/update-shapes [id] #(merge % attrs)))))) +(defn start-rename-shape + [id] + (us/verify ::us/uuid id) + (ptk/reify ::start-rename-shape + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-local :shape-for-rename] id)))) + +(defn end-rename-shape + [] + (ptk/reify ::end-rename-shape + ptk/UpdateEvent + (update [_ state] + (update-in state [:workspace-local] dissoc :shape-for-rename)))) + ;; --- Update Selected Shapes attrs (defn update-selected-shapes diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 8e0852aa94..ecd5f26ee9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -50,45 +50,66 @@ ;; --- Layer Name +(def shape-for-rename-ref + (l/derived (l/in [:workspace-local :shape-for-rename]) st/state)) + (mf/defc layer-name [{:keys [shape] :as props}] - (let [local (mf/use-state {}) - edit-input-ref (mf/use-ref) - on-blur (fn [event] - (let [target (dom/event->target event) - parent (.-parentNode target) - parent (.-parentNode parent) - name (dom/get-value target)] - (set! (.-draggable parent) true) - (st/emit! (dw/update-shape (:id shape) {:name name})) - (swap! local assoc :edition false))) + (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) + (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) + (swap! local assoc :edition false) + (st/emit! (dw/end-rename-shape) + (dw/update-shape (:id shape) {:name name})))) + + cancel-edit (fn [] + (set-draggable true) + (swap! local assoc :edition false) + (st/emit! (dw/end-rename-shape))) + on-key-down (fn [event] - (when (kbd/enter? event) - (on-blur event))) - on-click (fn [event] - (dom/prevent-default event) - (let [parent (.-parentNode (.-target event)) - parent (.-parentNode parent)] - (set! (.-draggable parent) false)) - (swap! local assoc :edition true))] + (when (kbd/enter? event) (accept-edit)) + (when (kbd/esc? event) (cancel-edit)))] + + (mf/use-effect + (mf/deps shape-for-rename) + #(when (and (= shape-for-rename (:id shape)) + (not (:edition @local))) + (start-edit))) (mf/use-effect (mf/deps (:edition @local)) #(when (:edition @local) - (let [edit-input (mf/ref-val edit-input-ref)] - (dom/select-text! edit-input)) + (let [name-input (mf/ref-val name-ref)] + (dom/select-text! name-input)) nil)) (if (:edition @local) [:input.element-name {:type "text" - :ref edit-input-ref - :on-blur on-blur + :ref name-ref + :on-blur accept-edit :on-key-down on-key-down :auto-focus true :default-value (:name shape "")}] [:span.element-name - {:on-double-click on-click} + {:ref name-ref + :on-double-click start-edit} (:name shape "") (when (seq (:touched shape)) " *")]))) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 073dadd560..679c824f8c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -12,7 +12,9 @@ [app.common.geom.point :as gpt] [app.common.geom.shapes :as gsh] [app.common.pages :as cp] + [app.main.data.workspace :as dw] [app.main.refs :as refs] + [app.main.store :as st] [app.main.streams :as ms] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.shapes.outline :refer [outline]] @@ -124,6 +126,12 @@ (dom/stop-propagation event) (on-frame-select event (:id frame)))) + on-double-click + (mf/use-callback + (mf/deps (:id frame)) + (st/emitf (dw/go-to-layout :layers) + (dw/start-rename-shape (:id frame)))) + on-pointer-enter (mf/use-callback (mf/deps (:id frame) on-frame-enter) @@ -146,6 +154,7 @@ (text-transform label-pos zoom)) :style {:fill (when selected? "#28c295")} :on-mouse-down on-mouse-down + :on-double-click on-double-click :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave} (:name frame)]))