cbvirtua 1.0.48 → 1.0.49

package/canvas-example-main/canvas-example-main/src/pages/editor/store/component-config.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { create } from 'zustand';
+
+import { IconName } from '@/componentsIconfont';
+
+import { ComponentType } from '../core/type';
+import { shapeComponent } from '../core/cmp/shape';
+
+type CategoryType = 'base' | 'material' | 'image' | 'text';
+
+export interface Component {
+  name: string;
+  icon: IconName | (() => React.ReactNode);
+  model: Record<string, any> & { type: ComponentType };
+}
+
+interface ComponentCategory {
+  label: string;
+  type: CategoryType;
+  icon: string;
+  components: Component[];
+}
+
+type State = {
+  componentConfig: ComponentCategory[];
+};
+
+type Action = {};
+
+const componentConfig: ComponentCategory[] = [
+  {
+    label: '基础',
+    type: 'base',
+    icon: 'wenzi',
+    components: [...shapeComponent],
+  },
+  {
+    label: '文字',
+    type: 'text',
+    icon: 'wenzi',
+    components: [],
+  },
+  {
+    label: '图片',
+    type: 'image',
+    icon: 'tupian',
+    components: [],
+  },
+  {
+    label: '素材',
+    type: 'material',
+    icon: 'sucai',
+    components: [],
+  },
+];
+
+const useComponentConfigStore = create<State & Action>(() => ({
+  componentConfig,
+}));
+
+export { useComponentConfigStore };

package/canvas-example-main/canvas-example-main/src/pages/editor/store/components.ts

@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+import Editor from '../core/editor';
+import { BaseModel } from '../core/cmp/base';
+import * as cmpFactory from '../core/cmp/factory';
+
+type State = {
+  components: any[];
+  editor: Editor;
+  selectCmp: any;
+};
+
+type Action = {
+  addCmp: (model: BaseModel) => void;
+  updateCmp: (id: string, data, needUpdate: boolean) => void;
+  removeCmp: (id: string, needUpdate: boolean) => void;
+  updateEditor: (editor: Editor) => void;
+  updateSelectCmp: (selectCmp: any) => void;
+};
+
+const useComponentStore = create<State & Action>((set, get) => ({
+  components: [],
+  editor: null,
+  selectCmp: null,
+  addCmp(model: BaseModel) {
+    const { editor, components } = get();
+    set({ components: [...components, model] });
+    editor.addCmp(cmpFactory.create(model.type, model));
+  },
+  updateCmp(id: string, data, needUpdate: boolean) {
+    console.log(id, data, needUpdate);
+  },
+  removeCmp(id: string, needUpdate: boolean) {
+    console.log(id, needUpdate);
+  },
+  updateEditor(editor) {
+    set({ editor });
+  },
+  updateSelectCmp(selectCmp) {
+    set({ selectCmp });
+  },
+}));
+
+export { useComponentStore };

package/canvas-example-main/canvas-example-main/src/pages/editor/store/layout.ts

@@ -0,0 +1,40 @@
+import { create } from 'zustand';
+
+interface IHeader {
+  height: number;
+}
+
+type State = {
+  contentWidth: number;
+  contentHeight: number;
+
+  header: IHeader;
+
+  asideOpen: boolean;
+};
+
+type Action = {
+  updateAsideOpen: (asideOpen: State['asideOpen']) => void;
+  updateContentWidth: (width: State['contentWidth']) => void;
+};
+
+const useLayoutStore = create<State & Action>((set, get) => ({
+  contentWidth: window.innerWidth - 360,
+  contentHeight: window.innerHeight - 60,
+  header: { height: 60 },
+  asideOpen: false,
+  updateAsideOpen: (asideOpen) => {
+    if (asideOpen) {
+      if (!get().asideOpen) {
+        set(() => ({ contentWidth: get().contentWidth - 300, asideOpen }));
+      }
+    } else {
+      if (get().asideOpen) {
+        set(() => ({ contentWidth: get().contentWidth + 300, asideOpen }));
+      }
+    }
+  },
+  updateContentWidth: (width) => set(() => ({ contentWidth: width })),
+}));
+
+export { useLayoutStore };

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

