mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 09:11:21 -05:00
Add group initial impl for groups rendering.
This commit is contained in:
Andrey Antukh
parent
ff56734801
commit
ce5675639f
2 changed files with 105 additions and 76 deletions
|
|
@ -66,7 +66,7 @@
|
|||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Selected shapes group
|
||||
;; Selected shapes.
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:private
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(for [item shapes]
|
||||
(shapes/render item))
|
||||
(shapes/-render item nil))
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height
|
||||
:style {:stroke "black" :fill "transparent"
|
||||
|
|
@ -122,52 +122,73 @@
|
|||
:name "selected-shapes"
|
||||
:mixins [mx/static rum/reactive (mx/local {})]}))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Shape
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn selected-shape-render
|
||||
[own shape selected]
|
||||
(let [{:keys [id x y width height] :as shape} shape]
|
||||
(letfn [(on-mouse-down [event]
|
||||
(when-not (:blocked shape)
|
||||
(let [local (:rum/local own)]
|
||||
(dom/stop-propagation event)
|
||||
(swap! local assoc :init-coords [x y])
|
||||
(reset! wb/shapes-dragging? true))))
|
||||
(on-mouse-up [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! wb/shapes-dragging? false))]
|
||||
(html
|
||||
[:g.shape {:class "selected"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(shapes/-render shape nil)
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height
|
||||
:style {:stroke "black" :fill "transparent"
|
||||
:stroke-opacity "0.5"}}]
|
||||
[:circle.top-left (merge default-selection-props
|
||||
{:cx x :cy y})]
|
||||
[:circle.top-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy y})]
|
||||
[:circle.bottom-left (merge default-selection-props
|
||||
{:cx x :cy (+ y height)})]
|
||||
[:circle.bottom-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy (+ y height)})]]]))))
|
||||
|
||||
(def selected-shape
|
||||
(mx/component
|
||||
{:render selected-shape-render
|
||||
:name "selected-shape"
|
||||
:mixins [mx/static (mx/local {})]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Shape
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn shape-render
|
||||
[own shape selected]
|
||||
(let [{:keys [id x y width height] :as shape} shape
|
||||
selected? (contains? selected id)]
|
||||
;; (println "shape" (:id shape))
|
||||
(let [{:keys [id x y width height] :as shape} shape]
|
||||
(letfn [(on-mouse-down [event]
|
||||
(when-not (:blocked shape)
|
||||
(let [local (:rum/local own)]
|
||||
(dom/stop-propagation event)
|
||||
(swap! local assoc :init-coords [x y])
|
||||
(reset! wb/shapes-dragging? true))
|
||||
(cond
|
||||
(and (not selected?)
|
||||
(empty? selected))
|
||||
(rs/emit! (dw/select-shape id))
|
||||
|
||||
(and (not selected?)
|
||||
(not (empty? selected)))
|
||||
(if (.-ctrlKey event)
|
||||
(rs/emit! (dw/select-shape id))
|
||||
(rs/emit! (dw/deselect-all)
|
||||
(dw/select-shape id))))))
|
||||
(dw/select-shape id)))))
|
||||
|
||||
(on-mouse-up [event]
|
||||
(dom/stop-propagation event)
|
||||
(reset! wb/shapes-dragging? false))]
|
||||
(html
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
:on-mouse-down on-mouse-down
|
||||
[:g.shape {:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
(shapes/render shape)
|
||||
(if selected?
|
||||
[:g.controls
|
||||
[:rect {:x x :y y :width width :height height
|
||||
:style {:stroke "black" :fill "transparent"
|
||||
:stroke-opacity "0.5"}}]
|
||||
[:circle.top-left (merge default-selection-props
|
||||
{:cx x :cy y})]
|
||||
[:circle.top-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy y})]
|
||||
[:circle.bottom-left (merge default-selection-props
|
||||
{:cx x :cy (+ y height)})]
|
||||
[:circle.bottom-right (merge default-selection-props
|
||||
{:cx (+ x width) :cy (+ y height)})]])]))))
|
||||
(shapes/-render shape nil)]))))
|
||||
|
||||
(def shape
|
||||
(mx/component
|
||||
|
|
@ -230,18 +251,19 @@
|
|||
(background)
|
||||
(grid 1)
|
||||
[:svg.page-layout {}
|
||||
(for [item shapes-notselected
|
||||
:let [component (shape item workspace-selected)]]
|
||||
(rum/with-key component (str (:id item))))
|
||||
[:g.main {}
|
||||
(for [item shapes-notselected]
|
||||
(-> (shape item workspace-selected)
|
||||
(rum/with-key (str (:id item)))))
|
||||
|
||||
(cond
|
||||
(= (count shapes-selected) 1)
|
||||
(let [item (first shapes-selected)]
|
||||
(shape item workspace-selected))
|
||||
(cond
|
||||
(= (count shapes-selected) 1)
|
||||
(let [item (first shapes-selected)]
|
||||
(selected-shape item workspace-selected))
|
||||
|
||||
(> (count shapes-selected) 1)
|
||||
(selected-shapes shapes-selected))
|
||||
(selrect)]])))
|
||||
(> (count shapes-selected) 1)
|
||||
(selected-shapes shapes-selected))
|
||||
(selrect)]]])))
|
||||
|
||||
(def canvas
|
||||
(mx/component
|
||||
|
|
|
|||
|
|
@ -134,15 +134,18 @@
|
|||
[:li {:key (str (:id item))
|
||||
:on-click select
|
||||
:class (when selected? "selected")}
|
||||
[:div.element-list-body
|
||||
[:div.element-list-body {:class (when selected? "selected")}
|
||||
[:div.element-actions
|
||||
[:div.toggle-element {:class (when-not (:hidden item) "selected")
|
||||
:on-click toggle-visibility}
|
||||
i/eye]
|
||||
[:div.block-element {:class (when (:blocked item) "selected")
|
||||
:on-click toggle-blocking}
|
||||
:on-click toggle-blocking}
|
||||
i/lock]]
|
||||
[:div.element-icon (shapes/render item)]
|
||||
|
||||
(if (:group item)
|
||||
[:div.sublevel-element i/sublevel])
|
||||
[:div.element-icon (shapes/-render-svg item)]
|
||||
[:span (or (:name item)
|
||||
(:id item))]]])))
|
||||
|
||||
|
|
@ -152,6 +155,36 @@
|
|||
:name "layer-element"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
(declare layer-group)
|
||||
|
||||
(defn- layer-group-render
|
||||
[own item selected]
|
||||
(let [selected? (contains? selected (:id item))
|
||||
shapes-by-id (rum/react shapes-by-id)]
|
||||
(html
|
||||
[:li.group.open
|
||||
[:div.element-list-body {:class (when selected? "selected")}
|
||||
[:div.element-actions
|
||||
[:div.toggle-element i/eye]
|
||||
[:div.block-element i/lock]
|
||||
[:div.chain-element i/chain]]
|
||||
[:div.element-icon i/folder]
|
||||
[:span "Opened group"]
|
||||
[:span.toggle-content i/arrow-slide]]
|
||||
[:ul
|
||||
(for [shape (map #(get shapes-by-id %) (:items item))
|
||||
:let [key (str (:id shape))]]
|
||||
;; TODO: make polymorphic
|
||||
(case (:type shape)
|
||||
:builtin/icon (rum/with-key (layer-element shape selected) key)
|
||||
:builtin/group (rum/with-key (layer-group shape selected) key)))]])))
|
||||
|
||||
(def ^:static ^:private layer-group
|
||||
(mx/component
|
||||
{:render layer-group-render
|
||||
:name "layer-group"
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
(defn layers-render
|
||||
[own]
|
||||
(let [workspace (rum/react wb/workspace-l)
|
||||
|
|
@ -160,6 +193,7 @@
|
|||
page (rum/react (focus-page (:page workspace)))
|
||||
close #(rs/emit! (dw/toggle-toolbox :layers))
|
||||
copy #(rs/emit! (dw/copy-selected))
|
||||
group #(rs/emit! (dw/group-selected))
|
||||
delete #(rs/emit! (dw/delete-selected))]
|
||||
(html
|
||||
[:div#layers.tool-window
|
||||
|
|
@ -170,44 +204,17 @@
|
|||
[:div.tool-window-content
|
||||
[:ul.element-list
|
||||
(for [shape (map #(get shapes-by-id %) (:shapes page))
|
||||
:let [component (layer-element shape selected)]]
|
||||
(rum/with-key component (:id shape)))
|
||||
|
||||
[:li.group.open
|
||||
[:div.element-list-body
|
||||
[:div.element-actions
|
||||
[:div.toggle-element i/eye]
|
||||
[:div.block-element i/lock]
|
||||
[:div.chain-element i/chain]]
|
||||
[:div.element-icon i/folder]
|
||||
[:span "Opened group"]
|
||||
[:span.toggle-content i/arrow-slide]]
|
||||
|
||||
[:ul
|
||||
|
||||
[:li
|
||||
[:div.element-list-body
|
||||
[:div.element-actions
|
||||
[:div.toggle-element i/eye]
|
||||
[:div.block-element i/lock]]
|
||||
[:div.sublevel-element i/sublevel]
|
||||
[:div.element-icon i/box]
|
||||
[:span "Sub layer"]]]
|
||||
|
||||
[:li
|
||||
[:div.element-list-body
|
||||
[:div.element-actions
|
||||
[:div.toggle-element i/eye]
|
||||
[:div.block-element i/lock]]
|
||||
[:div.sublevel-element i/sublevel]
|
||||
[:div.element-icon i/box]
|
||||
[:span "Sub layer"]]]]]]]
|
||||
|
||||
:let [key (str (:id shape))]]
|
||||
;; TODO: make polymorphic
|
||||
(case (:type shape)
|
||||
:builtin/icon (rum/with-key (layer-element shape selected) key)
|
||||
:builtin/group (rum/with-key (layer-group shape selected) key)))]]
|
||||
[:div.layers-tools
|
||||
[:ul.layers-tools-content
|
||||
[:li.clone-layer {:on-click copy}
|
||||
i/copy]
|
||||
[:li.group-layer i/folder]
|
||||
[:li.group-layer {:on-click group}
|
||||
i/folder]
|
||||
[:li.delete-layer {:on-click delete}
|
||||
i/trash]
|
||||
]]])))
|
||||
|
|
@ -275,7 +282,7 @@
|
|||
|
||||
(defn- icon-wrapper-render
|
||||
[own icon]
|
||||
(shapes/render icon))
|
||||
(shapes/-render-svg icon nil))
|
||||
|
||||
(def ^:static ^:private icon-wrapper
|
||||
(mx/component
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue