✨ Fix comments for nested frames

CHANGES.md

@@ -3,6 +3,9 @@
 ## :rocket: Next
 
 ### :sparkles: New features
+
+- Allow for nested boards inside other boards and groups
+
 ### :bug: Bugs fixed
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

common/src/app/common/geom/shapes/transforms.cljc

@@ -161,11 +161,12 @@
    (transform-str shape nil))
 
   ([{:keys [transform flip-x flip-y] :as shape} {:keys [no-flip]}]
-   (when (and (some? shape)
+   (if (and (some? shape)
             (or (some? transform)
                 (and (not no-flip) flip-x)
                 (and (not no-flip) flip-y)))
-     (dm/str (transform-matrix shape)))))
+     (dm/str (transform-matrix shape))
+     "")))
 
 (defn inverse-transform-matrix
   ([shape]

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

@@ -333,15 +333,20 @@
       (let [page-id  (:current-page-id state)
             objects (wsh/lookup-page-objects state page-id)
 
-            to-move-shapes (into []
+            to-move-shapes
+            (into []
                   (map (d/getf objects))
                   (reverse (cph/sort-z-index objects shapes)))
 
-            changes (-> (pcb/empty-changes it page-id)
+            changes
+            (when (d/not-empty? to-move-shapes)
+              (-> (pcb/empty-changes it page-id)
                   (pcb/with-objects objects)
-                        (pcb/change-parent frame-id to-move-shapes 0))]
+                  (pcb/change-parent frame-id to-move-shapes 0)))]
 
-        (rx/of (dch/commit-changes changes))))))
+        (if (some? changes)
+          (rx/of (dch/commit-changes changes))
+          (rx/empty))))))
 
 (s/def ::set-of-uuid
   (s/every ::us/uuid :kind set?))

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

@@ -10,7 +10,9 @@
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
    [app.common.pages :as cp]
+   [app.common.pages.helpers :as cph]
    [app.main.data.workspace.common :as dwc]
+   [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.undo :as dwu]
    [app.main.worker :as uw]
    [beicon.core :as rx]
@@ -29,7 +31,8 @@
     ptk/WatchEvent
     (watch [_ state _]
       (let [tool (get-in state [:workspace-drawing :tool])
-            shape (get-in state [:workspace-drawing :object])]
+            shape (get-in state [:workspace-drawing :object])
+            objects (wsh/lookup-page-objects state)]
         (rx/concat
          (when (:initialized? shape)
            (let [page-id (:current-page-id state)
@@ -68,7 +71,10 @@
               (if (= :frame (:type shape))
                 (->> (uw/ask! {:cmd :selection/query
                                :page-id page-id
-                               :rect (:selrect shape)})
+                               :rect (:selrect shape)
+                               :include-frames? true
+                               :full-frame? true})
+                     (rx/map #(cph/clean-loops objects %))
                      (rx/map #(dwc/move-shapes-into-frame (:id shape) %)))
                 (rx/empty)))))
 

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

@@ -208,8 +208,8 @@
 
    ;; TOOLS
 
-   :draw-frame           {:tooltip "A"
+   :draw-frame           {:tooltip "B"
-                          :command "a"
+                          :command ["b" "a"]
                           :subsections [:tools :basics]
                           :fn #(st/emit! (dwd/select-for-drawing :frame))}
 

frontend/src/app/main/ui/viewer/comments.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.viewer.comments
   (:require
+   [app.common.geom.shapes :as gsh]
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.main.data.comments :as dcm]
@@ -75,13 +76,6 @@
         [:span.label (tr "labels.show-comments-list")]]]]]))
 
 
-(defn- frame-contains?
-  [{:keys [x y width height]} {px :x py :y}]
-  (let [x2 (+ x width)
-        y2 (+ y height)]
-    (and (<= x px x2)
-         (<= y py y2))))
-
 (def threads-ref
   (l/derived :comment-threads st/state))
 
