@node-projects/web-component-designer-visualization-addons 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -27,3 +27,4 @@ export * from './services/PropertyGridDragDropService.js';
 export * from './services/ScriptRefactorService.js';
 export * from './services/SignalPropertyEditor.js';
 export * from './services/VisualizationEventsService.js';
+export * from "./components/ClassBindingsPropertyGridExtensionProvider.js";

package/dist/index.js

@@ -23,3 +23,4 @@ export * from './services/ScriptRefactorService.js';
 export * from './services/SignalPropertyEditor.js';
 export * from './services/VisualizationEventsService.js';
 //export * from './setupVisuService.js';
+export * from "./components/ClassBindingsPropertyGridExtensionProvider.js";

package/dist/services/VisualizationBindingsService.js

@@ -16,6 +16,7 @@ export class VisualizationBindingsService {
             expression: x[1].expression,
             expressionTwoWay: x[1].expressionTwoWay,
             converter: x[1].converter,
+            converters: x[1].converter,
             //type: x[1].type,
             type: VisualizationBindingsService.type,
             service: this,
@@ -44,6 +45,8 @@ export class VisualizationBindingsService {
         }
         bnd.target = binding.target;
         bnd.events = binding.changedEvents;
+        //@ts-ignore
+        bnd.writeBackSignal = binding.writeBackSignal;
         let serializedBnd = this._bindingsHelper.serializeBinding(designItem.element, binding.targetName, bnd);
         let group = designItem.openGroup('edit_binding');
         designItem.setAttribute(serializedBnd[0], serializedBnd[1]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

package/tests/BindingsHelper.test.ts

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import { beforeAll, describe, expect, test } from '@jest/globals';
+import { beforeAll, describe, expect, jest, test } from '@jest/globals';
 import type { SpecialValueHandler } from '../src/helpers/BindingsHelper.js';
 import type { VisualizationHandler, State } from '../src/interfaces/VisualizationHandler.js';
 import { BindingTarget } from '@node-projects/web-component-designer/dist/elements/item/BindingTarget.js';
@@ -316,6 +316,33 @@ describe('BindingsHelper runtime', () => {
     })).toEqual(['bind-prop:value', '{"signal":"source","converter":{"true":"yes"}}']);
   });
 
