cbvirtua 1.0.57 → 1.0.59

package/canvas-event-system/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "canvas-event-system",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/JS-Hao/canvas-event-system.git"
-  },
-  "keywords": [
-    "canvas",
-    "event",
-    "system",
-    "listeners"
-  ],
-  "author": "JS-Hao",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/JS-Hao/canvas-event-system/issues"
-  },
-  "homepage": "https://github.com/JS-Hao/canvas-event-system#readme",
-  "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-typescript": "^7.12.1",
-    "babel-loader": "^8.1.0",
-    "typescript": "^4.0.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.3.1"
-  },
-  "dependencies": {
-    "uuid": "^8.3.1"
-  }
-}

package/canvas-event-system/readme.md

@@ -1,13 +0,0 @@
-## 一个简易的 Canvas 事件系统
-
-### 食用方法
-
-执行如下命令行：
-
-```
-npm start
-```
-
-访问`http://localhost:9000`即可
-
-![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a54e80ebb2184f0fa5fddbde16b60bd3~tplv-k3u1fbpfcp-watermark.image)

package/canvas-event-system/src/canvas-event-system/EventSimulator.ts

@@ -1,75 +0,0 @@
-import { Listener, EventNames } from './shapes';
-
-export interface Action {
-  type: ActionType;
-  id: string;
-}
-
-export enum ActionType {
-  Down = 'DOWN',
-  Up = 'Up',
-  Move = 'MOVE',
-}
-
-export default class EventSimulator {
-  private listenersMap: {
-    [id: string]: {
-      [eventName: string]: Listener[];
-    };
-  } = {};
-
-  private lastDownId: string;
-  private lastMoveId: string;
-
-  addAction(action: Action, evt: MouseEvent) {
-    const { type, id } = action;
-
-    // mousemove
-    if (type === ActionType.Move) {
-      this.fire(id, EventNames.mousemove, evt);
-    }
-
-    // mouseover
-    // mouseenter
-    if (type === ActionType.Move && (!this.lastMoveId || this.lastMoveId !== id)) {
-      this.fire(id, EventNames.mouseenter, evt);
-      this.fire(this.lastMoveId, EventNames.mouseleave, evt);
-    }
-
-    // mousedown
-    if (type === ActionType.Down) {
-      this.fire(id, EventNames.mousedown, evt);
-    }
-
-    // mouseup
-    if (type === ActionType.Up) {
-      this.fire(id, EventNames.mouseup, evt);
-    }
-
-    // click
-    if (type === ActionType.Up && this.lastDownId === id) {
-      this.fire(id, EventNames.click, evt);
-    }
-
-    if (type === ActionType.Move) {
-      this.lastMoveId = action.id;
-    } else if (type === ActionType.Down) {
-      this.lastDownId = action.id;
-    }
-  }
-
-  addListeners(
-    id: string,
-    listeners: {
-      [eventName: string]: Listener[];
-    },
-  ) {
-    this.listenersMap[id] = listeners;
-  }
-
-  fire(id: string, eventName: EventNames, evt: MouseEvent) {
-    if (this.listenersMap[id] && this.listenersMap[id][eventName]) {
-      this.listenersMap[id][eventName].forEach((listener) => listener(evt));
-    }
-  }
-}

package/canvas-event-system/src/canvas-event-system/helpers.ts

@@ -1,27 +0,0 @@
-export function idToRgba(id: string) {
-  return id.split("-");
-}
-
-export function rgbaToId(rgba: [number, number, number, number]) {
-  return rgba.join("-");
-}
-
-const idPool = {};
-
-export function createId(): string {
-  let id = createOnceId();
-
-  while (idPool[id]) {
-    id = createOnceId();
-  }
-
-  return id;
-}
-
-function createOnceId(): string {
-  return Array(3)
-    .fill(0)
-    .map(() => Math.ceil(Math.random() * 255))
-    .concat(255)
-    .join("-");
-}

package/canvas-event-system/src/canvas-event-system/index.ts

