From b2bde8d97ef9e0b1d89ce0a1527be60443198b22 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 29 Jan 2021 15:51:03 +0100 Subject: [PATCH 1/4] :sparkles: Improvements over svg export --- frontend/resources/locales.json | 9 ++++++- frontend/src/app/main/ui/render.cljs | 24 ++++++++++--------- .../ui/workspace/sidebar/options/exports.cljs | 1 + 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index ef9428dcf..923718fec 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -4410,5 +4410,12 @@ "es" : "Pulsar para cerrar la ruta" }, "unused" : true - } + }, + + "workspace.options.export.suffix": { + "translations" : { + "en" : "Suffix", + "es" : "Sufijo" + } + } } diff --git a/frontend/src/app/main/ui/render.cljs b/frontend/src/app/main/ui/render.cljs index 35612bdab..e02da77e2 100644 --- a/frontend/src/app/main/ui/render.cljs +++ b/frontend/src/app/main/ui/render.cljs @@ -18,6 +18,7 @@ [app.common.geom.shapes :as geom] [app.common.geom.point :as gpt] [app.common.geom.matrix :as gmt] + [app.main.ui.context :as muc] [app.main.exports :as exports] [app.main.repo :as repo])) @@ -65,17 +66,18 @@ #(exports/shape-wrapper-factory objects)) ] - [:svg {:id "screenshot" - :view-box vbox - :width width - :height height - :version "1.1" - :xmlnsXlink "http://www.w3.org/1999/xlink" - :xmlns "http://www.w3.org/2000/svg"} - (case (:type object) - :frame [:& frame-wrapper {:shape object :view-box vbox}] - :group [:& group-wrapper {:shape object}] - [:& shape-wrapper {:shape object}])])) + [:& (mf/provider muc/embed-ctx) {:value true} + [:svg {:id "screenshot" + :view-box vbox + :width width + :height height + :version "1.1" + :xmlnsXlink "http://www.w3.org/1999/xlink" + :xmlns "http://www.w3.org/2000/svg"} + (case (:type object) + :frame [:& frame-wrapper {:shape object :view-box vbox}] + :group [:& group-wrapper {:shape object}] + [:& shape-wrapper {:shape object}])]])) (defn- adapt-root-frame [objects object-id] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs index 8dc48bf43..ef5c16f3f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs @@ -146,6 +146,7 @@ [:option {:value "4"} "4x"] [:option {:value "6"} "6x"]] [:input.input-text {:value (:suffix export) + :placeholder (tr "workspace.options.export.suffix") :on-change (partial on-suffix-change index)}] [:select.input-select {:value (name (:type export)) :on-change (partial on-type-change index)} From f4bbcdb3826e48f5b0816ca81aad9ec0227a4372 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 29 Jan 2021 21:45:13 +0100 Subject: [PATCH 2/4] :bug: Fixed problem with borders in images --- frontend/src/app/util/code_gen.cljs | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs index ab6dc6564..54dc6ed78 100644 --- a/frontend/src/app/util/code_gen.cljs +++ b/frontend/src/app/util/code_gen.cljs @@ -30,11 +30,13 @@ (defn format-stroke [_ shape] (let [width (:stroke-width shape) - style (name (:stroke-style shape)) + style (let [style (:stroke-style shape)] + (when (keyword? style) (name style))) color {:color (:stroke-color shape) :opacity (:stroke-opacity shape) :gradient (:stroke-color-gradient shape)}] - (str/format "%spx %s %s" width style (uc/color->background color)))) + (if-not (= :none (:stroke-style shape)) + (str/format "%spx %s %s" width style (uc/color->background color))))) (def styles-data {:layout {:props [:width :height :x :y :radius :rx] @@ -43,9 +45,9 @@ :fill {:props [:fill-color :fill-color-gradient] :to-prop {:fill-color "background" :fill-color-gradient "background"} :format {:fill-color format-fill-color :fill-color-gradient format-fill-color}} - :stroke {:props [:stroke-color] - :to-prop {:stroke-color "border"} - :format {:stroke-color format-stroke}} + :stroke {:props [:stroke-style] + :to-prop {:stroke-style "border"} + :format {:stroke-style format-stroke}} :shadow {:props [:shadow] :to-prop {:shadow :box-shadow} :format {:shadow #(str/join ", " (map shadow->css %1))}} @@ -95,15 +97,18 @@ default-format (fn [value] (str (mth/precision value 2) "px")) format-property (fn [prop] (let [css-prop (or (prop to-prop) (name prop)) - format-fn (or (prop format) default-format)] - (str - (str/repeat " " tab-size) - (str/fmt "%s: %s;" css-prop (format-fn (prop values) values)))))] + format-fn (or (prop format) default-format) + css-val (format-fn (prop values) values)] + (when css-val + (str + (str/repeat " " tab-size) + (str/fmt "%s: %s;" css-prop css-val)))))] (->> properties (remove #(let [value (get values %)] (or (nil? value) (= value 0)))) (map format-property) + (filter (comp not nil?)) (str/join "\n"))))) (defn shape->properties [shape] From 5b7ffac74e884f88a623d585c2049f630a3a78af Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 29 Jan 2021 21:45:52 +0100 Subject: [PATCH 3/4] :bug: Fixes problem with cursor --- .../workspace/colorpicker/pixel_overlay.cljs | 19 +++++++++---------- .../src/app/main/ui/workspace/viewport.cljs | 18 +++++++++++------- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/colorpicker/pixel_overlay.cljs index 84a9a5dbf..fcd72eb28 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/pixel_overlay.cljs @@ -57,13 +57,13 @@ (mf/defc pixel-overlay {::mf/wrap-props false} [props] - (let [vport (unchecked-get props "vport") - vbox (unchecked-get props "vbox") - viewport-ref (unchecked-get props "viewport-ref") - options (unchecked-get props "options") - svg-ref (mf/use-ref nil) - canvas-ref (mf/use-ref nil) - img-ref (mf/use-ref nil) + (let [vport (unchecked-get props "vport") + vbox (unchecked-get props "vbox") + viewport-node (unchecked-get props "viewport") + options (unchecked-get props "options") + svg-ref (mf/use-ref nil) + canvas-ref (mf/use-ref nil) + img-ref (mf/use-ref nil) update-str (rx/subject) @@ -78,11 +78,10 @@ handle-mouse-move-picker (mf/use-callback - (mf/deps viewport-ref) + (mf/deps viewport-node) (fn [event] (when-let [zoom-view-node (.getElementById js/document "picker-detail")] - (let [viewport-node (mf/ref-val viewport-ref) - canvas-node (mf/ref-val canvas-ref) + (let [canvas-node (mf/ref-val canvas-ref) {brx :left bry :top} (dom/get-bounding-rect viewport-node) x (- (.-clientX event) brx) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index cbee0ddf9..69b683cd0 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -151,13 +151,12 @@ {::mf/wrap-props false} [props] (let [cursor (unchecked-get props "cursor") - viewport-ref (unchecked-get props "viewport") + viewport (unchecked-get props "viewport") visible? (mf/use-state true) in-viewport? (mf/use-state true) cursor-ref (mf/use-ref nil) - viewport (mf/ref-val viewport-ref) node (mf/ref-val cursor-ref) @@ -184,8 +183,8 @@ #(let [style (obj/get node "style")] (obj/set! style "transform" (str "translate(" x "px, " y "px)")))))))] - (mf/use-effect - (mf/deps viewport on-mouse-move) + (mf/use-layout-effect + (mf/deps on-mouse-move) (fn [] (when viewport (let [{:keys [left top]} (dom/get-bounding-rect viewport) @@ -328,11 +327,15 @@ alt? (mf/use-state false) cursor (mf/use-state (get-cursor :pointer-inner)) + viewport-ref (mf/use-ref nil) + viewport-node (mf/use-state nil) + zoom-view-ref (mf/use-ref nil) last-position (mf/use-var nil) disable-paste (mf/use-var false) in-viewport? (mf/use-var false) + drawing (mf/deref refs/workspace-drawing) drawing-tool (:tool drawing) drawing-obj (:object drawing) @@ -703,7 +706,7 @@ (when picking-color? [:& pixel-overlay {:vport vport :vbox vbox - :viewport-ref viewport-ref + :viewport @viewport-node :options options :layout layout}]) @@ -716,7 +719,7 @@ :file-id (:id file)}]) (when-not css-mouse? - [:& render-cursor {:viewport viewport-ref + [:& render-cursor {:viewport @viewport-node :cursor @cursor}]) [:svg.viewport @@ -727,7 +730,8 @@ :width (:width vport 0) :height (:height vport 0) :view-box (format-viewbox vbox) - :ref viewport-ref + :ref #(do (mf/set-ref-val! viewport-ref %) + (reset! viewport-node %)) :class (when drawing-tool "drawing") :style {:cursor (when css-mouse? @cursor) :background-color (get options :background "#E8E9EA")} From 04246936d2c752c402987e58e4f1ad99ba946844 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 29 Jan 2021 21:46:03 +0100 Subject: [PATCH 4/4] :bug: Fixed console error with NaN stroke --- frontend/src/app/main/ui/shapes/custom_stroke.cljs | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index bd6c4df4f..335ff5a11 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs @@ -63,15 +63,15 @@ (= stroke-position :outer) (let [stroke-mask-id (str "mask-" @stroke-id) - stroke-width (.-strokeWidth ^js base-props) + stroke-width (or (.-strokeWidth ^js base-props) 0) mask-props1 (-> (obj/merge! #js {} base-props) (obj/merge! #js {:stroke "white" - :strokeWidth (* stroke-width 2) - :strokeOpacity 1 - :strokeDasharray nil - :fill "white" - :fillOpacity 1 - :transform nil})) + :strokeWidth (* stroke-width 2) + :strokeOpacity 1 + :strokeDasharray nil + :fill "white" + :fillOpacity 1 + :transform nil})) mask-props2 (-> (obj/merge! #js {} base-props) (obj/merge! #js {:stroke nil :strokeWidth nil