jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix broken rope

This commit is contained in:
“chrisshank” 2024-11-30 15:34:39 -08:00
parent 8e10fac2d4
commit c34790d3af
1 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/arrows/fc-rope.ts
View File

@ -30,6 +30,7 @@ export class FolkRope extends AbstractArrow {
#svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); #svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
#path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); #path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
#path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
#shadow = this.attachShadow({ mode: 'open' }); #shadow = this.attachShadow({ mode: 'open' });
#rAFId = -1; #rAFId = -1;
@ -48,6 +49,7 @@ export class FolkRope extends AbstractArrow {
set stroke(stroke) { set stroke(stroke) {
this.#stroke = stroke; this.#stroke = stroke;
this.#path.setAttribute('stroke', this.#stroke); this.#path.setAttribute('stroke', this.#stroke);
this.#path2.setAttribute('stroke', this.#stroke);
} }
constructor() { constructor() {
@ -55,9 +57,16 @@ export class FolkRope extends AbstractArrow {
this.#svg.style.height = '100%'; this.#svg.style.height = '100%';
this.#svg.style.width = '100%'; this.#svg.style.width = '100%';
this.#svg.appendChild(this.#path); this.#svg.appendChild(this.#path);
this.#svg.appendChild(this.#path2);
this.#shadow.appendChild(this.#svg); this.#shadow.appendChild(this.#svg);
this.#path.setAttribute('stroke-width', '2'); this.#path.setAttribute('stroke-width', '2');
this.#path.setAttribute('fill', 'none'); this.#path.setAttribute('fill', 'none');
this.#path2.setAttribute('stroke-width', '2');
this.#path2.setAttribute('fill', 'none');
this.stroke = this.getAttribute('stroke') || 'black'; this.stroke = this.getAttribute('stroke') || 'black';
} }
@ -125,11 +134,29 @@ export class FolkRope extends AbstractArrow {
let pathData = `M ${this.#points[0].pos.x} ${this.#points[0].pos.y}`; let pathData = `M ${this.#points[0].pos.x} ${this.#points[0].pos.y}`;
let path2Data = '';
let isBroken = false;
for (let i = 1; i < this.#points.length; i++) { for (let i = 1; i < this.#points.length; i++) {
pathData += ` L ${this.#points[i].pos.x} ${this.#points[i].pos.y}`; const point = this.#points[i];
if (point.prev === null) {
isBroken = true;
path2Data = `M ${point.pos.x} ${point.pos.y}`;
} else if (isBroken) {
path2Data += ` L ${point.pos.x} ${point.pos.y}`;
} else {
pathData += ` L ${point.pos.x} ${point.pos.y}`;
}
} }
this.#path.setAttribute('d', pathData); this.#path.setAttribute('d', pathData);
if (path2Data) {
this.#path2.setAttribute('d', path2Data);
} else {
this.#path2.removeAttribute('d');
}
} }
#generatePoints(start: Vertex, end: Vertex) { #generatePoints(start: Vertex, end: Vertex) {