Performance improvements.

mydraft-cc · Nov 17, 2024 · b583158 · b583158
1 parent 7339a7d
commit b583158
Show file tree

Hide file tree

Showing 13 changed files with 411 additions and 389 deletions.
diff --git a/src/wireframes/engine/canvas.tsx b/src/wireframes/engine/canvas.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 import { ViewBox } from '@app/core';
 import { Engine } from './interface';
 
-export interface CanvasProps {
+export interface CanvasProps<T = Engine> {
     // The optional viewbox.
     viewBox?: ViewBox;
 
@@ -20,5 +20,5 @@ export interface CanvasProps {
     style?: React.CSSProperties;
 
     // The callback when the canvas has been initialized.
-    onInit: (engine: Engine) => any;
+    onInit: (engine: T) => any;
 }
diff --git a/src/wireframes/engine/elements.stories.tsx b/src/wireframes/engine/elements.stories.tsx
@@ -56,29 +56,6 @@ const CompareView = (props: Omit<EngineProps, 'viewBox'>) => {
     );
 };
 
-const CompareCanvasViews = (props: Omit<EngineProps, 'viewBox'>) => {
-    return (
-        <Row gutter={16}>
-            <Col span={12}>
-                <Card title='SVG'>
-                    <Canvas padding={0} contentWidth={500} contentHeight={500}
-                        onRender={viewBox => 
-                            <EngineCanvas viewBox={viewBox} canvasView={SvgCanvasView} {...props} />
-                        } />
-                </Card>
-            </Col>
-            <Col span={12}>
-                <Card title='PIXI'>
-                    <Canvas padding={0} contentWidth={500} contentHeight={500}
-                        onRender={viewBox => 
-                            <EngineCanvas viewBox={viewBox} canvasView={PixiCanvasView as any} {...props} />
-                        } />
-                </Card>
-            </Col>
-        </Row>
-    );
-};
-
 const HitTestForCanvas = (props: { canvasView: React.ComponentType<CanvasProps> }) => {
     const [engine, setEngine] = React.useState<Engine>();
     const [relativeX, setRelativeX] = React.useState(0);
@@ -168,29 +145,6 @@ export const Hits = () => {
     );
 };
 
-export const Pan = () => {
-    return (
-        <CompareCanvasViews
-            onRender={(engine) => {
-                const layer = engine.layer('layer1');
-
-                const rect = layer.rect();
-                rect.fill('blue');
-                rect.strokeColor('red');
-                rect.strokeWidth(2);
-                rect.plot({ x: 200, y: 250, w: 200, h: 100 });
-
-                const text = layer.text();
-                text.color('white');
-                text.fill('black');
-                text.fontFamily('Arial');
-                text.fontSize(16);
-                text.text('Hello Engine');
-                text.plot({ x: 50, y: 100, w: 200, h: 60, padding: 5 });
-            }} />
-    );
-};
-
 export const Rect = () => {
     return (
         <CompareView

diff --git a/src/wireframes/engine/pixi/canvas/PixiCanvas.tsx b/src/wireframes/engine/pixi/canvas/PixiCanvas.tsx
@@ -8,24 +8,10 @@
 import { Application } from 'pixi.js';
 import * as React from 'react';
 import { SizeMeProps, withSize } from 'react-sizeme';
-import { ViewBox } from '@app/core';
+import { CanvasProps } from './../../canvas';
 import { PixiEngine } from './../engine';
 
-export interface PixiCanvasProps {
-    // The optional viewbox.
-    viewBox: ViewBox;
-
-    // The class name.
-    className?: string;
-
-    // The CSS properties.
-    style?: React.CSSProperties;
-
-    // The callback when the canvas has been initialized.
-    onInit: (engine: PixiEngine) => any;
-}
-
-const PixiCanvasViewComponent = (props: PixiCanvasProps & SizeMeProps) => {
+const PixiCanvasViewComponent = (props: CanvasProps<PixiEngine> & SizeMeProps) => {
     const {
         className,
         onInit,

diff --git a/src/wireframes/engine/pixi/item.ts b/src/wireframes/engine/pixi/item.ts
@@ -1,3 +1,4 @@
+
 /*
  * mydraft.cc
  *
@@ -18,6 +19,7 @@ export class PixiItem extends PixiObject implements EngineItem {
     private readonly container: Container;
     private readonly selector: Graphics;
     private currentShape: DiagramItem | null = null;
+    private currentRect: Rect2 | null = null;
     private isRendered = false;
 
     protected get root() {
@@ -66,18 +68,25 @@ export class PixiItem extends PixiObject implements EngineItem {
         }
     }
 
-    private renderCore(item: DiagramItem) {
-        const localRect = new Rect2(0, 0, item.transform.size.x, item.transform.size.y);
+    private renderCore(shape: DiagramItem) {
+        const localRect = new Rect2(0, 0, shape.transform.size.x, shape.transform.size.y);
+
+        if (this.currentRect && 
+            this.currentRect.equals(localRect) && 
+            this.currentShape?.appearance === shape.appearance) {
+            this.arrangeContainer(shape);
+            return;
+        }
 
         const previousContainer = this.renderer.getContainer();
         try {
             this.renderer.setContainer(this.container, 1);
-
-            this.plugin.render({ renderer2: this.renderer, rect: localRect, shape: item });
+            this.plugin.render({ renderer2: this.renderer, rect: localRect, shape: shape });
 
             this.arrangeSelector(localRect);
-            this.arrangeContainer(item);
+            this.arrangeContainer(shape);
         } finally {
+            this.currentRect = localRect;
             this.renderer.cleanupAll();
             this.renderer.setContainer(previousContainer);
             this.isRendered = true;