@cuemath/leap 2.8.50-as1 → 2.8.50-as3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/features/cue-canvas/cue-canvas-core.js +101 -122
- package/dist/features/cue-canvas/cue-canvas-core.js.map +1 -1
- package/dist/features/cue-canvas/cue-canvas-helpers.js +2 -5
- package/dist/features/cue-canvas/cue-canvas-helpers.js.map +1 -1
- package/dist/features/cue-canvas/cue-cavas-styled.js +45 -47
- package/dist/features/cue-canvas/cue-cavas-styled.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/{color-pallete.js → color-palette.js} +1 -1
- package/dist/features/cue-canvas/toolbar/color-palette.js.map +1 -0
- package/dist/features/cue-canvas/toolbar/{color-picker-button.js → color-picker-menu.js} +13 -13
- package/dist/features/cue-canvas/toolbar/color-picker-menu.js.map +1 -0
- package/dist/features/cue-canvas/toolbar/grid-menu.js +25 -20
- package/dist/features/cue-canvas/toolbar/grid-menu.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/pen-tool-menu.js +31 -40
- package/dist/features/cue-canvas/toolbar/pen-tool-menu.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/tool.js +34 -0
- package/dist/features/cue-canvas/toolbar/tool.js.map +1 -0
- package/dist/features/cue-canvas/toolbar/toolbar.js +18 -30
- package/dist/features/cue-canvas/toolbar/toolbar.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/whiteboard-toolbar.js +13 -22
- package/dist/features/cue-canvas/toolbar/whiteboard-toolbar.js.map +1 -1
- package/dist/features/worksheet/worksheet/worksheet-questions-controller/scribble-switch.js.map +1 -1
- package/package.json +1 -1
- package/dist/features/cue-canvas/hooks/use-tool-state.js +0 -34
- package/dist/features/cue-canvas/hooks/use-tool-state.js.map +0 -1
- package/dist/features/cue-canvas/toolbar/color-pallete.js.map +0 -1
- package/dist/features/cue-canvas/toolbar/color-picker-button.js.map +0 -1
- package/dist/features/cue-canvas/toolbar/tool-buttons.js +0 -21
- package/dist/features/cue-canvas/toolbar/tool-buttons.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrappper, 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 $isWhiteBoard: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $isWhiteBoard,\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 && !$isWhiteBoard ? '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 $isWhiteBoard,\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 && !$isWhiteBoard ? '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 $isWhiteBoard,\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 && !$isWhiteBoard ? '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 $isWhiteBoard,\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 && !$isWhiteBoard ? '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' | '$isWhiteBoard'>>(({\n theme,\n $active,\n}) => {\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\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\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 PalleteWrapper = 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)<ICueCanvasWrappper>(\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","$isWhiteBoard","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PalleteWrapper","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 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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n setActiveColor: (color: TCueCanvasColors) => void;\n activeColor: TCueCanvasColors;\n userType: TUserTypes;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(({ setActiveColor, activeColor, userType }) => {\n const handleColorChange = useCallback(\n (color: TCueCanvasColors) => {\n setActiveColor(color);\n },\n [setActiveColor],\n );\n const colors = useMemo(() => getColorsForUser(userType), [userType]);\n\n return (\n <>\n {colors.map((color, index) => (\n <Clickable\n key={index}\n onClick={() => handleColorChange(color)}\n label={`Color Picker - ${color}`}\n >\n <FlexView\n $width={22}\n $height={22}\n $borderRadius={11}\n $justifyContent=\"center\"\n $background={activeColor === color ? 'BLACK' : 'WHITE'}\n $alignItems=\"center\"\n >\n <ColorPicker\n $width={20}\n $height={20}\n $borderRadius={10}\n $color={color}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {activeColor === color && <StyledCheckIcon />}\n </ColorPicker>\n </FlexView>\n </Clickable>\n ))}\n </>\n );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","setActiveColor","activeColor","userType","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","Fragment","index","Clickable","FlexView","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAgBA,MAAMA,IAAwCC,EAAK,CAAC,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,QAAe;AAChG,QAAMC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAL,EAAeK,CAAK;AAAA,IACtB;AAAA,IACA,CAACL,CAAc;AAAA,EAAA,GAEXM,IAASC,EAAQ,MAAMC,EAAiBN,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAEnE,SAEK,gBAAAO,EAAAC,GAAA,EAAA,UAAAJ,EAAO,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,MACtC,OAAO,kBAAkBA,CAAK;AAAA,MAE9B,UAAA,gBAAAI;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,aAAaZ,MAAgBI,IAAQ,UAAU;AAAA,UAC/C,aAAY;AAAA,UAEZ,UAAA,gBAAAI;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,QAAQT;AAAA,cACR,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAEf,UAAAJ,MAAgBI,KAAS,gBAAAI,EAACM,GAAgB,CAAA,CAAA;AAAA,YAAA;AAAA,UAC7C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAtBKJ;AAAA,EAwBR,CAAA,EACH,CAAA;AAEJ,CAAC;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { jsxs as s, jsx as
|
|
1
|
+
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { memo as a, useRef as m } from "react";
|
|
3
3
|
import d from "../../ui/buttons/clickable/clickable.js";
|
|
4
4
|
import u from "../../ui/hooks/use-context-menu-click-handler.js";
|
|
5
5
|
import $ from "../../ui/layout/flex-view.js";
|
|
6
|
-
import { ColorPicker as f,
|
|
6
|
+
import { ColorPicker as f, PaletteWrapper as C } from "../cue-cavas-styled.js";
|
|
7
7
|
import { useCueCanvasActions as p } from "../hooks/use-cue-canvas-actions.js";
|
|
8
|
-
import b from "./color-
|
|
9
|
-
const W = a(({ userType:
|
|
10
|
-
const
|
|
11
|
-
|
|
8
|
+
import b from "./color-palette.js";
|
|
9
|
+
const W = a(({ userType: i }) => {
|
|
10
|
+
const o = m(null), { activeColor: r, setActiveColor: l, isWritingToolActive: t } = p(), { menuVisible: n, onMenuClick: c } = u(
|
|
11
|
+
o,
|
|
12
12
|
void 0,
|
|
13
13
|
!0,
|
|
14
14
|
void 0
|
|
@@ -23,18 +23,18 @@ const W = a(({ userType: t }) => {
|
|
|
23
23
|
$borderRadius: 16,
|
|
24
24
|
$background: "WHITE",
|
|
25
25
|
children: [
|
|
26
|
-
/* @__PURE__ */
|
|
26
|
+
/* @__PURE__ */ e(d, { onClick: c, label: "Color Picker", disabled: !t, children: /* @__PURE__ */ e(
|
|
27
27
|
f,
|
|
28
28
|
{
|
|
29
29
|
$width: 22,
|
|
30
30
|
$height: 22,
|
|
31
31
|
$borderRadius: 11,
|
|
32
32
|
$color: r,
|
|
33
|
-
$opacity:
|
|
34
|
-
ref:
|
|
33
|
+
$opacity: t ? 1 : 0.5,
|
|
34
|
+
ref: o
|
|
35
35
|
}
|
|
36
36
|
) }),
|
|
37
|
-
n && /* @__PURE__ */
|
|
37
|
+
n && /* @__PURE__ */ e(
|
|
38
38
|
C,
|
|
39
39
|
{
|
|
40
40
|
$background: "WHITE",
|
|
@@ -42,12 +42,12 @@ const W = a(({ userType: t }) => {
|
|
|
42
42
|
$gapX: 0.5,
|
|
43
43
|
$borderRadius: 10,
|
|
44
44
|
$flexDirection: "row",
|
|
45
|
-
children: /* @__PURE__ */
|
|
45
|
+
children: /* @__PURE__ */ e(
|
|
46
46
|
b,
|
|
47
47
|
{
|
|
48
48
|
setActiveColor: l,
|
|
49
49
|
activeColor: r,
|
|
50
|
-
userType:
|
|
50
|
+
userType: i
|
|
51
51
|
}
|
|
52
52
|
)
|
|
53
53
|
}
|
|
@@ -59,4 +59,4 @@ const W = a(({ userType: t }) => {
|
|
|
59
59
|
export {
|
|
60
60
|
W as default
|
|
61
61
|
};
|
|
62
|
-
//# sourceMappingURL=color-picker-
|
|
62
|
+
//# sourceMappingURL=color-picker-menu.js.map
|
|
@@ -0,0 +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, isWritingToolActive } = 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 >\n <Clickable onClick={onMenuClick} label=\"Color Picker\" disabled={!isWritingToolActive}>\n <ColorPicker\n $width={22}\n $height={22}\n $borderRadius={11}\n $color={activeColor}\n $opacity={isWritingToolActive ? 1 : 0.5}\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 >\n <ColorPalette\n setActiveColor={setActiveColor}\n activeColor={activeColor}\n userType={userType}\n />\n </PaletteWrapper>\n )}\n </FlexView>\n );\n});\n\nexport default ColorPickerMenu;\n"],"names":["ColorPickerMenu","memo","userType","colorPaletteRef","useRef","activeColor","setActiveColor","isWritingToolActive","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PaletteWrapper","ColorPalette"],"mappings":";;;;;;;;AAgBA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,UAAAC,QAAe;AACjE,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,qBAAAC,MAAwBC,EAAoB,GAE3E,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAACC,KAAU,SAASL,GAAa,OAAM,gBAAe,UAAU,CAACH,GAC/D,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQX;AAAA,YACR,UAAUE,IAAsB,IAAI;AAAA,YACpC,KAAKJ;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCM,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YAEf,UAAA,gBAAAH;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAZ;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAH;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
|
|
@@ -1,23 +1,28 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as f, useRef as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
1
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { memo as f, useRef as C, useCallback as $ } from "react";
|
|
3
|
+
import n from "../../ui/buttons/clickable/clickable.js";
|
|
4
|
+
import h from "../../ui/hooks/use-context-menu-click-handler.js";
|
|
5
5
|
import t from "../../ui/layout/flex-view.js";
|
|
6
|
-
import { GRID_NAMES as
|
|
7
|
-
import { StyledWrapper as
|
|
8
|
-
import { useCueCanvasActions as
|
|
6
|
+
import { GRID_NAMES as b } from "../cue-canvas-helpers.js";
|
|
7
|
+
import { StyledWrapper as k, MenuWrapper as G } from "../cue-cavas-styled.js";
|
|
8
|
+
import { useCueCanvasActions as l } from "../hooks/use-cue-canvas-actions.js";
|
|
9
9
|
import { GRID_TO_COMP as x } from "./icon-map.js";
|
|
10
|
-
const
|
|
11
|
-
const e =
|
|
12
|
-
|
|
10
|
+
const A = f(({ GridIcon: c }) => {
|
|
11
|
+
const { activeInstance: e } = l(), i = C(null), { activeTool: d } = l(), { menuVisible: m, onMenuClick: u } = h(
|
|
12
|
+
i,
|
|
13
13
|
void 0,
|
|
14
14
|
!0,
|
|
15
15
|
void 0
|
|
16
|
+
), p = $(
|
|
17
|
+
(o) => {
|
|
18
|
+
e == null || e.changeGrid(o);
|
|
19
|
+
},
|
|
20
|
+
[e]
|
|
16
21
|
);
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */ r(
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
return /* @__PURE__ */ a(t, { $gutterX: 0.25, ref: i, children: [
|
|
23
|
+
/* @__PURE__ */ r(n, { onClick: u, label: "grid", children: /* @__PURE__ */ r(k, { $active: d === "grid", children: /* @__PURE__ */ r(c, {}) }) }),
|
|
24
|
+
m && /* @__PURE__ */ r(
|
|
25
|
+
G,
|
|
21
26
|
{
|
|
22
27
|
$borderColor: "GREY_1",
|
|
23
28
|
$background: "GREY_1",
|
|
@@ -25,12 +30,12 @@ const W = f(({ onGridOptionClick: n, GridIcon: l }) => {
|
|
|
25
30
|
$widthX: 11.15,
|
|
26
31
|
$flexWrap: !0,
|
|
27
32
|
$flexGapX: 0.5,
|
|
28
|
-
children:
|
|
29
|
-
const
|
|
33
|
+
children: b.map((o) => {
|
|
34
|
+
const s = x[o];
|
|
30
35
|
return /* @__PURE__ */ r(
|
|
31
|
-
|
|
36
|
+
n,
|
|
32
37
|
{
|
|
33
|
-
onClick: () =>
|
|
38
|
+
onClick: () => p(o),
|
|
34
39
|
label: o,
|
|
35
40
|
children: /* @__PURE__ */ r(
|
|
36
41
|
t,
|
|
@@ -40,7 +45,7 @@ const W = f(({ onGridOptionClick: n, GridIcon: l }) => {
|
|
|
40
45
|
$borderColor: "BLACK",
|
|
41
46
|
$borderRadius: 4,
|
|
42
47
|
$background: "WHITE",
|
|
43
|
-
children: /* @__PURE__ */ r(
|
|
48
|
+
children: /* @__PURE__ */ r(s, {})
|
|
44
49
|
}
|
|
45
50
|
)
|
|
46
51
|
},
|
|
@@ -52,6 +57,6 @@ const W = f(({ onGridOptionClick: n, GridIcon: l }) => {
|
|
|
52
57
|
] });
|
|
53
58
|
});
|
|
54
59
|
export {
|
|
55
|
-
|
|
60
|
+
A as default
|
|
56
61
|
};
|
|
57
62
|
//# sourceMappingURL=grid-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { 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 { 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(({
|
|
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;AAAA,IACxB;AAAA,IACA,CAACV,CAAS;AAAA,EAAA;AAGZ,SACG,gBAAAW,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,57 +1,48 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { jsxs as r, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { memo as d, useRef as C } from "react";
|
|
3
|
+
import $ from "../../ui/buttons/clickable/clickable.js";
|
|
4
|
+
import v from "../../ui/hooks/use-context-menu-click-handler.js";
|
|
5
|
+
import m 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 { TOOLS_TO_COMP as
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
import { PenIconWrapper as T, StyledDownIcon as h, MenuWrapper as b } from "../cue-cavas-styled.js";
|
|
8
|
+
import { useCueCanvasActions as g } from "../hooks/use-cue-canvas-actions.js";
|
|
9
|
+
import x from "./color-palette.js";
|
|
10
|
+
import { TOOLS_TO_COMP as A } from "./icon-map.js";
|
|
11
|
+
import I from "./tool.js";
|
|
12
|
+
const _ = d(({ writingTools: s, userType: a }) => {
|
|
13
|
+
const { activeTool: e, activeColor: t, setActiveColor: u } = g(), i = C(null), { menuVisible: n, onMenuClick: f } = v(
|
|
14
|
+
i,
|
|
14
15
|
void 0,
|
|
15
16
|
!0,
|
|
16
17
|
void 0
|
|
17
|
-
),
|
|
18
|
-
return /* @__PURE__ */
|
|
19
|
-
/* @__PURE__ */
|
|
20
|
-
/* @__PURE__ */
|
|
21
|
-
|
|
18
|
+
), p = A[c(e) ? e : "pen"];
|
|
19
|
+
return /* @__PURE__ */ r(m, { $borderRadius: 16, $background: "WHITE", ref: i, children: [
|
|
20
|
+
/* @__PURE__ */ o(T, { children: /* @__PURE__ */ o($, { onClick: f, label: "Active Tool", children: /* @__PURE__ */ r(m, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
|
|
21
|
+
/* @__PURE__ */ o(
|
|
22
|
+
p,
|
|
22
23
|
{
|
|
23
|
-
$active: c(
|
|
24
|
-
$activeColor:
|
|
25
|
-
$
|
|
24
|
+
$active: c(e),
|
|
25
|
+
$activeColor: t,
|
|
26
|
+
$shouldAnimate: !1
|
|
26
27
|
}
|
|
27
28
|
),
|
|
28
|
-
/* @__PURE__ */
|
|
29
|
+
/* @__PURE__ */ o(h, { $isAnimating: n })
|
|
29
30
|
] }) }) }),
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
n && /* @__PURE__ */ r(
|
|
32
|
+
b,
|
|
32
33
|
{
|
|
33
34
|
$flexDirection: "row",
|
|
34
35
|
$alignItems: "center",
|
|
35
36
|
$borderColor: "GREY_1",
|
|
36
37
|
$background: "WHITE",
|
|
37
38
|
children: [
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
a,
|
|
42
|
-
{
|
|
43
|
-
$active: o === r,
|
|
44
|
-
$activeColor: i,
|
|
45
|
-
$isWhiteBoard: !0
|
|
46
|
-
}
|
|
47
|
-
) : /* @__PURE__ */ e(x, { $active: o === r, children: /* @__PURE__ */ e(a, {}) }) }) }, r);
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ e(
|
|
50
|
-
M,
|
|
39
|
+
s.map((l) => /* @__PURE__ */ o(I, { tool: l, shouldAnimate: !1, withGutter: !0 }, l)),
|
|
40
|
+
/* @__PURE__ */ o(
|
|
41
|
+
x,
|
|
51
42
|
{
|
|
52
|
-
setActiveColor:
|
|
53
|
-
activeColor:
|
|
54
|
-
userType:
|
|
43
|
+
setActiveColor: u,
|
|
44
|
+
activeColor: t,
|
|
45
|
+
userType: a
|
|
55
46
|
}
|
|
56
47
|
)
|
|
57
48
|
]
|
|
@@ -60,6 +51,6 @@ const S = h(({ writingTools: u, onToolClick: d, userType: C }) => {
|
|
|
60
51
|
] });
|
|
61
52
|
});
|
|
62
53
|
export {
|
|
63
|
-
|
|
54
|
+
_ as default
|
|
64
55
|
};
|
|
65
56
|
//# 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 {
|
|
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 ColorPalette from './color-palette';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools, userType }) => {\n const { activeTool, activeColor, setActiveColor } = 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\n <ColorPalette\n setActiveColor={setActiveColor}\n activeColor={activeColor}\n userType={userType}\n />\n </MenuWrapper>\n )}\n </FlexView>\n );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","userType","activeTool","activeColor","setActiveColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool","ColorPalette"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,GAAc,UAAAC,QAAe;AACzE,QAAM,EAAE,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,MAAmBC,EAAoB,GAElEC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBX,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGY,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,EAAiBX,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAY,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAA;AAAA,UAAapB,EAAA,IAAI,CAChBqB,MAAA,gBAAAN,EAACO,GAAK,EAAA,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,UAED,gBAAAN;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,gBAAAnB;AAAA,cACA,aAAAD;AAAA,cACA,UAAAF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { memo as p, useCallback as T } from "react";
|
|
3
|
+
import f from "../../ui/buttons/clickable/clickable.js";
|
|
4
|
+
import d from "../../ui/layout/flex-view.js";
|
|
5
|
+
import { STATELESS_TOOLS as C, getIsWritingTool as u } from "../cue-canvas-helpers.js";
|
|
6
|
+
import { StyledWrapper as v } from "../cue-cavas-styled.js";
|
|
7
|
+
import { useCueCanvasActions as O } from "../hooks/use-cue-canvas-actions.js";
|
|
8
|
+
import S from "./grid-menu.js";
|
|
9
|
+
import { TOOLS_TO_COMP as $ } from "./icon-map.js";
|
|
10
|
+
const h = ({ tool: o, withGutter: n, shouldAnimate: l }) => {
|
|
11
|
+
const e = $[o], {
|
|
12
|
+
activeInstance: i,
|
|
13
|
+
setActiveTool: m,
|
|
14
|
+
activeTool: c,
|
|
15
|
+
activeColor: a
|
|
16
|
+
} = O(), s = T(
|
|
17
|
+
(t) => {
|
|
18
|
+
i == null || i.setTool(t), C.has(t) || m(t);
|
|
19
|
+
},
|
|
20
|
+
[i, m]
|
|
21
|
+
);
|
|
22
|
+
return o === "grid" ? /* @__PURE__ */ r(S, { GridIcon: e }) : /* @__PURE__ */ r(d, { $gutterX: n ? 0.25 : 0, children: /* @__PURE__ */ r(f, { onClick: () => s(o), label: o, children: u(o) ? /* @__PURE__ */ r(
|
|
23
|
+
e,
|
|
24
|
+
{
|
|
25
|
+
$active: c === o,
|
|
26
|
+
$activeColor: a,
|
|
27
|
+
$shouldAnimate: l
|
|
28
|
+
}
|
|
29
|
+
) : /* @__PURE__ */ r(v, { $active: c === o, children: /* @__PURE__ */ r(e, {}) }) }) });
|
|
30
|
+
}, G = p(h);
|
|
31
|
+
export {
|
|
32
|
+
G as default
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=tool.js.map
|
|
@@ -0,0 +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,CAAC,MAAsB;AACrB,MAAAN,KAAA,QAAAA,EAAW,QAAQ,IAEdO,EAAgB,IAAI,CAAC,KACxBN,EAAc,CAAC;AAAA,IAEnB;AAAA,IACA,CAACD,GAAWC,CAAa;AAAA,EAAA;AAG3B,SAAIN,MAAS,SACJ,gBAAAa,EAACC,GAAS,EAAA,UAAUX,EAAe,CAAA,sBAIzCY,GAAS,EAAA,UAAUd,IAAa,OAAO,GACtC,UAAC,gBAAAY,EAAAG,GAAA,EAAU,SAAS,MAAMN,EAAYV,CAAI,GAAG,OAAOA,GACjD,UAAAiB,EAAiBjB,CAAI,IACpB,gBAAAa;AAAA,IAACV;AAAA,IAAA;AAAA,MACC,SAASI,MAAeP;AAAA,MACxB,cAAcQ;AAAA,MACd,gBAAgBN;AAAA,IAAA;AAAA,EAClB,IAEC,gBAAAW,EAAAK,GAAA,EAAc,SAASX,MAAeP,GACrC,UAAC,gBAAAa,EAAAV,GAAA,CAAc,CAAA,EACjB,CAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEegB,IAAAC,EAAKrB,CAAI;"}
|
|
@@ -1,34 +1,22 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
userType: o
|
|
18
|
-
}
|
|
19
|
-
) : /* @__PURE__ */ l(f, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
|
|
20
|
-
/* @__PURE__ */ t(
|
|
21
|
-
p,
|
|
22
|
-
{
|
|
23
|
-
tools: e,
|
|
24
|
-
onToolClick: i,
|
|
25
|
-
onGridOptionClick: m
|
|
26
|
-
}
|
|
27
|
-
),
|
|
28
|
-
/* @__PURE__ */ t(a, { userType: o })
|
|
1
|
+
import { jsx as m, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { memo as s, useEffect as a } from "react";
|
|
3
|
+
import c from "../../ui/layout/flex-view.js";
|
|
4
|
+
import { CANVAS_COLORS as p } from "../constants/constants.js";
|
|
5
|
+
import { getUserTools as u } from "../cue-canvas-helpers.js";
|
|
6
|
+
import { useCueCanvasActions as C } from "../hooks/use-cue-canvas-actions.js";
|
|
7
|
+
import x from "./color-picker-menu.js";
|
|
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)),
|
|
16
|
+
/* @__PURE__ */ m(x, { userType: t })
|
|
29
17
|
] });
|
|
30
|
-
}),
|
|
18
|
+
}), S = $;
|
|
31
19
|
export {
|
|
32
|
-
|
|
20
|
+
S as default
|
|
33
21
|
};
|
|
34
22
|
//# sourceMappingURL=toolbar.js.map
|
|
@@ -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 } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport {
|
|
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,25 +1,16 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{
|
|
14
|
-
tools: m,
|
|
15
|
-
onToolClick: t,
|
|
16
|
-
onGridOptionClick: e
|
|
17
|
-
}
|
|
18
|
-
)
|
|
19
|
-
] });
|
|
20
|
-
}
|
|
21
|
-
);
|
|
1
|
+
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { memo as s } from "react";
|
|
3
|
+
import n from "../../ui/layout/flex-view.js";
|
|
4
|
+
import a from "./pen-tool-menu.js";
|
|
5
|
+
import f from "./tool.js";
|
|
6
|
+
const h = s(({ tools: o, userType: i }) => {
|
|
7
|
+
const t = o.slice(0, 4), m = o.slice(4);
|
|
8
|
+
return /* @__PURE__ */ l(n, { $flexDirection: "row", $alignItems: "center", $flexGapX: 0.25, $position: "relative", children: [
|
|
9
|
+
/* @__PURE__ */ r(a, { writingTools: t, userType: i }),
|
|
10
|
+
m.map((e) => /* @__PURE__ */ r(f, { tool: e, shouldAnimate: !1 }, e))
|
|
11
|
+
] });
|
|
12
|
+
});
|
|
22
13
|
export {
|
|
23
|
-
|
|
14
|
+
h as default
|
|
24
15
|
};
|
|
25
16
|
//# sourceMappingURL=whiteboard-toolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport PenToolMenu from './pen-tool-menu';\nimport
|
|
1
|
+
{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport PenToolMenu from './pen-tool-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(({ tools, userType }) => {\n const writingTools = tools.slice(0, 4);\n const otherTools = tools.slice(4);\n\n return (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25} $position=\"relative\">\n <PenToolMenu writingTools={writingTools} userType={userType} />\n {otherTools.map(tool => (\n <Tool tool={tool} key={tool} shouldAnimate={false} />\n ))}\n </FlexView>\n );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","writingTools","otherTools","jsxs","FlexView","jsx","PenToolMenu","tool","Tool"],"mappings":";;;;;AASA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAC9E,QAAMC,IAAeF,EAAM,MAAM,GAAG,CAAC,GAC/BG,IAAaH,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAI,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAW,MAAM,WAAU,YAC7E,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAY,cAAAL,GAA4B,UAAAD,EAAoB,CAAA;AAAA,IAC5DE,EAAW,IAAI,CACdK,MAAA,gBAAAF,EAACG,KAAK,MAAAD,GAAuB,eAAe,GAArB,GAAAA,CAA4B,CACpD;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}
|
package/dist/features/worksheet/worksheet/worksheet-questions-controller/scribble-switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scribble-switch.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-questions-controller/scribble-switch.tsx"],"sourcesContent":["import React, { memo, useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport ScribbleIcon from '../../../../assets/line-icons/icons/scribble';\nimport
|
|
1
|
+
{"version":3,"file":"scribble-switch.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-questions-controller/scribble-switch.tsx"],"sourcesContent":["import React, { memo, useCallback } from 'react';\nimport styled from 'styled-components';\n\nimport ScribbleIcon from '../../../../assets/line-icons/icons/scribble';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport EVENTS from '../../constants/events';\n\ninterface IScribbleSwitchProps {\n isScribblingEnabled: boolean;\n setIsScribblingEnabled: (enabled: boolean) => void;\n isCanvasEnabled: boolean;\n loggerRef: React.MutableRefObject<(eventName: string, data?: Record<string, unknown>) => void>;\n canToggleScribbling?: boolean;\n}\n\nconst IconWrapper = styled(FlexView)<{ $active: boolean }>(\n ({ theme, $active }) => `\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: 1px solid black;\n &:hover {\n background-color: ${theme.colors.BLACK};\n svg path {\n stroke: ${theme.colors.WHITE};\n }\n }\n background-color: ${$active ? theme.colors.BLACK : theme.colors.WHITE};\n justify-content: center;\n align-items: center;\n svg path {\n stroke: ${$active ? theme.colors.WHITE : theme.colors.BLACK};\n }\n`,\n);\n\nconst ScribbleSwitch: React.FC<IScribbleSwitchProps> = memo(\n ({\n isScribblingEnabled,\n setIsScribblingEnabled,\n isCanvasEnabled,\n loggerRef,\n canToggleScribbling = true,\n }) => {\n const handleToggleScribble = useCallback(() => {\n setIsScribblingEnabled(!isScribblingEnabled);\n loggerRef.current(EVENTS.WORKSHEET_V3_SCRIBBLE_TOGGLE, {\n scribbling_enabled: !isScribblingEnabled,\n });\n }, [isScribblingEnabled, loggerRef, setIsScribblingEnabled]);\n\n if (!isCanvasEnabled) {\n // This is done to center align the QuestionNavBar for worksheets for whom scribbling is not enabled.\n return <FlexView $widthX={15.25} />;\n }\n\n return (\n <Clickable\n label=\"ScribbleSwitch Toggled\"\n onClick={handleToggleScribble}\n disabled={!canToggleScribbling}\n >\n <IconWrapper $active={isScribblingEnabled}>\n <ScribbleIcon />\n </IconWrapper>\n </Clickable>\n );\n },\n);\n\nexport default ScribbleSwitch;\n"],"names":["IconWrapper","styled","FlexView","theme","$active","ScribbleSwitch","memo","isScribblingEnabled","setIsScribblingEnabled","isCanvasEnabled","loggerRef","canToggleScribbling","handleToggleScribble","useCallback","EVENTS","jsx","Clickable","ScribbleIcon"],"mappings":";;;;;;;AAgBA,MAAMA,IAAcC,EAAOC,CAAQ;AAAA,EACjC,CAAC,EAAE,OAAAC,GAAO,SAAAC,EAAA,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMFD,EAAM,OAAO,KAAK;AAAA;AAAA,gBAE1BA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA,sBAGZC,IAAUD,EAAM,OAAO,QAAQA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,cAIzDC,IAAUD,EAAM,OAAO,QAAQA,EAAM,OAAO,KAAK;AAAA;AAAA;AAG/D,GAEME,IAAiDC;AAAA,EACrD,CAAC;AAAA,IACC,qBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,EAAA,MAClB;AACE,UAAAC,IAAuBC,EAAY,MAAM;AAC7C,MAAAL,EAAuB,CAACD,CAAmB,GACjCG,EAAA,QAAQI,EAAO,8BAA8B;AAAA,QACrD,oBAAoB,CAACP;AAAA,MAAA,CACtB;AAAA,IACA,GAAA,CAACA,GAAqBG,GAAWF,CAAsB,CAAC;AAE3D,WAAKC,IAMH,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAASJ;AAAA,QACT,UAAU,CAACD;AAAA,QAEX,4BAACX,GAAY,EAAA,SAASO,GACpB,UAAA,gBAAAQ,EAACE,IAAa,CAAA,GAChB;AAAA,MAAA;AAAA,IAAA,IAXK,gBAAAF,EAACb,GAAS,EAAA,SAAS,MAAO,CAAA;AAAA,EAcrC;AACF;"}
|