Merge pull request #1078 from penpot/enhancement/shape-to-path

Double click won't make a shape a path until you change a node

CHANGES.md

@@ -14,6 +14,7 @@
 - Preserve components if possible, when pasted into a different file [Taiga #1063](https://tree.taiga.io/project/penpot/issue/1063).
 - Add the ability to offload file data to a cheaper storage when file becomes inactive.
 - Import/Export Penpot files from dashboard.
+- Double click won't make a shape a path until you change a node [Taiga #]
 
 ### :bug: Bugs fixed
 

frontend/src/app/main/data/workspace.cljs

@@ -1046,14 +1046,11 @@
               :text
               (rx/of (dwc/start-edition-mode id))
 
-              :path
-              (rx/of (dwc/start-edition-mode id)
-                     (dwdp/start-path-edit id))
-
               :group
               (rx/of (dwc/select-shapes (into (d/ordered-set) [(last shapes)])))
 
-              (rx/empty))))))))
+              (rx/of (dwc/start-edition-mode id)
+                     (dwdp/start-path-edit id)))))))))
 
 
 ;; --- Change Page Order (D&D Ordering)
@@ -1825,7 +1822,6 @@
 (d/export dwt/update-dimensions)
 (d/export dwt/flip-horizontal-selected)
 (d/export dwt/flip-vertical-selected)
-(d/export dwt/selected-to-path)
 
 ;; Persistence
 

frontend/src/app/main/data/workspace/path/changes.cljs

@@ -76,12 +76,13 @@
    (ptk/reify ::save-path-content
      ptk/UpdateEvent
      (update [_ state]
-       (let [content (get-in state (st/get-path state :content))
+       (let [content (st/get-path state :content)
              content (if (and (not preserve-move-to)
                               (= (-> content last :command) :move-to))
                        (into [] (take (dec (count content)) content))
                        content)]
-         (assoc-in state (st/get-path state :content) content)))
+         (-> state
+             (st/set-content content))))
 
      ptk/WatchEvent
      (watch [it state _]
@@ -89,7 +90,7 @@
              page-id     (:current-page-id state)
              id          (get-in state [:workspace-local :edition])
              old-content (get-in state [:workspace-local :edit-path id :old-content])
-             shape (get-in state (st/get-path state))]
+             shape       (st/get-path state)]
          (if (and (some? old-content) (some? (:id shape)))
            (let [[rch uch] (generate-path-changes objects page-id shape old-content (:content shape))]
              (rx/of (dch/commit-changes {:redo-changes rch

frontend/src/app/main/data/workspace/path/drawing.cljs

@@ -9,6 +9,7 @@
    [app.common.geom.point :as gpt]
    [app.common.pages :as cp]
    [app.common.spec :as us]
+   [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.drawing.common :as dwdc]
    [app.main.data.workspace.path.changes :as changes]
@@ -22,6 +23,7 @@
    [app.main.streams :as ms]
    [app.util.path.commands :as upc]
    [app.util.path.geom :as upg]
+   [app.util.path.shapes-to-path :as upsp]
    [beicon.core :as rx]
    [potok.core :as ptk]))
 
@@ -36,7 +38,7 @@
             last-point (get-in state [:workspace-local :edit-path id :last-point])
             position (cond-> (gpt/point x y)
                        fix-angle? (helpers/position-fixed-angle last-point))
-            shape (get-in state (st/get-path state))
+            shape (st/get-path state)
             {:keys [last-point prev-handler]} (get-in state [:workspace-local :edit-path id])
             command (helpers/next-node shape position last-point prev-handler)]
         (assoc-in state [:workspace-local :edit-path id :preview] command)))))
@@ -55,7 +57,7 @@
               (assoc-in  [:workspace-local :edit-path id :last-point] position)
               (update-in [:workspace-local :edit-path id] dissoc :prev-handler)
               (update-in [:workspace-local :edit-path id] dissoc :preview)