+  test('binding service preserves converters and write-back settings when a class binding is renamed', async () => {
+    const { BindingMode } = await import('@node-projects/web-component-designer/dist/elements/item/BindingMode.js');
+    const { PropertiesHelper } = await import('@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js');
+    jest.unstable_mockModule('@node-projects/web-component-designer', () => ({ BindingMode, BindingTarget, PropertiesHelper }));
+    const { VisualizationBindingsService } = await import('../src/services/VisualizationBindingsService.js');
+    const helper = new BindingsHelper(new TestVisualizationHandler());
+    const service = new VisualizationBindingsService(helper);
+    const element = document.createElement('div');
+    element.setAttribute('bind-class:is-active', JSON.stringify({ signal: 'source', converter: { true: true, false: false }, writeBackSignal: 'other', inverted: true }));
+    const item: any = {
+      element,
+      openGroup: () => ({ commit() { } }),
+      setAttribute: (name: string, value: string) => element.setAttribute(name, value),
+      removeAttribute: (name: string) => element.removeAttribute(name)
+    };
+    const binding = service.getBindings(item)[0];
+    expect(binding.converters).toEqual({ true: true, false: false });
+    service.setBinding(item, { ...binding, targetName: 'is-ready' });
+    service.clearBinding(item, 'is-active', BindingTarget.class);
+    const renamed = service.getBindings(item)[0];
+    expect(renamed.targetName).toBe('is-ready');
+    expect(renamed.converter).toEqual(binding.converter);
+    expect((renamed as any).writeBackSignal).toBe('other');
+    expect(renamed.invert).toBe(true);
+    expect(element.hasAttribute('bind-class:is-active')).toBe(false);
+  });
+
   test('coalesces bursts and skips identical primitive DOM and write-back updates', async () => {
     const handler = new TestVisualizationHandler();
     handler.values.set('sensor', 1);

package/tests/PropertyGridClassBindings.test.ts

@@ -0,0 +1,167 @@
+/** @jest-environment jsdom */
+import { afterEach, beforeAll, expect, jest, test } from '@jest/globals';
+import { BindingTarget } from '@node-projects/web-component-designer/dist/elements/item/BindingTarget.js';
+
+Object.defineProperty(window, 'matchMedia', { value: () => ({ matches: false }) });
+CSSStyleSheet.prototype.replaceSync = function () { };
+Object.defineProperty(ShadowRoot.prototype, 'adoptedStyleSheets', { writable: true, value: [] });
+Object.defineProperty(globalThis, 'ResizeObserver', { value: class { observe() { } disconnect() { } unobserve() { } } });
+Element.prototype.scrollTo = function () { };
+HTMLDialogElement.prototype.showModal = function () { this.open = true; };
+HTMLDialogElement.prototype.close = function () { this.open = false; this.dispatchEvent(new Event('close')); };
+
+let EditingDocument: typeof import('@node-projects/web-component-designer/dist/elements/EditingDocument.js').EditingDocument;
+let ServiceContainer: typeof import('@node-projects/web-component-designer/dist/elements/services/ServiceContainer.js').ServiceContainer;
+let DefaultHtmlParserService: typeof import('@node-projects/web-component-designer/dist/elements/services/htmlParserService/DefaultHtmlParserService.js').DefaultHtmlParserService;
+let HtmlWriterService: typeof import('@node-projects/web-component-designer/dist/elements/services/htmlWriterService/HtmlWriterService.js').HtmlWriterService;
+let DesignItemService: typeof import('@node-projects/web-component-designer/dist/elements/services/designItemService/DesignItemService.js').DesignItemService;
+let BindingService: typeof import('@node-projects/web-component-designer/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js').BaseCustomWebcomponentBindingsService;
+let ClassService: typeof import('../src/components/ClassBindingsPropertiesService').ClassBindingsPropertiesService;
+let ClassGrid: typeof import('../src/components/PropertyGridClassBindings').PropertyGridClassBindings;
+let PropertyList: typeof import('@node-projects/web-component-designer/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js').PropertyGridPropertyList;
+let CommonPropertiesService: typeof import('@node-projects/web-component-designer/dist/elements/services/propertiesService/services/CommonPropertiesService.js').CommonPropertiesService;
+let DefaultPropertyEditorTypesService: typeof import('@node-projects/web-component-designer/dist/elements/services/propertiesService/DefaultPropertyEditorTypesService.js').DefaultPropertyEditorTypesService;
+
+beforeAll(async () => {
+  ({ EditingDocument } = await import('@node-projects/web-component-designer/dist/elements/EditingDocument.js'));
+  ({ ServiceContainer } = await import('@node-projects/web-component-designer/dist/elements/services/ServiceContainer.js'));
+  ({ DefaultHtmlParserService } = await import('@node-projects/web-component-designer/dist/elements/services/htmlParserService/DefaultHtmlParserService.js'));
+  ({ HtmlWriterService } = await import('@node-projects/web-component-designer/dist/elements/services/htmlWriterService/HtmlWriterService.js'));
+  ({ DesignItemService } = await import('@node-projects/web-component-designer/dist/elements/services/designItemService/DesignItemService.js'));
+  ({ BaseCustomWebcomponentBindingsService: BindingService } = await import('@node-projects/web-component-designer/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js'));
+  ({ ClassBindingsPropertiesService: ClassService } = await import('../src/components/ClassBindingsPropertiesService'));
+  ({ PropertyGridClassBindings: ClassGrid } = await import('../src/components/PropertyGridClassBindings'));
+  ({ PropertyGridPropertyList: PropertyList } = await import('@node-projects/web-component-designer/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js'));
+  ({ CommonPropertiesService } = await import('@node-projects/web-component-designer/dist/elements/services/propertiesService/services/CommonPropertiesService.js'));
+  ({ DefaultPropertyEditorTypesService } = await import('@node-projects/web-component-designer/dist/elements/services/propertiesService/DefaultPropertyEditorTypesService.js'));
+});
+
+afterEach(() => document.body.replaceChildren());
+
+async function fixture(html = '<button class="button primary" class:is-active="[[isActive]]">Submit</button>') {
+  const services = new ServiceContainer();
+  services.register('designItemService', new DesignItemService());
+  services.register('htmlParserService', new DefaultHtmlParserService());
+  services.register('htmlWriterService', new HtmlWriterService());
+  services.register('bindingService', new BindingService());
+  services.register('propertyEditorTypesService', new DefaultPropertyEditorTypesService());
+  services.config.demoViewWidget = null;
+  const doc = new EditingDocument(services);
+  await doc.loadHtml(html);
+  const item = doc.rootDesignItem.firstChild;
+  return { services, doc, item, bindingService: services.bindingService };
+}
+
+test('renames and removes class bindings as individual undoable operations', async () => {
+  const { doc, item } = await fixture();
+  const service = new ClassService();
+  const binding = service.getBindings(item)[0];
+  service.rename(item, binding, 'is-ready');
+  expect(item.hasAttribute('class:is-active')).toBe(false);
+  expect(item.getAttribute('class:is-ready')).toBe('[[isActive]]');
+  doc.instanceServiceContainer.undoService.undo();
+  expect(item.getAttribute('class:is-active')).toBe('[[isActive]]');
+  expect(item.hasAttribute('class:is-ready')).toBe(false);
+  doc.instanceServiceContainer.undoService.redo();
+  service.remove(item, service.getBindings(item)[0]);
+  expect(service.getBindings(item)).toHaveLength(0);
+  doc.instanceServiceContainer.undoService.undo();
+  expect(item.getAttribute('class:is-ready')).toBe('[[isActive]]');
+  expect(item.getAttribute('class')).toBe('button primary');
+  await doc.dispose();
+});
+
+test('validates lowercase HTML-safe names and rejects duplicate targets', async () => {
+  const { doc, item } = await fixture();
+  const service = new ClassService();
+  for (const name of ['', 'myClassName', 'two classes', 'bad"name', 'bad=name', 'bad/name'])
+    expect(service.validateName(item, name)).toBeTruthy();
+  expect(service.validateName(item, 'is-active')).toContain('already');
+  expect(service.validateName(item, 'is-active', 'is-active')).toBeNull();
+  expect(service.validateName(item, 'has-error')).toBeNull();
+  await doc.dispose();
+});
+
+test('source-created bindings appear under class and open the host editor with a class target', async () => {
+  const { services, doc, item } = await fixture();
+  const openEditor = jest.fn(async () => { });
+  services.config.openBindingsEditor = openEditor;
+  const { ClassBindingsPropertyGridExtensionProvider } = await import('../src/components/ClassBindingsPropertyGridExtensionProvider');
+  services.propertyGridExtensions.push(new ClassBindingsPropertyGridExtensionProvider());
+  const list = new PropertyList(services);
+  document.body.appendChild(list);
+  list.setPropertiesService(new CommonPropertiesService());
+  await list.createElements(item);
+  list.designItemsChanged([item]);
+  const section = list.shadowRoot.querySelector('node-projects-property-grid-class-bindings') as InstanceType<typeof ClassGrid>;
+  expect(section.previousElementSibling.querySelector('.editor-control').id).toBe('class');
+  expect(section.shadowRoot.textContent).toContain('is-active');
+  (section.shadowRoot.querySelector('.name') as HTMLButtonElement).click();
+  await Promise.resolve();
+  expect(openEditor).toHaveBeenCalledWith(expect.objectContaining({ name: 'is-active', type: 'boolean' }), [item], expect.objectContaining({ targetName: 'is-active' }), BindingTarget.class);
+  await doc.dispose();
+});
+
+test('addition asks only for a class name then delegates to the configured binding editor', async () => {
+  const { services, doc, item } = await fixture();
+  const openEditor = jest.fn(async () => {});
+  services.config.openBindingsEditor = openEditor;
+  const grid = new ClassGrid();
+  document.body.appendChild(grid);
+  grid.refresh([item]);
+  grid.addBinding();
+  const form = grid.shadowRoot.querySelector('form');
+  expect(form.querySelectorAll('input')).toHaveLength(1);
+  (form.querySelector('input') as HTMLInputElement).value = 'is-busy';
+  form.dispatchEvent(new Event('submit', { cancelable: true }));
+  await Promise.resolve();
+  expect(openEditor).toHaveBeenCalledWith(expect.objectContaining({ name: 'is-busy', type: 'boolean' }), [item], undefined, BindingTarget.class);
+  expect(item.hasAttribute('class:is-busy')).toBe(false);
+  await doc.dispose();
+});
+
+test('canceling addition leaves the document unchanged and multiple selection disables addition', async () => {
+  const { services, doc, item } = await fixture();
+  services.config.openBindingsEditor = async () => {};
+  const original = await doc.serialize();
+  const grid = new ClassGrid();
+  document.body.appendChild(grid);
+  grid.refresh([item]);
+  grid.addBinding();
+  (grid.shadowRoot.querySelector('.actions button[type="button"]') as HTMLButtonElement).click();
+  expect(await doc.serialize()).toBe(original);
+  grid.refresh([item, item]);
+  expect((grid.shadowRoot.querySelector('[aria-label="Add class binding"]') as HTMLButtonElement).disabled).toBe(true);
+  expect(grid.shadowRoot.textContent).toContain('Select one element');
+  await doc.dispose();
+});
+
+test('failed renames roll back the new attribute instead of leaving two bindings', async () => {
+  const { doc, item, bindingService } = await fixture();
+  const service = new ClassService();
+  const clear = jest.spyOn(bindingService, 'clearBinding').mockReturnValue(false);
+  expect(() => service.rename(item, service.getBindings(item)[0], 'is-ready')).toThrow('previous binding');
+  expect(item.hasAttribute('class:is-ready')).toBe(false);
+  expect(item.getAttribute('class:is-active')).toBe('[[isActive]]');
+  clear.mockRestore();
+  await doc.dispose();
+});
+
+test('editing after a source refresh uses changed binding options even if the summary is unchanged', async () => {
+  const { services, doc, item, bindingService } = await fixture();
+  const binding = bindingService.getBindings(item)[0];
+  let invert = false;
+  const read = jest.spyOn(bindingService, 'getBindings').mockImplementation(() => [{ ...binding, invert }]);
+  const openEditor = jest.fn(async () => { });
+  services.config.openBindingsEditor = openEditor;
+  const grid = new ClassGrid();
+  document.body.appendChild(grid);
+  grid.refresh([item]);
+  invert = true;
+  grid.refresh([item]);
+  (grid.shadowRoot.querySelector('.name') as HTMLButtonElement).click();
+  await Promise.resolve();
+  expect(openEditor).toHaveBeenCalledWith(expect.anything(), [item], expect.objectContaining({ invert: true }), BindingTarget.class);
+  read.mockRestore();
+  await doc.dispose();
+});