@cpfr/tootframes 1.0.9

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2024 Carsten Pfeffer
+
+This software is provided ‘as-is’, without any express or implied
+warranty. In no event will the authors be held liable for any damages
+arising from the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not
+claim that you wrote the original software. If you use this software
+in a product, an acknowledgment in the product documentation would be
+appreciated but is not required.
+
+2. Altered source versions must be plainly marked as such, and must not be
+misrepresented as being the original software.
+
+3. This notice may not be removed or altered from any source
+distribution.

package/README.md

@@ -0,0 +1,63 @@
+# Tootframes
+
+Tootframes is a simple UI libary that does not use reactive bindings or external frameworks such as React, Angular, Vue or similar.
+
+The name *"Tootframes"* is derived from the sound an elephant does plus *"frames"* for the frames where the UI elements are rendered.
+
+## Available UI Elements
+
+- Button
+- ColorPicker
+- Dialogs & MessageDialogs
+- Docking System (dockable containers)
+- Dropdown
+- Image
+- Text Label
+- ListBox (only one column)
+- ListView (table with headers)
+- Menu and MenuBar
+- Node Editor
+- Panels
+- TreeView
+- UndoHistory
+
+
+## License
+Zlib: https://opensource.org/license/zlib
+
+## Usage
+```
+import { ROOT, NodeEditor, Node } from "@cpfr/tootframes";
+
+// create a new node editor
+let nodeEditor = new NodeEditor(null, null, null, null, true, true, new tootframes.UndoHistory());
+
+
+// create two nodes
+var n1 = new Node("Node 1");
+var n2 = new Node("Node 2");
+
+// set the node position
+n1.setPos(100, 100);
+n2.setPos(200, 10);
+
+// add some HTML content to the second node
+let n2content = document.createElement("div");
+n2content.textContent = "Lorem Ipsum dolor si amet bla bla";
+n2._contentsElement.appendChild(n2content);
+
+// add inputs and outputs to the nodes
+let n1Out = n1.addOutput(null, null, true);
+let n2In = n2.addInput("Input");
+let n2Out = n2.addOutput("Output");
+
+// add the nodes to the editor
+nodeEditor.addNode(n1);
+nodeEditor.addNode(n2);
+
+// connect the output of node1 with the input of node2
+nodeEditor.connect(n1Out, n2In);
+
+// append the node editor to the root element of tootframes
+ROOT.appendChild(nodeEditor);
+```

package/dist/Button.d.ts

@@ -0,0 +1,5 @@
+import { Widget } from './Widget';
+declare class Button extends Widget {
+    constructor(label: string, callback: () => void);
+}
+export { Button };

package/dist/Color.d.ts

@@ -0,0 +1,79 @@
+declare enum ColorModificationMode {
+    Percentage = 0,
+    FixedAmount = 1
+}
+declare class Color {
+    private _r;
+    private _g;
+    private _b;
+    private _hueInfo?;
+    constructor(r?: number, g?: number, b?: number);
+    static fromRgb(r: number, g: number, b: number): Color;
+    static fromHsl(h: number, s: number, l: number): Color;
+    static fromHsv(h: number, s: number, v: number): Color;
+    static fromHex(hex: string): Color;
+    private static _hexToRgb;
+    private static _hslToRgb;
+    private static _hsvToRgb;
+    static fromRgbObject(rgbObject: {
+        r: number;
+        g: number;
+        b: number;
+    }): Color;
+    static fromHslObject(hslObject: {
+        h: number;
+        s: number;
+        l: number;
+    }): Color;
+    static fromHsvObject(hsvObject: {
+        h: number;
+        s: number;
+        v: number;
+    }): Color;
+    setRgb(r: number, g: number, b: number): void;
+    setHsl(h: number, s: number, l: number): void;
+    setHsv(h: number, s: number, v: number): void;
+    setHex(hex: string): void;
+    setRgbObject(rgbObject: {
+        r: number;
+        g: number;
+        b: number;
+    }): void;
+    setHslObject(hslObject: {
+        h: number;
+        s: number;
+        l: number;
+    }): void;
+    setHsvObject(hsvObject: {
+        h: number;
+        s: number;
+        v: number;
+    }): void;
+    getHsl(): {
+        h: number;
+        s: number;
+        l: number;
+    };
+    getHsv(): {
+        h: number;
+        s: number;
+        v: number;
+    };
+    getRgb(): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    getHex(): string;
+    lighten(amount: number, mode: ColorModificationMode): void;
+    darken(amount: number, mode: ColorModificationMode): void;
+    saturate(amount: number, mode: ColorModificationMode): void;
+    desaturate(amount: number, mode: ColorModificationMode): void;
+    setSaturation(saturation: number): void;
+    rotateHue(degrees: number): void;
+    invert(): void;
+    getInverted(): Color;
+    getComplement(): Color;
+    getBlended(other: Color, alpha: number): Color;
+}
+export { Color, ColorModificationMode };

