npm - @cuemath/leap - Versions diffs - 3.1.4 → 3.1.5-aa1 - Mend

@cuemath/leap 3.1.4 → 3.1.5-aa1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/dist/features/cue-canvas/cue-canvas-provider.js CHANGED Viewed

@@ -1,26 +1,24 @@
-import { jsx as d } from "react/jsx-runtime";
-import { memo as f, useMemo as n, useState as o } from "react";
-import p from "./cue-canvas-context.js";
-import { getColorsForUser as x } from "./cue-canvas-helpers.js";
-const I = f(
-  ({ children: a, userType: t }) => {
-    const i = n(() => x(t), [t]), [e, m] = o(), [r, v] = o("pen"), [s, l] = o(i[0]), [c, C] = o(), u = n(
-      () => ({
-        activeInstance: e,
-        setActiveInstance: m,
-        activeTool: r,
-        setActiveTool: v,
-        activeColor: s,
-        setActiveColor: l,
-        homeworkId: c,
-        setHomeworkId: C
-      }),
-      [s, e, r, c]
-    );
-    return /* @__PURE__ */ d(p.Provider, { value: u, children: a });
-  }
-), g = I;
+import { jsx as f } from "react/jsx-runtime";
+import { memo as p, useMemo as a, useState as o } from "react";
+import x from "./cue-canvas-context.js";
+import { getColorsForUser as I } from "./cue-canvas-helpers.js";
+const P = p(({ children: i, userType: t, renderAs: e }) => {
+  const m = a(() => I(t, e), [t, e]), [r, v] = o(), [s, l] = o("pen"), [c, C] = o(m[0]), [n, u] = o(), d = a(
+    () => ({
+      activeInstance: r,
+      setActiveInstance: v,
+      activeTool: s,
+      setActiveTool: l,
+      activeColor: c,
+      setActiveColor: C,
+      homeworkId: n,
+      setHomeworkId: u
+    }),
+    [c, r, s, n]
+  );
+  return /* @__PURE__ */ f(x.Provider, { value: d, children: i });
+}), h = P;
 export {
-  g as default
+  h as default
 };
 //# sourceMappingURL=cue-canvas-provider.js.map

