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

more hull

This commit is contained in:
“chrisshank” 2024-12-09 13:04:46 -08:00
parent 57b11c8bc4
commit 1692307688
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/visualizing-set-relations.html
View File

@ -18,6 +18,10 @@
folk-shape { folk-shape {
background: rgb(187, 178, 178); background: rgb(187, 178, 178);
&:hover {
z-index: 2;
}
} }
folk-hull { folk-hull {
@ -38,14 +42,13 @@
<folk-shape x="50" y="100" width="50" height="50"></folk-shape> <folk-shape x="50" y="100" width="50" height="50"></folk-shape>
<folk-shape x="200" y="200" width="50" height="50"></folk-shape> <folk-shape x="200" y="200" width="50" height="50"></folk-shape>
<folk-shape x="100" y="300" width="50" height="50"></folk-shape> <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
<folk-hull sources="h1, body > folk-shape"></folk-hull> <folk-hull sources="h1, body > folk-shape"></folk-hull>
<folk-hull sources="h1"> <!-- <folk-hull sources="h1">
<folk-shape x="350" y="100" width="50" height="50"></folk-shape> <folk-shape x="350" y="100" width="50" height="50"></folk-shape>
<folk-shape x="500" y="200" width="50" height="50"></folk-shape> <folk-shape x="500" y="200" width="50" height="50"></folk-shape>
<folk-shape x="400" y="300" width="50" height="50"></folk-shape> <folk-shape x="400" y="300" width="50" height="50"></folk-shape>
</folk-hull> </folk-hull> -->
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';

7
src/folk-hull.ts
View File

@ -11,14 +11,17 @@ declare global {
const styles = css` const styles = css`
:host { :host {
z-index: -1; pointer-events: none;
} }
#hull { #hull {
background-color: var(--folk-hull-bg, #b4d8f644); background-color: var(--folk-hull-bg, #b4d8f644);
height: 100%; height: 100%;
width: 100%; width: 100%;
pointer-events: none; }
::slotted(*) {
pointer-events: auto;
} }
`; `;