package/dist/ColorPicker.d.ts

@@ -0,0 +1,71 @@
+import { Widget } from './Widget';
+import { Color } from './Color';
+import { Dialog } from './Dialog';
+import { MessageDialogButton } from './MessageDialog';
+declare abstract class AbstractColorPicker extends Widget {
+    private _color;
+    protected _onColorChanged: (oldColor: Color, newColor: Color) => void;
+    abstract setColor(color: Color): void;
+    constructor(onColorChanged?: (oldColor: Color, newColor: Color) => void);
+    protected setColorProperty(color: Color): void;
+    getColor(): Color;
+}
+declare class PaintStyleColorPicker extends AbstractColorPicker {
+    private _hueDiv;
+    private _saturationDiv;
+    private _lightnessDiv;
+    private _colorHandle;
+    private _lightnessHandle;
+    constructor(color?: Color, onColorChanged?: (oldColor: Color, newColor: Color) => void);
+    private _onLightnessMove;
+    private _onHueMove;
+    private _getColorFromCurrentPositions;
+    private _setColorInternal;
+    setColor(color: Color): void;
+    onAttached(): void;
+}
+declare class GimpStyleColorPicker extends AbstractColorPicker {
+    private _saturationDiv;
+    private _valueDiv;
+    private _hueDiv;
+    private _svHandle;
+    private _hueHandle;
+    constructor(color?: Color, onColorChanged?: (oldColor: Color, newColor: Color) => void);
+    private _onHueMove;
+    private _onSatValMove;
+    private _getColorFromCurrentPositions;
+    private _setColorInternal;
+    setColor(color: Color): void;
+    onAttached(): void;
+}
+declare class WheelColorPicker extends AbstractColorPicker {
+    private _hueWheelDiv;
+    private _wheelHandle;
+    private _slHandle;
+    private _innerCircleDiv;
+    private _saturationDiv;
+    private _lightnessDiv;
+    private readonly _zeroHueVector;
+    constructor(color?: Color, onColorChanged?: (oldColor: Color, newColor: Color) => void);
+    private _onHueMove;
+    private _onSatLitMove;
+    private _getColorFromCurrentPositions;
+    private _setColorInternal;
+    setColor(color: Color): void;
+    onAttached(): void;
+}
+declare class ColorPickerDialog extends Dialog {
+    private colorPicker;
+    private _textInput;
+    private _divOutput;
+    private _cancelOption;
+    private _continueOption;
+    private _boundKeyEvent;
+    constructor(title: string, text: string, color: Color, buttons: MessageDialogButton[], hasCloseButton: boolean);
+    onAttached(): void;
+    getColor(): Color;
+    showModal(): void;
+    _clickButton(button: HTMLButtonElement): void;
+    hide(): void;
+}
+export { AbstractColorPicker, PaintStyleColorPicker, GimpStyleColorPicker, WheelColorPicker, ColorPickerDialog };

package/dist/Dialog.d.ts

@@ -0,0 +1,18 @@
+import { Widget } from './Widget';
+import { DragInfo } from './dragAndDrop';
+declare class Dialog extends Widget {
+    title: string;
+    titleElement: HTMLDivElement;
+    modalElement: HTMLDivElement;
+    contentElement: HTMLElement;
+    attachedElement?: HTMLElement;
+    contentWidget: Widget;
+    constructor(title: string, contentWidget: Widget, hasCloseButton: boolean);
+    onAttached(): void;
+    show(): void;
+    hide(): void;
+    showModal(): void;
+    isShown(): boolean;
+    onDragging(dragInfo: DragInfo): void;
+}
+export { Dialog };

package/dist/DockContainer.d.ts

