fix(group): fix group status rendering issue #WIK-15171 (#838)

.changeset/five-apples-itch.md

@@ -0,0 +1,8 @@
+---
+'@plait/common': patch
+'@plait/core': patch
+---
+
+add onStable observable stream to emit callback after new children have rendered completely
+
+render group state by onStable status to resolve group throw exception when group element is in front of contained elements

packages/common/src/core/group.component.ts

@@ -1,7 +1,9 @@
-import { OnInit, OnDestroy, ViewContainerRef, ChangeDetectorRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy, Component, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
     OnContextChanged,
     PlaitBoard,
+    PlaitContextService,
     PlaitGroup,
     PlaitPluginElementContext,
     getElementsInGroup,
@@ -21,7 +23,9 @@ import { CommonPluginElement } from './plugin-element';
 })
 export class GroupComponent extends CommonPluginElement<PlaitGroup, PlaitBoard>
     implements OnInit, OnDestroy, OnContextChanged<PlaitGroup, PlaitBoard> {
-    constructor(protected cdr: ChangeDetectorRef) {
+    contextService = inject(PlaitContextService);
+
+    constructor(protected cdr: ChangeDetectorRef, private destroyRef: DestroyRef) {
         super(cdr);
     }
 
@@ -46,16 +50,20 @@ export class GroupComponent extends CommonPluginElement<PlaitGroup, PlaitBoard>
     ngOnInit(): void {
         super.ngOnInit();
         this.initializeGenerator();
+        this.contextService
+            .onStable()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                const elementsInGroup = getElementsInGroup(this.board, this.element, false, true);
+                const isPartialSelectGroup =
+                    elementsInGroup.some(item => isSelectedElementOrGroup(this.board, item)) &&
+                    !elementsInGroup.every(item => isSelectedElementOrGroup(this.board, item));
+                this.groupGenerator.processDrawing(this.element, this.getElementG(), isPartialSelectGroup);
+            });
     }
 
     onContextChanged(
         value: PlaitPluginElementContext<PlaitGroup, PlaitBoard>,
         previous: PlaitPluginElementContext<PlaitGroup, PlaitBoard>
-    ) {
-        const elementsInGroup = getElementsInGroup(this.board, value.element, false, true);
-        const isPartialSelectGroup =
-            elementsInGroup.some(item => isSelectedElementOrGroup(this.board, item)) &&
-            !elementsInGroup.every(item => isSelectedElementOrGroup(this.board, item));
-        this.groupGenerator.processDrawing(value.element, this.getElementG(), isPartialSelectGroup);
-    }
+    ) {}
 }

packages/core/src/board/board.component.ts

@@ -17,7 +17,8 @@ import {
     QueryList,
     SimpleChanges,
     ViewChild,
-    ViewContainerRef
+    ViewContainerRef,
+    inject
 } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { RoughSVG } from 'roughjs/bin/svg';
@@ -75,7 +76,7 @@ import { BoardTransforms } from '../transforms/board';
 import { PlaitTheme } from '../interfaces/theme';
 import { withHotkey } from '../plugins/with-hotkey';
 import { HOST_CLASS_NAME } from '../constants';
-import { PlaitContextService } from '../services/image-context.service';
+import { PlaitContextService } from '../services/context.service';
 import { isPreventTouchMove } from '../utils/touch';
 import { ZOOM_STEP } from '../constants/zoom';
 import { withRelatedFragment } from '../plugins/with-related-fragment';
@@ -178,6 +179,8 @@ export class PlaitBoardComponent implements BoardComponentInterface, OnInit, OnC
 
     listRender!: ListRender;
 
+    contextService = inject(PlaitContextService);
+
     constructor(
         public cdr: ChangeDetectorRef,
         public viewContainerRef: ViewContainerRef,
@@ -437,6 +440,7 @@ export class PlaitBoardComponent implements BoardComponentInterface, OnInit, OnC
 
     private updateListRender() {
         this.listRender.update(this.board.children, this.initializeChildrenContext());
+        this.contextService.nextStable();
     }
 
     private initializeChildrenContext(): PlaitChildrenContext {

packages/core/src/core/list-render.ts

@@ -125,7 +125,7 @@ const createPluginComponent = (
     viewContainerRef: ViewContainerRef,
     childrenContext: PlaitChildrenContext
 ) => {
-    const componentRef = viewContainerRef.createComponent(componentType);
+    const componentRef = viewContainerRef.createComponent(componentType, { injector: viewContainerRef.injector });
     const instance = componentRef.instance;
     instance.context = context;
     componentRef.changeDetectorRef.detectChanges();

packages/core/src/public-api.ts

@@ -14,5 +14,5 @@ export * from './plugins/with-selection';
 export * from './plugins/with-moving';
 export * from './plugins/with-options';
 export * from './testing';
-export * from './services/image-context.service';
+export * from './services/context.service';
 export * from './utils/debug';

packages/core/src/services/image-context.service.ts → packages/core/src/services/context.service.ts

@@ -1,8 +1,11 @@
 import { Injectable } from '@angular/core';
 import { ImageEntry } from '../interfaces';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class PlaitContextService {
+    private _stable = new Subject();
+
     private uploadingFiles: ImageEntry[] = [];
 
     getUploadingFile(url: string) {
@@ -16,4 +19,12 @@ export class PlaitContextService {
     removeUploadingFile(fileEntry: ImageEntry) {
         this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
     }
+
+    onStable() {
+        return this._stable.asObservable();
+    }
+
+    nextStable() {
+        this._stable.next('');
+    }
 }