@cuemath/leap 2.8.52-link.3 → 2.8.53-aa0

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 (38) hide show
  1. package/dist/features/chapters/lpar-chapter/block-section/sheet-item/rewards-n-actions/student-actions/student-actions.js +18 -18
  2. package/dist/features/chapters/lpar-chapter/block-section/sheet-item/rewards-n-actions/student-actions/student-actions.js.map +1 -1
  3. package/dist/features/chapters/lpar-chapter/block-section/sheet-item/rewards-n-actions/teacher-actions/teacher-actions.js +10 -10
  4. package/dist/features/chapters/lpar-chapter/block-section/sheet-item/rewards-n-actions/teacher-actions/teacher-actions.js.map +1 -1
  5. package/dist/features/cue-canvas/cue-canvas-context.js +8 -5
  6. package/dist/features/cue-canvas/cue-canvas-context.js.map +1 -1
  7. package/dist/features/cue-canvas/cue-canvas-core.js +55 -22
  8. package/dist/features/cue-canvas/cue-canvas-core.js.map +1 -1
  9. package/dist/features/cue-canvas/cue-canvas-helpers.js +56 -40
  10. package/dist/features/cue-canvas/cue-canvas-helpers.js.map +1 -1
  11. package/dist/features/cue-canvas/cue-canvas-provider.js +16 -14
  12. package/dist/features/cue-canvas/cue-canvas-provider.js.map +1 -1
  13. package/dist/features/cue-canvas/cue-canvas.js +24 -24
  14. package/dist/features/cue-canvas/cue-canvas.js.map +1 -1
  15. package/dist/features/cue-canvas/cue-cavas-styled.js +86 -78
  16. package/dist/features/cue-canvas/cue-cavas-styled.js.map +1 -1
  17. package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js +14 -10
  18. package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js.map +1 -1
  19. package/dist/features/cue-canvas/toolbar/icon-map.js +34 -32
  20. package/dist/features/cue-canvas/toolbar/icon-map.js.map +1 -1
  21. package/dist/features/cue-canvas/toolbar/toolbar.js +9 -9
  22. package/dist/features/cue-canvas/toolbar/toolbar.js.map +1 -1
  23. package/dist/features/sheets/lessons-list/lesson-item/lesson-item-cta-info.js +41 -41
  24. package/dist/features/sheets/lessons-list/lesson-item/lesson-item-cta-info.js.map +1 -1
  25. package/dist/features/sheets/resources-list/resource-item/resource-item.js +20 -20
  26. package/dist/features/sheets/resources-list/resource-item/resource-item.js.map +1 -1
  27. package/dist/features/sheets/sheets-list/sheet-item/reward-n-actions/student-actions/student-actions.js +33 -33
  28. package/dist/features/sheets/sheets-list/sheet-item/reward-n-actions/student-actions/student-actions.js.map +1 -1
  29. package/dist/features/sheets/sheets-list/sheet-item/reward-n-actions/teacher-actions/teacher-actions.js +30 -30
  30. package/dist/features/sheets/sheets-list/sheet-item/reward-n-actions/teacher-actions/teacher-actions.js.map +1 -1
  31. package/dist/features/sheets/utils/is-v3-worksheet.js +10 -14
  32. package/dist/features/sheets/utils/is-v3-worksheet.js.map +1 -1
  33. package/dist/features/trial-session/hooks/use-trial-session-navigation.js +86 -76
  34. package/dist/features/trial-session/hooks/use-trial-session-navigation.js.map +1 -1
  35. package/dist/features/ui/constants/z-index.js +2 -0
  36. package/dist/features/ui/constants/z-index.js.map +1 -1
  37. package/dist/index.d.ts +1 -0
  38. package/package.json +3 -2
package/dist/features/cue-canvas/cue-cavas-styled.js CHANGED
@@ -1,95 +1,97 @@
1
- import s, { css as n } from "styled-components";
2
- import c from "../../assets/line-icons/icons/check.js";
1
+ import e, { css as l } from "styled-components";
2
+ import a from "../../assets/line-icons/icons/check.js";
3
3
  import d from "../../assets/line-icons/icons/down.js";
4
4
  import h from "../../assets/line-icons/icons/highlighter.js";
5
+ import f from "../../assets/line-icons/icons/lock.js";
5
6
  import u from "../../assets/line-icons/icons/pencil.js";
6
- import f from "../../assets/line-icons/icons/ruler.js";
7
- import g from "../../assets/line-icons/icons/sketch.js";
7
+ import g from "../../assets/line-icons/icons/ruler.js";
8
+ import x from "../../assets/line-icons/icons/sketch.js";
8
9
  import $ from "../../assets/line-icons/icons/undo.js";
10
+ import m from "../../assets/line-icons/icons/unlock.js";
9
11
  import p from "../ui/layout/flex-view.js";
