Merge pull request #1075 from penpot/fix/color-picker

Fix issues with color picker

CHANGES.md

@@ -25,6 +25,7 @@
 - Fix workspace header presence styles and invalid link [Taiga #1813](https://tree.taiga.io/project/penpot/issue/1813).
 - Fix color-input wrong behavior (on workspace page color) [Taiga #1795](https://tree.taiga.io/project/penpot/issue/1795).
 - Fix file contextual menu in shared libraries at dashboard [Taiga #1865](https://tree.taiga.io/project/penpot/issue/1865).
+- Fix problem with color picker and fonts [#1049](https://github.com/penpot/penpot/issues/1049)
 
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes

frontend/src/app/main/exports.cljs

@@ -25,6 +25,7 @@
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.svg-raw :as svg-raw]
    [app.main.ui.shapes.text :as text]
+   [app.main.ui.shapes.text.fontfaces :as ff]
    [app.util.object :as obj]
    [app.util.timers :as ts]
    [cuerdas.core :as str]
@@ -133,9 +134,15 @@
   [{:keys [data width height thumbnails? embed?] :as props}]
   (let [objects (:objects data)
         root    (get objects uuid/zero)
-        shapes  (->> (:shapes root)
+        shapes
+        (->> (:shapes root)
              (map #(get objects %)))
 
+        root-children
+        (->> shapes
+             (filter #(not= :frame (:type %)))
+             (mapcat #(cp/get-object-with-children (:id %) objects)))
+
         vport   (when (and (some? width) (some? height))
                   {:width width :height height})
         dim     (calculate-dimensions data vport)
@@ -161,7 +168,7 @@
                     :background background-color}}
 
       [:& use/export-page {:options (:options data)}]
-
+      [:& ff/fontfaces-style {:shapes root-children}]
       (for [item shapes]
         (let [frame? (= (:type item) :frame)]
           (cond

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

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.shapes.text.fontfaces
   (:require
+   [app.common.data :as d]
    [app.main.fonts :as fonts]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.shapes.embed :as embed]
@@ -47,19 +48,12 @@
 
     (mf/ref-val fonts-css-ref)))
 
-(mf/defc fontfaces-style
+(mf/defc fontfaces-style-render
   {::mf/wrap-props false
-   ::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
+   ::mf/wrap [#(mf/memo' % (mf/check-props ["fonts"]))]}
   [props]
-  (let [shapes  (obj/get props "shapes")
 
-        content (->> shapes (mapv :content))
+  (let [fonts (obj/get props "fonts")
-
-        ;; Retrieve the fonts ids used by the text shapes
-        fonts (->> content
-                   (mapv fonts/get-content-fonts)
-                   (reduce set/union #{})
-                   (hooks/use-equal-memo))
 
         ;; Fetch its CSS fontfaces
         fonts-css (use-fonts-css fonts)
@@ -75,5 +69,23 @@
         ;; Creates a style tag by replacing the urls with the data uri
         style (replace-embeds fonts-css fonts-urls fonts-embed)]
 
-    (when (seq style)
+    (when (d/not-empty? style)
       [:style style])))
+
+(mf/defc fontfaces-style
+  {::mf/wrap-props false
+   ::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
+  [props]
+  (let [shapes  (->> (obj/get props "shapes")
+                     (filterv #(= :text (:type %))))
+
+        content (->> shapes (mapv :content))
+
+        ;; Retrieve the fonts ids used by the text shapes
+        fonts (->> content
+                   (mapv fonts/get-content-fonts)
+                   (reduce set/union #{})
+                   (hooks/use-equal-memo))]
+
+    (when (d/not-empty? fonts)
+      [:> fontfaces-style-render {:fonts fonts}])))

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

@@ -13,11 +13,13 @@
   common."
   (:require
    [app.common.geom.shapes :as geom]
+   [app.common.pages :as cp]
    [app.common.uuid :as uuid]
    [app.main.refs :as refs]
    [app.main.ui.shapes.circle :as circle]
    [app.main.ui.shapes.image :as image]
    [app.main.ui.shapes.rect :as rect]
+   [app.main.ui.shapes.text.fontfaces :as ff]
    [app.main.ui.workspace.shapes.bounding-box :refer [bounding-box]]
    [app.main.ui.workspace.shapes.common :as common]
    [app.main.ui.workspace.shapes.frame :as frame]
@@ -54,8 +56,14 @@
   (let [objects       (obj/get props "objects")
         active-frames (obj/get props "active-frames")
         root-shapes   (get-in objects [uuid/zero :shapes])
-        shapes      (->> root-shapes (mapv #(get objects %)))]
+        shapes        (->> root-shapes (mapv #(get objects %)))
 
+        root-children (->> shapes
+                           (filter #(not= :frame (:type %)))
+                           (mapcat #(cp/get-object-with-children (:id %) objects)))]
+
+    [:*
+     [:& ff/fontfaces-style {:shapes root-children}]
      (for [item shapes]
        (if (= (:type item) :frame)
          [:& frame-wrapper {:shape item
@@ -64,7 +72,7 @@
                             :thumbnail? (not (get active-frames (:id item) false))}]
 
          [:& shape-wrapper {:shape item
-                           :key (:id item)}]))))
+                            :key (:id item)}]))]))
 
 (mf/defc shape-wrapper
   {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.shapes.frame
   (:require
    [app.common.geom.shapes :as gsh]
+   [app.common.pages :as cp]
    [app.main.ui.shapes.frame :as frame]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.text.fontfaces :as ff]
@@ -79,6 +80,8 @@
             shape        (gsh/transform-shape shape)
             children     (mapv #(get objects %) (:shapes shape))
 
+            all-children (cp/get-children-objects (:id shape) objects)
+
             rendered?   (mf/use-state false)
 
             show-thumbnail? (and thumbnail? (some? (:thumbnail shape)))
@@ -93,7 +96,7 @@
 
            (when-not show-thumbnail?
              [:> shape-container {:shape shape :ref on-dom}
-              [:& ff/fontfaces-style {:shapes children}]
+              [:& ff/fontfaces-style {:shapes all-children}]
               [:& frame-shape {:shape shape
                                :childs children}]])