@node-projects/web-component-designer 0.1.286 → 0.1.287

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -203,7 +203,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                 if (p.propertyType != PropertyType.complex)
                     rectContainer.appendChild(rect);
                 this._div.appendChild(rectContainer);
-                if (p.readonly === true) {
+                if (p.readonly !== true) {
                     rect.oncontextmenu = (event) => {
                         event.preventDefault();
                         this.openContextMenu(event, p);

package/dist/index-min.js

@@ -1182,7 +1182,7 @@ declare global {
       outline-offset: -2px;
     }
     `}constructor(e){super(),this._restoreCachedInititalValues(),this._serviceContainer=e,this._div=document.createElement("div"),this._div.className="content-wrapper",this.shadowRoot.appendChild(this._div)}setPropertiesService(e){this._propertiesService!=e&&(this._propertiesService=e,Jh.removeAllChildnodes(this._div),this._propertyMap.clear())}async createElements(e){if(this._propertiesService&&this._propertiesService.getRefreshMode(e)!==G.none&&(this._propertiesService.getRefreshMode(e)!==G.fullOnClassChange||this._lastClassType!==e.element.constructor)||this._propertyMap.size==0){if(this._lastClassType=e.element.constructor,Jh.removeAllChildnodes(this._div),this._propertyMap.clear(),this._propertiesService){let t=await this._propertiesService.getProperties(e);if(t?.length)return"properties"in t[0]?this.createPropertyGroups(t):this.createPropertyEditors(t),!0}return!1}return!0}createPropertyGroups(e){for(let t of e){let i=document.createElement("span");i.innerHTML=t.name.replaceAll(`
-`,"<br>"),i.className="group-header",this._div.appendChild(i);let r=document.createElement("span");r.innerHTML=t.description??"",r.className="group-desc",this.propertyGroupHover&&(i.onmouseenter=()=>{this.propertyGroupHover(t,"name")?i.setAttribute("clickable",""):i.removeAttribute("clickable")},i.onclick=()=>{this.propertyGroupClick&&this.propertyGroupClick(t,"name")},r.onmouseenter=()=>{this.propertyGroupHover(t,"desc")?r.setAttribute("clickable",""):r.removeAttribute("clickable")},r.onclick=()=>{this.propertyGroupClick&&this.propertyGroupClick(t,"desc")}),this._div.appendChild(r),this.createPropertyEditors(t.properties)}}createPropertyEditors(e){for(let t of e){let i;if(t.createEditor?i=t.createEditor(t):i=this._serviceContainer.forSomeServicesTillResult("editorTypesService",r=>r.getEditorForProperty(t)),i){let r=document.createElement("div");r.style.width="20px",r.style.height="20px",r.style.display="flex",r.style.alignItems="center";let n=document.createElement("div");if(n.style.width="7px",n.style.height="7px",n.style.border="1px white solid",n.style.cursor="pointer",t.propertyType!=y.complex&&r.appendChild(n),this._div.appendChild(r),t.readonly===!0&&(n.oncontextmenu=o=>{o.preventDefault(),this.openContextMenu(o,t)},n.onclick=o=>{o.preventDefault(),this.openContextMenu(o,t)}),t.type=="addNew"){let o=i.element;o.disabled=!0,o.id="addNew_input_"+ ++this._addCounter;let a=document.createElement("input");if(a.value=t.name,a.type="text",a.id="addNew_label_"+this._addCounter,a.onkeyup=l=>{l.key=="Enter"&&a.value&&(t.name=a.value,a.disabled=!0,o.disabled=!1,o.focus())},t.service.getPropertyNameSuggestions){let l=t.service.getPropertyNameSuggestions(null),c=document.createElement("datalist");c.id="addNew_"+this._addCounter+"_datalist";for(let h of l){let d=document.createElement("option");d.value=h,c.append(d)}this._div.appendChild(c),a.setAttribute("list",c.id)}this._div.appendChild(a)}else if(t.renamable){let o=document.createElement("input");o.id="label_"+t.name;let a=i.element;o.value=t.name,o.onkeyup=async l=>{if(l.key=="Enter"&&o.value){let c=this._designItems[0].openGroup("rename property name from '"+t.name+"' to '"+o.value+"'");t.service.clearValue(this._designItems,t,"all"),t.name=o.value,await t.service.setValue(this._designItems,t,a.value),c.commit(),this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems)}},this._div.appendChild(o)}else{let o=document.createElement("label");o.htmlFor=t.name,o.textContent=t.name,o.title=t.description??t.name+" (type: "+t.type+(t.defaultValue?", default: "+t.defaultValue:"")+", propertytype: "+t.propertyType+")",o.ondragleave=a=>this._onDragLeave(a,t,o),o.ondragover=a=>this._onDragOver(a,t,o),o.ondrop=a=>this._onDrop(a,t,o),this._div.appendChild(o)}t.name&&(i.element.id=t.name),this._div.appendChild(i.element),this._propertyMap.set(t,{isSetElement:n,editor:i})}}}_onDragLeave(e,t,i){e.preventDefault(),i.classList.remove("dragOverProperty")}_onDragOver(e,t,i){if(e.preventDefault(),e.dataTransfer.types.indexOf(wt)>=0){let o=this._serviceContainer.bindableObjectDragDropService;if(o){let a=o.dragOverOnProperty(e,t,this._designItems);(a??"none")!="none"?(i.classList.add("dragOverProperty"),e.dataTransfer.dropEffect=a):i.classList.remove("dragOverProperty")}}if(e.dataTransfer.types.indexOf(Zo)>=0){let o=this._serviceContainer.propertyGridDragDropService;if(o){let a=o.dragOverOnProperty(e,t,this._designItems);(a??"none")!="none"?(i.classList.add("dragOverProperty"),e.dataTransfer.dropEffect=a):i.classList.remove("dragOverProperty")}}}_onDrop(e,t,i){e.preventDefault(),i.classList.remove("dragOverProperty");let r=e.dataTransfer.getData(wt);if(r){let o=JSON.parse(r),a=this._serviceContainer.bindableObjectDragDropService;a&&a.dropOnProperty(e,t,o,this._designItems)}let n=e.dataTransfer.getData(Zo);if(n){let o=JSON.parse(n),a=this._serviceContainer.propertyGridDragDropService;a&&a.dropOnProperty(e,t,o,this._designItems)}}openContextMenu(e,t){let i;this.propertyContextMenuProvider&&(i=this.propertyContextMenuProvider(this._designItems,t)),i||(i=t.service.getContextMenu(this._designItems,t)),le.show(i,e)}designItemsChanged(e){this._designItems=e;for(let t of this._propertyMap)t[1].editor.designItemsChanged(e)}refreshForDesignItems(e){for(let t of this._propertyMap)s.refreshIsSetElementAndEditorForDesignItems(t[1].isSetElement,t[0],e,this._propertiesService,t[1].editor)}static refreshIsSetElementAndEditorForDesignItems(e,t,i,r,n){if(i&&i.length){let o=r.isSet(i,t),a=r.getValue(i,t);e.title=t.name+": "+o,o==V.none?(e.style.background="",a=r.getUnsetValue(i,t)):o==V.all?e.style.background="white":o==V.some?e.style.background="gray":o==V.bound?e.style.background="orange":o==V.fromStylesheet&&(a=r.getUnsetValue(i,t),e.style.background="yellow"),n?.refreshValueWithoutNotification(o,a)}else e.style.background=""}};customElements.define("node-projects-property-grid-property-list",we);te();import{BaseCustomWebComponentLazyAppend as cm,css as hm}from"@node-projects/base-custom-webcomponent";var Rc=class extends cm{_serviceContainer;_designerTabControl;_selectedItems;_propertyGridPropertyLists;_propertyGridPropertyListsDict;_itemsObserver;_nodeReplacedCb;_instanceServiceContainer;_selectionChangedHandler;propertyGroupHover;propertyGroupClick;propertyContextMenuProvider;static style=hm`
+`,"<br>"),i.className="group-header",this._div.appendChild(i);let r=document.createElement("span");r.innerHTML=t.description??"",r.className="group-desc",this.propertyGroupHover&&(i.onmouseenter=()=>{this.propertyGroupHover(t,"name")?i.setAttribute("clickable",""):i.removeAttribute("clickable")},i.onclick=()=>{this.propertyGroupClick&&this.propertyGroupClick(t,"name")},r.onmouseenter=()=>{this.propertyGroupHover(t,"desc")?r.setAttribute("clickable",""):r.removeAttribute("clickable")},r.onclick=()=>{this.propertyGroupClick&&this.propertyGroupClick(t,"desc")}),this._div.appendChild(r),this.createPropertyEditors(t.properties)}}createPropertyEditors(e){for(let t of e){let i;if(t.createEditor?i=t.createEditor(t):i=this._serviceContainer.forSomeServicesTillResult("editorTypesService",r=>r.getEditorForProperty(t)),i){let r=document.createElement("div");r.style.width="20px",r.style.height="20px",r.style.display="flex",r.style.alignItems="center";let n=document.createElement("div");if(n.style.width="7px",n.style.height="7px",n.style.border="1px white solid",n.style.cursor="pointer",t.propertyType!=y.complex&&r.appendChild(n),this._div.appendChild(r),t.readonly!==!0&&(n.oncontextmenu=o=>{o.preventDefault(),this.openContextMenu(o,t)},n.onclick=o=>{o.preventDefault(),this.openContextMenu(o,t)}),t.type=="addNew"){let o=i.element;o.disabled=!0,o.id="addNew_input_"+ ++this._addCounter;let a=document.createElement("input");if(a.value=t.name,a.type="text",a.id="addNew_label_"+this._addCounter,a.onkeyup=l=>{l.key=="Enter"&&a.value&&(t.name=a.value,a.disabled=!0,o.disabled=!1,o.focus())},t.service.getPropertyNameSuggestions){let l=t.service.getPropertyNameSuggestions(null),c=document.createElement("datalist");c.id="addNew_"+this._addCounter+"_datalist";for(let h of l){let d=document.createElement("option");d.value=h,c.append(d)}this._div.appendChild(c),a.setAttribute("list",c.id)}this._div.appendChild(a)}else if(t.renamable){let o=document.createElement("input");o.id="label_"+t.name;let a=i.element;o.value=t.name,o.onkeyup=async l=>{if(l.key=="Enter"&&o.value){let c=this._designItems[0].openGroup("rename property name from '"+t.name+"' to '"+o.value+"'");t.service.clearValue(this._designItems,t,"all"),t.name=o.value,await t.service.setValue(this._designItems,t,a.value),c.commit(),this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems)}},this._div.appendChild(o)}else{let o=document.createElement("label");o.htmlFor=t.name,o.textContent=t.name,o.title=t.description??t.name+" (type: "+t.type+(t.defaultValue?", default: "+t.defaultValue:"")+", propertytype: "+t.propertyType+")",o.ondragleave=a=>this._onDragLeave(a,t,o),o.ondragover=a=>this._onDragOver(a,t,o),o.ondrop=a=>this._onDrop(a,t,o),this._div.appendChild(o)}t.name&&(i.element.id=t.name),this._div.appendChild(i.element),this._propertyMap.set(t,{isSetElement:n,editor:i})}}}_onDragLeave(e,t,i){e.preventDefault(),i.classList.remove("dragOverProperty")}_onDragOver(e,t,i){if(e.preventDefault(),e.dataTransfer.types.indexOf(wt)>=0){let o=this._serviceContainer.bindableObjectDragDropService;if(o){let a=o.dragOverOnProperty(e,t,this._designItems);(a??"none")!="none"?(i.classList.add("dragOverProperty"),e.dataTransfer.dropEffect=a):i.classList.remove("dragOverProperty")}}if(e.dataTransfer.types.indexOf(Zo)>=0){let o=this._serviceContainer.propertyGridDragDropService;if(o){let a=o.dragOverOnProperty(e,t,this._designItems);(a??"none")!="none"?(i.classList.add("dragOverProperty"),e.dataTransfer.dropEffect=a):i.classList.remove("dragOverProperty")}}}_onDrop(e,t,i){e.preventDefault(),i.classList.remove("dragOverProperty");let r=e.dataTransfer.getData(wt);if(r){let o=JSON.parse(r),a=this._serviceContainer.bindableObjectDragDropService;a&&a.dropOnProperty(e,t,o,this._designItems)}let n=e.dataTransfer.getData(Zo);if(n){let o=JSON.parse(n),a=this._serviceContainer.propertyGridDragDropService;a&&a.dropOnProperty(e,t,o,this._designItems)}}openContextMenu(e,t){let i;this.propertyContextMenuProvider&&(i=this.propertyContextMenuProvider(this._designItems,t)),i||(i=t.service.getContextMenu(this._designItems,t)),le.show(i,e)}designItemsChanged(e){this._designItems=e;for(let t of this._propertyMap)t[1].editor.designItemsChanged(e)}refreshForDesignItems(e){for(let t of this._propertyMap)s.refreshIsSetElementAndEditorForDesignItems(t[1].isSetElement,t[0],e,this._propertiesService,t[1].editor)}static refreshIsSetElementAndEditorForDesignItems(e,t,i,r,n){if(i&&i.length){let o=r.isSet(i,t),a=r.getValue(i,t);e.title=t.name+": "+o,o==V.none?(e.style.background="",a=r.getUnsetValue(i,t)):o==V.all?e.style.background="white":o==V.some?e.style.background="gray":o==V.bound?e.style.background="orange":o==V.fromStylesheet&&(a=r.getUnsetValue(i,t),e.style.background="yellow"),n?.refreshValueWithoutNotification(o,a)}else e.style.background=""}};customElements.define("node-projects-property-grid-property-list",we);te();import{BaseCustomWebComponentLazyAppend as cm,css as hm}from"@node-projects/base-custom-webcomponent";var Rc=class extends cm{_serviceContainer;_designerTabControl;_selectedItems;_propertyGridPropertyLists;_propertyGridPropertyListsDict;_itemsObserver;_nodeReplacedCb;_instanceServiceContainer;_selectionChangedHandler;propertyGroupHover;propertyGroupClick;propertyContextMenuProvider;static style=hm`
     :host {
       display: block;
       height: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.286",
+  "version": "0.1.287",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",