[wab] Fix canvas viewport issues

* Make canvas padding a bit smaller so frames should always be visible. Padding is reduced from 100% to 95% of clipper size. * Added retries to some functions. This is a bit hacky and difficult to maintain. A rewrite/refactor of the transform code is due. * Fix adjustCanvasSize to retry if frames not rendered. * Fix setTranslate to retry if canvas too small. * Fix tryZoomToFitFrame to retry if target frame is not rendered. * Remove dead code like fixCanvas, artboardNavBarHeight, getDisplayArea. Change-Id: Ibb7388b34e91b867d7e1146d4048fcb99066a6c5 GitOrigin-RevId: 92012ec33ef3466037e75fa9c65300cb3640136e
plasmicapp · Jan 16, 2024 · c957d21 · c957d21
1 parent 577f8cc
commit c957d21
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 107 deletions.
diff --git a/platform/wab/src/wab/client/components/canvas/site-ops.tsx b/platform/wab/src/wab/client/components/canvas/site-ops.tsx
@@ -555,7 +555,6 @@ export class SiteOps {
 
   private fixChromeAfterRemoveFrame() {
     this.studioCtx.pruneInvalidViewCtxs();
-    this.studioCtx.fixCanvas();
   }
 
   moveFrameToArena(
@@ -574,7 +573,6 @@ export class SiteOps {
     );
 
     this.studioCtx.switchToArena(destinationArena);
-    this.studioCtx.tryZoomToFitArena();
   }
 
   updateImageAsset(asset: ImageAsset, image: ResizableImage) {

diff --git a/platform/wab/src/wab/client/components/studio/view-editor.tsx b/platform/wab/src/wab/client/components/studio/view-editor.tsx
@@ -2156,8 +2156,8 @@ class ViewEditor_ extends React.Component<ViewEditorProps, ViewEditorState> {
       !!(DEVFLAGS.richtext2 && this.viewCtx()?.editingTextContext()) ||
       (this.viewCtx()?.focusedTpls().length ?? 0) > 1;
 
-    const clipperBB = studioCtx.maybeClipperBB();
-    const canvasBB = studioCtx.canvasBB();
+    const canvasSize = studioCtx.canvasSize();
+    const canvasPadding = studioCtx.canvasPadding();
 
     return (
       <div className="canvas-editor">
@@ -2262,19 +2262,11 @@ class ViewEditor_ extends React.Component<ViewEditorProps, ViewEditorState> {
                 <div
                   className="canvas-editor__canvas"
                   style={{
-                    ...(canvasBB
-                      ? {
-                          height: `${canvasBB.height()}px`,
-                          width: `${canvasBB.width()}px`,
-                          // The padding controls how far the clipper (viewport)
-                          // can be scrolled from the canvas.
-                          ...(clipperBB
-                            ? {
-                                padding: `${clipperBB.height}px ${clipperBB.width}px`,
-                              }
-                            : {}),
-                        }
-                      : {}),
+                    height: `${canvasSize.height()}px`,
+                    width: `${canvasSize.width()}px`,
+                    // The padding controls how far the clipper (viewport)
+                    // can be scrolled from the canvas.
+                    padding: `${canvasPadding.vertical}px ${canvasPadding.horizontal}px`,
                   }}
                 >
                   <div className="canvas-editor__scaler">