Temp

mydraft-cc · Nov 29, 2024 · 362232b · 362232b
1 parent ca715e1
commit 362232b
Show file tree

Hide file tree

Showing 20 changed files with 320 additions and 213 deletions.
diff --git a/src/style/_vars.scss b/src/style/_vars.scss
@@ -9,7 +9,7 @@ $color-title:               #000;
 $color-text:                #373a3c;
 $color-text-decent:         #a9b2bb;
 $color-tooltip:             #1a2129;
-$color-input:                 #d9d9d9;
+$color-input:               #d9d9d9;
 
 $color-theme-blue:          #3389ff;
 $color-theme-blue-dark:     #297ff6;

diff --git a/src/texts/en.ts b/src/texts/en.ts
@@ -32,6 +32,7 @@ export const texts = {
         distributeHorizontally: 'Distribute Horizontally',
         distributeVertically: 'Distribute Vertically',
         duplicate: 'Duplicate',
+        experimental: 'Experimental',
         findIcon: 'Find Icon',
         findPage: 'Find Page',
         findShape: 'Find Shape',
@@ -95,5 +96,7 @@ export const texts = {
         width: 'Width',
         zoomIn: 'Zoom In',
         zoomOut: 'Zoom Out',
+        webGL: 'Web GL',
+        webGLHints: 'Use WebGL as alternative renderer. Requires restart',
     },
 };
