@cuemath/leap 3.1.8-aa1 → 3.1.8-aa2
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.
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { memo as $, useCallback as d, useMemo as
|
|
3
|
-
import
|
|
2
|
+
import { memo as $, useCallback as d, useMemo as h } from "react";
|
|
3
|
+
import f from "../../ui/buttons/clickable/clickable.js";
|
|
4
4
|
import l from "../../ui/layout/flex-view.js";
|
|
5
|
-
import { getColorsForUser as
|
|
6
|
-
import { ColorPicker as
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
import { getColorsForUser as p } from "../cue-canvas-helpers.js";
|
|
6
|
+
import { ColorPicker as u, StyledCheckIcon as g } from "../cue-cavas-styled.js";
|
|
7
|
+
import { useCueCanvasActions as k } from "../hooks/use-cue-canvas-actions.js";
|
|
8
|
+
const j = $((c) => {
|
|
9
|
+
const { setActiveColor: i, activeColor: n, userType: s, renderAs: o } = c, { activeInstance: t } = k(), a = d(
|
|
9
10
|
(e) => {
|
|
10
|
-
t(e);
|
|
11
|
+
i(e), t == null || t.setColor(e);
|
|
11
12
|
},
|
|
12
|
-
[t]
|
|
13
|
-
),
|
|
13
|
+
[t, i]
|
|
14
|
+
), m = h(() => p(s, o), [s, o]);
|
|
14
15
|
return /* @__PURE__ */ r(
|
|
15
16
|
l,
|
|
16
17
|
{
|
|
@@ -18,10 +19,10 @@ const y = $((c) => {
|
|
|
18
19
|
$flexWrap: !0,
|
|
19
20
|
$width: o === "canvas" ? 66 : 200,
|
|
20
21
|
$position: "relative",
|
|
21
|
-
children:
|
|
22
|
-
|
|
22
|
+
children: m.map((e, C) => /* @__PURE__ */ r(
|
|
23
|
+
f,
|
|
23
24
|
{
|
|
24
|
-
onClick: () =>
|
|
25
|
+
onClick: () => a(e),
|
|
25
26
|
label: `Color Picker - ${e}`,
|
|
26
27
|
children: /* @__PURE__ */ r(
|
|
27
28
|
l,
|
|
@@ -30,10 +31,10 @@ const y = $((c) => {
|
|
|
30
31
|
$height: 22,
|
|
31
32
|
$borderRadius: 11,
|
|
32
33
|
$justifyContent: "center",
|
|
33
|
-
$background:
|
|
34
|
+
$background: n === e ? "BLACK" : "WHITE",
|
|
34
35
|
$alignItems: "center",
|
|
35
36
|
children: /* @__PURE__ */ r(
|
|
36
|
-
|
|
37
|
+
u,
|
|
37
38
|
{
|
|
38
39
|
$width: 20,
|
|
39
40
|
$height: 20,
|
|
@@ -41,18 +42,18 @@ const y = $((c) => {
|
|
|
41
42
|
$color: e,
|
|
42
43
|
$alignItems: "center",
|
|
43
44
|
$justifyContent: "center",
|
|
44
|
-
children:
|
|
45
|
+
children: n === e && /* @__PURE__ */ r(g, {})
|
|
45
46
|
}
|
|
46
47
|
)
|
|
47
48
|
}
|
|
48
49
|
)
|
|
49
50
|
},
|
|
50
|
-
|
|
51
|
+
C
|
|
51
52
|
))
|
|
52
53
|
}
|
|
53
54
|
);
|
|
54
55
|
});
|
|
55
56
|
export {
|
|
56
|
-
|
|
57
|
+
j as default
|
|
57
58
|
};
|
|
58
59
|
//# sourceMappingURL=color-palette.js.map
|
|
@@ -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, 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":"
|
|
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';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\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 { activeInstance: cueCanvas } = useCueCanvasActions();\n const handleColorChange = useCallback(\n (color: TCueCanvasColors) => {\n setActiveColor(color);\n cueCanvas?.setColor(color);\n },\n [cueCanvas, 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","cueCanvas","useCueCanvasActions","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtD,EAAE,gBAAgBK,EAAU,IAAIC,EAAoB,GACpDC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAR,EAAeQ,CAAK,GACpBJ,KAAA,QAAAA,EAAW,SAASI;AAAA,IACtB;AAAA,IACA,CAACJ,GAAWJ,CAAc;AAAA,EAAA,GAEtBS,IAASC,EAAQ,MAAMC,EAAiBT,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQV,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOM,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,aAAaZ,MAAgBO,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,UAAAP,MAAgBO,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;"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { jsx as i, jsxs as
|
|
2
|
-
import { memo as
|
|
1
|
+
import { jsx as i, jsxs as m } from "react/jsx-runtime";
|
|
2
|
+
import { memo as c, useEffect as f } from "react";
|
|
3
3
|
import u from "../../ui/layout/flex-view.js";
|
|
4
|
-
import { getColorsForUser as
|
|
4
|
+
import { getColorsForUser as C, getUserTools as p } from "../cue-canvas-helpers.js";
|
|
5
5
|
import { useCueCanvasActions as v } from "../hooks/use-cue-canvas-actions.js";
|
|
6
6
|
import x from "./color-picker-menu.js";
|
|
7
7
|
import b from "./tool.js";
|
|
8
8
|
import d from "./whiteboard-toolbar.js";
|
|
9
|
-
const $ =
|
|
10
|
-
const s =
|
|
9
|
+
const $ = c(({ userType: t, renderAs: r }) => {
|
|
10
|
+
const s = p(t, r), { activeInstance: o, activeTool: a, activeColor: l } = v(), e = C(t, r);
|
|
11
11
|
return f(() => {
|
|
12
|
-
|
|
13
|
-
}, [
|
|
12
|
+
o && (!e.includes(l) && e[0] ? o.setColor(e[0]) : o.setColor(l), o.setTool(a));
|
|
13
|
+
}, [o]), r === "whiteboard" ? /* @__PURE__ */ i(d, { tools: s, userType: t }) : /* @__PURE__ */ m(u, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
|
|
14
14
|
s.map((n) => /* @__PURE__ */ i(b, { tool: n, shouldAnimate: !0 }, n)),
|
|
15
|
-
/* @__PURE__ */ i(x, { userType:
|
|
15
|
+
/* @__PURE__ */ i(x, { userType: t, renderAs: "canvas" })
|
|
16
16
|
] });
|
|
17
17
|
}), k = $;
|
|
18
18
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser, getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n const tools = getUserTools(userType, renderAs);\n const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n const colors = getColorsForUser(userType, renderAs);\n\n useEffect(() => {\n if (cueCanvas) {\n if (!colors.includes(activeColor) && colors[0]) {\n cueCanvas.setColor(colors[0]);\n }\n cueCanvas.setTool(activeTool);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [cueCanvas]);\n\n if (renderAs === 'whiteboard') {\n return <WhiteboardToolbar tools={tools} userType={userType} />;\n }\n\n return (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n {tools.map(tool => (\n <Tool tool={tool} key={tool} shouldAnimate />\n ))}\n <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n </FlexView>\n );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","colors","getColorsForUser","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC,KACzDC,IAASC,EAAiBT,GAAUC,CAAQ;
|
|
1
|
+
{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser, getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n const tools = getUserTools(userType, renderAs);\n const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n const colors = getColorsForUser(userType, renderAs);\n\n // This effect ensures that the selected tool and color are applied to the cueCanvas instance\n // whenever it changes. For example, if a user selects a tool and color, then navigates to a\n // different question (causing a new cueCanvas instance), the same tool and color will be set\n // on the new instance.\n useEffect(() => {\n if (cueCanvas) {\n if (!colors.includes(activeColor) && colors[0]) {\n cueCanvas.setColor(colors[0]);\n } else {\n cueCanvas.setColor(activeColor);\n }\n cueCanvas.setTool(activeTool);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [cueCanvas]);\n\n if (renderAs === 'whiteboard') {\n return <WhiteboardToolbar tools={tools} userType={userType} />;\n }\n\n return (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n {tools.map(tool => (\n <Tool tool={tool} key={tool} shouldAnimate />\n ))}\n <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n </FlexView>\n );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","colors","getColorsForUser","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC,KACzDC,IAASC,EAAiBT,GAAUC,CAAQ;AAkBlD,SAZAS,EAAU,MAAM;AACd,IAAIN,MACE,CAACI,EAAO,SAASF,CAAW,KAAKE,EAAO,CAAC,IACjCJ,EAAA,SAASI,EAAO,CAAC,CAAC,IAE5BJ,EAAU,SAASE,CAAW,GAEhCF,EAAU,QAAQC,CAAU;AAAA,EAC9B,GAEC,CAACD,CAAS,CAAC,GAEVH,MAAa,eACR,gBAAAU,EAACC,GAAkB,EAAA,OAAAV,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAa,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMZ,EAAA,IAAI,OACR,gBAAAS,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAjB,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDkB,IAAepB;"}
|