mirror of
https://github.com/penpot/penpot.git
synced 2025-07-23 17:07:27 +02:00
Merge pull request #3628 from penpot/niwinz-develop-bugfixes-4
⚡ Don't render not visible shapes on workspace
This commit is contained in:
commit
aa62b9d248
9 changed files with 119 additions and 107 deletions
|
@ -409,16 +409,25 @@
|
|||
(defn bounding-rect->rect
|
||||
[rect]
|
||||
(when (some? rect)
|
||||
{:x (or (.-left rect) (:left rect) 0)
|
||||
:y (or (.-top rect) (:top rect) 0)
|
||||
:width (or (.-width rect) (:width rect) 1)
|
||||
:height (or (.-height rect) (:height rect) 1)}))
|
||||
(grc/make-rect
|
||||
(or (.-left rect) (:left rect) 0)
|
||||
(or (.-top rect) (:top rect) 0)
|
||||
(or (.-width rect) (:width rect) 1)
|
||||
(or (.-height rect) (:height rect) 1))))
|
||||
|
||||
(defn get-window-size
|
||||
[]
|
||||
{:width (.-innerWidth ^js js/window)
|
||||
:height (.-innerHeight ^js js/window)})
|
||||
|
||||
(defn get-computed-styles
|
||||
[node]
|
||||
(js/getComputedStyle node))
|
||||
|
||||
(defn get-property-value
|
||||
[o prop]
|
||||
(.getPropertyValue ^js o prop))
|
||||
|
||||
(defn focus!
|
||||
[^js node]
|
||||
(when (some? node)
|
||||
|
|
|
@ -12,22 +12,21 @@
|
|||
[app.main.fonts :as fonts]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.text-position-data :as tpd]
|
||||
[cuerdas.core :as str]
|
||||
[promesa.core :as p]))
|
||||
|
||||
(defn parse-text-nodes
|
||||
"Given a text node retrieves the rectangles for everyone of its paragraphs and its text."
|
||||
[parent-node direction text-node text-align]
|
||||
|
||||
(letfn [(parse-entry [^js entry]
|
||||
(when (some? (.-position entry))
|
||||
{:node (.-node entry)
|
||||
:position (dom/bounding-rect->rect (.-position entry))
|
||||
:text (.-text entry)
|
||||
:direction direction}))]
|
||||
(into
|
||||
[]
|
||||
(keep parse-entry)
|
||||
(tpd/parse-text-nodes parent-node text-node text-align))))
|
||||
(into []
|
||||
(keep parse-entry)
|
||||
(tpd/parse-text-nodes parent-node text-node text-align))))
|
||||
|
||||
(def load-promises (atom {}))
|
||||
|
||||
|
@ -40,76 +39,76 @@
|
|||
load-promise)))
|
||||
|
||||
(defn resolve-font
|
||||
[^js node]
|
||||
[node]
|
||||
(let [styles (dom/get-computed-styles node)
|
||||
font (dom/get-property-value styles "font")
|
||||
font (if (or (not font) (empty? font))
|
||||
;; Firefox 95 won't return the font correctly.
|
||||
;; We can get the font shorthand with the font-size + font-family
|
||||
(str/ffmt "% %"
|
||||
(dom/get-property-value styles "font-size")
|
||||
(dom/get-property-value styles "font-family"))
|
||||
font)
|
||||
|
||||
(let [styles (js/getComputedStyle node)
|
||||
font (.getPropertyValue styles "font")
|
||||
font (if (or (not font) (empty? font))
|
||||
;; Firefox 95 won't return the font correctly.
|
||||
;; We can get the font shorthand with the font-size + font-family
|
||||
(dm/str (.getPropertyValue styles "font-size")
|
||||
" "
|
||||
(.getPropertyValue styles "font-family"))
|
||||
font)
|
||||
font-id (dom/get-property-value styles "--font-id")]
|
||||
|
||||
font-id (.getPropertyValue styles "--font-id")]
|
||||
(->> (fonts/ensure-loaded! font-id)
|
||||
(p/fmap (fn []
|
||||
(when-not ^boolean (dom/check-font? font)
|
||||
(load-font font))))
|
||||
(p/merr (fn [_cause]
|
||||
(js/console.error (str/ffmt "Cannot load font %" font-id))
|
||||
(p/resolved nil))))))
|
||||
|
||||
(-> (fonts/ensure-loaded! font-id)
|
||||
(p/then #(when (not (dom/check-font? font))
|
||||
(load-font font)))
|
||||
(p/catch #(.error js/console (dm/str "Cannot load font " font-id) %)))))
|
||||
|
||||
(defn- process-text-node
|
||||
[parent-node]
|
||||
(let [root (dom/get-parent-with-selector parent-node ".text-node-html")
|
||||
paragraph (dom/get-parent-with-selector parent-node ".paragraph")
|
||||
shape-x (d/parse-double (dom/get-attribute root "data-x"))
|
||||
shape-y (d/parse-double (dom/get-attribute root "data-y"))
|
||||
direction (.-direction ^js (dom/get-computed-styles parent-node))
|
||||
text-align (.-textAlign ^js (dom/get-computed-styles paragraph))]
|
||||
|
||||
(sequence
|
||||
(comp
|
||||
(mapcat #(parse-text-nodes parent-node direction % text-align))
|
||||
(map #(-> %
|
||||
(update-in [:position :x] + shape-x)
|
||||
(update-in [:position :y] + shape-y))))
|
||||
(seq (.-childNodes parent-node)))))
|
||||
|
||||
(defn- calc-text-node-positions
|
||||
[shape-id]
|
||||
|
||||
(when (some? shape-id)
|
||||
(let [text-nodes (-> (dom/query (dm/fmt "#html-text-node-%" shape-id))
|
||||
(dom/query-all ".text-node"))
|
||||
load-fonts (->> text-nodes (map resolve-font))
|
||||
|
||||
process-text-node
|
||||
(fn [parent-node]
|
||||
(let [root (dom/get-parent-with-selector parent-node ".text-node-html")
|
||||
paragraph (dom/get-parent-with-selector parent-node ".paragraph")
|
||||
shape-x (-> (dom/get-attribute root "data-x") d/parse-double)
|
||||
shape-y (-> (dom/get-attribute root "data-y") d/parse-double)
|
||||
direction (.-direction (js/getComputedStyle parent-node))
|
||||
text-align (.-textAlign (js/getComputedStyle paragraph))]
|
||||
|
||||
(->> (.-childNodes parent-node)
|
||||
(mapcat #(parse-text-nodes parent-node direction % text-align))
|
||||
(mapv #(-> %
|
||||
(update-in [:position :x] + shape-x)
|
||||
(update-in [:position :y] + shape-y))))))]
|
||||
(-> (p/all load-fonts)
|
||||
(p/then
|
||||
(fn []
|
||||
(->> text-nodes (mapcat process-text-node))))))))
|
||||
(let [text-nodes (-> (dom/query (dm/fmt "#html-text-node-%" shape-id))
|
||||
(dom/query-all ".text-node"))]
|
||||
(->> (p/all (map resolve-font text-nodes))
|
||||
(p/fmap #(mapcat process-text-node text-nodes)))))
|
||||
|
||||
(defn calc-position-data
|
||||
[shape-id]
|
||||
(when (some? shape-id)
|
||||
(p/let [text-data (calc-text-node-positions shape-id)]
|
||||
(->> text-data
|
||||
(mapv (fn [{:keys [node position text direction]}]
|
||||
(let [{:keys [x y width height]} position
|
||||
styles (js/getComputedStyle ^js node)
|
||||
get (fn [prop]
|
||||
(let [value (.getPropertyValue styles prop)]
|
||||
(when (and value (not= value ""))
|
||||
value)))]
|
||||
(d/without-nils
|
||||
{:x x
|
||||
:y (+ y height)
|
||||
:width width
|
||||
:height height
|
||||
:direction direction
|
||||
:font-family (str (get "font-family"))
|
||||
:font-size (str (get "font-size"))
|
||||
:font-weight (str (get "font-weight"))
|
||||
:text-transform (str (get "text-transform"))
|
||||
:text-decoration (str (get "text-decoration"))
|
||||
:letter-spacing (str (get "letter-spacing"))
|
||||
:font-style (str (get "font-style"))
|
||||
:fills (transit/decode-str (get "--fills"))
|
||||
:text text}))))))))
|
||||
(letfn [(get-prop [styles prop]
|
||||
(let [value (.getPropertyValue styles prop)]
|
||||
(when (and (some? value) (not= value ""))
|
||||
value)))
|
||||
|
||||
(transform-data [{:keys [node position text direction]}]
|
||||
(let [styles (dom/get-computed-styles node)
|
||||
position (assoc position :y (+ (dm/get-prop position :y)
|
||||
(dm/get-prop position :height)))]
|
||||
(into position (filter val)
|
||||
{:direction direction
|
||||
:font-family (dm/str (get-prop styles "font-family"))
|
||||
:font-size (dm/str (get-prop styles "font-size"))
|
||||
:font-weight (dm/str (get-prop styles "font-weight"))
|
||||
:text-transform (dm/str (get-prop styles "text-transform"))
|
||||
:text-decoration (dm/str (get-prop styles "text-decoration"))
|
||||
:letter-spacing (dm/str (get-prop styles "letter-spacing"))
|
||||
:font-style (dm/str (get-prop styles "font-style"))
|
||||
:fills (transit/decode-str (get-prop styles "--fills"))
|
||||
:text text})))]
|
||||
|
||||
(when (some? shape-id)
|
||||
(->> (calc-text-node-positions shape-id)
|
||||
(p/fmap (fn [text-data]
|
||||
(mapv transform-data text-data)))))))
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue