From 0bb20197f162df2ecdb121d4397eeae7d99d65cd Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 1 Apr 2022 11:21:50 +0200 Subject: [PATCH 1/3] :zap: Improved performance of refs --- frontend/deps.edn | 4 +- .../main/data/workspace/state_helpers.cljs | 38 ++++---- frontend/src/app/main/refs.cljs | 18 +++- .../src/app/main/ui/workspace/shapes.cljs | 7 +- .../ui/workspace/shapes/bounding_box.cljs | 90 ------------------- frontend/src/app/util/dom.cljs | 27 ++++-- frontend/src/debug.cljs | 7 ++ 7 files changed, 67 insertions(+), 124 deletions(-) delete mode 100644 frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs diff --git a/frontend/deps.edn b/frontend/deps.edn index bffc02ba1..7e87cafce 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -8,9 +8,9 @@ metosin/reitit-core {:mvn/version "0.5.17"} funcool/beicon {:mvn/version "2021.07.05-1"} - funcool/okulary {:mvn/version "2020.04.14-0"} + funcool/okulary {:mvn/version "2022.04.01-10"} funcool/potok {:mvn/version "2021.09.20-0"} - funcool/rumext {:mvn/version "2022.03.28-131"} + funcool/rumext {:mvn/version "2022.03.31-133"} funcool/tubax {:mvn/version "2021.05.20-0"} instaparse/instaparse {:mvn/version "1.4.10"} diff --git a/frontend/src/app/main/data/workspace/state_helpers.cljs b/frontend/src/app/main/data/workspace/state_helpers.cljs index 708c3d1d3..4da32f002 100644 --- a/frontend/src/app/main/data/workspace/state_helpers.cljs +++ b/frontend/src/app/main/data/workspace/state_helpers.cljs @@ -20,39 +20,45 @@ ([state] (lookup-page-objects state (:current-page-id state))) ([state page-id] - (get-in state [:workspace-data :pages-index page-id :objects]))) + (dm/get-in state [:workspace-data :pages-index page-id :objects]))) (defn lookup-page-options ([state] (lookup-page-options state (:current-page-id state))) ([state page-id] - (get-in state [:workspace-data :pages-index page-id :options]))) + (dm/get-in state [:workspace-data :pages-index page-id :options]))) (defn lookup-component-objects ([state component-id] - (get-in state [:workspace-data :components component-id :objects]))) + (dm/get-in state [:workspace-data :components component-id :objects]))) (defn lookup-local-components ([state] - (get-in state [:workspace-data :components]))) + (dm/get-in state [:workspace-data :components]))) + +(defn process-selected-shapes + ([objects selected] + (process-selected-shapes objects selected nil)) + + ([objects selected {:keys [omit-blocked?] :or {omit-blocked? false}}] + (letfn [(selectable? [id] + (and (contains? objects id) + (or (not omit-blocked?) + (not (get-in objects [id :blocked] false)))))] + (let [selected (->> selected (cph/clean-loops objects))] + (into (d/ordered-set) + (filter selectable?) + selected))))) -;; TODO: improve performance of this (defn lookup-selected ([state] (lookup-selected state nil)) ([state options] (lookup-selected state (:current-page-id state) options)) - ([state page-id {:keys [omit-blocked?] :or {omit-blocked? false}}] + ([state page-id options] (let [objects (lookup-page-objects state page-id) - selected (->> (dm/get-in state [:workspace-local :selected]) - (cph/clean-loops objects)) - selectable? (fn [id] - (and (contains? objects id) - (or (not omit-blocked?) - (not (get-in objects [id :blocked] false)))))] - (into (d/ordered-set) - (filter selectable?) - selected)))) + selected (dm/get-in state [:workspace-local :selected])] + (process-selected-shapes objects selected options)))) (defn lookup-shapes ([state ids] @@ -79,7 +85,7 @@ [state file-id] (if (= file-id (:current-file-id state)) (get state :workspace-data) - (get-in state [:workspace-libraries file-id :data]))) + (dm/get-in state [:workspace-libraries file-id :data]))) (defn get-libraries "Retrieve all libraries, including the local file." diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 14a4a9259..accbc9e13 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -102,8 +102,22 @@ (l/derived :workspace-drawing st/state)) ;; TODO: rename to workspace-selected (?) +;; Don't use directly from components, this is a proxy to improve performance of selected-shapes +(def ^:private selected-shapes-data + (l/derived + (fn [state] + (let [objects (wsh/lookup-page-objects state) + selected (dm/get-in state [:workspace-local :selected])] + {:objects objects :selected selected})) + st/state (fn [v1 v2] + (and (identical? (:objects v1) (:objects v2)) + (= (:selected v1) (:selected v2)))))) + (def selected-shapes - (l/derived wsh/lookup-selected st/state =)) + (l/derived + (fn [{:keys [objects selected]}] + (wsh/process-selected-shapes objects selected)) + selected-shapes-data)) (defn make-selected-ref [id] @@ -258,7 +272,7 @@ (defn objects-by-id [ids] - (l/derived #(wsh/lookup-shapes % ids) st/state =)) + (l/derived #(into [] (keep (d/getf %)) ids) workspace-page-objects)) (defn- set-content-modifiers [state] (fn [id shape] diff --git a/frontend/src/app/main/ui/workspace/shapes.cljs b/frontend/src/app/main/ui/workspace/shapes.cljs index d45dd9149..adff4aa4c 100644 --- a/frontend/src/app/main/ui/workspace/shapes.cljs +++ b/frontend/src/app/main/ui/workspace/shapes.cljs @@ -18,7 +18,6 @@ [app.main.ui.shapes.rect :as rect] [app.main.ui.shapes.text.fontfaces :as ff] [app.main.ui.workspace.shapes.bool :as bool] - [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] [app.main.ui.workspace.shapes.group :as group] @@ -26,7 +25,6 @@ [app.main.ui.workspace.shapes.svg-raw :as svg-raw] [app.main.ui.workspace.shapes.text :as text] [app.util.object :as obj] - [debug :refer [debug?]] [rumext.alpha :as mf])) (declare shape-wrapper) @@ -87,10 +85,7 @@ ;; Only used when drawing a new frame. :frame [:> frame-wrapper opts] - nil) - - (when (debug? :bounding-boxes) - [:> bounding-box opts])]))) + nil)]))) (def group-wrapper (group/group-wrapper-factory shape-wrapper)) (def svg-raw-wrapper (svg-raw/svg-raw-wrapper-factory shape-wrapper)) diff --git a/frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs b/frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs deleted file mode 100644 index 7e05a7881..000000000 --- a/frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs +++ /dev/null @@ -1,90 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; License, v. 2.0. If a copy of the MPL was not distributed with this -;; file, You can obtain one at http://mozilla.org/MPL/2.0/. -;; -;; Copyright (c) UXBOX Labs SL - -(ns app.main.ui.workspace.shapes.bounding-box - (:require - ["randomcolor" :as rdcolor] - [app.common.geom.shapes :as gsh] - [app.main.refs :as refs] - [cuerdas.core :as str] - [rumext.alpha :as mf])) - -(defn fixed - [num] - (when num (.toFixed num 2))) - -(mf/defc cross-point [{:keys [point zoom color]}] - (let [width (/ 5 zoom)] - [:g.point - [:line {:x1 (- (:x point) width) :y1 (- (:y point) width) - :x2 (+ (:x point) width) :y2 (+ (:y point) width) - :stroke color - :stroke-width "1px" - :stroke-opacity 0.5}] - - [:line {:x1 (+ (:x point) width) :y1 (- (:y point) width) - :x2 (- (:x point) width) :y2 (+ (:y point) width) - :stroke color - :stroke-width "1px" - :stroke-opacity 0.5}]])) - -(mf/defc render-rect [{{:keys [x y width height]} :rect :keys [color transform]}] - [:rect {:x x - :y y - :width width - :height height - :transform (or transform "none") - :style {:stroke color - :fill "none" - :stroke-width "1px" - :pointer-events "none"}}]) - -(mf/defc render-rect-points [{:keys [points color]}] - (for [[p1 p2] (map vector points (concat (rest points) [(first points)]))] - [:line {:x1 (:x p1) - :y1 (:y p1) - :x2 (:x p2) - :y2 (:y p2) - :style {:stroke color - :stroke-width "1px"}}])) - -(mf/defc bounding-box - {::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - bounding-box (gsh/points->selrect (-> shape :points)) - shape-center (gsh/center-shape shape) - line-color (rdcolor #js {:seed (str (:id shape))}) - zoom (mf/deref refs/selected-zoom)] - - [:g.bounding-box - [:text {:x (:x bounding-box) - :y (- (:y bounding-box) 5) - :font-size 10 - :fill line-color - :stroke "var(--color-white)" - :stroke-width 0.1} - (str/format "%s - (%s, %s)" (str/slice (str (:id shape)) 0 8) (fixed (:x bounding-box)) (fixed (:y bounding-box)))] - - [:g.center - [:& cross-point {:point shape-center - :zoom zoom - :color line-color}]] - - [:g.points - (for [point (:points shape)] - [:& cross-point {:point point - :zoom zoom - :color line-color}]) - #_[:& render-rect-points {:points (:points shape) - :color line-color}]] - - [:g.selrect - [:& render-rect {:rect (:selrect shape) - ;; :transform (gsh/transform-matrix shape) - :color line-color}] - #_[:& render-rect {:rect bounding-box - :color line-color}]]])) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index a6b92c6d4..1c1b4854f 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -6,6 +6,7 @@ (ns app.util.dom (:require + [app.common.data :as d] [app.common.data.macros :as dm] [app.common.geom.point :as gpt] [app.common.logging :as log] @@ -231,20 +232,20 @@ (.-innerText el))) (defn query - ([^string query] - (query globals/document query)) + ([^string selector] + (query globals/document selector)) - ([^js el ^string query] + ([^js el ^string selector] (when (some? el) - (.querySelector el query)))) + (.querySelector el selector)))) (defn query-all - ([^string query] - (query-all globals/document query)) + ([^string selector] + (query-all globals/document selector)) - ([^js el ^string query] + ([^js el ^string selector] (when (some? el) - (.querySelectorAll el query)))) + (.querySelectorAll el selector)))) (defn get-client-position [^js event] @@ -535,3 +536,13 @@ (and (some? node) (some? candidate) (.contains node candidate))) + +(defn seq-nodes + [root-node] + (letfn [(branch? [node] + (d/not-empty? (get-children node))) + + (get-children [node] + (seq (.-children node)))] + (->> root-node + (tree-seq branch? get-children)))) diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index 23cb8670f..1cbd600bf 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -18,6 +18,7 @@ [app.main.data.workspace.path.shortcuts] [app.main.data.workspace.shortcuts] [app.main.store :as st] + [app.util.dom :as dom] [app.util.object :as obj] [app.util.timers :as timers] [beicon.core :as rx] @@ -340,3 +341,9 @@ (.log js/console "%c Viewer" style) (print-shortcuts app.main.data.viewer.shortcuts/shortcuts))) nil) + +(defn ^:export nodeStats + [] + (let [root-node (dom/query ".viewport .render-shapes") + num-nodes (->> (dom/seq-nodes root-node) count)] + #js {:number num-nodes})) From 76abd6796e57655c76c9154070d55cf0ee935254 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 1 Apr 2022 11:26:47 +0200 Subject: [PATCH 2/3] :bug: Fix import problems --- frontend/src/app/util/import/parser.cljs | 6 ++-- frontend/src/app/util/path/parser.cljs | 23 +++++++------- frontend/src/app/worker/import.cljs | 40 ++++++++++++++---------- 3 files changed, 39 insertions(+), 30 deletions(-) diff --git a/frontend/src/app/util/import/parser.cljs b/frontend/src/app/util/import/parser.cljs index b00485efa..28767b265 100644 --- a/frontend/src/app/util/import/parser.cljs +++ b/frontend/src/app/util/import/parser.cljs @@ -214,11 +214,13 @@ (= type :frame) (let [;; The nodes with the "frame-background" class can have some anidation depending on the strokes they have - g-nodes (find-all-nodes node :g) + g-nodes (find-all-nodes node :g) defs-nodes (flatten (map #(find-all-nodes % :defs) g-nodes)) + gg-nodes (flatten (map #(find-all-nodes % :g) g-nodes)) rect-nodes (flatten [[(find-all-nodes node :rect)] (map #(find-all-nodes % #{:rect :path}) defs-nodes) - (map #(find-all-nodes % #{:rect :path}) g-nodes)]) + (map #(find-all-nodes % #{:rect :path}) g-nodes) + (map #(find-all-nodes % #{:rect :path}) gg-nodes)]) svg-node (d/seek #(= "frame-background" (get-in % [:attrs :class])) rect-nodes)] (merge (add-attrs {} (:attrs svg-node)) node-attrs)) diff --git a/frontend/src/app/util/path/parser.cljs b/frontend/src/app/util/path/parser.cljs index 2057ae05f..172089caa 100644 --- a/frontend/src/app/util/path/parser.cljs +++ b/frontend/src/app/util/path/parser.cljs @@ -302,16 +302,17 @@ (reduce simplify-command [[start] start-pos start-pos start-pos start-pos]) (first)))) - (defn parse-path [path-str] - (let [clean-path-str - (-> path-str - (str/trim) - ;; Change "commas" for spaces - (str/replace #"," " ") - ;; Remove all consecutive spaces - (str/replace #"\s+" " ")) - commands (re-seq commands-regex clean-path-str)] - (-> (mapcat parse-command commands) - (simplify-commands)))) + (if (empty? path-str) + path-str + (let [clean-path-str + (-> path-str + (str/trim) + ;; Change "commas" for spaces + (str/replace #"," " ") + ;; Remove all consecutive spaces + (str/replace #"\s+" " ")) + commands (re-seq commands-regex clean-path-str)] + (-> (mapcat parse-command commands) + (simplify-commands))))) diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs index cd45b6781..634cc5c7e 100644 --- a/frontend/src/app/worker/import.cljs +++ b/frontend/src/app/worker/import.cljs @@ -31,6 +31,8 @@ ;; Upload changes batches size (def ^:const change-batch-size 100) +(def conjv (fnil conj [])) + (defn get-file "Resolves the file inside the context given its id and the data" ([context type] @@ -261,25 +263,29 @@ (cond-> (some? old-id) (assoc :id (resolve old-id))) (cond-> (< (:version context 1) 2) - (translate-frame type file))) + (translate-frame type file)))] + (try + (let [file (case type + :frame (fb/add-artboard file data) + :group (fb/add-group file data) + :bool (fb/add-bool file data) + :rect (fb/create-rect file data) + :circle (fb/create-circle file data) + :path (fb/create-path file data) + :text (fb/create-text file data) + :image (fb/create-image file data) + :svg-raw (fb/create-svg-raw file data) + #_default file)] - file (case type - :frame (fb/add-artboard file data) - :group (fb/add-group file data) - :bool (fb/add-bool file data) - :rect (fb/create-rect file data) - :circle (fb/create-circle file data) - :path (fb/create-path file data) - :text (fb/create-text file data) - :image (fb/create-image file data) - :svg-raw (fb/create-svg-raw file data) - #_default file)] + ;; We store this data for post-processing after every shape has been + ;; added + (cond-> file + (d/not-empty? interactions) + (assoc-in [:interactions (:id data)] interactions))) - ;; We store this data for post-processing after every shape has been - ;; added - (cond-> file - (d/not-empty? interactions) - (assoc-in [:interactions (:id data)] interactions)))))) + (catch :default err + (log/error :hint (ex-message err) :cause err :js/data data) + (update file :errors conjv data))))))) (defn setup-interactions [file] From ea38d12a73710f27a8de3445e014ae3f9783094d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 1 Apr 2022 21:26:58 +0200 Subject: [PATCH 3/3] :bug: Fix problem with exported text --- frontend/src/app/main/ui/shapes/text/svg_text.cljs | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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 b2747ab37..f9849c9d0 100644 --- a/frontend/src/app/main/ui/shapes/text/svg_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/svg_text.cljs @@ -9,6 +9,7 @@ [app.common.data :as d] [app.common.geom.shapes :as gsh] [app.common.math :as mth] + [app.config :as cfg] [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.custom-stroke :refer [shape-custom-strokes]] @@ -50,9 +51,16 @@ [:> :g group-props (for [[index data] (d/enumerate position-data)] - (let [props (-> #js {:x (mth/round (:x data)) - :y (mth/round (- (:y data) (:height data))) - :alignmentBaseline "text-before-edge" + (let [y (if (cfg/check-browser? :safari) + (mth/round (- (:y data) (:height data))) + (mth/round (:y data))) + + alignment-bl (when (cfg/check-browser? :safari) "text-before-edge") + dominant-bl (when-not (cfg/check-browser? :safari) "ideographic") + props (-> #js {:x (mth/round (:x data)) + :y y + :alignmentBaseline alignment-bl + :dominantBaseline dominant-bl :style (-> #js {:fontFamily (:font-family data) :fontSize (:font-size data) :fontWeight (:font-weight data)