re-render canvas when panning (rust)

frontend/render_v2/rs/src/main.rs

@@ -2,7 +2,7 @@ use std::boxed::Box;
 
 use skia_safe::{
     gpu::{self, gl::FramebufferInfo, DirectContext},
-  Color, Paint, PaintStyle, Surface, Rect
+    Color, Paint, PaintStyle, Rect, Surface,
 };
 
 extern "C" {
@@ -93,7 +93,9 @@ fn render_rect(surface: &mut Surface, left: f32, top: f32, right: f32, bottom: f
     paint.set_style(PaintStyle::Fill);
     paint.set_color(Color::BLACK);
     paint.set_anti_alias(true);
-  surface.canvas().draw_rect(Rect::new(left, top, right, bottom), &paint);
+    surface
+        .canvas()
+        .draw_rect(Rect::new(left, top, right, bottom), &paint);
 }
 
 /// This is called from JS after the WebGL context has been created.
@@ -117,10 +119,22 @@ pub unsafe extern "C" fn resize_surface(state: *mut State, width: i32, height: i
 /// Draw a black rect at the specified coordinates.
 /// # Safety
 #[no_mangle]
-pub unsafe extern "C" fn draw_rect(state: *mut State, left: i32, right: i32, top: i32, bottom: i32) {
+pub unsafe extern "C" fn draw_rect(
+    state: *mut State,
+    left: i32,
+    right: i32,
+    top: i32,
+    bottom: i32,
+) {
     let state = unsafe { state.as_mut() }.expect("got an invalid state pointer");
     //state.surface.canvas().clear(Color::WHITE);
-    render_rect(&mut state.surface, left as f32, right as f32, top as f32, bottom as f32);
+    render_rect(
+        &mut state.surface,
+        left as f32,
+        right as f32,
+        top as f32,
+        bottom as f32,
+    );
     state
         .gpu_state
         .context
@@ -137,6 +151,11 @@ pub unsafe extern "C" fn scale(state: *mut State, sx: f32, sy: f32) {
     (*state).surface.canvas().scale((sx, sy));
 }
 
+#[no_mangle]
+pub unsafe extern "C" fn reset_canvas(state: *mut State) {
+    (*state).surface.canvas().reset_matrix();
+}
+
 fn main() {
     init_gl();
 }

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

@@ -271,13 +271,19 @@
         rule-area-size (/ rulers/ruler-area-size zoom)]
 
     (when (render-v2/is-enabled?)
+      ;; set up canvas and first render
       (mf/with-effect
         [canvas-ref vbox' @canvas-set? base-objects]
         (let [canvas (mf/ref-val canvas-ref)]
           (when (and (some? vbox') (not @canvas-set?))
-            (swap! canvas-set? true)
+            (p/then (render-v2/init) (fn []
-            (p/then (render-v2/init)
+              (render-v2/set-canvas canvas vbox' base-objects)
-                    #(render-v2/set-canvas canvas vbox' base-objects))))))
+              (swap! canvas-set? true))))))
+      ;; redraw when vbox or shapes change
+      (mf/with-effect
+        [vbox' base-objects canvas-set?]
+        (when @canvas-set?
+          (render-v2/draw-canvas vbox' base-objects))))
 
     (hooks/setup-dom-events zoom disable-paste in-viewport? workspace-read-only? drawing-tool drawing-path?)
     (hooks/setup-viewport-size vport viewport-ref)

frontend/src/app/render_v2.cljs

@@ -36,3 +36,9 @@
     ;; Rust
     (contains? cf/flags :render-v2-rs)
     (render-v2-rs/set-canvas canvas vbox base-objects)))
+
+(defn draw-canvas [vbox base-objects]
+  (cond
+    ;; Rust
+    (contains? cf/flags :render-v2-rs)
+    (render-v2-rs/draw-canvas vbox base-objects)))

frontend/src/app/render_v2/rs.cljs

@@ -17,16 +17,17 @@
 (defonce ^:dynamic gpu-state #js {})
 
 (defn draw-canvas [vbox objects]
-  (let [draw_rect (gobj/get ^js internal-module "_draw_rect")
+  (let [draw-rect (gobj/get ^js internal-module "_draw_rect")
         translate (gobj/get ^js internal-module "_translate")
-        _ (js/console.log "vbox " (clj->js vbox))
+        reset-canvas (gobj/get ^js internal-module "_reset_canvas")
         scale (gobj/get ^js internal-module "_scale")]
 
+        (reset-canvas gpu-state)
         (translate gpu-state (- (:x vbox)) (- (:y vbox)))
         (doseq [shape (vals objects)]
           (let [sr (:selrect shape)]
             (println "*****" (:x1 sr) (:y1 sr) (:x2 sr) (:y2 sr))
-            (draw_rect gpu-state (:x1 sr) (:y1 sr) (:x2 sr) (:y2 sr))))))
+            (draw-rect gpu-state (:x1 sr) (:y1 sr) (:x2 sr) (:y2 sr))))))
 
 (defn set-canvas
   [canvas vbox objects]

frontend/src/app/render_v2/rs.js

@@ -28,7 +28,7 @@ var readyPromise = new Promise((resolve, reject) => {
   readyPromiseResolve = resolve;
   readyPromiseReject = reject;
 });
-["_add","_draw_rect","_init","_main","_resize_surface","_scale","_translate","getExceptionMessage","incrementExceptionRefcount","decrementExceptionRefcount","_memory","___indirect_function_table","onRuntimeInitialized"].forEach((prop) => {
+["_add","_draw_rect","_init","_main","_reset_canvas","_resize_surface","_scale","_translate","getExceptionMessage","incrementExceptionRefcount","decrementExceptionRefcount","_memory","___indirect_function_table","onRuntimeInitialized"].forEach((prop) => {
   if (!Object.getOwnPropertyDescriptor(readyPromise, prop)) {
     Object.defineProperty(readyPromise, prop, {
       get: () => abort('You are getting ' + prop + ' on the Promise object, instead of the instance. Use .then() to get called back with the instance, see the MODULARIZE docs in src/settings.js'),
@@ -8567,6 +8567,7 @@ var _resize_surface = Module['_resize_surface'] = createExportWrapper('resize_su
 var _draw_rect = Module['_draw_rect'] = createExportWrapper('draw_rect', 5);
 var _translate = Module['_translate'] = createExportWrapper('translate', 3);
 var _scale = Module['_scale'] = createExportWrapper('scale', 3);
+var _reset_canvas = Module['_reset_canvas'] = createExportWrapper('reset_canvas', 1);
 var _main = Module['_main'] = createExportWrapper('main', 2);
 var _fflush = createExportWrapper('fflush', 1);
 var _free = createExportWrapper('free', 1);
@@ -8612,10 +8613,10 @@ var dynCall_iiiiij = Module['dynCall_iiiiij'] = createExportWrapper('dynCall_iii
 var dynCall_iiiiijj = Module['dynCall_iiiiijj'] = createExportWrapper('dynCall_iiiiijj', 9);
 var dynCall_iiiiiijj = Module['dynCall_iiiiiijj'] = createExportWrapper('dynCall_iiiiiijj', 10);
 
-function invoke_vii(index,a1,a2) {
+function invoke_iii(index,a1,a2) {
   var sp = stackSave();
   try {
-    getWasmTableEntry(index)(a1,a2);
+    return getWasmTableEntry(index)(a1,a2);
   } catch(e) {
     stackRestore(sp);
     if (!(e instanceof EmscriptenEH)) throw e;
@@ -8634,6 +8635,17 @@ function invoke_ii(index,a1) {
   }
 }
 
+function invoke_vii(index,a1,a2) {
+  var sp = stackSave();
+  try {
+    getWasmTableEntry(index)(a1,a2);
+  } catch(e) {
+    stackRestore(sp);
+    if (!(e instanceof EmscriptenEH)) throw e;
+    _setThrew(1, 0);
+  }
+}
+
 function invoke_viii(index,a1,a2,a3) {
   var sp = stackSave();
   try {
@@ -8656,10 +8668,10 @@ function invoke_vi(index,a1) {
   }
 }
 
-function invoke_iii(index,a1,a2) {
+function invoke_iiii(index,a1,a2,a3) {
   var sp = stackSave();
   try {
-    return getWasmTableEntry(index)(a1,a2);
+    return getWasmTableEntry(index)(a1,a2,a3);
   } catch(e) {
     stackRestore(sp);
     if (!(e instanceof EmscriptenEH)) throw e;
@@ -8700,17 +8712,6 @@ function invoke_viffff(index,a1,a2,a3,a4,a5) {
   }
 }
 
-function invoke_iiii(index,a1,a2,a3) {
-  var sp = stackSave();
-  try {
-    return getWasmTableEntry(index)(a1,a2,a3);
-  } catch(e) {
-    stackRestore(sp);
-    if (!(e instanceof EmscriptenEH)) throw e;
-    _setThrew(1, 0);
-  }
-}
-
 function invoke_iiiii(index,a1,a2,a3,a4) {
   var sp = stackSave();
   try {