Merge remote-tracking branch 'origin/staging' into develop

2025-06-03 07:21:38 +02:00 · 2023-01-20 13:58:08 +01:00 · 2023-01-20 13:58:08 +01:00 · da517f2d35
commit da517f2d35
parent 62aa6569f2 f6058aa71e
13 changed files with 161 additions and 100 deletions
--- a/frontend/src/app/main/render.cljs
+++ b/frontend/src/app/main/render.cljs
@ -397,11 +397,13 @@

        group-wrapper
        (mf/use-memo
-         (mf/deps objects root-shape)
-         (fn []
-           (case (:type root-shape)
-             :group (group-wrapper-factory objects)
-             :frame (frame-wrapper-factory objects))))]
+         (mf/deps objects)
+         (fn [] (group-wrapper-factory objects)))
+
+        frame-wrapper
+        (mf/use-memo
+         (mf/deps objects)
+         (fn [] (frame-wrapper-factory objects)))]

    [:> "symbol" #js {:id (str id)
                      :viewBox vbox
@ -412,7 +414,9 @@
                      "penpot:main-instance-y" main-instance-y}
     [:title name]
     [:> shape-container {:shape root-shape}
-      [:& group-wrapper {:shape root-shape :view-box vbox}]]]))
+      (case (:type root-shape)
+        :group [:& group-wrapper {:shape root-shape :view-box vbox}]
+        :frame [:& frame-wrapper {:shape root-shape :view-box vbox}])]]))

 (mf/defc components-sprite-svg
  {::mf/wrap-props false}
--- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs
@ -18,6 +18,7 @@
   [app.main.ui.workspace.viewport.utils :as vwu]
   [app.util.dom :as dom]
   [app.util.globals :as globals]
+   [debug :refer [debug?]]
   [rumext.v2 :as mf]))

 (defn get-shape-node
@ -52,19 +53,27 @@
        masking-child?
        [shape-node
         (dom/query parent-node ".mask-clip-path")
-         (dom/query parent-node ".mask-shape")]
+         (dom/query parent-node ".mask-shape")
+         (when (debug? :shape-titles)
+           (dom/query (dm/str "#frame-title-" id)))]

        group?
        (let [shape-defs (dom/query shape-node "defs")]
          (d/concat-vec
+           [(when (debug? :shape-titles)
+              (dom/query (dm/str "#frame-title-" id)))]
           (dom/query-all shape-defs ".svg-def")
           (dom/query-all shape-defs ".svg-mask-wrapper")))

        text?
-        [shape-node]
+        [shape-node
+         (when (debug? :shape-titles)
+           (dom/query (dm/str "#frame-title-" id)))]

        :else
-        [shape-node]))))
+        [shape-node
+         (when (debug? :shape-titles)
+           (dom/query (dm/str "#frame-title-" id)))]))))

 (defn transform-region!
  [node modifiers]
--- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
@ -311,7 +311,15 @@

             ;; Debug only: Disable the thumbnails
             new-active-frames
-             (if (debug? :disable-frame-thumbnails) (into #{} all-frames) new-active-frames)]
+             (cond
+               (debug? :disable-frame-thumbnails)
+               (into #{} all-frames)
+
+               (debug? :force-frame-thumbnails)
+               #{}
+
+               :else
+               new-active-frames)]

         (when (not= @active-frames new-active-frames)
           (reset! active-frames new-active-frames)))))))
--- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/utils.cljs
@ -42,7 +42,7 @@
  (let [inv-zoom (/ 1 zoom)]
    (dm/fmt "scale(%, %) translate(%, %)" inv-zoom inv-zoom (* zoom x) (* zoom y))))

-(defn title-transform [frame zoom]
-  (let [frame-transform (gsh/transform-str frame {:no-flip true})
-        label-pos (gpt/point (:x frame) (- (:y frame) (/ 10 zoom)))]
-    (dm/str frame-transform " " (text-transform label-pos zoom))))
+(defn title-transform [{:keys [selrect] :as shape} zoom]
+  (let [transform (gsh/transform-str shape {:no-flip true})
+        label-pos (gpt/point (:x selrect) (- (:y selrect) (/ 10 zoom)))]
+    (dm/str transform " " (text-transform label-pos zoom))))
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@ -90,7 +90,7 @@
 (mf/defc frame-title
  {::mf/wrap [mf/memo
              #(mf/deferred % ts/raf)]}
-  [{:keys [frame selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
+  [{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter on-frame-leave on-frame-select]}]
  (let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
        on-mouse-down
        (mf/use-callback
@ -148,7 +148,6 @@
               :width (:width frame)
               :height 20
               :class "workspace-frame-label"
-               ;:transform (dm/str frame-transform " " (text-transform label-pos zoom))
               :style {:fill (when selected? "var(--color-primary-dark)")}
               :visibility (if show-artboard-names? "visible" "hidden")
               :on-mouse-down on-mouse-down
@ -156,7 +155,9 @@
               :on-context-menu on-context-menu
               :on-pointer-enter on-pointer-enter
               :on-pointer-leave on-pointer-leave}
-        (:name frame)]])))
+        (if show-id?
+          (dm/str (dm/str (:id frame)) " - " (:name frame))
+          (:name frame))]])))

 (mf/defc frame-titles
  {::mf/wrap-props false
@ -169,20 +170,26 @@
        on-frame-enter       (unchecked-get props "on-frame-enter")
        on-frame-leave       (unchecked-get props "on-frame-leave")
        on-frame-select      (unchecked-get props "on-frame-select")
-        frames               (ctt/get-frames objects)
+        shapes               (ctt/get-frames objects)
+        shapes               (if (debug? :shape-titles)
+                               (into (set shapes)
+                                     (map (d/getf objects))
+                                     selected)
+                               shapes)
        focus                (unchecked-get props "focus")]

    [:g.frame-titles
-     (for [frame frames]
+     (for [{:keys [id parent-id] :as shape} shapes]
       (when (and
-              (= (:parent-id frame) uuid/zero)
-              (or (empty? focus)
-                  (contains? focus (:id frame))))
-         [:& frame-title {:key (dm/str "frame-title-" (:id frame))
-                          :frame frame
-                          :selected? (contains? selected (:id frame))
+              (not= id uuid/zero)
+              (or (debug? :shape-titles) (= parent-id uuid/zero))
+              (or (empty? focus) (contains? focus id)))
+         [:& frame-title {:key (dm/str "frame-title-" id)
+                          :frame shape
+                          :selected? (contains? selected id)
                          :zoom zoom
                          :show-artboard-names? show-artboard-names?
+                          :show-id? (debug? :shape-titles)
                          :on-frame-enter on-frame-enter
                          :on-frame-leave on-frame-leave
                          :on-frame-select on-frame-select}]))]))
--- a/frontend/src/app/util/import/parser.cljs
+++ b/frontend/src/app/util/import/parser.cljs
@ -64,9 +64,9 @@
   (or (find-node node :penpot:shape)
       (find-node node :penpot:page)))