@@ -0,0 +1,82 @@
+import { Widget } from './Widget';
+import { DragInfo } from './dragAndDrop';
+declare enum DockDirection {
+    Left = 1,
+    Right = 2,
+    Top = 3,
+    Bottom = 4,
+    Inside = 5,
+    Float = 6
+}
+declare enum Orientation {
+    Horizontal = 1,
+    Vertical = 2
+}
+declare class DockingStructure {
+    orientation: Orientation;
+    dockPercentage: number;
+    children?: DockingStructure[];
+    identifier?: string;
+    static fromDockPanel(dockPanel: DockPanel): DockingStructure;
+    static fromDockContainer(dockContainer: DockContainer): DockingStructure;
+}
+declare abstract class Dockable extends Widget {
+    _dockPercentage: number;
+    identifier: string | null;
+}
+declare class DockContainer extends Dockable {
+    children: Dockable[];
+    orientation: Orientation;
+    constructor();
+    onAttached(): void;
+    getFloatingPanels(): {
+        identifier: string;
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    }[];
+    getDockPanelAtPoint(x: number, y: number): DockPanel;
+    getDockingStructure(): DockingStructure;
+    setChildPercentages(percentages: number[]): void;
+    _dockRelative(child: Dockable, relativeTo: Dockable, insertBefore: boolean, percentage: number): void;
+    _dock(child: Dockable, insertBefore: boolean, percentage?: number): void;
+    _setOrientation(orientation: Orientation): void;
+    _wrapChildren(): void;
+    _subdivide(relativeTo: Dockable, dockDirection: DockDirection): DockContainer;
+    dockRelativeTo(child: Dockable, relativeTo: Dockable, dockDirection: DockDirection, percentage?: number): Dockable;
+    dock(child: Dockable, dockDirection: DockDirection, percentage?: number): Dockable;
+    undock(child: Dockable): Dockable;
+    _layoutChildren(width?: number, height?: number): void;
+}
+declare class DockPanel extends Dockable {
+    titleElement: HTMLDivElement;
+    contentWidget: Widget;
+    private _dragged;
+    private _dockOverlay;
+    private _dockTargetDirection;
+    resizeEW: HTMLDivElement;
+    resizeNS: HTMLDivElement;
+    resizeDiag: HTMLDivElement;
+    private _resizingHorizontally;
+    private _resizingVertically;
+    private _dockTarget;
+    identifier: string;
+    constructor(title: string, contentWidget: Widget, hasCloseButton?: boolean);
+    onResize(): void;
+    onAttached(): void;
+    getTitle(): string;
+    setTitle(title: string): void;
+    setContent(contentWidget: Widget): void;
+    isFloating(): boolean;
+    close(): void;
+    createDragOverlay(): void;
+    onResizeStart(mouseEvt: MouseEvent, resizingHorizontally: boolean, resizingVertically: boolean): boolean;
+    onResizing(dragInfo: DragInfo): void;
+    onDragStart(mouseEvt: MouseEvent): boolean;
+    onDragging(dragInfo: DragInfo): void;
+    onDragEnd(mouseEvt: MouseEvent): void;
+    float(x?: number, y?: number, width?: number, height?: number): void;
+    dockRelativeTo(relativeWidget: Dockable, dockDirection: DockDirection, percentage?: number): void;
+}
+export { DockContainer, DockPanel, DockDirection, Orientation };

package/dist/Dropdown.d.ts

@@ -0,0 +1,9 @@
+import { Widget } from './Widget';
+declare class Dropdown extends Widget {
+    constructor();
+    addOption(label: string, value: string): void;
+    removeOption(value: string): void;
+    getSelectedValue(): string;
+    setSelectedValue(value: string): void;
+}
+export { Dropdown };

package/dist/FakeClipboard.d.ts

@@ -0,0 +1,16 @@
+declare class FakeClipboard {
+    _data: ClipboardData;
+    constructor();
+    set(data: ClipboardData): void;
+    clear(): void;
+    get(): ClipboardData;
+    containsData(): boolean;
+}
+declare class ClipboardData {
+    type: string;
+    timestamp: Date;
+    data: any;
+    constructor(type: string, timestamp: Date, data: any);
+}
+declare let fakeClipboard: FakeClipboard;
+export { fakeClipboard, FakeClipboard, ClipboardData };

package/dist/Image.d.ts

@@ -0,0 +1,7 @@
+import { Widget } from './Widget';
+declare class Image extends Widget {
+    constructor(src: string, width?: number, height?: number);
+    setSource(src: string): void;
+    getSource(): string;
+}
+export { Image };

package/dist/Label.d.ts

@@ -0,0 +1,7 @@
+import { Widget } from './Widget';
+declare class Label extends Widget {
+    constructor(text: string);
+    setText(text: string): void;
+    getText(): string;
+}
+export { Label };

