@cuemath/leap 3.0.22-aa0 → 3.0.22-aa12
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.
- package/dist/features/cue-canvas/cue-cavas-styled.js +30 -27
- package/dist/features/cue-canvas/cue-cavas-styled.js.map +1 -1
- package/dist/features/cue-canvas/sidebar/homework/homework-request.js +26 -18
- package/dist/features/cue-canvas/sidebar/homework/homework-request.js.map +1 -1
- package/dist/features/cue-canvas/sidebar/homework/homework.js +33 -26
- package/dist/features/cue-canvas/sidebar/homework/homework.js.map +1 -1
- package/dist/features/cue-canvas/sidebar/puzzles/puzzles.js +14 -14
- package/dist/features/cue-canvas/sidebar/puzzles/puzzles.js.map +1 -1
- package/dist/features/cue-canvas/sidebar/puzzles/utils.js +68 -67
- package/dist/features/cue-canvas/sidebar/puzzles/utils.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.js +487 -489
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/assets/line-icons/icons/hw.js +0 -32
- package/dist/assets/line-icons/icons/hw.js.map +0 -1
|
@@ -10,7 +10,9 @@ import $ from "../../assets/line-icons/icons/undo.js";
|
|
|
10
10
|
import m from "../../assets/line-icons/icons/unlock.js";
|
|
11
11
|
import p from "../ui/layout/flex-view.js";
|
|
12
12
|
import { CANVAS_COLORS as c } from "./constants/constants.js";
|
|
13
|
-
const
|
|
13
|
+
const W = i(p)`
|
|
14
|
+
border: 2px solid;
|
|
15
|
+
`, S = i(u)(({
|
|
14
16
|
theme: r,
|
|
15
17
|
$active: o,
|
|
16
18
|
$activeColor: t,
|
|
@@ -79,7 +81,7 @@ const S = i(u)(({
|
|
|
79
81
|
}
|
|
80
82
|
`}
|
|
81
83
|
`;
|
|
82
|
-
}),
|
|
84
|
+
}), Y = i(h)(({
|
|
83
85
|
$active: r,
|
|
84
86
|
theme: o,
|
|
85
87
|
$activeColor: t,
|
|
@@ -123,7 +125,7 @@ const S = i(u)(({
|
|
|
123
125
|
}
|
|
124
126
|
`}
|
|
125
127
|
`;
|
|
126
|
-
}),
|
|
128
|
+
}), w = i(x)(({
|
|
127
129
|
$active: r,
|
|
128
130
|
theme: o,
|
|
129
131
|
$activeColor: t,
|
|
@@ -169,13 +171,13 @@ const S = i(u)(({
|
|
|
169
171
|
}
|
|
170
172
|
`}
|
|
171
173
|
`;
|
|
172
|
-
}),
|
|
174
|
+
}), H = i(f)`
|
|
173
175
|
width: 20px;
|
|
174
176
|
height: 20px;
|
|
175
|
-
`,
|
|
177
|
+
`, P = i(m)`
|
|
176
178
|
width: 20px;
|
|
177
179
|
height: 20px;
|
|
178
|
-
`,
|
|
180
|
+
`, T = i(p)(
|
|
179
181
|
({ theme: r, $active: o }) => {
|
|
180
182
|
const { colors: t } = r;
|
|
181
183
|
return l`
|
|
@@ -215,13 +217,13 @@ const S = i(u)(({
|
|
|
215
217
|
`}
|
|
216
218
|
`;
|
|
217
219
|
}
|
|
218
|
-
),
|
|
220
|
+
), U = i(a)`
|
|
219
221
|
path {
|
|
220
222
|
stroke: ${"white"};
|
|
221
223
|
}
|
|
222
|
-
`,
|
|
224
|
+
`, j = i($)`
|
|
223
225
|
transform: scaleX(-1);
|
|
224
|
-
`,
|
|
226
|
+
`, D = i(p)`
|
|
225
227
|
position: absolute;
|
|
226
228
|
display: flex;
|
|
227
229
|
justify-content: center;
|
|
@@ -229,7 +231,7 @@ const S = i(u)(({
|
|
|
229
231
|
transition:
|
|
230
232
|
opacity 0.5s ease,
|
|
231
233
|
transform 0.5s ease;
|
|
232
|
-
`,
|
|
234
|
+
`, O = i(p)(
|
|
233
235
|
({ $canScribble: r, $canRender: o, $renderAs: t }) => `
|
|
234
236
|
display: ${o ? "block" : "none"};
|
|
235
237
|
opacity: ${r ? 1 : 0.5};
|
|
@@ -242,18 +244,18 @@ const S = i(u)(({
|
|
|
242
244
|
`}
|
|
243
245
|
|
|
244
246
|
`
|
|
245
|
-
),
|
|
247
|
+
), V = i(p)(
|
|
246
248
|
({ $color: r }) => `
|
|
247
249
|
background: ${c[r]};
|
|
248
250
|
`
|
|
249
|
-
),
|
|
251
|
+
), z = i(d)`
|
|
250
252
|
pointer-events: none;
|
|
251
253
|
transition: transform 0.5s ease;
|
|
252
254
|
transform: ${({ $isAnimating: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
|
|
253
|
-
`,
|
|
255
|
+
`, F = i(p)`
|
|
254
256
|
overflow: hidden;
|
|
255
257
|
border-right: 1px solid ${({ theme: r }) => r.colors.GREY_1};
|
|
256
|
-
`,
|
|
258
|
+
`, M = i(p)`
|
|
257
259
|
position: absolute;
|
|
258
260
|
padding: 8px 8px 0 8px;
|
|
259
261
|
overflow: hidden;
|
|
@@ -269,20 +271,21 @@ background: ${c[r]};
|
|
|
269
271
|
}
|
|
270
272
|
`;
|
|
271
273
|
export {
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
274
|
+
V as ColorPicker,
|
|
275
|
+
O as CueCanvasWrapper,
|
|
276
|
+
W as HWWrapper,
|
|
277
|
+
M as MenuWrapper,
|
|
278
|
+
D as PaletteWrapper,
|
|
279
|
+
F as PenIconWrapper,
|
|
280
|
+
j as RedoIcon,
|
|
281
|
+
U as StyledCheckIcon,
|
|
282
|
+
z as StyledDownIcon,
|
|
283
|
+
Y as StyledHighlighterWrapper,
|
|
284
|
+
H as StyledLockIcon,
|
|
282
285
|
S as StyledPencilIcon,
|
|
283
286
|
G as StyledRulerIcon,
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
+
w as StyledSketchWrapper,
|
|
288
|
+
P as StyledUnlockIcon,
|
|
289
|
+
T as StyledWrapper
|
|
287
290
|
};
|
|
288
291
|
//# sourceMappingURL=cue-cavas-styled.js.map
|
|
@@ -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}\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":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","FlexView","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)`\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,21 +1,21 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
1
|
+
import { jsx as o, jsxs as k } from "react/jsx-runtime";
|
|
2
2
|
import { h as c } from "../../../../node_modules/humanize-plus/dist/humanize.js";
|
|
3
|
-
import { memo as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
3
|
+
import { memo as q, useCallback as $ } from "react";
|
|
4
|
+
import y from "../../../ui/buttons/clickable/clickable.js";
|
|
5
|
+
import W from "../../../ui/layout/flex-view.js";
|
|
6
6
|
import d from "../../../ui/text/text.js";
|
|
7
|
-
import { useCueCanvasActions as
|
|
7
|
+
import { useCueCanvasActions as _ } from "../../hooks/use-cue-canvas-actions.js";
|
|
8
8
|
import { getDateInInputFormat as E, getMonthNameforNumber as T } from "./helper.js";
|
|
9
9
|
import { HWImageContainer as v } from "./homework-styled.js";
|
|
10
10
|
import l from "../../../../node_modules/uuid/dist/esm-browser/v4.js";
|
|
11
|
-
const
|
|
11
|
+
const j = (u) => {
|
|
12
12
|
var a;
|
|
13
13
|
const { hwRequest: h, onSelect: r, studentName: p } = u, {
|
|
14
|
-
problem_description:
|
|
14
|
+
problem_description: s,
|
|
15
15
|
problem_image_urls: e,
|
|
16
16
|
created_on_ts: f,
|
|
17
|
-
homework_id:
|
|
18
|
-
} = h, { setHomeworkId: m, activeInstance: t } =
|
|
17
|
+
homework_id: n
|
|
18
|
+
} = h, { setHomeworkId: m, activeInstance: t } = _(), g = $(() => {
|
|
19
19
|
const x = l();
|
|
20
20
|
if (e && e.length > 0) {
|
|
21
21
|
const i = {
|
|
@@ -24,7 +24,7 @@ const D = (u) => {
|
|
|
24
24
|
void 0,
|
|
25
25
|
{
|
|
26
26
|
name: "text",
|
|
27
|
-
html:
|
|
27
|
+
html: s,
|
|
28
28
|
x: 500,
|
|
29
29
|
y: 75,
|
|
30
30
|
rot: 0
|
|
@@ -33,7 +33,7 @@ const D = (u) => {
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
e.forEach((C) => {
|
|
36
|
-
const H = l(), R = C +
|
|
36
|
+
const H = l(), R = C + "?dummyProp=true";
|
|
37
37
|
i.data[H] = [
|
|
38
38
|
void 0,
|
|
39
39
|
{
|
|
@@ -42,20 +42,28 @@ const D = (u) => {
|
|
|
42
42
|
x: 48,
|
|
43
43
|
y: 72,
|
|
44
44
|
rot: 0,
|
|
45
|
-
width: 400
|
|
45
|
+
width: 400,
|
|
46
|
+
status: "locked"
|
|
46
47
|
}
|
|
47
48
|
];
|
|
48
49
|
}), t == null || t.replaceCanvas(i);
|
|
49
50
|
}
|
|
50
|
-
r(), m(
|
|
51
|
-
}, [t,
|
|
52
|
-
return /* @__PURE__ */ o(
|
|
53
|
-
/* @__PURE__ */ o(
|
|
51
|
+
r(), m(n);
|
|
52
|
+
}, [t, s, n, e, r, m]), { date: I, month: w } = E(f), b = `${c.ordinal(I)} ${c.titleCase((a = T(w)) == null ? void 0 : a.toLowerCase())}`;
|
|
53
|
+
return /* @__PURE__ */ o(y, { label: "HW Request Item", onClick: g, children: /* @__PURE__ */ k(W, { $alignItems: "center", $justifyContent: "center", $borderRadius: 8, $background: "WHITE", children: [
|
|
54
|
+
/* @__PURE__ */ o(
|
|
55
|
+
v,
|
|
56
|
+
{
|
|
57
|
+
src: e[0],
|
|
58
|
+
alt: "Homework Request",
|
|
59
|
+
crossOrigin: "anonymous"
|
|
60
|
+
}
|
|
61
|
+
),
|
|
54
62
|
/* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: p }),
|
|
55
63
|
/* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: b })
|
|
56
64
|
] }) });
|
|
57
|
-
},
|
|
65
|
+
}, U = q(j);
|
|
58
66
|
export {
|
|
59
|
-
|
|
67
|
+
U as default
|
|
60
68
|
};
|
|
61
69
|
//# sourceMappingURL=homework-request.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"homework-request.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-request.tsx"],"sourcesContent":["import type { IReplaceCanvas } from '../../types/cue-canvas';\nimport type { IHomeWorkRequestProps } from './homework-types';\n\nimport { ordinal, titleCase } from 'humanize-plus';\nimport { memo, useCallback } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport { getDateInInputFormat, getMonthNameforNumber } from './helper';\nimport * as Styled from './homework-styled';\n\nconst HomeWorkRequest: React.FC<IHomeWorkRequestProps> = props => {\n const { hwRequest, onSelect, studentName } = props;\n const {\n problem_description: hwRequestDesc,\n problem_image_urls: hwRequestImages,\n created_on_ts: createdOnTs,\n homework_id: hwRequestId,\n } = hwRequest;\n const { setHomeworkId, activeInstance } = useCueCanvasActions();\n\n const onSelectHwRequest = useCallback(() => {\n const textId = uuidv4();\n\n if (hwRequestImages && hwRequestImages.length > 0) {\n const actionData: IReplaceCanvas = {\n data: {\n [textId]: [\n undefined,\n {\n name: 'text',\n html: hwRequestDesc,\n x: 500,\n y: 75,\n rot: 0,\n },\n ],\n },\n };\n\n hwRequestImages.forEach(image => {\n const imgId = uuidv4();\n const imageUrl = image +
|
|
1
|
+
{"version":3,"file":"homework-request.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-request.tsx"],"sourcesContent":["import type { IReplaceCanvas } from '../../types/cue-canvas';\nimport type { IHomeWorkRequestProps } from './homework-types';\n\nimport { ordinal, titleCase } from 'humanize-plus';\nimport { memo, useCallback } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport { getDateInInputFormat, getMonthNameforNumber } from './helper';\nimport * as Styled from './homework-styled';\n\nconst HomeWorkRequest: React.FC<IHomeWorkRequestProps> = props => {\n const { hwRequest, onSelect, studentName } = props;\n const {\n problem_description: hwRequestDesc,\n problem_image_urls: hwRequestImages,\n created_on_ts: createdOnTs,\n homework_id: hwRequestId,\n } = hwRequest;\n const { setHomeworkId, activeInstance } = useCueCanvasActions();\n\n const onSelectHwRequest = useCallback(() => {\n const textId = uuidv4();\n\n if (hwRequestImages && hwRequestImages.length > 0) {\n const actionData: IReplaceCanvas = {\n data: {\n [textId]: [\n undefined,\n {\n name: 'text',\n html: hwRequestDesc,\n x: 500,\n y: 75,\n rot: 0,\n },\n ],\n },\n };\n\n hwRequestImages.forEach(image => {\n const imgId = uuidv4();\n const imageUrl = image + '?dummyProp=true';\n\n actionData.data[imgId] = [\n undefined,\n {\n name: 'image',\n href: imageUrl,\n x: 48,\n y: 72,\n rot: 0,\n width: 400,\n status: 'locked',\n },\n ];\n });\n\n activeInstance?.replaceCanvas(actionData);\n }\n // const url = new URL(window.location.href);\n // url.searchParams.set('homeworkId', hwRequestId);\n // console.log('url', url);\n // window.history.replaceState({}, '', url.toString());\n onSelect();\n setHomeworkId(hwRequestId);\n }, [activeInstance, hwRequestDesc, hwRequestId, hwRequestImages, onSelect, setHomeworkId]);\n\n const { date, month } = getDateInInputFormat(createdOnTs);\n\n const dateString = `${ordinal(date)} ${titleCase(getMonthNameforNumber(month)?.toLowerCase())}`;\n\n return (\n <Clickable label=\"HW Request Item\" onClick={onSelectHwRequest}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" $borderRadius={8} $background=\"WHITE\">\n <Styled.HWImageContainer\n src={hwRequestImages[0]}\n alt=\"Homework Request\"\n crossOrigin=\"anonymous\"\n />\n <Text $renderAs=\"body3\" color=\"WHITE\">\n {studentName}\n </Text>\n <Text $renderAs=\"body3\" color=\"WHITE\">\n {dateString}\n </Text>\n </FlexView>\n </Clickable>\n );\n};\n\nexport default memo(HomeWorkRequest);\n"],"names":["HomeWorkRequest","props","hwRequest","onSelect","studentName","hwRequestDesc","hwRequestImages","createdOnTs","hwRequestId","setHomeworkId","activeInstance","useCueCanvasActions","onSelectHwRequest","useCallback","textId","uuidv4","actionData","image","imgId","imageUrl","date","month","getDateInInputFormat","dateString","ordinal","titleCase","_a","getMonthNameforNumber","jsx","Clickable","jsxs","FlexView","Styled.HWImageContainer","Text","HWRequest","memo"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAmD,CAASC,MAAA;;AAChE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,aAAAC,EAAA,IAAgBH,GACvC;AAAA,IACJ,qBAAqBI;AAAA,IACrB,oBAAoBC;AAAA,IACpB,eAAeC;AAAA,IACf,aAAaC;AAAA,EACX,IAAAN,GACE,EAAE,eAAAO,GAAe,gBAAAC,EAAe,IAAIC,EAAoB,GAExDC,IAAoBC,EAAY,MAAM;AAC1C,UAAMC,IAASC;AAEX,QAAAT,KAAmBA,EAAgB,SAAS,GAAG;AACjD,YAAMU,IAA6B;AAAA,QACjC,MAAM;AAAA,UACJ,CAACF,CAAM,GAAG;AAAA,YACR;AAAA,YACA;AAAA,cACE,MAAM;AAAA,cACN,MAAMT;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,cACH,KAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAGF,MAAAC,EAAgB,QAAQ,CAASW,MAAA;AAC/B,cAAMC,IAAQH,KACRI,IAAWF,IAAQ;AAEd,QAAAD,EAAA,KAAKE,CAAK,IAAI;AAAA,UACvB;AAAA,UACA;AAAA,YACE,MAAM;AAAA,YACN,MAAMC;AAAA,YACN,GAAG;AAAA,YACH,GAAG;AAAA,YACH,KAAK;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,UACV;AAAA,QAAA;AAAA,MACF,CACD,GAEDT,KAAA,QAAAA,EAAgB,cAAcM;AAAA,IAChC;AAKS,IAAAb,KACTM,EAAcD,CAAW;AAAA,EAAA,GACxB,CAACE,GAAgBL,GAAeG,GAAaF,GAAiBH,GAAUM,CAAa,CAAC,GAEnF,EAAE,MAAAW,GAAM,OAAAC,EAAM,IAAIC,EAAqBf,CAAW,GAElDgB,IAAa,GAAGC,UAAQJ,CAAI,CAAC,IAAIK,aAAUC,IAAAC,EAAsBN,CAAK,MAA3B,gBAAAK,EAA8B,aAAa,CAAC;AAE7F,SACG,gBAAAE,EAAAC,GAAA,EAAU,OAAM,mBAAkB,SAASjB,GAC1C,UAAA,gBAAAkB,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,eAAe,GAAG,aAAY,SACpF,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,KAAK1B,EAAgB,CAAC;AAAA,QACtB,KAAI;AAAA,QACJ,aAAY;AAAA,MAAA;AAAA,IACd;AAAA,sBACC2B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACH7B,GAAA;AAAA,sBACC6B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACHV,GAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeW,IAAAC,EAAKnC,CAAe;"}
|
|
@@ -1,32 +1,39 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import b from "../../../ui/
|
|
7
|
-
import { StyledWrapper as
|
|
8
|
-
import { useCueCanvasActions as
|
|
9
|
-
import
|
|
10
|
-
const
|
|
11
|
-
const { activeSidebar: e, setActiveSidebar:
|
|
12
|
-
|
|
13
|
-
[o]
|
|
14
|
-
), { menuVisible: l, onMenuClick: i } = v(
|
|
15
|
-
n,
|
|
1
|
+
import { jsxs as a, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { memo as u, useRef as d, useCallback as f, useEffect as k } from "react";
|
|
3
|
+
import p from "../../../ui/buttons/clickable/clickable.js";
|
|
4
|
+
import h from "../../../ui/hooks/use-context-menu-click-handler.js";
|
|
5
|
+
import C from "../../../ui/layout/flex-view.js";
|
|
6
|
+
import b from "../../../ui/text/text.js";
|
|
7
|
+
import { StyledWrapper as w, HWWrapper as W } from "../../cue-cavas-styled.js";
|
|
8
|
+
import { useCueCanvasActions as H } from "../../hooks/use-cue-canvas-actions.js";
|
|
9
|
+
import $ from "./homework-menu.js";
|
|
10
|
+
const v = (s) => {
|
|
11
|
+
const { activeSidebar: e, setActiveSidebar: n, hwRequests: c } = s, { activeInstance: r } = H(), l = d(null), { menuVisible: i, onMenuClick: t } = h(
|
|
12
|
+
l,
|
|
16
13
|
void 0,
|
|
17
14
|
!0,
|
|
18
|
-
|
|
19
|
-
), m =
|
|
20
|
-
e === "tile" && (
|
|
21
|
-
}, [e,
|
|
22
|
-
return
|
|
23
|
-
e === "tile" &&
|
|
24
|
-
}, [e,
|
|
25
|
-
/* @__PURE__ */
|
|
26
|
-
|
|
15
|
+
void 0
|
|
16
|
+
), m = f(() => {
|
|
17
|
+
e === "tile" && (r == null || r.toggleTiles(!1)), n(e === "homework" ? void 0 : "homework"), t();
|
|
18
|
+
}, [e, r, t, n]);
|
|
19
|
+
return k(() => {
|
|
20
|
+
(e === "tile" || e === "puzzle") && i && t();
|
|
21
|
+
}, [e, i, t]), /* @__PURE__ */ a(C, { $position: "relative", ref: l, children: [
|
|
22
|
+
/* @__PURE__ */ o(p, { onClick: m, label: "homework help", children: /* @__PURE__ */ o(w, { $active: e === "homework", children: /* @__PURE__ */ o(
|
|
23
|
+
W,
|
|
24
|
+
{
|
|
25
|
+
$background: e === "homework" ? "BLACK" : "WHITE",
|
|
26
|
+
$borderColor: e === "homework" ? "WHITE" : "BLACK",
|
|
27
|
+
$borderRadius: 4,
|
|
28
|
+
$alignItems: "center",
|
|
29
|
+
$justifyContent: "center",
|
|
30
|
+
children: /* @__PURE__ */ o(b, { $color: e === "homework" ? "WHITE" : "BLACK", $renderAs: "ub3-bold", children: "HW" })
|
|
31
|
+
}
|
|
32
|
+
) }) }),
|
|
33
|
+
i && /* @__PURE__ */ o($, { onSelect: m, hwRequests: c })
|
|
27
34
|
] });
|
|
28
|
-
},
|
|
35
|
+
}, j = u(v);
|
|
29
36
|
export {
|
|
30
|
-
|
|
37
|
+
j as default
|
|
31
38
|
};
|
|
32
39
|
//# sourceMappingURL=homework.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"homework.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework.tsx"],"sourcesContent":["import type { IHomeWorkRequestsContainerProps } from './homework-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"homework.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework.tsx"],"sourcesContent":["import type { IHomeWorkRequestsContainerProps } from './homework-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { StyledWrapper, HWWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport HomeWorkMenu from './homework-menu';\n\nconst HomeWorkRequestsContainer: FC<IHomeWorkRequestsContainerProps> = props => {\n const { activeSidebar, setActiveSidebar, hwRequests } = props;\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n const homeWorkMenuRef = useRef(null);\n\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n homeWorkMenuRef,\n undefined,\n true,\n undefined,\n );\n\n const handleClick = useCallback(() => {\n if (activeSidebar === 'tile') {\n cueCanvas?.toggleTiles(false);\n }\n setActiveSidebar(activeSidebar === 'homework' ? undefined : 'homework');\n onMenuClick();\n }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n useEffect(() => {\n if ((activeSidebar === 'tile' || activeSidebar === 'puzzle') && menuVisible) {\n onMenuClick();\n }\n }, [activeSidebar, menuVisible, onMenuClick]);\n\n return (\n <FlexView $position=\"relative\" ref={homeWorkMenuRef}>\n <Clickable onClick={handleClick} label=\"homework help\">\n <StyledWrapper $active={activeSidebar === 'homework'}>\n <HWWrapper\n $background={activeSidebar === 'homework' ? 'BLACK' : 'WHITE'}\n $borderColor={activeSidebar === 'homework' ? 'WHITE' : 'BLACK'}\n $borderRadius={4}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <Text $color={activeSidebar === 'homework' ? 'WHITE' : 'BLACK'} $renderAs=\"ub3-bold\">\n HW\n </Text>\n </HWWrapper>\n </StyledWrapper>\n </Clickable>\n {menuVisible && <HomeWorkMenu onSelect={handleClick} hwRequests={hwRequests} />}\n </FlexView>\n );\n};\n\nexport default memo(HomeWorkRequestsContainer);\n"],"names":["HomeWorkRequestsContainer","props","activeSidebar","setActiveSidebar","hwRequests","cueCanvas","useCueCanvasActions","homeWorkMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","HWWrapper","Text","HomeWorkMenu","Homework","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAiE,CAASC,MAAA;AAC9E,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,YAAAC,EAAA,IAAeH,GAClD,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAkBC,EAAO,IAAI,GAE7B,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAcC,EAAY,MAAM;AACpC,IAAIX,MAAkB,WACpBG,KAAA,QAAAA,EAAW,YAAY,MAERF,EAAAD,MAAkB,aAAa,SAAY,UAAU,GAC1DQ;KACX,CAACR,GAAeG,GAAWK,GAAaP,CAAgB,CAAC;AAE5D,SAAAW,EAAU,MAAM;AACd,KAAKZ,MAAkB,UAAUA,MAAkB,aAAaO,KAClDC;EAEb,GAAA,CAACR,GAAeO,GAAaC,CAAW,CAAC,GAGzC,gBAAAK,EAAAC,GAAA,EAAS,WAAU,YAAW,KAAKT,GAClC,UAAA;AAAA,IAAC,gBAAAU,EAAAC,GAAA,EAAU,SAASN,GAAa,OAAM,iBACrC,UAAC,gBAAAK,EAAAE,GAAA,EAAc,SAASjB,MAAkB,YACxC,UAAA,gBAAAe;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,aAAalB,MAAkB,aAAa,UAAU;AAAA,QACtD,cAAcA,MAAkB,aAAa,UAAU;AAAA,QACvD,eAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAEhB,UAAA,gBAAAe,EAACI,KAAK,QAAQnB,MAAkB,aAAa,UAAU,SAAS,WAAU,YAAW,UAErF,KAAA,CAAA;AAAA,MAAA;AAAA,OAEJ,EACF,CAAA;AAAA,IACCO,KAAe,gBAAAQ,EAACK,GAAa,EAAA,UAAUV,GAAa,YAAAR,GAAwB;AAAA,EAC/E,EAAA,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAyB;"}
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { jsxs as m, jsx as
|
|
1
|
+
import { jsxs as m, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { memo as a, useRef as p, useCallback as z, useEffect as f } from "react";
|
|
3
3
|
import d from "../../../../assets/line-icons/icons/puzzle-icon.js";
|
|
4
4
|
import C from "../../../ui/buttons/clickable/clickable.js";
|
|
5
5
|
import v from "../../../ui/hooks/use-context-menu-click-handler.js";
|
|
6
|
-
import
|
|
7
|
-
import { StyledWrapper as
|
|
8
|
-
import { useCueCanvasActions as
|
|
9
|
-
import
|
|
6
|
+
import h from "../../../ui/layout/flex-view.js";
|
|
7
|
+
import { StyledWrapper as k } from "../../cue-cavas-styled.js";
|
|
8
|
+
import { useCueCanvasActions as b } from "../../hooks/use-cue-canvas-actions.js";
|
|
9
|
+
import g from "./puzzle-menu.js";
|
|
10
10
|
const x = (s) => {
|
|
11
|
-
const { activeSidebar: e, setActiveSidebar: r, grade: u } = s, { activeInstance:
|
|
11
|
+
const { activeSidebar: e, setActiveSidebar: r, grade: u } = s, { activeInstance: o } = b(), c = p(null), { menuVisible: l, onMenuClick: t } = v(
|
|
12
12
|
c,
|
|
13
13
|
void 0,
|
|
14
14
|
!0,
|
|
15
15
|
void 0
|
|
16
16
|
), n = z(() => {
|
|
17
|
-
e === "tile" && (
|
|
18
|
-
}, [e,
|
|
17
|
+
e === "tile" && (o == null || o.toggleTiles(!1)), r(e === "puzzle" ? void 0 : "puzzle"), t();
|
|
18
|
+
}, [e, o, t, r]);
|
|
19
19
|
return f(() => {
|
|
20
|
-
e === "tile" && l &&
|
|
21
|
-
}, [e, l,
|
|
22
|
-
/* @__PURE__ */
|
|
23
|
-
l && /* @__PURE__ */
|
|
20
|
+
(e === "tile" || e === "homework") && l && t();
|
|
21
|
+
}, [e, l, t]), /* @__PURE__ */ m(h, { $position: "relative", $height: "100%", children: [
|
|
22
|
+
/* @__PURE__ */ i(C, { onClick: n, label: "puzzles", children: /* @__PURE__ */ i(k, { $active: e === "puzzle", children: /* @__PURE__ */ i(d, {}) }) }),
|
|
23
|
+
l && /* @__PURE__ */ i(g, { toggleMenu: n, studentGrade: u })
|
|
24
24
|
] });
|
|
25
|
-
},
|
|
25
|
+
}, V = a(x);
|
|
26
26
|
export {
|
|
27
|
-
|
|
27
|
+
V as default
|
|
28
28
|
};
|
|
29
29
|
//# sourceMappingURL=puzzles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"puzzles.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles.tsx"],"sourcesContent":["import type { IPuzzlesContainer } from './puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport PuzzleMenu from './puzzle-menu';\n\nconst PuzzlesContainer: FC<IPuzzlesContainer> = props => {\n const { activeSidebar, setActiveSidebar, grade } = props;\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n const puzzleMenuRef = useRef(null);\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n puzzleMenuRef,\n undefined,\n true,\n undefined,\n );\n\n const handleClick = useCallback(() => {\n if (activeSidebar === 'tile') {\n cueCanvas?.toggleTiles(false);\n }\n setActiveSidebar(activeSidebar === 'puzzle' ? undefined : 'puzzle');\n onMenuClick();\n }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n useEffect(() => {\n if (activeSidebar === 'tile' && menuVisible) {\n onMenuClick();\n }\n }, [activeSidebar, menuVisible, onMenuClick]);\n\n return (\n <FlexView $position=\"relative\" $height=\"100%\">\n <Clickable onClick={handleClick} label=\"puzzles\">\n <StyledWrapper $active={activeSidebar === 'puzzle'}>\n <PuzzleIcon />\n </StyledWrapper>\n </Clickable>\n {menuVisible && <PuzzleMenu toggleMenu={handleClick} studentGrade={grade} />}\n </FlexView>\n );\n};\n\nexport default memo(PuzzlesContainer);\n"],"names":["PuzzlesContainer","props","activeSidebar","setActiveSidebar","grade","cueCanvas","useCueCanvasActions","puzzleMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","PuzzleIcon","PuzzleMenu","Puzzles","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA0C,CAASC,MAAA;AACvD,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,OAAAC,EAAA,IAAUH,GAC7C,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAgBC,EAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"puzzles.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles.tsx"],"sourcesContent":["import type { IPuzzlesContainer } from './puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport PuzzleMenu from './puzzle-menu';\n\nconst PuzzlesContainer: FC<IPuzzlesContainer> = props => {\n const { activeSidebar, setActiveSidebar, grade } = props;\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n const puzzleMenuRef = useRef(null);\n\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n puzzleMenuRef,\n undefined,\n true,\n undefined,\n );\n\n const handleClick = useCallback(() => {\n if (activeSidebar === 'tile') {\n cueCanvas?.toggleTiles(false);\n }\n setActiveSidebar(activeSidebar === 'puzzle' ? undefined : 'puzzle');\n onMenuClick();\n }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n useEffect(() => {\n if ((activeSidebar === 'tile' || activeSidebar === 'homework') && menuVisible) {\n onMenuClick();\n }\n }, [activeSidebar, menuVisible, onMenuClick]);\n\n return (\n <FlexView $position=\"relative\" $height=\"100%\">\n <Clickable onClick={handleClick} label=\"puzzles\">\n <StyledWrapper $active={activeSidebar === 'puzzle'}>\n <PuzzleIcon />\n </StyledWrapper>\n </Clickable>\n {menuVisible && <PuzzleMenu toggleMenu={handleClick} studentGrade={grade} />}\n </FlexView>\n );\n};\n\nexport default memo(PuzzlesContainer);\n"],"names":["PuzzlesContainer","props","activeSidebar","setActiveSidebar","grade","cueCanvas","useCueCanvasActions","puzzleMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","PuzzleIcon","PuzzleMenu","Puzzles","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA0C,CAASC,MAAA;AACvD,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,OAAAC,EAAA,IAAUH,GAC7C,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAgBC,EAAO,IAAI,GAE3B,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAcC,EAAY,MAAM;AACpC,IAAIX,MAAkB,WACpBG,KAAA,QAAAA,EAAW,YAAY,MAERF,EAAAD,MAAkB,WAAW,SAAY,QAAQ,GACtDQ;KACX,CAACR,GAAeG,GAAWK,GAAaP,CAAgB,CAAC;AAE5D,SAAAW,EAAU,MAAM;AACd,KAAKZ,MAAkB,UAAUA,MAAkB,eAAeO,KACpDC;EAEb,GAAA,CAACR,GAAeO,GAAaC,CAAW,CAAC,GAGzC,gBAAAK,EAAAC,GAAA,EAAS,WAAU,YAAW,SAAQ,QACrC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,SAASN,GAAa,OAAM,WACrC,UAAA,gBAAAK,EAACE,GAAc,EAAA,SAASjB,MAAkB,UACxC,UAAC,gBAAAe,EAAAG,GAAA,CAAA,CAAW,EACd,CAAA,GACF;AAAA,IACCX,KAAgB,gBAAAQ,EAAAI,GAAA,EAAW,YAAYT,GAAa,cAAcR,GAAO;AAAA,EAC5E,EAAA,CAAA;AAEJ,GAEekB,IAAAC,EAAKvB,CAAgB;"}
|