@nice2dev/ui-graphics 1.0.0

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

@@ -0,0 +1,101 @@
+/**
+ * vectorPatternFills — SVG Pattern fill system for VectorEditor
+ *
+ * Features:
+ * - Built-in pattern presets (stripes, dots, checkers, etc.)
+ * - Custom pattern creation from shapes
+ * - Pattern transformations (scale, rotate, offset)
+ * - Image-based patterns
+ * - Export as SVG <pattern> definitions
+ */
+export type PatternType = 'stripes-h' | 'stripes-v' | 'stripes-d' | 'stripes-d-rev' | 'dots' | 'dots-offset' | 'checker' | 'grid' | 'grid-dots' | 'hexagons' | 'triangles' | 'zigzag' | 'waves' | 'crosses' | 'diamonds' | 'custom';
+export interface PatternFill {
+    /** Pattern type */
+    type: PatternType;
+    /** Unique ID for SVG reference */
+    id: string;
+    /** Pattern name */
+    name: string;
+    /** Primary color (foreground) */
+    foreground: string;
+    /** Secondary color (background) */
+    background: string;
+    /** Pattern cell width */
+    width: number;
+    /** Pattern cell height */
+    height: number;
+    /** Rotation angle (degrees) */
+    rotation: number;
+    /** Scale factor */
+    scale: number;
+    /** X offset */
+    offsetX: number;
+    /** Y offset */
+    offsetY: number;
+    /** Stroke width for line-based patterns */
+    strokeWidth: number;
+    /** Opacity (0-1) */
+    opacity: number;
+    /** Custom SVG content (for custom type) */
+    customSvg?: string;
+    /** Image URL (for image-based patterns) */
+    imageUrl?: string;
+}
+export declare const DEFAULT_PATTERN: PatternFill;
+export interface PatternPreset {
+    type: PatternType;
+    name: string;
+    icon: string;
+    defaultWidth: number;
+    defaultHeight: number;
+    defaultStrokeWidth: number;
+}
+export declare const PATTERN_PRESETS: PatternPreset[];
+export declare const generatePatternId: () => string;
+/**
+ * Generate SVG pattern content for a given pattern type
+ */
+export declare function generatePatternContent(pattern: PatternFill): string;
+/**
+ * Generate complete SVG <pattern> element
+ */
+export declare function generateSvgPattern(pattern: PatternFill): string;
+/**
+ * Get URL reference for pattern
+ */
+export declare function getPatternUrl(pattern: PatternFill): string;
+/**
+ * Create a new pattern with default values
+ */
+export declare function createPattern(type: PatternType): PatternFill;
+/**
+ * Clone a pattern with new ID
+ */
+export declare function clonePattern(pattern: PatternFill): PatternFill;
+/**
+ * Create pattern from image file
+ */
+export declare function createImagePattern(imageUrl: string, width: number, height: number): PatternFill;
+/**
+ * Load image and create pattern from it
+ */
+export declare function loadImagePattern(file: File): Promise<PatternFill>;
+/**
+ * Render pattern preview to canvas
+ */
+export declare function renderPatternPreview(pattern: PatternFill, width: number, height: number): HTMLCanvasElement;
+/**
+ * Generate pattern preview as data URL
+ */
+export declare function getPatternPreviewDataUrl(pattern: PatternFill, width?: number, height?: number): Promise<string>;
+export interface PatternLibrary {
+    patterns: PatternFill[];
+    add: (pattern: PatternFill) => void;
+    remove: (id: string) => void;
+    get: (id: string) => PatternFill | undefined;
+    update: (id: string, updates: Partial<PatternFill>) => void;
+    toJSON: () => string;
+    fromJSON: (json: string) => void;
+}
+export declare function createPatternLibrary(initial?: PatternFill[]): PatternLibrary;
+export default generateSvgPattern;

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

