Fixed errors with Widget in Widget

ioBroker · Apr 18, 2024 · 1fc8b7d · 1fc8b7d
1 parent 6962ec8
commit 1fc8b7d
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 18 deletions.
diff --git a/.releaseconfig.json b/.releaseconfig.json
@@ -1,6 +1,7 @@
 {
-  "plugins": ["iobroker", "license"],
+  "plugins": ["iobroker", "license", "lerna"],
+  "ioPackage": "packages/iobroker.vis-2",
   "exec": {
-    "before_commit": "npm run build"
+    "before_commit": "npm run fix-release && npm run build"
   }
 }
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@alcalzone/release-script": "^3.7.0",
     "@alcalzone/release-script-plugin-iobroker": "^3.7.0",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
+    "@alcalzone/release-script-plugin-lerna": "^3.7.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
     "@devbookhq/splitter": "^1.4.2",

diff --git a/packages/iobroker.vis-2/src/src/Editor.jsx b/packages/iobroker.vis-2/src/src/Editor.jsx
@@ -1023,6 +1023,8 @@ class Editor extends Runtime {
         // set timestamp
         project.___settings.ts = `${Date.now()}.${Math.random().toString(36).substring(7)}`;
 
+        Runtime.syncMultipleWidgets(project);
+
         if (!ignoreHistory) {
             // do not save history too often
             this.saveHistory(project);
@@ -1036,7 +1038,7 @@ class Editor extends Runtime {
         this.savingTimer = setTimeout(async () => {
             this.savingTimer = null;
 
-            // remove all special structures
+            // remove all special structures. project will be cloned in unsyncMultipleWidgets
             project = unsyncMultipleWidgets(project);
 
             const projectStr = JSON.stringify(project, null, 2);

diff --git a/packages/iobroker.vis-2/src/src/Palette/Widget.jsx b/packages/iobroker.vis-2/src/src/Palette/Widget.jsx
@@ -13,8 +13,8 @@ import {
 
 import { I18n, Utils } from '@iobroker/adapter-react-v5';
 
+import { store } from '@/Store';
 import helpers from '../Components/WizardHelpers';
-import { store } from '../Store';
 
 const IMAGE_TYPES = ['.png', '.jpg', '.svg', '.gif', '.apng', '.avif', '.webp'];
 

diff --git a/packages/iobroker.vis-2/src/src/Runtime.jsx b/packages/iobroker.vis-2/src/src/Runtime.jsx
@@ -175,7 +175,7 @@ class Runtime extends GenericApp {
     onHashChange = () => {
         const currentPath = VisEngine.getCurrentPath();
         this.changeView(currentPath.view)
-            .then(() => {});
+            .catch(e => console.error(`Cannot change view: ${e}`));
     };
 
     onProjectChange = (id, fileName) => {
@@ -337,7 +337,7 @@ class Runtime extends GenericApp {
         });
     }
 
-    syncMultipleWidgets(project) {
+    static syncMultipleWidgets(project) {
         project = project || store.getState().visProject;
         Object.keys(project).forEach(view => {
             if (view === '___settings') {
@@ -537,21 +537,21 @@ class Runtime extends GenericApp {
         }
 
         // copy multi-views to corresponding views
-        this.syncMultipleWidgets(project);
+        Runtime.syncMultipleWidgets(project);
 
         if (this.state.runtime) {
             if (project.___settings.reloadOnEdit !== false) {
                 this.subscribedProject = projectName;
                 // subscribe on changes
-                this.socket.subscribeFiles(this.adapterId, `${projectName}/*`, this.onProjectChange);
+                await this.socket.subscribeFiles(this.adapterId, `${projectName}/*`, this.onProjectChange);
             }
 
             // set overflow mode in runtime mode
             window.document.body.style.overflow = project.___settings?.bodyOverflow || 'auto';
         } else {
             this.subscribedProject = projectName;
             // subscribe on changes
-            this.socket.subscribeFiles(this.adapterId, `${projectName}/*`, this.onProjectChange);
+            await this.socket.subscribeFiles(this.adapterId, `${projectName}/*`, this.onProjectChange);
         }
 
         store.dispatch(updateProject(project));
@@ -902,8 +902,6 @@ class Runtime extends GenericApp {
     }
 
     showSmallProjectsDialog() {
-        const { visProject, activeUser } = store.getState();
-
         return <Dialog
             open={!0}
             maxWidth="sm"

diff --git a/packages/iobroker.vis-2/src/src/Utils.tsx b/packages/iobroker.vis-2/src/src/Utils.tsx
@@ -6,7 +6,7 @@ export const DndPreview = () => {
     const preview = usePreview();
     const display = preview.display;
     // TODO: How to fix this?
-    const { item, style } = (preview as unknown as {item: { preview: React.JSX.Element }; style: React.CSSProperties });
+    const { item, style } = (preview as unknown as { item: { preview: React.JSX.Element }; style: React.CSSProperties });
     if (!display) {
         return null;
     }

diff --git a/packages/iobroker.vis-2/src/src/Vis/visBaseWidget.tsx b/packages/iobroker.vis-2/src/src/Vis/visBaseWidget.tsx
@@ -115,6 +115,7 @@ export interface VisBaseWidgetState {
     gap?: number;
     draggable?: boolean;
     showRelativeMoveMenu?: boolean;
+    usedInWidget: boolean;
 }
 
 export interface VisBaseWidgetMovement {
@@ -223,6 +224,7 @@ class VisBaseWidget<TState extends Partial<VisBaseWidgetState> = VisBaseWidgetSt
                 props.view,
                 props.editMode,
             ),
+            usedInWidget: widget.usedInWidget,
             hideHelper: false,
             gap: style.position === 'relative' ? (isVarFinite(props.context.views[props.view].settings?.rowGap) ? parseFloat(props.context.views[props.view].settings?.rowGap as string) : 0) : 0,
         } as TState & VisBaseWidgetState;
@@ -490,6 +492,11 @@ class VisBaseWidget<TState extends Partial<VisBaseWidgetState> = VisBaseWidgetSt
             newState.selectedOne = selectedOne;
         }
 
+        if (!!widget.usedInWidget !== !!state.usedInWidget) {
+            newState = newState || {};
+            newState.usedInWidget = !!widget.usedInWidget;
+        }
+
         return newState;
     }
 
@@ -632,8 +639,7 @@ class VisBaseWidget<TState extends Partial<VisBaseWidgetState> = VisBaseWidgetSt
 
         let parentDiv: HTMLElement;
         if (Object.prototype.hasOwnProperty.call(this.props.refParent, 'current')) {
-            // @ts-expect-error support ref and direct HTMLElement
-            parentDiv = parentDiv.current;
+            parentDiv = this.props.refParent.current;
         } else {
             parentDiv = this.props.refParent as any as HTMLElement;
         }
@@ -905,8 +911,7 @@ class VisBaseWidget<TState extends Partial<VisBaseWidgetState> = VisBaseWidgetSt
                 if (this.props.isRelative) {
                     let parentDiv: HTMLElement;
                     if (Object.prototype.hasOwnProperty.call(this.props.refParent, 'current')) {
-                        // @ts-expect-error support ref and direct HTMLElement
-                        parentDiv = parentDiv.current;
+                        parentDiv = this.props.refParent.current;
                     } else {
                         parentDiv = this.props.refParent as any as HTMLElement;
                     }

diff --git a/packages/iobroker.vis-2/src/src/Vis/visUtils.tsx b/packages/iobroker.vis-2/src/src/Vis/visUtils.tsx
@@ -793,7 +793,7 @@ function findWidgetUsages(
     views: Project,
     view: string,
     widgetId: AnyWidgetId,
-    _result: { view: string; wid: AnyWidgetId; attr: string }[],
+    _result?: { view: string; wid: AnyWidgetId; attr: string }[],
 ): { view: string; wid: AnyWidgetId; attr: string }[] {
     if (view) {
         _result = _result || [];

diff --git a/packages/iobroker.vis-2/src/src/types.d.ts b/packages/iobroker.vis-2/src/src/types.d.ts
@@ -575,7 +575,7 @@ interface SingleWidget  {
     /** This widget was taken from a marketplace */
     marketplace?: any;
     /** Indicator that this widget is used in another widget (e.g., in panel) */
-    usedInWidget?: AnyWidgetId;
+    usedInWidget?: boolean;
 }
 
 interface GroupData extends WidgetData {