-              (update-in (st/get-path state) helpers/append-node position last-point prev-handler))
+              (update-in (st/get-path-location state) helpers/append-node position last-point prev-handler))
           state)))))
 
 (defn drag-handler
@@ -66,7 +68,7 @@
      ptk/UpdateEvent
      (update [_ state]
        (let [id (st/get-path-id state)
-             content (get-in state (st/get-path state :content))
+             content (st/get-path state :content)
 
              index (or index (count content))
              prefix (or prefix :c1)
@@ -96,16 +98,16 @@
       (let [id (st/get-path-id state)
 
             modifiers (get-in state [:workspace-local :edit-path id :content-modifiers])
-            content (-> (get-in state (st/get-path state :content))
+            content (-> (st/get-path state :content)
                         (upc/apply-content-modifiers modifiers))
 
             handler (get-in state [:workspace-local :edit-path id :drag-handler])]
         (-> state
-            (assoc-in (st/get-path state :content) content)
+            (st/set-content content)
             (update-in [:workspace-local :edit-path id] dissoc :drag-handler)
             (update-in [:workspace-local :edit-path id] dissoc :content-modifiers)
             (assoc-in  [:workspace-local :edit-path id :prev-handler] handler)
-            (update-in (st/get-path state) helpers/update-selrect))))
+            (update-in (st/get-path-location state) helpers/update-selrect))))
 
     ptk/WatchEvent
     (watch [_ state _]
@@ -126,7 +128,7 @@
             (->> stream (rx/filter #(or (helpers/end-path-event? %)
                                         (ms/mouse-up? %))))
 
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             snap-toggled (get-in state [:workspace-local :edit-path id :snap-toggled])
             points (upg/content->points content)
 
@@ -163,7 +165,7 @@
     (watch [_ state stream]
       (let [mouse-up    (->> stream (rx/filter #(or (helpers/end-path-event? %)
                                                     (ms/mouse-up? %))))
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             points (upg/content->points content)
 
             id (st/get-path-id state)
@@ -218,7 +220,7 @@
             mouse-down      (->> stream (rx/filter ms/mouse-down?))
             end-path-events (->> stream (rx/filter helpers/end-path-event?))
 
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             points (upg/content->points content)
 
             id (st/get-path-id state)
@@ -316,6 +318,7 @@
             edit-mode (get-in state [:workspace-local :edit-path id :edit-mode])]
         (if (= :draw edit-mode)
           (rx/concat
+           (rx/of (dch/update-shapes [id] upsp/convert-to-path))
            (rx/of (handle-drawing-path id))
            (->> stream
                 (rx/filter (ptk/type? ::common/finish-path))
@@ -328,7 +331,7 @@
     ptk/WatchEvent
     (watch [_ state _]
       (let [id (st/get-path-id state)
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             old-content (get-in state [:workspace-local :edit-path id :old-content])
             mode (get-in state [:workspace-local :edit-path id :edit-mode])]
 

frontend/src/app/main/data/workspace/path/edition.cljs

@@ -21,6 +21,7 @@
    [app.main.streams :as ms]
    [app.util.path.commands :as upc]
    [app.util.path.geom :as upg]
+   [app.util.path.shapes-to-path :as upsp]
    [app.util.path.subpaths :as ups]
    [app.util.path.tools :as upt]
    [beicon.core :as rx]
@@ -31,8 +32,7 @@
     ptk/UpdateEvent
     (update [_ state]
 
-      (let [content (get-in state (st/get-path state :content))
+      (let [content (st/get-path state :content)
-
             modifiers (helpers/move-handler-modifiers content index prefix false match-opposite? dx dy)
             [cx cy] (if (= prefix :c1) [:c1x :c1y] [:c2x :c2y])
             point (gpt/point (+ (get-in content [index :params cx]) dx)
@@ -50,7 +50,7 @@
 
             id (st/get-path-id state)
             page-id (:current-page-id state)
-            shape (get-in state (st/get-path state))
+            shape (st/get-path state)
             content-modifiers (get-in state [:workspace-local :edit-path id :content-modifiers])
 
             content (:content shape)
@@ -100,7 +100,7 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [id (st/get-path-id state)
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             modifiers-reducer (partial modify-content-point content move-modifier)
             content-modifiers (get-in state [:workspace-local :edit-path id :content-modifiers] {})
             content-modifiers (->> points
@@ -114,7 +114,7 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [id (st/get-path-id state)
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             delta (gpt/subtract to-point from-point)
 
             modifiers-reducer (partial modify-content-point content delta)
@@ -141,6 +141,7 @@
             selected? (contains? selected-points position)]
         (streams/drag-stream
          (rx/of
+          (dch/update-shapes [id] upsp/convert-to-path)
           (when-not selected? (selection/select-node position shift?))
           (drag-selected-points @ms/mouse-position))
          (rx/of (selection/select-node position shift?)))))))
@@ -156,7 +157,7 @@
 
             selected-points (get-in state [:workspace-local :edit-path id :selected-points] #{})
 
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             points (upg/content->points content)]
 
         (rx/concat
@@ -221,6 +222,7 @@
                   mov-vec (gpt/multiply (get-displacement direction) scale)]
 
               (rx/concat
+               (rx/of (dch/update-shapes [id] upsp/convert-to-path))
                (rx/merge
                 (->> move-events
                      (rx/take-until stopper)
@@ -247,7 +249,7 @@
             start-delta-x (get-in modifiers [index cx] 0)
             start-delta-y (get-in modifiers [index cy] 0)
 
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             points (upg/content->points content)
 
             point (-> content (get (if (= prefix :c1) (dec index) index)) (upc/command->point))
@@ -260,6 +262,7 @@
 
         (streams/drag-stream
          (rx/concat
+          (rx/of (dch/update-shapes [id] upsp/convert-to-path))
           (->> (streams/move-handler-stream snap-toggled start-point point handler opposite points)
                (rx/take-until (->> stream (rx/filter #(or (ms/mouse-up? %)
                                                           (streams/finish-edition? %)))))
@@ -284,7 +287,8 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [edit-path (get-in state [:workspace-local :edit-path id])
-            state (update-in state (st/get-path state :content) ups/close-subpaths)]
+            content (st/get-path state :content)
+            state (st/set-content state (ups/close-subpaths content))]
         (cond-> state
           (or (not edit-path) (= :draw (:edit-mode edit-path)))
           (assoc-in [:workspace-local :edit-path id] {:edit-mode :move
@@ -313,17 +317,26 @@
       (let [id (get-in state [:workspace-local :edition])]
         (update state :workspace-local dissoc :edit-path id)))))
 
-(defn create-node-at-position
+(defn split-segments
   [{:keys [from-p to-p t]}]
-  (ptk/reify ::create-node-at-position
+  (ptk/reify ::split-segments
     ptk/UpdateEvent
     (update [_ state]
       (let [id (st/get-path-id state)
-            old-content (get-in state (st/get-path state :content))]
+            content (st/get-path state :content)]
         (-> state
-            (assoc-in [:workspace-local :edit-path id :old-content] old-content)
+            (assoc-in [:workspace-local :edit-path id :old-content] content)
-            (update-in (st/get-path state :content) upt/split-segments #{from-p to-p} t))))
+            (st/set-content (-> content (upt/split-segments #{from-p to-p} t))))))
 
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/of (changes/save-path-content {:preserve-move-to true})))))
+
+(defn create-node-at-position
+  [event]
+  (ptk/reify ::create-node-at-position
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [id (st/get-path-id state)]
+        (rx/of (dch/update-shapes [id] upsp/convert-to-path)
+               (split-segments event))))))

frontend/src/app/main/data/workspace/path/selection.cljs

@@ -48,7 +48,7 @@
     (update [_ state]
       (let [selrect (get-in state [:workspace-local :selrect])
             id (get-in state [:workspace-local :edition])
-            content (get-in state (st/get-path state :content))
+            content (st/get-path state :content)
             selected-point? #(gsh/has-point-rect? selrect %)
             selected-points (get-in state [:workspace-local :edit-path id :selected-points])
             positions (into (if shift? selected-points #{})

frontend/src/app/main/data/workspace/path/state.cljs

@@ -6,7 +6,8 @@
 
 (ns app.main.data.workspace.path.state
   (:require
-   [app.common.data :as d]))
+   [app.common.data :as d]
+   [app.util.path.shapes-to-path :as upsp]))
 
 (defn get-path-id
   "Retrieves the currently editing path id"
@@ -14,16 +15,30 @@
   (or (get-in state [:workspace-local :edition])
       (get-in state [:workspace-drawing :object :id])))
 
-(defn get-path
+(defn get-path-location
-  "Retrieves the location of the path object and additionaly can pass
+  [state & ks]
-  the arguments. This location can be used in get-in, assoc-in... functions"
-  [state & path]
   (let [edit-id  (get-in state [:workspace-local :edition])
         page-id  (:current-page-id state)]
     (d/concat
      (if edit-id
        [:workspace-data :pages-index page-id :objects edit-id]
        [:workspace-drawing :object])
-     path)))
+     ks)))
 
+(defn get-path
+  "Retrieves the location of the path object and additionaly can pass
+  the arguments. This location can be used in get-in, assoc-in... functions"
+  [state & ks]
+  (let [path-loc (get-path-location state)
+        shape (-> (get-in state path-loc)
+                  (upsp/convert-to-path))]
 
+    (if (empty? ks)
+      shape
+      (get-in shape ks))))
+
+(defn set-content
+  [state content]
+  (let [path-loc (get-path-location state :content)]
+    (-> state
+        (assoc-in path-loc content))))

frontend/src/app/main/data/workspace/path/streams.cljs

@@ -123,9 +123,8 @@
 (defn position-stream
   [snap-toggled _points]
   (let [zoom (get-in @st/state [:workspace-local :zoom] 1)
-        ;; ranges (snap/create-ranges points)
         d-pos (/ snap/snap-path-accuracy zoom)
-        get-content (fn [state] (get-in state (state/get-path state :content)))
+        get-content #(state/get-path % :content)
 
         content-stream
         (-> (l/derived get-content st/state)

frontend/src/app/main/data/workspace/path/tools.cljs

@@ -11,6 +11,7 @@
    [app.main.data.workspace.path.changes :as changes]
    [app.main.data.workspace.path.state :as st]
    [app.main.data.workspace.state-helpers :as wsh]
+   [app.util.path.shapes-to-path :as upsp]
    [app.util.path.subpaths :as ups]
    [app.util.path.tools :as upt]
    [beicon.core :as rx]
@@ -27,19 +28,21 @@
        (let [objects (wsh/lookup-page-objects state)
              id (st/get-path-id state)
              page-id (:current-page-id state)
-             shape (get-in state (st/get-path state))
+             shape (st/get-path state)
-
              selected-points (get-in state [:workspace-local :edit-path id :selected-points] #{})
              points (or points selected-points)]
          (when (and (seq points) (some? shape))
            (let [new-content (-> (tool-fn (:content shape) points)
                                  (ups/close-subpaths))
                  [rch uch] (changes/generate-path-changes objects page-id shape (:content shape) new-content)]
+
+             (rx/concat
+              (rx/of (dch/update-shapes [id] upsp/convert-to-path))
               (rx/of (dch/commit-changes {:redo-changes rch
                                           :undo-changes uch
                                           :origin it})
                      (when (empty? new-content)
-                      dwc/clear-edition-mode)))))))))
+                       dwc/clear-edition-mode))))))))))
 
 (defn make-corner
   ([]

frontend/src/app/main/data/workspace/path/undo.cljs

@@ -25,21 +25,22 @@
   (= :app.main.data.workspace.common/redo (ptk/type event)))
 
 (defn- make-entry [state]
-  (let [id (st/get-path-id state)]
+  (let [id (st/get-path-id state)
-    {:content (get-in state (st/get-path state :content))
+        shape (st/get-path state)]
-     :selrect (get-in state (st/get-path state :selrect))
+    {:content (:content shape)
-     :points  (get-in state (st/get-path state :points))
+     :selrect (:selrect shape)
+     :points  (:points shape)
      :preview (get-in state [:workspace-local :edit-path id :preview])
      :last-point (get-in state [:workspace-local :edit-path id :last-point])
      :prev-handler (get-in state [:workspace-local :edit-path id :prev-handler])}))
 
 (defn- load-entry [state {:keys [content selrect points preview last-point prev-handler]}]
   (let [id (st/get-path-id state)
-        old-content (get-in state (st/get-path state :content))]
+        old-content (st/get-path state :content)]
     (-> state
-        (d/assoc-in-when (st/get-path state :content) content)
+        (d/assoc-in-when (st/get-path-location state :content) content)
-        (d/assoc-in-when (st/get-path state :selrect) selrect)
+        (d/assoc-in-when (st/get-path-location state :selrect) selrect)
-        (d/assoc-in-when (st/get-path state :points) points)
+        (d/assoc-in-when (st/get-path-location state :points) points)
         (d/update-in-when
          [:workspace-local :edit-path id]
          assoc
@@ -128,7 +129,7 @@
 
 (def path-content-ref
   (letfn [(selector [state]
-            (get-in state (st/get-path state :content)))]
+            (st/get-path state :content))]
     (l/derived selector store/state)))
 
 (defn start-path-undo

frontend/src/app/main/data/workspace/transforms.cljs

@@ -20,7 +20,6 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.snap :as snap]
    [app.main.streams :as ms]
-   [app.util.path.shapes-to-path :as ups]
    [beicon.core :as rx]
    [cljs.spec.alpha :as s]
    [potok.core :as ptk]))
@@ -666,10 +665,3 @@
           (dissoc :workspace-modifiers)
           (update :workspace-local dissoc :modifiers :current-move-selected)))))
 
-(defn selected-to-path
-  []
-  (ptk/reify ::selected-to-path
-    ptk/WatchEvent
-    (watch [_ state _]
-      (let [ids (wsh/lookup-selected state {:omit-blocked? true})]
-        (rx/of (dch/update-shapes ids ups/convert-to-path))))))

frontend/src/app/main/ui/workspace/shapes/path/editor.cljs

@@ -21,6 +21,7 @@
    [app.util.path.commands :as upc]
    [app.util.path.format :as upf]
    [app.util.path.geom :as upg]
+   [app.util.path.shapes-to-path :as ups]
    [clojure.set :refer [map-invert]]
    [goog.events :as events]
    [rumext.alpha :as mf])
@@ -214,6 +215,13 @@
 
         selected-points (or selected-points #{})
 
+        shape (cond-> shape
+                (not= :path (:type shape))
+                ups/convert-to-path
+
+                :always
+                hooks/use-equal-memo)
+
         base-content (:content shape)
         base-points (mf/use-memo (mf/deps base-content) #(->> base-content upg/content->points))
 

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -104,7 +104,7 @@
         create-comment?   (= :comments drawing-tool)
         drawing-path?     (or (and edition (= :draw (get-in edit-path [edition :edit-mode])))
                               (and (some? drawing-obj) (= :path (:type drawing-obj))))
-        path-editing?     (and edition (= :path (get-in objects [edition :type])))
+        node-editing?     (and edition (not= :text (get-in objects [edition :type])))
         text-editing?     (and edition (= :text (get-in objects [edition :type])))
 
         on-click          (actions/on-click hover selected edition drawing-path? drawing-tool)
@@ -113,7 +113,7 @@
         on-drag-enter     (actions/on-drag-enter)
         on-drag-over      (actions/on-drag-over)
         on-drop           (actions/on-drop file viewport-ref zoom)
-        on-mouse-down     (actions/on-mouse-down @hover selected edition drawing-tool text-editing? path-editing? drawing-path? create-comment?)
+        on-mouse-down     (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment?)
         on-mouse-up       (actions/on-mouse-up disable-paste)
         on-pointer-down   (actions/on-pointer-down)
         on-pointer-enter  (actions/on-pointer-enter in-viewport?)
@@ -144,16 +144,16 @@
                                           (contains? layout :snap-grid))
                                       (or drawing-obj transform))
         show-selrect?            (and selrect (empty? drawing))
-        show-measures?           (and (not transform) (not path-editing?) show-distances?)]
+        show-measures?           (and (not transform) (not node-editing?) show-distances?)]
 
     (hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport?)
     (hooks/setup-viewport-size viewport-ref)
-    (hooks/setup-cursor cursor alt? panning drawing-tool drawing-path? path-editing?)
+    (hooks/setup-cursor cursor alt? panning drawing-tool drawing-path? node-editing?)
     (hooks/setup-resize layout viewport-ref)
     (hooks/setup-keyboard alt? ctrl?)
     (hooks/setup-hover-shapes page-id move-stream selected objects transform selected ctrl? hover hover-ids zoom)
     (hooks/setup-viewport-modifiers modifiers selected objects render-ref)
-    (hooks/setup-shortcuts path-editing? drawing-path?)
+    (hooks/setup-shortcuts node-editing? drawing-path?)
     (hooks/setup-active-frames objects vbox hover active-frames)
 
     [:div.viewport

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -27,9 +27,9 @@
   (:import goog.events.WheelEvent))
 
 (defn on-mouse-down
-  [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing? path-editing? drawing-path? create-comment?]
+  [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment?]
   (mf/use-callback
-   (mf/deps id blocked hidden type selected edition drawing-tool text-editing? path-editing? drawing-path? create-comment?)
+   (mf/deps id blocked hidden type selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment?)
    (fn [bevent]
      (when (or (dom/class? (dom/get-target bevent) "viewport-controls")
                (dom/class? (dom/get-target bevent) "viewport-selrect"))
@@ -65,7 +65,7 @@
                drawing-tool
                (st/emit! (dd/start-drawing drawing-tool))
 
-               path-editing?
+               node-editing?
                ;; Handle path node area selection
                (st/emit! (dwdp/handle-selection shift?))
 
@@ -158,9 +158,7 @@
            {:keys [id type] :as shape} @hover
 
            frame? (= :frame type)
-           group? (= :group type)
+           group? (= :group type)]
-           text?  (= :text type)
-           path?  (= :path type)]
 
        (st/emit! (ms/->MouseEvent :double-click ctrl? shift? alt?))
 
@@ -174,12 +172,8 @@
                  (reset! hover-ids (into [] (rest @hover-ids)))
                  (st/emit! (dw/select-shape (:id selected))))
 
-               (and (not= id edition) (or text? path?))
+               (not= id edition)
                (st/emit! (dw/select-shape id)
-                         (dw/start-editing-selected))
-
-               :else
-               (st/emit! (dw/selected-to-path)
                          (dw/start-editing-selected))))))))
 
 (defn on-context-menu

frontend/src/app/main/ui/workspace/viewport/selection.cljs

@@ -364,8 +364,7 @@
                                            :zoom zoom
                                            :color color}]
 
-      (and (= type :path)
+      (= edition (:id shape))
-           (= edition (:id shape)))
       [:& path-editor {:zoom zoom
                        :shape shape}]
 

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -47,7 +47,7 @@
         shape (-> selected first)]
     (when (and (= (count selected) 1)
                (= (:id shape) edition)
-               (= :path (:type shape)))
+               (not= :text (:type shape)))
       [:div.viewport-actions
        [:& path-actions {:shape shape}]])))