package/dist/features/cue-canvas/cue-canvas-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cue-canvas-provider.js","sources":["../../../src/features/cue-canvas/cue-canvas-provider.tsx"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type { CueCanvasCore } from './cue-canvas-core';\nimport type { TCueCanvasColors, TCueCanvasTool } from './types/cue-canvas';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { useState, memo, useMemo } from 'react';\n\nimport CueCanvasContext from './cue-canvas-context';\nimport { getColorsForUser } from './cue-canvas-helpers';\n\nconst CueCanvasProvider: FC<PropsWithChildren<{ userType: TUserTypes }>> ~~= memo(\~~n ({ children, userType }) => {\n const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n const [activeInstance, setActiveInstance] = useState<CueCanvasCore>();\n const [activeTool, setActiveTool] = useState<TCueCanvasTool>('pen');\n const [activeColor, setActiveColor] = useState<TCueCanvasColors>(colors[0] as TCueCanvasColors);\n const [homeworkId, setHomeworkId] = useState<string>();\n\n const contextValue = useMemo(\n () => ({\n activeInstance: activeInstance,\n setActiveInstance: setActiveInstance,\n activeTool: activeTool,\n setActiveTool: setActiveTool,\n activeColor,\n setActiveColor,\n homeworkId,\n setHomeworkId,\n }),\n [activeColor, activeInstance, activeTool, homeworkId],\n );\n\n return <CueCanvasContext.Provider value={contextValue}>{children}</CueCanvasContext.Provider>;\n }~~,\n~~);\n\nexport default CueCanvasProvider;\n"],"names":["CueCanvasProvider","memo","children","userType","colors","useMemo","getColorsForUser","activeInstance","setActiveInstance","useState","activeTool","setActiveTool","activeColor","setActiveColor","homeworkId","setHomeworkId","contextValue","CueCanvasContext","CueCanvasProvider$1"],"mappings":";;;;AAUA,MAAMA,~~IAAqEC;AAAA~~,~~EACzE~~,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;~~AACpB~~,~~UAAAC~~,IAASC,EAAQ,MAAMC,~~EAAiBH~~,CAAQ,GAAG,~~CAACA~~,CAAQ,CAAC,~~GAE7D~~,CAACI,GAAgBC,CAAiB,IAAIC,EAAwB,GAC9D,CAACC,GAAYC,CAAa,IAAIF,EAAyB,KAAK,GAC5D,CAACG,GAAaC,CAAc,IAAIJ,EAA2BL,EAAO,CAAC,CAAqB,GACxF,CAACU,GAAYC,CAAa,IAAIN,EAAiB,GAE/CO,IAAeX;AAAA,~~MACnB~~,OAAO;AAAA,~~QACL~~,gBAAAE;AAAA,~~QACA~~,mBAAAC;AAAA,~~QACA~~,YAAAE;AAAA,~~QACA~~,eAAAC;AAAA,~~QACA~~,aAAAC;AAAA,~~QACA~~,gBAAAC;AAAA,~~QACA~~,YAAAC;AAAA,~~QACA~~,eAAAC;AAAA,~~MAAA~~;AAAA,~~MAEF~~,CAACH,GAAaL,GAAgBG,GAAYI,CAAU;AAAA,~~IAAA~~;AAGtD,~~6BAAQG~~,EAAiB,UAAjB,EAA0B,OAAOD,GAAe,~~UAAAd~~,EAAS,CAAA;~~AAAA~~,~~EACnE;AACF~~,~~GAEAgB~~,~~IAAelB~~;"}
1	+ {"version":3,"file":"cue-canvas-provider.js","sources":["../../../src/features/cue-canvas/cue-canvas-provider.tsx"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type { CueCanvasCore } from './cue-canvas-core';\nimport type { TCueCanvasColors, TCueCanvasTool, TRenderAs } from './types/cue-canvas';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { useState, memo, useMemo } from 'react';\n\nimport CueCanvasContext from './cue-canvas-context';\nimport { getColorsForUser } from './cue-canvas-helpers';\n\nconst CueCanvasProvider: FC<PropsWithChildren<{ userType: TUserTypes; renderAs: TRenderAs }>> =\n memo(({ children, userType, renderAs }) => {\n const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n const [activeInstance, setActiveInstance] = useState<CueCanvasCore>();\n const [activeTool, setActiveTool] = useState<TCueCanvasTool>('pen');\n const [activeColor, setActiveColor] = useState<TCueCanvasColors>(colors[0] as TCueCanvasColors);\n const [homeworkId, setHomeworkId] = useState<string>();\n\n const contextValue = useMemo(\n () => ({\n activeInstance: activeInstance,\n setActiveInstance: setActiveInstance,\n activeTool: activeTool,\n setActiveTool: setActiveTool,\n activeColor,\n setActiveColor,\n homeworkId,\n setHomeworkId,\n }),\n [activeColor, activeInstance, activeTool, homeworkId],\n );\n\n return <CueCanvasContext.Provider value={contextValue}>{children}</CueCanvasContext.Provider>;\n });\n\nexport default CueCanvasProvider;\n"],"names":["CueCanvasProvider","memo","children","userType","renderAs","colors","useMemo","getColorsForUser","activeInstance","setActiveInstance","useState","activeTool","setActiveTool","activeColor","setActiveColor","homeworkId","setHomeworkId","contextValue","CueCanvasContext","CueCanvasProvider$1"],"mappings":";;;;AAUA,MAAMA,IACJC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,UAAAC,QAAe;AACnC,QAAAC,IAASC,EAAQ,MAAMC,EAAiBJ,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC,GAEjF,CAACI,GAAgBC,CAAiB,IAAIC,EAAwB,GAC9D,CAACC,GAAYC,CAAa,IAAIF,EAAyB,KAAK,GAC5D,CAACG,GAAaC,CAAc,IAAIJ,EAA2BL,EAAO,CAAC,CAAqB,GACxF,CAACU,GAAYC,CAAa,IAAIN,EAAiB,GAE/CO,IAAeX;AAAA,IACnB,OAAO;AAAA,MACL,gBAAAE;AAAA,MACA,mBAAAC;AAAA,MACA,YAAAE;AAAA,MACA,eAAAC;AAAA,MACA,aAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,IAAA;AAAA,IAEF,CAACH,GAAaL,GAAgBG,GAAYI,CAAU;AAAA,EAAA;AAGtD,2BAAQG,EAAiB,UAAjB,EAA0B,OAAOD,GAAe,UAAAf,EAAS,CAAA;AACnE,CAAC,GAEHiB,IAAenB;"}

package/dist/features/cue-canvas/cue-cavas-styled.js CHANGED Viewed

@@ -2,8 +2,8 @@ import i, { css as l } from "styled-components";
 import a from "../../assets/line-icons/icons/check.js";
 import d from "../../assets/line-icons/icons/down.js";
 import h from "../../assets/line-icons/icons/highlighter.js";
-import f from "../../assets/line-icons/icons/lock.js";
-import u from "../../assets/line-icons/icons/pencil.js";
+import u from "../../assets/line-icons/icons/lock.js";
+import f from "../../assets/line-icons/icons/pencil.js";
 import g from "../../assets/line-icons/icons/ruler.js";
 import x from "../../assets/line-icons/icons/sketch.js";
 import $ from "../../assets/line-icons/icons/undo.js";
@@ -12,7 +12,7 @@ import p from "../ui/layout/flex-view.js";
 import { CANVAS_COLORS as c } from "./constants/constants.js";
 const W = i(p)`
   border: 2px solid;
-`, S = i(u)(({
+`, S = i(f)(({
   theme: r,
   $active: o,
   $activeColor: t,
@@ -171,7 +171,7 @@ const W = i(p)`
       }
     `}
   `;
-}), H = i(f)`
+}), H = i(u)`
   width: 20px;
   height: 20px;
 `, P = i(m)`
@@ -221,17 +221,15 @@ const W = i(p)`
   path {
     stroke: ${"white"};
   }
-`, j = i($)`
+`, D = i($)`
   transform: scaleX(-1);
-`, D = i(p)`
+`, O = i(p)`
   position: absolute;
-  display: flex;
-  justify-content: center;
-  top: -24px; //-16 for icon, -8 for gap
+  top: ${({ $top: r }) => r}px;
   transition:
     opacity 0.5s ease,
     transform 0.5s ease;
-`, O = i(p)(
+`, V = i(p)(
   ({ $canScribble: r, $canRender: o, $renderAs: t }) => `
   display: ${o ? "block" : "none"};
   opacity: ${r ? 1 : 0.5};
@@ -244,7 +242,7 @@ const W = i(p)`
     `}
 `
-), V = i(p)(
+), j = i(p)(
   ({ $color: r }) => `
 background: ${c[r]};
 `
@@ -271,13 +269,13 @@ background: ${c[r]};
   }
 `;
 export {
-  V as ColorPicker,
-  O as CueCanvasWrapper,
+  j as ColorPicker,
+  V as CueCanvasWrapper,
   W as HWWrapper,
   M as MenuWrapper,
-  D as PaletteWrapper,
+  O as PaletteWrapper,
   F as PenIconWrapper,
-  j as RedoIcon,
+  D as RedoIcon,
   U as StyledCheckIcon,
   z as StyledDownIcon,
   Y as StyledHighlighterWrapper,

package/dist/features/cue-canvas/cue-cavas-styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n $active: boolean;\n $activeColor: TCueCanvasColors;\n $shouldAnimate: boolean;\n}\nexport const HWWrapper = styled(FlexView)`\n border: 2px solid;\n`;\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n cursor: ${$active ? 'auto' : 'pointer'};\n .pencil-dark-shade {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .pencil-light-shade {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.3 : 1};\n }\n\n ${!$active &&\n css`\n &:hover {\n .pencil-dark-shade {\n fill: ${colors.GREY_4};\n }\n .pencil-light-shade {\n fill: ${colors.GREY_2};\n }\n }\n `}\n `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n .ruler-rect-color {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .ruler-stripe-base {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.2 : 1};\n }\n\n .ruler-small-stripe {\n fill: ${colors.REAL_BLACK};\n }\n\n ${!$active &&\n css`\n &:hover {\n .ruler-rect-color {\n fill: ${colors.GREY_4};\n }\n .ruler-stripe-base {\n fill: ${colors.GREY_3};\n }\n }\n `}\n `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n ${!$active &&\n css`\n &:hover {\n .highlighter-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .highlighter-stripe {\n fill: ${theme.colors.BLACK_50};\n }\n\n .highlighter-light-body {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n .highlighter-tip {\n fill: ${color};\n }\n\n .highlighter-stripe {\n fill: ${color};\n opacity: 0.6;\n }\n\n .highlighter-light-body {\n fill: ${color};\n opacity: 0.2;\n }\n `}\n `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n ${!$active &&\n css`\n &:hover {\n .pen-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .pen-dark-shade {\n fill: ${theme.colors.BLACK_50};\n }\n\n .pen-light-shade {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n cursor: ${$active ? 'auto' : 'pointer'};\n .pen-tip {\n fill: ${color};\n }\n\n .pen-dark-shade {\n fill: ${color};\n opacity: 0.6;\n }\n\n .pen-light-shade {\n fill: ${color};\n opacity: 0.4;\n }\n `}\n `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' \| '$shouldAnimate'>>(\n ({ theme, $active }) => {\n const { colors } = theme;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n border: 1px solid ${colors.WHITE};\n border-radius: 50%;\n transition: all 100ms ease-in-out;\n border: 1px solid ${colors.GREY_1};\n\n ${!$active &&\n css`\n &:hover {\n border: 1px solid ${colors.REAL_BLACK};\n }\n `}\n\n ${$active &&\n css`\n cursor: auto;\n background: ${colors.BLACK};\n .tile-icon {\n fill: ${colors.BLACK};\n }\n svg {\n path,\n rect,\n circle {\n stroke: ${colors.WHITE};\n }\n .hover-eraser {\n stroke: none;\n fill: ${colors.WHITE};\n }\n }\n `}\n `;\n },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n path {\n stroke: ${'white'};\n }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n position: absolute;\n display: flex;\n justify-content: center;\n top: -24px; //-16 for icon, -8 for gap\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n ({ $canScribble, $canRender, $renderAs }) => `\n display: ${$canRender ? 'block' : 'none'};\n opacity: ${$canScribble ? 1 : 0.5};\n pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n ${\n $renderAs === 'canvas' &&\n $canScribble &&\n `\n background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n background-position:0 0,32px 32px;\n background-size: 30px 32px;\n `\n }\n \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n pointer-events: none;\n transition: transform 0.5s ease;\n transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n overflow: hidden;\n border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n position: absolute;\n padding: 8px 8px 0 8px;\n overflow: hidden;\n bottom: 58px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n\n :hover {\n cursor: pointer;\n }\n`;\n"],"names":["HWWrapper","styled","FlexView","StyledPencilIcon","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}
1	+ {"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n $active: boolean;\n $activeColor: TCueCanvasColors;\n $shouldAnimate: boolean;\n}\nexport const HWWrapper = styled(FlexView)`\n border: 2px solid;\n`;\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n cursor: ${$active ? 'auto' : 'pointer'};\n .pencil-dark-shade {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .pencil-light-shade {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.3 : 1};\n }\n\n ${!$active &&\n css`\n &:hover {\n .pencil-dark-shade {\n fill: ${colors.GREY_4};\n }\n .pencil-light-shade {\n fill: ${colors.GREY_2};\n }\n }\n `}\n `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n .ruler-rect-color {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .ruler-stripe-base {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.2 : 1};\n }\n\n .ruler-small-stripe {\n fill: ${colors.REAL_BLACK};\n }\n\n ${!$active &&\n css`\n &:hover {\n .ruler-rect-color {\n fill: ${colors.GREY_4};\n }\n .ruler-stripe-base {\n fill: ${colors.GREY_3};\n }\n }\n `}\n `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n ${!$active &&\n css`\n &:hover {\n .highlighter-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .highlighter-stripe {\n fill: ${theme.colors.BLACK_50};\n }\n\n .highlighter-light-body {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n .highlighter-tip {\n fill: ${color};\n }\n\n .highlighter-stripe {\n fill: ${color};\n opacity: 0.6;\n }\n\n .highlighter-light-body {\n fill: ${color};\n opacity: 0.2;\n }\n `}\n `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n ${!$active &&\n css`\n &:hover {\n .pen-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .pen-dark-shade {\n fill: ${theme.colors.BLACK_50};\n }\n\n .pen-light-shade {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n cursor: ${$active ? 'auto' : 'pointer'};\n .pen-tip {\n fill: ${color};\n }\n\n .pen-dark-shade {\n fill: ${color};\n opacity: 0.6;\n }\n\n .pen-light-shade {\n fill: ${color};\n opacity: 0.4;\n }\n `}\n `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' \| '$shouldAnimate'>>(\n ({ theme, $active }) => {\n const { colors } = theme;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n border: 1px solid ${colors.WHITE};\n border-radius: 50%;\n transition: all 100ms ease-in-out;\n border: 1px solid ${colors.GREY_1};\n\n ${!$active &&\n css`\n &:hover {\n border: 1px solid ${colors.REAL_BLACK};\n }\n `}\n\n ${$active &&\n css`\n cursor: auto;\n background: ${colors.BLACK};\n .tile-icon {\n fill: ${colors.BLACK};\n }\n svg {\n path,\n rect,\n circle {\n stroke: ${colors.WHITE};\n }\n .hover-eraser {\n stroke: none;\n fill: ${colors.WHITE};\n }\n }\n `}\n `;\n },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n path {\n stroke: ${'white'};\n }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)<{ $top: number }>`\n position: absolute;\n top: ${({ $top }) => $top}px;\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n ({ $canScribble, $canRender, $renderAs }) => `\n display: ${$canRender ? 'block' : 'none'};\n opacity: ${$canScribble ? 1 : 0.5};\n pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n ${\n $renderAs === 'canvas' &&\n $canScribble &&\n `\n background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n background-position:0 0,32px 32px;\n background-size: 30px 32px;\n `\n }\n \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n pointer-events: none;\n transition: transform 0.5s ease;\n transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n overflow: hidden;\n border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n position: absolute;\n padding: 8px 8px 0 8px;\n overflow: hidden;\n bottom: 58px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n\n :hover {\n cursor: pointer;\n }\n`;\n"],"names":["HWWrapper","styled","FlexView","StyledPencilIcon","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","$top","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js CHANGED Viewed

@@ -1,56 +1,52 @@
-import { useMessageBrokerChannel as x } from "@cuemath/cue-message-broker";
-import { useState as E, useRef as F, useMemo as H, useCallback as g } from "react";
-const l = (r) => ({
-  userId: r.userId,
-  data: r.data,
-  height: r.height,
-  responseId: r.responseId,
-  gridName: r.gridName,
-  dimension: r.dimension
-}), W = (r, m, f, a = "canvas") => {
-  const [p, b] = E(
+import { useMessageBrokerChannel as E } from "@cuemath/cue-message-broker";
+import { useState as F, useRef as H, useMemo as W, useCallback as f } from "react";
+const I = (c) => ({
+  userId: c.userId,
+  data: c.data,
+  height: c.height,
+  responseId: c.responseId
+}), $ = (c, l, d, u = "canvas") => {
+  const [m, b] = F(
     () => {
       var o, n;
-      const c = {};
-      if (!f) return c;
-      for (const { message: i } of f) {
-        const e = (o = i.payload) == null ? void 0 : o.eventPayload, s = e == null ? void 0 : e.responseId;
+      const r = {};
+      if (!d) return r;
+      for (const { message: a } of d) {
+        const e = (o = a.payload) == null ? void 0 : o.eventPayload, s = e == null ? void 0 : e.responseId;
         if (!(e != null && e.responseId)) continue;
-        const t = l(e);
-        s && c[s] ? (n = c[s]) == null || n.push(t) : c[s] = [t];
+        const t = I(e);
+        s && r[s] ? (n = r[s]) == null || n.push(t) : r[s] = [t];
       }
-      return c;
+      return r;
     }
-  ), u = F({}), C = H(
+  ), i = H({}), C = W(
     () => ({
-      channelId: r,
-      ttl: a === "canvas" ? 0 : 24,
-      logger: m
+      channelId: c,
+      ttl: u === "canvas" ? 0 : 24,
+      logger: l
     }),
-    [r, m, a]
-  ), S = g((c, o) => {
-    u.current = { ...u.current, [c]: o };
-  }, []), M = g(
-    (c, o) => {
+    [c, l, u]
+  ), S = f((r, o) => {
+    i.current = { ...i.current, [r]: o };
+  }, []), M = f(
+    (r, o) => {
       const n = {};
-      c.forEach((i) => {
+      r.forEach((a) => {
         var k;
-        const { payload: e } = i.message, { eventPayload: s } = e, t = s == null ? void 0 : s.responseId, B = s == null ? void 0 : s.data, j = s == null ? void 0 : s.userId, w = s == null ? void 0 : s.height, d = u.current[t];
-        if (!o && d)
-          d({
-            data: B,
-            height: w,
-            userId: j,
-            responseId: t,
-            gridName: s == null ? void 0 : s.gridName,
-            dimension: s == null ? void 0 : s.dimension
+        const { payload: e } = a.message, { eventPayload: s } = e, t = s == null ? void 0 : s.responseId, j = s == null ? void 0 : s.data, w = s == null ? void 0 : s.userId, x = s == null ? void 0 : s.height, g = i.current[t];
+        if (!o && g)
+          g({
+            data: j,
+            height: x,
+            userId: w,
+            responseId: t
           });
         else {
-          const I = l(s);
-          t && n[t] ? (k = n[t]) == null || k.push(I) : n[t] = [I];
+          const p = I(s);
+          t && n[t] ? (k = n[t]) == null || k.push(p) : n[t] = [p];
         }
-      }), Object.keys(n).length > 0 && b((i) => {
-        const e = { ...i };
+      }), Object.keys(n).length > 0 && b((a) => {
+        const e = { ...a };
         return Object.keys(n).forEach((s) => {
           var t;
           s && e[s] ? (t = e[s]) == null || t.push(...n[s] ?? []) : e[s] = n[s] ?? [];
@@ -58,24 +54,24 @@ const l = (r) => ({
       });
     },
     []
-  ), { publish: D, channelStatus: R, channel: h, channelMetadata: N, setChannelMetadata: O } = x({
+  ), { publish: D, channelStatus: R, channel: h, channelMetadata: O, setChannelMetadata: q } = E({
     channelOptions: C,
     consumerFn: M,
-    metadataRequired: a === "whiteboard"
-  }), q = g(() => {
+    metadataRequired: u === "whiteboard"
+  }), B = f(() => {
     h && h.destroyChannel();
   }, [h]);
   return {
     publishStrokes: D,
     channelStatus: R,
-    closeChannel: q,
-    initialStrokesData: p,
+    closeChannel: B,
+    initialStrokesData: m,
     registerCallback: S,
-    setChannelMetadata: O,
-    channelMetadata: N
+    setChannelMetadata: q,
+    channelMetadata: O
   };
-}, A = W;
+}, G = $;
 export {
-  A as default
+  G as default
 };
 //# sourceMappingURL=use-canvas-sync-broker.js.map

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type {\n IActionData,\n ICanvasUpdateConfig,\n IPublishData,\n ~~IViewport,\n~~ TCueCanvasChangeDataObject,\n ~~TCueCanvasGridName,\n~~ TRenderAs,\n} from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n eventName: string;\n eventPayload: {\n responseId: string;\n data: TCueCanvasChangeDataObject;\n userId: string;\n height: number;\n ~~gridName?: TCueCanvasGridName;\n dimension?: IViewport;\n~~ };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n userId: payload.userId,\n data: payload.data,\n height: payload.height,\n responseId: payload.responseId,\n ~~gridName: payload.gridName,\n dimension: payload.dimension,\n~~});\n\nconst useCanvasSyncBroker = (\n channelId: string,\n logEvent: (type: string, payload?: Record<string, unknown>) => void,\n initialCanvasData?: Array<IChannelMessage>,\n type: TRenderAs = 'canvas',\n) => {\n const [initialStrokesData, setInitialStrokesData] = useState<Record<string, IActionData[]>>(\n () => {\n const map: Record<string, IActionData[]> = {};\n\n if (!initialCanvasData) return map;\n\n for (const { message } of initialCanvasData) {\n const payload = (message.payload as IMessage)?.eventPayload;\n const qrId = payload?.responseId;\n\n if (!payload?.responseId) continue;\n\n const strokeData = extractStrokeData(payload);\n\n if (qrId && map[qrId]) {\n map[qrId]?.push(strokeData);\n } else {\n map[qrId] = [strokeData];\n }\n }\n\n return map;\n },\n );\n const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n const channelOptions = useMemo(\n () => ({\n channelId,\n ttl: type === 'canvas' ? 0 : 24,\n logger: logEvent,\n }),\n [channelId, logEvent, type],\n );\n\n const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n }, []);\n\n const onMessageReceive = useCallback(\n (messages: Array<IChannelMessage>, initialData?: boolean) => {\n const strokesPerWidgetMap: Record<string, Array<IActionData>> = {};\n\n messages.forEach(message => {\n const { payload } = message.message;\n const { eventPayload } = payload as IMessage;\n const qrId = eventPayload?.responseId as string;\n const strokes = eventPayload?.data;\n const userId = eventPayload?.userId;\n const canvasHeight = eventPayload?.height;\n const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n if (!initialData && widgetOnReceiveCallback) {\n widgetOnReceiveCallback({\n data: strokes,\n height: canvasHeight,\n userId,\n responseId: qrId,\n ~~gridName: eventPayload?.gridName,\n dimension: eventPayload?.dimension,\n~~ });\n } else {\n const strokeData = extractStrokeData(eventPayload);\n\n if (qrId && strokesPerWidgetMap[qrId]) {\n strokesPerWidgetMap[qrId]?.push(strokeData);\n } else {\n strokesPerWidgetMap[qrId] = [strokeData];\n }\n }\n });\n\n if (Object.keys(strokesPerWidgetMap).length > 0) {\n setInitialStrokesData(prevData => {\n const currentData = { ...prevData };\n\n Object.keys(strokesPerWidgetMap).forEach(key => {\n if (key && currentData[key]) {\n currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n } else {\n currentData[key] = strokesPerWidgetMap[key] ?? [];\n }\n });\n\n return currentData;\n });\n }\n },\n [],\n );\n\n const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n channelOptions,\n consumerFn: onMessageReceive,\n metadataRequired: type === 'whiteboard',\n });\n\n const closeChannel = useCallback(() => {\n if (channel) {\n channel.destroyChannel();\n }\n }, [channel]);\n\n return {\n publishStrokes: publish,\n channelStatus,\n closeChannel,\n initialStrokesData,\n registerCallback,\n setChannelMetadata,\n channelMetadata,\n };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","useCanvasSyncBroker","channelId","logEvent","initialCanvasData","type","initialStrokesData","setInitialStrokesData","useState","map","message","_a","qrId","strokeData","_b","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","prevData","currentData","key","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":";;~~AAyBA~~,MAAMA,IAAoB,CAACC,OAAoD;AAAA,EAC7E,QAAQA,EAAQ;AAAA,EAChB,MAAMA,EAAQ;AAAA,EACd,QAAQA,EAAQ;AAAA,EAChB,YAAYA,EAAQ;~~AAAA~~,~~EACpB,UAAUA,EAAQ;AAAA,EAClB,WAAWA,EAAQ;AACrB,~~IAEMC,IAAsB,CAC1BC,GACAC,GACAC,GACAC,IAAkB,aACf;AACG,QAAA,CAACC,GAAoBC,CAAqB,IAAIC;AAAA,IAClD,MAAM;;AACJ,YAAMC,IAAqC,CAAA;AAEvC,UAAA,CAACL,EAA0B,QAAAK;AAEpB,iBAAA,EAAE,SAAAC,EAAQ,KAAKN,GAAmB;AACrC,cAAAJ,KAAWW,IAAAD,EAAQ,YAAR,gBAAAC,EAA8B,cACzCC,IAAOZ,KAAA,gBAAAA,EAAS;AAElB,YAAA,EAACA,KAAA,QAAAA,EAAS,YAAY;AAEpB,cAAAa,IAAad,EAAkBC,CAAO;AAExC,QAAAY,KAAQH,EAAIG,CAAI,KACdE,IAAAL,EAAAG,CAAI,MAAJ,QAAAE,EAAO,KAAKD,KAEZJ,EAAAG,CAAI,IAAI,CAACC,CAAU;AAAA,MAE3B;AAEO,aAAAJ;AAAA,IACT;AAAA,EAAA,GAEIM,IAAkBC,EAAoD,CAAA,CAAE,GAExEC,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAhB;AAAA,MACA,KAAKG,MAAS,WAAW,IAAI;AAAA,MAC7B,QAAQF;AAAA,IAAA;AAAA,IAEV,CAACD,GAAWC,GAAUE,CAAI;AAAA,EAAA,GAGtBc,IAAmBC,EAAY,CAACR,GAAcS,MAAoC;AACtE,IAAAN,EAAA,UAAU,EAAE,GAAGA,EAAgB,SAAS,CAACH,CAAI,GAAGS;EAClE,GAAG,CAAE,CAAA,GAECC,IAAmBF;AAAA,IACvB,CAACG,GAAkCC,MAA0B;AAC3D,YAAMC,IAA0D,CAAA;AAEhE,MAAAF,EAAS,QAAQ,CAAWb,MAAA;;AACpB,cAAA,EAAE,SAAAV,EAAQ,IAAIU,EAAQ,SACtB,EAAE,cAAAgB,EAAiB,IAAA1B,GACnBY,IAAOc,KAAA,gBAAAA,EAAc,YACrBC,IAAUD,KAAA,gBAAAA,EAAc,MACxBE,IAASF,KAAA,gBAAAA,EAAc,QACvBG,IAAeH,KAAA,gBAAAA,EAAc,QAC7BI,IAA0Bf,EAAgB,QAAQH,CAAI;AAExD,YAAA,CAACY,KAAeM;AACM,UAAAA,EAAA;AAAA,YACtB,MAAMH;AAAA,YACN,QAAQE;AAAA,YACR,QAAAD;AAAA,YACA,YAAYhB;AAAA,~~YACZ,UAAUc,KAAA,gBAAAA,EAAc;AAAA,YACxB,WAAWA,KAAA,gBAAAA,EAAc;AAAA,~~UAAA,~~CAC1B~~;AAAA,aACI;AACC,~~gBAAAb~~,IAAad,EAAkB2B,CAAY;AAE7C,UAAAd,KAAQa,EAAoBb,CAAI,KACdD,IAAAc,EAAAb,CAAI,MAAJ,QAAAD,EAAO,KAAKE,KAEZY,EAAAb,CAAI,IAAI,CAACC,CAAU;AAAA,QAE3C;AAAA,MAAA,CACD,GAEG,OAAO,KAAKY,CAAmB,EAAE,SAAS,KAC5ClB,EAAsB,CAAYwB,MAAA;AAC1B,cAAAC,IAAc,EAAE,GAAGD;AAEzB,sBAAO,KAAKN,CAAmB,EAAE,QAAQ,CAAOQ,MAAA;;AAC1C,UAAAA,KAAOD,EAAYC,CAAG,KACZtB,IAAAqB,EAAAC,CAAG,MAAH,QAAAtB,EAAM,KAAK,GAAIc,EAAoBQ,CAAG,KAAK,CAAA,KAEvDD,EAAYC,CAAG,IAAIR,EAAoBQ,CAAG,KAAK,CAAA;AAAA,QACjD,CACD,GAEMD;AAAA,MAAA,CACR;AAAA,IAEL;AAAA,IACA,CAAC;AAAA,EAAA,GAGG,EAAE,SAAAE,GAAS,eAAAC,GAAe,SAAAC,GAAS,iBAAAC,GAAiB,oBAAAC,MACxDC,EAA2D;AAAA,IACzD,gBAAAtB;AAAA,IACA,YAAYK;AAAA,IACZ,kBAAkBjB,MAAS;AAAA,EAAA,CAC5B,GAEGmC,IAAepB,EAAY,MAAM;AACrC,IAAIgB,KACFA,EAAQ,eAAe;AAAA,EACzB,GACC,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,gBAAgBF;AAAA,IAChB,eAAAC;AAAA,IACA,cAAAK;AAAA,IACA,oBAAAlC;AAAA,IACA,kBAAAa;AAAA,IACA,oBAAAmB;AAAA,IACA,iBAAAD;AAAA,EAAA;AAEJ,GAEAI,IAAexC;"}
1	+ {"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type {\n IActionData,\n ICanvasUpdateConfig,\n IPublishData,\n TCueCanvasChangeDataObject,\n TRenderAs,\n} from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n eventName: string;\n eventPayload: {\n responseId: string;\n data: TCueCanvasChangeDataObject;\n userId: string;\n height: number;\n };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n userId: payload.userId,\n data: payload.data,\n height: payload.height,\n responseId: payload.responseId,\n});\n\nconst useCanvasSyncBroker = (\n channelId: string,\n logEvent: (type: string, payload?: Record<string, unknown>) => void,\n initialCanvasData?: Array<IChannelMessage>,\n type: TRenderAs = 'canvas',\n) => {\n const [initialStrokesData, setInitialStrokesData] = useState<Record<string, IActionData[]>>(\n () => {\n const map: Record<string, IActionData[]> = {};\n\n if (!initialCanvasData) return map;\n\n for (const { message } of initialCanvasData) {\n const payload = (message.payload as IMessage)?.eventPayload;\n const qrId = payload?.responseId;\n\n if (!payload?.responseId) continue;\n\n const strokeData = extractStrokeData(payload);\n\n if (qrId && map[qrId]) {\n map[qrId]?.push(strokeData);\n } else {\n map[qrId] = [strokeData];\n }\n }\n\n return map;\n },\n );\n const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n const channelOptions = useMemo(\n () => ({\n channelId,\n ttl: type === 'canvas' ? 0 : 24,\n logger: logEvent,\n }),\n [channelId, logEvent, type],\n );\n\n const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n }, []);\n\n const onMessageReceive = useCallback(\n (messages: Array<IChannelMessage>, initialData?: boolean) => {\n const strokesPerWidgetMap: Record<string, Array<IActionData>> = {};\n\n messages.forEach(message => {\n const { payload } = message.message;\n const { eventPayload } = payload as IMessage;\n const qrId = eventPayload?.responseId as string;\n const strokes = eventPayload?.data;\n const userId = eventPayload?.userId;\n const canvasHeight = eventPayload?.height;\n const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n if (!initialData && widgetOnReceiveCallback) {\n widgetOnReceiveCallback({\n data: strokes,\n height: canvasHeight,\n userId,\n responseId: qrId,\n });\n } else {\n const strokeData = extractStrokeData(eventPayload);\n\n if (qrId && strokesPerWidgetMap[qrId]) {\n strokesPerWidgetMap[qrId]?.push(strokeData);\n } else {\n strokesPerWidgetMap[qrId] = [strokeData];\n }\n }\n });\n\n if (Object.keys(strokesPerWidgetMap).length > 0) {\n setInitialStrokesData(prevData => {\n const currentData = { ...prevData };\n\n Object.keys(strokesPerWidgetMap).forEach(key => {\n if (key && currentData[key]) {\n currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n } else {\n currentData[key] = strokesPerWidgetMap[key] ?? [];\n }\n });\n\n return currentData;\n });\n }\n },\n [],\n );\n\n const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n channelOptions,\n consumerFn: onMessageReceive,\n metadataRequired: type === 'whiteboard',\n });\n\n const closeChannel = useCallback(() => {\n if (channel) {\n channel.destroyChannel();\n }\n }, [channel]);\n\n return {\n publishStrokes: publish,\n channelStatus,\n closeChannel,\n initialStrokesData,\n registerCallback,\n setChannelMetadata,\n channelMetadata,\n };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","useCanvasSyncBroker","channelId","logEvent","initialCanvasData","type","initialStrokesData","setInitialStrokesData","useState","map","message","_a","qrId","strokeData","_b","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","prevData","currentData","key","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":";;AAqBA,MAAMA,IAAoB,CAACC,OAAoD;AAAA,EAC7E,QAAQA,EAAQ;AAAA,EAChB,MAAMA,EAAQ;AAAA,EACd,QAAQA,EAAQ;AAAA,EAChB,YAAYA,EAAQ;AACtB,IAEMC,IAAsB,CAC1BC,GACAC,GACAC,GACAC,IAAkB,aACf;AACG,QAAA,CAACC,GAAoBC,CAAqB,IAAIC;AAAA,IAClD,MAAM;;AACJ,YAAMC,IAAqC,CAAA;AAEvC,UAAA,CAACL,EAA0B,QAAAK;AAEpB,iBAAA,EAAE,SAAAC,EAAQ,KAAKN,GAAmB;AACrC,cAAAJ,KAAWW,IAAAD,EAAQ,YAAR,gBAAAC,EAA8B,cACzCC,IAAOZ,KAAA,gBAAAA,EAAS;AAElB,YAAA,EAACA,KAAA,QAAAA,EAAS,YAAY;AAEpB,cAAAa,IAAad,EAAkBC,CAAO;AAExC,QAAAY,KAAQH,EAAIG,CAAI,KACdE,IAAAL,EAAAG,CAAI,MAAJ,QAAAE,EAAO,KAAKD,KAEZJ,EAAAG,CAAI,IAAI,CAACC,CAAU;AAAA,MAE3B;AAEO,aAAAJ;AAAA,IACT;AAAA,EAAA,GAEIM,IAAkBC,EAAoD,CAAA,CAAE,GAExEC,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAhB;AAAA,MACA,KAAKG,MAAS,WAAW,IAAI;AAAA,MAC7B,QAAQF;AAAA,IAAA;AAAA,IAEV,CAACD,GAAWC,GAAUE,CAAI;AAAA,EAAA,GAGtBc,IAAmBC,EAAY,CAACR,GAAcS,MAAoC;AACtE,IAAAN,EAAA,UAAU,EAAE,GAAGA,EAAgB,SAAS,CAACH,CAAI,GAAGS;EAClE,GAAG,CAAE,CAAA,GAECC,IAAmBF;AAAA,IACvB,CAACG,GAAkCC,MAA0B;AAC3D,YAAMC,IAA0D,CAAA;AAEhE,MAAAF,EAAS,QAAQ,CAAWb,MAAA;;AACpB,cAAA,EAAE,SAAAV,EAAQ,IAAIU,EAAQ,SACtB,EAAE,cAAAgB,EAAiB,IAAA1B,GACnBY,IAAOc,KAAA,gBAAAA,EAAc,YACrBC,IAAUD,KAAA,gBAAAA,EAAc,MACxBE,IAASF,KAAA,gBAAAA,EAAc,QACvBG,IAAeH,KAAA,gBAAAA,EAAc,QAC7BI,IAA0Bf,EAAgB,QAAQH,CAAI;AAExD,YAAA,CAACY,KAAeM;AACM,UAAAA,EAAA;AAAA,YACtB,MAAMH;AAAA,YACN,QAAQE;AAAA,YACR,QAAAD;AAAA,YACA,YAAYhB;AAAA,UAAA,CACb;AAAA,aACI;AACC,gBAAAC,IAAad,EAAkB2B,CAAY;AAE7C,UAAAd,KAAQa,EAAoBb,CAAI,KACdD,IAAAc,EAAAb,CAAI,MAAJ,QAAAD,EAAO,KAAKE,KAEZY,EAAAb,CAAI,IAAI,CAACC,CAAU;AAAA,QAE3C;AAAA,MAAA,CACD,GAEG,OAAO,KAAKY,CAAmB,EAAE,SAAS,KAC5ClB,EAAsB,CAAYwB,MAAA;AAC1B,cAAAC,IAAc,EAAE,GAAGD;AAEzB,sBAAO,KAAKN,CAAmB,EAAE,QAAQ,CAAOQ,MAAA;;AAC1C,UAAAA,KAAOD,EAAYC,CAAG,KACZtB,IAAAqB,EAAAC,CAAG,MAAH,QAAAtB,EAAM,KAAK,GAAIc,EAAoBQ,CAAG,KAAK,CAAA,KAEvDD,EAAYC,CAAG,IAAIR,EAAoBQ,CAAG,KAAK,CAAA;AAAA,QACjD,CACD,GAEMD;AAAA,MAAA,CACR;AAAA,IAEL;AAAA,IACA,CAAC;AAAA,EAAA,GAGG,EAAE,SAAAE,GAAS,eAAAC,GAAe,SAAAC,GAAS,iBAAAC,GAAiB,oBAAAC,MACxDC,EAA2D;AAAA,IACzD,gBAAAtB;AAAA,IACA,YAAYK;AAAA,IACZ,kBAAkBjB,MAAS;AAAA,EAAA,CAC5B,GAEGmC,IAAepB,EAAY,MAAM;AACrC,IAAIgB,KACFA,EAAQ,eAAe;AAAA,EACzB,GACC,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,gBAAgBF;AAAA,IAChB,eAAAC;AAAA,IACA,cAAAK;AAAA,IACA,oBAAAlC;AAAA,IACA,kBAAAa;AAAA,IACA,oBAAAmB;AAAA,IACA,iBAAAD;AAAA,EAAA;AAEJ,GAEAI,IAAexC;"}

package/dist/features/cue-canvas/hooks/use-config-updater.js CHANGED Viewed

@@ -1,12 +1,19 @@
-import { useEffect as m } from "react";
-import { useCueCanvasActions as u } from "./use-cue-canvas-actions.js";
-const N = (e, r) => {
-  const { activeInstance: t } = u();
-  m(() => {
-    !t || r === "canvas" || (e != null && e.gridName && t.changeGrid(e == null ? void 0 : e.gridName), e != null && e.dimesion && t.setViewPort(e == null ? void 0 : e.dimesion));
-  }, [e, t, r]);
+import { useEffect as u } from "react";
+import { TOOLBAR_HEIGHT as r, WHITEBOARD_DEFAULT_HEIGHT as l } from "../constants/constants.js";
+import { useCueCanvasActions as p } from "./use-cue-canvas-actions.js";
+const E = (e, h) => {
+  const { activeInstance: t, setActiveColor: d, setActiveTool: m } = p();
+  u(() => {
+    if (!(!t || h === "canvas") && (e != null && e.gridName && t.changeGrid(e == null ? void 0 : e.gridName), e != null && e.dimesion && t.setViewPort(e == null ? void 0 : e.dimesion), e != null && e.tool && m(e == null ? void 0 : e.tool), e != null && e.color && d(e == null ? void 0 : e.color), (e != null && e.height || (e == null ? void 0 : e.height) === void 0) && ((e == null ? void 0 : e.height) === void 0 || (e == null ? void 0 : e.height) > window.innerHeight - r))) {
+      const H = Math.min(
+        l - r,
+        window.innerHeight - r
+      );
+      t.updateHeight(H);
+    }
+  }, [e, t, h, d, m]);
 };
 export {
-  N as default
+  E as default
 };
 //# sourceMappingURL=use-config-updater.js.map

package/dist/features/cue-canvas/hooks/use-config-updater.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-config-updater.js","sources":["../../../../src/features/cue-canvas/hooks/use-config-updater.ts"],"sourcesContent":["import type { ICanvasUpdateConfig, TRenderAs } from '../types/cue-canvas';\n\nimport { useEffect } from 'react';\n\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\nconst useConfigUpdater = (\n canvasConfig: ICanvasUpdateConfig \| null \| undefined,\n renderAs: TRenderAs,\n) => {\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n\n useEffect(() => {\n if (!cueCanvas \|\| renderAs === 'canvas') {\n return;\n }\n\n if (canvasConfig?.gridName) {\n cueCanvas.changeGrid(canvasConfig?.gridName);\n }\n\n if (canvasConfig?.dimesion) {\n cueCanvas.setViewPort(canvasConfig?.dimesion);\n }\n }, [canvasConfig, cueCanvas, renderAs]);\n};\n\nexport default useConfigUpdater;\n"],"names":["useConfigUpdater","canvasConfig","renderAs","cueCanvas","useCueCanvasActions","useEffect"],"mappings":"~~;;AAMM~~,MAAAA,IAAmB,CACvBC,GACAC,MACG;AACH,QAAM,EAAE,gBAAgBC,~~EAAU~~,~~IAAIC~~,~~EAAoB~~;~~AAE1D~~,EAAAC,EAAU,MAAM;AACV,~~IAAA~~,~~CAACF~~,KAAaD,MAAa,~~aAI3BD~~,KAAA,QAAAA,EAAc,YACNE,EAAA,WAAWF,KAAA,gBAAAA,EAAc,QAAQ,GAGzCA,KAAA,QAAAA,EAAc,YACNE,EAAA,YAAYF,KAAA,gBAAAA,EAAc,QAAQ;AAAA,~~EAE7C~~,~~GAAA~~,~~CAACA~~,GAAcE,GAAWD,~~CAAQ~~,CAAC;~~AACxC~~;"}
1	+ {"version":3,"file":"use-config-updater.js","sources":["../../../../src/features/cue-canvas/hooks/use-config-updater.ts"],"sourcesContent":["import type { ICanvasUpdateConfig, TRenderAs } from '../types/cue-canvas';\n\nimport { useEffect } from 'react';\n\nimport { TOOLBAR_HEIGHT, WHITEBOARD_DEFAULT_HEIGHT } from '../constants/constants';\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\nconst useConfigUpdater = (\n canvasConfig: ICanvasUpdateConfig \| null \| undefined,\n renderAs: TRenderAs,\n) => {\n const { activeInstance: cueCanvas, setActiveColor, setActiveTool } = useCueCanvasActions();\n\n useEffect(() => {\n if (!cueCanvas \|\| renderAs === 'canvas') {\n return;\n }\n\n if (canvasConfig?.gridName) {\n cueCanvas.changeGrid(canvasConfig?.gridName);\n }\n\n if (canvasConfig?.dimesion) {\n cueCanvas.setViewPort(canvasConfig?.dimesion);\n }\n\n if (canvasConfig?.tool) {\n setActiveTool(canvasConfig?.tool);\n }\n\n if (canvasConfig?.color) {\n setActiveColor(canvasConfig?.color);\n }\n\n if (canvasConfig?.height \|\| canvasConfig?.height === undefined) {\n if (\n canvasConfig?.height === undefined \|\|\n canvasConfig?.height > window.innerHeight - TOOLBAR_HEIGHT\n ) {\n const canvasHeight = Math.min(\n WHITEBOARD_DEFAULT_HEIGHT - TOOLBAR_HEIGHT,\n window.innerHeight - TOOLBAR_HEIGHT,\n );\n\n cueCanvas.updateHeight(canvasHeight);\n }\n }\n }, [canvasConfig, cueCanvas, renderAs, setActiveColor, setActiveTool]);\n};\n\nexport default useConfigUpdater;\n"],"names":["useConfigUpdater","canvasConfig","renderAs","cueCanvas","setActiveColor","setActiveTool","useCueCanvasActions","useEffect","TOOLBAR_HEIGHT","canvasHeight","WHITEBOARD_DEFAULT_HEIGHT"],"mappings":";;;AAOM,MAAAA,IAAmB,CACvBC,GACAC,MACG;AACH,QAAM,EAAE,gBAAgBC,GAAW,gBAAAC,GAAgB,eAAAC,EAAA,IAAkBC;AAErE,EAAAC,EAAU,MAAM;AACV,QAAA,GAACJ,KAAaD,MAAa,cAI3BD,KAAA,QAAAA,EAAc,YACNE,EAAA,WAAWF,KAAA,gBAAAA,EAAc,QAAQ,GAGzCA,KAAA,QAAAA,EAAc,YACNE,EAAA,YAAYF,KAAA,gBAAAA,EAAc,QAAQ,GAG1CA,KAAA,QAAAA,EAAc,QAChBI,EAAcJ,KAAA,gBAAAA,EAAc,IAAI,GAG9BA,KAAA,QAAAA,EAAc,SAChBG,EAAeH,KAAA,gBAAAA,EAAc,KAAK,IAGhCA,KAAA,QAAAA,EAAc,WAAUA,KAAA,gBAAAA,EAAc,YAAW,aAEjDA,KAAA,gBAAAA,EAAc,YAAW,WACzBA,KAAA,gBAAAA,EAAc,UAAS,OAAO,cAAcO,KAC5C;AACA,YAAMC,IAAe,KAAK;AAAA,QACxBC,IAA4BF;AAAA,QAC5B,OAAO,cAAcA;AAAA,MAAA;AAGvB,MAAAL,EAAU,aAAaM,CAAY;AAAA,IACrC;AAAA,EACF,GACC,CAACR,GAAcE,GAAWD,GAAUE,GAAgBC,CAAa,CAAC;AACvE;"}

package/dist/features/cue-canvas/toolbar/color-palette.js CHANGED Viewed

@@ -1,49 +1,58 @@
-import { jsx as r, Fragment as a } from "react/jsx-runtime";
-import { memo as c, useCallback as d, useMemo as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { memo as $, useCallback as d, useMemo as C } from "react";
 import h from "../../ui/buttons/clickable/clickable.js";
-import $ from "../../ui/layout/flex-view.js";
-import { getColorsForUser as C } from "../cue-canvas-helpers.js";
-import { ColorPicker as f, StyledCheckIcon as g } from "../cue-cavas-styled.js";
-const w = c(({ setActiveColor: t, activeColor: o, userType: n }) => {
-  const i = d(
+import l from "../../ui/layout/flex-view.js";
+import { getColorsForUser as f } from "../cue-canvas-helpers.js";
+import { ColorPicker as p, StyledCheckIcon as u } from "../cue-cavas-styled.js";
+const y = $((c) => {
+  const { setActiveColor: t, activeColor: i, userType: n, renderAs: o } = c, s = d(
     (e) => {
       t(e);
     },
     [t]
-  ), l = s(() => C(n), [n]);
-  return /* @__PURE__ */ r(a, { children: l.map((e, m) => /* @__PURE__ */ r(
-    h,
+  ), a = C(() => f(n, o), [n, o]);
+  return /* @__PURE__ */ r(
+    l,
     {
-      onClick: () => i(e),
-      label: `Color Picker - ${e}`,
-      children: /* @__PURE__ */ r(
-        $,
+      $flexDirection: "row",
+      $flexWrap: !0,
+      $width: o === "canvas" ? 66 : 200,
+      $position: "relative",
+      children: a.map((e, m) => /* @__PURE__ */ r(
+        h,
         {
-          $width: 22,
-          $height: 22,
-          $borderRadius: 11,
-          $justifyContent: "center",
-          $background: o === e ? "BLACK" : "WHITE",
-          $alignItems: "center",
+          onClick: () => s(e),
+          label: `Color Picker - ${e}`,
           children: /* @__PURE__ */ r(
-            f,
+            l,
             {
-              $width: 20,
-              $height: 20,
-              $borderRadius: 10,
-              $color: e,
-              $alignItems: "center",
+              $width: 22,
+              $height: 22,
+              $borderRadius: 11,
               $justifyContent: "center",
-              children: o === e && /* @__PURE__ */ r(g, {})
+              $background: i === e ? "BLACK" : "WHITE",
+              $alignItems: "center",
+              children: /* @__PURE__ */ r(
+                p,
+                {
+                  $width: 20,
+                  $height: 20,
+                  $borderRadius: 10,
+                  $color: e,
+                  $alignItems: "center",
+                  $justifyContent: "center",
+                  children: i === e && /* @__PURE__ */ r(u, {})
+                }
+              )
             }
           )
-        }
-      )
-    },
-    m
-  )) });
+        },
+        m
+      ))
+    }
+  );
 });
 export {
-  w as default
+  y as default
 };
 //# sourceMappingURL=color-palette.js.map

package/dist/features/cue-canvas/toolbar/color-palette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n setActiveColor: (color: TCueCanvasColors) => void;\n activeColor: TCueCanvasColors;\n userType: TUserTypes;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(({ setActiveColor, activeColor, userType }) => {\n const handleColorChange = useCallback(\n (color: TCueCanvasColors) => {\n setActiveColor(color);\n },\n [setActiveColor],\n );\n const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n return (\n ~~<>\~~n {colors.map((color, index) => (\n <Clickable\n key={index}\n onClick={() => handleColorChange(color)}\n label={`Color Picker - ${color}`}\n >\n <FlexView\n $width={22}\n $height={22}\n $borderRadius={11}\n $justifyContent=\"center\"\n $background={activeColor === color ? 'BLACK' : 'WHITE'}\n $alignItems=\"center\"\n >\n <ColorPicker\n $width={20}\n $height={20}\n $borderRadius={10}\n $color={color}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {activeColor === color && <StyledCheckIcon />}\n </ColorPicker>\n </FlexView>\n </Clickable>\n ))}\n ~~</>\~~n );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","setActiveColor","activeColor","userType","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","~~Fragment~~","index","Clickable","~~FlexView","~~ColorPicker","StyledCheckIcon"],"mappings":";;;;;;~~AAgBA~~,~~MAAMA~~,IAAwCC,EAAK,~~CAAC~~,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,~~QAAe;AAChG~~,~~QAAMC~~,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,~~MAAAL~~,~~EAAeK~~,CAAK;AAAA,IACtB;AAAA,IACA,~~CAACL~~,CAAc;AAAA,EAAA,~~GAEXM~~,IAASC,EAAQ,MAAMC,~~EAAiBN~~,CAAQ,GAAG,~~CAACA~~,CAAQ,CAAC;~~AAEnE~~,~~SAEK~~,gBAAAO,~~EAAAC~~,~~GAAA~~,~~EAAA~~,~~UAAAJ~~,~~EAAO~~,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,~~IAACG~~;AAAA,~~IAAA~~;AAAA,~~MAEC~~,SAAS,MAAMT,EAAkBE,CAAK;AAAA,~~MACtC~~,OAAO,kBAAkBA,CAAK;AAAA,~~MAE9B~~,UAAA,gBAAAI;AAAA,~~QAACI~~;AAAA,~~QAAA~~;AAAA,~~UACC~~,QAAQ;AAAA,~~UACR~~,SAAS;AAAA,~~UACT~~,eAAe;AAAA,~~UACf~~,iBAAgB;AAAA,~~UAChB~~,~~aAAaZ~~,~~MAAgBI~~,IAAQ,UAAU;AAAA,~~UAC~~/C,aAAY;AAAA,~~UAEZ~~,UAAA,gBAAAI;AAAA,~~YAACK~~;AAAA,~~YAAA~~;AAAA,~~cACC~~,QAAQ;AAAA,~~cACR~~,SAAS;AAAA,~~cACT~~,eAAe;AAAA,~~cACf~~,~~QAAQT~~;AAAA,~~cACR~~,aAAY;AAAA,~~cACZ~~,iBAAgB;AAAA,~~cAEf~~,~~UAAAJ~~,~~MAAgBI~~,KAAS,gBAAAI,~~EAACM~~,GAAgB,CAAA,CAAA;AAAA,~~YAAA~~;AAAA,~~UAC7C~~;AAAA,~~QAAA~~;AAAA,~~MACF~~;AAAA,~~IAAA~~;AAAA,~~IAtBKJ~~;AAAA,~~EAwBR~~,~~CAAA~~,~~EACH~~,~~CAAA~~;~~AAEJ~~,CAAC;"}
1	+ {"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n setActiveColor: (color: TCueCanvasColors) => void;\n activeColor: TCueCanvasColors;\n userType: TUserTypes;\n renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n const { setActiveColor, activeColor, userType, renderAs } = props;\n const handleColorChange = useCallback(\n (color: TCueCanvasColors) => {\n setActiveColor(color);\n },\n [setActiveColor],\n );\n const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n return (\n <FlexView\n $flexDirection=\"row\"\n $flexWrap\n $width={renderAs === 'canvas' ? 66 : 200}\n $position=\"relative\"\n >\n {colors.map((color, index) => (\n <Clickable\n key={index}\n onClick={() => handleColorChange(color)}\n label={`Color Picker - ${color}`}\n >\n <FlexView\n $width={22}\n $height={22}\n $borderRadius={11}\n $justifyContent=\"center\"\n $background={activeColor === color ? 'BLACK' : 'WHITE'}\n $alignItems=\"center\"\n >\n <ColorPicker\n $width={20}\n $height={20}\n $borderRadius={10}\n $color={color}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {activeColor === color && <StyledCheckIcon />}\n </ColorPicker>\n </FlexView>\n </Clickable>\n ))}\n </FlexView>\n );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAiBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtDK,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK;AAAA,IACtB;AAAA,IACA,CAACN,CAAc;AAAA,EAAA,GAEXO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaV,MAAgBK,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAL,MAAgBK,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/features/cue-canvas/toolbar/color-picker-menu.js CHANGED Viewed

@@ -1,20 +1,20 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { memo as a, useRef as m } from "react";
-import d from "../../ui/buttons/clickable/clickable.js";
-import u from "../../ui/hooks/use-context-menu-click-handler.js";
-import $ from "../../ui/layout/flex-view.js";
-import { ColorPicker as f, PaletteWrapper as C } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as p } from "../hooks/use-cue-canvas-actions.js";
-import b from "./color-palette.js";
-const W = a(({ userType: i }) => {
-  const o = m(null), { activeColor: r, setActiveColor: l, isWritingToolActive: t } = p(), { menuVisible: n, onMenuClick: c } = u(
-    o,
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { memo as s, useRef as m } from "react";
+import u from "../../ui/buttons/clickable/clickable.js";
+import $ from "../../ui/hooks/use-context-menu-click-handler.js";
+import d from "../../ui/layout/flex-view.js";
+import { ColorPicker as p, PaletteWrapper as f } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as C } from "../hooks/use-cue-canvas-actions.js";
+import h from "./color-palette.js";
+const j = s(({ userType: i, renderAs: e }) => {
+  const r = m(null), { activeColor: t, setActiveColor: l } = C(), { menuVisible: n, onMenuClick: c } = $(
+    r,
     void 0,
     !0,
     void 0
   );
-  return /* @__PURE__ */ s(
-    $,
+  return /* @__PURE__ */ a(
+    d,
     {
       $width: 32,
       $height: 32,
@@ -22,32 +22,35 @@ const W = a(({ userType: i }) => {
       $justifyContent: "center",
       $borderRadius: 16,
       $background: "WHITE",
+      $position: "relative",
       children: [
-        /* @__PURE__ */ e(d, { onClick: c, label: "Color Picker", disabled: !t, children: /* @__PURE__ */ e(
-          f,
+        /* @__PURE__ */ o(u, { onClick: c, label: "Color Picker", children: /* @__PURE__ */ o(
+          p,
           {
             $width: 22,
             $height: 22,
             $borderRadius: 11,
-            $color: r,
-            $opacity: t ? 1 : 0.5,
-            ref: o
+            $color: t,
+            $opacity: 1,
+            ref: r
           }
         ) }),
-        n && /* @__PURE__ */ e(
-          C,
+        n && /* @__PURE__ */ o(
+          f,
           {
             $background: "WHITE",
             $gutterX: 0.5,
             $gapX: 0.5,
             $borderRadius: 10,
             $flexDirection: "row",
-            children: /* @__PURE__ */ e(
-              b,
+            $top: e === "canvas" ? -38 : -82,
+            children: /* @__PURE__ */ o(
+              h,
               {
                 setActiveColor: l,
-                activeColor: r,
-                userType: i
+                activeColor: t,
+                userType: i,
+                renderAs: e
               }
             )
           }
@@ -57,6 +60,6 @@ const W = a(({ userType: i }) => {
   );
 });
 export {
-  W as default
+  j as default
 };
 //# sourceMappingURL=color-picker-menu.js.map