xiaodao-painter 0.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leeqwind
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,201 @@
+# xiaodao-painter
+
+A self-contained, embeddable SVG whiteboard component for Vue 3. Built with TypeScript, Pinia, and Vite.
+
+Supports drawing tools, selection, resize, pan/zoom, undo/redo, clipboard, layer ordering, color palettes, i18n, and light/dark themes — all with two-way data binding via `v-model`.
+
+![Preview](./img/preview.png)
+
+## Features
+
+- **9 tools** — Select, Pan, Zoom, Pencil, Line, Circle, Rectangle, Triangle, Star
+- **Selection & manipulation** — click to select, box-select, drag-move, 8-handle resize (Shift = symmetric), layer reorder (bring to front / send to back)
+- **Pan & zoom** — grab-drag panning, discrete zoom steps (10% – 1000%) anchored at cursor position
+- **Undo / redo** — full stroke-level undo/redo stacks
+- **Internal clipboard** — cut, copy, paste (within the whiteboard, offset +20 px)
+- **Color system** — stroke (foreground) and fill (background) color slots, per-stroke color application to selections, canvas background color with transparent grid support
+- **Themes** — light and dark, with auto-switching foreground color on theme change
+- **Internationalization** — Chinese (zh-CN) and English (en-US) built in
+- **Keyboard shortcuts** — Delete, Escape, Ctrl+Z / Ctrl+Y / Ctrl+X / Ctrl+C / Ctrl+V
+- **Modifier keys** — Ctrl = constrain 1:1 ratio, Shift = center-out expansion / 45° line snap
+- **Two-way binding** — parent reads/writes full drawing data via `v-model`
+
+## Installation
+
+Install the package from npm:
+
+```bash
+npm install xiaodao-painter
+```
+
+Or with pnpm / yarn:
+
+```bash
+pnpm add xiaodao-painter
+yarn add xiaodao-painter
+```
+
+## Usage
+
+First, make sure [Pinia](https://pinia.vuejs.org/) is registered in your Vue app (xiaodao-painter depends on Pinia internally):
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')
+```
+
+Then import and use the `Painter` component:
+
+```vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Painter } from 'xiaodao-painter'
+import type { PainterData } from 'xiaodao-painter'
+
+const data = ref<PainterData>({
+  strokes: [],
+  canvasWidth: 800,
+  canvasHeight: 600,
+})
+
+watch(data, (val) => {
+  console.log('Drawing data changed:', val)
+}, { deep: true })
+</script>
+
+<template>
+  <Painter
+    v-model="data"
+    theme="light"
+    locale="zh-CN"
+  />
+</template>
+```
+
+With explicit dimensions and dark theme:
+
+```html
+<Painter
+  v-model="data"
+  theme="dark"
+  locale="en-US"
+  width="1200"
+  height="800"
+/>
+```
+
+With a custom canvas background color:
+
+```html
+<Painter
+  v-model="data"
+  :modelValue="{
+    strokes: [],
+    canvasWidth: 800,
+    canvasHeight: 600,
+    canvasBackgroundColor: '#f5f5f5',
+  }"
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `PainterData` | `{ strokes: [], canvasWidth: 800, canvasHeight: 600 }` | Two-way bound drawing data (supports `canvasBackgroundColor`) |
+| `theme` | `'light' \| 'dark'` | `'light'` | UI theme |
+| `locale` | `string` | `'zh-CN'` | UI language (`'zh-CN'` or `'en-US'`) |
+| `width` | `string \| number` | `'100%'` | Component width (CSS value or px number) |
+| `height` | `string \| number` | `'100%'` | Component height (CSS value or px number) |
+
+## Data Model
+
+```ts
+interface PainterData {
+  strokes: Stroke[]
+  canvasWidth: number
+  canvasHeight: number
+  canvasBackgroundColor?: string
+}
+
+type ToolType = 'select' | 'pencil' | 'line' | 'circle' | 'rect' | 'triangle' | 'star' | 'text' | 'pan' | 'zoom'
+
+interface Point {
+  x: number
+  y: number
+}
+
+interface Stroke {
+  id: string
+  type: ToolType
+  x: number
+  y: number
+  width: number
+  height: number
+  points: Point[]
+  strokeColor: string
+  fillColor: string
+  strokeWidth: number
+  text?: string
+  fontSize?: number
+  textAlign?: 'left' | 'center' | 'right'
+  textColor?: string
+  textAutoWidth?: boolean
+}
+```
+
+## Keyboard Shortcuts
+
+| Key | Action |
+| --- | --- |
+| `Delete` / `Backspace` | Delete selected strokes |
+| `Escape` | Clear selection |
+| `Ctrl + Z` | Undo |
+| `Ctrl + Y` / `Ctrl + Shift + Z` | Redo |
+| `Ctrl + X` | Cut |
+| `Ctrl + C` | Copy |
+| `Ctrl + V` | Paste (offset +20 px) |
+
+## Project Structure
+
+```
+src/
+  components/painter/
+    Painter.vue            # Public entry (props, v-model, theme sync)
+    Whiteboard.vue         # SVG canvas, keyboard shortcuts, pan/zoom centering
+    Toolbar.vue            # Left toolbar (tools, canvas settings, color indicators)
+    ColorPalette.vue       # Color picker popover
+    SelectionOverlay.vue   # Selection bounding box + resize handles
+    StrokeRenderer.vue     # Renders a single stroke as SVG
+    composables/
+      useDrawing.ts        # Mouse interaction engine (draw, select, move, resize)
+      useI18n.ts           # Locale and theme provide/inject
+    stores/
+      canvas.ts            # Main store (strokes, colors, pan/zoom, undo, clipboard)
+      tools.ts             # Active tool state
+    utils/
+      geometry.ts          # Hit testing, star/triangle vertices, bounding box
+      svg.ts               # Stroke-to-SVG element conversion
+      i18n.ts              # zh-CN / en-US dictionaries
+    types/
+      index.ts             # TypeScript types and default constants
+    style.css              # CSS custom properties (themes)
+```
+
+## Development
+
+```bash
+npm run dev     # Start dev server
+npm run build   # Type-check and build for production
+npm run preview # Preview production build
+```
+
+## License
+
+MIT

