@nice2dev/ui-graphics 1.0.0

package/dist/types/vector/pathSimplification.d.ts

@@ -0,0 +1,135 @@
+/**
+ * pathSimplification — Reduce points in paths while preserving shape
+ *
+ * Algorithms:
+ * - Douglas-Peucker (visvalingam-whyatt alternative)
+ * - Radial distance
+ * - Perpendicular distance
+ * - Nth point (uniform sampling)
+ * - Visvalingam-Whyatt (area-based)
+ *
+ * Also includes:
+ * - Path smoothing (Catmull-Rom, Bezier)
+ * - Point optimization
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export type SimplificationAlgorithm = 'douglas-peucker' | 'visvalingam' | 'radial-distance' | 'perpendicular-distance' | 'nth-point';
+export type SmoothingAlgorithm = 'catmull-rom' | 'bezier' | 'average' | 'none';
+export interface SimplificationOptions {
+    /** Algorithm to use */
+    algorithm: SimplificationAlgorithm;
+    /** Tolerance/threshold (meaning varies by algorithm) */
+    tolerance: number;
+    /** For nth-point: keep every Nth point */
+    nthPoint: number;
+    /** Whether path is closed (polygon) */
+    isClosed: boolean;
+    /** Preserve start/end points */
+    preserveEndpoints: boolean;
+    /** High quality mode (slower but better) */
+    highQuality: boolean;
+}
+export interface SmoothingOptions {
+    /** Smoothing algorithm */
+    algorithm: SmoothingAlgorithm;
+    /** Tension for Catmull-Rom (0-1, lower = smoother) */
+    tension: number;
+    /** Number of interpolated points between each pair */
+    resolution: number;
+    /** Corner angle threshold (degrees) to preserve sharp corners */
+    cornerThreshold: number;
+}
+export declare const DEFAULT_SIMPLIFICATION_OPTIONS: SimplificationOptions;
+export declare const DEFAULT_SMOOTHING_OPTIONS: SmoothingOptions;
+/**
+ * Calculate squared distance between two points
+ */
+export declare function squaredDistance(p1: Point, p2: Point): number;
+/**
+ * Calculate distance between two points
+ */
+export declare function distance(p1: Point, p2: Point): number;
+/**
+ * Calculate perpendicular distance from point to line segment
+ */
+export declare function perpendicularDistance(point: Point, lineStart: Point, lineEnd: Point): number;
+/**
+ * Calculate triangle area (for Visvalingam)
+ */
+export declare function triangleArea(p1: Point, p2: Point, p3: Point): number;
+/**
+ * Calculate angle at point b (in degrees)
+ */
+export declare function angleAt(a: Point, b: Point, c: Point): number;
+/**
+ * Douglas-Peucker algorithm
+ * Recursively simplifies path by removing points within tolerance
+ */
+export declare function douglasPeucker(points: Point[], tolerance: number, start?: number, end?: number): Point[];
+/**
+ * Visvalingam-Whyatt algorithm
+ * Removes points based on area of triangles
+ */
+export declare function visvalingam(points: Point[], minArea: number): Point[];
+/**
+ * Radial distance simplification
+ * Removes points too close to previous kept point
+ */
+export declare function radialDistance(points: Point[], tolerance: number): Point[];
+/**
+ * Perpendicular distance simplification
+ * One-pass version of Douglas-Peucker
+ */
+export declare function perpendicularDistanceSimplify(points: Point[], tolerance: number): Point[];
+/**
+ * Nth point simplification
+ * Keeps every Nth point
+ */
+export declare function nthPoint(points: Point[], n: number): Point[];
+/**
+ * Main simplification function
+ */
+export declare function simplifyPath(points: Point[], options?: Partial<SimplificationOptions>): Point[];
+/**
+ * Catmull-Rom spline smoothing
+ */
+export declare function smoothCatmullRom(points: Point[], opts?: Partial<SmoothingOptions>): Point[];
+/**
+ * Simple average smoothing
+ */
+export declare function smoothAverage(points: Point[], opts?: Partial<SmoothingOptions>): Point[];
+/**
+ * Main smoothing function
+ */
+export declare function smoothPath(points: Point[], options?: Partial<SmoothingOptions>): Point[];
+/**
+ * Remove duplicate consecutive points
+ */
+export declare function removeDuplicates(points: Point[], tolerance?: number): Point[];
+/**
+ * Remove collinear points (points on straight lines)
+ */
+export declare function removeCollinear(points: Point[], angleThreshold?: number): Point[];
+/**
+ * Calculate path length
+ */
+export declare function pathLength(points: Point[]): number;
+/**
+ * Calculate path bounds
+ */
+export declare function pathBounds(points: Point[]): {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+};
+/**
+ * Resample path to uniform point spacing
+ */
+export declare function resamplePath(points: Point[], targetCount: number): Point[];
+export default simplifyPath;

