@tldraw/editor 3.12.0-internal.624e32507d98 → 3.13.0-canary.1793786aff8a
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/CHANGELOG.md +134 -0
- package/dist-cjs/index.d.ts +170 -21
- package/dist-cjs/index.js +3 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/TldrawEditor.js +5 -0
- package/dist-cjs/lib/TldrawEditor.js.map +2 -2
- package/dist-cjs/lib/components/GeometryDebuggingView.js +2 -2
- package/dist-cjs/lib/components/GeometryDebuggingView.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +10 -1
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +208 -18
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/managers/FocusManager.js +1 -1
- package/dist-cjs/lib/editor/managers/FocusManager.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js +12 -0
- package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +4 -13
- package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
- package/dist-cjs/lib/editor/types/selection-types.js.map +1 -1
- package/dist-cjs/lib/exports/StyleEmbedder.js +31 -60
- package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
- package/dist-cjs/lib/exports/cssRules.js +3 -9
- package/dist-cjs/lib/exports/cssRules.js.map +2 -2
- package/dist-cjs/lib/exports/exportToSvg.js +1 -4
- package/dist-cjs/lib/exports/exportToSvg.js.map +2 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js +2 -2
- package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
- package/dist-cjs/lib/hooks/useDocumentEvents.js +16 -0
- package/dist-cjs/lib/hooks/useDocumentEvents.js.map +2 -2
- package/dist-cjs/lib/license/Watermark.js +10 -20
- package/dist-cjs/lib/license/Watermark.js.map +2 -2
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js +139 -16
- package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +3 -3
- package/dist-cjs/lib/primitives/geometry/Group2d.js +54 -11
- package/dist-cjs/lib/primitives/geometry/Group2d.js.map +2 -2
- package/dist-cjs/lib/primitives/intersect.js +20 -0
- package/dist-cjs/lib/primitives/intersect.js.map +2 -2
- package/dist-cjs/lib/utils/reorderShapes.js +2 -8
- package/dist-cjs/lib/utils/reorderShapes.js.map +2 -2
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +170 -21
- package/dist-esm/index.mjs +8 -2
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/TldrawEditor.mjs +5 -0
- package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
- package/dist-esm/lib/components/GeometryDebuggingView.mjs +3 -3
- package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +10 -1
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +209 -18
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/managers/FocusManager.mjs +1 -1
- package/dist-esm/lib/editor/managers/FocusManager.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +12 -0
- package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +4 -13
- package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/exports/StyleEmbedder.mjs +32 -61
- package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
- package/dist-esm/lib/exports/cssRules.mjs +3 -9
- package/dist-esm/lib/exports/cssRules.mjs.map +2 -2
- package/dist-esm/lib/exports/exportToSvg.mjs +1 -4
- package/dist-esm/lib/exports/exportToSvg.mjs.map +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs +2 -2
- package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
- package/dist-esm/lib/hooks/useDocumentEvents.mjs +16 -0
- package/dist-esm/lib/hooks/useDocumentEvents.mjs.map +2 -2
- package/dist-esm/lib/license/Watermark.mjs +10 -20
- package/dist-esm/lib/license/Watermark.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +143 -14
- package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/geometry/Group2d.mjs +55 -12
- package/dist-esm/lib/primitives/geometry/Group2d.mjs.map +2 -2
- package/dist-esm/lib/primitives/intersect.mjs +20 -0
- package/dist-esm/lib/primitives/intersect.mjs.map +2 -2
- package/dist-esm/lib/utils/reorderShapes.mjs +2 -8
- package/dist-esm/lib/utils/reorderShapes.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/editor.css +34 -19
- package/package.json +7 -7
- package/src/index.ts +12 -2
- package/src/lib/TldrawEditor.tsx +30 -3
- package/src/lib/components/GeometryDebuggingView.tsx +3 -3
- package/src/lib/components/default-components/DefaultCanvas.tsx +6 -1
- package/src/lib/editor/Editor.ts +315 -24
- package/src/lib/editor/managers/FocusManager.ts +1 -1
- package/src/lib/editor/shapes/ShapeUtil.ts +14 -0
- package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +7 -15
- package/src/lib/editor/types/selection-types.ts +3 -0
- package/src/lib/exports/StyleEmbedder.ts +34 -81
- package/src/lib/exports/cssRules.ts +5 -11
- package/src/lib/exports/exportToSvg.tsx +1 -5
- package/src/lib/hooks/useCanvasEvents.ts +6 -2
- package/src/lib/hooks/useDocumentEvents.ts +18 -0
- package/src/lib/license/Watermark.tsx +18 -29
- package/src/lib/primitives/geometry/Geometry2d.ts +216 -19
- package/src/lib/primitives/geometry/Group2d.ts +76 -13
- package/src/lib/primitives/intersect.ts +41 -0
- package/src/lib/utils/reorderShapes.ts +2 -9
- package/src/version.ts +3 -3
package/editor.css
CHANGED
|
@@ -63,31 +63,40 @@
|
|
|
63
63
|
|
|
64
64
|
/* Cursor SVGs */
|
|
65
65
|
--tl-cursor-none: none;
|
|
66
|
-
--tl-cursor-default:
|
|
66
|
+
--tl-cursor-default:
|
|
67
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>")
|
|
67
68
|
12 8,
|
|
68
69
|
default;
|
|
69
|
-
--tl-cursor-pointer:
|
|
70
|
+
--tl-cursor-pointer:
|
|
71
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' stroke-linejoin='round'/><path d='m21.5664 21.7344v-3.459'/><path d='m19.5508 21.7461-.016-3.473'/><path d='m17.5547 18.3047.021 3.426'/></g></g></svg>")
|
|
70
72
|
14 10,
|
|
71
73
|
pointer;
|
|
72
|
-
--tl-cursor-cross:
|
|
74
|
+
--tl-cursor-cross:
|
|
75
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>")
|
|
73
76
|
16 16,
|
|
74
77
|
crosshair;
|
|
75
|
-
--tl-cursor-move:
|
|
78
|
+
--tl-cursor-move:
|
|
79
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>")
|
|
76
80
|
16 16,
|
|
77
81
|
move;
|
|
78
|
-
--tl-cursor-grab:
|
|
82
|
+
--tl-cursor-grab:
|
|
83
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' stroke-linejoin='round'/><path d='m20.5664 21.7344v-3.459'/><path d='m18.5508 21.7461-.016-3.473'/><path d='m16.5547 18.3047.021 3.426'/></g></g></svg>")
|
|
79
84
|
16 16,
|
|
80
85
|
grab;
|
|
81
|
-
--tl-cursor-grabbing:
|
|
86
|
+
--tl-cursor-grabbing:
|
|
87
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042' fill='white'/><g stroke='black' stroke-width='.75'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042z' stroke-linejoin='round'/><path d='m20.5664 19.7344v-3.459' stroke-linecap='round'/><path d='m18.5508 19.7461-.016-3.473' stroke-linecap='round'/><path d='m16.5547 16.3047.021 3.426' stroke-linecap='round'/></g></g></svg>")
|
|
82
88
|
16 16,
|
|
83
89
|
grabbing;
|
|
84
|
-
--tl-cursor-text:
|
|
90
|
+
--tl-cursor-text:
|
|
91
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path fill='white' d='M7.94 0a5.25 5.25 0 0 0-3.47 1.17A5.27 5.27 0 0 0 1 0H0v3h1c1.41 0 1.85.7 2 1v3.94H2v3h1v3c-.13.3-.57 1-2 1H0v3h1a5.27 5.27 0 0 0 3.47-1.17c.98.8 2.21 1.21 3.47 1.17h1v-3h-1c-1.41 0-1.85-.7-2-1v-3H7v-3H6V4c.13-.3.57-1 2-1h1V0H7.94z'/><path fill='black' d='M7.94 2V1a4 4 0 0 0-3.47 1.64A4 4 0 0 0 1 1v1c1.3-.17 2.56.6 3 1.84v5.1H3v1h1v4.16c-.45 1.24-1.7 2-3 1.84v1a4.05 4.05 0 0 0 3.47-1.63 4.05 4.05 0 0 0 3.47 1.63v-1A2.82 2.82 0 0 1 5 14.1V9.93h1v-1H5V3.85A2.81 2.81 0 0 1 7.94 2z'/></g></svg>")
|
|
85
92
|
4 10,
|
|
86
93
|
text;
|
|
87
|
-
--tl-cursor-zoom-in:
|
|
94
|
+
--tl-cursor-zoom-in:
|
|
95
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 14h-2v-2h-2v2h-2v1.98h2v2.02h2v-2.02h2z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
|
|
88
96
|
16 16,
|
|
89
97
|
zoom-in;
|
|
90
|
-
--tl-cursor-zoom-out:
|
|
98
|
+
--tl-cursor-zoom-out:
|
|
99
|
+
url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 16h-5.98v-1.98h5.98z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
|
|
91
100
|
16 16,
|
|
92
101
|
zoom-out;
|
|
93
102
|
|
|
@@ -114,10 +123,10 @@
|
|
|
114
123
|
/* text outline */
|
|
115
124
|
--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
116
125
|
--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
117
|
-
--tl-text-outline-reference:
|
|
118
|
-
0 var(--
|
|
119
|
-
var(--
|
|
120
|
-
var(--b) var(--a) 0 var(--color-background);
|
|
126
|
+
--tl-text-outline-reference:
|
|
127
|
+
0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),
|
|
128
|
+
var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background),
|
|
129
|
+
var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background);
|
|
121
130
|
--tl-text-outline: var(--tl-text-outline-reference);
|
|
122
131
|
/* own properties */
|
|
123
132
|
position: relative;
|
|
@@ -168,11 +177,14 @@
|
|
|
168
177
|
--color-laser: hsl(0, 100%, 50%);
|
|
169
178
|
/* Shadows */
|
|
170
179
|
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
171
|
-
--shadow-2:
|
|
180
|
+
--shadow-2:
|
|
181
|
+
0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
|
|
172
182
|
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
173
|
-
--shadow-3:
|
|
183
|
+
--shadow-3:
|
|
184
|
+
0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
|
|
174
185
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
175
|
-
--shadow-4:
|
|
186
|
+
--shadow-4:
|
|
187
|
+
0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
|
|
176
188
|
0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
177
189
|
}
|
|
178
190
|
|
|
@@ -215,11 +227,14 @@
|
|
|
215
227
|
--color-text: hsl(210, 17%, 98%);
|
|
216
228
|
--color-laser: hsl(0, 100%, 50%);
|
|
217
229
|
/* Shadows */
|
|
218
|
-
--shadow-1:
|
|
230
|
+
--shadow-1:
|
|
231
|
+
0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
|
|
219
232
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
220
|
-
--shadow-2:
|
|
233
|
+
--shadow-2:
|
|
234
|
+
0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
|
|
221
235
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
222
|
-
--shadow-3:
|
|
236
|
+
--shadow-3:
|
|
237
|
+
0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
|
|
223
238
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
224
239
|
}
|
|
225
240
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tldraw/editor",
|
|
3
3
|
"description": "A tiny little drawing app (editor).",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.13.0-canary.1793786aff8a",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
"@tiptap/core": "^2.9.1",
|
|
49
49
|
"@tiptap/pm": "^2.9.1",
|
|
50
50
|
"@tiptap/react": "^2.9.1",
|
|
51
|
-
"@tldraw/state": "3.
|
|
52
|
-
"@tldraw/state-react": "3.
|
|
53
|
-
"@tldraw/store": "3.
|
|
54
|
-
"@tldraw/tlschema": "3.
|
|
55
|
-
"@tldraw/utils": "3.
|
|
56
|
-
"@tldraw/validate": "3.
|
|
51
|
+
"@tldraw/state": "3.13.0-canary.1793786aff8a",
|
|
52
|
+
"@tldraw/state-react": "3.13.0-canary.1793786aff8a",
|
|
53
|
+
"@tldraw/store": "3.13.0-canary.1793786aff8a",
|
|
54
|
+
"@tldraw/tlschema": "3.13.0-canary.1793786aff8a",
|
|
55
|
+
"@tldraw/utils": "3.13.0-canary.1793786aff8a",
|
|
56
|
+
"@tldraw/validate": "3.13.0-canary.1793786aff8a",
|
|
57
57
|
"@types/core-js": "^2.5.8",
|
|
58
58
|
"@use-gesture/react": "^10.3.1",
|
|
59
59
|
"classnames": "^2.5.1",
|
package/src/index.ts
CHANGED
|
@@ -293,7 +293,11 @@ export {
|
|
|
293
293
|
type TLSvgExportOptions,
|
|
294
294
|
type TLSvgOptions,
|
|
295
295
|
} from './lib/editor/types/misc-types'
|
|
296
|
-
export {
|
|
296
|
+
export {
|
|
297
|
+
type TLAdjacentDirection,
|
|
298
|
+
type TLResizeHandle,
|
|
299
|
+
type TLSelectionHandle,
|
|
300
|
+
} from './lib/editor/types/selection-types'
|
|
297
301
|
export { getSvgAsImage } from './lib/exports/getSvgAsImage'
|
|
298
302
|
export { tlenv } from './lib/globals/environment'
|
|
299
303
|
export { tlmenus } from './lib/globals/menus'
|
|
@@ -360,7 +364,13 @@ export { CubicBezier2d } from './lib/primitives/geometry/CubicBezier2d'
|
|
|
360
364
|
export { CubicSpline2d } from './lib/primitives/geometry/CubicSpline2d'
|
|
361
365
|
export { Edge2d } from './lib/primitives/geometry/Edge2d'
|
|
362
366
|
export { Ellipse2d } from './lib/primitives/geometry/Ellipse2d'
|
|
363
|
-
export {
|
|
367
|
+
export {
|
|
368
|
+
Geometry2d,
|
|
369
|
+
Geometry2dFilters,
|
|
370
|
+
TransformedGeometry2d,
|
|
371
|
+
type Geometry2dOptions,
|
|
372
|
+
type TransformedGeometry2dOptions,
|
|
373
|
+
} from './lib/primitives/geometry/Geometry2d'
|
|
364
374
|
export { Group2d } from './lib/primitives/geometry/Group2d'
|
|
365
375
|
export { Point2d } from './lib/primitives/geometry/Point2d'
|
|
366
376
|
export { Polygon2d } from './lib/primitives/geometry/Polygon2d'
|
package/src/lib/TldrawEditor.tsx
CHANGED
|
@@ -50,7 +50,7 @@ import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
|
|
|
50
50
|
|
|
51
51
|
/**
|
|
52
52
|
* Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when passing in a
|
|
53
|
-
*
|
|
53
|
+
* `TLStore` directly. If you would like tldraw to create a store for you, use
|
|
54
54
|
* {@link TldrawEditorWithoutStoreProps}.
|
|
55
55
|
*
|
|
56
56
|
* @public
|
|
@@ -64,7 +64,7 @@ export interface TldrawEditorWithStoreProps {
|
|
|
64
64
|
|
|
65
65
|
/**
|
|
66
66
|
* Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when not passing in a
|
|
67
|
-
*
|
|
67
|
+
* `TLStore` directly. If you would like to pass in a store directly, use
|
|
68
68
|
* {@link TldrawEditorWithStoreProps}.
|
|
69
69
|
*
|
|
70
70
|
* @public
|
|
@@ -191,11 +191,33 @@ export interface TldrawEditorBaseProps {
|
|
|
191
191
|
/**
|
|
192
192
|
* Predicate for whether or not a shape should be hidden.
|
|
193
193
|
*
|
|
194
|
+
* @deprecated Use {@link TldrawEditorBaseProps#getShapeVisibility} instead.
|
|
195
|
+
*/
|
|
196
|
+
isShapeHidden?(shape: TLShape, editor: Editor): boolean
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Provides a way to hide shapes.
|
|
200
|
+
*
|
|
194
201
|
* Hidden shapes will not render in the editor, and they will not be eligible for hit test via
|
|
195
202
|
* {@link Editor#getShapeAtPoint} and {@link Editor#getShapesAtPoint}. But otherwise they will
|
|
196
203
|
* remain in the store and participate in all other operations.
|
|
204
|
+
*
|
|
205
|
+
* @example
|
|
206
|
+
* ```ts
|
|
207
|
+
* getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}
|
|
208
|
+
* ```
|
|
209
|
+
*
|
|
210
|
+
* - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden.
|
|
211
|
+
* - `'hidden'` - The shape will be hidden.
|
|
212
|
+
* - `'visible'` - The shape will be visible.
|
|
213
|
+
*
|
|
214
|
+
* @param shape - The shape to check.
|
|
215
|
+
* @param editor - The editor instance.
|
|
197
216
|
*/
|
|
198
|
-
|
|
217
|
+
getShapeVisibility?(
|
|
218
|
+
shape: TLShape,
|
|
219
|
+
editor: Editor
|
|
220
|
+
): 'visible' | 'hidden' | 'inherit' | null | undefined
|
|
199
221
|
|
|
200
222
|
/**
|
|
201
223
|
* The URLs for the fonts to use in the editor.
|
|
@@ -262,6 +284,7 @@ export const TldrawEditor = memo(function TldrawEditor({
|
|
|
262
284
|
className={classNames(`${TL_CONTAINER_CLASS} tl-theme__light`, className)}
|
|
263
285
|
onPointerDown={stopEventPropagation}
|
|
264
286
|
tabIndex={-1}
|
|
287
|
+
role="application"
|
|
265
288
|
>
|
|
266
289
|
<OptionalErrorBoundary
|
|
267
290
|
fallback={ErrorFallback}
|
|
@@ -387,7 +410,9 @@ function TldrawEditorWithReadyStore({
|
|
|
387
410
|
options,
|
|
388
411
|
licenseKey,
|
|
389
412
|
deepLinks: _deepLinks,
|
|
413
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
390
414
|
isShapeHidden,
|
|
415
|
+
getShapeVisibility,
|
|
391
416
|
assetUrls,
|
|
392
417
|
}: Required<
|
|
393
418
|
TldrawEditorProps & {
|
|
@@ -447,6 +472,7 @@ function TldrawEditorWithReadyStore({
|
|
|
447
472
|
options,
|
|
448
473
|
licenseKey,
|
|
449
474
|
isShapeHidden,
|
|
475
|
+
getShapeVisibility,
|
|
450
476
|
fontAssetUrls: assetUrls?.fonts,
|
|
451
477
|
})
|
|
452
478
|
|
|
@@ -482,6 +508,7 @@ function TldrawEditorWithReadyStore({
|
|
|
482
508
|
setEditor,
|
|
483
509
|
licenseKey,
|
|
484
510
|
isShapeHidden,
|
|
511
|
+
getShapeVisibility,
|
|
485
512
|
textOptions,
|
|
486
513
|
assetUrls,
|
|
487
514
|
]
|
|
@@ -114,13 +114,13 @@ export const GeometryDebuggingView = track(function GeometryDebuggingView({
|
|
|
114
114
|
function GeometryStroke({ geometry }: { geometry: Geometry2d }) {
|
|
115
115
|
if (geometry instanceof Group2d) {
|
|
116
116
|
return (
|
|
117
|
-
|
|
117
|
+
<g stroke={geometry.debugColor}>
|
|
118
118
|
{[...geometry.children, ...geometry.ignoredChildren].map((child, i) => (
|
|
119
119
|
<GeometryStroke geometry={child} key={i} />
|
|
120
120
|
))}
|
|
121
|
-
|
|
121
|
+
</g>
|
|
122
122
|
)
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
return <path d={geometry.toSimpleSvgPath()} />
|
|
125
|
+
return <path d={geometry.toSimpleSvgPath()} stroke={geometry.debugColor} />
|
|
126
126
|
}
|
|
@@ -361,7 +361,12 @@ function HandleWrapper({
|
|
|
361
361
|
if (!Handle) return null
|
|
362
362
|
|
|
363
363
|
return (
|
|
364
|
-
<g
|
|
364
|
+
<g
|
|
365
|
+
role="button"
|
|
366
|
+
aria-label="handle"
|
|
367
|
+
transform={`translate(${handle.x}, ${handle.y})`}
|
|
368
|
+
{...events}
|
|
369
|
+
>
|
|
365
370
|
<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />
|
|
366
371
|
</g>
|
|
367
372
|
)
|