Build features to use component in web-component-designer #4 -> fix dot placment in designer

Author: Cedric Franke

src/designer/ElementInteractionService.ts

@@ -1,5 +1,5 @@
 import { IDesignerCanvas, IElementInteractionService } from "@node-projects/web-component-designer";
-import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent";
+import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent.js";
 
 export default class ElementInteractionService implements IElementInteractionService {
     stopEventHandling(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element) {

src/designer/TabPlacementService.ts …c/designer/SliderShowPlacementService.tssrc/designer/TabPlacementService.ts renamed to src/designer/SliderShowPlacementService.ts src/designer/TabPlacementService.ts renamed to src/designer/SliderShowPlacementService.ts

@@ -1,5 +1,5 @@
 import { DefaultPlacementService, IDesignItem, IPlacementView, IPoint } from "@node-projects/web-component-designer";
-import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent";
+import { AutomaticSliderShowWebcomponent } from "../slider/AutomaticSliderShowWebcomponent.js";
 
 export default class SliderShowPlacementService extends DefaultPlacementService {
     override serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration) {

src/slider/AutomaticSliderShowWebcomponent.ts

@@ -121,17 +121,6 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
 
     ready() {
         this._parseAttributesToProperties();
-        let count = 1;
-        for (let index = 0; index < this.children.length; index++) {
-            const dotElement = document.createElement('div');
-            dotElement.className = "dot-element";
-            dotElement.id = "dot-element-" + count;
-            this._dots.appendChild(dotElement);
-            count++;
-        }
-
-        (<HTMLDivElement>this._dots.children[0]).classList.add("dot-active");
-
         (<HTMLDivElement>this._getDomElement('left-arrow')).onclick = () => this.prevSlide();
         (<HTMLDivElement>this._getDomElement('right-arrow')).onclick = () => this.nextSlide();
     }
@@ -151,6 +140,18 @@ export class AutomaticSliderShowWebcomponent extends BaseCustomWebComponentConst
             this._slideIndex = 0;
         }
 
+        let count = 1;
+        this._dots.innerHTML = "";
+        for (let index = 0; index < this.children.length; index++) {
+            const dotElement = document.createElement('div');
+            dotElement.className = "dot-element";
+            dotElement.id = "dot-element-" + count;
+            this._dots.appendChild(dotElement);
+            count++;
+        }
+
+        (<HTMLDivElement>this._dots.children[this._slideIndex]).classList.add("dot-active");
+
         let i = 0;
         for (const item of this.children as any as HTMLElement[]) {
             item.setAttribute('slot', i === this._slideIndex ? 'main' : '');

web-component-designer.json

@@ -5,10 +5,7 @@
                 "./dist/designer/ElementInteractionService.js"
             ],
             "containerService": [
-                "./dist/designer/TabPlacementService.js"
-            ],
-            "attachedPropertyService": [
-                "./dist/designer/AttachedPropertiesService.js"
+                "./dist/designer/SliderShowPlacementService.js"
             ]
         }
     }