@design-edito/tools 0.1.54 → 0.1.56

package/chunks/chunk-XC2YGMNJ.js

@@ -0,0 +1,203 @@
+import {
+  thumbnails_exports
+} from "./chunk-OPO25SDO.js";
+
+// src/node/images/transform/area-composition/index.ts
+import sharp from "sharp";
+var DEFAULT_GENERATE_OPTIONS = {
+  formats: ["jpeg"],
+  nbOutputs: 1,
+  imagePosition: "center",
+  imageOccupation: 60,
+  dimensions: { w: 300, h: 500 },
+  palette: ["default"],
+  maxPaletteDensity: 100,
+  extractPaletteDensity: 8,
+  lightenIntensity: 20,
+  saturateIntensity: 20,
+  colorFilterApply: "all",
+  tileDensityA: { min: 1, max: 1 },
+  tileDensityB: { min: 1, max: 1 },
+  tileCoverage: 50,
+  tileFormat: "default",
+  tileXEasing: "none",
+  tileYEasing: "none"
+};
+async function areaCompose(inputSharp, customOptions) {
+  const options = getOptions(customOptions);
+  const inputMetadata = await inputSharp.metadata();
+  const initialDimensions = {
+    w: inputMetadata.width || 0,
+    h: inputMetadata.height || 0
+  };
+  const inputBufferData = await inputSharp.raw().toBuffer();
+  const imagePalette = thumbnails_exports.Colors.extractPaletteFromImage(inputBufferData, initialDimensions, options);
+  const composedPalette = composePalette(imagePalette, options.palette, options.maxPaletteDensity);
+  inputSharp.png({ quality: 100 });
+  const outputDimensions = {
+    w: options.dimensions.w,
+    h: options.dimensions.h
+  };
+  const resizeInputDimensions = getNewInputImageDimensions(outputDimensions, options.imageOccupation);
+  const resizedInput = inputSharp.resize({
+    width: resizeInputDimensions.w,
+    height: resizeInputDimensions.h,
+    fit: "contain",
+    background: { r: 255, g: 255, b: 255, alpha: 0 }
+    // Add a transparent background
+  }).toFormat("png");
+  const resizedInputPositions = getImagePositions(options.imagePosition, resizeInputDimensions, resizeInputDimensions, outputDimensions);
+  const shapesLayout = thumbnails_exports.Layout.packAreasAndTiles(
+    {
+      ...resizedInputPositions,
+      ...resizeInputDimensions
+    },
+    outputDimensions,
+    options.tileCoverage,
+    { A: options.tileDensityA, B: options.tileDensityB },
+    { X: options.tileXEasing, Y: options.tileYEasing }
+  );
+  const sharpShapes = getSharpTilesInputs(shapesLayout, composedPalette);
+  const sharpShapesForComposite = [];
+  for await (const sharpShape of sharpShapes) {
+    ;
+    sharpShapesForComposite.push({
+      input: await sharpShape.input.toFormat("png").toBuffer(),
+      left: sharpShape.left,
+      top: sharpShape.top
+    });
+  }
+  const background = composedPalette[0] || [255, 255, 255];
+  const outputSharp = await createSharpShape(outputDimensions, background).toFormat("webp");
+  const composedSharp = outputSharp.composite([
+    {
+      input: await resizedInput.toFormat("webp").toBuffer(),
+      /* Converting to png to handle alpha */
+      left: Math.round(resizedInputPositions.x),
+      top: Math.round(resizedInputPositions.y)
+    },
+    ...sharpShapesForComposite
+  ]);
+  return await composedSharp.flatten();
+}
+function getOptions(customOptions) {
+  if (!customOptions) {
+    return DEFAULT_GENERATE_OPTIONS;
+  }
+  ;
+  const options = {
+    ...DEFAULT_GENERATE_OPTIONS,
+    ...customOptions
+  };
+  return options;
+}
+function getNewInputImageDimensions(formatDimensions, imageOccupation) {
+  const placeRatio = imageOccupation / 100;
+  return {
+    w: Math.round(formatDimensions.w * placeRatio),
+    h: Math.round(formatDimensions.h * placeRatio)
+  };
+}
+function composePalette(palette, paletteOption, maxPaletteDensity) {
+  let composedPalette = [];
+  if (paletteOption.includes("default-lighten")) {
+    composedPalette = [...composedPalette, ...palette.default.lighten];
+  }
+  if (paletteOption.includes("default-saturate")) {
+    composedPalette = [...composedPalette, ...palette.default.saturate];
+  }
+  if (paletteOption.includes("complementary")) {
+    composedPalette = [...composedPalette, ...palette.complementary.default];
+  }
+  if (paletteOption.includes("complementary-lighten")) {
+    composedPalette = [...composedPalette, ...palette.complementary.lighten];
+  }
+  if (paletteOption.includes("complementary-saturate")) {
+    composedPalette = [...composedPalette, ...palette.complementary.saturate];
+  }
+  if (paletteOption.includes("default") || !composedPalette.length) {
+    composedPalette = [...composedPalette, ...palette.default.default];
+  }
+  const shuffledPalette = thumbnails_exports.Common.shuffleArray(composedPalette);
+  const outputPalette = composedPalette.length > maxPaletteDensity ? shuffledPalette.splice(0, maxPaletteDensity) : shuffledPalette;
+  return outputPalette;
+}
+function getImagePositions(position, resizedImageDimensions, containedImageDimensions, wrapperDimensions) {
+  switch (position) {
+    case "top-left":
+      return thumbnails_exports.Layout.alignTopLeft(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "top-center":
+      return thumbnails_exports.Layout.alignTopCenter(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "top-right":
+      return thumbnails_exports.Layout.alignTopRight(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "left-center":
+      return thumbnails_exports.Layout.alignLeftCenter(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "center":
+      return thumbnails_exports.Layout.alignCenter(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "right-center":
+      return thumbnails_exports.Layout.alignRightCenter(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "bottom-left":
+      return thumbnails_exports.Layout.alignBottomLeft(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "bottom-center":
+      return thumbnails_exports.Layout.alignBottomCenter(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    case "bottom-right":
+      return thumbnails_exports.Layout.alignBottomRight(resizedImageDimensions, containedImageDimensions, wrapperDimensions);
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+function createSharpShape(dimensions, background) {
+  return sharp(
+    {
+      create: getCreateSharpShape(dimensions, background)
+    }
+  );
+}
+function getCreateSharpShape(dimensions, background) {
+  return {
+    width: Math.round(dimensions.w),
+    height: Math.round(dimensions.h),
+    channels: 4,
+    background: { r: background[0], g: background[1], b: background[2], alpha: 1 }
+  };
+}
+function getSharpTilesInputs(tiles, palette) {
+  let usedColorsIndexes = [];
+  const paletteLength = palette.length;
+  const getUnusedColorIndex = () => {
+    const paletteIndex = thumbnails_exports.Common.randomInt(paletteLength);
+    resetUnusedColorIndexesIfNeeded();
+    if (usedColorsIndexes.includes(paletteIndex)) {
+      return getUnusedColorIndex();
+    }
+    usedColorsIndexes.push(paletteIndex);
+    return paletteIndex;
+  };
+  const resetUnusedColorIndexesIfNeeded = () => {
+    if (usedColorsIndexes.length !== paletteLength) {
+      return;
+    }
+    usedColorsIndexes = [];
+  };
+  return tiles.map((tile) => {
+    const paletteIndex = getUnusedColorIndex();
+    const color = palette[paletteIndex];
+    if (!color) {
+      return;
+    }
+    return {
+      top: Math.round(tile.y),
+      left: Math.round(tile.x),
+      input: sharp(
+        {
+          create: getCreateSharpShape(tile, color)
+        }
+      )
+    };
+  }).filter((sharpShape) => sharpShape !== void 0);
+}
+
+export {
+  areaCompose,
+  getSharpTilesInputs
+};