├── .editorconfig ├── .github └── FUNDING.yml ├── .gitignore ├── .vscode └── settings.json ├── ACKNOWLEDGMENTS ├── COMPARISON.md ├── LICENSE ├── README.md ├── editor.code-workspace ├── package-lock.json ├── package.json ├── packages ├── web-component-designer-codeview-ace │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── widgets │ │ │ └── codeView │ │ │ └── code-view-ace.ts │ └── tsconfig.json ├── web-component-designer-codeview-codemirror │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── widgets │ │ │ └── codeView │ │ │ └── code-view-codemirror.ts │ └── tsconfig.json ├── web-component-designer-codeview-codemirror5 │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── widgets │ │ │ └── codeView │ │ │ └── code-view-codemirror5.ts │ └── tsconfig.json ├── web-component-designer-codeview-monaco │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── widgets │ │ │ └── codeView │ │ │ └── code-view-monaco.ts │ └── tsconfig.json ├── web-component-designer-htmlparserservice-base-custom-webcomponent │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── service │ │ │ └── htmlParserService │ │ │ ├── BaseCustomWebcomponentParserService.ts │ │ │ └── Typescript.d.ts │ └── tsconfig.json ├── web-component-designer-htmlparserservice-lit-element │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── service │ │ │ └── htmlParserService │ │ │ └── LitElementParserService.ts │ └── tsconfig.json ├── web-component-designer-htmlparserservice-nodehtmlparser │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── service │ │ │ └── htmlParserService │ │ │ └── NodeHtmlParserService.ts │ └── tsconfig.json ├── web-component-designer-miniatureview-html2canvas │ ├── .npmignore │ ├── package.json │ ├── src │ │ └── widgets │ │ │ └── miniatureView │ │ │ └── html-2-canvas-miniature-view.ts │ └── tsconfig.json ├── web-component-designer-stylesheetservice-css-tools │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── service │ │ │ └── stylesheetservice │ │ │ └── CssToolsStylesheetService.ts │ └── tsconfig.json ├── web-component-designer-stylesheetservice-css-tree │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.ts │ │ └── service │ │ │ └── stylesheetservice │ │ │ ├── CssTreeStylesheetService.ts │ │ │ └── SpecificityCalculator.ts │ └── tsconfig.json ├── web-component-designer-visualization-addons │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ ├── blockly │ │ │ ├── BlocklyJavascriptHelper.ts │ │ │ ├── BlocklyScriptEditor.ts │ │ │ ├── BlocklyToolbox.ts │ │ │ └── components │ │ │ │ ├── Console.ts │ │ │ │ ├── Debugger.ts │ │ │ │ ├── Delay.ts │ │ │ │ ├── GetParameter.ts │ │ │ │ ├── GetState.ts │ │ │ │ ├── GetSubProperty.ts │ │ │ │ ├── OpenScreen.ts │ │ │ │ ├── QuerySelector.ts │ │ │ │ ├── QuerySelectorAll.ts │ │ │ │ ├── Return.ts │ │ │ │ ├── SetElement.ts │ │ │ │ ├── SetState.ts │ │ │ │ ├── StartEvent.ts │ │ │ │ └── components.ts │ │ ├── components │ │ │ ├── BindingsEditor.ts │ │ │ ├── BindingsEditorHistoric.ts │ │ │ ├── EventAssignment.ts │ │ │ ├── ParameterEditor.ts │ │ │ ├── SimpleScriptEditor.ts │ │ │ └── VisualizationPropertyGrid.ts │ │ ├── helpers │ │ │ └── BindingsHelper.ts │ │ ├── index.ts │ │ ├── interfaces │ │ │ ├── IScriptMultiplexValue.ts │ │ │ ├── VisualisationElementScript.ts │ │ │ ├── VisualizationBinding.ts │ │ │ ├── VisualizationHandler.ts │ │ │ └── VisualizationShell.ts │ │ ├── scripting │ │ │ ├── Script.ts │ │ │ ├── ScriptCommands.ts │ │ │ ├── ScriptSystem.ts │ │ │ └── ScriptUpgrader.ts │ │ ├── services │ │ │ ├── BindableObjectDragDropService.ts │ │ │ ├── PropertyGridDragDropService.ts │ │ │ ├── ScriptRefactorService.ts │ │ │ ├── SignalPropertyEditor.ts │ │ │ ├── VisualizationBindingsRefactorService.ts │ │ │ └── VisualizationBindingsService.ts │ │ └── setupVisuService.ts │ └── tsconfig.json ├── web-component-designer-widgets-fancytree │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── loadJqueryAndFancytree.ts │ │ └── widgets │ │ │ ├── bindableObjectsBrowser │ │ │ └── bindable-objects-browser.ts │ │ │ ├── paletteView │ │ │ └── paletteTreeView.ts │ │ │ └── treeView │ │ │ └── treeViewExtended.ts │ └── tsconfig.json ├── web-component-designer-widgets-wunderbaum │ ├── .npmignore │ ├── README.md │ ├── assets │ │ ├── icons │ │ │ ├── collapse.svg │ │ │ └── expand.svg │ │ └── images │ │ │ ├── expander.svg │ │ │ ├── expanderClose.svg │ │ │ ├── file.svg │ │ │ └── folder.svg │ ├── package.json │ ├── src │ │ ├── index.ts │ │ └── widgets │ │ │ ├── WunderbaumOptions.ts │ │ │ ├── bindableObjectsBrowser │ │ │ └── bindable-objects-browser.ts │ │ │ ├── paletteView │ │ │ └── paletteTreeView.ts │ │ │ └── treeView │ │ │ ├── ExpandCollapseContextMenu.ts │ │ │ └── treeViewExtended.ts │ └── tsconfig.json ├── web-component-designer-zpl │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src │ │ ├── extensions │ │ │ └── ZplLayoutResizeExtensionProvider.ts │ │ ├── index.ts │ │ ├── jsBarcodeOptions.ts │ │ ├── monaco │ │ │ └── ZplLanguage.ts │ │ ├── qr.ts │ │ ├── services │ │ │ ├── ZplImageDrop.ts │ │ │ ├── ZplLayoutCopyPasteService.ts │ │ │ ├── ZplLayoutPlacementService.ts │ │ │ └── ZplParserService.ts │ │ ├── setupZplServiceContainer.ts │ │ ├── widgets │ │ │ ├── elements.json │ │ │ ├── views │ │ │ │ └── zpl-demo-view.ts │ │ │ ├── zpl-barcode.ts │ │ │ ├── zpl-comment.ts │ │ │ ├── zpl-graphic-box.ts │ │ │ ├── zpl-graphic-circle.ts │ │ │ ├── zpl-graphic-diagonal-line.ts │ │ │ ├── zpl-image.ts │ │ │ └── zpl-text.ts │ │ └── zplHelper.ts │ └── tsconfig.json └── web-component-designer │ ├── .npmignore │ ├── README.md │ ├── assets │ ├── designerCanvasIframe.html │ ├── icons │ │ ├── alignHorizontalCenter.svg │ │ ├── alignHorizontalLeft.svg │ │ ├── alignHorizontalRight.svg │ │ ├── alignVerticalBottom.svg │ │ ├── alignVerticalCenter.svg │ │ ├── alignVerticalTop.svg │ │ ├── copy.svg │ │ ├── cut.svg │ │ ├── delete.svg │ │ ├── file.svg │ │ ├── github.svg │ │ ├── horizontalDistribute.svg │ │ ├── jump.svg │ │ ├── moveFirst.svg │ │ ├── moveLeft.svg │ │ ├── paste.svg │ │ ├── redo.svg │ │ ├── rotateLeft.svg │ │ ├── rotateRight.svg │ │ ├── save.svg │ │ ├── screenshot.svg │ │ ├── undo.svg │ │ ├── verticalDistribute.svg │ │ ├── zoomIn.svg │ │ └── zoomOut.svg │ └── images │ │ ├── chromeDevtools │ │ ├── LICENSE │ │ ├── align-content-center-icon.svg │ │ ├── align-content-flex-end-icon.svg │ │ ├── align-content-flex-start-icon.svg │ │ ├── align-content-space-around-icon.svg │ │ ├── align-content-space-between-icon.svg │ │ ├── align-content-space-evenly-icon.svg │ │ ├── align-content-stretch-icon.svg │ │ ├── align-items-baseline-icon.svg │ │ ├── align-items-center-icon.svg │ │ ├── align-items-end-icon.svg │ │ ├── align-items-flex-end-icon.svg │ │ ├── align-items-flex-start-icon.svg │ │ ├── align-items-start-icon.svg │ │ ├── align-items-stretch-icon.svg │ │ ├── align-self-center-icon.svg │ │ ├── align-self-flex-end-icon.svg │ │ ├── align-self-flex-start-icon.svg │ │ ├── align-self-stretch-icon.svg │ │ ├── baseline-icon.svg │ │ ├── flex-direction-column-icon.svg │ │ ├── flex-direction-icon.svg │ │ ├── flex-direction-row-icon.svg │ │ ├── flex-wrap-nowrap-icon.svg │ │ ├── flex-wrap-wrap-icon.svg │ │ ├── info.txt │ │ ├── justify-content-center-icon.svg │ │ ├── justify-content-end-icon.svg │ │ ├── justify-content-flex-end-icon.svg │ │ ├── justify-content-flex-start-icon.svg │ │ ├── justify-content-space-around-icon.svg │ │ ├── justify-content-space-between-icon.svg │ │ ├── justify-content-space-evenly-icon.svg │ │ ├── justify-content-start-icon.svg │ │ ├── justify-items-center-icon.svg │ │ ├── justify-items-end-icon.svg │ │ ├── justify-items-start-icon.svg │ │ └── justify-items-stretch-icon.svg │ │ ├── display │ │ ├── block.svg │ │ └── inline.svg │ │ ├── layout │ │ ├── AlignBot.svg │ │ ├── AlignCenter.svg │ │ ├── AlignCenterHorizontal.svg │ │ ├── AlignLeft.svg │ │ ├── AlignRight.svg │ │ ├── AlignTop.svg │ │ ├── BringOneToBack.svg │ │ ├── BringOneToFront.svg │ │ ├── BringToBack.svg │ │ └── BringToFront.svg │ │ ├── tools │ │ ├── ColorPickerTool.svg │ │ ├── DrawEllipTool.svg │ │ ├── DrawLineTool.svg │ │ ├── DrawPathTool.svg │ │ ├── DrawRectTool.svg │ │ ├── MagicWandTool.svg │ │ ├── Margin.svg │ │ ├── Padding.svg │ │ ├── PanTool.svg │ │ ├── PointerTool.svg │ │ ├── SelectRectTool.svg │ │ ├── TextBoxTool.svg │ │ ├── TextTool.svg │ │ ├── TransformTool.svg │ │ └── ZoomTool.svg │ │ └── treeview │ │ ├── dot.png │ │ ├── eyeclose.png │ │ ├── eyeopen.png │ │ ├── license.txt │ │ └── lock.png │ ├── config │ └── elements-native.json │ ├── jest.config.js │ ├── jsr.json │ ├── package.json │ ├── src │ ├── Constants.ts │ ├── commandHandling │ │ ├── CommandType.ts │ │ ├── IUiCommand.ts │ │ └── IUiCommandHandler.ts │ ├── elements │ │ ├── controls │ │ │ ├── DesignerTabControl.ts │ │ │ ├── ImageButtonListSelector.ts │ │ │ ├── MetricsEditor.ts │ │ │ ├── NumericPopup.ts │ │ │ ├── NumericStyleInput.ts │ │ │ ├── PlainScrollbar.ts │ │ │ ├── SimpleSplitView.ts │ │ │ └── ThicknessEditor.ts │ │ ├── documentContainer.ts │ │ ├── helper │ │ │ ├── ArrangeHelper.ts │ │ │ ├── Browser.ts │ │ │ ├── ClipboardHelper.ts │ │ │ ├── CssAttributeParser.ts │ │ │ ├── CssCombiner.ts │ │ │ ├── CssUnitConverter.ts │ │ │ ├── ElementHelper.ts │ │ │ ├── GridHelper.ts │ │ │ ├── Helper.ts │ │ │ ├── ITextWriter.ts │ │ │ ├── IndentedTextWriter.ts │ │ │ ├── KeyboardHelper.ts │ │ │ ├── LayoutHelper.ts │ │ │ ├── NpmPackageHacks.json │ │ │ ├── NpmPackageLoader.ts │ │ │ ├── PathDataPolyfill.ts │ │ │ ├── Screenshot.ts │ │ │ ├── SelectionHelper.ts │ │ │ ├── SimpleTextWriter.ts │ │ │ ├── StylesheetHelper.ts │ │ │ ├── SvgHelper.ts │ │ │ ├── SwitchContainerHelper.ts │ │ │ ├── TextHelper.ts │ │ │ ├── TouchGestureHelper.ts │ │ │ ├── TransformHelper.ts │ │ │ ├── XmlHelper.ts │ │ │ ├── contextMenu │ │ │ │ ├── ContextMenu.ts │ │ │ │ └── IContextMenuItem.ts │ │ │ ├── getBoxQuads.global.d.ts │ │ │ ├── getBoxQuads.js │ │ │ └── w3color.ts │ │ ├── item │ │ │ ├── BindingMode.ts │ │ │ ├── BindingTarget.ts │ │ │ ├── DesignItem.ts │ │ │ ├── IBinding.ts │ │ │ ├── IDesignItem.ts │ │ │ ├── NodeType.ts │ │ │ └── info.txt │ │ ├── services │ │ │ ├── BaseServiceContainer.ts │ │ │ ├── DefaultServiceBootstrap.ts │ │ │ ├── GlobalContext.ts │ │ │ ├── IService.ts │ │ │ ├── IServiceContainer.ts │ │ │ ├── InstanceServiceContainer.ts │ │ │ ├── ServiceContainer.ts │ │ │ ├── bindableObjectsService │ │ │ │ ├── BindableObjectType.ts │ │ │ │ ├── BindableObjectsTarget.ts │ │ │ │ ├── IBindableObject.ts │ │ │ │ ├── IBindableObjectDragDropService.ts │ │ │ │ └── IBindableObjectsService.ts │ │ │ ├── bindingsService │ │ │ │ ├── BaseCustomWebcomponentBindingsService.ts │ │ │ │ ├── IBindingService.ts │ │ │ │ ├── SpecialTagsBindingService.ts │ │ │ │ └── VueBindingsService.ts │ │ │ ├── configUiService │ │ │ │ └── IConfigUiService.ts │ │ │ ├── contentService │ │ │ │ ├── ContentService.ts │ │ │ │ ├── IContentChanged.ts │ │ │ │ └── IContentService.ts │ │ │ ├── copyPasteService │ │ │ │ ├── CopyPasteAsJsonService.ts │ │ │ │ ├── CopyPasteService.ts │ │ │ │ └── ICopyPasteService.ts │ │ │ ├── deletionService │ │ │ │ ├── DeletionService.ts │ │ │ │ └── IDeletionService.ts │ │ │ ├── demoProviderService │ │ │ │ ├── IDemoProviderService.ts │ │ │ │ ├── IframeDemoProviderService.ts │ │ │ │ └── SimpleDemoProviderService.ts │ │ │ ├── designItemDocumentPositionService │ │ │ │ ├── DesignItemDocumentPositionService.ts │ │ │ │ └── IDesignItemDocumentPositionService.ts │ │ │ ├── designItemService │ │ │ │ ├── BaseCustomWebcomponentDesignItemService.ts │ │ │ │ ├── DesignItemService.ts │ │ │ │ └── IDesignItemService.ts │ │ │ ├── designerAddons │ │ │ │ └── IDesignerAddonJson.ts │ │ │ ├── dragDropService │ │ │ │ ├── DragDropService.ts │ │ │ │ ├── ExternalDragDropService.ts │ │ │ │ ├── IDragDropService.ts │ │ │ │ ├── IExternalDragDropService.ts │ │ │ │ └── IPropertyGridDragDropService.ts │ │ │ ├── elementAtPointService │ │ │ │ ├── ElementAtPointService.ts │ │ │ │ └── IElementAtPointService.ts │ │ │ ├── elementInteractionService │ │ │ │ └── IElementInteractionService.ts │ │ │ ├── elementsService │ │ │ │ ├── IElementDefinition.ts │ │ │ │ ├── IElementsJson.ts │ │ │ │ ├── IElementsService.ts │ │ │ │ ├── JsonFileElementsService.ts │ │ │ │ ├── PreDefinedElementsService.ts │ │ │ │ └── WebcomponentManifestElementsService.ts │ │ │ ├── eventsService │ │ │ │ ├── EventsService.ts │ │ │ │ ├── IEvent.ts │ │ │ │ ├── IEventsService.ts │ │ │ │ └── WebcomponentManifestEventsService.ts │ │ │ ├── htmlParserService │ │ │ │ ├── DefaultHtmlParserService.ts │ │ │ │ └── IHtmlParserService.ts │ │ │ ├── htmlWriterService │ │ │ │ ├── AbstractHtmlWriterService.ts │ │ │ │ ├── FormatingHtmlWriterService.ts │ │ │ │ ├── HtmlWriterService.ts │ │ │ │ ├── IHtmlWriterOptions.ts │ │ │ │ ├── IHtmlWriterService.ts │ │ │ │ ├── IStringPosition.ts │ │ │ │ ├── LitTsElementWriterService.ts │ │ │ │ └── SimpleHtmlWriterService.ts │ │ │ ├── initializationService │ │ │ │ └── IIntializationService.ts │ │ │ ├── instanceService │ │ │ │ ├── DefaultInstanceService.ts │ │ │ │ ├── IDesignerInstance.ts │ │ │ │ └── IInstanceService.ts │ │ │ ├── manifestParsers │ │ │ │ ├── IOldCustomElementsManifest.ts │ │ │ │ ├── OldCustomElementsManifestLoader.ts │ │ │ │ └── WebcomponentManifestParserService.ts │ │ │ ├── modelCommandService │ │ │ │ ├── DefaultModelCommandService.ts │ │ │ │ └── IModelCommandService.ts │ │ │ ├── multiplayerService │ │ │ │ ├── IMultiplayerService.ts │ │ │ │ └── MultiplayerService.ts │ │ │ ├── placementService │ │ │ │ ├── AbsolutePlacementService.ts │ │ │ │ ├── AlwaysAbsolutePlacementService.ts │ │ │ │ ├── DefaultPlacementService.ts │ │ │ │ ├── FlexBoxPlacementService.ts │ │ │ │ ├── GridPlacementService.ts │ │ │ │ ├── IPlacementService.ts │ │ │ │ ├── ISnaplinesProviderService.ts │ │ │ │ └── SnaplinesProviderService.ts │ │ │ ├── popupService │ │ │ │ ├── IPopupService.ts │ │ │ │ └── PopupService.ts │ │ │ ├── propertiesService │ │ │ │ ├── DefaultEditorTypesService.ts │ │ │ │ ├── IEditorTypesService.ts │ │ │ │ ├── IPropertiesService.ts │ │ │ │ ├── IProperty.ts │ │ │ │ ├── IPropertyEditor.ts │ │ │ │ ├── IPropertyGroup.ts │ │ │ │ ├── IPropertyGroupsService.ts │ │ │ │ ├── PropertyGroupsService.ts │ │ │ │ ├── PropertyType.ts │ │ │ │ ├── ValueType.ts │ │ │ │ ├── propertyEditors │ │ │ │ │ ├── BasePropertyEditor.ts │ │ │ │ │ ├── BooleanPropertyEditor.ts │ │ │ │ │ ├── ColorPropertyEditor.ts │ │ │ │ │ ├── DatePropertyEditor.ts │ │ │ │ │ ├── FontPropertyEditor.ts │ │ │ │ │ ├── ImageButtonListPropertyEditor.ts │ │ │ │ │ ├── JsonPropertyEditor.ts │ │ │ │ │ ├── JsonPropertyPopupEditor.ts │ │ │ │ │ ├── NumberPropertyEditor.ts │ │ │ │ │ ├── SelectPropertyEditor.ts │ │ │ │ │ ├── TextPropertyEditor.ts │ │ │ │ │ ├── ThicknessPropertyEditor.ts │ │ │ │ │ └── special │ │ │ │ │ │ ├── GridAssignedRowColumnPropertyEditor.ts │ │ │ │ │ │ └── MetricsPropertyEditor.ts │ │ │ │ └── services │ │ │ │ │ ├── AbstractCssPropertiesService.ts │ │ │ │ │ ├── AbstractPolymerLikePropertiesService.ts │ │ │ │ │ ├── AbstractPropertiesService.ts │ │ │ │ │ ├── AttachedPropertiesService.ts │ │ │ │ │ ├── AttributesPropertiesService.ts │ │ │ │ │ ├── BaseCustomWebComponentPropertiesService.ts │ │ │ │ │ ├── BasicWebcomponentPropertiesService.ts │ │ │ │ │ ├── CommonPropertiesService.ts │ │ │ │ │ ├── ContentAndIdPropertiesService.ts │ │ │ │ │ ├── CssCurrentPropertiesService.ts │ │ │ │ │ ├── CssCustomPropertiesService.ts │ │ │ │ │ ├── CssProperties.json │ │ │ │ │ ├── CssPropertiesService.ts │ │ │ │ │ ├── IJsonPropertyDefinition.ts │ │ │ │ │ ├── IJsonPropertyDefinitions.ts │ │ │ │ │ ├── ListPropertiesService.ts │ │ │ │ │ ├── Lit2PropertiesService.ts │ │ │ │ │ ├── LitElementPropertiesService.ts │ │ │ │ │ ├── MathMLElementsPropertiesService.ts │ │ │ │ │ ├── NativeElementsPropertiesService.ts │ │ │ │ │ ├── PolymerPropertiesService.ts │ │ │ │ │ ├── PropertiesHelper.ts │ │ │ │ │ ├── SVGElementsPropertiesService.ts │ │ │ │ │ ├── UnkownElementsPropertiesService.ts │ │ │ │ │ └── WebcomponentManifestPropertiesService.ts │ │ │ ├── refactorService │ │ │ │ ├── BindingsRefactorService.ts │ │ │ │ ├── IRefactorService.ts │ │ │ │ ├── IRefactoring.ts │ │ │ │ └── TextRefactorService.ts │ │ │ ├── selectionService │ │ │ │ ├── ISelectionChangedEvent.ts │ │ │ │ ├── ISelectionRefreshEvent.ts │ │ │ │ ├── ISelectionService.ts │ │ │ │ └── SelectionService.ts │ │ │ ├── stylesheetService │ │ │ │ ├── AbstractStylesheetService.ts │ │ │ │ ├── IStylesheetService.ts │ │ │ │ └── SpecificityCalculator.ts │ │ │ ├── treeStructureService │ │ │ │ ├── ITreeStructureChangedEvent.ts │ │ │ │ └── ITreeStructureService.ts │ │ │ └── undoService │ │ │ │ ├── ChangeGroup.ts │ │ │ │ ├── ITransactionItem.ts │ │ │ │ ├── IUndoService.ts │ │ │ │ ├── UndoService.ts │ │ │ │ └── transactionItems │ │ │ │ ├── AttributeChangeAction.ts │ │ │ │ ├── CssStyleChangeAction.ts │ │ │ │ ├── DeleteAction.ts │ │ │ │ ├── InsertAction.ts │ │ │ │ ├── InsertChildAction.ts │ │ │ │ ├── PropertyChangeAction.ts │ │ │ │ ├── SelectionChangedAction.ts │ │ │ │ ├── SetDesignItemsAction.ts │ │ │ │ ├── StylesheetChangedAction.ts │ │ │ │ └── TextContentChangeAction.ts │ │ └── widgets │ │ │ ├── bindableObjectsBrowser │ │ │ └── IBindableObjectsBrowser.ts │ │ │ ├── codeView │ │ │ ├── ICodeView.ts │ │ │ └── code-view-simple.ts │ │ │ ├── debugView │ │ │ └── debug-view.ts │ │ │ ├── demoView │ │ │ ├── IDemoView.ts │ │ │ └── demoView.ts │ │ │ ├── designerView │ │ │ ├── DesignContext.ts │ │ │ ├── DomConverter.ts │ │ │ ├── IDesignContext.ts │ │ │ ├── IDesignerCanvas.ts │ │ │ ├── Snaplines.ts │ │ │ ├── defaultConfiguredDesignerView.ts │ │ │ ├── designerCanvas.ts │ │ │ ├── designerView.ts │ │ │ ├── extensions │ │ │ │ ├── AbstractExtension.ts │ │ │ │ ├── AbstractExtensionBase.ts │ │ │ │ ├── AltToEnterContainerExtension.ts │ │ │ │ ├── AltToEnterContainerExtensionProvider.ts │ │ │ │ ├── BasicStackedToolbarExtension.ts │ │ │ │ ├── EditText │ │ │ │ │ ├── EditTextExtension.ts │ │ │ │ │ └── EditTextExtensionProvider.ts │ │ │ │ ├── ElementDragTitleExtension.ts │ │ │ │ ├── ElementDragTitleExtensionProvider.ts │ │ │ │ ├── ExtensionManager.ts │ │ │ │ ├── ExtensionType.ts │ │ │ │ ├── FlexboxExtension.ts │ │ │ │ ├── FlexboxExtensionProvider.ts │ │ │ │ ├── GrayOutDragOverContainerExtension.ts │ │ │ │ ├── GrayOutDragOverContainerExtensionProvider.ts │ │ │ │ ├── GrayOutExtension.ts │ │ │ │ ├── GrayOutExtensionProvider.ts │ │ │ │ ├── HighlightElementExtension.ts │ │ │ │ ├── HighlightElementExtensionProvider.ts │ │ │ │ ├── IDesignerExtension.ts │ │ │ │ ├── IDesignerExtensionProvider.ts │ │ │ │ ├── IExtensionManger.ts │ │ │ │ ├── InvisibleElementExtension.ts │ │ │ │ ├── InvisibleElementExtensionProvider.ts │ │ │ │ ├── MarginExtension.ts │ │ │ │ ├── MarginExtensionProvider.ts │ │ │ │ ├── MultipleSelectionRectExtension.ts │ │ │ │ ├── MultipleSelectionRectExtensionProvider.ts │ │ │ │ ├── OverlayLayer.ts │ │ │ │ ├── PaddingExtension.ts │ │ │ │ ├── PaddingExtensionProvider.ts │ │ │ │ ├── PlacementExtension.ts │ │ │ │ ├── PlacementExtensionProvider.ts │ │ │ │ ├── PositionExtension.ts │ │ │ │ ├── PositionExtensionProvider.ts │ │ │ │ ├── PreviousElementSelectExtension.ts │ │ │ │ ├── PreviousElementSelectExtensionProvider.ts │ │ │ │ ├── ResizeExtension.ts │ │ │ │ ├── ResizeExtensionProvider.ts │ │ │ │ ├── RotateExtension.ts │ │ │ │ ├── RotateExtensionProvider.ts │ │ │ │ ├── SelectionDefaultExtension.ts │ │ │ │ ├── SelectionDefaultExtensionProvider.ts │ │ │ │ ├── TransformOriginExtension.ts │ │ │ │ ├── TransformOriginExtensionProvider.ts │ │ │ │ ├── block │ │ │ │ │ ├── BlockToolbarExtension.ts │ │ │ │ │ └── BlockToolbarExtensionProvider.ts │ │ │ │ ├── buttons │ │ │ │ │ ├── AbstractDesignViewConfigButton.ts │ │ │ │ │ ├── ButtonSeperatorProvider.ts │ │ │ │ │ ├── FlexboxExtensionDesignViewConfigButtons.ts │ │ │ │ │ ├── GridExtensionDesignViewConfigButtons.ts │ │ │ │ │ ├── IDesignViewConfigButtonsProvider.ts │ │ │ │ │ ├── InvisibleElementExtensionDesignViewConfigButtons.ts │ │ │ │ │ ├── OptionsContextMenuButton.ts │ │ │ │ │ ├── RoundPixelsDesignViewConfigButton.ts │ │ │ │ │ ├── StylesheetServiceDesignViewConfigButtons.ts │ │ │ │ │ └── ToolbarExtensionsDesignViewConfigButtons.ts │ │ │ │ ├── contextMenu │ │ │ │ │ ├── AlignItemsContextMenu.ts │ │ │ │ │ ├── ChildContextMenu.ts │ │ │ │ │ ├── ChildrenContextMenu.ts │ │ │ │ │ ├── CopyPasteContextMenu.ts │ │ │ │ │ ├── ForceCssContextMenu.ts │ │ │ │ │ ├── IContextMenuExtension.ts │ │ │ │ │ ├── ItemsBelowContextMenu.ts │ │ │ │ │ ├── JumpToElementContextMenu.ts │ │ │ │ │ ├── MultipleItemsSelectedContextMenu.ts │ │ │ │ │ ├── PathContextMenu.ts │ │ │ │ │ ├── RectContextMenu.ts │ │ │ │ │ ├── RotateLeftAndRightContextMenu.ts │ │ │ │ │ ├── SelectAllChildrenContextMenu.ts │ │ │ │ │ ├── SeperatorContextMenu.ts │ │ │ │ │ ├── ZMoveContextMenu.ts │ │ │ │ │ └── ZoomToElementContextMenu.ts │ │ │ │ ├── flex │ │ │ │ │ ├── FlexToolbarExtension.ts │ │ │ │ │ └── FlexToolbarExtensionProvider.ts │ │ │ │ ├── grid │ │ │ │ │ ├── DisplayGridExtension.ts │ │ │ │ │ ├── DisplayGridExtensionProvider.ts │ │ │ │ │ ├── EditGridColumnRowSizesExtension.ts │ │ │ │ │ ├── EditGridColumnRowSizesExtensionProvider.ts │ │ │ │ │ ├── GridChildResizeExtension.ts │ │ │ │ │ ├── GridChildResizeExtensionProvider.ts │ │ │ │ │ ├── GridChildToolbarExtension.ts │ │ │ │ │ ├── GridChildToolbarExtensionProvider.ts │ │ │ │ │ ├── GridToolbarExtension.ts │ │ │ │ │ └── GridToolbarExtensionProvider.ts │ │ │ │ ├── logic │ │ │ │ │ ├── ApplyFirstMachingExtensionProvider.ts │ │ │ │ │ └── ConditionExtensionProvider.ts │ │ │ │ ├── pointerExtensions │ │ │ │ │ ├── AbstractDesignerPointerExtension.ts │ │ │ │ │ ├── CursorLinePointerExtension.ts │ │ │ │ │ ├── CursorLinePointerExtensionProvider.ts │ │ │ │ │ ├── IDesignerPointerExtension.ts │ │ │ │ │ └── IDesignerPointerExtensionProvider.ts │ │ │ │ └── svg │ │ │ │ │ ├── EllipsisExtension.ts │ │ │ │ │ ├── EllipsisExtensionProvider.ts │ │ │ │ │ ├── LineExtension.ts │ │ │ │ │ ├── LineExtensionProvider.ts │ │ │ │ │ ├── PathExtension.ts │ │ │ │ │ ├── PathExtensionProvider.ts │ │ │ │ │ ├── RectExtension.ts │ │ │ │ │ ├── RectExtensionProvider.ts │ │ │ │ │ ├── SvgElementExtension.ts │ │ │ │ │ └── SvgElementExtensionProvider.ts │ │ │ ├── overlay │ │ │ │ └── EditTextOverlay.ts │ │ │ ├── overlayLayerView.ts │ │ │ └── tools │ │ │ │ ├── DrawElementTool.ts │ │ │ │ ├── DrawEllipsisTool.ts │ │ │ │ ├── DrawLineTool.ts │ │ │ │ ├── DrawPathTool.ts │ │ │ │ ├── DrawRectTool.ts │ │ │ │ ├── ITool.ts │ │ │ │ ├── MagicWandSelectorTool.ts │ │ │ │ ├── MarginTool.ts │ │ │ │ ├── NamedTools.ts │ │ │ │ ├── PaddingTool.ts │ │ │ │ ├── PanTool.ts │ │ │ │ ├── PickColorTool.ts │ │ │ │ ├── PointerTool.ts │ │ │ │ ├── RectangleSelectorTool.ts │ │ │ │ ├── TextTool.ts │ │ │ │ ├── ZoomTool.ts │ │ │ │ └── toolBar │ │ │ │ ├── DesignerToolbar.ts │ │ │ │ ├── DesignerToolbarButton.ts │ │ │ │ ├── IDesignViewToolbarButtonProvider.ts │ │ │ │ ├── buttons │ │ │ │ ├── DrawToolButtonProvider.ts │ │ │ │ ├── PointerToolButtonProvider.ts │ │ │ │ ├── SelectorToolButtonProvider.ts │ │ │ │ ├── SeperatorToolProvider.ts │ │ │ │ ├── SimpleToolButtonProvider.ts │ │ │ │ ├── TextToolButtonProvider.ts │ │ │ │ ├── TransformToolButtonProvider.ts │ │ │ │ └── ZoomToolButtonProvider.ts │ │ │ │ └── popups │ │ │ │ ├── AbstractBaseToolPopup.ts │ │ │ │ ├── DrawToolPopup.ts │ │ │ │ ├── PointerToolPopup.ts │ │ │ │ ├── SelectionToolPopup.ts │ │ │ │ └── TransformToolPopup.ts │ │ │ ├── miniatureView │ │ │ ├── FirefoxElementMiniatiureView.ts │ │ │ └── IMiniatureView.ts │ │ │ ├── paletteView │ │ │ ├── paletteElements.ts │ │ │ └── paletteView.ts │ │ │ ├── propertyGrid │ │ │ ├── PropertyGrid.ts │ │ │ ├── PropertyGridPropertyList.ts │ │ │ └── PropertyGridWithHeader.ts │ │ │ ├── refactorView │ │ │ └── refactor-view.ts │ │ │ └── treeView │ │ │ ├── ITreeView.ts │ │ │ └── treeView.ts │ ├── enums │ │ ├── EventNames.ts │ │ ├── Orientation.ts │ │ └── PointerActionType.ts │ ├── index.ts │ ├── interfaces │ │ ├── IActivateable.ts │ │ ├── IDisposable.ts │ │ ├── IPoint.ts │ │ ├── IPoint3D.ts │ │ ├── IRect.ts │ │ └── ISize.ts │ └── polyfill │ │ └── globals.ts │ ├── tests │ └── SpecificityCalculator.test.ts │ └── tsconfig.json ├── todos └── VueParserService.ts ├── tsconfig.build.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = crlf 5 | insert_final_newline = false 6 | indent_style = space 7 | indent_size = 2 -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: jogibear9988 4 | patreon: jogibear9988 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | /.vs 4 | debug.log 5 | /.vscode 6 | *.tsbuildinfo 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /ACKNOWLEDGMENTS: -------------------------------------------------------------------------------- 1 | # Acknowledgments 2 | 3 | - Thanks to @notwaldorf who created the original `wizzywid` project (MIT License). 4 | https://github.com/PolymerLabs/wizzywid 5 | This was a start for this whole project (even if mostly nothing of the original code is left) 6 | - Thanks to @chdh for plain-scrollbar component 7 | https://github.com/chdh/plain-scrollbar 8 | - Thanks to @m-thalmann for contextmenujs 9 | https://github.com/m-thalmann/contextmenujs (also we have heavily modified it) 10 | - Levi Cole for parts of the cssUnits conversion code 11 | https://stackoverflow.com/a/66569574/579623 12 | - Domi for text-width code 13 | https://stackoverflow.com/a/21015393 14 | - gwwar for getClosestStackingContext 15 | https://github.com/gwwar/z-context 16 | - google icons 17 | https://fonts.google.com/icons -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 node-projects 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /editor.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | }, 6 | { 7 | "path": "../web-component-designer-demo" 8 | } 9 | ], 10 | "settings": { 11 | "jestrunner.debugOptions": { 12 | "runtimeArgs": [ 13 | "--experimental-vm-modules", "--enable-source-maps" 14 | ] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-ace/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-ace/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-codeview-ace 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-ace 6 | 7 | npm i @node-projects/web-component-designer-codeview-ace 8 | 9 | ## Description 10 | 11 | This uses the ACE Codeeditor for the Webcomponent Designer Codeview 12 | 13 | ## Usage 14 | 15 | import { CodeViewAce } from '@node-projects/web-component-designer-codeview-ace'; 16 | serviceContainer.config.codeViewWidget = CodeViewAce; -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-ace/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Code Editor using ACE", 3 | "name": "@node-projects/web-component-designer-codeview-ace", 4 | "version": "0.1.3", 5 | "type": "module", 6 | "main": "./dist/widgets/codeView/code-view-ace.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "ace-builds": "^1.36.3", 17 | "@node-projects/base-custom-webcomponent": ">=0.27.8", 18 | "@node-projects/web-component-designer": ">=0.1.224" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/node-projects/web-component-designer.git" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-ace/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-codeview-codemirror 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-codemirror 6 | 7 | npm i @node-projects/web-component-designer-codeview-codemirror 8 | 9 | ## Description 10 | 11 | This uses the Codemirror Editor for the Webcomponent Designer Codeview 12 | 13 | ## Usage 14 | 15 | import { CodeViewCodeMirror } from '@node-projects/web-component-designer-codeview-codemirror'; 16 | serviceContainer.config.codeViewWidget = CodeViewCodeMirror; -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Code Editor using Codemirror 6 and newer", 3 | "name": "@node-projects/web-component-designer-codeview-codemirror", 4 | "version": "0.1.4", 5 | "type": "module", 6 | "main": "./dist/widgets/codeView/code-view-codemirror.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "codemirror": "^6.0.1", 17 | "@node-projects/base-custom-webcomponent": ">=0.27.8", 18 | "@node-projects/web-component-designer": ">=0.1.224" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/node-projects/web-component-designer.git" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror5/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror5/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-codeview-codemirror5 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-codemirror5 6 | 7 | npm i @node-projects/web-component-designer-codeview-codemirror5 8 | 9 | ## Description 10 | 11 | This uses the Codemirror Version 5 Editor for the Webcomponent Designer Codeview. 12 | 13 | The NPM Package is linked via alias from "codemirror5" directory not "codemirror", look at package.json on how to do. 14 | 15 | ## Usage 16 | 17 | import { CodeViewCodeMirror5 } from '@node-projects/web-component-designer-codeview-codemirror5'; 18 | serviceContainer.config.codeViewWidget = CodeViewCodeMirror5; -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Code Editor using Codemirror 5", 3 | "name": "@node-projects/web-component-designer-codeview-codemirror5", 4 | "version": "0.1.5", 5 | "type": "module", 6 | "main": "./dist/widgets/codeView/code-view-codemirror5.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "codemirror5": "npm:codemirror@^5.0.0", 17 | "@node-projects/base-custom-webcomponent": ">=0.27.8", 18 | "@node-projects/web-component-designer": ">=0.1.224" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/node-projects/web-component-designer.git" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-codemirror5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-monaco/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-monaco/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Code Editor using Monaco", 3 | "name": "@node-projects/web-component-designer-codeview-monaco", 4 | "version": "0.1.33", 5 | "type": "module", 6 | "main": "./dist/widgets/codeView/code-view-monaco.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "monaco-editor": ">=0.50.0", 17 | "@node-projects/base-custom-webcomponent": ">=0.19.0", 18 | "@node-projects/web-component-designer": ">=0.1.224" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/node-projects/web-component-designer.git" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/web-component-designer-codeview-monaco/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-base-custom-webcomponent/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-base-custom-webcomponent/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-htmlparserservice-base-custom-webcomponent 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent 6 | 7 | npm i @node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent 8 | 9 | ## Description 10 | 11 | This is a HTML Parser Service for Templates inside of BaseCustomWebcomponent, it needs a HTML Parser Service as Parameter. 12 | 13 | ## Usage 14 | 15 | import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser'; 16 | import { BaseCustomWebcomponentParserService } from '@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent'; 17 | serviceContainer.register("htmlParserService", new BaseCustomWebcomponentParserService(new NodeHtmlParserService())); -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-base-custom-webcomponent/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Parser Service for Templates inside of BaseCustomWebcomponent", 3 | "name": "@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent", 4 | "version": "0.1.5", 5 | "type": "module", 6 | "main": "./dist/service/htmlParserService/BaseCustomWebcomponentParserService.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "@node-projects/web-component-designer": ">=0.1.224", 17 | "typescript": ">=5.6.3" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/node-projects/web-component-designer.git" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-base-custom-webcomponent/src/service/htmlParserService/Typescript.d.ts: -------------------------------------------------------------------------------- 1 | //import typescript = require("typescript"); 2 | //export = typescript; 3 | //export as namespace ts; 4 | 5 | import ts = require('typescript'); 6 | 7 | declare global { 8 | namespace globalThis { 9 | export { ts } 10 | } 11 | } -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-base-custom-webcomponent/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-lit-element/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-lit-element/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-htmlparserservice-lit-element 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-lit-element 6 | 7 | npm i @node-projects/web-component-designer-htmlparserservice-lit-element 8 | 9 | ## Description 10 | 11 | This is a HTML Parser Service for Templates inside of LitElement, it needs a HTML Parser Service as Parameter. 12 | And it only can parse very simple Templates at the moment. 13 | It also needed to be switched to use Typescript instead of esprima. 14 | 15 | ## Usage 16 | 17 | import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser'; 18 | import { LitElementParserService } from '@node-projects/web-component-designer-htmlparserservice-lit-element'; 19 | serviceContainer.register("htmlParserService", new LitElementParserService(new NodeHtmlParserService())); -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-lit-element/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Parser Service for Templates inside of BaseCustomWebcomponent", 3 | "name": "@node-projects/web-component-designer-htmlparserservice-lit-element", 4 | "version": "0.1.4", 5 | "type": "module", 6 | "main": "./dist/service/htmlParserService/LitElementParserService.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "esprima-next": "^6.0.3", 17 | "@node-projects/web-component-designer": ">=0.1.224" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/node-projects/web-component-designer.git" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-lit-element/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-nodehtmlparser/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-nodehtmlparser/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-htmlparserservice-nodehtmlparser 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-nodehtmlparser 6 | 7 | npm i @node-projects/web-component-designer-htmlparserservice-nodehtmlparser 8 | 9 | ## Description 10 | 11 | This is a HTML Parser Service using a external Lib. The browser Parser strips some Attributes from Templates, so often it's better to use this parser. 12 | 13 | ## Usage 14 | 15 | import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser'; 16 | serviceContainer.register("htmlParserService", new NodeHtmlParserService()); -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-nodehtmlparser/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Parser Service using the Node HTML Parser", 3 | "name": "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser", 4 | "version": "0.1.11", 5 | "type": "module", 6 | "main": "./dist/service/htmlParserService/NodeHtmlParserService.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "@node-projects/node-html-parser-esm": "^6.2.0", 17 | "@node-projects/web-component-designer": ">=0.1.224" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/node-projects/web-component-designer.git" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/web-component-designer-htmlparserservice-nodehtmlparser/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-miniatureview-html2canvas/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-miniatureview-html2canvas/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Miniature view provided by html2canvas", 3 | "name": "@node-projects/web-component-designer-miniatureview-html2canvas", 4 | "version": "0.1.3", 5 | "type": "module", 6 | "main": "./dist/widgets/miniatureView/html-2-canvas-miniature-view.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "@node-projects/base-custom-webcomponent": ">=0.27.8", 17 | "@node-projects/web-component-designer": ">=0.1.224", 18 | "html2canvas": "*" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/node-projects/web-component-designer.git" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/web-component-designer-miniatureview-html2canvas/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tools/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tools/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-stylesheetservice-css-tools 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-tools 6 | 7 | npm i @node-projects/web-component-designer-stylesheetservice-css-tools 8 | 9 | ## Description 10 | 11 | This is a Stylesheetparser using @adobe/css-tools 12 | 13 | ## Usage 14 | 15 | import { CssToolsStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tools'; 16 | serviceContainer.register("stylesheetService", designerCanvas => new CssToolsStylesheetService(designerCanvas)); -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Stylesheet Parser Service using @adobe/css-tools", 3 | "name": "@node-projects/web-component-designer-stylesheetservice-css-tools", 4 | "version": "0.1.10", 5 | "type": "module", 6 | "main": "./dist/service/stylesheetservice/CssToolsStylesheetService.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "@adobe/css-tools": "4.4.0", 17 | "@node-projects/web-component-designer": ">=0.1.224" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/node-projects/web-component-designer.git" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tree/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tree/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-stylesheetservice-css-tree 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-tree 6 | 7 | npm i @node-projects/web-component-designer-stylesheetservice-css-tree 8 | 9 | ## Description 10 | 11 | This is a Stylesheetparser using @adobe/css-tree 12 | 13 | ## Usage 14 | 15 | import { CssTreeStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tree'; 16 | serviceContainer.register("stylesheetService", designerCanvas => new CssTreeStylesheetService(designerCanvas)); -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Stylesheet Parser Service using css-tree", 3 | "name": "@node-projects/web-component-designer-stylesheetservice-css-tree", 4 | "version": "0.1.4", 5 | "type": "module", 6 | "main": "./dist/index.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "css-tree": "^3.0.0", 17 | "@node-projects/web-component-designer": ">=0.1.224" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/node-projects/web-component-designer.git" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tree/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './service/stylesheetservice/CssTreeStylesheetService.js'; 2 | export * from './service/stylesheetservice/SpecificityCalculator.js'; -------------------------------------------------------------------------------- /packages/web-component-designer-stylesheetservice-css-tree/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-visualization-addons 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-visualization-addons 6 | 7 | npm i @node-projects/web-component-designer-visualization-addons 8 | 9 | ## Description 10 | 11 | This package contains basic elements for a custom visualization, like a script system, a bindings system, ... 12 | It is used for example by the iobroker.webui. 13 | 14 | ## Dependencies 15 | 16 | - long 17 | - blockly 18 | - @adobe/css-tools ( only if you use Bindingshelper.parseCssBindings() ) 19 | 20 | ## Usage 21 | -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/Console.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['console'] = { 3 | init: function () { 4 | this.appendDummyInput() 5 | .appendField('console') 6 | //@ts-ignore 7 | .appendField(new Blockly.FieldDropdown([["debug", "DEBUG"], ["error", "ERROR"], ["info", "INFO"], ["log", "LOG"], ["warn", "WARN"]]), "LEVEL"); 8 | 9 | this.appendValueInput('VALUE') 10 | .setCheck(null) 11 | .appendField('value'); 12 | 13 | this.setInputsInline(true); 14 | this.setPreviousStatement(true, null); 15 | this.setNextStatement(true, null); 16 | this.setColour(230); 17 | } 18 | }; 19 | 20 | //@ts-ignore 21 | Blockly.JavaScript.forBlock['console'] = function(block, generator) { 22 | var level = block.getFieldValue('LEVEL'); 23 | //@ts-ignore 24 | const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC); 25 | let code = `console['${(level).toLowerCase()}'](${value}); 26 | `; 27 | return code; 28 | } -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/Debugger.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['debugger'] = { 3 | init: function () { 4 | this.appendDummyInput() 5 | .appendField("debugger"); 6 | this.setPreviousStatement(true, null); 7 | this.setNextStatement(true, null); 8 | this.setColour(230); 9 | } 10 | }; 11 | 12 | //@ts-ignore 13 | Blockly.JavaScript.forBlock['debugger'] = function (block) { 14 | return 'debugger;\n'; 15 | }; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/Delay.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['delay'] = { 3 | init: function () { 4 | this.appendValueInput('DELAY') 5 | .setCheck("Number") 6 | .appendField('delay'); 7 | 8 | this.setInputsInline(true); 9 | this.setPreviousStatement(true, null); 10 | this.setNextStatement(true, null); 11 | this.setColour(230); 12 | } 13 | }; 14 | 15 | //@ts-ignore 16 | Blockly.JavaScript.forBlock['delay'] = function (block) { 17 | //@ts-ignore 18 | const delay = Blockly.JavaScript.valueToCode(block, 'DELAY', Blockly.JavaScript.ORDER_ATOMIC); 19 | let code = 'await delay(' + delay + ');\n'; 20 | return code; 21 | }; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/GetParameter.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['get_parameter'] = { 3 | init: function () { 4 | this.appendValueInput('NAME') 5 | .setCheck("String") 6 | //@ts-ignore 7 | .appendField('get_parameter'); 8 | 9 | this.setInputsInline(true); 10 | this.setOutput(true, null); 11 | this.setColour(230); 12 | } 13 | }; 14 | 15 | //@ts-ignore 16 | Blockly.JavaScript.forBlock['get_parameter'] = function (block, generator) { 17 | //@ts-ignore 18 | const name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC); 19 | const code = `context.parameters[${name}]`; 20 | //@ts-ignore 21 | return [code, Blockly.JavaScript.ORDER_NONE]; 22 | }; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/GetState.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['get_state'] = { 3 | init: function () { 4 | this.appendValueInput('OID') 5 | .setCheck("String") 6 | //@ts-ignore 7 | .appendField('get_state'); 8 | 9 | this.setInputsInline(true); 10 | this.setOutput(true, null); 11 | this.setColour(230); 12 | } 13 | }; 14 | 15 | //@ts-ignore 16 | Blockly.JavaScript.forBlock['get_state'] = function (block, generator) { 17 | //@ts-ignore 18 | const id = Blockly.JavaScript.valueToCode(block, 'OID', Blockly.JavaScript.ORDER_ATOMIC); 19 | const code = `(await visualizationHandler.getState((${id}[0] === '.' ? relativeSignalsPath : '') + ${id})).val`; 20 | //@ts-ignore 21 | return [code, Blockly.JavaScript.ORDER_NONE]; 22 | }; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/GetSubProperty.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['get_sub_property'] = { 3 | init: function () { 4 | this.appendDummyInput() 5 | .appendField("getSubProperty"); 6 | 7 | this.appendValueInput('OBJECT') 8 | .setCheck('Object') 9 | .appendField('object'); 10 | 11 | this.appendValueInput('PROPERTYPATH') 12 | .setCheck("String") 13 | .appendField('propertypath'); 14 | 15 | this.setInputsInline(true); 16 | this.setOutput(true, null); 17 | this.setColour(230); 18 | } 19 | }; 20 | 21 | //@ts-ignore 22 | Blockly.JavaScript.forBlock['get_sub_property'] = function (block, generator) { 23 | //@ts-ignore 24 | const obj = Blockly.JavaScript.valueToCode(block, 'OBJECT', Blockly.JavaScript.ORDER_ATOMIC); 25 | //@ts-ignore 26 | const propertypath = Blockly.JavaScript.valueToCode(block, 'PROPERTYPATH', Blockly.JavaScript.ORDER_ATOMIC); 27 | const code = `extractPart(${obj}, ${propertypath})`; 28 | //@ts-ignore 29 | return [code, Blockly.JavaScript.ORDER_NONE]; 30 | }; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/Return.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['return'] = { 3 | init: function () { 4 | this.appendDummyInput() 5 | .appendField("return"); 6 | this.appendValueInput("VALUE") 7 | .setCheck(null) 8 | .appendField("value"); 9 | this.setInputsInline(true); 10 | this.setPreviousStatement(true, null); 11 | this.setColour(230); 12 | } 13 | }; 14 | 15 | //@ts-ignore 16 | Blockly.JavaScript.forBlock['return'] = function (block) { 17 | //@ts-ignore 18 | const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC); 19 | let code = 'return ' + value + ';'; 20 | return code; 21 | }; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/SetState.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.Blocks['set_state'] = { 3 | init: function () { 4 | this.appendValueInput('OID') 5 | .setCheck("String") 6 | //@ts-ignore 7 | .appendField('set_state'); 8 | 9 | this.appendValueInput('VALUE') 10 | .setCheck(null) 11 | .appendField('with'); 12 | 13 | this.setInputsInline(true); 14 | this.setPreviousStatement(true, null); 15 | this.setNextStatement(true, null); 16 | this.setColour(230); 17 | } 18 | }; 19 | 20 | //@ts-ignore 21 | Blockly.JavaScript.forBlock['set_state'] = function (block) { 22 | //@ts-ignore 23 | const id = Blockly.JavaScript.valueToCode(block, 'OID', Blockly.JavaScript.ORDER_ATOMIC); 24 | //@ts-ignore 25 | const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC); 26 | const code = `await visualizationHandler.setState((${id}[0] === '.' ? relativeSignalsPath : '') + ${id}, ${value});\n`; 27 | 28 | return code; 29 | }; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/StartEvent.ts: -------------------------------------------------------------------------------- 1 | //@ts-ignore 2 | Blockly.defineBlocksWithJsonArray([ 3 | { 4 | 'type': 'start_event', 5 | 'message0': 'Event %1', 6 | 'nextStatement': null, 7 | 'style': 'hat_blocks', 8 | 'args0': [ 9 | { 10 | 'type': 'field_variable', 11 | 'name': 'EVENTVAR', 12 | 'variable': 'event' 13 | } 14 | ], 15 | }, 16 | ]); 17 | 18 | //@ts-ignore 19 | Blockly.JavaScript.forBlock['start_event'] = function (block) { 20 | //@ts-ignore 21 | let name = Blockly.JavaScript.getVariableName(block.getField('EVENTVAR').variable.name); 22 | return name + ' = ' + 'eventData;\n'; 23 | }; 24 | -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/blockly/components/components.ts: -------------------------------------------------------------------------------- 1 | import './Console.js'; 2 | import './Debugger.js'; 3 | import './Delay.js'; 4 | import './GetParameter.js'; 5 | import './GetState.js'; 6 | import './GetSubProperty.js'; 7 | import './OpenScreen.js'; 8 | import './QuerySelector.js'; 9 | import './QuerySelectorAll.js'; 10 | import './SetElement.js'; 11 | import './SetState.js'; 12 | import './StartEvent.js'; -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/interfaces/IScriptMultiplexValue.ts: -------------------------------------------------------------------------------- 1 | export class IScriptMultiplexValue { 2 | /** 3 | * signal - read the value from a Signal 4 | * property - read the value from a property of the customControl (not usable in screens) 5 | * event - read the value of a property of the event object 6 | * parameter - a parameter you hand over 7 | * context - a value of the context 8 | * complexString - a string with signals (contained in {}) 9 | * complexSignal - read the value from a signal wich name is build here (it can contain other signals in {}) 10 | * expression - js expression, 'ctx' is context object 11 | */ 12 | source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression' | 'context'; 13 | /** 14 | * Name of the signal, the property of the component or the parameter of the script 15 | * or for example in a event : srcElement.value to get the value of a input wich raises the event 16 | * @TJS-format signal 17 | */ 18 | name: string; 19 | } -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/interfaces/VisualisationElementScript.ts: -------------------------------------------------------------------------------- 1 | export interface VisualisationElementScript { 2 | init?(instance: HTMLElement, shadowRoot: ShadowRoot); 3 | 4 | connectedCallback?(instance: HTMLElement, shadowRoot: ShadowRoot); 5 | disconnectedCallback?(instance: HTMLElement, shadowRoot: ShadowRoot); 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/interfaces/VisualizationBinding.ts: -------------------------------------------------------------------------------- 1 | //Binding: haow to use... 2 | //binding:display="{'signal':'aa',..." 3 | //binding:value="aa" -> simplified form when only binding a direct property 4 | 5 | import type { BindingTarget } from "@node-projects/web-component-designer"; 6 | 7 | export interface VisualizationBinding { 8 | interval?: number; //if triggered by interval 9 | signal: string; 10 | inverted?: boolean; 11 | twoWay?: boolean; 12 | events?: string[]; 13 | target: BindingTarget; 14 | converter?: Record; 15 | expression?: string; // could also be blockly ora complete javascript 16 | expressionTwoWay?: string; 17 | compiledExpression?: Function; 18 | compiledExpressionTwoWay?: Function; 19 | type?: string; 20 | writeBackSignal?: string; 21 | historic?: { reloadInterval?: number, [nm: string]: any }; 22 | 23 | maybeLitElement?: boolean, 24 | litEventNames?: string[] 25 | } -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/interfaces/VisualizationShell.ts: -------------------------------------------------------------------------------- 1 | import { IBindableObjectsBrowser } from "@node-projects/web-component-designer"; 2 | 3 | export interface VisualizationShell { 4 | openConfirmation(element: HTMLElement, options: 5 | { 6 | x?: number, 7 | y?: number, 8 | width?: number, 9 | height?: number, 10 | parent?: HTMLElement, 11 | abortSignal?: AbortSignal, 12 | disableResize?: boolean, 13 | confirmText?: string, 14 | cancelText?: string 15 | }): Promise; 16 | 17 | createBindableObjectBrowser: () => IBindableObjectsBrowser 18 | } -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/scripting/Script.ts: -------------------------------------------------------------------------------- 1 | import { ScriptCommands } from "./ScriptCommands.js"; 2 | 3 | export class Script { 4 | name?: string; 5 | relativeSignalsPath?: string; 6 | commands: ScriptCommands[]; 7 | parameters?: Record; 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/services/PropertyGridDragDropService.ts: -------------------------------------------------------------------------------- 1 | import { IProperty, IDesignItem, IPropertyGridDragDropService } from "@node-projects/web-component-designer"; 2 | 3 | export class PropertyGridDragDropService implements IPropertyGridDragDropService { 4 | 5 | dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move' { 6 | return 'copy'; 7 | } 8 | 9 | dropOnProperty?(event: DragEvent, property: IProperty, dropObject: any, designItems: IDesignItem[]) { 10 | property.service.setValue(designItems, property, dropObject.text); 11 | } 12 | } -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/src/setupVisuService.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/node-projects/web-component-designer/1092b7575df674b4278938cf6b62fbfbbacc7ead/packages/web-component-designer-visualization-addons/src/setupVisuService.ts -------------------------------------------------------------------------------- /packages/web-component-designer-visualization-addons/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-fancytree/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-fancytree/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-widgets-fancytree 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-widgets-fancytree 6 | 7 | npm i @node-projects/web-component-designer-widgets-fancytree 8 | 9 | ## Description 10 | 11 | This package contains widgets using jquery/fancytree. This are more powerfull than the included ones in the designer. 12 | 13 | ## Usage 14 | 15 | you need to load JQuery and FancyTree before or you could load it via 16 | 17 | import '@node-projects/web-component-designer-widgets-fancytree/dist/loadJqueryAndFancytree.js'; 18 | 19 | then import the widgets: 20 | 21 | import '@node-projects/web-component-designer-widgets-fancytree'; 22 | 23 | now you could use following widgets: 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-fancytree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Widgets using JQuery FancTree", 3 | "name": "@node-projects/web-component-designer-widgets-fancytree", 4 | "version": "0.1.16", 5 | "type": "module", 6 | "main": "./dist/index.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "@node-projects/base-custom-webcomponent": ">=0.27.8", 17 | "@node-projects/web-component-designer": ">=0.1.224", 18 | "jquery": "^3.7.1", 19 | "jquery.fancytree": "^2.38.3" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/node-projects/web-component-designer.git" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-fancytree/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./widgets/bindableObjectsBrowser/bindable-objects-browser.js"; 2 | export * from "./widgets/paletteView/paletteTreeView.js"; 3 | export * from "./widgets/treeView/treeViewExtended.js"; -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-fancytree/src/loadJqueryAndFancytree.ts: -------------------------------------------------------------------------------- 1 | await import('jquery'); 2 | await import('jquery.fancytree/dist/jquery.fancytree-all-deps.js'); 3 | export { } -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-fancytree/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-widgets-wunderbaum 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-widgets-wunderbaum 6 | 7 | npm i @node-projects/web-component-designer-widgets-wunderbaum 8 | 9 | ## Description 10 | 11 | This package contains widgets using wunderbaum. This are more powerfull than the included ones in the designer. 12 | 13 | ## Usage 14 | 15 | then import the widgets: 16 | 17 | import '@node-projects/web-component-designer-widgets-wunderbaum'; 18 | 19 | now you could use following widgets: 20 | 21 | 22 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/assets/icons/collapse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/assets/icons/expand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/assets/images/expander.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/assets/images/expanderClose.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/assets/images/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/assets/images/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Widgets using wunderbaum", 3 | "name": "@node-projects/web-component-designer-widgets-wunderbaum", 4 | "version": "0.1.33", 5 | "type": "module", 6 | "main": "./dist/index.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "@node-projects/base-custom-webcomponent": ">=0.27.8", 17 | "@node-projects/web-component-designer": ">=0.1.224", 18 | "wunderbaum": ">=0.13.0" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/node-projects/web-component-designer.git" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./widgets/bindableObjectsBrowser/bindable-objects-browser.js"; 2 | export * from "./widgets/paletteView/paletteTreeView.js"; 3 | export * from "./widgets/treeView/treeViewExtended.js"; 4 | export * from "./widgets/treeView/ExpandCollapseContextMenu.js"; 5 | export * from "./widgets/WunderbaumOptions.js"; -------------------------------------------------------------------------------- /packages/web-component-designer-widgets-wunderbaum/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.js" 12 | ], 13 | "references": [ 14 | { 15 | "path": "../web-component-designer/tsconfig.json" 16 | }, 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/README.md: -------------------------------------------------------------------------------- 1 | # web-component-designer-zpl 2 | 3 | ## NPM Package 4 | 5 | https://www.npmjs.com/package/@node-projects/web-component-designer-zpl 6 | 7 | npm i @node-projects/web-component-designer-zpl 8 | 9 | ## Description 10 | 11 | This package contains widgets and services wich help to create a zpl designer. 12 | 13 | ## Usage 14 | 15 | see the zpl designer sample application -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "web-component-designer addon: Widgets and Services for creating a ZPL Designer", 3 | "name": "@node-projects/web-component-designer-zpl", 4 | "version": "0.1.20", 5 | "type": "module", 6 | "main": "./dist/index.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "tsc": "tsc", 11 | "build": "tsc", 12 | "link": "npm link", 13 | "prepublishOnly": "npm run build" 14 | }, 15 | "dependencies": { 16 | "@node-projects/base-custom-webcomponent": ">=0.27.8", 17 | "@node-projects/web-component-designer": ">=0.1.247", 18 | "jsbarcode": "^3.11.6" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/node-projects/web-component-designer.git" 23 | } 24 | } -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/src/extensions/ZplLayoutResizeExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IExtensionManager, IDesignerCanvas, IDesignItem, ResizeExtensionProvider } from '@node-projects/web-component-designer'; 2 | import { ZplImage } from '../widgets/zpl-image.js'; 3 | import { ZplBarcode } from '../widgets/zpl-barcode.js'; 4 | import { ZplText } from '../widgets/zpl-text.js'; 5 | 6 | 7 | 8 | export class ZplLayoutResizeExtensionProvider extends ResizeExtensionProvider { 9 | override shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { 10 | //return designItem.element.localName !== MfcConfigRoute.is; 11 | switch (designItem.name) { 12 | case ZplImage.is: 13 | case ZplBarcode.is: 14 | case ZplText.is: 15 | return false; 16 | } 17 | return true; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./widgets/zpl-barcode.js"; 2 | export * from "./widgets/zpl-graphic-box.js"; 3 | export * from "./widgets/zpl-graphic-circle.js"; 4 | export * from "./widgets/zpl-graphic-diagonal-line.js"; 5 | export * from "./widgets/zpl-image.js"; 6 | export * from "./widgets/zpl-text.js"; 7 | 8 | export * from "./monaco/ZplLanguage.js"; 9 | 10 | export * from "./extensions/ZplLayoutResizeExtensionProvider.js"; 11 | 12 | export * from "./services/ZplImageDrop.js"; 13 | export * from "./services/ZplLayoutCopyPasteService.js"; 14 | export * from "./services/ZplLayoutPlacementService.js"; 15 | export * from "./services/ZplParserService.js"; 16 | 17 | export * from "./jsBarcodeOptions.js"; 18 | export * from "./qr.js"; 19 | export * from "./setupZplServiceContainer.js"; 20 | export * from "./zplHelper.js"; -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/src/jsBarcodeOptions.ts: -------------------------------------------------------------------------------- 1 | export type BarcodeOptions = { 2 | format?: BarcodeFormat; 3 | width?: number; 4 | height?: number; 5 | displayValue?: boolean; 6 | text?: string; 7 | fontOptions?: string; 8 | font?: string; 9 | textAlign?: string; 10 | textPosition?: string; 11 | textMargin?: number; 12 | fontSize?: number; 13 | background?: string; 14 | lineColor?: string; 15 | margin?: number; 16 | marginTop?: number; 17 | marginBottom?: number; 18 | marginLeft?: number; 19 | marginRight?: number; 20 | flat?: boolean; 21 | valid?: Function; 22 | } 23 | 24 | export enum BarcodeFormat { 25 | CODE128 = "CODE128", 26 | // CODE128A = "CODE128A", 27 | // CODE128B = "CODE128B", 28 | // CODE123C = "CODE128C", 29 | // CODE39 = "CODE39", 30 | // EAN2 = "EAN2", 31 | // EAN5 = "EAN5", 32 | // EAN8 = "EAN8", 33 | EAN13 = "EAN13", 34 | // UPC = "UPC", 35 | QR = 'QR', 36 | } -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/src/monaco/ZplLanguage.ts: -------------------------------------------------------------------------------- 1 | export function addZplLanguageToMonaco(monaco?: any) { 2 | if (!monaco) 3 | //@ts-ignore 4 | monaco = window.monaco; 5 | //@ts-ignore 6 | monaco.languages.register({ id: "zplLanguage" }); 7 | 8 | //@ts-ignore 9 | monaco.languages.setMonarchTokensProvider("zplLanguage", { 10 | tokenizer: { 11 | root: [ 12 | // lookbehind seems not to work - [/(?<=\^FD)[^\^]*/, "text"], 13 | [/\^FX[^\^]*/, "comment"], 14 | [/\^FD[^\^]*/, "text"], 15 | [/\^../, "command"], 16 | ], 17 | }, 18 | }); 19 | 20 | //@ts-ignore 21 | monaco.editor.defineTheme("zplTheme", { 22 | base: "vs", 23 | inherit: false, 24 | rules: [ 25 | { token: "text", foreground: "999999" }, 26 | { token: "comment", foreground: "008000" }, 27 | { token: "command", foreground: "0000FF", fontStyle: "bold" }, 28 | ], 29 | colors: { 30 | "editor.foreground": "#000000", 31 | }, 32 | }) 33 | } -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/src/services/ZplLayoutCopyPasteService.ts: -------------------------------------------------------------------------------- 1 | import { ICopyPasteService, IDesignItem, InstanceServiceContainer, ServiceContainer, IRect, getTextFromClipboard, copyTextToClipboard, DefaultHtmlParserService } from '@node-projects/web-component-designer'; 2 | 3 | export class ZplLayoutCopyPasteService implements ICopyPasteService { 4 | constructor() { 5 | } 6 | 7 | async copyItems(designItems: IDesignItem[]): Promise { 8 | let savedata = ""; 9 | for (let d of designItems) { 10 | savedata += d.element.outerHTML; 11 | } 12 | await copyTextToClipboard(savedata); 13 | } 14 | 15 | async getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]> { 16 | let result: IDesignItem[] = []; 17 | const text = await getTextFromClipboard(); 18 | let htmlParser = new DefaultHtmlParserService(); 19 | result = await htmlParser.parse(text, serviceContainer, instanceServiceContainer, true); 20 | return [result, null]; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/src/widgets/zpl-comment.ts: -------------------------------------------------------------------------------- 1 | import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; 2 | 3 | export class ZplComment extends BaseCustomWebComponentConstructorAppend { 4 | 5 | static override readonly style = css` 6 | :host { 7 | display: none; 8 | }`; 9 | 10 | static override readonly template = html``; 11 | 12 | static readonly is = 'zpl-comment'; 13 | 14 | public content: string; 15 | 16 | static readonly properties = { 17 | content: String 18 | } 19 | 20 | constructor() { 21 | super(); 22 | this._restoreCachedInititalValues(); 23 | } 24 | 25 | async ready() { 26 | this._parseAttributesToProperties(); 27 | } 28 | 29 | public createZpl() { 30 | let zpl = ""; 31 | zpl += "^FX" + this.content 32 | return zpl; 33 | } 34 | } 35 | 36 | customElements.define(ZplComment.is, ZplComment); -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/src/zplHelper.ts: -------------------------------------------------------------------------------- 1 | export function getZplCoordinates(obj: any, alignment: 0|1|2) { 2 | let x = obj.style.left.replace("px", ""); 3 | let y= obj.style.top.replace("px", ""); 4 | return "^FO" + x + "," + y + "," + alignment; 5 | } 6 | -------------------------------------------------------------------------------- /packages/web-component-designer-zpl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false, 8 | "resolveJsonModule": true 9 | }, 10 | "include": [ 11 | "src/**/*.ts", 12 | "src/**/*.js", 13 | "src/**/*.json" 14 | ], 15 | "references": [ 16 | { 17 | "path": "../web-component-designer/tsconfig.json" 18 | }, 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/web-component-designer/.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | test/ 3 | node_modules/ 4 | tsconfig.json 5 | tsconfig.tsbuildinfo 6 | !dist -------------------------------------------------------------------------------- /packages/web-component-designer/assets/designerCanvasIframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/alignHorizontalCenter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/alignHorizontalLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/alignHorizontalRight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/alignVerticalBottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/alignVerticalCenter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/alignVerticalTop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/cut.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/horizontalDistribute.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/jump.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/moveFirst.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/moveLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/paste.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/redo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/rotateLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/rotateRight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/save.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/screenshot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/verticalDistribute.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/zoomIn.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/icons/zoomOut.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-content-flex-end-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-content-space-around-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-content-space-between-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-content-space-evenly-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-items-baseline-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-items-center-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-items-end-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-items-flex-end-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-items-stretch-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-self-center-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-self-flex-end-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/align-self-stretch-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/baseline-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/flex-direction-column-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/flex-direction-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/flex-wrap-nowrap-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/info.txt: -------------------------------------------------------------------------------- 1 | Images from 2 | https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-content-center-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-content-flex-start-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-content-space-around-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-content-space-between-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-content-space-evenly-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-content-start-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-items-center-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-items-start-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/chromeDevtools/justify-items-stretch-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/display/block.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/display/inline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/layout/AlignCenter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/layout/AlignLeft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/layout/BringOneToBack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/layout/BringOneToFront.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/layout/BringToBack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/layout/BringToFront.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/tools/DrawLineTool.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/tools/Margin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/tools/Padding.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/tools/PointerTool.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/tools/SelectRectTool.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layer 1 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/tools/TextBoxTool.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | T 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/tools/TextTool.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/treeview/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/node-projects/web-component-designer/1092b7575df674b4278938cf6b62fbfbbacc7ead/packages/web-component-designer/assets/images/treeview/dot.png -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/treeview/eyeclose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/node-projects/web-component-designer/1092b7575df674b4278938cf6b62fbfbbacc7ead/packages/web-component-designer/assets/images/treeview/eyeclose.png -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/treeview/eyeopen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/node-projects/web-component-designer/1092b7575df674b4278938cf6b62fbfbbacc7ead/packages/web-component-designer/assets/images/treeview/eyeopen.png -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/treeview/license.txt: -------------------------------------------------------------------------------- 1 | WPF Designer Icons are taken from 2 | Fugue Icons Library: 3 | License: Creative Commons Attribution 3.0 License 4 | http://p.yusukekamiyamane.com/ 5 | 6 | Copied from the Fugue Icon Library and left unmodified: 7 | 8 | - Icons.16x16.WpfOutline.Eye.png => eyeopen.png 9 | - Icons.16x16.WpfOutline.EyeClosed.png => eyeclosed.png 10 | - lock.png -------------------------------------------------------------------------------- /packages/web-component-designer/assets/images/treeview/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/node-projects/web-component-designer/1092b7575df674b4278938cf6b62fbfbbacc7ead/packages/web-component-designer/assets/images/treeview/lock.png -------------------------------------------------------------------------------- /packages/web-component-designer/config/elements-native.json: -------------------------------------------------------------------------------- 1 | { 2 | "elements": 3 | [ 4 | "div", 5 | "label", 6 | "input", 7 | "textarea", 8 | "select", 9 | {"tag" : "button", "defaultWidth": "80px", "defaultHeight": "30px", "defaultContent": "Button" }, 10 | "img", 11 | "iframe", 12 | {"tag" : "a" }, 13 | "p", 14 | "span", 15 | "b", 16 | "i", 17 | "u", 18 | "br", 19 | "em", 20 | "q", 21 | "small", 22 | "strong", 23 | "form", 24 | "h1", 25 | "h2", 26 | "h3", 27 | "h4", 28 | "h5", 29 | "h6", 30 | "ol", 31 | "ul", 32 | "li", 33 | "pre", 34 | "table", 35 | "caption", 36 | "colgroup", 37 | "col", 38 | "thead", 39 | "th", 40 | "tbody", 41 | "tr", 42 | "td", 43 | "tfoot" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /packages/web-component-designer/jest.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | roots: ['/tests'], 3 | testMatch: ['**/?(*.)+(spec|test).+(ts|tsx|js)'], 4 | preset: "ts-jest", 5 | testEnvironment: "node", 6 | extensionsToTreatAsEsm: ['.ts', '.mts'], 7 | transform: { 8 | '^.+\\.(mts|ts|tsx)$': [ 9 | "ts-jest", 10 | { 11 | "useESM": true 12 | } 13 | ] 14 | } 15 | } -------------------------------------------------------------------------------- /packages/web-component-designer/jsr.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@node-projects/web-component-designer", 3 | "version": "0.1.180", 4 | "exports": "./src/index.ts" 5 | } -------------------------------------------------------------------------------- /packages/web-component-designer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "A WYSIWYG designer webcomponent for html components", 3 | "name": "@node-projects/web-component-designer", 4 | "version": "0.1.260", 5 | "type": "module", 6 | "main": "./dist/index.js", 7 | "author": "jochen.kuehner@gmx.de", 8 | "license": "MIT", 9 | "scripts": { 10 | "test": "node --experimental-vm-modules ../../node_modules/jest/bin/jest.js", 11 | "tsc": "tsc", 12 | "build": "tsc", 13 | "link": "npm link", 14 | "watch": "pm2 start tsc --watch", 15 | "prepublishOnly": "npm run build" 16 | }, 17 | "dependencies": { 18 | "@node-projects/base-custom-webcomponent": ">=0.27.8" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "^22.8.6", 22 | "mdn-data": "^2.4.2" 23 | }, 24 | "repository": { 25 | "type": "git", 26 | "url": "git+https://github.com/node-projects/web-component-designer.git" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/Constants.ts: -------------------------------------------------------------------------------- 1 | export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion'; 2 | export const dragDropFormatNameBindingObject = 'text/json/bindingobject'; 3 | export const dragDropFormatNamePropertyGrid = 'text/json/propertydrop'; 4 | 5 | let imporUrl = new URL((import.meta.url)); 6 | export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/'; -------------------------------------------------------------------------------- /packages/web-component-designer/src/commandHandling/IUiCommand.ts: -------------------------------------------------------------------------------- 1 | import { CommandType } from './CommandType.js'; 2 | 3 | export interface IUiCommand { 4 | type: CommandType; 5 | event?: Event; 6 | special?: string; 7 | parameter?: any; 8 | 9 | altKey?: boolean; 10 | ctrlKey?: boolean; 11 | metaKey?: boolean; 12 | shiftKey?: boolean; 13 | } 14 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/commandHandling/IUiCommandHandler.ts: -------------------------------------------------------------------------------- 1 | import { IUiCommand } from './IUiCommand.js'; 2 | 3 | export interface IUiCommandHandler { 4 | executeCommand: (command: IUiCommand) => void; 5 | canExecuteCommand: (command: IUiCommand) => boolean; 6 | } 7 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/Browser.ts: -------------------------------------------------------------------------------- 1 | export const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/ITextWriter.ts: -------------------------------------------------------------------------------- 1 | export interface ITextWriter { 2 | get position(): number; 3 | isLastCharNewline(): boolean; 4 | levelRaise(): void 5 | levelShrink(): void 6 | write(text: string): void 7 | writeLine(text: string): void 8 | writeIndent(): void 9 | writeNewline(): void 10 | getString(): string 11 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/IndentedTextWriter.ts: -------------------------------------------------------------------------------- 1 | import { ITextWriter } from './ITextWriter.js'; 2 | 3 | export class IndentedTextWriter implements ITextWriter { 4 | private _textHolder: string = '' 5 | public readonly indent: number = 4; 6 | public level: number = 0; 7 | 8 | public get position(): number { 9 | return this._textHolder.length; 10 | } 11 | 12 | public isLastCharNewline() { 13 | return this._textHolder[this._textHolder.length - 1] === '\n'; 14 | } 15 | 16 | public levelRaise() { 17 | this.level++; 18 | } 19 | 20 | public levelShrink() { 21 | this.level--; 22 | } 23 | 24 | public write(text: string) { 25 | this._textHolder += text; 26 | } 27 | 28 | public writeLine(text: string) { 29 | this.writeIndent(); 30 | this._textHolder += text; 31 | this.writeNewline(); 32 | } 33 | 34 | public writeIndent() { 35 | this._textHolder += ''.padEnd(this.level * this.indent, ' '); 36 | } 37 | 38 | public writeNewline() { 39 | this._textHolder += '\n'; 40 | } 41 | 42 | public getString() { 43 | return this._textHolder; 44 | } 45 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/KeyboardHelper.ts: -------------------------------------------------------------------------------- 1 | import { isAppleDevice } from "./Helper.js"; 2 | 3 | export function hasCommandKey(event: KeyboardEvent | MouseEvent | PointerEvent | DragEvent | WheelEvent) { 4 | if (isAppleDevice()) 5 | return event.metaKey; 6 | return event.ctrlKey; 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/SimpleTextWriter.ts: -------------------------------------------------------------------------------- 1 | import { ITextWriter } from './ITextWriter.js'; 2 | 3 | export class SimpleTextWriter implements ITextWriter { 4 | private _textHolder: string = '' 5 | 6 | public get position(): number { 7 | return this._textHolder.length; 8 | } 9 | 10 | public isLastCharNewline() { 11 | return this._textHolder[this._textHolder.length - 1] === '\n'; 12 | } 13 | 14 | public levelRaise() { 15 | } 16 | 17 | public levelShrink() { 18 | } 19 | 20 | public write(text: string) { 21 | this._textHolder += text; 22 | } 23 | 24 | public writeLine(text: string) { 25 | this._textHolder += text; 26 | } 27 | 28 | public writeIndent() { 29 | } 30 | 31 | public writeNewline() { 32 | } 33 | 34 | public getString() { 35 | return this._textHolder; 36 | } 37 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/StylesheetHelper.ts: -------------------------------------------------------------------------------- 1 | export function stylesheetFromString(window: Window, text: string) { 2 | //@ts-ignore 3 | const newStylesheet = new window.CSSStyleSheet(); 4 | newStylesheet.replaceSync(text); 5 | return newStylesheet; 6 | } 7 | 8 | export function stylesheetToString(stylesheet: CSSStyleSheet) { 9 | return Array.from(stylesheet.cssRules).map(rule => rule.cssText).join('\n'); 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/SvgHelper.ts: -------------------------------------------------------------------------------- 1 | export function isVisualSvgElement(element: SVGElement) { 2 | let el: Element = element; 3 | while (el) { 4 | if (el instanceof (el.ownerDocument.defaultView ?? window).SVGSVGElement) 5 | return true; 6 | if (el instanceof (el.ownerDocument.defaultView ?? window).SVGDefsElement) 7 | return false; 8 | if (el instanceof (el.ownerDocument.defaultView ?? window).SVGMetadataElement) 9 | return false; 10 | el = el.parentElement; 11 | } 12 | return true; 13 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/TextHelper.ts: -------------------------------------------------------------------------------- 1 | let canvas: HTMLCanvasElement; 2 | /** 3 | * Uses canvas.measureText to compute and return the width of the given text of given font in pixels. 4 | * 5 | * @param {String} text The text to be rendered. 6 | * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana"). 7 | * 8 | * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393 9 | */ 10 | export function getTextWidth(text: string, font: string) { 11 | if (!canvas) 12 | canvas = document.createElement("canvas"); 13 | const context = canvas.getContext("2d"); 14 | context.font = font; 15 | const metrics = context.measureText(text); 16 | return metrics.width; 17 | } 18 | 19 | export function getFont(el: Element) { 20 | const fontWeight = getComputedStyle(el).fontWeight || 'normal'; 21 | const fontSize = getComputedStyle(el).fontSize || '16px'; 22 | const fontFamily = getComputedStyle(el).fontFamily || 'Times New Roman'; 23 | 24 | return `${fontWeight} ${fontSize} ${fontFamily}`; 25 | } 26 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/XmlHelper.ts: -------------------------------------------------------------------------------- 1 | export function encodeXMLChars(value: string) { 2 | return value.replace(/&/g, '&') 3 | .replace(//g, '>') 5 | .replace(/"/g, '"') 6 | .replace(/'/g, '''); 7 | }; 8 | 9 | export function decodeXMLChars(value: string) { 10 | return value.replace(/'/g, "'") 11 | .replace(/"/g, '"') 12 | .replace(/>/g, '>') 13 | .replace(/</g, '<') 14 | .replace(/&/g, '&'); 15 | }; -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/contextMenu/IContextMenuItem.ts: -------------------------------------------------------------------------------- 1 | export interface IContextMenu { 2 | close: () => void; 3 | }; 4 | 5 | export interface IContextMenuItem { 6 | readonly id?: string, 7 | readonly title?: string, 8 | readonly icon?: string, 9 | readonly children?: IContextMenuItem[], 10 | readonly disabled?: boolean, 11 | readonly shortCut?: string; 12 | readonly checked?: boolean; 13 | 14 | action?: (event: MouseEvent, item: IContextMenuItem, context?: any, menu?: IContextMenu) => void 15 | }; -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/helper/getBoxQuads.global.d.ts: -------------------------------------------------------------------------------- 1 | export { }; 2 | 3 | declare global { 4 | interface Node { 5 | convertQuadFromNode(quad: DOMQuadInit, from: Element, options?: { fromBox?: 'margin' | 'border' | 'padding' | 'content', toBox?: 'margin' | 'border' | 'padding' | 'content', iframes?: HTMLIFrameElement[] }): DOMQuad 6 | convertRectFromNode(rect: {x: number, y: number, width: number, height: number}, from: Element, options?: { fromBox?: 'margin' | 'border' | 'padding' | 'content', toBox?: 'margin' | 'border' | 'padding' | 'content', iframes?: HTMLIFrameElement[] }): DOMQuad 7 | convertPointFromNode(point: DOMPointInit, from: Element, options?: { fromBox?: 'margin' | 'border' | 'padding' | 'content', toBox?: 'margin' | 'border' | 'padding' | 'content', iframes?: HTMLIFrameElement[] }): DOMPoint 8 | getBoxQuads(options?: { box?: 'margin' | 'border' | 'padding' | 'content', relativeTo?: Element, iframes?: HTMLIFrameElement[] }): DOMQuad[] 9 | } 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/item/BindingMode.ts: -------------------------------------------------------------------------------- 1 | export enum BindingMode { 2 | oneWay = 'oneWay', 3 | twoWay = 'twoWay' 4 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/item/BindingTarget.ts: -------------------------------------------------------------------------------- 1 | export enum BindingTarget { 2 | explicitProperty = 'explicitProperty', 3 | property = 'property', 4 | attribute = 'attribute', 5 | class = 'class', 6 | css = 'css', 7 | cssvar = 'cssvar', 8 | event = 'event', 9 | content = 'content', //innertext or html... mhmmm, 10 | visible = 'visible' 11 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/item/NodeType.ts: -------------------------------------------------------------------------------- 1 | export enum NodeType { 2 | Element = 1, 3 | Attribute = 2, 4 | TextNode = 3, 5 | Comment = 8, 6 | Document = 9, 7 | DocumentFragment = 11 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/item/info.txt: -------------------------------------------------------------------------------- 1 | Todo -> unfiy Properties & Attributes. 2 | 3 | DesignItem should only store Attributes, not Properties. 4 | Maybe setAttribute should set Attribute directly, setProperty should use PropertiesService?? 5 | or do we always use properties PropertiesService? 6 | 7 | Attributes List in Properties shows all set attributes and you could also add one, 8 | but they show no binding etc information cause they are only the real attributes 9 | 10 | how should we serialize bindings?? if they are binding objects, like in tagbinding? 11 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/IService.ts: -------------------------------------------------------------------------------- 1 | export interface IService { 2 | 3 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/IServiceContainer.ts: -------------------------------------------------------------------------------- 1 | export interface IServiceContainer { 2 | register(name: string, service: any); 3 | getLastService(service: string): any; 4 | getServices(service: string): any[]; 5 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectType.ts: -------------------------------------------------------------------------------- 1 | export enum BindableObjectType { 2 | undefined = 'undefined', 3 | folder = 'folder', 4 | boolean = 'boolean', 5 | number = 'number', 6 | string = 'string', 7 | date = 'date', 8 | color = 'color', 9 | object = 'object', 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectsTarget.ts: -------------------------------------------------------------------------------- 1 | export type BindableObjectsTarget = 'itemsView' | 'binding' | 'script' | 'property'; -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObject.ts: -------------------------------------------------------------------------------- 1 | import { BindableObjectType } from './BindableObjectType.js'; 2 | 3 | export interface IBindableObject { 4 | readonly bindabletype?: 'signal' | 'property' | 'context' 5 | readonly specialType?: string //e.g. signalProperty 6 | readonly type: BindableObjectType 7 | readonly name: string; 8 | readonly fullName: string; 9 | readonly children?: false | IBindableObject[]; 10 | readonly originalObject?: T; 11 | readonly description?: string; 12 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectDragDropService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; 3 | import { IProperty } from "../propertiesService/IProperty.js"; 4 | import { IBindableObject } from "./IBindableObject.js"; 5 | 6 | export interface IBindableObjectDragDropService { 7 | dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void; 8 | dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void; 9 | dragOver(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): 'none' | 'copy' | 'link' | 'move'; 10 | drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject, element: Element): void; 11 | 12 | dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move'; 13 | dropOnProperty?(event: DragEvent, property: IProperty, bindableObject: IBindableObject, designItems: IDesignItem[]): void; 14 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectsService.ts: -------------------------------------------------------------------------------- 1 | import { InstanceServiceContainer } from '../InstanceServiceContainer.js'; 2 | import { BindableObjectsTarget } from './BindableObjectsTarget.js'; 3 | import { IBindableObject } from './IBindableObject.js'; 4 | 5 | export interface IBindableObjectsService { 6 | readonly name: string; 7 | hasObjectsForInstanceServiceContainer(instanceServiceContainer: InstanceServiceContainer, source: BindableObjectsTarget); 8 | getBindableObject(fullName: string, instanceServiceContainer?: InstanceServiceContainer): Promise>; 9 | getBindableObjects(parent?: IBindableObject, instanceServiceContainer?: InstanceServiceContainer): Promise[]>; 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/bindingsService/IBindingService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | import { IBinding } from '../../item/IBinding.js'; 3 | import { BindingTarget } from '../../item/BindingTarget.js'; 4 | 5 | /** 6 | * Can be used to parse bindings wich are done via special HTML Attributes or special Elements 7 | * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the 8 | * htmlParserService 9 | */ 10 | export interface IBindingService { 11 | getBindings(designItem: IDesignItem): IBinding[]; 12 | setBinding(designItem: IDesignItem, binding: IBinding): boolean; 13 | clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean; 14 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/bindingsService/VueBindingsService.ts: -------------------------------------------------------------------------------- 1 | //read vue bindings: 2 | 3 | //v-bind:class 4 | //v-bind:style 5 | //v-if 6 | //v-else 7 | //v-show -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/configUiService/IConfigUiService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | 3 | export interface IConfigUiService { 4 | hasConfigUi(designItem: IDesignItem): Promise 5 | getConfigUi(designItem: IDesignItem): Promise 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/contentService/ContentService.ts: -------------------------------------------------------------------------------- 1 | import { IContentService } from './IContentService.js'; 2 | import { IContentChanged } from './IContentChanged' 3 | import { IDesignItem } from '../../item/IDesignItem.js'; 4 | import { TypedEvent } from '@node-projects/base-custom-webcomponent'; 5 | 6 | export class ContentService implements IContentService { 7 | 8 | constructor(rootElement: IDesignItem) { 9 | this.rootDesignItem = rootElement; 10 | } 11 | 12 | readonly rootDesignItem: IDesignItem; 13 | 14 | readonly onContentChanged = new TypedEvent(); 15 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/contentService/IContentChanged.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | 3 | interface IContentChangedParsed { 4 | changeType: 'parsed' 5 | } 6 | 7 | interface IContentChangedWithDesignItems { 8 | changeType: "added" | "removed" | "moved" | "changed" 9 | designItems: IDesignItem[]; 10 | } 11 | 12 | export type IContentChanged = IContentChangedParsed | IContentChangedWithDesignItems; -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/contentService/IContentService.ts: -------------------------------------------------------------------------------- 1 | import { IContentChanged } from './IContentChanged.js'; 2 | import { IDesignItem } from '../../item/IDesignItem.js'; 3 | import { TypedEvent } from '@node-projects/base-custom-webcomponent'; 4 | 5 | export interface IContentService { 6 | readonly onContentChanged: TypedEvent; 7 | readonly rootDesignItem: IDesignItem; 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/copyPasteService/ICopyPasteService.ts: -------------------------------------------------------------------------------- 1 | import { IRect } from "../../../interfaces/IRect.js"; 2 | import { IDesignItem } from "../../item/IDesignItem.js"; 3 | import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; 4 | import { ServiceContainer } from "../ServiceContainer.js"; 5 | 6 | export interface ICopyPasteService { 7 | copyItems(designItems: IDesignItem[]): Promise 8 | getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]> 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/deletionService/DeletionService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { DeleteAction } from "../undoService/transactionItems/DeleteAction.js"; 3 | import { IDeletionService } from "./IDeletionService.js"; 4 | 5 | export class DeletionService implements IDeletionService { 6 | public removeItems(items: IDesignItem[]) { 7 | items[0].instanceServiceContainer.undoService.execute(new DeleteAction(items)); 8 | } 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/deletionService/IDeletionService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | 3 | export interface IDeletionService { 4 | removeItems(items: IDesignItem[]); 5 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/demoProviderService/IDemoProviderService.ts: -------------------------------------------------------------------------------- 1 | import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; 2 | import { ServiceContainer } from "../ServiceContainer.js"; 3 | 4 | export interface IDemoProviderService { 5 | provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string); 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; 3 | import { IStringPosition } from "../htmlWriterService/IStringPosition.js"; 4 | import { IDesignItemDocumentPositionService } from "./IDesignItemDocumentPositionService.js"; 5 | 6 | export class DesignItemDocumentPositionService implements IDesignItemDocumentPositionService { 7 | 8 | private _designItemsAssignmentList?: WeakMap = new WeakMap(); 9 | 10 | constructor(designerCanvas: IDesignerCanvas) { } 11 | 12 | setPosition(designItem: IDesignItem, position: IStringPosition) { 13 | this._designItemsAssignmentList.set(designItem, position); 14 | } 15 | 16 | getPosition(designItem: IDesignItem): IStringPosition { 17 | return this._designItemsAssignmentList.get(designItem); 18 | } 19 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js" 2 | import { IStringPosition } from "../htmlWriterService/IStringPosition.js" 3 | 4 | export interface IDesignItemDocumentPositionService { 5 | setPosition(designItem: IDesignItem, position: IStringPosition) 6 | getPosition(designItem: IDesignItem): IStringPosition 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/designItemService/IDesignItemService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; 3 | import { ServiceContainer } from "../ServiceContainer.js"; 4 | 5 | export interface IDesignItemService { 6 | createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem; 7 | handleSpecialAttributes(attributeName: string, designItem: IDesignItem): void; 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/designerAddons/IDesignerAddonJson.ts: -------------------------------------------------------------------------------- 1 | export interface IDesignerAddonJson { 2 | services: Record 3 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/dragDropService/IDragDropService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; 3 | import { IPlacementService } from "../placementService/IPlacementService.js"; 4 | 5 | export interface IDragDropService { 6 | dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent); 7 | dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent); 8 | dragOver(designerCanvas: IDesignerCanvas, event: DragEvent); 9 | drop(designerCanvas: IDesignerCanvas, event: DragEvent); 10 | getPossibleContainerForDragDrop(designerCanvas: IDesignerCanvas, event: DragEvent): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService] 11 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/dragDropService/IExternalDragDropService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; 2 | 3 | export interface IExternalDragDropService { 4 | dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move'; 5 | drop(designerCanvas: IDesignerCanvas, event: DragEvent); 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/dragDropService/IPropertyGridDragDropService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { IProperty } from "../propertiesService/IProperty.js"; 3 | 4 | export interface IPropertyGridDragDropService { 5 | dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move'; 6 | dropOnProperty?(event: DragEvent, property: IProperty, dropObject: any, designItems: IDesignItem[]): void; 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/elementAtPointService/ElementAtPointService.ts: -------------------------------------------------------------------------------- 1 | import { IElementAtPointService } from './IElementAtPointService.js'; 2 | import { IPoint } from '../../../interfaces/IPoint.js'; 3 | import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; 4 | 5 | export class ElementAtPointService implements IElementAtPointService { 6 | getElementAtPoint(designerCanvas: IDesignerCanvas, point: IPoint) { 7 | return designerCanvas.getElementAtPoint(point); 8 | } 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/elementAtPointService/IElementAtPointService.ts: -------------------------------------------------------------------------------- 1 | import { IService } from '../IService.js'; 2 | import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; 3 | import { IPoint } from '../../../interfaces/IPoint.js'; 4 | 5 | export interface IElementAtPointService extends IService { 6 | getElementAtPoint(designerView: IDesignerCanvas, point: IPoint); 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/elementInteractionService/IElementInteractionService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; 2 | import { IService } from '../IService.js'; 3 | 4 | export interface IElementInteractionService extends IService { 5 | stopEventHandling(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) : boolean; 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/elementsService/IElementDefinition.ts: -------------------------------------------------------------------------------- 1 | import { IBinding } from '../../item/IBinding.js'; 2 | 3 | export interface IElementDefinition { 4 | tag: string; 5 | /** 6 | * A path or a Object URL to an image 7 | */ 8 | icon?: string; 9 | /** 10 | * A HTML String wich is used in the Palette 11 | */ 12 | displayHtml?: string; 13 | name?: string; 14 | description?: string; 15 | import?: string; 16 | className?: string; 17 | type?: string; 18 | defaultContent?: any; 19 | defaultAttributes?: { [key: string]: string; }; 20 | defaultStyles?: { [key: string]: string; }; 21 | defaultWidth?: string; 22 | defaultHeight?: string; 23 | ghostElement?: Element; 24 | /** 25 | * Name of the Tool activated when selecting the element. 26 | * If none, the DrawElementTool is used 27 | */ 28 | tool?: string; 29 | defaultBinding?: IBinding; 30 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/elementsService/IElementsJson.ts: -------------------------------------------------------------------------------- 1 | import { IElementDefinition } from './IElementDefinition.js'; 2 | 3 | export interface IElementsJson { 4 | "imports"?: string[], 5 | "elements": (string | IElementDefinition)[] 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/elementsService/IElementsService.ts: -------------------------------------------------------------------------------- 1 | import { IService } from '../IService.js'; 2 | import { IElementDefinition } from './IElementDefinition.js'; 3 | 4 | export interface IElementsService extends IService { 5 | readonly name: string 6 | getElements(): Promise 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/elementsService/PreDefinedElementsService.ts: -------------------------------------------------------------------------------- 1 | import { IElementsService } from './IElementsService.js'; 2 | import { IElementsJson } from './IElementsJson.js'; 3 | import { IElementDefinition } from './IElementDefinition.js'; 4 | 5 | export class PreDefinedElementsService implements IElementsService { 6 | private _name: string; 7 | get name() { return this._name; } 8 | 9 | private _elementList: IElementDefinition[]; 10 | 11 | public getElements(): Promise { 12 | return Promise.resolve(this._elementList); 13 | } 14 | 15 | constructor(name: string, data: IElementsJson) { 16 | this._name = name; 17 | 18 | this._elementList = []; 19 | data.elements.forEach(element => { 20 | if (this.isIElementDefintion(element)) 21 | this._elementList.push(element) 22 | else 23 | this._elementList.push({ tag: element }) 24 | }); 25 | } 26 | 27 | private isIElementDefintion(object: string | IElementDefinition): object is IElementDefinition { 28 | return object != null && (object).tag != null; 29 | } 30 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/eventsService/IEvent.ts: -------------------------------------------------------------------------------- 1 | export interface IEvent { 2 | name: string; 3 | propertyName?: string; 4 | eventObjectName?: string 5 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/eventsService/IEventsService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { IEvent } from "./IEvent.js"; 3 | 4 | export interface IEventsService { 5 | isHandledElementFromEventsService(designItem: IDesignItem): boolean; 6 | getPossibleEvents(designItem: IDesignItem): IEvent[]; 7 | getEvent(designItem: IDesignItem, name: string): IEvent; 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/htmlParserService/IHtmlParserService.ts: -------------------------------------------------------------------------------- 1 | import { IService } from '../IService.js'; 2 | import type { ServiceContainer } from '../ServiceContainer.js'; 3 | import type { InstanceServiceContainer } from '../InstanceServiceContainer.js'; 4 | import { IDesignItem } from '../../item/IDesignItem.js'; 5 | 6 | export interface IHtmlParserService extends IService { 7 | parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean, positionOffset?: Number): Promise 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterOptions.ts: -------------------------------------------------------------------------------- 1 | export interface IHtmlWriterOptions { 2 | beautifyOutput?: boolean; 3 | compressCssToShorthandProperties?: boolean; 4 | writeDesignerProperties?: boolean; 5 | parseJsonInAttributes?: boolean; 6 | jsonWriteMode?: 'min' | 'beauty'; 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | import { ITextWriter } from '../../helper/ITextWriter.js'; 3 | import { IHtmlWriterOptions } from './IHtmlWriterOptions.js'; 4 | 5 | export interface IHtmlWriterService { 6 | options: IHtmlWriterOptions; 7 | write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean); 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/htmlWriterService/IStringPosition.ts: -------------------------------------------------------------------------------- 1 | export interface IStringPosition { 2 | start: number; 3 | length: number; 4 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/initializationService/IIntializationService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | 3 | // This is called for every root DesignItem added to the designer canvas. It's not called for the items children. 4 | export interface IIntializationService { 5 | init(designItem: IDesignItem): void; 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/instanceService/IDesignerInstance.ts: -------------------------------------------------------------------------------- 1 | export interface IDesignerInstance { 2 | _inNodeProjectsDesignerView: boolean; 3 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/instanceService/IInstanceService.ts: -------------------------------------------------------------------------------- 1 | import { IService } from '../IService.js'; 2 | import { IElementDefinition } from '../elementsService/IElementDefinition.js'; 3 | import type { ServiceContainer } from '../ServiceContainer.js'; 4 | import type { InstanceServiceContainer } from '../InstanceServiceContainer.js'; 5 | import { IDesignItem } from '../../item/IDesignItem.js'; 6 | 7 | export interface IInstanceService extends IService { 8 | getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer) : Promise 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/manifestParsers/IOldCustomElementsManifest.ts: -------------------------------------------------------------------------------- 1 | export interface IOldCustomElementsManifest { 2 | version: string; 3 | tags: IOldCustomElementsManifestTag[]; 4 | } 5 | 6 | export interface IOldCustomElementsManifestTag { 7 | name: string; 8 | path: string; 9 | description?: string; 10 | attributes?: IOldCustomElementsManifestAttribute[]; 11 | properties?: IOldCustomElementsManifestProperty[]; 12 | } 13 | 14 | 15 | export interface IOldCustomElementsManifestAttribute { 16 | name: string; 17 | description?: string; 18 | type: string; 19 | default?: string; 20 | } 21 | 22 | export interface IOldCustomElementsManifestProperty { 23 | name: string; 24 | attribute?: string; 25 | description?: string; 26 | type: string; 27 | default?: string; 28 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/modelCommandService/IModelCommandService.ts: -------------------------------------------------------------------------------- 1 | import { IUiCommand } from '../../../commandHandling/IUiCommand.js'; 2 | import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; 3 | import { IService } from '../IService.js'; 4 | 5 | export interface IModelCommandService extends IService { 6 | canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean | null 7 | executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand) 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/multiplayerService/IMultiplayerService.ts: -------------------------------------------------------------------------------- 1 | import { IPoint } from "../../../interfaces/IPoint"; 2 | 3 | export interface IMultiplayerService { 4 | signOn(userInfo: userInfo); 5 | //submitState 6 | } 7 | 8 | export type userInfo = { 9 | name: string; 10 | color: string; 11 | } 12 | 13 | export type userContext = { 14 | name: string; 15 | } 16 | 17 | export type cursor = { 18 | point: IPoint 19 | state: 'none' | 'pointing' | 'chat' 20 | document: string 21 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/multiplayerService/MultiplayerService.ts: -------------------------------------------------------------------------------- 1 | import { TypedEvent } from "@node-projects/base-custom-webcomponent"; 2 | import { userInfo } from "./IMultiplayerService"; 3 | 4 | export class MultiplayerService { 5 | 6 | constructor(getUserInfo: () => userInfo, sendMessage: (message) => void, messageReceived: () => any) { 7 | } 8 | 9 | 10 | cursorsChanged: TypedEvent; 11 | 12 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/placementService/AlwaysAbsolutePlacementService.ts: -------------------------------------------------------------------------------- 1 | import type { IDesignItem } from '../../item/IDesignItem.js'; 2 | import { AbsolutePlacementService } from './AbsolutePlacementService.js'; 3 | 4 | export class AlwaysAbsolutePlacementService extends AbsolutePlacementService { 5 | override serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem) { 6 | return true; 7 | } 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/placementService/ISnaplinesProviderService.ts: -------------------------------------------------------------------------------- 1 | import { IService } from '../IService.js'; 2 | import { IDesignItem } from '../../item/IDesignItem.js'; 3 | import { IRect } from "../../../interfaces/IRect.js"; 4 | 5 | export interface ISnaplinesProviderService extends IService { 6 | provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): { 7 | outerRect: DOMRect, 8 | positionsH: [number, IRect][], 9 | positionsMiddleH: [number, IRect][], 10 | positionsV: [number, IRect][], 11 | positionsMiddleV: [number, IRect][] 12 | }; 13 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/popupService/IPopupService.ts: -------------------------------------------------------------------------------- 1 | export type PlacementType = 'automatic' | 'relativeTo'; 2 | 3 | export type PopupPlacement = { 4 | placementType: PlacementType; 5 | top?: number; 6 | left?: number; 7 | right?: number; 8 | bottom?: number; 9 | width?: number; 10 | height?: number; 11 | }; 12 | 13 | export type Popup = { 14 | close: () => void 15 | } 16 | export interface IPopupService { 17 | showPopup(element: Element, popupPlacement?: PopupPlacement): Popup; 18 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/popupService/PopupService.ts: -------------------------------------------------------------------------------- 1 | import { IPopupService, Popup, PopupPlacement } from './IPopupService.js'; 2 | 3 | export class PopupService implements IPopupService { 4 | private container: Element; 5 | 6 | private zindex: number;; 7 | 8 | constructor(container: Element) { 9 | this.container = container; 10 | } 11 | 12 | showPopup(element: Element, popupPlacement?: PopupPlacement): Popup { 13 | this.container.appendChild(element); 14 | this.bringToFront(element); 15 | return { close: () => this.closePopup(element) }; 16 | } 17 | 18 | public closePopup(element: Element) { 19 | this.container.removeChild(element); 20 | } 21 | 22 | public bringToFront(element: Element) { 23 | this.zindex++; 24 | (element).style.zIndex = this.zindex; 25 | } 26 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/IEditorTypesService.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from './IProperty.js'; 2 | import { IPropertyEditor } from './IPropertyEditor.js'; 3 | 4 | export interface IEditorTypesService { 5 | getEditorForProperty(type: IProperty): IPropertyEditor; 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/IPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | import { IProperty } from './IProperty.js'; 3 | import { ValueType } from './ValueType.js'; 4 | 5 | export interface IPropertyEditor { 6 | readonly element: Element; 7 | property: IProperty; 8 | designItems: IDesignItem[]; 9 | designItemsChanged(designItems: IDesignItem[]); 10 | refreshValue(valueType: ValueType, value: any); 11 | refreshValueWithoutNotification(valueType: ValueType, value: any); 12 | } 13 | 14 | export interface IPropertyEditorT extends IPropertyEditor { 15 | readonly element: T; 16 | property: IProperty; 17 | designItems: IDesignItem[]; 18 | designItemsChanged(designItems: IDesignItem[]); 19 | refreshValue(valueType: ValueType, value: any); 20 | refreshValueWithoutNotification(valueType: ValueType, value: any); 21 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/IPropertyGroup.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from './IProperty.js'; 2 | 3 | export interface IPropertyGroup { 4 | name: string; 5 | description?: string; 6 | properties: IProperty[] 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/IPropertyGroupsService.ts: -------------------------------------------------------------------------------- 1 | 2 | import { IDesignItem } from '../../item/IDesignItem.js'; 3 | import { IPropertiesService } from './IPropertiesService.js'; 4 | 5 | export interface IPropertyGroupsService { 6 | getPropertygroups(designItems: IDesignItem[]): { name: string, propertiesService: IPropertiesService }[] 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/PropertyType.ts: -------------------------------------------------------------------------------- 1 | export enum PropertyType { 2 | property = 'property', 3 | attribute = 'attribute', 4 | propertyAndAttribute = 'propertyAndAttribute', 5 | cssValue = 'cssvalue', 6 | 7 | complex = 'complex', // editor is special and could write multiple properties 8 | add = 'add' // editor allows to add a new one 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/ValueType.ts: -------------------------------------------------------------------------------- 1 | export enum ValueType { 2 | 'none' = 'none', 3 | 'all' = 'all', 4 | 'some' = 'some', 5 | 'bound' = 'bound', 6 | 'fromStylesheet' = 'fromStylesheet' 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { BasePropertyEditor } from './BasePropertyEditor.js'; 3 | import { ValueType } from '../ValueType.js'; 4 | 5 | export class BooleanPropertyEditor extends BasePropertyEditor { 6 | 7 | constructor(property: IProperty) { 8 | super(property); 9 | 10 | let element = document.createElement('input'); 11 | element.type = "checkbox"; 12 | element.onchange = (e) => this._valueChanged(element.checked); 13 | this.element = element; 14 | } 15 | 16 | refreshValue(valueType: ValueType, value: any) { 17 | this.element.checked = value; 18 | } 19 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ColorPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { BasePropertyEditor } from './BasePropertyEditor.js'; 3 | import { ValueType } from '../ValueType.js'; 4 | import { w3color } from '../../../helper/w3color.js'; 5 | 6 | export class ColorPropertyEditor extends BasePropertyEditor { 7 | constructor(property: IProperty) { 8 | super(property); 9 | 10 | let element = document.createElement('input'); 11 | element.type = 'color' 12 | element.onchange = (e) => { 13 | let w3Col = w3color.toColorObject(element.value); 14 | this._valueChanged(w3Col.toNameOrHexString()) 15 | }; 16 | this.element = element; 17 | } 18 | 19 | refreshValue(valueType: ValueType, value: any) { 20 | if (!value) 21 | this.element.value = '#000000'; 22 | else { 23 | let w3Col = w3color.toColorObject(value); 24 | this.element.value = w3Col.toHexString(); 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/DatePropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { BasePropertyEditor } from './BasePropertyEditor.js'; 3 | import { ValueType } from '../ValueType.js'; 4 | 5 | export class DatePropertyEditor extends BasePropertyEditor { 6 | 7 | constructor(property: IProperty) { 8 | super(property); 9 | 10 | let element = document.createElement('input'); 11 | element.type = "datetime-local" 12 | element.onchange = (e) => this._valueChanged(element.value); 13 | this.element = element; 14 | } 15 | 16 | refreshValue(valueType: ValueType, value: any) { 17 | if (!value) 18 | this.element.value = null; 19 | else 20 | this.element.value = value; 21 | } 22 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { BasePropertyEditor } from './BasePropertyEditor.js'; 3 | import { ValueType } from '../ValueType.js'; 4 | import { html } from '@node-projects/base-custom-webcomponent'; 5 | 6 | export class JsonPropertyEditor extends BasePropertyEditor { 7 | 8 | static template = html` 9 |
10 | 11 | 12 |
13 | `; 14 | 15 | _input: HTMLInputElement; 16 | 17 | constructor(property: IProperty) { 18 | super(property); 19 | 20 | let el = JsonPropertyEditor.template.content.cloneNode(true); 21 | this._input = (el).getElementById('input') 22 | this._input.onchange = (e) => this._valueChanged(this._input.value); 23 | this.element = el; 24 | } 25 | 26 | refreshValue(valueType: ValueType, value: any) { 27 | this._input.value = value; 28 | } 29 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.ts: -------------------------------------------------------------------------------- 1 | import { html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent'; 2 | 3 | export class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend { 4 | 5 | static override template = html` 6 |
7 | 8 | 9 |
10 | `; 11 | 12 | constructor() { 13 | super(); 14 | 15 | //codeview 16 | } 17 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { BasePropertyEditor } from './BasePropertyEditor.js'; 3 | import { ValueType } from '../ValueType.js'; 4 | 5 | export class NumberPropertyEditor extends BasePropertyEditor { 6 | 7 | constructor(property: IProperty) { 8 | super(property); 9 | 10 | let element = document.createElement('input'); 11 | element.type = "number"; 12 | element.min = property.min; 13 | element.max = property.max; 14 | element.step = property.step; 15 | element.onchange = (e) => this._valueChanged(element.value == '' ? null : element.valueAsNumber); 16 | this.element = element; 17 | } 18 | 19 | refreshValue(valueType: ValueType, value: any) { 20 | this.element.value = value === undefined ? null : value; 21 | } 22 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/TextPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { BasePropertyEditor } from './BasePropertyEditor.js'; 3 | import { ValueType } from '../ValueType.js'; 4 | 5 | export class TextPropertyEditor extends BasePropertyEditor { 6 | 7 | constructor(property: IProperty) { 8 | super(property); 9 | 10 | let element = document.createElement('input'); 11 | element.type = "text"; 12 | element.onchange = (e) => this._valueChanged(element.value); 13 | element.onfocus = (e) => { 14 | element.selectionStart = 0; 15 | element.selectionEnd = element.value?.length; 16 | } 17 | this.element = element; 18 | } 19 | 20 | refreshValue(valueType: ValueType, value: any) { 21 | if (value == null) 22 | this.element.value = ""; 23 | else 24 | this.element.value = value; 25 | } 26 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { BasePropertyEditor } from './BasePropertyEditor.js'; 3 | import { ValueType } from '../ValueType.js'; 4 | import { ThicknessEditor } from '../../../controls/ThicknessEditor.js'; 5 | 6 | export class ThicknessPropertyEditor extends BasePropertyEditor { 7 | 8 | constructor(property: IProperty) { 9 | super(property); 10 | 11 | const selector = new ThicknessEditor() 12 | selector.property = property.name; 13 | 14 | selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue)); 15 | this.element = selector; 16 | } 17 | 18 | refreshValue(valueType: ValueType, value: any) { 19 | this.element.valueLeft = value; 20 | } 21 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../../IProperty.js'; 2 | import { BasePropertyEditor } from '../BasePropertyEditor.js'; 3 | import { ValueType } from '../../ValueType.js'; 4 | import { MetricsEditor } from '../../../../controls/MetricsEditor.js'; 5 | 6 | export class MetricsPropertyEditor extends BasePropertyEditor { 7 | 8 | //TODO: metrics editor does not work at all yet 9 | 10 | constructor(property: IProperty) { 11 | super(property); 12 | 13 | const selector = new MetricsEditor() 14 | selector.property = property.name; 15 | 16 | //selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue)); 17 | this.element = selector; 18 | } 19 | 20 | refreshValue(valueType: ValueType, value: any) { 21 | this.element.refresh(this.designItems?.[0]?.element) 22 | } 23 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/services/AbstractCssPropertiesService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../../item/IDesignItem.js'; 2 | import { CommonPropertiesService } from './CommonPropertiesService.js'; 3 | import { RefreshMode } from '../IPropertiesService.js'; 4 | 5 | export abstract class AbstractCssPropertiesService extends CommonPropertiesService { 6 | 7 | public override getRefreshMode(designItem: IDesignItem) { 8 | return RefreshMode.none; 9 | } 10 | 11 | constructor() { 12 | super(false); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/services/IJsonPropertyDefinition.ts: -------------------------------------------------------------------------------- 1 | import { PropertyType } from '../PropertyType.js'; 2 | 3 | export interface IJsonPropertyDefinition { 4 | name: string; 5 | propertyName?: string, 6 | attributeName?: string 7 | description?: string; 8 | type?: string; // -> string, number, list, color, thickness, css-length 9 | default?: any; 10 | min?: number; 11 | max?: number; 12 | step?: number; 13 | values?: string[]; // list selectable values 14 | enumValues?: [name: string, value: string | number][]; // list selectable enum values 15 | value?: any; 16 | defaultValue?: any; 17 | propertyType?: PropertyType.cssValue 18 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/services/IJsonPropertyDefinitions.ts: -------------------------------------------------------------------------------- 1 | import { IJsonPropertyDefinition } from './IJsonPropertyDefinition.js'; 2 | 3 | export interface IJsonPropertyDefinitions { 4 | [key: string]: IJsonPropertyDefinition[]; 5 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/services/LitElementPropertiesService.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { IDesignItem } from '../../../item/IDesignItem.js'; 3 | import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js'; 4 | 5 | export class LitElementPropertiesService extends AbstractPolymerLikePropertiesService { 6 | 7 | public name = "lit" 8 | 9 | override isHandledElement(designItem: IDesignItem): boolean { 10 | let proto = (designItem.element.constructor).__proto__; 11 | while (proto != null) { 12 | if (proto.name == 'LitElement') 13 | return true; 14 | if (proto.name == undefined || proto.name == 'HTMLElement' || proto.name == 'Element' || proto.name == 'Node' || proto.name == 'HTMLElement') 15 | return false; 16 | proto = proto.__proto__; 17 | } 18 | return false; 19 | } 20 | 21 | protected override _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { 22 | } 23 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/services/PolymerPropertiesService.ts: -------------------------------------------------------------------------------- 1 | import { IProperty } from '../IProperty.js'; 2 | import { IDesignItem } from '../../../item/IDesignItem.js'; 3 | import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js'; 4 | 5 | export class PolymerPropertiesService extends AbstractPolymerLikePropertiesService { 6 | 7 | public name = "polymer" 8 | 9 | override isHandledElement(designItem: IDesignItem): boolean { 10 | return (designItem.element.constructor).polymerElementVersion != null; 11 | } 12 | 13 | protected override _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { 14 | (<{ set: (name: string, value: any) => void }>designItem.element).set(property.name, value); 15 | } 16 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/propertiesService/services/PropertiesHelper.ts: -------------------------------------------------------------------------------- 1 | export class PropertiesHelper { 2 | public static isTypescriptEnum(value: any) { 3 | if (value && typeof value === 'object' && value.constructor == Object) { 4 | for (let k in value) { 5 | const tp = typeof value[k]; 6 | if (tp !== 'string' && tp !== 'number') 7 | return false; 8 | } 9 | return true; 10 | } 11 | return false; 12 | } 13 | 14 | public static getTypescriptEnumEntries(value: any): [name: string, value: string | number][] { 15 | let ret: [name: string, value: string | number][] = []; 16 | for (let k in value) { 17 | if (isNaN(k)) 18 | ret.push([k, value[k]]); 19 | } 20 | return ret; 21 | } 22 | 23 | public static camelToDashCase(text: string) { 24 | return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`); 25 | } 26 | 27 | public static dashToCamelCase(text: string) { 28 | return text.replace(/-([a-z])/g, (i) => i[1].toUpperCase()); 29 | } 30 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/refactorService/IRefactorService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from "../../item/IDesignItem.js"; 2 | import { IRefactoring } from "./IRefactoring.js"; 3 | 4 | export interface IRefactorService { 5 | getRefactorings(designItems: IDesignItem[]): IRefactoring[]; 6 | refactor(refactoring: IRefactoring, oldValue: string, newValue: string); 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/refactorService/IRefactoring.ts: -------------------------------------------------------------------------------- 1 | import { BindingTarget } from "../../item/BindingTarget.js"; 2 | import { IDesignItem } from "../../item/IDesignItem.js"; 3 | import { IRefactorService } from "./IRefactorService.js"; 4 | 5 | export interface IRefactoring { 6 | service: IRefactorService; 7 | name: string; //wert der 8 | itemType: string; //for example: text, signal, property, screen, .... 9 | designItem: IDesignItem; 10 | type: 'binding' | 'script' | 'content' | 'attribute'; 11 | display?: string; 12 | sourceObject: any; 13 | target?: BindingTarget; 14 | targetName?: string; 15 | 16 | //usage?: string; //spezieller typ? bspw. css, attribute, script, binding 17 | //dynamicType?: string; //bein wincc, direkte variable, script, ... 18 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/selectionService/ISelectionChangedEvent.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | 3 | export interface ISelectionChangedEvent { 4 | oldSelectedElements: IDesignItem[] 5 | selectedElements: IDesignItem[], 6 | event?: Event 7 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/selectionService/ISelectionRefreshEvent.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | 3 | export interface ISelectionRefreshEvent { 4 | selectedElements: IDesignItem[], 5 | event?: Event 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/selectionService/ISelectionService.ts: -------------------------------------------------------------------------------- 1 | import { TypedEvent } from '@node-projects/base-custom-webcomponent'; 2 | import { IDesignItem } from '../../item/IDesignItem.js'; 3 | import { ISelectionChangedEvent } from './ISelectionChangedEvent.js'; 4 | import { ISelectionRefreshEvent } from './ISelectionRefreshEvent.js'; 5 | 6 | export interface ISelectionService { 7 | primarySelection: IDesignItem; 8 | selectedElements: IDesignItem[]; 9 | 10 | setSelectedElements(designItems: IDesignItem[], even?: Event): void; 11 | setSelectionByTextRange(positionStart: number, positionEnd: number); 12 | 13 | clearSelectedElements(): void; 14 | 15 | isSelected(designItem: IDesignItem): boolean; 16 | 17 | readonly onSelectionChanged: TypedEvent; 18 | readonly onSelectionRefresh: TypedEvent; 19 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/treeStructureService/ITreeStructureChangedEvent.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | 3 | export interface ITreeStructureChangedEvent { 4 | action: 'add' | 'move' | 'remove' | 'replace' | 'reset' 5 | newItems?: IDesignItem[] 6 | newStartingIndex?: number 7 | oldItems?: IDesignItem[] 8 | oldStartingIndex?: number 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/treeStructureService/ITreeStructureService.ts: -------------------------------------------------------------------------------- 1 | export interface ITreeStructureService { 2 | 3 | } 4 | 5 | //maybe this service caches a dictionary designitem -> treeelement?, filled by treeView control? -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/undoService/ITransactionItem.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | 3 | export interface ITransactionItem { 4 | title?: string 5 | readonly affectedItems?: IDesignItem[] 6 | do: () => void 7 | undo: () => void 8 | mergeWith(other: ITransactionItem): boolean; 9 | redoBranches?: ITransactionItem[][]; 10 | }; -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/undoService/IUndoService.ts: -------------------------------------------------------------------------------- 1 | import { IService } from '../IService.js'; 2 | import { ChangeGroup } from './ChangeGroup.js'; 3 | import { ITransactionItem } from './ITransactionItem.js'; 4 | 5 | export interface IUndoService extends IService { 6 | openGroup(title: string): ChangeGroup; 7 | execute(item: ITransactionItem): void; 8 | canUndo(): boolean; 9 | canRedo(): boolean; 10 | clear(); 11 | clearTransactionstackIfNotEmpty(); 12 | undo(); 13 | redo(); 14 | redoTo(transactionItems: ITransactionItem[]); 15 | getUndoEntryNames(count?: number): Generator; 16 | getUndoEntries(count?: number): Generator; 17 | getRedoEntryNames(count?: number): Generator; 18 | getRedoEntries(count?: number): Generator; 19 | readonly undoCount: number; 20 | readonly redoCount: number; 21 | } 22 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/undoService/transactionItems/SetDesignItemsAction.ts: -------------------------------------------------------------------------------- 1 | import { ITransactionItem } from '../ITransactionItem.js'; 2 | import { IDesignItem } from '../../../item/IDesignItem.js'; 3 | 4 | export class SetDesignItemsAction implements ITransactionItem { 5 | 6 | constructor(newDesignItems: IDesignItem[], oldDesignItems: IDesignItem[]) { 7 | this.title = "Set all DesignItems"; 8 | 9 | this.newDesignItems = newDesignItems; 10 | this.oldDesignItems = oldDesignItems; 11 | } 12 | 13 | title?: string; 14 | 15 | get affectedItems() { 16 | return this.newDesignItems; 17 | } 18 | 19 | undo() { 20 | this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.oldDesignItems); 21 | } 22 | 23 | do() { 24 | this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.newDesignItems); 25 | } 26 | 27 | public newDesignItems: IDesignItem[]; 28 | public oldDesignItems: IDesignItem[]; 29 | 30 | mergeWith(other: ITransactionItem) { 31 | return false 32 | } 33 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/services/undoService/transactionItems/TextContentChangeAction.ts: -------------------------------------------------------------------------------- 1 | import { ITransactionItem } from '../ITransactionItem.js'; 2 | import { IDesignItem } from '../../../item/IDesignItem.js'; 3 | import { IBinding } from '../../../item/IBinding.js'; 4 | 5 | export class TextContentChangeAction implements ITransactionItem { 6 | 7 | constructor(designItem: IDesignItem, newValue: string | IBinding | null, oldValue: string | IBinding | null) { 8 | this.title = "Change TextContent from '" + oldValue + "' to '" + newValue + "'"; 9 | 10 | this.designItem = designItem; 11 | this.newValue = newValue; 12 | this.oldValue = oldValue; 13 | } 14 | 15 | title?: string; 16 | 17 | get affectedItems() { 18 | return [this.designItem]; 19 | } 20 | 21 | undo() { 22 | this.designItem.element.textContent = this.oldValue; 23 | } 24 | 25 | do() { 26 | this.designItem.element.textContent = this.newValue; 27 | } 28 | 29 | public designItem: IDesignItem; 30 | public newValue: any; 31 | public oldValue: any; 32 | 33 | mergeWith(other: ITransactionItem) { 34 | return false 35 | } 36 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/bindableObjectsBrowser/IBindableObjectsBrowser.ts: -------------------------------------------------------------------------------- 1 | import { TypedEvent } from "@node-projects/base-custom-webcomponent"; 2 | import { BindableObjectsTarget } from "../../services/bindableObjectsService/BindableObjectsTarget.js"; 3 | import { InstanceServiceContainer } from "../../services/InstanceServiceContainer.js"; 4 | import { ServiceContainer } from "../../services/ServiceContainer.js"; 5 | import { IBindableObject } from "../../services/bindableObjectsService/IBindableObject.js"; 6 | 7 | export interface IBindableObjectsBrowser extends HTMLElement { 8 | initialize(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, bindableObjectsTarget: BindableObjectsTarget): Promise; 9 | selectedObject: IBindableObject; 10 | objectDoubleclicked: TypedEvent; 11 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/codeView/ICodeView.ts: -------------------------------------------------------------------------------- 1 | import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; 2 | import { IDisposable } from '../../../interfaces/IDisposable.js'; 3 | import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; 4 | import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js'; 5 | import { TypedEvent } from '@node-projects/base-custom-webcomponent'; 6 | 7 | export interface ICodeView extends IUiCommandHandler, IDisposable, HTMLElement { 8 | update(code: string, instanceServiceContainer?: InstanceServiceContainer); 9 | getText(); 10 | setSelection(position: IStringPosition); 11 | focusEditor(); 12 | onTextChanged: TypedEvent; 13 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/demoView/IDemoView.ts: -------------------------------------------------------------------------------- 1 | import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; 2 | import { IDisposable } from '../../../interfaces/IDisposable.js'; 3 | import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; 4 | import { ServiceContainer } from '../../services/ServiceContainer.js'; 5 | 6 | export interface IDemoView extends IUiCommandHandler, IDisposable, HTMLElement { 7 | display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string); 8 | stopDisplay?: () => void; 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/DesignContext.ts: -------------------------------------------------------------------------------- 1 | import { TypedEvent } from '@node-projects/base-custom-webcomponent'; 2 | import { IDesignContext } from './IDesignContext.js'; 3 | 4 | export class DesignContext implements IDesignContext { 5 | public imports: string[] = []; 6 | public npmPackages: string[] = []; 7 | public extensionOptions: { 8 | [key: string]: any; 9 | gridExtensionShowOverlay: boolean; 10 | flexboxExtensionShowOverlay: boolean; 11 | invisibleElementExtensionShowOverlay: boolean; 12 | enableStylesheetService: boolean; 13 | basicStackedToolbarExtensionShowOverlay: boolean; 14 | simulateHoverOnHover: boolean; 15 | selectUnhitableElements: boolean; 16 | } = { 17 | gridExtensionShowOverlay: false, 18 | flexboxExtensionShowOverlay: false, 19 | invisibleElementExtensionShowOverlay: false, 20 | enableStylesheetService: false, 21 | basicStackedToolbarExtensionShowOverlay: false, 22 | simulateHoverOnHover: false, 23 | selectUnhitableElements: true, 24 | }; 25 | extensionOptionsChanged = new TypedEvent; 26 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/IDesignContext.ts: -------------------------------------------------------------------------------- 1 | import { TypedEvent } from "@node-projects/base-custom-webcomponent"; 2 | 3 | export interface IDesignContext { 4 | imports: string[]; 5 | npmPackages: string[]; 6 | extensionOptions: { 7 | [key: string]: any; 8 | gridExtensionShowOverlay: boolean; 9 | flexboxExtensionShowOverlay: boolean; 10 | invisibleElementExtensionShowOverlay: boolean; 11 | enableStylesheetService: boolean; 12 | basicStackedToolbarExtensionShowOverlay: boolean; 13 | simulateHoverOnHover: boolean; 14 | selectUnhitableElements: boolean; 15 | }; 16 | extensionOptionsChanged: TypedEvent; 17 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/defaultConfiguredDesignerView.ts: -------------------------------------------------------------------------------- 1 | import { DesignerView } from './designerView.js'; 2 | 3 | export class DefaultConfiguredDesignerView extends DesignerView { 4 | constructor(){ 5 | super(); 6 | } 7 | 8 | async ready() { 9 | const createDefaultServiceContainer = await (await import('../../services/DefaultServiceBootstrap.js')).default; 10 | this.initialize(createDefaultServiceContainer()); 11 | } 12 | } 13 | 14 | customElements.define('node-projects-default-configured-designer-view', DefaultConfiguredDesignerView); -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/FlexboxExtension.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../../item/IDesignItem.js'; 2 | import { IDesignerCanvas } from '../IDesignerCanvas.js'; 3 | import { AbstractExtension } from './AbstractExtension.js'; 4 | import { IExtensionManager } from './IExtensionManger.js'; 5 | import { OverlayLayer } from './OverlayLayer.js'; 6 | 7 | export class FlexboxExtension extends AbstractExtension { 8 | private _path: SVGPathElement; 9 | 10 | constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { 11 | super(extensionManager, designerView, extendedItem); 12 | } 13 | 14 | override extend() { 15 | const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; 16 | this._path = this._drawTransformedRect(transformedCornerPoints, 'svg-flexbox', this._path, OverlayLayer.Background); 17 | } 18 | 19 | override refresh() { 20 | this._removeAllOverlays(); 21 | this.extend(); 22 | } 23 | 24 | override dispose() { 25 | this._removeAllOverlays(); 26 | } 27 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/GrayOutExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; 2 | import { IDesignItem } from '../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../IDesignerCanvas.js'; 4 | import { IDesignerExtension } from './IDesignerExtension.js'; 5 | import { IExtensionManager } from './IExtensionManger.js'; 6 | import { GrayOutExtension } from './GrayOutExtension.js'; 7 | import { css } from "@node-projects/base-custom-webcomponent"; 8 | 9 | export class GrayOutExtensionProvider implements IDesignerExtensionProvider { 10 | shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { 11 | return true; 12 | } 13 | 14 | getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { 15 | return new GrayOutExtension(extensionManager, designerView, designItem); 16 | } 17 | 18 | readonly style = css` 19 | .svg-gray-out { stroke: transparent; fill: rgba(211, 211, 211, 0.8); pointer-events: none } 20 | `; 21 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/IDesignerExtension.ts: -------------------------------------------------------------------------------- 1 | import { IDisposable } from '../../../../interfaces/IDisposable.js'; 2 | 3 | export interface IDesignerExtension extends IDisposable { 4 | extend(cache: Record, event?: Event); 5 | refresh(cache: Record, event?: Event); 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/IDesignerExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../../item/IDesignItem.js'; 2 | import { IDesignerCanvas } from '../IDesignerCanvas.js'; 3 | import { IDesignerExtension } from './IDesignerExtension.js'; 4 | import { IExtensionManager } from './IExtensionManger.js'; 5 | 6 | export interface IDesignerExtensionProvider { 7 | shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean; 8 | getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension; 9 | style?: CSSStyleSheet | CSSStyleSheet[]; 10 | svgDefs?: string | string[]; 11 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/OverlayLayer.ts: -------------------------------------------------------------------------------- 1 | export enum OverlayLayer { 2 | Background = 10, 3 | Normal = 20, 4 | Foreground = 30 5 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/PlacementExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; 2 | import { IDesignItem } from '../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../IDesignerCanvas.js'; 4 | import { IDesignerExtension } from './IDesignerExtension.js'; 5 | import { IExtensionManager } from './IExtensionManger.js'; 6 | import { css } from "@node-projects/base-custom-webcomponent"; 7 | import { PlacementExtension } from './PlacementExtension.js'; 8 | 9 | export class PlacementExtensionProvider implements IDesignerExtensionProvider { 10 | shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { 11 | return true; 12 | } 13 | 14 | getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { 15 | return new PlacementExtension(extensionManager, designerView, designItem); 16 | } 17 | 18 | static readonly style = css` 19 | .svg-placement { stroke: #90caf9; fill: none; } 20 | `; 21 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/block/BlockToolbarExtension.ts: -------------------------------------------------------------------------------- 1 | import { html } from "@node-projects/base-custom-webcomponent"; 2 | import { IDesignItem } from '../../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 4 | import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js"; 5 | import { IExtensionManager } from "../IExtensionManger.js"; 6 | 7 | export class BlockToolbarExtension extends BasicStackedToolbarExtension { 8 | 9 | protected static template = html` 10 |
11 | ${BasicStackedToolbarExtension.basicTemplate} 12 |
13 | `; 14 | 15 | constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { 16 | super(extensionManager, designerView, extendedItem); 17 | } 18 | 19 | override extend(cache: Record, event: MouseEvent) { 20 | super.extend(cache, event); 21 | this.refresh(cache, event); 22 | } 23 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.ts: -------------------------------------------------------------------------------- 1 | import { DesignerView } from "../../designerView.js"; 2 | import { IDesignerCanvas } from "../../IDesignerCanvas.js"; 3 | import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js"; 4 | 5 | export class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider { 6 | 7 | _space: number 8 | constructor(space: number) { 9 | this._space = space; 10 | } 11 | provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] { 12 | const div = document.createElement('div'); 13 | div.style.width = this._space + 'px'; 14 | div.oncontextmenu = (e) => { e.preventDefault(); }; 15 | return [div]; 16 | } 17 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.ts: -------------------------------------------------------------------------------- 1 | import { flexboxExtensionShowOverlayOptionName } from "../FlexboxExtensionProvider.js"; 2 | import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; 3 | 4 | export class FlexboxExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton { 5 | constructor() { 6 | super(flexboxExtensionShowOverlayOptionName, "F", "show flexbox overlay") 7 | } 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.ts: -------------------------------------------------------------------------------- 1 | import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js"; 2 | import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; 3 | 4 | export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton { 5 | constructor() { 6 | super(gridExtensionShowOverlayOptionName, "G", "show grid overlay") 7 | } 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.ts: -------------------------------------------------------------------------------- 1 | import { DesignerView } from "../../designerView.js"; 2 | import { IDesignerCanvas } from "../../IDesignerCanvas.js"; 3 | 4 | export interface IDesignViewConfigButtonsProvider { 5 | provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] 6 | } 7 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.ts: -------------------------------------------------------------------------------- 1 | import { invisibleElementExtensionShowOverlayOptionName } from "../InvisibleElementExtensionProvider.js"; 2 | import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; 3 | 4 | export class InvisibleElementExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton { 5 | constructor() { 6 | super(invisibleElementExtensionShowOverlayOptionName, "I", "show invisible div overlay") 7 | } 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.ts: -------------------------------------------------------------------------------- 1 | import { DesignerView } from "../../designerView.js"; 2 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 3 | import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js"; 4 | 5 | export class RoundPixelsDesignViewConfigButton implements IDesignViewConfigButtonsProvider { 6 | 7 | constructor() { } 8 | 9 | provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] { 10 | 11 | const btn = document.createElement('div'); 12 | btn.className = 'toolbar-control'; 13 | btn.title = 'round pixels to'; 14 | 15 | const ip = document.createElement('input'); 16 | ip.type = 'number'; 17 | ip.step = '1'; 18 | ip.min = '-1'; 19 | ip.valueAsNumber = designerView.serviceContainer.options.roundPixelsToDecimalPlaces; 20 | 21 | ip.onchange = () => designerView.serviceContainer.options.roundPixelsToDecimalPlaces = ip.valueAsNumber; 22 | 23 | btn.appendChild(ip); 24 | 25 | return [btn]; 26 | } 27 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.ts: -------------------------------------------------------------------------------- 1 | import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; 2 | 3 | export const enableStylesheetService = 'enableStylesheetService'; 4 | 5 | export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton { 6 | 7 | constructor() { 8 | super(enableStylesheetService, "ss", "modify Stylesheet") 9 | } 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.ts: -------------------------------------------------------------------------------- 1 | import { basicStackedToolbarExtensionOverlayOptionName } from "../BasicStackedToolbarExtension.js"; 2 | import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; 3 | 4 | export class ToolbarExtensionsDesignViewConfigButtons extends AbstractDesignViewConfigButton { 5 | constructor() { 6 | super(basicStackedToolbarExtensionOverlayOptionName, "T", "show Toolbars") 7 | } 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.ts: -------------------------------------------------------------------------------- 1 | import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; 2 | import { IDesignItem } from '../../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 4 | 5 | export type ContextmenuInitiator = 'designer' | 'treeView' | 'other'; 6 | 7 | export interface IContextMenuExtension { 8 | shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator); 9 | provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator, provider?: any): IContextMenuItem[]; 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.ts: -------------------------------------------------------------------------------- 1 | import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; 2 | import { IDesignItem } from '../../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 4 | import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; 5 | 6 | export class SeperatorContextMenu implements IContextMenuExtension { 7 | public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { 8 | return true; 9 | } 10 | 11 | public provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { 12 | return [ 13 | { title: '-' } 14 | ] 15 | } 16 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.ts: -------------------------------------------------------------------------------- 1 | 2 | import { IDesignItem } from "../../../../item/IDesignItem.js"; 3 | import { IDesignerCanvas } from "../../IDesignerCanvas.js"; 4 | import { IExtensionManager } from "../IExtensionManger.js"; 5 | import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js"; 6 | import { AbstractExtensionBase } from '../AbstractExtensionBase.js'; 7 | 8 | //TODO: move draw functions to overlay layer, implement designerpointerextension, create ruler 9 | export abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension { 10 | protected extendedItem: IDesignItem; 11 | 12 | constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas) { 13 | super(extensionManager, designerCanvas); 14 | } 15 | 16 | abstract refresh(event: PointerEvent); 17 | abstract dispose(); 18 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@node-projects/base-custom-webcomponent'; 2 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 3 | import { CursorLinePointerExtension } from './CursorLinePointerExtension.js'; 4 | import { IDesignerPointerExtension } from './IDesignerPointerExtension.js'; 5 | import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js'; 6 | 7 | export class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider { 8 | 9 | getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension { 10 | return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas) 11 | } 12 | 13 | style = css` 14 | .svg-cursor-line { stroke: black; pointer-events: none } 15 | `; 16 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.ts: -------------------------------------------------------------------------------- 1 | import { IDisposable } from "../../../../../interfaces/IDisposable.js"; 2 | 3 | export interface IDesignerPointerExtension extends IDisposable { 4 | refresh(event: PointerEvent); 5 | style? : CSSStyleSheet; 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../IDesignerCanvas.js"; 2 | import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js"; 3 | 4 | export interface IDesignerPointerExtensionProvider { 5 | getExtension(designerView: IDesignerCanvas) : IDesignerPointerExtension; 6 | style? : CSSStyleSheet; 7 | svgDefs?: string; 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/LineExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; 2 | import { IDesignItem } from '../../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 4 | import { IDesignerExtension } from '../IDesignerExtension.js'; 5 | import { IExtensionManager } from '../IExtensionManger.js'; 6 | import { LineExtension } from './LineExtension.js'; 7 | import { isVisualSvgElement } from '../../../../helper/SvgHelper.js'; 8 | 9 | export class LineExtensionProvider implements IDesignerExtensionProvider { 10 | shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { 11 | if (designItem.node instanceof SVGLineElement) { 12 | return isVisualSvgElement(designItem.node);; 13 | } 14 | return false; 15 | } 16 | 17 | getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { 18 | return new LineExtension(extensionManager, designerView, designItem); 19 | } 20 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/PathExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; 2 | import { IDesignItem } from '../../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 4 | import { IDesignerExtension } from '../IDesignerExtension.js'; 5 | import { IExtensionManager } from '../IExtensionManger.js'; 6 | import { PathExtension } from './PathExtension.js'; 7 | import { isVisualSvgElement } from '../../../../helper/SvgHelper.js'; 8 | 9 | export class PathExtensionProvider implements IDesignerExtensionProvider { 10 | shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { 11 | if (designItem.node instanceof SVGPathElement) { 12 | return isVisualSvgElement(designItem.node);; 13 | } 14 | return false; 15 | } 16 | 17 | getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { 18 | return new PathExtension(extensionManager, designerView, designItem); 19 | } 20 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/RectExtensionProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; 2 | import { IDesignItem } from '../../../../item/IDesignItem.js'; 3 | import { IDesignerCanvas } from '../../IDesignerCanvas.js'; 4 | import { IDesignerExtension } from '../IDesignerExtension.js'; 5 | import { IExtensionManager } from '../IExtensionManger.js'; 6 | import { RectExtension } from './RectExtension.js'; 7 | import { isVisualSvgElement } from '../../../../helper/SvgHelper.js'; 8 | 9 | export class RectExtentionProvider implements IDesignerExtensionProvider { 10 | shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { 11 | if (designItem.node instanceof SVGRectElement) { 12 | return isVisualSvgElement(designItem.node);; 13 | } 14 | return false; 15 | } 16 | 17 | getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { 18 | return new RectExtension(extensionManager, designerView, designItem); 19 | } 20 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/overlay/EditTextOverlay.ts: -------------------------------------------------------------------------------- 1 | import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent'; 2 | 3 | export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend { 4 | 5 | public static override readonly style = css`` 6 | 7 | public static override readonly template = html` 8 |
9 | 10 |
11 | ` 12 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/ITool.ts: -------------------------------------------------------------------------------- 1 | import { IDisposable } from '../../../../interfaces/IDisposable.js'; 2 | import { ServiceContainer } from "../../../services/ServiceContainer.js"; 3 | import { IDesignerCanvas } from '../IDesignerCanvas.js'; 4 | 5 | //TODO: in tools dispose should be renamed, tools will be reused, so maybe cancel would be better 6 | export interface ITool extends IDisposable { 7 | readonly cursor: string; 8 | activated(serviceContainer: ServiceContainer); 9 | pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element); 10 | keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element); 11 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/NamedTools.ts: -------------------------------------------------------------------------------- 1 | export enum NamedTools { 2 | Pointer = 'Pointer', 3 | DrawSelection = 'DrawSelection', 4 | 5 | DrawPath = 'DrawPath', 6 | DrawRect = 'DrawRect', 7 | DrawEllipsis = 'DrawEllipsis', 8 | DrawLine = 'DrawLine', 9 | Zoom = 'Zoom', 10 | Pan = 'Pan', 11 | MagicWandSelector = 'MagicWandSelector', 12 | RectangleSelector = 'RectangleSelector', 13 | PickColor = 'PickColor', 14 | Text = 'Text', 15 | 16 | DrawElementTool = "DrawElementTool", 17 | 18 | Guides = 'Guides', 19 | Inspect = 'Inspect', 20 | Accessibility = 'Accessibility', 21 | Position = 'Position', 22 | Padding = "Padding", 23 | Margin = 'Margin', 24 | Flexbox = 'Flexbox', 25 | Move = 'Move', 26 | HueShift = 'HueShift', 27 | BoxShadows = 'BoxShadows', 28 | FontStyles = 'FontStyles' 29 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/PickColorTool.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from '../IDesignerCanvas.js'; 2 | import { ITool } from './ITool.js'; 3 | import { ServiceContainer } from '../../../services/ServiceContainer.js'; 4 | 5 | export class PickColorTool implements ITool { 6 | 7 | readonly cursor = 'crosshair'; 8 | 9 | async activated(serviceContainer: ServiceContainer) { 10 | try { 11 | //@ts-ignore 12 | const eyeDropper = new EyeDropper(); 13 | const colorSelectionResult = await eyeDropper.open(); 14 | const color = colorSelectionResult.sRGBHex; 15 | 16 | serviceContainer.globalContext.strokeColor = color; 17 | } 18 | finally { 19 | serviceContainer.globalContext.finishedWithTool(this); 20 | } 21 | } 22 | 23 | async pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { 24 | } 25 | 26 | keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) 27 | { } 28 | 29 | dispose(): void { 30 | } 31 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../IDesignerCanvas.js"; 2 | 3 | export interface IDesignViewToolbarButtonProvider { 4 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement 5 | } 6 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; 4 | import { assetsPath } from "../../../../../../Constants.js"; 5 | import { DrawToolPopup } from "../popups/DrawToolPopup.js"; 6 | 7 | export class DrawToolButtonProvider implements IDesignViewToolbarButtonProvider { 8 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 9 | const button = new DesignerToolbarButton(designerCanvas, { 10 | 'DrawLine': { icon: assetsPath + 'images/tools/DrawLineTool.svg' }, 11 | 'DrawPath': { icon: assetsPath + 'images/tools/DrawPathTool.svg' }, 12 | 'DrawRect': { icon: assetsPath + 'images/tools/DrawRectTool.svg' }, 13 | 'DrawEllipsis': { icon: assetsPath + 'images/tools/DrawEllipTool.svg' }, 14 | 'PickColor': { icon: assetsPath + 'images/tools/ColorPickerTool.svg' } 15 | }); 16 | button.popup = DrawToolPopup 17 | return button; 18 | } 19 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; 4 | import { assetsPath } from "../../../../../../Constants.js"; 5 | import { PointerToolPopup } from "../popups/PointerToolPopup.js"; 6 | 7 | export class PointerToolButtonProvider implements IDesignViewToolbarButtonProvider { 8 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 9 | const button = new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/tools/PointerTool.svg' } }); 10 | button.popup = PointerToolPopup 11 | return button; 12 | } 13 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; 4 | import { assetsPath } from "../../../../../../Constants.js"; 5 | import { SelectionToolPopup } from "../popups/SelectionToolPopup.js"; 6 | 7 | export class SelectorToolButtonProvider implements IDesignViewToolbarButtonProvider { 8 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 9 | const button = new DesignerToolbarButton(designerCanvas, { 10 | 'RectangleSelector': { icon: assetsPath + 'images/tools/SelectRectTool.svg' }, 11 | 'MagicWandSelector': { icon: assetsPath + 'images/tools/MagicWandTool.svg' } 12 | }); 13 | button.popup = SelectionToolPopup 14 | return button; 15 | } 16 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | 4 | export class SeperatorToolProvider implements IDesignViewToolbarButtonProvider { 5 | constructor(distance: number) { 6 | this.distance = distance; 7 | } 8 | 9 | distance: number; 10 | 11 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 12 | const div = document.createElement('div'); 13 | div.style.marginTop = this.distance + 'px'; 14 | return div; 15 | } 16 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/SimpleToolButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; 4 | 5 | export class SimpleToolButtonProvider implements IDesignViewToolbarButtonProvider { 6 | private _name: string; 7 | private _icon: string; 8 | constructor(name: string, icon: string) { 9 | this._name = name; 10 | this._icon = icon; 11 | } 12 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 13 | let obj = {}; 14 | obj[this._name] = { icon: this._icon } 15 | return new DesignerToolbarButton(designerCanvas, obj); 16 | } 17 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; 4 | import { assetsPath } from "../../../../../../Constants.js"; 5 | 6 | export class TextToolButtonProvider implements IDesignViewToolbarButtonProvider { 7 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 8 | return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/tools/TextTool.svg' } }); 9 | } 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; 4 | import { assetsPath } from "../../../../../../Constants.js"; 5 | import { TransformToolPopup } from "../popups/TransformToolPopup.js"; 6 | 7 | export class TransformToolButtonProvider implements IDesignViewToolbarButtonProvider { 8 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 9 | const button = new DesignerToolbarButton(designerCanvas, { '': { icon: assetsPath + 'images/tools/TransformTool.svg' } }); 10 | button.popup = TransformToolPopup; 11 | return button; 12 | } 13 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.ts: -------------------------------------------------------------------------------- 1 | import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; 2 | import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; 3 | import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; 4 | import { assetsPath } from "../../../../../../Constants.js"; 5 | 6 | export class ZoomToolButtonProvider implements IDesignViewToolbarButtonProvider { 7 | provideButton(designerCanvas: IDesignerCanvas): HTMLElement { 8 | return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/tools/ZoomTool.svg' } }); 9 | } 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.ts: -------------------------------------------------------------------------------- 1 | import { html } from '@node-projects/base-custom-webcomponent'; 2 | import { assetsPath } from "../../../../../../Constants.js"; 3 | import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js'; 4 | 5 | export class PointerToolPopup extends AbstractBaseToolPopup { 6 | 7 | static override template = html` 8 |
9 |

Selection

10 |
11 |
12 |
13 |
14 |
15 |
16 |
`; 17 | } 18 | 19 | customElements.define('node-projects-designer-pointer-tool-popup', PointerToolPopup); -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/miniatureView/IMiniatureView.ts: -------------------------------------------------------------------------------- 1 | export interface IMiniatureView { 2 | 3 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/elements/widgets/treeView/ITreeView.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem } from '../../item/IDesignItem.js'; 2 | import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js'; 3 | 4 | //TODO: buttons in treeview so keyboard events could be directed to designer 5 | 6 | export interface ITreeView { 7 | createTree(rootItem: IDesignItem); 8 | selectionChanged(event: ISelectionChangedEvent); 9 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/enums/EventNames.ts: -------------------------------------------------------------------------------- 1 | export enum EventNames { 2 | PointerDown = 'pointerdown', 3 | PointerMove = 'pointermove', 4 | PointerUp = 'pointerup', 5 | DragEnter = 'dragenter', 6 | DragEnd = 'dragend', 7 | DragLeave = 'dragleave', 8 | DragOver = 'dragover', 9 | Drop = 'drop', 10 | Scroll = 'scroll', 11 | Wheel = 'wheel', 12 | ContextMenu = 'contextmenu', 13 | KeyDown = 'keydown', 14 | KeyUp = 'keyup', 15 | DblClick = 'dblclick' 16 | } 17 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/enums/Orientation.ts: -------------------------------------------------------------------------------- 1 | export enum Orientation { 2 | TOP, 3 | RIGHT, 4 | BOTTOM, 5 | LEFT, 6 | VERTICAL_CENTER, 7 | HORIZONTAL_CENTER, 8 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/enums/PointerActionType.ts: -------------------------------------------------------------------------------- 1 | export enum PointerActionType { 2 | DragOrSelect = 'DragOrSelect', 3 | Drag = 'Drag', 4 | Resize = 'Resize', 5 | Rotate = 'Rotate', 6 | DrawSelection = 'DrawSelection', 7 | DrawingSelection = 'DrawingSelection' 8 | } 9 | -------------------------------------------------------------------------------- /packages/web-component-designer/src/interfaces/IActivateable.ts: -------------------------------------------------------------------------------- 1 | export interface IActivateable { 2 | activated: () => void 3 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/interfaces/IDisposable.ts: -------------------------------------------------------------------------------- 1 | 2 | export interface IDisposable { 3 | dispose(): void; 4 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/interfaces/IPoint.ts: -------------------------------------------------------------------------------- 1 | export interface IPoint { 2 | x: number 3 | y: number 4 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/interfaces/IPoint3D.ts: -------------------------------------------------------------------------------- 1 | export interface IPoint3D { 2 | x: number 3 | y: number 4 | z: number 5 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/interfaces/IRect.ts: -------------------------------------------------------------------------------- 1 | export interface IRect { 2 | x: number 3 | y: number 4 | width: number 5 | height: number 6 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/interfaces/ISize.ts: -------------------------------------------------------------------------------- 1 | export interface ISize { 2 | width: number 3 | height: number 4 | } -------------------------------------------------------------------------------- /packages/web-component-designer/src/polyfill/globals.ts: -------------------------------------------------------------------------------- 1 | export { }; 2 | 3 | declare global { 4 | interface Window { } 5 | 6 | interface Function { 7 | style: CSSStyleSheet; 8 | svgDefs: string; 9 | } 10 | } -------------------------------------------------------------------------------- /packages/web-component-designer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "./dist", 6 | "rootDir": "./src", 7 | "noEmit": false, 8 | "sourceMap": true, 9 | "allowJs": true 10 | }, 11 | "include": [ 12 | "./src/**/*.ts", 13 | "./src/**/*.js", 14 | "./src/**/*.json" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /todos/VueParserService.ts: -------------------------------------------------------------------------------- 1 | /* 2 | WIP a parser for vue elements 3 | 4 | import { InstanceServiceContainer } from '../InstanceServiceContainer.js'; 5 | import { ServiceContainer } from '../ServiceContainer.js'; 6 | import { IHtmlParserService } from './IHtmlParserService.js'; 7 | import { IDesignItem } from '../../item/IDesignItem.js'; 8 | 9 | export class VueParserService implements IHtmlParserService { 10 | private htmlParser: IHtmlParserService; 11 | 12 | constructor(htmlParser: IHtmlParserService) { 13 | this.htmlParser = htmlParser; 14 | } 15 | 16 | async parse(code: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { 17 | const parsed = await this.htmlParser.parse(code, serviceContainer, instanceServiceContainer, parseSnippet); 18 | return [parsed.find(x => x.name == 'template')]; 19 | } 20 | } 21 | */ -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.build.json", 3 | "compilerOptions": { 4 | "noEmit": true 5 | } 6 | } --------------------------------------------------------------------------------