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

fix source and target updates

This commit is contained in:
“chrisshank” 2024-12-10 11:31:50 -08:00
parent fb3895e0d4
commit fabc27200c
4 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/sticky-html-arrow.html
View File

@ -31,6 +31,7 @@
<body> <body>
<folk-shape id="box1" x="50" y="100" width="50" height="50"></folk-shape> <folk-shape id="box1" x="50" y="100" width="50" height="50"></folk-shape>
<folk-shape id="box2" x="150" y="300" width="50" height="50"></folk-shape> <folk-shape id="box2" x="150" y="300" width="50" height="50"></folk-shape>
<folk-shape id="box3" x="200" y="200" width="50" height="50"></folk-shape>
<folk-arrow source="#box1" target="#box2"></folk-arrow> <folk-arrow source="#box1" target="#box2"></folk-arrow>
<script type="module"> <script type="module">

3
src/folk-arrow.ts
View File

@ -61,9 +61,12 @@ export class FolkArrow extends FolkBaseConnection {
if (sourceRect === null || targetRect === null) { if (sourceRect === null || targetRect === null) {
this.style.clipPath = ''; this.style.clipPath = '';
this.style.display = 'none';
return; return;
} }
this.style.display = 'block';
const [sx, sy, cx, cy, ex, ey] = getBoxToBoxArrow( const [sx, sy, cx, cy, ex, ey] = getBoxToBoxArrow(
sourceRect.x, sourceRect.x,
sourceRect.y, sourceRect.y,

4
src/folk-base-connection.ts
View File

@ -26,8 +26,8 @@ export class FolkBaseConnection extends FolkElement {
this.unobserveTarget(); this.unobserveTarget();
} }
override update(changedProperties: PropertyValues<this>) { override willUpdate(changedProperties: PropertyValues<this>) {
super.update(changedProperties); super.willUpdate(changedProperties);
if (changedProperties.has('source')) { if (changedProperties.has('source')) {
this.observeSource(); this.observeSource();

3
src/folk-event-propagator.ts
View File

@ -160,9 +160,10 @@ to.${key} = ${value};`);
} }
#evaluateExpression = (event?: Event) => { #evaluateExpression = (event?: Event) => {
console.log('eval');
if (this.sourceElement === null || this.targetElement === null) return; if (this.sourceElement === null || this.targetElement === null) return;
this.stroke = 'black'; this.stroke = 'black';
if (!this.#function) return; if (!this.#function) return;
try { try {