package/dist/types/vector/pdfExport.d.ts

@@ -0,0 +1,65 @@
+/**
+ * PDF Export for VectorEditor
+ * Export SVG/vector graphics to PDF format
+ */
+export interface PdfExportOptions {
+    /** Page width in points (72 points = 1 inch) */
+    width?: number;
+    /** Page height in points */
+    height?: number;
+    /** Page format preset */
+    format?: PdfPageFormat;
+    /** Page orientation */
+    orientation?: 'portrait' | 'landscape';
+    /** Page margins in points */
+    margins?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Document title */
+    title?: string;
+    /** Document author */
+    author?: string;
+    /** Document subject */
+    subject?: string;
+    /** Document keywords */
+    keywords?: string[];
+    /** PDF compression */
+    compress?: boolean;
+    /** Image quality (0-1) for embedded images */
+    imageQuality?: number;
+    /** Scale factor for content */
+    scale?: number;
+    /** Background color (null for transparent) */
+    backgroundColor?: string | null;
+    /** Include fonts */
+    embedFonts?: boolean;
+    /** PDF/A compliance */
+    pdfaCompliance?: boolean;
+}
+export type PdfPageFormat = 'a0' | 'a1' | 'a2' | 'a3' | 'a4' | 'a5' | 'a6' | 'a7' | 'a8' | 'a9' | 'a10' | 'b0' | 'b1' | 'b2' | 'b3' | 'b4' | 'b5' | 'b6' | 'b7' | 'b8' | 'b9' | 'b10' | 'letter' | 'legal' | 'tabloid' | 'ledger' | 'executive' | 'custom';
+export interface PdfExportResult {
+    /** PDF blob */
+    blob: Blob;
+    /** PDF as base64 data URL */
+    dataUrl: string;
+    /** File size in bytes */
+    size: number;
+    /** Number of pages */
+    pages: number;
+}
+/**
+ * Export SVG to PDF
+ */
+export declare function exportToPdf(svg: SVGElement | string, options?: PdfExportOptions): Promise<PdfExportResult>;
+/**
+ * Download PDF
+ */
+export declare function downloadPdf(result: PdfExportResult, filename?: string): void;
+/**
+ * Export SVG element to PDF and download
+ */
+export declare function exportAndDownload(svg: SVGElement | string, filename?: string, options?: PdfExportOptions): Promise<void>;
+export default exportToPdf;

package/dist/types/vector/textOnPath.d.ts