-   ([node tag]
-    (-> (get-data node)
-        (find-node tag))))
+  ([node tag]
+   (-> (get-data node)
+       (find-node tag))))

 (defn get-type
  [node]
@ -217,10 +217,10 @@
      (let [;; Old .penpot files doesn't have "g" nodes. They have a clipPath reference as a node attribute
            to-url #(dm/str "url(#" % ")")
            frame-clip-rect-node  (->> (find-all-nodes node :defs)
-                                   (mapcat #(find-all-nodes % :clipPath))
-                                   (filter #(= (to-url (:id (:attrs %))) (:clip-path node-attrs)))
-                                   (mapcat #(find-all-nodes % #{:rect :path}))
-                                   (first))
+                                       (mapcat #(find-all-nodes % :clipPath))
+                                       (filter #(= (to-url (:id (:attrs %))) (:clip-path node-attrs)))
+                                       (mapcat #(find-all-nodes % #{:rect :path}))
+                                       (first))

            ;; The nodes with the "frame-background" class can have some anidation depending on the strokes they have
            g-nodes    (find-all-nodes node :g)
@ -1007,8 +1007,8 @@
                     (ctsi/has-overlay-opts interaction)
                     (assoc :overlay-pos-type    (get-meta node :overlay-pos-type keyword)
                            :overlay-position    (gpt/point
-                                                   (get-meta node :overlay-position-x d/parse-double)
-                                                   (get-meta node :overlay-position-y d/parse-double))
+                                                  (get-meta node :overlay-position-x d/parse-double)
+                                                  (get-meta node :overlay-position-y d/parse-double))
                            :close-click-outside (get-meta node :close-click-outside str->bool)
                            :background-overlay  (get-meta node :background-overlay str->bool)))))))))

--- a/frontend/src/app/worker/import.cljs
+++ b/frontend/src/app/worker/import.cljs
@ -389,21 +389,22 @@
        old-id             (cip/get-id node)
        id                 (resolve old-id)
        path               (get-in node [:attrs :penpot:path] "")
+        type               (cip/get-type content)
        main-instance-id   (resolve (uuid (get-in node [:attrs :penpot:main-instance-id] "")))
        main-instance-page (resolve (uuid (get-in node [:attrs :penpot:main-instance-page] "")))
-        data               (-> (cip/parse-data :group content)
+        data               (-> (cip/parse-data type content)
                               (assoc :path path)
                               (assoc :id id)
                               (assoc :main-instance-id main-instance-id)
                               (assoc :main-instance-page main-instance-page))

-        file               (-> file (fb/start-component data))
-        children            (cip/node-seq node)]
+        file               (-> file (fb/start-component data type))
+        children           (cip/node-seq node)]

    (->> (rx/from children)
         (rx/filter cip/shape?)
-         (rx/skip 1)
-         (rx/skip-last 1)
+         (rx/skip 1)       ;; Skip the outer component and the respective closint tag
+         (rx/skip-last 1)  ;; because they are handled in start-component an finish-component
         (rx/mapcat (partial resolve-media context file-id))
         (rx/reduce (partial process-import-node context) file)
         (rx/map fb/finish-component))))
@ -419,8 +420,9 @@
        main-instance-page (resolve (uuid (get-in node [:attrs :penpot:main-instance-page] "")))
        main-instance-x    (get-in node [:attrs :penpot:main-instance-x] "")
        main-instance-y    (get-in node [:attrs :penpot:main-instance-y] "")
+        type               (cip/get-type content)

-        data (-> (cip/parse-data :group content)
+        data (-> (cip/parse-data type content)
                 (assoc :path path)
                 (assoc :id id)
                 (assoc :main-instance-id main-instance-id)
--- a/frontend/src/debug.cljs
+++ b/frontend/src/debug.cljs
@ -69,6 +69,9 @@
    ;; Disable frame thumbnails
    :disable-frame-thumbnails

+    ;; Force thumbnails always (independent of selection or zoom level)
+    :force-frame-thumbnails
+
    ;; Enable a widget to show the auto-layout drop-zones
    :layout-drop-zones

@ -89,6 +92,9 @@

    ;; Show history overlay
    :history-overlay
+
+    ;; Show shape name and id
+    :shape-titles
    })

 ;; These events are excluded when we activate the :events flag