Merge pull request #2217 from penpot/alotor-fix-nested-boards

Fixes on nested artboards and texts

CHANGES.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 1.15.3-beta
+
+### :bug: Bugs fixed
+
+- Fix error when moving nested frames outside [Taiga #4017](https://tree.taiga.io/project/penpot/issue/4017)
+- Fix problem when hovering over nested frames [Taiga #4018](https://tree.taiga.io/project/penpot/issue/4018)
+- Fix problem editing rotated texts [Taiga #4026](https://tree.taiga.io/project/penpot/issue/4026)
+
 ## 1.15.2-beta
 
 ### :bug: Bugs fixed

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

@@ -17,16 +17,22 @@
    :width width
    :height height})
 
-(defn position-data-points
+(defn position-data-selrect
-  [{:keys [position-data] :as shape}]
+  [shape]
-  (let [points    (->> position-data
+  (let [points    (->> shape
-                       (mapcat (comp gpr/rect->points position-data->rect)))
+                       :position-data
-        transform (gtr/transform-matrix shape)]
+                       (mapcat (comp gpr/rect->points position-data->rect)))]
-    (gco/transform-points points transform)))
+    (-> points (gpr/points->selrect))))
 
 (defn position-data-bounding-box
   [shape]
-  (gpr/points->selrect (position-data-points shape)))
+  (let [points    (->> shape
+                       :position-data
+                       (mapcat (comp gpr/rect->points position-data->rect)))
+        transform (gtr/transform-matrix shape)]
+    (-> points
+        (gco/transform-points transform)
+        (gpr/points->selrect ))))
 
 (defn overlaps-position-data?
   "Checks if the given position data is inside the shape"

common/src/app/common/pages/helpers.cljc

@@ -44,6 +44,10 @@
   [{:keys [type]}]
   (= type :group))
 
+(defn bool-shape?
+  [{:keys [type]}]
+  (= type :bool))
+
 (defn text-shape?
   [{:keys [type]}]
   (= type :text))
@@ -268,7 +272,7 @@
                  (= id-a id-b)
                  0
 
-                 (is-shape-over-shape? objects id-a id-b options)
+                 (is-shape-over-shape? objects id-a id-b {:top-frames? true})
                  1
 
                  :else

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

@@ -32,7 +32,8 @@
 (declare group-wrapper)
 (declare svg-raw-wrapper)
 (declare bool-wrapper)
-(declare frame-wrapper)
+(declare root-frame-wrapper)
+(declare nested-frame-wrapper)
 
 (def circle-wrapper (common/generic-wrapper-factory circle/circle-shape))
 (def image-wrapper (common/generic-wrapper-factory image/image-shape))
@@ -62,15 +63,25 @@
                   (mapcat #(cph/get-children-with-self objects (:id %))))]
        [:& ff/fontfaces-style {:shapes (into [] xform shapes)}])
 
-     (for [item shapes]
+     (for [shape shapes]
-       (if (cph/frame-shape? item)
+       (cond
-         [:& frame-wrapper {:shape item
+         (not (cph/frame-shape? shape))
-                            :key (:id item)
+         [:& shape-wrapper
-                            :objects (get frame-objects (:id item))
+          {:shape shape
-                            :thumbnail? (not (contains? active-frames (:id item)))}]
+           :key (:id shape)}]
 
-         [:& shape-wrapper {:shape item
+         (cph/root-frame? shape)
-                            :key (:id item)}]))]))
+         [:& root-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects (get frame-objects (:id shape))
+           :thumbnail? (not (contains? active-frames (:id shape)))}]
+
+         :else
+         [:& nested-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects (get frame-objects (:id shape))}]))]))
 
 (mf/defc shape-wrapper
   {::mf/wrap [#(mf/memo' % (mf/check-props ["shape"]))]
@@ -98,12 +109,13 @@
         :bool    [:> bool-wrapper opts]
 
         ;; Only used when drawing a new frame.
-        :frame [:> frame-wrapper opts]
+        :frame [:> nested-frame-wrapper opts]
 
         nil))))
 
 (def group-wrapper (group/group-wrapper-factory shape-wrapper))
 (def svg-raw-wrapper (svg-raw/svg-raw-wrapper-factory shape-wrapper))
 (def bool-wrapper (bool/bool-wrapper-factory shape-wrapper))
