{ "version": 3, "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanel.tsx"], "sourcesContent": ["import {\n\tArrowShapeArrowheadEndStyle,\n\tArrowShapeArrowheadStartStyle,\n\tDefaultColorStyle,\n\tDefaultDashStyle,\n\tDefaultFillStyle,\n\tDefaultFontStyle,\n\tDefaultHorizontalAlignStyle,\n\tDefaultSizeStyle,\n\tDefaultVerticalAlignStyle,\n\tGeoShapeGeoStyle,\n\tLineShapeSplineStyle,\n\tReadonlySharedStyleMap,\n\tSharedStyle,\n\tStyleProp,\n\tminBy,\n\tuseEditor,\n} from '@tldraw/editor'\nimport React, { useCallback } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRevelantStyles'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\nimport { ButtonPicker } from '../primitives/ButtonPicker'\nimport { Slider } from '../primitives/Slider'\nimport { DoubleDropdownPicker } from './DoubleDropdownPicker'\nimport { DropdownPicker } from './DropdownPicker'\nimport { STYLES } from './styles'\n\ninterface StylePanelProps {\n\tisMobile?: boolean\n}\n\n/** @internal */\nexport const StylePanel = function StylePanel({ isMobile }: StylePanelProps) {\n\tconst editor = useEditor()\n\n\tconst relevantStyles = useRelevantStyles()\n\n\tconst handlePointerOut = useCallback(() => {\n\t\tif (!isMobile) {\n\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t}\n\t}, [editor, isMobile])\n\n\tif (!relevantStyles) return null\n\n\tconst { styles, opacity } = relevantStyles\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tconst font = styles.get(DefaultFontStyle)\n\n\tconst hideGeo = geo === undefined\n\tconst hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined\n\tconst hideSpline = spline === undefined\n\tconst hideText = font === undefined\n\n\treturn (\n\t\t
\n\t\t\t\n\t\t\t{!hideText && }\n\t\t\t{!(hideGeo && hideArrowHeads && hideSpline) && (\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t)}\n\t\t
\n\t)\n}\n\nfunction useStyleChangeCallback() {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\treturn function handleStyleChange(style: StyleProp, value: T, squashing: boolean) {\n\t\t\teditor.batch(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setStyleForSelectedShapes(style, value, { squashing })\n\t\t\t\t}\n\t\t\t\teditor.setStyleForNextShapes(style, value, { squashing })\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\t\t}\n\t}, [editor])\n}\n\nconst tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const\n\nfunction CommonStylePickerSet({\n\tstyles,\n\topacity,\n}: {\n\tstyles: ReadonlySharedStyleMap\n\topacity: SharedStyle\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst handleOpacityValueChange = React.useCallback(\n\t\t(value: number, ephemeral: boolean) => {\n\t\t\tconst item = tldrawSupportedOpacities[value]\n\t\t\teditor.batch(() => {\n\t\t\t\tif (editor.isIn('select')) {\n\t\t\t\t\teditor.setOpacityForSelectedShapes(item, { ephemeral })\n\t\t\t\t}\n\t\t\t\teditor.setOpacityForNextShapes(item, { ephemeral })\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: true })\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst color = styles.get(DefaultColorStyle)\n\tconst fill = styles.get(DefaultFillStyle)\n\tconst dash = styles.get(DefaultDashStyle)\n\tconst size = styles.get(DefaultSizeStyle)\n\n\tconst showPickers = fill !== undefined || dash !== undefined || size !== undefined\n\n\tconst opacityIndex =\n\t\topacity.type === 'mixed'\n\t\t\t? -1\n\t\t\t: tldrawSupportedOpacities.indexOf(\n\t\t\t\t\tminBy(tldrawSupportedOpacities, (supportedOpacity) =>\n\t\t\t\t\t\tMath.abs(supportedOpacity - opacity.value)\n\t\t\t\t\t)!\n\t\t\t )\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t{color === undefined ? null : (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t{opacity === undefined ? null : (\n\t\t\t\t\t= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\topacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonValueChange={handleOpacityValueChange}\n\t\t\t\t\t\tsteps={tldrawSupportedOpacities.length - 1}\n\t\t\t\t\t\ttitle={msg('style-panel.opacity')}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\n\t\t\t{showPickers && (\n\t\t\t\t
\n\t\t\t\t\t{fill === undefined ? null : (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\t{dash === undefined ? null : (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t\t{size === undefined ? null : (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t
\n\t\t\t)}\n\t\t\n\t)\n}\n\nfunction TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst msg = useTranslation()\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst font = styles.get(DefaultFontStyle)\n\tconst align = styles.get(DefaultHorizontalAlignStyle)\n\tconst verticalAlign = styles.get(DefaultVerticalAlignStyle)\n\tif (font === undefined && align === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t
\n\t\t\t{font === undefined ? null : (\n\t\t\t\t\n\t\t\t)}\n\n\t\t\t{align === undefined ? null : (\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t{verticalAlign === undefined ? (\n\t\t\t\t\t\t\n\t\t\t\t\t) : (\n\t\t\t\t\t\t\n\t\t\t\t\t)}\n\t\t\t\t
\n\t\t\t)}\n\t\t
\n\t)\n}\n\nfunction GeoStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst geo = styles.get(GeoShapeGeoStyle)\n\tif (geo === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t\n\t)\n}\n\nfunction SplineStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst spline = styles.get(LineShapeSplineStyle)\n\tif (spline === undefined) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t\n\t)\n}\n\nfunction ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {\n\tconst handleValueChange = useStyleChangeCallback()\n\n\tconst arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)\n\tconst arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)\n\tif (!arrowheadEnd || !arrowheadStart) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t\n\t)\n}\n"], "mappings": "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", "names": ["StylePanel"] }