@@ -0,0 +1,134 @@
+/**
+ * vectorSvgFilters.ts — SVG Filter system for VectorEditor
+ *
+ * Supports:
+ * - Blur (Gaussian blur)
+ * - Shadow (Drop shadow)
+ * - Glow (Outer glow)
+ * - Bevel (Inner bevel effect)
+ * - Emboss (Embossed effect)
+ * - Color matrix (hue, saturation, brightness adjustments)
+ * - Morphology (erode/dilate for outline effects)
+ * - Noise (turbulence/fractal noise)
+ * - Displacement (ripple, wave effects)
+ */
+export type SvgFilterType = 'blur' | 'shadow' | 'glow' | 'bevel' | 'emboss' | 'colorMatrix' | 'erode' | 'dilate' | 'noise' | 'displacement' | 'invert' | 'saturate' | 'sepia' | 'grayscale';
+export interface SvgFilterBase {
+    id: string;
+    type: SvgFilterType;
+    enabled: boolean;
+    order: number;
+}
+export interface BlurFilter extends SvgFilterBase {
+    type: 'blur';
+    radius: number;
+}
+export interface ShadowFilter extends SvgFilterBase {
+    type: 'shadow';
+    offsetX: number;
+    offsetY: number;
+    blur: number;
+    color: string;
+    opacity: number;
+    inset: boolean;
+}
+export interface GlowFilter extends SvgFilterBase {
+    type: 'glow';
+    radius: number;
+    color: string;
+    intensity: number;
+}
+export interface BevelFilter extends SvgFilterBase {
+    type: 'bevel';
+    depth: number;
+    angle: number;
+    highlightColor: string;
+    shadowColor: string;
+    softness: number;
+}
+export interface EmbossFilter extends SvgFilterBase {
+    type: 'emboss';
+    strength: number;
+    angle: number;
+    elevation: number;
+}
+export interface ColorMatrixFilter extends SvgFilterBase {
+    type: 'colorMatrix';
+    hue: number;
+    saturation: number;
+    brightness: number;
+    contrast: number;
+}
+export interface MorphologyFilter extends SvgFilterBase {
+    type: 'erode' | 'dilate';
+    radius: number;
+}
+export interface NoiseFilter extends SvgFilterBase {
+    type: 'noise';
+    baseFrequency: number;
+    numOctaves: number;
+    seed: number;
+    turbulence: boolean;
+    opacity: number;
+}
+export interface DisplacementFilter extends SvgFilterBase {
+    type: 'displacement';
+    scale: number;
+    xChannel: 'R' | 'G' | 'B' | 'A';
+    yChannel: 'R' | 'G' | 'B' | 'A';
+    frequency: number;
+}
+export interface InvertFilter extends SvgFilterBase {
+    type: 'invert';
+    amount: number;
+}
+export interface SaturateFilter extends SvgFilterBase {
+    type: 'saturate';
+    amount: number;
+}
+export interface SepiaFilter extends SvgFilterBase {
+    type: 'sepia';
+    amount: number;
+}
+export interface GrayscaleFilter extends SvgFilterBase {
+    type: 'grayscale';
+    amount: number;
+}
+export type SvgFilter = BlurFilter | ShadowFilter | GlowFilter | BevelFilter | EmbossFilter | ColorMatrixFilter | MorphologyFilter | NoiseFilter | DisplacementFilter | InvertFilter | SaturateFilter | SepiaFilter | GrayscaleFilter;
+export interface FilterPreset {
+    id: string;
+    name: string;
+    category: 'shadows' | 'glows' | 'artistic' | 'color' | 'distortion';
+    filters: SvgFilter[];
+}
+export declare const FILTER_PRESETS: FilterPreset[];
+export declare const generateFilterId: () => string;
+export declare function createDefaultFilter(type: SvgFilterType): SvgFilter;
+/**
+ * Generate SVG filter primitive elements for a filter
+ */
+export declare function generateFilterPrimitive(filter: SvgFilter, inputName: string): {
+    elements: string[];
+    outputName: string;
+};
+/**
+ * Generate complete SVG filter element for a shape
+ */
+export declare function generateSvgFilter(shapeId: string, filters: SvgFilter[]): string;
+/**
+ * Get filter URL reference for a shape
+ */
+export declare function getFilterUrl(shapeId: string, filters: SvgFilter[]): string;
+/**
+ * Clone filters array
+ */
+export declare function cloneFilters(filters: SvgFilter[]): SvgFilter[];
+/**
+ * Filter type metadata for UI
+ */
+export declare const FILTER_TYPE_INFO: Record<SvgFilterType, {
+    name: string;
+    icon: string;
+    description: string;
+    category: 'effects' | 'color' | 'distortion';
+}>;

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@nice2dev/ui-graphics",
+  "version": "1.0.0",
+  "description": "Nice2Dev Graphics Editors — Pixel, Vector, Photo and Animation editors for React",
+  "author": "NiceToDev <contact@nicetodev.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/NiceToDev/NiceToDev.UI#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NiceToDev/NiceToDev.UI.git",
+    "directory": "nice2dev-ui-graphics"
+  },
+  "bugs": {
+    "url": "https://github.com/NiceToDev/NiceToDev.UI/issues"
+  },
+  "type": "module",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./style.css": "./dist/nice2dev-ui-graphics.css"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "npm run build:types && rollup -c",
+    "build:types": "tsc -p tsconfig.types.json",
+    "dev": "rollup -c -w",
+    "demo": "vite --config vite.demo.config.ts",
+    "demo:build": "vite build --config vite.demo.config.ts",
+    "test": "vitest run --config vitest.config.ts",
+    "test:watch": "vitest --config vitest.config.ts",
+    "test:coverage": "vitest run --config vitest.config.ts --coverage",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static",
+    "bench": "npx tsx src/__benchmarks__/bench.ts",
+    "analyze": "rollup -c --environment ANALYZE:true",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "pixel-editor",
+    "vector-editor",
+    "photo-editor",
+    "animation",
+    "canvas",
+    "svg",
+    "sprite",
+    "aseprite",
+    "nicetodev"
+  ],
+  "author": "NiceToDev",
+  "license": "MIT",
+  "peerDependencies": {
+    "@nice2dev/ui": "^1.0.0",
+    "framer-motion": ">=10.0.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "framer-motion": "^11.0.0",
+    "jsdom": "^29.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "rollup": "^4.24.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vitest": "^4.1.0"
+  }
+}