🐛 Improve html generation

common/src/app/common/geom/shapes.cljc

@@ -205,3 +205,6 @@
 
 ;; Modifiers
 (dm/export gsm/set-objects-modifiers)
+
+;; Rect
+(dm/export grc/rect->points)

common/src/app/common/geom/shapes/bounds.cljc

@@ -107,9 +107,7 @@
          margin
          (if ignore-margin?
            0
-           (->> strokes
-                (map #(shape-stroke-margin % stroke-width))
-                (reduce d/max 0)))
+           (shape-stroke-margin shape stroke-width))
 
          shadow-width
          (->> (:shadow shape)
@@ -125,8 +123,8 @@
                       0))
               (reduce d/max 0))]
 
-     {:horizontal (+ stroke-width margin shadow-width)
-      :vertical (+ stroke-width margin shadow-height)})))
+     {:horizontal (mth/ceil (+ stroke-width margin shadow-width))
+      :vertical (mth/ceil (+ stroke-width margin shadow-height))})))
 
 (defn- add-padding
   [bounds padding]

common/test/common_tests/types_shape_interactions_test.cljc

@@ -6,6 +6,7 @@
 
 (ns common-tests.types-shape-interactions-test
   (:require
+   [app.common.math :as mth]
    [app.common.exceptions :as ex]
    [app.common.geom.point :as gpt]
    [app.common.geom.rect :as grc]
@@ -332,56 +333,56 @@
     (t/testing "Overlay top-center relative to auto"
       (let [i2 (ctsi/set-overlay-pos-type interaction-auto :top-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 0))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 0))
         (t/is (= snap-v :top))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay top-right relative to auto"
       (let [i2 (ctsi/set-overlay-pos-type interaction-auto :top-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 70))
-        (t/is (= (:y overlay-pos) 0))
+        (t/is (mth/close? (:x overlay-pos) 70))
+        (t/is (mth/close? (:y overlay-pos) 0))
         (t/is (= snap-v :top))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay bottom-left relative to auto"
       (let [i2 (ctsi/set-overlay-pos-type interaction-auto :bottom-left base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 0))
-        (t/is (= (:y overlay-pos) 80))
+        (t/is (mth/close? (:x overlay-pos) 0))
+        (t/is (mth/close? (:y overlay-pos) 80))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay bottom-center relative to auto"
       (let [i2 (ctsi/set-overlay-pos-type interaction-auto :bottom-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 80))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 80))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay bottom-right relative to auto"
       (let [i2 (ctsi/set-overlay-pos-type interaction-auto :bottom-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 70))
-        (t/is (= (:y overlay-pos) 80))
+        (t/is (mth/close? (:x overlay-pos) 70))
+        (t/is (mth/close? (:y overlay-pos) 80))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay center relative to auto"
       (let [i2 (ctsi/set-overlay-pos-type interaction-auto :center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 40))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 40))
         (t/is (= snap-v :center))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay manual relative to auto"
       (let [i2 (ctsi/set-overlay-pos-type interaction-auto :center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 40))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 40))
         (t/is (= snap-v :center))
         (t/is (= snap-h :center))))
 
@@ -390,64 +391,64 @@
                    (ctsi/set-overlay-pos-type :manual base-frame objects)
                    (ctsi/set-overlay-position (gpt/point 12 62)))
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 17))
-        (t/is (= (:y overlay-pos) 67))
+        (t/is (mth/close? (:x overlay-pos) 17))
+        (t/is (mth/close? (:y overlay-pos) 67))
         (t/is (= snap-v :top))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay top-left relative to base-frame"
       (let [i2 (ctsi/set-overlay-pos-type interaction-base-frame :top-left base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 5))
-        (t/is (= (:y overlay-pos) 5))
+        (t/is (mth/close? (:x overlay-pos) 5))
+        (t/is (mth/close? (:y overlay-pos) 5))
         (t/is (= snap-v :top))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay top-center relative to base-frame"
       (let [i2 (ctsi/set-overlay-pos-type interaction-base-frame :top-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 40))
-        (t/is (= (:y overlay-pos) 5))
+        (t/is (mth/close? (:x overlay-pos) 40))
+        (t/is (mth/close? (:y overlay-pos) 5))
         (t/is (= snap-v :top))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay top-right relative to base-frame"
       (let [i2 (ctsi/set-overlay-pos-type interaction-base-frame :top-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 75))
-        (t/is (= (:y overlay-pos) 5))
+        (t/is (mth/close? (:x overlay-pos) 75))
+        (t/is (mth/close? (:y overlay-pos) 5))
         (t/is (= snap-v :top))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay bottom-left relative to base-frame"
       (let [i2 (ctsi/set-overlay-pos-type interaction-base-frame :bottom-left base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 5))
-        (t/is (= (:y overlay-pos) 85))
+        (t/is (mth/close? (:x overlay-pos) 5))
+        (t/is (mth/close? (:y overlay-pos) 85))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay bottom-center relative to base-frame"
       (let [i2 (ctsi/set-overlay-pos-type interaction-base-frame :bottom-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 40))
-        (t/is (= (:y overlay-pos) 85))
+        (t/is (mth/close? (:x overlay-pos) 40))
+        (t/is (mth/close? (:y overlay-pos) 85))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay bottom-right relative to base-frame"
       (let [i2 (ctsi/set-overlay-pos-type interaction-base-frame :bottom-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 75))
-        (t/is (= (:y overlay-pos) 85))
+        (t/is (mth/close? (:x overlay-pos) 75))
+        (t/is (mth/close? (:y overlay-pos) 85))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay center relative to base-frame"
       (let [i2 (ctsi/set-overlay-pos-type interaction-base-frame :center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 40))
-        (t/is (= (:y overlay-pos) 45))
+        (t/is (mth/close? (:x overlay-pos) 40))
+        (t/is (mth/close? (:y overlay-pos) 45))
         (t/is (= snap-v :center))
         (t/is (= snap-h :center))))
 
@@ -456,64 +457,64 @@
                    (ctsi/set-overlay-pos-type :manual base-frame objects)
                    (ctsi/set-overlay-position (gpt/point 12 62)))
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects base-frame base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 17))
-        (t/is (= (:y overlay-pos) 67))
+        (t/is (mth/close? (:x overlay-pos) 17))
+        (t/is (mth/close? (:y overlay-pos) 67))
         (t/is (= snap-v :top))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay top-left relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :top-left base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 15))
