@rubin-epo/epo-widget-lib 0.6.7 → 0.6.10

package/dist/ColorTool.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=require("react"),W=require("react-i18next"),H=require("./widgets/ColorTool/utilities.cjs"),l=require("./widgets/ColorTool/styles.cjs"),N=require("@rubin-epo/epo-react-lib/SelectListbox"),R=require("./widgets/ColorTool/Actions/index.cjs"),T=require("./widgets/ColorTool/ImageComposite/ImageComposite.cjs"),$=require("./widgets/ColorTool/FilterControls/FilterControls.cjs"),v=o=>o&&o.__esModule?o:{default:o},E=v(N),p=({data:o,objectOptions:L=[],selectedData:d,colorOptions:C=[],selectionCallback:i,isDisabled:u=!1,isDisplayOnly:S=!1,className:g,config:_={actions:["reset"],width:600,height:600,hideSubtitle:!1}})=>{var j;const q={actions:["reset"],width:600,height:600,hideSubtitle:!1},h=y.useRef(null),{t:n}=W.useTranslation(),{filters:a,name:c}=d,{actions:F,width:r,height:s,hideSubtitle:w}={...q,..._};if(S)return e.jsx(T.default,{ref:h,filters:a,width:r,height:s,selectedObjectName:c,className:g});const B=t=>{const{label:f}=t,{filters:b}=d,O=b.map(m=>m.label===f?t:m);return i&&i({...d,filters:O})},I=t=>{if(t)return i&&i({name:t,filters:H.getDataFiltersByName(o,t)})},x=o.length>1,M=n("colorTool.actions.select_an_object");return e.jsx(l.WidgetContainer,{className:g,children:e.jsxs(l.WidgetLayout,{style:{"--image-width":typeof r=="number"?`${r}px`:r,"--image-height":typeof s=="number"?`${s}px`:s},children:[c&&x&&e.jsx(l.Title,{children:!w&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:n("colorTool.labels.object")}),e.jsx("dd",{children:c})]})}),e.jsxs(l.ControlsContainer,{children:[a&&e.jsxs(e.Fragment,{children:[e.jsx(l.ToolsHeader,{id:"filterLabel",children:n("colorTool.labels.filter")}),e.jsx(l.ToolsHeader,{id:"colorLabel",children:n("colorTool.labels.color")}),e.jsx(l.ToolsHeader,{id:"intensityLabel",children:n("colorTool.labels.color_intensity")})]}),a&&a.map(t=>{const{label:f,isDisabled:b}=t;return y.createElement($.default,{filter:t,colorOptions:C,key:`filter-${f}`,isDisabled:u||b,onChangeFilterCallback:B,buttonLabelledById:"filterLabel",selectLabelledById:"colorLabel",sliderLabelledById:"intensityLabel"})})]}),e.jsx(T.default,{ref:h,filters:a,width:r,height:s,selectedObjectName:c,children:x&&e.jsx(l.SelectionContainer,{children:e.jsx(E.default,{id:"astroObjectSelector",placeholder:M,options:L,onChangeCallback:I,value:c,isDisabled:u,width:"100%",maxWidth:"100%"})})}),e.jsx(R.default,{actions:F,images:(j=h.current)==null?void 0:j.getElementsByTagName("canvas"),selectedData:d,width:r,height:s,isDisabled:u,selectionCallback:i})]})})};p.displayName="Widgets.ColorTool";exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("react"),O=require("react-i18next"),W=require("./widgets/ColorTool/utilities.cjs"),l=require("./widgets/ColorTool/styles.cjs"),H=require("@rubin-epo/epo-react-lib/SelectListbox"),R=require("./widgets/ColorTool/Actions/index.cjs"),y=require("./widgets/ColorTool/ImageComposite/ImageComposite.cjs"),$=require("./widgets/ColorTool/FilterControls/FilterControls.cjs"),v=o=>o&&o.__esModule?o:{default:o},N=v(H),p=({data:o,objectOptions:T=[],selectedData:d,colorOptions:L=[],selectionCallback:r,isDisabled:u=!1,isDisplayOnly:C=!1,className:x,config:S={actions:["reset"],width:600,height:600,hideSubtitle:!1}})=>{const _={actions:["reset"],width:600,height:600,hideSubtitle:!1},h=m.useRef(null),{t:i}=O.useTranslation(),{filters:s,name:n}=d,{actions:q,width:a,height:c,hideSubtitle:F}={..._,...S};if(C)return e.jsx(y.default,{ref:h,filters:s,width:a,height:c,selectedObjectName:n,className:x});const w=t=>{const{label:f}=t,{filters:b}=d,M=b.map(g=>g.label===f?t:g);return r&&r({...d,filters:M})},I=t=>{if(t)return r&&r({name:t,filters:W.getDataFiltersByName(o,t)})},j=o.length>1,B=i("colorTool.actions.select_an_object");return e.jsx(l.WidgetContainer,{className:x,children:e.jsxs(l.WidgetLayout,{style:{"--image-width":typeof a=="number"?`${a}px`:a,"--image-height":typeof c=="number"?`${c}px`:c},children:[n&&j&&e.jsx(l.Title,{children:!F&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:i("colorTool.labels.object")}),e.jsx("dd",{children:n})]})}),e.jsxs(l.ControlsContainer,{children:[s&&e.jsxs(e.Fragment,{children:[e.jsx(l.ToolsHeader,{id:"filterLabel",children:i("colorTool.labels.filter")}),e.jsx(l.ToolsHeader,{id:"colorLabel",children:i("colorTool.labels.color")}),e.jsx(l.ToolsHeader,{id:"intensityLabel",children:i("colorTool.labels.color_intensity")})]}),s&&s.map(t=>{const{label:f,isDisabled:b}=t;return m.createElement($.default,{filter:t,colorOptions:L,key:`filter-${f}`,isDisabled:u||b,onChangeFilterCallback:w,buttonLabelledById:"filterLabel",selectLabelledById:"colorLabel",sliderLabelledById:"intensityLabel"})})]}),e.jsx(y.default,{ref:h,filters:s,width:a,height:c,selectedObjectName:n,children:j&&e.jsx(l.SelectionContainer,{children:e.jsx(N.default,{id:"astroObjectSelector",placeholder:B,options:T,onChangeCallback:I,value:n,isDisabled:u,width:"100%",maxWidth:"100%"})})}),e.jsx(R.default,{actions:q,canvas:h.current,selectedData:d,isDisabled:u,selectionCallback:r})]})})};p.displayName="Widgets.ColorTool";exports.default=p;

