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

resize manager

This commit is contained in:
“chrisshank” 2024-12-19 00:07:33 -08:00
parent 5b46dcae99
commit e079a7a866
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
labs/folk-shape.ts
View File

@ -1,9 +1,9 @@
import { getResizeCursorUrl, getRotateCursorUrl } from '@labs/utils/cursors';
import { DOMRectTransform, DOMRectTransformReadonly, Point, TransformEvent, Vector } from '@lib';
import { ResizeObserverManager } from '@lib/resize-observer';
import { ResizeManager } from '@lib/resize-manger';
import { css, html } from '@lib/tags';
const resizeObserver = new ResizeObserverManager();
const resizeManager = new ResizeManager();
type ResizeHandle = 'resize-top-left' | 'resize-top-right' | 'resize-bottom-right' | 'resize-bottom-left';
type RotateHandle = 'rotation-top-left' | 'rotation-top-right' | 'rotation-bottom-right' | 'rotation-bottom-left';
@ -211,10 +211,10 @@ export class FolkShape extends HTMLElement {
set width(width: Dimension) {
if (width === 'auto') {
resizeObserver.observe(this, this.#onAutoResize);
resizeManager.observe(this, this.#onAutoResize);
} else {
if (this.#attrWidth === 'auto' && this.#attrHeight !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize);
resizeManager.unobserve(this, this.#onAutoResize);
}
this.#previousRect.width = this.#rect.width;
this.#rect.width = width;
@ -229,10 +229,10 @@ export class FolkShape extends HTMLElement {
set height(height: Dimension) {
if (height === 'auto') {
resizeObserver.observe(this, this.#onAutoResize);
resizeManager.observe(this, this.#onAutoResize);
} else {
if (this.#attrHeight === 'auto' && this.#attrWidth !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize);
resizeManager.unobserve(this, this.#onAutoResize);
}
this.#previousRect.height = this.#rect.height;
this.#rect.height = height;

2
lib/index.ts
View File

@ -1,7 +1,7 @@
// Observers (move these to the top since they're dependencies)
export * from './client-rect-observer';
export * from './folk-observer';
export * from './resize-observer';
export * from './resize-manger';
// Core utilities and types
export * from './Matrix';

13
lib/resize-observer.ts → lib/resize-manger.ts
View File

@ -1,7 +1,8 @@
export type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;
export type ResizeManagerEntryCallback = (entry: ResizeObserverEntry) => void;
export class ResizeObserverManager {
#elementMap = new WeakMap<Element, Set<ResizeObserverEntryCallback>>();
/** A more composition interface to use `ResizeObserver`, allowing the same element to have multiple observers. */
export class ResizeManager {
#elementMap = new WeakMap<Element, Set<ResizeManagerEntryCallback>>();
#elementEntry = new WeakMap<Element, ResizeObserverEntry>();
#vo = new ResizeObserver((entries) => {
@ -11,7 +12,8 @@ export class ResizeObserverManager {
}
});
observe(target: Element, callback: ResizeObserverEntryCallback): void {
/** Observe the `target` element with `callback`. */
observe(target: Element, callback: ResizeManagerEntryCallback): void {
let callbacks = this.#elementMap.get(target);
if (callbacks === undefined) {
@ -27,7 +29,8 @@ export class ResizeObserverManager {
callbacks.add(callback);
}
unobserve(target: Element, callback: ResizeObserverEntryCallback): void {
/** Unobserve the `target` element with `callback`. */
unobserve(target: Element, callback: ResizeManagerEntryCallback): void {
const callbacks = this.#elementMap.get(target);
if (callbacks === undefined) return;