-        (t/is (= (:y overlay-pos) 15))
+        (t/is (mth/close? (:x overlay-pos) 15))
+        (t/is (mth/close? (:y overlay-pos) 15))
         (t/is (= snap-v :top))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay top-center relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :top-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 25))
-        (t/is (= (:y overlay-pos) 15))
+        (t/is (mth/close? (:x overlay-pos) 25))
+        (t/is (mth/close? (:y overlay-pos) 15))
         (t/is (= snap-v :top))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay top-right relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :top-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 15))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 15))
         (t/is (= snap-v :top))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay bottom-left relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :bottom-left base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 15))
-        (t/is (= (:y overlay-pos) 45))
+        (t/is (mth/close? (:x overlay-pos) 15))
+        (t/is (mth/close? (:y overlay-pos) 45))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay bottom-center relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :bottom-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 25))
-        (t/is (= (:y overlay-pos) 45))
+        (t/is (mth/close? (:x overlay-pos) 25))
+        (t/is (mth/close? (:y overlay-pos) 45))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay bottom-right relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :bottom-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 45))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 45))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay center relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 25))
-        (t/is (= (:y overlay-pos) 30))
+        (t/is (mth/close? (:x overlay-pos) 25))
+        (t/is (mth/close? (:y overlay-pos) 30))
         (t/is (= snap-v :center))
         (t/is (= snap-h :center))))
 
