3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-19 18:06:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #483 from penpot/fixes/performance-improvements

Browse source 
Performance improvements
This commit is contained in:
Andrey Antukh 2021-01-26 22:56:55 +01:00 • committed by GitHub
commit 1ce68cb1cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 604 additions and 582 deletions
Download patch file Download diff file Expand all files Collapse all files

119
common/app/common/attrs.cljc
View file

@ -9,71 +9,68 @@
(ns app.common.attrs) (ns app.common.attrs)
;; Extract some attributes of a list of shapes.
;; For each attribute, if the value is the same in all shapes,
;; wll take this value. If there is any shape that is different,
;; the value of the attribute will be the keyword :multiple.
;;
;; If some shape has the value nil in any attribute, it's
;; considered a different value. If the shape does not contain
;; the attribute, it's ignored in the final result.
;;
;; Example:
;; (def shapes [{:stroke-color "#ff0000"
;; :stroke-width 3
;; :fill-color "#0000ff"
;; :x 1000 :y 2000 :rx nil}
;; {:stroke-width "#ff0000"
;; :stroke-width 5
;; :x 1500 :y 2000}])
;;
;; (get-attrs-multi shapes [:stroke-color
;; :stroke-width
;; :fill-color
;; :rx
;; :ry])
;; >>> {:stroke-color "#ff0000"
;; :stroke-width :multiple
;; :fill-color "#0000ff"
;; :rx nil
;; :ry nil}
;;
(defn get-attrs-multi (defn get-attrs-multi
([shapes attrs] (get-attrs-multi shapes attrs = identity)) ([objs attrs]
([shapes attrs eq-fn sel-fn] (get-attrs-multi objs attrs = identity))
;; Extract some attributes of a list of shapes.
;; For each attribute, if the value is the same in all shapes,
;; wll take this value. If there is any shape that is different,
;; the value of the attribute will be the keyword :multiple.
;;
;; If some shape has the value nil in any attribute, it's
;; considered a different value. If the shape does not contain
;; the attribute, it's ignored in the final result.
;;
;; Example:
;; (def shapes [{:stroke-color "#ff0000"
;; :stroke-width 3
;; :fill-color "#0000ff"
;; :x 1000 :y 2000 :rx nil}
;; {:stroke-width "#ff0000"
;; :stroke-width 5
;; :x 1500 :y 2000}])
;;
;; (get-attrs-multi shapes [:stroke-color
;; :stroke-width
;; :fill-color
;; :rx
;; :ry])
;; >>> {:stroke-color "#ff0000"
;; :stroke-width :multiple
;; :fill-color "#0000ff"
;; :rx nil
;; :ry nil}
;;
(let [defined-shapes (filter some? shapes)
combine-value (fn [v1 v2] ([objs attrs eqfn sel]
(cond
(and (= v1 :undefined) (= v2 :undefined)) :undefined
(= v1 :undefined) (if (= v2 :multiple) :multiple (sel-fn v2))
(= v2 :undefined) (if (= v1 :multiple) :multiple (sel-fn v1))
(or (= v1 :multiple) (= v2 :multiple)) :multiple
(eq-fn v1 v2) (sel-fn v1)
:else :multiple))
combine-values (fn [attrs shape values] (loop [attr (first attrs)
(map #(combine-value (get shape % :undefined) attrs (rest attrs)
(get values % :undefined)) attrs)) result (transient {})]
select-attrs (fn [shape attrs] (if attr
(zipmap attrs (map #(get shape % :undefined) attrs))) (let [value
(loop [curr (first objs)
objs (rest objs)
value ::undefined]
reducer (fn [result shape] (if (and curr (not= value :multiple))
(zipmap attrs (combine-values attrs shape result))) ;;
(let [new-val (get curr attr ::undefined)
value (cond
(= new-val ::undefined) value
(= value ::undefined) (sel new-val)
(eqfn new-val value) value
:else :multiple)]
(recur (first objs) (rest objs) value))
;;
value))]
(recur (first attrs)
(rest attrs)
(cond-> result
(not= value ::undefined)
(assoc! attr value))))
combined (reduce reducer (persistent! result)))))
(select-attrs (first defined-shapes) attrs)
(rest defined-shapes))
cleanup-value (fn [value]
(if (= value :undefined) nil value))
cleanup (fn [result]
(->> attrs
(map #(get result %))
(zipmap attrs)
(filter #(not= (second %) :undefined))
(into {})))]
(cleanup combined))))

3
common/app/common/geom/shapes.cljc
View file

@ -124,9 +124,6 @@
[shape {:keys [x y]}] [shape {:keys [x y]}]
(move shape (gpt/point (- x) (- y)))) (move shape (gpt/point (- x) (- y))))
(defn translate-from-frame
[shape {:keys [x y]}]
(move shape (gpt/point x y)))
;; --- Helpers ;; --- Helpers

17
common/app/common/pages/changes.cljc
View file

@ -29,12 +29,15 @@
(defmulti process-operation (fn [_ op] (:type op))) (defmulti process-operation (fn [_ op] (:type op)))
(defn process-changes (defn process-changes
[data items] ([data items] (process-changes data items true))
(->> (us/verify ::spec/changes items) ([data items verify?]
(reduce #(do ;; When verify? false we spec the schema validation. Currently used to make just
;; (prn "process-change" (:type %2) (:id %2)) ;; 1 validation even if the changes are applied twice
(or (process-change %1 %2) %1)) (when verify?
data))) (us/verify ::spec/changes items))
(->> items
(reduce #(or (process-change %1 %2) %1) data))))
(defmethod process-change :set-option (defmethod process-change :set-option
[data {:keys [page-id option value]}] [data {:keys [page-id option value]}]
@ -91,7 +94,7 @@
(let [update-fn (fn [objects] (let [update-fn (fn [objects]
(if-let [obj (get objects id)] (if-let [obj (get objects id)]
(let [result (reduce process-operation obj operations)] (let [result (reduce process-operation obj operations)]
(us/verify ::spec/shape result) #?(:clj (us/verify ::spec/shape result))
(assoc objects id result)) (assoc objects id result))
objects))] objects))]
(if page-id (if page-id

2
frontend/deps.edn
View file

@ -16,7 +16,7 @@
funcool/okulary {:mvn/version "2020.04.14-0"} funcool/okulary {:mvn/version "2020.04.14-0"}
funcool/potok {:mvn/version "3.2.0"} funcool/potok {:mvn/version "3.2.0"}
funcool/promesa {:mvn/version "6.0.0"} funcool/promesa {:mvn/version "6.0.0"}
funcool/rumext {:mvn/version "2020.11.27-0"} funcool/rumext {:mvn/version "2021.01.26-0"}
lambdaisland/uri {:mvn/version "1.4.54" lambdaisland/uri {:mvn/version "1.4.54"
:exclusions [org.clojure/data.json]} :exclusions [org.clojure/data.json]}

6
frontend/src/app/main/data/workspace/common.cljs
View file

@ -13,6 +13,7 @@
[app.common.geom.proportions :as gpr] [app.common.geom.proportions :as gpr]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.common.pages.spec :as spec]
[app.common.spec :as us] [app.common.spec :as us]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.worker :as uw] [app.main.worker :as uw]
@ -93,9 +94,10 @@
[:workspace-data] [:workspace-data]
[:workspace-libraries file-id :data])] [:workspace-libraries file-id :data])]
(try (try
(let [state (update-in state path1 cp/process-changes changes)] (us/verify ::spec/changes changes)
(let [state (update-in state path1 cp/process-changes changes false)]
(cond-> state (cond-> state
commit-local? (update-in path2 cp/process-changes changes))) commit-local? (update-in path2 cp/process-changes changes false)))
(catch :default e (catch :default e
(vreset! error e) (vreset! error e)
state)))) state))))

109
frontend/src/app/main/data/workspace/texts.cljs
View file

