mirror of
https://github.com/penpot/penpot.git
synced 2025-06-03 15:01:39 +02:00
🔧 Adapt shapes to use new rumext macros.
This commit is contained in:
Andrey Antukh
parent
204f180ec9
commit
fada526f5d
13 changed files with 225 additions and 344 deletions
|
|
@ -2,41 +2,39 @@
|
|||
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.shapes.circle
|
||||
(:require [lentes.core :as l]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
;; --- Circle Component
|
||||
|
||||
(declare circle-shape)
|
||||
|
||||
(mx/defc circle-component
|
||||
{:mixins [mx/reactive mx/static]}
|
||||
(mf/defc circle-component
|
||||
[{:keys [id] :as shape}]
|
||||
(let [modifiers (mx/react (refs/selected-modifiers id))
|
||||
selected (mx/react refs/selected-shapes)
|
||||
(let [modifiers (mf/deref (refs/selected-modifiers id))
|
||||
selected (mf/deref refs/selected-shapes)
|
||||
selected? (contains? selected id)
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)
|
||||
shape (assoc shape :modifiers modifiers)]
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)]
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down}
|
||||
(circle-shape shape)]))
|
||||
[:& circle-shape {:shape shape :modifiers modifiers}]]))
|
||||
|
||||
;; --- Circle Shape
|
||||
|
||||
(mx/defc circle-shape
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id modifiers rotation cx cy] :as shape}]
|
||||
(let [{:keys [resize displacement]} modifiers
|
||||
(mf/defc circle-shape
|
||||
[{:keys [shape modifiers] :as props}]
|
||||
(let [{:keys [id rotation cx cy]} shape
|
||||
{:keys [resize displacement]} modifiers
|
||||
|
||||
shape (cond-> shape
|
||||
displacement (geom/transform displacement)
|
||||
|
|
|
|||
|
|
@ -5,31 +5,32 @@
|
|||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.shapes.icon
|
||||
(:require [uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[rumext.core :as mx]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
|
||||
;; --- Icon Component
|
||||
|
||||
(declare icon-shape)
|
||||
|
||||
(mx/defc icon-component
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[{:keys [id] :as shape}]
|
||||
(let [modifiers (mx/react (refs/selected-modifiers id))
|
||||
selected (mx/react refs/selected-shapes)
|
||||
(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)
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)
|
||||
shape (assoc shape :modifiers modifiers)]
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)]
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down}
|
||||
(icon-shape shape)]))
|
||||
[:& icon-shape {:shape shape :modifiers modifiers}]]))
|
||||
|
||||
;; --- Icon Shape
|
||||
|
||||
|
|
@ -41,10 +42,10 @@
|
|||
center (gpt/point x-center y-center)]
|
||||
(gmt/rotate* mt rotation center)))
|
||||
|
||||
(mx/defc icon-shape
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id content metadata rotation x1 y1 modifiers] :as shape}]
|
||||
(let [{:keys [resize displacement]} modifiers
|
||||
(mf/defc icon-shape
|
||||
[{:keys [shape modifiers] :as props}]
|
||||
(let [{:keys [id content metadata rotation x1 y1]} shape
|
||||
{:keys [resize displacement]} modifiers
|
||||
|
||||
xfmt (cond-> (gmt/matrix)
|
||||
displacement (gmt/multiply displacement)
|
||||
|
|
@ -74,10 +75,10 @@
|
|||
|
||||
;; --- Icon SVG
|
||||
|
||||
(mx/defc icon-svg
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [content id metadata] :as shape}]
|
||||
(let [view-box (apply str (interpose " " (:view-box metadata)))
|
||||
(mf/defc icon-svg
|
||||
[{:keys [shape] :as props}]
|
||||
(let [{:keys [content id metadata]} shape
|
||||
view-box (apply str (interpose " " (:view-box metadata)))
|
||||
props {:view-box view-box
|
||||
:id (str "shape-" id)
|
||||
:dangerouslySetInnerHTML #js {:__html content}}]
|
||||
|
|
|
|||
|
|
@ -2,21 +2,20 @@
|
|||
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.shapes.image
|
||||
(:require [beicon.core :as rx]
|
||||
[lentes.core :as l]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.data.images :as udi]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.data.images :as udi]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
|
|
@ -29,34 +28,29 @@
|
|||
|
||||
(declare image-shape)
|
||||
|
||||
(mx/defcs image-component
|
||||
{:mixins [mx/static mx/reactive]
|
||||
:init (fn [own]
|
||||
;; TODO: maybe do it conditionally
|
||||
;; (only fetch when it's not fetched)
|
||||
(when-let [id (-> own ::mx/props first :image)]
|
||||
(st/emit! (udi/fetch-image id)))
|
||||
own)}
|
||||
[own {:keys [id image] :as shape}]
|
||||
(let [modifiers (mx/react (refs/selected-modifiers id))
|
||||
selected (mx/react refs/selected-shapes)
|
||||
image (mx/react (image-ref image))
|
||||
selected? (contains? selected id)
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)
|
||||
shape (assoc shape
|
||||
:modifiers modifiers
|
||||
:image image)]
|
||||
(mf/defc image-component
|
||||
[{:keys [shape] :as props}]
|
||||
(let [modifiers (mf/deref (refs/selected-modifiers (:id shape)))
|
||||
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)]
|
||||
|
||||
(mf/use-effect
|
||||
{:init #(st/emit! (udi/fetch-image (:image shape)))})
|
||||
|
||||
(when image
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down}
|
||||
(image-shape shape)])))
|
||||
[:& image-shape {:shape shape
|
||||
:image image
|
||||
:modifiers modifiers}]])))
|
||||
|
||||
;; --- Image Shape
|
||||
|
||||
(mx/defc image-shape
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id x1 y1 image modifiers] :as shape}]
|
||||
(let [{:keys [width height]} (geom/size 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
|
||||
|
||||
xfmt (cond-> (gmt/matrix)
|
||||
|
|
|
|||
|
|
@ -2,34 +2,31 @@
|
|||
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.shapes.path
|
||||
(:require [potok.core :as ptk]
|
||||
[cuerdas.core :as str :include-macros true]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[cuerdas.core :as str :include-macros true]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
;; --- Path Component
|
||||
|
||||
(declare path-shape)
|
||||
|
||||
(mx/defc path-component
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
(mf/defc path-component
|
||||
[{:keys [id] :as shape}]
|
||||
(let [modifiers (mx/react (refs/selected-modifiers id))
|
||||
selected (mx/react refs/selected-shapes)
|
||||
selected? (contains? selected id)
|
||||
shape (assoc shape
|
||||
:modifiers modifiers
|
||||
:background? true)]
|
||||
(let [modifiers (mf/deref (refs/selected-modifiers id))
|
||||
selected (mf/deref refs/selected-shapes)
|
||||
selected? (contains? selected id)]
|
||||
(letfn [(on-mouse-down [event]
|
||||
(common/on-mouse-down event shape selected))
|
||||
(on-double-click [event]
|
||||
|
|
@ -38,7 +35,9 @@
|
|||
[:g.shape {:class (when selected? "selected")
|
||||
:on-double-click on-double-click
|
||||
:on-mouse-down on-mouse-down}
|
||||
(path-shape shape)])))
|
||||
[:& path-shape {:shape shape
|
||||
:modifiers modifiers
|
||||
:background? true}]])))
|
||||
|
||||
;; --- Path Shape
|
||||
|
||||
|
|
@ -63,9 +62,8 @@
|
|||
buffer (conj buffer (str/istr "L~{x},~{y}"))]
|
||||
(recur buffer (inc index)))))))
|
||||
|
||||
(mx/defc path-shape
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id modifiers background?] :as shape}]
|
||||
(mf/defc path-shape
|
||||
[{:keys [shape modifiers background?] :as props}]
|
||||
(let [{:keys [resize displacement]} modifiers
|
||||
shape (cond-> shape
|
||||
displacement (geom/transform displacement)
|
||||
|
|
@ -73,13 +71,13 @@
|
|||
moving? (boolean displacement)
|
||||
|
||||
pdata (render-path shape)
|
||||
props {:id (str id)
|
||||
props {:id (str (:id shape))
|
||||
:class (classnames :move-cursor moving?)
|
||||
:d pdata}
|
||||
|
||||
attrs (merge (attrs/extract-style-attrs shape) props)]
|
||||
(if background?
|
||||
[:g {}
|
||||
[:g
|
||||
[:path {:stroke "transparent"
|
||||
:fill "transparent"
|
||||
:stroke-width "20px"
|
||||
|
|
|
|||
|
|
@ -5,31 +5,33 @@
|
|||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.shapes.rect
|
||||
(:require [uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.main.ui.shapes.common :as common]
|
||||
[uxbox.util.data :refer [classnames normalize-props]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
;; --- Rect Component
|
||||
|
||||
(declare rect-shape)
|
||||
|
||||
(mx/defc rect-component
|
||||
{:mixins [mx/reactive mx/static]}
|
||||
[{:keys [id] :as shape}]
|
||||
(let [modifiers (mx/react (refs/selected-modifiers id))
|
||||
selected (mx/react refs/selected-shapes)
|
||||
(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)
|
||||
on-mouse-down #(common/on-mouse-down % shape selected)
|
||||
shape (assoc shape :modifiers modifiers)]
|
||||
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 identity)]))
|
||||
[:& rect-shape {:shape shape
|
||||
:modifiers modifiers}]]))
|
||||
|
||||
;; --- Rect Shape
|
||||
|
||||
|
|
@ -40,10 +42,11 @@
|
|||
center (gpt/point x-center y-center)]
|
||||
(gmt/rotate* mt rotation center)))
|
||||
|
||||
(mx/defc rect-shape
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id rotation modifiers] :as shape}]
|
||||
(let [{:keys [displacement resize]} modifiers
|
||||
(mf/defc rect-shape
|
||||
[{:keys [shape modifiers] :as props}]
|
||||
(let [{:keys [id rotation]} shape
|
||||
{:keys [displacement resize]} modifiers
|
||||
|
||||
xfmt (cond-> (gmt/matrix)
|
||||
displacement (gmt/multiply displacement)
|
||||
resize (gmt/multiply resize))
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.shapes.text
|
||||
(:require
|
||||
|
|
@ -28,8 +28,7 @@
|
|||
[event {:keys [id group] :as shape} selected]
|
||||
(if (and (not (:blocked shape))
|
||||
(or @refs/selected-drawing-tool
|
||||
@refs/selected-edition
|
||||
(and group (:locked (geom/resolve-parent shape)))))
|
||||
@refs/selected-edition))
|
||||
(dom/stop-propagation event)
|
||||
(common/on-mouse-down event shape selected)))
|
||||
|
||||
|
|
@ -40,12 +39,13 @@
|
|||
(declare text-shape-edit)
|
||||
|
||||
(mf/def text-component
|
||||
:mixins [mf/memo mx/reactive]
|
||||
:mixins [mf/memo mf/reactive]
|
||||
:render
|
||||
(fn [own {:keys [id x1 y1 content group] :as shape}]
|
||||
(let [modifiers (mx/react (refs/selected-modifiers id))
|
||||
selected (mx/react refs/selected-shapes)
|
||||
edition? (= (mx/react refs/selected-edition) id)
|
||||
(fn [own {:keys [shape] :as props}]
|
||||
(let [{:keys [id x1 y1 content group]} shape
|
||||
modifiers (mf/react (refs/selected-modifiers id))
|
||||
selected (mf/react refs/selected-shapes)
|
||||
edition? (= (mf/react refs/selected-edition) id)
|
||||
selected? (and (contains? selected id)
|
||||
(= (count selected) 1))
|
||||
shape (assoc shape :modifiers modifiers)]
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
:on-double-click on-double-click
|
||||
:on-mouse-down on-mouse-down}
|
||||
(if edition?
|
||||
(text-shape-edit shape)
|
||||
(text-shape-wrapper shape))]))))
|
||||
[:& text-shape-edit {:shape shape}]
|
||||
[:& text-shape-wrapper {:shape shape}])]))))
|
||||
|
||||
;; --- Text Styles Helpers
|
||||
|
||||
|
|
@ -113,15 +113,15 @@
|
|||
|
||||
:did-mount
|
||||
(fn [own]
|
||||
(let [shape (::mf/props own)
|
||||
dom (mx/ref-node (::container own))]
|
||||
(let [shape (get-in own [::mf/props :shape])
|
||||
dom (mf/ref-node (::container own))]
|
||||
(set! (.-textContent dom) (:content shape ""))
|
||||
(.focus dom)
|
||||
own))
|
||||
|
||||
:render
|
||||
(fn [own {:keys [id x1 y1 content] :as shape}]
|
||||
(let [{:keys [width height]} (geom/size shape)
|
||||
(fn [own {:keys [shape] :as props}]
|
||||
(let [{:keys [id x1 y1 content width height]} (geom/size shape)
|
||||
style (make-style shape)
|
||||
on-input (fn [ev]
|
||||
(let [content (dom/event->inner-text ev)]
|
||||
|
|
@ -136,7 +136,6 @@
|
|||
|
||||
(mf/def text-shape-wrapper
|
||||
:mixins [mf/memo]
|
||||
:key-fn pr-str
|
||||
|
||||
:init
|
||||
(fn [own props]
|
||||
|
|
@ -152,15 +151,16 @@
|
|||
|
||||
:did-mount
|
||||
(fn [own]
|
||||
(let [shape (::mf/props own)
|
||||
(let [shape (get-in own [::mf/props :shape])
|
||||
dom (mf/ref-node (::fobject own))
|
||||
html (dom/render-to-html (text-shape-html shape))]
|
||||
(set! (.-innerHTML dom) html))
|
||||
own)
|
||||
|
||||
:render
|
||||
(fn [own {:keys [id modifiers] :as shape}]
|
||||
(let [{:keys [displacement resize]} modifiers
|
||||
(fn [own {:keys [shape] :as props}]
|
||||
(let [{:keys [id modifiers]} shape
|
||||
{:keys [displacement resize]} modifiers
|
||||
xfmt (cond-> (gmt/matrix)
|
||||
displacement (gmt/multiply displacement)
|
||||
resize (gmt/multiply resize))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue