ponder.ooo
馃悕馃悕馃悕
1<script lang="ts">
2 import DragHandle from "../general/drag_handle.svelte";
3
4 let x1: number = 50;
5 let y1: number = 70;
6 let x2: number = 100;
7 let y2: number = 140;
8
9 let svgElement: SVGSVGElement;
10
11 function onDrag1(x: string | number | null, y: string | number | null) {
12 if (x === null) return;
13 if (y === null) return;
14 if (typeof x === "string") x = parseInt(x);
15 if (typeof y === "string") y = parseInt(y);
16
17 x1 = x;
18 y1 = y;
19
20 controlOffset = 0.5 * Math.abs(x2 - x1);
21 if (controlOffset < 50) controlOffset = 50;
22 }
23
24 function onDrag2(x: string | number | null, y: string | number | null) {
25 if (x === null) return;
26 if (y === null) return;
27 if (typeof x === "string") x = parseInt(x);
28 if (typeof y === "string") y = parseInt(y);
29
30 x2 = x;
31 y2 = y;
32
33 controlOffset = 0.5 * Math.abs(x2 - x1);
34 if (controlOffset < 50) controlOffset = 50;
35 }
36
37 function getOffset1() {
38 return { x: x1, y: y1 };
39 }
40
41 function getOffset2() {
42 return { x: x2, y: y2 };
43 }
44
45 let controlOffset = 0.5 * Math.abs(x2 - x1);
46 if (controlOffset < 50) controlOffset = 50;
47</script>
48
49<div class=svg-backdrop>
50 <svg bind:this={svgElement} xmlns="http://www.w3.org/2000/svg" >
51 <path d="M {x1} {y1} C {x1 + controlOffset} {y1}, {x2 - controlOffset} {y2}, {x2} {y2}" stroke="red" stroke-width="4" fill="none"/>
52 </svg>
53 <div style="width: auto; height: auto; position: absolute; top: {y1 - 5}px; left: {x1 - 5}px;">
54 <DragHandle onDrag={onDrag1} getOffset={getOffset1}>
55 <div style="width: 10px; height: 10px; user-select: none; background-color: green; border-radius: 50%;" />
56 </DragHandle>
57 </div>
58 <div style="width: auto; height: auto; position: absolute; top: {y2 - 5}px; left: {x2 - 5}px;">
59 <DragHandle onDrag={onDrag2} getOffset={getOffset2}>
60 <div style="width: 10px; height: 10px; user-select: none; background-color: blue; border-radius: 50%;" />
61 </DragHandle>
62 </div>
63</div>
64
65<style>
66 .svg-backdrop {
67 --a: var(--workspace-background);
68 --b: var(--workspace-grid);
69 background-color: var(--a);
70 background-image: repeating-linear-gradient(45deg, var(--b) 25%, transparent 25%, transparent 75%, var(--b) 75%, var(--b)), repeating-linear-gradient(45deg, var(--b) 25%, var(--a) 25%, var(--a) 75%, var(--b) 75%, var(--b));
71 background-position: 0 0, 10px 10px;
72 background-size: 20px 20px;
73 width: 100%;
74 height: 100%;
75 }
76
77 svg {
78 width: 100%;
79 height: 100%;
80 }
81</style>