@@ -93,11 +87,11 @@
   (let [profile     (mf/deref refs/profile)
         threads-map (mf/deref threads-ref)
 
-        modifier1   (-> (gpt/point (:x frame) (:y frame))
+        frame-corner (-> frame :points gsh/points->selrect gpt/point)
-                        (gpt/negate)
+        modifier1   (-> (gmt/matrix)
-                        (gmt/translate-matrix))
+                        (gmt/translate (gpt/negate frame-corner)))
 
-        modifier2   (-> (gpt/point (:x frame) (:y frame))
+        modifier2   (-> (gpt/point frame-corner)
                         (gmt/translate-matrix))
 
         cstate      (mf/deref refs/comments-local)
@@ -105,7 +99,7 @@
         threads     (->> (vals threads-map)
                          (dcm/apply-filters cstate profile)
                          (filter (fn [{:keys [position]}]
-                                   (frame-contains? frame position))))
+                                   (gsh/has-point? frame position))))
 
         on-bubble-click
         (mf/use-callback

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

@@ -140,9 +140,9 @@
 
     (when (not (:hidden frame))
       [:g {:id (dm/str "frame-title-" (:id frame))
-           :transform frame-transform}
+           }
        (when (:use-for-thumbnail? frame)
-         [:g {:transform (dm/str (text-transform label-pos zoom))}
+         [:g {:transform (dm/str frame-transform " " (text-transform label-pos zoom))}
           [:svg {:x 0
                  :y -9
                  :width 12
@@ -156,7 +156,7 @@
                :width width
                :height 20
                :class "workspace-frame-label"
-               :transform (dm/str (text-transform label-pos zoom))
+               :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

frontend/translations/en.po

@@ -257,7 +257,7 @@ msgstr ""
 "[Libraries & templates](https://penpot.app/libraries-templates.html)"
 
 msgid "dashboard.export-frames"
-msgstr "Export artboards to PDF..."
+msgstr "Export boards to PDF..."
 
 #: src/app/main/ui/export.cljs
 msgid "dashboard.export-frames.title"
@@ -976,7 +976,7 @@ msgid "handoff.tabs.code.selected.curve"
 msgstr "Curve"
 
 msgid "handoff.tabs.code.selected.frame"
-msgstr "Artboard"
+msgstr "Board"
 
 msgid "handoff.tabs.code.selected.group"
 msgstr "Group"
@@ -1277,8 +1277,8 @@ msgstr[1] "%s files"
 
 msgid "labels.num-of-frames"
 msgid_plural "labels.num-of-frames"
-msgstr[0] "1 artboard"
+msgstr[0] "1 board"
-msgstr[1] "%s artboards"
+msgstr[1] "%s boards"
 
 #: src/app/main/ui/dashboard/team.cljs
 msgid "labels.num-of-projects"
@@ -2021,7 +2021,7 @@ msgid "shortcuts.align-vcenter"
 msgstr "Align center vertically"
 
 msgid "shortcuts.artboard-selection"
-msgstr "Create artboard from selection"
+msgstr "Create board from selection"
 
 msgid "shortcuts.bool-difference"
 msgstr "Boolean difference"
@@ -2081,7 +2081,7 @@ msgid "shortcuts.draw-ellipse"
 msgstr "Ellipse"
 
 msgid "shortcuts.draw-frame"
-msgstr "Artboard"
+msgstr "Board"
 
 msgid "shortcuts.draw-nodes"
 msgstr "Draw path"
@@ -2183,7 +2183,7 @@ msgid "shortcuts.move-unit-up"
 msgstr "Move up"
 
 msgid "shortcuts.next-frame"
-msgstr "Next artboard"
+msgstr "Next board"
 
 msgid "shortcuts.opacity-0"
 msgstr "Set opacity to 100%"
@@ -2240,7 +2240,7 @@ msgid "shortcuts.paste"
 msgstr "Paste"
 
 msgid "shortcuts.prev-frame"
-msgstr "Previous artboard"
+msgstr "Previous board"
 
 msgid "shortcuts.redo"
 msgstr "Redo"
@@ -2425,11 +2425,11 @@ msgstr "Sorry!"
 
 #: src/app/main/ui/handoff.cljs, src/app/main/ui/viewer.cljs
 msgid "viewer.empty-state"
-msgstr "No artboards found on the page."
+msgstr "No boards found on the page."
 
 #: src/app/main/ui/handoff.cljs, src/app/main/ui/viewer.cljs
 msgid "viewer.frame-not-found"
-msgstr "Artboard not found."
+msgstr "Board not found."
 
 msgid "viewer.header.comments-section"
 msgstr "Comments (%s)"
@@ -2701,7 +2701,7 @@ msgstr "Enable snap to pixel"
 
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.hide-artboard-names"
-msgstr "Hide artboard names"
+msgstr "Hide board names"
 
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.hide-grid"
@@ -2748,7 +2748,7 @@ msgstr "Select all"
 
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.show-artboard-names"
-msgstr "Show artboards names"
+msgstr "Show boards names"
 
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.show-grid"
@@ -3629,11 +3629,11 @@ msgstr "Search font"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.select-a-shape"
-msgstr "Select a shape, artboard or group to drag a connection to other artboard."
+msgstr "Select a shape, board or group to drag a connection to other board."
 
 #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
 msgid "workspace.options.select-artboard"
-msgstr "Select artboard"
+msgstr "Select board"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
 msgid "workspace.options.selection-color"
@@ -3940,7 +3940,7 @@ msgstr "Copy"
 
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.create-artboard-from-selection"
-msgstr "Selection to artboard"
+msgstr "Selection to board"
 
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.create-component"
@@ -4096,7 +4096,7 @@ msgid "workspace.sidebar.layers.components"
 msgstr "Components"
 
 msgid "workspace.sidebar.layers.frames"
-msgstr "Artboards"
+msgstr "Boards"
 
 msgid "workspace.sidebar.layers.groups"
 msgstr "Groups"
@@ -4150,7 +4150,7 @@ msgstr "Ellipse (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "Artboard (%s)"
+msgstr "Board (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
@@ -4209,7 +4209,7 @@ msgid "workspace.undo.entry.multiple.curve"
 msgstr "curves"
 
 msgid "workspace.undo.entry.multiple.frame"
-msgstr "artboard"
+msgstr "board"
 
 msgid "workspace.undo.entry.multiple.group"
 msgstr "groups"
@@ -4255,7 +4255,7 @@ msgid "workspace.undo.entry.single.curve"
 msgstr "curve"
 
 msgid "workspace.undo.entry.single.frame"
-msgstr "artboard"
+msgstr "board"
 
 msgid "workspace.undo.entry.single.group"
 msgstr "group"