jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more ink

This commit is contained in:
“chrisshank” 2024-09-19 20:06:53 -07:00
parent 04ee89ba3b
commit 01e7a95ceb
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demo/ink.html
View File

@ -22,17 +22,22 @@
</style> </style>
</head> </head>
<body> <body>
<!-- <spatial-geometry x="100" y="100" width="50" height="50">Shape with some text</spatial-geometry> -->
<spatial-ink
size="16"
points="[[100.2109375,380.546875,0.5],[100.2109375,380.5859375,0.5],[101.84375,376.14453125,0.5],[111.94921875,356.921875,0.5],[131.48828125,320.9609375,0.5],[159.8359375,267.92578125,0.5],[188.47265625,213.6015625,0.5],[212.35546875,167.1953125,0.5],[232.53515625,129.01171875,0.5],[244.046875,108.0390625,0.5],[250.87109375,96.34375,0.5],[254.7109375,90.04296875,0.5],[255.92578125,88.19140625,0.5],[256.41015625,87.796875,0.5],[256.6875,87.81640625,0.5],[256.8203125,88.10546875,0.5],[256.953125,88.73046875,0.5],[257.18359375,89.95703125,0.5],[257.71484375,92.921875,0.5],[258.69921875,99.1484375,0.5],[260.2109375,112.65625,0.5],[263.10546875,137.46875,0.5],[268.328125,184.9140625,0.5],[275.609375,251.04296875,0.5],[283.671875,323.125,0.5],[289.69140625,378.04296875,0.5],[293.0859375,409.7734375,0.5],[295.54296875,433.94921875,0.5],[297.07421875,446.9453125,0.5],[297.93359375,451.36328125,0.5],[298.31640625,452.4140625,0.5],[298.44921875,452.62890625,0.5],[298.5625,452.4765625,0.5],[298.58203125,452.0625,0.5],[298.58203125,451.61328125,0.5],[298.58203125,451.2890625,0.5],[298.58203125,451.0234375,0.5],[298.58203125,450.6328125,0.5],[298.58203125,450,0.5],[298.26953125,448.9140625,0.5],[297.55859375,446.9921875,0.5],[295.71484375,442.24609375,0.5],[290.54296875,430.1328125,0.5],[275.953125,400.171875,0.5],[249.8125,349.82421875,0.5],[218.24609375,292.22265625,0.5],[184.75,235.58984375,0.5],[152.42578125,182.49609375,0.5],[127.26953125,142.05859375,0.5],[106.046875,109.31640625,0.5],[86.51953125,78.953125,0.5],[72.625,57.46875,0.5],[64.6484375,44.73828125,0.5],[60.76171875,38.24609375,0.5],[58.890625,35.2890625,0.5],[58.41796875,34.43359375,0.5],[58.46875,34.3515625,0.5],[58.7109375,34.59375,0.5],[59.60546875,35.08203125,0.5],[63.8125,37.1328125,0.5],[76.5234375,43.61328125,0.5],[108.08203125,58.6875,0.5],[161.484375,83.85546875,0.5],[221.125,112.5234375,0.5],[276.8828125,139.140625,0.5],[318.1796875,158.30859375,0.5],[339.9765625,168.19921875,0.5],[352.5703125,173.86328125,0.5],[359,176.5703125,0.5],[361.00390625,177.43359375,0.5],[361.53515625,177.81640625,0.5],[361.6328125,178.00390625,0.5],[361.6328125,178.23046875,0.5],[361.515625,178.5078125,0.5],[360.953125,178.921875,0.5],[359.38671875,179.81640625,0.5],[356.04296875,182.3515625,0.5],[349.20703125,188.57421875,0.5],[335.9375,200.86328125,0.5],[314.625,220.796875,0.5],[283.6171875,248.703125,0.5],[244.09375,280.8984375,0.5],[202.40625,310.75390625,0.5],[167.30078125,332.05859375,0.5],[139.609375,345.65625,0.5],[120.84765625,353.5078125,0.5],[111.0625,356.7421875,0.5],[105.20703125,358.45703125,0.5],[102.74609375,358.9765625,0.5]]"
></spatial-ink>
<script type="module"> <script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts'; import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { SpatialInk } from '../src/canvas/spatial-ink.ts'; import { SpatialInk } from '../src/canvas/spatial-ink.ts';
SpatialGeometry.register(); SpatialGeometry.register();
SpatialInk.register(); SpatialInk.register();
function trace() {
const ink = document.createElement('spatial-ink');
document.body.append(ink);
ink.trace();
}
document.addEventListener('pointerdown', trace);
trace();
</script> </script>
</body> </body>
</html> </html>

10
src/canvas/spatial-ink.ts
View File

@ -4,6 +4,8 @@ export type Point = [x: number, y: number, pressure: number];
export type Stroke = number[][]; export type Stroke = number[][];
// TODO: look into any-pointer media queries to tell if the user has a mouse or touch screen
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer
const styles = new CSSStyleSheet(); const styles = new CSSStyleSheet();
styles.replaceSync(` styles.replaceSync(`
svg { svg {
@ -12,7 +14,8 @@ styles.replaceSync(`
touch-action: none; touch-action: none;
} }
:host(:state(tracing)) svg { :host(:state(tracing)) {
cursor: var(--tracing-cursor, crosshair);
position: fixed; position: fixed;
inset: 0 0 0 0; inset: 0 0 0 0;
z-index: calc(infinity); z-index: calc(infinity);
@ -34,7 +37,7 @@ export class SpatialInk extends HTMLElement {
#d = ''; #d = '';
#size = Number(this.getAttribute('size') || 32); #size = Number(this.getAttribute('size') || 16);
get size() { get size() {
return this.#size; return this.#size;
@ -114,6 +117,7 @@ export class SpatialInk extends HTMLElement {
this.#update(); this.#update();
} }
// TODO: cancel trace?
trace() { trace() {
this.points = []; this.points = [];
this.#internals.states.add('tracing'); this.#internals.states.add('tracing');
@ -160,7 +164,7 @@ export class SpatialInk extends HTMLElement {
// TODO: figure out how to expose these as attributes // TODO: figure out how to expose these as attributes
easing: (t) => t, easing: (t) => t,
start: { start: {
taper: 0, taper: 100,
easing: (t) => t, easing: (t) => t,
cap: true, cap: true,
}, },