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

fix arrows

This commit is contained in:
“chrisshank” 2024-12-02 18:09:27 -08:00
parent 0f2f6c97a4
commit 19b8477cdf
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
</style>
</head>

11
src/abstract-arrow.ts
View File

@ -192,10 +192,15 @@ export class AbstractArrow extends HTMLElement {
throw new Error('source is not a valid element');
} else if (this.#sourceElement instanceof FolkShape) {
this.#sourceElement.addEventListener('transform', this.#sourceHandler);
this.#sourceRect = this.#sourceElement.getBoundingClientRect();
this.#sourceRect = this.#sourceElement.getClientRect();
this.#update();
} else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) {
window.addEventListener('message', this.#sourcePostMessage);
clientRectObserver.observe(this.#sourceElement, this.#sourceIframeCallback);
this.#sourceElement.contentWindow?.postMessage({
type: 'folk-observe-element',
selector: this.#sourceIframeSelector,
@ -241,6 +246,8 @@ export class AbstractArrow extends HTMLElement {
throw new Error('target is not a valid element');
} else if (this.#targetElement instanceof FolkShape) {
this.#targetElement.addEventListener('transform', this.#targetHandler);
this.#targetRect = this.#targetElement.getClientRect();
this.#update();
} else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {
window.addEventListener('message', this.#targetPostMessage);
clientRectObserver.observe(this.#targetElement, this.#targetIframeCallback);
@ -250,8 +257,8 @@ export class AbstractArrow extends HTMLElement {
});
} else {
clientRectObserver.observe(this.#targetElement, this.#targetCallback);
this.#targetRect = this.#targetElement.getBoundingClientRect();
}
this.#targetRect = this.#targetElement.getBoundingClientRect();
}
}

14
src/folk-shape.ts
View File

@ -309,8 +309,8 @@ export class FolkShape extends HTMLElement {
#isConnected = false;
connectedCallback() {
this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotation']));
this.#isConnected = true;
this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotation']));
}
getClientRect(): RotatedDOMRect {
@ -497,12 +497,12 @@ export class FolkShape extends HTMLElement {
// Any updates that should be batched should happen here like updating the DOM or emitting events should be executed here.
#update(updatedProperties: Set<string>) {
if (updatedProperties.has('type')) {
// TODO: Update shape styles. For many shapes, we could just use clip-path to style the shape.
// If we use relative values in `clip-path: polygon()`, then no JS is needed to style the shape
// If `clip-path: path()` is used then we need to update the path in JS.
// See https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
}
// if (updatedProperties.has('type')) {
// // TODO: Update shape styles. For many shapes, we could just use clip-path to style the shape.
// // If we use relative values in `clip-path: polygon()`, then no JS is needed to style the shape
// // If `clip-path: path()` is used then we need to update the path in JS.
// // See https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
// }
this.#dispatchTransformEvent(updatedProperties);
}