@d3-polytree/editor 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -1,5 +1,159 @@
 import { InteractiveViewer, InteractiveViewerOptions } from '@d3-polytree/interactive-viewer';
 import { DiagramModule, CreateParameters, ModellingModelElement } from '@d3-polytree/core';
+import EventEmitter from 'eventemitter3';
+
+/** A moddle model element as read/written by the properties panel. */
+interface Definition {
+    id?: string;
+    label?: Definition;
+    $instanceOf(type: string): boolean;
+    get(property: string): unknown;
+    [key: string]: unknown;
+}
+
+/** A `{name,value}` option for a select entry. */
+interface SelectOption {
+    name: string;
+    value: string;
+}
+/** Options accepted when building an entry. */
+interface EntryOptions {
+    id: string;
+    modelProperty: string;
+    label?: string;
+    description?: string;
+    type?: string;
+    allowEmpty?: boolean;
+    selectOptions?: SelectOption[];
+}
+/** A rendered property entry: its markup plus get/set behaviour. */
+interface EntryResource extends EntryOptions {
+    html: string;
+    get: (element: Definition, formNode: HTMLElement) => void;
+    set: (element: Definition, values: Record<string, unknown>) => boolean;
+    validate: () => Record<string, unknown>;
+    triggerUpdate: (propertyId: string, element: Definition) => void;
+}
+/**
+ * Builds property-panel entries (text / select / colour / spreadsheet). Ported
+ * from `@d3-polytree/properties-panel`'s `entryFactory/*`, de-jQuery-ed onto
+ * native DOM; the colour entry uses a native `<input type="color">` in place of
+ * spectrum-colorpicker.
+ */
+declare class EntryFactory {
+    static readonly $inject: string[];
+    private readonly _eventBus;
+    constructor(eventBus: EventEmitter);
+    setDefaultParameters(options: EntryOptions): EntryResource;
+    textField(options: EntryOptions): EntryResource;
+    selectBox(options: EntryOptions): EntryResource;
+    colorPicker(options: EntryOptions): EntryResource;
+    spreadsheet(options: EntryOptions): EntryResource;
+}
+/** didi module contributing the entry factory. */
+declare const entryFactoryModule: {
+    __init__: string[];
+    entryFactory: (string | typeof EntryFactory)[];
+};
+
+/** A group of entries within a tab. */
+interface PropertiesGroup {
+    id: string;
+    label: string;
+    entries: EntryResource[];
+}
+/** A properties-panel tab. */
+interface PropertiesTab {
+    id: string;
+    label: string;
+    groups: PropertiesGroup[];
+}
+/** Icon registry token: icon type → SVG source. */
+type IconMap = Record<string, string>;
+/** A properties provider: supplies the tabs for a selected element. */
+interface PropertiesProvider {
+    getTabs(element: Definition): PropertiesTab[];
+    updateDrawing(definition: Definition): void;
+}
+/**
+ * The PFDN properties provider: builds the Properties + Format tabs for the
+ * selected element, and applies edits back to the drawing. Ported from
+ * `provider/pfdn/*`.
+ */
+declare class PfdnPropertiesProvider implements PropertiesProvider {
+    static readonly $inject: string[];
+    private readonly _icons;
+    private readonly _entryFactory;
+    private readonly _eventBus;
+    constructor(icons: IconMap, entryFactory: EntryFactory, eventBus: EventEmitter);
+    updateDrawing(definition: Definition): void;
+    getTabs(element: Definition): PropertiesTab[];
+    private _propertiesTab;
+    private _formatTab;
+}
+/** didi module contributing the PFDN properties provider. */
+declare const pfdnPropertiesProviderModule: {
+    __init__: string[];
+    propertiesProvider: (string | typeof PfdnPropertiesProvider)[];
+};
+
+/** The side-tab registration surface the panel needs (structural). */
+interface SideTabRegistration {
+    title?: string;
+    iconClassName?: string;
+    action: {
+        created?: (content: HTMLElement | null) => void;
+        [gesture: string]: ((content: HTMLElement | null) => void) | undefined;
+    };
+}
+interface SideTabsRegistrar {
+    registerSideTab(tab: SideTabRegistration, index?: number): void;
+}
+/**
+ * The editor properties panel: a tabbed editor for the selected element's
+ * model properties. Ported from `@d3-polytree/properties-panel`'s
+ * `PropertiesPanel.js`, de-jQuery-ed onto native DOM; the `scroll-tabs` widget
+ * is replaced by native click-to-select tabs.
+ */
+declare class PropertiesPanel {
+    static readonly $inject: string[];
+    private readonly _eventBus;
+    private readonly _propertiesProvider;
+    private readonly _diagramSettings;
+    private _entries;
+    private _container;
+    private _tabsEl;
+    private _contentsEl;
+    constructor(sideTabsProvider: SideTabsRegistrar, eventBus: EventEmitter, propertiesProvider: PropertiesProvider, diagramSettings: Definition);
+    private _registerSideTab;
+    private _registerSelectionListener;
+    private _drawPanel;
+    private _drawContainer;
+    private _registerInputChangeHandlers;
+    private _applyChange;
+    private _applyChangeByProperty;
+    private _commit;
+    private _selectTab;
+    private _update;
+    private _drawEntries;
+    static readonly HTML_MARKUP: string;
+}
+
+/**
+ * @d3-polytree/properties-panel — the editor's element-properties panel.
+ *
+ * Modernised (B6) from the 2017 jQuery/spectrum/scroll-tabs source to TypeScript
+ * + ESM with native DOM: jQuery is gone, the colour entry uses a native
+ * `<input type="color">`, and the `scroll-tabs` widget is replaced by native
+ * click-to-select tabs. Ships three didi modules (entry factory, PFDN provider,
+ * panel) for the editor to compose.
+ */
+
+/** didi module contributing the properties panel (composes with the provider). */
+declare const propertiesPanelModule: {
+    __init__: string[];
+    propertiesPanel: (string | typeof PropertiesPanel)[];
+};
 
 /**
  * @d3-polytree/editor — create and modify polytree diagrams.
@@ -26,4 +180,4 @@ declare class Editor extends InteractiveViewer {
     deleteSelected(): void;
 }
 
-export { Editor, type EditorOptions, Editor as default };
+export { type Definition, Editor, type EditorOptions, EntryFactory, type EntryOptions, type EntryResource, type IconMap, PfdnPropertiesProvider, type PropertiesGroup, PropertiesPanel, type PropertiesProvider, type PropertiesTab, type SelectOption, type SideTabRegistration, type SideTabsRegistrar, Editor as default, entryFactoryModule, pfdnPropertiesProviderModule, propertiesPanelModule };

package/dist/index.d.ts

@@ -1,5 +1,159 @@
 import { InteractiveViewer, InteractiveViewerOptions } from '@d3-polytree/interactive-viewer';
 import { DiagramModule, CreateParameters, ModellingModelElement } from '@d3-polytree/core';
+import EventEmitter from 'eventemitter3';
+
+/** A moddle model element as read/written by the properties panel. */
+interface Definition {
+    id?: string;
+    label?: Definition;
+    $instanceOf(type: string): boolean;
+    get(property: string): unknown;
+    [key: string]: unknown;
+}
+
+/** A `{name,value}` option for a select entry. */
+interface SelectOption {
+    name: string;
+    value: string;
+}
+/** Options accepted when building an entry. */
+interface EntryOptions {
+    id: string;
+    modelProperty: string;
+    label?: string;
+    description?: string;
+    type?: string;
+    allowEmpty?: boolean;
+    selectOptions?: SelectOption[];
+}
+/** A rendered property entry: its markup plus get/set behaviour. */
+interface EntryResource extends EntryOptions {
+    html: string;
+    get: (element: Definition, formNode: HTMLElement) => void;
+    set: (element: Definition, values: Record<string, unknown>) => boolean;
+    validate: () => Record<string, unknown>;
+    triggerUpdate: (propertyId: string, element: Definition) => void;
+}
+/**
+ * Builds property-panel entries (text / select / colour / spreadsheet). Ported
+ * from `@d3-polytree/properties-panel`'s `entryFactory/*`, de-jQuery-ed onto
+ * native DOM; the colour entry uses a native `<input type="color">` in place of
+ * spectrum-colorpicker.
+ */
+declare class EntryFactory {
+    static readonly $inject: string[];
+    private readonly _eventBus;
+    constructor(eventBus: EventEmitter);
+    setDefaultParameters(options: EntryOptions): EntryResource;
+    textField(options: EntryOptions): EntryResource;
+    selectBox(options: EntryOptions): EntryResource;
+    colorPicker(options: EntryOptions): EntryResource;
+    spreadsheet(options: EntryOptions): EntryResource;
+}
+/** didi module contributing the entry factory. */
+declare const entryFactoryModule: {
+    __init__: string[];
+    entryFactory: (string | typeof EntryFactory)[];
+};
+
+/** A group of entries within a tab. */
+interface PropertiesGroup {
+    id: string;
+    label: string;
+    entries: EntryResource[];
+}
+/** A properties-panel tab. */
+interface PropertiesTab {
+    id: string;
+    label: string;
+    groups: PropertiesGroup[];
+}
+/** Icon registry token: icon type → SVG source. */
+type IconMap = Record<string, string>;
+/** A properties provider: supplies the tabs for a selected element. */
+interface PropertiesProvider {
+    getTabs(element: Definition): PropertiesTab[];
+    updateDrawing(definition: Definition): void;
+}
+/**
+ * The PFDN properties provider: builds the Properties + Format tabs for the
+ * selected element, and applies edits back to the drawing. Ported from
+ * `provider/pfdn/*`.
+ */
+declare class PfdnPropertiesProvider implements PropertiesProvider {
+    static readonly $inject: string[];
+    private readonly _icons;
+    private readonly _entryFactory;
+    private readonly _eventBus;
+    constructor(icons: IconMap, entryFactory: EntryFactory, eventBus: EventEmitter);
+    updateDrawing(definition: Definition): void;
+    getTabs(element: Definition): PropertiesTab[];
+    private _propertiesTab;
+    private _formatTab;
+}
+/** didi module contributing the PFDN properties provider. */
+declare const pfdnPropertiesProviderModule: {
+    __init__: string[];
+    propertiesProvider: (string | typeof PfdnPropertiesProvider)[];
+};
+
+/** The side-tab registration surface the panel needs (structural). */
+interface SideTabRegistration {
+    title?: string;
+    iconClassName?: string;
+    action: {
+        created?: (content: HTMLElement | null) => void;
+        [gesture: string]: ((content: HTMLElement | null) => void) | undefined;
+    };
+}
+interface SideTabsRegistrar {
+    registerSideTab(tab: SideTabRegistration, index?: number): void;
+}
+/**
+ * The editor properties panel: a tabbed editor for the selected element's
+ * model properties. Ported from `@d3-polytree/properties-panel`'s
+ * `PropertiesPanel.js`, de-jQuery-ed onto native DOM; the `scroll-tabs` widget
+ * is replaced by native click-to-select tabs.
+ */
+declare class PropertiesPanel {
+    static readonly $inject: string[];
+    private readonly _eventBus;
+    private readonly _propertiesProvider;
+    private readonly _diagramSettings;
+    private _entries;
+    private _container;
+    private _tabsEl;
+    private _contentsEl;
+    constructor(sideTabsProvider: SideTabsRegistrar, eventBus: EventEmitter, propertiesProvider: PropertiesProvider, diagramSettings: Definition);
+    private _registerSideTab;
+    private _registerSelectionListener;
+    private _drawPanel;
+    private _drawContainer;
+    private _registerInputChangeHandlers;
+    private _applyChange;
+    private _applyChangeByProperty;
+    private _commit;
+    private _selectTab;
+    private _update;
+    private _drawEntries;
+    static readonly HTML_MARKUP: string;
+}
+
+/**
+ * @d3-polytree/properties-panel — the editor's element-properties panel.
+ *
+ * Modernised (B6) from the 2017 jQuery/spectrum/scroll-tabs source to TypeScript
+ * + ESM with native DOM: jQuery is gone, the colour entry uses a native
+ * `<input type="color">`, and the `scroll-tabs` widget is replaced by native
+ * click-to-select tabs. Ships three didi modules (entry factory, PFDN provider,
+ * panel) for the editor to compose.
+ */
+
+/** didi module contributing the properties panel (composes with the provider). */
+declare const propertiesPanelModule: {
+    __init__: string[];
+    propertiesPanel: (string | typeof PropertiesPanel)[];
+};
 
 /**
  * @d3-polytree/editor — create and modify polytree diagrams.
@@ -26,4 +180,4 @@ declare class Editor extends InteractiveViewer {
     deleteSelected(): void;
 }
 
-export { Editor, type EditorOptions, Editor as default };
+export { type Definition, Editor, type EditorOptions, EntryFactory, type EntryOptions, type EntryResource, type IconMap, PfdnPropertiesProvider, type PropertiesGroup, PropertiesPanel, type PropertiesProvider, type PropertiesTab, type SelectOption, type SideTabRegistration, type SideTabsRegistrar, Editor as default, entryFactoryModule, pfdnPropertiesProviderModule, propertiesPanelModule };