From 82c6b8daae907889e8e75faf2622b2bfe17cd8db Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 21 Feb 2022 11:55:53 +0100 Subject: [PATCH] :sparkles: Fix problems with export/import --- frontend/src/app/main/ui/shapes/export.cljs | 30 ++++++------- .../src/app/main/ui/shapes/text/svg_text.cljs | 42 +++++++++++-------- .../app/main/ui/workspace/shapes/text.cljs | 35 ++++++++-------- frontend/src/app/util/import/parser.cljs | 14 +++++-- 4 files changed, 68 insertions(+), 53 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index b062f6ddd0..df9770836f 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/frontend/src/app/main/ui/shapes/export.cljs @@ -109,7 +109,8 @@ (cond-> text? (-> (add! :grow-type) - (add! :content (comp json/encode uuid->string)))) + (add! :content (comp json/encode uuid->string)) + (add! :position-data (comp json/encode uuid->string)))) (cond-> mask? (obj/set! "penpot:masked-group" "true")) @@ -138,19 +139,20 @@ (into {} (map prefix-entry) m))) (defn- export-grid-data [{:keys [grids]}] - (mf/html - [:> "penpot:grids" #js {} - (for [{:keys [type display params]} grids] - (let [props (->> (dissoc params :color) - (prefix-keys) - (clj->js))] - [:> "penpot:grid" - (-> props - (obj/set! "penpot:color" (get-in params [:color :color])) - (obj/set! "penpot:opacity" (get-in params [:color :opacity])) - (obj/set! "penpot:type" (d/name type)) - (cond-> (some? display) - (obj/set! "penpot:display" (str display))))]))])) + (when (d/not-empty? grids) + (mf/html + [:> "penpot:grids" #js {} + (for [{:keys [type display params]} grids] + (let [props (->> (dissoc params :color) + (prefix-keys) + (clj->js))] + [:> "penpot:grid" + (-> props + (obj/set! "penpot:color" (get-in params [:color :color])) + (obj/set! "penpot:opacity" (get-in params [:color :opacity])) + (obj/set! "penpot:type" (d/name type)) + (cond-> (some? display) + (obj/set! "penpot:display" (str display))))]))]))) (mf/defc export-flows [{:keys [flows]}] diff --git a/frontend/src/app/main/ui/shapes/text/svg_text.cljs b/frontend/src/app/main/ui/shapes/text/svg_text.cljs index 2be61f6da6..cd729f181b 100644 --- a/frontend/src/app/main/ui/shapes/text/svg_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/svg_text.cljs @@ -23,9 +23,15 @@ [props] (let [render-id (mf/use-ctx muc/render-ctx) - {:keys [position-data] :as shape} (obj/get props "shape") + {:keys [x y width height position-data] :as shape} (obj/get props "shape") transform (str (gsh/transform-matrix shape)) - group-props (-> #js {:transform transform} + + ;; These position attributes are not really necesary but they are convenient for for the export + group-props (-> #js {:transform transform + :x x + :y y + :width width + :height height} (attrs/add-style-attrs shape render-id)) get-gradient-id (fn [index] @@ -40,21 +46,21 @@ :attr :fill-color-gradient :shape data}]))]) - [:& shape-custom-stroke {:shape shape} - [:> :g group-props - (for [[index data] (d/enumerate position-data)] - (let [props (-> #js {:x (:x data) - :y (:y data) - :dominantBaseline "ideographic" - :style (-> #js {:fontFamily (:font-family data) - :fontSize (:font-size data) - :fontWeight (:font-weight data) - :textTransform (:text-transform data) - :textDecoration (:text-decoration data) - :fontStyle (:font-style data) - :direction (if (:rtl? data) "rtl" "ltr") - :whiteSpace "pre"} - (attrs/add-fill data (get-gradient-id index)))})] - [:> :text props (:text data)]))]]])) + [:> :g group-props + (for [[index data] (d/enumerate position-data)] + (let [props (-> #js {:x (:x data) + :y (:y data) + :dominantBaseline "ideographic" + :style (-> #js {:fontFamily (:font-family data) + :fontSize (:font-size data) + :fontWeight (:font-weight data) + :textTransform (:text-transform data) + :textDecoration (:text-decoration data) + :fontStyle (:font-style data) + :direction (if (:rtl? data) "rtl" "ltr") + :whiteSpace "pre"} + (attrs/add-fill data (get-gradient-id index)))})] + [:& shape-custom-stroke {:shape shape} + [:> :text props (:text data)]]))]])) diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index dfdfc1093c..6e035fb945 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -178,26 +178,25 @@ (mf/use-layout-effect (mf/deps show-svg-text?) (fn [] - (let [] - (when-not show-svg-text? - ;; There is no position data we need to calculate it even if no change has happened - ;; this usualy happens the first time a text is rendered - (let [update-data - (fn update-data [] - (let [node (mf/ref-val node-ref)] - (if (some? node) - (let [position-data (utp/calc-position-data node)] - (reset! local-position-data position-data)) + (when-not show-svg-text? + ;; There is no position data we need to calculate it even if no change has happened + ;; this usualy happens the first time a text is rendered + (let [update-data + (fn update-data [] + (let [node (mf/ref-val node-ref)] + (if (some? node) + (let [position-data (utp/calc-position-data node)] + (reset! local-position-data position-data)) - ;; No node present, we need to keep waiting - (do (when-let [sid (mf/ref-val sid-ref)] (rx/dispose! sid)) - (when-not @local-position-data - (mf/set-ref-val! sid-ref (timers/schedule 100 update-data)))))))] - (mf/set-ref-val! sid-ref (timers/schedule 100 update-data)))) + ;; No node present, we need to keep waiting + (do (when-let [sid (mf/ref-val sid-ref)] (rx/dispose! sid)) + (when-not @local-position-data + (mf/set-ref-val! sid-ref (timers/schedule 100 update-data)))))))] + (mf/set-ref-val! sid-ref (timers/schedule 100 update-data)))) - (fn [] - (when-let [sid (mf/ref-val sid-ref)] - (rx/dispose! sid)))))) + (fn [] + (when-let [sid (mf/ref-val sid-ref)] + (rx/dispose! sid))))) [:> shape-container {:shape shape} ;; We keep hidden the shape when we're editing so it keeps track of the size diff --git a/frontend/src/app/util/import/parser.cljs b/frontend/src/app/util/import/parser.cljs index dac15ef0e7..70edb5ec40 100644 --- a/frontend/src/app/util/import/parser.cljs +++ b/frontend/src/app/util/import/parser.cljs @@ -185,7 +185,7 @@ (d/deep-mapm (fn [pair] (->> pair (mapv convert))))))) -(def search-data-node? #{:rect :image :path :text :circle}) +(def search-data-node? #{:rect :image :path :circle}) (defn get-svg-data [type node] @@ -200,6 +200,13 @@ (map #(:attrs %)) (reduce add-attrs node-attrs))) + (= type :text) + (->> node + (node-seq) + (filter #(contains? #{:g :foreignObject} (:tag %))) + (map #(:attrs %)) + (reduce add-attrs node-attrs)) + (= type :frame) (let [svg-node (->> node :content (d/seek #(= "frame-background" (get-in % [:attrs :class]))))] (merge (add-attrs {} (:attrs svg-node)) node-attrs)) @@ -481,8 +488,9 @@ (defn add-text-data [props node] (-> props - (assoc :grow-type (get-meta node :grow-type keyword)) - (assoc :content (get-meta node :content (comp string->uuid json/decode))))) + (assoc :grow-type (get-meta node :grow-type keyword)) + (assoc :content (get-meta node :content (comp string->uuid json/decode))) + (assoc :position-data (get-meta node :position-data (comp string->uuid json/decode))))) (defn add-group-data [props node]