✨ Rename to render-wasm and make it load using dynamic import

frontend/render-v2/build.sh

@@ -1,3 +0,0 @@
-#!/bin/bash
-EMSDK_QUIET=1 . "/usr/local/emsdk/emsdk_env.sh"
-EMCC_CFLAGS="--no-entry -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s MAX_WEBGL_VERSION=2 -s MODULARIZE=1 -s EXPORT_NAME=createRustSkiaModule -s EXPORTED_RUNTIME_METHODS=GL -s ENVIRONMENT=web" cargo build --target=wasm32-unknown-emscripten

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -50,7 +50,7 @@
    [app.main.ui.workspace.viewport.utils :as utils]
    [app.main.ui.workspace.viewport.viewport-ref :refer [create-viewport-ref]]
    [app.main.ui.workspace.viewport.widgets :as widgets]
-   [app.render-v2 :as render-v2]
+   [app.render-wasm :as render.wasm]
    [app.util.debug :as dbg]
    [beicon.v2.core :as rx]
    [promesa.core :as p]
@@ -140,7 +140,7 @@
          on-viewport-ref] (create-viewport-ref)
 
         canvas-ref        (mf/use-ref nil)
-        canvas-init?      (mf/use-ref false)
+        canvas-init       (mf/use-ref false)
 
         ;; VARS
         disable-paste     (mf/use-var false)
@@ -274,17 +274,20 @@
 
         rule-area-size (/ rulers/ruler-area-size zoom)]
 
