update demo

Author: jogibear9988

package-lock.json

@@ -25,10 +25,10 @@
     "@adobe/css-tools": "4.3.3",
     "@doubletrade/lit-datepicker": "^1.0.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@node-projects/base-custom-webcomponent": "0.26.1",
+    "@node-projects/base-custom-webcomponent": "0.27.6",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.2.0",
-    "@node-projects/web-component-designer": "^0.1.137",
+    "@node-projects/web-component-designer": "^0.1.146",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.26",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.10",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.4",

package.json

@@ -1,4 +1,4 @@
-import { NpmPackageLoader, BaseCustomWebcomponentBindingsService, JsonFileElementsService, PropertyGrid, DocumentContainer, CopyPasteAsJsonService, DebugView, UnkownElementsPropertiesService, sleep, RefactorView, BindingsRefactorService, TextRefactorService, SeperatorContextMenu, IDesignItem, DomConverter } from '@node-projects/web-component-designer';
+import { NpmPackageLoader, BaseCustomWebcomponentBindingsService, JsonFileElementsService, DocumentContainer, CopyPasteAsJsonService, DebugView, UnkownElementsPropertiesService, sleep, RefactorView, BindingsRefactorService, TextRefactorService, SeperatorContextMenu, IDesignItem, DomConverter, PropertyGridWithHeader, DesignItem, ValueType } from '@node-projects/web-component-designer';
 import createDefaultServiceContainer from '@node-projects/web-component-designer/dist/elements/services/DefaultServiceBootstrap.js';
 
 import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser';
