@rubin-epo/epo-widget-lib 0.5.1-alpha.0 → 0.6.0

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

@@ -0,0 +1,67 @@
+import e from "styled-components";
+import o from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import t from "@rubin-epo/epo-react-lib/Button";
+const r = e.input`
+  position: absolute;
+  left: -999px;
+  width: 1px;
+  height: 1px;
+  top: auto;
+  overflow: hidden;
+`, s = e(t)`
+  background-color: var(--filter-toggle-background, #f7f7f7);
+  border: 1px solid;
+  color: var(--filter-toggle-color, #6c6e6e);
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  font-weight: var(--FONT_WEIGHT_MEDIUM, 500);
+  font-size: 22px;
+  text-transform: lowercase;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  user-select: none;
+`, d = e.label`
+  overflow: hidden;
+
+  input:not(:disabled) + span {
+    cursor: pointer;
+
+    &:hover {
+      outline: 2px solid #6c6e6e;
+      outline-offset: -2px;
+    }
+  }
+
+  input:not(:disabled):focus + span,
+  input:not(:disabled):focus-visible + span {
+    outline: 2px solid #6c6e6e;
+    outline-offset: -2px;
+  }
+
+  input:not(:disabled):checked + span {
+    --filter-toggle-background: var(--turquoise85, #12726c);
+    --filter-toggle-color: var(--white, #fff);
+
+    &:hover {
+      outline: 1px solid var(--white, #fff);
+      outline-offset: -3px;
+    }
+  }
+
+  input:not(:disabled):checked:focus + span,
+  input:not(:disabled):checked:focus-visible + span {
+    outline: 1px solid var(--white, #fff);
+    outline-offset: -3px;
+  }
+`, f = e(o)`
+  padding: 0;
+  width: 100%;
+`;
+export {
+  d as FilterLabel,
+  s as FilterToggle,
+  r as HiddenCheckbox,
+  f as Slider
+};

package/dist/widgets/ColorTool/FilterImage/FilterImage.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),u=require("react"),d=({width:g=600,height:p=600,className:f,image:l,color:c="transparent",brightness:m=1})=>{const i=u.useRef(null),r=new Image,v=(t,s,e,a)=>{t.fillStyle=s,t.fillRect(0,0,e,a)},C=(t,s)=>{var a;const e=(a=i.current)==null?void 0:a.getContext("2d");if(e){const S=CSS.supports&&CSS.supports("background-color",s)?s:"transparent",{width:n,height:o}=e.canvas;e.clearRect(0,0,n,o),e.globalCompositeOperation="multiply",r.onload=()=>{e==null||e.drawImage(r,0,0,n,o),v(e,S,n,o)},r.src=t}};return u.useEffect(()=>{C(l,c)},[c,l]),b.jsx("canvas",{ref:i,style:{filter:`brightness(${m}) contrast(1.3)`},role:"img",className:f,width:g,height:p})};d.displayName="Widgets.ColorTool.FilterImage";const h=d;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react/jsx-runtime"),C=require("react"),R=require("../../../hooks/useImage.cjs"),S=require("../utilities.cjs"),j=require("../styles.cjs"),c=({width:u=600,height:g=600,className:d,url:m,color:p="transparent",filters:f={brightness:1},active:o,onLoadCallback:y})=>{var l;const[a,b]=R.default({url:m,crossOrigin:"anonymous",onLoadCallback:y}),n=C.useRef(null),s=(l=n.current)==null?void 0:l.getContext("2d"),h=(e,t,r,i)=>{const I=S.isStyleSupported("color",t)?t:"transparent";e.fillStyle=I,e.fillRect(0,0,r,i)},v=e=>Object.keys(e).reduce((t,r,i)=>t+=`${i>0?" ":""}${r}(${e[r]})`,"");if(s&&a&&b==="loaded"){const{width:e,height:t}=s.canvas;s.clearRect(0,0,e,t),s.globalCompositeOperation="multiply",s.filter=v(f),s.drawImage(a,0,0,e,t),h(s,p,e,t)}return q.jsx(j.Image,{ref:n,role:"img",style:{"--image-visibility":o?"visible":"hidden","--image-opacity":o?1:0},className:d,width:u,height:g})};c.displayName="Widgets.ColorTool.FilterImage";const F=c;exports.default=F;

package/dist/widgets/ColorTool/FilterImage/FilterImage.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent, HTMLAttributes } from "react";
+export interface FilterImageProps extends HTMLAttributes<HTMLCanvasElement> {
+    className?: string;
+    height?: number;
+    width?: number;
+    url: string;
+    color?: string;
+    brightness?: number;
+    active: boolean;
+    filters?: {
+        [key: string]: number | undefined;
+    };
+    onLoadCallback?: () => void;
+}
+declare const FilterImage: FunctionComponent<FilterImageProps>;
+export default FilterImage;

