diff --git a/src/arrows/event-propagator.ts b/src/arrows/event-propagator.ts index 70a990b..355e5b7 100644 --- a/src/arrows/event-propagator.ts +++ b/src/arrows/event-propagator.ts @@ -93,7 +93,7 @@ export class EventPropagator extends FolkRope { this.#triggerTextarea.style.top = `${triggerPoint.pos.y}px`; } - const expressionPoint = this.points[Math.floor((this.points.length * 3) / 5)]; + const expressionPoint = this.points[Math.floor(this.points.length / 2)]; if (expressionPoint) { this.#expressionTextarea.style.left = `${expressionPoint.pos.x}px`; diff --git a/src/arrows/fc-rope.ts b/src/arrows/fc-rope.ts index a009dbc..53d9bc1 100644 --- a/src/arrows/fc-rope.ts +++ b/src/arrows/fc-rope.ts @@ -197,7 +197,7 @@ export class FolkRope extends AbstractArrow { }); } - //Link nodes into a doubly linked list + // Link nodes into a doubly linked list for (let i = 0; i < pointsLen; i++) { const prev = i != 0 ? points[i - 1] : null; const curr = points[i]; diff --git a/src/arrows/iframe-script.ts b/src/arrows/iframe-script.ts index 27fdd41..36b6ad3 100644 --- a/src/arrows/iframe-script.ts +++ b/src/arrows/iframe-script.ts @@ -1,4 +1,49 @@ import { FolkGeometry } from '../canvas/fc-geometry'; +import { VisualObserverManager, VisualObserverEntry } from './visual-observer.ts'; + +interface ObservedElementEntry { + selector: string; + element: Element; + count: number; +} + +class ObservedElements { + #elements: ObservedElementEntry[] = []; + + observe(selector: string) { + let entry = this.#elements.find((e) => e.selector === selector); + + if (entry === undefined) { + entry = { selector, element: document.querySelector(selector)!, count: 0 }; + this.#elements.push(entry); + } + + entry.count += 1; + + return entry.element; + } + + unobserve(selector: string) { + const entryIndex = this.#elements.findIndex((e) => e.selector === selector); + const entry = this.#elements[entryIndex]; + + if (entry === undefined) return; + + entry.count -= 1; + + if (entry.count === 0) { + this.#elements.splice(entryIndex, 1); + } + } + + getElement(selector) { + return this.#elements.find((e) => e.selector === selector)?.element; + } + + getSelector(element: Element) { + return this.#elements.find((e) => e.element === element)?.selector; + } +} // If this page is framed in then mock inject the following post message script if (window.parent !== window) { @@ -6,6 +51,8 @@ if (window.parent !== window) { const observedElements = new Map(); const observedSelectors = new Map(); + function boundingBoxCallback(entry: VisualObserverEntry) {} + function onGeometryChange(event) { window.parent.postMessage({ type: 'folk-element-change',