2023-06-17 22:33:21 +00:00
|
|
|
/* @tldraw/editor */
|
[3/3] Highlighter styling (#1490)
This PR finalises the highlighter shape with new colors, sizing, and
perfect freehand options.
The colors are based on our existing colour palette, but take advantage
of wide-gamut displays to make the highlighter highlightier. I used my
[oklch color palette tool to pick the
palette](https://alex.dytry.ch/toys/palette/?palette=%7B%22families%22:%5B%22black%22,%22grey%22,%22white%22,%22green%22,%22light-green%22,%22blue%22,%22light-blue%22,%22violet%22,%22light-violet%22,%22red%22,%22light-red%22,%22orange%22,%22yellow%22%5D,%22shades%22:%5B%22light-mode%22,%22dark-mode%22,%22hl-light%22,%22hl-dark%22%5D,%22colors%22:%5B%5B%5B0.2308,0,null%5D,%5B0.9097,0,null%5D,%5B0.2308,0,null%5D,%5B0.2308,0,null%5D%5D,%5B%5B0.7692,0.0145,248.02%5D,%5B0.6778,0.0118,256.72%5D,%5B0.7692,0.0145,248.02%5D,%5B0.7692,0.0145,248.02%5D%5D,%5B%5B1,0,null%5D,%5B0.2308,0,null%5D,%5B1,0,null%5D,%5B1,0,null%5D%5D,%5B%5B0.5851,0.1227,164.1%5D,%5B0.5319,0.0811,162.23%5D,%5B0.8729,0.2083,173.3%5D,%5B0.5851,0.152,173.3%5D%5D,%5B%5B0.7146,0.1835,146.44%5D,%5B0.6384,0.1262,143.36%5D,%5B0.8603,0.2438,140.11%5D,%5B0.6082,0.2286,140.11%5D%5D,%5B%5B0.5566,0.2082,268.35%5D,%5B0.4961,0.1644,270.65%5D,%5B0.7158,0.173,243.85%5D,%5B0.5573,0.178,243.85%5D%5D,%5B%5B0.718,0.1422,246.06%5D,%5B0.6366,0.1055,250.98%5D,%5B0.8615,0.1896,200.03%5D,%5B0.707,0.161,200.03%5D%5D,%5B%5B0.5783,0.2186,319.15%5D,%5B0.5043,0.1647,315.37%5D,%5B0.728,0.2001,307.45%5D,%5B0.5433,0.2927,307.45%5D%5D,%5B%5B0.7904,0.1516,319.77%5D,%5B0.6841,0.1139,315.99%5D,%5B0.812,0.21,327.8%5D,%5B0.5668,0.281,327.8%5D%5D,%5B%5B0.5928,0.2106,26.53%5D,%5B0.5112,0.1455,26.18%5D,%5B0.7326,0.21,20.59%5D,%5B0.554,0.2461,20.59%5D%5D,%5B%5B0.7563,0.146,21.1%5D,%5B0.6561,0.0982,20.86%5D,%5B0.7749,0.178,6.8%5D,%5B0.5565,0.2454,6.8%5D%5D,%5B%5B0.6851,0.1954,44.57%5D,%5B0.5958,0.1366,46.6%5D,%5B0.8207,0.175,68.62%5D,%5B0.6567,0.164,68.61%5D%5D,%5B%5B0.8503,0.1149,68.95%5D,%5B0.7404,0.0813,72.25%5D,%5B0.8939,0.2137,100.36%5D,%5B0.7776,0.186,100.36%5D%5D%5D%7D&selected=3).
I'm not sure happy about these colors as they are right now - in
particular, i think dark mode looks a bit rubbish and there are a few
colors where the highlight and original version are much too similar
(light-violet & light-red). Black uses yellow (like note shape) and grey
uses light-blue. Exports are forced into srgb color space rather than P3
for maximum compatibility.
The size of a highlighter stroke is now based on the text size which
works nicely for making the highlighter play well with text:
Perfect freehands settings are very similar to the draw tool, but with
the thinning turned way down. There is still some, but it's pretty
minimal.
### The plan
1. initial highlighter shape/tool #1401
2. sandwich rendering for highlighter shapes #1418
3. shape styling - new colours and sizes, lightweight perfect freehand
changes #1490 **>you are here<**
### Change Type
- [x] `minor` — New Feature
### Test Plan
1. You can find the highlighter tool in the extended toolbar
2. You can activate the highlighter tool by pressing shift-D
3. Highlighter draws nice and vibrantly when over the page background or
frame background
4. Highlighter is less vibrant but still visible when drawn over images
/ other fills
5. Highlighter size should nicely match the corresponding unscaled text
size
6. Exports with highlighter look as expected
### Release Notes
Highlighter pen is here! 🎉🎉🎉
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 15:34:59 +00:00
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-container {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
/* Spacing */
|
|
|
|
|
--space-1: 2px;
|
|
|
|
|
--space-2: 4px;
|
|
|
|
|
--space-3: 8px;
|
|
|
|
|
--space-4: 12px;
|
|
|
|
|
--space-5: 16px;
|
|
|
|
|
--space-6: 20px;
|
|
|
|
|
--space-7: 28px;
|
|
|
|
|
--space-8: 32px;
|
|
|
|
|
--space-9: 64px;
|
|
|
|
|
--space-10: 72px;
|
|
|
|
|
/* Radius */
|
|
|
|
|
--radius-0: 2px;
|
|
|
|
|
--radius-1: 4px;
|
2023-10-28 21:58:32 +00:00
|
|
|
--radius-2: 6px;
|
2023-04-25 11:01:25 +00:00
|
|
|
--radius-3: 9px;
|
2024-01-14 16:27:16 +00:00
|
|
|
--radius-4: 11px;
|
2024-01-13 18:04:19 +00:00
|
|
|
/* Z Index */
|
2023-10-28 21:58:32 +00:00
|
|
|
--layer-background: 100;
|
2023-04-25 11:01:25 +00:00
|
|
|
--layer-grid: 150;
|
2024-04-05 18:03:22 +00:00
|
|
|
--layer-culled-shapes: 175;
|
2023-04-25 11:01:25 +00:00
|
|
|
--layer-canvas: 200;
|
2023-10-28 21:58:32 +00:00
|
|
|
--layer-shapes: 300;
|
|
|
|
|
--layer-overlays: 400;
|
2024-05-07 10:06:35 +00:00
|
|
|
--layer-in-front: 500;
|
2023-10-28 21:58:32 +00:00
|
|
|
--layer-following-indicator: 1000;
|
2024-04-09 14:34:24 +00:00
|
|
|
--layer-blocker: 10000;
|
2024-04-14 18:40:02 +00:00
|
|
|
|
|
|
|
|
/* z index for text editors */
|
|
|
|
|
--layer-text-container: 1;
|
|
|
|
|
--layer-text-content: 3;
|
|
|
|
|
--layer-text-editor: 4;
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
/* Misc */
|
2023-05-05 14:14:42 +00:00
|
|
|
--tl-zoom: 1;
|
2023-05-23 14:12:11 +00:00
|
|
|
|
2023-06-05 14:49:44 +00:00
|
|
|
/* Cursor SVGs */
|
2023-05-23 14:12:11 +00:00
|
|
|
--tl-cursor-none: none;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-default: 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>")
|
|
|
|
|
12 8,
|
2023-06-24 08:24:10 +00:00
|
|
|
default;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-pointer: 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>")
|
|
|
|
|
14 10,
|
|
|
|
|
pointer;
|
|
|
|
|
--tl-cursor-cross: 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>")
|
|
|
|
|
16 16,
|
2023-06-24 08:24:10 +00:00
|
|
|
crosshair;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-move: 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>")
|
|
|
|
|
16 16,
|
2023-06-24 08:24:10 +00:00
|
|
|
move;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-grab: 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>")
|
|
|
|
|
16 16,
|
2023-06-24 08:24:10 +00:00
|
|
|
grab;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-grabbing: 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>")
|
|
|
|
|
16 16,
|
2023-06-24 08:24:10 +00:00
|
|
|
grabbing;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-text: 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>")
|
|
|
|
|
4 10,
|
2023-06-24 08:24:10 +00:00
|
|
|
text;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-zoom-in: 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>")
|
|
|
|
|
16 16,
|
2023-06-24 08:24:10 +00:00
|
|
|
zoom-in;
|
2023-06-05 14:49:44 +00:00
|
|
|
--tl-cursor-zoom-out: 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>")
|
|
|
|
|
16 16,
|
2023-06-24 08:24:10 +00:00
|
|
|
zoom-out;
|
2023-05-23 14:12:11 +00:00
|
|
|
|
2023-06-05 14:49:44 +00:00
|
|
|
/* These cursor values get programmatically overridden */
|
|
|
|
|
/* They're just here to help your editor autocomplete */
|
2023-06-24 08:24:10 +00:00
|
|
|
--tl-cursor: var(--tl-cursor-default);
|
2023-06-15 15:10:08 +00:00
|
|
|
--tl-cursor-resize-edge: ew-resize;
|
|
|
|
|
--tl-cursor-resize-corner: nesw-resize;
|
|
|
|
|
--tl-cursor-ew-resize: ew-resize;
|
|
|
|
|
--tl-cursor-ns-resize: ns-resize;
|
|
|
|
|
--tl-cursor-nesw-resize: nesw-resize;
|
|
|
|
|
--tl-cursor-nwse-resize: nwse-resize;
|
|
|
|
|
--tl-cursor-rotate: pointer;
|
|
|
|
|
--tl-cursor-nwse-rotate: pointer;
|
|
|
|
|
--tl-cursor-nesw-rotate: pointer;
|
|
|
|
|
--tl-cursor-senw-rotate: pointer;
|
|
|
|
|
--tl-cursor-swne-rotate: pointer;
|
2023-05-05 14:14:42 +00:00
|
|
|
--tl-scale: calc(1 / var(--tl-zoom));
|
2024-01-13 18:04:19 +00:00
|
|
|
/* fonts */
|
2023-05-05 14:14:42 +00:00
|
|
|
--tl-font-draw: 'tldraw_draw', sans-serif;
|
|
|
|
|
--tl-font-sans: 'tldraw_sans', sans-serif;
|
|
|
|
|
--tl-font-serif: 'tldraw_serif', serif;
|
|
|
|
|
--tl-font-mono: 'tldraw_mono', monospace;
|
2024-01-13 18:04:19 +00:00
|
|
|
/* fext outline */
|
2023-05-05 14:14:42 +00:00
|
|
|
--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
|
|
|
--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
|
|
|
--tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),
|
2023-04-25 11:01:25 +00:00
|
|
|
var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background),
|
|
|
|
|
var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background);
|
2024-01-13 18:04:19 +00:00
|
|
|
/* own properties */
|
2023-04-25 11:01:25 +00:00
|
|
|
position: relative;
|
2024-02-12 15:03:25 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-06-20 12:08:49 +00:00
|
|
|
overflow: clip;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-theme__light {
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-accent: hsl(0, 76%, 60%);
|
|
|
|
|
--color-background: hsl(210, 20%, 98%);
|
|
|
|
|
--color-brush-fill: hsl(0, 0%, 56%, 10.2%);
|
|
|
|
|
--color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
|
|
|
|
|
--color-grid: hsl(0, 0%, 43%);
|
2023-10-28 21:58:32 +00:00
|
|
|
--color-low: hsl(204, 16%, 94%);
|
|
|
|
|
--color-low-border: hsl(204, 16%, 92%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-culled: hsl(204, 14%, 93%);
|
|
|
|
|
--color-muted-none: hsl(0, 0%, 0%, 0%);
|
|
|
|
|
--color-muted-0: hsl(0, 0%, 0%, 2%);
|
|
|
|
|
--color-muted-1: hsl(0, 0%, 0%, 10%);
|
|
|
|
|
--color-muted-2: hsl(0, 0%, 0%, 4.3%);
|
|
|
|
|
--color-hint: hsl(0, 0%, 0%, 5.5%);
|
2024-01-14 16:27:16 +00:00
|
|
|
--color-overlay: hsl(0, 0%, 0%, 20%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-divider: hsl(0, 0%, 91%);
|
|
|
|
|
--color-panel-contrast: hsl(0, 0%, 100%);
|
|
|
|
|
--color-panel-overlay: hsl(0, 0%, 100%, 82%);
|
|
|
|
|
--color-panel: hsl(0, 0%, 99%);
|
|
|
|
|
--color-focus: hsl(214, 100%, 29%);
|
|
|
|
|
--color-selected: hsl(214, 84%, 56%);
|
|
|
|
|
--color-selected-contrast: hsl(0, 0%, 100%);
|
2024-01-14 16:27:16 +00:00
|
|
|
--color-selection-fill: hsl(210, 100%, 56%, 24%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-selection-stroke: hsl(214, 84%, 56%);
|
|
|
|
|
--color-text-0: hsl(0, 0%, 11%);
|
|
|
|
|
--color-text-1: hsl(0, 0%, 18%);
|
|
|
|
|
--color-text-3: hsl(220, 2%, 65%);
|
|
|
|
|
--color-text-shadow: hsl(0, 0%, 100%);
|
|
|
|
|
--color-primary: hsl(214, 84%, 56%);
|
2024-03-27 09:41:13 +00:00
|
|
|
--color-success: hsl(123, 46%, 34%);
|
|
|
|
|
--color-info: hsl(201, 98%, 41%);
|
|
|
|
|
--color-warning: hsl(27, 98%, 47%);
|
|
|
|
|
--color-error: hsl(0, 65%, 51%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-warn: hsl(0, 90%, 43%);
|
|
|
|
|
--color-text: hsl(0, 0%, 0%);
|
|
|
|
|
--color-laser: hsl(0, 100%, 50%);
|
|
|
|
|
/* Shadows */
|
|
|
|
|
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
|
|
|
--shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
|
|
|
|
|
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
|
|
|
--shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
|
2023-04-25 11:01:25 +00:00
|
|
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
2024-01-13 18:04:19 +00:00
|
|
|
--shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
|
|
|
|
|
0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-theme__dark {
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-accent: hsl(0, 76%, 60%);
|
2024-04-17 09:31:55 +00:00
|
|
|
--color-background: hsl(240, 5%, 6.5%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-brush-fill: hsl(0, 0%, 71%, 5.1%);
|
|
|
|
|
--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
|
2024-04-17 09:31:55 +00:00
|
|
|
--color-grid: hsl(0, 0%, 40%);
|
|
|
|
|
--color-low: hsl(260, 4.5%, 10.5%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-low-border: hsl(207, 10%, 10%);
|
|
|
|
|
--color-culled: hsl(210, 11%, 19%);
|
|
|
|
|
--color-muted-none: hsl(0, 0%, 100%, 0%);
|
|
|
|
|
--color-muted-0: hsl(0, 0%, 100%, 2%);
|
|
|
|
|
--color-muted-1: hsl(0, 0%, 100%, 10%);
|
|
|
|
|
--color-muted-2: hsl(0, 0%, 100%, 5%);
|
2024-01-14 16:27:16 +00:00
|
|
|
--color-hint: hsl(0, 0%, 100%, 7%);
|
|
|
|
|
--color-overlay: hsl(0, 0%, 0%, 50%);
|
2024-04-17 09:31:55 +00:00
|
|
|
--color-divider: hsl(240, 9%, 22%);
|
|
|
|
|
--color-panel-contrast: hsl(245, 12%, 23%);
|
|
|
|
|
--color-panel: hsl(235, 6.8%, 13.5%);
|
|
|
|
|
--color-panel-overlay: hsl(210, 10%, 24%, 82%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-focus: hsl(217, 76%, 80%);
|
|
|
|
|
--color-selected: hsl(217, 89%, 61%);
|
|
|
|
|
--color-selected-contrast: hsl(0, 0%, 100%);
|
2024-01-14 16:27:16 +00:00
|
|
|
--color-selection-fill: hsl(209, 100%, 57%, 20%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-selection-stroke: hsl(214, 84%, 56%);
|
|
|
|
|
--color-text-0: hsl(0, 9%, 94%);
|
|
|
|
|
--color-text-1: hsl(0, 0%, 85%);
|
|
|
|
|
--color-text-3: hsl(210, 6%, 45%);
|
|
|
|
|
--color-text-shadow: hsl(210, 13%, 18%);
|
|
|
|
|
--color-primary: hsl(214, 84%, 56%);
|
2024-03-27 09:41:13 +00:00
|
|
|
--color-success: hsl(123, 38%, 57%);
|
|
|
|
|
--color-info: hsl(199, 92%, 56%);
|
|
|
|
|
--color-warning: hsl(36, 100%, 57%);
|
|
|
|
|
--color-error: hsl(4, 90%, 58%);
|
2024-01-13 18:04:19 +00:00
|
|
|
--color-warn: hsl(0, 81%, 66%);
|
|
|
|
|
--color-text: hsl(210, 17%, 98%);
|
|
|
|
|
--color-laser: hsl(0, 100%, 50%);
|
|
|
|
|
/* Shadows */
|
|
|
|
|
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
|
2023-04-25 11:01:25 +00:00
|
|
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
2024-01-14 16:27:16 +00:00
|
|
|
--shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
|
2023-04-25 11:01:25 +00:00
|
|
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
2024-01-14 16:27:16 +00:00
|
|
|
--shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
|
2023-04-25 11:01:25 +00:00
|
|
|
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-counter-scaled {
|
|
|
|
|
transform: scale(var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
transform-origin: top left;
|
2023-05-05 14:14:42 +00:00
|
|
|
width: calc(100% * var(--tl-zoom));
|
|
|
|
|
height: calc(100% * var(--tl-zoom));
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-container,
|
|
|
|
|
.tl-container * {
|
2023-04-25 11:01:25 +00:00
|
|
|
-webkit-touch-callout: none;
|
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
|
scrollbar-highlight-color: transparent;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
user-select: none;
|
2023-06-29 14:23:18 +00:00
|
|
|
box-sizing: border-box;
|
2023-04-25 11:01:25 +00:00
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-container a {
|
2023-04-25 11:01:25 +00:00
|
|
|
-webkit-touch-callout: initial;
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-19 10:52:21 +00:00
|
|
|
.tl-container:focus-within {
|
|
|
|
|
outline: 1px solid var(--color-low);
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
input,
|
|
|
|
|
*[contenteditable],
|
|
|
|
|
*[contenteditable] * {
|
|
|
|
|
-webkit-user-select: text;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
/* Canvas */
|
|
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-canvas {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
2024-02-12 15:03:25 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-text);
|
|
|
|
|
z-index: var(--layer-canvas);
|
2023-05-05 14:14:42 +00:00
|
|
|
cursor: var(--tl-cursor);
|
2023-04-25 11:01:25 +00:00
|
|
|
overflow: clip;
|
|
|
|
|
content-visibility: auto;
|
|
|
|
|
touch-action: none;
|
|
|
|
|
contain: strict;
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-05 18:03:22 +00:00
|
|
|
.tl-culled-shapes {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: var(--layer-culled-shapes);
|
|
|
|
|
position: absolute;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
contain: size layout;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-culled-shapes__canvas {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-06 13:55:40 +00:00
|
|
|
.tl-shapes {
|
|
|
|
|
position: relative;
|
2023-10-28 21:58:32 +00:00
|
|
|
z-index: var(--layer-shapes);
|
2023-09-06 13:55:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-overlays {
|
2024-02-18 23:01:00 +00:00
|
|
|
position: absolute;
|
2024-05-07 10:06:35 +00:00
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
contain: strict;
|
|
|
|
|
pointer-events: none;
|
2023-10-28 21:58:32 +00:00
|
|
|
z-index: var(--layer-overlays);
|
2023-09-06 13:55:40 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-16 14:35:22 +00:00
|
|
|
.tl-overlays__item {
|
2023-05-05 14:14:42 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
2023-05-16 14:35:22 +00:00
|
|
|
overflow: visible;
|
2023-05-05 14:14:42 +00:00
|
|
|
pointer-events: none;
|
2023-05-16 14:35:22 +00:00
|
|
|
transform-origin: top left;
|
2023-05-05 14:14:42 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-16 14:35:22 +00:00
|
|
|
.tl-svg-context {
|
2023-05-05 14:14:42 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
2024-04-10 12:02:50 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2023-05-05 14:14:42 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-07 10:06:35 +00:00
|
|
|
.tl-front {
|
|
|
|
|
z-index: 600;
|
|
|
|
|
position: absolute;
|
|
|
|
|
inset: 0px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: clip;
|
|
|
|
|
content-visibility: auto;
|
|
|
|
|
touch-action: none;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
2023-05-05 14:14:42 +00:00
|
|
|
/* ------------------- Background ------------------- */
|
|
|
|
|
|
2024-04-05 18:03:22 +00:00
|
|
|
.tl-background__wrapper {
|
|
|
|
|
z-index: var(--layer-background);
|
2024-04-10 12:03:09 +00:00
|
|
|
position: absolute;
|
|
|
|
|
inset: 0px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2024-04-05 18:03:22 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-background {
|
2023-10-09 06:19:41 +00:00
|
|
|
background-color: var(--color-background);
|
2024-02-18 23:01:00 +00:00
|
|
|
width: 100%;
|
2024-04-10 12:03:09 +00:00
|
|
|
height: 100%;
|
2023-05-05 14:14:42 +00:00
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
/* --------------------- Grid Layer --------------------- */
|
|
|
|
|
|
|
|
|
|
.tl-grid {
|
|
|
|
|
position: absolute;
|
2024-02-12 15:03:25 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
touch-action: none;
|
|
|
|
|
pointer-events: none;
|
2023-10-28 21:58:32 +00:00
|
|
|
z-index: var(--layer-grid);
|
2023-10-03 14:26:36 +00:00
|
|
|
contain: strict;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-grid-dot {
|
|
|
|
|
fill: var(--color-grid);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Layers --------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-html-layer {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
contain: layout style size;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------------- Brush --------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-brush {
|
|
|
|
|
stroke-width: calc(var(--tl-scale) * 1px);
|
2023-10-03 14:26:36 +00:00
|
|
|
contain: size layout;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-brush__default {
|
2023-04-25 11:01:25 +00:00
|
|
|
stroke: var(--color-brush-stroke);
|
|
|
|
|
fill: var(--color-brush-fill);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------- Scribble -------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-scribble {
|
2023-04-25 11:01:25 +00:00
|
|
|
stroke-linejoin: round;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
pointer-events: none;
|
2023-10-03 14:26:36 +00:00
|
|
|
contain: size layout;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------------- Shape --------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-shape {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
transform-origin: top left;
|
2023-10-03 14:26:36 +00:00
|
|
|
contain: size layout;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-shape__culled {
|
2024-04-05 13:23:02 +00:00
|
|
|
position: absolute;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
transform-origin: top left;
|
|
|
|
|
contain: size layout;
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-culled);
|
2024-04-05 13:23:02 +00:00
|
|
|
z-index: 0;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------- Shape Containers ---------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-svg-container {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
2024-02-12 15:03:25 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
stroke-linejoin: round;
|
|
|
|
|
transform-origin: top left;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-html-container {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
2024-02-12 15:03:25 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
stroke-linejoin: round;
|
|
|
|
|
/* content-visibility: auto; */
|
|
|
|
|
transform-origin: top left;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-16 14:35:22 +00:00
|
|
|
/* --------------- Overlay Stack --------------- */
|
|
|
|
|
|
|
|
|
|
/* back of the stack, behind user's stuff */
|
|
|
|
|
.tl-collaborator__scribble {
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-collaborator__brush {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 20;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-collaborator__shape-indicator {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 30;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-user-scribble {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 40;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-user-brush {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 50;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-user-indicator__selected {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 60;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-user-indicator__hovered {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 70;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-user-handles {
|
|
|
|
|
z-index: 80;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-user-snapline {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 90;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-selection__fg {
|
|
|
|
|
pointer-events: none;
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 100;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-user-indicator__hint {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 110;
|
2023-05-16 14:35:22 +00:00
|
|
|
stroke-width: calc(2.5px * var(--tl-scale));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* behind collaborator cursor */
|
|
|
|
|
.tl-collaborator__cursor-hint {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 120;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-collaborator__cursor {
|
2023-05-19 11:16:03 +00:00
|
|
|
z-index: 130;
|
2023-05-16 14:35:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-cursor {
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
/* -------------------- Indicator ------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-shape-indicator {
|
2023-04-25 11:01:25 +00:00
|
|
|
transform-origin: top left;
|
|
|
|
|
fill: none;
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1.5px * var(--tl-scale));
|
2024-04-13 13:30:30 +00:00
|
|
|
contain: size layout;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------ SelectionBox ------------------ */
|
|
|
|
|
|
2023-05-16 14:35:22 +00:00
|
|
|
.tl-selection__bg {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
transform-origin: top left;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-16 14:35:22 +00:00
|
|
|
.tl-selection__fg__outline {
|
2023-04-25 11:01:25 +00:00
|
|
|
fill: none;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
stroke: var(--color-selection-stroke);
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1.5px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-corner-handle {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
stroke: var(--color-selection-stroke);
|
|
|
|
|
fill: var(--color-background);
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1.5px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-handle {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
fill: var(--color-selection-stroke);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-corner-crop-handle {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke: var(--color-selection-stroke);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-corner-crop-edge-handle {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke: var(--color-selection-stroke);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-mobile-rotate__bg {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: all;
|
2023-05-23 14:12:11 +00:00
|
|
|
cursor: var(--tl-cursor-grab);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-mobile-rotate__fg {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
stroke: var(--color-selection-stroke);
|
|
|
|
|
fill: var(--color-background);
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1.5px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-transparent {
|
2023-04-25 11:01:25 +00:00
|
|
|
fill: transparent;
|
|
|
|
|
stroke: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------- Handles -------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-handle {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-handle__bg {
|
2023-04-25 11:01:25 +00:00
|
|
|
fill: transparent;
|
|
|
|
|
stroke: transparent;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-handle__fg {
|
2024-01-14 16:27:16 +00:00
|
|
|
fill: var(--color-selected-contrast);
|
2023-04-25 11:01:25 +00:00
|
|
|
stroke: var(--color-selection-stroke);
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1.5px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-22 05:19:16 +00:00
|
|
|
.tl-handle__create {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
2024-04-14 18:40:02 +00:00
|
|
|
|
|
|
|
|
.tl-handle__clone > .tl-handle__fg {
|
|
|
|
|
fill: var(--color-selection-stroke);
|
|
|
|
|
stroke: none;
|
2023-07-22 05:19:16 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-handle__bg:active {
|
2023-04-25 11:01:25 +00:00
|
|
|
fill: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (pointer: coarse) {
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-handle__bg:active {
|
2023-04-25 11:01:25 +00:00
|
|
|
fill: var(--color-selection-fill);
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-22 05:19:16 +00:00
|
|
|
.tl-handle__create {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------ Bounds Detail ----------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-image,
|
|
|
|
|
.tl-video {
|
2023-04-25 11:01:25 +00:00
|
|
|
object-fit: cover;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-01 18:16:27 +00:00
|
|
|
.tl-video-container,
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-image-container,
|
|
|
|
|
.tl-embed-container {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
pointer-events: all;
|
2023-08-25 16:22:52 +00:00
|
|
|
/* background-color: var(--color-background); */
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-image__tg {
|
|
|
|
|
--scale: calc(min(2, var(--tl-scale)));
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: calc(var(--scale) * 8px);
|
|
|
|
|
right: calc(var(--scale) * 8px);
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
transform-origin: top right;
|
|
|
|
|
background-color: var(--color-background);
|
|
|
|
|
padding: 2px 4px;
|
2023-10-28 21:58:32 +00:00
|
|
|
border-radius: var(--radius-1);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
/* --------------------- Nametag -------------------- */
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-collaborator-cursor {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-nametag {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 16px;
|
|
|
|
|
left: 13px;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
max-width: 120px;
|
2023-06-15 15:10:08 +00:00
|
|
|
padding: 3px 6px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
position: absolute;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
font-size: 12px;
|
2023-06-20 12:08:49 +00:00
|
|
|
font-family: var(--font-body);
|
2023-06-15 15:10:08 +00:00
|
|
|
border-radius: var(--radius-2);
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-selected-contrast);
|
2023-06-15 15:10:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-nametag-title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -2px;
|
|
|
|
|
left: 13px;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
padding: 0px 6px;
|
|
|
|
|
max-width: 120px;
|
2023-04-25 11:01:25 +00:00
|
|
|
white-space: nowrap;
|
|
|
|
|
position: absolute;
|
2023-05-05 14:14:42 +00:00
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 12px;
|
2023-06-20 12:08:49 +00:00
|
|
|
font-family: var(--font-body);
|
2023-06-15 15:10:08 +00:00
|
|
|
text-shadow: var(--tl-text-outline);
|
|
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-nametag-chat {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 16px;
|
|
|
|
|
left: 13px;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
position: absolute;
|
|
|
|
|
padding: 3px 6px;
|
|
|
|
|
font-size: 12px;
|
2023-06-20 12:08:49 +00:00
|
|
|
font-family: var(--font-body);
|
2023-06-15 15:10:08 +00:00
|
|
|
opacity: 1;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-cursor-chat {
|
|
|
|
|
position: absolute;
|
|
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
padding: 3px 6px;
|
|
|
|
|
font-size: 12px;
|
2023-06-20 12:08:49 +00:00
|
|
|
font-family: var(--font-body);
|
2023-06-15 15:10:08 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: var(--layer-cursor);
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
margin-left: 13px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
border: none;
|
|
|
|
|
user-select: text;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-20 12:08:49 +00:00
|
|
|
.tl-cursor-chat .tl-cursor-chat__bubble {
|
|
|
|
|
padding-right: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-15 15:10:08 +00:00
|
|
|
.tl-cursor-chat::selection {
|
|
|
|
|
background: var(--color-selected);
|
|
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
text-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-cursor-chat-fade {
|
|
|
|
|
/* Setting to zero causes it to immediately disappear */
|
|
|
|
|
/* Setting to near-zero causes it to fade out gradually */
|
|
|
|
|
opacity: 0.0001;
|
|
|
|
|
transition: opacity 5s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-cursor-chat::placeholder {
|
|
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
opacity: 0.7;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
/* Spinner */
|
|
|
|
|
/* -------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
@keyframes spinner {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------- Text Shape ------------------- */
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-shape-label {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: relative;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
min-width: 1px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
border: none;
|
2024-04-03 10:01:04 +00:00
|
|
|
width: fit-content;
|
|
|
|
|
height: fit-content;
|
2023-04-25 11:01:25 +00:00
|
|
|
font-variant: normal;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
overflow-wrap: break-word;
|
2023-05-05 14:14:42 +00:00
|
|
|
text-shadow: var(--tl-text-outline);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-font='draw'] {
|
|
|
|
|
font-family: var(--tl-font-draw);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-font='sans'] {
|
|
|
|
|
font-family: var(--tl-font-sans);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-font='serif'] {
|
|
|
|
|
font-family: var(--tl-font-serif);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-font='mono'] {
|
|
|
|
|
font-family: var(--tl-font-mono);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-align='start'],
|
|
|
|
|
.tl-text-wrapper[data-align='start-legacy'] {
|
|
|
|
|
text-align: left;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-align='middle'],
|
|
|
|
|
.tl-text-wrapper[data-align='middle-legacy'] {
|
|
|
|
|
text-align: center;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-align='end'],
|
|
|
|
|
.tl-text-wrapper[data-align='end-legacy'] {
|
|
|
|
|
text-align: right;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-text-wrapper[data-isediting='true'] .tl-text-content {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text {
|
2023-04-25 11:01:25 +00:00
|
|
|
/* remove overflow from textarea on windows */
|
|
|
|
|
margin: 0px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
border: 0px;
|
|
|
|
|
color: inherit;
|
|
|
|
|
caret-color: var(--color-text);
|
|
|
|
|
background: none;
|
|
|
|
|
border-image: none;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
line-height: inherit;
|
|
|
|
|
font-variant: inherit;
|
|
|
|
|
font-style: inherit;
|
|
|
|
|
text-align: inherit;
|
|
|
|
|
letter-spacing: inherit;
|
|
|
|
|
text-shadow: inherit;
|
|
|
|
|
outline: none;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
|
text-rendering: auto;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
text-indent: 0px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
appearance: auto;
|
|
|
|
|
column-count: initial !important;
|
|
|
|
|
writing-mode: horizontal-tb !important;
|
|
|
|
|
word-spacing: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-measure {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
2024-01-28 11:39:11 +00:00
|
|
|
z-index: -999999;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 0;
|
2023-10-03 14:26:13 +00:00
|
|
|
width: max-content;
|
2023-04-25 11:01:25 +00:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
line-break: normal;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
|
resize: none;
|
|
|
|
|
border: none;
|
|
|
|
|
user-select: none;
|
2023-10-03 14:26:36 +00:00
|
|
|
contain: style paint;
|
2023-04-25 11:01:25 +00:00
|
|
|
-webkit-user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-input,
|
|
|
|
|
.tl-text-content {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
2024-02-12 15:03:25 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
min-width: 1px;
|
|
|
|
|
min-height: 1px;
|
|
|
|
|
overflow: visible;
|
2023-10-02 11:14:37 +00:00
|
|
|
outline: none;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-04-03 10:01:04 +00:00
|
|
|
.tl-text-content__wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
min-height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-content {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-input {
|
2023-04-25 11:01:25 +00:00
|
|
|
resize: none;
|
|
|
|
|
user-select: all;
|
|
|
|
|
-webkit-user-select: text;
|
|
|
|
|
overflow: hidden;
|
2023-05-23 14:12:11 +00:00
|
|
|
cursor: var(--tl-cursor-text);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-04-14 18:40:02 +00:00
|
|
|
.tl-text-wrapper[data-isediting='false'] .tl-text-input,
|
|
|
|
|
.tl-arrow-label[data-isediting='false'] .tl-text-input {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
cursor: var(--tl-cursor-default);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-input::selection {
|
2023-04-25 11:01:25 +00:00
|
|
|
background: var(--color-selected);
|
|
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
text-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------- Snap Lines ------------------- */
|
|
|
|
|
|
2024-02-07 10:40:01 +00:00
|
|
|
.tl-snap-indicator {
|
2023-04-25 11:01:25 +00:00
|
|
|
stroke: var(--color-accent);
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
fill: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-snap-point {
|
2023-04-25 11:01:25 +00:00
|
|
|
stroke: var(--color-accent);
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
fill: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------- Groups ------------------ */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-group {
|
2023-04-25 11:01:25 +00:00
|
|
|
stroke: var(--color-text);
|
2023-05-05 14:14:42 +00:00
|
|
|
stroke-width: calc(1px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------- Bookmark Shape ------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__container {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
border: 1px solid var(--color-panel-contrast);
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__image_container {
|
2023-04-25 11:01:25 +00:00
|
|
|
flex: 1;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-top-left-radius: var(--radius-1);
|
|
|
|
|
border-top-right-radius: var(--radius-1);
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__image_container > .tl-hyperlink-button::after {
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__placeholder {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: var(--color-muted-2);
|
|
|
|
|
border-bottom: 1px solid var(--color-muted-2);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__image {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
object-position: center;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__copy_container {
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-muted);
|
|
|
|
|
padding: var(--space-4);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__heading,
|
|
|
|
|
.tl-bookmark__description,
|
|
|
|
|
.tl-bookmark__link {
|
2023-05-16 08:37:37 +00:00
|
|
|
margin: 0px;
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__heading {
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
padding-bottom: var(--space-2);
|
`ShapeUtil.getGeometry`, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.
It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs
This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.
## Geometry
All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:
```ts
class BoxyShapeUtil {
getGeometry(shape: BoxyShape) {
return new Rectangle2d({
width: shape.props.width,
height: shape.props.height,
isFilled: true,
margin: shape.props.strokeWidth
})
}
}
```
This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.
There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`
For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.
## Hit testing
Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.
## Selection
We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.
every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions
This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.
...as well as issues with labels and editing.
There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.
## Arrow binding
Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.
a thousand wise men could not improve on this
## Moving focus between editing shapes
Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.
In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.
tldraw, glorious tldraw
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes
- [ ] Unit Tests // todo
- [ ] End to end tests // todo
### Release Notes
- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
|
|
|
margin: 8px 0px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__description {
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 12px;
|
|
|
|
|
padding-bottom: var(--space-4);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-bookmark__link {
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 14px;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: block;
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
text-decoration: none;
|
2023-10-28 21:58:32 +00:00
|
|
|
color: var(--color-text-1);
|
2023-05-23 14:12:11 +00:00
|
|
|
cursor: var(--tl-cursor-pointer);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ---------------- Hyperlink Button ---------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-hyperlink-button {
|
2023-04-25 11:01:25 +00:00
|
|
|
background: none;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
height: 44px;
|
|
|
|
|
width: 44px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
z-index: 200;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
padding: 13px;
|
2023-05-23 14:12:11 +00:00
|
|
|
cursor: var(--tl-cursor-pointer);
|
2023-04-25 11:01:25 +00:00
|
|
|
border: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-hyperlink-button::after {
|
2023-04-25 11:01:25 +00:00
|
|
|
content: '';
|
|
|
|
|
z-index: -1;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 6px;
|
|
|
|
|
bottom: 6px;
|
|
|
|
|
display: block;
|
|
|
|
|
width: calc(100% - 12px);
|
|
|
|
|
height: calc(100% - 12px);
|
|
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
background-color: var(--color-background);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-hyperlink-button:focus-visible {
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-selected);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-hyperlink-button__icon {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 18px;
|
|
|
|
|
height: 18px;
|
|
|
|
|
background-color: currentColor;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-hyperlink-button__hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 11:01:25 +00:00
|
|
|
/* ---------------- Geo shape ---------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-label {
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
2023-05-19 11:19:11 +00:00
|
|
|
align-items: center;
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-text);
|
2023-05-05 14:14:42 +00:00
|
|
|
text-shadow: var(--tl-text-outline);
|
2023-04-25 11:01:25 +00:00
|
|
|
line-height: inherit;
|
2023-09-26 14:05:05 +00:00
|
|
|
position: absolute;
|
|
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
`ShapeUtil.getGeometry`, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.
It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs
This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.
## Geometry
All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:
```ts
class BoxyShapeUtil {
getGeometry(shape: BoxyShape) {
return new Rectangle2d({
width: shape.props.width,
height: shape.props.height,
isFilled: true,
margin: shape.props.strokeWidth
})
}
}
```
This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.
There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`
For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.
## Hit testing
Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.
## Selection
We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.
every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions
This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.
...as well as issues with labels and editing.
There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.
## Arrow binding
Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.
a thousand wise men could not improve on this
## Moving focus between editing shapes
Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.
In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.
tldraw, glorious tldraw
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes
- [ ] Unit Tests // todo
- [ ] End to end tests // todo
### Release Notes
- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
`ShapeUtil.getGeometry`, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.
It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs
This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.
## Geometry
All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:
```ts
class BoxyShapeUtil {
getGeometry(shape: BoxyShape) {
return new Rectangle2d({
width: shape.props.width,
height: shape.props.height,
isFilled: true,
margin: shape.props.strokeWidth
})
}
}
```
This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.
There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`
For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.
## Hit testing
Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.
## Selection
We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.
every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions
This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.
...as well as issues with labels and editing.
There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.
## Arrow binding
Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.
a thousand wise men could not improve on this
## Moving focus between editing shapes
Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.
In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.
tldraw, glorious tldraw
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes
- [ ] Unit Tests // todo
- [ ] End to end tests // todo
### Release Notes
- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
|
|
|
.tl-text-label[data-hastext='true'][data-isediting='false'] .tl-text-content {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-14 18:40:02 +00:00
|
|
|
.tl-text-wrapper .tl-text-content {
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
z-index: var(--layer-text-content);
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-14 12:41:30 +00:00
|
|
|
.tl-text-label__inner > .tl-text-content {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: relative;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
padding: 16px;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
width: fit-content;
|
|
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-label__inner > .tl-text-input {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
2024-02-12 15:03:25 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
padding: 16px;
|
2024-04-14 18:40:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-text-wrapper[data-isselected='true'] .tl-text-input {
|
|
|
|
|
z-index: var(--layer-text-editor);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* This part of the rule helps preserve the occlusion rules for the shapes so we
|
|
|
|
|
* don't click on shapes that are behind other shapes.
|
|
|
|
|
* One extra nuance is we don't use this behavior for:
|
|
|
|
|
* - arrows which have weird geometry and just gets in the way.
|
2024-04-16 15:19:30 +00:00
|
|
|
* - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield
|
2024-04-29 13:51:12 +00:00
|
|
|
* - shapes that are not filled
|
2024-04-14 18:40:02 +00:00
|
|
|
*/
|
2024-04-29 13:51:12 +00:00
|
|
|
.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true'])
|
2024-04-16 15:19:30 +00:00
|
|
|
.tl-shape:not(
|
|
|
|
|
[data-shape-type='arrow'],
|
|
|
|
|
[data-shape-type='draw'],
|
|
|
|
|
[data-shape-type='line'],
|
2024-04-29 13:51:12 +00:00
|
|
|
[data-shape-type='highlight'],
|
|
|
|
|
[data-shape-is-filled='false']
|
2024-04-16 15:19:30 +00:00
|
|
|
) {
|
2024-04-14 18:40:02 +00:00
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-label[data-textwrap='true'] > .tl-text-label__inner {
|
2023-04-25 11:01:25 +00:00
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-label[data-isediting='true'] {
|
2023-08-25 16:22:52 +00:00
|
|
|
background-color: transparent;
|
2023-04-25 11:01:25 +00:00
|
|
|
min-height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-text-label[data-isediting='true'] p {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-arrow-hint {
|
2023-04-25 11:01:25 +00:00
|
|
|
stroke: var(--color-text-1);
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke-linecap: round;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------- Arrow Shape ------------------ */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-arrow-label {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: -1px;
|
|
|
|
|
left: -1px;
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
2024-03-27 09:33:48 +00:00
|
|
|
text-align: center;
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-text);
|
2023-05-05 14:14:42 +00:00
|
|
|
text-shadow: var(--tl-text-outline);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-arrow-label[data-isediting='true'] p {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-arrow-label[data-isediting='true'] > .tl-arrow-label__inner {
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-background);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-arrow-label__inner {
|
2023-04-25 11:01:25 +00:00
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
box-sizing: content-box;
|
|
|
|
|
position: relative;
|
|
|
|
|
height: max-content;
|
|
|
|
|
width: max-content;
|
2024-04-14 18:40:02 +00:00
|
|
|
pointer-events: none;
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-27 09:33:48 +00:00
|
|
|
.tl-arrow-label .tl-arrow {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: relative;
|
|
|
|
|
height: max-content;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-arrow-label textarea {
|
2023-04-25 11:01:25 +00:00
|
|
|
padding: 4px;
|
|
|
|
|
/* Don't allow textarea to be zero width */
|
|
|
|
|
min-width: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------- NoteShape ------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-note__container {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2024-04-14 18:40:02 +00:00
|
|
|
pointer-events: all;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
z-index: var(--layer-text-container);
|
|
|
|
|
border-radius: 1px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-04-14 18:40:02 +00:00
|
|
|
.tl-note__container > .tl-text-label {
|
2023-04-25 11:01:25 +00:00
|
|
|
text-shadow: none;
|
2024-04-14 18:40:02 +00:00
|
|
|
color: currentColor;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2024-04-14 18:40:02 +00:00
|
|
|
/* --------------------- Loading -------------------- */
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-loading {
|
2023-06-15 11:57:19 +00:00
|
|
|
background-color: var(--color-background);
|
|
|
|
|
color: var(--color-text-1);
|
2023-04-25 11:01:25 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--space-2);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
animation: fade-in 0.2s ease-in-out forwards;
|
|
|
|
|
animation-delay: 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fade-in {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------- FrameShape ------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-frame__body {
|
|
|
|
|
stroke-width: calc(1px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-11-29 12:01:57 +00:00
|
|
|
.tl-frame__creating {
|
|
|
|
|
stroke: var(--color-selected);
|
|
|
|
|
fill: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-frame-heading {
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform-origin: 0% 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
min-width: 32px;
|
|
|
|
|
height: auto;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding-bottom: 4px;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-frame-heading-hit-area {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: all;
|
|
|
|
|
/* scale from bottom left corner so we can pin it to the top left corner of the frame */
|
|
|
|
|
transform-origin: 0% 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
background-color: var(--color-background);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-frame-label {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: all;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
padding: var(--space-3) var(--space-3);
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
white-space: pre;
|
2023-10-04 15:46:59 +00:00
|
|
|
border: 1px solid transparent;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-frame-label__editing {
|
2023-04-25 11:01:25 +00:00
|
|
|
color: transparent;
|
|
|
|
|
white-space: pre;
|
|
|
|
|
width: auto;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
border-radius: var(--radius-1);
|
2023-10-04 15:46:59 +00:00
|
|
|
border-color: var(--color-selected);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-frame-name-input {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
border: none;
|
|
|
|
|
background: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
padding: var(--space-3) var(--space-3);
|
|
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: inherit;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
user-select: all;
|
|
|
|
|
-webkit-user-select: text;
|
|
|
|
|
white-space: pre;
|
2023-05-23 14:12:11 +00:00
|
|
|
cursor: var(--tl-cursor-text);
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* If mobile use 16px as font size */
|
|
|
|
|
/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦♂️ */
|
|
|
|
|
/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
|
|
|
|
|
@media (max-width: 600px) {
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-frame-heading {
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ------------------ iFrames Detail ----------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-embed {
|
2023-04-25 11:01:25 +00:00
|
|
|
border: none;
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------- Shape Error Boundary -------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-shape-error-boundary {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: var(--color-muted-1);
|
2023-05-05 14:14:42 +00:00
|
|
|
border-width: calc(1px * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
border-color: var(--color-muted-1);
|
|
|
|
|
border-style: solid;
|
2023-05-05 14:14:42 +00:00
|
|
|
border-radius: calc(var(--radius-1) * var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
`ShapeUtil.getGeometry`, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.
It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs
This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.
## Geometry
All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:
```ts
class BoxyShapeUtil {
getGeometry(shape: BoxyShape) {
return new Rectangle2d({
width: shape.props.width,
height: shape.props.height,
isFilled: true,
margin: shape.props.strokeWidth
})
}
}
```
This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.
There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`
For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.
## Hit testing
Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.
## Selection
We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.
every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions
This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.
...as well as issues with labels and editing.
There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.
## Arrow binding
Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.
a thousand wise men could not improve on this
## Moving focus between editing shapes
Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.
In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.
tldraw, glorious tldraw
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes
- [ ] Unit Tests // todo
- [ ] End to end tests // todo
### Release Notes
- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
|
|
|
flex-direction: column;
|
2023-04-25 11:01:25 +00:00
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
`ShapeUtil.getGeometry`, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.
It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs
This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.
## Geometry
All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:
```ts
class BoxyShapeUtil {
getGeometry(shape: BoxyShape) {
return new Rectangle2d({
width: shape.props.width,
height: shape.props.height,
isFilled: true,
margin: shape.props.strokeWidth
})
}
}
```
This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.
There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`
For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.
## Hit testing
Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.
## Selection
We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.
every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions
This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.
...as well as issues with labels and editing.
There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.
## Arrow binding
Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.
a thousand wise men could not improve on this
## Moving focus between editing shapes
Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.
In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.
tldraw, glorious tldraw
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes
- [ ] Unit Tests // todo
- [ ] End to end tests // todo
### Release Notes
- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
|
|
|
text-align: left;
|
2023-04-25 11:01:25 +00:00
|
|
|
position: relative;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: var(--space-2);
|
|
|
|
|
}
|
|
|
|
|
|
`ShapeUtil.getGeometry`, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.
It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs
This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.
## Geometry
All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:
```ts
class BoxyShapeUtil {
getGeometry(shape: BoxyShape) {
return new Rectangle2d({
width: shape.props.width,
height: shape.props.height,
isFilled: true,
margin: shape.props.strokeWidth
})
}
}
```
This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.
There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`
For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.
## Hit testing
Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.
## Selection
We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.
every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions
This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.
...as well as issues with labels and editing.
There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.
## Arrow binding
Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.
a thousand wise men could not improve on this
## Moving focus between editing shapes
Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.
In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.
tldraw, glorious tldraw
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes
- [ ] Unit Tests // todo
- [ ] End to end tests // todo
### Release Notes
- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
|
|
|
.tl-shape-error-boundary::before {
|
2023-05-05 14:14:42 +00:00
|
|
|
transform: scale(var(--tl-scale));
|
2023-04-25 11:01:25 +00:00
|
|
|
content: 'Error';
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
color: var(--color-text-0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ----------------- Error Boundary ----------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: var(--space-4);
|
|
|
|
|
background-color: var(--color-background);
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
position: absolute;
|
2023-05-05 14:14:42 +00:00
|
|
|
z-index: 600;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__overlay {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-05-11 22:14:58 +00:00
|
|
|
z-index: 500;
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-overlay);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content * {
|
2023-04-25 11:01:25 +00:00
|
|
|
user-select: all;
|
|
|
|
|
-webkit-user-select: text;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__canvas {
|
2023-04-25 11:01:25 +00:00
|
|
|
pointer-events: none;
|
|
|
|
|
position: absolute;
|
2023-05-16 08:37:37 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-04-25 11:01:25 +00:00
|
|
|
z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
/* some browsers seem to have some weird interactions between stacking contexts
|
|
|
|
|
and pointer-events. this ::after pseudo element covers the canvas and prevents
|
|
|
|
|
it from receiving any pointer events or affecting the cursor. */
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__canvas::after {
|
2023-04-25 11:01:25 +00:00
|
|
|
content: ' ';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
2023-05-16 08:37:37 +00:00
|
|
|
inset: 0px;
|
2024-02-18 23:01:00 +00:00
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2023-05-05 14:14:42 +00:00
|
|
|
z-index: 600;
|
2023-08-25 16:22:52 +00:00
|
|
|
pointer-events: all;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: fit-content;
|
|
|
|
|
height: fit-content;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
width: 400px;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
background-color: var(--color-panel);
|
2023-10-28 21:58:32 +00:00
|
|
|
padding: 16px;
|
|
|
|
|
border-radius: 16px;
|
2023-04-25 11:01:25 +00:00
|
|
|
box-shadow: var(--shadow-2);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: auto;
|
2023-05-11 22:14:58 +00:00
|
|
|
z-index: 600;
|
2023-10-28 21:58:32 +00:00
|
|
|
gap: 12px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
2023-10-28 21:58:32 +00:00
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content__expanded {
|
2023-04-25 11:01:25 +00:00
|
|
|
width: 600px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content h2 {
|
2023-04-25 11:01:25 +00:00
|
|
|
font-size: 16px;
|
|
|
|
|
margin: 0px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-15 11:35:42 +00:00
|
|
|
.tl-error-boundary__content h4 {
|
|
|
|
|
border: 1px solid var(--color-low-border);
|
|
|
|
|
margin: -6px 0 0 0;
|
|
|
|
|
padding: var(--space-5);
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content p {
|
2023-04-25 11:01:25 +00:00
|
|
|
line-height: 1.5;
|
2023-05-16 08:37:37 +00:00
|
|
|
margin: 0px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content pre {
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-muted-2);
|
2024-02-15 11:35:42 +00:00
|
|
|
margin-top: 0;
|
2023-04-25 11:01:25 +00:00
|
|
|
padding: var(--space-5);
|
|
|
|
|
border-radius: var(--radius-2);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
max-height: 320px;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content button {
|
2023-04-25 11:01:25 +00:00
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
padding: var(--space-4);
|
|
|
|
|
border-radius: var(--radius-3);
|
2023-05-23 14:12:11 +00:00
|
|
|
cursor: var(--tl-cursor-pointer);
|
2023-04-25 11:01:25 +00:00
|
|
|
color: inherit;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content a {
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-text-1);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content__error {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: relative;
|
2024-02-15 11:35:42 +00:00
|
|
|
margin: -6px 0 0 0;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
2024-02-15 11:35:42 +00:00
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content__error button {
|
2023-04-25 11:01:25 +00:00
|
|
|
position: absolute;
|
|
|
|
|
top: var(--space-2);
|
|
|
|
|
right: var(--space-2);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: var(--space-2) var(--space-3);
|
|
|
|
|
background-color: var(--color-panel);
|
|
|
|
|
border-radius: var(--radius-1);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content__actions {
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: var(--space-4);
|
2023-10-28 21:58:32 +00:00
|
|
|
margin: 0px;
|
|
|
|
|
margin-left: -4px;
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content__actions__group {
|
2023-04-25 11:01:25 +00:00
|
|
|
display: flex;
|
|
|
|
|
gap: var(--space-4);
|
|
|
|
|
}
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content .tl-error-boundary__reset {
|
2023-04-25 11:01:25 +00:00
|
|
|
color: var(--color-warn);
|
|
|
|
|
}
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-error-boundary__content .tl-error-boundary__refresh {
|
2023-04-25 11:01:25 +00:00
|
|
|
background-color: var(--color-primary);
|
|
|
|
|
color: var(--color-selected-contrast);
|
|
|
|
|
}
|
|
|
|
|
/* --------------------- Coarse --------------------- */
|
|
|
|
|
|
2023-05-05 14:14:42 +00:00
|
|
|
.tl-hidden {
|
2023-04-25 11:01:25 +00:00
|
|
|
opacity: 0;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.debug__ui-logger {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 62px;
|
|
|
|
|
left: 16px;
|
|
|
|
|
color: #555;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
2024-04-09 14:34:24 +00:00
|
|
|
|
|
|
|
|
/* ---------------- Hit test blocker ---------------- */
|
|
|
|
|
|
|
|
|
|
.tl-hit-test-blocker {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: var(--layer-blocker);
|
|
|
|
|
inset: 0px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-hit-test-blocker__hidden {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2024-04-14 18:40:02 +00:00
|
|
|
|
|
|
|
|
@media (hover: hover) {
|
|
|
|
|
.tl-handle__create:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-handle__bg:hover {
|
|
|
|
|
cursor: var(--tl-cursor-grab);
|
|
|
|
|
fill: var(--color-selection-fill);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-bookmark__link:hover {
|
|
|
|
|
color: var(--color-selected);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-hyperlink-button:hover {
|
|
|
|
|
color: var(--color-selected);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tl-error-boundary__content button:hover {
|
|
|
|
|
background-color: var(--color-low);
|
|
|
|
|
}
|
|
|
|
|
.tl-error-boundary__content a:hover {
|
|
|
|
|
color: var(--color-text-1);
|
|
|
|
|
}
|
|
|
|
|
.tl-error-boundary__content .tl-error-boundary__refresh:hover {
|
|
|
|
|
background-color: var(--color-primary);
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* These three rules help preserve clicking into specific points in text areas *while*
|
|
|
|
|
* already in edit mode when jumping from shape to shape. */
|
|
|
|
|
.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
|
|
|
|
|
z-index: var(--layer-text-editor);
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
}
|