🎉 Rename frame with double click on the title

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)

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)

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

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 {})
+  (let [local            (mf/use-state {})
-        edit-input-ref (mf/use-ref)
+        shape-for-rename (mf/deref shape-for-rename-ref)
-        on-blur (fn [event]
+        name-ref         (mf/use-ref)
-                  (let [target (dom/event->target event)
+
-                        parent (.-parentNode target)
+        set-draggable (fn [value]
-                        parent (.-parentNode parent)
+                        (let [parent (.. (mf/ref-val name-ref)
-                        name (dom/get-value target)]
+                                         -parentNode
-                    (set! (.-draggable parent) true)
+                                         -parentNode)]
-                    (st/emit! (dw/update-shape (:id shape) {:name name}))
+                          (set! (.-draggable parent) value)))
-                    (swap! local assoc :edition false)))
+
+        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)
+                      (when (kbd/enter? event) (accept-edit))
-                        (on-blur event)))
+                      (when (kbd/esc? event) (cancel-edit)))]
-        on-click (fn [event]
+
-                   (dom/prevent-default event)
+    (mf/use-effect
-                   (let [parent (.-parentNode (.-target event))
+      (mf/deps shape-for-rename)
-                         parent (.-parentNode parent)]
+      #(when (and (= shape-for-rename (:id shape))
-                     (set! (.-draggable parent) false))
+                  (not (:edition @local)))
-                   (swap! local assoc :edition true))]
+         (start-edit)))
 
     (mf/use-effect
       (mf/deps (:edition @local))
       #(when (:edition @local)
-         (let [edit-input (mf/ref-val edit-input-ref)]
+         (let [name-input (mf/ref-val name-ref)]
-           (dom/select-text! edit-input))
+           (dom/select-text! name-input))
          nil))
 
     (if (:edition @local)
       [:input.element-name
        {:type "text"
-        :ref edit-input-ref
+        :ref name-ref
-        :on-blur on-blur
+        :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)) " *")])))
 

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)]))