fix: shape resize sync and transform event name alignment

- Sync #attrWidth/#attrHeight during resize so CSS reflects new dimensions
- Call #dispatchTransformEvent() directly for immediate visual update
- Fix TransformEvent to fire "folk-transform" matching CommunitySync listeners
- Reduce min-width/min-height on folk-markdown and folk-wrapper to 80x40px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-01 11:11:02 -08:00
parent c7674ac526
commit f69ee9f977
4 changed files with 12 additions and 7 deletions

View File

@ -2,7 +2,7 @@ import type { DOMRectTransformReadonly } from "./DOMRectTransform";
declare global { declare global {
interface HTMLElementEventMap { interface HTMLElementEventMap {
transform: TransformEvent; "folk-transform": TransformEvent;
} }
} }
@ -11,7 +11,7 @@ export class TransformEvent extends Event {
readonly #previous: DOMRectTransformReadonly; readonly #previous: DOMRectTransformReadonly;
constructor(current: DOMRectTransformReadonly, previous?: DOMRectTransformReadonly) { constructor(current: DOMRectTransformReadonly, previous?: DOMRectTransformReadonly) {
super("transform", { cancelable: true, bubbles: true }); super("folk-transform", { cancelable: true, bubbles: true });
this.#current = current; this.#current = current;
this.#previous = previous ?? current; this.#previous = previous ?? current;
} }

View File

@ -6,8 +6,8 @@ const styles = css`
background: white; background: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 200px; min-width: 80px;
min-height: 100px; min-height: 40px;
} }
.header { .header {

View File

@ -678,7 +678,12 @@ export class FolkShape extends FolkElement {
} }
} }
this.requestUpdate(); // Sync public properties so CommunitySync sees the new values
// and #attrWidth/#attrHeight stay current for CSS application.
this.#attrWidth = this.#rect.width;
this.#attrHeight = this.#rect.height;
this.#previousRect = new DOMRectTransform(this.#rect);
this.#dispatchTransformEvent();
} }
/** /**

View File

@ -6,8 +6,8 @@ const styles = css`
background: white; background: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-width: 200px; min-width: 80px;
min-height: 100px; min-height: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;