export function pannable(node: Element) {
	let x;
	let y;
	function handleMousedown(event) {
		x = event.clientX;
		y = event.clientY;
		node.dispatchEvent(new CustomEvent('panstart', {
			detail: { x, y }
		}));
		window.addEventListener('mousemove', handleMousemove);
		window.addEventListener('mouseup', handleMouseup);
	}
	function handleMousemove(event) {
		const dx = event.clientX - x;
		const dy = event.clientY - y;
		x = event.clientX;
		y = event.clientY;
		node.dispatchEvent(new CustomEvent('panmove', {
			detail: { x, y, dx, dy }
		}));
	}
	function handleMouseup(event) {
		x = event.clientX;
		y = event.clientY;
		node.dispatchEvent(new CustomEvent('panend', {
			detail: { x, y }
		}));
		window.removeEventListener('mousemove', handleMousemove);
		window.removeEventListener('mouseup', handleMouseup);
	}
	node.addEventListener('mousedown', handleMousedown);
	return {
		destroy() {
			node.removeEventListener('mousedown', handleMousedown);
		}
	};
}

import App from './App.svelte';
const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});
export default app;

<script lang="ts">
  import {hex} from "cs-rcg";
  import Star from "./components/Star.svelte";
  type Stencil = "star" | "cross" | "triangle" | "circle" | "solid";
  export let stack: Stencil[] = [
    "solid", "circle", "star", "cross"
  ];
  let s = 300;
  $: h = s / 2;
  $: q = s / 4;
  $: f = q / 3;
  // Offset
  let o = 25;
  $: oa = h-o;
  $: ob = h+o;
  $: omax = s-(f);
  $: omin = f;
</script>
<div 
  class="scalable"
>
  <div id="wrapper">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <mask id="star">
          <rect width="300" height="300" fill="#fff"/>
          <polygon points="{h},{f*2} {q},{s-(f*2)} {s-(f*2)},{h-f} {f*2},{h-f} {s-(f*3)},{s-(f*2)}" />
        </mask>
        <mask id="circle">
          <rect width="300" height="300" fill="#fff"/>
          <circle cx="{h}" cy="{h}" r="{q}" />
        </mask>
        <mask id="cross">
          <rect width="300" height="300" fill="#fff"/>
          <Star bind:s={s} />
        </mask>
        <mask id="triangle">
          <rect width="300" height="300" fill="#fff"/>
          <polygon points="150,25 25,250 275,250" />
        </mask>
      </defs>
      {#each stack as stencil, i (i)}
        {#if stencil == "solid"}
          <rect width="300" height="300" fill="#{hex()}" />
        {:else}
          <rect width="300" height="300" mask="url(#{stencil})" fill="#{hex()}"/>
        {/if}
      {/each}
    </svg>
  </div>
</div>
<style>
  .scalable {
    padding: 20px;
    border: 1px solid black;
    width: max-content;
  }
  #wrapper {
    width: 300px;
    height: 300px;
  }
  #wrapper > svg {
    width: 100%;
    height: 100%;
  }
</style>

<script lang="ts">
	import Stack from "./Stack.svelte";
</script>
<main>
	<Stack />
</main>
<style>
	
</style>

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "validate": "svelte-check"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@rollup/plugin-replace": "^2.3.4",
    "@rollup/plugin-typescript": "^6.0.0",
    "@tsconfig/svelte": "^1.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^1.0.0",
    "svelte-preprocess": "^4.0.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.3"
  },
  "dependencies": {
    "cs-rcg": "^1.1.0",
    "nanoid": "^3.1.18",
    "reflect-metadata": "^0.1.13",
    "sirv-cli": "^1.0.0"
  }
}