package/dist/ListBox.d.ts

@@ -0,0 +1,23 @@
+import { Widget } from './Widget';
+declare class ListBox extends Widget {
+    private _toElementFunction;
+    private _selectedIndex;
+    private _onItemClick;
+    private _items;
+    constructor(items: any[], toElementFunction: (item: any) => HTMLElement, onItemClick: (item: any, element: HTMLElement) => void);
+    clear(): void;
+    setItems(items: any[]): void;
+    getItemCount(): number;
+    addItem(item: any): void;
+    removeItem(item: any): void;
+    removeItemAtIndex(index: number): void;
+    selectItem(item: any): void;
+    selectItemAtIndex(index: number): void;
+    getSelectedItem(): any;
+    getItemAtIndex(index: number): any;
+    getSelectedIndex(): number;
+}
+declare class StringListBox extends ListBox {
+    constructor(items: any[], toStringFunction?: (item: any) => string, onItemClick?: (item: any, element: HTMLElement) => void);
+}
+export { ListBox, StringListBox };

package/dist/ListView.d.ts

@@ -0,0 +1,59 @@
+import { Widget } from './Widget';
+declare class ListViewColumn {
+    name: string;
+    isReadOnly: boolean;
+    fromString: (value: string) => any;
+    toString: (value: any) => string;
+    constructor(name: string, isReadOnly: boolean, fromString: (value: string) => any, toString: (value: any) => string);
+    compare(a: any, b: any): number;
+}
+declare class StringListViewColumn extends ListViewColumn {
+    constructor(name: string, isReadOnly: boolean);
+    compare(a: string, b: string): 1 | -1 | 0;
+}
+declare class IntListViewColumn extends ListViewColumn {
+    constructor(name: string, isReadOnly: boolean);
+    compare(a: number, b: number): 1 | -1 | 0;
+}
+declare class FloatListViewColumn extends ListViewColumn {
+    constructor(name: string, isReadOnly: boolean);
+    compare(a: number, b: number): 1 | -1 | 0;
+}
+declare class ListView extends Widget {
+    private _columns;
+    private _rows;
+    private _htmlRows;
+    private _cellValueChangedCallback;
+    private _editValidationCallback;
+    private _cellDoubleClickCallback;
+    private _headerRow;
+    constructor(columns: ListViewColumn[], editValidationCallback?: (oldContent: any, inputContent: string, row: any[], column: ListViewColumn, rowIndex: number, columnIndex: number) => void, cellValueChangedCallback?: (oldContent: any, inputContent: string, row: any[], column: ListViewColumn, rowIndex: number, columnIndex: number) => void, cellDoubleClickCallback?: (row: any[], column: ListViewColumn, rowIndex: number, columnIndex: number) => void);
+    static fromStringColumns(columns: string[], areReadonly: boolean, editValidationCallback?: (oldContent: any, inputContent: string, row: any[], column: ListViewColumn, rowIndex: number, columnIndex: number) => void, cellValueChangedCallback?: (oldContent: any, inputContent: string, row: any[], column: ListViewColumn, rowIndex: number, columnIndex: number) => void, cellDoubleClickCallback?: (row: any[], column: ListViewColumn, rowIndex: number, columnIndex: number) => void): ListView;
+    addStringColumn(columnName: string, isReadonly?: boolean, columnValues?: string[], columnIndex?: number): void;
+    addColumn(column: ListViewColumn, columnValues?: any[], columnIndex?: number): void;
+    removeColumn(columnIndex: number): void;
+    setColumnAtIndexReadonly(columnIndex: number, readOnly: boolean): void;
+    setColumnReadonly(column: ListViewColumn, readOnly?: boolean): void;
+    removeRow(index: number): void;
+    clear(): void;
+    sortByColumn(index: number): void;
+    _makeEditable(editable: boolean, htmlCell: HTMLElement, columnIndex: number, row: any[], column: ListViewColumn): void;
+    _addCellToRow(row: any[], htmlRow: HTMLElement, colNo: number, value: any): HTMLSpanElement;
+    addRow(row: any[]): void;
+    deselectRows(): void;
+    selectRow(index: number): void;
+    getSelectedRowIndex(): number;
+    getSelectedRow(): any[];
+    getColumnCount(): number;
+    getRowCount(): number;
+    getColumns(): ListViewColumn[];
+    changeCellValue(rowIndex: number, columnIndex: number, newValue: string): void;
+    getRow(index: number): any[];
+    getRows(): any[][];
+    getColumn(index: number): ListViewColumn;
+    renameColumn(index: number, newName: string): void;
+    getColumnValues(index: number): any[];
+    setCellContent(rowIndex: number, columnIndex: number, newValue: any): void;
+    getCellContent(rowIndex: number, columnIndex: number): any;
+}
+export { ListView, ListViewColumn, StringListViewColumn, IntListViewColumn, FloatListViewColumn };

