Deploying to gh-pages from @ 3b019c6 🚀

Author: jogibear9988

assets/icons/p2p.svg

@@ -1,7 +1,6 @@
-import { WebRtcMultiplayerServer } from '@node-projects/web-component-designer-webrtc-multiplayer';
-//import { UndoRedoGraph } from './UndoRedoGraph.js';
-let multiplayer = null;
-;
+import { ContextMenu } from '@node-projects/web-component-designer';
+//Command Handling..
+// Setup commands
 export class CommandHandling {
     dockManager;
     appShell;
@@ -15,40 +14,11 @@ export class CommandHandling {
         let commandName = button.dataset['command'];
         let commandParameter = button.dataset['commandParameter'];
         if (commandName === 'new')
-            this.appShell.newDocument(null, null, false);
-        else if (commandName === 'newIframe')
-            this.appShell.newDocument(null, null, true);
+            this.appShell.newDocument(false);
+        else if (commandName === 'newFixedWidth')
+            this.appShell.newDocument(true);
         else if (commandName === 'github')
             window.location.href = 'https://github.com/node-projects/web-component-designer';
-        else if (commandName === 'startServer') {
-            if (!multiplayer) {
-                multiplayer = new WebRtcMultiplayerServer();
-                multiplayer.useBroadcast();
-                multiplayer.startServer();
-            }
-        }
-        else if (commandName === 'connectClient') {
-            if (!multiplayer) {
-                multiplayer = new WebRtcMultiplayerServer();
-                multiplayer.useBroadcast();
-                //multiplayer.startClient();
-            }
-        }
-        else if (commandName === 'redo' && e.shiftKey) {
-            const target = this.dockManager.activeDocument.resolvedElementContent;
-            if (target) {
-                /*const redos = Array.from(target.instanceServiceContainer.undoService.getRedoEntries());
-                let undoRedoGraph = new UndoRedoGraph(target.instanceServiceContainer.undoService);
-                undoRedoGraph.render(redos);
-                undoRedoGraph.style.left = e.x + 'px';
-                undoRedoGraph.style.top = e.y + 'px';
-                undoRedoGraph.style.width = 'auto';
-                undoRedoGraph.style.height = 'auto';
-                undoRedoGraph.style.zIndex = '9';
-                undoRedoGraph.style.position = 'absolute';
-                document.body.appendChild(undoRedoGraph);*/
-            }
-        }
         else if (this.dockManager.activeDocument) {
             let target = this.dockManager.activeDocument.resolvedElementContent;
             if (target.executeCommand) {
@@ -59,7 +29,7 @@ export class CommandHandling {
     handleCommandButtonMouseHold(button, e) {
         let commandName = button.dataset['command'];
         let commandParameter = button.dataset['commandParameter'];
-        let target = this.dockManager.activeDocument?.resolvedElementContent;
+        let target = this.dockManager.activeDocument.resolvedElementContent;
         target.executeCommand({ type: ('hold' + commandName[0].toUpperCase() + commandName.substring(1)), parameter: commandParameter, event: e });
     }
     handleInputValueChanged(e) {
@@ -76,24 +46,63 @@ export class CommandHandling {
     init(serviceContainer) {
         let buttons = Array.from(document.querySelectorAll('[data-command]'));
         buttons.forEach(b => {
-            let mouseDownTimer = null;
-            b.addEventListener('mousedown', (e) => {
-                mouseDownTimer = setTimeout(() => {
-                    this.handleCommandButtonMouseHold(b, e);
-                    mouseDownTimer = false;
-                }, 300);
-            });
-            b.addEventListener('click', (e) => {
-                if (mouseDownTimer !== false)
-                    this.handleCommandButtonClick(e);
-            });
-            b.addEventListener('mouseup', (e) => {
-                if (mouseDownTimer) {
-                    clearTimeout(mouseDownTimer);
-                    mouseDownTimer = null;
-                }
-            });
+            if (b instanceof HTMLButtonElement) {
+                b.onclick = (e) => this.handleCommandButtonClick(e);
+                let mouseDownTimer = null;
+                b.onmousedown = (e) => {
+                    mouseDownTimer = setTimeout(() => {
+                        this.handleCommandButtonMouseHold(b, e);
+                    }, 300);
+                };
+                b.onmouseup = (e) => {
+                    if (mouseDownTimer) {
+                        clearTimeout(mouseDownTimer);
+                        mouseDownTimer = null;
+                    }
+                };
+            }
+            else {
+                b.onchange = (e) => this.handleInputValueChanged(e);
+                let commandName = b.dataset['command'];
+                if (commandName == 'setStrokeColor')
+                    serviceContainer.globalContext.onStrokeColorChanged.on(e => b.value = e.newValue);
+                if (commandName == 'setFillBrush')
+                    serviceContainer.globalContext.onFillBrushChanged.on(e => b.value = e.newValue);
+            }
         });
+        let undoButton = document.querySelector('[data-command="undo"]');
+        let mouseDownTimer = null;
+        undoButton.onmousedown = (e) => {
+            mouseDownTimer = setTimeout(() => {
+                let target = this.dockManager.activeDocument.resolvedElementContent;
+                let entries = target.instanceServiceContainer.undoService.getUndoEntries(20);
+                let mnu = Array.from(entries).map((x, idx) => ({ title: 'undo: ' + x, action: () => { for (let i = 0; i <= idx; i++)
+                        target.instanceServiceContainer.undoService.undo(); } }));
+                ContextMenu.show(mnu, e, { mode: 'undo' });
+            }, 300);
+        };
+        undoButton.onmouseup = (e) => {
+            if (mouseDownTimer) {
+                clearTimeout(mouseDownTimer);
+                mouseDownTimer = null;
+            }
+        };
+        let redoButton = document.querySelector('[data-command="redo"]');
+        redoButton.onmousedown = (e) => {
+            mouseDownTimer = setTimeout(() => {
+                let target = this.dockManager.activeDocument.resolvedElementContent;
+                let entries = target.instanceServiceContainer.undoService.getRedoEntries(20);
+                let mnu = Array.from(entries).map((x, idx) => ({ title: 'redo: ' + x, action: () => { for (let i = 0; i <= idx; i++)
+                        target.instanceServiceContainer.undoService.redo(); } }));
+                ContextMenu.show(mnu, e, { mode: 'undo' });
+            }, 300);
+        };
+        redoButton.onmouseup = (e) => {
+            if (mouseDownTimer) {
+                clearTimeout(mouseDownTimer);
+                mouseDownTimer = null;
+            }
+        };
         setInterval(() => {
             if (this.dockManager.activeDocument) {
                 let target = this.dockManager.activeDocument.resolvedElementContent;
@@ -107,39 +116,20 @@ export class CommandHandling {
             else {
                 this.handleCommand(buttons, null);
             }
-            const target = this.dockManager.activeDocument?.resolvedElementContent;
-            if (target) {
-                const undoCount = target.instanceServiceContainer.undoService.undoCount;
-                const redoCount = target.instanceServiceContainer.undoService.redoCount;
-                document.getElementById('undoCount').innerText = '(' + undoCount + '/' + (undoCount + redoCount) + ')';
-                document.getElementById('redoCount').innerText = '(' + redoCount + '/' + (undoCount + redoCount) + ')';
-            }
         }, 100);
     }
     handleCommand(buttons, target) {
         buttons.forEach(b => {
             let command = b.dataset['command'];
             let commandParameter = b.dataset['commandParameter'];
             if (command === 'new')
-                b.removeAttribute('disabled');
-            else if (command === 'newIframe')
-                b.removeAttribute('disabled');
+                b.disabled = false;
+            else if (command === 'newFixedWidth')
+                b.disabled = false;
             else if (command === 'github')
-                b.removeAttribute('disabled');
-            else if (command === 'startServer')
-                if (!multiplayer)
-                    b.removeAttribute('disabled');
-                else
-                    b.setAttribute('disabled', '');
-            else if (command === 'connectClient')
-                if (!multiplayer)
-                    b.removeAttribute('disabled');
-                else
-                    b.setAttribute('disabled', '');
-            else if (!target ? true : !target.canExecuteCommand({ type: command, parameter: commandParameter }))
-                b.setAttribute('disabled', '');
+                b.disabled = false;
             else
-                b.removeAttribute('disabled');
+                b.disabled = !target ? true : !target.canExecuteCommand({ type: command, parameter: commandParameter });
         });
     }
 }

assets/icons/share.svg

@@ -1,4 +1,4 @@
-import { NpmPackageLoader, BaseCustomWebcomponentBindingsService, JsonFileElementsService, DocumentContainer, CopyPasteAsJsonService, UnkownElementsPropertiesService, sleep, BindingsRefactorService, TextRefactorService, SeperatorContextMenu, DomConverter, ValueType, UndoService } from '@node-projects/web-component-designer';
+import { NpmPackageLoader, BaseCustomWebcomponentBindingsService, JsonFileElementsService, DocumentContainer, CopyPasteAsJsonService, UnkownElementsPropertiesService, sleep, BindingsRefactorService, TextRefactorService, SeperatorContextMenu, DomConverter, 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';
 import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco';
@@ -16,7 +16,6 @@ serviceContainer.register("bindableObjectsService", new CustomBindableObjectsSer
 serviceContainer.registerLast("propertyService", new UnkownElementsPropertiesService());
 serviceContainer.register("refactorService", new BindingsRefactorService());
 serviceContainer.register("refactorService", new TextRefactorService());
-serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas, true));
 serviceContainer.config.codeViewWidget = CodeViewMonaco;
 serviceContainer.designerContextMenuExtensions.push(new ExpandCollapseContextMenu());
 serviceContainer.designerContextMenuExtensions.push(new SeperatorContextMenu(), new EditTemplateContextMenu());
@@ -249,7 +248,7 @@ export class AppShell extends BaseCustomWebComponentConstructorAppend {
             }
         });
         await this._setupServiceContainer();
-        this._bindableObjectsBrowser.initialize(serviceContainer);
+        this._bindableObjectsBrowser.initialize(serviceContainer, null, 'itemsView');
         //@ts-ignore
         this._propertyGrid.propertyGrid.propertyGroupHover = (group) => group.properties?.[0]?.styleDeclaration;
         this._propertyGrid.propertyGrid.propertyContextMenuProvider = (designItems, property) => {
@@ -280,7 +279,7 @@ export class AppShell extends BaseCustomWebComponentConstructorAppend {
                 this.jumpToCss(group.properties?.[0]?.styleDeclaration?.ast?.parent, group.properties?.[0]?.styleDeclaration?.stylesheet);
             //}
         };
-        this.newDocument(code, style, false);
+        this.newDocument(false, code, style);
         await sleep(200);
         this.activateDockById('treeUpper');
     }
@@ -332,9 +331,9 @@ export class AppShell extends BaseCustomWebComponentConstructorAppend {
         this._paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
         this._propertyGrid.serviceContainer = serviceContainer;
     }
-    newDocument(code, style, useIframe) {
+    newDocument(fixedWidth, code, style) {
         this._documentNumber++;
-        let sampleDocument = new DocumentContainer(serviceContainer, null, useIframe);
+        let sampleDocument = new DocumentContainer(serviceContainer);
         sampleDocument.setAttribute('dock-spawn-panel-type', 'document');
         sampleDocument.title = "document-" + this._documentNumber;
         sampleDocument.additionalStylesheets = [
@@ -377,6 +376,10 @@ export class AppShell extends BaseCustomWebComponentConstructorAppend {
             }
         }, true);
         this._dock.appendChild(sampleDocument);
+        if (fixedWidth) {
+            sampleDocument.designerView.designerWidth = '400px';
+            sampleDocument.designerView.designerHeight = '400px';
+        }
         if (code) {
             sampleDocument.content = code;
         }

dist/CommandHandling.js

@@ -1,5 +1,8 @@
 import { BindableObjectType } from "@node-projects/web-component-designer";
 export class CustomBindableObjectsService {
+    hasObjectsForInstanceServiceContainer(instanceServiceContainer, source) {
+        return true;
+    }
     name = 'custom';
     async getBindableObject(fullName) {
         let objs = await this.getBindableObjects();