Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-17 18:21:23 -05:00
Code Issues Activity

Add basic figures rendering.

Browse source
This commit is contained in:
Andrey Antukh 2016-01-24 10:31:17 +02:00
parent 46d6ef2a68
commit f17da9cb46
4 changed files with 59 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/uxbox/ui/shapes.cljs
View file

@ -5,6 +5,7 @@
[rum.core :as rum]
[uxbox.state :as st]
[uxbox.shapes :as shapes]
[uxbox.ui.icons :as i]
[uxbox.util.svg :as svg]
[uxbox.util.data :refer (remove-nil-vals)]))
@ -15,7 +16,8 @@
(defn- extract-attrs
"Extract predefinet attrs from shapes."
[shape]
(select-keys shape [:fill :opacity :stroke :stroke-opacity :stroke-width]))
(select-keys shape [:fill :opacity :stroke :stroke-opacity :stroke-width
:x1 :x2 :y1 :y2 :cx :cy :r]))
(defn- make-debug-attrs
[shape]
@ -51,6 +53,26 @@
[:g {:id key :key key :transform rfm}
[:rect attrs]])))
(defmethod shapes/-render :builtin/circle
[{:keys [id view-box] :as shape} _]
(let [key (str id)
rfm (svg/calculate-transform shape)
attrs (merge (extract-attrs shape)
(make-debug-attrs shape))]
(html
[:g {:id key :key key :transform rfm}
[:circle attrs]])))
(defmethod shapes/-render :builtin/line
[{:keys [id view-box] :as shape} _]
(let [key (str id)
rfm (svg/calculate-transform shape)
attrs (merge (extract-attrs shape)
(make-debug-attrs shape))]
(html
[:g {:id key :key key}
[:line attrs]])))
(defmethod shapes/-render :builtin/group
[{:keys [items id] :as shape} factory]
(let [key (str "group-" id)
@ -78,18 +100,25 @@
(html
[:svg attrs data])))
(defmethod shapes/-render-svg :builtin/rect
[{:keys [id view-box] :as shape}]
(let [key (str "icon-svg-" id)
view (apply str (interpose " " view-box))
props {:view-box view :id key :key key}
attrs (merge {:width (nth view-box 2)
:height (nth view-box 3)
:x 0 :y 0}
(extract-attrs shape)
(make-debug-attrs shape))]
(html
[:svg props
[:rect attrs]])))
(html i/box))
;; (let [key (str "icon-svg-" id)
;; view (apply str (interpose " " view-box))
;; props {:view-box view :id key :key key}
;; attrs (merge {:width (nth view-box 2)
;; :height (nth view-box 3)
;; :x 0 :y 0}
;; (extract-attrs shape)
;; (make-debug-attrs shape))]
;; (html
;; [:svg props
;; [:rect attrs]])))
(defmethod shapes/-render-svg :builtin/circle
[{:keys [id view-box] :as shape}]
(html i/circle))
(defmethod shapes/-render-svg :builtin/line
[{:keys [id view-box] :as shape}]
(html i/line))

2
src/uxbox/ui/workspace/options.cljs
View file

@ -16,6 +16,8 @@
(def +menus-map+
{:builtin/icon [:menu/measures :menu/fill :menu/stroke]
:builtin/rect [:menu/measures :menu/fill :menu/stroke]
:builtin/circle [:menu/measures :menu/fill :menu/stroke]
:builtin/line [:menu/measures :menu/stroke]
:builtin/group [:menu/measures]})
(def +menus-by-id+

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

@ -48,19 +48,24 @@
:help (tr "ds.help.circle")
:shape {:type :builtin/circle
:name "Circle"
:width 20
:height 20
:cx 60
:cy 60
:r 60
:stroke "#000000"
:stroke-width "1"
:view-box [0 0 20 20]}
:view-box [0 0 120 120]}
:priority 20}
:line
{:icon i/line
:help (tr "ds.help.line")
:shape {:type :builtin/line
:width 20
:height 20
:view-box [0 0 20 20]}
:name "Line"
:x1 0
:y1 0
:x2 200
:y2 0
:stroke "#000000"
:view-box [0 0 10 200]}
:priority 30}})
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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

@ -145,6 +145,8 @@
;; TODO: make polymorphic
(case (:type shape)
:builtin/rect (rum/with-key (layer-element shape selected) key)
:builtin/circle (rum/with-key (layer-element shape selected) key)
:builtin/line (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)))])])))
@ -177,6 +179,8 @@
;; TODO: make polymorphic
(case (:type shape)
:builtin/rect (rum/with-key (layer-element shape selected) key)
:builtin/circle (rum/with-key (layer-element shape selected) key)
:builtin/line (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