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; display: block;
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
pointer-events: none;
} }
</style> </style>
</head> </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'); throw new Error('source is not a valid element');
} else if (this.#sourceElement instanceof FolkShape) { } else if (this.#sourceElement instanceof FolkShape) {
this.#sourceElement.addEventListener('transform', this.#sourceHandler); 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) { } else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) {
window.addEventListener('message', this.#sourcePostMessage); window.addEventListener('message', this.#sourcePostMessage);
clientRectObserver.observe(this.#sourceElement, this.#sourceIframeCallback); clientRectObserver.observe(this.#sourceElement, this.#sourceIframeCallback);
this.#sourceElement.contentWindow?.postMessage({ this.#sourceElement.contentWindow?.postMessage({
type: 'folk-observe-element', type: 'folk-observe-element',
selector: this.#sourceIframeSelector, selector: this.#sourceIframeSelector,
@ -241,6 +246,8 @@ export class AbstractArrow extends HTMLElement {
throw new Error('target is not a valid element'); throw new Error('target is not a valid element');
} else if (this.#targetElement instanceof FolkShape) { } else if (this.#targetElement instanceof FolkShape) {
this.#targetElement.addEventListener('transform', this.#targetHandler); this.#targetElement.addEventListener('transform', this.#targetHandler);
this.#targetRect = this.#targetElement.getClientRect();
this.#update();
} else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) { } else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {
window.addEventListener('message', this.#targetPostMessage); window.addEventListener('message', this.#targetPostMessage);
clientRectObserver.observe(this.#targetElement, this.#targetIframeCallback); clientRectObserver.observe(this.#targetElement, this.#targetIframeCallback);
@ -250,8 +257,8 @@ export class AbstractArrow extends HTMLElement {
}); });
} else { } else {
clientRectObserver.observe(this.#targetElement, this.#targetCallback); 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; #isConnected = false;
connectedCallback() { connectedCallback() {
this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotation']));
this.#isConnected = true; this.#isConnected = true;
this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotation']));
} }
getClientRect(): RotatedDOMRect { 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. // Any updates that should be batched should happen here like updating the DOM or emitting events should be executed here.
#update(updatedProperties: Set<string>) { #update(updatedProperties: Set<string>) {
if (updatedProperties.has('type')) { // if (updatedProperties.has('type')) {
// TODO: Update shape styles. For many shapes, we could just use clip-path to style the shape. // // 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 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. // // 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/ // // See https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
} // }
this.#dispatchTransformEvent(updatedProperties); this.#dispatchTransformEvent(updatedProperties);
} }