Repository: node-projects/web-component-designer Branch: master Commit: acd3bbac6007 Files: 669 Total size: 2.5 MB Directory structure: gitextract_pnfc9i6h/ ├── .editorconfig ├── .github/ │ ├── FUNDING.yml │ └── copilot-instructions.md ├── .gitignore ├── ACKNOWLEDGMENTS ├── AGENTS.md ├── CLAUDE.md ├── COMPARISON.md ├── LICENSE ├── README.md ├── editor.code-workspace ├── jest.config.js ├── memories/ │ ├── attribute-source-part-jump-note.md │ ├── default-html-parser-source-parts-note.md │ ├── freehand-path-interpolation-note.md │ ├── getboxquads-svg-fast-path-removal.md │ ├── mermaid-diagram-support-plan.md │ ├── monaco-selection-coalesce-note.md │ ├── node-html-parser-source-parts-note.md │ ├── source-part-selection-coalesce-note.md │ ├── svg-affine-overlay-point-conversion-note.md │ ├── svg-geometry-placement-transform-offset-note.md │ └── unified-geometry-click-selection-no-commit.md ├── memory/ │ ├── context-menu-copy-paste-pattern.md │ ├── context-menu-popover-anchor-note.md │ ├── css-numeric-percent-measured-size-note.md │ ├── css-numeric-preview-lock-shadow-host-note.md │ ├── css-zoom-placement-preview-note.md │ ├── cssom-shorthand-test-note.md │ ├── jest-esm-validation-note.md │ ├── jest-source-import-style-note.md │ ├── linked-package-type-compat-note.md │ ├── manual-collab-snapshot-request.md │ ├── overlay-refresh-pattern.md │ ├── pointertool-selected-quad-drag-note.md │ ├── property-grid-designitem-cache-sync-note.md │ ├── property-grid-preview-recreation-fix.md │ ├── resize-left-top-initial-local-axis-note.md │ ├── straighten-line-screen-y-note.md │ ├── svg-getctm-double-transform-note.md │ ├── svg-rect-style-geometry-write-note.md │ ├── transform-preview-sync-pattern.md │ ├── transformed-resize-grid-local-point-pattern.md │ ├── undo-group-content-changed-commit-note.md │ └── webrtc-cross-machine-ice-config-note.md ├── package.json ├── packages/ │ ├── web-component-designer/ │ │ ├── .npmignore │ │ ├── README.md │ │ ├── _esbuild.js │ │ ├── assets/ │ │ │ ├── designerCanvasIframe.html │ │ │ └── images/ │ │ │ ├── chromeDevtools/ │ │ │ │ ├── LICENSE │ │ │ │ └── info.txt │ │ │ └── treeview/ │ │ │ └── license.txt │ │ ├── config/ │ │ │ └── elements-native.json │ │ ├── jest.config.js │ │ ├── jsr.json │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Constants.ts │ │ │ ├── commandHandling/ │ │ │ │ ├── CommandType.ts │ │ │ │ ├── IUiCommand.ts │ │ │ │ └── IUiCommandHandler.ts │ │ │ ├── elements/ │ │ │ │ ├── controls/ │ │ │ │ │ ├── ColorEditor.ts │ │ │ │ │ ├── DesignerTabControl.ts │ │ │ │ │ ├── ImageButtonListSelector.ts │ │ │ │ │ ├── MetricsEditor.ts │ │ │ │ │ ├── NumericStyleInput.ts │ │ │ │ │ ├── NumericStyleInputValueHelpers.ts │ │ │ │ │ ├── PlainScrollbar.ts │ │ │ │ │ ├── SimpleSplitView.ts │ │ │ │ │ └── ThicknessEditor.ts │ │ │ │ ├── documentContainer.ts │ │ │ │ ├── helper/ │ │ │ │ │ ├── ArrangeHelper.ts │ │ │ │ │ ├── Browser.ts │ │ │ │ │ ├── ClipboardHelper.ts │ │ │ │ │ ├── CssAttributeParser.ts │ │ │ │ │ ├── CssCombiner.ts │ │ │ │ │ ├── CssImportant.ts │ │ │ │ │ ├── CssUnitConverter.ts │ │ │ │ │ ├── DesignerStylesheetPatcher.ts │ │ │ │ │ ├── ElementHelper.ts │ │ │ │ │ ├── GridHelper.ts │ │ │ │ │ ├── Helper.ts │ │ │ │ │ ├── ITextWriter.ts │ │ │ │ │ ├── IndentedTextWriter.ts │ │ │ │ │ ├── KeyboardHelper.ts │ │ │ │ │ ├── LayoutHelper.ts │ │ │ │ │ ├── NpmPackageHacks.json │ │ │ │ │ ├── NpmPackageLoader.ts │ │ │ │ │ ├── ObservedCustomElementsRegistry.ts │ │ │ │ │ ├── PathDataPolyfill.ts │ │ │ │ │ ├── PopupHelper.ts │ │ │ │ │ ├── QuadEdgeHandleHelper.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 │ │ │ │ │ ├── collaborationService/ │ │ │ │ │ │ ├── CollaborationNodeIndex.ts │ │ │ │ │ │ └── ICollaborationService.ts │ │ │ │ │ ├── configUiService/ │ │ │ │ │ │ └── IConfigUiService.ts │ │ │ │ │ ├── copyPasteService/ │ │ │ │ │ │ ├── CopyPasteAsJsonService.ts │ │ │ │ │ │ ├── CopyPasteService.ts │ │ │ │ │ │ ├── ICopyPasteService.ts │ │ │ │ │ │ └── PasteFormatSnapshot.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 │ │ │ │ │ │ └── SimpleHtmlWriterService.ts │ │ │ │ │ ├── initializationService/ │ │ │ │ │ │ └── IIntializationService.ts │ │ │ │ │ ├── instanceService/ │ │ │ │ │ │ ├── DefaultInstanceService.ts │ │ │ │ │ │ ├── IDesignerInstance.ts │ │ │ │ │ │ └── IInstanceService.ts │ │ │ │ │ ├── manifestParsers/ │ │ │ │ │ │ ├── IOldCustomElementsManifest.ts │ │ │ │ │ │ ├── OldCustomElementsManifestLoader.ts │ │ │ │ │ │ └── WebcomponentManifestParserService.ts │ │ │ │ │ ├── miniatureViewService/ │ │ │ │ │ │ ├── IMiniatureViewService.ts │ │ │ │ │ │ └── MiniatureViewService.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 │ │ │ │ │ ├── pngCreatorService/ │ │ │ │ │ │ ├── DisplayMediaPngWriterService.ts │ │ │ │ │ │ ├── ElectronPngWriterService.ts │ │ │ │ │ │ └── IPngCreatorService.ts │ │ │ │ │ ├── propertiesService/ │ │ │ │ │ │ ├── DefaultEditorTypeService.ts │ │ │ │ │ │ ├── DefaultPropertyEditorTypesService.ts │ │ │ │ │ │ ├── IEditorTypeService.ts │ │ │ │ │ │ ├── IPropertiesService.ts │ │ │ │ │ │ ├── IProperty.ts │ │ │ │ │ │ ├── IPropertyEditor.ts │ │ │ │ │ │ ├── IPropertyEditorTypesService.ts │ │ │ │ │ │ ├── IPropertyGroup.ts │ │ │ │ │ │ ├── IPropertyGroupsService.ts │ │ │ │ │ │ ├── PropertyGroupsService.ts │ │ │ │ │ │ ├── PropertyMutationHandling.ts │ │ │ │ │ │ ├── PropertyType.ts │ │ │ │ │ │ ├── ValueType.ts │ │ │ │ │ │ ├── propertyEditors/ │ │ │ │ │ │ │ ├── AnglePropertyEditor.ts │ │ │ │ │ │ │ ├── BasePropertyEditor.ts │ │ │ │ │ │ │ ├── BooleanPropertyEditor.ts │ │ │ │ │ │ │ ├── ColorPropertyEditor.ts │ │ │ │ │ │ │ ├── CssPropertyEditor.ts │ │ │ │ │ │ │ ├── DatePropertyEditor.ts │ │ │ │ │ │ │ ├── DefaultPropertyEditor.ts │ │ │ │ │ │ │ ├── FontPropertyEditor.ts │ │ │ │ │ │ │ ├── ImageButtonListPropertyEditor.ts │ │ │ │ │ │ │ ├── JsonPropertyEditor.ts │ │ │ │ │ │ │ ├── JsonPropertyPopupEditor.ts │ │ │ │ │ │ │ ├── NumberPropertyEditor.ts │ │ │ │ │ │ │ ├── SelectPropertyEditor.ts │ │ │ │ │ │ │ ├── TextPropertyEditor.ts │ │ │ │ │ │ │ ├── ThicknessPropertyEditor.ts │ │ │ │ │ │ │ ├── UnitPropertyEditor.ts │ │ │ │ │ │ │ ├── UnitPropertyEditorConfig.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 │ │ │ │ │ ├── referencesChangedService/ │ │ │ │ │ │ └── IReferencesChangedService.ts │ │ │ │ │ ├── renderedDesignItemService/ │ │ │ │ │ │ ├── IRenderedDesignItemService.ts │ │ │ │ │ │ └── StyleElementRenderedDesignItemService.ts │ │ │ │ │ ├── searchService/ │ │ │ │ │ │ ├── ISearchResult.ts │ │ │ │ │ │ ├── ISearchService.ts │ │ │ │ │ │ └── SearchService.ts │ │ │ │ │ ├── selectionService/ │ │ │ │ │ │ ├── ISelectionChangedEvent.ts │ │ │ │ │ │ ├── ISelectionRefreshEvent.ts │ │ │ │ │ │ ├── ISelectionService.ts │ │ │ │ │ │ └── SelectionService.ts │ │ │ │ │ ├── sourceMapService/ │ │ │ │ │ │ ├── ISourceMapProvider.ts │ │ │ │ │ │ ├── ISourcePart.ts │ │ │ │ │ │ ├── SvgPathDataSourceMap.ts │ │ │ │ │ │ └── SvgPathSourceMapProvider.ts │ │ │ │ │ ├── stylesheetService/ │ │ │ │ │ │ ├── AbstractStylesheetService.ts │ │ │ │ │ │ ├── IStylesheetService.ts │ │ │ │ │ │ └── SpecificityCalculator.ts │ │ │ │ │ ├── treeStructureService/ │ │ │ │ │ │ ├── ITreeStructureChangedEvent.ts │ │ │ │ │ │ └── ITreeStructureService.ts │ │ │ │ │ └── undoService/ │ │ │ │ │ ├── ChangeGroup.ts │ │ │ │ │ ├── ITransactionItem.ts │ │ │ │ │ ├── IUndoChangeEvent.ts │ │ │ │ │ ├── IUndoService.ts │ │ │ │ │ ├── UndoService.ts │ │ │ │ │ └── transactionItems/ │ │ │ │ │ ├── AttributeAndPropertyChangeAction.ts │ │ │ │ │ ├── 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 │ │ │ │ │ │ ├── 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 │ │ │ │ │ │ ├── SelectionDefaultExtension.ts │ │ │ │ │ │ ├── SelectionDefaultExtensionProvider.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 │ │ │ │ │ │ │ ├── BasicContextMenu.ts │ │ │ │ │ │ │ ├── ChildContextMenu.ts │ │ │ │ │ │ │ ├── ChildrenContextMenu.ts │ │ │ │ │ │ │ ├── CopyPasteContextMenu.ts │ │ │ │ │ │ │ ├── ForceCssContextMenu.ts │ │ │ │ │ │ │ ├── IContextMenuExtension.ts │ │ │ │ │ │ │ ├── ItemsBelowContextMenu.ts │ │ │ │ │ │ │ ├── JumpToElementContextMenu.ts │ │ │ │ │ │ │ ├── MultipleItemsSelectedContextMenu.ts │ │ │ │ │ │ │ ├── PasteFormatContextMenu.ts │ │ │ │ │ │ │ ├── PathContextMenu.ts │ │ │ │ │ │ │ ├── RectContextMenu.ts │ │ │ │ │ │ │ ├── RotateLeftAndRightContextMenu.ts │ │ │ │ │ │ │ ├── SelectAllChildrenContextMenu.ts │ │ │ │ │ │ │ ├── SeperatorContextMenu.ts │ │ │ │ │ │ │ ├── ToolWindowsContextMenu.ts │ │ │ │ │ │ │ ├── ZMoveContextMenu.ts │ │ │ │ │ │ │ └── ZoomToElementContextMenu.ts │ │ │ │ │ │ ├── flex/ │ │ │ │ │ │ │ ├── FlexToolbarExtension.ts │ │ │ │ │ │ │ ├── FlexToolbarExtensionProvider.ts │ │ │ │ │ │ │ ├── FlexboxExtension.ts │ │ │ │ │ │ │ └── FlexboxExtensionProvider.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 │ │ │ │ │ │ │ ├── LinePointerExtension.ts │ │ │ │ │ │ │ └── LinePointerExtensionProvider.ts │ │ │ │ │ │ ├── svg/ │ │ │ │ │ │ │ ├── UnifiedGeometryExtension.ts │ │ │ │ │ │ │ ├── UnifiedGeometryExtensionProvider.ts │ │ │ │ │ │ │ └── geometry/ │ │ │ │ │ │ │ ├── CssClipPathGeometryReader.ts │ │ │ │ │ │ │ ├── CssOffsetPathGeometryReader.ts │ │ │ │ │ │ │ ├── CssShapeOutsideGeometryReader.ts │ │ │ │ │ │ │ ├── GeometryReaderFactory.ts │ │ │ │ │ │ │ ├── GeometryWriteHelper.ts │ │ │ │ │ │ │ ├── IGeometry.ts │ │ │ │ │ │ │ ├── SvgCircleGeometryReader.ts │ │ │ │ │ │ │ ├── SvgEllipseGeometryReader.ts │ │ │ │ │ │ │ ├── SvgLineGeometryReader.ts │ │ │ │ │ │ │ ├── SvgPathGeometryReader.ts │ │ │ │ │ │ │ ├── SvgPolygonGeometryReader.ts │ │ │ │ │ │ │ ├── SvgPolylineGeometryReader.ts │ │ │ │ │ │ │ └── SvgRectGeometryReader.ts │ │ │ │ │ │ └── transforms/ │ │ │ │ │ │ ├── ProjectiveTransformExtension.ts │ │ │ │ │ │ ├── ProjectiveTransformExtensionProvider.ts │ │ │ │ │ │ ├── RotateExtension.ts │ │ │ │ │ │ ├── RotateExtensionProvider.ts │ │ │ │ │ │ ├── RotateGroupExtension.ts │ │ │ │ │ │ ├── RotateGroupExtensionProvider.ts │ │ │ │ │ │ ├── SkewExtension.ts │ │ │ │ │ │ ├── SkewExtensionProvider.ts │ │ │ │ │ │ ├── TransformOriginExtension.ts │ │ │ │ │ │ └── TransformOriginExtensionProvider.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 │ │ │ │ │ ├── BorderRadiusEditorWindow.ts │ │ │ │ │ ├── BoxShadowEditorWindow.ts │ │ │ │ │ ├── DraggableToolWindow.ts │ │ │ │ │ ├── DrawToolPopup.ts │ │ │ │ │ ├── GradientEditorWindow.ts │ │ │ │ │ ├── PointerToolPopup.ts │ │ │ │ │ ├── SelectionToolPopup.ts │ │ │ │ │ ├── TextShadowEditorWindow.ts │ │ │ │ │ └── TransformToolPopup.ts │ │ │ │ ├── layerDepthView/ │ │ │ │ │ ├── ILayerDepthView.ts │ │ │ │ │ └── layerDepthView.ts │ │ │ │ ├── miniatureView/ │ │ │ │ │ ├── IMiniatureView.ts │ │ │ │ │ └── miniatureView.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-all.ts │ │ │ ├── index.ts │ │ │ ├── interfaces/ │ │ │ │ ├── IActivateable.ts │ │ │ │ ├── IDisposable.ts │ │ │ │ ├── IPoint.ts │ │ │ │ ├── IPoint3D.ts │ │ │ │ ├── IRect.ts │ │ │ │ └── ISize.ts │ │ │ └── polyfill/ │ │ │ └── globals.ts │ │ ├── tests/ │ │ │ ├── ContextMenu.test.ts │ │ │ ├── CssCombiner.test.ts │ │ │ ├── CssImportant.test.ts │ │ │ ├── DesignerStylesheetPatcher.test.ts │ │ │ ├── GridHelper.test.ts │ │ │ ├── NumericStyleInput.test.ts │ │ │ ├── PasteFormatSnapshot.test.ts │ │ │ ├── PathDataPolyfill.test.ts │ │ │ ├── PropertyGridRefresh.test.ts │ │ │ ├── SpecificityCalculator.test.ts │ │ │ ├── SvgGeometryPlacement.test.ts │ │ │ └── SvgPathDataSourceMap.test.ts │ │ └── tsconfig.json │ ├── 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-collaboration-service/ │ │ ├── .npmignore │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── extensions/ │ │ │ │ ├── CollaborationCommentsContextMenu.ts │ │ │ │ ├── CollaborationCursorOverlayExtension.ts │ │ │ │ ├── CollaborationCursorOverlayExtensionProvider.ts │ │ │ │ ├── CollaborationOverlayExtension.ts │ │ │ │ └── CollaborationOverlayExtensionProvider.ts │ │ │ ├── index.ts │ │ │ ├── services/ │ │ │ │ ├── DefaultCollaborationService.ts │ │ │ │ └── WebRtcTabCollaborationTransport.ts │ │ │ └── setupCollaborationService.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-mermaid/ │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── monaco/ │ │ │ │ └── MermaidLanguage.ts │ │ │ ├── services/ │ │ │ │ ├── MermaidConnectionRouting.ts │ │ │ │ ├── MermaidDocumentPropertiesService.ts │ │ │ │ ├── MermaidElementsService.ts │ │ │ │ ├── MermaidLayoutCopyPasteService.ts │ │ │ │ ├── MermaidLayoutPlacementService.ts │ │ │ │ ├── MermaidParserService.ts │ │ │ │ ├── MermaidPropertyGroupsService.ts │ │ │ │ └── mermaidGeometry.ts │ │ │ ├── setupMermaidServiceContainer.ts │ │ │ ├── toolbar/ │ │ │ │ └── ConnectMermaidNodesTool.ts │ │ │ └── widgets/ │ │ │ ├── elements.json │ │ │ ├── mermaid-edge.ts │ │ │ ├── mermaid-flowchart-directive.ts │ │ │ ├── mermaid-mindmap-node.ts │ │ │ ├── mermaid-node.ts │ │ │ ├── mermaid-requirement-node.ts │ │ │ ├── mermaid-requirement-relationship.ts │ │ │ ├── mermaid-sequence-message.ts │ │ │ ├── mermaid-sequence-participant.ts │ │ │ ├── mermaid-subgraph.ts │ │ │ └── views/ │ │ │ └── mermaid-demo-view.ts │ │ └── tsconfig.json │ ├── web-component-designer-stylesheetservice-css-parser/ │ │ ├── .npmignore │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ └── service/ │ │ │ └── stylesheetservice/ │ │ │ └── CssParserStylesheetService.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 │ │ │ │ └── info.txt │ │ │ ├── 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 │ │ │ │ └── VisualizationEventsService.ts │ │ │ └── setupVisuService.ts │ │ └── tsconfig.json │ ├── web-component-designer-widgets-wunderbaum/ │ │ ├── .npmignore │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── Constants.ts │ │ │ ├── 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 ├── todos/ │ ├── VueParserService.ts │ └── todo.md ├── tsconfig.build.json └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*] end_of_line = crlf insert_final_newline = false indent_style = space indent_size = 2 ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: jogibear9988 patreon: jogibear9988 ================================================ FILE: .github/copilot-instructions.md ================================================ ## Project Agent Instructions - Before starting work, read [AGENTS.md](../AGENTS.md) and follow its guidance. - Treat [AGENTS.md](../AGENTS.md) as the canonical agent behavior file for this repository. ================================================ FILE: .gitignore ================================================ node_modules/ dist/ /.vs debug.log /.vscode *.tsbuildinfo ================================================ FILE: ACKNOWLEDGMENTS ================================================ # Acknowledgments - Thanks to @notwaldorf who created the original `wizzywid` project (MIT License). https://github.com/PolymerLabs/wizzywid This was a start for this whole project (even if mostly nothing of the original code is left) - Thanks to @chdh for plain-scrollbar component https://github.com/chdh/plain-scrollbar - Thanks to @m-thalmann for contextmenujs https://github.com/m-thalmann/contextmenujs (also we have heavily modified it) - Levi Cole for parts of the cssUnits conversion code https://stackoverflow.com/a/66569574/579623 - Domi for text-width code https://stackoverflow.com/a/21015393 - gwwar for getClosestStackingContext https://github.com/gwwar/z-context - google icons https://fonts.google.com/icons ================================================ FILE: AGENTS.md ================================================ ## Project Agent Instructions - AI agents must store memories under the repository [memories/](memories) directory. ## Why These Guidelines Exist - Agents may make unchecked assumptions, hide confusion, and skip clarifications. - Agents may overengineer solutions with unnecessary abstractions and code bloat. - Agents may accidentally modify unrelated code or comments as side effects. ## Core Principles ### 1. Think Before Coding - State assumptions explicitly; if uncertain, ask instead of guessing. - Surface ambiguity and tradeoffs rather than silently choosing one interpretation. - Push back when a simpler and safer approach exists. - Stop and ask for clarification when confusion remains. ### 2. Simplicity First - Implement the minimum code needed to solve the requested problem. - Do not add speculative features, configurability, or abstractions not requested. - Avoid handling impossible scenarios just to look complete. - If a solution can be significantly simpler, prefer the simpler version. ### 3. Surgical Changes - Touch only code required by the task. - Do not refactor or restyle adjacent code that is unrelated to the request. - Match existing project style and patterns. - If you see unrelated dead code, mention it; do not remove it unless asked. - Remove only unused artifacts created by your own changes. ### 4. Goal-Driven Execution - Define concrete success criteria before implementation. - Prefer verifiable outcomes, usually with tests or explicit checks. - For multi-step tasks, use a short plan where each step includes a verification check. - Continue iterating until criteria are met or a real blocker is identified. ## Success Signals - Diffs contain only requested changes. - Solutions are simple and avoid unnecessary rewrites. - Clarifying questions happen before implementation when needed. - Pull requests stay minimal and focused. ## Tradeoff - These rules prioritize caution and correctness over raw speed on non-trivial tasks. - For obvious small changes, use proportional rigor. ================================================ FILE: CLAUDE.md ================================================ ## Project Agent Instructions - Before starting work, read [AGENTS.md](AGENTS.md) and follow its guidance. - Treat [AGENTS.md](AGENTS.md) as the canonical agent behavior file for this repository. ================================================ FILE: COMPARISON.md ================================================ ## Similar Frameworks | Name | Licence | Edit Source | Split View | Zooming | Resize Transformed | No Iframe | Iframe | Iframe isolation | Modifies Dom | Multiplayer | URL | |-------------------------|----------|-------------|------------|---------|--------------------| ----------|--------|------------------|--------------|-------------|----------------------------------------| | web-component-designer | MIT | yes | yes | yes | yes | yes | yes | allow-same-origin| no | yes no | | | GrapeJS | BSD-3 | yes | no | no | broken | no | yes | no | yes | no | https://grapesjs.com/ | | CraftJS | MIT | no | no | no | | no | yes | no | yes | no | https://craft.js.org/ | | raisins | MIT | - | no | no | | no | yes | yes | yes | no | https://github.com/saasquatch/raisins | ### Description - Zooming => can zoom Designer Canvas - No iframe => can Design in a Shadow Root (No Iframe, all Components already loaded are usable) - Iframe => can Design inside of an Iframe - Iframe Isolation => iframe can be isolated (against XSS attacks) - Modifies DOM => inserts it's overlays directly into edited DOM (this could be Bad, when a Component depends on the DOM or css classes collide) - Multiplayer => Multiple Users can design a document at the same time ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2021 node-projects Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # web-component-designer A HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software. Meanwhile polymer is not used anymore. ![image](https://user-images.githubusercontent.com/364896/117482820-358e2d80-af65-11eb-97fd-9d15ebf1966f.png) There is also a preview VSCode addon using the designer: https://github.com/node-projects/vs-code-designer-addon ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer ## Comparison [Comparison of Designer Frameworks](COMPARISON.md) ## Additional NPM Packages All Modules which need an external dependency are now extracted to extra NPM packges. So the designer now should work with bundlers. | Name | Description | | ---------------------------------------------------------------------- | -------------------------------------------- | | web-component-designer-codeview-ace | | | web-component-designer-codeview-codemirror | | | web-component-designer-codeview-codemirror5 | | | web-component-designer-codeview-monaco | atm. stuck at monaco 0.50.0 (webcomp supp) | | web-component-designer-collaboration-service | | | web-component-designer-htmlparserservice-base-custom-webcomponent | | | web-component-designer-htmlparserservice-lit-element | | | web-component-designer-htmlparserservice-nodehtmlparser | | | ~~web-component-designer-miniatureview-html2canvas~~ | never worked correctly | | web-component-designer-stylesheetservice-css-parser | | | ~~web-component-designer-stylesheetservice-css-tools~~ | deprecated - switched to css-parser | | ~~web-component-designer-stylesheetservice-css-tree~~ | deprecated - did never work very well | | web-component-designer-visualization-addons | | | ~~web-component-designer-texteditextension-stylo~~ | deprecated - stylo is deprecated | | ~~web-component-designer-widgets-fancytree~~ | deprecated - replaced by widgets-wunderbaum | | web-component-designer-widgets-wunderbaum | | ## Browser support - Chrome, Firefox and Safari ## Projects using it A ZPL-Label Designer: (https://github.com/node-projects/web-component-designer-zpl-demo) ![image](https://github.com/node-projects/web-component-designer/assets/364896/e1f1e3cc-29a3-4749-a676-389577fab69a) A material flow layout editor in a comercial application: ![image](https://github.com/node-projects/web-component-designer/assets/364896/0062562a-4224-4b11-aaa4-03e31494fcfa) A flow chart editor ![image](https://github.com/user-attachments/assets/bcefa433-27fd-4be6-b3b7-a8264d66bef5) ## Demo look at: https://node-projects.github.io/web-component-designer-demo/index.html repository: https://github.com/node-projects/web-component-designer-demo or a simple one: https://node-projects.github.io/web-component-designer-simple-demo/index.html repository: https://github.com/node-projects/web-component-designer-simple-demo ## What is needed - @node-projects/base-custom-webcomponent a very small basic webcomponent library (maybe this will be included directly later, to be dependecy free) - optional - ace code editor - optional - monaco code editor (if you use code-view-monaco) - optional - code mirror code editor (if you use code-view-codemirror) (workin but buggy) - optional - fancytree (if you use tree-view-extended, palette-tree-view or bindable-objects-browser) ## Features we are working on https://github.com/node-projects/web-component-designer/issues ## Developing * This will install all required packages, link all the npm packages and build everyone once. (in mac or linux you need to run the script with sudo, or the "npm link" will not work) ``` $ npm run develop ``` ## Using At first you have to setup a service container providing services for history, properties, elements, ... ## Code Editor You can select to use one of 3 code editors available (ACE, CodeMirrow, Monaco). If you use one of the widgets, you need to include the JS lib in your index.html and then use the specific widget. ## TreeView We have 2 tree components. One independent and one feature rich which uses FancyTree (and cause of this it needs JQuery and JqueryUI). ## DragDrop If you'd like to use the designer on mobile, you need the mobile-drag-drop npm library. Your index.html should be extended as follows: ## Copyright notice The Library uses Images from the Chrome Dev Tools, see https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src and https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE ================================================ FILE: editor.code-workspace ================================================ { "folders": [ { "path": "." }, { "path": "../web-component-designer-demo" } ], "settings": { "jestrunner.debugOptions": { "runtimeArgs": [ "--experimental-vm-modules", "--enable-source-maps" ] } } } ================================================ FILE: jest.config.js ================================================ export default { testMatch: ['**/?(*.)+(spec|test).+(mts|ts|tsx|mjs|js)'], preset: "ts-jest/presets/default-esm", testEnvironment: "node", extensionsToTreatAsEsm: ['.ts', '.mts'], moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1' }, transform: { '^.+\\.(mts|ts|tsx|mjs|js)$': [ "ts-jest", { "useESM": true, "tsconfig": { "allowJs": true } } ] }, transformIgnorePatterns: [ '/node_modules/(?!(?:@node-projects/base-custom-webcomponent)(?:/|$))' ] } ================================================ FILE: memories/attribute-source-part-jump-note.md ================================================ Attribute property-grid source navigation uses `attribute:${attributeName}` source parts generated by `AbstractHtmlWriterService`. Set the design item selection first if needed, then call `selectionService.setSelectedPart(sourcePart)`; the document container must listen to selection refresh events as well as full selection changes so same-element source-part jumps update the code selection. ================================================ FILE: memories/default-html-parser-source-parts-note.md ================================================ DefaultHtmlParserService cannot read original source ranges from DOMParser nodes. After full parses, run the HTML writer with `updatePositions=true` on the created design items so attribute/source-part navigation works immediately from the normalized designer HTML, matching what code view receives after switching back. ================================================ FILE: memories/freehand-path-interpolation-note.md ================================================ Freehand `DrawPathTool` can interpolate linear path points during drag with `interpolatePoints: true` and an optional `interpolationDistance`; the stock default tool opts in with 5px maximum spacing. Keep point-to-point path mode separate so its shift/angle snapping behavior stays unchanged. ================================================ FILE: memories/getboxquads-svg-fast-path-removal.md ================================================ # getBoxQuads SVG visual boxes SVGGraphicsElement quads should be built from a local SVG visual box, then transformed into the requested coordinate system. A viewport `getBoundingClientRect()` shortcut is not generally correct because it is already post-transform and loses orientation under rotated/3D HTML ancestors. A raw `getBBox()` is also not enough because native Firefox includes stroke bounds for SVG lines and paths. The current polyfill computes a local visual box from `getBBox()` plus stroke inflation, uses `getScreenCTM()` when there is no transformed HTML ancestor, and otherwise uses the existing accumulated transform matrix. This covers plain lines, nested SVG-in-SVG lines, CSS-transformed SVGs, and the i14 stroke-bound path sample. ================================================ FILE: memories/mermaid-diagram-support-plan.md ================================================ # Mermaid diagram support rollout Goal: extend the Mermaid package from a flowchart-first designer into a Mermaid designer that can preview every Mermaid diagram and progressively offer structured visual editing for each diagram type. Phases: 1. Flowchart: finish directions, labels, full shape syntax, markdown labels, edge movement, selection mapping, and Mermaid-layout import. 2. Sequence: participants, messages, activations, notes, loops/alt/opt blocks, writer/parser selection mapping. 3. Class: classes/interfaces, members, methods, relationships, annotations, namespaces. 4. State: states, transitions, composite states, notes, forks/joins. 5. ER: entities, attributes, relationship cardinalities. 6. Remaining text-first diagrams: Gantt, journey, pie, quadrant, requirement, gitgraph, mindmap, timeline. 7. Newer visual diagrams: sankey, xy chart, block, packet, kanban, architecture, radar, treemap, venn, ishikawa, wardley, treeview. Principle: every diagram type should first render in preview through Mermaid, then gain a typed parser/model/writer only when its visual editing semantics are defined. Current document metadata: - Root design item attributes store the current editable family: `data-mermaid-diagram-type` and, for flowcharts, `data-mermaid-flowchart-direction`. - The Mermaid package installs a root property group named `mermaid` so these values are editable when the root item is selected. - The writer honors root metadata only when doing so will not drop incompatible existing widgets; actual conversion between diagram families is still a separate future task. - The Mermaid writer opts into root-item serialization so root-only documents can still write `title`, diagram type, and flowchart direction even when there are no child design items. - Palette entries are filtered by root `diagramType`: flowchart shows flowchart nodes only, sequence shows sequence controls. Flowchart edges are intentionally not in the palette because they are created by the connector tool. - Mindmap is now a root `diagramType` with a filtered palette entry, root title support, indentation parser/writer, and a visual `mermaid-mindmap-node` widget. Mindmap nodes are real containers: parsed child lines become nested design items, and the writer emits indentation by walking `item.children()`. Import asks Mermaid to render the mindmap SVG first and maps `g.node.mindmap-node` positions back into the designer; the simple hierarchical placement is only a fallback when SVG layout extraction is unavailable. Direct parent nodes automatically draw curved child connection lines with depth-based stroke thickness. Icons/classes/config layout are still future mindmap property work. - Requirement diagram is now a root `diagramType` with requirement/element palette entries, direction property, block parser/writer, Mermaid-rendered node positioning, editable `mermaid-requirement-node` widgets, and relationship widgets for `contains`, `copies`, `derives`, `satisfies`, `verifies`, `refines`, and `traces` in both forward and reverse syntax forms. Styling/class syntax is still future requirement property work. - Flowchart frontmatter now preserves non-title content such as `config: htmlLabels: false`; flowchart labels with Markdown markers or embedded newlines are written as Mermaid markdown strings. - Flowchart support now covers Mermaid v11 expanded `@{ shape: ... }` nodes for the documented shape aliases, subgraph containers with nested node writing, special edge connectors including circle/cross/multidirectional/invisible/min-length forms, edge ids, and raw flowchart directives for `style`, `classDef`, `class`, `click`, and `linkStyle` so styles/classes/animation definitions round-trip. Node rendering is still an editable approximation of Mermaid's SVG, not pixel-identical for every exotic shape. - Mermaid node widgets render inline Markdown safely in the designer for bold/italic markers and multiline labels, using DOM nodes rather than raw HTML injection. ================================================ FILE: memories/monaco-selection-coalesce-note.md ================================================ # Monaco selection coalescing When designer selection changes are mirrored into split/code view, the same source range can be requested more than once around a designer content update. `DocumentContainer` now coalesces identical source-range selections before calling the active code view. `CodeViewMonaco` also tracks the delayed native Monaco selection call. Pending identical selections are ignored, and pending delayed selections are cleared when the model is updated, so a selection queued against the old model is not applied after the refreshed model and followed by the same fresh selection. ================================================ FILE: memories/node-html-parser-source-parts-note.md ================================================ The node-html-parser parser service must populate designItemDocumentPositionService source parts during parse, not only element positions. Code-to-design transitions do not run the writer first, so attribute jumps need parser-generated `attribute:${name}` and `attribute:${name}/value` source parts immediately after `parseDesignerHTML`. ================================================ FILE: memories/source-part-selection-coalesce-note.md ================================================ When selecting a source part on a design item that may not already be primary, pass the source part into `selectionService.setSelectedElements(..., sourcePart)` instead of calling `setSelectedElements()` and then `setSelectedPart()`. Splitting those calls emits two code-view selections (element range, then source-part range) and makes the text editor jump. ================================================ FILE: memories/svg-affine-overlay-point-conversion-note.md ================================================ For the getBoxQuads polyfill SVG graphics fast path, diagonal SVG lines need stroke expansion along the normal vector (`strokeWidth / 2 * abs(dy|dx) / length`) instead of the generic `strokeWidth * 2` inflation. Keep the legacy generic SVG inflation for non-line graphics unless replacing it with a fully native-compatible stroke bbox calculation; the existing path fixture relies on that behavior. ================================================ FILE: memories/svg-geometry-placement-transform-offset-note.md ================================================ - SVG geometry drag commit receives the live preview translation in visual/container coordinates. Before writing geometry attributes (`x`, `y`, path points, etc.) for elements that already have a CSS `transform`, map that offset through the inverse 2D linear part of the original transform; otherwise rotated/scaled/skewed SVG shapes preview correctly but jump on mouseup. - The conversion intentionally uses only `a/b/c/d` and ignores translation, because it is transforming an offset vector, not an absolute point. ================================================ FILE: memories/unified-geometry-click-selection-no-commit.md ================================================ # Unified geometry click selection `UnifiedGeometryExtension` creates drag state on handle pointer-down so it can keep pointer capture and support immediate dragging. A plain click on a handle must not commit geometry on pointer-up. Track `geometryChanged` in the drag state, set it only after a non-zero pointer movement has updated geometry, and commit on pointer-up only when that flag is true. ================================================ FILE: memory/context-menu-copy-paste-pattern.md ================================================ - Designer context menus are registered centrally in DefaultServiceBootstrap and grouped with ChildContextMenu plus SeperatorContextMenu. - ContextMenu renders an item with title '-' as a divider, so submenu spacers should use that sentinel item. - Clipboard-derived features can either write richer clipboard formats in copyItems or parse the current clipboard payload on demand; prefer the on-demand path when the behavior should work across browser instances without service-local state. - For paste-format style transfer, prefer calling getPasteItems() and reading styles() from the first parsed design item instead of adding clipboard-specific methods to copy-paste services. ================================================ FILE: memory/context-menu-popover-anchor-note.md ================================================ - In ContextMenu, popover top-layer rendering becomes non-interactive when combined with CSS anchor positioning in the demo browser check. - For the popover path, use explicit fixed left/top placement with viewport fallbacks; reserve anchor positioning for non-popover fallback paths only. - Deferred registration of global mousedown/contextmenu close listeners avoids immediately closing menus opened from mousedown-based triggers like undo/redo hold menus. ================================================ FILE: memory/css-numeric-percent-measured-size-note.md ================================================ - For CSS numeric size properties, `to %` conversion should prefer the element's measured box size (`getBoundingClientRect`) over the raw numeric text value so the unit switch preserves the current rendered size. - Keep `% -> px` on the normal reference-size path unless a concrete regression shows otherwise. - Numeric scrub drag is more reliable in the property grid with window-level pointer move/up/cancel listeners than element-local move/up listeners. ================================================ FILE: memory/css-numeric-preview-lock-shadow-host-note.md ================================================ - NumericStyleInput should own its preview display lock internally; editor-level refresh suppression alone is not enough because property-grid refreshes can still race during drag/hold preview. - Clear the display lock when an explicit new value arrives that differs from the current underlying `_value`; keep it only across repeated stale refreshes. - Percent conversion for root elements must look past `parentElement` and fall back across shadow boundaries via `getRootNode().host`, then `ownerDocument.body/documentElement`. - Interactive drag/step changes should snap to step increments and format to step precision, not just use a generic 4-decimal formatter. ================================================ FILE: memory/css-zoom-placement-preview-note.md ================================================ - Drag preview transforms in DefaultPlacementService and AbsolutePlacementService must divide the visual movement by the dragged element's CSS `zoom` factor before composing `translate(...)`. - `getBoxQuads` must wrap the element transform with the zoom matrix (`zoom * transform`, not `transform * zoom`) so overlay geometry sees the same zoom-scaled translation the browser renders. - TransformOriginExtension should draw its marker with `getResultingTransformationBetweenElementAndAllAncestors(..., canvas)` so the overlay includes self zoom, but it should keep using `element.convertPointFromNode(..., canvas)` for pointer-up commits so authored `transform-origin` stays in local element units. - `zoom` scales transform translation during preview, but the final `placeDesignItem(..., 'position')` commit path should stay in layout units. ================================================ FILE: memory/cssom-shorthand-test-note.md ================================================ - Jest node/jsdom in this repo is not reliable for CSS shorthand serialization checks. - For CssCombiner tests, fake document.createElement/style before importing the module because it creates a helper element at module load. - Prefer focused fake CSSOM tests or real-browser validation when changing cssText/shorthand behavior. ================================================ FILE: memory/jest-esm-validation-note.md ================================================ - In packages/web-component-designer, Jest currently has unrelated ESM/module-resolution issues for tests that import dist ESM output or dependencies like @node-projects/base-custom-webcomponent from node_modules. - For new service wiring in this package, npm run tsc is the reliable validation path unless Jest config is widened on purpose. - For isolated DOM-focused tests, replacing a single `css` helper import with a local `CSSStyleSheet` creator can avoid the Jest ESM boundary without widening package-level Jest transforms. - For custom-element or editor work in this package, extracting pure parsing/configuration helpers into source files without DOM or @node-projects/base-custom-webcomponent imports gives Jest a stable focused validation target without changing package-wide ESM transforms. ================================================ FILE: memory/jest-source-import-style-note.md ================================================ - In packages/web-component-designer Jest tests, import source modules with the package's existing ts-jest style (for example '../src/.../Module' without a '.js' suffix); using '.js' can fail module resolution in focused test runs. ================================================ FILE: memory/linked-package-type-compat-note.md ================================================ - In this repo's linked-package setup, widening exported structural types like ServiceContainer or InstanceServiceContainer can break demo/package compatibility because helper packages resolve their own nested @node-projects/web-component-designer types. - Prefer optional public properties or internal `as any` registration for new cross-cutting services when the demo consumes linked packages compiled against older type surfaces. - The demo HTML loads dist/appShell.js, so when normal demo tsc is blocked by the linked-package type mismatch, `npx tsc --noCheck` is the pragmatic way to refresh runtime artifacts for UI changes. - In web-component-designer-demo, running `npm i` can replace the local linked `@node-projects/web-component-designer` package with the published node_modules copy; if browser behavior disagrees with passing source/tests, rebuild the package, run `npm link`, then rerun `npm run linkAll` in the demo before debugging further. ================================================ FILE: memory/manual-collab-snapshot-request.md ================================================ - For manual copy/paste WebRTC signaling, do not infer initial snapshot ownership from receiving `hello`; the copied direction can be opposite of the joining direction. - Carry an explicit `requestInitialSnapshot` flag in `hello` / `hello-ack`, and decide it from the local document state so the empty peer asks for content instead of sending an empty snapshot back. ================================================ FILE: memory/overlay-refresh-pattern.md ================================================ - Designer extensions should prefer passing existing SVG nodes back into _drawLine/_drawCircle/_drawPath and gate refresh work with _valuesHaveChanges. - Only rebuild overlays when geometry structure changes (segment count/type or control-point presence), otherwise update positions/styles in place to preserve pointer capture and avoid stale handles. ================================================ FILE: memory/pointertool-selected-quad-drag-note.md ================================================ - PointerTool drag start must distinguish click target from drag source. - After alt-selecting an element underneath another, a plain click should still reselect the topmost hit element. - A plain drag should move the selected underlying item when the pointer is inside that item's border quad; recompute initial drag offset from the chosen drag source element. ================================================ FILE: memory/property-grid-designitem-cache-sync-note.md ================================================ - PropertyGrid refresh can run correctly while editors still show stale values if external DOM changes bypass DesignItem APIs; properties services read DesignItem `_attributes`/`_styles` caches. - Fix: add `IDesignItem.refreshAttributesAndStylesFromElement()` and call it before PropertyGrid/PropertyGridWithHeader refresh or rebuild work so `getValue`, `isSet`, `attributes()`, and `getAllStyles()` see live DOM state. ================================================ FILE: memory/property-grid-preview-recreation-fix.md ================================================ # Property Grid Preview Element Recreation Fix ## Root Cause `CssCurrentPropertiesService.getRefreshMode()` returns `RefreshMode.fullOnValueChange` (value 2). When NumericStyleInput's preview sets `element.style.setProperty(...)`, the MutationObserver fires `PropertyGrid._mutationOccured()`, which calls `createElements()` for tabs with `fullOnValueChange`. This DESTROYS and RECREATES all editors (including the active NumericStyleInput) mid-preview. ## Fix - PropertyGrid keeps a single `MutationObserver` with `attributeOldValue: true`. - `IPropertiesService` now has an optional `shouldRecreatePropertyListOnMutation(...)` hook. - `AbstractPropertiesService` defaults to recreating only when an attribute is added or removed. - `CssCurrentPropertiesService` and `CssCustomPropertiesService` override that hook to compare old/new inline style declaration names, so value-only style changes refresh editors but declaration add/remove still rebuilds. - PropertyGrid also needs `designerCanvas.onContentChanged` and relevant `contentService.onContentChanged` subscriptions, because external property changes can arrive through undo/content notifications without a direct selected-element attribute mutation. - `hasEditorInPreview()` and the schema-signature recreation path were removed. ## Key Enum Values (IPropertiesService.ts) ``` RefreshMode { none=0, full=1, fullOnValueChange=2, fullOnClassChange=3 } ``` - CssCurrentPropertiesService: fullOnValueChange (2) - the "styles" tab - CssPropertiesService: none (0) - the "layout" tab - AttributesPropertiesService: fullOnValueChange (2) - NativeElementsPropertiesService: full (1) ================================================ FILE: memory/resize-left-top-initial-local-axis-note.md ================================================ - Left/top resize handles cannot derive drag deltas by converting the current pointer into the element's current local space, because the element origin moves during the resize and cancels part of the delta. - Compute resize deltas from the pointer's movement in the initial local-axis basis (initial element-local-to-canvas matrix, translation removed), then apply opposite-corner correction from the current local border-box anchor converted back to canvas/parent space. - Rereading live getBoxQuads() during the same pointermove turn can add jitter; prefer current local anchor geometry plus convertPointFromNode(). ================================================ FILE: memory/straighten-line-screen-y-note.md ================================================ - PathDataPolyfill.straightenLine uses calculateAlpha's clockwise screen-space angle; reconstruct snapped points with `y - Math.sin(rad) * length` or vertical directions invert. - Added PathDataPolyfill.test.ts with stubbed SVG globals because the helper module patches SVG element prototypes at import time. ================================================ FILE: memory/svg-getctm-double-transform-note.md ================================================ - In the getBoxQuads transform walk, do not seed SVGGraphicsElement (non-root SVG) with getElementTransformWithZoom for self transforms when the loop also multiplies getCTM(); getCTM already includes the element's local SVG/CSS transform and double-applies rotate/scale otherwise. - A rotated CSS-sized SVG rect can expose this immediately: 90deg rotate produced a 180deg-style quad until the self CSS transform was skipped and getCTM handled it alone. - For SVG geometry placement commit, the drag preview translation extracted from element.style.transform is already in local geometry coordinates; do not rotate it again before calling placeDesignItem, or rotated shapes jump on mouseup. ================================================ FILE: memory/svg-rect-style-geometry-write-note.md ================================================ - For SVG rect editing in the unified geometry path, read rendered geometry from getBBox() instead of rect.x/rect.width baseVal values when CSS width/height may be the source of truth. - Preserve style-backed SVG geometry on write by carrying per-property serialization hints (style vs attribute, unit) through the geometry model, then applying writes with setStyle/style.setProperty instead of always setAttribute. - This avoids stacked rect corner handles for CSS-sized rects and prevents drag/resize from injecting width/height attributes when those properties were authored in inline style. ================================================ FILE: memory/transform-preview-sync-pattern.md ================================================ - When previewing transform edits via direct writes to element.style.transform, always sync or clear that inline transform after commit. - If the persisted transform stays local, restore the local style value; if it is stylesheet-backed, clear the inline preview so it does not override the stylesheet declaration. ================================================ FILE: memory/transformed-resize-grid-local-point-pattern.md ================================================ - For resize and grid interactions under transformed elements or transformed ancestors, do not derive local deltas from axis-aligned rects or an element-only inverse matrix. - Convert canvas/overlay points back into element-local coordinates with convertPointFromNode (via the getBoxQuads polyfill), then compute size deltas, grid cell hits, and grid track drags from those local points. - Grid helpers should expose local cell/gap coordinates separately from overlay coordinates so placement, hover, and resize logic all share the same transform-safe hit-testing path. - During live resize, getBoxQuads can still reflect the pre-resize box inside the same pointermove turn; for opposite-corner correction, convert the current local fixed-anchor point back to canvas instead of rereading the current quad. ================================================ FILE: memory/undo-group-content-changed-commit-note.md ================================================ - In packages/web-component-designer, grouped undo operations should not emit instanceServiceContainer.onContentChanged from UndoService.execute while a ChangeGroup is open. - ChangeGroup now accumulates IContentChanged payloads from execute calls and committed subgroups, and UndoService emits them once from commitTransactionItem on the outermost commit. - This keeps documentContainer, treeView, and propertyGrid from reacting to intermediate states during grouped edits. ================================================ FILE: memory/webrtc-cross-machine-ice-config-note.md ================================================ - Manual WebRTC signaling in collaboration-service worked on the same machine but failed across machines until the transport exposed optional `rtcConfiguration`. - Root cause: the transport created `RTCPeerConnection()` with no configurable STUN/TURN servers, so cross-machine connections depended only on local host candidates. - Demo support was added via `collabIceServer` query params and optional JSON `collabRtcConfiguration`; when the demo compiles against an older published package, pass the new option object as `any` at the constructor call site to stay compatible. - Cloudflare TURN should be integrated through the official server-side `generate-ice-servers` flow from `https://developers.cloudflare.com/realtime/turn/generate-credentials/`; a direct public `https://speed.cloudflare.com/turn-creds` link is not the supported integration path even though the speed test site can fetch credentials internally. - Cloudflare's official TURN API endpoint at `https://rtc.live.cloudflare.com/v1/turn/keys/{TURN_KEY_ID}/credentials/generate-ice-servers` is callable from the browser with user-supplied key id and API token; for the demo this is acceptable as a dev/test convenience, but it still exposes the long-lived API token to the browser. - Older static gist TURN hosts like `numb.viagenie.ca`, `turn.bistri.com`, `turn.anyfirewall.com`, and the raw gist `hubl.in` entries did not verify and should not be exposed as presets. - OpenRelay is still live as a free-tier provider, but it needs signup/API credentials or auth-secret integration, so expose it as a manual provider workflow rather than an unauthenticated preset. ================================================ FILE: package.json ================================================ { "name": "@node-projects/monorepo", "private": true, "type": "module", "workspaces": [ "packages/*" ], "scripts": { "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js", "develop": "npm i && npm run link && npm run build", "link": "npm run link --workspaces", "watch": "npm run watch --workspaces", "build": "npm run build --workspaces", "prepublishOnly": "npm run build" }, "devDependencies": { "@blockly/zoom-to-fit": "^6.0.9", "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/css-parser": "^5.0.0", "@node-projects/lean-he-esm": "^3.3.0", "@node-projects/node-html-parser-esm": "^6.2.0", "@node-projects/propertygrid.webcomponent": "^1.2.3", "@types/codemirror": "^5.60.15", "@types/css-tree": "^2.3.8", "@types/jest": "^29.5.14", "@types/jquery": "^3.5.32", "@types/jquery.fancytree": "0.0.11", "@types/node": "^22.8.6", "ace-builds": "^1.36.3", "blockly": "^11.1.1", "codemirror": "^6.0.1", "codemirror5": "npm:codemirror@^5.0.0", "css-tree": "^3.0.0", "esprima-next": "^6.0.3", "html2canvas": "*", "jest": "^29.7.0", "jest-environment-jsdom": "^30.3.0", "jquery": "^3.7.1", "jquery.fancytree": "^2.38.3", "jsbarcode": "^3.11.6", "long": "^5.2.3", "mdn-data": "^2.12.1", "monaco-editor": "^0.52.0", "ts-jest": "^29.2.5", "typescript": "^5.8.3", "typescript-lit-html-plugin": "^0.9.0", "wunderbaum": ">=0.13.0" } } ================================================ FILE: packages/web-component-designer/.npmignore ================================================ src/ test/ tests/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer/README.md ================================================ # web-component-designer ```It's now considered beta. It works, we use it in production, but there are many more features to come``` A HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software. Meanwhile polymer is not used anymore. ![image](https://user-images.githubusercontent.com/364896/117482820-358e2d80-af65-11eb-97fd-9d15ebf1966f.png) ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer npm i @node-projects/web-component-designer ## Browser support - Chrome/Firefox & Safari ## Developing * Install dependencies ``` $ npm install ``` * Compile typescript after doing changes ``` $ npm run build (if you use Visual Studio Code, you can also run the build task via Ctrl + Shift + B > tsc:build - tsconfig.json) ``` * *Link node module*
``` $ npm link ``` ## Using At first you have to setup a service container providing services for history, properties, elements, ... ## Code Editor You can select to use one of 3 code editors available (ACE, CodeMirrow, Monaco). If you use one of the widgets, you need to include the JS lib in your index.html and then use the specific widget. ## TreeView We have 2 tree components. One independent and one feature rich which uses FancyTree (and cause of this it needs JQuery and JqueryUI). ## DragDrop If you'd like to use the designer on mobile, you need the mobile-drag-drop npm library. Your index.html should be extended as follows: ## Keys Pointer Tool: alt: select element behind shift: draw selection rect ctrl: add/remove from selection ctrl+shift: pan ## Copyright notice The Library uses Images from the Chrome Dev Tools, see https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src and https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE ================================================ FILE: packages/web-component-designer/_esbuild.js ================================================ import * as esbuild from 'esbuild'; import { minifyHTMLLiteralsPlugin } from 'esbuild-plugin-minify-html-literals'; await esbuild.build({ entryPoints: ['./dist/index-all.js'], outfile: './dist/index-min.js', bundle: true, format: 'esm', minify: true, sourcemap: true, platform: 'neutral', external: ['@node-projects/base-custom-webcomponent', './NpmPackageHacks.json' ], plugins: [ minifyHTMLLiteralsPlugin() ] }).catch(() => process.exit(1)); ================================================ FILE: packages/web-component-designer/assets/designerCanvasIframe.html ================================================ ================================================ FILE: packages/web-component-designer/assets/images/chromeDevtools/LICENSE ================================================ // Copyright 2014 The Chromium Authors. All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are // met: // // * Redistributions of source code must retain the above copyright // notice, this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above // copyright notice, this list of conditions and the following disclaimer // in the documentation and/or other materials provided with the // distribution. // * Neither the name of Google Inc. nor the names of its // contributors may be used to endorse or promote products derived from // this software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ================================================ FILE: packages/web-component-designer/assets/images/chromeDevtools/info.txt ================================================ Images from https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src ================================================ FILE: packages/web-component-designer/assets/images/treeview/license.txt ================================================ WPF Designer Icons are taken from Fugue Icons Library: License: Creative Commons Attribution 3.0 License http://p.yusukekamiyamane.com/ Copied from the Fugue Icon Library and left unmodified: - Icons.16x16.WpfOutline.Eye.png => eyeopen.png - Icons.16x16.WpfOutline.EyeClosed.png => eyeclosed.png - lock.png ================================================ FILE: packages/web-component-designer/config/elements-native.json ================================================ { "elements": [ "div", "label", "input", "textarea", "select", {"tag" : "button", "defaultWidth": "80px", "defaultHeight": "30px", "defaultContent": "Button" }, "img", "iframe", {"tag" : "a" }, "p", "span", "b", "i", "u", "br", "em", "q", "small", "strong", "form", "h1", "h2", "h3", "h4", "h5", "h6", "ol", "ul", "li", "pre", "table", "caption", "colgroup", "col", "thead", "th", "tbody", "tr", "td", "tfoot" ] } ================================================ FILE: packages/web-component-designer/jest.config.js ================================================ export default { roots: ['/tests'], testMatch: ['**/?(*.)+(spec|test).+(mts|ts|tsx|mjs|js)'], preset: "ts-jest/presets/default-esm", testEnvironment: "node", extensionsToTreatAsEsm: ['.ts', '.mts'], moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1' }, transform: { '^.+\\.(mts|ts|tsx|mjs|js)$': [ "ts-jest", { "useESM": true, "tsconfig": { "allowJs": true } } ] }, transformIgnorePatterns: [ '/node_modules/(?!(?:@node-projects/base-custom-webcomponent)(?:/|$))' ] } ================================================ FILE: packages/web-component-designer/jsr.json ================================================ { "name": "@node-projects/web-component-designer", "version": "0.1.180", "exports": "./src/index.ts" } ================================================ FILE: packages/web-component-designer/package.json ================================================ { "description": "A WYSIWYG designer webcomponent for html components", "name": "@node-projects/web-component-designer", "version": "0.2.24", "type": "module", "main": "./dist/index.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "test": "node --experimental-vm-modules ../../node_modules/jest/bin/jest.js", "tsc": "tsc", "build": "tsc", "link": "npm link", "watch": "pm2 start tsc --watch", "prepublishOnly": "npm run build && npm run bundle", "bundle": "node _esbuild.js" }, "dependencies": { "@node-projects/base-custom-webcomponent": ">=0.27.8" }, "devDependencies": { "@types/node": "^22.8.6", "esbuild": "^0.25.10", "esbuild-plugin-minify-html-literals": "^3.0.0", "mdn-data": "^2.4.2" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer/src/Constants.ts ================================================ export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion'; export const dragDropFormatNameBindingObject = 'text/json/bindingobject'; export const dragDropFormatNamePropertyGrid = 'text/json/propertydrop'; let imporUrl = new URL((import.meta.url)); export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/'; ================================================ FILE: packages/web-component-designer/src/commandHandling/CommandType.ts ================================================ export enum CommandType { 'copy' = 'copy', 'paste' = 'paste', 'cut' = 'cut', 'delete' = 'delete', 'undo' = 'undo', 'redo' = 'redo', 'holdUndo' = 'holdUndo', 'holdRedo' = 'holdRedo', 'rotateCounterClockwise' = 'rotateCounterClockwise', 'rotateClockwise' = 'rotateClockwise', 'mirrorHorizontal' = 'mirrorHorizontal', 'mirrorVertical' = 'mirrorVertical', 'selectAll' = 'selectAll', 'moveToFront' = 'moveToFront', 'moveForward' = 'moveForward', 'moveBackward' = 'moveBackward', 'moveToBack' = 'moveToBack', 'arrangeLeft' = 'arrangeLeft', 'arrangeCenter' = 'arrangeCenter', 'arrangeRight' = 'arrangeRight', 'arrangeTop' = 'arrangeTop', 'arrangeMiddle' = 'arrangeMiddle', 'arrangeBottom' = 'arrangeBottom', 'unifyWidth' = 'unifyWidth', 'unifyHeight' = 'unifyHeight', 'distributeHorizontal' = 'distributeHorizontaly', 'distributeVertical' = 'distributeVertical', 'setTool' = 'setTool', 'setStrokeColor' = 'setStrokeColor', 'setFillBrush' = 'setFillBrush', 'setStrokeThickness' = 'setStrokeThickness', 'screenshot' = 'screenshot', } ================================================ FILE: packages/web-component-designer/src/commandHandling/IUiCommand.ts ================================================ import { CommandType } from './CommandType.js'; export interface IUiCommand { type: CommandType; event?: Event; special?: string; parameter?: any; altKey?: boolean; ctrlKey?: boolean; metaKey?: boolean; shiftKey?: boolean; } ================================================ FILE: packages/web-component-designer/src/commandHandling/IUiCommandHandler.ts ================================================ import { IUiCommand } from './IUiCommand.js'; export interface IUiCommandHandler { executeCommand: (command: IUiCommand) => void; canExecuteCommand: (command: IUiCommand) => boolean; } ================================================ FILE: packages/web-component-designer/src/elements/controls/ColorEditor.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { w3color } from '../helper/w3color.js'; export type ColorEditorMode = 'rgb' | 'hsl' | 'cmyk' | 'oklab' | 'oklch'; export type ColorEditorValueChangedEventArgs = { newValue?: string, oldValue?: string }; type RgbaColor = { r: number, g: number, b: number, a: number }; type HsvColor = { h: number, s: number, v: number }; const modes: ColorEditorMode[] = ['rgb', 'hsl', 'cmyk', 'oklab', 'oklch']; const epsilon = 0.000001; export class ColorEditor extends BaseCustomWebComponentConstructorAppend { public static override readonly style = css` :host { display: block; box-sizing: border-box; width: 280px; color: var(--property-grid-text-color, #e8edf2); font: 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #editor { display: grid; gap: 10px; box-sizing: border-box; padding: 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: var(--color-editor-background, #20252b); box-shadow: 0 14px 38px rgba(0, 0, 0, .36); } #plane { position: relative; height: 150px; border-radius: 6px; overflow: hidden; cursor: crosshair; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--hue, 0) 100% 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); touch-action: none; } #plane-handle { position: absolute; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid white; border-radius: 50%; transform: translate(-6px, -6px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 1px 4px rgba(0, 0, 0, .55); pointer-events: none; } .slider-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 42px; gap: 8px; align-items: center; } .slider-row span { color: rgba(232, 237, 242, .68); font-size: 11px; text-transform: uppercase; } input[type="range"] { --slider-background: #79b8ff; -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; background: transparent; outline: none; } #hue { --slider-background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } #alpha { --slider-background: linear-gradient(to right, rgba(var(--rgb-color, 0, 0, 0), 0), var(--opaque-color, #000)), linear-gradient(45deg, rgba(255, 255, 255, .24) 25%, transparent 25% 75%, rgba(255, 255, 255, .24) 75%), linear-gradient(45deg, rgba(255, 255, 255, .24) 25%, transparent 25% 75%, rgba(255, 255, 255, .24) 75%), #2a3037; --slider-background-position: 0 0, 0 0, 5px 5px, 0 0; --slider-background-size: auto, 10px 10px, 10px 10px, auto; } input[type="range"]::-webkit-slider-runnable-track { height: 7px; border-radius: 999px; background: var(--slider-background); background-position: var(--slider-background-position, 0 0); background-size: var(--slider-background-size, auto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } input[type="range"]::-moz-range-track { height: 7px; border-radius: 999px; background: var(--slider-background); background-position: var(--slider-background-position, 0 0); background-size: var(--slider-background-size, auto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -3.5px; border: 2px solid white; border-radius: 50%; background: hsl(var(--hue, 0) 100% 50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .45); } input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: hsl(var(--hue, 0) 100% 50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .45); } #alpha::-webkit-slider-thumb { background: var(--color, #000); } #alpha::-moz-range-thumb { background: var(--color, #000); } .swatch { width: 42px; height: 22px; border-radius: 5px; background: linear-gradient(var(--color, #000), var(--color, #000)), linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25% 75%, rgba(255, 255, 255, .22) 75%), linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25% 75%, rgba(255, 255, 255, .22) 75%); background-position: 0 0, 0 0, 5px 5px; background-size: auto, 10px 10px, 10px 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } #mode { height: 26px; min-width: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; background: #161a1f; color: inherit; font: inherit; outline: none; } #channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } label { display: grid; gap: 3px; min-width: 0; color: rgba(232, 237, 242, .68); font-size: 10px; text-transform: uppercase; } input[type="number"], #text { box-sizing: border-box; width: 100%; min-width: 0; height: 26px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; background: #161a1f; color: inherit; font: inherit; outline: none; } input[type="number"] { padding: 0 4px; } #text { padding: 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: none; } #text.invalid { border-color: #e66b6b; box-shadow: 0 0 0 1px rgba(230, 107, 107, .35); } input:focus, select:focus { border-color: #79b8ff; box-shadow: 0 0 0 1px rgba(121, 184, 255, .28); } :host([readonly]) input, :host([readonly]) select, :host([readonly]) #plane, :host([disabled]) input, :host([disabled]) select, :host([disabled]) #plane { opacity: .65; pointer-events: none; } `; public static override readonly template = html`
Hue
Alpha
`; public valueChanged = new TypedEvent(); public valuePreviewChanged = new TypedEvent(); private _value = '#000000'; private _color: RgbaColor = { r: 0, g: 0, b: 0, a: 1 }; private _mode: ColorEditorMode = 'rgb'; private _hue = 0; private _plane: HTMLDivElement; private _planeHandle: HTMLDivElement; private _hueInput: HTMLInputElement; private _alphaInput: HTMLInputElement; private _alphaLabel: HTMLSpanElement; private _modeSelect: HTMLSelectElement; private _channels: HTMLDivElement; private _textInput: HTMLInputElement; private _dragPointerId: number = null; public get value() { return this._value; } public set value(value: string) { const parsed = parseColor(value); if (parsed) { this._color = parsed; this._mode = inferColorMode(value) ?? this._mode; this._syncHueFromColor(); this._value = this._formatColor(); this._render(); return; } this._value = value ?? ''; this._render(); } public get mode() { return this._mode; } public set mode(value: ColorEditorMode) { if (modes.includes(value)) { this._mode = value; this._value = this._formatColor(); this._render(); } } public get readOnly() { return this.hasAttribute('readonly'); } public set readOnly(value: boolean) { this.toggleAttribute('readonly', value); } public get disabled() { return this.hasAttribute('disabled'); } public set disabled(value: boolean) { this.toggleAttribute('disabled', value); } constructor() { super(); this._plane = this._getDomElement('plane'); this._planeHandle = this._getDomElement('plane-handle'); this._hueInput = this._getDomElement('hue'); this._alphaInput = this._getDomElement('alpha'); this._alphaLabel = this._getDomElement('alpha-label'); this._modeSelect = this._getDomElement('mode'); this._channels = this._getDomElement('channels'); this._textInput = this._getDomElement('text'); } ready() { this._wireEvents(); const attributeValue = this.getAttribute('value'); if (attributeValue != null) this.value = attributeValue; const attributeMode = this.getAttribute('mode') as ColorEditorMode; if (modes.includes(attributeMode)) { this._mode = attributeMode; this._value = this._formatColor(); } this._render(); } private _wireEvents() { this._plane.addEventListener('pointerdown', e => this._startPlaneDrag(e)); this._hueInput.addEventListener('input', () => this._applyHue(true)); this._hueInput.addEventListener('change', () => this._commitCurrentValue()); this._alphaInput.addEventListener('input', () => this._applyAlpha(true)); this._alphaInput.addEventListener('change', () => this._commitCurrentValue()); this._modeSelect.addEventListener('change', () => { this.mode = this._modeSelect.value as ColorEditorMode; this._commitCurrentValue(); }); this._channels.addEventListener('input', () => this._applyChannelInputs(true)); this._channels.addEventListener('change', () => this._commitCurrentValue()); this._textInput.addEventListener('input', () => this._validateTextInput()); this._textInput.addEventListener('change', () => this._applyText()); this._textInput.addEventListener('keydown', e => { if (e.key === 'Enter') { this._applyText(); this._textInput.blur(); } }); } private _startPlaneDrag(event: PointerEvent) { if (this.readOnly || this.disabled) return; this._dragPointerId = event.pointerId; this._plane.setPointerCapture(event.pointerId); this._applyPlanePointer(event, true); this._plane.addEventListener('pointermove', this._planePointerMove); this._plane.addEventListener('pointerup', this._finishPlaneDrag); this._plane.addEventListener('pointercancel', this._finishPlaneDrag); event.preventDefault(); } private _planePointerMove = (event: PointerEvent) => { if (event.pointerId === this._dragPointerId) this._applyPlanePointer(event, true); }; private _finishPlaneDrag = (event: PointerEvent) => { if (event.pointerId !== this._dragPointerId) return; this._dragPointerId = null; this._plane.removeEventListener('pointermove', this._planePointerMove); this._plane.removeEventListener('pointerup', this._finishPlaneDrag); this._plane.removeEventListener('pointercancel', this._finishPlaneDrag); this._commitCurrentValue(); }; private _applyPlanePointer(event: PointerEvent, preview: boolean) { const rect = this._plane.getBoundingClientRect(); const s = clamp((event.clientX - rect.left) / rect.width, 0, 1); const v = clamp(1 - ((event.clientY - rect.top) / rect.height), 0, 1); const hue = Number(this._hueInput.value) || 0; this._hue = normalizeHue(hue); this._setColor({ ...hsvToRgb(hue, s, v), a: this._color.a }, preview); } private _applyHue(preview: boolean) { const hsv = rgbToHsv(this._color); const hue = Number(this._hueInput.value) || 0; this._hue = normalizeHue(hue); this._setColor({ ...hsvToRgb(hue, hsv.s || 1, hsv.v || 1), a: this._color.a }, preview); } private _applyAlpha(preview: boolean) { this._setColor({ ...this._color, a: clamp(Number(this._alphaInput.value) / 100, 0, 1) }, preview); } private _applyChannelInputs(preview: boolean) { const values = [...this._channels.querySelectorAll('input')].reduce((map, input) => { map[input.name] = Number(input.value); return map; }, {} as Record); let color: RgbaColor; if (this._mode === 'rgb') color = { r: values.r, g: values.g, b: values.b, a: values.a / 100 }; else if (this._mode === 'hsl') color = { ...hslToRgb(values.h, values.s / 100, values.l / 100), a: values.a / 100 }; else if (this._mode === 'cmyk') color = { ...cmykToRgb(values.c / 100, values.m / 100, values.y / 100, values.k / 100), a: values.a / 100 }; else if (this._mode === 'oklab') color = { ...oklabToRgb(values.l / 100, values.a1, values.b1), a: values.alpha / 100 }; else color = { ...oklchToRgb(values.l / 100, values.c, values.h), a: values.a / 100 }; this._setColor(normalizeColor(color), preview, false, true); } private _validateTextInput() { const text = this._textInput.value.trim(); this._textInput.classList.toggle('invalid', text.length > 0 && !parseColor(text)); } private _applyText() { const parsed = parseColor(this._textInput.value); this._textInput.classList.toggle('invalid', !parsed); if (!parsed) return; this._mode = inferColorMode(this._textInput.value) ?? this._mode; this._setColor(parsed, false, true, true); } private _setColor(color: RgbaColor, preview: boolean, renderChannels = true, syncHue = false) { const oldValue = this._value; this._color = normalizeColor(color); if (syncHue) this._syncHueFromColor(); this._value = this._formatColor(); this._render(renderChannels); if (preview) this.valuePreviewChanged.emit({ newValue: this._value, oldValue }); else this.valueChanged.emit({ newValue: this._value, oldValue }); } private _commitCurrentValue() { const oldValue = this._value; this._value = this._formatColor(); this.valueChanged.emit({ newValue: this._value, oldValue }); } private _render(renderChannels = true) { if (!this._textInput) return; const hsv = rgbToHsv(this._color); this.style.setProperty('--hue', String(Math.round(this._hue))); this.style.setProperty('--color', toCssRgb(this._color)); this.style.setProperty('--opaque-color', `rgb(${this._color.r}, ${this._color.g}, ${this._color.b})`); this.style.setProperty('--rgb-color', `${this._color.r}, ${this._color.g}, ${this._color.b}`); this._planeHandle.style.left = `${hsv.s * 100}%`; this._planeHandle.style.top = `${(1 - hsv.v) * 100}%`; this._hueInput.value = String(Math.round(this._hue)); this._alphaInput.value = String(Math.round(this._color.a * 100)); this._alphaLabel.textContent = `${Math.round(this._color.a * 100)}%`; this._modeSelect.value = this._mode; if (renderChannels) this._renderChannelInputs(); if (document.activeElement !== this._textInput) this._textInput.value = this._value; this._textInput.classList.remove('invalid'); } private _renderChannelInputs() { const channels = getChannelValues(this._color, this._mode); this._channels.innerHTML = channels.map(channel => ` `).join(''); } private _formatColor() { return formatColor(this._color, this._mode); } private _syncHueFromColor() { const hsv = rgbToHsv(this._color); if (hsv.s > epsilon && hsv.v > epsilon) this._hue = normalizeHue(hsv.h); } } export class ColorInput extends BaseCustomWebComponentConstructorAppend { public static override readonly style = css` :host { display: inline-block; box-sizing: border-box; width: 100%; height: 100%; padding: 2px; } button { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 3px; border: 1px solid var(--input-border-color, #596c7a); border-radius: 4px; background: var(--input-background-color, #1d2228); cursor: pointer; outline: none; } button:focus { border-color: #79b8ff; box-shadow: 0 0 0 1px rgba(121, 184, 255, .28); } #swatch { display: block; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(var(--color, #000), var(--color, #000)), linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25% 75%, rgba(255, 255, 255, .25) 75%), linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25% 75%, rgba(255, 255, 255, .25) 75%); background-position: 0 0, 0 0, 5px 5px; background-size: auto, 10px 10px, 10px 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); } :host([readonly]) button, :host([disabled]) button { cursor: default; opacity: .65; } `; public static override readonly template = html` `; private _value = '#000000'; private _button: HTMLButtonElement; private _popup: HTMLDivElement; private _editor: ColorEditor; private _ignoreNextClick = false; private _outsidePointerHandler = (event: PointerEvent) => this._handleOutsidePointer(event); private _windowKeyHandler = (event: KeyboardEvent) => this._handleWindowKey(event); public get value() { return this._value; } public set value(value: string) { this._setValue(value, false); } public get readOnly() { return this.hasAttribute('readonly'); } public set readOnly(value: boolean) { this.toggleAttribute('readonly', value); } public get disabled() { return this.hasAttribute('disabled'); } public set disabled(value: boolean) { this.toggleAttribute('disabled', value); if (this._button) this._button.disabled = value; } constructor() { super(); this._button = this._getDomElement('button'); } ready() { const attributeValue = this.getAttribute('value'); if (attributeValue != null) this._setValue(attributeValue, false); this._button.disabled = this.disabled; this._button.addEventListener('pointerdown', e => this._handleButtonPointerDown(e)); this._button.addEventListener('click', e => this._handleButtonClick(e)); this._button.addEventListener('keydown', e => this._handleButtonKeyDown(e)); this._renderSwatch(); } disconnectedCallback() { this._closePopup(); } private _togglePopup() { if (this.readOnly || this.disabled) return; if (this._popup) this._closePopup(); else this._openPopup(); } private _handleButtonPointerDown(event: PointerEvent) { if (event.button !== 0) return; this._ignoreNextClick = true; this._togglePopup(); event.preventDefault(); event.stopPropagation(); } private _handleButtonClick(event: MouseEvent) { if (this._ignoreNextClick) { this._ignoreNextClick = false; event.preventDefault(); event.stopPropagation(); return; } this._togglePopup(); } private _handleButtonKeyDown(event: KeyboardEvent) { if (event.key !== 'Enter' && event.key !== ' ') return; this._togglePopup(); event.preventDefault(); event.stopPropagation(); } private _openPopup() { this._popup = document.createElement('div'); this._popup.style.position = 'fixed'; this._popup.style.zIndex = '100000'; this._popup.style.width = '280px'; this._editor = document.createElement('node-projects-color-editor') as ColorEditor; this._editor.value = this._value; this._editor.valuePreviewChanged.on(e => { this._setValue(e.newValue, true); this.dispatchEvent(new Event('input', { bubbles: true, composed: true })); }); this._editor.valueChanged.on(e => { this._setValue(e.newValue, true); this.dispatchEvent(new Event('change', { bubbles: true, composed: true })); }); this._popup.appendChild(this._editor); document.body.appendChild(this._popup); this._positionPopup(); window.addEventListener('resize', () => this._positionPopup(), { once: true }); window.addEventListener('scroll', () => this._positionPopup(), { once: true, capture: true }); window.addEventListener('keydown', this._windowKeyHandler); requestAnimationFrame(() => window.addEventListener('pointerdown', this._outsidePointerHandler, true)); } private _positionPopup() { if (!this._popup) return; const rect = this.getBoundingClientRect(); const width = this._popup.offsetWidth || 280; const height = this._popup.offsetHeight || 360; let left = rect.left; let top = rect.bottom + 4; if (left + width > window.innerWidth - 8) left = window.innerWidth - width - 8; if (top + height > window.innerHeight - 8) top = rect.top - height - 4; this._popup.style.left = `${Math.max(8, left)}px`; this._popup.style.top = `${Math.max(8, top)}px`; } private _handleOutsidePointer(event: PointerEvent) { const path = event.composedPath(); if (path.includes(this) || (this._popup && path.includes(this._popup))) return; this._closePopup(); } private _handleWindowKey(event: KeyboardEvent) { if (event.key === 'Escape') this._closePopup(); } private _closePopup() { window.removeEventListener('pointerdown', this._outsidePointerHandler, true); window.removeEventListener('keydown', this._windowKeyHandler); this._popup?.remove(); this._popup = null; this._editor = null; } private _setValue(value: string, updateAttribute: boolean) { this._value = value ?? ''; if (updateAttribute) this.setAttribute('value', this._value); this._renderSwatch(); } private _renderSwatch() { const parsed = parseColor(this._value) ?? { r: 0, g: 0, b: 0, a: 1 }; this.style.setProperty('--color', toCssRgb(parsed)); } } function parseColor(value: string): RgbaColor { if (!value) return null; const text = value.trim(); if (text.toLowerCase() === 'transparent') return { r: 0, g: 0, b: 0, a: 0 }; const hex = parseHexColor(text); if (hex) return hex; const oklab = parseOklabColor(text); if (oklab) return oklab; const normalized = normalizeModernColorSyntax(text); const color = w3color.toColorObject(normalized); if (color?.valid) return normalizeColor({ r: color.red, g: color.green, b: color.blue, a: color.opacity }); return null; } function inferColorMode(value: string): ColorEditorMode { const match = /^\s*(rgba?|hsla?|cmyk|oklab|oklch)\s*\(/i.exec(value ?? ''); const colorFunction = match?.[1]?.toLowerCase(); if (colorFunction === 'rgb' || colorFunction === 'rgba') return 'rgb'; if (colorFunction === 'hsl' || colorFunction === 'hsla') return 'hsl'; if (colorFunction === 'cmyk') return 'cmyk'; if (colorFunction === 'oklab') return 'oklab'; if (colorFunction === 'oklch') return 'oklch'; return null; } function normalizeModernColorSyntax(value: string) { return value .replace(/,\s*/g, ',') .replace(/rgba?\(([^)]*)\)/i, (_, body) => normalizeFunctionBody('rgb', body)) .replace(/hsla?\(([^)]*)\)/i, (_, body) => normalizeFunctionBody('hsl', body)); } function normalizeFunctionBody(name: string, body: string) { if (body.includes(',')) { const parts = body.split(',').map(x => x.trim()); if (parts.length === 4 && parts[3].endsWith('%')) parts[3] = String(Number(parts[3].slice(0, -1)) / 100); return `${name}${parts.length === 4 ? 'a' : ''}(${parts.join(',')})`; } const [channels, alpha] = body.split('/').map(x => x.trim()); const parts = channels.split(/\s+/).filter(Boolean); if (alpha) parts.push(alpha.endsWith('%') ? String(Number(alpha.slice(0, -1)) / 100) : alpha); return `${name}${parts.length === 4 ? 'a' : ''}(${parts.join(',')})`; } function parseHexColor(value: string): RgbaColor { const match = /^#([0-9a-f]{3,8})$/i.exec(value); if (!match) return null; const hex = match[1]; const read = (part: string) => parseInt(part.length === 1 ? part + part : part, 16); if (hex.length === 3 || hex.length === 4) return normalizeColor({ r: read(hex[0]), g: read(hex[1]), b: read(hex[2]), a: hex.length === 4 ? read(hex[3]) / 255 : 1 }); if (hex.length === 6 || hex.length === 8) return normalizeColor({ r: read(hex.slice(0, 2)), g: read(hex.slice(2, 4)), b: read(hex.slice(4, 6)), a: hex.length === 8 ? read(hex.slice(6, 8)) / 255 : 1 }); return null; } function parseOklabColor(value: string): RgbaColor { const match = /^(oklab|oklch)\((.*)\)$/i.exec(value); if (!match) return null; const mode = match[1].toLowerCase(); const [channels, alphaText] = match[2].split('/').map(x => x.trim()); const parts = channels.replace(/,/g, ' ').split(/\s+/).filter(Boolean); if (parts.length !== 3) return null; const alpha = alphaText ? parseNumberOrPercent(alphaText, 1) : 1; if (mode === 'oklab') return normalizeColor({ ...oklabToRgb(parseNumberOrPercent(parts[0], 1), Number(parts[1]), Number(parts[2])), a: alpha }); return normalizeColor({ ...oklchToRgb(parseNumberOrPercent(parts[0], 1), Number(parts[1]), Number(parts[2])), a: alpha }); } function formatColor(color: RgbaColor, mode: ColorEditorMode) { const alpha = round(color.a, 3); if (mode === 'rgb') return color.a >= 1 ? `rgb(${color.r}, ${color.g}, ${color.b})` : `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`; if (mode === 'hsl') { const hsl = rgbToHsl(color); return color.a >= 1 ? `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)` : `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%, ${alpha})`; } if (mode === 'cmyk') { const cmyk = rgbToCmyk(color); const body = `${Math.round(cmyk.c * 100)}%, ${Math.round(cmyk.m * 100)}%, ${Math.round(cmyk.y * 100)}%, ${Math.round(cmyk.k * 100)}%`; return color.a >= 1 ? `cmyk(${body})` : `cmyk(${body}, ${alpha})`; } if (mode === 'oklab') { const lab = rgbToOklab(color); return `oklab(${round(lab.l * 100, 2)}% ${round(lab.a, 4)} ${round(lab.b, 4)}${color.a >= 1 ? '' : ` / ${alpha}`})`; } const lch = rgbToOklch(color); return `oklch(${round(lch.l * 100, 2)}% ${round(lch.c, 4)} ${round(lch.h, 2)}${color.a >= 1 ? '' : ` / ${alpha}`})`; } function getChannelValues(color: RgbaColor, mode: ColorEditorMode) { if (mode === 'rgb') return [ { label: 'R', name: 'r', value: color.r, min: 0, max: 255, step: 1 }, { label: 'G', name: 'g', value: color.g, min: 0, max: 255, step: 1 }, { label: 'B', name: 'b', value: color.b, min: 0, max: 255, step: 1 }, { label: 'A', name: 'a', value: Math.round(color.a * 100), min: 0, max: 100, step: 1 } ]; if (mode === 'hsl') { const hsl = rgbToHsl(color); return [ { label: 'H', name: 'h', value: Math.round(hsl.h), min: 0, max: 360, step: 1 }, { label: 'S', name: 's', value: Math.round(hsl.s * 100), min: 0, max: 100, step: 1 }, { label: 'L', name: 'l', value: Math.round(hsl.l * 100), min: 0, max: 100, step: 1 }, { label: 'A', name: 'a', value: Math.round(color.a * 100), min: 0, max: 100, step: 1 } ]; } if (mode === 'cmyk') { const cmyk = rgbToCmyk(color); return [ { label: 'C', name: 'c', value: Math.round(cmyk.c * 100), min: 0, max: 100, step: 1 }, { label: 'M', name: 'm', value: Math.round(cmyk.m * 100), min: 0, max: 100, step: 1 }, { label: 'Y', name: 'y', value: Math.round(cmyk.y * 100), min: 0, max: 100, step: 1 }, { label: 'K', name: 'k', value: Math.round(cmyk.k * 100), min: 0, max: 100, step: 1 }, { label: 'A', name: 'a', value: Math.round(color.a * 100), min: 0, max: 100, step: 1 } ]; } if (mode === 'oklab') { const lab = rgbToOklab(color); return [ { label: 'L', name: 'l', value: round(lab.l * 100, 2), min: 0, max: 100, step: .1 }, { label: 'A', name: 'a1', value: round(lab.a, 4), min: -1, max: 1, step: .001 }, { label: 'B', name: 'b1', value: round(lab.b, 4), min: -1, max: 1, step: .001 }, { label: 'Alpha', name: 'alpha', value: Math.round(color.a * 100), min: 0, max: 100, step: 1 } ]; } const lch = rgbToOklch(color); return [ { label: 'L', name: 'l', value: round(lch.l * 100, 2), min: 0, max: 100, step: .1 }, { label: 'C', name: 'c', value: round(lch.c, 4), min: 0, max: 1, step: .001 }, { label: 'H', name: 'h', value: round(lch.h, 2), min: 0, max: 360, step: .1 }, { label: 'A', name: 'a', value: Math.round(color.a * 100), min: 0, max: 100, step: 1 } ]; } function normalizeColor(color: RgbaColor): RgbaColor { return { r: Math.round(clamp(color.r, 0, 255)), g: Math.round(clamp(color.g, 0, 255)), b: Math.round(clamp(color.b, 0, 255)), a: clamp(Number.isFinite(color.a) ? color.a : 1, 0, 1) }; } function toCssRgb(color: RgbaColor) { return `rgba(${color.r}, ${color.g}, ${color.b}, ${round(color.a, 3)})`; } function rgbToHsv(color: RgbaColor): HsvColor { const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const d = max - min; let h = 0; if (d !== 0) { if (max === r) h = ((g - b) / d) % 6; else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h *= 60; } return { h: (h + 360) % 360, s: max === 0 ? 0 : d / max, v: max }; } function hsvToRgb(h: number, s: number, v: number) { const c = v * s; const x = c * (1 - Math.abs((h / 60) % 2 - 1)); const m = v - c; let r = 0; let g = 0; let b = 0; if (h < 60) [r, g, b] = [c, x, 0]; else if (h < 120) [r, g, b] = [x, c, 0]; else if (h < 180) [r, g, b] = [0, c, x]; else if (h < 240) [r, g, b] = [0, x, c]; else if (h < 300) [r, g, b] = [x, 0, c]; else [r, g, b] = [c, 0, x]; return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 }; } function rgbToHsl(color: RgbaColor) { const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const l = (max + min) / 2; const d = max - min; let h = 0; let s = 0; if (d !== 0) { s = d / (1 - Math.abs(2 * l - 1)); if (max === r) h = ((g - b) / d) % 6; else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h *= 60; } return { h: (h + 360) % 360, s, l }; } function hslToRgb(h: number, s: number, l: number) { const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs((h / 60) % 2 - 1)); const m = l - c / 2; let r = 0; let g = 0; let b = 0; if (h < 60) [r, g, b] = [c, x, 0]; else if (h < 120) [r, g, b] = [x, c, 0]; else if (h < 180) [r, g, b] = [0, c, x]; else if (h < 240) [r, g, b] = [0, x, c]; else if (h < 300) [r, g, b] = [x, 0, c]; else [r, g, b] = [c, 0, x]; return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 }; } function rgbToCmyk(color: RgbaColor) { const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const k = 1 - Math.max(r, g, b); if (k >= 1 - epsilon) return { c: 0, m: 0, y: 0, k: 1 }; return { c: (1 - r - k) / (1 - k), m: (1 - g - k) / (1 - k), y: (1 - b - k) / (1 - k), k }; } function cmykToRgb(c: number, m: number, y: number, k: number) { return { r: 255 * (1 - c) * (1 - k), g: 255 * (1 - m) * (1 - k), b: 255 * (1 - y) * (1 - k) }; } function rgbToOklab(color: RgbaColor) { const r = srgbToLinear(color.r / 255); const g = srgbToLinear(color.g / 255); const b = srgbToLinear(color.b / 255); const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b); const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b); const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b); return { l: 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s, a: 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s, b: 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s }; } function oklabToRgb(lValue: number, aValue: number, bValue: number) { const l = Math.pow(lValue + 0.3963377774 * aValue + 0.2158037573 * bValue, 3); const m = Math.pow(lValue - 0.1055613458 * aValue - 0.0638541728 * bValue, 3); const s = Math.pow(lValue - 0.0894841775 * aValue - 1.2914855480 * bValue, 3); return { r: 255 * linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s), g: 255 * linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s), b: 255 * linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s) }; } function rgbToOklch(color: RgbaColor) { const lab = rgbToOklab(color); const c = Math.sqrt(lab.a * lab.a + lab.b * lab.b); const h = c < epsilon ? 0 : (Math.atan2(lab.b, lab.a) * 180 / Math.PI + 360) % 360; return { l: lab.l, c, h }; } function oklchToRgb(l: number, c: number, h: number) { const radians = h * Math.PI / 180; return oklabToRgb(l, c * Math.cos(radians), c * Math.sin(radians)); } function srgbToLinear(value: number) { return value <= 0.04045 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4); } function linearToSrgb(value: number) { return value <= 0.0031308 ? 12.92 * value : 1.055 * Math.pow(value, 1 / 2.4) - 0.055; } function parseNumberOrPercent(value: string, percentBase: number) { return value.endsWith('%') ? Number(value.slice(0, -1)) / 100 * percentBase : Number(value); } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, Number.isFinite(value) ? value : min)); } function normalizeHue(value: number) { return clamp(value, 0, 360); } function round(value: number, decimals: number) { const factor = Math.pow(10, decimals); return Math.round(value * factor) / factor; } customElements.define('node-projects-color-editor', ColorEditor); customElements.define('node-projects-color-input', ColorInput); ================================================ FILE: packages/web-component-designer/src/elements/controls/DesignerTabControl.ts ================================================ import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent'; import { IActivateable } from '../../interfaces/IActivateable.js'; export type DesignerTabControlIndexChangedEventArgs = { newIndex: number, oldIndex?: number, changedViaClick?: boolean }; export class DesignerTabControl extends BaseCustomWebComponentLazyAppend { private _selectedIndex: number = -1; //private _contentObserver: MutationObserver; private _panels: HTMLDivElement; private _headerDiv: HTMLDivElement; private _moreDiv: HTMLDivElement; private _moreContainer: HTMLDivElement; private _elementMap = new WeakMap(); private _firstConnect = true; static override readonly style = css` :host { height: 100%; } .outer { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; } .header { display: inline-flex; user-select: none; -webkit-user-select: none; flex-direction: row; cursor: pointer; height: 30px; width: calc(100% - 30px); background-color: var(--dark-grey, #232733); overflow-x: auto; scrollbar-width: none; /* Firefox */ } .header-more { right: 0; top: 0; width: 30px; position: absolute; color: white; display: flex; justify-content: center; align-items: center; font-family: math; } .header-more:hover { background: var(--light-grey, #383f52); } .more-container { z-index: 1; user-select: none; -webkit-user-select: none; background-color: var(--dark-grey, #232733); right: 0; top: 30px; position: absolute; color: white; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; } .more-container .tab-header { width: 100%; } .header::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .tab-header { height: 30px; font-family: Arial; display: flex; justify-content: center; align-items: center; text-transform: uppercase; box-sizing: content-box; padding-left: 5px; padding-right: 5px; color: white; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 1px; white-space: nowrap; } .tab-header:hover { background: var(--light-grey, #383f52); } .selected { background: var(--medium-grey, #2f3545); box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63); } .panels { z-index: 0; background: var(--medium-grey, #2f3545); height: calc(100% - 30px); } `; constructor() { super(); /*this._contentObserver = new MutationObserver((mut) => { let refresh = false; for (let m of mut) { if (m.type != 'attributes' || m.attributeName == 'style') refresh = true; } if (refresh) this.refreshItems(); });*/ let outerDiv = document.createElement("div") outerDiv.className = 'outer'; this.shadowRoot.appendChild(outerDiv); this._headerDiv = document.createElement("div") this._headerDiv.className = 'header'; outerDiv.appendChild(this._headerDiv); this._moreDiv = document.createElement("div"); this._moreDiv.className = "header header-more" this._moreDiv.innerText = "<<" outerDiv.appendChild(this._moreDiv); this._moreContainer = document.createElement("div"); this._moreContainer.className = "more-container"; this._moreContainer.style.visibility = "hidden"; outerDiv.appendChild(this._moreContainer); this._moreDiv.onclick = () => { if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden") this._moreContainer.style.visibility = ''; else this._moreContainer.style.visibility = "hidden"; } this._panels = document.createElement("div") this._panels.className = 'panels'; outerDiv.appendChild(this._panels); let _slot = document.createElement("slot") _slot.name = 'panels'; this._panels.appendChild(_slot); const resizeObserver = new ResizeObserver(entries => { this._showHideHeaderItems(); }); resizeObserver.observe(this._headerDiv); } private _showHideHeaderItems() { this._moreContainer.style.visibility = "hidden"; let w = 0; DomHelper.removeAllChildnodes(this._moreContainer); DomHelper.removeAllChildnodes(this._headerDiv); let reloadOnce = true; for (let item of this.children) { if ((item).style.display != 'none') { let htmlItem = item as HTMLElement; if (!this._elementMap.has(htmlItem) && reloadOnce) { this.refreshItems(); reloadOnce = false; } const tabHeaderDiv = this._elementMap.get(htmlItem); this._moreContainer.appendChild(tabHeaderDiv); if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) { this._headerDiv.appendChild(tabHeaderDiv); w += tabHeaderDiv.clientWidth; } } } } connectedCallback() { if (this._firstConnect) { this.refreshItems(); this._firstConnect = false; //this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true }); let selectedIndexAttribute = this.getAttribute("selected-index") if (selectedIndexAttribute) { this.selectedIndex = parseInt(selectedIndexAttribute); } } } public get selectedIndex() { return this._firstConnect ? -1 : this._selectedIndex; } public set selectedIndex(value: number) { let old = this._selectedIndex; this._selectedIndex = value; if (this.children.length && old != this._selectedIndex) this._selectedIndexChanged(old); } public refreshItems() { this._headerDiv.innerHTML = ""; let i = 0; for (let item of this.children) { if ((item).style.display != 'none') { let htmlItem = item as HTMLElement; let tabHeaderDiv = document.createElement("div") tabHeaderDiv.innerText = htmlItem.dataset.title || htmlItem.title; tabHeaderDiv.title = htmlItem.dataset.title || htmlItem.title; tabHeaderDiv.className = 'tab-header'; let j = i; tabHeaderDiv.onpointerdown = () => { let old = this._selectedIndex; this._selectedIndex = j; if (this._headerDiv.children.length) this._selectedIndexChanged(old, true); this._moreContainer.style.visibility = 'hidden'; } this._elementMap.set(htmlItem, tabHeaderDiv); this._headerDiv.appendChild(tabHeaderDiv); i++; } } this._showHideHeaderItems(); this._selectedIndexChanged(); } private _selectedIndexChanged(oldIndex?: number, viaClick = false) { let index = -1; for (let element of this.children) { if ((element).style.display != 'none') { index++; if (index == this._selectedIndex) { if (element.slot != "panels") element.slot = "panels"; const headerEl = this._elementMap.get(element); if (headerEl) { headerEl.classList.add('selected'); if ((element).activated) (element).activated(); } } else { element.removeAttribute("slot"); const headerEl = this._elementMap.get(element); if (headerEl) { headerEl.classList.remove('selected'); } } } } this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick }); this._moreContainer.style.visibility = 'hidden'; } public readonly onSelectedTabChanged = new TypedEvent(); } customElements.define('node-projects-designer-tab-control', DesignerTabControl); ================================================ FILE: packages/web-component-designer/src/elements/controls/ImageButtonListSelector.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent'; export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend { public static override readonly style = css` div { font-size: 10px; color: white; } #property { color: #00aff0; } #value { color: lightgray; } #value.value-set { color: wheat; } .container { display: flex; flex-direction: row; } ::slotted(button) { min-width: 24px; height: 24px; padding: 1px; background: white; border: 1px solid lightgray; } `; public static override readonly template = html`
`; public static properties = { value: String, property: String, unsetValue: String, noValueInHeader: Boolean } constructor() { super(); this._restoreCachedInititalValues(); } private _value: string; public get value() { return this._value; } public set value(value) { this._value = value; this._updateValue(); } public property: string; public unsetValue: string; public noValueInHeader: boolean; _updateValue() { if (this.value) { this._getDomElement('value').innerText = this.value; this._getDomElement('value').classList.add('value-set'); } else { this._getDomElement('value').classList.remove('value-set'); } const slot = this._getDomElement('slot'); for (let e of slot.assignedElements()) { if ((e).dataset.value == this.value) (e).style.background = "cornflowerblue"; else (e).style.background = ""; } } ready() { this._parseAttributesToProperties(); if (this.property) this._getDomElement('header').style.display = 'block'; if (this.noValueInHeader) this._getDomElement('vhd').style.display = 'none'; const slot = this._getDomElement('slot'); slot.onclick = (e) => { const path = e.composedPath(); for (let e of slot.assignedElements()) { if (path.indexOf(e) >= 0) { const oldValue = this._value; this.value = (e).dataset.value; const valueChangedEvent = new CustomEvent('value-changed', { detail: { newValue: this._value, oldValue: oldValue } }); this.dispatchEvent(valueChangedEvent); } } } this._getDomElement('property').innerText = this.property ?? ''; this._getDomElement('value').innerText = this.unsetValue ?? ''; this._updateValue(); } } customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector); ================================================ FILE: packages/web-component-designer/src/elements/controls/MetricsEditor.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent'; export type MetricsEditorArea = 'position' | 'margin' | 'border' | 'padding' | 'content'; export type MetricsEditorSide = 'top' | 'right' | 'bottom' | 'left' | 'width' | 'height'; export type MetricsEditorValueChangedEventArgs = { property: string, area: MetricsEditorArea, side: MetricsEditorSide, newValue?: string, oldValue?: string }; type MetricsEditorValueMap = Partial>>>; const metricsEditorNaturalWidth = 436; const cssProperties: Record>> = { position: { top: 'top', right: 'right', bottom: 'bottom', left: 'left' }, margin: { top: 'margin-top', right: 'margin-right', bottom: 'margin-bottom', left: 'margin-left' }, border: { top: 'border-top-width', right: 'border-right-width', bottom: 'border-bottom-width', left: 'border-left-width' }, padding: { top: 'padding-top', right: 'padding-right', bottom: 'padding-bottom', left: 'padding-left' }, content: { width: 'width', height: 'height' } }; const computedStyleProperties: Record = { 'border-top-width': 'borderTopWidth', 'border-right-width': 'borderRightWidth', 'border-bottom-width': 'borderBottomWidth', 'border-left-width': 'borderLeftWidth', 'margin-top': 'marginTop', 'margin-right': 'marginRight', 'margin-bottom': 'marginBottom', 'margin-left': 'marginLeft', 'padding-top': 'paddingTop', 'padding-right': 'paddingRight', 'padding-bottom': 'paddingBottom', 'padding-left': 'paddingLeft' }; export class MetricsEditor extends BaseCustomWebComponentConstructorAppend { public static override readonly style = css` :host { display: block; box-sizing: border-box; min-width: 0; color: var(--property-grid-text-color, white); font: 11px monospace; overflow: hidden; } #box-model { display: grid; grid-template-columns: 46px minmax(120px, 1fr) 46px; grid-template-rows: 22px minmax(29px, auto) minmax(58px, auto) minmax(29px, auto) 22px; grid-template-areas: ". position-top ." "position-left margin position-right" "position-left margin position-right" "position-left margin position-right" ". position-bottom ."; align-items: center; justify-items: center; width: 100%; min-width: ${metricsEditorNaturalWidth}px; box-sizing: border-box; padding: 4px; transform-origin: top left; } .ring { display: grid; grid-template-columns: 42px minmax(56px, 1fr) 42px; grid-template-rows: 20px minmax(34px, auto) 20px; grid-template-areas: ". top ." "left inner right" ". bottom ."; align-items: center; justify-items: center; position: relative; box-sizing: border-box; width: 100%; min-width: 0; height: 100%; min-height: 116px; border: 1px dashed rgba(0, 0, 0, .55); } #margin { grid-area: margin; background: #f6c89f; } #border { grid-area: inner; background: #f7dd9c; border-style: solid; min-height: 76px; } #padding { grid-area: inner; background: #c8d08f; min-height: 38px; } #content { grid-area: inner; display: grid; grid-template-columns: minmax(26px, 1fr) auto minmax(26px, 1fr); gap: 4px; align-items: center; justify-items: center; width: 100%; height: 100%; min-height: 24px; box-sizing: border-box; background: #8fb9c3; border: 1px solid rgba(0, 0, 0, .65); } #position-label, #content-label { display: none; } #content.box, #border.box { outline: 2px solid rgba(0, 0, 0, .85); outline-offset: -2px; } .label { position: absolute; top: 2px; left: 4px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; color: rgba(0, 0, 0, .72); font-size: 10px; line-height: 12px; } input { width: 38px; max-width: 100%; min-width: 0; height: 17px; box-sizing: border-box; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: rgba(0, 0, 0, .85); font: inherit; line-height: 17px; text-align: center; outline: none; } input:hover, input:focus { background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); } input:disabled { opacity: .65; } [data-side="top"] { grid-area: top; } [data-side="right"] { grid-area: right; } [data-side="bottom"] { grid-area: bottom; } [data-side="left"] { grid-area: left; } [data-area="position"][data-side="top"] { grid-area: position-top; } [data-area="position"][data-side="right"] { grid-area: position-right; } [data-area="position"][data-side="bottom"] { grid-area: position-bottom; } [data-area="position"][data-side="left"] { grid-area: position-left; } `; public static override readonly template = html`
position
margin
border
padding
content x
`; public property: string; public unsetValue = '-'; private _borderDiv: HTMLDivElement; private _boxModelDiv: HTMLDivElement; private _contentDiv: HTMLDivElement; private _inputs: HTMLInputElement[] = []; private _values: MetricsEditorValueMap = {}; private _isRefreshing = false; private _resizeObserver: ResizeObserver; constructor() { super(); this._restoreCachedInititalValues(); this._borderDiv = this._getDomElement('border'); this._boxModelDiv = this._getDomElement('box-model'); this._contentDiv = this._getDomElement('content'); this._inputs = [...this.shadowRoot.querySelectorAll('input[data-area][data-side]')]; } ready() { this._parseAttributesToProperties(); this._wireEvents(); this._updateInputs(); requestAnimationFrame(() => this._updateScale()); } connectedCallback() { this._resizeObserver ??= new ResizeObserver(() => this._updateScale()); this._resizeObserver.observe(this); requestAnimationFrame(() => this._updateScale()); } disconnectedCallback() { this._resizeObserver?.disconnect(); } public get values(): MetricsEditorValueMap { return this._cloneValues(this._values); } public set values(value: MetricsEditorValueMap) { this._values = this._cloneValues(value ?? {}); this._updateInputs(); } public getPropertyName(area: MetricsEditorArea, side: MetricsEditorSide) { return cssProperties[area]?.[side]; } public refresh(element: Element) { this._contentDiv.classList.remove('box'); this._borderDiv.classList.remove('box'); if (!element) { this.values = {}; return; } const computedStyle = element.ownerDocument.defaultView.getComputedStyle(element); const nextValues: MetricsEditorValueMap = {}; for (const area of Object.keys(cssProperties) as MetricsEditorArea[]) { nextValues[area] = {}; for (const side of Object.keys(cssProperties[area]) as MetricsEditorSide[]) { const propertyName = this.getPropertyName(area, side); nextValues[area][side] = this._getComputedProperty(computedStyle, propertyName, area); } } if (computedStyle.boxSizing == 'content-box') this._contentDiv.classList.add('box'); else this._borderDiv.classList.add('box'); this.values = nextValues; this._updateScale(); } private _wireEvents() { for (const input of this._inputs) { input.addEventListener('focus', () => input.select()); input.addEventListener('change', () => this._commitInput(input)); input.addEventListener('keydown', event => { if (event.key === 'Enter') { this._commitInput(input); input.blur(); } else if (event.key === 'Escape') { this._updateInput(input); input.blur(); } }); } } private _commitInput(input: HTMLInputElement) { if (this._isRefreshing) return; const area = input.dataset['area'] as MetricsEditorArea; const side = input.dataset['side'] as MetricsEditorSide; const oldValue = this._values[area]?.[side] ?? ''; const newValue = input.value.trim(); if (!this._values[area]) this._values[area] = {}; this._values[area][side] = newValue; this._updateInput(input); if (oldValue === newValue) return; this.dispatchEvent(new CustomEvent('value-changed', { bubbles: true, composed: true, detail: { property: this.getPropertyName(area, side), area, side, newValue, oldValue } })); } private _updateInputs() { this._isRefreshing = true; try { for (const input of this._inputs) this._updateInput(input); } finally { this._isRefreshing = false; } } private _updateInput(input: HTMLInputElement) { const area = input.dataset['area'] as MetricsEditorArea; const side = input.dataset['side'] as MetricsEditorSide; input.value = this._values[area]?.[side] ?? this.unsetValue; } private _getComputedProperty(computedStyle: CSSStyleDeclaration, propertyName: string, area: MetricsEditorArea) { const camelName = computedStyleProperties[propertyName] ?? propertyName; const value = computedStyle.getPropertyValue(propertyName) || computedStyle[camelName]; if (area === 'position' && value === 'auto') return this.unsetValue; return value || this.unsetValue; } private _cloneValues(values: MetricsEditorValueMap): MetricsEditorValueMap { const clone: MetricsEditorValueMap = {}; for (const area of Object.keys(values) as MetricsEditorArea[]) clone[area] = { ...values[area] }; return clone; } private _updateScale() { if (!this._boxModelDiv) return; const availableWidth = this.clientWidth; if (availableWidth <= 0) return; const scale = Math.min(1, availableWidth / metricsEditorNaturalWidth); this._boxModelDiv.style.width = scale < 1 ? metricsEditorNaturalWidth + 'px' : '100%'; this._boxModelDiv.style.transform = scale < 1 ? `scale(${scale})` : ''; this.style.height = (this._boxModelDiv.offsetHeight * scale) + 'px'; } } customElements.define('node-projects-metrics-editor', MetricsEditor); ================================================ FILE: packages/web-component-designer/src/elements/controls/NumericStyleInput.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { combineNumericStyleInputValue, formatNumericStyleInputNumber, getNumericStyleInputUnitLabel, normalizeNumericStyleInputOptionValues, parseNumericStyleInputValue, resolveNumericStyleInputSelectedUnit, resolveNumericStyleInputStep } from './NumericStyleInputValueHelpers.js'; export type { ParsedNumericStyleInputValue } from './NumericStyleInputValueHelpers.js'; export { parseNumericStyleInputValue, formatNumericStyleInputNumber, combineNumericStyleInputValue } from './NumericStyleInputValueHelpers.js'; export type NumericStyleInputValueChangedEventArgs = { newValue?: string, oldValue?: string }; export type NumericStyleInputPreviewFinishedEventArgs = { newValue?: string, oldValue?: string, wasCancelled?: boolean }; export type NumericStyleInputUnitValueConversionArgs = { value: number, numberText: string, rawValue: string, fromUnit: string, toUnit: string }; type NumericStyleInputMode = 'unit' | 'fixed' | 'custom'; type NumericStyleInputDisplayState = { mode: NumericStyleInputMode, inputValue: string, inputVisible: boolean, inputEnabled: boolean, selectValue: string, selectedUnit?: string }; const customOptionValue = '__node-projects-custom-value__'; const dragHandleGlyph = '⋮'; export class NumericStyleInput extends BaseCustomWebComponentConstructorAppend { public static override readonly style = css` :host { display: block; width: 100%; min-width: 0; } #container { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr) auto 16px; width: 100%; height: 24px; align-items: stretch; } #value-wrapper { display: grid; grid-template-columns: 14px minmax(0, 1fr); min-width: 0; } #scrubber, #input, #select, #stepper button { /* border: 1px solid var(--input-border-color, #596c7a); */ border: none; box-sizing: border-box; height: 24px; min-height: 24px; background: transparent; color: inherit; font: inherit; outline: none; box-shadow: none; } #scrubber, #stepper button { padding: 0; line-height: 1; } #scrubber { border-right: 0; cursor: ns-resize; font-size: 11px; letter-spacing: -1px; } #input { border-left: 0; border-right: 0; min-width: 0; text-align: right; } #input:focus, #select:focus, #scrubber:focus, #stepper button:focus { outline: none; box-shadow: none; border-color: var(--input-border-color, #596c7a); } #input[disabled], #scrubber[disabled] { cursor: default; } #input[disabled] { color: inherit; opacity: 1; -webkit-text-fill-color: currentColor; } #select { border-left: 0; padding: 0 15px 0 2px; line-height: 1; -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0l4 4 4-4z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 2px center; } #measure { position: absolute; visibility: hidden; white-space: nowrap; font: inherit; pointer-events: none; } #stepper { display: grid; height: 24px; min-height: 24px; overflow: hidden; grid-template-rows: repeat(2, minmax(0, 1fr)); } #stepper button { height: auto; min-height: 0; width: 16px; min-width: 16px; font-size: 10px; } `; public static override readonly template = html`
`; private _value = ''; public get value() { return this._value; } public set value(value) { this._setValue(value, false, false); } public valueChanged = new TypedEvent(); public valuePreviewChanged = new TypedEvent(); public valuePreviewFinished = new TypedEvent(); private _units: string[] = ['px', '%', 'pt']; public get units() { return [...this._units]; } public set units(value: string[]) { this._units = this._normalizeOptionValues(value); this._lastNumericUnit = this._units[0] ?? this._lastNumericUnit; this._updateValue(); } private _fixedValues: string[] = []; public get fixedValues() { return [...this._fixedValues]; } public set fixedValues(value: string[]) { this._fixedValues = this._normalizeOptionValues(value); this._updateValue(); } private _step = 1; public get step() { return this._step; } public set step(value: number) { this._step = Number.isFinite(value) && value > 0 ? value : 1; } private _unitSteps: Record = {}; public get unitSteps() { return { ...this._unitSteps }; } public set unitSteps(value: Record) { this._unitSteps = value ?? {}; } private _min: number = null; public get min() { return this._min; } public set min(value: number) { this._min = Number.isFinite(value) ? value : null; } private _max: number = null; public get max() { return this._max; } public set max(value: number) { this._max = Number.isFinite(value) ? value : null; } private _readOnly = false; public get readOnly() { return this._readOnly; } public set readOnly(value: boolean) { this._readOnly = value; this._applyReadonlyState(); } public get isInPreview(): boolean { return this._previewStartValue != null; } private _allowCustomValue = true; public get allowCustomValue() { return this._allowCustomValue; } public set allowCustomValue(value: boolean) { this._allowCustomValue = value; this._updateValue(); } private _unitValueConverter: (args: NumericStyleInputUnitValueConversionArgs) => string; public get unitValueConverter() { return this._unitValueConverter; } public set unitValueConverter(value: (args: NumericStyleInputUnitValueConversionArgs) => string) { this._unitValueConverter = value; } private _input: HTMLInputElement; private _select: HTMLSelectElement; private _measure: HTMLSpanElement; private _scrubberButton: HTMLButtonElement; private _increaseButton: HTMLButtonElement; private _decreaseButton: HTMLButtonElement; private _lastNumericValue = 0; private _lastNumericUnit = 'px'; private _dragPointerId: number = null; private _dragStartY = 0; private _dragStartNumericValue = 0; private _appliedDragSteps = 0; private _previewStartValue: string = null; private _previewChanged = false; private _displayValueLock: string = null; private _stepperPointerId: number = null; private _stepperDirection = 0; private _stepperRepeatTimeout: number = null; private _stepperRepeatInterval: number = null; private _windowDragPointerMoveHandler = (event: PointerEvent) => this._handleWindowDragPointerMove(event); private _windowDragPointerUpHandler = (event: PointerEvent) => this._finishDragInteractionForPointerEvent(event, false); private _windowDragPointerCancelHandler = (event: PointerEvent) => this._finishDragInteractionForPointerEvent(event, true); private _windowDragBlurHandler = () => this._finishDragInteraction(false); private _windowPointerUpHandler = (event: PointerEvent) => this._handleWindowStepperPointerEnd(event); private _windowPointerCancelHandler = (event: PointerEvent) => this._handleWindowStepperPointerEnd(event); private _windowBlurHandler = () => this._finishStepperInteraction(false); private _preferCustomMode = false; constructor() { super(); this._restoreCachedInititalValues(); this._input = this._getDomElement('input'); this._select = this._getDomElement('select'); this._measure = this._getDomElement('measure'); this._scrubberButton = this._getDomElement('scrubber'); this._increaseButton = this._getDomElement('increase'); this._decreaseButton = this._getDomElement('decrease'); } ready() { this._parseAttributesToProperties(); this._wireEvents(); this._updateValue(); } private _wireEvents() { this._input.addEventListener('change', () => this._applyTypedValue()); this._input.addEventListener('keydown', e => { if (e.key === 'Enter') { this._applyTypedValue(); this._input.blur(); } }); this._scrubberButton.addEventListener('pointerdown', e => this._handlePointerDown(e)); this._select.addEventListener('change', () => this._applySelectedMode()); this._increaseButton.addEventListener('pointerdown', e => this._handleStepperPointerDown(e, 1)); this._decreaseButton.addEventListener('pointerdown', e => this._handleStepperPointerDown(e, -1)); } private _handlePointerDown(event: PointerEvent) { if (this._readOnly) return; if (!this._isSelectedUnitMode()) { if (!this._switchToUnitModeForInteraction()) return; } this._dragPointerId = event.pointerId; this._dragStartY = event.clientY; this._dragStartNumericValue = this._readEditableNumericValue(this._select.value); this._appliedDragSteps = 0; this._startPreviewSession(); this._attachDragWindowListeners(); try { this._scrubberButton.setPointerCapture(event.pointerId); } catch { } event.preventDefault(); } private _handleWindowDragPointerMove(event: PointerEvent) { if (this._dragPointerId !== event.pointerId || !this._isSelectedUnitMode()) return; const stepCount = this._calculateDraggedStepCount(this._dragStartY - event.clientY); if (stepCount === this._appliedDragSteps) return; this._appliedDragSteps = stepCount; const unit = this._select.value; const step = this._getEffectiveStep(unit); this._previewNumericValue(this._getInteractiveStepValue(this._dragStartNumericValue, stepCount, step), unit, step); event.preventDefault(); } private _finishDragInteractionForPointerEvent(event: PointerEvent, wasCancelled: boolean) { if (this._dragPointerId !== event.pointerId) return; this._finishDragInteraction(wasCancelled, event.pointerId); } private _finishDragInteraction(wasCancelled: boolean, pointerId?: number) { if (this._dragPointerId == null) return; this._dragPointerId = null; this._appliedDragSteps = 0; this._detachDragWindowListeners(); if (pointerId != null) { try { if (this._scrubberButton.hasPointerCapture(pointerId)) this._scrubberButton.releasePointerCapture(pointerId); } catch { } } this._finishPreviewSession(wasCancelled); } private _handleStepperPointerDown(event: PointerEvent, direction: number) { if (this._readOnly) return; if (!this._isSelectedUnitMode()) { if (!this._switchToUnitModeForInteraction()) return; } this._finishStepperInteraction(true); this._stepperPointerId = event.pointerId; this._stepperDirection = direction; this._attachStepperWindowListeners(); this._startPreviewSession(); this._applyStepPreview(direction); this._stepperRepeatTimeout = window.setTimeout(() => { this._stepperRepeatInterval = window.setInterval(() => this._applyStepPreview(this._stepperDirection), 50); }, 350); event.preventDefault(); } private _handleWindowStepperPointerEnd(event: PointerEvent) { if (this._stepperPointerId !== event.pointerId) return; this._finishStepperInteraction(false); } private _finishStepperInteraction(wasCancelled: boolean) { if (this._stepperPointerId == null) return; this._stepperPointerId = null; this._stepperDirection = 0; this._detachStepperWindowListeners(); this._stopStepperRepeat(); this._finishPreviewSession(wasCancelled); } private _applySelectedMode() { const selectedOption = this._select.selectedOptions.item(0); if (!selectedOption) return; const selectedKind = selectedOption.dataset['kind']; if (selectedKind === 'fixed') { this._commitValue(selectedOption.value); return; } if (selectedKind === 'custom') { this._preferCustomMode = true; this._updateValue(); requestAnimationFrame(() => { this._input.focus(); this._input.select(); }); return; } const selectedUnit = selectedOption.value; this._lastNumericUnit = selectedUnit; this._preferCustomMode = false; const parsedValue = parseNumericStyleInputValue(this._value); if (parsedValue.kind === 'numeric') { const convertedValue = this._convertNumericValue(parsedValue, selectedUnit); this._commitValue(convertedValue); return; } const resolvedCurrentValue = this._resolveCurrentValueForUnit(selectedUnit); if (resolvedCurrentValue != null) { this._commitValue(resolvedCurrentValue); return; } if (parsedValue.kind === 'empty') { this._updateValue(); this._input.focus(); return; } const typedNumericValue = Number(this._input.value); if (!Number.isNaN(typedNumericValue)) { this._applyNumericValue(typedNumericValue, selectedUnit); return; } // Switching from a non-numeric value (e.g. unset/inherit) to a unit: // clear the value so the unit mode is shown with an empty input this._commitValue(''); this._input.focus(); } private _applyTypedValue() { const selectedOption = this._select.selectedOptions.item(0); const selectedKind = selectedOption?.dataset['kind']; if (selectedKind === 'fixed') return; if (selectedKind === 'custom') { this._commitValue(this._input.value); return; } const numberText = this._input.value?.trim() ?? ''; if (!numberText) { this._commitValue(''); return; } const numericValue = Number(numberText); if (!Number.isNaN(numericValue)) this._lastNumericValue = this._clampNumericValue(numericValue); this._commitValue(combineNumericStyleInputValue(numberText, selectedOption?.value ?? '')); } private _updateValue() { if (!this._input || !this._select) return; if (this._previewStartValue == null) this._renderSelectOptions(); const displayState = this._getDisplayState(this._displayValueLock ?? this._value); this._input.value = displayState.inputValue; this._input.style.display = displayState.inputVisible ? '' : 'none'; this._input.disabled = this._readOnly || !displayState.inputEnabled; this._select.value = displayState.selectValue; this._autoSizeSelect(); if (displayState.mode === 'unit' && displayState.selectedUnit != null) this._lastNumericUnit = displayState.selectedUnit; if (displayState.mode === 'unit' && displayState.inputValue !== '') { const typedNumericValue = Number(displayState.inputValue); if (!Number.isNaN(typedNumericValue)) this._lastNumericValue = this._clampNumericValue(typedNumericValue); } const hasUnits = this._units.length > 0; const interactionDisabled = this._readOnly || (!hasUnits || (displayState.mode === 'custom')); this._scrubberButton.disabled = interactionDisabled; this._increaseButton.disabled = interactionDisabled; this._decreaseButton.disabled = interactionDisabled; this._applyReadonlyState(); } private _getDisplayState(value: string): NumericStyleInputDisplayState { const parsedValue = parseNumericStyleInputValue(value); if (parsedValue.kind === 'numeric') { if (this._preferCustomMode) return this._createCustomDisplayState(parsedValue.numberText); if (parsedValue.unit && this._units.length && !this._units.includes(parsedValue.unit)) return this._createCustomDisplayState(value); const selectedUnit = resolveNumericStyleInputSelectedUnit(parsedValue.unit, this._lastNumericUnit, this._units) ?? ''; return { mode: 'unit', inputValue: parsedValue.numberText, inputVisible: true, inputEnabled: true, selectValue: this._units.includes(selectedUnit) ? selectedUnit : (this._select.value || customOptionValue), selectedUnit }; } if (parsedValue.kind === 'text') { if (!this._preferCustomMode && this._fixedValues.includes(parsedValue.text)) { return { mode: 'fixed', inputValue: '', inputVisible: true, inputEnabled: false, selectValue: parsedValue.text }; } return this._createCustomDisplayState(parsedValue.text); } if (this._preferCustomMode) return this._createCustomDisplayState(''); const selectedUnit = this._lastNumericUnit ?? this._units[0] ?? ''; if (this._units.includes(selectedUnit)) { return { mode: 'unit', inputValue: '', inputVisible: true, inputEnabled: true, selectValue: selectedUnit, selectedUnit }; } return this._createCustomDisplayState(''); } private _createCustomDisplayState(text: string): NumericStyleInputDisplayState { if (!this._allowCustomValue && this._units.length) { return { mode: 'unit', inputValue: text, inputVisible: true, inputEnabled: true, selectValue: this._units[0], selectedUnit: this._units[0] }; } return { mode: 'custom', inputValue: text, inputVisible: true, inputEnabled: true, selectValue: customOptionValue }; } private _renderSelectOptions() { const selectedValue = this._select.value; this._select.replaceChildren(); if (this._units.length) { const group = document.createElement('optgroup'); group.label = 'Units'; for (const unit of this._units) group.appendChild(this._createOption(getNumericStyleInputUnitLabel(unit), unit, 'unit')); this._select.appendChild(group); } if (this._fixedValues.length) { const group = document.createElement('optgroup'); group.label = 'Values'; for (const fixedValue of this._fixedValues) group.appendChild(this._createOption(fixedValue, fixedValue, 'fixed')); this._select.appendChild(group); } if (this._allowCustomValue || this._select.options.length === 0) this._select.appendChild(this._createOption('custom', customOptionValue, 'custom')); if (selectedValue !== '') this._select.value = selectedValue; else if (this._select.querySelector('option[value=""]')) this._select.value = ''; } private _createOption(label: string, value: string, kind: NumericStyleInputMode): HTMLOptionElement { const option = document.createElement('option'); option.text = label; option.value = value; option.dataset['kind'] = kind; return option; } private _autoSizeSelect() { if (!this._measure || !this._select) return; const selectedOption = this._select.selectedOptions.item(0); this._measure.textContent = selectedOption?.text ?? ''; const textWidth = this._measure.offsetWidth; if (textWidth > 0) { // 14px accounts for the custom dropdown arrow + padding this._select.style.width = (textWidth + 17) + 'px'; } else { // Element not yet laid out, defer measurement requestAnimationFrame(() => this._autoSizeSelect()); } } private _applyReadonlyState() { if (!this._input || !this._select) return; this._input.readOnly = this._readOnly; this._select.disabled = this._readOnly; } private _convertNumericValue(parsedValue: { numberText: string, value: number, unit: string }, selectedUnit: string) { if (selectedUnit == null) return this._value; const fromUnit = parsedValue.unit; const convertedValue = this._unitValueConverter?.({ value: parsedValue.value, numberText: parsedValue.numberText, rawValue: this._value, fromUnit, toUnit: selectedUnit }); return convertedValue ?? combineNumericStyleInputValue(parsedValue.numberText, selectedUnit); } private _resolveCurrentValueForUnit(selectedUnit: string) { if (selectedUnit == null) return null; const convertedValue = this._unitValueConverter?.({ value: Number.NaN, numberText: '', rawValue: this._value, fromUnit: '', toUnit: selectedUnit })?.trim(); return convertedValue ? convertedValue : null; } private _readEditableNumericValue(selectedUnit: string) { const parsedValue = parseNumericStyleInputValue(this._value); if (parsedValue.kind === 'numeric') { const convertedValue = this._convertNumericValue(parsedValue, selectedUnit); const convertedParsedValue = parseNumericStyleInputValue(convertedValue); if (convertedParsedValue.kind === 'numeric') return convertedParsedValue.value; return parsedValue.value; } if (this._input.value?.trim()) { const typedNumericValue = Number(this._input.value); if (!Number.isNaN(typedNumericValue)) return typedNumericValue; } return this._lastNumericValue; } private _applyNumericValue(value: number, unit: string) { this._lastNumericValue = this._clampNumericValue(value); this._lastNumericUnit = unit; this._commitValue(combineNumericStyleInputValue(formatNumericStyleInputNumber(this._lastNumericValue), unit)); } private _previewNumericValue(value: number, unit: string, step?: number) { this._lastNumericValue = this._clampNumericValue(value); this._lastNumericUnit = unit; const effectiveStep = step ?? this._getEffectiveStep(unit); this._setValue(combineNumericStyleInputValue(this._formatInteractiveNumericValue(this._lastNumericValue, effectiveStep), unit), false, true); } private _commitValue(value: string) { this._setValue(value, true, false); } private _setValue(value: string, emitCommit: boolean, emitPreview: boolean) { const normalizedValue = value ?? ''; if (!emitCommit && !emitPreview && this._previewStartValue != null) return; const oldValue = this._value; this._value = normalizedValue; if (emitPreview) this._displayValueLock = normalizedValue; else if (this._displayValueLock != null) { if (normalizedValue === this._displayValueLock || normalizedValue !== oldValue) this._displayValueLock = null; } this._preferCustomMode = false; this._updateValue(); if (oldValue !== normalizedValue) { if (emitPreview) { this._previewChanged = true; this.valuePreviewChanged.emit({ newValue: normalizedValue, oldValue: oldValue }); } if (emitCommit) this.valueChanged.emit({ newValue: normalizedValue, oldValue: oldValue }); } } private _startPreviewSession() { if (this._previewStartValue == null) { this._previewStartValue = this._value; this._previewChanged = false; } } private _finishPreviewSession(wasCancelled: boolean) { if (this._previewStartValue == null) return; const oldValue = this._previewStartValue; const newValue = this._displayValueLock ?? this._value; const changed = this._previewChanged && oldValue !== newValue; const finalWasCancelled = wasCancelled || !changed; this._previewStartValue = null; this._previewChanged = false; if (finalWasCancelled) { this._displayValueLock = null; this._value = oldValue; this._updateValue(); } else { this._displayValueLock = newValue; this._updateValue(); } this.valuePreviewFinished.emit({ newValue, oldValue, wasCancelled: finalWasCancelled }); } private _applyStepPreview(direction: number) { const unit = this._select.value; const step = this._getEffectiveStep(unit); this._previewNumericValue(this._getInteractiveStepValue(this._readEditableNumericValue(unit), direction, step), unit, step); } private _stopStepperRepeat() { if (this._stepperRepeatTimeout != null) { window.clearTimeout(this._stepperRepeatTimeout); this._stepperRepeatTimeout = null; } if (this._stepperRepeatInterval != null) { window.clearInterval(this._stepperRepeatInterval); this._stepperRepeatInterval = null; } } private _attachStepperWindowListeners() { window.addEventListener('pointerup', this._windowPointerUpHandler, true); window.addEventListener('pointercancel', this._windowPointerCancelHandler, true); window.addEventListener('blur', this._windowBlurHandler); } private _attachDragWindowListeners() { window.addEventListener('pointermove', this._windowDragPointerMoveHandler, true); window.addEventListener('pointerup', this._windowDragPointerUpHandler, true); window.addEventListener('pointercancel', this._windowDragPointerCancelHandler, true); window.addEventListener('blur', this._windowDragBlurHandler); } private _detachStepperWindowListeners() { window.removeEventListener('pointerup', this._windowPointerUpHandler, true); window.removeEventListener('pointercancel', this._windowPointerCancelHandler, true); window.removeEventListener('blur', this._windowBlurHandler); } private _detachDragWindowListeners() { window.removeEventListener('pointermove', this._windowDragPointerMoveHandler, true); window.removeEventListener('pointerup', this._windowDragPointerUpHandler, true); window.removeEventListener('pointercancel', this._windowDragPointerCancelHandler, true); window.removeEventListener('blur', this._windowDragBlurHandler); } private _calculateDraggedStepCount(pixelDelta: number) { const absolutePixels = Math.abs(pixelDelta); const fineSteps = Math.min(absolutePixels, 20) / 5; const mediumSteps = Math.max(Math.min(absolutePixels - 20, 40), 0) / 3; const coarseSteps = Math.max(absolutePixels - 60, 0) / 2; const stepCount = Math.trunc(fineSteps + mediumSteps + coarseSteps); return Math.sign(pixelDelta) * stepCount; } private _getEffectiveStep(unit?: string): number { return resolveNumericStyleInputStep(this._unitSteps, this._step, unit); } private _getInteractiveStepValue(value: number, stepCount: number, step?: number) { const effectiveStep = step ?? this._step; const clampedValue = this._clampNumericValue(value); if (!Number.isFinite(clampedValue) || !Number.isFinite(stepCount) || stepCount === 0) return clampedValue; const stepBase = this._min ?? 0; const quotient = (clampedValue - stepBase) / effectiveStep; const roundedQuotient = Math.round(quotient); const isAligned = Math.abs(quotient - roundedQuotient) < 1e-9; let targetIndex: number; if (stepCount > 0) { const firstIndex = isAligned ? roundedQuotient + 1 : Math.ceil(quotient); targetIndex = firstIndex + stepCount - 1; } else { const firstIndex = isAligned ? roundedQuotient - 1 : Math.floor(quotient); targetIndex = firstIndex + stepCount + 1; } const targetValue = stepBase + (targetIndex * effectiveStep); return this._clampNumericValue(this._roundToStepPrecision(targetValue, effectiveStep)); } private _formatInteractiveNumericValue(value: number, step?: number) { const effectiveStep = step ?? this._step; return formatNumericStyleInputNumber(this._roundToStepPrecision(value, effectiveStep), this._getStepPrecision(effectiveStep)); } private _roundToStepPrecision(value: number, step?: number) { const precision = this._getStepPrecision(step); const factor = 10 ** precision; return Math.round(value * factor) / factor; } private _getStepPrecision(step?: number) { const stepText = `${step ?? this._step}`.toLowerCase(); if (stepText.includes('e-')) { const [coefficientText, exponentText] = stepText.split('e-'); const exponent = Number(exponentText); const decimalPartLength = coefficientText.includes('.') ? coefficientText.length - coefficientText.indexOf('.') - 1 : 0; return exponent + decimalPartLength; } const decimalIndex = stepText.indexOf('.'); return decimalIndex >= 0 ? stepText.length - decimalIndex - 1 : 0; } private _switchToUnitModeForInteraction(): boolean { const targetUnit = this._lastNumericUnit ?? this._units[0]; if (targetUnit == null) return false; this._preferCustomMode = false; const resolved = this._resolveCurrentValueForUnit(targetUnit); if (resolved != null) { this._commitValue(resolved); return this._isSelectedUnitMode(); } this._applyNumericValue(this._lastNumericValue, targetUnit); return this._isSelectedUnitMode(); } private _isSelectedUnitMode() { return this._select.selectedOptions.item(0)?.dataset['kind'] === 'unit'; } private _normalizeOptionValues(values: string[]) { return normalizeNumericStyleInputOptionValues(values); } private _clampNumericValue(value: number) { let result = value; if (this._min != null) result = Math.max(this._min, result); if (this._max != null) result = Math.min(this._max, result); return result; } } customElements.define('node-projects-numeric-style-input', NumericStyleInput); ================================================ FILE: packages/web-component-designer/src/elements/controls/NumericStyleInputValueHelpers.ts ================================================ export type ParsedNumericStyleInputValue = | { kind: 'empty' } | { kind: 'numeric', numberText: string, value: number, unit: string } | { kind: 'text', text: string }; export function parseNumericStyleInputValue(value?: string | null): ParsedNumericStyleInputValue { const text = value?.trim() ?? ''; if (!text) return { kind: 'empty' }; const match = text.match(/^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(?:([a-z%]+))?$/i); if (!match) return { kind: 'text', text }; const numericValue = Number(match[1]); if (Number.isNaN(numericValue)) return { kind: 'text', text }; return { kind: 'numeric', numberText: match[1], value: numericValue, unit: match[2]?.toLowerCase() ?? '' }; } export function formatNumericStyleInputNumber(value: number, maxDecimalPlaces: number = 4): string { if (!Number.isFinite(value)) return '0'; const factor = 10 ** Math.max(0, maxDecimalPlaces); const roundedValue = Math.round(value * factor) / factor; return Object.is(roundedValue, -0) ? '0' : `${roundedValue}`; } export function combineNumericStyleInputValue(numberText: string, unit: string): string { const trimmedNumberText = numberText?.trim() ?? ''; if (!trimmedNumberText) return ''; return trimmedNumberText + (unit ?? ''); } export function getNumericStyleInputUnitLabel(unit: string): string { return unit === '' ? ' ' : unit; } export function normalizeNumericStyleInputOptionValues(values?: string[]): string[] { const normalizedValues = (values ?? []) .map(x => x == null ? null : x.trim()) .filter((x): x is string => x != null); return [...new Set(normalizedValues)]; } export function resolveNumericStyleInputSelectedUnit(parsedUnit: string | undefined, lastNumericUnit: string | undefined, units: string[]): string | null { if (parsedUnit != null && units.includes(parsedUnit)) return parsedUnit; return lastNumericUnit ?? units[0] ?? null; } export function resolveNumericStyleInputStep(unitSteps: Record | undefined, defaultStep: number, unit?: string): number { if (unit != null) { const unitStep = unitSteps?.[unit]; if (Number.isFinite(unitStep) && unitStep > 0) return unitStep; } return defaultStep; } ================================================ FILE: packages/web-component-designer/src/elements/controls/PlainScrollbar.ts ================================================ //included from: https://github.com/chdh/plain-scrollbar import { css, html } from "@node-projects/base-custom-webcomponent"; class Widget { private host: PlainScrollbar; private root: HTMLElement; private trough: HTMLElement; private button1: HTMLElement; // up/left button private button2: HTMLElement; // down/right button private thumb: HTMLElement; private isConnected: boolean = false; public thumbSize: number = 0.3; // relative thumb size (0..1) public value: number = 0; // current scrollbar position (0..1) public orientation: boolean = false; // false=horizontal, true=vertical private clickRepeatDelay: number = 300; // click repetition delay time in ms private clickRepeatInterval: number = 100; // click repetition interval time in ms private defaultThumbMinSize: number = 25; // default for minimum thumb size in pixels private dragStartPos: number; // dragging start pointer position (clientX/Y) private dragStartValue: number; // dragging start scrollbar position private eventTimeoutId: NodeJS.Timeout | undefined; private pointerCaptureId: number | undefined; // `undefined` = no capture active private pointerCaptureElement: HTMLElement; // User interaction state: private thumbDragging: boolean; // true while user is dragging the thumb private button1Active: boolean; // true while user has pointer clicked down on button 1 private button2Active: boolean; // true while user has pointer clicked down on button 2 private troughActive: boolean; // true while user has pointer clicked down on trough public constructor(host: PlainScrollbar) { this.host = host; host.attachShadow({ mode: "open" }); const shadowRoot = host.shadowRoot!; shadowRoot.appendChild(scrollbarHtmlTemplate.content.cloneNode(true)); shadowRoot.adoptedStyleSheets = [scrollbarStyle]; this.root = shadowRoot.querySelector("#root")!; this.trough = shadowRoot.querySelector("#trough")!; this.button1 = shadowRoot.querySelector("#button1")!; this.button2 = shadowRoot.querySelector("#button2")!; this.thumb = shadowRoot.querySelector("#thumb")!; this.trough.addEventListener("pointerdown", this.onTroughPointerDown); this.trough.addEventListener("pointerup", this.onPointerUp); this.trough.addEventListener("pointercancel", this.onPointerUp); this.button1.addEventListener("pointerdown", (event: PointerEvent) => this.onButtonPointerDown(event, 1)); this.button1.addEventListener("pointerup", this.onPointerUp); this.button1.addEventListener("pointercancel", this.onPointerUp); this.button1.addEventListener("contextmenu", (e: Event) => e.preventDefault()); // to prevent popup on long touch this.button2.addEventListener("pointerdown", (event: PointerEvent) => this.onButtonPointerDown(event, 2)); this.button2.addEventListener("pointerup", this.onPointerUp); this.button2.addEventListener("pointercancel", this.onPointerUp); this.button2.addEventListener("contextmenu", (e: Event) => e.preventDefault()); // to prevent popup on long touch this.thumb.addEventListener("pointerdown", this.onThumbPointerDown); this.thumb.addEventListener("pointerup", this.onPointerUp); this.thumb.addEventListener("pointercancel", this.onPointerUp); this.thumb.addEventListener("pointermove", this.onThumbPointerMove); this.resetInteractionState(); } private resetInteractionState() { this.thumbDragging = false; this.button1Active = false; this.button2Active = false; this.troughActive = false; } public connectedCallback() { this.isConnected = true; this.resetInteractionState(); this.updateLayout(); this.updateStyle(); } public disconnectedCallback() { this.isConnected = false; this.resetInteractionState(); this.stopEventRepetition(); this.stopPointerCapture(); } public updateLayout() { if (!this.isConnected) { return; } this.root.classList.toggle("horizontal", !this.orientation); this.root.classList.toggle("vertical", this.orientation); this.thumb.style.display = (this.thumbSize == 0) ? "none" : ""; this.thumb.style.height = this.orientation ? percent(this.getEffectiveThumbSize()) : ""; this.thumb.style.width = this.orientation ? "" : percent(this.getEffectiveThumbSize()); this.thumb.style.top = ""; this.thumb.style.left = ""; this.updateThumbPosition(); } private updateStyle() { if (!this.isConnected) { return; } this.thumb.classList.toggle("active", this.thumbDragging); this.button1.classList.toggle("active", this.button1Active); this.button2.classList.toggle("active", this.button2Active); void this.troughActive; } // tslint:disable-line public updateThumbPosition() { const v = (1 - this.getEffectiveThumbSize()) * this.value; if (this.orientation) { this.thumb.style.top = percent(v); } else { this.thumb.style.left = percent(v); } } private getThroughSize(): number { return this.orientation ? this.trough.clientHeight : this.trough.clientWidth; } private computeThumbMoveValue(distancePixels: number): number { const troughSlidePixels = this.getThroughSize() * (1 - this.getEffectiveThumbSize()); if (troughSlidePixels < EPS) { return 0; } return distancePixels / troughSlidePixels; } public setThumbSize(newThumbSize: number) { const clippedNewThumbSize = Math.max(0, Math.min(1, newThumbSize)); if (clippedNewThumbSize == this.thumbSize) { return; } this.thumbSize = clippedNewThumbSize; this.updateLayout(); } private getThumbMinSize(): number { const s = this.getCssVar("--plain-scrollbar-thumb-min-size"); if (!s) { return this.defaultThumbMinSize; } const px = decodePxValue(s); if (!px) { return this.defaultThumbMinSize; } return px; } private getEffectiveThumbSize(): number { const thumbMinSize = this.getThumbMinSize(); const throughSize = this.getThroughSize(); if (!throughSize) { return this.thumbSize; } const min = Math.min(1, thumbMinSize / throughSize); return Math.max(min, this.thumbSize); } public setValue(newValue: number): boolean { const clippedNewValue = Math.max(0, Math.min(1, newValue)); if (clippedNewValue == this.value) { return false; } this.value = isNaN(clippedNewValue) ? 0 : clippedNewValue; this.updateThumbPosition(); return true; } public setOrientation(newOrientation: boolean): boolean { if (newOrientation == this.orientation) { return false; } this.orientation = newOrientation; this.updateLayout(); return true; } private getCssVar(varName: string): string | undefined { const s = getComputedStyle(this.root).getPropertyValue(varName); if (!s) { return null; } return s.trim(); } //--- Outgoing events ------------------------------------------------------- private fireEvent(eventSubType: string) { const event = new CustomEvent("scrollbar-input", { detail: eventSubType }); this.host.dispatchEvent(event); } private fireEventRepeatedly(eventSubType: string, repeatDelay: number, repeatInterval: number, repeatCounter = 0) { this.stopEventRepetition(); this.fireEvent(eventSubType); const delay = (repeatCounter == 0) ? repeatDelay : repeatInterval; const f = () => this.fireEventRepeatedly(eventSubType, repeatDelay, repeatInterval, repeatCounter + 1); this.eventTimeoutId = setTimeout(f, delay); } private stopEventRepetition() { if (this.eventTimeoutId) { clearTimeout(this.eventTimeoutId); this.eventTimeoutId = undefined; } } //--- Pointer input ---------------------------------------------------------- private startPointerCapture(element: HTMLElement, pointerId: number) { this.stopPointerCapture(); element.setPointerCapture(pointerId); this.pointerCaptureElement = element; this.pointerCaptureId = pointerId; } private stopPointerCapture() { if (!this.pointerCaptureId) { return; } this.pointerCaptureElement.releasePointerCapture(this.pointerCaptureId); this.pointerCaptureId = undefined; } private onTroughPointerDown = (event: PointerEvent) => { if (!this.isConnected || this.pointerCaptureId) { return; } if (!event.isPrimary || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.button != 0) { return; } const r = this.trough.getBoundingClientRect(); const pos = this.orientation ? event.clientY - r.top : event.clientX - r.left; const threshold = (this.orientation ? r.height : r.width) * (1 - this.getEffectiveThumbSize()) * this.value; const direction = pos > threshold; const eventSubType = direction ? "incrementLarge" : "decrementLarge"; this.troughActive = true; event.preventDefault(); this.startPointerCapture(this.trough, event.pointerId); this.fireEventRepeatedly(eventSubType, this.clickRepeatDelay, this.clickRepeatInterval); }; private onButtonPointerDown = (event: PointerEvent, buttonNo: number) => { if (!this.isConnected || this.pointerCaptureId) { return; } if (!event.isPrimary || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.button != 0) { return; } switch (buttonNo) { case 1: this.button1Active = true; break; case 2: this.button2Active = true; break; } const eventSubType = (buttonNo == 1) ? "decrementSmall" : "incrementSmall"; this.updateStyle(); event.preventDefault(); const buttonElement = (buttonNo == 1) ? this.button1 : this.button2; this.startPointerCapture(buttonElement, event.pointerId); this.fireEventRepeatedly(eventSubType, this.clickRepeatDelay, this.clickRepeatInterval); }; private onThumbPointerDown = (event: PointerEvent) => { if (!this.isConnected || this.pointerCaptureId) { return; } if (!event.isPrimary || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.button != 0) { return; } this.dragStartPos = this.orientation ? event.clientY : event.clientX; this.dragStartValue = this.value; this.thumbDragging = true; this.updateStyle(); event.preventDefault(); this.startPointerCapture(this.thumb, event.pointerId); }; private onThumbPointerMove = (event: PointerEvent) => { if (!this.isConnected) { return; } if (!event.isPrimary || !this.thumbDragging) { return; } const pos = this.orientation ? event.clientY : event.clientX; const deltaPixels = pos - this.dragStartPos; const deltaValue = this.computeThumbMoveValue(deltaPixels); const newValue = this.dragStartValue + deltaValue; event.preventDefault(); if (this.setValue(newValue)) { this.fireEvent("value"); } }; private onPointerUp = (event: PointerEvent) => { if (!this.isConnected) { return; } if (!event.isPrimary) { return; } this.resetInteractionState(); this.updateStyle(); this.stopEventRepetition(); this.stopPointerCapture(); event.preventDefault(); }; } // end class //--- Custom Element ----------------------------------------------------------- export class PlainScrollbar extends HTMLElement { private widget: Widget; public constructor() { super(); this.widget = new Widget(this); const value = parseFloat(this.getAttribute("value")); if (!isNaN(value)) this.widget.value = value if (this.hasOwnProperty('value')) { let value = this.value; delete this.value; if (!isNaN(value)) this.widget.value = value; } } /* @Override */ public connectedCallback() { this.widget.connectedCallback(); } /* @Override */ public disconnectedCallback() { this.widget.disconnectedCallback(); } //--- Element properties ---------------------------------------------------- // Size of the thumb, relative to the trough. // A value between 0 and 1. // 0 is used to hide the thumb. Small values greater than 0 are overridden by `plain-scrollbar-thumb-min-size`. public get thumbSize(): number { return this.widget.thumbSize; } public set thumbSize(v: number) { this.widget.setThumbSize(v); } // The current position of the scrollbar. // A value between 0 and 1. public get value(): number { return this.widget.value; } public set value(v: number) { this.widget.setValue(v); } // Orientation of the scrollbar. // "horizontal" or "vertical". public get orientation(): string { return formatOrientation(this.widget.orientation); } public set orientation(s: string) { if (this.widget.setOrientation(decodeOrientation(s))) { this.setAttribute("orientation", this.orientation); } } // Returns false=horizontal, true=vertical. public get orientationBoolean(): boolean { return this.widget.orientation; } //--- Element attributes ---------------------------------------------------- /* @Override */ public static get observedAttributes() { return ["orientation"]; } /* @Override */ public attributeChangedCallback(attrName: string, _oldValue: string | null, newValue: string | null) { switch (attrName) { case "orientation": { if (newValue) { this.widget.setOrientation(decodeOrientation(newValue)); } break; } } } } // end class //------------------------------------------------------------------------------ const EPS = 1E-9; const buttonSize = "var(--plain-scrollbar-button-size, 13px)"; const buttonPath = ''; const scrollbarStyle = css` :host { display: block; contain: content; background-color: #f8f8f8; border-style: solid; border-width: 1px; border-color: #dddddd; } #root { touch-action: none; user-select: none; box-sizing: border-box; position: relative; width: 100%; height: 100%; } #trough { position: absolute; } #root.vertical #trough { width: 100%; top: ${buttonSize}; bottom: ${buttonSize}; } #root.horizontal #trough { height: 100%; left: ${buttonSize}; right: ${buttonSize}; } #thumb { box-sizing: border-box; position: absolute; width: 100%; height: 100%; background-color: var(--plain-scrollbar-thumb-background-color, #f0f0f0); border-style: solid; border-width: var(--plain-scrollbar-thumb-border-width, 1px); border-color: var(--plain-scrollbar-thumb-border-color, #b8b8b8); border-radius: var(--plain-scrollbar-thumb-border-radius, 4px); transition: background-color 50ms linear; } #thumb:hover { background-color: var(--plain-scrollbar-thumb-background-color-hover, #e0e0e0); } #thumb.active { background-color: var(--plain-scrollbar-thumb-background-color-active, #c0c0c0); } #button1, #button2 { box-sizing: border-box; position: absolute; display: block; fill: var(--plain-scrollbar-button-color, #606060); } #root.vertical #button1 { top: 0; width: 100%; height: ${buttonSize}; } #root.vertical #button2 { bottom: 0; width: 100%; height: ${buttonSize}; } #root.horizontal #button1 { left: 0; height: 100%; width: ${buttonSize}; } #root.horizontal #button2 { right: 0; height: 100%; width: ${buttonSize}; } #upArrow, #downArrow, #leftArrow, #rightArrow { display: none; width: 100%; height: 100%; } #root.vertical #upArrow, #root.vertical #downArrow { display: block; } #root.horizontal #leftArrow, #root.horizontal #rightArrow { display: block; } #button1:hover, #button2:hover { background-color: var(--plain-scrollbar-button-color-hover, #e0e0e0); } #button1.active, #button2.active { background-color: var(--plain-scrollbar-button-color-active, #c0c0c0); } `; const scrollbarHtmlTemplate = html`
${buttonPath} ${buttonPath}
${buttonPath} ${buttonPath}
`; //------------------------------------------------------------------------------ function formatOrientation(b: boolean): string { return b ? "vertical" : "horizontal"; } function decodeOrientation(s: string): boolean { switch (s) { case "vertical": return true; case "horizontal": return false; default: throw new Error("Invalid orientation value \"" + s + "\"."); } } function percent(v: number): string { return (v * 100).toFixed(3) + "%"; } function decodePxValue(s: string): number | undefined { if (!s || !s.endsWith("px")) { return undefined; } return Number(s.substring(0, s.length - 2)); } customElements.define("node-projects-plain-scrollbar", PlainScrollbar); ================================================ FILE: packages/web-component-designer/src/elements/controls/SimpleSplitView.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` :host { display: block; } #split { position: relative; height: 100%; width: 100%; grid-template-rows: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px); grid-template-columns: 100%; display: grid; align-items: center; } :host([orientation="horizontal"]) #split { grid-template-rows: 100%; grid-template-columns: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px); } #splitter { user-select: none; -webkit-user-select: none; } :host([orientation="horizontal"]) > div > #splitter { cursor: ew-resize; width: 5px; height: 100%; } :host([orientation="vertical"]) > div > #splitter { cursor: ns-resize; height: 5px; width: 100%; }`; static override readonly template = html`
`; public static properties = { orientation: String } private _orientation: 'vertical' | 'horizontal' = 'vertical'; public get orientation() { return this._orientation; } public set orientation(value) { this._orientation = value; this.setAttribute('orientation', value); } constructor() { super(); this._restoreCachedInititalValues(); } ready() { this._parseAttributesToProperties(); this.setAttribute('orientation', this.orientation); const split = this._getDomElement("split"); const splitter = this._getDomElement("splitter"); let start: boolean = null; splitter.addEventListener('pointerdown', (e) => { splitter.setPointerCapture(e.pointerId); start = true; }); splitter.addEventListener('pointerup', (e) => { splitter.releasePointerCapture(e.pointerId); start = null; }); splitter.addEventListener('pointermove', (e) => { if (start !== null) { let splitValue = parseFloat(split.style.getPropertyValue('--split')); if (this.orientation === 'horizontal') splitValue += e.movementX * 100 / split.clientWidth; else splitValue += e.movementY * 100 / split.clientHeight; if (!isNaN(splitValue)) split.style.setProperty("--split", splitValue); } }); } } customElements.define('node-projects-simple-split-view', SimpleSplitView); ================================================ FILE: packages/web-component-designer/src/elements/controls/ThicknessEditor.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; export type ThicknessEditorValueChangedEventArgs = { newValue?: string, oldValue?: string }; export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend { public static override readonly style = css` :host { margin: 4px; margin-left: auto; margin-right: auto; } #container { display: grid; grid-template-columns: minmax(30px, 40px) minmax(30px, 60px) minmax(30px, 40px); grid-template-rows: auto; grid-template-areas: " . top ." "left middle right" " . bottom ."; column-gap: 2px; row-gap: 2px; } input { width: 20px; text-align: center; font-size: 10px; height: 20px; padding: 0; } #left { grid-area: left; justify-self: end; } #top { grid-area: top; align-self: end; justify-self: center; } #right { grid-area: right; justify-self: start; } #bottom { grid-area: bottom; align-self: start; justify-self: center; } #rect { grid-area: middle; border: 1px solid black; background: lightgray; } `; public static override readonly template = html`
`; private _leftInput: HTMLInputElement; private _topInput: HTMLInputElement; private _rightInput: HTMLInputElement; private _bottomInput: HTMLInputElement; private _valueLeft: string; public get valueLeft() { return this._valueLeft; } public set valueLeft(value) { const oldValue = this._valueLeft; this._valueLeft = value; if (oldValue !== value) { this._updateValue(); this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue }); } } public valueLeftChanged = new TypedEvent(); private _valueTop: string; public get valueTop() { return this._valueTop; } public set valueTop(value) { const oldValue = this._valueTop; this._valueTop = value; if (oldValue !== value) { this._updateValue(); this.valueTopChanged.emit({ newValue: value, oldValue: oldValue }); } } public valueTopChanged = new TypedEvent(); private _valueRight: string; public get valueRight() { return this._valueRight; } public set valueRight(value) { const oldValue = this._valueRight; this._valueRight = value; if (oldValue !== value) { this._updateValue(); this.valueRightChanged.emit({ newValue: value, oldValue: oldValue }); } } public valueRightChanged = new TypedEvent(); private _valueBottom: string; public get valueBottom() { return this._valueBottom; } public set valueBottom(value) { const oldValue = this._valueBottom; this._valueBottom = value; if (oldValue !== value) { this._updateValue(); this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue }); } } public valueBottomChanged = new TypedEvent(); public property: string; public unsetValue: string; _updateValue() { this._leftInput.value = this.valueLeft; this._topInput.value = this.valueTop; this._rightInput.value = this.valueRight; this._bottomInput.value = this._valueBottom; } ready() { this._parseAttributesToProperties(); this._leftInput = this._getDomElement('left'); this._topInput = this._getDomElement('top'); this._rightInput = this._getDomElement('right'); this._bottomInput = this._getDomElement('bottom'); this._leftInput.onkeyup = (e) => { if (e.key === 'Enter') this._valueLeft = this._leftInput.value }; this._topInput.onkeyup = (e) => { if (e.key === 'Enter') this._valueTop = this._topInput.value }; this._rightInput.onkeyup = (e) => { if (e.key === 'Enter') this._valueRight = this._rightInput.value }; this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter') this._valueBottom = this._bottomInput.value }; this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value; this._topInput.onblur = (e) => this._valueTop = this._topInput.value; this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value; this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value; this._updateValue(); } } customElements.define('node-projects-thickness-editor', ThicknessEditor); ================================================ FILE: packages/web-component-designer/src/elements/documentContainer.ts ================================================ import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce, TypedEvent } from "@node-projects/base-custom-webcomponent" import { DesignerTabControl } from './controls/DesignerTabControl.js'; import { DesignerView } from './widgets/designerView/designerView.js'; import { ServiceContainer } from './services/ServiceContainer.js'; import { InstanceServiceContainer } from './services/InstanceServiceContainer.js'; import { ICodeView } from './widgets/codeView/ICodeView.js'; import { IStringPosition } from './services/htmlWriterService/IStringPosition.js'; import { IDemoView } from './widgets/demoView/IDemoView.js'; import { IUiCommandHandler } from '../commandHandling/IUiCommandHandler.js'; import { IUiCommand } from '../commandHandling/IUiCommand.js'; import { IDisposable } from '../interfaces/IDisposable.js'; import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js"; import { ISelectionRefreshEvent } from './services/selectionService/ISelectionRefreshEvent.js'; import { SimpleSplitView } from './controls/SimpleSplitView.js'; import { IStylesheet } from "./services/stylesheetService/IStylesheetService.js"; import { sleep } from "./helper/Helper.js"; import { ExtensionType } from "./widgets/designerView/extensions/ExtensionType.js"; enum tabIndex { designer = 0, code = 1, split = 2, preview = 3 } export class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable { public designerView: DesignerView; public codeView: ICodeView & HTMLElement; public demoView: IDemoView & HTMLElement; public additionalData: any; private _firstLoad = true; private _stylesheetChangedEventRegistered: boolean; private _additionalStyle: string; public set additionalStyleString(style: string) { this._additionalStyle = style; this.designerView.additionalStyles = [cssFromString(style)]; }; public get additionalStyleString() { return this._additionalStyle; }; private _additionalStyles: CSSStyleSheet[]; public set additionalStyles(value: CSSStyleSheet[]) { this._additionalStyles = value; this.designerView.additionalStyles = this._additionalStyles; }; public get additionalStyles() { return this._additionalStyles; }; private _additionalStylesheets: IStylesheet[]; public set additionalStylesheets(stylesheets: IStylesheet[]) { this._additionalStylesheets = stylesheets; if (this.designerView.instanceServiceContainer.stylesheetService) { this.designerView.instanceServiceContainer.stylesheetService.setStylesheets(stylesheets); if (!this._stylesheetChangedEventRegistered) { this._stylesheetChangedEventRegistered = true; this.designerView.instanceServiceContainer.stylesheetService.stylesheetChanged.on(e => this.additionalStylesheetChanged.emit({ name: e.name, newStyle: e.newStyle, oldStyle: e.oldStyle, changeSource: e.changeSource })); } } }; public get additionalStylesheets() { return this._additionalStylesheets; }; public additionalStylesheetChanged = new TypedEvent<{ name: string, newStyle: string, oldStyle: string, changeSource: 'extern' | 'styleupdate' | 'undo' }>; get readOnly() { return this.designerView?.readOnly; } set readOnly(v) { if (this.designerView) this.designerView.readOnly = v; if (this.codeView) this.codeView.readOnly = v; } public onContentChanged = new TypedEvent<{ source: 'designer' | 'code' }>(); public onTabChanged = new TypedEvent<{ oldTab: 'designer' | 'code' | 'split' | 'preview', newTab: 'designer' | 'code' | 'split' | 'preview' }>(); private _contentChangeSource: 'designer' | 'code' = 'designer'; private _serviceContainer: ServiceContainer; private _content: string = ''; private _tabControl: DesignerTabControl; private _selectionPosition: IStringPosition; private _lastCodeSelectionKey: string; private _splitDiv: SimpleSplitView; private _designerDiv: HTMLDivElement; private _codeDiv: HTMLDivElement; private refreshInSplitViewDebounced: (...args: any) => any; private _disableChangeNotificationDesigner: boolean; private _disableChangeNotificationEditor: boolean; static override get style() { return css` div { height: 100%; display: flex; flex-direction: column; } node-projects-designer-view { height: 100%; overflow: hidden; } `; } constructor(serviceContainer: ServiceContainer, content?: string, useIframe: boolean = false) { super(); this.refreshInSplitViewDebounced = debounce(this.refreshInSplitView, 200) this._serviceContainer = serviceContainer; if (content != null) this._content = content; let div = document.createElement("div"); this._tabControl = new DesignerTabControl(); div.appendChild(this._tabControl); this.designerView = new DesignerView(useIframe); this.designerView.setAttribute('exportparts', 'canvas'); this.designerView.slot = 'top'; this._designerDiv = document.createElement("div"); this._tabControl.appendChild(this._designerDiv); this._designerDiv.appendChild(this.designerView); this._designerDiv.dataset.title = 'Designer'; this.designerView.initialize(this._serviceContainer); this.designerView.instanceServiceContainer.documentContainer = this; this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e)) this.designerView.instanceServiceContainer.selectionService.onSelectionRefresh.on(e => this.designerSelectionChanged(e)) this.designerView.instanceServiceContainer.onContentChanged.on(() => this.designerContentChanged()) this.codeView = new serviceContainer.config.codeViewWidget(); this.codeView.slot = 'bottom'; this.codeView.style.position = 'relative'; this._codeDiv = document.createElement("div"); this._tabControl.appendChild(this._codeDiv); this._codeDiv.style.position = 'relative'; this._codeDiv.appendChild(this.codeView); this._codeDiv.dataset.title = 'Code'; this.codeView.onTextChanged.on(text => { if (!this._disableChangeNotificationDesigner) { if (this._tabControl.selectedIndex === tabIndex.code || this._tabControl.selectedIndex === tabIndex.split) { this._disableChangeNotificationEditor = true; this._content = text; this.refreshInSplitViewDebounced(); } } }) this._splitDiv = new SimpleSplitView(); this._splitDiv.style.height = '100%'; this._splitDiv.dataset.title = 'Split'; this._tabControl.appendChild(this._splitDiv); if (serviceContainer.config.demoViewWidget) { this.demoView = new serviceContainer.config.demoViewWidget(); this.demoView.dataset.title = 'Preview'; this._tabControl.appendChild(this.demoView); } queueMicrotask(() => { this.shadowRoot.appendChild(div); this._tabControl.selectedIndex = tabIndex.designer; }); } async refreshInSplitView() { try { await this.updateDesignerHtml(); } catch (err) { console.error(err); } this._disableChangeNotificationEditor = false; } get currentView(): 'designer' | 'split' | 'code' | 'preview' { if (this._tabControl.selectedIndex == tabIndex.designer) return 'designer' if (this._tabControl.selectedIndex == tabIndex.split) return 'split' if (this._tabControl.selectedIndex == tabIndex.code) return 'code' if (this._tabControl.selectedIndex == tabIndex.preview) return 'preview' return null; } set currentView(view: 'designer' | 'split' | 'code' | 'preview') { if (view == 'designer') this._tabControl.selectedIndex = tabIndex.designer; if (view == 'split') this._tabControl.selectedIndex = tabIndex.split; if (view == 'code') this._tabControl.selectedIndex = tabIndex.code; if (view == 'preview') this._tabControl.selectedIndex = tabIndex.preview; } designerSelectionChanged(e: ISelectionChangedEvent | ISelectionRefreshEvent) { if (this._tabControl.selectedIndex === tabIndex.split) { let primarySelection = this.instanceServiceContainer.selectionService.primarySelection; if (primarySelection) { if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) { this._selectionPosition = this.instanceServiceContainer.selectionService.selectedPart?.textRange ?? this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection); if (this._selectionPosition) this.setCodeViewSelection(this._selectionPosition); this._selectionPosition = null; } } } } designerContentChanged() { //event wenn text geändert...... this.onContentChanged.emit({ source: this._contentChangeSource }); if (!this._disableChangeNotificationEditor) { this._disableChangeNotificationDesigner = true; if (this._tabControl.selectedIndex === tabIndex.code || this._tabControl.selectedIndex === tabIndex.split) { let primarySelection = this.instanceServiceContainer.selectionService.primarySelection; this._content = this.designerView.getDesignerHTML(); this.codeView.update(this._content, this.designerView.instanceServiceContainer); this._lastCodeSelectionKey = null; if (primarySelection) { if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) { this._selectionPosition = this.instanceServiceContainer.selectionService.selectedPart?.textRange ?? this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection); if (this._selectionPosition) this.setCodeViewSelection(this._selectionPosition); this._selectionPosition = null; } } } this._disableChangeNotificationDesigner = false; } } dispose(): void { if (this.designerView?.instanceServiceContainer?.collaborationService) { this.designerView.instanceServiceContainer.collaborationService.disconnect(); this.designerView.instanceServiceContainer.collaborationService.detachTransport(); } this.codeView.dispose(); this.demoView.dispose(); } executeCommand(command: IUiCommand) { if (this._tabControl.selectedIndex === tabIndex.designer || this._tabControl.selectedIndex === tabIndex.split) this.designerView.executeCommand(command); else if (this._tabControl.selectedIndex === tabIndex.code) this.codeView.executeCommand(command); else if (this._tabControl.selectedIndex === tabIndex.preview) this.demoView.executeCommand(command); } canExecuteCommand(command: IUiCommand) { if (this._tabControl.selectedIndex === tabIndex.designer || this._tabControl.selectedIndex === tabIndex.split) { if (this.designerView?.canExecuteCommand) return this.designerView.canExecuteCommand(command); } else if (this._tabControl.selectedIndex === tabIndex.code) { if (this.codeView?.canExecuteCommand) return this.codeView.canExecuteCommand(command); } else if (this._tabControl.selectedIndex === tabIndex.preview) { if (this.demoView?.canExecuteCommand) return this.demoView.canExecuteCommand(command); } return false; } async setContentAsync(value: string) { this._content = value; if (this._tabControl) { if (this._tabControl.selectedIndex === tabIndex.designer) await this.updateDesignerHtml(); else if (this._tabControl.selectedIndex === tabIndex.code) this.codeView.update(this._content, this.designerView.instanceServiceContainer); else if (this._tabControl.selectedIndex === tabIndex.split) { } else if (this._tabControl.selectedIndex === tabIndex.preview) this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString); } } set content(value: string) { this.setContentAsync(value); } get content() { if (this._tabControl) { if (this._tabControl.selectedIndex === tabIndex.designer) this._content = this.designerView.getDesignerHTML(); else if (this._tabControl.selectedIndex === tabIndex.code) this._content = this.codeView.getText(); return this._content; } return null; } ready() { this._tabControl.onSelectedTabChanged.on(i => { if (i.oldIndex === tabIndex.designer) { let primarySelection = this.instanceServiceContainer.selectionService.primarySelection; this._content = this.designerView.getDesignerHTML(); if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) { this._selectionPosition = this.instanceServiceContainer.selectionService.selectedPart?.textRange ?? this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection); } } else if (i.oldIndex === tabIndex.code) { this._content = this.codeView.getText(); } else if (i.oldIndex === tabIndex.split) { this._designerDiv.appendChild(this.designerView); this._codeDiv.appendChild(this.codeView); } else if (i.oldIndex === tabIndex.preview) { if (this.demoView?.stopDisplay) this.demoView.stopDisplay(); } if (i.newIndex === tabIndex.designer || i.newIndex === tabIndex.split) this.updateDesignerHtml(); if (i.newIndex === tabIndex.code || i.newIndex === tabIndex.split) { this.codeView.update(this._content, this.designerView.instanceServiceContainer); this._lastCodeSelectionKey = null; if (this._selectionPosition) { this.setCodeViewSelection(this._selectionPosition); sleep(20).then(x => { if (this._selectionPosition) this.setCodeViewSelection(this._selectionPosition); this._selectionPosition = null; }); } if (i.changedViaClick) { this.codeView.focusEditor(); } } if (i.newIndex === tabIndex.split) { this._splitDiv.appendChild(this.designerView); this._splitDiv.appendChild(this.codeView); } if (i.newIndex === tabIndex.preview) { this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString); } if (this._content) { this._firstLoad = false; } this.onTabChanged.emit({ oldTab: tabIndex[i.oldIndex], newTab: tabIndex[i.newIndex] }); }); if (this._content) { this.content = this._content; this._firstLoad = false; } } private async updateDesignerHtml() { if (this._firstLoad) return this.designerView.parseDesignerHTML(this._content, this._firstLoad); else { const html = this.designerView.getDesignerHTML(); if (html != this._content) { this._contentChangeSource = 'code'; await this.designerView.parseDesignerHTML(this._content, this._firstLoad); this._contentChangeSource = 'designer'; return; } else { this.instanceServiceContainer.undoService.clearTransactionstackIfNotEmpty(); this.designerView.designerCanvas.overlayLayer.removeAllOverlays(); this.designerView.designerCanvas.extensionManager.reapplyAllAppliedExtentions(null, [ExtensionType.Permanent, ExtensionType.Selection, ExtensionType.PrimarySelection, ExtensionType.PrimarySelectionContainer, ExtensionType.OnlyOneItemSelected, ExtensionType.MultipleItemsSelected]); } } } private setCodeViewSelection(position: IStringPosition) { if (!position) return; const key = `${position.start}:${position.length}`; if (this._lastCodeSelectionKey === key) return; this._lastCodeSelectionKey = key; this.codeView.setSelection(position); } public get instanceServiceContainer(): InstanceServiceContainer { return this.designerView.instanceServiceContainer; } } customElements.define("node-projects-document-container", DocumentContainer); ================================================ FILE: packages/web-component-designer/src/elements/helper/ArrangeHelper.ts ================================================ import { Orientation } from '../../enums/Orientation.js'; import { IDesignItem } from '../item/IDesignItem.js'; import { ChangeGroup } from '../services/undoService/ChangeGroup.js'; import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js'; export abstract class ArrangeHelper { public static arrangeElements(orientation: Orientation, designerCanvas: IDesignerCanvas, arrangeElements: IDesignItem[]) { switch (orientation) { case Orientation.TOP: { const grp = this.formGroup(ArrangeDirection.TOP, designerCanvas); const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element); const targetY = primaryCoordinates.y; for (let elem of arrangeElements) { let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element); if (targetY != selectedCoordinates.y) { let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element); if (elem.hasStyle('bottom') && !elem.hasStyle('top')) { let bottom = parent.y + parent.height - targetY - selectedCoordinates.height; this.arrange(elem, 'bottom', bottom + "px"); } else { let top = targetY - parent.y; this.arrange(elem, 'top', top + "px"); } } } grp.commit(); break; } case Orientation.BOTTOM: { const grp = this.formGroup(ArrangeDirection.BOTTOM, designerCanvas); const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element); const targetBottom = primaryCoordinates.y + primaryCoordinates.height; for (let elem of arrangeElements) { let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element); if (targetBottom != selectedCoordinates.y + selectedCoordinates.height) { let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element); if (elem.hasStyle('bottom') && !elem.hasStyle('top')) { let bottom = parent.y + parent.height - targetBottom; this.arrange(elem, 'bottom', bottom + "px"); } else { let top = targetBottom - selectedCoordinates.height - parent.y; this.arrange(elem, 'top', top + "px"); } } } grp.commit(); break; } case Orientation.LEFT: { const grp = this.formGroup(ArrangeDirection.LEFT, designerCanvas); const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element); const targetX = primaryCoordinates.x; for (let elem of arrangeElements) { let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element); if (targetX != selectedCoordinates.x) { let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element); if (elem.hasStyle('right') && !elem.hasStyle('left')) { let right = parent.x + parent.width - targetX - selectedCoordinates.width; this.arrange(elem, 'right', right + "px"); } else { let left = targetX - parent.x; this.arrange(elem, 'left', left + "px"); } } } grp.commit(); break; } case Orientation.RIGHT: { const grp = this.formGroup(ArrangeDirection.RIGHT, designerCanvas); const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element); const targetRight = primaryCoordinates.x + primaryCoordinates.width; for (let elem of arrangeElements) { let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element); if (targetRight != selectedCoordinates.x + selectedCoordinates.width) { let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element); if (elem.hasStyle('right') && !elem.hasStyle('left')) { let right = parent.x + parent.width - targetRight; this.arrange(elem, 'right', right + "px"); } else { let left = targetRight - selectedCoordinates.width - parent.x; this.arrange(elem, 'left', left + "px"); } } } grp.commit(); break; } case Orientation.VERTICAL_CENTER: { const grp = this.formGroup(ArrangeDirection.VERTICAL_CENTER, designerCanvas); const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element); const targetCenterY = primaryCoordinates.y + primaryCoordinates.height / 2; for (let elem of arrangeElements) { let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element); if (targetCenterY != selectedCoordinates.y + selectedCoordinates.height / 2) { let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element); if (elem.hasStyle('bottom') && !elem.hasStyle('top')) { let bottom = parent.y + parent.height - targetCenterY - selectedCoordinates.height / 2; this.arrange(elem, 'bottom', bottom + "px"); } else { let top = targetCenterY - selectedCoordinates.height / 2 - parent.y; this.arrange(elem, 'top', top + "px"); } } } grp.commit(); break; } case Orientation.HORIZONTAL_CENTER: { const grp = this.formGroup(ArrangeDirection.HORIZONTAL_CENTER, designerCanvas); const primaryCoordinates = designerCanvas.getNormalizedElementCoordinates(arrangeElements[0].element); const targetCenterX = primaryCoordinates.x + primaryCoordinates.width / 2; for (let elem of arrangeElements) { let selectedCoordinates = designerCanvas.getNormalizedElementCoordinates(elem.element); if (targetCenterX != selectedCoordinates.x + selectedCoordinates.width / 2) { let parent = designerCanvas.getNormalizedElementCoordinates(elem.parent.element); if (elem.hasStyle('right') && !elem.hasStyle('left')) { let right = parent.x + parent.width - targetCenterX - selectedCoordinates.width / 2; this.arrange(elem, 'right', right + "px"); } else { let left = targetCenterX - selectedCoordinates.width / 2 - parent.x; this.arrange(elem, 'left', left + "px"); } } } grp.commit(); break; } } } private static arrange(element: IDesignItem, attribut: string, value: string) { element.setStyle(attribut, value); } private static formGroup(name: string, designerCanvas: IDesignerCanvas): ChangeGroup { return designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup(name); } } enum ArrangeDirection { TOP = 'arrangeTop', RIGHT = 'arrangeRight', BOTTOM = 'arrangeBottom', LEFT = 'arrangeLeft', HORIZONTAL_CENTER = 'arrangeHorizontalCenter', VERTICAL_CENTER = 'arrangeVerticalCenter', } ================================================ FILE: packages/web-component-designer/src/elements/helper/Browser.ts ================================================ export const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); ================================================ FILE: packages/web-component-designer/src/elements/helper/ClipboardHelper.ts ================================================ export async function copyTextToClipboard(text) { copyToClipboard([['text/plain', text]]); } //used, so you could copy internal if you have no clipboard access let internalClipboard = null; export async function copyToClipboard(items: [format: string, data: string][]) { if (navigator.clipboard) { try { let data = []; for (let n of items) { data.push(new ClipboardItem({ [n[0]]: new Blob([n[1]], { type: n[0] }) })); } await navigator.clipboard.write(data); } catch (err) { await navigator.clipboard.writeText(items[0][1]); internalClipboard = items[0][1]; } console.info('Copy to clipboard successful'); } else { let activeElement: HTMLElement = document.activeElement; while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement; internalClipboard = items[0][1]; const textArea = document.createElement('textarea'); textArea.style.position = 'fixed'; textArea.style.top = '0'; textArea.style.left = '0'; textArea.style.width = '2em'; textArea.style.height = '2em'; textArea.style.padding = '0'; textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; textArea.style.background = 'transparent'; textArea.value = items[0][1]; document.body.appendChild(textArea); textArea.select(); try { document.execCommand('copy'); } catch (err) { try { document.execCommand('copy'); } catch (err) { console.error(err); } } document.body.removeChild(textArea); activeElement.focus() } } export async function getTextFromClipboard(): Promise { if (navigator.clipboard) { return new Promise(async (resolve, reject) => { const clipText = await navigator.clipboard.readText(); resolve(clipText); }); } else { return new Promise(async (resolve, reject) => { const textArea = document.createElement('textarea'); textArea.style.position = 'fixed'; textArea.style.top = '0'; textArea.style.left = '0'; textArea.style.width = '2em'; textArea.style.height = '2em'; textArea.style.padding = '0'; textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; textArea.style.background = 'transparent'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); document.execCommand('paste'); let value = textArea.value; if (!value) value = internalClipboard; document.body.removeChild(textArea); resolve(value); }); } } export async function getFromClipboard() { if (navigator.clipboard) { return await navigator.clipboard.read(); } else { return null; } } ================================================ FILE: packages/web-component-designer/src/elements/helper/CssAttributeParser.ts ================================================ enum Token { Name, Value, InQuote } export class CssEntry { constructor(name: string, value: string, important: boolean) { this.name = name.trim(); this.value = value.trim(); this.important = important; } name: string; value: string; important: boolean; } export class CssAttributeParser { entries: CssEntry[] = []; public parse(text: string, quoteType: string = '\'') { this.entries = []; let name = ''; let value = ''; let token = Token.Name; for (let n = 0; n < text.length; n++) { let c = text[n]; if (token === Token.Name) { if (c === ':') token = Token.Value; else if (c === ';') { name = ''; } else name += c; } else if (token === Token.Value) { if (c === ';') { const entry = this.createEntry(name, value); this.entries.push(entry); name = ''; value = ''; token = Token.Name; } else { if (c === quoteType) { token = Token.InQuote; } value += c; } } else if (token === Token.InQuote) { if (c === '\\') { value += c; n++; c = text[n]; value += c; } else if (c === quoteType) { value += c; token = Token.Value; } else { value += c; } } } if (name.trim() !== '') { this.entries.push(this.createEntry(name, value)); } } private createEntry(name: string, value: string) { const match = value.match(/\s*!\s*important\s*$/i); if (!match) return new CssEntry(name, value, false); return new CssEntry(name, value.substring(0, match.index), true); } } ================================================ FILE: packages/web-component-designer/src/elements/helper/CssCombiner.ts ================================================ export class CssCombiner { private static _helperElement = document.createElement('div'); static combine(styles: Map, globalStyles?: Map) { CssCombiner.applyStylesToHelper(styles); CssCombiner.combineBorder(styles); CssCombiner.combineMargin(styles); CssCombiner.combinePadding(styles); CssCombiner.combineInset(styles); CssCombiner.combineBackground(styles); CssCombiner.combineFont(styles); styles = CssCombiner.combineBrowserSupportedShorthands(styles); if (globalStyles) { for (let g of globalStyles) { if (styles.has(g[0])) { if (styles.get(g[0]) === g[1]) styles.delete(g[0]); } } } return styles; } private static applyStylesToHelper(styles: Map) { let e = CssCombiner._helperElement; e.setAttribute('style', ''); for (let s of styles) { if (s[0].startsWith('--') || s[0].includes('-')) e.style.setProperty(s[0], s[1]); else (e.style)[s[0]] = s[1]; } return e; } private static combineBrowserSupportedShorthands(styles: Map) { const originalNormalizedValues = CssCombiner.getNormalizedStyleValues(styles); let combinedStyles = new Map(styles); while (true) { const candidateStyles = CssCombiner.parseStyleDeclarationList(CssCombiner.applyStylesToHelper(combinedStyles).style.cssText); let bestCandidate: Map | null = null; let bestSavings = 0; for (let candidate of candidateStyles) { const coverage = CssCombiner.getCandidateCoverage(combinedStyles, originalNormalizedValues, candidate[0], candidate[1]); if (coverage.length === 0) continue; let tentativeStyles = new Map(combinedStyles); for (let coveredStyle of coverage) tentativeStyles.delete(coveredStyle); tentativeStyles.set(candidate[0], candidate[1]); const savings = CssCombiner.getSerializedSize(combinedStyles) - CssCombiner.getSerializedSize(tentativeStyles); if (savings <= 0) continue; if (!CssCombiner.matchesNormalizedStyleValues(tentativeStyles, originalNormalizedValues)) continue; if (savings > bestSavings) { bestSavings = savings; bestCandidate = tentativeStyles; } } if (!bestCandidate) return combinedStyles; combinedStyles = bestCandidate; } } private static getNormalizedStyleValues(styles: Map) { const element = CssCombiner.applyStylesToHelper(styles); const normalizedValues = new Map(); for (let style of styles) normalizedValues.set(style[0], CssCombiner.readStyleValue(element.style, style[0])); return normalizedValues; } private static getCandidateCoverage(styles: Map, originalNormalizedValues: Map, candidateName: string, candidateValue: string) { const element = CssCombiner.applyStylesToHelper(new Map([[candidateName, candidateValue]])); const coverage: string[] = []; for (let style of styles) { const originalValue = originalNormalizedValues.get(style[0]); if (!originalValue) continue; if (CssCombiner.readStyleValue(element.style, style[0]) === originalValue) coverage.push(style[0]); } return coverage; } private static matchesNormalizedStyleValues(styles: Map, originalNormalizedValues: Map) { const element = CssCombiner.applyStylesToHelper(styles); for (let normalizedValue of originalNormalizedValues) { if (CssCombiner.readStyleValue(element.style, normalizedValue[0]) !== normalizedValue[1]) return false; } return true; } private static readStyleValue(style: CSSStyleDeclaration, name: string) { if (name.startsWith('--') || name.includes('-')) return style.getPropertyValue(name).trim(); return String((style)[name] ?? '').trim(); } private static getSerializedSize(styles: Map) { let size = 0; for (let style of styles) size += style[0].length + style[1].length + 2; return size; } private static parseStyleDeclarationList(cssText: string) { let styles = new Map(); let start = 0; let quote: string | null = null; let parenthesisDepth = 0; for (let i = 0; i < cssText.length; i++) { const c = cssText[i]; if (quote) { if (c === quote && cssText[i - 1] !== '\\') quote = null; continue; } if (c === '"' || c === '\'') { quote = c; continue; } if (c === '(') { parenthesisDepth++; continue; } if (c === ')' && parenthesisDepth > 0) { parenthesisDepth--; continue; } if (c === ';' && parenthesisDepth === 0) { CssCombiner.addStyleDeclaration(styles, cssText.substring(start, i)); start = i + 1; } } CssCombiner.addStyleDeclaration(styles, cssText.substring(start)); return styles; } private static addStyleDeclaration(styles: Map, declaration: string) { const trimmedDeclaration = declaration.trim(); if (!trimmedDeclaration) return; let quote: string | null = null; let parenthesisDepth = 0; for (let i = 0; i < trimmedDeclaration.length; i++) { const c = trimmedDeclaration[i]; if (quote) { if (c === quote && trimmedDeclaration[i - 1] !== '\\') quote = null; continue; } if (c === '"' || c === '\'') { quote = c; continue; } if (c === '(') { parenthesisDepth++; continue; } if (c === ')' && parenthesisDepth > 0) { parenthesisDepth--; continue; } if (c === ':' && parenthesisDepth === 0) { const name = trimmedDeclaration.substring(0, i).trim(); const value = trimmedDeclaration.substring(i + 1).trim(); if (name) styles.set(name, value); return; } } } private static combineBorder(styles: Map) { if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left-style')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right-style')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top-style')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom-style')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left-color')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right-color')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top-color')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom-color')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left-width')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right-width')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top-width')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom-width')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-width')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-style')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-color')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-width')) return; let e = CssCombiner._helperElement; let bls = e.style.borderLeftStyle; let blc = e.style.borderLeftColor; if (bls && blc && e.style.borderRightStyle === bls && e.style.borderTopStyle === bls && e.style.borderBottomStyle === bls && e.style.borderRightColor === blc && e.style.borderTopColor === blc && e.style.borderBottomColor === blc) { let btw = e.style.borderTopWidth; let brw = e.style.borderRightWidth; let bbw = e.style.borderBottomWidth; let blw = e.style.borderLeftWidth; styles.delete('border-left-style'); styles.delete('border-right-style'); styles.delete('border-top-style'); styles.delete('border-bottom-style'); styles.delete('border-left-color'); styles.delete('border-right-color'); styles.delete('border-top-color'); styles.delete('border-bottom-color'); styles.delete('border-left-width'); styles.delete('border-right-width'); styles.delete('border-top-width'); styles.delete('border-bottom-width'); styles.delete('border-width'); styles.delete('border-style'); styles.delete('border-color'); styles.delete('border-top'); styles.delete('border-right'); styles.delete('border-left'); styles.delete('border-bottom'); if (e.style.borderRightWidth == blw && e.style.borderTopWidth === blw && e.style.borderBottomWidth === blw) { styles.set('border', blw + ' ' + bls + ' ' + blc); } else { styles.set('border', bls + ' ' + blc); if (btw === bbw && brw === blw) { styles.set('border-width', btw + ' ' + brw); } else { styles.set('border-width', btw + ' ' + brw + ' ' + bbw + ' ' + blw); } } } if (e.style.borderImageSource === 'initial') styles.delete('border-image-source'); if (e.style.borderImageSlice === 'initial') styles.delete('border-image-slice'); if (e.style.borderImageWidth === 'initial') styles.delete('border-image-width'); if (e.style.borderImageOutset === 'initial') styles.delete('border-image-outset'); if (e.style.borderImageRepeat === 'initial') styles.delete('border-image-repeat'); } private static combineMargin(styles: Map) { if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-top')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-right')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-bottom')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-left')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin')) return; let e = CssCombiner._helperElement; if (e.style.marginTop && e.style.marginRight && e.style.marginBottom && e.style.marginLeft) { styles.delete('margin-top'); styles.delete('margin-right'); styles.delete('margin-bottom'); styles.delete('margin-left'); if (e.style.marginTop == e.style.marginRight && e.style.marginTop == e.style.marginBottom && e.style.marginTop == e.style.marginLeft) { styles.set('margin', e.style.marginTop); } else styles.set('margin', e.style.marginTop + ' ' + e.style.marginRight + ' ' + e.style.marginBottom + ' ' + e.style.marginLeft); } } private static combinePadding(styles: Map) { if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-top')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-right')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-bottom')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-left')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding')) return; let e = CssCombiner._helperElement; if (e.style.paddingTop && e.style.paddingRight && e.style.paddingBottom && e.style.paddingLeft) { styles.delete('padding-top'); styles.delete('padding-right'); styles.delete('padding-bottom'); styles.delete('padding-left'); if (e.style.paddingTop == e.style.paddingRight && e.style.paddingTop == e.style.paddingBottom && e.style.paddingTop == e.style.paddingLeft) { styles.set('padding', e.style.paddingTop); } else styles.set('padding', e.style.paddingTop + ' ' + e.style.paddingRight + ' ' + e.style.paddingBottom + ' ' + e.style.paddingLeft); } } private static combineInset(styles: Map) { if (!CssCombiner.checkIfStyleIsCombinable(styles, 'top')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'right')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'bottom')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'left')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'inset')) return; let e = CssCombiner._helperElement; if (e.style.top && e.style.right && e.style.bottom && e.style.left) { styles.delete('top'); styles.delete('right'); styles.delete('bottom'); styles.delete('left'); styles.set('inset', e.style.top + ' ' + e.style.right + ' ' + e.style.bottom + ' ' + e.style.left); } } private static combineBackground(styles: Map) { if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-image')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-position')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-position-x')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-position-y')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-size')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-repeat')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-repeat-x')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-repeat-y')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-attachment')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-origin')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-clip')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-color')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background')) return; let e = CssCombiner._helperElement; styles.delete('background-image'); styles.delete('background-position'); styles.delete('background-position-x'); //TODO styles.delete('background-position-y'); //TODO styles.delete('background-size'); styles.delete('background-repeat'); styles.delete('background-repeat-x'); //TODO styles.delete('background-repeat-y'); //TODO styles.delete('background-attachment'); styles.delete('background-origin'); styles.delete('background-clip'); styles.delete('background-color'); styles.delete('background'); let background = ''; if (e.style.backgroundImage && e.style.backgroundImage !== 'initial') background += (background === '' ? '' : ' ') + e.style.backgroundImage; if (e.style.backgroundPosition && e.style.backgroundPosition !== 'initial') background += (background === '' ? '' : ' ') + e.style.backgroundPosition; if (e.style.backgroundSize && e.style.backgroundSize !== 'initial') background += (background === '' ? '' : ' / ') + e.style.backgroundSize; if (e.style.backgroundRepeat && e.style.backgroundRepeat !== 'initial') background += (background === '' ? '' : ' ') + e.style.backgroundRepeat; if (e.style.backgroundAttachment && e.style.backgroundAttachment !== 'initial') background += (background === '' ? '' : ' ') + e.style.backgroundAttachment; if (e.style.backgroundOrigin && e.style.backgroundOrigin !== 'initial') background += (background === '' ? '' : ' ') + e.style.backgroundOrigin; if (e.style.backgroundClip && e.style.backgroundClip !== 'initial') background += (background === '' ? '' : ' ') + e.style.backgroundClip; if (e.style.backgroundColor && e.style.backgroundColor !== 'initial') background += (background === '' ? '' : ' ') + e.style.backgroundColor; if (background) styles.set('background', background); } private static combineFont(styles: Map) { if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-style')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-weight')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-size')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'line-height')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-family')) return; if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font')) return; let e = CssCombiner._helperElement; if (e.style.fontFamily) { styles.delete('font-style'); styles.delete('font-weight'); styles.delete('font-size'); styles.delete('line-height'); styles.delete('font-family'); styles.delete('font'); let font = ''; if (e.style.fontStyle) font += (font === '' ? '' : ' ') + e.style.fontStyle; if (e.style.fontWeight) font += (font === '' ? '' : ' ') + e.style.fontWeight; if (e.style.fontSize) font += (font === '' ? '' : ' ') + e.style.fontSize; if (e.style.lineHeight) font += '/' + e.style.lineHeight; if (e.style.fontFamily) font += (font === '' ? '' : ' ') + e.style.fontFamily; styles.set('font', font); } } private static checkIfStyleIsCombinable(styles: Map, name: string) { if (styles.has(name)) { const st = styles.get(name); if (typeof st == 'string') { if (st.startsWith('var(')) return false; return true; } return false; } return true; } } ================================================ FILE: packages/web-component-designer/src/elements/helper/CssImportant.ts ================================================ export function splitCssImportant(value: string): { value: string, important: boolean } { const match = value.match(/\s*!\s*important\s*$/i); if (!match) return { value, important: false }; return { value: value.substring(0, match.index).trimEnd(), important: true }; } export function appendCssImportant(value: string, important: boolean) { if (!important) return value; return value + ' !important'; } ================================================ FILE: packages/web-component-designer/src/elements/helper/CssUnitConverter.ts ================================================ //unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh, vi, ic, ric const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'fr']; const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i'); export function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'height'): number { if (!cssValue) return null; const supportedUnits = { // Absolute sizes 'px': value => value, 'cm': value => value * 38, 'mm': value => value * 3.8, 'q': value => value * 0.95, 'in': value => value * 96, 'pc': value => value * 16, 'pt': value => value * 1.333333, // Relative sizes 'rem': value => value * parseFloat(getComputedStyle(document.documentElement).fontSize), 'em': value => value * parseFloat(getComputedStyle(target).fontSize), 'vw': value => value / 100 * window.innerWidth, 'vh': value => value / 100 * window.innerHeight, 'vmin': value => value / 100 * (window.innerHeight < window.innerWidth ? window.innerHeight : window.innerWidth), 'vmax': value => value / 100 * (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth), 'lh': value => value * parseFloat(getComputedStyle(target).lineHeight), 'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight), '%': value => value / 100 * (percentTarget == 'height' ? getOriginalSizeBeforeTransformation(target).height : getOriginalSizeBeforeTransformation(target).width), /*TODO: container units //find parent with computed style where container-type is inline-size or size (regarding to query type) //use this size for calculation 'cqw': 'cqh': 'cqi': 'cqb': 'cqmin': 'cqmax': */ // Times 'ms': value => value, 's': value => value * 1000, // Angles 'deg': value => value, 'rad': value => value * (180 / Math.PI), 'grad': value => value * (180 / 200), 'turn': value => value * 360 }; // If is a match, return example: [ "-2.75rem", "-2.75", "rem" ] const matches = cssValue.trim().match(pattern); if (matches) { const value = Number(matches[1]); const unit = matches[2].toLowerCase(); // Sanity check, make sure unit conversion function exists if (unit in supportedUnits) { return supportedUnits[unit](value); } } //@ts-ignore return cssValue; } export function getCssUnit(cssValue: string) { const matches = cssValue.trim().match(pattern); if (matches) return matches[2].toLowerCase(); return null; } export function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string, roundFunc?: (val: number) => string): string { if (!cssValue) return null; const supportedUnits = { // Absolute sizes 'px': value => value, 'cm': value => value / 38, 'mm': value => value / 3.8, 'q': value => value / 0.95, 'in': value => value / 96, 'pc': value => value / 16, 'pt': value => value / 1.333333, // Relative sizes 'rem': value => value / parseFloat(getComputedStyle(document.documentElement).fontSize), 'em': value => value / parseFloat(getComputedStyle(target).fontSize), 'vw': value => value * 100 / window.innerWidth, 'vh': value => value * 100 / window.innerHeight, 'vmin': value => value * 100 / (window.innerHeight < window.innerWidth ? window.innerHeight : window.innerWidth), 'vmax': value => value * 100 / (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth), 'lh': value => value / parseFloat(getComputedStyle(target).lineHeight), 'rlh': value => value / parseFloat(getComputedStyle(document.documentElement).lineHeight), '%': value => value * 100 / (percentTarget == 'height' ? getOriginalSizeBeforeTransformation(target).height : getOriginalSizeBeforeTransformation(target).width), // Times 'ms': value => value, 's': value => value / 1000, // Angles 'deg': value => value, 'rad': value => value / (180 / Math.PI), 'grad': value => value / (180 / 200), 'turn': value => value / 360 }; if (typeof cssValue == 'string') cssValue = convertCssUnitToPixel(cssValue, target, percentTarget); if (unit in supportedUnits) { const val = supportedUnits[unit](cssValue); if (roundFunc) return roundFunc(val) + unit return val + unit; } if (roundFunc) return roundFunc(cssValue); return cssValue; } function getOriginalSizeBeforeTransformation(element: HTMLElement): { width: number, height: number } { return { width: element.offsetWidth, height: element.offsetHeight }; } export function splitCssGridColumnSizes(sizes: String) { const parts = sizes.split(' '); const ret: string[] = []; for (let i = 0; i < parts.length; i++) { let p = parts[i]; if (p.startsWith('repeat(')) { while (!p.includes(")")) { i++; if (!parts[i]) continue; p += parts[i]; } } ret.push(p); } return ret; } export function getExpandedCssGridColumnSizes(sizes: String) { const parts = splitCssGridColumnSizes(sizes); const ret: string[] = []; for (let p of parts) { if (p.startsWith('repeat(')) { const prt = p.split(','); for (let i = 0; i < parseInt(prt[0].substring(7)); i++) ret.push(prt[1].substring(0, prt[1].length - 1)); } else ret.push(p); } return ret.map(x => getCssUnit(x)); } ================================================ FILE: packages/web-component-designer/src/elements/helper/DesignerStylesheetPatcher.ts ================================================ export interface IDesignerStylesheetPatchAttributes { forceHoverAttributeName: string; forceActiveAttributeName: string; forceVisitedAttributeName: string; forceFocusAttributeName: string; forceFocusWithinAttributeName: string; forceFocusVisibleAttributeName: string; } export function patchStylesheetSelectorForDesigner(text: string, attributes: IDesignerStylesheetPatchAttributes) { return text .replaceAll(/:root\b/g, ':host') .replaceAll(':focus-within', '[' + attributes.forceFocusWithinAttributeName + ']') .replaceAll(':focus-visible', '[' + attributes.forceFocusVisibleAttributeName + ']') .replaceAll(':hover', '[' + attributes.forceHoverAttributeName + ']') .replaceAll(':active', '[' + attributes.forceActiveAttributeName + ']') .replaceAll(':visited', '[' + attributes.forceVisitedAttributeName + ']') .replaceAll(':focus', '[' + attributes.forceFocusAttributeName + ']'); } ================================================ FILE: packages/web-component-designer/src/elements/helper/ElementHelper.ts ================================================ import { IPoint } from '../../interfaces/IPoint.js'; import { IRect } from '../../interfaces/IRect.js'; import { IDesignItem } from '../item/IDesignItem.js'; import { NodeType } from '../item/NodeType.js'; import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js'; export function inDesigner(element: Element): boolean { let node = element.getRootNode(); if ((node)?.host?.localName == "node-projects-designer-canvas") return true; return false; } export function newElementFromString(text, document: Document): Element { const range = document.createRange(); //@ts-ignore const fragment = range.createContextualFragment(text, { includeShadowRoots: true }); return fragment.firstChild as Element; } export enum ElementDisplayType { none, inline, block, } export function instanceOf(node: any, fnc: T): node is T { if (node instanceof fnc || node instanceof (node.ownerDocument.defaultView ?? window)[fnc.name]) return true; return false; } export function instanceOfAny(node: Node, ...fnc: Function[]) { for (const f of fnc) if (node instanceof f || node instanceof (node.ownerDocument.defaultView ?? window)[f.name]) return true; return false; } export function isInline(element: HTMLElement): boolean { if (element == null) return false; if (instanceOfAny(element, SVGElement, HTMLHtmlElement, HTMLHeadElement, HTMLBodyElement, HTMLSelectElement, HTMLOptionElement)) return false; return (element.ownerDocument.defaultView ?? window).getComputedStyle(element).display.startsWith('inline'); } export function isInlineAfter(element: HTMLElement): boolean { if (element == null) return false; if (instanceOfAny(element, SVGElement, HTMLHtmlElement, HTMLHeadElement, HTMLBodyElement, HTMLSelectElement, HTMLOptionElement)) return false; return (element.ownerDocument.defaultView ?? window).getComputedStyle(element).display.startsWith('inline'); } export function getElementDisplaytype(element: HTMLElement): ElementDisplayType { if (instanceOfAny(element, SVGElement, HTMLHtmlElement, HTMLHeadElement, HTMLBodyElement)) return ElementDisplayType.block; if (instanceOf(element, MathMLElement)) return ElementDisplayType.block; const display = (element.ownerDocument.defaultView ?? window).getComputedStyle(element).display; return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block; } export function isEmptyTextNode(node: Node): boolean { return node.textContent.trim() == '' && node.textContent.indexOf('\xa0' /*   */) < 0; } export function getActiveElement(): Element { let activeElement = document.activeElement; let lastActive = null; while (activeElement != lastActive) { lastActive = activeElement; if (activeElement.shadowRoot != null && activeElement.shadowRoot.activeElement) activeElement = activeElement.shadowRoot.activeElement; } return activeElement; } export function getElementOffsetsInContainer(element: Element) { if (instanceOf(element, HTMLElement)) { //@ts-ignore return { x: element.offsetLeft, y: element.offsetTop }; } else { //const cs = (element.ownerDocument.defaultView ?? window).getComputedStyle(element); //todo: this will not work correctly with transformed SVGs or MathML Elements const r1 = getBoundingClientRectAlsoForDisplayContents(element); const r2 = getBoundingClientRectAlsoForDisplayContents(element.parentElement); return { x: r1.x - r2.x, y: r1.y - r2.y } } } export function getBoundingClientRectAlsoForDisplayContents(element: Element): DOMRect { let r = element.getBoundingClientRect(); if (r.width == 0 && r.height == 0) { const cs = (element.ownerDocument.defaultView ?? window).getComputedStyle(element); if (cs.display == 'contents') { if (element.shadowRoot) { for (let c of element.shadowRoot.children) { const rc = getBoundingClientRectAlsoForDisplayContents(c); r = new DOMRect( Math.min(r.x, rc.x), Math.min(r.y, rc.y), Math.max(r.width, rc.width), Math.max(r.height, rc.height) ); } } else { for (let c of element.children) { const rc = getBoundingClientRectAlsoForDisplayContents(c); r = new DOMRect( Math.min(r.x, rc.x), Math.min(r.y, rc.y), Math.max(r.width, rc.width), Math.max(r.height, rc.height) ); } } } } return r; } export function getElementZoomFactor(element: Element): number { const zoom = (element.ownerDocument.defaultView ?? window).getComputedStyle(element).zoom; if (!zoom || zoom === 'normal') return 1; if (zoom.endsWith('%')) { const percentage = parseFloat(zoom); return Number.isFinite(percentage) && percentage > 0 ? percentage / 100 : 1; } const value = parseFloat(zoom); return Number.isFinite(value) && value > 0 ? value : 1; } export function getContentBoxContentOffsets(element): IPoint { let xOffset = parseInt(getComputedStyle(element).paddingLeft.replace('px', '')) + parseInt(getComputedStyle(element).marginLeft.replace('px', '')) + parseInt(getComputedStyle(element).borderLeft.replace('px', '')) + parseInt(getComputedStyle(element).paddingRight.replace('px', '')) + parseInt(getComputedStyle(element).marginRight.replace('px', '')) + parseInt(getComputedStyle(element).borderRight.replace('px', '')); let yOffset = parseInt(getComputedStyle(element).paddingTop.replace('px', '')) + parseInt(getComputedStyle(element).marginTop.replace('px', '')) + parseInt(getComputedStyle(element).borderTop.replace('px', '')) + parseInt(getComputedStyle(element).paddingBottom.replace('px', '')) + parseInt(getComputedStyle(element).marginBottom.replace('px', '')) + parseInt(getComputedStyle(element).borderBottom.replace('px', '')); return { x: xOffset, y: yOffset }; } export function calculateOuterRect(designItems: IDesignItem[], designerCanvas: IDesignerCanvas): IRect { let min: IPoint = { x: Number.MAX_VALUE, y: Number.MAX_VALUE }; let max: IPoint = { x: Number.MIN_VALUE, y: Number.MIN_VALUE }; let elementRect: IRect; for (let s of designItems) { if (s.nodeType == NodeType.TextNode || s.nodeType == NodeType.Comment) continue; elementRect = { x: designerCanvas.getNormalizedElementCoordinates(s.element).x, y: designerCanvas.getNormalizedElementCoordinates(s.element).y, width: designerCanvas.getNormalizedElementCoordinates(s.element).width, height: designerCanvas.getNormalizedElementCoordinates(s.element).height } // calculate min and max of selection if (elementRect.x < min.x) min.x = elementRect.x; if (elementRect.y < min.y) min.y = elementRect.y; if (elementRect.x + elementRect.width > max.x) max.x = elementRect.x + elementRect.width; if (elementRect.y + elementRect.height > max.y) max.y = elementRect.y + elementRect.height; } // calculate reckt around selection return { x: min.x, y: min.y, width: max.x - min.x, height: max.y - min.y } } ================================================ FILE: packages/web-component-designer/src/elements/helper/GridHelper.ts ================================================ import { IPoint } from "../../interfaces/IPoint.js"; import { IDesignItem } from "../item/IDesignItem.js"; import { getElementSize } from "./getBoxQuads.js"; export interface IGridCellInformation { x: number; y: number; width: number; height: number; name: string; localX: number; localY: number; } export interface IGridGapInformation { x: number; y: number; width: number; height: number; localX: number; localY: number; column?: number; row?: number; type: 'h' | 'v'; } export interface IGridInformation { cells: IGridCellInformation[][]; gaps: IGridGapInformation[]; xGap: number; yGap: number; } export interface IGridCellHitResult { row: number; column: number; cell: IGridCellInformation; localPoint: IPoint; } export function getElementGridInformation(element: HTMLElement) { let cs = getComputedStyle(element); let rowSpan = 1; let colSpan = 1; if (cs.gridRowEnd == 'auto') rowSpan = 1 else if (cs.gridRowEnd.startsWith('span')) rowSpan = parseInt(cs.gridRowEnd.substring(4)); else rowSpan = parseInt(cs.gridRowEnd) - parseInt(cs.gridRowStart); if (cs.gridColumnEnd == 'auto') colSpan = 1 else if (cs.gridColumnEnd.startsWith('span')) colSpan = parseInt(cs.gridColumnEnd.substring(4)); else colSpan = parseInt(cs.gridColumnEnd) - parseInt(cs.gridColumnStart); return { colSpan, rowSpan }; } export function getGridLocalPoint(designItem: IDesignItem, point: IPoint): IPoint { const designerCanvas = designItem.instanceServiceContainer.designerCanvas; const localPoint = designItem.element.convertPointFromNode(new DOMPoint(point.x, point.y), designerCanvas.canvas, { iframes: designerCanvas.iframes }); return { x: localPoint.x, y: localPoint.y }; } export function getElementLocalToCanvasMatrix(designItem: IDesignItem): DOMMatrix { const designerCanvas = designItem.instanceServiceContainer.designerCanvas; const origin = designerCanvas.canvas.convertPointFromNode(new DOMPoint(0, 0), designItem.element, { iframes: designerCanvas.iframes }); const xAxis = designerCanvas.canvas.convertPointFromNode(new DOMPoint(1, 0), designItem.element, { iframes: designerCanvas.iframes }); const yAxis = designerCanvas.canvas.convertPointFromNode(new DOMPoint(0, 1), designItem.element, { iframes: designerCanvas.iframes }); return new DOMMatrix([ xAxis.x - origin.x, xAxis.y - origin.y, yAxis.x - origin.x, yAxis.y - origin.y, origin.x, origin.y, ]); } export function getGridColumnIndexFromLocalX(gridInformation: IGridInformation, localX: number): number { const columns = gridInformation.cells[0]; if (!columns?.length || !Number.isFinite(localX)) return 0; let column = 0; for (let i = 0; i < columns.length; i++) { const cell = columns[i]; if (localX > cell.localX + cell.width / 2) { column = i; } } return column; } export function getGridColumnStartLineFromLocalX(gridInformation: IGridInformation, localX: number): number { const columns = gridInformation.cells[0]; if (!columns?.length || !Number.isFinite(localX)) return 1; let line = 1; for (let i = 0; i < columns.length; i++) { const cell = columns[i]; if (localX > cell.localX + cell.width / 2) { line = i + 2; } } return line; } export function getGridRowIndexFromLocalY(gridInformation: IGridInformation, localY: number): number { if (!gridInformation.cells.length || !Number.isFinite(localY)) return 0; let row = 0; for (let i = 0; i < gridInformation.cells.length; i++) { const cell = gridInformation.cells[i][0]; if (localY > cell.localY + cell.height / 2) { row = i; } } return row; } export function getGridRowStartLineFromLocalY(gridInformation: IGridInformation, localY: number): number { if (!gridInformation.cells.length || !Number.isFinite(localY)) return 1; let line = 1; for (let i = 0; i < gridInformation.cells.length; i++) { const cell = gridInformation.cells[i][0]; if (localY > cell.localY + cell.height / 2) { line = i + 2; } } return line; } export function getGridCellFromPoint(designItem: IDesignItem, point: IPoint, gridInformation: IGridInformation = calculateGridInformation(designItem)): IGridCellHitResult { const localPoint = getGridLocalPoint(designItem, point); if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) return null; for (let row = 0; row < gridInformation.cells.length; row++) { for (let column = 0; column < gridInformation.cells[row].length; column++) { const cell = gridInformation.cells[row][column]; if (localPoint.x >= cell.localX && localPoint.x <= cell.localX + cell.width && localPoint.y >= cell.localY && localPoint.y <= cell.localY + cell.height) { return { row, column, cell, localPoint }; } } } return null; } export function calculateGridInformation(designItem: IDesignItem): IGridInformation { //TODO: same name should combine columns/rows const designerCanvas = designItem.instanceServiceContainer.designerCanvas; const transformedCornerPoints: DOMQuad = designItem.element.getBoxQuads({ relativeTo: designerCanvas.canvas, iframes: designerCanvas.iframes })[0]; const itemSize = getElementSize(designItem.element); const computedStyle = getComputedStyle(designItem.element); const rows = computedStyle.gridTemplateRows.split(' '); const columns = computedStyle.gridTemplateColumns.split(' '); const paddingLeft = Number.parseFloat(computedStyle.paddingLeft); const paddingTop = Number.parseFloat(computedStyle.paddingTop); const borderLeft = Number.parseFloat(computedStyle.borderLeftWidth); const borderTop = Number.parseFloat(computedStyle.borderTopWidth); let y = 0; let xGap = 0; let yGap = 0; let rw = 0; let xOffset = transformedCornerPoints.p1.x + borderLeft; let yOffset = transformedCornerPoints.p1.y + borderTop; let localXOffset = borderLeft; let localYOffset = borderTop; let gridA: string[] = null; if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none') gridA = computedStyle.gridTemplateAreas.split('\"'); if (computedStyle.columnGap && computedStyle.columnGap != 'normal') xGap = Number.parseFloat(computedStyle.columnGap.replace('px', '')); if (computedStyle.rowGap && computedStyle.rowGap != 'normal') yGap = Number.parseFloat(computedStyle.rowGap.replace('px', '')); let gesX = 0; let gesY = 0; for (let c of columns) { const currX = Number.parseFloat(c.replace('px', '')); gesX += currX + xGap; } gesX -= xGap; for (let r of rows) { const currY = Number.parseFloat(r.replace('px', '')); gesY += currY + yGap; } gesY -= yGap; if (computedStyle.justifyContent == 'center') { const diff = (itemSize.width - gesX) / 2; xOffset += diff; localXOffset += diff; } else if (computedStyle.justifyContent == 'end') { const diff = itemSize.width - gesX; xOffset += diff; localXOffset += diff; } else if (computedStyle.justifyContent == 'space-between') { xGap += (itemSize.width - gesX) / (columns.length - 1); } else if (computedStyle.justifyContent == 'space-around') { let gp = (itemSize.width - gesX) / (columns.length * 2); xGap += gp * 2; xOffset += gp; localXOffset += gp; } else if (computedStyle.justifyContent == 'space-evenly') { let gp = (itemSize.width - gesX) / (columns.length + 1); xGap += gp; xOffset += gp; localXOffset += gp; } if (computedStyle.alignContent == 'center') { const diff = (itemSize.height - gesY) / 2; yOffset += diff; localYOffset += diff; } else if (computedStyle.alignContent == 'end') { const diff = itemSize.height - gesY; yOffset += diff; localYOffset += diff; } else if (computedStyle.alignContent == 'space-between') { yGap += (itemSize.height - gesY) / (rows.length - 1); } else if (computedStyle.alignContent == 'space-around') { let gp = (itemSize.height - gesY) / (rows.length * 2); yGap += gp * 2; yOffset += gp; localYOffset += gp; } else if (computedStyle.alignContent == 'space-evenly') { let gp = (itemSize.height - gesY) / (rows.length + 1); yGap += gp; yOffset += gp; localYOffset += gp; } const retVal: IGridInformation = { cells: [], gaps: [], xGap, yGap }; for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) { const r = rows[rowIdx]; let areas: string[] = null; if (gridA && gridA[rw + 1]) { areas = gridA[rw + 1].split(' '); } let x = 0; let cl = 0; const currY = Number.parseFloat(r.replace('px', '')); let cellList: IGridCellInformation[] = []; retVal.cells.push(cellList); for (let colIdx = 0; colIdx < columns.length; colIdx++) { const c = columns[colIdx]; if (colIdx > 0) { retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY, localX: x + localXOffset + paddingLeft, localY: y + localYOffset + paddingTop, column: colIdx, row: rowIdx, type: 'v' }); x += xGap } const currX = Number.parseFloat(c.replace('px', '')); if (rowIdx > 0) { retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap, localX: x + localXOffset + paddingLeft, localY: y + localYOffset - yGap + paddingTop, column: colIdx, row: rowIdx, type: 'h' }); } let name = null; if (areas && areas[cl]) { const nm = areas[cl].trim(); if (nm != '.') { name = nm; } } const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name, localX: x + localXOffset + paddingLeft, localY: y + localYOffset + paddingTop }; cellList.push(cell); x += currX; cl++; } y += currY + yGap; rw += 2; } return retVal; } ================================================ FILE: packages/web-component-designer/src/elements/helper/Helper.ts ================================================ import { IPoint } from "../../interfaces/IPoint.js"; import { IRect } from "../../interfaces/IRect.js"; export function htmlAsString(strings: TemplateStringsArray, ...values: any[]) { return strings.reduce((result, str, i) => { return result + str + (values[i] ?? ''); }, ''); } export function isAppleDevice() { return window.navigator.platform?.startsWith("Mac") || window.navigator.platform === "iPhone" || window.navigator.platform === "iPad" || window.navigator.platform === "iPod"; } export function sleep(ms): Promise { return new Promise(resolve => setTimeout(resolve, ms)); } export async function exportData(blob: Blob, fileName: string): Promise { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.style.display = 'none'; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); await sleep(300); } export function dataURItoBlob(dataURI) { var mime = dataURI.split(',')[0].split(':')[1].split(';')[0]; var binary = atob(dataURI.split(',')[1]); var array = []; for (var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } return new Blob([new Uint8Array(array)], { type: mime }); } export function pointInRect(point: IPoint, rect: IRect) { return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height; } export function removeTrailing(text: string, char: string) { if (text.endsWith(char ?? '/')) return text.substring(0, text.length - 1); return text; } export function removeLeading(text: string, char: string) { if (text.startsWith(char ?? '/')) return text.substring(1); return text; } export function requestAnimationFramePromise() { return new Promise(resolve => requestAnimationFrame(resolve)); } export function arraysEqual(a: T[], b: T[]) { if (a === b) return true; if (a == null || b == null) return false; if (a.length !== b.length) return false; for (var i = 0; i < a.length; ++i) { if (a[i] !== b[i]) return false; } return true; } let nullObject: {}; export function deepValue(obj, path: string, returnNullObject = false, splitter = '.') { if (path === undefined || path === null) { return obj; } const pathParts = path.split(splitter); for (let i = 0; i < pathParts.length; i++) { if (obj != null) { obj = obj[pathParts[i]]; } else { return returnNullObject ? nullObject : null; } } return obj; } export function setDeepValue(obj, path: string, value, splitter = '.') { if (path === undefined || path === null) { return; } const pathParts = path.split(splitter); for (let i = 0; i < pathParts.length - 1; i++) { if (obj != null) { let newObj = obj[pathParts[i]]; if (newObj == null) { newObj = {}; obj[pathParts[i]] = newObj; } obj = newObj; } } if (obj != null) obj[pathParts[pathParts.length - 1]] = value; } ================================================ FILE: packages/web-component-designer/src/elements/helper/ITextWriter.ts ================================================ export interface ITextWriter { get position(): number; isLastCharNewline(): boolean; levelRaise(): void levelShrink(): void write(text: string): void writeLine(text: string): void writeIndent(): void writeNewline(): void getString(): string } ================================================ FILE: packages/web-component-designer/src/elements/helper/IndentedTextWriter.ts ================================================ import { ITextWriter } from './ITextWriter.js'; export class IndentedTextWriter implements ITextWriter { private _textHolder: string = '' public readonly indent: number = 4; public level: number = 0; public get position(): number { return this._textHolder.length; } public isLastCharNewline() { return this._textHolder[this._textHolder.length - 1] === '\n'; } public levelRaise() { this.level++; } public levelShrink() { this.level--; } public write(text: string) { this._textHolder += text; } public writeLine(text: string) { this.writeIndent(); this._textHolder += text; this.writeNewline(); } public writeIndent() { this._textHolder += ''.padEnd(this.level * this.indent, ' '); } public writeNewline() { this._textHolder += '\n'; } public getString() { return this._textHolder; } } ================================================ FILE: packages/web-component-designer/src/elements/helper/KeyboardHelper.ts ================================================ import { isAppleDevice } from "./Helper.js"; export function hasCommandKey(event: KeyboardEvent | MouseEvent | PointerEvent | DragEvent | WheelEvent) { if (isAppleDevice()) return event.metaKey; return event.ctrlKey; } ================================================ FILE: packages/web-component-designer/src/elements/helper/LayoutHelper.ts ================================================ //TODO: this function should return the correct property to change a layout, // for example left/right when left or right is used, //maybe margin on grid? or transform?? import { IPoint } from "../../interfaces/IPoint.js"; import { IDesignItem } from "../item/IDesignItem.js"; import { getBoundingClientRectAlsoForDisplayContents } from "./ElementHelper.js"; import { getGeometryReader } from "../widgets/designerView/extensions/svg/geometry/GeometryReaderFactory.js"; import { applyGeometryWritesToDesignItem } from '../widgets/designerView/extensions/svg/geometry/GeometryWriteHelper.js'; /** * This function filters a items list, so only the outer elments are used for example in a move */ export function filterChildPlaceItems(items: IDesignItem[]) { const filterdPlaceItems: IDesignItem[] = []; next: for (let i of items) { let par = i.parent; while (par != null && !par.isRootItem) { if (items.indexOf(par) >= 0) continue next; par = par.parent; } filterdPlaceItems.push(i); } return filterdPlaceItems; } export function getDesignItemCurrentPos(designItem: IDesignItem, mode: 'position' | 'transform' | 'margin' | 'padding'): IPoint { if (mode === 'position') { const computedStyleMovedElement = getComputedStyle(designItem.element); let oldLeft: number | null = parseFloat(computedStyleMovedElement.left); oldLeft = Number.isNaN(oldLeft) ? null : oldLeft; let oldTop: number | null = parseFloat(computedStyleMovedElement.top); oldTop = Number.isNaN(oldTop) ? null : oldTop; return { x: oldLeft ?? 0, y: oldTop ?? 0 } } return { x: 0, y: 0 } } export function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') { const movedElement = designItem.element; const computedStyleMovedElement = getComputedStyle(movedElement); if (mode === 'position') { if (_placeSvgDesignItem(designItem, offset)) { return; } let positionedContainerElement: Element | null = container.element; let computedStylePositionedContainer = container.getComputedStyle(); if (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute' && positionedContainerElement && (positionedContainerElement).offsetParent) { positionedContainerElement = (positionedContainerElement).offsetParent; if (positionedContainerElement) computedStylePositionedContainer = container.window.getComputedStyle(positionedContainerElement); } let oldLeft = null; let oldRight = null; let oldTop = null; let oldBottom = null; let containerLeft = 0; let containerRight = 0; let containerTop = 0; let containerBottom = 0; let hasPositionedLayout = false; if (computedStyleMovedElement.position === 'relative' || computedStyleMovedElement.position === 'absolute') { oldLeft = parseFloat((movedElement).style.left); oldLeft = Number.isNaN(oldLeft) ? null : oldLeft; oldTop = parseFloat((movedElement).style.top); oldTop = Number.isNaN(oldTop) ? null : oldTop; oldRight = parseFloat((movedElement).style.right); oldRight = Number.isNaN(oldRight) ? null : oldRight; oldBottom = parseFloat((movedElement).style.bottom); oldBottom = Number.isNaN(oldBottom) ? null : oldBottom; hasPositionedLayout = true; } else { if (positionedContainerElement && positionedContainerElement !== container.element) { let posContainerRect = getBoundingClientRectAlsoForDisplayContents(positionedContainerElement); let elementRect = getBoundingClientRectAlsoForDisplayContents(designItem.element); containerLeft = elementRect.left - posContainerRect.left; containerRight = elementRect.right - posContainerRect.right; containerTop = elementRect.top - posContainerRect.top; containerBottom = elementRect.bottom - posContainerRect.bottom; } } if (!hasPositionedLayout) designItem.setStyle('position', 'absolute'); if (oldLeft || oldRight == null) designItem.setStyle('left', roundValue(designItem, offset.x + (oldLeft ?? 0) + containerLeft) + "px"); if (oldTop || oldBottom == null) designItem.setStyle('top', roundValue(designItem, offset.y + (oldTop ?? 0) + containerTop) + "px"); if (oldRight != null) designItem.setStyle('right', roundValue(designItem, (oldRight ?? 0) - offset.x + containerRight) + "px"); if (oldBottom != null) designItem.setStyle('bottom', roundValue(designItem, (oldBottom ?? 0) - offset.y + containerBottom) + "px"); } } export function transformOffsetByInverseLinearMatrix(offset: IPoint, matrix: Pick): IPoint { const determinant = matrix.a * matrix.d - matrix.b * matrix.c; if (Math.abs(determinant) < 1e-10) { return offset; } return { x: (matrix.d * offset.x - matrix.c * offset.y) / determinant, y: (-matrix.b * offset.x + matrix.a * offset.y) / determinant, }; } function _placeSvgDesignItem(designItem: IDesignItem, offset: IPoint): boolean { const element = designItem.element; if (!(element instanceof SVGGraphicsElement) || element instanceof SVGSVGElement) { return false; } const reader = getGeometryReader(element); if (!reader) { return false; } const geometry = reader.read(element); for (const segment of geometry.segments) { if (segment.point) { segment.point.x += offset.x; segment.point.y += offset.y; } if (segment.cp1) { segment.cp1.x += offset.x; segment.cp1.y += offset.y; } if (segment.cp2) { segment.cp2.x += offset.x; segment.cp2.y += offset.y; } } const attrs = reader.serialize(geometry); if (!attrs.length) { return false; } const group = designItem.openGroup('place svg geometry'); applyGeometryWritesToDesignItem(designItem, attrs); group.commit(); return true; } export function roundValue(designItem: IDesignItem, value: number) { if (designItem.serviceContainer.options.roundPixelsToDecimalPlaces >= 0) { return value.toFixed(designItem.serviceContainer.options.roundPixelsToDecimalPlaces); } return value.toString(); } /*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') { }*/ ================================================ FILE: packages/web-component-designer/src/elements/helper/NpmPackageHacks.json ================================================ { "@shoelace-style/shoelace": { "html": "\n" }, "@microsoft/fast-components": { "script": "let res = await import('@microsoft/fast-components');\nres.provideFASTDesignSystem().register(res.allComponents);" }, "@zooplus/zoo-web-components": { "script": "let res = await import('@zooplus/zoo-web-components');\nres.registerComponents(res);", "style":":root {\n--primary-mid: #3C9700;\n--primary-light: #66B100;\n--primary-dark: #286400;\n--primary-ultralight: #EBF4E5;\n--secondary-mid: #FF6200;\n--secondary-light: #F80;\n--secondary-dark: #CC4E00;\n--info-ultralight: #ECF5FA;\n--info-mid: #459FD0;\n--warning-ultralight: #FDE8E9;\n--warning-mid: #ED1C24;\n}" }, "@material/web": { "import": "@material/web/all.js" }, "@stencil/core": { "map": { "@stencil/core/internal/client": "internal/client/index.js", "@stencil/core/internal/app-data": "internal/app-data/index.js" } } } ================================================ FILE: packages/web-component-designer/src/elements/helper/NpmPackageLoader.ts ================================================ import { IDesignerAddonJson } from "../services/designerAddons/IDesignerAddonJson.js"; import { IElementsJson } from "../services/elementsService/IElementsJson.js"; import { PreDefinedElementsService } from "../services/elementsService/PreDefinedElementsService.js"; import { WebcomponentManifestElementsService } from "../services/elementsService/WebcomponentManifestElementsService.js"; import { WebcomponentManifestPropertiesService } from "../services/propertiesService/services/WebcomponentManifestPropertiesService.js"; import { ServiceContainer } from "../services/ServiceContainer.js"; import { removeLeading, removeTrailing } from "./Helper.js"; import { ObservedCustomElementsRegistry } from "./ObservedCustomElementsRegistry.js"; export class NpmPackageLoader { private static registryPatchedTohandleErrors: boolean; private static packageHacks; //packageSource = '//unpkg.com/'; private _packageSource: string; private _dependecies = new Map(); constructor(packageSource: string = '//cdn.jsdelivr.net/npm/') { this._packageSource = packageSource; NpmPackageLoader.patchCustomElementsRegistryToHandleErrors(); } static patchCustomElementsRegistryToHandleErrors() { if (!NpmPackageLoader.registryPatchedTohandleErrors) { NpmPackageLoader.registryPatchedTohandleErrors = true; let customElementsRegistry = window.customElements; const registry: any = {}; registry.define = function (name, constructor, options) { try { customElementsRegistry.define(name, constructor, options); } catch (err) { console.warn(err); } } registry.get = function (name) { return customElementsRegistry.get(name); } registry.upgrade = function (node) { return customElementsRegistry.upgrade(node); } registry.whenDefined = function (name) { return customElementsRegistry.whenDefined(name); } Object.defineProperty(window, "customElements", { get() { return registry } }); } } //TODO: remove paletteTree form params. elements should be added to serviceconatiner, and the container should notify async loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: any, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<{ html: string, style: string }> { if (!NpmPackageLoader.packageHacks) { NpmPackageLoader.packageHacks = (await import("./NpmPackageHacks.json", { assert: { type: 'json' } })).default; } const baseUrl = window.location.protocol + this._packageSource + pkg + '/'; const packageJsonUrl = baseUrl + 'package.json'; if (reportState) reportState(pkg + ": loading package.json"); const packageJson = await fetch(packageJsonUrl); const packageJsonObj = await packageJson.json(); this.addToImportmap(baseUrl, packageJsonObj); const depPromises: Promise[] = [] if (packageJsonObj.dependencies) { for (let d in packageJsonObj.dependencies) { depPromises.push(this.loadDependency(d, packageJsonObj.dependencies[d])); } } await Promise.all(depPromises) let customElementsUrl = baseUrl + 'custom-elements.json'; let elementsRootPath = baseUrl; if (packageJsonObj.customElements) { customElementsUrl = baseUrl + removeTrailing(packageJsonObj.customElements, '/'); if (customElementsUrl.includes('/')) { let idx = customElementsUrl.lastIndexOf('/'); elementsRootPath = customElementsUrl.substring(0, idx + 1); } } let webComponentDesignerUrl = baseUrl + 'web-component-designer.json'; if (packageJsonObj.webComponentDesigner) { webComponentDesignerUrl = baseUrl + removeLeading(packageJsonObj.webComponentDesigner, '/'); } if (reportState) reportState(pkg + ": loading custom-elements.json"); let customElementsJson = await fetch(customElementsUrl); if (!customElementsJson.ok && packageJsonObj.homepage) { try { const url = new URL(packageJsonObj.homepage); const newurl = 'https://raw.githubusercontent.com/' + url.pathname + '/master/custom-elements.json'; customElementsJson = await fetch(newurl); console.warn("custom-elements.json was missing from npm package, but was loaded from github as a fallback.") } catch (err) { console.warn("github custom elments json fallback", err); } } if (serviceContainer) { fetch(webComponentDesignerUrl).then(async x => { if (x.ok) { const webComponentDesignerJson = await x.json(); if (webComponentDesignerJson.services) { for (let o in webComponentDesignerJson.services) { for (let s of webComponentDesignerJson.services[o]) { if (s.startsWith('./')) s = s.substring(2); //@ts-ignore const classDefinition = (await importShim(baseUrl + s)).default; //@ts-ignore serviceContainer.register(o, new classDefinition()); } } } } }); } if (customElementsJson.ok) { const customElementsJsonObj = await customElementsJson.json(); let elements = new WebcomponentManifestElementsService(packageJsonObj.name, elementsRootPath, customElementsJsonObj); if (serviceContainer) serviceContainer.register('elementsService', elements); if (serviceContainer) { let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj); serviceContainer.register('propertyService', properties); } if (loadAllImports) { for (let e of await elements.getElements()) { //@ts-ignore importShim(e.import); } } if (serviceContainer && paletteTree) { //TODO: should be retriggered by service container, or changeing list in container paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices); } /* Package Hacks */ if (NpmPackageLoader.packageHacks[pkg]?.import) { import(NpmPackageLoader.packageHacks[pkg]?.import); } if (NpmPackageLoader.packageHacks[pkg]?.script) { const scriptUrl = URL.createObjectURL(new Blob([NpmPackageLoader.packageHacks[pkg]?.script], { type: 'application/javascript' })); import(scriptUrl); } } else { console.warn('npm package: ' + pkg + ' - no custom-elements.json found, only loading javascript module'); const observedCustomElementsRegistry = new ObservedCustomElementsRegistry(); if (packageJsonObj.module) { //@ts-ignore await importShim(baseUrl + removeLeading(packageJsonObj.module, '/')) } else if (packageJsonObj.main) { //@ts-ignore await importShim(baseUrl + removeLeading(packageJsonObj.main, '/')) } else if (packageJsonObj.unpkg) { //@ts-ignore await importShim(baseUrl + removeLeading(packageJsonObj.unpkg, '/')) } else { console.warn('npm package: ' + pkg + ' - no entry point in package found.'); } /* Package Hacks */ if (NpmPackageLoader.packageHacks[pkg]?.import) { await import(NpmPackageLoader.packageHacks[pkg]?.import); } if (NpmPackageLoader.packageHacks[pkg]?.script) { const scriptUrl = URL.createObjectURL(new Blob([NpmPackageLoader.packageHacks[pkg]?.script], { type: 'application/javascript' })); await import(scriptUrl); } const newElements = observedCustomElementsRegistry.getNewElements(); if (newElements.length > 0 && serviceContainer && paletteTree) { const elementsCfg: IElementsJson = { elements: newElements } let elService = new PreDefinedElementsService(pkg, elementsCfg) serviceContainer.register('elementsService', elService); paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices); } observedCustomElementsRegistry.dispose(); } if (reportState) reportState(pkg + ": done"); let retVal: any = {}; if (NpmPackageLoader.packageHacks[pkg]?.html) { retVal.html = (NpmPackageLoader.packageHacks[pkg]?.html).replaceAll("${baseUrl}", baseUrl); } if (NpmPackageLoader.packageHacks[pkg]?.style) { retVal.style = (NpmPackageLoader.packageHacks[pkg]?.style).replaceAll("${baseUrl}", baseUrl); } return retVal; } async loadDependency(dependency: string, version?: string, reportState?: (state: string) => void) { if (this._dependecies.has(dependency)) return; this._dependecies.set(dependency, true); if (dependency.startsWith('@types')) { console.warn('ignoring wrong dependency: ', dependency); return; } if (reportState) reportState(dependency + ": loading dependency: " + dependency); const baseUrl = window.location.protocol + this._packageSource + dependency + '/'; const packageJsonUrl = baseUrl + 'package.json'; const packageJson = await fetch(packageJsonUrl); const packageJsonObj = await packageJson.json(); const depPromises: Promise[] = [] if (packageJsonObj.dependencies) { for (let d in packageJsonObj.dependencies) { depPromises.push(this.loadDependency(d, packageJsonObj.dependencies[d])); } } await Promise.all(depPromises) this.addToImportmap(baseUrl, packageJsonObj); } async addToImportmap(baseUrl: string, packageJsonObj: { name?: string, module?: string, main?: string, unpkg?: string, exports?: Record }) { //@ts-ignore const map = importShim.getImportMap().imports; const importMap = { imports: {}, scopes: {} }; if (!map.hasOwnProperty(packageJsonObj.name)) { //TODO: use exports of package.json for importMap if (packageJsonObj.exports) { /* "exports": { ".": { "browser": "./index.browser.js", "default": "./index.js" }, "./async": { "browser": "./async/index.browser.js", "default": "./async/index.js" }, "./non-secure": "./non-secure/index.js", "./package.json": "./package.json" } "exports": { "node": { "import": "./feature-node.mjs", "require": "./feature-node.cjs" }, "default": "./feature.mjs" } "exports": { ".": "./index.js", "./feature.js": { "node": "./feature-node.js", "default": "./feature.js" } } "exports": { ".": { "types": "./dist/index.d.ts", "import": { "browser": { "development": "./dist/composed-offset-position.browser.mjs", "default": "./dist/composed-offset-position.browser.min.mjs" }, "default": "./dist/composed-offset-position.mjs" }, "module": "./dist/composed-offset-position.esm.js", "default": "./dist/composed-offset-position.umd.js" }, "./package.json": "./package.json" } */ /* "exports": { "import": "./index-module.js", "require": "./index-require.cjs" }, */ let getImport = (obj: any) => { if (obj?.browser) return obj.browser; if (obj?.import) return obj.import; if (obj?.module) return obj.module; if (obj?.default) return obj.default; return obj?.node; } /* for support of this: "exports": { ".": { "types": "./dist/index.d.ts", "import": { "browser": { "development": "./dist/composed-offset-position.browser.mjs", "default": "./dist/composed-offset-position.browser.min.mjs" }, */ let getImportFlat = (obj: any) => { let i = getImport(obj); if (!(typeof i == 'string')) i = getImport(i); if (!(typeof i == 'string')) i = getImport(i); if (!(typeof i == 'string')) i = null; return i; } //Names to use: browser, import, default, node let imp = getImportFlat(packageJsonObj.exports); if (imp) { importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/'); } else if (imp = getImportFlat(packageJsonObj.exports?.['.'])) { importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/'); } } let mainImport = packageJsonObj.main; if (packageJsonObj.module) mainImport = packageJsonObj.module; if (packageJsonObj.unpkg && !mainImport) mainImport = packageJsonObj.unpkg; if (!importMap.imports[packageJsonObj.name]) { if (mainImport) importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(mainImport, '.'), '/'); else console.warn('package: ' + baseUrl + 'no main import found'); } importMap.imports[packageJsonObj.name + '/'] = baseUrl; if (NpmPackageLoader.packageHacks[packageJsonObj.name]?.map) { for (let h in NpmPackageLoader.packageHacks[packageJsonObj.name]?.map) [ importMap.imports[h] = baseUrl + NpmPackageLoader.packageHacks[packageJsonObj.name].map[h] ] } //@ts-ignore importShim.addImportMap(importMap); } } } ================================================ FILE: packages/web-component-designer/src/elements/helper/ObservedCustomElementsRegistry.ts ================================================ import { IDisposable } from "../../interfaces/IDisposable.js"; export class ObservedCustomElementsRegistry implements IDisposable { private _originalCustomElementsRegistry: CustomElementRegistry private _newElements: string[] = []; constructor() { this._originalCustomElementsRegistry = window.customElements; const registry: any = {}; const originalCustomElementsRegistry = this._originalCustomElementsRegistry const newElements = this._newElements registry.define = function (name, constructor, options) { newElements.push(name); originalCustomElementsRegistry.define(name, constructor, options); } registry.get = function (name) { return originalCustomElementsRegistry.get(name); } registry.upgrade = function (node) { return originalCustomElementsRegistry.upgrade(node); } registry.whenDefined = function (name) { return originalCustomElementsRegistry.whenDefined(name); } Object.defineProperty(window, "customElements", { get() { return registry; } }); } dispose(): void { const orgReg = this._originalCustomElementsRegistry; Object.defineProperty(window, "customElements", { get() { return orgReg; } }); } getNewElements(): string[] { const newElements = this._newElements; this._newElements = []; return newElements; } } ================================================ FILE: packages/web-component-designer/src/elements/helper/PathDataPolyfill.ts ================================================ // https://github.com/jarek-foksa/path-data-polyfill // @info // Polyfill for SVG getPathData() and setPathData() methods. Based on: // - SVGPathSeg polyfill by Philip Rogers (MIT License) // https://github.com/progers/pathseg // - SVGPathNormalizer by Tadahisa Motooka (MIT License) // https://github.com/motooka/SVGPathNormalizer/tree/master/src // - arcToCubicCurves() by Dmitry Baranovskiy (MIT License) // https://github.com/DmitryBaranovskiy/raphael/blob/v2.1.1/raphael.core.js#L1837 // @author // Jarosław Foksa // @license import { IPoint } from "../../interfaces/IPoint.js"; // MIT License if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathData) { (function () { var commandsMap = { "Z": "Z", "M": "M", "L": "L", "C": "C", "Q": "Q", "A": "A", "H": "H", "V": "V", "S": "S", "T": "T", "z": "Z", "m": "m", "l": "l", "c": "c", "q": "q", "a": "a", "h": "h", "v": "v", "s": "s", "t": "t" }; var Source = function (string) { //@ts-ignore this._string = string; //@ts-ignore this._currentIndex = 0; //@ts-ignore this._endIndex = this._string.length; //@ts-ignore this._prevCommand = null; //@ts-ignore this._skipOptionalSpaces(); }; Source.prototype = { parseSegment: function () { var char = this._string[this._currentIndex]; var command = commandsMap[char] ? commandsMap[char] : null; if (command === null) { // Possibly an implicit command. Not allowed if this is the first command. if (this._prevCommand === null) { return null; } // Check for remaining coordinates in the current command. if ( (char === "+" || char === "-" || char === "." || (char >= "0" && char <= "9")) && this._prevCommand !== "Z" ) { if (this._prevCommand === "M") { command = "L"; } else if (this._prevCommand === "m") { command = "l"; } else { command = this._prevCommand; } } else { command = null; } if (command === null) { return null; } } else { this._currentIndex += 1; } this._prevCommand = command; var values = null; var cmd = command.toUpperCase(); if (cmd === "H" || cmd === "V") { values = [this._parseNumber()]; } else if (cmd === "M" || cmd === "L" || cmd === "T") { values = [this._parseNumber(), this._parseNumber()]; } else if (cmd === "S" || cmd === "Q") { values = [this._parseNumber(), this._parseNumber(), this._parseNumber(), this._parseNumber()]; } else if (cmd === "C") { values = [ this._parseNumber(), this._parseNumber(), this._parseNumber(), this._parseNumber(), this._parseNumber(), this._parseNumber() ]; } else if (cmd === "A") { values = [ this._parseNumber(), this._parseNumber(), this._parseNumber(), this._parseArcFlag(), this._parseArcFlag(), this._parseNumber(), this._parseNumber() ]; } else if (cmd === "Z") { this._skipOptionalSpaces(); values = []; } if (values === null || values.indexOf(null) >= 0) { // Unknown command or known command with invalid values return null; } else { return { type: command, values: values }; } }, hasMoreData: function () { return this._currentIndex < this._endIndex; }, peekSegmentType: function () { var char = this._string[this._currentIndex]; return commandsMap[char] ? commandsMap[char] : null; }, initialCommandIsMoveTo: function () { // If the path is empty it is still valid, so return true. if (!this.hasMoreData()) { return true; } var command = this.peekSegmentType(); // Path must start with moveTo. return command === "M" || command === "m"; }, _isCurrentSpace: function () { var char = this._string[this._currentIndex]; return char <= " " && (char === " " || char === "\n" || char === "\t" || char === "\r" || char === "\f"); }, _skipOptionalSpaces: function () { while (this._currentIndex < this._endIndex && this._isCurrentSpace()) { this._currentIndex += 1; } return this._currentIndex < this._endIndex; }, _skipOptionalSpacesOrDelimiter: function () { if ( this._currentIndex < this._endIndex && !this._isCurrentSpace() && this._string[this._currentIndex] !== "," ) { return false; } if (this._skipOptionalSpaces()) { if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === ",") { this._currentIndex += 1; this._skipOptionalSpaces(); } } return this._currentIndex < this._endIndex; }, // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from // Source/core/svg/SVGParserUtilities.cpp. // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF _parseNumber: function () { var exponent = 0; var integer = 0; var frac = 1; var decimal = 0; var sign = 1; var expsign = 1; var startIndex = this._currentIndex; this._skipOptionalSpaces(); // Read the sign. if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === "+") { this._currentIndex += 1; } else if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === "-") { this._currentIndex += 1; sign = -1; } if ( this._currentIndex === this._endIndex || ( (this._string[this._currentIndex] < "0" || this._string[this._currentIndex] > "9") && this._string[this._currentIndex] !== "." ) ) { // The first character of a number must be one of [0-9+-.]. return null; } // Read the integer part, build right-to-left. var startIntPartIndex = this._currentIndex; while ( this._currentIndex < this._endIndex && this._string[this._currentIndex] >= "0" && this._string[this._currentIndex] <= "9" ) { this._currentIndex += 1; // Advance to first non-digit. } if (this._currentIndex !== startIntPartIndex) { var scanIntPartIndex = this._currentIndex - 1; var multiplier = 1; while (scanIntPartIndex >= startIntPartIndex) { integer += multiplier * (this._string[scanIntPartIndex] - "0"); scanIntPartIndex -= 1; multiplier *= 10; } } // Read the decimals. if (this._currentIndex < this._endIndex && this._string[this._currentIndex] === ".") { this._currentIndex += 1; // There must be a least one digit following the . if ( this._currentIndex >= this._endIndex || this._string[this._currentIndex] < "0" || this._string[this._currentIndex] > "9" ) { return null; } while ( this._currentIndex < this._endIndex && this._string[this._currentIndex] >= "0" && this._string[this._currentIndex] <= "9" ) { frac *= 10; decimal += (this._string.charAt(this._currentIndex) - "0") / frac; this._currentIndex += 1; } } // Read the exponent part. if ( this._currentIndex !== startIndex && this._currentIndex + 1 < this._endIndex && (this._string[this._currentIndex] === "e" || this._string[this._currentIndex] === "E") && (this._string[this._currentIndex + 1] !== "x" && this._string[this._currentIndex + 1] !== "m") ) { this._currentIndex += 1; // Read the sign of the exponent. if (this._string[this._currentIndex] === "+") { this._currentIndex += 1; } else if (this._string[this._currentIndex] === "-") { this._currentIndex += 1; expsign = -1; } // There must be an exponent. if ( this._currentIndex >= this._endIndex || this._string[this._currentIndex] < "0" || this._string[this._currentIndex] > "9" ) { return null; } while ( this._currentIndex < this._endIndex && this._string[this._currentIndex] >= "0" && this._string[this._currentIndex] <= "9" ) { exponent *= 10; exponent += (this._string[this._currentIndex] - "0"); this._currentIndex += 1; } } var number = integer + decimal; number *= sign; if (exponent) { number *= Math.pow(10, expsign * exponent); } if (startIndex === this._currentIndex) { return null; } this._skipOptionalSpacesOrDelimiter(); return number; }, _parseArcFlag: function () { if (this._currentIndex >= this._endIndex) { return null; } var flag = null; var flagChar = this._string[this._currentIndex]; this._currentIndex += 1; if (flagChar === "0") { flag = 0; } else if (flagChar === "1") { flag = 1; } else { return null; } this._skipOptionalSpacesOrDelimiter(); return flag; } }; var parsePathDataString = function (string): PathData[] { if (!string || string.length === 0) return []; var source = new Source(string); var pathData = []; if (source.initialCommandIsMoveTo()) { while (source.hasMoreData()) { var pathSeg = source.parseSegment(); if (pathSeg === null) { break; } else { pathData.push(pathSeg); } } } return pathData; } // @info // Get an array of corresponding cubic bezier curve parameters for given arc curve paramters. var arcToCubicCurves = function (x1, y1, x2, y2, r1, r2, angle, largeArcFlag, sweepFlag, _recursive?) { var degToRad = function (degrees) { return (Math.PI * degrees) / 180; }; var rotate = function (x, y, angleRad) { var X = x * Math.cos(angleRad) - y * Math.sin(angleRad); var Y = x * Math.sin(angleRad) + y * Math.cos(angleRad); return { x: X, y: Y }; }; var angleRad = degToRad(angle); var params = []; var f1, f2, cx, cy; if (_recursive) { f1 = _recursive[0]; f2 = _recursive[1]; cx = _recursive[2]; cy = _recursive[3]; } else { var p1 = rotate(x1, y1, -angleRad); x1 = p1.x; y1 = p1.y; var p2 = rotate(x2, y2, -angleRad); x2 = p2.x; y2 = p2.y; var x = (x1 - x2) / 2; var y = (y1 - y2) / 2; var h = (x * x) / (r1 * r1) + (y * y) / (r2 * r2); if (h > 1) { h = Math.sqrt(h); r1 = h * r1; r2 = h * r2; } var sign; if (largeArcFlag === sweepFlag) { sign = -1; } else { sign = 1; } var r1Pow = r1 * r1; var r2Pow = r2 * r2; var left = r1Pow * r2Pow - r1Pow * y * y - r2Pow * x * x; var right = r1Pow * y * y + r2Pow * x * x; var k = sign * Math.sqrt(Math.abs(left / right)); cx = k * r1 * y / r2 + (x1 + x2) / 2; cy = k * -r2 * x / r1 + (y1 + y2) / 2; f1 = Math.asin(parseFloat(((y1 - cy) / r2).toFixed(9))); f2 = Math.asin(parseFloat(((y2 - cy) / r2).toFixed(9))); if (x1 < cx) { f1 = Math.PI - f1; } if (x2 < cx) { f2 = Math.PI - f2; } if (f1 < 0) { f1 = Math.PI * 2 + f1; } if (f2 < 0) { f2 = Math.PI * 2 + f2; } if (sweepFlag && f1 > f2) { f1 = f1 - Math.PI * 2; } if (!sweepFlag && f2 > f1) { f2 = f2 - Math.PI * 2; } } var df = f2 - f1; if (Math.abs(df) > (Math.PI * 120 / 180)) { var f2old = f2; var x2old = x2; var y2old = y2; if (sweepFlag && f2 > f1) { f2 = f1 + (Math.PI * 120 / 180) * (1); } else { f2 = f1 + (Math.PI * 120 / 180) * (-1); } x2 = cx + r1 * Math.cos(f2); y2 = cy + r2 * Math.sin(f2); params = arcToCubicCurves(x2, y2, x2old, y2old, r1, r2, angle, 0, sweepFlag, [f2, f2old, cx, cy]); } df = f2 - f1; var c1 = Math.cos(f1); var s1 = Math.sin(f1); var c2 = Math.cos(f2); var s2 = Math.sin(f2); var t = Math.tan(df / 4); var hx = 4 / 3 * r1 * t; var hy = 4 / 3 * r2 * t; var m1 = [x1, y1]; var m2 = [x1 + hx * s1, y1 - hy * c1]; var m3 = [x2 + hx * s2, y2 - hy * c2]; var m4 = [x2, y2]; m2[0] = 2 * m1[0] - m2[0]; m2[1] = 2 * m1[1] - m2[1]; if (_recursive) { return [m2, m3, m4].concat(params); } else { params = [m2, m3, m4].concat(params); var curves = []; for (var i = 0; i < params.length; i += 3) { let r1 = rotate(params[i][0], params[i][1], angleRad); let r2 = rotate(params[i + 1][0], params[i + 1][1], angleRad); let r3 = rotate(params[i + 2][0], params[i + 2][1], angleRad); curves.push([r1.x, r1.y, r2.x, r2.y, r3.x, r3.y]); } return curves; } }; /*var clonePathData = function (pathData) { return pathData.map(function (seg) { return { type: seg.type, values: Array.prototype.slice.call(seg.values) } }); };*/ // @info // Takes any path data, returns path data that consists only from absolute commands. var absolutizePathData = function (pathData) { var absolutizedPathData = []; var currentX = null; var currentY = null; var subpathX = null; var subpathY = null; pathData.forEach(function (seg) { var type = seg.type; if (type === "M") { var x = seg.values[0]; var y = seg.values[1]; absolutizedPathData.push({ type: "M", values: [x, y] }); subpathX = x; subpathY = y; currentX = x; currentY = y; } else if (type === "m") { var x = currentX + seg.values[0]; var y = currentY + seg.values[1]; absolutizedPathData.push({ type: "M", values: [x, y] }); subpathX = x; subpathY = y; currentX = x; currentY = y; } else if (type === "L") { var x = seg.values[0]; var y = seg.values[1]; absolutizedPathData.push({ type: "L", values: [x, y] }); currentX = x; currentY = y; } else if (type === "l") { var x = currentX + seg.values[0]; var y = currentY + seg.values[1]; absolutizedPathData.push({ type: "L", values: [x, y] }); currentX = x; currentY = y; } else if (type === "C") { var x1 = seg.values[0]; var y1 = seg.values[1]; var x2 = seg.values[2]; var y2 = seg.values[3]; var x = seg.values[4]; var y = seg.values[5]; absolutizedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] }); currentX = x; currentY = y; } else if (type === "c") { var x1 = currentX + seg.values[0]; var y1 = currentY + seg.values[1]; var x2 = currentX + seg.values[2]; var y2 = currentY + seg.values[3]; var x = currentX + seg.values[4]; var y = currentY + seg.values[5]; absolutizedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] }); currentX = x; currentY = y; } else if (type === "Q") { var x1 = seg.values[0]; var y1 = seg.values[1]; var x = seg.values[2]; var y = seg.values[3]; absolutizedPathData.push({ type: "Q", values: [x1, y1, x, y] }); currentX = x; currentY = y; } else if (type === "q") { var x1 = currentX + seg.values[0]; var y1 = currentY + seg.values[1]; var x = currentX + seg.values[2]; var y = currentY + seg.values[3]; absolutizedPathData.push({ type: "Q", values: [x1, y1, x, y] }); currentX = x; currentY = y; } else if (type === "A") { var x = seg.values[5]; var y = seg.values[6]; absolutizedPathData.push({ type: "A", values: [seg.values[0], seg.values[1], seg.values[2], seg.values[3], seg.values[4], x, y] }); currentX = x; currentY = y; } else if (type === "a") { var x = currentX + seg.values[5]; var y = currentY + seg.values[6]; absolutizedPathData.push({ type: "A", values: [seg.values[0], seg.values[1], seg.values[2], seg.values[3], seg.values[4], x, y] }); currentX = x; currentY = y; } else if (type === "H") { var x = seg.values[0]; absolutizedPathData.push({ type: "H", values: [x] }); currentX = x; } else if (type === "h") { var x = currentX + seg.values[0]; absolutizedPathData.push({ type: "H", values: [x] }); currentX = x; } else if (type === "V") { var y = seg.values[0]; absolutizedPathData.push({ type: "V", values: [y] }); currentY = y; } else if (type === "v") { var y = currentY + seg.values[0]; absolutizedPathData.push({ type: "V", values: [y] }); currentY = y; } else if (type === "S") { var x2 = seg.values[0]; var y2 = seg.values[1]; var x = seg.values[2]; var y = seg.values[3]; absolutizedPathData.push({ type: "S", values: [x2, y2, x, y] }); currentX = x; currentY = y; } else if (type === "s") { var x2 = currentX + seg.values[0]; var y2 = currentY + seg.values[1]; var x = currentX + seg.values[2]; var y = currentY + seg.values[3]; absolutizedPathData.push({ type: "S", values: [x2, y2, x, y] }); currentX = x; currentY = y; } else if (type === "T") { var x = seg.values[0]; var y = seg.values[1] absolutizedPathData.push({ type: "T", values: [x, y] }); currentX = x; currentY = y; } else if (type === "t") { var x = currentX + seg.values[0]; var y = currentY + seg.values[1] absolutizedPathData.push({ type: "T", values: [x, y] }); currentX = x; currentY = y; } else if (type === "Z" || type === "z") { absolutizedPathData.push({ type: "Z", values: [] }); currentX = subpathX; currentY = subpathY; } }); return absolutizedPathData; }; // @info // Takes path data that consists only from absolute commands, returns path data that consists only from // "M", "L", "C" and "Z" commands. var reducePathData = function (pathData) { var reducedPathData = []; var lastType = null; var lastControlX = null; var lastControlY = null; var currentX = null; var currentY = null; var subpathX = null; var subpathY = null; pathData.forEach(function (seg) { if (seg.type === "M") { var x = seg.values[0]; var y = seg.values[1]; reducedPathData.push({ type: "M", values: [x, y] }); subpathX = x; subpathY = y; currentX = x; currentY = y; } else if (seg.type === "C") { var x1 = seg.values[0]; var y1 = seg.values[1]; var x2 = seg.values[2]; var y2 = seg.values[3]; var x = seg.values[4]; var y = seg.values[5]; reducedPathData.push({ type: "C", values: [x1, y1, x2, y2, x, y] }); lastControlX = x2; lastControlY = y2; currentX = x; currentY = y; } else if (seg.type === "L") { var x = seg.values[0]; var y = seg.values[1]; reducedPathData.push({ type: "L", values: [x, y] }); currentX = x; currentY = y; } else if (seg.type === "H") { var x = seg.values[0]; reducedPathData.push({ type: "L", values: [x, currentY] }); currentX = x; } else if (seg.type === "V") { var y = seg.values[0]; reducedPathData.push({ type: "L", values: [currentX, y] }); currentY = y; } else if (seg.type === "S") { var x2 = seg.values[0]; var y2 = seg.values[1]; var x = seg.values[2]; var y = seg.values[3]; var cx1, cy1; if (lastType === "C" || lastType === "S") { cx1 = currentX + (currentX - lastControlX); cy1 = currentY + (currentY - lastControlY); } else { cx1 = currentX; cy1 = currentY; } reducedPathData.push({ type: "C", values: [cx1, cy1, x2, y2, x, y] }); lastControlX = x2; lastControlY = y2; currentX = x; currentY = y; } else if (seg.type === "T") { var x = seg.values[0]; var y = seg.values[1]; var x1, y1; if (lastType === "Q" || lastType === "T") { x1 = currentX + (currentX - lastControlX); y1 = currentY + (currentY - lastControlY); } else { x1 = currentX; y1 = currentY; } var cx1 = currentX + 2 * (x1 - currentX) / 3; var cy1 = currentY + 2 * (y1 - currentY) / 3; var cx2 = x + 2 * (x1 - x) / 3; var cy2 = y + 2 * (y1 - y) / 3; reducedPathData.push({ type: "C", values: [cx1, cy1, cx2, cy2, x, y] }); lastControlX = x1; lastControlY = y1; currentX = x; currentY = y; } else if (seg.type === "Q") { var x1 = seg.values[0]; var y1 = seg.values[1]; var x = seg.values[2]; var y = seg.values[3]; var cx1 = currentX + 2 * (x1 - currentX) / 3; var cy1 = currentY + 2 * (y1 - currentY) / 3; var cx2 = x + 2 * (x1 - x) / 3; var cy2 = y + 2 * (y1 - y) / 3; reducedPathData.push({ type: "C", values: [cx1, cy1, cx2, cy2, x, y] }); lastControlX = x1; lastControlY = y1; currentX = x; currentY = y; } else if (seg.type === "A") { let r1 = Math.abs(seg.values[0]); let r2 = Math.abs(seg.values[1]); var angle = seg.values[2]; var largeArcFlag = seg.values[3]; var sweepFlag = seg.values[4]; var x = seg.values[5]; var y = seg.values[6]; if (r1 === 0 || r2 === 0) { reducedPathData.push({ type: "C", values: [currentX, currentY, x, y, x, y] }); currentX = x; currentY = y; } else { if (currentX !== x || currentY !== y) { var curves = arcToCubicCurves(currentX, currentY, x, y, r1, r2, angle, largeArcFlag, sweepFlag); curves.forEach(function (curve) { reducedPathData.push({ type: "C", values: curve }); }); currentX = x; currentY = y; } } } else if (seg.type === "Z") { reducedPathData.push(seg); currentX = subpathX; currentY = subpathY; } lastType = seg.type; }); return reducedPathData; }; SVGPathElement.prototype.getPathData = function (options) { if (options && options.normalize) { /*if (this[$cachedNormalizedPathData]) { return clonePathData(this[$cachedNormalizedPathData]); } else */ { let pathData; /*if (this[$cachedPathData]) { pathData = clonePathData(this[$cachedPathData]); } else */{ pathData = parsePathDataString(this.getAttribute("d") || ""); //this[$cachedPathData] = clonePathData(pathData); } let normalizedPathData = reducePathData(absolutizePathData(pathData)); //this[$cachedNormalizedPathData] = clonePathData(normalizedPathData); return normalizedPathData; } } else { /*if (this[$cachedPathData]) { return clonePathData(this[$cachedPathData]); } else*/ { let pathData = parsePathDataString(this.getAttribute("d") || ""); //this[$cachedPathData] = clonePathData(pathData); return pathData; } } }; SVGPathElement.prototype.setPathData = function (pathData) { if (pathData.length === 0) { this.removeAttribute("d"); } else { let d = ""; for (let i = 0, l = pathData.length; i < l; i += 1) { let seg: any = pathData[i]; if (i > 0) { d += " "; } d += seg.type; if (seg.values && seg.values.length > 0) { d += " " + seg.values.join(" "); } } this.setAttribute("d", d); } }; SVGRectElement.prototype.getPathData = function (options) { var x = this.x.baseVal.value; var y = this.y.baseVal.value; var width = this.width.baseVal.value; var height = this.height.baseVal.value; var rx = this.hasAttribute("rx") ? this.rx.baseVal.value : this.ry.baseVal.value; var ry = this.hasAttribute("ry") ? this.ry.baseVal.value : this.rx.baseVal.value; if (rx > width / 2) { rx = width / 2; } if (ry > height / 2) { ry = height / 2; } var pathData: any = [ { type: "M", values: [x + rx, y] }, { type: "H", values: [x + width - rx] }, { type: "A", values: [rx, ry, 0, 0, 1, x + width, y + ry] }, { type: "V", values: [y + height - ry] }, { type: "A", values: [rx, ry, 0, 0, 1, x + width - rx, y + height] }, { type: "H", values: [x + rx] }, { type: "A", values: [rx, ry, 0, 0, 1, x, y + height - ry] }, { type: "V", values: [y + ry] }, { type: "A", values: [rx, ry, 0, 0, 1, x + rx, y] }, { type: "Z", values: [] } ]; // Get rid of redundant "A" segs when either rx or ry is 0 pathData = pathData.filter(function (s) { return s.type === "A" && (s.values[0] === 0 || s.values[1] === 0) ? false : true; }); if (options && options.normalize === true) { pathData = reducePathData(pathData); } return pathData; }; SVGCircleElement.prototype.getPathData = function (options) { var cx = this.cx.baseVal.value; var cy = this.cy.baseVal.value; var r = this.r.baseVal.value; var pathData: any = [ { type: "M", values: [cx + r, cy] }, { type: "A", values: [r, r, 0, 0, 1, cx, cy + r] }, { type: "A", values: [r, r, 0, 0, 1, cx - r, cy] }, { type: "A", values: [r, r, 0, 0, 1, cx, cy - r] }, { type: "A", values: [r, r, 0, 0, 1, cx + r, cy] }, { type: "Z", values: [] } ]; if (options && options.normalize === true) { pathData = reducePathData(pathData); } return pathData; }; SVGEllipseElement.prototype.getPathData = function (options) { var cx = this.cx.baseVal.value; var cy = this.cy.baseVal.value; var rx = this.rx.baseVal.value; var ry = this.ry.baseVal.value; var pathData: any = [ { type: "M", values: [cx + rx, cy] }, { type: "A", values: [rx, ry, 0, 0, 1, cx, cy + ry] }, { type: "A", values: [rx, ry, 0, 0, 1, cx - rx, cy] }, { type: "A", values: [rx, ry, 0, 0, 1, cx, cy - ry] }, { type: "A", values: [rx, ry, 0, 0, 1, cx + rx, cy] }, { type: "Z", values: [] } ]; if (options && options.normalize === true) { pathData = reducePathData(pathData); } return pathData; }; SVGLineElement.prototype.getPathData = function () { return [ { type: "M", values: [this.x1.baseVal.value, this.y1.baseVal.value] }, { type: "L", values: [this.x2.baseVal.value, this.y2.baseVal.value] } ]; }; SVGPolylineElement.prototype.getPathData = function () { var pathData = []; for (var i = 0; i < this.points.numberOfItems; i += 1) { var point = this.points.getItem(i); pathData.push({ type: (i === 0 ? "M" : "L"), values: [point.x, point.y] }); } return pathData; }; SVGPolygonElement.prototype.getPathData = function () { var pathData = []; for (var i = 0; i < this.points.numberOfItems; i += 1) { var point = this.points.getItem(i); pathData.push({ type: (i === 0 ? "M" : "L"), values: [point.x, point.y] }); } pathData.push({ type: "Z", values: [] }); return pathData; }; })(); } export { } export declare type PathDataM = { type: 'M' | 'm', values: [x: number, y: number] } export declare type PathDataL = { type: 'L' | 'l', values: [x: number, y: number] } export declare type PathDataT = { type: 'T' | 't', values: [x: number, y: number] } export declare type PathDataH = { type: 'H' | 'h', values: [x: number] } export declare type PathDataV = { type: 'V' | 'v', values: [y: number] } export declare type PathDataZ = { type: 'Z' | 'z', values?: [] } export declare type PathDataC = { type: 'C' | 'c', values: [x1: number, y1: number, x2: number, y2: number, x: number, y: number] } export declare type PathDataS = { type: 'S' | 's', values: [x2: number, y2: number, x: number, y: number] } export declare type PathDataQ = { type: 'Q' | 'q', values: [x1: number, y1: number, x: number, y: number] } export declare type PathDataA = { type: 'A' | 'a', values: [rx: number, ry: number, ang: number, flag1: 0 | 1, flag2: 0 | 1, x: number, y: number] } export declare type PathData = { type: string } & (PathDataM | PathDataL | PathDataH | PathDataV | PathDataZ | PathDataC | PathDataS | PathDataQ | PathDataT | PathDataA)[]; export function straightenLine(p1: IPoint, p2: IPoint, stepDeg = 45): IPoint { const alpha = calculateAlpha(p1, p2); const snapped = Math.round(alpha / stepDeg) * stepDeg; const angle = (snapped + 360) % 360; const rad = angle * Math.PI / 180; const dx = p2.x - p1.x; const dy = p2.y - p1.y; const length = Math.sqrt(dx * dx + dy * dy); const newX = p1.x + Math.cos(rad) * length; const newY = p1.y - Math.sin(rad) * length; return { x: newX, y: newY }; } export function calculateNormLegth(p1: IPoint, p2: IPoint): number { let normLenght; let currentLength = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); let alpha = calculateAlpha(p1, p2); let beta = alpha - ((Math.floor(alpha / 90) * 90) + 45); normLenght = currentLength * Math.cos(beta * (Math.PI / 180)) / Math.sqrt(2); return normLenght; } export function calculateAlpha(p1: IPoint, p2: IPoint): number { let alpha = - 1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI; if (alpha < 0) alpha += 360; return alpha; } export function interpolateLinePoints(p1: IPoint, p2: IPoint, maxDistance: number): IPoint[] { const dx = p2.x - p1.x; const dy = p2.y - p1.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance === 0) { return []; } if (maxDistance <= 0) { return [p2]; } const segments = Math.max(1, Math.ceil(distance / maxDistance)); const points: IPoint[] = []; for (let i = 1; i <= segments; i++) { points.push({ x: p1.x + dx * i / segments, y: p1.y + dy * i / segments }); } return points; } export function moveSVGPath(path: SVGPathElement, xFactor: number, yFactor: number): string { let newPathData = ""; let pd = path.getPathData({ normalize: true }); { for (let p of pd) { switch (p.type) { case ('M'): case ('m'): case ('L'): case ('l'): case ('T'): case ('t'): newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " "; break; case ('Z'): case ('z'): newPathData += p.type + " "; break; case ('C'): case ('c'): newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " " + (p.values[4] - xFactor) + " " + (p.values[5] - yFactor) + " "; break; case ('S'): case ('s'): case ('Q'): case ('q'): newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " "; break; case ('A'): case ('a'): newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + (p.values[5] - xFactor) + " " + (p.values[6] - yFactor) + " "; break; } } } return newPathData; } export function createPathD(path: PathData[]) { let pathD: string = ""; for (let p of path) { pathD += p.type + " "; for (var i = 0; i < p.values.length; i++) { if (p.values[i] != null && !isNaN(p.values[i])) { pathD += p.values[i] + " "; } } } return pathD; } declare global { interface SVGGraphicsElement { getPathData(options?: { normalize?: boolean }): PathData[] isPointInStroke(point: { x: number, y: number }) isPointInFill(point: { x: number, y: number }) } interface SVGPathElement { getPathData(options?: { normalize?: boolean }): PathData[] setPathData(pathData: PathData[]) } interface SVGRectElement { getPathData(options?: { normalize?: boolean }): PathData[] } interface SVGCircleElement { getPathData(options?: { normalize?: boolean }): PathData[] } interface SVGEllipseElement { getPathData(options?: { normalize?: boolean }): PathData[] } interface SVGLineElement { getPathData(options?: { normalize?: boolean }): PathData[] }interface SVGPolylineElement { getPathData(options?: { normalize?: boolean }): PathData[] } interface SVGPolygonElement { getPathData(options?: { normalize?: boolean }): PathData[] } } ================================================ FILE: packages/web-component-designer/src/elements/helper/PopupHelper.ts ================================================ export function showPopup(content: Element, anchorEl: HTMLElement, closedCallback?: () => void): () => void { const root = anchorEl.getRootNode(); // 🧱 Create popup element const popupEl = document.createElement('div'); // Enable Popup API popupEl.popover = 'auto'; // 📦 Insert content if (typeof content === 'string') { popupEl.innerHTML = content; } else { popupEl.append(content); } // 📍 Mount into SAME root (required for anchor positioning) if (root instanceof ShadowRoot) { root.appendChild(popupEl); } else { document.body.appendChild(popupEl); } Object.assign(popupEl.style, { positionArea: 'right bottom', positionTryFallbacks: ` flip-block, flip-inline, top, bottom, left, right ` }); // 🧹 cleanup when closed popupEl.addEventListener('toggle', () => { if (!popupEl.matches(':popover-open')) { popupEl.remove(); closedCallback?.(); } }, { once: true }); //@ts-ignore // 🚀 Open via Popup API popupEl.showPopover({ source: anchorEl }); // 🔙 return close callback return () => { if (popupEl.matches(':popover-open')) { popupEl.hidePopover(); } popupEl.remove(); closedCallback?.(); }; } ================================================ FILE: packages/web-component-designer/src/elements/helper/QuadEdgeHandleHelper.ts ================================================ import { IPoint } from '../../interfaces/IPoint.js'; function normalize(vector: IPoint) { const length = Math.hypot(vector.x, vector.y); if (length < 1e-8) { return { x: 0, y: 0 }; } return { x: vector.x / length, y: vector.y / length }; } export function getQuadCenter(quad: DOMQuad): IPoint { return { x: (quad.p1.x + quad.p2.x + quad.p3.x + quad.p4.x) / 4, y: (quad.p1.y + quad.p2.y + quad.p3.y + quad.p4.y) / 4 }; } export function getEdgeMidpoint(start: IPoint, end: IPoint): IPoint { return { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 }; } export function getOutwardNormal(start: IPoint, end: IPoint, quadCenter: IPoint, fallback: IPoint): IPoint { const dx = end.x - start.x; const dy = end.y - start.y; let normal = normalize({ x: -dy, y: dx }); if (normal.x === 0 && normal.y === 0) { normal = normalize(fallback); } const midpoint = getEdgeMidpoint(start, end); const toCenter = { x: quadCenter.x - midpoint.x, y: quadCenter.y - midpoint.y }; if ((normal.x * toCenter.x) + (normal.y * toCenter.y) > 0) { normal = { x: -normal.x, y: -normal.y }; } return normal; } export function getEdgeOffsetPoint(start: IPoint, end: IPoint, quadCenter: IPoint, distance: number, fallback: IPoint): IPoint { const midpoint = getEdgeMidpoint(start, end); const normal = getOutwardNormal(start, end, quadCenter, fallback); return { x: midpoint.x + (normal.x * distance), y: midpoint.y + (normal.y * distance) }; } ================================================ FILE: packages/web-component-designer/src/elements/helper/Screenshot.ts ================================================ import { getBoundingClientRectAlsoForDisplayContents } from "./ElementHelper.js"; // for screenshots to be genrated properly, you need to select the current tab only in media source selector export class Screenshot { private static _canvas: HTMLCanvasElement; private static _context: CanvasRenderingContext2D; private static _video: HTMLVideoElement; private static _captureStream: MediaStream; private static _disableStream() { Screenshot._captureStream.getTracks().forEach(track => track.stop()); Screenshot._canvas = null; } static get screenshotsEnabled() { return Screenshot._captureStream && Screenshot._captureStream.active; } static async enableScreenshots(elementHostForVideo: Element = document.body) { if (Screenshot._captureStream && !Screenshot._captureStream.active) { Screenshot._disableStream(); } if (Screenshot._canvas == null) { Screenshot._canvas = document.createElement("canvas"); Screenshot._context = Screenshot._canvas.getContext("2d"); Screenshot._video = document.createElement("video"); const gdmOptions = { video: { cursor: "never", displaySurface: 'browser' }, audio: false, selfBrowserSurface: "include", preferCurrentTab: true } Screenshot._video.style.display = "none"; elementHostForVideo.appendChild(Screenshot._video); try { //@ts-ignore Screenshot._captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions); } catch (e) { Screenshot._canvas = null; throw e; } //@ts-ignore const captureType = Screenshot._captureStream.getVideoTracks()[0].getSettings().displaySurface if (captureType != 'browser') { Screenshot._disableStream(); alert('You need to share the current Tab, for the screenshot API to work'); throw 'You need to share the current Tab, for the screenshot API to work'; } Screenshot._video.srcObject = Screenshot._captureStream; Screenshot._video.play(); await Screenshot._sleep(2000); } } static async takeScreenshot(element: Element, width: number = 100, height: number = 100, elementHostForVideo: Element = document.body): Promise { await Screenshot.enableScreenshots(elementHostForVideo); const rect = getBoundingClientRectAlsoForDisplayContents(element); Screenshot._canvas.width = width; Screenshot._canvas.height = height; Screenshot._context.drawImage(Screenshot._video, 0, 0, 1, 1, 0, 0, width, height); const factorX = Screenshot._video.videoWidth / window.innerWidth; const factorY = Screenshot._video.videoHeight / window.innerHeight; Screenshot._context.drawImage(Screenshot._video, rect.left * factorX, rect.top * factorY, rect.width * factorX, rect.height * factorY, 0, 0, width, height); const frame = Screenshot._canvas.toDataURL("image/png"); return frame; } private static _sleep(timeout: number) { let resolve = null const promise = new Promise(r => resolve = r) window.setTimeout(resolve, timeout) return promise } } ================================================ FILE: packages/web-component-designer/src/elements/helper/SelectionHelper.ts ================================================ export function shadowrootGetSelection(shadowRoot: ShadowRoot): Selection | ArrayLike | null { let selection = document.getSelection(); if ((shadowRoot).getSelection) selection = (shadowRoot).getSelection() else if ((selection).getComposedRanges) selection = (selection).getComposedRanges(shadowRoot); return selection; } function wrapTextNodesInSpan(range: Range, spans: HTMLSpanElement[]) { function wrapNode(node: Node) { const parent = node.parentNode; if (!parent) return; const span = document.createElement('span'); spans.push(span); parent.insertBefore(span, node); span.appendChild(node); } function canReuseSpan(node: Node): node is HTMLSpanElement { return node instanceof HTMLSpanElement && Array.from(node.childNodes).every(x => x.nodeType === Node.TEXT_NODE); } function processNode(node: Node) { switch (node.nodeType) { case Node.TEXT_NODE: wrapNode(node); break; case Node.DOCUMENT_FRAGMENT_NODE: case Node.ELEMENT_NODE: if (canReuseSpan(node)) { spans.push(node); break; } Array.from(node.childNodes).forEach(processNode); break; } } const fragment = range.extractContents(); processNode(fragment); range.insertNode(fragment); } function staticRangeToRange(staticRange: StaticRange) { const range = document.createRange(); range.setStart(staticRange.startContainer, staticRange.startOffset); range.setEnd(staticRange.endContainer, staticRange.endOffset); return range; } export function wrapSelectionInSpans(selection: Selection | ArrayLike) { const spans: HTMLSpanElement[] = []; if ('getRangeAt' in selection) { if (!selection.rangeCount) return spans; const range = selection.getRangeAt(0); wrapTextNodesInSpan(range, spans); } else { const staticRange = selection[0]; if (!staticRange) return spans; wrapTextNodesInSpan(staticRangeToRange(staticRange), spans); } if ('removeAllRanges' in selection && selection.removeAllRanges) selection.removeAllRanges(); return spans; } ================================================ FILE: packages/web-component-designer/src/elements/helper/SimpleTextWriter.ts ================================================ import { ITextWriter } from './ITextWriter.js'; export class SimpleTextWriter implements ITextWriter { private _textHolder: string = '' public get position(): number { return this._textHolder.length; } public isLastCharNewline() { return this._textHolder[this._textHolder.length - 1] === '\n'; } public levelRaise() { } public levelShrink() { } public write(text: string) { this._textHolder += text; } public writeLine(text: string) { this._textHolder += text; } public writeIndent() { } public writeNewline() { } public getString() { return this._textHolder; } } ================================================ FILE: packages/web-component-designer/src/elements/helper/StylesheetHelper.ts ================================================ export function stylesheetFromString(window: Window, text: string) { //@ts-ignore const newStylesheet = new window.CSSStyleSheet(); newStylesheet.replaceSync(text); return newStylesheet; } export function stylesheetToString(stylesheet: CSSStyleSheet) { return Array.from(stylesheet.cssRules).map(rule => rule.cssText).join('\n'); } ================================================ FILE: packages/web-component-designer/src/elements/helper/SvgHelper.ts ================================================ import { IPoint } from '../../interfaces/IPoint.js'; import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js'; import './PathDataPolyfill.js'; import { createPathD, PathData } from './PathDataPolyfill.js'; type ProjectiveMatrix = [number, number, number, number, number, number, number, number, number]; interface SvgOverlayTransform { bbox: DOMRect; matrix: ProjectiveMatrix; inverseMatrix: ProjectiveMatrix; } export interface SvgOverlayPathOptions { includeMarkers?: boolean; } interface NormalizedPathSegment { start: IPoint; end: IPoint; startAngle: number; endAngle: number; } interface MarkerPlacement { marker: SVGMarkerElement; point: IPoint; angle: number; } interface SvgViewBoxTransform { transform: string; scaleX: number; scaleY: number; translateX: number; translateY: number; } export function isVisualSvgElement(element: SVGElement) { let el: Element = element; while (el) { if (el instanceof (el.ownerDocument.defaultView ?? window).SVGSVGElement) return true; if (el instanceof (el.ownerDocument.defaultView ?? window).SVGDefsElement) return false; if (el instanceof (el.ownerDocument.defaultView ?? window).SVGMetadataElement) return false; el = el.parentElement; } return true; } export function svg(strings: TemplateStringsArray, ...values: any[]) { const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svgEl.innerHTML = svgAsString(strings, ...values); return svgEl; } export function svgAsString(strings: TemplateStringsArray, ...values: any[]) { if (strings.length === 1) return strings.raw[0]; else { let r = '' for (let i = 0; i < strings.length; i++) { r += strings[i] + (values[i] ?? ''); } return r; } } export function isSupportedSvgGeometryElement(element: Element): element is SVGGraphicsElement { return element instanceof SVGPathElement || element instanceof SVGRectElement || element instanceof SVGLineElement || element instanceof SVGCircleElement || element instanceof SVGEllipseElement || element instanceof SVGPolygonElement || element instanceof SVGPolylineElement; } export function toOverlayPointFromSvgUserSpace(element: Element, designerCanvas: IDesignerCanvas, point: IPoint): IPoint { const transform = _getSvgOverlayTransform(element, designerCanvas); if (transform) { const local = _toElementReferenceBoxPoint(element, point); return _applyProjectiveMatrix(transform.matrix, local.x / transform.bbox.width, local.y / transform.bbox.height); } const fallbackLocalPoint = _toElementReferenceBoxPoint(element, point); const tp = designerCanvas.canvas.convertPointFromNode(fallbackLocalPoint, element, { iframes: designerCanvas.iframes }); return { x: tp.x, y: tp.y }; } export function fromOverlayPointToSvgUserSpace(element: Element, designerCanvas: IDesignerCanvas, point: IPoint): IPoint { const transform = _getSvgOverlayTransform(element, designerCanvas); if (transform) { const normalized = _applyProjectiveMatrix(transform.inverseMatrix, point.x, point.y); return { x: transform.bbox.x + normalized.x * transform.bbox.width, y: transform.bbox.y + normalized.y * transform.bbox.height, }; } const tp = element.convertPointFromNode({ x: point.x, y: point.y }, designerCanvas.canvas, { iframes: designerCanvas.iframes }); return _fromElementReferenceBoxPoint(element, { x: tp.x, y: tp.y }); } export function createOverlayPathDataFromSvgGeometryElement(element: Element, designerCanvas: IDesignerCanvas, options?: SvgOverlayPathOptions): string | null { const basePathData = _createOverlayPathDataWithoutMarkers(element, designerCanvas); const includeMarkers = options?.includeMarkers !== false; if (!includeMarkers) { return basePathData; } const markerPathData = _createMarkerOverlayPathData(element, designerCanvas); if (basePathData && markerPathData) { return `${basePathData} ${markerPathData}`; } return basePathData ?? markerPathData; } function _createOverlayPathDataWithoutMarkers(element: Element, designerCanvas: IDesignerCanvas): string | null { if (!isSupportedSvgGeometryElement(element)) { return null; } const getPathData = (element as any).getPathData as ((options?: { normalize?: boolean }) => PathData[]) | undefined; if (!getPathData) { return null; } const sourcePathData = getPathData.call(element, { normalize: true }) ?? []; if (!sourcePathData.length) { return null; } const transformedPathData: PathData[] = []; let currentPoint: IPoint = { x: 0, y: 0 }; let subPathStart: IPoint = { x: 0, y: 0 }; for (const command of sourcePathData) { const type = command.type.toUpperCase(); const isRelative = command.type !== type; const values = command.values ?? []; const toAbsolute = (x: number, y: number): IPoint => { if (isRelative) { return { x: currentPoint.x + x, y: currentPoint.y + y }; } return { x, y }; }; const toOverlay = (x: number, y: number): IPoint => { const absolutePoint = toAbsolute(x, y); return toOverlayPointFromSvgUserSpace(element, designerCanvas, absolutePoint); }; switch (type) { case 'M': { const overlayPoint = toOverlay(values[0], values[1]); transformedPathData.push({ type: 'M', values: [overlayPoint.x, overlayPoint.y] } as any); currentPoint = toAbsolute(values[0], values[1]); subPathStart = { ...currentPoint }; break; } case 'L': { const overlayPoint = toOverlay(values[0], values[1]); transformedPathData.push({ type: 'L', values: [overlayPoint.x, overlayPoint.y] } as any); currentPoint = toAbsolute(values[0], values[1]); break; } case 'H': { const target = isRelative ? { x: currentPoint.x + values[0], y: currentPoint.y } : { x: values[0], y: currentPoint.y }; const overlayPoint = toOverlayPointFromSvgUserSpace(element, designerCanvas, target); transformedPathData.push({ type: 'L', values: [overlayPoint.x, overlayPoint.y] } as any); currentPoint = target; break; } case 'V': { const target = isRelative ? { x: currentPoint.x, y: currentPoint.y + values[0] } : { x: currentPoint.x, y: values[0] }; const overlayPoint = toOverlayPointFromSvgUserSpace(element, designerCanvas, target); transformedPathData.push({ type: 'L', values: [overlayPoint.x, overlayPoint.y] } as any); currentPoint = target; break; } case 'C': { const cp1 = toOverlay(values[0], values[1]); const cp2 = toOverlay(values[2], values[3]); const end = toOverlay(values[4], values[5]); transformedPathData.push({ type: 'C', values: [cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y] } as any); currentPoint = toAbsolute(values[4], values[5]); break; } case 'S': { const cp2 = toOverlay(values[0], values[1]); const end = toOverlay(values[2], values[3]); transformedPathData.push({ type: 'S', values: [cp2.x, cp2.y, end.x, end.y] } as any); currentPoint = toAbsolute(values[2], values[3]); break; } case 'Q': { const cp1 = toOverlay(values[0], values[1]); const end = toOverlay(values[2], values[3]); transformedPathData.push({ type: 'Q', values: [cp1.x, cp1.y, end.x, end.y] } as any); currentPoint = toAbsolute(values[2], values[3]); break; } case 'T': { const end = toOverlay(values[0], values[1]); transformedPathData.push({ type: 'T', values: [end.x, end.y] } as any); currentPoint = toAbsolute(values[0], values[1]); break; } case 'A': { const end = toOverlay(values[5], values[6]); transformedPathData.push({ type: 'A', values: [values[0], values[1], values[2], values[3], values[4], end.x, end.y] } as any); currentPoint = toAbsolute(values[5], values[6]); break; } case 'Z': { transformedPathData.push({ type: 'Z', values: [] } as any); currentPoint = { ...subPathStart }; break; } } } return createPathD(transformedPathData); } function _createMarkerOverlayPathData(element: Element, designerCanvas: IDesignerCanvas): string | null { if (!(element instanceof SVGGraphicsElement)) { return null; } const placements = _collectMarkerPlacements(element); if (!placements.length) { return null; } const ownerSvg = element.ownerSVGElement; if (!ownerSvg) { return null; } const tempGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); tempGroup.setAttribute('visibility', 'hidden'); tempGroup.setAttribute('pointer-events', 'none'); ownerSvg.appendChild(tempGroup); try { const pathParts: string[] = []; for (const placement of placements) { const markerInstance = _createMarkerInstanceGroup(element, placement); if (!markerInstance) { continue; } tempGroup.appendChild(markerInstance); const markerGraphics = markerInstance.querySelectorAll('path, rect, line, circle, ellipse, polygon, polyline'); for (const markerGraphic of markerGraphics) { const pathData = _createOverlayPathDataWithoutMarkers(markerGraphic, designerCanvas); if (pathData) { pathParts.push(pathData); } } } return pathParts.length ? pathParts.join(' ') : null; } finally { tempGroup.remove(); } } function _collectMarkerPlacements(element: SVGGraphicsElement): MarkerPlacement[] { const segments = _getNormalizedPathSegments(element); if (!segments.length) { return []; } const placements: MarkerPlacement[] = []; const startMarker = _resolveMarkerReference(element, 'marker-start'); const midMarker = _resolveMarkerReference(element, 'marker-mid'); const endMarker = _resolveMarkerReference(element, 'marker-end'); if (startMarker) { placements.push({ marker: startMarker, point: segments[0].start, angle: _resolveMarkerAngle(startMarker, segments[0].startAngle, undefined, true) }); } if (midMarker) { for (let i = 0; i < segments.length - 1; i++) { if (!_pointsEqual(segments[i].end, segments[i + 1].start)) { continue; } placements.push({ marker: midMarker, point: segments[i].end, angle: _resolveMarkerAngle(midMarker, segments[i].endAngle, segments[i + 1].startAngle, false) }); } if (_pointsEqual(segments[segments.length - 1].end, segments[0].start) && segments.length > 1) { placements.push({ marker: midMarker, point: segments[segments.length - 1].end, angle: _resolveMarkerAngle(midMarker, segments[segments.length - 1].endAngle, segments[0].startAngle, false) }); } } if (endMarker) { const lastSegment = segments[segments.length - 1]; placements.push({ marker: endMarker, point: lastSegment.end, angle: _resolveMarkerAngle(endMarker, lastSegment.endAngle, undefined, false) }); } return placements; } function _getNormalizedPathSegments(element: SVGGraphicsElement): NormalizedPathSegment[] { const getPathData = (element as any).getPathData as ((options?: { normalize?: boolean }) => PathData[]) | undefined; if (!getPathData) { return []; } const pathData = getPathData.call(element, { normalize: true }) ?? []; const segments: NormalizedPathSegment[] = []; let currentPoint: IPoint = { x: 0, y: 0 }; let subPathStart: IPoint = { x: 0, y: 0 }; for (const command of pathData) { switch (command.type) { case 'M': { currentPoint = { x: command.values[0], y: command.values[1] }; subPathStart = { ...currentPoint }; break; } case 'L': { const endPoint = { x: command.values[0], y: command.values[1] }; const angle = _angleBetween(currentPoint, endPoint); if (angle != null) { segments.push({ start: { ...currentPoint }, end: endPoint, startAngle: angle, endAngle: angle }); } currentPoint = endPoint; break; } case 'C': { const cp1 = { x: command.values[0], y: command.values[1] }; const cp2 = { x: command.values[2], y: command.values[3] }; const endPoint = { x: command.values[4], y: command.values[5] }; const startAngle = _getFirstUsableAngle([currentPoint, cp1, cp2, endPoint]); const endAngle = _getLastUsableAngle([currentPoint, cp1, cp2, endPoint]); if (startAngle != null && endAngle != null) { segments.push({ start: { ...currentPoint }, end: endPoint, startAngle, endAngle }); } currentPoint = endPoint; break; } case 'Z': { const angle = _angleBetween(currentPoint, subPathStart); if (angle != null) { segments.push({ start: { ...currentPoint }, end: { ...subPathStart }, startAngle: angle, endAngle: angle }); } currentPoint = { ...subPathStart }; break; } } } return segments; } function _resolveMarkerReference(element: SVGGraphicsElement, attributeName: 'marker-start' | 'marker-mid' | 'marker-end'): SVGMarkerElement | null { const reference = element.getAttribute(attributeName)?.trim(); if (!reference) { return null; } const urlMatch = /^url\((['"]?)(.*?)\1\)$/.exec(reference); const url = urlMatch?.[2] ?? reference; if (!url.startsWith('#')) { return null; } const rootNode = element.getRootNode() as ParentNode; const marker = typeof rootNode.querySelector === 'function' ? rootNode.querySelector(url) : null; return marker instanceof SVGMarkerElement ? marker : null; } function _createMarkerInstanceGroup(sourceElement: SVGGraphicsElement, placement: MarkerPlacement): SVGGElement | null { const marker = placement.marker; if (!marker.childNodes.length) { return null; } const markerScale = _getMarkerUnitsScale(sourceElement, marker); const outerGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); const transformParts = [ `translate(${placement.point.x} ${placement.point.y})`, `rotate(${placement.angle})` ]; if (markerScale !== 1) { transformParts.push(`scale(${markerScale})`); } outerGroup.setAttribute('transform', transformParts.join(' ')); const viewBoxTransform = _createViewBoxTransform(marker); const mappedRefPoint = _mapMarkerPointToViewport(marker, viewBoxTransform, { x: _getAnimatedLengthValue(marker.refX), y: _getAnimatedLengthValue(marker.refY) }); const refGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); refGroup.setAttribute('transform', `translate(${-mappedRefPoint.x} ${-mappedRefPoint.y})`); outerGroup.appendChild(refGroup); const viewBoxGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); if (viewBoxTransform) { viewBoxGroup.setAttribute('transform', viewBoxTransform.transform); } refGroup.appendChild(viewBoxGroup); for (const childNode of Array.from(marker.childNodes)) { viewBoxGroup.appendChild(childNode.cloneNode(true)); } return outerGroup; } function _getMarkerUnitsScale(sourceElement: SVGGraphicsElement, marker: SVGMarkerElement): number { if (marker.getAttribute('markerUnits') === 'userSpaceOnUse') { return 1; } const strokeWidth = parseFloat(getComputedStyle(sourceElement).strokeWidth); return Number.isFinite(strokeWidth) && strokeWidth > 0 ? strokeWidth : 1; } function _createViewBoxTransform(marker: SVGMarkerElement): SvgViewBoxTransform | null { const viewBox = marker.viewBox.baseVal; if (viewBox == null || (viewBox.width === 0 && viewBox.height === 0)) { return null; } const viewportWidth = _getAnimatedLengthValue(marker.markerWidth); const viewportHeight = _getAnimatedLengthValue(marker.markerHeight); if (!viewportWidth || !viewportHeight || !viewBox.width || !viewBox.height) { return null; } const preserveAspectRatio = marker.preserveAspectRatio.baseVal; let scaleX = viewportWidth / viewBox.width; let scaleY = viewportHeight / viewBox.height; let translateX = -viewBox.x * scaleX; let translateY = -viewBox.y * scaleY; if (preserveAspectRatio.align !== SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE) { const uniformScale = preserveAspectRatio.meetOrSlice === SVGPreserveAspectRatio.SVG_MEETORSLICE_SLICE ? Math.max(scaleX, scaleY) : Math.min(scaleX, scaleY); scaleX = uniformScale; scaleY = uniformScale; const extraWidth = viewportWidth - viewBox.width * uniformScale; const extraHeight = viewportHeight - viewBox.height * uniformScale; const { xAlign, yAlign } = _getAlignFactors(preserveAspectRatio.align); translateX = -viewBox.x * uniformScale + extraWidth * xAlign; translateY = -viewBox.y * uniformScale + extraHeight * yAlign; } return { transform: `matrix(${scaleX} 0 0 ${scaleY} ${translateX} ${translateY})`, scaleX, scaleY, translateX, translateY, }; } function _mapMarkerPointToViewport(marker: SVGMarkerElement, viewBoxTransform: SvgViewBoxTransform | null, point: IPoint): IPoint { if (!viewBoxTransform) { return point; } return { x: point.x * viewBoxTransform.scaleX + viewBoxTransform.translateX, y: point.y * viewBoxTransform.scaleY + viewBoxTransform.translateY, }; } function _getAlignFactors(align: number): { xAlign: number; yAlign: number } { switch (align) { case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMIN: return { xAlign: 0.5, yAlign: 0 }; case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMIN: return { xAlign: 1, yAlign: 0 }; case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMID: return { xAlign: 0, yAlign: 0.5 }; case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID: return { xAlign: 0.5, yAlign: 0.5 }; case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMID: return { xAlign: 1, yAlign: 0.5 }; case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMAX: return { xAlign: 0, yAlign: 1 }; case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMAX: return { xAlign: 0.5, yAlign: 1 }; case SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMAX: return { xAlign: 1, yAlign: 1 }; default: return { xAlign: 0, yAlign: 0 }; } } function _resolveMarkerAngle(marker: SVGMarkerElement, incomingAngle: number, outgoingAngle?: number, isStartMarker?: boolean): number { const orient = marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_AUTO ? 'auto' : marker.getAttribute('orient')?.trim() ?? '0'; if (orient === 'auto' || orient === 'auto-start-reverse') { let angle = outgoingAngle == null ? incomingAngle : _bisectAngles(incomingAngle, outgoingAngle); if (isStartMarker && orient === 'auto-start-reverse') { angle += 180; } return angle; } return _parseAngle(orient); } function _parseAngle(value: string): number { if (value.endsWith('rad')) { return parseFloat(value) * 180 / Math.PI; } if (value.endsWith('turn')) { return parseFloat(value) * 360; } if (value.endsWith('grad')) { return parseFloat(value) * 0.9; } return parseFloat(value); } function _bisectAngles(angleA: number, angleB: number): number { const vectorA = { x: Math.cos(angleA * Math.PI / 180), y: Math.sin(angleA * Math.PI / 180) }; const vectorB = { x: Math.cos(angleB * Math.PI / 180), y: Math.sin(angleB * Math.PI / 180) }; const sum = { x: vectorA.x + vectorB.x, y: vectorA.y + vectorB.y }; if (Math.abs(sum.x) < 1e-10 && Math.abs(sum.y) < 1e-10) { return angleB; } return Math.atan2(sum.y, sum.x) * 180 / Math.PI; } function _getFirstUsableAngle(points: IPoint[]): number | null { for (let i = 0; i < points.length - 1; i++) { const angle = _angleBetween(points[i], points[i + 1]); if (angle != null) { return angle; } } return null; } function _getLastUsableAngle(points: IPoint[]): number | null { for (let i = points.length - 1; i > 0; i--) { const angle = _angleBetween(points[i - 1], points[i]); if (angle != null) { return angle; } } return null; } function _angleBetween(start: IPoint, end: IPoint): number | null { const dx = end.x - start.x; const dy = end.y - start.y; if (Math.abs(dx) < 1e-10 && Math.abs(dy) < 1e-10) { return null; } return Math.atan2(dy, dx) * 180 / Math.PI; } function _pointsEqual(a: IPoint, b: IPoint): boolean { return Math.abs(a.x - b.x) < 1e-10 && Math.abs(a.y - b.y) < 1e-10; } function _getAnimatedLengthValue(length: SVGAnimatedLength): number { return length?.baseVal?.value ?? 0; } function _toElementReferenceBoxPoint(element: Element, point: IPoint): IPoint { const bbox = _getSvgGeometryBBoxOffset(element); return { x: point.x - bbox.x, y: point.y - bbox.y }; } function _fromElementReferenceBoxPoint(element: Element, point: IPoint): IPoint { const bbox = _getSvgGeometryBBoxOffset(element); return { x: point.x + bbox.x, y: point.y + bbox.y }; } function _getSvgGeometryBBoxOffset(element: Element): IPoint { if (!(element instanceof SVGGraphicsElement) || element instanceof SVGSVGElement) { return { x: 0, y: 0 }; } const bbox = element.getBBox(); return { x: bbox.x, y: bbox.y }; } function _getSvgOverlayTransform(element: Element, designerCanvas: IDesignerCanvas): SvgOverlayTransform | null { if (!(element instanceof SVGGraphicsElement) || element instanceof SVGSVGElement) { return null; } const bbox = element.getBBox(); if (Math.abs(bbox.width) < 1e-10 || Math.abs(bbox.height) < 1e-10) { return null; } const quad = element.getBoxQuads({ relativeTo: designerCanvas.canvas, iframes: designerCanvas.iframes })[0]; if (!quad) { return null; } const matrix = _createProjectiveMatrixForQuad(quad); if (!matrix) { return null; } const inverseMatrix = _invertProjectiveMatrix(matrix); if (!inverseMatrix) { return null; } return { bbox, matrix, inverseMatrix }; } function _createProjectiveMatrixForQuad(quad: DOMQuad): ProjectiveMatrix | null { const x1 = quad.p1.x; const y1 = quad.p1.y; const x2 = quad.p2.x; const y2 = quad.p2.y; const x3 = quad.p3.x; const y3 = quad.p3.y; const x4 = quad.p4.x; const y4 = quad.p4.y; const sx = x1 - x2 + x3 - x4; const sy = y1 - y2 + y3 - y4; const dx1 = x2 - x3; const dy1 = y2 - y3; const dx2 = x4 - x3; const dy2 = y4 - y3; let g = 0; let h = 0; if (Math.abs(sx) >= 1e-10 || Math.abs(sy) >= 1e-10) { const denominator = dx1 * dy2 - dy1 * dx2; if (Math.abs(denominator) < 1e-10) { return null; } g = (sx * dy2 - sy * dx2) / denominator; h = (dx1 * sy - dy1 * sx) / denominator; } return [ x2 - x1 + g * x2, x4 - x1 + h * x4, x1, y2 - y1 + g * y2, y4 - y1 + h * y4, y1, g, h, 1, ]; } function _applyProjectiveMatrix(matrix: ProjectiveMatrix, x: number, y: number): IPoint { const projectedX = matrix[0] * x + matrix[1] * y + matrix[2]; const projectedY = matrix[3] * x + matrix[4] * y + matrix[5]; const projectedW = matrix[6] * x + matrix[7] * y + matrix[8]; const safeW = Math.abs(projectedW) < 1e-10 ? (projectedW < 0 ? -1e-10 : 1e-10) : projectedW; return { x: projectedX / safeW, y: projectedY / safeW, }; } function _invertProjectiveMatrix(matrix: ProjectiveMatrix): ProjectiveMatrix | null { const determinant = matrix[0] * (matrix[4] * matrix[8] - matrix[5] * matrix[7]) - matrix[1] * (matrix[3] * matrix[8] - matrix[5] * matrix[6]) + matrix[2] * (matrix[3] * matrix[7] - matrix[4] * matrix[6]); if (Math.abs(determinant) < 1e-10) { return null; } const inverseDeterminant = 1 / determinant; return [ (matrix[4] * matrix[8] - matrix[5] * matrix[7]) * inverseDeterminant, (matrix[2] * matrix[7] - matrix[1] * matrix[8]) * inverseDeterminant, (matrix[1] * matrix[5] - matrix[2] * matrix[4]) * inverseDeterminant, (matrix[5] * matrix[6] - matrix[3] * matrix[8]) * inverseDeterminant, (matrix[0] * matrix[8] - matrix[2] * matrix[6]) * inverseDeterminant, (matrix[2] * matrix[3] - matrix[0] * matrix[5]) * inverseDeterminant, (matrix[3] * matrix[7] - matrix[4] * matrix[6]) * inverseDeterminant, (matrix[1] * matrix[6] - matrix[0] * matrix[7]) * inverseDeterminant, (matrix[0] * matrix[4] - matrix[1] * matrix[3]) * inverseDeterminant, ]; } ================================================ FILE: packages/web-component-designer/src/elements/helper/SwitchContainerHelper.ts ================================================ import { IDesignItem } from '../item/IDesignItem.js'; import { NodeType } from '../item/NodeType.js'; export function switchContainer(items: IDesignItem[], newContainer: IDesignItem, resizeNewContainer: boolean = false, newContainerOffset: number = 0) { //TODO: switch to other containers like grid, flexbox, ... //TODO: position non absolute, or absolute from bottom or right for (let i of items) { if (i == newContainer || i.element.contains(newContainer.element)) { console.warn('could not move items into of itself or a child'); return; } } const firstItem = items[0]; const grp = firstItem.openGroup('switchContainerHelper'); const designerCanvas = firstItem.instanceServiceContainer.designerCanvas; let minX = Number.MAX_VALUE; let minY = Number.MAX_VALUE; let maxX = 0; let maxY = 0; for (let e of items) { let rect = designerCanvas.getNormalizedElementCoordinates(e.element); if (rect.x < minX) minX = rect.x; if (rect.y < minY) minY = rect.y; if (rect.x + rect.width > maxX) maxX = rect.x + rect.width; if (rect.y + rect.height > maxY) maxY = rect.y + rect.height; } let rectNewContainer = designerCanvas.getNormalizedElementCoordinates(newContainer.element); for (let e of items) { let rect = designerCanvas.getNormalizedElementCoordinates(e.element); if (e.nodeType == NodeType.Element) { //TODO: use container service or the helper wich this uses, not fixed left and top. if (resizeNewContainer) { e.setStyle('left', (rect.x - minX + newContainerOffset).toString() + 'px'); e.setStyle('top', (rect.y - minY + newContainerOffset).toString() + 'px'); } else { e.setStyle('left', (rect.x - rectNewContainer.x).toString() + 'px'); e.setStyle('top', (rect.y - rectNewContainer.y).toString() + 'px'); } } newContainer.insertChild(e); } if (resizeNewContainer) { newContainer.setStyle('position', 'absolute'); newContainer.setStyle('left', (minX - newContainerOffset).toString() + 'px'); newContainer.setStyle('top', (minY - newContainerOffset).toString() + 'px'); newContainer.setStyle('width', (maxX - minX + 2 * newContainerOffset).toString() + 'px'); newContainer.setStyle('height', (maxY - minY + 2 * newContainerOffset).toString() + 'px'); } grp.commit(); } ================================================ FILE: packages/web-component-designer/src/elements/helper/TextHelper.ts ================================================ let canvas: HTMLCanvasElement; /** * Uses canvas.measureText to compute and return the width of the given text of given font in pixels. * * @param {String} text The text to be rendered. * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana"). * * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393 */ export function getTextWidth(text: string, font: string) { if (!canvas) canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); context.font = font; const metrics = context.measureText(text); return metrics.width; } export function getFont(el: Element) { const fontWeight = getComputedStyle(el).fontWeight || 'normal'; const fontSize = getComputedStyle(el).fontSize || '16px'; const fontFamily = getComputedStyle(el).fontFamily || 'Times New Roman'; return `${fontWeight} ${fontSize} ${fontFamily}`; } ================================================ FILE: packages/web-component-designer/src/elements/helper/TouchGestureHelper.ts ================================================ const panThreshold = 10; const zoomThreshold = 10; //const rotateThreshold = 0; export class TouchGestureHelper { public static addTouchEvents(element: HTMLElement) { return new TouchGestureHelper(element); } private constructor(element: HTMLElement) { this._target = element; element.addEventListener('touchstart', (e) => this._touchStart(e)); element.addEventListener('touchmove', (e) => this._touchMove(e)); element.addEventListener('touchend', (e) => this._touchEnd(e)); element.addEventListener('touchcancel', (e) => this._touchEnd(e)); } private _target: HTMLElement; private _started: boolean; private _startX_0: number; private _startY_0: number; //private _startX_1: number; //private _startY_1: number; private _lastZoom: number; private _lastPanDistanceX: number; private _lastPanDistanceY: number; private _startZoomDistance: number; public multitouchEventActive: boolean; private _mode: 'pan' | 'zoom' | 'rotate' = null; _touchStart(e: TouchEvent) { if (e.touches.length === 2) { this.multitouchEventActive = true; this._mode = null; this._started = true; this._startX_0 = e.touches[0].screenX; this._startY_0 = e.touches[0].screenY; //this._startX_1 = e.touches[1].screenX; //this._startY_1 = e.touches[1].screenY; this._lastZoom = 0; this._lastPanDistanceX = 0; this._lastPanDistanceY = 0; this._startZoomDistance = Math.hypot( e.touches[0].screenX - e.touches[1].screenX, e.touches[0].screenY - e.touches[1].screenY); } else { this.multitouchEventActive = false; this._started = false; } } _touchMove(e: TouchEvent) { if (e.touches.length !== 2) { this.multitouchEventActive = false; this._started = false; } if (this._started) { e.preventDefault(); let newZoomDistance = Math.hypot( e.touches[0].screenX - e.touches[1].screenX, e.touches[0].screenY - e.touches[1].screenY); const newPanDistanceX = this._startX_0 - e.touches[0].screenX; const newPanDistanceY = this._startY_0 - e.touches[0].screenY; const panDiffX = newPanDistanceX - this._lastPanDistanceX; const panDiffY = newPanDistanceY - this._lastPanDistanceY; this._lastPanDistanceX = newPanDistanceX; this._lastPanDistanceY = newPanDistanceY; const zoom = newZoomDistance - this._startZoomDistance; const zoomDiff = zoom - this._lastZoom; this._lastZoom = zoom; this._lastZoom if (!this._mode) { if (Math.abs(zoom) > zoomThreshold) { this._mode = 'zoom' } if (Math.abs(newPanDistanceX) > panThreshold || Math.abs(newPanDistanceY) > panThreshold) { this._mode = 'pan' } } if (this._mode) { if (this._mode == 'zoom') { const event = new CustomEvent("zoom", { detail: { factor: zoom, diff: zoomDiff } }); this._target.dispatchEvent(event); } else if (this._mode == 'pan') { const event = new CustomEvent("pan", { detail: { x: newPanDistanceX, deltaX: panDiffX, y: newPanDistanceY, deltaY: panDiffY } }); this._target.dispatchEvent(event); } } } } _touchEnd(e: TouchEvent) { this.multitouchEventActive = false; if (e.touches.length !== 2) { } } } ================================================ FILE: packages/web-component-designer/src/elements/helper/TransformHelper.ts ================================================ let identityMatrix: number[] = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; export function combineTransforms(element: HTMLElement, actualTransforms: string, requestedTransformation: string) { if (actualTransforms == null || actualTransforms == '') { element.style.transform = requestedTransformation; return; } const actualTransformationMatrix = new DOMMatrix(actualTransforms); const requestedTransformationMatrix = new DOMMatrix(requestedTransformation); const newTransformationMatrix = requestedTransformationMatrix.multiply(actualTransformationMatrix); element.style.transform = newTransformationMatrix.toString(); } export function transformPointByInverseMatrix(point: DOMPoint, matrix: DOMMatrix) { const inverse = matrix.inverse(); return point.matrixTransform(inverse); } export function getRotationMatrix3d(axisOfRotation: 'x' | 'y' | 'z' | 'X' | 'Y' | 'Z', angle: number) { const angleInRadians = angle / 180 * Math.PI; const sin = Math.sin; const cos = Math.cos; let rotationMatrix3d = []; switch (axisOfRotation.toLowerCase()) { case 'x': rotationMatrix3d = [ 1, 0, 0, 0, 0, cos(angleInRadians), -sin(angleInRadians), 0, 0, sin(angleInRadians), cos(angleInRadians), 0, 0, 0, 0, 1 ]; break; case 'y': rotationMatrix3d = [ cos(angleInRadians), 0, sin(angleInRadians), 0, 0, 1, 0, 0, -sin(angleInRadians), 0, cos(angleInRadians), 0, 0, 0, 0, 1 ]; break; case 'z': rotationMatrix3d = [ cos(angleInRadians), -sin(angleInRadians), 0, 0, sin(angleInRadians), cos(angleInRadians), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; break; default: rotationMatrix3d = null; break; } return rotationMatrix3d; } export function rotateElementByMatrix3d(element: HTMLElement, matrix: number[]) { element.style.transform = "matrix3d(" + matrix.join(',') + ")" } //maybe remove -> refactor rotate extension export function cssMatrixToMatrixArray(cssMatrix: string) { if (!cssMatrix.includes('matrix')) { if (cssMatrix != 'none') console.error('cssMatrixToMatrixArray: no css matrix passed'); return identityMatrix; } let matrixArray: number[] = cssMatrix.match(/^matrix.*\((.*)\)/)[1].split(',').map(Number); return matrixArray; } export function getRotationAngleFromMatrix(matrixArray: number[], domMatrix: DOMMatrix) { let angle = null; const a = domMatrix != null ? domMatrix.a : matrixArray[0]; const b = domMatrix != null ? domMatrix.b : matrixArray[1]; angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)); return angle; } export function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint { //TODO: maybe we also need m43 here?? return new DOMPoint(matrix.m41, matrix.m42, 0, 0); } export function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number { return getRotationAngleFromMatrix(null, matrix); } ================================================ FILE: packages/web-component-designer/src/elements/helper/XmlHelper.ts ================================================ export function encodeXMLChars(value: string) { return value.replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); }; export function decodeXMLChars(value: string) { return value.replace(/'/g, "'") .replace(/"/g, '"') .replace(/>/g, '>') .replace(/</g, '<') .replace(/&/g, '&'); }; ================================================ FILE: packages/web-component-designer/src/elements/helper/contextMenu/ContextMenu.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { IContextMenu, IContextMenuItem } from './IContextMenuItem.js'; export interface IContextMenuOptions { defaultIcon?: string, subIcon?: string, mouseOffset?: number, shadowRoot?: ShadowRoot | Document, mode?: 'normal' | 'undo' } export class ContextMenu implements IContextMenu { private static _contextMenuCss = css` .context_menu { position: fixed; inset: auto; margin: 0; border: none; background: transparent; overflow: visible; opacity: 0; transform: scale(0); transition: transform 0.1s; transform-origin: top left; padding: 0; z-index: 2147483647; color: black; } .context_menu.context_menu_display { opacity: 1; transform: scale(1); } .context_menu, .context_menu * { box-sizing: border-box; } .context_menu * { position: relative; } .context_menu ul { list-style-type: none; padding: 3px; margin: 0; border: none; background-color: #f5f7f7; box-shadow: 0 0 5px #333; max-inline-size: calc(100vw - 8px); max-block-size: calc(100vh - 8px); overflow: auto; overscroll-behavior: contain; isolation: isolate; } .context_menu ul[popover] { inset: auto; margin: 0; border: none; } .context_menu li { padding: 0; padding-right: 1.7em; cursor: pointer; white-space: nowrap; display: flex; align-items: center; } .context_menu li:hover { background-color: #bbb; } .context_menu li .context_menu_icon_span { width: 28px; display: inline-flex; align-items: center; justify-content: center; } .context_menu li .context_menu_icon_span img { height: 18px; } .context_menu li .context_menu_text { padding-left: 2px; vertical-align: middle; } .context_menu li .context_menu_sub_span { width: 1em; display: inline-block; text-align: center; position: absolute; top: 50%; right: 0.5em; transform: translateY(-50%); } .context_menu li>ul { position: absolute; inset: auto; top: 0; left: 100%; opacity: 0; transition: opacity 0.2s; visibility: hidden; } .context_menu li>ul.context_menu_submenu_popover { position: fixed; } .context_menu li>ul:popover-open { opacity: 1; visibility: visible; } .context_menu li.context_menu_divider { border-bottom: 1px solid #aaa; margin: 5px; padding: 0; cursor: default; } .context_menu li.context_menu_divider:hover { background-color: inherit; } .context_menu li[disabled=""] { color: #777; cursor: default; } .context_menu li[disabled=""]:hover { background-color: inherit; } .context_menu li.context_menu_marked { background-color: #5ebdec; }`; static count = 0; private static _openedContextMenus = new Set(); menu: IContextMenuItem[]; public options?: IContextMenuOptions; public context: any private num: number; private _menuElement!: HTMLDivElement; constructor(menu: IContextMenuItem[], options?: IContextMenuOptions, context?: any) { this.num = ContextMenu.count++; this.menu = menu; this.options = options; this.context = context; this.reload(); this._windowDown = this._windowDown.bind(this); this._windowKeyUp = this._windowKeyUp.bind(this); this._windowResize = this._windowResize.bind(this); } reload() { let shadowRoot = this.options?.shadowRoot ?? document; if (this._menuElement == null) { this._menuElement = document.createElement("div"); this._menuElement.className = "context_menu"; this._menuElement.id = "context_menu_" + this.num; this._menuElement.setAttribute('popover', 'manual'); if (shadowRoot === document) document.body.appendChild(this._menuElement); else shadowRoot.appendChild(this._menuElement); } this._menuElement.innerHTML = ""; if (shadowRoot.adoptedStyleSheets.indexOf(ContextMenu._contextMenuCss) < 0) { shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ContextMenu._contextMenuCss]; } this._menuElement.appendChild(this.renderLevel(this.menu)); } renderLevel(level: IContextMenuItem[]) { let ul_outer = document.createElement("ul"); let addDivider = false; level.forEach((item) => { if (item.title !== '-') { if (addDivider) { let li = document.createElement("li"); li.className = "context_menu_divider"; addDivider = false; ul_outer.appendChild(li); } let li = document.createElement("li"); let icon_span = document.createElement("span"); icon_span.className = 'context_menu_icon_span'; if (item.checked === true) { icon_span.innerHTML = '✔'; } else if ((item.icon ?? '') != '') { icon_span.innerHTML = item.icon ?? ''; } else { icon_span.innerHTML = this.options?.defaultIcon ?? ''; } let text_span = document.createElement("span"); text_span.className = 'context_menu_text'; text_span.innerHTML = item.title ?? ''; let sub_span = document.createElement("span"); sub_span.className = 'context_menu_sub_span'; if (item.children != null) { sub_span.innerHTML = this.options?.subIcon ?? '›'; } li.appendChild(icon_span); li.appendChild(text_span); li.appendChild(sub_span); if (item.disabled) { li.setAttribute("disabled", ""); } else { if (item.checkable) { li.addEventListener('click', (e) => { e.stopPropagation(); e.preventDefault(); item.checked = !item.checked; icon_span.innerHTML = item.checked ? '✔' : (item.icon ?? this.options?.defaultIcon ?? ''); if (item.action) item.action(e, item, this.context, this); }); } else if (item.action) li.addEventListener('click', (e) => { e.stopPropagation(); e.preventDefault(); item.action?.(e, item, this.context, this); this.close(); }); if (this.options?.mode == 'undo') { li.addEventListener('mouseup', (e) => { e.stopPropagation(); item.action?.(e, item, this.context, this); this.close(); }); } li.addEventListener('mouseenter', () => { this.closeSiblingSubmenus(li); if (this.options?.mode == 'undo') { this.markUndoItems(li); } }); if (item.children != null) { let childmenu = this.renderLevel(item.children); this.configurePopoverSubmenu(childmenu); li.appendChild(childmenu); li.addEventListener('mouseenter', () => { this.openPopoverSubmenu(li, childmenu); }); } } ul_outer.appendChild(li); } else { addDivider = true; } }); return ul_outer; } public display(event: MouseEvent) { let menu = this._menuElement; let mouseOffset = this.options?.mouseOffset != null ? this.options.mouseOffset : 2; this.showPopover(menu); this.positionMenu(menu, event.clientX, event.clientY, mouseOffset); menu.classList.add("context_menu_display"); event.preventDefault(); ContextMenu._openedContextMenus.add(this); window.addEventListener("keyup", this._windowKeyUp); window.addEventListener("resize", this._windowResize); window.addEventListener("mousedown", this._windowDown); setTimeout(() => { if (!ContextMenu._openedContextMenus.has(this)) return; window.addEventListener("contextmenu", this._windowDown); }, 150); } _windowResize() { this.close(); } _windowDown(e: MouseEvent) { e.preventDefault(); if (!(e.target instanceof Node) || !this._menuElement.contains(e.target)) this.close(); return false; } _windowKeyUp(e: KeyboardEvent) { if (e.key === 'Escape') { this.close(); } } static show(menu: IContextMenuItem[], event: MouseEvent, options?: IContextMenuOptions, context?: any) { let ctxMenu = new ContextMenu(menu, options, context); ctxMenu.display(event); return ctxMenu; } close() { this.hideDescendantSubmenus(this._menuElement); this.hidePopover(this._menuElement); this._menuElement.remove(); window.removeEventListener("mousedown", this._windowDown); window.removeEventListener("resize", this._windowResize); window.removeEventListener("keyup", this._windowKeyUp); setTimeout(() => window.removeEventListener("contextmenu", this._windowDown), 10); ContextMenu._openedContextMenus.delete(this); } static closeAll() { for (const c of ContextMenu._openedContextMenus.values()) c.close(); } private configurePopoverSubmenu(childmenu: HTMLUListElement) { childmenu.classList.add('context_menu_submenu_popover'); childmenu.setAttribute('popover', 'manual'); } private markUndoItems(li: HTMLLIElement) { if (li.parentElement == null) return; let select = true; for (let node of li.parentElement.children) { if (select) (node).classList.add('context_menu_marked') else (node).classList.remove('context_menu_marked') if (node == li) select = false } } private closeSiblingSubmenus(li: HTMLLIElement) { if (li.parentElement == null) return; for (const node of li.parentElement.children) { if (node !== li) { this.hideDescendantSubmenus(node as HTMLElement); } } } private hideDescendantSubmenus(element: HTMLElement) { const submenus = element.querySelectorAll('ul[popover]'); for (const submenu of submenus) { this.hidePopover(submenu as HTMLElement); } } private openPopoverSubmenu(li: HTMLLIElement, childmenu: HTMLUListElement) { this.showPopover(childmenu); this.positionSubmenuPopover(li, childmenu); } private showPopover(element: HTMLElement) { if (this.isPopoverOpen(element)) return; element.showPopover(); } private hidePopover(element?: HTMLElement) { if (element == null || !this.isPopoverOpen(element)) return; element.hidePopover(); } private isPopoverOpen(element: HTMLElement) { return element.matches(':popover-open'); } private positionMenu(menu: HTMLDivElement, clickCoordsX: number, clickCoordsY: number, mouseOffset: number) { const menuWidth = menu.offsetWidth + 4; const menuHeight = menu.offsetHeight + 4; const spaceRight = window.innerWidth - clickCoordsX; const spaceLeft = clickCoordsX; const spaceBelow = window.innerHeight - clickCoordsY; const spaceAbove = clickCoordsY; let left = clickCoordsX + mouseOffset; if (spaceRight < menuWidth && spaceLeft > spaceRight) { left = clickCoordsX - menuWidth - mouseOffset; } let top = clickCoordsY + mouseOffset; if (spaceBelow < menuHeight && spaceAbove > spaceBelow) { top = clickCoordsY - menuHeight - mouseOffset; } menu.style.left = `${Math.max(0, Math.min(left, window.innerWidth - menuWidth))}px`; menu.style.top = `${Math.max(0, Math.min(top, window.innerHeight - menuHeight))}px`; } private positionSubmenuPopover(li: HTMLLIElement, childmenu: HTMLUListElement) { const parentRect = li.getBoundingClientRect(); const childRect = childmenu.getBoundingClientRect(); const menuWidth = childmenu.offsetWidth || childRect.width; const menuHeight = childmenu.offsetHeight || childRect.height; const spaceRight = window.innerWidth - parentRect.right; const spaceLeft = parentRect.left; let left = parentRect.right; if (spaceRight < menuWidth && spaceLeft > spaceRight) { left = parentRect.left - menuWidth; } const spaceBelow = window.innerHeight - parentRect.top; const spaceAbove = parentRect.bottom; let top = parentRect.top; if (spaceBelow < menuHeight && spaceAbove > spaceBelow) { top = parentRect.bottom - menuHeight; } childmenu.style.left = `${Math.max(0, Math.min(left, window.innerWidth - menuWidth))}px`; childmenu.style.top = `${Math.max(0, Math.min(top, window.innerHeight - menuHeight))}px`; childmenu.style.right = 'auto'; childmenu.style.bottom = 'auto'; } } ================================================ FILE: packages/web-component-designer/src/elements/helper/contextMenu/IContextMenuItem.ts ================================================ export interface IContextMenu { close: () => void; }; export interface IContextMenuItem { readonly id?: string, readonly title?: string, readonly icon?: string, readonly children?: IContextMenuItem[], readonly disabled?: boolean, readonly shortCut?: string; readonly checkable?: boolean; checked?: boolean; action?: (event: MouseEvent, item: IContextMenuItem, context?: any, menu?: IContextMenu) => void }; ================================================ FILE: packages/web-component-designer/src/elements/helper/getBoxQuads.global.d.ts ================================================ export { }; declare global { interface Node { convertQuadFromNode(quad: DOMQuadInit, from: Element, options?: { fromBox?: 'margin' | 'border' | 'padding' | 'content', toBox?: 'margin' | 'border' | 'padding' | 'content', iframes?: HTMLIFrameElement[] }): DOMQuad 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 convertPointFromNode(point: DOMPointInit, from: Element, options?: { fromBox?: 'margin' | 'border' | 'padding' | 'content', toBox?: 'margin' | 'border' | 'padding' | 'content', iframes?: HTMLIFrameElement[] }): DOMPoint getBoxQuads(options?: { box?: 'margin' | 'border' | 'padding' | 'content', relativeTo?: Element, iframes?: HTMLIFrameElement[] }): DOMQuad[] } } ================================================ FILE: packages/web-component-designer/src/elements/helper/getBoxQuads.js ================================================ //todo: //transform-box (SVGs) https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box // ============================================================================= // PERFORMANCE FIXES APPLIED (14 total): // // FIX 1 – getElementCombinedTransform: check parent perspective inside fast-path // so identity elements return immediately on non-3D pages. // FIX 2 – getResultingTransformationBetweenElementAndAllAncestors: guard initial // self-transform multiply with isIdentity check. // FIX 3 – All translate matrix calls: skip new DOMMatrix().translateSelf(0,0) // when both offsets are zero (hot loop, flat layouts). // FIX 4 – getElementOffsetsInContainer/HTMLElement: defer getCachedComputedStyle // until inside the `includeScroll` branch where it's actually needed. // FIX 5 – getResultingTransformationBetweenElementAndAllAncestors: guard // projectTo2D calls with !is2D check to skip style reads on 2D pages. // FIX 6 – getResultingTransformationBetweenElementAndAllAncestors: cache the // result on the early-return (ancestor found) path, not just fallthrough. // FIX 7 – getBoxQuads: reuse the Range already created for the multi-fragment // text check; pass clientRects/boundingRect into getElementSize to // avoid creating a second Range for Text nodes. // FIX 8 – getBoxQuads: split the per-point `!o` branch out of the loop into // two separate loops to eliminate the branch test on every iteration. // FIX 9 – getBoxQuads: hoist parseFloat calls for box offsets (margin/padding/ // content) so values are computed once, not 4x inside the loop. // FIX 10 – getElementCombinedTransform: check hasTransform first (most common // non-identity case) so cheaper checks fire before heavier ones. // FIX 11 – getElementCombinedTransform: skip transform-origin wrap/unwrap when // origin is (0, 0, 0), saving two DOMMatrix allocations. // FIX 12 – getResultingTransformationBetweenElementAndAllAncestors: reuse // getElementCombinedTransform result across loop iterations (carry // parent transform forward instead of recomputing next iteration). // FIX 13 – Repeated cross-realm instanceof checks: cache constructors from the // node's window at function entry to avoid repeated property lookups. // (Applied in getElementSize and getBoxQuads hot paths.) // FIX 14 – transformPointBox: parse style values once per call, not once per // property access (avoids repeated parseFloat on shared string props). // ============================================================================= /** * @param {globalThis} windowObj? * @param {boolean=} force */ export function addPolyfill(windowObj = window, force = false) { windowObj.__getBoxQuadsPolyfillFns ??= {}; windowObj.__getBoxQuadsPolyfillFns.getBoxQuads = getBoxQuads; windowObj.__getBoxQuadsPolyfillFns.convertQuadFromNode = convertQuadFromNode; windowObj.__getBoxQuadsPolyfillFns.convertRectFromNode = convertRectFromNode; windowObj.__getBoxQuadsPolyfillFns.convertPointFromNode = convertPointFromNode; if (force || !windowObj.Node.prototype.getBoxQuads) { //@ts-ignore windowObj.Node.prototype.getBoxQuads = function (options) { return windowObj.__getBoxQuadsPolyfillFns.getBoxQuads(this, options) } } if (force || !windowObj.Node.prototype.convertQuadFromNode) { //@ts-ignore windowObj.Node.prototype.convertQuadFromNode = function (quad, from, options) { return windowObj.__getBoxQuadsPolyfillFns.convertQuadFromNode(this, quad, from, options) } } if (force || !windowObj.Node.prototype.convertRectFromNode) { //@ts-ignore windowObj.Node.prototype.convertRectFromNode = function (rect, from, options) { return windowObj.__getBoxQuadsPolyfillFns.convertRectFromNode(this, rect, from, options) } } if (force || !windowObj.Node.prototype.convertPointFromNode) { //@ts-ignore windowObj.Node.prototype.convertPointFromNode = function (point, from, options) { return windowObj.__getBoxQuadsPolyfillFns.convertPointFromNode(this, point, from, options) } } } /** * @param {globalThis} windowObj? */ export function patchAdoptNode(windowObj = window) { if (!windowObj.Node.prototype.getBoxQuads) { //@ts-ignore windowObj.Node.prototype.getBoxQuads = function (options) { return getBoxQuads(this, options) } } if (!windowObj.Node.prototype.convertQuadFromNode) { //@ts-ignore windowObj.Node.prototype.convertQuadFromNode = function (quad, from, options) { return convertQuadFromNode(this, quad, from, options) } } if (!windowObj.Node.prototype.convertRectFromNode) { //@ts-ignore windowObj.Node.prototype.convertRectFromNode = function (rect, from, options) { return convertRectFromNode(this, rect, from, options) } } if (!windowObj.Node.prototype.convertPointFromNode) { //@ts-ignore windowObj.Node.prototype.convertPointFromNode = function (point, from, options) { return convertPointFromNode(this, point, from, options) } } } /** * @param {Node} node * @param {DOMQuadInit} quad * @param {Element} from * @param {{fromBox?: 'margin'|'border'|'padding'|'content', toBox?: 'margin'|'border'|'padding'|'content', iframes?: HTMLIFrameElement[]}=} options * @returns {DOMQuad} */ export function convertQuadFromNode(node, quad, from, options) { const ancestor = (node.ownerDocument.defaultView ?? window).document.body; const m1 = getResultingTransformationBetweenElementAndAllAncestors(from, ancestor, options?.iframes, true); const m2 = getResultingTransformationBetweenElementAndAllAncestors(node, ancestor, options?.iframes, true).inverse(); if (options?.fromBox && options?.fromBox !== 'border') { const fromStyle = getCachedComputedStyle(from); quad = new DOMQuad(transformPointBox(quad.p1, options.fromBox, fromStyle, -1), transformPointBox(quad.p2, options.fromBox, fromStyle, -1), transformPointBox(quad.p3, options.fromBox, fromStyle, -1), transformPointBox(quad.p4, options.fromBox, fromStyle, -1)) } let res = new DOMQuad(m2.transformPoint(m1.transformPoint(quad.p1)), m2.transformPoint(m1.transformPoint(quad.p2)), m2.transformPoint(m1.transformPoint(quad.p3)), m2.transformPoint(m1.transformPoint(quad.p4))); if (options?.toBox && options?.toBox !== 'border' && (node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) { const nodeStyle = getCachedComputedStyle(node); res = new DOMQuad(transformPointBox(res.p1, options.toBox, nodeStyle, -1), transformPointBox(res.p2, options.toBox, nodeStyle, -1), transformPointBox(res.p3, options.toBox, nodeStyle, -1), transformPointBox(res.p4, options.toBox, nodeStyle, -1)) } return res; } /** * @param {Node} node * @param {{x: number, y: number, width: number, height: number}} rect * @param {Element} from * @param {{fromBox?: 'margin'|'border'|'padding'|'content', toBox?: 'margin'|'border'|'padding'|'content', iframes?: HTMLIFrameElement[]}=} options * @returns {DOMQuad} */ export function convertRectFromNode(node, rect, from, options) { const ancestor = (node.ownerDocument.defaultView ?? window).document.body.parentElement; const m1 = getResultingTransformationBetweenElementAndAllAncestors(from, ancestor, options?.iframes, true); const m2 = getResultingTransformationBetweenElementAndAllAncestors(node, ancestor, options?.iframes, true).inverse(); if (options?.fromBox && options?.fromBox !== 'border') { const p = transformPointBox(new DOMPoint(rect.x, rect.y), options.fromBox, getCachedComputedStyle(from), 1); rect = new DOMRect(p.x, p.y, rect.width, rect.height); } let res = new DOMQuad(m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x, rect.y))), m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x + rect.width, rect.y))), m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x + rect.width, rect.y + rect.height))), m2.transformPoint(m1.transformPoint(new DOMPoint(rect.x, rect.y + rect.height)))); if (options?.toBox && options?.toBox !== 'border' && (node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) { const nodeStyle = getCachedComputedStyle(node); res = new DOMQuad(transformPointBox(res.p1, options.toBox, nodeStyle, -1), transformPointBox(res.p2, options.toBox, nodeStyle, -1), transformPointBox(res.p3, options.toBox, nodeStyle, -1), transformPointBox(res.p4, options.toBox, nodeStyle, -1)) } return res; } /** * @param {Node} node * @param {DOMPointInit} point * @param {Element} from * @param {{fromBox?: 'margin'|'border'|'padding'|'content', toBox?: 'margin'|'border'|'padding'|'content', iframes?: HTMLIFrameElement[]}=} options * @returns {DOMPoint} */ export function convertPointFromNode(node, point, from, options) { const ancestor = (node.ownerDocument.defaultView ?? window).document.body.parentElement; const m1 = getResultingTransformationBetweenElementAndAllAncestors(from, ancestor, options?.iframes, true); const m2 = getResultingTransformationBetweenElementAndAllAncestors(node, ancestor, options?.iframes, true).inverse(); if (options?.fromBox && options?.fromBox !== 'border') { point = transformPointBox(point, options.fromBox, getCachedComputedStyle(from), 1); } let res = m2.transformPoint(m1.transformPoint(point)); if (options?.toBox && options?.toBox !== 'border' && (node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) { res = transformPointBox(res, options.toBox, getCachedComputedStyle(node), -1); } return res; } /** * @param {DOMPointInit} point * @param {'margin'|'border'|'padding'|'content'} box * @param {CSSStyleDeclaration} style * @param {number} operator * @returns {DOMPoint} * * FIX 14: Parse each style value once and reuse, rather than calling parseFloat * multiple times on the same property (e.g. borderLeftWidth used twice in 'content'). */ function transformPointBox(point, box, style, operator) { if (box === 'margin') { const mLeft = parseFloat(style.marginLeft); const mTop = parseFloat(style.marginTop); return new DOMPoint(point.x - operator * mLeft, point.y - operator * mTop); } else if (box === 'padding') { const bLeft = parseFloat(style.borderLeftWidth); const bTop = parseFloat(style.borderTopWidth); return new DOMPoint(point.x + operator * bLeft, point.y + operator * bTop); } else if (box === 'content') { const bLeft = parseFloat(style.borderLeftWidth); const bTop = parseFloat(style.borderTopWidth); const pLeft = parseFloat(style.paddingLeft); const pTop = parseFloat(style.paddingTop); return new DOMPoint(point.x + operator * (bLeft + pLeft), point.y + operator * (bTop + pTop)); } //@ts-ignore return point; } /** @type { WeakMap } */ let hash; /** @type { Map } */ let boxQuadsCache; /** @type { Map } */ let transformCache; /** @type { WeakMap } */ let computedStyleCache; let hashId = 0; export function clearCache() { boxQuadsCache.clear(); transformCache.clear(); computedStyleCache = new WeakMap(); } export function useCache() { hash = new WeakMap(); boxQuadsCache = new Map(); transformCache = new Map(); computedStyleCache = new WeakMap(); } /** * @param {Element} element * @returns {CSSStyleDeclaration} */ function getCachedComputedStyle(element) { if (!computedStyleCache) { return (element.ownerDocument.defaultView ?? window).getComputedStyle(element); } let style = computedStyleCache.get(element); if (!style) { style = (element.ownerDocument.defaultView ?? window).getComputedStyle(element); computedStyleCache.set(element, style); } return style; } /** * @param {Node} node * @returns {boolean} */ function isElementNode(node) { return !!node && node.nodeType === Node.ELEMENT_NODE; } /** * @param {Node} element * @returns {number} */ function getElementZoom(element) { if (!isElementNode(element)) { return 1; } /** @type {Element} */ // @ts-ignore const actualElement = element; const zoom = getCachedComputedStyle(actualElement).zoom; if (!zoom || zoom === 'normal') { return 1; } if (zoom.endsWith('%')) { const percentage = parseFloat(zoom); return Number.isFinite(percentage) && percentage > 0 ? percentage / 100 : 1; } const value = parseFloat(zoom); return Number.isFinite(value) && value > 0 ? value : 1; } /** * `zoom` scales the element's internal coordinate space while also shifting the * element within its parent from the top-center anchor in the default writing-mode. * For descendant coordinates we keep the scale in the matrix pipeline and apply * the parent-position shift separately in the layout translation step. * @param {Node} element * @returns {DOMMatrix} */ function getElementZoomScaleTransform(element) { if (!isElementNode(element)) { return new DOMMatrix(); } const zoom = getElementZoom(element); if (zoom === 1) { return new DOMMatrix(); } return new DOMMatrix().scaleSelf(zoom); } /** * @param {Node} element * @param {HTMLIFrameElement[]=} iframes * @param {boolean=} includeZoom * @returns {DOMMatrix} */ function getElementTransformWithZoom(element, iframes, includeZoom = true) { const transform = getElementCombinedTransform(element, iframes); if (!includeZoom || !isElementNode(element)) { return transform; } const zoomTransform = getElementZoomScaleTransform(element); if (zoomTransform.isIdentity) { return transform; } // `zoom` scales transform translations as well as the element's local axes, // so it needs to wrap the transform matrix instead of being appended to it. return zoomTransform.multiply(transform); } /** * @param {Node} node * @param {{box?: 'margin'|'border'|'padding'|'content', relativeTo?: Element, iframes?: HTMLIFrameElement[]}=} options * @returns {DOMQuad[]} */ export function getBoxQuads(node, options) { const defaultRelativeTo = node.ownerDocument.documentElement ?? node.ownerDocument.body; const relativeTo = options?.relativeTo ?? defaultRelativeTo; let key; if (boxQuadsCache) { let i1 = hash.get(node); if (i1 === undefined) hash.set(node, i1 = hashId++); let i2 = hash.get(relativeTo); if (i2 === undefined) hash.set(relativeTo, i2 = hashId++); key = i1 + '_' + i2 + '_' + (options?.box ?? 'border'); const q = boxQuadsCache.get(key); if (q) return q; } /** @type {DOMMatrix} */ let originalElementAndAllParentsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(node, relativeTo, options?.iframes); // FIX 13: Cache cross-realm constructors once per call. const win = node.ownerDocument.defaultView ?? window; const _Text = win.Text; const _SVGGraphicsElement = win.SVGGraphicsElement; const _SVGSVGElement = win.SVGSVGElement; // For text nodes, check for multiple fragments (multi-column layout, line-wrapping). // getClientRects() returns one rect per line-box fragment; getBoundingClientRect() // only returns the union AABB, so without this we'd always get one quad. if ((node instanceof Text || node instanceof _Text)) { const canUseViewportTextRects = originalElementAndAllParentsMultipliedMatrix.is2D && Math.abs(originalElementAndAllParentsMultipliedMatrix.b) < 1e-10 && Math.abs(originalElementAndAllParentsMultipliedMatrix.c) < 1e-10; // FIX 7: Create the Range once here and reuse it for both the multi-fragment // check and the single-fragment size fallback, avoiding a second Range // allocation inside getElementSize for Text nodes. const range = node.ownerDocument.createRange(); range.selectNodeContents(node); const clientRects = range.getClientRects(); const viewportRoot = node.ownerDocument.documentElement ?? node.ownerDocument.body; const viewportRootRect = viewportRoot?.getBoundingClientRect(); const convertViewportRectToRelativeQuad = (rect) => { if (relativeTo === viewportRoot) { return new DOMQuad( new DOMPoint(rect.x, rect.y), new DOMPoint(rect.x + rect.width, rect.y), new DOMPoint(rect.x + rect.width, rect.y + rect.height), new DOMPoint(rect.x, rect.y + rect.height), ); } const rectInViewportRoot = new DOMRect( rect.x - (viewportRootRect?.x ?? 0), rect.y - (viewportRootRect?.y ?? 0), rect.width, rect.height, ); return convertRectFromNode(relativeTo, rectInViewportRoot, viewportRoot, { iframes: options?.iframes, }); }; if (clientRects.length > 1) { if (canUseViewportTextRects) { const quads = []; for (const cr of clientRects) { if (cr.width < 1 && cr.height < 1) continue; quads.push(convertViewportRectToRelativeQuad(cr)); } if (quads.length > 0) { if (boxQuadsCache) boxQuadsCache.set(key, quads); return quads; } } // Work via the parent element so rotation is handled correctly. // Each fragment's viewport rect (from getClientRects) is an AABB; // its center equals the actual geometric center regardless of rotation. // We convert that center to parent-local space, recover the fragment's // local dimensions via the 2x2 AABB system, then apply the parent's // accumulated matrix to build proper (rotated) quads in relativeTo-space. const parent = getParentElementIncludingSlots(node, options?.iframes); const M_parent = getResultingTransformationBetweenElementAndAllAncestors(parent, relativeTo, options?.iframes); const parentCss = getElementCombinedTransform(parent, options?.iframes); const pr = parent.getBoundingClientRect(); const pa = parentCss.a, pb = parentCss.b, pc = parentCss.c, pd = parentCss.d; // AABB center of the transformed parent equals its geometric center. // geometric_center_screen = screen(0,0) + L * (pw/2, ph/2) // => screen(0,0) = AABB_center - L * (pw/2, ph/2) //@ts-ignore const pw = parent.offsetWidth; //@ts-ignore const ph = parent.offsetHeight; const parentOriginX = (pr.x + pr.width / 2) - (pa * pw / 2 + pc * ph / 2); const parentOriginY = (pr.y + pr.height / 2) - (pb * pw / 2 + pd * ph / 2); const linearDet = pa * pd - pb * pc; const absA = Math.abs(pa), absB = Math.abs(pb); const absDet = absA * absA - absB * absB; const quads = []; for (const cr of clientRects) { if (cr.width < 1 && cr.height < 1) continue; // Fragment AABB center -> parent-local center via inverse CSS transform const dx = cr.x + cr.width / 2 - parentOriginX; const dy = cr.y + cr.height / 2 - parentOriginY; let lcx, lcy; if (Math.abs(linearDet) > 1e-10) { lcx = (pd * dx - pc * dy) / linearDet; lcy = (pa * dy - pb * dx) / linearDet; } else { lcx = dx; lcy = dy; } // Fragment dimensions in parent-local via 2x2 AABB system let tw, th; if (Math.abs(absDet) > 1e-6) { tw = Math.max(0, (absA * cr.width - absB * cr.height) / absDet); th = Math.max(0, (absA * cr.height - absB * cr.width) / absDet); } else { // Singular (~45 deg): use CSS line-height as th const cs = getCachedComputedStyle(parent); th = Math.max(0, parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2 || 16); const denom = Math.max(absA, absB); tw = denom > 1e-6 ? Math.max(0, (cr.width - th * absB) / denom) : cr.width; } // Fragment top-left in parent-local, then transform all 4 corners via M_parent const lx = lcx - tw / 2, ly = lcy - th / 2; const quad = new DOMQuad( M_parent.transformPoint(new DOMPoint(lx, ly)), M_parent.transformPoint(new DOMPoint(lx + tw, ly)), M_parent.transformPoint(new DOMPoint(lx + tw, ly + th)), M_parent.transformPoint(new DOMPoint(lx, ly + th)) ); quads.push(toViewportRelativeDocumentElementQuad(quad, node, relativeTo, options?.iframes)); } if (quads.length > 0) { if (boxQuadsCache) boxQuadsCache.set(key, quads); return quads; } } // FIX 7 (continued): Single-fragment text — reuse the already-fetched // bounding rect so getElementSize doesn't create a second Range. const textBoundingRect = range.getBoundingClientRect(); if (canUseViewportTextRects) { const tQuad = [convertViewportRectToRelativeQuad(textBoundingRect)]; if (boxQuadsCache) boxQuadsCache.set(key, tQuad); return tQuad; } const { width: tw, height: th } = _getTextNodeSize(originalElementAndAllParentsMultipliedMatrix, textBoundingRect, node); const is2Dt = originalElementAndAllParentsMultipliedMatrix.is2D; const tCorners = [ new DOMPoint(0, 0), new DOMPoint(tw, 0), new DOMPoint(tw, th), new DOMPoint(0, th), ]; /** @type {[DOMPoint,DOMPoint,DOMPoint,DOMPoint]} */ //@ts-ignore const tPoints = Array(4); if (is2Dt) { for (let i = 0; i < 4; i++) tPoints[i] = tCorners[i].matrixTransform(originalElementAndAllParentsMultipliedMatrix); } else { for (let i = 0; i < 4; i++) { tPoints[i] = projectPoint(tCorners[i], originalElementAndAllParentsMultipliedMatrix).matrixTransform(originalElementAndAllParentsMultipliedMatrix); tPoints[i] = as2DPoint(tPoints[i]); } } const tQuad = [toViewportRelativeDocumentElementQuad(new DOMQuad(tPoints[0], tPoints[1], tPoints[2], tPoints[3]), node, relativeTo, options?.iframes)]; if (boxQuadsCache) boxQuadsCache.set(key, tQuad); return tQuad; } if ((node instanceof SVGGraphicsElement || node instanceof _SVGGraphicsElement) && !((node instanceof SVGSVGElement || node instanceof _SVGSVGElement))) { const bbox = node.getBBox(); const visualBox = getSvgVisualBox(node, bbox); const x0 = visualBox.x - bbox.x; const y0 = visualBox.y - bbox.y; const x1 = x0 + visualBox.width; const y1 = y0 + visualBox.height; const screenPts = [ new DOMPoint(visualBox.x, visualBox.y), new DOMPoint(visualBox.x + visualBox.width, visualBox.y), new DOMPoint(visualBox.x + visualBox.width, visualBox.y + visualBox.height), new DOMPoint(visualBox.x, visualBox.y + visualBox.height), ]; const pts = [ new DOMPoint(x0, y0), new DOMPoint(x1, y0), new DOMPoint(x1, y1), new DOMPoint(x0, y1), ]; const screenCtm = !hasTransformedHtmlAncestor(node, relativeTo, options?.iframes) ? node.getScreenCTM() : null; if (screenCtm) { const screenQuad = new DOMQuad( screenPts[0].matrixTransform(screenCtm), screenPts[1].matrixTransform(screenCtm), screenPts[2].matrixTransform(screenCtm), screenPts[3].matrixTransform(screenCtm), ); const svgQuad = [convertViewportQuadToRelativeNode(screenQuad, node, relativeTo, options?.iframes)]; if (boxQuadsCache) boxQuadsCache.set(key, svgQuad); return svgQuad; } /** @type {[DOMPoint,DOMPoint,DOMPoint,DOMPoint]} */ //@ts-ignore const points = Array(4); if (originalElementAndAllParentsMultipliedMatrix.is2D) { for (let i = 0; i < 4; i++) points[i] = pts[i].matrixTransform(originalElementAndAllParentsMultipliedMatrix); } else { for (let i = 0; i < 4; i++) { points[i] = projectPoint(pts[i], originalElementAndAllParentsMultipliedMatrix).matrixTransform(originalElementAndAllParentsMultipliedMatrix); points[i] = as2DPoint(points[i]); } } const svgQuad = [toViewportRelativeDocumentElementQuad(new DOMQuad(points[0], points[1], points[2], points[3]), node, relativeTo, options?.iframes)]; if (boxQuadsCache) boxQuadsCache.set(key, svgQuad); return svgQuad; } if ( (node instanceof win.Element) && relativeTo === node.ownerDocument.documentElement && (!options?.box || options.box === 'border') && originalElementAndAllParentsMultipliedMatrix.is2D && Math.abs(originalElementAndAllParentsMultipliedMatrix.b) < 1e-10 && Math.abs(originalElementAndAllParentsMultipliedMatrix.c) < 1e-10 ) { const rect = node.getBoundingClientRect(); const viewportQuad = [new DOMQuad( new DOMPoint(rect.x, rect.y), new DOMPoint(rect.x + rect.width, rect.y), new DOMPoint(rect.x + rect.width, rect.y + rect.height), new DOMPoint(rect.x, rect.y + rect.height), )]; if (boxQuadsCache) boxQuadsCache.set(key, viewportQuad); return viewportQuad; } let { width, height } = getElementSize(node, originalElementAndAllParentsMultipliedMatrix); // FIX 13: cache cross-realm Element constructor. const _Element = win.Element; const is2D = originalElementAndAllParentsMultipliedMatrix.is2D; // FIX 8 + FIX 9: Split the `!o` branch out of the point loop into two // separate code paths. In the box-offset path, parse style values once // (FIX 9) and use them directly, eliminating 4x redundant parseFloat calls. if ((node instanceof Element || node instanceof _Element)) { const box = options?.box; if (box === 'margin' || box === 'padding' || box === 'content') { const cs = getCachedComputedStyle(node); let x0, y0, x1, y1, x2, y2, x3, y3; if (box === 'margin') { const mL = parseFloat(cs.marginLeft); const mT = parseFloat(cs.marginTop); const mR = parseFloat(cs.marginRight); const mB = parseFloat(cs.marginBottom); x0 = -mL; y0 = -mT; x1 = width + mR; y1 = -mT; x2 = width + mR; y2 = height + mB; x3 = -mL; y3 = height + mB; } else if (box === 'padding') { const bL = parseFloat(cs.borderLeftWidth); const bT = parseFloat(cs.borderTopWidth); const bR = parseFloat(cs.borderRightWidth); const bB = parseFloat(cs.borderBottomWidth); x0 = bL; y0 = bT; x1 = width - bR; y1 = bT; x2 = width - bR; y2 = height - bB; x3 = bL; y3 = height - bB; } else { // content const bL = parseFloat(cs.borderLeftWidth); const bT = parseFloat(cs.borderTopWidth); const bR = parseFloat(cs.borderRightWidth); const bB = parseFloat(cs.borderBottomWidth); const pL = parseFloat(cs.paddingLeft); const pT = parseFloat(cs.paddingTop); const pR = parseFloat(cs.paddingRight); const pB = parseFloat(cs.paddingBottom); x0 = bL + pL; y0 = bT + pT; x1 = width - bR - pR; y1 = bT + pT; x2 = width - bR - pR; y2 = height - bB - pB; x3 = bL + pL; y3 = height - bB - pB; } const pts = [ new DOMPoint(x0, y0), new DOMPoint(x1, y1), new DOMPoint(x2, y2), new DOMPoint(x3, y3), ]; /** @type {[DOMPoint,DOMPoint,DOMPoint,DOMPoint]} */ //@ts-ignore const points = Array(4); if (is2D) { for (let i = 0; i < 4; i++) points[i] = pts[i].matrixTransform(originalElementAndAllParentsMultipliedMatrix); } else { for (let i = 0; i < 4; i++) { points[i] = projectPoint(pts[i], originalElementAndAllParentsMultipliedMatrix).matrixTransform(originalElementAndAllParentsMultipliedMatrix); points[i] = as2DPoint(points[i]); } } const quad = [toViewportRelativeDocumentElementQuad(new DOMQuad(points[0], points[1], points[2], points[3]), node, relativeTo, options?.iframes)]; if (boxQuadsCache) boxQuadsCache.set(key, quad); return quad; } } // FIX 8: No-offset path — plain loop, no `!o` branch test per iteration. const corners = [ new DOMPoint(0, 0), new DOMPoint(width, 0), new DOMPoint(width, height), new DOMPoint(0, height), ]; /** @type {[DOMPoint,DOMPoint,DOMPoint,DOMPoint]} */ //@ts-ignore const points = Array(4); if (is2D) { for (let i = 0; i < 4; i++) points[i] = corners[i].matrixTransform(originalElementAndAllParentsMultipliedMatrix); } else { for (let i = 0; i < 4; i++) { points[i] = projectPoint(corners[i], originalElementAndAllParentsMultipliedMatrix).matrixTransform(originalElementAndAllParentsMultipliedMatrix); points[i] = as2DPoint(points[i]); } } const quad = [toViewportRelativeDocumentElementQuad(new DOMQuad(points[0], points[1], points[2], points[3]), node, relativeTo, options?.iframes)]; if (boxQuadsCache) boxQuadsCache.set(key, quad); return quad; } function convertViewportQuadToRelativeNode(quad, node, relativeTo, iframes) { const viewportRoot = node.ownerDocument.documentElement ?? node.ownerDocument.body; if (relativeTo === viewportRoot) { return quad; } const win = node.ownerDocument.defaultView ?? window; if (relativeTo instanceof win.SVGElement) { const relativeScreenCtm = relativeTo.getScreenCTM(); if (relativeScreenCtm) { const inverse = relativeScreenCtm.inverse(); return new DOMQuad( quad.p1.matrixTransform(inverse), quad.p2.matrixTransform(inverse), quad.p3.matrixTransform(inverse), quad.p4.matrixTransform(inverse), ); } } if (relativeTo.ownerDocument === node.ownerDocument && relativeTo instanceof win.HTMLElement) { const htmlQuad = convertViewportQuadToHtmlElement(quad, relativeTo, iframes); if (htmlQuad) { return htmlQuad; } } if (relativeTo === node.ownerDocument.body) { const relativeRect = relativeTo.getBoundingClientRect(); const scrollLeft = relativeTo.scrollLeft || 0; const scrollTop = relativeTo.scrollTop || 0; return new DOMQuad( new DOMPoint(quad.p1.x - relativeRect.x + scrollLeft, quad.p1.y - relativeRect.y + scrollTop), new DOMPoint(quad.p2.x - relativeRect.x + scrollLeft, quad.p2.y - relativeRect.y + scrollTop), new DOMPoint(quad.p3.x - relativeRect.x + scrollLeft, quad.p3.y - relativeRect.y + scrollTop), new DOMPoint(quad.p4.x - relativeRect.x + scrollLeft, quad.p4.y - relativeRect.y + scrollTop), ); } return convertQuadFromNode(relativeTo, quad, viewportRoot, { iframes }); } function convertViewportQuadToHtmlElement(quad, relativeTo, iframes) { const scale = getPositiveAxisAlignedViewportScale(relativeTo, iframes); if (!scale) { return null; } const relativeRect = relativeTo.getBoundingClientRect(); const scaleX = scale.x; const scaleY = scale.y; if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY) || Math.abs(scaleX) < 1e-10 || Math.abs(scaleY) < 1e-10) { return null; } const scrollLeft = relativeTo.scrollLeft || 0; const scrollTop = relativeTo.scrollTop || 0; const convertPoint = (point) => new DOMPoint( (point.x - relativeRect.x) / scaleX + scrollLeft, (point.y - relativeRect.y) / scaleY + scrollTop, ); return new DOMQuad( convertPoint(quad.p1), convertPoint(quad.p2), convertPoint(quad.p3), convertPoint(quad.p4), ); } function getPositiveAxisAlignedViewportScale(element, iframes) { const win = element.ownerDocument.defaultView ?? window; const scale = { x: 1, y: 1 }; let current = element; while (current && current !== element.ownerDocument.documentElement) { if (current instanceof win.Element) { const style = getCachedComputedStyle(current); const transformScale = getPositiveAxisAlignedTransformScale(style); if (!transformScale) { return null; } const zoom = getElementZoom(current); scale.x *= transformScale.x * zoom; scale.y *= transformScale.y * zoom; } current = getParentElementIncludingSlots(current, iframes); } return scale; } function getPositiveAxisAlignedTransformScale(style) { if (style.perspective && style.perspective !== 'none') { return null; } if (style.rotate && style.rotate !== 'none' && !isZeroAngleValue(style.rotate)) { return null; } const individualScale = parsePositiveScaleValue(style.scale); if (!individualScale) { return null; } const transform = style.transform; if (!transform || transform === 'none') { return individualScale; } if (transform.startsWith('matrix3d(')) { const values = parseCssMatrixValues(transform); if (values?.length === 16 && values[0] > 0 && values[5] > 0 && Math.abs(values[1]) < 1e-10 && Math.abs(values[4]) < 1e-10 && Math.abs(values[3]) < 1e-10 && Math.abs(values[7]) < 1e-10 && Math.abs(values[11]) < 1e-10) { return { x: individualScale.x * values[0], y: individualScale.y * values[5] }; } return null; } if (transform.startsWith('matrix(')) { const values = parseCssMatrixValues(transform); if (values?.length === 6 && values[0] > 0 && values[3] > 0 && Math.abs(values[1]) < 1e-10 && Math.abs(values[2]) < 1e-10) { return { x: individualScale.x * values[0], y: individualScale.y * values[3] }; } return null; } return null; } function parsePositiveScaleValue(value) { if (!value || value === 'none') { return { x: 1, y: 1 }; } const parts = value.split(/\s+/).map(part => parseFloat(part)).filter(Number.isFinite); if (parts.length === 0 || parts[0] <= 0 || (parts[1] != null && parts[1] <= 0)) { return null; } return { x: parts[0], y: parts[1] ?? parts[0] }; } function parseCssMatrixValues(transform) { const start = transform.indexOf('('); const end = transform.lastIndexOf(')'); if (start < 0 || end <= start) { return null; } const values = transform.slice(start + 1, end).split(',').map(value => parseFloat(value.trim())); return values.every(Number.isFinite) ? values : null; } function isZeroAngleValue(value) { const matches = value.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi); if (!matches?.length) { return false; } const angle = parseFloat(matches[matches.length - 1]); return Number.isFinite(angle) && Math.abs(angle) < 1e-10; } function hasTransformedHtmlAncestor(node, relativeTo, iframes) { const win = node.ownerDocument.defaultView ?? window; let element = getParentElementIncludingSlots(node, iframes); while (element && element !== relativeTo && element !== node.ownerDocument.documentElement) { if (element instanceof win.HTMLElement) { const css = getCachedComputedStyle(element); if (transformProperties.some((value) => css[value] ? css[value] !== 'none' : false)) { return true; } } element = getParentElementIncludingSlots(element, iframes); } return false; } function toViewportRelativeDocumentElementQuad(quad, node, relativeTo, iframes) { if (relativeTo !== node.ownerDocument.documentElement) { return quad; } if (isViewportFixedAnchoredNode(node, iframes)) { return quad; } const win = node.ownerDocument.defaultView ?? window; const scrollX = win.scrollX ?? node.ownerDocument.documentElement.scrollLeft ?? 0; const scrollY = win.scrollY ?? node.ownerDocument.documentElement.scrollTop ?? 0; if (scrollX === 0 && scrollY === 0) { return quad; } return new DOMQuad( new DOMPoint(quad.p1.x - scrollX, quad.p1.y - scrollY), new DOMPoint(quad.p2.x - scrollX, quad.p2.y - scrollY), new DOMPoint(quad.p3.x - scrollX, quad.p3.y - scrollY), new DOMPoint(quad.p4.x - scrollX, quad.p4.y - scrollY), ); } function isViewportFixedAnchoredNode(node, iframes) { const win = node.ownerDocument.defaultView ?? window; let element = null; if (node instanceof win.Text) { element = getParentElementIncludingSlots(node, iframes); } else if (node instanceof win.Element) { element = node; } while (element && element !== node.ownerDocument.documentElement) { const cs = getCachedComputedStyle(element); if (cs.position === 'fixed') { return getNearestFixedContainingBlock(element, iframes) == null; } element = getParentElementIncludingSlots(element, iframes); } return false; } /** * Compute width/height for a Text node given an already-fetched bounding rect. * Extracted from getElementSize so getBoxQuads (FIX 7) can reuse the Range it * already created, avoiding a second Range allocation. * @param {DOMMatrix} matrix * @param {DOMRect} targetRect * @param {Text} node */ function _getTextNodeSize(matrix, targetRect, node) { const absA = Math.abs(matrix?.a ?? 1); const absB = Math.abs(matrix?.b ?? 0); const det = absA * absA - absB * absB; // cos(2*angle)*scale^2 let width, height; if (Math.abs(det) > 1e-6) { width = Math.max(0, (absA * targetRect.width - absB * targetRect.height) / det); height = Math.max(0, (absA * targetRect.height - absB * targetRect.width) / det); } else { // Singular (~45 deg rotation): use CSS line-height as the known height const parentEl = node.parentElement; let lineH = 16; if (parentEl) { const cs = getCachedComputedStyle(parentEl); lineH = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2 || 16; } height = Math.max(0, lineH); const denom = Math.max(absA, absB); width = denom > 1e-6 ? Math.max(0, (targetRect.width - height * absB) / denom) : targetRect.width; } return { width, height }; } //todo: https://drafts.csswg.org/css-transforms-2/#accumulated-3d-transformation-matrix-computation // also good for writing a spec // Find a value for z that will transform to 0. (from firefox matrix.h) // or chromium https://github.com/chromium/chromium/blob/main/ui/gfx/geometry/transform.cc#L849 /** * @param {DOMPoint} point */ function projectPoint(point, m) { const z = -(point.x * m.m13 + point.y * m.m23 + m.m43) / m.m33; return new DOMPoint(point.x, point.y, z, 1); } /** * convert a DOM-Point to 2D * @param {DOMPoint} point */ function as2DPoint(point) { return new DOMPoint( point.x / point.w, point.y / point.w ); } /** * @param {Node} node * @param {DOMMatrix=} matrix */ export function getElementSize(node, matrix) { let width = 0; let height = 0; // FIX 13: Cache cross-realm constructors once. const win = node.ownerDocument.defaultView ?? window; if ((node instanceof HTMLElement || node instanceof win.HTMLElement)) { width = node.offsetWidth; height = node.offsetHeight; } else if ((node instanceof SVGSVGElement || node instanceof win.SVGSVGElement)) { width = node.width.baseVal.value height = node.height.baseVal.value } else if ((node instanceof SVGGraphicsElement || node instanceof win.SVGGraphicsElement)) { const bbox = node.getBBox() width = bbox.width; height = bbox.height; } else if ((node instanceof MathMLElement || node instanceof win.MathMLElement)) { const bbox = node.getBoundingClientRect() width = bbox.width / (matrix?.a ?? 1); height = bbox.height / (matrix?.d ?? 1); } else if ((node instanceof Text || node instanceof win.Text)) { // Note: getBoxQuads passes an already-fetched rect via _getTextNodeSize to // avoid this Range creation. This path serves external callers of getElementSize. const range = node.ownerDocument.createRange(); range.selectNodeContents(node); const targetRect = range.getBoundingClientRect(); const result = _getTextNodeSize(matrix, targetRect, node); width = result.width; height = result.height; } return { width, height } } function getSvgVisualBox(node, bbox) { const svgStyle = getCachedComputedStyle(node); const strokeWidth = svgStyle.stroke !== 'none' ? parseFloat(svgStyle.strokeWidth) || 0 : 0; if (strokeWidth <= 0) { return bbox; } const strokeInflation = getSvgStrokeInflation(node, bbox, strokeWidth); return new DOMRect( bbox.x - strokeInflation.left, bbox.y - strokeInflation.top, bbox.width + strokeInflation.left + strokeInflation.right, bbox.height + strokeInflation.top + strokeInflation.bottom, ); } function getSvgStrokeInflation(node, bbox, strokeWidth) { const halfStrokeWidth = strokeWidth / 2; if ((node instanceof SVGLineElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGLineElement)) { const x1 = node.x1.baseVal.value; const y1 = node.y1.baseVal.value; const x2 = node.x2.baseVal.value; const y2 = node.y2.baseVal.value; const dx = x2 - x1; const dy = y2 - y1; const length = Math.hypot(dx, dy); if (length > 1e-10) { let inflateX = halfStrokeWidth * Math.abs(dy) / length; let inflateY = halfStrokeWidth * Math.abs(dx) / length; const lineCap = getCachedComputedStyle(node).strokeLinecap; if (lineCap === 'round' || lineCap === 'square') { inflateX += halfStrokeWidth * Math.abs(dx) / length; inflateY += halfStrokeWidth * Math.abs(dy) / length; } return { left: inflateX, right: inflateX, top: inflateY, bottom: inflateY }; } } const genericInflation = strokeWidth * 2; return { left: genericInflation, right: genericInflation, top: genericInflation, bottom: genericInflation }; } /** * @param {Node} node * @param {boolean} includeScroll * @param {HTMLIFrameElement[]} iframes */ function getElementOffsetsInContainer(node, includeScroll, iframes) { if ((node instanceof HTMLElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement)) { // When appears inside a shadow DOM canvas the browser reflects // body's top margin into html.offsetTop (but not offsetLeft), causing // a Y-only shift in the transform walk. The html element has no real // layout offset relative to its shadow-host container, so return 0,0. if ((node instanceof HTMLHtmlElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLHtmlElement)) { return new DOMPoint(0, 0); } const cs = getCachedComputedStyle(node); if (cs.position === 'fixed') { const fixedContainer = getNearestFixedContainingBlock(node, iframes); if (!fixedContainer) { const left = cs.left && cs.left !== 'auto' ? parseFloat(cs.left) : node.offsetLeft; const top = cs.top && cs.top !== 'auto' ? parseFloat(cs.top) : node.offsetTop; return new DOMPoint(left, top); } const m = getResultingTransformationBetweenElementAndAllAncestors(fixedContainer, node.ownerDocument.body, iframes, true).inverse(); const r1 = node.getBoundingClientRect(); const r1t = m.transformPoint(r1); const r2 = fixedContainer.getBoundingClientRect(); const r2t = m.transformPoint(r2); return new DOMPoint(r1t.x - r2t.x, r1t.y - r2t.y); } // FIX 4: Only call getCachedComputedStyle when includeScroll is true — // cs is unused in the plain offsetLeft/offsetTop path. if (includeScroll) { return new DOMPoint(node.offsetLeft - (node.scrollLeft - parseFloat(cs.borderLeftWidth)), node.offsetTop - (node.scrollTop - parseFloat(cs.borderTopWidth))); } else { return new DOMPoint(node.offsetLeft, node.offsetTop); } } else if ((node instanceof Text || node instanceof (node.ownerDocument.defaultView ?? window).Text)) { const range = node.ownerDocument.createRange(); range.selectNodeContents(node); const r1 = range.getBoundingClientRect(); /** @type {HTMLElement} */ //@ts-ignore const parent = getParentElementIncludingSlots(node, iframes); const r2 = parent.getBoundingClientRect(); // Get the parent's CSS transform so we can work in local space even when rotated. const pt = getElementCombinedTransform(parent, iframes); const pa = pt.a, pb = pt.b, pc = pt.c, pd = pt.d; // AABB center of the transformed parent equals its geometric center. // geometric_center_screen = screen(0,0) + L * (pw/2, ph/2) // => screen(0,0) = AABB_center - L * (pw/2, ph/2) const pw = parent.offsetWidth; const ph = parent.offsetHeight; const parentOriginX = (r2.x + r2.width / 2) - (pa * pw / 2 + pc * ph / 2); const parentOriginY = (r2.y + r2.height / 2) - (pb * pw / 2 + pd * ph / 2); // Delta from parent origin to text AABB center in screen space const dx = (r1.x + r1.width / 2) - parentOriginX; const dy = (r1.y + r1.height / 2) - parentOriginY; // Apply inverse of CSS transform linear part: local_center = L^-1 * screen_delta const transformDet = pa * pd - pb * pc; let localCenterX, localCenterY; if (Math.abs(transformDet) > 1e-10) { localCenterX = (pd * dx - pc * dy) / transformDet; localCenterY = (pa * dy - pb * dx) / transformDet; } else { localCenterX = dx; localCenterY = dy; } // Recover tw and th in local space from the AABB using the 2x2 system: // aabb_w = tw*|cos| + th*|sin|, aabb_h = tw*|sin| + th*|cos| const absA = Math.abs(pa), absB = Math.abs(pb); const absDet = absA * absA - absB * absB; let tw, th; if (Math.abs(absDet) > 1e-6) { tw = Math.max(0, (absA * r1.width - absB * r1.height) / absDet); th = Math.max(0, (absA * r1.height - absB * r1.width) / absDet); } else { // Singular (~45 deg): use CSS line-height as th const cs = getCachedComputedStyle(parent); th = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2 || 16; th = Math.max(0, th); const denom = Math.max(absA, absB); tw = denom > 1e-6 ? Math.max(0, (r1.width - th * absB) / denom) : r1.width; } // local origin = center minus half-dimensions return new DOMPoint(localCenterX - tw / 2, localCenterY - th / 2); } else if ((node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element)) { if ((node instanceof SVGGraphicsElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGGraphicsElement) && !((node instanceof SVGSVGElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGSVGElement))) { const bb = node.getBBox(); return new DOMPoint(bb.x, bb.y); } const cs = getCachedComputedStyle(node); if (cs.position === 'absolute') { return new DOMPoint(parseFloat(cs.left), parseFloat(cs.top)); } const par = getParentElementIncludingSlots(node, iframes); const m = getResultingTransformationBetweenElementAndAllAncestors(par, document.body, iframes, true).inverse(); const r1 = node.getBoundingClientRect(); const r1t = m.transformPoint(r1); const r2 = par.getBoundingClientRect(); const r2t = m.transformPoint(r2); return new DOMPoint(r1t.x - r2t.x, r1t.y - r2t.y); } } /** * @param {Node} node * @param {Element} ancestor * @param {HTMLIFrameElement[]} iframes * @param {boolean=} excludeSelfZoom */ export function getResultingTransformationBetweenElementAndAllAncestors(node, ancestor, iframes, excludeSelfZoom = false) { let key; if (transformCache) { let i1 = hash.get(node); if (i1 === undefined) hash.set(node, i1 = hashId++); let i2 = hash.get(ancestor); if (i2 === undefined) hash.set(ancestor, i2 = hashId++); key = i1 + '_' + i2 + '_' + (excludeSelfZoom ? 'no-self-zoom' : 'full'); const q = transformCache.get(key); if (q) return q; } /** @type {Element } */ //@ts-ignore let actualElement = node; /** @type {DOMMatrix } */ let parentElementMatrix; // FIX 12: Compute self-transform once; we'll carry parent transforms forward // each iteration instead of recomputing them. const useOwnSvgCtm = (actualElement instanceof SVGGraphicsElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).SVGGraphicsElement) && !((actualElement instanceof SVGSVGElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).SVGSVGElement)); // SVGGraphicsElement.getCTM() already includes the element's local SVG/CSS transform. // Starting with getElementTransformWithZoom here would double-apply self rotate/scale. let currentElementTransform = useOwnSvgCtm ? new DOMMatrix() : getElementTransformWithZoom(actualElement, iframes, !excludeSelfZoom); /** @type {DOMMatrix } */ // FIX 2: Only use a non-identity starting matrix when the element itself has // a CSS transform. Most plain elements have identity, avoiding a multiply. let originalElementAndAllParentsMultipliedMatrix = currentElementTransform.isIdentity ? new DOMMatrix() : currentElementTransform; let perspectiveParentElement = getParentElementIncludingSlots(actualElement, iframes); if (perspectiveParentElement) { // FIX 5: Guard transformStyle read behind is2D — on a standard 2D page // the matrix is always 2D here so we skip the style read entirely. if (!originalElementAndAllParentsMultipliedMatrix.is2D) { const s = getCachedComputedStyle(perspectiveParentElement); if (s.transformStyle !== 'preserve-3d') { projectTo2D(originalElementAndAllParentsMultipliedMatrix); } } } let lastOffsetParent = null; while (actualElement != ancestor && actualElement != null) { let parentElement = getParentElementIncludingSlots(actualElement, iframes); if ((actualElement instanceof HTMLElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement)) { const fixedStyle = getCachedComputedStyle(actualElement); if (fixedStyle.position === 'fixed') { const fixedContainer = getNearestFixedContainingBlock(actualElement, iframes); parentElement = fixedContainer ?? ancestor; } } if (actualElement.assignedSlot != null) { if (actualElement.nodeType === Node.ELEMENT_NODE) { const slotOffsetParent = offsetParentPolyfill(actualElement); const shouldApplySlottedOffset = lastOffsetParent !== slotOffsetParent && (lastOffsetParent === null || actualElement === lastOffsetParent || !isFlatTreeInclusiveAncestor(lastOffsetParent, actualElement)); if (shouldApplySlottedOffset) { const l = offsetTopLeftPolyfill(actualElement, 'offsetLeft'); const t = offsetTopLeftPolyfill(actualElement, 'offsetTop'); // FIX 3: Skip zero-translation matrix allocations. if (l !== 0 || t !== 0) { const mvMat = new DOMMatrix().translateSelf(l, t); originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix); } lastOffsetParent = slotOffsetParent; } if (lastOffsetParent === null) lastOffsetParent = slotOffsetParent; } else if (actualElement.nodeType === Node.TEXT_NODE) { const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes); // FIX 3 if (offsets.x !== 0 || offsets.y !== 0) { const mvMat = new DOMMatrix().translateSelf(offsets.x, offsets.y); originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix); } } /* following code should be used instead of above to fix: but it does not work with:
*/ /* const l = offsetTopLeftPolyfill(actualElement, 'offsetLeft'); const t = offsetTopLeftPolyfill(actualElement, 'offsetTop'); const mvMat = new DOMMatrix().translateSelf(l, t); originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix); */ } else { if (!(actualElement instanceof SVGSVGElement) && !(actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).SVGSVGElement) && (actualElement instanceof SVGGraphicsElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).SVGGraphicsElement)) { const ctm = actualElement.getCTM(); const bb = actualElement.getBBox(); // FIX 3 if (bb.x !== 0 || bb.y !== 0) { const mvMat = new DOMMatrix().translateSelf(bb.x, bb.y); originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix); } originalElementAndAllParentsMultipliedMatrix = new DOMMatrix([ctm.a, ctm.b, ctm.c, ctm.d, ctm.e, ctm.f]).multiplySelf(originalElementAndAllParentsMultipliedMatrix); parentElement = actualElement.ownerSVGElement; } else if ((actualElement instanceof HTMLElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement)) { const actualStyle = getCachedComputedStyle(actualElement); const isFixedSelf = actualStyle.position === 'fixed' && actualElement === node; if ((isFixedSelf || lastOffsetParent !== actualElement.offsetParent) && !((actualElement instanceof HTMLSlotElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLSlotElement)) && (lastOffsetParent === null || actualElement === lastOffsetParent || !isFlatTreeInclusiveAncestor(lastOffsetParent, actualElement))) { const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes); const zoom = getElementZoom(actualElement); lastOffsetParent = actualElement.offsetParent; // FIX 3 if (offsets.x !== 0 || offsets.y !== 0) { const mvMat = new DOMMatrix().translateSelf(offsets.x * zoom, offsets.y * zoom); originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix); } } } else { const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes); lastOffsetParent = null; // FIX 3 if (offsets.x !== 0 || offsets.y !== 0) { const mvMat = new DOMMatrix().translateSelf(offsets.x, offsets.y); originalElementAndAllParentsMultipliedMatrix = mvMat.multiplySelf(originalElementAndAllParentsMultipliedMatrix); } } } if (parentElement) { if (parentElement === ancestor) { // The ancestor's own transform is excluded from the returned matrix, // so avoid computing it on the hot return path. if (lastOffsetParent !== null && (parentElement instanceof HTMLElement || parentElement instanceof (parentElement.ownerDocument.defaultView ?? window).HTMLElement) && parentElement.offsetParent === lastOffsetParent) { const ancOff = getElementOffsetsInContainer(parentElement, false, iframes); // FIX 3 if (ancOff.x !== 0 || ancOff.y !== 0) { originalElementAndAllParentsMultipliedMatrix = new DOMMatrix().translate(-ancOff.x, -ancOff.y).multiply(originalElementAndAllParentsMultipliedMatrix); } } // FIX 15: Do NOT subtract the scroll of documentElement (the viewport/window // scroll). The offsetLeft/offsetTop walk already yields document-absolute // coordinates; subtracting documentElement.scrollTop would wrongly // shift positions to viewport-space when the page is scrolled. // Only subtract scroll for a non-root ancestor that is itself a // scroll container (e.g. an overflow:scroll div used as relativeTo). const isViewportScrollContainer = parentElement === parentElement.ownerDocument.documentElement; if (!isViewportScrollContainer && (parentElement.scrollTop || parentElement.scrollLeft)) originalElementAndAllParentsMultipliedMatrix = new DOMMatrix().translate(-parentElement.scrollLeft, -parentElement.scrollTop).multiply(originalElementAndAllParentsMultipliedMatrix); const ancestorZoom = getElementZoomScaleTransform(parentElement); if (!ancestorZoom.isIdentity) originalElementAndAllParentsMultipliedMatrix = ancestorZoom.multiply(originalElementAndAllParentsMultipliedMatrix); // FIX 6: Cache result on the early-return path. Originally, the // cache.set() only ran after the while-loop (the null/root // fallthrough), so the most common case — element IS a // descendant of ancestor — was NEVER cached. if (transformCache) transformCache.set(key, originalElementAndAllParentsMultipliedMatrix); return originalElementAndAllParentsMultipliedMatrix; } // FIX 12: parentElementMatrix computed here; in the next iteration this // becomes the element's own transform, so we can reuse it without // calling getElementCombinedTransform again. parentElementMatrix = getElementTransformWithZoom(parentElement, iframes); if (!parentElementMatrix.isIdentity) originalElementAndAllParentsMultipliedMatrix = parentElementMatrix.multiply(originalElementAndAllParentsMultipliedMatrix); perspectiveParentElement = getParentElementIncludingSlots(parentElement, iframes); if (perspectiveParentElement) { // FIX 5: Skip transformStyle read when matrix is already 2D. if (!originalElementAndAllParentsMultipliedMatrix.is2D) { const s = getCachedComputedStyle(perspectiveParentElement); if (s.transformStyle !== 'preserve-3d') { projectTo2D(originalElementAndAllParentsMultipliedMatrix); } } } } actualElement = parentElement; } if (transformCache) { transformCache.set(key, originalElementAndAllParentsMultipliedMatrix); } return originalElementAndAllParentsMultipliedMatrix; } /* getResultingTransformationBetweenElementAndAllAncestors -> but with extra layout matrix (does not work yet....) export function getResultingTransformationBetweenElementAndAllAncestors(node, ancestor, iframes) { let key; if (transformCache) { let i1 = hash.get(node); if (i1 === undefined) hash.set(node, i1 = hashId++); let i2 = hash.get(ancestor); if (i2 === undefined) hash.set(ancestor, i2 = hashId++); key = i1 + '_' + i2; const q = transformCache.get(key); if (q) return q; } // NEW - two matrices instead of one let layoutMatrix = new DOMMatrix(); let actualElement = node; let transformMatrix = getElementCombinedTransform(actualElement, iframes); //.multiplySelf(transformMatrix); const perspectiveParent = getParentElementIncludingSlots(actualElement, iframes); if (perspectiveParent) { const s = getCachedComputedStyle(perspectiveParent); if (s.transformStyle !== "preserve-3d") projectTo2D(transformMatrix); } let lastOffsetParent = null; while (actualElement !== ancestor && actualElement != null) { const parentElement = getParentElementIncludingSlots(actualElement, iframes); // ------------------------ // LAYOUT MATRIX (offsets) // ------------------------ if (actualElement.assignedSlot != null) { const l = offsetTopLeftPolyfill(actualElement, "offsetLeft"); const t = offsetTopLeftPolyfill(actualElement, "offsetTop"); layoutMatrix = new DOMMatrix().translateSelf(l, t).multiplySelf(layoutMatrix); } else { if (actualElement instanceof HTMLElement || actualElement instanceof (actualElement.ownerDocument.defaultView ?? window).HTMLElement) { if (lastOffsetParent !== actualElement.offsetParent && !(actualElement instanceof HTMLSlotElement)) { const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes); lastOffsetParent = actualElement.offsetParent; layoutMatrix = new DOMMatrix().translateSelf(offsets.x, offsets.y).multiplySelf(layoutMatrix); } } else { const offsets = getElementOffsetsInContainer(actualElement, actualElement !== node, iframes); lastOffsetParent = null; layoutMatrix = new DOMMatrix().translateSelf(offsets.x, offsets.y).multiplySelf(layoutMatrix); } } // ------------------------ // TRANSFORM MATRIX (CSS) // ------------------------ if (parentElement) { // NEW - only affects transform pipeline const parentTransform = getElementCombinedTransform(parentElement, iframes); transformMatrix = parentTransform.multiply(transformMatrix); // flattening boundary const perspectiveParent = getParentElementIncludingSlots(parentElement, iframes); if (perspectiveParent) { const s = getCachedComputedStyle(perspectiveParent); if (s.transformStyle !== "preserve-3d") projectTo2D(transformMatrix); } // ------------------------ // EXIT CONDITION // ------------------------ if (parentElement === ancestor) { // NEW - scroll offsets belong to layout if (parentElement.scrollTop || parentElement.scrollLeft) { layoutMatrix = new DOMMatrix() .translate(-parentElement.scrollLeft, -parentElement.scrollTop) .multiply(layoutMatrix); } const result = layoutMatrix.multiply(transformMatrix); if (transformCache) transformCache.set(key, result); return result; } } actualElement = parentElement; } const result = layoutMatrix.multiply(transformMatrix); if (transformCache) transformCache.set(key, result); return result; } */ /** * @param {Node} node * @param {HTMLIFrameElement[]} iframes * @returns {Element} */ function getParentElementIncludingSlots(node, iframes) { if ((node instanceof Element || node instanceof (node.ownerDocument.defaultView ?? window).Element) && node.assignedSlot) return node.assignedSlot; if (node.parentElement == null) { if ((node.parentNode instanceof ShadowRoot || node.parentNode instanceof (node.ownerDocument.defaultView ?? window).ShadowRoot)) { return node.parentNode.host; } } if ((node instanceof HTMLHtmlElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLHtmlElement)) { if (iframes) { for (const f of iframes) if (f?.contentDocument == node.ownerDocument) return f; } } return node.parentElement; } /** * @param {Node} element * @param {HTMLIFrameElement[]=} iframes */ export function getElementCombinedTransform(element, iframes) { if ((element instanceof Text || element instanceof (element.ownerDocument.defaultView ?? window).Text)) return new DOMMatrix; /** @type {Element} */ // @ts-ignore const actualElement = element; //https://www.w3.org/TR/css-transforms-2/#ctm let s = getCachedComputedStyle(actualElement); // FIX 10: Check hasTransform first — it's the most common non-identity case. // Reordering so the most frequent hit is evaluated first. const hasTransform = s.transform !== 'none' && !!s.transform; const hasTranslate = s.translate !== 'none' && !!s.translate; const hasRotate = s.rotate !== 'none' && !!s.rotate; const hasScale = s.scale !== 'none' && !!s.scale; const hasOffsetPath = !!s.offsetPath && s.offsetPath !== 'none'; if (!hasTransform && !hasTranslate && !hasRotate && !hasScale && !hasOffsetPath) { // FIX 1: Check parent perspective right here in the fast-path, so identity // elements on non-3D pages return a new DOMMatrix() immediately // without calling getElementPerspectiveTransform at all. const parent = getParentElementIncludingSlots(actualElement, iframes); if (!parent) return new DOMMatrix(); const ps = getCachedComputedStyle(parent); if (!ps.perspective || ps.perspective === 'none') return new DOMMatrix(); // Parent has a perspective — fall through to compute it properly. //@ts-ignore const pt = getElementPerspectiveTransform(actualElement, iframes); return pt != null ? pt : new DOMMatrix(); } let m = new DOMMatrix(); const origin = s.transformOrigin.split(' '); const originX = parseFloat(origin[0]); const originY = parseFloat(origin[1]); const originZ = origin[2] ? parseFloat(origin[2]) : 0; // FIX 11: Skip the origin wrap/unwrap entirely when origin is (0,0,0). // Saves two DOMMatrix allocations and two multiply calls per element. const hasNonZeroOrigin = (originX !== 0 || originY !== 0 || originZ !== 0); const mOri = hasNonZeroOrigin ? new DOMMatrix().translateSelf(originX, originY, originZ) : null; if (hasTranslate) { let tr = s.translate; if (tr.includes('%')) { const v = tr.split(' '); const r = actualElement.getBoundingClientRect(); if (v[0].endsWith('%')) v[0] = (parseFloat(v[0]) * r.width / 100) + 'px'; if (v[1]?.endsWith('%')) v[1] = (parseFloat(v[1]) * r.height / 100) + 'px'; tr = v.join(','); } m.multiplySelf(new DOMMatrix('translate(' + tr.replaceAll(' ', ',') + ')')); } if (hasRotate) { m.multiplySelf(new DOMMatrix('rotate(' + s.rotate.replaceAll(' ', ',') + ')')); } if (hasScale) { m.multiplySelf(new DOMMatrix('scale(' + s.scale.replaceAll(' ', ',') + ')')); } if (hasOffsetPath) { m.multiplySelf(computeOffsetTransformMatrix(element)); } if (hasTransform) { m.multiplySelf(new DOMMatrix(s.transform)); } // FIX 11 (continued): Only wrap with origin if non-zero. if (hasNonZeroOrigin) { m = mOri.multiply(m.multiplySelf(mOri.inverse())); } //@ts-ignore const pt = getElementPerspectiveTransform(element, iframes); if (pt != null) { m = pt.multiplySelf(m); } return m; } /** * project a DOM-Matrix to 2D (from firefox matrix.h) * @param {DOMMatrix} m */ function projectTo2D(m) { m.m31 = 0.0; m.m32 = 0.0; m.m13 = 0.0; m.m23 = 0.0; m.m33 = 1.0; m.m43 = 0.0; m.m34 = 0.0; // Some matrices, such as those derived from perspective transforms, // can modify _44 from 1, while leaving the rest of the fourth column // (_14, _24) at 0. In this case, after resetting the third row and // third column above, the value of _44 functions only to scale the // coordinate transform divide by W. The matrix can be converted to // a true 2D matrix by normalizing out the scaling effect of _44 on // the remaining components ahead of time. if (m.m14 == 0.0 && m.m24 == 0.0 && m.m44 != 1.0 && m.m44 != 0.0) { const scale = 1.0 / m.m44; m.m11 *= scale; m.m12 *= scale; m.m21 *= scale; m.m22 *= scale; m.m41 *= scale; m.m42 *= scale; m.m44 = 1.0; } } /** * @param {HTMLElement} element * @param {HTMLIFrameElement[]} iframes */ function getElementPerspectiveTransform(element, iframes) { /** @type { Element } */ //@ts-ignore const perspectiveNode = getParentElementIncludingSlots(element, iframes); if (perspectiveNode) { //https://drafts.csswg.org/css-transforms-2/#perspective-matrix-computation let s = getCachedComputedStyle(perspectiveNode); if (s.perspective !== 'none') { let m = new DOMMatrix(); let p = parseFloat(s.perspective); m.m34 = -1.0 / p; //https://drafts.csswg.org/css-transforms-2/#PerspectiveDefined if (s.perspectiveOrigin) { const origin = s.perspectiveOrigin.split(' '); const originX = parseFloat(origin[0]) - element.offsetLeft; const originY = parseFloat(origin[1]) - element.offsetTop; const mOri = new DOMMatrix().translateSelf(originX, originY); const mOriInv = new DOMMatrix().translateSelf(-originX, -originY); return mOri.multiplySelf(m.multiplySelf(mOriInv)); } } } return null; } function computeOffsetTransformMatrix(elem) { const cs = getCachedComputedStyle(elem); const offsetPath = cs.offsetPath; // e.g. "path('M0,0 ...')" const offsetDistance = cs.offsetDistance; // e.g. "50%" const offsetRotate = cs.offsetRotate; // e.g. "auto", "45deg", "auto 30deg" const offsetAnchor = cs.offsetAnchor; const transformOrigin = cs.transformOrigin; // Parse offset-distance (px or %) let distance = parseOffsetDistance(offsetDistance); // Compute position & tangent on path (in containing block coordinates) let { x, y, angle } = computeOffsetPathPoint(elem, offsetPath, distance); // Subtract the element's flow position within its containing block. // The offset-path positions the element absolutely within the containing block, // but the walk already adds offsetLeft/offsetTop (flow position). To avoid // double-counting, make the offset relative to the flow position. const parent = elem.parentElement; if (parent instanceof HTMLElement || parent instanceof (parent.ownerDocument.defaultView ?? window).HTMLElement) { if (elem.offsetParent === parent) { // Containing block = parent = offsetParent x -= elem.offsetLeft; y -= elem.offsetTop; } else if (elem.offsetParent === parent.offsetParent) { // Both share the same offsetParent x -= (elem.offsetLeft - parent.offsetLeft); y -= (elem.offsetTop - parent.offsetTop); } } // Handle offset-rotate let rotateFinal = 0; if (offsetRotate.startsWith("auto")) { let parts = offsetRotate.split(/\s+/); let extra = parts.length === 2 ? parseFloat(parts[1]) : 0; rotateFinal = angle + extra; } else { rotateFinal = parseFloat(offsetRotate); } const anchor = parseOffsetAnchor(offsetAnchor, transformOrigin, elem); const anchorMatrix = new DOMMatrix().translateSelf(-anchor.x, -anchor.y); let m = anchorMatrix.translate(x, y); m.multiplySelf(anchorMatrix.invertSelf()); m.rotateSelf(rotateFinal); m.translateSelf(-anchor.x, -anchor.y); return m; } function parseOffsetAnchor(str, transformOrigin, elem) { const width = elem.offsetWidth; const height = elem.offsetHeight; if (!str || str === "auto") { str = transformOrigin; } const parts = str.split(/\s+/); if (parts.length === 1) { // 1-value syntax = x only, y = center const x = parsePosition(parts[0], width); return { x, y: height / 2 }; } const x = parsePosition(parts[0], width); const y = parsePosition(parts[1], height); return { x, y }; } function parsePosition(part, size) { part = part.trim(); if (part.endsWith("%")) { return parseFloat(part) / 100 * size; } if (part.endsWith("px")) { return parseFloat(part); } // keywords switch (part) { case "left": return 0; case "top": return 0; case "center": return size / 2; case "right": return size; case "bottom": return size; } return parseFloat(part); } function parseOffsetDistance(str) { str = str.trim(); if (str.endsWith("%")) { return parseFloat(str) / 100; // normalized (0..1) } return parseFloat(str); // px value if pathLength = 1 } function parseAngle(str) { if (!str) return 0; str = str.trim(); if (str.endsWith("deg")) return parseFloat(str); if (str.endsWith("rad")) return parseFloat(str) * (180 / Math.PI); if (str.endsWith("grad")) return parseFloat(str) * 0.9; return parseFloat(str); } function computeOffsetPathPoint(elem, offsetPath, distNorm) { if (!offsetPath || offsetPath === "none") { return { x: 0, y: 0, angle: 0 }; } const value = offsetPath.trim(); let m = value.match(/path\(["'](.+)["']\)/); if (m) return computePathType(m[1], distNorm); if (value.startsWith("circle(")) return computeCircle(value, distNorm); if (value.startsWith("ellipse(")) return computeEllipse(value, distNorm); if (value.startsWith("inset(")) return computeInset(value, elem, distNorm); if (value.startsWith("rect(")) return computeRect(value, distNorm); if (value.startsWith("xywh(")) return computeXYWH(value, distNorm); if (value.startsWith("ray(")) return computeRay(value, distNorm); if (value.startsWith("polygon(")) return computePolygon(value, distNorm); console.warn("Unsupported offset-path:", offsetPath); return { x: 0, y: 0, angle: 0 }; } function computePathType(pathData, distNorm) { let svgPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); svgPath.setAttribute("d", pathData); const total = svgPath.getTotalLength(); const dist = distNorm <= 1 ? distNorm * total : distNorm; const p1 = svgPath.getPointAtLength(dist); const p2 = svgPath.getPointAtLength(Math.min(total, dist + 0.01)); let angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI; return { x: p1.x, y: p1.y, angle }; } function computeRay(str, t) { let m = str.match(/ray\(([^)]+)\)/); let inside = m[1].trim(); // Split on "at" (optional) let [beforeAt, atPart] = inside.split("at").map(s => s && s.trim()); // angle let parts = beforeAt.split(/\s+/); let angleDeg = parseAngle(parts[0]); let angleRad = angleDeg * Math.PI / 180; // point of origin let ox = 0, oy = 0; if (atPart) { const pos = atPart.split(/\s+/); ox = parseFloat(pos[0]); oy = parseFloat(pos[1]); } // Ray: infinite line; offset-distance is distance along ray let dist = (t <= 1 ? t : t); // percentage normalized already let x = ox + Math.cos(angleRad) * dist; let y = oy + Math.sin(angleRad) * dist; // tangent is ray direction return { x, y, angle: angleDeg }; } function computeCircle(str, t) { let m = str.match(/circle\(([^)]+)\)/); let inner = m[1]; let [radiusPart, atPart] = inner.split("at").map(s => s.trim()); let r = parseFloat(radiusPart); let [cx, cy] = atPart.split(/\s+/).map(parseFloat); let angleRad = t * 2 * Math.PI; let x = cx + Math.cos(angleRad) * r; let y = cy + Math.sin(angleRad) * r; let tangentAngleDeg = angleRad * 180 / Math.PI + 90; return { x, y, angle: tangentAngleDeg }; } function computeEllipse(str, t) { let m = str.match(/ellipse\(([^)]+)\)/); let parts = m[1].split("at"); let radii = parts[0].trim().split(/\s+/).map(parseFloat); let center = parts[1].trim().split(/\s+/).map(parseFloat); let rx = radii[0]; let ry = radii[1]; let cx = center[0]; let cy = center[1]; let angleRad = t * 2 * Math.PI; let x = cx + Math.cos(angleRad) * rx; let y = cy + Math.sin(angleRad) * ry; // tangent direction derivative let dx = -Math.sin(angleRad) * rx; let dy = Math.cos(angleRad) * ry; let tangentAngleDeg = Math.atan2(dy, dx) * 180 / Math.PI; return { x, y, angle: tangentAngleDeg }; } function computeRect(str, t) { let m = str.match(/rect\(([^)]+)\)/); let nums = m[1].split(/\s+/).map(s => parseFloat(s)); let top = nums[0], right = nums[1], bottom = nums[2], left = nums[3]; return rectPath(top, left, right, bottom, t); } function computeXYWH(str, t) { let m = str.match(/xywh\(([^)]+)\)/); let nums = m[1].split(/\s+/).map(parseFloat); let left = nums[0]; let top = nums[1]; let width = nums[2]; let height = nums[3]; return rectPath(top, left, left + width, top + height, t); } function computePolygon(str, t) { let m = str.match(/polygon\(([^)]+)\)/); let pairs = m[1].split(",").map(p => p.trim().split(/\s+/).map(parseFloat)); // Build cumulative lengths let pts = pairs; let lengths = [0]; for (let i = 1; i < pts.length; i++) { let dx = pts[i][0] - pts[i - 1][0]; let dy = pts[i][1] - pts[i - 1][1]; lengths.push(Math.hypot(dx, dy) + lengths[i - 1]); } // close polygon let dx = pts[0][0] - pts[pts.length - 1][0]; let dy = pts[0][1] - pts[pts.length - 1][1]; lengths.push(Math.hypot(dx, dy) + lengths[lengths.length - 1]); let total = lengths[lengths.length - 1]; let target = t * total; // find segment let i = lengths.findIndex(len => len >= target); if (i <= 0) i = 1; let prevLen = lengths[i - 1]; let nextLen = lengths[i]; let segT = (target - prevLen) / (nextLen - prevLen); // segment points let a = pts[(i - 1) % pts.length]; let b = pts[i % pts.length]; let x = a[0] + (b[0] - a[0]) * segT; let y = a[1] + (b[1] - a[1]) * segT; let angle = Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI; return { x, y, angle }; } function rectPath(top, left, right, bottom, t) { let w = right - left; let h = bottom - top; let perimeter = 2 * (w + h); let dist = t * perimeter; // go around edges if (dist < w) { // top edge let x = left + dist; return { x, y: top, angle: 0 }; } dist -= w; if (dist < h) { // right edge let y = top + dist; return { x: right, y, angle: 90 }; } dist -= h; if (dist < w) { // bottom edge let x = right - dist; return { x, y: bottom, angle: 180 }; } dist -= w; // left edge let y = bottom - dist; return { x: left, y, angle: 270 }; } // normalized inset uses calc function tokenizeCalc(input) { let tokens = []; let i = 0; while (i < input.length) { let ch = input[i]; if (/\s/.test(ch)) { i++; continue; } // operators & parentheses if ("+-*/()".includes(ch)) { tokens.push({ type: ch, value: ch }); i++; continue; } // numbers or dimensions or % if (/[0-9.]/.test(ch)) { let start = i; while (/[0-9.]/.test(input[i])) i++; let num = input.slice(start, i); if (input[i] === "%") { i++; tokens.push({ type: "percentage", value: parseFloat(num) }); continue; } // only px supported if (input.slice(i, i+2) === "px") { i += 2; tokens.push({ type: "dimension", value: parseFloat(num), unit: "px" }); continue; } // plain number tokens.push({ type: "number", value: parseFloat(num) }); continue; } // function name (calc) if (/[a-zA-Z]/.test(ch)) { let start = i; while (/[a-zA-Z]/.test(input[i])) i++; let name = input.slice(start, i); if (name === "calc" && input[i] === "(") { tokens.push({ type: "func", value: "calc" }); continue; } throw new Error("Unsupported function: " + name); } throw new Error("Unexpected character in calc(): " + ch); } return tokens; } // normalized inset uses calc function parseCalc(tokens) { let i = 0; function peek() { return tokens[i]; } function consume() { return tokens[i++]; } function parseExpression() { let node = parseTerm(); while (peek() && (peek().type === "+" || peek().type === "-")) { let op = consume().type; let right = parseTerm(); node = { type: "binary", op, left: node, right }; } return node; } function parseTerm() { let node = parseFactor(); while (peek() && (peek().type === "*" || peek().type === "/")) { let op = consume().type; let right = parseFactor(); node = { type: "binary", op, left: node, right }; } return node; } function parseFactor() { let t = peek(); if (!t) throw "Unexpected end in calc()"; if (t.type === "number") { consume(); return { type: "number", value: t.value }; } if (t.type === "dimension") { consume(); return { type: "dimension", value: t.value, unit: t.unit }; } if (t.type === "percentage") { consume(); return { type: "percentage", value: t.value }; } if (t.type === "func") { consume(); // "calc" if (peek().type !== "(") throw "Expected '(' after calc"; consume(); let node = parseExpression(); if (!peek() || peek().type !== ")") throw "Expected ')'"; consume(); return node; } if (t.type === "(") { consume(); let node = parseExpression(); if (!peek() || peek().type !== ")") throw "Expected ')'"; consume(); return node; } throw new Error("Unexpected calc token " + JSON.stringify(t)); } let ast = parseExpression(); if (i !== tokens.length) throw "Extra tokens after calc"; return ast; } // normalized inset uses calc function evalCalc(ast, env) { switch (ast.type) { case "number": return ast.value; case "dimension": return ast.value; // px only -> already a number case "percentage": return env.percentBase * (ast.value / 100); case "binary": { let l = evalCalc(ast.left, env); let r = evalCalc(ast.right, env); switch (ast.op) { case "+": return l + r; case "-": return l - r; case "*": return l * r; case "/": return l / r; } } } throw "Invalid AST node " + ast.type; } function resolveLength(expr, element, useHeight = false) { expr = expr.trim(); // Fast path: pure px if (/^[0-9.]+px$/.test(expr)) return parseFloat(expr); let base = useHeight ? element.offsetHeight : element.offsetWidth; // Pure % if (/^[0-9.]+%$/.test(expr)) { let p = parseFloat(expr); return base * (p / 100); } // calc(...) or mixed values const ast = parseCalc(tokenizeCalc(expr)); return evalCalc(ast, { percentBase: base }); } function parseInsetArgs(str) { let inside = str.trim() .replace(/^inset\s*\(/, "") .replace(/\)\s*$/, ""); let args = []; let current = ""; let depth = 0; for (let i = 0; i < inside.length; i++) { let ch = inside[i]; if (ch === "(") { depth++; current += ch; } else if (ch === ")") { depth--; current += ch; } else if (/\s/.test(ch) && depth === 0) { if (current.trim() !== "") { args.push(current.trim()); current = ""; } } else { current += ch; } } if (current.trim() !== "") { args.push(current.trim()); } return args; } /** * * @param {string} str * @param {HTMLElement} element * @param {number} progress * @returns */ function computeInset(str, element, progress) { const args = parseInsetArgs(str); if (args.length !== 4) throw new Error("inset() must have 4 arguments"); const topPx = resolveLength(args[0], element, true); const rightPx = resolveLength(args[1], element, false); const bottomPx = resolveLength(args[2], element, true); const leftPx = resolveLength(args[3], element, false); const w = element.offsetWidth; const h = element.offsetHeight; // Actual rectangle coordinates const x1 = leftPx; const y1 = topPx; const x2 = w - rightPx; const y2 = h - bottomPx; // Rectangle perimeter const P = 2 * ((x2 - x1) + (y2 - y1)); let d = P * progress; // Walk the rectangle clockwise, return point // Top edge: (x1 -> x2, y1) let len = x2 - x1; if (d <= len) return { x: x1 + d, y: y1, angle: 0 }; d -= len; // Right edge: (x2, y1 -> y2) len = y2 - y1; if (d <= len) return { x: x2, y: y1 + d, angle: 90 }; d -= len; // Bottom edge: (x2 -> x1, y2) len = x2 - x1; if (d <= len) return { x: x2 - d, y: y2, angle: 180 }; d -= len; // Left edge: (x1, y2 -> y1) return { x: x1, y: y2 - d, angle: 270 }; } //Code from: https://github.com/floating-ui/floating-ui/blob/master/packages/utils/src/dom.ts const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective']; const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter']; const containValues = ['paint', 'layout', 'strict', 'content']; function isElement(value) { const elType = value?.ownerDocument?.defaultView?.Element; return value instanceof Element || (elType != null && value instanceof elType); } /** * * @param {CSSStyleDeclaration} css * @returns {boolean} */ function isContainingBlock(css) { // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block // https://drafts.csswg.org/css-transforms-2/#individual-transforms return ( transformProperties.some((value) => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || (css.backdropFilter ? css.backdropFilter !== 'none' : false) || (css.filter ? css.filter !== 'none' : false) || willChangeValues.some((value) => (css.willChange || '').includes(value)) || containValues.some((value) => (css.contain || '').includes(value)) ); } //Code from: https://github.com/jcfranco/composed-offset-position/blob/main/src/index.ts function flatTreeParent(element) { if (element.assignedSlot) return element.assignedSlot; if (element.parentNode instanceof ShadowRoot) return element.parentNode.host; return element.parentNode; } function isFlatTreeInclusiveAncestor(ancestor, node) { for (let current = node; current; current = flatTreeParent(current)) { if (current === ancestor) return true; } return false; } function ancestorTreeScopes(element) { const scopes = new Set(); let currentScope = element.getRootNode(); const shadowRootCtor = element.ownerDocument?.defaultView?.ShadowRoot ?? ShadowRoot; while (currentScope) { scopes.add(currentScope); if (currentScope instanceof shadowRootCtor) { currentScope = currentScope.host?.getRootNode() ?? null; } else { currentScope = currentScope.parentNode ? currentScope.parentNode.getRootNode() : null; } } return scopes; } function offsetParentPolyfill(element) { // Do an initial walk to check for display:none ancestors. for (let ancestor = element; ancestor; ancestor = flatTreeParent(ancestor)) { if (!(ancestor instanceof Element)) continue; if (getCachedComputedStyle(ancestor).display === 'none') return null; } for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) { if (!(ancestor instanceof Element)) continue; const style = getCachedComputedStyle(ancestor); if (style.display === 'contents') continue; if (style.position !== 'static' || isContainingBlock(style)) return ancestor; if (ancestor.tagName === 'BODY') return ancestor; } return null; } /** * * @param {*} element * @param {'offsetTop' | 'offsetLeft'} offsetTopOrLeft * @returns */ function offsetTopLeftPolyfill(element, offsetTopOrLeft) { let value = element[offsetTopOrLeft]; let nextOffsetParent = offsetParentPolyfill(element); const scopes = ancestorTreeScopes(element); while (nextOffsetParent && !scopes.has(nextOffsetParent.getRootNode())) { value -= nextOffsetParent[offsetTopOrLeft]; nextOffsetParent = offsetParentPolyfill(nextOffsetParent); } return value; } /** * @param {Element} element * @returns {boolean} */ function createsFixedContainingBlock(element) { const cs = getCachedComputedStyle(element); if ((cs.transform && cs.transform !== 'none') || (cs.perspective && cs.perspective !== 'none') || (cs.filter && cs.filter !== 'none') || (cs.backdropFilter && cs.backdropFilter !== 'none')) { return true; } const contain = cs.contain || ''; if (contain.includes('paint') || contain.includes('layout') || contain.includes('strict') || contain.includes('content')) { return true; } const willChange = cs.willChange || ''; return /transform|perspective|filter|backdrop-filter/.test(willChange); } /** * @param {HTMLElement} element * @param {HTMLIFrameElement[]=} iframes * @returns {Element | null} */ function getNearestFixedContainingBlock(element, iframes) { let parent = getParentElementIncludingSlots(element, iframes); while (parent) { if (createsFixedContainingBlock(parent)) return parent; parent = getParentElementIncludingSlots(parent, iframes); } return null; } ================================================ FILE: packages/web-component-designer/src/elements/helper/w3color.ts ================================================ /* w3color.js ver.1.18 by w3schools.com (Do not remove this line)*/ export class w3color { red: number = 0; green: number = 0; blue: number = 0; hue: number = 0; sat: number = 0; lightness: number = 0; whiteness: number = 0; blackness: number = 0; cyan: number = 0; magenta: number = 0; yellow: number = 0; black: number = 0; ncol: string = 'R'; opacity: number = 1; valid: boolean = false; toRgbString() { return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")"; } toRgbaString() { return "rgba(" + this.red + ", " + this.green + ", " + this.blue + ", " + this.opacity + ")"; } toHwbString() { return "hwb(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%)"; } toHwbStringDecimal() { return "hwb(" + this.hue + ", " + this.whiteness + ", " + this.blackness + ")"; } toHwbaString() { return "hwba(" + this.hue + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity + ")"; } toHslString() { return "hsl(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%)"; } toHslStringDecimal() { return "hsl(" + this.hue + ", " + this.sat + ", " + this.lightness + ")"; } toHslaString() { return "hsla(" + this.hue + ", " + Math.round(this.sat * 100) + "%, " + Math.round(this.lightness * 100) + "%, " + this.opacity + ")"; } toCmykString() { return "cmyk(" + Math.round(this.cyan * 100) + "%, " + Math.round(this.magenta * 100) + "%, " + Math.round(this.yellow * 100) + "%, " + Math.round(this.black * 100) + "%)"; } toCmykStringDecimal() { return "cmyk(" + this.cyan + ", " + this.magenta + ", " + this.yellow + ", " + this.black + ")"; } toNcolString() { return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%"; } toNcolStringDecimal() { return this.ncol + ", " + this.whiteness + ", " + this.blackness; } toNcolaString() { return this.ncol + ", " + Math.round(this.whiteness * 100) + "%, " + Math.round(this.blackness * 100) + "%, " + this.opacity; } toName() { let r, g, b, colorhexs = w3color.getColorArr('hexs'); for (let i = 0; i < colorhexs.length; i++) { r = parseInt(colorhexs[i].substr(0, 2), 16); g = parseInt(colorhexs[i].substr(2, 2), 16); b = parseInt(colorhexs[i].substr(4, 2), 16); if (this.red == r && this.green == g && this.blue == b) { return w3color.getColorArr('names')[i]; } } return null; } toHexString() { let r = w3color.toHex(this.red); let g = w3color.toHex(this.green); let b = w3color.toHex(this.blue); return "#" + r + g + b; } toNameOrHexString() { let name = this.toName(); if (!name) name = this.toHexString(); return name; } toRgb() { return { r: this.red, g: this.green, b: this.blue, a: this.opacity }; } toHsl() { return { h: this.hue, s: this.sat, l: this.lightness, a: this.opacity }; } toHwb() { return { h: this.hue, w: this.whiteness, b: this.blackness, a: this.opacity }; } toCmyk() { return { c: this.cyan, m: this.magenta, y: this.yellow, k: this.black, a: this.opacity }; } toNcol() { return { ncol: this.ncol, w: this.whiteness, b: this.blackness, a: this.opacity }; } isDark(n) { let m = (n || 128); return (((this.red * 299 + this.green * 587 + this.blue * 114) / 1000) < m); } saturate(n) { let x, rgb, color; x = (n / 100 || 0.1); this.sat += x; if (this.sat > 1) { this.sat = 1; } rgb = w3color.hslToRgb(this.hue, this.sat, this.lightness); color = w3color.colorObject(rgb, this.opacity, this.hue, this.sat); this.attachValues(color); } desaturate(n) { let x, rgb, color; x = (n / 100 || 0.1); this.sat -= x; if (this.sat < 0) { this.sat = 0; } rgb = w3color.hslToRgb(this.hue, this.sat, this.lightness); color = w3color.colorObject(rgb, this.opacity, this.hue, this.sat); this.attachValues(color); } lighter(n) { let x, rgb, color; x = (n / 100 || 0.1); this.lightness += x; if (this.lightness > 1) { this.lightness = 1; } rgb = w3color.hslToRgb(this.hue, this.sat, this.lightness); color = w3color.colorObject(rgb, this.opacity, this.hue, this.sat); this.attachValues(color); } darker(n) { let x, rgb, color; x = (n / 100 || 0.1); this.lightness -= x; if (this.lightness < 0) { this.lightness = 0; } rgb = w3color.hslToRgb(this.hue, this.sat, this.lightness); color = w3color.colorObject(rgb, this.opacity, this.hue, this.sat); this.attachValues(color); } attachValues(color) { this.red = color.red; this.green = color.green; this.blue = color.blue; this.hue = color.hue; this.sat = color.sat; this.lightness = color.lightness; this.whiteness = color.whiteness; this.blackness = color.blackness; this.cyan = color.cyan; this.magenta = color.magenta; this.yellow = color.yellow; this.black = color.black; this.ncol = color.ncol; this.opacity = color.opacity; this.valid = color.valid; } static toColorObject(c): w3color { let x, y, typ, arr = [], arrlength, i, opacity, match, a, hue, sat, rgb, colornames = [], colorhexs = []; c = w3color.w3trim(c.toLowerCase()); x = c.substr(0, 1).toUpperCase(); y = c.substr(1); a = 1; if ((x == "R" || x == "Y" || x == "G" || x == "C" || x == "B" || x == "M" || x == "W") && !isNaN(y)) { if (c.length == 6 && c.indexOf(",") == -1) { } else { c = "ncol(" + c + ")"; } } if (c.length != 3 && c.length != 6 && !isNaN(c)) { c = "ncol(" + c + ")"; } if (c.indexOf(",") > 0 && c.indexOf("(") == -1) { c = "ncol(" + c + ")"; } if (c.substr(0, 3) == "rgb" || c.substr(0, 3) == "hsl" || c.substr(0, 3) == "hwb" || c.substr(0, 4) == "ncol" || c.substr(0, 4) == "cmyk") { if (c.substr(0, 4) == "ncol") { if (c.split(",").length == 4 && c.indexOf("ncola") == -1) { c = c.replace("ncol", "ncola"); } typ = "ncol"; c = c.substr(4); } else if (c.substr(0, 4) == "cmyk") { typ = "cmyk"; c = c.substr(4); } else { typ = c.substr(0, 3); c = c.substr(3); } arrlength = 3; opacity = false; if (c.substr(0, 1).toLowerCase() == "a") { arrlength = 4; opacity = true; c = c.substr(1); } else if (typ == "cmyk") { arrlength = 4; if (c.split(",").length == 5) { arrlength = 5; opacity = true; } } c = c.replace("(", ""); c = c.replace(")", ""); arr = c.split(","); if (typ == "rgb") { if (arr.length != arrlength) { return new w3color(); } for (i = 0; i < arrlength; i++) { if (arr[i] == "" || arr[i] == " ") { arr[i] = "0"; } if (arr[i].indexOf("%") > -1) { arr[i] = arr[i].replace("%", ""); arr[i] = Number(arr[i] / 100); if (i < 3) { arr[i] = Math.round(arr[i] * 255); } } if (isNaN(arr[i])) { return new w3color(); } if (parseInt(arr[i]) > 255) { arr[i] = 255; } if (i < 3) { arr[i] = parseInt(arr[i]); } if (i == 3 && Number(arr[i]) > 1) { arr[i] = 1; } } rgb = { r: arr[0], g: arr[1], b: arr[2] }; if (opacity == true) { a = Number(arr[3]); } } if (typ == "hsl" || typ == "hwb" || typ == "ncol") { while (arr.length < arrlength) { arr.push("0"); } if (typ == "hsl" || typ == "hwb") { if (parseInt(arr[0]) >= 360) { arr[0] = 0; } } for (i = 1; i < arrlength; i++) { if (arr[i].indexOf("%") > -1) { arr[i] = arr[i].replace("%", ""); arr[i] = Number(arr[i]); if (isNaN(arr[i])) { return new w3color(); } arr[i] = arr[i] / 100; } else { arr[i] = Number(arr[i]); } if (Number(arr[i]) > 1) { arr[i] = 1; } if (Number(arr[i]) < 0) { arr[i] = 0; } } if (typ == "hsl") { rgb = w3color.hslToRgb(arr[0], arr[1], arr[2]); hue = Number(arr[0]); sat = Number(arr[1]); } if (typ == "hwb") { rgb = w3color.hwbToRgb(arr[0], arr[1], arr[2]); } if (typ == "ncol") { rgb = w3color.ncolToRgb(arr[0], arr[1], arr[2]); } if (opacity == true) { a = Number(arr[3]); } } if (typ == "cmyk") { while (arr.length < arrlength) { arr.push("0"); } for (i = 0; i < arrlength; i++) { if (arr[i].indexOf("%") > -1) { arr[i] = arr[i].replace("%", ""); arr[i] = Number(arr[i]); if (isNaN(arr[i])) { return new w3color(); } arr[i] = arr[i] / 100; } else { arr[i] = Number(arr[i]); } if (Number(arr[i]) > 1) { arr[i] = 1; } if (Number(arr[i]) < 0) { arr[i] = 0; } } rgb = w3color.cmykToRgb(arr[0], arr[1], arr[2], arr[3]); if (opacity == true) { a = Number(arr[4]); } } } else if (c.substr(0, 3) == "ncs") { rgb = w3color.ncsToRgb(c); } else { match = false; colornames = w3color.getColorArr('names'); for (i = 0; i < colornames.length; i++) { if (c.toLowerCase() == colornames[i].toLowerCase()) { colorhexs = w3color.getColorArr('hexs'); match = true; rgb = { r: parseInt(colorhexs[i].substr(0, 2), 16), g: parseInt(colorhexs[i].substr(2, 2), 16), b: parseInt(colorhexs[i].substr(4, 2), 16) }; break; } } if (match == false) { c = c.replace("#", ""); if (c.length == 3) { c = c.substr(0, 1) + c.substr(0, 1) + c.substr(1, 1) + c.substr(1, 1) + c.substr(2, 1) + c.substr(2, 1); } for (i = 0; i < c.length; i++) { if (!w3color.isHex(c.substr(i, 1))) { return new w3color(); } } arr[0] = parseInt(c.substr(0, 2), 16); arr[1] = parseInt(c.substr(2, 2), 16); arr[2] = parseInt(c.substr(4, 2), 16); for (i = 0; i < 3; i++) { if (isNaN(arr[i])) { return new w3color(); } } rgb = { r: arr[0], g: arr[1], b: arr[2] }; } } return w3color.colorObject(rgb, a, hue, sat); } static colorObject(rgb, a, h, s) { let hsl, hwb, cmyk, ncol, color, hue, sat; if (!rgb) { return new w3color(); } if (a === null) { a = 1; } hsl = w3color.rgbToHsl(rgb.r, rgb.g, rgb.b); hwb = w3color.rgbToHwb(rgb.r, rgb.g, rgb.b); cmyk = w3color.rgbToCmyk(rgb.r, rgb.g, rgb.b); hue = (h || hsl.h); sat = (s || hsl.s); ncol = w3color.hueToNcol(hue); color = { red: rgb.r, green: rgb.g, blue: rgb.b, hue: hue, sat: sat, lightness: hsl.l, whiteness: hwb.w, blackness: hwb.b, cyan: cmyk.c, magenta: cmyk.m, yellow: cmyk.y, black: cmyk.k, ncol: ncol, opacity: a, valid: true }; color = w3color.roundDecimals(color); return Object.assign(new w3color(), color); } static getColorArr(x) { if (x == "names") { return ['AliceBlue', 'AntiqueWhite', 'Aqua', 'Aquamarine', 'Azure', 'Beige', 'Bisque', 'Black', 'BlanchedAlmond', 'Blue', 'BlueViolet', 'Brown', 'BurlyWood', 'CadetBlue', 'Chartreuse', 'Chocolate', 'Coral', 'CornflowerBlue', 'Cornsilk', 'Crimson', 'Cyan', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray', 'DarkGrey', 'DarkGreen', 'DarkKhaki', 'DarkMagenta', 'DarkOliveGreen', 'DarkOrange', 'DarkOrchid', 'DarkRed', 'DarkSalmon', 'DarkSeaGreen', 'DarkSlateBlue', 'DarkSlateGray', 'DarkSlateGrey', 'DarkTurquoise', 'DarkViolet', 'DeepPink', 'DeepSkyBlue', 'DimGray', 'DimGrey', 'DodgerBlue', 'FireBrick', 'FloralWhite', 'ForestGreen', 'Fuchsia', 'Gainsboro', 'GhostWhite', 'Gold', 'GoldenRod', 'Gray', 'Grey', 'Green', 'GreenYellow', 'HoneyDew', 'HotPink', 'IndianRed', 'Indigo', 'Ivory', 'Khaki', 'Lavender', 'LavenderBlush', 'LawnGreen', 'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan', 'LightGoldenRodYellow', 'LightGray', 'LightGrey', 'LightGreen', 'LightPink', 'LightSalmon', 'LightSeaGreen', 'LightSkyBlue', 'LightSlateGray', 'LightSlateGrey', 'LightSteelBlue', 'LightYellow', 'Lime', 'LimeGreen', 'Linen', 'Magenta', 'Maroon', 'MediumAquaMarine', 'MediumBlue', 'MediumOrchid', 'MediumPurple', 'MediumSeaGreen', 'MediumSlateBlue', 'MediumSpringGreen', 'MediumTurquoise', 'MediumVioletRed', 'MidnightBlue', 'MintCream', 'MistyRose', 'Moccasin', 'NavajoWhite', 'Navy', 'OldLace', 'Olive', 'OliveDrab', 'Orange', 'OrangeRed', 'Orchid', 'PaleGoldenRod', 'PaleGreen', 'PaleTurquoise', 'PaleVioletRed', 'PapayaWhip', 'PeachPuff', 'Peru', 'Pink', 'Plum', 'PowderBlue', 'Purple', 'RebeccaPurple', 'Red', 'RosyBrown', 'RoyalBlue', 'SaddleBrown', 'Salmon', 'SandyBrown', 'SeaGreen', 'SeaShell', 'Sienna', 'Silver', 'SkyBlue', 'SlateBlue', 'SlateGray', 'SlateGrey', 'Snow', 'SpringGreen', 'SteelBlue', 'Tan', 'Teal', 'Thistle', 'Tomato', 'Turquoise', 'Violet', 'Wheat', 'White', 'WhiteSmoke', 'Yellow', 'YellowGreen']; } if (x == "hexs") { return ['f0f8ff', 'faebd7', '00ffff', '7fffd4', 'f0ffff', 'f5f5dc', 'ffe4c4', '000000', 'ffebcd', '0000ff', '8a2be2', 'a52a2a', 'deb887', '5f9ea0', '7fff00', 'd2691e', 'ff7f50', '6495ed', 'fff8dc', 'dc143c', '00ffff', '00008b', '008b8b', 'b8860b', 'a9a9a9', 'a9a9a9', '006400', 'bdb76b', '8b008b', '556b2f', 'ff8c00', '9932cc', '8b0000', 'e9967a', '8fbc8f', '483d8b', '2f4f4f', '2f4f4f', '00ced1', '9400d3', 'ff1493', '00bfff', '696969', '696969', '1e90ff', 'b22222', 'fffaf0', '228b22', 'ff00ff', 'dcdcdc', 'f8f8ff', 'ffd700', 'daa520', '808080', '808080', '008000', 'adff2f', 'f0fff0', 'ff69b4', 'cd5c5c', '4b0082', 'fffff0', 'f0e68c', 'e6e6fa', 'fff0f5', '7cfc00', 'fffacd', 'add8e6', 'f08080', 'e0ffff', 'fafad2', 'd3d3d3', 'd3d3d3', '90ee90', 'ffb6c1', 'ffa07a', '20b2aa', '87cefa', '778899', '778899', 'b0c4de', 'ffffe0', '00ff00', '32cd32', 'faf0e6', 'ff00ff', '800000', '66cdaa', '0000cd', 'ba55d3', '9370db', '3cb371', '7b68ee', '00fa9a', '48d1cc', 'c71585', '191970', 'f5fffa', 'ffe4e1', 'ffe4b5', 'ffdead', '000080', 'fdf5e6', '808000', '6b8e23', 'ffa500', 'ff4500', 'da70d6', 'eee8aa', '98fb98', 'afeeee', 'db7093', 'ffefd5', 'ffdab9', 'cd853f', 'ffc0cb', 'dda0dd', 'b0e0e6', '800080', '663399', 'ff0000', 'bc8f8f', '4169e1', '8b4513', 'fa8072', 'f4a460', '2e8b57', 'fff5ee', 'a0522d', 'c0c0c0', '87ceeb', '6a5acd', '708090', '708090', 'fffafa', '00ff7f', '4682b4', 'd2b48c', '008080', 'd8bfd8', 'ff6347', '40e0d0', 'ee82ee', 'f5deb3', 'ffffff', 'f5f5f5', 'ffff00', '9acd32']; } return null; } static roundDecimals(c) { c.red = Number(c.red.toFixed(0)); c.green = Number(c.green.toFixed(0)); c.blue = Number(c.blue.toFixed(0)); c.hue = Number(c.hue.toFixed(0)); c.sat = Number(c.sat.toFixed(2)); c.lightness = Number(c.lightness.toFixed(2)); c.whiteness = Number(c.whiteness.toFixed(2)); c.blackness = Number(c.blackness.toFixed(2)); c.cyan = Number(c.cyan.toFixed(2)); c.magenta = Number(c.magenta.toFixed(2)); c.yellow = Number(c.yellow.toFixed(2)); c.black = Number(c.black.toFixed(2)); c.ncol = c.ncol.substr(0, 1) + Math.round(Number(c.ncol.substr(1))); c.opacity = Number(c.opacity.toFixed(2)); return c; } static hslToRgb(hue, sat, light) { let t1, t2, r, g, b; hue = hue / 60; if (light <= 0.5) { t2 = light * (sat + 1); } else { t2 = light + sat - (light * sat); } t1 = light * 2 - t2; r = w3color.hueToRgb(t1, t2, hue + 2) * 255; g = w3color.hueToRgb(t1, t2, hue) * 255; b = w3color.hueToRgb(t1, t2, hue - 2) * 255; return { r: r, g: g, b: b }; } static hueToRgb(t1, t2, hue) { if (hue < 0) hue += 6; if (hue >= 6) hue -= 6; if (hue < 1) return (t2 - t1) * hue + t1; else if (hue < 3) return t2; else if (hue < 4) return (t2 - t1) * (4 - hue) + t1; else return t1; } static hwbToRgb(hue, white, black) { let i, rgb, rgbArr = [], tot; rgb = w3color.hslToRgb(hue, 1, 0.50); rgbArr[0] = rgb.r / 255; rgbArr[1] = rgb.g / 255; rgbArr[2] = rgb.b / 255; tot = white + black; if (tot > 1) { white = Number((white / tot).toFixed(2)); black = Number((black / tot).toFixed(2)); } for (i = 0; i < 3; i++) { rgbArr[i] *= (1 - (white) - (black)); rgbArr[i] += (white); rgbArr[i] = Number(rgbArr[i] * 255); } return { r: rgbArr[0], g: rgbArr[1], b: rgbArr[2] }; } static cmykToRgb(c, m, y, k) { let r, g, b; r = 255 - ((Math.min(1, c * (1 - k) + k)) * 255); g = 255 - ((Math.min(1, m * (1 - k) + k)) * 255); b = 255 - ((Math.min(1, y * (1 - k) + k)) * 255); return { r: r, g: g, b: b }; } static ncolToRgb(ncol, white, black) { let letter, percent, h; h = ncol; if (isNaN(ncol.substr(0, 1))) { letter = ncol.substr(0, 1).toUpperCase(); percent = ncol.substr(1); if (percent == "") { percent = 0; } percent = Number(percent); if (isNaN(percent)) { return false; } if (letter == "R") { h = 0 + (percent * 0.6); } if (letter == "Y") { h = 60 + (percent * 0.6); } if (letter == "G") { h = 120 + (percent * 0.6); } if (letter == "C") { h = 180 + (percent * 0.6); } if (letter == "B") { h = 240 + (percent * 0.6); } if (letter == "M") { h = 300 + (percent * 0.6); } if (letter == "W") { h = 0; white = 1 - (percent / 100); black = (percent / 100); } } return w3color.hwbToRgb(h, white, black); } static hueToNcol(hue) { while (hue >= 360) { hue = hue - 360; } if (hue < 60) { return "R" + (hue / 0.6); } if (hue < 120) { return "Y" + ((hue - 60) / 0.6); } if (hue < 180) { return "G" + ((hue - 120) / 0.6); } if (hue < 240) { return "C" + ((hue - 180) / 0.6); } if (hue < 300) { return "B" + ((hue - 240) / 0.6); } if (hue < 360) { return "M" + ((hue - 300) / 0.6); } return null; } static ncsToRgb(ncs): { r: number, b: number, g: number } { let black, chroma, bc, percent, black1, chroma1, factor1, blue1, red1, red2, green1, green2, blue2, max, factor2, grey, r, g, b; ncs = w3color.w3trim(ncs).toUpperCase(); ncs = ncs.replace("(", ""); ncs = ncs.replace(")", ""); ncs = ncs.replace("NCS", "NCS "); ncs = ncs.replace(/ /g, " "); if (ncs.indexOf("NCS") == -1) { ncs = "NCS " + ncs; } ncs = ncs.match(/^(?:NCS|NCS\sS)\s(\d{2})(\d{2})-(N|[A-Z])(\d{2})?([A-Z])?$/); if (ncs === null) return null; black = parseInt(ncs[1], 10); chroma = parseInt(ncs[2], 10); bc = ncs[3]; if (bc != "N" && bc != "Y" && bc != "R" && bc != "B" && bc != "G") { return null; } percent = parseInt(ncs[4], 10) || 0; if (bc !== 'N') { black1 = (1.05 * black - 5.25); chroma1 = chroma; if (bc === 'Y' && percent <= 60) { red1 = 1; } else if ((bc === 'Y' && percent > 60) || (bc === 'R' && percent <= 80)) { if (bc === 'Y') { factor1 = percent - 60; } else { factor1 = percent + 40; } red1 = ((Math.sqrt(14884 - Math.pow(factor1, 2))) - 22) / 100; } else if ((bc === 'R' && percent > 80) || (bc === 'B')) { red1 = 0; } else if (bc === 'G') { factor1 = (percent - 170); red1 = ((Math.sqrt(33800 - Math.pow(factor1, 2))) - 70) / 100; } if (bc === 'Y' && percent <= 80) { blue1 = 0; } else if ((bc === 'Y' && percent > 80) || (bc === 'R' && percent <= 60)) { if (bc === 'Y') { factor1 = (percent - 80) + 20.5; } else { factor1 = (percent + 20) + 20.5; } blue1 = (104 - (Math.sqrt(11236 - Math.pow(factor1, 2)))) / 100; } else if ((bc === 'R' && percent > 60) || (bc === 'B' && percent <= 80)) { if (bc === 'R') { factor1 = (percent - 60) - 60; } else { factor1 = (percent + 40) - 60; } blue1 = ((Math.sqrt(10000 - Math.pow(factor1, 2))) - 10) / 100; } else if ((bc === 'B' && percent > 80) || (bc === 'G' && percent <= 40)) { if (bc === 'B') { factor1 = (percent - 80) - 131; } else { factor1 = (percent + 20) - 131; } blue1 = (122 - (Math.sqrt(19881 - Math.pow(factor1, 2)))) / 100; } else if (bc === 'G' && percent > 40) { blue1 = 0; } if (bc === 'Y') { green1 = (85 - 17 / 20 * percent) / 100; } else if (bc === 'R' && percent <= 60) { green1 = 0; } else if (bc === 'R' && percent > 60) { factor1 = (percent - 60) + 35; green1 = (67.5 - (Math.sqrt(5776 - Math.pow(factor1, 2)))) / 100; } else if (bc === 'B' && percent <= 60) { factor1 = (1 * percent - 68.5); green1 = (6.5 + (Math.sqrt(7044.5 - Math.pow(factor1, 2)))) / 100; } else if ((bc === 'B' && percent > 60) || (bc === 'G' && percent <= 60)) { green1 = 0.9; } else if (bc === 'G' && percent > 60) { factor1 = (percent - 60); green1 = (90 - (1 / 8 * factor1)) / 100; } factor1 = (red1 + green1 + blue1) / 3; red2 = ((factor1 - red1) * (100 - chroma1) / 100) + red1; green2 = ((factor1 - green1) * (100 - chroma1) / 100) + green1; blue2 = ((factor1 - blue1) * (100 - chroma1) / 100) + blue1; if (red2 > green2 && red2 > blue2) { max = red2; } else if (green2 > red2 && green2 > blue2) { max = green2; } else if (blue2 > red2 && blue2 > green2) { max = blue2; } else { max = (red2 + green2 + blue2) / 3; } factor2 = 1 / max; //@ts-ignore r = parseInt((red2 * factor2 * (100 - black1) / 100) * 255, 10); //@ts-ignore g = parseInt((green2 * factor2 * (100 - black1) / 100) * 255, 10); //@ts-ignore b = parseInt((blue2 * factor2 * (100 - black1) / 100) * 255, 10); if (r > 255) { r = 255; } if (g > 255) { g = 255; } if (b > 255) { b = 255; } if (r < 0) { r = 0; } if (g < 0) { g = 0; } if (b < 0) { b = 0; } } else { //@ts-ignore grey = parseInt((1 - black / 100) * 255, 10); if (grey > 255) { grey = 255; } if (grey < 0) { grey = 0; } r = grey; g = grey; b = grey; } return { r: r, g: g, b: b }; } static rgbToHsl(r, g, b) { let min, max, i, l, s, maxcolor, h, rgb = []; rgb[0] = r / 255; rgb[1] = g / 255; rgb[2] = b / 255; min = rgb[0]; max = rgb[0]; maxcolor = 0; for (i = 0; i < rgb.length - 1; i++) { if (rgb[i + 1] <= min) { min = rgb[i + 1]; } if (rgb[i + 1] >= max) { max = rgb[i + 1]; maxcolor = i + 1; } } if (maxcolor == 0) { h = (rgb[1] - rgb[2]) / (max - min); } if (maxcolor == 1) { h = 2 + (rgb[2] - rgb[0]) / (max - min); } if (maxcolor == 2) { h = 4 + (rgb[0] - rgb[1]) / (max - min); } if (isNaN(h)) { h = 0; } h = h * 60; if (h < 0) { h = h + 360; } l = (min + max) / 2; if (min == max) { s = 0; } else { if (l < 0.5) { s = (max - min) / (max + min); } else { s = (max - min) / (2 - max - min); } } s = s; return { h: h, s: s, l: l }; } static rgbToHwb(r, g, b) { let h, w, bl; r = r / 255; g = g / 255; b = b / 255; let max = Math.max(r, g, b); let min = Math.min(r, g, b); let chroma = max - min; if (chroma == 0) { h = 0; } else if (r == max) { h = (((g - b) / chroma) % 6) * 360; } else if (g == max) { h = ((((b - r) / chroma) + 2) % 6) * 360; } else { h = ((((r - g) / chroma) + 4) % 6) * 360; } w = min; bl = 1 - max; return { h: h, w: w, b: bl }; } static rgbToCmyk(r, g, b) { let c, m, y, k; r = r / 255; g = g / 255; b = b / 255; let max = Math.max(r, g, b); k = 1 - max; if (k == 1) { c = 0; m = 0; y = 0; } else { c = (1 - r - k) / (1 - k); m = (1 - g - k) / (1 - k); y = (1 - b - k) / (1 - k); } return { c: c, m: m, y: y, k: k }; } static toHex(n) { let hex = n.toString(16); while (hex.length < 2) { hex = "0" + hex; } return hex; } static w3trim(x) { return x.replace(/^\s+|\s+$/g, ''); } static isHex(x) { return ('0123456789ABCDEFabcdef'.indexOf(x) > -1); } } ================================================ FILE: packages/web-component-designer/src/elements/item/BindingMode.ts ================================================ export enum BindingMode { oneWay = 'oneWay', twoWay = 'twoWay' } ================================================ FILE: packages/web-component-designer/src/elements/item/BindingTarget.ts ================================================ export enum BindingTarget { /** Bindings for example starting with . to explicitly target a property */ explicitProperty = 'explicitProperty', property = 'property', attribute = 'attribute', class = 'class', css = 'css', cssvar = 'cssvar', event = 'event', content = 'content', //innertext or html... mhmmm, visible = 'visible' } ================================================ FILE: packages/web-component-designer/src/elements/item/DesignItem.ts ================================================ import { ServiceContainer } from '../services/ServiceContainer.js'; import { IDesignItem } from './IDesignItem.js'; import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js'; import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction.js'; import { ChangeGroup } from '../services/undoService/ChangeGroup.js'; import { NodeType } from './NodeType.js'; import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction.js'; import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js'; import { CssAttributeParser } from '../helper/CssAttributeParser.js'; import { ISize } from '../../interfaces/ISize.js'; import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js'; import { InsertChildAction } from '../services/undoService/transactionItems/InsertChildAction.js'; import { DomConverter } from '../widgets/designerView/DomConverter.js'; import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js'; import { enableStylesheetService } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js'; import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IPlacementService } from '../services/placementService/IPlacementService.js'; import { TextContentChangeAction } from '../services/undoService/transactionItems/TextContentChangeAction.js'; import { PropertyChangeAction } from '../services/undoService/transactionItems/PropertyChangeAction.js'; import { deepValue } from '../helper/Helper.js'; import { AttributeAndPropertyChangeAction } from '../services/undoService/transactionItems/AttributeAndPropertyChangeAction.js'; export const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time'; export const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time'; export const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time'; export const forceHoverAttributeName = 'node-projects-force-hover'; export const forceActiveAttributeName = 'node-projects-force-active'; export const forceVisitedAttributeName = 'node-projects-force-visited'; export const forceFocusAttributeName = 'node-projects-force-focus'; export const forceFocusWithinAttributeName = 'node-projects-force-focus-within'; export const forceFocusVisibleAttributeName = 'node-projects-force-focus-visible'; export class DesignItem implements IDesignItem { public lastContainerSize: ISize; parsedNode: any; node: Node; view: Node; serviceContainer: ServiceContainer; instanceServiceContainer: InstanceServiceContainer; nodeReplaced = new TypedEvent; get window() { if (this.isRootItem && this.node instanceof HTMLIFrameElement) return this.node.contentDocument.defaultView; return (this.node.ownerDocument.defaultView ?? window); } get document() { if (this.isRootItem && this.node instanceof HTMLIFrameElement) return this.node.contentDocument; return this.node.ownerDocument; } get usableContainer() { if (this.isRootItem && this.element instanceof (this.element.ownerDocument.defaultView ?? window).HTMLIFrameElement) return this.element.contentWindow.document; else if (this.isRootItem) return (this.node).shadowRoot; return this.element; } async clone() { try { const html = DomConverter.ConvertToString([this], false); const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer, true); return parsed[0]; } catch (err) { //TODO: clone service for design item, maybe refactor copy&paste to use this also... console.warn("could not clone design item.", this); } return null; } *allMatching(selectors: string) { if (this.hasChildren) { for (let d of this.children()) { if (d.nodeType == NodeType.Element && d.element.matches(selectors)) yield d; yield* d.allMatching(selectors); } } } public replaceNode(newNode: Node) { DesignItem._designItemMap.delete(this.node); DesignItem._designItemMap.set(newNode, this); if (this.view == this.node) this.view = newNode; this.node = newNode; this.nodeReplaced.emit(); } public get nodeType(): NodeType { if (this.node instanceof (this.node.ownerDocument.defaultView ?? window).Comment) return NodeType.Comment; if (this.node instanceof (this.node.ownerDocument.defaultView ?? window).Text) return NodeType.TextNode; return NodeType.Element; } private _attributes: Map public get hasAttributes() { return this._attributes.size > 0; } public hasAttribute(name: string) { return this._attributes.has(name); } public getAttribute(name: string): string { return this._attributes.get(name); } public *attributes() { for (let s of this._attributes) { yield s; } } _withoutUndoSetAttribute(name: string, value: string) { try { if (!this.isRootItem) this.element.setAttribute(name, value); } catch (e: any) { if (e?.code !== 5) console.warn(e) } this._attributes.set(name, value); this.serviceContainer.designItemService.handleSpecialAttributes(name, this); } _withoutUndoRemoveAttribute(name: string) { try { if (!this.isRootItem) this.element.removeAttribute(name); } catch (e: any) { if (e?.code !== 5) console.warn(e) } this._attributes.delete(name); this.serviceContainer.designItemService.handleSpecialAttributes(name, this); } private _styles: Map private _stylePriorities: Map public get hasStyles() { return this._styles.size > 0; } public hasStyle(name: string) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); return this._styles.has(nm); } public getStyle(name: string) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); return this._styles.get(nm); } public isStyleImportant(name: string) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); return this._stylePriorities.get(nm) === true; } public *styles() { for (let s of this._styles) { yield s; } } _withoutUndoSetStyle(name: string, value: string, important: boolean = false) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); this._styles.set(nm, value); if (important) this._stylePriorities.set(nm, true); else this._stylePriorities.delete(nm); } _withoutUndoRemoveStyle(name: string) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); this._styles.delete(nm); this._stylePriorities.delete(nm); } /* // this could maybe usefull to have such function, but naaa atm. public refreshAttributesAndStylesFromElement() { if (this.nodeType != NodeType.Element) return; const specialAttributeNames = [hideAtDesignTimeAttributeName, hideAtRunTimeAttributeName, lockAtDesignTimeAttributeName]; const specialAttributesToRefresh = new Set(); for (const attributeName of specialAttributeNames) { if (this._attributes.has(attributeName)) specialAttributesToRefresh.add(attributeName); } this._attributes.clear(); for (const attribute of this.element.attributes) { if (attribute.name === 'style') continue; this._attributes.set(attribute.name, attribute.value); if (specialAttributeNames.includes(attribute.name)) specialAttributesToRefresh.add(attribute.name); } this._styles.clear(); if (this.element instanceof (this.node.ownerDocument.defaultView ?? window).HTMLElement || this.element instanceof (this.node.ownerDocument.defaultView ?? window).SVGElement) { const cssParser = new CssAttributeParser(); const styleText = this.element.getAttribute('style'); if (styleText) { cssParser.parse(styleText); for (const entry of cssParser.entries) { this._styles.set(entry.name, entry.value); if (entry.important) this._stylePriorities.set(entry.name, true); } } } this._stylesCache = null; for (const attributeName of specialAttributesToRefresh) this.serviceContainer.designItemService.handleSpecialAttributes(attributeName, this); } */ private static _designItemMap = new WeakMap(); public get element(): Element { return this.view; } public get name() { return (this.node).localName; } public get id(): string { return this.element.id; } public set id(value: string) { const oldValue = this.element.id; this.element.id = value; if (this.id) this.setAttribute("id", value); else this.removeAttribute("id"); if (this.serviceContainer.referencesChangedService) this.serviceContainer.referencesChangedService.notifyReferencesChanged([{ designItem: this, oldValue, type: 'idChanged' }]); } public get isRootItem(): boolean { return this.instanceServiceContainer.designerCanvas.rootDesignItem === this; } *childrenRect(selectors: string) { if (this.hasChildren) { for (let d of this.children()) { if (d.nodeType == NodeType.Element && d.element.matches(selectors)) yield d; yield* d.allMatching(selectors); } } } _childArray: IDesignItem[] = []; public get hasChildren() { return this._childArray.length > 0; } public *children(recursive: boolean = false): IterableIterator { for (const e of this._childArray) { yield e; if (recursive) { for (const c of e.children(recursive)) { yield c; } } } } public get childCount(): number { return this._childArray.length; } public get firstChild(): IDesignItem { return this._childArray[0]; } private _parent: IDesignItem; public get parent(): IDesignItem { return this._parent; } public indexOf(designItem: IDesignItem): number { return this._childArray.indexOf(designItem); } public insertAdjacentElement(designItem: IDesignItem, where: InsertPosition) { let action: InsertChildAction; if (where == 'afterbegin') { action = new InsertChildAction(designItem, this, 0); } else if (where == 'beforeend') { action = new InsertChildAction(designItem, this, this._childArray.length); } else if (where == 'beforebegin') { action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this)); } else if (where == 'afterend') { action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this) + 1); } this.instanceServiceContainer.undoService.execute(action); } public insertChild(designItem: IDesignItem, index?: number) { const action = new InsertChildAction(designItem, this, index); this.instanceServiceContainer.undoService.execute(action); } public removeChild(designItem: IDesignItem) { this.serviceContainer.deletionService.removeItems([designItem]); } public remove() { this.serviceContainer.deletionService.removeItems([this]); } public clearChildren() { for (let i = this._childArray.length - 1; i >= 0; i--) { let di = this._childArray[i]; di.remove(); } } //abstract text content to own property. so only change via designer api will use it. public get hasContent() { return ((this.nodeType == NodeType.TextNode || this.nodeType == NodeType.Comment) && this.element.textContent != "") || (this._childArray.length === 0); } public get content(): string { if (this.nodeType == NodeType.TextNode || this.nodeType == NodeType.Comment) return this.node.textContent; else return this._childArray.map(x => x.content).join(); } public set content(value: string) { const grp = this.openGroup('set content'); this.clearChildren(); let t = document.createTextNode(value); let di = DesignItem.GetOrCreateDesignItem(t, t, this.serviceContainer, this.instanceServiceContainer); if (this.nodeType == NodeType.TextNode) { const idx = this.parent.indexOf(this); const parent = this.parent; this.remove() parent.insertChild(di, idx); } else if (this.nodeType == NodeType.Comment) { const action = new TextContentChangeAction(this, value, this.content); this.instanceServiceContainer.undoService.execute(action); } else this.insertChild(di); grp.commit(); } public get innerHTML(): string { const innerHTML = DomConverter.ConvertToString([...this.children()], false); return innerHTML; } public set innerHTML(value: string) { if (this.nodeType != NodeType.TextNode) { const grp = this.openGroup('set innerHTML'); this.clearChildren(); const range = document.createRange(); range.selectNode(document.body); const fragment = range.createContextualFragment(value); for (const n of [...fragment.childNodes]) { let di = DesignItem.createDesignItemFromInstance(n, this.serviceContainer, this.instanceServiceContainer) this.insertChild(di); } grp.commit(); } } public get isEmptyTextNode(): boolean { return this.nodeType === NodeType.TextNode && this.content?.trim() == ''; } public get hideAtDesignTime() { return this.hasAttribute(hideAtDesignTimeAttributeName); } public set hideAtDesignTime(value: boolean) { if (value) this.setAttribute(hideAtDesignTimeAttributeName, ""); else this.removeAttribute(hideAtDesignTimeAttributeName); } public get hideAtRunTime() { return this.hasAttribute(hideAtRunTimeAttributeName); } public set hideAtRunTime(value: boolean) { if (value) this.setAttribute(hideAtRunTimeAttributeName, ""); else this.removeAttribute(hideAtRunTimeAttributeName); } public get lockAtDesignTime() { return this.hasAttribute(lockAtDesignTimeAttributeName); } public set lockAtDesignTime(value: boolean) { if (value) this.setAttribute(lockAtDesignTimeAttributeName, "") else this.removeAttribute(lockAtDesignTimeAttributeName); } public static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem { node = DesignItem.updateRenderedNode(serviceContainer, node); let designItem = serviceContainer.designItemService.createDesignItem(node, node, serviceContainer, instanceServiceContainer); if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLTemplateElement && node.getAttribute('shadowrootmode') == 'open') { try { const shadow = (node.parentNode).attachShadow({ mode: 'open' }); const content = node.content.cloneNode(true); shadow.appendChild(content); } catch (err) { console.error("error attaching shadowdom", err) } } if (designItem.nodeType == NodeType.Element) { for (let a of designItem.element.attributes) { if (a.name !== 'style') { designItem._attributes.set(a.name, a.value); } } if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement || node instanceof (node.ownerDocument.defaultView ?? window).SVGElement) { const cssParser = new CssAttributeParser(); const st = node.getAttribute("style"); if (st) { cssParser.parse(st); for (let e of cssParser.entries) { designItem._styles.set(e.name, e.value); if (e.important) designItem._stylePriorities.set(e.name, true); } } serviceContainer.designItemService.handleSpecialAttributes(lockAtDesignTimeAttributeName, designItem); } (node).draggable = false; //even if it should be true, for better designer exp. } designItem._childArray = designItem._internalUpdateChildrenFromNodesChildren(); for (let c of designItem._childArray) { (c)._parent = designItem; } designItem.refreshRenderedDesignItem(); return designItem; } static updateRenderedNode(serviceContainer: ServiceContainer, node: Node) { let renderedNode = node; for (const service of serviceContainer.renderedDesignItemServices ?? []) { const nextNode = service.updateRenderedNode(renderedNode) ?? renderedNode; if (nextNode !== renderedNode && renderedNode.parentNode) renderedNode.parentNode.replaceChild(nextNode, renderedNode); renderedNode = nextNode; } return renderedNode; } querySelectorAll(selectors: string): NodeListOf { return this.usableContainer.querySelectorAll(selectors); } removeDesignerAttributesAndStylesFromChildren() { const els = this.querySelectorAll('*'); for (let e of els) { const di = DesignItem.GetDesignItem(e); if (!di.hasAttribute("draggable")) e.removeAttribute("draggable"); if (!di.hasStyle("pointer-events")) e.style.pointerEvents = ''; } } updateChildrenFromNodesChildren() { this._childArray = this._internalUpdateChildrenFromNodesChildren(); for (let c of this._childArray) { (c)._parent = this; } } _internalUpdateChildrenFromNodesChildren() { const newChilds = []; if (this.nodeType == NodeType.Element) { if (this.element instanceof (this.node.ownerDocument.defaultView ?? window).HTMLTemplateElement) { for (const c of this.element.content.childNodes) { const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer); newChilds.push(di); } } else if (this.isRootItem && this.element instanceof (this.node.ownerDocument.defaultView ?? window).HTMLIFrameElement) { for (const c of this.element.contentWindow.document.childNodes) { const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer); newChilds.push(di); } } else { for (const c of this.element.childNodes) { const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer); newChilds.push(di); } } } return newChilds; } _backupWhenEditContent; _inEditContent = false; editContent() { this._inEditContent = true; this._backupWhenEditContent = [...this.element.childNodes]; const nn = this.element.innerHTML this.element.innerHTML = ''; this.element.innerHTML = nn; this.element.setAttribute('contenteditable', ''); } editContentFinish() { if (this._inEditContent) { this._inEditContent = false; this.element.removeAttribute('contenteditable'); this.element.innerHTML = ''; for (let n of this._backupWhenEditContent) { this.element.appendChild(n); } this._backupWhenEditContent = null; } } public constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer) { this.node = node; this.view = node; this.parsedNode = parsedNode; this.serviceContainer = serviceContainer; this.instanceServiceContainer = instanceServiceContainer; this._attributes = new Map(); this._styles = new Map(); this._stylePriorities = new Map(); DesignItem._designItemMap.set(node, this); } public setView(node: Element) { this.view = node; DesignItem._designItemMap.set(node, this); this.refreshRenderedDesignItem(); } public refreshRenderedDesignItem() { for (const service of this.serviceContainer.renderedDesignItemServices ?? []) service.updateRenderedDesignItem(this); } public openGroup(title: string): ChangeGroup { return this.instanceServiceContainer.undoService.openGroup(title); } public getOrCreateDesignItem(node: Node) { return DesignItem.GetOrCreateDesignItem(node, node, this.serviceContainer, this.instanceServiceContainer); } static GetOrCreateDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem { if (!node) return null; let designItem: IDesignItem = DesignItem._designItemMap.get(node); if (!designItem) { let dis = serviceContainer.designItemService; designItem = dis.createDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer); } return designItem; } static GetDesignItem(node: Node): IDesignItem { if (!node) return null; let designItem: IDesignItem = DesignItem._designItemMap.get(node); return designItem; } public setStyle(name: string, value?: string | null, important?: boolean) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); if (this.isRootItem) { throw 'not allowed to set style on root item or use async setStyle'; } else { const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm), important, this.isStyleImportant(nm)); this.instanceServiceContainer.undoService.execute(action); } } public async setStyleAsync(name: string, value?: string | null, important?: boolean): Promise { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); //TODO: remove this special case (I think), should be in CSSSytleChangeAction. //Maybe we should be able to set a setscope (sheet, local, pseudo selctor, ...) if (this.isRootItem) { if (!this.instanceServiceContainer.stylesheetService) throw 'not allowed to set style on root item'; else { let decls = this.instanceServiceContainer.stylesheetService.getDeclarationsSortedBySpecificity(this, name); if (decls !== null && decls.length > 0) { this.instanceServiceContainer.stylesheetService.updateDeclarationValue(decls[0], value, important); } else { let rules = this.instanceServiceContainer.stylesheetService.getRules(':host').filter(x => !x.stylesheet?.readOnly); if (decls === null || rules.length === 0) { const cg = this.openGroup('add rule and set style: ' + name); const sheets = this.instanceServiceContainer.stylesheetService.getStylesheets(); const rule = await this.instanceServiceContainer.stylesheetService.addRule(sheets[0], ':host') this.instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(rule, name, value, important); cg.commit(); } else { this.instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(rules[0], name, value, important); } } } } else { const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm), important, this.isStyleImportant(nm)); this.instanceServiceContainer.undoService.execute(action); } } public removeStyle(name: string) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); const action = new CssStyleChangeAction(this, nm, '', this._styles.get(nm), false, this.isStyleImportant(nm)); this.instanceServiceContainer.undoService.execute(action); } public updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean, forceSet?: boolean) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); let declarations = this.instanceServiceContainer.stylesheetService?.getDeclarationsSortedBySpecificity(this, nm).filter(x => !x.stylesheet?.readOnly); if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declarations?.length) { // Set style locally if (this.getStyle(nm) != value || forceSet) { this.setStyle(nm, value, important); } else if (value == null) { this.removeStyle(nm); } } else { this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, important); } } public async updateStyleInSheetOrLocalAsync(name: string, value?: string | null, important?: boolean, forceSet?: boolean): Promise { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); let declarations = this.instanceServiceContainer.stylesheetService?.getDeclarationsSortedBySpecificity(this, nm).filter(x => !x.stylesheet?.readOnly); if (this.hasStyle(name) || this.instanceServiceContainer.designContext.extensionOptions[enableStylesheetService] === false || !declarations?.length) { // Set style locally if (this.getStyle(nm) != value || forceSet) { await this.setStyleAsync(nm, value, important); } else if (value == null) { this.removeStyle(nm); } } else { this.instanceServiceContainer.stylesheetService.updateDeclarationValue(declarations[0], value, important); } } public getStyleFromSheetOrLocal(name: string, fallback: string = null) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); if (this.hasStyle(name)) // Get style locally return this.getStyle(nm); let decls = this.instanceServiceContainer.stylesheetService?.getDeclarationsSortedBySpecificity(this, nm); if (decls && decls.length > 0) return decls[0].value; return null; } getStyleFromSheetOrLocalOrComputed(name: string, fallback: string = null) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); let value = this.getStyleFromSheetOrLocal(nm); if (!value) { value = getComputedStyle(this.element).getPropertyValue(nm) } return value ?? fallback; } getComputedStyleProperty(name: string, fallback: string = null) { let nm = name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(name); let value = this.getStyleFromSheetOrLocal(nm); if (!value) { value = getComputedStyle(this.element).getPropertyValue(nm) } return value ?? fallback; } getComputedStyle() { if (this.nodeType == NodeType.Element) return this.window.getComputedStyle(this.element); return null; } _stylesCache: IStyleRule[] = null; _cacheClearTimer: NodeJS.Timeout; public getAllStyles(): IStyleRule[] { let styles = this._stylesCache; if (styles) return styles; if (this.nodeType != NodeType.Element) return []; const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: this.isStyleImportant(x[0]), parent: null })); if (this.instanceServiceContainer.stylesheetService) { try { const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this); if (rules) { return [{ selector: null, declarations: localStyles, specificity: null, stylesheet: null }, ...rules]; } } catch (err) { console.warn('getAppliedRules', err); } } styles = [{ selector: null, declarations: localStyles, specificity: null, stylesheet: null }]; this._stylesCache = styles; clearTimeout(this._cacheClearTimer); this._cacheClearTimer = setTimeout(() => this._stylesCache = null, 30); return styles; } public setAttribute(name: string, value?: string | null) { const action = new AttributeChangeAction(this, name, value, this._attributes.get(name)); this.instanceServiceContainer.undoService.execute(action); } public removeAttribute(name: string) { const action = new AttributeChangeAction(this, name, null, this._attributes.get(name)); this.instanceServiceContainer.undoService.execute(action); } public setPropertyAndAttribute(name: string, value?: string | null) { const attributeName = PropertiesHelper.camelToDashCase(name); const propertyName = PropertiesHelper.dashToCamelCase(name); if (this.isRootItem) throw 'not allowed to set attribute on root item'; const action = new AttributeAndPropertyChangeAction(this, attributeName, propertyName, value, this.element[propertyName]); this.instanceServiceContainer.undoService.execute(action); } public removePropertyAndAttribute(name: string) { const attributeName = PropertiesHelper.camelToDashCase(name); const propertyName = PropertiesHelper.dashToCamelCase(name); const action = new AttributeAndPropertyChangeAction(this, attributeName, propertyName, null, this.element[propertyName]); this.instanceServiceContainer.undoService.execute(action); } public setProperty(name: string, value?: any) { //the prop change action should use the prop service. We need th setPropAndattribute. So undo works! if (this.isRootItem) throw 'not allowed to set attribute on root item'; const oldValue = deepValue(this.node, name); const action = new PropertyChangeAction(this, name, value, oldValue); this.instanceServiceContainer.undoService.execute(action); } // Internal implementations wich don't use undo/redo public _insertChildInternal(designItem: DesignItem, index?: number) { this._insertChildsInternal([designItem], index); } public _insertChildsInternal(designItems: DesignItem[], index?: number) { const frag = this.document.createDocumentFragment(); let beforeDs: IDesignItem = null; for (let designItem of designItems) { if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) { designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer); designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered); } if (designItem.parent) { designItem.parent._removeChildInternal(designItem); } frag.appendChild(designItem.view); (designItem)._parent = this; if (index == null || this._childArray.length == 0 || index >= this._childArray.length) { this._childArray.push(designItem); } else { beforeDs = this._childArray[index]; this._childArray.splice(index, 0, designItem); index++; } } if (beforeDs == null) { if (this.isRootItem) { if (this.usableContainer?.children[0] instanceof this.window.HTMLHtmlElement) this.usableContainer.children[0].remove(); this.usableContainer.appendChild(frag); } else if (this.view instanceof (this.node.ownerDocument.defaultView ?? window).HTMLTemplateElement) { this.view.content.appendChild(frag); } else this.view.appendChild(frag); } else { if (this.isRootItem) { if (this.usableContainer?.children[0] instanceof this.window.HTMLHtmlElement) this.usableContainer.children[0].remove(); this.usableContainer.insertBefore(frag, beforeDs.element); } else if (this.view instanceof (this.node.ownerDocument.defaultView ?? window).HTMLTemplateElement) { this.view.content.insertBefore(frag, beforeDs.element) } else this.view.insertBefore(frag, beforeDs.element) } //TODO: is this still needed??? /* if (this.instanceServiceContainer.selectionService.primarySelection == designItem) { designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer); if (designItem.getPlacementService().isEnterableContainer(this)) designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered); } */ this.refreshRenderedDesignItem(); } public _removeChildInternal(designItem: IDesignItem) { if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) { designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer); designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionAndCanBeEntered); } designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem], true); const index = this._childArray.indexOf(designItem); if (index > -1) { this._childArray.splice(index, 1); designItem.element.remove(); (designItem)._parent = null; } this.refreshRenderedDesignItem(); } getPlacementService(style?: CSSStyleDeclaration): IPlacementService { if (this.nodeType != NodeType.Element) return null; style ??= getComputedStyle(this.element); return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style)); } static createDesignItemFromImageBlob(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, data: Blob): Promise { return new Promise(resolve => { let reader = new FileReader(); reader.onloadend = () => { const img = document.createElement('img'); img.src = reader.result; const di = DesignItem.createDesignItemFromInstance(img, serviceContainer, instanceServiceContainer); return resolve(di); } reader.readAsDataURL(data); }) } get hasForcedCss() { return this.cssForceHover || this.cssForceActive || this.cssForceVisited || this.cssForceFocus || this.cssForceFocusWithin || this.cssForceFocusVisible; } get cssForceHover() { return this.element.hasAttribute(forceHoverAttributeName); } set cssForceHover(value: boolean) { if (value) this.element.setAttribute(forceHoverAttributeName, ''); else this.element.removeAttribute(forceHoverAttributeName); this.instanceServiceContainer.onContentChanged.emit([{ changeType: 'changed', type: 'attribute', name: forceHoverAttributeName, designItems: [this] }]); } get cssForceActive() { return this.element.hasAttribute(forceActiveAttributeName); } set cssForceActive(value: boolean) { if (value) this.element.setAttribute(forceActiveAttributeName, ''); else this.element.removeAttribute(forceActiveAttributeName); this.instanceServiceContainer.onContentChanged.emit([{ changeType: 'changed', type: 'attribute', name: forceActiveAttributeName, designItems: [this] }]); } get cssForceVisited() { return this.element.hasAttribute(forceVisitedAttributeName); } set cssForceVisited(value: boolean) { if (value) this.element.setAttribute(forceVisitedAttributeName, ''); else this.element.removeAttribute(forceVisitedAttributeName); this.instanceServiceContainer.onContentChanged.emit([{ changeType: 'changed', type: 'attribute', name: forceVisitedAttributeName, designItems: [this] }]); } get cssForceFocus() { return this.element.hasAttribute(forceFocusAttributeName); } set cssForceFocus(value: boolean) { if (value) this.element.setAttribute(forceFocusAttributeName, ''); else this.element.removeAttribute(forceFocusAttributeName); this.instanceServiceContainer.onContentChanged.emit([{ changeType: 'changed', type: 'attribute', name: forceFocusAttributeName, designItems: [this] }]); } get cssForceFocusWithin() { return this.element.hasAttribute(forceFocusWithinAttributeName); } set cssForceFocusWithin(value: boolean) { if (value) this.element.setAttribute(forceFocusWithinAttributeName, ''); else this.element.removeAttribute(forceFocusWithinAttributeName); this.instanceServiceContainer.onContentChanged.emit([{ changeType: 'changed', type: 'attribute', name: forceFocusWithinAttributeName, designItems: [this] }]); } get cssForceFocusVisible() { return this.element.hasAttribute(forceFocusVisibleAttributeName); } set cssForceFocusVisible(value: boolean) { if (value) this.element.setAttribute(forceFocusVisibleAttributeName, ''); else this.element.removeAttribute(forceFocusVisibleAttributeName); this.instanceServiceContainer.onContentChanged.emit([{ changeType: 'changed', type: 'attribute', name: forceFocusVisibleAttributeName, designItems: [this] }]); } } ================================================ FILE: packages/web-component-designer/src/elements/item/IBinding.ts ================================================ import { IBindingService } from '../services/bindingsService/IBindingService.js'; import { BindingMode } from './BindingMode.js'; import { BindingTarget } from './BindingTarget.js'; export interface IBinding { targetName?: string; //Name of Attribute, CSS-Property, Event, ... target?: BindingTarget; rawName?: string; //raw attribute name (if it's an attribute) rawValue?: string; //raw attribute value (or element html) type?: string //here a name wich the bindings Service recognizes.... expression?: string; //the bindings expression expressionTwoWay?: string; //a expression wich is used for write back bindableObjectNames?: string[]; //TODO: deprecate and remove bindableObjects?: IBindableComplexName[]; //if a name is not enough, use this list converters?: any; mode?: BindingMode; invert?: boolean; changedEvents?: string[]; nullSafe?: boolean; service: IBindingService; } export interface IBindableComplexName { //e.g. aa:$uservalue.0.name name?: string; //uservalue.0.name alias?: string; //aa modificator?: string; //$ } ================================================ FILE: packages/web-component-designer/src/elements/item/IDesignItem.ts ================================================ import { ServiceContainer } from '../services/ServiceContainer.js'; import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js'; import { ChangeGroup } from '../services/undoService/ChangeGroup.js'; import { NodeType } from './NodeType.js'; import { ISize } from "../../interfaces/ISize.js"; import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js'; import { IPlacementService } from '../services/placementService/IPlacementService.js'; import { TypedEvent } from '@node-projects/base-custom-webcomponent'; export interface IDesignItem { lastContainerSize: ISize; readonly window: Window & typeof globalThis; readonly document: Document; readonly usableContainer: ShadowRoot | Element | Document; updateChildrenFromNodesChildren(); refreshRenderedDesignItem(); setView(node: Element); replaceNode(newNode: Node); nodeReplaced: TypedEvent; clone(): Promise readonly nodeType: NodeType; readonly name: string; id: string; readonly isRootItem: boolean; readonly hasAttributes: boolean; readonly hasStyles: boolean; readonly hasChildren: boolean; children(recursive?: boolean): IterableIterator allMatching(selectors: string): IterableIterator readonly childCount: number; readonly firstChild: IDesignItem; readonly parent: IDesignItem; _insertChildsInternal(designItems: IDesignItem[], index?: number); _insertChildInternal(designItem: IDesignItem, index?: number); _removeChildInternal(designItem: IDesignItem); _withoutUndoSetStyle(name: string, value: string, important?: boolean); _withoutUndoRemoveStyle(name: string); _withoutUndoSetAttribute(name: string, value: string); _withoutUndoRemoveAttribute(name: string); indexOf(designItem: IDesignItem): number; insertAdjacentElement(designItem: IDesignItem, where: InsertPosition); insertChild(designItem: IDesignItem, index?: number); removeChild(designItem: IDesignItem); remove(); clearChildren(); removeDesignerAttributesAndStylesFromChildren(); editContent(); editContentFinish(); readonly hasContent: boolean; content: string; innerHTML?: string; readonly isEmptyTextNode: boolean; /** Could be a special node if another parser is used */ readonly parsedNode: any; readonly node: Node; readonly element: Element; serviceContainer: ServiceContainer; instanceServiceContainer: InstanceServiceContainer; getOrCreateDesignItem(node: Node); openGroup(title: string): ChangeGroup styles(): Iterable<[name: string, value: string]>; getStyle(name: string): string isStyleImportant(name: string): boolean hasStyle(name: string): boolean setStyle(name: string, value?: string | null, important?: boolean); setStyleAsync(name: string, value?: string | null, important?: boolean): Promise; removeStyle(name: string); updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean, forceSet?: boolean); updateStyleInSheetOrLocalAsync(name: string, value?: string | null, important?: boolean, forceSet?: boolean): Promise; getStyleFromSheetOrLocal(name: string, fallback?: string); getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string) getAllStyles(): IStyleRule[]; readonly hasForcedCss: boolean; cssForceHover: boolean; cssForceActive: boolean; cssForceVisited: boolean; cssForceFocus: boolean; cssForceFocusWithin: boolean; cssForceFocusVisible: boolean; attributes(): Iterable<[name: string, value: string]> getAttribute(name: string): string hasAttribute(name: string): boolean setAttribute(name: string, value?: string | null); removeAttribute(name: string); setProperty(name: string, value?: any); setPropertyAndAttribute(name: string, value?: string | null); removePropertyAndAttribute(name: string); hideAtDesignTime: boolean; hideAtRunTime: boolean; lockAtDesignTime: boolean; getPlacementService(style?: CSSStyleDeclaration): IPlacementService; getComputedStyleProperty(name: string, fallback: string): string; getComputedStyle(): CSSStyleDeclaration; querySelectorAll(selectors: string): NodeListOf; } ================================================ FILE: packages/web-component-designer/src/elements/item/NodeType.ts ================================================ export enum NodeType { Element = 1, Attribute = 2, TextNode = 3, Comment = 8, Document = 9, DocumentFragment = 11 } ================================================ FILE: packages/web-component-designer/src/elements/item/info.txt ================================================ Todo -> unfiy Properties & Attributes. DesignItem should only store Attributes, not Properties. Maybe setAttribute should set Attribute directly, setProperty should use PropertiesService?? or do we always use properties PropertiesService? Attributes List in Properties shows all set attributes and you could also add one, but they show no binding etc information cause they are only the real attributes how should we serialize bindings?? if they are binding objects, like in tagbinding? ================================================ FILE: packages/web-component-designer/src/elements/services/BaseServiceContainer.ts ================================================ import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IService } from './IService.js'; export class BaseServiceContainer { protected _services: Map = new Map(); public servicesChanged = new TypedEvent<{ serviceName: keyof NameMap }>(); getLastService(service: K): NameMap[K] { let list: [] = this._services.get(service); if (list && list.length) return list[list.length - 1]; return null; } getServices(service: K): NameMap[K][] { return this._services.get(service); } register(name: K, service: NameMap[K]) { if (!this._services.has(name)) this._services.set(name, []); this._services.get(name).push(service); this.servicesChanged.emit({ serviceName: name }); } registerLast(name: K, service: NameMap[K]) { if (!this._services.has(name)) this._services.set(name, []); this._services.get(name).unshift(service); this.servicesChanged.emit({ serviceName: name }); } registerMultiple(names: K[], service: NameMap[K]) { for (const name of names) { if (!this._services.has(name)) this._services.set(name, []); this._services.get(name).push(service); this.servicesChanged.emit({ serviceName: name }); } } forSomeServicesTillResult(service: K, callback: (service: NameMap[K]) => Y): Y { let services = this.getServices(service); if (services == null) { return null; } for (let index = services.length - 1; index >= 0; index--) { const currentService = services[index]; let result = callback(currentService); if (result != null) return result; } return null; } getLastServiceWhere(service: K, callback: (service: NameMap[K]) => Y): NameMap[K] { let services = this.getServices(service); if (services == null) { return null; } for (let index = services.length - 1; index >= 0; index--) { const currentService = services[index]; let result = callback(currentService); if (result) return currentService; } return null; } getLastServiceResult(service: K, callback: (service: NameMap[K]) => Y): Y { let services = this.getServices(service); if (services == null) { return null; } for (let index = services.length - 1; index >= 0; index--) { const currentService = services[index]; let result = callback(currentService); if (result) return result; } return null; } async getLastServiceWhereAsync(service: K, callback: (service: NameMap[K]) => Promise): Promise { let services = this.getServices(service); if (services == null) { return null; } for (let index = services.length - 1; index >= 0; index--) { const currentService = services[index]; let result = await callback(currentService); if (result) return currentService; } return null; } } ================================================ FILE: packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts ================================================ import { ServiceContainer } from './ServiceContainer.js'; import { PolymerPropertiesService } from './propertiesService/services/PolymerPropertiesService.js'; import { LitElementPropertiesService } from './propertiesService/services/LitElementPropertiesService.js'; import { NativeElementsPropertiesService } from './propertiesService/services/NativeElementsPropertiesService.js'; import { SVGElementsPropertiesService } from './propertiesService/services/SVGElementsPropertiesService.js'; import { DefaultInstanceService } from './instanceService/DefaultInstanceService.js'; import { DefaultPropertyEditorTypesService } from './propertiesService/DefaultPropertyEditorTypesService.js'; import { BaseCustomWebComponentPropertiesService } from './propertiesService/services/BaseCustomWebComponentPropertiesService.js'; import { DefaultPlacementService } from './placementService/DefaultPlacementService.js'; import { DefaultHtmlParserService } from './htmlParserService/DefaultHtmlParserService.js'; import { Lit2PropertiesService } from './propertiesService/services/Lit2PropertiesService.js'; import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js'; import { ElementDragTitleExtensionProvider } from '../widgets/designerView/extensions/ElementDragTitleExtensionProvider.js'; import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/transforms/TransformOriginExtensionProvider.js'; import { MarginExtensionProvider } from '../widgets/designerView/extensions/MarginExtensionProvider.js'; import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js'; import { HighlightElementExtensionProvider } from '../widgets/designerView/extensions/HighlightElementExtensionProvider.js'; import { NamedTools } from '../widgets/designerView/tools/NamedTools.js'; import { PointerTool } from '../widgets/designerView/tools/PointerTool.js'; import { DrawPathTool } from '../widgets/designerView/tools/DrawPathTool.js'; import { SelectionDefaultExtensionProvider } from '../widgets/designerView/extensions/SelectionDefaultExtensionProvider.js'; import { ResizeExtensionProvider } from '../widgets/designerView/extensions/ResizeExtensionProvider.js'; import { RotateExtensionProvider } from '../widgets/designerView/extensions/transforms/RotateExtensionProvider.js'; import { RotateGroupExtensionProvider } from '../widgets/designerView/extensions/transforms/RotateGroupExtensionProvider.js'; import { ZoomTool } from '../widgets/designerView/tools/ZoomTool.js'; import { PanTool } from '../widgets/designerView/tools/PanTool.js'; import { CopyPasteContextMenu } from '../widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js'; import { PasteFormatContextMenu } from '../widgets/designerView/extensions/contextMenu/PasteFormatContextMenu.js'; import { ToolWindowsContextMenu } from '../widgets/designerView/extensions/contextMenu/ToolWindowsContextMenu.js'; import { ZMoveContextMenu } from '../widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js'; import { MultipleItemsSelectedContextMenu } from '../widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js'; import { RectangleSelectorTool } from '../widgets/designerView/tools/RectangleSelectorTool.js'; import { MagicWandSelectorTool } from '../widgets/designerView/tools/MagicWandSelectorTool.js'; import { PickColorTool } from '../widgets/designerView/tools/PickColorTool.js'; import { TextTool } from '../widgets/designerView/tools/TextTool.js'; import { GrayOutExtensionProvider } from '../widgets/designerView/extensions/GrayOutExtensionProvider.js'; import { AltToEnterContainerExtensionProvider } from '../widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js'; import { InvisibleElementExtensionProvider } from '../widgets/designerView/extensions/InvisibleElementExtensionProvider.js'; import { ItemsBelowContextMenu } from '../widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js'; import { GridPlacementService } from './placementService/GridPlacementService.js'; import { ElementAtPointService } from './elementAtPointService/ElementAtPointService.js'; import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService.js'; import { SnaplinesProviderService } from './placementService/SnaplinesProviderService.js'; import { ExternalDragDropService } from './dragDropService/ExternalDragDropService.js'; import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js'; import { CopyPasteService } from './copyPasteService/CopyPasteService.js'; import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js'; import { ButtonSeperatorProvider } from '../widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js'; import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js'; import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js'; import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js'; import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js'; import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js'; import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/RectContextMenu.js'; import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js'; import { SeperatorContextMenu } from '../widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js'; import { ZoomToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js'; import { RotateLeftAndRight } from '../widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js'; import { SelectAllChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js'; import { PointerToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js'; import { SeperatorToolProvider } from '../widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js'; import { ZoomToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js'; import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js'; import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js'; import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js'; import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js'; import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js'; import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js'; import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/flex/FlexboxExtensionProvider.js'; import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js'; import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js'; import { UndoService } from './undoService/UndoService.js'; import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js'; import { SelectionService } from './selectionService/SelectionService.js'; import { StylesheetServiceDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js'; import { JumpToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js'; import { EditGridColumnRowSizesExtensionProvider } from '../widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js'; import { DisplayGridExtensionProvider } from '../widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js'; import { ApplyFirstMachingExtensionProvider } from '../widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js'; import { DesignItemDocumentPositionService } from './designItemDocumentPositionService/DesignItemDocumentPositionService.js'; import { TransformToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js'; import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js'; import { DragDropService } from './dragDropService/DragDropService.js'; import { EventsService } from './eventsService/EventsService.js'; import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js'; import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.js'; import { RoundPixelsDesignViewConfigButton } from '../widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js'; import { MathMLElementsPropertiesService } from './propertiesService/services/MathMLElementsPropertiesService.js'; import { UnifiedGeometryExtensionProvider } from '../widgets/designerView/extensions/svg/UnifiedGeometryExtensionProvider.js'; import { SvgPathSourceMapProvider } from './sourceMapService/SvgPathSourceMapProvider.js'; import { ConditionExtensionProvider } from '../widgets/designerView/extensions/logic/ConditionExtensionProvider.js'; import { GridToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js'; import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js'; import { BlockToolbarExtensionProvider } from '../widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js'; import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js'; import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js'; import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js'; import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js'; import { GridChildResizeExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js'; import { AlignItemsContextMenu } from '../widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js'; import { BasicWebcomponentPropertiesService } from './propertiesService/services/BasicWebcomponentPropertiesService.js'; import { PreviousElementSelectExtensionProvider } from '../widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js'; import { ForceCssContextMenu } from '../widgets/designerView/extensions/contextMenu/ForceCssContextMenu.js'; import { OptionsContextMenuButton } from '../widgets/designerView/extensions/buttons/OptionsContextMenuButton.js'; import { ChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildrenContextMenu.js'; import { MarginTool } from '../widgets/designerView/tools/MarginTool.js'; import { SimpleToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SimpleToolButtonProvider.js'; import { assetsPath } from '../../Constants.js'; import { PaddingTool } from '../widgets/designerView/tools/PaddingTool.js'; import { DesignItemService } from './designItemService/DesignItemService.js'; import { DeletionService } from './deletionService/DeletionService.js'; import { MiniatureViewService } from './miniatureViewService/MiniatureViewService.js'; import { DisplayMediaPngWriterService } from './pngCreatorService/DisplayMediaPngWriterService.js'; import { SearchService } from './searchService/SearchService.js'; import { BasicContextMenu } from '../widgets/designerView/extensions/contextMenu/BasicContextMenu.js'; import { ProjectiveTransformExtension } from '../widgets/designerView/extensions/transforms/ProjectiveTransformExtension.js'; import { ProjectiveTransformExtensionProvider } from '../widgets/designerView/extensions/transforms/ProjectiveTransformExtensionProvider.js'; import { DefaultEditorTypeService } from './propertiesService/DefaultEditorTypeService.js'; import { StyleElementRenderedDesignItemService } from './renderedDesignItemService/StyleElementRenderedDesignItemService.js'; export function createDefaultServiceContainer() { let serviceContainer = new ServiceContainer(); let defaultPlacementService = new DefaultPlacementService(); serviceContainer.register("containerService", defaultPlacementService); serviceContainer.register("containerService", new GridPlacementService(defaultPlacementService)); serviceContainer.register("containerService", new FlexBoxPlacementService(defaultPlacementService)); serviceContainer.register("propertyService", new BasicWebcomponentPropertiesService()); serviceContainer.register("propertyService", new PolymerPropertiesService()); serviceContainer.register("propertyService", new LitElementPropertiesService()); serviceContainer.register("propertyService", new NativeElementsPropertiesService()); serviceContainer.register("propertyService", new SVGElementsPropertiesService()); serviceContainer.register("propertyService", new MathMLElementsPropertiesService()); serviceContainer.register("propertyService", new Lit2PropertiesService()); serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService()); serviceContainer.register("propertyGroupsService", new PropertyGroupsService()); serviceContainer.register("instanceService", new DefaultInstanceService()); serviceContainer.register("propertyEditorTypesService", new DefaultPropertyEditorTypesService()); serviceContainer.register("editorTypeService", new DefaultEditorTypeService()); serviceContainer.register("htmlWriterService", new HtmlWriterService()); serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService()); serviceContainer.register("htmlParserService", new DefaultHtmlParserService()); serviceContainer.register("renderedDesignItemService", new StyleElementRenderedDesignItemService()); serviceContainer.register("elementAtPointService", new ElementAtPointService()); serviceContainer.register("externalDragDropService", new ExternalDragDropService()); serviceContainer.register("dragDropService", new DragDropService()); serviceContainer.register("copyPasteService", new CopyPasteService()); serviceContainer.register("modelCommandService", new DefaultModelCommandService()); serviceContainer.register("demoProviderService", new SimpleDemoProviderService()); serviceContainer.register("eventsService", new EventsService()); serviceContainer.register("designItemService", new DesignItemService()); serviceContainer.register("deletionService", new DeletionService()); serviceContainer.register("miniatureViewService", new MiniatureViewService()); serviceContainer.register("pngCreatorService", new DisplayMediaPngWriterService()); serviceContainer.register("searchService", new SearchService()); serviceContainer.register("undoService", (designerCanvas: IDesignerCanvas) => new UndoService(designerCanvas)); serviceContainer.register("selectionService", (designerCanvas: IDesignerCanvas) => new SelectionService(designerCanvas, false)); serviceContainer.register("designItemDocumentPositionService", (designerCanvas: IDesignerCanvas) => new DesignItemDocumentPositionService(designerCanvas)); serviceContainer.sourceMapProviders.push(new SvgPathSourceMapProvider()); serviceContainer.designerExtensions.set(ExtensionType.Permanent, [ new InvisibleElementExtensionProvider(), ]); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [ new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement), ]); serviceContainer.designerExtensions.set(ExtensionType.Selection, [ new ConditionExtensionProvider(new SelectionDefaultExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement), ]); serviceContainer.designerExtensions.set(ExtensionType.OnlyOneItemSelected, [ new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement), new ConditionExtensionProvider(new PreviousElementSelectExtensionProvider(), item => !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement), new ConditionExtensionProvider(new MarginExtensionProvider, (_, c) => c.activeTool instanceof MarginTool || c.activeTool instanceof PaddingTool, true), new ConditionExtensionProvider(new PaddingExtensionProvider, (_, c) => c.activeTool instanceof MarginTool || c.activeTool instanceof PaddingTool, true), new PositionExtensionProvider(), new UnifiedGeometryExtensionProvider(), new ApplyFirstMachingExtensionProvider(new GridChildResizeExtensionProvider(), new ResizeExtensionProvider(true)), new TransformOriginExtensionProvider(true), new RotateExtensionProvider(), ]); serviceContainer.designerExtensions.set(ExtensionType.MultipleItemsSelected, [ new RotateGroupExtensionProvider(), ]); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionRefreshed, [ new GridChildToolbarExtensionProvider(), new GridToolbarExtensionProvider(), new FlexToolbarExtensionProvider(), new BlockToolbarExtensionProvider(), ]); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionAndCanBeEntered, [ new DisplayGridExtensionProvider(), new EditGridColumnRowSizesExtensionProvider(), new FlexboxExtensionProvider(), ]); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [ new DisplayGridExtensionProvider('lightgray', '#8080802b'), new FlexboxExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [ new HighlightElementExtensionProvider(), //new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement), //new ConditionExtensionProvider(new PreviousElementSelectExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof item.window.SVGElement) || item.node instanceof item.window.SVGSVGElement), ]); serviceContainer.designerExtensions.set(ExtensionType.Placement, [ new PlacementExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [ new GrayOutExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOverAndCanBeEntered, [ new ApplyFirstMachingExtensionProvider( new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider(), ), new AltToEnterContainerExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOverAndCanBeEntered, [ new ApplyFirstMachingExtensionProvider( new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider(), ), ]); serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [ new EditTextExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ManualApplied, [ new ProjectiveTransformExtensionProvider() ]); serviceContainer.designerPointerExtensions.push( //new CursorLinePointerExtensionProvider() ); serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool()); serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool()); serviceContainer.designerTools.set(NamedTools.DrawPath, new DrawPathTool({ interpolatePoints: true })); serviceContainer.designerTools.set(NamedTools.DrawRect, new DrawRectTool()); serviceContainer.designerTools.set(NamedTools.DrawEllipsis, new DrawEllipsisTool()); serviceContainer.designerTools.set(NamedTools.DrawLine, new DrawLineTool()); serviceContainer.designerTools.set(NamedTools.Zoom, new ZoomTool()); serviceContainer.designerTools.set(NamedTools.Pan, new PanTool()); serviceContainer.designerTools.set(NamedTools.RectangleSelector, new RectangleSelectorTool()); serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool()); serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool()); serviceContainer.designerTools.set(NamedTools.Text, new TextTool()); serviceContainer.designerTools.set(NamedTools.DrawElementTool, DrawElementTool); serviceContainer.designerTools.set(NamedTools.Margin, new MarginTool()); serviceContainer.designerTools.set(NamedTools.Padding, new PaddingTool()); serviceContainer.designViewConfigButtons.push( new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new ToolbarExtensionsDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton(), new ButtonSeperatorProvider(30), new OptionsContextMenuButton() ); serviceContainer.designViewToolbarButtons.push( new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new SimpleToolButtonProvider("Margin", assetsPath + 'images/tools/Margin.svg'), new SeperatorToolProvider(22), new SimpleToolButtonProvider("Padding", assetsPath + 'images/tools/Padding.svg'), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(22), new TextToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider() ); serviceContainer.designerContextMenuExtensions = [ new ChildContextMenu('edit', new CopyPasteContextMenu(), new SeperatorContextMenu(), new PasteFormatContextMenu()), new SeperatorContextMenu(), new ToolWindowsContextMenu(), new SeperatorContextMenu(), new ChildContextMenu('modify', new RotateLeftAndRight(), new SeperatorContextMenu(), new ZMoveContextMenu(), new SeperatorContextMenu(), new AlignItemsContextMenu(), new SeperatorContextMenu(), new BasicContextMenu({ title: '3D transform', action: (e, designerCanvas, designItem) => { designerCanvas.extensionManager.removeExtensions([designItem], false, ExtensionType.PrimarySelection); designerCanvas.extensionManager.removeExtensions([designItem], false, ExtensionType.OnlyOneItemSelected); designerCanvas.extensionManager.applyExtensionInstance(designItem, new ProjectiveTransformExtension(designerCanvas.extensionManager, designerCanvas, designItem), ExtensionType.OnlyOneItemSelected); } })), new SeperatorContextMenu(), new ChildContextMenu('view', new JumpToElementContextMenu(), new ZoomToElementContextMenu()), new SeperatorContextMenu(), new ChildContextMenu('force', new ForceCssContextMenu()), new SeperatorContextMenu(), new MultipleItemsSelectedContextMenu(), new PathContextMenu(), new RectContextMenu(), new SeperatorContextMenu(), new SelectAllChildrenContextMenu(), new SeperatorContextMenu(), new ItemsBelowContextMenu(), new ChildrenContextMenu(), ]; return serviceContainer; } export default createDefaultServiceContainer; ================================================ FILE: packages/web-component-designer/src/elements/services/GlobalContext.ts ================================================ //Service container should not be something with changeing information, so global context is for tool and color (and maybe more) import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent"; import { ITool } from '../widgets/designerView/tools/ITool.js'; import { ServiceContainer } from './ServiceContainer.js'; import { IDesignItem } from "../item/IDesignItem.js"; export class GlobalContext { private _serviceContainer: ServiceContainer private _tool: ITool; private _strokeColor: string = 'black'; private _strokeThickness: string = '3'; private _fillBrush: string = 'none'; constructor(serviceContainer: ServiceContainer) { this._serviceContainer = serviceContainer; } public set tool(tool: ITool) { if (this._tool !== tool) { const oldTool = this._tool; if (oldTool) { oldTool.dispose(); } this._tool = tool; let toolName = null; for (let t of this._serviceContainer.designerTools) { if (t[1] == tool) toolName = t[0]; } this.onToolChanged.emit(new PropertyChangedArgs<{ name: string, tool: ITool }>({ name: toolName, tool: tool }, { name: null, tool: oldTool })); if (this._tool) this._tool.activated(this._serviceContainer); } } public get tool(): ITool { return this._tool; } readonly onToolChanged = new TypedEvent>(); finishedWithTool: (tool: ITool) => void = () => this.tool = null; public set strokeColor(strokeColor: string) { if (this._strokeColor !== strokeColor) { const oldStrokeColor = this._strokeColor; this._strokeColor = strokeColor; this.onStrokeColorChanged.emit(new PropertyChangedArgs(strokeColor, oldStrokeColor)); } } public get strokeColor(): string { return this._strokeColor; } readonly onStrokeColorChanged = new TypedEvent>(); public set strokeThickness(strokeThickness: string) { if (this._strokeThickness !== strokeThickness) { const oldStrokeThickness = this._strokeThickness; this._strokeThickness = strokeThickness; this.onStrokeThicknessChanged.emit(new PropertyChangedArgs(strokeThickness, oldStrokeThickness)); } } public get strokeThickness(): string { return this._strokeThickness; } readonly onStrokeThicknessChanged = new TypedEvent>(); public set fillBrush(fillBrush: string) { this._fillBrush = fillBrush; if (this._fillBrush !== fillBrush) { const oldFillBrush = this._fillBrush; this._fillBrush = fillBrush; this.onFillBrushChanged.emit(new PropertyChangedArgs(fillBrush, oldFillBrush)); } } public get fillBrush(): string { return this._fillBrush; } readonly onFillBrushChanged = new TypedEvent>(); readonly showConfigClicked = new TypedEvent<{configUi:Element, designItem: IDesignItem}>(); } ================================================ FILE: packages/web-component-designer/src/elements/services/IService.ts ================================================ export interface IService { } ================================================ FILE: packages/web-component-designer/src/elements/services/IServiceContainer.ts ================================================ export interface IServiceContainer { register(name: string, service: any); getLastService(service: string): any; getServices(service: string): any[]; } ================================================ FILE: packages/web-component-designer/src/elements/services/InstanceServiceContainer.ts ================================================ import { ISelectionService } from './selectionService/ISelectionService.js'; import { IUndoService } from './undoService/IUndoService.js'; import { BaseServiceContainer } from './BaseServiceContainer.js'; import { DesignContext } from '../widgets/designerView/DesignContext.js'; import { IDesignContext } from '../widgets/designerView/IDesignContext.js'; import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js'; import { IStylesheetService } from './stylesheetService/IStylesheetService.js'; import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js'; import { DocumentContainer } from '../documentContainer.js'; import { ICollaborationService } from './collaborationService/ICollaborationService.js'; import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IDesignItem } from '../item/IDesignItem.js'; interface InstanceServiceNameMap { "undoService": IUndoService; "selectionService": ISelectionService; "stylesheetService": IStylesheetService; "designItemDocumentPositionService": IDesignItemDocumentPositionService; } interface IContentChangedParsed { changeType: 'parsed'; } interface IContentChangedWithDesignItems { changeType: "added" | "removed" | "moved"; designItems: IDesignItem[]; } interface IContentChangedChangeWithDesignItems { changeType: "changed"; designItems: IDesignItem[]; type: "attribute" | "css" | "property"; name: string; oldValue?: any; newValue?: any; } export type IContentChanged = IContentChangedParsed | IContentChangedWithDesignItems | IContentChangedChangeWithDesignItems ; export class InstanceServiceContainer extends BaseServiceContainer { public designContext: IDesignContext = new DesignContext(); public readonly designerCanvas: IDesignerCanvas; public collaborationService?: ICollaborationService; public designer: any; //usable to assign designer from outside public documentContainer: DocumentContainer; //usable to assign designer from outside /** Event fired when the content of the designer changes, but raised from UndoService, so it should not be used to modify the elements again */ public readonly onContentChanged = new TypedEvent(); constructor(designerCanvas: IDesignerCanvas) { super(); this.designerCanvas = designerCanvas; } get rootDesignItem(): IDesignItem { return this.designerCanvas.rootDesignItem; } get undoService(): IUndoService { return this.getLastService('undoService'); } get selectionService(): ISelectionService { return this.getLastService('selectionService'); } get stylesheetService(): IStylesheetService { return this.getLastService('stylesheetService'); } get designItemDocumentPositionService(): IDesignItemDocumentPositionService { return this.getLastService('designItemDocumentPositionService'); } } ================================================ FILE: packages/web-component-designer/src/elements/services/ServiceContainer.ts ================================================ import { IPropertiesService } from './propertiesService/IPropertiesService.js'; import { IPlacementService } from './placementService/IPlacementService.js'; import { IElementsService } from './elementsService/IElementsService.js'; import { IInstanceService } from './instanceService/IInstanceService.js'; import { IPropertyEditorTypesService } from './propertiesService/IPropertyEditorTypesService.js'; import { BaseServiceContainer } from './BaseServiceContainer.js'; import { IHtmlWriterService } from './htmlWriterService/IHtmlWriterService.js'; import { ICodeView } from '../widgets/codeView/ICodeView.js'; import { IHtmlParserService } from './htmlParserService/IHtmlParserService.js'; import { IIntializationService } from './initializationService/IIntializationService.js'; import { IDemoView } from '../widgets/demoView/IDemoView.js'; import { DemoView } from '../widgets/demoView/demoView.js'; import { ITool } from '../widgets/designerView/tools/ITool.js'; import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js'; import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js'; import { NamedTools } from '../widgets/designerView/tools/NamedTools.js'; import { IContextMenuExtension } from '../widgets/designerView/extensions/contextMenu/IContextMenuExtension.js'; import { GlobalContext } from './GlobalContext.js'; import { IBindingService } from './bindingsService/IBindingService.js'; import { IElementAtPointService } from './elementAtPointService/IElementAtPointService.js'; import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js"; import { IExternalDragDropService } from './dragDropService/IExternalDragDropService.js'; import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js"; import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js"; import { IModelCommandService } from "./modelCommandService/IModelCommandService.js"; import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js"; import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js"; import { IBindableObjectsService } from "./bindableObjectsService/IBindableObjectsService.js"; import { IBindableObjectDragDropService } from "./bindableObjectsService/IBindableObjectDragDropService.js"; import { IDesignViewToolbarButtonProvider } from "../widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.js"; import { IElementInteractionService } from './elementInteractionService/IElementInteractionService.js'; import { IProperty } from "./propertiesService/IProperty.js"; import { IDesignItem } from "../item/IDesignItem.js"; import { IBinding } from '../item/IBinding.js'; import { BindingTarget } from '../item/BindingTarget.js'; import { IPropertyGroupsService } from './propertiesService/IPropertyGroupsService.js'; import { CodeViewSimple } from '../widgets/codeView/code-view-simple.js'; import { IUndoService } from './undoService/IUndoService.js'; import { ISelectionService } from './selectionService/ISelectionService.js'; import { IStylesheetService } from './stylesheetService/IStylesheetService.js'; import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js'; import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js'; import { IDragDropService } from './dragDropService/IDragDropService.js'; import { IDesignItemService } from './designItemService/IDesignItemService.js'; import { IEventsService } from './eventsService/IEventsService.js'; import { IPropertyGridDragDropService } from './dragDropService/IPropertyGridDragDropService.js'; import { IConfigUiService } from './configUiService/IConfigUiService.js'; import { IRefactorService } from './refactorService/IRefactorService.js'; import { InstanceServiceContainer } from './InstanceServiceContainer.js'; import { IDeletionService } from './deletionService/IDeletionService.js'; import { IReferencesChangedService } from './referencesChangedService/IReferencesChangedService.js'; import { IMiniatureViewService } from './miniatureViewService/IMiniatureViewService.js'; import { IPngCreatorService } from './pngCreatorService/IPngCreatorService.js'; import { ISearchService } from './searchService/ISearchService.js'; import { ICollaborationService } from './collaborationService/ICollaborationService.js'; import { IEditorTypeService } from './propertiesService/IEditorTypeService.js'; import { ISourceMapProvider } from './sourceMapService/ISourceMapProvider.js'; import { IRenderedDesignItemService } from './renderedDesignItemService/IRenderedDesignItemService.js'; interface ServiceNameMap { "propertyService": IPropertiesService; "attachedPropertyService": IPropertiesService; "containerService": IPlacementService; "snaplinesProviderService": ISnaplinesProviderService; "elementsService": IElementsService; "instanceService": IInstanceService; "propertyEditorTypesService": IPropertyEditorTypesService; "htmlWriterService": IHtmlWriterService; "htmlParserService": IHtmlParserService; "intializationService": IIntializationService; "bindingService": IBindingService; "bindableObjectsService": IBindableObjectsService; "bindableObjectDragDropService": IBindableObjectDragDropService; "elementAtPointService": IElementAtPointService; "externalDragDropService": IExternalDragDropService; "copyPasteService": ICopyPasteService; "modelCommandService": IModelCommandService "demoProviderService": IDemoProviderService; "elementInteractionService": IElementInteractionService; "propertyGroupsService": IPropertyGroupsService; "dragDropService": IDragDropService; "designItemService": IDesignItemService; "eventsService": IEventsService; "propertyGridDragDropService": IPropertyGridDragDropService; "configUiService": IConfigUiService; "refactorService": IRefactorService; "deletionService": IDeletionService; "referencesChangedService": IReferencesChangedService; "miniatureViewService": IMiniatureViewService; "pngCreatorService": IPngCreatorService; "searchService": ISearchService; "editorTypeService": IEditorTypeService; "renderedDesignItemService": IRenderedDesignItemService; //Factories for Instance Service Containers "undoService": (designerCanvas: IDesignerCanvas) => IUndoService; "selectionService": (designerCanvas: IDesignerCanvas) => ISelectionService; "stylesheetService": (designerCanvas: IDesignerCanvas) => IStylesheetService; "collaborationService": (designerCanvas: IDesignerCanvas) => ICollaborationService; "designItemDocumentPositionService": (designerCanvas: IDesignerCanvas) => IDesignItemDocumentPositionService; } const isTouchUi = navigator.maxTouchPoints > 0; export class ServiceContainer extends BaseServiceContainer { readonly config: { codeViewWidget: new (...args: any[]) => ICodeView & HTMLElement; demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement; openBindingsEditor?: (property: IProperty, designItems: IDesignItem[], binding: IBinding, bindingTarget: BindingTarget) => Promise } = { codeViewWidget: CodeViewSimple, demoViewWidget: DemoView }; public readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]> = new Map(); public readonly sourceMapProviders: ISourceMapProvider[] = []; removeDesignerExtensionOfType(container: (ExtensionType | string), lambda: new (...args: any[]) => IDesignerExtensionProvider): void { const extContainer = this.designerExtensions.get(container); for (let i = 0; i < extContainer.length; i++) { if (extContainer[i].constructor === lambda) { extContainer.splice(i, 1); } } } public readonly instanceServiceContainerCreatedCallbacks: ((instanceServiceContainer: InstanceServiceContainer) => void)[] = []; public readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[] = []; public readonly designViewToolbarButtons: IDesignViewToolbarButtonProvider[] = []; public readonly designerPointerExtensions: IDesignerPointerExtensionProvider[] = []; public designerContextMenuExtensions: IContextMenuExtension[]; public readonly overlayLayerViewAdditionalStyles: CSSStyleSheet[] = []; public readonly globalContext: GlobalContext = new GlobalContext(this); public readonly options = { zoomDesignerBackground: true, roundPixelsToDecimalPlaces: 0, resizerPixelSize: isTouchUi ? 8 : 3 }; public readonly designerTools: Map ITool)> = new Map(); get bindingService(): IBindingService { return this.getLastService('bindingService'); } get bindableObjectsServices(): IBindableObjectsService[] { return this.getServices('bindableObjectsService'); } get bindableObjectDragDropService(): IBindableObjectDragDropService { return this.getLastService('bindableObjectDragDropService'); } get propertyGridDragDropService(): IPropertyGridDragDropService { return this.getLastService('propertyGridDragDropService'); } get dragDropService(): IDragDropService { return this.getLastService('dragDropService'); } get elementInteractionServices(): IElementInteractionService[] { return this.getServices('elementInteractionService'); } get propertiesServices(): IPropertiesService[] { return this.getServices('propertyService'); } get attachedPropertyServices(): IPropertiesService[] { return this.getServices('attachedPropertyService'); } get propertyGroupService(): IPropertyGroupsService { return this.getLastService('propertyGroupsService'); } get containerServices(): IPlacementService[] { return this.getServices('containerService'); } get snaplinesProviderService(): ISnaplinesProviderService { return this.getLastService('snaplinesProviderService'); } get elementsServices(): IElementsService[] { return this.getServices('elementsService'); } get eventsService(): IEventsService[] { return this.getServices('eventsService'); } get instanceServices(): IInstanceService[] { return this.getServices('instanceService'); } get propertyEditorTypesServices(): IPropertyEditorTypesService[] { return this.getServices('propertyEditorTypesService'); } get htmlWriterService(): IHtmlWriterService { return this.getLastService('htmlWriterService'); } get htmlParserService(): IHtmlParserService { return this.getLastService('htmlParserService'); } get renderedDesignItemServices(): IRenderedDesignItemService[] { return this.getServices('renderedDesignItemService'); } get intializationService(): IIntializationService { return this.getLastService('intializationService'); } get elementAtPointService(): IElementAtPointService { return this.getLastService('elementAtPointService'); } get externalDragDropService(): IExternalDragDropService { return this.getLastService('externalDragDropService'); } get copyPasteService(): ICopyPasteService { return this.getLastService('copyPasteService'); } get modelCommandService(): IModelCommandService { return this.getLastService('modelCommandService'); } get demoProviderService(): IDemoProviderService { return this.getLastService('demoProviderService'); } get designItemService(): IDesignItemService { return this.getLastService('designItemService'); } get configUiServices(): IConfigUiService[] { return this.getServices('configUiService'); } get refactorServices(): IRefactorService[] { return this.getServices('refactorService'); } get deletionService(): IDeletionService { return this.getLastService('deletionService'); } get referencesChangedService(): IReferencesChangedService { return this.getLastService('referencesChangedService'); } get miniatureViewService(): IMiniatureViewService { return this.getLastService('miniatureViewService'); } get pngCreatorService(): IPngCreatorService { return this.getLastService('pngCreatorService'); } get searchService(): ISearchService { return this.getLastService('searchService'); } get editorTypesServices(): IEditorTypeService[] { return this.getServices('editorTypeService'); } } ================================================ FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectType.ts ================================================ export enum BindableObjectType { undefined = 'undefined', folder = 'folder', boolean = 'boolean', number = 'number', string = 'string', date = 'date', color = 'color', object = 'object', } ================================================ FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectsTarget.ts ================================================ export type BindableObjectsTarget = 'itemsView' | 'binding' | 'script' | 'property'; ================================================ FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObject.ts ================================================ import { BindableObjectType } from './BindableObjectType.js'; export interface IBindableObject { readonly bindabletype?: 'signal' | 'property' | 'context' readonly specialType?: string //e.g. signalProperty readonly type: BindableObjectType readonly name: string; readonly fullName: string; readonly children?: false | IBindableObject[]; readonly originalObject?: T; readonly description?: string; } ================================================ FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectDragDropService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { IProperty } from "../propertiesService/IProperty.js"; import { IBindableObject } from "./IBindableObject.js"; export interface IBindableObjectDragDropService { dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void; dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void; dragOver(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): 'none' | 'copy' | 'link' | 'move'; drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject, element: Element): void; dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move'; dropOnProperty?(event: DragEvent, property: IProperty, bindableObject: IBindableObject, designItems: IDesignItem[]): void; } ================================================ FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectsService.ts ================================================ import { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { BindableObjectsTarget } from './BindableObjectsTarget.js'; import { IBindableObject } from './IBindableObject.js'; export interface IBindableObjectsService { readonly name: string; hasObjectsForInstanceServiceContainer(instanceServiceContainer: InstanceServiceContainer, source: BindableObjectsTarget); getBindableObject(fullName: string, instanceServiceContainer?: InstanceServiceContainer): Promise>; getBindableObjects(parent?: IBindableObject, instanceServiceContainer?: InstanceServiceContainer): Promise[]>; } ================================================ FILE: packages/web-component-designer/src/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IBinding } from '../../item/IBinding.js'; import { IBindingService } from './IBindingService.js'; import { BindingMode } from '../../item/BindingMode.js'; import { BindingTarget } from "../../item/BindingTarget.js"; import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js'; export class BaseCustomWebcomponentBindingsService implements IBindingService { public static type = 'base-custom-webcomponent-binding'; getBindings(designItem: IDesignItem): IBinding[] { let bindings: IBinding[] = null; for (let a of designItem.attributes()) { const name = a[0]; const value = a[1]; if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) { if (!bindings) bindings = []; let bnd: IBinding = { rawName: name, rawValue: value, service: this }; if (a[0] === 'bcw:visible') { bnd.targetName = 'visibility'; bnd.target = BindingTarget.css; bnd.expression = value.substring(2, value.length - 2); } else if (a[0].startsWith('css:')) { bnd.targetName = name.substring(4); bnd.target = BindingTarget.css; bnd.expression = value.substring(2, value.length - 2); } else if (a[0].startsWith('class:')) { bnd.targetName = name.substring(4); bnd.target = BindingTarget.class; bnd.expression = value.substring(2, value.length - 2); } else if (a[0].startsWith('$')) { bnd.targetName = name.substring(1); bnd.target = BindingTarget.attribute; bnd.expression = value.substring(2, value.length - 2); } else if (a[0].startsWith('@')) { bnd.targetName = name.substring(1); bnd.target = BindingTarget.event; bnd.expression = value.substring(2, value.length - 2); } else if (a[0].startsWith('.')) { bnd.targetName = PropertiesHelper.dashToCamelCase(name.substring(1)); bnd.target = BindingTarget.explicitProperty; bnd.expression = value.substring(2, value.length - 2); } else { bnd.targetName = PropertiesHelper.dashToCamelCase(name); bnd.target = BindingTarget.property; bnd.expression = value.substring(2, value.length - 2); } bnd.type = BaseCustomWebcomponentBindingsService.type; bnd.targetName = bnd.targetName; bnd.bindableObjectNames = [value.substring(2, value.length - 2)]; bindings.push(bnd); } } return bindings; } setBinding(designItem: IDesignItem, binding: IBinding): boolean { if (binding.type !== BaseCustomWebcomponentBindingsService.type) return false; let nm = ''; switch (binding.target) { case BindingTarget.explicitProperty: nm += '.'; break; case BindingTarget.css: nm += 'css:'; break; case BindingTarget.class: nm += 'class'; break; case BindingTarget.attribute: nm += '$'; break; case BindingTarget.event: nm += '@'; break; } nm += binding.targetName; let value = (binding.mode == BindingMode.oneWay ? '[[' : '{{') + binding.expression + (binding.mode == BindingMode.oneWay ? ']]' : '}}') designItem.setAttribute(nm, value); return true; } clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean { return true; } } ================================================ FILE: packages/web-component-designer/src/elements/services/bindingsService/IBindingService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IBinding } from '../../item/IBinding.js'; import { BindingTarget } from '../../item/BindingTarget.js'; /** * Can be used to parse bindings wich are done via special HTML Attributes or special Elements * If your Bindings are to special, or HTML is not valid with them, maybe you need to parse the Bindings already in the * htmlParserService */ export interface IBindingService { getBindings(designItem: IDesignItem): IBinding[]; setBinding(designItem: IDesignItem, binding: IBinding): boolean; clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean; } ================================================ FILE: packages/web-component-designer/src/elements/services/bindingsService/SpecialTagsBindingService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IBinding } from '../../item/IBinding.js'; import { IBindingService } from './IBindingService.js'; import { BindingTarget } from "../../item/BindingTarget.js"; import { BindingMode } from "../../item/BindingMode.js"; /* Service wich read bindings from special HTML elements -> like tag-binding */ //TODO: refactor so we could use it export class SpecialTagsBindingService implements IBindingService { public static type = 'visu-tagbinding-binding' _bindingTagName: string = "visu-tagbinding"; _elementIdAttribute: string = "elemnt-id"; _propertyNameAttribute: string = "property"; _isStyleNameAttribute: string = "is-style"; constructor() { } getBindings(designItem: IDesignItem): IBinding[] { const bindings = []; const directBindings = designItem.element.querySelectorAll(':scope > ' + this._bindingTagName); for (let b of directBindings) { bindings.push(this._parseBindingElement(b)); } if (designItem.id) { const nameBindings = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.querySelectorAll(this._bindingTagName + "[" + this._elementIdAttribute + "='" + designItem.id + "]"); for (let b of nameBindings) { const bnd = this._parseBindingElement(b); (bnd).targetId = designItem.id bindings.push(bnd); } } return null; } private _parseBindingElement(b: Element): IBinding { let bnd: IBinding = { targetName: b.getAttribute(this._propertyNameAttribute), service: this } bnd.target = b.hasAttribute(this._isStyleNameAttribute) ? BindingTarget.css : BindingTarget.property; bnd.invert = b.hasAttribute('negative-logic'); bnd.rawValue = b.outerHTML; bnd.type = SpecialTagsBindingService.type; bnd.mode = b.hasAttribute('two-way') ? BindingMode.twoWay : BindingMode.oneWay; return bnd; } setBinding(designItem: IDesignItem, binding: IBinding): boolean { return true; } clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean { return true; } } ================================================ FILE: packages/web-component-designer/src/elements/services/bindingsService/VueBindingsService.ts ================================================ //read vue bindings: //v-bind:class //v-bind:style //v-if //v-else //v-show ================================================ FILE: packages/web-component-designer/src/elements/services/collaborationService/CollaborationNodeIndex.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { NodeType } from '../../item/NodeType.js'; type CollaborationNodeIndexCache = { orderedItems: IDesignItem[]; byItem: WeakMap; }; const collaborationNodeIndexCacheKey = Symbol('collaborationNodeIndexCache'); function buildCache(rootDesignItem: IDesignItem): CollaborationNodeIndexCache { const orderedItems: IDesignItem[] = []; const byItem = new WeakMap(); let index = 0; const visit = (designItem: IDesignItem) => { if (!designItem) return; if (!designItem.isRootItem && designItem.nodeType === NodeType.Element) { orderedItems.push(designItem); byItem.set(designItem, index++); } if (designItem.hasChildren) { for (const child of designItem.children()) visit(child); } }; visit(rootDesignItem); return { orderedItems, byItem }; } function getCache(rootDesignItem: IDesignItem, cache?: Record): CollaborationNodeIndexCache { if (cache?.[collaborationNodeIndexCacheKey]) return cache[collaborationNodeIndexCacheKey]; const nodeIndexCache = buildCache(rootDesignItem); if (cache) cache[collaborationNodeIndexCacheKey] = nodeIndexCache; return nodeIndexCache; } export function getCollaborationNodeIndex(designItem: IDesignItem, cache?: Record): number { if (!designItem || designItem.isRootItem) return null; const rootDesignItem = designItem.instanceServiceContainer.designerCanvas.rootDesignItem; return getCache(rootDesignItem, cache).byItem.get(designItem) ?? null; } export function getCollaborationNodeIndexes(designItems: IDesignItem[], cache?: Record): number[] { if (!designItems?.length) return []; return designItems.map(x => getCollaborationNodeIndex(x, cache)).filter(x => x != null); } export function getDesignItemByCollaborationNodeIndex(rootDesignItem: IDesignItem, nodeIndex: number, cache?: Record): IDesignItem { if (nodeIndex == null || nodeIndex < 0) return null; return getCache(rootDesignItem, cache).orderedItems[nodeIndex] ?? null; } ================================================ FILE: packages/web-component-designer/src/elements/services/collaborationService/ICollaborationService.ts ================================================ import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IStylesheet } from '../stylesheetService/IStylesheetService.js'; import { IUndoChangeEvent, UndoChangeKind, UndoChangeSource } from '../undoService/IUndoChangeEvent.js'; import { IService } from '../IService.js'; export type CollaborationConnectionState = 'disconnected' | 'connecting' | 'connected'; export interface ICollaborationPeerPresence { peerId: string; displayName?: string; color?: string; activeDesignItemId?: string; selectedDesignItemIds?: string[]; activeNodeIndex?: number; selectedNodeIndexes?: number[]; cursorPosition?: { x: number, y: number }; updatedAt: number; } export interface ICollaborationComment { id: string; targetDesignItemId?: string; targetNodeIndex?: number; text: string; authorPeerId: string; createdAt: number; updatedAt: number; resolved?: boolean; } export interface ICollaborationSession { sessionId: string; peerId: string; displayName?: string; } export interface ICollaborationStateChangedEvent { state: CollaborationConnectionState; session?: ICollaborationSession; } export interface ICollaborationSelectionEvent { source: UndoChangeSource; peerId: string; selectedNodeIndexes: number[]; primaryNodeIndex?: number; selectedDesignItemIds: string[]; primaryDesignItemId?: string; } export interface ICollaborationDocumentSnapshot { html: string; stylesheets: IStylesheet[]; updatedAt: number; } export interface ICollaborationRemoteChange { kind: UndoChangeKind; title?: string; } export interface ICollaborationPeersChangedEvent { source: UndoChangeSource; peer?: ICollaborationPeerPresence; peerId?: string; peers: readonly ICollaborationPeerPresence[]; } export interface ICollaborationCommentsChangedEvent { source: UndoChangeSource; comment?: ICollaborationComment; commentId?: string; comments: readonly ICollaborationComment[]; } export interface ICollaborationTransport { attach(service: ICollaborationService): void | Promise; detach(): void | Promise; connect(session: ICollaborationSession): void | Promise; disconnect(): void | Promise; sendChange(change: ICollaborationRemoteChange, snapshot: ICollaborationDocumentSnapshot): void | Promise; sendSelection(selection: ICollaborationSelectionEvent): void | Promise; sendPresence(peer: ICollaborationPeerPresence): void | Promise; sendComment(change: ICollaborationCommentsChangedEvent): void | Promise; } export interface ICollaborationService extends IService { readonly state: CollaborationConnectionState; readonly session: ICollaborationSession; readonly peers: readonly ICollaborationPeerPresence[]; readonly comments: readonly ICollaborationComment[]; readonly transport: ICollaborationTransport; readonly isApplyingRemoteChanges: boolean; attachTransport(transport: ICollaborationTransport): void; detachTransport(): void; connect(sessionId: string, peerId: string, displayName?: string): void; disconnect(): void; createSnapshot(): ICollaborationDocumentSnapshot; applyRemoteSnapshot(snapshot: ICollaborationDocumentSnapshot): Promise; applyRemoteChange(change: ICollaborationRemoteChange, snapshot?: ICollaborationDocumentSnapshot): Promise; updateRemoteSelection(peerId: string, selectedNodeIndexes: number[], primaryNodeIndex?: number): void; updatePeerPresence(peer: ICollaborationPeerPresence, source?: UndoChangeSource): void; removePeer(peerId: string, source?: UndoChangeSource): void; upsertComment(comment: ICollaborationComment, source?: UndoChangeSource): void; removeComment(commentId: string, source?: UndoChangeSource): void; readonly onStateChanged: TypedEvent; readonly onChange: TypedEvent; readonly onSelectionChanged: TypedEvent; readonly onPeersChanged: TypedEvent; readonly onCommentsChanged: TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/services/configUiService/IConfigUiService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; export interface IConfigUiService { hasConfigUi(designItem: IDesignItem): Promise getConfigUi(designItem: IDesignItem): Promise } ================================================ FILE: packages/web-component-designer/src/elements/services/copyPasteService/CopyPasteAsJsonService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { DomConverter } from "../../widgets/designerView/DomConverter.js"; import { ICopyPasteService } from "./ICopyPasteService.js"; import { ServiceContainer } from '../ServiceContainer.js'; import { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { IRect } from "../../../interfaces/IRect.js"; import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js"; import { DesignItem } from "../../item/DesignItem.js"; import { filterChildPlaceItems } from "../../helper/LayoutHelper.js"; interface ICopyPasteJsonData { html?: string; positions?: IRect[]; } interface IClipboardPasteData { html: string; positions: IRect[] | null; imageData: Blob | null; } export class CopyPasteAsJsonService implements ICopyPasteService { async copyItems(designItems: IDesignItem[]): Promise { const items = filterChildPlaceItems(designItems); const copyText = DomConverter.ConvertToString(items, false); const positions = items.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element)); const data: ICopyPasteJsonData = { html: copyText, positions: positions }; copyToClipboard([["text/html", copyText], ["text/plain", copyText], ["application/json", JSON.stringify(data)]]); } async getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]> { const pasteData = await this._readClipboardPasteData(); if (pasteData.imageData) { let di = await DesignItem.createDesignItemFromImageBlob(serviceContainer, instanceServiceContainer, pasteData.imageData); return [[di]]; } const parserService = serviceContainer.htmlParserService; return [await parserService.parse(pasteData.html, serviceContainer, instanceServiceContainer, true), pasteData.positions ?? undefined]; } private async _readClipboardPasteData(): Promise { let html = ''; let positions: IRect[] | null = null; let imageData: Blob | null = null; const items = await getFromClipboard(); if (items != null) { const clipboardItem = items[0]; const jsonData = await this._tryReadClipboardType(clipboardItem, 'application/json'); if (jsonData) { const parsedJson = this._parseJsonClipboardData(jsonData); html = parsedJson?.html ?? ''; positions = parsedJson?.positions ?? null; } if (!html) { html = await this._tryReadClipboardType(clipboardItem, 'text/html') ?? ''; } if (!html) { html = await this._tryReadClipboardType(clipboardItem, 'text/plain') ?? ''; } try { let imageFmt = clipboardItem.types.find(x => x.startsWith("image/")); if (imageFmt) { imageData = await clipboardItem.getType(imageFmt); } } catch { } } else { html = await getTextFromClipboard(); } return { html, positions, imageData }; } private _parseJsonClipboardData(data: string): ICopyPasteJsonData | null { try { return JSON.parse(data); } catch { return null; } } private async _tryReadClipboardType(item: ClipboardItem, type: string): Promise { try { return await (await item.getType(type))?.text(); } catch { return null; } } } ================================================ FILE: packages/web-component-designer/src/elements/services/copyPasteService/CopyPasteService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { DomConverter } from "../../widgets/designerView/DomConverter.js"; import { ICopyPasteService } from "./ICopyPasteService.js"; import { ServiceContainer } from '../ServiceContainer.js'; import { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { IRect } from "../../../interfaces/IRect.js"; import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js"; import { filterChildPlaceItems } from "../../helper/LayoutHelper.js"; export const positionsJsonMime = 'web text/positions'; export class CopyPasteService implements ICopyPasteService { async copyItems(designItems: IDesignItem[]): Promise { const items = filterChildPlaceItems(designItems); const copyText = DomConverter.ConvertToString(items, false); const positions = items.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element)); copyToClipboard([["text/html", copyText], [positionsJsonMime, JSON.stringify(positions)]]); } async getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]> { let html = ''; let positions: IRect[] | null = null; const items = await getFromClipboard(); if (items != null) { try { html = await (await items[0].getType('text/html'))?.text(); } catch { } if (!html) html = await (await items[0].getType('text/plain'))?.text(); try { let positionsJson = await (await items[0].getType(positionsJsonMime))?.text(); positions = JSON.parse(positionsJson) } catch { } } else { html = await getTextFromClipboard(); } const parserService = serviceContainer.htmlParserService; return [await parserService.parse(html, serviceContainer, instanceServiceContainer, true), positions ?? undefined]; } } ================================================ FILE: packages/web-component-designer/src/elements/services/copyPasteService/ICopyPasteService.ts ================================================ import { IRect } from "../../../interfaces/IRect.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; import { ServiceContainer } from "../ServiceContainer.js"; export interface ICopyPasteService { copyItems(designItems: IDesignItem[]): Promise getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]> } ================================================ FILE: packages/web-component-designer/src/elements/services/copyPasteService/PasteFormatSnapshot.ts ================================================ import { PropertiesHelper } from "../propertiesService/services/PropertiesHelper.js"; export const pasteFormatKinds = ['all', 'border', 'background', 'transform', 'text'] as const; export type PasteFormatKind = typeof pasteFormatKinds[number]; export interface IPasteFormatEntry { readonly name: string; readonly value: string; } export interface IPasteFormatSnapshot { readonly all: readonly IPasteFormatEntry[]; readonly border: readonly IPasteFormatEntry[]; readonly background: readonly IPasteFormatEntry[]; readonly transform: readonly IPasteFormatEntry[]; readonly text: readonly IPasteFormatEntry[]; } type StyleArrayLike = Pick & ArrayLike; type StyleEntries = Iterable<[name: string, value: string]>; const explicitTextProperties = new Set([ 'color', 'caret-color', 'line-height', 'letter-spacing', 'word-spacing', 'white-space', 'word-break', 'overflow-wrap', 'hyphens', 'tab-size', 'direction', 'writing-mode', 'unicode-bidi' ]); const explicitTransformProperties = new Set([ 'translate', 'rotate', 'scale' ]); function isBorderProperty(name: string): boolean { return name.startsWith('border') || name.startsWith('corner'); } function isBackgroundProperty(name: string): boolean { return name.startsWith('background'); } function isTransformProperty(name: string): boolean { return name === 'transform' || name.startsWith('transform-') || explicitTransformProperties.has(name); } function isTextProperty(name: string): boolean { return name.startsWith('font') || name.startsWith('text') || explicitTextProperties.has(name); } function collectEntries(style: StyleArrayLike, predicate: (name: string) => boolean): IPasteFormatEntry[] { const entries: IPasteFormatEntry[] = []; const seen = new Set(); for (let index = 0; index < style.length; index++) { const name = PropertiesHelper.camelToDashCase(style[index]); if (!name || seen.has(name) || !predicate(name)) { continue; } const value = style.getPropertyValue(name)?.trim(); if (!value) { continue; } seen.add(name); entries.push({ name, value }); } return entries; } function createPasteFormatSnapshotFromNormalizedEntries(entries: IPasteFormatEntry[]): IPasteFormatSnapshot { const border = entries.filter(x => isBorderProperty(x.name)); const background = entries.filter(x => isBackgroundProperty(x.name)); const transform = entries.filter(x => isTransformProperty(x.name)); const text = entries.filter(x => isTextProperty(x.name)); const all: IPasteFormatEntry[] = []; const seen = new Set(); for (const group of [border, background, transform, text]) { for (const entry of group) { if (seen.has(entry.name)) { continue; } seen.add(entry.name); all.push(entry); } } return { all, border, background, transform, text }; } export function createPasteFormatSnapshot(style: StyleArrayLike): IPasteFormatSnapshot { const entries = collectEntries(style, () => true); return createPasteFormatSnapshotFromNormalizedEntries(entries); } export function createPasteFormatSnapshotFromEntries(entries: StyleEntries): IPasteFormatSnapshot | null { const normalizedEntries: IPasteFormatEntry[] = []; const seen = new Set(); for (const [rawName, rawValue] of entries) { const name = rawName?.trim().toLowerCase(); const value = rawValue?.trim(); if (!name || !value || seen.has(name)) { continue; } seen.add(name); normalizedEntries.push({ name, value }); } if (!normalizedEntries.length) { return null; } return createPasteFormatSnapshotFromNormalizedEntries(normalizedEntries); } export function getPasteFormatEntries(snapshot: IPasteFormatSnapshot, kind: PasteFormatKind): readonly IPasteFormatEntry[] { return snapshot[kind]; } ================================================ FILE: packages/web-component-designer/src/elements/services/deletionService/DeletionService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { DeleteAction } from "../undoService/transactionItems/DeleteAction.js"; import { IDeletionService } from "./IDeletionService.js"; export class DeletionService implements IDeletionService { public removeItems(items: IDesignItem[]) { items[0].instanceServiceContainer.undoService.execute(new DeleteAction(items)); if (items[0].serviceContainer.referencesChangedService) items[0].serviceContainer.referencesChangedService.notifyReferencesChanged(items.map(item => ({ designItem: item, type: 'deleted' }))); } } ================================================ FILE: packages/web-component-designer/src/elements/services/deletionService/IDeletionService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; export interface IDeletionService { removeItems(items: IDesignItem[]); } ================================================ FILE: packages/web-component-designer/src/elements/services/demoProviderService/IDemoProviderService.ts ================================================ import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; import { ServiceContainer } from "../ServiceContainer.js"; export interface IDemoProviderService { provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string); } ================================================ FILE: packages/web-component-designer/src/elements/services/demoProviderService/IframeDemoProviderService.ts ================================================ import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; import { ServiceContainer } from "../ServiceContainer.js"; import { DomHelper } from '@node-projects/base-custom-webcomponent'; import { IDemoProviderService } from "./IDemoProviderService.js"; export class IframeDemoProviderService implements IDemoProviderService { provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string) { return new Promise(resolve => { const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none'; iframe.style.display = 'none'; DomHelper.removeAllChildnodes(container); container.appendChild(iframe); iframe.onload = () => { iframe.style.display = 'block'; resolve(); }; const doc = iframe.contentWindow.document; doc.open(); doc.write(''); doc.write(''); doc.write('' + code + ''); doc.close(); }); } } ================================================ FILE: packages/web-component-designer/src/elements/services/demoProviderService/SimpleDemoProviderService.ts ================================================ import { DomHelper, cssFromString } from "@node-projects/base-custom-webcomponent"; import { IDemoProviderService } from "./IDemoProviderService.js"; import { ServiceContainer } from "../ServiceContainer.js"; import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; export class SimpleDemoProviderService implements IDemoProviderService { async provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string) { const contentDiv = document.createElement('div'); let shadowRoot = contentDiv.attachShadow({ mode: 'open', serializable: true }); contentDiv.style.width = '100%'; contentDiv.style.height = '100%'; contentDiv.style.border = 'none'; contentDiv.style.display = 'none'; contentDiv.style.overflow = 'auto'; contentDiv.style.position = 'absolute'; container.style.position = 'relative'; DomHelper.removeAllChildnodes(container); container.appendChild(contentDiv); let styles: CSSStyleSheet[] = []; if (instanceServiceContainer.designerCanvas.additionalStyles) styles.push(...instanceServiceContainer.designerCanvas.additionalStyles); if (instanceServiceContainer.stylesheetService) { styles.push(...instanceServiceContainer.stylesheetService .getStylesheets() .map(x => cssFromString(x.content))); } shadowRoot.adoptedStyleSheets = styles; shadowRoot.innerHTML = ''; if ('setHTMLUnsafe' in shadowRoot) //@ts-ignore shadowRoot.setHTMLUnsafe(code); else //@ts-ignore shadowRoot.innerHTML = code; contentDiv.style.display = ''; } } ================================================ FILE: packages/web-component-designer/src/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { IStringPosition } from "../htmlWriterService/IStringPosition.js"; import { ISourcePart } from "../sourceMapService/ISourcePart.js"; import { IDesignItemDocumentPositionService } from "./IDesignItemDocumentPositionService.js"; export class DesignItemDocumentPositionService implements IDesignItemDocumentPositionService { private _designItemsAssignmentList?: WeakMap = new WeakMap(); private _sourceParts: ISourcePart[] = []; private _sourcePartsByDesignItem: WeakMap = new WeakMap(); private _sourcePartsByDesignItemAndKey: WeakMap> = new WeakMap(); constructor(designerCanvas: IDesignerCanvas) { } setPosition(designItem: IDesignItem, position: IStringPosition) { this._designItemsAssignmentList.set(designItem, position); } getPosition(designItem: IDesignItem): IStringPosition { return this._designItemsAssignmentList.get(designItem); } clearSourceParts(): void { this._sourceParts = []; this._sourcePartsByDesignItem = new WeakMap(); this._sourcePartsByDesignItemAndKey = new WeakMap(); } addSourcePart(sourcePart: ISourcePart): void { if (!sourcePart?.designItem || !sourcePart.textRange) return; this._sourceParts.push(sourcePart); let sourceParts = this._sourcePartsByDesignItem.get(sourcePart.designItem); if (!sourceParts) { sourceParts = []; this._sourcePartsByDesignItem.set(sourcePart.designItem, sourceParts); } sourceParts.push(sourcePart); let sourcePartsByKey = this._sourcePartsByDesignItemAndKey.get(sourcePart.designItem); if (!sourcePartsByKey) { sourcePartsByKey = new Map(); this._sourcePartsByDesignItemAndKey.set(sourcePart.designItem, sourcePartsByKey); } sourcePartsByKey.set(sourcePart.key, sourcePart); } addSourceParts(sourceParts: ISourcePart[]): void { for (const sourcePart of sourceParts ?? []) this.addSourcePart(sourcePart); } getSourcePartAt(position: number): ISourcePart { let bestPart: ISourcePart = null; for (const sourcePart of this._sourceParts) { const start = sourcePart.textRange.start; const end = start + sourcePart.textRange.length; if (start <= position && end >= position) { if (!bestPart || sourcePart.textRange.length <= bestPart.textRange.length) bestPart = sourcePart; } } return bestPart; } getSourceParts(designItem: IDesignItem): ISourcePart[] { return this._sourcePartsByDesignItem.get(designItem) ?? []; } getSourcePartPosition(designItem: IDesignItem, key: string): IStringPosition { return this._sourcePartsByDesignItemAndKey.get(designItem)?.get(key)?.textRange; } } ================================================ FILE: packages/web-component-designer/src/elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js" import { IStringPosition } from "../htmlWriterService/IStringPosition.js" import { ISourcePart } from "../sourceMapService/ISourcePart.js" export interface IDesignItemDocumentPositionService { setPosition(designItem: IDesignItem, position: IStringPosition) getPosition(designItem: IDesignItem): IStringPosition clearSourceParts(): void addSourcePart(sourcePart: ISourcePart): void addSourceParts(sourceParts: ISourcePart[]): void getSourcePartAt(position: number): ISourcePart getSourceParts(designItem: IDesignItem): ISourcePart[] getSourcePartPosition(designItem: IDesignItem, key: string): IStringPosition } ================================================ FILE: packages/web-component-designer/src/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.ts ================================================ import { DesignItem } from "../../item/DesignItem.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; import { ServiceContainer } from "../ServiceContainer.js"; import { DesignItemService } from "./DesignItemService.js"; export class BaseCustomWebcomponentDesignItemService extends DesignItemService { override createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem { const di = new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer); if (node instanceof (node.ownerDocument.defaultView ?? window).HTMLTemplateElement) { requestAnimationFrame(() => { let repeatCount = 1; const attr = node.getAttribute('sample-repeat-count'); if (attr) { repeatCount = parseInt(attr); } for (let n = 0; n < repeatCount; n++) { let par: Element = node; for (const n of node.content.childNodes) { par = this.instanciateNode(par, n); } } }); } return di; } instanciateNode(parent: Element, node: Node, append = false): Element { const nd = node.cloneNode(false); if (append) parent.appendChild(nd); else { parent.parentNode.insertBefore(nd, parent.nextSibling); //parent.insertAdjacentElement('afterend', nd); } DesignItem.GetDesignItem(node).setView(nd); for (const n of node.childNodes) { this.instanciateNode(nd, n, true); } return nd; } } ================================================ FILE: packages/web-component-designer/src/elements/services/designItemService/DesignItemService.ts ================================================ import { DesignItem, hideAtDesignTimeAttributeName, hideAtRunTimeAttributeName, lockAtDesignTimeAttributeName } from "../../item/DesignItem.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; import { ServiceContainer } from "../ServiceContainer.js"; import { IDesignItemService } from "./IDesignItemService.js"; export class DesignItemService implements IDesignItemService { createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem { return new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer); } handleSpecialAttributes(attributeName: string, designItem: IDesignItem) { if (attributeName == hideAtDesignTimeAttributeName) { if (designItem.element instanceof (designItem.node.ownerDocument.defaultView ?? window).HTMLElement || designItem.element instanceof (designItem.node.ownerDocument.defaultView ?? window).SVGElement) { if (!designItem.hasAttribute(hideAtDesignTimeAttributeName)) designItem.element.style.display = designItem.getStyle('display') ?? ""; else designItem.element.style.display = 'none'; } } else if (attributeName == hideAtRunTimeAttributeName) { if (designItem.element instanceof (designItem.node.ownerDocument.defaultView ?? window).HTMLElement || designItem.element instanceof (designItem.node.ownerDocument.defaultView ?? window).SVGElement) { if (!designItem.hasAttribute(hideAtRunTimeAttributeName)) designItem.element.style.opacity = designItem.getStyle('opacity') ?? ""; else designItem.element.style.opacity = '0.3'; } } else if (attributeName == lockAtDesignTimeAttributeName) { if (designItem.element instanceof (designItem.node.ownerDocument.defaultView ?? window).HTMLElement || designItem.element instanceof (designItem.node.ownerDocument.defaultView ?? window).SVGElement) { if (!designItem.hasAttribute(lockAtDesignTimeAttributeName)) requestAnimationFrame(() => ((designItem.element).style.pointerEvents = 'auto')); else designItem.element.style.pointerEvents = 'none'; } } } } ================================================ FILE: packages/web-component-designer/src/elements/services/designItemService/IDesignItemService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; import { ServiceContainer } from "../ServiceContainer.js"; export interface IDesignItemService { createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem; finishedDesignItem?(designItem: IDesignItem); handleSpecialAttributes(attributeName: string, designItem: IDesignItem): void; } ================================================ FILE: packages/web-component-designer/src/elements/services/designerAddons/IDesignerAddonJson.ts ================================================ export interface IDesignerAddonJson { services: Record } ================================================ FILE: packages/web-component-designer/src/elements/services/dragDropService/DragDropService.ts ================================================ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { DesignItem } from '../../item/DesignItem.js'; import { IDragDropService } from "./IDragDropService.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { IPlacementService } from "../placementService/IPlacementService.js"; import { IElementDefinition } from "../elementsService/IElementDefinition.js"; import { ExtensionType } from "../../widgets/designerView/extensions/ExtensionType.js"; import { dragDropFormatNameElementDefinition } from "../../../Constants.js"; export class DragDropService implements IDragDropService { private _dragOverExtensionItem: IDesignItem; private _oldX: number; private _oldY: number; private _currentDragDropFormatNameElementDefinition: string; constructor() { window.addEventListener("dragstart", (e) => { const dt = e.dataTransfer; if (!dt) return; const origSetData = dt.setData.bind(dt); dt.setData = (type, value) => { if (type == dragDropFormatNameElementDefinition) this._currentDragDropFormatNameElementDefinition = value; return origSetData(type, value); }; }, true); // <-- use capture phase! window.addEventListener("dragend", (e) => { this._currentDragDropFormatNameElementDefinition = null; }, true); // <-- use capture phase! } public dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent) { } public dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent) { if (this._dragOverExtensionItem) { designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered); this._dragOverExtensionItem = null; } } public async dragOver(designerCanvas: IDesignerCanvas, event: DragEvent) { if (designerCanvas.readOnly) { event.dataTransfer.dropEffect = 'none'; return; } let di: IDesignItem = null; let transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition); if (!transferData) { transferData = this._currentDragDropFormatNameElementDefinition; } if (transferData) { const elementDefinition = JSON.parse(transferData); if (elementDefinition) { di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer)); } } let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event, di ? [di] : null); if (!newContainer) newContainer = designerCanvas.rootDesignItem; if (this._dragOverExtensionItem != newContainer) { designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered); designerCanvas.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOverAndCanBeEntered, event); this._dragOverExtensionItem = newContainer; } else { if (event.x != this._oldX && event.y != this._oldY) { this._oldX = event.x; this._oldY = event.y; designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOverAndCanBeEntered, event); } } } public async drop(designerCanvas: IDesignerCanvas, event: DragEvent) { if (this._dragOverExtensionItem) { designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered); this._dragOverExtensionItem = null; } const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition); const elementDefinition = JSON.parse(transferData); const di = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer)); let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event, [di]); if (!newContainer) newContainer = designerCanvas.rootDesignItem; const grp = di.openGroup("Insert of <" + di.name + ">"); const containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, newContainer.getComputedStyle(), di)) containerService.enterContainer(newContainer, [di], 'drop'); const containerPos = designerCanvas.getNormalizedElementCoordinates(newContainer.element); const evCoord = designerCanvas.getNormalizedEventCoordinates(event); const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y }; let offset = { x: 0, y: 0 }; if (elementDefinition.mouseOffset) offset = elementDefinition.mouseOffset; containerService.place(event, designerCanvas, newContainer, offset, { x: 0, y: 0 }, pos, [di]); containerService.finishPlace(event, designerCanvas, newContainer, offset, { x: 0, y: 0 }, pos, [di]); requestAnimationFrame(() => { designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di], event); grp.commit(); }); } public getPossibleContainerForDragDrop(designerCanvas: IDesignerCanvas, event: DragEvent, designItems?: IDesignItem[]): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService] { let newContainerElementDesignItem: IDesignItem = null; let newContainerService: IPlacementService = null; const elementsFromPoint = designerCanvas.elementsFromPoint(event.clientX, event.clientY); for (let e of elementsFromPoint) { if (e == designerCanvas.rootDesignItem.element) { newContainerElementDesignItem = designerCanvas.rootDesignItem; const containerStyle = getComputedStyle(newContainerElementDesignItem.element); newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle)); break; } else if (false) { //check we don't try to move a item over one of its children.. } else { newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); const containerStyle = getComputedStyle(newContainerElementDesignItem.element); newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle)); if (newContainerService) { //TODO: Maybe the check for SVG Element should be in "canEnterByDrop"? if (designItems && newContainerService.canEnter(newContainerElementDesignItem, designItems) && !(newContainerElementDesignItem.element instanceof newContainerElementDesignItem.window.SVGElement)) { break; } else if (!designItems && newContainerService.isEnterableContainer(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof newContainerElementDesignItem.window.SVGElement)) { break; } else { newContainerElementDesignItem = null; newContainerService = null; continue; } } } } return [newContainerElementDesignItem, newContainerService]; } } ================================================ FILE: packages/web-component-designer/src/elements/services/dragDropService/ExternalDragDropService.ts ================================================ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { IExternalDragDropService } from "./IExternalDragDropService.js"; import { DesignItem } from '../../item/DesignItem.js'; import { InsertAction } from "../undoService/transactionItems/InsertAction.js"; export class ExternalDragDropService implements IExternalDragDropService { public dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): 'none' | 'copy' | 'link' | 'move' { if (designerCanvas.readOnly) return 'none'; if (event.dataTransfer.items[0].type.startsWith('image/')) return 'copy'; return 'none'; } async drop(designerCanvas: IDesignerCanvas, event: DragEvent) { if (event.dataTransfer.files[0].type.startsWith('image/')) { let di = await DesignItem.createDesignItemFromImageBlob(designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer, event.dataTransfer.files[0]); let grp = di.openGroup("Insert of <img>"); di.setStyle('position', 'absolute') const coord = designerCanvas.getNormalizedEventCoordinates(event); di.setStyle('top', coord.y + 'px') di.setStyle('left', coord.x + 'px') designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); grp.commit(); requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di])); } } } ================================================ FILE: packages/web-component-designer/src/elements/services/dragDropService/IDragDropService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { IPlacementService } from "../placementService/IPlacementService.js"; export interface IDragDropService { dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent); dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent); dragOver(designerCanvas: IDesignerCanvas, event: DragEvent); drop(designerCanvas: IDesignerCanvas, event: DragEvent); getPossibleContainerForDragDrop(designerCanvas: IDesignerCanvas, event: DragEvent, designItems?: IDesignItem[]): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService] } ================================================ FILE: packages/web-component-designer/src/elements/services/dragDropService/IExternalDragDropService.ts ================================================ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; export interface IExternalDragDropService { dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): 'none' | 'copy' | 'link' | 'move'; drop(designerCanvas: IDesignerCanvas, event: DragEvent); } ================================================ FILE: packages/web-component-designer/src/elements/services/dragDropService/IPropertyGridDragDropService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IProperty } from "../propertiesService/IProperty.js"; export interface IPropertyGridDragDropService { dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move'; dropOnProperty?(event: DragEvent, property: IProperty, dropObject: any, designItems: IDesignItem[]): void; } ================================================ FILE: packages/web-component-designer/src/elements/services/elementAtPointService/ElementAtPointService.ts ================================================ import { IElementAtPointService } from './IElementAtPointService.js'; import { IPoint } from '../../../interfaces/IPoint.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; export class ElementAtPointService implements IElementAtPointService { getElementAtPoint(designerCanvas: IDesignerCanvas, point: IPoint) { return designerCanvas.getElementAtPoint(point); } } ================================================ FILE: packages/web-component-designer/src/elements/services/elementAtPointService/IElementAtPointService.ts ================================================ import { IService } from '../IService.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { IPoint } from '../../../interfaces/IPoint.js'; export interface IElementAtPointService extends IService { getElementAtPoint(designerView: IDesignerCanvas, point: IPoint); } ================================================ FILE: packages/web-component-designer/src/elements/services/elementInteractionService/IElementInteractionService.ts ================================================ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { IService } from '../IService.js'; export interface IElementInteractionService extends IService { stopEventHandling(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) : boolean; } ================================================ FILE: packages/web-component-designer/src/elements/services/elementsService/IElementDefinition.ts ================================================ import { IPoint } from '../../../interfaces/IPoint.js'; import { IBinding } from '../../item/IBinding.js'; export interface IElementDefinition { tag: string; /** * A path or a Object URL to an image */ icon?: string; /** * A HTML String wich is used in the Palette */ displayHtml?: string; name?: string; description?: string; import?: string; className?: string; type?: string; defaultContent?: any; defaultAttributes?: { [key: string]: string; }; defaultStyles?: { [key: string]: string; }; defaultWidth?: string; defaultHeight?: string; ghostElement?: Element; /** * Name of the Tool activated when selecting the element. * If none, the DrawElementTool is used */ tool?: string; defaultBinding?: IBinding; /** * Offset of mouse pointer when dragged */ mouseOffset?: IPoint } ================================================ FILE: packages/web-component-designer/src/elements/services/elementsService/IElementsJson.ts ================================================ import { IElementDefinition } from './IElementDefinition.js'; export interface IElementsJson { "imports"?: string[], "elements": (string | IElementDefinition)[] } ================================================ FILE: packages/web-component-designer/src/elements/services/elementsService/IElementsService.ts ================================================ import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IService } from '../IService.js'; import { IElementDefinition } from './IElementDefinition.js'; export interface IElementsService extends IService { readonly name: string /** Optional event emitted when the available element definitions changed and palette views should reload this service. */ readonly onElementsChanged?: TypedEvent getElements(): Promise } ================================================ FILE: packages/web-component-designer/src/elements/services/elementsService/JsonFileElementsService.ts ================================================ import { IElementsService } from './IElementsService.js'; import { IElementsJson } from './IElementsJson.js'; import { IElementDefinition } from './IElementDefinition.js'; import { LazyLoader } from '@node-projects/base-custom-webcomponent'; // Reads a Json File and provides the Elements listed there export class JsonFileElementsService implements IElementsService { private _name: string; get name() { return this._name; } private _elementList: IElementDefinition[]; private _resolveStored: ((value: IElementDefinition[]) => void)[]; private _rejectStored: ((errorCode: number) => void)[]; public getElements(): Promise { if (this._elementList) return Promise.resolve(this._elementList); if (!this._resolveStored) { this._resolveStored = []; this._rejectStored = []; } return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); }); } constructor(name: string, file: string|URL) { this._name = name; LazyLoader.LoadText(file.toString()).then(data => { let parsed = JSON.parse(data) as IElementsJson; this._elementList = []; parsed.elements.forEach(element => { if (this.isIElementDefintion(element)) this._elementList.push(element) else this._elementList.push({ tag: element }) }); if (this._resolveStored) { this._resolveStored.forEach(x => x(this._elementList)); this._resolveStored = null; this._rejectStored = null; } }).catch(err => { if (this._rejectStored) { this._rejectStored.forEach(x => x(err)); this._resolveStored = null; this._rejectStored = null; } }); } private isIElementDefintion(object: string | IElementDefinition): object is IElementDefinition { return object != null && (object).tag != null; } } ================================================ FILE: packages/web-component-designer/src/elements/services/elementsService/PreDefinedElementsService.ts ================================================ import { IElementsService } from './IElementsService.js'; import { IElementsJson } from './IElementsJson.js'; import { IElementDefinition } from './IElementDefinition.js'; export class PreDefinedElementsService implements IElementsService { private _name: string; get name() { return this._name; } private _elementList: IElementDefinition[]; public getElements(): Promise { return Promise.resolve(this._elementList); } constructor(name: string, data: IElementsJson) { this._name = name; this._elementList = []; data.elements.forEach(element => { if (this.isIElementDefintion(element)) this._elementList.push(element) else this._elementList.push({ tag: element }) }); } private isIElementDefintion(object: string | IElementDefinition): object is IElementDefinition { return object != null && (object).tag != null; } } ================================================ FILE: packages/web-component-designer/src/elements/services/elementsService/WebcomponentManifestElementsService.ts ================================================ import { removeLeading, removeTrailing } from "../../helper/Helper.js"; import { IElementDefinition } from "./IElementDefinition.js"; import { IElementsService } from "./IElementsService.js"; export class WebcomponentManifestElementsService implements IElementsService { private _name: string; get name() { return this._name; } private _importPrefix: string; private _elementList: IElementDefinition[]; private _resolveStored: ((value: IElementDefinition[]) => void)[]; private _rejectStored: ((errorCode: number) => void)[]; constructor(name: string, importPrefix: string, manifest: any) { this._name = name; this._importPrefix = importPrefix this._parseManifest(manifest); } private _parseManifest(manifest: any) { this._elementList = []; for (let m of manifest.modules) { for (let e of m.exports) { if (e.kind == 'custom-element-definition') { let elDef: IElementDefinition = { tag: e.name, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(m.path, '/'), defaultWidth: "200px", defaultHeight: "200px", className: e.declaration.name } this._elementList.push(elDef); } } for (let d of m.declarations) { if (d.tagName) { let elDef: IElementDefinition = { tag: d.tagName, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(m.path, '/'), defaultWidth: "200px", defaultHeight: "200px", className: d.name } this._elementList.push(elDef); } } if (this._resolveStored) { this._resolveStored.forEach(x => x(this._elementList)); this._resolveStored = null; this._rejectStored = null; } } } async getElements(): Promise { if (this._elementList) return Promise.resolve(this._elementList); if (!this._resolveStored) { this._resolveStored = []; this._rejectStored = []; } return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); }); } } ================================================ FILE: packages/web-component-designer/src/elements/services/eventsService/EventsService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IEvent } from "./IEvent.js"; import { IEventsService } from "./IEventsService.js"; export class EventsService implements IEventsService { constructor() { } public static _windowEvents = [ { name: "afterprint", propertyName: "onafterprint", eventObjectName: "Event" }, { name: "beforeprint", propertyName: "onbeforeprint", eventObjectName: "Event" }, { name: "beforeunload", propertyName: "onbeforeunload", eventObjectName: "Event" }, { name: "error", propertyName: "onerror", eventObjectName: "Event" }, { name: "load", propertyName: "onload", eventObjectName: "Event" }, { name: "hashchange", propertyName: "onhashchange", eventObjectName: "Event" }, { name: "message", propertyName: "onmessage", eventObjectName: "Event" }, { name: "offline", propertyName: "onoffline", eventObjectName: "Event" }, { name: "online", propertyName: "ononline", eventObjectName: "Event" }, { name: "pageshow", propertyName: "onpageshow", eventObjectName: "Event" }, { name: "popstate", propertyName: "onpopstate", eventObjectName: "Event" }, { name: "resize", propertyName: "onresize", eventObjectName: "Event" }, { name: "storage", propertyName: "onstorage", eventObjectName: "Event" }, { name: "unload", propertyName: "onunload", eventObjectName: "Event" } ] public static _allElements: IEvent[] = [ { name: "contextmenu", propertyName: "oncontextmenu", eventObjectName: "PointerEvent" } ] public static _focusableEvents = [ { name: "blur", propertyName: "onblur", eventObjectName: "FocusEvent" }, { name: "focus", propertyName: "onfocus", eventObjectName: "FocusEvent" }, { name: "keydown", propertyName: "onkeydown", eventObjectName: "KeyboardEvent" }, { name: "keyup", propertyName: "onkeyup", eventObjectName: "KeyboardEvent" } ] public static _simpleForm = [ { name: "input", propertyName: "oninput", eventObjectName: "InputEvent" }, { name: "change", propertyName: "onchange", eventObjectName: "Event" } ] public static _form = [ { name: "beforeinput", propertyName: "onbeforeinput", eventObjectName: "InputEvent" }, { name: "invalid", propertyName: "oninvalid", eventObjectName: "Event" }, { name: "reset", propertyName: "onreset", eventObjectName: "Event" }, { name: "select", propertyName: "onselect", eventObjectName: "Event" }, { name: "submit", propertyName: "onsubmit", eventObjectName: "SubmitEvent" } ] public static _simpleMouseEvents: IEvent[] = [ { name: "click", propertyName: "onclick", eventObjectName: "PointerEvent" }, { name: "dblclick", propertyName: "ondblclick", eventObjectName: "MouseEvent" }, { name: "wheel", propertyName: "onwheel", eventObjectName: "WheelEvent" }, { name: "scroll", propertyName: "onscroll", eventObjectName: "Event" }, ] public static _mouseEvents = [ { name: "mousedown", propertyName: "onmousedown", eventObjectName: "MouseEvent" }, { name: "mouseup", propertyName: "onmouseup", eventObjectName: "MouseEvent" }, { name: "mousemove", propertyName: "onmousemove", eventObjectName: "MouseEvent" }, { name: "mouseover", propertyName: "onmouseover", eventObjectName: "MouseEvent" }, { name: "mouseout", propertyName: "onmouseout", eventObjectName: "MouseEvent" } ] public static _pointerEvents: IEvent[] = [ { name: "pointerdown", propertyName: "onpointerdown", eventObjectName: "PointerEvent" }, { name: "pointerup", propertyName: "onpointerup", eventObjectName: "PointerEvent" }, { name: "pointerenter", propertyName: "onpointerenter", eventObjectName: "PointerEvent" }, { name: "pointerleave", propertyName: "onpointerleave", eventObjectName: "PointerEvent" }, { name: "pointermove", propertyName: "onpointermove", eventObjectName: "PointerEvent" }, { name: "pointerover", propertyName: "onpointerover", eventObjectName: "PointerEvent" }, { name: "pointerout", propertyName: "onpointerout", eventObjectName: "PointerEvent" }, { name: "pointercancel", propertyName: "onpointercancel", eventObjectName: "PointerEvent" } ] public static _touchEvents: IEvent[] = [ { name: "touchstart", propertyName: "ontouchstart", eventObjectName: "TouchEvent" }, { name: "touchend", propertyName: "ontouchend", eventObjectName: "TouchEvent" }, { name: "touchmove", propertyName: "ontouchmove", eventObjectName: "TouchEvent" }, { name: "touchcancel", propertyName: "ontouchcancel", eventObjectName: "TouchEvent" } ] public static _dragEvents = [ { name: "drag", propertyName: "ondrag", eventObjectName: "DragEvent" }, { name: "dragend", propertyName: "ondragend", eventObjectName: "DragEvent" }, { name: "dragenter", propertyName: "ondragenter", eventObjectName: "DragEvent" }, { name: "dragleave", propertyName: "ondragleave", eventObjectName: "DragEvent" }, { name: "dragover", propertyName: "ondragover", eventObjectName: "DragEvent" }, { name: "dragstart", propertyName: "ondragstart", eventObjectName: "DragEvent" }, { name: "drop", propertyName: "ondrop", eventObjectName: "DragEvent" } ] public static _clipboard = [ { name: "copy", propertyName: "oncopy", eventObjectName: "ClipboardEvent" }, { name: "cut", propertyName: "oncut", eventObjectName: "ClipboardEvent" }, { name: "paste", propertyName: "onpaste", eventObjectName: "ClipboardEvent" } ] public static _details = [ { name: "toggle", propertyName: "ontoggle", eventObjectName: "Event" } ] public static _allEvents = [...EventsService._windowEvents, ...EventsService._form, ...EventsService._simpleMouseEvents, ...EventsService._mouseEvents, ...EventsService._pointerEvents, ...EventsService._touchEvents, ...EventsService._allElements, ...EventsService._focusableEvents, ...EventsService._dragEvents, ...EventsService._clipboard, ...EventsService._dragEvents]; isHandledElementFromEventsService(designItem: IDesignItem): boolean { return true; } public getPossibleEvents(designItem: IDesignItem): IEvent[] { if (designItem.element instanceof designItem.window.HTMLInputElement || designItem.element instanceof designItem.window.HTMLTextAreaElement || designItem.element instanceof designItem.window.HTMLSelectElement) { let events: IEvent[] = [...EventsService._simpleForm, ...EventsService._simpleMouseEvents, ...EventsService._form, ...EventsService._pointerEvents, ...EventsService._allElements, ...EventsService._focusableEvents]; return events; } let events: IEvent[] = [...EventsService._simpleMouseEvents, ...EventsService._pointerEvents, ...EventsService._allElements, ...EventsService._focusableEvents]; return events; } public getEvent(designItem: IDesignItem, name: string): IEvent { let evt = EventsService._allEvents.find(x => x.name == name); return evt ?? { name, propertyName: 'on' + name, eventObjectName: 'Event' }; } } ================================================ FILE: packages/web-component-designer/src/elements/services/eventsService/IEvent.ts ================================================ export interface IEvent { name: string; propertyName?: string; eventObjectName?: string; description?: string; } ================================================ FILE: packages/web-component-designer/src/elements/services/eventsService/IEventsService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IEvent } from "./IEvent.js"; export interface IEventsService { isHandledElementFromEventsService(designItem: IDesignItem): boolean; getPossibleEvents(designItem: IDesignItem): IEvent[]; getEvent(designItem: IDesignItem, name: string): IEvent; } ================================================ FILE: packages/web-component-designer/src/elements/services/eventsService/WebcomponentManifestEventsService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { EventsService } from "./EventsService.js"; import { IEvent } from "./IEvent.js"; export class WebcomponentManifestEventsService extends EventsService { override isHandledElementFromEventsService(designItem: IDesignItem): boolean { return this.__eventsList?.[designItem.name] != null; } override getPossibleEvents(designItem: IDesignItem): IEvent[] { return [...this.__eventsList[designItem.name], ...EventsService._simpleMouseEvents, ...EventsService._pointerEvents, ...EventsService._allElements, ...EventsService._focusableEvents]; } override getEvent(designItem: IDesignItem, name: string): IEvent { let evt = this.getPossibleEvents(designItem).find(x => x.name == name); return evt ?? { name, propertyName: 'on' + name, eventObjectName: 'Event' }; } private __eventsList: Record; constructor(name: string, manifest: any) { super(); this._parseManifest(manifest); } private _parseManifest(manifest) { this.__eventsList = {}; let declarations = []; for (let m of manifest.modules) { if (m.declarations) declarations.push(...m.declarations); } for (let m of manifest.modules) { for (let e of m.exports) { if (e.kind == 'custom-element-definition') { let declaration = declarations.find(x => x.name == e.declaration.name); if (declaration) { if (declaration.events) { let events: IEvent[] = []; for (let e of declaration.events) { events.push({ name: e.name }) } if (events.length) this.__eventsList[e.name] = events; } } else { console.warn('declaration for ' + e.declaration.name + ' not found', manifest); } } } } } } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlParserService/DefaultHtmlParserService.ts ================================================ import { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { ServiceContainer } from '../ServiceContainer.js'; import { IHtmlParserService } from './IHtmlParserService.js'; import { DesignItem } from '../../item/DesignItem.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { isFirefox } from '../../helper/Browser.js'; import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js'; export class DefaultHtmlParserService implements IHtmlParserService { async parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { let doc: Document; //@ts-ignore if (Document.parseHTMLUnsafe && !isFirefox) { //@ts-ignore doc = Document.parseHTMLUnsafe(html); } else { //@ts-ignore doc = new DOMParser().parseFromString(html, 'text/html', { includeShadowRoots: true }); } const headNodes = this.createDesignItems(doc.head.childNodes, serviceContainer, instanceServiceContainer); const bodyNodes = this.createDesignItems(doc.body.childNodes, serviceContainer, instanceServiceContainer); const designItems = [...headNodes, ...bodyNodes]; if (!parseSnippet && instanceServiceContainer.designItemDocumentPositionService && designItems.length) { serviceContainer.htmlWriterService.write(new IndentedTextWriter(), designItems, true, true); } return designItems; } public createDesignItems(elements: NodeListOf | Node[] | HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer) { let res: IDesignItem[] = []; for (let el of elements) { res.push(this._createDesignItemsRecursive(el, serviceContainer, instanceServiceContainer)); } return res; } private _createDesignItemsRecursive(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer) { return DesignItem.createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer); } } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlParserService/IHtmlParserService.ts ================================================ import { IService } from '../IService.js'; import type { ServiceContainer } from '../ServiceContainer.js'; import type { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { IDesignItem } from '../../item/IDesignItem.js'; export interface IHtmlParserService extends IService { parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean, positionOffset?: Number): Promise } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlWriterService/AbstractHtmlWriterService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IHtmlWriterService } from './IHtmlWriterService.js'; import { IHtmlWriterOptions } from './IHtmlWriterOptions.js'; import { DomConverter } from '../../widgets/designerView/DomConverter.js'; import { CssCombiner } from '../../helper/CssCombiner.js'; import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js'; import { ITextWriter } from '../../helper/ITextWriter.js'; import { IStringPosition } from './IStringPosition.js'; import { appendCssImportant } from '../../helper/CssImportant.js'; export abstract class AbstractHtmlWriterService implements IHtmlWriterService { public options: IHtmlWriterOptions; constructor(options?: IHtmlWriterOptions) { this.options = options ?? {}; this.options.beautifyOutput ??= true; this.options.compressCssToShorthandProperties ??= true; this.options.writeDesignerProperties ??= true; this.options.parseJsonInAttributes ??= true; this.options.jsonWriteMode ??= 'min'; } abstract write(indentedTextWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean); writeAttributes(indentedTextWriter: ITextWriter, designItem: IDesignItem, updatePositions: boolean = false) { if (designItem.hasAttributes) { for (const a of designItem.attributes()) { const attributeStart = indentedTextWriter.position; indentedTextWriter.write(' '); if (typeof a[1] === 'string') { if (a[1] === "") indentedTextWriter.write(a[0]); else { if (this.options.parseJsonInAttributes && ( (a[1].startsWith('{') && !a[1].startsWith('{{') && a[1].endsWith('}')) || (a[1].startsWith('[') && !a[1].startsWith('[[') && a[1].endsWith(']'))) ) { try { let j = JSON.parse(a[1]); let txt; if (this.options.jsonWriteMode == 'beauty') txt = JSON.stringify(j, null, 2); else txt = JSON.stringify(j); const writtenValue = DomConverter.normalizeAttributeValue(txt, true); this._writeAttributeWithValue(indentedTextWriter, designItem, a[0], writtenValue, '\'', updatePositions); continue; } catch { } } const content = DomConverter.normalizeAttributeValue(a[1]); if (content.indexOf('"')) { const contentSingle = DomConverter.normalizeAttributeValue(a[1], true); if (contentSingle.length < content.length) this._writeAttributeWithValue(indentedTextWriter, designItem, a[0], contentSingle, '\'', updatePositions); else this._writeAttributeWithValue(indentedTextWriter, designItem, a[0], content, '"', updatePositions); } else this._writeAttributeWithValue(indentedTextWriter, designItem, a[0], content, '"', updatePositions); } } else if (!a[1]) indentedTextWriter.write(a[0]); else { //TODO: writing of bindings, really ??? } if (updatePositions) this._addAttributeSourcePart(designItem, a[0], { start: attributeStart + 1, length: indentedTextWriter.position - attributeStart - 1 }); } } } private _writeAttributeWithValue(indentedTextWriter: ITextWriter, designItem: IDesignItem, attributeName: string, writtenValue: string, quote: '"' | '\'', updatePositions: boolean) { indentedTextWriter.write(attributeName + '=' + quote); const valueStart = indentedTextWriter.position; indentedTextWriter.write(writtenValue); const valueRange = { start: valueStart, length: indentedTextWriter.position - valueStart }; indentedTextWriter.write(quote); if (!updatePositions) return; const positionService = designItem.instanceServiceContainer.designItemDocumentPositionService; positionService.addSourcePart({ designItem, kind: 'attribute-value', key: `attribute:${attributeName}/value`, name: attributeName, textRange: valueRange }); const context = { designItem, sourceKind: 'attribute' as const, name: attributeName, value: writtenValue, valueTextRange: valueRange }; for (const provider of designItem.serviceContainer.sourceMapProviders) { if (provider.canMap(context)) positionService.addSourceParts(provider.map(context)); } } private _addAttributeSourcePart(designItem: IDesignItem, attributeName: string, textRange: IStringPosition) { designItem.instanceServiceContainer.designItemDocumentPositionService.addSourcePart({ designItem, kind: 'attribute', key: `attribute:${attributeName}`, name: attributeName, textRange }); } writeStyles(indentedTextWriter: ITextWriter, designItem: IDesignItem) { if (designItem.hasStyles) { indentedTextWriter.write(' style="'); const styleEntries = [...designItem.styles()]; const hasImportantStyle = styleEntries.some(x => designItem.isStyleImportant(x[0])); let styles: Iterable<[name: string, value: string]> = styleEntries; if (this.options.compressCssToShorthandProperties && !hasImportantStyle) styles = CssCombiner.combine(new Map(styleEntries)); for (const s of styles) { if (s[0]) { const value = DomConverter.normalizeAttributeValue(appendCssImportant(s[1], designItem.isStyleImportant(s[0]))); if (s[0].startsWith('--')) indentedTextWriter.write(s[0] + ':' + value + ';'); else indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + value + ';'); } } indentedTextWriter.write('"'); } } } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlWriterService/FormatingHtmlWriterService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IHtmlWriterService } from './IHtmlWriterService.js'; import { IHtmlWriterOptions } from './IHtmlWriterOptions.js'; import { DomConverter } from '../../widgets/designerView/DomConverter.js'; import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js'; import { CssCombiner } from '../../helper/CssCombiner.js'; import { NodeType } from '../../item/NodeType.js'; import { IStringPosition } from './IStringPosition.js'; import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js'; import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js'; import { appendCssImportant } from '../../helper/CssImportant.js'; enum ElementContainerType { inline, block, complex } interface IWriteContext { options: IHtmlWriterOptions; indentedTextWriter: IndentedTextWriter; lastElementDisplayType: ElementDisplayType | null; containerDisplayType: ElementContainerType; designItemsAssignmentList?: Map; } // const defaultDisplayNoneContainerDisplayType: ElementContainerType = ElementContainerType.complex; export class FormatingHtmlWriterService implements IHtmlWriterService { public options: IHtmlWriterOptions; constructor(options?: IHtmlWriterOptions) { this.options = options ?? {}; this.options.beautifyOutput ??= true; this.options.compressCssToShorthandProperties ??= true; this.options.writeDesignerProperties ??= true; this.options.parseJsonInAttributes ??= true; this.options.jsonWriteMode ??= 'min'; } private writeAttributes(writeContext: IWriteContext, designItem: IDesignItem) { if (designItem.hasAttributes) { for (const a of designItem.attributes()) { writeContext.indentedTextWriter.write(' '); if (typeof a[1] === 'string') { if (a[1] === "") writeContext.indentedTextWriter.write(a[0]); else writeContext.indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"'); } else if (!a[1]) writeContext.indentedTextWriter.write(a[0]); else { } } } } private writeStyles(writeContext: IWriteContext, designItem: IDesignItem) { if (designItem.hasStyles) { writeContext.indentedTextWriter.write(' style="'); const styleEntries = [...designItem.styles()]; const hasImportantStyle = styleEntries.some(x => designItem.isStyleImportant(x[0])); let styles: Iterable<[name: string, value: string]> = styleEntries; if (writeContext.options.compressCssToShorthandProperties && !hasImportantStyle) styles = CssCombiner.combine(new Map(styleEntries)); for (const s of styles) { if (s[0]) { writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(appendCssImportant(s[1], designItem.isStyleImportant(s[0]))) + ';'); } } writeContext.indentedTextWriter.write('"'); } } private _writeTextNode(writeContext: IWriteContext, designItem: IDesignItem) { writeContext.lastElementDisplayType = ElementDisplayType.inline; let content = DomConverter.normalizeContentValue(designItem.content); if (writeContext.containerDisplayType === ElementContainerType.inline) content = this._normalizeInlineTextContent(content); else content = content.trim(); if (content) { writeContext.indentedTextWriter.write(content); } } private _normalizeInlineTextContent(content: string) { if (!content?.trim()) return ''; const hasLeadingWhitespace = /^\s/.test(content); const hasTrailingWhitespace = /\s$/.test(content); const normalized = content.replaceAll(/[\t\r\n ]+/g, ' ').trim(); return `${hasLeadingWhitespace ? ' ' : ''}${normalized}${hasTrailingWhitespace ? ' ' : ''}`; } private _writeCommentNode(writeContext: IWriteContext, designItem: IDesignItem) { writeContext.indentedTextWriter.write(''); } private _writeElementNode(writeContext: IWriteContext, designItem: IDesignItem) { // const cs = getComputedStyle(designItem.element); //cs.whiteSpace === 'pre' //isInPre //is in inline? const currentElementDisplayType = getElementDisplaytype(designItem.element); writeContext.lastElementDisplayType = currentElementDisplayType; writeContext.indentedTextWriter.write('<' + designItem.name); this.writeAttributes(writeContext, designItem); this.writeStyles(writeContext, designItem); writeContext.indentedTextWriter.write('>'); let contentSingleTextNode=false; if (designItem.hasChildren) { const children = designItem.children(); contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode; let previousContainerDisplayType = writeContext.containerDisplayType; writeContext.containerDisplayType = this.getContainerType(designItem.element); if (contentSingleTextNode) { this._writeInternal(writeContext, designItem.firstChild); } else { if (writeContext.containerDisplayType !== ElementContainerType.inline) writeContext.indentedTextWriter.levelRaise(); this._writeDesignItemList(currentElementDisplayType, writeContext, children) if (writeContext.containerDisplayType !== ElementContainerType.inline) writeContext.indentedTextWriter.levelShrink(); } writeContext.containerDisplayType = previousContainerDisplayType; } else if (designItem.hasContent) { writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content)); } if (!DomConverter.IsSelfClosingElement(designItem.name)) { if (currentElementDisplayType === ElementDisplayType.block && designItem.hasChildren && !contentSingleTextNode) { this._writeNewlineAndIntend(writeContext); } //write newline & intend ??? writeContext.indentedTextWriter.write(''); if (currentElementDisplayType !== ElementDisplayType.none) { writeContext.lastElementDisplayType = currentElementDisplayType; } } } private _writeDesignItemList(currentElementDisplayType: ElementDisplayType, writeContext: IWriteContext, children: Iterable) { for (const c of children) { if (writeContext.lastElementDisplayType == null) { //first entry, do nothing } else if (writeContext.containerDisplayType === ElementContainerType.inline) { // Inline containers are whitespace-sensitive. Do not add beautification whitespace. } else if (writeContext.containerDisplayType === ElementContainerType.complex) this._writeNewlineAndIntend(writeContext); else if (writeContext.lastElementDisplayType !== ElementDisplayType.inline /*|| currentElementDisplayType !== ElementDisplayType.inline*/) this._writeNewlineAndIntend(writeContext); this._writeInternal(writeContext, c); } } private _writeNewlineAndIntend(writeContext: IWriteContext) { writeContext.indentedTextWriter.writeNewline(); writeContext.indentedTextWriter.writeIndent(); } private _writeInternal(writeContext: IWriteContext, designItem: IDesignItem) { const start = writeContext.indentedTextWriter.position; if (designItem.nodeType === NodeType.TextNode) this._writeTextNode(writeContext, designItem); else if (designItem.nodeType === NodeType.Comment) this._writeCommentNode(writeContext, designItem); else if (designItem.nodeType === NodeType.Element) this._writeElementNode(writeContext, designItem); if (writeContext.designItemsAssignmentList) { writeContext.designItemsAssignmentList.set(designItem, { start: start, length: writeContext.indentedTextWriter.position - start - 1 }); } } getContainerType(element: HTMLElement): ElementContainerType { const display = (element.ownerDocument.defaultView ?? window).getComputedStyle(element).display; if (display === 'inline') return ElementContainerType.inline; if (display === 'block' || display === "inline-block" || display == '') return ElementContainerType.block; return ElementContainerType.complex; } write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean) { const context: IWriteContext = { indentedTextWriter, options: this.options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block }; this._writeDesignItemList(ElementDisplayType.inline, context, designItems); } } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlWriterService/HtmlWriterService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { DomConverter } from '../../widgets/designerView/DomConverter.js'; import { ITextWriter } from '../../helper/ITextWriter.js'; import { NodeType } from '../../item/NodeType.js'; import { isEmptyTextNode, isInline, isInlineAfter } from '../../helper/ElementHelper.js'; import { AbstractHtmlWriterService } from './AbstractHtmlWriterService.js'; import { IHtmlWriterOptions } from './IHtmlWriterOptions.js'; export class HtmlWriterService extends AbstractHtmlWriterService { constructor(options?: IHtmlWriterOptions) { super(options); } private _conditionalyWriteIndent(indentedTextWriter: ITextWriter, designItem: IDesignItem, preserveInlineWhitespace: boolean) { if (preserveInlineWhitespace) return; if ((designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element)) || (designItem.element.previousElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.previousElementSibling)) || (designItem.element.previousElementSibling == null && !this._isInlineElement(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) || (designItem.element instanceof designItem.window.SVGElement) ) indentedTextWriter.writeIndent(); } private _conditionalyWriteIndentBefore(indentedTextWriter: ITextWriter, designItem: IDesignItem, preserveInlineWhitespace: boolean) { if (preserveInlineWhitespace) return; if ((designItem.element.previousElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.previousElementSibling)) || (designItem.element.previousElementSibling == null && !this._isInlineElement(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) || (designItem.element instanceof designItem.window.SVGElement) ) indentedTextWriter.writeIndent(); } private _conditionalyWriteNewline(indentedTextWriter: ITextWriter, designItem: IDesignItem, preserveInlineWhitespace: boolean) { if (preserveInlineWhitespace) return; if ((designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element)) || (designItem.element.nextElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.nextElementSibling)) || (designItem.element instanceof designItem.window.SVGElement) ) indentedTextWriter.writeNewline(); } write(indentedTextWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions: boolean = false) { if (updatePositions) designItems[0]?.instanceServiceContainer.designItemDocumentPositionService?.clearSourceParts(); for (const d of designItems) { this.internalWrite(indentedTextWriter, d, updatePositions, false); } } //TODO: special case for style/script nodes, keep whitespace private internalWrite(indentedTextWriter: ITextWriter, designItem: IDesignItem, updatePositions: boolean, preserveInlineWhitespace: boolean) { let start = indentedTextWriter.position; let end = indentedTextWriter.position; const currentPreserveInlineWhitespace = preserveInlineWhitespace || this._isInlineContainer(designItem); if (designItem.nodeType == NodeType.TextNode) { if (isEmptyTextNode(designItem.element) && ((designItem.element.previousSibling instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element.previousSibling)) || (designItem.element.nextSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.nextSibling)))) { } else this.writeTextNode(indentedTextWriter, designItem, true, true, currentPreserveInlineWhitespace); end = indentedTextWriter.position; } else if (designItem.nodeType == NodeType.Comment) { this._conditionalyWriteIndent(indentedTextWriter, designItem, currentPreserveInlineWhitespace); start = indentedTextWriter.position; indentedTextWriter.write(''); end = indentedTextWriter.position; this._conditionalyWriteNewline(indentedTextWriter, designItem, currentPreserveInlineWhitespace); } else { this._conditionalyWriteIndentBefore(indentedTextWriter, designItem, currentPreserveInlineWhitespace); start = indentedTextWriter.position; indentedTextWriter.write('<' + designItem.name); this.writeAttributes(indentedTextWriter, designItem, updatePositions); this.writeStyles(indentedTextWriter, designItem); indentedTextWriter.write('>'); let contentSingleTextNode = false; if (designItem.hasChildren) { const children = designItem.children(); contentSingleTextNode = designItem.childCount === 1 && designItem.firstChild.nodeType === NodeType.TextNode; if (contentSingleTextNode) { const notrim = designItem.name == 'script' || designItem.name == 'style' || designItem.name == 'pre'; this.writeTextNode(indentedTextWriter, designItem, false, !notrim, currentPreserveInlineWhitespace); } else { if (!currentPreserveInlineWhitespace && (designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof designItem.window.SVGElement))) { indentedTextWriter.writeNewline(); indentedTextWriter.levelRaise(); } for (const c of children) { this.internalWrite(indentedTextWriter, c, updatePositions, currentPreserveInlineWhitespace); let childSingleTextNode = c.childCount === 1 && c.firstChild.nodeType === NodeType.TextNode; if (childSingleTextNode) if (!indentedTextWriter.isLastCharNewline()) this._conditionalyWriteNewline(indentedTextWriter, c, currentPreserveInlineWhitespace); } if (!currentPreserveInlineWhitespace && (designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof designItem.window.SVGElement))) { indentedTextWriter.levelShrink(); if (!indentedTextWriter.isLastCharNewline()) indentedTextWriter.writeNewline(); indentedTextWriter.writeIndent(); } } } else if (designItem.hasContent) { indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content)); //this._conditionalyWriteNewline(indentedTextWriter, designItem); } end = indentedTextWriter.position; if (!DomConverter.IsSelfClosingElement(designItem.name)) indentedTextWriter.write(''); end = indentedTextWriter.position; //if (!contentSingleTextNode) if (!currentPreserveInlineWhitespace && !indentedTextWriter.isLastCharNewline() && (!designItem.parent || !isInlineAfter(designItem.parent.element))) this._conditionalyWriteNewline(indentedTextWriter, designItem, currentPreserveInlineWhitespace); } if (updatePositions && designItem.instanceServiceContainer.designItemDocumentPositionService) { designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: start, length: end - start }); } } private writeTextNode(indentedTextWriter: ITextWriter, designItem: IDesignItem, indentAndNewline: boolean, trim = true, preserveInlineWhitespace = false) { let start = indentedTextWriter.position; let end = indentedTextWriter.position; let content = DomConverter.normalizeContentValue(designItem.content); if (preserveInlineWhitespace || this._hasInlineParent(designItem)) content = this._normalizeInlineTextContent(content); else if (trim) content = content.trim(); if (content) { if (indentAndNewline) this._conditionalyWriteIndent(indentedTextWriter, designItem, preserveInlineWhitespace); indentedTextWriter.write(content); if (indentAndNewline) this._conditionalyWriteNewline(indentedTextWriter, designItem, preserveInlineWhitespace); } end = indentedTextWriter.position; for (const d of designItem.children()) designItem.instanceServiceContainer.designItemDocumentPositionService.setPosition(d, { start: start, length: end - start }); } private _hasInlineParent(designItem: IDesignItem) { return designItem.parent?.element instanceof designItem.window.HTMLElement && isInline(designItem.parent.element); } private _normalizeInlineTextContent(content: string) { if (!content?.trim()) return ''; const hasLeadingWhitespace = /^\s/.test(content); const hasTrailingWhitespace = /\s$/.test(content); const normalized = content.replaceAll(/[\t\r\n ]+/g, ' ').trim(); return `${hasLeadingWhitespace ? ' ' : ''}${normalized}${hasTrailingWhitespace ? ' ' : ''}`; } private _isInlineContainer(designItem: IDesignItem) { return designItem.nodeType === NodeType.Element && designItem.element instanceof designItem.window.HTMLElement && isInline(designItem.element); } private _isInlineElement(element: Element | null) { return element instanceof HTMLElement && isInline(element); } } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterOptions.ts ================================================ export interface IHtmlWriterOptions { beautifyOutput?: boolean; compressCssToShorthandProperties?: boolean; writeDesignerProperties?: boolean; parseJsonInAttributes?: boolean; jsonWriteMode?: 'min' | 'beauty'; } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { ITextWriter } from '../../helper/ITextWriter.js'; import { IHtmlWriterOptions } from './IHtmlWriterOptions.js'; export interface IHtmlWriterService { options: IHtmlWriterOptions; /** * Enables serializing the root design item when the designer has no child items. * Default HTML writers should leave this unset because root containers are usually * editor scaffolding, not document content. Text-based document writers can set it * to true when document-level metadata stored on the root item must still be written. */ supportsRootItemWrite?: boolean; write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean); } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlWriterService/IStringPosition.ts ================================================ export interface IStringPosition { start: number; length: number; } ================================================ FILE: packages/web-component-designer/src/elements/services/htmlWriterService/SimpleHtmlWriterService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IHtmlWriterService } from './IHtmlWriterService.js'; import { DomConverter } from '../../widgets/designerView/DomConverter.js'; import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js'; import { CssCombiner } from '../../helper/CssCombiner.js'; import { NodeType } from '../../item/NodeType.js'; import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js'; import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js'; import { IHtmlWriterOptions } from './IHtmlWriterOptions.js'; import { appendCssImportant } from '../../helper/CssImportant.js'; export enum ElementContainerType { block, complex } export interface IWriteContext { options: IHtmlWriterOptions; indentedTextWriter: IndentedTextWriter; lastElementDisplayType: ElementDisplayType | null; containerDisplayType: ElementContainerType; } export class SimpleHtmlWriterService implements IHtmlWriterService { public options: IHtmlWriterOptions; constructor(options?: IHtmlWriterOptions) { this.options = options ?? {}; this.options.beautifyOutput ??= true; this.options.compressCssToShorthandProperties ??= true; this.options.writeDesignerProperties ??= true; this.options.parseJsonInAttributes ??= true; this.options.jsonWriteMode ??= 'min'; } protected writeAttributes(writeContext: IWriteContext, designItem: IDesignItem) { if (designItem.hasAttributes) { for (const a of designItem.attributes()) { writeContext.indentedTextWriter.write(' '); if (typeof a[1] === 'string') { if (a[1] === "") writeContext.indentedTextWriter.write(a[0]); else writeContext.indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"'); } else if (!a[1]) writeContext.indentedTextWriter.write(a[0]); else { } } } } protected writeStyles(writeContext: IWriteContext, designItem: IDesignItem) { if (designItem.hasStyles) { writeContext.indentedTextWriter.write(' style="'); const styleEntries = [...designItem.styles()]; const hasImportantStyle = styleEntries.some(x => designItem.isStyleImportant(x[0])); let styles: Iterable<[name: string, value: string]> = styleEntries; if (writeContext.options.compressCssToShorthandProperties && !hasImportantStyle) styles = CssCombiner.combine(new Map(styleEntries)); for (const s of styles) { if (s[0]) { writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(appendCssImportant(s[1], designItem.isStyleImportant(s[0]))) + ';'); } } writeContext.indentedTextWriter.write('"'); } } private _writeTextNode(writeContext: IWriteContext, designItem: IDesignItem) { writeContext.lastElementDisplayType = ElementDisplayType.inline; let content = DomConverter.normalizeContentValue(designItem.content); writeContext.indentedTextWriter.write(content); } private _writeCommentNode(writeContext: IWriteContext, designItem: IDesignItem) { writeContext.indentedTextWriter.write(''); } private _writeElementNode(writeContext: IWriteContext, designItem: IDesignItem) { const currentElementDisplayType = getElementDisplaytype(designItem.element); writeContext.lastElementDisplayType = currentElementDisplayType; writeContext.indentedTextWriter.write('<' + designItem.name); this.writeAttributes(writeContext, designItem); this.writeStyles(writeContext, designItem); writeContext.indentedTextWriter.write('>'); if (designItem.hasChildren) { const children = designItem.children(); this._writeDesignItemList(currentElementDisplayType, writeContext, children); } else if (designItem.hasContent) { writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content)); } if (!DomConverter.IsSelfClosingElement(designItem.name)) { writeContext.indentedTextWriter.write(''); if (currentElementDisplayType !== ElementDisplayType.none) { writeContext.lastElementDisplayType = currentElementDisplayType; } } } private _writeDesignItemList(currentElementDisplayType: ElementDisplayType, writeContext: IWriteContext, children: Iterable) { for (const c of children) { this._writeInternal(writeContext, c); } } private _writeInternal(writeContext: IWriteContext, designItem: IDesignItem) { if (designItem.nodeType === NodeType.TextNode) this._writeTextNode(writeContext, designItem); else if (designItem.nodeType === NodeType.Comment) this._writeCommentNode(writeContext, designItem); else if (designItem.nodeType === NodeType.Element) this._writeElementNode(writeContext, designItem); } write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean) { const context: IWriteContext = { indentedTextWriter, options: this.options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block }; this._writeDesignItemList(ElementDisplayType.inline, context, designItems); } } ================================================ FILE: packages/web-component-designer/src/elements/services/initializationService/IIntializationService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; // This is called for every root DesignItem added to the designer canvas. It's not called for the items children. export interface IIntializationService { init(designItem: IDesignItem): void; } ================================================ FILE: packages/web-component-designer/src/elements/services/instanceService/DefaultInstanceService.ts ================================================ import { IInstanceService } from './IInstanceService.js'; import { IElementDefinition } from '../elementsService/IElementDefinition.js'; import { IDesignerInstance } from './IDesignerInstance.js'; import type { ServiceContainer } from '../ServiceContainer.js'; import type { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { DesignItem } from '../../item/DesignItem.js'; import { encodeXMLChars } from '../../helper/XmlHelper.js'; import { newElementFromString } from '../../helper/ElementHelper.js'; import { isFirefox } from '../../helper/Browser.js'; export class DefaultInstanceService implements IInstanceService { async getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise { if (definition.import) { let importUri = definition.import; if (importUri[0] === '.') importUri = (window.location.origin + window.location.pathname).split('/').slice(0, -1).join('/') + '/' + importUri; //@ts-ignore if (window.importShim) { //@ts-ignore importShim(importUri).then((x) => { let ctor = customElements.get(definition.tag) if (!ctor && definition.className && x[definition.className]) customElements.define(definition.tag, x[definition.className]) //TODO: refresh all extensions }); } else { import(importUri).then((x) => { let ctor = customElements.get(definition.tag) if (!ctor && definition.className && x[definition.className]) customElements.define(definition.tag, x[definition.className]) //TODO: refresh all extensions }); } //removed await here, feels better to not wait for the elemnt is loaded, maybe this needs to be configurable if (instanceServiceContainer.designContext.imports.indexOf(importUri) <= 0) instanceServiceContainer.designContext.imports.push(importUri); } let attr = ''; if (definition.defaultAttributes) { for (let a in definition.defaultAttributes) { let value = definition.defaultAttributes[a]; try { if (typeof value === 'object') attr += ' ' + a + '="' + encodeXMLChars(JSON.stringify(definition.defaultAttributes[a])) + '"'; else attr += ' ' + a + '="' + encodeXMLChars(definition.defaultAttributes[a]) + '"'; } catch (e) { console.warn(e); } } } const elementString = '<' + definition.tag + attr + '>'; const element = newElementFromString(elementString, instanceServiceContainer.designerCanvas.rootDesignItem.document); (element)._inNodeProjectsDesignerView = true; if (definition.defaultWidth) element.style.width = definition.defaultWidth; if (definition.defaultHeight) element.style.height = definition.defaultHeight; element.style.position = 'absolute' if (definition.defaultStyles) { for (let s in definition.defaultStyles) element.style[s] = definition.defaultStyles[s]; } if (definition.defaultContent) { if (typeof definition.defaultContent === "string") { let doc: Document; //@ts-ignore if (instanceServiceContainer.designerCanvas.rootDesignItem.window.Document.parseHTMLUnsafe && !isFirefox) { //@ts-ignore doc = instanceServiceContainer.designerCanvas.rootDesignItem.window.Document.parseHTMLUnsafe(definition.defaultContent); } else { const parser = new instanceServiceContainer.designerCanvas.rootDesignItem.window.DOMParser(); //@ts-ignore doc = parser.parseFromString(definition.defaultContent, 'text/html', { includeShadowRoots: true }); } element.append(...doc.head.childNodes); element.append(...doc.body.childNodes); } else { element.appendChild(definition.defaultContent); } } let designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); return designItem; } } ================================================ FILE: packages/web-component-designer/src/elements/services/instanceService/IDesignerInstance.ts ================================================ export interface IDesignerInstance { _inNodeProjectsDesignerView: boolean; } ================================================ FILE: packages/web-component-designer/src/elements/services/instanceService/IInstanceService.ts ================================================ import { IService } from '../IService.js'; import { IElementDefinition } from '../elementsService/IElementDefinition.js'; import type { ServiceContainer } from '../ServiceContainer.js'; import type { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { IDesignItem } from '../../item/IDesignItem.js'; export interface IInstanceService extends IService { getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer) : Promise } ================================================ FILE: packages/web-component-designer/src/elements/services/manifestParsers/IOldCustomElementsManifest.ts ================================================ export interface IOldCustomElementsManifest { version: string; tags: IOldCustomElementsManifestTag[]; } export interface IOldCustomElementsManifestTag { name: string; path: string; description?: string; attributes?: IOldCustomElementsManifestAttribute[]; properties?: IOldCustomElementsManifestProperty[]; } export interface IOldCustomElementsManifestAttribute { name: string; description?: string; type: string; default?: string; } export interface IOldCustomElementsManifestProperty { name: string; attribute?: string; description?: string; type: string; default?: string; } ================================================ FILE: packages/web-component-designer/src/elements/services/manifestParsers/OldCustomElementsManifestLoader.ts ================================================ import { LazyLoader } from '@node-projects/base-custom-webcomponent'; import { IOldCustomElementsManifest } from './IOldCustomElementsManifest.js'; import { ServiceContainer } from '../ServiceContainer.js'; import { IElementDefinition } from '../elementsService/IElementDefinition.js'; import { PreDefinedElementsService } from '../elementsService/PreDefinedElementsService.js'; import { IJsonPropertyDefinition } from '../propertiesService/services/IJsonPropertyDefinition.js'; import { IJsonPropertyDefinitions } from '../propertiesService/services/IJsonPropertyDefinitions.js'; import { ListPropertiesService } from '../propertiesService/services/ListPropertiesService.js'; export class OldCustomElementsManifestLoader { public static async loadManifest(serviceContainer: ServiceContainer, nodeModule: string, options?: { name?: string, dontLoadWidgets?: boolean, dontLoadProperties?: boolean }) { const nodePath = './node_modules/'; const packageJson = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/package.json')); let jsModule = nodePath + nodeModule + '/' + packageJson.main; if (packageJson.module) jsModule = nodePath + nodeModule + '/' + packageJson.module; const manifest = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/' + packageJson.customElementsManifest)); let name = nodeModule; if (options && options.name) name = options.name; if (!options || !options.dontLoadWidgets) { const elementDefinitions: IElementDefinition[] = []; for (const tag of manifest.tags) { const elementDefinition: IElementDefinition = { tag: tag.name, import: jsModule, description: tag.description } elementDefinitions.push(elementDefinition); } const service = new PreDefinedElementsService(name, { elements: elementDefinitions }); serviceContainer.register('elementsService', service); } if (!options || !options.dontLoadProperties) { const propertyDefinitions: IJsonPropertyDefinitions = {}; for (const tag of manifest.tags) { const attributes: IJsonPropertyDefinition[] = [] for (const attr of tag.attributes) { let propertyDefinition: IJsonPropertyDefinition = { name: attr.name, default: attr.default, description: attr.description } if (attr.type && attr.type.startsWith('"')) { propertyDefinition.type = 'list'; propertyDefinition.values = attr.type.split('|'); } else { propertyDefinition.type = attr.type; } attributes.push(propertyDefinition); } propertyDefinitions[tag.name] = attributes; } const service = new ListPropertiesService(propertyDefinitions); serviceContainer.register('propertyService', service); } } } ================================================ FILE: packages/web-component-designer/src/elements/services/manifestParsers/WebcomponentManifestParserService.ts ================================================ import { BindingTarget } from '../../item/BindingTarget.js'; import { IElementDefinition } from '../elementsService/IElementDefinition.js'; import { IElementsService } from '../elementsService/IElementsService.js'; import { IPropertiesService, RefreshMode } from '../propertiesService/IPropertiesService.js'; import { IProperty } from '../propertiesService/IProperty.js'; import { PropertyType } from '../propertiesService/PropertyType.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js'; import { removeLeading, removeTrailing } from '../../helper/Helper.js'; import { WebcomponentManifestPropertiesService } from '../propertiesService/services/WebcomponentManifestPropertiesService.js'; import { IEvent } from '../eventsService/IEvent.js'; import { EventsService } from '../eventsService/EventsService.js'; export class WebcomponentManifestParserService extends AbstractPropertiesService implements IElementsService, IPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.none; } private _name: string; get name() { return this._name; } private _packageData: any; private _elementList: IElementDefinition[]; private _propertiesList: Record; private __eventsList: Record; private _resolveStored: ((value: IElementDefinition[]) => void)[]; private _rejectStored: ((errorCode: number) => void)[]; private _importPrefix = ''; constructor(name: string, fileOrObject: string | object, importPrefix = '') { super(); this._name = name; this._importPrefix = importPrefix; if (typeof fileOrObject === 'string') { this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/'); let importOfFile: Promise; //@ts-ignore if (window.importShim) //@ts-ignore importOfFile = importShim(fileOrObject, { with: { type: 'json' } }); else //@ts-ignore importOfFile = import(fileOrObject, { with: { type: 'json' } }); importOfFile.then(module => { this._packageData = module.default; this._parseManifest(); }).catch(err => { if (this._rejectStored) { this._rejectStored.forEach(x => x(err)); this._resolveStored = null; this._rejectStored = null; } }); } else { this._packageData = fileOrObject; this._parseManifest(); } } private _parseManifest() { this._elementList = []; this._propertiesList = {}; for (let m of this._packageData.modules) { for (let e of m.exports) { if (e.kind == 'custom-element-definition') { this._elementList.push({ tag: e.name, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(m.path, '/') }); let properties: IProperty[] = []; let declaration = m.declarations.find(x => x.name == e.declaration.name); for (let d of declaration.members) { if (d.kind == 'field') { let pType = PropertyType.property; if (declaration.attributes) pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property; const p = WebcomponentManifestPropertiesService.manifestClassPropertyTypeToEditorPropertyType(d.type?.text, d.type?.editor); properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description }); } } this._propertiesList[e.name] = properties; if (declaration.events) { let events: IEvent[] = []; for (let e of declaration.events) { events.push({ name: e.name }) } if (events.length) this.__eventsList[e.name] = events; } } } if (this._resolveStored) { this._resolveStored.forEach(x => x(this._elementList)); this._resolveStored = null; this._rejectStored = null; } } } async getElements(): Promise { if (this._packageData) return Promise.resolve(this._elementList); if (!this._resolveStored) { this._resolveStored = []; this._rejectStored = []; } return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); }); } override isHandledElement(designItem: IDesignItem): boolean { if (this._elementList) return this._elementList.find(x => x.tag == designItem.name) != null return false } override async getProperties(designItem: IDesignItem): Promise { return this._propertiesList[designItem.name]; } override async getProperty(designItem: IDesignItem, name: string): Promise { return this._propertiesList[designItem.name].find(x => x.name == name); } override getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget { return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property } public isHandledElementFromEventsService(designItem: IDesignItem): boolean { if (this.__eventsList) return this.__eventsList[designItem.name] != null return false } public getPossibleEvents(designItem: IDesignItem): IEvent[] { return [...this.__eventsList[designItem.name], ...EventsService._simpleMouseEvents, ...EventsService._pointerEvents, ...EventsService._allElements, ...EventsService._focusableEvents]; } public getEvent(designItem: IDesignItem, name: string): IEvent { let evt = this.getPossibleEvents(designItem).find(x => x.name == name); return evt ?? { name, propertyName: 'on' + name, eventObjectName: 'Event' }; } } ================================================ FILE: packages/web-component-designer/src/elements/services/miniatureViewService/IMiniatureViewService.ts ================================================ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; export interface IMiniatureViewService { provideMiniatureView(designerCanvas: IDesignerCanvas): Promise; } ================================================ FILE: packages/web-component-designer/src/elements/services/miniatureViewService/MiniatureViewService.ts ================================================ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { IMiniatureViewService } from "./IMiniatureViewService.js"; export class MiniatureViewService implements IMiniatureViewService { public async provideMiniatureView(designerCanvas: IDesignerCanvas): Promise { let el = document.createDocumentFragment(); for (const e of designerCanvas.rootDesignItem.children()) { el.appendChild(e.element.cloneNode(true)); } return el; } } ================================================ FILE: packages/web-component-designer/src/elements/services/modelCommandService/DefaultModelCommandService.ts ================================================ import { CommandType } from "../../../commandHandling/CommandType.js"; import { IUiCommand } from "../../../commandHandling/IUiCommand.js"; import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { IModelCommandService } from "./IModelCommandService.js"; import { ArrangeHelper } from "../../helper/ArrangeHelper.js"; import { Orientation } from "../../../enums/Orientation.js"; import { IDesignItem } from "../../item/IDesignItem.js"; export class DefaultModelCommandService implements IModelCommandService { canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand, designItems?: IDesignItem[]): boolean { if (command.type == CommandType.moveBackward || command.type == CommandType.moveForward || command.type == CommandType.moveToBack || command.type == CommandType.moveToFront) return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null && !designerCanvas.instanceServiceContainer.selectionService.primarySelection.isRootItem; if (command.type == CommandType.arrangeBottom || command.type == CommandType.arrangeCenter || command.type == CommandType.arrangeLeft || command.type == CommandType.arrangeMiddle || command.type == CommandType.arrangeRight || command.type == CommandType.arrangeTop || command.type == CommandType.unifyHeight || command.type == CommandType.unifyWidth) return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1; if (command.type == CommandType.rotateCounterClockwise || command.type == CommandType.rotateClockwise || command.type == CommandType.mirrorHorizontal || command.type == CommandType.mirrorVertical) return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0 && !designerCanvas.instanceServiceContainer.selectionService.primarySelection.isRootItem; return null; } async executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand, designItems?: IDesignItem[]) { designItems = designItems ?? [...designerCanvas.instanceServiceContainer.selectionService.selectedElements]; const primary = designItems[0] ; if (command.type == CommandType.moveBackward) { let idx = primary.parent.indexOf(primary) - 1; if (idx >= 0) primary.parent.insertChild(primary, idx); } else if (command.type == CommandType.moveForward) { let idx = primary.parent.indexOf(primary) + 1; if (idx < primary.parent.childCount) primary.parent.insertChild(primary, idx); } else if (command.type == CommandType.moveToBack) { primary.parent.insertChild(primary, 0); } else if (command.type == CommandType.moveToFront) { primary.parent.insertChild(primary); } else if (command.type == CommandType.arrangeTop) { ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas, designItems); } else if (command.type == CommandType.arrangeRight) { ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas, designItems); } else if (command.type == CommandType.arrangeLeft) { ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas, designItems); } else if (command.type == CommandType.arrangeBottom) { ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas, designItems); } else if (command.type == CommandType.arrangeCenter) { ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas, designItems); } else if (command.type == CommandType.arrangeMiddle) { ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas, designItems); } else if (command.type == CommandType.unifyHeight) { const grp = primary.openGroup('unifyHeight'); const height = primary.getStyle('height'); for (let s of designItems) { s.setStyle('height', height); } grp.commit(); } else if (command.type == CommandType.unifyWidth) { const grp = primary.openGroup('unifyWidth'); const width = primary.getStyle('width'); for (let s of designItems) { s.setStyle('width', width); } grp.commit(); } else if (command.type == CommandType.rotateCounterClockwise) { const grp = primary.openGroup('rotateCounterClockwise'); var trf = primary.getStyle('transform'); let degree = 0; let rotation = ""; if (trf != null) { try { if (trf.includes('-')) degree = parseInt(trf.match(/\d+/)[0]) * -1; else degree = parseInt(trf.match(/\d+/)[0]); rotation = "rotate(" + (degree - 90) + "deg)"; } catch { rotation = "rotate(-90deg)" } } else { rotation = "rotate(-90deg)"; } for (let s of designItems) { s.setStyle('transform', rotation); } grp.commit(); } else if (command.type == CommandType.rotateClockwise) { const grp = primary.openGroup('rotateClockwise'); var trf = primary.getStyle('transform'); let degree = 0; let rotation = ""; if (trf != null) { try { if (trf.includes('-')) degree = parseInt(trf.match(/\d+/)[0]) * -1; else degree = parseInt(trf.match(/\d+/)[0]); rotation = "rotate(" + (degree + 90) + "deg)"; } catch { rotation = "rotate(90deg)" } } else { rotation = "rotate(90deg)"; } for (let s of designItems) { s.setStyle('transform', rotation); } grp.commit(); } else if (command.type == CommandType.mirrorHorizontal) { const grp = primary.openGroup('mirrorHorizontal'); for (let s of designItems) { s.setStyle('transform', 'scaleX(-1)'); } grp.commit(); } else if (command.type == CommandType.mirrorVertical) { const grp = primary.openGroup('mirrorVertical'); for (let s of designItems) { s.setStyle('transform', 'scaleY(-1)'); } grp.commit(); } else return null; return true; } } //TODO: combine transforms, could be easy, add new transform, get the matrix and convert back to simple ones (if possible) ================================================ FILE: packages/web-component-designer/src/elements/services/modelCommandService/IModelCommandService.ts ================================================ import { IUiCommand } from '../../../commandHandling/IUiCommand.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { IService } from '../IService.js'; export interface IModelCommandService extends IService { canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand, designItems?: IDesignItem[]): boolean | null executeCommand(designerCanvas: IDesignerCanvas, commandType: IUiCommand, designItems?: IDesignItem[]) } ================================================ FILE: packages/web-component-designer/src/elements/services/multiplayerService/IMultiplayerService.ts ================================================ import { IPoint } from "../../../interfaces/IPoint"; export interface IMultiplayerService { signOn(userInfo: userInfo); //submitState } export type userInfo = { name: string; color: string; } export type userContext = { name: string; } export type cursor = { point: IPoint state: 'none' | 'pointing' | 'chat' document: string } ================================================ FILE: packages/web-component-designer/src/elements/services/multiplayerService/MultiplayerService.ts ================================================ import { TypedEvent } from "@node-projects/base-custom-webcomponent"; import { userInfo } from "./IMultiplayerService"; export class MultiplayerService { constructor(getUserInfo: () => userInfo, sendMessage: (message) => void, messageReceived: () => any) { } cursorsChanged: TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/AbsolutePlacementService.ts ================================================ import type { IPoint } from '../../../interfaces/IPoint.js'; import type { IPlacementService } from './IPlacementService.js'; import type { IDesignItem } from '../../item/IDesignItem.js'; import { DomConverter } from '../../widgets/designerView/DomConverter.js'; import { combineTransforms, extractTranslationFromDOMMatrix } from '../../helper/TransformHelper.js'; import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem, transformOffsetByInverseLinearMatrix } from '../../helper/LayoutHelper.js'; import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js'; import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js'; import { straightenLine } from '../../helper/PathDataPolyfill.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { hasCommandKey } from '../../helper/KeyboardHelper.js'; import { filterNonElementItems } from './DefaultPlacementService.js'; import { getBoundingClientRectAlsoForDisplayContents, getElementZoomFactor } from '../../helper/ElementHelper.js'; import { getGeometryReader } from '../../widgets/designerView/extensions/svg/geometry/GeometryReaderFactory.js'; function usesSvgGeometryPlacement(designItem: IDesignItem) { const element = designItem.element; return element instanceof SVGGraphicsElement && !(element instanceof SVGSVGElement) && !!getGeometryReader(element); } export class AbsolutePlacementService implements IPlacementService { //TODO: change move of elements to allow switch between transform and real move serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem) { if (item != null && item.getComputedStyle()?.position == 'absolute') return true; if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' || containerStyle.display === 'flex' || containerStyle.display === 'inline-flex') return false; return true; } isEnterableContainer(container: IDesignItem) { if (DomConverter.IsSelfClosingElement(container.element.localName)) return false; if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null) return false; return true; } canEnter(container: IDesignItem, items: IDesignItem[]) { if (container.instanceServiceContainer.designerCanvas.readOnly) return false; if (!this.isEnterableContainer(container)) return false; if (!items.every(x => !x.element.contains(container.element) && x !== container)) return false; return true; } canLeave(container: IDesignItem, items: IDesignItem[]) { return true; } getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint { return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element); } private calculateTrack(event: MouseEvent, designerCanvas: IDesignerCanvas, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, item: IDesignItem): IPoint { let trackX = newPoint.x - startPoint.x; let trackY = newPoint.y - startPoint.y; if (!hasCommandKey(event)) { if (designerCanvas.alignOnGrid) { let p = getDesignItemCurrentPos(item, 'position'); p.x = p.x % designerCanvas.gridSize; p.y = p.y % designerCanvas.gridSize; trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize - p.x; trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize - p.y; } else if (designerCanvas.alignOnSnap) { let rect = getBoundingClientRectAlsoForDisplayContents(item.element); let newPos = designerCanvas.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / designerCanvas.scaleFactor, height: rect.height / designerCanvas.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 }) if (newPos.x !== null) { trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x); } else { trackX = Math.round(trackX); } if (newPos.y !== null) { trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y); } else { trackY = Math.round(trackY); } } } return { x: trackX, y: trackY }; } placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint { let trackX = newPoint.x; let trackY = newPoint.y; if (!hasCommandKey(event)) { if (designerCanvas.alignOnGrid) { trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize; trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize; } else if (designerCanvas.alignOnSnap) { let newPos = designerCanvas.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 }) if (newPos.x !== null) { trackX = newPos.x; } else { trackX = Math.round(trackX); } if (newPos.y !== null) { trackY = newPos.y; } else { trackY = Math.round(trackY); } } } return { x: trackX, y: trackY }; } startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { } place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { //TODO: this should revert all undo actions while active //maybe a undo actions returns itself or an id so it could be changed? let track = this.calculateTrack(event, designerCanvas, startPoint, offsetInControl, newPoint, items[0]); if (event.shiftKey) { track = straightenLine({ x: 0, y: 0 }, track, 90); } let filteredItems = filterChildPlaceItems(filterNonElementItems(items)); for (const designItem of filteredItems) { const canvas = designItem.instanceServiceContainer.designerCanvas.canvas; const quad = designItem.parent.element.getBoxQuads({ relativeTo: canvas, iframes: designItem.instanceServiceContainer.designerCanvas.iframes })[0]; let transformedPoint: DOMPoint = designItem.parent.element.convertPointFromNode(new DOMPoint(track.x + quad.p1.x, track.y + quad.p1.y), canvas, { iframes: designItem.instanceServiceContainer.designerCanvas.iframes }); const cs = getComputedStyle(designItem.element); let m = new DOMMatrix(); if (cs.rotate != 'none' && cs.rotate) { m = m.multiply(new DOMMatrix('rotate(' + cs.rotate.replace(' ', ',') + ')')); } if (cs.scale != 'none' && cs.scale) { m = m.multiply(new DOMMatrix('scale(' + cs.scale.replace(' ', ',') + ')')); } transformedPoint = m.inverse().transformPoint(transformedPoint); const zoom = getElementZoomFactor(designItem.element); if (zoom !== 1) { // CSS zoom scales translate(), so drag previews must be converted back to local units. transformedPoint = new DOMPoint(transformedPoint.x / zoom, transformedPoint.y / zoom); } const translationMatrix = new DOMMatrix().translate(transformedPoint.x, transformedPoint.y); combineTransforms((designItem.element), designItem.getStyle('transform'), translationMatrix.toString()); } items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', false); } moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean) { //TODO: Check if we set left or right //TODO: Use CSS units for (let d of designItems) { if (position.x) d.setStyle('left', parseInt((d.element).style.left) - position.x + 'px'); if (position.y) d.setStyle('top', parseInt((d.element).style.top) - position.y + 'px'); } designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems); designItems[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(designItems, 'place', true); } enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop') { let filteredItems = filterChildPlaceItems(items); for (let i of filteredItems) { if (mode == 'drop') i.setStyle('position', 'absolute'); container.insertChild(i); if (i.lastContainerSize) { if (!i.hasStyle('width')) i.setStyle('width', i.lastContainerSize.width + 'px'); if (!i.hasStyle('height')) i.setStyle('height', i.lastContainerSize.height + 'px'); } } items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true); } leaveContainer(container: IDesignItem, items: IDesignItem[]) { let filteredItems = filterChildPlaceItems(items); items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true); } finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { let filteredItems = filterChildPlaceItems(items); for (const designItem of filteredItems) { let translation: DOMPoint = extractTranslationFromDOMMatrix(new DOMMatrix((designItem.element).style.transform)); const stylesMapOffset: DOMPoint = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? '')); (designItem.element).style.transform = designItem.getStyle('transform') ?? ''; let track = { x: translation.x, y: translation.y }; const cs = getComputedStyle(designItem.element); let m = new DOMMatrix(); if (cs.rotate != 'none' && cs.rotate) { m = m.multiply(new DOMMatrix('rotate(' + cs.rotate.replace(' ', ',') + ')')); } if (cs.scale != 'none' && cs.scale) { m = m.multiply(new DOMMatrix('scale(' + cs.scale.replace(' ', ',') + ')')); } if (!usesSvgGeometryPlacement(designItem)) { track = m.transformPoint(track); } let placementOffset = { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }; if (usesSvgGeometryPlacement(designItem)) { placementOffset = transformOffsetByInverseLinearMatrix(placementOffset, new DOMMatrix(designItem.getStyle('transform') ?? '')); } placeDesignItem(container, designItem, placementOffset, 'position'); } for (const item of items) { (designerCanvas).extensionManager.removeExtension(item, ExtensionType.Placement); } items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true); } } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/AlwaysAbsolutePlacementService.ts ================================================ import type { IDesignItem } from '../../item/IDesignItem.js'; import { AbsolutePlacementService } from './AbsolutePlacementService.js'; export class AlwaysAbsolutePlacementService extends AbsolutePlacementService { override serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem) { return true; } } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/DefaultPlacementService.ts ================================================ import type { IPoint } from '../../../interfaces/IPoint.js'; import type { IPlacementService } from './IPlacementService.js'; import type { IDesignItem } from '../../item/IDesignItem.js'; import { DomConverter } from '../../widgets/designerView/DomConverter.js'; import { combineTransforms, extractTranslationFromDOMMatrix } from '../../helper/TransformHelper.js'; import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem, transformOffsetByInverseLinearMatrix } from '../../helper/LayoutHelper.js'; import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js'; import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js'; import { straightenLine } from '../../helper/PathDataPolyfill.js'; import { hasCommandKey } from '../../helper/KeyboardHelper.js'; import { NodeType } from '../../item/NodeType.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { getBoundingClientRectAlsoForDisplayContents, getElementZoomFactor } from '../../helper/ElementHelper.js'; import { getGeometryReader } from '../../widgets/designerView/extensions/svg/geometry/GeometryReaderFactory.js'; function usesSvgGeometryPlacement(designItem: IDesignItem) { const element = designItem.element; return element instanceof SVGGraphicsElement && !(element instanceof SVGSVGElement) && !!getGeometryReader(element); } export function filterNonElementItems(items: IDesignItem[]) { const filterdPlaceItems: IDesignItem[] = []; next: for (let i of items) { if (i.nodeType === NodeType.TextNode || i.nodeType === NodeType.Comment) continue filterdPlaceItems.push(i); } return filterdPlaceItems; } export class DefaultPlacementService implements IPlacementService { serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem) { if (item != null && item.getComputedStyle()?.position == 'absolute') return true; if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' || containerStyle.display === 'flex' || containerStyle.display === 'inline-flex') return false; return true; } isEnterableContainer(container: IDesignItem) { if (DomConverter.IsSelfClosingElement(container.element.localName)) return false; if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null) return false; return true; } canEnter(container: IDesignItem, items: IDesignItem[]) { if (container.instanceServiceContainer.designerCanvas.readOnly) return false; if (!this.isEnterableContainer(container)) return false; if (!items.every(x => !x.element.contains(container.element) && x !== container)) return false; return true; } canLeave(container: IDesignItem, items: IDesignItem[]) { return true; } getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint { return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element); } private calculateTrack(event: MouseEvent, placementView: IDesignerCanvas, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, item: IDesignItem): IPoint { let trackX = newPoint.x - startPoint.x; let trackY = newPoint.y - startPoint.y; if (!hasCommandKey(event)) { if (placementView.alignOnGrid) { let p = getDesignItemCurrentPos(item, 'position'); p.x = p.x % placementView.gridSize; p.y = p.y % placementView.gridSize; trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize - p.x; trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize - p.y; } else if (placementView.alignOnSnap) { let rect = getBoundingClientRectAlsoForDisplayContents(item.element); let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 }) if (newPos.x !== null) { trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x); } else { trackX = Math.round(trackX); } if (newPos.y !== null) { trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y); } else { trackY = Math.round(trackY); } } } return { x: trackX, y: trackY }; } placePoint(event: MouseEvent, placementView: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint { let trackX = newPoint.x; let trackY = newPoint.y; if (!hasCommandKey(event)) { if (placementView.alignOnGrid) { trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize; trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize; } else if (placementView.alignOnSnap) { let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 }) if (newPos.x !== null) { trackX = newPos.x; } else { trackX = Math.round(trackX); } if (newPos.y !== null) { trackY = newPos.y; } else { trackY = Math.round(trackY); } } } return { x: trackX, y: trackY }; } startPlace(event: MouseEvent, placementView: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { } place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { //TODO: this should revert all undo actions while active //maybe a undo actions returns itself or an id so it could be changed? let track = this.calculateTrack(event, designerCanvas, startPoint, offsetInControl, newPoint, items[0]); if (event.shiftKey) { track = straightenLine({ x: 0, y: 0 }, track, 90); } let filteredItems = filterChildPlaceItems(filterNonElementItems(items)); for (const designItem of filteredItems) { const canvas = designItem.instanceServiceContainer.designerCanvas.canvas; const quad = designItem.parent.element.getBoxQuads({ relativeTo: canvas, iframes: designItem.instanceServiceContainer.designerCanvas.iframes })[0]; let transformedPoint: DOMPoint = designItem.parent.element.convertPointFromNode(new DOMPoint(track.x + quad.p1.x, track.y + quad.p1.y), canvas, { iframes: designItem.instanceServiceContainer.designerCanvas.iframes }); const cs = getComputedStyle(designItem.element); let m = new DOMMatrix(); if (cs.rotate != 'none' && cs.rotate) { m = m.multiply(new DOMMatrix('rotate(' + cs.rotate.replace(' ', ',') + ')')); } if (cs.scale != 'none' && cs.scale) { m = m.multiply(new DOMMatrix('scale(' + cs.scale.replace(' ', ',') + ')')); } transformedPoint = m.inverse().transformPoint(transformedPoint); const zoom = getElementZoomFactor(designItem.element); if (zoom !== 1) { // CSS zoom scales translate(), so drag previews must be converted back to local units. transformedPoint = new DOMPoint(transformedPoint.x / zoom, transformedPoint.y / zoom); } const translationMatrix = new DOMMatrix().translate(transformedPoint.x, transformedPoint.y); combineTransforms((designItem.element), designItem.getStyle('transform'), translationMatrix.toString()); } items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', false); } moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean) { //TODO: Check if we set left or right //TODO: Use CSS units for (let d of designItems) { if (position.x) d.setStyle('left', parseInt((d.element).style.left) - position.x + 'px'); if (position.y) d.setStyle('top', parseInt((d.element).style.top) - position.y + 'px'); } designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems); designItems[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(designItems, 'place', true); } enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop') { let filteredItems = filterChildPlaceItems(items); for (let i of filteredItems) { if (mode == 'drop') i.setStyle('position', 'absolute'); container.insertChild(i); if (i.lastContainerSize) { if (!i.hasStyle('width')) i.setStyle('width', i.lastContainerSize.width + 'px'); if (!i.hasStyle('height')) i.setStyle('height', i.lastContainerSize.height + 'px'); } } items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true); } leaveContainer(container: IDesignItem, items: IDesignItem[]) { let filteredItems = filterChildPlaceItems(items); items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true); } finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { let filteredItems = filterChildPlaceItems(items); for (const designItem of filteredItems) { let translation: DOMPoint = extractTranslationFromDOMMatrix(new DOMMatrix((designItem.element).style.transform)); const stylesMapOffset: DOMPoint = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? '')); (designItem.element).style.transform = designItem.getStyle('transform') ?? ''; let track = { x: translation.x, y: translation.y }; const cs = getComputedStyle(designItem.element); let m = new DOMMatrix(); if (cs.rotate != 'none' && cs.rotate) { m = m.multiply(new DOMMatrix('rotate(' + cs.rotate.replace(' ', ',') + ')')); } if (cs.scale != 'none' && cs.scale) { m = m.multiply(new DOMMatrix('scale(' + cs.scale.replace(' ', ',') + ')')); } if (!usesSvgGeometryPlacement(designItem)) { track = m.transformPoint(track); } let placementOffset = { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }; if (usesSvgGeometryPlacement(designItem)) { placementOffset = transformOffsetByInverseLinearMatrix(placementOffset, new DOMMatrix(designItem.getStyle('transform') ?? '')); } placeDesignItem(container, designItem, placementOffset, 'position'); } for (const item of items) { (designerCanvas).extensionManager.removeExtension(item, ExtensionType.Placement); } items[0].instanceServiceContainer.designerCanvas?.raiseDesignItemsChanged(filteredItems, 'place', true); } } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/FlexBoxPlacementService.ts ================================================ import { IPoint } from '../../../interfaces/IPoint.js'; import { IRect } from '../../../interfaces/IRect.js'; import { getBoundingClientRectAlsoForDisplayContents } from '../../helper/ElementHelper.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { DefaultPlacementService } from './DefaultPlacementService.js'; import { IPlacementService } from './IPlacementService.js'; export class FlexBoxPlacementService implements IPlacementService { private _basePlacementService; public constructor(basePlacementService: IPlacementService) { this._basePlacementService = basePlacementService ?? new DefaultPlacementService(); } enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop') { for (let i of items) { container.insertChild(i); i.removeStyle("position"); i.removeStyle("left"); i.removeStyle("top"); i.removeStyle("right"); i.removeStyle("transform"); } } leaveContainer(container: IDesignItem, items: IDesignItem[]) { for (let i of items) { if (!i.lastContainerSize) { const rect = getBoundingClientRectAlsoForDisplayContents(i.element); i.lastContainerSize = { width: rect.width, height: rect.height }; } } } serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem) { if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex') { if (item != null && item.getComputedStyle()?.position == 'absolute') return false; return true; } return false; } isEnterableContainer(container: IDesignItem) { return this._basePlacementService.isEnterableContainer(container); } canEnter(container: IDesignItem, items: IDesignItem[]) { if (container.instanceServiceContainer.designerCanvas.readOnly) return false; return this._basePlacementService.canEnter(container, items); } canLeave(container: IDesignItem, items: IDesignItem[]) { return true; } getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint { return getBoundingClientRectAlsoForDisplayContents(container.element); } placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint { const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService); return defaultPlacementService.placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items); } startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { } place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { const pos = (designerCanvas).getNormalizedEventCoordinates(event); const style = getComputedStyle(container.element); const childrenWithPos: [IDesignItem, IRect][] = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, designerCanvas.getNormalizedElementCoordinates(x.element)]); if (style.flexDirection == 'row' || style.flexDirection == 'row-reverse') { childrenWithPos.sort(x => x[1].x); let elBefore: [IDesignItem, IRect] = null; for (let c of childrenWithPos) { if (c[1].x + c[1].width / 2 < pos.x) { elBefore = c; if (style.flexDirection == 'row-reverse') break; } } let posBefore = childrenWithPos.indexOf(elBefore); let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0])); if (elBefore && elBefore[0] != items[0]) { if (style.flexDirection == 'row-reverse' && posBefore - 1 === posDrag) return; if (style.flexDirection == 'row' && posBefore + 1 === posDrag) return; const sel = [...container.instanceServiceContainer.selectionService.selectedElements]; let cg = items[0].openGroup('move in flexbox'); if (items[0].parent) items[0].remove(); if (style.flexDirection == 'row-reverse') elBefore[0].insertAdjacentElement(items[0], 'beforebegin'); else elBefore[0].insertAdjacentElement(items[0], 'afterend'); cg.commit(); container.instanceServiceContainer.selectionService.setSelectedElements(sel); } else if (elBefore == null) { if (posDrag == 0) return; const sel = [...container.instanceServiceContainer.selectionService.selectedElements]; let cg = items[0].openGroup('move in flexbox'); if (items[0].parent) items[0].remove(); if (style.flexDirection == 'row-reverse') container.insertChild(items[0]); else container.insertChild(items[0], 0); cg.commit(); container.instanceServiceContainer.selectionService.setSelectedElements(sel); } } else if (style.flexDirection == 'column' || style.flexDirection == 'column-reverse') { childrenWithPos.sort(x => x[1].y); let elBefore: [IDesignItem, IRect] = null; for (let c of childrenWithPos) { if (c[1].y + c[1].height / 2 < pos.y) { elBefore = c; if (style.flexDirection == 'column-reverse') break; } } let posBefore = childrenWithPos.indexOf(elBefore); let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0])); if (elBefore && elBefore[0] != items[0]) { if (style.flexDirection == 'column-reverse' && posBefore - 1 === posDrag) return; if (style.flexDirection == 'column' && posBefore + 1 === posDrag) return; const sel = [...container.instanceServiceContainer.selectionService.selectedElements]; let cg = items[0].openGroup('move in flexbox'); if (items[0].parent) items[0].remove(); if (style.flexDirection == 'column-reverse') elBefore[0].insertAdjacentElement(items[0], 'beforebegin'); else elBefore[0].insertAdjacentElement(items[0], 'afterend'); cg.commit(); container.instanceServiceContainer.selectionService.setSelectedElements(sel); } else if (elBefore == null) { if (posDrag == 0) return; const sel = [...container.instanceServiceContainer.selectionService.selectedElements]; let cg = items[0].openGroup('move in flexbox'); if (items[0].parent) items[0].remove(); if (style.flexDirection == 'column-reverse') container.insertChild(items[0]); else container.insertChild(items[0], 0); cg.commit(); container.instanceServiceContainer.selectionService.setSelectedElements(sel); } } (designerCanvas).extensionManager.refreshAllExtensions([container]); } finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { } moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean) { } } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/GridPlacementService.ts ================================================ import type { IPoint } from '../../../interfaces/IPoint.js'; import type { IPlacementService } from './IPlacementService.js'; import type { IDesignItem } from '../../item/IDesignItem.js'; import { calculateGridInformation, getElementGridInformation, getGridCellFromPoint } from '../../helper/GridHelper.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js'; import { DefaultPlacementService } from './DefaultPlacementService.js'; import { getBoundingClientRectAlsoForDisplayContents } from '../../helper/ElementHelper.js'; export class GridPlacementService implements IPlacementService { private _basePlacementService; public constructor(basePlacementService: IPlacementService) { this._basePlacementService = basePlacementService ?? new DefaultPlacementService(); } enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop') { for (let i of items) { container.insertChild(i); i.removeStyle("position"); i.removeStyle("left"); i.removeStyle("top"); i.removeStyle("right"); i.removeStyle("width"); i.removeStyle("height"); i.removeStyle("transform"); } } leaveContainer(container: IDesignItem, items: IDesignItem[]) { for (let i of items) { if (!i.lastContainerSize) { const rect = getBoundingClientRectAlsoForDisplayContents(i.element); i.lastContainerSize = { width: rect.width, height: rect.height }; } } } serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem) { if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid') { if (item != null && item.getComputedStyle()?.position == 'absolute') return false; return true; } return false; } isEnterableContainer(container: IDesignItem) { return this._basePlacementService.isEnterableContainer(container); } canEnter(container: IDesignItem, items: IDesignItem[]) { if (container.instanceServiceContainer.designerCanvas.readOnly) return false; return this._basePlacementService.canEnter(container, items); } canLeave(container: IDesignItem, items: IDesignItem[]) { return true; } getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint { return getBoundingClientRectAlsoForDisplayContents(container.element); } placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint { const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService); return defaultPlacementService.placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items); } startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { } place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { const gridInformation = calculateGridInformation(container); const pos = designerCanvas.getNormalizedEventCoordinates(event); //pos.x -= offsetInControl.x; //pos.y -= offsetInControl.y; const hoveredCell = getGridCellFromPoint(container, pos, gridInformation); if (hoveredCell) { const { row, column, cell } = hoveredCell; let info = getElementGridInformation(items[0].element); if (cell.name) { (items[0].element).style.gridColumn = ''; (items[0].element).style.gridRow = ''; (items[0].element).style.gridArea = cell.name; } else { (items[0].element).style.gridArea = ''; if (info.colSpan <= 1) { (items[0].element).style.gridColumn = '' + (column + 1); (items[0].element).style.gridRow = '' + (row + 1); } else { (items[0].element).style.gridColumnStart = '' + (column + 1); (items[0].element).style.gridRowStart = '' + (row + 1); (items[0].element).style.gridColumnEnd = '' + (column + info.colSpan + 1); (items[0].element).style.gridRowEnd = '' + (row + info.rowSpan + 1); } } } (designerCanvas).extensionManager.refreshAllExtensions([container]); } finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { const gridInformation = calculateGridInformation(container); const pos = designerCanvas.getNormalizedEventCoordinates(event); //pos.x -= offsetInControl.x; //pos.y -= offsetInControl.y; const hoveredCell = getGridCellFromPoint(container, pos, gridInformation); if (hoveredCell) { const { row, column, cell } = hoveredCell; let info = getElementGridInformation(items[0].element); //Grid Area is shorthand for grid row/column, to make undo work correctly we need to set befor and after clear if (cell.name) { items[0].setStyle('grid-area', cell.name); items[0].removeStyle('grid-row-start'); items[0].removeStyle('grid-row-end'); items[0].removeStyle('grid-column-start'); items[0].removeStyle('grid-column-end'); items[0].removeStyle('grid-column'); items[0].removeStyle('grid-row'); items[0].setStyle('grid-area', cell.name); } else { if (info.colSpan <= 1) { items[0].removeStyle('grid-area'); items[0].removeStyle('grid-row-start'); items[0].removeStyle('grid-row-end'); items[0].removeStyle('grid-column-start'); items[0].removeStyle('grid-column-end'); items[0].setStyle('grid-column', '' + (column + 1)); items[0].setStyle('grid-row', '' + (row + 1)); } else { items[0].removeStyle('grid-area'); items[0].removeStyle('grid-column'); items[0].removeStyle('grid-row'); items[0].setStyle('grid-column-start', '' + (column + 1)); items[0].setStyle('grid-row-start', '' + (row + 1)); items[0].setStyle('grid-column-end', '' + (column + info.colSpan + 1)); items[0].setStyle('grid-row-end', '' + (row + info.rowSpan + 1)); } } } (designerCanvas).extensionManager.refreshAllExtensions([container]); } moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean) { } } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/IPlacementService.ts ================================================ import { IService } from '../IService.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { IPoint } from '../../../interfaces/IPoint.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; export interface IPlacementService extends IService { startPlacementAllowed?(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, items: IDesignItem[]): boolean; serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean; isEnterableContainer(container: IDesignItem): boolean; canEnter(container: IDesignItem, items: IDesignItem[]): boolean; canLeave(container: IDesignItem, items: IDesignItem[]): boolean; enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'); leaveContainer(container: IDesignItem, items: IDesignItem[]); getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint; placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint; startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]); place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]); finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]); moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean); } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/ISnaplinesProviderService.ts ================================================ import { IService } from '../IService.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { IRect } from "../../../interfaces/IRect.js"; export interface ISnaplinesProviderService extends IService { provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): { outerRect: DOMRect, positionsH: [number, IRect][], positionsMiddleH: [number, IRect][], positionsV: [number, IRect][], positionsMiddleV: [number, IRect][] }; } ================================================ FILE: packages/web-component-designer/src/elements/services/placementService/SnaplinesProviderService.ts ================================================ import { IRect } from '../../../interfaces/IRect.js'; import { getBoundingClientRectAlsoForDisplayContents } from '../../helper/ElementHelper.js'; import type { IDesignItem } from '../../item/IDesignItem.js'; import { ISnaplinesProviderService } from './ISnaplinesProviderService.js'; export const provideSnaplinesWithDistance = 'provideSnaplinesWithDistance'; export const provideSnaplinesWithDistanceDistance = 'provideSnaplinesWithDistanceDistance'; export class SnaplinesProviderService implements ISnaplinesProviderService { provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]) { { const canvas = containerItem.instanceServiceContainer.designerCanvas; const ignMap = new Map(ignoredItems.map(i => [i.element, i])); const outerRect = getBoundingClientRectAlsoForDisplayContents(containerItem.element); const provideWithDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistance] !== false; const provideWithDistDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistanceDistance] ?? 5; const positionsH: [number, IRect][] = []; const positionsMiddleH: [number, IRect][] = []; const positionsV: [number, IRect][] = []; const positionsMiddleV: [number, IRect][] = []; const tw = containerItem.document.createTreeWalker(containerItem.usableContainer, NodeFilter.SHOW_ELEMENT); let n: Element = tw.nextNode(); while (n != null) { if (ignMap.has(n)) { n = tw.nextSibling(); } else { const p = getBoundingClientRectAlsoForDisplayContents((n)); const pLeft = (p.x - outerRect.x) / canvas.scaleFactor; const pMidH = (p.x - outerRect.x + p.width / 2) / canvas.scaleFactor; const pRight = (p.x - outerRect.x + p.width) / canvas.scaleFactor; const pTop = (p.y - outerRect.y) / canvas.scaleFactor; const pMidV = (p.y - outerRect.y + p.height / 2) / canvas.scaleFactor; const pBottom = (p.y - outerRect.y + p.height) / canvas.scaleFactor; const transformedP: IRect = { x: pLeft + outerRect.x, y: pTop + outerRect.y, width: p.width / canvas.scaleFactor, height: p.height / canvas.scaleFactor }; if (provideWithDist) positionsH.push([pLeft - provideWithDistDist, transformedP]); positionsH.push([pLeft, transformedP]); positionsMiddleH.push([pMidH, transformedP]); positionsH.push([pRight, transformedP]); if (provideWithDist) positionsH.push([pRight + provideWithDistDist, transformedP]); if (provideWithDist) positionsV.push([pTop - provideWithDistDist, transformedP]); positionsV.push([pTop, transformedP]); positionsMiddleV.push([pMidV, transformedP]); positionsV.push([pBottom, transformedP]); if (provideWithDist) positionsV.push([pBottom + provideWithDistDist, transformedP]); n = tw.nextNode(); } } positionsH.push([0, { x: 0, y: 0, width: 0, height: 0 }]); positionsH.sort((a, b) => a[0] - b[0]); positionsMiddleH.sort((a, b) => a[0] - b[0]); positionsV.push([0, { x: 0, y: 0, width: 0, height: 0 }]) positionsV.sort((a, b) => a[0] - b[0]); positionsMiddleV.sort((a, b) => a[0] - b[0]); return { outerRect, positionsH, positionsMiddleH, positionsV, positionsMiddleV } } } } ================================================ FILE: packages/web-component-designer/src/elements/services/pngCreatorService/DisplayMediaPngWriterService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { Screenshot } from "../../helper/Screenshot.js"; import { requestAnimationFramePromise, sleep } from "../../helper/Helper.js"; import { IPngCreatorService } from "./IPngCreatorService.js"; import { DesignerCanvas } from "../../widgets/designerView/designerCanvas.js"; export class DisplayMediaPngWriterService implements IPngCreatorService { async takePng(designItems: IDesignItem[], options?: { margin?: number, removeSelection?: boolean }): Promise { if (!designItems || designItems.length === 0) { return null; } const designerCanvas = designItems[0].instanceServiceContainer.designerCanvas; const selectionService = designItems[0].instanceServiceContainer.selectionService; const oldZoomFactor = designerCanvas.zoomFactor; const oldPos = designerCanvas.canvasOffset; const oldSelected = selectionService.selectedElements; try { await Screenshot.enableScreenshots(); (designerCanvas).disableBackgroud(); designerCanvas.zoomFactor = 1; if (options?.removeSelection) { selectionService.setSelectedElements([]); } designerCanvas.canvasOffset = { x: 0, y: 0 }; await requestAnimationFramePromise(); let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; for (const item of designItems) { const rect = designerCanvas.getNormalizedElementCoordinates(item.element); minX = Math.min(minX, rect.x); minY = Math.min(minY, rect.y); maxX = Math.max(maxX, rect.x + rect.width); maxY = Math.max(maxY, rect.y + rect.height); } const margin = options?.margin ?? 0; minX -= margin; minY -= margin; maxX += margin; maxY += margin; const totalWidth = Math.ceil(maxX - minX); const totalHeight = Math.ceil(maxY - minY); // Use the outer viewport element for screenshots so that the crop // coordinates are not affected by the canvasOffset CSS transform. // Its dimensions reflect the actual visible capture area, which may // differ from canvas.offsetWidth when designerWidth/Height != 100%. const viewportElement = (designerCanvas).outercanvas2; const viewportW = viewportElement.offsetWidth; const viewportH = viewportElement.offsetHeight; // Inset by 1 CSS pixel on each edge to avoid border artifacts when stitching tiles const borderInset = 1; const effectiveW = viewportW - 2 * borderInset; const effectiveH = viewportH - 2 * borderInset; const numTilesX = Math.ceil(totalWidth / effectiveW); const numTilesY = Math.ceil(totalHeight / effectiveH); const dpr = window.devicePixelRatio || 1; const captureW = Math.ceil(viewportW * dpr); const captureH = Math.ceil(viewportH * dpr); const insetPx = Math.ceil(borderInset * dpr); const effectiveCaptureW = captureW - 2 * insetPx; const effectiveCaptureH = captureH - 2 * insetPx; const finalCanvas = document.createElement('canvas'); finalCanvas.width = Math.ceil(totalWidth * dpr); finalCanvas.height = Math.ceil(totalHeight * dpr); const finalCtx = finalCanvas.getContext('2d'); let sleepTime = 1000; for (let iy = 0; iy < numTilesY; iy++) { for (let ix = 0; ix < numTilesX; ix++) { const tileX = minX + ix * effectiveW; const tileY = minY + iy * effectiveH; // Shift by borderInset so the 1px border falls outside the effective region designerCanvas.canvasOffset = { x: -(tileX - borderInset), y: -(tileY - borderInset) }; // Wait for CSS transform to apply and video stream to capture the updated frame await sleep(sleepTime); sleepTime = 300; const dataUrl = await Screenshot.takeScreenshot( viewportElement, captureW, captureH ); const img = await this._loadImage(dataUrl); // Draw only the inner region, skipping the 1px border on all sides finalCtx.drawImage( img, insetPx, insetPx, effectiveCaptureW, effectiveCaptureH, ix * effectiveCaptureW, iy * effectiveCaptureH, effectiveCaptureW, effectiveCaptureH ); } } const blob = await new Promise(resolve => finalCanvas.toBlob(resolve, 'image/png')); const arrayBuffer = await blob.arrayBuffer(); return new Uint8Array(arrayBuffer); } finally { designerCanvas.zoomFactor = oldZoomFactor; designerCanvas.canvasOffset = oldPos; (designerCanvas).enableBackground(); if (options?.removeSelection) { selectionService.setSelectedElements(oldSelected); } } } private _loadImage(dataUrl: string): Promise { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = dataUrl; }); } } ================================================ FILE: packages/web-component-designer/src/elements/services/pngCreatorService/ElectronPngWriterService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { requestAnimationFramePromise, sleep } from "../../helper/Helper.js"; import { IPngCreatorService } from "./IPngCreatorService.js"; import { DesignerCanvas } from "../../widgets/designerView/designerCanvas.js"; /** * PNG writer service for Electron that uses BrowserWindow.capturePage() * instead of getDisplayMedia(). No recording rect is shown and no user * permission prompt is needed. * * The constructor accepts a capturePageFn callback that should invoke * BrowserWindow.capturePage() (via IPC from the renderer) and return * a data-URL of the captured image. * * Example usage from an Electron renderer process: * * const { ipcRenderer } = require('electron'); * * const capturePageFn = async (rect) => { * // main process calls: mainWindow.webContents.capturePage(rect) * return await ipcRenderer.invoke('capture-page', rect); * }; * * serviceContainer.register('pngCreatorService', * new ElectronPngWriterService(capturePageFn)); */ export class ElectronPngWriterService implements IPngCreatorService { private _capturePageFn: (rect: { x: number, y: number, width: number, height: number }) => Promise; /** * @param capturePageFn A function that captures a portion of the current * BrowserWindow and returns a data-URL (e.g. "data:image/png;base64,…"). * The rect is in CSS pixels relative to the page (matching Electron's * capturePage rectangle). */ constructor(capturePageFn: (rect: { x: number, y: number, width: number, height: number }) => Promise) { this._capturePageFn = capturePageFn; } async takePng(designItems: IDesignItem[], options?: { margin?: number, removeSelection?: boolean }): Promise { if (!designItems || designItems.length === 0) { return null; } const designerCanvas = designItems[0].instanceServiceContainer.designerCanvas; const selectionService = designItems[0].instanceServiceContainer.selectionService; const oldZoomFactor = designerCanvas.zoomFactor; const oldPos = designerCanvas.canvasOffset; const oldSelected = selectionService.selectedElements; try { (designerCanvas).disableBackgroud(); designerCanvas.zoomFactor = 1; if (options?.removeSelection) { selectionService.setSelectedElements([]); } designerCanvas.canvasOffset = { x: 0, y: 0 }; await requestAnimationFramePromise(); let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; for (const item of designItems) { const rect = designerCanvas.getNormalizedElementCoordinates(item.element); minX = Math.min(minX, rect.x); minY = Math.min(minY, rect.y); maxX = Math.max(maxX, rect.x + rect.width); maxY = Math.max(maxY, rect.y + rect.height); } const margin = options?.margin ?? 0; minX -= margin; minY -= margin; maxX += margin; maxY += margin; const totalWidth = Math.ceil(maxX - minX); const totalHeight = Math.ceil(maxY - minY); // Use the outer viewport element to determine the capture rectangle // so that coordinates are not affected by the canvasOffset CSS transform. // Its dimensions reflect the actual visible capture area, which may // differ from canvas.offsetWidth when designerWidth/Height != 100%. const viewportElement = (designerCanvas).outercanvas2; const viewportW = viewportElement.offsetWidth; const viewportH = viewportElement.offsetHeight; // Inset by 1 CSS pixel on each edge to avoid border artifacts when stitching tiles const borderInset = 1; const effectiveW = viewportW - 2 * borderInset; const effectiveH = viewportH - 2 * borderInset; const numTilesX = Math.ceil(totalWidth / effectiveW); const numTilesY = Math.ceil(totalHeight / effectiveH); const dpr = window.devicePixelRatio || 1; const captureW = Math.ceil(viewportW * dpr); const captureH = Math.ceil(viewportH * dpr); const insetPx = Math.ceil(borderInset * dpr); const effectiveCaptureW = captureW - 2 * insetPx; const effectiveCaptureH = captureH - 2 * insetPx; const finalCanvas = document.createElement('canvas'); finalCanvas.width = Math.ceil(totalWidth * dpr); finalCanvas.height = Math.ceil(totalHeight * dpr); const finalCtx = finalCanvas.getContext('2d'); for (let iy = 0; iy < numTilesY; iy++) { for (let ix = 0; ix < numTilesX; ix++) { const tileX = minX + ix * effectiveW; const tileY = minY + iy * effectiveH; // Shift by borderInset so the 1px border falls outside the effective region designerCanvas.canvasOffset = { x: -(tileX - borderInset), y: -(tileY - borderInset) }; // Wait for CSS transform to apply and the renderer to paint the new frame await requestAnimationFramePromise(); await sleep(100); const vpRect = viewportElement.getBoundingClientRect(); const dataUrl = await this._capturePageFn({ x: Math.round(vpRect.left), y: Math.round(vpRect.top), width: Math.round(vpRect.width), height: Math.round(vpRect.height) }); const img = await this._loadImage(dataUrl); // Draw only the inner region, skipping the 1px border on all sides finalCtx.drawImage( img, insetPx, insetPx, effectiveCaptureW, effectiveCaptureH, ix * effectiveCaptureW, iy * effectiveCaptureH, effectiveCaptureW, effectiveCaptureH ); } } const blob = await new Promise(resolve => finalCanvas.toBlob(resolve, 'image/png')); const arrayBuffer = await blob.arrayBuffer(); return new Uint8Array(arrayBuffer); } finally { designerCanvas.zoomFactor = oldZoomFactor; designerCanvas.canvasOffset = oldPos; (designerCanvas).enableBackground(); if (options?.removeSelection) { selectionService.setSelectedElements(oldSelected); } } } private _loadImage(dataUrl: string): Promise { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = dataUrl; }); } } ================================================ FILE: packages/web-component-designer/src/elements/services/pngCreatorService/IPngCreatorService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; export interface IPngCreatorService { takePng(designItems: IDesignItem[], options?: { margin?: number, removeSelection?: boolean }): Promise } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/DefaultEditorTypeService.ts ================================================ import { IEditorTypeService } from "./IEditorTypeService"; import { ColorInput } from "../../controls/ColorEditor.js"; export class DefaultEditorTypeService implements IEditorTypeService { getEditor(type: string, additional: { changedCallback: (newValue: any) => void, [key: string]: any }): { element: HTMLElement, getValue: () => any, setValue: (value: any) => void } { if (type === 'color' || type === 'css-color') { const input = document.createElement('node-projects-color-input') as ColorInput; input.addEventListener('change', () => additional.changedCallback(input.value)); return { element: input, getValue: () => input.value, setValue: (value: any) => { input.value = value; } }; } const input = document.createElement('input'); input.type = type; if (additional.min !== undefined) input.min = additional.min; if (additional.max !== undefined) input.max = additional.max; if (additional.step !== undefined) input.step = additional.step; input.addEventListener('change', (event) => additional.changedCallback((event.target as HTMLInputElement).value)); return { element: input, getValue: () => input.value, setValue: (value: any) => { input.value = value; } }; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/DefaultPropertyEditorTypesService.ts ================================================ import { IPropertyEditorTypesService } from './IPropertyEditorTypesService.js'; import { IProperty } from './IProperty.js'; import { IPropertyEditor } from './IPropertyEditor.js'; import { ColorPropertyEditor } from './propertyEditors/ColorPropertyEditor.js'; import { DatePropertyEditor } from './propertyEditors/DatePropertyEditor.js'; import { JsonPropertyEditor } from './propertyEditors/JsonPropertyEditor.js'; import { NumberPropertyEditor } from './propertyEditors/NumberPropertyEditor.js'; import { SelectPropertyEditor } from './propertyEditors/SelectPropertyEditor.js'; import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js'; import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js'; import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js'; import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js"; import { FontPropertyEditor } from './propertyEditors/FontPropertyEditor.js'; import { UnitPropertyEditor } from './propertyEditors/UnitPropertyEditor.js'; import { isUnitPropertyType } from './propertyEditors/UnitPropertyEditorConfig.js'; import { PropertyType } from './PropertyType.js'; import { CssPropertyEditor } from './propertyEditors/CssPropertyEditor.js'; export class DefaultPropertyEditorTypesService implements IPropertyEditorTypesService { getEditorForProperty(property: IProperty): IPropertyEditor { if (property.propertyType === PropertyType.cssValue) return new CssPropertyEditor(property, p => this._getEditorForProperty(p)); return this._getEditorForProperty(property); } private _getEditorForProperty(property: IProperty): IPropertyEditor { if (property.createEditor) return property.createEditor(property); if (isUnitPropertyType(property.type, property.name)) return new UnitPropertyEditor(property); switch (property.type) { case "json": { return new JsonPropertyEditor(property); } case "css-color": case "color": { return new ColorPropertyEditor(property); } case "font": { return new FontPropertyEditor(property); } case "date": { return new DatePropertyEditor(property); } case "number": { return new NumberPropertyEditor(property); } case "list": { return new SelectPropertyEditor(property); } case "enum": { return new SelectPropertyEditor(property); } case "boolean": { return new BooleanPropertyEditor(property); } case "img-list": { return new ImageButtonListPropertyEditor(property); } case "thickness": { return new ThicknessPropertyEditor(property); } case "string": default: { return new TextPropertyEditor(property); } } } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/IEditorTypeService.ts ================================================ export interface IEditorTypeService { getEditor(type: string, additional: { changedCallback: (newValue: any) => void }): { element: HTMLElement, getValue: () => any, setValue: (value: any) => void } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertiesService.ts ================================================ import { IProperty } from './IProperty.js'; import { IService } from '../IService.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { ValueType } from './ValueType.js'; import { BindingTarget } from '../../item/BindingTarget.js'; import { IBinding } from '../../item/IBinding.js'; import { IPropertyGroup } from './IPropertyGroup.js'; import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js'; export enum RefreshMode { none, full, fullOnValueChange, fullOnClassChange } export interface IPropertiesService extends IService { getRefreshMode(designItem: IDesignItem): RefreshMode; isHandledElement(designItem: IDesignItem): boolean; getProperties(designItem: IDesignItem): Promise; getProperty(designItem: IDesignItem, name: string): Promise; getBinding(designItems: IDesignItem[], property: IProperty): IBinding getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget; getPropertyNameSuggestions?(designItems: IDesignItem[]): string[]; setValue(designItems: IDesignItem[], property: IProperty, value: any): Promise; previewValue?(designItems: IDesignItem[], property: IProperty, value: any): Promise; removePreviewValue?(designItems: IDesignItem[], property: IProperty): Promise; clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'); isSet(designItems: IDesignItem[], property: IProperty): ValueType; getValue(designItems: IDesignItem[], property: IProperty): any; getUnsetValue(designItems: IDesignItem[], property: IProperty): any; getContextMenu(designItems: IDesignItem[], property: IProperty): IContextMenuItem[]; } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/IProperty.ts ================================================ import { IPropertiesService } from './IPropertiesService.js'; import { IPropertyEditor } from './IPropertyEditor.js'; import { PropertyType } from './PropertyType.js'; import type { IDesignItem } from '../../item/IDesignItem.js'; export interface IProperty { name: string; renamable?: boolean; displayName?: string; // nused in property grid hideLabel?: boolean; // property grid renders editor across the label and editor columns propertyName?: string; // normaly camelCased name of property (also used for css properties) group?: string; attributeName?: string; // normaly dash seperated name of property description?: string; type?: 'addNew' | 'json' | 'color' | 'date' | 'number' | 'list' | 'enum' | 'boolean' | 'img-lis' | 'thickness' | 'css-length' | 'length' | 'angle' | 'time' | 'frequency' | 'flex' | 'resolution' | 'string' | string; // -> string, number, list, color, thickness, css numeric types default?: any; //what was this for? remove??? min?: number; max?: number; step?: number; readonly?: boolean; values?: string[]; // list selectable values units?: string[]; // selectable units for editors that support unit changes unitSteps?: Record; numericValueDecimalPlaces?: number; // rounding used by numeric unit conversions numericValueConverter?: (value: number, fromUnit: string, toUnit: string, property: IProperty, numericType: string, numberText?: string, rawValue?: string, designItems?: IDesignItem[]) => string | number | null | undefined; enumValues?: [name: string, value: string | number][]; // list selectable enum values createEditor?: (property: IProperty) => IPropertyEditor; value?: any; service: IPropertiesService; defaultValue?: any; example?: string; propertyType: PropertyType; // => needed for pg-grid. for example property only types can only be used for binding, css property types could never bind two way... } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyEditor.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IProperty } from './IProperty.js'; import { ValueType } from './ValueType.js'; export interface IPropertyEditor { readonly element: Element; property: IProperty; designItems: IDesignItem[]; designItemsChanged(designItems: IDesignItem[]); refreshValue(valueType: ValueType, value: any); refreshValueWithoutNotification(valueType: ValueType, value: any); } export interface IPropertyEditorT extends IPropertyEditor { readonly element: T; property: IProperty; designItems: IDesignItem[]; designItemsChanged(designItems: IDesignItem[]); refreshValue(valueType: ValueType, value: any); refreshValueWithoutNotification(valueType: ValueType, value: any); } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyEditorTypesService.ts ================================================ import { IProperty } from './IProperty.js'; import { IPropertyEditor } from './IPropertyEditor.js'; export interface IPropertyEditorTypesService { getEditorForProperty(property: IProperty): IPropertyEditor | null; } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyGroup.ts ================================================ import { IProperty } from './IProperty.js'; export interface IPropertyGroup { name: string; description?: string; properties: IProperty[] } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyGroupsService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IPropertiesService } from './IPropertiesService.js'; export interface IPropertyGroupsService { getPropertygroups(designItems: IDesignItem[]): { name: string, propertiesService: IPropertiesService }[] } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/PropertyGroupsService.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { NodeType } from '../../item/NodeType.js'; import { IPropertiesService } from './IPropertiesService.js'; import { IPropertyGroupsService } from './IPropertyGroupsService.js'; import { AttachedPropertiesService } from './services/AttachedPropertiesService.js'; import { AttributesPropertiesService } from './services/AttributesPropertiesService.js'; import { CommonPropertiesService } from './services/CommonPropertiesService.js'; import { CssCurrentPropertiesService } from './services/CssCurrentPropertiesService.js'; import { CssCustomPropertiesService } from './services/CssCustomPropertiesService.js'; import { CssPropertiesService } from './services/CssPropertiesService.js'; export class PropertyGroupsService implements IPropertyGroupsService { protected _attachedPropertiesService = new AttachedPropertiesService(); protected _rootPgList: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'styles', propertiesService: new CssCurrentPropertiesService() }, { name: 'css vars', propertiesService: new CssCustomPropertiesService() }, { name: 'layout', propertiesService: new CssPropertiesService("layout") }, ]; protected _pgList: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'properties', propertiesService: null }, { name: 'attached', propertiesService: this._attachedPropertiesService }, { name: 'attributes', propertiesService: new AttributesPropertiesService() }, { name: 'common', propertiesService: new CommonPropertiesService() }, { name: 'styles', propertiesService: new CssCurrentPropertiesService() }, { name: 'css vars', propertiesService: new CssCustomPropertiesService() }, { name: 'layout', propertiesService: new CssPropertiesService("layout") }, ]; protected _svgPgList: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'properties', propertiesService: null }, { name: 'attached', propertiesService: this._attachedPropertiesService }, { name: 'attributes', propertiesService: new AttributesPropertiesService() }, { name: 'common', propertiesService: new CommonPropertiesService() }, { name: 'styles', propertiesService: new CssCurrentPropertiesService() }, { name: 'css vars', propertiesService: new CssCustomPropertiesService() }, { name: 'layout', propertiesService: new CssPropertiesService("layout") }, { name: 'svg', propertiesService: new CssPropertiesService("svg") }, ]; protected _svgChildPgList: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'properties', propertiesService: null }, { name: 'attached', propertiesService: this._attachedPropertiesService }, { name: 'attributes', propertiesService: new AttributesPropertiesService() }, { name: 'common', propertiesService: new CommonPropertiesService() }, { name: 'styles', propertiesService: new CssCurrentPropertiesService() }, { name: 'css vars', propertiesService: new CssCustomPropertiesService() }, { name: 'layout', propertiesService: new CssPropertiesService("layoutSvgChild") }, ]; protected _gridChild: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") }, ]; protected _grid: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'grid', propertiesService: new CssPropertiesService("grid") }, ]; protected _flexChild: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") }, ]; protected _flex: { name: string; propertiesService: IPropertiesService; }[] = [ { name: 'flex', propertiesService: new CssPropertiesService("flex") }, ]; getPropertygroups(designItems: IDesignItem[]): { name: string; propertiesService: IPropertiesService; }[] { if (designItems == null || designItems.length == 0) return []; if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment) return []; if (designItems[0].isRootItem) { const style = designItems[0].getComputedStyle(); let lst = this._rootPgList; if (style.display.includes('grid')) lst = [...lst, ...this._grid]; else if (style.display.includes('flex')) lst = [...lst, ...this._flex]; return lst; } this._svgChildPgList[0].propertiesService = this._svgPgList[0].propertiesService = this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0])); let lst = this._pgList; if (designItems[0].element instanceof designItems[0].window.SVGElement) { if (designItems[0].element instanceof designItems[0].window.SVGSVGElement) { lst = this._svgPgList; } else { lst = this._svgChildPgList; } } const style = designItems[0].getComputedStyle(); if (style.display.includes('grid')) lst = [...lst, ...this._grid]; else if (style.display.includes('flex')) lst = [...lst, ...this._flex]; if (designItems[0].parent) { const parentStyle = designItems[0].parent.getComputedStyle(); if (parentStyle.display.includes('grid')) lst = [...lst, ...this._gridChild]; else if (parentStyle.display.includes('flex')) lst = [...lst, ...this._flexChild]; } return lst; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/PropertyMutationHandling.ts ================================================ export type AttributeMutationRecordLike = Pick & { target: unknown; }; type AttributeTargetLike = { getAttribute?: (qualifiedName: string) => string | null; }; function getMutationAttributeValue(mutation: AttributeMutationRecordLike): string | null { const target = mutation.target as AttributeTargetLike; if (typeof target.getAttribute !== 'function' || !mutation.attributeName) return null; return target.getAttribute(mutation.attributeName); } function getStyleDeclarationNames(styleText: string | null, filter?: (name: string) => boolean): Set { const names = new Set(); if (!styleText) return names; let name = ''; let inValue = false; let quote: string = null; for (let i = 0; i < styleText.length; i++) { const char = styleText[i]; if (quote) { if (char === '\\') { i++; continue; } if (char === quote) quote = null; continue; } if (char === '\'' || char === '"') { quote = char; continue; } if (!inValue) { if (char === ':') { inValue = true; continue; } if (char === ';') { name = ''; continue; } name += char; continue; } if (char === ';') { const trimmedName = name.trim(); if (trimmedName && (!filter || filter(trimmedName))) names.add(trimmedName); name = ''; inValue = false; } } if (inValue) { const trimmedName = name.trim(); if (trimmedName && (!filter || filter(trimmedName))) names.add(trimmedName); } else { const trimmedName = name.trim(); if (!name) return names; if (!filter || filter(trimmedName)) names.add(trimmedName); } return names; } function areSetsEqual(left: Set, right: Set): boolean { if (left.size !== right.size) return false; for (const value of left) { if (!right.has(value)) return false; } return true; } export function didAttributePresenceChange(mutation: AttributeMutationRecordLike): boolean { if (mutation.type !== 'attributes' || !mutation.attributeName) return false; const currentValue = getMutationAttributeValue(mutation); return mutation.oldValue == null || currentValue == null; } export function didStyleDeclarationSetChange(mutation: AttributeMutationRecordLike, filter?: (name: string) => boolean): boolean { if (mutation.type !== 'attributes' || mutation.attributeName !== 'style') return false; const currentValue = getMutationAttributeValue(mutation); const oldNames = getStyleDeclarationNames(mutation.oldValue, filter); const currentNames = getStyleDeclarationNames(currentValue, filter); return !areSetsEqual(oldNames, currentNames); } export function didCustomStyleDeclarationSetChange(mutation: AttributeMutationRecordLike): boolean { return didStyleDeclarationSetChange(mutation, name => name.startsWith('--')); } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/PropertyType.ts ================================================ export enum PropertyType { property = 'property', attribute = 'attribute', propertyAndAttribute = 'propertyAndAttribute', cssValue = 'cssvalue', complex = 'complex', // editor is special and could write multiple properties add = 'add' // editor allows to add a new one } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/ValueType.ts ================================================ export enum ValueType { 'none' = 'none', 'all' = 'all', 'some' = 'some', 'bound' = 'bound', 'fromStylesheet' = 'fromStylesheet' } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/AnglePropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class AnglePropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); let element = document.createElement('input'); element.type = "number"; if (property.readonly) element.readOnly = true; element.min = property.min ?? '0'; element.max = property.max ?? '360'; element.step = property.step; element.onchange = (e) => this._valueChanged(element.value == '' ? null : (element.valueAsNumber + 'deg')); this.element = element; } refreshValue(valueType: ValueType, value: any) { this.element.valueAsNumber = value === undefined ? null : parseFloat(value); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/BasePropertyEditor.ts ================================================ import { IPropertyEditorT } from '../IPropertyEditor.js'; import { IProperty } from '../IProperty.js'; import { ValueType } from '../ValueType.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; export abstract class BasePropertyEditor implements IPropertyEditorT { public element: T; public property: IProperty; public designItems: IDesignItem[]; protected disableChangeNotification: boolean = false; constructor(property: IProperty) { this.property = property; } protected async _previewValueChanged(newValue) { if (!this.disableChangeNotification) { if (this.designItems && this.designItems.length) await this.property.service.previewValue?.(this.designItems, this.property, newValue); } } protected async _removePreviewValue() { if (!this.disableChangeNotification) { if (this.designItems && this.designItems.length) await this.property.service.removePreviewValue?.(this.designItems, this.property); } } protected async _valueChanged(newValue) { if (!this.disableChangeNotification) { if (this.designItems && this.designItems.length) { const cg = this.designItems[0].openGroup("set property: " + this.property.name); if (newValue == null) this.property.service.clearValue(this.designItems, this.property, 'value'); else await this.property.service.setValue(this.designItems, this.property, newValue); cg.commit(); } } } public designItemsChanged(designItems: IDesignItem[]) { this.designItems = designItems; } abstract refreshValue(valueType: ValueType, value: any); public refreshValueWithoutNotification(valueType: ValueType, value: any) { if (valueType == ValueType.none) this.element.classList.add('unset-value'); else this.element.classList.remove('unset-value'); this.disableChangeNotification = true; try { this.refreshValue(valueType, value); } catch (err) { console.error(err); } this.disableChangeNotification = false; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class BooleanPropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); let element = document.createElement('input'); element.type = "checkbox"; if (property.readonly) element.readOnly = true; element.onchange = (e) => this._valueChanged(element.checked); this.element = element; } refreshValue(valueType: ValueType, value: any) { this.element.checked = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ColorPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; import { ColorInput } from '../../../controls/ColorEditor.js'; export class ColorPropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); let element = document.createElement('node-projects-color-input') as ColorInput; if (property.readonly) element.readOnly = true; element.onchange = async (e) => { await this.property.service.removePreviewValue?.(this.designItems, this.property); this._valueChanged(element.value); }; element.oninput = async (e) => { await this.property.service.previewValue?.(this.designItems, this.property, element.value); }; this.element = element; } refreshValue(valueType: ValueType, value: any) { if (!value) this.element.value = 'rgba(0, 0, 0, 1)'; else this.element.value = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/CssPropertyEditor.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { appendCssImportant, splitCssImportant } from '../../../helper/CssImportant.js'; import { IPropertiesService } from '../IPropertiesService.js'; import { IProperty } from '../IProperty.js'; import { IPropertyEditor } from '../IPropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class CssPropertyEditor implements IPropertyEditor { public element: HTMLDivElement; public property: IProperty; public designItems: IDesignItem[]; private _innerEditor: IPropertyEditor; private _importantButton: HTMLButtonElement; private _value: any; private _disableChangeNotification = false; constructor(property: IProperty, createInnerEditor: (property: IProperty) => IPropertyEditor) { this.property = property; const innerProperty = { ...property, service: this._createServiceProxy(property.service) }; this._innerEditor = createInnerEditor(innerProperty); this._importantButton = document.createElement('button'); this._importantButton.type = 'button'; this._importantButton.textContent = '!'; this._importantButton.title = '!important'; this._importantButton.disabled = property.readonly === true; this._importantButton.style.width = '18px'; this._importantButton.style.height = '18px'; this._importantButton.style.margin = '-2px 0 0 -2px'; this._importantButton.style.padding = '0'; this._importantButton.style.border = '1px solid var(--input-border-color, #596c7a)'; this._importantButton.style.background = 'transparent'; this._importantButton.style.color = 'lightslategray'; this._importantButton.style.fontWeight = 'bold'; this._importantButton.style.lineHeight = '16px'; this._importantButton.style.cursor = 'pointer'; this._importantButton.onclick = async () => { if (this._disableChangeNotification || !this.designItems?.length || this._value == null || this._value === '') return; this._setImportant(!this._isImportant()); await this.property.service.setValue(this.designItems, this.property, this._appendImportant(this._value)); this.designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this.designItems); }; this.element = document.createElement('div'); this.element.style.display = 'grid'; this.element.style.gridTemplateColumns = 'minmax(0, 1fr) 18px'; this.element.style.alignItems = 'center'; this.element.style.gap = '2px'; this.element.appendChild(this._innerEditor.element); this.element.appendChild(this._importantButton); } private _createServiceProxy(service: IPropertiesService): IPropertiesService { const proxy = Object.create(service); proxy.setValue = async (designItems, property, value) => service.setValue(designItems, this.property, this._appendImportant(value)); proxy.previewValue = async (designItems, property, value) => service.previewValue?.(designItems, this.property, this._appendImportant(value)); proxy.removePreviewValue = async (designItems, property) => service.removePreviewValue?.(designItems, this.property); proxy.clearValue = (designItems, property, clearType) => service.clearValue(designItems, this.property, clearType); return proxy; } private _appendImportant(value: any) { if (typeof value !== 'string') return value; this._value = value; return appendCssImportant(value, this._isImportant()); } public designItemsChanged(designItems: IDesignItem[]) { this.designItems = designItems; this._innerEditor.designItemsChanged(designItems); } private _refreshImportant(valueType: ValueType, value: any) { const parsedValue = typeof value === 'string' ? splitCssImportant(value) : { value, important: false }; this._value = parsedValue.value; this._setImportant(parsedValue.important); this._importantButton.disabled = this.property.readonly === true || valueType == ValueType.none || parsedValue.value == null || parsedValue.value === ''; this._importantButton.style.cursor = this._importantButton.disabled ? 'default' : 'pointer'; } private _isImportant() { return this._importantButton.dataset.checked === 'true'; } private _setImportant(important: boolean) { this._importantButton.dataset.checked = important ? 'true' : 'false'; this._importantButton.style.background = important ? 'orange' : 'transparent'; this._importantButton.style.color = important ? 'black' : 'lightslategray'; } refreshValue(valueType: ValueType, value: any) { this._refreshImportant(valueType, value); this._innerEditor.refreshValue(valueType, this._value); } public refreshValueWithoutNotification(valueType: ValueType, value: any) { if (valueType == ValueType.none) this.element.classList.add('unset-value'); else this.element.classList.remove('unset-value'); this._disableChangeNotification = true; try { this._refreshImportant(valueType, value); this._innerEditor.refreshValueWithoutNotification(valueType, this._value); } catch (err) { console.error(err); } this._disableChangeNotification = false; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/DatePropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class DatePropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); let element = document.createElement('input'); element.type = "datetime-local"; if (property.readonly) element.readOnly = true; element.onchange = (e) => this._valueChanged(element.value); this.element = element; } refreshValue(valueType: ValueType, value: any) { if (!value) this.element.value = null; else this.element.value = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/DefaultPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; import { ServiceContainer } from '../../ServiceContainer.js'; import { IEditorTypeService } from '../IEditorTypeService.js'; export class TextPropertyEditor extends BasePropertyEditor { editor: ReturnType; constructor(property: IProperty, serviceContainer: ServiceContainer) { super(property); const editor = serviceContainer.forSomeServicesTillResult('editorTypeService', x => x.getEditor(property.type, { changedCallback: (newValue) => this._valueChanged(newValue) })); this.editor = editor; this.element = editor.element; } refreshValue(valueType: ValueType, value: any) { this.editor.setValue(value); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/FontPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class FontPropertyEditor extends BasePropertyEditor { static fontList: string[]; constructor(property: IProperty) { super(property); let element = document.createElement("select"); if (property.readonly) element.disabled = true; this.element = element; FontPropertyEditor.addFontsToSelect(element); this.element.onchange = (e) => this._valueChanged(this.element.value); } static addFontsToSelect(select: HTMLSelectElement) { if (FontPropertyEditor.fontList) { FontPropertyEditor.parseFontList(select); //@ts-ignore } else if (window.queryLocalFonts) { //@ts-ignore window.queryLocalFonts().then(x => { //@ts-ignore FontPropertyEditor.fontList = [...new Set(x.map(y => y.family))]; FontPropertyEditor.parseFontList(select); }) } else { FontPropertyEditor.fontList = ["Verdana", "Arial", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"]; FontPropertyEditor.parseFontList(select); } } private static parseFontList(select: HTMLSelectElement) { for (let v of FontPropertyEditor.fontList) { let option = document.createElement("option"); option.value = v; option.text = v; select.appendChild(option); } } refreshValue(valueType: ValueType, value: any) { this.element.value = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js"; import { PropertiesHelper } from "../services/PropertiesHelper.js"; import { assetsPath } from "../../../../Constants.js"; export class ImageButtonListPropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); const selector = new ImageButtonListSelector() selector.property = property.name; selector.unsetValue = property.defaultValue; const propName = PropertiesHelper.camelToDashCase(property.name); if (property.type == 'enum') { for (let v of property.enumValues) { let button = document.createElement("button"); button.dataset.value = v[1]; let img = document.createElement("img"); img.title = v[1]; img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v[1] + '-icon.svg'; button.appendChild(img); selector.appendChild(button); } } else { for (let v of property.values) { let button = document.createElement("button"); button.dataset.value = v; let img = document.createElement("img"); img.title = v; img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v + '-icon.svg'; button.appendChild(img); selector.appendChild(button); } } selector.addEventListener('value-changed', (e) => this._valueChanged(selector.value)); this.element = selector; } refreshValue(valueType: ValueType, value: any) { this.element.value = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; import { html } from '@node-projects/base-custom-webcomponent'; export class JsonPropertyEditor extends BasePropertyEditor { static template = html`
`; _input: HTMLInputElement; constructor(property: IProperty) { super(property); let el = JsonPropertyEditor.template.content.cloneNode(true); this._input = (el).getElementById('input') if (property.readonly) this._input.readOnly = true; this._input.onchange = (e) => this._valueChanged(this._input.value); this.element = el; } refreshValue(valueType: ValueType, value: any) { this._input.value = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.ts ================================================ import { html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent'; export class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend { static override template = html`
`; constructor() { super(); //codeview } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class NumberPropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); let element = document.createElement('input'); element.type = "number"; if (property.readonly) element.readOnly = true; element.min = property.min; element.max = property.max; element.step = property.step; element.onchange = (e) => this._valueChanged(element.value == '' ? null : element.valueAsNumber); this.element = element; } refreshValue(valueType: ValueType, value: any) { this.element.value = value === undefined ? null : value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/SelectPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class SelectPropertyEditor extends BasePropertyEditor { elementSelect: HTMLSelectElement; elementInput: HTMLInputElement; constructor(property: IProperty) { super(property); let element = document.createElement("div"); let elementSel = document.createElement("select"); if (property.type == 'enum') { for (let v of property.enumValues) { let option = document.createElement("option"); option.value = v[1]; option.text = v[0]; elementSel.appendChild(option); } } else { for (let v of property.values) { let option = document.createElement("option"); option.value = v; option.text = v; elementSel.appendChild(option); } } if (property.readonly) elementSel.disabled = true; elementSel.onchange = (e) => this._valueChanged(elementSel.value); let elementInput = document.createElement("input"); elementInput.style.display = 'none' elementInput.onchange = (e) => this._valueChanged(elementInput.value); this.elementSelect = elementSel; this.elementInput = elementInput; element.appendChild(this.elementSelect); element.appendChild(this.elementInput); this.element = element; } refreshValue(valueType: ValueType, value: any) { this.elementSelect.style.display = 'block'; this.elementInput.style.display = 'none'; this.elementSelect.value = value; if (this.elementSelect.value != value && value) { this.elementInput.value = value; this.elementSelect.style.display = 'none'; this.elementInput.style.display = 'block'; } } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/TextPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; export class TextPropertyEditor extends BasePropertyEditor { private static _nextListId = 0; constructor(property: IProperty) { super(property); let element = document.createElement('input'); element.type = "text"; if (property.readonly) element.readOnly = true; if (property.values?.length) { const listId = `wcd-text-property-editor-values-${TextPropertyEditor._nextListId++}`; const datalist = document.createElement('datalist'); datalist.id = listId; for (const value of property.values) { const option = document.createElement('option'); option.value = value; datalist.appendChild(option); } element.setAttribute('list', listId); element.appendChild(datalist); } element.onchange = (e) => this._valueChanged(element.value); element.onfocus = (e) => { element.selectionStart = 0; element.selectionEnd = element.value?.length; } this.element = element; } refreshValue(valueType: ValueType, value: any) { if (value == null) this.element.value = ""; else this.element.value = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.ts ================================================ import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; import { ThicknessEditor } from '../../../controls/ThicknessEditor.js'; export class ThicknessPropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); const selector = new ThicknessEditor() selector.property = property.name; selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue)); this.element = selector; } refreshValue(valueType: ValueType, value: any) { this.element.valueLeft = value; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitPropertyEditor.ts ================================================ import { NumericStyleInput } from '../../../controls/NumericStyleInput.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IProperty } from '../IProperty.js'; import { BasePropertyEditor } from './BasePropertyEditor.js'; import { ValueType } from '../ValueType.js'; import { getCssNumericEditorConfig } from './UnitPropertyEditorConfig.js'; export class UnitPropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); const config = getCssNumericEditorConfig(property); const selector = new NumericStyleInput(); selector.units = config?.units ?? property.units ?? []; selector.fixedValues = config?.fixedValues ?? property.values; selector.unitValueConverter = args => config?.convertValue({ ...args, designItems: this.designItems }); selector.unitSteps = config?.unitSteps ?? property.unitSteps ?? {}; selector.step = property.step; selector.min = property.min; selector.max = property.max; selector.readOnly = property.readonly; selector.valueChanged.on(async (e) => this._valueChanged(e.newValue === '' ? null : e.newValue)); selector.valuePreviewChanged.on(async (e) => this._previewValueChanged(e.newValue === '' ? null : e.newValue)); selector.valuePreviewFinished.on(async (e) => { await this._removePreviewValue(); if (e.wasCancelled) return; await this._valueChanged(e.newValue === '' ? null : e.newValue); }); this.element = selector; } public override designItemsChanged(designItems: IDesignItem[]) { super.designItemsChanged(designItems); } refreshValue(valueType: ValueType, value: any) { this.element.value = value == null ? '' : String(value); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitPropertyEditorConfig.ts ================================================ import type { IDesignItem } from '../../../item/IDesignItem.js'; import type { IProperty } from '../IProperty.js'; export type UnitPropertyType = 'css-length' | 'css-angle' | 'css-time' | 'css-frequency' | 'css-flex' | 'css-resolution' | 'css-scale' | 'svg-length'; export type UnitConversionResult = string | number | null | undefined; export type UnitConversionContext = { property: IProperty, numericType: UnitPropertyType, designItems?: IDesignItem[], value: number, numberText: string, rawValue: string, fromUnit: string, toUnit: string }; export type UnitEditorConfig = { numericType: UnitPropertyType, units: string[], fixedValues: string[], unitSteps: Record, convertValue: (context: Omit) => string }; const cssNumericKeywordValues = ['initial', 'inherit', 'unset']; export const defaultCssNumericUnits: Record = { "css-length": ['px', '%', 'em', 'rem', 'vw', 'vh', 'vmin', 'vmax', 'pt', 'pc', 'in', 'cm', 'mm', 'q', 'ch', 'ex'], "css-angle": ['deg', 'grad', 'rad', 'turn'], "css-time": ['ms', 's'], "css-frequency": ['hz', 'khz'], "css-flex": ['fr'], "css-resolution": ['dpi', 'dpcm', 'dppx', 'x'], "css-scale": ['', '%'], "svg-length": ['', '%'] }; const editorTypes = Object.keys(defaultCssNumericUnits) export const defaultCssNumericUnitSteps: Record> = { "css-length": { em: 0.1, rem: 0.1, 'in': 0.01, cm: 0.1, ch: 0.1, ex: 0.1 }, "css-angle": { rad: 0.01, turn: 0.1 }, "css-time": { ms: 10, s: 0.1 }, "css-frequency": { khz: 0.1 }, "css-flex": { fr: 0.1 }, "css-resolution": { dppx: 0.1, x: 0.1 }, "css-scale": { '': 0.1, '%': 10 }, "svg-length": { '': 1, '%': 10 } }; const absoluteLengthUnitInPx = new Map([ ['px', 1], ['in', 96], ['cm', 96 / 2.54], ['mm', 96 / 25.4], ['q', 96 / 101.6], ['pt', 96 / 72], ['pc', 16] ]); const angleUnitInDeg = new Map([ ['deg', 1], ['grad', 0.9], ['rad', 180 / Math.PI], ['turn', 360] ]); const timeUnitInMs = new Map([ ['ms', 1], ['s', 1000] ]); const frequencyUnitInHz = new Map([ ['hz', 1], ['khz', 1000] ]); const resolutionUnitInDpi = new Map([ ['dpi', 1], ['dpcm', 2.54], ['dppx', 96], ['x', 96] ]); const horizontalPercentageReferencePropertyNames = new Set([ 'width', 'minWidth', 'maxWidth', 'inlineSize', 'minInlineSize', 'maxInlineSize', 'left', 'right', 'columnGap', 'gap', 'flexBasis', 'perspective' ]); const verticalPercentageReferencePropertyNames = new Set([ 'height', 'minHeight', 'maxHeight', 'top', 'bottom', 'blockSize', 'minBlockSize', 'maxBlockSize', 'rowGap' ]); const horizontalMeasuredSizePropertyNames = new Set([ 'width', 'minWidth', 'maxWidth', 'inlineSize', 'minInlineSize', 'maxInlineSize' ]); const verticalMeasuredSizePropertyNames = new Set([ 'height', 'minHeight', 'maxHeight', 'blockSize', 'minBlockSize', 'maxBlockSize' ]); function formatNumericStyleInputNumber(value: number, maxDecimalPlaces: number = 4): string { if (!Number.isFinite(value)) return '0'; const factor = 10 ** Math.max(0, maxDecimalPlaces); const roundedValue = Math.round(value * factor) / factor; return Object.is(roundedValue, -0) ? '0' : `${roundedValue}`; } function combineNumericStyleInputValue(numberText: string, unit: string): string { const trimmedNumberText = numberText?.trim() ?? ''; if (!trimmedNumberText) return ''; return trimmedNumberText + (unit ?? ''); } function parseNumericStyleInputValue(value?: string | null) { const text = value?.trim() ?? ''; if (!text) return { kind: 'empty' } as const; const match = text.match(/^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(?:([a-z%]+))?$/i); if (!match) return { kind: 'text', text } as const; const numericValue = Number(match[1]); if (Number.isNaN(numericValue)) return { kind: 'text', text } as const; return { kind: 'numeric' as const, numberText: match[1], value: numericValue, unit: match[2]?.toLowerCase() ?? '' }; } function dashToCamelCase(text?: string): string { return text?.replace(/-([a-z])/g, (_, char: string) => char.toUpperCase()) ?? ''; } function camelToDashCase(text?: string): string { return text?.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`) ?? ''; } function getNumericValueDecimalPlaces(context: UnitConversionContext): number { return context.property.numericValueDecimalPlaces ?? (context.fromUnit === '%' || context.toUnit === '%' ? 2 : 4); } function normalizeConvertedValue(result: UnitConversionResult, toUnit: string, decimalPlaces: number): string | null { if (result == null) return null; if (typeof result === 'number') return combineNumericStyleInputValue(formatNumericStyleInputNumber(result, decimalPlaces), toUnit); return result; } function getPrimaryElement(context: UnitConversionContext): HTMLElement | null { return context.designItems?.[0]?.element ?? null; } function isHTMLElementLike(value: unknown): value is HTMLElement { if (!value) return false; if (typeof HTMLElement !== 'undefined' && value instanceof HTMLElement) return true; return typeof (value as { getBoundingClientRect?: unknown }).getBoundingClientRect === 'function'; } function getParentReferenceElement(element: HTMLElement): HTMLElement | null { if (!element) return null; if (element.parentElement) return element.parentElement; if (element.assignedSlot) return element.assignedSlot; const rootNode = element.getRootNode?.(); const host = (rootNode as { host?: unknown })?.host; if (isHTMLElementLike(host)) return host; const ownerDocument = element.ownerDocument; return ownerDocument?.body ?? ownerDocument?.documentElement ?? null; } function getComputedPixelValue(value: string | null | undefined): number | null { const numericValue = parseFloat(value ?? ''); if (Number.isNaN(numericValue)) return null; return numericValue; } function readComputedCssValue(context: UnitConversionContext): string | null { if (typeof getComputedStyle !== 'function') return null; const element = getPrimaryElement(context); if (!element) return null; const computedStyle = getComputedStyle(element); const propertyName = context.property.propertyName ?? context.property.name; if (!propertyName) return null; const getPropertyValue = typeof (computedStyle as CSSStyleDeclaration & { getPropertyValue?: unknown }).getPropertyValue === 'function' ? (name: string) => computedStyle.getPropertyValue(name) : (_name: string) => ''; if (propertyName.startsWith('--')) return getPropertyValue(propertyName)?.trim() ?? null; const dashName = propertyName.includes('-') ? propertyName : camelToDashCase(propertyName); const directValue = getPropertyValue(dashName)?.trim(); if (directValue) return directValue; const camelName = dashToCamelCase(propertyName); return (computedStyle as CSSStyleDeclaration & Record)[camelName]?.trim() ?? null; } function getConvertibleNumericContext(context: UnitConversionContext): UnitConversionContext | null { const parsedRawValue = parseNumericStyleInputValue(context.rawValue); if (parsedRawValue.kind === 'numeric') { return { ...context, value: parsedRawValue.value, numberText: parsedRawValue.numberText, fromUnit: parsedRawValue.unit || context.fromUnit, rawValue: combineNumericStyleInputValue(parsedRawValue.numberText, parsedRawValue.unit) }; } const computedValue = readComputedCssValue(context); const parsedComputedValue = parseNumericStyleInputValue(computedValue); if (parsedComputedValue.kind !== 'numeric') { if (context.numericType !== 'css-length') return null; const measuredSizeInPx = getMeasuredSizeInPx(context); if (measuredSizeInPx == null) return null; const numberText = formatNumericStyleInputNumber(measuredSizeInPx); return { ...context, value: measuredSizeInPx, numberText, fromUnit: 'px', rawValue: combineNumericStyleInputValue(numberText, 'px') }; } return { ...context, value: parsedComputedValue.value, numberText: parsedComputedValue.numberText, fromUnit: parsedComputedValue.unit, rawValue: combineNumericStyleInputValue(parsedComputedValue.numberText, parsedComputedValue.unit) }; } function getViewportUnitInPx(unit: string): number | null { if (typeof window === 'undefined') return null; switch (unit) { case 'vw': return window.innerWidth / 100; case 'vh': return window.innerHeight / 100; case 'vmin': return Math.min(window.innerWidth, window.innerHeight) / 100; case 'vmax': return Math.max(window.innerWidth, window.innerHeight) / 100; default: return null; } } function getFontSizeReferenceInPx(context: UnitConversionContext, relativeToParent: boolean): number | null { if (typeof getComputedStyle !== 'function') return null; const element = getPrimaryElement(context); if (!element) return null; const referenceElement = relativeToParent ? (getParentReferenceElement(element) ?? element) : element; return getComputedPixelValue(getComputedStyle(referenceElement).fontSize); } function getRootFontSizeInPx(): number | null { if (typeof getComputedStyle !== 'function' || typeof document === 'undefined') return null; return getComputedPixelValue(getComputedStyle(document.documentElement).fontSize); } function getPercentageReferenceInPx(context: UnitConversionContext): number | null { if (typeof getComputedStyle !== 'function') return null; const element = getPrimaryElement(context); if (!element) return null; const propertyName = dashToCamelCase(context.property.propertyName ?? context.property.name); if (propertyName === 'fontSize') return getFontSizeReferenceInPx(context, true); if (propertyName === 'lineHeight') return getFontSizeReferenceInPx(context, false); const referenceElement = getParentReferenceElement(element) ?? element; const rect = referenceElement.getBoundingClientRect?.(); if (!rect) return null; if (verticalPercentageReferencePropertyNames.has(propertyName)) return rect.height; if (horizontalPercentageReferencePropertyNames.has(propertyName)) return rect.width; return rect.width; } function getMeasuredSizeInPx(context: UnitConversionContext): number | null { const element = getPrimaryElement(context); if (!element) return null; const rect = element.getBoundingClientRect?.(); if (!rect) return null; const propertyName = dashToCamelCase(context.property.propertyName ?? context.property.name); if (horizontalMeasuredSizePropertyNames.has(propertyName)) return rect.width; if (verticalMeasuredSizePropertyNames.has(propertyName)) return rect.height; return null; } function getLengthUnitSizeInPx(context: UnitConversionContext, unit: string): number | null { const normalizedUnit = unit?.toLowerCase() ?? ''; if (!normalizedUnit) return null; const absoluteUnitSize = absoluteLengthUnitInPx.get(normalizedUnit); if (absoluteUnitSize != null) return absoluteUnitSize; if (normalizedUnit === '%') { const percentageReference = getPercentageReferenceInPx(context); return percentageReference == null ? null : percentageReference / 100; } if (normalizedUnit === 'em') return getFontSizeReferenceInPx(context, dashToCamelCase(context.property.propertyName ?? context.property.name) === 'fontSize'); if (normalizedUnit === 'rem') return getRootFontSizeInPx(); if (normalizedUnit === 'ex') { const fontSize = getFontSizeReferenceInPx(context, false); return fontSize == null ? null : fontSize / 2; } if (normalizedUnit === 'ch') { const fontSize = getFontSizeReferenceInPx(context, false); return fontSize == null ? null : fontSize / 2; } return getViewportUnitInPx(normalizedUnit); } export function defaultConvertCssNumericUnitValue(context: UnitConversionContext): string { const convertibleContext = getConvertibleNumericContext(context); if (!convertibleContext) return combineNumericStyleInputValue(context.numberText, context.toUnit); const decimalPlaces = getNumericValueDecimalPlaces(context); let convertedValue: number | null; switch (convertibleContext.numericType) { case 'css-length': convertedValue = convertLengthValue(convertibleContext.value, convertibleContext.fromUnit, convertibleContext.toUnit, convertibleContext); break; case 'css-angle': convertedValue = convertUsingUnitTable(convertibleContext.value, convertibleContext.fromUnit, convertibleContext.toUnit, angleUnitInDeg); break; case 'css-time': convertedValue = convertUsingUnitTable(convertibleContext.value, convertibleContext.fromUnit, convertibleContext.toUnit, timeUnitInMs); break; case 'css-frequency': convertedValue = convertUsingUnitTable(convertibleContext.value, convertibleContext.fromUnit, convertibleContext.toUnit, frequencyUnitInHz); break; case 'css-resolution': convertedValue = convertUsingUnitTable(convertibleContext.value, convertibleContext.fromUnit, convertibleContext.toUnit, resolutionUnitInDpi); break; case 'css-flex': convertedValue = convertibleContext.value; break; case 'css-scale': convertedValue = convertScaleValue(convertibleContext.value, convertibleContext.fromUnit, convertibleContext.toUnit); break; } if (convertedValue == null) return combineNumericStyleInputValue(convertibleContext.numberText, convertibleContext.toUnit); return combineNumericStyleInputValue(formatNumericStyleInputNumber(convertedValue, decimalPlaces), convertibleContext.toUnit); } function convertLengthValue(value: number, fromUnit: string, toUnit: string, context: UnitConversionContext): number | null { const normalizedFromUnit = fromUnit?.toLowerCase() ?? ''; const normalizedToUnit = toUnit?.toLowerCase() ?? ''; if (normalizedFromUnit !== '%' && normalizedToUnit === '%') { const measuredSizeInPx = getMeasuredSizeInPx(context); const percentUnitSize = getLengthUnitSizeInPx(context, normalizedToUnit); if (measuredSizeInPx != null && percentUnitSize != null) return measuredSizeInPx / percentUnitSize; } const fromUnitSize = getLengthUnitSizeInPx(context, fromUnit); const toUnitSize = getLengthUnitSizeInPx(context, toUnit); if (fromUnitSize == null || toUnitSize == null) return null; return value * fromUnitSize / toUnitSize; } function convertScaleValue(value: number, fromUnit: string, toUnit: string): number | null { const normalizedFromUnit = fromUnit?.toLowerCase() ?? ''; const normalizedToUnit = toUnit?.toLowerCase() ?? ''; if (normalizedFromUnit === normalizedToUnit) return value; const fromFactor = normalizedFromUnit === '%' ? 0.01 : normalizedFromUnit === '' ? 1 : null; const toFactor = normalizedToUnit === '%' ? 0.01 : normalizedToUnit === '' ? 1 : null; if (fromFactor == null || toFactor == null) return null; return value * fromFactor / toFactor; } function convertUsingUnitTable(value: number, fromUnit: string, toUnit: string, table?: Map): number | null { const normalizedFromUnit = fromUnit?.toLowerCase() ?? ''; const normalizedToUnit = toUnit?.toLowerCase() ?? ''; if (!normalizedFromUnit || !normalizedToUnit || normalizedFromUnit === normalizedToUnit) return value; if (!table) return null; const fromFactor = table.get(normalizedFromUnit); const toFactor = table.get(normalizedToUnit); if (fromFactor == null || toFactor == null) return null; return value * fromFactor / toFactor; } export function getUnitPropertyType(type?: string, propertyName?: string): UnitPropertyType | null { if (editorTypes.includes(type ?? '')) return type; return null; } export function isUnitPropertyType(type?: string, propertyName?: string): boolean { return getUnitPropertyType(type, propertyName) != null; } export function convertNumericUnitValue(context: UnitConversionContext): string { const decimalPlaces = getNumericValueDecimalPlaces(context); const overrideResult = normalizeConvertedValue( context.property.numericValueConverter?.(context.value, context.fromUnit, context.toUnit, context.property, context.numericType, context.numberText, context.rawValue, context.designItems), context.toUnit, decimalPlaces ); if (overrideResult != null) return overrideResult; return defaultConvertCssNumericUnitValue(context); } export function getCssNumericKeywordValues(values?: string[]): string[] { return [...new Set([...(values ?? []), ...cssNumericKeywordValues].filter(Boolean))]; } export function applyCssNumericPropertyDefaults(property: IProperty): IProperty { const numericType = getUnitPropertyType(property.type, property.propertyName ?? property.name); property.values = getCssNumericKeywordValues(property.values); if (numericType) { property.units ??= [...defaultCssNumericUnits[numericType]]; property.unitSteps ??= { ...defaultCssNumericUnitSteps[numericType] }; property.numericValueConverter ??= (value, fromUnit, toUnit, converterProperty, converterNumericType, numberText, rawValue, designItems) => defaultConvertCssNumericUnitValue({ property: converterProperty, numericType: converterNumericType, designItems, value, numberText: numberText ?? `${value}`, rawValue: rawValue ?? `${value}${fromUnit}`, fromUnit, toUnit, }); } return property; } export function getCssNumericEditorConfig(property: IProperty): UnitEditorConfig | null { const numericType = getUnitPropertyType(property.type, property.name); if (!numericType) return null; const defaultUnitSteps = defaultCssNumericUnitSteps[numericType] ?? {}; return { numericType, units: property.units?.length ? property.units : defaultCssNumericUnits[numericType], fixedValues: getCssNumericKeywordValues(property.values), unitSteps: { ...defaultUnitSteps, ...(property.unitSteps ?? {}) }, convertValue: context => convertNumericUnitValue({ ...context, property, numericType }) }; } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.ts ================================================ import { IProperty } from '../../IProperty.js'; import { BasePropertyEditor } from '../BasePropertyEditor.js'; import { ValueType } from '../../ValueType.js'; import { getElementGridInformation } from '../../../../helper/GridHelper.js'; export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor { //TODO: multiple cell selection, grid area support, span support _root: HTMLDivElement; constructor(property: IProperty) { super(property); this._root = document.createElement('div'); this._root.style.display = 'grid'; this._root.style.padding = '4px 0px'; this._root.style.boxSizing = 'border-box'; this._root.style.minHeight = '50px'; this.element = this._root; } refreshValue(valueType: ValueType, value: any) { this._root.innerHTML = ""; if (this.designItems != null && this.designItems.length) { let container = this.designItems[0].element.parentElement; if (container) { let styleContainer = getComputedStyle(container); let info = getElementGridInformation(this.designItems[0].element); let style = getComputedStyle(this.designItems[0].element); let cntCol = styleContainer.gridTemplateColumns.split(' ').length; let cntRow = styleContainer.gridTemplateRows.split(' ').length; this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)'; this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)'; let rowStart = parseInt(style.gridRowStart); let rowEnd = rowStart + info.rowSpan; let colStart = parseInt(style.gridColumnStart); let colEnd = colStart + info.colSpan; for (let p = 1; p <= cntRow; p++) { for (let n = 1; n <= cntCol; n++) { const b = document.createElement('button'); b.style.minHeight = '10px'; b.onclick = () => { let info = getElementGridInformation(this.designItems[0].element); let grp = this.designItems[0].openGroup('Change grid row/column'); this.designItems[0].setStyle("grid-row", p + ' / ' + (p + info.rowSpan)); this.designItems[0].setStyle("grid-column", n + ' / ' + (n + info.colSpan)); grp.commit(); } if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd) b.style.backgroundColor = 'coral'; this._root.appendChild(b); } } } } } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.ts ================================================ import { IProperty } from '../../IProperty.js'; import { BasePropertyEditor } from '../BasePropertyEditor.js'; import { ValueType } from '../../ValueType.js'; import { MetricsEditor, MetricsEditorValueChangedEventArgs } from '../../../../controls/MetricsEditor.js'; import { PropertyType } from '../../PropertyType.js'; export class MetricsPropertyEditor extends BasePropertyEditor { constructor(property: IProperty) { super(property); const selector = new MetricsEditor() selector.property = property.name; selector.style.height = 'auto'; selector.style.border = 'none'; selector.style.margin = '2px 0'; selector.addEventListener('value-changed', (event: CustomEvent) => this._metricValueChanged(event.detail)); this.element = selector; } refreshValue(valueType: ValueType, value: any) { this.element.refresh(this.designItems?.[0]?.element) } private async _metricValueChanged(detail: MetricsEditorValueChangedEventArgs) { if (!detail?.property || !this.designItems?.length || this.disableChangeNotification) return; const cssProperty: IProperty = { ...this.property, name: detail.property, propertyName: detail.property, propertyType: PropertyType.cssValue, type: 'css-length' }; const value = detail.newValue == null || detail.newValue === '' || detail.newValue === this.element.unsetValue ? null : detail.newValue; if (value == null) this.property.service.clearValue(this.designItems, cssProperty, 'value'); else await this.property.service.setValue(this.designItems, cssProperty, value); this.designItems[0].instanceServiceContainer?.designerCanvas?.extensionManager?.refreshAllExtensions(this.designItems); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/AbstractCssPropertiesService.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { CommonPropertiesService } from './CommonPropertiesService.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IProperty } from '../IProperty.js'; import { PropertiesHelper } from './PropertiesHelper.js'; import { applyCssNumericPropertyDefaults } from '../propertyEditors/UnitPropertyEditorConfig.js'; import { splitCssImportant } from '../../../helper/CssImportant.js'; export abstract class AbstractCssPropertiesService extends CommonPropertiesService { protected _enrichCssProperty(property: IProperty): IProperty { return applyCssNumericPropertyDefaults(property); } public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.none; } async previewValue?(designItems: IDesignItem[], property: IProperty, value: any): Promise { let nm = property.propertyName ?? property.name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(nm); const parsedValue = typeof value === 'string' ? splitCssImportant(value) : { value, important: false }; for (let d of designItems) { (d.element).style.setProperty(nm, parsedValue.value, parsedValue.important ? 'important' : ''); } } async removePreviewValue?(designItems: IDesignItem[], property: IProperty): Promise { let nm = property.propertyName ?? property.name; if (!nm.startsWith('--')) nm = PropertiesHelper.camelToDashCase(nm); for (let d of designItems) { if (d.hasStyle(nm)) (d.element).style.setProperty(nm, d.getStyle(nm), d.isStyleImportant(nm) ? 'important' : ''); else (d.element).style.setProperty(nm, ''); } } constructor() { super(false); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { PropertiesHelper } from './PropertiesHelper.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; export abstract class AbstractPolymerLikePropertiesService extends AbstractPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.fullOnClassChange; } public override async getProperties(designItem: IDesignItem): Promise { if (!this.isHandledElement(designItem)) return null; if ((designItem.element?.constructor)?.properties) return this.parseProperties((designItem.element.constructor).properties); return null; } protected parseProperties(list: any): IPropertyGroup[] | IProperty[] { let groups: IPropertyGroup[] | IProperty[] = []; let names = Object.keys(list); const grouped = Object.groupBy(names, x => list[x].group ?? ''); for (let grp in grouped) { const pg: IPropertyGroup = { name: grp, properties: [] }; for (const name of grouped[grp]) { const polymerProperty = list[name]; let type = polymerProperty; let description = null; let example = null; let readonly = false; let propertyType = PropertyType.propertyAndAttribute; if (polymerProperty.type) { type = polymerProperty.type; description = polymerProperty.description; example = polymerProperty.example; readonly = polymerProperty.readonly; propertyType = polymerProperty.readonly ? PropertyType.property : PropertyType.propertyAndAttribute; } if (type === String) { let property: IProperty = { name, type: "string", service: this, propertyType, description, example, readonly }; pg.properties.push(property); } else if (type === Object) { let property: IProperty = { name, type: "object", service: this, propertyType, description, example, readonly }; pg.properties.push(property); } else if (type === Number) { let property: IProperty = { name, type: "number", service: this, propertyType, description, example, readonly }; pg.properties.push(property); } else if (type === Date) { let property: IProperty = { name, type: "date", service: this, propertyType, description, example, readonly }; pg.properties.push(property); } else if (type === Boolean) { let property: IProperty = { name, type: "boolean", service: this, propertyType, description, example, readonly }; pg.properties.push(property); } else if (PropertiesHelper.isTypescriptEnum(type)) { let property: IProperty = { name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType, description, example, readonly }; pg.properties.push(property); } else if (typeof type === 'string') { let property: IProperty = { name, type: type, service: this, propertyType, description, example, readonly }; pg.properties.push(property); } else { let property: IProperty = { name, type: "string", service: this, propertyType, description, example, readonly }; pg.properties.push(property); } } if (pg.name == '') //@ts-ignore groups.push(...pg.properties); else //@ts-ignore groups.push(pg); } return groups; } override getUnsetValue(designItems: IDesignItem[], property: IProperty) { return designItems[0].element[property.propertyName ?? property.name]; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/AbstractPropertiesService.ts ================================================ import { IPropertiesService, RefreshMode } from '../IPropertiesService.js'; import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { ValueType } from '../ValueType.js'; import { PropertiesHelper } from './PropertiesHelper.js'; import { BindingTarget } from '../../../item/BindingTarget.js'; import { IBinding } from '../../../item/IBinding.js'; import { PropertyType } from '../PropertyType.js'; import { NodeType } from '../../../item/NodeType.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { newElementFromString } from '../../../helper/ElementHelper.js'; import { IContextMenuItem } from '../../../helper/contextMenu/IContextMenuItem.js'; import { appendCssImportant, splitCssImportant } from '../../../helper/CssImportant.js'; export abstract class AbstractPropertiesService implements IPropertiesService { constructor(recreateElementsOnPropertyChange?: boolean) { this._recreateElementsOnPropertyChange = recreateElementsOnPropertyChange; } protected _recreateElementsOnPropertyChange: boolean = false; private static _stylesCache = new Map>; private _cssCacheClearTimer: NodeJS.Timeout; private static _bindingsCache = new Map; private static _bindingsCacheClearTimer: NodeJS.Timeout; abstract getRefreshMode(designItem: IDesignItem): RefreshMode; abstract isHandledElement(designItem: IDesignItem): boolean; protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { } async getProperty(designItem: IDesignItem, name: string): Promise { let properties = await this.getProperties(designItem); if ('properties' in properties[0]) { return (properties).flatMap(x => x.properties).find(x => x.name == name); } else return (properties).find(x => x.name == name); } abstract getProperties(designItem: IDesignItem): Promise; async setValue(designItems: IDesignItem[], property: IProperty, value: any) { const cg = designItems[0].openGroup("property changed: " + property.name + " to " + value); for (let d of designItems) { if (!this.isHandledElement(d)) continue; if (!this.getProperty(d, property.name)) continue; if (property.propertyType == PropertyType.cssValue) { const parsedValue = typeof value === 'string' ? splitCssImportant(value) : { value, important: false }; await d.updateStyleInSheetOrLocalAsync(property.propertyName ?? property.name, parsedValue.value, parsedValue.important); //TODO: fix this hack somehow //unkown css property names do not trigger the mutation observer of property grid, //fixed by assinging style again to the attribute (d.element).setAttribute('style', (d.element).getAttribute('style')); } else { let attributeName = property.attributeName if (!attributeName) attributeName = PropertiesHelper.camelToDashCase(property.name); if (property.type === 'object') { const json = JSON.stringify(value); if (property.propertyType == PropertyType.propertyAndAttribute) d.setPropertyAndAttribute(property.name, json); else if (property.propertyType == PropertyType.attribute) d.setAttribute(attributeName, json); else if (property.propertyType == PropertyType.property) d.setProperty(property.name, value); } else if (property.type == 'boolean' && (value === false || value == null)) { if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute) d.removeAttribute(attributeName); if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute) d.setProperty(property.name, false); } else if (property.type == 'boolean' && value === true) { if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute) d.setAttribute(attributeName, ""); if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute) d.setProperty(property.name, true); } else { if (property.propertyType == PropertyType.propertyAndAttribute) d.setPropertyAndAttribute(property.name, value); else if (property.propertyType == PropertyType.attribute) d.setAttribute(attributeName, value.toString()); else if (property.propertyType == PropertyType.property) d.setProperty(property.name, value); } } this._notifyChangedProperty(d, property, value); } cg.commit(); if (this._recreateElementsOnPropertyChange) AbstractPropertiesService.recreateElements(this, designItems); } getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget { if (property.propertyType == PropertyType.attribute) return BindingTarget.attribute; if (property.propertyType == PropertyType.cssValue) return BindingTarget.css; return BindingTarget.property; } clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value') { const cg = designItems[0].openGroup("property cleared: " + property.name); for (let d of designItems) { if (clearType != 'binding') { if (property.propertyType == PropertyType.cssValue) { d.removeStyle(property.propertyName ?? property.name); } else { if (property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute) { d.element[property.propertyName ?? property.name] = null; } if (property.propertyType == PropertyType.attribute || property.propertyType == PropertyType.propertyAndAttribute) { let attributeName = property.attributeName if (!attributeName) attributeName = PropertiesHelper.camelToDashCase(property.name); d.removeAttribute(attributeName); } } } if (clearType != 'value') { d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => { return s.clearBinding(d, property.name, this.getPropertyTarget(d, property)); }); } this._notifyChangedProperty(d, property, undefined); } cg.commit(); if (this._recreateElementsOnPropertyChange) AbstractPropertiesService.recreateElements(this, designItems); } isSet(designItems: IDesignItem[], property: IProperty): ValueType { let all = true; let some = false; if (designItems != null && designItems.length !== 0) { let attributeName = property.attributeName if (!attributeName) attributeName = PropertiesHelper.camelToDashCase(property.name); for (let x of designItems) { let has = false; if (property.propertyType == PropertyType.cssValue) has = x.hasStyle(property.name); else has = x.hasAttribute(attributeName); all = all && has; some = some || has; if (!all && some) break; }; const bindings = AbstractPropertiesService.getOrBuildCachedBindings(designItems[0]); if (property.propertyType == PropertyType.cssValue) { if (bindings && bindings.find(x => (x.target == BindingTarget.css || x.target == BindingTarget.cssvar) && x.targetName == property.name)) return ValueType.bound; } else { if (property.propertyType == PropertyType.attribute) { if (bindings && bindings.find(x => x.target == BindingTarget.attribute && x.targetName == property.name)) return ValueType.bound; } else if (property.propertyType == PropertyType.property) { if (bindings && bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.explicitProperty) && x.targetName == property.name)) return ValueType.bound; } else { if (bindings && bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.explicitProperty || x.target == BindingTarget.attribute) && x.targetName == property.name)) return ValueType.bound; } } if (!all && property.propertyType == PropertyType.cssValue) { let styles = AbstractPropertiesService._stylesCache.get(designItems[0]); if (!styles) { styles = new Set(designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).map(x => x.name)); AbstractPropertiesService._stylesCache.set(designItems[0], styles); clearTimeout(this._cssCacheClearTimer); this._cssCacheClearTimer = setTimeout(() => AbstractPropertiesService._stylesCache.clear(), 30); } let cssValue = styles.has(property.propertyName ?? property.name); if (cssValue) return ValueType.fromStylesheet; } } else return ValueType.none return all ? ValueType.all : some ? ValueType.some : ValueType.none; } static getOrBuildCachedBindings(designItem: IDesignItem) { let bindings = AbstractPropertiesService._bindingsCache.get(designItem); if (!bindings) { const services = designItem.serviceContainer.getServices('bindingService'); bindings = []; if (services) { for (const s of services) { const bs = s.getBindings(designItem); if (bs && bs.length > 0) { bindings.push(...bs); } } } AbstractPropertiesService._bindingsCache.set(designItem, bindings); clearTimeout(this._bindingsCacheClearTimer); this._bindingsCacheClearTimer = setTimeout(() => AbstractPropertiesService._bindingsCache.clear(), 30); } return bindings; } getValue(designItems: IDesignItem[], property: IProperty) { if (designItems != null && designItems.length !== 0) { if (property.propertyType == PropertyType.cssValue) { let lastValue = designItems[0].getStyle(property.propertyName ?? property.name); for (const d of designItems) { let value = d.getStyle(property.name); if (value != lastValue) { lastValue = null; break; } } return typeof lastValue === 'string' ? appendCssImportant(lastValue, designItems[0].isStyleImportant(property.propertyName ?? property.name)) : lastValue; } else if (property.propertyType == PropertyType.property) { let propertyName = property.propertyName if (!propertyName) propertyName = PropertiesHelper.dashToCamelCase(property.name); return designItems[0].element[propertyName]; } else { let attributeName = property.attributeName if (!attributeName) attributeName = PropertiesHelper.camelToDashCase(property.name); if (property.type == 'boolean') { if (designItems[0].hasAttribute(attributeName)) { const val = designItems[0].getAttribute(attributeName); if (val == "") return true; return val; } return false; } let lastValue = designItems[0].getAttribute(attributeName); /* for (const x of designItems) { let value = x.attributes.get(attributeName); if (value != lastValue) { lastValue = null; break; } } */ return lastValue; } } return null; } getBinding(designItems: IDesignItem[], property: IProperty): IBinding { const bindings = AbstractPropertiesService.getOrBuildCachedBindings(designItems[0]); if (bindings != null) { if (property.propertyType == PropertyType.cssValue) { return bindings.find(x => (x.target == BindingTarget.css || x.target == BindingTarget.cssvar) && x.targetName == property.name); } else { if (property.propertyType == PropertyType.attribute) { return bindings.find(x => x.target == BindingTarget.attribute && x.targetName == property.name); } else if (property.propertyType == PropertyType.property) { return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.explicitProperty) && x.targetName == property.name); } else { return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.explicitProperty || x.target == BindingTarget.attribute) && x.targetName == property.name); } } } return null; } getUnsetValue(designItems: IDesignItem[], property: IProperty) { if (property.propertyType == PropertyType.cssValue) { if (designItems != null && designItems.length !== 0) { if (designItems[0].nodeType == NodeType.Element) { let v = window.getComputedStyle(designItems[0].element)[property.propertyName ?? property.name]; return v; } } return null; } else return property.defaultValue; } protected static recreateElements(service: IPropertiesService, designItems: IDesignItem[]) { for (let d of designItems) { if (!service.isHandledElement(d)) continue; let txt = '<' + d.name + ' '; for (let a of d.element.attributes) { txt += a.name + '="' + a.value.replaceAll('"', '"') + '" '; } txt += '>'; let element = newElementFromString(txt, designItems[0].document); // some custom elements only parse attributes during constructor call for (let c of [...d.element.childNodes]) element.appendChild(c); (element).style.pointerEvents = 'auto'; (d.node).insertAdjacentElement('beforebegin', element); if (d.node.parentNode) (d.node.parentNode).removeChild(d.node); d.replaceNode(element); } } public getContextMenu(designItems: IDesignItem[], property: IProperty): IContextMenuItem[] { const ctxMenuItems: IContextMenuItem[] = [ { title: 'clear', action: (e) => { property.service.clearValue(designItems, property, 'value'); designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems); } }, { title: 'edit as text', action: (e, _1, _2, menu) => { menu.close(); setTimeout(async () => { const oldValue = property.service.getValue(designItems, property); let value = prompt(`edit value of '${property.name}' as string:`, oldValue); if (value && value != oldValue) { await property.service.setValue(designItems, property, value); } designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems); }, 10) } }, ]; if (designItems[0].serviceContainer.config.openBindingsEditor) { ctxMenuItems.push(...[ { title: '-' }, { title: 'edit binding', action: () => { let target = property.service.getPropertyTarget(designItems[0], property); let binding = property.service.getBinding(designItems, property); designItems[0].serviceContainer.config.openBindingsEditor(property, designItems, binding, target); } } ]); if (property.service.isSet(designItems, property) == ValueType.bound) { ctxMenuItems.push(...[ { title: 'clear binding', action: () => { property.service.clearValue(designItems, property, 'binding'); designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(designItems); } } ]); } }; return ctxMenuItems; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/AttachedPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; export class AttachedPropertiesService extends AbstractPropertiesService { public name = "attached" override getRefreshMode(designItem: IDesignItem): RefreshMode { return RefreshMode.full; } override isHandledElement(designItem: IDesignItem): boolean { return designItem.serviceContainer.forSomeServicesTillResult('attachedPropertyService', x => x.isHandledElement(designItem)); } override async getProperties(designItem: IDesignItem): Promise { let p: IProperty[] | IPropertyGroup[] = []; if (designItem.serviceContainer.attachedPropertyServices) { for (let s of designItem.serviceContainer.attachedPropertyServices) { if (s.isHandledElement(designItem)) { p.push(...await s.getProperties(designItem)); } } } return p; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/AttributesPropertiesService.ts ================================================ import { RefreshMode } from '../IPropertiesService.js'; import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { ValueType } from '../ValueType.js'; import { IBinding } from "../../../item/IBinding.js"; import { BindingTarget } from '../../../item/BindingTarget.js'; import { PropertyType } from '../PropertyType.js'; import { PropertiesHelper } from './PropertiesHelper.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; export class AttributesPropertiesService extends AbstractPropertiesService { public name = "attributes" public getRefreshMode(designItem: IDesignItem) { return RefreshMode.fullOnValueChange; } isHandledElement(designItem: IDesignItem): boolean { return !designItem.isRootItem; } override async getProperty(designItem: IDesignItem, name: string): Promise { return { name: name, type: 'string', service: this, propertyType: PropertyType.attribute }; } async getProperties(designItem: IDesignItem): Promise { if (designItem) { let p: IProperty[] = []; for (let a of designItem.attributes()) { p.push({ name: a[0], renamable: true, type: 'string', service: this, propertyType: PropertyType.attribute }) } p.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex }); return p; } return null; } override async setValue(designItems: IDesignItem[], property: IProperty, value: any) { const cg = designItems[0].openGroup("properties changed"); for (let d of designItems) { d.setAttribute(property.name, value); } cg.commit(); } override getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget { return BindingTarget.attribute; } override clearValue(designItems: IDesignItem[], property: IProperty) { for (let d of designItems) { d.removeAttribute(property.name); d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => { return s.clearBinding(d, property.name, this.getPropertyTarget(d, property)); }); } } override isSet(designItems: IDesignItem[], property: IProperty): ValueType { let all = true; let some = false; if (designItems != null && designItems.length !== 0) { if (designItems.length == 1 && typeof designItems[0].getAttribute(property.name) == 'object') return ValueType.bound; let propName = PropertiesHelper.dashToCamelCase(property.name); let attributeName = property.name; designItems.forEach((x) => { let has = x.hasAttribute(attributeName); all = all && has; some = some || has; }); const bindings = AbstractPropertiesService.getOrBuildCachedBindings(designItems[0]); if (bindings && bindings.find(x => x.target == BindingTarget.attribute && x.targetName == propName)) return ValueType.bound; } else return ValueType.none return all ? ValueType.all : some ? ValueType.some : ValueType.none; } override getValue(designItems: IDesignItem[], property: IProperty) { if (designItems != null && designItems.length !== 0) { let attributeName = property.name; let lastValue = designItems[0].getAttribute(attributeName); if (typeof lastValue === 'object') return (lastValue).rawValue; /* for (const x of designItems) { let value = x.attributes.get(attributeName); if (value != lastValue) { lastValue = null; break; } } */ return lastValue; } return null; } override getBinding(designItems: IDesignItem[], property: IProperty): IBinding { const bindings = AbstractPropertiesService.getOrBuildCachedBindings(designItems[0]); return bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.explicitProperty || x.target == BindingTarget.attribute) && x.targetName == property.name); } override getUnsetValue(designItems: IDesignItem[], property: IProperty) { return property.defaultValue; } override getContextMenu(designItems: IDesignItem[], property: IProperty) { const ctxMenuItems = super.getContextMenu(designItems, property); const sourcePart = this._getAttributeSourcePart(designItems, property); if (sourcePart) { ctxMenuItems.splice(1, 0, { title: 'jump to definition', action: () => { const selectionService = designItems[0].instanceServiceContainer.selectionService; if (selectionService.primarySelection !== designItems[0]) selectionService.setSelectedElements([designItems[0]], null, sourcePart); else selectionService.setSelectedPart(sourcePart); } }); } return ctxMenuItems; } private _getAttributeSourcePart(designItems: IDesignItem[], property: IProperty) { if (designItems?.length !== 1 || !property?.name) return null; return designItems[0].instanceServiceContainer.designItemDocumentPositionService ?.getSourceParts(designItems[0]) .find(x => x.kind === 'attribute' && x.key === `attribute:${property.name}`); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { BaseCustomWebComponentLazyAppend, BaseCustomWebComponentConstructorAppend, BaseCustomWebComponentNoAttachedTemplate, BaseCustomWebComponentConstructorAppendLazyReady } from '@node-projects/base-custom-webcomponent'; import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js'; export class BaseCustomWebComponentPropertiesService extends AbstractPolymerLikePropertiesService { public name = "baseCustomWebComponent"; override isHandledElement(designItem: IDesignItem): boolean { return designItem.element instanceof BaseCustomWebComponentLazyAppend || designItem.element instanceof BaseCustomWebComponentConstructorAppendLazyReady || designItem.element instanceof BaseCustomWebComponentConstructorAppend || designItem.element instanceof BaseCustomWebComponentNoAttachedTemplate; } protected override _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { //@ts-ignore (designItem.element)._parseAttributesToProperties(); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/BasicWebcomponentPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { PropertiesHelper } from './PropertiesHelper.js'; export class BasicWebcomponentPropertiesService extends AbstractPropertiesService { public name = "webcomponent" public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.full; } override isHandledElement(designItem: IDesignItem): boolean { //@ts-ignore const attr = designItem.element.constructor?.observedAttributes; if (attr && attr.length > 0) { return true; } return false; } override async getProperty(designItem: IDesignItem, name: string): Promise { return (await this.getProperties(designItem)).find(x => x.name == name); } override async getProperties(designItem: IDesignItem): Promise { //@ts-ignore const attr: string[] = designItem.element.constructor?.observedAttributes; return attr.map(x => ({ name: PropertiesHelper.dashToCamelCase(x), type: "string", service: this, propertyType: PropertyType.propertyAndAttribute })); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/CommonPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { PropertyType } from '../PropertyType.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; export class CommonPropertiesService extends AbstractPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.none; } //@ts-ignore private commonProperties: IProperty[] = [ { name: "class", type: "string", service: this, attributeName: "class", propertyName: "className", propertyType: PropertyType.attribute }, { name: "title", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "part", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "tabindex", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute } ]; public name = "common" override isHandledElement(designItem: IDesignItem): boolean { return !designItem.isRootItem; } override async getProperty(designItem: IDesignItem, name: string): Promise { return this.commonProperties.find(x => x.name == name); } override async getProperties(designItem: IDesignItem): Promise { return this.commonProperties; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/ContentAndIdPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { PropertyType } from '../PropertyType.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { ValueType } from '../ValueType.js'; import { BindingTarget } from '../../../item/BindingTarget.js'; export class ContentAndIdPropertiesService extends AbstractPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.none; } public contentProperty: IProperty = { name: "textContent", type: "string", service: this, propertyType: PropertyType.property }; public idProperty: IProperty = { name: "id", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }; public innerHtmlProperty: IProperty = { name: "innerHTML", type: "string", service: this, propertyType: PropertyType.property }; public name = "content" override isHandledElement(designItem: IDesignItem): boolean { return true; } override async getProperty(designItem: IDesignItem, name: string): Promise { return name == 'id' ? this.idProperty : this.contentProperty; } override async getProperties(designItem: IDesignItem): Promise { return [this.idProperty, this.contentProperty, this.innerHtmlProperty]; } override clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value' = 'all'): void { if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) { const cg = designItems[0].openGroup("property cleared: " + property.name); for (let d of designItems) { if (clearType != 'binding') { d.clearChildren(); } if (clearType != 'value') { d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => { return s.clearBinding(d, property.name, this.getPropertyTarget(d, property)); }); } this._notifyChangedProperty(d, property, undefined); } cg.commit(); } else { super.clearValue(designItems, property, clearType); } } override isSet(designItems: IDesignItem[], property: IProperty): ValueType { if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) { let all = true; let some = false; if (designItems != null && designItems.length !== 0) { designItems.forEach((x) => { let has = false; has = x.element.childNodes.length > 0; all = all && has; some = some || has; }); const bindings = AbstractPropertiesService.getOrBuildCachedBindings(designItems[0]); if (bindings && bindings.find(x => (x.target == BindingTarget.property || x.target == BindingTarget.explicitProperty) && x.targetName == property.name)) return ValueType.bound; } return all ? ValueType.all : some ? ValueType.some : ValueType.none; } return super.isSet(designItems, property); } override getValue(designItems: IDesignItem[], property: IProperty): string | boolean { if (property.name == this.contentProperty.name || property.name == this.innerHtmlProperty.name) { return designItems[0].element.textContent; } return super.getValue(designItems, property); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/CssCurrentPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { IStyleDeclaration, IStyleRule } from '../../stylesheetService/IStylesheetService.js'; import { ValueType } from '../ValueType.js'; import { NodeType } from '../../../item/NodeType.js'; import { BindingTarget } from '../../../item/BindingTarget.js'; import { PropertiesHelper } from './PropertiesHelper.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { CssPropertiesService } from './CssPropertiesService.js'; import { appendCssImportant, splitCssImportant } from '../../../helper/CssImportant.js'; const localName = '<local>'; export class CssCurrentPropertiesService extends CssPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.fullOnValueChange; } constructor() { super(null); this.name = 'styles'; } override isHandledElement(designItem: IDesignItem): boolean { return true; } override async getProperty(designItem: IDesignItem, name: string): Promise { const camelName = PropertiesHelper.dashToCamelCase(name); return this._enrichCssProperty({ name: name, type: this._getPropertyType(camelName), values: this._getPropertyValues(camelName), service: this, propertyType: PropertyType.cssValue }); } override async getProperties(designItem: IDesignItem): Promise { if (!designItem || designItem.nodeType != NodeType.Element) return []; let styles = designItem.getAllStyles().reverse().sort((a, b) => { if (a.specificity == null) return -1; if (b.specificity == null) return 1; if (a.specificity.A > b.specificity.A) return -1; if (a.specificity.A === b.specificity.A && a.specificity.B > b.specificity.B) return -1; if (a.specificity.A === b.specificity.A && a.specificity.B === b.specificity.B && a.specificity.C > b.specificity.C) return -1; if (a.specificity.A === b.specificity.A && a.specificity.B === b.specificity.B && a.specificity.C === b.specificity.C) return 0; return 1; }); const bindings = AbstractPropertiesService.getOrBuildCachedBindings(designItem); let localStyles = styles.find(x => x.selector === null) for (const b of bindings) { if (b.target === BindingTarget.css) { if (!localStyles.declarations.find(x => x.name == b.targetName)) { localStyles.declarations.push({ name: b.targetName, value: null, important: false, parent: null }); } } } let arr = styles.map(x => ({ name: (x.selector ?? localName) + (x.specificity ? ' (' + x.specificity.A + '-' + x.specificity.B + '-' + x.specificity.C + ')' : ''), description: x.stylesheetName ?? '', properties: [ ...x.declarations.map(y => { const camelName = PropertiesHelper.dashToCamelCase(y.name); return this._enrichCssProperty({ name: y.name, renamable: true, type: this._getPropertyType(camelName), values: this._getPropertyValues(camelName), service: this, propertyType: PropertyType.cssValue, //@ts-ignore styleRule: x, styleDeclaration: y }) }), { name: '', type: 'addNew', service: this, propertyType: PropertyType.complex, styleRule: x } ] })); return arr; } override async setValue(designItems: IDesignItem[], property: (IProperty & { styleRule: IStyleRule, styleDeclaration: IStyleDeclaration }), value: any) { const parsedValue = typeof value === 'string' ? splitCssImportant(value) : { value, important: false }; // No selector means local style, styleDeclaration is null means new property if (property.styleRule?.selector !== null && property.styleDeclaration) { designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(property.styleDeclaration, parsedValue.value, parsedValue.important); this._notifyChangedProperty(designItems[0], property, value); return; } if (property.styleRule?.selector !== null && !property.styleDeclaration) { designItems[0].instanceServiceContainer.stylesheetService.insertDeclarationIntoRule(property.styleRule, property.name, parsedValue.value, parsedValue.important); this._notifyChangedProperty(designItems[0], property, value); return; } for (const d of designItems) { // Local style d.setStyle(property.name, parsedValue.value, parsedValue.important); //unkown css property names do not trigger the mutation observer of property grid, //fixed by assinging stle again to the attribute (d.element).setAttribute('style', (d.element).getAttribute('style')); } } override clearValue(designItems: IDesignItem[], property: IProperty & { styleRule: IStyleRule, styleDeclaration: IStyleDeclaration }, clearType: 'all' | 'binding' | 'value') { if (property.styleRule?.selector !== null && property.styleDeclaration) { designItems[0].instanceServiceContainer.stylesheetService.removeDeclarationFromRule(property.styleRule, property.styleDeclaration.name); return; } super.clearValue(designItems, property, clearType); } override getValue(designItems: IDesignItem[], property: IProperty & { styleRule: IStyleRule, styleDeclaration: IStyleDeclaration }) { if (property.styleRule?.selector && property.styleDeclaration) return appendCssImportant(property.styleDeclaration.value, property.styleDeclaration.important); return super.getValue(designItems, property); } override getUnsetValue(designItems: IDesignItem[], property: IProperty & { styleRule: IStyleRule, styleDeclaration: IStyleDeclaration }) { if (property.styleRule?.selector && property.styleDeclaration) return appendCssImportant(property.styleDeclaration.value, property.styleDeclaration.important); return super.getUnsetValue(designItems, property); } override isSet(designItems: IDesignItem[], property: IProperty & { styleRule: IStyleRule, styleDeclaration: IStyleDeclaration }): ValueType { if (property.styleRule?.selector && property.styleDeclaration) { if (designItems[0].hasStyle(property.name)) return ValueType.none; //TODO: we need to check if this is the dec. with the highest specifity return ValueType.fromStylesheet; } return super.isSet(designItems, property); } override getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget { if (property.name.startsWith('--')) return BindingTarget.cssvar; return BindingTarget.css; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/CssCustomPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { ValueType } from '../ValueType.js'; import { BindingTarget } from '../../../item/BindingTarget.js'; import { DesignerCanvas } from '../../../widgets/designerView/designerCanvas.js'; import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js'; import { appendCssImportant } from '../../../helper/CssImportant.js'; export class CssCustomPropertiesService extends AbstractCssPropertiesService { removeInheritedCustomProperties: boolean constructor(removeInheritedCustomProperties = true) { super(); this.name = 'customProperties'; this.removeInheritedCustomProperties = removeInheritedCustomProperties; } public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.fullOnValueChange; } override isHandledElement(designItem: IDesignItem): boolean { return true; } override async getProperty(designItem: IDesignItem, name: string): Promise { return this._enrichCssProperty({ name: name, type: 'string', service: this, propertyType: PropertyType.cssValue }); } override async getProperties(designItem: IDesignItem): Promise { if (designItem.nodeType != Node.ELEMENT_NODE) return []; if (designItem?.element?.computedStyleMap) { let rootMap = Array.from((designItem.instanceServiceContainer.designerCanvas).computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--")); let props = Array.from(designItem.element.computedStyleMap()).map(x => x[0]).filter(key => key.startsWith("--")) if (this.removeInheritedCustomProperties) props = props.filter(x => !rootMap.includes(x)); let arr: IProperty[] = props.map(x => ({ name: x, service: this, propertyType: PropertyType.cssValue })).map(x => this._enrichCssProperty(x)); return arr; } let rootMap = Array.from(getComputedStyle(designItem.instanceServiceContainer.designerCanvas)).map(x => x[0]).filter(key => key.startsWith("--")); let props = Array.from(getComputedStyle(designItem.element)).map(x => x[0]).filter(key => key.startsWith("--")) if (this.removeInheritedCustomProperties) props = props.filter(x => !rootMap.includes(x)); let arr: IProperty[] = props.map(x => ({ name: x, service: this, propertyType: PropertyType.cssValue })).map(x => this._enrichCssProperty(x)); return arr; } override clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value') { super.clearValue(designItems, property, clearType); } override getValue(designItems: IDesignItem[], property: IProperty) { let val = designItems[0].getStyle(property.name); if (val) return appendCssImportant(val, designItems[0].isStyleImportant(property.name)); return getComputedStyle(designItems[0].element).getPropertyValue(property.name); } override getUnsetValue(designItems: IDesignItem[], property: IProperty) { if (designItems?.[0].element?.computedStyleMap) { return designItems[0].element.computedStyleMap().get(property.name)?.[0]; } else { return getComputedStyle(designItems[0].element).getPropertyValue(property.name); } } override isSet(designItems: IDesignItem[], property: IProperty): ValueType { if (super.isSet(designItems, property) == ValueType.bound) return ValueType.bound; return designItems[0].hasStyle(property.name) ? ValueType.all : ValueType.none; } override getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget { return BindingTarget.cssvar; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/CssProperties.json ================================================ { "accentColor": { "type": "color" }, "additiveSymbols": {}, "alignContent": { "type": "list", "values": [ "start", "end", "flex-start", "flex-end", "center", "normal", "baseline", "first baseline", "last baseline", "space-between", "space-around", "space-evenly", "stretch", "safe", "unsafe" ] }, "alignItems": { "type": "list", "values": [ "start", "end", "flex-start", "flex-end", "self-start", "self-end", "center", "normal", "baseline", "first baseline", "last baseline", "space-between", "space-around", "space-evenly", "stretch", "safe", "unsafe" ] }, "alignSelf": { "type": "list", "values": [ "start", "end", "flex-start", "flex-end", "self-start", "self-end", "center", "normal", "baseline", "first baseline", "last baseline", "space-between", "space-around", "space-evenly", "stretch", "safe", "unsafe" ] }, "alignmentBaseline": {}, "all": {}, "animation": {}, "animationDelay": { "type": "time" }, "animationDirection": {}, "animationDuration": { "type": "time" }, "animationFillMode": {}, "animationIterationCount": {}, "animationName": {}, "animationPlayState": {}, "animationTimingFunction": {}, "appRegion": {}, "appearance": {}, "ascentOverride": {}, "aspectRatio": {}, "backdropFilter": {}, "backfaceVisibility": {}, "background": {}, "backgroundAttachment": {}, "backgroundBlendMode": {}, "backgroundClip": {}, "backgroundColor": { "type": "color" }, "backgroundImage": {}, "backgroundOrigin": {}, "backgroundPosition": {}, "backgroundPositionX": {}, "backgroundPositionY": {}, "backgroundRepeat": {}, "backgroundRepeatX": {}, "backgroundRepeatY": {}, "backgroundSize": {}, "basePalette": {}, "baselineShift": {}, "blockSize": { "type": "length" }, "border": {}, "borderBlock": {}, "borderBlockColor": { "type": "color" }, "borderBlockEnd": {}, "borderBlockEndColor": { "type": "color" }, "borderBlockEndStyle": {}, "borderBlockEndWidth": {}, "borderBlockStart": {}, "borderBlockStartColor": { "type": "color" }, "borderBlockStartStyle": {}, "borderBlockStartWidth": {}, "borderBlockStyle": {}, "borderBlockWidth": {}, "borderBottom": {}, "borderBottomColor": { "type": "color" }, "borderBottomLeftRadius": {}, "borderBottomRightRadius": {}, "borderBottomStyle": {}, "borderBottomWidth": {}, "borderCollapse": {}, "borderColor": { "type": "color" }, "borderEndEndRadius": {}, "borderEndStartRadius": {}, "borderImage": {}, "borderImageOutset": {}, "borderImageRepeat": {}, "borderImageSlice": {}, "borderImageSource": {}, "borderImageWidth": {}, "borderInline": {}, "borderInlineColor": { "type": "color" }, "borderInlineEnd": {}, "borderInlineEndColor": { "type": "color" }, "borderInlineEndStyle": {}, "borderInlineEndWidth": {}, "borderInlineStart": {}, "borderInlineStartColor": { "type": "color" }, "borderInlineStartStyle": {}, "borderInlineStartWidth": {}, "borderInlineStyle": {}, "borderInlineWidth": {}, "borderLeft": {}, "borderLeftColor": { "type": "color" }, "borderLeftStyle": {}, "borderLeftWidth": {}, "borderRadius": {}, "borderRight": {}, "borderRightColor": { "type": "color" }, "borderRightStyle": {}, "borderRightWidth": {}, "borderSpacing": {}, "borderStartEndRadius": {}, "borderStartStartRadius": {}, "borderStyle": {}, "borderTop": {}, "borderTopColor": { "type": "color" }, "borderTopLeftRadius": {}, "borderTopRightRadius": {}, "borderTopStyle": {}, "borderTopWidth": {}, "borderWidth": { "type": "length", "values": [ "medium", "thin", "thick" ] }, "bottom": { "type": "length" }, "boxShadow": {}, "boxSizing": { "type": "list", "values": [ "border-box", "content-box" ] }, "breakAfter": {}, "breakBefore": {}, "breakInside": {}, "bufferedRendering": {}, "captionSide": {}, "caretColor": { "type": "color" }, "clear": {}, "clip": {}, "clipPath": {}, "clipRule": {}, "color": { "type": "color" }, "colorInterpolation": {}, "colorInterpolationFilters": {}, "colorRendering": {}, "colorScheme": {}, "columnCount": {}, "columnFill": {}, "columnGap": { "type": "length" }, "columnRule": {}, "columnRuleColor": { "type": "color" }, "columnRuleStyle": {}, "columnRuleWidth": {}, "columnSpan": {}, "columnWidth": {}, "columns": {}, "contain": {}, "containIntrinsicBlockSize": {}, "containIntrinsicHeight": {}, "containIntrinsicInlineSize": {}, "containIntrinsicSize": {}, "containIntrinsicWidth": {}, "container": {}, "containerName": {}, "containerType": {}, "content": {}, "contentVisibility": {}, "counterIncrement": {}, "counterReset": {}, "counterSet": {}, "cursor": {}, "cx": {}, "cy": {}, "d": {}, "descentOverride": {}, "direction": {}, "display": { "type": "list", "values": [ "block", "inline", "inline-block", "flex", "inline-flex", "contents", "grid", "inline-grid", "inline-table", "list-item", "run-in", "table", "table-caption", "table-column-group", "table-header-group", "table-footer-group", "tabl-row-group", "table-cell", "table-column", "table-row", "inherit", "initial", "none" ] }, "dominantBaseline": {}, "emptyCells": {}, "fallback": {}, "fill": { "type": "color" }, "fillOpacity": {}, "fillRule": {}, "filter": {}, "flex": {}, "flexBasis": { "type": "length" }, "flexDirection": { "type": "list", "values": [ "row", "column", "row-reverse", "column-reverse" ] }, "flexFlow": {}, "flexGrow": { "type": "number" }, "flexShrink": { "type": "number" }, "flexWrap": { "type": "list", "values": [ "nowrap", "wrap", "wrap-reverse" ] }, "fieldSizing": {}, "float": { "type": "list", "values": [ "none", "left", "right", "inline-start", "inline-end" ] }, "floodColor": { "type": "color" }, "floodOpacity": {}, "font": {}, "fontDisplay": {}, "fontFamily": { "type": "font" }, "fontFeatureSettings": {}, "fontKerning": {}, "fontOpticalSizing": {}, "fontPalette": {}, "fontSize": { "type": "length" }, "fontSizeAdjust": {}, "fontStretch": {}, "fontStyle": {}, "fontSynthesis": {}, "fontSynthesisSmallCaps": {}, "fontSynthesisStyle": {}, "fontSynthesisWeight": {}, "fontVariant": {}, "fontVariantCaps": {}, "fontVariantEastAsian": {}, "fontVariantLigatures": {}, "fontVariantNumeric": {}, "fontVariationSettings": {}, "fontWeight": {}, "forcedColorAdjust": {}, "gap": { "type": "length" }, "grid": {}, "gridArea": {}, "gridAutoColumns": {}, "gridAutoFlow": {}, "gridAutoRows": {}, "gridColumn": {}, "gridColumnEnd": {}, "gridColumnGap": { "type": "length" }, "gridColumnStart": {}, "gridGap": { "type": "length" }, "gridRow": {}, "gridRowEnd": {}, "gridRowGap": { "type": "length" }, "gridRowStart": {}, "gridTemplate": {}, "gridTemplateAreas": {}, "gridTemplateColumns": {}, "gridTemplateRows": {}, "height": { "type": "length" }, "hyphenateCharacter": {}, "hyphens": {}, "imageOrientation": {}, "imageRendering": {}, "imageResolution": { "type": "resolution" }, "inherits": {}, "initialValue": {}, "inlineSize": { "type": "length" }, "inset": {}, "insetBlock": {}, "insetBlockEnd": {}, "insetBlockStart": {}, "insetInline": {}, "insetInlineEnd": {}, "insetInlineStart": {}, "isolation": {}, "justifyContent": { "type": "list", "values": [ "start", "end", "flex-start", "flex-end", "self-start", "self-end", "center", "normal", "baseline", "first baseline", "last baseline", "space-between", "space-around", "space-evenly", "stretch", "safe", "unsafe" ] }, "justifyItems": { "type": "list", "values": [ "start", "end", "flex-start", "flex-end", "center", "normal", "baseline", "first baseline", "last baseline", "space-between", "space-around", "space-evenly", "stretch", "safe", "unsafe" ] }, "justifySelf": { "type": "list", "values": [ "start", "end", "flex-start", "flex-end", "self-start", "self-end", "center", "normal", "baseline", "first baseline", "last baseline", "space-between", "space-around", "space-evenly", "stretch", "safe", "unsafe" ] }, "left": { "type": "length" }, "letterSpacing": { "type": "length" }, "lightingColor": { "type": "color" }, "lineBreak": {}, "lineGapOverride": {}, "lineHeight": { "type": "length" }, "listStyle": {}, "listStyleImage": {}, "listStylePosition": {}, "listStyleType": {}, "margin": {}, "marginBlock": {}, "marginBlockEnd": { "type": "length" }, "marginBlockStart": { "type": "length" }, "marginBottom": { "type": "length" }, "marginInline": {}, "marginInlineEnd": { "type": "length" }, "marginInlineStart": { "type": "length" }, "marginLeft": { "type": "length" }, "marginRight": { "type": "length" }, "marginTop": { "type": "length" }, "marker": {}, "markerEnd": {}, "markerMid": {}, "markerStart": {}, "mask": {}, "maskType": {}, "maxBlockSize": { "type": "length" }, "maxHeight": { "type": "length" }, "maxInlineSize": { "type": "length" }, "maxWidth": { "type": "length" }, "minBlockSize": { "type": "length" }, "minHeight": { "type": "length" }, "minInlineSize": { "type": "length" }, "minWidth": { "type": "length" }, "mixBlendMode": {}, "negative": {}, "objectFit": {}, "objectPosition": { "type": "position" }, "objectViewBox": {}, "offset": {}, "offsetDistance": {}, "offsetPath": {}, "offsetRotate": { "type": "angle" }, "opacity": { "type": "number" }, "order": {}, "orphans": {}, "outline": {}, "outlineColor": { "type": "color" }, "outlineOffset": { "type": "length" }, "outlineStyle": {}, "outlineWidth": { "type": "length", "values": [ "medium", "thin", "thick" ] }, "overflow": { "type": "list", "values": [ "visible", "hidden", "clip", "scroll", "auto" ] }, "overflowAnchor": {}, "overflowClipMargin": {}, "overflowWrap": {}, "overflowX": { "type": "list", "values": [ "visible", "hidden", "clip", "scroll", "auto" ] }, "overflowY": { "type": "list", "values": [ "visible", "hidden", "clip", "scroll", "auto" ] }, "overrideColors": {}, "overscrollBehavior": {}, "overscrollBehaviorBlock": {}, "overscrollBehaviorInline": {}, "overscrollBehaviorX": {}, "overscrollBehaviorY": {}, "pad": {}, "padding": {}, "paddingBlock": {}, "paddingBlockEnd": {}, "paddingBlockStart": {}, "paddingBottom": {}, "paddingInline": {}, "paddingInlineEnd": {}, "paddingInlineStart": {}, "paddingLeft": {}, "paddingRight": {}, "paddingTop": {}, "page": {}, "pageBreakAfter": {}, "pageBreakBefore": {}, "pageBreakInside": {}, "pageOrientation": {}, "paintOrder": {}, "perspective": { "type": "length" }, "perspectiveOrigin": {}, "placeContent": {}, "placeItems": {}, "placeSelf": {}, "pointerEvents": {}, "position": { "type": "list", "values": [ "static", "relative", "absolute", "fixed", "sticky" ] }, "prefix": {}, "quotes": {}, "r": {}, "range": {}, "resize": {}, "right": { "type": "length" }, "rotate": { "type": "angle" }, "rowGap": { "type": "length" }, "rubyAlign": {}, "rubyPosition": {}, "rx": {}, "ry": {}, "scale": { "type": "scale" }, "scrollbarColor": {}, "scrollbarGutter": { "type": "list", "values": [ "auto", "stable", "stable both-edges" ] }, "scrollbarWidth": {}, "scrollBehavior": {}, "scrollMargin": {}, "scrollMarginBlock": {}, "scrollMarginBlockEnd": {}, "scrollMarginBlockStart": {}, "scrollMarginBottom": {}, "scrollMarginInline": {}, "scrollMarginInlineEnd": {}, "scrollMarginInlineStart": {}, "scrollMarginLeft": {}, "scrollMarginRight": {}, "scrollMarginTop": {}, "scrollPadding": {}, "scrollPaddingBlock": {}, "scrollPaddingBlockEnd": {}, "scrollPaddingBlockStart": {}, "scrollPaddingBottom": {}, "scrollPaddingInline": {}, "scrollPaddingInlineEnd": {}, "scrollPaddingInlineStart": {}, "scrollPaddingLeft": {}, "scrollPaddingRight": {}, "scrollPaddingTop": {}, "scrollSnapAlign": {}, "scrollSnapStop": {}, "scrollSnapType": {}, "shapeImageThreshold": {}, "shapeMargin": {}, "shapeOutside": {}, "shapeRendering": { "type": "list", "values": [ "auto", "optimizeSpeed", "crispEdges", "geometricPrecision" ] }, "size": {}, "sizeAdjust": {}, "speak": {}, "speakAs": {}, "src": {}, "stopColor": { "type": "color" }, "stopOpacity": {}, "stroke": { "type": "color" }, "strokeDasharray": {}, "strokeDashoffset": {}, "strokeLinecap": {}, "strokeLinejoin": {}, "strokeMiterlimit": {}, "strokeOpacity": {}, "strokeWidth": { "type": "number" }, "suffix": {}, "symbols": {}, "syntax": {}, "system": {}, "tabSize": {}, "tableLayout": {}, "textAlign": { "type": "list", "values": [ "start", "end", "left", "right", "center", "justify", "justify-all", "match-parent" ] }, "textAlignLast": {}, "textAnchor": {}, "textCombineUpright": {}, "textDecoration": {}, "textDecorationColor": { "type": "color" }, "textDecorationLine": {}, "textDecorationSkipInk": {}, "textDecorationStyle": {}, "textDecorationThickness": {}, "textEmphasis": {}, "textEmphasisColor": { "type": "color" }, "textEmphasisPosition": {}, "textEmphasisStyle": {}, "textIndent": { "type": "length" }, "textOrientation": {}, "textOverflow": {}, "textRendering": {}, "textShadow": {}, "textSizeAdjust": {}, "textTransform": {}, "textUnderlineOffset": {}, "textUnderlinePosition": {}, "textWrap": {}, "textWrapMode": { "type": "list", "values": [ "wrap", "nowrap" ] }, "textWrapStyle": { "type": "list", "values": [ "auto", "balance", "pretty", "stable" ] }, "top": { "type": "length" }, "touchAction": {}, "transform": {}, "transformBox": {}, "transformOrigin": {}, "transformStyle": {}, "transition": {}, "transitionDelay": { "type": "time" }, "transitionBehavior": {}, "transitionDuration": { "type": "time" }, "transitionProperty": {}, "transitionTimingFunction": {}, "translate": {}, "unicodeBidi": {}, "unicodeRange": {}, "userSelect": {}, "vectorEffect": {}, "verticalAlign": {}, "visibility": {}, "whiteSpace": {}, "widows": {}, "width": { "type": "length" }, "willChange": {}, "wordBreak": {}, "wordSpacing": { "type": "length" }, "wordWrap": {}, "writingMode": {}, "x": {}, "y": {}, "zIndex": {}, "zoom": { "type": "scale" } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/CssPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { BindingTarget } from '../../../item/BindingTarget.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { PropertiesHelper } from './PropertiesHelper.js'; import { GridAssignedRowColumnPropertyEditor } from '../propertyEditors/special/GridAssignedRowColumnPropertyEditor.js'; import { MetricsPropertyEditor } from '../propertyEditors/special/MetricsPropertyEditor.js'; import cssProperties from "./CssProperties.json" with { type: 'json' }; import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js'; export class CssPropertiesService extends AbstractCssPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.none; } //metrics public layout = { "common": [ "display", "color", "background-color", "box-sizing", "border", "box-shadow", "opacity", "position", "align-content", ], "font": [ "font-family", "font-size", "font-weight", ], "layout": [ "inset", "margin", "border", "padding", "overflow", "metrics" ] } public grid = [ "display", "position", "grid-template-columns", "grid-template-rows", "gap", "column-gap", "row-gap", "align-content", "justify-content", "align-items", "justify-items" ]; public gridChild = [ "grid-row", "grid-column", "assigned-row-column", "align-self", "justify-self" ]; public flex = [ "display", "position", "flex-direction", "flex-wrap", "align-content", "justify-content", "align-items", "gap" ]; public flexChild = [ "align-self", "justify-self" ]; public svg = [ "fill", "fill-rule", "fill-opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-opacity" ]; public layoutSvgChild = { "common": [ "display", "fill", "fill-rule", "fill-opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-opacity" ], } constructor(name: 'layout' | 'layoutSvgChild' | 'grid' | 'gridChild' | 'flex' | 'flexChild' | 'svg') { super(); this.name = name; } override isHandledElement(designItem: IDesignItem): boolean { return true; } override async getProperty(designItem: IDesignItem, name: string): Promise { return this._getPropertyDef(name); } override async getProperties(designItem: IDesignItem): Promise { const propNames: string[] | Record = this[this.name]; if (Array.isArray(propNames)) { const propertiesList = propNames.map(x => this._getPropertyDef(x)); return propertiesList; } else { let grps: IPropertyGroup[] = []; for (let g in propNames) { let grp: IPropertyGroup = { name: g, properties: propNames[g].map(x => this._getPropertyDef(x)) }; grps.push(grp); } return grps; } } getPropertyNameSuggestions(designItems: IDesignItem[]): string[] { return Object.keys(cssProperties).map(x => PropertiesHelper.camelToDashCase(x)); } protected _getPropertyType(name: string): string { const typeFromJson = cssProperties[name]?.type; return typeFromJson ? 'css-' + typeFromJson : 'string'; } protected _getPropertyValues(name: string): string[] { return cssProperties[name]?.values; } _getPropertyDef(name: string): IProperty { const camelName = PropertiesHelper.dashToCamelCase(name); switch (camelName) { case 'assignedRowColumn': return { name, service: this, propertyType: PropertyType.complex, createEditor: (p) => new GridAssignedRowColumnPropertyEditor(p) }; case 'metrics': return { name, service: this, propertyType: PropertyType.complex, hideLabel: true, createEditor: (p) => new MetricsPropertyEditor(p) }; default: return this._enrichCssProperty({ name, //attributeName: PropertiesHelper.camelToDashCase(name), type: this._getPropertyType(camelName), values: this._getPropertyValues(camelName), service: this, propertyType: PropertyType.cssValue }) } } override getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget { return BindingTarget.css; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/IJsonPropertyDefinition.ts ================================================ import { PropertyType } from '../PropertyType.js'; export interface IJsonPropertyDefinition { name: string; propertyName?: string, attributeName?: string description?: string; type?: string; // -> string, number, list, color, thickness, css numeric types default?: any; min?: number; max?: number; step?: number; values?: string[]; // list selectable values units?: string[]; // selectable units for editors that support unit changes numericValueDecimalPlaces?: number; // rounding used by numeric unit conversions enumValues?: [name: string, value: string | number][]; // list selectable enum values value?: any; defaultValue?: any; propertyType?: PropertyType.cssValue } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/IJsonPropertyDefinitions.ts ================================================ import { IJsonPropertyDefinition } from './IJsonPropertyDefinition.js'; export interface IJsonPropertyDefinitions { [key: string]: IJsonPropertyDefinition[]; } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/ListPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IJsonPropertyDefinitions } from './IJsonPropertyDefinitions.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; export class ListPropertiesService extends AbstractPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.full; } public name = "list" private _propertys: Map = new Map(); constructor(propertyDefinitions: IJsonPropertyDefinitions, recreateElementsOnPropertyChange?: boolean) { super(recreateElementsOnPropertyChange); for (let e in propertyDefinitions) { let parr: IProperty[] = [] this._propertys.set(e, parr); for (let p in propertyDefinitions[e]) { let pdef = propertyDefinitions[e][p]; parr.push( { name: pdef.name, propertyName: pdef.propertyName, attributeName: pdef.attributeName, description: pdef.description, type: pdef.type, default: pdef.default, min: pdef.min, max: pdef.max, step: pdef.step, values: pdef.values, enumValues: pdef.enumValues, value: pdef.value, defaultValue: pdef.defaultValue, service: this, propertyType: pdef.propertyType ?? PropertyType.propertyAndAttribute }); } } } override isHandledElement(designItem: IDesignItem): boolean { return this._propertys.has(designItem.element.localName); } protected override _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { } override async getProperties(designItem: IDesignItem): Promise { return this._propertys.get(designItem.element.localName); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/Lit2PropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js'; import { PropertiesHelper } from './PropertiesHelper.js'; import { PropertyType } from '../PropertyType.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; export class Lit2PropertiesService extends AbstractPolymerLikePropertiesService { public name = "lit2" override isHandledElement(designItem: IDesignItem): boolean { let prop = (designItem.element.constructor).elementProperties; if (prop) return true; return false; } public override async getProperties(designItem: IDesignItem): Promise { if (!this.isHandledElement(designItem)) return null; let properties: IProperty[] = []; for (const p of (designItem.element.constructor).elementProperties.entries()) { let name = p[0]; const litProperty = p[1]; let type = litProperty; if (litProperty.type) type = litProperty.type; if (type === String) { let property: IProperty = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }; properties.push(property); } else if (type === Object) { let property: IProperty = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }; properties.push(property); } else if (type === Number) { let property: IProperty = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }; properties.push(property); } else if (type === Date) { let property: IProperty = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute }; properties.push(property); } else if (type === Boolean) { let property: IProperty = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute }; properties.push(property); } else if (PropertiesHelper.isTypescriptEnum(type)) { let property: IProperty = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute }; properties.push(property); } } return properties; } protected override _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/LitElementPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js'; export class LitElementPropertiesService extends AbstractPolymerLikePropertiesService { public name = "lit" override isHandledElement(designItem: IDesignItem): boolean { let proto = (designItem.element.constructor).__proto__; while (proto != null) { if (proto.name == 'LitElement') return true; if (proto.name == undefined || proto.name == 'HTMLElement' || proto.name == 'Element' || proto.name == 'Node' || proto.name == 'HTMLElement') return false; proto = proto.__proto__; } return false; } protected override _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/MathMLElementsPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { CommonPropertiesService } from './CommonPropertiesService.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; export class MathMLElementsPropertiesService extends CommonPropertiesService { private commonMathProperties: IProperty[] = [ { name: "displaystyle", type: "boolean", service: this, defaultValue: true, propertyType: PropertyType.propertyAndAttribute } ]; private mathProperties: IProperty[] = [ { name: "display", type: "list", values: ["block", "inline"], service: this, defaultValue: "text", propertyType: PropertyType.propertyAndAttribute } ]; private mfracProperties: IProperty[] = [ { name: "denomalign", type: "list", values: ["left", "center", "right"], service: this, defaultValue: "center", propertyType: PropertyType.propertyAndAttribute }, { name: "linethickness", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "numalign", type: "list", values: ["left", "center", "right"], service: this, defaultValue: "center", propertyType: PropertyType.propertyAndAttribute }, ]; public override name = "mathml" public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.full; } override isHandledElement(designItem: IDesignItem): boolean { return designItem.element instanceof designItem.window.MathMLElement; } override async getProperty(designItem: IDesignItem, name: string): Promise { return (await this.getProperties(designItem)).find(x => x.name == name); } override async getProperties(designItem: IDesignItem): Promise { if (!this.isHandledElement(designItem)) return null; switch (designItem.element.localName) { case 'math': return [...this.commonMathProperties, ...this.mathProperties]; case 'merror': return [...this.commonMathProperties]; case 'mfrac': return [...this.commonMathProperties, ...this.mfracProperties]; default: return [...this.commonMathProperties]; } } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/NativeElementsPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { PropertyType } from '../PropertyType.js'; import { RefreshMode } from '../IPropertiesService.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; export class NativeElementsPropertiesService extends AbstractPropertiesService { private inputProperties: IProperty[] = [ { name: "type", type: "list", values: ["text", "number", "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "password", "radio", "range", "reset", "search", "submit", "tel", "time", "url", "week"], service: this, defaultValue: "text", propertyType: PropertyType.propertyAndAttribute }, { name: "value", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "placeholder", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "checked", type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "min", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "max", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "readonly", type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "valueAsDate", type: "string", service: this, propertyType: PropertyType.property }, { name: "valueAsNumber", type: "string", service: this, propertyType: PropertyType.property } ]; private textareaProperties: IProperty[] = [ { name: "value", type: "string", service: this, propertyType: PropertyType.property }, { name: "placeholder", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "maxlength", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "cols", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "rows", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "readonly", type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "resize", type: "list", values: ["both", "none", "horizontal", "vertical"], service: this, propertyType: PropertyType.cssValue } ]; private selectProperties: IProperty[] = [ { name: "value", type: "string", service: this, propertyType: PropertyType.property }, { name: "size", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "multiple", type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute } ]; private buttonProperties: IProperty[] = [ { name: "type", type: "list", values: ["button", "submit", "reset"], service: this, defaultValue: "button", propertyType: PropertyType.propertyAndAttribute }, { name: "value", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute } ]; private anchorProperties: IProperty[] = [ { name: "href", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute } ]; private divProperties: IProperty[] = [ { name: "title", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute } ]; private imgProperties: IProperty[] = [ { name: "src", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "alt", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute } ]; private iframeProperties: IProperty[] = [ { name: "src", type: "string", service: this, propertyType: PropertyType.propertyAndAttribute } ]; private formElementProperties: IProperty[] = [ { name: "autofocus", type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "disabled", type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "required", type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute } ]; private meterProperties: IProperty[] = [ { name: "value", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "min", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "max", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "low", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "high", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute }, { name: "optimum", type: "number", service: this, propertyType: PropertyType.propertyAndAttribute } ]; public name = "native" public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.full; } override isHandledElement(designItem: IDesignItem): boolean { switch (designItem.element.localName) { case 'input': case 'textarea': case 'select': case 'button': case 'a': case 'div': case 'span': case 'br': case 'img': case 'iframe': case 'meter': case 'h1': case 'h2': case 'h3': case 'h4': case 'h5': case 'h6': case 'p': return true; } return false; } override async getProperty(designItem: IDesignItem, name: string): Promise { return (await this.getProperties(designItem)).find(x => x.name == name); } override async getProperties(designItem: IDesignItem): Promise { if (!this.isHandledElement(designItem)) return null; switch (designItem.element.localName) { case 'input': return [...this.inputProperties, ...this.formElementProperties]; case 'textarea': return [...this.textareaProperties, ...this.formElementProperties]; case 'select': return [...this.selectProperties, ...this.formElementProperties]; case 'button': return [...this.buttonProperties, ...this.formElementProperties]; case 'a': return this.anchorProperties; case 'div': return this.divProperties; case 'img': return this.imgProperties; case 'iframe': return this.iframeProperties; case 'meter': return this.meterProperties; case 'h1': case 'h2': case 'h3': case 'h4': case 'h5': case 'h6': case 'p': return []; } return null; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/PolymerPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { AbstractPolymerLikePropertiesService } from './AbstractPolymerLikePropertiesService.js'; export class PolymerPropertiesService extends AbstractPolymerLikePropertiesService { public name = "polymer" override isHandledElement(designItem: IDesignItem): boolean { return (designItem.element.constructor).polymerElementVersion != null; } protected override _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any) { (<{ set: (name: string, value: any) => void }>designItem.element).set(property.name, value); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/PropertiesHelper.ts ================================================ export class PropertiesHelper { public static isTypescriptEnum(value: any) { if (value && typeof value === 'object' && value.constructor == Object) { for (let k in value) { const tp = typeof value[k]; if (tp !== 'string' && tp !== 'number') return false; } return true; } return false; } public static getTypescriptEnumEntries(value: any): [name: string, value: string | number][] { let ret: [name: string, value: string | number][] = []; for (let k in value) { if (isNaN(k)) ret.push([k, value[k]]); } return ret; } public static camelToDashCase(text: string) { return text.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`); } public static dashToCamelCase(text: string) { return text.replace(/-([a-z])/g, (i) => i[1].toUpperCase()); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/SVGElementsPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { CommonPropertiesService } from './CommonPropertiesService.js'; import { PropertyType } from '../PropertyType.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { RefreshMode } from '../IPropertiesService.js'; export class SVGElementsPropertiesService extends CommonPropertiesService { private rectProperties: IProperty[] = [ { name: "x", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "y", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "width", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "height", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "rx", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "ry", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "pathLength", type: "svg-length", service: this, propertyType: PropertyType.attribute }, { name: "fill", type: "color", defaultValue: "transparent", service: this, propertyType: PropertyType.attribute }, { name: "fill-opacity", type: "number", defaultValue: "1", service: this, propertyType: PropertyType.attribute } ]; private lineProperties: IProperty[] = [ { name: "x1", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "y1", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "x2", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "y2", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "pathLength", type: "svg-length", service: this, propertyType: PropertyType.attribute } ]; private ellipseProperties: IProperty[] = [ { name: "cx", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "cy", type: "svg-length", defaultValue: "0", service: this, propertyType: PropertyType.attribute }, { name: "rx", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "ry", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "pathLength", type: "svg-length", service: this, propertyType: PropertyType.attribute }, { name: "fill", type: "color", defaultValue: "transparent", service: this, propertyType: PropertyType.attribute }, { name: "fill-opacity", type: "number", defaultValue: "1", service: this, propertyType: PropertyType.attribute } ]; private pathProperties: IProperty[] = [ { name: "d", type: "string", defaultValue: '', service: this, propertyType: PropertyType.attribute }, { name: "pathLength", type: "svg-length", service: this, propertyType: PropertyType.attribute } ]; private svgProperties: IProperty[] = [ { name: "width", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "height", type: "svg-length", defaultValue: "auto", service: this, propertyType: PropertyType.attribute }, { name: "viewBox", type: "string", service: this, propertyType: PropertyType.attribute } ]; private defaultProperties: IProperty[] = [ { name: "stroke", type: "color", defaultValue: "currentcolor", service: this, propertyType: PropertyType.attribute }, { name: "stroke-width", type: "svg-length", service: this, propertyType: PropertyType.attribute }, { name: "stroke-opacity", type: "number", defaultValue: "1", service: this, propertyType: PropertyType.attribute }, { name: "visibility", type: "list", values: ["visible", "hidden"], defaultValue: "visible", service: this, propertyType: PropertyType.attribute } ]; public override name = "svg" public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.fullOnClassChange; } override isHandledElement(designItem: IDesignItem): boolean { switch (designItem.element.localName) { case 'rect': case 'line': case 'ellipse': case 'path': case 'svg': return true; } return false; } override async getProperty(designItem: IDesignItem, name: string): Promise { return (await this.getProperties(designItem)).find(x => x.name == name); } override async getProperties(designItem: IDesignItem): Promise { let props: IProperty[] = null; if (!this.isHandledElement(designItem)) return null; switch (designItem.element.localName) { case 'rect': props = [...this.rectProperties, ...this.defaultProperties]; break; case 'line': props = [...this.lineProperties, ...this.defaultProperties]; break; case 'ellipse': props = [...this.ellipseProperties, ...this.defaultProperties]; break; case 'path': props = [...this.pathProperties, ...this.defaultProperties]; break; case 'svg': props = this.svgProperties; break; } if (designItem.element.localName == 'line' || designItem.element.localName == 'path') { const markers = this.getAllMarkerIds(designItem); if (markers.length > 0 || designItem.hasAttribute('marker-start')) { props.push({ name: "marker-start", type: "string", values: markers, service: this, propertyType: PropertyType.attribute }); } if (markers.length > 0 || designItem.hasAttribute('marker-mid')) { props.push({ name: "marker-mid", type: "string", values: markers, service: this, propertyType: PropertyType.attribute }); } if (markers.length > 0 || designItem.hasAttribute('marker-end')) { props.push({ name: "marker-end", type: "string", values: markers, service: this, propertyType: PropertyType.attribute }); } } return props; } private getAllMarkerIds(designItem: IDesignItem): string[] { const svgElement = designItem.element as SVGElement; const svg = svgElement.ownerSVGElement; const markerElements = svg.querySelectorAll('defs > marker'); return [...markerElements].map(m => `url(#${m.id})`).filter(id => !!id); } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/UnkownElementsPropertiesService.ts ================================================ import { IProperty } from '../IProperty.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IPropertyGroup } from '../IPropertyGroup.js'; import { AbstractPropertiesService } from './AbstractPropertiesService.js'; import { RefreshMode } from '../IPropertiesService.js'; import { PropertyType } from '../PropertyType.js'; export class UnkownElementsPropertiesService extends AbstractPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.full; } isHandledElement(designItem: IDesignItem): boolean { return true; } async getProperties(designItem: IDesignItem): Promise { let list = Object.getOwnPropertyNames(Object.getPrototypeOf(designItem.element)); let props: IProperty[] = []; for (let p of list) { if (p.startsWith('on')) continue; let desc = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(designItem.element), p); if (desc.get || desc.set) { let v = designItem.element[p]; if (typeof v == 'boolean') props.push({ name: p, type: 'boolean', service: this, propertyType: PropertyType.propertyAndAttribute }); else if (typeof v == 'number') props.push({ name: p, type: 'bonumberolean', service: this, propertyType: PropertyType.propertyAndAttribute }); else props.push({ name: p, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute }); } } return props; } } ================================================ FILE: packages/web-component-designer/src/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.ts ================================================ import { BindingTarget } from "../../../item/BindingTarget.js"; import { IDesignItem } from "../../../item/IDesignItem.js"; import { IPropertiesService, RefreshMode } from "../IPropertiesService.js"; import { IProperty } from "../IProperty.js"; import { IPropertyGroup } from "../IPropertyGroup.js"; import { PropertyType } from "../PropertyType.js"; import { AbstractPropertiesService } from "./AbstractPropertiesService.js"; export class WebcomponentManifestPropertiesService extends AbstractPropertiesService implements IPropertiesService { public override getRefreshMode(designItem: IDesignItem) { return RefreshMode.full; } private _name: string; get name() { return this._name; } private _propertiesList: Record; constructor(name: string, manifest: any, recreateElementsOnPropertyChange?: boolean) { super(recreateElementsOnPropertyChange); this._name = name; this._parseManifest(manifest); } private _parseManifest(manifest) { this._propertiesList = {}; let declarations = []; for (let m of manifest.modules) { if (m.declarations) declarations.push(...m.declarations); } for (let m of manifest.modules) { for (let e of m.exports) { if (e.kind == 'custom-element-definition') { let properties: IProperty[] = []; let declaration = declarations.find(x => x.name == e.declaration.name); if (declaration) { if (declaration.members) { for (let d of declaration.members) { if (d.kind == 'field' && d.privacy !== 'private' && d.privacy !== 'protected') { let pType = PropertyType.property; if (declaration.attributes) pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property; const p = WebcomponentManifestPropertiesService.manifestClassPropertyTypeToEditorPropertyType(d.type?.text, d.type?.editor); if (d.name) properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description }); } } this._propertiesList[e.name] = properties; } } else { console.warn('declaration for ' + e.declaration.name + ' not found', manifest); } } } } } public static manifestClassPropertyTypeToEditorPropertyType(type: string, editor: string): [type: string, values?: string[]] { if (editor) { if (editor.toLowerCase() === 'color') return ['color']; } if (type) { if (type.toLowerCase() === 'boolean') return ['boolean']; if (type.toLowerCase() === 'number') return ['number']; if (type.toLowerCase() === 'string') return ['string']; if (type.startsWith("'") && type.includes("|")) { const values = type.split("|").map(x => x.trim()).map(x => x.substring(1, x.length - 1)); return ['list', values] } } return [type]; } override isHandledElement(designItem: IDesignItem): boolean { return this._propertiesList[designItem.name] != null; } override async getProperties(designItem: IDesignItem): Promise { return this._propertiesList[designItem.name]; } override async getProperty(designItem: IDesignItem, name: string): Promise { return this._propertiesList[designItem.name].find(x => x.name == name); } override getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget { return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property } override getUnsetValue(designItems: IDesignItem[], property: IProperty) { return designItems[0].element[property.propertyName ?? property.name]; } } ================================================ FILE: packages/web-component-designer/src/elements/services/refactorService/BindingsRefactorService.ts ================================================ import { IBinding } from "../../item/IBinding.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { IRefactorService } from "./IRefactorService.js"; import { IRefactoring } from "./IRefactoring.js"; export class BindingsRefactorService implements IRefactorService { getRefactorings(designItems: IDesignItem[]): IRefactoring[] { let refactorings: (IRefactoring & { shortName?: string })[] = []; for (let d of designItems) { let bindings = d.serviceContainer.bindingService.getBindings(d); if (bindings) { for (let b of bindings) { for (let s of b.bindableObjectNames) { if (s.includes(':')) { let nm = s.split(':')[0]; let sng = s.substring(nm.length + 1); refactorings.push({ service: this, name: sng, itemType: 'signal', designItem: d, type: 'binding', sourceObject: b, display: b.target + '/' + b.targetName + ' - ' + nm + ':', shortName: nm }); } else { refactorings.push({ service: this, name: s, itemType: 'signal', designItem: d, type: 'binding', sourceObject: b, display: b.target + '/' + b.targetName }); } } } } } return refactorings; } refactor(refactoring: (IRefactoring & { shortName?: string }), oldValue: string, newValue: string) { let binding = refactoring.sourceObject as IBinding; if (refactoring.shortName) binding.bindableObjectNames = binding.bindableObjectNames.map(x => x == refactoring.shortName + ':' + oldValue ? refactoring.shortName + ':' + newValue : x); else binding.bindableObjectNames = binding.bindableObjectNames.map(x => x == oldValue ? newValue : x); refactoring.designItem.serviceContainer.bindingService.setBinding(refactoring.designItem, binding); } } ================================================ FILE: packages/web-component-designer/src/elements/services/refactorService/IRefactorService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IRefactoring } from "./IRefactoring.js"; export interface IRefactorService { getRefactorings(designItems: IDesignItem[]): IRefactoring[]; refactor(refactoring: IRefactoring, oldValue: string, newValue: string); } ================================================ FILE: packages/web-component-designer/src/elements/services/refactorService/IRefactoring.ts ================================================ import { BindingTarget } from "../../item/BindingTarget.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { IRefactorService } from "./IRefactorService.js"; export interface IRefactoring { service: IRefactorService; name: string; //wert der itemType: string; //for example: text, signal, property, screen, .... designItem: IDesignItem; type: 'binding' | 'script' | 'content' | 'attribute'; display?: string; sourceObject: any; target?: BindingTarget; targetName?: string; //usage?: string; //spezieller typ? bspw. css, attribute, script, binding //dynamicType?: string; //bein wincc, direkte variable, script, ... } ================================================ FILE: packages/web-component-designer/src/elements/services/refactorService/TextRefactorService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IRefactorService } from "./IRefactorService.js"; import { IRefactoring } from "./IRefactoring.js"; export class TextRefactorService implements IRefactorService { getRefactorings(designItems: IDesignItem[]): IRefactoring[] { let refactorings: IRefactoring[] = []; for (let d of designItems) { if (d.element instanceof d.window.HTMLInputElement || d.element instanceof d.window.HTMLTextAreaElement) { if (d.element.value) refactorings.push({ service: this, name: d.element.value, itemType: 'text', designItem: d, type: 'attribute', sourceObject: d, display: 'attribute' + '/' + 'value' }); } if (d.childCount > 0 && d.element.textContent) { let onlyTextNodes = true; for (const n of d.element.childNodes) if (n.nodeType != 3) { onlyTextNodes = false; } if (onlyTextNodes) refactorings.push({ service: this, name: d.element.textContent, itemType: 'text', designItem: d, type: 'content', sourceObject: d, display: 'textContent' }); } } return refactorings; } refactor(refactoring: IRefactoring, oldValue: string, newValue: string) { if (refactoring.type == 'attribute') { refactoring.designItem.setAttribute('value', newValue); } else if (refactoring.type == 'content') { refactoring.designItem.content = newValue; } } } ================================================ FILE: packages/web-component-designer/src/elements/services/referencesChangedService/IReferencesChangedService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; type idChange = { designItem: IDesignItem, oldValue: string, type: 'idChanged' }; type deleted = { designItem: IDesignItem, type: 'deleted' }; export interface IReferencesChangedService { notifyReferencesChanged(changes: (idChange | deleted)[]): void; } ================================================ FILE: packages/web-component-designer/src/elements/services/renderedDesignItemService/IRenderedDesignItemService.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; export interface IRenderedDesignItemService { updateRenderedDesignItem(designItem: IDesignItem): void; updateRenderedNode(node: Node): Node; } ================================================ FILE: packages/web-component-designer/src/elements/services/renderedDesignItemService/StyleElementRenderedDesignItemService.ts ================================================ import { forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from "../../item/DesignItem.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { patchStylesheetSelectorForDesigner } from "../../helper/DesignerStylesheetPatcher.js"; import { IRenderedDesignItemService } from "./IRenderedDesignItemService.js"; export class StyleElementRenderedDesignItemService implements IRenderedDesignItemService { updateRenderedDesignItem(designItem: IDesignItem): void { const styleDesignItem = this.getStyleDesignItem(designItem); if (!styleDesignItem) return; const patchedContent = this.patchStyleText([...styleDesignItem.children()].map(x => x.content).join('')); this.updateStyleElementText(styleDesignItem.element, patchedContent); this.updateDeclarativeShadowStyle(styleDesignItem, patchedContent); styleDesignItem.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets(); } updateRenderedNode(node: Node): Node { const win = node.ownerDocument?.defaultView ?? window; if (node instanceof win.HTMLStyleElement) this.updateStyleElementText(node, this.patchStyleText(node.textContent)); if (node instanceof win.HTMLTemplateElement) this.updateRenderedNode(node.content); if ('querySelectorAll' in node) { for (const styleElement of (node).querySelectorAll('style')) { this.updateStyleElementText(styleElement, this.patchStyleText(styleElement.textContent)); } } return node; } private getStyleDesignItem(designItem: IDesignItem): IDesignItem { if (designItem?.name == 'style') return designItem; if (designItem?.parent?.name == 'style') return designItem.parent; return null; } private updateDeclarativeShadowStyle(styleDesignItem: IDesignItem, patchedContent: string) { const templateDesignItem = this.getDeclarativeShadowTemplateDesignItem(styleDesignItem); if (!templateDesignItem) return; const host = templateDesignItem.parent?.element as HTMLElement; if (!host?.shadowRoot) return; const sourceStyleElements = [...(templateDesignItem.node).content.querySelectorAll('style')]; const sourceIndex = sourceStyleElements.indexOf(styleDesignItem.node); const renderedStyleElements = [...host.shadowRoot.querySelectorAll('style')]; if (sourceIndex >= 0 && sourceIndex < renderedStyleElements.length) this.updateStyleElementText(renderedStyleElements[sourceIndex], patchedContent); else this.updateRenderedNode(host.shadowRoot); } private getDeclarativeShadowTemplateDesignItem(designItem: IDesignItem): IDesignItem { let current = designItem.parent; while (current) { const win = current.node.ownerDocument.defaultView ?? window; if (current.node instanceof win.HTMLTemplateElement && current.getAttribute('shadowrootmode') == 'open') return current; current = current.parent; } return null; } private updateStyleElementText(styleElement: Element, text: string) { if (styleElement.textContent !== text) styleElement.textContent = text; } private patchStyleText(text: string) { return patchStylesheetSelectorForDesigner(text, { forceHoverAttributeName, forceActiveAttributeName, forceVisitedAttributeName, forceFocusAttributeName, forceFocusWithinAttributeName, forceFocusVisibleAttributeName }); } } ================================================ FILE: packages/web-component-designer/src/elements/services/searchService/ISearchResult.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; // This class could later wrap, how it was found by the search, for example which property matched, etc. For now it only contains the design item itself. export interface ISearchResult { designItem: IDesignItem; } ================================================ FILE: packages/web-component-designer/src/elements/services/searchService/ISearchService.ts ================================================ import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { ISearchResult } from "./ISearchResult.js"; export interface ISearchService { search(designerCanvas: IDesignerCanvas, searchTerm: string, options?: { caseSensitive?: boolean, wholeWord?: boolean, useRegExp?: boolean }): Promise; } ================================================ FILE: packages/web-component-designer/src/elements/services/searchService/SearchService.ts ================================================ import { DesignItem } from "../../item/DesignItem.js"; import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { ISearchResult } from "./ISearchResult.js"; import { ISearchService } from "./ISearchService.js"; export class SearchService implements ISearchService { async search(designerCanvas: IDesignerCanvas, searchTerm: string, options?: { caseSensitive?: boolean, wholeWord?: boolean, useRegExp?: boolean }): Promise { if (searchTerm != "") { let selectedElements = designerCanvas.rootDesignItem.querySelectorAll(searchTerm); let searchResults: ISearchResult[] = []; for (let i = 0; i < selectedElements.length; i++) { const designItem = DesignItem.GetDesignItem(selectedElements[i]); if (designItem) searchResults.push({ designItem }); } return searchResults; } return null; } } ================================================ FILE: packages/web-component-designer/src/elements/services/selectionService/ISelectionChangedEvent.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { ISourcePart } from '../sourceMapService/ISourcePart.js'; export interface ISelectionChangedEvent { oldSelectedElements: IDesignItem[] selectedElements: IDesignItem[], selectedPart?: ISourcePart, oldSelectedPart?: ISourcePart, event?: Event } ================================================ FILE: packages/web-component-designer/src/elements/services/selectionService/ISelectionRefreshEvent.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { ISourcePart } from '../sourceMapService/ISourcePart.js'; export interface ISelectionRefreshEvent { selectedElements: IDesignItem[], selectedPart?: ISourcePart, event?: Event } ================================================ FILE: packages/web-component-designer/src/elements/services/selectionService/ISelectionService.ts ================================================ import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IDesignItem } from '../../item/IDesignItem.js'; import { ISelectionChangedEvent } from './ISelectionChangedEvent.js'; import { ISelectionRefreshEvent } from './ISelectionRefreshEvent.js'; import { ISourcePart } from '../sourceMapService/ISourcePart.js'; export interface ISelectionService { primarySelection: IDesignItem; selectedElements: IDesignItem[]; selectedPart: ISourcePart; setSelectedElements(designItems: IDesignItem[], even?: Event, selectedPart?: ISourcePart): void; setSelectedPart(sourcePart: ISourcePart, event?: Event): void; setSelectionByTextRange(positionStart: number, positionEnd: number); clearSelectedElements(): void; isSelected(designItem: IDesignItem): boolean; readonly onSelectionChanged: TypedEvent; readonly onSelectionRefresh: TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/services/selectionService/SelectionService.ts ================================================ import { ISelectionService } from './ISelectionService.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { ISelectionChangedEvent } from './ISelectionChangedEvent.js'; import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { SelectionChangedAction } from '../undoService/transactionItems/SelectionChangedAction.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { ISelectionRefreshEvent } from './ISelectionRefreshEvent.js'; import { ISourcePart } from '../sourceMapService/ISourcePart.js'; function findDesignItem(designItem: IDesignItem, position: number): IDesignItem { let usedItem = null; if (designItem.hasChildren) { for (let d of designItem.children()) { const nodePosition = designItem.instanceServiceContainer.designItemDocumentPositionService.getPosition(d); if (nodePosition) { if (nodePosition.start <= position && nodePosition.start + nodePosition.length >= position) usedItem = d; } } } if (usedItem) { return findDesignItem(usedItem, position) } return designItem; } export class SelectionService implements ISelectionService { primarySelection: IDesignItem; selectedElements: IDesignItem[] = []; selectedPart: ISourcePart; _designerCanvas: IDesignerCanvas; _undoSelectionChanges: boolean; constructor(designerCanvas: IDesignerCanvas, undoSelectionChanges: boolean) { this._designerCanvas = designerCanvas; this._undoSelectionChanges = undoSelectionChanges; } setSelectedElements(designItems: IDesignItem[], event?: Event, selectedPart?: ISourcePart) { this._setSelectedElements(designItems, event, selectedPart); } private _setSelectedElements(designItems: IDesignItem[], event?: Event, selectedPart?: ISourcePart) { if (designItems === null || designItems.length === 0) designItems = [this._designerCanvas.rootDesignItem]; if (this.selectedElements != designItems && !(this.selectedElements.length === 0 && (designItems == null || designItems.length === 0))) { if (this.selectedElements?.length === 1 && designItems?.length === 1 && designItems[0] === this.selectedElements[0]) { this._setSelectedPart(selectedPart); this.onSelectionRefresh.emit({ selectedElements: this.selectedElements, selectedPart: this.selectedPart, event }); return; } if (this._undoSelectionChanges) { const action = new SelectionChangedAction(this.selectedElements, designItems, this); this._designerCanvas.instanceServiceContainer.undoService.execute(action); } else { this._withoutUndoSetSelectedElements(designItems, event, selectedPart); } } } setSelectedPart(sourcePart: ISourcePart, event?: Event): void { if (this._setSelectedPart(sourcePart)) this.onSelectionRefresh.emit({ selectedElements: this.selectedElements, selectedPart: this.selectedPart, event }); } private _setSelectedPart(sourcePart: ISourcePart): boolean { const oldSelectedPart = this.selectedPart; if (oldSelectedPart === sourcePart || (oldSelectedPart?.designItem === sourcePart?.designItem && oldSelectedPart?.key === sourcePart?.key)) return false; this.selectedPart = sourcePart; return true; } setSelectionByTextRange(positionStart: number, positionEnd: number) { const sourcePart = this._designerCanvas.instanceServiceContainer.designItemDocumentPositionService?.getSourcePartAt(positionStart); const item = findDesignItem(this._designerCanvas.rootDesignItem, positionStart); if (item) { if (this.selectedElements.length != 1 || this.primarySelection != item) this._setSelectedElements([item], undefined, sourcePart); else this.setSelectedPart(sourcePart); } } _withoutUndoSetSelectedElements(designItems: IDesignItem[], event?: Event, selectedPart?: ISourcePart) { let oldSelectedElements = this.selectedElements; let oldSelectedPart = this.selectedPart; if (!designItems) { this.selectedElements = []; this.primarySelection = null this.selectedPart = null; } else { let newSelection: IDesignItem[] = [] for (let d of designItems) { if (d && (designItems.length == 1 || d !== d.instanceServiceContainer.designerCanvas.rootDesignItem)) newSelection.push(d) } this.selectedElements = newSelection; if (newSelection && newSelection.length > 0) this.primarySelection = newSelection[0]; else this.primarySelection = null; this.selectedPart = selectedPart?.designItem === this.primarySelection ? selectedPart : null; } this.onSelectionChanged.emit({ selectedElements: this.selectedElements, oldSelectedElements: oldSelectedElements, selectedPart: this.selectedPart, oldSelectedPart, event }); } clearSelectedElements() { this.setSelectedElements([]); } isSelected(designItem: IDesignItem) { return this.selectedElements.indexOf(designItem) >= 0; } readonly onSelectionChanged = new TypedEvent(); readonly onSelectionRefresh = new TypedEvent(); } ================================================ FILE: packages/web-component-designer/src/elements/services/sourceMapService/ISourceMapProvider.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IStringPosition } from '../htmlWriterService/IStringPosition.js'; import { ISourcePart } from './ISourcePart.js'; export type SourceMapContextKind = 'attribute' | 'style-declaration' | 'text-node'; export interface ISourceMapContext { designItem: IDesignItem; sourceKind: SourceMapContextKind; name?: string; value: string; valueTextRange: IStringPosition; } export interface ISourceMapProvider { canMap(context: ISourceMapContext): boolean; map(context: ISourceMapContext): ISourcePart[]; } ================================================ FILE: packages/web-component-designer/src/elements/services/sourceMapService/ISourcePart.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IStringPosition } from '../htmlWriterService/IStringPosition.js'; export type SourcePartKind = | 'attribute' | 'attribute-value' | 'style-declaration' | 'style-value' | 'svg-path-handle' | string; export interface ISourcePart { designItem: IDesignItem; kind: SourcePartKind; key: string; name?: string; textRange: IStringPosition; data?: TData; } export interface ISvgPathHandleSourcePartData { attribute: 'd'; segmentIndex: number; handleType: 'anchor' | 'cp1' | 'cp2'; } ================================================ FILE: packages/web-component-designer/src/elements/services/sourceMapService/SvgPathDataSourceMap.ts ================================================ export type SvgPathHandleType = 'anchor' | 'cp1' | 'cp2'; export interface ISvgPathHandleRange { segmentIndex: number; handleType: SvgPathHandleType; start: number; length: number; } interface NumberToken { value: number; start: number; end: number; } type PathToken = NumberToken | { command: string; start: number; end: number }; const parameterCount: Record = { M: 2, L: 2, H: 1, V: 1, C: 6, S: 4, Q: 4, T: 2, A: 7, Z: 0, }; function isCommandToken(token: PathToken): token is { command: string; start: number; end: number } { return 'command' in token; } function isNumberToken(token: PathToken): token is NumberToken { return 'value' in token; } function tokenizePathData(value: string): PathToken[] { const tokens: PathToken[] = []; const tokenRegex = /[AaCcHhLlMmQqSsTtVvZz]|[-+]?(?:(?:\d*\.\d+)|(?:\d+\.?))(?:[eE][-+]?\d+)?/g; let match: RegExpExecArray; while ((match = tokenRegex.exec(value))) { const token = match[0]; if (/^[AaCcHhLlMmQqSsTtVvZz]$/.test(token)) tokens.push({ command: token, start: match.index, end: match.index + token.length }); else tokens.push({ value: Number(token), start: match.index, end: match.index + token.length }); } return tokens; } function getRange(numbers: NumberToken[], indexes: number[]): { start: number; length: number } { const selected = indexes.map(index => numbers[index]).filter(x => x); const start = Math.min(...selected.map(x => x.start)); const end = Math.max(...selected.map(x => x.end)); return { start, length: end - start }; } function addHandleRange(ranges: ISvgPathHandleRange[], segmentIndex: number, handleType: SvgPathHandleType, numbers: NumberToken[], indexes: number[]) { const range = getRange(numbers, indexes); ranges.push({ segmentIndex, handleType, start: range.start, length: range.length }); } function addSegmentRanges(ranges: ISvgPathHandleRange[], command: string, segmentIndex: number, numbers: NumberToken[]) { switch (command.toUpperCase()) { case 'M': case 'L': case 'T': addHandleRange(ranges, segmentIndex, 'anchor', numbers, [0, 1]); break; case 'H': case 'V': addHandleRange(ranges, segmentIndex, 'anchor', numbers, [0]); break; case 'C': addHandleRange(ranges, segmentIndex, 'cp1', numbers, [0, 1]); addHandleRange(ranges, segmentIndex, 'cp2', numbers, [2, 3]); addHandleRange(ranges, segmentIndex, 'anchor', numbers, [4, 5]); break; case 'S': addHandleRange(ranges, segmentIndex, 'cp2', numbers, [0, 1]); addHandleRange(ranges, segmentIndex, 'anchor', numbers, [2, 3]); break; case 'Q': addHandleRange(ranges, segmentIndex, 'cp1', numbers, [0, 1]); addHandleRange(ranges, segmentIndex, 'anchor', numbers, [2, 3]); break; case 'A': addHandleRange(ranges, segmentIndex, 'anchor', numbers, [5, 6]); break; } } export function parseSvgPathDataSourceMap(value: string): ISvgPathHandleRange[] { const tokens = tokenizePathData(value); const ranges: ISvgPathHandleRange[] = []; let index = 0; let command: string = null; let segmentIndex = 0; while (index < tokens.length) { const token = tokens[index]; if (isCommandToken(token)) { command = token.command; index++; if (command.toUpperCase() === 'Z') { segmentIndex++; continue; } } else if (!command) { index++; continue; } let effectiveCommand = command; let parameters = parameterCount[effectiveCommand.toUpperCase()]; if (parameters == null || parameters === 0) continue; let firstMoveSegment = effectiveCommand.toUpperCase() === 'M'; while (index < tokens.length && !isCommandToken(tokens[index])) { if (firstMoveSegment) { effectiveCommand = command; firstMoveSegment = false; } else if (command.toUpperCase() === 'M') { effectiveCommand = command === command.toLowerCase() ? 'l' : 'L'; } parameters = parameterCount[effectiveCommand.toUpperCase()]; const numbers: NumberToken[] = []; for (let parameterIndex = 0; parameterIndex < parameters && index < tokens.length; parameterIndex++, index++) { const numberToken = tokens[index]; if (!isNumberToken(numberToken)) break; numbers.push(numberToken); } if (numbers.length !== parameters) break; addSegmentRanges(ranges, effectiveCommand, segmentIndex, numbers); segmentIndex++; } } return ranges; } ================================================ FILE: packages/web-component-designer/src/elements/services/sourceMapService/SvgPathSourceMapProvider.ts ================================================ import { ISourceMapContext, ISourceMapProvider } from './ISourceMapProvider.js'; import { ISourcePart, ISvgPathHandleSourcePartData } from './ISourcePart.js'; import { parseSvgPathDataSourceMap } from './SvgPathDataSourceMap.js'; export function createSvgPathHandleSourcePartKey(segmentIndex: number, handleType: ISvgPathHandleSourcePartData['handleType']) { return `attribute:d/svg-path/segment:${segmentIndex}/handle:${handleType}`; } export class SvgPathSourceMapProvider implements ISourceMapProvider { canMap(context: ISourceMapContext): boolean { return context.sourceKind === 'attribute' && context.name === 'd' && context.designItem.element instanceof context.designItem.window.SVGPathElement; } map(context: ISourceMapContext): ISourcePart[] { return parseSvgPathDataSourceMap(context.value).map(handleRange => ({ designItem: context.designItem, kind: 'svg-path-handle', key: createSvgPathHandleSourcePartKey(handleRange.segmentIndex, handleRange.handleType), name: 'd', textRange: { start: context.valueTextRange.start + handleRange.start, length: handleRange.length }, data: { attribute: 'd', segmentIndex: handleRange.segmentIndex, handleType: handleRange.handleType } })); } } ================================================ FILE: packages/web-component-designer/src/elements/services/stylesheetService/AbstractStylesheetService.ts ================================================ import { TypedEvent } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from '../../item/IDesignItem.js'; import { IDocumentStylesheet, IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from './IStylesheetService.js'; import { InstanceServiceContainer } from "../InstanceServiceContainer.js"; import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js"; import { forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from "../../item/DesignItem.js"; import { Specificity, calculateSpecificity } from "./SpecificityCalculator.js"; import { patchStylesheetSelectorForDesigner } from "../../helper/DesignerStylesheetPatcher.js"; export abstract class AbstractStylesheetService implements IStylesheetService { protected _stylesheets = new Map(); protected _documentStylesheets = new Map(); protected _allStylesheets = new Map(); protected _instanceServiceContainer: InstanceServiceContainer; constructor(designerCanvas: IDesignerCanvas) { this._instanceServiceContainer = designerCanvas.instanceServiceContainer; } abstract getRules(rule: string): IStyleRule[]; abstract addRule(stylesheet: IStylesheet, rule: string): Promise; async setStylesheets(stylesheets: IStylesheet[]): Promise { await this.internalSetStylesheets(stylesheets, this._stylesheets); } async setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise { await this.internalSetStylesheets(stylesheets, this._documentStylesheets); } async internalSetStylesheets(stylesheets: IStylesheet[], targetMap: Map): Promise { if (targetMap != null && stylesheets != null && targetMap.size == stylesheets.length && stylesheets.every(x => targetMap.has(x.name))) { for (let stylesheet of stylesheets) { const old = targetMap.get(stylesheet.name); if (old.stylesheet.content != stylesheet.content) { try { targetMap.set(stylesheet.name, { stylesheet: stylesheet, ast: await this.internalParse(stylesheet.content) }); } catch (err) { console.warn("error parsing stylesheet", stylesheet, err) } if (targetMap == this._stylesheets) this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' }); } } } else if (stylesheets != null) { targetMap.clear(); for (let stylesheet of stylesheets) { let ast = null; try { ast = await this.internalParse(stylesheet.content) } catch (err) { console.warn("error parsing stylesheet", stylesheet, err) } targetMap.set(stylesheet.name, { stylesheet: stylesheet, ast: ast }); } if (targetMap == this._stylesheets) this.stylesheetsChanged.emit(); } else { targetMap.clear(); } this._allStylesheets.clear(); for (let s of this._documentStylesheets) { this._allStylesheets.set(s[0], s[1]); } for (let s of this._stylesheets) { this._allStylesheets.set(s[0], s[1]); } } protected async internalReparseStylesheet(name: string) { let lst = this._allStylesheets; if (this._documentStylesheets.has(name)) lst = this._documentStylesheets; if (this._stylesheets.has(name)) lst = this._stylesheets; const ss = lst.get(name); let ast = null; try { ast = await this.internalParse(ss.stylesheet.content) } catch (err) { console.warn("error parsing stylesheet", name, err) } const v = { stylesheet: ss.stylesheet, ast: ast } this._stylesheets.set(name, v); this._allStylesheets.set(name, v); } protected abstract internalParse(style: string): Promise; //TODO: rename to externalStylesheets getStylesheets(): IStylesheet[] { let stylesheets: IStylesheet[] = []; for (let item of this._stylesheets) { stylesheets.push(item[1].stylesheet); }; /*for (let item of this._documentStylesheets) { stylesheets.push(item[1].stylesheet); };*/ return stylesheets; } abstract getAppliedRules(designItem: IDesignItem): IStyleRule[] abstract getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[] getDeclarationsSortedBySpecificity(designItem: IDesignItem, styleName: string): IStyleDeclaration[] { const decls = this.getDeclarations(designItem, styleName); decls.reverse().sort((a, b) => { if (a.parent.specificity == null) return -1; if (b.parent.specificity == null) return 1; if (a.parent.specificity.A > b.parent.specificity.A) return -1; if (a.parent.specificity.A === b.parent.specificity.A && a.parent.specificity.B > b.parent.specificity.B) return -1; if (a.parent.specificity.A === b.parent.specificity.A && a.parent.specificity.B === b.parent.specificity.B && a.parent.specificity.C > b.parent.specificity.C) return -1; if (a.parent.specificity.A === b.parent.specificity.A && a.parent.specificity.B === b.parent.specificity.B && a.parent.specificity.C === b.parent.specificity.C) return 0; return 1; }); return decls; } public updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean) { this.updateDeclarationValueWithoutUndo(declaration, value, important); } abstract insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean abstract removeDeclarationFromRule(rule: IStyleRule, property: string): boolean; abstract updateCompleteStylesheet(name: string, newStyle: string); abstract updateCompleteStylesheetWithoutUndo(name: string, newStyle: string); public abstract updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean) public stylesheetChanged = new TypedEvent<{ name: string, newStyle: string, oldStyle: string, changeSource: 'extern' | 'styleupdate' | 'undo' }>(); public stylesheetsChanged: TypedEvent = new TypedEvent(); public static patchStylesheetSelectorForDesigner(text: string) { return patchStylesheetSelectorForDesigner(text, { forceHoverAttributeName, forceActiveAttributeName, forceVisitedAttributeName, forceFocusAttributeName, forceFocusWithinAttributeName, forceFocusVisibleAttributeName }); } protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): false | Specificity { let s: Specificity = null; for (let selector of selectors) { try { const patchedSelector = AbstractStylesheetService.patchStylesheetSelectorForDesigner(selector); if (designItem && patchedSelector === ':host' && designItem.isRootItem) { let spec = calculateSpecificity(selector); if (s === null || spec.A > s.A || (spec.A === s.A && (spec.B > s.B || (spec.B === s.B && spec.C > s.C)))) s = spec; } else if (!designItem || designItem.element.matches(patchedSelector)) { let spec = calculateSpecificity(selector); if (s === null || spec.A > s.A || (spec.A === s.A && (spec.B > s.B || (spec.B === s.B && spec.C > s.C)))) s = spec; } } catch (err) { console.warn("invalid selector: ", selector, "patched: " + AbstractStylesheetService.patchStylesheetSelectorForDesigner(selector)); } } return s === null ? false : s; } } ================================================ FILE: packages/web-component-designer/src/elements/services/stylesheetService/IStylesheetService.ts ================================================ import { TypedEvent } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from "../../item/IDesignItem.js"; import { Specificity } from "./SpecificityCalculator.js"; export interface IStyleRule { selector: string; declarations: IStyleDeclaration[]; specificity: Specificity; stylesheetName?: string; stylesheet: IStylesheet; } export interface IStyleDeclaration { name: string; value: string; important: boolean; parent: IStyleRule; stylesheet?: IStylesheet; } export interface IStylesheet { content: string; name: string; readOnly?: boolean; } export interface IDocumentStylesheet extends IStylesheet { designItem: IDesignItem; } export interface IStylesheetService { setStylesheets(stylesheets: IStylesheet[]): Promise; getStylesheets(): IStylesheet[]; getRules(selector: string): IStyleRule[]; setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise; getAppliedRules(designItem: IDesignItem): IStyleRule[]; getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[]; getDeclarationsSortedBySpecificity(designItem: IDesignItem, styleName: string): IStyleDeclaration[]; updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean); updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean) insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean; removeDeclarationFromRule(rule: IStyleRule, property: string): boolean; updateCompleteStylesheet(name: string, newStyle: string): Promise; updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): Promise; addRule(stylesheet: IStylesheet, selector: string): Promise; stylesheetChanged: TypedEvent<{ name: string, newStyle: string, oldStyle: string, changeSource: 'extern' | 'styleupdate' | 'undo' }>; stylesheetsChanged: TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/services/stylesheetService/SpecificityCalculator.ts ================================================ export type Level = "A" | "B" | "C"; export type Specificity = { A: number; B: number; C: number }; // Char codes used throughout const CH_HASH = 35; // # const CH_DOT = 46; // . const CH_COLON = 58; // : const CH_LBRACKET = 91; // [ const CH_RBRACKET = 93; // ] const CH_LPAREN = 40; // ( const CH_RPAREN = 41; // ) const CH_COMMA = 44; // , const CH_BACKSLASH = 92; // \ const CH_STAR = 42; // * const CH_PIPE = 124; // | const CH_SPACE = 32; // ' ' const CH_GT = 62; // > const CH_PLUS = 43; // + const CH_TILDE = 126; // ~ const CH_SQUOTE = 39; // ' const CH_DQUOTE = 34; // " const CH_UNDERSCORE = 95; // _ const CH_DASH = 45; // - export function calculateSpecificity(selector: string): Specificity { const spec: Specificity = { A: 0, B: 0, C: 0 }; // Fast path: simple selectors without pseudo-classes, attributes, functions, commas, or escapes if (!needsFullParse(selector)) { calcSimple(selector, spec); return spec; } parseSelectorList(selector, 0, spec); return spec; } function needsFullParse(selector: string): boolean { for (let i = 0; i < selector.length; i++) { const c = selector.charCodeAt(i); if (c === CH_COLON || c === CH_LBRACKET || c === CH_LPAREN || c === CH_COMMA || c === CH_BACKSLASH) return true; } return false; } function calcSimple(selector: string, spec: Specificity): void { const len = selector.length; let i = 0; while (i < len) { const c = selector.charCodeAt(i); // Column combinator || if (c === CH_PIPE && i + 1 < len && selector.charCodeAt(i + 1) === CH_PIPE) { i += 2; continue; } if (c === CH_SPACE || c === CH_GT || c === CH_PLUS || c === CH_TILDE) { i++; continue; } if (c === CH_HASH) { spec.A++; i++; while (i < len && isIdentCC(selector.charCodeAt(i))) i++; continue; } if (c === CH_DOT) { spec.B++; i++; while (i < len && isIdentCC(selector.charCodeAt(i))) i++; continue; } if (c === CH_STAR) { i++; continue; } if (isIdentStartCC(c) || c === CH_PIPE) { while (i < len) { const cc = selector.charCodeAt(i); if (isIdentCC(cc) || cc === CH_PIPE) i++; else break; } spec.C++; continue; } i++; } } /* ---- Full parser (used when selector contains :, [, (, \, or ,) ---- */ function parseSelectorList(input: string, start: number, spec: Specificity): number { let i = start; let tA = 0, tB = 0, tC = 0; while (i < input.length) { tA = tB = tC = 0; i = parseSelector(input, i, spec, true); // parseSelector wrote into spec; grab those values as temp then reset tA = spec.A; tB = spec.B; tC = spec.C; // On the very first iteration we just keep the values. // On subsequent iterations we pick the most specific (lexicographic). // To avoid extra bookkeeping we always overwrite spec and compare below. if (input.charCodeAt(i) === CH_COMMA) { i++; // Need to parse more selectors — save best so far let bestA = tA, bestB = tB, bestC = tC; while (i < input.length) { spec.A = spec.B = spec.C = 0; i = parseSelector(input, i, spec, true); if (spec.A > bestA || (spec.A === bestA && (spec.B > bestB || (spec.B === bestB && spec.C > bestC)))) { bestA = spec.A; bestB = spec.B; bestC = spec.C; } if (input.charCodeAt(i) === CH_COMMA) { i++; continue; } break; } spec.A = bestA; spec.B = bestB; spec.C = bestC; } break; } return i; } // When called from parseSelectorList with direct=true, writes directly into spec (avoids temp object). // When called recursively (direct=false), the caller manages its own temp. function parseSelector(input: string, start: number, spec: Specificity, direct: boolean): number { let i = start; if (direct) { spec.A = spec.B = spec.C = 0; } while (i < input.length) { const c = input.charCodeAt(i); if (c === CH_COMMA || c === CH_RPAREN) break; // Column combinator || if (c === CH_PIPE && input.charCodeAt(i + 1) === CH_PIPE) { i += 2; continue; } if (c === CH_SPACE || c === CH_GT || c === CH_PLUS || c === CH_TILDE) { i++; continue; } if (c === CH_HASH) { i = readIdent(input, i + 1); spec.A++; continue; } if (c === CH_DOT) { i = readIdent(input, i + 1); spec.B++; continue; } if (c === CH_LBRACKET) { i = readBalanced(input, i, CH_LBRACKET, CH_RBRACKET); spec.B++; continue; } if (c === CH_COLON) { if (input.charCodeAt(i + 1) === CH_COLON) { i += 2; i = readIdent(input, i); if (input.charCodeAt(i) === CH_LPAREN) i = readBalanced(input, i, CH_LPAREN, CH_RPAREN); spec.C++; continue; } const nameStart = i + 1; const nameEnd = readIdent(input, nameStart); i = nameEnd; // Legacy single-colon pseudo-elements — count as C (pseudo-element), not B if (isLegacyPseudoElement(input, nameStart, nameEnd - nameStart)) { spec.C++; continue; } if (input.charCodeAt(i) === CH_LPAREN) { const innerStart = i + 1; const innerEnd = readBalanced(input, i, CH_LPAREN, CH_RPAREN); // Identify the pseudo-class by comparing chars directly (avoids substring allocation) const nameLen = nameEnd - nameStart; const pcKind = classifyPseudo(input, nameStart, nameLen); switch (pcKind) { case PC_WHERE: i = innerEnd; continue; case PC_IS: case PC_NOT: case PC_HAS: case PC_MATCHES: case PC_WEBKIT_ANY: case PC_MOZ_ANY: { let bestA = 0, bestB = 0, bestC = 0; let j = innerStart; const limit = innerEnd - 1; while (j < limit) { const saved = { A: 0, B: 0, C: 0 }; j = parseSelectorInner(input, j, saved); if (saved.A > bestA || (saved.A === bestA && (saved.B > bestB || (saved.B === bestB && saved.C > bestC)))) { bestA = saved.A; bestB = saved.B; bestC = saved.C; } if (input.charCodeAt(j) === CH_COMMA) j++; else break; } spec.A += bestA; spec.B += bestB; spec.C += bestC; i = innerEnd; continue; } case PC_SLOTTED: { const inner: Specificity = { A: 0, B: 0, C: 0 }; parseSelector(input, innerStart, inner, false); spec.A += inner.A; spec.B += inner.B; spec.C += inner.C; i = innerEnd; continue; } case PC_HOST: case PC_HOST_CTX: { spec.B++; const inner: Specificity = { A: 0, B: 0, C: 0 }; parseSelector(input, innerStart, inner, false); spec.A += inner.A; spec.B += inner.B; spec.C += inner.C; i = innerEnd; continue; } case PC_NTH_CHILD: case PC_NTH_LAST: { spec.B++; const limit = innerEnd - 1; const ofIndex = findOfKeyword(input, innerStart, limit); if (ofIndex !== -1) { let afterOf = ofIndex + 2; while (afterOf < limit && isWhitespaceCC(input.charCodeAt(afterOf))) afterOf++; let bestA = 0, bestB = 0, bestC = 0; let j = afterOf; while (j < limit) { const ts: Specificity = { A: 0, B: 0, C: 0 }; j = parseSelector(input, j, ts, false); if (ts.A > bestA || (ts.A === bestA && (ts.B > bestB || (ts.B === bestB && ts.C > bestC)))) { bestA = ts.A; bestB = ts.B; bestC = ts.C; } if (input.charCodeAt(j) === CH_COMMA) j++; else break; } spec.A += bestA; spec.B += bestB; spec.C += bestC; } i = innerEnd; continue; } default: spec.B++; i = innerEnd; continue; } } else { spec.B++; continue; } } if (c === CH_STAR) { i++; continue; } if (isIdentStartCC(c) || c === CH_PIPE) { while (i < input.length && (isIdentCC(input.charCodeAt(i)) || input.charCodeAt(i) === CH_PIPE)) i++; spec.C++; continue; } i++; } return i; } // Parse a single selector within a functional pseudo-class argument (handles commas at the caller level) function parseSelectorInner(input: string, start: number, spec: Specificity): number { return parseSelector(input, start, spec, false); } /* ---- Pseudo-class classification (avoids substring + switch on string) ---- */ const PC_OTHER = 0; const PC_WHERE = 1; const PC_IS = 2; const PC_NOT = 3; const PC_HAS = 4; const PC_SLOTTED = 5; const PC_HOST = 6; const PC_HOST_CTX = 7; const PC_NTH_CHILD = 8; const PC_NTH_LAST = 9; const PC_MATCHES = 10; const PC_WEBKIT_ANY = 11; const PC_MOZ_ANY = 12; function classifyPseudo(input: string, start: number, len: number): number { // Most common first if (len === 5 && input.charCodeAt(start) === 119) { // 'w'here if (input.charCodeAt(start + 1) === 104 && input.charCodeAt(start + 2) === 101 && input.charCodeAt(start + 3) === 114 && input.charCodeAt(start + 4) === 101) return PC_WHERE; } if (len === 3 && input.charCodeAt(start) === 110) { // 'n'ot if (input.charCodeAt(start + 1) === 111 && input.charCodeAt(start + 2) === 116) return PC_NOT; } if (len === 2 && input.charCodeAt(start) === 105) { // 'i's if (input.charCodeAt(start + 1) === 115) return PC_IS; } if (len === 3 && input.charCodeAt(start) === 104) { // 'h'as / 'h'ost if (input.charCodeAt(start + 1) === 97 && input.charCodeAt(start + 2) === 115) return PC_HAS; } if (len === 4 && input.charCodeAt(start) === 104) { // 'h'ost if (input.charCodeAt(start + 1) === 111 && input.charCodeAt(start + 2) === 115 && input.charCodeAt(start + 3) === 116) return PC_HOST; } if (len === 12 && input.charCodeAt(start) === 104) { // host-context if (input.charCodeAt(start + 4) === CH_DASH && input.charCodeAt(start + 5) === 99) { // Quick check first+last chars, then full if (input.substring(start, start + len) === 'host-context') return PC_HOST_CTX; } } if (len === 7 && input.charCodeAt(start) === 115) { // slotted if (input.substring(start, start + 7) === 'slotted') return PC_SLOTTED; } if (len === 9 && input.charCodeAt(start) === 110) { // nth-child if (input.substring(start, start + 9) === 'nth-child') return PC_NTH_CHILD; } if (len === 14 && input.charCodeAt(start) === 110) { // nth-last-child if (input.substring(start, start + 14) === 'nth-last-child') return PC_NTH_LAST; } if (len === 7 && input.charCodeAt(start) === 109) { // matches if (input.substring(start, start + 7) === 'matches') return PC_MATCHES; } if (len === 11 && input.charCodeAt(start) === CH_DASH) { // -webkit-any if (input.substring(start, start + 11) === '-webkit-any') return PC_WEBKIT_ANY; } if (len === 8 && input.charCodeAt(start) === CH_DASH) { // -moz-any if (input.substring(start, start + 8) === '-moz-any') return PC_MOZ_ANY; } return PC_OTHER; } // Legacy single-colon pseudo-elements that should count as C, not B function isLegacyPseudoElement(input: string, start: number, len: number): boolean { if (len === 6) { // before / after const c0 = input.charCodeAt(start); if (c0 === 98) return input.substring(start, start + 6) === 'before'; // 'b'efore if (c0 === 97) return input.substring(start, start + 6) === 'after'; // 'a'fter (5 chars, won't match — handled below) } if (len === 5 && input.charCodeAt(start) === 97) { // after return input.substring(start, start + 5) === 'after'; } if (len === 10 && input.charCodeAt(start) === 102) { // first-line return input.substring(start, start + 10) === 'first-line'; } if (len === 12 && input.charCodeAt(start) === 102) { // first-letter return input.substring(start, start + 12) === 'first-letter'; } return false; } /* ---- Character classification (charCode-based, no string allocation) ---- */ function isIdentStartCC(code: number): boolean { return (code >= 65 && code <= 90) || (code >= 97 && code <= 122) || code === CH_UNDERSCORE || code === CH_DASH || code === CH_BACKSLASH; } function isIdentCC(code: number): boolean { return (code >= 65 && code <= 90) || (code >= 97 && code <= 122) || (code >= 48 && code <= 57) || code === CH_UNDERSCORE || code === CH_DASH || code === CH_BACKSLASH; } function isWhitespaceCC(code: number): boolean { return code === 32 || code === 9 || code === 10 || code === 13 || code === 12; } function readIdent(input: string, start: number): number { let i = start; while (i < input.length) { const cc = input.charCodeAt(i); if (cc === CH_BACKSLASH) { i += 2; continue; } if (!isIdentCC(cc)) break; i++; } return i; } function readBalanced(input: string, start: number, open: number, close: number): number { let depth = 0, inQuote = 0, i = start; while (i < input.length) { const c = input.charCodeAt(i); if (inQuote) { if (c === CH_BACKSLASH) { i += 2; continue; } if (c === inQuote) inQuote = 0; i++; continue; } if (c === CH_DQUOTE || c === CH_SQUOTE) { inQuote = c; i++; continue; } if (c === open) depth++; else if (c === close) { depth--; if (depth === 0) return i + 1; } i++; } return i; } function findOfKeyword(input: string, start: number, end: number): number { let i = start; while (i <= end - 1) { while (i <= end - 1 && isWhitespaceCC(input.charCodeAt(i))) i++; if (input.charCodeAt(i) === 111 && input.charCodeAt(i + 1) === 102 && // 'o','f' (i + 2 > end - 1 || isWhitespaceCC(input.charCodeAt(i + 2)) || input.charCodeAt(i + 2) === CH_LPAREN)) return i; i++; } return -1; } ================================================ FILE: packages/web-component-designer/src/elements/services/treeStructureService/ITreeStructureChangedEvent.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; export interface ITreeStructureChangedEvent { action: 'add' | 'move' | 'remove' | 'replace' | 'reset' newItems?: IDesignItem[] newStartingIndex?: number oldItems?: IDesignItem[] oldStartingIndex?: number } ================================================ FILE: packages/web-component-designer/src/elements/services/treeStructureService/ITreeStructureService.ts ================================================ export interface ITreeStructureService { } //maybe this service caches a dictionary designitem -> treeelement?, filled by treeView control? ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/ChangeGroup.ts ================================================ import { ITransactionItem } from './ITransactionItem.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { UndoChangeSource } from './IUndoChangeEvent.js'; import { IContentChanged } from '../InstanceServiceContainer.js'; export class ChangeGroup implements ITransactionItem { redoBranches?: ITransactionItem[][]; source: UndoChangeSource; private _contentChanges: IContentChanged[] = []; title: string; get affectedItems(): IDesignItem[] { let s = new Set(); for (let u of this.undoStack) for (let i of u.affectedItems) s.add(i); for (let u of this.redoStack) for (let i of u.affectedItems) s.add(i); return [...s.values()] } private commitHandler: (transactionItem: ChangeGroup) => void; private abortHandler: (transactionItem: ChangeGroup) => void; constructor(title: string, commitHandler: (transactionItem: ChangeGroup) => void, abortHandler: (transactionItem: ChangeGroup) => void, source: UndoChangeSource = 'local') { this.title = title; this.commitHandler = commitHandler; this.abortHandler = abortHandler; this.source = source; } get contentChanges(): IContentChanged[] | null { return this._contentChanges.length > 0 ? this._contentChanges : null; } do(): IContentChanged[] | null { let item: ITransactionItem = null; let changes: IContentChanged[] = []; while (item = this.redoStack.pop()) { try { let result = item.do(); if (result) { changes.push(...result); } this.undoStack.push(item); } catch (err) { throw err; } } return changes.length > 0 ? changes : null; } undo(): IContentChanged[] | null { let item: ITransactionItem = null; let changes: IContentChanged[] = []; while (item = this.undoStack.pop()) { try { let result = item.undo(); if (result) { changes.push(...result); } this.redoStack.push(item); } catch (err) { throw err; } } return changes.length > 0 ? changes : null; }; commit() { this.commitHandler(this); } abort() { this.abortHandler(this); } mergeWith(other: ITransactionItem): boolean { return false; } addCommitedSubchangeGroup(changeGroup: ChangeGroup) { this.undoStack.push(changeGroup); this._recordContentChanges(changeGroup.contentChanges); } public undoStack: ITransactionItem[] = [] public redoStack: ITransactionItem[] = [] public execute(item: ITransactionItem): IContentChanged[] | null { let changes: IContentChanged[] | null = item.do(); this._recordContentChanges(changes); for (let existingItem of this.undoStack) { if (existingItem.mergeWith(item)) return changes; } this.undoStack.push(item); return changes; } private _recordContentChanges(changes: IContentChanged[] | null) { if (changes?.length) this._contentChanges.push(...changes); } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/ITransactionItem.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { IContentChanged } from '../InstanceServiceContainer.js'; export interface ITransactionItem { title?: string readonly affectedItems?: IDesignItem[] do: () => IContentChanged[] | null undo: () => IContentChanged[] | null mergeWith(other: ITransactionItem): boolean; redoBranches?: ITransactionItem[][]; }; ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/IUndoChangeEvent.ts ================================================ import { ITransactionItem } from './ITransactionItem.js'; export type UndoChangeKind = 'execute' | 'undo' | 'redo'; export type UndoChangeSource = 'local' | 'remote'; export interface IUndoChangeEvent { item: ITransactionItem; kind: UndoChangeKind; source: UndoChangeSource; } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/IUndoService.ts ================================================ import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IService } from '../IService.js'; import { ChangeGroup } from './ChangeGroup.js'; import { IUndoChangeEvent, UndoChangeSource } from './IUndoChangeEvent.js'; import { ITransactionItem } from './ITransactionItem.js'; export interface IUndoService extends IService { openGroup(title: string, source?: UndoChangeSource): ChangeGroup; execute(item: ITransactionItem, source?: UndoChangeSource): void; canUndo(): boolean; canRedo(): boolean; clear(); clearTransactionstackIfNotEmpty(); undo(source?: UndoChangeSource); redo(source?: UndoChangeSource); redoTo(transactionItems: ITransactionItem[]); getUndoEntryNames(count?: number): Generator; getUndoEntries(count?: number): Generator; getRedoEntryNames(count?: number): Generator; getRedoEntries(count?: number): Generator; readonly undoCount: number; readonly redoCount: number; readonly onTransaction: TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/UndoService.ts ================================================ import { ITransactionItem } from './ITransactionItem.js'; import { ChangeGroup } from "./ChangeGroup.js"; import { IUndoService } from './IUndoService.js'; import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js'; import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IUndoChangeEvent, UndoChangeKind, UndoChangeSource } from './IUndoChangeEvent.js'; import { IContentChanged } from '../InstanceServiceContainer.js'; /* * Manages a stack of available undo/redo actions */ export class UndoService implements IUndoService { private _undoStack: ITransactionItem[] = []; private _redoStack: ITransactionItem[] = []; private _transactionStack: ChangeGroup[] = []; private _designerCanvas: IDesignerCanvas; private _storeRedoBranches: boolean; constructor(designerCanvas: IDesignerCanvas, storeRedoBranches: boolean = false) { this._designerCanvas = designerCanvas; this._storeRedoBranches = storeRedoBranches; } openGroup(title: string, source: UndoChangeSource = 'local'): ChangeGroup { let t = new ChangeGroup(title, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t), source); this._transactionStack.push(t); return t; } private commitTransactionItem(transactionItem: ChangeGroup) { let itm = this._transactionStack.pop(); if (itm !== transactionItem) { this.clear(); throw "UndoService - Commited Transaction was not the last"; } if (itm.undoStack.length) { if (this._transactionStack.length > 0) { this._transactionStack[this._transactionStack.length - 1].addCommitedSubchangeGroup(itm); } else { if (this._storeRedoBranches && this._redoStack.length) { if (itm.redoBranches == null) itm.redoBranches = []; itm.redoBranches.push(this._redoStack); } this._redoStack = []; this._undoStack.push(itm); } } if (this._transactionStack.length == 0) { this._designerCanvas.extensionManager.refreshAllExtensions(transactionItem.affectedItems); this.emitTransaction(transactionItem, 'execute', (transactionItem).source ?? 'local'); if (transactionItem.contentChanges) this._designerCanvas.instanceServiceContainer.onContentChanged.emit(transactionItem.contentChanges); } } private abortTransactionItem(transactionItem: ChangeGroup) { if (this._transactionStack.length > 0) { let itm = this._transactionStack.pop(); if (itm !== transactionItem) { this.clear(); throw "UndoService - Aborted Transaction was not the last"; } itm.undo(); } } execute(item: ITransactionItem, source: UndoChangeSource = 'local') { let changeItems: IContentChanged[] | null = null; if (this._transactionStack.length == 0) { changeItems = item.do(); if (this._storeRedoBranches && this._redoStack.length) { if (item.redoBranches == null) item.redoBranches = []; item.redoBranches.push(this._redoStack); } this._redoStack = []; this._undoStack.push(item); } else { changeItems = this._transactionStack[this._transactionStack.length - 1].execute(item); } if (this._transactionStack.length == 0) { this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems); this.emitTransaction(item, 'execute', source); if (changeItems) this._designerCanvas.instanceServiceContainer.onContentChanged.emit(changeItems); } } clear() { this._undoStack = []; this._redoStack = []; this._transactionStack = []; } clearTransactionstackIfNotEmpty() { if (this._transactionStack.length) { console.error("transactionStack was not empty, but should be", this._transactionStack); this._transactionStack = []; } } undo(source: UndoChangeSource = 'local') { if (!this.canUndo()) return; if (this._transactionStack.length != 0) throw "Cannot Undo while transaction is running"; let item = this._undoStack.pop(); let changeItems: IContentChanged[] | null = null; try { changeItems = item.undo(); this._redoStack.push(item); } catch (err) { this.clear(); throw err; } this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems); this.emitTransaction(item, 'undo', source); if (changeItems) this._designerCanvas.instanceServiceContainer.onContentChanged.emit(changeItems); } redo(source: UndoChangeSource = 'local') { if (!this.canRedo()) return; if (this._transactionStack.length != 0) throw "Cannot Redo while transaction is running"; let item = this._redoStack.pop(); let changeItems: IContentChanged[] | null = null; try { changeItems = item.do(); this._undoStack.push(item); } catch (err) { this.clear(); throw err; } this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems); this.emitTransaction(item, 'redo', source); if (changeItems) this._designerCanvas.instanceServiceContainer.onContentChanged.emit(changeItems); } redoTo(transactionItems: ITransactionItem[]) { this._redoStack = transactionItems.toReversed(); for (let n = 0; n < transactionItems.length; n++) this.redo(); } canUndo(): boolean { return this._undoStack.length > 0; } canRedo(): boolean { return this._redoStack.length > 0; } get undoCount(): number { return this._undoStack.length; } get redoCount(): number { return this._redoStack.length; } *getUndoEntryNames(count: number = 999): Generator { for (let i = Math.min(this._undoStack.length, count) - 1; i >= 0; i--) yield this._undoStack[i].title; } *getUndoEntries(count: number = 999): Generator { for (let i = Math.min(this._undoStack.length, count) - 1; i >= 0; i--) yield this._undoStack[i]; } *getRedoEntryNames(count: number = 999): Generator { for (let i = Math.min(this._redoStack.length, count) - 1; i >= 0; i--) yield this._redoStack[i].title; } *getRedoEntries(count: number = 999): Generator { for (let i = Math.min(this._redoStack.length, count) - 1; i >= 0; i--) yield this._redoStack[i]; } /** Event emitted when a transaction occurs, needed for remote collaboration */ readonly onTransaction = new TypedEvent(); private emitTransaction(item: ITransactionItem, kind: UndoChangeKind, source: UndoChangeSource) { this.onTransaction.emit({ item, kind, source }); } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/AttributeAndPropertyChangeAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IBinding } from '../../../item/IBinding.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class AttributeAndPropertyChangeAction implements ITransactionItem { constructor(designItem: IDesignItem, attributeName: string, propertyName: string, newValue: any | IBinding | null, oldValue: any | IBinding | null) { this.title = "Change Attribute & Property" + attributeName + " of <" + designItem.name + ">"; this.designItem = designItem; this.attributeName = attributeName; this.propertyName = propertyName; this.newValue = newValue; this.oldValue = oldValue; } title?: string; get affectedItems() { return [this.designItem]; } undo(): IContentChanged[] | null { this.designItem.element[this.propertyName] = this.oldValue; if (this.oldValue == null) { this.designItem._withoutUndoRemoveAttribute(this.attributeName); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.attributeName, oldValue: this.newValue, newValue: null }]; } else { let val = this.oldValue; if (typeof this.oldValue !== 'string') val = this.oldValue.toString(); this.designItem._withoutUndoSetAttribute(this.attributeName, val); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.attributeName, oldValue: this.newValue, newValue: val }]; } } do(): IContentChanged[] | null { this.designItem.element[this.propertyName] = this.newValue; if (this.newValue == null) { this.designItem._withoutUndoRemoveAttribute(this.attributeName); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.attributeName, oldValue: this.newValue, newValue: null }]; } else { let val = this.newValue; if (typeof this.newValue !== 'string') val = this.newValue.toString(); this.designItem._withoutUndoSetAttribute(this.attributeName, val); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.attributeName, oldValue: this.oldValue, newValue: val }]; } } public designItem: IDesignItem; public attributeName: any; public propertyName: any; public newValue: any; public oldValue: any; mergeWith(other: ITransactionItem) { if (other instanceof AttributeAndPropertyChangeAction && this.designItem === other.designItem && this.attributeName === other.attributeName && this.propertyName === other.propertyName) { this.newValue = other.newValue; return true; } return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/AttributeChangeAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IBinding } from '../../../item/IBinding.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class AttributeChangeAction implements ITransactionItem { constructor(designItem: IDesignItem, name: string, newValue: string | IBinding | null, oldValue: string | IBinding | null) { this.title = "Change Attribute " + name + " of <" + designItem.name + ">"; this.designItem = designItem; this.name = name; this.newValue = newValue; this.oldValue = oldValue; } title?: string; get affectedItems() { return [this.designItem]; } undo(): IContentChanged[] | null { if (this.oldValue == null) { this.designItem._withoutUndoRemoveAttribute(this.name); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.name, oldValue: this.newValue, newValue: null }]; } else { let val = this.oldValue; if (typeof this.oldValue !== 'string') val = this.oldValue.toString(); this.designItem._withoutUndoSetAttribute(this.name, val); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.name, oldValue: this.newValue, newValue: val }]; } } do(): IContentChanged[] | null { if (this.newValue == null) { this.designItem._withoutUndoRemoveAttribute(this.name); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.name, oldValue: this.newValue, newValue: null }]; } else { let val = this.newValue; if (typeof this.newValue !== 'string') val = this.newValue.toString(); this.designItem._withoutUndoSetAttribute(this.name, val); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'attribute', name: this.name, oldValue: this.oldValue, newValue: val }]; } } public designItem: IDesignItem; public name: string; public newValue: any; public oldValue: any; mergeWith(other: ITransactionItem) { if (other instanceof AttributeChangeAction && this.designItem === other.designItem && this.name === other.name) { this.newValue = other.newValue; return true; } return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/CssStyleChangeAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class CssStyleChangeAction implements ITransactionItem { constructor(designItem: IDesignItem, name: string, newValue: any, oldValue: any, newImportant: boolean = false, oldImportant: boolean = false) { this.title = "Change Css Style " + name + " of <" + designItem.name + ">"; this.designItem = designItem; this.name = name; this.newValue = newValue; this.oldValue = oldValue; this.newImportant = newImportant; this.oldImportant = oldImportant; } title?: string; get affectedItems() { return [this.designItem]; } undo(): IContentChanged[] | null { if (this.oldValue === '' || this.oldValue == null) { this.designItem._withoutUndoRemoveStyle(this.name); if ((this.name).startsWith('--')) { (this.designItem.element).style.removeProperty(this.name); } else { (this.designItem.element).style[this.name] = ''; } return [{ changeType: 'changed', designItems: this.affectedItems, type: 'css', name: this.name, oldValue: this.newValue, newValue: null }]; } else { this.designItem._withoutUndoSetStyle(this.name, this.oldValue, this.oldImportant); (this.designItem.element).style.setProperty(this.name, this.oldValue, this.oldImportant ? 'important' : ''); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'css', name: this.name, oldValue: this.newValue, newValue: this.oldValue }]; } } do(): IContentChanged[] | null { if (this.newValue === '' || this.newValue == null) { this.designItem._withoutUndoRemoveStyle(this.name); if ((this.name).startsWith('--')) { (this.designItem.element).style.removeProperty(this.name); } else { (this.designItem.element).style[this.name] = ''; } return [{ changeType: 'changed', designItems: this.affectedItems, type: 'css', name: this.name, oldValue: this.oldValue, newValue: null }]; } else { this.designItem._withoutUndoSetStyle(this.name, this.newValue, this.newImportant); (this.designItem.element).style.setProperty(this.name, this.newValue, this.newImportant ? 'important' : ''); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'css', name: this.name, oldValue: this.oldValue, newValue: this.newValue }]; } } public designItem: IDesignItem; public name: string; public newValue: any; public oldValue: any; public newImportant: boolean; public oldImportant: boolean; mergeWith(other: ITransactionItem) { return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/DeleteAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { DomHelper } from '@node-projects/base-custom-webcomponent'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class DeleteAction implements ITransactionItem { constructor(deletedItems: IDesignItem[]) { this.title = "Delete Items"; this.deletedItems = deletedItems; } title?: string; get affectedItems() { return this.deletedItems; } undo(): IContentChanged[] | null { for (let n = 0; n < this.deletedItems.length; n++) { this._parentItems[n]._insertChildInternal(this.deletedItems[n], this._parentIndexes[n]); } return [{ changeType: 'added', designItems: this.deletedItems }]; } do(): IContentChanged[] | null { this._parentItems = []; this._parentIndexes = []; for (let n = 0; n < this.deletedItems.length; n++) { this._parentItems.push(this.deletedItems[n].parent); this._parentIndexes.push(DomHelper.nodeIndex(this.deletedItems[n].element)); } for (let n = 0; n < this.deletedItems.length; n++) { this.deletedItems[n].parent._removeChildInternal(this.deletedItems[n]); } return [{ changeType: 'removed', designItems: this.deletedItems }]; } public deletedItems: IDesignItem[]; private _parentItems: IDesignItem[]; private _parentIndexes: number[]; mergeWith(other: ITransactionItem) { return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/InsertAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class InsertAction implements ITransactionItem { constructor(containerItem: IDesignItem, index: number, newItem: IDesignItem) { this.title = "Insert Item"; this.containerItem = containerItem; this.index = index; this.newItem = newItem; } title?: string; get affectedItems() { return [this.containerItem, this.newItem]; } undo(): IContentChanged[] | null { this.newItem.parent._removeChildInternal(this.newItem); return [{ changeType: 'removed', designItems: [this.newItem] }]; } do(): IContentChanged[] | null { this.containerItem._insertChildInternal(this.newItem, this.index); return [{ changeType: 'added', designItems: [this.newItem] }]; } public containerItem: IDesignItem; public index: number; public newItem: IDesignItem; mergeWith(other: ITransactionItem) { return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/InsertChildAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class InsertChildAction implements ITransactionItem { constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number) { this.title = "Move or Insert Item"; this.designItem = designItem; this.newParent = newParent; this.newIndex = newIndex; } title?: string; get affectedItems() { if (this.oldParent) return [this.designItem, this.newParent, this.oldParent]; return [this.designItem, this.newParent]; } undo(): IContentChanged[] | null { if (this.oldParent) { this.oldParent._insertChildInternal(this.designItem, this.oldIndex); return [{ changeType: 'moved', designItems: [this.designItem] }]; } else { this.designItem.parent._removeChildInternal(this.designItem); return [{ changeType: 'removed', designItems: [this.designItem] }]; } } do(): IContentChanged[] | null { this.oldParent = this.designItem.parent; if (this.oldParent) this.oldIndex = this.designItem.parent.indexOf(this.designItem); this.newParent._insertChildInternal(this.designItem, this.newIndex); return [{ changeType: this.oldParent ? 'moved' : 'added', designItems: [this.designItem] }]; } public designItem: IDesignItem; public newParent: IDesignItem; public newIndex: number; public oldParent: IDesignItem; public oldIndex: number; public newItem: IDesignItem; mergeWith(other: ITransactionItem) { return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/PropertyChangeAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { setDeepValue } from '../../../helper/Helper.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class PropertyChangeAction implements ITransactionItem { constructor(designItem: IDesignItem, name: string, newValue: any, oldValue: any) { this.title = "Change Property " + name + " of <" + designItem.name + ">"; this.designItem = designItem; this.name = name; this.newValue = newValue; this.oldValue = oldValue; } title?: string; get affectedItems() { return [this.designItem]; } undo(): IContentChanged[] | null { setDeepValue(this.designItem.node, this.name, this.oldValue); return [{ changeType: 'changed', type: 'property', name: this.name, designItems: [this.designItem] }]; } do(): IContentChanged[] | null { setDeepValue(this.designItem.node, this.name, this.newValue); return [{ changeType: 'changed', type: 'property', name: this.name, designItems: [this.designItem] }]; } public designItem: IDesignItem; public name: string; public newValue: any; public oldValue: any; mergeWith(other: ITransactionItem) { if (other instanceof PropertyChangeAction && this.designItem === other.designItem && this.name === other.name) { this.newValue = other.newValue; return true; } return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/SelectionChangedAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { ISelectionService } from '../../selectionService/ISelectionService.js'; import { SelectionService } from '../../selectionService/SelectionService.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class SelectionChangedAction implements ITransactionItem { constructor(oldSelection: IDesignItem[], newSelection: IDesignItem[], selectionService: ISelectionService) { this.title = "Change Selection"; this.oldSelection = oldSelection; this.newSelection = newSelection; this.selectionService = selectionService; } title?: string; get affectedItems() { if (this.oldSelection && this.newSelection) return [...this.oldSelection, ...this.newSelection]; if (this.oldSelection) return [...this.oldSelection]; return [...this.newSelection]; } undo(): IContentChanged[] | null { (this.selectionService)._withoutUndoSetSelectedElements(this.oldSelection); return null; } do(): IContentChanged[] | null { (this.selectionService)._withoutUndoSetSelectedElements(this.newSelection); return null; } public oldSelection: IDesignItem[]; public newSelection: IDesignItem[]; public selectionService: ISelectionService mergeWith(other: ITransactionItem) { return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/SetDesignItemsAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class SetDesignItemsAction implements ITransactionItem { constructor(newDesignItems: IDesignItem[], oldDesignItems: IDesignItem[]) { this.title = "Set all DesignItems"; this.newDesignItems = newDesignItems; this.oldDesignItems = oldDesignItems; } title?: string; get affectedItems() { return this.newDesignItems; } undo(): IContentChanged[] | null { this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.oldDesignItems); return null; } do(): IContentChanged[] | null { this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.newDesignItems); return null; } public newDesignItems: IDesignItem[]; public oldDesignItems: IDesignItem[]; mergeWith(other: ITransactionItem) { return false } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/StylesheetChangedAction.ts ================================================ import { IContentChanged } from '../../InstanceServiceContainer.js'; import { IStylesheetService } from '../../stylesheetService/IStylesheetService.js'; import { ITransactionItem } from '../ITransactionItem.js'; export class StylesheetChangedAction implements ITransactionItem { private stylesheetService: IStylesheetService; constructor(stylesheetService: IStylesheetService, name: string, newValue: string, oldValue: string) { this.title = "Changed Css Stylesheet: " + name; this.stylesheetService = stylesheetService; this.name = name; this.newValue = newValue; this.oldValue = oldValue; } title?: string; get affectedItems() { return []; } undo(): IContentChanged[] | null { this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.oldValue); return null; } do(): IContentChanged[] | null { this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.newValue); return null; } public name: string; public newValue: string; public oldValue: string; mergeWith(other: ITransactionItem) { return false; } } ================================================ FILE: packages/web-component-designer/src/elements/services/undoService/transactionItems/TextContentChangeAction.ts ================================================ import { ITransactionItem } from '../ITransactionItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IBinding } from '../../../item/IBinding.js'; import { IContentChanged } from '../../InstanceServiceContainer.js'; export class TextContentChangeAction implements ITransactionItem { constructor(designItem: IDesignItem, newValue: string | IBinding | null, oldValue: string | IBinding | null) { this.title = "Change TextContent from '" + oldValue + "' to '" + newValue + "'"; this.designItem = designItem; this.newValue = newValue; this.oldValue = oldValue; } title?: string; get affectedItems() { return [this.designItem]; } undo(): IContentChanged[] | null { this.designItem.element.textContent = this.oldValue; this.designItem.refreshRenderedDesignItem(); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'property', name: 'textContent', oldValue: this.newValue, newValue: this.oldValue }]; } do(): IContentChanged[] | null { this.designItem.element.textContent = this.newValue; this.designItem.refreshRenderedDesignItem(); return [{ changeType: 'changed', designItems: this.affectedItems, type: 'property', name: 'textContent', oldValue: this.oldValue, newValue: this.newValue }]; } public designItem: IDesignItem; public newValue: any; public oldValue: any; mergeWith(other: ITransactionItem) { return false } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/bindableObjectsBrowser/IBindableObjectsBrowser.ts ================================================ import { TypedEvent } from "@node-projects/base-custom-webcomponent"; import { BindableObjectsTarget } from "../../services/bindableObjectsService/BindableObjectsTarget.js"; import { InstanceServiceContainer } from "../../services/InstanceServiceContainer.js"; import { ServiceContainer } from "../../services/ServiceContainer.js"; import { IBindableObject } from "../../services/bindableObjectsService/IBindableObject.js"; export interface IBindableObjectsBrowser extends HTMLElement { initialize(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, bindableObjectsTarget: BindableObjectsTarget): Promise; selectedObject: IBindableObject; objectDoubleclicked: TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/codeView/ICodeView.ts ================================================ import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; import { IDisposable } from '../../../interfaces/IDisposable.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js'; import { TypedEvent } from '@node-projects/base-custom-webcomponent'; export interface ICodeView extends IUiCommandHandler, IDisposable, HTMLElement { update(code: string, instanceServiceContainer?: InstanceServiceContainer) : void; getText(): string; setSelection(position: IStringPosition): void; focusEditor(): void; onTextChanged: TypedEvent; readOnly?: boolean; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/codeView/code-view-simple.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { ICodeView } from './ICodeView.js'; import { IActivateable } from '../../../interfaces/IActivateable.js'; import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js'; import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; import { IUiCommand } from '../../../commandHandling/IUiCommand.js'; export class CodeViewSimple extends BaseCustomWebComponentConstructorAppend implements ICodeView, IActivateable, IUiCommandHandler { dispose(): void { } canvasElement: HTMLElement; elementsToPackages: Map; public onTextChanged = new TypedEvent(); private _text: HTMLTextAreaElement; static override readonly style = css` :host { display: block; height: 100%; width: 100%; } textarea { height: 100%; width: 100%; resize: none; white-space: nowrap; box-sizing: border-box; } `; static override readonly template = html`
`; executeCommand(command: IUiCommand) { } canExecuteCommand(command: IUiCommand) { return false; } async ready() { this._text = this._getDomElement('text'); } focusEditor() { requestAnimationFrame(() => { this.focus(); this._text.focus(); }); } activated() { } update(code) { this._text.value = code; } getText() { return this._text.value; } setSelection(position: IStringPosition) { this._text.setSelectionRange(position.start, position.start + position.length); } } customElements.define('node-projects-code-view-simple', CodeViewSimple); ================================================ FILE: packages/web-component-designer/src/elements/widgets/debugView/debug-view.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from "../../item/IDesignItem.js"; import { DesignItem } from "../../item/DesignItem.js"; function generateSelector(element: Element) { if (!element) return ''; let selector, tag = element.nodeName.toLowerCase(); if (element.id) { selector = '#' + element.getAttribute('id'); } else if (element.getAttribute('class')) { selector = '.' + element.getAttribute('class').split(' ').join('.'); } return selector ? tag + selector : tag; } const getClosestStackingContext = function (node: Node) { // the root element (HTML). if (!node || node.nodeName === 'HTML' || node.nodeName === '#document') { return { node: document.documentElement, reason: 'root' }; } // handle shadow root elements. if (node.nodeName === '#document-fragment') { return getClosestStackingContext((node).host); } const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node); // position: fixed or sticky. if (computedStyle.position === 'fixed' || computedStyle.position === 'sticky') { return { node: node, reason: `position: ${computedStyle.position}` }; } // positioned (absolutely or relatively) with a z-index value other than "auto". if (computedStyle.zIndex !== 'auto' && computedStyle.position !== 'static') { return { node: node, reason: `position: ${computedStyle.position}; z-index: ${computedStyle.zIndex}` }; } // elements with an opacity value less than 1. if (computedStyle.opacity !== '1') { return { node: node, reason: `opacity: ${computedStyle.opacity}` }; } // elements with a transform value other than "none". if (computedStyle.transform !== 'none') { return { node: node, reason: `transform: ${computedStyle.transform}` }; } // elements with a scale value other than "none". if (computedStyle.scale !== 'none') { return { node: node, reason: `scale: ${computedStyle.scale}` }; } // elements with a transform value other than "none". if (computedStyle.translate !== 'none') { return { node: node, reason: `translate: ${computedStyle.translate}` }; } // elements with a transform value other than "none". if (computedStyle.rotate !== 'none') { return { node: node, reason: `rotate: ${computedStyle.rotate}` }; } // elements with a mix-blend-mode value other than "normal". if (computedStyle.mixBlendMode !== 'normal') { return { node: node, reason: `mixBlendMode: ${computedStyle.mixBlendMode}` }; } // elements with a filter value other than "none". if (computedStyle.filter !== 'none') { return { node: node, reason: `filter: ${computedStyle.filter}` }; } // elements with a filter value other than "none". if (computedStyle.backdropFilter !== 'none') { return { node: node, reason: `backdropFilter: ${computedStyle.backdropFilter}` }; } // elements with a perspective value other than "none". if (computedStyle.perspective !== 'none') { return { node: node, reason: `perspective: ${computedStyle.perspective}` }; } // elements with a clip-path value other than "none". if (computedStyle.clipPath !== 'none') { return { node: node, reason: `clip-path: ${computedStyle.clipPath} ` }; } // elements with a mask value other than "none". const mask = computedStyle.mask || computedStyle.webkitMask; if (mask !== 'none' && mask !== undefined) { return { node: node, reason: `mask: ${mask}` }; } // elements with a mask-image value other than "none". const maskImage = computedStyle.maskImage || computedStyle.webkitMaskImage; if (maskImage !== 'none' && maskImage !== undefined) { return { node: node, reason: `mask-image: ${maskImage}` }; } // elements with a mask-border value other than "none". //@ts-ignore const maskBorder = computedStyle.maskBorder || computedStyle.webkitMaskBorder; if (maskBorder !== 'none' && maskBorder !== undefined) { return { node: node, reason: `mask-border: ${maskBorder}` }; } // elements with isolation set to "isolate". if (computedStyle.isolation === 'isolate') { return { node: node, reason: `isolation: ${computedStyle.isolation}` }; } // transform or opacity in will-change even if you don't specify values for these attributes directly. if (computedStyle.willChange === 'transform' || computedStyle.willChange === 'opacity' || computedStyle.willChange === 'scale' || computedStyle.willChange === 'translate' || computedStyle.willChange === 'rotate') { return { node: node, reason: `willChange: ${computedStyle.willChange}` }; } // an item with a z-index value other than "auto". if (computedStyle.zIndex !== 'auto') { const parentStyle = node.ownerDocument.defaultView.getComputedStyle(node.parentNode); // with a flex|inline-flex parent. if (parentStyle.display === 'flex' || parentStyle.display === 'inline-flex') { return { node: node, reason: `flex-item; z-index: ${computedStyle.zIndex}`, }; // with a grid parent. } else if (parentStyle.grid !== 'none / none / none / row / auto / auto') { return { node: node, reason: `child of grid container; z-index: ${computedStyle.zIndex}`, }; } } // contain with a value of layout, or paint, or a composite value that includes either of them const contain = computedStyle.contain; if (['layout', 'paint', 'strict', 'content'].indexOf(contain) > -1 || contain.indexOf('paint') > -1 || contain.indexOf('layout') > -1 ) { return { node: node, reason: `contain: ${contain}`, }; } return getClosestStackingContext(node.parentNode); }; export class DebugView extends BaseCustomWebComponentConstructorAppend { public static override readonly template = html`
Styling
display[[?this.computedStyle?.display]]
position[[?this.computedStyle?.position]]
visibility[[?this.computedStyle?.visibility]]
pointerEvents[[?this.computedStyle?.pointerEvents]]
zIndex[[?this.computedStyle?.zIndex]]
Context
offsetParent[[?this.selectedElementOffsetParentText]]
createsStackingContext[[this.createsStackingContext]]
stackingContextReason[[this.createsStackingContextReason]]
stackingContextParent[[?this.parentStackingContextText]]
`; public static override readonly style = css` :host { overflow: auto; height: 100%; display: block; font-size: 12px; } table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } table td, table th { border: 1px solid #ddd; padding: 2px 4px; } table tr:nth-child(even){background-color: #f2f2f2;} table tr:hover {background-color: #ddd;} table th { text-align: left; background-color: #989898; color: white; } .lnk { color: blue; } .lnk:hover { text-decoration: underline; cursor: pointer; }`; private _ready: boolean; computedStyle: CSSStyleDeclaration; createsStackingContext: boolean = ''; createsStackingContextReason: string = ''; parentStackingContext: Element; parentStackingContextText: string; selectedElementOffsetParent: Element; selectedElementOffsetParentText: string; constructor() { super(); this._restoreCachedInititalValues(); } ready() { this._parseAttributesToProperties(); this._bindingsParse(); this._ready = true; } _clickLink(e: MouseEvent, target: 'offsetParent' | 'stackingContextParent') { if (target == 'offsetParent') { if (this.selectedElementOffsetParent) { let di = DesignItem.GetDesignItem(this.selectedElementOffsetParent); di.instanceServiceContainer.selectionService.setSelectedElements([di]); } } else if (target == 'stackingContextParent') { if (this.parentStackingContext) { let di = DesignItem.GetDesignItem(this.parentStackingContext); di.instanceServiceContainer.selectionService.setSelectedElements([di]); } } } update(designItem: IDesignItem) { if (this._ready) { requestAnimationFrame(() => { let element = designItem?.element; if (element?.nodeType == 3) element = element.parentNode as Element; if (element && element.nodeType != 8 && element.nodeType != 11) { this.computedStyle = element.ownerDocument.defaultView.getComputedStyle(element); this.selectedElementOffsetParent = (element).offsetParent; if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element || this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement) { this.selectedElementOffsetParentText = null; this.selectedElementOffsetParent = null; } else this.selectedElementOffsetParentText = generateSelector((element).offsetParent); if (element && element.nodeType === 1) { const closest = getClosestStackingContext(element); this.createsStackingContext = element === closest.node; this.createsStackingContextReason = this.createsStackingContext ? closest.reason : 'not a stacking context'; //@ts-ignore this.parentStackingContext = closest.node; if (this.createsStackingContext && element.nodeName !== 'HTML') { //@ts-ignore this.parentStackingContext = getClosestStackingContext(element.parentNode).node; } if (this.parentStackingContext == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement || this.parentStackingContext == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement.parentElement) { this.parentStackingContextText = null; this.parentStackingContext = null; } else this.parentStackingContextText = generateSelector(this.parentStackingContext); } } else { //@ts-ignore this.computedStyle = {}; this.createsStackingContext = false; this.createsStackingContextReason = ''; this.createsStackingContext = false; this.selectedElementOffsetParent = null; this.selectedElementOffsetParentText = null; this.parentStackingContext = null; this.parentStackingContextText = null; } this._bindingsRefresh(); }); } } } customElements.define('node-projects-debug-view', DebugView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/demoView/IDemoView.ts ================================================ import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; import { IDisposable } from '../../../interfaces/IDisposable.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { ServiceContainer } from '../../services/ServiceContainer.js'; export interface IDemoView extends IUiCommandHandler, IDisposable, HTMLElement { display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string); stopDisplay?: () => void; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/demoView/demoView.ts ================================================ import { IDemoView } from './IDemoView.js'; import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent'; import { ServiceContainer } from '../../services/ServiceContainer.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; import { IUiCommand } from '../../../commandHandling/IUiCommand.js'; import { IDisposable } from '../../../interfaces/IDisposable.js'; export class DemoView extends BaseCustomWebComponentLazyAppend implements IDemoView, IUiCommandHandler, IDisposable { private _placeholder: HTMLDivElement; private _loading: HTMLDivElement; static override readonly style = css` :host { display: block; overflow: hidden; background: white; height: 100%; width: 100%; position: relative; } #placeholder { position: absolute; left: 24px; height: 100%; width: calc(100% - 24px); } #loading { position: absolute; top: 60px; left: 20px; } #left { position:absolute; left: 0; top: 0; height: 100%; width: 24px; border-right: solid white 1px; box-sizing: border-box; background: black; } span { color: white; rotate: 270deg; display: block; position: absolute; top: 35px; left: -38px; font-weight: 600; font-family: monospace; font-size: 24px; }`; constructor() { super(); this._placeholder = document.createElement('div'); this._placeholder.id = 'placeholder'; this._placeholder.style.transform = 'scale(1)'; //to fix position: static alignment this.shadowRoot.appendChild(this._placeholder) this._loading = document.createElement('div'); this._loading.id = 'loading'; this._loading.textContent = '🛀 Hold on, loading...'; this.shadowRoot.appendChild(this._loading); const div = document.createElement("div"); div.id = "left" const span = document.createElement("span"); span.innerText = "PREVIEW"; div.appendChild(span); this.shadowRoot.appendChild(div); } dispose(): void { } executeCommand: (command: IUiCommand) => void; canExecuteCommand: (command: IUiCommand) => boolean; async display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string) { this._loading.hidden = false; await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style); this._loading.hidden = true; } } customElements.define('node-projects-demo-view', DemoView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/DesignContext.ts ================================================ import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { IDesignContext } from './IDesignContext.js'; export class DesignContext implements IDesignContext { public imports: string[] = []; public npmPackages: string[] = []; public extensionOptions: { [key: string]: any; gridExtensionShowOverlay: boolean; flexboxExtensionShowOverlay: boolean; invisibleElementExtensionShowOverlay: boolean; enableStylesheetService: boolean; basicStackedToolbarExtensionShowOverlay: boolean; simulateHoverOnHover: boolean; selectUnhitableElements: boolean; } = { gridExtensionShowOverlay: false, flexboxExtensionShowOverlay: false, invisibleElementExtensionShowOverlay: false, enableStylesheetService: false, basicStackedToolbarExtensionShowOverlay: false, simulateHoverOnHover: false, selectUnhitableElements: true, }; extensionOptionsChanged = new TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/DomConverter.ts ================================================ import { IDesignItem } from "../../item/IDesignItem.js"; import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js"; import { SimpleTextWriter } from "../../helper/SimpleTextWriter.js"; export class DomConverter { public static normalizeAttributeValue(value: string | number, useSingleQuotes = false) { if (typeof value === 'number') value = value.toString(); if (value) { if (useSingleQuotes) return value.replaceAll('&', '&').replaceAll('\'', ''').replaceAll('<', '<').replaceAll('>', '>'); return value.replaceAll('&', '&').replaceAll('"', '"').replaceAll('<', '<').replaceAll('>', '>'); } return value.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>'); } public static normalizeContentValue(value: string) { if (value) return value.replaceAll('&', '&').replaceAll('<', '<').replaceAll(' ', ' '); // !caution! -> this is not normal space, it's nbsp return value; } public static IsSelfClosingElement(tag: string) { return tag === 'area' || tag === 'base' || tag === 'br' || tag === 'col' || tag === 'embed' || tag === 'hr' || tag === 'img' || tag === 'input' || tag === 'keygen' || tag === 'link' || tag === 'meta' || tag === 'param' || tag === 'source' || tag === 'track' || tag === 'wbr'; } public static ConvertToString(designItems: IDesignItem[], beautifyOutput?: boolean, updatePositions:boolean = false) { let itw = beautifyOutput !== false ? new IndentedTextWriter() : new SimpleTextWriter(); //TODO: check how we could support this beautify here, cause it's now a setting of the writer... //let options: HtmlWriterOptions = { beautifyOutput: beautifyOutput !== false, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' }; designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, updatePositions); return itw.getString(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/IDesignContext.ts ================================================ import { TypedEvent } from "@node-projects/base-custom-webcomponent"; export interface IDesignContext { imports: string[]; npmPackages: string[]; extensionOptions: { [key: string]: any; gridExtensionShowOverlay: boolean; flexboxExtensionShowOverlay: boolean; invisibleElementExtensionShowOverlay: boolean; enableStylesheetService: boolean; basicStackedToolbarExtensionShowOverlay: boolean; simulateHoverOnHover: boolean; selectUnhitableElements: boolean; }; extensionOptionsChanged: TypedEvent; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/IDesignerCanvas.ts ================================================ //import { PointerActionType } from '../../../enums/PointerActionType.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { ServiceContainer } from '../../services/ServiceContainer.js'; import { Snaplines } from './Snaplines.js'; import { IExtensionManager } from './extensions/IExtensionManger.js'; import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; import { IPoint } from '../../../interfaces/IPoint.js'; import { OverlayLayerView } from './overlayLayerView.js'; import { IRect } from "../../../interfaces/IRect.js"; import { ISize } from "../../../interfaces/ISize.js"; import { ITool } from "./tools/ITool.js"; export interface IDesignerCanvas extends IUiCommandHandler, HTMLElement { readOnly: boolean; readonly serviceContainer: ServiceContainer; readonly instanceServiceContainer: InstanceServiceContainer; readonly containerBoundingRect: DOMRect; readonly outerRect: DOMRect; readonly rootDesignItem: IDesignItem; readonly overlayLayer: OverlayLayerView; readonly extensionManager: IExtensionManager; readonly clickOverlay: HTMLDivElement; readonly snapLines: Snaplines; readonly shadowRoot: ShadowRoot | null; readonly alignOnGrid: boolean; readonly alignOnSnap: boolean; readonly gridSize: number; raiseDesignItemsChanged: (designItems: IDesignItem[], action: 'resize' | 'place', operationFinished: boolean) => void readonly iframes: HTMLIFrameElement[]; zoomFactor: number; designerOffsetWidth: number; designerOffsetHeight: number; readonly designerPixelSize: { width: number, height: number }; readonly scaleFactor: number; canvasOffset: IPoint; readonly containerOffset: IPoint; canvas: HTMLElement; pauseAnimations: boolean; additionalStyles: CSSStyleSheet[]; ignoreEvent(event: Event); initialize(serviceContainer: ServiceContainer); getNormalizedEventCoordinates(event: MouseEvent): IPoint; getViewportCoordinates(event: MouseEvent): IPoint; getNormalizedElementCoordinates(element: Element): IRect; getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & { realWidth: number, realHeight: number } getNormalizedElementCoordinates(element: Element, ignoreScalefactor?: boolean): IRect; captureActiveTool(tool: ITool); releaseActiveTool(); readonly activeTool: ITool; getDesignSurfaceDimensions(): ISize; getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint; getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean); elementsFromPoint(x: number, y: number): Element[]; showHoverExtension(element: Element, event: Event); setDesignItems(designItems: IDesignItem[]); _internalSetDesignItems(designItems: IDesignItem[]); getDesignItemById(id: string): IDesignItem; querySelectorDesignItem(selector: string): IDesignItem; querySelectorAllDesignItems(selector: string): IDesignItem[]; zoomTowardsPoint(point: IPoint, scalechange: number): void; zoomPoint(canvasPoint: IPoint, newZoom: number): void; zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void; showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void; lazyTriggerReparseDocumentStylesheets(); } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/Snaplines.ts ================================================ import type { IDesignItem } from '../../item/IDesignItem.js'; import type { IPoint } from '../../../interfaces/IPoint.js'; import type { ISize } from '../../../interfaces/ISize.js'; import { OverlayLayerView } from './overlayLayerView.js'; import { OverlayLayer } from "./extensions/OverlayLayer.js"; import { IRect } from "../../../interfaces/IRect.js"; const overlayLayer = OverlayLayer.Normal; export class Snaplines { public snapOffset = 5; private _overlayLayerView: OverlayLayerView; private _containerItem: IDesignItem; private _positionsH: [number, IRect][] = []; private _positionsMiddleH: [number, IRect][] = []; private _positionsV: [number, IRect][] = []; private _positionsMiddleV: [number, IRect][] = []; private _outerRect: DOMRect; constructor(overlayLayer: OverlayLayerView) { this._overlayLayerView = overlayLayer; } initialize(containerItem: IDesignItem) { //add snapline layer this._containerItem = containerItem; } clearSnaplines() { if (this._overlayLayerView.removeAllNodesWithClass) this._overlayLayerView.removeAllNodesWithClass('svg-snapline'); this._positionsH = []; this._positionsMiddleH = []; this._positionsV = []; this._positionsMiddleV = []; } calculateSnaplines(ignoredItems: IDesignItem[]) { this.clearSnaplines(); const providedSnaplines = this._containerItem.serviceContainer.snaplinesProviderService.provideSnaplines(this._containerItem, ignoredItems); this._outerRect = providedSnaplines.outerRect; this._positionsH = providedSnaplines.positionsH; this._positionsMiddleH = providedSnaplines.positionsMiddleH; this._positionsV = providedSnaplines.positionsV; this._positionsMiddleV = providedSnaplines.positionsMiddleV; } //return the snapped position snapToPosition(position: IPoint, size: ISize, moveDirection: IPoint): IPoint { let minDiff = this.snapOffset + 1; let pH = undefined; let posH = undefined; for (let i = 0; i < this._positionsH.length; i++) { let akDiff1 = Math.abs(this._positionsH[i][0] - position.x); if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) { minDiff = akDiff1; pH = []; posH = this._positionsH[i][0]; } let akDiff2: number; if (size) { akDiff2 = Math.abs(position.x + size.width - this._positionsH[i][0]); if (akDiff2 < minDiff || (akDiff2 === minDiff && pH === undefined)) { minDiff = akDiff2; pH = []; posH = this._positionsH[i][0] - size.width; } } if (akDiff1 === minDiff) { pH.push(this._positionsH[i][1]); } if (size) { if (akDiff2 === minDiff && akDiff1 !== minDiff) { pH.push(this._positionsH[i][1]); } } } if (size) { for (let i = 0; i < this._positionsMiddleH.length; i++) { let akDiff1 = Math.abs(this._positionsMiddleH[i][0] - (position.x + size.width / 2)); if (akDiff1 < minDiff || (akDiff1 === minDiff && pH === undefined)) { minDiff = akDiff1; pH = []; posH = this._positionsMiddleH[i][0] - size.width / 2; } if (akDiff1 === minDiff) { pH.push(this._positionsMiddleH[i][1]); } } } minDiff = this.snapOffset + 1; let pV = undefined; let posV = undefined; for (let i = 0; i < this._positionsV.length; i++) { let akDiff1 = Math.abs(this._positionsV[i][0] - position.y); if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) { minDiff = akDiff1; pV = []; posV = this._positionsV[i][0]; } let akDiff2: number; if (size) { akDiff2 = Math.abs(position.y + size.height - this._positionsV[i][0]); if (akDiff2 < minDiff || (akDiff2 === minDiff && pV === undefined)) { minDiff = akDiff2; pV = []; posV = this._positionsV[i][0] - size.height; } } if (akDiff1 === minDiff) { pV.push(this._positionsV[i][1]); } if (size) { if (akDiff2 === minDiff && akDiff1 !== minDiff) { pV.push(this._positionsV[i][1]); } } } if (size) { for (let i = 0; i < this._positionsMiddleV.length; i++) { let akDiff1 = Math.abs(this._positionsMiddleV[i][0] - (position.y + size.height / 2)); if (akDiff1 < minDiff || (akDiff1 === minDiff && pV === undefined)) { minDiff = akDiff1; pV = []; posV = this._positionsMiddleV[i][0] - size.height / 2; } if (akDiff1 === minDiff) { pV.push(this._positionsMiddleV[i][1]); } } } this._overlayLayerView.removeAllNodesWithClass('svg-snapline'); if (pH !== undefined || pV !== undefined) { let pos = { x: pH !== undefined ? posH : position.x, y: pV !== undefined ? posV : position.y }; this.drawSnaplines(pos, size, pH, pV); return { x: pH !== undefined ? posH : null, y: pV !== undefined ? posV : null }; } return { x: null, y: null }; } drawSnaplines(position: IPoint, size: ISize, rectsH: IRect[], rectsV: IRect[]) { if (rectsH) { let minY = position.y; let maxY = position.y; for (const r of rectsH) { let ry = r.y - this._outerRect.top; minY = minY < ry ? minY : ry; maxY = maxY > ry ? maxY : ry; } for (const r of rectsH) { if (r.x - this._outerRect.left == position.x || (size && r.x - this._outerRect.left == position.x + size.width)) { let line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute('x1', (r.x - this._outerRect.x)); line.setAttribute('x2', (r.x - this._outerRect.x)); line.setAttribute('y1', (minY)); line.setAttribute('y2', (maxY)); line.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer); } if (r.x - this._outerRect.left + r.width == position.x || (size && r.x - this._outerRect.left + r.width == position.x + size.width)) { let line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute('x1', (r.x - this._outerRect.x + r.width)); line.setAttribute('x2', (r.x - this._outerRect.x + r.width)); line.setAttribute('y1', (minY)); line.setAttribute('y2', (maxY)); line.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer); } if (size && r.x - this._outerRect.left + r.width / 2 == position.x + size.width / 2) { let line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute('x1', (r.x - this._outerRect.x + r.width / 2)); line.setAttribute('x2', (r.x - this._outerRect.x + r.width / 2)); line.setAttribute('y1', (minY)); line.setAttribute('y2', (maxY)); line.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer); } let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute('x', (r.x - this._outerRect.x)); rect.setAttribute('width', (r.width)); rect.setAttribute('y', (r.y - this._outerRect.y)); rect.setAttribute('height', (r.height)); rect.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, rect, overlayLayer); } } if (rectsV) { let minX = position.x; let maxX = position.x; for (const r of rectsV) { let rx = r.x - this._outerRect.left; minX = minX < rx ? minX : rx; maxX = maxX > rx ? maxX : rx; } for (const r of rectsV) { if (r.y - this._outerRect.top == position.y || (size && r.y - this._outerRect.top == position.y + size.height)) { let line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute('x1', (minX)); line.setAttribute('x2', (maxX)); line.setAttribute('y1', (r.y - this._outerRect.y)); line.setAttribute('y2', (r.y - this._outerRect.y)); line.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer); } if (r.y - this._outerRect.top + r.height == position.y || (size && r.y - this._outerRect.top + r.height == position.y + size.height)) { let line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute('x1', (minX)); line.setAttribute('x2', (maxX)); line.setAttribute('y1', (r.y - this._outerRect.y + r.height)); line.setAttribute('y2', (r.y - this._outerRect.y + r.height)); line.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer); } if (size && r.y - this._outerRect.top + r.height / 2 == position.y + size.height / 2) { let line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute('x1', (minX)); line.setAttribute('x2', (maxX)); line.setAttribute('y1', (r.y - this._outerRect.y + r.height / 2)); line.setAttribute('y2', (r.y - this._outerRect.y + r.height / 2)); line.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer); } let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute('x', (r.x - this._outerRect.x)); rect.setAttribute('width', (r.width)); rect.setAttribute('y', (r.y - this._outerRect.y)); rect.setAttribute('height', (r.height)); rect.setAttribute('class', 'svg-snapline'); this._overlayLayerView.addOverlay(this.constructor.name, rect, overlayLayer); } } } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/defaultConfiguredDesignerView.ts ================================================ import { DesignerView } from './designerView.js'; export class DefaultConfiguredDesignerView extends DesignerView { constructor(){ super(); } async ready() { const createDefaultServiceContainer = await (await import('../../services/DefaultServiceBootstrap.js')).default; this.initialize(createDefaultServiceContainer()); } } customElements.define('node-projects-default-configured-designer-view', DefaultConfiguredDesignerView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/designerCanvas.ts ================================================ import { EventNames } from '../../../enums/EventNames.js'; import { ServiceContainer } from '../../services/ServiceContainer.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { SelectionService } from '../../services/selectionService/SelectionService.js'; import { DesignItem, forceHoverAttributeName } from '../../item/DesignItem.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { BaseCustomWebComponentLazyAppend, css, cssFromString, DomHelper, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { dragDropFormatNameBindingObject } from '../../../Constants.js'; import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js'; import { IDesignerCanvas } from './IDesignerCanvas.js'; import { Snaplines } from './Snaplines.js'; import { CommandType } from '../../../commandHandling/CommandType.js'; import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; import { IUiCommand } from '../../../commandHandling/IUiCommand.js'; import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js'; import { ExtensionType } from './extensions/ExtensionType.js'; import { IExtensionManager } from './extensions/IExtensionManger.js'; import { ExtensionManager } from './extensions/ExtensionManager.js'; import { NamedTools } from './tools/NamedTools.js'; import { Screenshot } from '../../helper/Screenshot.js'; import { exportData } from '../../helper/Helper.js'; import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js'; import { IPoint } from '../../../interfaces/IPoint.js'; import { OverlayLayerView } from './overlayLayerView.js'; import { IDesignerPointerExtension } from './extensions/pointerExtensions/IDesignerPointerExtension.js'; import { IRect } from "../../../interfaces/IRect.js"; import { ISize } from "../../../interfaces/ISize.js"; import { ITool } from "./tools/ITool.js"; import { IPlacementService } from "../../services/placementService/IPlacementService.js"; import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js'; import { NodeType } from '../../item/NodeType.js'; import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js'; import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js'; import { IDocumentStylesheet } from '../../services/stylesheetService/IStylesheetService.js'; import { filterChildPlaceItems } from '../../helper/LayoutHelper.js'; import { ChangeGroup } from '../../services/undoService/ChangeGroup.js'; import { TouchGestureHelper } from '../../helper/TouchGestureHelper.js'; import { stylesheetFromString } from '../../helper/StylesheetHelper.js'; import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js'; import { addPolyfill as addBoxQuadsPolyfill } from '../../helper/getBoxQuads.js'; import { hasCommandKey } from '../../helper/KeyboardHelper.js'; import { getBoundingClientRectAlsoForDisplayContents } from '../../helper/ElementHelper.js'; const disableAnimationsSheet = cssFromString` * { animation-play-state: paused !important; }` export class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IUiCommandHandler { // Public Properties public serviceContainer: ServiceContainer; public instanceServiceContainer: InstanceServiceContainer; public containerBoundingRect: DOMRect; public outerRect: DOMRect; public clickOverlay: HTMLDivElement; private _activeTool: ITool; // IPlacementView private _gridSize = 10; public get gridSize() { return this._gridSize; } public set gridSize(value: number) { this._gridSize = value; const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); canvas.width = value * 2; canvas.height = value * 2; const patternSize = value; for (let x = 0; x < canvas.width; x += patternSize) { for (let y = 0; y < canvas.height; y += patternSize) { context.fillStyle = (x + y) % (patternSize * 2) === 0 ? "#e5e5e5" : "white"; context.fillRect(x, y, patternSize, patternSize); } } const dataURL = canvas.toDataURL(); this._backgroundImage = 'url(' + dataURL + ')'; if (this._canvas.style.backgroundImage != 'none') this._canvas.style.backgroundImage = this._backgroundImage; } public pasteOffset = 10; public alignOnGrid = false; public alignOnSnap = true; public snapLines: Snaplines; public overlayLayer: OverlayLayerView; public rootDesignItem: IDesignItem; private _currentPasteOffset = this.pasteOffset; private _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value private _scaleFactor = 1; //if scale css property is used this need to be the scale value private _canvasOffset: IPoint = { x: 0, y: 0 }; private _additionalStyle: CSSStyleSheet[]; private _backgroundImage: string; private _enableSelectTextNodesOnClick = false; private _moveGroup: ChangeGroup; private _touchGestureHelper: TouchGestureHelper; public get zoomFactor(): number { return this._zoomFactor; } public set zoomFactor(value: number) { this._zoomFactor = value; this._zoomFactorChanged(); } public get scaleFactor(): number { return this._scaleFactor; } public get canvasOffset(): IPoint { return this._canvasOffset; } public set canvasOffset(value: IPoint) { this._canvasOffset = value; this._zoomFactorChanged(); } public get canvasOffsetUnzoomed(): IPoint { return { x: this._canvasOffset.x * this.zoomFactor, y: this._canvasOffset.y * this.zoomFactor }; } public set canvasOffsetUnzoomed(value: IPoint) { this.canvasOffset = { x: value.x / this.zoomFactor, y: value.y / this.zoomFactor }; } private _pauseAnimations: boolean; public get pauseAnimations() { return this._pauseAnimations; } public set pauseAnimations(value: boolean) { this._pauseAnimations = value; this.applyAllStyles(); } /** Offset when using an iframe as container */ public get containerOffset(): IPoint { if (this._useIframe) { const rect = this._outercanvas2.getBoundingClientRect(); return rect; } return { x: 0, y: 0 } } raiseDesignItemsChanged(designItems: IDesignItem[], action: 'resize' | 'place', operationFinished: boolean) { if (this.designItemsChanged) this.designItemsChanged(designItems, action, operationFinished); } public designItemsChanged: (designItems: IDesignItem[], action: 'resize' | 'place', operationFinished: boolean) => void public onZoomFactorChanged = new TypedEvent(); public get canvas(): HTMLElement { return this._canvas; } public get outercanvas2(): HTMLDivElement { return this._outercanvas2; } // Private Variables private _canvas: HTMLDivElement; private _canvasShadowRoot: Document | ShadowRoot; private _canvasContainer: HTMLDivElement; private _outercanvas2: HTMLDivElement; private _lastHoverDesignItem: IDesignItem; private _firstConnect: boolean; //public static cssprefixConstant = '#node-projects-designer-canvas-canvas '; static override readonly style = css` :host { display: block; box-sizing: border-box; width: 100%; position: relative; transform: translateZ(0); overflow: hidden; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; } * { touch-action: none; } #node-projects-designer-canvas-canvasContainer { background: var(--node-projects-web-component-designer-background, border-box fixed 0px 0px repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAFXmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjIwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMjAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIyMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMjAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjMwMC8xIgogICB0aWZmOllSZXNvbHV0aW9uPSIzMDAvMSIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0xMi0wOFQwOToxNTo0OCswMTowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0xMi0wOFQwOToxNTo0OCswMTowMCI+CiAgIDxkYzp0aXRsZT4KICAgIDxyZGY6QWx0PgogICAgIDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+QmFja2dyb3VuZGdyaWRfMTBweDwvcmRmOmxpPgogICAgPC9yZGY6QWx0PgogICA8L2RjOnRpdGxlPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC42IgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTEyLTA4VDA5OjE1OjQ4KzAxOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz4fvgn+AAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GjRhRLCiLl7BCftTExmLkV2ExnvJr8+bNvBk1b+b13kiyVbaKEhu/FvwFbJW1UkRKlrImNug5b2ZqJplzO/d87vfec7r3XPCpSd10KnrATGXs8FhImZtfUPwvBKjCTx/Nmu5YUzOjKiXt854yL952ebVKn/vXaqIxR4eyKuEh3bIzwuPCk6sZy+Md4UY9oUWFz4Q7bbmg8J2nR3L86nE8x98e22p4GHz1wkq8iCNFrCdsU1heTpuZXNHz9/FeEoilZmcktoq34BBmjBAKE4wwTJBeBmUO0iX96ZYVJfJ7svnTpCVXl9liDZtl4iTI0CnqilSPSTREj8lIsub1/29fHaO/L1c9EILKZ9d9bwf/Nvxsue7Xkev+HEP5E1ymCvnpQxj4EH2roLUdQN0GnF8VtMguXGxC06Ol2VpWKhf3GQa8nULtPDTcQPVirmf5fU4eQF2Xr7qGvX3okPN1S790cWfsRnax1QAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAC9JREFUOI1jfPr0KQNuICUlhUeWCY8cQTCqeWRoZvz//z8e6WfPntHK5lHNI0MzAMChCNMTuPcnAAAAAElFTkSuQmCC)); } #node-projects-designer-canvas-canvas { image-rendering: pixelated; box-sizing: border-box; width: 100%; height: 100%; transform-origin: 0 0; position: absolute; } #node-projects-designer-canvas-canvas.dragFileActive { outline: blue 4px solid; outline-offset: -4px; } node-projects-overlay-layer-view { box-sizing: border-box; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; user-select: none; -webkit-user-select: none; z-index: 999999999999; } #node-projects-designer-canvas-canvas * { cursor: pointer; user-select: none; -webkit-user-select: none; } #node-projects-designer-canvas-canvas iframe { cursor: pointer; user-select: none; -webkit-user-select: none; border: none; width: 100%; height: 100%; } #node-projects-designer-canvas-clickOverlay { position: absolute; width: 100%; height: 100%; top: 0; } #node-projects-designer-canvas-helper-element { height: 0; width: 0; } #node-projects-designer-search-container { position:absolute; display: grid; grid-template-columns: 1fr auto auto; align-items: center; justify-content: left; gap: 8px; width: auto; right: 10px; top: 0; background:rgb(242, 242, 242); padding: 5px 6px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #node-projects-designer-search-container > #node-projects-designer-search-bar { border: 1px solid black; padding: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; background-color: white; padding: 1px 2px; } #node-projects-designer-search-container > div > input { height:20px; padding-left: 6px; font-size: 13px; border: none; outline: none; } #node-projects-designer-search-container > div > #node-projects-designer-search-start { height:22px; border: none; background-color: white; font-size: 13px; } #node-projects-designer-search-container > div > #node-projects-designer-search-start:hover { background-color: #D3D3D3; transition: 0.9s; border-radius: 2px; } #node-projects-designer-search-container > #node-projects-designer-search-close { position: relative; width: 20px; height: 20px; border: none; background-color: transparent; } #node-projects-designer-search-container > span { font-family:sans-serif; font-size: 12px; } #node-projects-designer-search-container > #node-projects-designer-search-close::before, #node-projects-designer-search-container > #node-projects-designer-search-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 60%; background-color: black; height: 1px; } #node-projects-designer-search-container > #node-projects-designer-search-close::before { transform: translate(-50%, -50%) rotate(45deg); } #node-projects-designer-search-container > #node-projects-designer-search-close::after { transform: translate(-50%, -50%) rotate(-45deg); } `; static override readonly template = html`
`; public extensionManager: IExtensionManager; private _pointerextensions: IDesignerPointerExtension[]; private _lastCopiedPrimaryItem: IDesignItem; private _ignoreEvent: Event; private _useIframe = true; private _iframe: HTMLIFrameElement; private _window: Window; private _resizeObserver: ResizeObserver; public readonly iframes: HTMLIFrameElement[]; #readOnly = false; get readOnly() { return this.#readOnly; } set readOnly(v) { this.#readOnly = v; } constructor(useIframe: boolean = false) { super(); this._restoreCachedInititalValues(); addBoxQuadsPolyfill(); this._useIframe = useIframe; this._canvas = this._getDomElement('node-projects-designer-canvas-canvas'); if (this._useIframe) { this._iframe = document.createElement('iframe'); this._iframe.setAttribute("sandbox", "allow-same-origin"); this._iframe.setAttribute("scrolling", "no"); this.iframes = [this._iframe]; //TODO: add option to allow scripts in iframes... //this._iframe.setAttribute("sandbox", "allow-same-origin allow-scripts"); this._canvas.appendChild(this._iframe); requestAnimationFrame(() => { this._window = this._iframe.contentWindow; //@ts-ignore addBoxQuadsPolyfill(this._iframe.contentWindow); this._canvasShadowRoot = this._iframe.contentWindow.document; }) } else { this._window = window; this._canvasShadowRoot = this._canvas.attachShadow({ mode: 'open' }); } this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer'); this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2'); this.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay'); this.onKeyDown = this.onKeyDown.bind(this); this.onKeyUp = this.onKeyUp.bind(this); this._onDblClick = this._onDblClick.bind(this); this._pointerEventHandler = this._pointerEventHandler.bind(this); this._pointerEventHandlerCapture = this._pointerEventHandlerCapture.bind(this); this._onWheel = this._onWheel.bind(this); this._getDomElement('node-projects-designer-search-close').onclick = () => this._searchHideOverlay(); this._getDomElement('node-projects-designer-search-start').onclick = () => this._searchRun(); this._getDomElement('node-projects-designer-search-container').onkeydown = (event) => { if (event.key === "Enter") this._searchRun(); }; this.clickOverlay.oncontextmenu = (e) => e.preventDefault(); this._resizeObserver = new ResizeObserver(() => { this.extensionManager?.refreshAllAppliedExtentions(); }); this._resizeObserver.observe(this); } get designerWidth(): string { return this._canvasContainer.style.width; } set designerWidth(value: string) { this._canvasContainer.style.width = value; this._zoomFactorChanged(); } get designerHeight(): string { return this._canvasContainer.style.height; } set designerHeight(value: string) { this._canvasContainer.style.height = value; this._zoomFactorChanged(); } get designerPixelSize(): { width: number, height: number } { return { width: this._canvasContainer.offsetWidth, height: this._canvasContainer.offsetHeight }; } getDesignSurfaceDimensions(): ISize { let ret: ISize = { width: null, height: null }; const cs = getComputedStyle(this._canvasContainer); if (this._canvasContainer.style.width) ret.width = parseFloat(cs.width); if (this._canvasContainer.style.height) ret.height = parseFloat(cs.height); return ret; } get designerOffsetWidth(): number { return this._canvasContainer.offsetWidth; } get designerOffsetHeight(): number { return this._canvasContainer.offsetHeight; } set additionalStyles(value: CSSStyleSheet[]) { this._additionalStyle = value; this.applyAllStyles(); } get additionalStyles(): CSSStyleSheet[] { return this._additionalStyle; } private applyAllStyles() { if (this._window) { let styles: CSSStyleSheet[] = [] if (this._additionalStyle) styles.push(...this._additionalStyle); if (this.instanceServiceContainer.stylesheetService) { styles.push(...this.instanceServiceContainer.stylesheetService .getStylesheets() .map(x => stylesheetFromString(this._window, AbstractStylesheetService.patchStylesheetSelectorForDesigner(x.content)))); } if (this._pauseAnimations) { styles.push(disableAnimationsSheet); } if (this._useIframe) { this._iframe.contentWindow.document.adoptedStyleSheets = styles; } else { this._canvasShadowRoot.adoptedStyleSheets = styles; } } else { requestAnimationFrame(() => this.applyAllStyles()); } } ignoreEvent(event: Event) { this._ignoreEvent = event; } /* --- start IUiCommandHandler --- */ canExecuteCommand(command: IUiCommand) { const modelCommandService = this.serviceContainer.modelCommandService; if (modelCommandService) { const selection = this.instanceServiceContainer.selectionService.selectedElements; let handeled = modelCommandService.canExecuteCommand(this, command, selection); if (handeled !== null) { return handeled; } } if (command.type === CommandType.screenshot) { return true; } if (command.type === CommandType.undo) { return this.instanceServiceContainer.undoService.canUndo(); } if (command.type === CommandType.redo) { return this.instanceServiceContainer.undoService.canRedo(); } if (command.type === CommandType.setTool) { return this.serviceContainer.designerTools.has(command.parameter); } if (command.type === CommandType.paste) { return true; } if (command.type === CommandType.copy || command.type === CommandType.cut || command.type === CommandType.delete) { return this.instanceServiceContainer.selectionService.primarySelection != null && !this.instanceServiceContainer.selectionService.primarySelection.isRootItem; } return false; } async executeCommand(command: IUiCommand) { const modelCommandService = this.serviceContainer.modelCommandService; if (modelCommandService) { const selection = this.instanceServiceContainer.selectionService.selectedElements; let handeled = await modelCommandService.executeCommand(this, command, selection) if (handeled != null) { this.instanceServiceContainer.selectionService.setSelectedElements(null); this.instanceServiceContainer.selectionService.setSelectedElements(selection); return; } } switch (command.type) { case CommandType.screenshot: { if (!Screenshot.screenshotsEnabled) { alert("you need to select current tab in next browser dialog, or screenshots will not work correctly"); } let items = this.instanceServiceContainer.selectionService.selectedElements; if (!items?.length) { items = [...this.rootDesignItem.children(true)]; } let data = await this.serviceContainer.pngCreatorService.takePng(items, { removeSelection: true }); await exportData(new Blob([new Uint8Array(data)], { type: 'image/png' }), "screenshot.png"); } break; case CommandType.setTool: { this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(command.parameter); this.extensionManager.reapplyAllAppliedExtentions(); } break; case CommandType.setStrokeColor: { this.serviceContainer.globalContext.strokeColor = command.parameter; } break; case CommandType.setFillBrush: { this.serviceContainer.globalContext.fillBrush = command.parameter; } break; case CommandType.setStrokeThickness: { this.serviceContainer.globalContext.strokeThickness = command.parameter; } break; case CommandType.delete: this.handleDeleteCommand(); break; case CommandType.undo: this.instanceServiceContainer.undoService.undo(); break; case CommandType.holdUndo: let undoEntries = this.instanceServiceContainer.undoService.getUndoEntryNames(20); let undoMnu: IContextMenuItem[] = Array.from(undoEntries).map((x, idx) => ({ title: 'undo: ' + x, action: () => { for (let i = 0; i <= idx; i++) this.instanceServiceContainer.undoService.undo() } })); if (undoMnu.length > 0) ContextMenu.show(undoMnu, command.event, { mode: 'undo' }); break; case CommandType.redo: this.instanceServiceContainer.undoService.redo(); break; case CommandType.holdRedo: let redoEntries = this.instanceServiceContainer.undoService.getRedoEntryNames(20); let redoMnu: IContextMenuItem[] = Array.from(redoEntries).map((x, idx) => ({ title: 'redo: ' + x, action: () => { for (let i = 0; i <= idx; i++) this.instanceServiceContainer.undoService.redo() } })); if (redoMnu.length > 0) ContextMenu.show(redoMnu, command.event, { mode: 'undo' }); break; case CommandType.copy: this.handleCopyCommand(); break; case CommandType.cut: this.handleCopyCommand(); this.handleDeleteCommand(); break; case CommandType.paste: this.handlePasteCommand(command.altKey == true); break; case CommandType.selectAll: this.handleSelectAll(); break; } } public disableBackgroud() { this._canvasContainer.style.background = 'var(--node-projects-web-component-designer-screenshot-background, white)'; } public enableBackground() { this._canvasContainer.style.background = ''; } public zoomToFit() { const autoZomOffset = 10; let maxX = 0, maxY = 0, minX = 0, minY = 0; this.canvasOffset = { x: 0, y: 0 }; this.zoomFactor = 1; for (let n of this.rootDesignItem.querySelectorAll('*')) { if (n instanceof (n.ownerDocument.defaultView ?? window).Element) { const rect = getBoundingClientRectAlsoForDisplayContents(n); minX = minX < rect.x ? minX : rect.x; minY = minY < rect.y ? minY : rect.y; maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset; maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset; } } const cvRect = this.getBoundingClientRect(); maxX -= cvRect.x; maxY -= cvRect.y; let scaleX = cvRect.width / (maxX / this.zoomFactor); let scaleY = cvRect.height / (maxY / this.zoomFactor); const dimensions = this.getDesignSurfaceDimensions(); if (dimensions.width) scaleX = cvRect.width / dimensions.width; if (dimensions.height) scaleY = cvRect.height / dimensions.height; let fak = scaleX < scaleY ? scaleX : scaleY; if (!isNaN(fak)) this.zoomFactor = fak; //this._zoomInput.value = Math.round(this.zoomFactor * 100) + '%'; } /* --- end IUiCommandHandler --- */ handleSelectAll() { const selection = Array.from(this.rootDesignItem.children(true)).filter(x => !x.isEmptyTextNode); const primary = this.instanceServiceContainer.selectionService.primarySelection; if (primary) { const idx = selection.indexOf(primary); if (idx >= 0) { selection.splice(idx, 1); selection.unshift(primary); } } this.instanceServiceContainer.selectionService.setSelectedElements(selection); } async handleCopyCommand() { this._currentPasteOffset = this.pasteOffset; this._lastCopiedPrimaryItem = this.instanceServiceContainer.selectionService.primarySelection; await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements); } async handlePasteCommand(disableRestoreOfPositions: boolean) { const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer); let grp = this.rootDesignItem.openGroup("Insert"); let lastCopiedPrimaryItemBackup = this._lastCopiedPrimaryItem; let nextPasteOffset = this._currentPasteOffset + this.pasteOffset; let pasteContainer = this.rootDesignItem; let pCon = lastCopiedPrimaryItemBackup?.parent ?? this.instanceServiceContainer.selectionService.primarySelection; while (pCon != null) { const containerStyle = getComputedStyle(pCon.element); let newContainerService: IPlacementService; newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(pCon, containerStyle)); if (newContainerService) { if (newContainerService.canEnter(pCon, designItems)) { pasteContainer = pCon; break; } else { pCon = pCon.parent; continue; } } } if (designItems) { let containerPos = this.getNormalizedElementCoordinates(pasteContainer.element); for (let i = 0; i < designItems.length; i++) { let di = designItems[i]; let pos = positions ? positions[i] : null; this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di)); if (!disableRestoreOfPositions && pos && di.nodeType == NodeType.Element) { di.setStyle('left', (pos.x - containerPos.x + this._currentPasteOffset) + 'px'); di.setStyle('top', (pos.y - containerPos.y + this._currentPasteOffset) + 'px'); } } const intializationService = this.serviceContainer.intializationService; if (intializationService) { for (let di of designItems) intializationService.init(di); } this.instanceServiceContainer.selectionService.setSelectedElements(designItems); } grp.commit(); this.snapLines.clearSnaplines(); this._lastCopiedPrimaryItem = lastCopiedPrimaryItemBackup; this._currentPasteOffset = nextPasteOffset; } handleDeleteCommand() { let items = this.instanceServiceContainer.selectionService.selectedElements; this.serviceContainer.deletionService.removeItems(items); this.instanceServiceContainer.selectionService.setSelectedElements(null); } initialize(serviceContainer: ServiceContainer) { this.serviceContainer = serviceContainer; this.instanceServiceContainer = new InstanceServiceContainer(this); const undoService = this.serviceContainer.getLastService('undoService') if (undoService) this.instanceServiceContainer.register("undoService", undoService(this)); const selectionService = this.serviceContainer.getLastService('selectionService') if (selectionService) { this.instanceServiceContainer.register("selectionService", selectionService(this)); this.instanceServiceContainer.selectionService.onSelectionChanged.on(() => { this._lastCopiedPrimaryItem = null; this._currentPasteOffset = this.pasteOffset; }); } const designItemDocumentPositionService = this.serviceContainer.getLastService('designItemDocumentPositionService') if (designItemDocumentPositionService) { this.instanceServiceContainer.register("designItemDocumentPositionService", designItemDocumentPositionService(this)); } if (this._useIframe) { this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._iframe, this._iframe, this.serviceContainer, this.instanceServiceContainer); requestAnimationFrame(() => { this.rootDesignItem.updateChildrenFromNodesChildren(); }); } else { this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this._canvas, this.serviceContainer, this.instanceServiceContainer); } const stylesheetService = this.serviceContainer.getLastService('stylesheetService') if (stylesheetService) { const instance = stylesheetService(this); this.instanceServiceContainer.register("stylesheetService", instance); this.instanceServiceContainer.stylesheetService.stylesheetChanged.on((ss) => { if (this.instanceServiceContainer.collaborationService?.isApplyingRemoteChanges) { this.applyAllStyles(); return; } if (ss.changeSource != 'undo') { const ssca = new StylesheetChangedAction(this.instanceServiceContainer.stylesheetService, ss.name, ss.newStyle, ss.oldStyle); this.instanceServiceContainer.undoService.execute(ssca); this.applyAllStyles(); } else { this.applyAllStyles(); } }); this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => { this.applyAllStyles(); }); } const collaborationService = this.serviceContainer.getLastService('collaborationService' as never) as ((designerCanvas: IDesignerCanvas) => any) | null if (collaborationService) { const instance = collaborationService(this); this.instanceServiceContainer.collaborationService = instance; (this.instanceServiceContainer as any).register("collaborationService", instance); } if (serviceContainer.instanceServiceContainerCreatedCallbacks?.length) serviceContainer.instanceServiceContainerCreatedCallbacks.forEach(x => x(this.instanceServiceContainer)); this.extensionManager = new ExtensionManager(this); if (this.instanceServiceContainer.collaborationService) { this.instanceServiceContainer.collaborationService.onPeersChanged.on(event => { if (event.source === 'remote') this.extensionManager.refreshAllAppliedExtentions(); }); this.instanceServiceContainer.collaborationService.onCommentsChanged.on(() => { this.extensionManager.refreshAllAppliedExtentions(); }); } this.overlayLayer = new OverlayLayerView(serviceContainer); this.overlayLayer.style.pointerEvents = 'none'; this.overlayLayer.style.setProperty('margin', '0', 'important'); this.overlayLayer.style.setProperty('padding', '0', 'important'); this.overlayLayer.style.setProperty('border', 'none', 'important'); this.clickOverlay.appendChild(this.overlayLayer); this.snapLines = new Snaplines(this.overlayLayer); this.snapLines.initialize(this.rootDesignItem); if (this.serviceContainer.designerPointerExtensions) for (let pe of this.serviceContainer.designerPointerExtensions) { if (!this._pointerextensions) this._pointerextensions = []; this._pointerextensions.push(pe.getExtension(this)); } if (this.children) { let children = this.children; if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) { children = this.children[0].assignedElements(); } if (children?.length > 0) { const parser = this.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService) as DefaultHtmlParserService; this.addDesignItems(parser.createDesignItems(children, this.serviceContainer, this.instanceServiceContainer)); } } if (!this.serviceContainer.options.zoomDesignerBackground) { requestAnimationFrame(() => { this._resizeBackgroundGrid(); }); } if (this.isConnected) this.extensionManager.connected(); } connectedCallback() { if (!this._firstConnect) { this._firstConnect = true; this._touchGestureHelper = TouchGestureHelper.addTouchEvents(this.clickOverlay); this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandler); this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandler); this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandlerCapture, true); this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandler); this.clickOverlay.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event)); this.clickOverlay.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event)); this.clickOverlay.addEventListener(EventNames.DragOver, event => this._onDragOver(event)); this.clickOverlay.addEventListener(EventNames.Drop, event => this._onDrop(event)); this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown); this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp); this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true); this.clickOverlay.addEventListener(EventNames.Wheel, this._onWheel); //@ts-ignore this.clickOverlay.addEventListener('zoom', (e: CustomEvent) => { this.zoomFactor = this.zoomFactor + (e.detail.diff / 10); }); //@ts-ignore this.clickOverlay.addEventListener('pan', (e: CustomEvent) => { const newCanvasOffset = { x: (this.canvasOffset.x) - e.detail.deltaX, y: (this.canvasOffset.y) - e.detail.deltaY } this.canvasOffset = newCanvasOffset }); } if (this.extensionManager) { this.extensionManager.connected(); } } disconnectedCallback() { this.extensionManager.disconnected(); } private _zoomFactorChanged() { this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : ''; this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : ''; this._updateTransform(); this.fillCalculationrects(); this.onZoomFactorChanged.emit(this._zoomFactor); if (!this.serviceContainer.options.zoomDesignerBackground) this._resizeBackgroundGrid(); } private _resizeBackgroundGrid() { const backgroundGridSize = 10; const backgroundGridFactor = backgroundGridSize * 100 * 2; let canvasWidth = this.canvas.getBoundingClientRect().width; let backgroundGridZoom = backgroundGridFactor / canvasWidth; this.canvas.style.backgroundSize = backgroundGridZoom.toString() + '%'; } private _updateTransform() { this._scaleFactor = this._zoomFactor; if (this._useIframe) { let offX = this._canvasOffset.x; let offY = this._canvasOffset.y; this._iframe.contentWindow.scrollTo(offX * -1, offY * -1); offX += this._iframe.contentWindow.scrollX; offY += this._iframe.contentWindow.scrollY; this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + offX + 'px, ' + offY + 'px)' } else { this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + (isNaN(this._canvasOffset.x) ? '0' : this._canvasOffset.x) + 'px, ' + (isNaN(this._canvasOffset.y) ? '0' : this._canvasOffset.y) + 'px)'; } this._canvasContainer.style.transformOrigin = '0 0'; this.overlayLayer.style.transform = this._canvasContainer.style.transform; this.overlayLayer.style.transformOrigin = '0 0'; this.snapLines.clearSnaplines(); } public setDesignItems(designItems: IDesignItem[]) { this.instanceServiceContainer.undoService.clearTransactionstackIfNotEmpty(); const setItemsAction = new SetDesignItemsAction(designItems, [...this.rootDesignItem.children()]); this.instanceServiceContainer.undoService.execute(setItemsAction); } public _internalSetDesignItems(designItems: IDesignItem[]) { this.fillCalculationrects(); this.extensionManager.removeAllExtensions(); this.overlayLayer.removeAllOverlays(); DomHelper.removeAllChildnodes(this.overlayLayer); for (let i of [...this.rootDesignItem.children()]) this.rootDesignItem._removeChildInternal(i); this.addDesignItems(designItems); this.lazyTriggerReparseDocumentStylesheets(); this.instanceServiceContainer.onContentChanged.emit([{ changeType: 'parsed' }]); (this.instanceServiceContainer.selectionService)._withoutUndoSetSelectedElements(null); setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50); } reparseTimeout: NodeJS.Timeout | null; public lazyTriggerReparseDocumentStylesheets() { if (this.reparseTimeout) { clearTimeout(this.reparseTimeout); } this.reparseTimeout = setTimeout(async () => { await this.reparseDocumentStylesheets(); clearTimeout(this.reparseTimeout); }, 20); } private async reparseDocumentStylesheets() { if (this.instanceServiceContainer.stylesheetService) { const styleElements = this.rootDesignItem.querySelectorAll('style'); let i = 1; const intStyleSheets: IDocumentStylesheet[] = [...styleElements].map(x => ({ name: '<style> #' + (x.id ? x.id + '(' + i++ + ')' : i++), content: DesignItem.GetDesignItem(x).content, designItem: DesignItem.GetDesignItem(x) })); await this.instanceServiceContainer.stylesheetService.setDocumentStylesheets(intStyleSheets); } } public addDesignItems(designItems: IDesignItem[]) { if (designItems) { this.rootDesignItem._insertChildsInternal(designItems); } const intializationService = this.serviceContainer.intializationService; if (intializationService) { for (let di of designItems) intializationService.init(di); } this.snapLines.clearSnaplines(); } private _onDragEnter(event: DragEvent) { this.fillCalculationrects(); event.preventDefault(); const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0; if (hasTransferDataBindingObject) { const ddService = this.serviceContainer.bindableObjectDragDropService; if (ddService) { const el = this.getElementAtPoint({ x: event.x, y: event.y }); if (this._lastDdElement != el) { ddService.dragLeave(this, event, this._lastDdElement); ddService.dragEnter(this, event, el); this._lastDdElement = el; } } else { this._lastDdElement = null; } } else { this._lastDdElement = null; const dragDropService = this.serviceContainer.dragDropService; if (dragDropService) { dragDropService.dragEnter(this, event); } } } private _onDragLeave(event: DragEvent) { this.fillCalculationrects(); event.preventDefault(); this._canvas.classList.remove('dragFileActive'); const dragDropService = this.serviceContainer.dragDropService; if (dragDropService) { dragDropService.dragLeave(this, event); } } private _lastDdElement = null; private _onDragOver(event: DragEvent) { event.preventDefault(); this.fillCalculationrects(); if (event.dataTransfer.types.length > 0 && event.dataTransfer.types[0] == 'Files') { const ddService = this.serviceContainer.externalDragDropService; if (ddService) { const effect = ddService.dragOver(this, event); event.dataTransfer.dropEffect = effect; if (effect !== 'none') this._canvas.classList.add('dragFileActive'); } } else { const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0; if (hasTransferDataBindingObject) { const bindableDdService = this.serviceContainer.bindableObjectDragDropService; if (bindableDdService) { const el = this.getElementAtPoint({ x: event.x, y: event.y }); if (this._lastDdElement != el) { bindableDdService.dragLeave(this, event, this._lastDdElement); bindableDdService.dragEnter(this, event, el); this._lastDdElement = el; } const effect = bindableDdService.dragOver(this, event, el); event.dataTransfer.dropEffect = effect; } } else { const dragDropService = this.serviceContainer.dragDropService; if (dragDropService) { dragDropService.dragOver(this, event); } } } } private async _onDrop(event: DragEvent) { this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(NamedTools.Pointer); this._lastDdElement = null; event.preventDefault(); this._canvas.classList.remove('dragFileActive'); this.fillCalculationrects(); if (event.dataTransfer.files?.length > 0) { const ddService = this.serviceContainer.externalDragDropService; if (ddService) { ddService.drop(this, event); } } else { const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject) if (transferDataBindingObject) { const bo = JSON.parse(transferDataBindingObject); const ddService = this.serviceContainer.bindableObjectDragDropService; if (ddService) { const el = this.getElementAtPoint({ x: event.x, y: event.y }); ddService.drop(this, event, bo, el); } } else { const dragDropService = this.serviceContainer.dragDropService; if (dragDropService) { this.fillCalculationrects(); dragDropService.drop(this, event); } } } } public showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent) { const mnuItems: IContextMenuItem[] = []; for (let cme of this.serviceContainer.designerContextMenuExtensions) { if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) { mnuItems.push(...cme.provideContextMenuItems(event, this, designItem, 'designer')); } } let ctxMenu = new ContextMenu(mnuItems, null) ctxMenu.display(event); return ctxMenu; } private _onDblClick(event: MouseEvent) { event.preventDefault(); if (event.target === this.overlayLayer) return; if (event.altKey) return; if (this.serviceContainer.globalContext.tool == null || this.serviceContainer.globalContext.tool === this.serviceContainer.designerTools.get(NamedTools.Pointer)) { this.extensionManager.removeExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed); this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event); } } private _searchShowOverlay() { if (this.serviceContainer.searchService) { let divElement = this._getDomElement('node-projects-designer-search-container') as HTMLDivElement; divElement.style.display = ''; this._getDomElement('node-projects-designer-search-input').focus(); } } private _searchHideOverlay() { let divElement = this._getDomElement('node-projects-designer-search-container') as HTMLDivElement; divElement.style.display = 'none'; } private async _searchRun() { let input = this._getDomElement('node-projects-designer-search-input'); this._getDomElement('node-projects-designer-search-result').innerHTML = "0 selected"; if (input.value != "") { const result = await this.serviceContainer.searchService.search(this, input.value); if (result?.length > 0) { this.instanceServiceContainer.selectionService.setSelectedElements(result.map(r => r.designItem)); this._getDomElement('node-projects-designer-search-result').innerHTML = result.length.toString() + " selected"; } } } private onKeyUp(event: KeyboardEvent) { if (this._ignoreEvent === event) return; if (this.activeTool?.keyboardEventHandler) { this.activeTool.keyboardEventHandler(this, event, null); if (event.defaultPrevented) return; } if (this._moveGroup) { this._moveGroup.commit() this._moveGroup = null; } event.preventDefault(); } private onKeyDown(event: KeyboardEvent) { if (this._ignoreEvent === event) return; if (this.activeTool?.keyboardEventHandler) { this.activeTool.keyboardEventHandler(this, event, null); if (event.defaultPrevented) return; } if (hasCommandKey(event) && event.key === 'z' && !event.shiftKey) this.executeCommand({ type: CommandType.undo, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); else if (hasCommandKey(event) && event.key === 'z' && event.shiftKey) this.executeCommand({ type: CommandType.redo, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); else if (hasCommandKey(event) && event.key === 'y') this.executeCommand({ type: CommandType.redo, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); else if (hasCommandKey(event) && event.key === 'a') this.executeCommand({ type: CommandType.selectAll, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); else if (hasCommandKey(event) && event.key === 'c') this.executeCommand({ type: CommandType.copy, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); else if (hasCommandKey(event) && event.key === 'v') this.executeCommand({ type: CommandType.paste, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); else if (hasCommandKey(event) && event.key === 'x') this.executeCommand({ type: CommandType.cut, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); else if (hasCommandKey(event) && event.key === 'f') this._searchShowOverlay(); else { let primarySelection = this.instanceServiceContainer.selectionService.primarySelection; if (!primarySelection) { return; } let moveOffset = 1; if (event.shiftKey) moveOffset = 10; switch (event.key) { case 'Delete': case 'Backspace': this.executeCommand({ type: CommandType.delete, metaKey: event.metaKey, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey }); break; case 'ArrowDown': case 'ArrowUp': case 'ArrowLeft': case 'ArrowRight': { if (!this._moveGroup) this._moveGroup = this.rootDesignItem.openGroup("move items"); let offset = { x: 0, y: 0 }; if (event.key == 'ArrowDown') offset.y = -moveOffset; if (event.key == 'ArrowUp') offset.y = moveOffset; if (event.key == 'ArrowRight') offset.x = -moveOffset; if (event.key == 'ArrowLeft') offset.x = moveOffset; for (let x of filterChildPlaceItems(this.instanceServiceContainer.selectionService.selectedElements)) { const containerStyle = getComputedStyle(x.parent.element); x.serviceContainer.getLastServiceWhere('containerService', y => y.serviceForContainer(x.parent, containerStyle)).moveElements([x], offset, false); }; } break; } } event.preventDefault(); } /** * Converts the Event x/y coordinates, to the mouse position on the canvas */ public getNormalizedEventCoordinates(event: MouseEvent): IPoint { const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor; const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x; const offsetOfOuterY = (event.clientY - this.outerRect.y) / this.zoomFactor; const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y; return { x: offsetOfOuterX - offsetOfCanvasX / this.zoomFactor, y: offsetOfOuterY - offsetOfCanvasY / this.zoomFactor }; } /** * Converts the Event x/y coordinates, to the mouse position in the viewport */ public getViewportCoordinates(event: MouseEvent): IPoint { return { x: (event.clientX - this.outerRect.x), y: (event.clientY - this.outerRect.y) }; } public getNormalizedTextNodeCoordinates(element: Text, ignoreScalefactor?: boolean): IRect { let range = document.createRange(); range.selectNodeContents(element); let targetRect = range.getBoundingClientRect(); const offset = this.containerOffset; return { x: offset.x + (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: offset.y + (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) }; } public getNormalizedElementCoordinates(element: Element, ignoreScalefactor?: boolean): IRect { if (element.nodeType == NodeType.TextNode) { return this.getNormalizedTextNodeCoordinates(element, ignoreScalefactor) } const targetRect = getBoundingClientRectAlsoForDisplayContents(element); const offset = this.containerOffset; return { x: offset.x + (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: offset.y + (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) }; } public getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & { realWidth: number, realHeight: number } { let ret = this.getNormalizedElementCoordinates(element); const st = getComputedStyle(element); let realWidth = ret.width; let realHeight = ret.height; if (st.boxSizing != 'border-box') { realWidth = realWidth - (parseFloat(st.borderLeft) + parseFloat(st.paddingLeft) + parseFloat(st.paddingRight) + parseFloat(st.borderRight)); realHeight = realHeight - (parseFloat(st.borderTop) + parseFloat(st.paddingTop) + parseFloat(st.paddingBottom) + parseFloat(st.borderBottom)); } return { ...ret, realWidth, realHeight }; } public getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint { const normEvt = this.getNormalizedEventCoordinates(event); const normEl = this.getNormalizedElementCoordinates(element); return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y }; } private transformPoint(point: IPoint) { if (this._useIframe) { const rect = this._canvasContainer.getBoundingClientRect(); return { x: point.x - rect.x, y: point.y - rect.y }; } return point; } public elementsFromPoint(x: number, y: number): Element[] { let retVal: Element[] = []; const t = this.transformPoint({ x, y }); const elements = this._canvasShadowRoot.elementsFromPoint(t.x, t.y); for (let e of elements) { if (e.getRootNode() !== this._canvasShadowRoot) continue; retVal.push(e); } return retVal; } public getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean) { const t = this.transformPoint(point); const elements = this._canvasShadowRoot.elementsFromPoint(t.x, t.y); let currentElement: HTMLElement = null; for (let i = 0; i < elements.length; i++) { currentElement = elements[i]; if (ignoreElementCallback && ignoreElementCallback(currentElement)) { currentElement = null; continue; } if (currentElement.getRootNode() !== this._canvasShadowRoot) { currentElement = null; continue; } if (!this.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements && DesignItem.GetDesignItem(currentElement).getStyleFromSheetOrLocal('pointer-events') == 'none') { currentElement = null; continue; } break; } return currentElement; } public getDesignItemById(id: string) { return DesignItem.GetDesignItem(this._canvasShadowRoot.getElementById(id)); } public querySelectorDesignItem(selector: string) { return DesignItem.GetDesignItem(this._canvasShadowRoot.querySelector(selector)); } public querySelectorAllDesignItems(selector: string) { return [...this._canvasShadowRoot.querySelectorAll(selector)].map(x => DesignItem.GetDesignItem(x)); } private _hoverElement: Element; public showHoverExtension(element: Element, event: Event) { const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, element, this.serviceContainer, this.instanceServiceContainer); if (this._lastHoverDesignItem != currentDesignItem) { if (this._lastHoverDesignItem) this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver); if (currentDesignItem && currentDesignItem != this.rootDesignItem && (!element.parentNode || DomHelper.getHost(element.parentNode) !== this.overlayLayer)) this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver, event); this._lastHoverDesignItem = currentDesignItem; } if (this.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover && this._hoverElement !== element) { let el = this._hoverElement; while (el && el !== this._canvas) { el.removeAttribute(forceHoverAttributeName); el = el.parentElement; } this._hoverElement = null; if (element) { if (element.nodeType == NodeType.TextNode) element = element.parentElement; el = element; while (el && el !== this._canvas) { el.setAttribute(forceHoverAttributeName, ''); el = el.parentElement; } this._hoverElement = element; } } } private _onWheel(event: WheelEvent) { let el = this.getElementAtPoint({ x: event.clientX, y: event.clientY }); while (el) { const cs = getComputedStyle(el); if (cs.overflowY === 'scroll' || cs.overflowY === 'auto') { const target = el; if (target.scrollBy) target.scrollBy(event.deltaX, event.deltaY); else { target.scrollLeft += event.deltaX; target.scrollTop += event.deltaY; } event.stopPropagation(); break; } el = el.parentElement; } } private _pointerEventHandlerCapture(event: PointerEvent, forceElement: Node = null) { this.fillCalculationrects(); if (this._pointerextensions) { for (let pe of this._pointerextensions) pe.refresh(event); } } private _pointerEventHandler(event: PointerEvent, forceElement: Node = null) { if (this._ignoreEvent === event) return; if (!this.serviceContainer) return; if (this._touchGestureHelper.multitouchEventActive) return; let currentElement: Node; if (forceElement) currentElement = forceElement; else { currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y }); if (!currentElement) { currentElement = this._canvas; } else if (this._enableSelectTextNodesOnClick) { const norm = this.getNormalizedEventCoordinates(event); for (let n of currentElement.childNodes) { if (n.nodeType == NodeType.TextNode) { let nc = this.getNormalizedElementCoordinates(n); if (nc.x <= norm.x && nc.x + nc.width >= norm.x && nc.y <= norm.y && nc.y + nc.height >= norm.y) { currentElement = n; break; } } } } } if (this._activeTool) { this._activeTool.pointerEventHandler(this, event, currentElement); return; } this.clickOverlay.style.cursor = this._canvas.style.cursor; const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, currentElement, this.serviceContainer, this.instanceServiceContainer); this.showHoverExtension(currentDesignItem.element, event); //TODO: needed ?? if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) { currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas; } let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer); tool.pointerEventHandler(this, event, currentElement); this._canvas.style.cursor = tool.cursor; } public captureActiveTool(tool: ITool) { this._activeTool = tool; } public releaseActiveTool() { this._activeTool = null; } public get activeTool() { return this.serviceContainer.globalContext.tool; } public fillCalculationrects() { this.containerBoundingRect = this._canvasContainer.getBoundingClientRect(); this.outerRect = this._outercanvas2.getBoundingClientRect(); } public removeOverlay(element: SVGGraphicsElement) { this.overlayLayer.removeOverlay(element); } public zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint) { let rect: IRect = { x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x, y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y, width: Math.abs(startPoint.x - endPoint.x), height: Math.abs(startPoint.y - endPoint.y), } let zFactorWidth = this.outerRect.width / rect.width; let zFactorHeight = this.outerRect.height / rect.height; let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth; let rectCenter: IPoint = { x: (rect.width / 2) + rect.x, y: (rect.height / 2) + rect.y } this.zoomPoint(rectCenter, zoomFactor); } public zoomPoint(canvasPoint: IPoint, newZoom: number) { this.zoomFactor = newZoom; const newCanvasOffset = { x: -(canvasPoint.x) + this.outerRect.width / this.zoomFactor / 2, y: -(canvasPoint.y) + this.outerRect.height / this.zoomFactor / 2 } this.canvasOffset = newCanvasOffset; } private zoomConvertEventToViewPortCoordinates(point: IPoint): IPoint { const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x; const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y; return { x: (point.x + offsetOfCanvasX / this.zoomFactor) * this.zoomFactor, y: (point.y + offsetOfCanvasY / this.zoomFactor) * this.zoomFactor }; } public zoomTowardsPoint(canvasPoint: IPoint, newZoom: number) { const scaleChange = newZoom / this.zoomFactor; const point = this.zoomConvertEventToViewPortCoordinates(canvasPoint); const newCanvasOffset = { x: -(point.x * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.x), y: -(point.y * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.y) } this.zoomFactor = newZoom; this.canvasOffsetUnzoomed = newCanvasOffset; } } customElements.define('node-projects-designer-canvas', DesignerCanvas); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/designerView.ts ================================================ import { ServiceContainer } from '../../services/ServiceContainer.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { css, DomHelper, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent'; import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js'; import { IUiCommand } from '../../../commandHandling/IUiCommand.js'; import { DesignerCanvas } from "./designerCanvas.js"; import { DomConverter } from './DomConverter.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js'; import { EventNames } from '../../../enums/EventNames.js'; import { PlainScrollbar } from '../../controls/PlainScrollbar.js'; import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js'; export class DesignerView extends BaseCustomWebComponentConstructorAppend implements IUiCommandHandler { private _sVert: PlainScrollbar; private _sHor: PlainScrollbar; public get serviceContainer(): ServiceContainer { return this._designerCanvas.serviceContainer; } public set serviceContainer(value: ServiceContainer) { this._designerCanvas.serviceContainer = value; } public get instanceServiceContainer(): InstanceServiceContainer { return this._designerCanvas.instanceServiceContainer; } public set instanceServiceContainer(value: InstanceServiceContainer) { this._designerCanvas.instanceServiceContainer = value; } private _designerCanvas: DesignerCanvas; public get designerCanvas() { return this._designerCanvas; } get readOnly() { return this._designerCanvas.readOnly; } set readOnly(v) { this._designerCanvas.readOnly = v; } private _zoomInput: HTMLInputElement; private _lowertoolbar: HTMLDivElement; private _toolbar: DesignerToolbar; static override readonly style = css` :host { display: block; box-sizing: border-box; width: 100%; position: relative; transform: translateZ(0); overflow: hidden; } * { touch-action: none; } #lowertoolbar { height: 16px; background: #787f82; display: flex; bottom: 0; position: absolute; font-size: 12px; width: 100%; } input { width: 40px; height: 16px; padding: 0; border: 0; font-size: 12px; text-align: center; margin-right: 1px; } .toolbar-control { min-width: 16px; height: 16px; display: block; margin-right: 1px; cursor: default; display: flex; justify-content: center; align-items: center; } .selected { background-color: deepskyblue; } .toolbar-control:hover { background-color:rgba(164,206,249,.6); } #outer { user-select: none; display: flex; flex-direction: column; width: 100%; height: 100%; } #canvas { left: 24px; width: calc(100% - 24px - 16px); height: calc(100% - 32px); } #tool-bar { width: 24px; height: calc(100% - 32px); position: absolute; background-color: lightgray; } .zoom-in { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAn9JREFUeNqkU11o01AUTtI06U/6tzHWbnNVS+k67FAG/gwfZEOcCrpNEBwEH2Q+Otqxh+5VEaHYV18UwQd9sk4Q+6CUKogbtSoM10qftJS2iGuT/iRpshvvDZu4DHHggY+TnHu+795zz7m4qqrYxfA6pjerlcHMZvMQQRCL8Hccoh+iBJECAMQEQci3Wk2MxP5iqgqmJUmIB3xkdTRoKgQG6Wr1JxBX1oTQx3UxCdcjMO2ZJiCK4g4y3HUIACV+bsL5dSRAWfwe636z0WBzWEFzn5vku5xyIZGsx2UF5AhEaDYbO8Dz3KLPi1X9B2iTy0pRiDx5/Z2bJgmGwDH8WMhuDxzEf6A8TYDneT3GR4JMzcVQThNlcCtANaM48pICutodxXTkkI1HeVslSPor6B/wWL7B3Z1n2KR3O3h05rkDOkd2eYoSxM025PVrAgAQeoFSuSLI3Q66jpJNRsIWPLvM5JJTTUkGGsqVtgJ5JU3AaLTqBVKZT9xh7yDT2Gh05G4bNQBzGETkBbkMVAxbzdadMJbSBDzCHXgKgKGZQJCp0IP32dnEaKhd6nOZAay7mXk6UUGeIHDDh88NKb0qumjaHiN391/1GjtrJ6ZPSb33H9eJYomuTJ601Qf7SKVYVlqplZblxRvOThrtEaC28qSOPAwncCYSWbzJsrO3XP4br9KZa1fTmcaOSTQYLDFFaeURh/yDfLynp/fCwkI0yrKX79ZqG49sUr2A44a3u+d08/fXVhfAeZ8vcDocjs6z7KV7xeL3JzBcwPZgmoAkScGlpdvzc3NXHuZyXxIwlMX2aJoAfFkvx8aGnRzH5WEpr7cXuerKPwVw1Lb/sV8CDACbf0U37X3NqwAAAABJRU5ErkJggg==); } .zoom-out { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmVJREFUeNqkU01oE0EUnv3Nf0xsS01jEzWUNCUplh7U4kEiVVEQqyBYWDxor5am5JBeFRGCuXpRBA8KHqIHMYISohdTYlQo2kguaghJUNvd/O1udjvr7NKWZHuw4IMHM/v9zHu8t5iiKCAYDAKi/xQ4MHEdbIXFYgUmk2kUx/EouoZRulGWUaYhhHGe5wutVhOQKtk3/RToQ1HgjCjyCb+PrE0GjEW/x1Cr/YFCdoUPffwqpBAeQbRnmoEgCD1i9OoohHLi7EnHt3E/bfb0m/pwDGBeF04P77Mpex1SMZliE5IMV3FV0Gw2erJe56I+L6iNHDQYnRaaVsXb5uh8JGS3+w9hv1SeVkG9Xtd3EB4PDBecVtplpAmHKMMesN2R2Ymg7fer9PfwZgui3sC932X+gV53nGZSXj2Yf36B5oWNNtK5NQMIcT2nXKnyUt8eA6uSUf1YNyhKsFmptmWkK2sGFGXRG6Rzn7jDXo+1sdboSBSJEd0gVABYzrMOpEtrBi7+DqoCAnUn1JTo0IP3+dnkZKhdHnKaIEUSXRPCiA+fG2JmWXAaDPY4uXP+ipfqrBybOSEO3n/M4qWyoXrmuE30DJHWUkVupbMt44u3nJ2k7BGotAqkTjyGNvBiJBK9yTCzt5wjN15ncteuZnKNnk0kCHNcllsFVUN2iY8ODAyeX1yMxRjm8t319bVHNpEtYhjxbseago3t0+YU4Dmfzz+9sBCbZ5hL90qln0/Q5yLYRWgGoigGlpZuz8/NXXm4uvolqY4a7DI0A/RnvZyaGnNwHFdArbzZArla9p8GmDq2/4m/AgwATHQSD48kJDUAAAAASUVORK5CYII=); } .snap-grid { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAblJREFUeNqkUjtLA0EQnntFyKNKJdiFgIlGC5G0FlaaIsYgiKAgKIKdjbV/wM7GImBhI6JFMFWKK3yBimBAhJDuUEgimMSYS0hunbncHRtFjLjw7X7z7ezszM4KjDEQRRG+jnlEgvYAAgLAJpoT1tYdA9gzAAqLuC/DD4N1EZC87v1IYnZ0MBj0k/6Szw/nTs7GO+8f62gWBCuDHTRG+ABxgGScsd3JlYWlJogu9TSjkT41NzM0AEbr5uDocJmxLTv3CCJpgbRkAKcWpq14vP7scVqrVKsbBOKktayS7BL4RzB5uxvAo7++SfV6vYnmBenESaM9/qCESFt4pPUJJzrlLpe/vQ9pTeex8A0EQcggwILJo9EohMPhNVW9ZqFQaJvsWCzWozGuCxJ3gck1TYNGo+Hy+XxQKpXalUoFisUi1Go1RyM/uwtZLsADYkxRlGnMZLXT6QQkSSqglsIV0HY0XddTdgkqV4LD6YPJsgwYzLSJEygQraz70YDvRg9Hh3O8DdptM1uTEwzDMDnvTHVfWfy+D8592W4Jt1wJfXOnC0h8XMw/cbuEHOKZc/iNX9qC2cb/jE8BBgAvhdOb37HVsgAAAABJRU5ErkJggg==); } .snap-guide { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYVJREFUeNqkU7tKA1EQnbs3CnlVqbQNARMjFilS+AnZQhIbW0ER/AA/wlYbhXR2wUKx0iKNYGMKDViEdEIgieBujGvCPpyz7sK6iWLIwJk798zsuXsfIxzHoXksAqcoij+vMbYq7MoszGxaEB3wtODlH3i5E5uojck210RCgq7SJie4MC0TsdO1cim/lMmkwHdarZWni+t16/1jz/FElJBAGc5imLzyakXNG0IuVo+OnwHE4JCzgisG7BJu/I3CQjyRuq1dvWi6vg8gBofcOHgGAZO+AFv88/VNDofDEcd3IBCD43ycfhEowY28Sazfnzh1cKMggWsUQvi4waiqKuVyud16/d7JZrOHxWJxKudMuQV3C81mk3RdX0wmk9Tr9UxN06jb7dJgMPjBwQRUAu/AtWg0SpZl7TDSUso2/1UVNWHOMIwJARzWBhcQwMXu1oJb9Ufbtsk0zYktPLrvgD8E/mWeYoNxxlj2xoZ3qI2/YrePQs10PksjTRPozCog5m3nLwEGABrLzseuHT6IAAAAAElFTkSuQmCC); } .bottom-scroll { width: calc(100% - 16px); position: absolute; bottom: 16px; height: 16px; box-sizing: border-box; z-index: 1; } .right-scroll { height: calc(100% - 32px); position: absolute; right: 0; top: 0; width: 16px; box-sizing: border-box; z-index: 1; } .bottom-right { width: 16px; height: 16px; bottom: 16px; right: 0; position: absolute; background: #f0f0f0; }`; static override readonly template = html`
1
100%
`; constructor(useIframe: boolean = false) { super(); this._restoreCachedInititalValues(); this._sVert = this._getDomElement('s-vert'); this._sHor = this._getDomElement('s-hor'); const outer = this._getDomElement('outer'); this._designerCanvas = new DesignerCanvas(useIframe); this._designerCanvas.id = "canvas"; this._designerCanvas.appendChild(document.createElement("slot")); outer.insertAdjacentElement('afterbegin', this._designerCanvas); this._toolbar = new DesignerToolbar(); this._toolbar.id = 'tool-bar'; this._sVert.insertAdjacentElement('afterend', this._toolbar); this._designerCanvas.onZoomFactorChanged.on(() => { this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%'; const pos = this.designerCanvas.canvasOffset; const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth; const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight; this._sHor.value = (pos.x / (-2 * w)) + 0.5; this._sVert.value = (pos.y / (-2 * h)) + 0.5; }); this._zoomInput = this._getDomElement('zoomInput'); this._zoomInput.onkeydown = (e) => { if (e.key == 'Enter') this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100; } this._zoomInput.onblur = () => { this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100; } this._zoomInput.onclick = this._zoomInput.select let zoomIncrease = this._getDomElement('zoomIncrease'); zoomIncrease.onclick = () => { const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth; const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight; if (this._designerCanvas.zoomFactor > 0.1) this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.1) else this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.01) } let zoomDecrease = this._getDomElement('zoomDecrease'); zoomDecrease.onclick = () => { const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth; const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight; if (this._designerCanvas.zoomFactor > 0.11) this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.1) else this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.01) if (this._designerCanvas.zoomFactor < 0.001) this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, 0.001) } let zoomReset = this._getDomElement('zoomReset'); zoomReset.onclick = () => { this.zoomReset(); } let zoomFit = this._getDomElement('zoomFit'); zoomFit.onclick = () => { this.zoomToFit(); } this.addEventListener(EventNames.Wheel, event => this._onWheel(event)); let alignSnap = this._getDomElement('alignSnap'); alignSnap.onclick = () => { this._designerCanvas.alignOnSnap = !this._designerCanvas.alignOnSnap; alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : ''; } alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : ''; alignSnap.oncontextmenu = e => { e.preventDefault(); } let alignGrid = this._getDomElement('alignGrid'); alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; } alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; alignGrid.oncontextmenu = e => { e.preventDefault(); let res = prompt("raster size", this.designerCanvas.gridSize.toString()); if (res) { let r = parseInt(res); if (r > 0) this.designerCanvas.gridSize = r; } } this._lowertoolbar = this._getDomElement('lowertoolbar'); this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e)); this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e)); } public zoomReset() { this._designerCanvas.canvasOffset = { x: 0, y: 0 }; this._designerCanvas.zoomFactor = 1; this._sVert.value = 0.5; this._sHor.value = 0.5; this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%'; } public zoomToFit() { this._designerCanvas.zoomToFit() } private _onScrollbar(e) { if (e?.detail == 'incrementLarge') e.target.value += 0.25; else if (e?.detail == 'decrementLarge') e.target.value -= 0.25; else if (e?.detail == 'incrementSmall') e.target.value += 0.05; else if (e?.detail == 'decrementSmall') e.target.value -= 0.05; const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth; const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight; const x = w * (this._sHor.value - 0.5) * -2; const y = h * (this._sVert.value - 0.5) * -2; this.designerCanvas.canvasOffset = { x, y }; } private _onWheel(event: WheelEvent) { event.preventDefault(); if (event.ctrlKey) { let zf = this._designerCanvas.zoomFactor; const wheel = event.deltaY < 0 ? 1 : (-1); zf *= Math.exp(wheel * 0.2); if (zf < 0.02) zf = 0.02; const vp = this.designerCanvas.getNormalizedEventCoordinates(event) this.designerCanvas.zoomTowardsPoint(vp, zf); } else if (event.shiftKey) { this._sHor.value += event.deltaY / 10000; this._onScrollbar(null); } else { this._sVert.value += event.deltaY / 10000; this._onScrollbar(null); this._sHor.value += event.deltaX / 10000; this._onScrollbar(null); } } get designerWidth(): string { return this._designerCanvas.designerWidth; } set designerWidth(value: string) { this._designerCanvas.designerWidth = value; } get designerHeight(): string { return this._designerCanvas.designerHeight; } set designerHeight(value: string) { this._designerCanvas.designerHeight = value; } set additionalStyles(value: CSSStyleSheet[]) { this._designerCanvas.additionalStyles = value; } public setDesignItems(designItems: IDesignItem[]) { this._designerCanvas.setDesignItems(designItems); } /* --- start IUiCommandHandler --- */ async executeCommand(command: IUiCommand) { this._designerCanvas.executeCommand(command); } canExecuteCommand(command: IUiCommand) { return this._designerCanvas.canExecuteCommand(command); } /* --- end IUiCommandHandler --- */ initialize(serviceContainer: ServiceContainer) { this.serviceContainer = serviceContainer; this._designerCanvas.initialize(serviceContainer); if (serviceContainer.designViewConfigButtons) { for (let provider of serviceContainer.designViewConfigButtons) { for (let btn of provider.provideButtons(this, this._designerCanvas)) this._lowertoolbar.appendChild(btn); } } this._toolbar.initialize(this.serviceContainer, this); } public getDesignerHTML() { if (this._designerCanvas.rootDesignItem.childCount > 0) { return DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), true, true); } if (this.serviceContainer.htmlWriterService.supportsRootItemWrite) { return DomConverter.ConvertToString([this._designerCanvas.rootDesignItem], true, true); } return ''; } public async parseDesignerHTML(html: string, disableUndo: boolean = false) { const parserService = this.serviceContainer.htmlParserService; if (!html) { this._designerCanvas.overlayLayer.removeAllOverlays(); DomHelper.removeAllChildnodes(this._designerCanvas.overlayLayer); this._designerCanvas.rootDesignItem.clearChildren(); } else { const designItems = await parserService.parse(html, this.serviceContainer, this.instanceServiceContainer, false); if (disableUndo) { this._designerCanvas._internalSetDesignItems(designItems); } else { this._designerCanvas.setDesignItems(designItems); } } } static wrapInDesigner(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer): DesignerCanvas { const designerCanvas = new DesignerCanvas(); designerCanvas.initialize(serviceContainer); const parser = designerCanvas.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService) as DefaultHtmlParserService; designerCanvas.addDesignItems(parser.createDesignItems(elements, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer)) return designerCanvas; } } customElements.define('node-projects-designer-view', DesignerView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/AbstractExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { AbstractExtensionBase } from "./AbstractExtensionBase.js"; import { OverlayLayer } from './OverlayLayer.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; export type toolbarObject = SVGForeignObjectElement & { updatePosition: (position: IPoint) => void, getById: (id: string) => T } export abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension { protected extendedItem: IDesignItem; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView) this.extendedItem = extendedItem; } abstract extend(cache: Record, event?: Event); abstract refresh(cache: Record, event?: Event); abstract dispose(); remove() { this.extensionManager.removeExtensionInstance(this.extendedItem, this); } createToolbar(template: HTMLTemplateElement, width: number, height: number, overlayLayer: OverlayLayer = OverlayLayer.Foreground) { const element = (template.content.cloneNode(true)); element.querySelectorAll('*').forEach(x => { (x).onpointerdown = (e) => { this.designerCanvas.ignoreEvent(e); } if (x instanceof HTMLInputElement) { x.addEventListener('keydown', (e) => { this.designerCanvas.ignoreEvent(e); }, { capture: true }); x.addEventListener('keyup', (e) => { this.designerCanvas.ignoreEvent(e); }, { capture: true }); } }); const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); foreignObject.classList.add('svg-toolbar-container'); foreignObject.setAttribute('width', '' + width); foreignObject.setAttribute('height', '' + height); foreignObject.appendChild(element); foreignObject.style.scale = '' + 1 / this.designerCanvas.zoomFactor; foreignObject.style.transformBox = 'fill-box'; this._addOverlay(foreignObject, overlayLayer); foreignObject.updatePosition = (position: IPoint) => { foreignObject.style.scale = '' + 1 / this.designerCanvas.zoomFactor; const rect = this.overlayLayerView.getBoundingClientRect(); const innerRect = foreignObject.children[0].getBoundingClientRect(); const scaleFactor = this.designerCanvas.scaleFactor; const effectiveRectWidth = (rect.width / scaleFactor) - this.designerCanvas.canvasOffset.x * scaleFactor; if (innerRect.width + (position.x * scaleFactor) > effectiveRectWidth) { position.x = (effectiveRectWidth - innerRect.width) / scaleFactor; } if (position.x < -this.designerCanvas.canvasOffset.x) { position.x = -this.designerCanvas.canvasOffset.x; } foreignObject.setAttribute('x', '' + position.x); foreignObject.setAttribute('y', '' + position.y); } foreignObject.getById = (id: string) => { return foreignObject.querySelector('#' + id); } return foreignObject; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/AbstractExtensionBase.ts ================================================ import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayerView } from '../overlayLayerView.js'; import { OverlayLayer } from './OverlayLayer.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; export abstract class AbstractExtensionBase { protected overlays: SVGElement[] = []; protected overlayLayerView: OverlayLayerView; protected extensionManager: IExtensionManager; protected designerCanvas: IDesignerCanvas; constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas) { this.extensionManager = extensionManager; this.designerCanvas = designerCanvas; this.overlayLayerView = designerCanvas.overlayLayer; } private _backup; protected _valuesHaveChanges(...values) { if (this._backup == null) { this._backup = values return true; } for (let i = 0; i < values.length; i++) { if (values[i] !== this._backup[i]) { this._backup = values return true; } } return false; } protected _removeAllOverlays() { for (let o of this.overlays) { try { this.overlayLayerView.removeOverlay(o); } catch (err) { console.error(err); } } this.overlays = []; } protected _addOverlay(element: SVGGraphicsElement, overlayLayer: OverlayLayer = OverlayLayer.Normal) { this.overlayLayerView.addOverlay(this.constructor.name, element, overlayLayer); this.overlays.push(element); } protected _drawGroup(className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer) { const newGroup = this.overlayLayerView.drawGroup(this.constructor.name, className, group, overlayLayer); if (!group) { this.overlays.push(newGroup); } return newGroup; } protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer) { const newLine = this.overlayLayerView.drawLine(this.constructor.name, x1, y1, x2, y2, className, line, overlayLayer); if (!line) { this.overlays.push(newLine); } return newLine; } protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer) { const newCircle = this.overlayLayerView.drawCircle(this.constructor.name, x, y, radius, className, circle, overlayLayer); if (!circle) { this.overlays.push(newCircle); } return newCircle; } protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer) { const newRect = this.overlayLayerView.drawRect(this.constructor.name, x, y, w, h, className, rect, overlayLayer); if (!rect) { this.overlays.push(newRect); } return newRect; } protected _drawComplexRect(points: [IPoint, IPoint, IPoint, IPoint], className?: string, rect?: SVGPathElement, overlayLayer?: OverlayLayer) { const d = "M" + points.map(x => x.x + ',' + x.y).join(' ') + 'Z'; const newRect = this.overlayLayerView.drawPath(this.constructor.name, d, className, rect, overlayLayer); if (!rect) { this.overlays.push(newRect); } return newRect; } protected _drawPath(data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer) { const newPath = this.overlayLayerView.drawPath(this.constructor.name, data, className, path, overlayLayer); if (!path) { this.overlays.push(newPath); } return newPath; } protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer) { const newText = this.overlayLayerView.drawText(this.constructor.name, text, x, y, className, textEl, overlayLayer); if (!textEl) { this.overlays.push(newText); } return newText; } protected _drawHTML(html: string | HTMLElement, x: number, y: number, w: number, h: number, className?: string, htmlObj?: SVGForeignObjectElement, overlayLayer?: OverlayLayer) { const newHtml = this.overlayLayerView.drawHTML(this.constructor.name, html, x, y, w, h, className, htmlObj, overlayLayer); if (!htmlObj) { this.overlays.push(newHtml); } return newHtml; } protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer) { const newEls = this.overlayLayerView.drawTextWithBackground(this.constructor.name, text, x, y, backgroundColor, className, existingEls, overlayLayer); if (!existingEls) { this.overlays.push(...newEls); } return newEls; } protected _drawTransformedRect(points: DOMQuad, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer) { let data = "M" + points.p1.x + " " + points.p1.y + " L" + points.p2.x + " " + points.p2.y + " L" + points.p3.x + " " + points.p3.y + " L" + points.p4.x + " " + points.p4.y + "Z"; const newPath = this.overlayLayerView.drawPath(this.constructor.name, data, className, path, overlayLayer); if (!path) { this.overlays.push(newPath); } return newPath; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/AltToEnterContainerExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from "./OverlayLayer.js"; export class AltToEnterContainerExtension extends AbstractExtension { private _text: SVGTextElement; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend() { this.refresh(); } override refresh() { const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element); this._text = this._drawText("Press ALT (or hold) to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foreground); this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px'; this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor)); this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor)); } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { AltToEnterContainerExtension } from './AltToEnterContainerExtension.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return true; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new AltToEnterContainerExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-weight:800; font-family: monospace; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/BasicStackedToolbarExtension.ts ================================================ import { assetsPath } from "../../../../Constants.js"; import { AbstractExtension, toolbarObject } from "./AbstractExtension.js"; import { IExtensionManager } from "./IExtensionManger.js"; import { IDesignerCanvas } from "../IDesignerCanvas.js"; import { IDesignItem } from "../../../item/IDesignItem.js"; import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js"; import { htmlAsString } from "../../../helper/Helper.js"; export const basicStackedToolbarExtensionOverlayOptionName = 'basicStackedToolbarExtensionShowOverlay'; export class BasicStackedToolbarExtension extends AbstractExtension { protected static basicTemplate = htmlAsString` `; protected static toolBars: toolbarObject[] = []; protected _toolbar: toolbarObject; protected _size = { width: 220, height: 30 }; protected _display: string; protected _inline: string; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event: MouseEvent) { const cs = getComputedStyle(this.extendedItem.element); this._display = cs.display.replace('inline-', '').replace('inline', 'block'); this._inline = cs.display.startsWith('inline') ? 'inline' : 'block'; //@ts-ignore this._toolbar = this.createToolbar(this.constructor.template, this._size.width, this._size.height); BasicStackedToolbarExtension.toolBars.push(this._toolbar); const positionEl = this._toolbar.getById('position'); if (positionEl) { positionEl.value = cs.position; positionEl.onchange = async () => { await this.extendedItem.updateStyleInSheetOrLocalAsync('position', positionEl.value); this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]); } } const displayTypeEl = this._toolbar.getById('displayType'); if (displayTypeEl) { displayTypeEl.value = this._display; displayTypeEl.onchange = async () => { this._display = displayTypeEl.value; await this.updateDisplayValue(); this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]); } } const inlineEl = this._toolbar.getById('inline'); if (inlineEl) { inlineEl.value = this._inline; inlineEl.addEventListener('value-changed', async () => { this._inline = inlineEl.value; if (this._inline && cs.position === 'absolute') this.extendedItem.setStyle('position', 'static'); await this.updateDisplayValue(); this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]); }); } } async updateDisplayValue() { let v = (this._inline == 'inline' ? 'inline ' : '') + this._display; if (v === 'inline block') v = 'inline'; await this.extendedItem.updateStyleInSheetOrLocalAsync('display', v); } override refresh(cache: Record, event?: MouseEvent) { if (event) { const pos = this.designerCanvas.getNormalizedEventCoordinates(event); let tbOffset = 0; for (let i = 0; i < BasicStackedToolbarExtension.toolBars.length - 1; i++) { if (BasicStackedToolbarExtension.toolBars[i] === this._toolbar) break; tbOffset += this._toolbar.children[0].getBoundingClientRect().height + 4; } this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - tbOffset - ((this._size.height + 14) / this.designerCanvas.zoomFactor)) }); } } protected _addStyleButton(styleAndControlName: string) { const cs = getComputedStyle(this.extendedItem.element); const ctl = this._toolbar.getById(styleAndControlName) ctl.addEventListener('value-changed', async () => { await this.extendedItem.updateStyleInSheetOrLocalAsync(styleAndControlName, ctl.value); }); ctl.value = cs[styleAndControlName]; } override dispose() { BasicStackedToolbarExtension.toolBars.splice(BasicStackedToolbarExtension.toolBars.indexOf(this._toolbar), 1); this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/EditText/EditTextExtension.ts ================================================ import { html, Disposable } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension, toolbarObject } from "../AbstractExtension.js"; import { IExtensionManager } from '../IExtensionManger.js'; import { OverlayLayer } from "../OverlayLayer.js"; import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper/SelectionHelper.js"; import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js"; import { getBoundingClientRectAlsoForDisplayContents } from "../../../../helper/ElementHelper.js"; export type handlesPointerEvent = { handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean } export class EditTextExtension extends AbstractExtension implements handlesPointerEvent { private static template = html`
`; private _path!: SVGPathElement; private _toolbar!: toolbarObject; private _selectionChangedListener?: Disposable; private _toolbarStateAnimationFrame?: number; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); this._keyDown = this._keyDown.bind(this); this._scheduleToolbarStateRefresh = this._scheduleToolbarStateRefresh.bind(this); } private _keyDown(e: KeyboardEvent) { if (e.key === 'Escape') { this.dispose(); } } override extend() { //TODO: -> check what to do with extensions, do not loose edit on mouse click,... //maybe use a html edit framework this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements(); this.extendedItem.removeDesignerAttributesAndStylesFromChildren(); window.addEventListener('keydown', this._keyDown, true); //@ts-ignore this.extendedItem.editContent(); this._selectionChangedListener = this.extendedItem.instanceServiceContainer.selectionService.onSelectionChanged.on(() => { this.commitchanges(); this.extensionManager.removeExtensionInstance(this.extendedItem, this); }); (this.extendedItem.element).focus(); let itemRect = getBoundingClientRectAlsoForDisplayContents(this.extendedItem.element); this._toolbar = this.createToolbar(EditTextExtension.template, 300, 24); this._toolbar.updatePosition({ x: (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, y: ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 36) }); FontPropertyEditor.addFontsToSelect(this._toolbar.getById('fontFamily')); this._toolbar.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => { const command = x.dataset['command']; if (command) this._formatSelection(command, x.dataset['commandParameter']); }); this._toolbar.querySelectorAll('select').forEach(x => x.onchange = () => { const command = x.dataset['command']; if (command) this._formatSelection(command, x.value); }); document.addEventListener('selectionchange', this._scheduleToolbarStateRefresh, true); this.extendedItem.element.addEventListener('keyup', this._scheduleToolbarStateRefresh, true); this.extendedItem.element.addEventListener('pointerup', this._scheduleToolbarStateRefresh, true); this.extendedItem.element.addEventListener('input', this._scheduleToolbarStateRefresh, true); //TODO - nice way to disable click overlay this.designerCanvas.clickOverlay.style.pointerEvents = 'none'; //overlay to detect click outside this._path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this._path.setAttribute('class', 'svg-edit-text-clickoutside'); this._path.setAttribute('fill-rule', 'evenodd'); this._path.style.pointerEvents = 'auto'; this._path.onpointerdown = (e) => { this.designerCanvas.ignoreEvent(e); this.commitchanges(); this.extensionManager.removeExtensionInstance(this.extendedItem, this); } this._addOverlay(this._path, OverlayLayer.Background); this.refresh(); this._refreshToolbarState(); } override refresh() { const p = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; if (this._valuesHaveChanges(this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, this.designerCanvas.scaleFactor, p.p1.x, p.p1.y, p.p2.x, p.p2.y, p.p3.x, p.p3.y, p.p4.x, p.p4.y)) { let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor }; let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z "; data += "M" + [p.p1, p.p2, p.p3, p.p4].map(x => x.x + ',' + x.y).join(' ') + 'Z '; this._path.setAttribute("d", data); } } override dispose() { window.removeEventListener('keydown', this._keyDown, true); document.removeEventListener('selectionchange', this._scheduleToolbarStateRefresh, true); this.extendedItem.element.removeEventListener('keyup', this._scheduleToolbarStateRefresh, true); this.extendedItem.element.removeEventListener('pointerup', this._scheduleToolbarStateRefresh, true); this.extendedItem.element.removeEventListener('input', this._scheduleToolbarStateRefresh, true); if (this._toolbarStateAnimationFrame != null) cancelAnimationFrame(this._toolbarStateAnimationFrame); this._selectionChangedListener?.dispose(); this._removeAllOverlays(); this.extendedItem.editContentFinish(); this.designerCanvas.clickOverlay.style.pointerEvents = 'auto'; } commitchanges() { this._removeAllOverlays(); this.extendedItem.element.normalize(); this._cleanupFormattingMarkup(this.extendedItem.element); this.extendedItem.element.normalize(); let stop = false; outer: while (!stop) { for (let e of this.extendedItem.element.querySelectorAll('*')) { if (e.childNodes.length == 0) { e.remove(); continue outer; } } stop = true; } this._cleanupFormattingMarkup(this.extendedItem.element); this.extendedItem.element.normalize(); const newHTML = this.extendedItem.element.innerHTML; this.extendedItem.editContentFinish(); this.extendedItem.innerHTML = newHTML; this.designerCanvas.clickOverlay.style.pointerEvents = 'auto'; } private _cleanupFormattingMarkup(root: Element) { let changed = false; do { changed = this._cleanupFormattingNode(root); root.normalize(); } while (changed); } private _cleanupFormattingNode(node: Node): boolean { let changed = false; for (const child of Array.from(node.childNodes)) { changed = this._cleanupFormattingNode(child) || changed; } if (node instanceof HTMLElement && node.localName === 'span') { const span = node as HTMLSpanElement; if (this._isRedundantSpan(span)) { this._unwrapElement(span); return true; } const parent = span.parentElement; if (parent instanceof HTMLElement && parent.localName === 'span' && this._haveSameAttributes(parent, span)) { this._unwrapElement(span); return true; } } return this._mergeAdjacentSpans(node) || changed; } private _mergeAdjacentSpans(node: Node): boolean { let changed = false; let current = node.firstChild; while (current) { if (current instanceof HTMLElement && current.localName === 'span') { let next = current.nextSibling; while (next instanceof HTMLElement && next.localName === 'span' && this._haveSameAttributes(current, next)) { while (next.firstChild) { current.appendChild(next.firstChild); } next.remove(); changed = true; next = current.nextSibling; } } current = current.nextSibling; } return changed; } private _isRedundantSpan(span: HTMLSpanElement): boolean { return this._getAttributeSignature(span) === ''; } private _haveSameAttributes(left: HTMLSpanElement, right: HTMLSpanElement): boolean { return this._getAttributeSignature(left) === this._getAttributeSignature(right); } private _getAttributeSignature(element: Element): string { return Array.from(element.attributes) .filter(attribute => attribute.name !== 'style' || attribute.value.trim() !== '') .sort((a, b) => a.name.localeCompare(b.name)) .map(attribute => `${attribute.name}=${attribute.value}`) .join(';'); } private _unwrapElement(element: Element) { const parent = element.parentNode; if (!parent) return; while (element.firstChild) { parent.insertBefore(element.firstChild, element); } element.remove(); } handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean { const p = event.composedPath(); const stylo = this._toolbar?.querySelector('stylo-editor'); return stylo != null && p.indexOf(stylo) >= 0; } _formatSelection(type: string, value?: string) { const shadowRoot = this.designerCanvas.rootDesignItem.element.shadowRoot; if (!shadowRoot) return; const selection = shadowrootGetSelection(shadowRoot); if (!selection) return; const unset = this._isFormatApplied(selection, type, value); const spans = wrapSelectionInSpans(selection); if (!spans.length) return; for (const span of spans) { if (unset) { const targets = this._findFormatTargets(span, type, value); if (targets.length) { for (const target of targets) this._unsetFormat(target, type, value); } else { this._unsetFormat(span, type, value); } } else { this._setFormat(span, type, value); } } (this.extendedItem.element).focus(); this._restoreSelection(spans); this._refreshToolbarState(); } private _scheduleToolbarStateRefresh() { if (this._toolbarStateAnimationFrame != null) cancelAnimationFrame(this._toolbarStateAnimationFrame); this._toolbarStateAnimationFrame = requestAnimationFrame(() => { this._toolbarStateAnimationFrame = undefined; this._refreshToolbarState(); }); } private _refreshToolbarState() { const element = this._getToolbarStateElement(); const computedStyle = getComputedStyle(element); const decorations = this._getTextDecorationValues(computedStyle.textDecorationLine || computedStyle.textDecoration); this._setToolbarButtonState('font-weight', '800', this._isComputedFormatApplied(computedStyle, 'font-weight', '800')); this._setToolbarButtonState('font-style', 'italic', this._isComputedFormatApplied(computedStyle, 'font-style', 'italic')); this._setToolbarButtonState('text-decoration', 'underline', decorations.includes('underline')); this._setToolbarButtonState('text-decoration', 'line-through', decorations.includes('line-through')); this._setToolbarButtonState('text-decoration', 'overline', decorations.includes('overline')); this._setToolbarSelectValue(this._getToolbarSelect('fontSize'), computedStyle.fontSize); this._setToolbarFontFamilyValue(this._getToolbarSelect('font-family'), computedStyle.fontFamily); } private _getToolbarStateElement(): HTMLElement { const selection = this._getEditableSelection(); const element = selection ? this._getFirstSelectedElement(selection) : null; if (element && this.extendedItem.element.contains(element)) return element; return this.extendedItem.element as HTMLElement; } private _isComputedFormatApplied(computedStyle: CSSStyleDeclaration, type: string, value?: string): boolean { switch (type) { case 'font-weight': { if (computedStyle.fontWeight === 'bold') return true; const numericWeight = parseFloat(computedStyle.fontWeight); if (Number.isNaN(numericWeight)) return false; return value ? numericWeight >= parseFloat(value) : numericWeight >= 600; } case 'font-style': return computedStyle.fontStyle === value; case 'text-decoration': return !!value && this._getTextDecorationValues(computedStyle.textDecorationLine).includes(value); case 'fontSize': return computedStyle.fontSize === value; case 'font-family': return !!value && this._normalizeFontFamily(computedStyle.fontFamily) === this._normalizeFontFamily(value); default: return value != null && computedStyle.getPropertyValue(type) === value; } } private _getToolbarSelect(command: string): HTMLSelectElement | null { return this._toolbar.querySelector(`select[data-command="${command}"]`); } private _setToolbarButtonState(command: string, parameter: string, active: boolean) { const button = this._toolbar.querySelector(`button[data-command="${command}"][data-command-parameter="${parameter}"]`); if (!button) return; button.toggleAttribute('data-active', active); button.ariaPressed = String(active); button.style.backgroundColor = active ? 'rgb(191, 219, 254)' : ''; button.style.boxShadow = active ? 'inset 0 0 0 1px rgb(59, 130, 246)' : ''; } private _setToolbarSelectValue(select: HTMLSelectElement | null, value: string) { if (!select) return; this._removeTemporarySelectOptions(select); const option = Array.from(select.options).find(x => x.value === value); if (option) { select.value = option.value; return; } if (!value) { select.selectedIndex = -1; return; } const dynamicOption = document.createElement('option'); dynamicOption.value = value; dynamicOption.text = value; dynamicOption.dataset['temporaryToolbarValue'] = 'true'; select.appendChild(dynamicOption); select.value = value; } private _setToolbarFontFamilyValue(select: HTMLSelectElement | null, value: string) { if (!select) return; const primaryFamily = this._getPrimaryFontFamily(value); const normalizedPrimaryFamily = this._normalizeFontFamily(primaryFamily); this._removeTemporarySelectOptions(select); const option = Array.from(select.options).find(x => this._normalizeFontFamily(x.value) === normalizedPrimaryFamily); if (option) { select.value = option.value; return; } if (!primaryFamily) { select.selectedIndex = -1; return; } const dynamicOption = document.createElement('option'); dynamicOption.value = primaryFamily; dynamicOption.text = primaryFamily; dynamicOption.dataset['temporaryToolbarValue'] = 'true'; select.appendChild(dynamicOption); select.value = primaryFamily; } private _removeTemporarySelectOptions(select: HTMLSelectElement) { Array.from(select.options) .filter(x => x.dataset['temporaryToolbarValue'] === 'true') .forEach(x => x.remove()); } private _getPrimaryFontFamily(value: string): string { return value.replaceAll(/['"]/g, '').split(',')[0].trim(); } private _restoreSelection(spans: HTMLSpanElement[]) { const selection = this._getEditableSelection(); if (!selection) return; const range = document.createRange(); range.setStartBefore(spans[0]); range.setEndAfter(spans[spans.length - 1]); selection.removeAllRanges(); selection.addRange(range); } private _getEditableSelection(): Selection | null { const shadowRoot = this.designerCanvas.rootDesignItem.element.shadowRoot; if (!shadowRoot) return document.getSelection(); const selection = shadowrootGetSelection(shadowRoot); if (selection && 'addRange' in selection && 'removeAllRanges' in selection) return selection; return document.getSelection(); } private _isFormatApplied(selection: Selection | ArrayLike, type: string, value?: string): boolean { const element = this._getFirstSelectedElement(selection); if (!element) return false; return this._isComputedFormatApplied(getComputedStyle(element), type, value); } private _getFirstSelectedElement(selection: Selection | ArrayLike): HTMLElement | null { const range = this._getSelectionRange(selection); if (!range) return null; if (range.startContainer.nodeType === Node.TEXT_NODE) return range.startContainer.parentElement; const root = range.commonAncestorContainer.nodeType === Node.TEXT_NODE ? range.commonAncestorContainer.parentNode : range.commonAncestorContainer; if (!root) return range.startContainer instanceof HTMLElement ? range.startContainer : null; const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, { acceptNode: node => { const textNode = node as Text; if (!textNode.textContent?.length) return NodeFilter.FILTER_SKIP; return range.intersectsNode(textNode) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; } }); const firstTextNode = (root.nodeType === Node.TEXT_NODE && range.intersectsNode(root)) ? root as Text : walker.nextNode() as Text | null; if (firstTextNode?.parentElement) return firstTextNode.parentElement; return range.startContainer instanceof HTMLElement ? range.startContainer : range.startContainer.parentElement; } private _getSelectionRange(selection: Selection | ArrayLike): Range | null { if ('getRangeAt' in selection) { if (!selection.rangeCount) return null; return selection.getRangeAt(0); } const staticRange = selection[0]; if (!staticRange) return null; const range = document.createRange(); range.setStart(staticRange.startContainer, staticRange.startOffset); range.setEnd(staticRange.endContainer, staticRange.endOffset); return range; } private _findFormatTargets(span: HTMLSpanElement, type: string, value?: string): HTMLElement[] { const targets: HTMLElement[] = []; let current: HTMLElement | null = span; while (current && current !== this.extendedItem.element) { if (this._hasInlineFormat(current, type, value)) targets.push(current); current = current.parentElement; } return targets; } private _hasInlineFormat(element: HTMLElement, type: string, value?: string): boolean { switch (type) { case 'font-weight': return element.style.fontWeight !== ''; case 'font-style': return element.style.fontStyle !== ''; case 'text-decoration': return !!value && this._getTextDecorationValues(element.style.textDecorationLine || element.style.textDecoration).includes(value); case 'fontSize': return element.style.fontSize !== ''; case 'font-family': return element.style.fontFamily !== ''; default: return element.style.getPropertyValue(type) !== ''; } } private _setFormat(element: HTMLElement, type: string, value?: string) { switch (type) { case 'font-weight': element.style.fontWeight = value ?? ''; break; case 'font-style': element.style.fontStyle = value ?? ''; break; case 'text-decoration': { const decorations = this._getTextDecorationValues(element.style.textDecorationLine || element.style.textDecoration); if (value && !decorations.includes(value)) decorations.push(value); element.style.textDecorationLine = decorations.join(' '); break; } case 'fontSize': element.style.fontSize = value ?? ''; break; case 'font-family': element.style.fontFamily = value ?? ''; break; default: if (value == null) element.style.removeProperty(type); else element.style.setProperty(type, value); break; } } private _unsetFormat(element: HTMLElement, type: string, value?: string) { switch (type) { case 'font-weight': element.style.removeProperty('font-weight'); break; case 'font-style': element.style.removeProperty('font-style'); break; case 'text-decoration': { const decorations = this._getTextDecorationValues(element.style.textDecorationLine || element.style.textDecoration) .filter(decoration => decoration !== value); if (decorations.length) element.style.textDecorationLine = decorations.join(' '); else { element.style.removeProperty('text-decoration-line'); element.style.removeProperty('text-decoration'); } break; } case 'fontSize': element.style.removeProperty('font-size'); break; case 'font-family': element.style.removeProperty('font-family'); break; default: element.style.removeProperty(type); break; } } private _getTextDecorationValues(value: string | null | undefined): string[] { if (!value) return []; return value.split(' ').map(x => x.trim()).filter(x => x.length > 0 && x !== 'none' && x !== 'solid'); } private _normalizeFontFamily(value: string): string { return value.replaceAll(/['"]/g, '').split(',')[0].trim().toLowerCase(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { EditTextExtension } from "./EditTextExtension.js"; import { css } from '@node-projects/base-custom-webcomponent'; export class EditTextExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.isRootItem) return false; if (designItem.name === 'input') return false; return true; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new EditTextExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-edit-text-clickoutside { stroke: transparent; fill: lightgray; opacity: 0.7 } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/ElementDragTitleExtension.ts ================================================ import { getBoundingClientRectAlsoForDisplayContents } from '../../../helper/ElementHelper.js'; import { getTextWidth } from '../../../helper/TextHelper.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from '../tools/ITool.js'; import { NamedTools } from "../tools/NamedTools.js"; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; const extensionWidth = 60; export class ElementDragTitleExtension extends AbstractExtension { private _rect: SVGRectElement; private _clickRect: SVGRectElement; private _text: SVGForeignObjectElement; private _width: number; private _createTitleText: (designItem: IDesignItem) => string; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, createTitleText?: (designItem: IDesignItem) => string) { super(extensionManager, designerView, extendedItem); this._createTitleText = createTitleText; } override extend(cache: Record, event?: Event) { const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; if (!transformedCornerPoints) return; if (!isNaN(transformedCornerPoints.p1.x)) { const boundRect = getBoundingClientRectAlsoForDisplayContents(this.extendedItem.element); let w = getTextWidth(this.extendedItem.name, '10px monospace'); let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints.p2.x - transformedCornerPoints.p1.x, 2) + Math.pow(transformedCornerPoints.p2.y - transformedCornerPoints.p1.y, 2)); let text = this.extendedItem.name; if (this.extendedItem.id) text = '#' + this.extendedItem.id; if (this._createTitleText) text = this._createTitleText(this.extendedItem); this._width = Math.max(Math.min(elementWidth, w), extensionWidth); this._rect = this._drawRect(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, this._width, 15, 'svg-primary-selection-move', this._rect); this._clickRect = this._drawRect(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, this._width, 18, 'svg-invisible', this._clickRect); this._clickRect.style.background = 'transparent'; this._text = this._drawHTML('
' + text + '
', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints.p1.y - 16, this._width, 15, 'svg-text-primary', this._text); this._text.style.overflow = 'visible'; this._clickRect.addEventListener('pointerdown', (e) => this._pointerEvent(e)); this._clickRect.addEventListener('pointermove', (e) => this._pointerEvent(e)); this._clickRect.addEventListener('pointerup', (e) => this._pointerEvent(e)); this._clickRect.addEventListener('contextmenu', (e) => { e.preventDefault(); this.designerCanvas.showDesignItemContextMenu(this.extendedItem, e); }); this.refresh(cache, event); } } _drawMoveOverlay(itemRect: DOMRect) { } override refresh(cache: Record, event?: Event) { const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; if (!isNaN(transformedCornerPoints.p1.x)) { const angle = Math.atan2((transformedCornerPoints.p2.y - transformedCornerPoints.p1.y), (transformedCornerPoints.p2.x - transformedCornerPoints.p1.x)) * 180 / Math.PI; if (this._valuesHaveChanges(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, angle, this.designerCanvas.scaleFactor)) { const h = (15 / this.designerCanvas.scaleFactor); const o = -(16 / this.designerCanvas.scaleFactor); const w = (this._width / this.designerCanvas.scaleFactor); this._rect.setAttribute('x', '' + transformedCornerPoints.p1.x); this._rect.setAttribute('y', '' + transformedCornerPoints.p1.y); this._rect.style.rotate = angle + 'deg'; this._rect.style.translate = '0 ' + o + 'px'; this._rect.style.transformOrigin = '0 100%'; this._rect.style.transformBox = 'fill-box'; this._rect.setAttribute('height', '' + h); this._rect.setAttribute('width', '' + w); this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString(); this._clickRect.setAttribute('x', '' + transformedCornerPoints.p1.x); this._clickRect.setAttribute('y', '' + transformedCornerPoints.p1.y); this._clickRect.style.rotate = angle + 'deg'; this._clickRect.style.translate = '0 ' + o + 'px'; this._clickRect.style.transformOrigin = '0 100%'; this._clickRect.style.transformBox = 'fill-box'; this._clickRect.setAttribute('height', '' + (h + 3)); this._clickRect.setAttribute('width', '' + w); this._clickRect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString(); this._text.setAttribute('x', '' + transformedCornerPoints.p1.x); this._text.setAttribute('y', '' + transformedCornerPoints.p1.y); this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px'; this._text.setAttribute('height', '' + h); this._text.setAttribute('width', '' + w); (this._text.children[0].children[0]).style.rotate = angle + 'deg'; (this._text.children[0].children[0]).style.translate = '0 ' + o + 'px'; (this._text.children[0].children[0]).style.transformOrigin = '0 100%'; } } } _pointerEvent(event: PointerEvent) { event.preventDefault(); event.stopPropagation(); if (event.button != 2) (this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer)).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element); } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { ElementDragTitleExtension } from './ElementDragTitleExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class ElementDragTitleExtensionProvider implements IDesignerExtensionProvider { private _createTitleText: (designItem: IDesignItem) => string; constructor(createTitleText?: (designItem: IDesignItem) => string) { this._createTitleText = createTitleText; } shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement); } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new ElementDragTitleExtension(extensionManager, designerView, designItem, this._createTitleText); } static readonly style = css` .svg-text-primary { stroke: none; color: white; font-family: monospace; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/ExtensionManager.ts ================================================ import { DesignItem } from '../../../item/DesignItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { NodeType } from "../../../item/NodeType.js"; import { ISelectionChangedEvent } from '../../../services/selectionService/ISelectionChangedEvent.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ExtensionType } from './ExtensionType.js'; import { IExtensionManager } from './IExtensionManger.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { DesignerCanvas } from '../designerCanvas.js'; import { ISelectionRefreshEvent } from '../../../services/selectionService/ISelectionRefreshEvent.js'; import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { clearCache as clearBoxQuadsCache, useCache as useBoxQuadsCache } from '../../../helper/getBoxQuads.js'; import { IContentChanged } from '../../../services/InstanceServiceContainer.js'; function wmGet>(designItem: IDesignItem, weakMap: WeakMap) { let val = weakMap.get(designItem); if (val) return val; val = new Map(); weakMap.set(designItem, val); return val; } export class ExtensionManager implements IExtensionManager { designerCanvas: IDesignerCanvas; designItemsWithExtentions: Set = new Set(); _timeout: ReturnType; _appliedDesignerExtensions = new WeakMap> _shouldAppliedDesignerExtensions = new WeakMap> _lastApplyEventPerType = new WeakMap> _lastPrimarySelectionRefreshItem: WeakRef constructor(designerCanvas: IDesignerCanvas) { useBoxQuadsCache(); this.designerCanvas = designerCanvas; designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this)); designerCanvas.instanceServiceContainer.selectionService.onSelectionRefresh.on(this._selectedElementsRefresh.bind(this)); designerCanvas.instanceServiceContainer.onContentChanged.on(this._contentChanged.bind(this)); designerCanvas.serviceContainer.globalContext.onToolChanged.on(() => { this.removeExtension(designerCanvas.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed); this._lastPrimarySelectionRefreshItem = null; }); } connected() { this.ensurePermanentRootExtensionsApplied(); if (!this._timeout) this._timeout = setTimeout(() => this.refreshAllExtensionsTimeout(), 20); } disconnected() { if (this._timeout) clearTimeout(this._timeout); this._timeout = null; } private refreshAllExtensionsTimeout() { this.refreshAllAppliedExtentions(); this._timeout = setTimeout(() => this.refreshAllExtensionsTimeout(), 20); } private ensurePermanentRootExtensionsApplied() { const rootDesignItem = this.designerCanvas.rootDesignItem; if (!rootDesignItem) return; if (wmGet(rootDesignItem, this._appliedDesignerExtensions).get(ExtensionType.Permanent)?.length) return; this.applyExtension(rootDesignItem, ExtensionType.Permanent); } private _contentChanged(contentChanges: IContentChanged[]) { requestAnimationFrame(() => { for (let contentChanged of contentChanges) { switch (contentChanged.changeType) { case 'added': this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, null, true); break; case 'moved': this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent); break; case 'parsed': this.ensurePermanentRootExtensionsApplied(); this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, null, true); break; case 'removed': this.removeExtensions(contentChanged.designItems, true, ExtensionType.Permanent); break; } } }); } private _selectedElementsChanged(selectionChangedEvent: ISelectionChangedEvent) { this._lastPrimarySelectionRefreshItem = null; if (selectionChangedEvent.oldSelectedElements && selectionChangedEvent.oldSelectedElements.length) { this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionRefreshed); this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection); this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered); this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.OnlyOneItemSelected); this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection); this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.MultipleItemsSelected); if (selectionChangedEvent.oldSelectedElements[0].parent) { const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer) this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer); this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered); } } if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) { this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection, selectionChangedEvent.event); this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection, selectionChangedEvent.event); if (selectionChangedEvent.selectedElements.length === 1) this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.OnlyOneItemSelected, selectionChangedEvent.event); else if (selectionChangedEvent.selectedElements.length > 1) this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.MultipleItemsSelected, selectionChangedEvent.event); if (selectionChangedEvent.selectedElements[0].getPlacementService()?.isEnterableContainer(selectionChangedEvent.selectedElements[0])) this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered, selectionChangedEvent.event); if (selectionChangedEvent.selectedElements[0].parent) { const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer) this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer, selectionChangedEvent.event); if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer)) this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered, selectionChangedEvent.event); } } } private _selectedElementsRefresh(selectionChangedEvent: ISelectionRefreshEvent) { this.refreshAllAppliedExtentions(selectionChangedEvent.event); if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length && this._lastPrimarySelectionRefreshItem?.deref() === selectionChangedEvent.selectedElements[0]) { if (!this._appliedDesignerExtensions.get(selectionChangedEvent.selectedElements[0])?.get(ExtensionType.PrimarySelectionRefreshed)) this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionRefreshed, selectionChangedEvent.event); } this._lastPrimarySelectionRefreshItem = new WeakRef(selectionChangedEvent.selectedElements[0]); } applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive: boolean = false) { if (designItem && designItem.nodeType == NodeType.Element) { const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType); let extensions: IDesignerExtension[] = []; if (extProv) { const cache = {}; clearBoxQuadsCache(); for (let e of extProv) { let shouldAppE = wmGet(designItem, this._shouldAppliedDesignerExtensions).get(extensionType); if (!shouldAppE) shouldAppE = []; shouldAppE.push(e); wmGet(designItem, this._shouldAppliedDesignerExtensions).set(extensionType, shouldAppE); if (e.shouldExtend(this, this.designerCanvas, designItem)) { let appE = wmGet(designItem, this._appliedDesignerExtensions).get(extensionType); if (!appE) appE = []; const ext = e.getExtension(this, this.designerCanvas, designItem); try { ext.extend(cache, event); extensions.push(ext); if (event) wmGet(designItem, this._lastApplyEventPerType).set(extensionType, event); else wmGet(designItem, this._lastApplyEventPerType).delete(extensionType); } catch (err) { console.error(err); } appE.push(ext); wmGet(designItem, this._appliedDesignerExtensions).set(extensionType, appE); this.designItemsWithExtentions.add(designItem); } } } if (recursive) { for (const d of designItem.children()) { this.applyExtension(d, extensionType, event, recursive); } } return extensions; } return null; } applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive: boolean = false) { this.designerCanvas.overlayLayer.startBatch(); if (designItems) { const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType); if (extProv) { const cache = {}; clearBoxQuadsCache(); for (let e of extProv) { for (let i of designItems) { let shouldAppE = wmGet(i, this._shouldAppliedDesignerExtensions).get(extensionType); if (!shouldAppE) shouldAppE = []; shouldAppE.push(e); wmGet(i, this._shouldAppliedDesignerExtensions).set(extensionType, shouldAppE); if (e.shouldExtend(this, this.designerCanvas, i)) { let appE = wmGet(i, this._appliedDesignerExtensions).get(extensionType); if (!appE) appE = []; const ext = e.getExtension(this, this.designerCanvas, i); try { ext.extend(cache, event); if (event) wmGet(i, this._lastApplyEventPerType).set(extensionType, event); else wmGet(i, this._lastApplyEventPerType).delete(extensionType); } catch (err) { console.error(err); } appE.push(ext); wmGet(i, this._appliedDesignerExtensions).set(extensionType, appE); this.designItemsWithExtentions.add(i); } } } } if (recursive) { for (const d of designItems) { this.applyExtensions(Array.from(d.children()), extensionType, event, recursive); } } } this.designerCanvas.overlayLayer.endBatch(); } applyExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension, extensionType: ExtensionType = ExtensionType.Directly) { let appE = wmGet(designItem, this._appliedDesignerExtensions).get(ExtensionType.Directly); if (!appE) appE = []; try { extension.extend(null, null); } catch (err) { console.error(err); } appE.push(extension); wmGet(designItem, this._appliedDesignerExtensions).set(extensionType, appE); this.designItemsWithExtentions.add(designItem); } removeExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension) { for (let e of wmGet(designItem, this._appliedDesignerExtensions)) { const idx = e[1].indexOf(extension); if (idx >= 0) { try { extension.dispose(); } catch (err) { console.error(err); } e[1].splice(idx, 1); if (e[1].length == 0) { wmGet(designItem, this._appliedDesignerExtensions).delete(e[0]); wmGet(designItem, this._shouldAppliedDesignerExtensions).delete(e[0]); } if (!wmGet(designItem, this._appliedDesignerExtensions).size) this.designItemsWithExtentions.delete(designItem); } } } removeExtension(designItem: IDesignItem, extensionType?: ExtensionType) { if (designItem) { if (extensionType) { wmGet(designItem, this._shouldAppliedDesignerExtensions).delete(extensionType); let exts = wmGet(designItem, this._appliedDesignerExtensions).get(extensionType); if (exts) { for (let e of exts) { try { e.dispose(); wmGet(designItem, this._lastApplyEventPerType).delete(extensionType); } catch (err) { console.error(err); } } wmGet(designItem, this._appliedDesignerExtensions).delete(extensionType); if (!wmGet(designItem, this._appliedDesignerExtensions).size) this.designItemsWithExtentions.delete(designItem); } } else { wmGet(designItem, this._shouldAppliedDesignerExtensions).clear(); for (let appE of wmGet(designItem, this._appliedDesignerExtensions)) { for (let e of appE[1]) { try { e.dispose(); } catch (err) { console.error(err); } } } wmGet(designItem, this._appliedDesignerExtensions).clear(); this.designItemsWithExtentions.delete(designItem); } } } removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType) { if (designItems) { if (extensionType) { for (let i of designItems) { if (recursive && i.hasChildren) { this.removeExtensions([...i.children()], true, extensionType); } wmGet(i, this._shouldAppliedDesignerExtensions).delete(extensionType); let exts = wmGet(i, this._appliedDesignerExtensions).get(extensionType); if (exts) { for (let e of exts) { try { e.dispose(); wmGet(i, this._lastApplyEventPerType).delete(extensionType); } catch (err) { console.error(err); } } wmGet(i, this._appliedDesignerExtensions).delete(extensionType); if (!wmGet(i, this._appliedDesignerExtensions).size) this.designItemsWithExtentions.delete(i); } } } else { for (let i of designItems) { if (recursive && i.hasChildren) { this.removeExtensions([...i.children()], true, extensionType); } wmGet(i, this._shouldAppliedDesignerExtensions).clear(); for (let appE of wmGet(i, this._appliedDesignerExtensions)) { for (let e of appE[1]) { try { e.dispose(); } catch (err) { console.error(err); } } } wmGet(i, this._appliedDesignerExtensions).clear(); this.designItemsWithExtentions.delete(i); } } } } removeAllExtensions() { this.designItemsWithExtentions.forEach(i => { wmGet(i, this._shouldAppliedDesignerExtensions).clear(); for (let appE of wmGet(i, this._appliedDesignerExtensions)) { for (let e of appE[1]) { try { e.dispose(); } catch (err) { console.error(err); } } } wmGet(i, this._appliedDesignerExtensions).clear(); }); this.designItemsWithExtentions.clear(); } refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event) { if (this.designerCanvas.checkVisibility && !this.designerCanvas.checkVisibility()) return; if (designItem) { if (extensionType) { if (!designItem.element.isConnected) { this.removeExtension(designItem, extensionType); } else { let exts = wmGet(designItem, this._appliedDesignerExtensions).get(extensionType); if (exts) { const cache = {}; clearBoxQuadsCache(); for (let e of exts) { try { e.refresh(cache, event); if (event) wmGet(designItem, this._lastApplyEventPerType).set(extensionType, event); } catch (err) { console.error(err); } } } } } else { const cache = {}; clearBoxQuadsCache(); for (let appE of wmGet(designItem, this._appliedDesignerExtensions)) { for (let e of appE[1]) { try { e.refresh(cache, event); } catch (err) { console.error(err); } } } } } } refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number) { if (this.designerCanvas.checkVisibility && !this.designerCanvas.checkVisibility()) return; this.designerCanvas.overlayLayer.startBatch(); const start = performance.now(); if (designItems) { if (extensionType) { const cache = {}; clearBoxQuadsCache(); outer1: for (let i of designItems) { if (!i.element.isConnected) { this.removeExtension(i, extensionType); } else { let exts = wmGet(i, this._appliedDesignerExtensions).get(extensionType); if (exts) { for (let e of exts) { try { if (e != ignoredExtension) e.refresh(cache, event); if (timeout) { const end = performance.now(); if (end - start > timeout) { console.warn("refreshExtensions() took too long, stopped refreshing"); break outer1; } } } catch (err) { console.error(err); } } } } } } else { const cache = {}; clearBoxQuadsCache(); outer2: for (let i of designItems) { for (let appE of wmGet(i, this._appliedDesignerExtensions)) { for (let e of appE[1]) { try { if (e != ignoredExtension) { e.refresh(cache, event); if (event) wmGet(i, this._lastApplyEventPerType).set(extensionType, event); if (timeout) { const end = performance.now(); if (end - start > timeout) { console.warn("refreshExtensions() took too long, stopped refreshing"); break outer2; } } } } catch (err) { console.error(err); } } } } } } this.designerCanvas.overlayLayer.endBatch(); } refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension, event?: Event) { this.designerCanvas.overlayLayer.startBatch(); if (designItems) { this.refreshExtensions(designItems, ExtensionType.Directly, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.Permanent, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.Selection, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.PrimarySelection, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.MouseOver, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.ContainerDragOverAndCanBeEntered, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.ContainerDrag, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.Doubleclick, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.Placement, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.PrimarySelectionAndCanBeEntered, event, ignoredExtension); this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainerAndCanBeEntered, event, ignoredExtension); } this.designerCanvas.overlayLayer.endBatch(); } refreshAllAppliedExtentions(event?: Event) { (this.designerCanvas).fillCalculationrects(); this.refreshAllExtensions([...this.designItemsWithExtentions], null, event) } //TODO: does not work with permanant, when not applied... maybe we need to do in another way //maybe store the "shouldAppliedExtensions??" reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[], enabledExtensionTypes?: ExtensionType[]) { this.designerCanvas.overlayLayer.startBatch(); for (let d of ExtensionManager.getAllChildElements(this.designerCanvas.rootDesignItem)) { if (!filterDesignItems || filterDesignItems.includes(d)) { const keys = [...wmGet(d, this._shouldAppliedDesignerExtensions).keys()]; for (let t of keys) { const evt = wmGet(d, this._lastApplyEventPerType).get(t); this.removeExtension(d, t); if (enabledExtensionTypes == null || enabledExtensionTypes.includes(t)) this.applyExtension(d, t, evt); } } } this.designerCanvas.overlayLayer.endBatch(); } private static *getAllChildElements(designItem: IDesignItem): IterableIterator { if (designItem.nodeType == NodeType.Element) yield designItem; if (designItem.hasChildren) { for (let c of designItem.children()) for (let di of ExtensionManager.getAllChildElements(c)) yield di; } } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/ExtensionType.ts ================================================ export enum ExtensionType { Directly = 0, //Extensions wich are applied directly, for example from Text Edit Tool Permanent = 1, Selection = 2, PrimarySelection = 3, PrimarySelectionContainer = 4, MouseOver = 5, OnlyOneItemSelected = 6, MultipleItemsSelected = 7, /** * Extension for the Container wich the dragged element is draged over. */ ContainerDragOverAndCanBeEntered = 8, /** * Extension for the Container on wich a new element is draged over. */ ContainerExternalDragOverAndCanBeEntered = 9, /** * Extension for the Current Container wich the dragged element is contained. */ ContainerDrag = 10, Doubleclick = 11, Placement = 12, /** * Extensions only when the container can be Entered. * So for Example on a custom webcomponent wich uses a grid layout for it's root, but can not show children, * do not display grid extension. */ PrimarySelectionAndCanBeEntered = 13, PrimarySelectionContainerAndCanBeEntered = 14, /** * Extension when the Primary Selection is refreshed, means clicked a second time */ PrimarySelectionRefreshed = 15, /** * Extension manually applied by the user. But registered, caus we need the styles. */ ManualApplied = 16, } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from "./OverlayLayer.js"; export class GrayOutDragOverContainerExtension extends AbstractExtension { private _rect: SVGPathElement; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend() { this.refresh(); } override refresh() { const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-rect-enter-container', this._rect, OverlayLayer.Background); } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { GrayOutDragOverContainerExtension } from "./GrayOutDragOverContainerExtension.js"; export class GrayOutDragOverContainerExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { return true; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new GrayOutDragOverContainerExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/GrayOutExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from "./OverlayLayer.js"; export class GrayOutExtension extends AbstractExtension { private _path: SVGPathElement; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend() { this.refresh(); } override refresh() { if (!this._path) { this._path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this._path.setAttribute('class', 'svg-gray-out'); this._path.setAttribute('fill-rule', 'evenodd'); this._addOverlay(this._path, OverlayLayer.Background); } const p = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor }; let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z "; data += "M" + p.p1.x + " " + p.p1.y + " L" + p.p2.x + " " + p.p2.y + " L" + p.p3.x + " " + p.p3.y + " L" + p.p4.x + " " + p.p4.y + " Z"; this._path.setAttribute("d", data); } override dispose() { this._removeAllOverlays(); this._path = null; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/GrayOutExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { GrayOutExtension } from './GrayOutExtension.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class GrayOutExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return true; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new GrayOutExtension(extensionManager, designerView, designItem); } readonly style = css` .svg-gray-out { stroke: transparent; fill: rgba(211, 211, 211, 0.8); pointer-events: none } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/HighlightElementExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from './OverlayLayer.js'; import { createOverlayPathDataFromSvgGeometryElement } from '../../../helper/SvgHelper.js'; export interface HighlightElementExtensionOptions { useSvgGeometryOutline?: boolean; includeSvgMarkers?: boolean; } export class HighlightElementExtension extends AbstractExtension { private _rect: SVGPathElement; private _options: HighlightElementExtensionOptions; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, options?: HighlightElementExtensionOptions) { super(extensionManager, designerView, extendedItem); this._options = { useSvgGeometryOutline: true, includeSvgMarkers: true, ...(options ?? {}) }; } override extend() { this.refresh(); } override refresh() { if (this._options.useSvgGeometryOutline) { const transformedShapePathData = createOverlayPathDataFromSvgGeometryElement(this.extendedItem.element, this.designerCanvas, { includeMarkers: this._options.includeSvgMarkers }); if (transformedShapePathData) { this._rect = this._drawPath(transformedShapePathData, 'svg-hover-fill', this._rect, OverlayLayer.Background); this._rect.style.strokeWidth = (3 / this.designerCanvas.scaleFactor).toString(); return; } } const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; if (!isNaN(transformedCornerPoints.p1.x)) { this._rect = this._drawTransformedRect(transformedCornerPoints, 'svg-hover', this._rect, OverlayLayer.Background); this._rect.style.strokeWidth = (3 / this.designerCanvas.scaleFactor).toString(); } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/HighlightElementExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { HighlightElementExtension, HighlightElementExtensionOptions } from './HighlightElementExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class HighlightElementExtensionProvider implements IDesignerExtensionProvider { private _options: HighlightElementExtensionOptions; constructor(options?: HighlightElementExtensionOptions) { this._options = options ?? {}; } shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return !(designItem.element instanceof HTMLTemplateElement); } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new HighlightElementExtension(extensionManager, designerView, designItem, this._options); } static readonly style = css` .svg-hover { stroke: #90caf966; fill: none; } .svg-hover-fill { stroke: #90caf966; fill: #90caf966; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/IDesignerExtension.ts ================================================ import { IDisposable } from '../../../../interfaces/IDisposable.js'; export interface IDesignerExtension extends IDisposable { extend(cache: Record, event?: Event); refresh(cache: Record, event?: Event); } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/IDesignerExtensionProvider.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; export interface IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean; getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension; style?: CSSStyleSheet | CSSStyleSheet[]; svgDefs?: string | string[]; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/IExtensionManger.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { ExtensionType } from './ExtensionType.js'; import { IDesignerExtension } from './IDesignerExtension.js'; export interface IExtensionManager { applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean) : IDesignerExtension[]; applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean); applyExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension, extensionType?: ExtensionType); removeExtension(designItem: IDesignItem, extensionType?: ExtensionType); removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType); removeExtensionInstance(designItem: IDesignItem, extension: IDesignerExtension); removeAllExtensions(); refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event); refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number); refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension, event?: Event); refreshAllAppliedExtentions(event?: Event); reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[], enabledExtensionTypes?: ExtensionType[]); connected(); disconnected(); } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/InvisibleElementExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from "./OverlayLayer.js"; export class InvisibleElementExtension extends AbstractExtension { private _rect: SVGPathElement; constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerCanvas, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const t = this.extendedItem.element.getBoxQuads({relativeTo: this.designerCanvas.canvas})[0]; if (this._valuesHaveChanges(t.p1.x, t.p1.y, t.p2.x, t.p2.y, t.p3.x, t.p3.y, t.p4.x, t.p4.y)) { this._rect = this._drawTransformedRect(t, 'svg-invisible-div', this._rect, OverlayLayer.Background); } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { InvisibleElementExtension as InvisibleElementExtension } from './InvisibleElementExtension.js'; import { css } from "@node-projects/base-custom-webcomponent"; export const invisibleElementExtensionShowOverlayOptionName = 'invisibleElementExtensionShowOverlay'; export class InvisibleElementExtensionProvider implements IDesignerExtensionProvider { elementFilter: (designItem: IDesignItem) => boolean; constructor(elementFilter: (designItem: IDesignItem) => boolean = (d) => d.name == 'div' && window.getComputedStyle(d.element).display != 'inline') { this.elementFilter = elementFilter; } shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designerCanvas.instanceServiceContainer.designContext.extensionOptions[invisibleElementExtensionShowOverlayOptionName] !== false) { if (this.elementFilter(designItem)) { const st = window.getComputedStyle(designItem.element); return st.backgroundColor == 'rgba(0, 0, 0, 0)' && st.borderStyle == 'none' } } return false; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new InvisibleElementExtension(extensionManager, designerCanvas, designItem); } static readonly style = css` .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1; `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/MarginExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from './OverlayLayer.js'; export class MarginExtension extends AbstractExtension { constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } private _path: SVGPathElement; private _path2: SVGPathElement; override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const computedStyle = getComputedStyle(this.extendedItem.element); if (computedStyle.margin !== '0px') { const left = Number.parseFloat(computedStyle.marginLeft.replace('px', '')); const top = Number.parseFloat(computedStyle.marginTop.replace('px', '')); const right = Number.parseFloat(computedStyle.marginRight.replace('px', '')); const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', '')); if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) { const p = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!isNaN(p.p1.x)) { if (this._valuesHaveChanges(left, top, right, bottom, p.p1.x, p.p1.y, p.p2.x, p.p2.y, p.p3.x, p.p3.y, p.p4.x, p.p4.y)) { const p2 = this.extendedItem.element.getBoxQuads({ box: 'margin', relativeTo: this.designerCanvas.canvas })[0]; let d = "M" + [p.p1, p.p2, p.p3, p.p4].map(x => x.x + ',' + x.y).join(' ') + 'Z '; d += "M" + [p2.p1, p2.p2, p2.p3, p2.p4].map(x => x.x + ',' + x.y).join(' ') + 'Z '; this._path = this._drawPath(d, 'svg-margin-fill', this._path, OverlayLayer.Background); this._path2 = this._drawPath(d, 'svg-margin', this._path2, OverlayLayer.Background); } } } } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/MarginExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { MarginExtension } from './MarginExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { NodeType } from '../../../item/NodeType.js'; import { svgAsString } from '../../../helper/SvgHelper.js'; export class MarginExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType == NodeType.Element) return true; return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new MarginExtension(extensionManager, designerView, designItem); } readonly style = css` .svg-margin-fill { fill: color(display-p3 1 0 1 / 15%); fill-rule: evenodd; } .svg-margin { fill: color(display-p3 1 0 1 / 80%); fill-rule: evenodd; mask: url(#mask-stripe-margin); } `; static readonly svgDefs = svgAsString` `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/MultipleSelectionRectExtension.ts ================================================ import { calculateOuterRect } from '../../../helper/ElementHelper.js'; import { filterChildPlaceItems } from '../../../helper/LayoutHelper.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from './OverlayLayer.js'; export class MultipleSelectionRectExtension extends AbstractExtension { private _line1: SVGLineElement; private _line2: SVGLineElement; private _line3: SVGLineElement; private _line4: SVGLineElement; private _designerView: any; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); this._designerView = designerView; } override extend() { this.refresh(); } override refresh() { let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements; if (selection.length > 1) { selection = filterChildPlaceItems(selection); let rect = calculateOuterRect(selection, this._designerView) this._line1 = this._drawLine(rect.x, rect.y, rect.x + rect.width, rect.y, 'svg-multiple-rect-selection', this._line1, OverlayLayer.Background); this._line2 = this._drawLine(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + rect.height, 'svg-multiple-rect-selection', this._line2, OverlayLayer.Background); this._line3 = this._drawLine(rect.x + rect.width, rect.y + rect.height, rect.x, rect.y + rect.height, 'svg-multiple-rect-selection', this._line3, OverlayLayer.Background); this._line4 = this._drawLine(rect.x, rect.y + rect.height, rect.x, rect.y, 'svg-multiple-rect-selection', this._line4, OverlayLayer.Background); this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { MultipleSelectionRectExtension as MultipleSelectionRectExtension } from './MultipleSelectionRectExtension.js'; export class MultipleSelectionRectExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement); } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new MultipleSelectionRectExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/OverlayLayer.ts ================================================ export enum OverlayLayer { Background = 10, Normal = 20, Foreground = 30 } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PaddingExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { OverlayLayer } from './OverlayLayer.js'; export class PaddingExtension extends AbstractExtension { constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } private _path: SVGPathElement; private _path2: SVGPathElement; override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const computedStyle = getComputedStyle(this.extendedItem.element); if (computedStyle.padding !== '0px') { let left = Number.parseFloat(computedStyle.paddingLeft.replace('px', '')); let top = Number.parseFloat(computedStyle.paddingTop.replace('px', '')); let right = Number.parseFloat(computedStyle.paddingRight.replace('px', '')); let bottom = Number.parseFloat(computedStyle.paddingBottom.replace('px', '')); left += Number.parseFloat(computedStyle.borderLeftWidth.replace('px', '')); top += Number.parseFloat(computedStyle.borderTopWidth.replace('px', '')); right += Number.parseFloat(computedStyle.borderRightWidth.replace('px', '')); bottom += Number.parseFloat(computedStyle.borderBottomWidth.replace('px', '')); if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) { const p = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!isNaN(p.p1.x)) { if (this._valuesHaveChanges(left, top, right, bottom, p.p1.x, p.p1.y, p.p2.x, p.p2.y, p.p3.x, p.p3.y, p.p4.x, p.p4.y)) { const p2 = this.extendedItem.element.getBoxQuads({ box: 'content', relativeTo: this.designerCanvas.canvas })[0]; let d = "M" + [p.p1, p.p2, p.p3, p.p4].map(x => x.x + ',' + x.y).join(' ') + 'Z '; d += "M" + [p2.p1, p2.p2, p2.p3, p2.p4].map(x => x.x + ',' + x.y).join(' ') + 'Z '; this._path = this._drawPath(d, 'svg-padding-fill', this._path, OverlayLayer.Background); this._path2 = this._drawPath(d, 'svg-padding', this._path2, OverlayLayer.Background); } } } } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PaddingExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { NodeType } from '../../../item/NodeType.js'; import { PaddingExtension } from './PaddingExtension.js'; import { svgAsString } from '../../../helper/SvgHelper.js'; export class PaddingExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType == NodeType.Element) return true; return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new PaddingExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-padding { fill: #32cd3266; fill-rule: evenodd; } `; readonly style = css` .svg-padding-fill { fill: #32cd3266; fill-rule: evenodd; } .svg-padding { fill: #32cd32FF; fill-rule: evenodd; mask: url(#mask-stripe-padding); } `; static readonly svgDefs = svgAsString` `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PlacementExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; export class PlacementExtension extends AbstractExtension { private _rect: SVGRectElement; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend() { this.refresh(); } override refresh() { const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element); const computedStyle = getComputedStyle(this.extendedItem.element); const left = Number.parseFloat(computedStyle.marginLeft.replace('px', '')); const top = Number.parseFloat(computedStyle.marginTop.replace('px', '')); const right = Number.parseFloat(computedStyle.marginRight.replace('px', '')); const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', '')); this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-placement', this._rect); } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PlacementExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { PlacementExtension } from './PlacementExtension.js'; export class PlacementExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return true; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new PlacementExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-placement { stroke: #90caf9; fill: none; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PositionExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; export class PositionExtension extends AbstractExtension { private _line1: SVGLineElement; private _line2: SVGLineElement; private _line3: SVGLineElement; private _line4: SVGLineElement; private _textX: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement]; private _textY: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement]; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend() { this.refresh(); } _oldValues = []; override refresh() { //TODO: show wich position is docked (no dashed line, but full). klick on value disables or enables docking? Disabling enables parent side, enabling both removes width or height. const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element); const itemParentRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.parent.element); if (this._valuesHaveChanges(this.designerCanvas.scaleFactor, itemRect.x, itemRect.y, itemParentRect.x, itemParentRect.y, itemRect.height, itemRect.width, itemParentRect.height, itemParentRect.width)) { this._line1 = this._drawLine(itemParentRect.x, itemRect.y + itemRect.height / 2, itemRect.x, itemRect.y + itemRect.height / 2, 'svg-position', this._line1); this._line2 = this._drawLine(itemParentRect.x + itemParentRect.width, itemRect.y + itemRect.height / 2, itemRect.x + itemRect.width, itemRect.y + itemRect.height / 2, 'svg-position', this._line2); this._line3 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y, itemRect.x + itemRect.width / 2, itemRect.y, 'svg-position', this._line3); this._line4 = this._drawLine(itemRect.x + itemRect.width / 2, itemParentRect.y + itemParentRect.height, itemRect.x + itemRect.width / 2, itemRect.y + itemRect.height, 'svg-position', this._line4); this._line1.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor); this._line2.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor); this._line3.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor); this._line4.style.strokeWidth = '' + (1 / this.designerCanvas.scaleFactor); this._line1.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor); this._line2.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor); this._line3.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor); this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor); let rightIsUnit, bottomIsUnit; if (this.extendedItem.element.computedStyleMap) { const cm = this.extendedItem.element.computedStyleMap(); rightIsUnit = cm.get('right') instanceof CSSUnitValue; bottomIsUnit = cm.get('bottom') instanceof CSSUnitValue; } else { rightIsUnit = !!(this.extendedItem.element)?.style?.right; bottomIsUnit = !!(this.extendedItem.element)?.style?.bottom; } if (!rightIsUnit) { let x = Math.round(itemRect.x - itemParentRect.x); this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX); this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; } else { let x = Math.round(itemParentRect.x + itemParentRect.width - (itemRect.x + itemRect.width)); this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + itemParentRect.width - x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX); this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; } if (!bottomIsUnit) { let y = Math.round(itemRect.y - itemParentRect.y); this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + y / 2, 'white', 'svg-position-text', this._textY); this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; } else { let y = Math.round(itemParentRect.y + itemParentRect.height - (itemRect.y + itemRect.height)); this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + itemParentRect.height - y / 2, 'white', 'svg-position-text', this._textY); this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px'; } } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PositionExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { PositionExtension } from './PositionExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class PositionExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { if (!designItem?.parent || designItem.element instanceof HTMLTemplateElement) return false; const cs = getComputedStyle((designItem.element)); if (cs.position === 'relative' || cs.position === 'absolute') return true; return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new PositionExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-position-text { text-anchor: middle; alignment-baseline: central; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PreviousElementSelectExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; export class PreviousElementSelectExtension extends AbstractExtension { constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } private _path: SVGPathElement; private _rect: SVGRectElement; private _clickRect: SVGRectElement; private _g: SVGGElement; override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!transformedCornerPoints) return; if (!isNaN(transformedCornerPoints.p2.x)) { if (this._valuesHaveChanges(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, this.designerCanvas.scaleFactor)) { const angle = Math.atan2((transformedCornerPoints.p2.y - transformedCornerPoints.p1.y), (transformedCornerPoints.p2.x - transformedCornerPoints.p1.x)) * 180 / Math.PI; const h = (15 / this.designerCanvas.scaleFactor); this._rect = this._drawRect(0, 0, h, h, 'svg-previous-select', this._rect); this._clickRect = this._drawRect(0, 0, h, h, 'svg-invisible', this._clickRect); if (!this._g) { this._g = document.createElementNS("http://www.w3.org/2000/svg", "g"); this._g.setAttribute('class', 'svg-previous-select'); this._path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this._path.setAttribute('d', 'm4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'); this._g.appendChild(this._rect); this._g.appendChild(this._path); this._addOverlay(this._g); this._clickRect.onpointerdown = (e) => { e.preventDefault(); e.stopPropagation(); this.extendedItem.instanceServiceContainer.selectionService.setSelectedElements([this.extendedItem.parent]); }; this._clickRect.onpointermove = (e) => { e.preventDefault(); e.stopPropagation(); } this._g.appendChild(this._clickRect); } this._path.style.scale = (0.6 / this.designerCanvas.scaleFactor).toString(); this._g.style.translate = (transformedCornerPoints.p2.x - (14.5 / this.designerCanvas.scaleFactor)) + 'px ' + (transformedCornerPoints.p2.y - (15 / this.designerCanvas.scaleFactor)) + 'px'; this._g.style.rotate = angle + 'deg'; this._g.style.transformOrigin = '100% 100%'; this._g.style.transformBox = 'fill-box' } } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/PreviousElementSelectExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { PreviousElementSelectExtension } from './PreviousElementSelectExtension.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class PreviousElementSelectExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement); } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new PreviousElementSelectExtension(extensionManager, designerView, designItem); } static readonly style = css` rect.svg-previous-select { stroke: none; fill: #3899ec; pointer-events: auto; } g.svg-previous-select { fill: white; pointer-events: auto; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/ResizeExtension.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { IPoint } from "../../../../interfaces/IPoint.js"; import { ISize } from '../../../../interfaces/ISize.js'; import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js'; import { getElementLocalToCanvasMatrix } from '../../../helper/GridHelper.js'; import { roundValue } from '../../../helper/LayoutHelper.js'; import { getElementSize } from '../../../helper/getBoxQuads.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; export function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top") { switch (normalizeProperty) { case "left": let left = getComputedStyle(element).left; (element).style.removeProperty('right'); (element).style.left = left; return left; case "top": let top = getComputedStyle(element).top; (element).style.removeProperty('bottom'); (element).style.top = top; return top; } } //TODO: use PlacementService, size is not always width/height could also be margin etc... // also when elment aligned to bottom, will it later also be? export class ResizeExtension extends AbstractExtension { private resizeAllSelected: boolean; private _initialSizes: ISize[] | null = null; private _actionModeStarted!: string; private _initialPoint: IPoint | null = null; private _offsetPoint!: IPoint; private _circle1?: SVGCircleElement; private _circle2?: SVGCircleElement; private _circle3?: SVGCircleElement; private _circle4?: SVGCircleElement; private _circle5?: SVGCircleElement; private _circle6?: SVGCircleElement; private _circle7?: SVGCircleElement; private _circle8?: SVGCircleElement; private _initialHandleCanvasPoint: DOMPoint | null = null; private _initialLocalToCanvasMatrix: DOMMatrix | null = null; private _initialBorderBoxSize: ISize | null = null; private _initialFixedResizeAnchor: DOMPoint | null = null; constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem, resizeAllSelected: boolean) { super(extensionManager, designerCanvas, extendedItem); this.resizeAllSelected = resizeAllSelected; } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { let transformedCornerPoints = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!transformedCornerPoints) return; if (isNaN(transformedCornerPoints.p1.x) || isNaN(transformedCornerPoints.p1.x)) { this.remove(); return; } if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, transformedCornerPoints.p3.x, transformedCornerPoints.p3.y, transformedCornerPoints.p4.x, transformedCornerPoints.p4.y)) { this._circle1 = this._drawResizerOverlay(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, 'nw-resize', this._circle1); this._circle2 = this._drawResizerOverlay((transformedCornerPoints.p1.x + (transformedCornerPoints.p2.x - transformedCornerPoints.p1.x) / 2), (transformedCornerPoints.p1.y + (transformedCornerPoints.p2.y - transformedCornerPoints.p1.y) / 2), 'n-resize', this._circle2); this._circle3 = this._drawResizerOverlay(transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, 'ne-resize', this._circle3); this._circle4 = this._drawResizerOverlay((transformedCornerPoints.p1.x + (transformedCornerPoints.p4.x - transformedCornerPoints.p1.x) / 2), (transformedCornerPoints.p1.y + (transformedCornerPoints.p4.y - transformedCornerPoints.p1.y) / 2), 'w-resize', this._circle4); this._circle5 = this._drawResizerOverlay(transformedCornerPoints.p4.x, transformedCornerPoints.p4.y, 'sw-resize', this._circle5); this._circle6 = this._drawResizerOverlay((transformedCornerPoints.p4.x + (transformedCornerPoints.p3.x - transformedCornerPoints.p4.x) / 2), (transformedCornerPoints.p4.y + (transformedCornerPoints.p3.y - transformedCornerPoints.p4.y) / 2), 's-resize', this._circle6); this._circle8 = this._drawResizerOverlay((transformedCornerPoints.p2.x + (transformedCornerPoints.p3.x - transformedCornerPoints.p2.x) / 2), (transformedCornerPoints.p2.y + (transformedCornerPoints.p3.y - transformedCornerPoints.p2.y) / 2), 'e-resize', this._circle8); this._circle7 = this._drawResizerOverlay(transformedCornerPoints.p3.x, transformedCornerPoints.p3.y, 'se-resize', this._circle7); } } _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement { let circle = this._drawCircle(x, y, this.designerCanvas.serviceContainer.options.resizerPixelSize / this.designerCanvas.zoomFactor, 'svg-primary-resizer', oldCircle); circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); if (!oldCircle) { circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor)); circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(circle, event, cursor)); circle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(circle, event, cursor)); } circle.style.cursor = cursor; return circle; } _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string) { event.stopPropagation(); const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event); //TODO: calculate new position and size in the extension //aply the values with the position service //don't switch from left positioning to right and so on... switch (event.type) { case EventNames.PointerDown: const cx = parseFloat(circle.getAttribute('cx') ?? '0'); const cy = parseFloat(circle.getAttribute('cy') ?? '0'); this._offsetPoint = { x: cx - currentPoint.x, y: cy - currentPoint.y }; (event.target).setPointerCapture(event.pointerId); this._initialPoint = currentPoint; this._initialHandleCanvasPoint = new DOMPoint(cx, cy); this._initialLocalToCanvasMatrix = getElementLocalToCanvasMatrix(this.extendedItem); this._initialBorderBoxSize = getElementSize(this.extendedItem.element); this._initialFixedResizeAnchor = this._getFixedResizeAnchor(this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas, iframes: this.designerCanvas.iframes })[0], actionMode); this._initialSizes = []; this._actionModeStarted = actionMode; this._initialSizes.push(this._getInitialSize(this.extendedItem.element)); if (this.resizeAllSelected) { for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { this._initialSizes.push(this._getInitialSize(designItem.element)); } } if (this.designerCanvas.alignOnSnap) this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements); this.prepareResize(this.extendedItem, this._actionModeStarted) if (this.resizeAllSelected) { for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { this.prepareResize(designItem, this._actionModeStarted); } } } break; case EventNames.PointerMove: if (this._initialPoint) { if (!this._initialSizes || !this._initialHandleCanvasPoint || !this._initialLocalToCanvasMatrix || !this._initialBorderBoxSize) { return; } const containerStyle = getComputedStyle(this.extendedItem.parent.element); const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent, containerStyle)) const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements); const currentHandleCanvasPoint = new DOMPoint(diff.x + this._offsetPoint.x, diff.y + this._offsetPoint.y); const localHandleDelta = this._getLocalHandleDelta(currentHandleCanvasPoint); if (!localHandleDelta) { return; } let deltaX = localHandleDelta.x; let deltaY = localHandleDelta.y; if (event.shiftKey) { deltaX = deltaX < deltaY ? deltaX : deltaY; deltaY = deltaX; } let i = 0; let width = null; let height = null; switch (this._actionModeStarted) { case 'e-resize': width = (this._initialSizes[i].width + deltaX); (this.extendedItem.element).style.width = roundValue(this.extendedItem, width) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px'; } } } break; case 'se-resize': width = (this._initialSizes[i].width + deltaX); (this.extendedItem.element).style.width = roundValue(this.extendedItem, width) + 'px'; height = (this._initialSizes[i].height + deltaY); (this.extendedItem.element).style.height = roundValue(this.extendedItem, height) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px'; (designItem.element).style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px'; } } } break; case 's-resize': height = (this._initialSizes[i].height + deltaY); (this.extendedItem.element).style.height = roundValue(this.extendedItem, height) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px'; } } } break; case 'sw-resize': width = (this._initialSizes[i].width - deltaX); (this.extendedItem.element).style.width = roundValue(this.extendedItem, width) + 'px'; height = (this._initialSizes[i].height + deltaY); (this.extendedItem.element).style.height = roundValue(this.extendedItem, height) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px'; (designItem.element).style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px'; } } } break; case 'w-resize': width = (this._initialSizes[i].width - deltaX); (this.extendedItem.element).style.width = roundValue(this.extendedItem, width) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px'; } } } break; case 'nw-resize': width = (this._initialSizes[i].width - deltaX); (this.extendedItem.element).style.width = roundValue(this.extendedItem, width) + 'px'; height = (this._initialSizes[i].height - deltaY); (this.extendedItem.element).style.height = roundValue(this.extendedItem, height) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px'; (designItem.element).style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px'; } } } break; case 'n-resize': height = (this._initialSizes[i].height - deltaY); (this.extendedItem.element).style.height = roundValue(this.extendedItem, height) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px'; } } } break; case 'ne-resize': width = (this._initialSizes[i].width + deltaX); (this.extendedItem.element).style.width = roundValue(this.extendedItem, width) + 'px'; height = (this._initialSizes[i].height - deltaY); (this.extendedItem.element).style.height = roundValue(this.extendedItem, height) + 'px'; if (this.resizeAllSelected) { i++; for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { (designItem.element).style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px'; (designItem.element).style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px'; } } } break; } const currentBorderBoxSize = this._getCurrentBorderBoxSize(deltaX, deltaY); if (!currentBorderBoxSize) { return; } this._applyAnchorCorrection(currentBorderBoxSize); const resizedElements = [this.extendedItem, this.extendedItem.parent]; if (this.resizeAllSelected) resizedElements.push(...this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) this.extensionManager.refreshExtensions(resizedElements); this.designerCanvas?.raiseDesignItemsChanged(resizedElements, 'resize', false); } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); if (!this._initialPoint) { return; } let cg = this.extendedItem.openGroup((this.resizeAllSelected && this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1) ? "Resize Elements" : "Resize <" + this.extendedItem.name + ">"); try { const element = this.extendedItem.element; this.extendedItem.setStyle('width', (this.extendedItem.element).style.width); this.extendedItem.setStyle('height', (this.extendedItem.element).style.height); let left = parseFloat(normalizeToAbsolutePosition(element, 'left')); let top = parseFloat(normalizeToAbsolutePosition(element, 'top')); const anchorCorrection = this._getAnchorCorrectionInParent(getElementSize(this.extendedItem.element)); if (anchorCorrection) { left += anchorCorrection.x; top += anchorCorrection.y; element.style.left = roundValue(this.extendedItem, left) + 'px'; element.style.top = roundValue(this.extendedItem, top) + 'px'; } this.extendedItem.setStyle('left', roundValue(this.extendedItem, left) + 'px'); this.extendedItem.setStyle('top', roundValue(this.extendedItem, top) + 'px'); if (this.resizeAllSelected) { for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (designItem !== this.extendedItem) { designItem.setStyle('width', (designItem.element).style.width); designItem.setStyle('height', (designItem.element).style.height); designItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'left'))) + 'px'); designItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'top'))) + 'px'); } } this.designerCanvas?.raiseDesignItemsChanged(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements, 'resize', true); } else { this.designerCanvas?.raiseDesignItemsChanged([this.extendedItem], 'resize', true); } cg.commit(); } catch (err) { cg.abort(); console.error(err) } this._initialSizes = null; this._initialPoint = null; this._initialHandleCanvasPoint = null; this._initialLocalToCanvasMatrix = null; this._initialBorderBoxSize = null; this._initialFixedResizeAnchor = null; break; } } private _getLocalHandleDelta(currentHandleCanvasPoint: DOMPoint): DOMPoint | null { if (!this._initialHandleCanvasPoint || !this._initialLocalToCanvasMatrix) { return null; } const localToCanvasMatrix = new DOMMatrix([ this._initialLocalToCanvasMatrix.a, this._initialLocalToCanvasMatrix.b, this._initialLocalToCanvasMatrix.c, this._initialLocalToCanvasMatrix.d, 0, 0, ]); if (!localToCanvasMatrix.is2D) { return null; } const canvasDelta = new DOMPoint( currentHandleCanvasPoint.x - this._initialHandleCanvasPoint.x, currentHandleCanvasPoint.y - this._initialHandleCanvasPoint.y, ); return localToCanvasMatrix.inverse().transformPoint(canvasDelta); } private _getCurrentBorderBoxSize(deltaX: number, deltaY: number): ISize | null { if (!this._initialBorderBoxSize) { return null; } let width = this._initialBorderBoxSize.width; let height = this._initialBorderBoxSize.height; switch (this._actionModeStarted) { case 'e-resize': case 'se-resize': case 'ne-resize': width += deltaX; break; case 'w-resize': case 'sw-resize': case 'nw-resize': width -= deltaX; break; } switch (this._actionModeStarted) { case 's-resize': case 'se-resize': case 'sw-resize': height += deltaY; break; case 'n-resize': case 'ne-resize': case 'nw-resize': height -= deltaY; break; } return { width, height }; } private _getInitialSize(element: Element): ISize { const size = getElementSize(element); let contentBoxOffset: IPoint = { x: 0, y: 0 }; if (getComputedStyle(element).boxSizing == 'content-box') { contentBoxOffset = getContentBoxContentOffsets(element); } return { width: size.width - contentBoxOffset.x, height: size.height - contentBoxOffset.y }; } private _getFixedResizeAnchor(quad: DOMQuad, mode: string): DOMPoint | null { if (!quad) { return null; } switch (mode) { case 'e-resize': return new DOMPoint((quad.p1.x + quad.p4.x) / 2, (quad.p1.y + quad.p4.y) / 2); case 'se-resize': return new DOMPoint(quad.p1.x, quad.p1.y); case 's-resize': return new DOMPoint((quad.p1.x + quad.p2.x) / 2, (quad.p1.y + quad.p2.y) / 2); case 'sw-resize': return new DOMPoint(quad.p2.x, quad.p2.y); case 'w-resize': return new DOMPoint((quad.p2.x + quad.p3.x) / 2, (quad.p2.y + quad.p3.y) / 2); case 'nw-resize': return new DOMPoint(quad.p3.x, quad.p3.y); case 'n-resize': return new DOMPoint((quad.p4.x + quad.p3.x) / 2, (quad.p4.y + quad.p3.y) / 2); case 'ne-resize': return new DOMPoint(quad.p4.x, quad.p4.y); default: return null; } } private _getFixedResizeAnchorLocal(size: ISize, mode: string): DOMPoint | null { switch (mode) { case 'e-resize': return new DOMPoint(0, size.height / 2); case 'se-resize': return new DOMPoint(0, 0); case 's-resize': return new DOMPoint(size.width / 2, 0); case 'sw-resize': return new DOMPoint(size.width, 0); case 'w-resize': return new DOMPoint(size.width, size.height / 2); case 'nw-resize': return new DOMPoint(size.width, size.height); case 'n-resize': return new DOMPoint(size.width / 2, size.height); case 'ne-resize': return new DOMPoint(0, size.height); default: return null; } } private _getAnchorCorrectionInParent(currentBorderBoxSize: ISize): IPoint | null { if (!this._initialFixedResizeAnchor) { return null; } const currentAnchorLocal = this._getFixedResizeAnchorLocal(currentBorderBoxSize, this._actionModeStarted); if (!currentAnchorLocal) { return null; } const initialAnchorInParent = this.extendedItem.parent.element.convertPointFromNode(this._initialFixedResizeAnchor, this.designerCanvas.canvas, { iframes: this.designerCanvas.iframes }); const currentAnchor = this.designerCanvas.canvas.convertPointFromNode(currentAnchorLocal, this.extendedItem.element, { iframes: this.designerCanvas.iframes }); const currentAnchorInParent = this.extendedItem.parent.element.convertPointFromNode(currentAnchor, this.designerCanvas.canvas, { iframes: this.designerCanvas.iframes }); return { x: initialAnchorInParent.x - currentAnchorInParent.x, y: initialAnchorInParent.y - currentAnchorInParent.y }; } private _applyAnchorCorrection(currentBorderBoxSize: ISize) { const anchorCorrection = this._getAnchorCorrectionInParent(currentBorderBoxSize); if (!anchorCorrection) { return; } const element = this.extendedItem.element; const left = parseFloat(normalizeToAbsolutePosition(element, 'left')) + anchorCorrection.x; const top = parseFloat(normalizeToAbsolutePosition(element, 'top')) + anchorCorrection.y; element.style.left = roundValue(this.extendedItem, left) + 'px'; element.style.top = roundValue(this.extendedItem, top) + 'px'; } private prepareResize(designItem: IDesignItem, mode: string) { let top: string | null = null; let bottom: string | null = null; let left: string | null = null; let right: string | null = null; switch (this._actionModeStarted) { case 'e-resize': left = getComputedStyle(designItem.element).left; (designItem.element).style.removeProperty('right'); (designItem.element).style.left = left; //(designItem.element).style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px'; break; case 'se-resize': top = getComputedStyle(designItem.element).top; (designItem.element).style.removeProperty('bottom'); (designItem.element).style.top = top; left = getComputedStyle(designItem.element).left; (designItem.element).style.removeProperty('right'); (designItem.element).style.left = left; //(designItem.element).style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px'; break; case 's-resize': top = getComputedStyle(designItem.element).top; (designItem.element).style.removeProperty('bottom'); (designItem.element).style.top = top; //(designItem.element).style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px'; break; case 'sw-resize': top = getComputedStyle(designItem.element).top; (designItem.element).style.removeProperty('bottom'); (designItem.element).style.top = top; right = getComputedStyle(designItem.element).right; (designItem.element).style.removeProperty('left'); (designItem.element).style.right = right; //(designItem.element).style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px'; break; case 'w-resize': right = getComputedStyle(designItem.element).right; (designItem.element).style.removeProperty('left'); (designItem.element).style.right = right; //(designItem.element).style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px'; break; case 'nw-resize': bottom = getComputedStyle(designItem.element).bottom; (designItem.element).style.removeProperty('top'); (designItem.element).style.bottom = bottom; right = getComputedStyle(designItem.element).right; (designItem.element).style.removeProperty('left'); (designItem.element).style.right = right; //(designItem.element).style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)'; break; case 'n-resize': bottom = getComputedStyle(designItem.element).bottom; (designItem.element).style.removeProperty('top'); (designItem.element).style.bottom = bottom; //(designItem.element).style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)'; break; case 'ne-resize': bottom = getComputedStyle(designItem.element).bottom; (designItem.element).style.removeProperty('top'); (designItem.element).style.bottom = bottom; left = getComputedStyle(designItem.element).left; (designItem.element).style.removeProperty('right'); (designItem.element).style.left = left; //(designItem.element).style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)'; break; } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/ResizeExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { ResizeExtension } from './ResizeExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { NodeType } from "../../../item/NodeType.js"; export class ResizeExtensionProvider implements IDesignerExtensionProvider { private resizeAllSelected: boolean; constructor(resizeAllSelected: boolean = false) { this.resizeAllSelected = resizeAllSelected; } shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designerCanvas.readOnly) return false; if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) return false; return !designItem.isRootItem && designItem.nodeType == NodeType.Element; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new ResizeExtension(extensionManager, designerCanvas, designItem, this.resizeAllSelected); } static readonly style = css` .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: auto; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/SelectionDefaultExtension.ts ================================================ import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { AbstractExtension } from './AbstractExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; export class SelectionDefaultExtension extends AbstractExtension { private _line1: SVGLineElement; private _line2: SVGLineElement; private _line3: SVGLineElement; private _line4: SVGLineElement; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache); } override refresh(cache: Record, event?: Event) { const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!transformedCornerPoints) return; if (isNaN(transformedCornerPoints.p1.x) || isNaN(transformedCornerPoints.p2.x)) { this.remove(); return; } if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, transformedCornerPoints.p3.x, transformedCornerPoints.p3.y, transformedCornerPoints.p4.x, transformedCornerPoints.p4.y)) { this._line1 = this._drawLine(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, 'svg-selection', this._line1); this._line2 = this._drawLine(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, transformedCornerPoints.p4.x, transformedCornerPoints.p4.y, 'svg-selection', this._line2); this._line3 = this._drawLine(transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, transformedCornerPoints.p3.x, transformedCornerPoints.p3.y, 'svg-selection', this._line3); this._line4 = this._drawLine(transformedCornerPoints.p4.x, transformedCornerPoints.p4.y, transformedCornerPoints.p3.x, transformedCornerPoints.p3.y, 'svg-selection', this._line4); this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString(); } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { IDesignerExtension } from './IDesignerExtension.js'; import { SelectionDefaultExtension } from './SelectionDefaultExtension.js'; import { IExtensionManager } from './IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { NodeType } from '../../../item/NodeType.js'; export class SelectionDefaultExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return !designItem.isRootItem && designItem.nodeType != NodeType.Comment && !(designItem.element instanceof HTMLTemplateElement); } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new SelectionDefaultExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/block/BlockToolbarExtension.ts ================================================ import { html } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js"; import { IExtensionManager } from "../IExtensionManger.js"; export class BlockToolbarExtension extends BasicStackedToolbarExtension { protected static template = html`
${BasicStackedToolbarExtension.basicTemplate}
`; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event: MouseEvent) { super.extend(cache, event); this.refresh(cache, event); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { BlockToolbarExtension } from './BlockToolbarExtension.js'; import { NodeType } from '../../../../item/NodeType.js'; import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js'; export class BlockToolbarExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType === NodeType.Element) { const d = getComputedStyle(designItem.element).display; if (d === 'block' || d === 'inline'|| d === 'inline-block') return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false; } return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new BlockToolbarExtension(extensionManager, designerView, designItem); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.ts ================================================ import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js"; import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem.js"; import { DesignerView } from "../../designerView.js"; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js"; export class AbstractDesignViewConfigButton implements IDesignViewConfigButtonsProvider { protected settingName; private content: string | HTMLElement; private tooltp: string; private contextmenu: IContextMenuItem[]; constructor(settingName: string, content: string | HTMLElement, tooltip: string, contextmenu?: IContextMenuItem[]) { this.settingName = settingName; this.content = content; this.tooltp = tooltip; this.contextmenu = contextmenu; } provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] { const btn = document.createElement('div'); if (typeof this.content == 'string') btn.innerHTML = this.content; else btn.appendChild(this.content); btn.title = this.tooltp; btn.className = 'toolbar-control'; designerCanvas.instanceServiceContainer.designContext.extensionOptionsChanged.on(() => { if (extensionOptions[this.settingName] !== false) btn.classList.add('selected'); else btn.classList.remove('selected'); }) const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions; if (extensionOptions[this.settingName] !== false) btn.classList.add('selected'); btn.onclick = () => { const val = extensionOptions[this.settingName] extensionOptions[this.settingName] = val === false ? true : false; if (extensionOptions[this.settingName] !== false) btn.classList.add('selected'); else btn.classList.remove('selected'); } btn.oncontextmenu = (e) => { e.preventDefault(); if (this.contextmenu) { ContextMenu.show(this.contextmenu, e); } } return [btn]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.ts ================================================ import { DesignerView } from "../../designerView.js"; import { IDesignerCanvas } from "../../IDesignerCanvas.js"; import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js"; export class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider { _space: number constructor(space: number) { this._space = space; } provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] { const div = document.createElement('div'); div.style.width = this._space + 'px'; div.oncontextmenu = (e) => { e.preventDefault(); }; return [div]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.ts ================================================ import { flexboxExtensionShowOverlayOptionName } from "../flex/FlexboxExtensionProvider.js"; import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; export class FlexboxExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton { constructor() { super(flexboxExtensionShowOverlayOptionName, "F", "show flexbox overlay") } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.ts ================================================ import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js"; import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton { constructor() { super(gridExtensionShowOverlayOptionName, "G", "show grid overlay") } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.ts ================================================ import { DesignerView } from "../../designerView.js"; import { IDesignerCanvas } from "../../IDesignerCanvas.js"; export interface IDesignViewConfigButtonsProvider { provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.ts ================================================ import { invisibleElementExtensionShowOverlayOptionName } from "../InvisibleElementExtensionProvider.js"; import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; export class InvisibleElementExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton { constructor() { super(invisibleElementExtensionShowOverlayOptionName, "I", "show invisible div overlay") } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/OptionsContextMenuButton.ts ================================================ import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js"; import { DesignerView } from "../../designerView.js"; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js"; export class OptionsContextMenuButton implements IDesignViewConfigButtonsProvider { constructor() { } provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] { const btn = document.createElement('div'); btn.innerHTML = 'O'; btn.title = 'options'; btn.className = 'toolbar-control'; btn.onclick = (e) => { this.showCtxMenu(e, designerCanvas); } btn.oncontextmenu = (e) => { e.preventDefault(); this.showCtxMenu(e, designerCanvas); } return [btn]; } protected prepareContextMenu(event: MouseEvent, designerCanvas: IDesignerCanvas) { const ctxMenu = [ { title: 'simulate hover on hover', checked: designerCanvas.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover, action: () => { designerCanvas.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover = !designerCanvas.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover; } }, { title: 'select unhitable elements', checked: designerCanvas.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements, action: () => { designerCanvas.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements = !designerCanvas.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements; } }, { title: 'pause animations', checked: designerCanvas.pauseAnimations, action: () => { designerCanvas.pauseAnimations = !designerCanvas.pauseAnimations; } }, { title: 'hide overflowing content', checked: designerCanvas.instanceServiceContainer.designContext.extensionOptions.hideOverflowingContent, action: () => { designerCanvas.instanceServiceContainer.designContext.extensionOptions.hideOverflowingContent = !designerCanvas.instanceServiceContainer.designContext.extensionOptions.hideOverflowingContent; if (designerCanvas.instanceServiceContainer.designContext.extensionOptions.hideOverflowingContent) { for (let c of designerCanvas.rootDesignItem.children(true)) { if (c.element instanceof HTMLElement) { c.element.style.overflow = 'hidden'; c.element.style.whiteSpace = 'nowrap'; } } } else { for (let c of designerCanvas.rootDesignItem.children(true)) { if (c.element instanceof HTMLElement) { c.element.style.overflow = c.hasStyle('overflow') ? c.getStyle('overflow') : ''; c.element.style.whiteSpace = c.hasStyle('white-space') ? c.getStyle('white-space') : ''; } } } } }, ] return ctxMenu; } showCtxMenu(event: MouseEvent, designerCanvas: IDesignerCanvas) { ContextMenu.show(this.prepareContextMenu(event, designerCanvas), event); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.ts ================================================ import { DesignerView } from "../../designerView.js"; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js"; export class RoundPixelsDesignViewConfigButton implements IDesignViewConfigButtonsProvider { constructor() { } provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[] { const btn = document.createElement('div'); btn.className = 'toolbar-control'; btn.title = 'round pixels to'; const ip = document.createElement('input'); ip.type = 'number'; ip.step = '1'; ip.min = '-1'; ip.valueAsNumber = designerView.serviceContainer.options.roundPixelsToDecimalPlaces; ip.onchange = () => designerView.serviceContainer.options.roundPixelsToDecimalPlaces = ip.valueAsNumber; btn.appendChild(ip); return [btn]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.ts ================================================ import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; export const enableStylesheetService = 'enableStylesheetService'; export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton { constructor() { super(enableStylesheetService, "ss", "modify Stylesheet") } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.ts ================================================ import { basicStackedToolbarExtensionOverlayOptionName } from "../BasicStackedToolbarExtension.js"; import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js"; export class ToolbarExtensionsDesignViewConfigButtons extends AbstractDesignViewConfigButton { constructor() { super(basicStackedToolbarExtensionOverlayOptionName, "T", "show Toolbars") } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.ts ================================================ import { CommandType } from '../../../../../commandHandling/CommandType.js'; import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { NodeType } from '../../../../item/NodeType.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; import { assetsPath } from '../../../../../Constants.js'; export class AlignItemsContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { if (designerCanvas.readOnly) return false; if (designItem?.instanceServiceContainer.selectionService.selectedElements.length > 1) { return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element; } return false; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: 'align left', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.arrangeLeft }); } }, { title: 'align center', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.arrangeCenter }); } }, { title: 'align right', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.arrangeRight }); } }, { title: 'distribute horizontal', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.distributeHorizontal }); } }, { title: 'align top', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.arrangeTop }); } }, { title: 'align middle', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.arrangeMiddle }); } }, { title: 'align bottom', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.arrangeBottom }); } }, { title: 'distribute vertical', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.distributeVertical }); } }, ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/BasicContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; type BasicContextMenuItem = Omit & { action?: (event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) => void }; export class BasicContextMenu implements IContextMenuExtension { private _item: BasicContextMenuItem; private _shouldProvide: (event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) => boolean; constructor(item: BasicContextMenuItem, shouldProvide?: (event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) => boolean) { this._item = item; this._shouldProvide = shouldProvide || (() => true); } public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return this._shouldProvide(event, designerCanvas, designItem, initiator); } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): IContextMenuItem[] { return [{ ...this._item, action: (e) => this._item.action?.(e, designerCanvas, designItem, initiator)}]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; import { SeperatorContextMenu } from './SeperatorContextMenu.js'; export class ChildContextMenu implements IContextMenuExtension { private _title: string; private _contextMenus: IContextMenuExtension[]; constructor(title: string, ...contextMenus: IContextMenuExtension[]) { this._title = title; this._contextMenus = contextMenus; } public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return this._contextMenus.some(x => !(x instanceof SeperatorContextMenu) && x.shouldProvideContextmenu(event, designerView, designItem, initiator)); } public provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): IContextMenuItem[] { return [{ title: this._title, children: this._contextMenus.map(x => x.shouldProvideContextmenu(event, designerView, designItem, initiator) ? x.provideContextMenuItems(event, designerView, designItem, initiator) : []).flat() }]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/ChildrenContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { DesignItem } from '../../../../item/DesignItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class ChildrenContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return initiator == 'designer'; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { if (designItem) { const lstItems = [...designItem.element.children]; if (lstItems.length > 0) { return [{ title: 'children', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (#' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }]; } } return []; } private _select(designerView: IDesignerCanvas, element: Element) { const item = DesignItem.GetOrCreateDesignItem(element, element, designerView.serviceContainer, designerView.instanceServiceContainer); designerView.instanceServiceContainer.selectionService.setSelectedElements([item]); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.ts ================================================ import { CommandType } from '../../../../../commandHandling/CommandType.js'; import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; import { assetsPath } from '../../../../../Constants.js'; export class CopyPasteContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return true; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { if (designerCanvas.readOnly) return [ { title: 'copy', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C', disabled: designItem === null } ] return [ { title: 'copy', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C', disabled: designItem === null }, { title: 'cut', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X', disabled: designItem === null }, { title: 'paste', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' }, { title: 'delete', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del', disabled: designItem === null }, ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/ForceCssContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { NodeType } from '../../../../item/NodeType.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class ForceCssContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return designItem != null && designItem.nodeType == NodeType.Element; } public provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: ':hover', action: () => { designItem.cssForceHover = !designItem.cssForceHover }, checked: designItem.cssForceHover }, { title: ':active', action: () => { designItem.cssForceActive = !designItem.cssForceActive }, checked: designItem.cssForceActive }, { title: ':visited', action: () => { designItem.cssForceVisited = !designItem.cssForceVisited }, checked: designItem.cssForceVisited }, { title: ':focus', action: () => { designItem.cssForceFocus = !designItem.cssForceFocus }, checked: designItem.cssForceFocus }, { title: ':focus-within', action: () => { designItem.cssForceFocusWithin = !designItem.cssForceFocusWithin }, checked: designItem.cssForceFocusWithin }, { title: ':focus-visible', action: () => { designItem.cssForceFocusVisible = !designItem.cssForceFocusVisible }, checked: designItem.cssForceFocusVisible }, ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; export type ContextmenuInitiator = 'designer' | 'treeView' | 'other'; export interface IContextMenuExtension { shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator); provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator, provider?: any): IContextMenuItem[]; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { DesignItem } from '../../../../item/DesignItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class ItemsBelowContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return initiator == 'designer'; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { const lstItems = designerCanvas.elementsFromPoint(event.x, event.y); if (lstItems.length > 0) { return [{ title: 'items below', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (#' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }]; } return []; } private _select(designerView: IDesignerCanvas, element: Element) { const item = DesignItem.GetOrCreateDesignItem(element, element, designerView.serviceContainer, designerView.instanceServiceContainer); designerView.instanceServiceContainer.selectionService.setSelectedElements([item]); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.ts ================================================ import { assetsPath } from '../../../../../Constants.js'; import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class JumpToElementContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return designItem !== null; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: 'jump to', icon: ``, action: () => { const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element); designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, designerCanvas.zoomFactor); } }, ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { switchContainer } from '../../../../helper/SwitchContainerHelper.js'; import { DesignItem } from '../../../../item/DesignItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class MultipleItemsSelectedContextMenu implements IContextMenuExtension { public orderIndex: number = 60; public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { if (designItem?.instanceServiceContainer.selectionService.selectedElements.length > 1) { return true; } return false; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: 'wrap in', children: [ { title: 'div', action: () => { const grp = designItem.openGroup("wrap in Div"); let elements = designItem.instanceServiceContainer.selectionService.selectedElements; let newContainer = document.createElement('div'); const newContainerDesignItem = DesignItem.createDesignItemFromInstance(newContainer, designItem.serviceContainer, designItem.instanceServiceContainer); elements[0].insertAdjacentElement(newContainerDesignItem, 'beforebegin'); switchContainer(elements, newContainerDesignItem, true, 10); grp.commit(); designItem.instanceServiceContainer.selectionService.setSelectedElements([newContainerDesignItem]); } } ] } ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/PasteFormatContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { NodeType } from '../../../../item/NodeType.js'; import { createPasteFormatSnapshotFromEntries, getPasteFormatEntries, PasteFormatKind } from '../../../../services/copyPasteService/PasteFormatSnapshot.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class PasteFormatContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return !designerCanvas.readOnly && this._getTargetDesignItems(designerCanvas).length > 0; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [{ title: 'paste format', children: [ this._createPasteFormatItem(designerCanvas, 'all'), { title: '-' }, this._createPasteFormatItem(designerCanvas, 'border'), this._createPasteFormatItem(designerCanvas, 'background'), this._createPasteFormatItem(designerCanvas, 'transform'), this._createPasteFormatItem(designerCanvas, 'text') ] }]; } private _createPasteFormatItem(designerCanvas: IDesignerCanvas, kind: PasteFormatKind): IContextMenuItem { return { title: kind, action: () => { void this._pasteFormat(designerCanvas, kind); } }; } private _getTargetDesignItems(designerCanvas: IDesignerCanvas): IDesignItem[] { return designerCanvas.instanceServiceContainer.selectionService.selectedElements?.filter(x => x?.nodeType === NodeType.Element && !x.isRootItem) ?? []; } private async _pasteFormat(designerCanvas: IDesignerCanvas, kind: PasteFormatKind): Promise { const [pasteDesignItems] = await designerCanvas.serviceContainer.copyPasteService.getPasteItems(designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); const pasteSource = pasteDesignItems?.find(x => x?.nodeType === NodeType.Element && x.hasStyles && !x.isRootItem); const snapshot = pasteSource ? createPasteFormatSnapshotFromEntries(pasteSource.styles()) : null; if (!snapshot) { return; } const entries = getPasteFormatEntries(snapshot, kind); const targets = this._getTargetDesignItems(designerCanvas); if (!entries.length || !targets.length) { return; } const group = targets[0].openGroup(`paste format: ${kind}`); let changed = false; for (const target of targets) { for (const entry of entries) { if (target.getStyle(entry.name) === entry.value) { continue; } target.setStyle(entry.name, entry.value); changed = true; } } if (changed) { group.commit(); } else { group.abort(); } } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/PathContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { createPathD } from '../../../../helper/PathDataPolyfill.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class PathContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { if (designItem?.element instanceof SVGPathElement) return true; return false; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { const pathdata = (designItem.node).getPathData({ normalize: true }); const items: IContextMenuItem[] = []; const lastType = pathdata[pathdata.length - 1].type; items.push({ title: '-' }); if (lastType == 'z' || lastType == 'Z') { items.push({ title: 'open path ', action: () => { pathdata.splice(pathdata.length - 1, 1); designItem.setAttribute('d', createPathD(pathdata)); } }); } else { items.push({ title: 'close path ', action: () => { pathdata.push({ type: 'Z' }); designItem.setAttribute('d', createPathD(pathdata)); } }); } return items; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { DesignItem } from '../../../../item/DesignItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { InsertAction } from '../../../../services/undoService/transactionItems/InsertAction.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class RectContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { if (designItem?.element instanceof SVGRectElement) return true; return false; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: 'convert to path', action: () => { let rect = designItem.element; let pathD: string = ""; pathD += "M" + rect.x.baseVal.value + " " + rect.y.baseVal.value + "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + rect.y.baseVal.value + "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + (rect.y.baseVal.value + rect.height.baseVal.value) + "L" + rect.x.baseVal.value + " " + (rect.y.baseVal.value + rect.height.baseVal.value) + "Z"; const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", pathD); path.setAttribute("stroke", rect.getAttribute("stroke")); path.setAttribute("fill", rect.getAttribute("fill")); path.setAttribute("stroke-width", rect.getAttribute("stroke-width")); const di = DesignItem.createDesignItemFromInstance(path, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designItem.parent, designItem.childCount, di)); designerCanvas.serviceContainer.deletionService.removeItems([designItem]); } } ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.ts ================================================ import { CommandType } from '../../../../../commandHandling/CommandType.js'; import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { NodeType } from '../../../../item/NodeType.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; import { assetsPath } from '../../../../../Constants.js'; export class RotateLeftAndRight implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { if (designerCanvas.readOnly) return false; return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: 'rotate right', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' }, { title: 'rotate left', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' } ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { NodeType } from "../../../../item/NodeType.js"; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class SelectAllChildrenContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return designItem?.hasChildren; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [{ title: 'select all Children', action: () => { designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()).filter(x => x.nodeType == NodeType.Element)); } }]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; export class SeperatorContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return true; } public provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: '-' } ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/ToolWindowsContextMenu.ts ================================================ import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; import { DraggableToolWindow } from '../../tools/toolBar/popups/DraggableToolWindow.js'; import { TransformToolPopup } from '../../tools/toolBar/popups/TransformToolPopup.js'; import { BoxShadowEditorWindow } from '../../tools/toolBar/popups/BoxShadowEditorWindow.js'; import { TextShadowEditorWindow } from '../../tools/toolBar/popups/TextShadowEditorWindow.js'; import { GradientEditorWindow } from '../../tools/toolBar/popups/GradientEditorWindow.js'; import { BorderRadiusEditorWindow } from '../../tools/toolBar/popups/BorderRadiusEditorWindow.js'; export class ToolWindowsContextMenu implements IContextMenuExtension { shouldProvideContextmenu(_event: MouseEvent, _designerCanvas: IDesignerCanvas, _designItem: IDesignItem, _initiator: ContextmenuInitiator): boolean { return true; } provideContextMenuItems(_event: MouseEvent, designerCanvas: IDesignerCanvas, _designItem: IDesignItem, _initiator: ContextmenuInitiator): IContextMenuItem[] { return [{ title: 'tool windows', children: [ { title: 'transform', action: () => { const win = new TransformToolPopup(designerCanvas); DraggableToolWindow.showWindow(win); } }, { title: 'box shadow editor', action: () => { const win = new BoxShadowEditorWindow(designerCanvas); DraggableToolWindow.showWindow(win); } }, { title: 'text shadow editor', action: () => { const win = new TextShadowEditorWindow(designerCanvas); DraggableToolWindow.showWindow(win); } }, { title: 'gradient editor', action: () => { const win = new GradientEditorWindow(designerCanvas); DraggableToolWindow.showWindow(win); } }, { title: 'border radius editor', action: () => { const win = new BorderRadiusEditorWindow(designerCanvas); DraggableToolWindow.showWindow(win); } }, ] }]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.ts ================================================ import { CommandType } from '../../../../../commandHandling/CommandType.js'; import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { NodeType } from '../../../../item/NodeType.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; import { assetsPath } from '../../../../../Constants.js'; export class ZMoveContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { if (designerCanvas.readOnly) return false; return !designItem?.isRootItem && designItem?.nodeType == NodeType.Element; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: 'to front', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.moveToFront }); } }, { title: 'move forward', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.moveForward }); } }, { title: 'move backward', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.moveBackward }); } }, { title: 'to back', icon: ``, action: () => { designerCanvas.executeCommand({ type: CommandType.moveToBack }); } }, ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.ts ================================================ import { assetsPath } from "../../../../../Constants.js"; import { IRect } from "../../../../../interfaces/IRect.js"; import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js'; const offset = 10; export class ZoomToElementContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return designItem !== null; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { return [ { title: 'zoom to', icon: ``, action: () => { const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element); const startPoint = { x: coord.x - offset, y: coord.y - offset }; const endPoint = { x: coord.x + coord.width + offset, y: coord.y + coord.height + offset }; let rect: IRect = { x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x, y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y, width: Math.abs(startPoint.x - endPoint.x), height: Math.abs(startPoint.y - endPoint.y), } let zFactorWidth = designerCanvas.outerRect.width / rect.width; let zFactorHeight = designerCanvas.outerRect.height / rect.height; let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth; designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, zoomFactor); } }, ] } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.ts ================================================ import { html } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { assetsPath } from "../../../../../Constants.js"; import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js"; import { ImageButtonListSelector } from "../../../../controls/ImageButtonListSelector.js"; export class FlexToolbarExtension extends BasicStackedToolbarExtension { protected static template = html`
${BasicStackedToolbarExtension.basicTemplate}
`; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); this._size.width = 625; } override extend(cache: Record, event: MouseEvent) { super.extend(cache, event); this._addFlexDirectionButton(); this._addStyleButton('flex-wrap'); this._addStyleButton('align-content'); this._addStyleButton('justify-content'); this._addStyleButton('align-items'); this.refresh(cache, event); } protected _addFlexDirectionButton() { const cs = getComputedStyle(this.extendedItem.element); const ctl = this._toolbar.getById('flex-direction') ctl.addEventListener('value-changed', async () => { await this.extendedItem.updateStyleInSheetOrLocalAsync('flex-direction', ctl.value); this.rotateImagesAcordingFlexDirection(ctl.value); }); ctl.value = cs['flex-direction']; this.rotateImagesAcordingFlexDirection(ctl.value); } rotateImagesAcordingFlexDirection(direction: string) { let angle = 0 if (direction == 'column' || direction == 'column-reverse') angle = -90; this._toolbar.getById('flex-wrap').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg'); this._toolbar.getById('align-content').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg'); this._toolbar.getById('justify-content').querySelectorAll('img').forEach(x => x.style.rotate = angle + 'deg'); //@ts-ignore this._toolbar.getById('align-items').querySelectorAll('img:nth-child(-n+4)').forEach(x => x.style.rotate = angle + 'deg'); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { FlexToolbarExtension } from './FlexToolbarExtension.js'; import { NodeType } from '../../../../item/NodeType.js'; import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js'; export class FlexToolbarExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType === NodeType.Element) { const d = getComputedStyle(designItem.element).display; if (d === 'flex' || d === 'inline-flex') return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false; } return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new FlexToolbarExtension(extensionManager, designerView, designItem); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/flex/FlexboxExtension.ts ================================================ import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { OverlayLayer } from '../OverlayLayer.js'; export class FlexboxExtension extends AbstractExtension { private _path: SVGPathElement; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend() { const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; this._path = this._drawTransformedRect(transformedCornerPoints, 'svg-flexbox', this._path, OverlayLayer.Background); } override refresh() { this._removeAllOverlays(); this.extend(); } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/flex/FlexboxExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { FlexboxExtension } from './FlexboxExtension.js'; import { NodeType } from '../../../../item/NodeType.js'; export const flexboxExtensionShowOverlayOptionName = 'flexboxExtensionShowOverlay'; export class FlexboxExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType != NodeType.Element) return false; const display = getComputedStyle((designItem.element)).display; if (display == 'flex' || display == 'inline-flex') return designerCanvas.instanceServiceContainer.designContext.extensionOptions[flexboxExtensionShowOverlayOptionName] !== false; return false; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new FlexboxExtension(extensionManager, designerCanvas, designItem); } readonly style = css` .svg-flexbox { stroke: orange; fill: #9a47ff22; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/DisplayGridExtension.ts ================================================ import { calculateGridInformation, getElementLocalToCanvasMatrix, getGridCellFromPoint } from "../../../../helper/GridHelper.js"; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { OverlayLayer } from "../OverlayLayer.js"; export class DisplayGridExtension extends AbstractExtension { private _cells: SVGRectElement[][]; private _texts: SVGTextElement[][]; private _gaps: SVGRectElement[]; private _group: SVGGElement; private gridInformation: ReturnType private gridInformationString: string; private _lastEvent: Event; private gridColor: string; private gridFillColor: string; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, gridColor: string, gridFillColor: string) { super(extensionManager, designerView, extendedItem); this.gridColor = gridColor; this.gridFillColor = gridFillColor; } override extend(cache: Record, event?: Event) { this._initSVGArrays(); this.refresh(event); } override refresh(cache: Record, event?: Event) { this.gridInformation = calculateGridInformation(this.extendedItem); const gridInformationString = JSON.stringify(this.gridInformation); if (gridInformationString !== this.gridInformationString || (event != null && this._lastEvent !== event)) { if (event) this._lastEvent = event; this.gridInformationString = gridInformationString; let cells = this.gridInformation.cells; const hoveredCell = this._lastEvent && this._lastEvent instanceof MouseEvent ? getGridCellFromPoint(this.extendedItem, this.designerCanvas.getNormalizedEventCoordinates(this._lastEvent), this.gridInformation) : null; if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) { if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length) this._initSVGArrays(); if (!this._group) { this._group = this._drawGroup(null, this._group, OverlayLayer.Background); this._group.style.transformOrigin = '0 0'; this._group.style.setProperty("--svg-grid-stroke-color", this.gridColor) this._group.style.setProperty("--svg-grid-fill-color", this.gridFillColor) } this._group.style.transform = getElementLocalToCanvasMatrix(this.extendedItem).toString(); //draw gaps this.gridInformation.gaps.forEach((gap, i) => { this._gaps[i] = this._drawRect(gap.localX, gap.localY, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Background); this._group.appendChild(this._gaps[i]); }); //draw cells cells.forEach((row, i) => { row.forEach((cell, j) => { this._cells[i][j] = this._drawRect(cell.localX, cell.localY, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background); this._group.appendChild(this._cells[i][j]); if (cell.name) { this._texts[i][j] = this._drawText(cell.name, cell.localX, cell.localY, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background); this._texts[i][j].setAttribute("dominant-baseline", "hanging"); } if (hoveredCell?.row === i && hoveredCell?.column === j) { this._cells[i][j].setAttribute("class", "svg-grid-current-cell"); } }) }); } } } override dispose() { this._removeAllOverlays(); } _initSVGArrays() { this._removeAllOverlays(); this._group = null; this.gridInformation = calculateGridInformation(this.extendedItem); this._cells = new Array(this.gridInformation.cells.length); this.gridInformation.cells.forEach((row, i) => this._cells[i] = new Array(row.length)); this._texts = new Array(this.gridInformation.cells.length); this.gridInformation.cells.forEach((row, i) => this._texts[i] = new Array(row.length)); this._gaps = new Array(this.gridInformation.gaps.length); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { DisplayGridExtension } from './DisplayGridExtension.js'; import { svgAsString } from '../../../../helper/SvgHelper.js'; import { NodeType } from '../../../../item/NodeType.js'; export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay'; export class DisplayGridExtensionProvider implements IDesignerExtensionProvider { gridColor: string; gridFillColor: string; constructor(gridColor: string = 'orange', gridFillColor = '#ff944722') { this.gridColor = gridColor; this.gridFillColor = gridFillColor; } shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType != NodeType.Element) return false; const display = getComputedStyle((designItem.element)).display; if (display == 'grid' || display == 'inline-grid') return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false; return false; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new DisplayGridExtension(extensionManager, designerCanvas, designItem, this.gridColor, this.gridFillColor); } static readonly style = css` .svg-grid { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: var(--svg-grid-fill-color); } .svg-grid-current-cell { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #e3ff4722; } .svg-grid-area { font-size: 8px; } .svg-grid-gap { stroke: transparent; fill: var(--svg-grid-stroke-color); opacity: 0.3; mask: url(#mask-stripe-grid) } .svg-grid-header { fill: var(--svg-grid-fill-color); stroke: var(--svg-grid-stroke-color); } .svg-grid-plus-sign { stroke: black; } `; static readonly svgDefs = svgAsString` `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.ts ================================================ import { EventNames } from "../../../../../enums/EventNames.js"; import { convertCssUnit, convertCssUnitToPixel, getCssUnit, getExpandedCssGridColumnSizes } from "../../../../helper/CssUnitConverter.js"; import { getBoundingClientRectAlsoForDisplayContents } from "../../../../helper/ElementHelper.js"; import { calculateGridInformation, getElementLocalToCanvasMatrix, getGridLocalPoint } from "../../../../helper/GridHelper.js"; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { OverlayLayer } from "../OverlayLayer.js"; export class EditGridColumnRowSizesExtension extends AbstractExtension { gridInformation: ReturnType; private _resizers: SVGRectElement[] = []; private _initalPos: number; private _initialSizes: string; private _group: SVGGElement; private _hasChanged: boolean; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this._group = this._drawGroup(null, this._group, OverlayLayer.Background); this._group.style.transformOrigin = '0 0'; this.refresh(event); } override refresh(cache: Record, event?: Event) { this.gridInformation = calculateGridInformation(this.extendedItem); this._group.style.transform = getElementLocalToCanvasMatrix(this.extendedItem).toString(); this.gridInformation.gaps.forEach((gap, i) => { if (gap.width < 3) { gap.width = 3; gap.x--; gap.localX--; } if (gap.height < 3) { gap.height = 3; gap.y--; gap.localY--; } let rect = this._drawRect(gap.localX, gap.localY, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal); if (!this._resizers[i]) { this._resizers[i] = rect; rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap)); rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap)); rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap)); this._group.appendChild(rect); } }); } private _pointerActionTypeResize(event: PointerEvent, rect: SVGRectElement, gap: ReturnType['gaps'][0]) { event.stopPropagation(); const templatePropertyName = gap.type == 'h' ? 'gridTemplateRows' : 'gridTemplateColumns'; const index = (gap.type == 'h' ? gap.row : gap.column) - 1; const sizeType = gap.type == 'h' ? 'height' : 'width'; const pos = this._getAxisLocalPosition(event, gap.type); switch (event.type) { case EventNames.PointerDown: rect.setPointerCapture(event.pointerId); this._initalPos = pos; this._initialSizes = getComputedStyle(this.extendedItem.element)[templatePropertyName]; break; case EventNames.PointerMove: if (this._initialSizes) { const diff = pos - this._initalPos; if (Math.abs(diff) > 5 || this._hasChanged) { this._hasChanged = true; let parts = this._initialSizes.split(' '); parts[index] = (parseFloat(parts[index]) + diff) + 'px'; parts[index + 1] = (parseFloat(parts[index + 1]) - diff) + 'px'; (this.extendedItem.element).style[templatePropertyName] = parts.join(' '); this.extensionManager.refreshExtensions([this.extendedItem], null, event); } } break; case EventNames.PointerUp: rect.releasePointerCapture(event.pointerId); const diff = pos - this._initalPos; if (this._hasChanged) { this._hasChanged = false; const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName); const initialParts = this._initialSizes.split(' '); let units = getExpandedCssGridColumnSizes(realStyle); if (units.length != initialParts.length) { units = initialParts.map(x => getCssUnit(x)); } (this.extendedItem.element).style[templatePropertyName] = ''; const targetPixelSizes = initialParts.map(x => parseFloat(x)); targetPixelSizes[index] += diff; targetPixelSizes[index + 1] -= diff; const newSizes = this._convertCssUnits(targetPixelSizes, units, this.extendedItem.element, sizeType); this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, newSizes.join(' '), null, true); } this._initalPos = null; this._initialSizes = null; this.extensionManager.refreshExtensions([this.extendedItem]); break; } } private _getAxisLocalPosition(event: PointerEvent, gapType: 'h' | 'v'): number { const localPoint = getGridLocalPoint(this.extendedItem, this.designerCanvas.getNormalizedEventCoordinates(event)); return gapType == 'h' ? localPoint.y : localPoint.x; } private _convertCssUnits(pixelSizes: number[], targetUnits: string[], target: HTMLElement, percentTarget: 'width' | 'height'): string[] { let cp = getComputedStyle(target); let bounding = getBoundingClientRectAlsoForDisplayContents(target); let containerSize = bounding[percentTarget]; let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1; let gapValue = percentTarget == "width" ? cp.columnGap : cp.rowGap; if (gapValue == "normal") gapValue = '0px'; let gapSize = convertCssUnitToPixel(gapValue, target, percentTarget) ?? 0; let containerSizeWithoutGaps = containerSize - gapSize * amountGaps; let sizeForFrs = containerSizeWithoutGaps; for (let i = 0; i < pixelSizes.length; i++) { if (targetUnits[i] != 'fr') sizeForFrs -= pixelSizes[i]; } let result: string[] = []; for (let i = 0; i < pixelSizes.length; i++) { if (targetUnits[i] != 'fr') { result.push(convertCssUnit(pixelSizes[i], target, percentTarget, targetUnits[i])); } else { result.push(((pixelSizes[i] / sizeForFrs) * 10).toFixed(2) + 'fr'); } } return result; } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { EditGridColumnRowSizesExtension } from './EditGridColumnRowSizesExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { gridExtensionShowOverlayOptionName } from './DisplayGridExtensionProvider.js'; export class EditGridColumnRowSizesExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { const display = getComputedStyle((designItem.element)).display; if (display == 'grid' || display == 'inline-grid') return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false; return false; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new EditGridColumnRowSizesExtension(extensionManager, designerCanvas, designItem); } static readonly style = css` .svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: auto; } .svg-grid-resizer-v:hover { fill: #ff7f5052; } .svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: auto; } .svg-grid-resizer-h:hover { fill: #ff7f5052; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/GridChildResizeExtension.ts ================================================ import { EventNames } from "../../../../../enums/EventNames.js"; import { IPoint } from "../../../../../interfaces/IPoint.js"; import { calculateGridInformation, getGridColumnIndexFromLocalX, getGridColumnStartLineFromLocalX, getGridLocalPoint, getGridRowIndexFromLocalY, getGridRowStartLineFromLocalY } from "../../../../helper/GridHelper.js"; import { IDesignItem } from "../../../../item/IDesignItem.js"; import { IDesignerCanvas } from "../../IDesignerCanvas.js"; import { AbstractExtension } from "../AbstractExtension.js"; import { IExtensionManager } from "../IExtensionManger.js"; export class GridChildResizeExtension extends AbstractExtension { private _actionModeStarted: string; private _initialPoint: IPoint; private _circle1: SVGCircleElement; private _circle2: SVGCircleElement; private _circle3: SVGCircleElement; private _circle4: SVGCircleElement; private _circle5: SVGCircleElement; private _circle6: SVGCircleElement; private _circle7: SVGCircleElement; private _circle8: SVGCircleElement; private _initialComputedTransformOrigins: DOMPoint[]; private _initialTransformOrigins: string[]; private _styleBackup: string; constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerCanvas, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { //#region Resizer circles let transformedCornerPoints = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (isNaN(transformedCornerPoints.p1.x) || isNaN(transformedCornerPoints.p2.x)) { this.remove(); return; } if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, transformedCornerPoints.p4.x, transformedCornerPoints.p4.y, transformedCornerPoints.p3.x, transformedCornerPoints.p3.y)) { this._circle1 = this._drawResizerOverlay(transformedCornerPoints.p1.x, transformedCornerPoints.p1.y, 'nw-resize', this._circle1); this._circle2 = this._drawResizerOverlay((transformedCornerPoints.p1.x + (transformedCornerPoints.p2.x - transformedCornerPoints.p1.x) / 2), (transformedCornerPoints.p1.y + (transformedCornerPoints.p2.y - transformedCornerPoints.p1.y) / 2), 'n-resize', this._circle2); this._circle3 = this._drawResizerOverlay(transformedCornerPoints.p2.x, transformedCornerPoints.p2.y, 'ne-resize', this._circle3); this._circle4 = this._drawResizerOverlay((transformedCornerPoints.p1.x + (transformedCornerPoints.p4.x - transformedCornerPoints.p1.x) / 2), (transformedCornerPoints.p1.y + (transformedCornerPoints.p4.y - transformedCornerPoints.p1.y) / 2), 'w-resize', this._circle4); this._circle5 = this._drawResizerOverlay(transformedCornerPoints.p4.x, transformedCornerPoints.p4.y, 'sw-resize', this._circle5); this._circle6 = this._drawResizerOverlay((transformedCornerPoints.p4.x + (transformedCornerPoints.p3.x - transformedCornerPoints.p4.x) / 2), (transformedCornerPoints.p4.y + (transformedCornerPoints.p3.y - transformedCornerPoints.p4.y) / 2), 's-resize', this._circle6); this._circle8 = this._drawResizerOverlay((transformedCornerPoints.p2.x + (transformedCornerPoints.p3.x - transformedCornerPoints.p2.x) / 2), (transformedCornerPoints.p2.y + (transformedCornerPoints.p3.y - transformedCornerPoints.p2.y) / 2), 'e-resize', this._circle8); this._circle7 = this._drawResizerOverlay(transformedCornerPoints.p3.x, transformedCornerPoints.p3.y, 'se-resize', this._circle7); } //#endregion Circles } _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement { let circle = this._drawCircle(x, y, this.designerCanvas.serviceContainer.options.resizerPixelSize / this.designerCanvas.zoomFactor, 'svg-grid-resizer', oldCircle); circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); if (!oldCircle) { circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor)); circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(circle, event, cursor)); circle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(circle, event, cursor)); } circle.style.cursor = cursor; return circle; } _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string) { event.stopPropagation(); const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event); switch (event.type) { case EventNames.PointerDown: this._styleBackup = this.extendedItem.element.getAttribute('style'); (event.target).setPointerCapture(event.pointerId); this._initialPoint = currentPoint; this._actionModeStarted = actionMode; this._initialComputedTransformOrigins = []; this._initialTransformOrigins = []; const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseFloat(x.replace('px', ''))); const transformOrigin: DOMPoint = new DOMPoint(toArr[0], toArr[1]); this._initialComputedTransformOrigins.push(transformOrigin); this._initialTransformOrigins.push((this.extendedItem.element).style.transformOrigin); break; case EventNames.PointerMove: if (this._initialPoint) { let cellX = 0; let cellY = 0; const gridInformation = calculateGridInformation(this.extendedItem.parent); const localPoint = getGridLocalPoint(this.extendedItem.parent, this.designerCanvas.getNormalizedEventCoordinates(event)); const cs = getComputedStyle(this.extendedItem.element); (this.extendedItem.element).style.gridColumnStart = cs.gridColumnStart; (this.extendedItem.element).style.gridColumnEnd = cs.gridColumnEnd === 'auto' ? '' + (parseInt(cs.gridColumnStart) + 1) : cs.gridColumnEnd; (this.extendedItem.element).style.gridRowStart = cs.gridRowStart; (this.extendedItem.element).style.gridRowEnd = cs.gridRowEnd === 'auto' ? '' + (parseInt(cs.gridRowStart) + 1) : cs.gridRowEnd; if (this._actionModeStarted == 'nw-resize' || this._actionModeStarted == 'w-resize' || this._actionModeStarted == 'sw-resize') { (this.extendedItem.element).style.gridColumnStart = '' + getGridColumnStartLineFromLocalX(gridInformation, localPoint.x); } if (this._actionModeStarted == 'nw-resize' || this._actionModeStarted == 'n-resize' || this._actionModeStarted == 'ne-resize') { (this.extendedItem.element).style.gridRowStart = '' + getGridRowStartLineFromLocalY(gridInformation, localPoint.y); } if (this._actionModeStarted == 'se-resize' || this._actionModeStarted == 'e-resize' || this._actionModeStarted == 'ne-resize') { cellX = getGridColumnIndexFromLocalX(gridInformation, localPoint.x); (this.extendedItem.element).style.gridColumnEnd = '' + (cellX + 2); } if (this._actionModeStarted == 'sw-resize' || this._actionModeStarted == 's-resize' || this._actionModeStarted == 'se-resize') { cellY = getGridRowIndexFromLocalY(gridInformation, localPoint.y); (this.extendedItem.element).style.gridRowEnd = '' + (cellY + 2); } const resizedElements = [this.extendedItem, this.extendedItem.parent]; this.extensionManager.refreshExtensions(resizedElements); } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); const cs = getComputedStyle(this.extendedItem.element); const gridColumnStart = cs.gridColumnStart; const gridColumnEnd = cs.gridColumnEnd; const gridRowStart = cs.gridRowStart; const gridRowEnd = cs.gridRowEnd; if (this._styleBackup) this.extendedItem.element.setAttribute('style', this._styleBackup); else this.extendedItem.element.removeAttribute('style'); let cg = this.extendedItem.openGroup("Resize <" + this.extendedItem.name + ">"); this.extendedItem.setStyle("gridColumnStart", gridColumnStart); this.extendedItem.setStyle("gridColumnEnd", gridColumnEnd); this.extendedItem.setStyle("gridRowStart", gridRowStart); this.extendedItem.setStyle("gridRowEnd", gridRowEnd); cg.commit(); this._initialPoint = null; break; } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.ts ================================================ import { css } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from "../../../../item/IDesignItem.js"; import { NodeType } from "../../../../item/NodeType.js"; import { IDesignerCanvas } from "../../IDesignerCanvas.js"; import { IDesignerExtension } from "../IDesignerExtension.js"; import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider.js"; import { IExtensionManager } from "../IExtensionManger.js"; import { GridChildResizeExtension } from "./GridChildResizeExtension.js"; export class GridChildResizeExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType === NodeType.Element && designItem.parent?.nodeType === NodeType.Element && getComputedStyle(designItem.parent.element).display === 'grid') return true; return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new GridChildResizeExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-grid-resizer { stroke: #3899ec; fill: white; pointer-events: auto; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.ts ================================================ import { html } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { assetsPath } from "../../../../../Constants.js"; import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js"; export class GridChildToolbarExtension extends BasicStackedToolbarExtension { protected static template = html`
column:
row:
`; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); this._size.width = 250; } override extend(cache: Record, event: MouseEvent) { super.extend(cache, event); const cs = getComputedStyle(this.extendedItem.element); const gridColumnEl = this._toolbar.getById('gridColumn'); if (gridColumnEl) { gridColumnEl.value = cs.gridColumn; gridColumnEl.onkeyup = async (e) => { if (e.key === 'Enter') await this.extendedItem.updateStyleInSheetOrLocalAsync('gridColumn', gridColumnEl.value); } } const gridRowEl = this._toolbar.getById('gridRow'); if (gridRowEl) { gridRowEl.value = cs.gridColumn; gridRowEl.onkeyup = async (e) => { if (e.key === 'Enter') await this.extendedItem.updateStyleInSheetOrLocalAsync('gridRow', gridRowEl.value); } } this._addStyleButton('align-self'); this._addStyleButton('justify-self'); this.refresh(cache, event); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { NodeType } from '../../../../item/NodeType.js'; import { GridChildToolbarExtension } from './GridChildToolbarExtension.js'; import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js'; export class GridChildToolbarExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType === NodeType.Element && designItem.parent) { const cs = designItem.parent?.getComputedStyle(); if (cs != null && (cs.display === 'grid' || cs.display === 'inline-grid')) return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false; } return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new GridChildToolbarExtension(extensionManager, designerView, designItem); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/GridToolbarExtension.ts ================================================ import { html } from "@node-projects/base-custom-webcomponent"; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js"; import { assetsPath } from "../../../../../Constants.js"; export class GridToolbarExtension extends BasicStackedToolbarExtension { protected static template = html`
${BasicStackedToolbarExtension.basicTemplate}
`; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); this._size.width = 624; } override extend(cache: Record, event: MouseEvent) { super.extend(cache, event); const style = getComputedStyle(this.extendedItem.element); const gridTypeEl = this._toolbar.getById('gridType'); let op = document.createElement('option'); op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length; gridTypeEl.insertAdjacentElement('afterbegin', op); gridTypeEl.selectedIndex = 0; gridTypeEl.onchange = async () => { if (gridTypeEl.value == 'custom') { const columns = prompt("Number of columns?", '4'); if (!columns) return; const rows = prompt("Number of rows?", '4'); if (!rows) return; const cg = this.extendedItem.openGroup('change grid type'); await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', 'repeat(' + columns + ', 1fr)'); await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', 'repeat(' + rows + ', 1fr)'); cg.commit(); } else { const parts = gridTypeEl.value.split('x'); const cg = this.extendedItem.openGroup('change grid type'); await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', 'repeat(' + parts[0] + ', 1fr)'); await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', 'repeat(' + parts[1] + ', 1fr)'); cg.commit(); } } this._addStyleButton('align-content'); this._addStyleButton('justify-content'); this._addStyleButton('align-items'); this._addStyleButton('justify-items'); this.refresh(cache, event); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { GridToolbarExtension } from './GridToolbarExtension.js'; import { NodeType } from '../../../../item/NodeType.js'; import { basicStackedToolbarExtensionOverlayOptionName } from '../BasicStackedToolbarExtension.js'; export class GridToolbarExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designItem.nodeType === NodeType.Element) { const d = getComputedStyle(designItem.element).display; if (d === 'grid' || d === 'inline-grid') return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false; } return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new GridToolbarExtension(extensionManager, designerView, designItem); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; export class ApplyFirstMachingExtensionProvider implements IDesignerExtensionProvider { private extensions: IDesignerExtensionProvider[] private extIndex: number; public style: CSSStyleSheet[]; public svgDefs: string[]; constructor(...extensions: IDesignerExtensionProvider[]) { this.extensions = extensions; for (let e of extensions) { if (e.style) { if (!this.style) this.style = []; if (Array.isArray(e.style)) this.style.push(...e.style); else this.style.push(e.style); } if (e.constructor.style) { if (!this.style) this.style = []; if (Array.isArray(e.constructor.style)) this.style.push(...e.constructor.style); else this.style.push(e.constructor.style); } if (e.svgDefs) { if (!this.svgDefs) this.svgDefs = []; if (Array.isArray(e.svgDefs)) this.svgDefs.push(...e.svgDefs); else this.svgDefs.push(e.svgDefs); } if (e.constructor.svgDefs) { if (!this.svgDefs) this.svgDefs = []; if (Array.isArray(e.constructor.svgDefs)) this.svgDefs.push(...e.svgDefs); else this.svgDefs.push(e.constructor.svgDefs); } } } shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { for (this.extIndex = 0; this.extIndex < this.extensions.length; this.extIndex++) { if (this.extensions[this.extIndex].shouldExtend(extensionManager, designerCanvas, designItem)) return true; } return false; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return this.extensions[this.extIndex].getExtension(extensionManager, designerCanvas, designItem); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; export class ConditionExtensionProvider implements IDesignerExtensionProvider { constructor(extensionProvider: IDesignerExtensionProvider, condition: (designItem: IDesignItem, designerCanvas: IDesignerCanvas) => boolean, recheckOnRefresh: boolean = false) { this.extensionProvider = extensionProvider; this.condition = condition; this.style = extensionProvider.style ?? extensionProvider.constructor.style; this.svgDefs = extensionProvider.svgDefs ?? extensionProvider.constructor.svgDefs; } extensionProvider: IDesignerExtensionProvider; condition: (designItem: IDesignItem, designerCanvas: IDesignerCanvas) => boolean; style: CSSStyleSheet; svgDefs: string; shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (!this.condition(designItem, designerCanvas)) return false; return this.extensionProvider.shouldExtend(extensionManager, designerCanvas, designItem); } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return this.extensionProvider.getExtension(extensionManager, designerCanvas, designItem); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.ts ================================================ import { IDesignItem } from "../../../../item/IDesignItem.js"; import { IDesignerCanvas } from "../../IDesignerCanvas.js"; import { IExtensionManager } from "../IExtensionManger.js"; import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js"; import { AbstractExtensionBase } from '../AbstractExtensionBase.js'; //TODO: move draw functions to overlay layer, implement designerpointerextension, create ruler export abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension { protected extendedItem: IDesignItem; constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas) { super(extensionManager, designerCanvas); } abstract refresh(event: PointerEvent); abstract dispose(); } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.ts ================================================ import { OverlayLayer } from '../OverlayLayer.js'; import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension.js'; export class CursorLinePointerExtension extends AbstractDesignerPointerExtension { private _lineOffset = 5; private _lineLength = 10; private _circle: SVGCircleElement; private _line1: SVGLineElement; private _line2: SVGLineElement; private _line3: SVGLineElement; private _line4: SVGLineElement; refresh(event: PointerEvent) { let mp = this.designerCanvas.getNormalizedEventCoordinates(event); this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foreground); this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foreground); this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foreground); this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foreground); this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foreground); } dispose() { super._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { CursorLinePointerExtension } from './CursorLinePointerExtension.js'; import { IDesignerPointerExtension } from './IDesignerPointerExtension.js'; import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js'; export class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider { getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension { return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas) } style = css` .svg-cursor-line { stroke: black; pointer-events: none } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.ts ================================================ import { IDisposable } from "../../../../../interfaces/IDisposable.js"; export interface IDesignerPointerExtension extends IDisposable { refresh(event: PointerEvent); style? : CSSStyleSheet; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.ts ================================================ import { IDesignerCanvas } from "../../IDesignerCanvas.js"; import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js"; export interface IDesignerPointerExtensionProvider { getExtension(designerView: IDesignerCanvas) : IDesignerPointerExtension; style? : CSSStyleSheet; svgDefs?: string; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/LinePointerExtension.ts ================================================ import { OverlayLayer } from '../OverlayLayer.js'; import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension.js'; export class LinePointerExtension extends AbstractDesignerPointerExtension { private _circle: SVGCircleElement; private _line1: SVGLineElement; private _line2: SVGLineElement; private _line3: SVGLineElement; private _line4: SVGLineElement; refresh(event: PointerEvent) { let mp = this.designerCanvas.getNormalizedEventCoordinates(event); this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line-dashed', this._circle, OverlayLayer.Foreground); this._line1 = this._drawLine(mp.x, mp.y, mp.x, 0, 'svg-cursor-line-dashed', this._line1, OverlayLayer.Foreground); this._line2 = this._drawLine(mp.x, mp.y, mp.x, this.designerCanvas.outerRect.height, 'svg-cursor-line-dashed', this._line2, OverlayLayer.Foreground); this._line3 = this._drawLine(mp.x, mp.y, 0, mp.y, 'svg-cursor-line-dashed', this._line3, OverlayLayer.Foreground); this._line4 = this._drawLine(mp.x, mp.y, this.designerCanvas.outerRect.width, mp.y, 'svg-cursor-line-dashed', this._line4, OverlayLayer.Foreground); } dispose() { super._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/pointerExtensions/LinePointerExtensionProvider.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerPointerExtension } from './IDesignerPointerExtension.js'; import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js'; import { LinePointerExtension } from './LinePointerExtension.js'; export class LinePointerExtensionProvider implements IDesignerPointerExtensionProvider { getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension { return new LinePointerExtension(designerCanvas.extensionManager, designerCanvas) } style = css` .svg-cursor-line-dashed { stroke: black; pointer-events: none; stroke-dasharray: 4 4 } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/UnifiedGeometryExtension.ts ================================================ import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { IPoint } from '../../../../../interfaces/IPoint.js'; import { EventNames } from '../../../../../enums/EventNames.js'; import { ContextMenu } from '../../../../helper/contextMenu/ContextMenu.js'; import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js'; import { OverlayLayer } from '../OverlayLayer.js'; import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './geometry/IGeometry.js'; import { getGeometryReader } from './geometry/GeometryReaderFactory.js'; import { applyGeometryWritesToDesignItem, applyGeometryWritesToElement } from './geometry/GeometryWriteHelper.js'; import { fromOverlayPointToSvgUserSpace, toOverlayPointFromSvgUserSpace } from '../../../../helper/SvgHelper.js'; import { ISourcePart, ISvgPathHandleSourcePartData } from '../../../../services/sourceMapService/ISourcePart.js'; import { createSvgPathHandleSourcePartKey } from '../../../../services/sourceMapService/SvgPathSourceMapProvider.js'; interface DragState { startCursorPos: IPoint; segmentIndex: number; handleType: 'anchor' | 'cp1' | 'cp2'; originalPoint: IPoint; originalSegments: { point: IPoint; cp1?: IPoint; cp2?: IPoint }[]; startScrollOffset: IPoint; geometryChanged: boolean; } export interface UnifiedGeometryExtensionOptions { allowShapeDrag?: boolean; } export class UnifiedGeometryExtension extends AbstractExtension { private _geometry: IGeometry | null = null; private _reader: IGeometryReader | undefined; private _dragState: DragState | null = null; private _options: UnifiedGeometryExtensionOptions; private _overlayStructureSignature: string | null = null; private _eventCleanups: (() => void)[] = []; /** Map from 'anchor-{index}', 'cp1-{index}', 'cp2-{index}' to overlay circle */ private _overlayCircles: Map = new Map(); /** Lines for control point connections */ private _overlayLines: SVGLineElement[] = []; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem, reader?: IGeometryReader, options?: UnifiedGeometryExtensionOptions) { super(extensionManager, designerView, extendedItem); this._reader = reader ?? getGeometryReader(extendedItem.element); this._options = options ?? {}; } override extend() { this.refresh(); } override refresh() { if (!this._reader) { this._cleanupAll(); return; } this._geometry = this._reader.read(this.extendedItem.element); if (!this._geometry) { this._cleanupAll(); return; } const structureSignature = this._getOverlayStructureSignature(this._geometry); const shouldRebuild = this._overlayStructureSignature !== structureSignature || this._hasOverlayStructureMismatch(this._geometry); if (shouldRebuild) { this._cleanupAll(); this._overlayStructureSignature = structureSignature; this._drawOverlays(); return; } if (!this._valuesHaveChanges(...this._getRefreshValues(this._geometry))) { return; } this._updateOverlayAppearance(); this._updateOverlayPositions(); } override dispose() { this._cleanupAll(); this._geometry = null; this._dragState = null; } private _cleanupAll() { for (const cleanup of this._eventCleanups) { try { cleanup(); } catch { /* ignore */ } } this._eventCleanups = []; this._overlayStructureSignature = null; this._overlayCircles.clear(); this._overlayLines = []; this._removeAllOverlays(); } private _getOverlayStructureSignature(geometry: IGeometry): string { return geometry.segments.map(segment => `${segment.type}:${segment.cp1 ? 1 : 0}:${segment.cp2 ? 1 : 0}`).join('|'); } private _hasOverlayStructureMismatch(geometry: IGeometry): boolean { let expectedLines = 0; let expectedCircles = 0; for (let i = 0; i < geometry.segments.length; i++) { const segment = geometry.segments[i]; if (segment.type === SegmentType.Close) { continue; } if (this._shouldRenderAnchorHandle(i, segment, geometry)) { expectedCircles++; } if (segment.cp1) { expectedCircles++; expectedLines++; if (segment.type === SegmentType.QuadraticBezier) { expectedLines++; } } if (segment.cp2) { expectedCircles++; expectedLines++; } } return this._overlayCircles.size !== expectedCircles || this._overlayLines.length !== expectedLines; } private _getRefreshValues(geometry: IGeometry): (number | string)[] { const transformedBoxQuad = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.canvas })[0]; const values: (number | string)[] = [ this.designerCanvas.zoomFactor, this.designerCanvas.scaleFactor, this._overlayStructureSignature ?? '', this._getSelectedHandleRefreshKey() ]; if (transformedBoxQuad) { values.push( transformedBoxQuad.p1.x, transformedBoxQuad.p1.y, transformedBoxQuad.p2.x, transformedBoxQuad.p2.y, transformedBoxQuad.p3.x, transformedBoxQuad.p3.y, transformedBoxQuad.p4.x, transformedBoxQuad.p4.y ); } for (const segment of geometry.segments) { values.push(segment.type, segment.point.x, segment.point.y); if (segment.cp1) { values.push(segment.cp1.x, segment.cp1.y); } else { values.push('cp1:none'); } if (segment.cp2) { values.push(segment.cp2.x, segment.cp2.y); } else { values.push('cp2:none'); } } return values; } private _getSelectedHandleRefreshKey(): string { const selectedPart = this.extendedItem.instanceServiceContainer.selectionService.selectedPart; const data = selectedPart?.data as ISvgPathHandleSourcePartData; if (selectedPart?.designItem !== this.extendedItem || selectedPart.kind !== 'svg-path-handle') { return 'selected:none'; } return `selected:${data?.segmentIndex}:${data?.handleType}`; } /** Convert an SVG user-space coordinate to overlay (canvas) coordinates. */ private _toOverlay(p: IPoint): IPoint { return toOverlayPointFromSvgUserSpace(this.extendedItem.element, this.designerCanvas, p); } /** Convert overlay (canvas) coordinates back to SVG user-space. */ private _fromOverlay(p: IPoint): IPoint { return fromOverlayPointToSvgUserSpace(this.extendedItem.element, this.designerCanvas, p); } private _drawOverlays() { if (!this._geometry) return; let prevAnchor: IPoint | null = null; for (let i = 0; i < this._geometry.segments.length; i++) { const seg = this._geometry.segments[i]; if (seg.type === SegmentType.Close) { prevAnchor = this._geometry.segments[0]?.point ?? null; continue; } // Draw control point handles and dashed lines for bezier segments if (seg.cp1) { const cp1Overlay = this._toOverlay(seg.cp1); if (prevAnchor) { const prevOverlay = this._toOverlay(prevAnchor); const line = this._drawLine(prevOverlay.x, prevOverlay.y, cp1Overlay.x, cp1Overlay.y, 'svg-control-line'); this._overlayLines.push(line); } if (seg.type === SegmentType.QuadraticBezier) { const anchorOverlay = this._toOverlay(seg.point); const line = this._drawLine(anchorOverlay.x, anchorOverlay.y, cp1Overlay.x, cp1Overlay.y, 'svg-control-line'); this._overlayLines.push(line); } this._drawControlCircle(cp1Overlay, i, 'cp1'); } if (seg.cp2) { const cp2Overlay = this._toOverlay(seg.cp2); const anchorOverlay = this._toOverlay(seg.point); const line = this._drawLine(anchorOverlay.x, anchorOverlay.y, cp2Overlay.x, cp2Overlay.y, 'svg-control-line'); this._overlayLines.push(line); this._drawControlCircle(cp2Overlay, i, 'cp2'); } // Draw the anchor point if (this._shouldRenderAnchorHandle(i, seg, this._geometry)) { const overlayPt = this._toOverlay(seg.point); this._drawAnchorCircle(overlayPt, i, seg); } prevAnchor = seg.point; } this._updateOverlayAppearance(); } private _updateOverlayAppearance() { const anchorRadius = 5 / this.designerCanvas.scaleFactor; const controlRadius = 4 / this.designerCanvas.scaleFactor; const strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); const dashArray = (4 / this.designerCanvas.scaleFactor).toString(); for (const [key, circle] of this._overlayCircles) { circle.setAttribute('r', (key.startsWith('anchor-') ? anchorRadius : controlRadius).toString()); circle.style.strokeWidth = strokeWidth; circle.classList.toggle('svg-path-selected-part', this._isSelectedHandle(key)); } for (const line of this._overlayLines) { line.style.strokeDasharray = dashArray; line.style.strokeWidth = strokeWidth; } } private _addTrackedListener(el: Element, event: string, handler: (e: any) => void) { el.addEventListener(event, handler); this._eventCleanups.push(() => el.removeEventListener(event, handler)); } private _drawAnchorCircle(overlayPt: IPoint, segIndex: number, seg: IGeometrySegment) { const r = 5 / this.designerCanvas.scaleFactor; const circle = this._drawCircle(overlayPt.x, overlayPt.y, r, 'svg-path', undefined, OverlayLayer.Foreground); circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); circle.style.cursor = 'move'; this._overlayCircles.set(`anchor-${segIndex}`, circle); const onDown = (e: PointerEvent) => this._onPointerDown(e, circle, segIndex, 'anchor'); const onMove = (e: PointerEvent) => this._onPointerMove(e, circle, segIndex, 'anchor'); const onUp = (e: PointerEvent) => this._onPointerUp(e, segIndex); const onCtx = (e: MouseEvent) => { e.preventDefault(); this._showContextMenu(e, segIndex, seg); }; this._addTrackedListener(circle, EventNames.PointerDown, onDown); this._addTrackedListener(circle, EventNames.PointerMove, onMove); this._addTrackedListener(circle, EventNames.PointerUp, onUp); this._addTrackedListener(circle, EventNames.ContextMenu, onCtx); } private _drawControlCircle(overlayPt: IPoint, segIndex: number, handleType: 'cp1' | 'cp2') { const r = 4 / this.designerCanvas.scaleFactor; const circle = this._drawCircle(overlayPt.x, overlayPt.y, r, 'svg-control-point', undefined, OverlayLayer.Foreground); circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); circle.style.cursor = 'move'; this._overlayCircles.set(`${handleType}-${segIndex}`, circle); const onDown = (e: PointerEvent) => this._onPointerDown(e, circle, segIndex, handleType); const onMove = (e: PointerEvent) => this._onPointerMove(e, circle, segIndex, handleType); const onUp = (e: PointerEvent) => this._onPointerUp(e, segIndex); this._addTrackedListener(circle, EventNames.PointerDown, onDown); this._addTrackedListener(circle, EventNames.PointerMove, onMove); this._addTrackedListener(circle, EventNames.PointerUp, onUp); } // -- Pointer event handlers -- private _onPointerDown(event: PointerEvent, circle: SVGCircleElement, segIndex: number, handleType: 'anchor' | 'cp1' | 'cp2') { event.stopPropagation(); event.preventDefault(); this._selectSourcePart(segIndex, handleType, event); (event.target as Element).setPointerCapture(event.pointerId); const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event); if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; let originalPoint: IPoint; if (handleType === 'anchor') { originalPoint = { ...seg.point }; } else if (handleType === 'cp1') { originalPoint = { ...seg.cp1! }; } else { originalPoint = { ...seg.cp2! }; } const originalSegments = this._geometry.segments.map(s => ({ point: { ...s.point }, cp1: s.cp1 ? { ...s.cp1 } : undefined, cp2: s.cp2 ? { ...s.cp2 } : undefined, })); this._dragState = { startCursorPos: cursorPos, segmentIndex: segIndex, handleType, originalPoint, originalSegments, startScrollOffset: this.designerCanvas.canvasOffset, geometryChanged: false, }; } private _selectSourcePart(segIndex: number, handleType: 'anchor' | 'cp1' | 'cp2', event: Event) { const selectionService = this.extendedItem.instanceServiceContainer.selectionService; const sourcePart = this._getSourcePart(segIndex, handleType); if (selectionService.primarySelection !== this.extendedItem) selectionService.setSelectedElements([this.extendedItem], event, sourcePart); else if (sourcePart) selectionService.setSelectedPart(sourcePart, event); } private _getSourcePart(segIndex: number, handleType: 'anchor' | 'cp1' | 'cp2'): ISourcePart { const key = createSvgPathHandleSourcePartKey(segIndex, handleType); return this.extendedItem.instanceServiceContainer.designItemDocumentPositionService ?.getSourceParts(this.extendedItem) .find(x => x.key === key) as ISourcePart; } private _isSelectedHandle(circleKey: string) { const [handleType, segmentIndexText] = circleKey.split('-') as ['anchor' | 'cp1' | 'cp2', string]; const selectedPart = this.extendedItem.instanceServiceContainer.selectionService.selectedPart; const data = selectedPart?.data as ISvgPathHandleSourcePartData; return selectedPart?.designItem === this.extendedItem && selectedPart.kind === 'svg-path-handle' && data?.segmentIndex === Number(segmentIndexText) && data?.handleType === handleType; } private _onPointerMove(event: PointerEvent, circle: SVGCircleElement, segIndex: number, handleType: 'anchor' | 'cp1' | 'cp2') { event.stopPropagation(); event.preventDefault(); if (!this._dragState || !this._geometry || event.buttons === 0) return; if (this._dragState.segmentIndex !== segIndex || this._dragState.handleType !== handleType) return; const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event); let dx = cursorPos.x - this._dragState.startCursorPos.x; let dy = cursorPos.y - this._dragState.startCursorPos.y; if (dx === 0 && dy === 0) return; // Shift key: constrain to axis if (event.shiftKey) { if (Math.abs(dx) >= Math.abs(dy)) { dy = 0; } else { dx = 0; } } if (dx === 0 && dy === 0) return; // Alt key + anchor drag: move entire shape if (event.altKey && handleType === 'anchor' && this._options.allowShapeDrag !== false) { this._dragWholeShape(dx, dy); } else { this._dragSingleHandle(segIndex, handleType, dx, dy); } if (handleType === 'anchor') { this._normalizeAxisLineSegments(); } this._dragState.geometryChanged = true; // Update geometry model this._applyGeometryToElement(); // Update overlay positions in-place (no recreate to preserve pointer capture) this._updateOverlayPositions(); this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this); } private _dragSingleHandle(segIndex: number, handleType: string, dx: number, dy: number) { const origOverlay = this._toOverlay(this._dragState!.originalPoint); const newOverlay: IPoint = { x: origOverlay.x + dx, y: origOverlay.y + dy }; const newLocal = this._fromOverlay(newOverlay); const seg = this._geometry!.segments[segIndex]; if (handleType === 'anchor') { if (this.extendedItem.element instanceof SVGRectElement && this._dragRectCorner(segIndex, newLocal)) { return; } if (this.extendedItem.element instanceof SVGCircleElement && this._dragCircleCardinal(segIndex, newLocal)) { return; } if (this.extendedItem.element instanceof SVGEllipseElement && this._dragEllipseCardinal(segIndex, newLocal)) { return; } if (seg.type === SegmentType.HorizontalLine) { const prevPt = this._findPreviousAnchor(segIndex); seg.point.x = newLocal.x; seg.point.y = prevPt?.y ?? seg.point.y; } else if (seg.type === SegmentType.VerticalLine) { const prevPt = this._findPreviousAnchor(segIndex); seg.point.x = prevPt?.x ?? seg.point.x; seg.point.y = newLocal.y; } else { seg.point.x = newLocal.x; seg.point.y = newLocal.y; } } else if (handleType === 'cp1') { seg.cp1!.x = newLocal.x; seg.cp1!.y = newLocal.y; } else { seg.cp2!.x = newLocal.x; seg.cp2!.y = newLocal.y; } } private _normalizeAxisLineSegments() { if (!this._geometry) return; let prevAnchor: IPoint | null = null; const firstAnchor = this._geometry.segments.find(s => s.type !== SegmentType.Close)?.point; for (const seg of this._geometry.segments) { if (seg.type === SegmentType.Close) { if (firstAnchor) { seg.point = { ...firstAnchor }; } continue; } if (prevAnchor) { if (seg.type === SegmentType.HorizontalLine) { seg.point.y = prevAnchor.y; } else if (seg.type === SegmentType.VerticalLine) { seg.point.x = prevAnchor.x; } } prevAnchor = seg.point; } } private _dragRectCorner(segIndex: number, newPoint: IPoint): boolean { if (!this._geometry || !this._dragState?.originalSegments) return false; if (this._geometry.segments.length < 4 || segIndex < 0 || segIndex > 3) return false; const originalSegments = this._dragState.originalSegments; switch (segIndex) { case 0: this._setRectCornerPoints( newPoint, { x: originalSegments[2].point.x, y: newPoint.y }, { ...originalSegments[2].point }, { x: newPoint.x, y: originalSegments[2].point.y } ); break; case 1: this._setRectCornerPoints( { x: originalSegments[3].point.x, y: newPoint.y }, newPoint, { x: newPoint.x, y: originalSegments[3].point.y }, { ...originalSegments[3].point } ); break; case 2: this._setRectCornerPoints( { ...originalSegments[0].point }, { x: newPoint.x, y: originalSegments[0].point.y }, newPoint, { x: originalSegments[0].point.x, y: newPoint.y } ); break; case 3: this._setRectCornerPoints( { x: newPoint.x, y: originalSegments[1].point.y }, { ...originalSegments[1].point }, { x: originalSegments[1].point.x, y: newPoint.y }, newPoint ); break; default: return false; } const closeSegment = this._geometry.segments[4]; if (closeSegment?.type === SegmentType.Close) { closeSegment.point = { ...this._geometry.segments[0].point }; } return true; } private _setRectCornerPoints(topLeft: IPoint, topRight: IPoint, bottomRight: IPoint, bottomLeft: IPoint) { this._geometry!.segments[0].point = { ...topLeft }; this._geometry!.segments[1].point = { ...topRight }; this._geometry!.segments[2].point = { ...bottomRight }; this._geometry!.segments[3].point = { ...bottomLeft }; } private _dragCircleCardinal(segIndex: number, newPoint: IPoint): boolean { if (!this._geometry || !this._dragState?.originalSegments) return false; const cardinalIndex = this._normalizeCardinalIndex(segIndex); if (cardinalIndex === null) return false; const original = this._dragState.originalSegments; const centerX = (original[1].point.x + original[3].point.x) / 2; const centerY = (original[0].point.y + original[2].point.y) / 2; let cx = centerX; let cy = centerY; let radius = Math.abs(original[1].point.x - original[3].point.x) / 2; switch (cardinalIndex) { case 0: { const oppositeY = original[2].point.y; cy = (newPoint.y + oppositeY) / 2; radius = Math.abs(oppositeY - newPoint.y) / 2; break; } case 1: { const oppositeX = original[3].point.x; cx = (newPoint.x + oppositeX) / 2; radius = Math.abs(newPoint.x - oppositeX) / 2; break; } case 2: { const oppositeY = original[0].point.y; cy = (original[0].point.y + newPoint.y) / 2; radius = Math.abs(newPoint.y - oppositeY) / 2; break; } case 3: { const oppositeX = original[1].point.x; cx = (oppositeX + newPoint.x) / 2; radius = Math.abs(oppositeX - newPoint.x) / 2; break; } default: return false; } this._setCardinalArcPoints(cx, cy, radius, radius); return true; } private _dragEllipseCardinal(segIndex: number, newPoint: IPoint): boolean { if (!this._geometry || !this._dragState?.originalSegments) return false; const cardinalIndex = this._normalizeCardinalIndex(segIndex); if (cardinalIndex === null) return false; const original = this._dragState.originalSegments; let cx = (original[1].point.x + original[3].point.x) / 2; let cy = (original[0].point.y + original[2].point.y) / 2; let rx = Math.abs(original[1].point.x - original[3].point.x) / 2; let ry = Math.abs(original[2].point.y - original[0].point.y) / 2; switch (cardinalIndex) { case 0: { const oppositeY = original[2].point.y; cy = (newPoint.y + oppositeY) / 2; ry = Math.abs(oppositeY - newPoint.y) / 2; break; } case 1: { const oppositeX = original[3].point.x; cx = (newPoint.x + oppositeX) / 2; rx = Math.abs(newPoint.x - oppositeX) / 2; break; } case 2: { const oppositeY = original[0].point.y; cy = (oppositeY + newPoint.y) / 2; ry = Math.abs(newPoint.y - oppositeY) / 2; break; } case 3: { const oppositeX = original[1].point.x; cx = (oppositeX + newPoint.x) / 2; rx = Math.abs(oppositeX - newPoint.x) / 2; break; } default: return false; } this._setCardinalArcPoints(cx, cy, rx, ry); return true; } private _normalizeCardinalIndex(segIndex: number): 0 | 1 | 2 | 3 | null { if (segIndex >= 0 && segIndex <= 3) { return segIndex as 0 | 1 | 2 | 3; } if (segIndex === 4) { return 0; } return null; } private _setCardinalArcPoints(cx: number, cy: number, rx: number, ry: number) { if (!this._geometry) return; this._geometry.segments[0].point = { x: cx, y: cy - ry }; this._geometry.segments[1].point = { x: cx + rx, y: cy }; this._geometry.segments[2].point = { x: cx, y: cy + ry }; this._geometry.segments[3].point = { x: cx - rx, y: cy }; if (this._geometry.segments[1].arc) { this._geometry.segments[1].arc.rx = rx; this._geometry.segments[1].arc.ry = ry; } if (this._geometry.segments[2].arc) { this._geometry.segments[2].arc.rx = rx; this._geometry.segments[2].arc.ry = ry; } if (this._geometry.segments[3].arc) { this._geometry.segments[3].arc.rx = rx; this._geometry.segments[3].arc.ry = ry; } if (this._geometry.segments[4]?.arc) { this._geometry.segments[4].point = { x: cx, y: cy - ry }; this._geometry.segments[4].arc.rx = rx; this._geometry.segments[4].arc.ry = ry; } if (this._geometry.segments[5]?.type === SegmentType.Close) { this._geometry.segments[5].point = { x: cx, y: cy - ry }; } } private _shouldRenderAnchorHandle(segIndex: number, seg: IGeometrySegment, geometry: IGeometry): boolean { if (!(this.extendedItem.element instanceof SVGCircleElement) && !(this.extendedItem.element instanceof SVGEllipseElement)) { return true; } if (segIndex !== 4) { return true; } const firstSegment = geometry.segments[0]; return seg.point.x !== firstSegment?.point.x || seg.point.y !== firstSegment?.point.y; } private _dragWholeShape(dx: number, dy: number) { if (!this._dragState?.originalSegments || !this._geometry) return; for (let i = 0; i < this._geometry.segments.length; i++) { const orig = this._dragState.originalSegments[i]; const seg = this._geometry.segments[i]; const origOverlay = this._toOverlay(orig.point); const newOverlay: IPoint = { x: origOverlay.x + dx, y: origOverlay.y + dy }; const newLocal = this._fromOverlay(newOverlay); seg.point.x = newLocal.x; seg.point.y = newLocal.y; if (seg.cp1 && orig.cp1) { const origCp1Overlay = this._toOverlay(orig.cp1); const newCp1Overlay: IPoint = { x: origCp1Overlay.x + dx, y: origCp1Overlay.y + dy }; const newCp1Local = this._fromOverlay(newCp1Overlay); seg.cp1.x = newCp1Local.x; seg.cp1.y = newCp1Local.y; } if (seg.cp2 && orig.cp2) { const origCp2Overlay = this._toOverlay(orig.cp2); const newCp2Overlay: IPoint = { x: origCp2Overlay.x + dx, y: origCp2Overlay.y + dy }; const newCp2Local = this._fromOverlay(newCp2Overlay); seg.cp2.x = newCp2Local.x; seg.cp2.y = newCp2Local.y; } } } /** Update existing overlay circle/line positions without removing/recreating them. * This preserves pointer capture during drag. */ private _updateOverlayPositions() { if (!this._geometry) return; let prevAnchor: IPoint | null = null; let lineIdx = 0; for (let i = 0; i < this._geometry.segments.length; i++) { const seg = this._geometry.segments[i]; if (seg.type === SegmentType.Close) { prevAnchor = this._geometry.segments[0]?.point ?? null; continue; } if (seg.cp1) { const cp1Overlay = this._toOverlay(seg.cp1); if (prevAnchor && lineIdx < this._overlayLines.length) { const prevOverlay = this._toOverlay(prevAnchor); const line = this._overlayLines[lineIdx++]; line.setAttribute('x1', prevOverlay.x.toString()); line.setAttribute('y1', prevOverlay.y.toString()); line.setAttribute('x2', cp1Overlay.x.toString()); line.setAttribute('y2', cp1Overlay.y.toString()); } if (seg.type === SegmentType.QuadraticBezier && lineIdx < this._overlayLines.length) { const anchorOverlay = this._toOverlay(seg.point); const line = this._overlayLines[lineIdx++]; line.setAttribute('x1', anchorOverlay.x.toString()); line.setAttribute('y1', anchorOverlay.y.toString()); line.setAttribute('x2', cp1Overlay.x.toString()); line.setAttribute('y2', cp1Overlay.y.toString()); } const cp1Circle = this._overlayCircles.get(`cp1-${i}`); if (cp1Circle) { cp1Circle.setAttribute('cx', cp1Overlay.x.toString()); cp1Circle.setAttribute('cy', cp1Overlay.y.toString()); } } if (seg.cp2) { const cp2Overlay = this._toOverlay(seg.cp2); const anchorOverlay = this._toOverlay(seg.point); if (lineIdx < this._overlayLines.length) { const line = this._overlayLines[lineIdx++]; line.setAttribute('x1', anchorOverlay.x.toString()); line.setAttribute('y1', anchorOverlay.y.toString()); line.setAttribute('x2', cp2Overlay.x.toString()); line.setAttribute('y2', cp2Overlay.y.toString()); } const cp2Circle = this._overlayCircles.get(`cp2-${i}`); if (cp2Circle) { cp2Circle.setAttribute('cx', cp2Overlay.x.toString()); cp2Circle.setAttribute('cy', cp2Overlay.y.toString()); } } if (this._shouldRenderAnchorHandle(i, seg, this._geometry)) { const overlayPt = this._toOverlay(seg.point); const anchorCircle = this._overlayCircles.get(`anchor-${i}`); if (anchorCircle) { anchorCircle.setAttribute('cx', overlayPt.x.toString()); anchorCircle.setAttribute('cy', overlayPt.y.toString()); } } prevAnchor = seg.point; } } private _onPointerUp(event: PointerEvent, segIndex: number) { event.stopPropagation(); (event.target as Element).releasePointerCapture(event.pointerId); if (this._dragState?.geometryChanged && this._geometry) { // Commit via designItem for undo support (follows PathExtension pattern) this._commitGeometryChange(); } this._dragState = null; } // -- Geometry manipulation -- /** Set attributes directly on the DOM element for live visual feedback during drag */ private _applyGeometryToElement() { if (!this._reader || !this._geometry) return; const attrs = this._reader.serialize(this._geometry); applyGeometryWritesToElement(this.extendedItem.element, attrs, this.extendedItem.serviceContainer.options.roundPixelsToDecimalPlaces); } /** Commit geometry change through the designItem undo system. * group.commit() will trigger refreshAllExtensions which redraws overlays. */ private _commitGeometryChange() { if (!this._reader || !this._geometry) return; const attrs = this._reader.serialize(this._geometry); const group = this.extendedItem.openGroup('editGeometry'); applyGeometryWritesToDesignItem(this.extendedItem, attrs); group.commit(); } // -- Context menu -- private _showContextMenu(event: MouseEvent, segIndex: number, seg: IGeometrySegment) { if (!this._geometry) return; const items: IContextMenuItem[] = []; const isPath = this.extendedItem.element instanceof SVGPathElement; const nonCloseSegments = this._geometry.segments.filter(s => s.type !== SegmentType.Close); // Delete point (only if not the only point) if (nonCloseSegments.length > 2) { items.push({ title: 'Delete point', action: () => { if (!this._geometry) return; this._geometry.segments.splice(segIndex, 1); if (segIndex === 0 && this._geometry.segments.length > 0 && this._geometry.segments[0].type !== SegmentType.Close) { this._geometry.segments[0].type = SegmentType.Move; } this._applyGeometryToElement(); this._commitGeometryChange(); } }); } // Insert point after if (isPath) { const nextSeg = this._findNextNonCloseSegment(segIndex); if (nextSeg !== null) { items.push({ title: 'Insert point after', action: () => { this._insertPointAfter(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } } // Close / Open path if (isPath && this._geometry.segments.length > 0) { const hasClose = this._geometry.segments.some(s => s.type === SegmentType.Close); const lastNonCloseIdx = this._findLastNonCloseIndex(); if (segIndex === lastNonCloseIdx || (hasClose && seg.type !== SegmentType.Close)) { items.push({ title: '---' }); if (hasClose) { items.push({ title: 'Open path', action: () => { if (!this._geometry) return; this._geometry.segments = this._geometry.segments.filter(s => s.type !== SegmentType.Close); this._geometry.closed = false; this._applyGeometryToElement(); this._commitGeometryChange(); } }); } else { items.push({ title: 'Close path', action: () => { if (!this._geometry) return; this._geometry.segments.push({ type: SegmentType.Close, relative: false, point: this._geometry.segments[0].point }); this._geometry.closed = true; this._applyGeometryToElement(); this._commitGeometryChange(); } }); } } } // Segment type conversion (only for path elements) if (isPath && segIndex > 0 && seg.type !== SegmentType.Close) { items.push({ title: '---' }); const conversionItems: IContextMenuItem[] = []; if (seg.type !== SegmentType.Move) { conversionItems.push({ title: 'moveto', action: () => { this._convertToMove(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } if (seg.type !== SegmentType.Line && seg.type !== SegmentType.HorizontalLine && seg.type !== SegmentType.VerticalLine) { conversionItems.push({ title: 'line', action: () => { this._convertToLine(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } if (seg.type !== SegmentType.HorizontalLine) { conversionItems.push({ title: 'horizontal line', action: () => { this._convertToHorizontalLine(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } if (seg.type !== SegmentType.VerticalLine) { conversionItems.push({ title: 'vertical line', action: () => { this._convertToVerticalLine(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } if (seg.type !== SegmentType.QuadraticBezier) { conversionItems.push({ title: 'quadratic bézier', action: () => { this._convertToQuadratic(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } if (seg.type !== SegmentType.CubicBezier) { conversionItems.push({ title: 'cubic bézier', action: () => { this._convertToCubic(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } if (seg.type !== SegmentType.Arc) { conversionItems.push({ title: 'arc', action: () => { this._convertToArc(segIndex, false); this._applyGeometryToElement(); this._commitGeometryChange(); } }); conversionItems.push({ title: 'inverted arc', action: () => { this._convertToArc(segIndex, true); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } if (conversionItems.length > 0) { items.push({ title: 'Convert to', children: conversionItems }); } if (seg.type === SegmentType.Arc) { items.push({ title: 'Invert arc', action: () => { this._invertArc(segIndex); this._applyGeometryToElement(); this._commitGeometryChange(); } }); } } if (items.length > 0) { ContextMenu.show(items, event); } } private _findLastNonCloseIndex(): number { if (!this._geometry) return -1; for (let i = this._geometry.segments.length - 1; i >= 0; i--) { if (this._geometry.segments[i].type !== SegmentType.Close) return i; } return -1; } private _findNextNonCloseSegment(segIndex: number): number | null { if (!this._geometry) return null; for (let i = segIndex + 1; i < this._geometry.segments.length; i++) { if (this._geometry.segments[i].type !== SegmentType.Close) return i; } return null; } private _findPreviousAnchor(segIndex: number): IPoint | null { if (!this._geometry) return null; for (let i = segIndex - 1; i >= 0; i--) { const s = this._geometry.segments[i]; if (s.type !== SegmentType.Close) return s.point; } return null; } private _insertPointAfter(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; const nextIdx = this._findNextNonCloseSegment(segIndex); if (nextIdx === null) return; const nextSeg = this._geometry.segments[nextIdx]; let newPoint: IPoint; switch (nextSeg.type) { case SegmentType.CubicBezier: { // Evaluate cubic bezier at t=0.5 using De Casteljau const p0 = seg.point; const p1 = nextSeg.cp1; const p2 = nextSeg.cp2; const p3 = nextSeg.point; newPoint = this._evalCubicBezier(p0, p1, p2, p3, 0.5); break; } case SegmentType.QuadraticBezier: { // Evaluate quadratic bezier at t=0.5 const p0 = seg.point; const p1 = nextSeg.cp1; const p2 = nextSeg.point; newPoint = this._evalQuadraticBezier(p0, p1, p2, 0.5); break; } default: { // Linear midpoint newPoint = { x: (seg.point.x + nextSeg.point.x) / 2, y: (seg.point.y + nextSeg.point.y) / 2, }; break; } } const newSeg: IGeometrySegment = { type: SegmentType.Line, relative: seg.relative, point: newPoint, }; this._geometry.segments.splice(segIndex + 1, 0, newSeg); } private _convertToMove(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; seg.type = SegmentType.Move; delete seg.cp1; delete seg.cp2; delete seg.arc; } private _convertToLine(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; seg.type = SegmentType.Line; delete seg.cp1; delete seg.cp2; delete seg.arc; } private _convertToHorizontalLine(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; const prevPt = this._findPreviousAnchor(segIndex); if (!prevPt) return; seg.type = SegmentType.HorizontalLine; seg.point.y = prevPt.y; delete seg.cp1; delete seg.cp2; delete seg.arc; } private _convertToVerticalLine(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; const prevPt = this._findPreviousAnchor(segIndex); if (!prevPt) return; seg.type = SegmentType.VerticalLine; seg.point.x = prevPt.x; delete seg.cp1; delete seg.cp2; delete seg.arc; } private _convertToQuadratic(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; const prevPt = this._findPreviousAnchor(segIndex); if (!prevPt) return; const endPt = seg.point; // Generate control point perpendicular to the midpoint const mpx = (prevPt.x + endPt.x) / 2; const mpy = (prevPt.y + endPt.y) / 2; const dist = Math.sqrt(Math.pow(endPt.x - prevPt.x, 2) + Math.pow(endPt.y - prevPt.y, 2)); const offset = Math.max(20, dist * 0.25); const theta = Math.atan2(endPt.y - prevPt.y, endPt.x - prevPt.x) - Math.PI / 2; seg.type = SegmentType.QuadraticBezier; seg.cp1 = { x: mpx + offset * Math.cos(theta), y: mpy + offset * Math.sin(theta), }; delete seg.cp2; delete seg.arc; } private _convertToCubic(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; const prevPt = this._findPreviousAnchor(segIndex); if (!prevPt) return; const endPt = seg.point; if (seg.type === SegmentType.QuadraticBezier && seg.cp1) { // Elevate quadratic to cubic: C_cp1 = P0 + 2/3*(Q_cp1 - P0), C_cp2 = P3 + 2/3*(Q_cp1 - P3) seg.type = SegmentType.CubicBezier; const qcp = seg.cp1; seg.cp1 = { x: prevPt.x + (2 / 3) * (qcp.x - prevPt.x), y: prevPt.y + (2 / 3) * (qcp.y - prevPt.y), }; seg.cp2 = { x: endPt.x + (2 / 3) * (qcp.x - endPt.x), y: endPt.y + (2 / 3) * (qcp.y - endPt.y), }; } else { // Generate default control points at 1/3 and 2/3 along the line seg.type = SegmentType.CubicBezier; seg.cp1 = { x: prevPt.x + (endPt.x - prevPt.x) / 3, y: prevPt.y + (endPt.y - prevPt.y) / 3, }; seg.cp2 = { x: prevPt.x + 2 * (endPt.x - prevPt.x) / 3, y: prevPt.y + 2 * (endPt.y - prevPt.y) / 3, }; } delete seg.arc; } private _convertToArc(segIndex: number, inverted: boolean = false) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; const prevPt = this._findPreviousAnchor(segIndex); if (!prevPt) return; const endPt = seg.point; const dx = endPt.x - prevPt.x; const dy = endPt.y - prevPt.y; const dist = Math.sqrt(dx * dx + dy * dy); const radius = Math.max(1, dist / 2); seg.type = SegmentType.Arc; seg.arc = { rx: radius, ry: radius, rotation: 0, largeArc: false, sweep: !inverted, }; delete seg.cp1; delete seg.cp2; } private _invertArc(segIndex: number) { if (!this._geometry) return; const seg = this._geometry.segments[segIndex]; if (seg.type !== SegmentType.Arc || !seg.arc) return; seg.arc.sweep = !seg.arc.sweep; } // -- Bezier evaluation -- private _evalCubicBezier(p0: IPoint, p1: IPoint, p2: IPoint, p3: IPoint, t: number): IPoint { const mt = 1 - t; return { x: mt * mt * mt * p0.x + 3 * mt * mt * t * p1.x + 3 * mt * t * t * p2.x + t * t * t * p3.x, y: mt * mt * mt * p0.y + 3 * mt * mt * t * p1.y + 3 * mt * t * t * p2.y + t * t * t * p3.y, }; } private _evalQuadraticBezier(p0: IPoint, p1: IPoint, p2: IPoint, t: number): IPoint { const mt = 1 - t; return { x: mt * mt * p0.x + 2 * mt * t * p1.x + t * t * p2.x, y: mt * mt * p0.y + 2 * mt * t * p1.y + t * t * p2.y, }; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/UnifiedGeometryExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { UnifiedGeometryExtension } from './UnifiedGeometryExtension.js'; import { isVisualSvgElement } from '../../../../helper/SvgHelper.js'; import { IGeometryReader } from './geometry/IGeometry.js'; import { css } from '@node-projects/base-custom-webcomponent'; export class UnifiedGeometryExtensionProvider implements IDesignerExtensionProvider { private _customReader?: IGeometryReader; constructor(customReader?: IGeometryReader) { this._customReader = customReader; } shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { if (this._customReader) return true; const node = designItem.node; if (node instanceof SVGPathElement || node instanceof SVGRectElement || node instanceof SVGLineElement || node instanceof SVGEllipseElement || node instanceof SVGCircleElement || node instanceof SVGPolygonElement || node instanceof SVGPolylineElement) { return isVisualSvgElement(node); } return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new UnifiedGeometryExtension(extensionManager, designerView, designItem, this._customReader); } readonly style = css` .svg-control-line { stroke: #3899ec; fill: none; stroke-dasharray: 4; pointer-events: none; opacity: 0.9; } .svg-control-point { stroke: #3899ec; fill: white; pointer-events: auto; } .svg-path-selected-part { stroke: black; fill: lime; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/CssClipPathGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; /** * Reads and writes CSS `clip-path` property geometry. * Supports: polygon(), circle(), ellipse(), path() */ export class CssClipPathGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const style = getComputedStyle(element); const raw = style.clipPath || element.getAttribute('style')?.match(/clip-path\s*:\s*([^;]+)/)?.[1] || ''; return this._parse(raw); } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const value = this._serializeGeometry(geometry); return [{ attribute: 'style:clipPath', value }]; } private _parse(raw: string): IGeometry { const trimmed = raw.trim(); if (trimmed.startsWith('polygon(')) { return this._parsePolygon(trimmed); } if (trimmed.startsWith('circle(')) { return this._parseCircle(trimmed); } if (trimmed.startsWith('ellipse(')) { return this._parseEllipse(trimmed); } if (trimmed.startsWith('path(')) { return this._parsePath(trimmed); } return { segments: [], closed: false }; } private _parsePolygon(raw: string): IGeometry { // polygon(x1 y1, x2 y2, ...) const inner = raw.slice(8, -1).trim(); const segments: IGeometrySegment[] = []; const pairs = inner.split(','); for (let i = 0; i < pairs.length; i++) { const parts = pairs[i].trim().split(/\s+/); if (parts.length >= 2) { const x = parseFloat(parts[0]); const y = parseFloat(parts[1]); if (!isNaN(x) && !isNaN(y)) { segments.push({ type: i === 0 ? SegmentType.Move : SegmentType.Line, relative: false, point: { x, y }, }); } } } if (segments.length > 0) { segments.push({ type: SegmentType.Close, relative: false, point: { ...segments[0].point } }); } return { segments, closed: true }; } private _parseCircle(raw: string): IGeometry { // circle(r at cx cy) const inner = raw.slice(7, -1).trim(); const atIdx = inner.indexOf(' at '); let r = 50, cx = 50, cy = 50; if (atIdx >= 0) { r = parseFloat(inner.substring(0, atIdx)); const pos = inner.substring(atIdx + 4).trim().split(/\s+/); cx = parseFloat(pos[0]) || 50; cy = parseFloat(pos[1]) || 50; } else { r = parseFloat(inner) || 50; } const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - r } }, { type: SegmentType.Arc, relative: false, point: { x: cx + r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - r } }, ]; return { segments, closed: true }; } private _parseEllipse(raw: string): IGeometry { // ellipse(rx ry at cx cy) const inner = raw.slice(8, -1).trim(); const atIdx = inner.indexOf(' at '); let rx = 50, ry = 25, cx = 50, cy = 50; if (atIdx >= 0) { const radii = inner.substring(0, atIdx).trim().split(/\s+/); rx = parseFloat(radii[0]) || 50; ry = parseFloat(radii[1]) || 25; const pos = inner.substring(atIdx + 4).trim().split(/\s+/); cx = parseFloat(pos[0]) || 50; cy = parseFloat(pos[1]) || 50; } const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - ry } }, { type: SegmentType.Arc, relative: false, point: { x: cx + rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - ry } }, ]; return { segments, closed: true }; } private _parsePath(raw: string): IGeometry { // path("d string") — delegate to an internal SVG path parser // Extract d string between quotes const match = raw.match(/path\(\s*["']([^"']+)["']\s*\)/); if (!match) return { segments: [], closed: false }; // Create a temporary SVG path element to parse const tempNs = 'http://www.w3.org/2000/svg'; const tempSvg = document.createElementNS(tempNs, 'svg'); const tempPath = document.createElementNS(tempNs, 'path'); tempPath.setAttribute('d', match[1]); tempSvg.appendChild(tempPath); // Temporarily attach for getPathData to work tempSvg.style.position = 'absolute'; tempSvg.style.width = '0'; tempSvg.style.height = '0'; tempSvg.style.overflow = 'hidden'; document.body.appendChild(tempSvg); try { const { SvgPathGeometryReader } = require('./SvgPathGeometryReader.js'); const reader = new SvgPathGeometryReader(); return reader.read(tempPath); } catch { return { segments: [], closed: false }; } finally { document.body.removeChild(tempSvg); } } private _serializeGeometry(geometry: IGeometry): string { // Detect the shape type from the segment structure const nonClose = geometry.segments.filter(s => s.type !== SegmentType.Close); if (nonClose.length === 0) return 'none'; // If all non-move/close segments are arcs with equal rx/ry => circle or ellipse const arcs = nonClose.filter(s => s.type === SegmentType.Arc); if (arcs.length >= 3 && arcs[0].arc) { // Compute center from cardinal points const pts = nonClose; const top = pts[0].point; const right = pts[1].point; const bottom = pts[2].point; const left = pts[3].point; const cx = (right.x + left.x) / 2; const cy = (top.y + bottom.y) / 2; const finalRx = Math.abs(right.x - left.x) / 2; const finalRy = Math.abs(bottom.y - top.y) / 2; if (Math.abs(finalRx - finalRy) < 0.01) { return `circle(${finalRx}px at ${cx}px ${cy}px)`; } return `ellipse(${finalRx}px ${finalRy}px at ${cx}px ${cy}px)`; } // Otherwise serialize as polygon const points = nonClose.map(s => `${s.point.x}px ${s.point.y}px`).join(', '); return `polygon(${points})`; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/CssOffsetPathGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; /** * Reads and writes CSS `offset-path` (formerly `motion-path`) property geometry. * Supports: path(), polygon(), circle(), ellipse() */ export class CssOffsetPathGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const style = getComputedStyle(element); const raw = style.offsetPath || element.getAttribute('style')?.match(/offset-path\s*:\s*([^;]+)/)?.[1] || ''; return this._parse(raw); } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const value = this._serializeGeometry(geometry); return [{ attribute: 'style:offsetPath', value }]; } private _parse(raw: string): IGeometry { const trimmed = raw.trim(); if (trimmed.startsWith('polygon(')) { return this._parsePolygon(trimmed); } if (trimmed.startsWith('circle(')) { return this._parseCircle(trimmed); } if (trimmed.startsWith('ellipse(')) { return this._parseEllipse(trimmed); } if (trimmed.startsWith('path(')) { return this._parsePath(trimmed); } return { segments: [], closed: false }; } private _parsePolygon(raw: string): IGeometry { const inner = raw.slice(8, -1).trim(); const segments: IGeometrySegment[] = []; const pairs = inner.split(','); for (let i = 0; i < pairs.length; i++) { const parts = pairs[i].trim().split(/\s+/); if (parts.length >= 2) { const x = parseFloat(parts[0]); const y = parseFloat(parts[1]); if (!isNaN(x) && !isNaN(y)) { segments.push({ type: i === 0 ? SegmentType.Move : SegmentType.Line, relative: false, point: { x, y }, }); } } } if (segments.length > 0) { segments.push({ type: SegmentType.Close, relative: false, point: { ...segments[0].point } }); } return { segments, closed: true }; } private _parseCircle(raw: string): IGeometry { const inner = raw.slice(7, -1).trim(); const atIdx = inner.indexOf(' at '); let r = 50, cx = 50, cy = 50; if (atIdx >= 0) { r = parseFloat(inner.substring(0, atIdx)); const pos = inner.substring(atIdx + 4).trim().split(/\s+/); cx = parseFloat(pos[0]) || 50; cy = parseFloat(pos[1]) || 50; } else { r = parseFloat(inner) || 50; } const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - r } }, { type: SegmentType.Arc, relative: false, point: { x: cx + r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - r } }, ]; return { segments, closed: true }; } private _parseEllipse(raw: string): IGeometry { const inner = raw.slice(8, -1).trim(); const atIdx = inner.indexOf(' at '); let rx = 50, ry = 25, cx = 50, cy = 50; if (atIdx >= 0) { const radii = inner.substring(0, atIdx).trim().split(/\s+/); rx = parseFloat(radii[0]) || 50; ry = parseFloat(radii[1]) || 25; const pos = inner.substring(atIdx + 4).trim().split(/\s+/); cx = parseFloat(pos[0]) || 50; cy = parseFloat(pos[1]) || 50; } const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - ry } }, { type: SegmentType.Arc, relative: false, point: { x: cx + rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - ry } }, ]; return { segments, closed: true }; } private _parsePath(raw: string): IGeometry { const match = raw.match(/path\(\s*["']([^"']+)["']\s*\)/); if (!match) return { segments: [], closed: false }; const tempNs = 'http://www.w3.org/2000/svg'; const tempSvg = document.createElementNS(tempNs, 'svg'); const tempPath = document.createElementNS(tempNs, 'path'); tempPath.setAttribute('d', match[1]); tempSvg.appendChild(tempPath); tempSvg.style.position = 'absolute'; tempSvg.style.width = '0'; tempSvg.style.height = '0'; tempSvg.style.overflow = 'hidden'; document.body.appendChild(tempSvg); try { const { SvgPathGeometryReader } = require('./SvgPathGeometryReader.js'); const reader = new SvgPathGeometryReader(); return reader.read(tempPath); } catch { return { segments: [], closed: false }; } finally { document.body.removeChild(tempSvg); } } private _serializeGeometry(geometry: IGeometry): string { const nonClose = geometry.segments.filter(s => s.type !== SegmentType.Close); if (nonClose.length === 0) return 'none'; const arcs = nonClose.filter(s => s.type === SegmentType.Arc); if (arcs.length >= 3 && arcs[0].arc) { const pts = nonClose; const top = pts[0].point; const right = pts[1].point; const bottom = pts[2].point; const left = pts[3].point; const cx = (right.x + left.x) / 2; const cy = (top.y + bottom.y) / 2; const finalRx = Math.abs(right.x - left.x) / 2; const finalRy = Math.abs(bottom.y - top.y) / 2; if (Math.abs(finalRx - finalRy) < 0.01) { return `circle(${finalRx}px at ${cx}px ${cy}px)`; } return `ellipse(${finalRx}px ${finalRy}px at ${cx}px ${cy}px)`; } const points = nonClose.map(s => `${s.point.x}px ${s.point.y}px`).join(', '); return `polygon(${points})`; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/CssShapeOutsideGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; /** * Reads and writes CSS `shape-outside` property geometry. * Supports: polygon(), circle(), ellipse() */ export class CssShapeOutsideGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const style = getComputedStyle(element); const raw = style.shapeOutside || element.getAttribute('style')?.match(/shape-outside\s*:\s*([^;]+)/)?.[1] || ''; return this._parse(raw); } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const value = this._serializeGeometry(geometry); return [{ attribute: 'style:shapeOutside', value }]; } private _parse(raw: string): IGeometry { const trimmed = raw.trim(); if (trimmed.startsWith('polygon(')) { return this._parsePolygon(trimmed); } if (trimmed.startsWith('circle(')) { return this._parseCircle(trimmed); } if (trimmed.startsWith('ellipse(')) { return this._parseEllipse(trimmed); } return { segments: [], closed: false }; } private _parsePolygon(raw: string): IGeometry { const inner = raw.slice(8, -1).trim(); const segments: IGeometrySegment[] = []; const pairs = inner.split(','); for (let i = 0; i < pairs.length; i++) { const parts = pairs[i].trim().split(/\s+/); if (parts.length >= 2) { const x = parseFloat(parts[0]); const y = parseFloat(parts[1]); if (!isNaN(x) && !isNaN(y)) { segments.push({ type: i === 0 ? SegmentType.Move : SegmentType.Line, relative: false, point: { x, y }, }); } } } if (segments.length > 0) { segments.push({ type: SegmentType.Close, relative: false, point: { ...segments[0].point } }); } return { segments, closed: true }; } private _parseCircle(raw: string): IGeometry { const inner = raw.slice(7, -1).trim(); const atIdx = inner.indexOf(' at '); let r = 50, cx = 50, cy = 50; if (atIdx >= 0) { r = parseFloat(inner.substring(0, atIdx)); const pos = inner.substring(atIdx + 4).trim().split(/\s+/); cx = parseFloat(pos[0]) || 50; cy = parseFloat(pos[1]) || 50; } else { r = parseFloat(inner) || 50; } const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - r } }, { type: SegmentType.Arc, relative: false, point: { x: cx + r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - r } }, ]; return { segments, closed: true }; } private _parseEllipse(raw: string): IGeometry { const inner = raw.slice(8, -1).trim(); const atIdx = inner.indexOf(' at '); let rx = 50, ry = 25, cx = 50, cy = 50; if (atIdx >= 0) { const radii = inner.substring(0, atIdx).trim().split(/\s+/); rx = parseFloat(radii[0]) || 50; ry = parseFloat(radii[1]) || 25; const pos = inner.substring(atIdx + 4).trim().split(/\s+/); cx = parseFloat(pos[0]) || 50; cy = parseFloat(pos[1]) || 50; } const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - ry } }, { type: SegmentType.Arc, relative: false, point: { x: cx + rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - ry } }, ]; return { segments, closed: true }; } private _serializeGeometry(geometry: IGeometry): string { const nonClose = geometry.segments.filter(s => s.type !== SegmentType.Close); if (nonClose.length === 0) return 'none'; const arcs = nonClose.filter(s => s.type === SegmentType.Arc); if (arcs.length >= 3 && arcs[0].arc) { const pts = nonClose; const top = pts[0].point; const right = pts[1].point; const bottom = pts[2].point; const left = pts[3].point; const cx = (right.x + left.x) / 2; const cy = (top.y + bottom.y) / 2; const finalRx = Math.abs(right.x - left.x) / 2; const finalRy = Math.abs(bottom.y - top.y) / 2; if (Math.abs(finalRx - finalRy) < 0.01) { return `circle(${finalRx}px at ${cx}px ${cy}px)`; } return `ellipse(${finalRx}px ${finalRy}px at ${cx}px ${cy}px)`; } const points = nonClose.map(s => `${s.point.x}px ${s.point.y}px`).join(', '); return `polygon(${points})`; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/GeometryReaderFactory.ts ================================================ import { IGeometryReader } from './IGeometry.js'; import { SvgPathGeometryReader } from './SvgPathGeometryReader.js'; import { SvgRectGeometryReader } from './SvgRectGeometryReader.js'; import { SvgLineGeometryReader } from './SvgLineGeometryReader.js'; import { SvgEllipseGeometryReader } from './SvgEllipseGeometryReader.js'; import { SvgCircleGeometryReader } from './SvgCircleGeometryReader.js'; import { SvgPolygonGeometryReader } from './SvgPolygonGeometryReader.js'; import { SvgPolylineGeometryReader } from './SvgPolylineGeometryReader.js'; const readerMap = new Map(); export function getGeometryReader(element: Element): IGeometryReader | undefined { if (element instanceof SVGPathElement) { if (!readerMap.has(SVGPathElement)) readerMap.set(SVGPathElement, new SvgPathGeometryReader()); return readerMap.get(SVGPathElement); } if (element instanceof SVGRectElement) { if (!readerMap.has(SVGRectElement)) readerMap.set(SVGRectElement, new SvgRectGeometryReader()); return readerMap.get(SVGRectElement); } if (element instanceof SVGLineElement) { if (!readerMap.has(SVGLineElement)) readerMap.set(SVGLineElement, new SvgLineGeometryReader()); return readerMap.get(SVGLineElement); } if (element instanceof SVGEllipseElement) { if (!readerMap.has(SVGEllipseElement)) readerMap.set(SVGEllipseElement, new SvgEllipseGeometryReader()); return readerMap.get(SVGEllipseElement); } if (element instanceof SVGCircleElement) { if (!readerMap.has(SVGCircleElement)) readerMap.set(SVGCircleElement, new SvgCircleGeometryReader()); return readerMap.get(SVGCircleElement); } if (element instanceof SVGPolygonElement) { if (!readerMap.has(SVGPolygonElement)) readerMap.set(SVGPolygonElement, new SvgPolygonGeometryReader()); return readerMap.get(SVGPolygonElement); } if (element instanceof SVGPolylineElement) { if (!readerMap.has(SVGPolylineElement)) readerMap.set(SVGPolylineElement, new SvgPolylineGeometryReader()); return readerMap.get(SVGPolylineElement); } return undefined; } const customReaders = new Map(); export function registerGeometryReader(key: string, reader: IGeometryReader) { customReaders.set(key, reader); } export function getCustomGeometryReader(key: string): IGeometryReader | null { return customReaders.get(key) ?? null; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/GeometryWriteHelper.ts ================================================ import { IDesignItem } from '../../../../../item/IDesignItem.js'; import { IGeometryWrite } from './IGeometry.js'; const numberPattern = /-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/gi; function hasStyleTarget(element: Element): element is Element & { style: CSSStyleDeclaration } { return 'style' in element; } export function roundValueToDecimalPlaces(value: number, decimalPlaces: number): string { if (decimalPlaces >= 0) { return value.toFixed(decimalPlaces); } return value.toString(); } export function roundNumericParts(value: string, decimalPlaces: number): string { if (decimalPlaces < 0) { return value; } return value.replace(numberPattern, numberText => roundValueToDecimalPlaces(Number(numberText), decimalPlaces)); } export function roundGeometryWrites(writes: IGeometryWrite[], decimalPlaces: number): IGeometryWrite[] { if (decimalPlaces < 0) { return writes; } return writes.map(write => ({ ...write, value: roundNumericParts(write.value, decimalPlaces) })); } export function applyGeometryWritesToElement(element: Element, writes: IGeometryWrite[], decimalPlaces = -1) { for (const write of roundGeometryWrites(writes, decimalPlaces)) { if (write.target === 'style' && hasStyleTarget(element)) { element.style.setProperty(write.attribute, write.value); } else { element.setAttribute(write.attribute, write.value); } } } export function applyGeometryWritesToDesignItem(designItem: IDesignItem, writes: IGeometryWrite[]) { const roundedWrites = roundGeometryWrites(writes, designItem.serviceContainer.options.roundPixelsToDecimalPlaces); for (const write of roundedWrites) { if (write.target === 'style') { designItem.setStyle(write.attribute, write.value); } else { designItem.setAttribute(write.attribute, write.value); } } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/IGeometry.ts ================================================ import { IPoint } from '../../../../../../interfaces/IPoint.js'; /** * Segment types supported by the geometry model. */ export enum SegmentType { Move = 'M', Line = 'L', CubicBezier = 'C', QuadraticBezier = 'Q', Arc = 'A', Close = 'Z', HorizontalLine = 'H', VerticalLine = 'V', SmoothCubic = 'S', SmoothQuadratic = 'T', } /** * A single segment in the geometry. All coordinates are stored as absolute values for internal editing. * The `relative` flag preserves whether the original command was relative. */ export interface IGeometrySegment { /** The segment type */ type: SegmentType; /** Whether the original command was relative (lowercase letter in SVG path) */ relative: boolean; /** The endpoint of this segment (absolute coordinates) */ point: IPoint; /** For cubic bezier: first control point (absolute) */ cp1?: IPoint; /** For cubic bezier: second control point (absolute). For quadratic bezier: the single control point. */ cp2?: IPoint; /** For arc segments */ arc?: { rx: number; ry: number; rotation: number; largeArc: boolean; sweep: boolean; }; } export type GeometryWriteTarget = 'attribute' | 'style'; export interface IGeometryWrite { attribute: string; value: string; target?: GeometryWriteTarget; } export interface IGeometrySerializationHint { target: GeometryWriteTarget; unit?: string; } /** * Abstraction over any editable geometry (SVG shapes, CSS shapes, etc.) */ export interface IGeometry { /** The segments describing this geometry */ segments: IGeometrySegment[]; /** Whether this geometry represents a closed shape */ closed: boolean; /** Optional write-back hints for readers that preserve style-vs-attribute storage */ serializationHints?: Record; } /** * Reads element attributes/properties into an IGeometry */ export interface IGeometryReader { /** Read the element's current geometry */ read(element: Element): IGeometry; /** Write the geometry back to the element as attribute string */ serialize(geometry: IGeometry): IGeometryWrite[]; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/SvgCircleGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; export class SvgCircleGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const el = element as SVGCircleElement; const cx = el.cx.baseVal.value; const cy = el.cy.baseVal.value; const r = el.r.baseVal.value; // Same as ellipse but rx == ry == r const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - r } }, { type: SegmentType.Arc, relative: false, point: { x: cx + r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - r, y: cy }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - r }, arc: { rx: r, ry: r, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - r } }, ]; return { segments, closed: true }; } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const pts = geometry.segments.filter(s => s.type !== SegmentType.Close); if (pts.length < 4) return []; const top = pts[0].point; const right = pts[1].point; const bottom = pts[2].point; const left = pts[3].point; const cx = (right.x + left.x) / 2; const cy = (top.y + bottom.y) / 2; const r = Math.max(Math.abs(right.x - left.x) / 2, Math.abs(bottom.y - top.y) / 2); return [ { attribute: 'cx', value: cx.toString() }, { attribute: 'cy', value: cy.toString() }, { attribute: 'r', value: r.toString() }, ]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/SvgEllipseGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; export class SvgEllipseGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const el = element as SVGEllipseElement; const cx = el.cx.baseVal.value; const cy = el.cy.baseVal.value; const rx = el.rx.baseVal.value; const ry = el.ry.baseVal.value; // Represent ellipse as 4 cardinal points (top, right, bottom, left) const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: cx, y: cy - ry } }, { type: SegmentType.Arc, relative: false, point: { x: cx + rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy + ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx - rx, y: cy }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Arc, relative: false, point: { x: cx, y: cy - ry }, arc: { rx, ry, rotation: 0, largeArc: false, sweep: true } }, { type: SegmentType.Close, relative: false, point: { x: cx, y: cy - ry } }, ]; return { segments, closed: true }; } serialize(geometry: IGeometry): { attribute: string; value: string }[] { // Reconstruct cx, cy, rx, ry from the cardinal points const pts = geometry.segments.filter(s => s.type !== SegmentType.Close); if (pts.length < 4) return []; // top=0, right=1, bottom=2, left=3 const top = pts[0].point; const right = pts[1].point; const bottom = pts[2].point; const left = pts[3].point; const cx = (right.x + left.x) / 2; const cy = (top.y + bottom.y) / 2; const rx = Math.abs(right.x - left.x) / 2; const ry = Math.abs(bottom.y - top.y) / 2; return [ { attribute: 'cx', value: cx.toString() }, { attribute: 'cy', value: cy.toString() }, { attribute: 'rx', value: rx.toString() }, { attribute: 'ry', value: ry.toString() }, ]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/SvgLineGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; export class SvgLineGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const line = element as SVGLineElement; const x1 = line.x1.baseVal.value; const y1 = line.y1.baseVal.value; const x2 = line.x2.baseVal.value; const y2 = line.y2.baseVal.value; const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x: x1, y: y1 } }, { type: SegmentType.Line, relative: false, point: { x: x2, y: y2 } }, ]; return { segments, closed: false }; } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const pts = geometry.segments.filter(s => s.type !== SegmentType.Close); if (pts.length < 2) return []; return [ { attribute: 'x1', value: pts[0].point.x.toString() }, { attribute: 'y1', value: pts[0].point.y.toString() }, { attribute: 'x2', value: pts[1].point.x.toString() }, { attribute: 'y2', value: pts[1].point.y.toString() }, ]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/SvgPathGeometryReader.ts ================================================ import { IPoint } from '../../../../../../interfaces/IPoint.js'; import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; import "../../../../../helper/PathDataPolyfill.js"; import { PathData, createPathD } from '../../../../../helper/PathDataPolyfill.js'; export class SvgPathGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const pathEl = element as SVGPathElement; const pathData: PathData[] = pathEl.getPathData({ normalize: false }); const segments: IGeometrySegment[] = []; let lastPos: IPoint = { x: 0, y: 0 }; let firstPos: IPoint = { x: 0, y: 0 }; let closed = false; for (const cmd of pathData) { const rel = cmd.type === cmd.type.toLowerCase(); const t = cmd.type.toUpperCase(); switch (t) { case 'M': { const x = rel ? lastPos.x + cmd.values[0] : cmd.values[0]; const y = rel ? lastPos.y + cmd.values[1] : cmd.values[1]; segments.push({ type: SegmentType.Move, relative: rel, point: { x, y } }); lastPos = { x, y }; firstPos = { x, y }; break; } case 'L': { const x = rel ? lastPos.x + cmd.values[0] : cmd.values[0]; const y = rel ? lastPos.y + cmd.values[1] : cmd.values[1]; segments.push({ type: SegmentType.Line, relative: rel, point: { x, y } }); lastPos = { x, y }; break; } case 'H': { const x = rel ? lastPos.x + cmd.values[0] : cmd.values[0]; segments.push({ type: SegmentType.HorizontalLine, relative: rel, point: { x, y: lastPos.y } }); lastPos = { x, y: lastPos.y }; break; } case 'V': { const y = rel ? lastPos.y + cmd.values[0] : cmd.values[0]; segments.push({ type: SegmentType.VerticalLine, relative: rel, point: { x: lastPos.x, y } }); lastPos = { x: lastPos.x, y }; break; } case 'C': { const cp1x = rel ? lastPos.x + cmd.values[0] : cmd.values[0]; const cp1y = rel ? lastPos.y + cmd.values[1] : cmd.values[1]; const cp2x = rel ? lastPos.x + cmd.values[2] : cmd.values[2]; const cp2y = rel ? lastPos.y + cmd.values[3] : cmd.values[3]; const x = rel ? lastPos.x + cmd.values[4] : cmd.values[4]; const y = rel ? lastPos.y + cmd.values[5] : cmd.values[5]; segments.push({ type: SegmentType.CubicBezier, relative: rel, point: { x, y }, cp1: { x: cp1x, y: cp1y }, cp2: { x: cp2x, y: cp2y } }); lastPos = { x, y }; break; } case 'S': { const cp2x = rel ? lastPos.x + cmd.values[0] : cmd.values[0]; const cp2y = rel ? lastPos.y + cmd.values[1] : cmd.values[1]; const x = rel ? lastPos.x + cmd.values[2] : cmd.values[2]; const y = rel ? lastPos.y + cmd.values[3] : cmd.values[3]; segments.push({ type: SegmentType.SmoothCubic, relative: rel, point: { x, y }, cp2: { x: cp2x, y: cp2y } }); lastPos = { x, y }; break; } case 'Q': { const cp1x = rel ? lastPos.x + cmd.values[0] : cmd.values[0]; const cp1y = rel ? lastPos.y + cmd.values[1] : cmd.values[1]; const x = rel ? lastPos.x + cmd.values[2] : cmd.values[2]; const y = rel ? lastPos.y + cmd.values[3] : cmd.values[3]; segments.push({ type: SegmentType.QuadraticBezier, relative: rel, point: { x, y }, cp1: { x: cp1x, y: cp1y } }); lastPos = { x, y }; break; } case 'T': { const x = rel ? lastPos.x + cmd.values[0] : cmd.values[0]; const y = rel ? lastPos.y + cmd.values[1] : cmd.values[1]; segments.push({ type: SegmentType.SmoothQuadratic, relative: rel, point: { x, y } }); lastPos = { x, y }; break; } case 'A': { const x = rel ? lastPos.x + cmd.values[5] : cmd.values[5]; const y = rel ? lastPos.y + cmd.values[6] : cmd.values[6]; segments.push({ type: SegmentType.Arc, relative: rel, point: { x, y }, arc: { rx: cmd.values[0], ry: cmd.values[1], rotation: cmd.values[2], largeArc: cmd.values[3] === 1, sweep: cmd.values[4] === 1 } }); lastPos = { x, y }; break; } case 'Z': { closed = true; segments.push({ type: SegmentType.Close, relative: rel, point: { ...firstPos } }); lastPos = { ...firstPos }; break; } } } return { segments, closed }; } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const pathData: PathData[] = []; let lastPos: IPoint = { x: 0, y: 0 }; for (const seg of geometry.segments) { const rel = seg.relative; switch (seg.type) { case SegmentType.Move: { const x = rel ? seg.point.x - lastPos.x : seg.point.x; const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 'm' : 'M', values: [x, y] } as any); lastPos = { ...seg.point }; break; } case SegmentType.Line: { const x = rel ? seg.point.x - lastPos.x : seg.point.x; const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 'l' : 'L', values: [x, y] } as any); lastPos = { ...seg.point }; break; } case SegmentType.HorizontalLine: { const x = rel ? seg.point.x - lastPos.x : seg.point.x; pathData.push({ type: rel ? 'h' : 'H', values: [x] } as any); lastPos = { ...seg.point }; break; } case SegmentType.VerticalLine: { const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 'v' : 'V', values: [y] } as any); lastPos = { ...seg.point }; break; } case SegmentType.CubicBezier: { const cp1x = rel ? seg.cp1.x - lastPos.x : seg.cp1.x; const cp1y = rel ? seg.cp1.y - lastPos.y : seg.cp1.y; const cp2x = rel ? seg.cp2.x - lastPos.x : seg.cp2.x; const cp2y = rel ? seg.cp2.y - lastPos.y : seg.cp2.y; const x = rel ? seg.point.x - lastPos.x : seg.point.x; const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 'c' : 'C', values: [cp1x, cp1y, cp2x, cp2y, x, y] } as any); lastPos = { ...seg.point }; break; } case SegmentType.SmoothCubic: { const cp2x = rel ? seg.cp2.x - lastPos.x : seg.cp2.x; const cp2y = rel ? seg.cp2.y - lastPos.y : seg.cp2.y; const x = rel ? seg.point.x - lastPos.x : seg.point.x; const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 's' : 'S', values: [cp2x, cp2y, x, y] } as any); lastPos = { ...seg.point }; break; } case SegmentType.QuadraticBezier: { const cp1x = rel ? seg.cp1.x - lastPos.x : seg.cp1.x; const cp1y = rel ? seg.cp1.y - lastPos.y : seg.cp1.y; const x = rel ? seg.point.x - lastPos.x : seg.point.x; const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 'q' : 'Q', values: [cp1x, cp1y, x, y] } as any); lastPos = { ...seg.point }; break; } case SegmentType.SmoothQuadratic: { const x = rel ? seg.point.x - lastPos.x : seg.point.x; const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 't' : 'T', values: [x, y] } as any); lastPos = { ...seg.point }; break; } case SegmentType.Arc: { const x = rel ? seg.point.x - lastPos.x : seg.point.x; const y = rel ? seg.point.y - lastPos.y : seg.point.y; pathData.push({ type: rel ? 'a' : 'A', values: [ seg.arc.rx, seg.arc.ry, seg.arc.rotation, seg.arc.largeArc ? 1 : 0, seg.arc.sweep ? 1 : 0, x, y ] } as any); lastPos = { ...seg.point }; break; } case SegmentType.Close: { pathData.push({ type: rel ? 'z' : 'Z', values: [] } as any); break; } } } return [{ attribute: 'd', value: createPathD(pathData) }]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/SvgPolygonGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; export class SvgPolygonGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const poly = element as SVGPolygonElement; const points = poly.points; const segments: IGeometrySegment[] = []; for (let i = 0; i < points.numberOfItems; i++) { const pt = points.getItem(i); if (i === 0) { segments.push({ type: SegmentType.Move, relative: false, point: { x: pt.x, y: pt.y } }); } else { segments.push({ type: SegmentType.Line, relative: false, point: { x: pt.x, y: pt.y } }); } } if (segments.length > 0) { segments.push({ type: SegmentType.Close, relative: false, point: { ...segments[0].point } }); } return { segments, closed: true }; } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const pts = geometry.segments.filter(s => s.type !== SegmentType.Close); const pointsStr = pts.map(s => `${s.point.x},${s.point.y}`).join(' '); return [{ attribute: 'points', value: pointsStr }]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/SvgPolylineGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, SegmentType } from './IGeometry.js'; export class SvgPolylineGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const poly = element as SVGPolylineElement; const points = poly.points; const segments: IGeometrySegment[] = []; for (let i = 0; i < points.numberOfItems; i++) { const pt = points.getItem(i); if (i === 0) { segments.push({ type: SegmentType.Move, relative: false, point: { x: pt.x, y: pt.y } }); } else { segments.push({ type: SegmentType.Line, relative: false, point: { x: pt.x, y: pt.y } }); } } return { segments, closed: false }; } serialize(geometry: IGeometry): { attribute: string; value: string }[] { const pts = geometry.segments.filter(s => s.type !== SegmentType.Close); const pointsStr = pts.map(s => `${s.point.x},${s.point.y}`).join(' '); return [{ attribute: 'points', value: pointsStr }]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/svg/geometry/SvgRectGeometryReader.ts ================================================ import { IGeometry, IGeometryReader, IGeometrySegment, IGeometrySerializationHint, IGeometryWrite, SegmentType } from './IGeometry.js'; const rectGeometryProperties = ['x', 'y', 'width', 'height'] as const; type RectGeometryProperty = typeof rectGeometryProperties[number]; function getRectSerializationHint(rect: SVGRectElement, property: RectGeometryProperty): IGeometrySerializationHint { const styleValue = rect.style.getPropertyValue(property).trim(); if (styleValue) { return { target: 'style', unit: extractStyleUnit(styleValue) }; } return { target: 'attribute' }; } function extractStyleUnit(value: string): string { const match = value.trim().match(/^-?(?:\d+|\d*\.\d+)([a-z%]*)$/i); if (match && match[1]) { return match[1]; } return 'px'; } function serializeRectValue(property: RectGeometryProperty, value: number, hints?: IGeometry['serializationHints']): IGeometryWrite { const hint = hints?.[property]; if (hint?.target === 'style') { return { attribute: property, value: `${value}${hint.unit ?? 'px'}`, target: 'style' }; } return { attribute: property, value: value.toString() }; } export class SvgRectGeometryReader implements IGeometryReader { read(element: Element): IGeometry { const rect = element as SVGRectElement; const bbox = rect.getBBox(); const x = bbox.x; const y = bbox.y; const w = bbox.width; const h = bbox.height; const segments: IGeometrySegment[] = [ { type: SegmentType.Move, relative: false, point: { x, y } }, { type: SegmentType.Line, relative: false, point: { x: x + w, y } }, { type: SegmentType.Line, relative: false, point: { x: x + w, y: y + h } }, { type: SegmentType.Line, relative: false, point: { x, y: y + h } }, { type: SegmentType.Close, relative: false, point: { x, y } }, ]; const serializationHints = Object.fromEntries( rectGeometryProperties.map(property => [property, getRectSerializationHint(rect, property)]) ); return { segments, closed: true, serializationHints }; } serialize(geometry: IGeometry): IGeometryWrite[] { const pts = geometry.segments.filter(s => s.type !== SegmentType.Close); if (pts.length < 2) return []; const xs = pts.map(p => p.point.x); const ys = pts.map(p => p.point.y); const minX = Math.min(...xs); const minY = Math.min(...ys); const maxX = Math.max(...xs); const maxY = Math.max(...ys); return [ serializeRectValue('x', minX, geometry.serializationHints), serializeRectValue('y', minY, geometry.serializationHints), serializeRectValue('width', maxX - minX, geometry.serializationHints), serializeRectValue('height', maxY - minY, geometry.serializationHints), ]; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/ProjectiveTransformExtension.ts ================================================ import { EventNames } from '../../../../../enums/EventNames.js'; import { IPoint } from '../../../../../interfaces/IPoint.js'; import { getElementSize } from '../../../../helper/getBoxQuads.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; type QuadCornerIndex = 0 | 1 | 2 | 3; export class ProjectiveTransformExtension extends AbstractExtension { private _outline?: SVGPathElement; private _handles: SVGCircleElement[] = []; private _handleCrossHorizontalLines: SVGLineElement[] = []; private _handleCrossVerticalLines: SVGLineElement[] = []; private _activeHandleIndex: QuadCornerIndex | null = null; private _baseTransform = ''; private _projectiveTransform = ''; private _targetPoints: IPoint[] = []; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const transformedCornerPoints = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!transformedCornerPoints) { return; } const points = [transformedCornerPoints.p1, transformedCornerPoints.p2, transformedCornerPoints.p3, transformedCornerPoints.p4]; if (points.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y))) { this.remove(); return; } if (this._valuesHaveChanges(this.designerCanvas.zoomFactor, ...points.flatMap(point => [point.x, point.y]))) { this._outline = this._drawTransformedRect(transformedCornerPoints, 'svg-primary-projective-outline', this._outline); this._outline.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); this._outline.style.pointerEvents = 'none'; const radius = 5 / this.designerCanvas.zoomFactor; const crossRadius = radius * 0.55; for (let index = 0; index < points.length; index++) { const cornerIndex = index as QuadCornerIndex; const point = points[index]; let handle = this._handles[index]; if (!handle) { handle = this._drawCircle(point.x, point.y, radius, 'svg-primary-projective-handle'); handle.addEventListener(EventNames.PointerDown, event => this._handlePointerEvent(cornerIndex, event)); handle.addEventListener(EventNames.PointerMove, event => this._handlePointerEvent(cornerIndex, event)); handle.addEventListener(EventNames.PointerUp, event => this._handlePointerEvent(cornerIndex, event)); this._handles[index] = handle; } else { handle = this._drawCircle(point.x, point.y, radius, 'svg-primary-projective-handle', handle); this._handles[index] = handle; } handle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); handle.style.cursor = 'move'; let horizontalLine = this._handleCrossHorizontalLines[index]; horizontalLine = this._drawLine(point.x - crossRadius, point.y, point.x + crossRadius, point.y, 'svg-primary-projective-handle-cross', horizontalLine); horizontalLine.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); horizontalLine.style.pointerEvents = 'none'; this._handleCrossHorizontalLines[index] = horizontalLine; let verticalLine = this._handleCrossVerticalLines[index]; verticalLine = this._drawLine(point.x, point.y - crossRadius, point.x, point.y + crossRadius, 'svg-primary-projective-handle-cross', verticalLine); verticalLine.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); verticalLine.style.pointerEvents = 'none'; this._handleCrossVerticalLines[index] = verticalLine; } } } override dispose() { this._activeHandleIndex = null; this._restorePersistedTransform(); this._removeAllOverlays(); } private _handlePointerEvent(index: QuadCornerIndex, event: PointerEvent) { event.stopPropagation(); const target = event.target as Element; switch (event.type) { case EventNames.PointerDown: if (!this._startDrag(index)) { return; } target.setPointerCapture(event.pointerId); this._activeHandleIndex = index; break; case EventNames.PointerMove: if (this._activeHandleIndex === index && event.buttons > 0) { const localPoint = this._getLocalPointerPoint(event); if (!localPoint) { return; } this._targetPoints[index] = localPoint; this._applyPreviewTransform(); } break; case EventNames.PointerUp: if (this._activeHandleIndex === index) { const localPoint = this._getLocalPointerPoint(event); if (localPoint) { this._targetPoints[index] = localPoint; this._applyPreviewTransform(); } target.releasePointerCapture(event.pointerId); this._commitTransform(); this._activeHandleIndex = null; } break; } } private _startDrag(index: QuadCornerIndex) { const { baseTransform, projectiveTransform } = this._parseTransform(this.extendedItem.getStyleFromSheetOrLocal('transform') ?? ''); this._baseTransform = baseTransform; this._projectiveTransform = projectiveTransform; const currentQuad = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!currentQuad) { return false; } const element = this.extendedItem.element as HTMLElement; element.style.transform = this._buildTransform(this._baseTransform, ''); this._targetPoints = this._convertQuadToLocalPoints(currentQuad); if (this._targetPoints.length !== 4 || this._targetPoints.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y))) { this._restorePersistedTransform(); return false; } element.style.transform = this._buildTransform(this._baseTransform, this._projectiveTransform); return this._targetPoints[index] != null; } private _convertQuadToLocalPoints(quad: DOMQuad) { return [quad.p1, quad.p2, quad.p3, quad.p4].map(point => { const localPoint = this.extendedItem.element.convertPointFromNode({ x: point.x, y: point.y }, this.designerCanvas.canvas); return { x: localPoint.x, y: localPoint.y }; }); } private _getLocalPointerPoint(event: PointerEvent) { const element = this.extendedItem.element as HTMLElement; const previewTransform = element.style.transform; element.style.transform = this._buildTransform(this._baseTransform, ''); const mousePoint = this.designerCanvas.getNormalizedEventCoordinates(event); const localPoint = element.convertPointFromNode({ x: mousePoint.x, y: mousePoint.y }, this.designerCanvas.canvas); element.style.transform = previewTransform; if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) { return null; } return { x: localPoint.x, y: localPoint.y }; } private _applyPreviewTransform() { const projectiveTransform = this._buildProjectiveTransform(this._targetPoints); if (projectiveTransform == null) { return; } this._projectiveTransform = projectiveTransform; (this.extendedItem.element as HTMLElement).style.transform = this._buildTransform(this._baseTransform, this._projectiveTransform); } private _commitTransform() { const projectiveTransform = this._buildProjectiveTransform(this._targetPoints); if (projectiveTransform != null) { this._projectiveTransform = projectiveTransform; } const finalTransform = this._buildTransform(this._baseTransform, this._projectiveTransform); if (finalTransform) { this.extendedItem.updateStyleInSheetOrLocal('transform', finalTransform); } else if (this.extendedItem.hasStyle('transform')) { this.extendedItem.removeStyle('transform'); } else { this.extendedItem.updateStyleInSheetOrLocal('transform', null); } this._restorePersistedTransform(); } private _restorePersistedTransform() { const element = this.extendedItem.element as HTMLElement; if (this.extendedItem.hasStyle('transform')) { element.style.transform = this.extendedItem.getStyle('transform') ?? ''; } else { element.style.transform = ''; } } private _buildProjectiveTransform(points: IPoint[]) { const size = getElementSize(this.extendedItem.element); if (!size.width || !size.height || points.length !== 4) { return ''; } const sourcePoints: IPoint[] = [ { x: 0, y: 0 }, { x: size.width, y: 0 }, { x: size.width, y: size.height }, { x: 0, y: size.height } ]; if (this._pointsApproximatelyEqual(points, sourcePoints)) { return ''; } const matrix = this._createProjectiveMatrix(points, size.width, size.height); if (!matrix) { return null; } const transformOrigin = getComputedStyle(this.extendedItem.element).transformOrigin.split(' '); const origin = { x: parseFloat(transformOrigin[0]) || 0, y: parseFloat(transformOrigin[1]) || 0 }; const correctedMatrix = new DOMMatrix() .translate(-origin.x, -origin.y) .multiply(matrix) .multiply(new DOMMatrix().translate(origin.x, origin.y)); return this._serializeMatrix3d(correctedMatrix); } private _createProjectiveMatrix(points: IPoint[], width: number, height: number) { const [p1, p2, p3, p4] = points; const dx1 = p2.x - p3.x; const dx2 = p4.x - p3.x; const dx3 = p1.x - p2.x + p3.x - p4.x; const dy1 = p2.y - p3.y; const dy2 = p4.y - p3.y; const dy3 = p1.y - p2.y + p3.y - p4.y; let aUnit: number; let bUnit: number; let dUnit: number; let eUnit: number; let gUnit: number; let hUnit: number; if (Math.abs(dx3) < 1e-8 && Math.abs(dy3) < 1e-8) { aUnit = p2.x - p1.x; bUnit = p4.x - p1.x; dUnit = p2.y - p1.y; eUnit = p4.y - p1.y; gUnit = 0; hUnit = 0; } else { const determinant = dx1 * dy2 - dx2 * dy1; if (Math.abs(determinant) < 1e-8) { return null; } gUnit = (dx3 * dy2 - dx2 * dy3) / determinant; hUnit = (dx1 * dy3 - dx3 * dy1) / determinant; aUnit = p2.x - p1.x + gUnit * p2.x; bUnit = p4.x - p1.x + hUnit * p4.x; dUnit = p2.y - p1.y + gUnit * p2.y; eUnit = p4.y - p1.y + hUnit * p4.y; } const matrix = new DOMMatrix([ aUnit / width, dUnit / width, 0, gUnit / width, bUnit / height, eUnit / height, 0, hUnit / height, 0, 0, 1, 0, p1.x, p1.y, 0, 1 ]); const values = [ matrix.m11, matrix.m12, matrix.m13, matrix.m14, matrix.m21, matrix.m22, matrix.m23, matrix.m24, matrix.m31, matrix.m32, matrix.m33, matrix.m34, matrix.m41, matrix.m42, matrix.m43, matrix.m44 ]; if (values.some(value => !Number.isFinite(value))) { return null; } return matrix; } private _serializeMatrix3d(matrix: DOMMatrix) { const values = [ matrix.m11, matrix.m12, matrix.m13, matrix.m14, matrix.m21, matrix.m22, matrix.m23, matrix.m24, matrix.m31, matrix.m32, matrix.m33, matrix.m34, matrix.m41, matrix.m42, matrix.m43, matrix.m44 ].map(value => this._formatMatrixNumber(value)); return `matrix3d(${values.join(', ')})`; } private _formatMatrixNumber(value: number) { if (Math.abs(value) < 1e-10) { return '0'; } let rounded = value.toFixed(8); if (rounded.includes('.')) { rounded = rounded.replace(/0+$/, '').replace(/\.$/, ''); } return rounded === '-0' ? '0' : rounded; } private _buildTransform(baseTransform: string, projectiveTransform: string) { const transforms: string[] = []; if (baseTransform?.trim()) { transforms.push(baseTransform.trim()); } if (projectiveTransform?.trim()) { transforms.push(projectiveTransform.trim()); } return transforms.join(' ').trim(); } private _parseTransform(transform: string) { if (!transform || transform === 'none') { return { baseTransform: '', projectiveTransform: '' }; } const parts = this._splitTransformFunctions(transform); if (!parts.length) { return { baseTransform: transform.trim(), projectiveTransform: '' }; } const lastPart = parts[parts.length - 1]; const functionName = lastPart.slice(0, lastPart.indexOf('(')).trim().toLowerCase(); if (functionName === 'matrix' || functionName === 'matrix3d') { return { baseTransform: parts.slice(0, -1).join(' ').trim(), projectiveTransform: lastPart.trim() }; } return { baseTransform: transform.trim(), projectiveTransform: '' }; } private _splitTransformFunctions(transform: string) { const parts: string[] = []; let startIndex = -1; let depth = 0; for (let index = 0; index < transform.length; index++) { const character = transform[index]; if (character === '(') { depth++; } else if (character === ')') { depth--; if (depth === 0 && startIndex !== -1) { parts.push(transform.slice(startIndex, index + 1).trim()); startIndex = -1; } } else if (depth === 0 && startIndex === -1 && character.trim()) { startIndex = index; } } if (!parts.length && transform.trim()) { parts.push(transform.trim()); } return parts; } private _pointsApproximatelyEqual(pointsA: IPoint[], pointsB: IPoint[]) { if (pointsA.length !== pointsB.length) { return false; } return pointsA.every((point, index) => { const compareTo = pointsB[index]; return Math.abs(point.x - compareTo.x) < 0.01 && Math.abs(point.y - compareTo.y) < 0.01; }); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/ProjectiveTransformExtensionProvider.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { ProjectiveTransformExtension } from './ProjectiveTransformExtension.js'; export class ProjectiveTransformExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designerCanvas.readOnly) { return false; } if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) { return false; } return !designItem.isRootItem; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new ProjectiveTransformExtension(extensionManager, designerCanvas, designItem); } static readonly style = css` .svg-primary-projective-handle { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; } .svg-primary-projective-handle-cross { stroke: #3899ec; fill: none; stroke-width: 1; stroke-linecap: round; pointer-events: none; } .svg-primary-projective-outline { stroke: #3899ec; fill: none; stroke-width: 1; stroke-dasharray: 4 2; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/RotateExtension.ts ================================================ import { IPoint } from '../../../../../interfaces/IPoint.js'; import { hasCommandKey } from '../../../../helper/KeyboardHelper.js'; import { roundValue } from '../../../../helper/LayoutHelper.js'; import { getElementSize } from '../../../../helper/getBoxQuads.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { getEdgeOffsetPoint, getQuadCenter } from '../../../../helper/QuadEdgeHandleHelper.js'; export class RotateExtension extends AbstractExtension { private _rotateLine?: SVGLineElement; private _rotateCircle?: SVGCircleElement; private _startPoint: IPoint | null = null; private _rotateCirclePosition: IPoint = { x: 0, y: 0 }; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const quad = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!quad) { return; } const points = [quad.p1, quad.p2, quad.p3, quad.p4]; if (points.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y))) { this.remove(); return; } if (!this._valuesHaveChanges(this.designerCanvas.zoomFactor, ...points.flatMap(point => [point.x, point.y]))) { return; } const quadCenter = getQuadCenter(quad); const handlePoint = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 30 / this.designerCanvas.zoomFactor, { x: 0, y: -1 }); const lineStart = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 22 / this.designerCanvas.zoomFactor, { x: 0, y: -1 }); const lineEnd = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 6 / this.designerCanvas.zoomFactor, { x: 0, y: -1 }); this._rotateLine = this._drawLine(lineStart.x, lineStart.y, lineEnd.x, lineEnd.y, 'svg-primary-rotate-line', this._rotateLine); this._rotateLine.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); if (!this._rotateCircle) { this._rotateCircle = this._drawCircle(handlePoint.x, handlePoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-primary-rotate', this._rotateCircle); this._rotateCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); this._rotateCircle.addEventListener("pointerdown", e => { e.stopPropagation(); this._rotateCirclePosition = this._getRotateReferencePoint(); (e.target).setPointerCapture(e.pointerId); let mp = this.designerCanvas.getNormalizedEventCoordinates(e); this._startPoint = this.extendedItem.element.convertPointFromNode({ x: mp.x, y: mp.y }, this.designerCanvas.canvas); }); this._rotateCircle.addEventListener("pointermove", e => { e.stopPropagation(); if (this._startPoint) { //@ts-ignore this.extendedItem.element.style.rotate = 'none'; //@ts-ignore this.extendedItem.element.style.rotate = this.getAngle(e) + 'deg'; } }); this._rotateCircle.addEventListener("pointerup", e => { e.stopPropagation(); (e.target).releasePointerCapture(e.pointerId); this._startPoint = null; //@ts-ignore this.extendedItem.element.style.rotate = 'none'; this.extendedItem.setStyle('rotate', this.getAngle(e) + 'deg') }); } else { this._rotateCircle = this._drawCircle(handlePoint.x, handlePoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-primary-rotate', this._rotateCircle); this._rotateCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); } } private _getRotateReferencePoint() { const element = this.extendedItem.element as HTMLElement; const size = getElementSize(this.extendedItem.element); const fallback = { x: size.width / 2, y: -30 / this.designerCanvas.zoomFactor }; const inlineRotate = element.style.rotate; try { element.style.rotate = 'none'; const quad = element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!quad) { return fallback; } const quadCenter = getQuadCenter(quad); const handlePoint = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 30 / this.designerCanvas.zoomFactor, { x: 0, y: -1 }); const localPoint = element.convertPointFromNode(handlePoint, this.designerCanvas.canvas); if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) { return fallback; } return { x: localPoint.x, y: localPoint.y }; } finally { element.style.rotate = inlineRotate; } } getAngle(e: MouseEvent) { let mp = this.designerCanvas.getNormalizedEventCoordinates(e); let p1 = { x: mp.x, y: mp.y }; let p1t = this.extendedItem.element.convertPointFromNode(p1, this.designerCanvas.canvas); const cs = getComputedStyle(this.extendedItem.element); const orig = cs.transformOrigin.split(' '); const pOrg = { x: parseFloat(orig[0]), y: parseFloat(orig[1]) }; const angleFromRotatingPoint = (Math.atan2(this._rotateCirclePosition.y - pOrg.y, this._rotateCirclePosition.x - pOrg.x) * 180 / Math.PI) + 90; let angle = (Math.atan2(p1t.y - pOrg.y, p1t.x - pOrg.x) * 180 / Math.PI) + 90 - angleFromRotatingPoint; if (!hasCommandKey(e)) angle = Math.round(angle / 15) * 15; return roundValue(this.extendedItem, angle); } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/RotateExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { RotateExtension } from './RotateExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class RotateExtensionProvider implements IDesignerExtensionProvider { public type: 'center-top' | 'corners'; constructor(type: 'center-top' | 'corners' = 'center-top') { this.type = type; } shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designerCanvas.readOnly) return false; if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) { return false; } return !designItem.isRootItem; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new RotateExtension(extensionManager, designerCanvas, designItem); } static readonly style = css` .svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; cursor: alias; } .svg-primary-rotate-transparent { fill: transparent; pointer-events: auto; cursor: alias; } .svg-primary-rotate-line { stroke: #3899ec; fill: #3899ec; stroke-width: 1; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/RotateGroupExtension.ts ================================================ import { IPoint } from '../../../../../interfaces/IPoint.js'; import { hasCommandKey } from '../../../../helper/KeyboardHelper.js'; import { filterChildPlaceItems, roundValue } from '../../../../helper/LayoutHelper.js'; import { calculateOuterRect } from '../../../../helper/ElementHelper.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; interface ElementStartState { item: IDesignItem; rotation: number; centerX: number; centerY: number; cssHalfWidth: number; // half of CSS width (not visual bounding box — matters for pre-rotated elements) cssHalfHeight: number; parentX: number; parentY: number; parentWidth: number; parentHeight: number; usesRight: boolean; usesBottom: boolean; } export class RotateGroupExtension extends AbstractExtension { private _rotateLine: SVGLineElement; private _rotateCircle: SVGCircleElement; // rotating rect overlay (only visible during drag) private _rectLine1: SVGLineElement; private _rectLine2: SVGLineElement; private _rectLine3: SVGLineElement; private _rectLine4: SVGLineElement; private _initialCorners: IPoint[]; // drag-start state private _startAngle: number; private _groupCenter: IPoint; private _initialHandleX: number; private _initialHandleY: number; private _initialLineX1: number; private _initialLineY1: number; private _initialLineX2: number; private _initialLineY2: number; private _currentDelta: number = 0; private _elementStartStates: ElementStartState[]; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const selection = filterChildPlaceItems( this.designerCanvas.instanceServiceContainer.selectionService.selectedElements ); if (selection.length < 2) return; let handleX: number, handleY: number; let lineX1: number, lineY1: number, lineX2: number, lineY2: number; if (this._elementStartStates) { // During drag: rotate all control points around the fixed group center const rad = this._currentDelta * Math.PI / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); const rx = (x: number, y: number) => this._groupCenter.x + (x - this._groupCenter.x) * cos - (y - this._groupCenter.y) * sin; const ry = (x: number, y: number) => this._groupCenter.y + (x - this._groupCenter.x) * sin + (y - this._groupCenter.y) * cos; handleX = rx(this._initialHandleX, this._initialHandleY); handleY = ry(this._initialHandleX, this._initialHandleY); lineX1 = rx(this._initialLineX1, this._initialLineY1); lineY1 = ry(this._initialLineX1, this._initialLineY1); lineX2 = rx(this._initialLineX2, this._initialLineY2); lineY2 = ry(this._initialLineX2, this._initialLineY2); // Rotate the four bounding-box corners and draw the rect overlay const c = this._initialCorners; const corners = c.map(p => ({ x: rx(p.x, p.y), y: ry(p.x, p.y) })); const sw = (2 / this.designerCanvas.zoomFactor).toString(); this._rectLine1 = this._drawLine(corners[0].x, corners[0].y, corners[1].x, corners[1].y, 'svg-rotate-group-rect', this._rectLine1); this._rectLine2 = this._drawLine(corners[1].x, corners[1].y, corners[2].x, corners[2].y, 'svg-rotate-group-rect', this._rectLine2); this._rectLine3 = this._drawLine(corners[2].x, corners[2].y, corners[3].x, corners[3].y, 'svg-rotate-group-rect', this._rectLine3); this._rectLine4 = this._drawLine(corners[3].x, corners[3].y, corners[0].x, corners[0].y, 'svg-rotate-group-rect', this._rectLine4); this._rectLine1.style.strokeWidth = sw; this._rectLine2.style.strokeWidth = sw; this._rectLine3.style.strokeWidth = sw; this._rectLine4.style.strokeWidth = sw; } else { if (this._rectLine1) { this._rectLine1.style.display = 'none'; this._rectLine2.style.display = 'none'; this._rectLine3.style.display = 'none'; this._rectLine4.style.display = 'none'; } // Idle: position above the bounding box center const outerRect = calculateOuterRect(selection, this.designerCanvas); const cx = outerRect.x + outerRect.width / 2; const top = outerRect.y; handleX = cx; handleY = top - 30 / this.designerCanvas.zoomFactor; lineX1 = cx; lineY1 = top - 22 / this.designerCanvas.zoomFactor; lineX2 = cx; lineY2 = top - 6 / this.designerCanvas.zoomFactor; } this._rotateLine = this._drawLine(lineX1, lineY1, lineX2, lineY2, 'svg-primary-rotate-line', this._rotateLine); this._rotateLine.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); if (!this._rotateCircle) { this._rotateCircle = this._drawCircle(handleX, handleY, 5 / this.designerCanvas.zoomFactor, 'svg-primary-rotate', this._rotateCircle); this._rotateCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); this._rotateCircle.addEventListener('pointerdown', e => { e.stopPropagation(); (e.target).setPointerCapture(e.pointerId); const currentSelection = filterChildPlaceItems( this.designerCanvas.instanceServiceContainer.selectionService.selectedElements ); const outerRect = calculateOuterRect(currentSelection, this.designerCanvas); const cx = outerRect.x + outerRect.width / 2; const top = outerRect.y; this._groupCenter = { x: cx, y: outerRect.y + outerRect.height / 2, }; // Store control point positions as canvas coords so they can be rotated during drag this._initialHandleX = cx; this._initialHandleY = top - 30 / this.designerCanvas.zoomFactor; this._initialLineX1 = cx; this._initialLineY1 = top - 22 / this.designerCanvas.zoomFactor; this._initialLineX2 = cx; this._initialLineY2 = top - 6 / this.designerCanvas.zoomFactor; // Capture the four corners of the bounding rect for the rotating overlay this._initialCorners = [ { x: outerRect.x, y: outerRect.y }, { x: outerRect.x + outerRect.width, y: outerRect.y }, { x: outerRect.x + outerRect.width, y: outerRect.y + outerRect.height }, { x: outerRect.x, y: outerRect.y + outerRect.height }, ]; // Show rect lines if they were hidden from a previous drag if (this._rectLine1) { this._rectLine1.style.display = ''; this._rectLine2.style.display = ''; this._rectLine3.style.display = ''; this._rectLine4.style.display = ''; } const mp = this.designerCanvas.getNormalizedEventCoordinates(e); this._startAngle = Math.atan2(mp.y - this._groupCenter.y, mp.x - this._groupCenter.x); this._currentDelta = 0; this._elementStartStates = currentSelection.map(item => { const coords = this.designerCanvas.getNormalizedElementCoordinates(item.element); const parent = this.designerCanvas.getNormalizedElementCoordinates(item.parent.element); const rotateStr = item.getStyle('rotate') ?? '0deg'; const rotation = parseFloat(rotateStr) || 0; // getBoundingClientRect returns the visual (rotated) bounding box. For position // calculations we need the actual CSS dimensions (unrotated box), otherwise // pre-rotated elements would be placed incorrectly. const cs = getComputedStyle(item.element); const cssHalfWidth = parseFloat(cs.width) / 2; const cssHalfHeight = parseFloat(cs.height) / 2; return { item, rotation, centerX: coords.x + coords.width / 2, centerY: coords.y + coords.height / 2, cssHalfWidth, cssHalfHeight, parentX: parent.x, parentY: parent.y, parentWidth: parent.width, parentHeight: parent.height, usesRight: item.hasStyle('right') && !item.hasStyle('left'), usesBottom: item.hasStyle('bottom') && !item.hasStyle('top'), }; }); }); this._rotateCircle.addEventListener('pointermove', e => { e.stopPropagation(); if (!this._elementStartStates) return; this._currentDelta = this._getDelta(e); for (const state of this._elementStartStates) { this._applyRotation(state, this._currentDelta, false); } }); this._rotateCircle.addEventListener('pointerup', e => { e.stopPropagation(); (e.target).releasePointerCapture(e.pointerId); if (!this._elementStartStates) return; const delta = this._getDelta(e); const grp = this.designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateGroup'); for (const state of this._elementStartStates) { this._applyRotation(state, delta, true); } grp.commit(); this._elementStartStates = null; this._currentDelta = 0; }); } else { this._rotateCircle = this._drawCircle(handleX, handleY, 5 / this.designerCanvas.zoomFactor, 'svg-primary-rotate', this._rotateCircle); this._rotateCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); } } private _getDelta(e: MouseEvent): number { const mp = this.designerCanvas.getNormalizedEventCoordinates(e); const currentAngle = Math.atan2(mp.y - this._groupCenter.y, mp.x - this._groupCenter.x); let delta = (currentAngle - this._startAngle) * 180 / Math.PI; // Normalize to (-180, 180] to avoid jumps when crossing the ±180° boundary delta = ((delta + 180) % 360 + 360) % 360 - 180; if (!hasCommandKey(e)) delta = Math.round(delta / 15) * 15; return delta; } private _applyRotation(state: ElementStartState, deltaAngle: number, commit: boolean) { const rad = deltaAngle * Math.PI / 180; const cos = Math.cos(rad); const sin = Math.sin(rad); const dx = state.centerX - this._groupCenter.x; const dy = state.centerY - this._groupCenter.y; const newCenterX = this._groupCenter.x + dx * cos - dy * sin; const newCenterY = this._groupCenter.y + dx * sin + dy * cos; const newRotation = roundValue(state.item, state.rotation + deltaAngle); const newLeft = newCenterX - state.cssHalfWidth - state.parentX; const newTop = newCenterY - state.cssHalfHeight - state.parentY; const newRight = state.parentX + state.parentWidth - newCenterX - state.cssHalfWidth; const newBottom = state.parentY + state.parentHeight - newCenterY - state.cssHalfHeight; if (commit) { if (state.usesRight) state.item.setStyle('right', newRight + 'px'); else state.item.setStyle('left', newLeft + 'px'); if (state.usesBottom) state.item.setStyle('bottom', newBottom + 'px'); else state.item.setStyle('top', newTop + 'px'); state.item.setStyle('rotate', newRotation + 'deg'); } else { const el = state.item.element; if (state.usesRight) el.style.right = newRight + 'px'; else el.style.left = newLeft + 'px'; if (state.usesBottom) el.style.bottom = newBottom + 'px'; else el.style.top = newTop + 'px'; //@ts-ignore el.style.rotate = newRotation + 'deg'; } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/RotateGroupExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { RotateGroupExtension } from './RotateGroupExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; export class RotateGroupExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designerCanvas.readOnly) return false; if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) return false; return !designItem.isRootItem; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new RotateGroupExtension(extensionManager, designerCanvas, designItem); } static readonly style = css` .svg-primary-rotate { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; cursor: alias; } .svg-primary-rotate-line { stroke: #3899ec; fill: #3899ec; stroke-width: 1; } .svg-rotate-group-rect { stroke: #3899ec; fill: transparent; stroke-width: 2; stroke-dasharray: 5 3; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/SkewExtension.ts ================================================ import { IPoint } from '../../../../../interfaces/IPoint.js'; import { hasCommandKey } from '../../../../helper/KeyboardHelper.js'; import { roundValue } from '../../../../helper/LayoutHelper.js'; import { getElementSize } from '../../../../helper/getBoxQuads.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { getEdgeOffsetPoint, getQuadCenter } from '../../../../helper/QuadEdgeHandleHelper.js'; type SkewAxis = 'x' | 'y'; export class SkewExtension extends AbstractExtension { private _skewXLine?: SVGLineElement; private _skewYLine?: SVGLineElement; private _skewXCircle?: SVGCircleElement; private _skewYCircle?: SVGCircleElement; private _skewXReferencePoint: IPoint = { x: 0, y: 0 }; private _skewYReferencePoint: IPoint = { x: 0, y: 0 }; private _activeAxis: SkewAxis | null = null; private _baseTransform = ''; private _skewX = 0; private _skewY = 0; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const quad = this.extendedItem.element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!quad) { return; } const points = [quad.p1, quad.p2, quad.p3, quad.p4]; if (points.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y))) { this.remove(); return; } const zoomFactor = this.designerCanvas.zoomFactor; if (!this._valuesHaveChanges(zoomFactor, ...points.flatMap(point => [point.x, point.y]))) { return; } const quadCenter = getQuadCenter(quad); const skewXHandleCanvas = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 56 / zoomFactor, { x: 0, y: -1 }); const skewXLineStartCanvas = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 48 / zoomFactor, { x: 0, y: -1 }); const skewXLineEndCanvas = getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 38 / zoomFactor, { x: 0, y: -1 }); const skewYHandleCanvas = getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 30 / zoomFactor, { x: 1, y: 0 }); const skewYLineStartCanvas = getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 22 / zoomFactor, { x: 1, y: 0 }); const skewYLineEndCanvas = getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 6 / zoomFactor, { x: 1, y: 0 }); this._skewXLine = this._drawLine(skewXLineStartCanvas.x, skewXLineStartCanvas.y, skewXLineEndCanvas.x, skewXLineEndCanvas.y, 'svg-primary-skew-line', this._skewXLine); this._skewYLine = this._drawLine(skewYLineStartCanvas.x, skewYLineStartCanvas.y, skewYLineEndCanvas.x, skewYLineEndCanvas.y, 'svg-primary-skew-line', this._skewYLine); this._skewXLine.style.strokeWidth = (1 / zoomFactor).toString(); this._skewYLine.style.strokeWidth = (1 / zoomFactor).toString(); if (!this._skewXCircle) { this._skewXCircle = this._drawCircle(skewXHandleCanvas.x, skewXHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewXCircle); this._skewXCircle.addEventListener('pointerdown', event => this._handlePointerEvent('x', event)); this._skewXCircle.addEventListener('pointermove', event => this._handlePointerEvent('x', event)); this._skewXCircle.addEventListener('pointerup', event => this._handlePointerEvent('x', event)); } else { this._skewXCircle = this._drawCircle(skewXHandleCanvas.x, skewXHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewXCircle); } this._skewXCircle.style.strokeWidth = (1 / zoomFactor).toString(); this._skewXCircle.style.cursor = 'ew-resize'; if (!this._skewYCircle) { this._skewYCircle = this._drawCircle(skewYHandleCanvas.x, skewYHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewYCircle); this._skewYCircle.addEventListener('pointerdown', event => this._handlePointerEvent('y', event)); this._skewYCircle.addEventListener('pointermove', event => this._handlePointerEvent('y', event)); this._skewYCircle.addEventListener('pointerup', event => this._handlePointerEvent('y', event)); } else { this._skewYCircle = this._drawCircle(skewYHandleCanvas.x, skewYHandleCanvas.y, 5 / zoomFactor, 'svg-primary-skew', this._skewYCircle); } this._skewYCircle.style.strokeWidth = (1 / zoomFactor).toString(); this._skewYCircle.style.cursor = 'ns-resize'; this._skewYCircle.style.fill = '#eaf5ff'; } private _handlePointerEvent(axis: SkewAxis, event: PointerEvent) { event.stopPropagation(); const target = event.target as Element; switch (event.type) { case 'pointerdown': target.setPointerCapture(event.pointerId); this._readPersistedTransform(); if (axis === 'x') { this._skewXReferencePoint = this._getSkewReferencePoint('x'); } else { this._skewYReferencePoint = this._getSkewReferencePoint('y'); } this._activeAxis = axis; break; case 'pointermove': if (this._activeAxis === axis && event.buttons > 0) { const angle = this._getSkewAngle(axis, event); if (axis === 'x') { this._skewX = angle; } else { this._skewY = angle; } this._setPreviewTransform(); } break; case 'pointerup': if (this._activeAxis === axis) { target.releasePointerCapture(event.pointerId); const angle = this._getSkewAngle(axis, event); if (axis === 'x') { this._skewX = angle; } else { this._skewY = angle; } this._commitTransform(); this._activeAxis = null; } break; } } private _readPersistedTransform() { const { baseTransform, skewX, skewY } = this._parseTransform(this.extendedItem.getStyleFromSheetOrLocal('transform') ?? ''); this._baseTransform = baseTransform; this._skewX = skewX; this._skewY = skewY; } private _getSkewReferencePoint(axis: SkewAxis) { const element = this.extendedItem.element as HTMLElement; const size = getElementSize(this.extendedItem.element); const zoomFactor = this.designerCanvas.zoomFactor; const fallback = axis === 'x' ? { x: size.width / 2, y: -56 / zoomFactor } : { x: size.width + 30 / zoomFactor, y: size.height / 2 }; const inlineTransform = element.style.transform; try { element.style.transform = this._buildTransform(this._baseTransform, axis === 'x' ? 0 : this._skewX, axis === 'y' ? 0 : this._skewY); const quad = element.getBoxQuads({ box: 'border', relativeTo: this.designerCanvas.canvas })[0]; if (!quad) { return fallback; } const quadCenter = getQuadCenter(quad); const handlePoint = axis === 'x' ? getEdgeOffsetPoint(quad.p1, quad.p2, quadCenter, 56 / zoomFactor, { x: 0, y: -1 }) : getEdgeOffsetPoint(quad.p2, quad.p3, quadCenter, 30 / zoomFactor, { x: 1, y: 0 }); const localPoint = element.convertPointFromNode(handlePoint, this.designerCanvas.canvas); if (!Number.isFinite(localPoint.x) || !Number.isFinite(localPoint.y)) { return fallback; } return { x: localPoint.x, y: localPoint.y }; } finally { element.style.transform = inlineTransform; } } private _setPreviewTransform() { (this.extendedItem.element as HTMLElement).style.transform = this._buildTransform(this._baseTransform, this._skewX, this._skewY); } private _commitTransform() { const finalTransform = this._buildTransform(this._baseTransform, this._skewX, this._skewY); if (finalTransform) { this.extendedItem.updateStyleInSheetOrLocal('transform', finalTransform); } else if (this.extendedItem.hasStyle('transform')) { this.extendedItem.removeStyle('transform'); } else { this.extendedItem.updateStyleInSheetOrLocal('transform', null); } const element = this.extendedItem.element as HTMLElement; if (this.extendedItem.hasStyle('transform')) { element.style.transform = this.extendedItem.getStyle('transform') ?? ''; } else { element.style.transform = ''; } } private _getSkewAngle(axis: SkewAxis, event: PointerEvent) { const element = this.extendedItem.element as HTMLElement; element.style.transform = this._buildTransform(this._baseTransform, axis === 'x' ? 0 : this._skewX, axis === 'y' ? 0 : this._skewY); const mousePoint = this.designerCanvas.getNormalizedEventCoordinates(event); const localPoint = element.convertPointFromNode({ x: mousePoint.x, y: mousePoint.y }, this.designerCanvas.canvas); const computedStyle = getComputedStyle(element); const transformOrigin = computedStyle.transformOrigin.split(' '); const origin = { x: parseFloat(transformOrigin[0]), y: parseFloat(transformOrigin[1]) }; const size = getElementSize(element); let angle: number; if (axis === 'x') { let referenceY = this._skewXReferencePoint.y - origin.y; if (Math.abs(referenceY) < 0.5) { referenceY = -Math.max(size.height / 2, 1); } angle = Math.atan((localPoint.x - origin.x) / referenceY) * 180 / Math.PI; } else { let referenceX = this._skewYReferencePoint.x - origin.x; if (Math.abs(referenceX) < 0.5) { referenceX = Math.max(size.width / 2, 1); } angle = Math.atan((localPoint.y - origin.y) / referenceX) * 180 / Math.PI; } angle = Math.max(-80, Math.min(80, angle)); if (!hasCommandKey(event)) { angle = Math.round(angle / 15) * 15; } return parseFloat(roundValue(this.extendedItem, angle)); } private _buildTransform(baseTransform: string, skewX: number, skewY: number) { const transforms: string[] = []; if (baseTransform?.trim()) { transforms.push(baseTransform.trim()); } if (Math.abs(skewX) > 0.001) { transforms.push(`skewX(${skewX}deg)`); } if (Math.abs(skewY) > 0.001) { transforms.push(`skewY(${skewY}deg)`); } return transforms.join(' ').trim(); } private _parseTransform(transform: string) { if (!transform || transform === 'none') { return { baseTransform: '', skewX: 0, skewY: 0 }; } let skewX = 0; let skewY = 0; const baseTransforms: string[] = []; for (const part of this._splitTransformFunctions(transform)) { const functionName = part.slice(0, part.indexOf('(')).trim().toLowerCase(); const argumentsText = part.slice(part.indexOf('(') + 1, -1); const argumentsList = argumentsText.split(',').map(value => value.trim()); if (functionName === 'skewx') { skewX = this._parseAngle(argumentsList[0]); } else if (functionName === 'skewy') { skewY = this._parseAngle(argumentsList[0]); } else if (functionName === 'skew') { skewX = this._parseAngle(argumentsList[0]); if (argumentsList.length > 1) { skewY = this._parseAngle(argumentsList[1]); } } else { baseTransforms.push(part); } } return { baseTransform: baseTransforms.join(' ').trim(), skewX, skewY }; } private _splitTransformFunctions(transform: string) { const parts: string[] = []; let startIndex = -1; let depth = 0; for (let index = 0; index < transform.length; index++) { const character = transform[index]; if (character === '(') { depth++; } else if (character === ')') { depth--; if (depth === 0 && startIndex !== -1) { parts.push(transform.slice(startIndex, index + 1).trim()); startIndex = -1; } } else if (depth === 0 && startIndex === -1 && character.trim()) { startIndex = index; } } if (!parts.length && transform.trim()) { parts.push(transform.trim()); } return parts; } private _parseAngle(value: string) { if (!value) { return 0; } const numericValue = parseFloat(value); if (isNaN(numericValue)) { return 0; } if (value.endsWith('rad')) { return numericValue * 180 / Math.PI; } if (value.endsWith('grad')) { return numericValue * 0.9; } if (value.endsWith('turn')) { return numericValue * 360; } return numericValue; } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/SkewExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { SkewExtension } from './SkewExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { css } from '@node-projects/base-custom-webcomponent'; export class SkewExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean { if (designerCanvas.readOnly) return false; if (designItem.element instanceof SVGElement || designItem.element instanceof HTMLTemplateElement) { return false; } return !designItem.isRootItem; } getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new SkewExtension(extensionManager, designerCanvas, designItem); } static readonly style = css` .svg-primary-skew { stroke: #3899ec; fill: white; stroke-width: 1; pointer-events: auto; } .svg-primary-skew-line { stroke: #3899ec; fill: none; stroke-width: 1; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/TransformOriginExtension.ts ================================================ import { EventNames } from '../../../../../enums/EventNames.js'; import { IPoint } from '../../../../../interfaces/IPoint.js'; import { convertCssUnit, getCssUnit } from '../../../../helper/CssUnitConverter.js'; import { getBoundingClientRectAlsoForDisplayContents } from '../../../../helper/ElementHelper.js'; import { clearCache, getResultingTransformationBetweenElementAndAllAncestors } from '../../../../helper/getBoxQuads.js'; import { roundValue } from '../../../../helper/LayoutHelper.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { AbstractExtension } from '../AbstractExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; export class TransformOriginExtension extends AbstractExtension { private _startPos: IPoint; private _circle: SVGCircleElement; private _circle2: SVGCircleElement; private _oldValue: string; private _offsetInControl: { x: number; y: number; }; constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } private _getTransformOriginCanvasPoint() { const computed = getComputedStyle(this.extendedItem.element); const to = computed.transformOrigin.split(' '); const transform = getResultingTransformationBetweenElementAndAllAncestors(this.extendedItem.element, this.designerCanvas.canvas, this.designerCanvas.iframes); return transform.transformPoint(new DOMPoint(parseFloat(to[0]), parseFloat(to[1]))); } override refresh(cache: Record, event?: Event) { const toDOMPoint = this._getTransformOriginCanvasPoint(); if (this._valuesHaveChanges(toDOMPoint.x, toDOMPoint.y, this.designerCanvas.zoomFactor)) { this._removeAllOverlays(); this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin'); this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); this._circle.style.cursor = 'pointer'; this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.zoomFactor, 'svg-transform-origin'); this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString(); this._circle2.style.pointerEvents = 'none'; this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event)); this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event)); this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); } } override extend(cache: Record, event?: Event) { const toDOMPoint = this._getTransformOriginCanvasPoint(); if (isNaN(toDOMPoint.x) || isNaN(toDOMPoint.y)) { this.remove(); return; } else { let old = this.extendedItem.getStyleFromSheetOrLocal('transform-origin'); if (old) { this._oldValue = old; } this.refresh(cache, event); } } pointerEvent(event: PointerEvent) { event.stopPropagation(); const computed = getComputedStyle(this.extendedItem.element); const to = computed.transformOrigin.split(' '); const toInPercentage = []; toInPercentage[0] = parseFloat(to[0]) / parseFloat((this.extendedItem.element).style.width); toInPercentage[1] = parseFloat(to[1]) / parseFloat((this.extendedItem.element).style.height); const toDOMPoint = this._getTransformOriginCanvasPoint(); const mp = this.designerCanvas.getNormalizedEventCoordinates(event); const evPoint = this.extendedItem.element.convertPointFromNode(mp, this.designerCanvas.canvas); const normalized = this.designerCanvas.getNormalizedEventCoordinates(event); switch (event.type) { case EventNames.PointerDown: (event.target).setPointerCapture(event.pointerId); const rect = getBoundingClientRectAlsoForDisplayContents((event.target)); this._offsetInControl = { x: rect.width / 2 + (rect.x - event.x), y: rect.height / 2 + (rect.y - event.y) }; this._startPos = { x: normalized.x, y: normalized.y }; break; case EventNames.PointerMove: if (this._startPos && event.buttons > 0) { const dx = normalized.x - this._startPos.x; const dy = normalized.y - this._startPos.y; this._circle.setAttribute('cx', (toDOMPoint.x + dx)); this._circle.setAttribute('cy', (toDOMPoint.y + dy)); this._circle2.setAttribute('cx', (toDOMPoint.x + dx)); this._circle2.setAttribute('cy', (toDOMPoint.y + dy)); } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); if (this._startPos) { evPoint.x += this._offsetInControl.x; evPoint.y += this._offsetInControl.y; const cg = this.extendedItem.openGroup('change transform-origin'); const quadsOld = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.rootDesignItem.element })[0]; if (this._oldValue) { try { const oldSplit = this._oldValue.split(' '); let newXs = convertCssUnit(evPoint.x, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]), (nr) => roundValue(this.extendedItem, nr)); let newYs = convertCssUnit(evPoint.x, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]), (nr) => roundValue(this.extendedItem, nr)); if (oldSplit.length > 1) { newYs = convertCssUnit(evPoint.y, this.extendedItem.element, 'height', getCssUnit(oldSplit[1]), (nr) => roundValue(this.extendedItem, nr)); } this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newXs + ' ' + newYs); } catch (err) { this.extendedItem.updateStyleInSheetOrLocal('transform-origin', roundValue(this.extendedItem, evPoint.x) + 'px' + ' ' + roundValue(this.extendedItem, evPoint.y) + 'px'); } } else this.extendedItem.updateStyleInSheetOrLocal('transform-origin', roundValue(this.extendedItem, evPoint.x) + 'px' + ' ' + roundValue(this.extendedItem, evPoint.y) + 'px'); clearCache(); //clear box quads cache to make sure we get the new quads with the updated transform origin const quadsNew = this.extendedItem.element.getBoxQuads({ relativeTo: this.designerCanvas.rootDesignItem.element })[0]; const translateP = { x: quadsOld.p1.x - quadsNew.p1.x, y: quadsOld.p1.y - quadsNew.p1.y }; if (computed.translate && computed.translate !== 'none') { translateP.x += parseFloat(computed.translate.split(' ')[0]); if (computed.translate.split(' ').length === 1) translateP.y += parseFloat(computed.translate.split(' ')[0]); else translateP.y += parseFloat(computed.translate.split(' ')[1]); } this.extendedItem.updateStyleInSheetOrLocal('translate', roundValue(this.extendedItem, translateP.x) + 'px' + ' ' + roundValue(this.extendedItem, translateP.y) + 'px'); cg.commit(); this.refresh(null, null); this._startPos = null; } break; } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/extensions/transforms/TransformOriginExtensionProvider.ts ================================================ import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js'; import { IDesignItem } from '../../../../item/IDesignItem.js'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { IDesignerExtension } from '../IDesignerExtension.js'; import { TransformOriginExtension } from './TransformOriginExtension.js'; import { IExtensionManager } from '../IExtensionManger.js'; import { css } from "@node-projects/base-custom-webcomponent"; import { getBoundingClientRectAlsoForDisplayContents } from '../../../../helper/ElementHelper.js'; export class TransformOriginExtensionProvider implements IDesignerExtensionProvider { showOnlyWhenSet: boolean; constructor(showOnlyWhenSet = true) { this.showOnlyWhenSet = showOnlyWhenSet; } shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { if (!designItem.isRootItem && designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg')) { if (!this.showOnlyWhenSet) return true; if (designItem.hasStyle('transformOrigin')) return true; const cs = getComputedStyle(designItem.element); if (cs.display != 'inline' && designItem.element.getBoundingClientRect) { const r = getBoundingClientRectAlsoForDisplayContents(designItem.element); const pr = cs.transformOrigin.split(' '); const x = parseFloat(pr[0]) - r.width / 2; const y = parseFloat(pr[1]) - r.height / 2; if (x > 0.5 || x < -0.5 || y > 0.5 || y < -0.5) return true; } } return false; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new TransformOriginExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: auto; } `; } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/overlay/EditTextOverlay.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent'; export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend { public static override readonly style = css`` public static override readonly template = html`
` } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/overlayLayerView.ts ================================================ import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent'; import { OverlayLayer } from './extensions/OverlayLayer.js'; import { ServiceContainer } from '../../services/ServiceContainer.js'; export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend { static override readonly template = html` `; static override readonly style = css` svg { width: 100%; height: 100%; overflow: visible; } .svg-invisible { stroke: transparent; fill: transparent; pointer-events: auto; } .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; } .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; } .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: auto; } .svg-position { stroke: black; stroke-dasharray: 2; } .svg-path { stroke: #3899ec; fill: orange; pointer-events: auto; } .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; } .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; } .svg-toolbar-container { overflow: visible } .svg-toolbar-container > div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; } node-projects-image-button-list-selector img { height: 16px; border: 1px solid black; border-radius: 4px; box-sizing: border-box; pointer-events: auto; cursor: pointer; } node-projects-image-button-list-selector img:hover { background: lightgray; } node-projects-image-button-list-selector img:active { translate: 1px 1px } `; static readonly is = 'node-projects-overlay-layer-view'; private _serviceContainer: ServiceContainer; private _svg: SVGElement; private _gBackground: SVGGElement; private _gNormal: SVGGElement; private _gForeground: SVGGElement; private _defs: SVGDefsElement; private _id: number = 0; constructor(serviceContainer: ServiceContainer) { super(); this._serviceContainer = serviceContainer; this._svg = this._getDomElement('svg'); this._gBackground = this._getDomElement('background'); this._gNormal = this._getDomElement('normal'); this._gForeground = this._getDomElement('foreground'); this._defs = this._getDomElement('defs'); this._initialize(); } private _initialize() { const styles: CSSStyleSheet[] = [OverlayLayerView.style]; const alreadyApplied = new Set(); for (const extList of this._serviceContainer.designerExtensions) { for (const ext of extList[1]) { if (ext.constructor.style) { if (Array.isArray(ext.constructor.style)) { for (const s of ext.constructor.style) { if (!alreadyApplied.has(s)) { alreadyApplied.add(s); styles.push(s); } } } else if (!alreadyApplied.has(ext.constructor.style)) { alreadyApplied.add(ext.constructor.style); styles.push(ext.constructor.style); } } if (ext.style) { if (Array.isArray(ext.style)) { for (const s of ext.style) { if (!alreadyApplied.has(s)) { alreadyApplied.add(s); styles.push(s); } } } else if (!alreadyApplied.has(ext.style)) { alreadyApplied.add(ext.style); styles.push(ext.style); } } if (ext.svgDefs) { if (Array.isArray(ext.svgDefs)) { for (const s of ext.svgDefs) { if (!alreadyApplied.has(s)) { alreadyApplied.add(s); const a = document.createElementNS("http://www.w3.org/2000/svg", "defs") a.innerHTML = s; for (let n of [...a.children]) this._defs.appendChild(n); } } } else if (!alreadyApplied.has(ext.svgDefs)) { alreadyApplied.add(ext.svgDefs); const a = document.createElementNS("http://www.w3.org/2000/svg", "defs") a.innerHTML = ext.svgDefs; for (let n of [...a.children]) this._defs.appendChild(n); } } if (ext.constructor.svgDefs) { if (Array.isArray(ext.constructor.svgDefs)) { for (const s of ext.constructor.svgDefs) { if (!alreadyApplied.has(s)) { alreadyApplied.add(s); const a = document.createElementNS("http://www.w3.org/2000/svg", "defs") a.innerHTML = s; for (let n of [...a.children]) this._defs.appendChild(n); } } } else if (!alreadyApplied.has(ext.constructor.svgDefs)) { alreadyApplied.add(ext.constructor.svgDefs); const a = document.createElementNS("http://www.w3.org/2000/svg", "defs") a.innerHTML = ext.constructor.svgDefs; for (let n of [...a.children]) this._defs.appendChild(n); } } } } for (const ext of this._serviceContainer.designerPointerExtensions) { if (ext.style) { if (!alreadyApplied.has(ext.style)) { alreadyApplied.add(ext.style); styles.push(ext.style); } } if (ext.svgDefs) { if (!alreadyApplied.has(ext.svgDefs)) { alreadyApplied.add(ext.svgDefs); const a = document.createElementNS("http://www.w3.org/2000/svg", "defs") a.innerHTML = ext.svgDefs; for (let n of [...a.children]) this._defs.appendChild(n); } } } if (this._serviceContainer.overlayLayerViewAdditionalStyles) { for (const style of this._serviceContainer.overlayLayerViewAdditionalStyles) { if (!alreadyApplied.has(style)) { alreadyApplied.add(style); styles.push(style); } } } this.shadowRoot.adoptedStyleSheets = styles; } backgroundFragment: DocumentFragment; foregroundFragment: DocumentFragment; normalFragment: DocumentFragment; batchCount = 0; public startBatch() { if (this.batchCount == 0) { this.backgroundFragment = document.createDocumentFragment(); this.foregroundFragment = document.createDocumentFragment(); this.normalFragment = document.createDocumentFragment(); } this.batchCount++; } public endBatch() { this.batchCount--; if (this.batchCount == 0) { if (this.backgroundFragment.hasChildNodes) this._gBackground.appendChild(this.backgroundFragment); if (this.foregroundFragment.hasChildNodes) this._gForeground.appendChild(this.foregroundFragment); if (this.normalFragment.hasChildNodes) this._gNormal.appendChild(this.normalFragment); this.backgroundFragment = null; this.foregroundFragment = null; this.normalFragment = null; } } public addOverlay(overlaySource: string, element: SVGGraphicsElement, overlayLayer: OverlayLayer = OverlayLayer.Normal) { element.setAttribute("overlay-source", overlaySource); switch (overlayLayer) { case OverlayLayer.Background: if (this.backgroundFragment) this.backgroundFragment.appendChild(element); else this._gBackground.appendChild(element); break; case OverlayLayer.Foreground: if (this.foregroundFragment) this.foregroundFragment.appendChild(element); else this._gForeground.appendChild(element); break; default: if (this.normalFragment) this.normalFragment.appendChild(element); else this._gNormal.appendChild(element); break; } } public removeOverlay(element: SVGElement) { try { element?.parentElement?.removeChild(element); } catch (err) { console.error(err); } } public removeAllNodesWithClass(className: string) { const nodes = this._svg.querySelectorAll('.' + className); for (const e of nodes) { e.parentNode.removeChild(e); } } public removeAllOverlays() { const nodes = this._svg.querySelectorAll('svg > g > *'); for (const e of nodes) { e.parentNode.removeChild(e); } } public createPoint(): DOMPointInit { //@ts-ignore return this._svg.createSVGPoint(); } drawGroup(overlaySource: string, className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer) { if (!group) { group = document.createElementNS("http://www.w3.org/2000/svg", "g"); this.addOverlay(overlaySource, group, overlayLayer); } if (className) group.setAttribute('class', className); return group; } drawLine(overlaySource: string, x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer) { if (!line) { line = document.createElementNS("http://www.w3.org/2000/svg", "line"); this.addOverlay(overlaySource, line, overlayLayer); } line.setAttribute('x1', x1); line.setAttribute('y1', y1); line.setAttribute('x2', x2); line.setAttribute('y2', y2); if (className) line.setAttribute('class', className); return line; } drawCircle(overlaySource: string, x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer) { if (!circle) { circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); this.addOverlay(overlaySource, circle, overlayLayer); } circle.setAttribute('cx', x); circle.setAttribute('cy', y); circle.setAttribute('r', radius); if (className) circle.setAttribute('class', className); return circle; } drawRect(overlaySource: string, x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer) { if (!rect) { rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); this.addOverlay(overlaySource, rect, overlayLayer); } rect.setAttribute('x', x); rect.setAttribute('y', y); rect.setAttribute('width', w); rect.setAttribute('height', h); if (className) rect.setAttribute('class', className); return rect; } drawPath(overlaySource: string, data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer) { if (!path) { path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.addOverlay(overlaySource, path, overlayLayer); } path.setAttribute('d', data); if (className) path.setAttribute('class', className); return path; } drawText(overlaySource: string, text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer) { if (!textEl) { textEl = document.createElementNS("http://www.w3.org/2000/svg", "text"); this.addOverlay(overlaySource, textEl, overlayLayer); } textEl.setAttribute('x', x); textEl.setAttribute('y', y); textEl.textContent = text; if (className) textEl.setAttribute('class', className); return textEl; } drawHTML(overlaySource: string, html: HTMLElement | string, x: number, y: number, w: number, h: number, className?: string, htmlObj?: SVGForeignObjectElement, overlayLayer?: OverlayLayer) { if (!htmlObj) { htmlObj = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject"); this.addOverlay(overlaySource, htmlObj, overlayLayer); } htmlObj.setAttribute('x', x); htmlObj.setAttribute('y', y); htmlObj.setAttribute('width', w); htmlObj.setAttribute('height', h); if (typeof html === 'string') htmlObj.innerHTML = html; else htmlObj.appendChild(html); if (className) htmlObj.setAttribute('class', className); return htmlObj; } drawTextWithBackground(overlaySource: string, text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement] { if (!existingEls) { let filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("x", "0"); filter.setAttribute("y", "0"); filter.setAttribute("width", "1"); filter.setAttribute("height", "1"); filter.setAttribute("id", "solid_" + (++this._id)); let flood = document.createElementNS("http://www.w3.org/2000/svg", "feFlood"); flood.setAttribute("flood-color", backgroundColor); filter.appendChild(flood); let composite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite"); composite.setAttribute("in", "SourceGraphic"); composite.setAttribute("operator", "xor"); filter.appendChild(composite); this._defs.appendChild(filter); let textEl1 = document.createElementNS("http://www.w3.org/2000/svg", "text"); textEl1.setAttribute("filter", "url(#solid_" + this._id + ")"); let textEl2 = document.createElementNS("http://www.w3.org/2000/svg", "text"); this.addOverlay(overlaySource, textEl1, overlayLayer); this.addOverlay(overlaySource, textEl2, overlayLayer); filter.setAttribute("overlay-source", overlaySource); flood.setAttribute("overlay-source", overlaySource); existingEls = [filter, flood, textEl1, textEl2] } existingEls[2].setAttribute('x', x); existingEls[3].setAttribute('x', x); existingEls[2].setAttribute('y', y); existingEls[3].setAttribute('y', y); existingEls[2].textContent = text; existingEls[3].textContent = text; if (className) { existingEls[2].setAttribute('class', className); existingEls[3].setAttribute('class', className); } return existingEls; } } customElements.define(OverlayLayerView.is, OverlayLayerView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/DrawElementTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { roundValue } from '../../../helper/LayoutHelper.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IElementDefinition } from '../../../services/elementsService/IElementDefinition.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { ChangeGroup } from '../../../services/undoService/ChangeGroup.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; export class DrawElementTool implements ITool { private _elementDefinition: IElementDefinition; private _createdItem: IDesignItem; private _startPosition: IPoint; private _changeGroup: ChangeGroup; readonly cursor = 'crosshair'; private _rect: any; constructor(elementDefinition: IElementDefinition) { this._elementDefinition = elementDefinition; } activated(serviceContainer: ServiceContainer) { } dispose(): void { if (this._createdItem) this._createdItem.element.parentElement.removeChild(this._createdItem.element); } pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element) { switch (event.type) { case EventNames.PointerDown: this._onPointerDown(designerView, event); break; case EventNames.PointerMove: this._onPointerMove(designerView, event); break; case EventNames.PointerUp: this._onPointerUp(designerView, event); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } sizeOverlapThreshold = false; private async _onPointerDown(designerCanvas: IDesignerCanvas, event: PointerEvent) { const evPos = designerCanvas.getNormalizedEventCoordinates(event); event.preventDefault(); this._startPosition = { x: evPos.x, y: evPos.y }; this._changeGroup = designerCanvas.rootDesignItem.openGroup("Insert Item"); this._createdItem = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer)); this._createdItem.setStyle('position', 'absolute'); this._createdItem.setStyle('left', roundValue(this._createdItem, evPos.x) + 'px'); this._createdItem.setStyle('top', roundValue(this._createdItem, evPos.y) + 'px'); this._createdItem.setStyle('width', '0'); this._createdItem.setStyle('height', '0'); designerCanvas.rootDesignItem.insertChild(this._createdItem); //draw via containerService??? how to draw into a grid, a stackpanel??? designerCanvas.instanceServiceContainer.selectionService.clearSelectedElements(); } private async _onPointerMove(designerCanvas: IDesignerCanvas, event: PointerEvent) { const evPos = designerCanvas.getNormalizedEventCoordinates(event); if (this._createdItem) { if (!this._rect) { this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground); this._rect.setAttribute('class', 'svg-draw-new-element'); this._rect.setAttribute('x', roundValue(this._createdItem, this._startPosition.x)); this._rect.setAttribute('y', roundValue(this._createdItem, this._startPosition.y)); } const w = roundValue(this._createdItem, evPos.x - this._startPosition.x); const h = roundValue(this._createdItem, evPos.y - this._startPosition.y); if (parseFloat('' + w) >= 0) { this._rect.setAttribute('width', w); this._createdItem.setStyle('width', w + 'px'); } if (parseFloat('' + h) >= 0) { this._rect.setAttribute('height', h); this._createdItem.setStyle('height', h + 'px'); } if (parseFloat('' + w) > 5 || parseFloat('' + h) > 5) this.sizeOverlapThreshold = true; } } private async _onPointerUp(designerView: IDesignerCanvas, event: PointerEvent) { if (this.sizeOverlapThreshold) { this._changeGroup.commit(); designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem], event); } else { this._changeGroup.abort(); } designerView.overlayLayer.removeOverlay(this._rect); this._startPosition = null; this._rect = null; this._createdItem = null; designerView.serviceContainer.globalContext.finishedWithTool(this); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/DrawEllipsisTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { calculateNormLegth } from '../../../helper/PathDataPolyfill.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { hasCommandKey } from '../../../helper/KeyboardHelper.js'; import { roundValueToDecimalPlaces } from '../extensions/svg/geometry/GeometryWriteHelper.js'; export class DrawEllipsisTool implements ITool { readonly cursor = 'crosshair'; private _path: SVGEllipseElement; private _startPoint: IPoint; private _radius: IPoint; private _cx: number; private _cy: number; constructor() { } activated(serviceContainer: ServiceContainer) { } dispose(): void { } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); const offset = 10; switch (event.type) { case EventNames.PointerDown: this._startPoint = currentPoint; (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); this._path = document.createElementNS("http://www.w3.org/2000/svg", "ellipse"); this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor); this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush); this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness); this._path.setAttribute("cx", currentPoint.x.toString()); this._path.setAttribute("cy", currentPoint.y.toString()); this._path.setAttribute("rx", "0"); this._path.setAttribute("ry", "0"); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground); break; case EventNames.PointerMove: if (this._path) { this._radius = { x: Math.abs(currentPoint.x - this._startPoint.x), y: Math.abs(currentPoint.y - this._startPoint.y) } if (hasCommandKey(event)) { this._path.setAttribute("cx", this._startPoint.x.toString()); this._path.setAttribute("cy", this._startPoint.y.toString()); this._cx = this._startPoint.x; this._cy = this._startPoint.y; if (event.shiftKey) { const radius = calculateNormLegth(this._startPoint, currentPoint); this._path.setAttribute("rx", radius.toString()); this._path.setAttribute("ry", radius.toString()); } else { this._path.setAttribute("rx", this._radius.x.toString()); this._path.setAttribute("ry", this._radius.y.toString()); } } else { if (event.shiftKey) { const radius = calculateNormLegth(this._startPoint, currentPoint); this._radius = { x: radius, y: radius }; } this._cx = currentPoint.x < this._startPoint.x ? this._startPoint.x - this._radius.x / 2 : this._startPoint.x + this._radius.x / 2; this._cy = currentPoint.y < this._startPoint.y ? this._startPoint.y - this._radius.y / 2 : this._startPoint.y + this._radius.y / 2; this._path.setAttribute("cx", this._cx.toString()); this._path.setAttribute("cy", this._cy.toString()); this._path.setAttribute("rx", (this._radius.x / 2).toString()); this._path.setAttribute("ry", (this._radius.y / 2).toString()); } } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); let coords = designerCanvas.getNormalizedElementCoordinates(this._path); designerCanvas.overlayLayer.removeOverlay(this._path); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const mvX = coords.x - offset; const mvY = coords.y - offset; const decimalPlaces = designerCanvas.serviceContainer.options.roundPixelsToDecimalPlaces; svg.appendChild(this._path); this._path.setAttribute("cx", roundValueToDecimalPlaces(this._cx - mvX, decimalPlaces)); this._path.setAttribute("cy", roundValueToDecimalPlaces(this._cy - mvY, decimalPlaces)); this._path.setAttribute("rx", roundValueToDecimalPlaces(Number(this._path.getAttribute("rx")), decimalPlaces)); this._path.setAttribute("ry", roundValueToDecimalPlaces(Number(this._path.getAttribute("ry")), decimalPlaces)); this._path.removeAttribute("stroke"); this._path.removeAttribute("stroke-width"); this._path.removeAttribute("overlay-source"); svg.style.left = roundValueToDecimalPlaces(mvX, decimalPlaces) + 'px'; svg.style.top = roundValueToDecimalPlaces(mvY, decimalPlaces) + 'px'; svg.style.position = 'absolute'; svg.style.width = Math.round(coords.width + 2 * offset) + 'px'; svg.style.height = Math.round(coords.height + 2 * offset) + 'px'; svg.style.overflow = 'visible'; svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor; svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness; this._path = null; const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); designerCanvas.serviceContainer.globalContext.finishedWithTool(this); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/DrawLineTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { straightenLine } from '../../../helper/PathDataPolyfill.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { roundValueToDecimalPlaces } from '../extensions/svg/geometry/GeometryWriteHelper.js'; export class DrawLineTool implements ITool { readonly cursor = 'crosshair'; private _path: SVGLineElement; private _startPoint: IPoint; private _endPoint: IPoint; constructor() { } activated(serviceContainer: ServiceContainer) { } dispose(): void { } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); const offset = 10; switch (event.type) { case EventNames.PointerDown: this._startPoint = currentPoint; (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); this._path = document.createElementNS("http://www.w3.org/2000/svg", "line"); // this._pathD = "M" + currentPoint.x + " " + currentPoint.y; // this._path.setAttribute("d", this._pathD); this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor); this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness); this._path.setAttribute("x1", currentPoint.x.toString()); this._path.setAttribute("y1", currentPoint.y.toString()); this._path.setAttribute("x2", currentPoint.x.toString()); this._path.setAttribute("y2", currentPoint.y.toString()); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground); break; case EventNames.PointerMove: if (this._path) { if (event.shiftKey) { let straightLine = straightenLine(this._startPoint, currentPoint); this._path.setAttribute("x2", straightLine.x.toString()); this._path.setAttribute("y2", straightLine.y.toString()); this._endPoint = straightLine; } else { //this._path.setAttribute("d", this._pathD + "L" + currentPoint.x + " " + currentPoint.y); this._path.setAttribute("x2", currentPoint.x.toString()); this._path.setAttribute("y2", currentPoint.y.toString()); this._endPoint = currentPoint; } } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); let coords = designerCanvas.getNormalizedElementCoordinates(this._path); designerCanvas.overlayLayer.removeOverlay(this._path); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const mvX = coords.x - offset; const mvY = coords.y - offset; const decimalPlaces = designerCanvas.serviceContainer.options.roundPixelsToDecimalPlaces; this._path.setAttribute("x1", roundValueToDecimalPlaces(this._startPoint.x - mvX, decimalPlaces)); this._path.setAttribute("y1", roundValueToDecimalPlaces(this._startPoint.y - mvY, decimalPlaces)); this._path.setAttribute("x2", roundValueToDecimalPlaces(this._endPoint.x - mvX, decimalPlaces)); this._path.setAttribute("y2", roundValueToDecimalPlaces(this._endPoint.y - mvY, decimalPlaces)); this._path.removeAttribute("stroke"); this._path.removeAttribute("stroke-width"); this._path.removeAttribute("overlay-source"); svg.appendChild(this._path); svg.style.left = roundValueToDecimalPlaces(mvX, decimalPlaces) + 'px'; svg.style.top = roundValueToDecimalPlaces(mvY, decimalPlaces) + 'px'; svg.style.position = 'absolute'; svg.style.width = Math.round(coords.width + 2 * offset) + 'px'; svg.style.height = Math.round(coords.height + 2 * offset) + 'px'; svg.style.overflow = 'visible'; svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor; svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness; this._path = null; const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); designerCanvas.serviceContainer.globalContext.finishedWithTool(this); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/DrawPathTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { interpolateLinePoints, moveSVGPath, straightenLine } from '../../../helper/PathDataPolyfill.js'; import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { DesignerCanvas } from '../designerCanvas.js'; import { roundNumericParts, roundValueToDecimalPlaces } from '../extensions/svg/geometry/GeometryWriteHelper.js'; const offset = 10; const freehandInterpolationDistance = 5; type optionsType = { angleStep?: number; // if true, lines will be straightened to the nearest angle defined by angleStep, strokeColor?: string, fillBrush?: string, strokeThickness?: string, interpolatePoints?: boolean, interpolationDistance?: number } export class DrawPathTool implements ITool { readonly cursor = 'crosshair'; private _pathD?: string; private _path?: SVGPathElement; private _samePoint = false; private _p2pMode = false; private _dragMode = false; private _pointerMoved = false; private _eventStarted = false; private _lastPoint?: IPoint; private _startPoint?: IPoint; private _captureElement?: Element; private _pointerId?: number; private _angleStep?: number; constructor(private options?: optionsType) { if (options?.angleStep !== undefined) { this._angleStep = options.angleStep; } } activated(serviceContainer: ServiceContainer) { } dispose(): void { } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); switch (event.type) { case EventNames.PointerDown: (designerCanvas).clickOverlay.focus(); this._eventStarted = true; if (!this._p2pMode) { this._captureElement = event.target as Element; this._pointerId = event.pointerId; this._captureElement.setPointerCapture(this._pointerId); designerCanvas.captureActiveTool(this); this._path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this._pathD = "M " + currentPoint.x + " " + currentPoint.y + " "; this._path.setAttribute("d", this._pathD); this._path.setAttribute("stroke", this.options?.strokeColor ?? designerCanvas.serviceContainer.globalContext.strokeColor); this._path.setAttribute("fill", this.options?.fillBrush ?? designerCanvas.serviceContainer.globalContext.fillBrush); this._path.setAttribute("stroke-width", this.options?.strokeThickness ?? designerCanvas.serviceContainer.globalContext.strokeThickness); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground); this._startPoint = currentPoint; } if (this._lastPoint != null && this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) { this._samePoint = true; } if (this._lastPoint == null) { this._lastPoint = currentPoint; } if (this._startPoint == null) { this._startPoint = currentPoint; } break; case EventNames.PointerMove: if (this._eventStarted) { this._pointerMoved = true; } if (!this._p2pMode) { this._dragMode = true; if (this._path && this._lastPoint) { const points = this.options?.interpolatePoints ? interpolateLinePoints(this._lastPoint, currentPoint, this.options.interpolationDistance ?? freehandInterpolationDistance) : [currentPoint]; for (const point of points) { this._pathD += "L " + point.x + " " + point.y + " "; } this._path.setAttribute("d", this._pathD!); this._lastPoint = currentPoint; } } else { // shows line preview if (this._path) { let straightLine = currentPoint; if (event.shiftKey || this._angleStep) { straightLine = straightenLine(this._lastPoint!, currentPoint, this._angleStep ?? 45); } this._path.setAttribute("d", this._pathD + "L " + straightLine.x + " " + straightLine.y) + " "; } } break; case EventNames.PointerUp: if (this._eventStarted && !this._pointerMoved) { this._p2pMode = true; } if (this._p2pMode && !this._samePoint && this._startPoint!.x != currentPoint.x && this._startPoint!.y != currentPoint.y) { if (this._path) { if (event.shiftKey || this._angleStep) { let straightLine = straightenLine(this._lastPoint!, currentPoint, this._angleStep ?? 45); this._pathD += "L " + straightLine.x + " " + straightLine.y + " "; this._path.setAttribute("d", this._pathD!); this._lastPoint = straightLine; } else { this._pathD += "L " + currentPoint.x + " " + currentPoint.y + " "; this._path.setAttribute("d", this._pathD!); this._lastPoint = currentPoint; } } } if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) { this._finalizePath(designerCanvas); } //TODO: Better Path drawing (like in SVGEDIT & Adding via Undo Framework. And adding to correct container) break; } event.preventDefault(); event.stopPropagation(); } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement?: Element) { if (event.key === "Escape") { this._finalizePath(designerCanvas); } } private _finalizePath(designerCanvas: IDesignerCanvas) { this._captureElement?.releasePointerCapture(this._pointerId!); this._captureElement = undefined; designerCanvas.releaseActiveTool(); this._eventStarted = false; this._p2pMode = false; this._pointerMoved = false; this._samePoint = false; this._dragMode = false; let coords = designerCanvas.getNormalizedElementCoordinates(this._path!); designerCanvas.overlayLayer.removeOverlay(this._path!); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const mvX = coords.x - offset; const mvY = coords.y - offset; const decimalPlaces = designerCanvas.serviceContainer.options.roundPixelsToDecimalPlaces; this._path!.setAttribute("d", this._pathD!); const d = moveSVGPath(this._path!, mvX, mvY); this._path!.setAttribute("d", roundNumericParts(d, decimalPlaces)); this._path!.removeAttribute("stroke"); this._path!.removeAttribute("stroke-width"); this._path!.removeAttribute("overlay-source"); svg.appendChild(this._path!); svg.style.left = roundValueToDecimalPlaces(mvX, decimalPlaces) + 'px'; svg.style.top = roundValueToDecimalPlaces(mvY, decimalPlaces) + 'px'; svg.style.position = 'absolute'; svg.style.width = Math.round(coords.width + 2 * offset) + 'px'; svg.style.height = Math.round(coords.height + 2 * offset) + 'px'; svg.style.overflow = 'visible'; svg.style.stroke = this.options?.strokeColor ?? designerCanvas.serviceContainer.globalContext.strokeColor; svg.style.fill = this.options?.fillBrush ?? designerCanvas.serviceContainer.globalContext.fillBrush; svg.style.strokeWidth = this.options?.strokeThickness ?? designerCanvas.serviceContainer.globalContext.strokeThickness; //designerView.rootDesignItem.element.appendChild(svg); this._path = undefined; this._pathD = undefined; this._lastPoint = undefined; const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); designerCanvas.serviceContainer.globalContext.finishedWithTool(this); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/DrawRectTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { calculateNormLegth } from '../../../helper/PathDataPolyfill.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { hasCommandKey } from '../../../helper/KeyboardHelper.js'; import { roundValueToDecimalPlaces } from '../extensions/svg/geometry/GeometryWriteHelper.js'; export class DrawRectTool implements ITool { readonly cursor = 'crosshair'; private _path: SVGRectElement; private _startPoint: IPoint; private _minX: number; private _minY: number; private _maxX: number; private _maxY: number; private _px: number; private _py: number; constructor() { } activated(serviceContainer: ServiceContainer) { } dispose(): void { } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); const offset = 10; switch (event.type) { case EventNames.PointerDown: this._startPoint = currentPoint; (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); this._path = document.createElementNS("http://www.w3.org/2000/svg", "rect"); this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor); this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush); this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness); this._path.setAttribute("x", currentPoint.x.toString()); this._path.setAttribute("y", currentPoint.y.toString()); this._path.setAttribute("width", "0"); this._path.setAttribute("height", "0"); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground); break; case EventNames.PointerMove: if (this._path) { this._minX = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x; this._maxX = currentPoint.x > this._startPoint.x ? currentPoint.x : this._startPoint.x; this._minY = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y; this._maxY = currentPoint.y > this._startPoint.y ? currentPoint.y : this._startPoint.y; if (hasCommandKey(event)) { if (event.shiftKey) { const normLength = 2 * calculateNormLegth(this._startPoint, currentPoint); this._px = this._startPoint.x - normLength / 2; this._py = this._startPoint.y - normLength / 2; this._path.setAttribute("width", (normLength).toString()); this._path.setAttribute("height", (normLength).toString()); } else { const w = 2 * (this._maxX - this._minX); const h = 2 * (this._maxY - this._minY); this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x - w / 2; this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y - h / 2; this._path.setAttribute("width", (w).toString()); this._path.setAttribute("height", (h).toString()); } this._path.setAttribute("x", this._px.toString()); this._path.setAttribute("y", this._py.toString()); } else { if (event.shiftKey) { const normLength = calculateNormLegth(this._startPoint, currentPoint); this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x; this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y; this._path.setAttribute("width", (normLength).toString()); this._path.setAttribute("height", (normLength).toString()); } else { this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x; this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y; this._path.setAttribute("width", (this._maxX - this._minX).toString()); this._path.setAttribute("height", (this._maxY - this._minY).toString()); } this._path.setAttribute("x", this._px.toString()); this._path.setAttribute("y", this._py.toString()); } } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); let coords = designerCanvas.getNormalizedElementCoordinates(this._path); designerCanvas.overlayLayer.removeOverlay(this._path); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const mvX = coords.x - offset; const mvY = coords.y - offset; const decimalPlaces = designerCanvas.serviceContainer.options.roundPixelsToDecimalPlaces; this._path.setAttribute("x", roundValueToDecimalPlaces(this._px - mvX, decimalPlaces)); this._path.setAttribute("y", roundValueToDecimalPlaces(this._py - mvY, decimalPlaces)); this._path.setAttribute("width", roundValueToDecimalPlaces(Number(this._path.getAttribute("width")), decimalPlaces)); this._path.setAttribute("height", roundValueToDecimalPlaces(Number(this._path.getAttribute("height")), decimalPlaces)); this._path.removeAttribute("stroke"); this._path.removeAttribute("stroke-width"); this._path.removeAttribute("overlay-source"); svg.appendChild(this._path); svg.style.left = roundValueToDecimalPlaces(mvX, decimalPlaces) + 'px'; svg.style.top = roundValueToDecimalPlaces(mvY, decimalPlaces) + 'px'; svg.style.position = 'absolute'; svg.style.width = Math.round(coords.width + 2 * offset) + 'px'; svg.style.height = Math.round(coords.height + 2 * offset) + 'px'; svg.style.overflow = 'visible'; svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor; svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness; this._path = null; const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); designerCanvas.serviceContainer.globalContext.finishedWithTool(this); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/ITool.ts ================================================ import { IDisposable } from '../../../../interfaces/IDisposable.js'; import { ServiceContainer } from "../../../services/ServiceContainer.js"; import { IDesignerCanvas } from '../IDesignerCanvas.js'; //TODO: in tools dispose should be renamed, tools will be reused, so maybe cancel would be better export interface ITool extends IDisposable { readonly cursor: string; activated(serviceContainer: ServiceContainer); pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element); keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement?: Element); } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/MagicWandSelectorTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { hasCommandKey } from '../../../helper/KeyboardHelper.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; export class MagicWandSelectorTool implements ITool { cursor: string = 'progress'; private _pathD: string; private _path: SVGPathElement; pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { if (hasCommandKey(event)) this.cursor = 'copy'; else if (event.altKey) this.cursor = 'default'; else this.cursor = 'default'; const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); switch (event.type) { case EventNames.PointerDown: (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); this._path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this._path.setAttribute('class', 'svg-selector'); this._path.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor); this._path.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor); this._pathD = "M" + currentPoint.x + " " + currentPoint.y; this._path.setAttribute("D", this._pathD); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foreground); break; case EventNames.PointerMove: if (this._path) { this._pathD += "L" + currentPoint.x + " " + currentPoint.y; this._path.setAttribute("d", this._pathD + "Z"); } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); const elements = designerCanvas.rootDesignItem.querySelectorAll('*'); const inSelectionElements: IDesignItem[] = []; if ((hasCommandKey(event) || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements) inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements); let point: DOMPointInit = designerCanvas.overlayLayer.createPoint(); for (let e of elements) { let elementRect = designerCanvas.getNormalizedElementCoordinates(e); point.x = elementRect.x; point.y = elementRect.y; const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point); point.x = elementRect.x + elementRect.width; point.y = elementRect.y; const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point); point.x = elementRect.x; point.y = elementRect.y + elementRect.height; const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point); point.x = elementRect.x + elementRect.width; point.y = elementRect.y + elementRect.height; const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point); if (p1 && p2 && p3 && p4) { const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); if (!inSelectionElements.includes(desItem) && !event.altKey) { inSelectionElements.push(desItem); } else if (event.altKey) { const idx = inSelectionElements.indexOf(desItem); inSelectionElements.splice(idx, 1) } } } designerCanvas.overlayLayer.removeOverlay(this._path); this._path = null; this._pathD = null; designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements); designerCanvas.serviceContainer.globalContext.finishedWithTool(this); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } activated(serviceContainer: ServiceContainer) { } dispose(): void { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/MarginTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { ChangeGroup } from '../../../services/undoService/ChangeGroup.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { NamedTools } from './NamedTools.js'; export class MarginTool implements ITool { readonly cursor: string = 'pointer'; private _changeGroup: ChangeGroup; pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { (designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer)).pointerEventHandler(designerCanvas, event, currentElement); } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { event.preventDefault(); const sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection; const cs = getComputedStyle(sel.element); let nm = "" switch (event.key) { case "ArrowLeft": nm = "margin-left"; break; case "ArrowRight": nm = "margin-right"; break; case "ArrowUp": nm = "margin-top"; break; case "ArrowDown": nm = "margin-bottom"; break; } if (nm) { if (event.type == EventNames.KeyDown && !this._changeGroup) this._changeGroup = sel.openGroup("change margin"); if (this._changeGroup) { sel.setStyleAsync(nm, (parseFloat(cs[nm]) + (event.altKey ? -1 : 1)) + "px"); if (event.type == EventNames.KeyUp) { this._changeGroup.commit(); this._changeGroup = null; } } } } activated(serviceContainer: ServiceContainer) { } dispose(): void { if (this._changeGroup) { this._changeGroup.abort(); this._changeGroup = null; } } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/NamedTools.ts ================================================ export enum NamedTools { Pointer = 'Pointer', DrawSelection = 'DrawSelection', DrawPath = 'DrawPath', DrawRect = 'DrawRect', DrawEllipsis = 'DrawEllipsis', DrawLine = 'DrawLine', Zoom = 'Zoom', Pan = 'Pan', MagicWandSelector = 'MagicWandSelector', RectangleSelector = 'RectangleSelector', PickColor = 'PickColor', Text = 'Text', DrawElementTool = "DrawElementTool", Guides = 'Guides', Inspect = 'Inspect', Accessibility = 'Accessibility', Position = 'Position', Padding = "Padding", Margin = 'Margin', Flexbox = 'Flexbox', Move = 'Move', HueShift = 'HueShift', BoxShadows = 'BoxShadows', FontStyles = 'FontStyles' } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/PaddingTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { ChangeGroup } from '../../../services/undoService/ChangeGroup.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { NamedTools } from './NamedTools.js'; export class PaddingTool implements ITool { readonly cursor: string = 'pointer'; private _changeGroup: ChangeGroup; pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { (designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer)).pointerEventHandler(designerCanvas, event, currentElement); } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { event.preventDefault(); const sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection; const cs = getComputedStyle(sel.element); let nm = "" switch (event.key) { case "ArrowLeft": nm = "padding-left"; break; case "ArrowRight": nm = "padding-right"; break; case "ArrowUp": nm = "padding-top"; break; case "ArrowDown": nm = "padding-bottom"; break; } if (nm) { if (event.type == EventNames.KeyDown && !this._changeGroup) this._changeGroup = sel.openGroup("change padding"); if (this._changeGroup) { sel.setStyleAsync(nm, (parseFloat(cs[nm]) + (event.altKey ? -1 : 1)) + "px"); if (event.type == EventNames.KeyUp) { this._changeGroup.commit(); this._changeGroup = null; } } } } activated(serviceContainer: ServiceContainer) { } dispose(): void { if (this._changeGroup) { this._changeGroup.abort(); this._changeGroup = null; } } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/PanTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; export class PanTool implements ITool { readonly cursor: string = 'grab'; pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { switch (event.type) { case EventNames.PointerDown: (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); break; case EventNames.PointerMove: if (event.buttons == 1 || event.buttons == 4) { designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor }; } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } activated(serviceContainer: ServiceContainer) { } dispose(): void { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/PickColorTool.ts ================================================ import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; export class PickColorTool implements ITool { readonly cursor = 'crosshair'; async activated(serviceContainer: ServiceContainer) { try { //@ts-ignore const eyeDropper = new EyeDropper(); const colorSelectionResult = await eyeDropper.open(); const color = colorSelectionResult.sRGBHex; serviceContainer.globalContext.strokeColor = color; } finally { serviceContainer.globalContext.finishedWithTool(this); } } async pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } dispose(): void { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/PointerTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { PointerActionType } from '../../../../enums/PointerActionType.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { IPlacementService } from '../../../services/placementService/IPlacementService.js'; import { ExtensionType } from '../extensions/ExtensionType.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; import { NamedTools } from './NamedTools.js'; import { ServiceContainer } from "../../../services/ServiceContainer.js"; import { ChangeGroup } from '../../../services/undoService/ChangeGroup.js'; import { hasCommandKey } from '../../../helper/KeyboardHelper.js'; export class PointerTool implements ITool { public cursor: string = 'default'; private _minMoveOffset = 5; private _movedSinceStartedAction: boolean = false; private _initialPoint: IPoint; private _actionType?: PointerActionType; private _actionStartedDesignItem?: IDesignItem; private _actionStartedClickDesignItem?: IDesignItem; private _actionStartedDesignItems?: IDesignItem[]; private _clonedItems?: IDesignItem[]; private _copiedItemsInserted = false; private _previousEventName: EventNames; private _dragOverExtensionItem: IDesignItem; private _dragParentExtensionItem: IDesignItem; private _moveItemsOffset: IPoint = { x: 0, y: 0 }; private _initialOffset: IPoint; private _started: boolean = false; private _holdTimeout: any; private _firstTimeInMove: boolean; private _secondTimeInMove: boolean; private _changeGroup: ChangeGroup constructor() { } activated(serviceContainer: ServiceContainer) { } dispose(): void { } private _showContextMenu(event: MouseEvent, designerCanvas: IDesignerCanvas) { event.preventDefault(); if (!hasCommandKey(event)) { let items = designerCanvas.elementsFromPoint(event.x, event.y); for (let e of designerCanvas.instanceServiceContainer.selectionService.selectedElements) { if (items.indexOf(e.element) >= 0) { designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event); return; } } let newEl = designerCanvas.serviceContainer.elementAtPointService.getElementAtPoint(designerCanvas, { x: event.x, y: event.y }); const designItem = DesignItem.GetOrCreateDesignItem(newEl, newEl, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) { designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem], event); } designerCanvas.showDesignItemContextMenu(designItem, event); } } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { if (hasCommandKey(event)) this.cursor = 'copy'; else this.cursor = 'default'; const interactionServices = designerCanvas.serviceContainer.elementInteractionServices; if (interactionServices) for (let s of interactionServices) { if (s.stopEventHandling(designerCanvas, event, currentElement)) return; } if (event.button == 2 && event.type == EventNames.PointerDown) { this._showContextMenu(event, designerCanvas) return; } if ((hasCommandKey(event) && event.shiftKey) || event.buttons == 4) { const panTool = designerCanvas.serviceContainer.designerTools.get(NamedTools.Pan); if (panTool) { panTool.pointerEventHandler(designerCanvas, event, currentElement); return; } } switch (event.type) { case EventNames.PointerDown: (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); this._movedSinceStartedAction = false; this._copiedItemsInserted = false; this._clonedItems = null; this._firstTimeInMove = false; this._secondTimeInMove = false; break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); this._copiedItemsInserted = false; this._clonedItems = null; this._firstTimeInMove = false; this._secondTimeInMove = false; break; case EventNames.PointerMove: if (this._firstTimeInMove) this._secondTimeInMove = true; if (this._secondTimeInMove) this._firstTimeInMove = false; else this._firstTimeInMove = true; break; } if (!currentElement) return; const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); if (this._actionType == null) { this._initialPoint = currentPoint; if (event.shiftKey) { event.preventDefault(); this._actionType = PointerActionType.DrawSelection; } else if (event.type == EventNames.PointerDown) { this._actionStartedDesignItem = currentDesignItem; this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements]; designerCanvas.snapLines.clearSnaplines(); if (currentDesignItem !== designerCanvas.rootDesignItem) { this._actionType = PointerActionType.Drag; } else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) { //if (!hasCommandKey(event) && !event.shiftKey) // designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null, event); this._actionType = PointerActionType.DrawSelection; } else { this._actionType = PointerActionType.DragOrSelect; } } } if (event.type === EventNames.PointerMove) { this._movedSinceStartedAction = this._movedSinceStartedAction || Math.abs(currentPoint.x - this._initialPoint.x) > this._minMoveOffset || Math.abs(currentPoint.y - this._initialPoint.y) > this._minMoveOffset; if (this._actionType == PointerActionType.DrawSelection) this._actionType = PointerActionType.DrawingSelection; } if (this._actionType == PointerActionType.DrawSelection || this._actionType == PointerActionType.DrawingSelection) { this._pointerActionTypeDrawSelection(designerCanvas, event, (currentElement)); } else if (this._actionType == PointerActionType.DragOrSelect || this._actionType == PointerActionType.Drag) { this._pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint); } if (event.type == EventNames.PointerUp) { designerCanvas.snapLines.clearSnaplines(); if (this._actionType == PointerActionType.DrawSelection) { if (currentDesignItem !== designerCanvas.rootDesignItem) designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem], event); } this._resetTool(); } this._previousEventName = event.type; } private _resetTool() { this._actionType = null; this._actionStartedDesignItem = null; this._actionStartedClickDesignItem = null; this._actionStartedDesignItems = null; this._movedSinceStartedAction = false; this._initialPoint = null; this._initialOffset = null; } private _pointerActionTypeDrawSelection(designerView: IDesignerCanvas, event: PointerEvent, currentElement: HTMLElement) { const drawSelectionTool = designerView.serviceContainer.designerTools.get(NamedTools.DrawSelection); if (drawSelectionTool) { this._resetTool(); drawSelectionTool.pointerEventHandler(designerView, event, currentElement); } } private async _pointerActionTypeDragOrSelect(designerCanvas: IDesignerCanvas, event: PointerEvent, currentDesignItem: IDesignItem, currentPoint: IPoint, raisedFromHold = false) { if (this._holdTimeout) { clearTimeout(this._holdTimeout); this._holdTimeout = null; } let clickDesignItem = currentDesignItem; if (event.altKey) { if (event.type == EventNames.PointerDown) { const currentSelection = designerCanvas.instanceServiceContainer.selectionService.primarySelection; if (currentSelection) { const elements = designerCanvas.elementsFromPoint(event.x, event.y); let idx = elements.indexOf(currentSelection.element); if (idx >= 0) { idx++; } let currentElement = elements[idx]; if (currentElement) currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); } } clickDesignItem = currentDesignItem; } else if (event.type == EventNames.PointerDown) { currentDesignItem = this._getDesignItemToStartDrag(designerCanvas, currentDesignItem, currentPoint); } switch (event.type) { case EventNames.PointerDown: { this._actionStartedClickDesignItem = clickDesignItem; this._actionStartedDesignItem = currentDesignItem; this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, this._actionStartedDesignItem.element); this._moveItemsOffset = { x: 0, y: 0 }; this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements]; if (designerCanvas.alignOnSnap) designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements); break; } case EventNames.PointerMove: { if (event.buttons == 0) { return; } if (this._firstTimeInMove) { const dragDesignItem = this._actionStartedDesignItem ?? currentDesignItem; if (!dragDesignItem.instanceServiceContainer.selectionService.selectedElements.includes(dragDesignItem)) { if (hasCommandKey(event)) dragDesignItem.instanceServiceContainer.selectionService.setSelectedElements([...dragDesignItem.instanceServiceContainer.selectionService.selectedElements, dragDesignItem], event); else dragDesignItem.instanceServiceContainer.selectionService.setSelectedElements([dragDesignItem], event); this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements]; if (designerCanvas.alignOnSnap) designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements); } } if (designerCanvas.readOnly) { return; } // *** Copy Items via Ctrl Drag *** if (!this._clonedItems) { this._clonedItems = []; for (let d of this._actionStartedDesignItems) { const clone = await d.clone(); if (this._clonedItems && clone) this._clonedItems.push(clone); } } if (!this._actionStartedDesignItem) return; if (!this._changeGroup) { this._changeGroup = designerCanvas.rootDesignItem.openGroup("Move Elements"); window.addEventListener('pointerup', () => { this._changeGroup?.abort(); this._changeGroup = null; }, { once: true }); } if (hasCommandKey(event) && !this._copiedItemsInserted) { this._changeGroup.title = "Copy Elements"; this._copiedItemsInserted = true; for (let i = 0; i < this._clonedItems.length; i++) { this._actionStartedDesignItems[i].insertAdjacentElement(this._clonedItems[i], 'beforebegin'); } //TODO: check if this is needed? designerCanvas.instanceServiceContainer.onContentChanged.emit({ changeType: 'added', designItems: this._clonedItems }); } else if (!hasCommandKey(event) && this._copiedItemsInserted) { this._changeGroup.title = "Move Elements"; for (let d of this._clonedItems) { d.remove(); } this._copiedItemsInserted = false; //TODO: check if this is needed? designerCanvas.instanceServiceContainer.onContentChanged.emit({ changeType: 'removed', designItems: this._clonedItems }); } // *** End Copy Items Part *** const elementMoved = currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y; if (this._actionType != PointerActionType.Drag && elementMoved) { this._actionType = PointerActionType.Drag; } if (this._movedSinceStartedAction) { const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element); const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle, this._actionStartedDesignItem)); if (currentContainerService) { const dragItem = this._actionStartedDesignItem.parent; if (this._dragParentExtensionItem != dragItem) { designerCanvas.extensionManager.removeExtension(this._dragParentExtensionItem, ExtensionType.ContainerDrag); designerCanvas.extensionManager.applyExtension(dragItem, ExtensionType.ContainerDrag, event); this._dragParentExtensionItem = dragItem; } else { designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag); } const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, this._actionStartedDesignItems); let newContainerElementDesignItem: IDesignItem = null; let newContainerService: IPlacementService = null; if (canLeave) { [newContainerElementDesignItem, newContainerService] = PointerTool.FindPossibleContainer(this._actionStartedDesignItem, this._actionStartedDesignItems, event); //if we found a new enterable container create extensions if (newContainerElementDesignItem != null) { if (this._dragOverExtensionItem != newContainerElementDesignItem) { designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered); designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event); this._dragOverExtensionItem = newContainerElementDesignItem; } else { designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event); } } else { if (this._dragOverExtensionItem) { designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered); this._dragOverExtensionItem = null; } } } if (newContainerService) { this._holdTimeout = setTimeout(() => { this._pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint, true); }, 1000); } if (newContainerService && (event.altKey || raisedFromHold)) { //TODO: all items, fix position const oldOffset = currentContainerService.getElementOffset(this._actionStartedDesignItem.parent, this._actionStartedDesignItem); const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem); this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y }; currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems); const cp: IPoint = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y }; newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems, 'normal'); newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems); designerCanvas.extensionManager.removeExtension(this._dragParentExtensionItem, ExtensionType.ContainerDrag); designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDrag, event); this._dragParentExtensionItem = newContainerElementDesignItem; designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered); this._dragOverExtensionItem = null; designerCanvas.extensionManager.refreshAllAppliedExtentions(); } else { const cp: IPoint = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y }; if (!this._started) { if (!currentContainerService.startPlacementAllowed || currentContainerService.startPlacementAllowed(event, designerCanvas, this._actionStartedDesignItem.parent, this._actionStartedDesignItems)) { for (const item of this._actionStartedDesignItems) { designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement); designerCanvas.extensionManager.removeExtension(item, ExtensionType.MouseOver); designerCanvas.extensionManager.applyExtension(item, ExtensionType.Placement, event); } currentContainerService.startPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems); this._started = true; } } else currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems); } designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems, null, event, null, 20); } } break; } case EventNames.PointerUp: { this._started = false; if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) { if (this._previousEventName == EventNames.PointerDown && !hasCommandKey(event)) { designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedClickDesignItem ?? this._actionStartedDesignItem], event); } else { this.checkSelectElement(event, designerCanvas, currentDesignItem); } return; } if (this._movedSinceStartedAction) { const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element); let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle, this._actionStartedDesignItem)) const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y }; if (containerService) { if (!this._changeGroup) this._changeGroup = designerCanvas.rootDesignItem.openGroup("Move Elements"); try { containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements); this._changeGroup.commit(); this._changeGroup = null; } catch (err) { console.error(err); this._changeGroup.abort(); } this._changeGroup = null; let elements = designerCanvas.elementsFromPoint(event.x, event.y); for (const item of this._actionStartedDesignItems) { if (elements.includes(item.element)) designerCanvas.extensionManager.applyExtension(item, ExtensionType.MouseOver, event); designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement); } } else { if (this._changeGroup) this._changeGroup.abort(); this._changeGroup = null; } designerCanvas.extensionManager.removeExtension(this._dragParentExtensionItem, ExtensionType.ContainerDrag); this._dragParentExtensionItem = null; designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered); this._dragOverExtensionItem = null; this._moveItemsOffset = { x: 0, y: 0 }; } designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements, null, event, null, 20); if (this._changeGroup) { this._changeGroup.abort(); this._changeGroup = null; } break; } } } private _getDesignItemToStartDrag(designerCanvas: IDesignerCanvas, currentDesignItem: IDesignItem, currentPoint: IPoint): IDesignItem { const selectedElements = designerCanvas.instanceServiceContainer.selectionService.selectedElements; if (!selectedElements?.length || currentDesignItem.isRootItem || selectedElements.includes(currentDesignItem)) { return currentDesignItem; } for (const designItem of selectedElements) { if (!designItem || designItem.isRootItem || designItem === currentDesignItem) { continue; } if (this._isPointInsideDesignItemQuad(designerCanvas, designItem, currentPoint)) { return designItem; } } return currentDesignItem; } private _isPointInsideDesignItemQuad(designerCanvas: IDesignerCanvas, designItem: IDesignItem, point: IPoint): boolean { const quad = designItem.element.getBoxQuads({ box: 'border', relativeTo: designerCanvas.canvas, iframes: designerCanvas.iframes })[0]; if (!quad) { return false; } return this._isPointInsideQuad(point, quad); } private _isPointInsideQuad(point: IPoint, quad: DOMQuad): boolean { const points = [quad.p1, quad.p2, quad.p3, quad.p4]; for (let i = 0; i < points.length; i++) { const start = points[i]; const end = points[(i + 1) % points.length]; if (this._isPointOnSegment(point, start, end)) { return true; } } let inside = false; for (let i = 0, j = points.length - 1; i < points.length; j = i++) { const start = points[i]; const end = points[j]; const intersects = ((start.y > point.y) !== (end.y > point.y)) && (point.x < ((end.x - start.x) * (point.y - start.y)) / ((end.y - start.y) || Number.EPSILON) + start.x); if (intersects) { inside = !inside; } } return inside; } private _isPointOnSegment(point: IPoint, start: DOMPoint, end: DOMPoint): boolean { const epsilon = 0.0001; const crossProduct = (point.y - start.y) * (end.x - start.x) - (point.x - start.x) * (end.y - start.y); if (Math.abs(crossProduct) > epsilon) { return false; } const dotProduct = (point.x - start.x) * (end.x - start.x) + (point.y - start.y) * (end.y - start.y); if (dotProduct < -epsilon) { return false; } const squaredLength = (end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y); return dotProduct <= squaredLength + epsilon; } private checkSelectElement(event: PointerEvent, designerCanvas: IDesignerCanvas, currentDesignItem: IDesignItem) { if (hasCommandKey(event)) { const index = designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem); if (index >= 0) { let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0); newSelectedList.splice(index, 1); designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList, event); } else { let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0); newSelectedList.push(currentDesignItem); designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList, event); } } else { if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0) designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem], event); } } static FindPossibleContainer(designItem: IDesignItem, designItems: IDesignItem[], event: IPoint): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService] { let newContainerElementDesignItem: IDesignItem = null; let newContainerService: IPlacementService = null; const designerCanvas = designItem.instanceServiceContainer.designerCanvas; const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y); elementsFromPoint.push(designerCanvas.rootDesignItem.element); for (let e of elementsFromPoint) { if (e == designItem.element) { continue; } else if (e == designItem.parent.element) { break; } else if (e == designerCanvas.rootDesignItem.element) { newContainerElementDesignItem = designerCanvas.rootDesignItem; const containerStyle = getComputedStyle(newContainerElementDesignItem.element); newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle, designItem)); if (newContainerService) { if (newContainerService.canEnter(newContainerElementDesignItem, designItems)) { break; } else { newContainerElementDesignItem = null; newContainerService = null; break; } } break; } else if (false) { //check we don't try to move a item over one of its children.. } else { newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); const containerStyle = getComputedStyle(newContainerElementDesignItem.element); newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle, designItem)); if (newContainerService) { if (newContainerService.canEnter(newContainerElementDesignItem, designItems)) { break; } else { newContainerElementDesignItem = null; newContainerService = null; continue; } } } } return [newContainerElementDesignItem, newContainerService]; } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/RectangleSelectorTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { hasCommandKey } from '../../../helper/KeyboardHelper.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { IDesignItem } from '../../../item/IDesignItem.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; export class RectangleSelectorTool implements ITool { cursor: string = 'progress'; private _rect: SVGRectElement; private _initialPoint: IPoint; activated(serviceContainer: ServiceContainer) { } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { if (hasCommandKey(event) || event.shiftKey) this.cursor = 'copy'; else if (event.altKey) this.cursor = 'default'; else this.cursor = 'default'; const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); switch (event.type) { case EventNames.PointerDown: (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); this._initialPoint = currentPoint; if (!this._rect) this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); this._rect.setAttribute('class', 'svg-selector'); this._rect.setAttribute('x', (this._initialPoint.x * designerCanvas.scaleFactor)); this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor)); this._rect.setAttribute('width', 0); this._rect.setAttribute('height', 0); this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor); this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground); break; case EventNames.PointerMove: if (this._initialPoint) { let w = currentPoint.x - this._initialPoint.x; let h = currentPoint.y - this._initialPoint.y; if (w >= 0) { this._rect.setAttribute('x', this._initialPoint.x); this._rect.setAttribute('width', w); } else { this._rect.setAttribute('x', currentPoint.x); this._rect.setAttribute('width', (-1 * w)); } if (h >= 0) { this._rect.setAttribute('y', this._initialPoint.y); this._rect.setAttribute('height', h); } else { this._rect.setAttribute('y', currentPoint.y); this._rect.setAttribute('height', (-1 * h)); } } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); const elements = designerCanvas.rootDesignItem.querySelectorAll('*'); let inSelectionElements: IDesignItem[] = []; if ((hasCommandKey(event) || event.shiftKey || event.altKey) && designerCanvas.instanceServiceContainer.selectionService.selectedElements) inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements); let point = designerCanvas.overlayLayer.createPoint(); for (let e of elements) { let elementRect = designerCanvas.getNormalizedElementCoordinates(e); point.x = elementRect.x; point.y = elementRect.y; const p1 = this._rect.isPointInFill(point); point.x = elementRect.x + elementRect.width; point.y = elementRect.y; const p2 = p1 && this._rect.isPointInFill(point); point.x = elementRect.x; point.y = elementRect.y + elementRect.height; const p3 = p2 && this._rect.isPointInFill(point); point.x = elementRect.x + elementRect.width; point.y = elementRect.y + elementRect.height; const p4 = p3 && this._rect.isPointInFill(point); if (p4) { const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); if (!inSelectionElements.includes(desItem) && !event.altKey) { inSelectionElements.push(desItem); } else if (event.altKey) { const idx = inSelectionElements.indexOf(desItem); inSelectionElements.splice(idx, 1) } } } designerCanvas.overlayLayer.removeOverlay(this._rect); this._rect = null; this._initialPoint = null; designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements, event); designerCanvas.serviceContainer.globalContext.finishedWithTool(this); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } dispose(): void { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/TextTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { DesignItem } from '../../../item/DesignItem.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js'; import { EditTextExtension, handlesPointerEvent } from '../extensions/EditText/EditTextExtension.js'; import { IDesignerExtension } from '../extensions/IDesignerExtension.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; export class TextTool implements ITool { private _textEditExtensions: IDesignerExtension[]; constructor(editExistingText?: boolean) { if (editExistingText) this._editExistingText = true; } activated(serviceContainer: ServiceContainer) { this._textCreated = false; } dispose(): void { } readonly cursor = 'text'; private _textCreated = false; private _editExistingText = false; pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { const currentPoint = designerCanvas.getNormalizedEventCoordinates(event); switch (event.type) { case EventNames.PointerDown: if (!this._textCreated && !this._editExistingText) { this._textCreated = true; const span = document.createElement('span') const di = DesignItem.createDesignItemFromInstance(span, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); di.setStyle('position', 'absolute'); di.setStyle('left', currentPoint.x + 'px'); di.setStyle('top', currentPoint.y + 'px'); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); designerCanvas.extensionManager.applyExtensionInstance(di, new EditTextExtension(designerCanvas.extensionManager, designerCanvas, di)); designerCanvas.serviceContainer.globalContext.finishedWithTool(this); setTimeout(() => { span.focus(); }, 50); } else { for (let e of this._textEditExtensions) { if ((e).handlesPointerEvent) { const ret = (e).handlesPointerEvent(designerCanvas, event, currentElement); if (!ret) { designerCanvas.serviceContainer.globalContext.finishedWithTool(this); } } } } break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/ZoomTool.ts ================================================ import { EventNames } from '../../../../enums/EventNames.js'; import { IPoint } from '../../../../interfaces/IPoint.js'; import { ServiceContainer } from '../../../services/ServiceContainer.js'; import { OverlayLayer } from '../extensions/OverlayLayer.js'; import { IDesignerCanvas } from '../IDesignerCanvas.js'; import { ITool } from './ITool.js'; export class ZoomTool implements ITool { cursor: string = 'zoom-in'; private _rect: SVGRectElement; private _startPoint: IPoint; private _endPoint: IPoint; private _pointerMovementTolerance: number = 5; private _zoomStepSize: number = 0.2; //number x 100 = Scale in percent activated(serviceContainer: ServiceContainer) { } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { const eventPoint = designerCanvas.getNormalizedEventCoordinates(event); switch (event.type) { case EventNames.PointerDown: (event.target).setPointerCapture(event.pointerId); designerCanvas.captureActiveTool(this); this._startPoint = eventPoint; if (!this._rect) this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); this._rect.setAttribute('class', 'svg-selector'); this._rect.setAttribute('x', (this._startPoint.x * designerCanvas.zoomFactor)); this._rect.setAttribute('y', (this._startPoint.y * designerCanvas.zoomFactor)); this._rect.setAttribute('width', 0); this._rect.setAttribute('height', 0); this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor); this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground); break; case EventNames.PointerMove: if (this._startPoint) { let width = eventPoint.x - this._startPoint.x; let height = eventPoint.y - this._startPoint.y; if (width >= 0) { this._rect.setAttribute('x', this._startPoint.x); this._rect.setAttribute('width', width); } else { this._rect.setAttribute('x', eventPoint.x); this._rect.setAttribute('width', (-1 * width)); } if (height >= 0) { this._rect.setAttribute('y', this._startPoint.y); this._rect.setAttribute('height', height); } else { this._rect.setAttribute('y', eventPoint.y); this._rect.setAttribute('height', (-1 * height)); } } break; case EventNames.PointerUp: (event.target).releasePointerCapture(event.pointerId); designerCanvas.releaseActiveTool(); this._endPoint = eventPoint; let isLeftClick: boolean = event.button == 0; switch (event.button) { case 0: //Left-Click case 2: //Right-Click this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas); break; } designerCanvas.overlayLayer.removeOverlay(this._rect); this._rect = null; this._startPoint = null; break; } } private _zoomOnto(isZoomInto: boolean, startPoint: IPoint, endPoint: IPoint, designerCanvas: IDesignerCanvas) { if (this._isPositionEqual(startPoint, endPoint)) { const oldZoom = designerCanvas.zoomFactor; const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize; designerCanvas.zoomTowardsPoint(endPoint, newZoom); } else { designerCanvas.zoomOntoRectangle(startPoint, endPoint); } } private _isPositionEqual(startPoint: IPoint, endPoint: IPoint) { let tolerance = this._pointerMovementTolerance; return Math.abs(startPoint.x - endPoint.x) <= tolerance && Math.abs(startPoint.y - endPoint.y) <= tolerance; } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element) { } dispose(): void { } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/DesignerToolbar.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { CommandType } from "../../../../../commandHandling/CommandType.js"; import { ServiceContainer } from "../../../../services/ServiceContainer.js"; import { DesignerView } from "../../designerView.js"; import { DesignerToolbarButton } from './DesignerToolbarButton.js'; import { DraggableToolWindow } from './popups/DraggableToolWindow.js'; export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` node-projects-designer-tools-buttons { height: 100%; width: 100%; } #toolButtons { scrollbar-width: none; /* for Firefox */ overflow-y: auto; height: 100%; } #toolButtons::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } #popup { position: absolute; top: calc(0px + 10px); height: 100%; left: calc(24px + 4px + 10px); }`; static override readonly template = html`
`; private _toolButtonsElem: HTMLDivElement; private _serviceContainer: ServiceContainer; private _popupContainer: HTMLDivElement; public designerView: DesignerView; constructor() { super(); this._toolButtonsElem = this._getDomElement("toolButtons"); this._toolButtonsElem.onwheel = (e) => e.stopPropagation(); this._popupContainer = this._getDomElement("popup"); } public initialize(serviceContainer: ServiceContainer, designerView: DesignerView) { this._serviceContainer = serviceContainer; this.designerView = designerView; for (let tb of this._serviceContainer.designViewToolbarButtons) { this._toolButtonsElem.appendChild(tb.provideButton(designerView.designerCanvas)); } this._serviceContainer.globalContext.onToolChanged.on((e) => { for (const el of this._toolButtonsElem.children) { if (el instanceof DesignerToolbarButton) { el.setActiveTool(e.newValue.name); } } }); } public showPopup(designerToolbarButton: DesignerToolbarButton) { if (this._popupContainer.children.length) { this._popupContainer.innerHTML = ''; } else { let instance: HTMLElement; if (typeof designerToolbarButton.popup === 'string') instance = document.createElement(designerToolbarButton.popup); else instance = new designerToolbarButton.popup(this.designerView.designerCanvas); if (instance instanceof DraggableToolWindow) { DraggableToolWindow.showWindow(instance, designerToolbarButton); } else { this._popupContainer.appendChild(instance); } } } public setTool(tool: string) { if (this._popupContainer.children.length) { this._popupContainer.innerHTML = ''; } this.designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool }); } } customElements.define('node-projects-designer-toolbar', DesignerToolbar); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/DesignerToolbarButton.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent'; import { IDesignerCanvas } from '../../IDesignerCanvas.js'; import { NamedTools } from '../NamedTools.js'; import { DesignerToolbar } from './DesignerToolbar.js'; export class DesignerToolbarButton extends BaseCustomWebComponentConstructorAppend { static override style = css` div { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; background-color: inherit; } div:hover { background-color: darkgray; } img { width: calc(100% - 4px); height: calc(100% - 4px); -webkit-user-drag: none; } `; static override template = html`
`; public tools: Record; public popup: string | (new (designerCanvas?: IDesignerCanvas) => HTMLElement); public currentToolOnButton: string; private _img: HTMLImageElement; private _div: HTMLImageElement; private _longPress; constructor(designerCanvas: IDesignerCanvas, tools: Record) { super(); this.tools = tools; this._img = this._getDomElement('img'); this._div = this._getDomElement('div'); this._div.onpointerdown = () => { if (this.currentToolOnButton) { ((this.getRootNode()).host).setTool(this.currentToolOnButton); setTimeout(() => { designerCanvas.clickOverlay.focus(); }, 50); if (this.popup) { this._longPress = setTimeout(() => { this._longPress = null; ((this.getRootNode()).host).showPopup(this); }, 200) } } else if (this.popup) ((this.getRootNode()).host).showPopup(this); }; this._div.onpointerup = () => { if (this._longPress) { clearTimeout(this._longPress); this._longPress = null; } }; this.showTool(Object.getOwnPropertyNames(tools)[0]) } public showTool(name: string) { const tool = this.tools[name]; if (tool) { this._img.title = name this._img.src = tool.icon; this.currentToolOnButton = name; } } public setActiveTool(name: string) { this.showTool(name); const tool = this.tools[name]; if (tool) { this._div.style.backgroundColor = 'lightgreen'; } else { this._div.style.backgroundColor = ''; } } } customElements.define('node-projects-designer-toolbar-button', DesignerToolbarButton); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/IDesignViewToolbarButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../IDesignerCanvas.js"; export interface IDesignViewToolbarButtonProvider { provideButton(designerCanvas: IDesignerCanvas): HTMLElement } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; import { assetsPath } from "../../../../../../Constants.js"; import { DrawToolPopup } from "../popups/DrawToolPopup.js"; export class DrawToolButtonProvider implements IDesignViewToolbarButtonProvider { provideButton(designerCanvas: IDesignerCanvas): HTMLElement { if (designerCanvas.readOnly) return null; const button = new DesignerToolbarButton(designerCanvas, { 'DrawLine': { icon: assetsPath + 'images/tools/DrawLineTool.svg' }, 'DrawPath': { icon: assetsPath + 'images/tools/DrawPathTool.svg' }, 'DrawRect': { icon: assetsPath + 'images/tools/DrawRectTool.svg' }, 'DrawEllipsis': { icon: assetsPath + 'images/tools/DrawEllipTool.svg' }, 'PickColor': { icon: assetsPath + 'images/tools/ColorPickerTool.svg' } }); button.popup = DrawToolPopup return button; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; import { assetsPath } from "../../../../../../Constants.js"; import { PointerToolPopup } from "../popups/PointerToolPopup.js"; export class PointerToolButtonProvider implements IDesignViewToolbarButtonProvider { provideButton(designerCanvas: IDesignerCanvas): HTMLElement { const button = new DesignerToolbarButton(designerCanvas, { 'Pointer': { icon: assetsPath + 'images/tools/PointerTool.svg' } }); button.popup = PointerToolPopup return button; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; import { assetsPath } from "../../../../../../Constants.js"; import { SelectionToolPopup } from "../popups/SelectionToolPopup.js"; export class SelectorToolButtonProvider implements IDesignViewToolbarButtonProvider { provideButton(designerCanvas: IDesignerCanvas): HTMLElement { const button = new DesignerToolbarButton(designerCanvas, { 'RectangleSelector': { icon: assetsPath + 'images/tools/SelectRectTool.svg' }, 'MagicWandSelector': { icon: assetsPath + 'images/tools/MagicWandTool.svg' } }); button.popup = SelectionToolPopup return button; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; export class SeperatorToolProvider implements IDesignViewToolbarButtonProvider { constructor(distance: number) { this.distance = distance; } distance: number; provideButton(designerCanvas: IDesignerCanvas): HTMLElement { const div = document.createElement('div'); div.style.marginTop = this.distance + 'px'; return div; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/SimpleToolButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; export class SimpleToolButtonProvider implements IDesignViewToolbarButtonProvider { private _name: string; private _icon: string; constructor(name: string, icon: string) { this._name = name; this._icon = icon; } provideButton(designerCanvas: IDesignerCanvas): HTMLElement { let obj = {}; obj[this._name] = { icon: this._icon } return new DesignerToolbarButton(designerCanvas, obj); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; import { assetsPath } from "../../../../../../Constants.js"; export class TextToolButtonProvider implements IDesignViewToolbarButtonProvider { provideButton(designerCanvas: IDesignerCanvas): HTMLElement { if (designerCanvas.readOnly) return null; return new DesignerToolbarButton(designerCanvas, { 'Text': { icon: assetsPath + 'images/tools/TextTool.svg' } }); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; import { assetsPath } from "../../../../../../Constants.js"; import { TransformToolPopup } from "../popups/TransformToolPopup.js"; export class TransformToolButtonProvider implements IDesignViewToolbarButtonProvider { provideButton(designerCanvas: IDesignerCanvas): HTMLElement { if (designerCanvas.readOnly) return null; const button = new DesignerToolbarButton(designerCanvas, { '': { icon: assetsPath + 'images/tools/TransformTool.svg' } }); button.popup = TransformToolPopup; return button; } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.ts ================================================ import { IDesignerCanvas } from "../../../IDesignerCanvas.js"; import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js"; import { DesignerToolbarButton } from '../DesignerToolbarButton.js'; import { assetsPath } from "../../../../../../Constants.js"; export class ZoomToolButtonProvider implements IDesignViewToolbarButtonProvider { provideButton(designerCanvas: IDesignerCanvas): HTMLElement { return new DesignerToolbarButton(designerCanvas, { 'Zoom': { icon: assetsPath + 'images/tools/ZoomTool.svg' } }); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/AbstractBaseToolPopup.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent'; import { DesignerToolbar } from '../DesignerToolbar.js'; export abstract class AbstractBaseToolPopup extends BaseCustomWebComponentConstructorAppend { static override style: CSSStyleSheet | CSSStyleSheet[] = css` .container { width: 120px; min-height: 100px; color: white; background-color: rgb(64, 64, 64); border: 1px solid black; } header { text-align: center; } .tool { height: 32px; width: 32px; background-color: rgb(255, 255, 255); background-size: 65%; background-repeat: no-repeat; background-position: center center; flex-shrink: 0; border-bottom: 1px solid black; } .tools { display: flex; flex-wrap: wrap; margin-bottom: 5px; gap: 3px; }` constructor() { super(); for (let e of [...this.shadowRoot.querySelectorAll("div.tool")]) { let div = (e); div.onclick = () => ((this.getRootNode()).host).setTool(div.dataset['commandParameter']); } } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/BorderRadiusEditorWindow.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { DraggableToolWindow } from './DraggableToolWindow.js'; import { IDesignerCanvas } from '../../../IDesignerCanvas.js'; interface BorderRadiusCorner { x: number; // horizontal radius (%) y: number; // vertical radius (%) shape: 'round' | 'bevel' | 'scoop' | 'inset' | 'notch'; // corner-shape } interface BorderSide { width: number; // px style: string; // solid, dashed, dotted, etc. color: string; // hex color opacity: number; // 0-100 } interface BorderConfig { topLeft: BorderRadiusCorner; topRight: BorderRadiusCorner; bottomRight: BorderRadiusCorner; bottomLeft: BorderRadiusCorner; uniform: boolean; // if true, all corners are the same // Border properties width: number; // px (uniform across all sides) borderUniform: boolean; // if true, style and color are uniform top: BorderSide; right: BorderSide; bottom: BorderSide; left: BorderSide; } function defaultCorner(): BorderRadiusCorner { return { x: 0, y: 0, shape: 'round' }; } function defaultSide(): BorderSide { return { width: 1, style: 'solid', color: '#000000', opacity: 100 }; } function defaultConfig(): BorderConfig { return { topLeft: { ...defaultCorner() }, topRight: { ...defaultCorner() }, bottomRight: { ...defaultCorner() }, bottomLeft: { ...defaultCorner() }, uniform: true, width: 1, borderUniform: true, top: { ...defaultSide() }, right: { ...defaultSide() }, bottom: { ...defaultSide() }, left: { ...defaultSide() }, }; } function hexToRgb(hex: string): string { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `${r},${g},${b}`; } function radiusToCss(c: BorderRadiusCorner): string { return c.x === c.y ? `${c.x}%` : `${c.x}% ${c.y}%`; } function configToRadiusCss(cfg: BorderConfig): string { const corners = [cfg.topLeft, cfg.topRight, cfg.bottomRight, cfg.bottomLeft]; const xs = corners.map(c => `${c.x}%`); const ys = corners.map(c => `${c.y}%`); const allCornersSame = corners.every(c => c.x === corners[0].x && c.y === corners[0].y); if (allCornersSame) return radiusToCss(corners[0]); const allCircular = corners.every(c => c.x === c.y); if (allCircular) return xs.join(' '); return `${xs.join(' ')} / ${ys.join(' ')}`; } function configToShapeCss(cfg: BorderConfig): string | null { const shapes = [cfg.topLeft.shape, cfg.topRight.shape, cfg.bottomRight.shape, cfg.bottomLeft.shape]; const allRound = shapes.every(s => s === 'round'); if (allRound) return null; // Don't output corner-shape if all are round (the default) const allSame = shapes[0] === shapes[1] && shapes[1] === shapes[2] && shapes[2] === shapes[3]; if (allSame) return shapes[0]; return shapes.join(' '); } function configToBorderCss(cfg: BorderConfig): { width: string; style: string; color: string } { const width = cfg.width > 0 ? `${cfg.width}px` : '0px'; if (cfg.borderUniform) { // Uniform border style and color const { style, color, opacity } = cfg.top; const rgba = `${hexToRgb(color)},${(opacity / 100).toFixed(2)}`; return { width, style, color: `rgba(${rgba})`, }; } else { // Per-side border style and color const sides = [cfg.top, cfg.right, cfg.bottom, cfg.left]; const styles = sides.map(s => s.style); const colors = sides.map(s => { const rgba = `${hexToRgb(s.color)},${(s.opacity / 100).toFixed(2)}`; return `rgba(${rgba})`; }); const styleCss = styles[0] === styles[1] && styles[1] === styles[2] && styles[2] === styles[3] ? styles[0] : styles.join(' '); const colorCss = colors[0] === colors[1] && colors[1] === colors[2] && colors[2] === colors[3] ? colors[0] : colors.join(' '); return { width, style: styleCss, color: colorCss, }; } } // Parse "10px 20px 30px 40px / 10px 20px 30px 40px" format // or just "10% 20% 30% 40%" format function parseCornerRadius(value: string): BorderConfig { const cfg = defaultConfig(); if (!value) return cfg; value = value.trim(); if (!value) return cfg; // Parse radius: "X1% X2% X3% X4% / Y1% Y2% Y3% Y4%" or simpler formats const parts = value.split('/').map(p => p.trim()); const xStr = parts[0] ?? ''; const yStr = parts[1] ?? xStr; // if no Y values, use X values const parseTokens = (str: string): number[] => { return str.split(/\s+/).map(t => { const n = parseFloat(t); return isNaN(n) ? 0 : n; }); }; const xTokens = parseTokens(xStr); const yTokens = parseTokens(yStr); // Fill in corners: 1→all, 2→[TL/BR, TR/BL], 3→[TL, TR/BL, BR], 4→[TL, TR, BR, BL] const getVal = (tokens: number[], idx: number): number => { if (tokens.length === 1) return tokens[0]; if (tokens.length === 2) return tokens[idx === 1 || idx === 2 ? 1 : 0]; if (tokens.length === 3) return tokens[idx === 3 ? 1 : (idx === 2 ? 2 : 0)]; return tokens[idx] ?? 0; }; cfg.topLeft.x = getVal(xTokens, 0); cfg.topRight.x = getVal(xTokens, 1); cfg.bottomRight.x = getVal(xTokens, 2); cfg.bottomLeft.x = getVal(xTokens, 3); cfg.topLeft.y = getVal(yTokens, 0); cfg.topRight.y = getVal(yTokens, 1); cfg.bottomRight.y = getVal(yTokens, 2); cfg.bottomLeft.y = getVal(yTokens, 3); return cfg; } function splitTopLevelWhitespace(value: string): string[] { const tokens: string[] = []; let depth = 0; let current = ''; for (const ch of value.trim()) { if (ch === '(') depth++; else if (ch === ')') depth--; if (/\s/.test(ch) && depth === 0) { const trimmed = current.trim(); if (trimmed) tokens.push(trimmed); current = ''; continue; } current += ch; } const trimmed = current.trim(); if (trimmed) tokens.push(trimmed); return tokens; } function expandQuadTokens(tokens: T[]): [T | undefined, T | undefined, T | undefined, T | undefined] { if (tokens.length === 1) return [tokens[0], tokens[0], tokens[0], tokens[0]]; if (tokens.length === 2) return [tokens[0], tokens[1], tokens[0], tokens[1]]; if (tokens.length === 3) return [tokens[0], tokens[1], tokens[2], tokens[1]]; return [tokens[0], tokens[1], tokens[2], tokens[3]]; } export class BorderRadiusEditorWindow extends DraggableToolWindow { private _designerCanvas: IDesignerCanvas; private _config: BorderConfig = defaultConfig(); private _previewBox: HTMLDivElement; private _uniformCheck: HTMLInputElement; // Unified corner controls private _uniformXInput: HTMLInputElement; private _uniformYInput: HTMLInputElement; private _uniformShapeSelect: HTMLSelectElement; private _uniformXVal: HTMLSpanElement; private _uniformYVal: HTMLSpanElement; // Top-left private _tlXInput: HTMLInputElement; private _tlYInput: HTMLInputElement; private _tlShapeSelect: HTMLSelectElement; private _tlXVal: HTMLSpanElement; private _tlYVal: HTMLSpanElement; // Top-right private _trXInput: HTMLInputElement; private _trYInput: HTMLInputElement; private _trShapeSelect: HTMLSelectElement; private _trXVal: HTMLSpanElement; private _trYVal: HTMLSpanElement; // Bottom-right private _brXInput: HTMLInputElement; private _brYInput: HTMLInputElement; private _brShapeSelect: HTMLSelectElement; private _brXVal: HTMLSpanElement; private _brYVal: HTMLSpanElement; // Bottom-left private _blXInput: HTMLInputElement; private _blYInput: HTMLInputElement; private _blShapeSelect: HTMLSelectElement; private _blXVal: HTMLSpanElement; private _blYVal: HTMLSpanElement; // Section divs private _cornersUniformDiv: HTMLDivElement; private _cornersPersideDiv: HTMLDivElement; // Border controls private _widthInput: HTMLInputElement; private _borderUniformCheck: HTMLInputElement; private _widthVal: HTMLSpanElement; // Uniform border controls private _styleSelect: HTMLSelectElement; private _colorInput: HTMLInputElement; private _opacityInput: HTMLInputElement; private _opacityVal: HTMLSpanElement; // Per-side border controls private _topStyleSelect: HTMLSelectElement; private _topWidthInput: HTMLInputElement; private _topWidthVal: HTMLSpanElement; private _topColorInput: HTMLInputElement; private _topOpacityInput: HTMLInputElement; private _topOpacityVal: HTMLSpanElement; private _rightStyleSelect: HTMLSelectElement; private _rightWidthInput: HTMLInputElement; private _rightWidthVal: HTMLSpanElement; private _rightColorInput: HTMLInputElement; private _rightOpacityInput: HTMLInputElement; private _rightOpacityVal: HTMLSpanElement; private _bottomStyleSelect: HTMLSelectElement; private _bottomWidthInput: HTMLInputElement; private _bottomWidthVal: HTMLSpanElement; private _bottomColorInput: HTMLInputElement; private _bottomOpacityInput: HTMLInputElement; private _bottomOpacityVal: HTMLSpanElement; private _leftStyleSelect: HTMLSelectElement; private _leftWidthInput: HTMLInputElement; private _leftWidthVal: HTMLSpanElement; private _leftColorInput: HTMLInputElement; private _leftOpacityInput: HTMLInputElement; private _leftOpacityVal: HTMLSpanElement; private _borderUniformDiv: HTMLDivElement; private _borderPersideDiv: HTMLDivElement; private _cssOutput: HTMLTextAreaElement; private _loadBtn: HTMLButtonElement; private _copyBtn: HTMLButtonElement; private _applyBtn: HTMLButtonElement; protected override get windowTitle(): string { return 'Border Radius Editor'; } protected override get windowContentStyle(): CSSStyleSheet { return css` * { box-sizing: border-box; } .bre-root { display: flex; flex-direction: column; width: 860px; max-width: calc(100vw - 48px); color: #ddd; font-family: sans-serif; font-size: 12px; gap: 4px; padding: 6px; background: #2a2a2a; } .editors-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; } .section-column { display: flex; flex-direction: column; gap: 4px; } .preview-area { background: #1a1a1a; border: 1px solid #444; border-radius: 3px; height: 70px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .preview-box { width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 0; } .uniform-row { display: flex; align-items: center; gap: 6px; font-size: 11px; } .uniform-row label { display: flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; color: #aaa; } .uniform-row input[type=checkbox] { cursor: pointer; width: 14px; height: 14px; } .section-header { color: #999; font-size: 10px; font-weight: bold; margin-top: 3px; margin-bottom: 2px; text-transform: uppercase; } .corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .separate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .corner-section { background: #1e1e1e; border: 1px solid #444; border-radius: 2px; padding: 4px; } .corner-header { color: #888; font-size: 10px; margin-bottom: 3px; font-weight: bold; } .corner-row { display: grid; grid-template-columns: 35px 1fr 24px; gap: 2px 3px; align-items: center; margin-bottom: 2px; } .corner-row:last-child { margin-bottom: 0; } .corner-row label { color: #888; font-size: 10px; } .corner-row input[type=range] { width: 100%; height: 16px; } .corner-row input[type=color] { width: 100%; height: 18px; cursor: pointer; } .corner-row .val-label { text-align: right; color: #777; font-size: 9px; } .bre-root select { background: #2e2e2e; color: #ddd; border: 1px solid #555; border-radius: 2px; padding: 2px 3px; font-size: 10px; height: 18px; } .corner-row select { grid-column: 1 / -1; } .side-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } @media (max-width: 900px) { .bre-root { width: 420px; } .editors-row { grid-template-columns: 1fr; } } .separator { height: 1px; background: #444; margin: 2px 0; } .css-out { background: #1e1e1e; border: 1px solid #333; border-radius: 3px; color: #7ec8e3; font-family: monospace; font-size: 10px; padding: 4px; resize: none; width: 100%; height: 50px; } .actions { display: flex; gap: 4px; justify-content: flex-end; } .actions .load-btn { margin-right: auto; } .actions button, .apply-btn { padding: 3px 10px; background: #3a3a3a; color: #ddd; border: 1px solid #555; border-radius: 2px; cursor: pointer; font-size: 11px; } .actions button:hover, .apply-btn:hover { background: #555; } .apply-btn { background: #3a6a9a; border-color: #2a5a8a; } .apply-btn:hover { background: #4a7aaa; } `; } protected override get windowTemplate(): string { return `
Corners
0%
0%
Border
0px
100%
`; } constructor(designerCanvas?: IDesignerCanvas) { super(); this._designerCanvas = designerCanvas; this._previewBox = this._getDomElement('bre-preview'); this._uniformCheck = this._getDomElement('bre-uniform'); // Unified corner controls this._uniformXInput = this._getDomElement('bre-uniform-x'); this._uniformYInput = this._getDomElement('bre-uniform-y'); this._uniformShapeSelect = this._getDomElement('bre-uniform-shape'); this._uniformXVal = this._getDomElement('bre-uniform-x-val'); this._uniformYVal = this._getDomElement('bre-uniform-y-val'); // Top-left this._tlXInput = this._getDomElement('bre-tl-x'); this._tlYInput = this._getDomElement('bre-tl-y'); this._tlShapeSelect = this._getDomElement('bre-tl-shape'); this._tlXVal = this._getDomElement('bre-tl-x-val'); this._tlYVal = this._getDomElement('bre-tl-y-val'); // Top-right this._trXInput = this._getDomElement('bre-tr-x'); this._trYInput = this._getDomElement('bre-tr-y'); this._trShapeSelect = this._getDomElement('bre-tr-shape'); this._trXVal = this._getDomElement('bre-tr-x-val'); this._trYVal = this._getDomElement('bre-tr-y-val'); // Bottom-right this._brXInput = this._getDomElement('bre-br-x'); this._brYInput = this._getDomElement('bre-br-y'); this._brShapeSelect = this._getDomElement('bre-br-shape'); this._brXVal = this._getDomElement('bre-br-x-val'); this._brYVal = this._getDomElement('bre-br-y-val'); // Bottom-left this._blXInput = this._getDomElement('bre-bl-x'); this._blYInput = this._getDomElement('bre-bl-y'); this._blShapeSelect = this._getDomElement('bre-bl-shape'); this._blXVal = this._getDomElement('bre-bl-x-val'); this._blYVal = this._getDomElement('bre-bl-y-val'); // Section divs this._cornersUniformDiv = this._getDomElement('bre-corners-uniform'); this._cornersPersideDiv = this._getDomElement('bre-corners-perside'); // Border controls this._widthInput = this._getDomElement('bre-width'); this._borderUniformCheck = this._getDomElement('bre-border-separate'); this._widthVal = this._getDomElement('bre-width-val'); // Uniform border controls this._styleSelect = this._getDomElement('bre-style'); this._colorInput = this._getDomElement('bre-color'); this._opacityInput = this._getDomElement('bre-opacity'); this._opacityVal = this._getDomElement('bre-opacity-val'); // Per-side border controls this._topStyleSelect = this._getDomElement('bre-top-style'); this._topWidthInput = this._getDomElement('bre-top-width'); this._topWidthVal = this._getDomElement('bre-top-width-val'); this._topColorInput = this._getDomElement('bre-top-color'); this._topOpacityInput = this._getDomElement('bre-top-opacity'); this._topOpacityVal = this._getDomElement('bre-top-opacity-val'); this._rightStyleSelect = this._getDomElement('bre-right-style'); this._rightWidthInput = this._getDomElement('bre-right-width'); this._rightWidthVal = this._getDomElement('bre-right-width-val'); this._rightColorInput = this._getDomElement('bre-right-color'); this._rightOpacityInput = this._getDomElement('bre-right-opacity'); this._rightOpacityVal = this._getDomElement('bre-right-opacity-val'); this._bottomStyleSelect = this._getDomElement('bre-bottom-style'); this._bottomWidthInput = this._getDomElement('bre-bottom-width'); this._bottomWidthVal = this._getDomElement('bre-bottom-width-val'); this._bottomColorInput = this._getDomElement('bre-bottom-color'); this._bottomOpacityInput = this._getDomElement('bre-bottom-opacity'); this._bottomOpacityVal = this._getDomElement('bre-bottom-opacity-val'); this._leftStyleSelect = this._getDomElement('bre-left-style'); this._leftWidthInput = this._getDomElement('bre-left-width'); this._leftWidthVal = this._getDomElement('bre-left-width-val'); this._leftColorInput = this._getDomElement('bre-left-color'); this._leftOpacityInput = this._getDomElement('bre-left-opacity'); this._leftOpacityVal = this._getDomElement('bre-left-opacity-val'); this._borderUniformDiv = this._getDomElement('bre-border-uniform-editor'); this._borderPersideDiv = this._getDomElement('bre-border-perside'); this._cssOutput = this._getDomElement('bre-css-out'); this._loadBtn = this._getDomElement('bre-load-btn'); this._copyBtn = this._getDomElement('bre-copy-btn'); this._applyBtn = this._getDomElement('bre-apply-btn'); // Uniform mode for corners this._uniformCheck.onchange = () => { this._config.uniform = !this._uniformCheck.checked; this._cornersUniformDiv.style.display = this._config.uniform ? 'block' : 'none'; this._cornersPersideDiv.style.display = this._config.uniform ? 'none' : 'grid'; if (this._config.uniform) { const tl = this._config.topLeft; this._config.topRight = { ...tl }; this._config.bottomRight = { ...tl }; this._config.bottomLeft = { ...tl }; } this._syncControls(); this._refresh(); }; // Wire up unified corner controls this._uniformXInput.oninput = () => { this._config.topLeft.x = Number(this._uniformXInput.value); this._config.topRight.x = Number(this._uniformXInput.value); this._config.bottomRight.x = Number(this._uniformXInput.value); this._config.bottomLeft.x = Number(this._uniformXInput.value); this._uniformXVal.textContent = this._config.topLeft.x + '%'; this._refresh(); }; this._uniformYInput.oninput = () => { this._config.topLeft.y = Number(this._uniformYInput.value); this._config.topRight.y = Number(this._uniformYInput.value); this._config.bottomRight.y = Number(this._uniformYInput.value); this._config.bottomLeft.y = Number(this._uniformYInput.value); this._uniformYVal.textContent = this._config.topLeft.y + '%'; this._refresh(); }; this._uniformShapeSelect.onchange = () => { const shape = this._uniformShapeSelect.value as any; this._config.topLeft.shape = shape; this._config.topRight.shape = shape; this._config.bottomRight.shape = shape; this._config.bottomLeft.shape = shape; this._refresh(); }; // Wire up per-corner controls: Top-left this._wireCornerControls('tl', this._tlXInput, this._tlYInput, this._tlShapeSelect, this._tlXVal, this._tlYVal); this._wireCornerControls('tr', this._trXInput, this._trYInput, this._trShapeSelect, this._trXVal, this._trYVal); this._wireCornerControls('br', this._brXInput, this._brYInput, this._brShapeSelect, this._brXVal, this._brYVal); this._wireCornerControls('bl', this._blXInput, this._blYInput, this._blShapeSelect, this._blXVal, this._blYVal); // Wire up border controls this._widthInput.oninput = () => { this._config.width = Number(this._widthInput.value); this._config.top.width = this._config.width; this._config.right.width = this._config.width; this._config.bottom.width = this._config.width; this._config.left.width = this._config.width; this._widthVal.textContent = this._config.width + 'px'; this._refresh(); }; this._borderUniformCheck.onchange = () => { this._config.borderUniform = !this._borderUniformCheck.checked; if (this._config.borderUniform) { this._config.width = this._config.top.width; this._config.right.width = this._config.top.width; this._config.bottom.width = this._config.top.width; this._config.left.width = this._config.top.width; } this._borderUniformDiv.style.display = this._config.borderUniform ? 'block' : 'none'; this._borderPersideDiv.style.display = this._config.borderUniform ? 'none' : 'grid'; this._syncControls(); this._refresh(); }; // Uniform mode handlers for border this._styleSelect.onchange = () => { this._config.top.style = this._styleSelect.value; this._config.right.style = this._styleSelect.value; this._config.bottom.style = this._styleSelect.value; this._config.left.style = this._styleSelect.value; this._refresh(); }; this._colorInput.oninput = () => { this._config.top.color = this._colorInput.value; this._config.right.color = this._colorInput.value; this._config.bottom.color = this._colorInput.value; this._config.left.color = this._colorInput.value; this._refresh(); }; this._opacityInput.oninput = () => { const opacity = Number(this._opacityInput.value); this._config.top.opacity = opacity; this._config.right.opacity = opacity; this._config.bottom.opacity = opacity; this._config.left.opacity = opacity; this._opacityVal.textContent = opacity + '%'; this._refresh(); }; // Per-side handlers const wirePerSideBorderControls = (side: 'top' | 'right' | 'bottom' | 'left', styleSelect: HTMLSelectElement, widthInput: HTMLInputElement, widthVal: HTMLSpanElement, colorInput: HTMLInputElement, opacityInput: HTMLInputElement, opacityVal: HTMLSpanElement) => { const getSide = (): BorderSide => this._config[side]; styleSelect.onchange = () => { const sideCfg = getSide(); sideCfg.style = styleSelect.value; this._refresh(); }; widthInput.oninput = () => { const sideCfg = getSide(); sideCfg.width = Number(widthInput.value); widthVal.textContent = sideCfg.width + 'px'; this._refresh(); }; colorInput.oninput = () => { const sideCfg = getSide(); sideCfg.color = colorInput.value; this._refresh(); }; opacityInput.oninput = () => { const sideCfg = getSide(); sideCfg.opacity = Number(opacityInput.value); opacityVal.textContent = sideCfg.opacity + '%'; this._refresh(); }; }; wirePerSideBorderControls('top', this._topStyleSelect, this._topWidthInput, this._topWidthVal, this._topColorInput, this._topOpacityInput, this._topOpacityVal); wirePerSideBorderControls('right', this._rightStyleSelect, this._rightWidthInput, this._rightWidthVal, this._rightColorInput, this._rightOpacityInput, this._rightOpacityVal); wirePerSideBorderControls('bottom', this._bottomStyleSelect, this._bottomWidthInput, this._bottomWidthVal, this._bottomColorInput, this._bottomOpacityInput, this._bottomOpacityVal); wirePerSideBorderControls('left', this._leftStyleSelect, this._leftWidthInput, this._leftWidthVal, this._leftColorInput, this._leftOpacityInput, this._leftOpacityVal); // Copy / Apply this._copyBtn.onclick = () => { navigator.clipboard?.writeText(this._cssOutput.value).catch(() => {}); }; this._applyBtn.onclick = () => this._applyToSelection(); this._loadBtn.onclick = () => { this._loadFromPrimarySelection(); this._syncControls(); this._refresh(); }; this._loadFromPrimarySelection(); this._syncControls(); this._refresh(); } private _wireCornerControls( cornerKey: 'tl' | 'tr' | 'br' | 'bl', xInput: HTMLInputElement, yInput: HTMLInputElement, shapeSelect: HTMLSelectElement, xVal: HTMLSpanElement, yVal: HTMLSpanElement ) { const getCorner = (): BorderRadiusCorner => { switch (cornerKey) { case 'tl': return this._config.topLeft; case 'tr': return this._config.topRight; case 'br': return this._config.bottomRight; case 'bl': return this._config.bottomLeft; } }; xInput.oninput = () => { const liveCorner = getCorner(); liveCorner.x = Number(xInput.value); if (this._config.uniform) { this._config.topLeft.x = this._config.topRight.x = this._config.bottomRight.x = this._config.bottomLeft.x = liveCorner.x; } xVal.textContent = liveCorner.x + '%'; this._refresh(); }; yInput.oninput = () => { const liveCorner = getCorner(); liveCorner.y = Number(yInput.value); if (this._config.uniform) { this._config.topLeft.y = this._config.topRight.y = this._config.bottomRight.y = this._config.bottomLeft.y = liveCorner.y; } yVal.textContent = liveCorner.y + '%'; this._refresh(); }; shapeSelect.onchange = () => { const liveCorner = getCorner(); liveCorner.shape = shapeSelect.value as BorderRadiusCorner['shape']; if (this._config.uniform) { this._config.topLeft.shape = this._config.topRight.shape = this._config.bottomRight.shape = this._config.bottomLeft.shape = liveCorner.shape; } this._refresh(); }; } private _loadFromPrimarySelection() { const primary = this._designerCanvas?.instanceServiceContainer?.selectionService?.primarySelection; if (!primary) return; const br = primary.getStyle('border-radius'); if (br) { this._config = parseCornerRadius(br); } // Also load corner-shape property if it exists const cs = primary.getStyle('corner-shape'); if (cs) { const shapes = cs.trim().split(/\s+/).filter(Boolean) as ('round' | 'bevel' | 'scoop' | 'inset' | 'notch')[]; const getShape = (idx: number): BorderRadiusCorner['shape'] => { if (shapes.length === 1) return shapes[0]; if (shapes.length === 2) return shapes[idx === 1 || idx === 2 ? 1 : 0]; if (shapes.length === 3) return shapes[idx === 3 ? 1 : (idx === 2 ? 2 : 0)]; return shapes[idx] ?? 'round'; }; this._config.topLeft.shape = getShape(0); this._config.topRight.shape = getShape(1); this._config.bottomRight.shape = getShape(2); this._config.bottomLeft.shape = getShape(3); } const corners = [this._config.topLeft, this._config.topRight, this._config.bottomRight, this._config.bottomLeft]; this._config.uniform = corners.every(c => c.x === corners[0].x && c.y === corners[0].y && c.shape === corners[0].shape ); // Load border width const bw = primary.getStyle('border-width'); if (bw) { const widthTokens = splitTopLevelWhitespace(bw).map(t => parseFloat(t)).filter(v => !isNaN(v)); const [top, right, bottom, left] = expandQuadTokens(widthTokens); if (top != null) this._config.top.width = top; if (right != null) this._config.right.width = right; if (bottom != null) this._config.bottom.width = bottom; if (left != null) this._config.left.width = left; if (top != null) this._config.width = top; } const topWidth = primary.getStyle('border-top-width'); const rightWidth = primary.getStyle('border-right-width'); const bottomWidth = primary.getStyle('border-bottom-width'); const leftWidth = primary.getStyle('border-left-width'); const hasPerSideWidth = !!(topWidth || rightWidth || bottomWidth || leftWidth); if (hasPerSideWidth) { this._config.borderUniform = false; if (topWidth) { const widthNum = parseFloat(topWidth); if (!isNaN(widthNum)) this._config.top.width = widthNum; } if (rightWidth) { const widthNum = parseFloat(rightWidth); if (!isNaN(widthNum)) this._config.right.width = widthNum; } if (bottomWidth) { const widthNum = parseFloat(bottomWidth); if (!isNaN(widthNum)) this._config.bottom.width = widthNum; } if (leftWidth) { const widthNum = parseFloat(leftWidth); if (!isNaN(widthNum)) this._config.left.width = widthNum; } this._config.width = this._config.top.width; } // Load border style and color (per-side or uniform) const parseColorAndOpacity = (colorStr: string): { hex: string; opacity: number } => { const rgbaMatch = colorStr.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/); if (rgbaMatch) { const hex = '#' + [parseInt(rgbaMatch[1]), parseInt(rgbaMatch[2]), parseInt(rgbaMatch[3])].map(v => v.toString(16).padStart(2, '0')).join(''); const opacity = rgbaMatch[4] ? Math.round(parseFloat(rgbaMatch[4]) * 100) : 100; return { hex, opacity }; } else if (colorStr.startsWith('#')) { return { hex: colorStr.slice(0, 7), opacity: 100 }; } return { hex: '#000000', opacity: 100 }; }; // Try to load per-side styles const topStyle = primary.getStyle('border-top-style'); const rightStyle = primary.getStyle('border-right-style'); const bottomStyle = primary.getStyle('border-bottom-style'); const leftStyle = primary.getStyle('border-left-style'); if (topStyle || rightStyle || bottomStyle || leftStyle) { // Per-side mode this._config.borderUniform = false; if (topStyle) this._config.top.style = topStyle; if (rightStyle) this._config.right.style = rightStyle; if (bottomStyle) this._config.bottom.style = bottomStyle; if (leftStyle) this._config.left.style = leftStyle; } else { // Try uniform shorthand const bs = primary.getStyle('border-style'); if (bs) { if (!hasPerSideWidth) this._config.borderUniform = true; const [top, right, bottom, left] = expandQuadTokens(splitTopLevelWhitespace(bs)); if (top) this._config.top.style = top; if (right) this._config.right.style = right; if (bottom) this._config.bottom.style = bottom; if (left) this._config.left.style = left; } } // Try to load per-side colors const topColor = primary.getStyle('border-top-color'); const rightColor = primary.getStyle('border-right-color'); const bottomColor = primary.getStyle('border-bottom-color'); const leftColor = primary.getStyle('border-left-color'); if (topColor || rightColor || bottomColor || leftColor) { // Per-side mode this._config.borderUniform = false; if (topColor) { const parsed = parseColorAndOpacity(topColor); this._config.top.color = parsed.hex; this._config.top.opacity = parsed.opacity; } if (rightColor) { const parsed = parseColorAndOpacity(rightColor); this._config.right.color = parsed.hex; this._config.right.opacity = parsed.opacity; } if (bottomColor) { const parsed = parseColorAndOpacity(bottomColor); this._config.bottom.color = parsed.hex; this._config.bottom.opacity = parsed.opacity; } if (leftColor) { const parsed = parseColorAndOpacity(leftColor); this._config.left.color = parsed.hex; this._config.left.opacity = parsed.opacity; } } else { // Try uniform shorthand const bc = primary.getStyle('border-color'); if (bc) { if (!hasPerSideWidth) this._config.borderUniform = true; const [top, right, bottom, left] = expandQuadTokens(splitTopLevelWhitespace(bc)); if (top) { const parsed = parseColorAndOpacity(top); this._config.top.color = parsed.hex; this._config.top.opacity = parsed.opacity; } if (right) { const parsed = parseColorAndOpacity(right); this._config.right.color = parsed.hex; this._config.right.opacity = parsed.opacity; } if (bottom) { const parsed = parseColorAndOpacity(bottom); this._config.bottom.color = parsed.hex; this._config.bottom.opacity = parsed.opacity; } if (left) { const parsed = parseColorAndOpacity(left); this._config.left.color = parsed.hex; this._config.left.opacity = parsed.opacity; } } } const sides = [this._config.top, this._config.right, this._config.bottom, this._config.left]; this._config.borderUniform = sides.every(s => s.width === sides[0].width && s.style === sides[0].style && s.color === sides[0].color && s.opacity === sides[0].opacity ); this._config.width = this._config.top.width; } private _syncControls() { // Sync corner controls this._uniformCheck.checked = !this._config.uniform; this._cornersUniformDiv.style.display = this._config.uniform ? 'block' : 'none'; this._cornersPersideDiv.style.display = this._config.uniform ? 'none' : 'grid'; // Sync unified corner controls if (this._config.uniform) { this._uniformXInput.value = String(this._config.topLeft.x); this._uniformYInput.value = String(this._config.topLeft.y); this._uniformShapeSelect.value = this._config.topLeft.shape; this._uniformXVal.textContent = this._config.topLeft.x + '%'; this._uniformYVal.textContent = this._config.topLeft.y + '%'; } const syncCorner = (x: HTMLInputElement, y: HTMLInputElement, shape: HTMLSelectElement, xVal: HTMLSpanElement, yVal: HTMLSpanElement, corner: BorderRadiusCorner) => { x.value = String(corner.x); y.value = String(corner.y); shape.value = corner.shape; xVal.textContent = corner.x + '%'; yVal.textContent = corner.y + '%'; }; syncCorner(this._tlXInput, this._tlYInput, this._tlShapeSelect, this._tlXVal, this._tlYVal, this._config.topLeft); syncCorner(this._trXInput, this._trYInput, this._trShapeSelect, this._trXVal, this._trYVal, this._config.topRight); syncCorner(this._brXInput, this._brYInput, this._brShapeSelect, this._brXVal, this._brYVal, this._config.bottomRight); syncCorner(this._blXInput, this._blYInput, this._blShapeSelect, this._blXVal, this._blYVal, this._config.bottomLeft); // Sync border controls this._widthInput.value = String(this._config.width); this._widthVal.textContent = this._config.width + 'px'; this._borderUniformCheck.checked = !this._config.borderUniform; this._borderUniformDiv.style.display = this._config.borderUniform ? 'block' : 'none'; this._borderPersideDiv.style.display = this._config.borderUniform ? 'none' : 'grid'; if (this._config.borderUniform) { // Sync uniform controls this._styleSelect.value = this._config.top.style; this._colorInput.value = this._config.top.color; this._opacityInput.value = String(this._config.top.opacity); this._opacityVal.textContent = this._config.top.opacity + '%'; } else { // Sync per-side controls this._topStyleSelect.value = this._config.top.style; this._topWidthInput.value = String(this._config.top.width); this._topWidthVal.textContent = this._config.top.width + 'px'; this._topColorInput.value = this._config.top.color; this._topOpacityInput.value = String(this._config.top.opacity); this._topOpacityVal.textContent = this._config.top.opacity + '%'; this._rightStyleSelect.value = this._config.right.style; this._rightWidthInput.value = String(this._config.right.width); this._rightWidthVal.textContent = this._config.right.width + 'px'; this._rightColorInput.value = this._config.right.color; this._rightOpacityInput.value = String(this._config.right.opacity); this._rightOpacityVal.textContent = this._config.right.opacity + '%'; this._bottomStyleSelect.value = this._config.bottom.style; this._bottomWidthInput.value = String(this._config.bottom.width); this._bottomWidthVal.textContent = this._config.bottom.width + 'px'; this._bottomColorInput.value = this._config.bottom.color; this._bottomOpacityInput.value = String(this._config.bottom.opacity); this._bottomOpacityVal.textContent = this._config.bottom.opacity + '%'; this._leftStyleSelect.value = this._config.left.style; this._leftWidthInput.value = String(this._config.left.width); this._leftWidthVal.textContent = this._config.left.width + 'px'; this._leftColorInput.value = this._config.left.color; this._leftOpacityInput.value = String(this._config.left.opacity); this._leftOpacityVal.textContent = this._config.left.opacity + '%'; } } private _buildCss(): { radius: string; shape: string | null; borderCss: { [key: string]: string } } { const radius = configToRadiusCss(this._config); const shape = configToShapeCss(this._config); const borderCss: { [key: string]: string } = {}; const { width, style, color } = configToBorderCss(this._config); if (this._config.borderUniform) { // Uniform: use shorthand borderCss['border-width'] = width; borderCss['border-style'] = style; borderCss['border-color'] = color; } else { // Per-side const sides = ['top', 'right', 'bottom', 'left'] as const; const sides_data = [this._config.top, this._config.right, this._config.bottom, this._config.left]; for (let i = 0; i < sides.length; i++) { const side = sides[i]; const cfg = sides_data[i]; borderCss[`border-${side}-width`] = `${cfg.width}px`; borderCss[`border-${side}-style`] = cfg.style; const rgba = `${hexToRgb(cfg.color)},${(cfg.opacity / 100).toFixed(2)}`; borderCss[`border-${side}-color`] = `rgba(${rgba})`; } } return { radius, shape, borderCss, }; } private _refresh() { const { radius, shape, borderCss } = this._buildCss(); this._previewBox.style.borderRadius = radius; // Set corner-shape in preview if not round if (shape) { (this._previewBox.style as any).cornerShape = shape; } else { (this._previewBox.style as any).cornerShape = ''; } // Set border in preview Object.entries(borderCss).forEach(([prop, value]) => { (this._previewBox.style as any)[prop.replace(/-([a-z])/g, (_, l) => l.toUpperCase())] = value; }); // Output all properties let output = `border-radius: ${radius};`; if (shape) { output += `\ncorner-shape: ${shape};`; } Object.entries(borderCss).forEach(([prop, value]) => { output += `\n${prop}: ${value};`; }); this._cssOutput.value = output; } private _applyToSelection() { const items = this._designerCanvas?.instanceServiceContainer?.selectionService?.selectedElements; if (!items?.length) return; const { radius, shape, borderCss } = this._buildCss(); const group = items[0].openGroup('set border-radius and border properties'); for (const item of items) { item.setStyle('border-radius', radius); if (shape) { item.setStyle('corner-shape', shape); } else { item.removeStyle('corner-shape'); } Object.entries(borderCss).forEach(([prop, value]) => { item.setStyle(prop, value); }); } group.commit(); } } customElements.define('node-projects-border-radius-editor-window', BorderRadiusEditorWindow); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/BoxShadowEditorWindow.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { DraggableToolWindow } from './DraggableToolWindow.js'; import { IDesignerCanvas } from '../../../IDesignerCanvas.js'; interface BoxShadowLayer { inset: boolean; offsetX: number; offsetY: number; blur: number; spread: number; color: string; opacity: number; enabled: boolean; } function defaultLayer(): BoxShadowLayer { return { inset: false, offsetX: 5, offsetY: 5, blur: 10, spread: 0, color: '#000000', opacity: 50, enabled: true }; } function rgbToHex(r: number, g: number, b: number): string { return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join(''); } /** * Splits a box-shadow value string into individual shadow tokens, * correctly ignoring commas inside color functions like rgba(). */ function splitShadowLayers(value: string): string[] { const layers: string[] = []; let depth = 0; let current = ''; for (let i = 0; i < value.length; i++) { const ch = value[i]; if (ch === '(') depth++; else if (ch === ')') depth--; else if (ch === ',' && depth === 0) { const trimmed = current.trim(); if (trimmed) layers.push(trimmed); current = ''; continue; } current += ch; } const trimmed = current.trim(); if (trimmed) layers.push(trimmed); return layers; } function parseCssBoxShadow(value: string): BoxShadowLayer[] { if (!value || value === 'none') return [defaultLayer()]; const layers: BoxShadowLayer[] = []; for (const token of splitShadowLayers(value)) { const layer = parseOneShadowLayer(token.trim()); if (layer) layers.push(layer); } return layers.length ? layers : [defaultLayer()]; } function parseOneShadowLayer(token: string): BoxShadowLayer | null { // Extract color function first (rgb/rgba/hsl/hsla) to avoid its spaces confusing token split let color = '#000000'; let opacity = 100; let remaining = token; const colorFnMatch = remaining.match(/(rgba?\([^)]+\)|hsla?\([^)]+\))/); if (colorFnMatch) { const fn = colorFnMatch[1]; remaining = remaining.replace(fn, '').trim(); const rgbaMatch = fn.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/); if (rgbaMatch) { color = rgbToHex(parseInt(rgbaMatch[1]), parseInt(rgbaMatch[2]), parseInt(rgbaMatch[3])); opacity = rgbaMatch[4] != null ? Math.round(parseFloat(rgbaMatch[4]) * 100) : 100; } } else { // Try hex color const hexMatch = remaining.match(/(#[0-9a-fA-F]{3,8})/); if (hexMatch) { color = hexMatch[1].length === 4 ? '#' + hexMatch[1].slice(1).split('').map(c => c + c).join('') : hexMatch[1].slice(0, 7); remaining = remaining.replace(hexMatch[1], '').trim(); } } // What remains: [inset] offsetX offsetY [blur] [spread] const parts = remaining.split(/\s+/).filter(Boolean); let inset = false; const numbers: number[] = []; for (const p of parts) { if (p === 'inset') { inset = true; continue; } const n = parseFloat(p); if (!isNaN(n)) numbers.push(n); } if (numbers.length < 2) return null; return { inset, offsetX: numbers[0] ?? 0, offsetY: numbers[1] ?? 0, blur: numbers[2] ?? 0, spread: numbers[3] ?? 0, color, opacity, enabled: true, }; } function layerToCss(l: BoxShadowLayer): string { const rgb = hexToRgb(l.color); const a = (l.opacity / 100).toFixed(2); return `${l.inset ? 'inset ' : ''}${l.offsetX}px ${l.offsetY}px ${l.blur}px ${l.spread}px rgba(${rgb},${a})`; } function hexToRgb(hex: string): string { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `${r},${g},${b}`; } export class BoxShadowEditorWindow extends DraggableToolWindow { private _designerCanvas: IDesignerCanvas; private _layers: BoxShadowLayer[] = [defaultLayer()]; private _selectedIndex = 0; // List private _layerList: HTMLUListElement; private _removeBtn: HTMLButtonElement; // Controls private _insetCheck: HTMLInputElement; private _enabledCheck: HTMLInputElement; private _inputX: HTMLInputElement; private _inputY: HTMLInputElement; private _inputBlur: HTMLInputElement; private _inputSpread: HTMLInputElement; private _inputColor: HTMLInputElement; private _inputOpacity: HTMLInputElement; private _opacityVal: HTMLSpanElement; // Preview private _previewBox: HTMLDivElement; // Output private _cssOutput: HTMLTextAreaElement; private _loadBtn: HTMLButtonElement; private _copyBtn: HTMLButtonElement; private _applyBtn: HTMLButtonElement; protected override get windowTitle(): string { return 'Box Shadow Editor'; } protected override get windowContentStyle(): CSSStyleSheet { return css` * { box-sizing: border-box; } .bse-root { display: flex; flex-direction: column; width: 380px; color: #ddd; font-family: sans-serif; font-size: 12px; padding: 8px; gap: 8px; background: #2c2c2c; } .preview-area { display: flex; align-items: center; justify-content: center; height: 110px; background: repeating-conic-gradient(#444 0% 25%, #333 0% 50%) 0 0 / 16px 16px; border-radius: 4px; border: 1px solid #111; } .preview-box { width: 70px; height: 70px; background: #fff; border-radius: 4px; } .layers-row { display: flex; gap: 6px; align-items: flex-start; } .layer-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 60px; max-height: 100px; overflow-y: auto; background: #1e1e1e; border: 1px solid #111; border-radius: 3px; } .layer-list li { padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .layer-list li.selected { background: #3a3a5a; } .layer-list li .swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #555; flex-shrink: 0; display: inline-block; } .layer-list li .disabled-label { opacity: 0.4; } .layer-buttons { display: flex; flex-direction: column; gap: 4px; } .layer-buttons button { width: 24px; height: 24px; padding: 0; font-size: 14px; background: #444; color: #ddd; border: 1px solid #222; border-radius: 3px; cursor: pointer; line-height: 1; } .layer-buttons button:hover { background: #666; } .controls { display: grid; grid-template-columns: 90px 1fr 36px; gap: 4px 6px; align-items: center; } .controls label { color: #aaa; } .controls input[type=range] { width: 100%; } .controls input[type=number] { width: 100%; background: #1e1e1e; border: 1px solid #444; color: #ddd; border-radius: 3px; padding: 2px 4px; } .controls input[type=color] { width: 100%; height: 24px; padding: 1px; background: #1e1e1e; border: 1px solid #444; border-radius: 3px; cursor: pointer; } .check-row { display: flex; gap: 14px; align-items: center; margin-bottom: 2px; } .check-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; } .css-out { background: #1e1e1e; border: 1px solid #333; border-radius: 3px; color: #7ec8e3; font-family: monospace; font-size: 11px; padding: 6px; resize: none; width: 100%; height: 48px; } .actions { display: flex; gap: 6px; justify-content: flex-end; } .actions .load-btn { margin-right: auto; } .actions button, .apply-btn { padding: 4px 12px; background: #3a3a3a; color: #ddd; border: 1px solid #555; border-radius: 3px; cursor: pointer; font-size: 12px; } .actions button:hover, .apply-btn:hover { background: #555; } .apply-btn { background: #3a6a9a; border-color: #2a5a8a; } .apply-btn:hover { background: #4a7aaa; } .val-label { text-align: right; color: #888; } `; } protected override get windowTemplate(): string { return `
    0px 0px 0px 0px 100%
    `; } constructor(designerCanvas?: IDesignerCanvas) { super(); this._designerCanvas = designerCanvas; this._layerList = this._getDomElement('bse-layer-list'); this._removeBtn = this._getDomElement('bse-remove-btn'); this._insetCheck = this._getDomElement('bse-inset'); this._enabledCheck = this._getDomElement('bse-enabled'); this._inputX = this._getDomElement('bse-x'); this._inputY = this._getDomElement('bse-y'); this._inputBlur = this._getDomElement('bse-blur'); this._inputSpread = this._getDomElement('bse-spread'); this._inputColor = this._getDomElement('bse-color'); this._inputOpacity = this._getDomElement('bse-opacity'); this._opacityVal = this._getDomElement('bse-opacity-val'); this._previewBox = this._getDomElement('bse-preview'); this._cssOutput = this._getDomElement('bse-css-out'); this._loadBtn = this._getDomElement('bse-load-btn'); this._copyBtn = this._getDomElement('bse-copy-btn'); this._applyBtn = this._getDomElement('bse-apply-btn'); this._getDomElement('bse-add-btn').onclick = () => this._addLayer(); this._getDomElement('bse-dup-btn').onclick = () => this._duplicateLayer(); this._getDomElement('bse-up-btn').onclick = () => this._moveLayer(-1); this._getDomElement('bse-down-btn').onclick = () => this._moveLayer(1); this._removeBtn.onclick = () => this._removeLayer(); this._insetCheck.onchange = () => { this._currentLayer().inset = this._insetCheck.checked; this._refresh(); }; this._enabledCheck.onchange = () => { this._currentLayer().enabled = this._enabledCheck.checked; this._refresh(); }; for (const [input, key, valId] of [ [this._inputX, 'offsetX', 'bse-x-val'], [this._inputY, 'offsetY', 'bse-y-val'], [this._inputBlur, 'blur', 'bse-blur-val'], [this._inputSpread, 'spread', 'bse-spread-val'], ] as [HTMLInputElement, keyof BoxShadowLayer, string][]) { input.oninput = () => { (this._currentLayer() as any)[key] = Number(input.value); this._getDomElement(valId).textContent = input.value + 'px'; this._refresh(); }; } this._inputColor.oninput = () => { this._currentLayer().color = this._inputColor.value; this._refresh(); }; this._inputOpacity.oninput = () => { this._currentLayer().opacity = Number(this._inputOpacity.value); this._opacityVal.textContent = this._inputOpacity.value + '%'; this._refresh(); }; this._copyBtn.onclick = () => { navigator.clipboard?.writeText(this._cssOutput.value).catch(() => {}); }; this._applyBtn.onclick = () => this._applyToSelection(); this._loadBtn.onclick = () => { this._loadFromPrimarySelection(); this._renderList(); this._loadControls(); this._refresh(); }; this._loadFromPrimarySelection(); this._renderList(); this._loadControls(); this._refresh(); } private _loadFromPrimarySelection() { const primary = this._designerCanvas?.instanceServiceContainer?.selectionService?.primarySelection; if (!primary) return; const existing = primary.getStyle('box-shadow'); if (existing) { this._layers = parseCssBoxShadow(existing); this._selectedIndex = 0; } } private _currentLayer(): BoxShadowLayer { return this._layers[this._selectedIndex]; } private _addLayer() { this._layers.push(defaultLayer()); this._selectedIndex = this._layers.length - 1; this._renderList(); this._loadControls(); this._refresh(); } private _duplicateLayer() { const clone = { ...this._currentLayer() }; this._layers.splice(this._selectedIndex + 1, 0, clone); this._selectedIndex = this._selectedIndex + 1; this._renderList(); this._loadControls(); this._refresh(); } private _removeLayer() { if (this._layers.length <= 1) return; this._layers.splice(this._selectedIndex, 1); this._selectedIndex = Math.min(this._selectedIndex, this._layers.length - 1); this._renderList(); this._loadControls(); this._refresh(); } private _moveLayer(dir: -1 | 1) { const i = this._selectedIndex; const j = i + dir; if (j < 0 || j >= this._layers.length) return; [this._layers[i], this._layers[j]] = [this._layers[j], this._layers[i]]; this._selectedIndex = j; this._renderList(); this._refresh(); } private _renderList() { this._layerList.innerHTML = ''; this._layers.forEach((l, i) => { const li = document.createElement('li'); if (i === this._selectedIndex) li.classList.add('selected'); const swatch = document.createElement('span'); swatch.className = 'swatch'; swatch.style.background = l.color; li.appendChild(swatch); const lbl = document.createElement('span'); lbl.textContent = `${l.inset ? 'inset ' : ''}${l.offsetX}px ${l.offsetY}px ${l.blur}px ${l.spread}px`; if (!l.enabled) lbl.classList.add('disabled-label'); li.appendChild(lbl); li.onclick = () => { this._selectedIndex = i; this._renderList(); this._loadControls(); }; this._layerList.appendChild(li); }); } private _loadControls() { const l = this._currentLayer(); this._insetCheck.checked = l.inset; this._enabledCheck.checked = l.enabled; this._inputX.value = String(l.offsetX); this._getDomElement('bse-x-val').textContent = l.offsetX + 'px'; this._inputY.value = String(l.offsetY); this._getDomElement('bse-y-val').textContent = l.offsetY + 'px'; this._inputBlur.value = String(l.blur); this._getDomElement('bse-blur-val').textContent = l.blur + 'px'; this._inputSpread.value = String(l.spread); this._getDomElement('bse-spread-val').textContent = l.spread + 'px'; this._inputColor.value = l.color; this._inputOpacity.value = String(l.opacity); this._opacityVal.textContent = l.opacity + '%'; } private _buildCss(): string { return this._layers.filter(l => l.enabled).map(layerToCss).join(', ') || 'none'; } private _refresh() { const cssVal = this._buildCss(); this._previewBox.style.boxShadow = cssVal; this._cssOutput.value = `box-shadow: ${cssVal};`; this._renderList(); } private _applyToSelection() { if (!this._designerCanvas) return; const selection = this._designerCanvas.instanceServiceContainer.selectionService.selectedElements; if (!selection?.length) return; const cssVal = this._buildCss(); const grp = selection[0].openGroup('Apply box-shadow'); for (const item of selection) { item.setStyle('box-shadow', cssVal); } grp.commit(); } } customElements.define('node-projects-designer-box-shadow-editor', BoxShadowEditorWindow); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/DraggableToolWindow.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent'; /** * A reusable draggable tool window with a title bar and close button. * Subclasses override `title` and provide content via the `windowContent` slot * by overriding `windowTemplate` and `windowStyle`. * * Usage: * - Extend this class and override `windowTitle`, `windowTemplate`, and `windowStyle`. * - The subclass template is inserted into the `.window-content` slot area. * - To show: call `DraggableToolWindow.show(instance, anchorElement?)` or append to document.body. */ export abstract class DraggableToolWindow extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` :host { position: fixed; display: block; z-index: 9999; min-width: 200px; user-select: none; touch-action: none; } .window-frame { background: #2c2c2c; border: 1px solid #111; border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; } .title-bar { display: flex; align-items: center; justify-content: space-between; background: #1a1a1a; padding: 2px 5px; cursor: move; flex-shrink: 0; height: 18px; box-sizing: border-box; } .title-text { color: #ccc; font-size: 11px; font-family: sans-serif; font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .close-btn { width: 14px; height: 14px; background: none; border: none; color: #888; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 2px; flex-shrink: 0; } .close-btn:hover { background: #c0392b; color: #fff; } .window-content { overflow: auto; } `; static override readonly template = html`
    `; /** Override in subclass to set the window title. */ protected abstract get windowTitle(): string; /** Override in subclass to return the inner content template. */ protected abstract get windowTemplate(): HTMLTemplateElement | string; /** Override in subclass to return additional styles for the content. */ protected get windowContentStyle(): CSSStyleSheet | null { return null; } private _dragging = false; private _dragOffsetX = 0; private _dragOffsetY = 0; private _titleBar: HTMLElement; private _titleText: HTMLElement; private _closeBtn: HTMLButtonElement; private _contentArea: HTMLElement; constructor() { super(); this._titleBar = this._getDomElement('title-bar'); this._titleText = this._getDomElement('title-text'); this._closeBtn = this._getDomElement('close-btn'); this._contentArea = this._getDomElement('window-content'); //@ts-ignore this._titleText.textContent = this.windowTitle; // Inject content //@ts-ignore const tpl = this.windowTemplate; if (typeof tpl === 'string') { const temp = document.createElement('template'); temp.innerHTML = tpl; this._contentArea.appendChild(temp.content.cloneNode(true)); } else { this._contentArea.appendChild(tpl.content.cloneNode(true)); } // Apply optional extra styles to shadow root const extraStyle = this.windowContentStyle; if (extraStyle) { this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, extraStyle]; } this._closeBtn.onclick = () => this._close(); // Drag via pointer events on title bar this._titleBar.addEventListener('pointerdown', (e: PointerEvent) => this._onPointerDown(e)); } connectedCallback() { // Default position near top-left if not already placed if (!this.style.left && !this.style.top) { this.style.left = '100px'; this.style.top = '100px'; } } private _close() { this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true })); this.remove(); } private _onPointerDown(e: PointerEvent) { if (e.button !== 0) return; if (e.target === this._closeBtn) return; e.preventDefault(); this._dragging = true; const rect = this.getBoundingClientRect(); this._dragOffsetX = e.clientX - rect.left; this._dragOffsetY = e.clientY - rect.top; this._titleBar.setPointerCapture(e.pointerId); this._titleBar.addEventListener('pointermove', this._onPointerMove); this._titleBar.addEventListener('pointerup', this._onPointerUp); } private _onPointerMove = (e: PointerEvent) => { if (!this._dragging) return; let x = e.clientX - this._dragOffsetX; let y = e.clientY - this._dragOffsetY; // Keep within viewport x = Math.max(0, Math.min(x, window.innerWidth - 40)); y = Math.max(0, Math.min(y, window.innerHeight - 30)); this.style.left = x + 'px'; this.style.top = y + 'px'; }; private _onPointerUp = (e: PointerEvent) => { this._dragging = false; this._titleBar.releasePointerCapture(e.pointerId); this._titleBar.removeEventListener('pointermove', this._onPointerMove); this._titleBar.removeEventListener('pointerup', this._onPointerUp); }; /** * Show the tool window anchored near a reference element, or centered if none. * Appends to document.body. */ static showWindow(instance: DraggableToolWindow, anchor?: Element) { if (anchor) { const rect = anchor.getBoundingClientRect(); instance.style.left = (rect.right + 8) + 'px'; instance.style.top = rect.top + 'px'; } else { instance.style.left = Math.max(0, (window.innerWidth - 260) / 2) + 'px'; instance.style.top = '120px'; } document.body.appendChild(instance); } } ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/DrawToolPopup.ts ================================================ import { html, css } from '@node-projects/base-custom-webcomponent'; import { assetsPath } from "../../../../../../Constants.js"; import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js'; import { IDesignerCanvas } from '../../../IDesignerCanvas.js'; import { CommandType } from '../../../../../../commandHandling/CommandType.js'; export class DrawToolPopup extends AbstractBaseToolPopup { static override style = [super.style, css` .container { width: 220px; min-height: 300px; } .inputs{ display: grid; grid-template-columns: 1fr 1fr; margin: 5px; align-items: center; & span { height: 100%; } } .text { margin-left: 5px; font-size: 14px; } `] static override template = html`

    Draw

    Stroke Color [[this.getEditor('setStrokeColor', 'color', {}, this.designerCanvas.serviceContainer.globalContext.strokeColor)]] Fill Brush [[this.getEditor('setFillBrush', 'color', {}, this.designerCanvas.serviceContainer.globalContext.fillBrush)]] Stroke Thickness [[this.getEditor('setStrokeThickness', 'range', { min: 1, max: 20, step: 1 }, this.designerCanvas.serviceContainer.globalContext.strokeThickness)]]
    `; constructor(private designerCanvas: IDesignerCanvas) { super(); } ready() { this._bindingsParse(); this.designerCanvas.serviceContainer.globalContext.strokeColor } //todo currentvalue getEditor(commandType: CommandType, type: string, additional: { [key: string]: any }, currentValue: any) { const res = this.designerCanvas.serviceContainer.forSomeServicesTillResult('editorTypeService', x => x.getEditor(type, { changedCallback: (newValue) => this.designerCanvas.executeCommand({ type: commandType, parameter: newValue }), ...additional })); res.setValue(currentValue); return res.element; } } customElements.define('node-projects-designer-draw-tool-popup', DrawToolPopup); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/GradientEditorWindow.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { DraggableToolWindow } from './DraggableToolWindow.js'; import { IDesignerCanvas } from '../../../IDesignerCanvas.js'; interface GradientStop { color: string; // hex #rrggbb opacity: number; // 0-100 position: number; // 0-100 (%) } type GradientType = 'linear' | 'radial' | 'conic'; type RadialShape = 'circle' | 'ellipse'; type RadialSize = 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner'; interface GradientConfig { type: GradientType; angle: number; radialShape: RadialShape; radialSize: RadialSize; posX: number; posY: number; stops: GradientStop[]; repeating: boolean; } function defaultConfig(): GradientConfig { return { type: 'linear', angle: 135, radialShape: 'ellipse', radialSize: 'farthest-corner', posX: 50, posY: 50, stops: [ { color: '#667eea', opacity: 100, position: 0 }, { color: '#764ba2', opacity: 100, position: 100 }, ], repeating: false, }; } function hexToRgb(hex: string): string { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `${r},${g},${b}`; } function rgbToHex(r: number, g: number, b: number): string { return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join(''); } function stopToCss(s: GradientStop): string { return `rgba(${hexToRgb(s.color)},${(s.opacity / 100).toFixed(2)}) ${s.position}%`; } function configToCss(cfg: GradientConfig): string { const sorted = [...cfg.stops].sort((a, b) => a.position - b.position); const stops = sorted.map(stopToCss).join(', '); const prefix = cfg.repeating ? 'repeating-' : ''; if (cfg.type === 'linear') { return `${prefix}linear-gradient(${cfg.angle}deg, ${stops})`; } else if (cfg.type === 'radial') { return `${prefix}radial-gradient(${cfg.radialShape} ${cfg.radialSize} at ${cfg.posX}% ${cfg.posY}%, ${stops})`; } else { return `${prefix}conic-gradient(from ${cfg.angle}deg at ${cfg.posX}% ${cfg.posY}%, ${stops})`; } } /** * Extracts the first gradient function from a CSS value string, * using bracket counting to correctly handle nested functions like rgba(). */ function extractFirstGradient(value: string): string | null { const keywords = ['repeating-linear-gradient', 'repeating-radial-gradient', 'repeating-conic-gradient', 'linear-gradient', 'radial-gradient', 'conic-gradient']; for (const kw of keywords) { const idx = value.indexOf(kw + '('); if (idx === -1) continue; const start = idx + kw.length; // points to '(' let depth = 0, end = start; for (let i = start; i < value.length; i++) { if (value[i] === '(') depth++; else if (value[i] === ')') { depth--; if (depth === 0) { end = i; break; } } } return value.slice(idx, end + 1); } return null; } // ─── Parser ──────────────────────────────────────────────────────────────── function splitTopLevel(s: string): string[] { const result: string[] = []; let depth = 0, current = ''; for (const ch of s) { if (ch === '(') depth++; else if (ch === ')') depth--; else if (ch === ',' && depth === 0) { result.push(current); current = ''; continue; } current += ch; } if (current) result.push(current); return result; } function parseGradientStop(token: string): GradientStop | null { let color = '#000000', opacity = 100, position = 0; let remaining = token.trim(); const colorFnMatch = remaining.match(/^(rgba?\([^)]+\)|hsla?\([^)]+\))/); if (colorFnMatch) { const fn = colorFnMatch[1]; remaining = remaining.slice(fn.length).trim(); const m = fn.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/); if (m) { color = rgbToHex(parseInt(m[1]), parseInt(m[2]), parseInt(m[3])); opacity = m[4] != null ? Math.round(parseFloat(m[4]) * 100) : 100; } } else { const hexMatch = remaining.match(/^(#[0-9a-fA-F]{3,8})/); if (hexMatch) { color = hexMatch[1].length === 4 ? '#' + hexMatch[1].slice(1).split('').map(c => c + c).join('') : hexMatch[1].slice(0, 7); remaining = remaining.slice(hexMatch[1].length).trim(); } else { return null; // named color – skip } } const posMatch = remaining.match(/([\d.]+)%/); if (posMatch) position = parseFloat(posMatch[1]); return { color, opacity, position }; } function looksLikeStop(token: string): boolean { const t = token.trim(); return t.startsWith('#') || /^rgba?\(/.test(t) || /^hsla?\(/.test(t); } function parseGradientCss(value: string): GradientConfig { const cfg = defaultConfig(); if (!value) return cfg; const trimmed = value.trim(); cfg.repeating = trimmed.startsWith('repeating-'); let inner = cfg.repeating ? trimmed.slice('repeating-'.length) : trimmed; if (inner.startsWith('linear-gradient')) cfg.type = 'linear'; else if (inner.startsWith('radial-gradient')) cfg.type = 'radial'; else if (inner.startsWith('conic-gradient')) cfg.type = 'conic'; else return cfg; const parenStart = inner.indexOf('('); const parenEnd = inner.lastIndexOf(')'); if (parenStart < 0 || parenEnd < 0) return cfg; const content = inner.slice(parenStart + 1, parenEnd); const tokens = splitTopLevel(content); // Separate gradient-specific args from color stops const argTokens: string[] = []; let stopStart = 0; for (let i = 0; i < tokens.length; i++) { if (looksLikeStop(tokens[i])) { stopStart = i; break; } argTokens.push(tokens[i]); if (i === tokens.length - 1) stopStart = tokens.length; } // Parse type args if (cfg.type === 'linear') { const firstArg = argTokens[0]?.trim() ?? ''; const degMatch = firstArg.match(/^(-?[\d.]+)deg$/); if (degMatch) cfg.angle = parseFloat(degMatch[1]); else if (firstArg.startsWith('to ')) { const toMap: Record = { 'to right': 90, 'to left': 270, 'to bottom': 180, 'to top': 0, 'to bottom right': 135, 'to bottom left': 225, 'to top right': 45, 'to top left': 315, }; cfg.angle = toMap[firstArg] ?? 135; } } else if (cfg.type === 'radial') { const firstArg = argTokens[0]?.trim() ?? ''; const atMatch = firstArg.match(/^(.*?)\s+at\s+([\d.]+)%\s+([\d.]+)%$/); if (atMatch) { const shapePart = atMatch[1].trim(); cfg.posX = parseFloat(atMatch[2]); cfg.posY = parseFloat(atMatch[3]); cfg.radialShape = shapePart.includes('circle') ? 'circle' : 'ellipse'; for (const sz of ['closest-side', 'closest-corner', 'farthest-side', 'farthest-corner'] as RadialSize[]) { if (shapePart.includes(sz)) { cfg.radialSize = sz; break; } } } } else if (cfg.type === 'conic') { const firstArg = argTokens[0]?.trim() ?? ''; const fromMatch = firstArg.match(/from\s+(-?[\d.]+)deg/); if (fromMatch) cfg.angle = parseFloat(fromMatch[1]); const atMatch = firstArg.match(/at\s+([\d.]+)%\s+([\d.]+)%/); if (atMatch) { cfg.posX = parseFloat(atMatch[1]); cfg.posY = parseFloat(atMatch[2]); } } // Parse color stops const stops: GradientStop[] = []; for (let i = stopStart; i < tokens.length; i++) { const s = parseGradientStop(tokens[i]); if (s) stops.push(s); } if (stops.length >= 2) cfg.stops = stops; return cfg; } // ─── Window class ────────────────────────────────────────────────────────── export class GradientEditorWindow extends DraggableToolWindow { private _designerCanvas: IDesignerCanvas; private _config: GradientConfig = defaultConfig(); private _selectedStopIndex = 0; private _previewStrip: HTMLDivElement; private _stopTrack: HTMLDivElement; private _typeSelect: HTMLSelectElement; private _repeatingCheck: HTMLInputElement; private _linearGroup: HTMLDivElement; private _radialGroup: HTMLDivElement; private _conicGroup: HTMLDivElement; private _angleInput: HTMLInputElement; private _angleVal: HTMLSpanElement; private _conicAngleInput: HTMLInputElement; private _conicAngleVal: HTMLSpanElement; private _shapeSelect: HTMLSelectElement; private _sizeSelect: HTMLSelectElement; private _posXInput: HTMLInputElement; private _posXVal: HTMLSpanElement; private _posYInput: HTMLInputElement; private _posYVal: HTMLSpanElement; private _conicPosXInput: HTMLInputElement; private _conicPosXVal: HTMLSpanElement; private _conicPosYInput: HTMLInputElement; private _conicPosYVal: HTMLSpanElement; private _stopColorInput: HTMLInputElement; private _stopOpacityInput: HTMLInputElement; private _stopOpacityVal: HTMLSpanElement; private _stopPositionInput: HTMLInputElement; private _stopPositionVal: HTMLSpanElement; private _removeStopBtn: HTMLButtonElement; private _propertySelect: HTMLSelectElement; private _cssOutput: HTMLTextAreaElement; private _loadBtn: HTMLButtonElement; private _copyBtn: HTMLButtonElement; private _applyBtn: HTMLButtonElement; protected override get windowTitle(): string { return 'Gradient Editor'; } protected override get windowContentStyle(): CSSStyleSheet { return css` * { box-sizing: border-box; } .ge-root { display: flex; flex-direction: column; width: 380px; color: #ddd; font-family: sans-serif; font-size: 12px; gap: 6px; padding: 8px; background: #2a2a2a; } .preview-strip { height: 50px; border-radius: 4px 4px 0 0; border: 1px solid #444; border-bottom: none; } .stop-track { height: 20px; background: repeating-conic-gradient(#333 0% 25%, #444 0% 50%) 0 0 / 10px 10px; border: 1px solid #444; border-radius: 0 0 4px 4px; position: relative; cursor: crosshair; margin-bottom: 2px; } .stop-marker { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #aaa; cursor: pointer; transform: translateX(-50%); transition: border-color 0.1s; } .stop-marker.selected { border-color: #fff; box-shadow: 0 0 0 2px #3a7ad5; z-index: 1; } .row { display: grid; grid-template-columns: 70px 1fr 40px; gap: 3px 6px; align-items: center; } .row.two-col { grid-template-columns: 70px 1fr; } .row.multi { grid-template-columns: 70px 1fr 70px 1fr; } .row label { color: #aaa; } .row input[type=range] { width: 100%; } .row input[type=color] { width: 100%; height: 22px; padding: 1px; border: 1px solid #555; border-radius: 3px; background: #1e1e1e; cursor: pointer; } select { background: #2e2e2e; color: #ddd; border: 1px solid #555; border-radius: 3px; padding: 2px 4px; font-size: 11px; width: 100%; } .separator { height: 1px; background: #444; margin: 2px 0; } .stop-header { display: flex; justify-content: space-between; align-items: center; color: #888; font-size: 11px; } .stop-header .stop-actions { display: flex; gap: 3px; } .stop-actions button { padding: 1px 7px; background: #3a3a3a; color: #ddd; border: 1px solid #555; border-radius: 3px; cursor: pointer; font-size: 12px; } .stop-actions button:hover { background: #555; } .val-label { text-align: right; color: #888; } .css-out { background: #1e1e1e; border: 1px solid #333; border-radius: 3px; color: #7ec8e3; font-family: monospace; font-size: 11px; padding: 6px; resize: none; width: 100%; height: 48px; } .actions { display: flex; gap: 6px; justify-content: flex-end; } .actions .load-btn { margin-right: auto; } .actions button, .apply-btn { padding: 4px 12px; background: #3a3a3a; color: #ddd; border: 1px solid #555; border-radius: 3px; cursor: pointer; font-size: 12px; } .actions button:hover, .apply-btn:hover { background: #555; } .apply-btn { background: #3a6a9a; border-color: #2a5a8a; } .apply-btn:hover { background: #4a7aaa; } `; } protected override get windowTemplate(): string { return `
    135°
    Selected Stop
    100%
    0%
    `; } constructor(designerCanvas?: IDesignerCanvas) { super(); this._designerCanvas = designerCanvas; this._previewStrip = this._getDomElement('ge-preview-strip'); this._stopTrack = this._getDomElement('ge-stop-track'); this._typeSelect = this._getDomElement('ge-type'); this._repeatingCheck = this._getDomElement('ge-repeating'); this._linearGroup = this._getDomElement('ge-linear-group'); this._radialGroup = this._getDomElement('ge-radial-group'); this._conicGroup = this._getDomElement('ge-conic-group'); this._angleInput = this._getDomElement('ge-angle'); this._angleVal = this._getDomElement('ge-angle-val'); this._conicAngleInput = this._getDomElement('ge-conic-angle'); this._conicAngleVal = this._getDomElement('ge-conic-angle-val'); this._shapeSelect = this._getDomElement('ge-shape'); this._sizeSelect = this._getDomElement('ge-size'); this._posXInput = this._getDomElement('ge-pos-x'); this._posXVal = this._getDomElement('ge-pos-x-val'); this._posYInput = this._getDomElement('ge-pos-y'); this._posYVal = this._getDomElement('ge-pos-y-val'); this._conicPosXInput = this._getDomElement('ge-conic-pos-x'); this._conicPosXVal = this._getDomElement('ge-conic-pos-x-val'); this._conicPosYInput = this._getDomElement('ge-conic-pos-y'); this._conicPosYVal = this._getDomElement('ge-conic-pos-y-val'); this._stopColorInput = this._getDomElement('ge-stop-color'); this._stopOpacityInput = this._getDomElement('ge-stop-opacity'); this._stopOpacityVal = this._getDomElement('ge-stop-opacity-val'); this._stopPositionInput = this._getDomElement('ge-stop-pos'); this._stopPositionVal = this._getDomElement('ge-stop-pos-val'); this._removeStopBtn = this._getDomElement('ge-remove-stop-btn'); this._propertySelect = this._getDomElement('ge-property'); this._cssOutput = this._getDomElement('ge-css-out'); this._loadBtn = this._getDomElement('ge-load-btn'); this._copyBtn = this._getDomElement('ge-copy-btn'); this._applyBtn = this._getDomElement('ge-apply-btn'); // Type / repeating this._typeSelect.onchange = () => { this._config.type = this._typeSelect.value as GradientType; this._updateTypeVisibility(); this._refresh(); }; this._repeatingCheck.onchange = () => { this._config.repeating = this._repeatingCheck.checked; this._refresh(); }; // Linear angle this._angleInput.oninput = () => { this._config.angle = Number(this._angleInput.value); this._angleVal.textContent = this._angleInput.value + '°'; this._refresh(); }; // Conic angle this._conicAngleInput.oninput = () => { this._config.angle = Number(this._conicAngleInput.value); this._conicAngleVal.textContent = this._conicAngleInput.value + '°'; this._refresh(); }; // Radial controls this._shapeSelect.onchange = () => { this._config.radialShape = this._shapeSelect.value as RadialShape; this._refresh(); }; this._sizeSelect.onchange = () => { this._config.radialSize = this._sizeSelect.value as RadialSize; this._refresh(); }; this._posXInput.oninput = () => { this._config.posX = Number(this._posXInput.value); this._posXVal.textContent = this._posXInput.value + '%'; this._refresh(); }; this._posYInput.oninput = () => { this._config.posY = Number(this._posYInput.value); this._posYVal.textContent = this._posYInput.value + '%'; this._refresh(); }; // Conic position this._conicPosXInput.oninput = () => { this._config.posX = Number(this._conicPosXInput.value); this._conicPosXVal.textContent = this._conicPosXInput.value + '%'; this._refresh(); }; this._conicPosYInput.oninput = () => { this._config.posY = Number(this._conicPosYInput.value); this._conicPosYVal.textContent = this._conicPosYInput.value + '%'; this._refresh(); }; // Stop controls this._stopColorInput.oninput = () => { this._currentStop().color = this._stopColorInput.value; this._refresh(); }; this._stopOpacityInput.oninput = () => { this._currentStop().opacity = Number(this._stopOpacityInput.value); this._stopOpacityVal.textContent = this._stopOpacityInput.value + '%'; this._refresh(); }; this._stopPositionInput.oninput = () => { this._currentStop().position = Number(this._stopPositionInput.value); this._stopPositionVal.textContent = this._stopPositionInput.value + '%'; this._refresh(); }; // Add / remove stop this._getDomElement('ge-add-stop-btn').onclick = () => this._addStop(50); this._removeStopBtn.onclick = () => this._removeStop(); // Stop track: click to add stop this._stopTrack.addEventListener('click', (e) => { const rect = this._stopTrack.getBoundingClientRect(); const pos = Math.round(((e.clientX - rect.left) / rect.width) * 100); this._addStop(Math.max(0, Math.min(100, pos))); }); // Output / apply this._copyBtn.onclick = () => { navigator.clipboard?.writeText(this._cssOutput.value).catch(() => {}); }; this._applyBtn.onclick = () => this._applyToSelection(); this._loadBtn.onclick = () => { this._loadFromPrimarySelection(); this._selectedStopIndex = Math.max(0, Math.min(this._selectedStopIndex, this._config.stops.length - 1)); this._updateTypeVisibility(); this._syncControls(); this._renderStopTrack(); this._refreshOutput(); }; this._loadFromPrimarySelection(); this._updateTypeVisibility(); this._syncControls(); this._renderStopTrack(); this._refreshOutput(); } private _loadFromPrimarySelection() { const primary = this._designerCanvas?.instanceServiceContainer?.selectionService?.primarySelection; if (!primary) return; for (const prop of ['background-image', 'background']) { const val = primary.getStyle(prop); if (val && val.includes('gradient')) { const extracted = extractFirstGradient(val); if (extracted) { this._config = parseGradientCss(extracted); if (prop === 'background') this._propertySelect.value = 'background'; } break; } } } private _currentStop(): GradientStop { return this._config.stops[this._selectedStopIndex]; } private _addStop(position: number) { this._config.stops.push({ color: '#ffffff', opacity: 100, position }); this._selectedStopIndex = this._config.stops.length - 1; this._syncControls(); this._renderStopTrack(); this._refreshOutput(); } private _removeStop() { if (this._config.stops.length <= 2) return; this._config.stops.splice(this._selectedStopIndex, 1); this._selectedStopIndex = Math.min(this._selectedStopIndex, this._config.stops.length - 1); this._syncControls(); this._renderStopTrack(); this._refreshOutput(); } private _updateTypeVisibility() { this._linearGroup.style.display = this._config.type === 'linear' ? '' : 'none'; this._radialGroup.style.display = this._config.type === 'radial' ? '' : 'none'; this._conicGroup.style.display = this._config.type === 'conic' ? '' : 'none'; } private _syncControls() { // type this._typeSelect.value = this._config.type; this._repeatingCheck.checked = this._config.repeating; // linear/conic angle this._angleInput.value = String(this._config.angle); this._angleVal.textContent = this._config.angle + '°'; this._conicAngleInput.value = String(this._config.angle); this._conicAngleVal.textContent = this._config.angle + '°'; // radial this._shapeSelect.value = this._config.radialShape; this._sizeSelect.value = this._config.radialSize; this._posXInput.value = String(this._config.posX); this._posXVal.textContent = this._config.posX + '%'; this._posYInput.value = String(this._config.posY); this._posYVal.textContent = this._config.posY + '%'; // conic position this._conicPosXInput.value = String(this._config.posX); this._conicPosXVal.textContent = this._config.posX + '%'; this._conicPosYInput.value = String(this._config.posY); this._conicPosYVal.textContent = this._config.posY + '%'; // selected stop const s = this._currentStop(); this._stopColorInput.value = s.color; this._stopOpacityInput.value = String(s.opacity); this._stopOpacityVal.textContent = s.opacity + '%'; this._stopPositionInput.value = String(s.position); this._stopPositionVal.textContent = s.position + '%'; } private _renderStopTrack() { // Update gradient preview on strip const gradCss = configToCss(this._config); this._previewStrip.style.background = gradCss; // Re-render stop markers this._stopTrack.innerHTML = ''; this._config.stops.forEach((stop, i) => { const marker = document.createElement('div'); marker.className = 'stop-marker' + (i === this._selectedStopIndex ? ' selected' : ''); marker.style.left = `${stop.position}%`; marker.style.background = stop.color; marker.style.opacity = String(stop.opacity / 100); // Select on click (stop propagation so track click handler doesn't fire) marker.addEventListener('click', (e) => { e.stopPropagation(); this._selectedStopIndex = i; this._syncControls(); this._renderStopTrack(); }); // Drag to reposition — update marker in-place to avoid destroying pointer capture marker.addEventListener('pointerdown', (e) => { e.preventDefault(); e.stopPropagation(); marker.setPointerCapture(e.pointerId); const trackRect = this._stopTrack.getBoundingClientRect(); const onMove = (me: PointerEvent) => { const x = Math.max(0, Math.min(1, (me.clientX - trackRect.left) / trackRect.width)); const pos = Math.round(x * 100); this._config.stops[i].position = pos; this._selectedStopIndex = i; // Update this marker's position in-place (don't re-render — that would destroy the captured element) marker.style.left = pos + '%'; // Update the selected state visually this._stopTrack.querySelectorAll('.stop-marker').forEach((m, mi) => { m.classList.toggle('selected', mi === i); }); // Refresh preview and output without re-rendering markers this._previewStrip.style.background = configToCss(this._config); this._refreshOutput(); }; const onUp = () => { marker.removeEventListener('pointermove', onMove); marker.removeEventListener('pointerup', onUp); // Full sync after drag ends this._syncControls(); this._renderStopTrack(); }; marker.addEventListener('pointermove', onMove); marker.addEventListener('pointerup', onUp); }); this._stopTrack.appendChild(marker); }); } private _refreshOutput() { this._cssOutput.value = configToCss(this._config); } private _refresh() { this._renderStopTrack(); this._refreshOutput(); } private _applyToSelection() { const items = this._designerCanvas?.instanceServiceContainer?.selectionService?.selectedElements; if (!items?.length) return; const cssVal = configToCss(this._config); const prop = this._propertySelect.value; const group = items[0].openGroup(`set ${prop}`); for (const item of items) { item.setStyle(prop, cssVal); } group.commit(); } } customElements.define('node-projects-gradient-editor-window', GradientEditorWindow); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/PointerToolPopup.ts ================================================ import { html } from '@node-projects/base-custom-webcomponent'; import { assetsPath } from "../../../../../../Constants.js"; import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js'; export class PointerToolPopup extends AbstractBaseToolPopup { static override template = html`

    Selection

    `; } customElements.define('node-projects-designer-pointer-tool-popup', PointerToolPopup); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/SelectionToolPopup.ts ================================================ import { html } from '@node-projects/base-custom-webcomponent'; import { assetsPath } from "../../../../../../Constants.js"; import { AbstractBaseToolPopup } from './AbstractBaseToolPopup.js'; export class SelectionToolPopup extends AbstractBaseToolPopup { static override template = html`

    Selection

    `; } customElements.define('node-projects-designer-selection-tool-popup', SelectionToolPopup); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/TextShadowEditorWindow.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { DraggableToolWindow } from './DraggableToolWindow.js'; import { IDesignerCanvas } from '../../../IDesignerCanvas.js'; interface TextShadowLayer { offsetX: number; offsetY: number; blur: number; color: string; opacity: number; enabled: boolean; } function defaultLayer(): TextShadowLayer { return { offsetX: 2, offsetY: 2, blur: 4, color: '#000000', opacity: 50, enabled: true }; } function rgbToHex(r: number, g: number, b: number): string { return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join(''); } function hexToRgb(hex: string): string { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `${r},${g},${b}`; } function splitLayers(value: string): string[] { const layers: string[] = []; let depth = 0, current = ''; for (const ch of value) { if (ch === '(') depth++; else if (ch === ')') depth--; else if (ch === ',' && depth === 0) { const t = current.trim(); if (t) layers.push(t); current = ''; continue; } current += ch; } const t = current.trim(); if (t) layers.push(t); return layers; } function layerToCss(l: TextShadowLayer): string { const a = (l.opacity / 100).toFixed(2); return `${l.offsetX}px ${l.offsetY}px ${l.blur}px rgba(${hexToRgb(l.color)},${a})`; } function parseCssTextShadow(value: string): TextShadowLayer[] { if (!value || value === 'none') return [defaultLayer()]; const layers: TextShadowLayer[] = []; for (const token of splitLayers(value)) { const layer = parseOneLayer(token.trim()); if (layer) layers.push(layer); } return layers.length ? layers : [defaultLayer()]; } function parseOneLayer(token: string): TextShadowLayer | null { let color = '#000000', opacity = 100; let remaining = token; const colorFnMatch = remaining.match(/(rgba?\([^)]+\)|hsla?\([^)]+\))/); if (colorFnMatch) { const fn = colorFnMatch[1]; remaining = remaining.replace(fn, '').trim(); const m = fn.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/); if (m) { color = rgbToHex(parseInt(m[1]), parseInt(m[2]), parseInt(m[3])); opacity = m[4] != null ? Math.round(parseFloat(m[4]) * 100) : 100; } } else { const hexMatch = remaining.match(/(#[0-9a-fA-F]{3,8})/); if (hexMatch) { color = hexMatch[1].length === 4 ? '#' + hexMatch[1].slice(1).split('').map(c => c + c).join('') : hexMatch[1].slice(0, 7); remaining = remaining.replace(hexMatch[1], '').trim(); } } const numbers = remaining.split(/\s+/).filter(Boolean).map(p => parseFloat(p)).filter(n => !isNaN(n)); if (numbers.length < 2) return null; return { offsetX: numbers[0] ?? 0, offsetY: numbers[1] ?? 0, blur: numbers[2] ?? 0, color, opacity, enabled: true }; } export class TextShadowEditorWindow extends DraggableToolWindow { private _designerCanvas: IDesignerCanvas; private _layers: TextShadowLayer[] = [defaultLayer()]; private _selectedIndex = 0; private _layerList: HTMLUListElement; private _removeBtn: HTMLButtonElement; private _enabledCheck: HTMLInputElement; private _inputX: HTMLInputElement; private _inputY: HTMLInputElement; private _inputBlur: HTMLInputElement; private _inputColor: HTMLInputElement; private _inputOpacity: HTMLInputElement; private _opacityVal: HTMLSpanElement; private _previewText: HTMLDivElement; private _cssOutput: HTMLTextAreaElement; private _loadBtn: HTMLButtonElement; private _copyBtn: HTMLButtonElement; private _applyBtn: HTMLButtonElement; protected override get windowTitle(): string { return 'Text Shadow Editor'; } protected override get windowContentStyle(): CSSStyleSheet { return css` * { box-sizing: border-box; } .tse-root { display: flex; flex-direction: column; width: 360px; color: #ddd; font-family: sans-serif; font-size: 12px; gap: 6px; padding: 8px; background: #2a2a2a; } .preview-area { background: #1a1a1a; border: 1px solid #444; border-radius: 4px; height: 60px; display: flex; align-items: center; justify-content: center; } .preview-text { font-size: 28px; font-weight: bold; color: #fff; user-select: none; } .layers-row { display: flex; gap: 4px; } .layer-list { flex: 1; list-style: none; margin: 0; padding: 0; border: 1px solid #444; border-radius: 3px; max-height: 80px; overflow-y: auto; background: #1e1e1e; } .layer-list li { display: flex; align-items: center; gap: 5px; padding: 2px 5px; cursor: pointer; font-size: 11px; } .layer-list li:hover { background: #333; } .layer-list li.selected { background: #2a4a7a; } .swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #555; flex-shrink: 0; } .disabled-label { opacity: 0.4; } .layer-buttons { display: flex; flex-direction: column; gap: 2px; } .layer-buttons button { width: 22px; height: 22px; background: #3a3a3a; color: #ddd; border: 1px solid #555; border-radius: 3px; cursor: pointer; font-size: 13px; padding: 0; } .layer-buttons button:hover { background: #555; } .controls { display: grid; grid-template-columns: 60px 1fr 38px; gap: 3px 6px; align-items: center; } .controls label { color: #aaa; } .controls input[type=range] { width: 100%; } .controls input[type=color] { width: 100%; height: 22px; padding: 1px; border: 1px solid #555; border-radius: 3px; background: #1e1e1e; cursor: pointer; } .check-row { display: flex; gap: 12px; align-items: center; } .check-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; } .css-out { background: #1e1e1e; border: 1px solid #333; border-radius: 3px; color: #7ec8e3; font-family: monospace; font-size: 11px; padding: 6px; resize: none; width: 100%; height: 40px; } .actions { display: flex; gap: 6px; justify-content: flex-end; } .actions .load-btn { margin-right: auto; } .actions button, .apply-btn { padding: 4px 12px; background: #3a3a3a; color: #ddd; border: 1px solid #555; border-radius: 3px; cursor: pointer; font-size: 12px; } .actions button:hover, .apply-btn:hover { background: #555; } .apply-btn { background: #3a6a9a; border-color: #2a5a8a; } .apply-btn:hover { background: #4a7aaa; } .val-label { text-align: right; color: #888; } `; } protected override get windowTemplate(): string { return `
    Sample Text
      0px 0px 0px 100%
      `; } constructor(designerCanvas?: IDesignerCanvas) { super(); this._designerCanvas = designerCanvas; this._layerList = this._getDomElement('tse-layer-list'); this._removeBtn = this._getDomElement('tse-remove-btn'); this._enabledCheck = this._getDomElement('tse-enabled'); this._inputX = this._getDomElement('tse-x'); this._inputY = this._getDomElement('tse-y'); this._inputBlur = this._getDomElement('tse-blur'); this._inputColor = this._getDomElement('tse-color'); this._inputOpacity = this._getDomElement('tse-opacity'); this._opacityVal = this._getDomElement('tse-opacity-val'); this._previewText = this._getDomElement('tse-preview'); this._cssOutput = this._getDomElement('tse-css-out'); this._loadBtn = this._getDomElement('tse-load-btn'); this._copyBtn = this._getDomElement('tse-copy-btn'); this._applyBtn = this._getDomElement('tse-apply-btn'); this._getDomElement('tse-add-btn').onclick = () => this._addLayer(); this._getDomElement('tse-dup-btn').onclick = () => this._duplicateLayer(); this._getDomElement('tse-up-btn').onclick = () => this._moveLayer(-1); this._getDomElement('tse-down-btn').onclick = () => this._moveLayer(1); this._removeBtn.onclick = () => this._removeLayer(); this._enabledCheck.onchange = () => { this._currentLayer().enabled = this._enabledCheck.checked; this._refresh(); }; for (const [input, key, valId] of [ [this._inputX, 'offsetX', 'tse-x-val'], [this._inputY, 'offsetY', 'tse-y-val'], [this._inputBlur, 'blur', 'tse-blur-val'], ] as [HTMLInputElement, keyof TextShadowLayer, string][]) { input.oninput = () => { (this._currentLayer() as any)[key] = Number(input.value); this._getDomElement(valId).textContent = input.value + 'px'; this._refresh(); }; } this._inputColor.oninput = () => { this._currentLayer().color = this._inputColor.value; this._refresh(); }; this._inputOpacity.oninput = () => { this._currentLayer().opacity = Number(this._inputOpacity.value); this._opacityVal.textContent = this._inputOpacity.value + '%'; this._refresh(); }; this._copyBtn.onclick = () => { navigator.clipboard?.writeText(this._cssOutput.value).catch(() => {}); }; this._applyBtn.onclick = () => this._applyToSelection(); this._loadBtn.onclick = () => { this._loadFromPrimarySelection(); this._renderList(); this._loadControls(); this._refresh(); }; this._loadFromPrimarySelection(); this._renderList(); this._loadControls(); this._refresh(); } private _loadFromPrimarySelection() { const primary = this._designerCanvas?.instanceServiceContainer?.selectionService?.primarySelection; if (!primary) return; const existing = primary.getStyle('text-shadow'); if (existing) { this._layers = parseCssTextShadow(existing); this._selectedIndex = 0; } } private _currentLayer(): TextShadowLayer { return this._layers[this._selectedIndex]; } private _addLayer() { this._layers.push(defaultLayer()); this._selectedIndex = this._layers.length - 1; this._renderList(); this._loadControls(); this._refresh(); } private _duplicateLayer() { this._layers.splice(this._selectedIndex + 1, 0, { ...this._currentLayer() }); this._selectedIndex = this._selectedIndex + 1; this._renderList(); this._loadControls(); this._refresh(); } private _removeLayer() { if (this._layers.length <= 1) return; this._layers.splice(this._selectedIndex, 1); this._selectedIndex = Math.min(this._selectedIndex, this._layers.length - 1); this._renderList(); this._loadControls(); this._refresh(); } private _moveLayer(dir: -1 | 1) { const i = this._selectedIndex; const j = i + dir; if (j < 0 || j >= this._layers.length) return; [this._layers[i], this._layers[j]] = [this._layers[j], this._layers[i]]; this._selectedIndex = j; this._renderList(); this._refresh(); } private _renderList() { this._layerList.innerHTML = ''; this._layers.forEach((l, i) => { const li = document.createElement('li'); if (i === this._selectedIndex) li.classList.add('selected'); const swatch = document.createElement('span'); swatch.className = 'swatch'; swatch.style.background = l.color; li.appendChild(swatch); const lbl = document.createElement('span'); lbl.textContent = `${l.offsetX}px ${l.offsetY}px ${l.blur}px`; if (!l.enabled) lbl.classList.add('disabled-label'); li.appendChild(lbl); li.onclick = () => { this._selectedIndex = i; this._renderList(); this._loadControls(); }; this._layerList.appendChild(li); }); } private _loadControls() { const l = this._currentLayer(); this._enabledCheck.checked = l.enabled; this._inputX.value = String(l.offsetX); this._getDomElement('tse-x-val').textContent = l.offsetX + 'px'; this._inputY.value = String(l.offsetY); this._getDomElement('tse-y-val').textContent = l.offsetY + 'px'; this._inputBlur.value = String(l.blur); this._getDomElement('tse-blur-val').textContent = l.blur + 'px'; this._inputColor.value = l.color; this._inputOpacity.value = String(l.opacity); this._opacityVal.textContent = l.opacity + '%'; } private _buildCss(): string { return this._layers.filter(l => l.enabled).map(layerToCss).join(', ') || 'none'; } private _refresh() { const css = this._buildCss(); this._previewText.style.textShadow = css; this._cssOutput.value = css; this._renderList(); } private _applyToSelection() { const items = this._designerCanvas?.instanceServiceContainer?.selectionService?.selectedElements; if (!items?.length) return; const cssVal = this._buildCss(); const group = items[0].openGroup('set text-shadow'); for (const item of items) { if (cssVal === 'none') item.removeStyle('text-shadow'); else item.setStyle('text-shadow', cssVal); } group.commit(); } } customElements.define('node-projects-text-shadow-editor-window', TextShadowEditorWindow); ================================================ FILE: packages/web-component-designer/src/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { DraggableToolWindow } from './DraggableToolWindow.js'; import { IDesignerCanvas } from '../../../IDesignerCanvas.js'; import { filterChildPlaceItems } from '../../../../../helper/LayoutHelper.js'; import { IRect } from '../../../../../../interfaces/IRect.js'; import { IPoint } from '../../../../../../interfaces/IPoint.js'; import { calculateOuterRect } from '../../../../../helper/ElementHelper.js'; import { IDesignItem } from '../../../../../item/IDesignItem.js'; export class TransformToolPopup extends DraggableToolWindow { private _designerCanvas: IDesignerCanvas; private _previousSelectionRect: IRect; private _selectionChanged: boolean; private _relativeButton: HTMLButtonElement; private _absoluteButton: HTMLButtonElement; private _applyButton: HTMLButtonElement; private _inputX: HTMLInputElement; private _inputY: HTMLInputElement; private _inputR: HTMLInputElement; private _inputSpacingX: HTMLInputElement; private _inputSpacingY: HTMLInputElement; private _originTopLeft: HTMLInputElement; private _originTopMid: HTMLInputElement; private _originTopRight: HTMLInputElement; private _originMidLeft: HTMLInputElement; private _originMidMid: HTMLInputElement; private _originMidRight: HTMLInputElement; private _originBotLeft: HTMLInputElement; private _originBotMid: HTMLInputElement; private _originBotRight: HTMLInputElement; private _transformMode: "relative" | "absolute"; private _transformOrigin: "topLeft" | "topMid" | "topRight" | "midLeft" | "midMid" | "midRight" | "botLeft" | "botMid" | "botRight"; protected override get windowTitle(): string { return 'Transform'; } protected override get windowContentStyle(): CSSStyleSheet { return css` .inputs{ float: left; margin-top: 5px; align-items: center; } .input { display: flex; align-items: center; margin-top: 5px; } .text { margin-left: 5px; font-size: 14px; } #input-div{ display: grid; grid-template-columns: 1fr 9fr; grid-template-rows: 25px 25px 25px; grid-row-gap: 2px; font-size: small; margin: 10px; color: white; } #button-div{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 25px; font-size: small; margin: 10px; grid-column-gap: 5px } #apply-div{ font-size: small; justify-content: center; width: 100%; margin-top: 10px; margin-bottom: 10px; display: flex; } #cube{ display: grid; grid-template-columns: 20px 20px 20px; grid-template-rows: 20px 20px 20px; grid-gap: 10px; padding: 10px; top: -80px; position: relative; } #cube-background{ width: 60px; height: 60px; background: gray; margin-top: 20px; margin-left: 20px; } #spacing-div{ display: inline-grid; grid-template-rows: 20px 20px; grid-template-columns: 95px 95px; gap: 5px; justify-content: center; align-items: center; width: 100%; color: white; } `; } protected override get windowTemplate(): string { return `
      X: Y: R:
      X spacing Y spacing
      `; } constructor(designerCanvas?: IDesignerCanvas) { super(); this._designerCanvas = designerCanvas; this._relativeButton = this._getDomElement("transform-button-relative"); this._absoluteButton = this._getDomElement("transform-button-absolute"); this._applyButton = this._getDomElement("transform-button-apply"); this._inputX = this._getDomElement("transform-input-x"); this._inputY = this._getDomElement("transform-input-y"); this._inputR = this._getDomElement("transform-input-r"); this._inputSpacingX = this._getDomElement("spacing-input-x"); this._inputSpacingY = this._getDomElement("spacing-input-y"); this._originTopLeft = this._getDomElement("origin-top-left"); this._originTopMid = this._getDomElement("origin-top-mid"); this._originTopRight = this._getDomElement("origin-top-right"); this._originMidLeft = this._getDomElement("origin-mid-left"); this._originMidMid = this._getDomElement("origin-mid-mid"); this._originMidRight = this._getDomElement("origin-mid-right"); this._originBotLeft = this._getDomElement("origin-bot-left"); this._originBotMid = this._getDomElement("origin-bot-mid"); this._originBotRight = this._getDomElement("origin-bot-right"); this._relativeButton.onclick = () => this._changePositionMode("relative"); this._absoluteButton.onclick = () => this._changePositionMode("absolute"); this._applyButton.onclick = () => this._applyTransform(); this._transformMode = "relative"; this._changePositionMode(this._transformMode); } private _changePositionMode(mode: "relative" | "absolute") { if (mode == "relative") { this._relativeButton.style.backgroundColor = "#6F8A9D"; this._relativeButton.style.color = "black" this._absoluteButton.style.backgroundColor = "#A4B5C1"; this._absoluteButton.style.color = "#77716E" } else { this._absoluteButton.style.backgroundColor = "#6F8A9D"; this._absoluteButton.style.color = "black" this._relativeButton.style.backgroundColor = "#A4B5C1"; this._relativeButton.style.color = "#77716E" } this._transformMode = mode; } private _applyTransform() { this._checkOrigin(); if (!this._designerCanvas) return; let selection = this._designerCanvas.instanceServiceContainer.selectionService.selectedElements; selection = filterChildPlaceItems(selection); this._selectionChanged = false; this._designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.once(() => { this._selectionChanged = true; this._previousSelectionRect = null; }); if (selection.length != 0) { let inputPos: IPoint = { x: isNaN(this._inputX.valueAsNumber) ? null : this._inputX.valueAsNumber, y: isNaN(this._inputY.valueAsNumber) ? null : this._inputY.valueAsNumber } let inputRotation = this._inputR.valueAsNumber ? this._inputR.valueAsNumber : 0; let grp = selection[0].openGroup("Transform selection") if (!this._previousSelectionRect || this._selectionChanged) this._previousSelectionRect = calculateOuterRect(selection, this._designerCanvas); let origin = this._calculateTransformOriginPosition(this._previousSelectionRect); for (let item of selection) { let itemPos: IRect = { x: parseFloat(item.getStyle("left")), y: parseFloat(item.getStyle("top")), width: parseFloat(item.getStyle("width")), height: parseFloat(item.getStyle("height")) } let itemRotStyle = item.getStyle("transform") let itemRotation = 0; if (itemRotStyle) itemRotation = parseFloat(item.getStyle("transform").replaceAll("rotate(", "").replaceAll("deg)", "")); let newPos = this._calculateTransform(this._previousSelectionRect, origin, itemPos, inputRotation, inputPos, this._transformMode) item.setStyle("left", newPos.x.toString() + "px"); item.setStyle("top", newPos.y.toString() + "px"); let rotation: number; if (this._transformMode == 'relative') rotation = itemRotation + inputRotation; else rotation = inputRotation; while (rotation >= 360) rotation -= 360; if (rotation != 0) item.setStyle("transform", "rotate(" + rotation + "deg)"); else item.removeStyle("transform"); } this._applySpacing(selection); grp.commit(); } } private _calculateTransformOriginPosition(selectionRect: IRect): IPoint { switch (this._transformOrigin) { case "topLeft": return { x: selectionRect.x, y: selectionRect.y } case "topMid": return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y } case "topRight": return { x: selectionRect.x + selectionRect.width, y: selectionRect.y } case "midLeft": return { x: selectionRect.x, y: selectionRect.y + selectionRect.height / 2 } case "midMid": return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height / 2 } case "midRight": return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height / 2 } case "botLeft": return { x: selectionRect.x, y: selectionRect.y + selectionRect.height } case "botMid": return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height } case "botRight": return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height } } } private _checkOrigin() { if (this._originTopLeft.checked) this._transformOrigin = "topLeft"; else if (this._originTopMid.checked) this._transformOrigin = "topMid"; else if (this._originTopRight.checked) this._transformOrigin = "topRight"; else if (this._originMidLeft.checked) this._transformOrigin = "midLeft"; else if (this._originMidMid.checked) this._transformOrigin = "midMid"; else if (this._originMidRight.checked) this._transformOrigin = "midRight"; else if (this._originBotLeft.checked) this._transformOrigin = "botLeft"; else if (this._originBotMid.checked) this._transformOrigin = "botMid"; else if (this._originBotRight.checked) this._transformOrigin = "botRight"; } private _calculateTransform(selectionRect: IRect, origin: IPoint, itemRect: IRect, rotation: number, inputPos: IPoint, transformMode: 'relative' | 'absolute'): IPoint { let newPoint: IPoint; // convert deg in rad rotation = rotation * (Math.PI / 180); if (transformMode == 'absolute') { if (inputPos.x) inputPos.x = inputPos.x - selectionRect.x; if (inputPos.y) inputPos.y = inputPos.y - selectionRect.y; } origin = { x: origin.x - itemRect.width / 2, y: origin.y - itemRect.height / 2 } let diffItemPosToOrigin: IPoint = { x: itemRect.x - origin.x, y: itemRect.y - origin.y } newPoint = { x: Math.cos(rotation) * diffItemPosToOrigin.x - Math.sin(rotation) * diffItemPosToOrigin.y + origin.x + inputPos.x, y: Math.sin(rotation) * diffItemPosToOrigin.x + Math.cos(rotation) * diffItemPosToOrigin.y + origin.y + inputPos.y } return newPoint; } private _applySpacing(selection: IDesignItem[]) { let xSpacing = this._inputSpacingX.valueAsNumber; let ySpacing = this._inputSpacingY.valueAsNumber; if (!isNaN(xSpacing)) { let sortedSelectionX = selection.sort((a, b) => { return parseFloat(a.getStyle("left")) - parseFloat(b.getStyle("left")); }); let xStartPos = parseFloat(sortedSelectionX[0].getStyle("left")); for (let i = 0; i < sortedSelectionX.length; i++) { sortedSelectionX[i].setStyle("left", (i * xSpacing + xStartPos) + "px"); } } if (!isNaN(ySpacing)) { let sortedSelectionY = selection.sort((a, b) => { return parseFloat(a.getStyle("top")) - parseFloat(b.getStyle("top")); }); let yStartPos = parseFloat(sortedSelectionY[0].getStyle("top")); for (let i = 0; i < sortedSelectionY.length; i++) { sortedSelectionY[i].setStyle("top", (i * ySpacing + yStartPos) + "px"); } } } } customElements.define('node-projects-designer-transform-tool-popup', TransformToolPopup); ================================================ FILE: packages/web-component-designer/src/elements/widgets/layerDepthView/ILayerDepthView.ts ================================================ export interface ILayerDepthView { } ================================================ FILE: packages/web-component-designer/src/elements/widgets/layerDepthView/layerDepthView.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html, Disposable } from "@node-projects/base-custom-webcomponent"; import { InstanceServiceContainer } from "../../services/InstanceServiceContainer.js"; import { IDesignItem } from "../../item/IDesignItem.js"; import { NodeType } from "../../item/NodeType.js"; import { DesignerCanvas } from "../designerView/designerCanvas.js"; import { ILayerDepthView } from "./ILayerDepthView.js"; interface LayerDepthEntry { element: HTMLElement | SVGElement; depth: number; } export class LayerDepthView extends BaseCustomWebComponentConstructorAppend implements ILayerDepthView { static override readonly style = css` :host { overflow: hidden; display: block; width: 100%; height: 100%; position: relative; isolation: isolate; background: #f3f4f6; color: #111827; user-select: none; -webkit-user-select: none; } #viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; z-index: 0; perspective: 9000px; } #viewport.dragging { cursor: grabbing; } #scene { position: absolute; top: 50%; left: 50%; z-index: 0; transform-style: preserve-3d; transform-origin: center center; } #content { position: absolute; top: 0; left: 0; transform-style: preserve-3d; transform-origin: top left; pointer-events: none; } #content, #content * { transform-style: preserve-3d; } #empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #4b5563; font: 13px sans-serif; pointer-events: none; } #controls { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 2147483647; display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; align-items: center; gap: 8px; box-sizing: border-box; padding: 7px 9px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(17, 24, 39, 0.14); font: 12px sans-serif; pointer-events: auto; z-index: 1; position: relative; } #depthSlider { width: 100%; min-width: 0; } #depthValue { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }`; static override readonly template = html`
      Depth 36px
      No layers
      `; private _viewport: HTMLDivElement; private _scene: HTMLDivElement; private _content: HTMLDivElement; private _empty: HTMLDivElement; private _depthSlider: HTMLInputElement; private _depthValue: HTMLSpanElement; private _instanceServiceContainer: InstanceServiceContainer; private _contentChangedHandler: Disposable; private _zoomFactorChangedHandler: Disposable; private _resizeObserver: ResizeObserver; private _reRenderFlag = false; private _maxX = 0; private _maxY = 0; private _depthSpacing = 36; private _rotateX = 0; private _rotateY = 0; private _translateX = 0; private _translateY = 0; private _scale = 1; private _layerDepthEntries: LayerDepthEntry[] = []; private _dragStart: { x: number; y: number; rotateX: number; rotateY: number; translateX: number; translateY: number; pan: boolean; }; private _boundPointerMove: (event: PointerEvent) => void; private _boundPointerUp: (event: PointerEvent) => void; constructor() { super(); this._restoreCachedInititalValues(); this._viewport = this._getDomElement('viewport'); this._scene = this._getDomElement('scene'); this._content = this._getDomElement('content'); this._empty = this._getDomElement('empty'); this._depthSlider = this._getDomElement('depthSlider'); this._depthValue = this._getDomElement('depthValue'); this._boundPointerMove = this._onPointerMove.bind(this); this._boundPointerUp = this._onPointerUp.bind(this); this._depthSlider.addEventListener('input', () => { this._depthSpacing = Number(this._depthSlider.value); this._depthValue.textContent = this._depthSpacing + 'px'; this._updateLayerDepths(); }); this._viewport.addEventListener('pointerdown', event => this._onPointerDown(event)); this._viewport.addEventListener('wheel', event => this._onWheel(event), { passive: false }); this._viewport.addEventListener('contextmenu', event => event.preventDefault()); this._resizeObserver = new ResizeObserver(() => this._fitScene()); } ready() { this._resizeObserver.observe(this); this._applySceneTransform(); } private _scheduleRender() { if (this._reRenderFlag === false) { this._reRenderFlag = true; setTimeout(() => this._reRender(), 50); } } private async _reRender() { if (!this._instanceServiceContainer) { return; } const designerCanvas = this._instanceServiceContainer.designerCanvas; this._copyAdoptedStyleSheets(designerCanvas.rootDesignItem); const pixelSize = designerCanvas.designerPixelSize; this._maxX = Math.max(pixelSize.width, 1); this._maxY = Math.max(pixelSize.height, 1); const layerTree = this._createLayerTree(); this._content.replaceChildren(layerTree.fragment); this._scene.style.width = this._maxX + 'px'; this._scene.style.height = this._maxY + 'px'; this._content.style.width = this._maxX + 'px'; this._content.style.height = this._maxY + 'px'; this._empty.style.display = layerTree.count ? 'none' : 'flex'; this._updateLayerDepths(); this._fitScene(); this._reRenderFlag = false; } private _copyAdoptedStyleSheets(rootDesignItem: IDesignItem) { const rootElement = rootDesignItem?.element; const usableContainer = rootDesignItem?.usableContainer; const root = rootElement?.shadowRoot ?? (usableContainer instanceof Document ? usableContainer : rootElement?.ownerDocument); this.shadowRoot.adoptedStyleSheets = root?.adoptedStyleSheets ? [...root.adoptedStyleSheets] : []; } private _createLayerTree(): { fragment: DocumentFragment, count: number } { const rootDesignItem = this._instanceServiceContainer.rootDesignItem; const fragment = document.createDocumentFragment(); let count = 0; this._layerDepthEntries = []; for (const designItem of rootDesignItem.children()) { if (designItem.nodeType !== NodeType.Element) { continue; } const clone = designItem.element.cloneNode(true) as Element; fragment.appendChild(clone); count = this._prepareCloneTree(designItem, clone, count); } return { fragment, count }; } private _prepareCloneTree(designItem: IDesignItem, clone: Element, layerIndex: number): number { this._prepareCloneElement(clone, layerIndex); layerIndex++; const originalChildNodes = Array.from(designItem.element.childNodes); const clonedChildNodes = Array.from(clone.childNodes); for (const childDesignItem of designItem.children()) { if (childDesignItem.nodeType !== NodeType.Element) { continue; } const childIndex = originalChildNodes.findIndex(node => node === childDesignItem.node); const childClone = clonedChildNodes[childIndex]; if (childClone instanceof Element) { layerIndex = this._prepareCloneTree(childDesignItem, childClone, layerIndex); } } return layerIndex; } private _prepareCloneElement(clone: Element, layerIndex: number) { if (clone instanceof HTMLElement || clone instanceof SVGElement) { clone.style.transformStyle = 'preserve-3d'; clone.style.willChange = 'translate'; this._layerDepthEntries.push({ element: clone, depth: layerIndex }); } } private _updateLayerDepths() { this._depthValue.textContent = this._depthSpacing + 'px'; if (!this._layerDepthEntries.length) { return; } const depths = this._layerDepthEntries.map(entry => entry.depth); const minDepth = Math.min(...depths); const maxDepth = Math.max(...depths); const depthRange = Math.max(maxDepth - minDepth, 1); const depthToZ = (depth: number) => ((depth - minDepth) / depthRange - 0.5) * this._depthSpacing * 2; const depthByElement = new Map(); for (const entry of this._layerDepthEntries) { depthByElement.set(entry.element, entry.depth); } for (const entry of this._layerDepthEntries) { let parentElement = entry.element.parentElement; let parentDepth: number; while (parentElement) { parentDepth = depthByElement.get(parentElement); if (parentDepth !== undefined) { break; } parentElement = parentElement.parentElement; } const parentZ = parentDepth === undefined ? 0 : depthToZ(parentDepth); entry.element.style.translate = '0 0 ' + (depthToZ(entry.depth) - parentZ) + 'px'; } } private _fitScene() { const viewportRect = this._viewport.getBoundingClientRect(); if (!viewportRect.width || !viewportRect.height || !this._maxX || !this._maxY) { return; } const fitScale = Math.min(viewportRect.width / this._maxX, viewportRect.height / this._maxY) * 0.72; this._scale = Math.min(Math.max(fitScale, 0.05), 4); this._translateX = 0; this._translateY = 0; this._applySceneTransform(); } private _applySceneTransform() { this._scene.style.transformStyle = 'preserve-3d'; this._content.style.transformStyle = 'preserve-3d'; this._scene.style.transform = 'translate(-50%, -50%) ' + 'translate(' + this._translateX + 'px, ' + this._translateY + 'px) ' + 'scale(' + this._scale + ') ' + 'rotateX(' + this._rotateX + 'deg) ' + 'rotateY(' + this._rotateY + 'deg)'; this._content.style.transform = ''; } private _onPointerDown(event: PointerEvent) { if (event.target === this._depthSlider || event.button !== 0 && event.button !== 1 && event.button !== 2) { return; } this._dragStart = { x: event.clientX, y: event.clientY, rotateX: this._rotateX, rotateY: this._rotateY, translateX: this._translateX, translateY: this._translateY, pan: event.button === 1 || event.button === 2 || event.shiftKey }; this._viewport.classList.add('dragging'); this._viewport.setPointerCapture(event.pointerId); this._viewport.addEventListener('pointermove', this._boundPointerMove); this._viewport.addEventListener('pointerup', this._boundPointerUp); this._viewport.addEventListener('pointercancel', this._boundPointerUp); event.preventDefault(); } private _onPointerMove(event: PointerEvent) { if (!this._dragStart) { return; } const dx = event.clientX - this._dragStart.x; const dy = event.clientY - this._dragStart.y; if (this._dragStart.pan) { this._translateX = this._dragStart.translateX + dx; this._translateY = this._dragStart.translateY + dy; } else { this._rotateY = this._dragStart.rotateY + dx * 0.35; this._rotateX = Math.min(85, Math.max(-85, this._dragStart.rotateX - dy * 0.35)); } this._applySceneTransform(); event.preventDefault(); } private _onPointerUp(event: PointerEvent) { this._dragStart = null; this._viewport.classList.remove('dragging'); this._viewport.releasePointerCapture(event.pointerId); this._viewport.removeEventListener('pointermove', this._boundPointerMove); this._viewport.removeEventListener('pointerup', this._boundPointerUp); this._viewport.removeEventListener('pointercancel', this._boundPointerUp); } private _onWheel(event: WheelEvent) { const scaleDelta = event.deltaY < 0 ? 1.08 : 0.92; this._scale = Math.min(6, Math.max(0.03, this._scale * scaleDelta)); this._applySceneTransform(); event.preventDefault(); } public set instanceServiceContainer(value: InstanceServiceContainer) { this._contentChangedHandler?.dispose(); this._zoomFactorChangedHandler?.dispose(); this._instanceServiceContainer = value; if (this._instanceServiceContainer) { this._zoomFactorChangedHandler = (this._instanceServiceContainer.designerCanvas).onZoomFactorChanged.on(() => { this._scheduleRender(); }); this._contentChangedHandler = this._instanceServiceContainer.onContentChanged.on(() => { this._scheduleRender(); }); this._scheduleRender(); } else { this._content.replaceChildren(); this._layerDepthEntries = []; this._empty.style.display = 'flex'; } } } customElements.define('node-projects-web-component-designer-layer-depth-view', LayerDepthView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/miniatureView/IMiniatureView.ts ================================================ export interface IMiniatureView { } ================================================ FILE: packages/web-component-designer/src/elements/widgets/miniatureView/miniatureView.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html, Disposable } from "@node-projects/base-custom-webcomponent"; import { IMiniatureView } from "./IMiniatureView.js"; import { InstanceServiceContainer } from "../../services/InstanceServiceContainer.js"; import { DesignerCanvas } from "../designerView/designerCanvas.js"; export class MiniatureView extends BaseCustomWebComponentConstructorAppend implements IMiniatureView { static override readonly style = css` :host { overflow:hidden; display: block; width: 100%; height: 100%; position: relative; } #outerDiv { width: 100%; height: 100%; } #innerDiv { transform-origin: top left; height: 100%; width: 100%; image-rendering: pixelated; } #above { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; background: transparent; cursor: pointer; } #viewRect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; pointer-events: none; }`; static override readonly template = html`
      `; private _innerDiv: HTMLDivElement; private _outerDiv: HTMLDivElement; private _above: HTMLDivElement; private _instanceServiceContainer: InstanceServiceContainer; private _contentChangedHandler: Disposable; private _maxX = 0; private _maxY = 0; private _resizeObserver: ResizeObserver; private _innerShadow: ShadowRoot; private _zoomFactorChangedHandler: Disposable; private _viewRect: HTMLDivElement; private _minatureScaleX = 1; private _minatureScaleY = 1; private _reRenderFlag = false; private _isDragging = false; private _boundMouseMove: (e: MouseEvent) => void; private _boundMouseUp: (e: MouseEvent) => void; constructor() { super(); this._restoreCachedInititalValues(); this._outerDiv = this._getDomElement('outerDiv'); this._innerDiv = this._getDomElement('innerDiv'); this._viewRect = this._getDomElement('viewRect'); this._above = this._getDomElement('above'); this._innerShadow = this._innerDiv.attachShadow({ mode: 'open' }); this._boundMouseMove = this._onMouseMove.bind(this); this._boundMouseUp = this._onMouseUp.bind(this); this._above.addEventListener('mousedown', (e) => this._onMouseDown(e)); this._resizeObserver = new ResizeObserver(() => { this._reSize(); }); } ready() { this._resizeObserver.observe(this); } private _reSize() { const outerRect = this._outerDiv.getBoundingClientRect(); this._minatureScaleX = outerRect.width / this._maxX; this._minatureScaleY = outerRect.height / this._maxY; this._innerDiv.style.scale = this._minatureScaleX + ' ' + this._minatureScaleY; } private async _reRender() { if (this._instanceServiceContainer) { const designerCanvas = this._instanceServiceContainer?.designerCanvas; this._innerShadow.adoptedStyleSheets = [...designerCanvas.rootDesignItem.element.shadowRoot.adoptedStyleSheets]; const pixelSize = designerCanvas.designerPixelSize; this._maxX = pixelSize.width; this._maxY = pixelSize.height; const miniatureViewContent = await this._instanceServiceContainer.designerCanvas.serviceContainer.miniatureViewService.provideMiniatureView(designerCanvas); this._innerShadow.replaceChildren(miniatureViewContent); this._reSize(); this._reDrawRect(); this._reRenderFlag = false; } } private _reDrawRect() { const designerCanvas = this._instanceServiceContainer?.designerCanvas; const offset = designerCanvas.canvasOffset; const zoom = designerCanvas.zoomFactor; this._viewRect.style.left = (-offset.x / this._maxX * 100) + '%'; this._viewRect.style.top = (-offset.y / this._maxY * 100) + '%'; this._viewRect.style.width = (designerCanvas.clientWidth / zoom / this._maxX * 100) + '%'; this._viewRect.style.height = (designerCanvas.clientHeight / zoom / this._maxY * 100) + '%'; } private _onMouseDown(e: MouseEvent) { if (!this._instanceServiceContainer) return; this._isDragging = true; this._moveCanvasToMousePosition(e); window.addEventListener('mousemove', this._boundMouseMove); window.addEventListener('mouseup', this._boundMouseUp); e.preventDefault(); } private _onMouseMove(e: MouseEvent) { if (!this._isDragging) return; this._moveCanvasToMousePosition(e); e.preventDefault(); } private _onMouseUp(e: MouseEvent) { this._isDragging = false; window.removeEventListener('mousemove', this._boundMouseMove); window.removeEventListener('mouseup', this._boundMouseUp); } private _moveCanvasToMousePosition(e: MouseEvent) { const designerCanvas = this._instanceServiceContainer.designerCanvas; const zoom = designerCanvas.zoomFactor; const aboveRect = this._above.getBoundingClientRect(); const mouseX = e.clientX - aboveRect.left; const mouseY = e.clientY - aboveRect.top; const contentX = (mouseX / aboveRect.width) * this._maxX; const contentY = (mouseY / aboveRect.height) * this._maxY; const halfViewW = designerCanvas.clientWidth / zoom / 2; const halfViewH = designerCanvas.clientHeight / zoom / 2; designerCanvas.canvasOffset = { x: -(contentX - halfViewW), y: -(contentY - halfViewH) }; } public set instanceServiceContainer(value: InstanceServiceContainer) { this._contentChangedHandler?.dispose() this._zoomFactorChangedHandler?.dispose(); this._instanceServiceContainer = value; if (this._instanceServiceContainer) { this._zoomFactorChangedHandler = (this._instanceServiceContainer.designerCanvas).onZoomFactorChanged.on(() => { this._reDrawRect(); }); this._contentChangedHandler = this._instanceServiceContainer.onContentChanged.on(e => { if (this._reRenderFlag === false) { this._reRenderFlag = true; setTimeout(() => this._reRender(), 50); } }); if (this._reRenderFlag === false) { this._reRenderFlag = true; setTimeout(() => this._reRender(), 50); } } else { this._innerShadow.innerHTML = ""; } } } customElements.define('node-projects-web-component-designer-miniature-view', MiniatureView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/paletteView/paletteElements.ts ================================================ import { IElementDefinition } from '../../services/elementsService/IElementDefinition.js'; import { dragDropFormatNameElementDefinition } from '../../../Constants.js'; import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent'; import { ServiceContainer } from '../../services/ServiceContainer.js'; import { NamedTools } from '../designerView/tools/NamedTools.js'; export class PaletteElements extends BaseCustomWebComponentLazyAppend { static override readonly style = css` :host { display: block; box-sizing: border-box; height: 100%; overflow: auto; } button { background-color: transparent; color: white; border: none; font-size: 13px; display: block; cursor: pointer; width: 100%; text-align: left; padding: 8px 14px; } button:hover { background: var(--light-grey, #383f52); } table { width: 100% } td { color: white; font-size: 13px; } div { text-transform: uppercase; font-size: 12px; font-weight: bold; padding: 4px 14px; } `; static override readonly template = html`
      `; private _table: HTMLTableElement; constructor() { super(); this._table = this._getDomElement('table'); } loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[], relativeImagePath?: string) { this._table.replaceChildren(); for (const elementDefintion of elementDefintions) { const tr = document.createElement("tr"); const tdEl = document.createElement("td"); const button = document.createElement("button"); button.setAttribute("part", "button"); if (elementDefintion.icon && !elementDefintion.displayHtml) { let icon = elementDefintion.icon; if (!elementDefintion.icon.startsWith('data:')) { icon = relativeImagePath + elementDefintion.icon; } button.innerHTML = '' + '' + '' + '
      ' + elementDefintion.tag + '
      \n'; } else if (elementDefintion.displayHtml) button.innerHTML = elementDefintion.displayHtml; else button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag; button.draggable = true; button.ondragstart = (e) => { e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion)); (e.currentTarget).style.outline = "dashed"; if (elementDefintion.ghostElement) { if (typeof elementDefintion.ghostElement === 'string') { const range = document.createRange(); range.selectNode(document.body); const fragment = range.createContextualFragment(elementDefintion.ghostElement); let elem = fragment.firstChild as HTMLElement; elem.style.position = "absolute"; elem.style.top = "-1000px"; document.body.appendChild(elem); e.dataTransfer.setDragImage(elem, 0, 0); requestAnimationFrame(() => document.body.removeChild(elem)); } else { e.dataTransfer.setDragImage(elementDefintion.ghostElement, 0, 0); } } else if (!elementDefintion.import) { try { let elem = document.createElement(elementDefintion.tag); if (elementDefintion.defaultContent) elem.innerHTML = elementDefintion.defaultContent; if (elementDefintion.defaultWidth) elem.style.width = elementDefintion.defaultWidth; if (elementDefintion.defaultHeight) elem.style.height = elementDefintion.defaultHeight; if (elementDefintion.defaultAttributes) { for (let a in elementDefintion.defaultAttributes) { elem.setAttribute(a, elementDefintion.defaultAttributes[a]); } } if (elementDefintion.defaultStyles) { for (let s in elementDefintion.defaultStyles) { elem.style[s] = elementDefintion.defaultStyles[s]; } } elem.style.position = "absolute"; if (elementDefintion.defaultWidth) elem.style.top = "-" + (parseInt(elementDefintion.defaultHeight) + 500) + 'px'; else elem.style.top = "-500px"; if (elementDefintion.defaultWidth) elem.style.left = "-" + (parseInt(elementDefintion.defaultWidth) + 500) + 'px'; else elem.style.left = "-500px"; document.body.appendChild(elem); let rect = elem.getBoundingClientRect(); if (rect.width > 0 && rect.height > 0) e.dataTransfer.setDragImage(elem, 0, 0); requestAnimationFrame(() => document.body.removeChild(elem)); } catch (err) { console.warn("error creating gost elment", err); } } } button.ondragend = (e) => { elementDefintion.import = null; (e.currentTarget).style.outline = "none"; } button.ontouchstart = (e) => { e.preventDefault(); } button.onclick = (x) => { let tool = serviceContainer.designerTools.get(elementDefintion.tool ?? NamedTools.DrawElementTool); if (typeof tool == 'function') tool = new tool(elementDefintion) serviceContainer.globalContext.tool = tool; } tdEl.appendChild(button); tr.appendChild(tdEl); const tdDesc = document.createElement("td"); tdDesc.innerText = elementDefintion.description ?? ""; tr.appendChild(tdDesc); this._table.appendChild(tr); } } } customElements.define('node-projects-palette-elements', PaletteElements); ================================================ FILE: packages/web-component-designer/src/elements/widgets/paletteView/paletteView.ts ================================================ import '../../controls/DesignerTabControl.js'; import { IElementsService } from '../../services/elementsService/IElementsService.js'; import { PaletteElements } from './paletteElements.js'; import { DesignerTabControl } from '../../controls/DesignerTabControl.js'; import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent'; import { ServiceContainer } from '../../services/ServiceContainer.js'; export class PaletteView extends BaseCustomWebComponentLazyAppend { public selected = 'native'; private _designerTabControl: DesignerTabControl; static override readonly style = css` :host { display: flex; flex-direction: column; flex: 1; height: 100%; }`; constructor() { super(); this._restoreCachedInititalValues(); this._designerTabControl = new DesignerTabControl(); this._designerTabControl.selectedIndex = 0; this.shadowRoot.appendChild(this._designerTabControl); } public async loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]) { this._designerTabControl.innerHTML = ''; for (const s of elementsServices) { try { let elements = await s.getElements(); let paletteElement = new PaletteElements(); paletteElement.title = s.name; this._designerTabControl.appendChild(paletteElement); paletteElement.loadElements(serviceContainer, elements); s.onElementsChanged?.on(async () => { paletteElement.loadElements(serviceContainer, await s.getElements()); }); } catch (err) { console.warn('Error loading elements', err); } } this._designerTabControl.refreshItems(); } } customElements.define('node-projects-palette-view', PaletteView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/propertyGrid/PropertyGrid.ts ================================================ import { ServiceContainer } from '../../services/ServiceContainer.js'; import { PropertyGridPropertyList } from './PropertyGridPropertyList.js'; import { DesignerTabControl } from '../../controls/DesignerTabControl.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { BaseCustomWebComponentLazyAppend, css, Disposable } from '@node-projects/base-custom-webcomponent'; import { IContentChanged, InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js'; import { IPropertyGroup } from '../../services/propertiesService/IPropertyGroup.js'; import { IProperty } from '../../services/propertiesService/IProperty.js'; import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js'; export class PropertyGrid extends BaseCustomWebComponentLazyAppend { private _serviceContainer: ServiceContainer; private _designerTabControl: DesignerTabControl; private _selectedItems: IDesignItem[]; private _propertyGridPropertyLists: PropertyGridPropertyList[]; private _propertyGridPropertyListsDict: Record; private _nodeReplacedCb: Disposable; private _instanceServiceContainer: InstanceServiceContainer; private _selectionChangedHandler: Disposable; private _contentChangedHandler: Disposable; public propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean; public propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void; public propertyContextMenuProvider: (designItems: IDesignItem[], property: IProperty) => IContextMenuItem[]; static override readonly style = css` :host { display: block; height: 100%; user-select: none; -webkit-user-select: none; } button:hover { box-shadow: inset 0 3px 0 var(--light-grey); } button:focus { box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63); } `; static readonly properties = { serviceContainer: Object, instanceServiceContainer: Object, selectedItems: Array, propertyGroupHover: Function, propertyGroupClick: Function, propertyContextMenuProvider: Function } constructor() { super(); this._designerTabControl = new DesignerTabControl(); this.shadowRoot.appendChild(this._designerTabControl); this._restoreCachedInititalValues(); this.addEventListener('contextmenu', (e) => { if ((e.composedPath()[0]).localName != 'input') e.preventDefault() }); } public set serviceContainer(value: ServiceContainer) { this._serviceContainer = value; this._propertyGridPropertyLists = []; this._propertyGridPropertyListsDict = {} } public get serviceContainer(): ServiceContainer { return this._serviceContainer; } public set instanceServiceContainer(value: InstanceServiceContainer) { this._instanceServiceContainer = value; this._selectionChangedHandler?.dispose() this._contentChangedHandler?.dispose() if (this._instanceServiceContainer) { this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => { this.selectedItems = e.selectedElements; }); this._contentChangedHandler = this._instanceServiceContainer.onContentChanged.on(e => { this._changeOccured(null, false); }); this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements; } else { this.selectedItems = []; } } get selectedItems() { return this._selectedItems; } set selectedItems(items: IDesignItem[]) { if (this._selectedItems != items) { this._selectedItems = items; this._selectedItemsSet(); } } async _selectedItemsSet() { const pgGroups = this._serviceContainer.propertyGroupService.getPropertygroups(this._selectedItems); const visibleDict = new Set() for (let p of pgGroups) { let lst = this._propertyGridPropertyListsDict[p.name]; if (!lst) { lst = new PropertyGridPropertyList(this.serviceContainer); lst.title = p.name; lst.propertyGroupHover = this.propertyGroupHover; lst.propertyGroupClick = this.propertyGroupClick; lst.propertyContextMenuProvider = this.propertyContextMenuProvider; this._designerTabControl.appendChild(lst); this._propertyGridPropertyLists.push(lst); this._propertyGridPropertyListsDict[p.name] = lst; } lst.setPropertiesService(p.propertiesService); if (await lst.createElements(this._selectedItems[0])) visibleDict.add(p.name); } let parentEl: HTMLElement = this._designerTabControl; for (const v of visibleDict) { const el = this._propertyGridPropertyListsDict[v]; const scrollTop = el.scrollTop; if (parentEl === this._designerTabControl) parentEl.insertAdjacentElement('afterbegin', el); else parentEl.insertAdjacentElement('afterend', el); parentEl = el; el.scrollTo(0, scrollTop); } for (let p of this._propertyGridPropertyLists) { if (visibleDict.has(p.title)) p.style.display = 'block'; else p.style.display = 'none'; } this._designerTabControl.refreshItems(); if (this._designerTabControl.selectedIndex < 0) this._designerTabControl.selectedIndex = 0; for (const a of this._propertyGridPropertyLists) { if (visibleDict.has(a.title)) a.designItemsChanged(this._selectedItems); } if (this._selectedItems) { if (this._selectedItems.length == 1) { for (const a of this._propertyGridPropertyLists) { if (visibleDict.has(a.title)) a.refreshForDesignItems(this._selectedItems); } this._observePrimarySelectionForChanges(); } } else { this._nodeReplacedCb?.dispose(); this._nodeReplacedCb = null; } } _blockDoubleRun = false; async _changeOccured(change: IContentChanged, forceRecreate = false) { if (!this._blockDoubleRun) { this._blockDoubleRun = true; const selItem = this._selectedItems[0]; if (selItem) { for (const a of this._propertyGridPropertyLists) { if (a.propertiesService?.getRefreshMode(selItem) == RefreshMode.fullOnValueChange) { await a.createElements(selItem); a.designItemsChanged(this._selectedItems); } a.refreshForDesignItems(this._selectedItems); } } this._blockDoubleRun = false; } } private _observePrimarySelectionForChanges() { this._nodeReplacedCb?.dispose(); this._nodeReplacedCb = this._selectedItems[0].nodeReplaced.on(() => { this._observePrimarySelectionForChanges(); this._changeOccured(null, true); }); } } customElements.define('node-projects-web-component-designer-property-grid', PropertyGrid); ================================================ FILE: packages/web-component-designer/src/elements/widgets/propertyGrid/PropertyGridPropertyList.ts ================================================ import { IProperty } from '../../services/propertiesService/IProperty.js'; import { ServiceContainer } from '../../services/ServiceContainer.js'; import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent'; import { IPropertyEditor } from '../../services/propertiesService/IPropertyEditor.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { IPropertiesService, RefreshMode } from '../../services/propertiesService/IPropertiesService.js'; import { ValueType } from '../../services/propertiesService/ValueType.js'; import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js'; import { PropertyType } from '../../services/propertiesService/PropertyType.js'; import { IPropertyGroup } from '../../services/propertiesService/IPropertyGroup.js'; import { dragDropFormatNameBindingObject, dragDropFormatNamePropertyGrid } from '../../../Constants.js'; import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js'; export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend { private _div: HTMLDivElement; private _propertyMap: Map = new Map(); private _serviceContainer: ServiceContainer; private _propertiesService: IPropertiesService; private _designItems: IDesignItem[]; private _lastClassType: any; private _addCounter: number = 0; public propertyGroupHover: (group: IPropertyGroup, part: 'name' | 'desc') => boolean; public propertyGroupClick: (group: IPropertyGroup, part: 'name' | 'desc') => void; public propertyContextMenuProvider: (designItems: IDesignItem[], property: IProperty) => IContextMenuItem[]; public get propertiesService() { return this._propertiesService; } static override get style() { return css` :host{ display: block; height: 100%; overflow: auto; box-sizing: border-box; } .content-wrapper { padding: .5em; display: grid; grid-template-columns: 11px minmax(80px, auto) minmax(120px, 1fr); align-items: center; grid-auto-rows: minmax(24px, auto); align-items: center; } label, input, select { display: inline-block; color: white; background: transparent; margin: 2px 0; padding: 0 2px 0 4px; width: 110px; white-space: nowrap; } label, .style-label { box-sizing: border-box; display: inline-block; font-size: 13px; width: auto; overflow: hidden; text-overflow: ellipsis; margin-right: 2px; } input, select { padding:0; padding-left: 3px; } input, select { border: none; } .editor-control, .content-wrapper > input, .content-wrapper > select { border: 1px solid var(--input-border-color, #596c7a); border-radius: 0; } .editor-control, input, select { height: 24px; box-sizing: border-box; font-size: 11px; width: 100%; margin: 0; /*min-width: 0;*/ } .editor-control:focus, input:focus, select:focus { outline: none; box-shadow: none; } /*input { margin-left: 4px; }*/ .editor-control[disabled], input[disabled], select[disabled] { color: #BDBDBD; } select { background: transparent; } select:focus option { color: black; } .unset-value { color: lightslategray } .unset-value > * { color: lightslategray } .unset-value:focus { color: white } .group-header { grid-column: 1 / 3; font-size: 10px; font-family: monospace; } .group-header[clickable]:hover { cursor:pointer; color: orange; text-decoration: underline; } .group-header::after{ content: " ▾"; font-size: 14px; } .group-header.expanded::after{ content: " ▴"; font-size: 14px; } .group-desc { display: inline-flex; flex-direction: row-reverse; font-size: 10px; text-decoration: underline; } .group-desc[clickable]:hover { cursor:pointer; color: orange; text-decoration: underline; } .dragOverProperty { outline: 2px dashed orange; outline-offset: -2px; } `; } constructor(serviceContainer: ServiceContainer) { super(); this._restoreCachedInititalValues(); this._serviceContainer = serviceContainer; this._div = document.createElement("div"); this._div.className = "content-wrapper"; this.shadowRoot.appendChild(this._div); } public setPropertiesService(propertiesService: IPropertiesService) { if (this._propertiesService != propertiesService) { this._propertiesService = propertiesService; DomHelper.removeAllChildnodes(this._div); this._propertyMap.clear(); } } public async createElements(designItem: IDesignItem): Promise { if (!this._shouldCreateElements(designItem)) return true; const properties = await this._propertiesService?.getProperties(designItem); return this._rebuildElements(designItem, properties); } private _shouldCreateElements(designItem: IDesignItem): boolean { if (!this._propertiesService) return false; if (this._propertyMap.size == 0) return true; const refreshMode = this._propertiesService.getRefreshMode(designItem); return refreshMode !== RefreshMode.none && (refreshMode !== RefreshMode.fullOnClassChange || this._lastClassType !== designItem.element.constructor); } private _rebuildElements(designItem: IDesignItem, properties: IProperty[] | IPropertyGroup[]): boolean { this._lastClassType = designItem.element.constructor; DomHelper.removeAllChildnodes(this._div); this._propertyMap.clear(); if (properties?.length) { for (let p of properties) { if ('properties' in p) this.createPropertyGroups(p); else this.createPropertyEditors(p); } return true; } return false; } private createPropertyGroups(group: IPropertyGroup) { let header = document.createElement('span'); header.addEventListener('click', () => { this.expandOrCollapsePropertyGroups(group); header.classList.toggle('expanded') }); header.innerHTML = group.name.replaceAll("\n", "
      "); header.className = 'group-header'; this._div.appendChild(header); let desc = document.createElement('span'); desc.innerHTML = group.description ?? ''; desc.className = 'group-desc'; if (this.propertyGroupHover) { header.onmouseenter = () => { if (this.propertyGroupHover(group, 'name')) header.setAttribute('clickable', '') else header.removeAttribute('clickable') } header.onclick = () => { if (this.propertyGroupClick) this.propertyGroupClick(group, 'name'); } desc.onmouseenter = () => { if (this.propertyGroupHover(group, 'desc')) desc.setAttribute('clickable', '') else desc.removeAttribute('clickable') } desc.onclick = () => { if (this.propertyGroupClick) this.propertyGroupClick(group, 'desc'); } } this._div.appendChild(desc); for (const p of group.properties) this.createPropertyEditors(p, true); } private expandOrCollapsePropertyGroups(propertyGroup: IPropertyGroup) { for (let p of propertyGroup.properties) { const property = this._propertyMap.get(p); const displayStyle = property.labelElement.style.display == 'none' ? 'flex' : 'none'; if (property.editor.element) (property.editor.element).style.display = displayStyle; if (property.labelElement) property.labelElement.style.display = displayStyle; if (property.isSetElement.parentElement) property.isSetElement.parentElement.style.display = displayStyle; } } private createPropertyEditors(property: IProperty, isInGroup?: boolean) { let editor: IPropertyEditor; let labelHolder: HTMLElement; if (property.createEditor) editor = property.createEditor(property); else { editor = this._serviceContainer.forSomeServicesTillResult("propertyEditorTypesService", x => x.getEditorForProperty(property)); } if (editor) { let rectContainer = document.createElement("div") if (isInGroup) rectContainer.style.marginLeft = '10px'; rectContainer.style.width = '20px'; rectContainer.style.height = '20px'; rectContainer.style.display = 'flex'; rectContainer.style.alignItems = 'center'; let rect = document.createElement("div") rect.style.width = '7px'; rect.style.height = '7px'; rect.style.border = '1px white solid'; rect.style.cursor = 'pointer'; if (property.propertyType != PropertyType.complex) rectContainer.appendChild(rect); this._div.appendChild(rectContainer); if (property.readonly !== true) { rect.oncontextmenu = (event) => { event.preventDefault(); this.openContextMenu(event, property); } rect.onclick = (event) => { event.preventDefault(); this.openContextMenu(event, property); } } if (property.type == 'addNew') { let input = editor.element; input.disabled = true; input.id = "addNew_input_" + (++this._addCounter); let label = document.createElement("input"); labelHolder = label; if (isInGroup) { label.style.marginLeft = '10px'; label.style.width = 'calc(100% - 10px)'; } label.value = property.name; label.type = "text"; label.id = "addNew_label_" + this._addCounter; label.onkeyup = e => { if (e.key == 'Enter' && label.value) { property.name = label.value; label.disabled = true; input.disabled = false; input.focus(); } } if (property.service.getPropertyNameSuggestions) { const sug = property.service.getPropertyNameSuggestions(null); //TODO: design items? const dl = document.createElement("datalist"); dl.id = "addNew_" + this._addCounter + "_datalist"; for (let s of sug) { const op = document.createElement("option"); op.value = s; dl.append(op); } this._div.appendChild(dl); label.setAttribute('list', dl.id); } this._div.appendChild(label); } else { if (property.hideLabel) { labelHolder = document.createElement("span"); } else if (!property.renamable) { let label = document.createElement("label"); labelHolder = label; if (isInGroup) label.style.marginLeft = '10px'; label.htmlFor = property.name; label.textContent = property.displayName ?? property.name; label.title = property.description ?? ((property.displayName ?? property.name) + ' (type: ' + property.type + (property.defaultValue ? ', default: ' + property.defaultValue : '') + ', propertytype: ' + property.propertyType + ')'); label.ondragleave = (e) => this._onDragLeave(e, property, label); label.ondragover = (e) => this._onDragOver(e, property, label); label.ondrop = (e) => this._onDrop(e, property, label); this._div.appendChild(label); } else { let label = document.createElement("input"); labelHolder = label; if (isInGroup) { label.style.marginLeft = '10px'; label.style.width = 'calc(100% - 10px)'; } label.id = 'label_' + property.name; let input = editor.element; label.value = property.name; label.onkeyup = async e => { if (e.key == 'Enter' && label.value) { const pg = this._designItems[0].openGroup("rename property name from '" + property.name + "' to '" + label.value + "'"); property.service.clearValue(this._designItems, property, 'all'); property.name = label.value; await property.service.setValue(this._designItems, property, input.value); pg.commit(); this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems); } } this._div.appendChild(label); } } if (property.name) editor.element.id = property.name; if (editor.element instanceof HTMLElement) editor.element.classList.add('editor-control'); if (property.hideLabel) (editor.element).style.gridColumn = '2 / 4'; this._div.appendChild(editor.element); this._propertyMap.set(property, { isSetElement: rect, labelElement: labelHolder, editor: editor }); } } private _onDragLeave(event: DragEvent, property: IProperty, label: HTMLLabelElement) { event.preventDefault(); label.classList.remove('dragOverProperty'); } private _onDragOver(event: DragEvent, property: IProperty, label: HTMLLabelElement) { event.preventDefault(); const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0; if (hasTransferDataBindingObject) { const ddService = this._serviceContainer.bindableObjectDragDropService; if (ddService) { const effect = ddService.dragOverOnProperty(event, property, this._designItems); if ((effect ?? 'none') != 'none') { label.classList.add('dragOverProperty'); event.dataTransfer.dropEffect = effect; } else { label.classList.remove('dragOverProperty'); } } } const hasPropertyGrid = event.dataTransfer.types.indexOf(dragDropFormatNamePropertyGrid) >= 0; if (hasPropertyGrid) { const ddService = this._serviceContainer.propertyGridDragDropService; if (ddService) { const effect = ddService.dragOverOnProperty(event, property, this._designItems); if ((effect ?? 'none') != 'none') { label.classList.add('dragOverProperty'); event.dataTransfer.dropEffect = effect; } else { label.classList.remove('dragOverProperty'); } } } } private _onDrop(event: DragEvent, property: IProperty, label: HTMLLabelElement) { event.preventDefault(); label.classList.remove('dragOverProperty'); const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject) if (transferDataBindingObject) { const bo = JSON.parse(transferDataBindingObject); const ddService = this._serviceContainer.bindableObjectDragDropService; if (ddService) { ddService.dropOnProperty(event, property, bo, this._designItems); } } const transferDataPropertyGrid = event.dataTransfer.getData(dragDropFormatNamePropertyGrid) if (transferDataPropertyGrid) { const dropObj = JSON.parse(transferDataPropertyGrid); const ddService = this._serviceContainer.propertyGridDragDropService; if (ddService) { ddService.dropOnProperty(event, property, dropObj, this._designItems); } } } public openContextMenu(event: MouseEvent, property: IProperty) { let ctxMenuItems: IContextMenuItem[]; if (this.propertyContextMenuProvider) ctxMenuItems = this.propertyContextMenuProvider(this._designItems, property) if (!ctxMenuItems) ctxMenuItems = property.service.getContextMenu(this._designItems, property); ContextMenu.show(ctxMenuItems, event); } public designItemsChanged(designItems: IDesignItem[]) { this._designItems = designItems; for (let m of this._propertyMap) { m[1].editor.designItemsChanged(designItems); } } public refreshForDesignItems(items: IDesignItem[]) { for (let m of this._propertyMap) { PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(m[1].isSetElement, m[0], items, this._propertiesService, m[1].editor); } } public static refreshIsSetElementAndEditorForDesignItems(isSetElement: HTMLElement, property: IProperty, items: IDesignItem[], propertiesService: IPropertiesService, editor?: IPropertyEditor) { if (items && items.length) { let s = propertiesService.isSet(items, property); let v = propertiesService.getValue(items, property); isSetElement.title = property.name + ': ' + s; if (s == ValueType.none) { isSetElement.style.background = ''; v = propertiesService.getUnsetValue(items, property); } else if (s == ValueType.all) isSetElement.style.background = 'white'; else if (s == ValueType.some) isSetElement.style.background = 'gray'; else if (s == ValueType.bound) isSetElement.style.background = 'orange'; else if (s == ValueType.fromStylesheet) { v = propertiesService.getUnsetValue(items, property); isSetElement.style.background = 'yellow'; } editor?.refreshValueWithoutNotification(s, v); } else { isSetElement.style.background = ''; } } } customElements.define('node-projects-property-grid-property-list', PropertyGridPropertyList); ================================================ FILE: packages/web-component-designer/src/elements/widgets/propertyGrid/PropertyGridWithHeader.ts ================================================ import { ServiceContainer } from '../../services/ServiceContainer.js'; import { BaseCustomWebComponentLazyAppend, css, Disposable, html } from '@node-projects/base-custom-webcomponent'; import { PropertyGrid } from './PropertyGrid.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { sleep } from '../../helper/Helper.js'; import { NodeType } from '../../item/NodeType.js'; import { PropertyGridPropertyList } from './PropertyGridPropertyList.js'; import { ContentAndIdPropertiesService } from '../../services/propertiesService/services/ContentAndIdPropertiesService.js'; import { IProperty } from '../../services/propertiesService/IProperty.js'; import { IContextMenuItem } from '../../helper/contextMenu/IContextMenuItem.js'; import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js'; //import { doesContentChangeAffectDesignItems } from '../../services/contentService/IContentChanged.js'; export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend { static override readonly style = css` :host { display: block; height: 100%; user-select: none; -webkit-user-select: none; background: var(--medium-grey, #2f3545); color: white; } div.root { display: grid; grid-template-columns: 11px 11px auto 1fr auto; padding: 3px 6px; font-family: monospace; align-items: center; } .desc { font-weight: 700; font-size: 10px; margin-right: 5px; } input { background: var(--medium-grey, #2f3545); border: solid 1px gray; color: white; width: calc(100% - 6px); } #type { color: wheat; white-space: nowrap; overflow: hidden; font-size: 12px; height: 20px; border: none; } #pg { height: calc(100% - 64px); } `; static override readonly template = html`
      Type:
      Id:
      Content:
      ` public propertyGrid: PropertyGrid; private _type: HTMLInputElement; private _id: HTMLInputElement; private _content: HTMLInputElement; private _selectionChangedHandler: Disposable; private _instanceServiceContainer: InstanceServiceContainer; private _idRect: HTMLDivElement; private _contentRect: HTMLDivElement; private _innerRect: HTMLDivElement; private _propertiesService: ContentAndIdPropertiesService; private _configButton: HTMLButtonElement; constructor() { super(); this._restoreCachedInititalValues(); this._type = this._getDomElement('type'); this._id = this._getDomElement('id'); this._content = this._getDomElement('content'); this.propertyGrid = this._getDomElement('pg'); this._idRect = this._getDomElement('idRect'); this._contentRect = this._getDomElement('contentRect'); this._innerRect = this._getDomElement('innerRect'); this._configButton = this._getDomElement('config'); this._configButton.onclick = async () => { const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', async x => await x.hasConfigUi(this._instanceServiceContainer.selectionService.primarySelection)); const ui = await srv.getConfigUi(this._instanceServiceContainer.selectionService.primarySelection); this.serviceContainer.globalContext.showConfigClicked.emit({ designItem: this._instanceServiceContainer.selectionService.primarySelection, configUi: ui }); } this._propertiesService = new ContentAndIdPropertiesService(); this._idRect.oncontextmenu = (event) => { event.preventDefault(); if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem) this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty); }; this._contentRect.oncontextmenu = (event) => { event.preventDefault(); if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem) this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty); }; this._innerRect.oncontextmenu = (event) => { event.preventDefault(); if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem) this._openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty); }; this._id.onkeydown = e => { if (e.key == 'Enter') this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value; else if (e.key == 'Escape') { this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? ''; e.preventDefault(); e.stopPropagation(); } PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService); } this._content.onkeydown = e => { if (e.key == 'Enter') { this._instanceServiceContainer.selectionService.primarySelection.content = this._content.value; this._content.title = this._content.value; } else if (e.key == 'Escape') { this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.element?.textContent ?? ''; e.preventDefault(); e.stopPropagation(); } PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService); PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService); } let pSel: IDesignItem this._id.onfocus = e => { pSel = this._instanceServiceContainer.selectionService.primarySelection; } this._id.onblur = e => { if (pSel) pSel.id = this._id.value; pSel = null; PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService); } } public set serviceContainer(value: ServiceContainer) { this.propertyGrid.serviceContainer = value; } public set instanceServiceContainer(value: InstanceServiceContainer) { const currentContainer = value; this._instanceServiceContainer = currentContainer; this._selectionChangedHandler?.dispose(); if (currentContainer) { this._selectionChangedHandler = currentContainer.selectionService.onSelectionChanged.on(async e => { this.propertyGrid.instanceServiceContainer = currentContainer; await sleep(20); // delay assignment a little bit, so onblur above could still set the value. await this._refreshHeaderForCurrentSelection(currentContainer); }); this._refreshHeaderForCurrentSelection(currentContainer); } else { this._configButton.style.display = 'none'; this._id.value = ''; this._content.value = ''; this._id.disabled = true; this._content.disabled = true; this._idRect.style.background = ''; this._contentRect.style.background = ''; this._innerRect.style.background = ''; this._type.value = ":host"; } this.propertyGrid.instanceServiceContainer = currentContainer; } private async _refreshHeaderForCurrentSelection(currentContainer: InstanceServiceContainer) { if (!currentContainer?.selectionService?.primarySelection || currentContainer.selectionService.primarySelection?.isRootItem) { this._configButton.style.display = 'none'; this._id.value = ''; this._content.value = ''; this._id.disabled = true; this._content.disabled = true; this._idRect.style.background = ''; this._contentRect.style.background = ''; this._innerRect.style.background = ''; this._type.value = ":host"; this._type.title = this._type.value; return; } this._id.disabled = false; this._content.disabled = false; const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', x => x.hasConfigUi(currentContainer.selectionService.primarySelection)); if (srv) { this._configButton.style.display = 'block'; } else { this._configButton.style.display = 'none'; } if (currentContainer.selectionService.primarySelection?.nodeType == NodeType.Element) { this._type.value = currentContainer.selectionService.primarySelection?.name ?? ''; } else { this._type.value = currentContainer.selectionService.primarySelection?.node?.nodeName ?? ''; } this._type.title = this._type.value; this._id.value = currentContainer.selectionService.primarySelection?.id ?? ''; if (currentContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) { this._content.value = currentContainer.selectionService.primarySelection?.content ?? ''; } else if (currentContainer.selectionService.primarySelection?.element?.children?.length <= 0) this._content.value = currentContainer.selectionService.primarySelection?.content ?? ''; else this._content.value = '' this._content.title = this._content.value; PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, currentContainer.selectionService.selectedElements, this._propertiesService); PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, currentContainer.selectionService.selectedElements, this._propertiesService); PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, currentContainer.selectionService.selectedElements, this._propertiesService); } private _openContextMenu(event: MouseEvent, designItems: IDesignItem[], property: IProperty) { let ctxMenuItems: IContextMenuItem[]; if (this.propertyGrid.propertyContextMenuProvider) ctxMenuItems = this.propertyGrid.propertyContextMenuProvider(designItems, property) if (!ctxMenuItems) ctxMenuItems = property.service.getContextMenu(designItems, property); ContextMenu.show(ctxMenuItems, event); } } customElements.define('node-projects-web-component-designer-property-grid-with-header', PropertyGridWithHeader); ================================================ FILE: packages/web-component-designer/src/elements/widgets/refactorView/refactor-view.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html, Disposable } from '@node-projects/base-custom-webcomponent'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { IRefactoring } from '../../services/refactorService/IRefactoring.js'; import { ChangeGroup } from '../../services/undoService/ChangeGroup.js'; export class RefactorView extends BaseCustomWebComponentConstructorAppend { static override readonly template = html`
      search replace
      `; static override readonly style = css` :host { box-sizing: border-box; font-family: monospace; height: 100%; width: 100%; position: absolute; overflow: hidden; } .search { display: grid; grid-template-columns: 40px 1fr; align-items: center; } span { font-size: 10px; } summary { cursor: pointer; font-size: 10px; display: flex; align-items: center; white-space: nowrap; } ul { margin: 4px; padding-left: 20px; font-size: 10px; } #root { padding: 5px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; height: calc(100% - 10px); }`; static readonly is = 'node-projects-refactor-view'; static readonly properties = { } private _instanceServiceContainer: InstanceServiceContainer; private _selectionChangedHandler: Disposable; private _selectedItems: IDesignItem[]; public searchText: string = "(.*)"; public replaceText: string = "$1"; public refactorings = new Map();; ready() { this._bindingsParse(); } public set instanceServiceContainer(value: InstanceServiceContainer) { this._instanceServiceContainer = value; this._selectionChangedHandler?.dispose() this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => { this.selectedItems = e.selectedElements; }); this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements; } get selectedItems() { return this._selectedItems; } set selectedItems(items: IDesignItem[]) { if (this._selectedItems != items) { this._selectedItems = items; this.updateRefactorlist(this._selectedItems); } } public replace() { let grp: ChangeGroup = null; for (let r of this.refactorings) { let n = r[1][0].name; const regex = new RegExp(this.searchText); const found = n.match(regex); if (found) { if (!grp) grp = r[1][0].designItem.openGroup('refactor with regex ' + this.searchText + " -> " + this.replaceText); const newText = n.replace(regex, this.replaceText); if (newText != n) { this.applyRefactoring(r, newText) } } } if (grp) grp.commit(); } public _refactor(refactoring: [string, IRefactoring[]], event: KeyboardEvent) { const ip = event.target as HTMLInputElement; if (event.key == 'Enter') { this.applyRefactoring(refactoring, ip.value); } } public applyRefactoring(refactoring: [string, IRefactoring[]], newValue: string) { const grp = refactoring[1][0].designItem.openGroup('refactor ' + refactoring[1][0].name + ' to ' + newValue); for (let r of refactoring[1]) { r.service.refactor(r, r.name, newValue); } grp.commit(); } updateRefactorlist(designItems: IDesignItem[]) { this.refactorings.clear(); if (designItems && designItems.length) { let refactorings: IRefactoring[] = [] const serviceContainer = designItems[0].serviceContainer; for (let s of serviceContainer.refactorServices) { let rfs = s.getRefactorings(designItems); refactorings.push(...rfs); } //Group refactorings by name //TODO: group also by itemType, cause different item types (for example screen and signal name) could have the same string for (const r of refactorings) { let thisList = this.refactorings.get(r.itemType + '|' + r.name); if (thisList === undefined) { thisList = []; this.refactorings.set(r.itemType + '|' + r.name, thisList); } thisList.push(r); } } this._bindingsRefresh(); } } customElements.define(RefactorView.is, RefactorView); ================================================ FILE: packages/web-component-designer/src/elements/widgets/treeView/ITreeView.ts ================================================ import { IDesignItem } from '../../item/IDesignItem.js'; import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js'; //TODO: buttons in treeview so keyboard events could be directed to designer export interface ITreeView { createTree(rootItem: IDesignItem); selectionChanged(event: ISelectionChangedEvent); } ================================================ FILE: packages/web-component-designer/src/elements/widgets/treeView/treeView.ts ================================================ import { BaseCustomWebComponentLazyAppend, css, Disposable } from '@node-projects/base-custom-webcomponent'; import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent.js'; import { IDesignItem } from '../../item/IDesignItem.js'; import { DesignItem } from '../../item/DesignItem.js'; import { ITreeView } from './ITreeView.js'; import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js'; export class TreeView extends BaseCustomWebComponentLazyAppend implements ITreeView { private _items: any; private _index: number; private _previouslySelected: Element[]; private _treeDiv: HTMLDivElement; private _instanceServiceContainer: InstanceServiceContainer; private _selectionChangedHandler: Disposable; private _contentChangedHandler: Disposable; private _mapElementTreeitem: Map; private _rootItem: IDesignItem //TODO: buton so key events can be transfered to designerCanvas (so you can move controls with keys) static override readonly style = css` :host { --horz-margin: 20px; --vert-margin: 0px; --horz-shift: calc(var(--horz-margin) / 2); /* typically */ --vert-shift: 12px; display: inline-block; position: relative; width: 100%; height: 100%; background: var(--dark-grey, #232733); overflow-y: auto; } button { border: none; font-size: 13px; display: block; padding: 4px 0; cursor: pointer; width: 100%; text-align: left; display: inline-block; margin: 0; background: var(--dark-grey, #232733); position: relative; color: white; } button:hover, button:focus { background: var(--light-grey, #383f52); } span { margin: 4px; } .id { font-style: italic; color: var(--highlight-pink, #e91e63); } .selected { background: var(--light-grey, #383f52); outline: none; } li, ul { margin: 0; padding: 0; } .tree ul { margin-left: var(--horz-margin); } .tree li { list-style-type: none; margin-top: var(--vert-margin); margin-bottom: var(--vert-margin); position: relative; } /* up connector */ .tree li::before { content: ""; position: absolute; top: calc(0px - var(--vert-margin)); left: calc(var(--horz-shift) - var(--horz-margin)); width: calc(var(--horz-margin) - var(--horz-shift)); height: calc(var(--vert-shift) + var(--vert-margin)); border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-radius: 0; } /* down connector */ .tree li::after { position: absolute; content: ""; top: var(--vert-shift); left: calc(var(--horz-shift) - var(--horz-margin)); width: calc(var(--horz-margin) - var(--horz-shift)); height: calc(100% - var(--vert-shift)); border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-radius: 0; } /* do not draw: up connector of first root item */ ul.tree>li:first-child::before { display:none; } /* do not draw: down connector of last item */ .tree li:last-child::after { display:none; } /* draw rounded: down connector of first root item */ ul.tree>li:first-child::after { border-radius: 5px 0 0 0; } /* draw rounded: up connector of last item */ .tree li:last-child:before { border-radius: 0 0 0 5px; } `; constructor() { super(); this._restoreCachedInititalValues(); this._treeDiv = document.createElement('div'); this._treeDiv.style.userSelect = 'none'; this.shadowRoot.appendChild(this._treeDiv); this._treeDiv.addEventListener('click', this._clickElement.bind(this)); } public createTree(rootItem: IDesignItem /*, activeElement: Element */) { this._rootItem = rootItem; if (rootItem != null) this._recomputeTree(rootItem.element, null /*, activeElement */); } // this.instanceServiceContainer.selectionService.setSelectedElements(null); public set instanceServiceContainer(value: InstanceServiceContainer) { this._instanceServiceContainer = value; this._selectionChangedHandler?.dispose() this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => { this.selectionChanged(e); }); this._contentChangedHandler?.dispose() this._contentChangedHandler = this._instanceServiceContainer.onContentChanged.on(e => { this.createTree(value.designerCanvas.rootDesignItem); }); this.createTree(value.designerCanvas.rootDesignItem); } public selectionChanged(event: ISelectionChangedEvent) { this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element))); } private _recomputeTree(parent, activeElement: Element) { this._mapElementTreeitem = new Map(); this._treeDiv.innerHTML = ''; let ul = document.createElement('ul'); ul.classList.add('tree'); this._treeDiv.appendChild(ul); // Since we can't add a pojo to each button, generate a new index for // each button in the this.items array of useful data. this._index = 0; this._items = this._getChildren(parent, ul); this._highlight(activeElement); return this._items; } private _makeButton(tag, id, index) { let aButton = document.createElement('button'); aButton.dataset.index = index; let aTag = document.createElement('span'); aTag.className = 'tag'; aTag.textContent = tag; let aId = document.createElement('span'); aId.className = 'id'; aId.textContent = id; aButton.appendChild(aTag); aButton.appendChild(aId); return aButton; } private _getChildren(item, list) { // Add item and its children into nested ul list let isViewContainer = item.id === 'viewContainer'; let data = { tag: isViewContainer ? 'main-app' : item.tagName.toLowerCase(), id: isViewContainer ? '' : (item.id ? '#' + item.id : ''), text: isViewContainer ? '' : '"' + item.textContent + '"', ref: item, index: this._index }; // Add item to list let li = document.createElement('li'); let button = this._makeButton(data.tag, data.id, data.index); li.appendChild(button); list.appendChild(li); this._mapElementTreeitem.set(data.ref, button); this._index++; let nodes = [data]; // Add children to subordinate list let ul = null; for (let i = 0; i < item.children.length; i++) { let child = item.children[i]; // Skip
      `; const template = document.createElement('template'); template.setAttribute('shadowrootmode', 'open'); const style = document.createElement('style'); style.textContent = originalCss; template.content.appendChild(style); const instanceServiceContainer = { designerCanvas: { lazyTriggerReparseDocumentStylesheets: jest.fn() } } as any; const serviceContainer = { renderedDesignItemServices: [new StyleElementRenderedDesignItemService()] } as any; const hostDesignItem = new DesignItem(host, host, serviceContainer, instanceServiceContainer); const templateDesignItem = new DesignItem(template, template, serviceContainer, instanceServiceContainer); (templateDesignItem as any)._attributes.set('shadowrootmode', 'open'); const styleDesignItem = new DesignItem(style, style, serviceContainer, instanceServiceContainer); const textDesignItem = new DesignItem(style.firstChild, style.firstChild, serviceContainer, instanceServiceContainer); (hostDesignItem as any)._childArray = [templateDesignItem]; (templateDesignItem as any)._parent = hostDesignItem; (templateDesignItem as any)._childArray = [styleDesignItem]; (styleDesignItem as any)._parent = templateDesignItem; (styleDesignItem as any)._childArray = [textDesignItem]; (textDesignItem as any)._parent = styleDesignItem; styleDesignItem.refreshRenderedDesignItem(); expect(style.textContent).toBe(':host { --accent: red; }\n.button[node-projects-force-hover] { color: blue; }'); expect(shadow.querySelector('style').textContent).toBe(':host { --accent: red; }\n.button[node-projects-force-hover] { color: blue; }'); expect(styleDesignItem.content).toBe(originalCss); expect(instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets).toHaveBeenCalledTimes(1); }); ================================================ FILE: packages/web-component-designer/tests/GridHelper.test.ts ================================================ import { expect, test } from '@jest/globals'; import { getGridColumnStartLineFromLocalX, getGridRowStartLineFromLocalY, type IGridInformation } from '../src/elements/helper/GridHelper'; function createGridInformation(): IGridInformation { return { xGap: 0, yGap: 0, gaps: [], cells: [ [ { x: 0, y: 0, width: 100, height: 50, name: 'a', localX: 0, localY: 0 }, { x: 100, y: 0, width: 100, height: 50, name: 'b', localX: 100, localY: 0 }, { x: 200, y: 0, width: 100, height: 50, name: 'c', localX: 200, localY: 0 } ], [ { x: 0, y: 50, width: 100, height: 50, name: 'd', localX: 0, localY: 50 }, { x: 100, y: 50, width: 100, height: 50, name: 'e', localX: 100, localY: 50 }, { x: 200, y: 50, width: 100, height: 50, name: 'f', localX: 200, localY: 50 } ] ] }; } test('maps left resize snapping to the first grid line', () => { const gridInformation = createGridInformation(); expect(getGridColumnStartLineFromLocalX(gridInformation, 10)).toBe(1); expect(getGridColumnStartLineFromLocalX(gridInformation, 75)).toBe(2); expect(getGridColumnStartLineFromLocalX(gridInformation, 175)).toBe(3); }); test('maps top resize snapping to the first grid line', () => { const gridInformation = createGridInformation(); expect(getGridRowStartLineFromLocalY(gridInformation, 5)).toBe(1); expect(getGridRowStartLineFromLocalY(gridInformation, 30)).toBe(2); expect(getGridRowStartLineFromLocalY(gridInformation, 90)).toBe(3); }); ================================================ FILE: packages/web-component-designer/tests/NumericStyleInput.test.ts ================================================ import { expect, test } from '@jest/globals'; import type { IProperty } from '../src/elements/services/propertiesService/IProperty'; import { PropertyType } from '../src/elements/services/propertiesService/PropertyType'; import { combineNumericStyleInputValue, getNumericStyleInputUnitLabel, normalizeNumericStyleInputOptionValues, parseNumericStyleInputValue, resolveNumericStyleInputSelectedUnit, resolveNumericStyleInputStep } from '../src/elements/controls/NumericStyleInputValueHelpers'; import { applyCssNumericPropertyDefaults, convertNumericUnitValue, defaultCssNumericUnits, defaultCssNumericUnitSteps } from '../src/elements/services/propertiesService/propertyEditors/UnitPropertyEditorConfig'; test('parses numeric, fixed, and custom values', () => { expect(parseNumericStyleInputValue('12px')).toEqual({ kind: 'numeric', numberText: '12', value: 12, unit: 'px' }); expect(parseNumericStyleInputValue('auto')).toEqual({ kind: 'text', text: 'auto' }); expect(parseNumericStyleInputValue('calc(100% - 4px)')).toEqual({ kind: 'text', text: 'calc(100% - 4px)' }); expect(parseNumericStyleInputValue('')).toEqual({ kind: 'empty' }); expect(combineNumericStyleInputValue('24', 'rem')).toBe('24rem'); }); test('numeric style input helpers preserve the unitless option', () => { expect(normalizeNumericStyleInputOptionValues(['', '%', ' ', '%'])).toEqual(['', '%']); expect(getNumericStyleInputUnitLabel('')).toBe(' '); expect(resolveNumericStyleInputSelectedUnit('', '%', ['', '%'])).toBe(''); expect(resolveNumericStyleInputSelectedUnit(undefined, '', ['', '%'])).toBe(''); expect(resolveNumericStyleInputSelectedUnit('rem', '', ['', '%'])).toBe(''); expect(resolveNumericStyleInputStep({ '': 0.1, '%': 10 }, 1, '')).toBe(0.1); expect(resolveNumericStyleInputStep({ '': 0.1, '%': 10 }, 1, '%')).toBe(10); expect(resolveNumericStyleInputStep({ '': 0.1, '%': 10 }, 1, 'px')).toBe(1); }); test('converts css numeric values outside the editor', () => { const baseProperty = { name: 'margin-left', service: {} as any, propertyType: PropertyType.cssValue } satisfies Omit; expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-length' }, numericType: 'css-length', value: 96, numberText: '96', rawValue: '96px', fromUnit: 'px', toUnit: 'in' })).toBe('1in'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-angle' }, numericType: 'css-angle', value: 180, numberText: '180', rawValue: '180deg', fromUnit: 'deg', toUnit: 'turn' })).toBe('0.5turn'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-time' }, numericType: 'css-time', value: 1500, numberText: '1500', rawValue: '1500ms', fromUnit: 'ms', toUnit: 's' })).toBe('1.5s'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-length' }, numericType: 'css-length', value: 10, numberText: '10', rawValue: '10%', fromUnit: '%', toUnit: 'cm' })).toBe('10cm'); const originalGetComputedStyle = globalThis.getComputedStyle; const originalWindow = globalThis.window; const parentElement = { getBoundingClientRect: () => ({ width: 400, height: 200 }), } as any; const element = { parentElement, getBoundingClientRect: () => ({ width: 133.3333, height: 72 }) } as any; const measuredElement = { parentElement, getBoundingClientRect: () => ({ width: 160, height: 72 }) } as any; const fakeWindow = { innerWidth: 1200, innerHeight: 800 } as any; Object.defineProperty(globalThis, 'window', { configurable: true, value: fakeWindow }); Object.defineProperty(globalThis, 'getComputedStyle', { configurable: true, value: (target: any) => { if (target === parentElement) return { fontSize: '16px' }; if (target === element) return { fontSize: '20px' }; if (target === globalThis.document?.documentElement) return { fontSize: '16px' }; return { fontSize: '16px' }; } }); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-length', name: 'width' }, numericType: 'css-length', designItems: [{ element } as any], value: 133.3333, numberText: '133.3333', rawValue: '133.3333px', fromUnit: 'px', toUnit: '%' })).toBe('33.33%'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-length', name: 'width' }, numericType: 'css-length', designItems: [{ element } as any], value: Number.NaN, numberText: '', rawValue: 'initial', fromUnit: '', toUnit: '%' })).toBe('33.33%'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-length', name: 'width' }, numericType: 'css-length', designItems: [{ element } as any], value: 33.33, numberText: '33.33', rawValue: '33.33%', fromUnit: '%', toUnit: 'px' })).toBe('133.32px'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-length', name: 'width', numericValueDecimalPlaces: 3 }, numericType: 'css-length', designItems: [{ element } as any], value: 133.3333, numberText: '133.3333', rawValue: '133.3333px', fromUnit: 'px', toUnit: '%' })).toBe('33.333%'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-length', name: 'width' }, numericType: 'css-length', designItems: [{ element: measuredElement } as any], value: 100, numberText: '100', rawValue: '100px', fromUnit: 'px', toUnit: '%' })).toBe('40%'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-scale', name: 'zoom' }, numericType: 'css-scale', value: 2, numberText: '2', rawValue: '2', fromUnit: '', toUnit: '%' })).toBe('200%'); expect(convertNumericUnitValue({ property: { ...baseProperty, type: 'css-scale', name: 'zoom' }, numericType: 'css-scale', value: 200, numberText: '200', rawValue: '200%', fromUnit: '%', toUnit: '' })).toBe('2'); if (originalGetComputedStyle == null) delete (globalThis as any).getComputedStyle; else Object.defineProperty(globalThis, 'getComputedStyle', { configurable: true, value: originalGetComputedStyle }); if (originalWindow == null) delete (globalThis as any).window; else Object.defineProperty(globalThis, 'window', { configurable: true, value: originalWindow }); }); test('abstract css properties service fills css numeric metadata', () => { const property = applyCssNumericPropertyDefaults({ name: 'width', type: 'css-length', values: ['auto'], service: {} as any, propertyType: PropertyType.cssValue }); expect(property.units).toEqual(defaultCssNumericUnits['css-length']); expect(property.unitSteps).toEqual(defaultCssNumericUnitSteps['css-length']); expect(property.values).toEqual(['auto', 'initial', 'inherit', 'unset']); const originalGetComputedStyle = globalThis.getComputedStyle; const hostElement = { getBoundingClientRect: () => ({ width: 400, height: 200 }) } as any; const element = { parentElement: null, ownerDocument: { body: hostElement, documentElement: hostElement }, getRootNode: () => ({ host: hostElement }), getBoundingClientRect: () => ({ width: 160, height: 80 }) } as any; Object.defineProperty(globalThis, 'getComputedStyle', { configurable: true, value: () => ({ fontSize: '16px' }) }); expect(property.numericValueConverter?.(100, 'px', '%', property, 'css-length', '100', '100px', [{ element } as any])).toBe('40%'); if (originalGetComputedStyle == null) delete (globalThis as any).getComputedStyle; else Object.defineProperty(globalThis, 'getComputedStyle', { configurable: true, value: originalGetComputedStyle }); }); ================================================ FILE: packages/web-component-designer/tests/PasteFormatSnapshot.test.ts ================================================ import { expect, test } from '@jest/globals'; import { createPasteFormatSnapshot, createPasteFormatSnapshotFromEntries, getPasteFormatEntries } from '../src/elements/services/copyPasteService/PasteFormatSnapshot'; test('collects border, background, and text properties and skips unrelated styles', () => { const values: Record = { 'background-color': ' rgb(1, 2, 3) ', 'border-top-color': ' red ', 'border-top-style': ' solid ', 'font-family': ' Fira Code ', 'line-height': ' 24px ', 'color': ' white ', 'display': ' grid ' }; const fakeStyle = { length: 7, 0: 'background-color', 1: 'border-top-color', 2: 'border-top-style', 3: 'font-family', 4: 'line-height', 5: 'color', 6: 'display', getPropertyValue(name: string) { return values[name] ?? ''; } } as Pick & ArrayLike; const snapshot = createPasteFormatSnapshot(fakeStyle); expect(snapshot.background).toEqual([{ name: 'background-color', value: 'rgb(1, 2, 3)' }]); expect(snapshot.border).toEqual([ { name: 'border-top-color', value: 'red' }, { name: 'border-top-style', value: 'solid' } ]); expect(snapshot.text).toEqual([ { name: 'font-family', value: 'Fira Code' }, { name: 'line-height', value: '24px' }, { name: 'color', value: 'white' } ]); expect(getPasteFormatEntries(snapshot, 'all')).toEqual([ { name: 'border-top-color', value: 'red' }, { name: 'border-top-style', value: 'solid' }, { name: 'background-color', value: 'rgb(1, 2, 3)' }, { name: 'font-family', value: 'Fira Code' }, { name: 'line-height', value: '24px' }, { name: 'color', value: 'white' } ]); }); test('collects transform properties and includes them in the all group', () => { const values: Record = { 'transform': 'translateX(12px) rotate(12deg)', 'translate': '12px 0', 'rotate': '12deg', 'scale': '1.2', 'transform-origin': 'center center', 'display': 'grid' }; const fakeStyle = { length: 6, 0: 'transform', 1: 'translate', 2: 'rotate', 3: 'scale', 4: 'transform-origin', 5: 'display', getPropertyValue(name: string) { return values[name] ?? ''; } } as Pick & ArrayLike; const snapshot = createPasteFormatSnapshot(fakeStyle); expect(snapshot.transform).toEqual([ { name: 'transform', value: 'translateX(12px) rotate(12deg)' }, { name: 'translate', value: '12px 0' }, { name: 'rotate', value: '12deg' }, { name: 'scale', value: '1.2' }, { name: 'transform-origin', value: 'center center' } ]); expect(getPasteFormatEntries(snapshot, 'all')).toEqual(snapshot.transform); }); test('keeps duplicate properties out of the all group', () => { const values: Record = { 'background-image': 'none', 'background-color': 'transparent', 'background-color-duplicate': '' }; const fakeStyle = { length: 4, 0: 'background-image', 1: 'background-color', 2: 'background-image', 3: 'background-color-duplicate', getPropertyValue(name: string) { return values[name] ?? ''; } } as Pick & ArrayLike; const snapshot = createPasteFormatSnapshot(fakeStyle); expect(snapshot.background).toEqual([ { name: 'background-image', value: 'none' }, { name: 'background-color', value: 'transparent' } ]); expect(snapshot.all).toEqual(snapshot.background); }); test('creates a snapshot from design item style entries', () => { const snapshot = createPasteFormatSnapshotFromEntries([ ['border-top-color', ' red '], ['background-color', ' rgb(1, 2, 3) '], ['transform', ' translateX(12px) '], ['rotate', ' 12deg '], ['font-family', ' Fira Code '], ['color', ' white '] ]); expect(snapshot?.border).toEqual([{ name: 'border-top-color', value: 'red' }]); expect(snapshot?.background).toEqual([{ name: 'background-color', value: 'rgb(1, 2, 3)' }]); expect(snapshot?.transform).toEqual([ { name: 'transform', value: 'translateX(12px)' }, { name: 'rotate', value: '12deg' } ]); expect(snapshot?.text).toEqual([ { name: 'font-family', value: 'Fira Code' }, { name: 'color', value: 'white' } ]); }); ================================================ FILE: packages/web-component-designer/tests/PathDataPolyfill.test.ts ================================================ import { afterAll, beforeAll, expect, test } from '@jest/globals'; const svgElementGlobals = [ 'SVGPathElement', 'SVGRectElement', 'SVGCircleElement', 'SVGEllipseElement', 'SVGLineElement', 'SVGPolylineElement', 'SVGPolygonElement' ] as const; type SvgElementGlobalName = (typeof svgElementGlobals)[number]; let straightenLine: typeof import('../src/elements/helper/PathDataPolyfill').straightenLine; let interpolateLinePoints: typeof import('../src/elements/helper/PathDataPolyfill').interpolateLinePoints; const originalGlobals = new Map(); beforeAll(async () => { for (const globalName of svgElementGlobals) { originalGlobals.set(globalName, (globalThis)[globalName]); (globalThis)[globalName] = class { }; } ({ straightenLine, interpolateLinePoints } = await import('../src/elements/helper/PathDataPolyfill')); }); afterAll(() => { for (const globalName of svgElementGlobals) { const originalGlobal = originalGlobals.get(globalName); if (originalGlobal === undefined) delete (globalThis)[globalName]; else (globalThis)[globalName] = originalGlobal; } }); test('straightenLine keeps upward vertical snap upward', () => { const result = straightenLine({ x: 10, y: 10 }, { x: 10, y: 0 }, 90); expect(result.x).toBeCloseTo(10); expect(result.y).toBeCloseTo(0); }); test('straightenLine keeps downward vertical snap downward', () => { const result = straightenLine({ x: 10, y: 10 }, { x: 10, y: 25 }, 90); expect(result.x).toBeCloseTo(10); expect(result.y).toBeCloseTo(25); }); test('interpolateLinePoints fills long gaps with evenly spaced points', () => { const result = interpolateLinePoints({ x: 0, y: 0 }, { x: 12, y: 0 }, 5); expect(result).toHaveLength(3); expect(result[0].x).toBeCloseTo(4); expect(result[0].y).toBeCloseTo(0); expect(result[1].x).toBeCloseTo(8); expect(result[1].y).toBeCloseTo(0); expect(result[2].x).toBeCloseTo(12); expect(result[2].y).toBeCloseTo(0); }); test('interpolateLinePoints does not duplicate identical points', () => { const result = interpolateLinePoints({ x: 3, y: 4 }, { x: 3, y: 4 }, 5); expect(result).toEqual([]); }); ================================================ FILE: packages/web-component-designer/tests/PropertyGridRefresh.test.ts ================================================ import { expect, test } from '@jest/globals'; import { didAttributePresenceChange, didCustomStyleDeclarationSetChange, didStyleDeclarationSetChange } from '../src/elements/services/propertiesService/PropertyMutationHandling'; test('does not recreate when an existing attribute value changes', () => { const mutation = { type: 'attributes', attributeName: 'style', oldValue: 'width: 10px;', target: { getAttribute: () => 'width: 20px;' } } as const; expect(didAttributePresenceChange(mutation)).toBe(false); expect(didStyleDeclarationSetChange(mutation)).toBe(false); }); test('recreates when an attribute is added', () => { const mutation = { type: 'attributes', attributeName: 'style', oldValue: null, target: { getAttribute: () => 'width: 20px;' } } as const; expect(didAttributePresenceChange(mutation)).toBe(true); expect(didStyleDeclarationSetChange(mutation)).toBe(true); }); test('recreates when an attribute is removed', () => { const mutation = { type: 'attributes', attributeName: 'title', oldValue: 'hello', target: { getAttribute: () => null } } as const; expect(didAttributePresenceChange(mutation)).toBe(true); expect(didStyleDeclarationSetChange(mutation)).toBe(false); }); test('recreates styles when inline declaration names change', () => { const mutation = { type: 'attributes', attributeName: 'style', oldValue: 'width: 10px; color: red;', target: { getAttribute: () => 'width: 20px; height: 30px; color: red;' } } as const; expect(didStyleDeclarationSetChange(mutation)).toBe(true); }); test('does not recreate styles when only inline declaration values change', () => { const mutation = { type: 'attributes', attributeName: 'style', oldValue: 'width: 10px; color: red;', target: { getAttribute: () => 'width: 20px; color: blue;' } } as const; expect(didStyleDeclarationSetChange(mutation)).toBe(false); }); test('custom properties only recreate for custom declaration changes', () => { const mutation = { type: 'attributes', attributeName: 'style', oldValue: '--brand: red; width: 10px;', target: { getAttribute: () => '--brand: blue; --accent: orange; width: 20px;' } } as const; expect(didCustomStyleDeclarationSetChange(mutation)).toBe(true); }); ================================================ FILE: packages/web-component-designer/tests/SpecificityCalculator.test.ts ================================================ import { expect, test } from '@jest/globals'; import { calculateSpecificity } from '../dist/elements/services/stylesheetService/SpecificityCalculator'; test('test 1', () => { const res = calculateSpecificity('#aa'); expect(res.A).toBe(1); expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 2', () => { const res = calculateSpecificity('#aa:is(bb,cc:hover)'); expect(res.A).toBe(1); expect(res.B).toBe(1); expect(res.C).toBe(1); }); test('test 3', () => { const res = calculateSpecificity(':host(#aa)'); expect(res.A).toBe(1); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 4', () => { const res = calculateSpecificity('div:hover:selected'); expect(res.A).toBe(0); expect(res.B).toBe(2); expect(res.C).toBe(1); }); test('test 5', () => { const res = calculateSpecificity(':host .grain '); expect(res.A).toBe(0); expect(res.B).toBe(2); expect(res.C).toBe(0); }); test('test 6', () => { const res = calculateSpecificity(':host .center .outer_two__piece:nth-of-type(2)'); expect(res.A).toBe(0); expect(res.B).toBe(4); expect(res.C).toBe(0); }); test('test 7', () => { const res = calculateSpecificity('a[lang|="en"]'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(1); }); test('test 8', () => { const res = calculateSpecificity('div:not(.awesome)'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(1); }); test('test 9', () => { const res = calculateSpecificity('div:where(#aa)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(1); }); test('test 10', () => { const res = calculateSpecificity('*.aa:is(button, button.cc#bb):hover'); expect(res.A).toBe(1); expect(res.B).toBe(3); expect(res.C).toBe(1); }); test('test 11', () => { const res = calculateSpecificity('button:not(:nth-child(2))'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(1); }); test('test 12', () => { const res = calculateSpecificity(':nth-child(2 of .a, #b)'); expect(res.A).toBe(1); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 13', () => { const res = calculateSpecificity(':where(#id, .class)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 14 - escaped class', () => { const res = calculateSpecificity('.\\31 23'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 15 - escaped id', () => { const res = calculateSpecificity('#\\#id'); expect(res.A).toBe(1); expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 16 - attribute with closing bracket in string', () => { const res = calculateSpecificity('[data="a]b"]'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 17 - attribute with parentheses in string', () => { const res = calculateSpecificity('[data="(test)"]'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 18 - nth-child with of class', () => { const res = calculateSpecificity(':nth-child(2 of .a)'); expect(res.A).toBe(0); expect(res.B).toBe(2); // nth-child + .a expect(res.C).toBe(0); }); test('test 19 - nth-child with of id', () => { const res = calculateSpecificity(':nth-child(2 of #a)'); expect(res.A).toBe(1); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 20 - nth-child with selector list', () => { const res = calculateSpecificity(':nth-child(2 of .a, #b)'); expect(res.A).toBe(1); // max(#b) expect(res.B).toBe(1); // nth-child expect(res.C).toBe(0); }); test('test 21 - nth-child with whitespace', () => { const res = calculateSpecificity(':nth-child(2 of .a)'); expect(res.A).toBe(0); expect(res.B).toBe(2); expect(res.C).toBe(0); }); test('test 22 - nth-child without of', () => { const res = calculateSpecificity(':nth-child(2)'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 23 - nested strings and brackets', () => { const res = calculateSpecificity('[data="a(b[c]d)e"]'); expect(res.A).toBe(0); expect(res.B).toBe(1); expect(res.C).toBe(0); }); test('test 24 - namespaced element', () => { const res = calculateSpecificity('svg|rect'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(1); }); test('test 25 - universal with namespace', () => { const res = calculateSpecificity('*|div'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(1); }); test('test 26 - empty namespace', () => { const res = calculateSpecificity('|div'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(1); }); test('test 27 - pseudo-element with args ::part', () => { const res = calculateSpecificity('::part(button)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(1); }); test('test 28 - pseudo-element with args ::slotted', () => { const res = calculateSpecificity('::slotted(span)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(1); }); test('test 29 - combined namespace + pseudo-element', () => { const res = calculateSpecificity('svg|rect::part(foo)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(2); // rect + ::part }); test('test 30 - multiple pseudo-elements', () => { const res = calculateSpecificity('::slotted(span)::part(button)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(2); }); test('test 31 - multiple pseudo-classes', () => { const res = calculateSpecificity('div.class1.class2:hover:focus'); expect(res.A).toBe(0); // no ID expect(res.B).toBe(4); // 2 classes + :hover + :focus expect(res.C).toBe(1); // div type selector }); test('test 32 - pseudo-element and class', () => { const res = calculateSpecificity('p::before.highlight'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .highlight expect(res.C).toBe(2); // p + ::before }); test('test 33 - nested :is() and :not()', () => { const res = calculateSpecificity(':is(.a, #b):not(.c)'); expect(res.A).toBe(1); // max of #b expect(res.B).toBe(1); // .c expect(res.C).toBe(0); }); test('test 34 - complex descendant combinators', () => { const res = calculateSpecificity('ul li .item > a#link:hover'); expect(res.A).toBe(1); // #link expect(res.B).toBe(2); // .item + :hover expect(res.C).toBe(3); // ul + li + a }); test('test 35 - attribute selectors', () => { const res = calculateSpecificity('[data-id="123"].active'); expect(res.A).toBe(0); expect(res.B).toBe(2); // [attr] + .active expect(res.C).toBe(0); }); test('test 36 - multiple pseudo-elements', () => { const res = calculateSpecificity('div::first-line::after'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(3); // div + ::first-line + ::after }); test('test 37 - universal selector with class', () => { const res = calculateSpecificity('*[role="button"].btn'); expect(res.A).toBe(0); expect(res.B).toBe(2); // [role] + .btn expect(res.C).toBe(0); // universal selector doesn't count }); test('test 38 - nested :has()', () => { const res = calculateSpecificity('div:has(> span.highlight, a#link)'); expect(res.A).toBe(1); // #link (most specific argument: a#link) expect(res.B).toBe(0); expect(res.C).toBe(2); // div + a }); test('test 39 - :where() does not increase specificity', () => { const res = calculateSpecificity(':where(.a, #b)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 40 - type selector and namespace', () => { const res = calculateSpecificity('svg|circle.special'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .special expect(res.C).toBe(1); // circle type }); test('test 41 - multiple combinators and pseudo-elements', () => { const res = calculateSpecificity('header nav > ul li::after'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(5); // header + nav + ul + li + ::after }); test('test 42 - :nth-last-child with of selector list', () => { const res = calculateSpecificity(':nth-last-child(3 of .x, #y, a)'); expect(res.A).toBe(1); // max from #y expect(res.B).toBe(1); // nth-last-child itself expect(res.C).toBe(0); }); test('test 43 - escaping in identifiers', () => { const res = calculateSpecificity('.class\\#escaped #id\\:special'); expect(res.A).toBe(1); // #id\:special expect(res.B).toBe(1); // .class\#escaped expect(res.C).toBe(0); }); test('test 44 - nested functional pseudo-classes', () => { const res = calculateSpecificity(':is(:not(.a), :has(#b))'); expect(res.A).toBe(1); // #b (most specific :is arg: :has(#b) = (1,0,0)) expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 45 - complex all together', () => { const res = calculateSpecificity('body > header.navbar :is(ul li:first-child, a#link.active):hover'); expect(res.A).toBe(1); // #link (most specific :is arg: a#link.active) expect(res.B).toBe(3); // .navbar + .active + :hover expect(res.C).toBe(3); // body + header + a }); test('test 46 - deeply nested :is() and :not()', () => { const res = calculateSpecificity(':is(:not(.a, #b), .c)'); expect(res.A).toBe(1); // #b (most specific :is arg: :not(.a, #b) = (1,0,0)) expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 47 - multiple combinators with pseudo-classes', () => { const res = calculateSpecificity('div > ul li:first-child.active + a:hover'); expect(res.A).toBe(0); expect(res.B).toBe(3); // .active + :first-child + :hover expect(res.C).toBe(4); // div + ul + li + a }); test('test 48 - :slotted pseudo-class', () => { const res = calculateSpecificity(':slotted(.item#id)'); expect(res.A).toBe(1); // #id expect(res.B).toBe(1); // .item expect(res.C).toBe(0); }); test('test 49 - :host() pseudo-class', () => { const res = calculateSpecificity(':host(.container)'); expect(res.A).toBe(0); expect(res.B).toBe(2); // :host pseudo-class + .container expect(res.C).toBe(0); }); test('test 50 - :host-context() pseudo-class', () => { const res = calculateSpecificity(':host-context(#parent) .child'); expect(res.A).toBe(1); // #parent expect(res.B).toBe(2); // :host-context pseudo-class + .child expect(res.C).toBe(0); }); test('test 51 - multiple pseudo-elements in chain', () => { const res = calculateSpecificity('div::first-letter::after'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(3); // div + ::first-letter + ::after }); test('test 52 - universal + class + pseudo', () => { const res = calculateSpecificity('*:hover.active'); expect(res.A).toBe(0); expect(res.B).toBe(2); // .active + :hover expect(res.C).toBe(0); // * doesn't count }); test('test 53 - type + class + attribute', () => { const res = calculateSpecificity('button.btn[type="submit"]'); expect(res.A).toBe(0); expect(res.B).toBe(2); // .btn + [type] expect(res.C).toBe(1); // button }); test('test 54 - deeply nested :has()', () => { const res = calculateSpecificity('div:has(ul li:first-child, a#link)'); expect(res.A).toBe(1); // #link (most specific argument: a#link) expect(res.B).toBe(0); expect(res.C).toBe(2); // div + a }); test('test 55 - multiple :where()', () => { const res = calculateSpecificity(':where(.a, #b):where(.c, div)'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 56 - type selector + namespace', () => { const res = calculateSpecificity('html|body main|article.section'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .section expect(res.C).toBe(2); // body + article (namespaced type selectors) }); test('test 57 - multiple descendant combinators', () => { const res = calculateSpecificity('header nav ul li a.link:hover'); expect(res.A).toBe(0); expect(res.B).toBe(2); // .link + :hover expect(res.C).toBe(5); // header + nav + ul + li + a }); test('test 58 - :not() with type + class', () => { const res = calculateSpecificity(':not(div.item)'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .item expect(res.C).toBe(1); // div }); test('test 59 - :is() inside :has()', () => { const res = calculateSpecificity('section:has(:is(.a, #b))'); expect(res.A).toBe(1); // #b (most specific :is arg: #b = (1,0,0)) expect(res.B).toBe(0); expect(res.C).toBe(1); // section }); test('test 60 - multiple functional pseudo-classes', () => { const res = calculateSpecificity(':not(:is(.a, #b)):has(.c)'); expect(res.A).toBe(1); // #b (most specific :is arg: #b = (1,0,0)) expect(res.B).toBe(1); // .c from :has() expect(res.C).toBe(0); }); // --- Legacy single-colon pseudo-elements --- test('test 61 - legacy :before pseudo-element', () => { const res = calculateSpecificity('p:before'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(2); // p + :before (pseudo-element) }); test('test 62 - legacy :after pseudo-element', () => { const res = calculateSpecificity('div.item:after'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .item expect(res.C).toBe(2); // div + :after }); test('test 63 - legacy :first-line pseudo-element', () => { const res = calculateSpecificity('p:first-line'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(2); // p + :first-line }); test('test 64 - legacy :first-letter pseudo-element', () => { const res = calculateSpecificity('p:first-letter'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(2); // p + :first-letter }); // --- :matches() and vendor-prefixed :any() --- test('test 65 - :matches() behaves like :is()', () => { const res = calculateSpecificity(':matches(.a, #b)'); expect(res.A).toBe(1); // most specific arg: #b expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 66 - :-webkit-any() behaves like :is()', () => { const res = calculateSpecificity(':-webkit-any(.a, #b)'); expect(res.A).toBe(1); expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 67 - :-moz-any() behaves like :is()', () => { const res = calculateSpecificity(':-moz-any(.a, #b)'); expect(res.A).toBe(1); expect(res.B).toBe(0); expect(res.C).toBe(0); }); // --- Column combinator || --- test('test 68 - column combinator ||', () => { const res = calculateSpecificity('col.selected || td'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .selected expect(res.C).toBe(2); // col + td }); // --- Nesting selector & --- test('test 69 - bare nesting selector & has zero specificity', () => { const res = calculateSpecificity('&'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(0); }); test('test 70 - & with class', () => { const res = calculateSpecificity('&.active'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .active expect(res.C).toBe(0); // & has zero specificity on its own }); test('test 71 - & as descendant', () => { const res = calculateSpecificity('& .child'); expect(res.A).toBe(0); expect(res.B).toBe(1); // .child expect(res.C).toBe(0); // & has zero specificity on its own }); test('test 72 - & with pseudo-class', () => { const res = calculateSpecificity('&:hover'); expect(res.A).toBe(0); expect(res.B).toBe(1); // :hover expect(res.C).toBe(0); // & has zero specificity on its own }); test('test 73 - & with pseudo-element', () => { const res = calculateSpecificity('&::before'); expect(res.A).toBe(0); expect(res.B).toBe(0); expect(res.C).toBe(1); // ::before }); // --- Performance test --- test('performance - 100k iterations across selector categories', () => { const selectors = { simple: [ 'div', '.btn', '#main', 'div.container', 'ul li a.link', 'body > header nav ul li', '#app .sidebar .nav-item', 'main > section article p span', ], withAttributes: [ '[data-id]', 'input[type="text"]', 'a[href^="https"][target="_blank"].external', 'div[class~="active"][role="button"]', ], withPseudoClasses: [ 'a:hover', 'div:first-child', 'li:nth-child(2n+1)', 'input:focus:not(:disabled)', 'tr:nth-child(odd):hover', ], withPseudoElements: [ 'p::before', 'div::after', 'p:before', 'h1::first-line', 'blockquote::first-letter', ], withIsNotHas: [ ':is(.a, .b, .c)', ':not(#main)', ':has(> .child)', ':is(.nav, #sidebar):not(.hidden)', 'div:has(> span.highlight, a#link)', ':is(:not(.a, #b), .c)', ], withWhere: [ ':where(.a, #b)', ':where(div, span):is(.active)', ], withHostSlotted: [ ':host(.container)', ':host-context(#parent) .child', ':slotted(.item#id)', ], complex: [ 'body > header.navbar :is(ul li:first-child, a#link.active):hover', ':not(:is(.a, #b)):has(.c)', 'section:has(:is(.a, #b))', 'div > ul li:first-child.active + a:hover', 'col.selected || td', ], }; const allSelectors = Object.values(selectors).flat(); const iterations = 100_000; // Warmup for (let i = 0; i < 1000; i++) { for (const sel of allSelectors) calculateSpecificity(sel); } const categoryResults: Record = {}; // Benchmark per category for (const [category, sels] of Object.entries(selectors)) { const start = performance.now(); for (let i = 0; i < iterations; i++) { for (const sel of sels) calculateSpecificity(sel); } const elapsed = performance.now() - start; const totalOps = iterations * sels.length; categoryResults[category] = { ops: totalOps, nsPerOp: (elapsed * 1_000_000) / totalOps, }; } // Overall benchmark const overallStart = performance.now(); for (let i = 0; i < iterations; i++) { for (const sel of allSelectors) calculateSpecificity(sel); } const overallElapsed = performance.now() - overallStart; const totalOps = iterations * allSelectors.length; // Print results console.log('\n── Specificity Calculator Performance ──'); console.log(`Total: ${totalOps.toLocaleString()} ops in ${overallElapsed.toFixed(1)}ms (${((overallElapsed * 1_000_000) / totalOps).toFixed(0)}ns/op)\n`); for (const [category, result] of Object.entries(categoryResults)) { console.log(` ${category.padEnd(22)} ${result.nsPerOp.toFixed(0).padStart(5)}ns/op (${result.ops.toLocaleString()} ops)`); } console.log(''); // Sanity check: should complete in reasonable time (< 5 seconds total) expect(overallElapsed).toBeLessThan(5000); }); ================================================ FILE: packages/web-component-designer/tests/SvgGeometryPlacement.test.ts ================================================ import { afterAll, beforeAll, expect, test } from '@jest/globals'; const svgElementGlobals = [ 'SVGPathElement', 'SVGRectElement', 'SVGCircleElement', 'SVGEllipseElement', 'SVGLineElement', 'SVGPolylineElement', 'SVGPolygonElement' ] as const; type SvgElementGlobalName = (typeof svgElementGlobals)[number]; let transformOffsetByInverseLinearMatrix: typeof import('../src/elements/helper/LayoutHelper').transformOffsetByInverseLinearMatrix; const originalGlobals = new Map(); beforeAll(async () => { for (const globalName of svgElementGlobals) { originalGlobals.set(globalName, (globalThis)[globalName]); (globalThis)[globalName] = class { }; } ({ transformOffsetByInverseLinearMatrix } = await import('../src/elements/helper/LayoutHelper')); }); afterAll(() => { for (const globalName of svgElementGlobals) { const originalGlobal = originalGlobals.get(globalName); if (originalGlobal === undefined) delete (globalThis)[globalName]; else (globalThis)[globalName] = originalGlobal; } }); test('maps visual svg placement offset through inverse rotation', () => { const result = transformOffsetByInverseLinearMatrix( { x: 10, y: 0 }, { a: 0, b: 1, c: -1, d: 0 } ); expect(result.x).toBeCloseTo(0); expect(result.y).toBeCloseTo(-10); }); test('maps visual svg placement offset through inverse scale and skew', () => { const result = transformOffsetByInverseLinearMatrix( { x: 14, y: 10 }, { a: 2, b: 0, c: 1, d: 4 } ); expect(result.x).toBeCloseTo(5.75); expect(result.y).toBeCloseTo(2.5); }); test('keeps svg placement offset unchanged for non-invertible transforms', () => { const result = transformOffsetByInverseLinearMatrix( { x: 14, y: 10 }, { a: 0, b: 0, c: 0, d: 0 } ); expect(result).toEqual({ x: 14, y: 10 }); }); ================================================ FILE: packages/web-component-designer/tests/SvgPathDataSourceMap.test.ts ================================================ import { expect, test } from '@jest/globals'; import { parseSvgPathDataSourceMap } from '../dist/elements/services/sourceMapService/SvgPathDataSourceMap'; test('maps svg path coordinates to segment handles', () => { const source = 'M 10 20 L 30 40 C 1 2 3 4 5 6'; const ranges = parseSvgPathDataSourceMap(source); expect(ranges).toEqual([ { segmentIndex: 0, handleType: 'anchor', start: 2, length: 5 }, { segmentIndex: 1, handleType: 'anchor', start: 10, length: 5 }, { segmentIndex: 2, handleType: 'cp1', start: 18, length: 3 }, { segmentIndex: 2, handleType: 'cp2', start: 22, length: 3 }, { segmentIndex: 2, handleType: 'anchor', start: 26, length: 3 }, ]); }); test('maps implicit line segments after moveto', () => { const source = 'M0 0 10 10 20 20'; const ranges = parseSvgPathDataSourceMap(source); expect(ranges.map(x => ({ segmentIndex: x.segmentIndex, handleType: x.handleType }))).toEqual([ { segmentIndex: 0, handleType: 'anchor' }, { segmentIndex: 1, handleType: 'anchor' }, { segmentIndex: 2, handleType: 'anchor' }, ]); }); ================================================ FILE: packages/web-component-designer/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false, "sourceMap": true, "allowJs": true, "noImplicitAny": false, "noUncheckedSideEffectImports": true, "moduleResolution": "bundler", "strictNullChecks": false }, "include": [ "./src/**/*.ts", "./src/**/*.js", "./src/**/*.json" ] } ================================================ FILE: packages/web-component-designer-codeview-ace/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-codeview-ace/README.md ================================================ # web-component-designer-codeview-ace ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-ace npm i @node-projects/web-component-designer-codeview-ace ## Description This uses the ACE Codeeditor for the Webcomponent Designer Codeview ## Usage import { CodeViewAce } from '@node-projects/web-component-designer-codeview-ace'; serviceContainer.config.codeViewWidget = CodeViewAce; ================================================ FILE: packages/web-component-designer-codeview-ace/package.json ================================================ { "description": "web-component-designer addon: Code Editor using ACE", "name": "@node-projects/web-component-designer-codeview-ace", "version": "0.1.3", "type": "module", "main": "./dist/widgets/codeView/code-view-ace.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "ace-builds": "^1.36.3", "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/web-component-designer": ">=0.1.224" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-codeview-ace/src/widgets/codeView/code-view-ace.ts ================================================ import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { ICodeView, IDisposable, IUiCommand, CommandType, IStringPosition } from '@node-projects/web-component-designer'; import type { Ace } from "ace-builds"; class CodeViewAceCompleter { getCompletions(editor, session, pos, prefix, callback) { if (prefix.length === 0) { callback(null, []); return } let wordList = ['t-t', 'visu-conveyor']; //TODO: get word list from custom elements { callback(null, wordList.map((w) => { return { name: w, value: w, score: 1, meta: "tag" } })); } } } export class CodeViewAce extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable { canvasElement: HTMLElement; elementsToPackages: Map; public code: string; public onTextChanged = new TypedEvent(); private _aceEditor: Ace.Editor; private _editor: HTMLDivElement; static override readonly style = css` :host { display: block; height: 100%; width: 100%; } `; constructor() { super(); this._restoreCachedInititalValues(); this.style.display = 'block'; this._editor = document.createElement("div"); this._editor.style.height = '100%'; this._editor.style.width = '100%'; this.shadowRoot.appendChild(this._editor) } dispose(): void { this._aceEditor?.destroy(); } executeCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: this._aceEditor.execCommand('undo'); break; case CommandType.redo: this._aceEditor.execCommand('redo'); break; case CommandType.copy: let text = this._aceEditor.getCopyText(); this._aceEditor.execCommand("copy"); navigator.clipboard.writeText(text); break; case CommandType.paste: navigator.clipboard.readText().then(text => { this._aceEditor.execCommand("paste", text) }); break; case CommandType.cut: text = this._aceEditor.getCopyText(); this._aceEditor.execCommand("cut"); navigator.clipboard.writeText(text); break; case CommandType.delete: this._aceEditor.execCommand("delete"); break; } } canExecuteCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: case CommandType.redo: case CommandType.copy: case CommandType.paste: case CommandType.cut: case CommandType.delete: return true; } return false; } focusEditor() { requestAnimationFrame(() => { this.focus(); this._aceEditor.focus(); }); } oneTimeSetup() { //@ts-ignore let langTools = ace.require("ace/ext/language_tools"); langTools.addCompleter(new CodeViewAceCompleter()); } ready() { //@ts-ignore this._aceEditor = ace.edit(this._editor, { theme: "ace/theme/chrome", mode: "ace/mode/html", value: "", autoScrollEditorIntoView: true, fontSize: "14px", showPrintMargin: false, displayIndentGuides: true, enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true }); //own snippet completer: http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview this._aceEditor.renderer.attachToShadowRoot(); let observer = new MutationObserver((m) => { this._aceEditor.setAutoScrollEditorIntoView(false); this._aceEditor.setAutoScrollEditorIntoView(true); }); let config = { attributes: true, childList: true, characterData: true }; observer.observe(this.shadowRoot.querySelector('.ace_content'), config); this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue())); } update(code) { this._aceEditor.setValue(code); this._aceEditor.clearSelection(); } getText() { return this._aceEditor.getValue(); } setSelection(position: IStringPosition) { let point1 = this._aceEditor.session.getDocument().indexToPosition(position.start, 0); let point2 = this._aceEditor.session.getDocument().indexToPosition(position.start + position.length, 0); //@ts-ignore this._aceEditor.selection.setRange({ start: point1, end: point2 }); //@ts-ignore this._aceEditor.scrollToLine(point1.row); } //TODO: reset undo stack, when and why? //bind to global und and redo //editor.getSession().setUndoManager(new ace.UndoManager()) } customElements.define('node-projects-code-view-ace', CodeViewAce); ================================================ FILE: packages/web-component-designer-codeview-ace/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-codeview-codemirror/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-codeview-codemirror/README.md ================================================ # web-component-designer-codeview-codemirror ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-codemirror npm i @node-projects/web-component-designer-codeview-codemirror ## Description This uses the Codemirror Editor for the Webcomponent Designer Codeview ## Usage import { CodeViewCodeMirror } from '@node-projects/web-component-designer-codeview-codemirror'; serviceContainer.config.codeViewWidget = CodeViewCodeMirror; ================================================ FILE: packages/web-component-designer-codeview-codemirror/package.json ================================================ { "description": "web-component-designer addon: Code Editor using Codemirror 6 and newer", "name": "@node-projects/web-component-designer-codeview-codemirror", "version": "0.1.4", "type": "module", "main": "./dist/widgets/codeView/code-view-codemirror.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "codemirror": "^6.0.1", "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/web-component-designer": ">=0.1.224" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-codeview-codemirror/src/widgets/codeView/code-view-codemirror.ts ================================================ /* import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { ICodeView, IDisposable, IUiCommand, CommandType, IStringPosition } from '@node-projects/web-component-designer'; import CodeMirror from 'codemirror'; export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable { canvasElement: HTMLElement; elementsToPackages: Map; public code: string; public onTextChanged = new TypedEvent(); public mode: string = 'xml'; private _codeMirrorEditor: CodeMirror.Editor; private _editor: HTMLTextAreaElement; static override readonly style = css` :host { display: block; height: 100%; width: 100%; }`; static override readonly template = html`
      `; constructor() { super(); this._restoreCachedInititalValues(); this.style.display = 'block'; this._editor = this._getDomElement('textarea'); } dispose(): void { } executeCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: this._codeMirrorEditor.undo(); break; case CommandType.redo: this._codeMirrorEditor.redo(); break; case CommandType.copy: const text = this._codeMirrorEditor.getSelection(); navigator.clipboard.writeText(text); break; case CommandType.paste: navigator.clipboard.readText().then(text => { this._codeMirrorEditor.replaceSelection(text); }); break; case CommandType.cut: const textc = this._codeMirrorEditor.getSelection(); navigator.clipboard.writeText(textc); this._codeMirrorEditor.replaceSelection(''); break; case CommandType.delete: this._codeMirrorEditor.replaceSelection(''); break; } } canExecuteCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: case CommandType.redo: case CommandType.copy: case CommandType.paste: case CommandType.cut: case CommandType.delete: return true; } return false; } focusEditor() { requestAnimationFrame(() => { this.focus(); this._codeMirrorEditor.focus(); }); } ready() { const config: CodeMirror.EditorConfiguration = { tabSize: 3, lineNumbers: true, mode: this.mode, //@ts-ignore htmlMode: true, lineWrapping: true, //@ts-ignore extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } }, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }; this._codeMirrorEditor = CodeMirror(this._editor, config); this._codeMirrorEditor.setSize('100%', '100%'); this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue())) } update(code) { this._codeMirrorEditor.setValue(code); } getText() { return this._codeMirrorEditor.getValue(); } setSelection(position: IStringPosition) { let point1 = this._codeMirrorEditor.posFromIndex(position.start); let point2 = this._codeMirrorEditor.posFromIndex(position.start + position.length); this._codeMirrorEditor.setSelection(point1, point2); } } customElements.define('node-projects-code-view-codemirror', CodeViewCodeMirror); */ ================================================ FILE: packages/web-component-designer-codeview-codemirror/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-codeview-codemirror5/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-codeview-codemirror5/README.md ================================================ # web-component-designer-codeview-codemirror5 ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-codemirror5 npm i @node-projects/web-component-designer-codeview-codemirror5 ## Description This uses the Codemirror Version 5 Editor for the Webcomponent Designer Codeview. The NPM Package is linked via alias from "codemirror5" directory not "codemirror", look at package.json on how to do. ## Usage import { CodeViewCodeMirror5 } from '@node-projects/web-component-designer-codeview-codemirror5'; serviceContainer.config.codeViewWidget = CodeViewCodeMirror5; ================================================ FILE: packages/web-component-designer-codeview-codemirror5/package.json ================================================ { "description": "web-component-designer addon: Code Editor using Codemirror 5", "name": "@node-projects/web-component-designer-codeview-codemirror5", "version": "0.1.5", "type": "module", "main": "./dist/widgets/codeView/code-view-codemirror5.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "codemirror5": "npm:codemirror@^5.0.0", "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/web-component-designer": ">=0.1.224" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-codeview-codemirror5/src/widgets/codeView/code-view-codemirror5.ts ================================================ import { BaseCustomWebComponentLazyAppend, css, cssFromString, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { ICodeView, IDisposable, IUiCommand, CommandType, IStringPosition } from '@node-projects/web-component-designer'; import CodeMirror from 'codemirror5'; export class CodeViewCodeMirror5 extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable { canvasElement: HTMLElement; elementsToPackages: Map; public code: string; public onTextChanged = new TypedEvent(); public mode: string = 'xml'; private _codeMirrorEditor: CodeMirror.Editor; private _editor: HTMLTextAreaElement; static override readonly style = css` :host { display: block; height: 100%; width: 100%; }`; static override readonly template = html`
      `; constructor() { super(); this._restoreCachedInititalValues(); //@ts-ignore import("codemirror5/lib/codemirror.css", { with: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [cssFromString(x), ...this.shadowRoot.adoptedStyleSheets]); //@ts-ignore import("codemirror5/addon/fold/foldgutter.css", { with: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [cssFromString(x), ...this.shadowRoot.adoptedStyleSheets]); this.style.display = 'block'; this._editor = this._getDomElement('textarea'); } dispose(): void { } executeCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: this._codeMirrorEditor.undo(); break; case CommandType.redo: this._codeMirrorEditor.redo(); break; case CommandType.copy: const text = this._codeMirrorEditor.getSelection(); navigator.clipboard.writeText(text); break; case CommandType.paste: navigator.clipboard.readText().then(text => { this._codeMirrorEditor.replaceSelection(text); }); break; case CommandType.cut: const textc = this._codeMirrorEditor.getSelection(); navigator.clipboard.writeText(textc); this._codeMirrorEditor.replaceSelection(''); break; case CommandType.delete: this._codeMirrorEditor.replaceSelection(''); break; } } canExecuteCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: case CommandType.redo: case CommandType.copy: case CommandType.paste: case CommandType.cut: case CommandType.delete: return true; } return false; } focusEditor() { requestAnimationFrame(() => { this.focus(); this._codeMirrorEditor.focus(); }); } ready() { const config: CodeMirror.EditorConfiguration = { tabSize: 3, lineNumbers: true, mode: this.mode, //@ts-ignore htmlMode: true, lineWrapping: true, //@ts-ignore extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } }, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }; this._codeMirrorEditor = CodeMirror(this._editor, config); this._codeMirrorEditor.setSize('100%', '100%'); this._codeMirrorEditor.on('change', () => this.onTextChanged.emit(this._codeMirrorEditor.getValue())) } update(code) { this._codeMirrorEditor.setValue(code); } getText() { return this._codeMirrorEditor.getValue(); } setSelection(position: IStringPosition) { let point1 = this._codeMirrorEditor.posFromIndex(position.start); let point2 = this._codeMirrorEditor.posFromIndex(position.start + position.length); this._codeMirrorEditor.setSelection(point1, point2); } } customElements.define('node-projects-code-view-codemirror5', CodeViewCodeMirror5); ================================================ FILE: packages/web-component-designer-codeview-codemirror5/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-codeview-monaco/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-codeview-monaco/README.md ================================================ # web-component-designer-codeview-monaco ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-codeview-monaco npm i @node-projects/web-component-designer-codeview-monaco ## Description This uses the Monaco Editor for the Webcomponent Designer Codeview ## Usage import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco'; serviceContainer.config.codeViewWidget = CodeViewMonaco; You need to load the monaco manualy and call await CodeViewMonaco.setMonacoLibrary(...); or via await CodeViewMonaco.loadMonacoEditorViaRequire(); or await CodeViewMonaco.loadMonacoEditorViaImport(); or ================================================ FILE: packages/web-component-designer-codeview-monaco/package.json ================================================ { "description": "web-component-designer addon: Code Editor using Monaco", "name": "@node-projects/web-component-designer-codeview-monaco", "version": "0.2.1", "type": "module", "main": "./dist/widgets/codeView/code-view-monaco.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "monaco-editor": ">=0.50.0", "@node-projects/base-custom-webcomponent": ">=0.19.0", "@node-projects/web-component-designer": ">=0.1.224" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-codeview-monaco/src/widgets/codeView/code-view-monaco.ts ================================================ import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'; import { CommandType, IActivateable, ICodeView, InstanceServiceContainer, IStringPosition, IUiCommand, IUiCommandHandler } from '@node-projects/web-component-designer'; import type * as monacoType from 'monaco-editor'; export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements ICodeView, IActivateable, IUiCommandHandler { private static _monaco: { editor: typeof monacoType.editor, Range: typeof monacoType.Range }; private static _monacoStyle: CSSStyleSheet; public static async getMonacoLib() { if (CodeViewMonaco._monaco) { return CodeViewMonaco._monaco; } const monaco = await import('monaco-editor'); CodeViewMonaco._monaco = monaco; //@ts-ignore CodeViewMonaco._monacoStyle = (await import("monaco-editor/min/vs/editor/editor.main.css", { with: { type: 'css' } })).default; return monaco; } private _disableSelectionAfterSel: boolean; private _setSelectionTimeout: ReturnType; private _pendingSelectionKey: string; dispose(): void { this._monacoEditor?.dispose(); } canvasElement: HTMLElement; elementsToPackages: Map; public onTextChanged = new TypedEvent(); public language: string = 'html'; public singleRow: boolean = false; private _theme: string = 'vs'; public get theme(): string { return this._theme; } public set theme(value: string) { this._theme = value; CodeViewMonaco.getMonacoLib().then(monaco => monaco.editor.setTheme(value)); } #code: string = null; get code() { if (this._monacoEditor) return this._monacoEditor.getModel().getValue(); return null; } set code(v) { this.#code = v; if (this._monacoEditor) this._monacoEditor.getModel().setValue(v); } #readOnly = false; get readOnly() { return this.#readOnly; } set readOnly(v) { this.#readOnly = v; if (this._monacoEditor) this._monacoEditor.updateOptions({ readOnly: v }) } static readonly properties = { code: String, language: String, theme: String, singleRow: Boolean, readOnly: Boolean } private _monacoEditor: monacoType.editor.IStandaloneCodeEditor; private _editor: HTMLDivElement; private _instanceServiceContainer: InstanceServiceContainer; private _disableSelection: boolean; private _disableSelectionAfterUpd: boolean; static override readonly style = css` :host { display: block; height: 100%; width: 100%; } `; static override readonly template = html`
      `; executeCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: this._monacoEditor.trigger('source', 'undo', null); break; case CommandType.redo: this._monacoEditor.trigger('source', 'redo', null); break; case CommandType.copy: this._monacoEditor.trigger('source', 'editor.action.clipboardCopyAction', null); break; case CommandType.paste: this._monacoEditor.trigger('source', 'editor.action.clipboardPasteAction', null); break; case CommandType.cut: break; case CommandType.delete: break; } } canExecuteCommand(command: IUiCommand) { switch (command.type) { case CommandType.undo: case CommandType.redo: case CommandType.copy: case CommandType.paste: case CommandType.cut: case CommandType.delete: return true; } return false; } constructor() { super(); this._restoreCachedInititalValues(); this.addEventListener("keydown", e => e.stopPropagation()); } async ready() { this._parseAttributesToProperties(); const monaco = await CodeViewMonaco.getMonacoLib(); this.shadowRoot.adoptedStyleSheets = [CodeViewMonaco._monacoStyle, (this.constructor).style]; this._editor = this._getDomElement('container'); const resizeObserver = new ResizeObserver(() => { if (this._editor.offsetWidth > 0) { let options: monacoType.editor.IStandaloneEditorConstructionOptions = { automaticLayout: true, theme: this._theme, language: this.language, value: this.#code, fixedOverflowWidgets: true, minimap: { size: 'fill' }, readOnly: this.#readOnly } if (this.singleRow) { options.minimap.enabled = false; options.lineNumbers = 'off'; options.glyphMargin = false; options.folding = false; options.lineDecorationsWidth = 0; options.lineNumbersMinChars = 0; } else { options.scrollbar = {}; options.scrollbar.useShadows = false; options.scrollbar.verticalHasArrows = true; options.scrollbar.horizontalHasArrows = true; options.scrollbar.vertical = 'visible'; options.scrollbar.horizontal = 'visible'; } this._monacoEditor = monaco.editor.create(this._editor, options); let selectionTimeout; let disableCursorChange; let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => { if (selectionTimeout) { clearTimeout(selectionTimeout); selectionTimeout = null; this._disableSelection = false; } disableCursorChange = true; setTimeout(() => { disableCursorChange = false; }, 50); this.onTextChanged.emit(this._monacoEditor.getValue()); this.dispatchEvent(new CustomEvent('code-changed')); }); this._monacoEditor.onDidChangeModel(e => { changeContentListener.dispose(); changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => { if (selectionTimeout) { clearTimeout(selectionTimeout); selectionTimeout = null; this._disableSelection = false; } disableCursorChange = true; setTimeout(() => { disableCursorChange = false; }, 50); this.onTextChanged.emit(this._monacoEditor.getValue()); this.dispatchEvent(new CustomEvent('code-changed')); }); }); this._monacoEditor.onDidChangeCursorPosition(e => { const sel = this._monacoEditor.getSelection(); const offsetStart = this._monacoEditor.getModel().getOffsetAt(sel.getStartPosition()); const offsetEnd = this._monacoEditor.getModel().getOffsetAt(sel.getEndPosition()); if (this._instanceServiceContainer && !this._disableSelectionAfterUpd && !this._disableSelectionAfterSel && !disableCursorChange) { this._disableSelection = true; if (selectionTimeout) clearTimeout(selectionTimeout); selectionTimeout = setTimeout(() => { selectionTimeout = null; this._instanceServiceContainer.selectionService.setSelectionByTextRange(offsetStart, offsetEnd); this._disableSelection = false; }, 50); } }); this._monacoEditor.focus(); resizeObserver.disconnect(); }; }); resizeObserver.observe(this._editor); } focusEditor() { requestAnimationFrame(() => { this.focus(); if (this._monacoEditor) this._monacoEditor.focus(); }); } activated() { if (this._monacoEditor) if (this._monacoEditor) this._monacoEditor.layout(); } update(code: string, instanceServiceContainer?: InstanceServiceContainer) { this.#code = code; this._instanceServiceContainer = instanceServiceContainer; if (this._monacoEditor) { this.clearPendingSetSelection(); this._disableSelectionAfterUpd = true; if (this._monacoEditor) this._monacoEditor.setValue(code); this._disableSelectionAfterUpd = false; CodeViewMonaco.getMonacoLib().then(monaco => { monaco.editor.setTheme(this._theme); monaco.editor.setModelLanguage(this._monacoEditor.getModel(), this.language); }); } } getText() { return this._monacoEditor.getValue(); } setSelection(position: IStringPosition) { if (this._monacoEditor && !this._disableSelection && !this._disableSelectionAfterSel && position) { const selectionKey = `${position.start}:${position.length}`; if (this._pendingSelectionKey === selectionKey) return; this._disableSelectionAfterSel = true; this._pendingSelectionKey = selectionKey; let model = this._monacoEditor.getModel(); let point1 = model.getPositionAt(position.start); let point2 = model.getPositionAt(position.start + position.length); this._setSelectionTimeout = setTimeout(async () => { this._setSelectionTimeout = null; this._pendingSelectionKey = null; this._monacoEditor.setSelection({ startLineNumber: point1.lineNumber, startColumn: point1.column, endLineNumber: point2.lineNumber, endColumn: point2.column }); CodeViewMonaco.getMonacoLib().then(monaco => { this._monacoEditor.revealRangeInCenterIfOutsideViewport(new monaco.Range(point1.lineNumber, point1.column, point2.lineNumber, point2.column), 1); }); setTimeout(() => { this._disableSelectionAfterSel = false; }, 50); }, 50); } } private clearPendingSetSelection() { if (this._setSelectionTimeout) { clearTimeout(this._setSelectionTimeout); this._setSelectionTimeout = null; } this._pendingSelectionKey = null; this._disableSelectionAfterSel = false; } } customElements.define('node-projects-code-view-monaco', CodeViewMonaco); ================================================ FILE: packages/web-component-designer-codeview-monaco/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-collaboration-service/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-collaboration-service/README.md ================================================ # @node-projects/web-component-designer-collaboration-service https://www.npmjs.com/package/@node-projects/web-component-designer-collaboration-service ```bash npm i @node-projects/web-component-designer-collaboration-service ``` ## Description This package adds collaboration features to `@node-projects/web-component-designer`. It provides: - a per-document collaboration service - remote selection and presence overlays - remote cursor overlays - comment context menu integration - a WebRTC transport with `broadcast-channel` and manual copy/paste signaling The package is an addon. It does not patch the default designer bootstrap automatically. You enable it explicitly on your `ServiceContainer`. ## Quick Start ```ts import { createDefaultServiceContainer } from '@node-projects/web-component-designer'; import { setupCollaborationService, WebRtcTabCollaborationTransport, } from '@node-projects/web-component-designer-collaboration-service'; const serviceContainer = createDefaultServiceContainer(); setupCollaborationService(serviceContainer); ``` After that, each `DocumentContainer` gets a collaboration service instance on its `instanceServiceContainer`. ```ts const collaborationService = documentContainer.instanceServiceContainer.collaborationService; collaborationService.attachTransport(new WebRtcTabCollaborationTransport({ enabledSignalingChannels: ['broadcast-channel', 'manual'], rtcConfiguration: { iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: 'turns:turn.example.com:5349?transport=tcp', username: 'demo', credential: 'secret' } ] } })); collaborationService.connect( 'my-session-id', 'peer-a', 'Browser A' ); ``` ## What `setupCollaborationService()` Adds `setupCollaborationService(serviceContainer)` registers: - the `collaborationService` instance factory - the collaboration node/comment overlay extension - the collaboration cursor overlay extension - the collaboration comments context menu entry If you want more control, the package also exports the individual classes: - `DefaultCollaborationService` - `WebRtcTabCollaborationTransport` - `CollaborationOverlayExtensionProvider` - `CollaborationCursorOverlayExtensionProvider` - `CollaborationCommentsContextMenu` ## Signaling Modes `WebRtcTabCollaborationTransport` supports two signaling channels: - `broadcast-channel` Use this for same-origin tabs in the same browser. - `manual` Use this for different browsers or when you want to move signaling data yourself. Both channels are enabled by default. ```ts const transport = new WebRtcTabCollaborationTransport({ enabledSignalingChannels: ['manual'] }); ``` ## Manual Copy/Paste Signaling The manual signaling API is useful for connecting different browsers without a backend signaling server. For same-browser tabs you usually do not need extra RTC configuration. For different machines, browsers, subnets, VPNs, or internet connections, configure `rtcConfiguration` with suitable STUN or TURN servers. Without that, the browser only has local host candidates available, which often works on one computer but is unreliable across machines. If your TURN credentials rotate, update them before reconnecting. `WebRtcTabCollaborationTransport` also exposes `setRtcConfiguration()` for that use case. ```ts const transport = new WebRtcTabCollaborationTransport({ enabledSignalingChannels: ['manual'], rtcConfiguration: { iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: ['turn:turn.example.com:3478?transport=udp', 'turns:turn.example.com:5349?transport=tcp'], username: 'demo', credential: 'secret' } ] } }); transport.setRtcConfiguration({ iceServers: [ { urls: 'stun:stun.l.google.com:19302' }, { urls: 'turns:turn.example.com:5349?transport=tcp', username: 'demo', credential: 'next-secret' } ] }); const bundle = transport.exportManualSignalingData(); await transport.importManualSignalingData(bundleFromOtherClient); ``` Typical flow: 1. Use the same collaboration session id in both clients. 2. Copy the signaling bundle from client A and import it in client B. 3. Copy the updated signaling bundle from client B and import it in client A. 4. If one client still has a newer signaling bundle because of trickled ICE candidates, copy that bundle back once more. ## Demo Notes The demo toolbar contains a `collab` menu with: - session id selection - signaling-channel toggles - copy/paste signaling bundle actions - a help popup with the connection steps In the demo: 1. Use the same session id in both clients. 2. For same-browser tabs, keep `broadcast signaling` enabled. 3. For different browsers, keep `manual copy/paste signaling` enabled and exchange bundles through the menu. ## Package Exports Main exports: - `setupCollaborationService` - `DefaultCollaborationService` - `WebRtcTabCollaborationTransport` - `CollaborationCommentsContextMenu` - `CollaborationOverlayExtensionProvider` - `CollaborationCursorOverlayExtensionProvider` ================================================ FILE: packages/web-component-designer-collaboration-service/package.json ================================================ { "description": "web-component-designer addon for collaboration features", "name": "@node-projects/web-component-designer-collaboration-service", "version": "0.2.0", "type": "module", "main": "./dist/index.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build && npm run bundle", "bundle": "esbuild ./dist/index.js --format=esm --minify --external:@node-projects/* --platform=neutral --bundle --outfile=./dist/index-min.js" }, "dependencies": { "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/web-component-designer": ">=0.2.0" }, "devDependencies": { "esbuild": "^0.25.10" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationCommentsContextMenu.ts ================================================ import { ContextmenuInitiator, getCollaborationNodeIndex, ICollaborationComment, ICollaborationService, IContextMenuExtension, IContextMenuItem, IDesignerCanvas, IDesignItem } from '@node-projects/web-component-designer'; function truncateText(text: string, maxLength: number) { if (!text || text.length <= maxLength) return text; return text.substring(0, Math.max(0, maxLength - 1)) + '…'; } function createCommentId() { return globalThis.crypto?.randomUUID?.() ?? `comment-${Date.now()}-${Math.floor(Math.random() * 100000)}`; } export class CollaborationCommentsContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { return !!designerView.instanceServiceContainer.collaborationService && !!designItem && !designItem.isRootItem; } public provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[] { const collaborationService = designerCanvas.instanceServiceContainer.collaborationService; const targetNodeIndex = getCollaborationNodeIndex(designItem); if (targetNodeIndex == null) return []; const comments = collaborationService!.comments.filter(x => x.targetNodeIndex === targetNodeIndex); const localPeerId = collaborationService!.session?.peerId ?? 'local'; const items: IContextMenuItem[] = [ { title: 'add comment', action: () => { const value = globalThis.prompt?.('Add comment', '')?.trim(); if (!value) return; const now = Date.now(); collaborationService!.upsertComment({ id: createCommentId(), text: value, authorPeerId: localPeerId, targetNodeIndex, targetDesignItemId: designItem.id, createdAt: now, updatedAt: now, resolved: false }); } } ]; if (comments.length) { items.push({ title: '-' }); items.push({ title: `comments (${comments.length})`, children: comments.map(comment => this.createCommentMenuItem(comment, collaborationService!, designItem)) }); } return items; } private createCommentMenuItem(comment: ICollaborationComment, collaborationService: ICollaborationService, designItem: IDesignItem): IContextMenuItem { return { title: `${comment.resolved ? 'resolved' : 'open'}: ${truncateText(comment.text, 36)}`, children: [ { title: comment.resolved ? 'reopen' : 'resolve', action: () => collaborationService.upsertComment({ ...comment, targetDesignItemId: designItem.id, resolved: !comment.resolved, updatedAt: Date.now() }) }, { title: 'remove', action: () => collaborationService.removeComment(comment.id) } ] }; } } ================================================ FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationCursorOverlayExtension.ts ================================================ import { AbstractExtension, IExtensionManager, IDesignerCanvas, IDesignItem, ICollaborationPeerPresence, OverlayLayer } from "@node-projects/web-component-designer"; function truncateText(text: string, maxLength: number) { if (!text || text.length <= maxLength) return text; return text.substring(0, Math.max(0, maxLength - 1)) + '…'; } function createCursorPath(x: number, y: number) { return [ `M ${x} ${y}`, `L ${x} ${y + 18}`, `L ${x + 4.5} ${y + 13.5}`, `L ${x + 8.5} ${y + 23}`, `L ${x + 12} ${y + 21.5}`, `L ${x + 8} ${y + 12.5}`, `L ${x + 15} ${y + 12.5}`, 'Z' ].join(' '); } export class CollaborationCursorOverlayExtension extends AbstractExtension { constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const collaborationService = this.extendedItem.instanceServiceContainer.collaborationService; if (!collaborationService || !this.extendedItem.isRootItem) { if (this.overlays.length) this._removeAllOverlays(); return; } const localPeerId = collaborationService.session?.peerId; const peers = collaborationService.peers .filter(peer => peer.peerId !== localPeerId && !!peer.cursorPosition) .sort((a, b) => a.peerId.localeCompare(b.peerId)); const overlayState = JSON.stringify(peers.map(peer => ({ peerId: peer.peerId, displayName: peer.displayName, color: peer.color, cursorPosition: peer.cursorPosition }))); if (!peers.length) { if (this.overlays.length) this._removeAllOverlays(); this._valuesHaveChanges(overlayState); return; } if (!this._valuesHaveChanges(overlayState)) return; this._removeAllOverlays(); peers.forEach(peer => this.drawPeerCursor(peer)); } override dispose() { this._removeAllOverlays(); } private drawPeerCursor(peer: ICollaborationPeerPresence) { if (!peer.cursorPosition) return; const color = peer.color ?? '#1f7ae0'; const x = peer.cursorPosition.x; const y = peer.cursorPosition.y; const cursor = this._drawPath(createCursorPath(x, y), 'svg-collaboration-cursor', undefined, OverlayLayer.Foreground); cursor.style.fill = color; cursor.style.stroke = '#ffffff'; cursor.style.strokeWidth = '1.2px'; this._drawCircle(x, y, 2.5, 'svg-collaboration-cursor-hotspot', undefined, OverlayLayer.Foreground).style.fill = color; this._drawTextWithBackground( truncateText(peer.displayName ?? peer.peerId, 18), x + 16, y + 16, color, 'svg-collaboration-cursor-label', undefined, OverlayLayer.Foreground ); } } ================================================ FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationCursorOverlayExtensionProvider.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { CollaborationCursorOverlayExtension } from './CollaborationCursorOverlayExtension.js'; import { IDesignerExtensionProvider, IExtensionManager, IDesignerCanvas, IDesignItem, IDesignerExtension } from '@node-projects/web-component-designer'; export class CollaborationCursorOverlayExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return designItem.isRootItem; } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new CollaborationCursorOverlayExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-collaboration-cursor, .svg-collaboration-cursor-hotspot, .svg-collaboration-cursor-label { pointer-events: none; } .svg-collaboration-cursor-label { font-size: 11px; } `; } ================================================ FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationOverlayExtension.ts ================================================ import { ICollaborationPeerPresence, ICollaborationComment, IDesignItem, AbstractExtension, IExtensionManager, IDesignerCanvas, getCollaborationNodeIndex, OverlayLayer } from "@node-projects/web-component-designer"; const collaborationOverlayCacheKey = Symbol('collaborationOverlayCache'); type CollaborationOverlayCache = { peerMap: Map; commentMap: Map; }; function getOverlayCache(designItem: IDesignItem, cache: Record): CollaborationOverlayCache { if (cache[collaborationOverlayCacheKey]) return cache[collaborationOverlayCacheKey]; const collaborationService = designItem.instanceServiceContainer.collaborationService; const peerMap = new Map; const commentMap = new Map; const localPeerId = collaborationService?.session?.peerId; for (const peer of collaborationService?.peers ?? []) { if (!peer || peer.peerId === localPeerId) continue; const indexes = new Set(); if (peer.activeNodeIndex != null) indexes.add(peer.activeNodeIndex); for (const nodeIndex of peer.selectedNodeIndexes ?? []) indexes.add(nodeIndex); for (const nodeIndex of indexes) { const peers = peerMap.get(nodeIndex) ?? []; peers.push(peer); peerMap.set(nodeIndex, peers); } } for (const comment of collaborationService?.comments ?? []) { if (comment.targetNodeIndex == null) continue; const comments = commentMap.get(comment.targetNodeIndex) ?? []; comments.push(comment); commentMap.set(comment.targetNodeIndex, comments); } const overlayCache = { peerMap, commentMap }; cache[collaborationOverlayCacheKey] = overlayCache; return overlayCache; } function truncateText(text: string, maxLength: number) { if (!text || text.length <= maxLength) return text; return text.substring(0, Math.max(0, maxLength - 1)) + '…'; } export class CollaborationOverlayExtension extends AbstractExtension { constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem) { super(extensionManager, designerView, extendedItem); } override extend(cache: Record, event?: Event) { this.refresh(cache, event); } override refresh(cache: Record, event?: Event) { const collaborationService = this.extendedItem.instanceServiceContainer.collaborationService; if (!collaborationService) { if (this.overlays.length) this._removeAllOverlays(); return; } const nodeIndex = getCollaborationNodeIndex(this.extendedItem, cache); if (nodeIndex == null) { if (this.overlays.length) this._removeAllOverlays(); return; } const overlayCache = getOverlayCache(this.extendedItem, cache); const peers = [...(overlayCache.peerMap.get(nodeIndex) ?? [])].sort((a, b) => a.peerId.localeCompare(b.peerId)); const comments = [...(overlayCache.commentMap.get(nodeIndex) ?? [])].sort((a, b) => a.createdAt - b.createdAt); if (!peers.length && !comments.length) { if (this.overlays.length) this._removeAllOverlays(); return; } const rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element); const overlayState = JSON.stringify({ x: rect.x, y: rect.y, width: rect.width, height: rect.height, peers: peers.map(x => ({ peerId: x.peerId, displayName: x.displayName, color: x.color, activeNodeIndex: x.activeNodeIndex, selectedNodeIndexes: x.selectedNodeIndexes })), comments: comments.map(x => ({ id: x.id, resolved: x.resolved, text: x.text, authorPeerId: x.authorPeerId })) }); if (!this._valuesHaveChanges(overlayState)) return; this._removeAllOverlays(); peers.forEach((peer, index) => { const offset = index * 3; const peerRect = this._drawRect(rect.x - offset, rect.y - offset, rect.width + (offset * 2), rect.height + (offset * 2), 'svg-collaboration-peer', undefined, OverlayLayer.Foreground); peerRect.style.stroke = peer.color ?? '#1f7ae0'; peerRect.style.strokeWidth = peer.activeNodeIndex === nodeIndex ? '2.5px' : '1.5px'; peerRect.style.opacity = peer.activeNodeIndex === nodeIndex ? '1' : '0.75'; peerRect.style.fill = 'none'; const labelText = truncateText(peer.displayName ?? peer.peerId, 24); this._drawTextWithBackground(labelText, rect.x - offset, rect.y - 8 - (index * 14), peer.color ?? '#1f7ae0', 'svg-collaboration-label', undefined, OverlayLayer.Foreground); }); if (comments.length) { const unresolvedComments = comments.filter(x => !x.resolved); const badgeColor = unresolvedComments.length ? '#f57c00' : '#9e9e9e'; const commentRect = this._drawRect(rect.x + 2, rect.y + 2, Math.max(0, rect.width - 4), Math.max(0, rect.height - 4), 'svg-collaboration-comment', undefined, OverlayLayer.Foreground); commentRect.style.stroke = badgeColor; commentRect.style.fill = 'none'; const commentLabel = unresolvedComments.length ? `${unresolvedComments.length} comment${unresolvedComments.length === 1 ? '' : 's'}` : `${comments.length} resolved`; this._drawTextWithBackground(commentLabel, rect.x + rect.width - 12, rect.y + 14, badgeColor, 'svg-collaboration-comment-label', undefined, OverlayLayer.Foreground); const previewComment = comments[comments.length - 1]; this._drawTextWithBackground(truncateText(previewComment.text, 28), rect.x + 4, rect.y + rect.height + 16, badgeColor, 'svg-collaboration-comment-preview', undefined, OverlayLayer.Foreground); } } override dispose() { this._removeAllOverlays(); } } ================================================ FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationOverlayExtensionProvider.ts ================================================ import { css } from '@node-projects/base-custom-webcomponent'; import { IDesignerExtensionProvider, IExtensionManager, IDesignerCanvas, IDesignItem, IDesignerExtension } from '@node-projects/web-component-designer'; import { CollaborationOverlayExtension } from './CollaborationOverlayExtension.js'; export class CollaborationOverlayExtensionProvider implements IDesignerExtensionProvider { shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { return !designItem.isRootItem && !(designItem.element instanceof HTMLTemplateElement); } getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension { return new CollaborationOverlayExtension(extensionManager, designerView, designItem); } static readonly style = css` .svg-collaboration-peer { stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; pointer-events: none; } .svg-collaboration-comment { stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; pointer-events: none; } .svg-collaboration-label, .svg-collaboration-comment-label, .svg-collaboration-comment-preview { font-size: 11px; pointer-events: none; } `; } ================================================ FILE: packages/web-component-designer-collaboration-service/src/index.ts ================================================ export * from './setupCollaborationService.js'; export * from "./extensions/CollaborationCommentsContextMenu.js"; export * from "./extensions/CollaborationOverlayExtensionProvider.js"; export * from "./extensions/CollaborationOverlayExtension.js"; export * from "./extensions/CollaborationCursorOverlayExtensionProvider.js"; export * from "./extensions/CollaborationCursorOverlayExtension.js"; export * from "./services/DefaultCollaborationService.js"; export * from "./services/WebRtcTabCollaborationTransport.js"; ================================================ FILE: packages/web-component-designer-collaboration-service/src/services/DefaultCollaborationService.ts ================================================ import { TypedEvent } from '@node-projects/base-custom-webcomponent'; import { CollaborationConnectionState, DomConverter, getCollaborationNodeIndex, getCollaborationNodeIndexes, getDesignItemByCollaborationNodeIndex, ICollaborationComment, ICollaborationCommentsChangedEvent, ICollaborationDocumentSnapshot, ICollaborationPeerPresence, ICollaborationPeersChangedEvent, ICollaborationRemoteChange, ICollaborationSelectionEvent, ICollaborationService, ICollaborationSession, ICollaborationStateChangedEvent, ICollaborationTransport, IDesignerCanvas, ITransactionItem, IUndoChangeEvent, UndoChangeSource } from '@node-projects/web-component-designer'; function createPeerColor(peerId: string) { let hash = 0; for (let i = 0; i < peerId.length; i++) hash = ((hash << 5) - hash) + peerId.charCodeAt(i); const hue = Math.abs(hash) % 360; return `hsl(${hue}deg 74% 48%)`; } function createSyntheticTransactionItem(title?: string): ITransactionItem { return { title: title ?? 'remote change', affectedItems: [], do: () => { return null; }, undo: () => { return null; }, mergeWith: () => false }; } export class DefaultCollaborationService implements ICollaborationService { private _state: CollaborationConnectionState = 'disconnected'; private _session: ICollaborationSession | null = null; private _transport: ICollaborationTransport | null = null; private _peers = new Map(); private _comments = new Map(); private _applyingRemoteChanges = false; private _lastLocalCursorPosition: { x: number, y: number } | undefined; private _lastLocalCursorUpdate = 0; private _refreshExtensionsHandle: number | null = null; constructor(private _designerCanvas: IDesignerCanvas) { this._designerCanvas.instanceServiceContainer.undoService.onTransaction.on(change => { if (this._applyingRemoteChanges) return; this.onChange.emit(change); if (change.source !== 'remote') void this._transport?.sendChange({ kind: change.kind, title: change.item?.title }, this.createSnapshot()); }); this._designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(() => { if (!this._session || this._applyingRemoteChanges) return; const selectedElements = this._designerCanvas.instanceServiceContainer.selectionService.selectedElements; const selectedNodeIndexes = getCollaborationNodeIndexes(selectedElements); const primaryDesignItem = this._designerCanvas.instanceServiceContainer.selectionService.primarySelection; const primaryNodeIndex = getCollaborationNodeIndex(primaryDesignItem); const selectedDesignItemIds = selectedElements .map(x => x?.id) .filter(x => !!x); const primaryDesignItemId = primaryDesignItem?.id; this.storePeerPresence({ peerId: this._session.peerId, displayName: this._session.displayName, color: this._peers.get(this._session.peerId)?.color ?? createPeerColor(this._session.peerId), activeDesignItemId: primaryDesignItemId, activeNodeIndex: primaryNodeIndex, selectedDesignItemIds, selectedNodeIndexes, updatedAt: Date.now() }, 'local'); const event: ICollaborationSelectionEvent = { source: 'local', peerId: this._session.peerId, selectedNodeIndexes, primaryNodeIndex, selectedDesignItemIds, primaryDesignItemId }; this.onSelectionChanged.emit(event); void this._transport?.sendSelection(event); }); this._designerCanvas.clickOverlay.addEventListener('pointermove', this._handlePointerMove); this._designerCanvas.clickOverlay.addEventListener('pointerleave', this._handlePointerLeave); } get state(): CollaborationConnectionState { return this._state; } get session(): ICollaborationSession { return this._session!; } get peers(): readonly ICollaborationPeerPresence[] { return [...this._peers.values()]; } get comments(): readonly ICollaborationComment[] { return [...this._comments.values()]; } get transport(): ICollaborationTransport { return this._transport!; } get isApplyingRemoteChanges(): boolean { return this._applyingRemoteChanges; } attachTransport(transport: ICollaborationTransport): void { if (this._transport === transport) return; this.detachTransport(); this._transport = transport; void this._transport?.attach(this); if (this._session) void this._transport?.connect(this._session); } detachTransport(): void { if (this._transport) { void this._transport.disconnect(); void this._transport.detach(); } this._transport = null; } connect(sessionId: string, peerId: string, displayName?: string): void { const currentSelection = this.getCurrentSelectionState(); this._state = 'connected'; this._session = { sessionId, peerId, displayName: displayName ?? `peer-${peerId.substring(0, 4)}` }; this.onStateChanged.emit({ state: this._state, session: this._session }); this.updatePeerPresence({ peerId, displayName: this._session.displayName, color: createPeerColor(peerId), activeDesignItemId: currentSelection.primaryDesignItemId, activeNodeIndex: currentSelection.primaryNodeIndex, selectedDesignItemIds: currentSelection.selectedDesignItemIds, selectedNodeIndexes: currentSelection.selectedNodeIndexes, updatedAt: Date.now() }, 'local'); void this._transport?.connect(this._session); } disconnect(): void { const previousSession = this._session; if (previousSession?.peerId) this._peers.delete(previousSession.peerId); this._lastLocalCursorPosition = undefined; void this._transport?.disconnect(); this._session = null; this._state = 'disconnected'; this.onStateChanged.emit({ state: this._state, session: previousSession! }); this.onPeersChanged.emit({ source: 'local', peerId: previousSession?.peerId, peers: this.peers }); } createSnapshot(): ICollaborationDocumentSnapshot { const html = this._designerCanvas.rootDesignItem.childCount > 0 ? DomConverter.ConvertToString(Array.from(this._designerCanvas.rootDesignItem.children()), true, true) : ''; const stylesheets = this._designerCanvas.instanceServiceContainer.stylesheetService?.getStylesheets()?.map(x => ({ ...x })) ?? []; return { html, stylesheets, updatedAt: Date.now() }; } async applyRemoteSnapshot(snapshot: ICollaborationDocumentSnapshot): Promise { try { this._applyingRemoteChanges = true; const designItems = snapshot.html ? await this._designerCanvas.serviceContainer.htmlParserService.parse(snapshot.html, this._designerCanvas.serviceContainer, this._designerCanvas.instanceServiceContainer, false) : []; this._designerCanvas._internalSetDesignItems(designItems); if (this._designerCanvas.instanceServiceContainer.stylesheetService) await this._designerCanvas.instanceServiceContainer.stylesheetService.setStylesheets(snapshot.stylesheets ?? []); } finally { this._applyingRemoteChanges = false; } } async applyRemoteChange(change: ICollaborationRemoteChange, snapshot?: ICollaborationDocumentSnapshot): Promise { if (snapshot) await this.applyRemoteSnapshot(snapshot); this.onChange.emit({ item: createSyntheticTransactionItem(change.title), kind: change.kind, source: 'remote' }); } updateRemoteSelection(peerId: string, selectedNodeIndexes: number[], primaryNodeIndex?: number): void { const rootDesignItem = this._designerCanvas.instanceServiceContainer.rootDesignItem; const selectedDesignItemIds = selectedNodeIndexes .map(x => getDesignItemByCollaborationNodeIndex(rootDesignItem, x)?.id) .filter(x => !!x); const primaryDesignItemId = primaryNodeIndex != null ? getDesignItemByCollaborationNodeIndex(rootDesignItem, primaryNodeIndex)?.id : undefined; this.storePeerPresence({ peerId, activeDesignItemId: primaryDesignItemId, activeNodeIndex: primaryNodeIndex, selectedDesignItemIds, selectedNodeIndexes, updatedAt: Date.now() }, 'remote'); this.onSelectionChanged.emit({ source: 'remote', peerId, selectedNodeIndexes, primaryNodeIndex, selectedDesignItemIds, primaryDesignItemId }); } updatePeerPresence(peer: ICollaborationPeerPresence, source: UndoChangeSource = 'local'): void { const normalizedPeer = { ...peer, color: peer.color ?? createPeerColor(peer.peerId) }; this.storePeerPresence(normalizedPeer, source); if (source !== 'remote') void this._transport?.sendPresence(normalizedPeer); } removePeer(peerId: string, source: UndoChangeSource = 'local'): void { this._peers.delete(peerId); this.onPeersChanged.emit({ source, peerId, peers: this.peers }); if (source === 'remote') this.requestExtensionRefresh(); } upsertComment(comment: ICollaborationComment, source: UndoChangeSource = 'local'): void { const normalizedComment = { ...comment, updatedAt: comment.updatedAt ?? Date.now() }; this._comments.set(normalizedComment.id, normalizedComment); const event: ICollaborationCommentsChangedEvent = { source, comment: normalizedComment, comments: this.comments }; this.onCommentsChanged.emit(event); this.requestExtensionRefresh(); if (source !== 'remote') void this._transport?.sendComment(event); } removeComment(commentId: string, source: UndoChangeSource = 'local'): void { this._comments.delete(commentId); const event: ICollaborationCommentsChangedEvent = { source, commentId, comments: this.comments }; this.onCommentsChanged.emit(event); this.requestExtensionRefresh(); if (source !== 'remote') void this._transport?.sendComment(event); } readonly onStateChanged = new TypedEvent(); readonly onChange = new TypedEvent(); readonly onSelectionChanged = new TypedEvent(); readonly onPeersChanged = new TypedEvent(); readonly onCommentsChanged = new TypedEvent(); private storePeerPresence(peer: ICollaborationPeerPresence, source: UndoChangeSource) { const currentPeer = this._peers.get(peer.peerId); const nextPeer = { ...currentPeer, ...peer, color: peer.color ?? currentPeer?.color ?? createPeerColor(peer.peerId), updatedAt: peer.updatedAt ?? Date.now() }; this._peers.set(peer.peerId, nextPeer); this.onPeersChanged.emit({ source, peer: nextPeer, peers: this.peers }); if (source === 'remote') this.requestExtensionRefresh(); } private requestExtensionRefresh() { if (this._refreshExtensionsHandle != null) return; this._refreshExtensionsHandle = requestAnimationFrame(() => { this._refreshExtensionsHandle = null; this._designerCanvas.extensionManager?.refreshAllAppliedExtentions(); }); } private _handlePointerMove = (event: PointerEvent) => { if (!this._session || this._applyingRemoteChanges) return; const now = Date.now(); const cursorPosition = this._designerCanvas.getNormalizedEventCoordinates(event); const previousPosition = this._lastLocalCursorPosition; const hasMoved = !previousPosition || Math.abs(previousPosition.x - cursorPosition.x) >= 1 || Math.abs(previousPosition.y - cursorPosition.y) >= 1; if (!hasMoved && now - this._lastLocalCursorUpdate < 40) return; this._lastLocalCursorPosition = cursorPosition; this._lastLocalCursorUpdate = now; this.updatePeerPresence({ peerId: this._session.peerId, displayName: this._session.displayName, cursorPosition, updatedAt: now }, 'local'); }; private _handlePointerLeave = () => { if (!this._session) return; if (!this._lastLocalCursorPosition) return; this._lastLocalCursorPosition = undefined; this._lastLocalCursorUpdate = Date.now(); this.updatePeerPresence({ peerId: this._session.peerId, displayName: this._session.displayName, cursorPosition: undefined, updatedAt: this._lastLocalCursorUpdate }, 'local'); }; private getCurrentSelectionState() { const selectedElements = this._designerCanvas.instanceServiceContainer.selectionService.selectedElements ?? []; const primarySelection = this._designerCanvas.instanceServiceContainer.selectionService.primarySelection; return { selectedDesignItemIds: selectedElements.map(x => x?.id).filter(x => !!x), selectedNodeIndexes: getCollaborationNodeIndexes(selectedElements), primaryDesignItemId: primarySelection?.id, primaryNodeIndex: getCollaborationNodeIndex(primarySelection) }; } } ================================================ FILE: packages/web-component-designer-collaboration-service/src/services/WebRtcTabCollaborationTransport.ts ================================================ import { ICollaborationDocumentSnapshot, ICollaborationRemoteChange, ICollaborationComment, ICollaborationTransport, ICollaborationService, ICollaborationSession } from "@node-projects/web-component-designer"; export type WebRtcTabCollaborationSignalingChannelKind = 'broadcast-channel' | 'manual'; export interface WebRtcTabCollaborationTransportOptions { enabledSignalingChannels?: readonly WebRtcTabCollaborationSignalingChannelKind[]; rtcConfiguration?: RTCConfiguration; } export interface IWebRtcManualSignalingBundle { version: 1; sessionId: string; fromPeerId: string; connectionId: string; createdAt: number; messages: SignalingMessage[]; } export interface IWebRtcManualSignalingImportResult { importedCount: number; ignoredCount: number; } type SignalingMessage = { id: string; createdAt: number; connectionId: string; sessionId: string; fromPeerId: string; toPeerId?: string; type: 'hello' | 'hello-ack' | 'offer' | 'answer' | 'ice' | 'bye'; requestInitialSnapshot?: boolean; description?: RTCSessionDescriptionInit; candidate?: RTCIceCandidateInit; }; type DataMessage = | { type: 'snapshot'; snapshot: ICollaborationDocumentSnapshot; } | { type: 'change'; change: ICollaborationRemoteChange; snapshot: ICollaborationDocumentSnapshot; } | { type: 'selection'; selection: { peerId: string; selectedNodeIndexes: number[]; primaryNodeIndex?: number; }; } | { type: 'presence'; peer: { peerId: string; displayName?: string; color?: string; activeNodeIndex?: number; selectedNodeIndexes?: number[]; updatedAt: number; }; } | { type: 'comment-upsert'; comment: ICollaborationComment; } | { type: 'comment-remove'; commentId: string; }; export const defaultWebRtcTabCollaborationSignalingChannels: readonly WebRtcTabCollaborationSignalingChannelKind[] = ['broadcast-channel', 'manual']; function createRandomId() { return globalThis.crypto?.randomUUID?.() ?? `wcd-collab-${Date.now()}-${Math.floor(Math.random() * 100000)}`; } function createEnabledSignalingChannels(channels?: readonly WebRtcTabCollaborationSignalingChannelKind[]) { if (channels == null) return new Set(defaultWebRtcTabCollaborationSignalingChannels); const validChannels = channels.filter((channel): channel is WebRtcTabCollaborationSignalingChannelKind => channel === 'broadcast-channel' || channel === 'manual'); return new Set(validChannels); } function cloneRtcConfiguration(configuration?: RTCConfiguration) { if (!configuration) return undefined; return { ...configuration, iceServers: configuration.iceServers?.map(server => ({ ...server, urls: Array.isArray(server.urls) ? [...server.urls] : server.urls, })), } satisfies RTCConfiguration; } function areSetsEqual(first: Set, second: Set) { if (first.size !== second.size) return false; for (const entry of first) { if (!second.has(entry)) return false; } return true; } function cloneSignalingMessage(message: SignalingMessage): SignalingMessage { return { ...message, description: message.description ? { ...message.description } : undefined, candidate: message.candidate ? { ...message.candidate } : undefined }; } function escapeControlCharacter(character: string) { switch (character) { case '\b': return '\\b'; case '\f': return '\\f'; case '\n': return '\\n'; case '\r': return '\\r'; case '\t': return '\\t'; default: return `\\u${character.charCodeAt(0).toString(16).padStart(4, '0')}`; } } function normalizeJsonControlCharactersInStrings(data: string) { let normalized = ''; let inString = false; let isEscaped = false; for (const character of data) { if (inString) { if (isEscaped) { normalized += character; isEscaped = false; continue; } if (character === '\\') { normalized += character; isEscaped = true; continue; } if (character === '"') { normalized += character; inString = false; continue; } if (character < ' ') { normalized += escapeControlCharacter(character); continue; } normalized += character; continue; } normalized += character; if (character === '"') inString = true; } return normalized; } function parseManualSignalingBundleData(data: string) { try { return JSON.parse(data) as IWebRtcManualSignalingBundle; } catch (error) { const normalizedData = normalizeJsonControlCharactersInStrings(data); if (normalizedData === data) throw error; return JSON.parse(normalizedData) as IWebRtcManualSignalingBundle; } } export class WebRtcTabCollaborationTransport implements ICollaborationTransport { private _service: ICollaborationService | null = null; private _session: ICollaborationSession | null = null; private _broadcastSignalingChannel: BroadcastChannel | null = null; private _enabledSignalingChannels = createEnabledSignalingChannels(); private _rtcConfiguration: RTCConfiguration | undefined; private _manualSignalingMessages: SignalingMessage[] = []; private _peerConnections = new Map(); private _dataChannels = new Map(); private _initiatedPeers = new Set(); private _peersNeedingInitialSnapshot = new Set(); private _pendingCandidates = new Map(); private _processedSignalIds = new Set(); private _remoteConnectionIds = new Map(); private _localConnectionId: string | null = null; constructor(options?: WebRtcTabCollaborationTransportOptions) { this._enabledSignalingChannels = createEnabledSignalingChannels(options?.enabledSignalingChannels); this._rtcConfiguration = cloneRtcConfiguration(options?.rtcConfiguration); } get enabledSignalingChannels(): readonly WebRtcTabCollaborationSignalingChannelKind[] { return [...this._enabledSignalingChannels]; } get rtcConfiguration(): RTCConfiguration | undefined { return cloneRtcConfiguration(this._rtcConfiguration); } setEnabledSignalingChannels(channels: readonly WebRtcTabCollaborationSignalingChannelKind[]) { const nextChannels = createEnabledSignalingChannels(channels); if (areSetsEqual(this._enabledSignalingChannels, nextChannels)) return; this._enabledSignalingChannels = nextChannels; this.ensureBroadcastChannelState(); if (this._session && this.hasAvailableSignalingChannel()) { this.sendSignal({ sessionId: this._session.sessionId, fromPeerId: this._session.peerId, type: 'hello', requestInitialSnapshot: this.shouldRequestInitialSnapshot() }); } } setRtcConfiguration(configuration?: RTCConfiguration) { this._rtcConfiguration = cloneRtcConfiguration(configuration); } getManualSignalingBundle(): IWebRtcManualSignalingBundle | null { if (!this._session || !this._localConnectionId) return null; return { version: 1, sessionId: this._session.sessionId, fromPeerId: this._session.peerId, connectionId: this._localConnectionId, createdAt: Date.now(), messages: this._manualSignalingMessages.map(cloneSignalingMessage) }; } exportManualSignalingData(space: number = 2): string { const bundle = this.getManualSignalingBundle(); return bundle ? JSON.stringify(bundle, null, space) : ''; } async importManualSignalingData(data: string | IWebRtcManualSignalingBundle): Promise { if (!this._session) throw new Error('Collaboration is not connected for this document.'); const bundle = typeof data === 'string' ? parseManualSignalingBundleData(data) : data; if (!bundle || !Array.isArray(bundle.messages)) throw new Error('Invalid collaboration signaling data.'); if (bundle.sessionId !== this._session.sessionId) throw new Error(`Signaling data is for session "${bundle.sessionId}", but the active session is "${this._session.sessionId}".`); let importedCount = 0; let ignoredCount = 0; for (const message of bundle.messages) { if (!this.isSignalingMessage(message)) { ignoredCount++; continue; } const handled = await this.handleSignalMessage(message); if (handled) importedCount++; else ignoredCount++; } return { importedCount, ignoredCount }; } async attach(service: ICollaborationService) { this._service = service; } async detach() { await this.disconnect(); this._service = null; } async connect(session: ICollaborationSession) { if (typeof RTCPeerConnection === 'undefined') { console.warn('WebRTC collaboration is not available in this browser.'); return; } await this.disconnect(); this._session = session; this._localConnectionId = createRandomId(); this.ensureBroadcastChannelState(); if (!this.hasAvailableSignalingChannel()) console.warn('WebRTC collaboration signaling is disabled. Enable manual or broadcast signaling to connect peers.'); this.sendSignal({ sessionId: session.sessionId, fromPeerId: session.peerId, type: 'hello', requestInitialSnapshot: this.shouldRequestInitialSnapshot() }); } async disconnect() { if (this._session) { this.sendSignal({ sessionId: this._session.sessionId, fromPeerId: this._session.peerId, type: 'bye' }, { includeManual: false }); } if (this._broadcastSignalingChannel) { this._broadcastSignalingChannel.close(); this._broadcastSignalingChannel = null; } for (const channel of this._dataChannels.values()) { try { channel.close(); } catch { } } this._dataChannels.clear(); for (const peerConnection of this._peerConnections.values()) { try { peerConnection.close(); } catch { } } this._peerConnections.clear(); this._pendingCandidates.clear(); this._initiatedPeers.clear(); this._peersNeedingInitialSnapshot.clear(); this._manualSignalingMessages = []; this._processedSignalIds.clear(); this._remoteConnectionIds.clear(); this._localConnectionId = null; this._session = null; } async sendChange(change: ICollaborationRemoteChange, snapshot: ICollaborationDocumentSnapshot) { this.sendData({ type: 'change', change, snapshot }); } async sendSelection(selection: { peerId: string; selectedNodeIndexes: number[]; primaryNodeIndex?: number; }) { this.sendData({ type: 'selection', selection }); } async sendPresence(peer: { peerId: string; displayName?: string; color?: string; activeNodeIndex?: number; selectedNodeIndexes?: number[]; updatedAt: number; }) { this.sendData({ type: 'presence', peer }); } async sendComment(change: { comment?: ICollaborationComment; commentId?: string; }) { if (change.comment) this.sendData({ type: 'comment-upsert', comment: change.comment }); else if (change.commentId) this.sendData({ type: 'comment-remove', commentId: change.commentId }); } private ensureBroadcastChannelState() { if (!this._session || !this._enabledSignalingChannels.has('broadcast-channel') || typeof BroadcastChannel === 'undefined') { if (this._broadcastSignalingChannel) { this._broadcastSignalingChannel.close(); this._broadcastSignalingChannel = null; } return; } if (this._broadcastSignalingChannel) return; this._broadcastSignalingChannel = new BroadcastChannel(`wcd-collab:${this._session.sessionId}`); this._broadcastSignalingChannel.onmessage = event => { void this.handleSignalMessage(event.data as SignalingMessage); }; } private hasAvailableSignalingChannel() { return this._enabledSignalingChannels.has('manual') || (this._enabledSignalingChannels.has('broadcast-channel') && typeof BroadcastChannel !== 'undefined'); } private isSignalingMessage(message: Partial): message is SignalingMessage { if (!message) return false; return typeof message.id === 'string' && typeof message.connectionId === 'string' && typeof message.createdAt === 'number' && typeof message.sessionId === 'string' && typeof message.fromPeerId === 'string' && (message.requestInitialSnapshot == null || typeof message.requestInitialSnapshot === 'boolean') && (message.type === 'hello' || message.type === 'hello-ack' || message.type === 'offer' || message.type === 'answer' || message.type === 'ice' || message.type === 'bye'); } private rememberRemoteConnection(remotePeerId: string, connectionId: string) { const previousConnectionId = this._remoteConnectionIds.get(remotePeerId); if (previousConnectionId === connectionId) return; this.cleanupPeer(remotePeerId, false); this._remoteConnectionIds.set(remotePeerId, connectionId); } private shouldRequestInitialSnapshot() { const snapshot = this._service?.createSnapshot(); return !snapshot?.html?.trim(); } private updateInitialSnapshotRequest(remotePeerId: string, requestInitialSnapshot?: boolean) { if (requestInitialSnapshot) this._peersNeedingInitialSnapshot.add(remotePeerId); else this._peersNeedingInitialSnapshot.delete(remotePeerId); } private async handleSignalMessage(message: SignalingMessage) { if (!this._session || !message || message.sessionId !== this._session.sessionId || message.fromPeerId === this._session.peerId) return false; if (message.toPeerId && message.toPeerId !== this._session.peerId) return false; if (this._processedSignalIds.has(message.id)) return false; this._processedSignalIds.add(message.id); const knownRemoteConnectionId = this._remoteConnectionIds.get(message.fromPeerId); const isHandshakeMessage = message.type === 'hello' || message.type === 'hello-ack'; if (!isHandshakeMessage) { if (!knownRemoteConnectionId || knownRemoteConnectionId !== message.connectionId) return false; } switch (message.type) { case 'hello': this.rememberRemoteConnection(message.fromPeerId, message.connectionId); this.updateInitialSnapshotRequest(message.fromPeerId, message.requestInitialSnapshot); this.sendSignal({ sessionId: this._session.sessionId, fromPeerId: this._session.peerId, toPeerId: message.fromPeerId, type: 'hello-ack', requestInitialSnapshot: this.shouldRequestInitialSnapshot() }); if (this.shouldInitiate(message.fromPeerId)) await this.ensureOffer(message.fromPeerId); else this.getOrCreatePeerConnection(message.fromPeerId); return true; case 'hello-ack': this.rememberRemoteConnection(message.fromPeerId, message.connectionId); this.updateInitialSnapshotRequest(message.fromPeerId, message.requestInitialSnapshot); if (this.shouldInitiate(message.fromPeerId)) await this.ensureOffer(message.fromPeerId); return true; case 'offer': if (message.description) await this.acceptOffer(message.fromPeerId, message.description); return true; case 'answer': if (message.description) await this.acceptAnswer(message.fromPeerId, message.description); return true; case 'ice': if (message.candidate) await this.acceptIceCandidate(message.fromPeerId, message.candidate); return true; case 'bye': this.cleanupPeer(message.fromPeerId, false); this._remoteConnectionIds.delete(message.fromPeerId); this._service?.removePeer(message.fromPeerId, 'remote'); return true; } } private shouldInitiate(remotePeerId: string) { if (!this._session) return false; return this._session.peerId.localeCompare(remotePeerId) < 0; } private getOrCreatePeerConnection(remotePeerId: string) { let peerConnection = this._peerConnections.get(remotePeerId); if (peerConnection) return peerConnection; peerConnection = this._rtcConfiguration ? new RTCPeerConnection(this._rtcConfiguration) : new RTCPeerConnection(); peerConnection.onicecandidate = event => { if (event.candidate && this._session) { this.sendSignal({ sessionId: this._session.sessionId, fromPeerId: this._session.peerId, toPeerId: remotePeerId, type: 'ice', candidate: event.candidate.toJSON() }); } }; peerConnection.ondatachannel = event => { this.registerDataChannel(remotePeerId, event.channel); }; peerConnection.onconnectionstatechange = () => { if (peerConnection.connectionState === 'closed' || peerConnection.connectionState === 'failed' || peerConnection.connectionState === 'disconnected') { this.cleanupPeer(remotePeerId, false); this._service?.removePeer(remotePeerId, 'remote'); } }; this._peerConnections.set(remotePeerId, peerConnection); return peerConnection; } private async ensureOffer(remotePeerId: string) { if (this._initiatedPeers.has(remotePeerId)) return; const peerConnection = this.getOrCreatePeerConnection(remotePeerId); this._initiatedPeers.add(remotePeerId); if (!this._dataChannels.has(remotePeerId)) { const channel = peerConnection.createDataChannel('web-component-designer-collaboration'); this.registerDataChannel(remotePeerId, channel); } const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); if (!this._session) return; this.sendSignal({ sessionId: this._session.sessionId, fromPeerId: this._session.peerId, toPeerId: remotePeerId, type: 'offer', description: peerConnection.localDescription?.toJSON() ?? offer }); } private async acceptOffer(remotePeerId: string, description: RTCSessionDescriptionInit) { const peerConnection = this.getOrCreatePeerConnection(remotePeerId); await peerConnection.setRemoteDescription(description); await this.flushPendingCandidates(remotePeerId); const answer = await peerConnection.createAnswer(); await peerConnection.setLocalDescription(answer); if (!this._session) return; this.sendSignal({ sessionId: this._session.sessionId, fromPeerId: this._session.peerId, toPeerId: remotePeerId, type: 'answer', description: peerConnection.localDescription?.toJSON() ?? answer }); } private async acceptAnswer(remotePeerId: string, description: RTCSessionDescriptionInit) { const peerConnection = this.getOrCreatePeerConnection(remotePeerId); await peerConnection.setRemoteDescription(description); await this.flushPendingCandidates(remotePeerId); } private async acceptIceCandidate(remotePeerId: string, candidate: RTCIceCandidateInit) { const peerConnection = this.getOrCreatePeerConnection(remotePeerId); if (!peerConnection.remoteDescription) { const pending = this._pendingCandidates.get(remotePeerId) ?? []; pending.push(candidate); this._pendingCandidates.set(remotePeerId, pending); return; } await peerConnection.addIceCandidate(candidate); } private async flushPendingCandidates(remotePeerId: string) { const peerConnection = this._peerConnections.get(remotePeerId); const candidates = this._pendingCandidates.get(remotePeerId); if (!peerConnection || !candidates?.length) return; for (const candidate of candidates) await peerConnection.addIceCandidate(candidate); this._pendingCandidates.delete(remotePeerId); } private registerDataChannel(remotePeerId: string, channel: RTCDataChannel) { const previousChannel = this._dataChannels.get(remotePeerId); if (previousChannel && previousChannel !== channel) { try { previousChannel.close(); } catch { } } channel.onopen = () => { void this.handleOpenChannel(remotePeerId); }; channel.onmessage = event => { void this.handleDataMessage(remotePeerId, event.data); }; channel.onclose = () => { if (this._dataChannels.get(remotePeerId) === channel) this._dataChannels.delete(remotePeerId); }; this._dataChannels.set(remotePeerId, channel); } private async handleOpenChannel(remotePeerId: string) { if (!this._session || !this._service) return; const session = this._session; const service = this._service; this._manualSignalingMessages = this._manualSignalingMessages.filter(x => x.toPeerId !== remotePeerId); const localPeer = service.peers.find(x => x.peerId === session.peerId); if (localPeer) await this.sendPresence(localPeer); const currentSelection = localPeer?.selectedNodeIndexes?.length || localPeer?.activeNodeIndex != null ? { peerId: session.peerId, selectedNodeIndexes: [...(localPeer.selectedNodeIndexes ?? [])], primaryNodeIndex: localPeer.activeNodeIndex } : null; if (currentSelection) await this.sendSelection(currentSelection); if (this._peersNeedingInitialSnapshot.has(remotePeerId)) { this._peersNeedingInitialSnapshot.delete(remotePeerId); this.sendData({ type: 'snapshot', snapshot: service.createSnapshot() }, remotePeerId); for (const comment of service.comments) this.sendData({ type: 'comment-upsert', comment }, remotePeerId); } } private async handleDataMessage(remotePeerId: string, rawData: string) { if (!this._service) return; const message = JSON.parse(rawData) as DataMessage; switch (message.type) { case 'snapshot': await this._service.applyRemoteSnapshot(message.snapshot); break; case 'change': await this._service.applyRemoteChange(message.change, message.snapshot); break; case 'selection': this._service.updateRemoteSelection(remotePeerId, message.selection.selectedNodeIndexes ?? [], message.selection.primaryNodeIndex); break; case 'presence': this._service.updatePeerPresence({ ...message.peer, peerId: remotePeerId }, 'remote'); break; case 'comment-upsert': this._service.upsertComment(message.comment, 'remote'); break; case 'comment-remove': this._service.removeComment(message.commentId, 'remote'); break; } } private sendSignal( message: Omit, options?: { includeBroadcast?: boolean; includeManual?: boolean; } ) { if (!this._localConnectionId) return; const signal: SignalingMessage = { ...message, id: createRandomId(), createdAt: Date.now(), connectionId: this._localConnectionId }; this._processedSignalIds.add(signal.id); const includeBroadcast = options?.includeBroadcast ?? this._enabledSignalingChannels.has('broadcast-channel'); if (includeBroadcast) this._broadcastSignalingChannel?.postMessage(signal); const includeManual = options?.includeManual ?? this._enabledSignalingChannels.has('manual'); if (includeManual && signal.type !== 'bye') this.enqueueManualSignal(signal); } private enqueueManualSignal(signal: SignalingMessage) { if (signal.type === 'hello') this._manualSignalingMessages = this._manualSignalingMessages.filter(x => x.type !== 'hello'); else if (signal.type === 'hello-ack' || signal.type === 'offer' || signal.type === 'answer') this._manualSignalingMessages = this._manualSignalingMessages.filter(x => !(x.type === signal.type && x.toPeerId === signal.toPeerId)); this._manualSignalingMessages.push(cloneSignalingMessage(signal)); } private sendData(message: DataMessage, remotePeerId?: string) { const payload = JSON.stringify(message); for (const [peerId, channel] of this._dataChannels) { if (remotePeerId && peerId !== remotePeerId) continue; if (channel.readyState === 'open') channel.send(payload); } } private cleanupPeer(remotePeerId: string, clearInitialSnapshotState: boolean = true) { const dataChannel = this._dataChannels.get(remotePeerId); if (dataChannel) { try { dataChannel.close(); } catch { } this._dataChannels.delete(remotePeerId); } const peerConnection = this._peerConnections.get(remotePeerId); if (peerConnection) { try { peerConnection.close(); } catch { } this._peerConnections.delete(remotePeerId); } this._initiatedPeers.delete(remotePeerId); if (clearInitialSnapshotState) this._peersNeedingInitialSnapshot.delete(remotePeerId); this._pendingCandidates.delete(remotePeerId); } } ================================================ FILE: packages/web-component-designer-collaboration-service/src/setupCollaborationService.ts ================================================ import { ExtensionType, IDesignerCanvas, SeperatorContextMenu, ServiceContainer } from "@node-projects/web-component-designer"; import { CollaborationCommentsContextMenu } from "./extensions/CollaborationCommentsContextMenu.js"; import { CollaborationOverlayExtensionProvider } from "./extensions/CollaborationOverlayExtensionProvider.js"; import { CollaborationCursorOverlayExtensionProvider } from "./extensions/CollaborationCursorOverlayExtensionProvider.js"; import { DefaultCollaborationService } from "./services/DefaultCollaborationService.js"; export function setupCollaborationService(serviceContainer: ServiceContainer) { serviceContainer.register("collaborationService", (designerCanvas: IDesignerCanvas) => new DefaultCollaborationService(designerCanvas)); serviceContainer.designerExtensions.set(ExtensionType.Permanent, [ ...serviceContainer.designerExtensions.get(ExtensionType.Permanent) ?? [], new CollaborationOverlayExtensionProvider(), new CollaborationCursorOverlayExtensionProvider(), ]); serviceContainer.designerContextMenuExtensions = [ ...serviceContainer.designerContextMenuExtensions, new SeperatorContextMenu(), new CollaborationCommentsContextMenu(), ]; } ================================================ FILE: packages/web-component-designer-collaboration-service/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false, "moduleResolution": "bundler" }, "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-htmlparserservice-base-custom-webcomponent/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-htmlparserservice-base-custom-webcomponent/README.md ================================================ # web-component-designer-htmlparserservice-base-custom-webcomponent ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent npm i @node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent ## Description This is a HTML Parser Service for Templates inside of BaseCustomWebcomponent, it needs a HTML Parser Service as Parameter. ## Usage import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser'; import { BaseCustomWebcomponentParserService } from '@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent'; serviceContainer.register("htmlParserService", new BaseCustomWebcomponentParserService(new NodeHtmlParserService())); ================================================ FILE: packages/web-component-designer-htmlparserservice-base-custom-webcomponent/package.json ================================================ { "description": "web-component-designer addon: Parser Service for Templates inside of BaseCustomWebcomponent", "name": "@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent", "version": "0.1.5", "type": "module", "main": "./dist/service/htmlParserService/BaseCustomWebcomponentParserService.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "@node-projects/web-component-designer": ">=0.1.224", "typescript": ">=5.6.3" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-htmlparserservice-base-custom-webcomponent/src/service/htmlParserService/BaseCustomWebcomponentParserService.ts ================================================ import { IHtmlParserService, ServiceContainer, InstanceServiceContainer, IDesignItem } from '@node-projects/web-component-designer'; import type { SourceFile } from 'typescript' function* findAllNodesOfKind(node: ts.Node, kind: ts.SyntaxKind) { if (node.kind == kind) yield node; for (const c of node.getChildren()) yield* findAllNodesOfKind(c, kind); } export class BaseCustomWebcomponentParserService implements IHtmlParserService { private htmlParser: IHtmlParserService; constructor(htmlParser: IHtmlParserService) { this.htmlParser = htmlParser; } async parse(code: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { const sourceFile = this.parseTypescriptFile(code); let htmlCode = ""; let cssStyle = ""; let positionOffset = 0; //let cssOffset = 0; const nodes = findAllNodesOfKind(sourceFile, ts.SyntaxKind.TaggedTemplateExpression); for (let nd of nodes) { if (nd.tag.escapedText == 'html' && nd.parent.name.escapedText == "template") { positionOffset = nd.pos; htmlCode = nd.template.rawText; } if (nd.tag.escapedText == 'css' && nd.parent.name.escapedText == "style") { //cssOffset = nd.pos; cssStyle = nd.template.rawText; } } if (cssStyle) instanceServiceContainer.stylesheetService.setStylesheets([{ name: 'css', content: cssStyle }]); return this.htmlParser.parse(htmlCode, serviceContainer, instanceServiceContainer, parseSnippet, positionOffset); } public writeBack(code: string, html: string, css: string, newLineCrLf: boolean): string { const sourceFile = this.parseTypescriptFile(code); const transformTemplateLiterals = (context: ts.TransformationContext) => (rootNode: T) => { function visit(node: ts.Node): ts.Node { if (ts.isTemplateLiteral(node) && ts.isTaggedTemplateExpression(node.parent) && (node.parent.tag).escapedText == 'html' && (node.parent.parent).name.escapedText == "template") { return ts.factory.createNoSubstitutionTemplateLiteral(html.replaceAll('\n', '\r\n'), html.replaceAll('\n', '\r\n')); } else if (css && ts.isTemplateLiteral(node) && ts.isTaggedTemplateExpression(node.parent) && (node.parent.tag).escapedText == 'css' && (node.parent.parent).name.escapedText == "style") { return ts.factory.createNoSubstitutionTemplateLiteral(css.replaceAll('\n', '\r\n'), css.replaceAll('\n', '\r\n')); } return ts.visitEachChild(node, visit, context); } return ts.visitNode(rootNode, visit); }; let transformed = ts.transform(sourceFile, [transformTemplateLiterals]).transformed[0]; const printer = ts.createPrinter({ newLine: newLineCrLf ? ts.NewLineKind.CarriageReturnLineFeed : ts.NewLineKind.LineFeed }); const result = printer.printNode(ts.EmitHint.Unspecified, transformed, transformed); return result; } private parseTypescriptFile(code: string) { const compilerHost: ts.CompilerHost = { fileExists: () => true, getCanonicalFileName: filename => filename, getCurrentDirectory: () => '', getDefaultLibFileName: () => 'lib.d.ts', getNewLine: () => '\n', getSourceFile: filename => { return ts.createSourceFile(filename, code, ts.ScriptTarget.Latest, true); }, readFile: () => null, useCaseSensitiveFileNames: () => true, writeFile: () => null, }; const filename = 'aa.ts'; const program = ts.createProgram([filename], { noResolve: true, target: ts.ScriptTarget.Latest, }, compilerHost); const sourceFile = program.getSourceFile(filename); return sourceFile; } } ================================================ FILE: packages/web-component-designer-htmlparserservice-base-custom-webcomponent/src/service/htmlParserService/Typescript.d.ts ================================================ //import typescript = require("typescript"); //export = typescript; //export as namespace ts; import ts = require('typescript'); declare global { namespace globalThis { export { ts } } } ================================================ FILE: packages/web-component-designer-htmlparserservice-base-custom-webcomponent/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-htmlparserservice-lit-element/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-htmlparserservice-lit-element/README.md ================================================ # web-component-designer-htmlparserservice-lit-element ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-lit-element npm i @node-projects/web-component-designer-htmlparserservice-lit-element ## Description This is a HTML Parser Service for Templates inside of LitElement, it needs a HTML Parser Service as Parameter. And it only can parse very simple Templates at the moment. It also needed to be switched to use Typescript instead of esprima. ## Usage import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser'; import { LitElementParserService } from '@node-projects/web-component-designer-htmlparserservice-lit-element'; serviceContainer.register("htmlParserService", new LitElementParserService(new NodeHtmlParserService())); ================================================ FILE: packages/web-component-designer-htmlparserservice-lit-element/package.json ================================================ { "description": "web-component-designer addon: Parser Service for Templates inside of BaseCustomWebcomponent", "name": "@node-projects/web-component-designer-htmlparserservice-lit-element", "version": "0.1.4", "type": "module", "main": "./dist/service/htmlParserService/LitElementParserService.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "esprima-next": "^6.0.3", "@node-projects/web-component-designer": ">=0.1.224" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-htmlparserservice-lit-element/src/service/htmlParserService/LitElementParserService.ts ================================================ import { CssAttributeParser, DesignItem, IDesignItem, IHtmlParserService, InstanceServiceContainer, ServiceContainer, newElementFromString } from "@node-projects/web-component-designer"; import { BlockStatement, ClassDeclaration, FunctionExpression, Identifier, MethodDefinition, ReturnStatement, TaggedTemplateExpression } from "esprima-next"; import * as esprima from "esprima-next"; export class LitElementParserService implements IHtmlParserService { //TODO: switch to typescript private htmlParser: IHtmlParserService; constructor(htmlParser: IHtmlParserService) { this.htmlParser = htmlParser; } async parse(module: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { const parsedModule = esprima.parseModule(module); const classDecl: ClassDeclaration = parsedModule.body.find(x => x.type == esprima.Syntax.ClassDeclaration); const renderMethod: MethodDefinition = classDecl.body.body.find(x => x.type == esprima.Syntax.MethodDefinition && (x.key).name == 'render'); const renderMethodStatement = ((renderMethod.value).body).body[0]; const taggedTemplate = renderMethodStatement.argument; const templateLiteral = taggedTemplate.quasi const html = templateLiteral.quasis.map(x => x.value.raw).join(); return this.htmlParser.parse(html, serviceContainer, instanceServiceContainer, parseSnippet); } private _parseDiv = document.createElement("div"); _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem { let designItem: IDesignItem = null; if (item.nodeType == 1) { let element: Element; let manualCreatedElement = false; if (!namespace) element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '>', instanceServiceContainer.designerCanvas.rootDesignItem.document); // some custom elements only parse attributes during constructor call if (!element) { if (namespace) element = document.createElementNS(namespace, item.rawTagName); else element = document.createElement(item.rawTagName); manualCreatedElement = true; } designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer); let style = ''; let attr = item.attributes; for (let a in attr) { if (a !== 'style') { designItem._withoutUndoSetAttribute(a, attr[a]) if (manualCreatedElement) { element.setAttribute(a, attr[a]); } } else { style = attr[a]; } } if ((element instanceof HTMLElement || element instanceof SVGElement) && style) { let styleParser = new CssAttributeParser(); styleParser.parse(style); for (let s of styleParser.entries) { designItem._withoutUndoSetStyle(s.name, s.value, s.important); if (manualCreatedElement) { element.style.setProperty(s.name, s.value, s.important ? 'important' : ''); } } } (element).draggable = false; //even if it should be true, for better designer exp. for (let c of item.childNodes) { let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null); designItem._insertChildInternal(di); } } else if (item.nodeType == 3) { this._parseDiv.innerHTML = item.rawText; let element = this._parseDiv.childNodes[0]; designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer); } else if (item.nodeType == 8) { let element = document.createComment(item.rawText); designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer); } return designItem; } } ================================================ FILE: packages/web-component-designer-htmlparserservice-lit-element/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-htmlparserservice-nodehtmlparser/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-htmlparserservice-nodehtmlparser/README.md ================================================ # web-component-designer-htmlparserservice-nodehtmlparser ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-htmlparserservice-nodehtmlparser npm i @node-projects/web-component-designer-htmlparserservice-nodehtmlparser ## Description 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. ## Usage import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser'; serviceContainer.register("htmlParserService", new NodeHtmlParserService()); ================================================ FILE: packages/web-component-designer-htmlparserservice-nodehtmlparser/package.json ================================================ { "description": "web-component-designer addon: Parser Service using the Node HTML Parser", "name": "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser", "version": "0.1.14", "type": "module", "main": "./dist/service/htmlParserService/NodeHtmlParserService.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "@node-projects/node-html-parser-esm": "^6.2.0", "@node-projects/web-component-designer": ">=0.1.278" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-htmlparserservice-nodehtmlparser/src/service/htmlParserService/NodeHtmlParserService.ts ================================================ import { IHtmlParserService, ServiceContainer, InstanceServiceContainer, IDesignItem, newElementFromString, DesignItem, CssAttributeParser } from "@node-projects/web-component-designer"; import * as parser from "@node-projects/node-html-parser-esm"; // Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, // and some Elements remove attributes from their DOM, so you loose Data export class NodeHtmlParserService implements IHtmlParserService { _designItemCreatedCallback?: (IDesignItem) => void; constructor(designItemCreatedCallback?: (IDesignItem) => void) { this._designItemCreatedCallback = designItemCreatedCallback; } async parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean, positionOffset = 0): Promise { if (!parseSnippet) instanceServiceContainer.designItemDocumentPositionService?.clearSourceParts(); const parsed = parser.parse(html, { comment: true }); let designItems: IDesignItem[] = []; for (let p of parsed.childNodes) { let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null, parseSnippet, positionOffset); if (di != null) designItems.push(di) else console.warn("NodeHtmlParserService - could not parse element", p) } return designItems; } _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string, snippet: boolean, positionOffset = 0): IDesignItem { let designItem: IDesignItem = null; if (item.nodeType == 1) { let element: Element; let manualCreatedElement = false; if (!namespace) element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '>', instanceServiceContainer.designerCanvas.rootDesignItem.document); // some custom elements only parse attributes during constructor call if (!element) { if (namespace) element = instanceServiceContainer.designerCanvas.rootDesignItem.document.createElementNS(namespace, item.rawTagName); else element = instanceServiceContainer.designerCanvas.rootDesignItem.document.createElement(item.rawTagName); manualCreatedElement = true; } element = DesignItem.updateRenderedNode(serviceContainer, element); designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer); if (this._designItemCreatedCallback) this._designItemCreatedCallback(designItem); if (!snippet && instanceServiceContainer.designItemDocumentPositionService) instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0] + positionOffset, length: item.range[1] - item.range[0] }); this._addAttributeSourceParts(item, designItem, serviceContainer, snippet, positionOffset); let style = ''; let attr = item.attributes; for (let a in attr) { if (a !== 'style') { designItem._withoutUndoSetAttribute(a, attr[a]) if (manualCreatedElement) { element.setAttribute(a, attr[a]); } } else { style = attr[a]; } } if ((element instanceof HTMLElement || element instanceof SVGElement) && style) { let styleParser = new CssAttributeParser(); styleParser.parse(style); for (let s of styleParser.entries) { designItem._withoutUndoSetStyle(s.name, s.value, s.important); if (manualCreatedElement) { element.style.setProperty(s.name, s.value, s.important ? 'important' : ''); } } } if (!designItem.lockAtDesignTime && (element).style) (element).style.pointerEvents = 'auto'; (element).draggable = false; //even if it should be true, for better designer exp. for (let c of item.childNodes) { let ns = namespace; if (element instanceof SVGSVGElement) ns = 'http://www.w3.org/2000/svg'; else if (element instanceof SVGForeignObjectElement) ns = null; else if (element instanceof MathMLElement) ns = 'http://www.w3.org/1998/Math/MathML'; let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, ns, snippet, positionOffset); designItem._insertChildInternal(di); if (di.node instanceof HTMLTemplateElement && di.getAttribute('shadowrootmode') == 'open') { try { const shadow = (designItem.node).attachShadow({ mode: 'open' }); const content = di.node.content.cloneNode(true); shadow.appendChild(content); } catch (err) { console.error("error attaching shadowdom", err) } } } } else if (item.nodeType == 3) { const parseDiv = instanceServiceContainer.designerCanvas.rootDesignItem.document.createElement("div"); parseDiv.innerHTML = item.rawText; let element = DesignItem.updateRenderedNode(serviceContainer, parseDiv.childNodes[0]); designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer); if (!snippet && instanceServiceContainer.designItemDocumentPositionService) instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0] + positionOffset, length: item.range[1] - item.range[0] }); } else if (item.nodeType == 8) { let element = DesignItem.updateRenderedNode(serviceContainer, document.createComment(item.rawText)); designItem = DesignItem.GetOrCreateDesignItem(element, item, serviceContainer, instanceServiceContainer); if (!snippet && instanceServiceContainer.designItemDocumentPositionService) instanceServiceContainer.designItemDocumentPositionService.setPosition(designItem, { start: item.range[0] + positionOffset, length: item.range[1] - item.range[0] }); } if (designItem) { const renderedNode = DesignItem.updateRenderedNode(serviceContainer, designItem.node); if (renderedNode !== designItem.node) designItem.replaceNode(renderedNode); designItem.refreshRenderedDesignItem(); } if (serviceContainer.designItemService.finishedDesignItem) serviceContainer.designItemService.finishedDesignItem(designItem); return designItem; } private _addAttributeSourceParts(item: any, designItem: IDesignItem, serviceContainer: ServiceContainer, snippet: boolean, positionOffset: number) { const positionService = designItem.instanceServiceContainer.designItemDocumentPositionService; if (snippet || !positionService || !item.rawAttrs) return; const rawAttrs = item.rawAttrs as string; const openingTag = this._getOpeningTagText(item.outerHTML ?? ''); const rawAttrsIndex = openingTag.indexOf(rawAttrs); if (rawAttrsIndex < 0) return; const rawAttrsStart = item.range[0] + positionOffset + rawAttrsIndex; const attributeRegex = /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g; let match: RegExpExecArray; while (match = attributeRegex.exec(rawAttrs)) { const attributeName = match[1]; const attributeStart = rawAttrsStart + match.index; positionService.addSourcePart({ designItem, kind: 'attribute', key: `attribute:${attributeName}`, name: attributeName, textRange: { start: attributeStart, length: match[0].length } }); const valueRange = this._getAttributeValueRange(match[0]); if (valueRange) { const textRange = { start: attributeStart + valueRange.start, length: valueRange.length }; positionService.addSourcePart({ designItem, kind: 'attribute-value', key: `attribute:${attributeName}/value`, name: attributeName, textRange }); const context = { designItem, sourceKind: 'attribute' as const, name: attributeName, value: valueRange.value, valueTextRange: textRange }; for (const provider of serviceContainer.sourceMapProviders) { if (provider.canMap(context)) positionService.addSourceParts(provider.map(context)); } } } } private _getOpeningTagText(outerHtml: string) { let quote: '"' | '\'' = null; for (let i = 0; i < outerHtml.length; i++) { const char = outerHtml[i]; if (quote) { if (char === quote) quote = null; } else if (char === '"' || char === '\'') { quote = char; } else if (char === '>') { return outerHtml.substring(0, i + 1); } } return outerHtml; } private _getAttributeValueRange(attributeText: string): { start: number, length: number, value: string } { const equalsIndex = attributeText.indexOf('='); if (equalsIndex < 0) return null; let valueStart = equalsIndex + 1; while (valueStart < attributeText.length && /\s/.test(attributeText[valueStart])) valueStart++; const quote = attributeText[valueStart]; if (quote === '"' || quote === '\'') { const contentStart = valueStart + 1; const contentEnd = attributeText.lastIndexOf(quote); const length = Math.max(0, contentEnd - contentStart); return { start: contentStart, length, value: attributeText.substring(contentStart, contentStart + length) }; } return { start: valueStart, length: attributeText.length - valueStart, value: attributeText.substring(valueStart) }; } } ================================================ FILE: packages/web-component-designer-htmlparserservice-nodehtmlparser/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-mermaid/README.md ================================================ # web-component-designer-mermaid This package contains widgets and services which help to create a Mermaid designer. ## Installation ```bash npm i @node-projects/web-component-designer-mermaid ``` ================================================ FILE: packages/web-component-designer-mermaid/package.json ================================================ { "description": "web-component-designer addon: Widgets and Services for creating a Mermaid Designer", "name": "@node-projects/web-component-designer-mermaid", "version": "0.1.1", "type": "module", "main": "./dist/index.js", "types": "./dist/index.d.ts", "files": [ "dist", "README.md" ], "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/web-component-designer": ">=0.2.0", "mermaid": "^11.12.0" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-mermaid/src/index.ts ================================================ export * from "./widgets/mermaid-node.js"; export * from "./widgets/mermaid-edge.js"; export * from "./widgets/mermaid-sequence-message.js"; export * from "./widgets/mermaid-sequence-participant.js"; export * from "./widgets/mermaid-mindmap-node.js"; export * from "./widgets/mermaid-requirement-node.js"; export * from "./widgets/mermaid-requirement-relationship.js"; export * from "./widgets/mermaid-subgraph.js"; export * from "./widgets/mermaid-flowchart-directive.js"; export * from "./monaco/MermaidLanguage.js"; export * from "./services/MermaidLayoutCopyPasteService.js"; export * from "./services/MermaidLayoutPlacementService.js"; export * from "./services/MermaidParserService.js"; export * from "./services/MermaidConnectionRouting.js"; export * from "./services/MermaidElementsService.js"; export * from "./toolbar/ConnectMermaidNodesTool.js"; export * from "./setupMermaidServiceContainer.js"; ================================================ FILE: packages/web-component-designer-mermaid/src/monaco/MermaidLanguage.ts ================================================ export function addMermaidLanguageToMonaco(monaco?: any) { if (!monaco) //@ts-ignore monaco = window.monaco; monaco.languages.register({ id: "mermaidLanguage" }); monaco.languages.setMonarchTokensProvider("mermaidLanguage", { tokenizer: { root: [ [/%%.*$/, "comment"], [/\b(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram-v2|erDiagram|journey|gantt|pie|mindmap|requirementDiagram|requirement|functionalRequirement|interfaceRequirement|performanceRequirement|physicalRequirement|designConstraint|element)\b/, "keyword"], [/[a-zA-Z][\w-]*(?=\s*(\[|\(|--|==|-\.))/, "identifier"], [/(-->|---|-.->|-.-|==>|===)/, "operator"], [/\|[^|]*\|/, "string"], ], }, }); monaco.editor.defineTheme("mermaidTheme", { base: "vs", inherit: false, rules: [ { token: "comment", foreground: "008000" }, { token: "keyword", foreground: "0000FF", fontStyle: "bold" }, { token: "identifier", foreground: "795E26" }, { token: "operator", foreground: "AF00DB" }, { token: "string", foreground: "A31515" }, ], colors: { "editor.foreground": "#000000", }, }); } ================================================ FILE: packages/web-component-designer-mermaid/src/services/MermaidConnectionRouting.ts ================================================ import type { IDesignItem, InstanceServiceContainer } from "@node-projects/web-component-designer"; import { encodeWaypoints, FlowchartDirection, routeBetweenBounds } from "./mermaidGeometry.js"; function isEdgeItem(designItem: IDesignItem) { return designItem.element.localName === "mermaid-edge" || designItem.element.localName === "mermaid-requirement-relationship"; } function isNodeItem(designItem: IDesignItem) { return designItem.element.localName === "mermaid-node" || designItem.element.localName === "mermaid-requirement-node"; } function getNodeId(designItem: IDesignItem) { if (designItem.element.localName === "mermaid-requirement-node") return designItem.element.getAttribute("label"); return designItem.element.getAttribute("node-id"); } function collectCanvasDesignItems(rootDesignItem: IDesignItem) { const allItems: IDesignItem[] = []; const stack = Array.from(rootDesignItem.children()); while (stack.length) { const item = stack.pop()!; allItems.push(item); stack.push(...item.children()); } return allItems; } function createNodeItemsById(rootItems: IDesignItem[]) { return new Map( rootItems .filter(isNodeItem) .map(item => [getNodeId(item), item] as const) .filter((entry): entry is [string, IDesignItem] => !!entry[0]) ); } export function rerouteConnectedMermaidEdges(instanceServiceContainer: InstanceServiceContainer, changedItems: IDesignItem[], operationFinished: boolean) { const changedNodeIds = new Set( changedItems .filter(isNodeItem) .map(getNodeId) .filter((id): id is string => !!id) ); if (!changedNodeIds.size) return; const designerCanvas = instanceServiceContainer.designerCanvas; const rootItems = collectCanvasDesignItems(designerCanvas.rootDesignItem); const nodeItemsById = createNodeItemsById(rootItems); const affectedEdges = rootItems.filter(item => { if (!isEdgeItem(item)) return false; const from = item.element.getAttribute("from"); const to = item.element.getAttribute("to"); return !!from && !!to && (changedNodeIds.has(from) || changedNodeIds.has(to)); }); for (const edgeItem of affectedEdges) { const sourceItem = nodeItemsById.get(edgeItem.element.getAttribute("from")); const targetItem = nodeItemsById.get(edgeItem.element.getAttribute("to")); if (!sourceItem || !targetItem) continue; const waypoints = encodeWaypoints(routeBetweenBounds( designerCanvas.getNormalizedElementCoordinates(sourceItem.element), designerCanvas.getNormalizedElementCoordinates(targetItem.element), getDiagramDirection(edgeItem) )); const edgeElement = edgeItem.element as HTMLElement & { setPreviewWaypoints?: (waypoints: string | null) => void }; if (operationFinished) { edgeElement.setPreviewWaypoints?.(waypoints); if (edgeItem.getAttribute("waypoints") !== waypoints) edgeItem.setAttribute("waypoints", waypoints); queueMicrotask(() => edgeElement.setPreviewWaypoints?.(null)); } else { edgeElement.setPreviewWaypoints?.(waypoints); } } } function getDiagramDirection(designItem: IDesignItem): FlowchartDirection { const direction = designItem.element.getAttribute("diagram-direction"); if (direction === "TB" || direction === "TD" || direction === "BT" || direction === "RL" || direction === "LR") return direction; return undefined; } ================================================ FILE: packages/web-component-designer-mermaid/src/services/MermaidDocumentPropertiesService.ts ================================================ import { AbstractPropertiesService, BindingTarget, IDesignItem, IProperty, PropertyType, RefreshMode, ValueType } from "@node-projects/web-component-designer"; import { rerouteConnectedMermaidEdges } from "./MermaidConnectionRouting.js"; import { FlowchartDirection } from "./mermaidGeometry.js"; export const mermaidDiagramTypeAttribute = "data-mermaid-diagram-type"; export const mermaidFlowchartDirectionAttribute = "data-mermaid-flowchart-direction"; export const mermaidTitleAttribute = "data-mermaid-title"; export const mermaidFrontmatterAttribute = "data-mermaid-frontmatter"; export type MermaidDocumentDiagramType = "flowchart" | "sequenceDiagram" | "mindmap" | "requirementDiagram"; export class MermaidDocumentPropertiesService extends AbstractPropertiesService { private readonly _diagramTypeProperty: IProperty = { name: "diagramType", displayName: "diagram type", type: "list", values: ["flowchart", "sequenceDiagram", "mindmap", "requirementDiagram"], attributeName: mermaidDiagramTypeAttribute, service: this, propertyType: PropertyType.attribute, }; private readonly _flowchartDirectionProperty: IProperty = { name: "flowchartDirection", displayName: "flowchart direction", type: "list", values: ["TD", "TB", "BT", "LR", "RL"], attributeName: mermaidFlowchartDirectionAttribute, service: this, propertyType: PropertyType.attribute, }; private readonly _requirementDirectionProperty: IProperty = { name: "requirementDirection", displayName: "direction", type: "list", values: ["TB", "BT", "LR", "RL"], attributeName: mermaidFlowchartDirectionAttribute, service: this, propertyType: PropertyType.attribute, }; private readonly _titleProperty: IProperty = { name: "title", displayName: "title", type: "string", attributeName: mermaidTitleAttribute, service: this, propertyType: PropertyType.attribute, }; override getRefreshMode() { return RefreshMode.fullOnValueChange; } override isHandledElement(designItem: IDesignItem): boolean { return designItem.isRootItem; } override async getProperties(designItem: IDesignItem): Promise { const diagramType = getMermaidDocumentDiagramType(designItem); if (diagramType === "requirementDiagram") return [this._diagramTypeProperty, this._requirementDirectionProperty, this._titleProperty]; if (diagramType === "sequenceDiagram" || diagramType === "mindmap") return [this._diagramTypeProperty, this._titleProperty]; return [this._diagramTypeProperty, this._flowchartDirectionProperty, this._titleProperty]; } override async getProperty(designItem: IDesignItem, name: string): Promise { if (name === this._diagramTypeProperty.name) return this._diagramTypeProperty; if (name === this._flowchartDirectionProperty.name) return this._flowchartDirectionProperty; if (name === this._requirementDirectionProperty.name) return this._requirementDirectionProperty; if (name === this._titleProperty.name) return this._titleProperty; return null; } override async setValue(designItems: IDesignItem[], property: IProperty, value: any): Promise { const rootDesignItems = designItems.filter(designItem => this.isHandledElement(designItem)); if (!rootDesignItems.length) return; const changeGroup = rootDesignItems[0].openGroup("mermaid document property changed: " + property.name + " to " + value); try { for (const designItem of rootDesignItems) setAttribute(designItem, property.attributeName, value); if (property.name === this._diagramTypeProperty.name && (value === "flowchart" || value === "requirementDiagram")) { for (const designItem of rootDesignItems) { if (!designItem.hasAttribute(mermaidFlowchartDirectionAttribute)) setAttribute(designItem, mermaidFlowchartDirectionAttribute, value === "requirementDiagram" ? "TB" : "TD"); } } if (property.name === this._flowchartDirectionProperty.name && isFlowchartDirection(value)) { for (const designItem of rootDesignItems) updateFlowchartDirection(designItem, value); } changeGroup.commit(); } catch (error) { changeGroup.abort(); throw error; } } override getPropertyTarget(): BindingTarget { return BindingTarget.attribute; } override getValue(designItems: IDesignItem[], property: IProperty): any { const designItem = designItems?.[0]; if (!designItem) return null; if (property.name === this._diagramTypeProperty.name) return getMermaidDocumentDiagramType(designItem); if (property.name === this._flowchartDirectionProperty.name) return getMermaidDocumentFlowchartDirection(designItem); if (property.name === this._requirementDirectionProperty.name) return getMermaidDocumentFlowchartDirection(designItem); if (property.name === this._titleProperty.name) return getMermaidDocumentTitle(designItem); return super.getValue(designItems, property); } override isSet(designItems: IDesignItem[], property: IProperty): ValueType { return this.getValue(designItems, property) != null ? ValueType.all : ValueType.none; } } export function getMermaidDocumentDiagramType(rootDesignItem: IDesignItem): MermaidDocumentDiagramType { const value = rootDesignItem?.getAttribute(mermaidDiagramTypeAttribute); if (value === "sequenceDiagram" || value === "mindmap" || value === "requirementDiagram") return value; return "flowchart"; } export function getMermaidDocumentFlowchartDirection(rootDesignItem: IDesignItem) { return rootDesignItem?.getAttribute(mermaidFlowchartDirectionAttribute) ?? "TD"; } export function getMermaidDocumentTitle(rootDesignItem: IDesignItem) { return rootDesignItem?.getAttribute(mermaidTitleAttribute) ?? ""; } export function getMermaidDocumentFrontmatter(rootDesignItem: IDesignItem) { return rootDesignItem?.getAttribute(mermaidFrontmatterAttribute) ?? ""; } function setAttribute(designItem: IDesignItem, attributeName: string, value: any) { if (value == null || value === "") designItem.removeAttribute(attributeName); else designItem.setAttribute(attributeName, value.toString()); } function updateFlowchartDirection(rootDesignItem: IDesignItem, direction: FlowchartDirection) { const flowchartNodes: IDesignItem[] = []; for (const child of rootDesignItem.children(true)) { if (child.element.localName === "mermaid-node") { child.setAttribute("diagram-direction", direction); flowchartNodes.push(child); } else if (child.element.localName === "mermaid-edge") { child.setAttribute("diagram-direction", direction); } } rerouteConnectedMermaidEdges(rootDesignItem.instanceServiceContainer, flowchartNodes, true); } function isFlowchartDirection(value: string): value is FlowchartDirection { return value === "TB" || value === "TD" || value === "BT" || value === "RL" || value === "LR"; } ================================================ FILE: packages/web-component-designer-mermaid/src/services/MermaidElementsService.ts ================================================ import { IElementDefinition, IElementsService, InstanceServiceContainer } from "@node-projects/web-component-designer"; import { LazyLoader, TypedEvent } from "@node-projects/base-custom-webcomponent"; import { getMermaidDocumentDiagramType, MermaidDocumentDiagramType } from "./MermaidDocumentPropertiesService.js"; type MermaidElementDefinition = IElementDefinition & { diagramTypes?: MermaidDocumentDiagramType[]; } type MermaidElementsJson = { elements: Array; } export class MermaidElementsService implements IElementsService { readonly onElementsChanged = new TypedEvent(); private _allElements: MermaidElementDefinition[]; private _instanceServiceContainer: InstanceServiceContainer; private _currentDiagramType: MermaidDocumentDiagramType = "flowchart"; private _resolveStored: ((value: IElementDefinition[]) => void)[]; private _rejectStored: ((errorCode: number) => void)[]; constructor(private readonly _name: string, file: string | URL) { LazyLoader.LoadText(file.toString()).then(data => { const parsed = JSON.parse(data) as MermaidElementsJson; this._allElements = parsed.elements.map(element => typeof element === "string" ? { tag: element } : element); this._resolveWaiting(); }).catch(error => this._rejectWaiting(error)); } get name() { return this._name; } setInstanceServiceContainer(instanceServiceContainer: InstanceServiceContainer) { this._instanceServiceContainer = instanceServiceContainer; this._refreshCurrentDiagramType(); instanceServiceContainer.onContentChanged.on(() => this._refreshCurrentDiagramType()); } getElements(): Promise { if (this._allElements) return Promise.resolve(this._filterElements()); if (!this._resolveStored) { this._resolveStored = []; this._rejectStored = []; } return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); }); } private _filterElements() { return this._allElements.filter(element => !element.diagramTypes || element.diagramTypes.includes(this._currentDiagramType)); } private _refreshCurrentDiagramType() { const nextDiagramType = getMermaidDocumentDiagramType(this._instanceServiceContainer?.rootDesignItem); if (nextDiagramType === this._currentDiagramType) return; this._currentDiagramType = nextDiagramType; this.onElementsChanged.emit(); } private _resolveWaiting() { if (!this._resolveStored) return; const elements = this._filterElements(); this._resolveStored.forEach(resolve => resolve(elements)); this._resolveStored = null; this._rejectStored = null; } private _rejectWaiting(error: number) { if (!this._rejectStored) return; this._rejectStored.forEach(reject => reject(error)); this._resolveStored = null; this._rejectStored = null; } } ================================================ FILE: packages/web-component-designer-mermaid/src/services/MermaidLayoutCopyPasteService.ts ================================================ import { copyTextToClipboard, DefaultHtmlParserService, getTextFromClipboard, ICopyPasteService, IDesignItem, IRect, InstanceServiceContainer, ServiceContainer } from "@node-projects/web-component-designer"; export class MermaidLayoutCopyPasteService implements ICopyPasteService { async copyItems(designItems: IDesignItem[]): Promise { let savedata = ""; for (const designItem of designItems) { savedata += designItem.element.outerHTML; } await copyTextToClipboard(savedata); } async getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]> { const text = await getTextFromClipboard(); const htmlParser = new DefaultHtmlParserService(); const result = await htmlParser.parse(text, serviceContainer, instanceServiceContainer, true); return [result, null]; } } ================================================ FILE: packages/web-component-designer-mermaid/src/services/MermaidLayoutPlacementService.ts ================================================ import { DefaultPlacementService, IDesignItem, IDesignerCanvas, IPoint, filterChildPlaceItems } from "@node-projects/web-component-designer"; export class MermaidLayoutPlacementService extends DefaultPlacementService { override serviceForContainer(container: IDesignItem) { return container.element.localName === "mermaid-mindmap-node" || container.element.localName === "mermaid-subgraph"; } override canEnter(container: IDesignItem, items: IDesignItem[]) { if (container.element.localName === "mermaid-mindmap-node") return items.every(item => item.element.localName === "mermaid-mindmap-node" && !item.element.contains(container.element) && item !== container); if (container.element.localName === "mermaid-subgraph") return items.every(item => (item.element.localName === "mermaid-node" || item.element.localName === "mermaid-subgraph") && !item.element.contains(container.element) && item !== container); return false; } override enterContainer(container: IDesignItem, items: IDesignItem[]) { const filteredItems = filterChildPlaceItems(items); for (const item of filteredItems) { if (item.element.localName === "mermaid-mindmap-node" || item.element.localName === "mermaid-node" || item.element.localName === "mermaid-subgraph") container.insertChild(item); } } override leaveContainer(container: IDesignItem, items: IDesignItem[]) { } override finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { super.finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items); } } ================================================ FILE: packages/web-component-designer-mermaid/src/services/MermaidParserService.ts ================================================ import { DesignItem, IDesignItem, IHtmlParserService, IHtmlWriterOptions, IHtmlWriterService, InstanceServiceContainer, ITextWriter, ServiceContainer } from "@node-projects/web-component-designer"; import { MermaidEdge } from "../widgets/mermaid-edge.js"; import { MermaidNode, normalizeLabelLineBreaks } from "../widgets/mermaid-node.js"; import { MermaidSequenceMessage } from "../widgets/mermaid-sequence-message.js"; import { MermaidSequenceParticipant } from "../widgets/mermaid-sequence-participant.js"; import { MermaidMindmapNode } from "../widgets/mermaid-mindmap-node.js"; import { MermaidRequirementNode } from "../widgets/mermaid-requirement-node.js"; import { MermaidRequirementRelationship } from "../widgets/mermaid-requirement-relationship.js"; import { MermaidSubgraph } from "../widgets/mermaid-subgraph.js"; import { MermaidFlowchartDirective } from "../widgets/mermaid-flowchart-directive.js"; import { getMermaidDocumentDiagramType, getMermaidDocumentFrontmatter, getMermaidDocumentTitle, mermaidDiagramTypeAttribute, mermaidFlowchartDirectionAttribute, mermaidFrontmatterAttribute, mermaidTitleAttribute, MermaidDocumentDiagramType } from "./MermaidDocumentPropertiesService.js"; import { encodeWaypoints, FlowchartDirection, routeBetweenBounds } from "./mermaidGeometry.js"; type ParsedNode = { id: string; label: string; shape: string; parentId?: string; classes?: string; style?: string; sourceRange?: { start: number; length: number }; } type ParsedEdge = { from: string; to: string; fromNode?: ParsedNode; toNode?: ParsedNode; label: string; edgeType: string; connector?: string; edgeId?: string; animation?: string; connectorRange?: { start: number; length: number }; sourceRange?: { start: number; length: number }; } type ParsedSubgraph = { id: string; title: string; parentId?: string; direction?: FlowchartDirection; sourceRange?: { start: number; length: number }; } type ParsedFlowchartDirective = { line: string; sourceRange?: { start: number; length: number }; } type ParsedSequenceParticipant = { id: string; label: string; participantType: string; implicit?: boolean; sourceRange?: { start: number; length: number }; } type ParsedSequenceMessage = { from: string; to: string; label: string; messageType: string; connector: string; sourceRange?: { start: number; length: number }; } type ParsedMindmapNode = { id: string; parentId: string; label: string; shape: string; indent: number; sourceRange?: { start: number; length: number }; } type ParsedRequirementNode = { id: string; kind: "requirement" | "element"; requirementType?: string; requirementId?: string; text?: string; risk?: string; verifyMethod?: string; elementType?: string; docRef?: string; sourceRange?: { start: number; length: number }; } type ParsedRequirementRelationship = { from: string; to: string; relationshipType: string; syntaxDirection: "forward" | "reverse"; sourceRange?: { start: number; length: number }; } type LineRecord = { text: string; trimmed: string; indent: number; start: number; } type ParsedMermaidDocument = { lines: LineRecord[]; title: string; frontmatter: string; } export class MermaidParserService implements IHtmlParserService, IHtmlWriterService { options: IHtmlWriterOptions = {}; supportsRootItemWrite = true; async parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { const diagramKind = getDiagramKind(readMermaidDocument(html)); if (diagramKind === "sequence") return parseSequenceDiagram(html, serviceContainer, instanceServiceContainer); if (diagramKind === "mindmap") return parseMindmapDiagram(html, serviceContainer, instanceServiceContainer); if (diagramKind === "requirementDiagram") return parseRequirementDiagram(html, serviceContainer, instanceServiceContainer); return parseFlowchart(html, serviceContainer, instanceServiceContainer); } write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean) { const rootDesignItem = getRootDesignItem(designItems); const mermaidDesignItems = getMermaidDesignItems(designItems); const documentType = getWritableDocumentDiagramType(mermaidDesignItems.length ? mermaidDesignItems : designItems); if (documentType === "mindmap") { writeMindmapDiagram(textWriter, mermaidDesignItems, updatePositions, rootDesignItem); return; } if (documentType === "sequenceDiagram") { writeSequenceDiagram(textWriter, mermaidDesignItems, updatePositions, rootDesignItem); return; } if (documentType === "requirementDiagram") { writeRequirementDiagram(textWriter, mermaidDesignItems, updatePositions, rootDesignItem); return; } writeFlowchart(textWriter, mermaidDesignItems, updatePositions, rootDesignItem); } } function getDiagramKind(document: ParsedMermaidDocument) { const firstMeaningfulLine = document.lines.find(line => line.trimmed && !line.trimmed.startsWith("%%"))?.trimmed ?? ""; if (equalsIgnoreCase(firstMeaningfulLine, "sequenceDiagram")) return "sequence"; if (equalsIgnoreCase(firstMeaningfulLine, "mindmap")) return "mindmap"; if (equalsIgnoreCase(firstMeaningfulLine, "requirementDiagram")) return "requirementDiagram"; return "flowchart"; } async function parseFlowchart(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise { const document = readMermaidDocument(html); const lines = document.lines; const designItems: IDesignItem[] = []; const nodes = new Map(); const nodeBounds = new Map(); const edges: ParsedEdge[] = []; const subgraphs = new Map(); const directives: ParsedFlowchartDirective[] = []; const subgraphStack: ParsedSubgraph[] = []; let direction: FlowchartDirection = "TD"; const scannedNodes = new Map(); const scannedEdges: ParsedEdge[] = []; for (const line of lines) { if (!line.trimmed || line.trimmed.startsWith("%%")) continue; const subgraph = parseSubgraphStart(line.trimmed, line.start, subgraphStack[subgraphStack.length - 1]?.id); if (subgraph) { subgraphs.set(subgraph.id, subgraph); subgraphStack.push(subgraph); continue; } if (equalsIgnoreCase(line.trimmed, "end")) { subgraphStack.pop(); continue; } const directive = parseFlowchartDirective(line.trimmed, line.start); if (directive) { directives.push(directive); continue; } const parsedDirection = parseFlowchartDirection(line.trimmed); if (parsedDirection) { if (subgraphStack.length) subgraphStack[subgraphStack.length - 1].direction = parsedDirection; else direction = parsedDirection; continue; } const parsedSubgraphDirection = parseDirectionStatement(line.trimmed); if (parsedSubgraphDirection && subgraphStack.length) { subgraphStack[subgraphStack.length - 1].direction = parsedSubgraphDirection; continue; } const edge = parseEdge(line.trimmed, line.start); if (edge) { scannedEdges.push(edge); mergeNode(scannedNodes, edge.fromNode); mergeNode(scannedNodes, edge.toNode); continue; } const node = parseNode(line.trimmed, line.start); if (node) { node.parentId = subgraphStack[subgraphStack.length - 1]?.id; mergeNode(scannedNodes, node); } } setMermaidDocumentAttributes(instanceServiceContainer, "flowchart", direction, document.title, document.frontmatter); const parsed = await getMermaidFlowchartData(html); if (parsed) { for (const node of parsed.nodes) { const scanned = scannedNodes.get(node.id); mergeNode(nodes, { ...node, parentId: scanned?.parentId, classes: scanned?.classes, style: scanned?.style, sourceRange: scanned?.sourceRange }); } for (const edge of parsed.edges) { const scanned = getScannedEdge(scannedEdges, edge); edges.push({ ...edge, ...scanned }); } } else { for (const node of scannedNodes.values()) mergeNode(nodes, node); edges.push(...scannedEdges); } const mermaidLayout = await getMermaidLayout(html, nodes); const designItemsById = new Map(); let subgraphIndex = 0; for (const subgraph of subgraphs.values()) { const layout = mermaidLayout?.subgraphs?.get(subgraph.id); const element = new MermaidSubgraph(); element.style.position = "absolute"; element.style.left = (layout?.x ?? (30 + subgraphIndex * 40)) + "px"; element.style.top = (layout?.y ?? (30 + subgraphIndex * 40)) + "px"; element.style.width = (layout?.width ?? 360) + "px"; element.style.height = (layout?.height ?? 240) + "px"; element.setAttribute("subgraph-id", subgraph.id); element.setAttribute("title", subgraph.title); if (subgraph.direction) element.setAttribute("direction", subgraph.direction); const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItemsById.set(subgraph.id, designItem); const parentItem = designItemsById.get(subgraph.parentId); if (parentItem) parentItem._insertChildInternal(designItem); else designItems.push(designItem); if (subgraph.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, subgraph.sourceRange); subgraphIndex++; } let index = 0; for (const node of nodes.values()) { const layout = mermaidLayout?.nodes.get(node.id); const parentLayout = node.parentId ? mermaidLayout?.subgraphs?.get(node.parentId) : null; const fallbackPosition = getFallbackFlowchartNodePosition(index, nodes.size, direction); const left = layout ? layout.x - (parentLayout?.x ?? 0) : fallbackPosition.left; const top = layout ? layout.y - (parentLayout?.y ?? 0) : fallbackPosition.top; const width = layout?.width ?? getDefaultNodeSize(node.shape).width; const height = layout?.height ?? getDefaultNodeSize(node.shape).height; const element = new MermaidNode(); element.style.position = "absolute"; element.style.left = left + "px"; element.style.top = top + "px"; element.style.width = width + "px"; element.style.height = height + "px"; element.setAttribute("node-id", node.id); element.setAttribute("label", node.label); element.setAttribute("shape", node.shape); element.setAttribute("diagram-direction", direction); if (node.classes) element.setAttribute("classes", node.classes); if (node.style) element.setAttribute("style-directive", node.style); const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); const parentItem = designItemsById.get(node.parentId); if (parentItem) parentItem._insertChildInternal(designItem); else designItems.push(designItem); designItemsById.set(node.id, designItem); if (node.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, node.sourceRange); nodeBounds.set(node.id, { x: layout?.x ?? left, y: layout?.y ?? top, width, height }); index++; } let edgeIndex = 0; for (const edge of edges) { const element = new MermaidEdge(); element.style.position = "absolute"; element.style.left = "40px"; element.style.top = 60 + index * 110 + edgeIndex * 44 + "px"; element.style.width = "220px"; element.style.height = "28px"; element.setAttribute("from", edge.from); element.setAttribute("to", edge.to); element.setAttribute("label", edge.label); element.setAttribute("edge-type", edge.edgeType); if (edge.connector) element.setAttribute("connector", edge.connector); if (edge.edgeId) element.setAttribute("edge-id", edge.edgeId); if (edge.animation) element.setAttribute("animation", edge.animation); element.setAttribute("diagram-direction", direction); const sourceBounds = nodeBounds.get(edge.from); const targetBounds = nodeBounds.get(edge.to); if (sourceBounds && targetBounds) element.setAttribute("waypoints", encodeWaypoints(routeBetweenBounds(sourceBounds, targetBounds, direction))); const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItems.push(designItem); if (edge.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, edge.connectorRange ?? edge.sourceRange); edgeIndex++; } let directiveIndex = 0; for (const directive of directives) { const element = new MermaidFlowchartDirective(); element.style.position = "absolute"; element.style.left = "40px"; element.style.top = 60 + index * 110 + edgeIndex * 44 + directiveIndex * 28 + "px"; element.style.width = "320px"; element.style.height = "24px"; element.setAttribute("line", directive.line); const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItems.push(designItem); if (directive.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, directive.sourceRange); directiveIndex++; } return designItems; } function writeFlowchart(textWriter: ITextWriter, designItems: IDesignItem[], updatePositions?: boolean, rootDesignItem?: IDesignItem) { const rootDirection = rootDesignItem?.getAttribute(mermaidFlowchartDirectionAttribute); const direction = isFlowchartDirection(rootDirection) ? rootDirection : getDiagramDirection(designItems); writeMermaidFrontmatter(textWriter, designItems, rootDesignItem); textWriter.writeLine("flowchart " + direction); const allFlowchartItems = getAllFlowchartItems(designItems); const nodeIdsUsedByEdges = getFlowchartNodeIdsUsedByEdges(allFlowchartItems); const nodeItemsById = getFlowchartNodeItemsById(allFlowchartItems); const explicitlyWrittenNodeIds = new Set(); const writeNodeOrSubgraph = (designItem: IDesignItem, depth: number) => { const element = designItem.element as HTMLElement & { createMermaid?: () => string }; if (element.nodeName === "MERMAID-SUBGRAPH") { const subgraphElement = element as HTMLElement & { createMermaidStart?: () => string }; writeDesignItemLine(textWriter, designItem, repeatText(" ", depth) + subgraphElement.createMermaidStart(), updatePositions); const subgraphDirection = element.getAttribute("direction"); if (isFlowchartDirection(subgraphDirection)) textWriter.writeLine(repeatText(" ", depth + 1) + "direction " + subgraphDirection); for (const child of designItem.children()) writeNodeOrSubgraph(child, depth + 1); textWriter.writeLine(repeatText(" ", depth) + "end"); } else if (element.nodeName === "MERMAID-NODE" && element.createMermaid && shouldWriteFlowchartNode(element, nodeIdsUsedByEdges)) { writeDesignItemLine(textWriter, designItem, repeatText(" ", depth) + element.createMermaid(), updatePositions); explicitlyWrittenNodeIds.add(element.getAttribute("node-id")); } }; for (const designItem of designItems) { writeNodeOrSubgraph(designItem, 1); } for (const designItem of allFlowchartItems) { const element = designItem.element as HTMLElement & { createMermaid?: () => string }; if (element.nodeName === "MERMAID-EDGE" && element.createMermaid) writeFlowchartEdgeLine(textWriter, designItem, element, nodeItemsById, explicitlyWrittenNodeIds, updatePositions); } for (const designItem of allFlowchartItems) { const element = designItem.element as HTMLElement & { createMermaid?: () => string }; if (element.nodeName === "MERMAID-FLOWCHART-DIRECTIVE" && element.createMermaid) writeDesignItemLine(textWriter, designItem, " " + element.createMermaid(), updatePositions); } } function writeFlowchartEdgeLine(textWriter: ITextWriter, designItem: IDesignItem, element: HTMLElement & { createMermaid?: () => string }, nodeItemsById: Map, explicitlyWrittenNodeIds: Set, updatePositions?: boolean) { const start = textWriter.position; const line = indentEmbeddedNewlines(" " + element.createMermaid()); textWriter.writeLine(line); if (!updatePositions) return; const from = element.getAttribute("from"); const to = element.getAttribute("to"); const fromIndex = from ? line.indexOf(from) : -1; const toIndex = to ? line.lastIndexOf(to) : -1; if (from && fromIndex >= 0 && !explicitlyWrittenNodeIds.has(from)) nodeItemsById.get(from)?.instanceServiceContainer.designItemDocumentPositionService?.setPosition(nodeItemsById.get(from), { start: start + fromIndex, length: from.length }); if (to && toIndex >= 0 && !explicitlyWrittenNodeIds.has(to)) nodeItemsById.get(to)?.instanceServiceContainer.designItemDocumentPositionService?.setPosition(nodeItemsById.get(to), { start: start + toIndex, length: to.length }); if (fromIndex >= 0 && toIndex > fromIndex) { const connectorStart = fromIndex + from.length; designItem.instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, { start: start + connectorStart, length: toIndex - connectorStart }); } else { designItem.instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, { start, length: line.length }); } } function getFlowchartNodeIdsUsedByEdges(designItems: IDesignItem[]) { const ids = new Set(); for (const designItem of designItems) { const element = designItem.element as HTMLElement; if (element.nodeName === "MERMAID-EDGE") { const from = element.getAttribute("from"); const to = element.getAttribute("to"); if (from) ids.add(from); if (to) ids.add(to); } } return ids; } function getFlowchartNodeItemsById(designItems: IDesignItem[]) { const nodeItemsById = new Map(); for (const designItem of designItems) { const element = designItem.element as HTMLElement; if (element.nodeName === "MERMAID-NODE") { const id = element.getAttribute("node-id"); if (id) nodeItemsById.set(id, designItem); } } return nodeItemsById; } function getAllFlowchartItems(designItems: IDesignItem[]) { const result: IDesignItem[] = []; const append = (item: IDesignItem) => { result.push(item); for (const child of item.children()) append(child); }; for (const designItem of designItems) append(designItem); return result; } function shouldWriteFlowchartNode(element: HTMLElement, nodeIdsUsedByEdges: Set) { const id = element.getAttribute("node-id"); const label = element.getAttribute("label"); const shape = element.getAttribute("shape") ?? "rectangle"; if (!nodeIdsUsedByEdges.has(id)) return true; return shape !== "rectangle" || (label && label !== id); } async function parseSequenceDiagram(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise { const document = readMermaidDocument(html); setMermaidDocumentAttributes(instanceServiceContainer, "sequenceDiagram", undefined, document.title, document.frontmatter); const lines = document.lines; const participants = new Map(); const messages: ParsedSequenceMessage[] = []; const scannedParticipants = new Map(); const scannedMessages: ParsedSequenceMessage[] = []; for (const line of lines) { if (!line.trimmed || line.trimmed.startsWith("%%") || equalsIgnoreCase(line.trimmed, "sequenceDiagram")) continue; const participant = parseSequenceParticipant(line.trimmed, line.start); if (participant) { scannedParticipants.set(participant.id, participant); continue; } const message = parseSequenceMessage(line.trimmed, line.start); if (message) { scannedMessages.push(message); } } const parsed = await getMermaidSequenceData(html); if (parsed) { for (const participant of parsed.participants) { const scanned = scannedParticipants.get(participant.id); participants.set(participant.id, { ...participant, implicit: !scanned, sourceRange: scanned?.sourceRange, }); } for (let i = 0; i < parsed.messages.length; i++) { messages.push({ ...parsed.messages[i], sourceRange: scannedMessages[i]?.sourceRange, }); } } else { for (const participant of scannedParticipants.values()) participants.set(participant.id, participant); messages.push(...scannedMessages); } for (const message of messages) { ensureSequenceParticipant(participants, message.from); ensureSequenceParticipant(participants, message.to); } const designItems: IDesignItem[] = []; const participantBounds = new Map(); let index = 0; for (const participant of participants.values()) { const width = 140; const height = 44; const left = 60 + index * 220; const top = 40; const element = new MermaidSequenceParticipant(); element.style.position = "absolute"; element.style.left = left + "px"; element.style.top = top + "px"; element.style.width = width + "px"; element.style.height = height + "px"; element.setAttribute("participant-id", participant.id); element.setAttribute("label", participant.label); element.setAttribute("participant-type", participant.participantType); if (participant.implicit) element.setAttribute("implicit", "true"); const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItems.push(designItem); if (participant.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, participant.sourceRange); participantBounds.set(participant.id, { x: left, y: top, width, height }); index++; } let messageIndex = 0; for (const message of messages) { const fromBounds = participantBounds.get(message.from); const toBounds = participantBounds.get(message.to); const y = 130 + messageIndex * 54; const startX = fromBounds ? fromBounds.x + fromBounds.width / 2 : 60; const endX = toBounds ? toBounds.x + toBounds.width / 2 : startX + 220; const left = Math.min(startX, endX); const width = Math.max(80, Math.abs(endX - startX)); const element = new MermaidSequenceMessage(); element.style.position = "absolute"; element.style.left = left + "px"; element.style.top = y + "px"; element.style.width = width + "px"; element.style.height = "36px"; element.setAttribute("from", message.from); element.setAttribute("to", message.to); element.setAttribute("label", message.label); element.setAttribute("message-type", message.messageType); element.setAttribute("connector", message.connector); const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItems.push(designItem); if (message.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, message.sourceRange); messageIndex++; } return designItems; } function writeSequenceDiagram(textWriter: ITextWriter, designItems: IDesignItem[], updatePositions?: boolean, rootDesignItem?: IDesignItem) { writeMermaidFrontmatter(textWriter, designItems, rootDesignItem); textWriter.writeLine("sequenceDiagram"); for (const designItem of designItems) { const element = designItem.element as HTMLElement & { createMermaid?: () => string }; if (element.nodeName === "MERMAID-SEQUENCE-PARTICIPANT" && element.getAttribute("implicit") !== "true" && element.createMermaid) writeDesignItemLine(textWriter, designItem, " " + element.createMermaid(), updatePositions); } for (const designItem of designItems) { const element = designItem.element as HTMLElement & { createMermaid?: () => string }; if (element.nodeName === "MERMAID-SEQUENCE-MESSAGE" && element.createMermaid) writeDesignItemLine(textWriter, designItem, " " + element.createMermaid(), updatePositions); } } async function parseMindmapDiagram(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise { const document = readMermaidDocument(html); setMermaidDocumentAttributes(instanceServiceContainer, "mindmap", undefined, document.title, document.frontmatter); const parsedNodes: ParsedMindmapNode[] = []; const parentStack: ParsedMindmapNode[] = []; let index = 0; for (const line of document.lines) { if (!line.trimmed || line.trimmed.startsWith("%%") || equalsIgnoreCase(line.trimmed, "mindmap")) continue; while (parentStack.length && parentStack[parentStack.length - 1].indent >= line.indent) parentStack.pop(); const parent = parentStack[parentStack.length - 1]; const parsed = parseMindmapNode(line.trimmed, index, parent?.id ?? "", line.start, line.text.length, line.indent); parsedNodes.push(parsed); parentStack.push(parsed); index++; } const siblingsByParent = new Map(); const designItemsById = new Map(); const rootDesignItems: IDesignItem[] = []; const mermaidLayout = await getMermaidMindmapLayout(html, parsedNodes); for (const node of parsedNodes) { const siblingIndex = siblingsByParent.get(node.parentId) ?? 0; siblingsByParent.set(node.parentId, siblingIndex + 1); const layout = mermaidLayout?.nodes.get(node.id); const parentLayout = node.parentId ? mermaidLayout?.nodes.get(node.parentId) : null; const left = layout ? layout.x - (parentLayout?.x ?? 0) : (node.parentId ? 220 : 40); const top = layout ? layout.y - (parentLayout?.y ?? 0) : (node.parentId ? siblingIndex * 76 : 40 + rootDesignItems.length * 96); const element = new MermaidMindmapNode(); element.style.position = "absolute"; element.style.left = left + "px"; element.style.top = top + "px"; element.style.width = (layout?.width ?? getDefaultMindmapNodeSize(node.shape).width) + "px"; element.style.height = (layout?.height ?? getDefaultMindmapNodeSize(node.shape).height) + "px"; element.setAttribute("mindmap-id", node.id); element.setAttribute("label", node.label); element.setAttribute("shape", node.shape); const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItemsById.set(node.id, designItem); const parentItem = designItemsById.get(node.parentId); if (parentItem) { parentItem._insertChildInternal(designItem); } else { rootDesignItems.push(designItem); } if (node.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, node.sourceRange); } return rootDesignItems; } function writeMindmapDiagram(textWriter: ITextWriter, designItems: IDesignItem[], updatePositions?: boolean, rootDesignItem?: IDesignItem) { writeMermaidFrontmatter(textWriter, designItems, rootDesignItem); textWriter.writeLine("mindmap"); const writeItems = (items: IDesignItem[], depth: number) => { for (const item of sortMindmapItems(items)) { const element = item.element as HTMLElement & { createMermaid?: () => string }; if (!element.createMermaid) continue; writeDesignItemLine(textWriter, item, repeatText(" ", depth + 1) + element.createMermaid(), updatePositions); writeItems(Array.from(item.children()).filter(child => child.element.localName === MermaidMindmapNode.is), depth + 1); } }; writeItems(designItems.filter(designItem => designItem.element.localName === MermaidMindmapNode.is), 0); } async function parseRequirementDiagram(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise { const document = readMermaidDocument(html); const lines = document.lines; const nodes = new Map(); const relationships: ParsedRequirementRelationship[] = []; let direction: FlowchartDirection = "TB"; for (let i = 0; i < lines.length; i++) { const line = lines[i]; if (!line.trimmed || line.trimmed.startsWith("%%") || equalsIgnoreCase(line.trimmed, "requirementDiagram")) continue; const parsedDirection = parseDirectionStatement(line.trimmed); if (parsedDirection) { direction = parsedDirection; continue; } const blockStart = parseRequirementBlockStart(line.trimmed); if (blockStart) { const blockLines: LineRecord[] = []; const start = line.start; while (++i < lines.length) { if (lines[i].trimmed === "}") break; blockLines.push(lines[i]); } const endLine = lines[Math.min(i, lines.length - 1)] ?? line; const node = parseRequirementBlock(blockStart, blockLines, start, endLine.start + endLine.text.length - start); nodes.set(node.id, node); continue; } const relationship = parseRequirementRelationship(line.trimmed, line.start); if (relationship) relationships.push(relationship); } setMermaidDocumentAttributes(instanceServiceContainer, "requirementDiagram", direction, document.title, document.frontmatter); const designItems: IDesignItem[] = []; const nodeBounds = new Map(); const mermaidLayout = await getMermaidRequirementLayout(html, nodes); let index = 0; for (const node of nodes.values()) { const fallbackPosition = getFallbackRequirementNodePosition(index, nodes.size, direction); const layout = mermaidLayout?.nodes.get(node.id); const size = getDefaultRequirementNodeSize(node); const left = layout?.x ?? fallbackPosition.left; const top = layout?.y ?? fallbackPosition.top; const width = layout?.width ?? size.width; const height = layout?.height ?? size.height; const element = new MermaidRequirementNode(); element.style.position = "absolute"; element.style.left = left + "px"; element.style.top = top + "px"; element.style.width = width + "px"; element.style.height = height + "px"; element.setAttribute("node-kind", node.kind); element.setAttribute("label", node.id); if (node.kind === "requirement") { element.setAttribute("requirement-type", node.requirementType ?? "requirement"); element.setAttribute("requirement-id", node.requirementId ?? ""); element.setAttribute("text", node.text ?? ""); element.setAttribute("risk", node.risk ?? ""); element.setAttribute("verify-method", node.verifyMethod ?? ""); } else { element.setAttribute("element-type", node.elementType ?? ""); element.setAttribute("doc-ref", node.docRef ?? ""); } const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItems.push(designItem); if (node.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, node.sourceRange); nodeBounds.set(node.id, { x: left, y: top, width, height }); index++; } let relationshipIndex = 0; for (const relationship of relationships) { const element = new MermaidRequirementRelationship(); element.style.position = "absolute"; element.setAttribute("from", relationship.from); element.setAttribute("to", relationship.to); element.setAttribute("relationship-type", relationship.relationshipType); element.setAttribute("syntax-direction", relationship.syntaxDirection); const sourceBounds = nodeBounds.get(relationship.from); const targetBounds = nodeBounds.get(relationship.to); if (sourceBounds && targetBounds) { element.setAttribute("waypoints", encodeWaypoints(routeBetweenBounds(sourceBounds, targetBounds, direction))); } else { element.style.left = "40px"; element.style.top = 80 + index * 120 + relationshipIndex * 40 + "px"; element.style.width = "220px"; element.style.height = "28px"; } const designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer); designItems.push(designItem); if (relationship.sourceRange) instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, relationship.sourceRange); relationshipIndex++; } return designItems; } function writeRequirementDiagram(textWriter: ITextWriter, designItems: IDesignItem[], updatePositions?: boolean, rootDesignItem?: IDesignItem) { const rootDirection = rootDesignItem?.getAttribute(mermaidFlowchartDirectionAttribute); const direction = isRequirementDirection(rootDirection) ? rootDirection : "TB"; writeMermaidFrontmatter(textWriter, designItems, rootDesignItem); textWriter.writeLine("requirementDiagram"); if (direction !== "TB") textWriter.writeLine(" direction " + direction); for (const designItem of designItems) { const element = designItem.element as HTMLElement & { createMermaid?: () => string }; if (element.nodeName === "MERMAID-REQUIREMENT-NODE" && element.createMermaid) writeDesignItemLine(textWriter, designItem, " " + element.createMermaid(), updatePositions); } for (const designItem of designItems) { const element = designItem.element as HTMLElement & { createMermaid?: () => string }; if (element.nodeName === "MERMAID-REQUIREMENT-RELATIONSHIP" && element.createMermaid) writeDesignItemLine(textWriter, designItem, " " + element.createMermaid(), updatePositions); } } function parseSequenceParticipant(line: string, sourceStart: number): ParsedSequenceParticipant { const cursor = new SourceCursor(line); const keyword = cursor.readIdentifier(); if (!equalsIgnoreCase(keyword, "participant") && !equalsIgnoreCase(keyword, "actor")) return null; if (!cursor.skipRequiredWhitespace()) return null; const id = cursor.readIdentifier(); if (!id) return null; let label = id; cursor.skipWhitespace(); if (!cursor.atEnd()) { const marker = cursor.readIdentifier(); if (!equalsIgnoreCase(marker, "as")) return null; if (!cursor.skipRequiredWhitespace()) return null; label = cursor.readRest().trim(); } return { id, label: unquoteLabel(label), participantType: keyword.toLowerCase(), sourceRange: { start: sourceStart, length: line.length }, }; } function parseSequenceMessage(line: string, sourceStart: number): ParsedSequenceMessage { const parsed = parseBinaryStatement(line, ["-->>", "->>", "-->", "->", "--x", "-x", "--)", "-)"]); if (!parsed) return null; const separatorIndex = parsed.right.indexOf(":"); if (separatorIndex < 0) return null; const to = parsed.right.substring(0, separatorIndex).trim(); const label = parsed.right.substring(separatorIndex + 1).trim(); if (!to || !isIdentifier(to)) return null; return { from: parsed.left, to, label: unquoteLabel(label), messageType: getSequenceMessageType(parsed.operator), connector: parsed.operator, sourceRange: { start: sourceStart, length: line.length }, }; } function ensureSequenceParticipant(participants: Map, id: string) { if (!participants.has(id)) participants.set(id, { id, label: id, participantType: "participant", implicit: true }); } function getSequenceMessageType(connector: string) { if (connector.includes(")")) return "async"; if (connector.includes("--")) return "dotted"; if (connector.includes("x")) return "cross"; if (connector === "->") return "open"; return "solid"; } class SourceCursor { public position = 0; constructor(private readonly text: string) { } atEnd() { return this.position >= this.text.length; } skipWhitespace() { while (!this.atEnd() && isWhitespace(this.text[this.position])) this.position++; } skipRequiredWhitespace() { const start = this.position; this.skipWhitespace(); return this.position > start; } readIdentifier() { if (this.atEnd() || !isIdentifierStart(this.text[this.position])) return ""; const start = this.position; this.position++; while (!this.atEnd() && isIdentifierPart(this.text[this.position])) this.position++; return this.text.substring(start, this.position); } readRest() { const rest = this.text.substring(this.position); this.position = this.text.length; return rest; } consume(value: string) { if (!this.text.startsWith(value, this.position)) return false; this.position += value.length; return true; } } function parseFlowchartDirection(line: string): FlowchartDirection | null { const cursor = new SourceCursor(line); const keyword = cursor.readIdentifier(); if (!equalsIgnoreCase(keyword, "graph") && !equalsIgnoreCase(keyword, "flowchart")) return null; if (!cursor.skipRequiredWhitespace()) return null; const direction = cursor.readIdentifier().toUpperCase(); return isFlowchartDirection(direction) ? direction : null; } function parseDirectionStatement(line: string): FlowchartDirection | null { const cursor = new SourceCursor(line); const keyword = cursor.readIdentifier(); if (!equalsIgnoreCase(keyword, "direction")) return null; if (!cursor.skipRequiredWhitespace()) return null; const direction = cursor.readIdentifier().toUpperCase(); return isRequirementDirection(direction) ? direction : null; } function parseSubgraphStart(line: string, sourceStart: number, parentId?: string): ParsedSubgraph | null { const cursor = new SourceCursor(line); const keyword = cursor.readIdentifier(); if (!equalsIgnoreCase(keyword, "subgraph")) return null; if (!cursor.skipRequiredWhitespace()) return null; const rest = cursor.readRest().trim(); if (!rest) return null; const bracketStart = rest.indexOf("["); const bracketEnd = rest.endsWith("]") ? rest.length - 1 : -1; if (bracketStart > 0 && bracketEnd > bracketStart) { const id = rest.substring(0, bracketStart).trim(); const title = unquoteLabel(rest.substring(bracketStart + 1, bracketEnd).trim()); return { id, title, parentId, sourceRange: { start: sourceStart, length: line.length } }; } const title = unquoteLabel(rest); return { id: sanitizeDirectiveId(title), title, parentId, sourceRange: { start: sourceStart, length: line.length } }; } function parseFlowchartDirective(line: string, sourceStart: number): ParsedFlowchartDirective | null { const cursor = new SourceCursor(line); const keyword = cursor.readIdentifier(); if (!keyword) return null; if (equalsIgnoreCase(keyword, "style") || equalsIgnoreCase(keyword, "classDef") || equalsIgnoreCase(keyword, "class") || equalsIgnoreCase(keyword, "click") || equalsIgnoreCase(keyword, "linkStyle")) return { line, sourceRange: { start: sourceStart, length: line.length } }; if (line.includes("@{") && !line.trim().startsWith("subgraph")) return null; return null; } function parseBinaryStatement(line: string, operators: string[]) { const parsed = findOperator(line, operators); if (!parsed) return null; const leftRange = trimRange(line, 0, parsed.index); const rightRange = trimRange(line, parsed.index + parsed.operator.length, line.length); if (leftRange.start >= leftRange.end || rightRange.start >= rightRange.end) return null; return { left: line.substring(leftRange.start, leftRange.end), leftStart: leftRange.start, operator: parsed.operator, operatorStart: parsed.index, right: line.substring(rightRange.start, rightRange.end), rightStart: rightRange.start, }; } function parseRequirementBlockStart(line: string): { kind: "requirement" | "element"; type: string; id: string } | null { const cursor = new SourceCursor(line); const type = cursor.readIdentifier(); if (!type) return null; const kind = equalsIgnoreCase(type, "element") ? "element" : isRequirementType(type) ? "requirement" : null; if (!kind) return null; if (!cursor.skipRequiredWhitespace()) return null; const id = cursor.readIdentifier(); if (!id) return null; cursor.skipWhitespace(); if (cursor.consume(":::")) { cursor.readIdentifier(); cursor.skipWhitespace(); } if (!cursor.consume("{")) return null; return { kind, type, id }; } function parseRequirementBlock(blockStart: { kind: "requirement" | "element"; type: string; id: string }, lines: LineRecord[], sourceStart: number, sourceLength: number): ParsedRequirementNode { const values = new Map(); for (const line of lines) { const separator = findTopLevelColon(line.trimmed); if (separator < 0) continue; const key = line.trimmed.substring(0, separator).trim().toLowerCase(); const value = unquoteLabel(line.trimmed.substring(separator + 1).trim()); values.set(key, value); } if (blockStart.kind === "element") { return { id: blockStart.id, kind: "element", elementType: values.get("type") ?? "", docRef: values.get("docref") ?? "", sourceRange: { start: sourceStart, length: sourceLength }, }; } return { id: blockStart.id, kind: "requirement", requirementType: blockStart.type, requirementId: values.get("id") ?? "", text: values.get("text") ?? "", risk: values.get("risk") ?? "", verifyMethod: values.get("verifymethod") ?? values.get("verifymethod") ?? "", sourceRange: { start: sourceStart, length: sourceLength }, }; } function parseRequirementRelationship(line: string, sourceStart: number): ParsedRequirementRelationship | null { const forward = parseRequirementRelationshipForward(line, sourceStart); if (forward) return forward; return parseRequirementRelationshipReverse(line, sourceStart); } function parseRequirementRelationshipForward(line: string, sourceStart: number): ParsedRequirementRelationship | null { const cursor = new SourceCursor(line); const from = cursor.readIdentifier(); if (!from) return null; cursor.skipWhitespace(); if (!cursor.consume("-")) return null; cursor.skipWhitespace(); const relationshipType = cursor.readIdentifier(); if (!isRequirementRelationshipType(relationshipType)) return null; cursor.skipWhitespace(); if (!cursor.consume("->")) return null; cursor.skipWhitespace(); const to = cursor.readIdentifier(); if (!to) return null; return { from, to, relationshipType, syntaxDirection: "forward", sourceRange: { start: sourceStart, length: line.length } }; } function parseRequirementRelationshipReverse(line: string, sourceStart: number): ParsedRequirementRelationship | null { const cursor = new SourceCursor(line); const to = cursor.readIdentifier(); if (!to) return null; cursor.skipWhitespace(); if (!cursor.consume("<-")) return null; cursor.skipWhitespace(); const relationshipType = cursor.readIdentifier(); if (!isRequirementRelationshipType(relationshipType)) return null; cursor.skipWhitespace(); if (!cursor.consume("-")) return null; cursor.skipWhitespace(); const from = cursor.readIdentifier(); if (!from) return null; return { from, to, relationshipType, syntaxDirection: "reverse", sourceRange: { start: sourceStart, length: line.length } }; } function parseFlowchartEdgeStatement(line: string) { const parsed = parseBinaryStatement(line, getFlowchartOperators()); if (!parsed) return null; let left = parsed.left; let leftStart = parsed.leftStart; let edgeId = ""; const edgeIdSeparator = left.lastIndexOf("@"); if (edgeIdSeparator > 0) { const candidate = left.substring(edgeIdSeparator + 1).trim(); if (!candidate) { const idRange = trimRange(left, 0, edgeIdSeparator); const idCandidate = left.substring(idRange.start, idRange.end).split(" ").pop(); if (isIdentifier(idCandidate)) { edgeId = idCandidate; left = left.substring(0, left.lastIndexOf(idCandidate)).trim(); leftStart = parsed.leftStart; } } } let label = ""; let labelPartLength = 0; const right = parsed.right; if (right[0] === "|") { const end = right.indexOf("|", 1); if (end > 0) { label = right.substring(1, end); const afterLabel = right.substring(end + 1).trim(); const skipped = countLeadingWhitespace(right); labelPartLength = skipped + end + 1; const afterLabelWhitespace = countLeadingWhitespace(right.substring(end + 1)); return { ...parsed, left, leftStart, right: afterLabel, rightStart: parsed.rightStart + skipped + end + 1 + afterLabelWhitespace, label, labelPartLength, edgeId, }; } } return { ...parsed, left, leftStart, label, labelPartLength, edgeId }; } function getFlowchartOperators() { return [ "<-->", "<==>", "<-.->", "--o", "--x", "o--o", "x--x", "o-->", "x-->", "~~~", "-...->", "-..->", "-.->", "-...-", "-..-", "-.-", "====>", "===>", "==>", "====", "===", "---->", "--->", "-->", "-----", "----", "---", ]; } function parseExpandedShape(value: string): { shape: string; label?: string } | null { const cursor = new SourceCursor(value); if (!cursor.consume("@{")) return null; const contentEnd = value.lastIndexOf("}"); const content = contentEnd >= 0 ? value.substring(cursor.position, contentEnd) : value.substring(cursor.position); const properties = parseObjectLiteralProperties(content); const shape = properties.get("shape"); if (!shape) return null; return { shape, label: properties.get("label") }; } function parseDelimitedShapeValue(value: string): { label: string; shape: string } | null { const candidates: Array<{ start: string; end: string; shape: string }> = [ { start: "(((", end: ")))", shape: "doubleCircle" }, { start: "((", end: "))", shape: "circle" }, { start: "([", end: "])", shape: "stadium" }, { start: "(", end: ")", shape: "round" }, { start: "[[", end: "]]", shape: "subroutine" }, { start: "[(", end: ")]", shape: "cylinder" }, { start: ">", end: "]", shape: "asymmetric" }, { start: "{{", end: "}}", shape: "hexagon" }, { start: "{", end: "}", shape: "decision" }, { start: "[/", end: "/]", shape: "parallelogram" }, { start: "[\\", end: "\\]", shape: "parallelogramAlt" }, { start: "[/", end: "\\]", shape: "trapezoid" }, { start: "[\\", end: "/]", shape: "trapezoidAlt" }, { start: "[", end: "]", shape: "rectangle" }, ]; for (const candidate of candidates) { if (value.startsWith(candidate.start) && value.endsWith(candidate.end)) { return { label: value.substring(candidate.start.length, value.length - candidate.end.length).trim(), shape: candidate.shape, }; } } return null; } function parseObjectLiteralProperties(content: string) { const properties = new Map(); let start = 0; let quote = ""; for (let i = 0; i <= content.length; i++) { const char = content[i]; if (quote) { if (char === quote) quote = ""; continue; } if (char === "\"" || char === "'") { quote = char; continue; } if (i === content.length || char === ",") { const part = content.substring(start, i).trim(); const separator = findTopLevelColon(part); if (separator > 0) { const key = part.substring(0, separator).trim(); const value = unquoteLabel(part.substring(separator + 1).trim()); properties.set(key, value); } start = i + 1; } } return properties; } function findOperator(line: string, operators: string[]) { let depth = 0; let quote = ""; for (let i = 0; i < line.length; i++) { const char = line[i]; if (quote) { if (char === quote) quote = ""; continue; } if (char === "\"" || char === "'") { quote = char; continue; } if (char === "[" || char === "(" || char === "{") depth++; else if (char === "]" || char === ")" || char === "}") depth = Math.max(0, depth - 1); if (depth > 0) continue; for (const operator of operators) { if (line.startsWith(operator, i)) return { index: i, operator }; } } return null; } function trimRange(text: string, start: number, end: number) { while (start < end && isWhitespace(text[start])) start++; while (end > start && isWhitespace(text[end - 1])) end--; return { start, end }; } function countLeadingWhitespace(text: string) { let count = 0; while (count < text.length && isWhitespace(text[count])) count++; return count; } function equalsIgnoreCase(a: string, b: string) { return a.toLowerCase() === b.toLowerCase(); } function isIdentifier(value: string) { const cursor = new SourceCursor(value); const id = cursor.readIdentifier(); cursor.skipWhitespace(); return id.length === value.length || (id.length > 0 && cursor.atEnd()); } function isIdentifierStart(char: string) { return isAsciiLetter(char) || char === "_"; } function isIdentifierPart(char: string) { return isIdentifierStart(char) || isAsciiDigit(char) || char === "-"; } function isAsciiLetter(char: string) { if (!char) return false; const code = char.charCodeAt(0); return (code >= 65 && code <= 90) || (code >= 97 && code <= 122); } function isAsciiDigit(char: string) { if (!char) return false; const code = char.charCodeAt(0); return code >= 48 && code <= 57; } function isWhitespace(char: string) { return char === " " || char === "\t" || char === "\r" || char === "\n"; } async function getMermaidFlowchartData(code: string): Promise<{ nodes: ParsedNode[]; edges: ParsedEdge[] } | null> { try { const mermaid = await import("mermaid"); mermaid.default.initialize({ startOnLoad: false, securityLevel: "loose" }); const diagram = await mermaid.default.mermaidAPI.getDiagramFromText(code); const db = diagram.db as any; const vertices = db?.getVertices?.(); const mermaidEdges = db?.getEdges?.(); if (!vertices || !mermaidEdges) return null; const nodes: ParsedNode[] = Array.from(vertices.values()).map((vertex: any) => ({ id: vertex.id, label: normalizeMermaidText(vertex.text ?? vertex.label ?? vertex.id), shape: mapMermaidVertexType(vertex.type), })); const edges: ParsedEdge[] = mermaidEdges.map((edge: any) => ({ from: edge.start, to: edge.end, label: normalizeMermaidText(edge.text ?? ""), edgeType: mapMermaidEdgeType(edge), })); return { nodes, edges }; } catch { return null; } } async function getMermaidSequenceData(code: string): Promise<{ participants: ParsedSequenceParticipant[]; messages: ParsedSequenceMessage[] } | null> { try { const mermaid = await import("mermaid"); mermaid.default.initialize({ startOnLoad: false, securityLevel: "loose" }); const diagram = await mermaid.default.mermaidAPI.getDiagramFromText(code); const db = diagram.db as any; const actors = db?.getActors?.(); const mermaidMessages = db?.getMessages?.(); if (!actors || !mermaidMessages) return null; const participants: ParsedSequenceParticipant[] = Array.from(actors.entries()).map(([id, actor]: [string, any]) => ({ id, label: actor.description ?? actor.name ?? id, participantType: actor.type ?? "participant", })); const messages: ParsedSequenceMessage[] = mermaidMessages .filter((message: any) => typeof message.from === "string" && typeof message.to === "string") .map((message: any) => { const connector = mapMermaidSequenceConnector(message.type); return { from: message.from, to: message.to, label: message.message ?? "", messageType: getSequenceMessageType(connector), connector, }; }); return { participants, messages }; } catch { return null; } } function getScannedEdge(scannedEdges: ParsedEdge[], edge: ParsedEdge): Partial { return scannedEdges.find(scannedEdge => scannedEdge.from === edge.from && scannedEdge.to === edge.to && scannedEdge.label === edge.label) ?? {}; } function mapMermaidVertexType(type: string) { const expanded = mapExpandedShape(type); if (expanded !== "rectangle") return expanded; switch (type) { case "diamond": return "decision"; case "round": return "round"; case "stadium": return "stadium"; case "circle": return "circle"; case "doublecircle": return "doubleCircle"; case "subroutine": return "subroutine"; case "cylinder": return "cylinder"; case "odd": return "asymmetric"; case "hexagon": return "hexagon"; case "lean_right": return "parallelogram"; case "lean_left": return "parallelogramAlt"; case "trapezoid": return "trapezoid"; case "inv_trapezoid": return "trapezoidAlt"; default: return "rectangle"; } } function mapMermaidEdgeType(edge: any) { if (edge.stroke === "dotted") return "dotted"; if (edge.stroke === "thick") return "thick"; if (!edge.type?.includes("arrow")) return "open"; return "arrow"; } function mapMermaidSequenceConnector(type: number) { switch (type) { case 1: return "-->>"; case 3: return "-x"; case 4: return "--x"; case 5: return "->"; case 6: return "-->"; case 24: return "-)"; case 25: return "--)"; default: return "->>"; } } function normalizeMermaidText(value: any) { if (value == null) return ""; if (typeof value === "string") return stripMarkdownString(value); if (Array.isArray(value)) return value.map(normalizeMermaidText).join("\n"); if (typeof value === "object") { if (typeof value.text === "string") return stripMarkdownString(value.text); if (typeof value.label === "string") return stripMarkdownString(value.label); if (typeof value.markdown === "string") return stripMarkdownString(value.markdown); } return stripMarkdownString(value.toString()); } function stripMarkdownString(value: string) { let result = value; if (result.startsWith("`") && result.endsWith("`") && result.length >= 2) result = result.substring(1, result.length - 1); return normalizeLabelLineBreaks(result); } function mergeNode(nodes: Map, node: ParsedNode) { const existing = nodes.get(node.id); if (!existing || existing.label === existing.id || node.label !== node.id) nodes.set(node.id, node); } function parseNode(line: string, sourceStart?: number): ParsedNode { const cursor = new SourceCursor(line); const id = cursor.readIdentifier(); if (!id) return null; cursor.skipWhitespace(); const value = cursor.readRest().trim(); const parsedShape = parseShapeValue(id, value); if (!parsedShape) return null; return { ...parsedShape, sourceRange: sourceStart == null ? undefined : { start: sourceStart, length: line.length }, }; } function parseMindmapNode(line: string, index: number, parentId: string, sourceStart: number, sourceLength: number, indent: number): ParsedMindmapNode { const parsedNode = parseNode(line); if (parsedNode) { return { id: parsedNode.id, parentId, label: parsedNode.label, shape: mapMindmapShape(parsedNode.shape), indent, sourceRange: { start: sourceStart, length: sourceLength }, }; } const id = sanitizeMindmapId(line, index); return { id, parentId, label: unquoteLabel(line), shape: "default", indent, sourceRange: { start: sourceStart, length: sourceLength }, }; } function parseEdge(line: string, sourceStart: number): ParsedEdge & { fromNode: ParsedNode; toNode: ParsedNode } { const parsed = parseFlowchartEdgeStatement(line); if (!parsed) return null; const fromNode = parseNodeToken(parsed.left); const toNode = parseNodeToken(parsed.right); if (!fromNode || !toNode) return null; fromNode.sourceRange = { start: sourceStart + parsed.leftStart + parsed.left.indexOf(fromNode.id), length: fromNode.id.length }; toNode.sourceRange = { start: sourceStart + parsed.rightStart + parsed.right.indexOf(toNode.id), length: toNode.id.length }; return { from: fromNode.id, to: toNode.id, fromNode, toNode, label: parsed.label, edgeType: getEdgeType(parsed.operator), connector: parsed.operator, edgeId: parsed.edgeId, connectorRange: { start: sourceStart + parsed.operatorStart, length: parsed.operator.length + parsed.labelPartLength }, sourceRange: { start: sourceStart, length: line.length }, }; } function parseNodeToken(token: string): ParsedNode { const node = parseNode(token); if (node) return node; const id = new SourceCursor(token).readIdentifier(); return id ? { id, label: id, shape: "rectangle" } : null; } function parseShapeValue(id: string, value: string): ParsedNode { if (!value) return { id, label: id, shape: "rectangle" }; const expandedShape = parseExpandedShape(value); if (expandedShape) return { id, label: expandedShape.label ?? id, shape: mapExpandedShape(expandedShape.shape) }; const shapeValue = parseDelimitedShapeValue(value); if (shapeValue) return { id, label: unquoteLabel(shapeValue.label), shape: shapeValue.shape }; return null; } function getEdgeType(connector: string) { if (connector.includes("~")) return "invisible"; if (connector.includes("o")) return "circle"; if (connector.includes("x")) return "cross"; if (connector.startsWith("<") && connector.endsWith(">")) return "multi"; if (connector.includes("==")) return "thick"; if (connector.includes("-.")) return "dotted"; if (!connector.includes(">")) return "open"; return "arrow"; } function unquoteLabel(label: string) { let result = label.trim(); if (result.length >= 2) { const first = result[0]; const last = result[result.length - 1]; if ((first === "\"" && last === "\"") || (first === "'" && last === "'")) result = result.substring(1, result.length - 1); } return normalizeLabelLineBreaks(result); } function mapExpandedShape(shape: string) { switch (shape) { case "rect": case "proc": case "process": case "rectangle": return "rectangle"; case "bang": return "bang"; case "notch-rect": case "card": case "notched-rectangle": return "notch-rect"; case "cloud": return "cloud"; case "hourglass": case "collate": return "hourglass"; case "bolt": case "com-link": case "lightning-bolt": return "bolt"; case "brace": case "brace-l": case "comment": return "brace"; case "brace-r": return "brace-r"; case "braces": return "braces"; case "datastore": case "data-store": return "datastore"; case "delay": case "half-rounded-rectangle": return "delay"; case "h-cyl": case "das": case "horizontal-cylinder": return "h-cyl"; case "lin-cyl": case "disk": case "lined-cylinder": return "lin-cyl"; case "curv-trap": case "curved-trapezoid": case "display": return "curv-trap"; case "div-rect": case "div-proc": case "divided-process": case "divided-rectangle": return "div-rect"; case "doc": case "document": return "doc"; case "tri": case "extract": case "triangle": return "tri"; case "fork": case "join": return "fork"; case "win-pane": case "internal-storage": case "window-pane": return "win-pane"; case "f-circ": case "filled-circle": case "junction": return "f-circ"; case "lin-doc": case "lined-document": return "lin-doc"; case "lin-rect": case "lin-proc": case "lined-process": case "lined-rectangle": case "shaded-process": return "lin-rect"; case "notch-pent": case "loop-limit": case "notched-pentagon": return "notch-pent"; case "flip-tri": case "flipped-triangle": case "manual-file": return "flip-tri"; case "sl-rect": case "manual-input": case "sloped-rectangle": return "sl-rect"; case "docs": case "documents": case "st-doc": case "stacked-document": return "docs"; case "st-rect": case "processes": case "procs": case "stacked-rectangle": return "st-rect"; case "odd": return "asymmetric"; case "flag": case "paper-tape": return "flag"; case "bow-rect": case "bow-tie-rectangle": case "stored-data": return "bow-rect"; case "fr-circ": case "framed-circle": case "stop": return "fr-circ"; case "cross-circ": case "crossed-circle": case "summary": return "cross-circ"; case "tag-doc": case "tagged-document": return "tag-doc"; case "tag-rect": case "tag-proc": case "tagged-process": case "tagged-rectangle": return "tag-rect"; case "text": return "text"; case "diam": case "diamond": case "decision": case "question": return "decision"; case "rounded": case "round": return "round"; case "stadium": case "terminal": return "stadium"; case "subroutine": case "subprocess": case "subproc": case "fr-rect": return "subroutine"; case "cyl": case "cylinder": case "database": case "db": return "cylinder"; case "hex": case "hexagon": return "hexagon"; case "circle": return "circle"; case "dbl-circ": case "double-circle": return "doubleCircle"; case "lean-r": case "in-out": case "lean-right": return "parallelogram"; case "lean-l": case "lean-left": case "out-in": return "parallelogramAlt"; case "trap-b": case "priority": case "trapezoid": case "trapezoid-bottom": return "trapezoid"; case "trap-t": case "inv-trapezoid": case "manual": case "trapezoid-top": return "trapezoidAlt"; default: return "rectangle"; } } function mapMindmapShape(shape: string) { switch (shape) { case "rectangle": return "square"; case "round": case "circle": case "hexagon": return shape; default: return "default"; } } function sanitizeMindmapId(label: string, index: number) { let result = ""; for (const char of label) { if (isIdentifierPart(char)) result += char; else if (isWhitespace(char) && result && result[result.length - 1] !== "_") result += "_"; } result = result.trim(); return result || "mindmap_" + index; } function sanitizeDirectiveId(label: string) { let result = ""; for (const char of label) { if (isIdentifierPart(char)) result += char; else if (isWhitespace(char) && result && result[result.length - 1] !== "_") result += "_"; } return result || "subgraph"; } function getDefaultMindmapNodeSize(shape: string) { switch (shape) { case "circle": case "bang": return { width: 88, height: 88 }; case "hexagon": return { width: 150, height: 58 }; default: return { width: 150, height: 44 }; } } function getDefaultRequirementNodeSize(node: ParsedRequirementNode) { if (node.kind === "element") return { width: 170, height: node.docRef ? 108 : 84 }; return { width: 220, height: 160 }; } function getDefaultNodeSize(shape: string) { switch (shape) { case "decision": return { width: 120, height: 80 }; case "circle": case "doubleCircle": case "fr-circ": case "cross-circ": case "f-circ": return { width: 80, height: 80 }; case "bang": return { width: 92, height: 92 }; case "fork": return { width: 140, height: 28 }; case "tri": case "flip-tri": return { width: 110, height: 90 }; case "brace": case "brace-r": case "braces": case "text": return { width: 140, height: 54 }; default: return { width: 120, height: 54 }; } } function getFallbackRequirementNodePosition(index: number, total: number, direction: FlowchartDirection) { const columns = direction === "LR" || direction === "RL" ? Math.max(1, Math.ceil(total / 3)) : 3; const column = index % columns; const row = Math.floor(index / columns); const left = 40 + column * 300; const top = 40 + row * 230; if (direction === "RL") return { left: 40 + (columns - column - 1) * 300, top }; if (direction === "BT") return { left, top: 40 + (Math.ceil(total / columns) - row - 1) * 230 }; return { left, top }; } function getFallbackFlowchartNodePosition(index: number, count: number, direction: FlowchartDirection) { const xStep = 180; const yStep = 110; switch (direction) { case "LR": return { left: 40 + index * xStep, top: 40 }; case "RL": return { left: 40 + (count - index - 1) * xStep, top: 40 }; case "BT": return { left: 40, top: 40 + (count - index - 1) * yStep }; case "TD": case "TB": default: return { left: 40, top: 40 + index * yStep }; } } function readMermaidDocument(text: string): ParsedMermaidDocument { const lines = getLineRecords(text); if (lines[0]?.trimmed !== "---") return { lines, title: "", frontmatter: "" }; let frontmatterEnd = -1; for (let i = 1; i < lines.length; i++) { if (lines[i].trimmed === "---") { frontmatterEnd = i; break; } } if (frontmatterEnd < 0) return { lines, title: "", frontmatter: "" }; const frontmatterLines = lines.slice(1, frontmatterEnd); return { lines: lines.filter((_, index) => index > frontmatterEnd), title: readFrontmatterTitle(frontmatterLines), frontmatter: readFrontmatterWithoutTitle(frontmatterLines), }; } function readFrontmatterTitle(lines: LineRecord[]) { for (const line of lines) { const separator = line.trimmed.indexOf(":"); if (separator < 0) continue; const key = line.trimmed.substring(0, separator).trim(); if (equalsIgnoreCase(key, "title")) return unquoteLabel(line.trimmed.substring(separator + 1).trim()); } return ""; } function readFrontmatterWithoutTitle(lines: LineRecord[]) { const remainingLines: string[] = []; for (let i = 0; i < lines.length; i++) { const line = lines[i]; const separator = line.trimmed.indexOf(":"); const key = separator >= 0 ? line.trimmed.substring(0, separator).trim() : ""; if (equalsIgnoreCase(key, "title")) continue; remainingLines.push(line.text); } return trimBlankLines(remainingLines).join("\n"); } function trimBlankLines(lines: string[]) { let start = 0; let end = lines.length; while (start < end && !lines[start].trim()) start++; while (end > start && !lines[end - 1].trim()) end--; return lines.slice(start, end); } function getLineRecords(text: string) { const records: LineRecord[] = []; let offset = 0; for (const line of splitLines(text)) { const leadingWhitespaceLength = countLeadingWhitespace(line); records.push({ text: line, trimmed: line.trim(), indent: leadingWhitespaceLength, start: offset + leadingWhitespaceLength }); offset += line.length + 1; } return records; } function splitLines(text: string) { const lines: string[] = []; let start = 0; for (let i = 0; i < text.length; i++) { if (text[i] === "\n") { let end = i; if (end > start && text[end - 1] === "\r") end--; lines.push(text.substring(start, end)); start = i + 1; } } lines.push(text.substring(start)); return lines; } function getDiagramDirection(designItems: IDesignItem[]) { const rootDesignItem = getRootDesignItem(designItems); const rootDirection = rootDesignItem?.getAttribute(mermaidFlowchartDirectionAttribute); if (isFlowchartDirection(rootDirection)) return rootDirection; for (const designItem of designItems) { const direction = designItem.element.getAttribute("diagram-direction"); if (isFlowchartDirection(direction)) return direction; } return inferDiagramDirection(designItems); } function inferDiagramDirection(designItems: IDesignItem[]): FlowchartDirection { const nodes = designItems .filter(designItem => designItem.element.localName === "mermaid-node") .map(designItem => { const element = designItem.element as HTMLElement; return { left: Number.parseFloat(element.style.left || "0"), top: Number.parseFloat(element.style.top || "0"), }; }); if (nodes.length < 2) return "TD"; const first = nodes[0]; const last = nodes[nodes.length - 1]; const dx = last.left - first.left; const dy = last.top - first.top; if (Math.abs(dx) > Math.abs(dy)) return dx >= 0 ? "LR" : "RL"; return dy >= 0 ? "TD" : "BT"; } function isFlowchartDirection(value: string): value is FlowchartDirection { return value === "TB" || value === "TD" || value === "BT" || value === "RL" || value === "LR"; } function isRequirementDirection(value: string): value is FlowchartDirection { return value === "TB" || value === "BT" || value === "RL" || value === "LR"; } function setMermaidDocumentAttributes(instanceServiceContainer: InstanceServiceContainer, diagramType: MermaidDocumentDiagramType, direction?: FlowchartDirection, title?: string, frontmatter?: string) { const rootDesignItem = instanceServiceContainer?.designerCanvas?.rootDesignItem; rootDesignItem?._withoutUndoSetAttribute(mermaidDiagramTypeAttribute, diagramType); if (direction) rootDesignItem?._withoutUndoSetAttribute(mermaidFlowchartDirectionAttribute, direction); else rootDesignItem?._withoutUndoRemoveAttribute(mermaidFlowchartDirectionAttribute); if (title) rootDesignItem?._withoutUndoSetAttribute(mermaidTitleAttribute, title); else rootDesignItem?._withoutUndoRemoveAttribute(mermaidTitleAttribute); if (frontmatter) rootDesignItem?._withoutUndoSetAttribute(mermaidFrontmatterAttribute, frontmatter); else rootDesignItem?._withoutUndoRemoveAttribute(mermaidFrontmatterAttribute); } function writeMermaidFrontmatter(textWriter: ITextWriter, designItems: IDesignItem[], rootDesignItem?: IDesignItem) { const root = rootDesignItem ?? getRootDesignItem(designItems); const title = getMermaidDocumentTitle(root); const frontmatter = getMermaidDocumentFrontmatter(root); if (!title && !frontmatter) return; textWriter.writeLine("---"); if (title) textWriter.writeLine("title: " + title); if (frontmatter) { for (const line of splitLines(frontmatter)) textWriter.writeLine(line); } textWriter.writeLine("---"); } function getWritableDocumentDiagramType(designItems: IDesignItem[]): MermaidDocumentDiagramType { const hasSequenceItems = designItems.some(designItem => designItem.element.localName === MermaidSequenceParticipant.is || designItem.element.localName === MermaidSequenceMessage.is); const hasFlowchartItems = designItems.some(designItem => designItem.element.localName === MermaidNode.is || designItem.element.localName === MermaidEdge.is); const hasMindmapItems = designItems.some(designItem => designItem.element.localName === MermaidMindmapNode.is); const hasRequirementItems = designItems.some(designItem => designItem.element.localName === MermaidRequirementNode.is || designItem.element.localName === MermaidRequirementRelationship.is); const rootDesignItem = getRootDesignItem(designItems); const documentType = rootDesignItem ? getMermaidDocumentDiagramType(rootDesignItem) : null; if (documentType === "requirementDiagram" && !hasFlowchartItems && !hasSequenceItems && !hasMindmapItems) return "requirementDiagram"; if (documentType === "mindmap" && !hasFlowchartItems && !hasSequenceItems && !hasRequirementItems) return "mindmap"; if (documentType === "sequenceDiagram" && !hasFlowchartItems && !hasMindmapItems && !hasRequirementItems) return "sequenceDiagram"; if (documentType === "flowchart" && !hasSequenceItems && !hasMindmapItems && !hasRequirementItems) return "flowchart"; if (hasRequirementItems) return "requirementDiagram"; if (hasMindmapItems) return "mindmap"; if (hasSequenceItems) return "sequenceDiagram"; return "flowchart"; } function getRootDesignItem(designItems: IDesignItem[]) { return designItems[0]?.isRootItem ? designItems[0] : designItems[0]?.instanceServiceContainer?.designerCanvas?.rootDesignItem; } function getMermaidDesignItems(designItems: IDesignItem[]) { if (designItems[0]?.isRootItem) return Array.from(designItems[0].children()); return designItems; } function getMindmapSortValue(designItem: IDesignItem) { const element = designItem.element as HTMLElement; const top = Number.parseFloat(element.style.top || "0"); const left = Number.parseFloat(element.style.left || "0"); return top * 10000 + left; } function sortMindmapItems(items: IDesignItem[]) { return [...items].sort((a, b) => getMindmapSortValue(a) - getMindmapSortValue(b)); } function repeatText(value: string, count: number) { let result = ""; for (let i = 0; i < count; i++) result += value; return result; } function writeDesignItemLine(textWriter: ITextWriter, designItem: IDesignItem, line: string, updatePositions?: boolean) { const start = textWriter.position; line = indentEmbeddedNewlines(line); textWriter.writeLine(line); if (updatePositions) designItem.instanceServiceContainer.designItemDocumentPositionService?.setPosition(designItem, { start, length: line.length }); } function indentEmbeddedNewlines(line: string) { const newlineIndex = line.indexOf("\n"); if (newlineIndex < 0) return line; const indent = line.substring(0, countLeadingWhitespace(line)); return line.replaceAll("\n", "\n" + indent); } async function getMermaidLayout(code: string, nodes: Map) { if (typeof document === "undefined" || typeof DOMParser === "undefined") return null; try { const mermaid = await import("mermaid"); const id = "mermaid-layout-" + Math.random().toString(36).slice(2); mermaid.default.initialize({ startOnLoad: false, securityLevel: "strict" }); const result = await mermaid.default.render(id, code); const doc = new DOMParser().parseFromString(result.svg, "image/svg+xml"); const layoutNodes = new Map(); const layoutSubgraphs = new Map(); let minX = Number.POSITIVE_INFINITY; let minY = Number.POSITIVE_INFINITY; for (const nodeElement of Array.from(doc.querySelectorAll("g.node"))) { const nodeId = nodeElement.getAttribute("data-id") ?? getFlowchartNodeIdFromDomId(nodeElement.id); if (!nodeId || !nodes.has(nodeId)) continue; const center = parseTranslate(nodeElement.getAttribute("transform")); const size = getSvgNodeSize(nodeElement); const layout = { x: center.x - size.width / 2, y: center.y - size.height / 2, width: size.width, height: size.height, }; layoutNodes.set(nodeId, layout); minX = Math.min(minX, layout.x); minY = Math.min(minY, layout.y); } for (const clusterElement of Array.from(doc.querySelectorAll("g.cluster"))) { const clusterId = getClusterIdFromDomId(clusterElement.id, id); if (!clusterId) continue; const rect = clusterElement.querySelector("rect"); if (!rect) continue; const translate = parseTranslate(clusterElement.getAttribute("transform")); const x = (Number.parseFloat(rect.getAttribute("x") ?? "0") || 0) + translate.x; const y = (Number.parseFloat(rect.getAttribute("y") ?? "0") || 0) + translate.y; const width = Number.parseFloat(rect.getAttribute("width") ?? ""); const height = Number.parseFloat(rect.getAttribute("height") ?? ""); if (!Number.isFinite(width) || !Number.isFinite(height)) continue; const layout = { x, y, width, height }; layoutSubgraphs.set(clusterId, layout); minX = Math.min(minX, layout.x); minY = Math.min(minY, layout.y); } if (!layoutNodes.size && !layoutSubgraphs.size) return null; const offsetX = 40 - minX; const offsetY = 40 - minY; for (const layout of layoutNodes.values()) { layout.x += offsetX; layout.y += offsetY; } for (const layout of layoutSubgraphs.values()) { layout.x += offsetX; layout.y += offsetY; } return { nodes: layoutNodes, subgraphs: layoutSubgraphs }; } catch { return null; } } async function getMermaidRequirementLayout(code: string, nodes: Map) { if (typeof document === "undefined" || typeof DOMParser === "undefined") return null; try { const mermaid = await import("mermaid"); const id = "mermaid-requirement-layout-" + Math.random().toString(36).slice(2); mermaid.default.initialize({ startOnLoad: false, securityLevel: "strict" }); const result = await mermaid.default.render(id, code); const doc = new DOMParser().parseFromString(result.svg, "image/svg+xml"); const layoutNodes = new Map(); let minX = Number.POSITIVE_INFINITY; let minY = Number.POSITIVE_INFINITY; for (const nodeElement of Array.from(doc.querySelectorAll("g.node"))) { const nodeId = getRequirementNodeIdFromSvgId(nodeElement.id, id, nodes); const node = nodeId ? nodes.get(nodeId) : null; if (!node) continue; const center = parseTranslate(nodeElement.getAttribute("transform")); const size = getDefaultRequirementNodeSize(node); const layout = { x: center.x - size.width / 2, y: center.y - size.height / 2, width: size.width, height: size.height, }; layoutNodes.set(nodeId, layout); minX = Math.min(minX, layout.x); minY = Math.min(minY, layout.y); } if (!layoutNodes.size) return null; const offsetX = 40 - minX; const offsetY = 40 - minY; for (const layout of layoutNodes.values()) { layout.x += offsetX; layout.y += offsetY; } return { nodes: layoutNodes }; } catch { return null; } } async function getMermaidMindmapLayout(code: string, nodes: ParsedMindmapNode[]) { if (typeof document === "undefined" || typeof DOMParser === "undefined") return null; try { const mermaid = await import("mermaid"); const id = "mermaid-mindmap-layout-" + Math.random().toString(36).slice(2); mermaid.default.initialize({ startOnLoad: false, securityLevel: "strict" }); const result = await mermaid.default.render(id, code); const doc = new DOMParser().parseFromString(result.svg, "image/svg+xml"); const layoutNodes = new Map(); const candidateElements = Array.from(doc.querySelectorAll("g.node.mindmap-node")); let minX = Number.POSITIVE_INFINITY; let minY = Number.POSITIVE_INFINITY; let nextNodeIndex = 0; for (const nodeElement of candidateElements) { if (nextNodeIndex >= nodes.length) break; if (!nodeElement.querySelector("text, foreignObject")) continue; const node = nodes[nextNodeIndex++]; const center = parseTranslateFromElementTree(nodeElement); const size = getMindmapWidgetSize(getSvgNodeSize(nodeElement), node.shape); const layout = { x: center.x - size.width / 2, y: center.y - size.height / 2, width: size.width, height: size.height, }; layoutNodes.set(node.id, layout); minX = Math.min(minX, layout.x); minY = Math.min(minY, layout.y); } if (!layoutNodes.size) return null; const offsetX = 40 - minX; const offsetY = 40 - minY; for (const layout of layoutNodes.values()) { layout.x += offsetX; layout.y += offsetY; } return { nodes: layoutNodes }; } catch { return null; } } function parseTranslateFromElementTree(element: Element) { let x = 0; let y = 0; let current: Element = element; while (current) { const translate = parseTranslate(current.getAttribute("transform")); x += translate.x; y += translate.y; current = current.parentElement; } return { x, y }; } function parseTranslate(transform: string) { const values = parseTranslateValues(transform); return { x: values.x, y: values.y, }; } function getFlowchartNodeIdFromDomId(domId: string) { const prefix = "flowchart-"; if (!domId?.startsWith(prefix)) return ""; const withoutPrefix = domId.substring(prefix.length); const lastDash = withoutPrefix.lastIndexOf("-"); if (lastDash < 0) return withoutPrefix; const suffix = withoutPrefix.substring(lastDash + 1); return isAllDigits(suffix) ? withoutPrefix.substring(0, lastDash) : withoutPrefix; } function getRequirementNodeIdFromSvgId(svgId: string, renderId: string, nodes: Map) { if (!svgId) return ""; const prefix = renderId + "-"; if (svgId.startsWith(prefix)) { const id = svgId.substring(prefix.length); if (nodes.has(id)) return id; } let match = ""; for (const id of nodes.keys()) { if (svgId.endsWith("-" + id) && id.length > match.length) match = id; } return match; } function getClusterIdFromDomId(domId: string, renderId: string) { if (!domId) return ""; const prefixes = [renderId + "_flowchart-", "flowchart-", renderId + "-", "cluster-"]; for (const prefix of prefixes) { if (domId.startsWith(prefix)) return domId.substring(prefix.length); } return domId; } function parseTranslateValues(transform: string) { const result = { x: 0, y: 0 }; if (!transform) return result; const name = "translate("; const start = transform.indexOf(name); if (start < 0) return result; const end = transform.indexOf(")", start + name.length); if (end < 0) return result; const content = transform.substring(start + name.length, end).trim(); const separator = content.includes(",") ? content.indexOf(",") : content.indexOf(" "); if (separator < 0) return result; result.x = Number.parseFloat(content.substring(0, separator).trim()) || 0; result.y = Number.parseFloat(content.substring(separator + 1).trim()) || 0; return result; } function findTopLevelColon(text: string) { let quote = ""; for (let i = 0; i < text.length; i++) { const char = text[i]; if (quote) { if (char === quote) quote = ""; continue; } if (char === "\"" || char === "'") { quote = char; continue; } if (char === ":") return i; } return -1; } function isRequirementType(value: string) { return equalsIgnoreCase(value, "requirement") || equalsIgnoreCase(value, "functionalRequirement") || equalsIgnoreCase(value, "interfaceRequirement") || equalsIgnoreCase(value, "performanceRequirement") || equalsIgnoreCase(value, "physicalRequirement") || equalsIgnoreCase(value, "designConstraint"); } function isRequirementRelationshipType(value: string) { return equalsIgnoreCase(value, "contains") || equalsIgnoreCase(value, "copies") || equalsIgnoreCase(value, "derives") || equalsIgnoreCase(value, "satisfies") || equalsIgnoreCase(value, "verifies") || equalsIgnoreCase(value, "refines") || equalsIgnoreCase(value, "traces"); } function isAllDigits(value: string) { if (!value) return false; for (const char of value) { if (!isAsciiDigit(char)) return false; } return true; } function getSvgNodeSize(nodeElement: Element) { const foreignObject = nodeElement.querySelector("foreignObject"); if (foreignObject) { const width = Number.parseFloat(foreignObject.getAttribute("width") ?? ""); const height = Number.parseFloat(foreignObject.getAttribute("height") ?? ""); if (Number.isFinite(width) && Number.isFinite(height)) return { width, height }; } const rect = nodeElement.querySelector("rect"); if (rect) { const width = Number.parseFloat(rect.getAttribute("width") ?? ""); const height = Number.parseFloat(rect.getAttribute("height") ?? ""); if (Number.isFinite(width) && Number.isFinite(height)) return { width, height }; } const polygon = nodeElement.querySelector("polygon"); if (polygon) { const points = splitWhitespace(polygon.getAttribute("points") ?? "").map(point => { const [x, y] = point.split(",").map(Number); return { x, y }; }).filter(point => Number.isFinite(point.x) && Number.isFinite(point.y)); if (points.length) { const xs = points.map(point => point.x); const ys = points.map(point => point.y); return { width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) }; } } return { width: 120, height: 54 }; } function getMindmapWidgetSize(svgSize: { width: number; height: number }, shape: string) { const defaultSize = getDefaultMindmapNodeSize(shape); return { width: Math.max(svgSize.width, defaultSize.width), height: Math.max(svgSize.height, defaultSize.height), }; } function splitWhitespace(text: string) { const parts: string[] = []; let start = -1; for (let i = 0; i < text.length; i++) { if (isWhitespace(text[i])) { if (start >= 0) { parts.push(text.substring(start, i)); start = -1; } } else if (start < 0) { start = i; } } if (start >= 0) parts.push(text.substring(start)); return parts; } ================================================ FILE: packages/web-component-designer-mermaid/src/services/MermaidPropertyGroupsService.ts ================================================ import { IDesignItem, IPropertiesService } from "@node-projects/web-component-designer"; import { MermaidDocumentPropertiesService } from "./MermaidDocumentPropertiesService.js"; export class MermaidPropertyGroupsService { private readonly _documentPropertiesService = new MermaidDocumentPropertiesService(); getPropertygroups(designItems: IDesignItem[]): { name: string; propertiesService: IPropertiesService; }[] { const designItem = designItems?.[0]; if (!designItem) return []; if (designItem.isRootItem) return [{ name: "mermaid", propertiesService: this._documentPropertiesService }]; const propertiesService = designItem.serviceContainer.getLastServiceWhere("propertyService", service => service.isHandledElement(designItem)); return propertiesService ? [{ name: "properties", propertiesService }] : []; } } ================================================ FILE: packages/web-component-designer-mermaid/src/services/mermaidGeometry.ts ================================================ export type Point = { x: number; y: number; } export type Rect = Point & { width: number; height: number; } export type FlowchartDirection = "TB" | "TD" | "BT" | "RL" | "LR"; export function encodeWaypoints(waypoints: Point[]) { return waypoints.map(point => `${Math.round(point.x)},${Math.round(point.y)}`).join(" "); } export function decodeWaypoints(value: string) { if (!value) return []; return value.split(/\s+/).map(part => { const [x, y] = part.split(",").map(Number); return { x, y }; }).filter(point => Number.isFinite(point.x) && Number.isFinite(point.y)); } export function boundsFromWaypoints(waypoints: Point[]) { const xs = waypoints.map(point => point.x); const ys = waypoints.map(point => point.y); const minX = Math.min(...xs); const maxX = Math.max(...xs); const minY = Math.min(...ys); const maxY = Math.max(...ys); return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }; } export function pathDataFromWaypoints(waypoints: Point[]) { if (!waypoints.length) return ""; return waypoints.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" "); } export function midpointFromWaypoints(waypoints: Point[]) { if (!waypoints.length) return { x: 0, y: 0 }; if (waypoints.length === 1) return waypoints[0]; const segmentLengths: number[] = []; let totalLength = 0; for (let i = 1; i < waypoints.length; i++) { const length = distance(waypoints[i - 1], waypoints[i]); segmentLengths.push(length); totalLength += length; } let remaining = totalLength / 2; for (let i = 1; i < waypoints.length; i++) { const segmentLength = segmentLengths[i - 1]; if (remaining <= segmentLength) { const ratio = segmentLength === 0 ? 0 : remaining / segmentLength; return { x: waypoints[i - 1].x + (waypoints[i].x - waypoints[i - 1].x) * ratio, y: waypoints[i - 1].y + (waypoints[i].y - waypoints[i - 1].y) * ratio, }; } remaining -= segmentLength; } return waypoints[waypoints.length - 1]; } export function routeBetweenBounds(source: Rect, target: Rect, direction?: FlowchartDirection) { const sourceCenter = center(source); const targetCenter = center(target); if (direction === "LR" || direction === "RL") return [getHorizontalAnchor(source, targetCenter), getHorizontalAnchor(target, sourceCenter)]; if (direction === "TD" || direction === "TB" || direction === "BT") return [getVerticalAnchor(source, targetCenter), getVerticalAnchor(target, sourceCenter)]; return [getAnchor(source, targetCenter), getAnchor(target, sourceCenter)]; } export function routeBetweenPoints(source: Point, target: Point) { return [source, target]; } export function getAnchor(rect: Rect, target: Point) { const c = center(rect); const dx = target.x - c.x; const dy = target.y - c.y; if (Math.abs(dx / rect.width) > Math.abs(dy / rect.height)) { return { x: dx >= 0 ? rect.x + rect.width : rect.x, y: c.y, }; } return { x: c.x, y: dy >= 0 ? rect.y + rect.height : rect.y, }; } function center(rect: Rect) { return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2, }; } function getHorizontalAnchor(rect: Rect, target: Point) { const c = center(rect); return { x: target.x >= c.x ? rect.x + rect.width : rect.x, y: c.y, }; } function getVerticalAnchor(rect: Rect, target: Point) { const c = center(rect); return { x: c.x, y: target.y >= c.y ? rect.y + rect.height : rect.y, }; } function distance(a: Point, b: Point) { return Math.hypot(b.x - a.x, b.y - a.y); } ================================================ FILE: packages/web-component-designer-mermaid/src/setupMermaidServiceContainer.ts ================================================ import { AbsolutePlacementService, AltToEnterContainerExtensionProvider, BaseCustomWebComponentPropertiesService, CopyPasteContextMenu, DefaultEditorTypeService, DefaultHtmlParserService, DefaultInstanceService, DefaultModelCommandService, DefaultPropertyEditorTypesService, DeletionService, DesignItemDocumentPositionService, DesignItemService, DragDropService, ElementAtPointService, ElementDragTitleExtensionProvider, ExtensionType, GrayOutDragOverContainerExtensionProvider, GrayOutExtensionProvider, HighlightElementExtensionProvider, IDesignerCanvas, ItemsBelowContextMenu, MagicWandSelectorTool, MultipleItemsSelectedContextMenu, NamedTools, PanTool, PointerTool, PointerToolButtonProvider, PositionExtensionProvider, RectangleSelectorTool, ResizeExtensionProvider, SelectionDefaultExtensionProvider, SelectionService, SelectorToolButtonProvider, SeperatorToolProvider, ServiceContainer, SimpleToolButtonProvider, SnaplinesProviderService, TransformToolButtonProvider, UndoService, ZMoveContextMenu, ZoomTool, ZoomToolButtonProvider } from "@node-projects/web-component-designer"; import { MermaidLayoutCopyPasteService } from "./services/MermaidLayoutCopyPasteService.js"; import { MermaidLayoutPlacementService } from "./services/MermaidLayoutPlacementService.js"; import { MermaidParserService } from "./services/MermaidParserService.js"; import { rerouteConnectedMermaidEdges } from "./services/MermaidConnectionRouting.js"; import { ConnectMermaidNodesTool, mermaidFlowIcon } from "./toolbar/ConnectMermaidNodesTool.js"; import { MermaidDemoView } from "./widgets/views/mermaid-demo-view.js"; import { MermaidPropertyGroupsService } from "./services/MermaidPropertyGroupsService.js"; import { MermaidElementsService } from "./services/MermaidElementsService.js"; export function createMermaidDesignerServiceContainer() { const serviceContainer = new ServiceContainer(); const parserService = new MermaidParserService(); const elementsService = new MermaidElementsService("mermaid", new URL("./widgets/elements.json", import.meta.url)); serviceContainer.register("instanceService", new DefaultInstanceService()); serviceContainer.register("containerService", new AbsolutePlacementService()); serviceContainer.register("containerService", new MermaidLayoutPlacementService()); serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService()); serviceContainer.register("htmlParserService", new DefaultHtmlParserService()); serviceContainer.register("htmlParserService", parserService); serviceContainer.register("htmlWriterService", parserService); serviceContainer.register("elementAtPointService", new ElementAtPointService()); serviceContainer.register("dragDropService", new DragDropService()); serviceContainer.register("copyPasteService", new MermaidLayoutCopyPasteService()); serviceContainer.register("modelCommandService", new DefaultModelCommandService()); serviceContainer.register("propertyEditorTypesService", new DefaultPropertyEditorTypesService()); serviceContainer.register("editorTypeService", new DefaultEditorTypeService()); serviceContainer.register("propertyGroupsService", new MermaidPropertyGroupsService()); serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService(true)); serviceContainer.register("designItemService", new DesignItemService()); serviceContainer.register("deletionService", new DeletionService()); serviceContainer.register("undoService", (designerCanvas: IDesignerCanvas) => new UndoService(designerCanvas)); serviceContainer.register("selectionService", (designerCanvas: IDesignerCanvas) => new SelectionService(designerCanvas, false)); serviceContainer.register("designItemDocumentPositionService", (designerCanvas: IDesignerCanvas) => new DesignItemDocumentPositionService(designerCanvas)); serviceContainer.instanceServiceContainerCreatedCallbacks.push(instanceServiceContainer => { const designerCanvas = instanceServiceContainer.designerCanvas; elementsService.setInstanceServiceContainer(instanceServiceContainer); instanceServiceContainer.selectionService.setSelectedElements([designerCanvas.rootDesignItem]); const previousRaiseDesignItemsChanged = designerCanvas.raiseDesignItemsChanged.bind(designerCanvas); designerCanvas.raiseDesignItemsChanged = (designItems, action, operationFinished) => { previousRaiseDesignItemsChanged(designItems, action, operationFinished); if (action === "place" || action === "resize") rerouteConnectedMermaidEdges(instanceServiceContainer, designItems, operationFinished); }; }); serviceContainer.designerExtensions.set(ExtensionType.Permanent, []); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [ new class extends ElementDragTitleExtensionProvider { override shouldExtend(extensionManager: any, designerView: any, designItem: any) { if (designItem.element?.localName === "mermaid-edge") return false; return super.shouldExtend(extensionManager, designerView, designItem); } }(), new class extends PositionExtensionProvider { override shouldExtend(extensionManager: any, designerView: any, designItem: any) { if (designItem.element?.localName === "mermaid-edge") return false; return super.shouldExtend(extensionManager, designerView, designItem); } }(), new class extends ResizeExtensionProvider { override shouldExtend(extensionManager: any, designerView: any, designItem: any) { if (designItem.element?.localName === "mermaid-edge") return false; return super.shouldExtend(extensionManager, designerView, designItem); } }(true) ]); serviceContainer.designerExtensions.set(ExtensionType.Selection, [ new SelectionDefaultExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, []); serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [ new HighlightElementExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [ new GrayOutExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOverAndCanBeEntered, [ new AltToEnterContainerExtensionProvider(), new GrayOutDragOverContainerExtensionProvider(), ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOverAndCanBeEntered, [ new GrayOutDragOverContainerExtensionProvider(), ]); serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool()); serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool()); serviceContainer.designerTools.set(NamedTools.Zoom, new ZoomTool()); serviceContainer.designerTools.set(NamedTools.Pan, new PanTool()); serviceContainer.designerTools.set(NamedTools.RectangleSelector, new RectangleSelectorTool()); serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool()); serviceContainer.designerTools.set("MermaidFlow", new ConnectMermaidNodesTool()); serviceContainer.designerContextMenuExtensions = [ new CopyPasteContextMenu(), new ZMoveContextMenu(), new MultipleItemsSelectedContextMenu(), new ItemsBelowContextMenu() ]; serviceContainer.designViewToolbarButtons.push( new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new SimpleToolButtonProvider("MermaidFlow", mermaidFlowIcon), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider() ); serviceContainer.config.demoViewWidget = MermaidDemoView; serviceContainer.register("elementsService", elementsService); return serviceContainer; } ================================================ FILE: packages/web-component-designer-mermaid/src/toolbar/ConnectMermaidNodesTool.ts ================================================ import { DesignItem, EventNames, IDesignerCanvas, InsertAction, ITool, OverlayLayer, ServiceContainer } from "@node-projects/web-component-designer"; import { encodeWaypoints, FlowchartDirection, getAnchor, Rect, routeBetweenBounds, routeBetweenPoints, pathDataFromWaypoints } from "../services/mermaidGeometry.js"; import { MermaidNode } from "../widgets/mermaid-node.js"; import { MermaidRequirementNode } from "../widgets/mermaid-requirement-node.js"; import { getMermaidDocumentDiagramType } from "../services/MermaidDocumentPropertiesService.js"; function createIcon(markup: string) { return `data:image/svg+xml,${encodeURIComponent(`${markup}`)}`; } function findNode(event: PointerEvent, currentElement: Element | null | undefined) { if (currentElement instanceof HTMLElement && isConnectableNode(currentElement)) return currentElement; for (const part of event.composedPath()) { if (part instanceof HTMLElement && isConnectableNode(part)) return part; } return null; } function isConnectableNode(element: HTMLElement) { return element.localName === MermaidNode.is || element.localName === MermaidRequirementNode.is; } function getElementBounds(designerCanvas: IDesignerCanvas, element: HTMLElement): Rect { const canvasRect = designerCanvas.canvas.getBoundingClientRect(); const elementRect = element.getBoundingClientRect(); const zoom = designerCanvas.zoomFactor ?? 1; return { x: (elementRect.left - canvasRect.left) / zoom, y: (elementRect.top - canvasRect.top) / zoom, width: elementRect.width / zoom, height: elementRect.height / zoom, }; } function getNodeId(element: HTMLElement) { if (element.localName === MermaidRequirementNode.is) { let id = element.getAttribute("label"); if (!id) { id = `Req_${Math.random().toString(36).slice(2, 8)}`; element.setAttribute("label", id); } return id; } let id = element.getAttribute("node-id"); if (!id) { id = `Node_${Math.random().toString(36).slice(2, 8)}`; element.setAttribute("node-id", id); } return id; } export const mermaidFlowIcon = createIcon(''); export class ConnectMermaidNodesTool implements ITool { readonly cursor = "crosshair"; private _captureElement?: Element; private _pointerId?: number; private _previewPath?: SVGPathElement; private _sourceElement?: HTMLElement; private _sourceBounds?: Rect; activated(_serviceContainer: ServiceContainer) { } dispose() { } pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { switch (event.type) { case EventNames.PointerDown: this._begin(designerCanvas, event, currentElement); break; case EventNames.PointerMove: this._update(designerCanvas, event, currentElement); break; case EventNames.PointerUp: this._finish(designerCanvas, event, currentElement); break; } } keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent) { if (event.key === "Escape") this._cleanup(designerCanvas, true); } private _begin(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { const source = findNode(event, currentElement); if (!source) return; this._sourceElement = source; this._sourceBounds = getElementBounds(designerCanvas, source); this._captureElement = event.target as Element; this._pointerId = event.pointerId; this._captureElement?.setPointerCapture?.(this._pointerId); designerCanvas.captureActiveTool(this); this._previewPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); this._previewPath.setAttribute("fill", "none"); this._previewPath.setAttribute("stroke", "#333"); this._previewPath.setAttribute("stroke-width", "2.5"); designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._previewPath, OverlayLayer.Foreground); this._update(designerCanvas, event, currentElement); event.preventDefault(); event.stopPropagation(); } private _update(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { if (!this._sourceBounds || !this._previewPath) return; const pointer = designerCanvas.getNormalizedEventCoordinates(event); const target = findNode(event, currentElement); const direction = this._getDirection(); const waypoints = target && target !== this._sourceElement ? routeBetweenBounds(this._sourceBounds, getElementBounds(designerCanvas, target), direction) : routeBetweenPoints(getAnchor(this._sourceBounds, pointer), pointer); this._previewPath.setAttribute("d", pathDataFromWaypoints(waypoints)); event.preventDefault(); event.stopPropagation(); } private _finish(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) { if (!this._sourceElement || !this._sourceBounds) return; const target = findNode(event, currentElement); if (!target || target === this._sourceElement) { this._cleanup(designerCanvas, true); event.preventDefault(); event.stopPropagation(); return; } const direction = this._getDirection(target); const waypoints = routeBetweenBounds(this._sourceBounds, getElementBounds(designerCanvas, target), direction); const edge = document.createElement(this._getRelationshipTag(designerCanvas)) as HTMLElement; edge.style.position = "absolute"; edge.style.zIndex = "4"; edge.setAttribute("from", getNodeId(this._sourceElement)); edge.setAttribute("to", getNodeId(target)); if (edge.localName === "mermaid-edge") edge.setAttribute("edge-type", "arrow"); else edge.setAttribute("relationship-type", "satisfies"); if (direction && edge.localName === "mermaid-edge") edge.setAttribute("diagram-direction", direction); edge.setAttribute("waypoints", encodeWaypoints(waypoints)); const designItem = DesignItem.createDesignItemFromInstance(edge, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); designerCanvas.instanceServiceContainer.undoService.execute( new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, designItem) ); this._cleanup(designerCanvas, true); event.preventDefault(); event.stopPropagation(); } private _cleanup(designerCanvas: IDesignerCanvas, finished: boolean) { if (this._previewPath) { designerCanvas.overlayLayer.removeOverlay(this._previewPath); this._previewPath = undefined; } if (this._captureElement && this._pointerId !== undefined) this._captureElement.releasePointerCapture?.(this._pointerId); this._captureElement = undefined; this._pointerId = undefined; this._sourceElement = undefined; this._sourceBounds = undefined; designerCanvas.releaseActiveTool(); if (finished) designerCanvas.serviceContainer.globalContext.finishedWithTool(this); } private _getDirection(target?: HTMLElement): FlowchartDirection { const direction = this._sourceElement?.getAttribute("diagram-direction") ?? target?.getAttribute("diagram-direction"); if (direction === "TB" || direction === "TD" || direction === "BT" || direction === "RL" || direction === "LR") return direction; return undefined; } private _getRelationshipTag(designerCanvas: IDesignerCanvas) { return getMermaidDocumentDiagramType(designerCanvas.rootDesignItem) === "requirementDiagram" ? "mermaid-requirement-relationship" : "mermaid-edge"; } } ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/elements.json ================================================ { "elements": [ { "name": "node", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "120px", "defaultHeight": "54px", "defaultAttributes": { "node-id": "A", "label": "Node", "shape": "rectangle" } }, { "name": "decision", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "120px", "defaultHeight": "80px", "defaultAttributes": { "node-id": "Decision", "label": "Decision", "shape": "decision" } }, { "name": "subgraph", "tag": "mermaid-subgraph", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "360px", "defaultHeight": "240px", "defaultAttributes": { "subgraph-id": "Group", "title": "Group" } }, { "name": "document", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "140px", "defaultHeight": "64px", "defaultAttributes": { "node-id": "Document", "label": "Document", "shape": "doc" } }, { "name": "database", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "120px", "defaultHeight": "64px", "defaultAttributes": { "node-id": "Database", "label": "Database", "shape": "cylinder" } }, { "name": "cloud", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "140px", "defaultHeight": "64px", "defaultAttributes": { "node-id": "Cloud", "label": "Cloud", "shape": "cloud" } }, { "name": "junction", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "80px", "defaultHeight": "80px", "defaultAttributes": { "node-id": "Junction", "label": "", "shape": "f-circ" } }, { "name": "fork/join", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "140px", "defaultHeight": "28px", "defaultAttributes": { "node-id": "Fork", "label": "", "shape": "fork" } }, { "name": "manual input", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "140px", "defaultHeight": "60px", "defaultAttributes": { "node-id": "ManualInput", "label": "Manual Input", "shape": "sl-rect" } }, { "name": "data store", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "140px", "defaultHeight": "60px", "defaultAttributes": { "node-id": "DataStore", "label": "Data Store", "shape": "datastore" } }, { "name": "text block", "tag": "mermaid-node", "type": "polymer", "diagramTypes": ["flowchart"], "defaultWidth": "140px", "defaultHeight": "54px", "defaultAttributes": { "node-id": "Text", "label": "Text", "shape": "text" } }, { "name": "mindmap node", "tag": "mermaid-mindmap-node", "type": "polymer", "diagramTypes": ["mindmap"], "defaultWidth": "150px", "defaultHeight": "44px", "defaultAttributes": { "mindmap-id": "Node", "label": "Node", "shape": "default" } }, { "name": "sequence participant", "tag": "mermaid-sequence-participant", "type": "polymer", "diagramTypes": ["sequenceDiagram"], "defaultWidth": "140px", "defaultHeight": "44px", "defaultAttributes": { "participant-id": "Alice", "label": "Alice", "participant-type": "participant" } }, { "name": "sequence actor", "tag": "mermaid-sequence-participant", "type": "polymer", "diagramTypes": ["sequenceDiagram"], "defaultWidth": "140px", "defaultHeight": "44px", "defaultAttributes": { "participant-id": "Actor", "label": "Actor", "participant-type": "actor" } }, { "name": "sequence message", "tag": "mermaid-sequence-message", "type": "polymer", "diagramTypes": ["sequenceDiagram"], "defaultWidth": "220px", "defaultHeight": "36px", "defaultAttributes": { "from": "Alice", "to": "Bob", "label": "Message", "message-type": "solid", "connector": "->>" } }, { "name": "requirement", "tag": "mermaid-requirement-node", "type": "polymer", "diagramTypes": ["requirementDiagram"], "defaultWidth": "220px", "defaultHeight": "160px", "defaultAttributes": { "node-kind": "requirement", "label": "Req", "requirement-type": "requirement", "requirement-id": "1", "text": "Requirement text", "risk": "low", "verify-method": "test" } }, { "name": "element", "tag": "mermaid-requirement-node", "type": "polymer", "diagramTypes": ["requirementDiagram"], "defaultWidth": "170px", "defaultHeight": "84px", "defaultAttributes": { "node-kind": "element", "label": "Element", "element-type": "simulation" } } ] } ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-edge.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { boundsFromWaypoints, decodeWaypoints, midpointFromWaypoints, pathDataFromWaypoints } from "../services/mermaidGeometry.js"; import { escapeLabel, sanitizeId } from "./mermaid-node.js"; enum MermaidEdgeType { arrow = "arrow", open = "open", dotted = "dotted", thick = "thick", invisible = "invisible", circle = "circle", cross = "cross", multi = "multi", } export class MermaidEdge extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` * { box-sizing: border-box; } :host { display: block; overflow: visible; pointer-events: auto; position: absolute; z-index: 4; } svg { height: 100%; overflow: visible; width: 100%; } path { fill: none; stroke: #333; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; vector-effect: non-scaling-stroke; } #marker-shape { fill: #333; } text { fill: #333; font-family: Arial, sans-serif; font-size: 12px; pointer-events: none; } `; static override readonly template = html` `; static readonly is = "mermaid-edge"; public from: string = "A"; public to: string = "B"; public label: string = ""; public edgeType: MermaidEdgeType = MermaidEdgeType.arrow; public connector: string = "-->"; public edgeId: string = ""; public animation: string = ""; public waypoints: string = ""; private _previewWaypoints: string; private _label: SVGTextElement; private _path: SVGPathElement; private _svg: SVGSVGElement; static readonly properties = { from: String, to: String, label: String, edgeType: MermaidEdgeType, connector: String, edgeId: String, animation: String, waypoints: String, } constructor() { super(); this._restoreCachedInititalValues(); this._label = this._getDomElement("label"); this._path = this._getDomElement("path"); this._svg = this._getDomElement("svg"); } async ready() { this._parseAttributesToProperties(); this._render(); } attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (oldValue !== newValue) { this._parseAttributesToProperties(); this._render(); } } public setPreviewWaypoints(waypoints: string | null) { this._previewWaypoints = waypoints; this._render(); } private _render() { let waypoints = decodeWaypoints(this._previewWaypoints ?? this.getAttribute("waypoints") ?? this.waypoints); if (waypoints.length < 2) waypoints = [{ x: 0, y: 12 }, { x: 180, y: 12 }]; const padding = 16; const minCrossAxisSize = 24; const bounds = boundsFromWaypoints(waypoints); const width = Math.max(minCrossAxisSize, Math.round(bounds.width + padding * 2)); const height = Math.max(minCrossAxisSize, Math.round(bounds.height + padding * 2)); const offsetX = (width - bounds.width) / 2; const offsetY = (height - bounds.height) / 2; this.style.left = `${Math.round(bounds.x - offsetX)}px`; this.style.top = `${Math.round(bounds.y - offsetY)}px`; this.style.width = `${width}px`; this.style.height = `${height}px`; const shifted = waypoints.map(point => ({ x: point.x - bounds.x + offsetX, y: point.y - bounds.y + offsetY })); const middle = midpointFromWaypoints(shifted); this._svg.setAttribute("viewBox", `0 0 ${width} ${height}`); this._path.setAttribute("d", pathDataFromWaypoints(shifted)); const edgeType = this.getAttribute("edge-type") as MermaidEdgeType ?? this.edgeType; const connector = this.getAttribute("connector") ?? this.connector; const label = this.getAttribute("label") ?? this.label ?? ""; this._path.setAttribute("marker-start", connector.startsWith("<") || edgeType === MermaidEdgeType.multi ? "url(#marker-start)" : ""); this._path.setAttribute("marker-end", getMarkerEnd(edgeType, connector)); this._path.style.strokeDasharray = edgeType === MermaidEdgeType.dotted ? "4 4" : ""; this._path.style.strokeWidth = edgeType === MermaidEdgeType.thick ? "4" : "2.5"; this._path.style.opacity = edgeType === MermaidEdgeType.invisible ? "0" : ""; this._label.textContent = label; this._label.style.display = label ? "block" : "none"; this._label.setAttribute("x", middle.x.toString()); this._label.setAttribute("y", (middle.y - 8).toString()); this._label.setAttribute("text-anchor", "middle"); } public createMermaid() { const from = sanitizeId(this.getAttribute("from") ?? this.from); const to = sanitizeId(this.getAttribute("to") ?? this.to); const label = this.getAttribute("label") ?? this.label; const explicitConnector = this.getAttribute("connector") ?? this.connector; const connector = explicitConnector ? { plain: explicitConnector, label: explicitConnector } : getConnector(this.getAttribute("edge-type") as MermaidEdgeType ?? this.edgeType); const rawEdgeId = this.getAttribute("edge-id") ?? this.edgeId; const edgeId = rawEdgeId ? sanitizeId(rawEdgeId) : ""; const prefix = edgeId ? edgeId + "@" : ""; if (label) return `${from} ${prefix}${connector.label}|${escapeLabel(label)}| ${to}`; return `${from} ${prefix}${connector.plain} ${to}`; } } function getMarkerEnd(edgeType: MermaidEdgeType, connector: string) { if (edgeType === MermaidEdgeType.open || edgeType === MermaidEdgeType.invisible || connector.endsWith("---") || connector.endsWith("===") || connector.endsWith("-.-")) return ""; if (edgeType === MermaidEdgeType.circle || connector.includes("o")) return "url(#circle-marker)"; if (edgeType === MermaidEdgeType.cross || connector.includes("x")) return "url(#cross-marker)"; return "url(#marker)"; } function getConnector(edgeType: MermaidEdgeType) { switch (edgeType) { case MermaidEdgeType.open: return { plain: "---", label: "---" }; case MermaidEdgeType.dotted: return { plain: "-.->", label: "-.->" }; case MermaidEdgeType.thick: return { plain: "==>", label: "==>" }; case MermaidEdgeType.invisible: return { plain: "~~~", label: "~~~" }; case MermaidEdgeType.circle: return { plain: "--o", label: "--o" }; case MermaidEdgeType.cross: return { plain: "--x", label: "--x" }; case MermaidEdgeType.multi: return { plain: "<-->", label: "<-->" }; default: return { plain: "-->", label: "-->" }; } } customElements.define(MermaidEdge.is, MermaidEdge); ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-flowchart-directive.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; export class MermaidFlowchartDirective extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` :host { background: #fffbe6; border: 1px solid #d6b656; color: #6b5600; display: block; font-family: Arial, sans-serif; font-size: 11px; overflow: hidden; padding: 4px 6px; text-overflow: ellipsis; white-space: nowrap; } `; static override readonly template = html``; static readonly is = "mermaid-flowchart-directive"; public line: string = ""; private _text: HTMLSpanElement; static readonly properties = { line: String, } constructor() { super(); this._restoreCachedInititalValues(); this._text = this._getDomElement("text"); } async ready() { this._parseAttributesToProperties(); this._render(); } attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (oldValue !== newValue) { this._parseAttributesToProperties(); this._render(); } } private _render() { this._text.textContent = this.getAttribute("line") ?? this.line; } public createMermaid() { return this.getAttribute("line") ?? this.line; } } customElements.define(MermaidFlowchartDirective.is, MermaidFlowchartDirective); ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-mindmap-node.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { formatMermaidLabel, renderMarkdownLabel, sanitizeId } from "./mermaid-node.js"; enum MermaidMindmapNodeShape { default = "default", square = "square", round = "round", circle = "circle", bang = "bang", cloud = "cloud", hexagon = "hexagon", } export class MermaidMindmapNode extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` * { box-sizing: border-box; } :host { display: block; overflow: visible; } #connections { height: 100%; left: 0; overflow: visible; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 0; } #node { align-items: center; background: white; border: 2px solid #333; color: #111; display: flex; font-family: Arial, sans-serif; font-size: 14px; height: 100%; justify-content: center; min-height: 34px; min-width: 84px; overflow: hidden; padding: 6px 12px; pointer-events: none; position: relative; text-align: center; width: 100%; z-index: 1; } ::slotted(mermaid-mindmap-node) { z-index: 1; } #node[data-shape="circle"] { border-radius: 50%; } #node[data-shape="round"] { border-radius: 12px; } #node[data-shape="bang"] { clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%); padding: 16px; } #node[data-shape="cloud"] { border-radius: 999px; box-shadow: 12px 0 0 -2px white, 13px 0 0 0 #333, -12px 0 0 -2px white, -13px 0 0 0 #333; } #node[data-shape="hexagon"] { clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); padding: 8px 22px; } `; static override readonly template = html`
      `; static readonly is = "mermaid-mindmap-node"; public mindmapId: string = "Root"; public label: string = "Node"; public shape: MermaidMindmapNodeShape = MermaidMindmapNodeShape.default; private _node: HTMLDivElement; private _connections: SVGSVGElement; private _slot: HTMLSlotElement; private _childObserver = new MutationObserver(() => this._renderConnections()); private _resizeObserver = new ResizeObserver(() => this._renderConnections()); static readonly properties = { mindmapId: String, label: String, shape: MermaidMindmapNodeShape, } constructor() { super(); this._restoreCachedInititalValues(); this._node = this._getDomElement("node"); this._connections = this._getDomElement("connections"); this._slot = this._getDomElement("children"); } async ready() { this._parseAttributesToProperties(); this._render(); this._slot.addEventListener("slotchange", () => this._observeChildren()); this._resizeObserver.observe(this); this._observeChildren(); requestAnimationFrame(() => this._renderConnections()); } attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (oldValue !== newValue) { this._parseAttributesToProperties(); this._render(); } } private _render() { const label = this.getAttribute("label") ?? this.label ?? this.getAttribute("mindmap-id") ?? this.mindmapId; const shape = this.getAttribute("shape") as MermaidMindmapNodeShape ?? this.shape; renderMarkdownLabel(this._node, label); this._node.dataset.shape = shape; this._renderConnections(); } private _observeChildren() { this._childObserver.disconnect(); this._resizeObserver.disconnect(); this._resizeObserver.observe(this); for (const child of this._getMindmapChildren()) { this._childObserver.observe(child, { attributeFilter: ["style"], attributes: true }); this._resizeObserver.observe(child); } this._renderConnections(); } private _renderConnections() { this._connections.replaceChildren(); const children = this._getMindmapChildren(); if (!children.length) return; const hostWidth = this.offsetWidth; const hostHeight = this.offsetHeight; const source = { x: hostWidth / 2, y: hostHeight / 2 }; const strokeWidth = getConnectionStrokeWidth(this); for (const child of children) { const childLeft = Number.parseFloat(child.style.left || "0"); const childTop = Number.parseFloat(child.style.top || "0"); const childWidth = child.offsetWidth || Number.parseFloat(child.style.width || "0"); const childHeight = child.offsetHeight || Number.parseFloat(child.style.height || "0"); const target = { x: childLeft + childWidth / 2, y: childTop + childHeight / 2 }; const direction = target.x >= source.x ? 1 : -1; const start = { x: source.x + direction * hostWidth / 2, y: source.y }; const end = { x: target.x - direction * childWidth / 2, y: target.y }; const controlDistance = Math.max(24, Math.abs(end.x - start.x) * 0.45); const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", `M ${start.x} ${start.y} C ${start.x + direction * controlDistance} ${start.y}, ${end.x - direction * controlDistance} ${end.y}, ${end.x} ${end.y}`); path.setAttribute("fill", "none"); path.setAttribute("stroke", "#666"); path.setAttribute("stroke-linecap", "round"); path.setAttribute("stroke-width", strokeWidth.toString()); this._connections.appendChild(path); } } private _getMindmapChildren() { return this._slot.assignedElements().filter((element): element is MermaidMindmapNode => element.localName === MermaidMindmapNode.is); } public createMermaid() { const id = sanitizeId(this.getAttribute("mindmap-id") ?? this.mindmapId); const label = formatMermaidLabel((this.getAttribute("label") ?? this.label) || id); const shape = this.getAttribute("shape") as MermaidMindmapNodeShape ?? this.shape; switch (shape) { case MermaidMindmapNodeShape.square: return `${id}[${label}]`; case MermaidMindmapNodeShape.round: return `${id}(${label})`; case MermaidMindmapNodeShape.circle: return `${id}((${label}))`; case MermaidMindmapNodeShape.bang: return `${id}))${label}((`; case MermaidMindmapNodeShape.cloud: return `${id})${label}(`; case MermaidMindmapNodeShape.hexagon: return `${id}{{${label}}}`; default: return label; } } } customElements.define(MermaidMindmapNode.is, MermaidMindmapNode); function getConnectionStrokeWidth(element: Element) { let depth = 0; let current = element.parentElement; while (current) { if (current.localName === MermaidMindmapNode.is) depth++; current = current.parentElement; } return Math.max(1.5, 5 - depth * 1.2); } ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-node.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; enum MermaidNodeShape { rectangle = "rectangle", round = "round", stadium = "stadium", circle = "circle", decision = "decision", subroutine = "subroutine", cylinder = "cylinder", asymmetric = "asymmetric", hexagon = "hexagon", parallelogram = "parallelogram", parallelogramAlt = "parallelogramAlt", trapezoid = "trapezoid", trapezoidAlt = "trapezoidAlt", doubleCircle = "doubleCircle", bang = "bang", cloud = "cloud", hourglass = "hourglass", bolt = "bolt", brace = "brace", braceRight = "brace-r", braces = "braces", dataStore = "datastore", delay = "delay", horizontalCylinder = "h-cyl", linedCylinder = "lin-cyl", curvedTrapezoid = "curv-trap", dividedRectangle = "div-rect", document = "doc", triangle = "tri", fork = "fork", windowPane = "win-pane", filledCircle = "f-circ", linedDocument = "lin-doc", linedRectangle = "lin-rect", notchedPentagon = "notch-pent", flippedTriangle = "flip-tri", slopedRectangle = "sl-rect", stackedDocument = "docs", stackedRectangle = "st-rect", flag = "flag", bowTieRectangle = "bow-rect", framedCircle = "fr-circ", crossedCircle = "cross-circ", taggedDocument = "tag-doc", taggedRectangle = "tag-rect", text = "text", card = "notch-rect", } export class MermaidNode extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` * { box-sizing: border-box; } #node { align-items: center; background: white; border: 2px solid #333; color: #111; display: flex; font-family: Arial, sans-serif; font-size: 14px; height: 100%; justify-content: center; min-height: 32px; min-width: 64px; overflow: hidden; white-space: pre-line; padding: 6px 10px; pointer-events: none; text-align: center; width: 100%; } #node[data-shape="decision"] { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); padding: 10px 22px; } #node[data-shape="subroutine"] { box-shadow: inset 8px 0 0 white, inset 10px 0 0 #333, inset -8px 0 0 white, inset -10px 0 0 #333; } #node[data-shape="cylinder"] { border-radius: 50% / 14%; } #node[data-shape="asymmetric"] { clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); } #node[data-shape="hexagon"] { clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); } #node[data-shape="parallelogram"] { clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); } #node[data-shape="parallelogramAlt"] { clip-path: polygon(0 0, 86% 0, 100% 100%, 14% 100%); } #node[data-shape="trapezoid"] { clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); } #node[data-shape="trapezoidAlt"] { clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); } #node[data-shape="doubleCircle"] { border-radius: 50%; box-shadow: inset 0 0 0 4px white, inset 0 0 0 6px #333; } #node[data-shape="bang"] { clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%); padding: 14px; } #node[data-shape="cloud"] { border-radius: 999px; box-shadow: 12px 0 0 -2px white, 13px 0 0 0 #333, -12px 0 0 -2px white, -13px 0 0 0 #333; } #node[data-shape="hourglass"] { clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%, 38% 50%); } #node[data-shape="bolt"] { clip-path: polygon(44% 0, 78% 0, 56% 38%, 82% 38%, 31% 100%, 45% 52%, 20% 52%); } #node[data-shape="brace"], #node[data-shape="brace-r"], #node[data-shape="braces"] { border-color: transparent; font-size: 15px; } #node[data-shape="brace"]::before, #node[data-shape="braces"]::before { content: "{"; font-size: 42px; line-height: 1; margin-right: 6px; } #node[data-shape="brace-r"]::after, #node[data-shape="braces"]::after { content: "}"; font-size: 42px; line-height: 1; margin-left: 6px; } #node[data-shape="datastore"] { border-left-color: transparent; border-right-color: transparent; } #node[data-shape="delay"] { border-radius: 0 999px 999px 0; } #node[data-shape="h-cyl"], #node[data-shape="lin-cyl"] { border-radius: 22% / 50%; } #node[data-shape="curv-trap"] { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); border-radius: 45% 8% 45% 8% / 16%; } #node[data-shape="div-rect"], #node[data-shape="lin-rect"], #node[data-shape="win-pane"] { box-shadow: inset 0 -16px 0 rgba(0, 0, 0, 0.08); } #node[data-shape="doc"], #node[data-shape="lin-doc"], #node[data-shape="docs"], #node[data-shape="tag-doc"] { border-radius: 0 0 16px 16px / 0 0 8px 8px; } #node[data-shape="tri"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 20px; } #node[data-shape="flip-tri"] { clip-path: polygon(0 0, 100% 0, 50% 100%); padding-bottom: 20px; } #node[data-shape="fork"] { min-height: 16px; background: #333; color: white; } #node[data-shape="f-circ"] { background: #333; border-radius: 50%; color: white; } #node[data-shape="notch-pent"] { clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%); } #node[data-shape="sl-rect"] { clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); } #node[data-shape="flag"] { clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%); } #node[data-shape="bow-rect"] { clip-path: polygon(0 0, 35% 0, 50% 50%, 65% 0, 100% 0, 100% 100%, 65% 100%, 50% 50%, 35% 100%, 0 100%); } #node[data-shape="fr-circ"] { border-radius: 50%; box-shadow: inset 0 0 0 4px white, inset 0 0 0 6px #333; } #node[data-shape="cross-circ"] { border-radius: 50%; } #node[data-shape="cross-circ"]::before { content: "×"; font-size: 28px; margin-right: 4px; } #node[data-shape="tag-rect"], #node[data-shape="tag-doc"], #node[data-shape="notch-rect"] { clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); } #node[data-shape="text"] { background: transparent; border-color: transparent; } `; static override readonly template = html`
      `; static readonly is = "mermaid-node"; public nodeId: string = "A"; public label: string = "Node"; public shape: MermaidNodeShape = MermaidNodeShape.rectangle; private _node: HTMLDivElement; static readonly properties = { nodeId: String, label: String, shape: MermaidNodeShape, } constructor() { super(); this._restoreCachedInititalValues(); this._node = this._getDomElement("node"); } async ready() { this._parseAttributesToProperties(); this._render(); } private _render() { const label = this.getAttribute("label") ?? this.label; const nodeId = this.getAttribute("node-id") ?? this.nodeId; const shape = this.getAttribute("shape") as MermaidNodeShape ?? this.shape; renderMarkdownLabel(this._node, label || nodeId); this._node.dataset.shape = shape; this._node.style.clipPath = ""; this._node.style.boxShadow = ""; switch (shape) { case MermaidNodeShape.round: this._node.style.borderRadius = "12px"; break; case MermaidNodeShape.stadium: this._node.style.borderRadius = "999px"; break; case MermaidNodeShape.circle: case MermaidNodeShape.doubleCircle: case MermaidNodeShape.framedCircle: case MermaidNodeShape.crossedCircle: case MermaidNodeShape.filledCircle: this._node.style.borderRadius = "50%"; break; case MermaidNodeShape.cylinder: case MermaidNodeShape.horizontalCylinder: case MermaidNodeShape.linedCylinder: this._node.style.borderRadius = "50% / 14%"; break; default: this._node.style.borderRadius = "0"; break; } } public createMermaid() { const id = sanitizeId(this.getAttribute("node-id") ?? this.nodeId); const label = formatMermaidLabel((this.getAttribute("label") ?? this.label) || id); const shape = this.getAttribute("shape") as MermaidNodeShape ?? this.shape; switch (shape) { case MermaidNodeShape.round: return `${id}(${label})`; case MermaidNodeShape.stadium: return `${id}([${label}])`; case MermaidNodeShape.circle: return `${id}((${label}))`; case MermaidNodeShape.decision: return `${id}{${label}}`; case MermaidNodeShape.subroutine: return `${id}[[${label}]]`; case MermaidNodeShape.cylinder: return `${id}[(${label})]`; case MermaidNodeShape.asymmetric: return `${id}>${label}]`; case MermaidNodeShape.hexagon: return `${id}{{${label}}}`; case MermaidNodeShape.parallelogram: return `${id}[/${label}/]`; case MermaidNodeShape.parallelogramAlt: return `${id}[\\${label}\\]`; case MermaidNodeShape.trapezoid: return `${id}[/${label}\\]`; case MermaidNodeShape.trapezoidAlt: return `${id}[\\${label}/]`; case MermaidNodeShape.doubleCircle: return `${id}(((${label})))`; default: if (isExpandedShape(shape)) return `${id}@{ shape: ${shape}, label: ${label} }`; return `${id}[${label}]`; } } } function isExpandedShape(shape: string) { return !!shape && shape !== MermaidNodeShape.rectangle; } export function sanitizeId(id: string) { return (id || "A").replace(/[^a-zA-Z0-9_]/g, "_"); } export function escapeLabel(label: string) { return (label || "").replaceAll("\"", "#quot;"); } export function formatMermaidLabel(label: string) { const escaped = escapeLabel(label); if (shouldWriteMarkdownLabel(escaped)) return "\"`" + escaped + "`\""; return escaped.includes("`") ? `"${escaped}"` : escaped; } export function stripMarkdownLabel(label: string) { return normalizeLabelLineBreaks((label || "").replace(/^`|`$/g, "")); } export function renderMarkdownLabel(container: HTMLElement | SVGTextElement, label: string) { container.replaceChildren(); const normalizedLabel = stripMarkdownLabel(label); const lines = splitMarkdownLines(normalizedLabel); for (let i = 0; i < lines.length; i++) { if (i > 0) container.appendChild(document.createElement("br")); renderInlineMarkdown(container, lines[i]); } } function renderInlineMarkdown(container: Element, text: string) { let position = 0; while (position < text.length) { const nextDelimiter = findNextMarkdownDelimiter(text, position); if (!nextDelimiter) { appendText(container, text.substring(position)); return; } if (nextDelimiter.index > position) appendText(container, text.substring(position, nextDelimiter.index)); const end = text.indexOf(nextDelimiter.token, nextDelimiter.index + nextDelimiter.token.length); if (end < 0) { appendText(container, text.substring(nextDelimiter.index, nextDelimiter.index + nextDelimiter.token.length)); position = nextDelimiter.index + nextDelimiter.token.length; continue; } const element = document.createElement(nextDelimiter.token.length === 2 ? "strong" : "em"); renderInlineMarkdown(element, text.substring(nextDelimiter.index + nextDelimiter.token.length, end)); container.appendChild(element); position = end + nextDelimiter.token.length; } } function findNextMarkdownDelimiter(text: string, start: number) { const tokens = ["**", "__", "*", "_"]; let result: { token: string; index: number } = null; for (const token of tokens) { const index = text.indexOf(token, start); if (index >= 0 && (!result || index < result.index || (index === result.index && token.length > result.token.length))) result = { token, index }; } return result; } function appendText(container: Element, text: string) { if (text) container.appendChild(document.createTextNode(text)); } function splitMarkdownLines(text: string) { const lines: string[] = []; let start = 0; for (let i = 0; i < text.length; i++) { if (text[i] === "\n") { lines.push(text.substring(start, i)); start = i + 1; } } lines.push(text.substring(start)); return lines; } function shouldWriteMarkdownLabel(label: string) { return label.includes("\n") || label.includes("**") || label.includes("_") || label.includes("*"); } export function normalizeLabelLineBreaks(label: string) { return label.replaceAll("
      ", "\n").replaceAll("
      ", "\n").replaceAll("
      ", "\n"); } customElements.define(MermaidNode.is, MermaidNode); ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-requirement-node.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { escapeLabel, renderMarkdownLabel, sanitizeId } from "./mermaid-node.js"; type RequirementNodeKind = "requirement" | "element"; export class MermaidRequirementNode extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` * { box-sizing: border-box; } :host { background: #fff; border: 2px solid #333; color: #111; display: block; font-family: Arial, sans-serif; font-size: 12px; overflow: hidden; } #header { border-bottom: 1px solid #666; padding: 6px 8px; text-align: center; } #stereotype { display: block; font-size: 11px; line-height: 1.25; margin-bottom: 2px; } #name { font-weight: 600; line-height: 1.25; } #body { display: grid; gap: 4px; padding: 8px; } .row { display: grid; grid-template-columns: max-content 1fr; gap: 6px; min-width: 0; } .label { color: #555; font-weight: 600; white-space: nowrap; } .value { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; } `; static override readonly template = html`
      `; static readonly is = "mermaid-requirement-node"; public nodeKind: RequirementNodeKind = "requirement"; public requirementType: string = "requirement"; public requirementId: string = "Req"; public label: string = "Req"; public text: string = ""; public risk: string = "low"; public verifyMethod: string = "test"; public elementType: string = ""; public docRef: string = ""; private _body: HTMLDivElement; private _name: HTMLDivElement; private _stereotype: HTMLSpanElement; static readonly properties = { nodeKind: String, requirementType: String, requirementId: String, label: String, text: String, risk: String, verifyMethod: String, elementType: String, docRef: String, } constructor() { super(); this._restoreCachedInititalValues(); this._body = this._getDomElement("body"); this._name = this._getDomElement("name"); this._stereotype = this._getDomElement("stereotype"); } async ready() { this._parseAttributesToProperties(); this._render(); } attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (oldValue !== newValue) { this._parseAttributesToProperties(); this._render(); } } private _render() { const kind = this.getAttribute("node-kind") as RequirementNodeKind ?? this.nodeKind; const name = this.getAttribute("label") ?? this.label; this._stereotype.textContent = kind === "element" ? "<>" : "<<" + getRequirementTypeLabel(this.getAttribute("requirement-type") ?? this.requirementType) + ">>"; renderMarkdownLabel(this._name, name); this._body.replaceChildren(); if (kind === "element") { this._appendRow("Type", this.getAttribute("element-type") ?? this.elementType); this._appendRow("DocRef", this.getAttribute("doc-ref") ?? this.docRef); } else { this._appendRow("Id", this.getAttribute("requirement-id") ?? this.requirementId); this._appendRow("Text", this.getAttribute("text") ?? this.text); this._appendRow("Risk", this.getAttribute("risk") ?? this.risk); this._appendRow("Verification", this.getAttribute("verify-method") ?? this.verifyMethod); } } private _appendRow(label: string, value: string) { if (!value) return; const row = document.createElement("div"); row.className = "row"; const labelElement = document.createElement("span"); labelElement.className = "label"; labelElement.textContent = label + ":"; const valueElement = document.createElement("span"); valueElement.className = "value"; renderMarkdownLabel(valueElement, value); row.append(labelElement, valueElement); this._body.appendChild(row); } public createMermaid() { const kind = this.getAttribute("node-kind") as RequirementNodeKind ?? this.nodeKind; const name = sanitizeId(this.getAttribute("label") ?? this.label); if (kind === "element") { const lines = [`element ${name} {`]; const type = this.getAttribute("element-type") ?? this.elementType; const docRef = this.getAttribute("doc-ref") ?? this.docRef; if (type) lines.push("type: " + formatRequirementValue(type)); if (docRef) lines.push("docRef: " + formatRequirementValue(docRef)); lines.push("}"); return lines.join("\n"); } const requirementType = this.getAttribute("requirement-type") ?? this.requirementType; const lines = [`${requirementType} ${name} {`]; lines.push("id: " + formatRequirementValue(this.getAttribute("requirement-id") ?? this.requirementId)); lines.push("text: " + formatRequirementValue(this.getAttribute("text") ?? this.text)); lines.push("risk: " + formatRequirementValue(this.getAttribute("risk") ?? this.risk)); lines.push("verifymethod: " + formatRequirementValue(this.getAttribute("verify-method") ?? this.verifyMethod)); lines.push("}"); return lines.join("\n"); } } customElements.define(MermaidRequirementNode.is, MermaidRequirementNode); function getRequirementTypeLabel(type: string) { switch (type) { case "functionalRequirement": return "Functional Requirement"; case "interfaceRequirement": return "Interface Requirement"; case "performanceRequirement": return "Performance Requirement"; case "physicalRequirement": return "Physical Requirement"; case "designConstraint": return "Design Constraint"; default: return "Requirement"; } } function formatRequirementValue(value: string) { return escapeLabel(value ?? ""); } ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-requirement-relationship.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { boundsFromWaypoints, decodeWaypoints, midpointFromWaypoints, pathDataFromWaypoints } from "../services/mermaidGeometry.js"; import { sanitizeId } from "./mermaid-node.js"; export class MermaidRequirementRelationship extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` :host { display: block; overflow: visible; pointer-events: auto; position: absolute; z-index: 4; } svg { height: 100%; overflow: visible; width: 100%; } path { fill: none; stroke: #333; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; } #marker-shape { fill: #333; } text { fill: #333; font-family: Arial, sans-serif; font-size: 12px; pointer-events: none; } `; static override readonly template = html` `; static readonly is = "mermaid-requirement-relationship"; public from: string = "source"; public to: string = "target"; public relationshipType: string = "satisfies"; public syntaxDirection: string = "forward"; public waypoints: string = ""; private _previewWaypoints: string; private _label: SVGTextElement; private _path: SVGPathElement; private _svg: SVGSVGElement; static readonly properties = { from: String, to: String, relationshipType: String, syntaxDirection: String, waypoints: String, } constructor() { super(); this._restoreCachedInititalValues(); this._label = this._getDomElement("label"); this._path = this._getDomElement("path"); this._svg = this._getDomElement("svg"); } async ready() { this._parseAttributesToProperties(); this._render(); } attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (oldValue !== newValue) { this._parseAttributesToProperties(); this._render(); } } public setPreviewWaypoints(waypoints: string | null) { this._previewWaypoints = waypoints; this._render(); } private _render() { let waypoints = decodeWaypoints(this._previewWaypoints ?? this.getAttribute("waypoints") ?? this.waypoints); if (waypoints.length < 2) waypoints = [{ x: 0, y: 12 }, { x: 180, y: 12 }]; const padding = 16; const bounds = boundsFromWaypoints(waypoints); const width = Math.max(24, Math.round(bounds.width + padding * 2)); const height = Math.max(24, Math.round(bounds.height + padding * 2)); const offsetX = (width - bounds.width) / 2; const offsetY = (height - bounds.height) / 2; this.style.left = `${Math.round(bounds.x - offsetX)}px`; this.style.top = `${Math.round(bounds.y - offsetY)}px`; this.style.width = `${width}px`; this.style.height = `${height}px`; const shifted = waypoints.map(point => ({ x: point.x - bounds.x + offsetX, y: point.y - bounds.y + offsetY })); const middle = midpointFromWaypoints(shifted); const relationshipType = this.getAttribute("relationship-type") ?? this.relationshipType; this._svg.setAttribute("viewBox", `0 0 ${width} ${height}`); this._path.setAttribute("d", pathDataFromWaypoints(shifted)); this._label.textContent = relationshipType; this._label.setAttribute("x", middle.x.toString()); this._label.setAttribute("y", (middle.y - 8).toString()); this._label.setAttribute("text-anchor", "middle"); } public createMermaid() { const from = sanitizeId(this.getAttribute("from") ?? this.from); const to = sanitizeId(this.getAttribute("to") ?? this.to); const relationshipType = this.getAttribute("relationship-type") ?? this.relationshipType; const syntaxDirection = this.getAttribute("syntax-direction") ?? this.syntaxDirection; if (syntaxDirection === "reverse") return `${to} <- ${relationshipType} - ${from}`; return `${from} - ${relationshipType} -> ${to}`; } } customElements.define(MermaidRequirementRelationship.is, MermaidRequirementRelationship); ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-sequence-message.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { escapeLabel, sanitizeId } from "./mermaid-node.js"; enum MermaidSequenceMessageType { solid = "solid", dotted = "dotted", open = "open", cross = "cross", async = "async", } export class MermaidSequenceMessage extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` * { box-sizing: border-box; } :host { display: block; overflow: visible; pointer-events: auto; position: absolute; z-index: 4; } svg { height: 100%; overflow: visible; width: 100%; } path { fill: none; stroke: #333; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; } #marker-shape { fill: #333; } text { fill: #333; font-family: Arial, sans-serif; font-size: 12px; pointer-events: none; } `; static override readonly template = html` `; static readonly is = "mermaid-sequence-message"; public from: string = "Alice"; public to: string = "Bob"; public label: string = "Message"; public messageType: MermaidSequenceMessageType = MermaidSequenceMessageType.solid; public connector: string = "->>"; private _label: SVGTextElement; private _path: SVGPathElement; private _svg: SVGSVGElement; static readonly properties = { from: String, to: String, label: String, messageType: MermaidSequenceMessageType, connector: String, } constructor() { super(); this._restoreCachedInititalValues(); this._label = this._getDomElement("label"); this._path = this._getDomElement("path"); this._svg = this._getDomElement("svg"); } async ready() { this._parseAttributesToProperties(); this._render(); } attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (oldValue !== newValue) { this._parseAttributesToProperties(); this._render(); } } private _render() { const width = Math.max(1, parseFloat(this.style.width || "220")); const height = Math.max(28, parseFloat(this.style.height || "36")); const y = height / 2; const messageType = this.getAttribute("message-type") as MermaidSequenceMessageType ?? this.messageType; const label = this.getAttribute("label") ?? this.label ?? ""; this._svg.setAttribute("viewBox", `0 0 ${width} ${height}`); this._path.setAttribute("d", `M 0 ${y} L ${width} ${y}`); this._path.setAttribute("marker-end", messageType === MermaidSequenceMessageType.open ? "" : "url(#marker)"); this._path.style.strokeDasharray = messageType === MermaidSequenceMessageType.dotted ? "4 4" : ""; this._label.textContent = label; this._label.setAttribute("x", (width / 2).toString()); this._label.setAttribute("y", (y - 8).toString()); this._label.setAttribute("text-anchor", "middle"); } public createMermaid() { const from = sanitizeId(this.getAttribute("from") ?? this.from); const to = sanitizeId(this.getAttribute("to") ?? this.to); const label = this.getAttribute("label") ?? this.label ?? ""; const connector = this.getAttribute("connector") ?? getConnector(this.getAttribute("message-type") as MermaidSequenceMessageType ?? this.messageType); return `${from}${connector}${to}: ${escapeLabel(label)}`; } } function getConnector(messageType: MermaidSequenceMessageType) { switch (messageType) { case MermaidSequenceMessageType.dotted: return "-->>"; case MermaidSequenceMessageType.open: return "->"; case MermaidSequenceMessageType.cross: return "-x"; case MermaidSequenceMessageType.async: return "-)"; default: return "->>"; } } customElements.define(MermaidSequenceMessage.is, MermaidSequenceMessage); ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-sequence-participant.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { escapeLabel, sanitizeId } from "./mermaid-node.js"; enum MermaidSequenceParticipantType { participant = "participant", actor = "actor", } export class MermaidSequenceParticipant extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` * { box-sizing: border-box; } #participant { align-items: center; background: white; border: 2px solid #333; color: #111; display: flex; font-family: Arial, sans-serif; font-size: 14px; height: 100%; justify-content: center; min-height: 42px; min-width: 120px; overflow: hidden; padding: 6px 10px; pointer-events: none; text-align: center; width: 100%; } #participant[data-participant-type="actor"] { border-radius: 999px; } `; static override readonly template = html`
      `; static readonly is = "mermaid-sequence-participant"; public participantId: string = "Alice"; public label: string = "Alice"; public participantType: MermaidSequenceParticipantType = MermaidSequenceParticipantType.participant; private _participant: HTMLDivElement; static readonly properties = { participantId: String, label: String, participantType: MermaidSequenceParticipantType, } constructor() { super(); this._restoreCachedInititalValues(); this._participant = this._getDomElement("participant"); } async ready() { this._parseAttributesToProperties(); this._render(); } private _render() { this._participant.textContent = this.getAttribute("label") ?? this.label ?? this.getAttribute("participant-id") ?? this.participantId; this._participant.dataset.participantType = this.getAttribute("participant-type") ?? this.participantType; } public createMermaid() { const id = sanitizeId(this.getAttribute("participant-id") ?? this.participantId); const label = this.getAttribute("label") ?? this.label ?? id; const type = this.getAttribute("participant-type") ?? this.participantType; const keyword = type === MermaidSequenceParticipantType.actor ? "actor" : "participant"; return label && label !== id ? `${keyword} ${id} as ${escapeLabel(label)}` : `${keyword} ${id}`; } } customElements.define(MermaidSequenceParticipant.is, MermaidSequenceParticipant); ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-subgraph.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { escapeLabel, sanitizeId } from "./mermaid-node.js"; export class MermaidSubgraph extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` :host { background: rgba(245, 245, 245, 0.55); border: 2px dashed #777; color: #222; display: block; font-family: Arial, sans-serif; font-size: 13px; overflow: visible; padding-top: 28px; } #title { background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid #aaa; font-weight: 600; left: 0; overflow: hidden; padding: 5px 8px; pointer-events: none; position: absolute; right: 0; text-overflow: ellipsis; top: 0; white-space: nowrap; } `; static override readonly template = html`
      `; static readonly is = "mermaid-subgraph"; public subgraphId: string = ""; public override title: string = "Subgraph"; public direction: string = ""; private _titleElement: HTMLDivElement; static readonly properties = { subgraphId: String, title: String, direction: String, } constructor() { super(); this._restoreCachedInititalValues(); this._titleElement = this._getDomElement("title"); } async ready() { this._parseAttributesToProperties(); this._render(); } attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { if (oldValue !== newValue) { this._parseAttributesToProperties(); this._render(); } } private _render() { this._titleElement.textContent = this.getAttribute("title") ?? this.title; } public createMermaidStart() { const id = this.getAttribute("subgraph-id") ?? this.subgraphId; const title = this.getAttribute("title") ?? this.title; if (id && title && id !== title) return `subgraph ${sanitizeId(id)}[${escapeLabel(title)}]`; return `subgraph ${escapeLabel(title || id || "Subgraph")}`; } } customElements.define(MermaidSubgraph.is, MermaidSubgraph); ================================================ FILE: packages/web-component-designer-mermaid/src/widgets/views/mermaid-demo-view.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { IUiCommand, InstanceServiceContainer, ServiceContainer } from "@node-projects/web-component-designer"; import { IDemoView } from "@node-projects/web-component-designer/src/elements/widgets/demoView/IDemoView.js"; export class MermaidDemoView extends BaseCustomWebComponentConstructorAppend implements IDemoView { static override readonly template = html`
      `; static override readonly style = css` :host { background: white; display: block; height: 100%; overflow: auto; position: relative; width: 100%; } #preview { box-sizing: border-box; min-height: 100%; padding: 24px; width: 100%; } `; executeCommand(command: IUiCommand) { } canExecuteCommand(command: IUiCommand) { return false; } dispose(): void { } async display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string) { const preview = this._getDomElement("preview"); const mermaid = await import("mermaid"); const id = "mermaid-preview-" + crypto.randomUUID(); mermaid.default.initialize({ startOnLoad: false, securityLevel: "strict" }); const result = await mermaid.default.render(id, code || "flowchart TD\n A[Node]"); preview.innerHTML = result.svg; } } customElements.define("node-projects-mermaid-demo-view", MermaidDemoView); ================================================ FILE: packages/web-component-designer-mermaid/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false, "resolveJsonModule": true }, "include": [ "src/**/*.ts", "src/**/*.js", "src/**/*.json" ], "references": [ { "path": "../web-component-designer/tsconfig.json" } ] } ================================================ FILE: packages/web-component-designer-stylesheetservice-css-parser/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-stylesheetservice-css-parser/README.md ================================================ # web-component-designer-stylesheetservice-css-tools ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-parser npm i @node-projects/web-component-designer-stylesheetservice-css-parser ## Description This is a Stylesheetparser using @node-projects/css-parser ## Usage import { CssParserStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-parser'; serviceContainer.register("stylesheetService", designerCanvas => new CssParserStylesheetService(designerCanvas)); ================================================ FILE: packages/web-component-designer-stylesheetservice-css-parser/package.json ================================================ { "description": "web-component-designer addon: Stylesheet Parser Service using @node-projects/css-parser", "name": "@node-projects/web-component-designer-stylesheetservice-css-parser", "version": "0.1.5", "type": "module", "main": "./dist/service/stylesheetservice/CssParserStylesheetService.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "@node-projects/css-parser": "^5.0.0", "@node-projects/web-component-designer": ">=0.1.224" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-stylesheetservice-css-parser/src/service/stylesheetservice/CssParserStylesheetService.ts ================================================ import { CssAtRuleAST, CssDeclarationAST, CssRuleAST, CssStylesheetAST, CssWhitespaceAST, parse, stringify } from "@node-projects/css-parser"; import { AbstractStylesheetService, IDocumentStylesheet, IStyleRule, IStylesheet, IStyleDeclaration, IDesignerCanvas, IDesignItem } from "@node-projects/web-component-designer"; import { Specificity } from "@node-projects/web-component-designer"; interface IRuleWithAST extends IStyleRule { ast: CssRuleAST, declarations: IDeclarationWithAST[], stylesheet: IStylesheet; stylesheetName: string; specificity: Specificity; } interface IDeclarationWithAST extends IStyleDeclaration { ast: CssDeclarationAST } export class CssParserStylesheetService extends AbstractStylesheetService { public keepFormatting: boolean; constructor(designerCanvas: IDesignerCanvas, keepFormatting: boolean = true) { super(designerCanvas); this.keepFormatting = keepFormatting; } async internalParse(style: string) { return parse(style, this.keepFormatting ? { preserveFormatting: true } : undefined); } public getAppliedRules(designItem: IDesignItem): IRuleWithAST[] { let rules: IRuleWithAST[] = []; for (let item of this._allStylesheets.entries()) { if (!item[1].ast?.stylesheet?.rules) continue; let rs = Array.from(this.getRulesFromAst(item[1].ast?.stylesheet?.rules, item[1].stylesheet, designItem)) .map(x => ({ selector: x[2].join(', '), declarations: x[0].declarations.filter(y => y.type == 'declaration').map(y => ({ name: (y).property, value: (y).value.endsWith('!important') ? (y).value.substring(0, (y).value.length - 10).trimEnd() : (y).value, important: (y).value.endsWith('!important'), parent: null, ast: y, stylesheet: item[1].stylesheet })), specificity: x[1], stylesheetName: item[0], stylesheet: item[1].stylesheet, ast: x[0], })); rs.forEach(x => x.declarations.forEach(y => y.parent = x)); rules.push(...rs); } return rules; } getRules(selector: string): IStyleRule[] { const rules = this.getAppliedRules(null); return rules.filter(x => x.selector == selector); } async addRule(stylesheet: IStylesheet, selector: string): Promise { await this.updateCompleteStylesheet(stylesheet.name, stylesheet.content + '\n' + selector + ' {}'); const rules = this.getRules(selector).filter(x => x.stylesheetName == stylesheet.name); return rules[rules.length - 1]; } private resolveNestedSelectors(parentSelectors: string[], nestedSelectors: string[]): string[] { const parentRef = parentSelectors.length === 1 ? parentSelectors[0] : `:is(${parentSelectors.join(', ')})`; const resolved: string[] = []; for (const nested of nestedSelectors) { if (nested.includes('&')) { resolved.push(nested.replace(/&/g, parentRef)); } else { resolved.push(parentRef + ' ' + nested); } } return resolved; } private *getRulesFromAst(cssAtRuleAst: (CssDeclarationAST | CssAtRuleAST | CssWhitespaceAST)[], stylesheet: IStylesheet, designItem: IDesignItem, parentSelectors?: string[]): IterableIterator<[CssRuleAST, Specificity, string[]]> { for (const atRule of cssAtRuleAst) { if (atRule.type == 'media') { yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem, parentSelectors); } else if (atRule.type == 'supports') { yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem, parentSelectors); } else if (atRule.type == 'rule') { const resolvedSelectors = parentSelectors ? this.resolveNestedSelectors(parentSelectors, atRule.selectors) : atRule.selectors; let spec = this.elementMatchesASelector(designItem, resolvedSelectors); if (spec) yield [atRule, spec, resolvedSelectors]; yield* this.getRulesFromAst(atRule.declarations, stylesheet, designItem, resolvedSelectors); } } return null; } public getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[] { return this.getAppliedRules(designItem).flatMap(x => x.declarations).filter(x => x.name == styleName); } public updateDeclarationValueWithoutUndo(declaration: IDeclarationWithAST, value: string, important: boolean) { declaration.ast.value = important ? value + ' !important' : value; if (declaration.ast.rawValue) delete declaration.ast.rawValue let ss = this._allStylesheets.get(declaration.parent.stylesheetName); this.updateStylesheet(ss); } public insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean { rule.ast.declarations.push({ type: 'declaration', property: property, value: important ? value + ' !important' : value }); this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName)); return true; } removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean { let idx = rule.ast.declarations.findIndex(x => (x).property == property); if (idx == -1) return false; rule.ast.declarations.splice(idx, 1); this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName)); return true; } private updateStylesheet(ss: { stylesheet: IStylesheet, ast: CssStylesheetAST }) { const old = ss.stylesheet.content; ss.stylesheet.content = this.keepFormatting ? stringify(ss.ast, { identity: true }) : stringify(ss.ast, { indent: ' ', compress: false }); if ((ss.stylesheet).designItem) { (ss.stylesheet).designItem.content = ss.stylesheet.content; } else this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' }); } async updateCompleteStylesheet(name: string, newStyle: string) { this.updateCompleteStylesheetInternal(name, newStyle, 'styleupdate'); } async updateCompleteStylesheetWithoutUndo(name: string, newStyle: string, noUndo = false) { this.updateCompleteStylesheetInternal(name, newStyle, 'undo'); } private async updateCompleteStylesheetInternal(name: string, newStyle: string, changeSource: 'undo' | 'styleupdate') { const ss = this._allStylesheets.get(name); if (ss.stylesheet.content != newStyle) { const old = ss.stylesheet.content; ss.stylesheet.content = newStyle; if (changeSource == 'styleupdate') { ss.ast = await this.internalParse(ss.stylesheet.content); } if ((ss.stylesheet).designItem) { (ss.stylesheet).designItem.content = ss.stylesheet.content; } else this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource }); } } } ================================================ FILE: packages/web-component-designer-stylesheetservice-css-parser/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-visualization-addons/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-visualization-addons/README.md ================================================ # web-component-designer-visualization-addons ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-visualization-addons npm i @node-projects/web-component-designer-visualization-addons ## Description This package contains basic elements for a custom visualization, like a script system, a bindings system, ... It is used for example by the iobroker.webui. ## Dependencies - long - blockly - @node-projects/css-parser ( only if you use Bindingshelper.parseCssBindings() ) ## Usage ================================================ FILE: packages/web-component-designer-visualization-addons/package.json ================================================ { "description": "web-component-designer addon for visualizations", "name": "@node-projects/web-component-designer-visualization-addons", "version": "0.1.144", "type": "module", "main": "./dist/index.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build && npm run bundle", "bundle": "esbuild ./dist/index.js --format=esm --minify --external:@node-projects/css-parser --external:@blockly/* --external:blockly --external:long --external:wunderbaum --external:@node-projects/* --platform=neutral --bundle --outfile=./dist/index-min.js" }, "dependencies": { "@blockly/zoom-to-fit": ">=6.0.9", "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/css-parser": "^5.2.0", "@node-projects/propertygrid.webcomponent": ">=1.2.3", "@node-projects/splitview.webcomponent": ">=1.0.1", "@node-projects/web-component-designer": ">=0.1.224", "@node-projects/web-component-designer-codeview-monaco": ">=0.1.32", "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.29", "blockly": ">=11.1.1", "long": ">=5.2.3" }, "devDependencies": { "esbuild": "^0.25.10" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/BlocklyJavascriptHelper.ts ================================================ //import Blockly from 'blockly'; import { VisualizationHandler } from '../interfaces/VisualizationHandler.js'; import './components/components.js'; //TODO: remove imports, only leave Runtime const prefix = `function extractPart(obj, propertyPath) { let retVal = obj; for (let p of propertyPath.split('.')) { retVal = retVal?.[p]; } return retVal; } function delay(ms) { return new Promise(res => { setTimeout(() => res(), ms); }); } export async function run(eventData, shadowRoot, parameters, relativeSignalsPath, visualizationHandler, context) { `; const postfix = `}`; export async function generateEventCodeFromBlockly(data: any): Promise<(event: Event, shadowRoot: ShadowRoot, parameters: Record, relativeSignalsPath: string, visualizationHandler: VisualizationHandler, context: any) => void> { //@ts-ignore const workspace = new Blockly.Workspace(); //@ts-ignore Blockly.serialization.workspaces.load(data, workspace); //@ts-ignore Blockly.JavaScript.addReservedWords('eventData'); //@ts-ignore Blockly.JavaScript.addReservedWords('shadowRoot'); //@ts-ignore Blockly.JavaScript.addReservedWords('extractPart'); //@ts-ignore Blockly.JavaScript.addReservedWords('parameters'); //@ts-ignore Blockly.JavaScript.addReservedWords('relativeSignalsPath'); //@ts-ignore Blockly.JavaScript.addReservedWords('delay'); //@ts-ignore Blockly.JavaScript.addReservedWords('visualizationHandler'); //@ts-ignore Blockly.JavaScript.addReservedWords('context'); //@ts-ignore let code = Blockly.JavaScript.workspaceToCode(workspace); const scriptUrl = URL.createObjectURL(new Blob([prefix + code + postfix], { type: 'application/javascript' })); const scripObj = await import(scriptUrl); return scripObj.run; } ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/BlocklyScriptEditor.ts ================================================ import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent'; //import Blockly from 'blockly'; export class BlocklyScriptEditor extends BaseCustomWebComponentConstructorAppend { static override readonly template = html`
      `; static override readonly style = css` :host { box-sizing: border-box; position: absolute; height: 100%; width: 100%; display: block; }`; static readonly is = 'node-projects-blockly-script-editor'; blocklyDiv: HTMLDivElement; workspace: any; static blocklyStyle1: CSSStyleSheet; static blocklyStyle2: CSSStyleSheet; resizeObserver: ResizeObserver; private _toolbox: any; constructor(toolbox: any) { super(); super._restoreCachedInititalValues(); this._toolbox = toolbox; this.blocklyDiv = this._getDomElement('blocklyDiv'); this._assignEvents(); this.createBlockly(); } createBlockly() { const renderer = 'zelos'; const themename = 'webui'; //@ts-ignore const theme = Blockly.Theme.defineTheme(themename, { //@ts-ignore 'base': Blockly.Themes.Zelos, 'blockStyles': { "hat_blocks": { "colourPrimary": "#4a148c" } }, 'categoryStyles': { 'start_category': { colour: '#4a148c' }, 'system_category': { colour: '#01579b', } }, }); //@ts-ignore this.workspace = Blockly.inject(this.blocklyDiv, { theme: theme, toolbox: this._toolbox, renderer: renderer, trashcan: true, zoom: { controls: true, wheel: false, startScale: 0.7, maxScale: 3, minScale: 0.3, scaleSpeed: 1.2, pinch: false }, move: { scrollbars: { horizontal: true, vertical: true }, drag: true, wheel: true }, maxInstances: { 'start_event': 1 }, }); if (!BlocklyScriptEditor.blocklyStyle1) { BlocklyScriptEditor.blocklyStyle1 = new CSSStyleSheet(); //@ts-ignore BlocklyScriptEditor.blocklyStyle1.replaceSync(document.getElementById('blockly-renderer-style-' + renderer + '-' + themename).innerText); BlocklyScriptEditor.blocklyStyle2 = new CSSStyleSheet(); //@ts-ignore BlocklyScriptEditor.blocklyStyle2.replaceSync(document.getElementById('blockly-common-style').innerText); } this.shadowRoot.adoptedStyleSheets = [BlocklyScriptEditor.blocklyStyle1, BlocklyScriptEditor.blocklyStyle2, BlocklyScriptEditor.style]; //@ts-ignore const zoomToFit = new ZoomToFitControl(this.workspace); zoomToFit.init(); } ready() { //@ts-ignore Blockly.svgResize(this.workspace); this.resizeObserver = new ResizeObserver((entries) => { //@ts-ignore Blockly.svgResize(this.workspace) }); this.resizeObserver.observe(this); } public save(): any { //@ts-ignore const state = Blockly.serialization.workspaces.save(this.workspace); return state; } public load(data: any) { //@ts-ignore Blockly.serialization.workspaces.load(data, this.workspace); } } customElements.define(BlocklyScriptEditor.is, BlocklyScriptEditor); ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/BlocklyToolbox.ts ================================================ import './components/components.js'; export default { kind: 'categoryToolbox', contents: [ { kind: 'category', name: 'Start', categorystyle: 'start_category', contents: [ { kind: 'block', type: 'start_event', }] }, { kind: 'category', name: 'System', categorystyle: 'system_category', contents: [ { kind: 'block', type: 'console', }, { kind: 'block', type: 'debugger', }, { kind: 'block', type: 'delay', inputs: { DELAY: { shadow: { type: 'math_number', fields: { NUM: 1000, }, }, }, }, }, { kind: 'block', type: 'open_screen', inputs: { SCREEN: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { kind: 'block', type: 'set_state', inputs: { OID: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { kind: 'block', type: 'get_state', inputs: { OID: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { kind: 'block', type: 'get_parameter', inputs: { NAME: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { kind: 'block', type: 'get_sub_property', inputs: { PROPERTYPATH: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { kind: 'block', type: 'query_selector', inputs: { SELECTOR: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { kind: 'block', type: 'query_selector_all', inputs: { SELECTOR: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { kind: 'block', type: 'set_element',inputs: { NAME: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, ] }, { kind: 'category', name: 'Logic', categorystyle: 'logic_category', contents: [ { type: 'controls_if', kind: 'block', }, { type: 'logic_compare', kind: 'block', fields: { OP: 'EQ', }, }, { type: 'logic_operation', kind: 'block', fields: { OP: 'AND', }, }, { type: 'logic_negate', kind: 'block', }, { type: 'logic_boolean', kind: 'block', fields: { BOOL: 'TRUE', }, }, { type: 'logic_null', kind: 'block' }, { type: 'logic_ternary', kind: 'block', }, ], }, { kind: 'category', name: 'Loops', categorystyle: 'loop_category', contents: [ { type: 'controls_repeat_ext', kind: 'block', inputs: { TIMES: { shadow: { type: 'math_number', fields: { NUM: 10, }, }, }, }, }, { type: 'controls_whileUntil', kind: 'block', fields: { MODE: 'WHILE', }, }, { type: 'controls_for', kind: 'block', fields: { VAR: { name: 'i', }, }, inputs: { FROM: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, TO: { shadow: { type: 'math_number', fields: { NUM: 10, }, }, }, BY: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, }, }, { type: 'controls_forEach', kind: 'block', fields: { VAR: { name: 'j', }, }, }, { type: 'controls_flow_statements', kind: 'block', fields: { FLOW: 'BREAK', }, }, ], }, { kind: 'category', name: 'Math', categorystyle: 'math_category', contents: [ { type: 'math_number', kind: 'block', fields: { NUM: 123, }, }, { type: 'math_arithmetic', kind: 'block', fields: { OP: 'ADD', }, inputs: { A: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, B: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, }, }, { type: 'math_single', kind: 'block', fields: { OP: 'ROOT', }, inputs: { NUM: { shadow: { type: 'math_number', fields: { NUM: 9, }, }, }, }, }, { type: 'math_trig', kind: 'block', fields: { OP: 'SIN', }, inputs: { NUM: { shadow: { type: 'math_number', fields: { NUM: 45, }, }, }, }, }, { type: 'math_constant', kind: 'block', fields: { CONSTANT: 'PI', }, }, { type: 'math_number_property', kind: 'block', fields: { PROPERTY: 'EVEN', }, inputs: { NUMBER_TO_CHECK: { shadow: { type: 'math_number', fields: { NUM: 0, }, }, }, }, }, { type: 'math_round', kind: 'block', fields: { OP: 'ROUND', }, inputs: { NUM: { shadow: { type: 'math_number', fields: { NUM: 3.1, }, }, }, }, }, { type: 'math_on_list', kind: 'block', fields: { OP: 'SUM', }, }, { type: 'math_modulo', kind: 'block', inputs: { DIVIDEND: { shadow: { type: 'math_number', fields: { NUM: 64, }, }, }, DIVISOR: { shadow: { type: 'math_number', fields: { NUM: 10, }, }, }, }, }, { type: 'math_constrain', kind: 'block', inputs: { VALUE: { shadow: { type: 'math_number', fields: { NUM: 50, }, }, }, LOW: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, HIGH: { shadow: { type: 'math_number', fields: { NUM: 100, }, }, }, }, }, { type: 'math_random_int', kind: 'block', inputs: { FROM: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, TO: { shadow: { type: 'math_number', fields: { NUM: 100, }, }, }, }, }, { type: 'math_random_float', kind: 'block', }, { type: 'math_atan2', kind: 'block', inputs: { X: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, Y: { shadow: { type: 'math_number', fields: { NUM: 1, }, }, }, }, }, ], }, { kind: 'category', name: 'Text', categorystyle: 'text_category', contents: [ { type: 'text', kind: 'block', fields: { TEXT: '', }, }, { type: 'text_multiline', kind: 'block', fields: { TEXT: '', }, }, { type: 'text_join', kind: 'block', }, { type: 'text_append', kind: 'block', fields: { name: 'item', }, inputs: { TEXT: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { type: 'text_length', kind: 'block', inputs: { VALUE: { shadow: { type: 'text', fields: { TEXT: 'abc', }, }, }, }, }, { type: 'text_isEmpty', kind: 'block', inputs: { VALUE: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { type: 'text_indexOf', kind: 'block', fields: { END: 'FIRST', }, inputs: { VALUE: { block: { type: 'variables_get', fields: { VAR: { name: 'text', }, }, }, }, FIND: { shadow: { type: 'text', fields: { TEXT: 'abc', }, }, }, }, }, { type: 'text_charAt', kind: 'block', fields: { WHERE: 'FROM_START', }, inputs: { VALUE: { block: { type: 'variables_get', fields: { VAR: { name: 'text', }, }, }, }, }, }, { type: 'text_getSubstring', kind: 'block', fields: { WHERE1: 'FROM_START', WHERE2: 'FROM_START', }, inputs: { STRING: { block: { type: 'variables_get', fields: { VAR: { name: 'text', }, }, }, }, }, }, { type: 'text_changeCase', kind: 'block', fields: { CASE: 'UPPERCASE', }, inputs: { TEXT: { shadow: { type: 'text', fields: { TEXT: 'abc', }, }, }, }, }, { type: 'text_trim', kind: 'block', fields: { MODE: 'BOTH', }, inputs: { TEXT: { shadow: { type: 'text', fields: { TEXT: 'abc', }, }, }, }, }, { type: 'text_count', kind: 'block', inputs: { SUB: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, TEXT: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { type: 'text_replace', kind: 'block', inputs: { FROM: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, TO: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, TEXT: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { type: 'text_reverse', kind: 'block', inputs: { TEXT: { shadow: { type: 'text', fields: { TEXT: '', }, }, }, }, }, { type: 'text_print', kind: 'block', inputs: { TEXT: { shadow: { type: 'text', fields: { TEXT: 'abc', }, }, }, }, }, { type: 'text_prompt_ext', kind: 'block', fields: { TYPE: 'TEXT', }, inputs: { TEXT: { shadow: { type: 'text', fields: { TEXT: 'abc', }, }, }, }, }, ], }, { kind: 'category', name: 'Lists', categorystyle: 'list_category', contents: [ { type: 'lists_create_with', kind: 'block', }, { type: 'lists_create_with', kind: 'block', }, { type: 'lists_repeat', kind: 'block', inputs: { NUM: { shadow: { type: 'math_number', fields: { NUM: 5, }, }, }, }, }, { type: 'lists_length', kind: 'block', }, { type: 'lists_isEmpty', kind: 'block', }, { type: 'lists_indexOf', kind: 'block', fields: { END: 'FIRST', }, inputs: { VALUE: { block: { type: 'variables_get', fields: { VAR: { name: 'list', }, }, }, }, }, }, { type: 'lists_getIndex', kind: 'block', fields: { MODE: 'GET', WHERE: 'FROM_START', }, inputs: { VALUE: { block: { type: 'variables_get', fields: { VAR: { name: 'list', }, }, }, }, }, }, { type: 'lists_setIndex', kind: 'block', fields: { MODE: 'SET', WHERE: 'FROM_START', }, inputs: { LIST: { block: { type: 'variables_get', fields: { VAR: { name: 'list', }, }, }, }, }, }, { type: 'lists_getSublist', kind: 'block', fields: { WHERE1: 'FROM_START', WHERE2: 'FROM_START', }, inputs: { LIST: { block: { type: 'variables_get', fields: { VAR: { name: 'list', }, }, }, }, }, }, { type: 'lists_split', kind: 'block', fields: { MODE: 'SPLIT', }, inputs: { DELIM: { shadow: { type: 'text', fields: { TEXT: ',', }, }, }, }, }, { type: 'lists_sort', kind: 'block', fields: { TYPE: 'NUMERIC', DIRECTION: '1', }, }, { type: 'lists_reverse', kind: 'block', }, ], }, { kind: 'category', categorystyle: 'colour_category', name: 'Color', contents: [ { type: 'colour_picker', kind: 'block', fields: { COLOUR: '#ff0000', }, }, { type: 'colour_random', kind: 'block', }, { type: 'colour_rgb', kind: 'block', inputs: { RED: { shadow: { type: 'math_number', fields: { NUM: 100, }, }, }, GREEN: { shadow: { type: 'math_number', fields: { NUM: 50, }, }, }, BLUE: { shadow: { type: 'math_number', fields: { NUM: 0, }, }, }, }, }, { type: 'colour_blend', kind: 'block', inputs: { COLOUR1: { shadow: { type: 'colour_picker', fields: { COLOUR: '#ff0000', }, }, }, COLOUR2: { shadow: { type: 'colour_picker', fields: { COLOUR: '#3333ff', }, }, }, RATIO: { shadow: { type: 'math_number', fields: { NUM: 0.5, }, }, }, }, }, ], }, { kind: 'sep', }, { kind: 'category', name: 'Variables', custom: 'VARIABLE', categorystyle: 'variable_category', }, { kind: 'category', name: 'Functions', custom: 'PROCEDURE', categorystyle: 'procedure_category', }, ], }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/Console.ts ================================================ //@ts-ignore Blockly.Blocks['console'] = { init: function () { this.appendDummyInput() .appendField('console') //@ts-ignore .appendField(new Blockly.FieldDropdown([["debug", "DEBUG"], ["error", "ERROR"], ["info", "INFO"], ["log", "LOG"], ["warn", "WARN"]]), "LEVEL"); this.appendValueInput('VALUE') .setCheck(null) .appendField('value'); this.setInputsInline(true); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['console'] = function(block, generator) { var level = block.getFieldValue('LEVEL'); //@ts-ignore const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC); let code = `console['${(level).toLowerCase()}'](${value}); `; return code; } ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/Debugger.ts ================================================ //@ts-ignore Blockly.Blocks['debugger'] = { init: function () { this.appendDummyInput() .appendField("debugger"); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['debugger'] = function (block) { return 'debugger;\n'; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/Delay.ts ================================================ //@ts-ignore Blockly.Blocks['delay'] = { init: function () { this.appendValueInput('DELAY') .setCheck("Number") .appendField('delay'); this.setInputsInline(true); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['delay'] = function (block) { //@ts-ignore const delay = Blockly.JavaScript.valueToCode(block, 'DELAY', Blockly.JavaScript.ORDER_ATOMIC); let code = 'await delay(' + delay + ');\n'; return code; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/GetParameter.ts ================================================ //@ts-ignore Blockly.Blocks['get_parameter'] = { init: function () { this.appendValueInput('NAME') .setCheck("String") //@ts-ignore .appendField('get_parameter'); this.setInputsInline(true); this.setOutput(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['get_parameter'] = function (block, generator) { //@ts-ignore const name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC); const code = `context.parameters[${name}]`; //@ts-ignore return [code, Blockly.JavaScript.ORDER_NONE]; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/GetState.ts ================================================ //@ts-ignore Blockly.Blocks['get_state'] = { init: function () { this.appendValueInput('OID') .setCheck("String") //@ts-ignore .appendField('get_state'); this.setInputsInline(true); this.setOutput(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['get_state'] = function (block, generator) { //@ts-ignore const id = Blockly.JavaScript.valueToCode(block, 'OID', Blockly.JavaScript.ORDER_ATOMIC); const code = `(await visualizationHandler.getState((${id}[0] === '.' ? relativeSignalsPath : '') + ${id})).val`; //@ts-ignore return [code, Blockly.JavaScript.ORDER_NONE]; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/GetSubProperty.ts ================================================ //@ts-ignore Blockly.Blocks['get_sub_property'] = { init: function () { this.appendDummyInput() .appendField("getSubProperty"); this.appendValueInput('OBJECT') .setCheck('Object') .appendField('object'); this.appendValueInput('PROPERTYPATH') .setCheck("String") .appendField('propertypath'); this.setInputsInline(true); this.setOutput(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['get_sub_property'] = function (block, generator) { //@ts-ignore const obj = Blockly.JavaScript.valueToCode(block, 'OBJECT', Blockly.JavaScript.ORDER_ATOMIC); //@ts-ignore const propertypath = Blockly.JavaScript.valueToCode(block, 'PROPERTYPATH', Blockly.JavaScript.ORDER_ATOMIC); const code = `extractPart(${obj}, ${propertypath})`; //@ts-ignore return [code, Blockly.JavaScript.ORDER_NONE]; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/OpenScreen.ts ================================================ "use strict"; //@ts-ignore Blockly.Blocks['open_screen'] = { init: function () { this.appendDummyInput() .appendField('open screen'); this.appendValueInput('SCREEN') .setCheck('String') .appendField('screen'); this.appendValueInput('RELATIVESIGNALSPATH') .setCheck("String") .appendField('relativeSignalsPath'); this.appendValueInput('NOHISTORY') .setCheck("Boolean") .appendField('noHistory'); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['open_screen'] = function (block) { //@ts-ignore const screen = Blockly.JavaScript.valueToCode(block, 'SCREEN', Blockly.JavaScript.ORDER_ATOMIC); //@ts-ignore const relativeSignalsPath = Blockly.JavaScript.valueToCode(block, 'RELATIVESIGNALSPATH', Blockly.JavaScript.ORDER_ATOMIC); //@ts-ignore const noHistory = Blockly.JavaScript.valueToCode(block, 'NOHISTORY', Blockly.JavaScript.ORDER_ATOMIC); let code = `RUNTIME.openScreen({screen: ${screen}, relativeSignalsPath: ${relativeSignalsPath}, noHistory: ${noHistory}})`; return code; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/QuerySelector.ts ================================================ //@ts-ignore Blockly.Blocks['query_selector'] = { init: function () { this.appendDummyInput() .appendField('querySelector') //@ts-ignore .appendField(new Blockly.FieldDropdown([["currentScreen", "CURRENTSCREEN"], ["parentScreen", "PARENTSCREEN"]]), "SOURCE"); this.appendValueInput('SELECTOR') .setCheck("String") //@ts-ignore .appendField('selector'); this.setInputsInline(true); this.setOutput(true, 'Element'); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['query_selector'] = function (block, generator) { var dropdown_source = block.getFieldValue('SOURCE'); //@ts-ignore const selector = Blockly.JavaScript.valueToCode(block, 'SELECTOR', Blockly.JavaScript.ORDER_ATOMIC); let code; if (dropdown_source === 'CURRENTSCREEN') code = `shadowRoot.querySelector(${selector})`; else if (dropdown_source === 'PARENTSCREEN') code = `shadowRoot.host.getRootNode().querySelector(${selector})`; //@ts-ignore return [code, Blockly.JavaScript.ORDER_NONE]; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/QuerySelectorAll.ts ================================================ //@ts-ignore Blockly.Blocks['query_selector_all'] = { init: function () { this.appendDummyInput() .appendField('querySelectorAll') //@ts-ignore .appendField(new Blockly.FieldDropdown([["currentScreen", "CURRENTSCREEN"], ["parentScreen", "PARENTSCREEN"]]), "SOURCE"); this.appendValueInput('SELECTOR') .setCheck("String") //@ts-ignore .appendField('selector'); this.setInputsInline(true); this.setOutput(true, 'Array'); this.setColour(230); } }; //TODO helper for current & parent screen queryselector //TODO also a query selector for screen directly //@ts-ignore Blockly.JavaScript.forBlock['query_selector_all'] = function (block, generator) { var dropdown_source = block.getFieldValue('SOURCE'); //@ts-ignore const selector = Blockly.JavaScript.valueToCode(block, 'SELECTOR', Blockly.JavaScript.ORDER_ATOMIC); let code; if (dropdown_source === 'CURRENTSCREEN') code = `shadowRoot.querySelectorall(${selector})`; else if (dropdown_source === 'PARENTSCREEN') code = `shadowRoot.querySelectorall(${selector})`; //@ts-ignore return [code, Blockly.JavaScript.ORDER_NONE]; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/Return.ts ================================================ //@ts-ignore Blockly.Blocks['return'] = { init: function () { this.appendDummyInput() .appendField("return"); this.appendValueInput("VALUE") .setCheck(null) .appendField("value"); this.setInputsInline(true); this.setPreviousStatement(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['return'] = function (block) { //@ts-ignore const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC); let code = 'return ' + value + ';'; return code; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/SetElement.ts ================================================ //@ts-ignore Blockly.Blocks['set_element'] = { init: function () { this.appendDummyInput() .appendField('setElement') //@ts-ignore .appendField(new Blockly.FieldDropdown([["property", "PROPERTY"], ["attribute", "ATTRIBUTE"], ["style", "STYLE"]]), "TARGET"); this.appendValueInput('ELEMENT') .setCheck('Element') .appendField('element'); this.appendValueInput('NAME') .setCheck("String") .appendField('name'); this.appendValueInput('VALUE') .setCheck(null) .appendField('value'); this.setInputsInline(true); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['set_element'] = function (block) { var dropdown_target = block.getFieldValue('TARGET'); //@ts-ignore const element = Blockly.JavaScript.valueToCode(block, 'ELEMENT', Blockly.JavaScript.ORDER_ATOMIC); //@ts-ignore const name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC); //@ts-ignore const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC); let code = ''; if (dropdown_target === 'PROPERTY') { code += element + '[' + name + '] = ' + value + ';\n'; } else if (dropdown_target === 'ATTRIBUTE') { code += element + '.setAttribute(' + name + ', ' + value + ');\n'; } else if (dropdown_target === 'STYLE') { code += element + '.style[' + name + '] = ' + value + ';\n'; } return code; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/SetState.ts ================================================ //@ts-ignore Blockly.Blocks['set_state'] = { init: function () { this.appendValueInput('OID') .setCheck("String") //@ts-ignore .appendField('set_state'); this.appendValueInput('VALUE') .setCheck(null) .appendField('with'); this.setInputsInline(true); this.setPreviousStatement(true, null); this.setNextStatement(true, null); this.setColour(230); } }; //@ts-ignore Blockly.JavaScript.forBlock['set_state'] = function (block) { //@ts-ignore const id = Blockly.JavaScript.valueToCode(block, 'OID', Blockly.JavaScript.ORDER_ATOMIC); //@ts-ignore const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC); const code = `await visualizationHandler.setState((${id}[0] === '.' ? relativeSignalsPath : '') + ${id}, ${value});\n`; return code; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/StartEvent.ts ================================================ //@ts-ignore Blockly.defineBlocksWithJsonArray([ { 'type': 'start_event', 'message0': 'Event %1', 'nextStatement': null, 'style': 'hat_blocks', 'args0': [ { 'type': 'field_variable', 'name': 'EVENTVAR', 'variable': 'event' } ], }, ]); //@ts-ignore Blockly.JavaScript.forBlock['start_event'] = function (block) { //@ts-ignore let name = Blockly.JavaScript.getVariableName(block.getField('EVENTVAR').variable.name); return name + ' = ' + 'eventData;\n'; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/blockly/components/components.ts ================================================ import './Console.js'; import './Debugger.js'; import './Delay.js'; import './GetParameter.js'; import './GetState.js'; import './GetSubProperty.js'; import './OpenScreen.js'; import './QuerySelector.js'; import './QuerySelectorAll.js'; import './SetElement.js'; import './SetState.js'; import './StartEvent.js'; ================================================ FILE: packages/web-component-designer-visualization-addons/src/components/BindingsEditor.ts ================================================ import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent'; import { BindingMode, BindingTarget, IBinding, InstanceServiceContainer, IProperty, ServiceContainer } from '@node-projects/web-component-designer'; import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco'; import { VisualizationShell } from '../interfaces/VisualizationShell.js'; import { BindingsEditorHistoric } from './BindingsEditorHistoric.js'; import { VisualizationBinding } from '../interfaces/VisualizationBinding.js'; export class BindingsEditor extends BaseCustomWebComponentConstructorAppend { static override readonly template = html`
      objects
      two way binding events: 
      invert logic
      formula
      write back signal :
      formula write back (two way)
      converter:
      condition
      value
      `; static override readonly style = css` :host { box-sizing: border-box; } #converterGrid { display: flex; gap: 2px; flex-direction: column; } #converterGrid input { height: 20px; box-sizing: border-box; } .padding_top { padding-top: 30px; } .row{ margin-top: 3px; display: flex; align-items: center; } .controlbox { display: flex; flex-direction: column; } .input-headline { height: 30px; } input[type="checkbox"] { margin-right: 15px; width: 15px; height: 15px; } select { width: 100%; } #root { padding: 2px 10px; display: grid; grid-template-rows: min-content min-content; overflow: auto; height: calc(100% - 4px) } .vertical-grid { display: grid; grid-template-columns: calc((100% - 150px) - 30px) 150px; gap: 30px; } #grid input, #list input { border:0px; } #tagdata_type { height: 24px; font-size: inherit; } node-projects-code-view-monaco:not([readonly]) { border: 1px black solid; } node-projects-code-view-monaco[readonly] { border: 1px lightgray solid; }`; static readonly is: string = 'node-projects-visualization-bindings-editor'; static readonly properties = { twoWayPossible: Boolean, twoWay: Boolean, expression: String, objectNames: String, events: String, invert: Boolean, converters: Array, historic: Object } public twoWayPossible: boolean = false; public twoWay: boolean = false; public expression: string = ''; public writeBackSignal: string = ''; public expressionTwoWay: string = ''; public historic: any; public objectNames: string = ''; public events: string = ''; public invert: boolean = false; public converters: { key: string, value: any }[] = []; public convertersString: string; public objectValueType: string; protected _property: IProperty; protected _binding: IBinding & { converter: Record | string }; protected _bindingTarget: BindingTarget; protected _serviceContainer: ServiceContainer; protected _instanceServiceContainer: InstanceServiceContainer; protected _shell: VisualizationShell protected _activeRow: number = -1; protected _objNmInput: HTMLInputElement; constructor(property: IProperty, binding: IBinding & { converter: Record }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, shell: VisualizationShell, config = { namedConverters: true }) { super(); super._restoreCachedInititalValues(); //TODOS: //typed values for converters //default value for converter this._objNmInput = this._getDomElement('objectName'); this._property = property; this._binding = binding; this._bindingTarget = bindingTarget; this._serviceContainer = serviceContainer; this._instanceServiceContainer = instanceServiceContainer; this._shell = shell; if (!config?.namedConverters) { this._getDomElement('namedConverterInput').style.display = 'none'; } } ready() { this._parseAttributesToProperties(); this._assignEvents(); this.twoWayPossible = false; if (this._bindingTarget == BindingTarget.property || this._bindingTarget == BindingTarget.attribute) this.twoWayPossible = true; if (this._binding) { this.twoWay = this._binding.mode == BindingMode.twoWay; this.expression = this._binding.expression; this.writeBackSignal = (this._binding).writeBackSignal; this.expressionTwoWay = (this._binding).expressionTwoWay; this.historic = (this._binding).historic; this.invert = this._binding.invert; this.objectValueType = this._binding.type; if (this._binding.bindableObjectNames) this.objectNames = this._binding.bindableObjectNames.join(';'); if (this._binding.converter) { if (typeof this._binding.converter === 'string') { this.convertersString = this._binding.converter; } else { for (let c in this._binding.converter) { this.converters.push({ key: c, value: this._binding.converter[c] }); } } } if (this._binding.changedEvents && this._binding.changedEvents.length) this.events = this._binding.changedEvents.join(';'); } if (this.expression) { let edt = this._getDomElement('expression'); if (this.expression.indexOf('\n') >= 0) { edt.style.height = (3 * 17) + 'px'; } } if (this.expressionTwoWay) { let edt = this._getDomElement('expression2way'); if (this.expressionTwoWay.indexOf('\n') >= 0) { edt.style.height = (3 * 17) + 'px'; } } this._bindingsParse(); this._objNmInput.focus(); } _focusRow(index: number) { this._activeRow = index; this._updatefocusedRow(); } _updatefocusedRow() { let g = this._getDomElement('converterGrid'); g.querySelectorAll('div').forEach(x => x.style.background = ''); if (this._activeRow >= 0) (g.children[this._activeRow + 1]).style.background = 'gray'; } _clear() { this.objectNames = ''; this._bindingsRefresh(); } _refresh() { requestAnimationFrame(() => { this._bindingsRefresh(); }); } async _select() { let b = this._shell.createBindableObjectBrowser(); b.initialize(this._serviceContainer, this._instanceServiceContainer, 'binding'); b.title = 'select signal...'; const abortController = new AbortController(); b.objectDoubleclicked.on(() => { abortController.abort(); if (this.objectNames != '') this.objectNames += ';' if (b.selectedObject.specialType == 'signalProperty') { this.objectNames += '?'; } else if (b.selectedObject.bindabletype === 'property') { this.objectNames += '??'; } this.objectNames += b.selectedObject.fullName; this._bindingsRefresh(); }); let res = await this._shell.openConfirmation(b, { x: 100, y: 100, width: 400, height: 300, parent: this, abortSignal: abortController.signal }); if (res) { if (this.objectNames != '') this.objectNames += ';' this.objectNames += b.selectedObject.fullName; this._bindingsRefresh(); } } async showHistoric() { let h = new BindingsEditorHistoric(this.historic); const abortController = new AbortController(); h.title = "Edit historic binding to: " + this._property.name; let res = await this._shell.openConfirmation(h, { x: 100, y: 100, width: 420, height: 510, parent: this, abortSignal: abortController.signal, disableResize: true, cancelText: 'Remove' }); if (!res) { this.historic = null; } else { this.historic = h.historic; } this._bindingsRefresh(); } addConverter() { this.converters.push({ key: '', value: '' }); this._activeRow = this.converters.length - 1; this._bindingsRefresh(); this._updatefocusedRow(); } removeConverter() { this.converters.splice(this._activeRow, 1); this._activeRow = -1; this._bindingsRefresh(); this._updatefocusedRow(); } } customElements.define(BindingsEditor.is, BindingsEditor) ================================================ FILE: packages/web-component-designer-visualization-addons/src/components/BindingsEditorHistoric.ts ================================================ import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent'; export class BindingsEditorHistoric extends BaseCustomWebComponentConstructorAppend { static override readonly template = html` from count limit round return newest entries remove border values step aggregate ignore null to
      from ack q user comment id
      include fields
      update all (ms) percentile integral unit integral interpolation quantile instance `; static override readonly style = css` :host { box-sizing: border-box; }`; static readonly is = 'node-projects-visualization-bindings-editor-historic'; historic: any; static readonly properties = { historic: Object } constructor(historic: any) { super(); this._restoreCachedInititalValues(); this.historic = historic ?? { reloadInterval: 2000 }; } ready() { this._bindingsParse(); } #refreshing = false; refresh() { if (!this.#refreshing) { this.#refreshing = true; this._bindingsRefresh(null, true); this.#refreshing = false; } } } customElements.define(BindingsEditorHistoric.is, BindingsEditorHistoric) ================================================ FILE: packages/web-component-designer-visualization-addons/src/components/EventAssignment.ts ================================================ import { BaseCustomWebComponentConstructorAppend, Disposable, css, html } from "@node-projects/base-custom-webcomponent" import { ContextMenu, copyTextToClipboard, getTextFromClipboard, IContextMenuItem, IDesignItem, IEvent, InstanceServiceContainer, PropertiesHelper } from "@node-projects/web-component-designer"; import { ParameterEditor } from "./ParameterEditor.js"; import { VisualizationShell } from "../interfaces/VisualizationShell.js"; import { VisualizationHandler } from "../interfaces/VisualizationHandler.js"; import { BlocklyScriptEditor } from "../blockly/BlocklyScriptEditor.js"; import { SimpleScriptEditor } from "./SimpleScriptEditor.js"; type eventWithDesignItem = IEvent & { designItem: IDesignItem }; type scriptType = 'jsdirect' | 'js' | 'script' | 'blockly' | 'none' | 'empty'; export class EventAssignment extends BaseCustomWebComponentConstructorAppend { static override style = css` :host { display: grid; grid-template-columns: 20px 1fr auto; overflow-y: auto; align-content: start; height: 100%; } .rect { width: 7px; height: 7px; border: 1px solid black; justify-self: center; cursor: pointer; align-self: center; white-space: nowrap; } input.mth { width: 100%; box-sizing: border-box; } input::placeholder { font-size: 8px; } a { cursor: pointer; white-space: nowrap; } a:hover { cursor: pointer; text-decoration: underline; } button { cursor: pointer; }`; static override template = html` add event: `; static editRowTemplate = html`
      `; static scriptTypeColors = { 'js': 'purple', 'blockly': 'yellow', 'script': 'lightgreen', 'empty': 'pink' } static readonly is: string = 'node-projects-visualization-event-assignment'; constructor() { super(); this._restoreCachedInititalValues(); } ready() { this._bindingsParse(); } private _blocklyToolbox: any; protected _instanceServiceContainer: InstanceServiceContainer; private _selectionChangedHandler: Disposable; private _selectedItems: IDesignItem[]; private _visualizationHandler: VisualizationHandler; private _visualizationShell: VisualizationShell; private _scriptCommandsTypeInfo: any; private _propertiesTypeInfo: any public events: (IEvent & { designItem: IDesignItem })[]; public initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any, blocklyToolbox: any) { this._visualizationHandler = visualizationHandler; this._visualizationShell = visualizationShell; this._scriptCommandsTypeInfo = scriptCommandsTypeInfo; this._propertiesTypeInfo = propertiesTypeInfo; this._blocklyToolbox = blocklyToolbox; } public set instanceServiceContainer(value: InstanceServiceContainer) { this._instanceServiceContainer = value; this._selectionChangedHandler?.dispose() this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => { this.selectedItems = e.selectedElements; }); this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements; } protected _createControlsForScript(eventItem: eventWithDesignItem) { const st = this._getScriptType(eventItem); switch (st) { case 'none': return ''; } //@ts-ignore const ctl = this.constructor.editRowTemplate.content.cloneNode(true); return ctl; } protected _getScriptName(eventItem: IEvent) { if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) { const val = this.selectedItems[0].getAttribute('@' + eventItem.name); if (val[0] === '{') { if (val.includes('name')) { const parsed = JSON.parse(val); return parsed.name; } } else { return val; } } return null; } protected async _changeScriptName(e: KeyboardEvent, eventItem: IEvent) { if (e.key == 'Enter') { if (this.selectedItems && this.selectedItems.length) { if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) { const newValue = (e.target).value; const val = this.selectedItems[0].getAttribute('@' + eventItem.name); if (val.startsWith('{')) { const parsed = JSON.parse(val); parsed.name = newValue; this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(parsed)); } else { this._selectedItems[0].setAttribute('@' + eventItem.name, newValue); } } } } } protected _getRelativeSignalsPath(eventItem: IEvent) { if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) { const val = this.selectedItems[0].getAttribute('@' + eventItem.name); if (val[0] === '{' && val.includes('relativeSignalsPath')) { const parsed = JSON.parse(val); return parsed.relativeSignalsPath; } } return null; } protected async _changeRelativeSignalsPath(e: KeyboardEvent, eventItem: IEvent) { if (e.key == 'Enter') { if (this.selectedItems && this.selectedItems.length) { if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) { const newValue = (e.target).value; const val = this.selectedItems[0].getAttribute('@' + eventItem.name); if (val.startsWith('{')) { const parsed = JSON.parse(val); parsed.relativeSignalsPath = newValue; this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(parsed)); } else { let obj = { name: val, relativeSignalsPath: newValue }; this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(obj)); } } } } } protected _hasParameters(eventItem: IEvent) { if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) { const val = this.selectedItems[0].getAttribute('@' + eventItem.name); return val.includes('parameters') } return false; } protected _getScriptTypeColor(eventItem: eventWithDesignItem) { const st = this._getScriptType(eventItem); const color = EventAssignment.scriptTypeColors[st]; return color ?? 'white'; } protected _getScriptType(eventItem: eventWithDesignItem): scriptType { if (eventItem.designItem.hasAttribute('@' + eventItem.name)) { const val = eventItem.designItem.getAttribute('@' + eventItem.name); if (val.startsWith('{')) { const parsed = JSON.parse(val); if ('blocks' in parsed) return 'blockly'; if ('commands' in parsed) return 'script'; return 'js'; } else if (val == '') return 'empty'; else return 'js'; } return 'none'; } protected _getEventMethodname(eventItem: IEvent): string { if (this.selectedItems.length) return this.selectedItems[0].getAttribute('@' + eventItem.name); return ''; } protected _inputMthName(event: InputEvent, eventItem: IEvent) { let el = event.target as HTMLInputElement this.selectedItems[0].setAttribute('@' + eventItem.name, el.value); } protected _ctxMenu(e: MouseEvent, eventItem: eventWithDesignItem) { e.preventDefault(); const evtType = this._getScriptType(eventItem); if (evtType == 'empty') this._showContextMenuAssignScript(e, eventItem, true) else if (evtType != 'none') { let ctxMenu = [ { title: 'remove', action: () => { this.selectedItems[0].removeAttribute('@' + eventItem.name); this._bindingsRefresh(); } }, { title: '-' }, { title: 'copy', action: () => { copyTextToClipboard(this.selectedItems[0].getAttribute('@' + eventItem.name)); } }, { title: 'paste', action: async () => { this.selectedItems[0].setAttribute('@' + eventItem.name, await getTextFromClipboard()); this._bindingsRefresh(); } }]; ContextMenu.show(ctxMenu, e); } else this._showContextMenuAssignScript(e, eventItem, true) } protected async _addEvent(e: KeyboardEvent) { if (e.key == 'Enter') { let ip = this._getDomElement('addEventInput'); this._selectedItems[0].setAttribute('@' + PropertiesHelper.camelToDashCase(ip.value.replaceAll(' ', '-')), ''); ip.value = ''; this.scrollTop = 0; this.refresh(); } } protected _createAssignScriptContextMenu(event: MouseEvent, eventItem: eventWithDesignItem) { let ctxMenu: IContextMenuItem[] = [ { title: 'Simple Script', action: () => { this._editEvent('script', event, eventItem); } }, { title: 'Javascript', action: () => { let nm = prompt('name of function ?'); if (nm) { this._selectedItems[0].setAttribute('@' + eventItem.name, nm); this.refresh(); this._editEvent('js', null, eventItem); } } }, { title: 'Blockly', action: () => { this._editBlockly(null, eventItem); } } ]; const evtType = this._getScriptType(eventItem); if (evtType != 'none') { ctxMenu.push({ title: '-' }); ctxMenu.push({ title: 'remove', action: () => { this.selectedItems[0].removeAttribute('@' + eventItem.name); this._bindingsRefresh(); } }); } if (evtType != 'empty') { ctxMenu.push({ title: '-' }, { title: 'copy', action: () => { copyTextToClipboard(this.selectedItems[0].getAttribute('@' + eventItem.name)); } }, { title: 'paste', action: async () => { this.selectedItems[0].setAttribute('@' + eventItem.name, await getTextFromClipboard()); this._bindingsRefresh(); } }); } return ctxMenu; } protected async _showContextMenuAssignScript(event: MouseEvent, eventItem: eventWithDesignItem, isCtxMenu: boolean) { event.preventDefault(); const evtType = this._getScriptType(eventItem); if (evtType != 'none' && evtType != 'empty' && !isCtxMenu) { this._editEvent(evtType, event, eventItem); } else { let ctxMenu = this._createAssignScriptContextMenu(event, eventItem) ContextMenu.show(ctxMenu, event); } } protected async _editParameter(e: MouseEvent, eventItem: IEvent & { designItem: IDesignItem }) { const edt = new ParameterEditor(); let existingParameter = {}; edt.title = "ParameterEditor for '" + eventItem.name + "' of '" + eventItem.designItem.name + "'"; let data = eventItem.designItem.getAttribute('@' + eventItem.name); if (data && data[0] == '{') { try { const parsed = JSON.parse(data); existingParameter = parsed.parameters; } catch { } } edt.setParametersObject(existingParameter); const result = await this._visualizationShell.openConfirmation(edt, { x: 100, y: 100, width: 700, height: 500 }); if (result) { const par = edt.getParametersObject(); let newObj = { name: data, parameters: par } if (data && data[0] == '{') { newObj = JSON.parse(data); newObj.parameters = par; } if (par == null) delete newObj.parameters; const newData = JSON.stringify(newObj); eventItem.designItem.setAttribute('@' + eventItem.name, newData); this._bindingsRefresh(); } } protected async _editBlockly(e: MouseEvent, eventItem: eventWithDesignItem) { const edt = new BlocklyScriptEditor(this._blocklyToolbox); edt.title = "Blockly Script for '" + eventItem.name + "' of '" + eventItem.designItem.name + "'"; let data = eventItem.designItem.getAttribute('@' + eventItem.name); let parameters = null; let relativeSignalsPath = null; if (data) { const parsed = JSON.parse(data); parameters = parsed.parameters; relativeSignalsPath = parsed.relativeSignalsPath; edt.load(parsed); } const result = await this._visualizationShell.openConfirmation(edt, { x: 100, y: 100, width: 700, height: 500 }); if (result) { const blockObj = edt.save(); if (parameters) { blockObj.parameters = parameters; } if (relativeSignalsPath) { blockObj.relativeSignalsPath = relativeSignalsPath; } eventItem.designItem.setAttribute('@' + eventItem.name, JSON.stringify(blockObj)); this._bindingsRefresh(); } } protected async _editJavascript(e: MouseEvent, eventItem: eventWithDesignItem) { // todo ? } protected async _editSimpleScript(e: MouseEvent, eventItem: eventWithDesignItem) { let scriptString = eventItem.designItem.getAttribute('@' + eventItem.name); if (!scriptString || scriptString.startsWith('{')) { let script = { commands: [] }; let parameters = null; let relativeSignalsPath = null; if (scriptString) { script = JSON.parse(scriptString); //@ts-ignore parameters = script.parameters; //@ts-ignore relativeSignalsPath = script.relativeSignalsPath; } let sc = new SimpleScriptEditor(); sc.serviceContainer = eventItem.designItem.serviceContainer; sc.instanceServiceContainer = eventItem.designItem.instanceServiceContainer; sc.scriptCommandsTypeInfo = this._scriptCommandsTypeInfo; sc.propertiesTypeInfo = this._propertiesTypeInfo; sc.visualizationShell = this._visualizationShell; sc.visualizationHandler = this._visualizationHandler; sc.loadScript(script); sc.title = "Script '" + eventItem.name + "' on " + eventItem.designItem.name; let res = await this._visualizationShell.openConfirmation(sc, { x: 100, y: 100, width: 600, height: 500 }); if (res) { let scriptCommands = sc.getScriptCommands(); if (scriptCommands && scriptCommands.length) { const sc = { commands: scriptCommands }; if (parameters) { //@ts-ignore sc.parameters = parameters; } if (relativeSignalsPath) { //@ts-ignore sc.relativeSignalsPath = relativeSignalsPath; } let json = JSON.stringify(sc); eventItem.designItem.setAttribute('@' + eventItem.name, json); this._bindingsRefresh(); } } } } public async _editEvent(evtType: scriptType, e: MouseEvent, eventItem: eventWithDesignItem) { if (evtType == 'js') { this._editJavascript(e, eventItem); } else if (evtType == 'blockly') { this._editBlockly(e, eventItem); } else { this._editSimpleScript(e, eventItem); } } public refresh() { if (this._selectedItems != null && this._selectedItems.length) { this.events = this._selectedItems[0].serviceContainer.getLastServiceWhere('eventsService', x => x.isHandledElementFromEventsService(this._selectedItems[0])).getPossibleEvents(this._selectedItems[0]).map(x => ({ ...x, designItem: this._selectedItems[0] })); } else { this.events = []; } this._bindingsRefresh(); } get selectedItems() { return this._selectedItems; } set selectedItems(items: IDesignItem[]) { if (this._selectedItems != items) { this._selectedItems = items; this.refresh(); } } } customElements.define(EventAssignment.is, EventAssignment); ================================================ FILE: packages/web-component-designer-visualization-addons/src/components/ParameterEditor.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent" export class ParameterEditor extends BaseCustomWebComponentConstructorAppend { static override style = css` :host { display: grid; grid-template-columns: 80px 80px 80px auto; overflow-y: auto; align-content: start; height: 100%; padding: 10px; gap: 5px; box-sizing: border-box; } span { font-size: 10px; }`; static override template = html` name type value `; public static is = 'node-projects-visualization-parameter-editor'; constructor() { super(); this._restoreCachedInititalValues(); } ready() { this._bindingsParse(); } protected _parameterArray: { key: string, type: string, value: any }[]; setParametersObject(value: Record) { if (value != null) this._parameterArray = Object.keys(value).map(x => ({ key: x, type: typeof value[x] === 'object' ? 'null' : typeof value[x], value: value[x] })); else this._parameterArray = []; this._bindingsRefresh(); } getParametersObject() { let hasPar = false; const obj = {}; for (const p of this._parameterArray) { if (p.key) { hasPar = true; obj[p.key] = null; switch (p.type) { case 'string': obj[p.key] = p.value.toString(); break; case 'number': const f = parseFloat(p.value); obj[p.key] = isNaN(f) ? 0 : f; break; case 'boolean': obj[p.key] = !!p.value; break; } } } return hasPar ? obj : null; } _remove(index: number) { this._parameterArray.splice(index, 1); this._bindingsRefresh(); } _add() { this._parameterArray.push({ type: 'null' }); this._bindingsRefresh(); } } customElements.define(ParameterEditor.is, ParameterEditor); ================================================ FILE: packages/web-component-designer-visualization-addons/src/components/SimpleScriptEditor.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { Script } from "../scripting/Script.js"; import { ScriptCommands } from "../scripting/ScriptCommands.js"; import { ContextMenu, InstanceServiceContainer, ServiceContainer } from "@node-projects/web-component-designer"; import { IProperty, typeInfoFromJsonSchema } from "@node-projects/propertygrid.webcomponent"; import { defaultOptions } from "@node-projects/web-component-designer-widgets-wunderbaum"; import { Wunderbaum } from 'wunderbaum'; //@ts-ignore import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' }; import { WbRenderEventType } from "types"; import { VisualizationPropertyGrid } from "./VisualizationPropertyGrid.js"; import { VisualizationHandler } from "../interfaces/VisualizationHandler.js"; import { VisualizationShell } from "../interfaces/VisualizationShell.js"; import '@node-projects/splitview.webcomponent'; import { ScriptUpgrades } from "../scripting/ScriptUpgrader.js"; export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` :host { background: white; } .list{ display: grid; grid-template-columns: 1fr 40px; width: calc(100% - 6px); box-sizing: border-box; margin: 3px; } .list button{ padding: 5px 10px; box-sizing: border-box; display: flex; justify-content: center; margin-right: 5px; margin-left: 5px; } node-projects-visualization-property-grid { width: 100%; height: 100%; } `; static override readonly template = html`
      `; static readonly is = 'node-projects-visualization-simple-script-editor'; public serviceContainer: ServiceContainer; public instanceServiceContainer: InstanceServiceContainer; public visualizationHandler: VisualizationHandler; public visualizationShell: VisualizationShell; public scriptCommandsTypeInfo: any; public propertiesTypeInfo: any; private _script: Script; private _commandListDiv: HTMLDivElement; private _commandListFancyTree: Wunderbaum; private _possibleCommands: HTMLSelectElement; private _propertygrid: VisualizationPropertyGrid; constructor() { super(); this._restoreCachedInititalValues(); this._commandListDiv = this._getDomElement('commandList'); this._possibleCommands = this._getDomElement('possibleCommands'); this._propertygrid = this._getDomElement('propertygrid'); this.shadowRoot.adoptedStyleSheets = [wunderbaumStyle, SimpleScriptEditor.style]; } async ready() { this.addPossibleCommands(); this._parseAttributesToProperties(); this._bindingsParse(null, true); this._assignEvents(); let editComplex = async (data: { value: any, propertyPath: string }) => { let pg = new VisualizationPropertyGrid(); pg.visualizationHandler = this.visualizationHandler; pg.visualizationShell = this.visualizationShell; pg.serviceContainer = this.serviceContainer; pg.instanceServiceContainer = this.instanceServiceContainer; pg.bindableObjectsTarget = 'script'; pg.getTypeInfo = (obj, type) => typeInfoFromJsonSchema(this.propertiesTypeInfo, obj, type); pg.showHead = false; pg.typeName = 'IScriptMultiplexValue'; pg.title = 'Complex for "' + data.propertyPath + '"'; if (typeof data.value === 'object') pg.selectedObject = data.value ?? {}; else pg.selectedObject = {}; pg.bindingDoubleClicked = (b) => { if (b.bindabletype == 'property') { pg.setPropertyValue('source', 'property'); } else if (b.bindabletype == 'context') { pg.setPropertyValue('source', 'context'); } else { pg.setPropertyValue('source', 'signal'); } pg.setPropertyValue('name', b.fullName) pg.refresh(); } let res = await this.visualizationShell.openConfirmation(pg, { x: 100, y: 100, width: 400, height: 500, parent: this }); if (res) { this._propertygrid.setPropertyValue(data.propertyPath, pg.selectedObject); this._propertygrid.refresh(); } } this._propertygrid.visualizationHandler = this.visualizationHandler; this._propertygrid.visualizationShell = this.visualizationShell; this._propertygrid.serviceContainer = this.serviceContainer; this._propertygrid.instanceServiceContainer = this.instanceServiceContainer; this._propertygrid.bindableObjectsTarget = 'script'; this._propertygrid.getTypeInfo = (obj, type) => typeInfoFromJsonSchema(this.scriptCommandsTypeInfo, obj, type); this._propertygrid.getSpecialEditorForType = async (property: IProperty, currentValue, propertyPath: string, wbRender: WbRenderEventType, additionalInfo?: any) => { //@ts-ignore if (!property.specialAllreadyAdded) { //@ts-ignore property.specialAllreadyAdded = true; if (property.format === 'collection') { //TODO: create a collection edt. in property grid control used } else if ((typeof currentValue === 'object' && currentValue !== null) || property.format === 'complex') { let rB = document.createElement('button'); rB.style.height = 'calc(100% - 6px)'; rB.style.position = 'relative'; rB.style.display = 'flex'; rB.style.justifyContent = 'center'; rB.style.width = '20px'; rB.style.boxSizing = 'content-box'; rB.innerText = 'del'; rB.onclick = () => { this._propertygrid.setPropertyValue(propertyPath, undefined); this._propertygrid.refresh(); } wbRender.nodeElem.insertAdjacentElement('afterbegin', rB); let d = document.createElement('div'); d.style.display = 'flex'; let sp = document.createElement('span'); if (currentValue) sp.innerText = (currentValue.source ?? '') + ': ' + (currentValue.name ?? ''); else sp.innerText = ''; sp.style.overflow = 'hidden'; sp.style.whiteSpace = 'nowrap'; sp.style.textOverflow = 'ellipsis'; sp.style.flexGrow = '1'; sp.title = JSON.stringify(currentValue); d.appendChild(sp); let b = document.createElement('button'); b.innerText = '...'; b.onclick = () => { editComplex({ value: currentValue, propertyPath }) } d.appendChild(b); wbRender.nodeElem.style.display = 'flex'; return d; } else { let b = document.createElement('button'); b.style.height = 'calc(100% - 6px)'; b.style.position = 'relative'; b.style.display = 'flex'; b.style.justifyContent = 'center'; b.style.width = '20px'; b.style.boxSizing = 'content-box'; b.title = 'complex property value'; b.style.opacity = '0.2'; b.innerText = '...'; b.onclick = () => { editComplex({ value: currentValue, propertyPath }) } wbRender.nodeElem.insertAdjacentElement('afterbegin', b); wbRender.nodeElem.style.display = 'flex'; } } return null; } this._propertygrid.propertyNodeContextMenu.on((data) => { ContextMenu.show([{ title: 'edit complex value', action: async () => { editComplex(data); } }, { title: 'edit string', action: async () => { const v = prompt("enter value:"); if (v) { this._propertygrid.setPropertyValue(data.propertyPath, v); this._propertygrid.refresh(); } } }, { title: 'remove complex value', action: async () => { this._propertygrid.setPropertyValue(data.propertyPath, undefined); this._propertygrid.refresh(); } }], data.event); }) } //Converter from TypscriptJsonSchema to our Property list... private async addPossibleCommands() { let commands = Object.keys(this.scriptCommandsTypeInfo.definitions).filter(x => this.scriptCommandsTypeInfo.definitions[x].type == 'object'); for (let c of commands) { if (c == 'ScriptCommands') continue; let option = document.createElement('option'); option.innerText = c; this._possibleCommands.add(option); } } loadScript(script: Script) { this._script = script; let commandListTreeItems = []; for (let c of this._script.commands) { c = ScriptUpgrades.upgradeScriptCommand(c); commandListTreeItems.push(this.createTreeItem(c)); }; this._commandListFancyTree = new Wunderbaum({ ...defaultOptions, element: this._commandListDiv, icon: false, source: commandListTreeItems, activate: (e) => { this._propertygrid.selectedObject = e.node.data.data.item; }, render: (e) => { if (e.isNew) { let span = e.nodeElem; span.oncontextmenu = (ev) => { e.node.setActive(); if (e.node.data.contextMenu) { e.node.data.contextMenu(ev, e.node.data, e.node); } ev.preventDefault(); return false; } } }, dnd: { guessDropEffect: true, preventRecursion: true, preventVoidMoves: false, serializeClipboardData: false, dragStart: (e) => { e.event.dataTransfer.effectAllowed = "move"; e.event.dataTransfer.dropEffect = "move"; return true; }, dragEnter: (e) => { e.event.dataTransfer.dropEffect = 'move'; return true; }, dragOver: (e) => { e.event.dataTransfer.dropEffect = 'move'; }, drop: async (e) => { e.sourceNode.moveTo(e.node, e.region == 'before' ? 'before' : 'after'); } } }); } private createTreeItem(currentItem: ScriptCommands) { let cti = { title: currentItem.type, data: { item: currentItem }, contextMenu: (e, data, node) => { ContextMenu.show([{ title: 'Remove Item', action: (e) => node.remove() }], e); } }; return cti; } addItem() { const cmdName = this._possibleCommands.value; const command = { type: cmdName } const ti = this.createTreeItem(command); this._commandListFancyTree.addChildren(ti); } getScriptCommands() { let children = this._commandListFancyTree.root.children; return children.map(x => x.data.data.item); } } customElements.define(SimpleScriptEditor.is, SimpleScriptEditor); ================================================ FILE: packages/web-component-designer-visualization-addons/src/components/VisualizationPropertyGrid.ts ================================================ import { IProperty, PropertyGrid } from '@node-projects/propertygrid.webcomponent' import { WbRenderEventType } from "types"; import { VisualizationHandler } from '../interfaces/VisualizationHandler'; import { VisualizationShell } from '../interfaces/VisualizationShell'; import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco'; import { BindableObjectsTarget, IBindableObject, InstanceServiceContainer, ServiceContainer } from '@node-projects/web-component-designer'; export class VisualizationPropertyGrid extends PropertyGrid { public serviceContainer: ServiceContainer; public instanceServiceContainer: InstanceServiceContainer; public visualizationHandler: VisualizationHandler; public visualizationShell: VisualizationShell; public bindableObjectsTarget: BindableObjectsTarget = 'property'; constructor() { super(); } bindingDoubleClicked: (bindableObject: IBindableObject) => void; public override async getEditorForType(property: IProperty, currentValue, propertyPath: string, wbRender: WbRenderEventType, additionalInfo?: any): Promise { if (this.getSpecialEditorForType) { let edt = await this.getSpecialEditorForType(property, currentValue, propertyPath, wbRender, additionalInfo); if (edt) return edt; } switch (property.format) { case 'screen': { let editor = document.createElement('select'); editor.style.width = '100%'; const akop = document.createElement('option'); akop.value = currentValue ?? ''; akop.innerText = currentValue ?? ''; editor.appendChild(akop); for (let v of await this.visualizationHandler.getAllNames('screen')) { if (v == currentValue) continue; const op = document.createElement('option'); op.value = v; op.innerText = v; editor.appendChild(op); } editor.onchange = () => { this.setPropertyValue(propertyPath, editor.value); }; editor.value = currentValue; return editor; } case 'signal': { let cnt = document.createElement('div'); cnt.style.display = 'flex'; let inp = document.createElement('input'); inp.value = currentValue ?? ''; inp.style.flexGrow = '1'; inp.style.width = '0'; inp.onchange = (e) => this.setPropertyValue(propertyPath, inp.value); inp.onfocus = (e) => { inp.selectionStart = 0; inp.selectionEnd = inp.value?.length; } cnt.appendChild(inp); let btn = document.createElement('button'); btn.textContent = '...'; btn.onclick = async () => { let b = this.visualizationShell.createBindableObjectBrowser(); b.initialize(this.serviceContainer, this.instanceServiceContainer, this.bindableObjectsTarget); b.title = 'select signal...'; const abortController = new AbortController(); b.objectDoubleclicked.on(() => { if (this.bindingDoubleClicked) this.bindingDoubleClicked(b.selectedObject); abortController.abort(); inp.value = b.selectedObject.fullName; this.setPropertyValue(propertyPath, inp.value); }); let res = await this.visualizationShell.openConfirmation(b, { x: 100, y: 100, width: 400, height: 300, parent: this, abortSignal: abortController.signal }); if (res) { inp.value = b.selectedObject.fullName; this.setPropertyValue(propertyPath, inp.value); } } cnt.appendChild(btn); return cnt; } case 'html': case 'script': { let editor = document.createElement('div'); editor.style.boxSizing = 'border-box'; editor.style.width = '100%'; editor.style.display = 'flex'; let inp = document.createElement('textarea'); inp.style.boxSizing = 'border-box'; inp.value = currentValue ?? ''; inp.style.width = '100%'; inp.onblur = e => { this.setPropertyValue(propertyPath, inp.value); } editor.appendChild(inp); let btn = document.createElement('button'); btn.innerHTML = '...'; btn.style.boxSizing = 'border-box'; btn.onclick = async () => { let cvm = new CodeViewMonaco(); const monaco = await CodeViewMonaco.getMonacoLib(); if (property.format == 'html') { cvm.language = 'html'; } else { let monacoInfo = { content: `declare global { var context: { event: Event, element: Element }; }`, filePath: 'global.d.ts' } //@ts-ignore monaco.languages.typescript.typescriptDefaults.setExtraLibs([monacoInfo]); cvm.language = 'javascript'; } cvm.code = inp.value; cvm.style.position = 'relative'; let res = await this.visualizationShell.openConfirmation(cvm, { x: 200, y: 200, width: 600, height: 400, parent: this }); if (res) { inp.value = cvm.getText(); this.setPropertyValue(propertyPath, inp.value); } } editor.appendChild(btn); return editor; } } return super.getEditorForType(property, currentValue, propertyPath, wbRender, additionalInfo); } } customElements.define("node-projects-visualization-property-grid", VisualizationPropertyGrid); ================================================ FILE: packages/web-component-designer-visualization-addons/src/helpers/BindingsHelper.ts ================================================ import { TypedEvent, cssFromString } from "@node-projects/base-custom-webcomponent"; import { VisualizationBinding } from "../interfaces/VisualizationBinding.js"; import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js"; import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js"; import { PropertiesHelper } from "@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js"; //;,[ are not allowed in bindings, so they could be used for a short form... export type SpecialValueHandler = { valueProvider: (propertyName: string, context: { element: Element, binding?: namedBinding, relativeSignalPath: string, root: HTMLElement, [key: string]: any }) => Promise | any, valueChangedCallbacks: Map void)[]> } export const bindingPrefixProperty = 'bind-prop:'; export const bindingPrefixAttribute = 'bind-attr:'; export const bindingPrefixClass = 'bind-class:'; export const bindingPrefixCss = 'bind-css:'; export const bindingPrefixCssVar = 'bind-cssvar:'; export const bindingPrefixContent = 'bind-content:'; export const bindingPrefixVisible = 'bind-visible:'; export const bindingPrefixInsideCss = 'bind('; export const bindingPrefixInsideCssVarName = '--tmpBinding_'; export const bindingsInCssRegex = /{{(.*)}}/; export type namedBinding = [name: string, binding: VisualizationBinding]; export function isLit(element: Element) { //@ts-ignore return element.constructor?.elementProperties != null; } export function parseBindingString(id: string) { let parts: string[] = []; let signals: string[] = []; let tx = ''; for (let n = 0; n < id.length; n++) { if (id[n] == '{') { parts.push(tx); tx = ''; } else if (id[n] == '}') { signals.push(tx); tx = ''; } else { tx += id[n]; } } parts.push(tx); return { parts, signals }; } export function getNestedProperty(obj, path) { const parts = path.split('.'); let current = obj; for (const part of parts) { if (current == null || typeof current !== 'object') return undefined; current = current[part]; } return current; } class IndirectSignal { private parts: string[]; private signals: string[]; private values: string[]; private unsubscribeTargetValue: [((id: string, value: any) => void), any]; private cleanupCalls = []; private combinedName: string; private disposed: boolean; private valueChangedCb: (value: any) => void private visualizationHandler: VisualizationHandler; private element: Element; private relativeSignalPath: string; constructor(bindingsHelper: BindingsHelper, visualizationHandler: VisualizationHandler, id: string, valueChangedCb: (value: State) => void, element: Element, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler) { this.visualizationHandler = visualizationHandler; this.valueChangedCb = valueChangedCb; this.element = element; this.relativeSignalPath = relativeSignalPath; this.parseIndirectBinding(id); this.values = new Array(this.signals.length); for (let i = 0; i < this.signals.length; i++) { let nm = this.signals[i]; if (nm[0] === '?' && nm[1] === '?') { const propNm = nm.substring(2); if (!propNm.includes('.')) { this.handleValueChanged(root[propNm], i); const evtCallback = () => this.handleValueChanged(root[propNm], i); const evtName = bindingsHelper.getChangedEventName(root, propNm); root.addEventListener(evtName, (evtCallback)); this.cleanupCalls.push(() => root.removeEventListener(evtName, evtCallback)); } else { const val = getNestedProperty(root, propNm); this.handleValueChanged(val, i); } continue; } else if (nm[0] === '#' && nm[1] === '#') { const propNm = nm.substring(2); if (!propNm.includes('.')) { this.handleValueChanged(element[propNm], i); const evtCallback = () => this.handleValueChanged(element[propNm], i); const evtName = bindingsHelper.getChangedEventName(element, propNm); element.addEventListener(evtName, (evtCallback)); this.cleanupCalls.push(() => element.removeEventListener(evtName, evtCallback)); } else { const val = getNestedProperty(element, propNm); this.handleValueChanged(val, i); } continue; } else if (nm[0] === '§') { const mS = nm.substring(1); const value = specialValueHandler.valueProvider(mS, { element, relativeSignalPath, root }); if (value instanceof Promise) value.then(v => this.handleValueChanged(v, i)); else this.handleValueChanged(value, i); if (!specialValueHandler.valueChangedCallbacks) specialValueHandler.valueChangedCallbacks = new Map(); let changeList = specialValueHandler.valueChangedCallbacks.get(mS); if (changeList == null) { changeList = []; specialValueHandler.valueChangedCallbacks.set(mS, changeList); } changeList.push(() => { const value = specialValueHandler.valueProvider(mS, { element, relativeSignalPath, root }) if (value instanceof Promise) value.then(v => this.handleValueChanged(v, i)); else this.handleValueChanged(value, i); }); } else if (nm[0] === '?') { //TODO: react to changes of signal name in prop if (!nm.includes('.')) { nm = root[nm.substring(1)]; } else { nm = getNestedProperty(root, nm.substring(1)); } } else if (nm[0] === '#') { //TODO: react to changes of signal name in prop if (!nm.includes('.')) { nm = root[nm.substring(1)]; } else { nm = getNestedProperty(root, nm.substring(1)); } } let cb = (id: string, value: any) => this.handleValueChanged(value.val, i); const subscr = this.visualizationHandler.subscribeState(nm, cb); this.cleanupCalls.push(() => this.visualizationHandler.unsubscribeState(this.signals[i], cb, subscr)); } } private parseIndirectBinding(id: string) { let { parts, signals } = parseBindingString(id); this.parts = parts; this.signals = signals; for (let n = 0; n < signals.length; n++) { if (signals[n][0] == '.') signals[n] = this.visualizationHandler.getNormalizedSignalName(signals[n], this.relativeSignalPath, this.element); } } handleValueChanged(value: any, index: number) { this.values[index] = value; let nm = this.parts[0]; for (let i = 0; i < this.parts.length - 1; i++) { let v = this.values[i]; if (v == null) return; nm += v + this.parts[i + 1]; } if (nm[0] == '.') nm = this.visualizationHandler.getNormalizedSignalName(nm, this.relativeSignalPath, this.element); if (this.combinedName != nm) { if (this.unsubscribeTargetValue) { this.visualizationHandler.unsubscribeState(this.combinedName, this.unsubscribeTargetValue[0], this.unsubscribeTargetValue[1]); } if (!this.disposed) { this.combinedName = nm; let cb = (id: string, value: any) => this.valueChangedCb(value); this.unsubscribeTargetValue = [cb, this.visualizationHandler.subscribeState(nm, cb)]; } } } dispose() { this.disposed = true; if (this.unsubscribeTargetValue) { this.visualizationHandler.unsubscribeState(this.combinedName, this.unsubscribeTargetValue[0], this.unsubscribeTargetValue[1]); this.unsubscribeTargetValue = null; } for (let i = 0; i < this.signals.length; i++) { this.cleanupCalls[i](); } } setState(value) { if (!this.disposed) { this.visualizationHandler.setState(this.combinedName, value); } } } export class BindingsHelper { _visualizationHandler: VisualizationHandler; namedConverterCallback: (converter: string, value: any, element: Element, binding: namedBinding) => any; constructor(visualizationHandler: VisualizationHandler) { this._visualizationHandler = visualizationHandler; } getChangedEventName(element: Element, propertyName: string) { const posColon = propertyName.indexOf('::'); if (posColon >= 0) return propertyName.substring(posColon + 2); if (element instanceof HTMLInputElement) return 'change'; if (element instanceof HTMLSelectElement) return 'change'; if (isLit(element)) return PropertiesHelper.camelToDashCase(propertyName); return PropertiesHelper.camelToDashCase(propertyName) + '-changed'; } //Not allowed chars in Var Names: |{}(),;:[] parseBinding(element: Element, name: string, value: string, bindingTarget: BindingTarget, prefix: string): namedBinding { //Loooks like: //a:var1;b:var2;expression //=varname => two way //!varname => inverted //{...} => json let propname = name.substring(prefix.length); if (bindingTarget === BindingTarget.cssvar) propname = '--' + propname; if (!value.startsWith('{')) { let binding: VisualizationBinding = { signal: value, target: bindingTarget } if (value[0] === '=') { value = value.substring(1); binding.signal = value; if (value.includes('::')) { const parts = value.split('::'); value = parts[0]; binding.signal = value; binding.events = parts[1].split(','); } binding.twoWay = true; if (!binding.events) { if (element instanceof HTMLInputElement) binding.events = [this.getChangedEventName(element, propname)]; else if (element instanceof HTMLSelectElement) binding.events = [this.getChangedEventName(element, propname)]; else { if (isLit(element)) { binding.events = [this.getChangedEventName(element, propname)]; } else { binding.events = [this.getChangedEventName(element, propname)]; //Binding could be a lit elemnt but not yet loaded binding.maybeLitElement = true; binding.litEventNames = [this.getChangedEventName(element, propname)]; } } } } if (value[0] === '!') { binding.signal = value.substring(1); binding.inverted = true; } if (binding.signal.includes(';')) { const parts = binding.signal.split(';'); binding.expression = parts.pop(); binding.signal = parts.join(';'); } if (bindingTarget === BindingTarget.cssvar || bindingTarget === BindingTarget.class) return [BindingsHelper.dotToCamelCase(propname), binding]; if (bindingTarget === BindingTarget.attribute) return [propname, binding]; return [PropertiesHelper.dashToCamelCase(propname), binding]; } let binding: VisualizationBinding = JSON.parse(value); binding.target = bindingTarget; if (binding.twoWay && (binding.events == null || binding.events.length == 0)) { if (element instanceof HTMLInputElement) binding.events = ['change']; else if (element instanceof HTMLSelectElement) binding.events = ['change']; else { binding.events = [this.getChangedEventName(element, propname)]; } } if (bindingTarget === BindingTarget.cssvar || bindingTarget === BindingTarget.class) return [BindingsHelper.dotToCamelCase(propname), binding]; if (bindingTarget === BindingTarget.attribute) return [propname, binding]; return [PropertiesHelper.dashToCamelCase(propname), binding]; } serializeBinding(element: Element, targetName: string, binding: VisualizationBinding): [name: string, value: string] { let bindingCopy = { ...binding }; delete bindingCopy.type; if (!binding.twoWay) { delete bindingCopy.events; delete bindingCopy.expressionTwoWay; } else if ((binding.events != null && binding.events.length == 1)) { if (element instanceof HTMLInputElement && binding.events?.[0] == "change") delete bindingCopy.events; else if (element instanceof HTMLSelectElement && binding.events?.[0] == "change") delete bindingCopy.events; else if (isLit(element) && binding.events?.[0] == targetName) delete bindingCopy.events; else if (!isLit(element) && binding.events?.[0] == targetName + '-changed') delete bindingCopy.events; } const eventsString = bindingCopy.twoWay && bindingCopy.events?.length > 0 ? '::' + bindingCopy.events.join(',') : ''; let needsJson = false; if (eventsString && binding.expression?.includes('::') || binding.expressionTwoWay?.includes('::')) needsJson = true; if (binding.signal.trim()[0] == '{') needsJson = true; if (!needsJson && binding.target == BindingTarget.property && !binding.expression && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { if (targetName == 'textContent') return [bindingPrefixContent + 'text', (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString]; if (targetName == 'innerHTML') return [bindingPrefixContent + 'html', (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString]; return [bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString]; } //Multi Var Expressions if (!needsJson && binding.target == BindingTarget.property && binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { if (targetName == 'textContent') return [bindingPrefixContent + 'text', (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString]; if (targetName == 'innerHTML') return [bindingPrefixContent + 'html', (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString]; return [bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString]; } if (!needsJson && binding.target == BindingTarget.attribute && !binding.expression && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString]; } //Multi Var Expressions if (!needsJson && binding.target == BindingTarget.attribute && binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName), (binding.twoWay ? '=' : '') + (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString]; } if (!needsJson && binding.target == BindingTarget.class && !binding.expression && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixClass + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString]; } //Multi Var Expressions if (!needsJson && binding.target == BindingTarget.class && binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixClass + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString]; } if (!needsJson && binding.target == BindingTarget.css && !binding.expression && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString]; } //Multi Var Expressions if (!needsJson && binding.target == BindingTarget.css && binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString]; } if (!needsJson && binding.target == BindingTarget.cssvar && !binding.expression && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixCssVar + BindingsHelper.camelToDotCase(targetName.substring(2)), (binding.inverted ? '!' : '') + binding.signal + (!binding.twoWay && binding.signal.includes(';') ? ';' : '') + eventsString]; } //Multi Var Expressions if (!needsJson && binding.target == BindingTarget.cssvar && binding.expression && !binding.expression.includes("\n") && !binding.expression.includes(";") && !binding.expressionTwoWay && binding.converter == null && //!binding.type && !binding.historic && !binding.writeBackSignal) { return [bindingPrefixCssVar + PropertiesHelper.camelToDashCase(targetName), (binding.inverted ? '!' : '') + binding.signal + ';' + binding.expression + eventsString]; } if (binding.inverted === null || binding.inverted === false) { delete bindingCopy.inverted; } if (binding.expression === null || binding.expression === '') { delete bindingCopy.expression; } if (binding.expressionTwoWay === null || binding.expressionTwoWay === '') { delete bindingCopy.expressionTwoWay; } if (binding.twoWay === null || binding.twoWay === false) { delete bindingCopy.twoWay; } /*if (binding.type === null || binding.type === '') { delete bindingCopy.type; }*/ delete bindingCopy.target; if (!binding.historic) { delete bindingCopy.historic; } if (binding.target == BindingTarget.content) return [bindingPrefixContent + 'html', JSON.stringify(bindingCopy)]; if (binding.target == BindingTarget.attribute) return [bindingPrefixAttribute + PropertiesHelper.camelToDashCase(targetName), JSON.stringify(bindingCopy)]; if (binding.target == BindingTarget.class) return [bindingPrefixClass + BindingsHelper.camelToDotCase(targetName), JSON.stringify(bindingCopy)]; if (binding.target == BindingTarget.css) return [bindingPrefixCss + PropertiesHelper.camelToDashCase(targetName), JSON.stringify(bindingCopy)]; if (binding.target == BindingTarget.cssvar) return [bindingPrefixCssVar + BindingsHelper.camelToDotCase(targetName.substring(2)), JSON.stringify(bindingCopy)]; if (binding.target == BindingTarget.property && targetName == 'innerHTML') return [bindingPrefixContent + 'html', JSON.stringify(bindingCopy)]; if (binding.target == BindingTarget.property && targetName == 'textContent') return [bindingPrefixContent + 'text', JSON.stringify(bindingCopy)]; return [bindingPrefixProperty + PropertiesHelper.camelToDashCase(targetName), JSON.stringify(bindingCopy)]; } getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget) { if (propertyTarget == BindingTarget.attribute) { return bindingPrefixAttribute + PropertiesHelper.camelToDashCase(propertyName); } if (propertyTarget == BindingTarget.class) { return bindingPrefixClass + BindingsHelper.camelToDotCase(propertyName); } if (propertyTarget == BindingTarget.css) { return bindingPrefixCss + PropertiesHelper.camelToDashCase(propertyName); } if (propertyTarget == BindingTarget.visible) { return bindingPrefixVisible; } if (propertyTarget == BindingTarget.cssvar) { return bindingPrefixCssVar + BindingsHelper.camelToDotCase(propertyName); } if (propertyTarget == BindingTarget.property && propertyName == 'innerHTML') { return bindingPrefixContent + 'html'; } if (propertyTarget == BindingTarget.property && propertyName == 'textContent') { return bindingPrefixContent + 'text'; } return bindingPrefixProperty + PropertiesHelper.camelToDashCase(propertyName); } *getBindings(element: Element) { if (element.attributes) { for (let a of element.attributes) { if (a.name.startsWith(bindingPrefixProperty)) { yield this.parseBinding(element, a.name, a.value, BindingTarget.property, bindingPrefixProperty); } else if (a.name.startsWith(bindingPrefixContent)) { yield this.parseBinding(element, a.name === 'bind-content:html' ? 'bind-prop:inner-h-t-m-l' : 'bind-prop:text-content', a.value, BindingTarget.property, bindingPrefixProperty); } else if (a.name.startsWith(bindingPrefixAttribute)) { yield this.parseBinding(element, a.name, a.value, BindingTarget.attribute, bindingPrefixAttribute); } else if (a.name.startsWith(bindingPrefixClass)) { yield this.parseBinding(element, a.name, a.value, BindingTarget.class, bindingPrefixClass); } else if (a.name.startsWith(bindingPrefixCss)) { yield this.parseBinding(element, a.name, a.value, BindingTarget.css, bindingPrefixCss); } else if (a.name.startsWith(bindingPrefixCssVar)) { yield this.parseBinding(element, a.name, a.value, BindingTarget.cssvar, bindingPrefixCssVar); } else if (a.name.startsWith(bindingPrefixVisible)) { yield this.parseBinding(element, a.name, a.value, BindingTarget.visible, bindingPrefixVisible); } } } } applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler, skipChildrenFor?: (element: Element) => boolean): (() => void)[] { let retVal: (() => void)[] = []; const tw = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT); let e: Element; while (e = tw.nextNode()) { const bindings = this.getBindings(e); for (let b of bindings) { try { let applied = this.applyBinding(e, b, relativeSignalPath, root, specialValueHandler); retVal.push(applied); if (b[1].maybeLitElement && e.localName.includes('-') && !customElements.get(e.localName)) { const el = e; const bnd = b; customElements.whenDefined(e.localName).then(() => { if (isLit(el)) { applied(); bnd[1].events = bnd[1].litEventNames; retVal.push(this.applyBinding(el, bnd, relativeSignalPath, root, specialValueHandler)); } }) } } catch (err) { console.warn("error applying binding", e, b, err) } } if (skipChildrenFor) { if (skipChildrenFor(e)) { e = tw.nextSibling(); continue; } } } return retVal; } static #cssBindingsVarId = 0; async parseCssBindings(sheet: string, element: Element, relativeSignalPath: string, root: HTMLElement): Promise<[stylesheet: CSSStyleSheet, unsub: (() => void)[]]> { const parser = (await import("@node-projects/css-parser")); const ast = parser.parse(sheet); let unsub: (() => void)[]; for (let r of ast.stylesheet.rules) { if (r.type === parser.CssTypes.rule) { for (const d of r.declarations) { if (d.type === parser.CssTypes.declaration) { if (d.value.includes(bindingPrefixInsideCss)) { const newValue = this.parseCssBinding(d.value, element, relativeSignalPath, root); d.value = newValue[0]; if (unsub) { unsub.push(...newValue[1]) } else { unsub = newValue[1]; } } } } } } const newStyle = parser.stringify(ast, { indent: '', compress: true }); return [cssFromString(newStyle), unsub]; } parseCssBinding(value: string, element: Element, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): [name: string, unsub: (() => void)[]] { value = value.trim(); let res = ''; let tmp = ''; let inBind = false; let binding = ''; let escape = false; let quote = null; let unsub: (() => void)[] = []; for (let n = 0; n < value.length; n++) { const c = value[n]; if (inBind) { if (escape) binding += c; else if (quote && c === '\\') escape = true; else if (c === quote) quote = null; else if (quote === null && c === ')') { const id = BindingsHelper.#cssBindingsVarId++; const varName = bindingPrefixInsideCssVarName + id; let bnd: namedBinding = [varName, { signal: binding, target: BindingTarget.cssvar }]; if (binding.startsWith('{')) { bnd = JSON.parse(binding); } unsub.push(this.applyBinding(element, bnd, relativeSignalPath, root, specialValueHandler)); res += 'var(' + varName + ')'; inBind = false; binding = ''; } else binding += c; } else if (c === '(') { if (tmp !== 'bind') { res += tmp; res += c; } else { inBind = true; if (value[n + 1] === '\'' || value[n + 1] === '"') { n++; quote = value[n]; } else { quote = null; } } tmp = ''; } else if (c === ' ' || c === ',' || c === '(' || c === '+' || c === '-' || c === '*' || c === '/') { res += tmp + c; tmp = ''; } else { tmp += c; } } return [res + tmp, unsub]; } /** * ? = bind to signals in properties * ?? = binding to a property * $ = bind to a signal configuration * § = bind to a special value * @param element * @param binding * @param relativeSignalPath * @param root * @returns */ applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): () => void { let unsubscribeList: [id: string, ((id: string, value: any) => void), any][] = []; let cleanupCalls: (() => void)[]; const cleanUp = () => { for (const u of unsubscribeList) { this._visualizationHandler.unsubscribeState(u[0], u[1], u[2]); } if (cleanupCalls) { for (let e of cleanupCalls) { e(); } } }; const signals = binding[1].signal.split(';'); const signalVars: string[] = new Array(signals.length); for (let i = 0; i < signals.length; i++) { let sng = signals[i]; signalVars[i] = '__' + i; if (sng.includes(':')) { const spl = sng.split(':'); signalVars[i] = spl[0]; sng = spl[1]; signals[i] = sng; } if (sng[0] === '?') { //access object path in property in custom control, todo: bind direct to property value in local property if (root) { //root is null when opened in designer, then do not apply property bindings let s = sng.substring(1); if (s[0] == '?') { signals[i] = s; } else { signals[i] = root[s]; if (s[0] === '$') { s = s.substring(1); signals[i] = '$' + root[s]; } let evtCallback = () => { cleanUp(); this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler); }; const evtNm = this.getChangedEventName(root, s); root.addEventListener(evtNm, evtCallback); if (!cleanupCalls) cleanupCalls = []; cleanupCalls.push(() => root.removeEventListener(evtNm, evtCallback)); } } } else if (sng[0] === '#') { //access object path in target element let s = sng.substring(1); if (s[0] == '#') { signals[i] = s; } else { signals[i] = root[s]; if (s[0] === '$') { s = s.substring(1); signals[i] = '$' + root[s]; } let evtCallback = () => { cleanUp(); this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler); }; const evtNm = this.getChangedEventName(element, s); root.addEventListener(evtNm, evtCallback); if (!cleanupCalls) cleanupCalls = []; cleanupCalls.push(() => root.removeEventListener(evtNm, evtCallback)); } } if (sng[0] === '.') { signals[i] = this._visualizationHandler.getNormalizedSignalName(sng, relativeSignalPath, element); } } let valuesObject = new Array(signals.length); for (let i = 0; i < signals.length; i++) { const s = signals[i]; if (s[0] === '?') { if (root) { const nm = s.substring(1); let evtCallback = () => { let disableValueChanged = false; if (!disableValueChanged) { disableValueChanged = true; this.handleValueChanged(element, root, binding, root[nm], valuesObject, i, signalVars, false, relativeSignalPath); disableValueChanged = false; } }; root.addEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback); if (!cleanupCalls) cleanupCalls = []; cleanupCalls.push(() => root.removeEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback)); try { this.handleValueChanged(element, root, binding, root[nm], valuesObject, i, signalVars, false, relativeSignalPath); } catch (err) { console.error(err); } if (binding[1].twoWay && i == 0) { this.addTwoWayBinding(binding, element, v => root[nm] = v); } } } else if (s[0] === '#') { //Binding to element properties const nm = s.substring(1); let evtCallback = () => { let disableValueChanged = false; if (!disableValueChanged) { disableValueChanged = true; this.handleValueChanged(element, root, binding, element[nm], valuesObject, i, signalVars, false, relativeSignalPath); disableValueChanged = false; } }; element.addEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback); if (!cleanupCalls) cleanupCalls = []; cleanupCalls.push(() => element.removeEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback)); try { this.handleValueChanged(element, root, binding, element[nm], valuesObject, i, signalVars, false, relativeSignalPath); } catch (err) { console.error(err); } if (binding[1].twoWay && i == 0) { this.addTwoWayBinding(binding, element, v => element[nm] = v); } } else if (s[0] === '$') { let mS = s.substring(1); if (mS[0] === '.') { mS = this._visualizationHandler.getNormalizedSignalName(mS, relativeSignalPath, element); } this._visualizationHandler.getObject(mS).then(x => { this.handleValueChanged(element, root, binding, x, valuesObject, i, signalVars, true, relativeSignalPath); }); } else if (s[0] === '§') { const mS = s.substring(1); const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root }); if (value instanceof Promise) value.then(v => this.handleValueChanged(element, root, binding, v, valuesObject, i, signalVars, true, relativeSignalPath)); else this.handleValueChanged(element, root, binding, value, valuesObject, i, signalVars, true, relativeSignalPath); if (!specialValueHandler.valueChangedCallbacks) specialValueHandler.valueChangedCallbacks = new Map(); let changeList = specialValueHandler.valueChangedCallbacks.get(mS); if (changeList == null) { changeList = []; specialValueHandler.valueChangedCallbacks.set(mS, changeList); } changeList.push(() => { const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root }) if (value instanceof Promise) value.then(v => this.handleValueChanged(element, root, binding, v, valuesObject, i, signalVars, true, relativeSignalPath)); else this.handleValueChanged(element, root, binding, value, valuesObject, i, signalVars, true, relativeSignalPath); }); } else { if (s.includes('{')) { let indirectSignal = new IndirectSignal(this, this._visualizationHandler, s, (value) => this.handleValueChanged(element, root, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath), element, relativeSignalPath, root, specialValueHandler); if (!cleanupCalls) cleanupCalls = []; cleanupCalls.push(() => indirectSignal.dispose()); if (binding[1].twoWay && i == 0) { this.addTwoWayBinding(binding, element, v => indirectSignal.setState(v)); } } else { if (binding[1].historic) { if (binding[1].historic.reloadInterval) { let myTimer = { timerId: -1 }; const loadHistoric = async () => { const res = await this._visualizationHandler.getHistoricData(s, binding[1].historic); this.handleValueChanged(element, root, binding, res?.values, valuesObject, i, signalVars, true, relativeSignalPath); if (myTimer.timerId !== null) myTimer.timerId = setTimeout(loadHistoric, binding[1].historic.reloadInterval); } loadHistoric(); if (!cleanupCalls) cleanupCalls = []; cleanupCalls.push(() => { if (myTimer.timerId > 0) clearTimeout(myTimer.timerId); myTimer.timerId = null; }); } else this._visualizationHandler.getHistoricData(s, binding[1].historic).then(x => this.handleValueChanged(element, root, binding, x?.values, valuesObject, i, signalVars, true, relativeSignalPath)) } else { const cb = (id: string, value: State) => this.handleValueChanged(element, root, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath); unsubscribeList.push([s, cb, this._visualizationHandler.subscribeState(s, cb)]); this._visualizationHandler.getState(s).then(x => this.handleValueChanged(element, root, binding, x?.val, valuesObject, i, signalVars, false, relativeSignalPath)); if (binding[1].twoWay && i == 0) { this.addTwoWayBinding(binding, element, v => this._visualizationHandler.setState(s, v)); } } } } } return cleanUp; } private addTwoWayBinding(binding: namedBinding, element: Element, setter: (value) => void) { if (binding[1].expressionTwoWay) { if (!binding[1].compiledExpressionTwoWay) { if (binding[1].expressionTwoWay.includes('return ')) binding[1].compiledExpressionTwoWay = new Function(['value'], binding[1].expressionTwoWay); else binding[1].compiledExpressionTwoWay = new Function(['value'], 'return ' + binding[1].expressionTwoWay); } } for (let e of binding[1].events) { const evt = element[e]; if (evt instanceof TypedEvent) { evt.on(() => { let v; if (binding[1].target == BindingTarget.attribute) v = element.getAttribute(binding[0]); else v = element[binding[0]]; v = BindingsHelper.parseValueWithType(v, binding); if (binding[1].compiledExpressionTwoWay) v = binding[1].compiledExpressionTwoWay(v); setter(v); }) } else { element.addEventListener(e, (evt) => { let v; if (binding[1].target == BindingTarget.attribute) v = element.getAttribute(binding[0]); else v = element[binding[0]]; v = BindingsHelper.parseValueWithType(v, binding); if (binding[1].compiledExpressionTwoWay) v = binding[1].compiledExpressionTwoWay(v); setter(v); }); } } } private static parseValueWithType(value, binding: namedBinding) { if (binding[1].type) { switch (binding[1].type) { case 'number': return parseFloat(value); case 'boolean': return value === true || value === 'true' || !!parseInt(value); case 'string': return value?.toString(); case 'integer': return parseInt(value); //case 'bitOfNumber': // return parseInt(value); } } return value; } handleValueChanged(element: Element, root: Element, binding: namedBinding, value: any, valuesObject: any[], index: number, signalVarNames: string[], noParse: boolean, relativeSignalPath: string) { let v: (number | boolean | string) = value; //should this be done?? if (!noParse && index == 0) v = BindingsHelper.parseValueWithType(v, binding); valuesObject[index] = v; if (binding[1].expression) { if (!binding[1].compiledExpression) { signalVarNames.push('__res') signalVarNames.push('__ctx') if (binding[1].expression.includes('return ')) binding[1].compiledExpression = new Function(signalVarNames, binding[1].expression); else binding[1].compiledExpression = new Function(signalVarNames, 'return ' + binding[1].expression); } valuesObject[signalVarNames.length - 1] = { element, root, boundNames: binding[1].signal, boundTargetName: binding[0], boundTargetType: binding[1].target }; v = binding[1].compiledExpression(...valuesObject); valuesObject[signalVarNames.length - 1] = v; } if (binding[1].converter) { if (typeof binding[1].converter === 'string') { v = this.namedConverterCallback(binding[1].converter, v, element, binding); } else { const stringValue = (v != null ? v.toString() : v); if (stringValue in binding[1].converter) { const cvVal = binding[1].converter[stringValue]; if (typeof cvVal === 'string') v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject); else v = cvVal; } else { let endedWithBreak = false; //@ts-ignore const nr = parseFloat(v); for (let c in binding[1].converter) { if (c.length > 2 && c[0] === '>' && c[1] === '=') { const wr = parseFloat(c.substring(2)); if (nr >= wr) { const cvVal = binding[1].converter[c]; if (typeof cvVal === 'string') v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject); else v = cvVal; endedWithBreak = true; break; } } else if (c.length > 2 && c[0] === '<' && c[1] === '=') { const wr = parseFloat(c.substring(2)); if (nr <= wr) { const cvVal = binding[1].converter[c]; if (typeof cvVal === 'string') v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject); else v = cvVal; endedWithBreak = true; break; } } else if (c.length > 1 && c[0] === '>') { const wr = parseFloat(c.substring(1)); if (nr > wr) { const cvVal = binding[1].converter[c]; if (typeof cvVal === 'string') v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject); else v = cvVal; endedWithBreak = true; break; } } else if (c.length > 1 && c[0] === '<') { const wr = parseFloat(c.substring(1)); if (nr < wr) { const cvVal = binding[1].converter[c]; if (typeof cvVal === 'string') v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject); else v = cvVal; endedWithBreak = true; break; } } else { const sp = c.split('-'); if (sp.length > 1) { if ((sp[0] === '' || nr >= parseFloat(sp[0])) && (sp[1] === '' || parseFloat(sp[1]) >= nr)) { const cvVal = binding[1].converter[c]; if (typeof cvVal === 'string') v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject); else v = cvVal; endedWithBreak = true; break; } } } } if (!endedWithBreak && binding[1].converterDefault !== undefined) v = binding[1].converterDefault; } } } if (binding[1].inverted) v = !v; if (binding[1].writeBackSignal) { let wb = binding[1].writeBackSignal; if (wb[0] === '.') { wb = relativeSignalPath + wb; } this._visualizationHandler.setState(wb, v, true); } if (binding[1].target == BindingTarget.property) element[binding[0]] = v; else if (binding[1].target == BindingTarget.attribute) element.setAttribute(binding[0], v); else if (binding[1].target == BindingTarget.css) (element).style[binding[0]] = v; else if (binding[1].target == BindingTarget.cssvar) (element).style.setProperty(binding[0], v); else if (binding[1].target == BindingTarget.class) { if (v) (element).classList.add(binding[0]); else (element).classList.remove(binding[0]); } else if (binding[1].target == BindingTarget.visible) (element).style.visibility = v ? '' : 'collapse'; } public static camelToDotCase(text: string) { return text.replace(/([A-Z])/g, (g) => `.${g[0].toLowerCase()}`); } public static dotToCamelCase(text: string) { return text.replace(/\.([a-z])/g, (i) => i[1].toUpperCase()); } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/helpers/info.txt ================================================ ;,[ are not allowed in bindings, so they could be used for a short form... Infos about bindings: ? -> Signal in Property of Container ?? -> Value of Property of Container ?$ -> Value of Attribute of Container # -> Signal in Property of Target ## -> Value of Property of Target #$ -> Value of Attribute of Target $ -> Signal config § -> access special context ; -> multiple signals {} -> indirect signal */ /* Infos about bindings: ? -> Access Container # -> Access Target ? $ -> Signal config § -> access special context ## -> Signal in Property of Target ?? -> Signal in Property of Container ?$ -> Value of Attribute of Container #$ -> Value of Attribute of Target {} -> indirect signal ================================================ FILE: packages/web-component-designer-visualization-addons/src/index.ts ================================================ export * from './blockly/BlocklyJavascriptHelper.js'; export * from './blockly/BlocklyScriptEditor.js'; export * from './blockly/BlocklyToolbox.js'; export * from './blockly/components/components.js'; export * from './components/BindingsEditor.js'; export * from './components/BindingsEditorHistoric.js'; export * from './components/SimpleScriptEditor.js'; export * from './components/VisualizationPropertyGrid.js'; export * from './components/ParameterEditor.js'; export * from './components/EventAssignment.js'; export * from './helpers/BindingsHelper.js'; export type * from './interfaces/IScriptMultiplexValue.js'; export type * from './interfaces/VisualisationElementScript.js'; export type * from './interfaces/VisualizationBinding.js'; export type * from './interfaces/VisualizationHandler.js'; export type * from './interfaces/VisualizationShell.js'; export * from './scripting/Script.js'; export * from './scripting/ScriptCommands.js'; export * from './scripting/ScriptSystem.js'; export * from './services/BindableObjectDragDropService.js'; export * from './services/VisualizationBindingsService.js'; export * from './services/VisualizationBindingsRefactorService.js'; export * from './services/PropertyGridDragDropService.js'; export * from './services/ScriptRefactorService.js'; export * from './services/SignalPropertyEditor.js'; export * from './services/VisualizationEventsService.js'; //export * from './setupVisuService.js'; ================================================ FILE: packages/web-component-designer-visualization-addons/src/interfaces/IScriptMultiplexValue.ts ================================================ export interface IScriptMultiplexValue { /** * signal - read the value from a Signal * property - read the value from a property of the customControl (not usable in screens) * signalInProperty - read the value from a Signal (wich name is in the Property) * event - read the value of a property of the event object * parameter - a parameter you hand over * context - a value of the context * complexString - a string with signals (contained in {}) * complexSignal - read the value from a signal wich name is build here (it can contain other signals in {}) * expression - js expression, 'ctx' is context object * elementProperty - a property defined on the element raising the event */ source: 'signal' | 'property' | 'signalInProperty' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression' | 'context' | 'elementProperty'; /** * Name of the signal, the property of the component or the parameter of the script * or for example in a event : srcElement.value to get the value of a input wich raises the event * @TJS-format signal */ name: string; } ================================================ FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualisationElementScript.ts ================================================ export interface VisualisationElementScript { init?(instance: HTMLElement, shadowRoot: ShadowRoot); connectedCallback?(instance: HTMLElement, shadowRoot: ShadowRoot); disconnectedCallback?(instance: HTMLElement, shadowRoot: ShadowRoot); } ================================================ FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualizationBinding.ts ================================================ //Binding: haow to use... //binding:display="{'signal':'aa',..." //binding:value="aa" -> simplified form when only binding a direct property import type { BindingTarget } from "@node-projects/web-component-designer"; export interface VisualizationBinding { interval?: number; //if triggered by interval signal: string; inverted?: boolean; twoWay?: boolean; events?: string[]; target: BindingTarget; converter?: Record; converterDefault?: any; expression?: string; // could also be blockly ora complete javascript expressionTwoWay?: string; compiledExpression?: Function; compiledExpressionTwoWay?: Function; type?: string; writeBackSignal?: string; historic?: { reloadInterval?: number, [nm: string]: any }; maybeLitElement?: boolean, litEventNames?: string[] } ================================================ FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualizationHandler.ts ================================================ type StateValue = string | number | boolean | null; export interface State { val: StateValue; } export interface Signal { "$type": 'Signal' } export interface SignalInformation { type: 'string' | 'number' | 'boolean' role: 'url' | 'datetime' | 'date' | 'time', writeable: boolean, } type StateChangeHandler = (id: string, state: State) => void export interface VisualizationHandler { getNormalizedSignalName(id: string, relativeSignalPath?: string, element?: Element): string; getState(id: string): Promise; setState(id: string, val: State | StateValue, ack?: boolean): Promise; subscribeState(id: string, cb: StateChangeHandler): any; /** * @param {any} subscriptionResult - the result of the subscribe call */ unsubscribeState(id: string, cb: StateChangeHandler, subscriptionResult: any): void; getHistoricData(id: string, config: any); getObject(id: string): Promise; writeSignalsInGroup?(group: string): Promise; clearSignalsInGroup?(group: string): Promise; getAllNames(type: string); getSignalInformation(signal: Signal): SignalInformation; }; ================================================ FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualizationShell.ts ================================================ import { IBindableObjectsBrowser } from "@node-projects/web-component-designer"; export interface VisualizationShell { openConfirmation(element: HTMLElement, options: { x?: number, y?: number, width?: number, height?: number, parent?: HTMLElement, abortSignal?: AbortSignal, disableResize?: boolean, confirmText?: string, cancelText?: string }): Promise; createBindableObjectBrowser: () => IBindableObjectsBrowser } ================================================ FILE: packages/web-component-designer-visualization-addons/src/scripting/Script.ts ================================================ import { ScriptCommands } from "./ScriptCommands.js"; export class Script { name?: string; relativeSignalsPath?: string; commands: ScriptCommands[]; parameters?: Record; } ================================================ FILE: packages/web-component-designer-visualization-addons/src/scripting/ScriptCommands.ts ================================================ export declare type ScriptCommands = RunnableScriptCommands | Comment | Condition | Exit | Label | Goto; export declare type RunnableScriptCommands = OpenScreen | OpenUrl | OpenDialog | CloseDialog | ToggleSignalValue | ToggleSignalValueThroughList | SetSignalValue | IncrementSignalValue | DecrementSignalValue | SetBitInSignal | ClearBitInSignal | ToggleBitInSignal | Console | CalculateSignalValue | Javascript | SetElementProperty | Delay | SwitchLanguage | Login | Logout | SubscribeSignal | UnsubscribeSignal | WriteSignalsInGroup | ClearSignalsInGroup | RunScript | CopySignalValuesFromFolder | ShowMessageBox | ShowPrompt | ExportSignalValuesAsJson | ImportSignalValuesFromJson | Repeat; /** * signal - a signal (the default) * property - a property defined in the current screen/control * elementProperty - a property defined on the element raising the event */ export declare type signalTarget = 'signal' | 'property' | 'elementProperty'; /* TODO: Indirect Values in Scripts: Indirection Source: Object Values, Current Element Property */ export interface Comment { type: 'Comment'; comment: string; } export interface OpenScreen { type: 'OpenScreen'; /** * Name of the Screen * @TJS-format screen */ screen: string; title?: string; /** * If signals in screen are defined relative (starting with a '.'), this will be prepended */ relativeSignalsPath?: string; noHistory?: boolean; closeable?: boolean; additionalData?: string; } export interface OpenDialog { type: 'OpenDialog'; /** * Name of the Screen * @TJS-format screen */ screen: string; title?: string; /** * If signals in screen are defined relative (starting with a '.'), this will be prepended */ relativeSignalsPath?: string; moveable?: boolean; closeable?: boolean; width?: string; height?: string; left?: string; top?: string; additionalData?: string; } export interface ShowMessageBox { type: 'ShowMessageBox'; /** * title text */ title: string; /** * message text */ message: string; /** * message type * @default info */ messageType?: 'info' | 'warning' | 'error'; /** * message text * @default ok */ buttons: 'ok' | 'okCancel' | 'yesNo' | 'retryCancel' | 'yesNoCancel' | 'abortRetryIgnore' | 'cancelTryContinue'; /** * number of the clicked button, starting with 1 * @TJS-format signal */ resultSignal: string; width?: string; height?: string; additionalData?: string; exitScriptOnCancel?: boolean; // if true the script execution will be stopped when the user clicks a button that is considered negative (cancel, no, retry, abort) } export interface ShowPrompt { type: 'ShowPrompt'; /** * title text */ title: string; /** * message text */ message: string; /** * default value */ default?: string; /** * number of the clicked button, starting with 1 * @TJS-format signal */ resultSignal: string; /** * if true the script execution will be stopped when the user clicks a button that is considered negative (cancel, no, retry, abort) */ exitScriptOnCancel?: boolean; width?: string; height?: string; additionalData?: string; } //TODO: dialogId, closeChildDialogs export interface CloseDialog { type: 'CloseDialog'; /** * A dialogId. If empty the parent dialog will be closed * @TJS-format signal */ //dialogId: string; additionalData?: string; } export interface OpenUrl { type: 'OpenUrl'; url: string; /** * defaults to '_blank' */ target: string; openInDialog: boolean; additionalData?: string; } export interface SetSignalValue { type: 'SetSignalValue'; /** * Name of the signal * @TJS-format signal */ signal: string; target: signalTarget; value: any; additionalData?: string; } export interface ToggleSignalValue { type: 'ToggleSignalValue'; /** * Name of the signal * @TJS-format signal */ signal: string; target: signalTarget; additionalData?: string; } export interface ToggleSignalValueThroughList { type: 'ToggleSignalValueThroughList'; /** * List of values wich can be toggled through * @TJS-format collection */ valueList: (string | number | boolean)[] /** * Name of the signal * @TJS-format signal */ signal: string; target: signalTarget; additionalData?: string; } //export interface ToggleSignalValueFromJsonArray { // type: 'ToggleSignalValueFromJsonArray'; // /** // * Name of the signal // * @TJS-format signal // */ // signal: string; // /** // * list of values (as json array string e.g. ['aa', 1, false]) // */ // list: string; //} export interface IncrementSignalValue { type: 'IncrementSignalValue'; /** * Name of the signal * @TJS-format signal */ signal: string; value: number; target: signalTarget; additionalData?: string; } export interface CalculateSignalValue { type: 'CalculateSignalValue'; /** * Name of the signal * @TJS-format signal */ targetSignal: string; /** * A formula to calculate the new signal value, can contain other signals in angle brackets: {} * Example: {adapter.0.level} * 100 + 30 */ formula: string; target: signalTarget; additionalData?: string; } export interface DecrementSignalValue { type: 'DecrementSignalValue'; /** * Name of the signal * @TJS-format signal */ signal: string; value: number; target: signalTarget; additionalData?: string; } export interface SetBitInSignal { type: 'SetBitInSignal'; /** * Name of the signal * @TJS-format signal */ signal: string; /** * @default 0 */ target: signalTarget; bitNumber: number; additionalData?: string; } export interface ClearBitInSignal { type: 'ClearBitInSignal'; /** * Name of the signal * @TJS-format signal */ signal: string; /** * @default 0 */ target: signalTarget; bitNumber: number; additionalData?: string; } export interface ToggleBitInSignal { type: 'ToggleBitInSignal'; /** * Name of the signal * @TJS-format signal */ signal: string; /** * @default 0 */ target: signalTarget; bitNumber: number; additionalData?: string; } export interface Javascript { type: 'Javascript'; /** * Usable objects in Script: * context : {event : Event, element: Element, shadowRoot: ShadowRoot, instance: Element } * @TJS-format script */ script: string; additionalData?: string; } export interface SetElementProperty { type: 'SetElementProperty'; /** * what of the elements do you want to set * @default property */ target: 'property' | 'attribute' | 'css' | 'class'; /** * where to search for the elements (used as a start) * element = currentElement * container = screen or customControl * @default container */ targetSelectorTarget: 'container' | 'element'; /** * wich parent, 0 = current, 1 = first parent, 2 = ... * of the targetSelectorTarget * @default 0 */ parentIndex: number; /** * css selector to find elements on targetSelectorTarget, if empty the targetSelectorTarget directly is used */ targetSelector: string; /** * name of property/attribute or css value you want to set */ name: string; /** * only for target: class * @default toggle */ mode: 'add' | 'remove' | 'toggle'; /** * value you want to set */ value: any; additionalData?: string; } export interface Delay { type: 'Delay'; /** * miliseconds to delay * @default 500 */ value: number; additionalData?: string; } export interface Console { type: 'Console'; /** * target where to log * @default log */ target: 'log' | 'info' | 'debug' | 'warn' | 'error'; /** * console message */ message: string; additionalData?: string; } export interface SwitchLanguage { type: 'SwitchLanguage'; language: string; additionalData?: string; } export interface Logout { type: 'Logout'; additionalData?: string; } export interface Login { type: 'Login'; /** * username */ username: 'string'; /** * password */ password: string; additionalData?: string; } export interface SubscribeSignal { type: 'SubscribeSignal'; /** * Name of the signal * @TJS-format signal */ signal: string; oneTime: boolean; additionalData?: string; } export interface UnsubscribeSignal { type: 'UnsubscribeSignal'; /** * Name of the signal * @TJS-format signal */ signal: string; additionalData?: string; } export interface WriteSignalsInGroup { type: 'WriteSignalsInGroup'; /** * Name of the Group */ group: string; additionalData?: string; } export interface ClearSignalsInGroup { type: 'ClearSignalsInGroup'; /** * Name of the Group */ group: string; additionalData?: string; } export interface CopySignalValuesFromFolder { type: 'CopySignalValuesFromFolder'; /** * name of the source folder */ sourceFolder: string; /** * name of destination folder */ destinationFolder?: string; additionalData?: string; } export interface ExportSignalValuesAsJson { type: 'ExportSignalValuesAsJson'; /** * regex to select the signals (every matching one) */ regex: string; /** * wait for updated values from the connection */ waitForUpdatedValues?: boolean; /** * download filename */ fileName?: string; additionalData?: string; } export interface ImportSignalValuesFromJson { type: 'ImportSignalValuesFromJson'; /** * json data with the values */ data: string; additionalData?: string; } export interface Condition { type: 'Condition'; /** * Name of the value1 * @TJS-format complex */ value1: any; value2?: any; comparisonType: '==null' | '!=null' | '==true' | '==false' | '==' | '!=' | '>' | '<' | '>=' | '<=' | '&&' | '||'; /** * Name of the label to jumpe to when condition is true */ trueGotoLabel?: string; trueScriptName?: string; trueScriptType?: string; falseGotoLabel?: string; falseScriptName?: string; falseScriptType?: string; additionalData?: string; } export interface Exit { type: 'Exit'; additionalData?: string; } export interface Label { type: 'Label'; label: string; additionalData?: string; } export interface Goto { type: 'Goto'; label: string; additionalData?: string; } export interface RunScript { type: 'RunScript'; /** * Name of the Script */ name: 'string'; /** * Type of the Script */ scriptType: 'string'; additionalData?: string; } export interface Repeat { type: 'Repeat'; /** * Name of the Label to jump to, if empty it jumps to the start. */ label?: string; /** * Number of times the script repeats itself. If 0, it repeats indefinitly * @default 0 */ count?: number; /** * always: script repeats until count is 0 or indefinitly when count is 0 * eventValid: script repeats until event is no longer active * @default eventValid */ mode: 'eventValid' | 'always'; } ================================================ FILE: packages/web-component-designer-visualization-addons/src/scripting/ScriptSystem.ts ================================================ import { deepValue, setDeepValue, sleep } from "@node-projects/web-component-designer/dist/elements/helper/Helper.js"; import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper.js"; import { parseBindingString } from "../helpers/BindingsHelper.js"; import { IScriptMultiplexValue } from "../interfaces/IScriptMultiplexValue.js"; import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js"; import { VisualizationHandler } from "../interfaces/VisualizationHandler.js"; import { Script } from "./Script.js"; import { ScriptCommands, signalTarget } from "./ScriptCommands.js"; import Long from 'long' import { ScriptUpgrades } from "./ScriptUpgrader.js"; export const cyclicAttributeName = 'cyclic'; export type contextType = { event: Event, element: Element, root: HTMLElement, parameters?: Record, relativeSignalsPath?: string }; type ContextCreator = ( root: HTMLElement, event: Event | null, element: Element, parameters: Record, relativeSignalsPath: string ) => any; const eventOpposites: Record = { 'pointerdown': 'pointerup', 'pointerenter': 'pointerleave', 'mouseenter': 'mouseleave', 'mouseover': 'mouseout', 'focus': 'blur', 'focusin': 'focusout', 'keydown': 'keyup', }; export class ScriptSystem { _visualizationHandler: VisualizationHandler; _subscriptionCallback = () => { }; constructor(visualizationHandler: VisualizationHandler) { this._visualizationHandler = visualizationHandler; } async execute(scriptCommands: ScriptCommands[], outerContext: contextType) { let repeatCount = -1; let eventNotValid = false; const triggerEvent = outerContext.event?.type; const cancelEvent = triggerEvent ? eventOpposites[triggerEvent] : null; if (cancelEvent) { let element: Element | Window = outerContext.element; if(triggerEvent == 'pointerdown'){ element = window; } element.addEventListener(cancelEvent, () => { eventNotValid = true; }, { once: true }); } for (let i = 0; i < scriptCommands.length; i++) { let c = scriptCommands[i]; if (c.type == "Exit") { break; } else if (c.type == "Goto") { const label = await this.getValue(c.label, outerContext); i = scriptCommands.findIndex(x => x.type == "Label" && x.label == label); if (i < 0) break; } else if (c.type == "Condition") { const value1 = await this.getValue(c.value1, outerContext); const value2 = await this.getValue(c.value2, outerContext); const comparisonType = await this.getValue(c.comparisonType, outerContext); let res = false; switch (comparisonType) { case '==null': res = value1 == null; break; case '!=null': res = value1 != null; break; case '==true': res = value1 == true; break; case '==false': res = value1 == false; break; case '==': res = value1 == value2; break; case '!=': res = value1 != value2; break; case '>': res = value1 > value2; break; case '<': res = value1 < value2; break; case '>=': res = value1 >= value2; break; case '<=': res = value1 <= value2; break; case '&&': res = value1 && value2; break; case '||': res = value1 || value2; break; } if (res) { await this.runExternalScript(await this.getValue(c.trueScriptName, outerContext), await this.getValue(c.trueScriptType, outerContext)); const trueGotoLabel = await this.getValue(c.trueGotoLabel, outerContext); if (trueGotoLabel) { i = scriptCommands.findIndex(x => x.type == "Label" && x.label == trueGotoLabel); if (i < 0) break; } } else { await this.runExternalScript(await this.getValue(c.falseScriptName, outerContext), await this.getValue(c.falseScriptType, outerContext)); const falseGotoLabel = await this.getValue(c.falseGotoLabel, outerContext); if (falseGotoLabel) { i = scriptCommands.findIndex(x => x.type == "Label" && x.label == falseGotoLabel); if (i < 0) break; } } } else if (c.type == "Repeat") { const label = await this.getValue(c.label, outerContext); const count = await this.getValue(c.count, outerContext); const mode = await this.getValue(c.mode, outerContext); if (mode == 'eventValid' && eventNotValid) { eventNotValid = false; continue; } if (count != 0 && repeatCount == -1) { repeatCount = count - 1; } if (repeatCount == 0) { continue; } if (repeatCount > 0) { repeatCount--; } i = -1; if (label) { i = scriptCommands.findIndex(x => x.type == "Label" && x.label == label); if (i < 0) continue; } } else { const continueScript = await this.runScriptCommand(c, outerContext); if (!continueScript) { break; } } } } async getValueFromTarget(target: signalTarget, name: string, context: contextType) { if (target === 'property') { return deepValue((context).root, name); } else if (target === 'elementProperty') { return deepValue((context).element, name); } else { return (await this._visualizationHandler.getState(this.getSignalName(name, context)))?.val; } } async setValueOnTarget(target: signalTarget, name: string, context: contextType, value: any) { if (target === 'property') { setDeepValue((context).root, name, value); } else if (target === 'elementProperty') { setDeepValue((context).element, name, value); } else { await this._visualizationHandler.setState(this.getSignalName(name, context), value); } } async runExternalScript(name: string, type: string) { //TODO... } async runScriptCommand(command: T, context: contextType): Promise { switch (command.type) { case 'Comment': case 'Label': case 'Condition': case 'Goto': case 'Exit': case 'Repeat': { //Do nothing on this commands break; } case 'OpenUrl': { window.open(await this.getValue(command.url, context), command.target); break; } case 'Delay': { const value = await this.getValue(command.value ?? 500, context); await sleep(value) break; } case 'Console': { const target = await this.getValue(command.target ?? 'log', context); const message = await this.getValue(command.message, context); console[target](message); break; } case 'ToggleSignalValue': { const signal = await this.getValue(command.signal, context); const target = await this.getValue(command.target, context); let state = await this.getValueFromTarget(target, signal, context); await this._visualizationHandler.setState(this.getSignalName(signal, context), !state); break; } case 'ToggleSignalValueThroughList': { const valueList = await this.getValue(command.valueList, context); const signal = await this.getValue(command.signal, context); const target = await this.getValue(command.target, context); let state = await this.getValueFromTarget(target, signal, context); let nextIdx = valueList.indexOf(state) + 1; if (nextIdx >= valueList.length) nextIdx = 0; const newState = valueList[nextIdx]; await this._visualizationHandler.setState(this.getSignalName(signal, context), newState); break; } case 'SetSignalValue': { const signal = await this.getValue(command.signal, context); const target = await this.getValue(command.target, context); await this.setValueOnTarget(target, signal, context, await this.getValue(command.value, context)); break; } case 'IncrementSignalValue': { const signal = await this.getValue(command.signal, context); const target = await this.getValue(command.target, context); let state = await this.getValueFromTarget(target, signal, context); const val = state + await this.getValue(command.value, context); await this.setValueOnTarget(target, signal, context, val); break; } case 'DecrementSignalValue': { const signal = await this.getValue(command.signal, context); const target = await this.getValue(command.target, context); let state = await this.getValueFromTarget(target, signal, context); const val = state - await this.getValue(command.value, context); await this.setValueOnTarget(target, signal, context, val); break; } case 'CalculateSignalValue': { const formula = await this.getValue(command.formula, context); const target = await this.getValue(command.target, context); const targetSignal = await this.getValue(command.targetSignal, context); let nm = await this.parseStringWithValues(formula, context); let result = eval(nm); await this.setValueOnTarget(target, targetSignal, context, result); break; } case 'SetBitInSignal': { const signal = await this.getValue(command.signal, context); const bitNumber = await this.getValue(command.bitNumber ?? 0, context); const target = await this.getValue(command.target, context); let state = await this.getValueFromTarget(target, signal, context); let mask = Long.fromNumber(1).shiftLeft(bitNumber); const newVal = Long.fromNumber(state).or(mask).toNumber(); await this.setValueOnTarget(target, signal, context, newVal); break; } case 'ClearBitInSignal': { const signal = await this.getValue(command.signal, context); const bitNumber = await this.getValue(command.bitNumber ?? 0, context); const target = await this.getValue(command.target, context); let state = await this.getValueFromTarget(target, signal, context); let mask = Long.fromNumber(1).shiftLeft(bitNumber); mask.negate(); const newVal = Long.fromNumber(state).and(mask).toNumber(); await this.setValueOnTarget(target, signal, context, newVal); break; } case 'ToggleBitInSignal': { const signal = await this.getValue(command.signal, context); const bitNumber = await this.getValue(command.bitNumber ?? 0, context); const target = await this.getValue(command.target, context); let state = await this.getValueFromTarget(target, signal, context); let mask = Long.fromNumber(1).shiftLeft(bitNumber); const newVal = Long.fromNumber(state).xor(mask).toNumber(); await this.setValueOnTarget(target, signal, context, newVal); break; } case 'Javascript': { const script = await this.getValue(command.script, context); let mycontext: { event: Event, element: Element } = context; (mycontext).shadowRoot = (context.element.getRootNode()); (mycontext).instance = (context).shadowRoot.host; if (!(command).compiledScript) (command).compiledScript = new Function('context', script); (command).compiledScript(mycontext); break; } case 'SetElementProperty': { //@ts-ignore command = ScriptUpgrades.upgradeSetElementProperty(command); let name = await this.getValue(command.name, context); if (name === '') name = null; const value = await this.getValue(command.value, context); const parentIndex = await this.getValue(command.parentIndex ?? 0, context); const target = await this.getValue(command.target ?? 'property', context); const targetSelectorTarget = await this.getValue(command.targetSelectorTarget ?? 'container', context); const targetSelector = await this.getValue(command.targetSelector, context); const mode = await this.getValue(command.mode ?? 'toggle', context); let elements = this.getTargetFromTargetSelector(context, targetSelectorTarget, parentIndex, targetSelector); for (let e of elements) { if (target == 'attribute') { e.setAttribute(name, value); } else if (target == 'property') { e[name] = value; } else if (target == 'css') { (e).style[name] = value; } else if (target == 'class') { if (mode === 'toggle') { (e).classList.toggle(name ?? value); } else if (mode === 'remove') { (e).classList.remove(name ?? value); } else { (e).classList.add(name ?? value); } } } break; } case 'SubscribeSignal': { const signal = await this.getValue(command.signal, context); const oneTime = await this.getValue(command.oneTime, context); if (oneTime) { let cb = () => { this._visualizationHandler.unsubscribeState(signal, cb, null); } this._visualizationHandler.subscribeState(signal, cb); } else this._visualizationHandler.subscribeState(signal, this._subscriptionCallback); break; } case 'UnsubscribeSignal': { const signal = await this.getValue(command.signal, context); this._visualizationHandler.unsubscribeState(signal, this._subscriptionCallback, null); break; } case 'WriteSignalsInGroup': { const group = await this.getValue(command.group, context); this._visualizationHandler.writeSignalsInGroup(group); break; } case 'ClearSignalsInGroup': { const group = await this.getValue(command.group, context); this._visualizationHandler.clearSignalsInGroup(group); break; } case 'RunScript': { const name = await this.getValue(command.name, context); const scriptType = await this.getValue(command.scriptType, context); this.runExternalScript(name, scriptType); break; } case 'ShowMessageBox': { let res = null; const exitScriptOnCancel = await this.getValue(command.exitScriptOnCancel, context); const buttons = await this.getValue(command.buttons, context); if (buttons == 'yesNo') { const message = await this.getValue(command.message, context); if (confirm(message)) res = 1; else res = 2; } else { const message = await this.getValue(command.message, context); alert(message); res = 1; } const resultSignal = await this.getValue(command.resultSignal, context); if (resultSignal) { this._visualizationHandler.setState(resultSignal, res); } if (exitScriptOnCancel && res != 1) { return false; } break; } case 'ShowPrompt': { const message = await this.getValue(command.message, context); const defaultValue = await this.getValue(command.default, context); const result = prompt(message, defaultValue); const resultSignal = await this.getValue(command.resultSignal, context); if (resultSignal && result) { this._visualizationHandler.setState(resultSignal, result); } break; } case 'Login': case 'Logout': case 'CloseDialog': case 'OpenDialog': case 'OpenScreen': case 'SwitchLanguage': case 'CopySignalValuesFromFolder': case 'ExportSignalValuesAsJson': case 'ImportSignalValuesFromJson': { alert('command: "' + command.type + '" is not yet implemented'); break; } } return true; } getTarget(context: contextType, targetSelectorTarget: 'element' | 'container', parentLevel: number) { if (targetSelectorTarget === 'container') { let el = (context.element.getRootNode()).host for (let i = 0; i < (parentLevel ?? 0); i++) el = (el.getRootNode()).host; return el; } else if (targetSelectorTarget === "element") { let el = context.element; for (let i = 0; i < (parentLevel ?? 0); i++) el = el.parentElement; return el; } return null; } getTargetFromTargetSelector(context: contextType, targetSelectorTarget: 'element' | 'container', parentLevel: number, targetSelector: string): Iterable { const target = this.getTarget(context, targetSelectorTarget, parentLevel); let elements: Iterable = [target]; if (targetSelector) { if (targetSelectorTarget === 'container') elements = target.shadowRoot.querySelectorAll(targetSelector); else elements = target.querySelectorAll(targetSelector); } return elements; } async getValue(value: T, outerContext: contextType): Promise { if (value == null) return null; if (typeof value === 'object') { switch ((value).source) { case 'property': { return deepValue(outerContext.root, (value).name); } case 'elementProperty': { return deepValue(outerContext.element, (value).name); } case 'signal': { let sng = await this._visualizationHandler.getState(this.getSignalName((value).name, outerContext)); return sng?.val; } case 'signalInProperty': { const sngName = deepValue(outerContext.root, (value).name) let sng = await this._visualizationHandler.getState(this.getSignalName(sngName, outerContext)); return sng?.val; } case 'event': { let obj = outerContext.event; if ((value).name) obj = deepValue(obj, (value).name); return obj; } case 'parameter': { return outerContext.parameters[(value).name]; } case 'context': { return deepValue(outerContext, (value).name); } case 'complexString': { let text = (value).name; if (text != null) { return await this.parseStringWithValues(text, outerContext); } return null; } case 'complexSignal': { let text = (value).name; if (text != null) { const signal = await this.parseStringWithValues(text, outerContext); const state = await this._visualizationHandler.getState(this.getSignalName(signal, outerContext)); return state?.val; } return null; } case 'expression': { //@ts-ignore var ctx = outerContext; return eval((value).name); } } } return value; } async getStateOrFieldOrParameter(name: string, context: contextType) { //use same shortcuts as in bindings. $ = signals object, § = access context if (name[0] === '§') { //@ts-ignore var ctx = context; return eval('ctx.' + name.substring(1)); } else if (name[0] === '?' && name[1] === '?') { return context.root[name.substring(2)]; } else if (name[0] === '?') { return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(1)], context)); } return await this._visualizationHandler.getState(this.getSignalName(name, context)); } async parseStringWithValues(text: string, context: contextType) { const parsed = parseBindingString(text); let results = await Promise.all(parsed.signals.map(x => this.getStateOrFieldOrParameter(this.getSignalName(x, context), context))); let nm = parsed.parts[0]; for (let i = 0; i < parsed.parts.length - 1; i++) { let v = results[i]; if (typeof v === 'object') v = v.val; if (v == null) v = ''; nm += v + parsed.parts[i + 1]; } return nm; } getSignalName(name: string, outerContext: contextType) { if (name[0] === '.') return outerContext.relativeSignalsPath + name; return name; } public createScriptContext(root: HTMLElement, event: Event, element: Element, parameters: Record, relativeSignalsPath: string): any { return { root, event, element, parameters, relativeSignalsPath }; } async assignAllScripts( source: string, javascriptCode: string, shadowRoot: ShadowRoot, instance: HTMLElement, visualizationHandler: VisualizationHandler, contextCreator?: (root: HTMLElement, event: Event, element: Element, parameters: Record, relativeSignalsPath: string) => any, assignExternalScript?: (element: Element, event: string, scriptData: any) => void, runInitalization?: (jsObject: VisualisationElementScript) => void ): Promise { contextCreator ??= this.createScriptContext; const jsObject = await this.loadAndInitJsObject(source, javascriptCode, shadowRoot, instance, runInitalization); for (const element of shadowRoot.querySelectorAll('*')) { for (const attr of element.attributes) { if (attr.name[0] !== '@') continue; try { const evtName = attr.name.substring(1); const script = attr.value.trim(); const isCyclic = evtName.startsWith(cyclicAttributeName); const interval = isCyclic ? parseInt(evtName.substring(evtName.indexOf(':') + 1)) : null; const handler = await this.resolveHandler( script, jsObject, element, shadowRoot, instance, visualizationHandler, contextCreator, assignExternalScript, evtName ); if (handler) { this.bindHandler(element, evtName, isCyclic, interval, handler); } } catch (err) { console.warn('error assigning script', element, attr); } } } return jsObject; } // --- Hilfsmethoden --- private async loadAndInitJsObject( source: string, javascriptCode: string, shadowRoot: ShadowRoot, instance: HTMLElement, runInitalization?: (jsObject: VisualisationElementScript) => void ): Promise { if (!javascriptCode) return null; try { const scriptUrl = URL.createObjectURL(new Blob([javascriptCode], { type: 'application/javascript' })); const jsObject = await import(scriptUrl); if (runInitalization) { runInitalization(jsObject); } else { jsObject.init?.(instance, shadowRoot); } return jsObject; } catch (err) { console.error('error parsing javascript - ' + source, err); return null; } } // Gibt eine normalisierte Handler-Funktion (evt) => void zurück private async resolveHandler( script: string, jsObject: VisualisationElementScript, element: Element, shadowRoot: ShadowRoot, instance: HTMLElement, visualizationHandler: VisualizationHandler, contextCreator: ContextCreator, assignExternalScript?: (element: Element, event: string, scriptData: any) => void, evtName?: string ): Promise<((evt: Event | null) => void) | null> { // Plain-String: direkte Referenz auf eine JS-Funktion if (script[0] !== '{') { return (evt) => { if (!jsObject?.[script]) { console.warn(`javascript function named: "${script}" not found, maybe missing a "export" ?`); } else { jsObject[script](evt, element, shadowRoot, instance); } }; } const scriptObj: Script = JSON.parse(script); // commands-Script if ('commands' in scriptObj) { return (evt) => this.execute( scriptObj.commands, contextCreator(instance, evt, element, scriptObj.parameters, scriptObj.relativeSignalsPath) ); } // Blockly-Script if ('blocks' in scriptObj) { let compiledFunc: Awaited> | null = null; return async (evt) => { compiledFunc ??= await generateEventCodeFromBlockly(scriptObj); compiledFunc( evt, shadowRoot, (scriptObj as any).parameters, (scriptObj as any).relativeSignalsPath ?? '', visualizationHandler, contextCreator(instance, evt, element, (scriptObj as any).parameters, (scriptObj as any).relativeSignalsPath) ); }; } // Externes Script oder benannte JS-Funktion if ('name' in scriptObj) { if (assignExternalScript) { assignExternalScript(element, evtName, scriptObj); return null; // wird extern verwaltet } const nm = (scriptObj as any).name; return (evt) => { if (!jsObject?.[nm]) { console.warn(`javascript function named: "${nm}" not found, maybe missing a "export" ?`); } else { jsObject[nm](evt, element, shadowRoot, instance, (scriptObj as any).parameters); } }; } return null; } private bindHandler( element: Element, evtName: string, isCyclic: boolean, interval: number | null, handler: (evt: Event | null) => void ): void { if (!isCyclic) { element.addEventListener(evtName, handler); return; } const intervalId = setInterval(() => { if (!element.isConnected) { clearInterval(intervalId); } else { handler(null); } }, interval); } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/scripting/ScriptUpgrader.ts ================================================ import { ScriptCommands, SetElementProperty } from "./ScriptCommands"; //For upgradeing changed script commands export class ScriptUpgrades { static upgradeScriptCommand(scriptCommand: ScriptCommands) { if (scriptCommand.type === 'SetElementProperty') { return ScriptUpgrades.upgradeSetElementProperty(scriptCommand); } return scriptCommand; } static upgradeSetElementProperty(scriptCommand: SetElementProperty): SetElementProperty { if (scriptCommand.targetSelectorTarget === 'currentScreen') { scriptCommand.targetSelectorTarget = 'container'; } else if (scriptCommand.targetSelectorTarget === 'parentScreen') { scriptCommand.targetSelectorTarget = 'container'; scriptCommand.parentIndex = 1; } else if (scriptCommand.targetSelectorTarget === 'currentElement') { scriptCommand.targetSelectorTarget = 'element'; } else if (scriptCommand.targetSelectorTarget === 'parentElement') { scriptCommand.targetSelectorTarget = 'element'; scriptCommand.parentIndex = 1; } return scriptCommand; } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/services/BindableObjectDragDropService.ts ================================================ import { OverlayLayer, DesignItem, IBindableObject, IBindableObjectDragDropService, IDesignerCanvas, InsertAction, ChangeGroup, BindingTarget, IProperty, IDesignItem, PropertyType } from "@node-projects/web-component-designer"; import { BindingsHelper } from "../helpers/BindingsHelper.js"; import { VisualizationHandler } from "../interfaces/VisualizationHandler.js"; import { VisualizationBinding } from "../interfaces/VisualizationBinding.js"; export class BindableObjectDragDropService implements IBindableObjectDragDropService { constructor(bindingsHelper: BindingsHelper, visualizationHandler: VisualizationHandler) { this._bindingsHelper = bindingsHelper; this._visualizationHandler = visualizationHandler; } protected _bindingsHelper: BindingsHelper; protected _visualizationHandler: VisualizationHandler rectMap = new Map(); rect: SVGRectElement; dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element) { const designItem = DesignItem.GetDesignItem(element); if (designItem && !designItem.isRootItem) { let itemRect = designerCanvas.getNormalizedElementCoordinates(element); this.rect = designerCanvas.overlayLayer.drawRect('IobrokerWebuiBindableObjectDragDropService', itemRect.x, itemRect.y, itemRect.width, itemRect.height, '', null, OverlayLayer.Background); this.rect.style.fill = '#ff0000'; this.rect.style.opacity = '0.3'; this.rectMap.set(element, this.rect); } } dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element) { const designItem = DesignItem.GetDesignItem(element); if (designItem && !designItem.isRootItem) { const rect = this.rectMap.get(element); designerCanvas.overlayLayer.removeOverlay(rect); this.rectMap.delete(element); } } dragOver(designerView: IDesignerCanvas, event: DragEvent, element: Element): "none" | "copy" | "link" | "move" { return 'copy'; } async drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject, element: Element) { for (let r of this.rectMap.values()) { designerCanvas.overlayLayer.removeOverlay(r); } this.rectMap.clear(); const designItem = DesignItem.GetDesignItem(element); const obj = await this._visualizationHandler.getObject(bindableObject.fullName); const info = this._visualizationHandler.getSignalInformation(obj); if (designItem && !designItem.isRootItem) { // Add binding to drop target... if (element instanceof HTMLInputElement) { const binding: VisualizationBinding = { signal: bindableObject.fullName, target: BindingTarget.property }; const serializedBinding = this._bindingsHelper.serializeBinding(element, element.type == 'checkbox' ? 'checked' : 'value', binding); designItem.setAttribute(serializedBinding[0], serializedBinding[1]); } else { const binding = { signal: bindableObject.fullName, target: BindingTarget.content }; const serializedBinding = this._bindingsHelper.serializeBinding(element, null, binding); designItem.setAttribute(serializedBinding[0], serializedBinding[1]); } } else { const position = designerCanvas.getNormalizedEventCoordinates(event); let di: DesignItem; let grp: ChangeGroup; let state = await this._visualizationHandler.getState(bindableObject.fullName); //TODO: only icon&image if val is a url with extension if (info.role === 'url' && typeof state?.val === 'string') { if (state.val.endsWith('jpg') || state.val.endsWith('jpeg') || state.val.endsWith('png') || state.val.endsWith('gif') || state.val.endsWith('svg')) { const img = document.createElement('img'); di = DesignItem.createDesignItemFromInstance(img, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); grp = di.openGroup("Insert"); const binding: VisualizationBinding = { signal: bindableObject.fullName, target: BindingTarget.property }; let serializedBinding = this._bindingsHelper.serializeBinding(img, 'src', binding); di.setAttribute(serializedBinding[0], serializedBinding[1]); (di.element).src = state.val; } else if (state.val.endsWith('mp4')) { const video = document.createElement('video'); di = DesignItem.createDesignItemFromInstance(video, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); grp = di.openGroup("Insert"); const binding: VisualizationBinding = { signal: bindableObject.fullName, target: BindingTarget.property }; let serializedBinding = this._bindingsHelper.serializeBinding(video, 'src', binding); di.setAttribute(serializedBinding[0], serializedBinding[1]); (di.element).src = state.val; } else { const video = document.createElement('iframe'); di = DesignItem.createDesignItemFromInstance(video, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); grp = di.openGroup("Insert"); const binding: VisualizationBinding = { signal: bindableObject.fullName, target: BindingTarget.property }; let serializedBinding = this._bindingsHelper.serializeBinding(video, 'src', binding); di.setAttribute(serializedBinding[0], serializedBinding[1]); (di.element).src = state.val; } } if (!di) { const input = document.createElement('input'); di = DesignItem.createDesignItemFromInstance(input, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); grp = di.openGroup("Insert"); let twoWay = info.writeable !== false; const binding: VisualizationBinding = { signal: bindableObject.fullName, target: BindingTarget.property, twoWay: twoWay }; let serializedBinding = this._bindingsHelper.serializeBinding(input, 'value', binding); if (info.type === 'boolean') { serializedBinding = this._bindingsHelper.serializeBinding(input, 'checked', binding); di.setAttribute("type", "checkbox"); } else if (info.role == 'date') { binding.twoWay = twoWay; serializedBinding = this._bindingsHelper.serializeBinding(input, 'value-as-number', binding); di.setAttribute("type", "date"); di.setAttribute("readonly", ""); } else if (info.role == 'datetime') { binding.twoWay = twoWay; serializedBinding = this._bindingsHelper.serializeBinding(input, 'value-as-number', binding); di.setAttribute("type", "datetime-local"); di.setAttribute("readonly", ""); } di.setAttribute(serializedBinding[0], serializedBinding[1]); } di.setStyle('position', 'absolute'); di.setStyle('left', position.x + 'px'); di.setStyle('top', position.y + 'px'); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); grp.commit(); requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di])); } } dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move' { return 'copy'; } dropOnProperty?(event: DragEvent, property: IProperty, bindableObject: IBindableObject, designItems: IDesignItem[]) { if (property.type == 'signal') { property.service.setValue(designItems, property, bindableObject.fullName); return; } const binding: VisualizationBinding = { signal: bindableObject.fullName, target: BindingTarget.property }; if (property.propertyType == PropertyType.attribute) binding.target = BindingTarget.attribute; if (property.propertyType == PropertyType.cssValue) binding.target = BindingTarget.css; binding.signal = bindableObject.fullName; binding.twoWay = property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute; //if (designItems[0].element instanceof BaseCustomControl) // binding.twoWay = false; const group = designItems[0].openGroup('drop binding') for (let d of designItems) { const serializedBinding = this._bindingsHelper.serializeBinding(d.element, property.name, binding); d.setAttribute(serializedBinding[0], serializedBinding[1]); } group.commit(); } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/services/PropertyGridDragDropService.ts ================================================ import { IProperty, IDesignItem, IPropertyGridDragDropService } from "@node-projects/web-component-designer"; export class PropertyGridDragDropService implements IPropertyGridDragDropService { dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move' { return 'copy'; } dropOnProperty?(event: DragEvent, property: IProperty, dropObject: any, designItems: IDesignItem[]) { property.service.setValue(designItems, property, dropObject.text); } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/services/ScriptRefactorService.ts ================================================ import { BindingTarget, IDesignItem, IRefactorService, IRefactoring } from "@node-projects/web-component-designer"; import { Script } from "../scripting/Script.js"; import { IScriptMultiplexValue } from "../interfaces/IScriptMultiplexValue.js"; export class ScriptRefactorService implements IRefactorService { getRefactorings(designItems: IDesignItem[]): (IRefactoring & { refactor: (newValue) => void })[] { const refactorings: (IRefactoring & { refactor: (newValue) => void })[] = []; for (let d of designItems) { for (let a of d.attributes()) { if (a[0][0] == '@') { const sc = a[1]; if (sc[0] == '{') { const script = JSON.parse(sc) as Script; if ('commands' in script) { for (let c of script.commands) { for (let p in c) { const cp = c[p]; if (cp != null && typeof cp === 'object') { let mp = cp as IScriptMultiplexValue; if (mp.source === 'signal') { refactorings.push({ name: mp.name, itemType: 'signal', target: BindingTarget.event, targetName: a[0], service: this, designItem: d, type: 'script', sourceObject: script, display: c.type + '/' + a[0].substring(1) + '/' + p + '[signal]', refactor: newValue => mp.name = newValue }); } else if (mp.source === 'property') { refactorings.push({ name: mp.name, itemType: 'property', target: BindingTarget.event, targetName: a[0], service: this, designItem: d, type: 'script', sourceObject: script, display: c.type + '/' + a[0].substring(1) + '/' + p + '[property]', refactor: newValue => mp.name = newValue }); } else if (mp.source === 'complexString') { for (let m of mp.name.matchAll(/\{(.*?)\}/g)) { let full = m[0]; let nm = m[1]; if (nm[0] === '?') { let prefix = '?'; nm = nm.substring(1); if (nm[0] === '?') { prefix = '??'; nm = nm.substring(1); } refactorings.push({ name: nm, itemType: 'property', target: BindingTarget.event, targetName: a[0], service: this, designItem: d, type: 'script', sourceObject: script, display: c.type + '/' + a[0].substring(1) + '/' + p + '[complexString]->property', refactor: newValue => mp.name = mp.name.replace(full, '{' + prefix + newValue + '}') }); } else { refactorings.push({ name: nm, itemType: 'signal', target: BindingTarget.event, targetName: a[0], service: this, designItem: d, type: 'script', sourceObject: script, display: c.type + '/' + a[0].substring(1) + '/' + p + '[complexString]->signal', refactor: newValue => mp.name = mp.name.replace(full, '{' + newValue + '}') }); } } } } } switch (c.type) { case 'SetSignalValue': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'ToggleSignalValue': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'IncrementSignalValue': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'DecrementSignalValue': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'SetBitInSignal': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'ClearBitInSignal': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'ToggleBitInSignal': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'OpenScreen': if (c.screen && typeof c.screen === 'string') refactorings.push({ name: c.screen, itemType: 'screen', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/screen', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.screen = newValue }); break; case 'OpenDialog': if (c.screen && typeof c.screen === 'string') refactorings.push({ name: c.screen, itemType: 'screen', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/screen', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.screen = newValue }); break; case 'CalculateSignalValue': if (c.targetSignal && typeof c.targetSignal === 'string') refactorings.push({ name: c.targetSignal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/targetSignal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.targetSignal = newValue }); break; case 'SubscribeSignal': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'UnsubscribeSignal': if (c.signal && typeof c.signal === 'string') refactorings.push({ name: c.signal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue }); break; case 'ShowMessageBox': if (c.resultSignal && typeof c.resultSignal === 'string') refactorings.push({ name: c.resultSignal, itemType: 'signal', target: BindingTarget.event, targetName: a[0], display: c.type + '/' + a[0].substring(1) + '/resultSignal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.resultSignal = newValue }); break; } } } else if ('blocks' in script) { } if ('parameters' in script) { for (let p in script.parameters) { if (typeof script.parameters[p] === 'string') { refactorings.push({ name: script.parameters[p], itemType: 'parameter', target: BindingTarget.event, targetName: a[0], service: this, designItem: d, type: 'script', sourceObject: script, display: a[0].substring(1) + '/parameters/' + p, refactor: newValue => script.parameters[p] = newValue }); } } } } } } } return refactorings; } refactor(refactoring: (IRefactoring & { refactor: (newValue) => void }), oldValue: string, newValue: string) { refactoring.refactor(newValue); let scriptString = JSON.stringify(refactoring.sourceObject); refactoring.designItem.setAttribute(refactoring.targetName, scriptString); } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/services/SignalPropertyEditor.ts ================================================ import { BasePropertyEditor, IProperty, ValueType } from "@node-projects/web-component-designer"; import { VisualizationShell } from "../interfaces/VisualizationShell.js"; export class SignalPropertyEditor extends BasePropertyEditor { _ip: HTMLInputElement; protected _container: HTMLDivElement; constructor(property: IProperty, shell: VisualizationShell) { super(property); this._container = document.createElement('div'); this._container.style.display = 'flex'; this._ip = document.createElement('input'); this._ip.onchange = (e) => this._valueChanged(this._ip.value); this._ip.onfocus = (e) => { this._ip.selectionStart = 0; this._ip.selectionEnd = this._ip.value?.length; } this._container.appendChild(this._ip); let btn = document.createElement('button'); btn.textContent = '...'; btn.onclick = async () => { let b = shell.createBindableObjectBrowser(); b.initialize(this.designItems[0].serviceContainer, this.designItems[0].instanceServiceContainer, 'property'); b.title = 'select signal...'; const abortController = new AbortController(); b.objectDoubleclicked.on(() => { abortController.abort(); this._ip.value = b.selectedObject.fullName; this._valueChanged(this._ip.value); }); let res = await shell.openConfirmation(b, { x: 100, y: 100, width: 400, height: 300, abortSignal: abortController.signal }); if (res) { this._ip.value = b.selectedObject.fullName; this._valueChanged(this._ip.value); } } this._container.appendChild(btn); this.element = this._container; } refreshValue(valueType: ValueType, value: any) { if (value == null) this._ip.value = ""; else this._ip.value = value; } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/services/VisualizationBindingsRefactorService.ts ================================================ import { IBinding, IDesignItem, IRefactoring, IRefactorService } from "@node-projects/web-component-designer"; export class VisualizationBindingsRefactorService implements IRefactorService { getRefactorings(designItems: IDesignItem[]): IRefactoring[] { let refactorings: (IRefactoring & { shortName?: string, prefix?: string })[] = []; for (let d of designItems) { let bindings = d.serviceContainer.bindingService.getBindings(d); if (bindings) { for (let b of bindings) { for (let s of b.bindableObjectNames) { let itemType = 'signal'; let prefix = "" if (s.includes(':')) { let nm = s.split(':')[0]; let sng = s.substring(nm.length + 1); if (sng.startsWith('?')) { sng = sng.substring(1); prefix = '?'; itemType = 'property'; if (sng.startsWith('?')) { sng = sng.substring(1); prefix = '??'; } } refactorings.push({ service: this, name: sng, itemType: itemType, designItem: d, type: 'binding', sourceObject: b, display: b.target + '/' + b.targetName + ' - ' + nm + ':', shortName: nm, prefix: prefix }); } else { if (s.startsWith('?')) { s = s.substring(1); prefix = '?'; itemType = 'property'; if (s.startsWith('?')) { s = s.substring(1); prefix = '??'; } } refactorings.push({ service: this, name: s, itemType: itemType, designItem: d, type: 'binding', sourceObject: b, display: b.target + '/' + b.targetName, prefix: prefix }); } } } } } return refactorings; } refactor(refactoring: (IRefactoring & { shortName?: string, prefix?: string }), oldValue: string, newValue: string) { let binding = refactoring.sourceObject as IBinding; if (refactoring.shortName) binding.bindableObjectNames = binding.bindableObjectNames.map(x => x == refactoring.shortName + ':' + refactoring.prefix + oldValue ? refactoring.shortName + ':' + refactoring.prefix + newValue : x); else binding.bindableObjectNames = binding.bindableObjectNames.map(x => x == refactoring.prefix + oldValue ? refactoring.prefix + newValue : x); refactoring.designItem.serviceContainer.bindingService.setBinding(refactoring.designItem, binding); } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/services/VisualizationBindingsService.ts ================================================ import { BindingMode, BindingTarget, IBinding, IBindingService, IDesignItem, PropertiesHelper } from "@node-projects/web-component-designer"; import { VisualizationBinding } from "../interfaces/VisualizationBinding.js"; import { BindingsHelper } from "../helpers/BindingsHelper.js"; export class VisualizationBindingsService implements IBindingService { constructor(bindingsHelper: BindingsHelper) { this._bindingsHelper = bindingsHelper; } private _bindingsHelper: BindingsHelper; public static type = 'visualization-binding'; getBindings(designItem: IDesignItem): (IBinding & { converter: Record })[] { const iobBindings = Array.from(this._bindingsHelper.getBindings(designItem.element)); return iobBindings.map(x => ({ targetName: (x[1].target === BindingTarget.css || x[1].target === BindingTarget.attribute) ? PropertiesHelper.camelToDashCase(x[0]) : x[0], target: x[1].target, mode: x[1].twoWay ? BindingMode.twoWay : BindingMode.oneWay, invert: x[1].inverted, bindableObjectNames: x[1].signal.split(';'), expression: x[1].expression, expressionTwoWay: x[1].expressionTwoWay, converter: x[1].converter, //type: x[1].type, type: VisualizationBindingsService.type, service: this, changedEvents: x[1].events, historic: x[1].historic, writeBackSignal: x[1].writeBackSignal, })); } setBinding(designItem: IDesignItem, binding: IBinding): boolean { let bnd: VisualizationBinding = { signal: binding.bindableObjectNames.join(';'), target: binding.target }; bnd.inverted = binding.invert; bnd.twoWay = binding.mode == BindingMode.twoWay; bnd.expression = binding.expression; bnd.expressionTwoWay = binding.expressionTwoWay; //@ts-ignore bnd.historic = binding.historic; bnd.type = binding.type; bnd.converter = binding.converters; bnd.target = binding.target; bnd.events = binding.changedEvents; let serializedBnd = this._bindingsHelper.serializeBinding(designItem.element, binding.targetName, bnd); let group = designItem.openGroup('edit_binding'); designItem.setAttribute(serializedBnd[0], serializedBnd[1]); group.commit(); return true; } clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean { const name = this._bindingsHelper.getBindingAttributeName(designItem.element, propertyName, propertyTarget); designItem.removeAttribute(name); return true; } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/services/VisualizationEventsService.ts ================================================ import { EventsService, IDesignItem, IEvent, } from "@node-projects/web-component-designer"; import { cyclicAttributeName } from "../scripting/ScriptSystem.js"; export class VisualizationEventsService extends EventsService { public static _cyclicEvent: IEvent[] = [ { name: `${cyclicAttributeName}:100`, propertyName: undefined, eventObjectName: "Event", description: "this event will retrigger itself every 100 ms", }, ]; public override getPossibleEvents(designItem: IDesignItem): IEvent[] { let events = super.getPossibleEvents(designItem); events.push(...VisualizationEventsService._cyclicEvent); return events; } public override getEvent(designItem: IDesignItem, name: string): IEvent { if (name.includes(cyclicAttributeName)) { let evt = VisualizationEventsService._cyclicEvent.find( (x) => x.name == name, ); return ( evt ?? { name, propertyName: "on" + name, eventObjectName: "Event" } ); } return super.getEvent(designItem, name); } } ================================================ FILE: packages/web-component-designer-visualization-addons/src/setupVisuService.ts ================================================ ================================================ FILE: packages/web-component-designer-visualization-addons/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false, "moduleResolution": "bundler" }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/README.md ================================================ # web-component-designer-widgets-wunderbaum ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-widgets-wunderbaum npm i @node-projects/web-component-designer-widgets-wunderbaum ## Description This package contains widgets using wunderbaum. This are more powerfull than the included ones in the designer. ## Usage then import the widgets: import '@node-projects/web-component-designer-widgets-wunderbaum'; now you could use following widgets: ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/package.json ================================================ { "description": "web-component-designer addon: Widgets using wunderbaum", "name": "@node-projects/web-component-designer-widgets-wunderbaum", "version": "0.2.1", "type": "module", "main": "./dist/index.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build && npm run bundle", "bundle": "esbuild ./dist/index.js --format=esm --minify --external:wunderbaum --external:@node-projects/* --platform=neutral --bundle --outfile=./dist/index-min.js" }, "dependencies": { "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/web-component-designer": ">=0.2.0", "wunderbaum": ">=0.13.0" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/src/Constants.ts ================================================ let imporUrl = new URL((import.meta.url)); export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/'; ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/src/index.ts ================================================ export * from "./widgets/bindableObjectsBrowser/bindable-objects-browser.js"; export * from "./widgets/paletteView/paletteTreeView.js"; export * from "./widgets/treeView/treeViewExtended.js"; export * from "./widgets/treeView/ExpandCollapseContextMenu.js"; export * from "./widgets/WunderbaumOptions.js"; ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/WunderbaumOptions.ts ================================================ import { css } from "@node-projects/base-custom-webcomponent"; import { WunderbaumOptions } from "wb_options"; import { assetsPath } from "../Constants.js"; export const defaultStyle = css` i.wb-icon > span.wb-badge { font-size: 70%; background-color: #486471; } div.wunderbaum { --wb-active-color-grayscale: #dddddd; } div.wunderbaum span.wb-node i.wb-icon { background-size: 12px 12px; background-position-x: 5px; background-position-y: 5px; } div.wunderbaum span.wb-node i.wb-expander { background-size: 12px 12px; background-position-x: 5px; background-position-y: 5px; }`; export const defaultOptions: WunderbaumOptions = { element: null, debugLevel: 0, scrollIntoViewOnExpandClick: false, //@ts-ignore iconMap: { expanderCollapsed: assetsPath + 'images/expander.svg', expanderExpanded: assetsPath + 'images/expanderClose.svg', folder: assetsPath + 'images/folder.svg', folderLazy: assetsPath + 'images/folder.svg', folderOpen: assetsPath + 'images/folder.svg', doc: assetsPath + 'images/file.svg', }, quicksearch: true, checkbox: false, source: [], header: false, iconBadge: (e) => { //@ts-ignore const node = e.node; if (node.expanded || !node.children || !node.children.length) { return null; } return { badge: node.children.length }; } } ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/bindableObjectsBrowser/bindable-objects-browser.ts ================================================ import { BaseCustomWebComponentConstructorAppend, TypedEvent, css, cssFromString, html } from '@node-projects/base-custom-webcomponent'; import { BindableObjectsTarget, IBindableObject, IBindableObjectsBrowser, IBindableObjectsService, InstanceServiceContainer, ServiceContainer, dragDropFormatNameBindingObject } from '@node-projects/web-component-designer'; import { WbNodeData } from 'types'; import { Wunderbaum } from 'wunderbaum'; import { defaultOptions, defaultStyle } from '../WunderbaumOptions.js'; //@ts-ignore import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' }; type serviceNode = { service: IBindableObjectsService, bindable: IBindableObject } export class BindableObjectsBrowser extends BaseCustomWebComponentConstructorAppend implements IBindableObjectsBrowser { private _treeDiv: HTMLDivElement; private _tree: Wunderbaum; public selectedObject: IBindableObject; public objectDoubleclicked = new TypedEvent; static override readonly style = css``; static override template = html`
      ` constructor() { super(); this._restoreCachedInititalValues(); this.shadowRoot.adoptedStyleSheets = [cssFromString(wunderbaumStyle), defaultStyle, BindableObjectsBrowser.style]; this._treeDiv = this._getDomElement('tree'); this.shadowRoot.appendChild(this._treeDiv); this._tree = new Wunderbaum({ ...defaultOptions, element: this._treeDiv, iconBadge: null, lazyLoad: (event) => { return new Promise(async resolve => { const service: IBindableObjectsService = (event.node.data).service; const bindable: IBindableObject = (event.node.data).bindable; let children: IBindableObject[]; if (bindable?.children) children = bindable.children; else children = await service.getBindableObjects(bindable, this._instanceServiceContainer); resolve(children.map(x => ({ title: x.name, service, bindable: x, lazy: x.children !== false }))); }); }, //@ts-ignore dblclick: (e) => { this.objectDoubleclicked.emit(); return true; }, activate: (event) => { this.selectedObject = event.node.data.bindable; }, dnd: { guessDropEffect: true, preventRecursion: true, preventVoidMoves: false, serializeClipboardData: false, dragStart: (e) => { e.event.dataTransfer.effectAllowed = "all"; e.event.dataTransfer.setData(dragDropFormatNameBindingObject, JSON.stringify(e.node.data.bindable)); e.event.dataTransfer.dropEffect = "copy"; return true }, dragEnter: (e) => { return true; } } }); } private _instanceServiceContainer; public async initialize(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, bindableObjectsTarget: BindableObjectsTarget) { this._instanceServiceContainer = instanceServiceContainer; let rootNode = this._tree.root; rootNode.removeChildren(); const services = serviceContainer.bindableObjectsServices; for (const s of services) { if (!s.hasObjectsForInstanceServiceContainer(this._instanceServiceContainer, bindableObjectsTarget)) continue; this._tree.root.addChildren({ title: s.name, lazy: true, service: s }); } } } customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser); ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/paletteView/paletteTreeView.ts ================================================ import { css, html, BaseCustomWebComponentConstructorAppend, cssFromString } from '@node-projects/base-custom-webcomponent'; import { IElementDefinition, IElementsService, NamedTools, ServiceContainer, dragDropFormatNameElementDefinition } from '@node-projects/web-component-designer'; import { Wunderbaum } from 'wunderbaum'; import { defaultOptions, defaultStyle } from '../WunderbaumOptions.js'; //@ts-ignore import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' }; import { WbNodeData } from 'types'; export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend { private _treeDiv: HTMLTableElement; private _tree: Wunderbaum; private _filter: HTMLInputElement; static override readonly style = css` :host { display: block; } * { touch-action: none; }`; static override readonly template = html`
      `; public serviceContainer: ServiceContainer; constructor() { super(); this._restoreCachedInititalValues(); this.shadowRoot.adoptedStyleSheets = [cssFromString(wunderbaumStyle), defaultStyle, PaletteTreeView.style]; this._filter = this._getDomElement('input'); this._filter.onkeyup = () => { let match = this._filter.value; this._tree.filterNodes((node) => { return new RegExp(match, "i").test(node.title); }, {}); } this._treeDiv = this._getDomElement('treetable') this._tree = new Wunderbaum({ ...defaultOptions, element: this._treeDiv, filter: { autoExpand: true, mode: 'hide', highlight: true }, click: (e) => { if (e.event) { // only for clicked items, not when elements selected via code. let node = e.node; let elDef: IElementDefinition = node.data.ref; if (elDef) { let tool = this.serviceContainer.designerTools.get(elDef.tool ?? NamedTools.DrawElementTool); if (typeof tool == 'function') tool = new tool(elDef) this.serviceContainer.globalContext.tool = tool; } } }, dnd: { guessDropEffect: true, preventRecursion: true, // Prevent dropping nodes on own descendants preventVoidMoves: false, serializeClipboardData: false, dragStart: (e) => { e.event.dataTransfer.effectAllowed = "all"; e.event.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(e.node.data.ref)); e.event.dataTransfer.dropEffect = "copy"; return true; }, dragEnter: (e) => { return false; } } }); } public async loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]) { this.serviceContainer = serviceContainer; let rootNode = this._tree.root; rootNode.removeChildren(); for (const s of elementsServices) { const newNode = rootNode.addChildren({ title: s.name }); try { let elements = await s.getElements(); for (let e of elements) { let node: WbNodeData = { title: e.name ?? e.tag, //@ts-ignore ref: e }; if (e.icon) node.icon = e.icon; newNode.addChildren(node); } } catch (err) { console.warn('Error loading elements', err); } } } } customElements.define('node-projects-palette-tree-view', PaletteTreeView); ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/treeView/ExpandCollapseContextMenu.ts ================================================ import { ContextmenuInitiator, IContextMenuExtension, IContextMenuItem, IDesignItem, IDesignerCanvas } from "@node-projects/web-component-designer"; import { TreeViewExtended } from "./treeViewExtended.js"; import { assetsPath } from "../../Constants.js"; export class ExpandCollapseContextMenu implements IContextMenuExtension { public shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator) { if (initiator == 'treeView') { return true } return false; } public provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator, provider: TreeViewExtended): IContextMenuItem[] { return [ { title: 'collapse children', icon: ``, action: () => { provider.collapseChildren(designItem) } }, { title: 'expand children', icon: ``, action: () => { provider.expandChildren(designItem) } }, ] } } ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/treeView/treeViewExtended.ts ================================================ import { css, html, BaseCustomWebComponentConstructorAppend, Disposable, cssFromString } from '@node-projects/base-custom-webcomponent'; import { NodeType, ITreeView, InstanceServiceContainer, IDesignItem, assetsPath, IContextMenuItem, ContextMenu, switchContainer, ISelectionChangedEvent, DomConverter, ForceCssContextMenu, hasCommandKey } from '@node-projects/web-component-designer'; import { Wunderbaum } from 'wunderbaum'; import { defaultOptions, defaultStyle } from '../WunderbaumOptions.js' //@ts-ignore import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' }; type WunderbaumNode = { getColElem(n: number); addChildren({ }: any); } type treeNode = { title: string, ref: IDesignItem, children?: treeNode[] }; const wbNodeSymbol = Symbol.for('wunderbaumnode'); export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView { private _treeDiv: HTMLTableElement; private _tree: Wunderbaum; private _filter: HTMLInputElement; private _instanceServiceContainer: InstanceServiceContainer; private _selectionChangedHandler: Disposable; private _contentChangedHandler: Disposable; static override readonly style = css` * { touch-action: none; cursor: default; } .cmd { display: flex; position: absolute; right: 0; top: 0; height: 100%; padding-right: 2px; align-items: center; gap: 2px; background: #ffffffc9; width: 42px; justify-content: flex-end; background: white; } .cmd > img { width: 10px; } div.wunderbaum div.wb-row { display: block; } span.wb-node.wb-col { width: unset !important; display: inline-block; } div.wunderbaum span.wb-node span.wb-title { text-overflow: unset; width: unset !important; } div.forced { border-radius: 50%; width: 10px; height: 10px; background: transparent; pointer-events: none; top: 5px; left: 5px; position: relative; } div.isforced { background: orange; pointer-events: auto; }`; static override readonly template = html`
      `; public static properties = { instanceServiceContainer: Object, } constructor() { super(); this._restoreCachedInititalValues(); this.shadowRoot.adoptedStyleSheets = [cssFromString(wunderbaumStyle), defaultStyle, TreeViewExtended.style]; this._filter = this._getDomElement('input'); this._filter.onkeyup = () => { this._filterNodes(); } this._treeDiv = this._getDomElement('treetable'); this._treeDiv.onscroll = () => { for (let e of this._treeDiv.querySelectorAll('.cmd')) { (e).style.right = '-' + this._treeDiv.scrollLeft + 'px'; } } const expand = this._getDomElement('expandAll'); expand.onclick = () => { this._tree.root .visit((node) => { if (!node.isExpanded()) node.setExpanded(true); }); } const collapse = this._getDomElement('collapseAll'); collapse.onclick = () => { this._tree.root .visit((node) => { if (node.isExpanded()) node.setExpanded(false); }); } } _filterNodes() { let match = this._filter.value; if (match) { const regEx = new RegExp(match, "i"); this._tree.filterNodes((node) => { const di: IDesignItem = node.data.ref return regEx.test(di.name) || regEx.test(di.id) || regEx.test(di.content); }, {}); } else { this._tree.clearFilter(); } } _showHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem) { if (designItem.hideAtDesignTime) img.src = assetsPath + "images/treeview/eyeclose.png"; else img.src = assetsPath + "images/treeview/eyeopen.png"; } _switchHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem) { designItem.hideAtDesignTime = !designItem.hideAtDesignTime; this._showHideAtDesignTimeState(img, designItem); } _showLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem) { if (designItem.lockAtDesignTime) img.src = assetsPath + "images/treeview/lock.png"; else img.src = assetsPath + "images/treeview/dot.png"; } _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem) { designItem.lockAtDesignTime = !designItem.lockAtDesignTime; this._showLockAtDesignTimeState(img, designItem); } _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem) { if (designItem.hideAtRunTime) img.src = assetsPath + "images/treeview/eyeclose.png"; else img.src = assetsPath + "images/treeview/eyeopen.png"; } _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem) { designItem.hideAtRunTime = !designItem.hideAtRunTime; this._showHideAtRunTimeState(img, designItem); } public showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent) { event.preventDefault(); const mnuItems: IContextMenuItem[] = []; for (let cme of designItem.serviceContainer.designerContextMenuExtensions) { if (cme.shouldProvideContextmenu(event, designItem.instanceServiceContainer.designerCanvas, designItem, 'treeView')) { mnuItems.push(...cme.provideContextMenuItems(event, designItem.instanceServiceContainer.designerCanvas, designItem, 'treeView', this)); } } let ctxMnu = ContextMenu.show(mnuItems, event); return ctxMnu; } selectedFromTree = false; async ready() { this._initWunderbaum(); if (this._instanceServiceContainer) { this.createTree(this._instanceServiceContainer.rootDesignItem); } } private _initWunderbaum() { this._tree = new Wunderbaum({ ...defaultOptions, element: this._treeDiv, //@ts-ignore click: (e) => { if (e.event) { // only for clicked items, not when elements selected via code. let node = e.node; let designItem: IDesignItem = node.data.ref; if (designItem) { this.selectedFromTree = true; setTimeout(() => { this.selectedFromTree = false; }, 50); if (hasCommandKey(e.event)) { const sel = [...designItem.instanceServiceContainer.selectionService.selectedElements]; const idx = sel.indexOf(designItem); if (idx >= 0) { sel.splice(idx, 1); designItem.instanceServiceContainer.selectionService.setSelectedElements(sel); } else { designItem.instanceServiceContainer.selectionService.setSelectedElements([...sel, designItem]); } } else { designItem.instanceServiceContainer.selectionService.setSelectedElements([designItem]); } } } const disableExpand = (e.event).ctrlKey || (e.event).shiftKey; return !disableExpand; }, dnd: { guessDropEffect: true, preventRecursion: true, preventVoidMoves: false, serializeClipboardData: false, dragStart: (e) => { e.event.dataTransfer.effectAllowed = "all"; e.event.dataTransfer.dropEffect = "move"; return true; }, dragEnter: (e) => { e.event.dataTransfer.dropEffect = e.event.ctrlKey ? 'copy' : 'move'; return true; }, dragOver: (e) => { e.event.dataTransfer.dropEffect = e.event.ctrlKey ? 'copy' : 'move'; //return true; }, drop: async (e) => { let sourceDesignitems: IDesignItem[] = [e.sourceNode].map(x => x.data.ref); if (e.event.dataTransfer.dropEffect == 'copy') { let newSourceDesignitems: IDesignItem[] = []; for (let d of sourceDesignitems) newSourceDesignitems.push(await d.clone()); sourceDesignitems = newSourceDesignitems; } const targetDesignitem: IDesignItem = e.node.data.ref; let grp = targetDesignitem.openGroup("drag/drop in treeview"); if (e.region == 'over') { switchContainer(sourceDesignitems, targetDesignitem); } else if (e.region == 'after' || e.region == 'before') { for (let d of sourceDesignitems) { if (d.parent != targetDesignitem.parent) { switchContainer([d], targetDesignitem.parent); } if (e.region == 'before') targetDesignitem.insertAdjacentElement(d, 'beforebegin'); else targetDesignitem.insertAdjacentElement(d, 'afterend'); } } grp.commit(); } }, filter: { autoApply: true, // Re-apply last filter if lazy data is loaded autoExpand: true, // Expand all branches that contain matches while filtered fuzzy: true, // Match single characters in order, e.g. 'fb' will match 'FooBar' hideExpanders: false, // Hide expanders if all child nodes are hidden by filter highlight: true, // Highlight matches by wrapping inside tags leavesOnly: false, // Match end nodes only mode: "hide" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead) }, render: (e) => { if (e.isNew) { const node = e.node; const rowElem = e.nodeElem.parentElement; let item: IDesignItem = node.data.ref; e.nodeElem.oncontextmenu = (e) => this.showDesignItemContextMenu(item, e); e.nodeElem.onmouseenter = (e) => item.instanceServiceContainer.designerCanvas.showHoverExtension(item.element, e); e.nodeElem.onmouseleave = (e) => item.instanceServiceContainer.designerCanvas.showHoverExtension(null, e); let sp = document.createElement("span"); sp.style.display = "inline-block"; sp.style.width = "42px"; e.nodeElem.appendChild(sp); if (item && item.nodeType === NodeType.Element && item !== item.instanceServiceContainer.rootDesignItem) { const d = document.createElement("div"); d.className = "cmd"; const imgL = document.createElement('img'); this._showLockAtDesignTimeState(imgL, item); imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, item); imgL.title = 'lock'; d.appendChild(imgL); const img = document.createElement('img'); this._showHideAtDesignTimeState(img, item); img.onclick = () => this._switchHideAtDesignTimeState(img, item); img.title = 'hide in designer'; d.appendChild(img); const imgH = document.createElement('img'); this._showHideAtRunTimeState(imgH, item); imgH.onclick = () => this._switchHideAtRunTimeState(imgH, item); imgH.title = 'hide at runtime'; d.appendChild(imgH); rowElem.appendChild(d); const f = document.createElement("div"); f.className = "forced"; f.title = "has forced style"; rowElem.appendChild(f); f.addEventListener('click', (event) => { const items = new ForceCssContextMenu().provideContextMenuItems(event, item.instanceServiceContainer.designerCanvas, item); let ctxMenu = new ContextMenu(items, null); ctxMenu.display(event); }); if (item.hasForcedCss) { f.className = "forced isforced"; } } } e.nodeElem.querySelector("span.wb-title").innerHTML = e.node.title; }, }); } _recomputeRunning; _recomputeRequestedAgain; private async refreshNode(node: WunderbaumNode, item: IDesignItem) { const el = node.getColElem(0).parentElement; const f = el.querySelector('.forced') if (item.hasForcedCss) f.classList.add('isforced'); else f.classList.remove('isforced'); } public async createTree(rootItem: IDesignItem) { if (this._tree) { if (!this._recomputeRunning) { this._recomputeRunning = true; setTimeout(async () => { this._recomputeRequestedAgain = false; await this._recomputeTree(rootItem); this._recomputeRunning = false; if (this._recomputeRequestedAgain) { this._recomputeRequestedAgain = false; this.createTree(rootItem); } }, 20); } else { this._recomputeRequestedAgain = true; } } } public set instanceServiceContainer(value: InstanceServiceContainer) { this._selectionChangedHandler?.dispose(); this._contentChangedHandler?.dispose(); this._instanceServiceContainer = value; if (this._instanceServiceContainer) { this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => { this.selectionChanged(e); }); this._contentChangedHandler = this._instanceServiceContainer.onContentChanged.on(changes => { for (let e of changes) { if (e.changeType === 'changed') { for (const d of e.designItems) { if (d[wbNodeSymbol]) this.refreshNode(d[wbNodeSymbol], d); } } else { this.createTree(value.rootDesignItem); setTimeout(() => { this._highlight(this._instanceServiceContainer.selectionService.selectedElements); }, 20); } } }); if (this._tree) this.createTree(value.rootDesignItem); } else { this._tree.root.removeChildren(); } } public selectionChanged(event: ISelectionChangedEvent) { this._highlight(event.selectedElements); } private async _recomputeTree(rootItem: IDesignItem) { try { this._tree.root.removeChildren(); const newTree = this._getChildren(rootItem); this._tree.root.addChildren(newTree); this._tree.root.visit(node => { node.data.ref[wbNodeSymbol] = node; }); await this._tree.expandAll(); this._filterNodes(); } catch (err) { console.error(err); } } private _getChildren(item: IDesignItem): treeNode { const nd: treeNode = { title: item.isRootItem ? '-root-' : item.nodeType === NodeType.Element ? item.name + " " + (item.id ? ('#' + item.id) : '') : '#' + (item.nodeType === NodeType.TextNode ? 'text' : 'comment') + '  ' + DomConverter.normalizeContentValue(item.content), ref: item } for (let i of item.children()) { if (!i.isEmptyTextNode) { if (!nd.children) nd.children = [] nd.children.push(this._getChildren(i)); } } return nd; } private _highlight(activeElements: IDesignItem[]) { let scrolled = false; this._tree.runWithDeferredUpdate(() => { this._tree.visit((node) => { const flag = activeElements && activeElements.includes(node.data.ref); if (flag != node.selected) node.setSelected(flag); if (flag != node.isActive()) node.setActive(flag); if (!this.selectedFromTree) { if (flag) node.setFocus(true); if (flag && !scrolled) { scrolled = true; requestAnimationFrame(() => { node.scrollIntoView(); }); } } }); }); } public collapseChildren(designItem: IDesignItem) { const node = this._tree.findFirst(x => designItem == x.data.ref); if (node) { node.visit(x => { x.setExpanded(false); }); } } public expandChildren(designItem: IDesignItem) { const node = this._tree.findFirst(x => designItem == x.data.ref); if (node) { node.visit(x => { x.setExpanded(true); }); } } } customElements.define('node-projects-tree-view-extended', TreeViewExtended); ================================================ FILE: packages/web-component-designer-widgets-wunderbaum/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false }, "include": [ "src/**/*.ts", "src/**/*.js" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: packages/web-component-designer-zpl/.npmignore ================================================ src/ test/ node_modules/ tsconfig.json tsconfig.tsbuildinfo !dist ================================================ FILE: packages/web-component-designer-zpl/README.md ================================================ # web-component-designer-zpl ## NPM Package https://www.npmjs.com/package/@node-projects/web-component-designer-zpl npm i @node-projects/web-component-designer-zpl ## Description This package contains widgets and services wich help to create a zpl designer. ## Usage see the zpl designer sample application ================================================ FILE: packages/web-component-designer-zpl/package.json ================================================ { "description": "web-component-designer addon: Widgets and Services for creating a ZPL Designer", "name": "@node-projects/web-component-designer-zpl", "version": "0.2.0", "type": "module", "main": "./dist/index.js", "author": "jochen.kuehner@gmx.de", "license": "MIT", "scripts": { "tsc": "tsc", "build": "tsc", "link": "npm link", "prepublishOnly": "npm run build" }, "dependencies": { "@node-projects/base-custom-webcomponent": ">=0.27.8", "@node-projects/web-component-designer": ">=0.2.0", "jsbarcode": "^3.11.6" }, "repository": { "type": "git", "url": "git+https://github.com/node-projects/web-component-designer.git" } } ================================================ FILE: packages/web-component-designer-zpl/src/extensions/ZplLayoutResizeExtensionProvider.ts ================================================ import { IExtensionManager, IDesignerCanvas, IDesignItem, ResizeExtensionProvider } from '@node-projects/web-component-designer'; import { ZplImage } from '../widgets/zpl-image.js'; import { ZplBarcode } from '../widgets/zpl-barcode.js'; import { ZplText } from '../widgets/zpl-text.js'; export class ZplLayoutResizeExtensionProvider extends ResizeExtensionProvider { override shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean { //return designItem.element.localName !== MfcConfigRoute.is; switch (designItem.name) { case ZplImage.is: case ZplBarcode.is: case ZplText.is: return false; } return true; } } ================================================ FILE: packages/web-component-designer-zpl/src/index.ts ================================================ export * from "./widgets/zpl-barcode.js"; export * from "./widgets/zpl-graphic-box.js"; export * from "./widgets/zpl-graphic-circle.js"; export * from "./widgets/zpl-graphic-diagonal-line.js"; export * from "./widgets/zpl-image.js"; export * from "./widgets/zpl-text.js"; export * from "./monaco/ZplLanguage.js"; export * from "./extensions/ZplLayoutResizeExtensionProvider.js"; export * from "./services/ZplImageDrop.js"; export * from "./services/ZplLayoutCopyPasteService.js"; export * from "./services/ZplLayoutPlacementService.js"; export * from "./services/ZplParserService.js"; export * from "./jsBarcodeOptions.js"; export * from "./qr.js"; export * from "./setupZplServiceContainer.js"; export * from "./zplHelper.js"; ================================================ FILE: packages/web-component-designer-zpl/src/jsBarcodeOptions.ts ================================================ export type BarcodeOptions = { format?: BarcodeFormat; width?: number; height?: number; displayValue?: boolean; text?: string; fontOptions?: string; font?: string; textAlign?: string; textPosition?: string; textMargin?: number; fontSize?: number; background?: string; lineColor?: string; margin?: number; marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number; flat?: boolean; valid?: Function; } export enum BarcodeFormat { CODE128 = "CODE128", // CODE128A = "CODE128A", // CODE128B = "CODE128B", // CODE123C = "CODE128C", // CODE39 = "CODE39", // EAN2 = "EAN2", // EAN5 = "EAN5", // EAN8 = "EAN8", EAN13 = "EAN13", // UPC = "UPC", QR = 'QR', } ================================================ FILE: packages/web-component-designer-zpl/src/monaco/ZplLanguage.ts ================================================ export function addZplLanguageToMonaco(monaco?: any) { if (!monaco) //@ts-ignore monaco = window.monaco; //@ts-ignore monaco.languages.register({ id: "zplLanguage" }); //@ts-ignore monaco.languages.setMonarchTokensProvider("zplLanguage", { tokenizer: { root: [ // lookbehind seems not to work - [/(?<=\^FD)[^\^]*/, "text"], [/\^FX[^\^]*/, "comment"], [/\^FD[^\^]*/, "text"], [/\^../, "command"], ], }, }); //@ts-ignore monaco.editor.defineTheme("zplTheme", { base: "vs", inherit: false, rules: [ { token: "text", foreground: "999999" }, { token: "comment", foreground: "008000" }, { token: "command", foreground: "0000FF", fontStyle: "bold" }, ], colors: { "editor.foreground": "#000000", }, }) } ================================================ FILE: packages/web-component-designer-zpl/src/qr.ts ================================================ /* qr.js -- QR code generator in Javascript (revision 2011-01-19) * Written by Kang Seonghoon . * * This source code is in the public domain; if your jurisdiction does not * recognize the public domain the terms of Creative Commons CC0 license * apply. In the other words, you can always do what you want. */ /* Quick overview: QR code composed of 2D array of modules (a rectangular * area that conveys one bit of information); some modules are fixed to help * the recognition of the code, and remaining data modules are further divided * into 8-bit code words which are augumented by Reed-Solomon error correcting * codes (ECC). There could be multiple ECCs, in the case the code is so large * that it is helpful to split the raw data into several chunks. * * The number of modules is determined by the code's "version", ranging from 1 * (21x21) to 40 (177x177). How many ECC bits are used is determined by the * ECC level (L/M/Q/H). The number and size (and thus the order of generator * polynomial) of ECCs depend to the version and ECC level. */ // per-version information (cf. JIS X 0510:2004 pp. 30--36, 71) // // [0]: the degree of generator polynomial by ECC levels // [1]: # of code blocks by ECC levels // [2]: left-top positions of alignment patterns // // the number in this table (in particular, [0]) does not exactly match with // the numbers in the specficiation. see augumenteccs below for the reason. var VERSIONS = [ null, [[10, 7, 17, 13], [1, 1, 1, 1], []], [[16, 10, 28, 22], [1, 1, 1, 1], [4, 16]], [[26, 15, 22, 18], [1, 1, 2, 2], [4, 20]], [[18, 20, 16, 26], [2, 1, 4, 2], [4, 24]], [[24, 26, 22, 18], [2, 1, 4, 4], [4, 28]], [[16, 18, 28, 24], [4, 2, 4, 4], [4, 32]], [[18, 20, 26, 18], [4, 2, 5, 6], [4, 20, 36]], [[22, 24, 26, 22], [4, 2, 6, 6], [4, 22, 40]], [[22, 30, 24, 20], [5, 2, 8, 8], [4, 24, 44]], [[26, 18, 28, 24], [5, 4, 8, 8], [4, 26, 48]], [[30, 20, 24, 28], [5, 4, 11, 8], [4, 28, 52]], [[22, 24, 28, 26], [8, 4, 11, 10], [4, 30, 56]], [[22, 26, 22, 24], [9, 4, 16, 12], [4, 32, 60]], [[24, 30, 24, 20], [9, 4, 16, 16], [4, 24, 44, 64]], [[24, 22, 24, 30], [10, 6, 18, 12], [4, 24, 46, 68]], [[28, 24, 30, 24], [10, 6, 16, 17], [4, 24, 48, 72]], [[28, 28, 28, 28], [11, 6, 19, 16], [4, 28, 52, 76]], [[26, 30, 28, 28], [13, 6, 21, 18], [4, 28, 54, 80]], [[26, 28, 26, 26], [14, 7, 25, 21], [4, 28, 56, 84]], [[26, 28, 28, 30], [16, 8, 25, 20], [4, 32, 60, 88]], [[26, 28, 30, 28], [17, 8, 25, 23], [4, 26, 48, 70, 92]], [[28, 28, 24, 30], [17, 9, 34, 23], [4, 24, 48, 72, 96]], [[28, 30, 30, 30], [18, 9, 30, 25], [4, 28, 52, 76, 100]], [[28, 30, 30, 30], [20, 10, 32, 27], [4, 26, 52, 78, 104]], [[28, 26, 30, 30], [21, 12, 35, 29], [4, 30, 56, 82, 108]], [[28, 28, 30, 28], [23, 12, 37, 34], [4, 28, 56, 84, 112]], [[28, 30, 30, 30], [25, 12, 40, 34], [4, 32, 60, 88, 116]], [[28, 30, 30, 30], [26, 13, 42, 35], [4, 24, 48, 72, 96, 120]], [[28, 30, 30, 30], [28, 14, 45, 38], [4, 28, 52, 76, 100, 124]], [[28, 30, 30, 30], [29, 15, 48, 40], [4, 24, 50, 76, 102, 128]], [[28, 30, 30, 30], [31, 16, 51, 43], [4, 28, 54, 80, 106, 132]], [[28, 30, 30, 30], [33, 17, 54, 45], [4, 32, 58, 84, 110, 136]], [[28, 30, 30, 30], [35, 18, 57, 48], [4, 28, 56, 84, 112, 140]], [[28, 30, 30, 30], [37, 19, 60, 51], [4, 32, 60, 88, 116, 144]], [[28, 30, 30, 30], [38, 19, 63, 53], [4, 28, 52, 76, 100, 124, 148]], [[28, 30, 30, 30], [40, 20, 66, 56], [4, 22, 48, 74, 100, 126, 152]], [[28, 30, 30, 30], [43, 21, 70, 59], [4, 26, 52, 78, 104, 130, 156]], [[28, 30, 30, 30], [45, 22, 74, 62], [4, 30, 56, 82, 108, 134, 160]], [[28, 30, 30, 30], [47, 24, 77, 65], [4, 24, 52, 80, 108, 136, 164]], [[28, 30, 30, 30], [49, 25, 81, 68], [4, 28, 56, 84, 112, 140, 168]]]; // mode constants (cf. Table 2 in JIS X 0510:2004 p. 16) var MODE_TERMINATOR = 0; var MODE_NUMERIC = 1, MODE_ALPHANUMERIC = 2, MODE_OCTET = 4, MODE_KANJI = 8; // validation regexps var NUMERIC_REGEXP = /^\d*$/; var ALPHANUMERIC_REGEXP = /^[A-Za-z0-9 $%*+\-./:]*$/; var ALPHANUMERIC_OUT_REGEXP = /^[A-Z0-9 $%*+\-./:]*$/; // ECC levels (cf. Table 22 in JIS X 0510:2004 p. 45) var ECCLEVEL_L = 1, ECCLEVEL_M = 0, ECCLEVEL_Q = 3, ECCLEVEL_H = 2; // GF(2^8)-to-integer mapping with a reducing polynomial x^8+x^4+x^3+x^2+1 // invariant: GF256_MAP[GF256_INVMAP[i]] == i for all i in [1,256) var GF256_MAP = [], GF256_INVMAP = [-1]; for (var i = 0, v = 1; i < 255; ++i) { GF256_MAP.push(v); GF256_INVMAP[v] = i; v = (v * 2) ^ (v >= 128 ? 0x11d : 0); } // generator polynomials up to degree 30 // (should match with polynomials in JIS X 0510:2004 Appendix A) // // generator polynomial of degree K is product of (x-\alpha^0), (x-\alpha^1), // ..., (x-\alpha^(K-1)). by convention, we omit the K-th coefficient (always 1) // from the result; also other coefficients are written in terms of the exponent // to \alpha to avoid the redundant calculation. (see also calculateecc below.) var GF256_GENPOLY = [[]]; for (var i = 0; i < 30; ++i) { var prevpoly = GF256_GENPOLY[i], poly = []; for (var j = 0; j <= i; ++j) { var a = (j < i ? GF256_MAP[prevpoly[j]] : 0); var b = GF256_MAP[(i + (prevpoly[j - 1] || 0)) % 255]; poly.push(GF256_INVMAP[a ^ b]); } GF256_GENPOLY.push(poly); } // alphanumeric character mapping (cf. Table 5 in JIS X 0510:2004 p. 19) var ALPHANUMERIC_MAP = {}; for (var i = 0; i < 45; ++i) { ALPHANUMERIC_MAP['0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:'.charAt(i)] = i; } // mask functions in terms of row # and column # // (cf. Table 20 in JIS X 0510:2004 p. 42) var MASKFUNCS = [ function (i, j) { return (i + j) % 2 == 0; }, function (i, j) { return i % 2 == 0; }, function (i, j) { return j % 3 == 0; }, function (i, j) { return (i + j) % 3 == 0; }, function (i, j) { return (((i / 2) | 0) + ((j / 3) | 0)) % 2 == 0; }, function (i, j) { return (i * j) % 2 + (i * j) % 3 == 0; }, function (i, j) { return ((i * j) % 2 + (i * j) % 3) % 2 == 0; }, function (i, j) { return ((i + j) % 2 + (i * j) % 3) % 2 == 0; }]; // returns true when the version information has to be embeded. var needsverinfo = function (ver) { return ver > 6; }; // returns the size of entire QR code for given version. var getsizebyver = function (ver) { return 4 * ver + 17; }; // returns the number of bits available for code words in this version. var nfullbits = function (ver) { /* * |<--------------- n --------------->| * | |<----- n-17 ---->| | * +-------+ ///+-------+ ---- * | | ///| | ^ * | 9x9 | @@@@@ ///| 9x8 | | * | | # # # @5x5@ # # # | | | * +-------+ @@@@@ +-------+ | * # ---| * ^ | * # | * @@@@@ @@@@@ @@@@@ | n * @5x5@ @5x5@ @5x5@ n-17 * @@@@@ @@@@@ @@@@@ | | * # | | * ////// v | * //////# ---| * +-------+ @@@@@ @@@@@ | * | | @5x5@ @5x5@ | * | 8x9 | @@@@@ @@@@@ | * | | v * +-------+ ---- * * when the entire code has n^2 modules and there are m^2-3 alignment * patterns, we have: * - 225 (= 9x9 + 9x8 + 8x9) modules for finder patterns and * format information; * - 2n-34 (= 2(n-17)) modules for timing patterns; * - 36 (= 3x6 + 6x3) modules for version information, if any; * - 25m^2-75 (= (m^2-3)(5x5)) modules for alignment patterns * if any, but 10m-20 (= 2(m-2)x5) of them overlaps with * timing patterns. */ var v = VERSIONS[ver]; var nbits = 16 * ver * ver + 128 * ver + 64; // finder, timing and format info. if (needsverinfo(ver)) nbits -= 36; // version information if (v[2].length) { // alignment patterns nbits -= 25 * v[2].length * v[2].length - 10 * v[2].length - 55; } return nbits; }; // returns the number of bits available for data portions (i.e. excludes ECC // bits but includes mode and length bits) in this version and ECC level. var ndatabits = function (ver, ecclevel) { var nbits = nfullbits(ver) & ~7; // no sub-octet code words var v = VERSIONS[ver]; nbits -= 8 * v[0][ecclevel] * v[1][ecclevel]; // ecc bits return nbits; } // returns the number of bits required for the length of data. // (cf. Table 3 in JIS X 0510:2004 p. 16) var ndatalenbits = function (ver, mode) { switch (mode) { case MODE_NUMERIC: return (ver < 10 ? 10 : ver < 27 ? 12 : 14); case MODE_ALPHANUMERIC: return (ver < 10 ? 9 : ver < 27 ? 11 : 13); case MODE_OCTET: return (ver < 10 ? 8 : 16); case MODE_KANJI: return (ver < 10 ? 8 : ver < 27 ? 10 : 12); } return undefined; }; // returns the maximum length of data possible in given configuration. var getmaxdatalen = function (ver, mode, ecclevel) { var nbits = ndatabits(ver, ecclevel) - 4 - ndatalenbits(ver, mode); // 4 for mode bits switch (mode) { case MODE_NUMERIC: return ((nbits / 10) | 0) * 3 + (nbits % 10 < 4 ? 0 : nbits % 10 < 7 ? 1 : 2); case MODE_ALPHANUMERIC: return ((nbits / 11) | 0) * 2 + (nbits % 11 < 6 ? 0 : 1); case MODE_OCTET: return (nbits / 8) | 0; case MODE_KANJI: return (nbits / 13) | 0; } return undefined; }; // checks if the given data can be encoded in given mode, and returns // the converted data for the further processing if possible. otherwise // returns null. // // this function does not check the length of data; it is a duty of // encode function below (as it depends on the version and ECC level too). var validatedata = function (mode, data) { switch (mode) { case MODE_NUMERIC: if (!data.match(NUMERIC_REGEXP)) return null; return data; case MODE_ALPHANUMERIC: if (!data.match(ALPHANUMERIC_REGEXP)) return null; return data.toUpperCase(); case MODE_OCTET: if (typeof data === 'string') { // encode as utf-8 string var newdata = []; for (var i = 0; i < data.length; ++i) { var ch = data.charCodeAt(i); if (ch < 0x80) { newdata.push(ch); } else if (ch < 0x800) { newdata.push(0xc0 | (ch >> 6), 0x80 | (ch & 0x3f)); } else if (ch < 0x10000) { newdata.push(0xe0 | (ch >> 12), 0x80 | ((ch >> 6) & 0x3f), 0x80 | (ch & 0x3f)); } else { newdata.push(0xf0 | (ch >> 18), 0x80 | ((ch >> 12) & 0x3f), 0x80 | ((ch >> 6) & 0x3f), 0x80 | (ch & 0x3f)); } } return newdata; } else { return data; } } }; // returns the code words (sans ECC bits) for given data and configurations. // requires data to be preprocessed by validatedata. no length check is // performed, and everything has to be checked before calling this function. var encode = function (ver, mode, data, maxbuflen) { var buf = []; var bits = 0, remaining = 8; var datalen = data.length; // this function is intentionally no-op when n=0. var pack = function (x, n) { if (n >= remaining) { buf.push(bits | (x >> (n -= remaining))); while (n >= 8) buf.push((x >> (n -= 8)) & 255); bits = 0; remaining = 8; } if (n > 0) bits |= (x & ((1 << n) - 1)) << (remaining -= n); }; var nlenbits = ndatalenbits(ver, mode); pack(mode, 4); pack(datalen, nlenbits); switch (mode) { case MODE_NUMERIC: for (var i = 2; i < datalen; i += 3) { pack(parseInt(data.substring(i - 2, i + 1), 10), 10); } pack(parseInt(data.substring(i - 2), 10), [0, 4, 7][datalen % 3]); break; case MODE_ALPHANUMERIC: for (var i = 1; i < datalen; i += 2) { pack(ALPHANUMERIC_MAP[data.charAt(i - 1)] * 45 + ALPHANUMERIC_MAP[data.charAt(i)], 11); } if (datalen % 2 == 1) { pack(ALPHANUMERIC_MAP[data.charAt(i - 1)], 6); } break; case MODE_OCTET: for (var i = 0; i < datalen; ++i) { pack(data[i], 8); } break; }; // final bits. it is possible that adding terminator causes the buffer // to overflow, but then the buffer truncated to the maximum size will // be valid as the truncated terminator mode bits and padding is // identical in appearance (cf. JIS X 0510:2004 sec 8.4.8). pack(MODE_TERMINATOR, 4); if (remaining < 8) buf.push(bits); // the padding to fill up the remaining space. we should not add any // words when the overflow already occurred. while (buf.length + 1 < maxbuflen) buf.push(0xec, 0x11); if (buf.length < maxbuflen) buf.push(0xec); return buf; }; // calculates ECC code words for given code words and generator polynomial. // // this is quite similar to CRC calculation as both Reed-Solomon and CRC use // the certain kind of cyclic codes, which is effectively the division of // zero-augumented polynomial by the generator polynomial. the only difference // is that Reed-Solomon uses GF(2^8), instead of CRC's GF(2), and Reed-Solomon // uses the different generator polynomial than CRC's. var calculateecc = function (poly, genpoly) { var modulus = poly.slice(0); var polylen = poly.length, genpolylen = genpoly.length; for (var i = 0; i < genpolylen; ++i) modulus.push(0); for (var i = 0; i < polylen;) { var quotient = GF256_INVMAP[modulus[i++]]; if (quotient >= 0) { for (var j = 0; j < genpolylen; ++j) { modulus[i + j] ^= GF256_MAP[(quotient + genpoly[j]) % 255]; } } } return modulus.slice(polylen); }; // auguments ECC code words to given code words. the resulting words are // ready to be encoded in the matrix. // // the much of actual augumenting procedure follows JIS X 0510:2004 sec 8.7. // the code is simplified using the fact that the size of each code & ECC // blocks is almost same; for example, when we have 4 blocks and 46 data words // the number of code words in those blocks are 11, 11, 12, 12 respectively. var augumenteccs = function (poly, nblocks, genpoly) { var subsizes = []; var subsize = (poly.length / nblocks) | 0, subsize0 = 0; var pivot = nblocks - poly.length % nblocks; for (var i = 0; i < pivot; ++i) { subsizes.push(subsize0); subsize0 += subsize; } for (var i = pivot; i < nblocks; ++i) { subsizes.push(subsize0); subsize0 += subsize + 1; } subsizes.push(subsize0); var eccs = []; for (var i = 0; i < nblocks; ++i) { eccs.push(calculateecc(poly.slice(subsizes[i], subsizes[i + 1]), genpoly)); } var result = []; var nitemsperblock = (poly.length / nblocks) | 0; for (var i = 0; i < nitemsperblock; ++i) { for (var j = 0; j < nblocks; ++j) { result.push(poly[subsizes[j] + i]); } } for (var j = pivot; j < nblocks; ++j) { result.push(poly[subsizes[j + 1] - 1]); } for (var i = 0; i < genpoly.length; ++i) { for (var j = 0; j < nblocks; ++j) { result.push(eccs[j][i]); } } return result; }; // auguments BCH(p+q,q) code to the polynomial over GF(2), given the proper // genpoly. the both input and output are in binary numbers, and unlike // calculateecc genpoly should include the 1 bit for the highest degree. // // actual polynomials used for this procedure are as follows: // - p=10, q=5, genpoly=x^10+x^8+x^5+x^4+x^2+x+1 (JIS X 0510:2004 Appendix C) // - p=18, q=6, genpoly=x^12+x^11+x^10+x^9+x^8+x^5+x^2+1 (ibid. Appendix D) var augumentbch = function (poly, p, genpoly, q) { var modulus = poly << q; for (var i = p - 1; i >= 0; --i) { if ((modulus >> (q + i)) & 1) modulus ^= genpoly << i; } return (poly << q) | modulus; }; // creates the base matrix for given version. it returns two matrices, one of // them is the actual one and the another represents the "reserved" portion // (e.g. finder and timing patterns) of the matrix. // // some entries in the matrix may be undefined, rather than 0 or 1. this is // intentional (no initialization needed!), and putdata below will fill // the remaining ones. var makebasematrix = function (ver) { var v = VERSIONS[ver], n = getsizebyver(ver); var matrix = [], reserved = []; for (var i = 0; i < n; ++i) { matrix.push([]); reserved.push([]); } var blit = function (y, x, h, w, bits) { for (var i = 0; i < h; ++i) { for (var j = 0; j < w; ++j) { matrix[y + i][x + j] = (bits[i] >> j) & 1; reserved[y + i][x + j] = 1; } } }; // finder patterns and a part of timing patterns // will also mark the format information area (not yet written) as reserved. blit(0, 0, 9, 9, [0x7f, 0x41, 0x5d, 0x5d, 0x5d, 0x41, 0x17f, 0x00, 0x40]); blit(n - 8, 0, 8, 9, [0x100, 0x7f, 0x41, 0x5d, 0x5d, 0x5d, 0x41, 0x7f]); blit(0, n - 8, 9, 8, [0xfe, 0x82, 0xba, 0xba, 0xba, 0x82, 0xfe, 0x00, 0x00]); // the rest of timing patterns for (var i = 9; i < n - 8; ++i) { matrix[6][i] = matrix[i][6] = ~i & 1; reserved[6][i] = reserved[i][6] = 1; } // alignment patterns var aligns = v[2], m = aligns.length; for (var i = 0; i < m; ++i) { var minj = (i == 0 || i == m - 1 ? 1 : 0), maxj = (i == 0 ? m - 1 : m); for (var j = minj; j < maxj; ++j) { blit(aligns[i], aligns[j], 5, 5, [0x1f, 0x11, 0x15, 0x11, 0x1f]); } } // version information if (needsverinfo(ver)) { var code = augumentbch(ver, 6, 0x1f25, 12); var k = 0; for (var i = 0; i < 6; ++i) { for (var j = 0; j < 3; ++j) { matrix[i][(n - 11) + j] = matrix[(n - 11) + j][i] = (code >> k++) & 1; reserved[i][(n - 11) + j] = reserved[(n - 11) + j][i] = 1; } } } return { matrix: matrix, reserved: reserved }; }; // fills the data portion (i.e. unmarked in reserved) of the matrix with given // code words. the size of code words should be no more than available bits, // and remaining bits are padded to 0 (cf. JIS X 0510:2004 sec 8.7.3). var putdata = function (matrix, reserved, buf) { var n = matrix.length; var k = 0, dir = -1; for (var i = n - 1; i >= 0; i -= 2) { if (i == 6) --i; // skip the entire timing pattern column var jj = (dir < 0 ? n - 1 : 0); for (var j = 0; j < n; ++j) { for (var ii = i; ii > i - 2; --ii) { if (!reserved[jj][ii]) { // may overflow, but (undefined >> x) // is 0 so it will auto-pad to zero. matrix[jj][ii] = (buf[k >> 3] >> (~k & 7)) & 1; ++k; } } jj += dir; } dir = -dir; } return matrix; }; // XOR-masks the data portion of the matrix. repeating the call with the same // arguments will revert the prior call (convenient in the matrix evaluation). var maskdata = function (matrix, reserved, mask) { var maskf = MASKFUNCS[mask]; var n = matrix.length; for (var i = 0; i < n; ++i) { for (var j = 0; j < n; ++j) { //@ts-ignore if (!reserved[i][j]) matrix[i][j] ^= maskf(i, j); } } return matrix; } // puts the format information. var putformatinfo = function (matrix, reserved, ecclevel, mask) { var n = matrix.length; var code = augumentbch((ecclevel << 3) | mask, 5, 0x537, 10) ^ 0x5412; for (var i = 0; i < 15; ++i) { var r = [0, 1, 2, 3, 4, 5, 7, 8, n - 7, n - 6, n - 5, n - 4, n - 3, n - 2, n - 1][i]; var c = [n - 1, n - 2, n - 3, n - 4, n - 5, n - 6, n - 7, n - 8, 7, 5, 4, 3, 2, 1, 0][i]; matrix[r][8] = matrix[8][c] = (code >> i) & 1; // we don't have to mark those bits reserved; always done // in makebasematrix above. } return matrix; }; // evaluates the resulting matrix and returns the score (lower is better). // (cf. JIS X 0510:2004 sec 8.8.2) // // the evaluation procedure tries to avoid the problematic patterns naturally // occuring from the original matrix. for example, it penaltizes the patterns // which just look like the finder pattern which will confuse the decoder. // we choose the mask which results in the lowest score among 8 possible ones. // // note: zxing seems to use the same procedure and in many cases its choice // agrees to ours, but sometimes it does not. practically it doesn't matter. var evaluatematrix = function (matrix) { // N1+(k-5) points for each consecutive row of k same-colored modules, // where k >= 5. no overlapping row counts. var PENALTY_CONSECUTIVE = 3; // N2 points for each 2x2 block of same-colored modules. // overlapping block does count. var PENALTY_TWOBYTWO = 3; // N3 points for each pattern with >4W:1B:1W:3B:1W:1B or // 1B:1W:3B:1W:1B:>4W, or their multiples (e.g. highly unlikely, // but 13W:3B:3W:9B:3W:3B counts). var PENALTY_FINDERLIKE = 40; // N4*k points for every (5*k)% deviation from 50% black density. // i.e. k=1 for 55~60% and 40~45%, k=2 for 60~65% and 35~40%, etc. var PENALTY_DENSITY = 10; var evaluategroup = function (groups) { // assumes [W,B,W,B,W,...,B,W] var score = 0; for (var i = 0; i < groups.length; ++i) { if (groups[i] >= 5) score += PENALTY_CONSECUTIVE + (groups[i] - 5); } for (var i = 5; i < groups.length; i += 2) { var p = groups[i]; if (groups[i - 1] == p && groups[i - 2] == 3 * p && groups[i - 3] == p && groups[i - 4] == p && (groups[i - 5] >= 4 * p || groups[i + 1] >= 4 * p)) { // this part differs from zxing... score += PENALTY_FINDERLIKE; } } return score; }; var n = matrix.length; var score = 0, nblacks = 0; for (var i = 0; i < n; ++i) { var row = matrix[i]; var groups; // evaluate the current row groups = [0]; // the first empty group of white for (var j = 0; j < n;) { var k; for (k = 0; j < n && row[j]; ++k) ++j; groups.push(k); for (k = 0; j < n && !row[j]; ++k) ++j; groups.push(k); } score += evaluategroup(groups); // evaluate the current column groups = [0]; for (var j = 0; j < n;) { var k; for (k = 0; j < n && matrix[j][i]; ++k) ++j; groups.push(k); for (k = 0; j < n && !matrix[j][i]; ++k) ++j; groups.push(k); } score += evaluategroup(groups); // check the 2x2 box and calculate the density var nextrow = matrix[i + 1] || []; nblacks += row[0]; for (var j = 1; j < n; ++j) { var p = row[j]; nblacks += p; // at least comparison with next row should be strict... if (row[j - 1] == p && nextrow[j] === p && nextrow[j - 1] === p) { score += PENALTY_TWOBYTWO; } } } score += PENALTY_DENSITY * ((Math.abs(nblacks / n / n - 0.5) / 0.05) | 0); return score; }; // returns the fully encoded QR code matrix which contains given data. // it also chooses the best mask automatically when mask is -1. var generate = function (data, ver, mode, ecclevel, mask) { var v = VERSIONS[ver]; var buf = encode(ver, mode, data, ndatabits(ver, ecclevel) >> 3); buf = augumenteccs(buf, v[1][ecclevel], GF256_GENPOLY[v[0][ecclevel]]); var result = makebasematrix(ver); var matrix = result.matrix, reserved = result.reserved; putdata(matrix, reserved, buf); if (mask < 0) { // find the best mask maskdata(matrix, reserved, 0); putformatinfo(matrix, reserved, ecclevel, 0); var bestmask = 0, bestscore = evaluatematrix(matrix); maskdata(matrix, reserved, 0); for (mask = 1; mask < 8; ++mask) { maskdata(matrix, reserved, mask); putformatinfo(matrix, reserved, ecclevel, mask); var score = evaluatematrix(matrix); if (bestscore > score) { bestscore = score; bestmask = mask; } maskdata(matrix, reserved, mask); } mask = bestmask; } maskdata(matrix, reserved, mask); putformatinfo(matrix, reserved, ecclevel, mask); return matrix; }; // the public interface is trivial; the options available are as follows: // // - version: an integer in [1,40]. when omitted (or -1) the smallest possible // version is chosen. // - mode: one of 'numeric', 'alphanumeric', 'octet'. when omitted the smallest // possible mode is chosen. // - ecclevel: one of 'L', 'M', 'Q', 'H'. defaults to 'L'. // - mask: an integer in [0,7]. when omitted (or -1) the best mask is chosen. // // for generate{HTML,PNG}: // // - modulesize: a number. this is a size of each modules in pixels, and // defaults to 5px. // - margin: a number. this is a size of margin in *modules*, and defaults to // 4 (white modules). the specficiation mandates the margin no less than 4 // modules, so it is better not to alter this value unless you know what // you're doing. var QRCode = { 'generate': function (data, options) { var MODES = { 'numeric': MODE_NUMERIC, 'alphanumeric': MODE_ALPHANUMERIC, 'octet': MODE_OCTET }; var ECCLEVELS = { 'L': ECCLEVEL_L, 'M': ECCLEVEL_M, 'Q': ECCLEVEL_Q, 'H': ECCLEVEL_H }; options = options || {}; var ver = options.version || -1; var ecclevel = ECCLEVELS[(options.ecclevel || 'L').toUpperCase()]; var mode = options.mode ? MODES[options.mode.toLowerCase()] : -1; var mask = 'mask' in options ? options.mask : -1; if (mode < 0) { if (typeof data === 'string') { if (data.match(NUMERIC_REGEXP)) { mode = MODE_NUMERIC; } else if (data.match(ALPHANUMERIC_OUT_REGEXP)) { // while encode supports case-insensitive // encoding, we restrict the data to be // uppercased when auto-selecting the mode. mode = MODE_ALPHANUMERIC; } else { mode = MODE_OCTET; } } else { mode = MODE_OCTET; } } else if (!(mode == MODE_NUMERIC || mode == MODE_ALPHANUMERIC || mode == MODE_OCTET)) { throw 'invalid or unsupported mode'; } data = validatedata(mode, data); if (data === null) throw 'invalid data format'; if (ecclevel < 0 || ecclevel > 3) throw 'invalid ECC level'; if (ver < 0) { for (ver = 1; ver <= 40; ++ver) { if (data.length <= getmaxdatalen(ver, mode, ecclevel)) break; } if (ver > 40) throw 'too large data'; } else if (ver < 1 || ver > 40) { throw 'invalid version'; } if (mask != -1 && (mask < 0 || mask > 8)) throw 'invalid mask'; return generate(data, ver, mode, ecclevel, mask); }, 'generateHTML': function (data, options) { options = options || {}; var matrix = QRCode['generate'](data, options); var modsize = Math.max(options.modulesize || 5, 0.5); var margin = Math.max(options.margin !== null ? options.margin : 4, 0.0); var e = document.createElement('div'); var n = matrix.length; var html = ['']; for (var i = 0; i < n; ++i) { html.push(''); for (var j = 0; j < n; ++j) { html.push(''); } html.push(''); } e.className = 'qrcode'; e.innerHTML = html.join('') + '
      '; return e; }, 'generateSVG': function (data, options: { background?: string, modulesize?: number, margin?: number }) { options = options || {}; var matrix = QRCode['generate'](data, options); var n = matrix.length; var modsize = Math.max(options.modulesize || 5, 0.5); var margin = Math.max(options.margin !== null ? options.margin : 4, 0.0); var size = modsize * (n + 2 * margin); var common = ' class= "fg"' + ' width="' + modsize + '" height="' + modsize + '"/>'; var e = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); e.setAttribute('viewBox', '0 0 ' + size + ' ' + size); e.setAttribute('style', 'shape-rendering:crispEdges'); if (options.modulesize) { e.setAttribute('width', size.toString()); e.setAttribute('height', size.toString()); } var svg = [ '', '', ]; var yo = margin * modsize; for (var y = 0; y < n; ++y) { var xo = margin * modsize; for (var x = 0; x < n; ++x) { if (matrix[y][x]) svg.push(' { const img = document.createElement('img'); img.src = reader.result; img.onload = () => { let zplImage = new ZplImage(); let zpl = this._convertImage(img, name); const targetRect = (event.target).getBoundingClientRect(); let x = event.offsetX + targetRect.left - designerCanvas.containerBoundingRect.x + 'px' let y = event.offsetY + targetRect.top - designerCanvas.containerBoundingRect.y + 'px'; zplImage.style.position = "absolute"; zplImage.style.left = x; zplImage.style.top = y; zplImage.setAttribute("total-bytes", zpl.totalBytes.toString()); zplImage.setAttribute("bytes-per-row", zpl.bytesPerRow.toString()); zplImage.setAttribute("image-name", zpl.name); zplImage.setAttribute("hex-image", zpl.hexData); zplImage.setAttribute("scale-x", "1"); zplImage.setAttribute("scale-y", "1"); const di = DesignItem.createDesignItemFromInstance(zplImage, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer); let grp = di.openGroup("Insert of <img>"); designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di)); grp.commit(); requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di])); } } reader.readAsDataURL(event.dataTransfer.files[0]); } } private _convertImage(img: any, name: string) { let black = 50; let rot = 'N'; let notrim = true; // Get the image and convert to Z64 let res; res = this._imageToACS(img, { black: black, rotate: rot, notrim: notrim }); let imgName = name.split('.')[0].substring(0, 8); let bytesPerRow = res.rowlen; let totalBytes = res.length; return { name: imgName, totalBytes, bytesPerRow, hexData: res.acs } } private _imageToACS(img, opts) { // Draw the image to a temp canvas so we can access its RGBA data let cvs = document.createElement('canvas'); let ctx = cvs.getContext('2d'); cvs.width = +img.width || img.offsetWidth; cvs.height = +img.height || img.offsetHeight; ctx.imageSmoothingQuality = 'high'; // in case canvas needs to scale image ctx.drawImage(img, 0, 0, cvs.width, cvs.height); let pixels = ctx.getImageData(0, 0, cvs.width, cvs.height); return this._rgbaToACS(pixels.data, pixels.width, opts); } private _rgbaToACS(rgba, width, opts) { const hexmap = (() => { let arr = Array(256); for (let i = 0; i < 16; i++) { arr[i] = '0' + i.toString(16); } for (let i = 16; i < 256; i++) { arr[i] = i.toString(16); } return arr; })(); opts = opts || {}; width = width | 0; if (!width || width < 0) { throw new Error('Invalid width'); } let height = ~~(rgba.length / width / 4); // Create a monochome image, cropped to remove padding. // The return is a Uint8Array with extra properties width and height. let mono = this._monochrome(rgba, width, height, +opts.black || 50, opts.notrim); let buf = this._normal(mono); // Encode in hex and apply the "Alternative Data Compression Scheme" // // G H I J K L M N O P Q R S T U V W X Y // 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // // g h i j k l m n o p q r s t u v w x y z // 20 40 60 80 100 120 140 160 180 200 220 240 260 280 300 320 340 360 380 400 // let imgw = buf.width; let imgh = buf.height; let rowl = ~~((imgw + 7) / 8); let hex = ''; for (let i = 0, l = buf.length; i < l; i++) { hex += hexmap[buf[i]]; } let acs = ''; let re = /([0-9a-fA-F])\1{2,}/g; let match = re.exec(hex); let offset = 0; while (match) { acs += hex.substring(offset, match.index); let l = match[0].length; while (l >= 400) { acs += 'z'; l -= 400; } if (l >= 20) { acs += '_ghijklmnopqrstuvwxy'[((l / 20) | 0)]; l = l % 20; } if (l) { acs += '_GHIJKLMNOPQRSTUVWXY'[l]; } acs += match[1]; offset = re.lastIndex; match = re.exec(hex); } acs += hex.substr(offset); // Example usage of the return value `rv`: // '^GFA,' + rv.length + ',' + rv.length + ',' + rv.rowlen + ',' + rv.acs return { length: buf.length, // uncompressed number of bytes rowlen: rowl, // number of packed bytes per row width: imgw, // rotated image width in pixels height: imgh, // rotated image height in pixels acs: acs, }; } private _monochrome(rgba, width, height, black, notrim) { // Convert black from percent to 0..255 value black = 255 * black / 100; let minx, maxx, miny, maxy; if (notrim) { minx = miny = 0; maxx = width - 1; maxy = height - 1; } else { // Run through the image and determine bounding box maxx = maxy = 0; minx = width; miny = height; let x = 0, y = 0; for (let i = 0, n = width * height * 4; i < n; i += 4) { // Alpha blend with white. let a = rgba[i + 3] / 255; let r = rgba[i] * .3 * a + 255 * (1 - a); let g = rgba[i + 1] * .59 * a + 255 * (1 - a); let b = rgba[i + 2] * .11 * a + 255 * (1 - a); let gray = r + g + b; if (gray <= black) { if (minx > x) minx = x; if (miny > y) miny = y; if (maxx < x) maxx = x; if (maxy < y) maxy = y; } if (++x == width) { x = 0; y++; } } } // One more time through the data, this time we create the cropped image. let cx = maxx - minx + 1; let cy = maxy - miny + 1; let buf: Uint8Array & { width?: number, height?: number } = new Uint8Array(cx * cy); let idx = 0; for (let y = miny; y <= maxy; y++) { let i = (y * width + minx) * 4; for (let x = minx; x <= maxx; x++) { // Alpha blend with white. let a = rgba[i + 3] / 255; let r = rgba[i] * .3 * a + 255 * (1 - a); let g = rgba[i + 1] * .59 * a + 255 * (1 - a); let b = rgba[i + 2] * .11 * a + 255 * (1 - a); let gray = r + g + b; buf[idx++] = gray <= black ? 1 : 0; i += 4; } } // Return the monochrome image buf.width = cx; buf.height = cy; return buf; } private _normal(mono) { let width = mono.width; let height = mono.height; let buf: Uint8Array & { width?: number, height?: number } = new Uint8Array(~~((width + 7) / 8) * height); let idx = 0; // index into buf let byte = 0; // current byte of image data let bitx = 0; // bit index for (let i = 0, n = mono.length; i < n; i++) { byte |= mono[i] << (7 - (bitx++ & 7)); if (bitx == width || !(bitx & 7)) { buf[idx++] = byte; byte = 0; if (bitx == width) { bitx = 0; } } } buf.width = width; buf.height = height; return buf; } } ================================================ FILE: packages/web-component-designer-zpl/src/services/ZplLayoutCopyPasteService.ts ================================================ import { ICopyPasteService, IDesignItem, InstanceServiceContainer, ServiceContainer, IRect, getTextFromClipboard, copyTextToClipboard, DefaultHtmlParserService } from '@node-projects/web-component-designer'; export class ZplLayoutCopyPasteService implements ICopyPasteService { constructor() { } async copyItems(designItems: IDesignItem[]): Promise { let savedata = ""; for (let d of designItems) { savedata += d.element.outerHTML; } await copyTextToClipboard(savedata); } async getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]> { let result: IDesignItem[] = []; const text = await getTextFromClipboard(); let htmlParser = new DefaultHtmlParserService(); result = await htmlParser.parse(text, serviceContainer, instanceServiceContainer, true); return [result, null]; } } ================================================ FILE: packages/web-component-designer-zpl/src/services/ZplLayoutPlacementService.ts ================================================ import { DefaultPlacementService, IDesignItem, IDesignerCanvas, IPoint, filterChildPlaceItems } from '@node-projects/web-component-designer'; export class ZplLayoutPlacementService extends DefaultPlacementService { constructor() { super(); } override serviceForContainer(container: IDesignItem) { return true; } override canEnter(container: IDesignItem, items: IDesignItem[]) { return false; } override enterContainer(container: IDesignItem, items: IDesignItem[]) { let filterdItems = filterChildPlaceItems(items); for (let i of filterdItems) { container.insertChild(i); } } override leaveContainer(container: IDesignItem, items: IDesignItem[]) { } override finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]) { { super.finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items); } } } ================================================ FILE: packages/web-component-designer-zpl/src/services/ZplParserService.ts ================================================ import { DesignItem, ITextWriter, IDesignItem, IHtmlParserService, IHtmlWriterOptions, IHtmlWriterService, InstanceServiceContainer, ServiceContainer } from "@node-projects/web-component-designer"; import { ZplBarcode } from "../widgets/zpl-barcode.js"; import { ZplGraphicBox } from "../widgets/zpl-graphic-box.js"; import { ZplGraphicDiagonalLine } from "../widgets/zpl-graphic-diagonal-line.js"; import { ZplGraphicCircle } from "../widgets/zpl-graphic-circle.js"; import { ZplText } from "../widgets/zpl-text.js"; import { ZplImage } from "../widgets/zpl-image.js"; import { ZplComment } from "../widgets/zpl-comment.js"; function getSetValue(...args) { for (let a of args) if (a != '' && a != null && a != "NaN") return a; } type image = { name: string; totalBytes: number; bytesPerRow: number; hexData: string; } export class ZplParserService implements IHtmlParserService, IHtmlWriterService { options: IHtmlWriterOptions = {}; createTransform(char: string, el: HTMLElement) { switch (char) { case 'R': { el.style.transform = 'rotate(90deg) translateY(-100%)'; el.style.transformOrigin = '0% 0%' return; }; case 'I': { el.style.transform = 'rotate(180deg)'; el.style.transformOrigin = '50% 50%' return; } case 'B': { el.style.transform = 'rotate(270deg)'; el.style.transformOrigin = '100% 100%' return; }; } return; } async parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { let parts = html.split("^"); let images: Record = {}; if (parts[0][0] == "~") { let imgStrings = parts[0].split("~"); for (let img of imgStrings) { if (img == "") continue let imgParts = img.split(","); images[imgParts[0].substring(2)] = { name: imgParts[0].substring(2), totalBytes: parseInt(imgParts[1]), bytesPerRow: parseInt(imgParts[2]), hexData: imgParts[3] } } } let designItems: IDesignItem[] = []; let fontName: string; let fontHeight: number; let fontWidth: number; let rotation: string = 'N'; let x: number; let y: number; let bc: boolean; let qr: boolean; let bw: number; let bh: number; let br: number; // let bo: string; let barcode: ZplBarcode; //let a: number; for (let p of parts) { p = p.replaceAll("\n", ""); p = p.replaceAll("\r", ""); let command = p.substring(0, 2); let fieldString = p.substring(2); let fields = fieldString.split(","); switch (command) { case "XA": case "XZ": break; case "FX": let comment = new ZplComment(); comment.style.position = "absolute"; comment.style.left = x + "px"; comment.style.top = y + "px"; comment.setAttribute("content", fieldString); designItems.push(DesignItem.createDesignItemFromInstance(comment, serviceContainer, instanceServiceContainer)); break; case "AA": //Ax x=fontname case "A0": { fontName = command[1]; rotation = getSetValue(fields[0], 'N'); let defaultFontWidth = 15; switch (fontName) { case "A": defaultFontWidth = 15; break; case "0": defaultFontWidth = fontHeight; } fontHeight = parseInt(getSetValue(fields[1], defaultFontWidth)); fontWidth = parseInt(getSetValue(fields[2], defaultFontWidth)); break; } case "CF": //we should switch to use A, CF is default font rotation = 'N'; fontName = fields[0]; fontHeight = parseInt(fields[1]); let defaultFontWidth = 15; switch (fontName) { case "A": defaultFontWidth = 15; break; case "0": defaultFontWidth = fontHeight; } fontWidth = parseInt(getSetValue(fields[2], defaultFontWidth)); break; case "FO": x = parseInt(fields[0]); y = parseInt(fields[1]); //a = parseInt(fields[2]); break; case "GB": let rect = new ZplGraphicBox(); rect.style.position = "absolute"; rect.style.left = x + "px"; rect.style.top = y + "px"; rect.style.width = getSetValue(fields[0], fields[2], '1') + "px"; rect.style.height = getSetValue(fields[1], fields[2], '1') + "px"; rect.setAttribute("stroke-width", getSetValue(fields[2], '1')); rect.setAttribute("stroke-color", getSetValue(fields[3], 'B') == "B" ? "black" : "white"); rect.setAttribute("corner-rounding", getSetValue(fields[4], '0')); designItems.push(DesignItem.createDesignItemFromInstance(rect, serviceContainer, instanceServiceContainer)); break; case "GD": let line = new ZplGraphicDiagonalLine(); line.style.position = "absolute"; line.style.left = x + "px"; line.style.top = y + "px"; line.style.width = getSetValue(fields[0], fields[2], '1') + "px"; line.style.height = getSetValue(fields[1], fields[2], '1') + "px"; line.setAttribute("stroke-width", getSetValue(fields[2], '1')); line.setAttribute("stroke-color", getSetValue(fields[3], 'B') == "B" ? "black" : "white"); line.setAttribute("orientation", getSetValue(fields[4], 'R')); designItems.push(DesignItem.createDesignItemFromInstance(line, serviceContainer, instanceServiceContainer)); break; case "GE": let circle = new ZplGraphicCircle(); circle.style.position = "absolute"; circle.style.left = x + "px"; circle.style.top = y + "px"; circle.style.width = getSetValue(fields[0], fields[2], '1') + "px"; circle.style.height = getSetValue(fields[1], fields[2], '1') + "px"; circle.setAttribute("stroke-width", getSetValue(fields[2], '1')); circle.setAttribute("stroke-color", getSetValue(fields[3], 'B') == "B" ? "black" : "white"); designItems.push(DesignItem.createDesignItemFromInstance(circle, serviceContainer, instanceServiceContainer)); break; case "BY": bw = parseInt(getSetValue(fields[0], "2")); br = parseFloat(getSetValue(fields[1], "3")); bh = parseInt(getSetValue(fields[2], "10")); break; case "BC": bc = true; // bo = getSetValue(fields[0], 'N'); barcode = new ZplBarcode(); barcode.style.position = "absolute"; barcode.style.left = x + "px"; barcode.style.top = y + "px"; barcode.setAttribute("type", "CODE128"); if (bw) barcode.setAttribute("width", bw.toString()); if (br) barcode.setAttribute("ratio", br.toString()); barcode.setAttribute("height", getSetValue(fields[1], bh).toString()); break; case "BQ": qr = true; bc = true; // bo = getSetValue(fields[0], 'N'); barcode = new ZplBarcode(); barcode.style.position = "absolute"; barcode.style.left = x + "px"; barcode.style.top = y + "px"; barcode.setAttribute("type", "QR"); if (bw) barcode.setAttribute("width", bw.toString()); if (br) barcode.setAttribute("ratio", br.toString()); barcode.setAttribute("height", getSetValue(fields[2], bh).toString()); break; case "FD": if (bc) { if (qr) barcode.setAttribute("content", fieldString.substring(3)); else barcode.setAttribute("content", fieldString); designItems.push(DesignItem.createDesignItemFromInstance(barcode, serviceContainer, instanceServiceContainer)); bc = false; qr = false; } else { let text = new ZplText(); text.style.position = "absolute"; text.style.left = x + "px"; text.style.top = y + "px"; text.setAttribute("font-name", fontName); text.setAttribute("font-height", fontHeight.toString()); text.setAttribute("font-width", fontWidth.toString()); text.setAttribute("content", fieldString); if (rotation) { this.createTransform(rotation, text); } designItems.push(DesignItem.createDesignItemFromInstance(text, serviceContainer, instanceServiceContainer)); } break; case "XG": let image = new ZplImage(); let nm = fields[0].substring(2); image.style.position = "absolute"; image.style.left = x + "px"; image.style.top = y + "px"; image.setAttribute("total-bytes", images[nm].totalBytes.toString()); image.setAttribute("bytes-per-row", images[nm].bytesPerRow.toString()); image.setAttribute("image-name", nm); image.setAttribute("hex-image", images[nm].hexData); image.setAttribute("scale-x", getSetValue(fields[1], "1")); image.setAttribute("scale-y", getSetValue(fields[2], "1")); designItems.push(DesignItem.createDesignItemFromInstance(image, serviceContainer, instanceServiceContainer)); break; } } return designItems; } write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean) { let tx = "^XA\n"; for (let d of designItems) { if (d.element.nodeName == "ZPL-IMAGE") { //@ts-ignore textWriter.writeLine(d.element.createZplImage()); //@ts-ignore tx += d.element.createZplImage() + '\n'; } } for (let d of designItems) { //@ts-ignore tx += d.element.createZpl(); +'\n' } tx += "^XZ"; textWriter.writeLine("^XA"); // textWriter.writeLine("^FX For better view visit http://labelary.com/viewer.html?zpl=" + encodeURIComponent(tx)); for (let d of designItems) { let start = textWriter.position; //@ts-ignore textWriter.writeLine(d.element.createZpl()) let end = textWriter.position; if (updatePositions && d.instanceServiceContainer.designItemDocumentPositionService) { d.instanceServiceContainer.designItemDocumentPositionService.setPosition(d, { start: start, length: end - start }); } } textWriter.writeLine("^XZ"); } } ================================================ FILE: packages/web-component-designer-zpl/src/setupZplServiceContainer.ts ================================================ import { ExtensionType, DefaultModelCommandService, DefaultHtmlParserService, JsonFileElementsService, ServiceContainer, PositionExtensionProvider, SelectionDefaultExtensionProvider, GrayOutExtensionProvider, AltToEnterContainerExtensionProvider, NamedTools, PointerTool, RectangleSelectorTool, ZoomTool, PanTool, MagicWandSelectorTool, ZMoveContextMenu, CopyPasteContextMenu, MultipleItemsSelectedContextMenu, ItemsBelowContextMenu, ElementDragTitleExtensionProvider, PointerToolButtonProvider, SeperatorToolProvider, SelectorToolButtonProvider, ZoomToolButtonProvider, HighlightElementExtensionProvider, IDesignerCanvas, SelectionService, UndoService, GrayOutDragOverContainerExtensionProvider, ElementAtPointService, SnaplinesProviderService, DefaultInstanceService, PropertyGroupsService, DesignItemDocumentPositionService, DragDropService, BaseCustomWebComponentPropertiesService, DefaultEditorTypesService, TransformToolButtonProvider, DesignItemService, DeletionService } from '@node-projects/web-component-designer'; import { ZplLayoutPlacementService } from './services/ZplLayoutPlacementService.js'; import { ZplParserService } from './services/ZplParserService.js'; import { ZplImageDrop } from './services/ZplImageDrop.js'; import { ZplLayoutCopyPasteService } from './services/ZplLayoutCopyPasteService.js'; import { ZplLayoutResizeExtensionProvider } from './extensions/ZplLayoutResizeExtensionProvider.js'; import { ZplDemoView } from './widgets/views/zpl-demo-view.js'; export function createZplDesignerServiceContainer() { let serviceContainer = new ServiceContainer(); serviceContainer.register("instanceService", new DefaultInstanceService()); serviceContainer.register("containerService", new ZplLayoutPlacementService()); serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService()); serviceContainer.register("htmlParserService", new DefaultHtmlParserService()); serviceContainer.register("htmlParserService", new ZplParserService()); serviceContainer.register("htmlWriterService", new ZplParserService()); serviceContainer.register("elementAtPointService", new ElementAtPointService()); serviceContainer.register("externalDragDropService", new ZplImageDrop()); serviceContainer.register("dragDropService", new DragDropService()); serviceContainer.register("copyPasteService", new ZplLayoutCopyPasteService()); serviceContainer.register("modelCommandService", new DefaultModelCommandService()); serviceContainer.register('editorTypesService', new DefaultEditorTypesService()); serviceContainer.register("propertyGroupsService", new PropertyGroupsService()); serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService(true)); serviceContainer.register("designItemService", new DesignItemService()); serviceContainer.register("deletionService", new DeletionService()); serviceContainer.register("undoService", (designerCanvas: IDesignerCanvas) => new UndoService(designerCanvas)); serviceContainer.register("selectionService", (designerCanvas: IDesignerCanvas) => new SelectionService(designerCanvas, false)); serviceContainer.register("designItemDocumentPositionService", (designerCanvas: IDesignerCanvas) => new DesignItemDocumentPositionService(designerCanvas)); serviceContainer.designerExtensions.set(ExtensionType.Permanent, [ ]); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [ new ElementDragTitleExtensionProvider(), new PositionExtensionProvider(), new ZplLayoutResizeExtensionProvider(true) ]); serviceContainer.designerExtensions.set(ExtensionType.Selection, [ new SelectionDefaultExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, [ ]); serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [ new HighlightElementExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [ new GrayOutExtensionProvider() ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOverAndCanBeEntered, [ new AltToEnterContainerExtensionProvider(), new GrayOutDragOverContainerExtensionProvider(), ]); serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOverAndCanBeEntered, [ new GrayOutDragOverContainerExtensionProvider(), ]); serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool()); serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool()); serviceContainer.designerTools.set(NamedTools.Zoom, new ZoomTool()); serviceContainer.designerTools.set(NamedTools.Pan, new PanTool()); serviceContainer.designerTools.set(NamedTools.RectangleSelector, new RectangleSelectorTool()); serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool()); serviceContainer.designerContextMenuExtensions = [ new CopyPasteContextMenu(), new ZMoveContextMenu(), new MultipleItemsSelectedContextMenu(), new ItemsBelowContextMenu() ]; serviceContainer.designViewToolbarButtons.push( new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider() ); serviceContainer.config.demoViewWidget = ZplDemoView; serviceContainer.register('elementsService', new JsonFileElementsService('zpl', new URL("./widgets/elements.json", import.meta.url))); return serviceContainer; } ================================================ FILE: packages/web-component-designer-zpl/src/widgets/elements.json ================================================ { "elements": [ { "name": "barcode", "tag": "zpl-barcode", "type": "polymer", "defaultAttributes": { "content": "barcode", "type": "CODE128", "width": "2", "ratio": "20", "height": "200" } }, { "name": "qr-code", "tag": "zpl-barcode", "type": "polymer", "defaultAttributes": { "content": "barcode", "type": "QR", "width": "0", "ratio": "0", "height": "5" } }, { "name": "graphic box", "tag": "zpl-graphic-box", "type": "polymer", "defaultWidth": "300px", "defaultHeight": "100px", "defaultAttributes": { "stroke-width": "5", "stroke-color": "black", "corner-rounding": "0" } }, { "name": "graphic circle", "tag": "zpl-graphic-circle", "type": "polymer", "defaultWidth": "200px", "defaultHeight": "200px", "defaultAttributes": { "stroke-width": "5", "stroke-color": "black" } }, { "name": "graphic diagonal line", "tag": "zpl-graphic-diagonal-line", "type": "polymer", "defaultWidth": "300px", "defaultHeight": "100px", "defaultAttributes": { "stroke-width": "5", "stroke-color": "black", "orientation": "R" } }, { "name": "text", "tag": "zpl-text", "type": "polymer", "defaultAttributes": { "content": "Text...", "font-name": "0", "font-height": "30", "font-width": "30" } }, { "name": "image", "tag": "zpl-image", "type": "polymer", "defaultAttributes": { "image-name": "", "hex-image": "", "scale-x": "1", "scale-y": "1" } } ] } ================================================ FILE: packages/web-component-designer-zpl/src/widgets/views/zpl-demo-view.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent'; import { IUiCommand, InstanceServiceContainer, ServiceContainer } from '@node-projects/web-component-designer'; import { IDemoView } from '@node-projects/web-component-designer/src/elements/widgets/demoView/IDemoView.js'; export class ZplDemoView extends BaseCustomWebComponentConstructorAppend implements IDemoView { static override readonly template = html`

      Label generated via http://api.labelary.com/


      `; static override readonly style = css` :host { display: block; overflow: hidden; background: white; height: 100%; width: 100%; position: relative; } #image { border: solid 1px black; }`; constructor() { super(); } executeCommand: (command: IUiCommand) => void; canExecuteCommand: (command: IUiCommand) => boolean; dispose(): void { } async display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string) { const width = 4; const height = 6; const dpmm = '24dpmm'; const response = await fetch(`https://api.labelary.com/v1/printers/${dpmm}/labels/${width}x${height}/${0}`, { method: "POST", body: code, headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'image/png' }, }); (this._getDomElement('image')).src = URL.createObjectURL(await response.blob());; } } customElements.define('node-projects-zpl-demo-view', ZplDemoView); ================================================ FILE: packages/web-component-designer-zpl/src/widgets/zpl-barcode.ts ================================================ import { BaseCustomWebComponentConstructorAppend, LazyLoader, css, html } from "@node-projects/base-custom-webcomponent"; import { BarcodeFormat, BarcodeOptions } from "../jsBarcodeOptions.js"; import { getZplCoordinates } from "../zplHelper.js"; import QRCode from "../qr.js"; export class ZplBarcode extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` *{ box-sizing: border-box; } `; static override readonly template = html`
      `; static readonly is = 'zpl-barcode'; public content: string; public type: BarcodeFormat; public width: number; public ratio: number; public height: number; private _barcode: HTMLDivElement; private _barcodeOptions: BarcodeOptions; static readonly properties = { content: String, type: BarcodeFormat, width: Number, ratio: Number, height: Number, } constructor() { super(); this._restoreCachedInititalValues(); this._barcode = this._getDomElement("barcode-div"); } async ready() { this._parseAttributesToProperties(); if (this.width > 10) this.width = 10; if (this.width < 1) this.width = 1; if (this.ratio > 3.0) this.ratio = 3.0; if (this.ratio < 2.0) this.ratio = 2.0; if (this.type == BarcodeFormat.QR) { const svg = QRCode.generateSVG(this.content, { modulesize: this.height, margin: 0, background: 'transparent' }); this._barcode.appendChild(svg); this._barcode.style.marginTop = "10px"; } else { const packageurl = new URL("../../../../jsbarcode/dist/JsBarcode.all.js", import.meta.url); await LazyLoader.LoadJavascript(packageurl.toString()); let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this._barcode.appendChild(svg); this._barcode.style.marginTop = ""; this._createOptions(); //@ts-ignore JsBarcode(svg, this.content, this._barcodeOptions); } } private _createOptions() { this._barcodeOptions = {} this._barcodeOptions.format = this.type; this._barcodeOptions.width = this.width; this._barcodeOptions.height = this.height; this._barcodeOptions.margin = 0; this._barcodeOptions.background = 'transparent'; } public createZpl() { let zpl = ""; zpl += getZplCoordinates(this, 0); if (this.type != BarcodeFormat.QR) zpl += "^BY" + this.width + "," + this.ratio; switch (this.type) { case BarcodeFormat.CODE128: zpl += "^BCN," + this.height + ",Y,N,Y,N"; break; case BarcodeFormat.EAN13: zpl += "^BCN," + this.height + ",Y,N"; break; case BarcodeFormat.QR: zpl += "^BQN,2," + this.height + ""; break; } zpl += "^FD"; if (this.type == BarcodeFormat.QR) zpl += 'QA,'; // bar code configuration prefix zpl += this.content; zpl += "^FS"; return zpl; } } customElements.define(ZplBarcode.is, ZplBarcode); ================================================ FILE: packages/web-component-designer-zpl/src/widgets/zpl-comment.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; export class ZplComment extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` :host { display: none; }`; static override readonly template = html``; static readonly is = 'zpl-comment'; public content: string; static readonly properties = { content: String } constructor() { super(); this._restoreCachedInititalValues(); } async ready() { this._parseAttributesToProperties(); } public createZpl() { let zpl = ""; zpl += "^FX" + this.content return zpl; } } customElements.define(ZplComment.is, ZplComment); ================================================ FILE: packages/web-component-designer-zpl/src/widgets/zpl-graphic-box.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { getZplCoordinates } from "../zplHelper.js"; enum StrokeColor { black = "black", white = "white", } export class ZplGraphicBox extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` *{ box-sizing: border-box; } `; static override readonly template = html`
      `; static readonly is = 'zpl-graphic-box'; public strokeWidth: number = 1; public strokeColor: string = 'black'; public cornerRounding: number; private _box: HTMLDivElement; private _observer: ResizeObserver; static readonly properties = { strokeWidth: Number, strokeColor: StrokeColor, cornerRounding: Number, } constructor() { super(); this._restoreCachedInititalValues(); this._box = this._getDomElement("box-div"); this._observer = new ResizeObserver(() => this._drawSvg()); this._observer.observe(this); } async ready() { this._parseAttributesToProperties(); if (this.cornerRounding > 8) this.cornerRounding = 8; if (this.cornerRounding < 0) this.cornerRounding = 0; this._drawSvg(); } private _drawSvg() { let x = this.strokeWidth / 2; let width = parseInt(this.style.width.replace("px", "")) - this.strokeWidth; if (width < this.strokeWidth) width = this.strokeWidth; let height = parseInt(this.style.height.replace("px", "")) - this.strokeWidth; if (height < this.strokeWidth) height = this.strokeWidth; let smallerLength = width; if(smallerLength > height) smallerLength = height; let radius = (1/8) * this.cornerRounding * smallerLength / 2; let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); if (this.strokeColor == StrokeColor.black) rect.setAttribute("stroke", "black"); else rect.setAttribute("stroke", "white"); rect.setAttribute("fill", "white"); rect.setAttribute("fill-opacity", "0.0"); rect.setAttribute("stroke-width", this.strokeWidth.toString()); rect.setAttribute("x", x.toString()); rect.setAttribute("y", x.toString()); rect.setAttribute("rx", radius.toString()); rect.setAttribute("ry", radius.toString()); rect.setAttribute("width", width.toString()); rect.setAttribute("height", height.toString()); svg.style.overflow = "visible"; if (this._box.childElementCount > 0) this._box.removeChild(this._box.children[0]); svg.appendChild(rect); this._box.appendChild(svg); } public createZpl() { let zpl = ""; zpl += getZplCoordinates(this, 0); zpl += "^GB" + this.style.width.replace("px", "") + "," + this.style.height.replace("px", "") + "," + this.strokeWidth + "," + (this.strokeColor == StrokeColor.black ? "B" : "W") + "," + this.cornerRounding; zpl += "^FS"; return zpl; } } customElements.define(ZplGraphicBox.is, ZplGraphicBox); ================================================ FILE: packages/web-component-designer-zpl/src/widgets/zpl-graphic-circle.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { getZplCoordinates } from "../zplHelper.js"; enum StrokeColor { black = "black", white = "white", } export class ZplGraphicCircle extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` *{ box-sizing: border-box; } `; static override readonly template = html`
      `; static readonly is = 'zpl-graphic-circle'; public strokeWidth: number = 1; public strokeColor: string = 'black'; private _circle: HTMLDivElement; private _observer: ResizeObserver; static readonly properties = { strokeWidth: Number, strokeColor: StrokeColor, } constructor() { super(); this._restoreCachedInititalValues(); this._circle = this._getDomElement("circle-div"); this._observer = new ResizeObserver(() => this._drawSvg()); this._observer.observe(this); } async ready() { this._parseAttributesToProperties(); this._drawSvg(); } private _drawSvg() { let w = parseInt(this.style.width.replace("px", "")); let h = parseInt(this.style.height.replace("px", "")); let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); let circle = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse'); if (this.strokeColor == StrokeColor.black) circle.setAttribute("stroke", "black"); else circle.setAttribute("stroke", "white"); circle.setAttribute("fill", "white"); circle.setAttribute("fill-opacity", "0.0"); circle.setAttribute("stroke-width", this.strokeWidth.toString()); circle.setAttribute("cx", (w / 2).toString()); circle.setAttribute("cy", (h / 2).toString()); circle.setAttribute("rx", ((w / 2) - this.strokeWidth / 2).toString()); circle.setAttribute("ry", ((h / 2) - this.strokeWidth / 2).toString()); if (this._circle.childElementCount > 0) this._circle.removeChild(this._circle.children[0]); svg.appendChild(circle); svg.style.overflow = "visible"; this._circle.appendChild(svg); } public createZpl() { let zpl = ""; zpl += getZplCoordinates(this, 0); zpl += "^GE" + this.style.width.replace("px", "") + "," + this.style.height.replace("px", "") + "," + this.strokeWidth + "," + (this.strokeColor == StrokeColor.black ? "B" : "W") zpl += "^FS"; return zpl; } } customElements.define(ZplGraphicCircle.is, ZplGraphicCircle); ================================================ FILE: packages/web-component-designer-zpl/src/widgets/zpl-graphic-diagonal-line.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { getZplCoordinates } from "../zplHelper.js"; enum StrokeColor { black = "black", white = "white", } enum Orientation { L = "L", R = "R", } export class ZplGraphicDiagonalLine extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` *{ box-sizing: border-box; } `; static override readonly template = html`
      `; static readonly is = 'zpl-graphic-diagonal-line'; public strokeWidth: number = 1; public strokeColor: string = "black"; public orientation: string; private _line: HTMLDivElement; private _observer: ResizeObserver; static readonly properties = { strokeWidth: Number, strokeColor: StrokeColor, orientation: Orientation, } constructor() { super(); this._restoreCachedInititalValues(); this._line = this._getDomElement("box-div"); this._observer = new ResizeObserver(() => this._drawSvg()); this._observer.observe(this); } async ready() { this._parseAttributesToProperties(); this._drawSvg(); } private _drawSvg() { let w = parseInt(this.style.width.replace("px", "")); let h = parseInt(this.style.height.replace("px", "")) - this.strokeWidth; let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); let line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); if (this.strokeColor == StrokeColor.black) line.setAttribute("stroke", "black"); else line.setAttribute("stroke", "white"); line.setAttribute("fill", "white"); line.setAttribute("fill-opacity", "0.0"); line.setAttribute("stroke-width", this.strokeWidth.toString()); if (this.orientation == Orientation.L) { line.setAttribute("x1", "0"); line.setAttribute("y1", "0"); line.setAttribute("x2", w.toString()); line.setAttribute("y2", h.toString()); } else { line.setAttribute("x1", "0"); line.setAttribute("y1", h.toString()); line.setAttribute("x2", w.toString()); line.setAttribute("y2", "0"); } svg.style.overflow = "visible"; if (this._line.childElementCount > 0) this._line.removeChild(this._line.children[0]); svg.appendChild(line); this._line.appendChild(svg); } public createZpl() { let zpl = ""; zpl += getZplCoordinates(this, 0); zpl += "^GD" + this.style.width.replace("px", "") + "," + this.style.height.replace("px", "") + "," + this.strokeWidth + "," + (this.strokeColor == StrokeColor.black ? "B" : "W") + "," + this.orientation; zpl += "^FS"; return zpl; } } customElements.define(ZplGraphicDiagonalLine.is, ZplGraphicDiagonalLine); ================================================ FILE: packages/web-component-designer-zpl/src/widgets/zpl-image.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { requestAnimationFramePromise } from "@node-projects/web-component-designer"; import { getZplCoordinates } from "../zplHelper.js"; export class ZplImage extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` *{ box-sizing: border-box; } `; static override readonly template = html`
      `; static readonly is = 'zpl-image'; private _image: HTMLCanvasElement; private _wrapper: HTMLDivElement; public totalBytes: number; public bytesPerRow: number; public imageName: string; public hexImage: string; public scaleX: number; public scaleY: number; static readonly properties = { totalBytes: Number, bytesPerRow: Number, imageName: String, hexImage: String, scaleX: Number, scaleY: Number, } constructor() { super(); this._restoreCachedInititalValues(); this._image = this._getDomElement("image-div"); this._wrapper = this._getDomElement("wrapper"); } async ready() { this._parseAttributesToProperties(); if (this.scaleX < 1) this.scaleX = 1 if (this.scaleY < 1) this.scaleY = 1 if (this.scaleX > 10) this.scaleX = 10 if (this.scaleX > 10) this.scaleX = 10 if (this.hexImage && this.bytesPerRow) this.acsToCanvas(this.hexImage, this.bytesPerRow); // this._image.style.width = 100 * this.scaleX + "%"; // this._image.style.aspectRatio = (this.scaleX / this.scaleY).toString(); this._image.style.transformOrigin = "0 0"; this._image.style.transform = "scaleX(" + this.scaleX + ") " + "scaleY(" + this.scaleY + ")"; await requestAnimationFramePromise(); let rect = this._image.getBoundingClientRect(); this._wrapper.style.width = rect.width + "px"; this._wrapper.style.height = rect.height + "px"; } public createZplImage() { let zpl = ""; zpl += "~DG" + this.imageName + ","; zpl += this.totalBytes + ","; zpl += this.bytesPerRow + ","; zpl += this.hexImage; zpl = zpl.replaceAll("\n", ""); return zpl; } public createZpl() { let zpl = ""; zpl += getZplCoordinates(this, 0); zpl += "^XG" + "R:" + this.imageName + "," + this.scaleX + "," + this.scaleY; zpl += "^FS"; return zpl; } private acsToCanvas(imageData, bytesPerRow) { let hex = imageData.replaceAll(" ", "").replaceAll("\n", "").replaceAll("\r", ""); hex = hex.replace(/[g-zG-Y]+([0-9a-fA-F])/g, ($0, $1) => { let rep = 0; for (let i = 0, l = $0.length - 1; i < l; i++) { let cd = $0.charCodeAt(i); if (cd < 90) { // 'Z' rep += cd - 70; } else { rep += (cd - 102) * 20; } } return $1.repeat(rep); }); let bytes = Array(hex.length / 2); for (let i = 0, l = hex.length; i < l; i += 2) { bytes[i >> 1] = parseInt(hex.substr(i, 2), 16); } let l = bytes.length; let w = bytesPerRow * 8; // rowl is in bytes let h = ~~(l / bytesPerRow); // Render the GRF to a canvas let cvs = this._image; cvs.width = w; cvs.height = h; let ctx = cvs.getContext('2d'); let bmap = ctx.getImageData(0, 0, w, h); let data = bmap.data; let offs = 0; for (let i = 0; i < l; i++) { let byte = bytes[i]; for (let bit = 0x80; bit; bit = bit >>> 1, offs += 4) { if (bit & byte) { data[offs] = 0; data[offs + 1] = 0; data[offs + 2] = 0; data[offs + 3] = 255; // Fully opaque } } } ctx.putImageData(bmap, 0, 0); return cvs; } } customElements.define(ZplImage.is, ZplImage); ================================================ FILE: packages/web-component-designer-zpl/src/widgets/zpl-text.ts ================================================ import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent"; import { getZplCoordinates } from "../zplHelper.js"; enum FontNames { Font_0 = "0", Font_A = "A", } export class ZplText extends BaseCustomWebComponentConstructorAppend { static override readonly style = css` *{ box-sizing: border-box; } `; static override readonly template = html`
      `; static readonly is = 'zpl-text'; public content: string; public fontName: string; public fontHeight: number; public fontWidth: number; private _text: HTMLDivElement; static readonly properties = { content: String, fontName: FontNames, fontHeight: Number, fontWidth: Number } constructor() { super(); this._restoreCachedInititalValues(); this._text = this._getDomElement("text-div"); } async ready() { this._parseAttributesToProperties(); this._text.innerHTML = this.content; this._text.style.transformOrigin = "0 0"; switch (this.fontName) { case FontNames.Font_0: this._text.style.fontSize = "9px"; this._text.style.fontFamily = "RobotoCn, Verdana"; this._text.style.fontKerning = "none"; this._text.style.transform = "scaleX(" + this.fontWidth / 9 + ") scaleY(" + this.fontHeight / 9 + ") translate(0px, -3px)"; break; case FontNames.Font_A: this._text.style.fontSize = "9px"; this._text.style.fontFamily = "monospace"; this._text.style.transform = "scaleX(" + this.fontWidth / 5 + ") scaleY(" + this.fontHeight / 8 + ") translate(0px, -3px)"; break; } this.style.width = ''; this.style.height = ''; requestAnimationFrame(() => { let rect = this._text.getBoundingClientRect() this.style.width = rect.width + 'px'; this.style.height = rect.height / 2 + 'px'; }); } public createZpl() { let zpl = ""; zpl += getZplCoordinates(this, 0); zpl += "^CF" + this.fontName + "," + this.fontHeight + "," + this.fontWidth; zpl += "^FD" + this.content zpl += "^FS"; return zpl; } } customElements.define(ZplText.is, ZplText); ================================================ FILE: packages/web-component-designer-zpl/src/zplHelper.ts ================================================ export function getZplCoordinates(obj: any, alignment: 0|1|2) { let x = obj.style.left.replace("px", ""); let y= obj.style.top.replace("px", ""); return "^FO" + x + "," + y + "," + alignment; } ================================================ FILE: packages/web-component-designer-zpl/tsconfig.json ================================================ { "extends": "../../tsconfig.json", "compilerOptions": { "composite": true, "outDir": "./dist", "rootDir": "./src", "noEmit": false, "resolveJsonModule": true }, "include": [ "src/**/*.ts", "src/**/*.js", "src/**/*.json" ], "references": [ { "path": "../web-component-designer/tsconfig.json" }, ] } ================================================ FILE: todos/VueParserService.ts ================================================ /* WIP a parser for vue elements import { InstanceServiceContainer } from '../InstanceServiceContainer.js'; import { ServiceContainer } from '../ServiceContainer.js'; import { IHtmlParserService } from './IHtmlParserService.js'; import { IDesignItem } from '../../item/IDesignItem.js'; export class VueParserService implements IHtmlParserService { private htmlParser: IHtmlParserService; constructor(htmlParser: IHtmlParserService) { this.htmlParser = htmlParser; } async parse(code: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { const parsed = await this.htmlParser.parse(code, serviceContainer, instanceServiceContainer, parseSnippet); return [parsed.find(x => x.name == 'template')]; } } */ ================================================ FILE: todos/todo.md ================================================ DesignItem.SetProperty should use a service? DesitnItem should know if a Control should be recreated (when property or attribute is set) This should be removed from property service We recreate a Control somewhere inside (via parser etc), but do not use Instanceservice, should be changed ================================================ FILE: tsconfig.build.json ================================================ { "compilerOptions": { "module": "esnext", "target": "esnext", "allowJs": true, /* Allow javascript files to be compiled. */ "declaration": true, /* Generates corresponding '.d.ts' file. */ "sourceMap": false, /* Generates corresponding '.map' file. */ "composite": true, /* Enable project compilation */ "noImplicitOverride": true, "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ "resolveJsonModule": true, "noUnusedLocals": true, /* Report errors on unused locals. */ "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ "moduleResolution": "bundler", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ "skipLibCheck": true, "noImplicitAny": false, "strictNullChecks": false, "types": ["node"] } } ================================================ FILE: tsconfig.json ================================================ { "extends": "./tsconfig.build.json", "compilerOptions": { "noEmit": true } }