bsign-customization-full 0.0.1

package/src/lib/config.ts

@@ -0,0 +1,730 @@
+import type { LayrProps, TLayer } from "../components/preview";
+import { BASE_FONT_SIZE } from "./config-font";
+
+export const prodApiUrl = "https://constructor-api-production.up.railway.app/v1/product/generate";
+
+export type TSize = {
+  id: string;
+  label: string;
+  brailleScale: number;
+  baseTextScale: number;
+  price: number;
+  cm: { w: number; h: number };
+  inchs: { w: number; h: number };
+};
+
+export type TemplateMaterial = {
+  id: string;
+  label: string;
+  textColor: string;
+  previewImage?: string;
+  previewColor?: string;
+  backgroundByShape: Record<string, string>;
+  getBackgroundSrc?: (params: {
+    shapeId: string;
+    size: TSize;
+  }) => string;
+};
+
+export type TemplateShape = {
+  id: string;
+  label: string;
+  description?: string;
+  previewImage?: string;
+  sizes: TSize[];
+};
+
+export type TemplateTextFont = "font-bebasneue" | "font-gothicb";
+
+export type TemplateDefinition = {
+  id: string;
+  name: string;
+  image: string;
+  description?: string;
+  textFont: TemplateTextFont;
+  defaultShapeId: string;
+  defaultMaterialId: string;
+  defaultSizeId: string;
+  shapes: TemplateShape[];
+  materials: TemplateMaterial[];
+  createLayers: (context: {
+    size: TSize;
+    shape: TemplateShape;
+    material: TemplateMaterial;
+  }) => TLayer<LayrProps>[];
+};
+
+const CSS_INCH_IN_PX = 96;
+const MM_IN_CM = 10;
+
+export const MAX_SIGN_WIDTH_MM = 300;
+export const MAX_SIGN_HEIGHT_MM = 190;
+
+export const getSizeLimitScale = (size: Pick<TSize, "cm">): number => {
+  const widthMm = size.cm.w * MM_IN_CM;
+  const heightMm = size.cm.h * MM_IN_CM;
+  const widthScale =
+    Number.isFinite(widthMm) && widthMm > 0 && Number.isFinite(MAX_SIGN_WIDTH_MM) && MAX_SIGN_WIDTH_MM > 0
+      ? MAX_SIGN_WIDTH_MM / widthMm
+      : 1;
+  const heightScale =
+    Number.isFinite(heightMm) &&
+      heightMm > 0 &&
+      Number.isFinite(MAX_SIGN_HEIGHT_MM) &&
+      MAX_SIGN_HEIGHT_MM > 0
+      ? MAX_SIGN_HEIGHT_MM / heightMm
+      : 1;
+  const sizeLimitScale = Math.min(widthScale, heightScale);
+
+  if (!Number.isFinite(sizeLimitScale) || sizeLimitScale <= 0) {
+    return 1;
+  }
+
+  return Math.min(1, sizeLimitScale);
+};
+
+const MODERN_BACKGROUND_ASSETS = {
+  rectangle: {
+    black: "/templates/assets/modern/rectangle-black.webp",
+    white: "/templates/assets/modern/rectangle-white.webp",
+  },
+  square: {
+    black: "/templates/assets/modern/square-black.webp",
+    white: "/templates/assets/modern/square-white.webp",
+  },
+} as const;
+
+type ModernShapeVariant = keyof typeof MODERN_BACKGROUND_ASSETS;
+type ModernMaterialVariant = keyof (typeof MODERN_BACKGROUND_ASSETS)["rectangle"];
+
+const getModernBackground = ({
+  shape,
+  material,
+}: {
+  shape: ModernShapeVariant;
+  material: ModernMaterialVariant;
+}): string => MODERN_BACKGROUND_ASSETS[shape][material];
+
+const SQUARE_SIZES: TSize[] = [
+  {
+    id: "3.5x3.5",
+    label: '3.5 x 3.5" / 90 x 90 mm',
+    brailleScale: 1,
+    baseTextScale: 1,
+    price: 25,
+    cm: { w: 9, h: 9 },
+    inchs: { w: 3.5, h: 3.5 },
+  },
+  {
+    id: "5x5",
+    label: '5 x 5" / 127 x 127 mm',
+    brailleScale: 0.8,
+    baseTextScale: 0.9,
+    price: 31,
+    cm: { w: 12.7, h: 12.7 },
+    inchs: { w: 5, h: 5 },
+  },
+  {
+    id: "6.3x6.3",
+    label: '6.3 x 6.3" / 160 x 160 mm',
+    brailleScale: 0.7,
+    baseTextScale: 0.8,
+    price: 39,
+    cm: { w: 16, h: 16 },
+    inchs: { w: 6.3, h: 6.3 },
+  },
+  {
+    id: "7.9x7.9",
+    label: '7.9 x 7.9" / 200 x 200 mm',
+    brailleScale: 0.6,
+    baseTextScale: 0.7,
+    price: 40,
+    cm: { w: 20, h: 20 },
+    inchs: { w: 7.9, h: 7.9 },
+  },
+];
+
+const MODERN_SQUARE_SIZES: TSize[] = [
+  {
+    id: "3.5x3.5",
+    label: '3.5 x 3.5" / 90 x 90 mm',
+    brailleScale: 1,
+    baseTextScale: 1,
+    price: 25,
+    cm: { w: 9, h: 9 },
+    inchs: { w: 3.5, h: 3.5 },
+  },
+  {
+    id: "4.7x4.7",
+    label: '4.7 x 4.7" / 120 x 120 mm',
+    brailleScale: 0.8,
+    baseTextScale: 0.9,
+    price: 31,
+    cm: { w: 12, h: 12 },
+    inchs: { w: 4.7, h: 4.7 },
+  },
+  {
+    id: "6.3x6.3",
+    label: '6.3 x 6.3" / 160 x 160 mm',
+    brailleScale: 0.7,
+    baseTextScale: 0.8,
+    price: 39,
+    cm: { w: 16, h: 16 },
+    inchs: { w: 6.3, h: 6.3 },
+  },
+  {
+    id: "7.9x7.9",
+    label: '7.9 x 7.9" / 200 x 200 mm',
+    brailleScale: 0.6,
+    baseTextScale: 0.7,
+    price: 40,
+    cm: { w: 20, h: 20 },
+    inchs: { w: 7.9, h: 7.9 },
+  },
+];
+
+const MODERN_RECTANGLE_SIZES: TSize[] = [
+  {
+    id: "14.5x7.8",
+    label: '14.5 x 7.8" / 370 x 200 mm',
+    brailleScale: 0.6,
+    baseTextScale: 0.8,
+    price: 40,
+    cm: { w: 37, h: 20 },
+    inchs: { w: 14.5, h: 7.8 },
+  },
+];
+
+const WAVE_MATERIALS = [
+  {
+    id: "anthracite-gray",
+    label: "Anthracite Gray",
+    previewImage: "/colors/anthracite-gray_50x50.png",
+    image: "/colors/anthracite-gray.webp",
+  },
+  {
+    id: "indian-rosewood",
+    label: "Indian Rosewood",
+    previewImage: "/colors/indian-rosewood_50x50.png",
+    image: "/colors/indian-rosewood.webp",
+  },
+  {
+    id: "natural-wood",
+    label: "Natural Wood",
+    previewImage: "/colors/natural-wood_50x50.png",
+    image: "/colors/natural-wood.webp",
+  },
+  {
+    id: "walnut",
+    label: "Walnut",
+    previewImage: "/colors/walnut_50x50.png",
+    image: "/colors/walnut.webp",
+  },
+  {
+    id: "redwood",
+    label: "Redwood",
+    previewImage: "/colors/redwood_50x50.png",
+    image: "/colors/redwood.webp",
+  },
+  {
+    id: "dark-wenge",
+    label: "Dark Wenge",
+    previewImage: "/colors/dark-wenge_50x50.png",
+    image: "/colors/dark-wenge.webp",
+  },
+] as const;
+
+export const colors: Array<{
+  id: string;
+  label: string;
+  smallImage: string;
+  image?: string;
+}> = WAVE_MATERIALS.map((material) => ({
+  id: material.id,
+  label: material.label,
+  smallImage: material.previewImage,
+  image: material.image,
+}));
+
+const getSignCenter = (size: TSize) => ({
+  x: Math.round((size.inchs.w * CSS_INCH_IN_PX) / 2),
+  y: Math.round((size.inchs.h * CSS_INCH_IN_PX) / 2),
+});
+
+const getMaterialBackground = ({
+  material,
+  shapeId,
+  size,
+}: {
+  material: TemplateMaterial;
+  shapeId: string;
+  size: TSize;
+}): string => {
+  if (material.getBackgroundSrc) {
+    return material.getBackgroundSrc({ shapeId, size });
+  }
+
+  return material.backgroundByShape[shapeId];
+};
+
+const createTextLayers = ({
+  size,
+  textColor,
+  text = "Kitchen",
+}: {
+  size: TSize;
+  textColor: string;
+  text?: string;
+}): TLayer<LayrProps>[] => {
+  const center = getSignCenter(size);
+  const textY = Math.round(center.y - 38);
+  const brailleY = textY + 78;
+
+  return [
+    {
+      type: "text",
+      props: {
+        text,
+        fontSize: BASE_FONT_SIZE,
+        movable: false,
+        scale: size.baseTextScale,
+        coordinates: { x: center.x, y: textY },
+        braille: true,
+        color: textColor,
+      },
+    },
+    {
+      type: "text",
+      subtype: "braille",
+      props: {
+        text,
+        fontSize: 12,
+        movable: false,
+        scale: size.brailleScale,
+        coordinates: { x: center.x, y: brailleY },
+        color: textColor,
+      },
+    },
+  ];
+};
+
+const modernTemplate: TemplateDefinition = {
+  id: "modern",
+  name: "Modern",
+  image: getModernBackground({
+    shape: "square",
+    material: "black",
+  }),
+  textFont: "font-gothicb",
+  defaultShapeId: "square",
+  defaultMaterialId: "black",
+  defaultSizeId: "6.3x6.3",
+  shapes: [
+    {
+      id: "square",
+      label: "Square",
+      previewImage: getModernBackground({
+        shape: "square",
+        material: "black",
+      }),
+      sizes: MODERN_SQUARE_SIZES,
+    },
+    {
+      id: "rectangle",
+      label: "Rectangle",
+      previewImage: getModernBackground({
+        shape: "rectangle",
+        material: "black",
+      }),
+      sizes: MODERN_RECTANGLE_SIZES,
+    },
+  ],
+  materials: [
+    {
+      id: "black",
+      label: "Black",
+      textColor: "#F5F7FA",
+      previewImage: getModernBackground({
+        shape: "square",
+        material: "black",
+      }),
+      previewColor: "#111111",
+      backgroundByShape: {
+        rectangle: getModernBackground({
+          shape: "rectangle",
+          material: "black",
+        }),
+        square: getModernBackground({
+          shape: "square",
+          material: "black",
+        }),
+      },
+    },
+    {
+      id: "white",
+      label: "White",
+      textColor: "#111111",
+      previewImage: getModernBackground({
+        shape: "square",
+        material: "white",
+      }),
+      previewColor: "#F4F6F8",
+      backgroundByShape: {
+        rectangle: getModernBackground({
+          shape: "rectangle",
+          material: "white",
+        }),
+        square: getModernBackground({
+          shape: "square",
+          material: "white",
+        }),
+      },
+    },
+  ],
+  createLayers: ({ size, shape, material }) => [
+    {
+      type: "background",
+      props: {
+        imageSrc: getMaterialBackground({
+          material,
+          shapeId: shape.id,
+          size,
+        }),
+        coordinates: { x: 0, y: 0 },
+      },
+    },
+    ...createTextLayers({ size, textColor: material.textColor }),
+  ],
+};
+
+const waveTemplate: TemplateDefinition = {
+  id: "wave",
+  name: "Wave",
+  image: "/templates/wave.webp",
+  textFont: "font-bebasneue",
+  defaultShapeId: "square",
+  defaultMaterialId: "anthracite-gray",
+  defaultSizeId: "3.5x3.5",
+  shapes: [
+    {
+      id: "square",
+      label: "Square",
+      sizes: SQUARE_SIZES,
+      previewImage: "/templates/wave.webp",
+    },
+  ],
+  materials: WAVE_MATERIALS.map((material) => ({
+    id: material.id,
+    label: material.label,
+    textColor: "#111111",
+    previewImage: material.previewImage,
+    backgroundByShape: {
+      square: material.image,
+    },
+  })),
+  createLayers: ({ material, shape, size }) => {
+    const center = getSignCenter(size);
+
+    return [
+      {
+        type: "background",
+        props: {
+          imageSrc: getMaterialBackground({
+            material,
+            shapeId: shape.id,
+            size,
+          }),
+          coordinates: { x: 0, y: 0 },
+        },
+      },
+      {
+        type: "image",
+        props: {
+          imageSrc: "/templates/assets/wave.webp",
+          coordinates: {
+            "3.5x3.5": { x: -35, y: 90 },
+            "5x5": { x: -35, y: 100 },
+            "6.3x6.3": { x: -35, y: 120 },
+            "7.9x7.9": { x: -35, y: 140 },
+          },
+        },
+      },
+      {
+        type: "text",
+        props: {
+          text: "Kitchen",
+          fontSize: BASE_FONT_SIZE,
+          movable: false,
+          scale: size.baseTextScale,
+          coordinates: { x: center.x, y: center.y - 10 },
+          braille: true,
+          color: material.textColor,
+        },
+      },
+      {
+        type: "text",
+        subtype: "braille",
+        props: {
+          text: "Kitchen",
+          fontSize: 12,
+          coordinates: { x: center.x, y: center.y + 70 },
+          movable: false,
+          scale: size.brailleScale,
+          color: material.textColor,
+        },
+      },
+    ];
+  },
+};
+
+export const templateCatalog: TemplateDefinition[] = [modernTemplate, waveTemplate];
+export const DEFAULT_TEMPLATE_ID = modernTemplate.id;
+
+const getFallbackTemplate = () => templateCatalog[0];
+
+export const getTemplateById = (templateId?: string): TemplateDefinition =>
+  templateCatalog.find((template) => template.id === templateId) ?? getFallbackTemplate();
+
+export const getTemplateTextFont = (templateId?: string): TemplateTextFont =>
+  getTemplateById(templateId).textFont;
+
+export const getTemplateShape = ({
+  template,
+  shapeId,
+}: {
+  template: TemplateDefinition;
+  shapeId?: string;
+}): TemplateShape =>
+  template.shapes.find((shape) => shape.id === shapeId) ??
+  template.shapes.find((shape) => shape.id === template.defaultShapeId) ??
+  template.shapes[0];
+
+const getTemplateShapeBySizeId = ({
+  template,
+  sizeId,
+}: {
+  template: TemplateDefinition;
+  sizeId: string;
+}): TemplateShape | undefined =>
+  template.shapes.find((shape) => shape.sizes.some((size) => size.id === sizeId));
+
+export const getTemplateMaterial = ({
+  template,
+  materialId,
+}: {
+  template: TemplateDefinition;
+  materialId?: string;
+}): TemplateMaterial =>
+  template.materials.find((material) => material.id === materialId) ??
+  template.materials.find((material) => material.id === template.defaultMaterialId) ??
+  template.materials[0];
+
+export const getTemplateSize = ({
+  shape,
+  preferredSizeId,
+  template,
+}: {
+  template: TemplateDefinition;
+  shape: TemplateShape;
+  preferredSizeId?: string;
+}): TSize =>
+  shape.sizes.find((size) => size.id === preferredSizeId) ??
+  shape.sizes.find((size) => size.id === template.defaultSizeId) ??
+  shape.sizes[0];
+
+export const getTemplateSizes = ({
+  templateId,
+  shapeId,
+}: {
+  templateId?: string;
+  shapeId?: string;
+}): TSize[] => {
+  const template = getTemplateById(templateId);
+
+  if (shapeId) {
+    const shape = getTemplateShape({ template, shapeId });
+    return shape.sizes;
+  }
+
+  const sizes: TSize[] = [];
+  const seenSizeIds = new Set<string>();
+
+  template.shapes.forEach((shape) => {
+    shape.sizes.forEach((size) => {
+      if (!seenSizeIds.has(size.id)) {
+        seenSizeIds.add(size.id);
+        sizes.push(size);
+      }
+    });
+  });
+
+  return sizes;
+};
+
+export const getTemplateShapePreview = ({
+  templateId,
+  shapeId,
+  materialId,
+  preferredSizeId,
+}: {
+  templateId?: string;
+  shapeId?: string;
+  materialId?: string;
+  preferredSizeId?: string;
+}): string | undefined => {
+  const { shape, material, size } = resolveTemplateSelection({
+    templateId,
+    shapeId,
+    materialId,
+    preferredSizeId,
+  });
+
+  return getMaterialBackground({
+    material,
+    shapeId: shape.id,
+    size,
+  }) ?? shape.previewImage;
+};
+
+export const resolveTemplateSelection = ({
+  templateId,
+  shapeId,
+  materialId,
+  preferredSizeId,
+}: {
+  templateId?: string;
+  shapeId?: string;
+  materialId?: string;
+  preferredSizeId?: string;
+}) => {
+  const template = getTemplateById(templateId);
+  const shapeByPreferredSize = preferredSizeId
+    ? getTemplateShapeBySizeId({ template, sizeId: preferredSizeId })
+    : undefined;
+  const shape = getTemplateShape({ template, shapeId: shapeByPreferredSize?.id ?? shapeId });
+  const material = getTemplateMaterial({ template, materialId });
+  const size = getTemplateSize({ template, shape, preferredSizeId });
+
+  return {
+    template,
+    shape,
+    material,
+    size,
+  };
+};
+
+export const createTemplateLayers = ({
+  templateId,
+  shapeId,
+  materialId,
+  preferredSizeId,
+}: {
+  templateId?: string;
+  shapeId?: string;
+  materialId?: string;
+  preferredSizeId?: string;
+}): TLayer<LayrProps>[] => {
+  const { template, shape, material, size } = resolveTemplateSelection({
+    templateId,
+    shapeId,
+    materialId,
+    preferredSizeId,
+  });
+
+  return template.createLayers({ size, shape, material });
+};
+
+export const getDefaultTemplateOptions = ({
+  templateId = DEFAULT_TEMPLATE_ID,
+}: {
+  templateId?: string;
+} = {}) => {
+  const { template, shape, material, size } = resolveTemplateSelection({
+    templateId,
+  });
+
+  return {
+    selectedTemplateId: template.id,
+    selectedShapeId: shape.id,
+    selectedMaterialId: material.id,
+    selectedSize: size,
+  };
+};
+
+export const applyTemplateVisualsToLayers = ({
+  layers,
+  templateId,
+  shapeId,
+  materialId,
+  preferredSizeId,
+}: {
+  layers: TLayer<LayrProps>[];
+  templateId?: string;
+  shapeId?: string;
+  materialId?: string;
+  preferredSizeId?: string;
+}): TLayer<LayrProps>[] => {
+  const { material, shape, size } = resolveTemplateSelection({
+    templateId,
+    shapeId,
+    materialId,
+    preferredSizeId,
+  });
+
+  const backgroundImage = getMaterialBackground({
+    material,
+    shapeId: shape.id,
+    size,
+  });
+  const textColor = material.textColor;
+
+  return layers.map((layer) => {
+    if (layer.type === "background") {
+      return {
+        ...layer,
+        props: {
+          ...layer.props,
+          imageSrc: backgroundImage,
+        },
+      };
+    }
+
+    if (layer.type === "text") {
+      return {
+        ...layer,
+        props: {
+          ...layer.props,
+          color: textColor,
+        },
+      };
+    }
+
+    return layer;
+  });
+};
+
+export const templates: Array<{
+  id: string;
+  name: string;
+  image: string;
+  layers: TLayer<LayrProps>[];
+}> = templateCatalog.map((template) => {
+  const defaults = getDefaultTemplateOptions({ templateId: template.id });
+  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,
+    }),
+  };
+});
+
+export const sizes: TSize[] = SQUARE_SIZES;
+
+export const constructureSidebar = ["Designer", "Quantity"];
+
+export const icons = ["https://cdn-icons-png.flaticon.com/512/25/25694.png"];