cbvirtua 1.0.48 → 1.0.49

package/canvas-example-main/canvas-example-main/src/pages/2048/index.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+
+export default function Component() {
+  const canvasRef = useRef<HTMLCanvasElement>();
+
+  const draw = () => {
+    const canvas = canvasRef.current;
+    const ctx = canvasRef.current.getContext('2d');
+    console.log(canvas, ctx);
+  };
+
+  useEffect(() => {
+    draw();
+  }, []);
+
+  return (
+    <div className="w-[100vw] h-[100vh] flex items-center justify-center background-[#aaa] flex-col">
+      <canvas width={600} height={600} ref={canvasRef}></canvas>
+    </div>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/clock/index.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react';
+
+export default function Clock() {
+  const canvasRef = useRef<HTMLCanvasElement>();
+
+  const draw = () => {
+    const canvas = canvasRef.current;
+    const ctx = canvasRef.current.getContext('2d');
+
+    function drawClock() {
+      const now = new Date();
+      const hours = now.getHours();
+      const minutes = now.getMinutes();
+      const seconds = now.getSeconds();
+
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawFace(ctx, centerX, centerY, 150);
+      drawNumbers(ctx, centerX, centerY, 150);
+      drawTime(ctx, centerX, centerY, hours, minutes, seconds);
+      drawTicks(ctx, centerX, centerY, 150);
+    }
+
+    function drawFace(ctx: CanvasRenderingContext2D, x, y, radius) {
+      ctx.beginPath();
+      ctx.lineWidth = 2;
+      ctx.fillStyle = 'black';
+      ctx.arc(x, y, radius, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    function drawTicks(ctx, x, y, radius) {
+      for (let i = 0; i < 60; i++) {
+        const angle = i * (Math.PI / 30);
+        const isHour = i % 5 === 0;
+        const len = isHour ? 15 : 10;
+        if (isHour) {
+          ctx.lineWidth = 2;
+        } else {
+          ctx.lineWidth = 1;
+        }
+        const innerX = x + (radius - len) * Math.sin(angle);
+        const innerY = y - (radius - len) * Math.cos(angle);
+        const outerX = x + radius * Math.sin(angle);
+        const outerY = y - radius * Math.cos(angle);
+
+        ctx.beginPath();
+        ctx.moveTo(innerX, innerY);
+        ctx.lineTo(outerX, outerY);
+        ctx.stroke();
+      }
+    }
+
+    function drawNumbers(ctx, x, y, radius) {
+      ctx.font = `${radius / 10}px Arial`;
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+
+      for (let num = 1; num <= 12; num++) {
+        const angle = num * (Math.PI / 6);
+        const dx = x + radius * 0.8 * Math.sin(angle);
+        const dy = y - radius * 0.8 * Math.cos(angle);
+        ctx.fillText(num.toString(), dx, dy);
+      }
+    }
+
+    function drawTime(ctx, x, y, hours, minutes, seconds) {
+      hours = hours % 12;
+      hours = (hours * Math.PI) / 6 + (minutes * Math.PI) / 360;
+      drawHand(ctx, x, y, hours, 50, 6); // Hour hand
+
+      minutes = (minutes * Math.PI) / 30 + (seconds * Math.PI) / 1800;
+      drawHand(ctx, x, y, minutes, 70, 4); // Minute hand
+
+      seconds = (seconds * Math.PI) / 30;
+      drawHand(ctx, x, y, seconds, 90, 2); // Second hand
+    }
+
+    function drawHand(ctx, x, y, angle, length, width) {
+      ctx.beginPath();
+      ctx.lineWidth = width;
+      ctx.lineCap = 'round';
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + length * Math.sin(angle), y - length * Math.cos(angle));
+      ctx.stroke();
+    }
+
+    setInterval(drawClock, 1000);
+    drawClock();
+  };
+
+  useEffect(() => {
+    draw();
+  }, []);
+
+  return (
+    <div className="w-[100vw] h-[100vh] flex items-center justify-center background-[#aaa] flex-col">
+      <canvas width={600} height={600} ref={canvasRef}></canvas>
+    </div>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/demo/index.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+
+export default function Component() {
+  const canvasRef = useRef<HTMLCanvasElement>();
+
+  const draw = () => {
+    const canvas = canvasRef.current;
+    const ctx = canvasRef.current.getContext('2d');
+    console.log(canvas, ctx);
+  };
+
+  useEffect(() => {
+    draw();
+  }, []);
+
+  return (
+    <div className="w-[100vw] h-[100vh] flex items-center justify-center background-[#aaa] flex-col">
+      <canvas width={600} height={600} ref={canvasRef}></canvas>
+    </div>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/editor/index.module.less

@@ -0,0 +1,3 @@
+.editor {
+  height: 100%;
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/editor/index.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Editor from '../../core/editor';
+import { useLayoutStore } from '../../store/layout';
+import { useComponentStore } from '../../store/components';
+
+import S from './index.module.less';
+
+export default function EditorComponent() {
+  const { contentWidth, contentHeight } = useLayoutStore();
+  const { components, updateEditor } = useComponentStore();
+  const editorRef = useRef<Editor>();
+
+  useEffect(() => {
+    const id = 'editor-canvas-container';
+
+    const el = document.querySelector(`#${id}`);
+
+    let cancelContextMenuListener;
+
+    if (el) {
+      editorRef.current = new Editor({
+        width: contentWidth,
+        height: contentHeight,
+        frameHeight: 900,
+        frameWidth: 500,
+        view: id,
+        onMenuTap(event) {
+          console.log('event', event);
+        },
+        onSelect(event) {
+          // updateSelectCmp(event.value);
+          console.log(event);
+        },
+        onMove(event) {
+          console.log(event);
+        },
+      });
+
+      updateEditor(editorRef.current);
+
+      cancelContextMenuListener = document.addEventListener('click', () => {
+        setMenuPosition({ x: 0, y: 0 });
+      });
+    }
+
+    return () => {
+      if (editorRef.current) {
+        editorRef.current.destroy();
+      }
+
+      if (cancelContextMenuListener) {
+        document.removeEventListener('click', cancelContextMenuListener);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.resize({ width: contentWidth, height: contentHeight });
+    }
+  }, [contentWidth, contentHeight]);
+
+  useEffect(() => {}, [components]);
+
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+
+  const Menu = ({ x, y }) => {
+    return createPortal(
+      <div
+        style={{
+          position: 'absolute',
+          left: x,
+          top: y,
+          background: '#f0f0f0',
+          padding: '5px',
+          border: '1px solid #ccc',
+        }}
+      >
+        <ul>
+          <li onClick={() => {}}>移除</li>
+          <li>置顶</li>
+          <li>置底</li>
+        </ul>
+      </div>,
+      document.body
+    );
+  };
+
+  return (
+    <main
+      className={S.editor}
+      style={{ width: contentWidth }}
+      id="editor-canvas-container"
+    >
+      {menuPosition.x !== 0 && <Menu x={menuPosition.x} y={menuPosition.y} />}
+    </main>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/header/index.module.less

@@ -0,0 +1,5 @@
+.header {
+  background-color: white;
+  height: 60px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/header/index.tsx

@@ -0,0 +1,5 @@
+import S from './index.module.less';
+
+export default function Header() {
+  return <header className={S.header}></header>;
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/material/index.module.less

@@ -0,0 +1,59 @@
+.material {
+  height: 100%;
+  background-color: white;
+  position: relative;
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+
+    .list {
+      width: 60px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 15px;
+
+      border-right: 1px solid #dcdee2;
+
+      .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        cursor: pointer;
+        width: 100%;
+        border-right: 2px solid transparent;
+      }
+
+      .item-active {
+        border-right: 2px solid #2d8cf0;
+      }
+    }
+
+    .aside {
+      width: 300px;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding: 10px;
+
+      .item {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .menu {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    right: -30px;
+    top: 50%;
+    transform: translate(0, -15px);
+    cursor: pointer;
+    z-index: 999999;
+  }
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/material/index.tsx

@@ -0,0 +1,85 @@
+import { useMemo, useState } from 'react';
+import classNames from 'classnames';
+
+import Iconfont from '@/components/Iconfont';
+import { useLayoutStore } from '../../store/layout';
+
+import { useComponentStore } from '../../store/components';
+import { useComponentConfigStore } from '../../store/component-config';
+import S from './index.module.less';
+
+export default function Material() {
+  const { componentConfig } = useComponentConfigStore();
+
+  const [activeType, setActiveType] = useState(componentConfig[0].type);
+  const { asideOpen, updateAsideOpen } = useLayoutStore();
+  const { addCmp } = useComponentStore();
+
+  const components = useMemo(() => {
+    const currentComponents = componentConfig.find(
+      (o) => o.type === activeType
+    );
+    return currentComponents.components;
+  }, [componentConfig, activeType]);
+
+  const Item = ({ item }) => {
+    return (
+      <div
+        className={classNames(
+          S.item,
+          item.type === activeType && S['item-active']
+        )}
+        onClick={() => {
+          setActiveType(item.type);
+          updateAsideOpen(true);
+        }}
+      >
+        <Iconfont name={item.icon} />
+        <span>{item.label}</span>
+      </div>
+    );
+  };
+
+  return (
+    <aside className={S.material}>
+      <div className={S.content}>
+        <div className={S.list}>
+          {componentConfig.map((item) => (
+            <Item item={item} key={item.type} />
+          ))}
+        </div>
+
+        {asideOpen && (
+          <div className={S.aside}>
+            {components.map((cmp) => {
+              return (
+                <div
+                  className={S.item}
+                  onClick={() => {
+                    addCmp(cmp.model as any);
+                  }}
+                  key={cmp.name}
+                >
+                  {typeof cmp.icon === 'string' ? (
+                    <Iconfont name={cmp.icon}></Iconfont>
+                  ) : (
+                    cmp.icon()
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div
+        className={S.menu}
+        onClick={() => {
+          updateAsideOpen(!asideOpen);
+        }}
+      >
+        {asideOpen ? <Iconfont name="jiantou1" /> : <Iconfont name="jiantou" />}
+      </div>
+    </aside>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/setting/index.module.less

@@ -0,0 +1,7 @@
+.setting {
+  width: 300px;
+  height: 100%;
+  display: flex;
+
+  background-color: white;
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/components/setting/index.tsx

@@ -0,0 +1,5 @@
+import S from './index.module.less';
+
+export default function Setting() {
+  return <div className={S.setting}>settings</div>;
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/core/application.ts

@@ -0,0 +1,35 @@
+import { App, Frame, IScreenSizeData } from 'leafer-ui';
+
+export interface IApplicationConfig {
+  view: string;
+  width: number;
+  height: number;
+}
+
+export class Application {
+  config: IApplicationConfig;
+  app: App;
+  page: Frame;
+
+  constructor(config: IApplicationConfig) {
+    this.config = config;
+    const { view, width, height } = config;
+    this.app = new App({ view, width, height, editor: {} });
+
+    this.app.tree = this.app.addLeafer();
+    this.app.ground = this.app.addLeafer();
+    this.app.sky = this.app.addLeafer({ type: 'draw', usePartRender: false });
+  }
+
+  toJSON() {
+    return this.app.toJSON();
+  }
+
+  resize(sizeData: IScreenSizeData) {
+    this.app.resize(sizeData);
+  }
+
+  destroy() {
+    this.app.destroy();
+  }
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/core/cmp/base.ts

@@ -0,0 +1,17 @@
+import { ComponentType } from '../type';
+
+export interface BaseModel {
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  editable: boolean;
+  type?: ComponentType;
+}
+
+export const baseModel: BaseModel = {
+  x: 0,
+  y: 0,
+  editable: true,
+  type: ComponentType.Rect,
+};

package/canvas-example-main/canvas-example-main/src/pages/editor/core/cmp/factory.ts

@@ -0,0 +1,14 @@
+import { Polygon, Rect } from 'leafer-ui';
+import { BaseModel } from './base';
+import { ComponentType } from '../type';
+
+export function create(type: ComponentType, model: BaseModel) {
+  switch (type) {
+    case ComponentType.Rect:
+      return new Rect(model);
+    case ComponentType.Polygon:
+      return new Polygon(model);
+  }
+
+  return null;
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/core/cmp/shape.tsx

@@ -0,0 +1,43 @@
+import Iconfont from '@/components/Iconfont';
+import { Component } from '../../store/component-config';
+import { ComponentType } from '../type';
+import { baseModel } from './base';
+
+const rect: Component = {
+  name: '矩形',
+  icon: () => <Iconfont size={28} name="xingzhuang-juxing"></Iconfont>,
+  model: {
+    ...baseModel,
+    type: ComponentType.Rect,
+    width: 150,
+    height: 150,
+    fill: 'lime',
+  },
+};
+
+const triangle: Component = {
+  name: '三角形',
+  icon: () => <Iconfont size={28} name="xingzhuang-sanjiaoxing"></Iconfont>,
+  model: {
+    ...baseModel,
+    type: ComponentType.Polygon,
+    width: 100,
+    height: 100,
+    sides: 3,
+    fill: 'lime',
+  },
+};
+
+const circle: Component = {
+  name: '圆',
+  icon: () => <Iconfont size={28} name="yuanhuan"></Iconfont>,
+  model: {
+    ...baseModel,
+    type: ComponentType.Rect,
+    width: 150,
+    height: 150,
+    fill: 'lime',
+  },
+};
+
+export const shapeComponent = [rect, triangle, circle];

package/canvas-example-main/canvas-example-main/src/pages/editor/core/editor.ts

@@ -0,0 +1,61 @@
+import {
+  Editor as LeaferEditor,
+  EditorEvent,
+  EditorMoveEvent,
+} from '@leafer-in/editor';
+
+import { Frame, PointerEvent } from 'leafer-ui';
+import { Application, IApplicationConfig } from './application';
+
+interface IEditorConfig extends IApplicationConfig {
+  frameWidth: number;
+  frameHeight: number;
+  onMenuTap?: (event) => void;
+  onSelect?: (event) => void;
+  onMove?: (event) => void;
+}
+
+export default class Editor extends Application {
+  declare config: IEditorConfig;
+
+  constructor(config: IEditorConfig) {
+    super(config);
+    this.config = config;
+
+    const { onMenuTap, onSelect, onMove } = config;
+
+    this.app.editor = new LeaferEditor({ continuousSelect: true });
+    this.app.sky.add(this.app.editor);
+
+    this.app.on(PointerEvent.MENU_TAP, onMenuTap);
+    this.app.editor.on(EditorEvent.SELECT, onSelect);
+    this.app.editor.on(EditorMoveEvent.MOVE, onMove);
+
+    this.initFrame();
+  }
+
+  initFrame() {
+    const { frameWidth, frameHeight } = this.config;
+
+    const centerX = this.app.width / 2 - frameWidth / 2;
+    const centerY = this.app.height / 2 - frameHeight / 2;
+    this.page = new Frame({
+      x: centerX,
+      y: centerY,
+      width: frameWidth,
+      height: frameHeight,
+      fill: 'white',
+    });
+
+    this.app.tree.add(this.page);
+  }
+
+  addCmp(cmp: any) {
+    this.page.add(cmp);
+    return cmp;
+  }
+
+  removeCmp() {}
+
+  updateCmp() {}
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/core/type.ts

@@ -0,0 +1,6 @@
+export enum ComponentType {
+  Rect = 'Rect',
+  Line = 'Line',
+  Ellipse = 'Ellipse',
+  Polygon = 'Polygon',
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/index.module.less

@@ -0,0 +1,7 @@
+.content {
+  width: 100vw;
+  height: calc(100% - 60px);
+
+  display: flex;
+  flex-direction: row;
+}

package/canvas-example-main/canvas-example-main/src/pages/editor/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+
+import { useWindowSize } from 'react-use';
+
+import Editor from './components/editor';
+import Header from './components/header';
+import Material from './components/material';
+import Setting from './components/setting';
+
+import { useLayoutStore } from './store/layout';
+
+import S from './index.module.less';
+
+export default function Component() {
+  const { updateContentWidth } = useLayoutStore();
+  const { width } = useWindowSize();
+
+  useEffect(() => {
+    updateContentWidth(width - 360);
+  }, [width]);
+
+  return (
+    <div className="bg-[#f2f3f5] h-[100vh] w-[100vw]">
+      <Header />
+      <div className={S.content}>
+        <Material />
+        <Editor />
+        <Setting />
+      </div>
+    </div>
+  );
+}