@@ -522,64 +523,64 @@
                    (ctsi/set-overlay-pos-type :manual base-frame objects)
                    (ctsi/set-overlay-position (gpt/point 12 62)))
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 27))
-        (t/is (= (:y overlay-pos) 77))
+        (t/is (mth/close? (:x overlay-pos) 27))
+        (t/is (mth/close? (:y overlay-pos) 77))
         (t/is (= snap-v :top))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay top-left relative to popup"
       (let [i2 (ctsi/set-overlay-pos-type interaction-popup :top-left base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects popup base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 15))
-        (t/is (= (:y overlay-pos) 15))
+        (t/is (mth/close? (:x overlay-pos) 15))
+        (t/is (mth/close? (:y overlay-pos) 15))
         (t/is (= snap-v :top))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay top-center relative to rect"
       (let [i2 (ctsi/set-overlay-pos-type interaction-rect :top-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects rect base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 25))
-        (t/is (= (:y overlay-pos) 15))
+        (t/is (mth/close? (:x overlay-pos) 25))
+        (t/is (mth/close? (:y overlay-pos) 15))
         (t/is (= snap-v :top))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay top-right relative to rect"
       (let [i2 (ctsi/set-overlay-pos-type interaction-rect :top-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects rect base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 15))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 15))
         (t/is (= snap-v :top))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay bottom-left relative to rect"
       (let [i2 (ctsi/set-overlay-pos-type interaction-rect :bottom-left base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects rect base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 15))
-        (t/is (= (:y overlay-pos) 45))
+        (t/is (mth/close? (:x overlay-pos) 15))
+        (t/is (mth/close? (:y overlay-pos) 45))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :left))))
 
     (t/testing "Overlay bottom-center relative to rect"
       (let [i2 (ctsi/set-overlay-pos-type interaction-rect :bottom-center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects rect base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 25))
-        (t/is (= (:y overlay-pos) 45))
+        (t/is (mth/close? (:x overlay-pos) 25))
+        (t/is (mth/close? (:y overlay-pos) 45))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :center))))
 
     (t/testing "Overlay bottom-right relative to rect"
       (let [i2 (ctsi/set-overlay-pos-type interaction-rect :bottom-right base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects rect base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 35))
-        (t/is (= (:y overlay-pos) 45))
+        (t/is (mth/close? (:x overlay-pos) 35))
+        (t/is (mth/close? (:y overlay-pos) 45))
         (t/is (= snap-v :bottom))
         (t/is (= snap-h :right))))
 
     (t/testing "Overlay center relative to rect"
       (let [i2 (ctsi/set-overlay-pos-type interaction-rect :center base-frame objects)
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects rect base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 25))
-        (t/is (= (:y overlay-pos) 30))
+        (t/is (mth/close? (:x overlay-pos) 25))
+        (t/is (mth/close? (:y overlay-pos) 30))
         (t/is (= snap-v :center))
         (t/is (= snap-h :center))))
 
@@ -588,8 +589,8 @@
                    (ctsi/set-overlay-pos-type :manual base-frame objects)
                    (ctsi/set-overlay-position (gpt/point 12 62)))
             [overlay-pos [snap-v snap-h]] (ctsi/calc-overlay-position i2 rect objects rect base-frame overlay-frame frame-offset)]
-        (t/is (= (:x overlay-pos) 17))
-        (t/is (= (:y overlay-pos) 67))
+        (t/is (mth/close? (:x overlay-pos) 17))
+        (t/is (mth/close? (:y overlay-pos) 67))
         (t/is (= snap-v :top))
         (t/is (= snap-h :left))))))
 

frontend/src/app/main/ui/frame_preview.cljs

@@ -25,12 +25,11 @@
         handle-load
         (mf/use-callback
          (fn [data width height]
-           (prn "handle-load" data)
            (reset! last-data* data)
            (let [iframe-dom (mf/ref-val iframe-ref)]
              (when iframe-dom
-               (-> iframe-dom (aset "width" width))
-               (-> iframe-dom (aset "height" height))
+               (-> iframe-dom (aset "width" (+ width 64)))
+               (-> iframe-dom (aset "height" (+ height 64)))
                (-> iframe-dom .-contentWindow .-document .open)
                (-> iframe-dom .-contentWindow .-document (.write data))
                (-> iframe-dom .-contentWindow .-document .close)))))
@@ -59,13 +58,13 @@
     [:div {:style {:display "flex" :width "100%" :height "100%" :flex-direction "column" :overflow "auto" :align-items "center"}}
      [:input {:id "zoom-input"
               :ref zoom-ref
-              :type "range" :min 1 :max 200 :default-value 100
+              :type "range" :min 1 :max 400 :default-value 100
               :on-change change-zoom
               :style {:max-width "500px"}}]
 
      [:div {:style {:width "100%" :height "100%" :overflow "auto"}}
       [:iframe {:ref load-ref
-                :frameborder "0"
+                :frame-border "0"
                 :scrolling "no" 
-                :style {:transform-origin "top center"
+                :style {:transform-origin "top left"
                         :transform (str "scale(" zoom ")")}}]]]))