@ -221,40 +221,93 @@
(defn not-changed? [old-dim new-dim] (defn not-changed? [old-dim new-dim]
(> (mth/abs (- old-dim new-dim)) 0.1)) (> (mth/abs (- old-dim new-dim)) 0.1))
(defn resize-text [id new-width new-height] (defn resize-text-batch [changes]
(ptk/reify ::resize-text (ptk/reify ::resize-text-batch
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [page-id (:current-page-id state) (let [page-id (:current-page-id state)
shape (get-in state [:workspace-data :pages-index page-id :objects id])
{:keys [selrect grow-type overflow-text]} (gsh/transform-shape shape) objects0 (get-in state [:workspace-file :data :pages-index page-id :objects])
{shape-width :width shape-height :height} selrect objects1 (get-in state [:workspace-data :pages-index page-id :objects])
change-text-shape
(fn [objects [id [new-width new-height]]]
(let [shape (get objects id)
{:keys [selrect grow-type overflow-text]} (gsh/transform-shape shape)
{shape-width :width shape-height :height} selrect
modifier-width (gsh/resize-modifiers shape :width new-width)
modifier-height (gsh/resize-modifiers shape :height new-height)
shape (cond-> shape
(and overflow-text (not= :fixed grow-type))
(assoc :overflow-text false)
(and (= :fixed grow-type) (not overflow-text) (> new-height shape-height))
(assoc :overflow-text true)
(and (= :fixed grow-type) overflow-text (<= new-height shape-height))
(assoc :overflow-text true)
(and (not-changed? shape-width new-width) (= grow-type :auto-width))
(-> (assoc :modifiers modifier-width)
(gsh/transform-shape))
(and (not-changed? shape-height new-height)
(or (= grow-type :auto-height) (= grow-type :auto-width)))
(-> (assoc :modifiers modifier-height)
(gsh/transform-shape)))]
(assoc objects id shape)))
undo-transaction (get-in state [:workspace-undo :transaction]) undo-transaction (get-in state [:workspace-undo :transaction])
objects2 (->> changes (reduce change-text-shape objects1))
events regchg {:type :reg-objects
(cond-> [] :page-id page-id
(and overflow-text (not= :fixed grow-type)) :shapes (vec (keys changes))}
(conj (update-overflow-text id false))
(and (= :fixed grow-type) (not overflow-text) (> new-height shape-height)) rchanges (dwc/generate-changes page-id objects1 objects2)
(conj (update-overflow-text id true)) uchanges (dwc/generate-changes page-id objects2 objects0)]
(and (= :fixed grow-type) overflow-text (<= new-height shape-height)) (if (seq rchanges)
(conj (update-overflow-text id false))
(and (or (not-changed? shape-width new-width) (not-changed? shape-height new-height))
(= grow-type :auto-width))
(conj (dwt/update-dimensions [id] :width new-width)
(dwt/update-dimensions [id] :height new-height))
(and (not-changed? shape-height new-height)
(= grow-type :auto-height))
(conj (dwt/update-dimensions [id] :height new-height)))]
(if (not (empty? events))
(rx/concat (rx/concat
(when (not undo-transaction) (when-not undo-transaction
(rx/of (dwc/start-undo-transaction))) (rx/of (dwc/start-undo-transaction)))
(rx/from events) (rx/of (dwc/commit-changes (conj rchanges regchg) (conj uchanges regchg) {:commit-local? true}))
(when (not undo-transaction) (when-not undo-transaction
(rx/of (dwc/discard-undo-transaction))))))))) (rx/of (dwc/discard-undo-transaction)))))))))
;; When a resize-event arrives we start "buffering" for a time
;; after that time we invoke `resize-text-batch` with all the changes
;; together. This improves the performance because we only re-render the
;; resized components once even if there are changes that applies to
;; lots of texts like changing a font
(defn resize-text [id new-width new-height]
(ptk/reify ::resize-text
IDeref
(-deref [_]
{:id id :width new-width :height new-height})
ptk/WatchEvent
(watch [_ state stream]
(let [;; This stream aggregates the events of "resizing"
resize-events (rx/merge
(->> (rx/of (resize-text id new-width new-height)))
(->> stream (rx/filter (ptk/type? ::resize-text))))
;; Stop buffering after time without resizes
stop-buffer (->> resize-events (rx/debounce 100))]
(if-not (::handling-texts state)
(->> (rx/concat
(rx/of #(assoc % ::handling-texts true))
(->> resize-events
(rx/take-until stop-buffer)
(rx/reduce (fn [acc event]
(assoc acc (:id @event) [(:width @event) (:height @event)]))
{id [new-width new-height]})
(rx/map #(resize-text-batch %)))
(rx/of #(dissoc % ::handling-texts))))
(rx/empty))))))

52
frontend/src/app/main/refs.cljs
View file

@ -159,51 +159,45 @@
ids)) ids))
workspace-page-objects =)) workspace-page-objects =))
(def selected-data
(l/derived #(let [selected (get-in % [:workspace-local :selected])
page-id (:current-page-id %)
objects (get-in % [:workspace-data :pages-index page-id :objects])]
(hash-map :selected selected
:page-id page-id
:objects objects))
st/state =))
(defn is-child-selected? (defn is-child-selected?
[id] [id]
(letfn [(selector [state] (letfn [(selector [{:keys [selected page-id objects]}]
(let [page-id (:current-page-id state) (let [children (cp/get-children id objects)]
objects (get-in state [:workspace-data :pages-index page-id :objects])
selected (get-in state [:workspace-local :selected])
children (cp/get-children id objects)]
(some #(contains? selected %) children)))] (some #(contains? selected %) children)))]
(l/derived selector st/state))) (l/derived selector selected-data =)))
;; TODO: can be replaced by objects-by-id
(def selected-objects (def selected-objects
(letfn [(selector [state] (letfn [(selector [{:keys [selected page-id objects]}]
(let [selected (get-in state [:workspace-local :selected]) (->> selected
page-id (:current-page-id state) (map #(get objects %))
objects (get-in state [:workspace-data :pages-index page-id :objects])] (filterv (comp not nil?))))]
(->> selected (l/derived selector selected-data =)))
(map #(get objects %))
(filterv (comp not nil?)))))]
(l/derived selector st/state =)))
(def selected-shapes-with-children (def selected-shapes-with-children
(letfn [(selector [state] (letfn [(selector [{:keys [selected page-id objects]}]
(let [selected (get-in state [:workspace-local :selected]) (let [children (->> selected
page-id (:current-page-id state)
objects (get-in state [:workspace-data :pages-index page-id :objects])
children (->> selected
(mapcat #(cp/get-children % objects)) (mapcat #(cp/get-children % objects))
(filterv (comp not nil?)))] (filterv (comp not nil?)))]
(into selected children)))] (into selected children)))]
(l/derived selector st/state =))) (l/derived selector selected-data =)))
(def selected-objects-with-children (def selected-objects-with-children
(letfn [(selector [state] (letfn [(selector [{:keys [selected page-id objects]}]
(let [selected (get-in state [:workspace-local :selected]) (let [children (->> selected
page-id (:current-page-id state)
objects (get-in state [:workspace-data :pages-index page-id :objects])
children (->> selected
(mapcat #(cp/get-children % objects)) (mapcat #(cp/get-children % objects))
(filterv (comp not nil?))) (filterv (comp not nil?)))
shapes (into selected children)] shapes (into selected children)]
(mapv #(get objects %) shapes)))] (mapv #(get objects %) shapes)))]
(l/derived selector st/state =))) (l/derived selector selected-data =)))
;; ---- Viewer refs ;; ---- Viewer refs

3
frontend/src/app/main/ui/shapes/path.cljs
View file

@ -24,7 +24,8 @@
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
background? (unchecked-get props "background?") background? (unchecked-get props "background?")
{:keys [id x y width height]} (:selrect shape) {:keys [id x y width height]} (:selrect shape)
pdata (ugp/content->path (:content shape)) content (:content shape)
pdata (mf/use-memo (mf/deps content) #(ugp/content->path content))
props (-> (attrs/extract-style-attrs shape) props (-> (attrs/extract-style-attrs shape)
(obj/merge! (obj/merge!
#js {:d pdata}))] #js {:d pdata}))]

180
frontend/src/app/main/ui/shapes/svg_raw.cljs
View file

@ -23,33 +23,6 @@
;; Context to store a re-mapping of the ids ;; Context to store a re-mapping of the ids
(def svg-ids-ctx (mf/create-context nil)) (def svg-ids-ctx (mf/create-context nil))
(defn vbox->rect
"Converts the viewBox into a rectangle"
[vbox]
(when vbox
(let [[x y width height] (map ud/parse-float (str/split vbox " "))]
{:x x :y y :width width :height height})))
(defn vbox-center [shape]
(let [vbox-rect (-> (get-in shape [:content :attrs :viewBox] "0 0 100 100")
(vbox->rect))]
(gsh/center-rect vbox-rect)))
(defn vbox-bounds [shape]
(let [vbox-rect (-> (get-in shape [:content :attrs :viewBox] "0 0 100 100")
(vbox->rect))
vbox-center (gsh/center-rect vbox-rect)
transform (gsh/transform-matrix shape nil vbox-center)]
(-> (gsh/rect->points vbox-rect)
(gsh/transform-points vbox-center transform)
(gsh/points->rect))) )
(defn transform-viewbox [shape]
(let [center (vbox-center shape)
bounds (vbox-bounds shape)
{:keys [x y width height]} (gsh/center->rect center (:width bounds) (:height bounds))]
(str x " " y " " width " " height)))
(defn generate-id-mapping [content] (defn generate-id-mapping [content]
(letfn [(visit-node [result node] (letfn [(visit-node [result node]
(let [element-id (get-in node [:attrs :id]) (let [element-id (get-in node [:attrs :id])
@ -58,79 +31,102 @@
(reduce visit-node result (:content node))))] (reduce visit-node result (:content node))))]
(visit-node {} content))) (visit-node {} content)))
(defonce replace-regex #"[^#]*#([^)\s]+).*")
(defn replace-attrs-ids
"Replaces the ids inside a property"
[ids-mapping attrs]
(letfn [(replace-ids [key val]
(if (map? val)
(cd/mapm replace-ids val)
(let [[_ from-id] (re-matches replace-regex val)]
(if (and from-id (contains? ids-mapping from-id))
(str/replace val from-id (get ids-mapping from-id))
val))))]
(cd/mapm replace-ids attrs)))
(mf/defc svg-root
{::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
children (unchecked-get props "children")
{:keys [x y width height]} shape
{:keys [tag attrs] :as content} (:content shape)
ids-mapping (mf/use-memo #(generate-id-mapping content))
attrs (-> (clj->js attrs)
(obj/set! "x" x)
(obj/set! "y" y)
(obj/set! "width" width)
(obj/set! "height" height)
(obj/set! "preserveAspectRatio" "none"))]
[:& (mf/provider svg-ids-ctx) {:value ids-mapping}
[:g.svg-raw {:transform (gsh/transform-matrix shape)}
[:> "svg" attrs children]]]))
(mf/defc svg-element
{::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
children (unchecked-get props "children")
{:keys [content]} shape
{:keys [attrs tag]} content
ids-mapping (mf/use-ctx svg-ids-ctx)
attrs (mf/use-memo #(replace-attrs-ids ids-mapping attrs))
custom-attrs (usa/extract-style-attrs shape)
element-id (get-in content [:attrs :id])
style (obj/merge! (clj->js (:style attrs {}))
(obj/get custom-attrs "style"))
attrs (-> (clj->js attrs)
(obj/merge! custom-attrs)
(obj/set! "style" style))
attrs (cond-> attrs
element-id (obj/set! "id" (get ids-mapping element-id)))
]
[:> (name tag) attrs children]))
(defn svg-raw-shape [shape-wrapper] (defn svg-raw-shape [shape-wrapper]
(mf/fnc svg-raw-shape (mf/fnc svg-raw-shape
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [frame (unchecked-get props "frame")
shape (unchecked-get props "shape")
childs (unchecked-get props "childs")
{:keys [tag attrs] :as content} (:content shape) (let [frame (unchecked-get props "frame")
shape (unchecked-get props "shape")
childs (unchecked-get props "childs")
new-mapping (mf/use-memo #(when (= tag :svg) (generate-id-mapping content))) {:keys [content]} shape
ids-mapping (if (= tag :svg) {:keys [tag]} content
new-mapping
(mf/use-ctx svg-ids-ctx))
rex #"[^#]*#([^)\s]+).*" svg-root? (and (map? content) (= tag :svg))
svg-tag? (map? content)
svg-leaf? (string? content)]
;; Replaces the attributes ID's so there are no collisions between shapes (cond
replace-ids svg-root?
(fn replace-ids [key val] [:& svg-root {:shape shape}
(if (map? val) (for [item childs]
(cd/mapm replace-ids val) [:& shape-wrapper {:frame frame :shape item :key (:id item)}])]
(let [[_ from-id] (re-matches rex val)]
(if (and from-id (contains? ids-mapping from-id))
(str/replace val from-id (get ids-mapping from-id))
val))))
attrs (cd/mapm replace-ids attrs) svg-tag?
[:& svg-element {:shape shape}
(for [item childs]
[:& shape-wrapper {:frame frame :shape item :key (:id item)}])]
custom-attrs (usa/extract-style-attrs shape) svg-leaf?
content
style (obj/merge! (clj->js (:style attrs {})) :else nil))))
(obj/get custom-attrs "style"))
attrs (-> (clj->js attrs)
(obj/merge! custom-attrs)
(obj/set! "style" style))
element-id (get-in content [:attrs :id])]
(cond
;; Root SVG TAG
(and (map? content) (= tag :svg))
(let [{:keys [x y width height]} shape
attrs (-> attrs
(obj/set! "x" x)
(obj/set! "y" y)
(obj/set! "width" width)
(obj/set! "height" height)
(obj/set! "preserveAspectRatio" "none")
#_(obj/set! "viewBox" (transform-viewbox shape)))]
[:& (mf/provider svg-ids-ctx) {:value ids-mapping}
[:g.svg-raw {:transform (gsh/transform-matrix shape)}
[:> "svg" attrs
(for [item childs]
[:& shape-wrapper {:frame frame
:shape item
:key (:id item)}])]]])
;; Other tags different than root
(map? content)
(let [attrs (cond-> attrs
element-id (obj/set! "id" (get ids-mapping element-id)))]
[:> (name tag) attrs
(for [item childs]
[:& shape-wrapper {:frame frame
:shape item
:key (:id item)}])])
;; String content
(string? content) content
:else nil))))

125
frontend/src/app/main/ui/shapes/text.cljs
View file

@ -18,64 +18,90 @@
[app.util.object :as obj] [app.util.object :as obj]
[app.util.color :as uc] [app.util.color :as uc]
[app.main.ui.shapes.text.styles :as sts] [app.main.ui.shapes.text.styles :as sts]
[app.main.ui.shapes.text.embed :as ste])) [app.main.ui.shapes.text.embed :as ste]
[app.util.perf :as perf]))
(mf/defc render-text
{::mf/wrap-props false}
[props]
(let [node (obj/get props "node")
text (:text node)
style (sts/generate-text-styles props)]
[:span {:style style
:className (when (:fill-color-gradient node) "gradient")}
(if (= text "") "\u00A0" text)]))
(mf/defc render-root
{::mf/wrap-props false}
[props]
(let [node (obj/get props "node")
embed-fonts? (obj/get props "embed-fonts?")
children (obj/get props "children")
style (sts/generate-root-styles props)]
[:div.root.rich-text
{:style style
:xmlns "http://www.w3.org/1999/xhtml"}
[:*
[:style ".gradient { background: var(--text-color); -webkit-text-fill-color: transparent; -webkit-background-clip: text;"]
(when embed-fonts?
[ste/embed-fontfaces-style {:node node}])]
children]))
(mf/defc render-paragraph-set
{::mf/wrap-props false}
[props]
(let [node (obj/get props "node")
children (obj/get props "children")
style (sts/generate-paragraph-set-styles props)]
[:div.paragraph-set {:style style} children]))
(mf/defc render-paragraph
{::mf/wrap-props false}
[props]
(let [node (obj/get props "node")
children (obj/get props "children")
style (sts/generate-paragraph-styles props)]
[:p.paragraph {:style style} children]))
;; -- Text nodes ;; -- Text nodes
(mf/defc text-node (mf/defc render-node
[{:keys [node index shape] :as props}] {::mf/wrap-props false}
(let [embed-resources? (mf/use-ctx muc/embed-ctx) [props]
{:keys [type text children]} node (let [node (obj/get props "node")
props #js {:shape shape} index (obj/get props "index")
render-node {:keys [type text children]} node]
(fn [index node]
(mf/element text-node {:index index
:node node
:key index
:shape shape}))]
(if (string? text) (if (string? text)
(let [style (sts/generate-text-styles (clj->js node) props)] [:> render-text props]
[:span {:style style
:className (when (:fill-color-gradient node) "gradient")}
(if (= text "") "\u00A0" text)])
(let [children (map-indexed render-node children)] (let [component (case type
(case type "root" render-root
"root" "paragraph-set" render-paragraph-set
(let [style (sts/generate-root-styles (clj->js node) props)] "paragraph" render-paragraph
[:div.root.rich-text nil)]
{:key index (when component
:style style [:> component (obj/set! props "key" index)
:xmlns "http://www.w3.org/1999/xhtml"} (for [[index child] (d/enumerate children)]
[:* (let [props (-> (obj/clone props)
[:style ".gradient { background: var(--text-color); -webkit-text-fill-color: transparent; -webkit-background-clip: text;"] (obj/set! "node" child)
(when embed-resources? (obj/set! "index" index)
[ste/embed-fontfaces-style {:node node}])] (obj/set! "key" index))]
children]) [:> render-node props]))])))))
"paragraph-set"
(let [style (sts/generate-paragraph-set-styles (clj->js node) props)]
[:div.paragraph-set {:key index :style style} children])
"paragraph"
(let [style (sts/generate-paragraph-styles (clj->js node) props)]
[:p.paragraph {:key index :style style} children])
nil)))))
(mf/defc text-content (mf/defc text-content
{::mf/wrap-props false {::mf/wrap-props false}
::mf/wrap [mf/memo]}
[props] [props]
(let [root (obj/get props "content") (let [root (obj/get props "content")
shape (obj/get props "shape")] shape (obj/get props "shape")
[:& text-node {:index 0 embed-fonts? (obj/get props "embed-fonts?")]
:node root [:& render-node {:index 0
:shape shape}])) :node root
:shape shape
:embed-fonts? embed-fonts?}]))
(defn- retrieve-colors (defn- retrieve-colors
[shape] [shape]
(let [colors (->> shape :content (let [colors (->> shape
:content
(tree-seq map? :children) (tree-seq map? :children)
(into #{} (comp (map :fill-color) (filter string?))))] (into #{} (comp (map :fill-color) (filter string?))))]
(if (empty? colors) (if (empty? colors)
@ -87,8 +113,8 @@
::mf/forward-ref true} ::mf/forward-ref true}
[props ref] [props ref]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
selected? (unchecked-get props "selected?")
grow-type (unchecked-get props "grow-type") grow-type (unchecked-get props "grow-type")
embed-fonts? (mf/use-ctx muc/embed-ctx)
{:keys [id x y width height content]} shape] {:keys [id x y width height content]} shape]
[:foreignObject {:x x [:foreignObject {:x x
:y y :y y
@ -99,4 +125,5 @@
:height (if (#{:auto-height :auto-width} grow-type) 10000 height) :height (if (#{:auto-height :auto-width} grow-type) 10000 height)
:ref ref} :ref ref}
[:& text-content {:shape shape [:& text-content {:shape shape
:content (:content shape)}]])) :content (:content shape)
:embed-fonts? embed-fonts?}]]))

178
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -17,111 +17,115 @@
[app.util.text :as ut])) [app.util.text :as ut]))
(defn generate-root-styles (defn generate-root-styles
[data props] ([props] (generate-root-styles (clj->js (obj/get props "node")) props))
(let [valign (obj/get data "vertical-align" "top") ([data props]
talign (obj/get data "text-align" "flex-start") (let [valign (obj/get data "vertical-align" "top")
shape (obj/get props "shape") talign (obj/get data "text-align" "flex-start")
base #js {:height (or (:height shape) "100%") shape (obj/get props "shape")
:width (or (:width shape) "100%") base #js {:height (or (:height shape) "100%")
:display "flex"}] :width (or (:width shape) "100%")
(cond-> base :display "flex"}]
(= valign "top") (obj/set! "alignItems" "flex-start") (cond-> base
(= valign "center") (obj/set! "alignItems" "center") (= valign "top") (obj/set! "alignItems" "flex-start")
(= valign "bottom") (obj/set! "alignItems" "flex-end") (= valign "center") (obj/set! "alignItems" "center")
(= valign "bottom") (obj/set! "alignItems" "flex-end")
(= talign "left") (obj/set! "justifyContent" "flex-start") (= talign "left") (obj/set! "justifyContent" "flex-start")
(= talign "center") (obj/set! "justifyContent" "center") (= talign "center") (obj/set! "justifyContent" "center")
(= talign "right") (obj/set! "justifyContent" "flex-end") (= talign "right") (obj/set! "justifyContent" "flex-end")
(= talign "justify") (obj/set! "justifyContent" "stretch")))) (= talign "justify") (obj/set! "justifyContent" "stretch")))))
(defn generate-paragraph-set-styles (defn generate-paragraph-set-styles
[data props] ([props] (generate-paragraph-set-styles nil props))
;; The position absolute is used so the paragraph is "outside" ([data props]
;; the normal layout and can grow outside its parent ;; The position absolute is used so the paragraph is "outside"
;; We use this element to measure the size of the text ;; the normal layout and can grow outside its parent
(let [base #js {:display "inline-block"}] ;; We use this element to measure the size of the text
base)) (let [base #js {:display "inline-block"}]
base)))
(defn generate-paragraph-styles (defn generate-paragraph-styles
[data props] ([props] (generate-paragraph-styles (clj->js (obj/get props "node")) props))
(let [shape (obj/get props "shape") ([data props]
grow-type (:grow-type shape) (let [shape (obj/get props "shape")
base #js {:fontSize "14px" grow-type (:grow-type shape)
:margin "inherit" base #js {:fontSize "14px"
:lineHeight "1.2"} :margin "inherit"
lh (obj/get data "line-height") :lineHeight "1.2"}
ta (obj/get data "text-align")] lh (obj/get data "line-height")
(cond-> base ta (obj/get data "text-align")]
ta (obj/set! "textAlign" ta) (cond-> base
lh (obj/set! "lineHeight" lh) ta (obj/set! "textAlign" ta)
(= grow-type :auto-width) (obj/set! "whiteSpace" "pre")))) lh (obj/set! "lineHeight" lh)
(= grow-type :auto-width) (obj/set! "whiteSpace" "pre")))))
(defn generate-text-styles (defn generate-text-styles
[data props] ([props] (generate-text-styles (clj->js (obj/get props "node")) props))
(let [letter-spacing (obj/get data "letter-spacing") ([data props]
text-decoration (obj/get data "text-decoration") (let [letter-spacing (obj/get data "letter-spacing")
text-transform (obj/get data "text-transform") text-decoration (obj/get data "text-decoration")
line-height (obj/get data "line-height") text-transform (obj/get data "text-transform")
line-height (obj/get data "line-height")
font-id (obj/get data "font-id" (:font-id ut/default-text-attrs)) font-id (obj/get data "font-id" (:font-id ut/default-text-attrs))
font-variant-id (obj/get data "font-variant-id") font-variant-id (obj/get data "font-variant-id")
font-family (obj/get data "font-family") font-family (obj/get data "font-family")
font-size (obj/get data "font-size") font-size (obj/get data "font-size")
;; Old properties for backwards compatibility ;; Old properties for backwards compatibility
fill (obj/get data "fill") fill (obj/get data "fill")
opacity (obj/get data "opacity" 1) opacity (obj/get data "opacity" 1)
fill-color (obj/get data "fill-color" fill) fill-color (obj/get data "fill-color" fill)
fill-opacity (obj/get data "fill-opacity" opacity) fill-opacity (obj/get data "fill-opacity" opacity)
fill-color-gradient (obj/get data "fill-color-gradient" nil) fill-color-gradient (obj/get data "fill-color-gradient" nil)
fill-color-gradient (when fill-color-gradient fill-color-gradient (when fill-color-gradient
(-> (js->clj fill-color-gradient :keywordize-keys true) (-> (js->clj fill-color-gradient :keywordize-keys true)
(update :type keyword))) (update :type keyword)))
;; Uncomment this to allow to remove text colors. This could break the texts that already exist ;; Uncomment this to allow to remove text colors. This could break the texts that already exist
;;[r g b a] (if (nil? fill-color) ;;[r g b a] (if (nil? fill-color)
;; [0 0 0 0] ;; Transparent color ;; [0 0 0 0] ;; Transparent color
;; (uc/hex->rgba fill-color fill-opacity)) ;; (uc/hex->rgba fill-color fill-opacity))
[r g b a] (uc/hex->rgba fill-color fill-opacity) [r g b a] (uc/hex->rgba fill-color fill-opacity)
text-color (if fill-color-gradient text-color (if fill-color-gradient
(uc/gradient->css (js->clj fill-color-gradient)) (uc/gradient->css (js->clj fill-color-gradient))
(str/format "rgba(%s, %s, %s, %s)" r g b a)) (str/format "rgba(%s, %s, %s, %s)" r g b a))
fontsdb (deref fonts/fontsdb) fontsdb (deref fonts/fontsdb)
base #js {:textDecoration text-decoration base #js {:textDecoration text-decoration
:textTransform text-transform :textTransform text-transform
:lineHeight (or line-height "inherit") :lineHeight (or line-height "inherit")
:color text-color :color text-color
"--text-color" text-color}] "--text-color" text-color}]
(when (and (string? letter-spacing) (when (and (string? letter-spacing)
(pos? (alength letter-spacing))) (pos? (alength letter-spacing)))
(obj/set! base "letterSpacing" (str letter-spacing "px"))) (obj/set! base "letterSpacing" (str letter-spacing "px")))
(when (and (string? font-size) (when (and (string? font-size)
(pos? (alength font-size))) (pos? (alength font-size)))
(obj/set! base "fontSize" (str font-size "px"))) (obj/set! base "fontSize" (str font-size "px")))
(when (and (string? font-id) (when (and (string? font-id)
(pos? (alength font-id))) (pos? (alength font-id)))
(fonts/ensure-loaded! font-id) (fonts/ensure-loaded! font-id)
(let [font (get fontsdb font-id)] (let [font (get fontsdb font-id)]
(let [font-family (or (:family font) (let [font-family (or (:family font)
(obj/get data "fontFamily")) (obj/get data "fontFamily"))
font-variant (d/seek #(= font-variant-id (:id %)) font-variant (d/seek #(= font-variant-id (:id %))
(:variants font)) (:variants font))
font-style (or (:style font-variant) font-style (or (:style font-variant)
(obj/get data "fontStyle")) (obj/get data "fontStyle"))
font-weight (or (:weight font-variant) font-weight (or (:weight font-variant)
(obj/get data "fontWeight"))] (obj/get data "fontWeight"))]
(obj/set! base "fontFamily" font-family) (obj/set! base "fontFamily" font-family)
(obj/set! base "fontStyle" font-style) (obj/set! base "fontStyle" font-style)
(obj/set! base "fontWeight" font-weight)))) (obj/set! base "fontWeight" font-weight))))
base)) base)))

51
frontend/src/app/main/ui/workspace/frame_grid.cljs
View file

@ -15,35 +15,36 @@
[app.common.math :as mth] [app.common.math :as mth]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.util.geom.grid :as gg])) [app.util.geom.grid :as gg]
[app.common.uuid :as uuid]))
(mf/defc square-grid [{:keys [frame zoom grid] :as props}] (mf/defc square-grid [{:keys [frame zoom grid] :as props}]
(let [{:keys [color size] :as params} (-> grid :params) (let [grid-id (mf/use-memo #(uuid/next))
{:keys [color size] :as params} (-> grid :params)
{color-value :color color-opacity :opacity} (-> grid :params :color) {color-value :color color-opacity :opacity} (-> grid :params :color)
;; Support for old color format ;; Support for old color format
color-value (or color-value (:value (get-in grid [:params :color :value]))) color-value (or color-value (:value (get-in grid [:params :color :value])))]
{frame-width :width frame-height :height :keys [x y]} frame]
(when (> size 0) [:g.grid
[:g.grid [:defs
[:* [:pattern {:id grid-id
(for [xs (range size frame-width size)] :x (:x frame)
[:line {:key (str (:id frame) "-y-" xs) :y (:y frame)
:x1 (mth/round (+ x xs)) :width size
:y1 (mth/round y) :height size
:x2 (mth/round (+ x xs)) :pattern-units "userSpaceOnUse"}
:y2 (mth/round (+ y frame-height)) [:path {:d (str "M " size " " 0 " "
:style {:stroke color-value "L " 0 " " 0 " " 0 " " size " ")
:stroke-opacity color-opacity :style {:fill "none"
:stroke-width (str (/ 1 zoom))}}]) :stroke color-value
(for [ys (range size frame-height size)] :stroke-opacity color-opacity
[:line {:key (str (:id frame) "-x-" ys) :stroke-width (str (/ 1 zoom))}}]]]
:x1 (mth/round x)
:y1 (mth/round (+ y ys)) [:rect {:x (:x frame)
:x2 (mth/round (+ x frame-width)) :y (:y frame)
:y2 (mth/round (+ y ys)) :width (:width frame)
:style {:stroke color-value :height (:height frame)
:stroke-opacity color-opacity :fill (str "url(#" grid-id ")")}]]))
:stroke-width (str (/ 1 zoom))}}])]])))
(mf/defc layout-grid [{:keys [key frame zoom grid]}] (mf/defc layout-grid [{:keys [key frame zoom grid]}]
(let [{color-value :color color-opacity :opacity} (-> grid :params :color) (let [{color-value :color color-opacity :opacity} (-> grid :params :color)

1
frontend/src/app/main/ui/workspace/selection.cljs
View file

@ -359,6 +359,7 @@
:zoom zoom}])])) :zoom zoom}])]))
(mf/defc selection-handlers (mf/defc selection-handlers
{::mf/wrap [mf/memo]}
[{:keys [selected edition zoom show-distances] :as props}] [{:keys [selected edition zoom show-distances] :as props}]
(let [;; We need remove posible nil values because on shape (let [;; We need remove posible nil values because on shape
;; deletion many shape will reamin selected and deleted ;; deletion many shape will reamin selected and deleted

18
frontend/src/app/main/ui/workspace/shapes.cljs
View file

@ -46,17 +46,6 @@
(def image-wrapper (common/generic-wrapper-factory image/image-shape)) (def image-wrapper (common/generic-wrapper-factory image/image-shape))
(def rect-wrapper (common/generic-wrapper-factory rect/rect-shape)) (def rect-wrapper (common/generic-wrapper-factory rect/rect-shape))
(defn- shape-wrapper-memo-equals?
[np op]
(let [n-shape (obj/get np "shape")]
(if (= (:type n-shape) :group)
false
(let [o-shape (obj/get op "shape")
n-frame (obj/get np "frame")
o-frame (obj/get op "frame")]
(and (identical? n-shape o-shape)
(identical? n-frame o-frame))))))
(defn make-is-moving-ref (defn make-is-moving-ref
[id] [id]
(fn [] (fn []
@ -66,7 +55,7 @@
(l/derived check-moving refs/workspace-local)))) (l/derived check-moving refs/workspace-local))))
(mf/defc shape-wrapper (mf/defc shape-wrapper
{::mf/wrap [#(mf/memo' % shape-wrapper-memo-equals?)] {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
::mf/wrap-props false} ::mf/wrap-props false}
[props] [props]
(let [shape (obj/get props "shape") (let [shape (obj/get props "shape")
@ -77,8 +66,6 @@
opts #js {:shape shape opts #js {:shape shape
:frame frame} :frame frame}
alt? (hooks/use-rxsub ms/keyboard-alt)
moving-iref (mf/use-memo (mf/deps (:id shape)) (make-is-moving-ref (:id shape))) moving-iref (mf/use-memo (mf/deps (:id shape)) (make-is-moving-ref (:id shape)))
moving? (mf/deref moving-iref) moving? (mf/deref moving-iref)
svg-element? (and (= (:type shape) :svg-raw) svg-element? (and (= (:type shape) :svg-raw)
@ -88,8 +75,7 @@
(when (and shape (not (:hidden shape))) (when (and shape (not (:hidden shape)))
[:* [:*
(if-not svg-element? (if-not svg-element?
[:g.shape-wrapper {:style {:display (when hide-moving? "none") [:g.shape-wrapper {:style {:display (when hide-moving? "none")}}
:cursor (if alt? cur/duplicate nil)}}
(case (:type shape) (case (:type shape)
:path [:> path/path-wrapper opts] :path [:> path/path-wrapper opts]
:text [:> text/text-wrapper opts] :text [:> text/text-wrapper opts]

20
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -25,24 +25,6 @@
[rumext.alpha :as mf] [rumext.alpha :as mf]
[app.main.ui.context :as muc])) [app.main.ui.context :as muc]))
(defn- frame-wrapper-factory-equals?
[np op]
(let [n-shape (aget np "shape")
o-shape (aget op "shape")
n-objs (aget np "objects")
o-objs (aget op "objects")
ids (:shapes n-shape)]
(and (identical? n-shape o-shape)
(loop [id (first ids)
ids (rest ids)]
(if (nil? id)
true
(if (identical? (get n-objs id)
(get o-objs id))
(recur (first ids) (rest ids))
false))))))
(defn use-select-shape [{:keys [id]} edition] (defn use-select-shape [{:keys [id]} edition]
(mf/use-callback (mf/use-callback
(mf/deps id edition) (mf/deps id edition)
@ -121,7 +103,7 @@
[shape-wrapper] [shape-wrapper]
(let [frame-shape (frame/frame-shape shape-wrapper)] (let [frame-shape (frame/frame-shape shape-wrapper)]
(mf/fnc frame-wrapper (mf/fnc frame-wrapper
{::mf/wrap [#(mf/memo' % frame-wrapper-factory-equals?) custom-deferred] {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "objects"])) custom-deferred]
::mf/wrap-props false} ::mf/wrap-props false}
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")

11
frontend/src/app/main/ui/workspace/shapes/group.cljs
View file

@ -21,15 +21,6 @@
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.util.debug :refer [debug?]])) [app.util.debug :refer [debug?]]))
(defn- group-wrapper-factory-equals?
[np op]
(let [n-shape (unchecked-get np "shape")
o-shape (unchecked-get op "shape")
n-frame (unchecked-get np "frame")
o-frame (unchecked-get op "frame")]
(and (= n-frame o-frame)
(= n-shape o-shape))))
(defn use-double-click [{:keys [id]}] (defn use-double-click [{:keys [id]}]
(mf/use-callback (mf/use-callback
(mf/deps id) (mf/deps id)
@ -42,7 +33,7 @@
[shape-wrapper] [shape-wrapper]
(let [group-shape (group/group-shape shape-wrapper)] (let [group-shape (group/group-shape shape-wrapper)]
(mf/fnc group-wrapper (mf/fnc group-wrapper
{::mf/wrap [#(mf/memo' % group-wrapper-factory-equals?)] {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
::mf/wrap-props false} ::mf/wrap-props false}
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")

11
frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs
View file

@ -21,20 +21,11 @@
;; this allows them to have gradients, shadows and masks ;; this allows them to have gradients, shadows and masks
(def svg-elements #{:svg :circle :ellipse :image :line :path :polygon :polyline :rect :symbol :text :textPath}) (def svg-elements #{:svg :circle :ellipse :image :line :path :polygon :polyline :rect :symbol :text :textPath})
(defn- svg-raw-wrapper-factory-equals?
[np op]
(let [n-shape (unchecked-get np "shape")
o-shape (unchecked-get op "shape")
n-frame (unchecked-get np "frame")
o-frame (unchecked-get op "frame")]
(and (= n-frame o-frame)
(= n-shape o-shape))))
(defn svg-raw-wrapper-factory (defn svg-raw-wrapper-factory
[shape-wrapper] [shape-wrapper]
(let [svg-raw-shape (svg-raw/svg-raw-shape shape-wrapper)] (let [svg-raw-shape (svg-raw/svg-raw-shape shape-wrapper)]
(mf/fnc svg-raw-wrapper (mf/fnc svg-raw-wrapper
{::mf/wrap [#(mf/memo' % svg-raw-wrapper-factory-equals?)] {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
::mf/wrap-props false} ::mf/wrap-props false}
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")

76
frontend/src/app/main/ui/workspace/shapes/text.cljs
View file

@ -34,46 +34,33 @@
;; --- Events ;; --- Events
(defn use-double-click [{:keys [id]} selected?] (defn use-double-click [{:keys [id]}]
(mf/use-callback (mf/use-callback
(mf/deps id selected?) (mf/deps id)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(when selected? (st/emit! (dw/start-edition-mode id)))))
(st/emit! (dw/start-edition-mode id))))))
;; --- Text Wrapper for workspace ;; --- Text Wrapper for workspace
(mf/defc text-wrapper (mf/defc text-static-content
[{:keys [shape]}]
[:& text/text-shape {:shape shape
:grow-type (:grow-type shape)}])
(mf/defc text-resize-content
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [{:keys [id name x y width height grow-type] :as shape} (unchecked-get props "shape") (let [shape (obj/get props "shape")
ghost? (mf/use-ctx muc/ghost-ctx) {:keys [id name x y grow-type]} shape
selected-iref (mf/use-memo (mf/deps (:id shape))
#(refs/make-selected-ref (:id shape)))
selected? (mf/deref selected-iref)
edition (mf/deref refs/selected-edition)
current-transform (mf/deref refs/current-transform)
render-editor (mf/use-state false)
edition? (= edition id)
embed-resources? (mf/use-ctx muc/embed-ctx)
handle-mouse-down (we/use-mouse-down shape)
handle-context-menu (we/use-context-menu shape)
handle-pointer-enter (we/use-pointer-enter shape)
handle-pointer-leave (we/use-pointer-leave shape)
handle-double-click (use-double-click shape selected?)
paragraph-ref (mf/use-state nil) paragraph-ref (mf/use-state nil)
handle-resize-text handle-resize-text
(mf/use-callback (mf/use-callback
(mf/deps id) (mf/deps id)
(fn [entries] (fn [entries]
(when (and (not ghost?) (seq entries)) (when (seq entries)
;; RequestAnimationFrame so the "loop limit error" error is not thrown ;; RequestAnimationFrame so the "loop limit error" error is not thrown
;; https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded ;; https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
(timers/raf (timers/raf
@ -97,24 +84,41 @@
(mf/use-effect (mf/use-effect
(mf/deps @paragraph-ref handle-resize-text grow-type) (mf/deps @paragraph-ref handle-resize-text grow-type)
(fn [] (fn []
(when (not ghost?) (when-let [paragraph-node @paragraph-ref]
(when-let [paragraph-node @paragraph-ref] (let [observer (js/ResizeObserver. handle-resize-text)]
(let [observer (js/ResizeObserver. handle-resize-text)] (log/debug :msg "Attach resize observer" :shape-id id :shape-name name)
(log/debug :msg "Attach resize observer" :shape-id id :shape-name name) (.observe observer paragraph-node)
(.observe observer paragraph-node) #(.disconnect observer)))))
#(.disconnect observer))))))
[:& text/text-shape {:ref text-ref-cb
:shape shape
:grow-type (:grow-type shape)}]))
(mf/defc text-wrapper
{::mf/wrap-props false}
[props]
(let [{:keys [id x y width height] :as shape} (unchecked-get props "shape")
ghost? (mf/use-ctx muc/ghost-ctx)
edition (mf/deref refs/selected-edition)
edition? (= edition id)
handle-mouse-down (we/use-mouse-down shape)
handle-context-menu (we/use-context-menu shape)
handle-pointer-enter (we/use-pointer-enter shape)
handle-pointer-leave (we/use-pointer-leave shape)
handle-double-click (use-double-click shape)]
[:> shape-container {:shape shape} [:> shape-container {:shape shape}
;; We keep hidden the shape when we're editing so it keeps track of the size ;; We keep hidden the shape when we're editing so it keeps track of the size
;; and updates the selrect acordingly ;; and updates the selrect acordingly
[:g.text-shape {:opacity (when edition? 0) [:g.text-shape {:opacity (when edition? 0)
:pointer-events "none"} :pointer-events "none"}
[:& text/text-shape {:key (str "text-shape" (:id shape))
:ref text-ref-cb (if ghost?
:shape shape [:& text-static-content {:shape shape}]
:selected? selected? [:& text-resize-content {:shape shape}])]
:grow-type (:grow-type shape)}]]
(when (and (not ghost?) edition?) (when (and (not ghost?) edition?)
[:& editor/text-shape-edit {:key (str "editor" (:id shape)) [:& editor/text-shape-edit {:key (str "editor" (:id shape))
:shape shape}]) :shape shape}])

29
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -237,40 +237,13 @@
:objects objects :objects objects
:key (:id item)}]))])])) :key (:id item)}]))])]))
(defn frame-wrapper-memo-equals?
[oprops nprops]
(let [new-sel (unchecked-get nprops "selected")
old-sel (unchecked-get oprops "selected")
new-itm (unchecked-get nprops "item")
old-itm (unchecked-get oprops "item")
new-idx (unchecked-get nprops "index")
old-idx (unchecked-get oprops "index")
new-obs (unchecked-get nprops "objects")
old-obs (unchecked-get oprops "objects")]
(and (= new-itm old-itm)
(identical? new-idx old-idx)
(let [childs (cp/get-children (:id new-itm) new-obs)
childs' (conj childs (:id new-itm))]
(and (or (= new-sel old-sel)
(not (or (boolean (some new-sel childs'))
(boolean (some old-sel childs')))))
(loop [ids (rest childs)
id (first childs)]
(if (nil? id)
true
(if (= (get new-obs id)
(get old-obs id))
(recur (rest ids)
(first ids))
false))))))))
;; This components is a piece for sharding equality check between top ;; This components is a piece for sharding equality check between top
;; level frames and try to avoid rerender frames that are does not ;; level frames and try to avoid rerender frames that are does not
;; affected by the selected set. ;; affected by the selected set.
(mf/defc frame-wrapper (mf/defc frame-wrapper
{::mf/wrap-props false {::mf/wrap-props false
::mf/wrap [#(mf/memo' % frame-wrapper-memo-equals?) ::mf/wrap [#(mf/memo' % (mf/check-props ["selected" "item" "index" "objects"]))
#(mf/deferred % ts/idle-then-raf)]} #(mf/deferred % ts/idle-then-raf)]}
[props] [props]
[:> layer-item props]) [:> layer-item props])

14
frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs
View file

@ -28,20 +28,8 @@
:fill-color-ref-file :fill-color-ref-file
:fill-color-gradient]) :fill-color-gradient])
(defn- fill-menu-props-equals?
[np op]
(let [new-ids (obj/get np "ids")
old-ids (obj/get op "ids")
new-editor (obj/get np "editor")
old-editor (obj/get op "editor")
new-values (obj/get np "values")
old-values (obj/get op "values")]
(and (= new-ids old-ids)
(= new-editor old-editor)
(every? #(identical? (% new-values) (% old-values)) fill-attrs))))
(mf/defc fill-menu (mf/defc fill-menu
{::mf/wrap [#(mf/memo' % fill-menu-props-equals?)]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "editor" "values"]))]}
[{:keys [ids type values editor] :as props}] [{:keys [ids type values editor] :as props}]
(let [locale (mf/deref i18n/locale) (let [locale (mf/deref i18n/locale)
show? (or (not (nil? (:fill-color values))) show? (or (not (nil? (:fill-color values)))

2
frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs
View file

@ -154,7 +154,7 @@
(reduce extract-attrs [] shapes))) (reduce extract-attrs [] shapes)))
(mf/defc options (mf/defc options
{::mf/wrap [mf/memo] {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "shapes-with-children"]))]
::mf/wrap-props false} ::mf/wrap-props false}
[props] [props]
(let [shapes (unchecked-get props "shapes") (let [shapes (unchecked-get props "shapes")

11
frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs
View file

@ -33,15 +33,6 @@
:stroke-opacity :stroke-opacity
:stroke-color-gradient]) :stroke-color-gradient])
(defn- stroke-menu-props-equals?
[np op]
(let [new-ids (obj/get np "ids")
old-ids (obj/get op "ids")
new-values (obj/get np "values")
old-values (obj/get op "values")]
(and (= new-ids old-ids)
(every? #(identical? (% new-values) (% old-values)) stroke-attrs))))
(defn- width->string [width] (defn- width->string [width]
(if (= width :multiple) (if (= width :multiple)
"" ""
@ -55,7 +46,7 @@
(pr-str value))) (pr-str value)))
(mf/defc stroke-menu (mf/defc stroke-menu
{::mf/wrap [#(mf/memo' % stroke-menu-props-equals?)]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
[{:keys [ids type values] :as props}] [{:keys [ids type values] :as props}]
(let [locale (i18n/use-locale) (let [locale (i18n/use-locale)
label (case type label (case type

41
frontend/src/app/main/ui/workspace/snap_distances.cljs
View file

@ -267,11 +267,9 @@
(mf/defc snap-distances (mf/defc snap-distances
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [layout (unchecked-get props "layout") (let [page-id (unchecked-get props "page-id")
page-id (unchecked-get props "page-id")
zoom (unchecked-get props "zoom") zoom (unchecked-get props "zoom")
selected (unchecked-get props "selected") selected (unchecked-get props "selected")
transform (unchecked-get props "transform")
selected-shapes (mf/deref (refs/objects-by-id selected)) selected-shapes (mf/deref (refs/objects-by-id selected))
frame-id (-> selected-shapes first :frame-id) frame-id (-> selected-shapes first :frame-id)
frame (mf/deref (refs/object-by-id frame-id)) frame (mf/deref (refs/object-by-id frame-id))
@ -280,23 +278,20 @@
update-shape (fn [shape] (-> shape update-shape (fn [shape] (-> shape
(update :modifiers merge (:modifiers local)) (update :modifiers merge (:modifiers local))
gsh/transform-shape))] gsh/transform-shape))]
(when (and (contains? layout :dynamic-alignment) (let [selrect (->> selected-shapes (map update-shape) gsh/selection-rect)
(= transform :move) key (->> selected (map str) (str/join "-"))]
(not (empty? selected))) [:g.distance
(let [selrect (->> selected-shapes (map update-shape) gsh/selection-rect) [:& shape-distance
key (->> selected (map str) (str/join "-"))] {:selrect selrect
[:g.distance :page-id page-id
[:& shape-distance :frame frame
{:selrect selrect :zoom zoom
:page-id page-id :coord :x
:frame frame :selected selected}]
:zoom zoom [:& shape-distance
:coord :x {:selrect selrect
:selected selected}] :page-id page-id
[:& shape-distance :frame frame
{:selrect selrect :zoom zoom
:page-id page-id :coord :y
:frame frame :selected selected}]])))
:zoom zoom
:coord :y
:selected selected}]]))))

76
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -188,7 +188,8 @@
:edition edition}]])) :edition edition}]]))
(mf/defc ghost-frames (mf/defc ghost-frames
{::mf/wrap-props false} {::mf/wrap [mf/memo]
::mf/wrap-props false}
[props] [props]
(let [modifiers (obj/get props "modifiers") (let [modifiers (obj/get props "modifiers")
selected (obj/get props "selected") selected (obj/get props "selected")
@ -249,6 +250,7 @@
(gsh/selection-rect)) (gsh/selection-rect))
alt? (mf/use-state false) alt? (mf/use-state false)
cursor (mf/use-state cur/pointer-inner)
viewport-ref (mf/use-ref nil) viewport-ref (mf/use-ref nil)
zoom-view-ref (mf/use-ref nil) zoom-view-ref (mf/use-ref nil)
last-position (mf/use-var nil) last-position (mf/use-var nil)
@ -260,6 +262,13 @@
drawing-path? (and edition (= :draw (get-in edit-path [edition :edit-mode]))) drawing-path? (and edition (= :draw (get-in edit-path [edition :edit-mode])))
zoom (or zoom 1) zoom (or zoom 1)
show-grids? (contains? layout :display-grid)
show-snap-points? (and (contains? layout :dynamic-alignment)
(or drawing-obj (:transform local)))
show-snap-distance? (and (contains? layout :dynamic-alignment)
(= (:transform local) :move)
(not (empty? selected)))
on-mouse-down on-mouse-down
(mf/use-callback (mf/use-callback
(mf/deps drawing-tool edition) (mf/deps drawing-tool edition)
@ -590,6 +599,28 @@
;; We schedule the event so it fires after `initialize-page` event ;; We schedule the event so it fires after `initialize-page` event
(timers/schedule #(st/emit! (dw/initialize-viewport size)))))) (timers/schedule #(st/emit! (dw/initialize-viewport size))))))
;; This change is in an effect to minimize the sideffects of the cursor chaning
;; Changing a cursor will produce a "reflow" so we defer it until the component is rendered
(mf/use-layout-effect
(mf/deps @cursor @alt? panning drawing-tool drawing-path?)
(fn []
(let [new-cursor
(cond
panning cur/hand
(= drawing-tool :comments) cur/comments
(= drawing-tool :frame) cur/create-artboard
(= drawing-tool :rect) cur/create-rectangle
(= drawing-tool :circle) cur/create-ellipse
(or (= drawing-tool :path) drawing-path?) cur/pen
(= drawing-tool :curve) cur/pencil
drawing-tool cur/create-shape
@alt? cur/duplicate
:else cur/pointer-inner)]
(when (not= @cursor new-cursor)
(timers/raf
#(reset! cursor new-cursor))))))
(mf/use-layout-effect (mf/deps layout) on-resize) (mf/use-layout-effect (mf/deps layout) on-resize)
(hooks/use-stream ms/keyboard-alt #(reset! alt? %)) (hooks/use-stream ms/keyboard-alt #(reset! alt? %))
@ -619,16 +650,7 @@
:view-box (format-viewbox vbox) :view-box (format-viewbox vbox)
:ref viewport-ref :ref viewport-ref
:class (when drawing-tool "drawing") :class (when drawing-tool "drawing")
:style {:cursor (cond :style {:cursor @cursor
panning cur/hand
(= drawing-tool :comments) cur/comments
(= drawing-tool :frame) cur/create-artboard
(= drawing-tool :rect) cur/create-rectangle
(= drawing-tool :circle) cur/create-ellipse
(or (= drawing-tool :path) drawing-path?) cur/pen
(= drawing-tool :curve) cur/pencil
drawing-tool cur/create-shape
:else cur/pointer-inner)
:background-color (get options :background "#E8E9EA")} :background-color (get options :background "#E8E9EA")}
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-click on-click :on-click on-click
@ -671,22 +693,24 @@
:tool drawing-tool :tool drawing-tool
:modifiers (:modifiers local)}]) :modifiers (:modifiers local)}])
(when (contains? layout :display-grid) (when show-grids?
[:& frame-grid {:zoom zoom}]) [:& frame-grid {:zoom zoom}])
[:& snap-points {:layout layout (when show-snap-points?
:transform (:transform local) [:& snap-points {:layout layout
:drawing drawing-obj :transform (:transform local)
:zoom zoom :drawing drawing-obj
:page-id page-id :zoom zoom
:selected selected :page-id page-id
:local local}] :selected selected
:local local}])
[:& snap-distances {:layout layout (when show-snap-distance?
:zoom zoom [:& snap-distances {:layout layout
:transform (:transform local) :zoom zoom
:selected selected :transform (:transform local)
:page-id page-id}] :selected selected
:page-id page-id}])
(when tooltip (when tooltip
[:& cursor-tooltip {:zoom zoom :tooltip tooltip}])] [:& cursor-tooltip {:zoom zoom :tooltip tooltip}])]
@ -697,7 +721,9 @@
[:& interactions {:selected selected}])]])) [:& interactions {:selected selected}])]]))
(mf/defc viewport-actions [] (mf/defc viewport-actions
{::mf/wrap [mf/memo]}
[]
(let [edition (mf/deref refs/selected-edition) (let [edition (mf/deref refs/selected-edition)
selected (mf/deref refs/selected-objects) selected (mf/deref refs/selected-objects)
shape (-> selected first)] shape (-> selected first)]

31
frontend/src/app/util/text.cljs
View file

@ -93,12 +93,31 @@
(rec-fn {} node))) (rec-fn {} node)))
(defn content->nodes [node]
(loop [result (transient [])
curr node
pending (transient [])]
(let [result (conj! result curr)]
;; Adds children to the pending list
(let [children (:children curr)
pending (loop [child (first children)
children (rest children)
pending pending]
(if child
(recur (first children)
(rest children)
(conj! pending child))
pending))]
(if (= 0 (count pending))
(persistent! result)
;; Iterates with the next value in pending
(let [next (get pending (dec (count pending)))]
(recur result next (pop! pending))))))))
(defn get-text-attrs-multi (defn get-text-attrs-multi
[node attrs] [node attrs]
(let [rec-fn (let [nodes (content->nodes node)]
(fn rec-fn [current node] (get-attrs-multi nodes attrs)))
(let [current (reduce rec-fn current (:children node []))]
(get-attrs-multi [current node] attrs)))]
(merge (select-keys default-text-attrs attrs)
(rec-fn {} node))))