\n {!recording ? : null}\n {recording ? : null}\n {recording && volume !== undefined ?
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"bar-chart-3d.story",name:"",Component:a.default,code:"() => {\n const ref = React.useRef\n onStartMoveCanvas({ x: e.clientX, y: e.clientY })}\n onMouseMove={e => {\n setHovering(undefined)\n const index = renderer.current?.pick?.(e.clientX, e.clientY, (g) => g.geometry.type === 'cylinder')\n if (index !== undefined) {\n const graphic = graphics.current[index]\n if (graphic.position) {\n setHovering({ value: graphic.position, x: e.clientX, y: e.clientY })\n }\n }\n }}\n />\n {hovering &&
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"bar-chart.story",name:"",Component:s.default,code:"() => {\n const size = useWindowSize()\n const width = size.width / 2\n const height = 500\n const target = reactSvgRenderTarget\n const [hovering, setHovering] = React.useState\n {target.renderResult(children, width, height, { attributes: { onMouseMove: e => setHovering(result.select({ x: e.clientX, y: e.clientY })) } })}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"circle-arc-click-create.story",name:"",Component:c.default,code:"() => {\n const [contents, setContents] = React.useState\n onClick({ x: e.clientX, y: e.clientY })}\n onMouseMove={(e) => onMove({ x: e.clientX, y: e.clientY })}\n >\n {[...contents, ellipse].map((content, i) => content &&
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"ellipse-edit.story",name:"",Component:b.default,code:"() => {\n const [content, setContent] = React.useState\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"equation-solver.story",name:"",Component:E.default,code:"() => {\n const { value, update, getArrayProps } = useJsonEditorData([\n { equation: 'a * x + b * y = c', variable: 'x' },\n { equation: 'x ** 2 + y ** 2 = r', variable: 'y' },\n ])\n const [isMath, setIsMath] = React.useState(false)\n const [equations, setEquations] = React.useState{printEquation(equation, { keepBinaryExpressionOrder })}}\n \n v, { equation: 'x = 1', variable: 'x' })}\n properties={value.map((f, i) => ({\n equation: draft[i].equation = v)} height={20} width={400} autoHeight />,\n variable: draft[i].variable = v)} />\n }))}\n />\n \n \n \n {equations.map((a, j) => (\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"expression-chart.story",name:"",Component:P.default,code:"() => {\n const { value, update, getArrayProps } = useJsonEditorData(['sin(x)'])\n const [hovering, setHovering] = React.useState\n {a.map((e, i) => (\n \n {!showText && renderEquation(reactSvgRenderTarget, e, { keepBinaryExpressionOrder })}\n {showText && }\n \n ))}\n
\n ))}\n {isMath && equations.map((a, j) => (\n {printEquation(e, { keepBinaryExpressionOrder })}\n {a.map((e, i) => (\n \n ))}\n
\n ))}\n {printMathStyleExpression(e.left)} = {printMathStyleExpression(e.right)}\n {result && children &&
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"expression-editor.story",name:"",Component:w.default,code:"() => {\n const [value, setValue] = React.useState('1 + 2 - 3')\n\n return (\n \n {target.renderResult(children, width, height, { attributes: { onMouseMove: e => setHovering(result.select({ x: e.clientX, y: e.clientY })) } })}\n
}\n \n v, '')}\n inline\n style={{ width: 'calc(50% - 30px)' }}\n items={value.map((f, i) => draft[i] = v)} />)}\n />\n
\n \n \n
\n \n
\n \n {equationResult.map((r, i) => \n
)}\n {error && x = {r}\n {error}
}\n \n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"flow-layout-block-editor.story",name:"",Component:_.default,code:"() => {\n const [state, setState] = React.useState(() => new Array(3).fill(0).map(() => ({\n children: new Array(20).fill(0).map(() => ({\n radius: 5 + Math.round(Math.random() * 20),\n color: Math.round(Math.random() * 0xffffff),\n })),\n blockStart: 5,\n blockEnd: 5\n })))\n const [align, setAlign] = React.useState\n \n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n {factors && factors.length > 0 && \n {factors.map((f, i) => )}\n
}\n {factors && {outputExpression(factorToExpression(f))}\n
}\n {expression && {outputExpression(factorsToExpression(factors))}\n \n \n \n
}\n {expression && renderExpression(reactSvgRenderTarget, expression)}\n {error && {outputExpression(expression)}\n \n \n {error}
}\n \n onClick({ x: e.clientX, y: e.clientY })}\n onMouseMove={(e) => onMove({ x: e.clientX, y: e.clientY })}\n >\n {[...contents, image].map((content, i) => content &&
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"image-editor.story",name:"",Component:A.default,code:"() => {\n const size = useWindowSize()\n return (\n \n onStartMoveCanvas({ x: e.clientX, y: e.clientY })}\n onMouseMove={e => {\n setHovering(undefined)\n const index = renderer.current?.pick?.(e.clientX, e.clientY, (g) => g.geometry.type === 'sphere')\n if (index !== undefined) {\n const graphic = graphics.current[index]\n if (graphic.position) {\n setHovering({ value: graphic.position, x: e.clientX, y: e.clientY })\n }\n }\n }}\n />\n {hovering &&
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"line-chart.story",name:"",Component:O.default,code:"() => {\n const size = useWindowSize()\n const width = size.width / 2\n const height = 300\n const target = reactSvgRenderTarget\n const [hovering, setHovering] = React.useState\n {target.renderResult(children, width, height, { attributes: { onMouseMove: e => setHovering(result.select({ x: e.clientX, y: e.clientY })) } })}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"line-click-create.story",name:"",Component:D.default,code:"() => {\n const [contents, setContents] = React.useState\n onClick({ x: e.clientX, y: e.clientY })}\n onMouseMove={(e) => onMove({ x: e.clientX, y: e.clientY })}\n >\n {[...contents, line].map((content, i) => content && `${p.x},${p.y}`).join(' ')}\n />)}\n \n {input}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"linear-dimension.story",name:"",Component:B.default,code:"() => {\n const dimension: LinearDimension = {\n p1: { x: 200, y: 200 },\n p2: { x: 300, y: 300 },\n position: {\n x: 400,\n y: 100,\n },\n fontFamily: 'monospace',\n fontSize: 16,\n direct: true,\n }\n const { regions, lines } = getLinearDimensionGeometries(\n dimension,\n dimensionStyle,\n (c) => getLinearDimensionTextPosition(c, dimensionStyle.margin, getTextSize)\n )\n const { textPosition, textRotation, text } = getLinearDimensionTextPosition(dimension, dimensionStyle.margin, getTextSize)\n return (\n \n {target.renderResult(children, width, height, { transform, attributes: { style: { border: '1px solid green' } } })}\n {minimap}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"opentype.story",name:"",Component:N.default,code:"() => {\n const size = useWindowSize()\n const width = size.width / 2\n const height = 300\n const { x, y, ref: wheelScrollRef, setX, setY } = useWheelScroll\n {target.renderResult(children, width, height, { transform: { x, y, scale }, backgroundColor })}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"partial-edit.story",name:"",Component:U.default,code:"() => {\n interface Content {\n value: number\n children?: Content[]\n }\n const [content, setContent] = React.useState\n setText(v)} />,\n 'font family': t.name)} setValue={v => setFontFamily(allFonts.find(t => t.name === v)?.name ?? allFonts[0].name)} />,\n 'font size': setFontSize(v)} />,\n 'render target': t.type)} setValue={v => setTarget(allRenderTargets.find(t => t.type === v) ?? allRenderTargets[0])} />,\n color: setColor(v)} />,\n 'background color': setBackgroundColor(v)} />,\n 'x scale': setXScale(v)} />,\n 'y scale': setYScale(v)} />,\n actions: ,\n }}\n />\n
\n \n {editingContent.value}\n {editingContent.children && editingContent.children.map((c, i) => (\n \n ))}\n
\n \n )\n}",props:[],componentName:"",parentComponentName:""},{path:"patch-based-undo-redo.story",name:"",Component:G.default,code:"() => {\n const { state, setState, undo, redo } = usePatchBasedUndoRedo(initialState, 'a')\n useGlobalKeyDown(e => {\n if (e.code === 'KeyZ' && metaKeyIfMacElseCtrlKey(e)) {\n if (e.shiftKey) {\n redo(e)\n } else {\n undo(e)\n }\n }\n })\n return (\n \n onClick({ x: e.clientX, y: e.clientY })}\n onMouseMove={(e) => onMove({ x: e.clientX, y: e.clientY })}\n >\n {[...contents, preview].map((content, i) => content && reactSvgRenderTarget.renderPathCommands(content, { strokeColor: 0x00ff00 })(i, 1, false, 800, 600))}\n \n {(['line', 'arc', 'bezierCurve', 'quadraticCurve', 'close'] as const).map(m => )}\n {input}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"pen-click-create.story",name:"",Component:V.default,code:"() => {\n const [contents, setContents] = React.useState\n onClick({ x: e.clientX, y: e.clientY })}\n onMouseMove={(e) => onMove({ x: e.clientX, y: e.clientY })}\n >\n {[...contents, points].map((content, i) => content && `${p.x},${p.y}`).join(' ')}\n />)}\n \n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"pendulum.story",name:"",Component:W.default,code:"() => {\n const size = useWindowSize()\n const width = size.width / 2\n const height = size.height\n const target = reactCanvasRenderTarget\n const center = { x: width / 2, y: height / 3 }\n const [length, setLength] = React.useState(width / 2)\n const [editing, setEditing] = React.useState(false)\n const [state, setState] = React.useState({ radian: -Math.PI / 4, speed: 0 })\n const [editingState, setEditingState] = React.useState<(typeof state) & { length: number }>()\n const [running, setRunning, runningRef] = useRefState(false)\n const [runningState, setRunningState, runningStateRef] = useRefState2\n {target.renderResult(children, width, height, { attributes: { onClick } })}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"pie-chart.story",name:"",Component:H.default,code:"() => {\n const size = useWindowSize()\n const width = size.width / 2\n const height = 350\n const target = reactSvgRenderTarget\n const [hovering, setHovering] = React.useState\n \n {runningState !== undefined && }\n {runningState === undefined && }\n
\n \n {target.renderResult(children, width, height, { attributes: { onMouseMove: e => setHovering(result.select({ x: e.clientX, y: e.clientY })) } })}\n {target.renderResult(children2, width, height, { attributes: { onMouseMove: e => setHovering2(result2.select({ x: e.clientX, y: e.clientY - height })) } })}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"point-snap.story",name:"",Component:q.default,code:"() => {\n const [position, setPosition] = React.useState\n {target.renderResult(children, width, height, { attributes: { onMouseMove: e => setHovering(result.select({ x: e.clientX, y: e.clientY })) } })}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"polygon-click-create.story",name:"",Component:X.default,code:"() => {\n const [contents, setContents] = React.useState\n onClick({ x: e.clientX, y: e.clientY })}\n onMouseMove={(e) => onMove({ x: e.clientX, y: e.clientY })}\n >\n {[...contents, polygon].map((content, i) => content && `${p.x},${p.y}`).join(' ')} />\n )}\n \n {input}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"polyline-edit.story",name:"",Component:Y.default,code:"() => {\n const [content, setContent] = React.useState([\n { x: 100, y: 100 },\n { x: 300, y: 200 },\n { x: 100, y: 200 },\n ])\n const { offset, onStart, mask, reset } = usePolylineEdit(() => setContent(points))\n const points = produce(content, (draft) => {\n if (offset) {\n for (const pointIndex of offset.pointIndexes) {\n draft[pointIndex].x += offset.x\n draft[pointIndex].y += offset.y\n }\n }\n })\n useGlobalKeyDown(e => {\n if (e.key === 'Escape') {\n reset()\n }\n })\n return (\n <>\n \n {target.renderResult(children, width, height, { attributes: { onMouseMove: e => setHovering(result.select({ x: e.clientX, y: e.clientY })) } })}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"radial-dimension.story",name:"",Component:Z.default,code:"() => {\n const circle: Circle = {\n x: 200,\n y: 200,\n r: 100,\n }\n const dimension: RadialDimension = {\n position: {\n x: 400,\n y: 300,\n },\n fontFamily: 'monospace',\n fontSize: 16,\n }\n const { regions, lines } = getRadialDimensionGeometries(\n dimension,\n circle,\n dimensionStyle,\n (d, c) => getRadialDimensionTextPosition(d, c, dimensionStyle.margin, getTextSize)\n )\n const { textPosition, textRotation, text } = getRadialDimensionTextPosition(dimension, circle, dimensionStyle.margin, getTextSize)\n return (\n \n setReadOnly(v)} /> read only\n
\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"react-render-target.story",name:"",Component:J.default,code:"() => {\n const renderArcs = \n
\n draft.stringExample = v)} />,\n 'A boolean example': draft.booleanExample = v)} />,\n 'A number example': draft.numberExample = v)} />,\n 'A object example': draft.objectExample.propertyExample1 = v)} />,\n 'Property example 2': draft.objectExample.propertyExample2 = v)} />,\n }}\n />,\n 'A inline object example': draft.inlineObjectExample.propertyExample1 = v)} />,\n 'Property example 2': draft.inlineObjectExample.propertyExample2 = v)} />,\n }}\n />,\n 'A array example': v.arrayExample, '')}\n items={value.arrayExample.map((f, i) => draft.arrayExample[i] = v)} />)}\n />,\n 'A inline array example': v.inlineArrayExample, '')}\n items={value.inlineArrayExample.map((f, i) => draft.inlineArrayExample[i] = v)} />)}\n />,\n 'A optional example': [\n draft.optionalExample = v ? '' : undefined)} />,\n value.optionalExample !== undefined ? draft.optionalExample = v)} /> : undefined,\n ],\n 'A enum example': draft.enumExample = v)} />,\n 'A enum example 2': draft.enumExample = v)} />,\n 'A color example': draft.colorExample = v)} />,\n 'A textarea example': draft.textareaExample = v)} />,\n 'A image preview example': draft.imagePreviewExample = v)} />,\n 'A item title example': v.itemTitleExample, { propertyExample1: '', propertyExample2: 0 })}\n title={(i) => value.itemTitleExample[i].propertyExample1}\n items={value.itemTitleExample.map((f, i) => draft.itemTitleExample[i].propertyExample1 = v)} />,\n 'Property example 2': draft.itemTitleExample[i].propertyExample2 = v)} />,\n }}\n />)}\n />,\n 'A inline object array example': v.inlineObjectArrayExample, { propertyExample1: '', propertyExample2: 0, propertyExample3: { propertyExample4: 0, propertyExample5: '' } })}\n properties={value.inlineObjectArrayExample.map((f, i) => ({\n 'Property example 1': draft.inlineObjectArrayExample[i].propertyExample1 = v)} />,\n 'Property example 2': draft.inlineObjectArrayExample[i].propertyExample2 = v)} />,\n 'Property example 3': draft.inlineObjectArrayExample[i].propertyExample3.propertyExample4 = v)} />,\n 'Property example 4': draft.inlineObjectArrayExample[i].propertyExample3.propertyExample5 = v)} />,\n }}\n /> draft.enumTitlesExample = v)} />,\n 'A enum array example': draft.enumArrayExample = v)} />,\n }}\n readOnly={readOnly}\n />\n
\n \n
\n \n
\n {renderCircles(reactSvgRenderTarget)}\n {renderCircles(reactCanvasRenderTarget)}\n {renderCircles(reactWebglRenderTarget)}\n {navigator.gpu && renderCircles(reactWebgpuRenderTarget)}\n
\n {renderTexts(reactSvgRenderTarget)}\n {renderTexts(reactCanvasRenderTarget)}\n {renderTexts(reactWebglRenderTarget)}\n {navigator.gpu && renderTexts(reactWebgpuRenderTarget)}\n
\n {renderEllipseArcs(reactSvgRenderTarget)}\n {renderEllipseArcs(reactCanvasRenderTarget)}\n {renderEllipseArcs(reactWebglRenderTarget)}\n {navigator.gpu && renderEllipseArcs(reactWebgpuRenderTarget)}\n
\n {renderEllipses(reactSvgRenderTarget)}\n {renderEllipses(reactCanvasRenderTarget)}\n {renderEllipses(reactWebglRenderTarget)}\n {navigator.gpu && renderEllipses(reactWebgpuRenderTarget)}\n
\n {renderRects(reactSvgRenderTarget)}\n {renderRects(reactCanvasRenderTarget)}\n {renderRects(reactWebglRenderTarget)}\n {navigator.gpu && renderRects(reactWebgpuRenderTarget)}\n
\n {renderPaths(reactSvgRenderTarget)}\n {renderPaths(reactCanvasRenderTarget)}\n {renderPaths(reactWebglRenderTarget)}\n {navigator.gpu && renderPaths(reactWebgpuRenderTarget)}\n
\n {renderImages(reactSvgRenderTarget)}\n {renderImages(reactCanvasRenderTarget)}\n {renderImages(reactWebglRenderTarget)}\n {navigator.gpu && renderImages(reactWebgpuRenderTarget)}\n
\n {renderPolylines(reactSvgRenderTarget)}\n {renderPolylines(reactCanvasRenderTarget)}\n {renderPolylines(reactWebglRenderTarget)}\n {navigator.gpu && renderPolylines(reactWebgpuRenderTarget)}\n
\n {renderPolygons(reactSvgRenderTarget)}\n {renderPolygons(reactCanvasRenderTarget)}\n {renderPolygons(reactWebglRenderTarget)}\n {navigator.gpu && renderPolygons(reactWebgpuRenderTarget)}\n
\n {renderPathCommands(reactSvgRenderTarget)}\n {renderPathCommands(reactCanvasRenderTarget)}\n {renderPathCommands(reactWebglRenderTarget)}\n {navigator.gpu && renderPathCommands(reactWebgpuRenderTarget)}\n
\n {renderGroups(reactSvgRenderTarget)}\n {renderGroups(reactCanvasRenderTarget)}\n {renderGroups(reactWebglRenderTarget)}\n {navigator.gpu && renderGroups(reactWebgpuRenderTarget)}\n
\n {renderRay(reactSvgRenderTarget)}\n {renderRay(reactCanvasRenderTarget)}\n {renderRay(reactWebglRenderTarget)}\n {navigator.gpu && renderRay(reactWebgpuRenderTarget)}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"region-alignment-line.story",name:"",Component:ee.default,code:"() => {\n const [contents, setContents] = React.useState(defaultContents)\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n\n const { regionAlignmentX, regionAlignmentY, changeOffsetByRegionAlignment, clearRegionAlignments } = useRegionAlignment(10)\n const { offset, onStart, mask, startPosition, resetDragMove } = useDragMove\n {reactSvgRenderTarget.type}\n {reactCanvasRenderTarget.type}\n {reactWebglRenderTarget.type}\n {navigator.gpu && {reactWebgpuRenderTarget.type}}\n
\n {renderArcs(reactSvgRenderTarget)}\n {renderArcs(reactCanvasRenderTarget)}\n {renderArcs(reactWebglRenderTarget)}\n {navigator.gpu && renderArcs(reactWebgpuRenderTarget)}\n \n {renderCircles(reactSvgRenderTarget)}\n {renderCircles(reactCanvasRenderTarget)}\n {renderCircles(reactWebglRenderTarget)}\n {navigator.gpu && renderCircles(reactWebgpuRenderTarget)}\n
\n {renderTexts(reactSvgRenderTarget)}\n {renderTexts(reactCanvasRenderTarget)}\n {renderTexts(reactWebglRenderTarget)}\n {navigator.gpu && renderTexts(reactWebgpuRenderTarget)}\n
\n {renderEllipseArcs(reactSvgRenderTarget)}\n {renderEllipseArcs(reactCanvasRenderTarget)}\n {renderEllipseArcs(reactWebglRenderTarget)}\n {navigator.gpu && renderEllipseArcs(reactWebgpuRenderTarget)}\n
\n {renderEllipses(reactSvgRenderTarget)}\n {renderEllipses(reactCanvasRenderTarget)}\n {renderEllipses(reactWebglRenderTarget)}\n {navigator.gpu && renderEllipses(reactWebgpuRenderTarget)}\n
\n {renderRects(reactSvgRenderTarget)}\n {renderRects(reactCanvasRenderTarget)}\n {renderRects(reactWebglRenderTarget)}\n {navigator.gpu && renderRects(reactWebgpuRenderTarget)}\n
\n {renderPaths(reactSvgRenderTarget)}\n {renderPaths(reactCanvasRenderTarget)}\n {renderPaths(reactWebglRenderTarget)}\n {navigator.gpu && renderPaths(reactWebgpuRenderTarget)}\n
\n {renderImages(reactSvgRenderTarget)}\n {renderImages(reactCanvasRenderTarget)}\n {renderImages(reactWebglRenderTarget)}\n {navigator.gpu && renderImages(reactWebgpuRenderTarget)}\n
\n {renderPolylines(reactSvgRenderTarget)}\n {renderPolylines(reactCanvasRenderTarget)}\n {renderPolylines(reactWebglRenderTarget)}\n {navigator.gpu && renderPolylines(reactWebgpuRenderTarget)}\n
\n {renderPolygons(reactSvgRenderTarget)}\n {renderPolygons(reactCanvasRenderTarget)}\n {renderPolygons(reactWebglRenderTarget)}\n {navigator.gpu && renderPolygons(reactWebgpuRenderTarget)}\n
\n {renderPathCommands(reactSvgRenderTarget)}\n {renderPathCommands(reactCanvasRenderTarget)}\n {renderPathCommands(reactWebglRenderTarget)}\n {navigator.gpu && renderPathCommands(reactWebgpuRenderTarget)}\n
\n {renderGroups(reactSvgRenderTarget)}\n {renderGroups(reactCanvasRenderTarget)}\n {renderGroups(reactWebglRenderTarget)}\n {navigator.gpu && renderGroups(reactWebgpuRenderTarget)}\n
\n {renderRay(reactSvgRenderTarget)}\n {renderRay(reactCanvasRenderTarget)}\n {renderRay(reactWebglRenderTarget)}\n {navigator.gpu && renderRay(reactWebgpuRenderTarget)}\n
\n \n \n \n \n {new Array(10).fill(1).map((_, i) => (\n addSelection([i])}\n >\n {i}\n \n ))}\n {message}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"selected.story",name:"",Component:re.default,code:"() => {\n const { isSelected, addSelection, onSelectedKeyDown } = useSelected({ maxCount: 3 })\n useGlobalKeyDown(e => {\n onSelectedKeyDown(e)\n })\n\n return (\n \n {new Array(10).fill(1).map((_, i) => (\n addSelection([[i]])}\n >\n {i}\n \n ))}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"text-click-create.story",name:"",Component:oe.default,code:"() => {\n const [contents, setContents] = React.useState\n onClick({ x: e.clientX, y: e.clientY })}\n onMouseMove={(e) => onMove({ x: e.clientX, y: e.clientY })}\n >\n {[...contents, text].map((content, i) => content && {content.text})}\n \n {input}\n
\n )\n}",props:[],componentName:"",parentComponentName:""},{path:"undo-redo.story",name:"",Component:ie.default,code:"() => {\n const { state, setState, undo, redo } = useUndoRedo({ count: 0 })\n useGlobalKeyDown(e => {\n if (e.code === 'KeyZ' && metaKeyIfMacElseCtrlKey(e)) {\n if (e.shiftKey) {\n redo(e)\n } else {\n undo(e)\n }\n }\n })\n return (\n \n {Math.round(width)} {Math.round(height)}\n
\n )\n}",props:[],componentName:"",parentComponentName:""}]},3613:(e,t,n)=>{"use strict";n.d(t,{default:()=>a});var r=n(3696),o=n.n(r),i=n(9758);const a=()=>{const[e,t]=o().useState(1),{zoomIn:n,zoomOut:r}=(0,i.useZoom)(e,t);return(0,i.useGlobalKeyDown)((e=>{(0,i.metaKeyIfMacElseCtrlKey)(e)&&("Minus"===e.code?r(e):"Equal"===e.code&&n(e))})),o().createElement("div",{style:{width:"300px",height:"300px",overflow:"hidden",position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid green"}},o().createElement("div",{style:{width:"800px",height:"800px",position:"absolute",transform:`scale(${e})`,background:"radial-gradient(50% 50% at 50% 50%, red 0%, white 100%)"}}))}},4565:(e,t,n)=>{"use strict";n.d(t,{default:()=>c});var r=n(8662),o=n(3696),i=n.n(o),a=n(9758),s=n(9299);const c=()=>{const[e,t]=i().useState(s.defaultContents),[n,o]=i().useState(0),{lineAlignmentX:c,lineAlignmentY:l,changeOffsetByLineAlignment:u,clearLineAlignments:p}=(0,a.useLineAlignment)(10),{offset:d,onStart:f,mask:g,resetDragResize:h}=(0,a.useDragResize)((()=>{p(),t((0,r.produce)(e,(e=>{e[n].x+=d.x,e[n].y+=d.y,e[n].width+=d.width,e[n].height+=d.height})))}),{centeredScaling:e=>e.shiftKey,transformOffset:(t,r,o)=>{if(!(null==r?void 0:r.metaKey)&&o){const r=e[n],i=e.filter((e=>e!==r)).map((e=>[e.x,e.x+e.width])).flat(),a=e.filter((e=>e!==r)).map((e=>[e.y,e.y+e.height])).flat();u(t,o,r,i,a)}else p();return t}});return(0,a.useGlobalKeyDown)((e=>{"Escape"===e.key&&h()})),i().createElement(i().Fragment,null,e.map(((e,t)=>i().createElement("div",{key:t,style:{width:`${e.width+(n===t?d.width:0)}px`,height:`${e.height+(n===t?d.height:0)}px`,left:`${e.x+(n===t?d.x:0)}px`,top:`${e.y+(n===t?d.y:0)}px`,position:"absolute",boxSizing:"border-box",border:n===t?"1px solid green":void 0},onClick:()=>o(t)},i().createElement("img",{src:e.url,style:{objectFit:"fill",width:"100%",height:"100%"}}),n===t&&i().createElement(a.ResizeBar,{onMouseDown:f})))),i().createElement(a.AlignmentLine,{type:"x",value:c}),i().createElement(a.AlignmentLine,{type:"y",value:l}),g)}},4855:(e,t,n)=>{"use strict";n.d(t,{default:()=>f});var r=n(3696),o=n.n(r),i=n(9758),a=Object.defineProperty,s=Object.defineProperties,c=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,d=(e,t,n)=>t in e?a(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;const f=()=>{const e=o().useRef(null),t=o().useRef(),{x:n,y:r,ref:a}=(0,i.useWheelScroll)(),{scale:f,ref:g}=(0,i.useWheelZoom)(),[h,m]=o().useState({x:0,y:0}),{offset:y,onStart:v,mask:x,resetDragMove:b}=(0,i.useDragMove)((()=>{m((e=>({x:e.x+y.x,y:e.y+y.y})))})),C=(0,i.useWindowSize)(),E=C.width/2,P=C.height,[w,k]=o().useState(),_=y.x+h.x,S=y.y+h.y,R=o().useRef([]);return o().useEffect((()=>{e.current&&!t.current&&(t.current=(0,i.createWebgl3DRenderer)(e.current))}),[e.current]),(0,i.useGlobalKeyDown)((e=>{"Escape"===e.key&&b()})),o().useEffect((()=>{const e=[65,59,80,81,56,55,40].map(((e,t)=>[20*(t+1),e,0])),t=[55,49,70,71,46,45,30].map(((e,t)=>[20*(t+1),e,20])),n=[45,39,60,61,36,35,20].map(((e,t)=>[20*(t+1),e,-20])),r=[75,69,90,91,66,65,50].map(((e,t)=>[20*(t+1),e,40])),o=(0,i.getChartAxis3D)([e,t,n,r],{x:20,y:10,z:20});R.current.push(...o,{geometry:{type:"line strip",points:e.flat()},color:[1,0,0,1]},...e.map((e=>({geometry:{type:"sphere",radius:1},color:[1,0,0,1],position:e}))),{geometry:{type:"line strip",points:(0,i.getBezierSplinePoints3D)(t,20).flat()},color:[0,1,0,1]},...t.map((e=>({geometry:{type:"sphere",radius:1},color:[0,1,0,1],position:e}))),{geometry:{type:"polygon",points:[...n.flat(),n[n.length-1][0],0,n[n.length-1][2],n[0][0],0,n[0][2]]},color:[0,0,1,1]},...n.map((e=>({geometry:{type:"sphere",radius:1},color:[0,0,1,1],position:e}))),...r.map(((e,t)=>({geometry:{type:"sphere",radius:t/2+1},color:[1,0,0,1],position:e}))))}),[]),o().useEffect((()=>{var e,o;const{position:a,up:s}=(0,i.updateCamera)(-n,r,200/f,-.3*_,-.3*S);null==(o=null==(e=t.current)?void 0:e.render)||o.call(e,R.current,{eye:[a.x+40,a.y+40,a.z],up:(0,i.position3DToVec3)(s),target:[40-n,r+40,0],fov:(0,i.angleToRadian)(60),near:.1,far:2e3},{position:[1e3,1e3,1e3],color:[1,1,1,1],specular:[1,1,1,1],shininess:50,specularFactor:1},[1,1,1,1])}),[n,r,f,_,S,w,E,P]),o().createElement("div",{style:{position:"absolute",inset:"0px"}},o().createElement("canvas",{ref:(0,i.bindMultipleRefs)(a,g,e),width:E,height:P,onMouseDown:e=>v({x:e.clientX,y:e.clientY}),onMouseMove:e=>{var n,r;k(void 0);const o=null==(r=null==(n=t.current)?void 0:n.pick)?void 0:r.call(n,e.clientX,e.clientY,(e=>"sphere"===e.geometry.type));if(void 0!==o){const t=R.current[o];t.position&&k({value:t.position,x:e.clientX,y:e.clientY})}}}),w&&o().createElement(i.ChartTooltip,(T=((e,t)=>{for(var n in t||(t={}))u.call(t,n)&&d(e,n,t[n]);if(l)for(var n of l(t))p.call(t,n)&&d(e,n,t[n]);return e})({},w),A={label:(L=w.value[0]/20,Intl.DateTimeFormat("zh",{month:"long"}).format(new Date(L.toString()))),value:w.value[1]},s(T,c(A)))),x);var T,A,L}},7265:(e,t,n)=>{"use strict";n.d(t,{default:()=>a});var r=n(3696),o=n.n(r),i=n(9758);const a=()=>{const e=(0,i.useWindowSize)().width/2,t=i.reactSvgRenderTarget,[n,r]=o().useState(),[a,s]=o().useState(),c=e=>Intl.DateTimeFormat("zh",{month:"long"}).format(new Date(e.toString()));if(o().useEffect((()=>{const n=[65,59,80,81,56,55,40].map(((e,t)=>({x:t+1,y:e}))),r=[55,49,70,71,46,45,30].map(((e,t)=>({x:t+1,y:e}))),o=[45,39,60,61,36,35,20].map(((e,t)=>({x:t+1,y:e}))),a=[35,29,50,51,26,25,10].map(((e,t)=>({x:t+1,y:e}))),l=[75,69,90,91,66,65,50].map(((e,t)=>({x:t+1,y:e,r:3*t+5}))),u=(0,i.getLineChart)([n,r,o,a,l],t,{x:1,y:5},{width:e,height:300},{left:25,right:25,top:10,bottom:20},{getXLabel:c,ySecondary:!0});if(!u)return;const{points:[p,d,f,g,h],children:m,select:y,minY:v}=u;m.push(t.renderPolyline(p,{strokeColor:16711680})),m.push(...p.map((e=>t.renderCircle(e.x,e.y,3,{fillColor:16711680,strokeWidth:0})))),m.push(t.renderPolyline((0,i.getBezierSplinePoints)(d,50),{strokeColor:65280})),m.push(...d.map((e=>t.renderCircle(e.x,e.y,3,{fillColor:65280,strokeWidth:0})))),m.push(t.renderPolyline(f.map(((e,t)=>{const n=[e];return 0!==t&&n.unshift({x:(0,i.getTwoNumberCenter)(e.x,f[t-1].x),y:e.y}),t!==f.length-1&&n.push({x:(0,i.getTwoNumberCenter)(e.x,f[t+1].x),y:e.y}),n})).flat(),{strokeColor:255})),m.push(...f.map((e=>t.renderCircle(e.x,e.y,3,{fillColor:255,strokeWidth:0})))),m.push(t.renderPolygon([...g,{x:g[g.length-1].x,y:v},{x:g[0].x,y:v}],{fillColor:16711680,strokeWidth:0})),m.push(...g.map((e=>t.renderCircle(e.x,e.y,3,{fillColor:16711680,strokeWidth:0})))),m.push(...h.map((e=>{var n;return t.renderCircle(e.x,e.y,null!=(n=e.r)?n:5,{fillColor:65280,strokeWidth:0})}))),s({children:m,select:y})}),[e]),!a)return null;let l=a.children;return n&&(l=[...a.children,...(0,i.renderChartTooltip)(t,n,n.value,{getXLabel:c})]),o().createElement("div",{style:{position:"absolute",inset:"0px"}},t.renderResult(l,e,300,{attributes:{onMouseMove:e=>r(a.select({x:e.clientX,y:e.clientY}))}}))}},2754:(e,t,n)=>{"use strict";n.d(t,{default:()=>s});var r=n(8662),o=n(3696),i=n.n(o),a=n(9758);const s=()=>{const[e,t]=i().useState([]),{line:n,onClick:o,onMove:s,input:c,reset:l}=(0,a.useLineClickCreate)(!0,(n=>{t((0,r.produce)(e,(e=>{e.push(n)})))}));return(0,a.useGlobalKeyDown)((e=>{"Escape"===e.key&&l(!0)})),i().createElement("div",{style:{height:"100%"}},i().createElement("svg",{viewBox:"0 0 800 600",width:800,height:600,xmlns:"http://www.w3.org/2000/svg",fill:"none",style:{position:"absolute",left:0,top:0},onClick:e=>o({x:e.clientX,y:e.clientY}),onMouseMove:e=>s({x:e.clientX,y:e.clientY})},[...e,n].map(((e,t)=>e&&i().createElement("polyline",{key:t,stroke:"#00ff00",points:e.map((e=>`${e.x},${e.y}`)).join(" ")})))),c)}},8208:(e,t,n)=>{"use strict";n.d(t,{default:()=>s});var r=n(3696),o=n.n(r),i=n(9758),a=n(4469);const s=()=>{const e={p1:{x:200,y:200},p2:{x:300,y:300},position:{x:400,y:100},fontFamily:"monospace",fontSize:16,direct:!0},{regions:t,lines:n}=(0,i.getLinearDimensionGeometries)(e,a.dimensionStyle,(e=>(0,i.getLinearDimensionTextPosition)(e,a.dimensionStyle.margin,i.getTextSize))),{textPosition:r,textRotation:s,text:c}=(0,i.getLinearDimensionTextPosition)(e,a.dimensionStyle.margin,i.getTextSize);return o().createElement("svg",{viewBox:"0 0 800 600",width:800,height:600,xmlns:"http://www.w3.org/2000/svg",fill:"none",style:{position:"absolute",left:0,top:0}},n.map(((e,t)=>o().createElement("polyline",{key:t,stroke:"black",points:e.map((e=>`${e.x},${e.y}`)).join(" ")}))),t[0]&&o().createElement("polyline",{stroke:"black",points:t[0].points.map((e=>`${e.x},${e.y}`)).join(" "),fill:"black"}),t[1]&&o().createElement("polyline",{stroke:"black",points:t[1].points.map((e=>`${e.x},${e.y}`)).join(" "),fill:"black"}),o().createElement("text",{x:r.x,y:r.y,fill:"black",transform:(0,i.getRotateTransform)(r.x,r.y,{rotation:s}),style:{fontSize:`${e.fontSize}px`,fontFamily:e.fontFamily}},c))}},6821:(e,t,n)=>{"use strict";n.d(t,{default:()=>a});var r=n(3696),o=n.n(r),i=n(9758);const a=()=>o().createElement(i.Menu,{items:[{title:"item 1",children:[{title:"item 1 child 1"},{title:"item 1 child 2",children:[{title:"item 1 child 2 child 1"},{title:"item 1 child 2 child 2"}]}]},{title:"item 2",children:[{title:"item 2 child 1"},{title:"item 2 child 2 disabled",disabled:!0}]},{type:"divider"},{title:"item 3"}],style:{left:"100px",top:"100px"}})},425:(e,t,n)=>{"use strict";n.d(t,{default:()=>p});var r=n(3696),o=n.n(r),i=n(9758),a=Object.defineProperty,s=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,u=(e,t,n)=>t in e?a(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;const p=()=>{const{ref:e,x:t,setX:n,y:r,setY:a}=(0,i.useWheelScroll)(),{ref:p,scale:d}=(0,i.useWheelZoom)({onChange(e,t,r){const o=(0,i.scaleByCursorPosition)({width:h,height:m},t/e,r);n(o.setX),a(o.setY)}}),f=i.reactSvgRenderTarget,g=(0,i.useWindowSize)(),h=g.width/2,m=g.height/2,y={x:t,y:r,scale:d,center:{x:h/2,y:m/2}},v=[f.renderImage("https://farm9.staticflickr.com/8873/18598400202_3af67ef38f_z_d.jpg",0,0,1200,800)],{setMinimapTransform:x,minimap:b,getMinimapPosition:C}=(0,i.useMinimap)({width:100,height:100,viewport:{width:h/y.scale,height:m/y.scale,center:(0,i.reverseTransformPosition)(y.center,y)},children:e=>f.renderResult(v,100,100,{transform:e,attributes:{onClick:e=>{if(C){const t=C(e);n((y.center.x-t.x)*y.scale),a((y.center.y-t.y)*y.scale)}}}})});return o().useEffect((()=>{const e={start:{x:0,y:0},end:{x:1200,y:800}},t=(0,i.zoomToFit)(e,{width:100,height:100},{x:50,y:50},1);t&&x(((e,t)=>{for(var n in t||(t={}))c.call(t,n)&&u(e,n,t[n]);if(s)for(var n of s(t))l.call(t,n)&&u(e,n,t[n]);return e})({bounding:e},t))}),[]),o().createElement("div",{ref:(0,i.bindMultipleRefs)(e,p),style:{position:"absolute",inset:"0px"}},f.renderResult(v,h,m,{transform:y,attributes:{style:{border:"1px solid green"}}}),b)}},6856:(e,t,n)=>{"use strict";n.d(t,{default:()=>c});var r=n(3696),o=n.n(r),i=n(7469),a=n(9758),s=n(3385);const c=()=>{const e=(0,a.useWindowSize)().width/2,{x:t,y:n,ref:r,setX:c,setY:u}=(0,a.useWheelScroll)(),{scale:p,setScale:d,ref:f}=(0,a.useWheelZoom)({onChange(t,n,r){const o=(0,a.scaleByCursorPosition)({width:e,height:300},n/t,r);c(o.setX),u(o.setY)}}),[g,h]=o().useState(),[m,y]=o().useState("测试ABC"),[v,x]=o().useState(s.allFonts[0].name),[b,C]=o().useState(50),[E,P]=o().useState(0),[w,k]=o().useState(16777215),[_,S]=o().useState(1),[R,T]=o().useState(1),[A,L]=o().useState([]),[M,I]=o().useState(l[0]),O=null==g?void 0:g[v];o().useEffect((()=>{var e;e=function*(){const e={};for(const t of s.allFonts){const n=yield fetch(t.url),r=yield n.arrayBuffer();e[t.name]=i.parse(r)}h(e)},new Promise(((t,n)=>{var r=t=>{try{i(e.next(t))}catch(e){n(e)}},o=t=>{try{i(e.throw(t))}catch(e){n(e)}},i=e=>e.done?t(e.value):Promise.resolve(e.value).then(r,o);i((e=e.apply(undefined,null)).next())}))}),[]),(0,a.useGlobalKeyDown)((e=>{"Digit0"===e.code&&!e.shiftKey&&(0,a.metaKeyIfMacElseCtrlKey)(e)&&(d(1),c(0),u(0),e.preventDefault())})),o().useEffect((()=>{if(!O)return;const e=O.getPaths(m,0,b,b,{xScale:_*b/O.unitsPerEm,yScale:R*b/O.unitsPerEm}).map((e=>(0,s.opentypeCommandsToPathCommands)(e)));L(e)}),[m,O,b,M,_,R]);const D=A.map((e=>M.renderPathCommands(e,{fillColor:E,strokeColor:E}))).flat();return D.push(M.renderText(0,2*b,m,E,b*Math.max(_,R),v)),o().createElement("div",{style:{position:"absolute",inset:"0px"},ref:(0,a.bindMultipleRefs)(f,r)},M.renderResult(D,e,300,{transform:{x:t,y:n,scale:p},backgroundColor:w}),o().createElement("div",{style:{display:"flex",width:`${e}px`}},o().createElement(a.ObjectEditor,{inline:!0,properties:{text:o().createElement(a.StringEditor,{value:m,setValue:e=>y(e)}),"font family":o().createElement(a.EnumEditor,{select:!0,value:v,enums:s.allFonts.map((e=>e.name)),setValue:e=>{var t,n;return x(null!=(n=null==(t=s.allFonts.find((t=>t.name===e)))?void 0:t.name)?n:s.allFonts[0].name)}}),"font size":o().createElement(a.NumberEditor,{value:b,setValue:e=>C(e)}),"render target":o().createElement(a.EnumEditor,{select:!0,value:M.type,enums:l.map((e=>e.type)),setValue:e=>{var t;return I(null!=(t=l.find((t=>t.type===e)))?t:l[0])}}),color:o().createElement(a.NumberEditor,{type:"color",value:E,setValue:e=>P(e)}),"background color":o().createElement(a.NumberEditor,{type:"color",value:w,setValue:e=>k(e)}),"x scale":o().createElement(a.NumberEditor,{value:_,setValue:e=>S(e)}),"y scale":o().createElement(a.NumberEditor,{value:R,setValue:e=>T(e)}),actions:o().createElement(a.Button,{onClick:()=>navigator.clipboard.writeText(JSON.stringify({contents:A.map(((e,t)=>({id:t,content:{type:"path",commands:e,strokeColor:E,fillColor:E}}))),center:{x:0,y:0}}))},"copy as command path")}})))},l=[a.reactCanvasRenderTarget,a.reactSvgRenderTarget,a.reactWebglRenderTarget]},3385:(e,t,n)=>{"use strict";n.d(t,{allFonts:()=>a,opentypeCommandsToPathCommands:()=>o});var r=n(9758);function o(e,t){const n=[];for(const r of e.commands)"M"===r.type?n.push({type:"move",to:i({x:r.x,y:r.y},t)}):"L"===r.type?n.push({type:"line",to:i({x:r.x,y:r.y},t)}):"C"===r.type?n.push({type:"bezierCurve",cp1:i({x:r.x1,y:r.y1},t),cp2:i({x:r.x2,y:r.y2},t),to:i({x:r.x,y:r.y},t)}):"Q"===r.type?n.push({type:"quadraticCurve",cp:i({x:r.x1,y:r.y1},t),to:i({x:r.x,y:r.y},t)}):n.push({type:"close"});return n}function i(e,t){return void 0!==t&&(0,r.skewPoint)(e,{x:0,y:t},-.15),e}const a=[{name:"STSong",url:"https://raw.githubusercontent.com/Haixing-Hu/latex-chinese-fonts/master/chinese/%E5%AE%8B%E4%BD%93/STSong.ttf"},{name:"Arial",url:"https://raw.githubusercontent.com/Haixing-Hu/latex-chinese-fonts/master/english/Sans/Arial.ttf"}]},5047:(e,t,n)=>{"use strict";n.d(t,{default:()=>s});var r=n(8662),o=n(3696),i=n.n(o),a=n(9758);const s=()=>{const[e,t]=i().useState({value:1,children:[{value:10},{value:100}]}),{editingContent:n,setEditingContentPath:o,prependPatchPath:s}=(0,a.usePartialEdit)(e);return i().createElement(i().Fragment,null,i().createElement("button",{onClick:()=>{const[,o]=(0,r.produceWithPatches)(n,(e=>{e.value++}));t((0,r.applyPatches)(e,s(o)))}},"+1"),i().createElement("button",{onClick:()=>o([])},"exit"),i().createElement("div",null,n.value,n.children&&n.children.map(((e,t)=>i().createElement("button",{key:t,style:{width:"50px",height:"50px"},onClick:()=>o(["children",t])},e.value)))))}},5836:(e,t,n)=>{"use strict";n.d(t,{default:()=>s});var r=n(3696),o=n.n(r),i=n(9758);const a={count:0},s=()=>{const{state:e,setState:t,undo:n,redo:r}=(0,i.usePatchBasedUndoRedo)(a,"a");return(0,i.useGlobalKeyDown)((e=>{"KeyZ"===e.code&&(0,i.metaKeyIfMacElseCtrlKey)(e)&&(e.shiftKey?r(e):n(e))})),o().createElement("button",{onClick:()=>t((e=>{e.count++})),style:{width:"200px",height:"100px"}},e.count)}},5207:(e,t,n)=>{"use strict";n.d(t,{default:()=>s});var r=n(8662),o=n(3696),i=n.n(o),a=n(9758);const s=()=>{const[e,t]=i().useState([]),{preview:n,onClick:o,onMove:s,input:c,setInputType:l,reset:u}=(0,a.usePathClickCreate)(!0,(n=>{t((0,r.produce)(e,(e=>{e.push(n)})))}));return(0,a.useGlobalKeyDown)((e=>{"Escape"===e.key&&u(!0)})),i().createElement("div",{style:{height:"100%"}},i().createElement("svg",{viewBox:"0 0 800 600",width:800,height:600,xmlns:"http://www.w3.org/2000/svg",fill:"none",style:{position:"absolute",left:0,top:0},onClick:e=>o({x:e.clientX,y:e.clientY}),onMouseMove:e=>s({x:e.clientX,y:e.clientY})},[...e,n].map(((e,t)=>e&&a.reactSvgRenderTarget.renderPathCommands(e,{strokeColor:65280})(t,1,!1,800,600)))),["line","arc","bezierCurve","quadraticCurve","close"].map((e=>i().createElement("button",{key:e,style:{position:"relative"},onClick:()=>l(e)},e))),c)}},5779:(e,t,n)=>{"use strict";n.d(t,{default:()=>s});var r=n(8662),o=n(3696),i=n.n(o),a=n(9758);const s=()=>{const[e,t]=i().useState([]),{points:n,onClick:o,onMove:s,reset:c}=(0,a.usePenClickCreate)(!0,(()=>{t((0,r.produce)(e,(e=>{e.push(n)})))}));return(0,a.useGlobalKeyDown)((e=>{"Escape"===e.key&&c()})),i().createElement("div",{style:{height:"100%"}},i().createElement("svg",{viewBox:"0 0 800 600",width:800,height:600,xmlns:"http://www.w3.org/2000/svg",fill:"none",style:{position:"absolute",left:0,top:0},onClick:e=>o({x:e.clientX,y:e.clientY}),onMouseMove:e=>s({x:e.clientX,y:e.clientY})},[...e,n].map(((e,t)=>e&&i().createElement("polyline",{key:t,stroke:"#00ff00",points:e.map((e=>`${e.x},${e.y}`)).join(" ")})))))}},2890:(e,t,n)=>{"use strict";n.d(t,{default:()=>a});var r=n(3696),o=n.n(r),i=n(9758);const a=()=>{var e,t;const n=(0,i.useWindowSize)(),r=n.width/2,a=n.height,s=i.reactCanvasRenderTarget,c={x:r/2,y:a/3},[l,u]=o().useState(r/2),[p,d]=o().useState(!1),[f,g]=o().useState({radian:-Math.PI/4,speed:0}),[h,m]=o().useState(),[y,v,x]=(0,i.useRefState)(!1),[b,C,E]=(0,i.useRefState2)(),P=null!=(e=null!=b?b:h)?e:f,w=null!=(t=null==h?void 0:h.length)?t:l,k={x:c.x-w*Math.sin(P.radian),y:c.y+w*Math.cos(P.radian),r:10},_=(0,i.getPointByLengthAndRadian)(k,P.speed*w+k.r*(P.speed>=0?1:-1),(0,i.getTwoPointsRadian)(k,c)+Math.PI/2),S=[s.renderCircle(c.x,c.y,5),s.renderCircle(k.x,k.y,k.r,{fillColor:0,strokeWidth:0}),s.renderPolyline([c,k]),s.renderPolyline([k,_])],R=(0,i.useEvent)((()=>{h&&(g(h),u(h.length),d(!1),m(void 0))})),T=(0,i.useEvent)((e=>{if(p){const t={x:e.clientX,y:e.clientY};m({radian:(0,i.getTwoPointsRadian)(t,c)-Math.PI/2,speed:0,length:(0,i.getTwoPointsDistance)(t,c)})}}));return o().createElement("div",{style:{position:"absolute",inset:"0px"},onMouseMove:T},s.renderResult(S,r,a,{attributes:{onClick:R}}),o().createElement("div",{style:{position:"absolute",top:"0px"}},o().createElement(i.Button,{onClick:()=>{if(x.current)return void v(!1);let e;v(!0);const t=n=>{var r;if(x.current){if(void 0!==e){const t=.005*(n-e),o=null!=(r=E.current)?r:f,i=c.y+w*Math.cos(f.radian),a=c.y+w*Math.cos(o.radian),s=9.8;let l=o.speed-s*Math.sin(o.radian)/w*t;if(a!==i){const e=Math.sqrt(s*Math.abs(a-i)*2)/w;e