10
- import { CANVAS_COLORS as a } from "./constants/constants.js";
11
- const b = s(u)(({
12
+ import { CANVAS_COLORS as c } from "./constants/constants.js";
13
+ const S = e(u)(({
12
14
  theme: r,
13
15
  $active: o,
14
16
  $activeColor: t,
15
- $shouldAnimate: l
17
+ $shouldAnimate: s
16
18
  }) => {
17
- const { colors: e } = r, i = o ? a[t] : e.REAL_BLACK_50;
18
- return n`
19
+ const { colors: i } = r, n = o ? c[t] : i.REAL_BLACK_50;
20
+ return l`
19
21
  position: relative;
20
22
  transition: top 0.3s ease-in-out;
21
- top: ${o && l ? "0px" : "8px"};
23
+ top: ${o && s ? "0px" : "8px"};
22
24
  cursor: ${o ? "auto" : "pointer"};
23
25
  .pencil-dark-shade {
24
- fill: ${o ? i : e.GREY_3};
26
+ fill: ${o ? n : i.GREY_3};
25
27
  }
26
28
 
27
29
  .pencil-light-shade {
28
- fill: ${o ? i : e.GREY_2};
30
+ fill: ${o ? n : i.GREY_2};
29
31
  opacity: ${o ? 0.3 : 1};
30
32
  }
31
33
 
32
- ${!o && n`
34
+ ${!o && l`
33
35
  &:hover {
34
36
  .pencil-dark-shade {
35
- fill: ${e.GREY_4};
37
+ fill: ${i.GREY_4};
36
38
  }
37
39
  .pencil-light-shade {
38
- fill: ${e.GREY_2};
40
+ fill: ${i.GREY_2};
39
41
  }
40
42
  }
41
43
  `}
42
44
  `;
43
- }), I = s(f)(({
45
+ }), W = e(g)(({
44
46
  theme: r,
45
47
  $active: o,
46
48
  $activeColor: t,
47
- $shouldAnimate: l
49
+ $shouldAnimate: s
48
50
  }) => {
49
- const { colors: e } = r, i = o ? a[t] : e.REAL_BLACK_50;
50
- return n`
51
+ const { colors: i } = r, n = o ? c[t] : i.REAL_BLACK_50;
52
+ return l`
51
53
  cursor: ${o ? "auto" : "pointer"};
52
54
  position: relative;
53
55
  transition: top 0.3s ease-in-out;
54
- top: ${o && l ? "0px" : "8px"};
56
+ top: ${o && s ? "0px" : "8px"};
55
57
 
56
58
  .ruler-rect-color {
57
- fill: ${o ? i : e.GREY_3};
59
+ fill: ${o ? n : i.GREY_3};
58
60
  }
59
61
 
60
62
  .ruler-stripe-base {
61
- fill: ${o ? i : e.GREY_2};
63
+ fill: ${o ? n : i.GREY_2};
62
64
  opacity: ${o ? 0.2 : 1};
63
65
  }
64
66
 
65
67
  .ruler-small-stripe {
66
- fill: ${e.REAL_BLACK};
68
+ fill: ${i.REAL_BLACK};
67
69
  }
68
70
 
69
- ${!o && n`
71
+ ${!o && l`
70
72
  &:hover {
71
73
  .ruler-rect-color {
72
- fill: ${e.GREY_4};
74
+ fill: ${i.GREY_4};
73
75
  }
74
76
  .ruler-stripe-base {
75
- fill: ${e.GREY_3};
77
+ fill: ${i.GREY_3};
76
78
  }
77
79
  }
78
80
  `}
79
81
  `;
80
- }), B = s(h)(({
82
+ }), w = e(h)(({
81
83
  $active: r,
82
84
  theme: o,
83
85
  $activeColor: t,
84
- $shouldAnimate: l
86
+ $shouldAnimate: s
85
87
  }) => {
86
- const { colors: e } = o, i = r ? a[t] : e.REAL_BLACK_50;
87
- return n`
88
+ const { colors: i } = o, n = r ? c[t] : i.REAL_BLACK_50;
89
+ return l`
88
90
  cursor: ${r ? "auto" : "pointer"};
89
91
  position: relative;
90
92
  transition: top 0.3s ease-in-out;
91
- top: ${r && l ? "0px" : "8px"};
92
- ${!r && n`
93
+ top: ${r && s ? "0px" : "8px"};
94
+ ${!r && l`
93
95
  &:hover {
94
96
  .highlighter-tip {
95
97
  fill: ${o.colors.BLACK};
@@ -105,36 +107,36 @@ const b = s(u)(({
105
107
  }
106
108
  `}
107
109
 
108
- ${r && n`
110
+ ${r && l`
109
111
  .highlighter-tip {
110
- fill: ${i};
112
+ fill: ${n};
111
113
  }
112
114
 
113
115
  .highlighter-stripe {
114
- fill: ${i};
116
+ fill: ${n};
115
117
  opacity: 0.6;
116
118
  }
117
119
 
118
120
  .highlighter-light-body {
119
- fill: ${i};
121
+ fill: ${n};
120
122
  opacity: 0.2;
121
123
  }
122
124
  `}
123
125
  `;
124
- }), K = s(g)(({
126
+ }), G = e(x)(({
125
127
  $active: r,
126
128
  theme: o,
127
129
  $activeColor: t,
128
- $shouldAnimate: l
130
+ $shouldAnimate: s
129
131
  }) => {
130
- const { colors: e } = o, i = r ? a[t] : e.REAL_BLACK_50;
131
- return n`
132
+ const { colors: i } = o, n = r ? c[t] : i.REAL_BLACK_50;
133
+ return l`
132
134
  cursor: ${r ? "auto" : "pointer"};
133
135
  position: relative;
134
136
  transition: top 0.3s ease-in-out;
135
- top: ${r && l ? "0px" : "8px"};
137
+ top: ${r && s ? "0px" : "8px"};
136
138
 
137
- ${!r && n`
139
+ ${!r && l`
138
140
  &:hover {
139
141
  .pen-tip {
140
142
  fill: ${o.colors.BLACK};
@@ -150,27 +152,33 @@ const b = s(u)(({
150
152
  }
151
153
  `}
152
154
 
153
- ${r && n`
155
+ ${r && l`
154
156
  cursor: ${r ? "auto" : "pointer"};
155
157
  .pen-tip {
156
- fill: ${i};
158
+ fill: ${n};
157
159
  }
158
160
 
159
161
  .pen-dark-shade {
160
- fill: ${i};
162
+ fill: ${n};
161
163
  opacity: 0.6;
162
164
  }
163
165
 
164
166
  .pen-light-shade {
165
- fill: ${i};
167
+ fill: ${n};
166
168
  opacity: 0.4;
167
169
  }
168
170
  `}
169
171
  `;
170
- }), W = s(p)(
172
+ }), Y = e(f)`
173
+ width: 20px;
174
+ height: 20px;
175
+ `, H = e(m)`
176
+ width: 20px;
177
+ height: 20px;
178
+ `, P = e(p)(
171
179
  ({ theme: r, $active: o }) => {
172
180
  const { colors: t } = r;
173
- return n`
181
+ return l`
174
182
  cursor: ${o ? "auto" : "pointer"};
175
183
  width: 32px;
176
184
  height: 32px;
@@ -180,26 +188,24 @@ const b = s(u)(({
180
188
  border-radius: 50%;
181
189
  transition: all 100ms ease-in-out;
182
190
 
183
- &:hover {
184
- border: 1px solid ${t.REAL_BLACK};
185
- }
186
- ${!o && n`
191
+ ${!o && l`
187
192
  &:hover {
188
193
  border: 1px solid ${t.REAL_BLACK};
189
194
  }
190
195
  `}
191
196
 
192
- ${o && n`
197
+ ${o && l`
193
198
  cursor: auto;
194
199
  background: ${t.BLACK};
200
+ .tile-icon {
201
+ fill: ${t.BLACK};
202
+ }
195
203
  svg {
196
204
  path,
205
+ rect,
197
206
  circle {
198
207
  stroke: ${t.WHITE};
199
208
  }
200
- .hover-tiles {
201
- stroke: ${t.WHITE};
202
- }
203
209
  .hover-eraser {
204
210
  stroke: none;
205
211
  fill: ${t.WHITE};
@@ -208,13 +214,13 @@ const b = s(u)(({
208
214
  `}
209
215
  `;
210
216
  }
211
- ), G = s(c)`
217
+ ), T = e(a)`
212
218
  path {
213
219
  stroke: ${"white"};
214
220
  }
215
- `, S = s($)`
221
+ `, U = e($)`
216
222
  transform: scaleX(-1);
217
- `, Y = s(p)`
223
+ `, j = e(p)`
218
224
  position: absolute;
219
225
  display: flex;
220
226
  justify-content: center;
@@ -222,7 +228,7 @@ const b = s(u)(({
222
228
  transition:
223
229
  opacity 0.5s ease,
224
230
  transform 0.5s ease;
225
- `, w = s(p)(
231
+ `, D = e(p)(
226
232
  ({ $canScribble: r, $canRender: o, $renderAs: t }) => `
227
233
  display: ${o ? "block" : "none"};
228
234
  opacity: ${r ? 1 : 0.5};
@@ -235,18 +241,18 @@ const b = s(u)(({
235
241
  `}
236
242
 
237
243
  `
238
- ), H = s(p)(
244
+ ), O = e(p)(
239
245
  ({ $color: r }) => `
240
- background: ${a[r]};
246
+ background: ${c[r]};
241
247
  `
242
- ), P = s(d)`
248
+ ), V = e(d)`
243
249
  pointer-events: none;
244
250
  transition: transform 0.5s ease;
245
251
  transform: ${({ $isAnimating: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
246
- `, T = s(p)`
252
+ `, z = e(p)`
247
253
  overflow: hidden;
248
254
  border-right: 1px solid ${({ theme: r }) => r.colors.GREY_1};
249
- `, j = s(p)`
255
+ `, F = e(p)`
250
256
  position: absolute;
251
257
  padding: 8px 8px 0 8px;
252
258
  overflow: hidden;
@@ -262,18 +268,20 @@ background: ${a[r]};
262
268
  }
263
269
  `;
264
270
  export {
265
- H as ColorPicker,
266
- w as CueCanvasWrapper,
267
- j as MenuWrapper,
268
- Y as PaletteWrapper,
269
- T as PenIconWrapper,
270
- S as RedoIcon,
271
- G as StyledCheckIcon,
272
- P as StyledDownIcon,
273
- B as StyledHighlighterWrapper,
274
- b as StyledPencilIcon,
275
- I as StyledRulerIcon,
276
- K as StyledSketchWrapper,
277
- W as StyledWrapper
271
+ O as ColorPicker,
272
+ D as CueCanvasWrapper,
273
+ F as MenuWrapper,
274
+ j as PaletteWrapper,
275
+ z as PenIconWrapper,
276
+ U as RedoIcon,
277
+ T as StyledCheckIcon,
278
+ V as StyledDownIcon,
279
+ w as StyledHighlighterWrapper,
280
+ Y as StyledLockIcon,
281
+ S as StyledPencilIcon,
282
+ W as StyledRulerIcon,
283
+ G as StyledSketchWrapper,
284
+ H as StyledUnlockIcon,
285
+ P as StyledWrapper
278
286
  };
279
287
  //# sourceMappingURL=cue-cavas-styled.js.map
package/dist/features/cue-canvas/cue-cavas-styled.js.map CHANGED
@@ -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 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 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 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\n &:hover {\n border: 1px solid ${colors.REAL_BLACK};\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 svg {\n path,\n circle {\n stroke: ${colors.WHITE};\n }\n .hover-tiles {\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","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}\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\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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"}
package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js CHANGED
@@ -1,14 +1,16 @@
1
- import { useContext as c, useMemo as l } from "react";
2
- import a from "../cue-canvas-context.js";
3
- const m = () => {
1
+ import { useContext as l, useMemo as v } from "react";
2
+ import u from "../cue-canvas-context.js";
3
+ const C = () => {
4
4
  const {
5
5
  activeInstance: t,
6
6
  setActiveTool: o,
7
7
  activeTool: e,
8
8
  setActiveInstance: i,
9
- activeColor: s,
10
- setActiveColor: n
11
- } = c(a), r = l(
9
+ activeColor: r,
10
+ setActiveColor: s,
11
+ setActiveSidebar: c,
12
+ activeSidebar: n
13
+ } = l(u), a = v(
12
14
  () => e ? ["pen", "ruler", "highlighter", "marker"].includes(e) : !1,
13
15
  [e]
14
16
  );
@@ -17,12 +19,14 @@ const m = () => {
17
19
  setActiveTool: o,
18
20
  activeTool: e,
19
21
  setActiveInstance: i,
20
- activeColor: s,
21
- setActiveColor: n,
22
- isWritingToolActive: r
22
+ activeColor: r,
23
+ setActiveColor: s,
24
+ isWritingToolActive: a,
25
+ setActiveSidebar: c,
26
+ activeSidebar: n
23
27
  };
24
28
  };
25
29
  export {
26
- m as useCueCanvasActions
30
+ C as useCueCanvasActions
27
31
  };
28
32
  //# sourceMappingURL=use-cue-canvas-actions.js.map
package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n const {\n activeInstance,\n setActiveTool,\n activeTool,\n setActiveInstance,\n activeColor,\n setActiveColor,\n } = useContext(PolyContext);\n\n const isWritingToolActive = useMemo(\n () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n [activeTool],\n );\n\n return {\n activeInstance,\n setActiveTool,\n activeTool,\n setActiveInstance,\n activeColor,\n setActiveColor,\n isWritingToolActive,\n };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOP,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAG;AAAA,EAAA;AAEJ;"}
1
+ {"version":3,"file":"use-cue-canvas-actions.js","sources":["../../../../src/features/cue-canvas/hooks/use-cue-canvas-actions.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport PolyContext from '../cue-canvas-context';\n\nexport const useCueCanvasActions = () => {\n const {\n activeInstance,\n setActiveTool,\n activeTool,\n setActiveInstance,\n activeColor,\n setActiveColor,\n setActiveSidebar,\n activeSidebar,\n } = useContext(PolyContext);\n\n const isWritingToolActive = useMemo(\n () => (activeTool ? ['pen', 'ruler', 'highlighter', 'marker'].includes(activeTool) : false),\n [activeTool],\n );\n\n return {\n activeInstance,\n setActiveTool,\n activeTool,\n setActiveInstance,\n activeColor,\n setActiveColor,\n isWritingToolActive,\n setActiveSidebar,\n activeSidebar,\n };\n};\n"],"names":["useCueCanvasActions","activeInstance","setActiveTool","activeTool","setActiveInstance","activeColor","setActiveColor","setActiveSidebar","activeSidebar","useContext","PolyContext","isWritingToolActive","useMemo"],"mappings":";;AAIO,MAAMA,IAAsB,MAAM;AACjC,QAAA;AAAA,IACJ,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACEC,EAAWC,CAAW,GAEpBC,IAAsBC;AAAA,IAC1B,MAAOT,IAAa,CAAC,OAAO,SAAS,eAAe,QAAQ,EAAE,SAASA,CAAU,IAAI;AAAA,IACrF,CAACA,CAAU;AAAA,EAAA;AAGN,SAAA;AAAA,IACL,gBAAAF;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAK;AAAA,IACA,kBAAAJ;AAAA,IACA,eAAAC;AAAA,EAAA;AAEJ;"}
package/dist/features/cue-canvas/toolbar/icon-map.js CHANGED
@@ -1,58 +1,60 @@
1
1
  import o from "../../../assets/line-icons/icons/clear-all.js";
2
2
  import r from "../../../assets/line-icons/icons/cursor.js";
3
3
  import m from "../../../assets/line-icons/icons/download.js";
4
- import i from "../../../assets/line-icons/icons/equation.js";
5
- import t from "../../../assets/line-icons/icons/eraser.js";
4
+ import t from "../../../assets/line-icons/icons/equation.js";
5
+ import i from "../../../assets/line-icons/icons/eraser.js";
6
6
  import e from "../../../assets/line-icons/icons/grid-icon.js";
7
- import p from "../../../assets/line-icons/icons/home.js";
8
- import n from "../../../assets/line-icons/icons/pan.js";
7
+ import n from "../../../assets/line-icons/icons/home.js";
8
+ import p from "../../../assets/line-icons/icons/pan.js";
9
9
  import d from "../../../assets/line-icons/icons/square-checked-grid.js";
10
- import a from "../../../assets/line-icons/icons/square-dots.js";
11
- import c from "../../../assets/line-icons/icons/square-grid.js";
12
- import f from "../../../assets/line-icons/icons/square2-grid.js";
13
- import l from "../../../assets/line-icons/icons/text-icon.js";
10
+ import c from "../../../assets/line-icons/icons/square-dots.js";
11
+ import l from "../../../assets/line-icons/icons/square-grid.js";
12
+ import a from "../../../assets/line-icons/icons/square2-grid.js";
13
+ import f from "../../../assets/line-icons/icons/text-icon.js";
14
14
  import I from "../../../assets/line-icons/icons/tri-dots.js";
15
15
  import S from "../../../assets/line-icons/icons/tri-grid.js";
16
- import g from "../../../assets/line-icons/icons/tri2-dots.js";
17
- import u from "../../../assets/line-icons/icons/tri2-grid.js";
16
+ import u from "../../../assets/line-icons/icons/tri2-dots.js";
17
+ import g from "../../../assets/line-icons/icons/tri2-grid.js";
18
18
  import s from "../../../assets/line-icons/icons/undo.js";
19
19
  import q from "../../../assets/line-icons/icons/upload.js";
20
20
  import h from "../../../assets/line-icons/icons/zoom-in.js";
21
21
  import v from "../../../assets/line-icons/icons/zoom-out.js";
22
- import O from "../../ui/layout/flex-view.js";
23
- import { StyledPencilIcon as T, StyledRulerIcon as G, StyledSketchWrapper as C, StyledHighlighterWrapper as D, RedoIcon as k } from "../cue-cavas-styled.js";
24
- const Q = {
25
- pen: T,
26
- ruler: G,
27
- marker: C,
28
- highlighter: D,
29
- eraser: t,
22
+ import k from "../../ui/layout/flex-view.js";
23
+ import { StyledPencilIcon as O, StyledRulerIcon as T, StyledSketchWrapper as G, StyledHighlighterWrapper as y, RedoIcon as C, StyledLockIcon as D, StyledUnlockIcon as x } from "../cue-cavas-styled.js";
24
+ const Y = {
25
+ pen: O,
26
+ ruler: T,
27
+ marker: G,
28
+ highlighter: y,
29
+ eraser: i,
30
30
  move: r,
31
31
  undo: s,
32
- redo: k,
33
- pan: n,
32
+ redo: C,
33
+ pan: p,
34
34
  clearAll: o,
35
- text: l,
36
- equation: i,
35
+ text: f,
36
+ equation: t,
37
37
  grid: e,
38
- home: p,
38
+ home: n,
39
+ lock: D,
40
+ unlock: x,
39
41
  zoomIn: h,
40
42
  zoomOut: v,
41
43
  upload: q,
42
44
  download: m
43
- }, X = {
44
- none: O,
45
- "square2-grid": f,
45
+ }, $ = {
46
+ none: k,
47
+ "square2-grid": a,
46
48
  "square-checked": d,
47
- "square-dots": a,
49
+ "square-dots": c,
48
50
  "tri-dots": I,
49
- "tri2-dots": g,
50
- "square-grid": c,
51
+ "tri2-dots": u,
52
+ "square-grid": l,
51
53
  "tri-grid": S,
52
- "tri2-grid": u
54
+ "tri2-grid": g
53
55
  };
54
56
  export {
55
- X as GRID_TO_COMP,
56
- Q as TOOLS_TO_COMP
57
+ $ as GRID_TO_COMP,
58
+ Y as TOOLS_TO_COMP
57
59
  };
58
60
  //# sourceMappingURL=icon-map.js.map
package/dist/features/cue-canvas/toolbar/icon-map.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon-map.js","sources":["../../../../src/features/cue-canvas/toolbar/icon-map.ts"],"sourcesContent":["import type { IToolsToCompMap, IGridToCompMap, TToolComponentType } from '../types/toolbar';\n\nimport ClearAllIcon from '../../../assets/line-icons/icons/clear-all';\nimport CursorIcon from '../../../assets/line-icons/icons/cursor';\nimport DownloadIcon from '../../../assets/line-icons/icons/download';\nimport EquationIcon from '../../../assets/line-icons/icons/equation';\nimport EraserIcon from '../../../assets/line-icons/icons/eraser';\nimport GridIcon from '../../../assets/line-icons/icons/grid-icon';\nimport HomeIcon from '../../../assets/line-icons/icons/home';\nimport PanIcon from '../../../assets/line-icons/icons/pan';\nimport SquareCheckedGridSvg from '../../../assets/line-icons/icons/square-checked-grid';\nimport SquareDotSvg from '../../../assets/line-icons/icons/square-dots';\nimport SquareGridSvg from '../../../assets/line-icons/icons/square-grid';\nimport Square2GridSvg from '../../../assets/line-icons/icons/square2-grid';\nimport TextIcon from '../../../assets/line-icons/icons/text-icon';\nimport TriDotSvg from '../../../assets/line-icons/icons/tri-dots';\nimport TriGridSvg from '../../../assets/line-icons/icons/tri-grid';\nimport Tri2DotSvg from '../../../assets/line-icons/icons/tri2-dots';\nimport Tri2GridSvg from '../../../assets/line-icons/icons/tri2-grid';\nimport UndoIcon from '../../../assets/line-icons/icons/undo';\nimport UploadIcon from '../../../assets/line-icons/icons/upload';\nimport ZoomInIcon from '../../../assets/line-icons/icons/zoom-in';\nimport ZoomOutIcon from '../../../assets/line-icons/icons/zoom-out';\nimport FlexView from '../../ui/layout/flex-view';\nimport {\n RedoIcon,\n StyledHighlighterWrapper,\n StyledPencilIcon,\n StyledRulerIcon,\n StyledSketchWrapper,\n} from '../cue-cavas-styled';\n\nexport const TOOLS_TO_COMP: IToolsToCompMap = {\n pen: StyledPencilIcon,\n ruler: StyledRulerIcon,\n marker: StyledSketchWrapper,\n highlighter: StyledHighlighterWrapper,\n eraser: EraserIcon,\n move: CursorIcon,\n undo: UndoIcon,\n redo: RedoIcon,\n pan: PanIcon,\n clearAll: ClearAllIcon,\n text: TextIcon,\n equation: EquationIcon,\n grid: GridIcon,\n home: HomeIcon,\n zoomIn: ZoomInIcon,\n zoomOut: ZoomOutIcon,\n upload: UploadIcon,\n download: DownloadIcon,\n};\n\nexport const GRID_TO_COMP: IGridToCompMap = {\n 'none': FlexView as unknown as TToolComponentType,\n 'square2-grid': Square2GridSvg,\n 'square-checked': SquareCheckedGridSvg,\n 'square-dots': SquareDotSvg,\n 'tri-dots': TriDotSvg,\n 'tri2-dots': Tri2DotSvg,\n 'square-grid': SquareGridSvg,\n 'tri-grid': TriGridSvg,\n 'tri2-grid': Tri2GridSvg,\n};\n"],"names":["TOOLS_TO_COMP","StyledPencilIcon","StyledRulerIcon","StyledSketchWrapper","StyledHighlighterWrapper","EraserIcon","CursorIcon","UndoIcon","RedoIcon","PanIcon","ClearAllIcon","TextIcon","EquationIcon","GridIcon","HomeIcon","ZoomInIcon","ZoomOutIcon","UploadIcon","DownloadIcon","GRID_TO_COMP","FlexView","Square2GridSvg","SquareCheckedGridSvg","SquareDotSvg","TriDotSvg","Tri2DotSvg","SquareGridSvg","TriGridSvg","Tri2GridSvg"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAMA,IAAiC;AAAA,EAC5C,KAAKC;AAAA,EACL,OAAOC;AAAA,EACP,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,KAAKC;AAAA,EACL,UAAUC;AAAA,EACV,MAAMC;AAAA,EACN,UAAUC;AAAAA,EACV,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,QAAQC;AAAA,EACR,SAASC;AAAA,EACT,QAAQC;AAAA,EACR,UAAUC;AACZ,GAEaC,IAA+B;AAAA,EAC1C,MAAQC;AAAA,EACR,gBAAgBC;AAAA,EAChB,kBAAkBC;AAAA,EAClB,eAAeC;AAAA,EACf,YAAYC;AAAA,EACZ,aAAaC;AAAA,EACb,eAAeC;AAAA,EACf,YAAYC;AAAA,EACZ,aAAaC;AACf;"}
1
+ {"version":3,"file":"icon-map.js","sources":["../../../../src/features/cue-canvas/toolbar/icon-map.ts"],"sourcesContent":["import type { IToolsToCompMap, IGridToCompMap, TToolComponentType } from '../types/toolbar';\n\nimport ClearAllIcon from '../../../assets/line-icons/icons/clear-all';\nimport CursorIcon from '../../../assets/line-icons/icons/cursor';\nimport DownloadIcon from '../../../assets/line-icons/icons/download';\nimport EquationIcon from '../../../assets/line-icons/icons/equation';\nimport EraserIcon from '../../../assets/line-icons/icons/eraser';\nimport GridIcon from '../../../assets/line-icons/icons/grid-icon';\nimport HomeIcon from '../../../assets/line-icons/icons/home';\nimport PanIcon from '../../../assets/line-icons/icons/pan';\nimport SquareCheckedGridSvg from '../../../assets/line-icons/icons/square-checked-grid';\nimport SquareDotSvg from '../../../assets/line-icons/icons/square-dots';\nimport SquareGridSvg from '../../../assets/line-icons/icons/square-grid';\nimport Square2GridSvg from '../../../assets/line-icons/icons/square2-grid';\nimport TextIcon from '../../../assets/line-icons/icons/text-icon';\nimport TriDotSvg from '../../../assets/line-icons/icons/tri-dots';\nimport TriGridSvg from '../../../assets/line-icons/icons/tri-grid';\nimport Tri2DotSvg from '../../../assets/line-icons/icons/tri2-dots';\nimport Tri2GridSvg from '../../../assets/line-icons/icons/tri2-grid';\nimport UndoIcon from '../../../assets/line-icons/icons/undo';\nimport UploadIcon from '../../../assets/line-icons/icons/upload';\nimport ZoomInIcon from '../../../assets/line-icons/icons/zoom-in';\nimport ZoomOutIcon from '../../../assets/line-icons/icons/zoom-out';\nimport FlexView from '../../ui/layout/flex-view';\nimport {\n RedoIcon,\n StyledHighlighterWrapper,\n StyledLockIcon,\n StyledPencilIcon,\n StyledRulerIcon,\n StyledSketchWrapper,\n StyledUnlockIcon,\n} from '../cue-cavas-styled';\n\nexport const TOOLS_TO_COMP: IToolsToCompMap = {\n pen: StyledPencilIcon,\n ruler: StyledRulerIcon,\n marker: StyledSketchWrapper,\n highlighter: StyledHighlighterWrapper,\n eraser: EraserIcon,\n move: CursorIcon,\n undo: UndoIcon,\n redo: RedoIcon,\n pan: PanIcon,\n clearAll: ClearAllIcon,\n text: TextIcon,\n equation: EquationIcon,\n grid: GridIcon,\n home: HomeIcon,\n lock: StyledLockIcon,\n unlock: StyledUnlockIcon,\n zoomIn: ZoomInIcon,\n zoomOut: ZoomOutIcon,\n upload: UploadIcon,\n download: DownloadIcon,\n};\n\nexport const GRID_TO_COMP: IGridToCompMap = {\n 'none': FlexView as unknown as TToolComponentType,\n 'square2-grid': Square2GridSvg,\n 'square-checked': SquareCheckedGridSvg,\n 'square-dots': SquareDotSvg,\n 'tri-dots': TriDotSvg,\n 'tri2-dots': Tri2DotSvg,\n 'square-grid': SquareGridSvg,\n 'tri-grid': TriGridSvg,\n 'tri2-grid': Tri2GridSvg,\n};\n"],"names":["TOOLS_TO_COMP","StyledPencilIcon","StyledRulerIcon","StyledSketchWrapper","StyledHighlighterWrapper","EraserIcon","CursorIcon","UndoIcon","RedoIcon","PanIcon","ClearAllIcon","TextIcon","EquationIcon","GridIcon","HomeIcon","StyledLockIcon","StyledUnlockIcon","ZoomInIcon","ZoomOutIcon","UploadIcon","DownloadIcon","GRID_TO_COMP","FlexView","Square2GridSvg","SquareCheckedGridSvg","SquareDotSvg","TriDotSvg","Tri2DotSvg","SquareGridSvg","TriGridSvg","Tri2GridSvg"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCO,MAAMA,IAAiC;AAAA,EAC5C,KAAKC;AAAA,EACL,OAAOC;AAAA,EACP,QAAQC;AAAA,EACR,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,KAAKC;AAAA,EACL,UAAUC;AAAA,EACV,MAAMC;AAAA,EACN,UAAUC;AAAAA,EACV,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,QAAQC;AAAA,EACR,QAAQC;AAAA,EACR,SAASC;AAAA,EACT,QAAQC;AAAA,EACR,UAAUC;AACZ,GAEaC,IAA+B;AAAA,EAC1C,MAAQC;AAAA,EACR,gBAAgBC;AAAA,EAChB,kBAAkBC;AAAA,EAClB,eAAeC;AAAA,EACf,YAAYC;AAAA,EACZ,aAAaC;AAAA,EACb,eAAeC;AAAA,EACf,YAAYC;AAAA,EACZ,aAAaC;AACf;"}
package/dist/features/cue-canvas/toolbar/toolbar.js CHANGED
@@ -1,21 +1,21 @@
1
1
  import { jsx as m, jsxs as n } from "react/jsx-runtime";
2
- import { memo as s, useEffect as a } from "react";
2
+ import { memo as s, useEffect as l } from "react";
3
3
  import c from "../../ui/layout/flex-view.js";
4
4
  import { CANVAS_COLORS as p } from "../constants/constants.js";
5
5
  import { getUserTools as u } from "../cue-canvas-helpers.js";
6
6
  import { useCueCanvasActions as C } from "../hooks/use-cue-canvas-actions.js";
7
7
  import x from "./color-picker-menu.js";
8
8
  import b from "./tool.js";
9
- import T from "./whiteboard-toolbar.js";
10
- const $ = s(({ userType: t, renderAs: r }) => {
11
- const f = u(t, r), { activeInstance: o, activeTool: i, activeColor: e } = C();
12
- return a(() => {
13
- o && (e && o.setColor(p[e]), i && (o == null || o.setTool(i)));
14
- }, [e, i, o, r]), r === "whiteboard" ? /* @__PURE__ */ m(T, { tools: f, userType: t }) : /* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
15
- f.map((l) => /* @__PURE__ */ m(b, { tool: l, shouldAnimate: !0 }, l)),
9
+ import v from "./whiteboard-toolbar.js";
10
+ const T = s(({ userType: t, renderAs: r }) => {
11
+ const a = u(t, r), { activeInstance: o, activeTool: e, activeColor: i } = C();
12
+ return l(() => {
13
+ o && (i && o.setColor(p[i]), e && o.setTool(e));
14
+ }, [i, e, o, r]), r === "whiteboard" ? /* @__PURE__ */ m(v, { tools: a, userType: t }) : /* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
15
+ a.map((f) => /* @__PURE__ */ m(b, { tool: f, shouldAnimate: !0 }, f)),
16
16
  /* @__PURE__ */ m(x, { userType: t })
17
17
  ] });
18
- }), S = $;
18
+ }), S = T;
19
19
  export {
20
20
  S as default
21
21
  };
package/dist/features/cue-canvas/toolbar/toolbar.js.map CHANGED
@@ -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 { CANVAS_COLORS } from '../constants/constants';\nimport { 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\n useEffect(() => {\n if (cueCanvas) {\n if (activeColor) {\n cueCanvas.setColor(CANVAS_COLORS[activeColor]);\n }\n\n if (activeTool) {\n cueCanvas?.setTool(activeTool);\n }\n }\n }, [activeColor, activeTool, cueCanvas, renderAs]);\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} />\n </FlexView>\n );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","CANVAS_COLORS","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAc/D,SAZAC,EAAU,MAAM;AACd,IAAIJ,MACEE,KACQF,EAAA,SAASK,EAAcH,CAAW,CAAC,GAG3CD,MACFD,KAAA,QAAAA,EAAW,QAAQC;AAAA,KAGtB,CAACC,GAAaD,GAAYD,GAAWH,CAAQ,CAAC,GAE7CA,MAAa,eACR,gBAAAS,EAACC,GAAkB,EAAA,OAAAT,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAY,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMX,EAAA,IAAI,OACR,gBAAAQ,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACD,gBAAAL,EAACM,KAAgB,UAAAhB,GAAoB;AAAA,EACvC,EAAA,CAAA;AAEJ,CAAC,GAEDiB,IAAenB;"}
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 { CANVAS_COLORS } from '../constants/constants';\nimport { 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\n useEffect(() => {\n if (cueCanvas) {\n if (activeColor) {\n cueCanvas.setColor(CANVAS_COLORS[activeColor]);\n }\n\n if (activeTool) {\n cueCanvas.setTool(activeTool);\n }\n }\n }, [activeColor, activeTool, cueCanvas, renderAs]);\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} />\n </FlexView>\n );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","CANVAS_COLORS","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAc/D,SAZAC,EAAU,MAAM;AACd,IAAIJ,MACEE,KACQF,EAAA,SAASK,EAAcH,CAAW,CAAC,GAG3CD,KACFD,EAAU,QAAQC,CAAU;AAAA,KAG/B,CAACC,GAAaD,GAAYD,GAAWH,CAAQ,CAAC,GAE7CA,MAAa,eACR,gBAAAS,EAACC,GAAkB,EAAA,OAAAT,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAY,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMX,EAAA,IAAI,OACR,gBAAAQ,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACD,gBAAAL,EAACM,KAAgB,UAAAhB,GAAoB;AAAA,EACvC,EAAA,CAAA;AAEJ,CAAC,GAEDiB,IAAenB;"}