@@ -1,64 +0,0 @@
-import { rgbaToId } from './helpers';
-import { Shape } from './shapes/types';
-import EventSimulator, { ActionType } from './EventSimulator';
-export * from './shapes';
-
-export class Stage {
-  private canvas: HTMLCanvasElement;
-  private osCanvas: OffscreenCanvas;
-  private ctx: CanvasRenderingContext2D;
-  private osCtx: OffscreenCanvasRenderingContext2D;
-  private dpr: number;
-  private shapes: Set<string>;
-  private eventSimulator: EventSimulator;
-
-  constructor(canvas: HTMLCanvasElement) {
-    const dpr = window.devicePixelRatio;
-    canvas.width = parseInt(canvas.style.width) * dpr;
-    canvas.height = parseInt(canvas.style.height) * dpr;
-
-    this.canvas = canvas;
-    this.osCanvas = new OffscreenCanvas(canvas.width, canvas.height);
-
-    this.ctx = this.canvas.getContext('2d');
-    this.osCtx = this.osCanvas.getContext('2d');
-
-    this.ctx.scale(dpr, dpr);
-    this.osCtx.scale(dpr, dpr);
-    this.dpr = dpr;
-
-    this.canvas.addEventListener('mousedown', this.handleCreator(ActionType.Down));
-    this.canvas.addEventListener('mouseup', this.handleCreator(ActionType.Up));
-    this.canvas.addEventListener('mousemove', this.handleCreator(ActionType.Move));
-
-    this.shapes = new Set();
-    this.eventSimulator = new EventSimulator();
-  }
-
-  add(shape: Shape) {
-    const id = shape.getId();
-    this.eventSimulator.addListeners(id, shape.getListeners());
-    this.shapes.add(id);
-
-    shape.draw(this.ctx, this.osCtx);
-  }
-
-  private handleCreator = (type: ActionType) => (evt: MouseEvent) => {
-    const x = evt.offsetX;
-    const y = evt.offsetY;
-    const id = this.hitJudge(x, y);
-    this.eventSimulator.addAction({ type, id }, evt);
-  };
-
-  /**
-   * Determine whether the current position is inside a certain shape, if it is, then return its id
-   * @param x
-   * @param y
-   */
-  private hitJudge(x: number, y: number): string {
-    const rgba = Array.from(this.osCtx.getImageData(x * this.dpr, y * this.dpr, 1, 1).data);
-
-    const id = rgbaToId(rgba as [number, number, number, number]);
-    return this.shapes.has(id) ? id : undefined;
-  }
-}

package/canvas-event-system/src/canvas-event-system/shapes/Base.ts

@@ -1,32 +0,0 @@
-import { EventNames, Listener, Shape } from './types';
-import { createId } from '../helpers';
-
-export default class Base implements Shape {
-  private listeners: { [eventName: string]: Listener[] };
-  public id: string;
-
-  constructor() {
-    this.id = createId();
-    this.listeners = {};
-  }
-
-  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void {
-    throw new Error('Method not implemented.');
-  }
-
-  on(eventName: EventNames, listener: Listener): void {
-    if (this.listeners[eventName]) {
-      this.listeners[eventName].push(listener);
-    } else {
-      this.listeners[eventName] = [listener];
-    }
-  }
-
-  getListeners(): { [name: string]: Listener[] } {
-    return this.listeners;
-  }
-
-  getId(): string {
-    return this.id;
-  }
-}

package/canvas-event-system/src/canvas-event-system/shapes/Circle.ts

@@ -1,46 +0,0 @@
-import { idToRgba } from '../helpers';
-import Base from './Base';
-
-interface RectProps {
-  x: number;
-  y: number;
-  radius: number;
-  strokeWidth?: number;
-  strokeColor?: string;
-  fillColor?: string;
-}
-
-export default class Circle extends Base {
-  constructor(private props: RectProps) {
-    super();
-    this.props.fillColor = this.props.fillColor || '#fff';
-    this.props.strokeColor = this.props.strokeColor || '#000';
-    this.props.strokeWidth = this.props.strokeWidth || 1;
-  }
-
-  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D) {
-    const { x, y, radius, strokeColor, strokeWidth, fillColor } = this.props;
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.fillStyle = fillColor;
-    ctx.strokeStyle = strokeColor;
-    ctx.lineWidth = strokeWidth;
-    ctx.arc(x, y, radius, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-    ctx.restore();
-
-    const [r, g, b, a] = idToRgba(this.id);
-
-    osCtx.save();
-    osCtx.beginPath();
-    osCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-    osCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-    osCtx.lineWidth = strokeWidth;
-    osCtx.arc(x, y, radius, 0, Math.PI * 2);
-    osCtx.fill();
-    osCtx.stroke();
-    osCtx.restore();
-  }
-}

