embroidery-qc-image 1.0.7 → 1.0.8

package/README.md

@@ -13,10 +13,9 @@ npm install embroidery-qc-image
 ```tsx
 import React from "react";
 import { EmbroideryQCImage } from "embroidery-qc-image";
-import "embroidery-qc-image/dist/index.css";
+import type { EmbroideryQCConfig } from "embroidery-qc-image";
 
-// Example configuration
-const exampleConfig = {
+const exampleConfig: EmbroideryQCConfig = {
   image_url:
     "https://i.etsystatic.com/34592503/r/il/5d3e59/7253371633/il_fullxfull.7253371633_kgqr.jpg",
   sides: [
@@ -24,16 +23,16 @@ const exampleConfig = {
       print_side: "Chest",
       positions: [
         {
-          type: "TEXT" as const,
+          type: "TEXT",
           text: "Brian",
           text_shape: "No Curved",
           color: null,
-          font: "Brittany",
+          font: "Brittany Signature",
           floral_pattern: null,
           character_colors: ["Pink (1148)", "Lavender (1032)"],
         },
         {
-          type: "TEXT" as const,
+          type: "TEXT",
           text: "EST. 2009",
           text_shape: "No Curved",
           color: "Light Denim (1133)",
@@ -42,7 +41,7 @@ const exampleConfig = {
           floral_pattern: "P61",
         },
         {
-          type: "ICON" as const,
+          type: "ICON",
           icon: 1,
           layer_colors: ["White (9)", "Red (1037)"],
         },
@@ -52,7 +51,7 @@ const exampleConfig = {
       print_side: "Sleeve",
       positions: [
         {
-          type: "TEXT" as const,
+          type: "TEXT",
           text: "Ayanna",
           text_shape: "No Curved",
           color: "Terra Cotta (1477)",
@@ -60,7 +59,7 @@ const exampleConfig = {
           character_colors: null,
         },
         {
-          type: "TEXT" as const,
+          type: "TEXT",
           text: "Ryan",
           text_shape: "No Curved",
           color: "Terra Cotta (1477)",
@@ -83,6 +82,34 @@ const App: React.FC = () => {
 export default App;
 ```
 
+### Export as Data URL
+
+If you want to render the embroidery image yourself (for example with an `<img>` tag, download button, or upload flow), use the helper `generateEmbroideryQCImageData`. It returns a Data URL corresponding to the canvas output.
+
+```tsx
+import { generateEmbroideryQCImageData } from "embroidery-qc-image";
+
+const dataUrl = await generateEmbroideryQCImageData(exampleConfig, {
+  width: 4200,        // optional, defaults to 4200
+  height: 4800,       // optional, defaults to 4800
+  mimeType: "image/png", // optional
+  quality: 0.92          // optional (used for jpeg/webp)
+});
+
+if (dataUrl) {
+  // Display in an <img> tag
+  <img src={dataUrl} alt="Embroidery preview" />;
+  
+  // Or trigger download
+  const link = document.createElement("a");
+  link.href = dataUrl;
+  link.download = "embroidery.png";
+  link.click();
+}
+```
+
+> Need a `Blob` instead? Use `generateEmbroideryQCImageBlob` with the same options.
+
 ## Props
 
 ### EmbroideryQCImage
@@ -98,91 +125,41 @@ export default App;
 ### EmbroideryQCConfig
 
 ```typescript
-interface EmbroideryQCConfig {
-  image_url?: string;        // Optional mockup image URL (displayed at bottom-right)
-  sides: Side[];             // Array of sides to render
-}
-
-interface Side {
-  print_side: string;        // e.g., "Chest", "Sleeve"
-  positions: Position[];     // Array of positions to render
-}
-
-type Position = TextPosition | IconPosition;
-
-interface TextPosition {
+export interface TextPosition {
   type: 'TEXT';
-  text: string;                      // Text content
-  text_shape?: string | null;          // Optional: "No Curved" or other shapes
-  color?: string | null;               // Optional: Color for entire text
-  font?: string | null;                // Optional: Font name
-  character_colors?: string[] | null; // Optional: Array of colors for alternating characters
-  floral_pattern?: string | null;      // Optional: Floral pattern name
+  text: string;
+  text_shape?: string | null;
+  color?: string | null;
+  font?: string | null;
+  character_colors?: string[] | null;
+  floral_pattern?: string | null;
 }
 
-interface IconPosition {
+export interface IconPosition {
   type: 'ICON';
-  icon: number;          // Icon number (e.g., 1, 2, 3...). Use 0 for default icon from embroidery file
-  layer_colors: string[]; // Array of colors for icon layers
+  icon: number;
+  layer_colors: string[];
 }
-```
-
-## Features
-
-- ✅ Render custom text on mockup images with automatic text wrapping
-- ✅ Support for icon placement with multi-layer colors
-- ✅ Character-level color customization (alternating colors)
-- ✅ Font loading from CDN with automatic fallback
-- ✅ Multiple print sides (Chest, Sleeve, etc.)
-- ✅ Floral pattern support with inline display
-- ✅ Automatic font scaling to fit canvas (only scales down, never up)
-- ✅ Smart layout with uniform property grouping
-- ✅ Color swatches displayed inline with labels
-- ✅ Automatic word wrapping for long text
-- ✅ Fixed canvas size (4200x4800)
-- ✅ TypeScript support with full type definitions
-
-## Supported Colors
-
-The component automatically maps color names to hex values for text rendering:
-- `White (9)`, `Black (8)`, `Red (9)`, `Red (1307)`, `Blue (9)`, `Green (9)`
-- `Forest Green (1397)`, `Brown (9)`, `Cream (9)`, `Beige (9)`
-- `Navy (9)`, `Maroon (9)` and more...
 