@@ -46,7 +46,7 @@ export class AppShell extends BaseCustomWebComponentConstructorAppend {
   private _dockManager: DockManager;
   _paletteTree: PaletteTreeView;
   _bindableObjectsBrowser: BindableObjectsBrowser
-  _propertyGrid: PropertyGrid;
+  _propertyGrid: PropertyGridWithHeader;
   _debugView: DebugView;
   _treeViewExtended: TreeViewExtended;
   _styleEditor: StyleEditor;
@@ -188,7 +188,7 @@ export class AppShell extends BaseCustomWebComponentConstructorAppend {
     this._bindableObjectsBrowser = this._getDomElement<BindableObjectsBrowser>('bindableObjectsBrowser');
     this._treeViewExtended = this._getDomElement<TreeViewExtended>('treeViewExtended');
     this._refactorView = this._getDomElement<RefactorView>('refactorView');
-    this._propertyGrid = this._getDomElement<PropertyGrid>('propertyGrid');
+    this._propertyGrid = this._getDomElement<PropertyGridWithHeader>('propertyGrid');
     this._debugView = this._getDomElement<DebugView>('debugView');
     this._styleEditor = this._getDomElement<StyleEditor>('styleEditor');
 
@@ -272,13 +272,83 @@ export class AppShell extends BaseCustomWebComponentConstructorAppend {
 
     await this._setupServiceContainer();
     this._bindableObjectsBrowser.initialize(serviceContainer);
+    //@ts-ignore
+    this._propertyGrid.propertyGrid.propertyGroupHover = (group) => group.properties?.[0]?.styleDeclaration;
+    this._propertyGrid.propertyGrid.propertyContextMenuProvider = (designItems, property) => {
+      const ctxMenuItems = property.service.getContextMenu(designItems, property);
+      if (property.service.isSet(designItems, property) == ValueType.fromStylesheet) {
+        ctxMenuItems.push(...[
+          { title: '-' },
+          {
+            title: 'jump to declaration', action: () => {
+              //@ts-ignore
+              let styleDeclaration = property.styleDeclaration;
+              if (!styleDeclaration)
+                styleDeclaration = designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).find(x => x.name == property.name);
+              if (styleDeclaration)
+                //@ts-ignore
+                this.jumpToCss(styleDeclaration.ast, styleDeclaration.stylesheet);
+            }
+          }
+        ]);
+      };
+      return ctxMenuItems;
+    }
+    this._propertyGrid.propertyGrid.propertyGroupClick = (group, mode) => {
+      //@ts-ignore
+      if (group.properties?.[0]?.styleDeclaration?.ast?.parent)
+        //@ts-ignore
+        this.jumpToCss(group.properties?.[0]?.styleDeclaration?.ast?.parent, group.properties?.[0]?.styleDeclaration?.stylesheet);
+      //}
+    };
 
     this.newDocument(false, code, style);
 
     await sleep(200)
     this.activateDockById('treeUpper');
   }
 
+  private jumpToCss(styleDeclaration, stylesheet) {
+    //@ts-ignore
+    const line = styleDeclaration.position?.start?.line;
+    //@ts-ignore
+    const column = styleDeclaration.position?.start?.column;
+    //@ts-ignore
+    const lineEnd = styleDeclaration.position?.end?.line;
+    //@ts-ignore
+    const columnEnd = styleDeclaration.position?.end?.column;
+    //@ts-ignore
+    if (stylesheet?.designItem) {
+      //@ts-ignore
+      const di: DesignItem = stylesheet?.designItem;
+      let switched = false;
+      if (di.instanceServiceContainer.documentContainer.currentView != 'code' &&
+        di.instanceServiceContainer.documentContainer.currentView != 'split') {
+        switched = true;
+        di.instanceServiceContainer.documentContainer.currentView = 'split';
+      }
+
+      setTimeout(() => {
+        let startPos = column;
+        let endPos = columnEnd;
+        //@ts-ignore
+        const cssCode: string = stylesheet?.content;
+        const lines = cssCode.split('\n')
+        for (let n = 0; n < lineEnd - 1; n++) {
+          if (n < line - 1)
+            startPos += lines[n].length + 1;
+          endPos += lines[n].length + 1;
+        }
+        const selectionPosition = di.instanceServiceContainer.designItemDocumentPositionService.getPosition(di);
+        //TODO: style tag could contain attributes
+        const styleLength = '<style>'.length
+        di.instanceServiceContainer.documentContainer.codeView.setSelection({ start: startPos + styleLength + selectionPosition.start - 1, length: endPos - startPos });
+      }, switched ? 250 : 0);
+    } else {
+      this._styleEditor.showLine(line, column, lineEnd, columnEnd);
+    }
+  }
+
   private async _setupServiceContainer() {
     serviceContainer.register('elementsService', new JsonFileElementsService('demo', './dist/elements-demo.json'));
     serviceContainer.register('elementsService', new JsonFileElementsService('native', rootDir + '/node_modules/@node-projects/web-component-designer/config/elements-native.json'));

src/appShell.ts

@@ -1,9 +1,9 @@
-import { IProperty, IPropertiesService, IDesignItem, PropertyType, IBinding } from '@node-projects/web-component-designer';
+import { IProperty, IDesignItem, PropertyType, IBinding, AbstractPropertiesService } from '@node-projects/web-component-designer';
 import { BindingTarget } from '@node-projects/web-component-designer/dist/elements/item/BindingTarget';
 import { RefreshMode } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/IPropertiesService';
 import { ValueType } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/ValueType';
 
-export class CustomPropertiesService implements IPropertiesService {
+export class CustomPropertiesService extends AbstractPropertiesService {
   getRefreshMode(designItem: IDesignItem) {
     return RefreshMode.full;
   }
@@ -31,6 +31,7 @@ export class CustomPropertiesService implements IPropertiesService {
   }
   getValue(designItems: IDesignItem[], property: IProperty) {
     // throw new Error("Method not implemented.");
+    return null;
   }
 
   name: string = "custom";

src/services/customPropertiesService.ts

@@ -94,6 +94,12 @@ export class StyleEditor extends BaseCustomWebComponentConstructorAppend {
     delete() {
         this._editor.trigger('', 'editor.action.clipboardDeleteAction', null)
     }
+
+    public showLine(line: number, column: number, lineEnd: number, columnEnd: number) {
+        this._editor.setSelection({ startLineNumber: line, startColumn: column, endLineNumber: lineEnd, endColumn: columnEnd });
+        //@ts-ignore
+        this._editor.revealRangeAtTop(new monaco.Range(line, column, lineEnd, columnEnd), 1);
+    }
 }
 
 customElements.define('node-projects-style-editor', StyleEditor);