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

rename spatial to fc/folk

This commit is contained in:
Orion Reed 2024-10-30 02:18:27 -04:00
parent d2bb5f40fa
commit 862174a8bb
19 changed files with 249 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
demo/arrows.html
View File

@ -15,12 +15,12 @@
margin: 0;
}
spatial-geometry {
fc-geometry {
border: 1px solid black;
border-radius: 3px;
}
spatial-connection {
fc-connection {
display: block;
position: absolute;
inset: 0 0 0 0;
@ -32,18 +32,18 @@
</style>
</head>
<body>
<spatial-geometry id="box1" x="100" y="100" width="50" height="50"></spatial-geometry>
<spatial-geometry id="box2" x="200" y="300">Hello World</spatial-geometry>
<spatial-connection source="#box1" target="#box2"></spatial-connection>
<fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry id="box2" x="200" y="300">Hello World</fc-geometry>
<fc-connection source="#box1" target="#box2"></fc-connection>
<spatial-connection source="#box1" target="400,100"></spatial-connection>
<fc-connection source="#box1" target="400,100"></fc-connection>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { SpatialConnection } from '../src/arrows/spatial-connection.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkConnection } from '../src/arrows/fc-connection.ts';
SpatialGeometry.register();
SpatialConnection.register();
FolkGeometry.register();
FolkConnection.register();
</script>
</body>
</html>

96
demo/canvasify.html
View File

@ -35,7 +35,7 @@
font-style: italic;
}
spatial-geometry {
fc-geometry {
z-index: 2;
}
</style>
@ -45,64 +45,77 @@
<h1>My article</h1>
<p>
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</span
>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
<span
>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</span
>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</span
>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet,>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet,>consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</main>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
SpatialGeometry.register();
FolkGeometry.register();
function copyStyles(from, to) {
const styles = getComputedStyle(from);
@ -115,7 +128,8 @@
}
document.addEventListener('click', ({ target }) => {
if (target.closest('spatial-geometry') || target.matches('body, html')) return;
if (target.closest('fc-geometry') || target.matches('body, html'))
return;
const rect = target.getBoundingClientRect();
@ -133,7 +147,7 @@
copyStyles(el, copiedElements[i]);
});
const geometry = document.createElement('spatial-geometry');
const geometry = document.createElement('fc-geometry');
geometry.x = rect.x;
geometry.y = rect.y;
geometry.height = rect.height;

6
demo/chains-of-thought/index.html
View File

@ -36,13 +36,13 @@
}
}
spatial-connection {
fc-connection {
display: block;
position: absolute;
inset: 0 0 0 0;
}
spatial-geometry {
fc-geometry {
border-radius: 7px;
&::part(rotate),
@ -53,7 +53,7 @@
display: none;
}
spatial-thought {
fc-thought {
background-color: white;
border-radius: 6px;
border: solid 1px light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

81
demo/chains-of-thought/main.ts
View File

@ -1,24 +1,26 @@
import { SpatialGeometry } from '../../src/canvas/spatial-geometry.ts';
import { SpatialConnection } from '../../src/arrows/spatial-connection.ts';
import { FolkGeometry } from '../../src/canvas/fc-geometry.ts';
import { FolkConnection } from '../../src/arrows/fc-connection.ts';
import { FileSaver } from '../../src/persistence/file.ts';
declare global {
interface HTMLElementTagNameMap {
'spatial-thought': SpatialThought;
'fc-thought': FolkThought;
}
}
class SpatialThought extends HTMLElement {
static tagName = 'spatial-thought';
class FolkThought extends HTMLElement {
static tagName = 'fc-thought';
static register() {
customElements.define(this.tagName, this);
}
#deleteButton = this.querySelector('button[name="delete"]') as HTMLButtonElement;
#deleteButton = this.querySelector(
'button[name="delete"]'
) as HTMLButtonElement;
#text = this.querySelector('[name="text"]') as HTMLElement;
#geometry = this.parentElement as SpatialGeometry;
#geometry = this.parentElement as FolkGeometry;
constructor() {
super();
@ -36,17 +38,17 @@ class SpatialThought extends HTMLElement {
document
.querySelectorAll(
`spatial-connection[source="spatial-geometry[id='${this.#geometry.id}']"],
spatial-connection[target="spatial-geometry[id='${this.#geometry.id}']"]`
`fc-connection[source="fc-geometry[id='${this.#geometry.id}']"],
fc-connection[target="fc-geometry[id='${this.#geometry.id}']"]`
)
.forEach((el) => el.remove());
}
}
}
SpatialGeometry.register();
SpatialThought.register();
SpatialConnection.register();
FolkGeometry.register();
FolkThought.register();
FolkConnection.register();
interface Thought {
id: string;
@ -68,41 +70,48 @@ interface ChainOfThought {
const html = String.raw;
function parseHTML(html: string): Element {
return document.createRange().createContextualFragment(html).firstElementChild!;
return document.createRange().createContextualFragment(html)
.firstElementChild!;
}
function renderThought({ id, x, y, text }: Thought) {
return html`<spatial-geometry id="${id}" x="${x}" y="${y}">
<spatial-thought>
return html`<fc-geometry id="${id}" x="${x}" y="${y}">
<fc-thought>
<div contenteditable="true" name="text">${text}</div>
<button name="delete">␡</button>
</spatial-thought>
</spatial-geometry>`;
</fc-thought>
</fc-geometry>`;
}
function renderConnection({ sourceId, targetId }: Connection) {
return html`<spatial-connection
source="spatial-geometry[id='${sourceId}']"
target="spatial-geometry[id='${targetId}']"
></spatial-connection>`;
return html`<fc-connection
source="fc-geometry[id='${sourceId}']"
target="fc-geometry[id='${targetId}']"
></fc-connection>`;
}
function renderChainOfThought({ thoughts, connections }: ChainOfThought) {
return html`${thoughts.map(renderThought).join('')}${connections.map(renderConnection).join('')}`;
return html`${thoughts.map(renderThought).join('')}${connections
.map(renderConnection)
.join('')}`;
}
function parseChainOfThought(): ChainOfThought {
return {
thoughts: Array.from(document.querySelectorAll('spatial-geometry')).map((el) => ({
id: el.id,
text: (el.firstElementChild as SpatialThought).text,
x: el.x,
y: el.y,
})),
connections: Array.from(document.querySelectorAll('spatial-connection')).map((el) => ({
sourceId: (el.sourceElement as SpatialGeometry).id,
targetId: (el.targetElement as SpatialGeometry).id,
})),
thoughts: Array.from(document.querySelectorAll('fc-geometry')).map(
(el) => ({
id: el.id,
text: (el.firstElementChild as FolkThought).text,
x: el.x,
y: el.y,
})
),
connections: Array.from(document.querySelectorAll('fc-connection')).map(
(el) => ({
sourceId: (el.sourceElement as FolkGeometry).id,
targetId: (el.targetElement as FolkGeometry).id,
})
),
};
}
@ -110,14 +119,18 @@ const openButton = document.querySelector('button[name="open"]')!;
const saveButton = document.querySelector('button[name="save"]')!;
const saveAsButton = document.querySelector('button[name="save-as"]')!;
const main = document.querySelector('main')!;
const fileSaver = new FileSaver('chains-of-thought', 'json', 'application/json');
const fileSaver = new FileSaver(
'chains-of-thought',
'json',
'application/json'
);
main.addEventListener('dblclick', (e) => {
if (e.target === main) {
main.appendChild(
parseHTML(
renderThought({
id: String(document.querySelectorAll('spatial-thought').length + 1),
id: String(document.querySelectorAll('fc-thought').length + 1),
text: '',
x: e.clientX,
y: e.clientY,

24
demo/collision.html
View File

@ -19,24 +19,27 @@
margin: 0;
}
spatial-geometry {
fc-geometry {
border: 2px solid black;
}
</style>
</head>
<body>
<spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
<spatial-geometry x="200" y="200" width="50" height="50"></spatial-geometry>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry x="200" y="200" width="50" height="50"></fc-geometry>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
SpatialGeometry.register();
const geometryElements = document.querySelectorAll('spatial-geometry');
FolkGeometry.register();
const geometryElements = document.querySelectorAll('fc-geometry');
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
);
}
@ -46,7 +49,12 @@
el !== e.target &&
collisionDetection(
// TODO: refactor this hack once resizing and the vertices API are figured out
DOMRectReadOnly.fromRect({ x: el.x, y: el.y, height: el.height, width: el.width }),
DOMRectReadOnly.fromRect({
x: el.x,
y: el.y,
height: el.height,
width: el.width,
}),
DOMRectReadOnly.fromRect({
x: e.target.x,
y: e.target.y,

16
demo/event-propagator.html
View File

@ -15,7 +15,7 @@
margin: 0;
}
spatial-geometry {
fc-geometry {
border: 1px solid black;
border-radius: 3px;
}
@ -28,8 +28,10 @@
</style>
</head>
<body>
<spatial-geometry id="box1" x="100" y="100" width="50" height="50"></spatial-geometry>
<spatial-geometry id="box2" x="200" y="300" width="50" height="50">Hello World</spatial-geometry>
<fc-geometry id="box1" x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry id="box2" x="200" y="300" width="50" height="50"
>Hello World</fc-geometry
>
<event-propagator
source="#box1"
target="#box2"
@ -37,8 +39,8 @@
expression="$target.textContent += '!'"
></event-propagator>
<spatial-geometry id="box3" x="150" y="200" width="50" height="50"></spatial-geometry>
<spatial-geometry id="box4" x="300" y="350" width="50" height="50"></spatial-geometry>
<fc-geometry id="box3" x="150" y="200" width="50" height="50"></fc-geometry>
<fc-geometry id="box4" x="300" y="350" width="50" height="50"></fc-geometry>
<event-propagator
source="#box3"
target="#box4"
@ -47,10 +49,10 @@
></event-propagator>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { EventPropagator } from '../src/arrows/event-propagator.ts';
SpatialGeometry.register();
FolkGeometry.register();
EventPropagator.register();
</script>
</body>

4
demo/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spatial Canvas Primitives</title>
<title>Folk Canvas Primitives</title>
<style>
html {
height: 100%;
@ -16,7 +16,7 @@
</style>
</head>
<body>
<h1>Spatial Canvas Primitives</h1>
<h1>Folk Canvas Primitives</h1>
<ul>
<li><a href="/shapes">Shapes</a></li>

12
demo/ink.html
View File

@ -21,11 +21,11 @@
<button on:click="DRAW">Draw</button>
</nav>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { SpatialInk } from '../src/canvas/spatial-ink.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkInk } from '../src/canvas/fc-ink.ts';
SpatialGeometry.register();
SpatialInk.register();
FolkGeometry.register();
FolkInk.register();
const drawButton = document.querySelector('button');
@ -36,7 +36,7 @@
e.preventDefault();
e.stopPropagation();
const ink = document.createElement('spatial-ink');
const ink = document.createElement('fc-ink');
document.body.appendChild(ink);
@ -45,7 +45,7 @@
ink.points = ink.points.map(([x, y, p]) => [x - rect.x, y - rect.y, p]);
const geometry = document.createElement('spatial-geometry');
const geometry = document.createElement('fc-geometry');
geometry.x = rect.x;
geometry.y = rect.y;
geometry.height = rect.height;

50
demo/maps.html
View File

@ -37,27 +37,35 @@
</style>
</head>
<body>
<spatial-geometry x="25" y="100" width="400" height="200">
<fc-geometry x="25" y="100" width="400" height="200">
<leaflet-map coordinates="52.09, 5.12" zoom="13"></leaflet-map>
</spatial-geometry>
</fc-geometry>
<spatial-geometry x="50" y="550" width="400" height="250">
<leaflet-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></leaflet-map>
</spatial-geometry>
<fc-geometry x="50" y="550" width="400" height="250">
<leaflet-map
coordinates="51.50404120260676, -0.14007568359375003"
zoom="13"
></leaflet-map>
</fc-geometry>
<spatial-geometry x="500" y="400" width="500" height="300">
<geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki>
</spatial-geometry>
<fc-geometry x="500" y="400" width="500" height="300">
<geo-wiki
coordinates="51.50404120260676, -0.14007568359375003"
></geo-wiki>
</fc-geometry>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { LeafletMap } from '../src/maps';
SpatialGeometry.register();
FolkGeometry.register();
LeafletMap.register();
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
);
}
@ -74,7 +82,10 @@
}
const proximityMap = new Map(
Array.from(document.querySelectorAll('spatial-geometry')).map((el) => [el, new Set()])
Array.from(document.querySelectorAll('fc-geometry')).map((el) => [
el,
new Set(),
])
);
function handleProximity(e) {
@ -83,7 +94,12 @@
const alreadyIntersection = set.has(e.target);
// TODO: refactor this hack once resizing and the vertices API are figured out
const isNowIntersecting = proximityDetection(
DOMRectReadOnly.fromRect({ x: el.x, y: el.y, height: el.height, width: el.width }),
DOMRectReadOnly.fromRect({
x: el.x,
y: el.y,
height: el.height,
width: el.width,
}),
DOMRectReadOnly.fromRect({
x: e.target.x,
y: e.target.y,
@ -136,7 +152,9 @@
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'coordinates') {
this.#coordinates = newValue.split(',').map((str) => Number(str)) || [0, 0];
this.#coordinates = newValue
.split(',')
.map((str) => Number(str)) || [0, 0];
this.searchWiki(this.#coordinates);
}
}
@ -152,7 +170,9 @@
origin: '*',
});
// https://www.mediawiki.org/wiki/API:Geosearch
this.#results = await fetch(`https://en.wikipedia.org/w/api.php?${params}`)
this.#results = await fetch(
`https://en.wikipedia.org/w/api.php?${params}`
)
.then((response) => response.json())
.then((data) => data?.query?.geosearch ?? []);

30
demo/music.html
View File

@ -15,7 +15,7 @@
margin: 0;
}
spatial-geometry:has(record-player) {
fc-geometry:has(record-player) {
&::part(resize-nw),
&::part(resize-ne),
&::part(resize-se),
@ -24,7 +24,7 @@
}
}
spatial-geometry > video {
fc-geometry > video {
height: 100%;
}
</style>
@ -35,45 +35,47 @@
ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
-->
<spatial-geometry x="100" y="75" width="330" height="198">
<fc-geometry x="100" y="75" width="330" height="198">
<record-player>
<audio src="/Feather.mp3"></audio>
</record-player>
</spatial-geometry>
</fc-geometry>
<spatial-geometry x="25" y="300" width="166" height="200">
<fc-geometry x="25" y="300" width="166" height="200">
<video loop>
<source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" />
</video>
</spatial-geometry>
</fc-geometry>
<spatial-geometry x="155" y="315" width="166" height="200">
<fc-geometry x="155" y="315" width="166" height="200">
<video loop>
<source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" />
</video>
</spatial-geometry>
</fc-geometry>
<spatial-geometry x="280" y="305" width="166" height="200">
<fc-geometry x="280" y="305" width="166" height="200">
<video loop>
<source src="/dancing-flower.mov" type="video/quicktime" />
<source src="/dancing-flower.webm" type="video/webm" />
</video>
</spatial-geometry>
</fc-geometry>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { RecordPlayer } from '../src/music/record-player.ts';
SpatialGeometry.register();
FolkGeometry.register();
RecordPlayer.register();
let proximityDistance = 200;
const proximitySet = new Set();
const recordPlayerGeometry = document.querySelector('spatial-geometry:has(record-player)');
const recordPlayerGeometry = document.querySelector(
'fc-geometry:has(record-player)'
);
const recordPlayer = recordPlayerGeometry.firstElementChild;
const flowers = document.querySelectorAll('spatial-geometry:has(video)');
const flowers = document.querySelectorAll('fc-geometry:has(video)');
// set playback rate when video is ready
function setPlayback(e) {
e.target.playbackRate = (91 / 60) * e.target.duration;

8
demo/perf.html
View File

@ -15,23 +15,23 @@
margin: 0;
}
spatial-geometry {
fc-geometry {
border: 2px solid black;
}
</style>
</head>
<body>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
SpatialGeometry.register();
FolkGeometry.register();
const geometries = [];
const now = performance.now();
for (let i = 0; i < 100; i++) {
for (let j = 0; j < 100; j++) {
const geo = document.createElement('spatial-geometry');
const geo = document.createElement('fc-geometry');
geo.x = 50 * i;
geo.y = 50 * j;
geo.width = geo.height = 45;

14
demo/shapes.html
View File

@ -15,27 +15,27 @@
margin: 0;
}
spatial-geometry {
fc-geometry {
background: rgb(187, 178, 178);
box-shadow: rgba(0, 0, 0, 0.2) 1.95px 1.95px 2.6px;
transition: scale 100ms ease-out, box-shadow 100ms ease-out;
}
spatial-geometry:state(move) {
fc-geometry:state(move) {
scale: 1.05;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
</style>
</head>
<body>
<spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
<spatial-geometry x="100" y="200" width="50" height="50"></spatial-geometry>
<spatial-geometry x="100" y="300" width="50" height="50"></spatial-geometry>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
SpatialGeometry.register();
FolkGeometry.register();
</script>
</body>
</html>

17
demo/spreadsheet.html
View File

@ -22,21 +22,26 @@
</style>
</head>
<body>
<spatial-geometry x="50" y="50" height="300" width="500">
<fc-geometry x="50" y="50" height="300" width="500">
<s-table></s-table>
</spatial-geometry>
</fc-geometry>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
import { SpreadsheetTable, SpreadsheetHeader, SpreadsheetCell } from '../src/spreadsheet/spreadsheet.ts';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import {
SpreadsheetTable,
SpreadsheetHeader,
SpreadsheetCell,
} from '../src/spreadsheet/spreadsheet.ts';
SpatialGeometry.register();
FolkGeometry.register();
SpreadsheetTable.register();
SpreadsheetHeader.register();
SpreadsheetCell.register();
document.querySelector(`s-cell[column="A"][row="1"]`).expression = '1';
document.querySelector(`s-cell[column="A"][row="2"]`).expression = '$A1 * 2';
document.querySelector(`s-cell[column="A"][row="2"]`).expression =
'$A1 * 2';
</script>
</body>
</html>

4
src/arrows/event-propagator.ts
View File

@ -1,6 +1,6 @@
import { SpatialConnection } from './spatial-connection';
import { FolkConnection } from './fc-connection';
export class EventPropagator extends SpatialConnection {
export class EventPropagator extends FolkConnection {
static tagName = 'event-propagator';
#triggers = (this.getAttribute('triggers') || '').split(',');

6
src/arrows/spatial-connection.ts → src/arrows/fc-connection.ts
View File

@ -26,12 +26,12 @@ export type Arrow = [
declare global {
interface HTMLElementTagNameMap {
'spatial-connection': SpatialConnection;
'fc-connection': FolkConnection;
}
}
export class SpatialConnection extends AbstractArrow {
static tagName = 'spatial-connection';
export class FolkConnection extends AbstractArrow {
static tagName = 'fc-connection';
#options: StrokeOptions = {
size: 7,

7
src/canvas/fc-canvas.ts Normal file
View File

@ -0,0 +1,7 @@
export class FCSpace extends HTMLElement {
static tagName = 'fc-space';
static register() {
customElements.define(this.tagName, this);
}
}

6
src/canvas/spatial-geometry.ts → src/canvas/fc-geometry.ts
View File

@ -180,13 +180,13 @@ styles.replaceSync(`
declare global {
interface HTMLElementTagNameMap {
'spatial-geometry': SpatialGeometry;
'fc-geometry': FolkGeometry;
}
}
// TODO: add z coordinate?
export class SpatialGeometry extends HTMLElement {
static tagName = 'spatial-geometry';
export class FolkGeometry extends HTMLElement {
static tagName = 'fc-geometry';
static register() {
customElements.define(this.tagName, this);

19
src/canvas/spatial-ink.ts → src/canvas/fc-ink.ts
View File

@ -25,12 +25,12 @@ styles.replaceSync(`
declare global {
interface HTMLElementTagNameMap {
'spatial-ink': SpatialInk;
'fc-ink': FolkInk;
}
}
export class SpatialInk extends HTMLElement {
static tagName = 'spatial-ink';
export class FolkInk extends HTMLElement {
static tagName = 'fc-ink';
static register() {
customElements.define(this.tagName, this);
@ -81,7 +81,8 @@ export class SpatialInk extends HTMLElement {
this.#update();
}
#simulatePressure = this.getAttribute('streamline') === 'false' ? false : true;
#simulatePressure =
this.getAttribute('streamline') === 'false' ? false : true;
get simulatePressure() {
return this.#simulatePressure;
@ -104,7 +105,10 @@ export class SpatialInk extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true });
const shadowRoot = this.attachShadow({
mode: 'open',
delegatesFocus: true,
});
shadowRoot.adoptedStyleSheets.push(styles);
this.#svg.appendChild(this.#path);
shadowRoot.appendChild(this.#svg);
@ -189,7 +193,10 @@ export class SpatialInk extends HTMLElement {
cap: true,
},
};
this.#path.setAttribute('d', this.#getSvgPathFromStroke(getStroke(this.#points, options)));
this.#path.setAttribute(
'd',
this.#getSvgPathFromStroke(getStroke(this.#points, options))
);
}
#getSvgPathFromStroke(stroke: Stroke): string {

7
src/canvas/spatial-canvas.ts
View File

@ -1,7 +0,0 @@
export class SpatialCanvas extends HTMLElement {
static tagName = 'spatial-canvas';
static register() {
customElements.define(this.tagName, this);
}
}