package/canvas-event-system/src/canvas-event-system/shapes/Rect.ts

@@ -1,46 +0,0 @@
-import { idToRgba } from '../helpers';
-import Base from './Base';
-
-interface RectProps {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  strokeWidth?: number;
-  strokeColor?: string;
-  fillColor?: string;
-}
-
-export default class Rect extends Base {
-  constructor(private props: RectProps) {
-    super();
-    this.props.fillColor = this.props.fillColor || '#fff';
-    this.props.strokeColor = this.props.strokeColor || '#000';
-    this.props.strokeWidth = this.props.strokeWidth || 1;
-  }
-
-  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D) {
-    const { x, y, width, height, strokeColor, strokeWidth, fillColor } = this.props;
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.strokeStyle = strokeColor;
-    ctx.lineWidth = strokeWidth;
-    ctx.fillStyle = fillColor;
-    ctx.rect(x, y, width, height);
-    ctx.fill();
-    ctx.stroke();
-    ctx.restore();
-
-    const [r, g, b, a] = idToRgba(this.id);
-
-    osCtx.save();
-    osCtx.beginPath();
-    osCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-    osCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-    osCtx.rect(x, y, width, height);
-    osCtx.fill();
-    osCtx.stroke();
-    osCtx.restore();
-  }
-}

package/canvas-event-system/src/canvas-event-system/shapes/index.ts

@@ -1,5 +0,0 @@
-import Rect from './Rect';
-import Circle from './Circle';
-
-export * from './types';
-export { Rect, Circle };

package/canvas-event-system/src/canvas-event-system/shapes/types.ts

@@ -1,22 +0,0 @@
-export interface Shape {
-  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void;
-
-  on(name: string, listener: Listener): void;
-
-  getListeners(): { [name: string]: Listener[] };
-
-  getId(): string;
-}
-
-export interface Listener {
-  (evt: MouseEvent): void;
-}
-
-export enum EventNames {
-  click = 'click',
-  mousedown = 'mousedown',
-  mousemove = 'mousemove',
-  mouseup = 'mouseup',
-  mouseenter = 'mouseenter',
-  mouseleave = 'mouseleave',
-}

package/canvas-event-system/src/index.html

@@ -1,12 +0,0 @@
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>canvas-event-system</title>
-  </head>
-  <body>
-    <canvas id="canvas" style="width: 500px; height: 350px; border: 1px solid #000;"></canvas>
-
-    <script src="./index.js"></script>
-    <script></script>
-  </body>
-</html>

package/canvas-event-system/src/index.ts

@@ -1,30 +0,0 @@
-import { Stage, Rect, Circle, EventNames } from './canvas-event-system';
-
-const canvas = document.querySelector('#canvas') as HTMLCanvasElement;
-const stage = new Stage(canvas);
-
-const rect = new Rect({
-  x: 50,
-  y: 50,
-  width: 250,
-  height: 175,
-  fillColor: 'green',
-});
-
-const circle = new Circle({
-  x: 200,
-  y: 200,
-  radius: 100,
-  fillColor: 'red',
-});
-
-rect.on(EventNames.mousedown, () => console.log('rect mousedown'));
-rect.on(EventNames.mouseup, () => console.log('rect mouseup'));
-rect.on(EventNames.mouseenter, () => console.log('rect mouseenter'));
-rect.on(EventNames.click, () => console.log('rect click'));
-
-circle.on(EventNames.click, () => console.log('circle click!!'));
-circle.on(EventNames.mouseleave, () => console.log('circle mouseleave!'));
-
-stage.add(rect);
-stage.add(circle);

package/canvas-event-system/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "jsx": "react",
-    "jsxFactory": "h",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    //json
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "baseUrl": ".",
-    "outDir": "./build"
-  }
-}

package/canvas-event-system/webpack.config.js

