...
 
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox={viewBox}
width={width}
on:mousemove="onMouseMove(event)"
>
<defs>
<CirclePath
cx={center}
cy={center}
r={r}
size={size}
pathId={pathId}
/>
<filter id="glow" filterUnits="userSpaceOnUse">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"/>
<feGaussianBlur
result="blurOut"
in="offOut"
stdDeviation={glowForce}
/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
<Runes
runes={runes}
pathId={pathId}
on:pointClicked="onPointClicked(event)"
/>
<Vertices
points={points}
on:pointClicked="onPointClicked(event)"
/>
<CenterPiece
clickable={completed && !placed}
hidden={!completed}
scale={scale}
center={center}
on:click="onCenterPieceClicked()"
>{centerPieceText}</CenterPiece>
<g class="constLine" class:error>
{#each addedLines as line}
<line x1={line[0][0]} y1={line[0][1]} x2={line[1][0]} y2={line[1][1]} />
{/each}
</g>
{#if tempLine}
<line x1={tempLine[0][0]} y1={tempLine[0][1]} x2={tempLine[1][0]} y2={tempLine[1][1]} class="tempLine"/>
{/if}
</svg>
<script>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox={viewBox}
width={width}
on:mousemove="onMouseMove(event)"
ref:svg
>
<defs>
<CirclePath
cx={center}
cy={center}
r={r}
size={size}
pathId={pathId}
/>
<filter id="glow" filterUnits="userSpaceOnUse">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"/>
<feGaussianBlur
result="blurOut"
in="offOut"
stdDeviation={glowForce}
/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
<Runes
runes={runes}
pathId={pathId}
on:pointClicked="onPointClicked(event)"
on:snapTo="onSnapTo(event)"
/>
<Vertices
points={points}
on:pointClicked="onPointClicked(event)"
on:snapTo="onSnapTo(event)"
/>
<CenterPiece
clickable={completed && !placed}
hidden={!completed}
scale={scale}
center={center}
on:click="onCenterPieceClicked()"
>{centerPieceText}</CenterPiece>
<g class="constLine" class:error>
{#each addedLines as line}
<line x1={line[0][0]} y1={line[0][1]} x2={line[1][0]} y2={line[1][1]} />
{/each}
</g>
{#if tempLine}
<line x1={tempLine[0][0]} y1={tempLine[0][1]} x2={tempLine[1][0]} y2={tempLine[1][1]} class="tempLine"/>
{/if}
</svg>
<script>
import {push} from 'svelte-extras';
import {GraphVerifier} from './GraphVerifier.js';
import CenterPiece from './CenterPiece.svelte';
......@@ -94,6 +97,7 @@ export default {
addedLines: [],
currentIndex: null,
tempLine: null,
snapTo: null,
error: false,
};
......@@ -210,8 +214,8 @@ export default {
},
onMouseMove(event) {
const {tempLine, scale, drawable} = this.get();
if (!drawable) {
const {tempLine, scale, drawable, snapTo} = this.get();
if (!drawable || snapTo !== null) {
return;
}
......@@ -225,6 +229,18 @@ export default {
}
},
onSnapTo(event) {
this.set({snapTo: event});
if (event !== null) {
const {tempLine} = this.get();
if (tempLine) {
tempLine[1] = this.getCoordsByIndex(event);
this.set({tempLine});
}
}
},
onCenterPieceClicked() {
const {completed, placed} = this.get();
if (completed && !placed) {
......@@ -259,29 +275,29 @@ export default {
},
},
};
</script>
<style>
.tempLine,
.constLine {
stroke: currentColor;
pointer-events: none;
stroke-linecap: round;
transition: stroke 300ms linear;
}
.tempLine {
stroke-width: 2px;
stroke-opacity: 0.6;
}
.constLine {
stroke-width: 4px;
filter: url(#glow);
}
.error.constLine {
stroke: #af7268;
transition: stroke 300ms linear;
}
</script>
<style>
.tempLine,
.constLine {
stroke: currentColor;
pointer-events: none;
stroke-linecap: round;
transition: stroke 300ms linear;
}
.tempLine {
stroke-width: 2px;
stroke-opacity: 0.6;
}
.constLine {
stroke-width: 4px;
filter: url(#glow);
}
.error.constLine {
stroke: #af7268;
transition: stroke 300ms linear;
}
</style>
\ No newline at end of file
<text class="runes">
{#each runesData as datum, index}
<textPath
xlink:href={xlink}
startOffset={datum.offset}
data-index={index}
on:click="fire('pointClicked', index)"
>{datum.rune}</textPath>
{/each}
</text>
<script>
<text class="runes">
{#each runesData as datum, index}
<textPath
xlink:href={xlink}
startOffset={datum.offset}
data-index={index}
on:click="fire('pointClicked', index)"
on:mouseenter="fire('snapTo', index)"
on:mouseleave="fire('snapTo', null)"
>{datum.rune}</textPath>
{/each}
</text>
<script>
export default {
namespace: 'svg',
......@@ -34,11 +36,11 @@ export default {
},
},
};
</script>
<style>
textPath {
cursor: pointer;
fill: currentColor;
}
</script>
<style>
textPath {
cursor: pointer;
fill: currentColor;
}
</style>
\ No newline at end of file
<circle
class="point"
r="5"
cx={cx}
cy={cy}
data-index={index}
on:click="fire('click', index)"
/>
<script>
<circle
class="point"
r="5"
cx={cx}
cy={cy}
data-index={index}
on:click="fire('click', index)"
on:mouseenter="fire('snapTo', index)"
on:mouseleave="fire('snapTo', null)"
/>
<script>
export default {
namespace: 'svg',
......@@ -17,14 +19,14 @@ export default {
'index',
],
};
</script>
<style>
.point {
cursor: pointer;
stroke: white;
stroke-width: 20px;
stroke-opacity: 0;
fill: currentColor;
}
</script>
<style>
.point {
cursor: pointer;
stroke: white;
stroke-width: 20px;
stroke-opacity: 0;
fill: currentColor;
}
</style>
\ No newline at end of file
{#each points as point, index}
<Vertex
cx={point[0]}
cy={point[1]}
index={index}
on:click="fire('pointClicked', index)"
/>
{/each}
<script>
{#each points as point, index}
<Vertex
cx={point[0]}
cy={point[1]}
index={index}
on:click="fire('pointClicked', index)"
on:snapTo="fire('snapTo', event)"
/>
{/each}
<script>
import Vertex from './Vertex.svelte';
export default {
......
This diff is collapsed.