package/dist/ColorTool.js

@@ -1,93 +1,92 @@
-import { jsx as e, jsxs as c, Fragment as T } from "react/jsx-runtime";
-import { useRef as $, createElement as E } from "react";
+import { jsx as e, jsxs as c, Fragment as L } from "react/jsx-runtime";
+import { useRef as $, createElement as N } from "react";
 import { useTranslation as R } from "react-i18next";
 import { getDataFiltersByName as A } from "./widgets/ColorTool/utilities.js";
-import { WidgetContainer as H, WidgetLayout as M, Title as P, ControlsContainer as q, ToolsHeader as b, SelectionContainer as v } from "./widgets/ColorTool/styles.js";
-import z from "@rubin-epo/epo-react-lib/SelectListbox";
-import D from "./widgets/ColorTool/Actions/index.js";
+import { WidgetContainer as E, WidgetLayout as H, Title as M, ControlsContainer as P, ToolsHeader as b, SelectionContainer as q } from "./widgets/ColorTool/styles.js";
+import v from "@rubin-epo/epo-react-lib/SelectListbox";
+import z from "./widgets/ColorTool/Actions/index.js";
 import C from "./widgets/ColorTool/ImageComposite/ImageComposite.js";
-import G from "./widgets/ColorTool/FilterControls/FilterControls.js";
-const J = ({
-  data: g,
-  objectOptions: j = [],
+import D from "./widgets/ColorTool/FilterControls/FilterControls.js";
+const G = ({
+  data: p,
+  objectOptions: T = [],
   selectedData: a,
-  colorOptions: x = [],
-  selectionCallback: r,
+  colorOptions: j = [],
+  selectionCallback: o,
   isDisabled: d = !1,
-  isDisplayOnly: S = !1,
-  className: p,
-  config: F = {
+  isDisplayOnly: x = !1,
+  className: u,
+  config: S = {
     actions: ["reset"],
     width: 600,
     height: 600,
     hideSubtitle: !1
   }
 }) => {
-  var y;
-  const w = {
+  const F = {
     actions: ["reset"],
     width: 600,
     height: 600,
     hideSubtitle: !1
-  }, h = $(null), { t: i } = R(), { filters: n, name: s } = a, { actions: B, width: o, height: l, hideSubtitle: I } = {
-    ...w,
-    ...F
+  }, h = $(null), { t: l } = R(), { filters: r, name: i } = a, { actions: w, width: n, height: s, hideSubtitle: B } = {
+    ...F,
+    ...S
   };
-  if (S)
+  if (x)
     return /* @__PURE__ */ e(
       C,
       {
         ref: h,
-        filters: n,
-        width: o,
-        height: l,
-        selectedObjectName: s,
-        className: p
+        filters: r,
+        width: n,
+        height: s,
+        selectedObjectName: i,
+        className: u
       }
     );
-  const W = (t) => {
+  const I = (t) => {
     const { label: m } = t, { filters: f } = a, _ = f.map(
-      (L) => L.label === m ? t : L
+      (y) => y.label === m ? t : y
     );
-    return r && r({
+    return o && o({
       ...a,
       filters: _
     });
-  }, N = (t) => {
+  }, W = (t) => {
     if (t)
-      return r && r({
+      return o && o({
         name: t,
-        filters: A(g, t)
+        filters: A(p, t)
       });
-  }, u = g.length > 1, O = i("colorTool.actions.select_an_object");
-  return /* @__PURE__ */ e(H, { className: p, children: /* @__PURE__ */ c(
-    M,
+  }, g = p.length > 1, O = l("colorTool.actions.select_an_object");
+  return /* @__PURE__ */ e(E, { className: u, children: /* @__PURE__ */ c(
+    H,
     {
       style: {
-        "--image-width": typeof o == "number" ? `${o}px` : o,
-        "--image-height": typeof l == "number" ? `${l}px` : l
+        "--image-width": typeof n == "number" ? `${n}px` : n,
+        "--image-height": typeof s == "number" ? `${s}px` : s
       },
       children: [
-        s && u && /* @__PURE__ */ e(P, { children: !I && /* @__PURE__ */ c(T, { children: [
-          /* @__PURE__ */ e("dt", { children: i("colorTool.labels.object") }),
-          /* @__PURE__ */ e("dd", { children: s })
+        i && g && /* @__PURE__ */ e(M, { children: !B && /* @__PURE__ */ c(L, { children: [
+          /* @__PURE__ */ e("dt", { children: l("colorTool.labels.object") }),
+          /* @__PURE__ */ e("dd", { children: i })
         ] }) }),
-        /* @__PURE__ */ c(q, { children: [
-          n && /* @__PURE__ */ c(T, { children: [
-            /* @__PURE__ */ e(b, { id: "filterLabel", children: i("colorTool.labels.filter") }),
-            /* @__PURE__ */ e(b, { id: "colorLabel", children: i("colorTool.labels.color") }),
-            /* @__PURE__ */ e(b, { id: "intensityLabel", children: i("colorTool.labels.color_intensity") })
+        /* @__PURE__ */ c(P, { children: [
+          r && /* @__PURE__ */ c(L, { children: [
+            /* @__PURE__ */ e(b, { id: "filterLabel", children: l("colorTool.labels.filter") }),
+            /* @__PURE__ */ e(b, { id: "colorLabel", children: l("colorTool.labels.color") }),
+            /* @__PURE__ */ e(b, { id: "intensityLabel", children: l("colorTool.labels.color_intensity") })
           ] }),
-          n && n.map((t) => {
+          r && r.map((t) => {
             const { label: m, isDisabled: f } = t;
-            return /* @__PURE__ */ E(
-              G,
+            return /* @__PURE__ */ N(
+              D,
               {
                 filter: t,
-                colorOptions: x,
+                colorOptions: j,
                 key: `filter-${m}`,
                 isDisabled: d || f,
-                onChangeFilterCallback: W,
+                onChangeFilterCallback: I,
                 buttonLabelledById: "filterLabel",
                 selectLabelledById: "colorLabel",
                 sliderLabelledById: "intensityLabel"
@@ -99,18 +98,18 @@ const J = ({
           C,
           {
             ref: h,
-            filters: n,
-            width: o,
-            height: l,
-            selectedObjectName: s,
-            children: u && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(
-              z,
+            filters: r,
+            width: n,
+            height: s,
+            selectedObjectName: i,
+            children: g && /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
+              v,
               {
                 id: "astroObjectSelector",
                 placeholder: O,
-                options: j,
-                onChangeCallback: N,
-                value: s,
+                options: T,
+                onChangeCallback: W,
+                value: i,
                 isDisabled: d,
                 width: "100%",
                 maxWidth: "100%"
@@ -119,22 +118,20 @@ const J = ({
           }
         ),
         /* @__PURE__ */ e(
-          D,
+          z,
           {
-            actions: B,
-            images: (y = h.current) == null ? void 0 : y.getElementsByTagName("canvas"),
+            actions: w,
+            canvas: h.current,
             selectedData: a,
-            width: o,
-            height: l,
             isDisabled: d,
-            selectionCallback: r
+            selectionCallback: o
           }
         )
       ]
     }
   ) });
 };
-J.displayName = "Widgets.ColorTool";
+G.displayName = "Widgets.ColorTool";
 export {
-  J as default
+  G as default
 };

package/dist/ColorToolServer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("skia-canvas"),C=require("./widgets/ColorTool/utilities.cjs"),p=(t,a,e,n)=>{t.fillStyle=a,t.fillRect(0,0,e,n)},d=(t,a=[],e,n,s="screen")=>{t.globalCompositeOperation=s,a.forEach(o=>{t.drawCanvas(o,0,0,e,n)})};async function f(t=[],a=600,e=600){const n=t.filter(({active:l})=>l),s=await Promise.all(n.map(async({image:l,color:g="transparent",brightness:m})=>{const i=new c.Canvas(a,e),r=i.getContext("2d"),v=await c.loadImage(l);return r.drawImage(v,0,0,a,e),r.globalCompositeOperation="multiply",r.filter=C.getFilters({brightness:m,contrast:1.3}),p(r,g,a,e),i})),o=new c.Canvas(a,e),u=o.getContext("2d");return d(u,s,a,e),o}const y=async(t=[],a="png",e=600,n=600)=>(await f(t,e,n)).toDataURL(a);exports.default=y;

package/dist/ColorToolServer.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/ColorTool/server'
+import _default from './widgets/ColorTool/server'
+export default _default

package/dist/ColorToolServer.js

@@ -0,0 +1,24 @@
+import { Canvas as i, loadImage as v } from "skia-canvas";
+import { getFilters as C } from "./widgets/ColorTool/utilities.js";
+const u = (e, a, t, n) => {
+  e.fillStyle = a, e.fillRect(0, 0, t, n);
+}, d = (e, a = [], t, n, s = "screen") => {
+  e.globalCompositeOperation = s, a.forEach((o) => {
+    e.drawCanvas(o, 0, 0, t, n);
+  });
+};
+async function y(e = [], a = 600, t = 600) {
+  const n = e.filter(({ active: c }) => c), s = await Promise.all(
+    n.map(
+      async ({ image: c, color: p = "transparent", brightness: g }) => {
+        const l = new i(a, t), r = l.getContext("2d"), f = await v(c);
+        return r.drawImage(f, 0, 0, a, t), r.globalCompositeOperation = "multiply", r.filter = C({ brightness: g, contrast: 1.3 }), u(r, p, a, t), l;
+      }
+    )
+  ), o = new i(a, t), m = o.getContext("2d");
+  return d(m, s, a, t), o;
+}
+const w = async (e = [], a = "png", t = 600, n = 600) => (await y(e, t, n)).toDataURL(a);
+export {
+  w as default
+};

package/dist/localeStrings/en/epo-widget-lib.json

@@ -52,7 +52,8 @@
     "actions": {
       "select_an_object": "Select an object",
       "select_filter": "Select a filter",
-      "reset": "Reset"
+      "reset": "Reset",
+      "export": "Export"
     }
   },
   "source_selector": {

package/dist/localeStrings/es/epo-widget-lib.json

@@ -16,18 +16,55 @@
   },
   "filterTool": {
     "title": "Herramienta de filtro",
-    "filter": "El filtro",
+    "filter": "Filtro",
     "whiteLight": "Luz blanca",
     "prism": "Prisma",
-    "selectLabel": "Seleccione un filtro:",
+    "selectLabel": "Selecciona un filtro:",
+    "light_out": "Luz bloqueada",
+    "light_filtered": "Luz filtrada",
     "colors": {
       "violet": "Violeta",
       "blue": "Azul",
       "green": "Verde",
       "yellow": "Amarillo",
-      "orange": "Naranja",
+      "orange": "Naranjo",
       "red": "Rojo",
       "none": "Ninguno"
     }
+  },
+  "colorTool": {
+    "labels": {
+      "object_type": "Tipo de objeto:",
+      "object": "Objeto:",
+      "object_selected": "Objeto seleccionado:",
+      "filter": "Filtro",
+      "color": "Color",
+      "color_intensity": "Intensidad de color"
+    },
+    "actions": {
+      "select_an_object": "Selecciona un objeto",
+      "select_filter": "Selecciona un filtro",
+      "reset": "Reiniciar",
+      "export": "Exportar"
+    }
+  },
+  "source_selector": {
+    "messages": {
+      "success": "¡Muy bien!",
+      "failure": "Inténtalo de nuevo."
+    }
+  },
+  "camera_filter": {
+    "title": "Rangos de los filtros de la cámara LSST del Observatorio Rubin",
+    "labels": {
+      "select": "Seleccione uno de los filtros Rubin",
+      "option": "Filtro {{band}}",
+      "option_none": "Ninguno",
+      "captured_range": "Espectro electromagnético capturado con el filtro {{filter}} aplicado",
+      "captured_range_no_filter": "Espectro electromagnético sin filtro aplicado.",
+      "ultraviolet": "Ultravioleta",
+      "visible": "Luz visible",
+      "infrared": "Infrarrojo"
+    }
   }
 }

package/dist/widgets/ColorTool/Actions/Export/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),p=require("react"),x=require("@rubin-epo/epo-react-lib/Button"),g=require("../../../../lib/reimg.cjs"),v=t=>t&&t.__esModule?t:{default:t},_=v(x),c=({images:t,filters:o,filename:s,width:r,height:n,children:l,isDisabled:u})=>{const i=p.useCallback(()=>{const a=document.createElement("canvas"),e=a.getContext("2d");t&&e&&(e.canvas.width=r,e.canvas.height=n,e.globalCompositeOperation="screen",Array.from(t).forEach((d,f)=>{o[f].active&&e.drawImage(d,0,0,r,n)})),g.fromCanvas(a).downloadPng(s)},[t,o]);return m.jsx(_.default,{disabled:u,style:{"--button-text-align":"left"},icon:"ArrowUpFromBracket",onClick:i,isBlock:!0,children:l})};c.displayName="Widgets.ColorTool.Reset";const b=c;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),s=require("react"),i=require("@rubin-epo/epo-react-lib/Button"),a=require("../../../../lib/reimg.cjs"),c=t=>t&&t.__esModule?t:{default:t},d=c(i),e=({canvas:t,filename:o,isDisabled:r,children:l})=>{const u=s.useCallback(()=>{t&&a.fromCanvas(t).downloadPng(o)},[t]);return n.jsx(d.default,{disabled:r,style:{"--button-text-align":"left"},icon:"ArrowUpFromBracket",onClick:u,isBlock:!0,children:l})};e.displayName="Widgets.ColorTool.Reset";const f=e;exports.default=f;

package/dist/widgets/ColorTool/Actions/Export/index.d.ts

@@ -1,11 +1,7 @@
 import { FunctionComponent, PropsWithChildren } from "react";
-import { ImageFilter } from "../../ColorTool";
 interface ExportProps {
-    images?: HTMLCollection;
+    canvas: HTMLCanvasElement | null;
     filename: string;
-    filters: ImageFilter[];
-    width: number;
-    height: number;
     isDisabled: boolean;
 }
 declare const Export: FunctionComponent<PropsWithChildren<ExportProps>>;

package/dist/widgets/ColorTool/Actions/Export/index.js

@@ -1,26 +1,20 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useCallback as x } from "react";
-import u from "@rubin-epo/epo-react-lib/Button";
-import { fromCanvas as C } from "../../../../lib/reimg.js";
-const c = ({
-  images: t,
-  filters: r,
-  filename: s,
-  width: e,
-  height: a,
-  children: l,
-  isDisabled: m
+import { jsx as m } from "react/jsx-runtime";
+import { useCallback as n } from "react";
+import s from "@rubin-epo/epo-react-lib/Button";
+import { fromCanvas as p } from "../../../../lib/reimg.js";
+const t = ({
+  canvas: o,
+  filename: r,
+  isDisabled: e,
+  children: l
 }) => {
-  const i = x(() => {
-    const n = document.createElement("canvas"), o = n.getContext("2d");
-    t && o && (o.canvas.width = e, o.canvas.height = a, o.globalCompositeOperation = "screen", Array.from(t).forEach((p, d) => {
-      r[d].active && o.drawImage(p, 0, 0, e, a);
-    })), C(n).downloadPng(s);
-  }, [t, r]);
-  return /* @__PURE__ */ f(
-    u,
+  const i = n(() => {
+    o && p(o).downloadPng(r);
+  }, [o]);
+  return /* @__PURE__ */ m(
+    s,
     {
-      disabled: m,
+      disabled: e,
       style: { "--button-text-align": "left" },
       icon: "ArrowUpFromBracket",
       onClick: i,
@@ -29,8 +23,8 @@ const c = ({
     }
   );
 };
-c.displayName = "Widgets.ColorTool.Reset";
-const k = c;
+t.displayName = "Widgets.ColorTool.Reset";
+const u = t;
 export {
-  k as default
+  u as default
 };

package/dist/widgets/ColorTool/Actions/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),A=require("./Reset/index.cjs"),b=require("./Export/index.cjs"),j=require("./styles.cjs"),p=require("react-i18next"),h=require("../utilities.cjs"),i=({actions:o,isDisabled:c,width:l,height:u,selectedData:e,selectionCallback:s,images:a})=>{const{t:d}=p.useTranslation(),{filters:x,name:f}=e,r=c||!h.areActionsActive(e);return t.jsx(j.Actions,{children:o.map((m,n)=>{switch(m){case"reset":return t.jsx(A.default,{isDisabled:r,selectedData:e,onResetCallback:q=>s&&s(q),children:d("colorTool.actions.reset")},n);case"export":return t.jsx(b.default,{isDisabled:r,filters:x,width:l,height:u,images:a,filename:f,children:"Export"},n);case"save":return null;default:return null}})})};i.displayName="Widgets.ColorTool.Actions";const v=i;exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),f=require("./Reset/index.cjs"),m=require("./Export/index.cjs"),q=require("./styles.cjs"),A=require("react-i18next"),b=require("../utilities.cjs"),i=({actions:c,isDisabled:l,selectedData:e,selectionCallback:s,canvas:u})=>{const{t:r}=A.useTranslation(),{name:a}=e,n=l||!b.areActionsActive(e);return t.jsx(q.Actions,{children:c.map((d,o)=>{switch(d){case"reset":return t.jsx(f.default,{isDisabled:n,selectedData:e,onResetCallback:x=>s&&s(x),children:r("colorTool.actions.reset")},o);case"export":return t.jsx(m.default,{isDisabled:n,canvas:u,filename:a,children:r("colorTool.actions.export")},o);case"save":return null;default:return null}})})};i.displayName="Widgets.ColorTool.Actions";const j=i;exports.default=j;

package/dist/widgets/ColorTool/Actions/index.d.ts

@@ -4,9 +4,7 @@ interface ActionsProps {
     actions: Array<ColorToolAction>;
     isDisabled: boolean;
     selectedData: AstroObject;
-    images: HTMLCollection | undefined;
-    width: number;
-    height: number;
+    canvas: HTMLCanvasElement | null;
     selectionCallback: (data: AstroObject) => void;
 }
 declare const Actions: FunctionComponent<ActionsProps>;

package/dist/widgets/ColorTool/Actions/index.js

@@ -1,45 +1,40 @@
 import { jsx as r } from "react/jsx-runtime";
-import x from "./Reset/index.js";
-import h from "./Export/index.js";
-import { Actions as b } from "./styles.js";
-import { useTranslation as T } from "react-i18next";
-import { areActionsActive as v } from "../utilities.js";
+import f from "./Reset/index.js";
+import d from "./Export/index.js";
+import { Actions as A } from "./styles.js";
+import { useTranslation as x } from "react-i18next";
+import { areActionsActive as h } from "../utilities.js";
 const i = ({
-  actions: n,
-  isDisabled: c,
-  width: a,
-  height: l,
+  actions: c,
+  isDisabled: a,
   selectedData: o,
   selectionCallback: t,
-  images: m
+  canvas: l
 }) => {
-  const { t: p } = T(), { filters: f, name: u } = o, s = c || !v(o);
-  return /* @__PURE__ */ r(b, { children: n.map((d, e) => {
-    switch (d) {
+  const { t: s } = x(), { name: m } = o, e = a || !h(o);
+  return /* @__PURE__ */ r(A, { children: c.map((p, n) => {
+    switch (p) {
       case "reset":
         return /* @__PURE__ */ r(
-          x,
+          f,
           {
-            isDisabled: s,
+            isDisabled: e,
             selectedData: o,
-            onResetCallback: (A) => t && t(A),
-            children: p("colorTool.actions.reset")
+            onResetCallback: (u) => t && t(u),
+            children: s("colorTool.actions.reset")
           },
-          e
+          n
         );
       case "export":
         return /* @__PURE__ */ r(
-          h,
+          d,
           {
-            isDisabled: s,
-            filters: f,
-            width: a,
-            height: l,
-            images: m,
-            filename: u,
-            children: "Export"
+            isDisabled: e,
+            canvas: l,
+            filename: m,
+            children: s("colorTool.actions.export")
           },
-          e
+          n
         );
       case "save":
         return null;
@@ -49,7 +44,7 @@ const i = ({
   }) });
 };
 i.displayName = "Widgets.ColorTool.Actions";
-const y = i;
+const j = i;
 export {
-  y as default
+  j as default
 };

package/dist/widgets/ColorTool/CompositeRender/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),m=require("react"),g=require("../utilities.cjs"),C=require("./styles.cjs"),i=m.forwardRef(({layers:s=[],renderLayers:c=[],width:t,height:o},e)=>{var n;const r=(n=e==null?void 0:e.current)==null?void 0:n.getContext("2d"),l=s.filter((u,a)=>u&&c[a]);return r&&(r.clearRect(0,0,t,o),g.mergeCanvases(r,l,t,o)),s.length>0?d.jsx(C.Image,{ref:e,role:"img",width:t,height:o}):null});i.displayName="Widgets.ColorTool.CompositeRenderer";const R=i;exports.default=R;

package/dist/widgets/ColorTool/CompositeRender/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface CompositeRendererProps {
+    layers: Array<HTMLCanvasElement>;
+    renderLayers: Array<boolean>;
+    width: number;
+    height: number;
+}
+declare const CompositeRenderer: import("react").ForwardRefExoticComponent<CompositeRendererProps & import("react").RefAttributes<HTMLCanvasElement>>;
+export default CompositeRenderer;

package/dist/widgets/ColorTool/CompositeRender/index.js

@@ -0,0 +1,16 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { mergeCanvases as C } from "../utilities.js";
+import { Image as R } from "./styles.js";
+const s = d(
+  ({ layers: m = [], renderLayers: a = [], width: e, height: r }, o) => {
+    var n;
+    const t = (n = o == null ? void 0 : o.current) == null ? void 0 : n.getContext("2d"), c = m.filter((i, l) => i && a[l]);
+    return t && (t.clearRect(0, 0, e, r), C(t, c, e, r)), m.length > 0 ? /* @__PURE__ */ p(R, { ref: o, role: "img", width: e, height: r }) : null;
+  }
+);
+s.displayName = "Widgets.ColorTool.CompositeRenderer";
+const v = s;
+export {
+  v as default
+};

package/dist/widgets/ColorTool/CompositeRender/styles.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),a=t=>t&&t.__esModule?t:{default:t},l=a(e),o=l.default.canvas`
+  width: 100%;
+`;exports.Image=o;