{"version":3,"file":"composite-image.cjs","sources":["../../src/patterns/composite-image.ts"],"sourcesContent":["export interface PatternFillSpec {\n  color: string;\n  patternURL?: string;\n  patternColor?: string;\n}\n\nfunction loadImage(url): Promise<HTMLImageElement> {\n  return new Promise((resolve, reject) => {\n    const img = new Image();\n    img.crossOrigin = \"anonymous\";\n    img.addEventListener(\"load\", () => resolve(img));\n    img.addEventListener(\"error\", (err) => reject(err));\n    img.src = url;\n  });\n}\n\nfunction recolorPatternImage(\n  ctx: CanvasRenderingContext2D,\n  img: HTMLImageElement,\n  backgroundColor: string,\n  color: string,\n  backgroundAlpha = 1,\n  alpha = 1,\n) {\n  // create hidden canvas\n  ctx.drawImage(img, 0, 0, img.width, img.height);\n\n  //ctx.fillStyle = imgColor;\n  //ctx.fillRect(0, 0, 40, 40);\n\n  // overlay using source-atop to follow transparency\n  ctx.globalCompositeOperation = \"source-in\";\n  //ctx.globalAlpha = 0.3;\n  ctx.globalAlpha = alpha;\n  ctx.fillStyle = color;\n  ctx.fillRect(0, 0, img.width, img.height);\n\n  ctx.globalCompositeOperation = \"destination-over\";\n\n  //const map = ctx.getImageData(0, 0, img.width, img.height);\n\n  ctx.globalAlpha = backgroundAlpha;\n  ctx.fillStyle = backgroundColor;\n  ctx.fillRect(0, 0, img.width, img.height);\n\n  //ctx.putImageData(map, 0, 0);\n\n  // replace image source with canvas data\n  return ctx;\n}\n\nfunction createSolidColorImage(ctx, imgColor, alpha = 1) {\n  ctx.globalAlpha = alpha;\n  ctx.fillStyle = imgColor;\n  ctx.fillRect(0, 0, 40, 40);\n  return ctx;\n  //return ctx.getImageData(0, 0, 40, 40);\n}\n\nenum ImageDataFormat {\n  HTMLImageData = \"image-data\",\n  Base64 = \"base64\",\n}\n\nasync function createPatternImage(\n  spec: PatternFillSpec,\n  outputFormat = ImageDataFormat.HTMLImageData,\n): Promise<ImageData | string> {\n  let ctx;\n  var canvas = document.createElement(\"canvas\");\n  if (spec.patternURL == null) {\n    canvas.width = 40;\n    canvas.height = 40;\n    ctx = createSolidColorImage(\n      canvas.getContext(\"2d\"),\n      spec.color ?? spec.patternColor,\n    );\n  } else {\n    const img = await loadImage(spec.patternURL);\n    canvas.width = img.width;\n    canvas.height = img.height;\n    ctx = canvas.getContext(\"2d\");\n    ctx = recolorPatternImage(\n      ctx,\n      img,\n      spec.color,\n      spec.patternColor ?? \"#000000\",\n    );\n  }\n  switch (outputFormat) {\n    case ImageDataFormat.HTMLImageData:\n      return ctx.getImageData(0, 0, canvas.width, canvas.height);\n    case ImageDataFormat.Base64:\n      return canvas.toDataURL();\n  }\n}\n\nexport { recolorPatternImage, createPatternImage, loadImage, ImageDataFormat };\n"],"names":["ImageDataFormat"],"mappings":";;AAMA,SAAS,UAAU,KAAgC;AACjD,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,UAAM,MAAM,IAAI,MAAA;AAChB,QAAI,cAAc;AAClB,QAAI,iBAAiB,QAAQ,MAAM,QAAQ,GAAG,CAAC;AAC/C,QAAI,iBAAiB,SAAS,CAAC,QAAQ,OAAO,GAAG,CAAC;AAClD,QAAI,MAAM;AAAA,EACZ,CAAC;AACH;AAEA,SAAS,oBACP,KACA,KACA,iBACA,OACA,kBAAkB,GAClB,QAAQ,GACR;AAEA,MAAI,UAAU,KAAK,GAAG,GAAG,IAAI,OAAO,IAAI,MAAM;AAM9C,MAAI,2BAA2B;AAE/B,MAAI,cAAc;AAClB,MAAI,YAAY;AAChB,MAAI,SAAS,GAAG,GAAG,IAAI,OAAO,IAAI,MAAM;AAExC,MAAI,2BAA2B;AAI/B,MAAI,cAAc;AAClB,MAAI,YAAY;AAChB,MAAI,SAAS,GAAG,GAAG,IAAI,OAAO,IAAI,MAAM;AAKxC,SAAO;AACT;AAEA,SAAS,sBAAsB,KAAK,UAAU,QAAQ,GAAG;AACvD,MAAI,cAAc;AAClB,MAAI,YAAY;AAChB,MAAI,SAAS,GAAG,GAAG,IAAI,EAAE;AACzB,SAAO;AAET;AAEA,IAAK,oCAAAA,qBAAL;AACEA,mBAAA,eAAA,IAAgB;AAChBA,mBAAA,QAAA,IAAS;AAFN,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;AAKL,eAAe,mBACb,MACA,eAAe,cACc;AAC7B,MAAI;AACJ,MAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,MAAI,KAAK,cAAc,MAAM;AAC3B,WAAO,QAAQ;AACf,WAAO,SAAS;AAChB,UAAM;AAAA,MACJ,OAAO,WAAW,IAAI;AAAA,MACtB,KAAK,SAAS,KAAK;AAAA,IAAA;AAAA,EAEvB,OAAO;AACL,UAAM,MAAM,MAAM,UAAU,KAAK,UAAU;AAC3C,WAAO,QAAQ,IAAI;AACnB,WAAO,SAAS,IAAI;AACpB,UAAM,OAAO,WAAW,IAAI;AAC5B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,KAAK,gBAAgB;AAAA,IAAA;AAAA,EAEzB;AACA,UAAQ,cAAA;AAAA,IACN,KAAK;AACH,aAAO,IAAI,aAAa,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAAA,IAC3D,KAAK;AACH,aAAO,OAAO,UAAA;AAAA,EAAU;AAE9B;;;;;"}