Showing preview only (2,843K chars total). Download the full file or copy to clipboard to get everything.
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.
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)
A material flow layout editor in a comercial application:
A flow chart editor
## 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:
<link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
<script src="/node_modules/mobile-drag-drop/index.js"></script>
## 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.
## 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*<br/>
```
$ 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:
<link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
<script src="/node_modules/mobile-drag-drop/index.js"></script>
## 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
================================================
<html>
<head>
<script>
window.addEventListener("message",
(event) => {
const data = event.data;
const obj = JSON.parse(data);
switch (obj.type) {
case 'elementsFromPoint': {
const ret = document.elementsFromPoint(...obj.par);
}
}
}, false);
</script>
</head>
<body></body>
</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: ['<rootDir>/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`
<div id="editor">
<div id="plane"><div id="plane-handle"></div></div>
<div class="slider-row">
<span>Hue</span>
<input id="hue" type="range" min="0" max="360" step="1">
<div id="preview" class="swatch"></div>
</div>
<div class="slider-row">
<span>Alpha</span>
<input id="alpha" type="range" min="0" max="100" step="1">
<span id="alpha-label"></span>
</div>
<select id="mode" aria-label="Color mode">
<option value="rgb">RGB</option>
<option value="hsl">HSL</option>
<option value="cmyk">CMYK</option>
<option value="oklab">OKLab</option>
<option value="oklch">OKLCH</option>
</select>
<div id="channels"></div>
<input id="text" type="text" spellcheck="false" aria-label="Color text">
</div>
`;
public valueChanged = new TypedEvent<ColorEditorValueChangedEventArgs>();
public valuePreviewChanged = new TypedEvent<ColorEditorValueChangedEventArgs>();
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<HTMLDivElement>('plane');
this._planeHandle = this._getDomElement<HTMLDivElement>('plane-handle');
this._hueInput = this._getDomElement<HTMLInputElement>('hue');
this._alphaInput = this._getDomElement<HTMLInputElement>('alpha');
this._alphaLabel = this._getDomElement<HTMLSpanElement>('alpha-label');
this._modeSelect = this._getDomElement<HTMLSelectElement>('mode');
this._channels = this._getDomElement<HTMLDivElement>('channels');
this._textInput = this._getDomElement<HTMLInputElement>('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<HTMLInputElement>('input')].reduce((map, input) => {
map[input.name] = Number(input.value);
return map;
}, {} as Record<string, number>);
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 => `
<label>${channel.label}
<input type="number" name="${channel.name}" min="${channel.min}" max="${channel.max}" step="${channel.step}" value="${channel.value}">
</label>`).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`
<button id="button" type="button" aria-label="Edit color"><span id="swatch"></span></button>
`;
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<HTMLButtonElement>('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<HTMLElement, HTMLDivElement>();
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 ((<HTMLElement>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 ((<HTMLElement>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 ((<HTMLElement>element).style.display != 'none') {
index++;
if (index == this._selectedIndex) {
if (element.slot != "panels")
element.slot = "panels";
const headerEl = this._elementMap.get(<HTMLElement>element);
if (headerEl) {
headerEl.classList.add('selected');
if ((<IActivateable><unknown>element).activated)
(<IActivateable><unknown>element).activated();
}
} else {
element.removeAttribute("slot");
const headerEl = this._elementMap.get(<HTMLElement>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<DesignerTabControlIndexChangedEventArgs>();
}
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`
<div>
<div id="header" style="display: none"><span id="property"></span><span id="vhd">: <span id="value"></span></span></div>
<div part="container" class="container"><slot id="slot"></slot></div>
</div>
`;
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<HTMLSpanElement>('value').innerText = this.value;
this._getDomElement<HTMLSpanElement>('value').classList.add('value-set');
} else {
this._getDomElement<HTMLSpanElement>('value').classList.remove('value-set');
}
const slot = this._getDomElement<HTMLSlotElement>('slot');
for (let e of slot.assignedElements()) {
if ((<HTMLElement>e).dataset.value == this.value)
(<HTMLElement>e).style.background = "cornflowerblue";
else (<HTMLElement>e).style.background = "";
}
}
ready() {
this._parseAttributesToProperties();
if (this.property)
this._getDomElement<HTMLSpanElement>('header').style.display = 'block';
if (this.noValueInHeader)
this._getDomElement<HTMLSpanElement>('vhd').style.display = 'none';
const slot = this._getDomElement<HTMLSlotElement>('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 = (<HTMLElement>e).dataset.value;
const valueChangedEvent = new CustomEvent('value-changed', {
detail: {
newValue: this._value, oldValue: oldValue
}
});
this.dispatchEvent(valueChangedEvent);
}
}
}
this._getDomElement<HTMLSpanElement>('property').innerText = this.property ?? '';
this._getDomElement<HTMLSpanElement>('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<Record<MetricsEditorArea, Partial<Record<MetricsEditorSide, string>>>>;
const metricsEditorNaturalWidth = 436;
const cssProperties: Record<MetricsEditorArea, Partial<Record<MetricsEditorSide, string>>> = {
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<string, string> = {
'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`
<div id="box-model">
<span id="position-label" class="label" title="position">position</span>
<input data-area="position" data-side="top" title="top" spellcheck="false">
<input data-area="position" data-side="right" title="right" spellcheck="false">
<input data-area="position" data-side="bottom" title="bottom" spellcheck="false">
<input data-area="position" data-side="left" title="left" spellcheck="false">
<div id="margin" class="ring">
<span class="label" title="margin">margin</span>
<input data-area="margin" data-side="top" title="margin-top" spellcheck="false">
<input data-area="margin" data-side="right" title="margin-right" spellcheck="false">
<input data-area="margin" data-side="bottom" title="margin-bottom" spellcheck="false">
<input data-area="margin" data-side="left" title="margin-left" spellcheck="false">
<div id="border" class="ring">
<span class="label" title="border">border</span>
<input data-area="border" data-side="top" title="border-top-width" spellcheck="false">
<input data-area="border" data-side="right" title="border-right-width" spellcheck="false">
<input data-area="border" data-side="bottom" title="border-bottom-width" spellcheck="false">
<input data-area="border" data-side="left" title="border-left-width" spellcheck="false">
<div id="padding" class="ring">
<span class="label" title="padding">padding</span>
<input data-area="padding" data-side="top" title="padding-top" spellcheck="false">
<input data-area="padding" data-side="right" title="padding-right" spellcheck="false">
<input data-area="padding" data-side="bottom" title="padding-bottom" spellcheck="false">
<input data-area="padding" data-side="left" title="padding-left" spellcheck="false">
<div id="content">
<span id="content-label" class="label" title="content">content</span>
<input data-area="content" data-side="width" title="width" spellcheck="false">
<span id="content-separator">x</span>
<input data-area="content" data-side="height" title="height" spellcheck="false">
</div>
</div>
</div>
</div>
</div>
`;
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<HTMLDivElement>('border');
this._boxModelDiv = this._getDomElement<HTMLDivElement>('box-model');
this._contentDiv = this._getDomElement<HTMLDivElement>('content');
this._inputs = [...this.shadowRoot.querySelectorAll<HTMLInputElement>('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<MetricsEditorValueChangedEventArgs>('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`
<div id="container">
<div id="value-wrapper">
<button id="scrubber" type="button" aria-label="Drag to change value">${dragHandleGlyph}</button>
<input id="input" type="text" spellcheck="false">
</div>
<select id="select"></select>
<div id="stepper">
<button id="increase" type="button" aria-label="Increase value">+</button>
<button id="decrease" type="button" aria-label="Decrease value">-</button>
</div>
<span id="measure"></span>
</div>
`;
private _value = '';
public get value() {
return this._value;
}
public set value(value) {
this._setValue(value, false, false);
}
public valueChanged = new TypedEvent<NumericStyleInputValueChangedEventArgs>();
public valuePreviewChanged = new TypedEvent<NumericStyleInputValueChangedEventArgs>();
public valuePreviewFinished = new TypedEvent<NumericStyleInputPreviewFinishedEventArgs>();
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<string, number> = {};
public get unitSteps() {
return { ...this._unitSteps };
}
public set unitSteps(value: Record<string, number>) {
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<HTMLInputElement>('input');
this._select = this._getDomElement<HTMLSelectElement>('select');
this._measure = this._getDomElement<HTMLSpanElement>('measure');
this._scrubberButton = this._getDomElement<HTMLButtonElement>('scrubber');
this._increaseButton = this._getDomElement<HTMLButtonElement>('increase');
this._decreaseButton = this._getDomElement<HTMLButtonElement>('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<string, number> | 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 = <HTMLElement>shadowRoot.querySelector("#root")!;
this.trough = <HTMLElement>shadowRoot.querySelector("#trough")!;
this.button1 = <HTMLElement>shadowRoot.querySelector("#button1")!;
this.button2 = <HTMLElement>shadowRoot.querySelector("#button2")!;
this.thumb = <HTMLElement>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 = '<path d="M -60 30 h 120 L 0 -30 z" stroke-width="0"/>';
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`
<div id="root" part="root">
<div id="button1" part="button button1">
<svg id="upArrow" part="arrow upArrow" viewBox="-100 -100 200 200">${buttonPath}</svg>
<svg id="leftArrow" part="arrow leftArrow" viewBox="-100 -100 200 200"><g transform="rotate(-90)">${buttonPath}</g></svg>
</div>
<div id="trough" part="trough">
<div id="thumb" part="thumb"></div>
</div>
<div id="button2" part="button button2">
<svg id="downArrow" part="arrow downArrow" viewBox="-100 -100 200 200"><g transform="rotate(180)">${buttonPath}</g></svg>
<svg id="rightArrow" part="arrow rightArrow" viewBox="-100 -100 200 200"><g transform="rotate(90)">${buttonPath}</g></svg>
</div>
</div>
`;
//------------------------------------------------------------------------------
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`
<div id="split" style="--split: 50;">
<slot name="top"></slot>
<div id="splitter"></div>
<slot name="bottom"></slot>
</div>`;
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<HTMLDivElement>("split");
const splitter = this._getDomElement<HTMLDivElement>("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", <any>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`
<div id="container">
<input id="left">
<input id="top">
<input id="right">
<input id="bottom">
<div id="rect"></div>
</div>
`;
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<ThicknessEditorValueChangedEventArgs>();
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<ThicknessEditorValueChangedEventArgs>();
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<ThicknessEditorValueChangedEventArgs>();
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<ThicknessEditorValueChangedEventArgs>();
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<HTMLInputElement>('left');
this._topInput = this._getDomElement<HTMLInputElement>('top');
this._rightInput = this._getDomElement<HTMLInputElement>('right');
this._bottomInput = this._getDomElement<HTMLInputElement>('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: <any>tabIndex[i.oldIndex], newTab: <any>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);
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
Showing preview only (375K chars total). Download the full file or copy to clipboard to get everything.
SYMBOL INDEX (3542 symbols across 515 files)
FILE: packages/web-component-designer-codeview-ace/src/widgets/codeView/code-view-ace.ts
class CodeViewAceCompleter (line 5) | class CodeViewAceCompleter {
method getCompletions (line 6) | getCompletions(editor, session, pos, prefix, callback) {
class CodeViewAce (line 19) | class CodeViewAce extends BaseCustomWebComponentLazyAppend implements IC...
method constructor (line 37) | constructor() {
method dispose (line 48) | dispose(): void {
method executeCommand (line 52) | executeCommand(command: IUiCommand) {
method canExecuteCommand (line 81) | canExecuteCommand(command: IUiCommand) {
method focusEditor (line 94) | focusEditor() {
method oneTimeSetup (line 101) | oneTimeSetup() {
method ready (line 107) | ready() {
method update (line 134) | update(code) {
method getText (line 138) | getText() {
method setSelection (line 142) | setSelection(position: IStringPosition) {
FILE: packages/web-component-designer-codeview-codemirror5/src/widgets/codeView/code-view-codemirror5.ts
class CodeViewCodeMirror5 (line 5) | class CodeViewCodeMirror5 extends BaseCustomWebComponentLazyAppend imple...
method constructor (line 28) | constructor() {
method dispose (line 41) | dispose(): void {
method executeCommand (line 44) | executeCommand(command: IUiCommand) {
method canExecuteCommand (line 72) | canExecuteCommand(command: IUiCommand) {
method focusEditor (line 85) | focusEditor() {
method ready (line 92) | ready() {
method update (line 111) | update(code) {
method getText (line 114) | getText() {
method setSelection (line 118) | setSelection(position: IStringPosition) {
FILE: packages/web-component-designer-codeview-monaco/src/widgets/codeView/code-view-monaco.ts
class CodeViewMonaco (line 5) | class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements...
method getMonacoLib (line 8) | public static async getMonacoLib() {
method dispose (line 23) | dispose(): void {
method theme (line 35) | public get theme(): string {
method theme (line 38) | public set theme(value: string) {
method code (line 44) | get code() {
method code (line 49) | set code(v) {
method readOnly (line 56) | get readOnly() {
method readOnly (line 59) | set readOnly(v) {
method executeCommand (line 89) | executeCommand(command: IUiCommand) {
method canExecuteCommand (line 110) | canExecuteCommand(command: IUiCommand) {
method constructor (line 123) | constructor() {
method ready (line 129) | async ready() {
method focusEditor (line 225) | focusEditor() {
method activated (line 233) | activated() {
method update (line 239) | update(code: string, instanceServiceContainer?: InstanceServiceContain...
method getText (line 255) | getText() {
method setSelection (line 259) | setSelection(position: IStringPosition) {
method clearPendingSetSelection (line 284) | private clearPendingSetSelection() {
FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationCommentsContextMenu.ts
function truncateText (line 3) | function truncateText(text: string, maxLength: number) {
function createCommentId (line 9) | function createCommentId() {
class CollaborationCommentsContextMenu (line 13) | class CollaborationCommentsContextMenu implements IContextMenuExtension {
method shouldProvideContextmenu (line 14) | public shouldProvideContextmenu(event: MouseEvent, designerView: IDesi...
method provideContextMenuItems (line 18) | public provideContextMenuItems(event: MouseEvent, designerCanvas: IDes...
method createCommentMenuItem (line 61) | private createCommentMenuItem(comment: ICollaborationComment, collabor...
FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationCursorOverlayExtension.ts
function truncateText (line 3) | function truncateText(text: string, maxLength: number) {
function createCursorPath (line 9) | function createCursorPath(x: number, y: number) {
class CollaborationCursorOverlayExtension (line 22) | class CollaborationCursorOverlayExtension extends AbstractExtension {
method constructor (line 23) | constructor(extensionManager: IExtensionManager, designerView: IDesign...
method extend (line 27) | override extend(cache: Record<string | symbol, any>, event?: Event) {
method refresh (line 31) | override refresh(cache: Record<string | symbol, any>, event?: Event) {
method dispose (line 66) | override dispose() {
method drawPeerCursor (line 70) | private drawPeerCursor(peer: ICollaborationPeerPresence) {
FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationCursorOverlayExtensionProvider.ts
class CollaborationCursorOverlayExtensionProvider (line 5) | class CollaborationCursorOverlayExtensionProvider implements IDesignerEx...
method shouldExtend (line 6) | shouldExtend(extensionManager: IExtensionManager, designerView: IDesig...
method getExtension (line 10) | getExtension(extensionManager: IExtensionManager, designerView: IDesig...
FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationOverlayExtension.ts
type CollaborationOverlayCache (line 5) | type CollaborationOverlayCache = {
function getOverlayCache (line 10) | function getOverlayCache(designItem: IDesignItem, cache: Record<string |...
function truncateText (line 50) | function truncateText(text: string, maxLength: number) {
class CollaborationOverlayExtension (line 56) | class CollaborationOverlayExtension extends AbstractExtension {
method constructor (line 57) | constructor(extensionManager: IExtensionManager, designerView: IDesign...
method extend (line 61) | override extend(cache: Record<string | symbol, any>, event?: Event) {
method refresh (line 65) | override refresh(cache: Record<string | symbol, any>, event?: Event) {
method dispose (line 140) | override dispose() {
FILE: packages/web-component-designer-collaboration-service/src/extensions/CollaborationOverlayExtensionProvider.ts
class CollaborationOverlayExtensionProvider (line 5) | class CollaborationOverlayExtensionProvider implements IDesignerExtensio...
method shouldExtend (line 6) | shouldExtend(extensionManager: IExtensionManager, designerView: IDesig...
method getExtension (line 10) | getExtension(extensionManager: IExtensionManager, designerView: IDesig...
FILE: packages/web-component-designer-collaboration-service/src/services/DefaultCollaborationService.ts
function createPeerColor (line 4) | function createPeerColor(peerId: string) {
function createSyntheticTransactionItem (line 12) | function createSyntheticTransactionItem(title?: string): ITransactionItem {
class DefaultCollaborationService (line 22) | class DefaultCollaborationService implements ICollaborationService {
method constructor (line 33) | constructor(private _designerCanvas: IDesignerCanvas) {
method state (line 84) | get state(): CollaborationConnectionState {
method session (line 88) | get session(): ICollaborationSession {
method peers (line 92) | get peers(): readonly ICollaborationPeerPresence[] {
method comments (line 96) | get comments(): readonly ICollaborationComment[] {
method transport (line 100) | get transport(): ICollaborationTransport {
method isApplyingRemoteChanges (line 104) | get isApplyingRemoteChanges(): boolean {
method attachTransport (line 108) | attachTransport(transport: ICollaborationTransport): void {
method detachTransport (line 119) | detachTransport(): void {
method connect (line 127) | connect(sessionId: string, peerId: string, displayName?: string): void {
method disconnect (line 145) | disconnect(): void {
method createSnapshot (line 158) | createSnapshot(): ICollaborationDocumentSnapshot {
method applyRemoteSnapshot (line 166) | async applyRemoteSnapshot(snapshot: ICollaborationDocumentSnapshot): P...
method applyRemoteChange (line 182) | async applyRemoteChange(change: ICollaborationRemoteChange, snapshot?:...
method updateRemoteSelection (line 193) | updateRemoteSelection(peerId: string, selectedNodeIndexes: number[], p...
method updatePeerPresence (line 221) | updatePeerPresence(peer: ICollaborationPeerPresence, source: UndoChang...
method removePeer (line 228) | removePeer(peerId: string, source: UndoChangeSource = 'local'): void {
method upsertComment (line 235) | upsertComment(comment: ICollaborationComment, source: UndoChangeSource...
method removeComment (line 254) | removeComment(commentId: string, source: UndoChangeSource = 'local'): ...
method storePeerPresence (line 275) | private storePeerPresence(peer: ICollaborationPeerPresence, source: Un...
method requestExtensionRefresh (line 284) | private requestExtensionRefresh() {
method getCurrentSelectionState (line 335) | private getCurrentSelectionState() {
FILE: packages/web-component-designer-collaboration-service/src/services/WebRtcTabCollaborationTransport.ts
type WebRtcTabCollaborationSignalingChannelKind (line 3) | type WebRtcTabCollaborationSignalingChannelKind = 'broadcast-channel' | ...
type WebRtcTabCollaborationTransportOptions (line 5) | interface WebRtcTabCollaborationTransportOptions {
type IWebRtcManualSignalingBundle (line 10) | interface IWebRtcManualSignalingBundle {
type IWebRtcManualSignalingImportResult (line 19) | interface IWebRtcManualSignalingImportResult {
type SignalingMessage (line 24) | type SignalingMessage = {
type DataMessage (line 37) | type DataMessage =
function createRandomId (line 47) | function createRandomId() {
function createEnabledSignalingChannels (line 51) | function createEnabledSignalingChannels(channels?: readonly WebRtcTabCol...
function cloneRtcConfiguration (line 60) | function cloneRtcConfiguration(configuration?: RTCConfiguration) {
function areSetsEqual (line 73) | function areSetsEqual<T>(first: Set<T>, second: Set<T>) {
function cloneSignalingMessage (line 85) | function cloneSignalingMessage(message: SignalingMessage): SignalingMess...
function escapeControlCharacter (line 93) | function escapeControlCharacter(character: string) {
function normalizeJsonControlCharactersInStrings (line 110) | function normalizeJsonControlCharactersInStrings(data: string) {
function parseManualSignalingBundleData (line 152) | function parseManualSignalingBundleData(data: string) {
class WebRtcTabCollaborationTransport (line 164) | class WebRtcTabCollaborationTransport implements ICollaborationTransport {
method constructor (line 180) | constructor(options?: WebRtcTabCollaborationTransportOptions) {
method enabledSignalingChannels (line 185) | get enabledSignalingChannels(): readonly WebRtcTabCollaborationSignali...
method rtcConfiguration (line 189) | get rtcConfiguration(): RTCConfiguration | undefined {
method setEnabledSignalingChannels (line 193) | setEnabledSignalingChannels(channels: readonly WebRtcTabCollaborationS...
method setRtcConfiguration (line 211) | setRtcConfiguration(configuration?: RTCConfiguration) {
method getManualSignalingBundle (line 215) | getManualSignalingBundle(): IWebRtcManualSignalingBundle | null {
method exportManualSignalingData (line 229) | exportManualSignalingData(space: number = 2): string {
method importManualSignalingData (line 234) | async importManualSignalingData(data: string | IWebRtcManualSignalingB...
method attach (line 267) | async attach(service: ICollaborationService) {
method detach (line 271) | async detach() {
method connect (line 276) | async connect(session: ICollaborationSession) {
method disconnect (line 298) | async disconnect() {
method sendChange (line 337) | async sendChange(change: ICollaborationRemoteChange, snapshot: ICollab...
method sendSelection (line 341) | async sendSelection(selection: { peerId: string; selectedNodeIndexes: ...
method sendPresence (line 345) | async sendPresence(peer: { peerId: string; displayName?: string; color...
method sendComment (line 349) | async sendComment(change: { comment?: ICollaborationComment; commentId...
method ensureBroadcastChannelState (line 356) | private ensureBroadcastChannelState() {
method hasAvailableSignalingChannel (line 374) | private hasAvailableSignalingChannel() {
method isSignalingMessage (line 379) | private isSignalingMessage(message: Partial<SignalingMessage>): messag...
method rememberRemoteConnection (line 397) | private rememberRemoteConnection(remotePeerId: string, connectionId: s...
method shouldRequestInitialSnapshot (line 406) | private shouldRequestInitialSnapshot() {
method updateInitialSnapshotRequest (line 411) | private updateInitialSnapshotRequest(remotePeerId: string, requestInit...
method handleSignalMessage (line 418) | private async handleSignalMessage(message: SignalingMessage) {
method shouldInitiate (line 478) | private shouldInitiate(remotePeerId: string) {
method getOrCreatePeerConnection (line 484) | private getOrCreatePeerConnection(remotePeerId: string) {
method ensureOffer (line 515) | private async ensureOffer(remotePeerId: string) {
method acceptOffer (line 540) | private async acceptOffer(remotePeerId: string, description: RTCSessio...
method acceptAnswer (line 557) | private async acceptAnswer(remotePeerId: string, description: RTCSessi...
method acceptIceCandidate (line 563) | private async acceptIceCandidate(remotePeerId: string, candidate: RTCI...
method flushPendingCandidates (line 575) | private async flushPendingCandidates(remotePeerId: string) {
method registerDataChannel (line 587) | private registerDataChannel(remotePeerId: string, channel: RTCDataChan...
method handleOpenChannel (line 610) | private async handleOpenChannel(remotePeerId: string) {
method handleDataMessage (line 642) | private async handleDataMessage(remotePeerId: string, rawData: string) {
method sendSignal (line 670) | private sendSignal(
method enqueueManualSignal (line 695) | private enqueueManualSignal(signal: SignalingMessage) {
method sendData (line 704) | private sendData(message: DataMessage, remotePeerId?: string) {
method cleanupPeer (line 714) | private cleanupPeer(remotePeerId: string, clearInitialSnapshotState: b...
FILE: packages/web-component-designer-collaboration-service/src/setupCollaborationService.ts
function setupCollaborationService (line 7) | function setupCollaborationService(serviceContainer: ServiceContainer) {
FILE: packages/web-component-designer-htmlparserservice-base-custom-webcomponent/src/service/htmlParserService/BaseCustomWebcomponentParserService.ts
class BaseCustomWebcomponentParserService (line 11) | class BaseCustomWebcomponentParserService implements IHtmlParserService {
method constructor (line 14) | constructor(htmlParser: IHtmlParserService) {
method parse (line 18) | async parse(code: string, serviceContainer: ServiceContainer, instance...
method writeBack (line 43) | public writeBack(code: string, html: string, css: string, newLineCrLf:...
method parseTypescriptFile (line 74) | private parseTypescriptFile(code: string) {
FILE: packages/web-component-designer-htmlparserservice-lit-element/src/service/htmlParserService/LitElementParserService.ts
class LitElementParserService (line 5) | class LitElementParserService implements IHtmlParserService {
method constructor (line 9) | constructor(htmlParser: IHtmlParserService) {
method parse (line 13) | async parse(module: string, serviceContainer: ServiceContainer, instan...
method _createDesignItemsRecursive (line 28) | _createDesignItemsRecursive(item: any, serviceContainer: ServiceContai...
FILE: packages/web-component-designer-htmlparserservice-nodehtmlparser/src/service/htmlParserService/NodeHtmlParserService.ts
class NodeHtmlParserService (line 5) | class NodeHtmlParserService implements IHtmlParserService {
method constructor (line 9) | constructor(designItemCreatedCallback?: (IDesignItem) => void) {
method parse (line 13) | async parse(html: string, serviceContainer: ServiceContainer, instance...
method _createDesignItemsRecursive (line 31) | _createDesignItemsRecursive(item: any, serviceContainer: ServiceContai...
method _addAttributeSourceParts (line 127) | private _addAttributeSourceParts(item: any, designItem: IDesignItem, s...
method _getOpeningTagText (line 172) | private _getOpeningTagText(outerHtml: string) {
method _getAttributeValueRange (line 188) | private _getAttributeValueRange(attributeText: string): { start: numbe...
FILE: packages/web-component-designer-mermaid/src/monaco/MermaidLanguage.ts
function addMermaidLanguageToMonaco (line 1) | function addMermaidLanguageToMonaco(monaco?: any) {
FILE: packages/web-component-designer-mermaid/src/services/MermaidConnectionRouting.ts
function isEdgeItem (line 4) | function isEdgeItem(designItem: IDesignItem) {
function isNodeItem (line 8) | function isNodeItem(designItem: IDesignItem) {
function getNodeId (line 12) | function getNodeId(designItem: IDesignItem) {
function collectCanvasDesignItems (line 18) | function collectCanvasDesignItems(rootDesignItem: IDesignItem) {
function createNodeItemsById (line 31) | function createNodeItemsById(rootItems: IDesignItem[]) {
function rerouteConnectedMermaidEdges (line 40) | function rerouteConnectedMermaidEdges(instanceServiceContainer: Instance...
function getDiagramDirection (line 87) | function getDiagramDirection(designItem: IDesignItem): FlowchartDirection {
FILE: packages/web-component-designer-mermaid/src/services/MermaidDocumentPropertiesService.ts
type MermaidDocumentDiagramType (line 10) | type MermaidDocumentDiagramType = "flowchart" | "sequenceDiagram" | "min...
class MermaidDocumentPropertiesService (line 12) | class MermaidDocumentPropertiesService extends AbstractPropertiesService {
method getRefreshMode (line 52) | override getRefreshMode() {
method isHandledElement (line 56) | override isHandledElement(designItem: IDesignItem): boolean {
method getProperties (line 60) | override async getProperties(designItem: IDesignItem): Promise<IProper...
method getProperty (line 70) | override async getProperty(designItem: IDesignItem, name: string): Pro...
method setValue (line 82) | override async setValue(designItems: IDesignItem[], property: IPropert...
method getPropertyTarget (line 110) | override getPropertyTarget(): BindingTarget {
method getValue (line 114) | override getValue(designItems: IDesignItem[], property: IProperty): any {
method isSet (line 133) | override isSet(designItems: IDesignItem[], property: IProperty): Value...
function getMermaidDocumentDiagramType (line 138) | function getMermaidDocumentDiagramType(rootDesignItem: IDesignItem): Mer...
function getMermaidDocumentFlowchartDirection (line 145) | function getMermaidDocumentFlowchartDirection(rootDesignItem: IDesignIte...
function getMermaidDocumentTitle (line 149) | function getMermaidDocumentTitle(rootDesignItem: IDesignItem) {
function getMermaidDocumentFrontmatter (line 153) | function getMermaidDocumentFrontmatter(rootDesignItem: IDesignItem) {
function setAttribute (line 157) | function setAttribute(designItem: IDesignItem, attributeName: string, va...
function updateFlowchartDirection (line 164) | function updateFlowchartDirection(rootDesignItem: IDesignItem, direction...
function isFlowchartDirection (line 177) | function isFlowchartDirection(value: string): value is FlowchartDirection {
FILE: packages/web-component-designer-mermaid/src/services/MermaidElementsService.ts
type MermaidElementDefinition (line 5) | type MermaidElementDefinition = IElementDefinition & {
type MermaidElementsJson (line 9) | type MermaidElementsJson = {
class MermaidElementsService (line 13) | class MermaidElementsService implements IElementsService {
method constructor (line 22) | constructor(private readonly _name: string, file: string | URL) {
method name (line 30) | get name() {
method setInstanceServiceContainer (line 34) | setInstanceServiceContainer(instanceServiceContainer: InstanceServiceC...
method getElements (line 40) | getElements(): Promise<IElementDefinition[]> {
method _filterElements (line 53) | private _filterElements() {
method _refreshCurrentDiagramType (line 57) | private _refreshCurrentDiagramType() {
method _resolveWaiting (line 65) | private _resolveWaiting() {
method _rejectWaiting (line 74) | private _rejectWaiting(error: number) {
FILE: packages/web-component-designer-mermaid/src/services/MermaidLayoutCopyPasteService.ts
class MermaidLayoutCopyPasteService (line 3) | class MermaidLayoutCopyPasteService implements ICopyPasteService {
method copyItems (line 4) | async copyItems(designItems: IDesignItem[]): Promise<void> {
method getPasteItems (line 12) | async getPasteItems(serviceContainer: ServiceContainer, instanceServic...
FILE: packages/web-component-designer-mermaid/src/services/MermaidLayoutPlacementService.ts
class MermaidLayoutPlacementService (line 3) | class MermaidLayoutPlacementService extends DefaultPlacementService {
method serviceForContainer (line 4) | override serviceForContainer(container: IDesignItem) {
method canEnter (line 8) | override canEnter(container: IDesignItem, items: IDesignItem[]) {
method enterContainer (line 16) | override enterContainer(container: IDesignItem, items: IDesignItem[]) {
method leaveContainer (line 24) | override leaveContainer(container: IDesignItem, items: IDesignItem[]) {
method finishPlace (line 27) | override finishPlace(event: MouseEvent, designerCanvas: IDesignerCanva...
FILE: packages/web-component-designer-mermaid/src/services/MermaidParserService.ts
type ParsedNode (line 14) | type ParsedNode = {
type ParsedEdge (line 24) | type ParsedEdge = {
type ParsedSubgraph (line 38) | type ParsedSubgraph = {
type ParsedFlowchartDirective (line 46) | type ParsedFlowchartDirective = {
type ParsedSequenceParticipant (line 51) | type ParsedSequenceParticipant = {
type ParsedSequenceMessage (line 59) | type ParsedSequenceMessage = {
type ParsedMindmapNode (line 68) | type ParsedMindmapNode = {
type ParsedRequirementNode (line 77) | type ParsedRequirementNode = {
type ParsedRequirementRelationship (line 90) | type ParsedRequirementRelationship = {
type LineRecord (line 98) | type LineRecord = {
type ParsedMermaidDocument (line 105) | type ParsedMermaidDocument = {
class MermaidParserService (line 111) | class MermaidParserService implements IHtmlParserService, IHtmlWriterSer...
method parse (line 115) | async parse(html: string, serviceContainer: ServiceContainer, instance...
method write (line 126) | write(textWriter: ITextWriter, designItems: IDesignItem[], rootContain...
function getDiagramKind (line 147) | function getDiagramKind(document: ParsedMermaidDocument) {
function parseFlowchart (line 158) | async function parseFlowchart(html: string, serviceContainer: ServiceCon...
function writeFlowchart (line 352) | function writeFlowchart(textWriter: ITextWriter, designItems: IDesignIte...
function writeFlowchartEdgeLine (line 394) | function writeFlowchartEdgeLine(textWriter: ITextWriter, designItem: IDe...
function getFlowchartNodeIdsUsedByEdges (line 419) | function getFlowchartNodeIdsUsedByEdges(designItems: IDesignItem[]) {
function getFlowchartNodeItemsById (line 435) | function getFlowchartNodeItemsById(designItems: IDesignItem[]) {
function getAllFlowchartItems (line 448) | function getAllFlowchartItems(designItems: IDesignItem[]) {
function shouldWriteFlowchartNode (line 460) | function shouldWriteFlowchartNode(element: HTMLElement, nodeIdsUsedByEdg...
function parseSequenceDiagram (line 469) | async function parseSequenceDiagram(html: string, serviceContainer: Serv...
function writeSequenceDiagram (line 578) | function writeSequenceDiagram(textWriter: ITextWriter, designItems: IDes...
function parseMindmapDiagram (line 593) | async function parseMindmapDiagram(html: string, serviceContainer: Servi...
function writeMindmapDiagram (line 650) | function writeMindmapDiagram(textWriter: ITextWriter, designItems: IDesi...
function parseRequirementDiagram (line 665) | async function parseRequirementDiagram(html: string, serviceContainer: S...
function writeRequirementDiagram (line 771) | function writeRequirementDiagram(textWriter: ITextWriter, designItems: I...
function parseSequenceParticipant (line 790) | function parseSequenceParticipant(line: string, sourceStart: number): Pa...
function parseSequenceMessage (line 820) | function parseSequenceMessage(line: string, sourceStart: number): Parsed...
function ensureSequenceParticipant (line 842) | function ensureSequenceParticipant(participants: Map<string, ParsedSeque...
function getSequenceMessageType (line 847) | function getSequenceMessageType(connector: string) {
class SourceCursor (line 859) | class SourceCursor {
method constructor (line 862) | constructor(private readonly text: string) {
method atEnd (line 865) | atEnd() {
method skipWhitespace (line 869) | skipWhitespace() {
method skipRequiredWhitespace (line 874) | skipRequiredWhitespace() {
method readIdentifier (line 880) | readIdentifier() {
method readRest (line 890) | readRest() {
method consume (line 896) | consume(value: string) {
function parseFlowchartDirection (line 904) | function parseFlowchartDirection(line: string): FlowchartDirection | null {
function parseDirectionStatement (line 915) | function parseDirectionStatement(line: string): FlowchartDirection | null {
function parseSubgraphStart (line 926) | function parseSubgraphStart(line: string, sourceStart: number, parentId?...
function parseFlowchartDirective (line 947) | function parseFlowchartDirective(line: string, sourceStart: number): Par...
function parseBinaryStatement (line 959) | function parseBinaryStatement(line: string, operators: string[]) {
function parseRequirementBlockStart (line 979) | function parseRequirementBlockStart(line: string): { kind: "requirement"...
function parseRequirementBlock (line 1002) | function parseRequirementBlock(blockStart: { kind: "requirement" | "elem...
function parseRequirementRelationship (line 1035) | function parseRequirementRelationship(line: string, sourceStart: number)...
function parseRequirementRelationshipForward (line 1042) | function parseRequirementRelationshipForward(line: string, sourceStart: ...
function parseRequirementRelationshipReverse (line 1064) | function parseRequirementRelationshipReverse(line: string, sourceStart: ...
function parseFlowchartEdgeStatement (line 1086) | function parseFlowchartEdgeStatement(line: string) {
function getFlowchartOperators (line 1135) | function getFlowchartOperators() {
function parseExpandedShape (line 1146) | function parseExpandedShape(value: string): { shape: string; label?: str...
function parseDelimitedShapeValue (line 1159) | function parseDelimitedShapeValue(value: string): { label: string; shape...
function parseObjectLiteralProperties (line 1189) | function parseObjectLiteralProperties(content: string) {
function findOperator (line 1218) | function findOperator(line: string, operators: string[]) {
function trimRange (line 1246) | function trimRange(text: string, start: number, end: number) {
function countLeadingWhitespace (line 1254) | function countLeadingWhitespace(text: string) {
function equalsIgnoreCase (line 1261) | function equalsIgnoreCase(a: string, b: string) {
function isIdentifier (line 1265) | function isIdentifier(value: string) {
function isIdentifierStart (line 1272) | function isIdentifierStart(char: string) {
function isIdentifierPart (line 1276) | function isIdentifierPart(char: string) {
function isAsciiLetter (line 1280) | function isAsciiLetter(char: string) {
function isAsciiDigit (line 1287) | function isAsciiDigit(char: string) {
function isWhitespace (line 1294) | function isWhitespace(char: string) {
function getMermaidFlowchartData (line 1298) | async function getMermaidFlowchartData(code: string): Promise<{ nodes: P...
function getMermaidSequenceData (line 1327) | async function getMermaidSequenceData(code: string): Promise<{ participa...
function getScannedEdge (line 1362) | function getScannedEdge(scannedEdges: ParsedEdge[], edge: ParsedEdge): P...
function mapMermaidVertexType (line 1366) | function mapMermaidVertexType(type: string) {
function mapMermaidEdgeType (line 1402) | function mapMermaidEdgeType(edge: any) {
function mapMermaidSequenceConnector (line 1412) | function mapMermaidSequenceConnector(type: number) {
function normalizeMermaidText (line 1433) | function normalizeMermaidText(value: any) {
function stripMarkdownString (line 1451) | function stripMarkdownString(value: string) {
function mergeNode (line 1458) | function mergeNode(nodes: Map<string, ParsedNode>, node: ParsedNode) {
function parseNode (line 1464) | function parseNode(line: string, sourceStart?: number): ParsedNode {
function parseMindmapNode (line 1482) | function parseMindmapNode(line: string, index: number, parentId: string,...
function parseEdge (line 1506) | function parseEdge(line: string, sourceStart: number): ParsedEdge & { fr...
function parseNodeToken (line 1533) | function parseNodeToken(token: string): ParsedNode {
function parseShapeValue (line 1542) | function parseShapeValue(id: string, value: string): ParsedNode {
function getEdgeType (line 1557) | function getEdgeType(connector: string) {
function unquoteLabel (line 1575) | function unquoteLabel(label: string) {
function mapExpandedShape (line 1586) | function mapExpandedShape(shape: string) {
function mapMindmapShape (line 1767) | function mapMindmapShape(shape: string) {
function sanitizeMindmapId (line 1780) | function sanitizeMindmapId(label: string, index: number) {
function sanitizeDirectiveId (line 1792) | function sanitizeDirectiveId(label: string) {
function getDefaultMindmapNodeSize (line 1803) | function getDefaultMindmapNodeSize(shape: string) {
function getDefaultRequirementNodeSize (line 1815) | function getDefaultRequirementNodeSize(node: ParsedRequirementNode) {
function getDefaultNodeSize (line 1821) | function getDefaultNodeSize(shape: string) {
function getFallbackRequirementNodePosition (line 1848) | function getFallbackRequirementNodePosition(index: number, total: number...
function getFallbackFlowchartNodePosition (line 1861) | function getFallbackFlowchartNodePosition(index: number, count: number, ...
function readMermaidDocument (line 1878) | function readMermaidDocument(text: string): ParsedMermaidDocument {
function readFrontmatterTitle (line 1903) | function readFrontmatterTitle(lines: LineRecord[]) {
function readFrontmatterWithoutTitle (line 1915) | function readFrontmatterWithoutTitle(lines: LineRecord[]) {
function trimBlankLines (line 1928) | function trimBlankLines(lines: string[]) {
function getLineRecords (line 1938) | function getLineRecords(text: string) {
function splitLines (line 1949) | function splitLines(text: string) {
function getDiagramDirection (line 1965) | function getDiagramDirection(designItems: IDesignItem[]) {
function inferDiagramDirection (line 1979) | function inferDiagramDirection(designItems: IDesignItem[]): FlowchartDir...
function isFlowchartDirection (line 2004) | function isFlowchartDirection(value: string): value is FlowchartDirection {
function isRequirementDirection (line 2008) | function isRequirementDirection(value: string): value is FlowchartDirect...
function setMermaidDocumentAttributes (line 2012) | function setMermaidDocumentAttributes(instanceServiceContainer: Instance...
function writeMermaidFrontmatter (line 2029) | function writeMermaidFrontmatter(textWriter: ITextWriter, designItems: I...
function getWritableDocumentDiagramType (line 2045) | function getWritableDocumentDiagramType(designItems: IDesignItem[]): Mer...
function getRootDesignItem (line 2070) | function getRootDesignItem(designItems: IDesignItem[]) {
function getMermaidDesignItems (line 2074) | function getMermaidDesignItems(designItems: IDesignItem[]) {
function getMindmapSortValue (line 2080) | function getMindmapSortValue(designItem: IDesignItem) {
function sortMindmapItems (line 2087) | function sortMindmapItems(items: IDesignItem[]) {
function repeatText (line 2091) | function repeatText(value: string, count: number) {
function writeDesignItemLine (line 2098) | function writeDesignItemLine(textWriter: ITextWriter, designItem: IDesig...
function indentEmbeddedNewlines (line 2106) | function indentEmbeddedNewlines(line: string) {
function getMermaidLayout (line 2114) | async function getMermaidLayout(code: string, nodes: Map<string, ParsedN...
function getMermaidRequirementLayout (line 2187) | async function getMermaidRequirementLayout(code: string, nodes: Map<stri...
function getMermaidMindmapLayout (line 2235) | async function getMermaidMindmapLayout(code: string, nodes: ParsedMindma...
function parseTranslateFromElementTree (line 2287) | function parseTranslateFromElementTree(element: Element) {
function parseTranslate (line 2300) | function parseTranslate(transform: string) {
function getFlowchartNodeIdFromDomId (line 2308) | function getFlowchartNodeIdFromDomId(domId: string) {
function getRequirementNodeIdFromSvgId (line 2320) | function getRequirementNodeIdFromSvgId(svgId: string, renderId: string, ...
function getClusterIdFromDomId (line 2337) | function getClusterIdFromDomId(domId: string, renderId: string) {
function parseTranslateValues (line 2348) | function parseTranslateValues(transform: string) {
function findTopLevelColon (line 2368) | function findTopLevelColon(text: string) {
function isRequirementType (line 2387) | function isRequirementType(value: string) {
function isRequirementRelationshipType (line 2396) | function isRequirementRelationshipType(value: string) {
function isAllDigits (line 2406) | function isAllDigits(value: string) {
function getSvgNodeSize (line 2416) | function getSvgNodeSize(nodeElement: Element) {
function getMindmapWidgetSize (line 2449) | function getMindmapWidgetSize(svgSize: { width: number; height: number }...
function splitWhitespace (line 2457) | function splitWhitespace(text: string) {
FILE: packages/web-component-designer-mermaid/src/services/MermaidPropertyGroupsService.ts
class MermaidPropertyGroupsService (line 4) | class MermaidPropertyGroupsService {
method getPropertygroups (line 7) | getPropertygroups(designItems: IDesignItem[]): { name: string; propert...
FILE: packages/web-component-designer-mermaid/src/services/mermaidGeometry.ts
type Point (line 1) | type Point = {
type Rect (line 6) | type Rect = Point & {
type FlowchartDirection (line 11) | type FlowchartDirection = "TB" | "TD" | "BT" | "RL" | "LR";
function encodeWaypoints (line 13) | function encodeWaypoints(waypoints: Point[]) {
function decodeWaypoints (line 17) | function decodeWaypoints(value: string) {
function boundsFromWaypoints (line 27) | function boundsFromWaypoints(waypoints: Point[]) {
function pathDataFromWaypoints (line 37) | function pathDataFromWaypoints(waypoints: Point[]) {
function midpointFromWaypoints (line 44) | function midpointFromWaypoints(waypoints: Point[]) {
function routeBetweenBounds (line 74) | function routeBetweenBounds(source: Rect, target: Rect, direction?: Flow...
function routeBetweenPoints (line 84) | function routeBetweenPoints(source: Point, target: Point) {
function getAnchor (line 88) | function getAnchor(rect: Rect, target: Point) {
function center (line 106) | function center(rect: Rect) {
function getHorizontalAnchor (line 113) | function getHorizontalAnchor(rect: Rect, target: Point) {
function getVerticalAnchor (line 121) | function getVerticalAnchor(rect: Rect, target: Point) {
function distance (line 129) | function distance(a: Point, b: Point) {
FILE: packages/web-component-designer-mermaid/src/setupMermaidServiceContainer.ts
function createMermaidDesignerServiceContainer (line 11) | function createMermaidDesignerServiceContainer() {
FILE: packages/web-component-designer-mermaid/src/toolbar/ConnectMermaidNodesTool.ts
function createIcon (line 7) | function createIcon(markup: string) {
function findNode (line 11) | function findNode(event: PointerEvent, currentElement: Element | null | ...
function isConnectableNode (line 23) | function isConnectableNode(element: HTMLElement) {
function getElementBounds (line 27) | function getElementBounds(designerCanvas: IDesignerCanvas, element: HTML...
function getNodeId (line 40) | function getNodeId(element: HTMLElement) {
class ConnectMermaidNodesTool (line 60) | class ConnectMermaidNodesTool implements ITool {
method activated (line 69) | activated(_serviceContainer: ServiceContainer) {
method dispose (line 72) | dispose() {
method pointerEventHandler (line 75) | pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEve...
method keyboardEventHandler (line 89) | keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardE...
method _begin (line 94) | private _begin(designerCanvas: IDesignerCanvas, event: PointerEvent, c...
method _update (line 116) | private _update(designerCanvas: IDesignerCanvas, event: PointerEvent, ...
method _finish (line 132) | private _finish(designerCanvas: IDesignerCanvas, event: PointerEvent, ...
method _cleanup (line 168) | private _cleanup(designerCanvas: IDesignerCanvas, finished: boolean) {
method _getDirection (line 185) | private _getDirection(target?: HTMLElement): FlowchartDirection {
method _getRelationshipTag (line 192) | private _getRelationshipTag(designerCanvas: IDesignerCanvas) {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-edge.ts
type MermaidEdgeType (line 5) | enum MermaidEdgeType {
class MermaidEdge (line 16) | class MermaidEdge extends BaseCustomWebComponentConstructorAppend {
method constructor (line 104) | constructor() {
method ready (line 112) | async ready() {
method attributeChangedCallback (line 117) | attributeChangedCallback(name: string, oldValue: string | null, newVal...
method setPreviewWaypoints (line 124) | public setPreviewWaypoints(waypoints: string | null) {
method _render (line 129) | private _render() {
method createMermaid (line 167) | public createMermaid() {
function getMarkerEnd (line 184) | function getMarkerEnd(edgeType: MermaidEdgeType, connector: string) {
function getConnector (line 194) | function getConnector(edgeType: MermaidEdgeType) {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-flowchart-directive.ts
class MermaidFlowchartDirective (line 3) | class MermaidFlowchartDirective extends BaseCustomWebComponentConstructo...
method constructor (line 31) | constructor() {
method ready (line 37) | async ready() {
method attributeChangedCallback (line 42) | attributeChangedCallback(name: string, oldValue: string | null, newVal...
method _render (line 49) | private _render() {
method createMermaid (line 53) | public createMermaid() {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-mindmap-node.ts
type MermaidMindmapNodeShape (line 4) | enum MermaidMindmapNodeShape {
class MermaidMindmapNode (line 14) | class MermaidMindmapNode extends BaseCustomWebComponentConstructorAppend {
method constructor (line 105) | constructor() {
method ready (line 113) | async ready() {
method attributeChangedCallback (line 122) | attributeChangedCallback(name: string, oldValue: string | null, newVal...
method _render (line 129) | private _render() {
method _observeChildren (line 137) | private _observeChildren() {
method _renderConnections (line 148) | private _renderConnections() {
method _getMindmapChildren (line 179) | private _getMindmapChildren() {
method createMermaid (line 183) | public createMermaid() {
function getConnectionStrokeWidth (line 209) | function getConnectionStrokeWidth(element: Element) {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-node.ts
type MermaidNodeShape (line 3) | enum MermaidNodeShape {
class MermaidNode (line 53) | class MermaidNode extends BaseCustomWebComponentConstructorAppend {
method constructor (line 275) | constructor() {
method ready (line 281) | async ready() {
method _render (line 286) | private _render() {
method createMermaid (line 319) | public createMermaid() {
function isExpandedShape (line 359) | function isExpandedShape(shape: string) {
function sanitizeId (line 363) | function sanitizeId(id: string) {
function escapeLabel (line 367) | function escapeLabel(label: string) {
function formatMermaidLabel (line 371) | function formatMermaidLabel(label: string) {
function stripMarkdownLabel (line 378) | function stripMarkdownLabel(label: string) {
function renderMarkdownLabel (line 382) | function renderMarkdownLabel(container: HTMLElement | SVGTextElement, la...
function renderInlineMarkdown (line 393) | function renderInlineMarkdown(container: Element, text: string) {
function findNextMarkdownDelimiter (line 419) | function findNextMarkdownDelimiter(text: string, start: number) {
function appendText (line 430) | function appendText(container: Element, text: string) {
function splitMarkdownLines (line 435) | function splitMarkdownLines(text: string) {
function shouldWriteMarkdownLabel (line 448) | function shouldWriteMarkdownLabel(label: string) {
function normalizeLabelLineBreaks (line 452) | function normalizeLabelLineBreaks(label: string) {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-requirement-node.ts
type RequirementNodeKind (line 4) | type RequirementNodeKind = "requirement" | "element";
class MermaidRequirementNode (line 6) | class MermaidRequirementNode extends BaseCustomWebComponentConstructorAp...
method constructor (line 101) | constructor() {
method ready (line 109) | async ready() {
method attributeChangedCallback (line 114) | attributeChangedCallback(name: string, oldValue: string | null, newVal...
method _render (line 121) | private _render() {
method _appendRow (line 139) | private _appendRow(label: string, value: string) {
method createMermaid (line 155) | public createMermaid() {
function getRequirementTypeLabel (line 183) | function getRequirementTypeLabel(type: string) {
function formatRequirementValue (line 200) | function formatRequirementValue(value: string) {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-requirement-relationship.ts
class MermaidRequirementRelationship (line 5) | class MermaidRequirementRelationship extends BaseCustomWebComponentConst...
method constructor (line 74) | constructor() {
method ready (line 82) | async ready() {
method attributeChangedCallback (line 87) | attributeChangedCallback(name: string, oldValue: string | null, newVal...
method setPreviewWaypoints (line 94) | public setPreviewWaypoints(waypoints: string | null) {
method _render (line 99) | private _render() {
method createMermaid (line 128) | public createMermaid() {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-sequence-message.ts
type MermaidSequenceMessageType (line 4) | enum MermaidSequenceMessageType {
class MermaidSequenceMessage (line 12) | class MermaidSequenceMessage extends BaseCustomWebComponentConstructorAp...
method constructor (line 84) | constructor() {
method ready (line 92) | async ready() {
method attributeChangedCallback (line 97) | attributeChangedCallback(name: string, oldValue: string | null, newVal...
method _render (line 104) | private _render() {
method createMermaid (line 121) | public createMermaid() {
function getConnector (line 130) | function getConnector(messageType: MermaidSequenceMessageType) {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-sequence-participant.ts
type MermaidSequenceParticipantType (line 4) | enum MermaidSequenceParticipantType {
class MermaidSequenceParticipant (line 9) | class MermaidSequenceParticipant extends BaseCustomWebComponentConstruct...
method constructor (line 55) | constructor() {
method ready (line 61) | async ready() {
method _render (line 66) | private _render() {
method createMermaid (line 71) | public createMermaid() {
FILE: packages/web-component-designer-mermaid/src/widgets/mermaid-subgraph.ts
class MermaidSubgraph (line 4) | class MermaidSubgraph extends BaseCustomWebComponentConstructorAppend {
method constructor (line 49) | constructor() {
method ready (line 55) | async ready() {
method attributeChangedCallback (line 60) | attributeChangedCallback(name: string, oldValue: string | null, newVal...
method _render (line 67) | private _render() {
method createMermaidStart (line 71) | public createMermaidStart() {
FILE: packages/web-component-designer-mermaid/src/widgets/views/mermaid-demo-view.ts
class MermaidDemoView (line 5) | class MermaidDemoView extends BaseCustomWebComponentConstructorAppend im...
method executeCommand (line 26) | executeCommand(command: IUiCommand) {
method canExecuteCommand (line 29) | canExecuteCommand(command: IUiCommand) {
method dispose (line 33) | dispose(): void {
method display (line 36) | async display(serviceContainer: ServiceContainer, instanceServiceConta...
FILE: packages/web-component-designer-stylesheetservice-css-parser/src/service/stylesheetservice/CssParserStylesheetService.ts
type IRuleWithAST (line 5) | interface IRuleWithAST extends IStyleRule {
type IDeclarationWithAST (line 13) | interface IDeclarationWithAST extends IStyleDeclaration {
class CssParserStylesheetService (line 17) | class CssParserStylesheetService extends AbstractStylesheetService {
method constructor (line 20) | constructor(designerCanvas: IDesignerCanvas, keepFormatting: boolean =...
method internalParse (line 25) | async internalParse(style: string) {
method getAppliedRules (line 29) | public getAppliedRules(designItem: IDesignItem): IRuleWithAST[] {
method getRules (line 55) | getRules(selector: string): IStyleRule[] {
method addRule (line 60) | async addRule(stylesheet: IStylesheet, selector: string): Promise<ISty...
method resolveNestedSelectors (line 66) | private resolveNestedSelectors(parentSelectors: string[], nestedSelect...
method getRulesFromAst (line 81) | private *getRulesFromAst(cssAtRuleAst: (CssDeclarationAST | CssAtRuleA...
method getDeclarations (line 100) | public getDeclarations(designItem: IDesignItem, styleName: string): IS...
method updateDeclarationValueWithoutUndo (line 104) | public updateDeclarationValueWithoutUndo(declaration: IDeclarationWith...
method insertDeclarationIntoRule (line 112) | public insertDeclarationIntoRule(rule: IRuleWithAST, property: string,...
method removeDeclarationFromRule (line 122) | removeDeclarationFromRule(rule: IRuleWithAST, property: string): boole...
method updateStylesheet (line 130) | private updateStylesheet(ss: { stylesheet: IStylesheet, ast: CssStyles...
method updateCompleteStylesheet (line 141) | async updateCompleteStylesheet(name: string, newStyle: string) {
method updateCompleteStylesheetWithoutUndo (line 145) | async updateCompleteStylesheetWithoutUndo(name: string, newStyle: stri...
method updateCompleteStylesheetInternal (line 149) | private async updateCompleteStylesheetInternal(name: string, newStyle:...
FILE: packages/web-component-designer-visualization-addons/src/blockly/BlocklyJavascriptHelper.ts
function generateEventCodeFromBlockly (line 24) | async function generateEventCodeFromBlockly(data: any): Promise<(event: ...
FILE: packages/web-component-designer-visualization-addons/src/blockly/BlocklyScriptEditor.ts
class BlocklyScriptEditor (line 4) | class BlocklyScriptEditor extends BaseCustomWebComponentConstructorAppend {
method constructor (line 28) | constructor(toolbox: any) {
method createBlockly (line 39) | createBlockly() {
method ready (line 105) | ready() {
method save (line 116) | public save(): any {
method load (line 122) | public load(data: any) {
FILE: packages/web-component-designer-visualization-addons/src/components/BindingsEditor.ts
class BindingsEditor (line 8) | class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
method constructor (line 205) | constructor(property: IProperty, binding: IBinding & { converter: Reco...
method ready (line 229) | ready() {
method _focusRow (line 279) | _focusRow(index: number) {
method _updatefocusedRow (line 284) | _updatefocusedRow() {
method _clear (line 291) | _clear() {
method _refresh (line 296) | _refresh() {
method _select (line 302) | async _select() {
method showHistoric (line 328) | async showHistoric() {
method addConverter (line 341) | addConverter() {
method removeConverter (line 348) | removeConverter() {
FILE: packages/web-component-designer-visualization-addons/src/components/BindingsEditorHistoric.ts
class BindingsEditorHistoric (line 3) | class BindingsEditorHistoric extends BaseCustomWebComponentConstructorAp...
method constructor (line 87) | constructor(historic: any) {
method ready (line 94) | ready() {
method refresh (line 99) | refresh() {
FILE: packages/web-component-designer-visualization-addons/src/components/EventAssignment.ts
type eventWithDesignItem (line 9) | type eventWithDesignItem = IEvent & { designItem: IDesignItem };
type scriptType (line 11) | type scriptType = 'jsdirect' | 'js' | 'script' | 'blockly' | 'none' | 'e...
class EventAssignment (line 12) | class EventAssignment extends BaseCustomWebComponentConstructorAppend {
method constructor (line 74) | constructor() {
method ready (line 79) | ready() {
method initialize (line 94) | public initialize(visualizationHandler: VisualizationHandler, visualiz...
method instanceServiceContainer (line 102) | public set instanceServiceContainer(value: InstanceServiceContainer) {
method _createControlsForScript (line 111) | protected _createControlsForScript(eventItem: eventWithDesignItem) {
method _getScriptName (line 122) | protected _getScriptName(eventItem: IEvent) {
method _changeScriptName (line 137) | protected async _changeScriptName(e: KeyboardEvent, eventItem: IEvent) {
method _getRelativeSignalsPath (line 155) | protected _getRelativeSignalsPath(eventItem: IEvent) {
method _changeRelativeSignalsPath (line 166) | protected async _changeRelativeSignalsPath(e: KeyboardEvent, eventItem...
method _hasParameters (line 185) | protected _hasParameters(eventItem: IEvent) {
method _getScriptTypeColor (line 193) | protected _getScriptTypeColor(eventItem: eventWithDesignItem) {
method _getScriptType (line 199) | protected _getScriptType(eventItem: eventWithDesignItem): scriptType {
method _getEventMethodname (line 217) | protected _getEventMethodname(eventItem: IEvent): string {
method _inputMthName (line 223) | protected _inputMthName(event: InputEvent, eventItem: IEvent) {
method _ctxMenu (line 228) | protected _ctxMenu(e: MouseEvent, eventItem: eventWithDesignItem) {
method _addEvent (line 252) | protected async _addEvent(e: KeyboardEvent) {
method _createAssignScriptContextMenu (line 262) | protected _createAssignScriptContextMenu(event: MouseEvent, eventItem:...
method _showContextMenuAssignScript (line 313) | protected async _showContextMenuAssignScript(event: MouseEvent, eventI...
method _editParameter (line 324) | protected async _editParameter(e: MouseEvent, eventItem: IEvent & { de...
method _editBlockly (line 357) | protected async _editBlockly(e: MouseEvent, eventItem: eventWithDesign...
method _editJavascript (line 383) | protected async _editJavascript(e: MouseEvent, eventItem: eventWithDes...
method _editSimpleScript (line 387) | protected async _editSimpleScript(e: MouseEvent, eventItem: eventWithD...
method _editEvent (line 432) | public async _editEvent(evtType: scriptType, e: MouseEvent, eventItem:...
method refresh (line 442) | public refresh() {
method selectedItems (line 451) | get selectedItems() {
method selectedItems (line 454) | set selectedItems(items: IDesignItem[]) {
FILE: packages/web-component-designer-visualization-addons/src/components/ParameterEditor.ts
class ParameterEditor (line 3) | class ParameterEditor extends BaseCustomWebComponentConstructorAppend {
method constructor (line 44) | constructor() {
method ready (line 49) | ready() {
method setParametersObject (line 55) | setParametersObject(value: Record<string, any>) {
method getParametersObject (line 63) | getParametersObject() {
method _remove (line 87) | _remove(index: number) {
method _add (line 92) | _add() {
FILE: packages/web-component-designer-visualization-addons/src/components/SimpleScriptEditor.ts
class SimpleScriptEditor (line 17) | class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
method constructor (line 82) | constructor() {
method ready (line 93) | async ready() {
method addPossibleCommands (line 235) | private async addPossibleCommands() {
method loadScript (line 247) | loadScript(script: Script) {
method createTreeItem (line 302) | private createTreeItem(currentItem: ScriptCommands) {
method addItem (line 313) | addItem() {
method getScriptCommands (line 320) | getScriptCommands() {
FILE: packages/web-component-designer-visualization-addons/src/components/VisualizationPropertyGrid.ts
class VisualizationPropertyGrid (line 8) | class VisualizationPropertyGrid extends PropertyGrid {
method constructor (line 15) | constructor() {
method getEditorForType (line 21) | public override async getEditorForType(property: IProperty, currentVal...
FILE: packages/web-component-designer-visualization-addons/src/helpers/BindingsHelper.ts
type SpecialValueHandler (line 9) | type SpecialValueHandler = { valueProvider: (propertyName: string, conte...
type namedBinding (line 23) | type namedBinding = [name: string, binding: VisualizationBinding];
function isLit (line 25) | function isLit(element: Element) {
function parseBindingString (line 30) | function parseBindingString(id: string) {
function getNestedProperty (line 49) | function getNestedProperty(obj, path) {
class IndirectSignal (line 61) | class IndirectSignal {
method constructor (line 74) | constructor(bindingsHelper: BindingsHelper, visualizationHandler: Visu...
method parseIndirectBinding (line 154) | private parseIndirectBinding(id: string) {
method handleValueChanged (line 165) | handleValueChanged(value: any, index: number) {
method dispose (line 188) | dispose() {
method setState (line 199) | setState(value) {
class BindingsHelper (line 206) | class BindingsHelper {
method constructor (line 210) | constructor(visualizationHandler: VisualizationHandler) {
method getChangedEventName (line 214) | getChangedEventName(element: Element, propertyName: string) {
method parseBinding (line 229) | parseBinding(element: Element, name: string, value: string, bindingTar...
method serializeBinding (line 309) | serializeBinding(element: Element, targetName: string, binding: Visual...
method getBindingAttributeName (line 481) | getBindingAttributeName(element: Element, propertyName: string, proper...
method getBindings (line 506) | *getBindings(element: Element) {
method applyAllBindings (line 534) | applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, ...
method parseCssBindings (line 572) | async parseCssBindings(sheet: string, element: Element, relativeSignal...
method parseCssBinding (line 599) | parseCssBinding(value: string, element: Element, relativeSignalPath: s...
method applyBinding (line 665) | applyBinding(element: Element, binding: namedBinding, relativeSignalPa...
method addTwoWayBinding (line 861) | private addTwoWayBinding(binding: namedBinding, element: Element, sett...
method parseValueWithType (line 901) | private static parseValueWithType(value, binding: namedBinding) {
method handleValueChanged (line 919) | handleValueChanged(element: Element, root: Element, binding: namedBind...
method camelToDotCase (line 1048) | public static camelToDotCase(text: string) {
method dotToCamelCase (line 1052) | public static dotToCamelCase(text: string) {
FILE: packages/web-component-designer-visualization-addons/src/interfaces/IScriptMultiplexValue.ts
type IScriptMultiplexValue (line 1) | interface IScriptMultiplexValue {
FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualisationElementScript.ts
type VisualisationElementScript (line 1) | interface VisualisationElementScript {
FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualizationBinding.ts
type VisualizationBinding (line 7) | interface VisualizationBinding {
FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualizationHandler.ts
type StateValue (line 2) | type StateValue = string | number | boolean | null;
type State (line 4) | interface State {
type Signal (line 8) | interface Signal {
type SignalInformation (line 12) | interface SignalInformation {
type StateChangeHandler (line 18) | type StateChangeHandler = (id: string, state: State) => void
type VisualizationHandler (line 20) | interface VisualizationHandler {
FILE: packages/web-component-designer-visualization-addons/src/interfaces/VisualizationShell.ts
type VisualizationShell (line 3) | interface VisualizationShell {
FILE: packages/web-component-designer-visualization-addons/src/scripting/Script.ts
class Script (line 3) | class Script {
FILE: packages/web-component-designer-visualization-addons/src/scripting/ScriptCommands.ts
type ScriptCommands (line 1) | type ScriptCommands = RunnableScriptCommands |
type RunnableScriptCommands (line 4) | type RunnableScriptCommands = OpenScreen | OpenUrl | OpenDialog | CloseD...
type signalTarget (line 21) | type signalTarget = 'signal' | 'property' | 'elementProperty';
type Comment (line 32) | interface Comment {
type OpenScreen (line 37) | interface OpenScreen {
type OpenDialog (line 54) | interface OpenDialog {
type ShowMessageBox (line 77) | interface ShowMessageBox {
type ShowPrompt (line 110) | interface ShowPrompt {
type CloseDialog (line 140) | interface CloseDialog {
type OpenUrl (line 150) | interface OpenUrl {
type SetSignalValue (line 161) | interface SetSignalValue {
type ToggleSignalValue (line 173) | interface ToggleSignalValue {
type ToggleSignalValueThroughList (line 184) | interface ToggleSignalValueThroughList {
type IncrementSignalValue (line 213) | interface IncrementSignalValue {
type CalculateSignalValue (line 225) | interface CalculateSignalValue {
type DecrementSignalValue (line 241) | interface DecrementSignalValue {
type SetBitInSignal (line 253) | interface SetBitInSignal {
type ClearBitInSignal (line 267) | interface ClearBitInSignal {
type ToggleBitInSignal (line 281) | interface ToggleBitInSignal {
type Javascript (line 296) | interface Javascript {
type SetElementProperty (line 307) | interface SetElementProperty {
type Delay (line 347) | interface Delay {
type Console (line 357) | interface Console {
type SwitchLanguage (line 371) | interface SwitchLanguage {
type Logout (line 377) | interface Logout {
type Login (line 382) | interface Login {
type SubscribeSignal (line 395) | interface SubscribeSignal {
type UnsubscribeSignal (line 406) | interface UnsubscribeSignal {
type WriteSignalsInGroup (line 416) | interface WriteSignalsInGroup {
type ClearSignalsInGroup (line 425) | interface ClearSignalsInGroup {
type CopySignalValuesFromFolder (line 434) | interface CopySignalValuesFromFolder {
type ExportSignalValuesAsJson (line 447) | interface ExportSignalValuesAsJson {
type ImportSignalValuesFromJson (line 464) | interface ImportSignalValuesFromJson {
type Condition (line 473) | interface Condition {
type Exit (line 494) | interface Exit {
type Label (line 499) | interface Label {
type Goto (line 505) | interface Goto {
type RunScript (line 511) | interface RunScript {
type Repeat (line 524) | interface Repeat {
FILE: packages/web-component-designer-visualization-addons/src/scripting/ScriptSystem.ts
type contextType (line 13) | type contextType = { event: Event, element: Element, root: HTMLElement, ...
type ContextCreator (line 15) | type ContextCreator = (
class ScriptSystem (line 32) | class ScriptSystem {
method constructor (line 37) | constructor(visualizationHandler: VisualizationHandler) {
method execute (line 41) | async execute(scriptCommands: ScriptCommands[], outerContext: contextT...
method getValueFromTarget (line 136) | async getValueFromTarget(target: signalTarget, name: string, context: ...
method setValueOnTarget (line 146) | async setValueOnTarget(target: signalTarget, name: string, context: co...
method runExternalScript (line 156) | async runExternalScript(name: string, type: string) {
method runScriptCommand (line 160) | async runScriptCommand<T extends ScriptCommands>(command: T, context: ...
method getTarget (line 411) | getTarget(context: contextType, targetSelectorTarget: 'element' | 'con...
method getTargetFromTargetSelector (line 426) | getTargetFromTargetSelector(context: contextType, targetSelectorTarget...
method getValue (line 438) | async getValue<T>(value: T, outerContext: contextType): Promise<T> {
method getStateOrFieldOrParameter (line 496) | async getStateOrFieldOrParameter(name: string, context: contextType) {
method parseStringWithValues (line 510) | async parseStringWithValues(text: string, context: contextType) {
method getSignalName (line 525) | getSignalName(name: string, outerContext: contextType) {
method createScriptContext (line 531) | public createScriptContext(root: HTMLElement, event: Event, element: E...
method assignAllScripts (line 535) | async assignAllScripts(
method loadAndInitJsObject (line 578) | private async loadAndInitJsObject(
method resolveHandler (line 605) | private async resolveHandler(
method bindHandler (line 673) | private bindHandler(
FILE: packages/web-component-designer-visualization-addons/src/scripting/ScriptUpgrader.ts
class ScriptUpgrades (line 4) | class ScriptUpgrades {
method upgradeScriptCommand (line 5) | static upgradeScriptCommand(scriptCommand: ScriptCommands) {
method upgradeSetElementProperty (line 12) | static upgradeSetElementProperty(scriptCommand: SetElementProperty): S...
FILE: packages/web-component-designer-visualization-addons/src/services/BindableObjectDragDropService.ts
class BindableObjectDragDropService (line 6) | class BindableObjectDragDropService implements IBindableObjectDragDropSe...
method constructor (line 7) | constructor(bindingsHelper: BindingsHelper, visualizationHandler: Visu...
method dragEnter (line 18) | dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: ...
method dragLeave (line 29) | dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: ...
method dragOver (line 38) | dragOver(designerView: IDesignerCanvas, event: DragEvent, element: Ele...
method drop (line 42) | async drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindable...
method dragOverOnProperty (line 132) | dragOverOnProperty?(event: DragEvent, property: IProperty, designItems...
method dropOnProperty (line 136) | dropOnProperty?(event: DragEvent, property: IProperty, bindableObject:...
FILE: packages/web-component-designer-visualization-addons/src/services/PropertyGridDragDropService.ts
class PropertyGridDragDropService (line 3) | class PropertyGridDragDropService implements IPropertyGridDragDropService {
method dragOverOnProperty (line 5) | dragOverOnProperty?(event: DragEvent, property: IProperty, designItems...
method dropOnProperty (line 9) | dropOnProperty?(event: DragEvent, property: IProperty, dropObject: any...
FILE: packages/web-component-designer-visualization-addons/src/services/ScriptRefactorService.ts
class ScriptRefactorService (line 5) | class ScriptRefactorService implements IRefactorService {
method getRefactorings (line 6) | getRefactorings(designItems: IDesignItem[]): (IRefactoring & { refacto...
method refactor (line 115) | refactor(refactoring: (IRefactoring & { refactor: (newValue) => void }...
FILE: packages/web-component-designer-visualization-addons/src/services/SignalPropertyEditor.ts
class SignalPropertyEditor (line 4) | class SignalPropertyEditor extends BasePropertyEditor<HTMLElement> {
method constructor (line 9) | constructor(property: IProperty, shell: VisualizationShell) {
method refreshValue (line 43) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer-visualization-addons/src/services/VisualizationBindingsRefactorService.ts
class VisualizationBindingsRefactorService (line 4) | class VisualizationBindingsRefactorService implements IRefactorService {
method getRefactorings (line 5) | getRefactorings(designItems: IDesignItem[]): IRefactoring[] {
method refactor (line 46) | refactor(refactoring: (IRefactoring & { shortName?: string, prefix?: s...
FILE: packages/web-component-designer-visualization-addons/src/services/VisualizationBindingsService.ts
class VisualizationBindingsService (line 5) | class VisualizationBindingsService implements IBindingService {
method constructor (line 6) | constructor(bindingsHelper: BindingsHelper) {
method getBindings (line 14) | getBindings(designItem: IDesignItem): (IBinding & { converter: Record<...
method setBinding (line 34) | setBinding(designItem: IDesignItem, binding: IBinding): boolean {
method clearBinding (line 55) | clearBinding(designItem: IDesignItem, propertyName: string, propertyTa...
FILE: packages/web-component-designer-visualization-addons/src/services/VisualizationEventsService.ts
class VisualizationEventsService (line 8) | class VisualizationEventsService extends EventsService {
method getPossibleEvents (line 18) | public override getPossibleEvents(designItem: IDesignItem): IEvent[] {
method getEvent (line 24) | public override getEvent(designItem: IDesignItem, name: string): IEvent {
FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/bindableObjectsBrowser/bindable-objects-browser.ts
type serviceNode (line 9) | type serviceNode = { service: IBindableObjectsService, bindable: IBindab...
class BindableObjectsBrowser (line 11) | class BindableObjectsBrowser extends BaseCustomWebComponentConstructorAp...
method constructor (line 25) | constructor() {
method initialize (line 82) | public async initialize(serviceContainer: ServiceContainer, instanceSe...
FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/paletteView/paletteTreeView.ts
class PaletteTreeView (line 9) | class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
method constructor (line 33) | constructor() {
method loadControls (line 86) | public async loadControls(serviceContainer: ServiceContainer, elements...
FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/treeView/ExpandCollapseContextMenu.ts
class ExpandCollapseContextMenu (line 5) | class ExpandCollapseContextMenu implements IContextMenuExtension {
method shouldProvideContextmenu (line 7) | public shouldProvideContextmenu(event: MouseEvent, designerView: IDesi...
method provideContextMenuItems (line 14) | public provideContextMenuItems(event: MouseEvent, designerView: IDesig...
FILE: packages/web-component-designer-widgets-wunderbaum/src/widgets/treeView/treeViewExtended.ts
type WunderbaumNode (line 8) | type WunderbaumNode = {
type treeNode (line 12) | type treeNode = { title: string, ref: IDesignItem, children?: treeNode[] };
class TreeViewExtended (line 16) | class TreeViewExtended extends BaseCustomWebComponentConstructorAppend i...
method constructor (line 91) | constructor() {
method _filterNodes (line 127) | _filterNodes() {
method _showHideAtDesignTimeState (line 141) | _showHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesignI...
method _switchHideAtDesignTimeState (line 148) | _switchHideAtDesignTimeState(img: HTMLImageElement, designItem: IDesig...
method _showLockAtDesignTimeState (line 153) | _showLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignI...
method _switchLockAtDesignTimeState (line 160) | _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesig...
method _showHideAtRunTimeState (line 165) | _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem) {
method _switchHideAtRunTimeState (line 172) | _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignIt...
method showDesignItemContextMenu (line 177) | public showDesignItemContextMenu(designItem: IDesignItem, event: Mouse...
method ready (line 191) | async ready() {
method _initWunderbaum (line 198) | private _initWunderbaum() {
method refreshNode (line 348) | private async refreshNode(node: WunderbaumNode, item: IDesignItem) {
method createTree (line 357) | public async createTree(rootItem: IDesignItem) {
method instanceServiceContainer (line 376) | public set instanceServiceContainer(value: InstanceServiceContainer) {
method selectionChanged (line 406) | public selectionChanged(event: ISelectionChangedEvent) {
method _recomputeTree (line 410) | private async _recomputeTree(rootItem: IDesignItem) {
method _getChildren (line 426) | private _getChildren(item: IDesignItem): treeNode {
method _highlight (line 441) | private _highlight(activeElements: IDesignItem[]) {
method collapseChildren (line 464) | public collapseChildren(designItem: IDesignItem) {
method expandChildren (line 473) | public expandChildren(designItem: IDesignItem) {
FILE: packages/web-component-designer-zpl/src/extensions/ZplLayoutResizeExtensionProvider.ts
class ZplLayoutResizeExtensionProvider (line 8) | class ZplLayoutResizeExtensionProvider extends ResizeExtensionProvider {
method shouldExtend (line 9) | override shouldExtend(extensionManager: IExtensionManager, designerVie...
FILE: packages/web-component-designer-zpl/src/jsBarcodeOptions.ts
type BarcodeOptions (line 1) | type BarcodeOptions = {
type BarcodeFormat (line 24) | enum BarcodeFormat {
FILE: packages/web-component-designer-zpl/src/monaco/ZplLanguage.ts
function addZplLanguageToMonaco (line 1) | function addZplLanguageToMonaco(monaco?: any) {
FILE: packages/web-component-designer-zpl/src/services/ZplImageDrop.ts
class ZplImageDrop (line 4) | class ZplImageDrop implements IExternalDragDropService {
method dragOver (line 6) | public dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): 'n...
method drop (line 12) | drop(designerCanvas: IDesignerCanvas, event: DragEvent) {
method _convertImage (line 46) | private _convertImage(img: any, name: string) {
method _imageToACS (line 68) | private _imageToACS(img, opts) {
method _rgbaToACS (line 82) | private _rgbaToACS(rgba, width, opts) {
method _monochrome (line 159) | private _monochrome(rgba, width, height, black, notrim) {
method _normal (line 221) | private _normal(mono) {
FILE: packages/web-component-designer-zpl/src/services/ZplLayoutCopyPasteService.ts
class ZplLayoutCopyPasteService (line 3) | class ZplLayoutCopyPasteService implements ICopyPasteService {
method constructor (line 4) | constructor() {
method copyItems (line 7) | async copyItems(designItems: IDesignItem[]): Promise<void> {
method getPasteItems (line 15) | async getPasteItems(serviceContainer: ServiceContainer, instanceServic...
FILE: packages/web-component-designer-zpl/src/services/ZplLayoutPlacementService.ts
class ZplLayoutPlacementService (line 3) | class ZplLayoutPlacementService extends DefaultPlacementService {
method constructor (line 5) | constructor() {
method serviceForContainer (line 9) | override serviceForContainer(container: IDesignItem) {
method canEnter (line 13) | override canEnter(container: IDesignItem, items: IDesignItem[]) {
method enterContainer (line 17) | override enterContainer(container: IDesignItem, items: IDesignItem[]) {
method leaveContainer (line 24) | override leaveContainer(container: IDesignItem, items: IDesignItem[]) {
method finishPlace (line 27) | override finishPlace(event: MouseEvent, designerCanvas: IDesignerCanva...
FILE: packages/web-component-designer-zpl/src/services/ZplParserService.ts
function getSetValue (line 10) | function getSetValue(...args) {
type image (line 16) | type image = {
class ZplParserService (line 23) | class ZplParserService implements IHtmlParserService, IHtmlWriterService {
method createTransform (line 27) | createTransform(char: string, el: HTMLElement) {
method parse (line 48) | async parse(html: string, serviceContainer: ServiceContainer, instance...
method write (line 249) | write(textWriter: ITextWriter, designItems: IDesignItem[], rootContain...
FILE: packages/web-component-designer-zpl/src/setupZplServiceContainer.ts
function createZplDesignerServiceContainer (line 9) | function createZplDesignerServiceContainer() {
FILE: packages/web-component-designer-zpl/src/widgets/views/zpl-demo-view.ts
class ZplDemoView (line 5) | class ZplDemoView extends BaseCustomWebComponentConstructorAppend implem...
method constructor (line 22) | constructor() {
method dispose (line 29) | dispose(): void { }
method display (line 31) | async display(serviceContainer: ServiceContainer, instanceServiceConta...
FILE: packages/web-component-designer-zpl/src/widgets/zpl-barcode.ts
class ZplBarcode (line 6) | class ZplBarcode extends BaseCustomWebComponentConstructorAppend {
method constructor (line 37) | constructor() {
method ready (line 43) | async ready() {
method _createOptions (line 74) | private _createOptions() {
method createZpl (line 83) | public createZpl() {
FILE: packages/web-component-designer-zpl/src/widgets/zpl-comment.ts
class ZplComment (line 3) | class ZplComment extends BaseCustomWebComponentConstructorAppend {
method constructor (line 20) | constructor() {
method ready (line 25) | async ready() {
method createZpl (line 29) | public createZpl() {
FILE: packages/web-component-designer-zpl/src/widgets/zpl-graphic-box.ts
type StrokeColor (line 4) | enum StrokeColor {
class ZplGraphicBox (line 9) | class ZplGraphicBox extends BaseCustomWebComponentConstructorAppend {
method constructor (line 36) | constructor() {
method ready (line 44) | async ready() {
method _drawSvg (line 53) | private _drawSvg() {
method createZpl (line 87) | public createZpl() {
FILE: packages/web-component-designer-zpl/src/widgets/zpl-graphic-circle.ts
type StrokeColor (line 4) | enum StrokeColor {
class ZplGraphicCircle (line 9) | class ZplGraphicCircle extends BaseCustomWebComponentConstructorAppend {
method constructor (line 34) | constructor() {
method ready (line 42) | async ready() {
method _drawSvg (line 47) | private _drawSvg() {
method createZpl (line 71) | public createZpl() {
FILE: packages/web-component-designer-zpl/src/widgets/zpl-graphic-diagonal-line.ts
type StrokeColor (line 4) | enum StrokeColor {
type Orientation (line 8) | enum Orientation {
class ZplGraphicDiagonalLine (line 13) | class ZplGraphicDiagonalLine extends BaseCustomWebComponentConstructorAp...
method constructor (line 40) | constructor() {
method ready (line 48) | async ready() {
method _drawSvg (line 53) | private _drawSvg() {
method createZpl (line 84) | public createZpl() {
FILE: packages/web-component-designer-zpl/src/widgets/zpl-image.ts
class ZplImage (line 5) | class ZplImage extends BaseCustomWebComponentConstructorAppend {
method constructor (line 41) | constructor() {
method ready (line 48) | async ready() {
method createZplImage (line 71) | public createZplImage() {
method createZpl (line 81) | public createZpl() {
method acsToCanvas (line 89) | private acsToCanvas(imageData, bytesPerRow) {
FILE: packages/web-component-designer-zpl/src/widgets/zpl-text.ts
type FontNames (line 4) | enum FontNames {
class ZplText (line 9) | class ZplText extends BaseCustomWebComponentConstructorAppend {
method constructor (line 38) | constructor() {
method ready (line 44) | async ready() {
method createZpl (line 70) | public createZpl() {
FILE: packages/web-component-designer-zpl/src/zplHelper.ts
function getZplCoordinates (line 1) | function getZplCoordinates(obj: any, alignment: 0|1|2) {
FILE: packages/web-component-designer/src/commandHandling/CommandType.ts
type CommandType (line 1) | enum CommandType {
FILE: packages/web-component-designer/src/commandHandling/IUiCommand.ts
type IUiCommand (line 3) | interface IUiCommand {
FILE: packages/web-component-designer/src/commandHandling/IUiCommandHandler.ts
type IUiCommandHandler (line 3) | interface IUiCommandHandler {
FILE: packages/web-component-designer/src/elements/controls/ColorEditor.ts
type ColorEditorMode (line 4) | type ColorEditorMode = 'rgb' | 'hsl' | 'cmyk' | 'oklab' | 'oklch';
type ColorEditorValueChangedEventArgs (line 5) | type ColorEditorValueChangedEventArgs = { newValue?: string, oldValue?: ...
type RgbaColor (line 7) | type RgbaColor = { r: number, g: number, b: number, a: number };
type HsvColor (line 8) | type HsvColor = { h: number, s: number, v: number };
class ColorEditor (line 13) | class ColorEditor extends BaseCustomWebComponentConstructorAppend {
method value (line 273) | public get value() {
method value (line 276) | public set value(value: string) {
method mode (line 290) | public get mode() {
method mode (line 293) | public set mode(value: ColorEditorMode) {
method readOnly (line 301) | public get readOnly() {
method readOnly (line 304) | public set readOnly(value: boolean) {
method disabled (line 308) | public get disabled() {
method disabled (line 311) | public set disabled(value: boolean) {
method constructor (line 315) | constructor() {
method ready (line 327) | ready() {
method _wireEvents (line 340) | private _wireEvents() {
method _startPlaneDrag (line 362) | private _startPlaneDrag(event: PointerEvent) {
method _applyPlanePointer (line 389) | private _applyPlanePointer(event: PointerEvent, preview: boolean) {
method _applyHue (line 398) | private _applyHue(preview: boolean) {
method _applyAlpha (line 405) | private _applyAlpha(preview: boolean) {
method _applyChannelInputs (line 409) | private _applyChannelInputs(preview: boolean) {
method _validateTextInput (line 430) | private _validateTextInput() {
method _applyText (line 435) | private _applyText() {
method _setColor (line 444) | private _setColor(color: RgbaColor, preview: boolean, renderChannels =...
method _commitCurrentValue (line 457) | private _commitCurrentValue() {
method _render (line 463) | private _render(renderChannels = true) {
method _renderChannelInputs (line 485) | private _renderChannelInputs() {
method _formatColor (line 493) | private _formatColor() {
method _syncHueFromColor (line 497) | private _syncHueFromColor() {
class ColorInput (line 504) | class ColorInput extends BaseCustomWebComponentConstructorAppend {
method value (line 566) | public get value() {
method value (line 569) | public set value(value: string) {
method readOnly (line 573) | public get readOnly() {
method readOnly (line 576) | public set readOnly(value: boolean) {
method disabled (line 580) | public get disabled() {
method disabled (line 583) | public set disabled(value: boolean) {
method constructor (line 589) | constructor() {
method ready (line 594) | ready() {
method disconnectedCallback (line 605) | disconnectedCallback() {
method _togglePopup (line 609) | private _togglePopup() {
method _handleButtonPointerDown (line 618) | private _handleButtonPointerDown(event: PointerEvent) {
method _handleButtonClick (line 627) | private _handleButtonClick(event: MouseEvent) {
method _handleButtonKeyDown (line 637) | private _handleButtonKeyDown(event: KeyboardEvent) {
method _openPopup (line 645) | private _openPopup() {
method _positionPopup (line 670) | private _positionPopup() {
method _handleOutsidePointer (line 686) | private _handleOutsidePointer(event: PointerEvent) {
method _handleWindowKey (line 693) | private _handleWindowKey(event: KeyboardEvent) {
method _closePopup (line 698) | private _closePopup() {
method _setValue (line 706) | private _setValue(value: string, updateAttribute: boolean) {
method _renderSwatch (line 713) | private _renderSwatch() {
function parseColor (line 719) | function parseColor(value: string): RgbaColor {
function inferColorMode (line 739) | function inferColorMode(value: string): ColorEditorMode {
function normalizeModernColorSyntax (line 755) | function normalizeModernColorSyntax(value: string) {
function normalizeFunctionBody (line 762) | function normalizeFunctionBody(name: string, body: string) {
function parseHexColor (line 776) | function parseHexColor(value: string): RgbaColor {
function parseOklabColor (line 789) | function parseOklabColor(value: string): RgbaColor {
function formatColor (line 804) | function formatColor(color: RgbaColor, mode: ColorEditorMode) {
function getChannelValues (line 827) | function getChannelValues(color: RgbaColor, mode: ColorEditorMode) {
function normalizeColor (line 872) | function normalizeColor(color: RgbaColor): RgbaColor {
function toCssRgb (line 881) | function toCssRgb(color: RgbaColor) {
function rgbToHsv (line 885) | function rgbToHsv(color: RgbaColor): HsvColor {
function hsvToRgb (line 905) | function hsvToRgb(h: number, s: number, v: number) {
function rgbToHsl (line 927) | function rgbToHsl(color: RgbaColor) {
function hslToRgb (line 950) | function hslToRgb(h: number, s: number, l: number) {
function rgbToCmyk (line 972) | function rgbToCmyk(color: RgbaColor) {
function cmykToRgb (line 987) | function cmykToRgb(c: number, m: number, y: number, k: number) {
function rgbToOklab (line 995) | function rgbToOklab(color: RgbaColor) {
function oklabToRgb (line 1009) | function oklabToRgb(lValue: number, aValue: number, bValue: number) {
function rgbToOklch (line 1020) | function rgbToOklch(color: RgbaColor) {
function oklchToRgb (line 1027) | function oklchToRgb(l: number, c: number, h: number) {
function srgbToLinear (line 1032) | function srgbToLinear(value: number) {
function linearToSrgb (line 1036) | function linearToSrgb(value: number) {
function parseNumberOrPercent (line 1040) | function parseNumberOrPercent(value: string, percentBase: number) {
function clamp (line 1044) | function clamp(value: number, min: number, max: number) {
function normalizeHue (line 1048) | function normalizeHue(value: number) {
function round (line 1052) | function round(value: number, decimals: number) {
FILE: packages/web-component-designer/src/elements/controls/DesignerTabControl.ts
type DesignerTabControlIndexChangedEventArgs (line 4) | type DesignerTabControlIndexChangedEventArgs = { newIndex: number, oldIn...
class DesignerTabControl (line 6) | class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
method constructor (line 106) | constructor() {
method _showHideHeaderItems (line 155) | private _showHideHeaderItems() {
method connectedCallback (line 178) | connectedCallback() {
method selectedIndex (line 192) | public get selectedIndex() {
method selectedIndex (line 195) | public set selectedIndex(value: number) {
method refreshItems (line 202) | public refreshItems() {
method _selectedIndexChanged (line 230) | private _selectedIndexChanged(oldIndex?: number, viaClick = false) {
FILE: packages/web-component-designer/src/elements/controls/ImageButtonListSelector.ts
class ImageButtonListSelector (line 3) | class ImageButtonListSelector extends BaseCustomWebComponentConstructorA...
method constructor (line 46) | constructor() {
method value (line 52) | public get value() {
method value (line 55) | public set value(value) {
method _updateValue (line 64) | _updateValue() {
method ready (line 80) | ready() {
FILE: packages/web-component-designer/src/elements/controls/MetricsEditor.ts
type MetricsEditorArea (line 3) | type MetricsEditorArea = 'position' | 'margin' | 'border' | 'padding' | ...
type MetricsEditorSide (line 4) | type MetricsEditorSide = 'top' | 'right' | 'bottom' | 'left' | 'width' |...
type MetricsEditorValueChangedEventArgs (line 5) | type MetricsEditorValueChangedEventArgs = {
type MetricsEditorValueMap (line 13) | type MetricsEditorValueMap = Partial<Record<MetricsEditorArea, Partial<R...
class MetricsEditor (line 62) | class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
method constructor (line 281) | constructor() {
method ready (line 291) | ready() {
method connectedCallback (line 298) | connectedCallback() {
method disconnectedCallback (line 304) | disconnectedCallback() {
method values (line 308) | public get values(): MetricsEditorValueMap {
method values (line 312) | public set values(value: MetricsEditorValueMap) {
method getPropertyName (line 317) | public getPropertyName(area: MetricsEditorArea, side: MetricsEditorSid...
method refresh (line 321) | public refresh(element: Element) {
method _wireEvents (line 350) | private _wireEvents() {
method _commitInput (line 366) | private _commitInput(input: HTMLInputElement) {
method _updateInputs (line 396) | private _updateInputs() {
method _updateInput (line 406) | private _updateInput(input: HTMLInputElement) {
method _getComputedProperty (line 412) | private _getComputedProperty(computedStyle: CSSStyleDeclaration, prope...
method _cloneValues (line 420) | private _cloneValues(values: MetricsEditorValueMap): MetricsEditorValu...
method _updateScale (line 427) | private _updateScale() {
FILE: packages/web-component-designer/src/elements/controls/NumericStyleInput.ts
type NumericStyleInputValueChangedEventArgs (line 7) | type NumericStyleInputValueChangedEventArgs = { newValue?: string, oldVa...
type NumericStyleInputPreviewFinishedEventArgs (line 8) | type NumericStyleInputPreviewFinishedEventArgs = { newValue?: string, ol...
type NumericStyleInputUnitValueConversionArgs (line 9) | type NumericStyleInputUnitValueConversionArgs = {
type NumericStyleInputMode (line 17) | type NumericStyleInputMode = 'unit' | 'fixed' | 'custom';
type NumericStyleInputDisplayState (line 19) | type NumericStyleInputDisplayState = {
class NumericStyleInput (line 30) | class NumericStyleInput extends BaseCustomWebComponentConstructorAppend {
method value (line 160) | public get value() {
method value (line 163) | public set value(value) {
method units (line 171) | public get units() {
method units (line 174) | public set units(value: string[]) {
method fixedValues (line 181) | public get fixedValues() {
method fixedValues (line 184) | public set fixedValues(value: string[]) {
method step (line 190) | public get step() {
method step (line 193) | public set step(value: number) {
method unitSteps (line 198) | public get unitSteps() {
method unitSteps (line 201) | public set unitSteps(value: Record<string, number>) {
method min (line 206) | public get min() {
method min (line 209) | public set min(value: number) {
method max (line 214) | public get max() {
method max (line 217) | public set max(value: number) {
method readOnly (line 222) | public get readOnly() {
method readOnly (line 225) | public set readOnly(value: boolean) {
method isInPreview (line 230) | public get isInPreview(): boolean {
method allowCustomValue (line 235) | public get allowCustomValue() {
method allowCustomValue (line 238) | public set allowCustomValue(value: boolean) {
method unitValueConverter (line 244) | public get unitValueConverter() {
method unitValueConverter (line 247) | public set unitValueConverter(value: (args: NumericStyleInputUnitValue...
method constructor (line 279) | constructor() {
method ready (line 290) | ready() {
method _wireEvents (line 296) | private _wireEvents() {
method _handlePointerDown (line 312) | private _handlePointerDown(event: PointerEvent) {
method _handleWindowDragPointerMove (line 332) | private _handleWindowDragPointerMove(event: PointerEvent) {
method _finishDragInteractionForPointerEvent (line 347) | private _finishDragInteractionForPointerEvent(event: PointerEvent, was...
method _finishDragInteraction (line 354) | private _finishDragInteraction(wasCancelled: boolean, pointerId?: numb...
method _handleStepperPointerDown (line 371) | private _handleStepperPointerDown(event: PointerEvent, direction: numb...
method _handleWindowStepperPointerEnd (line 391) | private _handleWindowStepperPointerEnd(event: PointerEvent) {
method _finishStepperInteraction (line 398) | private _finishStepperInteraction(wasCancelled: boolean) {
method _applySelectedMode (line 409) | private _applySelectedMode() {
method _applyTypedValue (line 465) | private _applyTypedValue() {
method _updateValue (line 489) | private _updateValue() {
method _getDisplayState (line 519) | private _getDisplayState(value: string): NumericStyleInputDisplayState {
method _createCustomDisplayState (line 570) | private _createCustomDisplayState(text: string): NumericStyleInputDisp...
method _renderSelectOptions (line 591) | private _renderSelectOptions() {
method _createOption (line 620) | private _createOption(label: string, value: string, kind: NumericStyle...
method _autoSizeSelect (line 628) | private _autoSizeSelect() {
method _applyReadonlyState (line 643) | private _applyReadonlyState() {
method _convertNumericValue (line 650) | private _convertNumericValue(parsedValue: { numberText: string, value:...
method _resolveCurrentValueForUnit (line 666) | private _resolveCurrentValueForUnit(selectedUnit: string) {
method _readEditableNumericValue (line 681) | private _readEditableNumericValue(selectedUnit: string) {
method _applyNumericValue (line 700) | private _applyNumericValue(value: number, unit: string) {
method _previewNumericValue (line 706) | private _previewNumericValue(value: number, unit: string, step?: numbe...
method _commitValue (line 713) | private _commitValue(value: string) {
method _setValue (line 717) | private _setValue(value: string, emitCommit: boolean, emitPreview: boo...
method _startPreviewSession (line 742) | private _startPreviewSession() {
method _finishPreviewSession (line 749) | private _finishPreviewSession(wasCancelled: boolean) {
method _applyStepPreview (line 770) | private _applyStepPreview(direction: number) {
method _stopStepperRepeat (line 776) | private _stopStepperRepeat() {
method _attachStepperWindowListeners (line 787) | private _attachStepperWindowListeners() {
method _attachDragWindowListeners (line 793) | private _attachDragWindowListeners() {
method _detachStepperWindowListeners (line 800) | private _detachStepperWindowListeners() {
method _detachDragWindowListeners (line 806) | private _detachDragWindowListeners() {
method _calculateDraggedStepCount (line 813) | private _calculateDraggedStepCount(pixelDelta: number) {
method _getEffectiveStep (line 822) | private _getEffectiveStep(unit?: string): number {
method _getInteractiveStepValue (line 826) | private _getInteractiveStepValue(value: number, stepCount: number, ste...
method _formatInteractiveNumericValue (line 850) | private _formatInteractiveNumericValue(value: number, step?: number) {
method _roundToStepPrecision (line 855) | private _roundToStepPrecision(value: number, step?: number) {
method _getStepPrecision (line 861) | private _getStepPrecision(step?: number) {
method _switchToUnitModeForInteraction (line 874) | private _switchToUnitModeForInteraction(): boolean {
method _isSelectedUnitMode (line 891) | private _isSelectedUnitMode() {
method _normalizeOptionValues (line 895) | private _normalizeOptionValues(values: string[]) {
method _clampNumericValue (line 899) | private _clampNumericValue(value: number) {
FILE: packages/web-component-designer/src/elements/controls/NumericStyleInputValueHelpers.ts
type ParsedNumericStyleInputValue (line 1) | type ParsedNumericStyleInputValue =
function parseNumericStyleInputValue (line 6) | function parseNumericStyleInputValue(value?: string | null): ParsedNumer...
function formatNumericStyleInputNumber (line 27) | function formatNumericStyleInputNumber(value: number, maxDecimalPlaces: ...
function combineNumericStyleInputValue (line 35) | function combineNumericStyleInputValue(numberText: string, unit: string)...
function getNumericStyleInputUnitLabel (line 42) | function getNumericStyleInputUnitLabel(unit: string): string {
function normalizeNumericStyleInputOptionValues (line 46) | function normalizeNumericStyleInputOptionValues(values?: string[]): stri...
function resolveNumericStyleInputSelectedUnit (line 53) | function resolveNumericStyleInputSelectedUnit(parsedUnit: string | undef...
function resolveNumericStyleInputStep (line 59) | function resolveNumericStyleInputStep(unitSteps: Record<string, number> ...
FILE: packages/web-component-designer/src/elements/controls/PlainScrollbar.ts
class Widget (line 5) | class Widget {
method constructor (line 35) | public constructor(host: PlainScrollbar) {
method resetInteractionState (line 65) | private resetInteractionState() {
method connectedCallback (line 72) | public connectedCallback() {
method disconnectedCallback (line 79) | public disconnectedCallback() {
method updateLayout (line 86) | public updateLayout() {
method updateStyle (line 100) | private updateStyle() {
method updateThumbPosition (line 110) | public updateThumbPosition() {
method getThroughSize (line 120) | private getThroughSize(): number {
method computeThumbMoveValue (line 124) | private computeThumbMoveValue(distancePixels: number): number {
method setThumbSize (line 132) | public setThumbSize(newThumbSize: number) {
method getThumbMinSize (line 141) | private getThumbMinSize(): number {
method getEffectiveThumbSize (line 153) | private getEffectiveThumbSize(): number {
method setValue (line 163) | public setValue(newValue: number): boolean {
method setOrientation (line 173) | public setOrientation(newOrientation: boolean): boolean {
method getCssVar (line 182) | private getCssVar(varName: string): string | undefined {
method fireEvent (line 192) | private fireEvent(eventSubType: string) {
method fireEventRepeatedly (line 197) | private fireEventRepeatedly(eventSubType: string, repeatDelay: number,...
method stopEventRepetition (line 205) | private stopEventRepetition() {
method startPointerCapture (line 214) | private startPointerCapture(element: HTMLElement, pointerId: number) {
method stopPointerCapture (line 221) | private stopPointerCapture() {
class PlainScrollbar (line 316) | class PlainScrollbar extends HTMLElement {
method constructor (line 320) | public constructor() {
method connectedCallback (line 337) | public connectedCallback() {
method disconnectedCallback (line 341) | public disconnectedCallback() {
method thumbSize (line 350) | public get thumbSize(): number {
method thumbSize (line 353) | public set thumbSize(v: number) {
method value (line 359) | public get value(): number {
method value (line 362) | public set value(v: number) {
method orientation (line 368) | public get orientation(): string {
method orientation (line 371) | public set orientation(s: string) {
method orientationBoolean (line 378) | public get orientationBoolean(): boolean {
method observedAttributes (line 384) | public static get observedAttributes() {
method attributeChangedCallback (line 388) | public attributeChangedCallback(attrName: string, _oldValue: string | ...
constant EPS (line 403) | const EPS = 1E-9;
function formatOrientation (line 526) | function formatOrientation(b: boolean): string {
function decodeOrientation (line 530) | function decodeOrientation(s: string): boolean {
function percent (line 538) | function percent(v: number): string {
function decodePxValue (line 542) | function decodePxValue(s: string): number | undefined {
FILE: packages/web-component-designer/src/elements/controls/SimpleSplitView.ts
class SimpleSplitView (line 3) | class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
method orientation (line 48) | public get orientation() {
method orientation (line 51) | public set orientation(value) {
method constructor (line 56) | constructor() {
method ready (line 61) | ready() {
FILE: packages/web-component-designer/src/elements/controls/ThicknessEditor.ts
type ThicknessEditorValueChangedEventArgs (line 3) | type ThicknessEditorValueChangedEventArgs = { newValue?: string, oldValu...
class ThicknessEditor (line 5) | class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
method valueLeft (line 72) | public get valueLeft() {
method valueLeft (line 75) | public set valueLeft(value) {
method valueTop (line 86) | public get valueTop() {
method valueTop (line 89) | public set valueTop(value) {
method valueRight (line 100) | public get valueRight() {
method valueRight (line 103) | public set valueRight(value) {
method valueBottom (line 114) | public get valueBottom() {
method valueBottom (line 117) | public set valueBottom(value) {
method _updateValue (line 130) | _updateValue() {
method ready (line 137) | ready() {
FILE: packages/web-component-designer/src/elements/documentContainer.ts
type tabIndex (line 19) | enum tabIndex {
class DocumentContainer (line 26) | class DocumentContainer extends BaseCustomWebComponentLazyAppend impleme...
method additionalStyleString (line 37) | public set additionalStyleString(style: string) {
method additionalStyleString (line 41) | public get additionalStyleString() {
method additionalStyles (line 46) | public set additionalStyles(value: CSSStyleSheet[]) {
method additionalStyles (line 50) | public get additionalStyles() {
method additionalStylesheets (line 55) | public set additionalStylesheets(stylesheets: IStylesheet[]) {
method additionalStylesheets (line 65) | public get additionalStylesheets() {
method readOnly (line 70) | get readOnly() {
method readOnly (line 73) | set readOnly(v) {
method style (line 96) | static override get style() {
method constructor (line 110) | constructor(serviceContainer: ServiceContainer, content?: string, useI...
method refreshInSplitView (line 167) | async refreshInSplitView() {
method currentView (line 176) | get currentView(): 'designer' | 'split' | 'code' | 'preview' {
method currentView (line 187) | set currentView(view: 'designer' | 'split' | 'code' | 'preview') {
method designerSelectionChanged (line 198) | designerSelectionChanged(e: ISelectionChangedEvent | ISelectionRefresh...
method designerContentChanged (line 213) | designerContentChanged() {
method dispose (line 238) | dispose(): void {
method executeCommand (line 247) | executeCommand(command: IUiCommand) {
method canExecuteCommand (line 256) | canExecuteCommand(command: IUiCommand) {
method setContentAsync (line 270) | async setContentAsync(value: string) {
method content (line 286) | set content(value: string) {
method content (line 289) | get content() {
method ready (line 300) | ready() {
method updateDesignerHtml (line 356) | private async updateDesignerHtml() {
method setCodeViewSelection (line 374) | private setCodeViewSelection(position: IStringPosition) {
method instanceServiceContainer (line 386) | public get instanceServiceContainer(): InstanceServiceContainer {
FILE: packages/web-component-designer/src/elements/helper/ArrangeHelper.ts
method arrangeElements (line 7) | public static arrangeElements(orientation: Orientation, designerCanvas: ...
method arrange (line 139) | private static arrange(element: IDesignItem, attribut: string, value: st...
method formGroup (line 143) | private static formGroup(name: string, designerCanvas: IDesignerCanvas):...
type ArrangeDirection (line 148) | enum ArrangeDirection {
FILE: packages/web-component-designer/src/elements/helper/ClipboardHelper.ts
function copyTextToClipboard (line 1) | async function copyTextToClipboard(text) {
function copyToClipboard (line 8) | async function copyToClipboard(items: [format: string, data: string][]) {
function getTextFromClipboard (line 58) | async function getTextFromClipboard(): Promise<string> {
function getFromClipboard (line 90) | async function getFromClipboard() {
FILE: packages/web-component-designer/src/elements/helper/CssAttributeParser.ts
type Token (line 2) | enum Token {
class CssEntry (line 8) | class CssEntry {
method constructor (line 9) | constructor(name: string, value: string, important: boolean) {
class CssAttributeParser (line 19) | class CssAttributeParser {
method parse (line 23) | public parse(text: string, quoteType: string = '\'') {
method createEntry (line 72) | private createEntry(name: string, value: string) {
FILE: packages/web-component-designer/src/elements/helper/CssCombiner.ts
class CssCombiner (line 1) | class CssCombiner {
method combine (line 4) | static combine(styles: Map<string, string>, globalStyles?: Map<string,...
method applyStylesToHelper (line 25) | private static applyStylesToHelper(styles: Map<string, string>) {
method combineBrowserSupportedShorthands (line 37) | private static combineBrowserSupportedShorthands(styles: Map<string, s...
method getNormalizedStyleValues (line 76) | private static getNormalizedStyleValues(styles: Map<string, string>) {
method getCandidateCoverage (line 86) | private static getCandidateCoverage(styles: Map<string, string>, origi...
method matchesNormalizedStyleValues (line 102) | private static matchesNormalizedStyleValues(styles: Map<string, string...
method readStyleValue (line 113) | private static readStyleValue(style: CSSStyleDeclaration, name: string) {
method getSerializedSize (line 120) | private static getSerializedSize(styles: Map<string, string>) {
method parseStyleDeclarationList (line 127) | private static parseStyleDeclarationList(cssText: string) {
method addStyleDeclaration (line 165) | private static addStyleDeclaration(styles: Map<string, string>, declar...
method combineBorder (line 205) | private static combineBorder(styles: Map<string, string>) {
method combineMargin (line 282) | private static combineMargin(styles: Map<string, string>) {
method combinePadding (line 302) | private static combinePadding(styles: Map<string, string>) {
method combineInset (line 322) | private static combineInset(styles: Map<string, string>) {
method combineBackground (line 339) | private static combineBackground(styles: Map<string, string>) {
method combineFont (line 391) | private static combineFont(styles: Map<string, string>) {
method checkIfStyleIsCombinable (line 423) | private static checkIfStyleIsCombinable(styles: Map<string, string>, n...
FILE: packages/web-component-designer/src/elements/helper/CssImportant.ts
function splitCssImportant (line 1) | function splitCssImportant(value: string): { value: string, important: b...
function appendCssImportant (line 9) | function appendCssImportant(value: string, important: boolean) {
FILE: packages/web-component-designer/src/elements/helper/CssUnitConverter.ts
function convertCssUnitToPixel (line 6) | function convertCssUnitToPixel(cssValue: string, target: HTMLElement, pe...
function getCssUnit (line 73) | function getCssUnit(cssValue: string) {
function convertCssUnit (line 80) | function convertCssUnit(cssValue: string | number, target: HTMLElement, ...
function getOriginalSizeBeforeTransformation (line 132) | function getOriginalSizeBeforeTransformation(element: HTMLElement): { wi...
function splitCssGridColumnSizes (line 136) | function splitCssGridColumnSizes(sizes: String) {
function getExpandedCssGridColumnSizes (line 155) | function getExpandedCssGridColumnSizes(sizes: String) {
FILE: packages/web-component-designer/src/elements/helper/DesignerStylesheetPatcher.ts
type IDesignerStylesheetPatchAttributes (line 1) | interface IDesignerStylesheetPatchAttributes {
function patchStylesheetSelectorForDesigner (line 10) | function patchStylesheetSelectorForDesigner(text: string, attributes: ID...
FILE: packages/web-component-designer/src/elements/helper/ElementHelper.ts
function inDesigner (line 7) | function inDesigner(element: Element): boolean {
function newElementFromString (line 14) | function newElementFromString(text, document: Document): Element {
type ElementDisplayType (line 21) | enum ElementDisplayType {
function instanceOf (line 27) | function instanceOf<T extends Function>(node: any, fnc: T): node is T {
function instanceOfAny (line 33) | function instanceOfAny(node: Node, ...fnc: Function[]) {
function isInline (line 40) | function isInline(element: HTMLElement): boolean {
function isInlineAfter (line 48) | function isInlineAfter(element: HTMLElement): boolean {
function getElementDisplaytype (line 56) | function getElementDisplaytype(element: HTMLElement): ElementDisplayType {
function isEmptyTextNode (line 65) | function isEmptyTextNode(node: Node): boolean {
function getActiveElement (line 69) | function getActiveElement(): Element {
function getElementOffsetsInContainer (line 80) | function getElementOffsetsInContainer(element: Element) {
function getBoundingClientRectAlsoForDisplayContents (line 94) | function getBoundingClientRectAlsoForDisplayContents(element: Element): ...
function getElementZoomFactor (line 125) | function getElementZoomFactor(element: Element): number {
function getContentBoxContentOffsets (line 137) | function getContentBoxContentOffsets(element): IPoint {
function calculateOuterRect (line 155) | function calculateOuterRect(designItems: IDesignItem[], designerCanvas: ...
FILE: packages/web-component-designer/src/elements/helper/GridHelper.ts
type IGridCellInformation (line 5) | interface IGridCellInformation {
type IGridGapInformation (line 15) | interface IGridGapInformation {
type IGridInformation (line 27) | interface IGridInformation {
type IGridCellHitResult (line 34) | interface IGridCellHitResult {
function getElementGridInformation (line 41) | function getElementGridInformation(element: HTMLElement) {
function getGridLocalPoint (line 61) | function getGridLocalPoint(designItem: IDesignItem, point: IPoint): IPoi...
function getElementLocalToCanvasMatrix (line 67) | function getElementLocalToCanvasMatrix(designItem: IDesignItem): DOMMatr...
function getGridColumnIndexFromLocalX (line 83) | function getGridColumnIndexFromLocalX(gridInformation: IGridInformation,...
function getGridColumnStartLineFromLocalX (line 98) | function getGridColumnStartLineFromLocalX(gridInformation: IGridInformat...
function getGridRowIndexFromLocalY (line 113) | function getGridRowIndexFromLocalY(gridInformation: IGridInformation, lo...
function getGridRowStartLineFromLocalY (line 127) | function getGridRowStartLineFromLocalY(gridInformation: IGridInformation...
function getGridCellFromPoint (line 141) | function getGridCellFromPoint(designItem: IDesignItem, point: IPoint, gr...
function calculateGridInformation (line 158) | function calculateGridInformation(designItem: IDesignItem): IGridInforma...
FILE: packages/web-component-designer/src/elements/helper/Helper.ts
function htmlAsString (line 4) | function htmlAsString(strings: TemplateStringsArray, ...values: any[]) {
function isAppleDevice (line 10) | function isAppleDevice() {
function sleep (line 14) | function sleep(ms): Promise<unknown> {
function exportData (line 18) | async function exportData(blob: Blob, fileName: string): Promise<void> {
function dataURItoBlob (line 31) | function dataURItoBlob(dataURI) {
function pointInRect (line 41) | function pointInRect(point: IPoint, rect: IRect) {
function removeTrailing (line 45) | function removeTrailing(text: string, char: string) {
function removeLeading (line 51) | function removeLeading(text: string, char: string) {
function requestAnimationFramePromise (line 57) | function requestAnimationFramePromise() {
function arraysEqual (line 61) | function arraysEqual<T>(a: T[], b: T[]) {
function deepValue (line 73) | function deepValue(obj, path: string, returnNullObject = false, splitter...
function setDeepValue (line 89) | function setDeepValue(obj, path: string, value, splitter = '.') {
FILE: packages/web-component-designer/src/elements/helper/ITextWriter.ts
type ITextWriter (line 1) | interface ITextWriter {
FILE: packages/web-component-designer/src/elements/helper/IndentedTextWriter.ts
class IndentedTextWriter (line 3) | class IndentedTextWriter implements ITextWriter {
method position (line 8) | public get position(): number {
method isLastCharNewline (line 12) | public isLastCharNewline() {
method levelRaise (line 16) | public levelRaise() {
method levelShrink (line 20) | public levelShrink() {
method write (line 24) | public write(text: string) {
method writeLine (line 28) | public writeLine(text: string) {
method writeIndent (line 34) | public writeIndent() {
method writeNewline (line 38) | public writeNewline() {
method getString (line 42) | public getString() {
FILE: packages/web-component-designer/src/elements/helper/KeyboardHelper.ts
function hasCommandKey (line 3) | function hasCommandKey(event: KeyboardEvent | MouseEvent | PointerEvent ...
FILE: packages/web-component-designer/src/elements/helper/LayoutHelper.ts
function filterChildPlaceItems (line 14) | function filterChildPlaceItems(items: IDesignItem[]) {
function getDesignItemCurrentPos (line 30) | function getDesignItemCurrentPos(designItem: IDesignItem, mode: 'positio...
function placeDesignItem (line 42) | function placeDesignItem(container: IDesignItem, designItem: IDesignItem...
function transformOffsetByInverseLinearMatrix (line 104) | function transformOffsetByInverseLinearMatrix(offset: IPoint, matrix: Pi...
function _placeSvgDesignItem (line 116) | function _placeSvgDesignItem(designItem: IDesignItem, offset: IPoint): b...
function roundValue (line 155) | function roundValue(designItem: IDesignItem, value: number) {
FILE: packages/web-component-designer/src/elements/helper/NpmPackageLoader.ts
class NpmPackageLoader (line 10) | class NpmPackageLoader {
method constructor (line 20) | constructor(packageSource: string = '//cdn.jsdelivr.net/npm/') {
method patchCustomElementsRegistryToHandleErrors (line 25) | static patchCustomElementsRegistryToHandleErrors() {
method loadNpmPackage (line 57) | async loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer,...
method loadDependency (line 211) | async loadDependency(dependency: string, version?: string, reportState...
method addToImportmap (line 240) | async addToImportmap(baseUrl: string, packageJsonObj: { name?: string,...
FILE: packages/web-component-designer/src/elements/helper/ObservedCustomElementsRegistry.ts
class ObservedCustomElementsRegistry (line 3) | class ObservedCustomElementsRegistry implements IDisposable {
method constructor (line 8) | constructor() {
method dispose (line 36) | dispose(): void {
method getNewElements (line 45) | getNewElements(): string[] {
FILE: packages/web-component-designer/src/elements/helper/PathDataPolyfill.ts
type PathDataM (line 1099) | type PathDataM = { type: 'M' | 'm', values: [x: number, y: number] }
type PathDataL (line 1100) | type PathDataL = { type: 'L' | 'l', values: [x: number, y: number] }
type PathDataT (line 1101) | type PathDataT = { type: 'T' | 't', values: [x: number, y: number] }
type PathDataH (line 1102) | type PathDataH = { type: 'H' | 'h', values: [x: number] }
type PathDataV (line 1103) | type PathDataV = { type: 'V' | 'v', values: [y: number] }
type PathDataZ (line 1104) | type PathDataZ = { type: 'Z' | 'z', values?: [] }
type PathDataC (line 1105) | type PathDataC = { type: 'C' | 'c', values: [x1: number, y1: number, x2:...
type PathDataS (line 1106) | type PathDataS = { type: 'S' | 's', values: [x2: number, y2: number, x: ...
type PathDataQ (line 1107) | type PathDataQ = { type: 'Q' | 'q', values: [x1: number, y1: number, x: ...
type PathDataA (line 1108) | type PathDataA = { type: 'A' | 'a', values: [rx: number, ry: number, ang...
type PathData (line 1109) | type PathData = { type: string } & (PathDataM | PathDataL | PathDataH | ...
function straightenLine (line 1111) | function straightenLine(p1: IPoint, p2: IPoint, stepDeg = 45): IPoint {
function calculateNormLegth (line 1130) | function calculateNormLegth(p1: IPoint, p2: IPoint): number {
function calculateAlpha (line 1140) | function calculateAlpha(p1: IPoint, p2: IPoint): number {
function interpolateLinePoints (line 1148) | function interpolateLinePoints(p1: IPoint, p2: IPoint, maxDistance: numb...
function moveSVGPath (line 1174) | function moveSVGPath(path: SVGPathElement, xFactor: number, yFactor: num...
function createPathD (line 1212) | function createPathD(path: PathData[]) {
type SVGGraphicsElement (line 1226) | interface SVGGraphicsElement {
type SVGPathElement (line 1231) | interface SVGPathElement {
type SVGRectElement (line 1235) | interface SVGRectElement {
type SVGCircleElement (line 1238) | interface SVGCircleElement {
type SVGEllipseElement (line 1241) | interface SVGEllipseElement {
type SVGLineElement (line 1244) | interface SVGLineElement {
type SVGPolylineElement (line 1247) | interface SVGPolylineElement {
type SVGPolygonElement (line 1250) | interface SVGPolygonElement {
FILE: packages/web-component-designer/src/elements/helper/PopupHelper.ts
function showPopup (line 1) | function showPopup(content: Element, anchorEl: HTMLElement, closedCallba...
FILE: packages/web-component-designer/src/elements/helper/QuadEdgeHandleHelper.ts
function normalize (line 3) | function normalize(vector: IPoint) {
function getQuadCenter (line 11) | function getQuadCenter(quad: DOMQuad): IPoint {
function getEdgeMidpoint (line 18) | function getEdgeMidpoint(start: IPoint, end: IPoint): IPoint {
function getOutwardNormal (line 25) | function getOutwardNormal(start: IPoint, end: IPoint, quadCenter: IPoint...
function getEdgeOffsetPoint (line 41) | function getEdgeOffsetPoint(start: IPoint, end: IPoint, quadCenter: IPoi...
FILE: packages/web-component-designer/src/elements/helper/Screenshot.ts
class Screenshot (line 4) | class Screenshot {
method _disableStream (line 10) | private static _disableStream() {
method screenshotsEnabled (line 15) | static get screenshotsEnabled() {
method enableScreenshots (line 19) | static async enableScreenshots(elementHostForVideo: Element = document...
method takeScreenshot (line 58) | static async takeScreenshot(element: Element, width: number = 100, hei...
method _sleep (line 71) | private static _sleep(timeout: number) {
FILE: packages/web-component-designer/src/elements/helper/SelectionHelper.ts
function shadowrootGetSelection (line 1) | function shadowrootGetSelection(shadowRoot: ShadowRoot): Selection | Arr...
function wrapTextNodesInSpan (line 10) | function wrapTextNodesInSpan(range: Range, spans: HTMLSpanElement[]) {
function staticRangeToRange (line 47) | function staticRangeToRange(staticRange: StaticRange) {
function wrapSelectionInSpans (line 56) | function wrapSelectionInSpans(selection: Selection | ArrayLike<StaticRan...
FILE: packages/web-component-designer/src/elements/helper/SimpleTextWriter.ts
class SimpleTextWriter (line 3) | class SimpleTextWriter implements ITextWriter {
method position (line 6) | public get position(): number {
method isLastCharNewline (line 10) | public isLastCharNewline() {
method levelRaise (line 14) | public levelRaise() {
method levelShrink (line 17) | public levelShrink() {
method write (line 20) | public write(text: string) {
method writeLine (line 24) | public writeLine(text: string) {
method writeIndent (line 28) | public writeIndent() {
method writeNewline (line 31) | public writeNewline() {
method getString (line 34) | public getString() {
FILE: packages/web-component-designer/src/elements/helper/StylesheetHelper.ts
function stylesheetFromString (line 1) | function stylesheetFromString(window: Window, text: string) {
function stylesheetToString (line 8) | function stylesheetToString(stylesheet: CSSStyleSheet) {
FILE: packages/web-component-designer/src/elements/helper/SvgHelper.ts
type ProjectiveMatrix (line 6) | type ProjectiveMatrix = [number, number, number, number, number, number,...
type SvgOverlayTransform (line 8) | interface SvgOverlayTransform {
type SvgOverlayPathOptions (line 14) | interface SvgOverlayPathOptions {
type NormalizedPathSegment (line 18) | interface NormalizedPathSegment {
type MarkerPlacement (line 25) | interface MarkerPlacement {
type SvgViewBoxTransform (line 31) | interface SvgViewBoxTransform {
function isVisualSvgElement (line 39) | function isVisualSvgElement(element: SVGElement) {
function svg (line 53) | function svg(strings: TemplateStringsArray, ...values: any[]) {
function svgAsString (line 59) | function svgAsString(strings: TemplateStringsArray, ...values: any[]) {
function isSupportedSvgGeometryElement (line 71) | function isSupportedSvgGeometryElement(element: Element): element is SVG...
function toOverlayPointFromSvgUserSpace (line 81) | function toOverlayPointFromSvgUserSpace(element: Element, designerCanvas...
function fromOverlayPointToSvgUserSpace (line 93) | function fromOverlayPointToSvgUserSpace(element: Element, designerCanvas...
function createOverlayPathDataFromSvgGeometryElement (line 107) | function createOverlayPathDataFromSvgGeometryElement(element: Element, d...
function _createOverlayPathDataWithoutMarkers (line 123) | function _createOverlayPathDataWithoutMarkers(element: Element, designer...
function _createMarkerOverlayPathData (line 232) | function _createMarkerOverlayPathData(element: Element, designerCanvas: ...
function _collectMarkerPlacements (line 277) | function _collectMarkerPlacements(element: SVGGraphicsElement): MarkerPl...
function _getNormalizedPathSegments (line 330) | function _getNormalizedPathSegments(element: SVGGraphicsElement): Normal...
function _resolveMarkerReference (line 383) | function _resolveMarkerReference(element: SVGGraphicsElement, attributeN...
function _createMarkerInstanceGroup (line 400) | function _createMarkerInstanceGroup(sourceElement: SVGGraphicsElement, p...
function _getMarkerUnitsScale (line 440) | function _getMarkerUnitsScale(sourceElement: SVGGraphicsElement, marker:...
function _createViewBoxTransform (line 449) | function _createViewBoxTransform(marker: SVGMarkerElement): SvgViewBoxTr...
function _mapMarkerPointToViewport (line 491) | function _mapMarkerPointToViewport(marker: SVGMarkerElement, viewBoxTran...
function _getAlignFactors (line 502) | function _getAlignFactors(align: number): { xAlign: number; yAlign: numb...
function _resolveMarkerAngle (line 525) | function _resolveMarkerAngle(marker: SVGMarkerElement, incomingAngle: nu...
function _parseAngle (line 538) | function _parseAngle(value: string): number {
function _bisectAngles (line 551) | function _bisectAngles(angleA: number, angleB: number): number {
function _getFirstUsableAngle (line 563) | function _getFirstUsableAngle(points: IPoint[]): number | null {
function _getLastUsableAngle (line 573) | function _getLastUsableAngle(points: IPoint[]): number | null {
function _angleBetween (line 583) | function _angleBetween(start: IPoint, end: IPoint): number | null {
function _pointsEqual (line 592) | function _pointsEqual(a: IPoint, b: IPoint): boolean {
function _getAnimatedLengthValue (line 596) | function _getAnimatedLengthValue(length: SVGAnimatedLength): number {
function _toElementReferenceBoxPoint (line 600) | function _toElementReferenceBoxPoint(element: Element, point: IPoint): I...
function _fromElementReferenceBoxPoint (line 605) | function _fromElementReferenceBoxPoint(element: Element, point: IPoint):...
function _getSvgGeometryBBoxOffset (line 610) | function _getSvgGeometryBBoxOffset(element: Element): IPoint {
function _getSvgOverlayTransform (line 619) | function _getSvgOverlayTransform(element: Element, designerCanvas: IDesi...
function _createProjectiveMatrixForQuad (line 647) | function _createProjectiveMatrixForQuad(quad: DOMQuad): ProjectiveMatrix...
function _applyProjectiveMatrix (line 690) | function _applyProjectiveMatrix(matrix: ProjectiveMatrix, x: number, y: ...
function _invertProjectiveMatrix (line 701) | function _invertProjectiveMatrix(matrix: ProjectiveMatrix): ProjectiveMa...
FILE: packages/web-component-designer/src/elements/helper/SwitchContainerHelper.ts
function switchContainer (line 4) | function switchContainer(items: IDesignItem[], newContainer: IDesignItem...
FILE: packages/web-component-designer/src/elements/helper/TextHelper.ts
function getTextWidth (line 10) | function getTextWidth(text: string, font: string) {
function getFont (line 19) | function getFont(el: Element) {
FILE: packages/web-component-designer/src/elements/helper/TouchGestureHelper.ts
class TouchGestureHelper (line 5) | class TouchGestureHelper {
method addTouchEvents (line 6) | public static addTouchEvents(element: HTMLElement) {
method constructor (line 10) | private constructor(element: HTMLElement) {
method _touchStart (line 38) | _touchStart(e: TouchEvent) {
method _touchMove (line 64) | _touchMove(e: TouchEvent) {
method _touchEnd (line 109) | _touchEnd(e: TouchEvent) {
FILE: packages/web-component-designer/src/elements/helper/TransformHelper.ts
function combineTransforms (line 8) | function combineTransforms(element: HTMLElement, actualTransforms: strin...
function transformPointByInverseMatrix (line 20) | function transformPointByInverseMatrix(point: DOMPoint, matrix: DOMMatri...
function getRotationMatrix3d (line 25) | function getRotationMatrix3d(axisOfRotation: 'x' | 'y' | 'z' | 'X' | 'Y'...
function rotateElementByMatrix3d (line 64) | function rotateElementByMatrix3d(element: HTMLElement, matrix: number[]) {
function cssMatrixToMatrixArray (line 69) | function cssMatrixToMatrixArray(cssMatrix: string) {
function getRotationAngleFromMatrix (line 79) | function getRotationAngleFromMatrix(matrixArray: number[], domMatrix: DO...
function extractTranslationFromDOMMatrix (line 88) | function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint {
function extractRotationAngleFromDOMMatrix (line 93) | function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number {
FILE: packages/web-component-designer/src/elements/helper/XmlHelper.ts
function encodeXMLChars (line 1) | function encodeXMLChars(value: string) {
function decodeXMLChars (line 9) | function decodeXMLChars(value: string) {
FILE: packages/web-component-designer/src/elements/helper/contextMenu/ContextMenu.ts
type IContextMenuOptions (line 5) | interface IContextMenuOptions {
class ContextMenu (line 13) | class ContextMenu implements IContextMenu {
method constructor (line 158) | constructor(menu: IContextMenuItem[], options?: IContextMenuOptions, c...
method reload (line 171) | reload() {
method renderLevel (line 195) | renderLevel(level: IContextMenuItem[]) {
method display (line 290) | public display(event: MouseEvent) {
method _windowResize (line 314) | _windowResize() {
method _windowDown (line 318) | _windowDown(e: MouseEvent) {
method _windowKeyUp (line 325) | _windowKeyUp(e: KeyboardEvent) {
method show (line 331) | static show(menu: IContextMenuItem[], event: MouseEvent, options?: ICo...
method close (line 337) | close() {
method closeAll (line 348) | static closeAll() {
method configurePopoverSubmenu (line 353) | private configurePopoverSubmenu(childmenu: HTMLUListElement) {
method markUndoItems (line 358) | private markUndoItems(li: HTMLLIElement) {
method closeSiblingSubmenus (line 373) | private closeSiblingSubmenus(li: HTMLLIElement) {
method hideDescendantSubmenus (line 384) | private hideDescendantSubmenus(element: HTMLElement) {
method openPopoverSubmenu (line 391) | private openPopoverSubmenu(li: HTMLLIElement, childmenu: HTMLUListElem...
method showPopover (line 396) | private showPopover(element: HTMLElement) {
method hidePopover (line 403) | private hidePopover(element?: HTMLElement) {
method isPopoverOpen (line 410) | private isPopoverOpen(element: HTMLElement) {
method positionMenu (line 414) | private positionMenu(menu: HTMLDivElement, clickCoordsX: number, click...
method positionSubmenuPopover (line 437) | private positionSubmenuPopover(li: HTMLLIElement, childmenu: HTMLUList...
FILE: packages/web-component-designer/src/elements/helper/contextMenu/IContextMenuItem.ts
type IContextMenu (line 1) | interface IContextMenu {
type IContextMenuItem (line 5) | interface IContextMenuItem {
FILE: packages/web-component-designer/src/elements/helper/getBoxQuads.global.d.ts
type Node (line 4) | interface Node {
FILE: packages/web-component-designer/src/elements/helper/getBoxQuads.js
function addPolyfill (line 44) | function addPolyfill(windowObj = window, force = false) {
function patchAdoptNode (line 82) | function patchAdoptNode(windowObj = window) {
function convertQuadFromNode (line 118) | function convertQuadFromNode(node, quad, from, options) {
function convertRectFromNode (line 140) | function convertRectFromNode(node, rect, from, options) {
function convertPointFromNode (line 162) | function convertPointFromNode(node, point, from, options) {
function transformPointBox (line 185) | function transformPointBox(point, box, style, operator) {
function clearCache (line 214) | function clearCache() {
function useCache (line 220) | function useCache() {
function getCachedComputedStyle (line 230) | function getCachedComputedStyle(element) {
function isElementNode (line 245) | function isElementNode(node) {
function getElementZoom (line 252) | function getElementZoom(element) {
function getElementZoomScaleTransform (line 278) | function getElementZoomScaleTransform(element) {
function getElementTransformWithZoom (line 294) | function getElementTransformWithZoom(element, iframes, includeZoom = tru...
function getBoxQuads (line 312) | function getBoxQuads(node, options) {
function convertViewportQuadToRelativeNode (line 656) | function convertViewportQuadToRelativeNode(quad, node, relativeTo, ifram...
function convertViewportQuadToHtmlElement (line 698) | function convertViewportQuadToHtmlElement(quad, relativeTo, iframes) {
function getPositiveAxisAlignedViewportScale (line 726) | function getPositiveAxisAlignedViewportScale(element, iframes) {
function getPositiveAxisAlignedTransformScale (line 746) | function getPositiveAxisAlignedTransformScale(style) {
function parsePositiveScaleValue (line 793) | function parsePositiveScaleValue(value) {
function parseCssMatrixValues (line 804) | function parseCssMatrixValues(transform) {
function isZeroAngleValue (line 814) | function isZeroAngleValue(value) {
function hasTransformedHtmlAncestor (line 823) | function hasTransformedHtmlAncestor(node, relativeTo, iframes) {
function toViewportRelativeDocumentElementQuad (line 838) | function toViewportRelativeDocumentElementQuad(quad, node, relativeTo, i...
function isViewportFixedAnchoredNode (line 861) | function isViewportFixedAnchoredNode(node, iframes) {
function _getTextNodeSize (line 888) | function _getTextNodeSize(matrix, targetRect, node) {
function projectPoint (line 919) | function projectPoint(point, m) {
function as2DPoint (line 927) | function as2DPoint(point) {
function getElementSize (line 937) | function getElementSize(node, matrix) {
function getSvgVisualBox (line 969) | function getSvgVisualBox(node, bbox) {
function getSvgStrokeInflation (line 985) | function getSvgStrokeInflation(node, bbox, strokeWidth) {
function getElementOffsetsInContainer (line 1018) | function getElementOffsetsInContainer(node, includeScroll, iframes) {
function getResultingTransformationBetweenElementAndAllAncestors (line 1133) | function getResultingTransformationBetweenElementAndAllAncestors(node, a...
function getParentElementIncludingSlots (line 1473) | function getParentElementIncludingSlots(node, iframes) {
function getElementCombinedTransform (line 1494) | function getElementCombinedTransform(element, iframes) {
function projectTo2D (line 1580) | function projectTo2D(m) {
function getElementPerspectiveTransform (line 1610) | function getElementPerspectiveTransform(element, iframes) {
function computeOffsetTransformMatrix (line 1637) | function computeOffsetTransformMatrix(elem) {
function parseOffsetAnchor (line 1691) | function parseOffsetAnchor(str, transformOrigin, elem) {
function parsePosition (line 1711) | function parsePosition(part, size) {
function parseOffsetDistance (line 1730) | function parseOffsetDistance(str) {
function parseAngle (line 1738) | function parseAngle(str) {
function computeOffsetPathPoint (line 1747) | function computeOffsetPathPoint(elem, offsetPath, distNorm) {
function computePathType (line 1770) | function computePathType(pathData, distNorm) {
function computeRay (line 1785) | function computeRay(str, t) {
function computeCircle (line 1815) | function computeCircle(str, t) {
function computeEllipse (line 1832) | function computeEllipse(str, t) {
function computeRect (line 1856) | function computeRect(str, t) {
function computeXYWH (line 1863) | function computeXYWH(str, t) {
function computePolygon (line 1875) | function computePolygon(str, t) {
function rectPath (line 1917) | function rectPath(top, left, right, bottom, t) {
function tokenizeCalc (line 1952) | function tokenizeCalc(input) {
function parseCalc (line 2016) | function parseCalc(tokens) {
function evalCalc (line 2088) | function evalCalc(ast, env) {
function resolveLength (line 2114) | function resolveLength(expr, element, useHeight = false) {
function parseInsetArgs (line 2136) | function parseInsetArgs(str) {
function computeInset (line 2177) | function computeInset(str, element, progress) {
function isElement (line 2228) | function isElement(value) {
function isContainingBlock (line 2237) | function isContainingBlock(css) {
function flatTreeParent (line 2251) | function flatTreeParent(element) {
function isFlatTreeInclusiveAncestor (line 2259) | function isFlatTreeInclusiveAncestor(ancestor, node) {
function ancestorTreeScopes (line 2267) | function ancestorTreeScopes(element) {
function offsetParentPolyfill (line 2285) | function offsetParentPolyfill(element) {
function offsetTopLeftPolyfill (line 2313) | function offsetTopLeftPolyfill(element, offsetTopOrLeft) {
function createsFixedContainingBlock (line 2329) | function createsFixedContainingBlock(element) {
function getNearestFixedContainingBlock (line 2351) | function getNearestFixedContainingBlock(element, iframes) {
FILE: packages/web-component-designer/src/elements/helper/w3color.ts
class w3color (line 3) | class w3color {
method toRgbString (line 20) | toRgbString() {
method toRgbaString (line 24) | toRgbaString() {
method toHwbString (line 28) | toHwbString() {
method toHwbStringDecimal (line 32) | toHwbStringDecimal() {
method toHwbaString (line 36) | toHwbaString() {
method toHslString (line 40) | toHslString() {
method toHslStringDecimal (line 44) | toHslStringDecimal() {
method toHslaString (line 48) | toHslaString() {
method toCmykString (line 52) | toCmykString() {
method toCmykStringDecimal (line 56) | toCmykStringDecimal() {
method toNcolString (line 60) | toNcolString() {
method toNcolStringDecimal (line 64) | toNcolStringDecimal() {
method toNcolaString (line 68) | toNcolaString() {
method toName (line 72) | toName() {
method toHexString (line 85) | toHexString() {
method toNameOrHexString (line 92) | toNameOrHexString() {
method toRgb (line 99) | toRgb() {
method toHsl (line 103) | toHsl() {
method toHwb (line 107) | toHwb() {
method toCmyk (line 111) | toCmyk() {
method toNcol (line 115) | toNcol() {
method isDark (line 119) | isDark(n) {
method saturate (line 124) | saturate(n) {
method desaturate (line 134) | desaturate(n) {
method lighter (line 144) | lighter(n) {
method darker (line 154) | darker(n) {
method attachValues (line 164) | attachValues(color) {
method toColorObject (line 182) | static toColorObject(c): w3color {
method colorObject (line 322) | static colorObject(rgb, a, h, s) {
method getColorArr (line 353) | static getColorArr(x) {
method roundDecimals (line 359) | static roundDecimals(c) {
method hslToRgb (line 377) | static hslToRgb(hue, sat, light) {
method hueToRgb (line 392) | static hueToRgb(t1, t2, hue) {
method hwbToRgb (line 401) | static hwbToRgb(hue, white, black) {
method cmykToRgb (line 420) | static cmykToRgb(c, m, y, k) {
method ncolToRgb (line 428) | static ncolToRgb(ncol, white, black) {
method hueToNcol (line 452) | static hueToNcol(hue) {
method ncsToRgb (line 465) | static ncsToRgb(ncs): { r: number, b: number, g: number } {
method rgbToHsl (line 582) | static rgbToHsl(r, g, b) {
method rgbToHwb (line 620) | static rgbToHwb(r, g, b) {
method rgbToCmyk (line 642) | static rgbToCmyk(r, g, b) {
method toHex (line 661) | static toHex(n) {
method w3trim (line 667) | static w3trim(x) {
method isHex (line 672) | static isHex(x) {
FILE: packages/web-component-designer/src/elements/item/BindingMode.ts
type BindingMode (line 1) | enum BindingMode {
FILE: packages/web-component-designer/src/elements/item/BindingTarget.ts
type BindingTarget (line 1) | enum BindingTarget {
FILE: packages/web-component-designer/src/elements/item/DesignItem.ts
class DesignItem (line 34) | class DesignItem implements IDesignItem {
method window (line 46) | get window() {
method document (line 52) | get document() {
method usableContainer (line 58) | get usableContainer() {
method clone (line 66) | async clone() {
method allMatching (line 79) | *allMatching(selectors: string) {
method replaceNode (line 89) | public replaceNode(newNode: Node) {
method nodeType (line 98) | public get nodeType(): NodeType {
method hasAttributes (line 107) | public get hasAttributes() {
method hasAttribute (line 110) | public hasAttribute(name: string) {
method getAttribute (line 113) | public getAttribute(name: string): string {
method attributes (line 116) | public *attributes() {
method _withoutUndoSetAttribute (line 121) | _withoutUndoSetAttribute(name: string, value: string) {
method _withoutUndoRemoveAttribute (line 132) | _withoutUndoRemoveAttribute(name: string) {
method hasStyles (line 146) | public get hasStyles() {
method hasStyle (line 149) | public hasStyle(name: string) {
method getStyle (line 155) | public getStyle(name: string) {
method isStyleImportant (line 161) | public isStyleImportant(name: string) {
method styles (line 167) | public *styles() {
method _withoutUndoSetStyle (line 172) | _withoutUndoSetStyle(name: string, value: string, important: boolean =...
method _withoutUndoRemoveStyle (line 182) | _withoutUndoRemoveStyle(name: string) {
method element (line 234) | public get element(): Element {
method name (line 238) | public get name() {
method id (line 242) | public get id(): string {
method id (line 245) | public set id(value: string) {
method isRootItem (line 256) | public get isRootItem(): boolean {
method childrenRect (line 260) | *childrenRect(selectors: string) {
method hasChildren (line 271) | public get hasChildren() {
method children (line 274) | public *children(recursive: boolean = false): IterableIterator<IDesign...
method childCount (line 284) | public get childCount(): number {
method firstChild (line 287) | public get firstChild(): IDesignItem {
method parent (line 291) | public get parent(): IDesignItem {
method indexOf (line 295) | public indexOf(designItem: IDesignItem): number {
method insertAdjacentElement (line 299) | public insertAdjacentElement(designItem: IDesignItem, where: InsertPos...
method insertChild (line 313) | public insertChild(designItem: IDesignItem, index?: number) {
method removeChild (line 317) | public removeChild(designItem: IDesignItem) {
method remove (line 320) | public remove() {
method clearChildren (line 323) | public clearChildren() {
method hasContent (line 331) | public get hasContent() {
method content (line 334) | public get content(): string {
method content (line 340) | public set content(value: string) {
method innerHTML (line 358) | public get innerHTML(): string {
method innerHTML (line 362) | public set innerHTML(value: string) {
method isEmptyTextNode (line 377) | public get isEmptyTextNode(): boolean {
method hideAtDesignTime (line 381) | public get hideAtDesignTime() {
method hideAtDesignTime (line 384) | public set hideAtDesignTime(value: boolean) {
method hideAtRunTime (line 391) | public get hideAtRunTime() {
method hideAtRunTime (line 394) | public set hideAtRunTime(value: boolean) {
method lockAtDesignTime (line 401) | public get lockAtDesignTime() {
method lockAtDesignTime (line 404) | public set lockAtDesignTime(value: boolean) {
method createDesignItemFromInstance (line 411) | public static createDesignItemFromInstance(node: Node, serviceContaine...
method updateRenderedNode (line 459) | static updateRenderedNode(serviceContainer: ServiceContainer, node: No...
method querySelectorAll (line 470) | querySelectorAll<T extends HTMLElement>(selectors: string): NodeListOf...
method removeDesignerAttributesAndStylesFromChildren (line 474) | removeDesignerAttributesAndStylesFromChildren() {
method updateChildrenFromNodesChildren (line 485) | updateChildrenFromNodesChildren() {
method _internalUpdateChildrenFromNodesChildren (line 492) | _internalUpdateChildrenFromNodesChildren() {
method editContent (line 517) | editContent() {
method editContentFinish (line 526) | editContentFinish() {
method constructor (line 538) | public constructor(node: Node, parsedNode: any, serviceContainer: Serv...
method setView (line 552) | public setView(node: Element) {
method refreshRenderedDesignItem (line 558) | public refreshRenderedDesignItem() {
method openGroup (line 563) | public openGroup(title: string): ChangeGroup {
method getOrCreateDesignItem (line 567) | public getOrCreateDesignItem(node: Node) {
method GetOrCreateDesignItem (line 571) | static GetOrCreateDesignItem(node: Node, parsedNode: any, serviceConta...
method GetDesignItem (line 582) | static GetDesignItem(node: Node): IDesignItem {
method setStyle (line 589) | public setStyle(name: string, value?: string | null, important?: boole...
method setStyleAsync (line 600) | public async setStyleAsync(name: string, value?: string | null, import...
method removeStyle (line 632) | public removeStyle(name: string) {
method updateStyleInSheetOrLocal (line 639) | public updateStyleInSheetOrLocal(name: string, value?: string | null, ...
method updateStyleInSheetOrLocalAsync (line 657) | public async updateStyleInSheetOrLocalAsync(name: string, value?: stri...
method getStyleFromSheetOrLocal (line 676) | public getStyleFromSheetOrLocal(name: string, fallback: string = null) {
method getStyleFromSheetOrLocalOrComputed (line 692) | getStyleFromSheetOrLocalOrComputed(name: string, fallback: string = nu...
method getComputedStyleProperty (line 704) | getComputedStyleProperty(name: string, fallback: string = null) {
method getComputedStyle (line 716) | getComputedStyle() {
method getAllStyles (line 725) | public getAllStyles(): IStyleRule[] {
method setAttribute (line 751) | public setAttribute(name: string, value?: string | null) {
method removeAttribute (line 755) | public removeAttribute(name: string) {
method setPropertyAndAttribute (line 760) | public setPropertyAndAttribute(name: string, value?: string | null) {
method removePropertyAndAttribute (line 768) | public removePropertyAndAttribute(name: string) {
method setProperty (line 775) | public setProperty(name: string, value?: any) { //the prop change ac...
method _insertChildInternal (line 784) | public _insertChildInternal(designItem: DesignItem, index?: number) {
method _insertChildsInternal (line 787) | public _insertChildsInternal(designItems: DesignItem[], index?: number) {
method _removeChildInternal (line 841) | public _removeChildInternal(designItem: IDesignItem) {
method getPlacementService (line 859) | getPlacementService(style?: CSSStyleDeclaration): IPlacementService {
method createDesignItemFromImageBlob (line 866) | static createDesignItemFromImageBlob(serviceContainer: ServiceContaine...
method hasForcedCss (line 879) | get hasForcedCss() {
method cssForceHover (line 883) | get cssForceHover() {
method cssForceHover (line 886) | set cssForceHover(value: boolean) {
method cssForceActive (line 894) | get cssForceActive() {
method cssForceActive (line 897) | set cssForceActive(value: boolean) {
method cssForceVisited (line 905) | get cssForceVisited() {
method cssForceVisited (line 908) | set cssForceVisited(value: boolean) {
method cssForceFocus (line 916) | get cssForceFocus() {
method cssForceFocus (line 919) | set cssForceFocus(value: boolean) {
method cssForceFocusWithin (line 927) | get cssForceFocusWithin() {
method cssForceFocusWithin (line 930) | set cssForceFocusWithin(value: boolean) {
method cssForceFocusVisible (line 938) | get cssForceFocusVisible() {
method cssForceFocusVisible (line 941) | set cssForceFocusVisible(value: boolean) {
FILE: packages/web-component-designer/src/elements/item/IBinding.ts
type IBinding (line 5) | interface IBinding {
type IBindableComplexName (line 29) | interface IBindableComplexName { //e.g. aa:$uservalue.0.name
FILE: packages/web-component-designer/src/elements/item/IDesignItem.ts
type IDesignItem (line 10) | interface IDesignItem {
FILE: packages/web-component-designer/src/elements/item/NodeType.ts
type NodeType (line 1) | enum NodeType {
FILE: packages/web-component-designer/src/elements/services/BaseServiceContainer.ts
class BaseServiceContainer (line 5) | class BaseServiceContainer<NameMap> {
method getLastService (line 9) | getLastService<K extends keyof NameMap>(service: K): NameMap[K] {
method getServices (line 16) | getServices<K extends keyof NameMap>(service: K): NameMap[K][] {
method register (line 20) | register<K extends keyof NameMap>(name: K, service: NameMap[K]) {
method registerLast (line 27) | registerLast<K extends keyof NameMap>(name: K, service: NameMap[K]) {
method registerMultiple (line 34) | registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap...
method forSomeServicesTillResult (line 43) | forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, call...
method getLastServiceWhere (line 57) | getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: ...
method getLastServiceResult (line 71) | getLastServiceResult<K extends keyof NameMap, Y>(service: K, callback:...
method getLastServiceWhereAsync (line 85) | async getLastServiceWhereAsync<K extends keyof NameMap, Y>(service: K,...
FILE: packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts
function createDefaultServiceContainer (line 121) | function createDefaultServiceContainer() {
FILE: packages/web-component-designer/src/elements/services/GlobalContext.ts
class GlobalContext (line 8) | class GlobalContext {
method constructor (line 16) | constructor(serviceContainer: ServiceContainer) {
method tool (line 20) | public set tool(tool: ITool) {
method tool (line 38) | public get tool(): ITool {
method strokeColor (line 45) | public set strokeColor(strokeColor: string) {
method strokeColor (line 52) | public get strokeColor(): string {
method strokeThickness (line 57) | public set strokeThickness(strokeThickness: string) {
method strokeThickness (line 64) | public get strokeThickness(): string {
method fillBrush (line 69) | public set fillBrush(fillBrush: string) {
method fillBrush (line 77) | public get fillBrush(): string {
FILE: packages/web-component-designer/src/elements/services/IService.ts
type IService (line 1) | interface IService {
FILE: packages/web-component-designer/src/elements/services/IServiceContainer.ts
type IServiceContainer (line 1) | interface IServiceContainer {
FILE: packages/web-component-designer/src/elements/services/InstanceServiceContainer.ts
type InstanceServiceNameMap (line 14) | interface InstanceServiceNameMap {
type IContentChangedParsed (line 21) | interface IContentChangedParsed {
type IContentChangedWithDesignItems (line 25) | interface IContentChangedWithDesignItems {
type IContentChangedChangeWithDesignItems (line 30) | interface IContentChangedChangeWithDesignItems {
type IContentChanged (line 39) | type IContentChanged = IContentChangedParsed | IContentChangedWithDesign...
class InstanceServiceContainer (line 41) | class InstanceServiceContainer extends BaseServiceContainer<InstanceServ...
method constructor (line 52) | constructor(designerCanvas: IDesignerCanvas) {
method rootDesignItem (line 57) | get rootDesignItem(): IDesignItem {
method undoService (line 61) | get undoService(): IUndoService {
method selectionService (line 65) | get selectionService(): ISelectionService {
method stylesheetService (line 69) | get stylesheetService(): IStylesheetService {
method designItemDocumentPositionService (line 73) | get designItemDocumentPositionService(): IDesignItemDocumentPositionSe...
FILE: packages/web-component-designer/src/elements/services/ServiceContainer.ts
type ServiceNameMap (line 60) | interface ServiceNameMap {
class ServiceContainer (line 104) | class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
method removeDesignerExtensionOfType (line 118) | removeDesignerExtensionOfType(container: (ExtensionType | string), lam...
method bindingService (line 149) | get bindingService(): IBindingService {
method bindableObjectsServices (line 153) | get bindableObjectsServices(): IBindableObjectsService[] {
method bindableObjectDragDropService (line 157) | get bindableObjectDragDropService(): IBindableObjectDragDropService {
method propertyGridDragDropService (line 161) | get propertyGridDragDropService(): IPropertyGridDragDropService {
method dragDropService (line 165) | get dragDropService(): IDragDropService {
method elementInteractionServices (line 169) | get elementInteractionServices(): IElementInteractionService[] {
method propertiesServices (line 173) | get propertiesServices(): IPropertiesService[] {
method attachedPropertyServices (line 177) | get attachedPropertyServices(): IPropertiesService[] {
method propertyGroupService (line 181) | get propertyGroupService(): IPropertyGroupsService {
method containerServices (line 185) | get containerServices(): IPlacementService[] {
method snaplinesProviderService (line 189) | get snaplinesProviderService(): ISnaplinesProviderService {
method elementsServices (line 193) | get elementsServices(): IElementsService[] {
method eventsService (line 197) | get eventsService(): IEventsService[] {
method instanceServices (line 201) | get instanceServices(): IInstanceService[] {
method propertyEditorTypesServices (line 205) | get propertyEditorTypesServices(): IPropertyEditorTypesService[] {
method htmlWriterService (line 209) | get htmlWriterService(): IHtmlWriterService {
method htmlParserService (line 213) | get htmlParserService(): IHtmlParserService {
method renderedDesignItemServices (line 217) | get renderedDesignItemServices(): IRenderedDesignItemService[] {
method intializationService (line 221) | get intializationService(): IIntializationService {
method elementAtPointService (line 225) | get elementAtPointService(): IElementAtPointService {
method externalDragDropService (line 229) | get externalDragDropService(): IExternalDragDropService {
method copyPasteService (line 233) | get copyPasteService(): ICopyPasteService {
method modelCommandService (line 237) | get modelCommandService(): IModelCommandService {
method demoProviderService (line 241) | get demoProviderService(): IDemoProviderService {
method designItemService (line 245) | get designItemService(): IDesignItemService {
method configUiServices (line 249) | get configUiServices(): IConfigUiService[] {
method refactorServices (line 253) | get refactorServices(): IRefactorService[] {
method deletionService (line 257) | get deletionService(): IDeletionService {
method referencesChangedService (line 261) | get referencesChangedService(): IReferencesChangedService {
method miniatureViewService (line 265) | get miniatureViewService(): IMiniatureViewService {
method pngCreatorService (line 269) | get pngCreatorService(): IPngCreatorService {
method searchService (line 273) | get searchService(): ISearchService {
method editorTypesServices (line 277) | get editorTypesServices(): IEditorTypeService[] {
FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectType.ts
type BindableObjectType (line 1) | enum BindableObjectType {
FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectsTarget.ts
type BindableObjectsTarget (line 1) | type BindableObjectsTarget = 'itemsView' | 'binding' | 'script' | 'prope...
FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObject.ts
type IBindableObject (line 3) | interface IBindableObject<T> {
FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectDragDropService.ts
type IBindableObjectDragDropService (line 6) | interface IBindableObjectDragDropService {
FILE: packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectsService.ts
type IBindableObjectsService (line 5) | interface IBindableObjectsService {
FILE: packages/web-component-designer/src/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.ts
class BaseCustomWebcomponentBindingsService (line 8) | class BaseCustomWebcomponentBindingsService implements IBindingService {
method getBindings (line 12) | getBindings(designItem: IDesignItem): IBinding[] {
method setBinding (line 59) | setBinding(designItem: IDesignItem, binding: IBinding): boolean {
method clearBinding (line 87) | clearBinding(designItem: IDesignItem, propertyName: string, propertyTa...
FILE: packages/web-component-designer/src/elements/services/bindingsService/IBindingService.ts
type IBindingService (line 10) | interface IBindingService {
FILE: packages/web-component-designer/src/elements/services/bindingsService/SpecialTagsBindingService.ts
class SpecialTagsBindingService (line 10) | class SpecialTagsBindingService implements IBindingService {
method constructor (line 19) | constructor() {
method getBindings (line 22) | getBindings(designItem: IDesignItem): IBinding[] {
method _parseBindingElement (line 41) | private _parseBindingElement(b: Element): IBinding {
method setBinding (line 51) | setBinding(designItem: IDesignItem, binding: IBinding): boolean {
method clearBinding (line 55) | clearBinding(designItem: IDesignItem, propertyName: string, propertyTa...
FILE: packages/web-component-designer/src/elements/services/collaborationService/CollaborationNodeIndex.ts
type CollaborationNodeIndexCache (line 4) | type CollaborationNodeIndexCache = {
function buildCache (line 11) | function buildCache(rootDesignItem: IDesignItem): CollaborationNodeIndex...
function getCache (line 36) | function getCache(rootDesignItem: IDesignItem, cache?: Record<string | s...
function getCollaborationNodeIndex (line 46) | function getCollaborationNodeIndex(designItem: IDesignItem, cache?: Reco...
function getCollaborationNodeIndexes (line 54) | function getCollaborationNodeIndexes(designItems: IDesignItem[], cache?:...
function getDesignItemByCollaborationNodeIndex (line 61) | function getDesignItemByCollaborationNodeIndex(rootDesignItem: IDesignIt...
FILE: packages/web-component-designer/src/elements/services/collaborationService/ICollaborationService.ts
type CollaborationConnectionState (line 6) | type CollaborationConnectionState = 'disconnected' | 'connecting' | 'con...
type ICollaborationPeerPresence (line 8) | interface ICollaborationPeerPresence {
type ICollaborationComment (line 20) | interface ICollaborationComment {
type ICollaborationSession (line 31) | interface ICollaborationSession {
type ICollaborationStateChangedEvent (line 37) | interface ICollaborationStateChangedEvent {
type ICollaborationSelectionEvent (line 42) | interface ICollaborationSelectionEvent {
type ICollaborationDocumentSnapshot (line 51) | interface ICollaborationDocumentSnapshot {
type ICollaborationRemoteChange (line 57) | interface ICollaborationRemoteChange {
type ICollaborationPeersChangedEvent (line 62) | interface ICollaborationPeersChangedEvent {
type ICollaborationCommentsChangedEvent (line 69) | interface ICollaborationCommentsChangedEvent {
type ICollaborationTransport (line 76) | interface ICollaborationTransport {
type ICollaborationService (line 87) | interface ICollaborationService extends IService {
FILE: packages/web-component-designer/src/elements/services/configUiService/IConfigUiService.ts
type IConfigUiService (line 3) | interface IConfigUiService {
FILE: packages/web-component-designer/src/elements/services/copyPasteService/CopyPasteAsJsonService.ts
type ICopyPasteJsonData (line 11) | interface ICopyPasteJsonData {
type IClipboardPasteData (line 16) | interface IClipboardPasteData {
class CopyPasteAsJsonService (line 22) | class CopyPasteAsJsonService implements ICopyPasteService {
method copyItems (line 23) | async copyItems(designItems: IDesignItem[]): Promise<void> {
method getPasteItems (line 31) | async getPasteItems(serviceContainer: ServiceContainer, instanceServic...
method _readClipboardPasteData (line 42) | private async _readClipboardPasteData(): Promise<IClipboardPasteData> {
method _parseJsonClipboardData (line 77) | private _parseJsonClipboardData(data: string): ICopyPasteJsonData | nu...
method _tryReadClipboardType (line 85) | private async _tryReadClipboardType(item: ClipboardItem, type: string)...
FILE: packages/web-component-designer/src/elements/services/copyPasteService/CopyPasteService.ts
class CopyPasteService (line 12) | class CopyPasteService implements ICopyPasteService {
method copyItems (line 13) | async copyItems(designItems: IDesignItem[]): Promise<void> {
method getPasteItems (line 20) | async getPasteItems(serviceContainer: ServiceContainer, instanceServic...
FILE: packages/web-component-designer/src/elements/services/copyPasteService/ICopyPasteService.ts
type ICopyPasteService (line 6) | interface ICopyPasteService {
FILE: packages/web-component-designer/src/elements/services/copyPasteService/PasteFormatSnapshot.ts
type PasteFormatKind (line 5) | type PasteFormatKind = typeof pasteFormatKinds[number];
type IPasteFormatEntry (line 7) | interface IPasteFormatEntry {
type IPasteFormatSnapshot (line 12) | interface IPasteFormatSnapshot {
type StyleArrayLike (line 20) | type StyleArrayLike = Pick<CSSStyleDeclaration, 'getPropertyValue' | 'le...
type StyleEntries (line 21) | type StyleEntries = Iterable<[name: string, value: string]>;
function isBorderProperty (line 45) | function isBorderProperty(name: string): boolean {
function isBackgroundProperty (line 49) | function isBackgroundProperty(name: string): boolean {
function isTransformProperty (line 53) | function isTransformProperty(name: string): boolean {
function isTextProperty (line 59) | function isTextProperty(name: string): boolean {
function collectEntries (line 65) | function collectEntries(style: StyleArrayLike, predicate: (name: string)...
function createPasteFormatSnapshotFromNormalizedEntries (line 87) | function createPasteFormatSnapshotFromNormalizedEntries(entries: IPasteF...
function createPasteFormatSnapshot (line 110) | function createPasteFormatSnapshot(style: StyleArrayLike): IPasteFormatS...
function createPasteFormatSnapshotFromEntries (line 115) | function createPasteFormatSnapshotFromEntries(entries: StyleEntries): IP...
function getPasteFormatEntries (line 137) | function getPasteFormatEntries(snapshot: IPasteFormatSnapshot, kind: Pas...
FILE: packages/web-component-designer/src/elements/services/deletionService/DeletionService.ts
class DeletionService (line 5) | class DeletionService implements IDeletionService {
method removeItems (line 6) | public removeItems(items: IDesignItem[]) {
FILE: packages/web-component-designer/src/elements/services/deletionService/IDeletionService.ts
type IDeletionService (line 3) | interface IDeletionService {
FILE: packages/web-component-designer/src/elements/services/demoProviderService/IDemoProviderService.ts
type IDemoProviderService (line 4) | interface IDemoProviderService {
FILE: packages/web-component-designer/src/elements/services/demoProviderService/IframeDemoProviderService.ts
class IframeDemoProviderService (line 6) | class IframeDemoProviderService implements IDemoProviderService {
method provideDemo (line 7) | provideDemo(container: HTMLElement, serviceContainer: ServiceContainer...
FILE: packages/web-component-designer/src/elements/services/demoProviderService/SimpleDemoProviderService.ts
class SimpleDemoProviderService (line 6) | class SimpleDemoProviderService implements IDemoProviderService {
method provideDemo (line 7) | async provideDemo(container: HTMLElement, serviceContainer: ServiceCon...
FILE: packages/web-component-designer/src/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.ts
class DesignItemDocumentPositionService (line 7) | class DesignItemDocumentPositionService implements IDesignItemDocumentPo...
method constructor (line 14) | constructor(designerCanvas: IDesignerCanvas) { }
method setPosition (line 16) | setPosition(designItem: IDesignItem, position: IStringPosition) {
method getPosition (line 20) | getPosition(designItem: IDesignItem): IStringPosition {
method clearSourceParts (line 24) | clearSourceParts(): void {
method addSourcePart (line 30) | addSourcePart(sourcePart: ISourcePart): void {
method addSourceParts (line 51) | addSourceParts(sourceParts: ISourcePart[]): void {
method getSourcePartAt (line 56) | getSourcePartAt(position: number): ISourcePart {
method getSourceParts (line 69) | getSourceParts(designItem: IDesignItem): ISourcePart[] {
method getSourcePartPosition (line 73) | getSourcePartPosition(designItem: IDesignItem, key: string): IStringPo...
FILE: packages/web-component-designer/src/elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.ts
type IDesignItemDocumentPositionService (line 5) | interface IDesignItemDocumentPositionService {
FILE: packages/web-component-designer/src/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.ts
class BaseCustomWebcomponentDesignItemService (line 7) | class BaseCustomWebcomponentDesignItemService extends DesignItemService {
method createDesignItem (line 8) | override createDesignItem(node: Node, parsedNode: any, serviceContaine...
method instanciateNode (line 28) | instanciateNode(parent: Element, node: Node, append = false): Element {
FILE: packages/web-component-designer/src/elements/services/designItemService/DesignItemService.ts
class DesignItemService (line 7) | class DesignItemService implements IDesignItemService {
method createDesignItem (line 8) | createDesignItem(node: Node, parsedNode: any, serviceContainer: Servic...
method handleSpecialAttributes (line 12) | handleSpecialAttributes(attributeName: string, designItem: IDesignItem) {
FILE: packages/web-component-designer/src/elements/services/designItemService/IDesignItemService.ts
type IDesignItemService (line 5) | interface IDesignItemService {
FILE: packages/web-component-designer/src/elements/services/designerAddons/IDesignerAddonJson.ts
type IDesignerAddonJson (line 1) | interface IDesignerAddonJson {
FILE: packages/web-component-designer/src/elements/services/dragDropService/DragDropService.ts
class DragDropService (line 10) | class DragDropService implements IDragDropService {
method constructor (line 16) | constructor() {
method dragEnter (line 32) | public dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent) {
method dragLeave (line 35) | public dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent) {
method dragOver (line 42) | public async dragOver(designerCanvas: IDesignerCanvas, event: DragEven...
method drop (line 76) | public async drop(designerCanvas: IDesignerCanvas, event: DragEvent) {
method getPossibleContainerForDragDrop (line 109) | public getPossibleContainerForDragDrop(designerCanvas: IDesignerCanvas...
FILE: packages/web-component-designer/src/elements/services/dragDropService/ExternalDragDropService.ts
class ExternalDragDropService (line 6) | class ExternalDragDropService implements IExternalDragDropService {
method dragOver (line 8) | public dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): 'n...
method drop (line 16) | async drop(designerCanvas: IDesignerCanvas, event: DragEvent) {
FILE: packages/web-component-designer/src/elements/services/dragDropService/IDragDropService.ts
type IDragDropService (line 5) | interface IDragDropService {
FILE: packages/web-component-designer/src/elements/services/dragDropService/IExternalDragDropService.ts
type IExternalDragDropService (line 3) | interface IExternalDragDropService {
FILE: packages/web-component-designer/src/elements/services/dragDropService/IPropertyGridDragDropService.ts
type IPropertyGridDragDropService (line 4) | interface IPropertyGridDragDropService {
FILE: packages/web-component-designer/src/elements/services/elementAtPointService/ElementAtPointService.ts
class ElementAtPointService (line 5) | class ElementAtPointService implements IElementAtPointService {
method getElementAtPoint (line 6) | getElementAtPoint(designerCanvas: IDesignerCanvas, point: IPoint) {
FILE: packages/web-component-designer/src/elements/services/elementAtPointService/IElementAtPointService.ts
type IElementAtPointService (line 5) | interface IElementAtPointService extends IService {
FILE: packages/web-component-designer/src/elements/services/elementInteractionService/IElementInteractionService.ts
type IElementInteractionService (line 4) | interface IElementInteractionService extends IService {
FILE: packages/web-component-designer/src/elements/services/elementsService/IElementDefinition.ts
type IElementDefinition (line 4) | interface IElementDefinition {
FILE: packages/web-component-designer/src/elements/services/elementsService/IElementsJson.ts
type IElementsJson (line 3) | interface IElementsJson {
FILE: packages/web-component-designer/src/elements/services/elementsService/IElementsService.ts
type IElementsService (line 5) | interface IElementsService extends IService {
FILE: packages/web-component-designer/src/elements/services/elementsService/JsonFileElementsService.ts
class JsonFileElementsService (line 7) | class JsonFileElementsService implements IElementsService {
method name (line 9) | get name() { return this._name; }
method getElements (line 15) | public getElements(): Promise<IElementDefinition[]> {
method constructor (line 25) | constructor(name: string, file: string|URL) {
method isIElementDefintion (line 50) | private isIElementDefintion(object: string | IElementDefinition): obje...
FILE: packages/web-component-designer/src/elements/services/elementsService/PreDefinedElementsService.ts
class PreDefinedElementsService (line 5) | class PreDefinedElementsService implements IElementsService {
method name (line 7) | get name() { return this._name; }
method getElements (line 11) | public getElements(): Promise<IElementDefinition[]> {
method constructor (line 15) | constructor(name: string, data: IElementsJson) {
method isIElementDefintion (line 27) | private isIElementDefintion(object: string | IElementDefinition): obje...
FILE: packages/web-component-designer/src/elements/services/elementsService/WebcomponentManifestElementsService.ts
class WebcomponentManifestElementsService (line 5) | class WebcomponentManifestElementsService implements IElementsService {
method name (line 8) | get name() { return this._name; }
method constructor (line 15) | constructor(name: string, importPrefix: string, manifest: any) {
method _parseManifest (line 21) | private _parseManifest(manifest: any) {
method getElements (line 44) | async getElements(): Promise<IElementDefinition[]> {
FILE: packages/web-component-designer/src/elements/services/eventsService/EventsService.ts
class EventsService (line 5) | class EventsService implements IEventsService {
method constructor (line 7) | constructor() {
method isHandledElementFromEventsService (line 106) | isHandledElementFromEventsService(designItem: IDesignItem): boolean {
method getPossibleEvents (line 110) | public getPossibleEvents(designItem: IDesignItem): IEvent[] {
method getEvent (line 121) | public getEvent(designItem: IDesignItem, name: string): IEvent {
FILE: packages/web-component-designer/src/elements/services/eventsService/IEvent.ts
type IEvent (line 1) | interface IEvent {
FILE: packages/web-component-designer/src/elements/services/eventsService/IEventsService.ts
type IEventsService (line 4) | interface IEventsService {
FILE: packages/web-component-designer/src/elements/services/eventsService/WebcomponentManifestEventsService.ts
class WebcomponentManifestEventsService (line 5) | class WebcomponentManifestEventsService extends EventsService {
method isHandledElementFromEventsService (line 7) | override isHandledElementFromEventsService(designItem: IDesignItem): b...
method getPossibleEvents (line 11) | override getPossibleEvents(designItem: IDesignItem): IEvent[] {
method getEvent (line 15) | override getEvent(designItem: IDesignItem, name: string): IEvent {
method constructor (line 22) | constructor(name: string, manifest: any) {
method _parseManifest (line 27) | private _parseManifest(manifest) {
FILE: packages/web-component-designer/src/elements/services/htmlParserService/DefaultHtmlParserService.ts
class DefaultHtmlParserService (line 9) | class DefaultHtmlParserService implements IHtmlParserService {
method parse (line 10) | async parse(html: string, serviceContainer: ServiceContainer, instance...
method createDesignItems (line 32) | public createDesignItems(elements: NodeListOf<ChildNode> | Node[] | HT...
method _createDesignItemsRecursive (line 40) | private _createDesignItemsRecursive(node: Node, serviceContainer: Serv...
FILE: packages/web-component-designer/src/elements/services/htmlParserService/IHtmlParserService.ts
type IHtmlParserService (line 6) | interface IHtmlParserService extends IService {
FILE: packages/web-component-designer/src/elements/services/htmlWriterService/AbstractHtmlWriterService.ts
method constructor (line 15) | constructor(options?: IHtmlWriterOptions) {
method writeAttributes (line 26) | writeAttributes(indentedTextWriter: ITextWriter, designItem: IDesignItem...
method _writeAttributeWithValue (line 75) | private _writeAttributeWithValue(indentedTextWriter: ITextWriter, design...
method _addAttributeSourcePart (line 101) | private _addAttributeSourcePart(designItem: IDesignItem, attributeName: ...
method writeStyles (line 111) | writeStyles(indentedTextWriter: ITextWriter, designItem: IDesignItem) {
FILE: packages/web-component-designer/src/elements/services/htmlWriterService/FormatingHtmlWriterService.ts
type ElementContainerType (line 13) | enum ElementContainerType {
type IWriteContext (line 19) | interface IWriteContext {
class FormatingHtmlWriterService (line 29) | class FormatingHtmlWriterService implements IHtmlWriterService {
method constructor (line 32) | constructor(options?: IHtmlWriterOptions) {
method writeAttributes (line 41) | private writeAttributes(writeContext: IWriteContext, designItem: IDesi...
method writeStyles (line 59) | private writeStyles(writeContext: IWriteContext, designItem: IDesignIt...
method _writeTextNode (line 76) | private _writeTextNode(writeContext: IWriteContext, designItem: IDesig...
method _normalizeInlineTextContent (line 88) | private _normalizeInlineTextContent(content: string) {
method _writeCommentNode (line 99) | private _writeCommentNode(writeContext: IWriteContext, designItem: IDe...
method _writeElementNode (line 103) | private _writeElementNode(writeContext: IWriteContext, designItem: IDe...
method _writeDesignItemList (line 150) | private _writeDesignItemList(currentElementDisplayType: ElementDisplay...
method _writeNewlineAndIntend (line 166) | private _writeNewlineAndIntend(writeContext: IWriteContext) {
method _writeInternal (line 171) | private _writeInternal(writeContext: IWriteContext, designItem: IDesig...
method getContainerType (line 186) | getContainerType(element: HTMLElement): ElementContainerType {
method write (line 195) | write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem...
FILE: packages/web-component-designer/src/elements/services/htmlWriterService/HtmlWriterService.ts
class HtmlWriterService (line 9) | class HtmlWriterService extends AbstractHtmlWriterService {
method constructor (line 10) | constructor(options?: IHtmlWriterOptions) {
method _conditionalyWriteIndent (line 14) | private _conditionalyWriteIndent(indentedTextWriter: ITextWriter, desi...
method _conditionalyWriteIndentBefore (line 26) | private _conditionalyWriteIndentBefore(indentedTextWriter: ITextWriter...
method _conditionalyWriteNewline (line 37) | private _conditionalyWriteNewline(indentedTextWriter: ITextWriter, des...
method write (line 48) | write(indentedTextWriter: ITextWriter, designItems: IDesignItem[], roo...
method internalWrite (line 57) | private internalWrite(indentedTextWriter: ITextWriter, designItem: IDe...
method writeTextNode (line 130) | private writeTextNode(indentedTextWriter: ITextWriter, designItem: IDe...
method _hasInlineParent (line 152) | private _hasInlineParent(designItem: IDesignItem) {
method _normalizeInlineTextContent (line 156) | private _normalizeInlineTextContent(content: string) {
method _isInlineContainer (line 167) | private _isInlineContainer(designItem: IDesignItem) {
method _isInlineElement (line 171) | private _isInlineElement(element: Element | null) {
FILE: packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterOptions.ts
type IHtmlWriterOptions (line 1) | interface IHtmlWriterOptions {
FILE: packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterService.ts
type IHtmlWriterService (line 5) | interface IHtmlWriterService {
FILE: packages/web-component-designer/src/elements/services/htmlWriterService/IStringPosition.ts
type IStringPosition (line 1) | interface IStringPosition {
FILE: packages/web-component-designer/src/elements/services/htmlWriterService/SimpleHtmlWriterService.ts
type ElementContainerType (line 12) | enum ElementContainerType {
type IWriteContext (line 17) | interface IWriteContext {
class SimpleHtmlWriterService (line 24) | class SimpleHtmlWriterService implements IHtmlWriterService {
method constructor (line 27) | constructor(options?: IHtmlWriterOptions) {
method writeAttributes (line 36) | protected writeAttributes(writeContext: IWriteContext, designItem: IDe...
method writeStyles (line 54) | protected writeStyles(writeContext: IWriteContext, designItem: IDesign...
method _writeTextNode (line 71) | private _writeTextNode(writeContext: IWriteContext, designItem: IDesig...
method _writeCommentNode (line 77) | private _writeCommentNode(writeContext: IWriteContext, designItem: IDe...
method _writeElementNode (line 81) | private _writeElementNode(writeContext: IWriteContext, designItem: IDe...
method _writeDesignItemList (line 104) | private _writeDesignItemList(currentElementDisplayType: ElementDisplay...
method _writeInternal (line 110) | private _writeInternal(writeContext: IWriteContext, designItem: IDesig...
method write (line 119) | write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem...
FILE: packages/web-component-designer/src/elements/services/initializationService/IIntializationService.ts
type IIntializationService (line 4) | interface IIntializationService {
FILE: packages/web-component-designer/src/elements/services/instanceService/DefaultInstanceService.ts
class DefaultInstanceService (line 12) | class DefaultInstanceService implements IInstanceService {
method getElement (line 13) | async getElement(definition: IElementDefinition, serviceContainer: Ser...
FILE: packages/web-component-designer/src/elements/services/instanceService/IDesignerInstance.ts
type IDesignerInstance (line 1) | interface IDesignerInstance {
FILE: packages/web-component-designer/src/elements/services/instanceService/IInstanceService.ts
type IInstanceService (line 7) | interface IInstanceService extends IService {
FILE: packages/web-component-designer/src/elements/services/manifestParsers/IOldCustomElementsManifest.ts
type IOldCustomElementsManifest (line 1) | interface IOldCustomElementsManifest {
type IOldCustomElementsManifestTag (line 6) | interface IOldCustomElementsManifestTag {
type IOldCustomElementsManifestAttribute (line 15) | interface IOldCustomElementsManifestAttribute {
type IOldCustomElementsManifestProperty (line 22) | interface IOldCustomElementsManifestProperty {
FILE: packages/web-component-designer/src/elements/services/manifestParsers/OldCustomElementsManifestLoader.ts
class OldCustomElementsManifestLoader (line 10) | class OldCustomElementsManifestLoader {
method loadManifest (line 11) | public static async loadManifest(serviceContainer: ServiceContainer, n...
FILE: packages/web-component-designer/src/elements/services/manifestParsers/WebcomponentManifestParserService.ts
class WebcomponentManifestParserService (line 14) | class WebcomponentManifestParserService extends AbstractPropertiesServic...
method getRefreshMode (line 16) | public override getRefreshMode(designItem: IDesignItem) {
method name (line 21) | get name() { return this._name; }
method constructor (line 31) | constructor(name: string, fileOrObject: string | object, importPrefix ...
method _parseManifest (line 64) | private _parseManifest() {
method getElements (line 101) | async getElements(): Promise<IElementDefinition[]> {
method isHandledElement (line 112) | override isHandledElement(designItem: IDesignItem): boolean {
method getProperties (line 118) | override async getProperties(designItem: IDesignItem): Promise<IProper...
method getProperty (line 122) | override async getProperty(designItem: IDesignItem, name: string): Pro...
method getPropertyTarget (line 126) | override getPropertyTarget(designItem: IDesignItem, property: IPropert...
method isHandledElementFromEventsService (line 130) | public isHandledElementFromEventsService(designItem: IDesignItem): boo...
method getPossibleEvents (line 136) | public getPossibleEvents(designItem: IDesignItem): IEvent[] {
method getEvent (line 140) | public getEvent(designItem: IDesignItem, name: string): IEvent {
FILE: packages/web-component-designer/src/elements/services/miniatureViewService/IMiniatureViewService.ts
type IMiniatureViewService (line 3) | interface IMiniatureViewService {
FILE: packages/web-component-designer/src/elements/services/miniatureViewService/MiniatureViewService.ts
class MiniatureViewService (line 4) | class MiniatureViewService implements IMiniatureViewService {
method provideMiniatureView (line 5) | public async provideMiniatureView(designerCanvas: IDesignerCanvas): Pr...
FILE: packages/web-component-designer/src/elements/services/modelCommandService/DefaultModelCommandService.ts
class DefaultModelCommandService (line 9) | class DefaultModelCommandService implements IModelCommandService {
method canExecuteCommand (line 10) | canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand...
method executeCommand (line 33) | async executeCommand(designerCanvas: IDesignerCanvas, command: IUiComm...
FILE: packages/web-component-designer/src/elements/services/modelCommandService/IModelCommandService.ts
type IModelCommandService (line 6) | interface IModelCommandService extends IService {
FILE: packages/web-component-designer/src/elements/services/multiplayerService/IMultiplayerService.ts
type IMultiplayerService (line 3) | interface IMultiplayerService {
type userInfo (line 8) | type userInfo = {
type userContext (line 13) | type userContext = {
type cursor (line 17) | type cursor = {
FILE: packages/web-component-designer/src/elements/services/multiplayerService/MultiplayerService.ts
class MultiplayerService (line 4) | class MultiplayerService {
method constructor (line 6) | constructor(getUserInfo: () => userInfo, sendMessage: (message) => voi...
FILE: packages/web-component-designer/src/elements/services/placementService/AbsolutePlacementService.ts
function usesSvgGeometryPlacement (line 16) | function usesSvgGeometryPlacement(designItem: IDesignItem) {
class AbsolutePlacementService (line 21) | class AbsolutePlacementService implements IPlacementService {
method serviceForContainer (line 25) | serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDe...
method isEnterableContainer (line 34) | isEnterableContainer(container: IDesignItem) {
method canEnter (line 42) | canEnter(container: IDesignItem, items: IDesignItem[]) {
method canLeave (line 52) | canLeave(container: IDesignItem, items: IDesignItem[]) {
method getElementOffset (line 56) | getElementOffset(container: IDesignItem, designItem?: IDesignItem): IP...
method calculateTrack (line 60) | private calculateTrack(event: MouseEvent, designerCanvas: IDesignerCan...
method placePoint (line 90) | placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, contain...
method startPlace (line 117) | startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, contain...
method place (line 120) | place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: I...
method moveElements (line 156) | moveElements(designItems: IDesignItem[], position: IPoint, absolute: b...
method enterContainer (line 170) | enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'no...
method leaveContainer (line 187) | leaveContainer(container: IDesignItem, items: IDesignItem[]) {
method finishPlace (line 192) | finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, contai...
FILE: packages/web-component-designer/src/elements/services/placementService/AlwaysAbsolutePlacementService.ts
class AlwaysAbsolutePlacementService (line 4) | class AlwaysAbsolutePlacementService extends AbsolutePlacementService {
method serviceForContainer (line 5) | override serviceForContainer(container: IDesignItem, containerStyle: C...
FILE: packages/web-component-designer/src/elements/services/placementService/DefaultPlacementService.ts
function usesSvgGeometryPlacement (line 16) | function usesSvgGeometryPlacement(designItem: IDesignItem) {
function filterNonElementItems (line 21) | function filterNonElementItems(items: IDesignItem[]) {
class DefaultPlacementService (line 32) | class DefaultPlacementService implements IPlacementService {
method serviceForContainer (line 34) | serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDe...
method isEnterableContainer (line 43) | isEnterableContainer(container: IDesignItem) {
method canEnter (line 51) | canEnter(container: IDesignItem, items: IDesignItem[]) {
method canLeave (line 61) | canLeave(container: IDesignItem, items: IDesignItem[]) {
method getElementOffset (line 65) | getElementOffset(container: IDesignItem, designItem?: IDesignItem): IP...
method calculateTrack (line 69) | private calculateTrack(event: MouseEvent, placementView: IDesignerCanv...
method placePoint (line 99) | placePoint(event: MouseEvent, placementView: IDesignerCanvas, containe...
method startPlace (line 126) | startPlace(event: MouseEvent, placementView: IDesignerCanvas, containe...
method place (line 129) | place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: I...
method moveElements (line 165) | moveElements(designItems: IDesignItem[], position: IPoint, absolute: b...
method enterContainer (line 179) | enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'no...
method leaveContainer (line 196) | leaveContainer(container: IDesignItem, items: IDesignItem[]) {
method finishPlace (line 201) | finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, contai...
FILE: packages/web-component-designer/src/elements/services/placementService/FlexBoxPlacementService.ts
class FlexBoxPlacementService (line 10) | class FlexBoxPlacementService implements IPlacementService {
method constructor (line 14) | public constructor(basePlacementService: IPlacementService) {
method enterContainer (line 18) | enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'no...
method leaveContainer (line 30) | leaveContainer(container: IDesignItem, items: IDesignItem[]) {
method serviceForContainer (line 39) | serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDe...
method isEnterableContainer (line 48) | isEnterableContainer(container: IDesignItem) {
method canEnter (line 52) | canEnter(container: IDesignItem, items: IDesignItem[]) {
method canLeave (line 58) | canLeave(container: IDesignItem, items: IDesignItem[]) {
method getElementOffset (line 62) | getElementOffset(container: IDesignItem, designItem?: IDesignItem): IP...
method placePoint (line 66) | placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, contain...
method startPlace (line 71) | startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, contain...
method place (line 74) | place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: I...
method finishPlace (line 166) | finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, contai...
method moveElements (line 169) | moveElements(designItems: IDesignItem[], position: IPoint, absolute: b...
FILE: packages/web-component-designer/src/elements/services/placementService/GridPlacementService.ts
class GridPlacementService (line 11) | class GridPlacementService implements IPlacementService {
method constructor (line 15) | public constructor(basePlacementService: IPlacementService) {
method enterContainer (line 19) | enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'no...
method leaveContainer (line 33) | leaveContainer(container: IDesignItem, items: IDesignItem[]) {
method serviceForContainer (line 42) | serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDe...
method isEnterableContainer (line 51) | isEnterableContainer(container: IDesignItem) {
method canEnter (line 55) | canEnter(container: IDesignItem, items: IDesignItem[]) {
method canLeave (line 61) | canLeave(container: IDesignItem, items: IDesignItem[]) {
method getElementOffset (line 65) | getElementOffset(container: IDesignItem, designItem?: IDesignItem): IP...
method placePoint (line 69) | placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, contain...
method startPlace (line 74) | startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, contain...
method place (line 77) | place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: I...
method finishPlace (line 106) | finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, contai...
method moveElements (line 150) | moveElements(designItems: IDesignItem[], position: IPoint, absolute: b...
FILE: packages/web-component-designer/src/elements/services/placementService/IPlacementService.ts
type IPlacementService (line 6) | interface IPlacementService extends IService {
FILE: packages/web-component-designer/src/elements/services/placementService/ISnaplinesProviderService.ts
type ISnaplinesProviderService (line 5) | interface ISnaplinesProviderService extends IService {
FILE: packages/web-component-designer/src/elements/services/placementService/SnaplinesProviderService.ts
class SnaplinesProviderService (line 9) | class SnaplinesProviderService implements ISnaplinesProviderService {
method provideSnaplines (line 10) | provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem...
FILE: packages/web-component-designer/src/elements/services/pngCreatorService/DisplayMediaPngWriterService.ts
class DisplayMediaPngWriterService (line 7) | class DisplayMediaPngWriterService implements IPngCreatorService {
method takePng (line 8) | async takePng(designItems: IDesignItem[], options?: { margin?: number,...
method _loadImage (line 118) | private _loadImage(dataUrl: string): Promise<HTMLImageElement> {
FILE: packages/web-component-designer/src/elements/services/pngCreatorService/ElectronPngWriterService.ts
class ElectronPngWriterService (line 27) | class ElectronPngWriterService implements IPngCreatorService {
method constructor (line 36) | constructor(capturePageFn: (rect: { x: number, y: number, width: numbe...
method takePng (line 40) | async takePng(designItems: IDesignItem[], options?: { margin?: number,...
method _loadImage (line 148) | private _loadImage(dataUrl: string): Promise<HTMLImageElement> {
FILE: packages/web-component-designer/src/elements/services/pngCreatorService/IPngCreatorService.ts
type IPngCreatorService (line 3) | interface IPngCreatorService {
FILE: packages/web-component-designer/src/elements/services/propertiesService/DefaultEditorTypeService.ts
class DefaultEditorTypeService (line 4) | class DefaultEditorTypeService implements IEditorTypeService {
method getEditor (line 5) | getEditor(type: string, additional: { changedCallback: (newValue: any)...
FILE: packages/web-component-designer/src/elements/services/propertiesService/DefaultPropertyEditorTypesService.ts
class DefaultPropertyEditorTypesService (line 19) | class DefaultPropertyEditorTypesService implements IPropertyEditorTypesS...
method getEditorForProperty (line 20) | getEditorForProperty(property: IProperty): IPropertyEditor {
method _getEditorForProperty (line 27) | private _getEditorForProperty(property: IProperty): IPropertyEditor {
FILE: packages/web-component-designer/src/elements/services/propertiesService/IEditorTypeService.ts
type IEditorTypeService (line 1) | interface IEditorTypeService {
FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertiesService.ts
type RefreshMode (line 10) | enum RefreshMode {
type IPropertiesService (line 17) | interface IPropertiesService extends IService {
FILE: packages/web-component-designer/src/elements/services/propertiesService/IProperty.ts
type IProperty (line 6) | interface IProperty {
FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyEditor.ts
type IPropertyEditor (line 5) | interface IPropertyEditor {
type IPropertyEditorT (line 14) | interface IPropertyEditorT<T extends Element> extends IPropertyEditor {
FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyEditorTypesService.ts
type IPropertyEditorTypesService (line 4) | interface IPropertyEditorTypesService {
FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyGroup.ts
type IPropertyGroup (line 3) | interface IPropertyGroup {
FILE: packages/web-component-designer/src/elements/services/propertiesService/IPropertyGroupsService.ts
type IPropertyGroupsService (line 5) | interface IPropertyGroupsService {
FILE: packages/web-component-designer/src/elements/services/propertiesService/PropertyGroupsService.ts
class PropertyGroupsService (line 12) | class PropertyGroupsService implements IPropertyGroupsService {
method getPropertygroups (line 68) | getPropertygroups(designItems: IDesignItem[]): { name: string; propert...
FILE: packages/web-component-designer/src/elements/services/propertiesService/PropertyMutationHandling.ts
type AttributeMutationRecordLike (line 1) | type AttributeMutationRecordLike = Pick<MutationRecord, 'type' | 'attrib...
type AttributeTargetLike (line 5) | type AttributeTargetLike = { getAttribute?: (qualifiedName: string) => s...
function getMutationAttributeValue (line 7) | function getMutationAttributeValue(mutation: AttributeMutationRecordLike...
function getStyleDeclarationNames (line 14) | function getStyleDeclarationNames(styleText: string | null, filter?: (na...
function areSetsEqual (line 76) | function areSetsEqual(left: Set<string>, right: Set<string>): boolean {
function didAttributePresenceChange (line 86) | function didAttributePresenceChange(mutation: AttributeMutationRecordLik...
function didStyleDeclarationSetChange (line 94) | function didStyleDeclarationSetChange(mutation: AttributeMutationRecordL...
function didCustomStyleDeclarationSetChange (line 104) | function didCustomStyleDeclarationSetChange(mutation: AttributeMutationR...
FILE: packages/web-component-designer/src/elements/services/propertiesService/PropertyType.ts
type PropertyType (line 1) | enum PropertyType {
FILE: packages/web-component-designer/src/elements/services/propertiesService/ValueType.ts
type ValueType (line 1) | enum ValueType {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/AnglePropertyEditor.ts
class AnglePropertyEditor (line 5) | class AnglePropertyEditor extends BasePropertyEditor<HTMLInputElement> {
method constructor (line 7) | constructor(property: IProperty) {
method refreshValue (line 21) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/BasePropertyEditor.ts
method constructor (line 14) | constructor(property: IProperty) {
method _previewValueChanged (line 18) | protected async _previewValueChanged(newValue) {
method _removePreviewValue (line 25) | protected async _removePreviewValue() {
method _valueChanged (line 32) | protected async _valueChanged(newValue) {
method designItemsChanged (line 45) | public designItemsChanged(designItems: IDesignItem[]) {
method refreshValueWithoutNotification (line 51) | public refreshValueWithoutNotification(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/BooleanPropertyEditor.ts
class BooleanPropertyEditor (line 5) | class BooleanPropertyEditor extends BasePropertyEditor<HTMLInputElement> {
method constructor (line 7) | constructor(property: IProperty) {
method refreshValue (line 18) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ColorPropertyEditor.ts
class ColorPropertyEditor (line 6) | class ColorPropertyEditor extends BasePropertyEditor<ColorInput> {
method constructor (line 7) | constructor(property: IProperty) {
method refreshValue (line 23) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/CssPropertyEditor.ts
class CssPropertyEditor (line 8) | class CssPropertyEditor implements IPropertyEditor {
method constructor (line 18) | constructor(property: IProperty, createInnerEditor: (property: IProper...
method _createServiceProxy (line 60) | private _createServiceProxy(service: IPropertiesService): IPropertiesS...
method _appendImportant (line 73) | private _appendImportant(value: any) {
method designItemsChanged (line 81) | public designItemsChanged(designItems: IDesignItem[]) {
method _refreshImportant (line 86) | private _refreshImportant(valueType: ValueType, value: any) {
method _isImportant (line 94) | private _isImportant() {
method _setImportant (line 98) | private _setImportant(important: boolean) {
method refreshValue (line 104) | refreshValue(valueType: ValueType, value: any) {
method refreshValueWithoutNotification (line 109) | public refreshValueWithoutNotification(valueType: ValueType, value: an...
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/DatePropertyEditor.ts
class DatePropertyEditor (line 5) | class DatePropertyEditor extends BasePropertyEditor<HTMLInputElement> {
method constructor (line 7) | constructor(property: IProperty) {
method refreshValue (line 18) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/DefaultPropertyEditor.ts
class TextPropertyEditor (line 7) | class TextPropertyEditor extends BasePropertyEditor<HTMLElement> {
method constructor (line 11) | constructor(property: IProperty, serviceContainer: ServiceContainer) {
method refreshValue (line 22) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/FontPropertyEditor.ts
class FontPropertyEditor (line 5) | class FontPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
method constructor (line 8) | constructor(property: IProperty) {
method addFontsToSelect (line 20) | static addFontsToSelect(select: HTMLSelectElement) {
method parseFontList (line 37) | private static parseFontList(select: HTMLSelectElement) {
method refreshValue (line 47) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.ts
class ImageButtonListPropertyEditor (line 8) | class ImageButtonListPropertyEditor extends BasePropertyEditor<ImageButt...
method constructor (line 10) | constructor(property: IProperty) {
method refreshValue (line 42) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.ts
class JsonPropertyEditor (line 6) | class JsonPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
method constructor (line 17) | constructor(property: IProperty) {
method refreshValue (line 28) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.ts
class JsonPropertyPopupEditor (line 3) | class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorA...
method constructor (line 12) | constructor() {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.ts
class NumberPropertyEditor (line 5) | class NumberPropertyEditor extends BasePropertyEditor<HTMLInputElement> {
method constructor (line 7) | constructor(property: IProperty) {
method refreshValue (line 21) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/SelectPropertyEditor.ts
class SelectPropertyEditor (line 5) | class SelectPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
method constructor (line 10) | constructor(property: IProperty) {
method refreshValue (line 46) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/TextPropertyEditor.ts
class TextPropertyEditor (line 5) | class TextPropertyEditor extends BasePropertyEditor<HTMLInputElement> {
method constructor (line 9) | constructor(property: IProperty) {
method refreshValue (line 40) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.ts
class ThicknessPropertyEditor (line 6) | class ThicknessPropertyEditor extends BasePropertyEditor<ThicknessEditor> {
method constructor (line 8) | constructor(property: IProperty) {
method refreshValue (line 18) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitPropertyEditor.ts
class UnitPropertyEditor (line 8) | class UnitPropertyEditor extends BasePropertyEditor<NumericStyleInput> {
method constructor (line 10) | constructor(property: IProperty) {
method designItemsChanged (line 34) | public override designItemsChanged(designItems: IDesignItem[]) {
method refreshValue (line 38) | refreshValue(valueType: ValueType, value: any) {
FILE: packages/web-component-designer/src/elements/services/pr
Condensed preview — 669 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,866K chars).
[
{
"path": ".editorconfig",
"chars": 107,
"preview": "root = true\r\n\r\n[*]\r\nend_of_line = crlf\r\ninsert_final_newline = false\r\nindent_style = space\r\nindent_size = 2"
},
{
"path": ".github/FUNDING.yml",
"chars": 90,
"preview": "# These are supported funding model platforms\n\ngithub: jogibear9988\npatreon: jogibear9988\n"
},
{
"path": ".github/copilot-instructions.md",
"chars": 203,
"preview": "## Project Agent Instructions\n\n- Before starting work, read [AGENTS.md](../AGENTS.md) and follow its guidance.\n- Treat ["
},
{
"path": ".gitignore",
"chars": 64,
"preview": "node_modules/\r\ndist/\r\n/.vs\r\ndebug.log\r\n/.vscode\r\n*.tsbuildinfo\r\n"
},
{
"path": "ACKNOWLEDGMENTS",
"chars": 757,
"preview": "# Acknowledgments\r\n\r\n- Thanks to @notwaldorf who created the original `wizzywid` project (MIT License).\r\n https://githu"
},
{
"path": "AGENTS.md",
"chars": 2040,
"preview": "## Project Agent Instructions\n\n- AI agents must store memories under the repository [memories/](memories) directory.\n\n##"
},
{
"path": "CLAUDE.md",
"chars": 197,
"preview": "## Project Agent Instructions\n\n- Before starting work, read [AGENTS.md](AGENTS.md) and follow its guidance.\n- Treat [AGE"
},
{
"path": "COMPARISON.md",
"chars": 1798,
"preview": "## Similar Frameworks\r\n\r\n| Name | Licence | Edit Source | Split View | Zooming | Resize Transformed "
},
{
"path": "LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) 2021 node-projects \n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "README.md",
"chars": 5758,
"preview": "# web-component-designer\r\n\r\nA HTML web component for designing web components and HTML pages based on PolymerLabs wizzyw"
},
{
"path": "editor.code-workspace",
"chars": 231,
"preview": "{\n\t\"folders\": [\n\t\t{\n\t\t\t\"path\": \".\"\n\t\t},\n\t\t{\n\t\t\t\"path\": \"../web-component-designer-demo\"\n\t\t}\n\t],\n\t\"settings\": {\n\t\t\"jestru"
},
{
"path": "jest.config.js",
"chars": 534,
"preview": "export default {\n testMatch: ['**/?(*.)+(spec|test).+(mts|ts|tsx|mjs|js)'],\n preset: \"ts-jest/presets/default-esm\",\n "
},
{
"path": "memories/attribute-source-part-jump-note.md",
"chars": 394,
"preview": "Attribute property-grid source navigation uses `attribute:${attributeName}` source\nparts generated by `AbstractHtmlWrite"
},
{
"path": "memories/default-html-parser-source-parts-note.md",
"chars": 321,
"preview": "DefaultHtmlParserService cannot read original source ranges from DOMParser nodes.\nAfter full parses, run the HTML writer"
},
{
"path": "memories/freehand-path-interpolation-note.md",
"chars": 293,
"preview": "Freehand `DrawPathTool` can interpolate linear path points during drag with `interpolatePoints: true` and an optional `i"
},
{
"path": "memories/getboxquads-svg-fast-path-removal.md",
"chars": 756,
"preview": "# getBoxQuads SVG visual boxes\n\nSVGGraphicsElement quads should be built from a local SVG visual box, then transformed i"
},
{
"path": "memories/mermaid-diagram-support-plan.md",
"chars": 3997,
"preview": "# Mermaid diagram support rollout\n\nGoal: extend the Mermaid package from a flowchart-first designer into a Mermaid desig"
},
{
"path": "memories/monaco-selection-coalesce-note.md",
"chars": 602,
"preview": "# Monaco selection coalescing\n\nWhen designer selection changes are mirrored into split/code view, the same source range "
},
{
"path": "memories/node-html-parser-source-parts-note.md",
"chars": 338,
"preview": "The node-html-parser parser service must populate designItemDocumentPositionService\nsource parts during parse, not only "
},
{
"path": "memories/source-part-selection-coalesce-note.md",
"chars": 359,
"preview": "When selecting a source part on a design item that may not already be primary,\npass the source part into `selectionServi"
},
{
"path": "memories/svg-affine-overlay-point-conversion-note.md",
"chars": 399,
"preview": "For the getBoxQuads polyfill SVG graphics fast path, diagonal SVG lines need\nstroke expansion along the normal vector (`"
},
{
"path": "memories/svg-geometry-placement-transform-offset-note.md",
"chars": 527,
"preview": "- SVG geometry drag commit receives the live preview translation in visual/container\n coordinates. Before writing geome"
},
{
"path": "memories/unified-geometry-click-selection-no-commit.md",
"chars": 399,
"preview": "# Unified geometry click selection\n\n`UnifiedGeometryExtension` creates drag state on handle pointer-down so it can keep "
},
{
"path": "memory/context-menu-copy-paste-pattern.md",
"chars": 682,
"preview": "- Designer context menus are registered centrally in DefaultServiceBootstrap and grouped with ChildContextMenu plus Sepe"
},
{
"path": "memory/context-menu-popover-anchor-note.md",
"chars": 459,
"preview": "- In ContextMenu, popover top-layer rendering becomes non-interactive when combined with CSS anchor positioning in the d"
},
{
"path": "memory/css-numeric-percent-measured-size-note.md",
"chars": 458,
"preview": "- For CSS numeric size properties, `to %` conversion should prefer the element's measured box size (`getBoundingClientRe"
},
{
"path": "memory/css-numeric-preview-lock-shadow-host-note.md",
"chars": 666,
"preview": "- NumericStyleInput should own its preview display lock internally; editor-level refresh suppression alone is not enough"
},
{
"path": "memory/css-zoom-placement-preview-note.md",
"chars": 844,
"preview": "- Drag preview transforms in DefaultPlacementService and AbsolutePlacementService must divide the visual movement by the"
},
{
"path": "memory/cssom-shorthand-test-note.md",
"chars": 329,
"preview": "- Jest node/jsdom in this repo is not reliable for CSS shorthand serialization checks.\n- For CssCombiner tests, fake doc"
},
{
"path": "memory/jest-esm-validation-note.md",
"chars": 806,
"preview": "- In packages/web-component-designer, Jest currently has unrelated ESM/module-resolution issues for tests that import di"
},
{
"path": "memory/jest-source-import-style-note.md",
"chars": 232,
"preview": "- In packages/web-component-designer Jest tests, import source modules with the package's existing ts-jest style (for ex"
},
{
"path": "memory/linked-package-type-compat-note.md",
"chars": 959,
"preview": "- In this repo's linked-package setup, widening exported structural types like ServiceContainer or InstanceServiceContai"
},
{
"path": "memory/manual-collab-snapshot-request.md",
"chars": 367,
"preview": "- For manual copy/paste WebRTC signaling, do not infer initial snapshot ownership from receiving `hello`; the copied dir"
},
{
"path": "memory/overlay-refresh-pattern.md",
"chars": 352,
"preview": "- Designer extensions should prefer passing existing SVG nodes back into _drawLine/_drawCircle/_drawPath and gate refres"
},
{
"path": "memory/pointertool-selected-quad-drag-note.md",
"chars": 362,
"preview": "- PointerTool drag start must distinguish click target from drag source.\n- After alt-selecting an element underneath ano"
},
{
"path": "memory/property-grid-designitem-cache-sync-note.md",
"chars": 420,
"preview": "- PropertyGrid refresh can run correctly while editors still show stale values if external DOM changes bypass DesignItem"
},
{
"path": "memory/property-grid-preview-recreation-fix.md",
"chars": 1640,
"preview": "# Property Grid Preview Element Recreation Fix\n\n## Root Cause\n`CssCurrentPropertiesService.getRefreshMode()` returns `Re"
},
{
"path": "memory/resize-left-top-initial-local-axis-note.md",
"chars": 618,
"preview": "- Left/top resize handles cannot derive drag deltas by converting the current pointer into the element's current local s"
},
{
"path": "memory/straighten-line-screen-y-note.md",
"chars": 308,
"preview": "- PathDataPolyfill.straightenLine uses calculateAlpha's clockwise screen-space angle; reconstruct snapped points with `y"
},
{
"path": "memory/svg-getctm-double-transform-note.md",
"chars": 690,
"preview": "- In the getBoxQuads transform walk, do not seed SVGGraphicsElement (non-root SVG) with getElementTransformWithZoom for "
},
{
"path": "memory/svg-rect-style-geometry-write-note.md",
"chars": 595,
"preview": "- For SVG rect editing in the unified geometry path, read rendered geometry from getBBox() instead of rect.x/rect.width "
},
{
"path": "memory/transform-preview-sync-pattern.md",
"chars": 315,
"preview": "- When previewing transform edits via direct writes to element.style.transform, always sync or clear that inline transfo"
},
{
"path": "memory/transformed-resize-grid-local-point-pattern.md",
"chars": 807,
"preview": "- For resize and grid interactions under transformed elements or transformed ancestors, do not derive local deltas from "
},
{
"path": "memory/undo-group-content-changed-commit-note.md",
"chars": 475,
"preview": "- In packages/web-component-designer, grouped undo operations should not emit instanceServiceContainer.onContentChanged "
},
{
"path": "memory/webrtc-cross-machine-ice-config-note.md",
"chars": 1637,
"preview": "- Manual WebRTC signaling in collaboration-service worked on the same machine but failed across machines until the trans"
},
{
"path": "package.json",
"chars": 1530,
"preview": "{\n \"name\": \"@node-projects/monorepo\",\n \"private\": true,\n \"type\": \"module\",\n \"workspaces\": [\n \"packages/*\"\n ],\n "
},
{
"path": "packages/web-component-designer/.npmignore",
"chars": 78,
"preview": "src/\r\ntest/\r\ntests/\r\nnode_modules/\r\ntsconfig.json\r\ntsconfig.tsbuildinfo\r\n!dist"
},
{
"path": "packages/web-component-designer/README.md",
"chars": 2128,
"preview": "# web-component-designer\r\n\r\n```It's now considered beta. It works, we use it in production, but there are many more feat"
},
{
"path": "packages/web-component-designer/_esbuild.js",
"chars": 473,
"preview": "import * as esbuild from 'esbuild';\nimport { minifyHTMLLiteralsPlugin } from 'esbuild-plugin-minify-html-literals';\n\nawa"
},
{
"path": "packages/web-component-designer/assets/designerCanvasIframe.html",
"chars": 451,
"preview": "<html>\n\n<head>\n <script>\n window.addEventListener(\"message\",\n (event) => {\n const da"
},
{
"path": "packages/web-component-designer/assets/images/chromeDevtools/LICENSE",
"chars": 1584,
"preview": "// Copyright 2014 The Chromium Authors. All rights reserved.\r\n//\r\n// Redistribution and use in source and binary forms, "
},
{
"path": "packages/web-component-designer/assets/images/chromeDevtools/info.txt",
"chars": 95,
"preview": "Images from\r\nhttps://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src"
},
{
"path": "packages/web-component-designer/assets/images/treeview/license.txt",
"chars": 320,
"preview": "WPF Designer Icons are taken from\nFugue Icons Library:\nLicense: Creative Commons Attribution 3.0 License\nhttp://p.yusuke"
},
{
"path": "packages/web-component-designer/config/elements-native.json",
"chars": 625,
"preview": "{\r\n \"elements\":\r\n [\r\n \"div\",\r\n \"label\",\r\n \"input\",\r\n \"textarea\",\r\n \"select\",\r\n {\"tag\" : \"button\", \"d"
},
{
"path": "packages/web-component-designer/jest.config.js",
"chars": 564,
"preview": "export default {\n roots: ['<rootDir>/tests'],\n testMatch: ['**/?(*.)+(spec|test).+(mts|ts|tsx|mjs|js)'],\n preset: \"ts"
},
{
"path": "packages/web-component-designer/jsr.json",
"chars": 114,
"preview": "{\n \"name\": \"@node-projects/web-component-designer\",\n \"version\": \"0.1.180\",\n \"exports\": \"./src/index.ts\"\n}"
},
{
"path": "packages/web-component-designer/package.json",
"chars": 943,
"preview": "{\r\n \"description\": \"A WYSIWYG designer webcomponent for html components\",\r\n \"name\": \"@node-projects/web-component-desi"
},
{
"path": "packages/web-component-designer/src/Constants.ts",
"chars": 386,
"preview": "export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';\r\nexport const dragDropFormatNameBinding"
},
{
"path": "packages/web-component-designer/src/commandHandling/CommandType.ts",
"chars": 1143,
"preview": "export enum CommandType {\r\n 'copy' = 'copy',\r\n 'paste' = 'paste',\r\n 'cut' = 'cut',\r\n 'delete' = 'delete',\r\n 'undo' "
},
{
"path": "packages/web-component-designer/src/commandHandling/IUiCommand.ts",
"chars": 272,
"preview": "import { CommandType } from './CommandType.js';\r\n\r\nexport interface IUiCommand {\r\n type: CommandType;\r\n event?: Ev"
},
{
"path": "packages/web-component-designer/src/commandHandling/IUiCommandHandler.ts",
"chars": 200,
"preview": "import { IUiCommand } from './IUiCommand.js';\r\n\r\nexport interface IUiCommandHandler {\r\n executeCommand: (command: IUi"
},
{
"path": "packages/web-component-designer/src/elements/controls/ColorEditor.ts",
"chars": 35379,
"preview": "import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'"
},
{
"path": "packages/web-component-designer/src/elements/controls/DesignerTabControl.ts",
"chars": 8971,
"preview": "import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';\r"
},
{
"path": "packages/web-component-designer/src/elements/controls/ImageButtonListSelector.ts",
"chars": 3222,
"preview": "import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';\r\n\r\nexport "
},
{
"path": "packages/web-component-designer/src/elements/controls/MetricsEditor.ts",
"chars": 13167,
"preview": "import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';\n\nexport ty"
},
{
"path": "packages/web-component-designer/src/elements/controls/NumericStyleInput.ts",
"chars": 30965,
"preview": "import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'"
},
{
"path": "packages/web-component-designer/src/elements/controls/NumericStyleInputValueHelpers.ts",
"chars": 2237,
"preview": "export type ParsedNumericStyleInputValue =\n | { kind: 'empty' }\n | { kind: 'numeric', numberText: string, value: numbe"
},
{
"path": "packages/web-component-designer/src/elements/controls/PlainScrollbar.ts",
"chars": 18716,
"preview": "//included from: https://github.com/chdh/plain-scrollbar\r\n\r\nimport { css, html } from \"@node-projects/base-custom-webcom"
},
{
"path": "packages/web-component-designer/src/elements/controls/SimpleSplitView.ts",
"chars": 2793,
"preview": "import { BaseCustomWebComponentConstructorAppend, css, html } from \"@node-projects/base-custom-webcomponent\";\r\n\r\nexport "
},
{
"path": "packages/web-component-designer/src/elements/controls/ThicknessEditor.ts",
"chars": 4884,
"preview": "import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent'"
},
{
"path": "packages/web-component-designer/src/elements/documentContainer.ts",
"chars": 16710,
"preview": "import { BaseCustomWebComponentLazyAppend, css, cssFromString, debounce, TypedEvent } from \"@node-projects/base-custom-w"
},
{
"path": "packages/web-component-designer/src/elements/helper/ArrangeHelper.ts",
"chars": 8510,
"preview": "import { Orientation } from '../../enums/Orientation.js';\nimport { IDesignItem } from '../item/IDesignItem.js';\nimport {"
},
{
"path": "packages/web-component-designer/src/elements/helper/Browser.ts",
"chars": 79,
"preview": "export const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');"
},
{
"path": "packages/web-component-designer/src/elements/helper/ClipboardHelper.ts",
"chars": 3353,
"preview": "export async function copyTextToClipboard(text) {\r\n copyToClipboard([['text/plain', text]]);\r\n}\r\n\r\n//used, so you cou"
},
{
"path": "packages/web-component-designer/src/elements/helper/CssAttributeParser.ts",
"chars": 1810,
"preview": "\r\nenum Token {\r\n Name,\r\n Value,\r\n InQuote\r\n}\r\n\r\nexport class CssEntry {\n constructor(name: string, value: string, im"
},
{
"path": "packages/web-component-designer/src/elements/helper/CssCombiner.ts",
"chars": 18201,
"preview": "export class CssCombiner {\r\n private static _helperElement = document.createElement('div');\r\n\r\n static combine(styles:"
},
{
"path": "packages/web-component-designer/src/elements/helper/CssImportant.ts",
"chars": 425,
"preview": "export function splitCssImportant(value: string): { value: string, important: boolean } {\n const match = value.match(/\\"
},
{
"path": "packages/web-component-designer/src/elements/helper/CssUnitConverter.ts",
"chars": 6276,
"preview": "//unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh, vi, ic, ric\r\n\r\nconst units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt"
},
{
"path": "packages/web-component-designer/src/elements/helper/DesignerStylesheetPatcher.ts",
"chars": 930,
"preview": "export interface IDesignerStylesheetPatchAttributes {\n forceHoverAttributeName: string;\n forceActiveAttributeName: str"
},
{
"path": "packages/web-component-designer/src/elements/helper/ElementHelper.ts",
"chars": 7453,
"preview": "import { IPoint } from '../../interfaces/IPoint.js';\r\nimport { IRect } from '../../interfaces/IRect.js';\r\nimport { IDesi"
},
{
"path": "packages/web-component-designer/src/elements/helper/GridHelper.ts",
"chars": 10229,
"preview": "import { IPoint } from \"../../interfaces/IPoint.js\";\r\nimport { IDesignItem } from \"../item/IDesignItem.js\";\r\nimport { ge"
},
{
"path": "packages/web-component-designer/src/elements/helper/Helper.ts",
"chars": 3120,
"preview": "import { IPoint } from \"../../interfaces/IPoint.js\";\r\nimport { IRect } from \"../../interfaces/IRect.js\";\r\n\r\nexport funct"
},
{
"path": "packages/web-component-designer/src/elements/helper/ITextWriter.ts",
"chars": 270,
"preview": "export interface ITextWriter {\r\n get position(): number;\r\n isLastCharNewline(): boolean;\r\n levelRaise(): void\r\n leve"
},
{
"path": "packages/web-component-designer/src/elements/helper/IndentedTextWriter.ts",
"chars": 925,
"preview": "import { ITextWriter } from './ITextWriter.js';\r\n\r\nexport class IndentedTextWriter implements ITextWriter {\r\n private "
},
{
"path": "packages/web-component-designer/src/elements/helper/KeyboardHelper.ts",
"chars": 235,
"preview": "import { isAppleDevice } from \"./Helper.js\";\n\nexport function hasCommandKey(event: KeyboardEvent | MouseEvent | PointerE"
},
{
"path": "packages/web-component-designer/src/elements/helper/LayoutHelper.ts",
"chars": 6672,
"preview": "//TODO: this function should return the correct property to change a layout,\r\n// for example left/right when left or ri"
},
{
"path": "packages/web-component-designer/src/elements/helper/NpmPackageHacks.json",
"chars": 1292,
"preview": "{\r\n \"@shoelace-style/shoelace\": {\r\n \"html\": \"<link rel=\\\"stylesheet\\\" media=\\\"(prefers-color-scheme:light)\\\" h"
},
{
"path": "packages/web-component-designer/src/elements/helper/NpmPackageLoader.ts",
"chars": 16361,
"preview": "import { IDesignerAddonJson } from \"../services/designerAddons/IDesignerAddonJson.js\";\r\nimport { IElementsJson } from \"."
},
{
"path": "packages/web-component-designer/src/elements/helper/ObservedCustomElementsRegistry.ts",
"chars": 1583,
"preview": "import { IDisposable } from \"../../interfaces/IDisposable.js\";\n\nexport class ObservedCustomElementsRegistry implements I"
},
{
"path": "packages/web-component-designer/src/elements/helper/PathDataPolyfill.ts",
"chars": 37301,
"preview": "// https://github.com/jarek-foksa/path-data-polyfill\r\n// @info\r\n// Polyfill for SVG getPathData() and setPathData() me"
},
{
"path": "packages/web-component-designer/src/elements/helper/PopupHelper.ts",
"chars": 1410,
"preview": "export function showPopup(content: Element, anchorEl: HTMLElement, closedCallback?: () => void): () => void {\n const "
},
{
"path": "packages/web-component-designer/src/elements/helper/QuadEdgeHandleHelper.ts",
"chars": 1501,
"preview": "import { IPoint } from '../../interfaces/IPoint.js';\n\nfunction normalize(vector: IPoint) {\n const length = Math.hypot(v"
},
{
"path": "packages/web-component-designer/src/elements/helper/Screenshot.ts",
"chars": 3226,
"preview": "import { getBoundingClientRectAlsoForDisplayContents } from \"./ElementHelper.js\";\r\n\r\n// for screenshots to be genrated p"
},
{
"path": "packages/web-component-designer/src/elements/helper/SelectionHelper.ts",
"chars": 2398,
"preview": "export function shadowrootGetSelection(shadowRoot: ShadowRoot): Selection | ArrayLike<StaticRange> | null {\n let sele"
},
{
"path": "packages/web-component-designer/src/elements/helper/SimpleTextWriter.ts",
"chars": 667,
"preview": "import { ITextWriter } from './ITextWriter.js';\r\n\r\nexport class SimpleTextWriter implements ITextWriter {\r\n private _te"
},
{
"path": "packages/web-component-designer/src/elements/helper/StylesheetHelper.ts",
"chars": 352,
"preview": "export function stylesheetFromString(window: Window, text: string) {\n //@ts-ignore\n const newStylesheet = new wind"
},
{
"path": "packages/web-component-designer/src/elements/helper/SvgHelper.ts",
"chars": 25457,
"preview": "import { IPoint } from '../../interfaces/IPoint.js';\r\nimport { IDesignerCanvas } from '../widgets/designerView/IDesigner"
},
{
"path": "packages/web-component-designer/src/elements/helper/SwitchContainerHelper.ts",
"chars": 2629,
"preview": "import { IDesignItem } from '../item/IDesignItem.js';\r\nimport { NodeType } from '../item/NodeType.js';\r\n\r\nexport functio"
},
{
"path": "packages/web-component-designer/src/elements/helper/TextHelper.ts",
"chars": 1021,
"preview": "let canvas: HTMLCanvasElement;\r\n/**\r\n * Uses canvas.measureText to compute and return the width of the given text of gi"
},
{
"path": "packages/web-component-designer/src/elements/helper/TouchGestureHelper.ts",
"chars": 3828,
"preview": "const panThreshold = 10;\nconst zoomThreshold = 10;\n//const rotateThreshold = 0;\n\nexport class TouchGestureHelper {\n p"
},
{
"path": "packages/web-component-designer/src/elements/helper/TransformHelper.ts",
"chars": 3088,
"preview": "let identityMatrix: number[] = [\r\n 1, 0, 0, 0,\r\n 0, 1, 0, 0,\r\n 0, 0, 1, 0,\r\n 0, 0, 0, 1\r\n];\r\n\r\nexport function combi"
},
{
"path": "packages/web-component-designer/src/elements/helper/XmlHelper.ts",
"chars": 454,
"preview": "export function encodeXMLChars(value: string) {\r\n return value.replace(/&/g, '&')\r\n .replace(/</g, '<')"
},
{
"path": "packages/web-component-designer/src/elements/helper/contextMenu/ContextMenu.ts",
"chars": 13076,
"preview": "import { css } from '@node-projects/base-custom-webcomponent';\r\nimport { IContextMenu, IContextMenuItem } from './IConte"
},
{
"path": "packages/web-component-designer/src/elements/helper/contextMenu/IContextMenuItem.ts",
"chars": 433,
"preview": "export interface IContextMenu {\r\n\tclose: () => void;\r\n};\r\n\r\nexport interface IContextMenuItem {\r\n\treadonly id?: string,\r"
},
{
"path": "packages/web-component-designer/src/elements/helper/getBoxQuads.global.d.ts",
"chars": 934,
"preview": "export { };\r\n\r\ndeclare global {\r\n interface Node {\r\n convertQuadFromNode(quad: DOMQuadInit, from: Element, opt"
},
{
"path": "packages/web-component-designer/src/elements/helper/getBoxQuads.js",
"chars": 97549,
"preview": "//todo:\r\n//transform-box (SVGs) https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box\r\n\r\n// =================="
},
{
"path": "packages/web-component-designer/src/elements/helper/w3color.ts",
"chars": 25398,
"preview": "/* w3color.js ver.1.18 by w3schools.com (Do not remove this line)*/\r\n\r\nexport class w3color {\r\n red: number = 0;\r\n gre"
},
{
"path": "packages/web-component-designer/src/elements/item/BindingMode.ts",
"chars": 72,
"preview": "export enum BindingMode {\n oneWay = 'oneWay',\n twoWay = 'twoWay'\n}"
},
{
"path": "packages/web-component-designer/src/elements/item/BindingTarget.ts",
"chars": 380,
"preview": "export enum BindingTarget {\r\n /** Bindings for example starting with . to explicitly target a property */\r\n explic"
},
{
"path": "packages/web-component-designer/src/elements/item/DesignItem.ts",
"chars": 37989,
"preview": "import { ServiceContainer } from '../services/ServiceContainer.js';\r\nimport { IDesignItem } from './IDesignItem.js';\r\nim"
},
{
"path": "packages/web-component-designer/src/elements/item/IBinding.ts",
"chars": 1162,
"preview": "import { IBindingService } from '../services/bindingsService/IBindingService.js';\r\nimport { BindingMode } from './Bindin"
},
{
"path": "packages/web-component-designer/src/elements/item/IDesignItem.ts",
"chars": 4319,
"preview": "import { ServiceContainer } from '../services/ServiceContainer.js';\r\nimport { InstanceServiceContainer } from '../servic"
},
{
"path": "packages/web-component-designer/src/elements/item/NodeType.ts",
"chars": 134,
"preview": "export enum NodeType {\r\n Element = 1,\r\n Attribute = 2,\r\n TextNode = 3,\r\n Comment = 8,\r\n Document = 9,\r\n DocumentFr"
},
{
"path": "packages/web-component-designer/src/elements/item/info.txt",
"chars": 500,
"preview": "Todo -> unfiy Properties & Attributes.\r\n\r\nDesignItem should only store Attributes, not Properties.\r\nMaybe setAttribute s"
},
{
"path": "packages/web-component-designer/src/elements/services/BaseServiceContainer.ts",
"chars": 3474,
"preview": "import { TypedEvent } from '@node-projects/base-custom-webcomponent';\r\nimport { IService } from './IService.js';\r\n\r\n\r\nex"
},
{
"path": "packages/web-component-designer/src/elements/services/DefaultServiceBootstrap.ts",
"chars": 24600,
"preview": "import { ServiceContainer } from './ServiceContainer.js';\r\nimport { PolymerPropertiesService } from './propertiesService"
},
{
"path": "packages/web-component-designer/src/elements/services/GlobalContext.ts",
"chars": 3080,
"preview": "//Service container should not be something with changeing information, so global context is for tool and color (and may"
},
{
"path": "packages/web-component-designer/src/elements/services/IService.ts",
"chars": 37,
"preview": "export interface IService {\r\n \r\n} "
},
{
"path": "packages/web-component-designer/src/elements/services/IServiceContainer.ts",
"chars": 167,
"preview": "export interface IServiceContainer {\r\n register(name: string, service: any);\r\n getLastService(service: string): an"
},
{
"path": "packages/web-component-designer/src/elements/services/InstanceServiceContainer.ts",
"chars": 3018,
"preview": "import { ISelectionService } from './selectionService/ISelectionService.js';\r\nimport { IUndoService } from './undoServic"
},
{
"path": "packages/web-component-designer/src/elements/services/ServiceContainer.ts",
"chars": 12759,
"preview": "import { IPropertiesService } from './propertiesService/IPropertiesService.js';\r\nimport { IPlacementService } from './pl"
},
{
"path": "packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectType.ts",
"chars": 229,
"preview": "export enum BindableObjectType {\r\n undefined = 'undefined',\r\n folder = 'folder',\r\n boolean = 'boolean',\r\n nu"
},
{
"path": "packages/web-component-designer/src/elements/services/bindableObjectsService/BindableObjectsTarget.ts",
"chars": 84,
"preview": "export type BindableObjectsTarget = 'itemsView' | 'binding' | 'script' | 'property';"
},
{
"path": "packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObject.ts",
"chars": 449,
"preview": "import { BindableObjectType } from './BindableObjectType.js';\r\n\r\nexport interface IBindableObject<T> {\r\n readonly bin"
},
{
"path": "packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectDragDropService.ts",
"chars": 991,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { IDesignerCanvas } from \"../../widgets/designerView/ID"
},
{
"path": "packages/web-component-designer/src/elements/services/bindableObjectsService/IBindableObjectsService.ts",
"chars": 664,
"preview": "import { InstanceServiceContainer } from '../InstanceServiceContainer.js';\r\nimport { BindableObjectsTarget } from './Bin"
},
{
"path": "packages/web-component-designer/src/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.ts",
"chars": 3629,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IBinding } from '../../item/IBinding.js';\r\nimport { I"
},
{
"path": "packages/web-component-designer/src/elements/services/bindingsService/IBindingService.ts",
"chars": 685,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IBinding } from '../../item/IBinding.js';\r\nimport { B"
},
{
"path": "packages/web-component-designer/src/elements/services/bindingsService/SpecialTagsBindingService.ts",
"chars": 2191,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IBinding } from '../../item/IBinding.js';\r\nimport { I"
},
{
"path": "packages/web-component-designer/src/elements/services/bindingsService/VueBindingsService.ts",
"chars": 82,
"preview": "//read vue bindings:\r\n\r\n//v-bind:class\r\n//v-bind:style\r\n//v-if\r\n//v-else\r\n//v-show"
},
{
"path": "packages/web-component-designer/src/elements/services/collaborationService/CollaborationNodeIndex.ts",
"chars": 2181,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\nimport { NodeType } from '../../item/NodeType.js';\n\ntype Collab"
},
{
"path": "packages/web-component-designer/src/elements/services/collaborationService/ICollaborationService.ts",
"chars": 4088,
"preview": "import { TypedEvent } from '@node-projects/base-custom-webcomponent';\nimport { IStylesheet } from '../stylesheetService/"
},
{
"path": "packages/web-component-designer/src/elements/services/configUiService/IConfigUiService.ts",
"chars": 222,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\n\r\nexport interface IConfigUiService {\r\n hasConfigUi(designI"
},
{
"path": "packages/web-component-designer/src/elements/services/copyPasteService/CopyPasteAsJsonService.ts",
"chars": 3553,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { DomConverter } from \"../../widgets/designerView/DomCo"
},
{
"path": "packages/web-component-designer/src/elements/services/copyPasteService/CopyPasteService.ts",
"chars": 2019,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { DomConverter } from \"../../widgets/designerView/DomCo"
},
{
"path": "packages/web-component-designer/src/elements/services/copyPasteService/ICopyPasteService.ts",
"chars": 511,
"preview": "import { IRect } from \"../../../interfaces/IRect.js\";\r\nimport { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport "
},
{
"path": "packages/web-component-designer/src/elements/services/copyPasteService/PasteFormatSnapshot.ts",
"chars": 3932,
"preview": "import { PropertiesHelper } from \"../propertiesService/services/PropertiesHelper.js\";\n\nexport const pasteFormatKinds = ["
},
{
"path": "packages/web-component-designer/src/elements/services/deletionService/DeletionService.ts",
"chars": 601,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { DeleteAction } from \"../undoService/transactionItems/"
},
{
"path": "packages/web-component-designer/src/elements/services/deletionService/IDeletionService.ts",
"chars": 136,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\n\r\nexport interface IDeletionService {\r\n removeItems(items: ID"
},
{
"path": "packages/web-component-designer/src/elements/services/demoProviderService/IDemoProviderService.ts",
"chars": 337,
"preview": "import { InstanceServiceContainer } from \"../InstanceServiceContainer.js\";\r\nimport { ServiceContainer } from \"../Service"
},
{
"path": "packages/web-component-designer/src/elements/services/demoProviderService/IframeDemoProviderService.ts",
"chars": 1984,
"preview": "import { InstanceServiceContainer } from \"../InstanceServiceContainer.js\";\r\nimport { ServiceContainer } from \"../Service"
},
{
"path": "packages/web-component-designer/src/elements/services/demoProviderService/SimpleDemoProviderService.ts",
"chars": 1706,
"preview": "import { DomHelper, cssFromString } from \"@node-projects/base-custom-webcomponent\";\r\nimport { IDemoProviderService } fro"
},
{
"path": "packages/web-component-designer/src/elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.ts",
"chars": 3106,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { IDesignerCanvas } from \"../../widgets/designerView/ID"
},
{
"path": "packages/web-component-designer/src/elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.ts",
"chars": 700,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\"\nimport { IStringPosition } from \"../htmlWriterService/IStringPos"
},
{
"path": "packages/web-component-designer/src/elements/services/designItemService/BaseCustomWebcomponentDesignItemService.ts",
"chars": 1702,
"preview": "import { DesignItem } from \"../../item/DesignItem.js\";\r\nimport { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport"
},
{
"path": "packages/web-component-designer/src/elements/services/designItemService/DesignItemService.ts",
"chars": 2347,
"preview": "import { DesignItem, hideAtDesignTimeAttributeName, hideAtRunTimeAttributeName, lockAtDesignTimeAttributeName } from \".."
},
{
"path": "packages/web-component-designer/src/elements/services/designItemService/IDesignItemService.ts",
"chars": 526,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { InstanceServiceContainer } from \"../InstanceServiceCo"
},
{
"path": "packages/web-component-designer/src/elements/services/designerAddons/IDesignerAddonJson.ts",
"chars": 78,
"preview": "export interface IDesignerAddonJson {\r\n services: Record<string, string>\r\n}"
},
{
"path": "packages/web-component-designer/src/elements/services/dragDropService/DragDropService.ts",
"chars": 7634,
"preview": "import { IDesignerCanvas } from \"../../widgets/designerView/IDesignerCanvas.js\";\r\nimport { DesignItem } from '../../item"
},
{
"path": "packages/web-component-designer/src/elements/services/dragDropService/ExternalDragDropService.ts",
"chars": 1529,
"preview": "import { IDesignerCanvas } from \"../../widgets/designerView/IDesignerCanvas.js\";\r\nimport { IExternalDragDropService } fr"
},
{
"path": "packages/web-component-designer/src/elements/services/dragDropService/IDragDropService.ts",
"chars": 714,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { IDesignerCanvas } from \"../../widgets/designerView/ID"
},
{
"path": "packages/web-component-designer/src/elements/services/dragDropService/IExternalDragDropService.ts",
"chars": 289,
"preview": "import { IDesignerCanvas } from \"../../widgets/designerView/IDesignerCanvas.js\";\r\n\r\nexport interface IExternalDragDropSe"
},
{
"path": "packages/web-component-designer/src/elements/services/dragDropService/IPropertyGridDragDropService.ts",
"chars": 410,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { IProperty } from \"../propertiesService/IProperty.js\";"
},
{
"path": "packages/web-component-designer/src/elements/services/elementAtPointService/ElementAtPointService.ts",
"chars": 414,
"preview": "import { IElementAtPointService } from './IElementAtPointService.js';\r\nimport { IPoint } from '../../../interfaces/IPoin"
},
{
"path": "packages/web-component-designer/src/elements/services/elementAtPointService/IElementAtPointService.ts",
"chars": 314,
"preview": "import { IService } from '../IService.js';\r\nimport { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas."
},
{
"path": "packages/web-component-designer/src/elements/services/elementInteractionService/IElementInteractionService.ts",
"chars": 306,
"preview": "import { IDesignerCanvas } from \"../../widgets/designerView/IDesignerCanvas.js\";\r\nimport { IService } from '../IService."
},
{
"path": "packages/web-component-designer/src/elements/services/elementsService/IElementDefinition.ts",
"chars": 883,
"preview": "import { IPoint } from '../../../interfaces/IPoint.js';\r\nimport { IBinding } from '../../item/IBinding.js';\r\n\r\nexport in"
},
{
"path": "packages/web-component-designer/src/elements/services/elementsService/IElementsJson.ts",
"chars": 176,
"preview": "import { IElementDefinition } from './IElementDefinition.js';\r\n\r\nexport interface IElementsJson {\r\n \"imports\"?: strin"
},
{
"path": "packages/web-component-designer/src/elements/services/elementsService/IElementsService.ts",
"chars": 483,
"preview": "import { TypedEvent } from '@node-projects/base-custom-webcomponent';\nimport { IService } from '../IService.js';\nimport "
},
{
"path": "packages/web-component-designer/src/elements/services/elementsService/JsonFileElementsService.ts",
"chars": 1977,
"preview": "import { IElementsService } from './IElementsService.js';\r\nimport { IElementsJson } from './IElementsJson.js';\r\nimport {"
},
{
"path": "packages/web-component-designer/src/elements/services/elementsService/PreDefinedElementsService.ts",
"chars": 963,
"preview": "import { IElementsService } from './IElementsService.js';\r\nimport { IElementsJson } from './IElementsJson.js';\r\nimport {"
},
{
"path": "packages/web-component-designer/src/elements/services/elementsService/WebcomponentManifestElementsService.ts",
"chars": 2110,
"preview": "import { removeLeading, removeTrailing } from \"../../helper/Helper.js\";\r\nimport { IElementDefinition } from \"./IElementD"
},
{
"path": "packages/web-component-designer/src/elements/services/eventsService/EventsService.ts",
"chars": 7429,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { IEvent } from \"./IEvent.js\";\r\nimport { IEventsService"
},
{
"path": "packages/web-component-designer/src/elements/services/eventsService/IEvent.ts",
"chars": 127,
"preview": "export interface IEvent {\r\n name: string;\r\n propertyName?: string;\r\n eventObjectName?: string;\r\n description?: strin"
},
{
"path": "packages/web-component-designer/src/elements/services/eventsService/IEventsService.ts",
"chars": 330,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { IEvent } from \"./IEvent.js\";\r\n\r\nexport interface IEve"
},
{
"path": "packages/web-component-designer/src/elements/services/eventsService/WebcomponentManifestEventsService.ts",
"chars": 1940,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\r\nimport { EventsService } from \"./EventsService.js\";\r\nimport { "
},
{
"path": "packages/web-component-designer/src/elements/services/htmlParserService/DefaultHtmlParserService.ts",
"chars": 2149,
"preview": "import { InstanceServiceContainer } from '../InstanceServiceContainer.js';\r\nimport { ServiceContainer } from '../Service"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlParserService/IHtmlParserService.ts",
"chars": 490,
"preview": "import { IService } from '../IService.js';\r\nimport type { ServiceContainer } from '../ServiceContainer.js';\r\nimport type"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlWriterService/AbstractHtmlWriterService.ts",
"chars": 5900,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IHtmlWriterService } from './IHtmlWriterService.js';\r"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlWriterService/FormatingHtmlWriterService.ts",
"chars": 8936,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IHtmlWriterService } from './IHtmlWriterService.js';\r"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlWriterService/HtmlWriterService.ts",
"chars": 9585,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { DomConverter } from '../../widgets/designerView/DomCo"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterOptions.ts",
"chars": 227,
"preview": "export interface IHtmlWriterOptions {\r\n beautifyOutput?: boolean;\r\n compressCssToShorthandProperties?: boolean;\r\n wri"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlWriterService/IHtmlWriterService.ts",
"chars": 769,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { ITextWriter } from '../../helper/ITextWriter.js';\r\nim"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlWriterService/IStringPosition.ts",
"chars": 74,
"preview": "export interface IStringPosition {\r\n start: number;\r\n length: number;\r\n}"
},
{
"path": "packages/web-component-designer/src/elements/services/htmlWriterService/SimpleHtmlWriterService.ts",
"chars": 5491,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IHtmlWriterService } from './IHtmlWriterService.js';\r"
},
{
"path": "packages/web-component-designer/src/elements/services/initializationService/IIntializationService.ts",
"chars": 258,
"preview": "import { IDesignItem } from '../../item/IDesignItem.js';\r\n\r\n// This is called for every root DesignItem added to the des"
},
{
"path": "packages/web-component-designer/src/elements/services/instanceService/DefaultInstanceService.ts",
"chars": 4327,
"preview": "import { IInstanceService } from './IInstanceService.js';\r\nimport { IElementDefinition } from '../elementsService/IEleme"
},
{
"path": "packages/web-component-designer/src/elements/services/instanceService/IDesignerInstance.ts",
"chars": 80,
"preview": "export interface IDesignerInstance {\r\n _inNodeProjectsDesignerView: boolean;\r\n}"
},
{
"path": "packages/web-component-designer/src/elements/services/instanceService/IInstanceService.ts",
"chars": 544,
"preview": "import { IService } from '../IService.js';\r\nimport { IElementDefinition } from '../elementsService/IElementDefinition.js"
},
{
"path": "packages/web-component-designer/src/elements/services/manifestParsers/IOldCustomElementsManifest.ts",
"chars": 639,
"preview": "export interface IOldCustomElementsManifest {\r\n version: string;\r\n tags: IOldCustomElementsManifestTag[];\r\n}\r\n\r\nexport"
},
{
"path": "packages/web-component-designer/src/elements/services/manifestParsers/OldCustomElementsManifestLoader.ts",
"chars": 2889,
"preview": "import { LazyLoader } from '@node-projects/base-custom-webcomponent';\r\nimport { IOldCustomElementsManifest } from './IOl"
},
{
"path": "packages/web-component-designer/src/elements/services/manifestParsers/WebcomponentManifestParserService.ts",
"chars": 6124,
"preview": "import { BindingTarget } from '../../item/BindingTarget.js';\r\nimport { IElementDefinition } from '../elementsService/IEl"
},
{
"path": "packages/web-component-designer/src/elements/services/miniatureViewService/IMiniatureViewService.ts",
"chars": 198,
"preview": "import { IDesignerCanvas } from \"../../widgets/designerView/IDesignerCanvas.js\";\n\nexport interface IMiniatureViewService"
},
{
"path": "packages/web-component-designer/src/elements/services/miniatureViewService/MiniatureViewService.ts",
"chars": 518,
"preview": "import { IDesignerCanvas } from \"../../widgets/designerView/IDesignerCanvas.js\";\nimport { IMiniatureViewService } from \""
},
{
"path": "packages/web-component-designer/src/elements/services/modelCommandService/DefaultModelCommandService.ts",
"chars": 6420,
"preview": "import { CommandType } from \"../../../commandHandling/CommandType.js\";\r\nimport { IUiCommand } from \"../../../commandHand"
},
{
"path": "packages/web-component-designer/src/elements/services/modelCommandService/IModelCommandService.ts",
"chars": 540,
"preview": "import { IUiCommand } from '../../../commandHandling/IUiCommand.js';\r\nimport { IDesignItem } from '../../item/IDesignIte"
},
{
"path": "packages/web-component-designer/src/elements/services/multiplayerService/IMultiplayerService.ts",
"chars": 383,
"preview": "import { IPoint } from \"../../../interfaces/IPoint\";\r\n\r\nexport interface IMultiplayerService {\r\n signOn(userInfo: use"
},
{
"path": "packages/web-component-designer/src/elements/services/multiplayerService/MultiplayerService.ts",
"chars": 328,
"preview": "import { TypedEvent } from \"@node-projects/base-custom-webcomponent\";\r\nimport { userInfo } from \"./IMultiplayerService\";"
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/AbsolutePlacementService.ts",
"chars": 11361,
"preview": "import type { IPoint } from '../../../interfaces/IPoint.js';\r\nimport type { IPlacementService } from './IPlacementServic"
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/AlwaysAbsolutePlacementService.ts",
"chars": 359,
"preview": "import type { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { AbsolutePlacementService } from './AbsolutePlace"
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/DefaultPlacementService.ts",
"chars": 11545,
"preview": "import type { IPoint } from '../../../interfaces/IPoint.js';\r\nimport type { IPlacementService } from './IPlacementServic"
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/FlexBoxPlacementService.ts",
"chars": 7722,
"preview": "import { IPoint } from '../../../interfaces/IPoint.js';\r\nimport { IRect } from '../../../interfaces/IRect.js';\r\nimport {"
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/GridPlacementService.ts",
"chars": 7044,
"preview": "import type { IPoint } from '../../../interfaces/IPoint.js';\r\nimport type { IPlacementService } from './IPlacementServic"
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/IPlacementService.ts",
"chars": 1765,
"preview": "import { IService } from '../IService.js';\r\nimport { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IPoint } "
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/ISnaplinesProviderService.ts",
"chars": 489,
"preview": "import { IService } from '../IService.js';\r\nimport { IDesignItem } from '../../item/IDesignItem.js';\r\nimport { IRect } f"
},
{
"path": "packages/web-component-designer/src/elements/services/placementService/SnaplinesProviderService.ts",
"chars": 3618,
"preview": "import { IRect } from '../../../interfaces/IRect.js';\r\nimport { getBoundingClientRectAlsoForDisplayContents } from '../."
},
{
"path": "packages/web-component-designer/src/elements/services/pngCreatorService/DisplayMediaPngWriterService.ts",
"chars": 5756,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\nimport { Screenshot } from \"../../helper/Screenshot.js\";\nimport"
},
{
"path": "packages/web-component-designer/src/elements/services/pngCreatorService/ElectronPngWriterService.ts",
"chars": 7149,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\nimport { requestAnimationFramePromise, sleep } from \"../../help"
},
{
"path": "packages/web-component-designer/src/elements/services/pngCreatorService/IPngCreatorService.ts",
"chars": 216,
"preview": "import { IDesignItem } from \"../../item/IDesignItem.js\";\n\nexport interface IPngCreatorService {\n takePng(designItems:"
},
{
"path": "packages/web-component-designer/src/elements/services/propertiesService/DefaultEditorTypeService.ts",
"chars": 1396,
"preview": "import { IEditorTypeService } from \"./IEditorTypeService\";\nimport { ColorInput } from \"../../controls/ColorEditor.js\";\n\n"
}
]
// ... and 469 more files (download for full content)
About this extraction
This page contains the full source code of the node-projects/web-component-designer GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 669 files (2.5 MB), approximately 712.1k tokens, and a symbol index with 3542 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.