@@ -1,28 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  entry: {
-    index: "./src/index.ts",
-  },
-  output: {
-    filename: "[name].js",
-    path: path.resolve(__dirname, "dist"),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(ts|tsx)$/,
-        use: "babel-loader",
-      },
-    ],
-  },
-  devServer: {
-    contentBase: path.join(__dirname, "src"),
-    compress: true,
-    port: 9000,
-    host: "0.0.0.0",
-  },
-  resolve: {
-    extensions: [".ts", ".tsx", ".js", ".jsx"],
-  },
-};

package/canvas-example-main/canvas-example-main/.github/workflows/main.yml

@@ -1,62 +0,0 @@
-# This is a basic workflow to help you get started with Actions
-
-name: CI
-
-# Controls when the action will run.
-on:
-  # Triggers the workflow on push or pull request events but only for the master branch
-  push:
-    branches: [main]
-    paths:
-      - 'src/**'
-      - '.github/workflows/main.yml'
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  # This workflow contains a single job called "build"
-  build:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
-
-      - name: Use Node.js 18.20.4
-        uses: actions/setup-node@v1
-        with:
-          node-version: 18.20.4
-
-      - name: Install pnpm
-        run: npm i pnpm@9 -g
-
-      - name: Install Packages
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build
-
-      # 推到服务器
-      - name: rsync deployments
-        uses: burnett01/rsync-deployments@5.2.1
-        with:
-          switches: -avzr --delete
-          path: dist/
-          remote_path: /root/project/canvas/
-          remote_host: ${{ secrets.SSH_HOST }}
-          remote_port: ${{ secrets.SSH_PORT }}
-          remote_user: ${{ secrets.SSH_USER }}
-          remote_key: ${{ secrets.DEPLOY_KEY }}
-
-      # nginx 重启
-      - name: Restart server # 第三步，重启服务
-        uses: appleboy/ssh-action@master
-        with:
-          host: ${{ secrets.SSH_HOST }} # 下面三个配置与上一步类似
-          username: ${{ secrets.SSH_USER }}
-          port: ${{ secrets.SSH_PORT }} # SSH端口
-          key: ${{ secrets.DEPLOY_KEY }}
-          # 重启的脚本，根据自身情况做相应改动，一般要做的是migrate数据库以及重启服务器
-          script: |
-            nginx -s reload

package/canvas-example-main/canvas-example-main/README.md

@@ -1,13 +0,0 @@
-# canvas-example
-
-canvas 学习项目
-
-## 应用
-
-[扫雷小游戏-在线体验](https://canvas.xjq.icu/minesweeper)
-
-[扫雷小游戏-源码位置](https://github.com/xjq7/canvas-example/tree/main/src/pages/minesweeper)
-
-[原生 Canvas 练习项目](https://canvas.xjq.icu/practice)
-
-[原生 Canvas 练习项目-源码位置](https://github.com/xjq7/canvas-example/tree/main/src/pages/practice)

package/canvas-example-main/canvas-example-main/curved.html

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <canvas
-      id="canvas"
-      width="500"
-      height="500"
-      style="border: 1px solid #000000"
-    >
-    </canvas>
-    <script>
-      const canvas = document.querySelector('#canvas');
-      const ctx = canvas.getContext('2d');
-
-      // 脸
-      ctx.beginPath();
-      ctx.arc(200, 200, 50, 0, Math.PI * 2);
-      ctx.stroke();
-
-      // 左眼
-      ctx.beginPath();
-      ctx.arc(185, 185, 5, Math.PI, Math.PI * 2);
-      ctx.stroke();
-
-      // 右眼
-      ctx.beginPath();
-      ctx.arc(216, 185, 5, Math.PI, Math.PI * 2);
-      ctx.stroke();
-
-      // 嘴
-      ctx.beginPath();
-      ctx.arc(200, 215, 10, Math.PI / 8, (Math.PI * 7) / 8);
-      ctx.stroke();
-
-      // 头发
-      ctx.beginPath();
-      ctx.moveTo(75, 40);
-      ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-      ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-      ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-      ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-      ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-      ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-      ctx.fill();
-    </script>
-  </body>
-</html>

package/canvas-example-main/canvas-example-main/eslint.config.js

@@ -1,30 +0,0 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-empty-object-type': 'warn',
-    },
-  }
-);

package/canvas-example-main/canvas-example-main/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>xjq7 canvas example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>