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

✨ Add more incremental improvements to shapes rendering.

Browse source 
That helps for make a good foundation for proper canvas painting and
manipulation.
This commit is contained in:
Andrey Antukh 2019-08-22 20:02:14 +02:00
parent 1fa9faa314
commit 6483800e49
14 changed files with 144 additions and 339 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/uxbox/main/ui/shapes/circle.cljs
View file

@ -21,37 +21,37 @@
(mf/defc circle-component
[{:keys [shape] :as props}]
(let [modifiers (mf/deref (refs/selected-modifiers (:id shape)))
selected (mf/deref refs/selected-shapes)
(let [selected (mf/deref refs/selected-shapes)
selected? (contains? selected (:id shape))
on-mouse-down #(common/on-mouse-down % shape selected)]
[:g.shape {:class (when selected? "selected")
:on-mouse-down on-mouse-down}
[:& circle-shape {:shape shape :modifiers modifiers}]]))
[:& circle-shape {:shape shape}]]))
;; --- Circle Shape
(mf/defc circle-shape
[{:keys [shape modifiers] :as props}]
(let [{:keys [id rotation cx cy]} shape
{:keys [resize displacement]} modifiers
[{:keys [shape] :as props}]
(let [{:keys [id rotation cx cy modifier-mtx]} shape
shape (cond-> shape
displacement (geom/transform displacement)
resize (geom/transform resize))
shape (cond
(gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx)
:else shape)
center (gpt/point (:cx shape)
(:cy shape))
rotation (or rotation 0)
moving? (boolean displacement)
moving? (boolean modifier-mtx)
xfmt (-> (gmt/matrix)
(gmt/rotate* rotation center))
transform (when (pos? rotation)
(str (-> (gmt/matrix)
(gmt/rotate* rotation center))))
props {:id (str "shape-" id)
:class (classnames :move-cursor moving?)
:transform (str xfmt)}
:transform transform}
attrs (merge props
(attrs/extract-style-attrs shape)

24
frontend/src/uxbox/main/ui/shapes/common.cljs
View file

@ -12,7 +12,8 @@
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.workspace.streams :as ws]
[uxbox.main.ui.workspace.streams :as uws]
[uxbox.util.geom.matrix :as gmt]
[uxbox.util.dom :as dom]))
;; --- Shape Movement (by mouse)
@ -24,17 +25,15 @@
ptk/WatchEvent
(watch [_ state stream]
(let [pid (get-in state [:workspace :current])
wst (get-in state [:workspace pid])
stoper (->> stream
(rx/filter ws/mouse-up?)
(rx/take 1))
stream (->> ws/mouse-position-deltas
(rx/take-until stoper))]
(rx/concat
(when (refs/alignment-activated? (:flags wst))
(rx/of (dw/initial-shape-align id)))
(rx/map #(dw/apply-temporal-displacement id %) stream)
(rx/of (dw/apply-displacement id)))))))
flags (get-in state [:workspace pid :flags])
stoper (rx/filter uws/mouse-up? stream)]
(rx/concat
(when (refs/alignment-activated? flags)
(rx/of (dw/initial-shape-align id)))
(->> uws/mouse-position-deltas
(rx/map #(dw/apply-temporal-displacement id %))
(rx/take-until stoper))
(rx/of (dw/materialize-current-modifier id)))))))
(defn start-move-selected
[]
@ -45,7 +44,6 @@
selected (get-in state [:workspace pid :selected])]
(rx/from-coll (map start-move selected))))))
(defn on-mouse-down
[event {:keys [id] :as shape} selected]
(let [selected? (contains? selected id)

32
frontend/src/uxbox/main/ui/shapes/icon.cljs
View file

@ -23,14 +23,12 @@
(mf/defc icon-component
[{:keys [shape] :as props}]
(let [id (:id shape)
modifiers (mf/deref (refs/selected-modifiers id))
selected (mf/deref refs/selected-shapes)
selected? (contains? selected id)
(let [selected (mf/deref refs/selected-shapes)
selected? (contains? selected (:id shape))
on-mouse-down #(common/on-mouse-down % shape selected)]
[:g.shape {:class (when selected? "selected")
:on-mouse-down on-mouse-down}
[:& icon-shape {:shape shape :modifiers modifiers}]]))
[:& icon-shape {:shape shape}]]))
;; --- Icon Shape
@ -43,22 +41,20 @@
(gmt/rotate* mt rotation center)))
(mf/defc icon-shape
[{:keys [shape modifiers] :as props}]
(let [{:keys [id content metadata rotation x1 y1]} shape
{:keys [resize displacement]} modifiers
[{:keys [shape] :as props}]
(let [{:keys [id content metadata rotation modifier-mtx]} shape
xfmt (cond-> (gmt/matrix)
displacement (gmt/multiply displacement)
resize (gmt/multiply resize))
shape (cond
(gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx)
:else shape)
{:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
(geom/size))
{:keys [x1 y1 width height] :as shape} (geom/size shape)
transform (when (pos? rotation)
(str (rotate (gmt/matrix) shape)))
view-box (apply str (interpose " " (:view-box metadata)))
xfmt (cond-> (gmt/matrix)
(pos? rotation) (rotate shape))
moving? (boolean displacement)
moving? (boolean modifier-mtx)
props {:id (str id)
:x x1
:y y1
@ -70,7 +66,7 @@
:dangerouslySetInnerHTML #js {:__html content}}
attrs (merge props (attrs/extract-style-attrs shape))]
[:g {:transform (str xfmt)}
[:g {:transform transform}
[:> :svg (normalize-props attrs) ]]))
;; --- Icon SVG

21
frontend/src/uxbox/main/ui/shapes/image.cljs
View file

@ -30,8 +30,7 @@
(mf/defc image-component
[{:keys [shape] :as props}]
(let [modifiers (mf/deref (refs/selected-modifiers (:id shape)))
selected (mf/deref refs/selected-shapes)
(let [selected (mf/deref refs/selected-shapes)
image (mf/deref (image-ref (:image shape)))
selected? (contains? selected (:id shape))
on-mouse-down #(common/on-mouse-down % shape selected)]
@ -42,27 +41,23 @@
[:g.shape {:class (when selected? "selected")
:on-mouse-down on-mouse-down}
[:& image-shape {:shape shape
:image image
:modifiers modifiers}]])))
:image image}]])))
;; --- Image Shape
(mf/defc image-shape
[{:keys [shape image modifiers] :as props}]
(let [{:keys [id x1 y1 width height]} (geom/size shape)
{:keys [resize displacement]} modifiers
[{:keys [shape image] :as props}]
(let [{:keys [id x1 y1 width height modifier-mtx]} (geom/size shape)
moving? (boolean modifier-mtx)
transform (when (gmt/matrix? modifier-mtx)
(str modifier-mtx))
xfmt (cond-> (gmt/matrix)
resize (gmt/multiply resize)
displacement (gmt/multiply displacement))
moving? (boolean displacement)
props {:x x1 :y y1
:id (str "shape-" id)
:preserve-aspect-ratio "none"
:class (classnames :move-cursor moving?)
:xlink-href (:url image)
:transform (str xfmt)
:transform transform
:width width
:height height}
attrs (merge props (attrs/extract-style-attrs shape))]

31
frontend/src/uxbox/main/ui/shapes/rect.cljs
View file

@ -22,16 +22,13 @@
(mf/defc rect-component
[{:keys [shape] :as props}]
(let [id (:id shape)
modifiers (mf/deref (refs/selected-modifiers id))
selected (mf/deref refs/selected-shapes)
selected? (contains? selected id)
(let [selected (mf/deref refs/selected-shapes)
selected? (contains? selected (:id shape))
on-mouse-down #(common/on-mouse-down % shape selected)]
;; shape (assoc shape :modifiers modifiers)]
[:g.shape {:class (when selected? "selected")
:on-mouse-down on-mouse-down}
[:& rect-shape {:shape shape
:modifiers modifiers}]]))
[:& rect-shape {:shape shape}]]))
;; --- Rect Shape
@ -43,27 +40,25 @@
(gmt/rotate* mt rotation center)))
(mf/defc rect-shape
[{:keys [shape modifiers] :as props}]
(let [{:keys [id rotation]} shape
{:keys [displacement resize]} modifiers
[{:keys [shape] :as props}]
(let [{:keys [id rotation modifier-mtx]} shape
xfmt (cond-> (gmt/matrix)
displacement (gmt/multiply displacement)
resize (gmt/multiply resize))
shape (cond
(gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx)
:else shape)
{:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
(geom/size))
{:keys [x1 y1 width height] :as shape} (geom/size shape)
xfmt (cond-> (gmt/matrix)
(pos? rotation) (rotate shape))
transform (when (pos? rotation)
(str (rotate (gmt/matrix) shape)))
moving? (boolean displacement)
moving? (boolean modifier-mtx)
props {:x x1 :y y1
:id (str "shape-" id)
:class-name (classnames :move-cursor moving?)
:width width
:height height
:transform (str xfmt)}
:transform transform}
attrs (merge (attrs/extract-style-attrs shape) props)]
[:> :rect (normalize-props attrs)]))