frontend/src/app/util/code_gen/common.cljs

@@ -58,5 +58,6 @@
   [objects shape]
   ;; Layout children with a transform should be wrapped
   (and (ctl/any-layout-immediate-child? objects shape)
+       (not (ctl/layout-absolute? shape))
        (not (gmt/unit? (:transform shape)))))
 

frontend/src/app/util/code_gen/markup_html.cljs

@@ -23,68 +23,69 @@
    (generate-html objects shape 0))
 
   ([objects shape level]
-   (let [indent (str/repeat "  " level)
-         maybe-reverse (if (ctl/any-layout? shape) reverse identity)
+   (when (and (some? shape) (some? (:selrect shape)))
+     (let [indent (str/repeat "  " level)
+           maybe-reverse (if (ctl/any-layout? shape) reverse identity)
 
-         shape-html
-         (cond
-           (cgc/svg-markup? shape)
-           (let [svg-markup (generate-svg objects shape)]
+           shape-html
+           (cond
+             (cgc/svg-markup? shape)
+             (let [svg-markup (generate-svg objects shape)]
+               (dm/fmt "%<div class=\"%\">\n%\n%</div>"
+                       indent
+                       (dm/str "shape " (d/name (:type shape)) " "
+                               (cgc/shape->selector shape))
+                       svg-markup
+                       indent))
+
+             (cph/text-shape? shape)
+             (let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
+               (dm/fmt "%<div class=\"%\">\n%\n%</div>"
+                       indent
+                       (dm/str "shape " (d/name (:type shape)) " "
+                               (cgc/shape->selector shape))
+                       text-shape-html
+                       indent))
+
+             (cph/image-shape? shape)
+             (let [data (or (:metadata shape) (:fill-image shape))
+                   image-url (cfg/resolve-file-media data)]
+               (dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
+                       indent
+                       image-url
+                       (dm/str "shape " (d/name (:type shape)) " "
+                               (cgc/shape->selector shape))
+                       indent))
+
+             (empty? (:shapes shape))
+             (dm/fmt "%<div class=\"%\">\n%</div>"
+                     indent
+                     (dm/str "shape " (d/name (:type shape)) " "
+                             (cgc/shape->selector shape))
+                     indent)
+
+             :else
              (dm/fmt "%<div class=\"%\">\n%\n%</div>"
                      indent
-                     (dm/str "shape " (d/name (:type shape)) " "
+                     (dm/str (d/name (:type shape)) " "
                              (cgc/shape->selector shape))
-                     svg-markup
+                     (->> (:shapes shape)
+                          (maybe-reverse)
+                          (map #(generate-html objects (get objects %) (inc level)))
+                          (str/join "\n"))
                      indent))
 
-           (cph/text-shape? shape)
-           (let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
-             (dm/fmt "%<div class=\"%\">\n%\n%</div>"
-                     indent
-                     (dm/str "shape " (d/name (:type shape)) " "
-                             (cgc/shape->selector shape))
-                     text-shape-html
-                     indent))
+           shape-html
+           (if (cgc/has-wrapper? objects shape)
+             (dm/fmt  "<div class=\"%\">%</div>"
+                      (dm/str (cgc/shape->selector shape) "-wrapper")
+                      shape-html)
 
-           (cph/image-shape? shape)
-           (let [data (or (:metadata shape) (:fill-image shape))
-                 image-url (cfg/resolve-file-media data)]
-             (dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
-                     indent
-                     image-url
-                     (dm/str "shape " (d/name (:type shape)) " "
-                             (cgc/shape->selector shape))
-                     indent))
-
-           (empty? (:shapes shape))
-           (dm/fmt "%<div class=\"%\">\n%</div>"
-                   indent
-                   (dm/str "shape " (d/name (:type shape)) " "
-                           (cgc/shape->selector shape))
-                   indent)
-
-           :else
-           (dm/fmt "%<div class=\"%\">\n%\n%</div>"
-                   indent
-                   (dm/str (d/name (:type shape)) " "
-                           (cgc/shape->selector shape))
-                   (->> (:shapes shape)
-                        (maybe-reverse)
-                        (map #(generate-html objects (get objects %) (inc level)))
-                        (str/join "\n"))
-                   indent))
-
-         shape-html
-         (if (cgc/has-wrapper? objects shape)
-           (dm/fmt  "<div class=\"%\">%</div>"
-                    (dm/str (cgc/shape->selector shape) "-wrapper")
-                    shape-html)
-
-           shape-html)]
-     (dm/fmt "%<!-- % -->\n%" indent (dm/str (d/name (:type shape)) ": " (:name shape)) shape-html))))
+             shape-html)]
+       (dm/fmt "%<!-- % -->\n%" indent (dm/str (d/name (:type shape)) ": " (:name shape)) shape-html)))))
 
 (defn generate-markup
   [objects shapes]
   (->> shapes
-       (map #(generate-html objects %))
+       (keep #(generate-html objects %))
        (str/join "\n")))

frontend/src/app/util/code_gen/style_css.cljs

@@ -9,7 +9,8 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.matrix :as gmt]
-   [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.bounds :as gsb]
+   [app.common.geom.shapes.points :as gpo]
    [app.common.pages.helpers :as cph]
    [app.common.text :as txt]
    [app.common.types.shape.layout :as ctl]
@@ -38,13 +39,6 @@ body {
   gap: 2rem;
 }
 
-svg {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
 * {
   box-sizing: border-box;
 }
@@ -64,7 +58,10 @@ svg {
     :justify-self
     :grid-column
     :grid-row
-    :z-index})
+    :z-index
+    :top
+    :left
+    :position})
 
 (def shape-css-properties
   [:position
@@ -139,12 +136,16 @@ svg {
   [shape objects]
   (when (and (ctl/any-layout-immediate-child? objects shape)
              (not (gmt/unit? (:transform shape))))
-    (let [{:keys [width height]} (gsh/shapes->rect [shape])]
-      (cond-> [[:position "relative"]
-               [:width width]
+    (let [parent (get objects (:parent-id shape))
+          bounds (gpo/parent-coords-bounds (:points shape) (:points parent))
+          width  (gpo/width-points bounds)
+          height (gpo/height-points bounds)]
+      (cond-> [[:width width]
                [:height height]]
-        (ctl/flex-layout-immediate-child? objects shape)
-        (conj [:flex-shrink 0])))))
+
+        (or (not (ctl/any-layout-immediate-child? objects shape))
+            (not (ctl/layout-absolute? shape)))
+        (conj [:position "relative"])))))
 
 (defn shape->wrapper-child-css-properties
   [shape objects]
@@ -153,6 +154,16 @@ svg {
      [:left "50%"]
      [:top "50%"]]))
 
