Draw selection dashed-square when shape is drawing.

frontend/src/uxbox/main/ui/workspace/canvas.cljs

@@ -104,7 +104,7 @@
 
 (mx/defc canvas
   {:mixins [mx/static mx/reactive]}
-  [{:keys [metadata id] :as page}]
+  [{:keys [metadata id] :as page} zoom]
   (let [width (:width metadata)
         height (:height metadata)]
     [:svg.page-canvas {:x c/canvas-start-x
@@ -119,7 +119,7 @@
          (-> (uus/shape item)
              (mx/with-key (str item))))
        (selection-handlers)
-       (draw-area)]]]))
+       (draw-area zoom)]]]))
 
 ;; --- Viewport
 
@@ -259,7 +259,7 @@
                         :on-mouse-up on-mouse-up}
          [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
           (if page
-            (canvas page))
+            (canvas page zoom))
           (if (contains? flags :grid)
             (grid))]
          (ruler)

frontend/src/uxbox/main/ui/workspace/drawarea.cljs

@@ -36,16 +36,25 @@
 
 (mx/defc draw-area
   {:mixins [mx/static mx/reactive]}
-  []
+  [zoom]
   (when-let [shape (mx/react drawing-shape)]
     (if (= (:type shape) :path)
       (path-draw-area shape)
-      (generic-draw-area shape))))
+      (generic-draw-area shape zoom))))
 
 (mx/defc generic-draw-area
-  [shape]
-  (-> (assoc shape :drawing? true)
-      (shapes/render-component)))
+  [shape zoom]
+  (let [{:keys [x1 y1 width height]} (geom/size shape)]
+    [:g
+     (-> (assoc shape :drawing? true)
+         (shapes/render-component))
+     [:rect.main {:x x1 :y y1
+                  :width width
+                  :height height
+                  :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
+                  :style {:stroke "#333" :fill "transparent"
+                          :stroke-opacity "1"}}]]))
+
 
 (mx/defc path-draw-area
   [{:keys [segments] :as shape}]