@d3-polytree/editor 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -21,19 +21,530 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Editor: () => Editor,
-  default: () => index_default
+  EntryFactory: () => EntryFactory,
+  PfdnPropertiesProvider: () => PfdnPropertiesProvider,
+  PropertiesPanel: () => PropertiesPanel,
+  default: () => index_default,
+  entryFactoryModule: () => entryFactoryModule,
+  pfdnPropertiesProviderModule: () => pfdnPropertiesProviderModule,
+  propertiesPanelModule: () => propertiesPanelModule
 });
 module.exports = __toCommonJS(index_exports);
 var import_interactive_viewer = require("@d3-polytree/interactive-viewer");
 var import_viewer = require("@d3-polytree/viewer");
 var import_core = require("@d3-polytree/core");
-var import_properties_panel = require("@d3-polytree/properties-panel");
+
+// src/properties-panel/utils.ts
+function is(definition, elementType) {
+  return definition.$instanceOf(elementType);
+}
+function deepGet(obj, path) {
+  return path.split(".").reduce(
+    (o, k) => o == null ? void 0 : o[k],
+    obj
+  );
+}
+function deepSet(obj, path, value) {
+  const keys = path.split(".");
+  let cursor = obj;
+  for (let i = 0; i < keys.length - 1; i += 1) {
+    const key = keys[i];
+    if (cursor[key] == null || typeof cursor[key] !== "object") {
+      cursor[key] = {};
+    }
+    cursor = cursor[key];
+  }
+  cursor[keys[keys.length - 1]] = value;
+}
+function debounce(fn, wait) {
+  let timer;
+  return (...args) => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => fn(...args), wait);
+  };
+}
+function startCase(input) {
+  return input.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([a-zA-Z])([0-9])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function isHexColor(value) {
+  return typeof value === "string" && /^#[0-9a-fA-F]{6}$/.test(value);
+}
+
+// src/properties-panel/EntryFactory.ts
+function ensureNotNull(prop) {
+  if (!prop) {
+    throw new Error(`${prop} must be set.`);
+  }
+  return prop;
+}
+var EntryFactory = class {
+  constructor(eventBus) {
+    this._eventBus = eventBus;
+  }
+  setDefaultParameters(options) {
+    const eventBus = this._eventBus;
+    const defaultGet = (element, formNode) => {
+      const prop = ensureNotNull(options.modelProperty);
+      const value = deepGet(element, prop);
+      const input = formNode.querySelector("input");
+      if (input) {
+        input.value = value == null ? "" : String(value);
+      }
+    };
+    const defaultSet = (element, values) => {
+      const prop = ensureNotNull(options.modelProperty);
+      deepSet(element, prop, deepGet(values, prop));
+      return true;
+    };
+    const triggerUpdate = (propertyId, element) => {
+      eventBus.emit("PropertiesPanel.propertyChanged", propertyId, element);
+    };
+    return {
+      html: "",
+      description: "",
+      get: defaultGet,
+      set: defaultSet,
+      validate: () => ({}),
+      ...options,
+      triggerUpdate
+    };
+  }
+  textField(options) {
+    return textInputField(this.setDefaultParameters(options));
+  }
+  selectBox(options) {
+    return selectBoxField(this.setDefaultParameters(options));
+  }
+  colorPicker(options) {
+    return colorPickerField(this.setDefaultParameters(options));
+  }
+  spreadsheet(options) {
+    return this.setDefaultParameters(options);
+  }
+};
+EntryFactory.$inject = ["eventBus"];
+function fieldWrapper(resource, inner) {
+  const label = resource.label ?? resource.id;
+  return `<div class="pfdjs-pp-field-wrapper"><label for="pfdjs-${resource.id}">${label}</label>${inner}</div>`;
+}
+function textInputField(resource) {
+  const type = resource.type ?? "text";
+  resource.html = fieldWrapper(
+    resource,
+    `<input id="pfdjs-${resource.id}" type="${type}" name="${resource.modelProperty}" />`
+  );
+  return resource;
+}
+function selectBoxField(resource) {
+  const allowEmpty = resource.allowEmpty ?? true;
+  const options = Array.isArray(resource.selectOptions) ? resource.selectOptions.concat(allowEmpty ? [{ name: "", value: "" }] : []) : [{ name: "", value: "" }];
+  const optionsHtml = options.map((o) => `<option value="${o.value}">${o.name}</option>`).join("");
+  resource.html = fieldWrapper(
+    resource,
+    `<select id="pfdjs-${resource.id}" name="${resource.modelProperty}">${optionsHtml}</select>`
+  );
+  resource.get = (element, formNode) => {
+    const value = element.get(resource.modelProperty) ?? "default";
+    formNode.querySelectorAll(`select#pfdjs-${resource.id} > option`).forEach((option) => {
+      option.selected = option.value === value;
+    });
+  };
+  return resource;
+}
+function colorPickerField(resource) {
+  resource.html = fieldWrapper(
+    resource,
+    `<input id="pfdjs-${resource.id}" type="color" name="${resource.modelProperty}" />`
+  );
+  resource.get = (element, formNode) => {
+    const input = formNode.querySelector("input[type=color]");
+    const value = deepGet(element, resource.modelProperty);
+    if (input && isHexColor(value)) {
+      input.value = value;
+    }
+  };
+  return resource;
+}
+var entryFactoryModule = {
+  __init__: ["entryFactory"],
+  entryFactory: ["type", EntryFactory]
+};
+
+// src/properties-panel/PfdnPropertiesProvider.ts
+function nameProps(group, element, factory) {
+  if (is(element, "pfdn:Node")) {
+    group.entries.push(factory.textField({ id: "name", label: "Name", modelProperty: "name" }));
+    group.entries.push(factory.textField({ id: "tag", label: "Tag", modelProperty: "tag" }));
+    group.entries.push(
+      factory.textField({ id: "label.text", label: "Diagram label", modelProperty: "label.text" })
+    );
+  } else if (is(element, "pfdn:Settings")) {
+    group.entries.push(factory.textField({ id: "name", label: "Diagram name", modelProperty: "name" }));
+    group.entries.push(factory.textField({ id: "author", label: "Author's name", modelProperty: "author" }));
+  } else if (is(element, "pfdn:Link")) {
+    group.entries.push(
+      factory.textField({ id: "label.text", label: "Diagram label", modelProperty: "label.text" })
+    );
+  } else if (is(element, "pfdn:Label")) {
+    group.entries.push(factory.textField({ id: "text", label: "Label", modelProperty: "text" }));
+  }
+}
+function nodeFormatProps(group, element, factory, icons) {
+  if (!is(element, "pfdn:Node")) {
+    return;
+  }
+  const selectOptions = Object.keys(icons).map((key) => ({ value: key, name: startCase(key) }));
+  group.entries.push(
+    factory.selectBox({
+      id: "type",
+      label: "Icon",
+      modelProperty: "type",
+      allowEmpty: false,
+      selectOptions
+    })
+  );
+  group.entries.push(
+    factory.textField({ id: "size", label: "Size", modelProperty: "size", type: "number" })
+  );
+}
+function linkFormatProps(group, element, factory) {
+  if (!is(element, "pfdn:Link")) {
+    return;
+  }
+  group.entries.push(
+    factory.textField({ id: "lineWidth", label: "Line width", modelProperty: "lineWidth", type: "number" })
+  );
+  group.entries.push(
+    factory.colorPicker({ id: "lineColor", label: "Line color", modelProperty: "lineColor" })
+  );
+}
+function labelFormatProps(group, element, factory) {
+  if (is(element, "pfdn:Node") || is(element, "pfdn:Link")) {
+    group.entries.push(
+      factory.textField({
+        id: "label.fontSize",
+        label: "Font size",
+        modelProperty: "label.fontSize",
+        type: "number"
+      })
+    );
+    group.entries.push(
+      factory.colorPicker({ id: "label.color", label: "Color", modelProperty: "label.color" })
+    );
+  } else if (is(element, "pfdn:Label")) {
+    group.entries.push(
+      factory.textField({ id: "fontSize", label: "Font size", modelProperty: "fontSize", type: "number" })
+    );
+    group.entries.push(factory.colorPicker({ id: "color", label: "Color", modelProperty: "color" }));
+  }
+}
+function gridFormatProps(group, element, factory) {
+  if (!is(element, "pfdn:Settings")) {
+    return;
+  }
+  group.entries.push(
+    factory.colorPicker({ id: "backgroundColor", label: "Background color", modelProperty: "backgroundColor" })
+  );
+  group.entries.push(
+    factory.colorPicker({ id: "grid.lineColor", label: "Line color", modelProperty: "grid.lineColor" })
+  );
+  group.entries.push(
+    factory.textField({ id: "grid.size", label: "Square size", modelProperty: "grid.size", type: "number" })
+  );
+  group.entries.push(
+    factory.textField({ id: "grid.lineWidth", label: "Line width", modelProperty: "grid.lineWidth", type: "number" })
+  );
+}
+var PfdnPropertiesProvider = class {
+  constructor(icons, entryFactory, eventBus) {
+    this._icons = icons;
+    this._entryFactory = entryFactory;
+    this._eventBus = eventBus;
+  }
+  updateDrawing(definition) {
+    if (is(definition, "pfdn:Settings")) {
+      this._eventBus.emit("canvas.resized");
+      return;
+    }
+    this._eventBus.emit("element.updated", definition.id, definition);
+    if (is(definition, "pfdn:Link") || is(definition, "pfdn:Node")) {
+      const label = definition.label;
+      if (label) {
+        this._eventBus.emit("element.updated", label.id, label);
+      }
+    }
+  }
+  getTabs(element) {
+    const factory = this._entryFactory;
+    return [this._propertiesTab(element, factory), this._formatTab(element, factory)];
+  }
+  _propertiesTab(element, factory) {
+    const general = { id: "general", label: "General", entries: [] };
+    nameProps(general, element, factory);
+    return { id: "properties", label: "Properties", groups: [general] };
+  }
+  _formatTab(element, factory) {
+    const elementFormat = { id: "elementFormat", label: "Element format", entries: [] };
+    const labelFormat = { id: "labelFormat", label: "Label format", entries: [] };
+    const gridFormat = { id: "gridFormat", label: "Grid format", entries: [] };
+    nodeFormatProps(elementFormat, element, factory, this._icons);
+    linkFormatProps(elementFormat, element, factory);
+    labelFormatProps(labelFormat, element, factory);
+    gridFormatProps(gridFormat, element, factory);
+    return { id: "format", label: "Format", groups: [elementFormat, labelFormat, gridFormat] };
+  }
+};
+PfdnPropertiesProvider.$inject = ["icons", "entryFactory", "eventBus"];
+var pfdnPropertiesProviderModule = {
+  __init__: ["propertiesProvider"],
+  propertiesProvider: ["type", PfdnPropertiesProvider]
+};
+
+// src/properties-panel/PropertiesPanel.ts
+function fromHtml(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html.trim();
+  return template.content.firstElementChild;
+}
+var FORM_CONTROLS = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]);
+var _PropertiesPanel = class _PropertiesPanel {
+  constructor(sideTabsProvider, eventBus, propertiesProvider, diagramSettings, commandStack) {
+    this._entries = {};
+    this._container = null;
+    this._tabsEl = null;
+    this._contentsEl = null;
+    this._eventBus = eventBus;
+    this._propertiesProvider = propertiesProvider;
+    this._diagramSettings = diagramSettings;
+    this._commandStack = commandStack;
+    this._registerUpdatePropertiesCommand();
+    this._registerSideTab(sideTabsProvider);
+    this._registerSelectionListener();
+  }
+  /**
+   * Register the `element.updateProperties` command. Its apply logic is
+   * editor-specific (a property `scope` plus the provider's drawing update), so
+   * the panel — which owns both — registers it on the shared stack rather than
+   * the core modelling orchestrator.
+   */
+  _registerUpdatePropertiesCommand() {
+    const apply = (ctx, props) => {
+      ctx.scope.set(ctx.definition, props);
+      this._propertiesProvider.updateDrawing(ctx.definition);
+    };
+    this._commandStack.registerHandler("element.updateProperties", {
+      execute: (ctx) => apply(ctx, ctx.after),
+      revert: (ctx) => apply(ctx, ctx.before)
+    });
+  }
+  _registerSideTab(provider) {
+    provider.registerSideTab(
+      {
+        title: "Properties",
+        iconClassName: "icon-sliders",
+        action: { created: (content) => this._drawPanel(content) }
+      },
+      1
+    );
+  }
+  _registerSelectionListener() {
+    this._eventBus.on(
+      "selection.changed",
+      (oldSelection, newSelection) => {
+        let selected = this._diagramSettings;
+        if (newSelection.length === 1 && (oldSelection.length !== 1 || oldSelection[0].definition.id !== newSelection[0].definition.id)) {
+          selected = newSelection[0].definition;
+        }
+        this._update(selected);
+      }
+    );
+  }
+  _drawPanel(content) {
+    if (!content) {
+      return;
+    }
+    this._drawContainer(content);
+    this._update(this._diagramSettings);
+  }
+  _drawContainer(content) {
+    this._container = fromHtml(_PropertiesPanel.HTML_MARKUP);
+    content.insertBefore(this._container, content.firstChild);
+    this._tabsEl = this._container.querySelector(".tab-sheets");
+    this._contentsEl = this._container.querySelector(".pfdjs-pp-contents");
+    this._container.addEventListener("click", (event) => {
+      const tab = event.target.closest(".tab-sheet");
+      if (tab) {
+        this._selectTab(tab.getAttribute("data-tab-target"));
+        event.stopImmediatePropagation();
+      }
+    });
+    this._registerInputChangeHandlers();
+  }
+  _registerInputChangeHandlers() {
+    const container = this._container;
+    if (!container) {
+      return;
+    }
+    const debouncedApply = debounce((target) => this._applyChange(target), 300);
+    container.addEventListener("input", (event) => {
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+        debouncedApply(target);
+      }
+    });
+    container.addEventListener("change", (event) => {
+      const target = event.target;
+      if (FORM_CONTROLS.has(target.tagName)) {
+        this._applyChange(target);
+      }
+    });
+    this._eventBus.on(
+      "PropertiesPanel.propertyChanged",
+      (propertyId, definition) => this._applyChangeByProperty(propertyId, definition)
+    );
+  }
+  _applyChange(target) {
+    const entryId = target.getAttribute("name");
+    if (!entryId) {
+      return;
+    }
+    this._commit(entryId, target.value);
+  }
+  _applyChangeByProperty(propertyId, definition) {
+    this._commit(propertyId, deepGet(definition, propertyId));
+  }
+  _commit(entryId, newValue) {
+    const entry = this._entries[entryId];
+    if (!entry) {
+      return;
+    }
+    const after = {};
+    deepSet(after, entryId, newValue);
+    const before = {};
+    deepSet(before, entryId, deepGet(entry.definition, entryId));
+    this._commandStack.execute("element.updateProperties", {
+      scope: entry.scope,
+      definition: entry.definition,
+      before,
+      after
+    });
+  }
+  _selectTab(tabId) {
+    this._tabsEl?.querySelectorAll(".tab-sheet").forEach((tab) => {
+      tab.classList.toggle("tab-sheet-active", tab.getAttribute("data-tab-target") === tabId);
+    });
+    this._contentsEl?.querySelectorAll(".pfdjs-pp-content").forEach((content) => {
+      content.classList.toggle("open", content.getAttribute("data-tab-target") === tabId);
+    });
+  }
+  _update(definition) {
+    if (this._tabsEl && this._contentsEl) {
+      this._tabsEl.replaceChildren();
+      this._contentsEl.replaceChildren();
+    }
+    if (definition) {
+      this._drawEntries(definition);
+    }
+  }
+  _drawEntries(definition) {
+    if (!this._tabsEl || !this._contentsEl) {
+      return;
+    }
+    const tabs = this._propertiesProvider.getTabs(definition);
+    const renderedTabs = [];
+    this._entries = {};
+    for (const tab of tabs) {
+      const content = fromHtml(`<div class="pfdjs-pp-content" data-tab-target="${tab.id}"></div>`);
+      let tabHasContent = false;
+      for (const group of tab.groups) {
+        if (group.entries.length === 0) {
+          continue;
+        }
+        const groupContent = fromHtml(
+          `<div class="pfdjs-pp-content-group" data-group-target="${group.id}"><div class="tab-content-group-title">${group.label}</div></div>`
+        );
+        for (const entry of group.entries) {
+          const entryNode = fromHtml(`<div>${entry.html}</div>`);
+          groupContent.appendChild(entryNode);
+          this._entries[entry.id] = { scope: entry, definition, formNode: entryNode };
+        }
+        content.appendChild(groupContent);
+        tabHasContent = true;
+      }
+      if (tabHasContent) {
+        this._contentsEl.appendChild(content);
+        renderedTabs.push({ id: tab.id, label: tab.label });
+      }
+    }
+    Object.values(this._entries).forEach((entry) => entry.scope.get(entry.definition, entry.formNode));
+    let firstTab = null;
+    for (const tab of renderedTabs) {
+      firstTab ?? (firstTab = tab.id);
+      this._tabsEl.appendChild(
+        fromHtml(
+          `<li class="tab-sheet" data-tab-target="${tab.id}"><a href="#">${tab.label}</a></li>`
+        )
+      );
+    }
+    this._selectTab(firstTab);
+  }
+};
+_PropertiesPanel.$inject = [
+  "sideTabsProvider",
+  "eventBus",
+  "propertiesProvider",
+  "d3polytree.definitions.settings",
+  "commandStack"
+];
+_PropertiesPanel.HTML_MARKUP = '<div id="pfdjs-pp-container"><div class="pfdjs-pp-tabs"><ul class="tab-sheets"></ul></div><div class="pfdjs-pp-contents"></div></div>';
+var PropertiesPanel = _PropertiesPanel;
+
+// src/properties-panel/index.ts
+var propertiesPanelModule = {
+  __init__: ["propertiesPanel"],
+  propertiesPanel: ["type", PropertiesPanel]
+};
+
+// src/index.ts
 var INITIAL_DIAGRAM = '<?xml version="1.0" encoding="UTF-8"?><pfdn:diagram xmlns:pfdn="http://pfdn" xmlns="http://pfdn"><settings author="No Author" name="No Name Diagram" status="1"><zoom><offset x="0" y="0" /><scale>1</scale></zoom><grid /></settings><node id="node_1" label="label_1" status="1"><position x="20" y="100" /></node><label id="label_1" fontSize="12" isReadOnly="true" status="1"><position x="33" y="140" /><text>Node 1</text></label></pfdn:diagram>';
 var _Editor = class _Editor extends import_interactive_viewer.InteractiveViewer {
-  constructor() {
-    super(...arguments);
+  constructor(options = {}) {
+    super(options);
     /** The document a fresh editor opens with (used by {@link createDiagram}). */
     this.initialDiagram = INITIAL_DIAGRAM;
+    this._onKeydown = (event) => this._handleKeydown(event);
+    options.container?.addEventListener("keydown", this._onKeydown);
+  }
+  _handleKeydown(event) {
+    const target = event.target;
+    if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) {
+      return;
+    }
+    if (!this.getHost()) {
+      return;
+    }
+    const mod = event.ctrlKey || event.metaKey;
+    if (!mod) {
+      return;
+    }
+    const key = event.key.toLowerCase();
+    if (key === "z" && event.shiftKey) {
+      event.preventDefault();
+      this.redo();
+    } else if (key === "z") {
+      event.preventDefault();
+      this.undo();
+    } else if (key === "y") {
+      event.preventDefault();
+      this.redo();
+    }
+  }
+  /** Tear down the editor, removing the keyboard binding. */
+  destroy() {
+    this.options.container?.removeEventListener("keydown", this._onKeydown);
+    super.destroy();
   }
   /** (Re)open the initial diagram. */
   createDiagram() {
@@ -46,9 +557,16 @@ var _Editor = class _Editor extends import_interactive_viewer.InteractiveViewer
       ...import_viewer.Viewer.modules
     ];
   }
