cbvirtua 1.0.57 → 1.0.58

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

@@ -1,61 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

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

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

@@ -1,138 +0,0 @@
-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

@@ -1,345 +0,0 @@
-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();
-  }
-}