Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00
Code Issues Activity

Initial work on basic shapes rendering.

Browse source
This commit is contained in:
Andrey Antukh 2016-01-24 02:25:49 +02:00
parent 80cbddcc4a
commit 46d6ef2a68
2 changed files with 48 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/uxbox/ui/workspace/toolboxes/drawtools.cljs
View file

@ -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

2
src/uxbox/ui/workspace/toolboxes/layers.cljs
View file

@ -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