@@ -0,0 +1,145 @@
+/**
+ * Text On Path
+ * Utilities for placing and rendering text along SVG paths
+ */
+export interface TextOnPathOptions {
+    /** The text content */
+    text: string;
+    /** SVG path data (d attribute) */
+    pathData: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font weight */
+    fontWeight?: number | 'normal' | 'bold' | 'lighter' | 'bolder';
+    /** Font style */
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    /** Text fill color */
+    fill?: string;
+    /** Text stroke color */
+    stroke?: string;
+    /** Text stroke width */
+    strokeWidth?: number;
+    /** Starting offset along path (0-1 or pixels) */
+    startOffset?: number | string;
+    /** Text anchor */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /** Dominant baseline */
+    dominantBaseline?: 'auto' | 'middle' | 'hanging' | 'central' | 'alphabetic';
+    /** Letter spacing */
+    letterSpacing?: number;
+    /** Side of path for text */
+    side?: 'left' | 'right';
+    /** Text direction */
+    direction?: 'ltr' | 'rtl';
+    /** Spacing method */
+    method?: 'align' | 'stretch';
+    /** Spacing behavior */
+    spacing?: 'auto' | 'exact';
+    /** Unique ID for the path (auto-generated if not provided) */
+    pathId?: string;
+}
+export interface TextOnPathResult {
+    /** Complete SVG markup */
+    svg: string;
+    /** Just the defs section (for embedding) */
+    defs: string;
+    /** Just the text element (for embedding) */
+    textElement: string;
+    /** Path length in pixels */
+    pathLength: number;
+    /** Text width in pixels (approximate) */
+    textWidth: number;
+    /** Whether text fits on path */
+    textFits: boolean;
+}
+export interface PathPoint {
+    x: number;
+    y: number;
+    angle: number;
+    t: number;
+}
+export interface TextOnPathAnimation {
+    /** Animation duration in ms */
+    duration?: number;
+    /** Animation easing */
+    easing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+    /** Animation direction */
+    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    /** Repeat count (Infinity for infinite) */
+    repeatCount?: number | 'indefinite';
+    /** Start offset range [from, to] */
+    offsetRange?: [number | string, number | string];
+}
+/**
+ * Parse SVG path data into segments
+ */
+export declare function parsePathData(d: string): PathSegment[];
+interface PathSegment {
+    type: 'M' | 'L' | 'C' | 'Q' | 'A' | 'Z';
+    x: number;
+    y: number;
+    x0?: number;
+    y0?: number;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    rx?: number;
+    ry?: number;
+    xAxisRotation?: number;
+    largeArcFlag?: number;
+    sweepFlag?: number;
+}
+/**
+ * Calculate total path length
+ */
+export declare function calculatePathLength(pathData: string): number;
+/**
+ * Sample points along a path
+ */
+export declare function samplePath(pathData: string, numSamples: number): PathPoint[];
+/**
+ * Generate SVG text on path
+ */
+export declare function generateTextOnPath(options: TextOnPathOptions): TextOnPathResult;
+/**
+ * Generate animated text on path
+ */
+export declare function generateAnimatedTextOnPath(options: TextOnPathOptions, animation: TextOnPathAnimation): string;
+export declare const PATH_PRESETS: {
+    /** Straight horizontal line */
+    horizontal: (width: number) => string;
+    /** Arc (semicircle) */
+    arc: (width: number, height: number) => string;
+    /** Full wave */
+    wave: (width: number, amplitude: number, frequency?: number) => string;
+    /** Circle */
+    circle: (cx: number, cy: number, r: number) => string;
+    /** Ellipse */
+    ellipse: (cx: number, cy: number, rx: number, ry: number) => string;
+    /** Spiral */
+    spiral: (cx: number, cy: number, startR: number, endR: number, turns?: number) => string;
+    /** Heart shape */
+    heart: (cx: number, cy: number, size: number) => string;
+    /** Star shape (for text around star points) */
+    star: (cx: number, cy: number, outerR: number, innerR: number, points?: number) => string;
+};
+export interface UseTextOnPathState {
+    text: string;
+    pathData: string;
+    options: Partial<TextOnPathOptions>;
+}
+export interface UseTextOnPathReturn {
+    state: UseTextOnPathState;
+    result: TextOnPathResult | null;
+    setText: (text: string) => void;
+    setPath: (pathData: string) => void;
+    setOptions: (options: Partial<TextOnPathOptions>) => void;
+    usePresetPath: (preset: keyof typeof PATH_PRESETS, ...args: number[]) => void;
+    getSvg: () => string;
+    getAnimatedSvg: (animation: TextOnPathAnimation) => string;
+}
+export declare function useTextOnPath(initialText?: string, initialPath?: string): UseTextOnPathReturn;
+export default useTextOnPath;

package/dist/types/vector/useVectorEditor.d.ts