-    (when (render-v2/enabled?)
+    (when ^boolean render.wasm/enabled?
-      ;; set up canvas and first render
+      (mf/with-effect []
-      (mf/with-effect
+        (when-let [canvas (mf/ref-val canvas-ref)]
-        [canvas-ref vbox']
+          (->> render.wasm/module
-        (let [canvas (mf/ref-val canvas-ref)]
+               (p/fmap (fn [ready?]
-          (when (and (some? canvas) (some? vbox'))
+                         (when ready?
-            (-> (p/then (render-v2/init)
+                           (mf/set-ref-val! canvas-init true)
-                        (fn []
+                           (render.wasm/assign-canvas canvas)))))
-                          (mf/set-ref-val! canvas-init? true)
+          (fn []
-                          (render-v2/set-canvas canvas vbox' zoom base-objects)))
+            (render.wasm/clear-canvas))))
-                (p/catch (fn [error] (js/console.error error))))))))
+
+      (mf/with-effect [vbox' base-objects]
+        (when (mf/ref-val canvas-init)
+          (render.wasm/draw-objects base-objects zoom vbox'))))
 
     (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool drawing-path?)
     (hooks/setup-viewport-size vport viewport-ref)
@@ -329,11 +332,11 @@
                                          :layout layout
                                          :viewport-ref viewport-ref}])]
 
-     (if (render-v2/enabled?)
+     (if ^boolean render.wasm/enabled?
        [:canvas {:id "render"
                  :ref canvas-ref
                  :class (stl/css :render-shapes)
-                 :key (str "render" page-id)
+                 :key (dm/str "render" page-id)
                  :width (:width vport 0)
                  :height (:height vport 0)
                  :style {:background-color background

frontend/src/app/render_v2.cljs

@@ -1,60 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.render-v2
-  (:require
-   ["./render_v2.js" :as render-v2]
-   [app.config :as cf]
-   [goog.object :as gobj]
-   [promesa.core :as p]))
-
-(defn enabled?
-  []
-  (contains? cf/flags :render-v2))
-
-(defonce ^:dynamic internal-module #js {})
-(defonce ^:dynamic gpu-state #js {})
-
-(defn draw-canvas [vbox zoom objects]
-  (let [draw-rect (gobj/get ^js internal-module "_draw_rect")
-        translate (gobj/get ^js internal-module "_translate")
-        reset-canvas (gobj/get ^js internal-module "_reset_canvas")
-        scale (gobj/get ^js internal-module "_scale")
-        flush (gobj/get ^js internal-module "_flush")]
-    (js/requestAnimationFrame (fn []
-                                (reset-canvas gpu-state)
-                                (scale gpu-state zoom zoom)
-                                (translate gpu-state (- (:x vbox)) (- (:y vbox)))
-                                (doseq [shape (vals objects)]
-                                  (let [sr (:selrect shape)]
-                                    (draw-rect gpu-state (:x1 sr) (:y1 sr) (:x2 sr) (:y2 sr))))
-                                (flush gpu-state)))))
-
-(defn set-canvas
-  [canvas vbox zoom objects]
-  (let [gl (gobj/get ^js internal-module "GL")
-        context (.getContext canvas "webgl2" {"antialias" true
-                                              "depth" true
-                                              "stencil" true
-                                              "alpha" true})
-        ;; Register the context with emscripten
-        handle (.registerContext gl context {"majorVersion" 2})
-        _ (.makeContextCurrent gl handle)
-        ;; Initialize Skia
-        state (._init ^js internal-module (.-width canvas) (.-height canvas))]
-
-    (set! (.-width canvas) (.-clientWidth canvas))
-    (set! (.-height canvas) (.-clientHeight canvas))
-    (set! gpu-state state))
-  (draw-canvas vbox zoom objects))
-
-(defn on-init
-  [module']
-  (set! internal-module module'))
-
-(defn init
-  []
-  (p/then (render-v2) #(on-init %)))

frontend/src/app/render_wasm.cljs

@@ -0,0 +1,88 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.render-wasm
+  "A WASM based render API"
+  (:require
+   [app.common.data.macros :as dm]
+   [app.config :as cf]
+   [promesa.core :as p]))
+
+(def enabled?
+  (contains? cf/flags :render-wasm))
+
+(defonce ^:dynamic internal-module #js {})
+(defonce ^:dynamic internal-gpu-state #js {})
+
+(defn draw-objects [objects zoom vbox]
+  (let [draw-rect    (unchecked-get internal-module "_draw_rect")
+        translate    (unchecked-get internal-module "_translate")
+        reset-canvas (unchecked-get internal-module "_reset_canvas")
+        scale        (unchecked-get internal-module "_scale")
+        flush        (unchecked-get internal-module "_flush")
+        gpu-state    internal-gpu-state]
+
+    (js/requestAnimationFrame
+     (fn []
+       (reset-canvas gpu-state)
+       (scale gpu-state zoom zoom)
+
+       (let [x (dm/get-prop vbox :x)
+             y (dm/get-prop vbox :y)]
+         (translate gpu-state (- x) (- y)))
+
+       (run! (fn [shape]
+               (let [selrect (dm/get-prop shape :selrect)
+                     x1      (dm/get-prop selrect :x1)
+                     y1      (dm/get-prop selrect :y1)
+                     x2      (dm/get-prop selrect :x2)
+                     y2      (dm/get-prop selrect :y2)]
+                 (draw-rect gpu-state x1 y1 x2 y2)))
+             (vals objects))
+
+       (flush gpu-state)))))
+
+(def canvas-options
+  #js {:antialias true
+       :depth true
+       :stencil true
+       :alpha true})
+
+(defn clear-canvas
+  []
+  ;; TODO: perform corresponding cleaning
+  )
+
+(defn assign-canvas
+  [canvas]
+  (let [gl      (unchecked-get internal-module "GL")
+        init-fn (unchecked-get internal-module "_init")
+
+        context (.getContext ^js canvas "webgl2" canvas-options)
+
+        ;; Register the context with emscripten
+        handle  (.registerContext ^js gl context #js {"majorVersion" 2})
+        _       (.makeContextCurrent ^js gl handle)
+
+        ;; Initialize Skia
+        state   (init-fn (.-width ^js canvas)
+                         (.-height ^js canvas))]
+
+    (set! (.-width canvas) (.-clientWidth ^js canvas))
+    (set! (.-height canvas) (.-clientHeight ^js canvas))
+    (set! internal-gpu-state state)))
+
+(defonce module
+  (->> (js/dynamicImport "/js/render_wasm.js")
+       (p/mcat (fn [module]
+                 (let [default (unchecked-get module "default")]
+                   (default))))
+       (p/fmap (fn [module]
+                 (set! internal-module module)
+                 true))
+       (p/merr (fn [cause]
+                 (js/console.error cause)
+                 (p/resolved false)))))

render-wasm/Cargo.toml

@@ -3,11 +3,11 @@ name = "render"
 version = "0.1.0"
 edition = "2021"
 repository = "https://github.com/penpot/penpot"
-license-file = "../../../../LICENSE"
+license-file = "../LICENSE"
 description = "Wasm-based canvas renderer for Penpot"
 
 [[bin]]
-name = "render_v2"
+name = "render_wasm"
 path = "src/main.rs"
 
 [dependencies]

render-wasm/build

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+
+export _BUILD_MODE=${1:-debug};
+
+export EMSDK_QUIET=1
+export EMCC_CFLAGS="--no-entry -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s MAX_WEBGL_VERSION=2 -s MODULARIZE=1 -s EXPORT_NAME=createRustSkiaModule -s EXPORTED_RUNTIME_METHODS=GL -s ENVIRONMENT=web -s EXPORT_ES6=1 -sMODULARIZE"
+
+source /usr/local/emsdk/emsdk_env.sh;
+
+set -x
+
+_SCRIPT_DIR=$(dirname $0);
+_CARGO_PARAMS="--target=wasm32-unknown-emscripten";
+
+if [ "$_BUILD_MODE" = "release" ]; then
+    _CARGO_PARAMS="--release $_CARGO_PARAMS"
+fi
+
+pushd $_SCRIPT_DIR;
+cargo build $_CARGO_PARAMS
+
+cp target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.js ../frontend/resources/public/js/
+cp target/wasm32-unknown-emscripten/$_BUILD_MODE/render_wasm.wasm ../frontend/resources/public/js/
+
+popd