package/dist/widgets/ColorTool/FilterImage/FilterImage.js

@@ -1,41 +1,50 @@
-import { jsx as v } from "react/jsx-runtime";
-import { useRef as I, useEffect as S } from "react";
-const p = ({
-  width: f = 600,
+import { jsx as C } from "react/jsx-runtime";
+import { useRef as F } from "react";
+import R from "../../../hooks/useImage.js";
+import { isStyleSupported as $ } from "../utilities.js";
+import { Image as x } from "../styles.js";
+const m = ({
+  width: c = 600,
   height: g = 600,
-  className: u,
-  image: l,
-  color: c = "transparent",
-  brightness: d = 1
+  className: p,
+  url: d,
+  color: u = "transparent",
+  filters: f = {
+    brightness: 1
+  },
+  active: s,
+  onLoadCallback: y
 }) => {
-  const i = I(null), o = new Image(), m = (e, a, t, s) => {
-    e.fillStyle = a, e.fillRect(0, 0, t, s);
-  }, C = (e, a) => {
-    var s;
-    const t = (s = i.current) == null ? void 0 : s.getContext("2d");
-    if (t) {
-      const h = CSS.supports && CSS.supports("background-color", a) ? a : "transparent", { width: r, height: n } = t.canvas;
-      t.clearRect(0, 0, r, n), t.globalCompositeOperation = "multiply", o.onload = () => {
-        t == null || t.drawImage(o, 0, 0, r, n), m(t, h, r, n);
-      }, o.src = e;
-    }
-  };
-  return S(() => {
-    C(l, c);
-  }, [c, l]), /* @__PURE__ */ v(
-    "canvas",
+  var l;
+  const [a, h] = R({
+    url: d,
+    crossOrigin: "anonymous",
+    onLoadCallback: y
+  }), n = F(null), o = (l = n.current) == null ? void 0 : l.getContext("2d"), I = (t, e, r, i) => {
+    const v = $("color", e) ? e : "transparent";
+    t.fillStyle = v, t.fillRect(0, 0, r, i);
+  }, b = (t) => Object.keys(t).reduce((e, r, i) => e += `${i > 0 ? " " : ""}${r}(${t[r]})`, "");
+  if (o && a && h === "loaded") {
+    const { width: t, height: e } = o.canvas;
+    o.clearRect(0, 0, t, e), o.globalCompositeOperation = "multiply", o.filter = b(f), o.drawImage(a, 0, 0, t, e), I(o, u, t, e);
+  }
+  return /* @__PURE__ */ C(
+    x,
     {
-      ref: i,
-      style: { filter: `brightness(${d}) contrast(1.3)` },
+      ref: n,
       role: "img",
-      className: u,
-      width: f,
+      style: {
+        "--image-visibility": s ? "visible" : "hidden",
+        "--image-opacity": s ? 1 : 0
+      },
+      className: p,
+      width: c,
       height: g
     }
   );
 };
-p.displayName = "Widgets.ColorTool.FilterImage";
-const R = p;
+m.displayName = "Widgets.ColorTool.FilterImage";
+const H = m;
 export {
-  R as default
+  H as default
 };

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

@@ -0,0 +1 @@
+export { default } from "./FilterImage";

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),c=require("../utilities.cjs"),i=require("../styles.cjs"),s=({filters:e})=>t.jsxs(i.ImageContainer,{children:[t.jsx(i.BackgroundImage,{alt:"",src:"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",$filtersActive:c.isFilterActive(e)}),e&&e.map(o=>{const{label:A,image:r,color:a,brightness:l,active:n}=o;return t.jsx(i.FilteredImage,{image:r,color:a,brightness:l,active:n},`filter-${A}`)})]});s.displayName="Widgets.ColorTool.ImageComposite";const m=s;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("react"),q=require("@rubin-epo/epo-react-lib/CircularLoader"),c=require("./styles.cjs"),I=require("../utilities.cjs"),S=require("../FilterImage/FilterImage.cjs"),$=e=>e&&e.__esModule?e:{default:e},A=$(q),d=r.forwardRef(({filters:e,width:o,height:s,selectedObjectName:i,children:m},g)=>{const[p,b]=r.useState(i),[n,l]=r.useState(0),f=I.isFilterActive(e),C=e.filter(t=>!t.isDisabled).length,u=n!==C;i!==p&&(b(i),l(0));const y=r.useCallback(()=>l(t=>t+1),[n,e]);return a.jsxs(c.ImageContainer,{ref:g,style:{"--image-width":typeof o=="number"?`${o}px`:o,"--image-height":typeof s=="number"?`${s}px`:s},children:[!n&&f&&a.jsx(A.default,{isVisible:u}),a.jsx(c.LoadingContainer,{style:{"--loading-opacity":u?0:1},children:e&&e.map(t=>{const{label:v,image:x,color:L,brightness:_,active:j}=t;return a.jsx(S.default,{url:x,color:L,active:j,width:o,height:s,filters:{brightness:_,contrast:1.3},onLoadCallback:y},`filter-${v}`)})}),m]})});d.displayName="Widgets.ColorTool.ImageComposite";const F=d;exports.default=F;

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ImageFilter } from "../ColorTool";
+interface ImageCompositeProps {
+    filters: ImageFilter[];
+    width: number;
+    height: number;
+    selectedObjectName: string;
+}
+declare const ImageComposite: import("react").ForwardRefExoticComponent<ImageCompositeProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default ImageComposite;

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

@@ -1,33 +1,58 @@
-import { jsxs as l, jsx as A } from "react/jsx-runtime";
-import { isFilterActive as g } from "../utilities.js";
-import { ImageContainer as c, BackgroundImage as n, FilteredImage as p } from "../styles.js";
-const o = ({
-  filters: e
-}) => /* @__PURE__ */ l(c, { children: [
-  /* @__PURE__ */ A(
-    n,
+import { jsxs as $, jsx as s } from "react/jsx-runtime";
+import { forwardRef as A, useState as l, useCallback as F } from "react";
+import j from "@rubin-epo/epo-react-lib/CircularLoader";
+import { ImageContainer as k, LoadingContainer as D } from "./styles.js";
+import { isFilterActive as P } from "../utilities.js";
+import R from "../FilterImage/FilterImage.js";
+const c = A(({ filters: o, width: r, height: t, selectedObjectName: a, children: p }, g) => {
+  const [d, f] = l(a), [i, n] = l(0), b = P(o), u = o.filter((e) => !e.isDisabled).length, m = i !== u;
+  a !== d && (f(a), n(0));
+  const C = F(
+    () => n((e) => e + 1),
+    [i, o]
+  );
+  return /* @__PURE__ */ $(
+    k,
     {
-      alt: "",
-      src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
-      $filtersActive: g(e)
-    }
-  ),
-  e && e.map((t) => {
-    const { label: a, image: i, color: r, brightness: m, active: s } = t;
-    return /* @__PURE__ */ A(
-      p,
-      {
-        image: i,
-        color: r,
-        brightness: m,
-        active: s
+      ref: g,
+      style: {
+        "--image-width": typeof r == "number" ? `${r}px` : r,
+        "--image-height": typeof t == "number" ? `${t}px` : t
       },
-      `filter-${a}`
-    );
-  })
-] });
-o.displayName = "Widgets.ColorTool.ImageComposite";
-const f = o;
+      children: [
+        !i && b && /* @__PURE__ */ s(j, { isVisible: m }),
+        /* @__PURE__ */ s(
+          D,
+          {
+            style: { "--loading-opacity": m ? 0 : 1 },
+            children: o && o.map((e) => {
+              const { label: y, image: I, color: L, brightness: v, active: x } = e;
+              return /* @__PURE__ */ s(
+                R,
+                {
+                  url: I,
+                  color: L,
+                  active: x,
+                  width: r,
+                  height: t,
+                  filters: {
+                    brightness: v,
+                    contrast: 1.3
+                  },
+                  onLoadCallback: C
+                },
+                `filter-${y}`
+              );
+            })
+          }
+        ),
+        p
+      ]
+    }
+  );
+});
+c.displayName = "Widgets.ColorTool.ImageComposite";
+const B = c;
 export {
-  f as default
+  B as default
 };

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

@@ -0,0 +1 @@
+export { default } from "./ImageComposite";

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

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),i=t=>t&&t.__esModule?t:{default:t},e=i(a),o=e.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  grid-area: image;
+  background-color: rgba(0, 0, 0, 0.1);
+  max-width: var(--image-width);
+  max-height: var(--image-height);
+`,n=e.default.div`
+  width: 100%;
+  height: 100%;
+  opacity: var(--loading-opacity, 0);
+  transition: opacity ease var(--DURATION_SLOW, 0.4s);
+  position: absolute;
+  top: 0;
+  left: 0;
+`;exports.ImageContainer=o;exports.LoadingContainer=n;