vibrant-tool 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -36
- package/dist/App.d.ts +1 -5
- package/dist/lib/services/product.service.d.ts +4 -0
- package/dist/lib/services/shape.service.d.ts +5 -1
- package/dist/lib/services/template-design.service.d.ts +35 -0
- package/dist/lib/types/fabric.types.d.ts +6 -0
- package/dist/lib/types/font.types.d.ts +6 -10
- package/dist/lib/types/product.types.d.ts +23 -0
- package/dist/lib/types/shape.types.d.ts +19 -14
- package/dist/lib/utils/canvas-setup.d.ts +7 -4
- package/dist/lib/utils/color-apply.utils.d.ts +13 -0
- package/dist/lib/utils/color-conversions.utils.d.ts +6 -0
- package/dist/lib/utils/fabric-helper.d.ts +2 -0
- package/dist/lib/utils/page-manager.d.ts +3 -2
- package/dist/lib/utils/qr-utils.d.ts +1 -1
- package/dist/lib/utils/query-params.d.ts +28 -0
- package/dist/lib/utils/svg-utils.d.ts +3 -0
- package/dist/modules/canvas/index.d.ts +1 -5
- package/dist/modules/components/color-picker/index.d.ts +8 -1
- package/dist/modules/components/product-not-found/index.d.ts +3 -0
- package/dist/modules/index.d.ts +1 -5
- package/dist/modules/topbar/preview-modal.d.ts +3 -0
- package/dist/vibrant-tool.css +338 -20
- package/dist/vibrant-tool.es.js +45071 -12455
- package/dist/vibrant-tool.umd.js +38713 -6098
- package/dist/zustand/productStore.d.ts +11 -0
- package/package.json +72 -71
package/README.md
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
## Next.js setup in consumer app
|
|
2
|
-
|
|
3
|
-
Update `next.config.ts`:
|
|
4
|
-
|
|
5
|
-
```ts
|
|
6
|
-
import type { NextConfig } from "next";
|
|
7
|
-
|
|
8
|
-
const nextConfig: NextConfig = {
|
|
9
|
-
transpilePackages: ["vibrant-tool"]
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export default nextConfig;
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Import global styles in your app layout (`app/layout.tsx`):
|
|
16
|
-
|
|
17
|
-
```ts
|
|
18
|
-
import "vibrant-tool/styles.css";
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
Use the editor component:
|
|
22
|
-
|
|
23
|
-
```tsx
|
|
24
|
-
"use client";
|
|
25
|
-
|
|
26
|
-
import { VibrantEditor } from "vibrant-tool";
|
|
27
|
-
|
|
28
|
-
export default function Page() {
|
|
29
|
-
return <VibrantEditor />;
|
|
30
|
-
}
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## Exported API
|
|
34
|
-
|
|
35
|
-
- `VibrantEditor`
|
|
36
|
-
- `default` export: `VibrantEditor`
|
|
1
|
+
## Next.js setup in consumer app
|
|
2
|
+
|
|
3
|
+
Update `next.config.ts`:
|
|
4
|
+
|
|
5
|
+
```ts
|
|
6
|
+
import type { NextConfig } from "next";
|
|
7
|
+
|
|
8
|
+
const nextConfig: NextConfig = {
|
|
9
|
+
transpilePackages: ["vibrant-tool"]
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default nextConfig;
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import global styles in your app layout (`app/layout.tsx`):
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import "vibrant-tool/styles.css";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Use the editor component:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
"use client";
|
|
25
|
+
|
|
26
|
+
import { VibrantEditor } from "vibrant-tool";
|
|
27
|
+
|
|
28
|
+
export default function Page() {
|
|
29
|
+
return <VibrantEditor />;
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Exported API
|
|
34
|
+
|
|
35
|
+
- `VibrantEditor`
|
|
36
|
+
- `default` export: `VibrantEditor`
|
package/dist/App.d.ts
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import { ElementItem, ExternalShapeType, ShapeType } from '../types/shape.types';
|
|
1
|
+
import { ElementItem, ExternalShapeType, ShapeType, TextTemplateItem } from '../types/shape.types';
|
|
2
2
|
type NormalizedShapeResponse = {
|
|
3
3
|
items: ElementItem[];
|
|
4
4
|
};
|
|
5
5
|
export declare const ShapeService: {
|
|
6
6
|
getAll(data: ShapeType): Promise<NormalizedShapeResponse>;
|
|
7
7
|
getAllExternal(data: ExternalShapeType): Promise<NormalizedShapeResponse>;
|
|
8
|
+
getTextTemplates(data: ShapeType): Promise<{
|
|
9
|
+
items: TextTemplateItem[];
|
|
10
|
+
}>;
|
|
11
|
+
getTextTemplateById(id: string): Promise<TextTemplateItem | null>;
|
|
8
12
|
};
|
|
9
13
|
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export interface TemplatePage {
|
|
2
|
+
side: "front" | "back";
|
|
3
|
+
designData: any;
|
|
4
|
+
image?: string;
|
|
5
|
+
order?: number;
|
|
6
|
+
}
|
|
7
|
+
export interface TemplateDesignItem {
|
|
8
|
+
_id: string;
|
|
9
|
+
name?: string;
|
|
10
|
+
pages: TemplatePage[];
|
|
11
|
+
designs?: any[];
|
|
12
|
+
image?: string;
|
|
13
|
+
product?: string | any;
|
|
14
|
+
category?: string | any;
|
|
15
|
+
colors?: string[];
|
|
16
|
+
industries?: string[];
|
|
17
|
+
status?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface TemplateDesignResponse {
|
|
20
|
+
success: boolean;
|
|
21
|
+
data: TemplateDesignItem[];
|
|
22
|
+
message?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const TemplateDesignService: {
|
|
25
|
+
getTemplates(data: {
|
|
26
|
+
product: string;
|
|
27
|
+
page: number;
|
|
28
|
+
limit: number;
|
|
29
|
+
}): Promise<TemplateDesignResponse | null>;
|
|
30
|
+
getTemplateDesignById(id: string): Promise<{
|
|
31
|
+
success: boolean;
|
|
32
|
+
data: TemplateDesignItem;
|
|
33
|
+
} | null>;
|
|
34
|
+
updateTemplateDesign(id: string, body: Partial<TemplateDesignItem>): Promise<TemplateDesignResponse | null>;
|
|
35
|
+
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Canvas, FabricObject } from 'fabric';
|
|
2
|
+
import { CMYKColor } from './color.types';
|
|
2
3
|
export interface AppFabricObject extends FabricObject {
|
|
3
4
|
objectId?: string;
|
|
4
5
|
objectName?: string;
|
|
@@ -12,13 +13,18 @@ export type SavedDesign = {
|
|
|
12
13
|
updatedAt: number;
|
|
13
14
|
};
|
|
14
15
|
export interface ExtendedFabricObject extends FabricObject {
|
|
16
|
+
__cmyk?: CMYKColor;
|
|
15
17
|
__isQR?: boolean;
|
|
16
18
|
__qrValue?: string;
|
|
17
19
|
__qrDataUrl?: string;
|
|
18
20
|
__qrDark?: string;
|
|
21
|
+
__qrDarkCmyk?: CMYKColor;
|
|
19
22
|
__qrLight?: string;
|
|
23
|
+
__qrLightCmyk?: CMYKColor;
|
|
20
24
|
__barcodeBackground?: string;
|
|
25
|
+
__barcodeBgCmyk?: CMYKColor;
|
|
21
26
|
__barcodeForeground?: string;
|
|
27
|
+
__barcodeFgCmyk?: CMYKColor;
|
|
22
28
|
__isVideo?: boolean;
|
|
23
29
|
videoEl?: HTMLVideoElement;
|
|
24
30
|
trimStart?: number;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
export interface FontType {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
pageSize: number | 30;
|
|
5
|
-
IsAdmin: boolean;
|
|
2
|
+
page: number | 1;
|
|
3
|
+
limit: number | 30;
|
|
6
4
|
}
|
|
7
5
|
export interface FontItem {
|
|
8
6
|
_id: string;
|
|
9
|
-
|
|
7
|
+
status: boolean;
|
|
10
8
|
chieldFonts: {
|
|
11
|
-
|
|
9
|
+
status: boolean;
|
|
12
10
|
fontFile: string;
|
|
13
11
|
fontImage: string;
|
|
14
12
|
fontName: string;
|
|
@@ -21,8 +19,6 @@ export interface FontItem {
|
|
|
21
19
|
fontWeight: string;
|
|
22
20
|
}
|
|
23
21
|
export interface FontItemResponse {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
};
|
|
27
|
-
status: boolean;
|
|
22
|
+
data: FontItem[];
|
|
23
|
+
success: boolean;
|
|
28
24
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface ProductOptionItem {
|
|
2
|
+
_id: string;
|
|
3
|
+
parentId: string;
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
bleedArea: number;
|
|
7
|
+
trimArea: number;
|
|
8
|
+
safetyArea: number;
|
|
9
|
+
status: boolean;
|
|
10
|
+
options: {
|
|
11
|
+
attributeItemDisplayName: string;
|
|
12
|
+
attributeItemName: string;
|
|
13
|
+
variantCode: string;
|
|
14
|
+
variantName: string;
|
|
15
|
+
variantType: string;
|
|
16
|
+
}[];
|
|
17
|
+
optionsMap?: Record<string, string>;
|
|
18
|
+
[key: string]: any;
|
|
19
|
+
}
|
|
20
|
+
export interface ProductOptionResponse {
|
|
21
|
+
success: boolean;
|
|
22
|
+
data: ProductOptionItem;
|
|
23
|
+
}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
export interface ShapeType {
|
|
2
|
-
type?: string;
|
|
3
2
|
category?: string | null;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
id?: string;
|
|
7
|
-
statusKey?: string;
|
|
8
|
-
statusValue?: string;
|
|
3
|
+
page?: number | 1;
|
|
4
|
+
limit?: number | 10;
|
|
9
5
|
}
|
|
10
6
|
export interface ElementItem {
|
|
11
7
|
_id: string;
|
|
12
|
-
|
|
8
|
+
status: boolean;
|
|
13
9
|
category: string;
|
|
14
10
|
image: string;
|
|
15
11
|
largeImage: string;
|
|
@@ -18,19 +14,28 @@ export interface ElementItem {
|
|
|
18
14
|
data?: string;
|
|
19
15
|
}
|
|
20
16
|
export interface ElementItemResponse {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
status: boolean;
|
|
17
|
+
data: ElementItem[];
|
|
18
|
+
success: boolean;
|
|
25
19
|
}
|
|
26
20
|
export interface ExternalItemResponse {
|
|
27
21
|
data: ElementItem[];
|
|
28
|
-
|
|
22
|
+
success: boolean;
|
|
29
23
|
}
|
|
30
24
|
export interface ExternalShapeType {
|
|
31
25
|
query?: string | null;
|
|
32
26
|
keyType: string | null;
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
page: number | 1;
|
|
28
|
+
limit: number | 30;
|
|
35
29
|
isVector: boolean;
|
|
36
30
|
}
|
|
31
|
+
export interface TextTemplateItem {
|
|
32
|
+
_id: string;
|
|
33
|
+
status: boolean;
|
|
34
|
+
name: string;
|
|
35
|
+
image: string;
|
|
36
|
+
jsonData: object;
|
|
37
|
+
}
|
|
38
|
+
export interface TextTemplateResponse {
|
|
39
|
+
data: TextTemplateItem[];
|
|
40
|
+
success: boolean;
|
|
41
|
+
}
|
|
@@ -17,10 +17,13 @@ export declare function createLargeWorkarea(canvas: Canvas, config: VCanvasConfi
|
|
|
17
17
|
evented: false;
|
|
18
18
|
name: string;
|
|
19
19
|
}, import('fabric').SerializedRectProps, import('fabric').ObjectEvents>;
|
|
20
|
-
export
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
export interface WorkareaProductOptions {
|
|
21
|
+
bleedArea?: number;
|
|
22
|
+
trimArea?: number;
|
|
23
|
+
safetyArea?: number;
|
|
24
|
+
optionsMap?: Record<string, string>;
|
|
25
|
+
}
|
|
26
|
+
export declare function createWorkarea(canvas: Canvas, container: HTMLDivElement, productData?: WorkareaProductOptions | null): Rect<{
|
|
24
27
|
width: number;
|
|
25
28
|
height: number;
|
|
26
29
|
fill: string;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CMYKColor } from '../types/color.types';
|
|
2
|
+
/**
|
|
3
|
+
* Extracts fill color, opacity, and __cmyk from the first selected target object.
|
|
4
|
+
*/
|
|
5
|
+
export declare function extractTargetColor(targets: any[]): {
|
|
6
|
+
color?: string;
|
|
7
|
+
opacity?: number;
|
|
8
|
+
cmyk?: CMYKColor;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Applies a new fill color, opacity, and exact __cmyk across selected Fabric objects.
|
|
12
|
+
*/
|
|
13
|
+
export declare function applyFillToFabricObjects(objects: any[], newColor: string, alpha: number, currentColor: string, canvas: any, cmykValues?: CMYKColor): void;
|
|
@@ -17,3 +17,9 @@ export declare function hexToRgb(hex: string): {
|
|
|
17
17
|
g: number;
|
|
18
18
|
b: number;
|
|
19
19
|
};
|
|
20
|
+
export declare function hexToCmyk(hex: string): CMYKColor;
|
|
21
|
+
export declare function cmykToHex(c: number, m: number, y: number, k: number): string;
|
|
22
|
+
export declare function isOutOfCmykGamut(hex: string, threshold?: number): boolean;
|
|
23
|
+
export declare function parseHexInput(input: string): string | null;
|
|
24
|
+
export declare function convertSvgColorsToCmyk(svg: string): string;
|
|
25
|
+
export declare function convertPdfToDeviceCMYK(rawBuffer: ArrayBuffer): Promise<Uint8Array>;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import { Canvas } from 'fabric';
|
|
2
2
|
export declare function loadPageToCanvas(canvas: Canvas, json: any): Promise<void>;
|
|
3
|
+
export declare function getWorkareaDataUrl(cvs: Canvas, multiplier?: number): string;
|
|
4
|
+
export declare function renderPageDataUrl(json: any, baseCanvas: Canvas, multiplier?: number): Promise<string>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { Canvas } from 'fabric';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
import { PageSide } from '../../zustand/historyStore';
|
|
3
|
+
export type { PageSide };
|
|
4
|
+
export declare function switchCanvasPage(canvas: Canvas, currentPage: PageSide, targetPage: PageSide, pageJSON: Record<PageSide, any>, clearSelection: () => void, containerRef: React.MutableRefObject<HTMLDivElement | null>): Promise<void>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { FabricObject } from 'fabric';
|
|
2
2
|
import { ExtendedFabricObject } from '../types/fabric.types';
|
|
3
3
|
export declare const isQRCode: (obj?: FabricObject | null) => obj is ExtendedFabricObject;
|
|
4
|
-
export declare function generateQRSVG(value: string, dark
|
|
4
|
+
export declare function generateQRSVG(value: string, dark?: string, light?: string): Promise<string>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Universal Query Parameter Helpers
|
|
3
|
+
* Can be used anywhere in the codebase (React components, utilities, stores, services).
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Get a query parameter string value by key
|
|
7
|
+
* @example const productId = getQueryParam('productId');
|
|
8
|
+
*/
|
|
9
|
+
export declare function getQueryParam(key: string): string | null;
|
|
10
|
+
/**
|
|
11
|
+
* Get a query parameter as a number
|
|
12
|
+
* @example const width = getQueryParamNumber('width', 3.5);
|
|
13
|
+
*/
|
|
14
|
+
export declare function getQueryParamNumber(key: string, defaultValue?: number): number | undefined;
|
|
15
|
+
/**
|
|
16
|
+
* Get a query parameter as a boolean
|
|
17
|
+
* @example const isVector = getQueryParamBoolean('isVector', false);
|
|
18
|
+
*/
|
|
19
|
+
export declare function getQueryParamBoolean(key: string, defaultValue?: boolean): boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Get all query parameters as a plain Key-Value object
|
|
22
|
+
* @example const params = getAllQueryParams();
|
|
23
|
+
*/
|
|
24
|
+
export declare function getAllQueryParams(): Record<string, string>;
|
|
25
|
+
/**
|
|
26
|
+
* Update or set a query parameter in the current browser URL without page reload
|
|
27
|
+
*/
|
|
28
|
+
export declare function setQueryParam(key: string, value: string | number | boolean | null): void;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { FabricObject } from 'fabric';
|
|
2
|
+
import { ExtendedFabricObject } from '../types/fabric.types';
|
|
2
3
|
export declare function addSVGToCanvas(type: string | undefined, url: string): Promise<void>;
|
|
3
4
|
export declare function renderSVGStringToCanvas(type: string | undefined, svg: string, options?: {
|
|
4
5
|
background?: string;
|
|
5
6
|
color?: string;
|
|
6
7
|
}): Promise<FabricObject<Partial<import('fabric').FabricObjectProps>, import('fabric').SerializedObjectProps, import('fabric').ObjectEvents> | undefined>;
|
|
8
|
+
export declare function updateBarcodeObjectColors(barcodeGroup: ExtendedFabricObject, fgColor: string, bgColor: string): void;
|
|
9
|
+
export declare function updateQRObjectColors(qrGroup: ExtendedFabricObject, darkColor: string, lightColor: string): void;
|
|
7
10
|
export declare function extractSVGColors(svg: FabricObject): string[];
|
|
8
11
|
export declare function replaceSVGColor(svg: FabricObject, fromColor: string, toColor: string): void;
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { CMYKColor } from '../../../lib/types/color.types';
|
|
2
|
+
interface CMYKColorPickerProps {
|
|
3
|
+
value?: string | CMYKColor;
|
|
4
|
+
onChange?: (hexOrCmyk: any, cmyk?: CMYKColor) => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export default function CMYKColorPicker({ value, onChange, className }?: CMYKColorPickerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
8
|
+
export {};
|
package/dist/modules/index.d.ts
CHANGED