feat(playground): add scrollDisable and zoomDisable (#661)

apps/demo-free-layout/src/hooks/use-editor-props.tsx

@@ -237,7 +237,7 @@ export function useEditorProps(
       /**
        * Playground init
        */
-      onInit() {
+      onInit(ctx) {
         console.log('--- Playground init ---');
       },
       /**

packages/canvas-engine/core/__tests__/playground.test.ts

@@ -45,7 +45,7 @@ describe('playground', () => {
       playgroundConfig.getPosFromMouseEvent({
         clientX: 200,
         clientY: 200,
-      }),
+      })
     ).toMatchSnapshot();
     expect(
       playgroundConfig.getPosFromMouseEvent(
@@ -53,14 +53,14 @@ describe('playground', () => {
           clientX: 200,
           clientY: 200,
         },
-        false,
-      ),
+        false
+      )
     ).toMatchSnapshot();
     expect(
       playgroundConfig.toFixedPos({
         x: 200,
         y: 200,
-      }),
+      })
     ).toMatchSnapshot();
     expect(playgroundConfig.getViewport()).toMatchSnapshot();
     expect(playgroundConfig.getViewport(false)).toMatchSnapshot();
@@ -108,10 +108,38 @@ describe('playground', () => {
     const renderer = playground.pipelineRegistry.renderer;
 
     // 设置每一个 layer 都渲染完成，mock TTI 上报
-    renderer.layers.forEach(layer => {
+    renderer.layers.forEach((layer) => {
       renderer.reportLayerRendered(layer);
     });
-    const allLayersRendered = Array.from(renderer.layerRenderedMap.values()).every(v => v);
+    const allLayersRendered = Array.from(renderer.layerRenderedMap.values()).every((v) => v);
     expect(allLayersRendered).toEqual(true);
   });
+  it('scrollDisable', () => {
+    const playground = createPlayground();
+    playground.config.scrollDisable = true;
+    playground.config.updateConfig({
+      scrollX: 10000,
+      scrollY: 10000,
+    });
+    expect(playground.config.scrollData).toEqual({ scrollX: 0, scrollY: 0 });
+    playground.config.scrollDisable = false;
+    playground.config.updateConfig({
+      scrollX: 10000,
+      scrollY: 10000,
+    });
+    expect(playground.config.scrollData).toEqual({ scrollX: 10000, scrollY: 10000 });
+  });
+  it('zoomDisable', () => {
+    const playground = createPlayground();
+    playground.config.zoomDisable = true;
+    playground.config.updateConfig({
+      zoom: 1.3,
+    });
+    expect(playground.config.zoom).toEqual(1);
+    playground.config.zoomDisable = false;
+    playground.config.updateConfig({
+      zoom: 1.3,
+    });
+    expect(playground.config.zoom).toEqual(1.3);
+  });
 });

packages/canvas-engine/core/src/core/layer/config/playground-config-entity.ts

@@ -37,7 +37,9 @@ export interface PlaygroundConfigEntityData {
   pageBounds?: { x: number; y: number; width: number; height: number } // 编辑的画布边框，用于处理外部对齐问题
   disabled: boolean // 禁用状态
   readonly: boolean // readonly 状态
+  scrollDisable: boolean
   grabDisable: boolean // 禁用抓取拖拽画布能力
+  zoomDisable: boolean
 }
 
 export interface PlaygroundConfigRevealOpts {
@@ -98,6 +100,22 @@ export class PlaygroundConfigEntity extends ConfigEntity<PlaygroundConfigEntityD
       grabDisable
     })
   }
+  get scrollDisable(): boolean {
+    return this.config.scrollDisable;
+  }
+  set scrollDisable(scrollDisable: boolean) {
+    this.updateConfig({
+      scrollDisable
+    })
+  }
+  get zoomDisable(): boolean {
+    return this.config.zoomDisable;
+  }
+  set zoomDisable(zoomDisable: boolean) {
+    this.updateConfig({
+      zoomDisable
+    })
+  }
   getDefaultConfig(): PlaygroundConfigEntityData {
     return {
       scrollX: 0,
@@ -117,6 +135,8 @@ export class PlaygroundConfigEntity extends ConfigEntity<PlaygroundConfigEntityD
       disabled: false,
       readonly: false,
       grabDisable: false,
+      scrollDisable: false,
+      zoomDisable: false,
       mouseScrollDelta: MOUSE_SCROLL_DELTA
     }
   }
@@ -158,7 +178,12 @@ export class PlaygroundConfigEntity extends ConfigEntity<PlaygroundConfigEntityD
     if (props.overflowY === 'hidden') {
       props.scrollY = this.config.originY
     }
+    const scrollDisable = props.scrollDisable || this.scrollDisable
     const { readonly, disabled, grabDisable } = this
+    if (scrollDisable) {
+      props.scrollX = this.config.scrollX
+      props.scrollY = this.config.scrollY
+    }
     super.updateConfig(
       this._scrollLimitFn
         ? { ...props, ...this._scrollLimitFn({ scrollX: props.scrollX!, scrollY: props.scrollY! }) }
@@ -196,6 +221,7 @@ export class PlaygroundConfigEntity extends ConfigEntity<PlaygroundConfigEntityD
 
   protected normalizeZoom(zoom: number): number {
     if (!this.zoomEnable) return 1
+    if (this.zoomDisable) return this.config.zoom;
     if (zoom < this.config.minZoom) {
       zoom = this.config.minZoom
     } else if (zoom > this.config.maxZoom) {
@@ -477,13 +503,16 @@ export class PlaygroundConfigEntity extends ConfigEntity<PlaygroundConfigEntityD
     }
   }
 
+  /**
+   * @deprecated use 'zoomDisable' instead
+   */
   get zoomEnable(): boolean {
     return this._zoomEnable
   }
 
   /**
    * 开启缩放
-   * @param zoomEnable
+   * @deprecated use 'zoomDisable' instead
    */
   set zoomEnable(zoomEnable: boolean) {
     if (this._zoomEnable !== zoomEnable) {

packages/client/editor/src/preset/editor-props.ts

@@ -94,6 +94,7 @@ export interface EditorProps<
   scroll?: {
     enableScrollLimit?: boolean; // 开启滚动限制
     disableScrollBar?: boolean; //  关闭滚动条
+    disableScroll?: boolean; // 禁止滚动
   };
 
   /**

packages/client/fixed-layout-editor/src/preset/fixed-layout-preset.ts

@@ -154,6 +154,9 @@ export function createFixedLayoutPreset(
             // 控制条
             ctx.playground.registerLayer(FlowScrollBarLayer);
           }
+          if (opts.scroll?.disableScroll) {
+            ctx.playground.config.scrollDisable = true;
+          }
           if (opts.nodeRegistries) {
             ctx.document.registerFlowNodes(...opts.nodeRegistries);
           }

packages/client/free-layout-editor/src/preset/free-layout-preset.ts

@@ -197,6 +197,9 @@ export function createFreeLayoutPreset(
             // 控制条
             ctx.playground.registerLayer(FlowScrollBarLayer);
           }
+          if (opts.scroll?.disableScroll) {
+            ctx.playground.config.scrollDisable = true;
+          }
           if (opts.onContentChange) {
             ctx.document.onContentChange((event) => opts.onContentChange!(ctx, event));
           }