+(defn shape->svg-props
+  [shape objects]
+  (let [bounds (gsb/get-object-bounds objects shape)]
+    [[:position "absolute"]
+     [:top 0]
+     [:left 0]
+     [:transform (dm/fmt "translate(%,%)"
+                         (dm/str (- (:x bounds) (-> shape :selrect :x)) "px")
+                         (dm/str (- (:y bounds) (-> shape :selrect :y)) "px"))]]))
+
 (defn shape->css-properties
   "Given a shape extract the CSS properties in the format of list [property value]"
   [shape objects properties]
@@ -235,40 +246,49 @@ svg {
    (get-shape-css-selector shape objects nil))
 
   ([shape objects options]
-   (let [selector (cgc/shape->selector shape)
+   (when (and (some? shape) (some? (:selrect shape)))
+     (let [selector (cgc/shape->selector shape)
 
-         wrapper? (cgc/has-wrapper? objects shape)
+           wrapper? (cgc/has-wrapper? objects shape)
+           svg?     (cgc/svg-markup? shape)
 
-         css-properties
-         (if wrapper?
-           (filter (complement shape-wrapper-css-properties) shape-css-properties)
-           shape-css-properties)
+           css-properties
+           (if wrapper?
+             (filter (complement shape-wrapper-css-properties) shape-css-properties)
+             shape-css-properties)
 
-         properties
-         (-> shape
-             (shape->css-properties objects css-properties)
-             (format-css-properties options))
-
-         wrapper-properties
-         (when wrapper?
-           (-> (d/concat-vec
-                (shape->css-properties shape objects shape-wrapper-css-properties)
-                (shape->wrapper-css-properties shape objects))
-               (format-css-properties options)))
-
-         wrapper-child-properties
-         (when wrapper?
+           properties
            (-> shape
-               (shape->wrapper-child-css-properties objects)
-               (format-css-properties options)))]
+               (shape->css-properties objects css-properties)
+               (format-css-properties options))
 
-     (str/join
-      "\n"
-      (filter some? [(str/fmt "/* %s */" (:name shape))
-                     (when wrapper? (str/fmt ".%s-wrapper {\n%s\n}" selector wrapper-properties))
-                     (when wrapper? (str/fmt ".%s-wrapper > * {\n%s\n}"  selector wrapper-child-properties))
-                     (str/fmt ".%s {\n%s\n}" selector properties)
-                     (when (cph/text-shape? shape) (generate-text-css shape))])))))
+           wrapper-properties
+           (when wrapper?
+             (-> (d/concat-vec
+                  (shape->css-properties shape objects shape-wrapper-css-properties)
+                  (shape->wrapper-css-properties shape objects))
+                 (format-css-properties options)))
+
+           wrapper-child-properties
+           (when wrapper?
+             (-> shape
+                 (shape->wrapper-child-css-properties objects)
+                 (format-css-properties options)))
+
+           svg-child-props
+           (when svg?
+             (-> shape
+                 (shape->svg-props objects)
+                 (format-css-properties options)))]
+
+       (str/join
+        "\n"
+        (filter some? [(str/fmt "/* %s */" (:name shape))
+                       (when wrapper? (str/fmt ".%s-wrapper {\n%s\n}" selector wrapper-properties))
+                       (when wrapper? (str/fmt ".%s-wrapper > * {\n%s\n}" selector wrapper-child-properties))
+                       (when svg?     (str/fmt ".%s > svg {\n%s\n}" selector svg-child-props))
+                       (str/fmt ".%s {\n%s\n}" selector properties)
+                       (when (cph/text-shape? shape) (generate-text-css shape))]))))))
 
 (defn get-css-property
   ([objects shape property]
@@ -294,5 +314,5 @@ svg {
    (dm/str
     prelude
     (->> shapes
-         (map #(get-shape-css-selector % objects options))
+         (keep #(get-shape-css-selector % objects options))
          (str/join "\n\n")))))

frontend/src/app/util/code_gen/style_css_values.cljs

@@ -49,12 +49,14 @@
   (when (and (not (cph/root-frame? shape))
              (or (not (ctl/any-layout-immediate-child? objects shape))
                  (ctl/layout-absolute? shape)))
+
     (let [parent (get objects (:parent-id shape))
+
           parent-value (dm/get-in parent [:selrect coord])
 
           [selrect _ _]
           (-> (:points shape)
-              (gsh/transform-points (gsh/shape->center parent) (:transform-inverse parent))
+              (gsh/transform-points (gsh/shape->center parent) (:transform-inverse parent (gmt/matrix)))
               (gsh/calculate-geometry))
 
           shape-value (get selrect coord)]
@@ -117,7 +119,17 @@
 
 (defmethod get-value :transform
   [_ shape objects]
-  (when-not (cgc/svg-markup? shape)
+  (if (cgc/svg-markup? shape)
+    (let [parent (get objects (:parent-id shape))
+          transform
+          (:transform-inverse parent (gmt/matrix))
+
+          transform-str (when-not (gmt/unit? transform) (fmt/format-matrix transform))]
+
+      (if (cgc/has-wrapper? objects shape)
+        (dm/str "translate(-50%, -50%) " (d/nilv transform-str ""))
+        transform-str))
+
     (let [parent (get objects (:parent-id shape))
 
           transform
@@ -207,6 +219,7 @@
 (defmethod get-value :overflow
   [_ shape _]
   (when (and (cph/frame-shape? shape)
+             (not (cgc/svg-markup? shape))
              (not (:show-content shape)))
     "hidden"))