Add initial work on shape rendering in canvas.

With selection rectangle/circles.

frontend/uxbox/ui/workspace/workarea.cljs

@@ -120,6 +120,52 @@
     :name "grid"
     :mixins [mx/static]}))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Shape
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:private
+  selection-circle-style
+  {:fillOpacity "0.5"
+   :strokeWidth "1px"
+   :vectorEffect "non-scaling-stroke"
+   :cursor "move"})
+
+(def ^:private
+  default-selection-props
+  {:r 4 :style selection-circle-style
+   :fill "lavender"
+   :stroke "gray"})
+
+(defn- shape-render
+  [own shape]
+  (let [local (:rum/local own)
+        x 30
+        y 30
+        width 100
+        height 100]
+    (html
+     [:g
+      (shapes/render shape {:x x :y y :width width :height height})
+      [:g {:class "controls"}
+       [:rect {:x x :y y :width width :height height
+               :style {:stroke "black" :fill "transparent"
+                       :stroke-opacity "0.5"}}]
+       [:circle (merge default-selection-props
+                       {:cx x :cy y})]
+       [:circle (merge default-selection-props
+                       {:cx (+ x width) :cy y})]
+       [:circle (merge default-selection-props
+                       {:cx x :cy (+ y height)})]
+       [:circle (merge default-selection-props
+                       {:cx (+ x width) :cy (+ y height)})]]])))
+
+(def shape
+  (util/component
+   {:render shape-render
+    :name "shape"
+    :mixins [mx/static]}))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Canvas
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -137,6 +183,7 @@
         ;;                   (filter #(not (contains? selection-uuids (:shape/uuid %))))
         ;;                   (map :shape/data))
         ;;                  shapes)
+        item (first _icons/+external+)
         ]
     (html
      [:svg#page-canvas
@@ -150,8 +197,7 @@
        }
       (background)
       [:svg#page-layout
-       (shapes/render (first _icons/+material+)
+       (shape item)]
-                      {:x 20 :y 20 :width 300 :height 300})]
       #_(apply vector :svg#page-layout (map shapes/shape->svg raw-shapes))
       #_(when-let [shape (rum/react drawing)]
           (shapes/shape->drawing-svg shape))