--- /dev/null
+import { sineInOut } from 'svelte/easing';
+
+export const blink = function blink(node, params) {
+ const originalWidth = parseFloat(getComputedStyle(node).width);
+ const originalHeight = parseFloat(getComputedStyle(node).height);
+
+ return {
+ delay: params.delay || 0,
+ duration: params.duration || 400,
+ easing: params.easing || sineInOut,
+ css: (t) => {
+ const halfWidth = originalWidth / 2;
+ const halfHeight = originalHeight / 2;
+ const width = Math.round(t <= 0.2 ? (originalWidth * t) / 0.2 : originalWidth);
+ const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0);
+ const height = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalHeight : 0);
+ const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth);
+
+ console.log(width, height);
+
+ return `width: ${width}px; height: ${height}px;`;
+ }
+ };
+};
<script>
import { browser } from '$app/env';
+ import { blink } from '$lib/animations/blink';
const dotSize = 24;
$: x = 0;
$: y = 0;
+ $: shouldShowPalette = false;
if (browser) {
document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
return sign + value;
}
+ const showPalette = function showPalette(event) {
+ event.preventDefault();
+ dragging = null;
+ document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
+ document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
+ shouldShowPalette = true;
+ }
+
+ const hidePalette = function hidePalette() {
+ event.preventDefault();
+ shouldShowPalette = false;
+ }
</script>
-<div class="canvas" on:mousedown={startDragging} on:mouseup={stopDragging} on:mousemove={moveCanvas}>
+<div
+ class="canvas"
+ on:contextmenu={showPalette}
+ on:mousedown={startDragging}
+ on:mouseup={stopDragging}
+ on:mousemove={moveCanvas}>
</div>
<div class="hud">
({ formatCoordinate(x) }, { formatCoordinate(y) })
</div>
+{#if shouldShowPalette }
+ <div class="palette-container" on:click={hidePalette}>
+ </div>
+ <div class="palette" transition:blink>
+ <p>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ palette palette palette palette palette palette <br/>
+ </p>
+ </div>
+{/if}
+
<style>
.canvas {
user-select: none;
font-smooth: never;
-webkit-font-smoothing : none;
}
+
+ .palette {
+ position: fixed;
+ top: var(--palette-y);
+ left: var(--palette-x);
+ border: 1px solid black;
+ background-color: #fff;
+ overflow: hidden;
+ }
+
+ .palette-container {
+ width: 100vw;
+ height: 100vh;
+ background-color: #f0f;
+ position: fixed;
+ top: 0;
+ left: 0;
+ }
+
</style>