bsign-customization-full 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsign-customization-full",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/layers/layer-forms/material-form.tsx

@@ -1,4 +1,5 @@
 import { getTemplateById, getTemplateMaterial } from "../../../lib/config"
+import { resolveAssetUrl } from "../../../lib/asset-url"
 import { useLayersStore } from "../../../store/layers-store"
 
 export default function MaterialLayerForm() {
@@ -34,7 +35,7 @@ export default function MaterialLayerForm() {
                     >
                         {material.previewImage ? (
                             <img
-                                src={material.previewImage}
+                                src={resolveAssetUrl(material.previewImage)}
                                 alt={material.label}
                                 className="h-[72px] w-[72px] rounded-[8px] object-cover"
                             />

package/src/components/layers/layer-forms/template-form.tsx

@@ -1,4 +1,5 @@
 import { getTemplateById, templateCatalog } from "../../../lib/config"
+import { resolveAssetUrl } from "../../../lib/asset-url"
 import { useLayersStore } from "../../../store/layers-store"
 
 export default function TemplateLayerForm() {
@@ -23,7 +24,11 @@ export default function TemplateLayerForm() {
                             }`}
                     >
                         <div className="aspect-square w-full bg-[#EFEFEF]">
-                            <img src={template.image} alt={template.name} className="h-full w-full object-cover" />
+                            <img
+                                src={resolveAssetUrl(template.image)}
+                                alt={template.name}
+                                className="h-full w-full object-cover"
+                            />
                         </div>
                         <div className="space-y-1 px-3 py-2">
                             <p className="text-[14px] font-semibold text-[#111111]">{template.name}</p>

package/src/lib/asset-url.ts

@@ -6,7 +6,7 @@ const SPECIAL_PROTOCOL_PATTERN = /^(?:data|blob):/i
  * Must be set explicitly from widget mount props:
  *   mountConstructorWidget(..., { assetBaseUrl: "https://your-cdn/path/to/dist/" })
  */
-const DEFAULT_ASSET_BASE_URL = "/"
+const DEFAULT_ASSET_BASE_URL = "http://localhost:5173/"
 
 function toBaseUrl(url: string): string | undefined {
   try {

package/src/lib/config.ts

@@ -86,12 +86,12 @@ export const getSizeLimitScale = (size: Pick<TSize, "cm">): number => {
 
 const MODERN_BACKGROUND_ASSETS = {
   rectangle: {
-    black: resolveAssetUrl("/templates/assets/modern/rectangle-black.webp"),
-    white: resolveAssetUrl("/templates/assets/modern/rectangle-white.webp"),
+    black: "/templates/assets/modern/rectangle-black.webp",
+    white: "/templates/assets/modern/rectangle-white.webp",
   },
   square: {
-    black: resolveAssetUrl("/templates/assets/modern/square-black.webp"),
-    white: resolveAssetUrl("/templates/assets/modern/square-white.webp"),
+    black: "/templates/assets/modern/square-black.webp",
+    white: "/templates/assets/modern/square-white.webp",
   },
 } as const;
 
@@ -200,38 +200,38 @@ const WAVE_MATERIALS = [
   {
     id: "anthracite-gray",
     label: "Anthracite Gray",
-    previewImage: resolveAssetUrl("/colors/anthracite-gray_50x50.png"),
-    image: resolveAssetUrl("/colors/anthracite-gray.webp"),
+    previewImage: "/colors/anthracite-gray_50x50.png",
+    image: "/colors/anthracite-gray.webp",
   },
   {
     id: "indian-rosewood",
     label: "Indian Rosewood",
-    previewImage: resolveAssetUrl("/colors/indian-rosewood_50x50.png"),
-    image: resolveAssetUrl("/colors/indian-rosewood.webp"),
+    previewImage: "/colors/indian-rosewood_50x50.png",
+    image: "/colors/indian-rosewood.webp",
   },
   {
     id: "natural-wood",
     label: "Natural Wood",
-    previewImage: resolveAssetUrl("/colors/natural-wood_50x50.png"),
-    image: resolveAssetUrl("/colors/natural-wood.webp"),
+    previewImage: "/colors/natural-wood_50x50.png",
+    image: "/colors/natural-wood.webp",
   },
   {
     id: "walnut",
     label: "Walnut",
-    previewImage: resolveAssetUrl("/colors/walnut_50x50.png"),
-    image: resolveAssetUrl("/colors/walnut.webp"),
+    previewImage: "/colors/walnut_50x50.png",
+    image: "/colors/walnut.webp",
   },
   {
     id: "redwood",
     label: "Redwood",
-    previewImage: resolveAssetUrl("/colors/redwood_50x50.png"),
-    image: resolveAssetUrl("/colors/redwood.webp"),
+    previewImage: "/colors/redwood_50x50.png",
+    image: "/colors/redwood.webp",
   },
   {
     id: "dark-wenge",
     label: "Dark Wenge",
-    previewImage: resolveAssetUrl("/colors/dark-wenge_50x50.png"),
-    image: resolveAssetUrl("/colors/dark-wenge.webp"),
+    previewImage: "/colors/dark-wenge_50x50.png",
+    image: "/colors/dark-wenge.webp",
   },
 ] as const;
 
@@ -243,8 +243,12 @@ export const colors: Array<{
 }> = WAVE_MATERIALS.map((material) => ({
   id: material.id,
   label: material.label,
-  smallImage: material.previewImage,
-  image: material.image,
+  get smallImage() {
+    return resolveAssetUrl(material.previewImage);
+  },
+  get image() {
+    return resolveAssetUrl(material.image);
+  },
 }));
 
 const getSignCenter = (size: TSize) => ({
@@ -261,13 +265,23 @@ const getMaterialBackground = ({
   shapeId: string;
   size: TSize;
 }): string => {
-  if (material.getBackgroundSrc) {
-    return material.getBackgroundSrc({ shapeId, size });
+  const backgroundPath = material.getBackgroundSrc
+    ? material.getBackgroundSrc({ shapeId, size })
+    : material.backgroundByShape[shapeId];
+
+  if (!backgroundPath) {
+    return backgroundPath;
   }
 
-  return material.backgroundByShape[shapeId];
+  return resolveAssetUrl(backgroundPath);
 };
 
+const getTemplateImage = (template: TemplateDefinition): string =>
+  resolveAssetUrl(template.image);
+
+const getShapePreviewImage = (shape: TemplateShape): string | undefined =>
+  shape.previewImage ? resolveAssetUrl(shape.previewImage) : undefined;
+
 const createTextLayers = ({
   size,
   textColor,
@@ -401,7 +415,7 @@ const modernTemplate: TemplateDefinition = {
 const waveTemplate: TemplateDefinition = {
   id: "wave",
   name: "Wave",
-  image: resolveAssetUrl("/templates/wave.webp"),
+  image: "/templates/wave.webp",
   textFont: "font-bebasneue",
   defaultShapeId: "square",
   defaultMaterialId: "anthracite-gray",
@@ -411,7 +425,7 @@ const waveTemplate: TemplateDefinition = {
       id: "square",
       label: "Square",
       sizes: SQUARE_SIZES,
-      previewImage: resolveAssetUrl("/templates/wave.webp"),
+      previewImage: "/templates/wave.webp",
     },
   ],
   materials: WAVE_MATERIALS.map((material) => ({
@@ -584,7 +598,7 @@ export const getTemplateShapePreview = ({
     material,
     shapeId: shape.id,
     size,
-  }) ?? shape.previewImage;
+  }) ?? getShapePreviewImage(shape);
 };
 
 export const resolveTemplateSelection = ({
@@ -714,13 +728,17 @@ export const templates: Array<{
   return {
     id: template.id,
     name: template.name,
-    image: template.image,
-    layers: createTemplateLayers({
-      templateId: defaults.selectedTemplateId,
-      shapeId: defaults.selectedShapeId,
-      materialId: defaults.selectedMaterialId,
-      preferredSizeId: defaults.selectedSize.id,
-    }),
+    get image() {
+      return getTemplateImage(template);
+    },
+    get layers() {
+      return createTemplateLayers({
+        templateId: defaults.selectedTemplateId,
+        shapeId: defaults.selectedShapeId,
+        materialId: defaults.selectedMaterialId,
+        preferredSizeId: defaults.selectedSize.id,
+      });
+    },
   };
 });