diff --git a/src/wireframes/components/EditorView.tsx b/src/wireframes/components/EditorView.tsx
@@ -44,8 +44,8 @@ export const EditorViewInner = ({ diagram, viewBox }: { diagram: Diagram; viewBo
     const editorColor = editor.color;
     const masterDiagram = useStore(getMasterDiagram);
     const renderRef = React.useRef<any>();
-    const selectedPoint = React.useRef({ x: 0, y: 0 });
     const selectedDiagramId = useStore(getDiagramId);
+    const selectedPoint = React.useRef({ x: 0, y: 0 });
     const state = useStore(s => s);
     const contextMenu = useContextMenu(menuVisible);
 
@@ -168,6 +168,7 @@ export const EditorViewInner = ({ diagram, viewBox }: { diagram: Diagram; viewBo
                         onSelectItems={doSelectItems}
                         onTransformItems={doTransformItems}
                         selectionSet={getSelection(state)}
+                        useWebGL={state.ui.useWebGL}
                         viewBox={viewBox}
                         viewSize={editor.size}
                     />

diff --git a/src/wireframes/components/properties/Experimental.tsx b/src/wireframes/components/properties/Experimental.tsx
@@ -0,0 +1,34 @@
+/*
+ * mydraft.cc
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved.
+*/
+
+import { Checkbox, Col, Row } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import * as React from 'react';
+import { useAppDispatch } from '@app/store';
+import { texts } from '@app/texts';
+import { toggleWebGL, useStore } from '@app/wireframes/model';
+
+export const Experimental = () => {
+    const dispatch = useAppDispatch();
+    const useWebGL = useStore(x => x.ui.useWebGL);
+
+    const doChangeWebGL = React.useCallback((event: CheckboxChangeEvent) => {
+        dispatch(toggleWebGL(event.target.checked));
+    }, [dispatch]);
+
+    return (
+        <Row className='property'>
+            <Col span={12} className='property-label'>{texts.common.webGL}</Col>
+            <Col span={12} className='property-value'>
+                <Checkbox checked={useWebGL}
+                    onChange={doChangeWebGL} />
+
+                <div>{texts.common.webGLHints}</div>
+            </Col>
+        </Row>
+    );
+};
diff --git a/src/wireframes/components/properties/Properties.tsx b/src/wireframes/components/properties/Properties.tsx
@@ -13,6 +13,7 @@ import { getDiagram, getSelection, useStore } from '@app/wireframes/model';
 import { Colors } from './Colors';
 import { CustomProperties } from './CustomProperties';
 import { DiagramProperties } from './DiagramProperties';
+import { Experimental } from './Experimental';
 import { LayoutProperties } from './LayoutProperties';
 import { MoreProperties } from './MoreProperties';
 import { TransformProperties } from './TransformProperties';
@@ -58,6 +59,11 @@ const diagramItems: CollapseProps['items'] = [
         label: texts.common.colors,
         children: <Colors />,
     },
+    {
+        key: 'experimental',
+        label: texts.common.experimental,
+        children: <Experimental />,
+    },
 ];
 
 export const Properties = () => {

diff --git a/src/wireframes/engine/elements.stories.tsx b/src/wireframes/engine/elements.stories.tsx
@@ -34,7 +34,10 @@ const EngineCanvas = (props: EngineProps & { canvasView: React.ComponentType<Can
 
     return (
         <div style={{ height: '500px', overflow: 'hidden' }}>
-            <props.canvasView style={{ height: '500px', overflow: 'hidden' }} viewBox={props.viewBox} onInit={setEngine} />
+            <Canvas padding={0} contentWidth={500} contentHeight={500}
+                onRender={viewBox => 
+                    <props.canvasView style={{ height: '500px', overflow: 'hidden' }} viewBox={viewBox} onInit={setEngine} />
+                } />
         </div>
     );
 };
@@ -234,22 +237,23 @@ export const Pivot = () => {
                 const ry = 300;
                 const size = 40;
 
-                const renderCircle = (dx: number, dy: number, fill: string) => {
+                const renderCircle = (dx: number, dy: number, angle: number, fill: string) => {
                     const hs = 0.5 * size;
 
                     const circle = layer.ellipse();
                     circle.fill(fill);
                     circle.strokeColor('black');
                     circle.strokeWidth(2);
+                    circle.cursor(angle);
                     circle.plot({ x: rx - hs + dx, y: ry - hs + dy, w: size, h: size, rx, ry, rotation: 30 });
                 };
 
-                renderCircle(0, 0, 'blue');
+                renderCircle(0, 0, 0, 'blue');
 
-                renderCircle(-100, -100, 'orange');
-                renderCircle(+100, -100, 'purple');
-                renderCircle(+100, +100, 'green');
-                renderCircle(-100, +100, 'red');
+                renderCircle(-100, -100, 315, 'orange');
+                renderCircle(+100, -100, 45, 'purple');
+                renderCircle(+100, +100, 135, 'green');
+                renderCircle(-100, +100, 225, 'red');
             }}
         />
     );

diff --git a/src/wireframes/engine/pixi/canvas/PixiCanvas.tsx b/src/wireframes/engine/pixi/canvas/PixiCanvas.tsx
@@ -11,14 +11,15 @@ import { SizeMeProps, withSize } from 'react-sizeme';
 import { CanvasProps } from './../../canvas';
 import { PixiEngine } from './../engine';
 
-const PixiCanvasViewComponent = (props: CanvasProps<PixiEngine> & SizeMeProps) => {
+const PixiCanvasViewComponent = (props: CanvasProps<PixiEngine> & { background?: string } & SizeMeProps) => {
     const {
         className,
         onInit,
         style,
         viewBox,
     } = props;
 
+    const background = props.background || 'white';
     const [engine, setEngine] = React.useState<PixiEngine>();
 
     const doInit = React.useCallback((ref: HTMLDivElement) => {
@@ -36,11 +37,12 @@ const PixiCanvasViewComponent = (props: CanvasProps<PixiEngine> & SizeMeProps) =
             await application.init({ 
                 antialias: true,
                 autoDensity: true,
-                background: 'white',
-                resolution: window.devicePixelRatio,
+                background,
                 eventFeatures: {
                     move: true,
                 },
+                resizeTo: ref,
+                resolution: window.devicePixelRatio,
             });
 
             setEngine(new PixiEngine(application));
@@ -54,6 +56,7 @@ const PixiCanvasViewComponent = (props: CanvasProps<PixiEngine> & SizeMeProps) =
             application.destroy();
             application.canvas.remove();
         };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     React.useEffect(() => {
@@ -64,6 +67,14 @@ const PixiCanvasViewComponent = (props: CanvasProps<PixiEngine> & SizeMeProps) =
         onInit(engine);
     }, [engine, onInit]);
 
+    React.useEffect(() => {
+        if (!engine) {
+            return;
+        }
+
+        engine.application.renderer.background.color = background;
+    }, []);
+
     React.useEffect(() => {
         if (!engine) {
             return;

diff --git a/src/wireframes/engine/pixi/engine.ts b/src/wireframes/engine/pixi/engine.ts
@@ -98,15 +98,12 @@ export class PixiEngine implements Engine {
     }
 
     private buildMouseEvent = (event: MouseEvent): EngineMouseEvent => {
-        const bounds = this.application.canvas.getBoundingClientRect();
-
-        const relativeX = event.clientX - bounds.x;
-        const relativeY = event.clientY - bounds.y;
+        const { x, y } = this.getPosition(event);
 
         const engineEvent =
             new EngineMouseEvent(
                 event,
-                new Vec2(relativeX, relativeY));
+                new Vec2(x, y));
 
         return engineEvent;
     };
@@ -115,7 +112,7 @@ export class PixiEngine implements Engine {
         const boundary = new EventBoundary(this.application.stage);
 
         const { x, y } = this.getPosition(event);
-        const hit = boundary.hitTest(y, y);
+        const hit = boundary.hitTest(event.offsetX, event.offsetY);
 
         let currentTarget: Container = hit;
         let eventObject: EngineObject | null = null;
@@ -147,7 +144,8 @@ export class PixiEngine implements Engine {
     };
 
     private handleMouseMove = (event: EngineHitEvent) => {
-        if (!event.item) {
+        if (!event.target) {
+            document.body.style.cursor = 'default';
             return;
         }
 
@@ -168,7 +166,8 @@ export class PixiEngine implements Engine {
             };
 
             const rotationBase = cursor.target!.worldTransform.decompose(defaultTransform);
-            const rotationTotal = MathHelper.toPositiveDegree(rotationBase.rotation);
+            const rotationDegree = MathHelper.toDegree(rotationBase.rotation);
+            const rotationTotal = MathHelper.toPositiveDegree(rotationDegree + cursor.angle);
 
             for (const config of ROTATION_CONFIG) {
                 if (rotationTotal > config.angle - 22.5 &&

diff --git a/src/wireframes/engine/pixi/item.ts b/src/wireframes/engine/pixi/item.ts
@@ -40,6 +40,7 @@ export class PixiItem extends PixiObject implements EngineItem {
         this.selector = new Graphics();
 
         this.container = new Container();
+        this.container.eventMode = 'static';
         this.container.addChild(this.selector);
         linkToPixi(this, this.container);
 

diff --git a/src/wireframes/engine/pixi/line.ts b/src/wireframes/engine/pixi/line.ts
@@ -8,7 +8,7 @@
 import { Container, Graphics } from 'pixi.js';
 import { EngineLine, EngineLinePlotArgs } from './../interface';
 import { PixiObject } from './object';
-import { linkToPixi } from './utils';
+import { linkToPixi, PixiHelper } from './utils';
 
 type Values = {
     color: string;
@@ -37,7 +37,7 @@ export class PixiLine extends PixiObject implements EngineLine {
     }
 
     public color(value: string): void {
-        this.updateKey('color', value);
+        this.updateKey('color', PixiHelper.toColor(value));
     }
 
     public plot(args: EngineLinePlotArgs): void {

diff --git a/src/wireframes/engine/pixi/rect-or-ellipse.ts b/src/wireframes/engine/pixi/rect-or-ellipse.ts
@@ -9,7 +9,7 @@ import { Container, Graphics } from 'pixi.js';
 import { MathHelper, Types } from '@app/core';
 import { EngineRect, EngineRectOrEllipsePlotArgs } from './../interface';
 import { PixiObject } from './object';
-import { linkToPixi } from './utils';
+import { linkToPixi, PixiHelper } from './utils';
 
 type Values = {
     fill: string;
@@ -45,21 +45,22 @@ export class PixiRect extends PixiObject implements EngineRect {
     }
 
     public fill(value: string) {
-        this.updateKey('fill', value);
+        this.updateKey('fill', PixiHelper.toColor(value));
     }
 
     public strokeColor(value: string) {
-        this.updateKey('strokeColor', value);
+        this.updateKey('strokeColor', PixiHelper.toColor(value));
     }
 
     public strokeWidth(value: number) {
         this.updateKey('strokeWidth', value);
     }
 
     public plot(args: EngineRectOrEllipsePlotArgs): void {
-        this.attrs.plot = args;
+        const prevPlot = this.attrs.plot;
 
-        if (args.w !== this.attrs.plot.w || args.h !== this.attrs.plot.h) {
+        this.attrs.plot = args;
+        if (args.w !== prevPlot.w || args.h !== prevPlot.h) {
             this.invalid = true;
             return;
         }
@@ -75,6 +76,7 @@ export class PixiRect extends PixiObject implements EngineRect {
         const { attrs, graphics } = this;
         const { w, h } = attrs.plot;
 
+        graphics.clear();
         if (this.rectangle) {
             graphics.rect(0, 0, w, h);
         } else {