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 { getResizeCursorUrl, getRotateCursorUrl } from '@labs/utils/cursors';
import { DOMRectTransform, DOMRectTransformReadonly, Point, TransformEvent, Vector } from '@lib'; 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'; 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 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'; 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) { set width(width: Dimension) {
if (width === 'auto') { if (width === 'auto') {
resizeObserver.observe(this, this.#onAutoResize); resizeManager.observe(this, this.#onAutoResize);
} else { } else {
if (this.#attrWidth === 'auto' && this.#attrHeight !== 'auto') { if (this.#attrWidth === 'auto' && this.#attrHeight !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize); resizeManager.unobserve(this, this.#onAutoResize);
} }
this.#previousRect.width = this.#rect.width; this.#previousRect.width = this.#rect.width;
this.#rect.width = width; this.#rect.width = width;
@ -229,10 +229,10 @@ export class FolkShape extends HTMLElement {
set height(height: Dimension) { set height(height: Dimension) {
if (height === 'auto') { if (height === 'auto') {
resizeObserver.observe(this, this.#onAutoResize); resizeManager.observe(this, this.#onAutoResize);
} else { } else {
if (this.#attrHeight === 'auto' && this.#attrWidth !== 'auto') { if (this.#attrHeight === 'auto' && this.#attrWidth !== 'auto') {
resizeObserver.unobserve(this, this.#onAutoResize); resizeManager.unobserve(this, this.#onAutoResize);
} }
this.#previousRect.height = this.#rect.height; this.#previousRect.height = this.#rect.height;
this.#rect.height = 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) // Observers (move these to the top since they're dependencies)
export * from './client-rect-observer'; export * from './client-rect-observer';
export * from './folk-observer'; export * from './folk-observer';
export * from './resize-observer'; export * from './resize-manger';
// Core utilities and types // Core utilities and types
export * from './Matrix'; 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 { /** A more composition interface to use `ResizeObserver`, allowing the same element to have multiple observers. */
#elementMap = new WeakMap<Element, Set<ResizeObserverEntryCallback>>(); export class ResizeManager {
#elementMap = new WeakMap<Element, Set<ResizeManagerEntryCallback>>();
#elementEntry = new WeakMap<Element, ResizeObserverEntry>(); #elementEntry = new WeakMap<Element, ResizeObserverEntry>();
#vo = new ResizeObserver((entries) => { #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); let callbacks = this.#elementMap.get(target);
if (callbacks === undefined) { if (callbacks === undefined) {
@ -27,7 +29,8 @@ export class ResizeObserverManager {
callbacks.add(callback); 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); const callbacks = this.#elementMap.get(target);
if (callbacks === undefined) return; if (callbacks === undefined) return;