@@ -0,0 +1,90 @@
+/**
+ * useVectorEditor — extracted logic + state for VectorEditor.
+ * Keeps every useState / useRef / useCallback / useEffect in a single hook
+ * so the component file is pure layout.
+ */
+import type { VTool, VShape } from "./vectorEditorTypes";
+export interface UseVectorEditorOptions {
+    artW: number;
+    artH: number;
+    onSaveToLibrary?: (dataUrl: string, name: string, mimeType: string) => void;
+}
+export declare function useVectorEditor({ artW, artH, onSaveToLibrary }: UseVectorEditorOptions): {
+    readonly shapes: VShape[];
+    readonly selId: string | null;
+    readonly tool: VTool;
+    readonly fillCol: string;
+    readonly strokeCol: string;
+    readonly strokeW: number;
+    readonly fontSize: number;
+    readonly fontFamily: string;
+    readonly shapeOpacity: number;
+    readonly cornerRadius: number;
+    readonly polygonSides: number;
+    readonly starPoints2: number;
+    readonly starInnerRatio: number;
+    readonly zoom: number;
+    readonly px: number;
+    readonly py: number;
+    readonly dlgSvg: boolean;
+    readonly svgText: string;
+    readonly snapGrid: boolean;
+    readonly gridSize: number;
+    readonly hasClipboard: boolean;
+    readonly boolSecondShape: string | null;
+    readonly selShape: VShape | null;
+    readonly setTool: import("react").Dispatch<import("react").SetStateAction<VTool>>;
+    readonly setFillCol: import("react").Dispatch<import("react").SetStateAction<string>>;
+    readonly setStrokeCol: import("react").Dispatch<import("react").SetStateAction<string>>;
+    readonly setStrokeW: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setFontSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setFontFamily: import("react").Dispatch<import("react").SetStateAction<string>>;
+    readonly setShapeOpacity: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setCornerRadius: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setPolygonSides: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setStarPoints2: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setStarInnerRatio: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setZoom: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setDlgSvg: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    readonly setSvgText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    readonly setSnapGrid: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    readonly setGridSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    readonly setSelId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    readonly setBoolSecondShape: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    readonly boxRef: import("react").RefObject<HTMLDivElement>;
+    readonly fInp: import("react").RefObject<HTMLInputElement>;
+    readonly onDown: (e: React.MouseEvent<SVGSVGElement>) => void;
+    readonly onMove: (e: React.MouseEvent<SVGSVGElement>) => void;
+    readonly onUp: () => void;
+    readonly onWheel: (e: React.WheelEvent) => void;
+    readonly onDblClick: () => void;
+    readonly undo: () => void;
+    readonly redo: () => void;
+    readonly deleteShape: () => void;
+    readonly bringToFront: () => void;
+    readonly sendToBack: () => void;
+    readonly updateSel: (patch: Partial<VShape>) => void;
+    readonly copyShape: () => void;
+    readonly pasteShape: () => void;
+    readonly duplicateShape: () => void;
+    readonly flipH: () => void;
+    readonly flipV: () => void;
+    readonly alignShapes: (mode: "left" | "center" | "right" | "top" | "middle" | "bottom") => void;
+    readonly unionShapes: () => void;
+    readonly subtractShapes: () => void;
+    readonly intersectShapes: () => void;
+    readonly excludeShapes: () => void;
+    readonly outlineStroke: () => void;
+    readonly importSVGString: (raw: string) => void;
+    readonly openFile: (file: File) => Promise<void>;
+    readonly newCanvas: () => void;
+    readonly exportSVG: () => void;
+    readonly exportPNG: () => void;
+    readonly exportJPG: () => void;
+    readonly exportWebP: () => void;
+    readonly exportBMP: () => void;
+    readonly switchTool: (newTool: VTool) => void;
+    readonly saveToLibrary: () => void;
+};
+/** Return type for sub-component props */
+export type VectorEditorAPI = ReturnType<typeof useVectorEditor>;

package/dist/types/vector/vectorBooleanOps.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Boolean operations for vector shapes
+ * Implements union, difference, intersection, and exclusion operations
+ */
+import type { VShape } from "./vectorEditorTypes";
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Segment = {
+    start: Point;
+    end: Point;
+};
+export type BooleanOp = "union" | "difference" | "intersection" | "exclusion";
+/** Perform boolean operation on two shapes */
+export declare function booleanOperation(shapeA: VShape, shapeB: VShape, operation: BooleanOp): VShape | VShape[] | null;
+/** Check if two shapes overlap */
+export declare function shapesOverlap(shapeA: VShape, shapeB: VShape): boolean;
+/** Group shapes into compound path */
+export declare function groupToCompound(shapes: VShape[]): VShape | null;
+/** Flatten a polyline to individual segment shapes (for outline stroke) */
+export declare function flattenToOutline(shape: VShape, strokeWidth?: number): VShape;

package/dist/types/vector/vectorEditorExport.d.ts

@@ -0,0 +1,8 @@
+import { VShape } from "./vectorEditorTypes";
+/** Build SVG markup string from shapes */
+export declare function buildSVGString(shapes: VShape[], artW: number, artH: number): string;
+export declare function exportSVGFile(shapes: VShape[], artW: number, artH: number): void;
+export declare function exportPNGFile(shapes: VShape[], artW: number, artH: number): void;
+export declare function exportJPGFile(shapes: VShape[], artW: number, artH: number): void;
+export declare function exportWebPFile(shapes: VShape[], artW: number, artH: number): void;
+export declare function exportBMPFile(shapes: VShape[], artW: number, artH: number): void;

package/dist/types/vector/vectorEditorImport.d.ts

