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

new rope demo

This commit is contained in:
“chrisshank” 2024-12-10 13:00:43 -08:00
parent bf8d0a181b
commit 80d58b63ed
2 changed files with 91 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
demo/[tests] rope.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wiggly</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
folk-shape {
background-color: black;
border-radius: 10%;
}
folk-rope {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
button {
margin: 1rem;
background-color: black;
font-size: 2rem;
border-radius: 5px;
}
</style>
</head>
<body>
<folk-shape id="box1" x="100" y="100" width="30" height="30"></folk-shape>
<folk-shape id="box2" x="300" y="105" width="30" height="30"></folk-shape>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<folk-rope source="#box1" target="#box2"></folk-rope>
<script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-rope.ts';
</script>
</body>
</html>

1
src/folk-base-set.ts
View File

@ -61,7 +61,6 @@ export class FolkBaseSet extends FolkElement {
}
this.sourceElements = sourceElements;
console.log(this.sourceElements);
}
#sourcesCallback = (entry: ClientRectObserverEntry) => {