From 16fcc60a598e05820c96192162797e1fdf966851 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 7 Jul 2021 12:11:42 +0200 Subject: [PATCH 1/2] :bug: Fix color picker not working --- .../app/main/ui/shapes/text/fontfaces.cljs | 34 +++++++++++++------ .../app/main/ui/workspace/shapes/frame.cljs | 9 +++-- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/text/fontfaces.cljs b/frontend/src/app/main/ui/shapes/text/fontfaces.cljs index e75f0407b..5f2ae54fc 100644 --- a/frontend/src/app/main/ui/shapes/text/fontfaces.cljs +++ b/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)) - - ;; Retrieve the fonts ids used by the text shapes - fonts (->> content - (mapv fonts/get-content-fonts) - (reduce set/union #{}) - (hooks/use-equal-memo)) + (let [fonts (obj/get props "fonts") ;; 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}]))) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 12cbfca7c..6f7504222 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/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] @@ -76,8 +77,10 @@ objects (unchecked-get props "objects") thumbnail? (unchecked-get props "thumbnail?") - shape (gsh/transform-shape shape) - children (mapv #(get objects %) (:shapes shape)) + 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) @@ -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}]]) From 26e9f652b6792de3c3f043af4ff57473b75acc88 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 7 Jul 2021 12:45:33 +0200 Subject: [PATCH 2/2] :bug: Fix color picker for texts in root frame --- CHANGES.md | 1 + frontend/src/app/main/exports.cljs | 13 +++++++-- .../src/app/main/ui/workspace/shapes.cljs | 28 ++++++++++++------- 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index b72a39c44..2f8f8a77f 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/exports.cljs b/frontend/src/app/main/exports.cljs index 7dc497507..d48e5eebe 100644 --- a/frontend/src/app/main/exports.cljs +++ b/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,8 +134,14 @@ [{:keys [data width height thumbnails? embed?] :as props}] (let [objects (:objects data) root (get objects uuid/zero) - shapes (->> (:shapes root) - (map #(get objects %))) + 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}) @@ -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 diff --git a/frontend/src/app/main/ui/workspace/shapes.cljs b/frontend/src/app/main/ui/workspace/shapes.cljs index b62038189..b310d2118 100644 --- a/frontend/src/app/main/ui/workspace/shapes.cljs +++ b/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] @@ -53,18 +55,24 @@ [props] (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 %)))] + root-shapes (get-in objects [uuid/zero :shapes]) + shapes (->> root-shapes (mapv #(get objects %))) - (for [item shapes] - (if (= (:type item) :frame) - [:& frame-wrapper {:shape item - :key (:id item) - :objects objects - :thumbnail? (not (get active-frames (:id item) false))}] + root-children (->> shapes + (filter #(not= :frame (:type %))) + (mapcat #(cp/get-object-with-children (:id %) objects)))] - [:& shape-wrapper {:shape item - :key (:id item)}])))) + [:* + [:& ff/fontfaces-style {:shapes root-children}] + (for [item shapes] + (if (= (:type item) :frame) + [:& frame-wrapper {:shape item + :key (:id item) + :objects objects + :thumbnail? (not (get active-frames (:id item) false))}] + + [:& shape-wrapper {:shape item + :key (:id item)}]))])) (mf/defc shape-wrapper {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]