@efxlab/motion-canvas-2d 4.0.0
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/editor/index.css +40 -0
- package/editor/index.js +525 -0
- package/editor/index.js.map +1 -0
- package/lib/code/CodeCursor.d.ts +84 -0
- package/lib/code/CodeCursor.d.ts.map +1 -0
- package/lib/code/CodeCursor.js +315 -0
- package/lib/code/CodeDiffer.d.ts +28 -0
- package/lib/code/CodeDiffer.d.ts.map +1 -0
- package/lib/code/CodeDiffer.js +51 -0
- package/lib/code/CodeFragment.d.ts +42 -0
- package/lib/code/CodeFragment.d.ts.map +1 -0
- package/lib/code/CodeFragment.js +72 -0
- package/lib/code/CodeHighlighter.d.ts +69 -0
- package/lib/code/CodeHighlighter.d.ts.map +1 -0
- package/lib/code/CodeHighlighter.js +2 -0
- package/lib/code/CodeMetrics.d.ts +11 -0
- package/lib/code/CodeMetrics.d.ts.map +1 -0
- package/lib/code/CodeMetrics.js +29 -0
- package/lib/code/CodeRange.d.ts +43 -0
- package/lib/code/CodeRange.d.ts.map +1 -0
- package/lib/code/CodeRange.js +185 -0
- package/lib/code/CodeScope.d.ts +16 -0
- package/lib/code/CodeScope.d.ts.map +1 -0
- package/lib/code/CodeScope.js +72 -0
- package/lib/code/CodeSelection.d.ts +6 -0
- package/lib/code/CodeSelection.d.ts.map +1 -0
- package/lib/code/CodeSelection.js +13 -0
- package/lib/code/CodeSignal.d.ts +63 -0
- package/lib/code/CodeSignal.d.ts.map +1 -0
- package/lib/code/CodeSignal.js +206 -0
- package/lib/code/CodeTokenizer.d.ts +8 -0
- package/lib/code/CodeTokenizer.d.ts.map +1 -0
- package/lib/code/CodeTokenizer.js +50 -0
- package/lib/code/DefaultHighlightStyle.d.ts +3 -0
- package/lib/code/DefaultHighlightStyle.d.ts.map +1 -0
- package/lib/code/DefaultHighlightStyle.js +98 -0
- package/lib/code/LezerHighlighter.d.ts +22 -0
- package/lib/code/LezerHighlighter.d.ts.map +1 -0
- package/lib/code/LezerHighlighter.js +91 -0
- package/lib/code/diff.d.ts +31 -0
- package/lib/code/diff.d.ts.map +1 -0
- package/lib/code/diff.js +236 -0
- package/lib/code/extractRange.d.ts +17 -0
- package/lib/code/extractRange.d.ts.map +1 -0
- package/lib/code/extractRange.js +102 -0
- package/lib/code/index.d.ts +14 -0
- package/lib/code/index.d.ts.map +1 -0
- package/lib/code/index.js +14 -0
- package/lib/components/Bezier.d.ts +22 -0
- package/lib/components/Bezier.d.ts.map +1 -0
- package/lib/components/Bezier.js +80 -0
- package/lib/components/Camera.d.ts +172 -0
- package/lib/components/Camera.d.ts.map +1 -0
- package/lib/components/Camera.js +239 -0
- package/lib/components/Circle.d.ts +191 -0
- package/lib/components/Circle.d.ts.map +1 -0
- package/lib/components/Circle.js +178 -0
- package/lib/components/Code.d.ts +238 -0
- package/lib/components/Code.d.ts.map +1 -0
- package/lib/components/Code.js +331 -0
- package/lib/components/CodeBlock.d.ts +131 -0
- package/lib/components/CodeBlock.d.ts.map +1 -0
- package/lib/components/CodeBlock.js +462 -0
- package/lib/components/CubicBezier.d.ts +69 -0
- package/lib/components/CubicBezier.d.ts.map +1 -0
- package/lib/components/CubicBezier.js +81 -0
- package/lib/components/Curve.d.ts +202 -0
- package/lib/components/Curve.d.ts.map +1 -0
- package/lib/components/Curve.js +284 -0
- package/lib/components/Grid.d.ts +75 -0
- package/lib/components/Grid.d.ts.map +1 -0
- package/lib/components/Grid.js +91 -0
- package/lib/components/Icon.d.ts +58 -0
- package/lib/components/Icon.d.ts.map +1 -0
- package/lib/components/Icon.js +58 -0
- package/lib/components/Img.d.ts +116 -0
- package/lib/components/Img.d.ts.map +1 -0
- package/lib/components/Img.js +233 -0
- package/lib/components/Knot.d.ts +89 -0
- package/lib/components/Knot.d.ts.map +1 -0
- package/lib/components/Knot.js +68 -0
- package/lib/components/Latex.d.ts +49 -0
- package/lib/components/Latex.d.ts.map +1 -0
- package/lib/components/Latex.js +206 -0
- package/lib/components/Layout.d.ts +423 -0
- package/lib/components/Layout.d.ts.map +1 -0
- package/lib/components/Layout.js +699 -0
- package/lib/components/Line.d.ts +158 -0
- package/lib/components/Line.d.ts.map +1 -0
- package/lib/components/Line.js +315 -0
- package/lib/components/Node.d.ts +843 -0
- package/lib/components/Node.d.ts.map +1 -0
- package/lib/components/Node.js +1335 -0
- package/lib/components/Path.d.ts +18 -0
- package/lib/components/Path.d.ts.map +1 -0
- package/lib/components/Path.js +96 -0
- package/lib/components/Polygon.d.ts +157 -0
- package/lib/components/Polygon.d.ts.map +1 -0
- package/lib/components/Polygon.js +183 -0
- package/lib/components/QuadBezier.d.ts +61 -0
- package/lib/components/QuadBezier.d.ts.map +1 -0
- package/lib/components/QuadBezier.js +76 -0
- package/lib/components/Ray.d.ts +60 -0
- package/lib/components/Ray.d.ts.map +1 -0
- package/lib/components/Ray.js +95 -0
- package/lib/components/Rect.d.ts +112 -0
- package/lib/components/Rect.d.ts.map +1 -0
- package/lib/components/Rect.js +76 -0
- package/lib/components/SVG.d.ts +175 -0
- package/lib/components/SVG.d.ts.map +1 -0
- package/lib/components/SVG.js +582 -0
- package/lib/components/Shape.d.ts +39 -0
- package/lib/components/Shape.d.ts.map +1 -0
- package/lib/components/Shape.js +134 -0
- package/lib/components/Spline.d.ts +87 -0
- package/lib/components/Spline.d.ts.map +1 -0
- package/lib/components/Spline.js +230 -0
- package/lib/components/Txt.d.ts +51 -0
- package/lib/components/Txt.d.ts.map +1 -0
- package/lib/components/Txt.js +172 -0
- package/lib/components/TxtLeaf.d.ts +20 -0
- package/lib/components/TxtLeaf.d.ts.map +1 -0
- package/lib/components/TxtLeaf.js +185 -0
- package/lib/components/Video.d.ts +110 -0
- package/lib/components/Video.d.ts.map +1 -0
- package/lib/components/Video.js +267 -0
- package/lib/components/View2D.d.ts +25 -0
- package/lib/components/View2D.d.ts.map +1 -0
- package/lib/components/View2D.js +85 -0
- package/lib/components/index.d.ts +27 -0
- package/lib/components/index.d.ts.map +1 -0
- package/lib/components/index.js +27 -0
- package/lib/components/types.d.ts +17 -0
- package/lib/components/types.d.ts.map +1 -0
- package/lib/components/types.js +2 -0
- package/lib/curves/ArcSegment.d.ts +26 -0
- package/lib/curves/ArcSegment.d.ts.map +1 -0
- package/lib/curves/ArcSegment.js +116 -0
- package/lib/curves/CircleSegment.d.ts +18 -0
- package/lib/curves/CircleSegment.d.ts.map +1 -0
- package/lib/curves/CircleSegment.js +60 -0
- package/lib/curves/CubicBezierSegment.d.ts +18 -0
- package/lib/curves/CubicBezierSegment.d.ts.map +1 -0
- package/lib/curves/CubicBezierSegment.js +60 -0
- package/lib/curves/CurveDrawingInfo.d.ts +11 -0
- package/lib/curves/CurveDrawingInfo.d.ts.map +1 -0
- package/lib/curves/CurveDrawingInfo.js +2 -0
- package/lib/curves/CurvePoint.d.ts +15 -0
- package/lib/curves/CurvePoint.d.ts.map +1 -0
- package/lib/curves/CurvePoint.js +2 -0
- package/lib/curves/CurveProfile.d.ts +7 -0
- package/lib/curves/CurveProfile.d.ts.map +1 -0
- package/lib/curves/CurveProfile.js +2 -0
- package/lib/curves/KnotInfo.d.ts +12 -0
- package/lib/curves/KnotInfo.d.ts.map +1 -0
- package/lib/curves/KnotInfo.js +2 -0
- package/lib/curves/LineSegment.d.ts +16 -0
- package/lib/curves/LineSegment.d.ts.map +1 -0
- package/lib/curves/LineSegment.js +51 -0
- package/lib/curves/Polynomial.d.ts +118 -0
- package/lib/curves/Polynomial.d.ts.map +1 -0
- package/lib/curves/Polynomial.js +263 -0
- package/lib/curves/Polynomial2D.d.ts +22 -0
- package/lib/curves/Polynomial2D.d.ts.map +1 -0
- package/lib/curves/Polynomial2D.js +51 -0
- package/lib/curves/PolynomialSegment.d.ts +39 -0
- package/lib/curves/PolynomialSegment.d.ts.map +1 -0
- package/lib/curves/PolynomialSegment.js +88 -0
- package/lib/curves/QuadBezierSegment.d.ts +17 -0
- package/lib/curves/QuadBezierSegment.d.ts.map +1 -0
- package/lib/curves/QuadBezierSegment.js +53 -0
- package/lib/curves/Segment.d.ts +9 -0
- package/lib/curves/Segment.d.ts.map +1 -0
- package/lib/curves/Segment.js +3 -0
- package/lib/curves/UniformPolynomialCurveSampler.d.ts +43 -0
- package/lib/curves/UniformPolynomialCurveSampler.d.ts.map +1 -0
- package/lib/curves/UniformPolynomialCurveSampler.js +74 -0
- package/lib/curves/createCurveProfileLerp.d.ts +32 -0
- package/lib/curves/createCurveProfileLerp.d.ts.map +1 -0
- package/lib/curves/createCurveProfileLerp.js +351 -0
- package/lib/curves/getBezierSplineProfile.d.ts +12 -0
- package/lib/curves/getBezierSplineProfile.d.ts.map +1 -0
- package/lib/curves/getBezierSplineProfile.js +140 -0
- package/lib/curves/getCircleProfile.d.ts +4 -0
- package/lib/curves/getCircleProfile.d.ts.map +1 -0
- package/lib/curves/getCircleProfile.js +44 -0
- package/lib/curves/getPathProfile.d.ts +3 -0
- package/lib/curves/getPathProfile.d.ts.map +1 -0
- package/lib/curves/getPathProfile.js +128 -0
- package/lib/curves/getPointAtDistance.d.ts +4 -0
- package/lib/curves/getPointAtDistance.d.ts.map +1 -0
- package/lib/curves/getPointAtDistance.js +15 -0
- package/lib/curves/getPolylineProfile.d.ts +4 -0
- package/lib/curves/getPolylineProfile.d.ts.map +1 -0
- package/lib/curves/getPolylineProfile.js +58 -0
- package/lib/curves/getRectProfile.d.ts +4 -0
- package/lib/curves/getRectProfile.d.ts.map +1 -0
- package/lib/curves/getRectProfile.js +57 -0
- package/lib/curves/index.d.ts +17 -0
- package/lib/curves/index.d.ts.map +1 -0
- package/lib/curves/index.js +17 -0
- package/lib/decorators/canvasStyleSignal.d.ts +5 -0
- package/lib/decorators/canvasStyleSignal.d.ts.map +1 -0
- package/lib/decorators/canvasStyleSignal.js +12 -0
- package/lib/decorators/colorSignal.d.ts +2 -0
- package/lib/decorators/colorSignal.d.ts.map +1 -0
- package/lib/decorators/colorSignal.js +9 -0
- package/lib/decorators/compound.d.ts +27 -0
- package/lib/decorators/compound.d.ts.map +1 -0
- package/lib/decorators/compound.js +49 -0
- package/lib/decorators/computed.d.ts +9 -0
- package/lib/decorators/computed.d.ts.map +1 -0
- package/lib/decorators/computed.js +18 -0
- package/lib/decorators/defaultStyle.d.ts +2 -0
- package/lib/decorators/defaultStyle.d.ts.map +1 -0
- package/lib/decorators/defaultStyle.js +13 -0
- package/lib/decorators/filtersSignal.d.ts +11 -0
- package/lib/decorators/filtersSignal.d.ts.map +1 -0
- package/lib/decorators/filtersSignal.js +73 -0
- package/lib/decorators/index.d.ts +11 -0
- package/lib/decorators/index.d.ts.map +1 -0
- package/lib/decorators/index.js +11 -0
- package/lib/decorators/initializers.d.ts +4 -0
- package/lib/decorators/initializers.d.ts.map +1 -0
- package/lib/decorators/initializers.js +27 -0
- package/lib/decorators/nodeName.d.ts +9 -0
- package/lib/decorators/nodeName.d.ts.map +1 -0
- package/lib/decorators/nodeName.js +13 -0
- package/lib/decorators/signal.d.ts +183 -0
- package/lib/decorators/signal.d.ts.map +1 -0
- package/lib/decorators/signal.js +285 -0
- package/lib/decorators/spacingSignal.d.ts +2 -0
- package/lib/decorators/spacingSignal.d.ts.map +1 -0
- package/lib/decorators/spacingSignal.js +15 -0
- package/lib/decorators/vector2Signal.d.ts +8 -0
- package/lib/decorators/vector2Signal.d.ts.map +1 -0
- package/lib/decorators/vector2Signal.js +15 -0
- package/lib/index.d.ts +9 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +9 -0
- package/lib/jsx-dev-runtime.d.ts +3 -0
- package/lib/jsx-dev-runtime.d.ts.map +1 -0
- package/lib/jsx-dev-runtime.js +3 -0
- package/lib/jsx-runtime.d.ts +12 -0
- package/lib/jsx-runtime.d.ts.map +1 -0
- package/lib/jsx-runtime.js +23 -0
- package/lib/partials/Filter.d.ts +82 -0
- package/lib/partials/Filter.d.ts.map +1 -0
- package/lib/partials/Filter.js +137 -0
- package/lib/partials/Gradient.d.ts +31 -0
- package/lib/partials/Gradient.d.ts.map +1 -0
- package/lib/partials/Gradient.js +63 -0
- package/lib/partials/Pattern.d.ts +13 -0
- package/lib/partials/Pattern.d.ts.map +1 -0
- package/lib/partials/Pattern.js +27 -0
- package/lib/partials/ShaderConfig.d.ts +81 -0
- package/lib/partials/ShaderConfig.d.ts.map +1 -0
- package/lib/partials/ShaderConfig.js +25 -0
- package/lib/partials/index.d.ts +5 -0
- package/lib/partials/index.d.ts.map +1 -0
- package/lib/partials/index.js +5 -0
- package/lib/partials/types.d.ts +35 -0
- package/lib/partials/types.d.ts.map +1 -0
- package/lib/partials/types.js +2 -0
- package/lib/scenes/Scene2D.d.ts +23 -0
- package/lib/scenes/Scene2D.d.ts.map +1 -0
- package/lib/scenes/Scene2D.js +152 -0
- package/lib/scenes/index.d.ts +4 -0
- package/lib/scenes/index.d.ts.map +1 -0
- package/lib/scenes/index.js +4 -0
- package/lib/scenes/makeScene2D.d.ts +5 -0
- package/lib/scenes/makeScene2D.d.ts.map +1 -0
- package/lib/scenes/makeScene2D.js +12 -0
- package/lib/scenes/useScene2D.d.ts +3 -0
- package/lib/scenes/useScene2D.d.ts.map +1 -0
- package/lib/scenes/useScene2D.js +5 -0
- package/lib/tsconfig.build.tsbuildinfo +1 -0
- package/lib/tsconfig.tsbuildinfo +1 -0
- package/lib/utils/CanvasUtils.d.ts +21 -0
- package/lib/utils/CanvasUtils.d.ts.map +1 -0
- package/lib/utils/CanvasUtils.js +138 -0
- package/lib/utils/diff.d.ts +31 -0
- package/lib/utils/diff.d.ts.map +1 -0
- package/lib/utils/diff.js +97 -0
- package/lib/utils/index.d.ts +4 -0
- package/lib/utils/index.d.ts.map +1 -0
- package/lib/utils/index.js +4 -0
- package/lib/utils/is.d.ts +8 -0
- package/lib/utils/is.d.ts.map +1 -0
- package/lib/utils/is.js +10 -0
- package/lib/utils/makeSignalExtensions.d.ts +4 -0
- package/lib/utils/makeSignalExtensions.d.ts.map +1 -0
- package/lib/utils/makeSignalExtensions.js +20 -0
- package/lib/utils/withDefaults.d.ts +20 -0
- package/lib/utils/withDefaults.d.ts.map +1 -0
- package/lib/utils/withDefaults.js +23 -0
- package/package.json +54 -0
- package/src/editor/NodeInspectorConfig.tsx +76 -0
- package/src/editor/PreviewOverlayConfig.tsx +65 -0
- package/src/editor/Provider.tsx +109 -0
- package/src/editor/SceneGraphTabConfig.tsx +87 -0
- package/src/editor/icons/CircleIcon.tsx +7 -0
- package/src/editor/icons/CodeBlockIcon.tsx +8 -0
- package/src/editor/icons/CurveIcon.tsx +7 -0
- package/src/editor/icons/GridIcon.tsx +7 -0
- package/src/editor/icons/IconMap.ts +35 -0
- package/src/editor/icons/ImgIcon.tsx +8 -0
- package/src/editor/icons/LayoutIcon.tsx +9 -0
- package/src/editor/icons/LineIcon.tsx +7 -0
- package/src/editor/icons/NodeIcon.tsx +7 -0
- package/src/editor/icons/RayIcon.tsx +7 -0
- package/src/editor/icons/RectIcon.tsx +7 -0
- package/src/editor/icons/ShapeIcon.tsx +7 -0
- package/src/editor/icons/TxtIcon.tsx +8 -0
- package/src/editor/icons/VideoIcon.tsx +7 -0
- package/src/editor/icons/View2DIcon.tsx +10 -0
- package/src/editor/index.css +0 -0
- package/src/editor/index.ts +19 -0
- package/src/editor/shortcuts.ts +27 -0
- package/src/editor/tree/DetachedRoot.tsx +27 -0
- package/src/editor/tree/NodeElement.tsx +72 -0
- package/src/editor/tree/TreeElement.tsx +70 -0
- package/src/editor/tree/TreeRoot.tsx +10 -0
- package/src/editor/tree/ViewRoot.tsx +20 -0
- package/src/editor/tree/index.module.scss +45 -0
- package/src/editor/tree/index.ts +4 -0
- package/src/editor/tree/navigation.ts +145 -0
- package/src/editor/tsconfig.build.json +5 -0
- package/src/editor/tsconfig.json +12 -0
- package/src/editor/tsdoc.json +4 -0
- package/src/editor/utils/SignalSet.ts +37 -0
- package/src/editor/utils/index.ts +1 -0
- package/src/editor/vite-env.d.ts +1 -0
- package/src/lib/code/CodeCursor.ts +468 -0
- package/src/lib/code/CodeDiffer.ts +77 -0
- package/src/lib/code/CodeFragment.ts +96 -0
- package/src/lib/code/CodeHighlighter.ts +73 -0
- package/src/lib/code/CodeMetrics.ts +47 -0
- package/src/lib/code/CodeRange.test.ts +113 -0
- package/src/lib/code/CodeRange.ts +222 -0
- package/src/lib/code/CodeScope.ts +100 -0
- package/src/lib/code/CodeSelection.ts +28 -0
- package/src/lib/code/CodeSignal.ts +348 -0
- package/src/lib/code/CodeTokenizer.ts +54 -0
- package/src/lib/code/DefaultHighlightStyle.ts +98 -0
- package/src/lib/code/LezerHighlighter.ts +113 -0
- package/src/lib/code/diff.test.ts +311 -0
- package/src/lib/code/diff.ts +319 -0
- package/src/lib/code/extractRange.ts +125 -0
- package/src/lib/code/index.ts +13 -0
- package/src/lib/components/Bezier.ts +103 -0
- package/src/lib/components/Camera.ts +359 -0
- package/src/lib/components/Circle.ts +269 -0
- package/src/lib/components/Code.ts +532 -0
- package/src/lib/components/CodeBlock.ts +581 -0
- package/src/lib/components/CubicBezier.ts +115 -0
- package/src/lib/components/Curve.ts +455 -0
- package/src/lib/components/Grid.ts +134 -0
- package/src/lib/components/Icon.ts +95 -0
- package/src/lib/components/Img.ts +305 -0
- package/src/lib/components/Knot.ts +156 -0
- package/src/lib/components/Latex.ts +249 -0
- package/src/lib/components/Layout.ts +1071 -0
- package/src/lib/components/Line.ts +394 -0
- package/src/lib/components/Node.ts +1949 -0
- package/src/lib/components/Path.ts +132 -0
- package/src/lib/components/Polygon.ts +238 -0
- package/src/lib/components/QuadBezier.ts +103 -0
- package/src/lib/components/Ray.ts +126 -0
- package/src/lib/components/Rect.ts +186 -0
- package/src/lib/components/SVG.ts +788 -0
- package/src/lib/components/Shape.ts +146 -0
- package/src/lib/components/Spline.ts +318 -0
- package/src/lib/components/Txt.test.tsx +81 -0
- package/src/lib/components/Txt.ts +204 -0
- package/src/lib/components/TxtLeaf.ts +210 -0
- package/src/lib/components/Video.ts +368 -0
- package/src/lib/components/View2D.ts +85 -0
- package/src/lib/components/__logs__/image-without-source.md +17 -0
- package/src/lib/components/__logs__/line-without-points.md +30 -0
- package/src/lib/components/__logs__/reactive-playback-rate.md +21 -0
- package/src/lib/components/__logs__/spline-with-insufficient-knots.md +24 -0
- package/src/lib/components/__tests__/children.test.tsx +142 -0
- package/src/lib/components/__tests__/clone.test.tsx +126 -0
- package/src/lib/components/__tests__/generatorTest.ts +27 -0
- package/src/lib/components/__tests__/mockScene2D.ts +50 -0
- package/src/lib/components/__tests__/query.test.tsx +122 -0
- package/src/lib/components/__tests__/state.test.tsx +60 -0
- package/src/lib/components/index.ts +26 -0
- package/src/lib/components/types.ts +35 -0
- package/src/lib/curves/ArcSegment.ts +155 -0
- package/src/lib/curves/CircleSegment.ts +77 -0
- package/src/lib/curves/CubicBezierSegment.ts +78 -0
- package/src/lib/curves/CurveDrawingInfo.ts +11 -0
- package/src/lib/curves/CurvePoint.ts +15 -0
- package/src/lib/curves/CurveProfile.ts +7 -0
- package/src/lib/curves/KnotInfo.ts +10 -0
- package/src/lib/curves/LineSegment.ts +62 -0
- package/src/lib/curves/Polynomial.ts +355 -0
- package/src/lib/curves/Polynomial2D.ts +62 -0
- package/src/lib/curves/PolynomialSegment.ts +124 -0
- package/src/lib/curves/QuadBezierSegment.ts +64 -0
- package/src/lib/curves/Segment.ts +17 -0
- package/src/lib/curves/UniformPolynomialCurveSampler.ts +93 -0
- package/src/lib/curves/createCurveProfileLerp.ts +471 -0
- package/src/lib/curves/getBezierSplineProfile.ts +227 -0
- package/src/lib/curves/getCircleProfile.ts +86 -0
- package/src/lib/curves/getPathProfile.ts +177 -0
- package/src/lib/curves/getPointAtDistance.ts +21 -0
- package/src/lib/curves/getPolylineProfile.test.ts +21 -0
- package/src/lib/curves/getPolylineProfile.ts +88 -0
- package/src/lib/curves/getRectProfile.ts +138 -0
- package/src/lib/curves/index.ts +16 -0
- package/src/lib/decorators/canvasStyleSignal.ts +15 -0
- package/src/lib/decorators/colorSignal.ts +9 -0
- package/src/lib/decorators/compound.ts +85 -0
- package/src/lib/decorators/computed.ts +18 -0
- package/src/lib/decorators/defaultStyle.ts +15 -0
- package/src/lib/decorators/filtersSignal.ts +133 -0
- package/src/lib/decorators/index.ts +10 -0
- package/src/lib/decorators/initializers.ts +34 -0
- package/src/lib/decorators/nodeName.ts +13 -0
- package/src/lib/decorators/signal.test.ts +89 -0
- package/src/lib/decorators/signal.ts +348 -0
- package/src/lib/decorators/spacingSignal.ts +15 -0
- package/src/lib/decorators/vector2Signal.ts +35 -0
- package/src/lib/globals.d.ts +3 -0
- package/src/lib/index.ts +8 -0
- package/src/lib/jsx-dev-runtime.ts +2 -0
- package/src/lib/jsx-runtime.ts +45 -0
- package/src/lib/parse-svg-path.d.ts +14 -0
- package/src/lib/partials/Filter.ts +185 -0
- package/src/lib/partials/Gradient.ts +103 -0
- package/src/lib/partials/Pattern.ts +35 -0
- package/src/lib/partials/ShaderConfig.ts +122 -0
- package/src/lib/partials/index.ts +4 -0
- package/src/lib/partials/types.ts +58 -0
- package/src/lib/scenes/Scene2D.ts +195 -0
- package/src/lib/scenes/index.ts +3 -0
- package/src/lib/scenes/makeScene2D.ts +19 -0
- package/src/lib/scenes/useScene2D.ts +6 -0
- package/src/lib/tsconfig.build.json +12 -0
- package/src/lib/tsconfig.json +14 -0
- package/src/lib/tsdoc.json +4 -0
- package/src/lib/utils/CanvasUtils.ts +306 -0
- package/src/lib/utils/diff.test.ts +453 -0
- package/src/lib/utils/diff.ts +148 -0
- package/src/lib/utils/index.ts +3 -0
- package/src/lib/utils/is.ts +11 -0
- package/src/lib/utils/makeSignalExtensions.ts +29 -0
- package/src/lib/utils/withDefaults.tsx +26 -0
- package/src/tsconfig.base.json +18 -0
- package/src/tsconfig.build.json +8 -0
- package/src/tsconfig.json +5 -0
- package/tsconfig.project.json +7 -0
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { BBox, DEG2RAD, } from '@efxlab/motion-canvas-core';
|
|
8
|
+
import { getCircleProfile } from '../curves';
|
|
9
|
+
import { computed, initial, nodeName, signal } from '../decorators';
|
|
10
|
+
import { Curve } from './Curve';
|
|
11
|
+
/**
|
|
12
|
+
* A node for drawing circular shapes.
|
|
13
|
+
*
|
|
14
|
+
* @remarks
|
|
15
|
+
* This node can be used to render shapes such as: circle, ellipse, arc, and
|
|
16
|
+
* sector (pie chart).
|
|
17
|
+
*
|
|
18
|
+
* @preview
|
|
19
|
+
* ```tsx editor
|
|
20
|
+
* // snippet Simple circle
|
|
21
|
+
* import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
|
|
22
|
+
*
|
|
23
|
+
* export default makeScene2D(function* (view) {
|
|
24
|
+
* view.add(
|
|
25
|
+
* <Circle
|
|
26
|
+
* size={160}
|
|
27
|
+
* fill={'lightseagreen'}
|
|
28
|
+
* />
|
|
29
|
+
* );
|
|
30
|
+
* });
|
|
31
|
+
*
|
|
32
|
+
* // snippet Ellipse
|
|
33
|
+
* import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
|
|
34
|
+
*
|
|
35
|
+
* export default makeScene2D(function* (view) {
|
|
36
|
+
* view.add(
|
|
37
|
+
* <Circle
|
|
38
|
+
* width={160}
|
|
39
|
+
* height={80}
|
|
40
|
+
* fill={'lightseagreen'}
|
|
41
|
+
* />
|
|
42
|
+
* );
|
|
43
|
+
* });
|
|
44
|
+
*
|
|
45
|
+
* // snippet Sector (pie chart):
|
|
46
|
+
* import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
|
|
47
|
+
* import {createRef} from '@efxlab/motion-canvas-core';
|
|
48
|
+
*
|
|
49
|
+
* export default makeScene2D(function* (view) {
|
|
50
|
+
* const ref = createRef<Circle>();
|
|
51
|
+
* view.add(
|
|
52
|
+
* <Circle
|
|
53
|
+
* ref={ref}
|
|
54
|
+
* size={160}
|
|
55
|
+
* fill={'lightseagreen'}
|
|
56
|
+
* startAngle={30}
|
|
57
|
+
* endAngle={270}
|
|
58
|
+
* closed={true}
|
|
59
|
+
* />
|
|
60
|
+
* );
|
|
61
|
+
*
|
|
62
|
+
* yield* ref().startAngle(270, 2).to(30, 2);
|
|
63
|
+
* });
|
|
64
|
+
*
|
|
65
|
+
* // snippet Arc:
|
|
66
|
+
* import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
|
|
67
|
+
* import {createRef} from '@efxlab/motion-canvas-core';
|
|
68
|
+
*
|
|
69
|
+
* export default makeScene2D(function* (view) {
|
|
70
|
+
* const ref = createRef<Circle>();
|
|
71
|
+
* view.add(
|
|
72
|
+
* <Circle
|
|
73
|
+
* ref={ref}
|
|
74
|
+
* size={160}
|
|
75
|
+
* stroke={'lightseagreen'}
|
|
76
|
+
* lineWidth={8}
|
|
77
|
+
* startAngle={-90}
|
|
78
|
+
* endAngle={90}
|
|
79
|
+
* />
|
|
80
|
+
* );
|
|
81
|
+
*
|
|
82
|
+
* yield* ref().startAngle(-270, 2).to(-90, 2);
|
|
83
|
+
* });
|
|
84
|
+
*
|
|
85
|
+
* // snippet Curve properties:
|
|
86
|
+
* import {makeScene2D, Circle} from '@efxlab/motion-canvas-2d';
|
|
87
|
+
* import {all, createRef, easeInCubic, easeOutCubic} from '@efxlab/motion-canvas-core';
|
|
88
|
+
*
|
|
89
|
+
* export default makeScene2D(function* (view) {
|
|
90
|
+
* const ref = createRef<Circle>();
|
|
91
|
+
* view.add(
|
|
92
|
+
* <Circle
|
|
93
|
+
* ref={ref}
|
|
94
|
+
* size={160}
|
|
95
|
+
* stroke={'lightseagreen'}
|
|
96
|
+
* lineWidth={8}
|
|
97
|
+
* endAngle={270}
|
|
98
|
+
* endArrow
|
|
99
|
+
* />,
|
|
100
|
+
* );
|
|
101
|
+
*
|
|
102
|
+
* yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
|
|
103
|
+
* ref().start(0).end(0);
|
|
104
|
+
* yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
|
|
105
|
+
* });
|
|
106
|
+
* ```
|
|
107
|
+
*/
|
|
108
|
+
let Circle = class Circle extends Curve {
|
|
109
|
+
constructor(props) {
|
|
110
|
+
super(props);
|
|
111
|
+
}
|
|
112
|
+
profile() {
|
|
113
|
+
return getCircleProfile(this.size().scale(0.5), this.startAngle() * DEG2RAD, this.endAngle() * DEG2RAD, this.closed(), this.counterclockwise());
|
|
114
|
+
}
|
|
115
|
+
desiredSize() {
|
|
116
|
+
return {
|
|
117
|
+
x: this.width.context.getter(),
|
|
118
|
+
y: this.height.context.getter(),
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
offsetComputedLayout(box) {
|
|
122
|
+
return box;
|
|
123
|
+
}
|
|
124
|
+
childrenBBox() {
|
|
125
|
+
return BBox.fromSizeCentered(this.computedSize());
|
|
126
|
+
}
|
|
127
|
+
getPath() {
|
|
128
|
+
if (this.requiresProfile()) {
|
|
129
|
+
return this.curveDrawingInfo().path;
|
|
130
|
+
}
|
|
131
|
+
return this.createPath();
|
|
132
|
+
}
|
|
133
|
+
getRipplePath() {
|
|
134
|
+
return this.createPath(this.rippleSize());
|
|
135
|
+
}
|
|
136
|
+
getCacheBBox() {
|
|
137
|
+
return super.getCacheBBox().expand(this.rippleSize());
|
|
138
|
+
}
|
|
139
|
+
createPath(expand = 0) {
|
|
140
|
+
const path = new Path2D();
|
|
141
|
+
const start = this.startAngle() * DEG2RAD;
|
|
142
|
+
let end = this.endAngle() * DEG2RAD;
|
|
143
|
+
const size = this.size().scale(0.5).add(expand);
|
|
144
|
+
const closed = this.closed();
|
|
145
|
+
if (end > start + Math.PI * 2) {
|
|
146
|
+
const loops = Math.floor((end - start) / (Math.PI * 2));
|
|
147
|
+
end -= Math.PI * 2 * loops;
|
|
148
|
+
}
|
|
149
|
+
if (closed) {
|
|
150
|
+
path.moveTo(0, 0);
|
|
151
|
+
}
|
|
152
|
+
path.ellipse(0, 0, size.x, size.y, 0, start, end, this.counterclockwise());
|
|
153
|
+
if (closed) {
|
|
154
|
+
path.closePath();
|
|
155
|
+
}
|
|
156
|
+
return path;
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
__decorate([
|
|
160
|
+
initial(0),
|
|
161
|
+
signal()
|
|
162
|
+
], Circle.prototype, "startAngle", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
initial(360),
|
|
165
|
+
signal()
|
|
166
|
+
], Circle.prototype, "endAngle", void 0);
|
|
167
|
+
__decorate([
|
|
168
|
+
initial(false),
|
|
169
|
+
signal()
|
|
170
|
+
], Circle.prototype, "counterclockwise", void 0);
|
|
171
|
+
__decorate([
|
|
172
|
+
computed()
|
|
173
|
+
], Circle.prototype, "profile", null);
|
|
174
|
+
Circle = __decorate([
|
|
175
|
+
nodeName('Circle')
|
|
176
|
+
], Circle);
|
|
177
|
+
export { Circle };
|
|
178
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2lyY2xlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0NpcmNsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUNKLE9BQU8sR0FJUixNQUFNLDRCQUE0QixDQUFDO0FBQ3BDLE9BQU8sRUFBZSxnQkFBZ0IsRUFBQyxNQUFNLFdBQVcsQ0FBQztBQUN6RCxPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRWxFLE9BQU8sRUFBQyxLQUFLLEVBQWEsTUFBTSxTQUFTLENBQUM7QUFxQjFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnR0c7QUFFSSxJQUFNLE1BQU0sR0FBWixNQUFNLE1BQU8sU0FBUSxLQUFLO0lBdUUvQixZQUFtQixLQUFrQjtRQUNuQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDZixDQUFDO0lBR00sT0FBTztRQUNaLE9BQU8sZ0JBQWdCLENBQ3JCLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQ3RCLElBQUksQ0FBQyxVQUFVLEVBQUUsR0FBRyxPQUFPLEVBQzNCLElBQUksQ0FBQyxRQUFRLEVBQUUsR0FBRyxPQUFPLEVBQ3pCLElBQUksQ0FBQyxNQUFNLEVBQUUsRUFDYixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FDeEIsQ0FBQztJQUNKLENBQUM7SUFFa0IsV0FBVztRQUM1QixPQUFPO1lBQ0wsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtZQUM5QixDQUFDLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFO1NB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
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
import { BBox, SerializedVector2, Signal, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@efxlab/motion-canvas-core';
|
|
2
|
+
import { CodeFragmentDrawingInfo, CodeHighlighter, CodePoint, CodeRange, CodeSelection, CodeSignal, PossibleCodeScope, PossibleCodeSelection } from '../code';
|
|
3
|
+
import { DesiredLength } from '../partials';
|
|
4
|
+
import { Shape, ShapeProps } from './Shape';
|
|
5
|
+
/**
|
|
6
|
+
* @experimental
|
|
7
|
+
*/
|
|
8
|
+
export interface DrawTokenHook {
|
|
9
|
+
(ctx: CanvasRenderingContext2D, text: string, position: Vector2, color: string, selection: number): void;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Describes custom drawing logic used by the Code node.
|
|
13
|
+
*
|
|
14
|
+
* @experimental
|
|
15
|
+
*/
|
|
16
|
+
export interface DrawHooks {
|
|
17
|
+
/**
|
|
18
|
+
* Custom drawing logic for individual code tokens.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```ts
|
|
22
|
+
* token(ctx, text, position, color, selection) {
|
|
23
|
+
* const blur = map(3, 0, selection);
|
|
24
|
+
* const alpha = map(0.5, 1, selection);
|
|
25
|
+
* ctx.globalAlpha *= alpha;
|
|
26
|
+
* ctx.filter = `blur(${blur}px)`;
|
|
27
|
+
* ctx.fillStyle = color;
|
|
28
|
+
* ctx.fillText(text, position.x, position.y);
|
|
29
|
+
* }
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
token: DrawTokenHook;
|
|
33
|
+
}
|
|
34
|
+
export interface CodeProps extends ShapeProps {
|
|
35
|
+
/**
|
|
36
|
+
* {@inheritDoc Code.highlighter}
|
|
37
|
+
*/
|
|
38
|
+
highlighter?: SignalValue<CodeHighlighter | null>;
|
|
39
|
+
/**
|
|
40
|
+
* {@inheritDoc Code.code}
|
|
41
|
+
*/
|
|
42
|
+
code?: SignalValue<PossibleCodeScope>;
|
|
43
|
+
/**
|
|
44
|
+
* {@inheritDoc Code.selection}
|
|
45
|
+
*/
|
|
46
|
+
selection?: SignalValue<PossibleCodeSelection>;
|
|
47
|
+
/**
|
|
48
|
+
* {@inheritDoc Code.drawHooks}
|
|
49
|
+
*/
|
|
50
|
+
drawHooks?: SignalValue<DrawHooks>;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* A node for displaying and animating code.
|
|
54
|
+
*
|
|
55
|
+
* @preview
|
|
56
|
+
* ```tsx editor
|
|
57
|
+
* import {Code, makeScene2D} from '@efxlab/motion-canvas-2d';
|
|
58
|
+
* import {createRef} from '@efxlab/motion-canvas-core';
|
|
59
|
+
*
|
|
60
|
+
* export default makeScene2D(function* (view) {
|
|
61
|
+
* const code = createRef<Code>();
|
|
62
|
+
*
|
|
63
|
+
* view.add(
|
|
64
|
+
* <Code
|
|
65
|
+
* ref={code}
|
|
66
|
+
* offset={-1}
|
|
67
|
+
* position={view.size().scale(-0.5).add(60)}
|
|
68
|
+
* fontFamily={'JetBrains Mono, monospace'}
|
|
69
|
+
* fontSize={36}
|
|
70
|
+
* code={`\
|
|
71
|
+
* function hello() {
|
|
72
|
+
* console.log('Hello');
|
|
73
|
+
* }`}
|
|
74
|
+
* />,
|
|
75
|
+
* );
|
|
76
|
+
*
|
|
77
|
+
* yield* code()
|
|
78
|
+
* .code(
|
|
79
|
+
* `\
|
|
80
|
+
* function hello() {
|
|
81
|
+
* console.warn('Hello World');
|
|
82
|
+
* }`,
|
|
83
|
+
* 1,
|
|
84
|
+
* )
|
|
85
|
+
* .wait(0.5)
|
|
86
|
+
* .back(1)
|
|
87
|
+
* .wait(0.5);
|
|
88
|
+
* });
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
export declare class Code extends Shape {
|
|
92
|
+
/**
|
|
93
|
+
* Create a standalone code signal.
|
|
94
|
+
*
|
|
95
|
+
* @param initial - The initial code.
|
|
96
|
+
* @param highlighter - Custom highlighter to use.
|
|
97
|
+
*/
|
|
98
|
+
static createSignal(initial: SignalValue<PossibleCodeScope>, highlighter?: SignalValue<CodeHighlighter>): CodeSignal<void>;
|
|
99
|
+
static defaultHighlighter: CodeHighlighter | null;
|
|
100
|
+
/**
|
|
101
|
+
* The code highlighter to use for this code node.
|
|
102
|
+
*
|
|
103
|
+
* @remarks
|
|
104
|
+
* Defaults to a shared {@link code.LezerHighlighter}.
|
|
105
|
+
*/
|
|
106
|
+
readonly highlighter: SimpleSignal<CodeHighlighter | null, this>;
|
|
107
|
+
/**
|
|
108
|
+
* The code to display.
|
|
109
|
+
*/
|
|
110
|
+
readonly code: CodeSignal<this>;
|
|
111
|
+
/**
|
|
112
|
+
* Custom drawing logic for the code.
|
|
113
|
+
*
|
|
114
|
+
* @remarks
|
|
115
|
+
* Check out {@link DrawHooks} for available render hooks.
|
|
116
|
+
*
|
|
117
|
+
* @experimental
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* Make the unselected code blurry and transparent:
|
|
121
|
+
* ```tsx
|
|
122
|
+
* <Code
|
|
123
|
+
* drawHooks={{
|
|
124
|
+
* token(ctx, text, position, color, selection) {
|
|
125
|
+
* const blur = map(3, 0, selection);
|
|
126
|
+
* const alpha = map(0.5, 1, selection);
|
|
127
|
+
* ctx.globalAlpha *= alpha;
|
|
128
|
+
* ctx.filter = `blur(${blur}px)`;
|
|
129
|
+
* ctx.fillStyle = color;
|
|
130
|
+
* ctx.fillText(text, position.x, position.y);
|
|
131
|
+
* },
|
|
132
|
+
* }}
|
|
133
|
+
* // ...
|
|
134
|
+
* />
|
|
135
|
+
* ```
|
|
136
|
+
*/
|
|
137
|
+
readonly drawHooks: SimpleSignal<DrawHooks, this>;
|
|
138
|
+
protected setDrawHooks(value: DrawHooks): void;
|
|
139
|
+
/**
|
|
140
|
+
* The currently selected code range.
|
|
141
|
+
*
|
|
142
|
+
* @remarks
|
|
143
|
+
* Either a single {@link code.CodeRange} or an array of them
|
|
144
|
+
* describing which parts of the code should be visually emphasized.
|
|
145
|
+
*
|
|
146
|
+
* You can use {@link code.word} and
|
|
147
|
+
* {@link code.lines} to quickly create ranges.
|
|
148
|
+
*
|
|
149
|
+
* @example
|
|
150
|
+
* The following will select the word "console" in the code.
|
|
151
|
+
* Both lines and columns are 0-based. So it will select a 7-character-long
|
|
152
|
+
* (`7`) word in the second line (`1`) starting at the third character (`2`).
|
|
153
|
+
* ```tsx
|
|
154
|
+
* <Code
|
|
155
|
+
* selection={word(1, 2, 7)}
|
|
156
|
+
* code={`\
|
|
157
|
+
* function hello() => {
|
|
158
|
+
* console.log('Hello');
|
|
159
|
+
* }`}
|
|
160
|
+
* // ...
|
|
161
|
+
* />
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
readonly selection: Signal<PossibleCodeSelection, CodeSelection, this>;
|
|
165
|
+
oldSelection: CodeSelection | null;
|
|
166
|
+
selectionProgress: SimpleSignal<number | null, void>;
|
|
167
|
+
protected tweenSelection(value: CodeRange[], duration: number, timingFunction: TimingFunction): ThreadGenerator;
|
|
168
|
+
/**
|
|
169
|
+
* Get the currently displayed code as a string.
|
|
170
|
+
*/
|
|
171
|
+
parsed(): string;
|
|
172
|
+
highlighterCache(): {
|
|
173
|
+
before: unknown;
|
|
174
|
+
after: unknown;
|
|
175
|
+
} | null;
|
|
176
|
+
private cursorCache;
|
|
177
|
+
private get cursor();
|
|
178
|
+
constructor(props: CodeProps);
|
|
179
|
+
/**
|
|
180
|
+
* Create a child code signal.
|
|
181
|
+
*
|
|
182
|
+
* @param initial - The initial code.
|
|
183
|
+
*/
|
|
184
|
+
createSignal(initial: SignalValue<PossibleCodeScope>): CodeSignal<this>;
|
|
185
|
+
/**
|
|
186
|
+
* Find all code ranges that match the given pattern.
|
|
187
|
+
*
|
|
188
|
+
* @param pattern - Either a string or a regular expression to search for.
|
|
189
|
+
* When a string is passed, it looks for **exact matches**.
|
|
190
|
+
* When a RegExp object is passed, it will match against it.
|
|
191
|
+
*/
|
|
192
|
+
findAllRanges(pattern: string | RegExp): CodeRange[];
|
|
193
|
+
/**
|
|
194
|
+
* Find the first code range that matches the given pattern.
|
|
195
|
+
*
|
|
196
|
+
* @param pattern - Either a string or a regular expression to search for.
|
|
197
|
+
* When a string is passed, it looks for **exact matches**.
|
|
198
|
+
* When a RegExp object is passed, it will match against it.
|
|
199
|
+
*/
|
|
200
|
+
findFirstRange(pattern: string | RegExp): CodeRange;
|
|
201
|
+
/**
|
|
202
|
+
* Find the last code range that matches the given pattern.
|
|
203
|
+
*
|
|
204
|
+
* @param pattern - Either a string or a regular expression to search for.
|
|
205
|
+
* When a string is passed, it looks for **exact matches**.
|
|
206
|
+
* When a RegExp object is passed, it will match against it.
|
|
207
|
+
*/
|
|
208
|
+
findLastRange(pattern: string | RegExp): CodeRange;
|
|
209
|
+
/**
|
|
210
|
+
* Return the bounding box of the given point (character) in the code.
|
|
211
|
+
*
|
|
212
|
+
* @remarks
|
|
213
|
+
* The returned bound box is in local space of the `Code` node.
|
|
214
|
+
*
|
|
215
|
+
* @param point - The point to get the bounding box for.
|
|
216
|
+
*/
|
|
217
|
+
getPointBBox(point: CodePoint): BBox;
|
|
218
|
+
/**
|
|
219
|
+
* Return bounding boxes of all characters in the selection.
|
|
220
|
+
*
|
|
221
|
+
* @remarks
|
|
222
|
+
* The returned bounding boxes are in local space of the `Code` node.
|
|
223
|
+
* Each line of code has a separate bounding box.
|
|
224
|
+
*
|
|
225
|
+
* @param selection - The selection to get the bounding boxes for.
|
|
226
|
+
*/
|
|
227
|
+
getSelectionBBox(selection: PossibleCodeSelection): BBox[];
|
|
228
|
+
protected drawingInfo(): {
|
|
229
|
+
fragments: CodeFragmentDrawingInfo[];
|
|
230
|
+
verticalOffset: number;
|
|
231
|
+
fontHeight: number;
|
|
232
|
+
};
|
|
233
|
+
protected desiredSize(): SerializedVector2<DesiredLength>;
|
|
234
|
+
protected draw(context: CanvasRenderingContext2D): void;
|
|
235
|
+
protected applyText(context: CanvasRenderingContext2D): void;
|
|
236
|
+
protected collectAsyncResources(): void;
|
|
237
|
+
}
|
|
238
|
+
//# sourceMappingURL=Code.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/lib/components/Code.ts"],"names":[],"mappings":"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"}
|