-  /** Create a node (and its associated label) at an optional position. */
+  /**
+   * Create a node (and its associated label) at an optional position.
+   *
+   * Routed through the command stack so it persists and is undoable (since B10
+   * the draw-layer `.created` event no longer persists on its own).
+   */
   createNode(parameters = {}) {
-    return this.get("modellingNodes").create(parameters);
+    const ctx = { className: "node", parameters: [parameters] };
+    this.get("commandStack").execute("element.create", ctx);
+    return ctx.created;
   }
   /** Select an element by definition (e.g. to prepare a delete). */
   select(definition) {
@@ -61,6 +579,22 @@ var _Editor = class _Editor extends import_interactive_viewer.InteractiveViewer
   deleteSelected() {
     this.get("selection").deleteSelected();
   }
+  /** Undo the last edit (a whole gesture is one step). No-op if nothing to undo. */
+  undo() {
+    this.get("commandStack").undo();
+  }
+  /** Redo the last undone edit. No-op if nothing to redo. */
+  redo() {
+    this.get("commandStack").redo();
+  }
+  /** Whether there is an edit to undo. */
+  canUndo() {
+    return this.get("commandStack").canUndo();
+  }
+  /** Whether there is an undone edit to redo. */
+  canRedo() {
+    return this.get("commandStack").canRedo();
+  }
 };
 /** Editing modules on top of the interaction layer. */
 _Editor.editionModules = [
@@ -73,14 +607,20 @@ _Editor.editionModules = [
   import_core.resizeElementModule,
   // the properties panel (registers a side tab; side-tabs + search-panel are
   // inherited from InteractiveViewer)
-  import_properties_panel.entryFactoryModule,
-  import_properties_panel.pfdnPropertiesProviderModule,
-  import_properties_panel.propertiesPanelModule
+  entryFactoryModule,
+  pfdnPropertiesProviderModule,
+  propertiesPanelModule
 ];
 var Editor = _Editor;
 var index_default = Editor;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Editor
+  Editor,
+  EntryFactory,
+  PfdnPropertiesProvider,
+  PropertiesPanel,
+  entryFactoryModule,
+  pfdnPropertiesProviderModule,
+  propertiesPanelModule
 });
 //# sourceMappingURL=index.cjs.map