-## Thread Colors (Màu chỉ)
+export type Position = TextPosition | IconPosition;
 
-Thread color swatches are automatically loaded and displayed inline with color labels:
-```
-https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/thread-colors/{ColorName}.png
-```
-
-The swatches are displayed next to "Màu chỉ:" labels, showing visual representation of the thread colors used in the embroidery design.
-
-## Font Loading
-
-Fonts are automatically loaded from:
-```
-https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/fonts/{FontName}.woff2
-```
-
-Supported format: WOFF2
-
-## Icons
-
-Icons are loaded from:
-```
-https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/icons/Icon {IconNumber}.png
-```
-
-Example: `icon: 1` → loads `Icon 1.png`
+export interface Side {
+  print_side: string;
+  positions: Position[];
+}
 
-**Special case**: Use `icon: 0` to display "icon mặc định theo file thêu" (default icon from embroidery file) without loading any image.
+export interface EmbroideryQCConfig {
+  image_url?: string;
+  error?: string | null;
+  sides: Side[];
+}
 
-## Floral Patterns
+export interface EmbroideryQCImageProps {
+  config: EmbroideryQCConfig;
+  className?: string;
+  style?: React.CSSProperties;
+}
 
-Floral patterns are loaded from:
-```
-https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/florals/{PatternName}.png
 ```
 
 ## License

package/dist/components/EmbroideryQCImage.d.ts

@@ -1,6 +1,14 @@
 import React from "react";
-import { EmbroideryQCImageProps } from "../types";
+import { EmbroideryQCConfig, EmbroideryQCImageProps } from "../types";
 import "./EmbroideryQCImage.css";
+export interface EmbroideryQCImageRenderOptions {
+    width?: number;
+    height?: number;
+    mimeType?: "image/png" | "image/jpeg" | "image/webp";
+    quality?: number;
+}
 declare const EmbroideryQCImage: React.FC<EmbroideryQCImageProps>;
+export declare const generateEmbroideryQCImageBlob: (config: EmbroideryQCConfig, options?: EmbroideryQCImageRenderOptions) => Promise<Blob | null>;
+export declare const generateEmbroideryQCImageData: (config: EmbroideryQCConfig, options?: EmbroideryQCImageRenderOptions) => Promise<string | null>;
 export default EmbroideryQCImage;
 //# sourceMappingURL=EmbroideryQCImage.d.ts.map

package/dist/components/EmbroideryQCImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmbroideryQCImage.d.ts","sourceRoot":"","sources":["../../src/components/EmbroideryQCImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAuOjC,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsKvD,CAAC;AA8YF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"EmbroideryQCImage.d.ts","sourceRoot":"","sources":["../../src/components/EmbroideryQCImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAChF,OAAO,yBAAyB,CAAC;AAwJjC,MAAM,WAAW,8BAA8B;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA2VD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqHvD,CAAC;AAiwBF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAmBrB,CAAC;AAEF,eAAO,MAAM,6BAA6B,GACxC,QAAQ,kBAAkB,EAC1B,UAAS,8BAAmC,KAC3C,OAAO,CAAC,MAAM,GAAG,IAAI,CAmBvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/index.d.ts

@@ -21,6 +21,7 @@ interface Side {
 }
 interface EmbroideryQCConfig {
     image_url?: string;
+    error?: string | null;
     sides: Side[];
 }
 interface EmbroideryQCImageProps {
@@ -29,7 +30,15 @@ interface EmbroideryQCImageProps {
     style?: React.CSSProperties;
 }
 
+interface EmbroideryQCImageRenderOptions {
+    width?: number;
+    height?: number;
+    mimeType?: "image/png" | "image/jpeg" | "image/webp";
+    quality?: number;
+}
 declare const EmbroideryQCImage: React$1.FC<EmbroideryQCImageProps>;
+declare const generateEmbroideryQCImageBlob: (config: EmbroideryQCConfig, options?: EmbroideryQCImageRenderOptions) => Promise<Blob | null>;
+declare const generateEmbroideryQCImageData: (config: EmbroideryQCConfig, options?: EmbroideryQCImageRenderOptions) => Promise<string | null>;
 
-export { EmbroideryQCImage };
-export type { EmbroideryQCConfig, EmbroideryQCImageProps, IconPosition, Position, Side, TextPosition };
+export { EmbroideryQCImage, generateEmbroideryQCImageBlob, generateEmbroideryQCImageData };
+export type { EmbroideryQCConfig, EmbroideryQCImageProps, EmbroideryQCImageRenderOptions, IconPosition, Position, Side, TextPosition };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC9G,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,EAClB,sBAAsB,EACvB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC"}