@rubin-epo/epo-widget-lib 0.6.10 → 0.6.12-rc.1

package/dist/ColorTool.cjs

@@ -1 +1 @@
-"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;
+"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/lib/utils.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:s}=O.useTranslation(),{filters:i,name:n}=d,{actions:q,width:a,height:c,hideSubtitle:F}={..._,...S};if(C)return e.jsx(y.default,{ref:h,filters:i,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=s("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:s("colorTool.labels.object")}),e.jsx("dd",{children:n})]})}),e.jsxs(l.ControlsContainer,{children:[i&&e.jsxs(e.Fragment,{children:[e.jsx(l.ToolsHeader,{id:"filterLabel",children:s("colorTool.labels.filter")}),e.jsx(l.ToolsHeader,{id:"colorLabel",children:s("colorTool.labels.color")}),e.jsx(l.ToolsHeader,{id:"intensityLabel",children:s("colorTool.labels.color_intensity")})]}),i&&i.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:i,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,7 +1,7 @@
 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 { getDataFiltersByName as A } from "./widgets/ColorTool/lib/utils.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";

package/dist/ColorToolServer.cjs

@@ -1 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("skia-canvas"),o=require("./widgets/ColorTool/lib/canvas.cjs");async function d(n=[],a=600,e=600){const s=n.filter(({active:r})=>r),l=await Promise.all(s.map(async({image:r,color:m="transparent",brightness:g=1})=>{const C=await c.loadImage(r),v=new c.Canvas(a,e),t=v.getContext("2d");return t.clearRect(0,0,a,e),t.filter=o.getFilters({brightness:g,contrast:1.3}),t.drawImage(C,0,0,a,e),o.updateColor(t,m,a,e),v})),u=new c.Canvas(a,e),i=u.getContext("2d");return o.mergeCanvases(i,l,a,e),u}const f=async(n=[],a="png",e=600,s=600)=>(await d(n,e,s)).toDataURL(a,{matte:"#000000"});exports.default=f;

package/dist/ColorToolServer.d.ts

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

package/dist/ColorToolServer.js

@@ -1,24 +1,17 @@
-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;
+import { loadImage as p, Canvas as l } from "skia-canvas";
+import { getFilters as u, updateColor as C, mergeCanvases as x } from "./widgets/ColorTool/lib/canvas.js";
+async function d(n = [], a = 600, t = 600) {
+  const s = n.filter(({ active: r }) => r), c = await Promise.all(
+    s.map(
+      async ({ image: r, color: v = "transparent", brightness: f = 1 }) => {
+        const i = await p(r), m = new l(a, t), e = m.getContext("2d");
+        return e.clearRect(0, 0, a, t), e.filter = u({ brightness: f, contrast: 1.3 }), e.drawImage(i, 0, 0, a, t), C(e, v, a, t), m;
       }
     )
-  ), o = new i(a, t), m = o.getContext("2d");
-  return d(m, s, a, t), o;
+  ), o = new l(a, t), g = o.getContext("2d");
+  return x(g, c, a, t), o;
 }
-const w = async (e = [], a = "png", t = 600, n = 600) => (await y(e, t, n)).toDataURL(a);
+const y = async (n = [], a = "png", t = 600, s = 600) => (await d(n, t, s)).toDataURL(a, { matte: "#000000" });
 export {
-  w as default
+  y as default
 };

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

@@ -20,7 +20,7 @@
     "whiteLight": "Luz blanca",
     "prism": "Prisma",
     "selectLabel": "Selecciona un filtro:",
-    "light_out": "Luz bloqueada",
+    "light_out": "Luz que pasa",
     "light_filtered": "Luz filtrada",
     "colors": {
       "violet": "Violeta",

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),r=require("@rubin-epo/epo-react-lib/Button"),a=require("../../utilities.cjs"),c=t=>t&&t.__esModule?t:{default:t},d=c(r),f=t=>t.map(e=>{const{defaultValue:s,min:o,max:u}=e,i=s||1;return{...e,active:!1,color:"",brightness:a.getBrightnessValue(o,u,i),value:i}}),l=({isDisabled:t,selectedData:e,onResetCallback:s,children:o})=>{const{filters:u}=e;return n.jsx(d.default,{style:{"--button-text-align":"left"},disabled:t,icon:"RotateLeftWithCenter",onClick:()=>s&&s({...e,filters:f(u)}),isBlock:!0,children:o})};l.displayName="Widgets.ColorTool.Reset";const g=l;exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),i=require("@rubin-epo/epo-react-lib/Button"),a=require("../../lib/utils.cjs"),c=t=>t&&t.__esModule?t:{default:t},d=c(i),f=t=>t.map(e=>{const{defaultValue:s,min:o,max:u}=e,l=s||1;return{...e,active:!1,color:"",brightness:a.getBrightnessValue(o,u,l),value:l}}),n=({isDisabled:t,selectedData:e,onResetCallback:s,children:o})=>{const{filters:u}=e;return r.jsx(d.default,{style:{"--button-text-align":"left"},disabled:t,icon:"RotateLeftWithCenter",onClick:()=>s&&s({...e,filters:f(u)}),isBlock:!0,children:o})};n.displayName="Widgets.ColorTool.Reset";const g=n;exports.default=g;

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

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import a from "@rubin-epo/epo-react-lib/Button";
-import { getBrightnessValue as m } from "../../utilities.js";
+import { getBrightnessValue as m } from "../../lib/utils.js";
 const u = (o) => o.map((t) => {
   const { defaultValue: e, min: s, max: r } = t, i = e || 1;
   return {

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"),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;
+"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("../lib/utils.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.js

@@ -3,7 +3,7 @@ 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";
+import { areActionsActive as h } from "../lib/utils.js";
 const i = ({
   actions: c,
   isDisabled: a,

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

@@ -1 +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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),m=require("react"),g=require("../lib/canvas.cjs"),C=require("./styles.cjs"),c=m.forwardRef(({layers:s=[],renderLayers:a=[],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,i)=>u&&a[i]);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});c.displayName="Widgets.ColorTool.CompositeRenderer";const R=c;exports.default=R;

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

@@ -1,6 +1,6 @@
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import { mergeCanvases as C } from "../utilities.js";
+import { mergeCanvases as C } from "../lib/canvas.js";
 import { Image as R } from "./styles.js";
 const s = d(
   ({ layers: m = [], renderLayers: a = [], width: e, height: r }, o) => {

package/dist/widgets/ColorTool/FilterControls/FilterControls.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),q=require("@rubin-epo/epo-react-lib/SelectListbox"),S=require("../utilities.cjs"),T=require("react-i18next"),l=require("./styles.cjs"),f=e=>e&&e.__esModule?e:{default:e},I=f(q),d=({filter:e,colorOptions:a,isDisabled:i,onChangeFilterCallback:t,buttonLabelledById:u,selectLabelledById:h,sliderLabelledById:x})=>{const{t:b}=T.useTranslation(),{label:r,color:c="",value:g,active:n,min:m,max:j}=e,_=()=>t&&t({...e,active:!n}),p=o=>o&&t&&t({...e,color:o}),y=o=>t&&t({...e,brightness:S.getBrightnessValue(m,j,o),value:o}),v=b("colorTool.actions.select_filter");return s.jsxs(l.FilterContainer,{disabled:i,children:[s.jsxs(l.FilterLabel,{children:[s.jsx(l.HiddenCheckbox,{checked:n,type:"checkbox",onChange:_,"aria-describedby":u}),s.jsx(l.FilterToggle,{as:"span",children:r})]}),s.jsx(I.default,{placeholder:v,value:c,options:a,onChangeCallback:p,width:"100%",maxWidth:"100%",labelledById:h,isDisabled:!n||i}),s.jsx(l.Slider,{min:1,max:100,onChangeCallback:y,isDisabled:!n||i,labelledbyId:x,value:g,label:r,color:c})]})};d.displayName="Widgets.ColorTool.FilterControls";const B=d;exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),q=require("@rubin-epo/epo-react-lib/SelectListbox"),S=require("../lib/utils.cjs"),T=require("react-i18next"),l=require("./styles.cjs"),f=e=>e&&e.__esModule?e:{default:e},I=f(q),d=({filter:e,colorOptions:a,isDisabled:r,onChangeFilterCallback:t,buttonLabelledById:u,selectLabelledById:h,sliderLabelledById:x})=>{const{t:b}=T.useTranslation(),{label:i,color:c="",value:g,active:n,min:m,max:j}=e,_=()=>t&&t({...e,active:!n}),p=o=>o&&t&&t({...e,color:o}),y=o=>t&&t({...e,brightness:S.getBrightnessValue(m,j,o),value:o}),v=b("colorTool.actions.select_filter");return s.jsxs(l.FilterContainer,{disabled:r,children:[s.jsxs(l.FilterLabel,{children:[s.jsx(l.HiddenCheckbox,{checked:n,type:"checkbox",onChange:_,"aria-describedby":u}),s.jsx(l.FilterToggle,{as:"span",children:i})]}),s.jsx(I.default,{placeholder:v,value:c,options:a,onChangeCallback:p,width:"100%",maxWidth:"100%",labelledById:h,isDisabled:!n||r}),s.jsx(l.Slider,{min:1,max:100,onChangeCallback:y,isDisabled:!n||r,labelledbyId:x,value:g,label:i,color:c})]})};d.displayName="Widgets.ColorTool.FilterControls";const B=d;exports.default=B;

package/dist/widgets/ColorTool/FilterControls/FilterControls.js

@@ -1,6 +1,6 @@
 import { jsxs as d, jsx as l } from "react/jsx-runtime";
 import B from "@rubin-epo/epo-react-lib/SelectListbox";
-import { getBrightnessValue as C } from "../utilities.js";
+import { getBrightnessValue as C } from "../lib/utils.js";
 import { useTranslation as I } from "react-i18next";
 import { FilterContainer as j, FilterLabel as L, HiddenCheckbox as S, FilterToggle as W, Slider as w } from "./styles.js";
 const a = ({

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("react"),k=require("@rubin-epo/epo-react-lib/CircularLoader"),A=require("../OffscreenFilter/index.cjs"),m=require("./styles.cjs"),F=require("../utilities.cjs"),M=require("../CompositeRender/index.cjs"),R=e=>e&&e.__esModule?e:{default:e},D=R(k),C=o.forwardRef(({filters:e,width:i=600,height:l=600,selectedObjectName:r,className:p,children:y},b)=>{const c=o.useRef([]),[f,x]=o.useState(r),[a,u]=o.useState(0),d=F.isFilterActive(e),L=e.filter(t=>!t.isDisabled).length,g=a<L;r!==f&&(x(r),u(0));const j=o.useCallback(()=>u(t=>t+1),[a,e]),q=(t,n)=>{c.current[t]=n};return s.jsxs(m.ImageContainer,{className:p,style:{"--image-container-opacity":a&&d?1:.1},children:[!a&&d&&s.jsx(D.default,{isVisible:g}),s.jsxs(m.LoadingContainer,{style:{"--loading-opacity":g?0:1},children:[e&&e.map((t,n)=>{const{label:_,image:v,color:I,brightness:h}=t;return s.jsx(A.default,{onChangeCallback:S=>q(n,S),url:v,color:I,width:i,height:l,filters:{brightness:h,contrast:1.3},onLoadCallback:j},_)}),s.jsx(M.default,{layers:c.current,renderLayers:e.map(({active:t})=>t),width:i,height:l,ref:b})]}),y]})});C.displayName="Widgets.ColorTool.ImageComposite";const P=C;exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("react"),k=require("@rubin-epo/epo-react-lib/CircularLoader"),A=require("../OffscreenFilter/index.cjs"),m=require("./styles.cjs"),F=require("../lib/utils.cjs"),M=require("../CompositeRender/index.cjs"),R=e=>e&&e.__esModule?e:{default:e},D=R(k),C=o.forwardRef(({filters:e,width:i=600,height:l=600,selectedObjectName:r,className:p,children:y},b)=>{const c=o.useRef([]),[f,x]=o.useState(r),[a,u]=o.useState(0),d=F.isFilterActive(e),L=e.filter(t=>!t.isDisabled).length,g=a<L;r!==f&&(x(r),u(0));const j=o.useCallback(()=>u(t=>t+1),[a,e]),q=(t,n)=>{c.current[t]=n};return s.jsxs(m.ImageContainer,{className:p,style:{"--image-container-opacity":a&&d?1:.1},children:[!a&&d&&s.jsx(D.default,{isVisible:g}),s.jsxs(m.LoadingContainer,{style:{"--loading-opacity":g?0:1},children:[e&&e.map((t,n)=>{const{label:_,image:v,color:I,brightness:h}=t;return s.jsx(A.default,{onChangeCallback:S=>q(n,S),url:v,color:I,width:i,height:l,filters:{brightness:h,contrast:1.3},onLoadCallback:j},_)}),s.jsx(M.default,{layers:c.current,renderLayers:e.map(({active:t})=>t),width:i,height:l,ref:b})]}),y]})});C.displayName="Widgets.ColorTool.ImageComposite";const P=C;exports.default=P;

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.js

@@ -3,7 +3,7 @@ import { forwardRef as j, useRef as D, useState as g, useCallback as O } from "r
 import P from "@rubin-epo/epo-react-lib/CircularLoader";
 import S from "../OffscreenFilter/index.js";
 import { ImageContainer as T, LoadingContainer as V } from "./styles.js";
-import { isFilterActive as W } from "../utilities.js";
+import { isFilterActive as W } from "../lib/utils.js";
 import $ from "../CompositeRender/index.js";
 const C = j(
   ({

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime");require("context-filter-polyfill");const p=require("../../../hooks/useImage.cjs"),n=require("../utilities.cjs"),l=({width:t=600,height:s=600,url:i,color:c="transparent",filters:u={brightness:1},onLoadCallback:f,onChangeCallback:a,debug:m=!1})=>{const[o,d]=p.default({url:i,crossOrigin:"anonymous",onLoadCallback:f}),r=document.createElement("canvas"),e=r.getContext("2d");return e&&o&&d==="loaded"&&(e.canvas.width=t,e.canvas.height=s,e.clearRect(0,0,t,s),e.globalCompositeOperation="multiply",e.filter=n.getFilters(u),e.drawImage(o,0,0,t,s),n.updateColor(e,c,t,s),a&&a(r)),m?g.jsx("img",{src:r.toDataURL()}):null};l.displayName="Widgets.ColorTool.OffscreenFilter";const v=l;exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),v=require("../../../hooks/useImage.cjs"),o=require("../lib/canvas.cjs"),c=({width:t=600,height:s=600,url:l,color:u="transparent",filters:i={brightness:1},onLoadCallback:f,onChangeCallback:a,debug:d=!1})=>{const[n,m]=v.default({url:l,crossOrigin:"anonymous",onLoadCallback:f}),r=document.createElement("canvas"),e=r.getContext("2d");return e&&n&&m==="loaded"&&(e.canvas.width=t,e.canvas.height=s,e.clearRect(0,0,t,s),e.filter=o.getFilters(i),e.drawImage(n,0,0,t,s),o.updateColor(e,u,t,s),a&&a(r)),d?g.jsx("img",{src:r.toDataURL()}):null};c.displayName="Widgets.ColorTool.OffscreenFilter";const O=c;exports.default=O;

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

@@ -1,7 +1,6 @@
-import { jsx as u } from "react/jsx-runtime";
-import "context-filter-polyfill";
-import d from "../../../hooks/useImage.js";
-import { getFilters as g, updateColor as O } from "../utilities.js";
+import { jsx as d } from "react/jsx-runtime";
+import p from "../../../hooks/useImage.js";
+import { getFilters as g, updateColor as v } from "../lib/canvas.js";
 const n = ({
   width: t = 600,
   height: r = 600,
@@ -10,19 +9,19 @@ const n = ({
   filters: m = {
     brightness: 1
   },
-  onLoadCallback: i,
-  onChangeCallback: s,
-  debug: f = !1
+  onLoadCallback: f,
+  onChangeCallback: a,
+  debug: i = !1
 }) => {
-  const [a, p] = d({
+  const [o, u] = p({
     url: c,
     crossOrigin: "anonymous",
-    onLoadCallback: i
-  }), o = document.createElement("canvas"), e = o.getContext("2d");
-  return e && a && p === "loaded" && (e.canvas.width = t, e.canvas.height = r, e.clearRect(0, 0, t, r), e.globalCompositeOperation = "multiply", e.filter = g(m), e.drawImage(a, 0, 0, t, r), O(e, l, t, r), s && s(o)), f ? /* @__PURE__ */ u("img", { src: o.toDataURL() }) : null;
+    onLoadCallback: f
+  }), s = document.createElement("canvas"), e = s.getContext("2d");
+  return e && o && u === "loaded" && (e.canvas.width = t, e.canvas.height = r, e.clearRect(0, 0, t, r), e.filter = g(m), e.drawImage(o, 0, 0, t, r), v(e, l, t, r), a && a(s)), i ? /* @__PURE__ */ d("img", { src: s.toDataURL() }) : null;
 };
 n.displayName = "Widgets.ColorTool.OffscreenFilter";
-const C = n;
+const y = n;
 export {
-  C as default
+  y as default
 };

package/dist/widgets/ColorTool/lib/canvas.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("context-filter-polyfill");const a=require("./utils.cjs"),l=e=>{e.globalCompositeOperation="source-over"},i=e=>Object.keys(e).reduce((r,o,t)=>e[o]!==void 0?r+=`${t>0?" ":""}${o}(${e[o]*100}%)`:"",""),n=(e,r,o,t)=>{e.globalCompositeOperation="multiply";const s=a.isStyleSupported("color",r)?r:"transparent";e.fillStyle=s,e.fillRect(0,0,o,t),l(e)},u=(e,r=[],o,t)=>{e.globalCompositeOperation="screen",r.forEach(s=>{e.drawImage(s,0,0,o,t)}),l(e)};exports.getFilters=i;exports.mergeCanvases=u;exports.updateColor=n;

package/dist/widgets/ColorTool/lib/canvas.d.ts

@@ -0,0 +1,5 @@
+export declare const getFilters: (filters: {
+    [key: string]: number | undefined;
+}) => string;
+export declare const updateColor: (ctx: CanvasRenderingContext2D, color: string, width: number, height: number) => void;
+export declare const mergeCanvases: (ctx: CanvasRenderingContext2D, layers: HTMLCanvasElement[] | undefined, width: number, height: number) => void;

package/dist/widgets/ColorTool/lib/canvas.js

@@ -0,0 +1,18 @@
+import "context-filter-polyfill";
+import { isStyleSupported as l } from "./utils.js";
+const a = (o) => {
+  o.globalCompositeOperation = "source-over";
+}, i = (o) => Object.keys(o).reduce((r, e, t) => o[e] !== void 0 ? r += `${t > 0 ? " " : ""}${e}(${o[e] * 100}%)` : "", ""), m = (o, r, e, t) => {
+  o.globalCompositeOperation = "multiply";
+  const s = l("color", r) ? r : "transparent";
+  o.fillStyle = s, o.fillRect(0, 0, e, t), a(o);
+}, u = (o, r = [], e, t) => {
+  o.globalCompositeOperation = "screen", r.forEach((s) => {
+    o.drawImage(s, 0, 0, e, t);
+  }), a(o);
+};
+export {
+  i as getFilters,
+  u as mergeCanvases,
+  m as updateColor
+};

package/dist/widgets/ColorTool/lib/canvas.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/widgets/ColorTool/{server.d.ts → lib/server.d.ts}

@@ -1,5 +1,5 @@
 import { ExportFormat } from "skia-canvas";
-import { ImageFilter } from "./ColorTool";
+import { ImageFilter } from "../ColorTool";
 /** server safe renderer */
 declare const getFilteredImageBase64: (filters?: Array<ImageFilter>, format?: ExportFormat, width?: number, height?: number) => Promise<string>;
 export default getFilteredImageBase64;

package/dist/widgets/ColorTool/lib/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("lodash/flattenDeep");require("lodash/find");const S=require("lodash/isEmpty"),u=e=>e&&e.__esModule?e:{default:e},y=u(m),g=u(S),a=(e,t,n)=>(t-e)*(n/100)+e,l=e=>e.some(t=>t.active),c=e=>e.filters.map(t=>{const{value:n,defaultValue:r,defaultColor:s,min:o,max:i,color:d}=t,p=n||r||1,f=s||d;return{...t,brightness:a(o,i,p),color:f}}),w=(e,t)=>y.default(e.map(r=>r.objects.filter(s=>s.name===t).map(c))),C=e=>g.default(e)?!1:l(e.filters);function D(e,t){if(t=arguments.length===2?t:"inherit",typeof window<"u"){if("CSS"in window&&"supports"in window.CSS)return window.CSS.supports(e,t);if("supportsCSS"in window)return window.supportsCSS(e,t)}if(typeof document>"u")return!0;const n=e.replace(/-([a-z]|[0-9])/gi,function(o,i){return(i+"").toUpperCase()}),r=document.createElement("div"),s=n in r.style;return r.style.cssText=e+":"+t,s&&r.style[n]!==""}exports.areActionsActive=C;exports.getBrightnessValue=a;exports.getDataFiltersByName=w;exports.isFilterActive=l;exports.isStyleSupported=D;exports.updateFilters=c;

package/dist/widgets/ColorTool/{utilities.d.ts → lib/utils.d.ts}

@@ -1,4 +1,4 @@
-import { AstroCategory, AstroObject, ImageFilter } from "./ColorTool";
+import { AstroCategory, AstroObject, ImageFilter } from "../ColorTool";
 /** calculates a value that can be used in the CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness brightness filter } */
 export declare const getBrightnessValue: (min: number, max: number, value: number) => number;
 export declare const isFilterActive: (filters: ImageFilter[]) => boolean;
@@ -20,8 +20,3 @@ export declare const getDataFiltersByName: (data: AstroCategory[], name: string)
 export declare const getCategoryName: (data: AstroCategory[], objectName: string) => string | null;
 export declare const areActionsActive: (data: AstroObject) => boolean;
 export declare function isStyleSupported(prop: string, value: string): boolean;
-export declare const getFilters: (filters: {
-    [key: string]: number | undefined;
-}) => string;
-export declare const updateColor: (ctx: CanvasRenderingContext2D, color: string, canvasWidth: number, canvasHeight: number) => void;
-export declare const mergeCanvases: (context: CanvasRenderingContext2D, layers: HTMLCanvasElement[] | undefined, width: number, height: number, globalCompositeOperation?: GlobalCompositeOperation) => void;

package/dist/widgets/ColorTool/lib/utils.js

@@ -0,0 +1,35 @@
+import l from "lodash/flattenDeep";
+import "lodash/find";
+import p from "lodash/isEmpty";
+const d = (t, e, n) => (e - t) * (n / 100) + t, f = (t) => t.some((e) => e.active), m = (t) => t.filters.map((e) => {
+  const { value: n, defaultValue: r, defaultColor: s, min: i, max: o, color: u } = e, c = n || r || 1, a = s || u;
+  return {
+    ...e,
+    brightness: d(i, o, c),
+    color: a
+  };
+}), C = (t, e) => l(
+  t.map((r) => r.objects.filter((s) => s.name === e).map(m))
+), g = (t) => p(t) ? !1 : f(t.filters);
+function h(t, e) {
+  if (e = arguments.length === 2 ? e : "inherit", typeof window < "u") {
+    if ("CSS" in window && "supports" in window.CSS)
+      return window.CSS.supports(t, e);
+    if ("supportsCSS" in window)
+      return window.supportsCSS(t, e);
+  }
+  if (typeof document > "u")
+    return !0;
+  const n = t.replace(/-([a-z]|[0-9])/gi, function(i, o) {
+    return (o + "").toUpperCase();
+  }), r = document.createElement("div"), s = n in r.style;
+  return r.style.cssText = t + ":" + e, s && r.style[n] !== "";
+}
+export {
+  g as areActionsActive,
+  d as getBrightnessValue,
+  C as getDataFiltersByName,
+  f as isFilterActive,
+  h as isStyleSupported,
+  m as updateFilters
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "0.6.10",
+  "version": "0.6.12-rc.1",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",

package/dist/widgets/ColorTool/utilities.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("context-filter-polyfill");const g=require("lodash/flattenDeep");require("lodash/find");const S=require("lodash/isEmpty"),a=e=>e&&e.__esModule?e:{default:e},y=a(g),C=a(S),l=(e,t,r)=>(t-e)*(r/100)+e,u=e=>e.some(t=>t.active),c=e=>e.filters.map(t=>{const{value:r,defaultValue:s,defaultColor:n,min:o,max:i,color:p}=t,f=r||s||1,m=n||p;return{...t,brightness:l(o,i,f),color:m}}),w=(e,t)=>y.default(e.map(s=>s.objects.filter(n=>n.name===t).map(c))),F=e=>C.default(e)?!1:u(e.filters);function d(e,t){if(t=arguments.length===2?t:"inherit",typeof window<"u"){if("CSS"in window&&"supports"in window.CSS)return window.CSS.supports(e,t);if("supportsCSS"in window)return window.supportsCSS(e,t)}if(typeof document>"u")return!0;const r=e.replace(/-([a-z]|[0-9])/gi,function(o,i){return(i+"").toUpperCase()}),s=document.createElement("div"),n=r in s.style;return s.style.cssText=e+":"+t,n&&s.style[r]!==""}const D=e=>Object.keys(e).reduce((t,r,s)=>t+=`${s>0?" ":""}${r}(${e[r]})`,""),_=(e,t,r,s)=>{const n=d("color",t)?t:"transparent";e.fillStyle=n,e.fillRect(0,0,r,s)},b=(e,t=[],r,s,n="screen")=>{e.globalCompositeOperation=n,t.forEach(o=>{e.drawImage(o,0,0,r,s)})};exports.areActionsActive=F;exports.getBrightnessValue=l;exports.getDataFiltersByName=w;exports.getFilters=D;exports.isFilterActive=u;exports.isStyleSupported=d;exports.mergeCanvases=b;exports.updateColor=_;exports.updateFilters=c;

package/dist/widgets/ColorTool/utilities.js

@@ -1,47 +0,0 @@
-import "context-filter-polyfill";
-import u from "lodash/flattenDeep";
-import "lodash/find";
-import p from "lodash/isEmpty";
-const d = (e, t, r) => (t - e) * (r / 100) + e, f = (e) => e.some((t) => t.active), m = (e) => e.filters.map((t) => {
-  const { value: r, defaultValue: n, defaultColor: o, min: s, max: i, color: a } = t, c = r || n || 1, l = o || a;
-  return {
-    ...t,
-    brightness: d(s, i, c),
-    color: l
-  };
-}), h = (e, t) => u(
-  e.map((n) => n.objects.filter((o) => o.name === t).map(m))
-), b = (e) => p(e) ? !1 : f(e.filters);
-function w(e, t) {
-  if (t = arguments.length === 2 ? t : "inherit", typeof window < "u") {
-    if ("CSS" in window && "supports" in window.CSS)
-      return window.CSS.supports(e, t);
-    if ("supportsCSS" in window)
-      return window.supportsCSS(e, t);
-  }
-  if (typeof document > "u")
-    return !0;
-  const r = e.replace(/-([a-z]|[0-9])/gi, function(s, i) {
-    return (i + "").toUpperCase();
-  }), n = document.createElement("div"), o = r in n.style;
-  return n.style.cssText = e + ":" + t, o && n.style[r] !== "";
-}
-const D = (e) => Object.keys(e).reduce((t, r, n) => t += `${n > 0 ? " " : ""}${r}(${e[r]})`, ""), F = (e, t, r, n) => {
-  const o = w("color", t) ? t : "transparent";
-  e.fillStyle = o, e.fillRect(0, 0, r, n);
-}, A = (e, t = [], r, n, o = "screen") => {
-  e.globalCompositeOperation = o, t.forEach((s) => {
-    e.drawImage(s, 0, 0, r, n);
-  });
-};
-export {
-  b as areActionsActive,
-  d as getBrightnessValue,
-  h as getDataFiltersByName,
-  D as getFilters,
-  f as isFilterActive,
-  w as isStyleSupported,
-  A as mergeCanvases,
-  F as updateColor,
-  m as updateFilters
-};