@@ -0,0 +1,59 @@
+import { Button } from 'antd';
+import { useNavigate } from 'react-router-dom';
+
+const data = [
+  {
+    name: '练习',
+    path: '/practice',
+  },
+  {
+    name: 'Leafer',
+    path: '/leafer',
+  },
+  {
+    name: '翻书',
+    path: '/pageflip',
+  },
+  {
+    name: '拼图',
+    path: '/jigsaw',
+  },
+  {
+    name: '扫雷',
+    path: '/minesweeper',
+  },
+  {
+    name: '编辑器',
+    path: '/editor',
+  },
+  {
+    name: '时钟',
+    path: '/clock',
+  },
+  {
+    name: '形状编辑器',
+    path: '/shape-editor',
+  },
+];
+
+export default function Page() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="w-[100vw] h-[100vh] flex items-center justify-center gap-[15px]">
+      {data.map((page) => {
+        return (
+          <Button
+            key={page.name}
+            type="primary"
+            onClick={() => {
+              navigate(page.path);
+            }}
+          >
+            {page.name}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div></div>;
+}

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

@@ -0,0 +1,138 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { Alert, Button, InputNumber, message, Modal } from 'antd';
+import MineSweeper from './minesweeper';
+import { useDebounce, useWindowSize } from 'react-use';
+import storage from '../../utils/storage';
+
+const storagePrefix = 'minesweeper_';
+
+const defaultPersistConfig = storage.get(`${storagePrefix}config`) || {
+  x: 15,
+  y: 15,
+  bomberCount: 20,
+};
+
+let defaultConfig = {
+  ...defaultPersistConfig,
+  width: 800,
+  height: 800,
+  gap: 2,
+};
+
+export default function Page() {
+  const minesweeperRef = useRef<MineSweeper>();
+
+  const { width, height } = useWindowSize();
+
+  defaultConfig = {
+    ...defaultConfig,
+    width: Math.min(
+      1200,
+      Math.min(Math.round(height * 0.82), Math.round(width * 0.82))
+    ),
+    height: Math.min(
+      1200,
+      Math.min(Math.round(height * 0.82), Math.round(width * 0.82))
+    ),
+  };
+
+  const [config, setConfig] = useState(defaultConfig);
+
+  const [resultOpen, setResultOpen] = useState(false);
+  const [result, setResult] = useState(false);
+
+  const { x, y, bomberCount } = config;
+
+  useDebounce(
+    () => {
+      if (!minesweeperRef.current) return;
+      storage.set(`${storagePrefix}config`, config);
+      minesweeperRef.current.update(config);
+    },
+    1000,
+    [config]
+  );
+
+  useEffect(() => {
+    minesweeperRef.current = new MineSweeper({
+      ...config,
+      view: 'minesweeper',
+      onFail() {
+        setResult(false);
+        setResultOpen(true);
+      },
+      onSuccess() {
+        setResult(true);
+        setResultOpen(true);
+      },
+    });
+  }, []);
+
+  return (
+    <div className="w-[100vw] h-[100vh] flex items-center justify-center background-[#aaa] flex-col">
+      <div className="mb-[10px] flex flex-row">
+        <div>
+          网格规模:&nbsp;
+          <InputNumber
+            value={x}
+            onChange={(value) => {
+              if (typeof value === 'number') {
+                setConfig({ ...config, x: value, y: value });
+              }
+            }}
+          ></InputNumber>
+        </div>
+        <div className="ml-[20px]">
+          炸弹数量:&nbsp;
+          <InputNumber
+            value={bomberCount}
+            onChange={(value) => {
+              if (typeof value === 'number') {
+                const maxBomberCount = Math.round(0.6 * x * y);
+                if (value > maxBomberCount) {
+                  message.error(`炸弹数量不能超过 ${maxBomberCount}!`);
+                  setConfig({ ...config, bomberCount: maxBomberCount });
+                } else {
+                  setConfig({ ...config, bomberCount: value });
+                }
+              }
+            }}
+          ></InputNumber>
+        </div>
+        <Button
+          type="primary"
+          onClick={() => {
+            minesweeperRef.current.reset();
+          }}
+          className="ml-[12px]"
+        >
+          重新开始
+        </Button>
+      </div>
+      <div id="minesweeper" className="flex items-center justify-center"></div>
+      <Modal
+        title="游戏结束!"
+        open={resultOpen}
+        closable={true}
+        centered={true}
+        maskClosable={true}
+        onOk={() => {
+          setResultOpen(false);
+        }}
+        onCancel={() => {
+          setResultOpen(false);
+        }}
+        footer={null}
+      >
+        <div className="h-[100px] flex items-center justify-center">
+          {result ? (
+            <Alert message="挑战成功! 已清除所有炸弹!" type="success" />
+          ) : (
+            <Alert message="挑战失败! 再接再厉!" type="error" />
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+}

package/canvas-example-main/canvas-example-main/src/pages/minesweeper/minesweeper.ts

@@ -0,0 +1,345 @@
+import { Leafer, Rect, Text, PointerEvent } from 'leafer-ui';
+import { Animate } from '@leafer-in/animate';
+import { create2dimensionArr, getDelayTime, getTextColor } from './utils';
+import bomberImage from './bomber.png';
+import markImage from './mark.png';
+
+export interface Config extends IBaseConfig {
+  view: string;
+  onFail: () => void;
+  onSuccess: () => void;
+}
+
+export interface IBaseConfig {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  bomberCount: number;
+  gap: number;
+}
+
+type Status = 'success' | 'gaming' | 'fail';
+
+export default class MineSweeper {
+  grids: number[][];
+  openGrids: number[][];
+  markGrids: Rect[][];
+  rectGrids: Rect[][];
+  config: Config;
+  w: number;
+  h: number;
+  leafer: Leafer;
+  remainCount: number;
+  status: Status = 'gaming';
+
+  constructor(config: Config) {
+    this.config = config;
+
+    const { width, height, view } = config;
+
+    this.leafer = new Leafer({ view, width, height });
+
+    this.leafer.on(PointerEvent.TAP, this.handleTap.bind(this));
+    this.leafer.on(PointerEvent.MENU_TAP, this.handleMenuTap.bind(this));
+
+    this.init();
+  }
+
+  init() {
+    this.leafer.clear();
+    const { x, y, width, height, gap } = this.config;
+
+    this.w = Math.floor((width - gap * x) / x);
+    this.h = Math.floor((height - gap * y) / y);
+
+    this.grids = this.generateGrids();
+    this.openGrids = create2dimensionArr(x, y, 0);
+    this.markGrids = create2dimensionArr(x, y, 0);
+    this.rectGrids = create2dimensionArr(x, y);
+    this.status = 'gaming';
+    this.remainCount = x * y;
+
+    for (let i = 0; i < x; i++) {
+      for (let j = 0; j < y; j++) {
+        const rect = new Rect({
+          x: i * (this.w + gap),
+          y: j * (this.h + gap),
+          width: this.w,
+          height: this.h,
+          fill: '#22d2ef',
+          cursor: 'pointer',
+        });
+        this.rectGrids[i][j] = rect;
+        this.leafer.add(rect);
+      }
+    }
+  }
+
+  update(config: IBaseConfig) {
+    this.config = { ...this.config, ...config };
+    this.init();
+  }
+
+  handleSuccess() {
+    const { x, y, onSuccess } = this.config;
+    for (let i = 0; i < x; i++) {
+      for (let j = 0; j < y; j++) {
+        if (this.grids[i][j] === -1) {
+          this.drawBomber(i, j);
+        } else if (this.grids[i][j] > 0) {
+          this.drawText(i, j, this.grids[i][j], 0);
+        } else {
+          this.drawText(i, j, undefined, 0);
+        }
+      }
+    }
+    this.status = 'success';
+    onSuccess();
+  }
+
+  handleFail() {
+    const { x, y, onFail } = this.config;
+    for (let i = 0; i < x; i++) {
+      for (let j = 0; j < y; j++) {
+        if (this.grids[i][j] === -1) {
+          this.drawBomber(i, j);
+        }
+      }
+    }
+    this.status = 'fail';
+    onFail();
+  }
+
+  handleTap(e) {
+    const { bomberCount, gap } = this.config;
+    if (this.status !== 'gaming') {
+      return;
+    }
+
+    if (e.target !== this.leafer) {
+      const { x, y } = e.target;
+
+      const i = x / (this.w + gap);
+      const j = y / (this.h + gap);
+      if (this.grids[i][j] !== -1) {
+        this.leafer.remove(this.markGrids[i][j]);
+        this.markGrids[i][j] = null;
+        this.openGrids[i][j] = 1;
+        this.turnOpen(i, j, 0);
+
+        if (this.remainCount === bomberCount) {
+          this.handleSuccess();
+        }
+      } else {
+        this.handleFail();
+      }
+    }
+  }
+
+  handleMenuTap(e) {
+    const { gap } = this.config;
+    if (this.status !== 'gaming') {
+      return;
+    }
+
+    if (e.target !== this.leafer) {
+      const { x, y } = e.target;
+
+      const i = x / (this.w + gap);
+      const j = y / (this.h + gap);
+      if (this.openGrids[i][j]) {
+        return;
+      }
+
+      if (this.markGrids[i][j]) {
+        this.leafer.remove(this.markGrids[i][j]);
+        this.markGrids[i][j] = null;
+      } else {
+        const markRect = new Rect({
+          x: i * (this.w + gap),
+          y: j * (this.h + gap),
+          width: this.w,
+          height: this.h,
+          fill: {
+            type: 'image',
+            url: markImage,
+          },
+          cursor: 'pointer',
+        });
+        this.markGrids[i][j] = markRect;
+        this.leafer.add(markRect);
+      }
+    }
+  }
+
+  diffusion(i: number, j: number, step: number) {
+    const { x, y } = this.config;
+    const drts = [
+      [-1, -1],
+      [-1, 0],
+      [-1, 1],
+      [0, -1],
+      [0, 1],
+      [1, -1],
+      [1, 0],
+      [1, 1],
+    ];
+
+    for (let k = 0; k < drts.length; k++) {
+      const x1 = drts[k][0] + i;
+      const y1 = drts[k][1] + j;
+
+      if (x1 >= 0 && x1 < x && y1 >= 0 && y1 < y) {
+        if (this.openGrids[x1][y1]) {
+          continue;
+        }
+
+        if (this.grids[x1][y1] !== -1) {
+          this.openGrids[x1][y1] = 1;
+          this.turnOpen(x1, y1, step + 1);
+        }
+      }
+    }
+  }
+
+  drawBomber(i: number, j: number) {
+    const { gap } = this.config;
+
+    const width = this.w - 1 * 2;
+    const height = this.h - 1 * 2;
+
+    const bomberRect = new Rect({
+      x: i * (this.w + gap) + 1,
+      y: j * (this.h + gap) + 1,
+      width,
+      height,
+      fill: {
+        type: 'image',
+        url: bomberImage,
+      },
+    });
+
+    this.leafer.add(bomberRect);
+  }
+
+  /**
+   * 绘制文本
+   *
+   * @param {number} i
+   * @param {number} j
+   * @param {number} num 第几个绘制的元素
+   * @memberof MineSweeper
+   */
+  drawText(i: number, j: number, num: number, step: number) {
+    const { gap } = this.config;
+
+    const delayTime = getDelayTime(step);
+
+    const rect = new Rect({
+      x: i * (this.w + gap),
+      y: j * (this.h + gap),
+      width: this.w,
+      height: this.h,
+      fill: '#c4cbcf',
+      cursor: 'pointer',
+      opacity: 0,
+      animationOut: null,
+    });
+    new Animate(rect, [{ opacity: 1 }], {
+      duration: 1,
+      delay: delayTime,
+    });
+    this.leafer.add(rect);
+    if (num > 0) {
+      const text = new Text({
+        x: i * (this.w + gap),
+        y: j * (this.h + gap),
+        width: this.w,
+        height: this.h,
+        text: String(num),
+        fill: getTextColor(num),
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        fontSize: (28 * this.w) / (600 / 15),
+        fontWeight: 'bold',
+        opacity: 0,
+        animationOut: null,
+      });
+      new Animate(text, [{ opacity: 1 }], {
+        duration: 1,
+        delay: delayTime,
+      });
+
+      this.leafer.add(text);
+    }
+  }
+
+  turnOpen(i: number, j: number, step: number) {
+    const val = this.grids[i][j];
+    this.drawText(i, j, val > 0 ? val : undefined, step);
+    if (val === 0) {
+      this.diffusion(i, j, step);
+    }
+    this.remainCount--;
+  }
+
+  generateGrids() {
+    const { x, y, bomberCount } = this.config;
+
+    const grids = create2dimensionArr(x, y, 0);
+
+    const set = new Set();
+    let bomberCountTemp = bomberCount;
+
+    while (bomberCountTemp || bomberCountTemp === x * y - bomberCount) {
+      const randomx = Math.round((x - 1) * Math.random());
+      const randomy = Math.round((y - 1) * Math.random());
+
+      const key = `${randomx}_${randomy}`;
+      if (!set.has(key)) {
+        set.add(key);
+        grids[randomx][randomy] = -1;
+        bomberCountTemp--;
+      }
+    }
+
+    const updateRound = (x1: number, y1: number) => {
+      const drts = [
+        [-1, -1],
+        [-1, 0],
+        [-1, 1],
+        [0, -1],
+        [0, 1],
+        [1, -1],
+        [1, 0],
+        [1, 1],
+      ];
+      drts.forEach((drt) => {
+        let [x2, y2] = drt;
+        x2 += x1;
+        y2 += y1;
+        if (x2 >= 0 && x2 < x && y2 >= 0 && y2 < y && grids[x2][y2] !== -1) {
+          grids[x2][y2] += 1;
+        }
+      });
+    };
+
+    for (let i = 0; i < x; i++) {
+      for (let j = 0; j < y; j++) {
+        if (grids[i][j] === -1) {
+          updateRound(i, j);
+        }
+      }
+    }
+
+    return grids;
+  }
+  reset() {
+    this.init();
+  }
+
+  destroy() {
+    this.leafer.destroy();
+  }
+}