mirror of
https://github.com/penpot/penpot.git
synced 2025-03-16 01:31:22 -05:00
Initial work on basic shapes rendering.
This commit is contained in:
parent
80cbddcc4a
commit
46d6ef2a68
2 changed files with 48 additions and 6 deletions
|
@ -2,6 +2,7 @@
|
|||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[cats.labs.lens :as l]
|
||||
[uxbox.locales :refer (tr)]
|
||||
[uxbox.router :as r]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as st]
|
||||
|
@ -14,6 +15,18 @@
|
|||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.dom :as dom]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Lenses
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:private ^:static drawing-shape
|
||||
"A focused vision of the drawing property
|
||||
of the workspace status. This avoids
|
||||
rerender the whole toolbox on each workspace
|
||||
change."
|
||||
(as-> (l/in [:workspace :drawing]) $
|
||||
(l/focus-atom $ st/state)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Draw Tools
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
@ -21,24 +34,49 @@
|
|||
(def ^:staric +draw-tools+
|
||||
{:rect
|
||||
{:icon i/box
|
||||
:help "Box (Ctrl + B)"
|
||||
:help (tr "ds.help.rect")
|
||||
:shape {:type :builtin/rect
|
||||
:name "Rect"
|
||||
:width 20
|
||||
:height 20
|
||||
:stroke "#000000"
|
||||
:stroke-width "1"
|
||||
:view-box [0 0 20 20]}
|
||||
:priority 10}
|
||||
:circle
|
||||
{:icon i/circle
|
||||
:help "Circle (Ctrl + E)"
|
||||
:help (tr "ds.help.circle")
|
||||
:shape {:type :builtin/circle
|
||||
:name "Circle"
|
||||
:width 20
|
||||
:height 20
|
||||
:stroke "#000000"
|
||||
:stroke-width "1"
|
||||
:view-box [0 0 20 20]}
|
||||
:priority 20}
|
||||
:line
|
||||
{:icon i/line
|
||||
:help "Line (Ctrl + L)"
|
||||
:help (tr "ds.help.line")
|
||||
:shape {:type :builtin/line
|
||||
:width 20
|
||||
:height 20
|
||||
:view-box [0 0 20 20]}
|
||||
:priority 30}})
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Draw Tool Box
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn- select-for-draw
|
||||
[icon]
|
||||
(if (= (:drawing @wb/workspace-l) icon)
|
||||
(rs/emit! (dw/select-for-drawing nil))
|
||||
(rs/emit! (dw/select-for-drawing icon))))
|
||||
|
||||
(defn draw-tools-render
|
||||
[open-toolboxes]
|
||||
(let [workspace (rum/react wb/workspace-l)
|
||||
drawing (rum/react drawing-shape)
|
||||
close #(rs/emit! (dw/toggle-toolbox :draw))
|
||||
tools (->> (into [] +draw-tools+)
|
||||
(sort-by (comp :priority second)))]
|
||||
|
@ -46,14 +84,16 @@
|
|||
[:div#form-tools.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/window]
|
||||
[:span "Tools"]
|
||||
[:span (tr "ds.tools")]
|
||||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content
|
||||
(for [[key props] tools]
|
||||
(for [[key props] tools
|
||||
:let [selected? (= drawing (:shape props))]]
|
||||
[:div.tool-btn.tooltip.tooltip-hover
|
||||
{:alt (:help props)
|
||||
:class (when selected? "selected")
|
||||
:key (name key)
|
||||
:on-click (constantly nil)}
|
||||
:on-click (partial select-for-draw (:shape props))}
|
||||
(:icon props)])]])))
|
||||
|
||||
(def ^:static draw-toolbox
|
||||
|
|
|
@ -144,6 +144,7 @@
|
|||
:let [key (str (:id shape))]]
|
||||
;; TODO: make polymorphic
|
||||
(case (:type shape)
|
||||
:builtin/rect (rum/with-key (layer-element shape selected) key)
|
||||
:builtin/icon (rum/with-key (layer-element shape selected) key)
|
||||
:builtin/group (rum/with-key (layer-group shape selected) key)))])])))
|
||||
|
||||
|
@ -175,6 +176,7 @@
|
|||
:let [key (str (:id shape))]]
|
||||
;; TODO: make polymorphic
|
||||
(case (:type shape)
|
||||
:builtin/rect (rum/with-key (layer-element shape selected) key)
|
||||
:builtin/icon (rum/with-key (layer-element shape selected) key)
|
||||
:builtin/group (rum/with-key (layer-group shape selected) key)))]]
|
||||
[:div.layers-tools
|
||||
|
|
Loading…
Add table
Reference in a new issue