-(def frame-wrapper (frame/frame-wrapper-factory shape-wrapper))
+(def root-frame-wrapper (frame/root-frame-wrapper-factory shape-wrapper))
+(def nested-frame-wrapper (frame/nested-frame-wrapper-factory shape-wrapper))
 

frontend/src/app/main/ui/workspace/shapes/frame.cljs

@@ -35,9 +35,9 @@
        ::mf/forward-ref true}
       [props ref]
 
-      (let [shape         (unchecked-get props "shape")
+      (let [shape      (unchecked-get props "shape")
-            childs-ref    (mf/use-memo (mf/deps (:id shape)) #(refs/children-objects (:id shape)))
+            childs-ref (mf/use-memo (mf/deps (:id shape)) #(refs/children-objects (:id shape)))
-            childs        (mf/deref childs-ref)]
+            childs     (mf/deref childs-ref)]
 
         [:& (mf/provider embed/context) {:value true}
          [:& shape-container {:shape shape :ref ref :disable-shadows? (cph/root-frame? shape)}
@@ -49,7 +49,7 @@
        (= (unchecked-get new-props "thumbnail?") (unchecked-get old-props "thumbnail?"))
        (= (unchecked-get new-props "shape") (unchecked-get old-props "shape"))))
 
-(defn frame-wrapper-factory
+(defn nested-frame-wrapper-factory
   [shape-wrapper]
 
   (let [frame-shape (frame-shape-factory shape-wrapper)]
@@ -58,81 +58,92 @@
        ::mf/wrap-props false}
       [props]
 
-      (let [shape (unchecked-get props "shape")
+      (let [shape         (unchecked-get props "shape")
-            frame-id           (:id shape)
+            frame-id      (:id shape)
+            objects       (wsh/lookup-page-objects @st/state)
+            node-ref      (mf/use-var nil)
+            modifiers-ref (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
+            modifiers     (mf/deref modifiers-ref)]
 
-            ;; References to the current rendered node and the its parentn
+        (fdm/use-dynamic-modifiers objects @node-ref modifiers)
-            node-ref           (mf/use-var nil)
+        (let [shape (unchecked-get props "shape")]
+          [:& frame-shape {:shape shape :ref node-ref}])))))
 
-            objects            (wsh/lookup-page-objects @st/state)
+(defn root-frame-wrapper-factory
+  [shape-wrapper]
 
-            ;; Modifiers
+  (let [frame-shape (frame-shape-factory shape-wrapper)]
-            modifiers-ref      (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
+    (mf/fnc frame-wrapper
-            modifiers          (mf/deref modifiers-ref)]
+      {::mf/wrap [#(mf/memo' % check-props)]
+       ::mf/wrap-props false}
+      [props]
+
+      (let [shape         (unchecked-get props "shape")
+            frame-id      (:id shape)
+            objects       (wsh/lookup-page-objects @st/state)
+            node-ref      (mf/use-var nil)
+            modifiers-ref (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
+            modifiers     (mf/deref modifiers-ref)]
 
         (fdm/use-dynamic-modifiers objects @node-ref modifiers)
 
-        (if-not (cph/root-frame? shape)
+        (let [thumbnail?         (unchecked-get props "thumbnail?")
-          [:& frame-shape {:shape shape :ref node-ref}]
+              fonts              (mf/use-memo (mf/deps shape objects) #(ff/shape->fonts shape objects))
+              fonts              (-> fonts (hooks/use-equal-memo))
 
-          ;; If the current shape is root we handle its thumbnail and the dynamic modifiers
+              force-render       (mf/use-state false)
-          (let [thumbnail?         (unchecked-get props "thumbnail?")
-                fonts              (mf/use-memo (mf/deps shape objects) #(ff/shape->fonts shape objects))
-                fonts              (-> fonts (hooks/use-equal-memo))
 
-                force-render       (mf/use-state false)
+              ;; Thumbnail data
+              page-id            (mf/use-ctx ctx/current-page-id)
 
-                ;; Thumbnail data
+              ;; when `true` we've called the mount for the frame
-                page-id            (mf/use-ctx ctx/current-page-id)
+              rendered?          (mf/use-var false)
 
-                ;; when `true` we've called the mount for the frame
+              disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
-                rendered?          (mf/use-var false)
 
-                disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
+              [on-load-frame-dom render-frame? thumbnail-renderer]
+              (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render)
 
-                [on-load-frame-dom render-frame? thumbnail-renderer]
+              on-frame-load
-                (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render)
+              (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
 
-                on-frame-load
+          (mf/use-effect
-                (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
+           (mf/deps fonts)
+           (fn []
+             (->> (rx/from fonts)
+                  (rx/merge-map fonts/fetch-font-css)
+                  (rx/ignore))))
 
-            (mf/use-effect
+          (mf/use-effect
-             (mf/deps fonts)
+           (fn []
-             (fn []
+             ;; When a change in the data is received a "force-render" event is emited
-               (->> (rx/from fonts)
+             ;; that will force the component to be mounted in memory
-                    (rx/merge-map fonts/fetch-font-css)
+             (let [sub
-                    (rx/ignore))))
+                   (->> (dwt/force-render-stream (:id shape))
+                        (rx/take-while #(not @rendered?))
+                        (rx/subs #(reset! force-render true)))]
+               #(when sub
+                  (rx/dispose! sub)))))
 
-            (mf/use-effect
+          (mf/use-effect
-             (fn []
+           (mf/deps shape fonts thumbnail? on-load-frame-dom @force-render render-frame?)
-               ;; When a change in the data is received a "force-render" event is emited
+           (fn []
-               ;; that will force the component to be mounted in memory
+             (when (and (some? @node-ref) (or @rendered? (not thumbnail?) @force-render render-frame?))
-               (let [sub
+               (mf/mount
-                     (->> (dwt/force-render-stream (:id shape))
+                (mf/element frame-shape
-                          (rx/take-while #(not @rendered?))
+                            #js {:ref on-load-frame-dom :shape shape :fonts fonts})
-                          (rx/subs #(reset! force-render true)))]
-                 #(when sub
-                    (rx/dispose! sub)))))
 
-            (mf/use-effect
+                @node-ref)
-             (mf/deps shape fonts thumbnail? on-load-frame-dom @force-render render-frame?)
+               (when (not @rendered?) (reset! rendered? true)))))
-             (fn []
-               (when (and (some? @node-ref) (or @rendered? (not thumbnail?) @force-render render-frame?))
-                 (mf/mount
-                  (mf/element frame-shape
-                              #js {:ref on-load-frame-dom :shape shape :fonts fonts})
 
-                  @node-ref)
+          [:& shape-container {:shape shape}
-                 (when (not @rendered?) (reset! rendered? true)))))
+           [:g.frame-container {:id (dm/str "frame-container-" (:id shape))
-
+                                :key "frame-container"
-            [:& shape-container {:shape shape}
+                                :ref on-frame-load
-             [:g.frame-container {:id (dm/str "frame-container-" (:id shape))
+                                :opacity (when (:hidden shape) 0)}
-                                  :key "frame-container"
+            [:& ff/fontfaces-style {:fonts fonts}]
-                                  :ref on-frame-load
+            [:g.frame-thumbnail-wrapper
-                                  :opacity (when (:hidden shape) 0)}
+             {:id (dm/str "thumbnail-container-" (:id shape))
-              [:& ff/fontfaces-style {:fonts fonts}]
+              ;; Hide the thumbnail when not displaying
-              [:g.frame-thumbnail-wrapper
+              :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
-               {:id (dm/str "thumbnail-container-" (:id shape))
+             thumbnail-renderer]]])))))
-                ;; Hide the thumbnail when not displaying
-                :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
-               thumbnail-renderer]]]))))))

frontend/src/app/main/ui/workspace/shapes/text.cljs

@@ -8,6 +8,8 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.text :as gsht]
    [app.common.math :as mth]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
@@ -37,19 +39,28 @@
       [:& text/text-shape {:shape shape}]]
 
      (when (and (debug? :text-outline) (d/not-empty? (:position-data shape)))
-       (for [[index data] (d/enumerate (:position-data shape))]
+       [:g {:transform (gsh/transform-str shape {:no-flip true})}
-         (let [{:keys [x y width height]} data]
+        (let [bounding-box (gsht/position-data-selrect shape)]
-           [:g {:key (dm/str index)}
+          [:rect {
-            ;; Text fragment bounding box
+                  :x (:x bounding-box)
-            [:rect {:x x
+                  :y (:y bounding-box)
-                    :y (- y height)
+                  :width (:width bounding-box)
-                    :width width
+                  :height (:height bounding-box)
-                    :height height
+                  :style { :fill "none" :stroke "orange"}}])
-                    :style {:fill "none" :stroke "red"}}]
 
-            ;; Text baselineazo
+        (for [[index data] (d/enumerate (:position-data shape))]
-            [:line {:x1 (mth/round x)
+          (let [{:keys [x y width height]} data]
-                    :y1 (mth/round (- (:y data) (:height data)))
+            [:g {:key (dm/str index)}
-                    :x2 (mth/round (+ x width))
+             ;; Text fragment bounding box
-                    :y2 (mth/round (- (:y data) (:height data)))
+             [:rect {:x x
-                    :style {:stroke "blue"}}]])))]))
+                     :y (- y height)
+                     :width width
+                     :height height
+                     :style {:fill "none" :stroke "red"}}]
+
+             ;; Text baselineazo
+             [:line {:x1 (mth/round x)
+                     :y1 (mth/round (- (:y data) (:height data)))
+                     :x2 (mth/round (+ x width))
+                     :y2 (mth/round (- (:y data) (:height data)))
+                     :style {:stroke "blue"}}]]))])]))

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

@@ -272,7 +272,7 @@
                 (some? text-modifier)
                 (dwt/apply-text-modifier text-modifier))
 
-        bounding-box (gsht/position-data-bounding-box shape)
+        bounding-box (gsht/position-data-selrect shape)
 
         x      (min (:x bounding-box) (:x shape))
         y      (min (:y bounding-box) (:y shape))

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.viewport.pixel-overlay
   (:require
    [app.common.data :as d]
+   [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.colors :as dwc]
@@ -41,13 +42,24 @@
         shapes   (->> (:shapes root)
                       (map (d/getf objects)))]
     [:g.shapes
-     (for [item shapes]
+     (for [shape shapes]
-       (if (= (:type item) :frame)
+       (cond
-         [:& shapes/frame-wrapper {:shape item
+         (not (cph/frame-shape? shape))
-                                   :key (:id item)
+         [:& shapes/shape-wrapper
-                                   :objects objects}]
+          {:shape shape
-         [:& shapes/shape-wrapper {:shape item
+           :key (:id shape)}]
-                                   :key (:id item)}]))]))
+
+         (cph/root-frame? shape)
+         [:& shapes/root-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects objects}]
+
+         :else
+         [:& shapes/nested-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects objects}]))]))
 
 (mf/defc pixel-overlay
   {::mf/wrap-props false}