Simplify, reduce

- Merge ScrollableElement into SmoothScrollableElement
- Prune unused helpers FastDomNode, Widget LinkedList
- Make internal exports non-exported
- Remove redundant guards/aliases
This commit is contained in:
Daniel Imms
2026-02-03 03:42:19 -08:00
parent 77695cb405
commit edb0e1ceb3
5 changed files with 24 additions and 312 deletions
-190
View File
@@ -5,49 +5,21 @@
export class FastDomNode<T extends HTMLElement> {
private _maxWidth: string = '';
private _width: string = '';
private _height: string = '';
private _top: string = '';
private _left: string = '';
private _bottom: string = '';
private _right: string = '';
private _paddingTop: string = '';
private _paddingLeft: string = '';
private _paddingBottom: string = '';
private _paddingRight: string = '';
private _fontFamily: string = '';
private _fontWeight: string = '';
private _fontSize: string = '';
private _fontStyle: string = '';
private _fontFeatureSettings: string = '';
private _fontVariationSettings: string = '';
private _textDecoration: string = '';
private _lineHeight: string = '';
private _letterSpacing: string = '';
private _className: string = '';
private _display: string = '';
private _position: string = '';
private _visibility: string = '';
private _color: string = '';
private _backgroundColor: string = '';
private _layerHint: boolean = false;
private _contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint' = 'none';
private _boxShadow: string = '';
constructor(
public readonly domNode: T
) { }
public setMaxWidth(_maxWidth: number | string): void {
const maxWidth = numberAsPixels(_maxWidth);
if (this._maxWidth === maxWidth) {
return;
}
this._maxWidth = maxWidth;
this.domNode.style.maxWidth = this._maxWidth;
}
public setWidth(_width: number | string): void {
const width = numberAsPixels(_width);
if (this._width === width) {
@@ -102,117 +74,6 @@ export class FastDomNode<T extends HTMLElement> {
this.domNode.style.right = this._right;
}
public setPaddingTop(_paddingTop: number | string): void {
const paddingTop = numberAsPixels(_paddingTop);
if (this._paddingTop === paddingTop) {
return;
}
this._paddingTop = paddingTop;
this.domNode.style.paddingTop = this._paddingTop;
}
public setPaddingLeft(_paddingLeft: number | string): void {
const paddingLeft = numberAsPixels(_paddingLeft);
if (this._paddingLeft === paddingLeft) {
return;
}
this._paddingLeft = paddingLeft;
this.domNode.style.paddingLeft = this._paddingLeft;
}
public setPaddingBottom(_paddingBottom: number | string): void {
const paddingBottom = numberAsPixels(_paddingBottom);
if (this._paddingBottom === paddingBottom) {
return;
}
this._paddingBottom = paddingBottom;
this.domNode.style.paddingBottom = this._paddingBottom;
}
public setPaddingRight(_paddingRight: number | string): void {
const paddingRight = numberAsPixels(_paddingRight);
if (this._paddingRight === paddingRight) {
return;
}
this._paddingRight = paddingRight;
this.domNode.style.paddingRight = this._paddingRight;
}
public setFontFamily(fontFamily: string): void {
if (this._fontFamily === fontFamily) {
return;
}
this._fontFamily = fontFamily;
this.domNode.style.fontFamily = this._fontFamily;
}
public setFontWeight(fontWeight: string): void {
if (this._fontWeight === fontWeight) {
return;
}
this._fontWeight = fontWeight;
this.domNode.style.fontWeight = this._fontWeight;
}
public setFontSize(_fontSize: number | string): void {
const fontSize = numberAsPixels(_fontSize);
if (this._fontSize === fontSize) {
return;
}
this._fontSize = fontSize;
this.domNode.style.fontSize = this._fontSize;
}
public setFontStyle(fontStyle: string): void {
if (this._fontStyle === fontStyle) {
return;
}
this._fontStyle = fontStyle;
this.domNode.style.fontStyle = this._fontStyle;
}
public setFontFeatureSettings(fontFeatureSettings: string): void {
if (this._fontFeatureSettings === fontFeatureSettings) {
return;
}
this._fontFeatureSettings = fontFeatureSettings;
this.domNode.style.fontFeatureSettings = this._fontFeatureSettings;
}
public setFontVariationSettings(fontVariationSettings: string): void {
if (this._fontVariationSettings === fontVariationSettings) {
return;
}
this._fontVariationSettings = fontVariationSettings;
this.domNode.style.fontVariationSettings = this._fontVariationSettings;
}
public setTextDecoration(textDecoration: string): void {
if (this._textDecoration === textDecoration) {
return;
}
this._textDecoration = textDecoration;
this.domNode.style.textDecoration = this._textDecoration;
}
public setLineHeight(_lineHeight: number | string): void {
const lineHeight = numberAsPixels(_lineHeight);
if (this._lineHeight === lineHeight) {
return;
}
this._lineHeight = lineHeight;
this.domNode.style.lineHeight = this._lineHeight;
}
public setLetterSpacing(_letterSpacing: number | string): void {
const letterSpacing = numberAsPixels(_letterSpacing);
if (this._letterSpacing === letterSpacing) {
return;
}
this._letterSpacing = letterSpacing;
this.domNode.style.letterSpacing = this._letterSpacing;
}
public setClassName(className: string): void {
if (this._className === className) {
return;
@@ -226,14 +87,6 @@ export class FastDomNode<T extends HTMLElement> {
this._className = this.domNode.className;
}
public setDisplay(display: string): void {
if (this._display === display) {
return;
}
this._display = display;
this.domNode.style.display = this._display;
}
public setPosition(position: string): void {
if (this._position === position) {
return;
@@ -242,30 +95,6 @@ export class FastDomNode<T extends HTMLElement> {
this.domNode.style.position = this._position;
}
public setVisibility(visibility: string): void {
if (this._visibility === visibility) {
return;
}
this._visibility = visibility;
this.domNode.style.visibility = this._visibility;
}
public setColor(color: string): void {
if (this._color === color) {
return;
}
this._color = color;
this.domNode.style.color = this._color;
}
public setBackgroundColor(backgroundColor: string): void {
if (this._backgroundColor === backgroundColor) {
return;
}
this._backgroundColor = backgroundColor;
this.domNode.style.backgroundColor = this._backgroundColor;
}
public setLayerHinting(layerHint: boolean): void {
if (this._layerHint === layerHint) {
return;
@@ -286,29 +115,10 @@ export class FastDomNode<T extends HTMLElement> {
this.domNode.style.contain = this._contain;
}
public setBoxShadow(boxShadow: string): void {
if (this._boxShadow === boxShadow) {
return;
}
this._boxShadow = boxShadow;
this.domNode.style.boxShadow = this._boxShadow;
}
public setAttribute(name: string, value: string): void {
this.domNode.setAttribute(name, value);
}
public removeAttribute(name: string): void {
this.domNode.removeAttribute(name);
}
public appendChild(child: FastDomNode<T>): void {
this.domNode.appendChild(child.domNode);
}
public removeChild(child: FastDomNode<T>): void {
this.domNode.removeChild(child.domNode);
}
}
export function createFastDomNode<T extends HTMLElement>(domNode: T): FastDomNode<T> {
-50
View File
@@ -22,33 +22,6 @@ export class LinkedList<E> {
private _first: Node<E> = Node.Undefined;
private _last: Node<E> = Node.Undefined;
private _size: number = 0;
public get size(): number {
return this._size;
}
public isEmpty(): boolean {
return this._first === Node.Undefined;
}
public clear(): void {
let node = this._first;
while (node !== Node.Undefined) {
const next = node.next;
node.prev = Node.Undefined;
node.next = Node.Undefined;
node = next;
}
this._first = Node.Undefined;
this._last = Node.Undefined;
this._size = 0;
}
public unshift(element: E): () => void {
return this._insert(element, false);
}
public push(element: E): () => void {
return this._insert(element, true);
@@ -74,8 +47,6 @@ export class LinkedList<E> {
newNode.next = oldFirst;
oldFirst.prev = newNode;
}
this._size += 1;
let didRemove = false;
return () => {
if (!didRemove) {
@@ -85,26 +56,6 @@ export class LinkedList<E> {
};
}
public shift(): E | undefined {
if (this._first === Node.Undefined) {
return undefined;
}
const res = this._first.element;
this._remove(this._first);
return res;
}
public pop(): E | undefined {
if (this._last === Node.Undefined) {
return undefined;
}
const res = this._last.element;
this._remove(this._last);
return res;
}
private _remove(node: Node<E>): void {
if (node.prev !== Node.Undefined && node.next !== Node.Undefined) {
// middle
@@ -129,7 +80,6 @@ export class LinkedList<E> {
}
// done
this._size -= 1;
}
public *[Symbol.iterator](): Iterator<E> {
+3 -7
View File
@@ -303,7 +303,7 @@ export class Scrollable extends Disposable {
if (reuseAnimation) {
newSmoothScrolling = new SmoothScrollingOperation(this._smoothScrolling.from, validTarget, this._smoothScrolling.startTime, this._smoothScrolling.duration);
} else {
newSmoothScrolling = this._smoothScrolling.combine(this._state, validTarget, this._smoothScrollDuration);
newSmoothScrolling = SmoothScrollingOperation.start(this._state, validTarget, this._smoothScrollDuration);
}
this._smoothScrolling.dispose();
this._smoothScrolling = newSmoothScrolling;
@@ -364,7 +364,7 @@ export class Scrollable extends Disposable {
}
}
export class SmoothScrollingUpdate {
class SmoothScrollingUpdate {
public readonly scrollLeft: number;
public readonly scrollTop: number;
@@ -398,7 +398,7 @@ function createComposed(a: IAnimation, b: IAnimation, cut: number): IAnimation {
};
}
export class SmoothScrollingOperation {
class SmoothScrollingOperation {
public readonly from: ISmoothScrollPosition;
public to: ISmoothScrollPosition;
@@ -469,10 +469,6 @@ export class SmoothScrollingOperation {
return new SmoothScrollingUpdate(this.to.scrollLeft, this.to.scrollTop, true);
}
public combine(from: ISmoothScrollPosition, to: ISmoothScrollPosition, duration: number): SmoothScrollingOperation {
return SmoothScrollingOperation.start(from, to, duration);
}
public static start(from: ISmoothScrollPosition, to: ISmoothScrollPosition, duration: number): SmoothScrollingOperation {
duration = duration + 10;
const startTime = Date.now() - 10;
+20 -30
View File
@@ -20,7 +20,6 @@ import { INewScrollDimensions, INewScrollPosition, IScrollDimensions, IScrollPos
const HIDE_TIMEOUT = 500;
const SCROLL_WHEEL_SENSITIVITY = 50;
const SCROLL_WHEEL_SMOOTH_SCROLL_ENABLED = true;
class MouseWheelClassifierItem {
public timestamp: number;
@@ -36,7 +35,7 @@ class MouseWheelClassifierItem {
}
}
export class MouseWheelClassifier {
class MouseWheelClassifier {
public static readonly INSTANCE = new MouseWheelClassifier();
@@ -345,9 +344,7 @@ export abstract class AbstractScrollableElement extends Widget {
}
const classifier = MouseWheelClassifier.INSTANCE;
if (SCROLL_WHEEL_SMOOTH_SCROLL_ENABLED) {
classifier.acceptStandardWheelEvent(e);
}
classifier.acceptStandardWheelEvent(e);
let didScroll = false;
@@ -399,8 +396,7 @@ export abstract class AbstractScrollableElement extends Widget {
if (futureScrollPosition.scrollLeft !== desiredScrollPosition.scrollLeft || futureScrollPosition.scrollTop !== desiredScrollPosition.scrollTop) {
const canPerformSmoothScroll = (
SCROLL_WHEEL_SMOOTH_SCROLL_ENABLED
&& this._options.mouseWheelSmoothScroll
this._options.mouseWheelSmoothScroll
&& classifier.isPhysicalMouseWheel()
);
@@ -519,31 +515,25 @@ export abstract class AbstractScrollableElement extends Widget {
}
}
export class ScrollableElement extends AbstractScrollableElement {
constructor(element: HTMLElement, options: IScrollableElementCreationOptions) {
options = options ?? {};
options.mouseWheelSmoothScroll = false;
const scrollable = new Scrollable({
forceIntegerValues: true,
smoothScrollDuration: 0,
scheduleAtNextAnimationFrame: (callback) => dom.scheduleAtNextAnimationFrame(dom.getWindow(element), callback)
});
super(element, options, scrollable);
this._register(scrollable);
}
public setScrollPosition(update: INewScrollPosition): void {
this._scrollable.setScrollPositionNow(update);
}
public getScrollPosition(): IScrollPosition {
return this._scrollable.getCurrentScrollPosition();
}
}
export class SmoothScrollableElement extends AbstractScrollableElement {
constructor(element: HTMLElement, options: IScrollableElementCreationOptions, scrollable?: Scrollable) {
options = options ?? {};
const ownsScrollable = !scrollable;
if (!scrollable) {
options.mouseWheelSmoothScroll = false;
scrollable = new Scrollable({
forceIntegerValues: true,
smoothScrollDuration: 0,
scheduleAtNextAnimationFrame: (callback) => dom.scheduleAtNextAnimationFrame(dom.getWindow(element), callback)
});
}
super(element, options, scrollable);
if (ownsScrollable) {
this._register(scrollable);
}
}
public setScrollPosition(update: INewScrollPosition & { reuseAnimation?: boolean }): void {
if (update.reuseAnimation) {
this._scrollable.setScrollPositionSmooth(update, update.reuseAnimation);
+1 -35
View File
@@ -4,10 +4,8 @@
*--------------------------------------------------------------------------------------------*/
import * as dom from '../Dom';
import { IKeyboardEvent, StandardKeyboardEvent } from './keyboardEvent';
import { IMouseEvent, StandardMouseEvent } from './mouseEvent';
import { Gesture } from './touch';
import { Disposable, IDisposable } from 'common/Lifecycle';
import { Disposable } from 'common/Lifecycle';
export abstract class Widget extends Disposable {
@@ -15,10 +13,6 @@ export abstract class Widget extends Disposable {
this._register(dom.addDisposableListener(domNode, dom.eventType.CLICK, (e: MouseEvent) => listener(new StandardMouseEvent(dom.getWindow(domNode), e))));
}
protected _onmousedown(domNode: HTMLElement, listener: (e: IMouseEvent) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.MOUSE_DOWN, (e: MouseEvent) => listener(new StandardMouseEvent(dom.getWindow(domNode), e))));
}
protected _onmouseover(domNode: HTMLElement, listener: (e: IMouseEvent) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.MOUSE_OVER, (e: MouseEvent) => listener(new StandardMouseEvent(dom.getWindow(domNode), e))));
}
@@ -26,32 +20,4 @@ export abstract class Widget extends Disposable {
protected _onmouseleave(domNode: HTMLElement, listener: (e: IMouseEvent) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.MOUSE_LEAVE, (e: MouseEvent) => listener(new StandardMouseEvent(dom.getWindow(domNode), e))));
}
protected _onkeydown(domNode: HTMLElement, listener: (e: IKeyboardEvent) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.KEY_DOWN, (e: KeyboardEvent) => listener(new StandardKeyboardEvent(e))));
}
protected _onkeyup(domNode: HTMLElement, listener: (e: IKeyboardEvent) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.KEY_UP, (e: KeyboardEvent) => listener(new StandardKeyboardEvent(e))));
}
protected _oninput(domNode: HTMLElement, listener: (e: Event) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.INPUT, listener));
}
protected _onblur(domNode: HTMLElement, listener: (e: Event) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.BLUR, listener));
}
protected _onfocus(domNode: HTMLElement, listener: (e: Event) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.FOCUS, listener));
}
protected _onchange(domNode: HTMLElement, listener: (e: Event) => void): void {
this._register(dom.addDisposableListener(domNode, dom.eventType.CHANGE, listener));
}
protected _ignoreGesture(domNode: HTMLElement): IDisposable {
return Gesture.ignoreTarget(domNode);
}
}