package/dist/Math.d.ts

@@ -0,0 +1,23 @@
+declare const RAD_TO_DEGREES: number;
+declare const DEGREES_TO_RAD: number;
+declare class Vector2 {
+    x: number;
+    y: number;
+    constructor(x: number, y: number);
+    getAngleToOtherInRadians(other: Vector2): number;
+    getAngleToOtherInDegrees(other: Vector2): number;
+    getRotatedInRadians(radians: number): Vector2;
+    getRotatedInDegrees(degrees: number): Vector2;
+    rotateInRadians(radians: number): void;
+    rotateInDegrees(degrees: number): void;
+    getScalarProduct(other: Vector2): number;
+    scale(factor: number): void;
+    getScaled(factor: number): Vector2;
+    getLength(): number;
+    normalize(): void;
+    getNormalized(): Vector2;
+    setLength(length: number): void;
+    getWithLength(length: number): Vector2;
+}
+declare function rectContains(rect: DOMRect, x: number, y: number): boolean;
+export { Vector2, rectContains, RAD_TO_DEGREES, DEGREES_TO_RAD };

package/dist/Menu.d.ts

@@ -0,0 +1,28 @@
+import { MenuBar } from './MenuBar';
+import { Widget } from './Widget';
+import { Vector2 } from './Math';
+declare class MenuEntry {
+    name: string;
+    element: HTMLElement;
+    constructor(name: string, element: HTMLElement);
+}
+declare class Menu extends Widget {
+    name: string;
+    private _submenus;
+    menuEntryPanel: HTMLDivElement;
+    _menuEntries: MenuEntry[];
+    private _x;
+    private _y;
+    constructor(name: string);
+    getParentMenuBar(): MenuBar;
+    getParentMenu(): Menu;
+    isShown(): boolean;
+    getPos(): Vector2;
+    show(x?: number, y?: number): void;
+    hide(): void;
+    addEntry(title: string, callback: () => void, canExecuteCallback?: () => boolean): void;
+    addSubMenu(menu: Menu): void;
+    addSeparator(): void;
+    clearEntries(): void;
+}
+export { Menu };

package/dist/MenuBar.d.ts

@@ -0,0 +1,10 @@
+import { Widget } from './Widget';
+import { Menu } from './Menu';
+declare class MenuBar extends Widget {
+    menus: Menu[];
+    activeMenu?: Menu;
+    constructor();
+    addMenu(menu: Menu): void;
+    hideMenus(): void;
+}
+export { MenuBar };

package/dist/MessageDialog.d.ts

@@ -0,0 +1,32 @@
+import { Dialog } from './Dialog';
+declare class MessageDialogButton {
+    label: string;
+    callback: (dlg: Dialog) => void;
+    isContinue: boolean;
+    isCancel: boolean;
+    constructor(label: string, callback: (dlg: Dialog) => void, isContinue: boolean, isCancel: boolean);
+}
+declare class MessageDialog extends Dialog {
+    private _cancelOption;
+    private _continueOption;
+    private _boundKeyEvent;
+    constructor(title: string, text: string, buttons: MessageDialogButton[], hasCloseButton: boolean);
+    showModal(): void;
+    _clickButton(button: HTMLButtonElement): void;
+    hide(): void;
+}
+declare class OkMessageDialog extends MessageDialog {
+    constructor(title: string, text: string, hasCloseButton: boolean, callback: (dlg: Dialog) => void);
+}
+declare class InputDialog extends Dialog {
+    inputElement: HTMLInputElement;
+    private _cancelOption;
+    private _continueOption;
+    private _boundKeyEvent;
+    constructor(title: string, text: string, value: string, buttons: MessageDialogButton[], hasCloseButton: boolean);
+    getValue(): string;
+    showModal(): void;
+    _clickButton(button: HTMLButtonElement): void;
+    hide(): void;
+}
+export { MessageDialog, OkMessageDialog, InputDialog, MessageDialogButton };