xiaodao-painter 0.1.6 → 0.1.8

package/README.md

@@ -1,6 +1,6 @@
 # xiaodao-painter
 
-A self-contained, embeddable SVG whiteboard component for Vue 3. Built with TypeScript, Pinia, and Vite.
+A self-contained, embeddable SVG whiteboard component for Vue 3. Built with TypeScript and Vite. Zero extra dependencies beyond Vue 3.
 
 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`.
 
@@ -37,20 +37,7 @@ 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:
+Just import and use the `Painter` component. No additional plugins or global setup required — only Vue 3 is needed:
 
 ```vue
 <script setup lang="ts">

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

@@ -1,6 +1,41 @@
 import type { Stroke } from '../types';
-export declare const useCanvasStore: import("pinia").SetupStoreDefinition<"canvas", {
-    strokes: import("vue").Ref<{
+declare function setPan(x: number, y: number): void;
+declare function setCanvasSize(w: number, h: number): void;
+declare function zoomAt(screenX: number, screenY: number, factor: number): void;
+declare function continuousZoomAt(screenX: number, screenY: number, newZoom: number): void;
+declare function getZoomPercent(): number;
+declare function setStrokeWidth(w: number): void;
+declare function setCanvasBackgroundColor(color: string): void;
+declare function toggleColorPalette(): void;
+declare function hideColorPalette(): void;
+declare function isSelected(id: string): boolean;
+declare function selectStroke(id: string | null): void;
+declare function selectStrokes(ids: string[]): void;
+declare function clearSelection(): void;
+declare function addStroke(stroke: Stroke): void;
+declare function updateStroke(id: string, changes: Partial<Stroke>): void;
+declare function deleteSelectedStrokes(): void;
+declare function cutSelectedStrokes(): void;
+declare function copySelectedStrokes(): void;
+declare function pasteStrokes(): void;
+declare function pushUndo(): void;
+declare function undo(): void;
+declare function redo(): void;
+declare function moveSelectedUp(): void;
+declare function moveSelectedDown(): void;
+declare function syncFromParent(data: Stroke[]): void;
+declare function getStrokeDisplayBounds(stroke: Stroke): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+declare function setColorSlot(slot: 'foreground' | 'background' | 'textColor'): void;
+declare function setColor(color: string): void;
+declare function buildStroke(type: Stroke['type'], x: number, y: number, width: number, height: number, points: Stroke['points']): Stroke;
+declare function reset(): void;
+declare const state: {
+    strokes: {
         id: string;
         type: import("../types").ToolType;
         x: number;
@@ -19,7 +54,10 @@ export declare const useCanvasStore: import("pinia").SetupStoreDefinition<"canva
         textAlign?: "left" | "center" | "right" | undefined;
         textColor?: string | undefined;
         textAutoWidth?: boolean | undefined;
-    }[], Stroke[] | {
+    }[];
+    selectedStrokeIds: Set<string> & Omit<Set<string>, keyof Set<any>>;
+    selectedStrokeId: string | null;
+    selectedStroke: {
         id: string;
         type: import("../types").ToolType;
         x: number;
@@ -38,10 +76,8 @@ export declare const useCanvasStore: import("pinia").SetupStoreDefinition<"canva
         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<{
+    } | null;
+    selectedStrokes: {
         id: string;
         type: import("../types").ToolType;
         x: number;
@@ -60,121 +96,40 @@ export declare const useCanvasStore: import("pinia").SetupStoreDefinition<"canva
         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) => {
+    }[];
+    selectedStrokeColor: string | null;
+    selectedFillColor: string | null;
+    selectedTextColor: string | null;
+    foregroundColor: string;
+    backgroundColor: string;
+    activeColorSlot: "background" | "textColor" | "foreground";
+    showColorPalette: boolean;
+    isSelecting: boolean;
+    selectionBox: {
         x: number;
         y: number;
         width: number;
         height: number;
-    };
-    clipboard: import("vue").Ref<{
+    } | null;
+    toggleColorPalette: typeof toggleColorPalette;
+    hideColorPalette: typeof hideColorPalette;
+    addStroke: typeof addStroke;
+    updateStroke: typeof updateStroke;
+    selectStroke: typeof selectStroke;
+    selectStrokes: typeof selectStrokes;
+    clearSelection: typeof clearSelection;
+    isSelected: typeof isSelected;
+    deleteSelectedStrokes: typeof deleteSelectedStrokes;
+    setColorSlot: typeof setColorSlot;
+    setColor: typeof setColor;
+    buildStroke: typeof buildStroke;
+    strokeWidth: number;
+    setStrokeWidth: typeof setStrokeWidth;
+    canvasBackgroundColor: string;
+    setCanvasBackgroundColor: typeof setCanvasBackgroundColor;
+    canUndo: boolean;
+    canRedo: boolean;
+    undoStack: {
         id: string;
         type: import("../types").ToolType;
         x: number;
@@ -193,7 +148,15 @@ export declare const useCanvasStore: import("pinia").SetupStoreDefinition<"canva
         textAlign?: "left" | "center" | "right" | undefined;
         textColor?: string | undefined;
         textAutoWidth?: boolean | undefined;
-    }[], Stroke[] | {
+    }[][];
+    pushUndo: typeof pushUndo;
+    undo: typeof undo;
+    redo: typeof redo;
+    moveSelectedUp: typeof moveSelectedUp;
+    moveSelectedDown: typeof moveSelectedDown;
+    syncFromParent: typeof syncFromParent;
+    getStrokeDisplayBounds: typeof getStrokeDisplayBounds;
+    clipboard: {
         id: string;
         type: import("../types").ToolType;
         x: number;
@@ -212,27 +175,30 @@ export declare const useCanvasStore: import("pinia").SetupStoreDefinition<"canva
         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;
-}>;
+    }[];
+    cutSelectedStrokes: typeof cutSelectedStrokes;
+    copySelectedStrokes: typeof copySelectedStrokes;
+    pasteStrokes: typeof pasteStrokes;
+    canvasWidth: number;
+    canvasHeight: number;
+    panX: number;
+    panY: number;
+    zoomLevel: number;
+    showZoomIndicator: boolean;
+    viewBox: string;
+    canvasTransform: string;
+    setPan: typeof setPan;
+    setCanvasSize: typeof setCanvasSize;
+    zoomAt: typeof zoomAt;
+    continuousZoomAt: typeof continuousZoomAt;
+    getZoomPercent: typeof getZoomPercent;
+    dataVersion: number;
+    theme: "dark" | "light";
+    textColor: string;
+    editingTextId: string | null;
+    hoveredTextId: string | null;
+    reset: typeof reset;
+};
+export type CanvasStore = typeof state;
+export declare function useCanvasStore(): CanvasStore;
+export {};

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

@@ -1,6 +1,11 @@
 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;
-}>;
+declare function setTool(tool: ToolType): void;
+declare function reset(): void;
+declare const state: {
+    activeTool: ToolType;
+    setTool: typeof setTool;
+    reset: typeof reset;
+};
+export type ToolsStore = typeof state;
+export declare function useToolsStore(): ToolsStore;
+export {};