@node-projects/web-component-designer 0.0.34 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (243) hide show
  1. package/README.md +7 -0
  2. package/assets/images/chromeDevtools/LICENSE +27 -0
  3. package/assets/images/chromeDevtools/flex-direction-column-icon.svg +1 -0
  4. package/assets/images/chromeDevtools/flex-direction-row-icon.svg +82 -0
  5. package/assets/images/chromeDevtools/{flex-nowrap-icon.svg → flex-wrap-nowrap-icon.svg} +0 -0
  6. package/assets/images/chromeDevtools/{flex-wrap-icon.svg → flex-wrap-wrap-icon.svg} +0 -0
  7. package/assets/images/chromeDevtools/info.txt +2 -0
  8. package/dist/elements/controls/DesignerTabControl.js +94 -89
  9. package/dist/elements/controls/ImageButtonListSelector.js +38 -39
  10. package/dist/elements/controls/ThicknessEditor.d.ts +20 -4
  11. package/dist/elements/controls/ThicknessEditor.js +87 -22
  12. package/dist/elements/documentContainer.js +20 -13
  13. package/dist/elements/helper/CssAttributeParser.js +3 -3
  14. package/dist/elements/helper/CssCombiner.js +1 -1
  15. package/dist/elements/helper/IndentedTextWriter.js +3 -5
  16. package/dist/elements/helper/Screenshot.js +4 -0
  17. package/dist/elements/helper/contextMenu/ContextMenuHelper.js +59 -53
  18. package/dist/elements/helper/w3color.js +15 -17
  19. package/dist/elements/item/DesignItem.d.ts +1 -0
  20. package/dist/elements/item/DesignItem.js +24 -15
  21. package/dist/elements/item/IDesignItem.d.ts +1 -0
  22. package/dist/elements/services/BaseServiceContainer.js +1 -3
  23. package/dist/elements/services/DefaultServiceBootstrap.js +2 -0
  24. package/dist/elements/services/GlobalContext.js +8 -6
  25. package/dist/elements/services/InstanceServiceContainer.js +1 -4
  26. package/dist/elements/services/ServiceContainer.d.ts +3 -0
  27. package/dist/elements/services/ServiceContainer.js +11 -10
  28. package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js +1 -1
  29. package/dist/elements/services/bindingsService/SpecialTagsBindingService.js +5 -5
  30. package/dist/elements/services/contentService/ContentService.js +2 -1
  31. package/dist/elements/services/copyPasteService/CopyPasteService.d.ts +8 -0
  32. package/dist/elements/services/copyPasteService/CopyPasteService.js +12 -0
  33. package/dist/elements/services/copyPasteService/ICopyPasteService copy.d.ts +0 -0
  34. package/dist/elements/services/copyPasteService/ICopyPasteService copy.js +1 -0
  35. package/dist/elements/services/copyPasteService/ICopyPasteService.d.ts +7 -0
  36. package/dist/elements/services/copyPasteService/ICopyPasteService.js +1 -0
  37. package/dist/elements/services/elementsService/JsonFileElementsService.js +14 -10
  38. package/dist/elements/services/elementsService/PreDefinedElementsService.js +6 -4
  39. package/dist/elements/services/htmlParserService/NodeHtmlParserService.js +2 -1
  40. package/dist/elements/services/htmlWriterService/IHtmlWriterOptions.js +3 -0
  41. package/dist/elements/services/placementService/DefaultPlacementService.d.ts +3 -4
  42. package/dist/elements/services/placementService/DefaultPlacementService.js +10 -10
  43. package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts +3 -4
  44. package/dist/elements/services/placementService/FlexBoxPlacementService.js +3 -3
  45. package/dist/elements/services/placementService/GridPlacementService.d.ts +3 -4
  46. package/dist/elements/services/placementService/GridPlacementService.js +3 -3
  47. package/dist/elements/services/placementService/IPlacementService.d.ts +3 -4
  48. package/dist/elements/services/popupService/PopupService.js +3 -1
  49. package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.js +10 -2
  50. package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js +7 -6
  51. package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js +6 -6
  52. package/dist/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js +1 -1
  53. package/dist/elements/services/propertiesService/propertyEditors/TextPropertyEditor.js +1 -2
  54. package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js +2 -2
  55. package/dist/elements/services/propertiesService/services/AttributesPropertiesService.js +1 -3
  56. package/dist/elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js +1 -4
  57. package/dist/elements/services/propertiesService/services/CommonPropertiesService.js +21 -23
  58. package/dist/elements/services/propertiesService/services/CssPropertiesService.js +196 -185
  59. package/dist/elements/services/propertiesService/services/ListPropertiesService.js +2 -2
  60. package/dist/elements/services/propertiesService/services/Lit2PropertiesService.js +1 -4
  61. package/dist/elements/services/propertiesService/services/LitElementPropertiesService.js +1 -4
  62. package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js +72 -75
  63. package/dist/elements/services/propertiesService/services/PolymerPropertiesService.js +1 -4
  64. package/dist/elements/services/propertiesService/services/UnkownElementPropertiesService.js +1 -3
  65. package/dist/elements/services/selectionService/SelectionService.js +3 -4
  66. package/dist/elements/services/undoService/ChangeGroup.js +6 -2
  67. package/dist/elements/services/undoService/UndoService.js +3 -5
  68. package/dist/elements/services/undoService/transactionItems/AttributeChangeAction.js +5 -0
  69. package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.js +5 -0
  70. package/dist/elements/services/undoService/transactionItems/DeleteAction.js +5 -0
  71. package/dist/elements/services/undoService/transactionItems/InsertAction.js +4 -0
  72. package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js +7 -0
  73. package/dist/elements/services/undoService/transactionItems/PropertyChangeAction.js +5 -0
  74. package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js +27 -24
  75. package/dist/elements/widgets/bindings/BindingsEditor.js +6 -6
  76. package/dist/elements/widgets/codeView/code-view-ace.js +12 -7
  77. package/dist/elements/widgets/codeView/code-view-code-mirror.js +18 -13
  78. package/dist/elements/widgets/codeView/code-view-monaco.js +16 -11
  79. package/dist/elements/widgets/demoView/demoView.js +24 -22
  80. package/dist/elements/widgets/designerView/DesignContext.js +1 -3
  81. package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts +2 -2
  82. package/dist/elements/widgets/designerView/Snaplines.js +8 -5
  83. package/dist/elements/widgets/designerView/designerCanvas.d.ts +6 -3
  84. package/dist/elements/widgets/designerView/designerCanvas.js +122 -99
  85. package/dist/elements/widgets/designerView/designerView.js +89 -87
  86. package/dist/elements/widgets/designerView/extensions/AbstractExtension.js +5 -1
  87. package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension.js +2 -0
  88. package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js +4 -6
  89. package/dist/elements/widgets/designerView/extensions/CanvasExtension copy.d.ts +10 -0
  90. package/dist/elements/widgets/designerView/extensions/CanvasExtension copy.js +29 -0
  91. package/dist/elements/widgets/designerView/extensions/CanvasExtensionProvider copy.d.ts +10 -0
  92. package/dist/elements/widgets/designerView/extensions/CanvasExtensionProvider copy.js +15 -0
  93. package/dist/elements/widgets/designerView/extensions/CanvasExtensionProvider.js +3 -5
  94. package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js +11 -8
  95. package/dist/elements/widgets/designerView/extensions/ExtensionManager.js +1 -0
  96. package/dist/elements/widgets/designerView/extensions/GrayOutExtension.js +1 -0
  97. package/dist/elements/widgets/designerView/extensions/GrayOutExtensionProvider.js +3 -5
  98. package/dist/elements/widgets/designerView/extensions/GridExtensionProvider.js +5 -7
  99. package/dist/elements/widgets/designerView/extensions/InvisibleDivExtension.js +1 -0
  100. package/dist/elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js +3 -5
  101. package/dist/elements/widgets/designerView/extensions/MouseOverExtension.js +1 -0
  102. package/dist/elements/widgets/designerView/extensions/MouseOverExtensionProvider.js +3 -5
  103. package/dist/elements/widgets/designerView/extensions/PathExtension.js +4 -0
  104. package/dist/elements/widgets/designerView/extensions/PermamentCursorExtension.d.ts +10 -0
  105. package/dist/elements/widgets/designerView/extensions/PermamentCursorExtension.js +29 -0
  106. package/dist/elements/widgets/designerView/extensions/PermamentCursorExtensionProvider copy.d.ts +10 -0
  107. package/dist/elements/widgets/designerView/extensions/PermamentCursorExtensionProvider copy.js +15 -0
  108. package/dist/elements/widgets/designerView/extensions/PermamentCursorExtensionProvider.d.ts +10 -0
  109. package/dist/elements/widgets/designerView/extensions/PermamentCursorExtensionProvider.js +15 -0
  110. package/dist/elements/widgets/designerView/extensions/PositionExtension.js +4 -0
  111. package/dist/elements/widgets/designerView/extensions/PrimarySelectionDefaultExtension.js +2 -0
  112. package/dist/elements/widgets/designerView/extensions/ResizeExtension.js +14 -4
  113. package/dist/elements/widgets/designerView/extensions/ResizeExtensionProvider.js +1 -0
  114. package/dist/elements/widgets/designerView/extensions/RotateExtensionProvider.js +3 -5
  115. package/dist/elements/widgets/designerView/extensions/SelectionDefaultExtension.js +1 -0
  116. package/dist/elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js +3 -5
  117. package/dist/elements/widgets/designerView/extensions/TransformOriginExtension.js +3 -0
  118. package/dist/elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js +3 -5
  119. package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js +1 -3
  120. package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.d.ts +22 -0
  121. package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js +82 -0
  122. package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractExtension.d.ts +22 -0
  123. package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractExtension.js +78 -0
  124. package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectangleExtension.d.ts +7 -0
  125. package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectangleExtension.js +20 -0
  126. package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension copy.d.ts +7 -0
  127. package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension copy.js +20 -0
  128. package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension.d.ts +7 -0
  129. package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension.js +20 -0
  130. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtension.d.ts +5 -0
  131. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtension.js +1 -0
  132. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtensionProvider.d.ts +9 -0
  133. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtensionProvider.js +1 -0
  134. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.d.ts +5 -0
  135. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js +1 -0
  136. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.d.ts +9 -0
  137. package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js +1 -0
  138. package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerExtension.d.ts +7 -0
  139. package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerExtension.js +20 -0
  140. package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerPointerExtension.d.ts +7 -0
  141. package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerPointerExtension.js +20 -0
  142. package/dist/elements/widgets/designerView/overlay/EditTextOverlay.js +3 -3
  143. package/dist/elements/widgets/designerView/overlayLayerView.js +35 -25
  144. package/dist/elements/widgets/designerView/tools/DrawElementTool.js +5 -1
  145. package/dist/elements/widgets/designerView/tools/DrawPathTool.d.ts +0 -1
  146. package/dist/elements/widgets/designerView/tools/DrawPathTool.js +4 -3
  147. package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.d.ts +0 -1
  148. package/dist/elements/widgets/designerView/tools/MagicWandSelectorTool.js +4 -5
  149. package/dist/elements/widgets/designerView/tools/PanTool.js +1 -3
  150. package/dist/elements/widgets/designerView/tools/PickColorTool.js +1 -3
  151. package/dist/elements/widgets/designerView/tools/PointerTool.d.ts +2 -1
  152. package/dist/elements/widgets/designerView/tools/PointerTool.js +71 -63
  153. package/dist/elements/widgets/designerView/tools/RectangleSelectorTool.js +16 -15
  154. package/dist/elements/widgets/designerView/tools/TextTool.js +1 -1
  155. package/dist/elements/widgets/designerView/tools/ZoomTool.js +1 -3
  156. package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js +5 -4
  157. package/dist/elements/widgets/paletteView/paletteElements.js +45 -45
  158. package/dist/elements/widgets/paletteView/paletteTreeView.js +53 -51
  159. package/dist/elements/widgets/paletteView/paletteView.js +9 -8
  160. package/dist/elements/widgets/propertyGrid/PropertyGrid.js +24 -19
  161. package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js +12 -8
  162. package/dist/elements/widgets/treeView/treeView.js +102 -96
  163. package/dist/elements/widgets/treeView/treeViewExtended.js +72 -70
  164. package/dist/index.d.ts +2 -1
  165. package/dist/index.js +1 -0
  166. package/package.json +3 -3
  167. package/tsconfig.json +1 -1
  168. package/assets/images/chromeDevtools/accelerometer-back.svg +0 -69
  169. package/assets/images/chromeDevtools/accelerometer-front.svg +0 -28
  170. package/assets/images/chromeDevtools/accessibility-icon.svg +0 -3
  171. package/assets/images/chromeDevtools/add-icon.svg +0 -3
  172. package/assets/images/chromeDevtools/checkboxCheckmark.svg +0 -60
  173. package/assets/images/chromeDevtools/chevrons.svg +0 -62
  174. package/assets/images/chromeDevtools/chromeSelect.svg +0 -1
  175. package/assets/images/chromeDevtools/chromeSelectDark.svg +0 -1
  176. package/assets/images/chromeDevtools/close-icon.svg +0 -5
  177. package/assets/images/chromeDevtools/copy_icon.svg +0 -79
  178. package/assets/images/chromeDevtools/dropdown_7x6_icon.svg +0 -1
  179. package/assets/images/chromeDevtools/elements_panel_icon.svg +0 -1
  180. package/assets/images/chromeDevtools/errorWave.svg +0 -74
  181. package/assets/images/chromeDevtools/error_icon.svg +0 -125
  182. package/assets/images/chromeDevtools/feedback_button_icon.svg +0 -3
  183. package/assets/images/chromeDevtools/help_outline.svg +0 -1
  184. package/assets/images/chromeDevtools/ic_checkmark_16x16.svg +0 -3
  185. package/assets/images/chromeDevtools/ic_command_go_to_line.svg +0 -4
  186. package/assets/images/chromeDevtools/ic_command_go_to_symbol.svg +0 -3
  187. package/assets/images/chromeDevtools/ic_command_help.svg +0 -3
  188. package/assets/images/chromeDevtools/ic_command_open_file.svg +0 -3
  189. package/assets/images/chromeDevtools/ic_command_run_command.svg +0 -3
  190. package/assets/images/chromeDevtools/ic_command_run_snippet.svg +0 -3
  191. package/assets/images/chromeDevtools/ic_delete_filter.svg +0 -1
  192. package/assets/images/chromeDevtools/ic_delete_list.svg +0 -1
  193. package/assets/images/chromeDevtools/ic_dimension_single.svg +0 -4
  194. package/assets/images/chromeDevtools/ic_file_default.svg +0 -3
  195. package/assets/images/chromeDevtools/ic_file_document.svg +0 -3
  196. package/assets/images/chromeDevtools/ic_file_font.svg +0 -3
  197. package/assets/images/chromeDevtools/ic_file_image.svg +0 -3
  198. package/assets/images/chromeDevtools/ic_file_script.svg +0 -3
  199. package/assets/images/chromeDevtools/ic_file_snippet.svg +0 -3
  200. package/assets/images/chromeDevtools/ic_file_stylesheet.svg +0 -3
  201. package/assets/images/chromeDevtools/ic_file_webbundle.svg +0 -5
  202. package/assets/images/chromeDevtools/ic_file_webbundle_inner_request.svg +0 -9
  203. package/assets/images/chromeDevtools/ic_folder_default.svg +0 -3
  204. package/assets/images/chromeDevtools/ic_folder_local.svg +0 -3
  205. package/assets/images/chromeDevtools/ic_folder_network.svg +0 -3
  206. package/assets/images/chromeDevtools/ic_info_black_18dp.svg +0 -1
  207. package/assets/images/chromeDevtools/ic_memory_16x16.svg +0 -6
  208. package/assets/images/chromeDevtools/ic_page_next_16x16_icon.svg +0 -1
  209. package/assets/images/chromeDevtools/ic_page_prev_16x16_icon.svg +0 -1
  210. package/assets/images/chromeDevtools/ic_preview_feature.svg +0 -3
  211. package/assets/images/chromeDevtools/ic_redo_16x16_icon.svg +0 -1
  212. package/assets/images/chromeDevtools/ic_request_response.svg +0 -5
  213. package/assets/images/chromeDevtools/ic_response.svg +0 -4
  214. package/assets/images/chromeDevtools/ic_show_node_16x16.svg +0 -4
  215. package/assets/images/chromeDevtools/ic_suggest_color.svg +0 -6
  216. package/assets/images/chromeDevtools/ic_undo_16x16_icon.svg +0 -1
  217. package/assets/images/chromeDevtools/ic_warning_black_18dp.svg +0 -1
  218. package/assets/images/chromeDevtools/issue-cross-icon.svg +0 -70
  219. package/assets/images/chromeDevtools/issue-exclamation-icon.svg +0 -64
  220. package/assets/images/chromeDevtools/issue-questionmark-icon.svg +0 -82
  221. package/assets/images/chromeDevtools/issue-text-icon.svg +0 -56
  222. package/assets/images/chromeDevtools/largeIcons.svg +0 -1629
  223. package/assets/images/chromeDevtools/lighthouse_logo.svg +0 -158
  224. package/assets/images/chromeDevtools/link_icon.svg +0 -1
  225. package/assets/images/chromeDevtools/mediumIcons.svg +0 -1101
  226. package/assets/images/chromeDevtools/network_conditions_icon.svg +0 -6
  227. package/assets/images/chromeDevtools/network_panel_icon.svg +0 -1
  228. package/assets/images/chromeDevtools/node_search_icon.svg +0 -1
  229. package/assets/images/chromeDevtools/preview_feature_video_thumbnail.svg +0 -92
  230. package/assets/images/chromeDevtools/refresh_12x12_icon.svg +0 -1
  231. package/assets/images/chromeDevtools/resizeDiagonal.svg +0 -1
  232. package/assets/images/chromeDevtools/resizeHorizontal.svg +0 -1
  233. package/assets/images/chromeDevtools/resizeVertical.svg +0 -1
  234. package/assets/images/chromeDevtools/securityIcons.svg +0 -278
  235. package/assets/images/chromeDevtools/settings_14x14_icon.svg +0 -1
  236. package/assets/images/chromeDevtools/smallIcons.svg +0 -1277
  237. package/assets/images/chromeDevtools/sources_panel_icon.svg +0 -1
  238. package/assets/images/chromeDevtools/survey_feedback_icon.svg +0 -1
  239. package/assets/images/chromeDevtools/switcherIcon.svg +0 -57
  240. package/assets/images/chromeDevtools/three_dots_menu_icon.svg +0 -1
  241. package/assets/images/chromeDevtools/trash_bin_icon.svg +0 -1
  242. package/assets/images/chromeDevtools/treeoutlineTriangles.svg +0 -70
  243. package/assets/images/chromeDevtools/warning_icon.svg +0 -83