package/dist/types/components/painter/ColorPalette.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/painter/Painter.vue.d.ts

@@ -0,0 +1,22 @@
+import type { PainterData } from './types/index.ts';
+import './style.css';
+type __VLS_Props = {
+    theme?: 'light' | 'dark';
+    locale?: string;
+    modelValue?: PainterData;
+    width?: string | number;
+    height?: string | number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (data: PainterData) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((data: PainterData) => any) | undefined;
+}>, {
+    height: string | number;
+    width: string | number;
+    theme: "light" | "dark";
+    locale: string;
+    modelValue: PainterData;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/painter/SelectionOverlay.vue.d.ts

@@ -0,0 +1,8 @@
+import type { Stroke } from './types';
+type __VLS_Props = {
+    stroke: Stroke;
+    startResize: (strokeId: string, handle: string, cursor: string, event: MouseEvent | TouchEvent) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/painter/StrokeRenderer.vue.d.ts

@@ -0,0 +1,8 @@
+import type { Stroke } from './types';
+type __VLS_Props = {
+    stroke: Stroke;
+    isSelected: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/painter/Toolbar.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/painter/Whiteboard.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/painter/composables/useDrawing.d.ts

@@ -0,0 +1,23 @@
+import type { Ref } from 'vue';
+import type { Point, Stroke } from '../types';
+export declare function useDrawing(whiteboardRef: Ref<HTMLElement | null>): {
+    isDrawing: Ref<boolean, boolean>;
+    previewStroke: import("vue").ComputedRef<Stroke | null>;
+    onMouseDown: (event: MouseEvent) => void;
+    onMouseMove: (event: MouseEvent) => void;
+    onMouseUp: (event: MouseEvent) => void;
+    onTouchStart: (event: TouchEvent) => void;
+    onTouchMove: (event: TouchEvent) => void;
+    onTouchEnd: (event: TouchEvent) => void;
+    getSVGPoint: (event: MouseEvent) => Point;
+    updateModifiers: (e: KeyboardEvent) => void;
+    clearModifiers: () => void;
+    isResizing: Ref<boolean, boolean>;
+    resizeCursor: Ref<string, string>;
+    startResize: (strokeId: string, handle: string, cursor: string, event: MouseEvent | TouchEvent) => void;
+    commitTextEdit: (strokeId: string, text: string) => void;
+    cancelTextEdit: (strokeId: string) => void;
+    startEditText: (strokeId: string) => void;
+    saveCurrentTextEdit: () => void;
+    setTextContentGetter: (getter: () => string | null) => void;
+};

package/dist/types/components/painter/composables/useI18n.d.ts

@@ -0,0 +1,13 @@
+import type { Locale } from '../utils/i18n';
+export declare const I18N_KEY: string;
+export declare const THEME_KEY: string;
+export declare function provideLocale(locale: Locale): void;
+export declare function useI18n(): {
+    locale: Locale;
+    t: (key: string) => string;
+};
+export declare function provideTheme(theme: 'light' | 'dark'): void;
+export declare function useTheme(): 'light' | 'dark';
+export declare const ROOT_EL_KEY: unique symbol;
+export declare function provideRootEl(el: Readonly<import('vue').Ref<HTMLElement | null>>): void;
+export declare function useRootEl(): import('vue').Ref<HTMLElement | null> | null;

package/dist/types/components/painter/stores/canvas.d.ts

@@ -0,0 +1,238 @@
+import type { Stroke } from '../types';
+export declare const useCanvasStore: import("pinia").SetupStoreDefinition<"canvas", {
+    strokes: import("vue").Ref<{
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    }[], Stroke[] | {
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    }[]>;
+    selectedStrokeIds: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    selectedStrokeId: import("vue").ComputedRef<string | null>;
+    selectedStroke: import("vue").ComputedRef<{
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    } | null>;
+    selectedStrokes: import("vue").ComputedRef<{
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    }[]>;
+    selectedStrokeColor: import("vue").ComputedRef<string | null>;
+    selectedFillColor: import("vue").ComputedRef<string | null>;
+    selectedTextColor: import("vue").ComputedRef<string | null>;
+    foregroundColor: import("vue").Ref<string, string>;
+    backgroundColor: import("vue").Ref<string, string>;
+    activeColorSlot: import("vue").Ref<"background" | "textColor" | "foreground", "background" | "textColor" | "foreground">;
+    showColorPalette: import("vue").Ref<boolean, boolean>;
+    isSelecting: import("vue").Ref<boolean, boolean>;
+    selectionBox: import("vue").Ref<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null, {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
+    toggleColorPalette: () => void;
+    hideColorPalette: () => void;
+    addStroke: (stroke: Stroke) => void;
+    updateStroke: (id: string, changes: Partial<Stroke>) => void;
+    selectStroke: (id: string | null) => void;
+    selectStrokes: (ids: string[]) => void;
+    clearSelection: () => void;
+    isSelected: (id: string) => boolean;
+    deleteSelectedStrokes: () => void;
+    setColorSlot: (slot: "foreground" | "background" | "textColor") => void;
+    setColor: (color: string) => void;
+    buildStroke: (type: Stroke["type"], x: number, y: number, width: number, height: number, points: Stroke["points"]) => Stroke;
+    strokeWidth: import("vue").Ref<number, number>;
+    setStrokeWidth: (w: number) => void;
+    canvasBackgroundColor: import("vue").Ref<string, string>;
+    setCanvasBackgroundColor: (color: string) => void;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+    undoStack: import("vue").Ref<{
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    }[][], Stroke[][] | {
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    }[][]>;
+    pushUndo: () => void;
+    undo: () => void;
+    redo: () => void;
+    moveSelectedUp: () => void;
+    moveSelectedDown: () => void;
+    syncFromParent: (data: Stroke[]) => void;
+    getStrokeDisplayBounds: (stroke: Stroke) => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    clipboard: import("vue").Ref<{
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    }[], Stroke[] | {
+        id: string;
+        type: import("../types").ToolType;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        points: {
+            x: number;
+            y: number;
+        }[];
+        strokeColor: string;
+        fillColor: string;
+        strokeWidth: number;
+        text?: string | undefined;
+        fontSize?: number | undefined;
+        textAlign?: "left" | "center" | "right" | undefined;
+        textColor?: string | undefined;
+        textAutoWidth?: boolean | undefined;
+    }[]>;
+    cutSelectedStrokes: () => void;
+    copySelectedStrokes: () => void;
+    pasteStrokes: () => void;
+    canvasWidth: import("vue").Ref<number, number>;
+    canvasHeight: import("vue").Ref<number, number>;
+    panX: import("vue").Ref<number, number>;
+    panY: import("vue").Ref<number, number>;
+    zoomLevel: import("vue").Ref<number, number>;
+    showZoomIndicator: import("vue").Ref<boolean, boolean>;
+    viewBox: import("vue").ComputedRef<string>;
+    canvasTransform: import("vue").ComputedRef<string>;
+    setPan: (x: number, y: number) => void;
+    setCanvasSize: (w: number, h: number) => void;
+    zoomAt: (screenX: number, screenY: number, factor: number) => void;
+    continuousZoomAt: (screenX: number, screenY: number, newZoom: number) => void;
+    getZoomPercent: () => number;
+    dataVersion: import("vue").Ref<number, number>;
+    theme: import("vue").Ref<"dark" | "light", "dark" | "light">;
+    textColor: import("vue").Ref<string, string>;
+    editingTextId: import("vue").Ref<string | null, string | null>;
+    hoveredTextId: import("vue").Ref<string | null, string | null>;
+    reset: () => void;
+}>;

package/dist/types/components/painter/stores/tools.d.ts

@@ -0,0 +1,6 @@
+import type { ToolType } from '../types';
+export declare const useToolsStore: import("pinia").SetupStoreDefinition<"tools", {
+    activeTool: import("vue").Ref<ToolType, ToolType>;
+    setTool: (tool: ToolType) => void;
+    reset: () => void;
+}>;

package/dist/types/components/painter/types/index.d.ts

@@ -0,0 +1,37 @@
+export type ToolType = 'select' | 'pencil' | 'line' | 'circle' | 'rect' | 'triangle' | 'star' | 'text' | 'pan' | 'zoom';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Stroke {
+    id: string;
+    type: ToolType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    points: Point[];
+    strokeColor: string;
+    fillColor: string;
+    strokeWidth: number;
+    text?: string;
+    fontSize?: number;
+    textAlign?: 'left' | 'center' | 'right';
+    textColor?: string;
+    textAutoWidth?: boolean;
+}
+export interface CanvasConfig {
+    width: number;
+    height: number;
+}
+export interface PainterData {
+    strokes: Stroke[];
+    canvasWidth: number;
+    canvasHeight: number;
+    canvasBackgroundColor?: string;
+}
+export declare const DEFAULT_CANVAS_WIDTH = 800;
+export declare const DEFAULT_CANVAS_HEIGHT = 600;
+export declare const STROKE_WIDTH = 3;
+export declare const DEFAULT_FONT_SIZE = 16;
+export declare const HIT_THRESHOLD = 8;

package/dist/types/components/painter/utils/geometry.d.ts

@@ -0,0 +1,13 @@
+import type { Point, Stroke } from '../types';
+export declare function starVertices(cx: number, cy: number, rx: number, ry: number, flipY?: boolean, innerRatio?: number): Point[];
+export declare function triangleVertices(x: number, y: number, w: number, h: number): Point[];
+export declare function pointToSegmentDistance(p: Point, a: Point, b: Point): number;
+export declare function pointInPolygon(p: Point, polygon: Point[]): boolean;
+export declare function pointInEllipse(p: Point, cx: number, cy: number, rx: number, ry: number): boolean;
+export declare function computeBoundingBox(points: Point[]): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function hitTestStroke(p: Point, stroke: Stroke): boolean;

package/dist/types/components/painter/utils/i18n.d.ts

@@ -0,0 +1,2 @@
+export type Locale = 'zh-CN' | 'en-US';
+export declare function t(locale: Locale, key: string): string;

package/dist/types/components/painter/utils/svg.d.ts

@@ -0,0 +1,7 @@
+import type { Stroke, Point } from '../types';
+export declare function pencilToPathD(points: Point[]): string;
+export interface SvgAttrs {
+    tag: string;
+    attrs: Record<string, string | number>;
+}
+export declare function strokeToSvg(stroke: Stroke): SvgAttrs;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+import Painter from './components/painter/Painter.vue';
+import type { PainterData, Stroke, Point, ToolType, CanvasConfig } from './components/painter/types';
+import { DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT, STROKE_WIDTH, DEFAULT_FONT_SIZE, HIT_THRESHOLD } from './components/painter/types';
+import './components/painter/style.css';
+export { Painter, Painter as default, DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT, STROKE_WIDTH, DEFAULT_FONT_SIZE, HIT_THRESHOLD, };
+export type { PainterData, Stroke, Point, ToolType, CanvasConfig, };

package/dist/xiaodao-painter.css

@@ -0,0 +1,2 @@
+.toolbar[data-v-9532ade7]{background:var(--wb-surface-toolbar);border-right:1px solid var(--wb-border);flex-direction:column;flex-shrink:0;align-items:center;gap:2px;width:52px;padding:8px 6px;display:flex}.tool-group[data-v-9532ade7]{flex-direction:column;gap:2px;display:flex}.tools-scroll[data-v-9532ade7]{scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex-shrink:1;gap:2px;min-height:0;display:flex;overflow:hidden auto}.tools-scroll[data-v-9532ade7]::-webkit-scrollbar{display:none}.scroll-btn[data-v-9532ade7]{border-radius:var(--wb-radius-sm);width:40px;height:22px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.scroll-btn[data-v-9532ade7]:hover:not(:disabled){background:var(--wb-surface-hover);color:var(--wb-text)}.scroll-btn[data-v-9532ade7]:disabled{opacity:.25;cursor:default}.scroll-icon[data-v-9532ade7]{pointer-events:none;width:14px;height:14px}.tool-btn[data-v-9532ade7]{border-radius:var(--wb-radius-sm);width:40px;height:40px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.tool-btn[data-v-9532ade7]:hover{background:var(--wb-surface-hover);color:var(--wb-text)}.tool-btn.active[data-v-9532ade7]{background:var(--wb-accent);color:#fff}.tool-icon[data-v-9532ade7]{pointer-events:none;width:22px;height:22px}.spacer[data-v-9532ade7]{flex:1}.canvas-size-wrapper[data-v-9532ade7]{margin-bottom:6px;position:relative}.canvas-size-backdrop[data-v-9532ade7]{z-index:9998;position:fixed;inset:0}.canvas-size-popover[data-v-9532ade7]{background:var(--wb-surface-toolbar);border:1px solid var(--wb-border);z-index:9999;border-radius:8px;min-width:180px;padding:12px 14px;box-shadow:0 2px 8px #0000001a}.popover-title[data-v-9532ade7]{color:var(--wb-text);margin-bottom:10px;font-size:13px;font-weight:600}.popover-field[data-v-9532ade7]{align-items:center;gap:6px;margin-bottom:8px;display:flex}.popover-label[data-v-9532ade7]{color:var(--wb-text-secondary);flex-shrink:0;width:32px;font-size:12px}.popover-input[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);width:70px;height:28px;color:var(--wb-text);text-align:right;border-radius:4px;outline:none;flex:1;padding:0 6px;font-size:13px}.popover-input[data-v-9532ade7]:focus{border-color:var(--wb-accent)}.popover-unit[data-v-9532ade7]{color:var(--wb-text-secondary);flex-shrink:0;width:20px;font-size:11px}.bg-color-row[data-v-9532ade7]{align-items:center;gap:4px;display:flex}.bg-radio-btn[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);width:28px;height:28px;color:var(--wb-text-secondary);cursor:pointer;transition:all var(--wb-transition);border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.bg-radio-btn[data-v-9532ade7]:hover{border-color:var(--wb-text-secondary)}.bg-radio-btn.active[data-v-9532ade7]{border-color:var(--wb-accent);box-shadow:0 0 0 1px var(--wb-accent)}.bg-radio-btn--transparent[data-v-9532ade7]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px}.bg-color-fill[data-v-9532ade7]{border:1px solid var(--wb-border);border-radius:2px;width:16px;height:16px;display:block}.hidden-color-input[data-v-9532ade7]{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.popover-actions[data-v-9532ade7]{justify-content:flex-end;gap:6px;margin-top:10px;display:flex}.popover-btn[data-v-9532ade7]{border:1px solid var(--wb-border);background:var(--wb-surface);color:var(--wb-text);cursor:pointer;transition:all var(--wb-transition);border-radius:4px;padding:4px 12px;font-size:12px}.popover-btn[data-v-9532ade7]:hover{background:var(--wb-surface-hover)}.popover-btn.confirm[data-v-9532ade7]{background:var(--wb-accent);color:#fff;border-color:var(--wb-accent)}.popover-btn.confirm[data-v-9532ade7]:hover{opacity:.9}.color-section[data-v-9532ade7]{flex-direction:column;align-items:center;gap:6px;padding:0;display:flex}.color-indicator[data-v-9532ade7]{cursor:pointer;width:32px;height:32px;transition:all var(--wb-transition);border:2px solid #0000;border-radius:8px;padding:2px;box-shadow:0 2px 8px #0000001a}.color-indicator[data-v-9532ade7]:hover{background:var(--wb-surface-hover);border-color:var(--wb-border)}.color-indicator.active[data-v-9532ade7]{border-color:var(--wb-accent);background:var(--wb-accent-light)}.color-indicator.disabled[data-v-9532ade7]{opacity:.35;cursor:default;pointer-events:none}.color-swatch[data-v-9532ade7]{border:1px solid var(--wb-border);border-radius:6px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.bg[data-v-9532ade7]{border-style:dashed;border-radius:6px}.mixed[data-v-9532ade7],.transparent[data-v-9532ade7]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px!important}.mixed-icon[data-v-9532ade7]{width:16px;height:16px;color:var(--wb-text-secondary);pointer-events:none}.text-color-swatch[data-v-9532ade7]{justify-content:center;align-items:center;display:flex;position:relative}.text-color-icon[data-v-9532ade7]{pointer-events:none;width:18px;height:18px;transition:color .15s}.selected[data-v-d3706fa4]{filter:drop-shadow(0 0 3px #0078d799)}.whiteboard[data-v-975e0b8b]{background:var(--wb-canvas-surround);flex:1;position:relative;overflow:hidden}.canvas-wrapper[data-v-975e0b8b]{will-change:transform;margin:auto;position:absolute}.canvas[data-v-975e0b8b]{display:block}.canvas-toolbar[data-v-975e0b8b]{z-index:50;flex-direction:column;gap:2px;display:flex;position:absolute;top:8px;right:8px}.canvas-tb-btn[data-v-975e0b8b]{border:1px solid var(--wb-border);background:var(--wb-surface);width:28px;height:28px;color:var(--wb-text);cursor:pointer;transition:all var(--wb-transition);opacity:.85;border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex}.canvas-tb-btn[data-v-975e0b8b]:hover:not(:disabled){background:var(--wb-surface-hover);opacity:1}.canvas-tb-btn[data-v-975e0b8b]:disabled{opacity:.35;cursor:default}.canvas-tb-btn--danger[data-v-975e0b8b]:hover:not(:disabled){color:#ef4444;border-color:#ef4444}.tb-separator[data-v-975e0b8b]{background:var(--wb-border);height:1px;margin:2px 4px}.zoom-control[data-v-975e0b8b]{color:#fff;z-index:100;background:#000000b3;border-radius:6px;align-items:center;gap:4px;padding:4px 6px;font-family:system-ui,sans-serif;font-size:13px;display:flex;position:absolute;bottom:16px;right:16px}.zoom-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:background .15s;display:flex}.zoom-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.zoom-percent[data-v-975e0b8b]{text-align:center;-webkit-user-select:none;user-select:none;min-width:40px}.text-format-control[data-v-975e0b8b]{color:#fff;z-index:100;background:#000000b3;border-radius:6px;align-items:center;gap:2px;padding:4px 6px;font-family:system-ui,sans-serif;font-size:13px;display:flex;position:absolute;bottom:16px;right:16px}.font-size-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;transition:background .15s;display:flex}.font-size-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.font-size-value[data-v-975e0b8b]{text-align:center;-webkit-user-select:none;user-select:none;min-width:28px;font-size:12px}.text-align-separator[data-v-975e0b8b]{background:#ffffff4d;width:1px;height:16px;margin:0 4px}.text-align-btn[data-v-975e0b8b]{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:24px;padding:0;transition:background .15s;display:flex}.text-align-btn[data-v-975e0b8b]:hover{background:#ffffff4d}.text-align-btn.active[data-v-975e0b8b]{background:#6366f199}.overlay[data-v-a8b8bc9c]{z-index:100;position:fixed;inset:0}.color-palette[data-v-a8b8bc9c]{background:var(--wb-surface);border:1px solid var(--wb-border);z-index:101;border-radius:8px;flex-direction:column;gap:14px;min-width:300px;padding:16px;display:flex;box-shadow:0 1px 6px #0000001a}.palette-header[data-v-a8b8bc9c]{border-bottom:1px solid var(--wb-border);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.palette-title[data-v-a8b8bc9c]{color:var(--wb-text);font-size:14px;font-weight:600}.current-color[data-v-a8b8bc9c]{align-items:center;display:flex}.current-swatch[data-v-a8b8bc9c]{border:2px solid var(--wb-border);border-radius:50%;width:28px;height:28px}.current-swatch.fill[data-v-a8b8bc9c]{border-radius:6px}.current-transparent[data-v-a8b8bc9c]{justify-content:center;align-items:center;display:flex;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px!important}.preset-grid[data-v-a8b8bc9c]{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.color-swatch[data-v-a8b8bc9c]{cursor:pointer;width:30px;height:30px;transition:all var(--wb-transition);border:2px solid #0000;border-radius:50%;outline:none;padding:0}.color-swatch[data-v-a8b8bc9c]:hover{border-color:var(--wb-text);box-shadow:var(--wb-shadow-md);z-index:1;transform:scale(1.15)}.color-swatch[data-v-a8b8bc9c]:active{transform:scale(.95)}.transparent-row[data-v-a8b8bc9c]{justify-content:center;display:flex}.transparent-swatch[data-v-a8b8bc9c]{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/8px 8px;justify-content:center;align-items:center;display:flex}.palette-footer[data-v-a8b8bc9c]{border-top:1px solid var(--wb-border);padding-top:10px}.custom-color[data-v-a8b8bc9c]{align-items:center;gap:10px;display:flex}.color-picker[data-v-a8b8bc9c]{border:2px solid var(--wb-border);border-radius:var(--wb-radius-sm);cursor:pointer;background:0 0;width:36px;height:36px;padding:2px}.color-picker[data-v-a8b8bc9c]::-webkit-color-swatch-wrapper{padding:0}.color-picker[data-v-a8b8bc9c]::-webkit-color-swatch{border:none;border-radius:4px}.custom-label[data-v-a8b8bc9c]{color:var(--wb-text-secondary);font-size:13px;font-weight:500}:root,.wb-theme-light{--wb-bg:#f0f2f5;--wb-surface:#fff;--wb-surface-hover:#f5f6f8;--wb-surface-toolbar:#f8f9fb;--wb-text:#1a1a2e;--wb-text-secondary:#6b7280;--wb-border:#e5e7eb;--wb-accent:#6366f1;--wb-accent-light:#eef2ff;--wb-canvas-bg:#fff;--wb-canvas-surround:#e0e0e0;--wb-grid-a:#fff;--wb-grid-b:#f0f0f0;--wb-shadow-sm:0 1px 2px #0000000d;--wb-shadow-md:0 4px 12px #00000014;--wb-shadow-lg:0 8px 24px #0000001f;--wb-radius-sm:8px;--wb-radius-md:12px;--wb-radius-lg:16px;--wb-transition:.2s cubic-bezier(.4, 0, .2, 1)}.wb-theme-dark{--wb-bg:#1a1a2e;--wb-surface:#252540;--wb-surface-hover:#2e2e4a;--wb-surface-toolbar:#202038;--wb-text:#e2e2f0;--wb-text-secondary:#a0a0b8;--wb-border:#3a3a55;--wb-accent:#818cf8;--wb-accent-light:#818cf826;--wb-canvas-bg:#1e1e30;--wb-canvas-surround:#12121f;--wb-grid-a:#2a2a3e;--wb-grid-b:#1e1e30;--wb-shadow-sm:0 1px 2px #0000004d;--wb-shadow-md:0 4px 12px #0006;--wb-shadow-lg:0 8px 24px #00000080}.wb-root[data-v-40d42bb5]{width:100%;height:100%;display:flex;position:relative;overflow:hidden}
+/*$vite$:1*/