konvajs / svelte-konva Goto Github PK

cd my-app
npm install
npm run dev -- --open

	import { Stage, Layer, Star } from "svelte-konva";

	let width = window.innerWidth;
	let height = window.innerHeight;
	let list = [];
	for (let n = 0; n < 30; n++) {
		list.push({
			id: n.toString(),
			x: Math.random() * width,
			y: Math.random() * height,
			rotation: Math.random() * 180,
			scale: Math.random(),
		});
	}
	let dragItemId = null;

	let handleDragStart = (e) => {
		// save drag element:
		dragItemId = e.detail.target.id();
		// move current element to the top:
		const item = list.find((i) => i.id === dragItemId);
		item.handle.moveToTop();
	};
	let handleDragEnd = (e) => {
		const item = list.find((i) => i.id === dragItemId);
		if (!item) {
			return;
		}
		item.x = e.detail.target.x();
		item.y = e.detail.target.y();
		dragItemId = null;
	};
</script>

<Stage config={{ width, height }}>
	<Layer>
		{#each list as item (item.id)}
			<Star
				config={{
					x: item.x,
					y: item.y,
					rotation: item.rotation,
					id: item.id,
					numPoints: 5,
					innerRadius: 30,
					outerRadius: 50,
					fill: "#89b717",
					opacity: 0.8,
					draggable: true,
					scaleX:
						dragItemId === item.id ? item.scale * 1.2 : item.scale,
					scaleY:
						dragItemId === item.id ? item.scale * 1.2 : item.scale,
					shadowColor: "black",
					shadowBlur: 10,
					shadowOffsetX: dragItemId === item.id ? 15 : 5,
					shadowOffsetY: dragItemId === item.id ? 15 : 5,
					shadowOpacity: 0.6,
				}}
				bind:handle={item.handle}
				on:dragstart={handleDragStart}
				on:dragend={handleDragEnd}
			/>
		{/each}
	</Layer>
</Stage>

Require stack:
- /Users/een/Repos/lib-svelte-canvas/node_modules/konva/lib/index-node.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
    at Function.Module._load (node:internal/modules/cjs/loader:873:27)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at Object.<anonymous> (/Users/een/Repos/lib-svelte-canvas/node_modules/konva/lib/index-node.js:4:16)
    at Module._compile (node:internal/modules/cjs/loader:1198:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/een/Repos/lib-svelte-canvas/node_modules/konva/lib/index-node.js'
  ]
}

Uncaught (in promise) TypeError: handle is undefined
    update Circle.svelte:30
    update scheduler.js:115
    flush scheduler.js:79
    promise callback*schedule_update scheduler.js:20
    make_dirty Component.js:81
    ctx Component.js:129
    instance ble-trilateration.svelte:1153
    handleMessage mqtt-client.ts:56
    connect mqtt-client.ts:69
    emit events.js:153
    handlePublish publish.ts:172
    handle index.ts:29
    work client.ts:725
    _write client.ts:749
    writeOrBuffer writable.js:334
    _write writable.js:283
    write writable.js:286
    ondata _stream_readable.js:629
    emit events.js:153
    addChunk _stream_readable.js:279
    readableAddChunk _stream_readable.js:262
    push _stream_readable.js:228
    _forward index.js:172
    onreadable index.js:136
    emit events.js:153
    emitReadable_ readable.js:509
    run browser.js:153
    drainQueue browser.js:123
    setTimeout handler*runTimeout browser.js:41
    nextTick browser.js:143
    emitReadable readable.js:502
    addChunk readable.js:284
    readableAddChunk readable.js:255
    push readable.js:201
    onMessage ws.ts:231