mirror of
https://github.com/penpot/penpot.git
synced 2025-03-16 01:31:22 -05:00
Add basic figures rendering.
This commit is contained in:
parent
46d6ef2a68
commit
f17da9cb46
4 changed files with 59 additions and 19 deletions
|
@ -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))
|
||||
|
|
|
@ -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+
|
||||
|
|
|
@ -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}})
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue