From 721d9ee39950f6b26bbf89555cc6fd26aab3a268 Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandroalonsofernandez@gmail.com>
Date: Wed, 20 Dec 2023 14:08:15 +0100
Subject: [PATCH] WIP

---
 .../app/main/ui/workspace/viewport/sk.cljs    |  6 ++--
 .../app/main/ui/workspace/viewport/sk_impl.js | 35 +++++++++----------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/viewport/sk.cljs b/frontend/src/app/main/ui/workspace/viewport/sk.cljs
index 7767035562..53d2bdf0b8 100644
--- a/frontend/src/app/main/ui/workspace/viewport/sk.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/sk.cljs
@@ -19,15 +19,15 @@
     
     (mf/with-effect [objects]
       (when @canvas-kit
-        (do
-          (doseq [[_ object] objects]
-            (.paintRect ^js @canvas-kit (clj->js object))))))
+        (doseq [[_ object] objects]
+          (.paintRect ^js @canvas-kit (clj->js object)))))
 
     (mf/with-effect [canvas-ref]
       (let [canvas (mf/ref-val canvas-ref)]
         (when (some? canvas)
           (set! (.-width canvas) (.-clientWidth canvas))
           (set! (.-height canvas) (.-clientHeight canvas))
+          (println "init vbox" vbox)
           (-> (.initialize impl/CanvasKit "skia-canvas" vbox)
               (.then (fn [k]
                        (reset! canvas-kit k)))))))
diff --git a/frontend/src/app/main/ui/workspace/viewport/sk_impl.js b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js
index d37902590b..4d111418e0 100644
--- a/frontend/src/app/main/ui/workspace/viewport/sk_impl.js
+++ b/frontend/src/app/main/ui/workspace/viewport/sk_impl.js
@@ -19,28 +19,27 @@ class CanvasKit {
   paintRect(shape) {
     const surface = this.CanvasKit.MakeCanvasSurface(this.canvasId)
     
-    // Drawing fills
-    if (shape.fills) {
-      for (const fill of shape.fills) {
-        const paint = new this.CanvasKit.Paint();
-        paint.setStyle(this.CanvasKit.PaintStyle.Fill);
-        const color = this.CanvasKit.parseColorString(fill["fill-color"]);
-        const opacity = fill["fill-opacity"]
-        color[3] = opacity
-        paint.setColor(color);
-        const rr = this.CanvasKit.RRectXY(this.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), 0, 0);        
-        const self = this;
-
-        function draw(canvas) {
-          canvas.translate(- self.vbox.x, - self.vbox.y);
+    const self = this;
+    function draw(canvas) {
+      canvas.translate(- self.vbox.x, - self.vbox.y);
+      const paint = new self.CanvasKit.Paint();
+      // Drawing fills
+      if (shape.fills) {
+        for (const fill of shape.fills.reverse()) {          
+          paint.setStyle(self.CanvasKit.PaintStyle.Fill);
+          const color = self.CanvasKit.parseColorString(fill["fill-color"]);
+          const opacity = fill["fill-opacity"]
+          color[3] = opacity
+          paint.setColor(color);
+          const rr = self.CanvasKit.RRectXY(self.CanvasKit.LTRBRect(shape.x, shape.y, shape.x + shape.width, shape.y + shape.height), 0, 0);        
           canvas.drawRRect(rr, paint);
-          paint.delete();
         }
-
-        surface.drawOnce(draw);  
       }
+      paint.delete();
     }
-  
+
+    surface.drawOnce(draw);  
+
     // // Drawing another border
     // const paint2 = new this.CanvasKit.Paint();
     // paint2.setColor(this.CanvasKit.Color4f(0.9, 0, 1.0, 1.0));