@@ -0,0 +1,7 @@
+import { VShape } from "./vectorEditorTypes";
+/**
+ * Parse an SVG string and return an array of VShape objects.
+ * Throws an Error if the SVG is malformed.
+ * Returns an empty array if no supported shapes are found.
+ */
+export declare function parseSVGToShapes(raw: string): VShape[];

package/dist/types/vector/vectorEditorTypes.d.ts

@@ -0,0 +1,47 @@
+import type { SvgFilter } from './vectorSvgFilters';
+export type VTool = "pointer" | "rect" | "roundrect" | "ellipse" | "line" | "arrow" | "polygon" | "star" | "pen" | "text";
+export interface VShape {
+    id: string;
+    type: "rect" | "roundrect" | "ellipse" | "line" | "polyline" | "text" | "polygon" | "star" | "arrow";
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    x2?: number;
+    y2?: number;
+    points?: {
+        x: number;
+        y: number;
+    }[];
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    opacity: number;
+    text?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    rotation: number;
+    rx?: number;
+    sides?: number;
+    innerRadius?: number;
+    filters?: SvgFilter[];
+}
+export interface HistEntry {
+    shapes: VShape[];
+}
+export declare const sid: () => string;
+export declare const cloneShapes: (s: VShape[]) => VShape[];
+export declare const downloadBlob: (blob: Blob, name: string) => void;
+export declare const TOOLS: {
+    id: VTool;
+    icon: string;
+    label: string;
+    key: string;
+}[];
+export declare const FONTS: string[];
+/** Generate polygon points string for n-sided regular polygon */
+export declare function polygonPoints(cx: number, cy: number, r: number, sides: number, rotation: number): string;
+/** Generate star points string */
+export declare function starPoints(cx: number, cy: number, outerR: number, innerR: number, points: number, rotation: number): string;
+/** Snap a value to grid */
+export declare function snapToGrid(val: number, gridSize: number): number;

package/dist/types/vector/vectorGradients.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Gradient types and utilities for VectorEditor
+ */
+import type { VShape } from "./vectorEditorTypes";
+export interface GradientStop {
+    offset: number;
+    color: string;
+    opacity?: number;
+}
+export interface LinearGradient {
+    type: "linear";
+    id: string;
+    angle: number;
+    stops: GradientStop[];
+}
+export interface RadialGradient {
+    type: "radial";
+    id: string;
+    cx: number;
+    cy: number;
+    r: number;
+    fx?: number;
+    fy?: number;
+    stops: GradientStop[];
+}
+export interface ConicGradient {
+    type: "conic";
+    id: string;
+    cx: number;
+    cy: number;
+    angle: number;
+    stops: GradientStop[];
+}
+export type Gradient = LinearGradient | RadialGradient | ConicGradient;
+export interface GradientFill {
+    gradient: Gradient;
+    scaleX?: number;
+    scaleY?: number;
+    rotate?: number;
+    translateX?: number;
+    translateY?: number;
+}
+export declare const gradientId: () => string;
+export declare const PRESET_GRADIENTS: Gradient[];
+export declare function gradientToSVGDef(gradient: Gradient): string;
+export declare function gradientToFillRef(gradient: Gradient): string;
+export declare function gradientToCSS(gradient: Gradient): string;
+export declare function cloneGradient(gradient: Gradient): Gradient;
+export declare function createLinearGradient(colors: string[], angle?: number): LinearGradient;
+export declare function createRadialGradient(colors: string[], cx?: number, cy?: number, r?: number): RadialGradient;
+export declare function addGradientStop(gradient: Gradient, offset: number, color: string): Gradient;
+export declare function removeGradientStop(gradient: Gradient, index: number): Gradient;
+export declare function updateGradientStop(gradient: Gradient, index: number, update: Partial<GradientStop>): Gradient;
+export declare function rotateLinearGradient(gradient: LinearGradient, angle: number): LinearGradient;
+export declare function reverseGradient(gradient: Gradient): Gradient;
+export interface GradientShape extends VShape {
+    fillGradient?: Gradient;
+    strokeGradient?: Gradient;
+}
+export declare function applyFillGradient(shape: VShape, gradient: Gradient): GradientShape;
+export declare function applyStrokeGradient(shape: VShape, gradient: Gradient): GradientShape;
+export declare function removeFillGradient(shape: GradientShape, solidColor: string): GradientShape;
+export declare function removeStrokeGradient(shape: GradientShape, solidColor: string): GradientShape;
+export declare function collectGradientDefs(shapes: VShape[]): string;