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

qrcode demo

This commit is contained in:
“chrisshank” 2024-12-01 18:38:50 -08:00
parent 1b14970313
commit 123baf29c3
4 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
demo/qr-code.html
View File

@ -18,7 +18,6 @@
textarea { textarea {
resize: none; resize: none;
field-sizing: content; field-sizing: content;
min-width: 10ch;
} }
event-propagator { event-propagator {
@ -27,19 +26,34 @@
inset: 0 0 0 0; inset: 0 0 0 0;
pointer-events: none; pointer-events: none;
} }
body:not([rope-mode]) event-propagator {
display: none;
}
body > label {
display: block;
padding: 0.5rem;
}
</style> </style>
</head> </head>
<body> <body rope-mode>
<fc-geometry x="25" y="100"> <label>Rope Mode: <input type="checkbox" checked /></label>
<fc-geometry x="275" y="25">
<textarea>https://folk-canvas.github.io/folk-canvas/</textarea> <textarea>https://folk-canvas.github.io/folk-canvas/</textarea>
</fc-geometry> </fc-geometry>
<fc-geometry x="600" y="50"> <fc-geometry x="300" y="75">
<label>Radius: <input type="range" min="0" max="0.5" step="0.05" value="0" /></label> <label>Radius: <input type="range" min="0" max="0.5" step="0.05" value="0" /></label>
</fc-geometry> </fc-geometry>
<fc-geometry x="400" y="100"> <fc-geometry x="325" y="175">
<sl-qr-code></sl-qr-code> <label>Color: <input type="color" /></label>
</fc-geometry>
<fc-geometry x="50" y="50">
<sl-qr-code size="200"></sl-qr-code>
</fc-geometry> </fc-geometry>
<event-propagator <event-propagator
@ -50,12 +64,19 @@
></event-propagator> ></event-propagator>
<event-propagator <event-propagator
source="input" source="input[type='range']"
target="sl-qr-code" target="sl-qr-code"
triggers="input" triggers="input"
expression="radius: from.value" expression="radius: from.value"
></event-propagator> ></event-propagator>
<event-propagator
source="input[type='color']"
target="sl-qr-code"
triggers="input"
expression="fill: from.value"
></event-propagator>
<script type="module"> <script type="module">
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js'; import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
@ -63,6 +84,12 @@
FolkGeometry.define(); FolkGeometry.define();
EventPropagator.define(); EventPropagator.define();
const ropeMode = document.querySelector('input[type="checkbox"]');
ropeMode.addEventListener('input', () => {
document.body.toggleAttribute('rope-mode');
});
</script> </script>
</body> </body>
</html> </html>

2
demo/shapes.html
View File

@ -23,7 +23,7 @@
<body> <body>
<fc-geometry x="100" y="100" width="50" height="50"></fc-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="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry> <fc-geometry x="100" y="300" width="50" height="50" rotate="45"></fc-geometry>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';

2
demo/vite.config.ts
View File

@ -16,7 +16,7 @@ const linkGenerator = (): Plugin => {
if (!ctx.filename.endsWith('index.html')) return; if (!ctx.filename.endsWith('index.html')) return;
const links = files const links = files
.filter((file) => !file.includes('index') || file.startsWith('_')) .filter((file) => !file.includes('index') && !file.startsWith('_'))
.sort() .sort()
.map((file) => { .map((file) => {
const title = file.replace('.html', '').replaceAll('-', ' '); const title = file.replace('.html', '').replaceAll('-', ' ');

1
src/distance-field.ts
View File

@ -66,7 +66,6 @@ export class DistanceField extends HTMLElement {
// Handle updates from geometries // Handle updates from geometries
private handleGeometryUpdate = () => { private handleGeometryUpdate = () => {
console.log('handleGeometryUpdate');
// Re-render seed points and rerun JFA // Re-render seed points and rerun JFA
this.initSeedPointRendering(); this.initSeedPointRendering();
this.runJFA(); this.runJFA();