@machete-jhun/canvas-studio 0.0.1

package/README.md

@@ -0,0 +1,157 @@
+# CanvasStudio 🎨
+
+基于 React + Konva 的轻量级 Canvas 画布编辑器组件
+
+## 特性
+
+- 🎨 支持多种图形：矩形、椭圆、文本、图片、SVG、二维码、条形码
+- 🖱️ 拖拽、缩放、旋转图形
+- ⌨️ 键盘快捷键支持
+- 📐 辅助线与对齐吸附
+- 🔲 棋盘格/点阵背景
+- 📏 标尺显示
+- 💪 完整的 TypeScript 类型支持
+- ⚡ 轻量级打包 (~33KB gzip: ~11KB)
+
+## 安装
+
+```bash
+npm install canvas-studio
+# 或
+pnpm add canvas-studio
+```
+
+### Peer Dependencies
+
+需要同时安装以下依赖：
+
+```bash
+npm install react react-dom konva react-konva react-konva-utils nanoid lodash-es js-base64 qrcode jsbarcode
+```
+
+## 基础使用
+
+```tsx
+import { CanvasStudio, type CanvasStudioRef } from 'canvas-studio'
+import { useRef } from 'react'
+
+function App() {
+  const canvasRef = useRef<CanvasStudioRef>(null)
+
+  return (
+    <CanvasStudio
+      ref={canvasRef}
+      width={800}
+      height={600}
+      backgroundType="grid"
+    />
+  )
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `width` | `number` | `800` | 画布宽度 |
+| `height` | `number` | `600` | 画布高度 |
+| `shapeList` | `MyShapeConfig[]` | `[]` | 图形列表 |
+| `bgShapeList` | `MyShapeConfig[]` | `[]` | 背景图形列表（锁定） |
+| `backgroundType` | `'grid' \| 'point' \| 'none'` | `'grid'` | 背景类型 |
+| `hideRuler` | `boolean` | `false` | 是否隐藏标尺 |
+| `ppmm` | `number` | `1` | 每毫米像素数 |
+| `className` | `string` | `''` | 自定义类名 |
+| `onShapeListChange` | `(shapes: MyShapeConfig[]) => void` | - | 图形变化回调 |
+| `onSelectedShapeIdsChange` | `(ids: string[]) => void` | - | 选中变化回调 |
+
+## Ref 方法
+
+```tsx
+const canvasRef = useRef<CanvasStudioRef>(null)
+
+// 获取 Konva Stage 实例
+canvasRef.current?.getStage()
+
+// 获取/设置选中图形
+canvasRef.current?.getSelectedShapeIds()
+canvasRef.current?.setSelectedShapeIds(['id1', 'id2'])
+
+// 增删改图形
+canvasRef.current?.addShapes([...shapes])
+canvasRef.current?.removeShapes(['id1'])
+canvasRef.current?.updateShape(shape)
+canvasRef.current?.getShapeList()
+
+// 适配内容
+canvasRef.current?.fitToContent()
+```
+
+## 创建图形
+
+```tsx
+import {
+  createRect,
+  createEllipse,
+  createText,
+  createImage,
+  createSvg,
+  createQrCode,
+  createBarCode,
+  copyShape,
+} from 'canvas-studio'
+
+// 创建矩形
+const rect = createRect(100, 100, 200, 150, '#ff0000')
+
+// 创建文本
+const text = createText('Hello', 24, 'Arial', 'font-id', 'font-url', 100, 100)
+
+// 创建图片
+const image = createImage('https://...', 'image.png', '图片', 100, 100, 200, 200)
+
+// 创建二维码
+const qrcode = createQrCode('https://example.com', 100, 100, 150)
+
+// 创建条形码
+const barcode = createBarCode('123456789', 100, 100, 200, 80)
+
+// 复制图形
+const copiedShape = copyShape(rect)
+
+// 添加到画布
+canvasRef.current?.addShapes([rect, text, image])
+```
+
+## 导出的常量
+
+```tsx
+import {
+  STAGE_CONTAINER_ID,
+  CUSTOMER_SHAPE_NAME,
+  BACKGROUND_SHAPE_NAME,
+  SHAPE_LAYER_NAME,
+  // ...
+} from 'canvas-studio'
+```
+
+## 导出的工具函数
+
+```tsx
+import {
+  isMac,
+  complementaryHexColor,
+  getPointerPosition,
+  getStageCenter,
+  getStageViewPortCenter,
+} from 'canvas-studio'
+```
+
+### 扣绿幕
+ffmpeg -i dragon_green_screen.mp4 -vf "chromakey=0x00FF00:0.15:0.1" -c:v libvpx-vp9 -pix_fmt yuva420p -b:v 5M output_transparent.webm
+### mov 转webm
+ffmpeg -i 你的文件名.mov -c:v libvpx-vp9 -pix_fmt yuva420p output.webm
+## License
+
+MIT
+
+

package/dist/CanvasStudio.d.ts

@@ -0,0 +1,46 @@
+import Konva from 'konva';
+import type { MyShapeConfig } from './types/shapeTypes';
+export interface CanvasStudioProps {
+    /** 画布宽度 */
+    width?: number;
+    /** 画布高度 */
+    height?: number;
+    /** 图形列表 - 用户绘制的形状 */
+    shapeList?: MyShapeConfig[];
+    /** 背景图形列表 - 锁定的背景图层 */
+    bgShapeList?: MyShapeConfig[];
+    /** 当选中的图形ID变化时触发 */
+    onSelectedShapeIdsChange?: (ids: string[]) => void;
+    /** 当图形列表变化时触发 */
+    onShapeListChange?: (shapes: MyShapeConfig[]) => void;
+    /** 当背景图形列表变化时触发 */
+    onBgShapeListChange?: (shapes: MyShapeConfig[]) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 背景类型: 'grid' 棋盘 | 'point' 点阵 | 'none' 无背景 */
+    backgroundType?: 'grid' | 'point' | 'none';
+    /** 是否隐藏标尺 */
+    hideRuler?: boolean;
+    /** 每毫米像素数 (1 = px模式) */
+    ppmm?: number;
+}
+export interface CanvasStudioRef {
+    /** 获取Stage实例 */
+    getStage: () => Konva.Stage | null;
+    /** 获取当前选中的图形ID */
+    getSelectedShapeIds: () => string[];
+    /** 设置选中的图形ID */
+    setSelectedShapeIds: (ids: string[]) => void;
+    /** 添加图形 */
+    addShapes: (shapes: MyShapeConfig[]) => void;
+    /** 删除图形 */
+    removeShapes: (ids: string[]) => void;
+    /** 更新图形 */
+    updateShape: (shape: MyShapeConfig) => void;
+    /** 获取所有图形 */
+    getShapeList: () => MyShapeConfig[];
+    /** 居中缩放适配所有内容 */
+    fitToContent: () => void;
+}
+export declare const CanvasStudio: import("react").ForwardRefExoticComponent<CanvasStudioProps & import("react").RefAttributes<CanvasStudioRef>>;
+export default CanvasStudio;

package/dist/CanvasStudio.styles.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+export declare const styles: {
+    wrapper: CSSProperties;
+    container: CSSProperties;
+    stage: CSSProperties;
+};
+export declare const getPointBackgroundStyle: (offsetX?: number, offsetY?: number, size?: number) => CSSProperties;
+export declare const getGridBackgroundStyle: (offsetX?: number, offsetY?: number, size?: number, color?: string) => CSSProperties;
+export declare const canvasStyle: CSSProperties;

package/dist/components/AuxiliaryLines/AuxiliaryLine.d.ts

@@ -0,0 +1,42 @@
+export interface RulerDataParams {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+    strokeWidth: number;
+    ppmm: number;
+    total?: number;
+}
+export interface RulerNode {
+    x: number;
+    y: number;
+    tickMarkScale: number;
+    label: string;
+}
+export interface RulerDataResult {
+    path: string;
+    nodes: RulerNode[];
+    interval: number;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+export declare function getRulerData(params: RulerDataParams, type: 'V' | 'H', defaultInterval?: number): RulerDataResult;
+export type AuxiliaryLineDefaultSetting = Pick<AuxiliaryLineType, 'color' | 'strokeWidth' | 'dashType'>;
+export interface AuxiliaryLineType {
+    vertical: boolean;
+    x: number;
+    y: number;
+    draggable: boolean;
+    strokeWidth: number;
+    color?: string;
+    visible: boolean;
+    dashType?: 'solid' | 'dash1' | 'dash2';
+    absolute?: boolean;
+    length?: number;
+}
+export declare function getAuxiliaryLineDash(dashType: AuxiliaryLineType['dashType'], strokeWidth?: number): number[];

package/dist/components/AuxiliaryLines/index.d.ts

@@ -0,0 +1,26 @@
+import Konva from 'konva';
+import React from 'react';
+import { type AuxiliaryLineDefaultSetting } from './AuxiliaryLine';
+export interface AuxiliaryLinesProps {
+    stageIns: Konva.Stage | null;
+    /** 隐藏标尺 */
+    hideRuler?: boolean;
+    /** 每毫米像素数 (1 = px, 其他值 = mm) */
+    currentPpmm?: number;
+    /** 辅助线数据 JSON 字符串 */
+    auxiliaryData?: string;
+    /** 是否显示辅助线 */
+    auxiliaryVisible?: boolean;
+    /** 是否锁定辅助线 */
+    auxiliaryLock?: boolean;
+    /** 全局辅助线设置 */
+    globalAuxiliaryLineSettings?: AuxiliaryLineDefaultSetting;
+    /** 禁用辅助线功能 */
+    disableAuxiliary?: boolean;
+}
+export interface AuxiliaryLinesRef {
+    rulerReRender: (stage: Konva.Stage) => void;
+    calcHelpLine: () => void;
+}
+declare const AuxiliaryLines: React.ForwardRefExoticComponent<AuxiliaryLinesProps & React.RefAttributes<AuxiliaryLinesRef>>;
+export default AuxiliaryLines;

package/dist/components/BackScreen.d.ts

@@ -0,0 +1,9 @@
+import { Image } from 'react-konva';
+import type { ComponentProps } from 'react';
+type BackScreenProps = {
+    screenId: string;
+    onLoad?: () => void;
+    fill: string;
+} & Omit<ComponentProps<typeof Image>, 'image'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<BackScreenProps, "ref"> & import("react").RefAttributes<import("konva/lib/shapes/Image").Image>>;
+export default _default;

package/dist/components/BarCodeSvgKonva.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import { Image as KonvaImage } from 'react-konva';
+import type { MyBarCodeShape } from '../types/shapeTypes';
+type BarCodeSvgKonvaProps = {
+    value: MyBarCodeShape;
+    onLoad?: () => void;
+    onShapeChange?: (shape: MyBarCodeShape) => void;
+} & Omit<ComponentProps<typeof KonvaImage>, 'image'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<BarCodeSvgKonvaProps, "ref"> & import("react").RefAttributes<import("konva/lib/shapes/Image").Image>>;
+export default _default;

package/dist/components/ContextMenu/BaseMenu.d.ts

@@ -0,0 +1,14 @@
+import type { FC, HTMLAttributes } from 'react';
+import type Konva from 'konva';
+import type { MyShapeConfig } from '../../types';
+type BaseMenuProps = HTMLAttributes<HTMLDivElement> & {
+    target: Konva.Node;
+    shapeList: MyShapeConfig[];
+    closeMenu: () => void;
+    onUpdateShapeList: (shapes: MyShapeConfig[]) => void;
+    onSetSelectedIds: (ids: string[]) => void;
+    onDeleteShape: (id: string) => void;
+    onDuplicateShape: (shape: MyShapeConfig) => void;
+};
+declare const BaseMenu: FC<BaseMenuProps>;
+export default BaseMenu;

package/dist/components/ContextMenu/ContextMenuItem.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes, ReactNode } from 'react';
+type ContextMenuItemProps = HTMLAttributes<HTMLDivElement> & {
+    icon?: ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+};
+declare const ContextMenuItem: FC<ContextMenuItemProps>;
+export default ContextMenuItem;

package/dist/components/ContextMenu/HelpLineMenu.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes } from 'react';
+import type Konva from 'konva';
+type HelpLineMenuProps = HTMLAttributes<HTMLDivElement> & {
+    target: Konva.Line | null;
+    closeMenu: () => void;
+};
+declare const HelpLineMenu: FC<HelpLineMenuProps>;
+export default HelpLineMenu;

package/dist/components/ContextMenu/index.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import type { Vector2d } from 'konva/lib/types';
+export interface ContextMenuRef {
+    show: (position: Vector2d) => void;
+    close: () => void;
+}
+interface ContextMenuProps {
+    children: ReactNode;
+    containerWidth?: number;
+    containerHeight?: number;
+}
+declare const ContextMenu: import("react").ForwardRefExoticComponent<ContextMenuProps & import("react").RefAttributes<ContextMenuRef>>;
+export default ContextMenu;
+export { default as BaseMenu } from './BaseMenu';
+export { default as HelpLineMenu } from './HelpLineMenu';
+export { default as ContextMenuItem } from './ContextMenuItem';

package/dist/components/Geometry.d.ts

@@ -0,0 +1,16 @@
+import type { KonvaEventObject } from 'konva/lib/Node';
+import { type KonvaNodeEvents } from 'react-konva';
+import React from 'react';
+import type { MyShapeConfig } from '../types/shapeTypes';
+interface GeometryProps extends KonvaNodeEvents {
+    shapeProps: MyShapeConfig;
+    hideDelIcon?: boolean;
+    onSelect?: (evt: KonvaEventObject<Event>) => void;
+    onChange?: (config: MyShapeConfig) => void;
+    onDragStart?: (evt: KonvaEventObject<DragEvent>) => void;
+    onDragEnd?: (evt: KonvaEventObject<DragEvent>) => void;
+    onLoad?: (type?: string) => void;
+    onShapeChange?: (shape: MyShapeConfig) => void;
+}
+declare const _default: React.NamedExoticComponent<GeometryProps>;
+export default _default;

package/dist/components/GroupTransformerGeometry.d.ts

@@ -0,0 +1,14 @@
+import Konva from 'konva';
+import type { FC } from 'react';
+import type { KonvaEventObject } from 'konva/lib/Node';
+type TransformerGeometryProps = Konva.TransformerConfig & {
+    stageIns: Konva.Stage | undefined | null;
+    selectedShapeIds: string[] | undefined | null;
+    rotateEnabled?: boolean;
+    shaleSelector?: string;
+    enabledAnchor?: string[];
+    onTransformEnd?: (e: KonvaEventObject<Event>) => void;
+    onDragEnd?: (e: KonvaEventObject<Event>) => void;
+};
+declare const GroupTransformerGeometry: FC<TransformerGeometryProps>;
+export default GroupTransformerGeometry;

package/dist/components/ImageKonva.d.ts

@@ -0,0 +1,8 @@
+import { Image } from 'react-konva';
+import type { ComponentProps } from 'react';
+type ImageKonvaProps = {
+    url: string;
+    onLoad?: () => void;
+} & Omit<ComponentProps<typeof Image>, 'image'>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ImageKonvaProps, "ref"> & import("react").RefAttributes<import("konva/lib/shapes/Image").Image>>;
+export default _default;

package/dist/components/QrCodeSvgKonva.d.ts

@@ -0,0 +1,8 @@
+import type { MyQrCodeShape } from '../types/shapeTypes';
+type QrCodeSvgKonvaProps = {
+    value: MyQrCodeShape;
+    onLoad?: () => void;
+    onShapeChange?: (shape: MyQrCodeShape) => void;
+};
+declare const _default: import("react").ForwardRefExoticComponent<QrCodeSvgKonvaProps & import("react").RefAttributes<import("konva/lib/shapes/Image").Image>>;
+export default _default;

package/dist/components/RiveKonva.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+type RiveInputItem = {
+    name: string;
+    type: 'number' | 'boolean' | 'color';
+    value: unknown;
+    bindName?: string;
+};
+type RiveKonvaProps = {
+    value: {
+        id: string;
+        url: string;
+        stateMachine: string;
+        artboard?: string;
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        inputs?: RiveInputItem[];
+    };
+    onLoad?: () => void;
+    variableObj: Record<string, unknown>;
+};
+declare const RiveKonva: React.ForwardRefExoticComponent<RiveKonvaProps & React.RefAttributes<import("konva/lib/shapes/Image").Image>>;
+export default RiveKonva;

package/dist/components/StageMouseControl.d.ts

@@ -0,0 +1,19 @@
+import type { FC, HTMLAttributes } from 'react';
+import type Konva from 'konva';
+import type { MyShapeConfig } from '../types';
+export type StageMouseControlCallbacks = {
+    onSetActiveShapeIds: (ids: string[]) => void;
+    onAddActiveShapeId: (id: string) => void;
+    onRemoveActiveShapeId: (id: string) => void;
+    onUpdateShapeList: (shapes: MyShapeConfig[]) => void;
+    onDeleteShape: (id: string) => void;
+    onDuplicateShape: (shape: MyShapeConfig) => void;
+};
+type StageMouseControlProps = {
+    stageIns: Konva.Stage | null;
+    selectedShapeIds: string[];
+    shapeList: MyShapeConfig[];
+    callbacks: StageMouseControlCallbacks;
+} & HTMLAttributes<HTMLElement>;
+declare const StageMouseControl: FC<StageMouseControlProps>;
+export default StageMouseControl;

package/dist/components/SvgImageKonva.d.ts

@@ -0,0 +1,10 @@
+type SvgImageKonvaProps = {
+    url: string;
+    colors?: {
+        origin: string;
+        target: string;
+    }[];
+    onLoad?: () => void;
+};
+declare const _default: import("react").ForwardRefExoticComponent<SvgImageKonvaProps & import("react").RefAttributes<import("konva/lib/shapes/Image").Image>>;
+export default _default;

package/dist/components/VideoKonva.d.ts

@@ -0,0 +1,23 @@
+import type { RemoveShapeProps } from '../types';
+import type { ImageConfig } from 'konva/lib/Node';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    id: string;
+    rotation: number;
+    x: number;
+    y: number;
+    lock?: boolean;
+    name: string;
+    displayName: string;
+    opacity: number;
+    info?: Record<string, unknown>;
+    visible: boolean;
+    height?: number;
+} & Required<Pick<import("konva/lib/Shape").ShapeConfig, import("..").RequestShapeProps>> & {
+    value: {
+        url: string;
+        playbackRate?: number;
+        loop?: boolean;
+    };
+    onLoad?: () => void;
+} & Omit<ImageConfig, RemoveShapeProps> & import("react").RefAttributes<import("konva/lib/shapes/Image").Image>>;
+export default _default;

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Geometry } from './Geometry';
+export { default as ImageKonva } from './ImageKonva';
+export { default as SvgImageKonva } from './SvgImageKonva';
+export { default as QrCodeSvgKonva } from './QrCodeSvgKonva';
+export { default as BarCodeSvgKonva } from './BarCodeSvgKonva';
+export { default as GroupTransformerGeometry } from './GroupTransformerGeometry';
+export { default as StageMouseControl } from './StageMouseControl';

package/dist/constants/index.d.ts

@@ -0,0 +1,31 @@
+export declare const STAGE_CONTAINER_ID = "c0";
+export declare const CUSTOMER_SHAPE_NAME = "c1";
+export declare const BACKGROUND_SHAPE_NAME = "c2";
+export declare const AREA_SHAPE_NAME = "c3";
+export declare const DRAW_AREA_SHAPE_NAME = "c4";
+export declare const SHAPE_LAYER_NAME = "c5";
+export declare const SHAPE_GROUP = "c6";
+export declare const BACKGROUND_LAYER_NAME = "c7";
+export declare const DRAW_AREA_LAYER_NAME = "c8";
+export declare const AUXILIARY_LAYER_NAME = "c9";
+export declare const AUXILIARY_GROUP = "ca";
+export declare const HELP_LINE_NAME = "cb";
+export declare const SNAPPING_LINE_NAME = "cc";
+export declare const RULER_RECT_V = "cd";
+export declare const RULER_RECT_H = "ce";
+export declare const SHAPE_TYPES: {
+    readonly IMAGE: "image";
+    readonly RECT: "rect";
+    readonly TEXT: "text";
+    readonly SVG: "svg";
+    readonly QR_CODE: "qr_code";
+    readonly BAR_CODE: "bar_code";
+    readonly RIVE: "rive";
+    readonly VIDEO: "video";
+    readonly BACK_SCREEN: "back_screen";
+};
+export declare const THEME_COLOR: {
+    active: string;
+    disable: string;
+    default: string;
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { CanvasStudio, type CanvasStudioProps, type CanvasStudioRef } from './CanvasStudio';
+export { default } from './CanvasStudio';
+export * from './types';
+export * from './constants';
+export * from './utils/shapeTools';
+export { isMac, complementaryHexColor, getPointerPosition, getStageCenter, getStageViewPortCenter, } from './utils';