@cuemath/leap 3.1.6-j1 → 3.1.6
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/assets/illustrations/illustrations.js +2 -1
- package/dist/assets/illustrations/illustrations.js.map +1 -1
- package/dist/assets/lib/lib.js +1 -1
- package/dist/assets/lib/lib.js.map +1 -1
- package/dist/assets/line-icons/icons/check.js +3 -3
- package/dist/assets/line-icons/icons/check.js.map +1 -1
- package/dist/assets/line-icons/icons/puzzle-icon.js +51 -0
- package/dist/assets/line-icons/icons/puzzle-icon.js.map +1 -0
- package/dist/assets/line-icons/icons/share.js +48 -0
- package/dist/assets/line-icons/icons/share.js.map +1 -0
- package/dist/assets/line-icons/icons/tile.js +54 -0
- package/dist/assets/line-icons/icons/tile.js.map +1 -0
- package/dist/features/auth/account-selector/account-selector.js +33 -57
- package/dist/features/auth/account-selector/account-selector.js.map +1 -1
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout-styles.js +12 -0
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout-styles.js.map +1 -0
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js +9 -8
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout.js.map +1 -1
- package/dist/features/auth/comps/auth-static-panel/auth-static-panel.js +1 -1
- package/dist/features/auth/comps/auth-static-panel/auth-static-panel.js.map +1 -1
- package/dist/features/auth/forgot-password/forgot-password-styled.js +3 -15
- package/dist/features/auth/forgot-password/forgot-password-styled.js.map +1 -1
- package/dist/features/auth/forgot-password/otp-form/otp-form.js +29 -29
- package/dist/features/auth/forgot-password/otp-form/otp-form.js.map +1 -1
- package/dist/features/auth/forgot-password/reset-password-form/reset-password-form.js +18 -14
- package/dist/features/auth/forgot-password/reset-password-form/reset-password-form.js.map +1 -1
- package/dist/features/auth/forgot-password/user-identifier-form/user-identifier-form.js +24 -23
- package/dist/features/auth/forgot-password/user-identifier-form/user-identifier-form.js.map +1 -1
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js +2 -4
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form-styled.js.map +1 -1
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js +75 -85
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js.map +1 -1
- package/dist/features/auth/login/social-account-not-found/social-account-not-found.js +21 -27
- package/dist/features/auth/login/social-account-not-found/social-account-not-found.js.map +1 -1
- package/dist/features/auth/login/social-login-methods/social-login-methods.js +34 -43
- package/dist/features/auth/login/social-login-methods/social-login-methods.js.map +1 -1
- package/dist/features/auth/login/username-password-form/username-password-form.js +21 -22
- package/dist/features/auth/login/username-password-form/username-password-form.js.map +1 -1
- package/dist/features/auth/user-list/user-item/user-item.js +32 -33
- package/dist/features/auth/user-list/user-item/user-item.js.map +1 -1
- package/dist/features/auth/user-list/user-list.js +51 -60
- package/dist/features/auth/user-list/user-list.js.map +1 -1
- package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js +74 -74
- package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js.map +1 -1
- package/dist/features/cue-canvas/bottombar/homework-controls.js +73 -0
- package/dist/features/cue-canvas/bottombar/homework-controls.js.map +1 -0
- package/dist/features/cue-canvas/constants/constants.js +33 -3
- package/dist/features/cue-canvas/constants/constants.js.map +1 -1
- package/dist/features/cue-canvas/cue-canvas-context.js +8 -5
- package/dist/features/cue-canvas/cue-canvas-context.js.map +1 -1
- package/dist/features/cue-canvas/cue-canvas-core.js +137 -114
- package/dist/features/cue-canvas/cue-canvas-core.js.map +1 -1
- package/dist/features/cue-canvas/cue-canvas-helpers.js +48 -38
- package/dist/features/cue-canvas/cue-canvas-helpers.js.map +1 -1
- package/dist/features/cue-canvas/cue-canvas-provider.js +21 -21
- package/dist/features/cue-canvas/cue-canvas-provider.js.map +1 -1
- package/dist/features/cue-canvas/cue-canvas.js +70 -62
- package/dist/features/cue-canvas/cue-canvas.js.map +1 -1
- package/dist/features/cue-canvas/cue-cavas-styled.js +48 -47
- package/dist/features/cue-canvas/cue-cavas-styled.js.map +1 -1
- package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js +47 -44
- package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map +1 -1
- package/dist/features/cue-canvas/hooks/use-config-updater.js +13 -0
- package/dist/features/cue-canvas/hooks/use-config-updater.js.map +1 -0
- package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js +18 -14
- package/dist/features/cue-canvas/hooks/use-cue-canvas-actions.js.map +1 -1
- package/dist/features/cue-canvas/hooks/use-height-extender.js +12 -10
- package/dist/features/cue-canvas/hooks/use-height-extender.js.map +1 -1
- package/dist/features/cue-canvas/hooks/use-upload-helper.js +23 -0
- package/dist/features/cue-canvas/hooks/use-upload-helper.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/homework/helper.js +20 -0
- package/dist/features/cue-canvas/sidebar/homework/helper.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/homework/homework-menu.js +33 -0
- package/dist/features/cue-canvas/sidebar/homework/homework-menu.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/homework/homework-request.js +68 -0
- package/dist/features/cue-canvas/sidebar/homework/homework-request.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/homework/homework-styled.js +25 -0
- package/dist/features/cue-canvas/sidebar/homework/homework-styled.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/homework/homework.js +39 -0
- package/dist/features/cue-canvas/sidebar/homework/homework.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/api/get-puzzles.js +13 -0
- package/dist/features/cue-canvas/sidebar/puzzles/api/get-puzzles.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/filter-selection-menu.js +60 -0
- package/dist/features/cue-canvas/sidebar/puzzles/filter-selection-menu.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/filters-section.js +44 -0
- package/dist/features/cue-canvas/sidebar/puzzles/filters-section.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/filters.js +107 -0
- package/dist/features/cue-canvas/sidebar/puzzles/filters.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/hooks/use-fetch-cue-canvas-activity.js +42 -0
- package/dist/features/cue-canvas/sidebar/puzzles/hooks/use-fetch-cue-canvas-activity.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/launch-puzzle.js +84 -0
- package/dist/features/cue-canvas/sidebar/puzzles/launch-puzzle.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu-header.js +36 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu-header.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu.js +133 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzles-styled.js +96 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzles-styled.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzles.js +29 -0
- package/dist/features/cue-canvas/sidebar/puzzles/puzzles.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/puzzles/utils.js +120 -0
- package/dist/features/cue-canvas/sidebar/puzzles/utils.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/sidebar-styled.js +32 -0
- package/dist/features/cue-canvas/sidebar/sidebar-styled.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/sidebar.js +29 -0
- package/dist/features/cue-canvas/sidebar/sidebar.js.map +1 -0
- package/dist/features/cue-canvas/sidebar/tiles/tile.js +16 -0
- package/dist/features/cue-canvas/sidebar/tiles/tile.js.map +1 -0
- package/dist/features/cue-canvas/toolbar/color-palette.js +42 -33
- package/dist/features/cue-canvas/toolbar/color-palette.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/color-picker-menu.js +28 -25
- package/dist/features/cue-canvas/toolbar/color-picker-menu.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/grid-menu.js +13 -13
- package/dist/features/cue-canvas/toolbar/grid-menu.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/pen-tool-menu.js +24 -35
- package/dist/features/cue-canvas/toolbar/pen-tool-menu.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/tool.js +22 -20
- package/dist/features/cue-canvas/toolbar/tool.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/toolbar.js +17 -18
- package/dist/features/cue-canvas/toolbar/toolbar.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/whiteboard-toolbar.js +13 -11
- package/dist/features/cue-canvas/toolbar/whiteboard-toolbar.js.map +1 -1
- package/dist/features/homework/hw-card-list/api/get-homeworks.js +1 -1
- package/dist/features/homework/hw-card-list/api/get-homeworks.js.map +1 -1
- package/dist/features/homework/hw-card-list/hw-card-list-utils.js +8 -0
- package/dist/features/homework/hw-card-list/hw-card-list-utils.js.map +1 -0
- package/dist/features/homework/hw-card-list/hw-card-list-view.js +144 -112
- package/dist/features/homework/hw-card-list/hw-card-list-view.js.map +1 -1
- package/dist/features/homework/styles.js +5 -4
- package/dist/features/homework/styles.js.map +1 -1
- package/dist/features/hooks/use-debounce.js +16 -0
- package/dist/features/hooks/use-debounce.js.map +1 -0
- package/dist/features/journey/hooks/use-home-page-journey/home-page-homeworks-mock.js +199 -262
- package/dist/features/journey/hooks/use-home-page-journey/home-page-homeworks-mock.js.map +1 -1
- package/dist/features/journey/hooks/use-home-page-journey/use-home-page-journey.js +15 -15
- package/dist/features/journey/hooks/use-home-page-journey/use-home-page-journey.js.map +1 -1
- package/dist/features/milestone/create/comps/add-custom-chapter/course-catalog.js +38 -36
- package/dist/features/milestone/create/comps/add-custom-chapter/course-catalog.js.map +1 -1
- package/dist/features/milestone/create/comps/add-custom-chapter/hooks/use-catalog-helpers.js +24 -22
- package/dist/features/milestone/create/comps/add-custom-chapter/hooks/use-catalog-helpers.js.map +1 -1
- package/dist/features/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapter-category/chapter-category-container.js +23 -22
- package/dist/features/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapter-category/chapter-category-container.js.map +1 -1
- package/dist/features/milestone/create/comps/chapters-selection-step/utils.js +49 -47
- package/dist/features/milestone/create/comps/chapters-selection-step/utils.js.map +1 -1
- package/dist/features/milestone/create/comps/class-details-step/class-details-step.js +94 -87
- package/dist/features/milestone/create/comps/class-details-step/class-details-step.js.map +1 -1
- package/dist/features/milestone/create/comps/class-details-step/class-details-utils.js +13 -12
- package/dist/features/milestone/create/comps/class-details-step/class-details-utils.js.map +1 -1
- package/dist/features/milestone/create/comps/test-type-step/test-type-step.js +23 -21
- package/dist/features/milestone/create/comps/test-type-step/test-type-step.js.map +1 -1
- package/dist/features/milestone/create/milestone-create-helpers.js +165 -162
- package/dist/features/milestone/create/milestone-create-helpers.js.map +1 -1
- package/dist/features/milestone/edit/comps/edit-milestone-modal/index.js +48 -47
- package/dist/features/milestone/edit/comps/edit-milestone-modal/index.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/api/get-past-milestone-count.js +18 -0
- package/dist/features/milestone/milestone-list-container/api/get-past-milestone-count.js.map +1 -0
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-list.js +100 -121
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-list.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.js +15 -14
- package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.js.map +1 -1
- package/dist/features/milestone/milestone-list-container/milestone-list-container.js +52 -51
- package/dist/features/milestone/milestone-list-container/milestone-list-container.js.map +1 -1
- package/dist/features/trial-session/comps/pricing/india-pricing/index.js +96 -0
- package/dist/features/trial-session/comps/pricing/india-pricing/index.js.map +1 -0
- package/dist/features/trial-session/comps/pricing/india-pricing/india-pricing-styled.js +59 -0
- package/dist/features/trial-session/comps/pricing/india-pricing/india-pricing-styled.js.map +1 -0
- package/dist/features/trial-session/comps/pricing/pricing.js +36 -35
- package/dist/features/trial-session/comps/pricing/pricing.js.map +1 -1
- package/dist/features/ui/buttons/button/button-styled.js +29 -29
- package/dist/features/ui/buttons/button/button-styled.js.map +1 -1
- package/dist/features/ui/stepper/stepper.js +7 -7
- package/dist/features/worksheet/worksheet/hooks/use-s3-helper.js +22 -19
- package/dist/features/worksheet/worksheet/hooks/use-s3-helper.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-container.js +26 -26
- package/dist/features/worksheet/worksheet/worksheet-container.js.map +1 -1
- package/dist/index.d.ts +104 -35
- package/dist/index.js +323 -321
- package/dist/index.js.map +1 -1
- package/dist/static/ellipse-clip.dfb25608.svg +1 -0
- package/dist/static/lib/{polypad-4.5.4.js → polypad-4.5.4.v1.js} +8 -1
- package/package.json +1 -1
- package/dist/features/auth/account-selector/account-selector-styled.js +0 -9
- package/dist/features/auth/account-selector/account-selector-styled.js.map +0 -1
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout-styled.js +0 -21
- package/dist/features/auth/comps/auth-page-layout/auth-page-layout-styled.js.map +0 -1
- package/dist/features/auth/login/login-styled.js +0 -13
- package/dist/features/auth/login/login-styled.js.map +0 -1
- package/dist/features/auth/login/social-login-methods/social-login-methods-styled.js +0 -9
- package/dist/features/auth/login/social-login-methods/social-login-methods-styled.js.map +0 -1
- package/dist/features/hooks/use-viewport.js +0 -21
- package/dist/features/hooks/use-viewport.js.map +0 -1
- package/dist/features/utils/media.js +0 -16
- package/dist/features/utils/media.js.map +0 -1
- package/dist/static/cuemath-app-qr-code.7205ee79.svg +0 -1
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"sidebar-styled.js","sources":["../../../../src/features/cue-canvas/sidebar/sidebar-styled.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../sidebar/puzzles/puzzles-type';\n\nimport styled, { css } from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\ninterface IStyledTileContainer {\n $activeSidebar?: TActiveSidebar;\n}\n\nexport const SideBarContainer = styled(FlexView)<IStyledTileContainer>(({\n theme,\n $activeSidebar,\n}) => {\n return css`\n z-index: ${theme.zIndex.TILE_CONTAINER};\n background-color: ${theme.colors.WHITE};\n padding: 7px;\n gap: 4px;\n border-radius: 8px;\n border: 1px solid ${theme.colors.BLACK_10};\n box-shadow: 0px 1px 5px 0px ${theme.colors.BLACK_10};\n\n ${$activeSidebar === 'tile' &&\n css`\n border: none;\n box-shadow: none;\n `}\n `;\n});\n\nexport const StyledToolContainer = styled(FlexView)`\n margin: auto;\n box-shadow: 0px 1px 5px 0px ${({ theme }) => theme.colors.BLACK_10};\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n`;\n"],"names":["SideBarContainer","styled","FlexView","theme","$activeSidebar","css"],"mappings":";;AAUO,MAAMA,IAAmBC,EAAOC,CAAQ,EAAwB,CAAC;AAAA,EACtE,OAAAC;AAAA,EACA,gBAAAC;AACF,MACSC;AAAA,eACMF,EAAM,OAAO,cAAc;AAAA,wBAClBA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,wBAIlBA,EAAM,OAAO,QAAQ;AAAA,kCACXA,EAAM,OAAO,QAAQ;AAAA;AAAA,MAEjDC,MAAmB,UACrBC;AAAA;AAAA;AAAA,KAGC;AAAA,GAEJ;AAEkCJ,EAAOC,CAAQ;AAAA;AAAA,gCAElB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { jsx as e, jsxs as n } from "react/jsx-runtime";
|
2
|
+
import { memo as p, useState as d, useMemo as f } from "react";
|
3
|
+
import c from "../../ui/layout/flex-view.js";
|
4
|
+
import o from "../../ui/separator/separator.js";
|
5
|
+
import l from "./homework/homework.js";
|
6
|
+
import s from "./puzzles/puzzles.js";
|
7
|
+
import { SideBarContainer as u } from "./sidebar-styled.js";
|
8
|
+
import x from "./tiles/tile.js";
|
9
|
+
const S = ({ grade: m, hwRequests: t }) => {
|
10
|
+
const [r, i] = d(), a = f(() => r === "tile" ? "300px" : r === "homework" ? "248px" : r === "puzzle" ? "650px" : "auto", [r]);
|
11
|
+
return /* @__PURE__ */ e(u, { $activeSidebar: r, $width: a, children: /* @__PURE__ */ n(c, { $flexDirection: "row", children: [
|
12
|
+
/* @__PURE__ */ e(x, { activeSidebar: r, setActiveSidebar: i }),
|
13
|
+
/* @__PURE__ */ e(o, { width: 8 }),
|
14
|
+
/* @__PURE__ */ e(s, { grade: m, activeSidebar: r, setActiveSidebar: i }),
|
15
|
+
/* @__PURE__ */ e(o, { width: 8 }),
|
16
|
+
t && t.length > 0 && /* @__PURE__ */ e(
|
17
|
+
l,
|
18
|
+
{
|
19
|
+
activeSidebar: r,
|
20
|
+
setActiveSidebar: i,
|
21
|
+
hwRequests: t
|
22
|
+
}
|
23
|
+
)
|
24
|
+
] }) });
|
25
|
+
}, B = p(S);
|
26
|
+
export {
|
27
|
+
B as default
|
28
|
+
};
|
29
|
+
//# sourceMappingURL=sidebar.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"sidebar.js","sources":["../../../../src/features/cue-canvas/sidebar/sidebar.tsx"],"sourcesContent":["import type { IHomeWorkHelpRequestModelWithStudentName } from './homework/homework-types';\nimport type { TActiveSidebar } from './puzzles/puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useMemo, useState } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Homework from './homework/homework';\nimport Puzzles from './puzzles/puzzles';\nimport { SideBarContainer } from './sidebar-styled';\nimport TileBar from './tiles/tile';\n\ninterface ISidebar {\n grade?: string;\n hwRequests?: IHomeWorkHelpRequestModelWithStudentName[];\n}\n\nconst Sidebar: FC<ISidebar> = ({ grade, hwRequests }) => {\n const [activeSidebar, setActiveSidebar] = useState<TActiveSidebar | undefined>();\n\n const width = useMemo(() => {\n if (activeSidebar === 'tile') {\n return '300px';\n }\n\n if (activeSidebar === 'homework') {\n return '248px';\n }\n\n if (activeSidebar === 'puzzle') {\n return '650px';\n }\n\n return 'auto';\n }, [activeSidebar]);\n\n return (\n <SideBarContainer $activeSidebar={activeSidebar} $width={width}>\n <FlexView $flexDirection=\"row\">\n <TileBar activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n <Separator width={8} />\n <Puzzles grade={grade} activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n <Separator width={8} />\n\n {hwRequests && hwRequests.length > 0 && (\n <Homework\n activeSidebar={activeSidebar}\n setActiveSidebar={setActiveSidebar}\n hwRequests={hwRequests}\n />\n )}\n </FlexView>\n </SideBarContainer>\n );\n};\n\nexport default memo(Sidebar);\n"],"names":["Sidebar","grade","hwRequests","activeSidebar","setActiveSidebar","useState","width","useMemo","jsx","SideBarContainer","jsxs","FlexView","TileBar","Separator","Puzzles","Homework","sidebar","memo"],"mappings":";;;;;;;;AAkBA,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAiB;AACvD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqC,GAEzEC,IAAQC,EAAQ,MAChBJ,MAAkB,SACb,UAGLA,MAAkB,aACb,UAGLA,MAAkB,WACb,UAGF,QACN,CAACA,CAAa,CAAC;AAGhB,SAAA,gBAAAK,EAACC,KAAiB,gBAAgBN,GAAe,QAAQG,GACvD,UAAA,gBAAAI,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAQ,eAAAT,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IAC3E,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IACpB,gBAAAL,EAAAM,GAAA,EAAQ,OAAAb,GAAc,eAAAE,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IACzF,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IAEpBX,KAAcA,EAAW,SAAS,KACjC,gBAAAM;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,eAAAZ;AAAA,QACA,kBAAAC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEec,IAAAC,EAAKjB,CAAO;"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
2
|
+
import { memo as c, useCallback as a } from "react";
|
3
|
+
import n from "../../../../assets/line-icons/icons/tile.js";
|
4
|
+
import { StyledWrapper as p } from "../../cue-cavas-styled.js";
|
5
|
+
import { useCueCanvasActions as d } from "../../hooks/use-cue-canvas-actions.js";
|
6
|
+
const C = c((s) => {
|
7
|
+
const { setActiveSidebar: t, activeSidebar: o } = s, { activeInstance: e, setActiveTool: i } = d(), m = a(() => {
|
8
|
+
const r = o !== "tile";
|
9
|
+
e == null || e.toggleTiles(r), t(r ? "tile" : void 0), i("move");
|
10
|
+
}, [o, e, t, i]);
|
11
|
+
return /* @__PURE__ */ l(p, { $active: o === "tile", onClick: m, children: /* @__PURE__ */ l(n, {}) });
|
12
|
+
});
|
13
|
+
export {
|
14
|
+
C as default
|
15
|
+
};
|
16
|
+
//# sourceMappingURL=tile.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"tile.js","sources":["../../../../../src/features/cue-canvas/sidebar/tiles/tile.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../puzzles/puzzles-type';\nimport type { Dispatch, FC, SetStateAction } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport TileIcon from '../../../../assets/line-icons/icons/tile';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\n\ninterface ITileBar {\n setActiveSidebar: Dispatch<SetStateAction<TActiveSidebar | undefined>>;\n activeSidebar?: TActiveSidebar;\n}\n\nconst TileBar: FC<ITileBar> = memo(props => {\n const { setActiveSidebar, activeSidebar } = props;\n const { activeInstance, setActiveTool } = useCueCanvasActions();\n\n const toggleTiles = useCallback(() => {\n const newTileState = activeSidebar !== 'tile';\n\n activeInstance?.toggleTiles(newTileState);\n setActiveSidebar(newTileState ? 'tile' : undefined);\n setActiveTool('move');\n }, [activeSidebar, activeInstance, setActiveSidebar, setActiveTool]);\n\n return (\n <StyledWrapper $active={activeSidebar === 'tile'} onClick={toggleTiles}>\n <TileIcon />\n </StyledWrapper>\n );\n});\n\nexport default TileBar;\n"],"names":["TileBar","memo","props","setActiveSidebar","activeSidebar","activeInstance","setActiveTool","useCueCanvasActions","toggleTiles","useCallback","newTileState","jsx","StyledWrapper","TileIcon"],"mappings":";;;;;AAcM,MAAAA,IAAwBC,EAAK,CAASC,MAAA;AACpC,QAAA,EAAE,kBAAAC,GAAkB,eAAAC,EAAkB,IAAAF,GACtC,EAAE,gBAAAG,GAAgB,eAAAC,EAAc,IAAIC,EAAoB,GAExDC,IAAcC,EAAY,MAAM;AACpC,UAAMC,IAAeN,MAAkB;AAEvC,IAAAC,KAAA,QAAAA,EAAgB,YAAYK,IACXP,EAAAO,IAAe,SAAS,MAAS,GAClDJ,EAAc,MAAM;AAAA,KACnB,CAACF,GAAeC,GAAgBF,GAAkBG,CAAa,CAAC;AAGjE,SAAA,gBAAAK,EAACC,KAAc,SAASR,MAAkB,QAAQ,SAASI,GACzD,UAAC,gBAAAG,EAAAE,GAAA,CAAS,CAAA,EACZ,CAAA;AAEJ,CAAC;"}
|
@@ -1,49 +1,58 @@
|
|
1
|
-
import { jsx as r
|
2
|
-
import { memo as
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
2
|
+
import { memo as $, useCallback as d, useMemo as C } from "react";
|
3
3
|
import h from "../../ui/buttons/clickable/clickable.js";
|
4
|
-
import
|
5
|
-
import { getColorsForUser as
|
6
|
-
import { ColorPicker as
|
7
|
-
const
|
8
|
-
const i = d(
|
4
|
+
import l from "../../ui/layout/flex-view.js";
|
5
|
+
import { getColorsForUser as f } from "../cue-canvas-helpers.js";
|
6
|
+
import { ColorPicker as p, StyledCheckIcon as u } from "../cue-cavas-styled.js";
|
7
|
+
const y = $((c) => {
|
8
|
+
const { setActiveColor: t, activeColor: i, userType: n, renderAs: o } = c, s = d(
|
9
9
|
(e) => {
|
10
10
|
t(e);
|
11
11
|
},
|
12
12
|
[t]
|
13
|
-
),
|
14
|
-
return /* @__PURE__ */ r(
|
15
|
-
|
13
|
+
), a = C(() => f(n, o), [n, o]);
|
14
|
+
return /* @__PURE__ */ r(
|
15
|
+
l,
|
16
16
|
{
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
17
|
+
$flexDirection: "row",
|
18
|
+
$flexWrap: !0,
|
19
|
+
$width: o === "canvas" ? 66 : 200,
|
20
|
+
$position: "relative",
|
21
|
+
children: a.map((e, m) => /* @__PURE__ */ r(
|
22
|
+
h,
|
21
23
|
{
|
22
|
-
|
23
|
-
|
24
|
-
$borderRadius: 11,
|
25
|
-
$justifyContent: "center",
|
26
|
-
$background: o === e ? "BLACK" : "WHITE",
|
27
|
-
$alignItems: "center",
|
24
|
+
onClick: () => s(e),
|
25
|
+
label: `Color Picker - ${e}`,
|
28
26
|
children: /* @__PURE__ */ r(
|
29
|
-
|
27
|
+
l,
|
30
28
|
{
|
31
|
-
$width:
|
32
|
-
$height:
|
33
|
-
$borderRadius:
|
34
|
-
$color: e,
|
35
|
-
$alignItems: "center",
|
29
|
+
$width: 22,
|
30
|
+
$height: 22,
|
31
|
+
$borderRadius: 11,
|
36
32
|
$justifyContent: "center",
|
37
|
-
|
33
|
+
$background: i === e ? "BLACK" : "WHITE",
|
34
|
+
$alignItems: "center",
|
35
|
+
children: /* @__PURE__ */ r(
|
36
|
+
p,
|
37
|
+
{
|
38
|
+
$width: 20,
|
39
|
+
$height: 20,
|
40
|
+
$borderRadius: 10,
|
41
|
+
$color: e,
|
42
|
+
$alignItems: "center",
|
43
|
+
$justifyContent: "center",
|
44
|
+
children: i === e && /* @__PURE__ */ r(u, {})
|
45
|
+
}
|
46
|
+
)
|
38
47
|
}
|
39
48
|
)
|
40
|
-
}
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
)
|
49
|
+
},
|
50
|
+
m
|
51
|
+
))
|
52
|
+
}
|
53
|
+
);
|
45
54
|
});
|
46
55
|
export {
|
47
|
-
|
56
|
+
y as default
|
48
57
|
};
|
49
58
|
//# sourceMappingURL=color-palette.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n setActiveColor: (color: TCueCanvasColors) => void;\n activeColor: TCueCanvasColors;\n userType: TUserTypes;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(
|
1
|
+
{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n setActiveColor: (color: TCueCanvasColors) => void;\n activeColor: TCueCanvasColors;\n userType: TUserTypes;\n renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n const { setActiveColor, activeColor, userType, renderAs } = props;\n const handleColorChange = useCallback(\n (color: TCueCanvasColors) => {\n setActiveColor(color);\n },\n [setActiveColor],\n );\n const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n return (\n <FlexView\n $flexDirection=\"row\"\n $flexWrap\n $width={renderAs === 'canvas' ? 66 : 200}\n $position=\"relative\"\n >\n {colors.map((color, index) => (\n <Clickable\n key={index}\n onClick={() => handleColorChange(color)}\n label={`Color Picker - ${color}`}\n >\n <FlexView\n $width={22}\n $height={22}\n $borderRadius={11}\n $justifyContent=\"center\"\n $background={activeColor === color ? 'BLACK' : 'WHITE'}\n $alignItems=\"center\"\n >\n <ColorPicker\n $width={20}\n $height={20}\n $borderRadius={10}\n $color={color}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {activeColor === color && <StyledCheckIcon />}\n </ColorPicker>\n </FlexView>\n </Clickable>\n ))}\n </FlexView>\n );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAiBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtDK,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK;AAAA,IACtB;AAAA,IACA,CAACN,CAAc;AAAA,EAAA,GAEXO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaV,MAAgBK,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAL,MAAgBK,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
@@ -1,20 +1,20 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { memo as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import { ColorPicker as
|
7
|
-
import { useCueCanvasActions as
|
8
|
-
import
|
9
|
-
const
|
10
|
-
const
|
11
|
-
|
1
|
+
import { jsxs as a, jsx as o } from "react/jsx-runtime";
|
2
|
+
import { memo as s, useRef as m } from "react";
|
3
|
+
import u from "../../ui/buttons/clickable/clickable.js";
|
4
|
+
import $ from "../../ui/hooks/use-context-menu-click-handler.js";
|
5
|
+
import d from "../../ui/layout/flex-view.js";
|
6
|
+
import { ColorPicker as p, PaletteWrapper as f } from "../cue-cavas-styled.js";
|
7
|
+
import { useCueCanvasActions as C } from "../hooks/use-cue-canvas-actions.js";
|
8
|
+
import h from "./color-palette.js";
|
9
|
+
const j = s(({ userType: i, renderAs: e }) => {
|
10
|
+
const r = m(null), { activeColor: t, setActiveColor: l } = C(), { menuVisible: n, onMenuClick: c } = $(
|
11
|
+
r,
|
12
12
|
void 0,
|
13
13
|
!0,
|
14
14
|
void 0
|
15
15
|
);
|
16
|
-
return /* @__PURE__ */
|
17
|
-
|
16
|
+
return /* @__PURE__ */ a(
|
17
|
+
d,
|
18
18
|
{
|
19
19
|
$width: 32,
|
20
20
|
$height: 32,
|
@@ -22,32 +22,35 @@ const W = a(({ userType: i }) => {
|
|
22
22
|
$justifyContent: "center",
|
23
23
|
$borderRadius: 16,
|
24
24
|
$background: "WHITE",
|
25
|
+
$position: "relative",
|
25
26
|
children: [
|
26
|
-
/* @__PURE__ */
|
27
|
-
|
27
|
+
/* @__PURE__ */ o(u, { onClick: c, label: "Color Picker", children: /* @__PURE__ */ o(
|
28
|
+
p,
|
28
29
|
{
|
29
30
|
$width: 22,
|
30
31
|
$height: 22,
|
31
32
|
$borderRadius: 11,
|
32
|
-
$color:
|
33
|
-
$opacity:
|
34
|
-
ref:
|
33
|
+
$color: t,
|
34
|
+
$opacity: 1,
|
35
|
+
ref: r
|
35
36
|
}
|
36
37
|
) }),
|
37
|
-
n && /* @__PURE__ */
|
38
|
-
|
38
|
+
n && /* @__PURE__ */ o(
|
39
|
+
f,
|
39
40
|
{
|
40
41
|
$background: "WHITE",
|
41
42
|
$gutterX: 0.5,
|
42
43
|
$gapX: 0.5,
|
43
44
|
$borderRadius: 10,
|
44
45
|
$flexDirection: "row",
|
45
|
-
|
46
|
-
|
46
|
+
$top: e === "canvas" ? -38 : -82,
|
47
|
+
children: /* @__PURE__ */ o(
|
48
|
+
h,
|
47
49
|
{
|
48
50
|
setActiveColor: l,
|
49
|
-
activeColor:
|
50
|
-
userType: i
|
51
|
+
activeColor: t,
|
52
|
+
userType: i,
|
53
|
+
renderAs: e
|
51
54
|
}
|
52
55
|
)
|
53
56
|
}
|
@@ -57,6 +60,6 @@ const W = a(({ userType: i }) => {
|
|
57
60
|
);
|
58
61
|
});
|
59
62
|
export {
|
60
|
-
|
63
|
+
j as default
|
61
64
|
};
|
62
65
|
//# sourceMappingURL=color-picker-menu.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"color-picker-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/color-picker-menu.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, 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 { ColorPicker, PaletteWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\n\ninterface ColorPickerMenuProps {\n userType: TUserTypes;\n}\n\nconst ColorPickerMenu: FC<ColorPickerMenuProps> = memo(({ userType }) => {\n const colorPaletteRef = useRef(null);\n const { activeColor, setActiveColor
|
1
|
+
{"version":3,"file":"color-picker-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/color-picker-menu.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TRenderAs } from '../types/cue-canvas';\nimport type { FC } from 'react';\n\nimport { memo, 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 { ColorPicker, PaletteWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\n\ninterface ColorPickerMenuProps {\n userType: TUserTypes;\n renderAs: TRenderAs;\n}\n\nconst ColorPickerMenu: FC<ColorPickerMenuProps> = memo(({ userType, renderAs }) => {\n const colorPaletteRef = useRef(null);\n const { activeColor, setActiveColor } = useCueCanvasActions();\n\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n colorPaletteRef,\n undefined,\n true,\n undefined,\n );\n\n return (\n <FlexView\n $width={32}\n $height={32}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n $background=\"WHITE\"\n $position=\"relative\"\n >\n <Clickable onClick={onMenuClick} label=\"Color Picker\">\n <ColorPicker\n $width={22}\n $height={22}\n $borderRadius={11}\n $color={activeColor}\n $opacity={1}\n ref={colorPaletteRef}\n />\n </Clickable>\n {menuVisible && (\n <PaletteWrapper\n $background=\"WHITE\"\n $gutterX={0.5}\n $gapX={0.5}\n $borderRadius={10}\n $flexDirection=\"row\"\n $top={renderAs === 'canvas' ? -38 : -82} //for one row(22+16) for 3 (22*3 +16) icon size 22 + padding\n >\n <ColorPalette\n setActiveColor={setActiveColor}\n activeColor={activeColor}\n userType={userType}\n renderAs={renderAs}\n />\n </PaletteWrapper>\n )}\n </FlexView>\n );\n});\n\nexport default ColorPickerMenu;\n"],"names":["ColorPickerMenu","memo","userType","renderAs","colorPaletteRef","useRef","activeColor","setActiveColor","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PaletteWrapper","ColorPalette"],"mappings":";;;;;;;;AAkBA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAC3E,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,EAAe,IAAIC,EAAoB,GAEtD,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAU,EAAA,SAASL,GAAa,OAAM,gBACrC,UAAA,gBAAAI;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQV;AAAA,YACR,UAAU;AAAA,YACV,KAAKF;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCK,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YACf,MAAMd,MAAa,WAAW,MAAM;AAAA,YAEpC,UAAA,gBAAAW;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAX;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAJ;AAAA,gBACA,UAAAC;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
|
@@ -1,27 +1,27 @@
|
|
1
1
|
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
2
2
|
import { memo as f, useRef as C, useCallback as $ } from "react";
|
3
|
-
import
|
3
|
+
import t from "../../ui/buttons/clickable/clickable.js";
|
4
4
|
import h from "../../ui/hooks/use-context-menu-click-handler.js";
|
5
|
-
import
|
5
|
+
import l from "../../ui/layout/flex-view.js";
|
6
6
|
import { GRID_NAMES as b } from "../cue-canvas-helpers.js";
|
7
7
|
import { StyledWrapper as k, MenuWrapper as G } from "../cue-cavas-styled.js";
|
8
|
-
import { useCueCanvasActions as
|
8
|
+
import { useCueCanvasActions as c } from "../hooks/use-cue-canvas-actions.js";
|
9
9
|
import { GRID_TO_COMP as x } from "./icon-map.js";
|
10
|
-
const A = f(({ GridIcon:
|
11
|
-
const { activeInstance: e } =
|
12
|
-
|
10
|
+
const A = f(({ GridIcon: d }) => {
|
11
|
+
const { activeInstance: e } = c(), n = C(null), { activeTool: m } = c(), { menuVisible: u, onMenuClick: i } = h(
|
12
|
+
n,
|
13
13
|
void 0,
|
14
14
|
!0,
|
15
15
|
void 0
|
16
16
|
), p = $(
|
17
17
|
(o) => {
|
18
|
-
e == null || e.changeGrid(o);
|
18
|
+
e == null || e.changeGrid(o), i();
|
19
19
|
},
|
20
|
-
[e]
|
20
|
+
[e, i]
|
21
21
|
);
|
22
|
-
return /* @__PURE__ */ a(
|
23
|
-
/* @__PURE__ */ r(
|
24
|
-
|
22
|
+
return /* @__PURE__ */ a(l, { $gutterX: 0.25, ref: n, children: [
|
23
|
+
/* @__PURE__ */ r(t, { onClick: i, label: "grid", children: /* @__PURE__ */ r(k, { $active: m === "grid", children: /* @__PURE__ */ r(d, {}) }) }),
|
24
|
+
u && /* @__PURE__ */ r(
|
25
25
|
G,
|
26
26
|
{
|
27
27
|
$borderColor: "GREY_1",
|
@@ -33,12 +33,12 @@ const A = f(({ GridIcon: c }) => {
|
|
33
33
|
children: b.map((o) => {
|
34
34
|
const s = x[o];
|
35
35
|
return /* @__PURE__ */ r(
|
36
|
-
|
36
|
+
t,
|
37
37
|
{
|
38
38
|
onClick: () => p(o),
|
39
39
|
label: o,
|
40
40
|
children: /* @__PURE__ */ r(
|
41
|
-
|
41
|
+
l,
|
42
42
|
{
|
43
43
|
$width: 48,
|
44
44
|
$height: 48,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useCallback, 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 { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ GridIcon }) => {\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n const gridMenuRef = useRef(null);\n const { activeTool } = useCueCanvasActions();\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n gridMenuRef,\n undefined,\n true,\n undefined,\n );\n const onGridOptionClick = useCallback(\n (gridOption: TCueCanvasGridName) => {\n cueCanvas?.changeGrid(gridOption);\n },\n [cueCanvas],\n );\n\n return (\n <FlexView $gutterX={0.25} ref={gridMenuRef}>\n <Clickable onClick={onMenuClick} label=\"grid\">\n <StyledWrapper $active={activeTool === 'grid'}>\n <GridIcon />\n </StyledWrapper>\n </Clickable>\n {menuVisible && (\n <MenuWrapper\n $borderColor=\"GREY_1\"\n $background=\"GREY_1\"\n $flexDirection=\"row\"\n $widthX={11.15}\n $flexWrap={true}\n $flexGapX={0.5}\n >\n {GRID_NAMES.map(gridName => {\n const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n return (\n <Clickable\n key={gridName}\n onClick={() => onGridOptionClick(gridName)}\n label={gridName}\n >\n <FlexView\n $width={48}\n $height={48}\n $borderColor=\"BLACK\"\n $borderRadius={4}\n $background=\"WHITE\"\n >\n <GridComponent />\n </FlexView>\n </Clickable>\n );\n })}\n </MenuWrapper>\n )}\n </FlexView>\n );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAC3D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAO,IAAI,GACzB,EAAE,YAAAC,MAAeH,KACjB,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU
|
1
|
+
{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useCallback, 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 { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ GridIcon }) => {\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n const gridMenuRef = useRef(null);\n const { activeTool } = useCueCanvasActions();\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n gridMenuRef,\n undefined,\n true,\n undefined,\n );\n const onGridOptionClick = useCallback(\n (gridOption: TCueCanvasGridName) => {\n cueCanvas?.changeGrid(gridOption);\n onMenuClick();\n },\n [cueCanvas, onMenuClick],\n );\n\n return (\n <FlexView $gutterX={0.25} ref={gridMenuRef}>\n <Clickable onClick={onMenuClick} label=\"grid\">\n <StyledWrapper $active={activeTool === 'grid'}>\n <GridIcon />\n </StyledWrapper>\n </Clickable>\n {menuVisible && (\n <MenuWrapper\n $borderColor=\"GREY_1\"\n $background=\"GREY_1\"\n $flexDirection=\"row\"\n $widthX={11.15}\n $flexWrap={true}\n $flexGapX={0.5}\n >\n {GRID_NAMES.map(gridName => {\n const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n return (\n <Clickable\n key={gridName}\n onClick={() => onGridOptionClick(gridName)}\n label={gridName}\n >\n <FlexView\n $width={48}\n $height={48}\n $borderColor=\"BLACK\"\n $borderRadius={4}\n $background=\"WHITE\"\n >\n <GridComponent />\n </FlexView>\n </Clickable>\n );\n })}\n </MenuWrapper>\n )}\n </FlexView>\n );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAC3D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAO,IAAI,GACzB,EAAE,YAAAC,MAAeH,KACjB,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU,IACVJ;IACd;AAAA,IACA,CAACN,GAAWM,CAAW;AAAA,EAAA;AAGzB,SACG,gBAAAK,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKV,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAASR,GAAa,OAAM,QACrC,UAAA,gBAAAO,EAACE,GAAc,EAAA,SAASX,MAAe,QACrC,UAAC,gBAAAS,EAAAd,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCM,KACC,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMN,EAAkBU,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,EAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,YAZKD;AAAA,UAAA;AAAA,QAaP,CAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
|
@@ -1,56 +1,45 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { memo as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
2
|
+
import { memo as f, useRef as p } from "react";
|
3
|
+
import d from "../../ui/buttons/clickable/clickable.js";
|
4
|
+
import C from "../../ui/hooks/use-context-menu-click-handler.js";
|
5
|
+
import l from "../../ui/layout/flex-view.js";
|
6
6
|
import { getIsWritingTool as c } from "../cue-canvas-helpers.js";
|
7
|
-
import { PenIconWrapper as
|
8
|
-
import { useCueCanvasActions as
|
9
|
-
import
|
10
|
-
import
|
11
|
-
|
12
|
-
const
|
13
|
-
|
14
|
-
i,
|
7
|
+
import { PenIconWrapper as $, StyledDownIcon as T, MenuWrapper as v } from "../cue-cavas-styled.js";
|
8
|
+
import { useCueCanvasActions as h } from "../hooks/use-cue-canvas-actions.js";
|
9
|
+
import { TOOLS_TO_COMP as b } from "./icon-map.js";
|
10
|
+
import g from "./tool.js";
|
11
|
+
const D = f(({ writingTools: m }) => {
|
12
|
+
const { activeTool: o, activeColor: s } = h(), r = p(null), { menuVisible: n, onMenuClick: a } = C(
|
13
|
+
r,
|
15
14
|
void 0,
|
16
15
|
!0,
|
17
16
|
void 0
|
18
|
-
),
|
19
|
-
return /* @__PURE__ */
|
20
|
-
/* @__PURE__ */
|
21
|
-
/* @__PURE__ */
|
22
|
-
|
17
|
+
), u = b[c(o) ? o : "pen"];
|
18
|
+
return /* @__PURE__ */ i(l, { $borderRadius: 16, $background: "WHITE", ref: r, children: [
|
19
|
+
/* @__PURE__ */ e($, { children: /* @__PURE__ */ e(d, { onClick: a, label: "Active Tool", children: /* @__PURE__ */ i(l, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
|
20
|
+
/* @__PURE__ */ e(
|
21
|
+
u,
|
23
22
|
{
|
24
|
-
$active: c(
|
25
|
-
$activeColor:
|
23
|
+
$active: c(o),
|
24
|
+
$activeColor: s,
|
26
25
|
$shouldAnimate: !1
|
27
26
|
}
|
28
27
|
),
|
29
|
-
/* @__PURE__ */
|
28
|
+
/* @__PURE__ */ e(T, { $isAnimating: n })
|
30
29
|
] }) }) }),
|
31
|
-
n && /* @__PURE__ */
|
32
|
-
|
30
|
+
n && /* @__PURE__ */ e(
|
31
|
+
v,
|
33
32
|
{
|
34
33
|
$flexDirection: "row",
|
35
34
|
$alignItems: "center",
|
36
35
|
$borderColor: "GREY_1",
|
37
36
|
$background: "WHITE",
|
38
|
-
children:
|
39
|
-
s.map((l) => /* @__PURE__ */ o(I, { tool: l, shouldAnimate: !1, withGutter: !0 }, l)),
|
40
|
-
/* @__PURE__ */ o(
|
41
|
-
x,
|
42
|
-
{
|
43
|
-
setActiveColor: u,
|
44
|
-
activeColor: t,
|
45
|
-
userType: a
|
46
|
-
}
|
47
|
-
)
|
48
|
-
]
|
37
|
+
children: m.map((t) => /* @__PURE__ */ e(g, { tool: t, shouldAnimate: !1, withGutter: !0 }, t))
|
49
38
|
}
|
50
39
|
)
|
51
40
|
] });
|
52
41
|
});
|
53
42
|
export {
|
54
|
-
|
43
|
+
D as default
|
55
44
|
};
|
56
45
|
//# sourceMappingURL=pen-tool-menu.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, 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 { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport
|
1
|
+
{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, 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 { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools }) => {\n const { activeTool, activeColor } = useCueCanvasActions();\n\n const penMenuRef = useRef(null);\n const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n penMenuRef,\n undefined,\n true,\n undefined,\n );\n\n const ActiveToolComponent = TOOLS_TO_COMP[\n getIsWritingTool(activeTool) ? activeTool : 'pen'\n ] as TToolComponentType;\n\n return (\n <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n <PenIconWrapper>\n <Clickable onClick={onMenuClick} label=\"Active Tool\">\n <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n <ActiveToolComponent\n $active={getIsWritingTool(activeTool)}\n $activeColor={activeColor}\n $shouldAnimate={false}\n />\n <StyledDownIcon $isAnimating={menuVisible} />\n </FlexView>\n </Clickable>\n </PenIconWrapper>\n {menuVisible && (\n <MenuWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $borderColor=\"GREY_1\"\n $background=\"WHITE\"\n >\n {writingTools.map(tool => (\n <Tool tool={tool} key={tool} shouldAnimate={false} withGutter />\n ))}\n </MenuWrapper>\n )}\n </FlexView>\n );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","activeTool","activeColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,QAAmB;AAC/D,QAAM,EAAE,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAoB,GAElDC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBV,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGW,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBV,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAW,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAO;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAAlB,EAAa,IAAI,CAAAmB,MACf,gBAAAN,EAAAO,GAAA,EAAK,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
|
@@ -1,34 +1,36 @@
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
2
|
-
import { memo as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import { STATELESS_TOOLS as
|
6
|
-
import { StyledWrapper as
|
2
|
+
import { memo as T, useCallback as d } from "react";
|
3
|
+
import C from "../../ui/buttons/clickable/clickable.js";
|
4
|
+
import u from "../../ui/layout/flex-view.js";
|
5
|
+
import { STATELESS_TOOLS as v, getIsWritingTool as h } from "../cue-canvas-helpers.js";
|
6
|
+
import { StyledWrapper as k } from "../cue-cavas-styled.js";
|
7
7
|
import { useCueCanvasActions as O } from "../hooks/use-cue-canvas-actions.js";
|
8
8
|
import S from "./grid-menu.js";
|
9
9
|
import { TOOLS_TO_COMP as $ } from "./icon-map.js";
|
10
|
-
const
|
11
|
-
const
|
12
|
-
activeInstance:
|
10
|
+
const A = ({ tool: o, withGutter: a, shouldAnimate: s }) => {
|
11
|
+
const t = $[o], {
|
12
|
+
activeInstance: e,
|
13
13
|
setActiveTool: m,
|
14
14
|
activeTool: c,
|
15
|
-
activeColor:
|
16
|
-
|
17
|
-
|
18
|
-
|
15
|
+
activeColor: f,
|
16
|
+
homeworkId: l,
|
17
|
+
setHomeworkId: n
|
18
|
+
} = O(), p = d(
|
19
|
+
(i) => {
|
20
|
+
e == null || e.setTool(i), i === "clearAll" && l && n(void 0), v.has(i) || m(i);
|
19
21
|
},
|
20
|
-
[
|
22
|
+
[e, l, m, n]
|
21
23
|
);
|
22
|
-
return o === "grid" ? /* @__PURE__ */ r(S, { GridIcon:
|
23
|
-
|
24
|
+
return o === "grid" ? /* @__PURE__ */ r(S, { GridIcon: t }) : /* @__PURE__ */ r(u, { $gutterX: a ? 0.25 : 0, children: /* @__PURE__ */ r(C, { onClick: () => p(o), label: o, children: h(o) ? /* @__PURE__ */ r(
|
25
|
+
t,
|
24
26
|
{
|
25
27
|
$active: c === o,
|
26
|
-
$activeColor:
|
27
|
-
$shouldAnimate:
|
28
|
+
$activeColor: f,
|
29
|
+
$shouldAnimate: s
|
28
30
|
}
|
29
|
-
) : /* @__PURE__ */ r(
|
30
|
-
},
|
31
|
+
) : /* @__PURE__ */ r(k, { $active: c === o, children: /* @__PURE__ */ r(t, {}) }) }) });
|
32
|
+
}, M = T(A);
|
31
33
|
export {
|
32
|
-
|
34
|
+
M as default
|
33
35
|
};
|
34
36
|
//# sourceMappingURL=tool.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n tool: TCueCanvasTool;\n withGutter?: boolean;\n shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n const {\n activeInstance: cueCanvas,\n setActiveTool,\n activeTool,\n activeColor,\n } = useCueCanvasActions();\n\n const onToolClick = useCallback(\n (t: TCueCanvasTool) => {\n cueCanvas?.setTool(t);\n\n if (!STATELESS_TOOLS.has(t)) {\n setActiveTool(t);\n }\n },\n [cueCanvas, setActiveTool],\n );\n\n if (tool === 'grid') {\n return <GridMenu GridIcon={ToolComponent} />;\n }\n\n return (\n <FlexView $gutterX={withGutter ? 0.25 : 0}>\n <Clickable onClick={() => onToolClick(tool)} label={tool}>\n {getIsWritingTool(tool) ? (\n <ToolComponent\n $active={activeTool === tool}\n $activeColor={activeColor}\n $shouldAnimate={shouldAnimate}\n />\n ) : (\n <StyledWrapper $active={activeTool === tool}>\n <ToolComponent />\n </StyledWrapper>\n )}\n </Clickable>\n </FlexView>\n );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","useCueCanvasActions","onToolClick","useCallback","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,
|
1
|
+
{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n tool: TCueCanvasTool;\n withGutter?: boolean;\n shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n const {\n activeInstance: cueCanvas,\n setActiveTool,\n activeTool,\n activeColor,\n homeworkId,\n setHomeworkId,\n } = useCueCanvasActions();\n\n const onToolClick = useCallback(\n (t: TCueCanvasTool) => {\n cueCanvas?.setTool(t);\n if (t === 'clearAll' && homeworkId) {\n setHomeworkId(undefined);\n }\n\n if (!STATELESS_TOOLS.has(t)) {\n setActiveTool(t);\n }\n },\n [cueCanvas, homeworkId, setActiveTool, setHomeworkId],\n );\n\n if (tool === 'grid') {\n return <GridMenu GridIcon={ToolComponent} />;\n }\n\n return (\n <FlexView $gutterX={withGutter ? 0.25 : 0}>\n <Clickable onClick={() => onToolClick(tool)} label={tool}>\n {getIsWritingTool(tool) ? (\n <ToolComponent\n $active={activeTool === tool}\n $activeColor={activeColor}\n $shouldAnimate={shouldAnimate}\n />\n ) : (\n <StyledWrapper $active={activeTool === tool}>\n <ToolComponent />\n </StyledWrapper>\n )}\n </Clickable>\n </FlexView>\n );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","homeworkId","setHomeworkId","useCueCanvasActions","onToolClick","useCallback","t","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAACC,MAAsB;AACrB,MAAAT,KAAA,QAAAA,EAAW,QAAQS,IACfA,MAAM,cAAcL,KACtBC,EAAc,MAAS,GAGpBK,EAAgB,IAAID,CAAC,KACxBR,EAAcQ,CAAC;AAAA,IAEnB;AAAA,IACA,CAACT,GAAWI,GAAYH,GAAeI,CAAa;AAAA,EAAA;AAGtD,SAAIV,MAAS,SACJ,gBAAAgB,EAACC,GAAS,EAAA,UAAUd,EAAe,CAAA,sBAIzCe,GAAS,EAAA,UAAUjB,IAAa,OAAO,GACtC,UAAC,gBAAAe,EAAAG,GAAA,EAAU,SAAS,MAAMP,EAAYZ,CAAI,GAAG,OAAOA,GACjD,UAAAoB,EAAiBpB,CAAI,IACpB,gBAAAgB;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,SAASI,MAAeP;AAAA,MACxB,cAAcQ;AAAA,MACd,gBAAgBN;AAAA,IAAA;AAAA,EAClB,IAEC,gBAAAc,EAAAK,GAAA,EAAc,SAASd,MAAeP,GACrC,UAAC,gBAAAgB,EAAAb,GAAA,CAAc,CAAA,EACjB,CAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAI;"}
|
@@ -1,22 +1,21 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import { memo as
|
3
|
-
import
|
4
|
-
import {
|
5
|
-
import {
|
6
|
-
import
|
7
|
-
import
|
8
|
-
import
|
9
|
-
|
10
|
-
const
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
/* @__PURE__ */ m(x, { userType: t })
|
1
|
+
import { jsx as a, jsxs as s } from "react/jsx-runtime";
|
2
|
+
import { memo as f, useEffect as c } from "react";
|
3
|
+
import l from "../../ui/layout/flex-view.js";
|
4
|
+
import { getUserTools as p } from "../cue-canvas-helpers.js";
|
5
|
+
import { useCueCanvasActions as u } from "../hooks/use-cue-canvas-actions.js";
|
6
|
+
import C from "./color-picker-menu.js";
|
7
|
+
import v from "./tool.js";
|
8
|
+
import x from "./whiteboard-toolbar.js";
|
9
|
+
const b = f(({ userType: t, renderAs: r }) => {
|
10
|
+
const m = p(t, r), { activeInstance: o, activeTool: e, activeColor: i } = u();
|
11
|
+
return c(() => {
|
12
|
+
o && (i && o.setColor(i), e && o.setTool(e));
|
13
|
+
}, [i, e, o, r]), r === "whiteboard" ? /* @__PURE__ */ a(x, { tools: m, userType: t }) : /* @__PURE__ */ s(l, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
|
14
|
+
m.map((n) => /* @__PURE__ */ a(v, { tool: n, shouldAnimate: !0 }, n)),
|
15
|
+
/* @__PURE__ */ a(C, { userType: t, renderAs: "canvas" })
|
17
16
|
] });
|
18
|
-
}),
|
17
|
+
}), k = b;
|
19
18
|
export {
|
20
|
-
|
19
|
+
k as default
|
21
20
|
};
|
22
21
|
//# sourceMappingURL=toolbar.js.map
|