@@ -1,5 +1,9 @@
1
1
  // for screenshots to be genrated properly, you need to select the current tab only in media source selector
2
2
  export class Screenshot {
3
+ static _canvas;
4
+ static _context;
5
+ static _video;
6
+ static _captureStream;
3
7
  static _disableStream() {
4
8
  Screenshot._captureStream.getTracks().forEach(track => track.stop());
5
9
  Screenshot._canvas = null;
@@ -1,7 +1,62 @@
1
1
  import { css } from "@node-projects/base-custom-webcomponent";
2
2
  export class ContextMenuHelper {
3
- constructor() {
4
- }
3
+ static _contextMenuCss = css `
4
+ .context-menu {
5
+ display: none;
6
+ position: absolute;
7
+ z-index: 999999;
8
+ padding: 0px 0;
9
+ background-color: rgb(255 255 255 / 93%);
10
+ border: solid 1px #dfdfdf;
11
+ box-shadow: 1px 1px 2px #cfcfcf;
12
+ cursor: default;
13
+ user-select: none;
14
+ border-radius: 12px;
15
+ }
16
+
17
+ .context-menu hr {
18
+ margin: 0 0 5px 5%;
19
+ height: 1px;
20
+ width: 90%;
21
+ background-color: #e2e2e2;
22
+ }
23
+
24
+ .context-menu--active {
25
+ display: block;
26
+ }
27
+
28
+ .context-menu__items {
29
+ list-style: none;
30
+ margin: 8px;
31
+ padding: 0;
32
+ }
33
+
34
+ .context-menu__item {
35
+ display: block;
36
+ margin-bottom: 4px;
37
+ }
38
+
39
+ .context-menu__item:last-child {
40
+ margin-bottom: 0;
41
+ }
42
+
43
+ .context-menu__link {
44
+ display: block;
45
+ padding: 0px 12px;
46
+ color: #0066aa;
47
+ text-decoration: none;
48
+ }
49
+
50
+ .context-menu__link:hover {
51
+ color: #fff;
52
+ background-color: #0066aa;
53
+ }`;
54
+ _shadowRoot;
55
+ _element;
56
+ _closeBound;
57
+ _keyUpBound;
58
+ _closeOnDownBound;
59
+ _closeOnUpBound;
5
60
  static addContextMenu(element, items) {
6
61
  element.oncontextmenu = (event) => {
7
62
  event.preventDefault();
@@ -22,6 +77,8 @@ export class ContextMenuHelper {
22
77
  ctxMenu.positionMenu(e);
23
78
  return ctxMenu;
24
79
  }
80
+ constructor() {
81
+ }
25
82
  init(shadowRoot, element) {
26
83
  this._shadowRoot = shadowRoot;
27
84
  this._element = element;
@@ -153,54 +210,3 @@ export class ContextMenuHelper {
153
210
  }
154
211
  }
155
212
  }
156
- ContextMenuHelper._contextMenuCss = css `
157
- .context-menu {
158
- display: none;
159
- position: absolute;
160
- z-index: 999999;
161
- padding: 0px 0;
162
- background-color: rgb(255 255 255 / 93%);
163
- border: solid 1px #dfdfdf;
164
- box-shadow: 1px 1px 2px #cfcfcf;
165
- cursor: default;
166
- user-select: none;
167
- border-radius: 12px;
168
- }
169
-
170
- .context-menu hr {
171
- margin: 0 0 5px 5%;
172
- height: 1px;
173
- width: 90%;
174
- background-color: #e2e2e2;
175
- }
176
-
177
- .context-menu--active {
178
- display: block;
179
- }
180
-
181
- .context-menu__items {
182
- list-style: none;
183
- margin: 8px;
184
- padding: 0;
185
- }
186
-
187
- .context-menu__item {
188
- display: block;
189
- margin-bottom: 4px;
190
- }
191
-
192
- .context-menu__item:last-child {
193
- margin-bottom: 0;
194
- }
195
-
196
- .context-menu__link {
197
- display: block;
198
- padding: 0px 12px;
199
- color: #0066aa;
200
- text-decoration: none;
201
- }
202
-
203
- .context-menu__link:hover {
204
- color: #fff;
205
- background-color: #0066aa;
206
- }`;
@@ -1,22 +1,20 @@
1
1
  /* w3color.js ver.1.18 by w3schools.com (Do not remove this line)*/
2
2
  export class w3color {
3
- constructor() {
4
- this.red = 0;
5
- this.green = 0;
6
- this.blue = 0;
7
- this.hue = 0;
8
- this.sat = 0;
9
- this.lightness = 0;
10
- this.whiteness = 0;
11
- this.blackness = 0;
12
- this.cyan = 0;
13
- this.magenta = 0;
14
- this.yellow = 0;
15
- this.black = 0;
16
- this.ncol = 'R';
17
- this.opacity = 1;
18
- this.valid = false;
19
- }
3
+ red = 0;
4
+ green = 0;
5
+ blue = 0;
6
+ hue = 0;
7
+ sat = 0;
8
+ lightness = 0;
9
+ whiteness = 0;
10
+ blackness = 0;
11
+ cyan = 0;
12
+ magenta = 0;
13
+ yellow = 0;
14
+ black = 0;
15
+ ncol = 'R';
16
+ opacity = 1;
17
+ valid = false;
20
18
  toRgbString() {
21
19
  return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";
22
20
  }
@@ -21,6 +21,7 @@ export declare class DesignItem implements IDesignItem {
21
21
  get name(): string;
22
22
  get id(): string;
23
23
  set id(value: string);
24
+ get isRootItem(): boolean;
24
25
  private _childArray;
25
26
  get hasChildren(): boolean;
26
27
  children(): IterableIterator<IDesignItem>;
@@ -7,16 +7,10 @@ const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
7
7
  const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
8
8
  const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
9
9
  export class DesignItem {
10
- constructor(node, serviceContainer, instanceServiceContainer) {
11
- this.appliedDesignerExtensions = new Map();
12
- this._childArray = [];
13
- this.node = node;
14
- this.serviceContainer = serviceContainer;
15
- this.instanceServiceContainer = instanceServiceContainer;
16
- this.attributes = new Map();
17
- this.styles = new Map();
18
- DesignItem._designItemMap.set(node, this);
19
- }
10
+ node;
11
+ serviceContainer;
12
+ instanceServiceContainer;
13
+ appliedDesignerExtensions = new Map();
20
14
  replaceNode(newNode) {
21
15
  DesignItem._designItemMap.delete(this.node);
22
16
  DesignItem._designItemMap.set(newNode, this);
@@ -32,9 +26,12 @@ export class DesignItem {
32
26
  get hasAttributes() {
33
27
  return this.attributes.size > 0;
34
28
  }
29
+ attributes;
35
30
  get hasStyles() {
36
31
  return this.styles.size > 0;
37
32
  }
33
+ styles;
34
+ static _designItemMap = new WeakMap();
38
35
  get element() {
39
36
  return this.node;
40
37
  }
@@ -47,6 +44,10 @@ export class DesignItem {
47
44
  set id(value) {
48
45
  this.element.id = value;
49
46
  }
47
+ get isRootItem() {
48
+ return this.instanceServiceContainer.contentService.rootDesignItem === this;
49
+ }
50
+ _childArray = [];
50
51
  get hasChildren() {
51
52
  return this._childArray.length > 0;
52
53
  }
@@ -103,11 +104,11 @@ export class DesignItem {
103
104
  set content(value) {
104
105
  this.node.textContent = value;
105
106
  }
107
+ _hideAtDesignTime;
106
108
  get hideAtDesignTime() {
107
109
  return this._hideAtDesignTime;
108
110
  }
109
111
  set hideAtDesignTime(value) {
110
- var _a;
111
112
  this._hideAtDesignTime = value;
112
113
  if (value)
113
114
  this.attributes.set(hideAtDesignTimeAttributeName, "");
@@ -115,16 +116,16 @@ export class DesignItem {
115
116
  this.attributes.delete(hideAtDesignTimeAttributeName);
116
117
  if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
117
118
  if (!value)
118
- this.element.style.display = (_a = this.styles.get('display')) !== null && _a !== void 0 ? _a : "";
119
+ this.element.style.display = this.styles.get('display') ?? "";
119
120
  else
120
121
  this.element.style.display = 'none';
121
122
  }
122
123
  }
124
+ _hideAtRunTime;
123
125
  get hideAtRunTime() {
124
126
  return this._hideAtRunTime;
125
127
  }
126
128
  set hideAtRunTime(value) {
127
- var _a;
128
129
  this._hideAtRunTime = value;
129
130
  if (value)
130
131
  this.attributes.set(hideAtRunTimeAttributeName, "");
@@ -132,11 +133,12 @@ export class DesignItem {
132
133
  this.attributes.delete(hideAtRunTimeAttributeName);
133
134
  if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
134
135
  if (!value)
135
- this.element.style.opacity = (_a = this.styles.get('opacity')) !== null && _a !== void 0 ? _a : "";
136
+ this.element.style.opacity = this.styles.get('opacity') ?? "";
136
137
  else
137
138
  this.element.style.opacity = '0.3';
138
139
  }
139
140
  }
141
+ _lockAtDesignTime;
140
142
  get lockAtDesignTime() {
141
143
  return this._lockAtDesignTime;
142
144
  }
@@ -198,6 +200,14 @@ export class DesignItem {
198
200
  }
199
201
  }
200
202
  }
203
+ constructor(node, serviceContainer, instanceServiceContainer) {
204
+ this.node = node;
205
+ this.serviceContainer = serviceContainer;
206
+ this.instanceServiceContainer = instanceServiceContainer;
207
+ this.attributes = new Map();
208
+ this.styles = new Map();
209
+ DesignItem._designItemMap.set(node, this);
210
+ }
201
211
  openGroup(title, affectedItems) {
202
212
  return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);
203
213
  }
@@ -236,4 +246,3 @@ export class DesignItem {
236
246
  this.instanceServiceContainer.undoService.execute(action);
237
247
  }
238
248
  }
239
- DesignItem._designItemMap = new WeakMap();
@@ -9,6 +9,7 @@ export interface IDesignItem {
9
9
  readonly nodeType: NodeType;
10
10
  readonly name: string;
11
11
  readonly id: string;
12
+ readonly isRootItem: boolean;
12
13
  readonly hasAttributes: boolean;
13
14
  readonly attributes: Map<string, string>;
14
15
  readonly hasStyles: boolean;
@@ -1,7 +1,5 @@
1
1
  export class BaseServiceContainer {
2
- constructor() {
3
- this._services = new Map();
4
- }
2
+ _services = new Map();
5
3
  getLastService(service) {
6
4
  let list = this._services.get(service);
7
5
  if (list && list.length)
@@ -43,6 +43,7 @@ import { SnaplinesProviderService } from './placementService/SnaplinesProviderSe
43
43
  import { PrepareElementsForDesignerService } from './instanceService/PrepareElementsForDesignerService';
44
44
  import { DragDropService } from './dragDropService/DragDropService';
45
45
  import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
46
+ import { CopyPasteService } from './copyPasteService/CopyPasteService';
46
47
  export function createDefaultServiceContainer() {
47
48
  let serviceContainer = new ServiceContainer();
48
49
  serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -61,6 +62,7 @@ export function createDefaultServiceContainer() {
61
62
  serviceContainer.register("elementAtPointService", new ElementAtPointService());
62
63
  serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
63
64
  serviceContainer.register("dragDropService", new DragDropService());
65
+ serviceContainer.register("copyPasteService", new CopyPasteService());
64
66
  serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
65
67
  new ResizeExtensionProvider(false),
66
68
  new InvisibleDivExtensionProvider()
@@ -2,13 +2,11 @@
2
2
  //Service container should not be something with changeing information, so global context is for tool and color (and maybe more)
3
3
  import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
4
4
  export class GlobalContext {
5
+ _serviceContainer;
6
+ _tool;
7
+ _strokeColor = 'black';
8
+ _fillBrush = 'transparent';
5
9
  constructor(serviceContainer) {
6
- this._strokeColor = 'black';
7
- this._fillBrush = 'transparent';
8
- this.onToolChanged = new TypedEvent();
9
- this.finishedWithTool = () => this.tool = null;
10
- this.onStrokeColorChanged = new TypedEvent();
11
- this.onFillBrushChanged = new TypedEvent();
12
10
  this._serviceContainer = serviceContainer;
13
11
  }
14
12
  set tool(tool) {
@@ -25,6 +23,8 @@ export class GlobalContext {
25
23
  get tool() {
26
24
  return this._tool;
27
25
  }
26
+ onToolChanged = new TypedEvent();
27
+ finishedWithTool = () => this.tool = null;
28
28
  set strokeColor(strokeColor) {
29
29
  if (this._strokeColor !== strokeColor) {
30
30
  const oldStrokeColor = this._strokeColor;
@@ -35,6 +35,7 @@ export class GlobalContext {
35
35
  get strokeColor() {
36
36
  return this._strokeColor;
37
37
  }
38
+ onStrokeColorChanged = new TypedEvent();
38
39
  set fillBrush(fillBrush) {
39
40
  this._fillBrush = fillBrush;
40
41
  if (this._fillBrush !== fillBrush) {
@@ -46,4 +47,5 @@ export class GlobalContext {
46
47
  get fillBrush() {
47
48
  return this._fillBrush;
48
49
  }
50
+ onFillBrushChanged = new TypedEvent();
49
51
  }
@@ -1,10 +1,7 @@
1
1
  import { BaseServiceContainer } from './BaseServiceContainer';
2
2
  import { DesignContext } from '../widgets/designerView/DesignContext';
3
3
  export class InstanceServiceContainer extends BaseServiceContainer {
4
- constructor() {
5
- super(...arguments);
6
- this.designContext = new DesignContext();
7
- }
4
+ designContext = new DesignContext();
8
5
  get undoService() {
9
6
  return this.getLastService('undoService');
10
7
  }
@@ -20,6 +20,7 @@ import { IElementAtPointService } from './elementAtPointService/IElementAtPointS
20
20
  import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
21
21
  import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
22
22
  import { IDragDropService } from './dragDropService/IDragDropService';
23
+ import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
23
24
  interface ServiceNameMap {
24
25
  "propertyService": IPropertiesService;
25
26
  "containerService": IPlacementService;
@@ -34,6 +35,7 @@ interface ServiceNameMap {
34
35
  "elementAtPointService": IElementAtPointService;
35
36
  "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
36
37
  "dragDropService": IDragDropService;
38
+ "copyPasteService": ICopyPasteService;
37
39
  }
38
40
  export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
39
41
  readonly config: {
@@ -57,5 +59,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
57
59
  get elementAtPointService(): IElementAtPointService;
58
60
  get prepareElementsForDesignerService(): IPrepareElementsForDesignerService;
59
61
  get dragDropService(): IDragDropService;
62
+ get copyPasteService(): ICopyPasteService;
60
63
  }
61
64
  export {};
@@ -3,16 +3,14 @@ import { CodeViewMonaco } from "../widgets/codeView/code-view-monaco";
3
3
  import { DemoView } from '../widgets/demoView/demoView';
4
4
  import { GlobalContext } from './GlobalContext';
5
5
  export class ServiceContainer extends BaseServiceContainer {
6
- constructor() {
7
- super(...arguments);
8
- this.config = {
9
- codeViewWidget: CodeViewMonaco,
10
- demoViewWidget: DemoView
11
- };
12
- this.designerExtensions = new Map();
13
- this.globalContext = new GlobalContext(this);
14
- this.designerTools = new Map();
15
- }
6
+ config = {
7
+ codeViewWidget: CodeViewMonaco,
8
+ demoViewWidget: DemoView
9
+ };
10
+ designerExtensions = new Map();
11
+ designerContextMenuExtensions;
12
+ globalContext = new GlobalContext(this);
13
+ designerTools = new Map();
16
14
  get bindingService() {
17
15
  return this.getLastService('bindingService');
18
16
  }
@@ -52,4 +50,7 @@ export class ServiceContainer extends BaseServiceContainer {
52
50
  get dragDropService() {
53
51
  return this.getLastService('dragDropService');
54
52
  }
53
+ get copyPasteService() {
54
+ return this.getLastService('copyPasteService');
55
+ }
55
56
  }
@@ -1,6 +1,7 @@
1
1
  import { BindingMode } from '../../item/BindingMode';
2
2
  import { BindingTarget } from "../../item/BindingTarget.js";
3
3
  export class BaseCustomWebcomponentBindingsService {
4
+ static type = 'base-custom-webcomponent-binding';
4
5
  getBindings(designItem) {
5
6
  let bindings = null;
6
7
  for (let a of designItem.attributes) {
@@ -66,4 +67,3 @@ export class BaseCustomWebcomponentBindingsService {
66
67
  return true;
67
68
  }
68
69
  }
69
- BaseCustomWebcomponentBindingsService.type = 'base-custom-webcomponent-binding';
@@ -2,11 +2,12 @@ import { BindingTarget } from "../../item/BindingTarget.js";
2
2
  import { BindingMode } from "../../item/BindingMode.js";
3
3
  /* Service wich read binings from special HTMl elements -> like tag-binding */
4
4
  export class SpecialTagsBindingService {
5
+ static type = 'visu-tagbinding-binding';
6
+ _bindingTagName = "visu-tagbinding";
7
+ _elementIdAttribute = "elemnt-id";
8
+ _propertyNameAttribute = "property";
9
+ _isStyleNameAttribute = "is-style";
5
10
  constructor() {
6
- this._bindingTagName = "visu-tagbinding";
7
- this._elementIdAttribute = "elemnt-id";
8
- this._propertyNameAttribute = "property";
9
- this._isStyleNameAttribute = "is-style";
10
11
  }
11
12
  getBindings(designItem) {
12
13
  const bindings = [];
@@ -37,4 +38,3 @@ export class SpecialTagsBindingService {
37
38
  return true;
38
39
  }
39
40
  }
40
- SpecialTagsBindingService.type = 'visu-tagbinding-binding';
@@ -1,7 +1,8 @@
1
1
  import { TypedEvent } from '@node-projects/base-custom-webcomponent';
2
2
  export class ContentService {
3
3
  constructor(rootElement) {
4
- this.onContentChanged = new TypedEvent();
5
4
  this.rootDesignItem = rootElement;
6
5
  }
6
+ rootDesignItem;
7
+ onContentChanged = new TypedEvent();
7
8
  }
@@ -0,0 +1,8 @@
1
+ import { IDesignItem } from "../../item/IDesignItem.js";
2
+ import { ICopyPasteService } from "./ICopyPasteService.js";
3
+ import { ServiceContainer } from '../ServiceContainer';
4
+ import { InstanceServiceContainer } from '../InstanceServiceContainer';
5
+ export declare class CopyPasteService implements ICopyPasteService {
6
+ copyItems(designItems: IDesignItem[]): Promise<void>;
7
+ getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
8
+ }
@@ -0,0 +1,12 @@
1
+ import { DomConverter } from "../../widgets/designerView/DomConverter.js";
2
+ export class CopyPasteService {
3
+ async copyItems(designItems) {
4
+ const copyText = DomConverter.ConvertToString(designItems, null);
5
+ await navigator.clipboard.writeText(copyText);
6
+ }
7
+ async getPasteItems(serviceContainer, instanceServiceContainer) {
8
+ const text = await navigator.clipboard.readText();
9
+ const parserService = serviceContainer.htmlParserService;
10
+ return await parserService.parse(text, serviceContainer, instanceServiceContainer);
11
+ }
12
+ }
@@ -0,0 +1,7 @@
1
+ import { IDesignItem } from "../../item/IDesignItem.js";
2
+ import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
3
+ import { ServiceContainer } from "../ServiceContainer.js";
4
+ export interface ICopyPasteService {
5
+ copyItems(designItems: IDesignItem[]): Promise<void>;
6
+ getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
7
+ }
@@ -1,6 +1,20 @@
1
1
  import { LazyLoader } from '@node-projects/base-custom-webcomponent';
2
2
  // Reads a Json File and provides the Elements listed there
3
3
  export class JsonFileElementsService {
4
+ _name;
5
+ get name() { return this._name; }
6
+ _elementList;
7
+ _resolveStored;
8
+ _rejectStored;
9
+ getElements() {
10
+ if (this._elementList)
11
+ return Promise.resolve(this._elementList);
12
+ if (!this._resolveStored) {
13
+ this._resolveStored = [];
14
+ this._rejectStored = [];
15
+ }
16
+ return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
17
+ }
4
18
  constructor(name, file) {
5
19
  this._name = name;
6
20
  LazyLoader.LoadText(file).then(data => {
@@ -25,16 +39,6 @@ export class JsonFileElementsService {
25
39
  }
26
40
  });
27
41
  }
28
- get name() { return this._name; }
29
- getElements() {
30
- if (this._elementList)
31
- return Promise.resolve(this._elementList);
32
- if (!this._resolveStored) {
33
- this._resolveStored = [];
34
- this._rejectStored = [];
35
- }
36
- return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
37
- }
38
42
  isIElementDefintion(object) {
39
43
  return object != null && object.tag != null;
40
44
  }
@@ -1,4 +1,10 @@
1
1
  export class PreDefinedElementsService {
2
+ _name;
3
+ get name() { return this._name; }
4
+ _elementList;
5
+ getElements() {
6
+ return Promise.resolve(this._elementList);
7
+ }
2
8
  constructor(name, data) {
3
9
  this._name = name;
4
10
  this._elementList = [];
@@ -9,10 +15,6 @@ export class PreDefinedElementsService {
9
15
  this._elementList.push({ tag: element });
10
16
  });
11
17
  }
12
- get name() { return this._name; }
13
- getElements() {
14
- return Promise.resolve(this._elementList);
15
- }
16
18
  isIElementDefintion(object) {
17
19
  return object != null && object.tag != null;
18
20
  }
@@ -4,8 +4,8 @@ import { newElementFromString } from "../../helper/ElementHelper";
4
4
  // Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
5
5
  // attributes from their DOM, so you loose Data
6
6
  export class NodeHtmlParserService {
7
+ _parserUrl;
7
8
  constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
8
- this._parseDiv = document.createElement("div");
9
9
  this._parserUrl = parserUrl;
10
10
  }
11
11
  async parse(html, serviceContainer, instanceServiceContainer) {
@@ -22,6 +22,7 @@ export class NodeHtmlParserService {
22
22
  }
23
23
  return designItems;
24
24
  }
25
+ _parseDiv = document.createElement("div");
25
26
  _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
26
27
  let designItem = null;
27
28
  if (item.nodeType == 1) {
@@ -1,2 +1,5 @@
1
1
  export class IHtmlWriterOptions {
2
+ beautifyOutput;
3
+ compressCssToShorthandProperties;
4
+ writeDesignerProperties;
2
5
  }
@@ -1,7 +1,6 @@
1
1
  import type { IPoint } from '../../../interfaces/IPoint.js';
2
2
  import type { IPlacementService } from './IPlacementService.js';
3
3
  import type { IDesignItem } from '../../item/IDesignItem.js';
4
- import { IDesignerMousePoint } from '../../../interfaces/IDesignerMousePoint.js';
5
4
  import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
6
5
  export declare class DefaultPlacementService implements IPlacementService {
7
6
  serviceForContainer(container: IDesignItem): boolean;
@@ -9,9 +8,9 @@ export declare class DefaultPlacementService implements IPlacementService {
9
8
  canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
10
9
  getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
11
10
  private calculateTrack;
12
- placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): IPoint;
13
- place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): void;
11
+ placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
12
+ place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
14
13
  enterContainer(container: IDesignItem, items: IDesignItem[]): void;
15
14
  leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
16
- finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IDesignerMousePoint, newPoint: IDesignerMousePoint, items: IDesignItem[]): void;
15
+ finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
17
16
  }