@xh/hoist 79.0.0-SNAPSHOT.1764710211647 → 79.0.0-SNAPSHOT.1764713950962

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 79.0.0-SNAPSHOT - unreleased
+
 ## 78.1.0 - 2025-12-02
 
 ### ⚙️ Technical

package/build/types/desktop/cmp/dash/canvas/DashCanvasModel.d.ts

@@ -20,6 +20,11 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
     maxRows?: number;
     /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     containerPadding?: [number, number];
+    /**
+     * Whether an overlay with an Add View button should be rendered
+     * when the canvas is empty. Default true.
+     */
+    showAddViewButtonWhenEmpty?: boolean;
 }
 export interface DashCanvasItemState {
     layout: DashCanvasItemLayout;
@@ -45,7 +50,9 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     compact: boolean;
     margin: [number, number];
     containerPadding: [number, number];
+    DROPPING_ELEM_ID: string;
     maxRows: number;
+    showAddViewButtonWhenEmpty: boolean;
     /** Current number of rows in canvas */
     get rows(): number;
     get isEmpty(): boolean;
@@ -54,7 +61,7 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     isResizing: boolean;
     private isLoadingState;
     get rglLayout(): any[];
-    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems }: DashCanvasConfig);
+    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems, showAddViewButtonWhenEmpty }: DashCanvasConfig);
     /** Removes all views from the canvas */
     clear(): void;
     /**
@@ -77,6 +84,16 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
         width?: number;
         height?: number;
     }): DashCanvasViewModel;
+    dropViewIntoCanvas(specId: string, opts: {
+        title: string;
+        state: any;
+        layout: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        };
+    }, rglLayout: any[]): DashCanvasViewModel;
     /**
      * Remove a view from the DashCanvas
      * @param id - DashCanvasViewModel id to remove from the container

package/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -98,7 +98,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         ),
                         ...rglOptions
                     }),
-                    emptyContainerOverlay()
+                    emptyContainerOverlay({omit: !model.showAddViewButtonWhenEmpty})
                 ],
                 [TEST_ID]: testId
             })

package/desktop/cmp/dash/canvas/DashCanvasModel.ts

@@ -50,6 +50,12 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
 
     /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     containerPadding?: [number, number];
+
+    /**
+     * Whether an overlay with an Add View button should be rendered
+     * when the canvas is empty. Default true.
+     */
+    showAddViewButtonWhenEmpty?: boolean;
 }
 
 export interface DashCanvasItemState {
@@ -86,7 +92,9 @@ export class DashCanvasModel
     //-----------------------------
     // Public properties
     //-----------------------------
+    DROPPING_ELEM_ID = '__dropping-elem__';
     maxRows: number;
+    showAddViewButtonWhenEmpty: boolean;
 
     /** Current number of rows in canvas */
     get rows(): number {
@@ -106,21 +114,25 @@ export class DashCanvasModel
     private isLoadingState: boolean;
 
     get rglLayout() {
-        return this.layout.map(it => {
-            const dashCanvasView = this.getView(it.i),
-                {autoHeight, viewSpec} = dashCanvasView;
-
-            return {
-                ...it,
-                resizeHandles: autoHeight
-                    ? ['w', 'e']
-                    : ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
-                maxH: viewSpec.maxHeight,
-                minH: viewSpec.minHeight,
-                maxW: viewSpec.maxWidth,
-                minW: viewSpec.minWidth
-            };
-        });
+        return this.layout
+            .map(it => {
+                const dashCanvasView = this.getView(it.i);
+                if (!dashCanvasView) return null;
+
+                const {autoHeight, viewSpec} = dashCanvasView;
+
+                return {
+                    ...it,
+                    resizeHandles: autoHeight
+                        ? ['w', 'e']
+                        : ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
+                    maxH: viewSpec.maxHeight,
+                    minH: viewSpec.minHeight,
+                    maxW: viewSpec.maxWidth,
+                    minW: viewSpec.minWidth
+                };
+            })
+            .filter(Boolean);
     }
 
     constructor({
@@ -139,7 +151,8 @@ export class DashCanvasModel
         margin = [10, 10],
         maxRows = Infinity,
         containerPadding = margin,
-        extraMenuItems
+        extraMenuItems,
+        showAddViewButtonWhenEmpty = true
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -187,6 +200,7 @@ export class DashCanvasModel
         this.emptyText = emptyText;
         this.addViewButtonText = addViewButtonText;
         this.extraMenuItems = extraMenuItems;
+        this.showAddViewButtonWhenEmpty = showAddViewButtonWhenEmpty;
 
         this.loadState(initialState);
         this.state = this.buildState();
@@ -261,6 +275,27 @@ export class DashCanvasModel
         return this.addViewInternal(specId, {title, layout, state});
     }
 
+    @action dropViewIntoCanvas(
+        specId: string,
+        opts: {
+            title: string;
+            state: any;
+            layout: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+            };
+        },
+        rglLayout: any[]
+    ): DashCanvasViewModel {
+        const newViewModel: DashCanvasViewModel = this.addViewInternal(specId, opts),
+            droppingItem: any = rglLayout.find(it => it.i === this.DROPPING_ELEM_ID);
+        droppingItem.i = newViewModel.id;
+        this.onRglLayoutChange(rglLayout);
+        return newViewModel;
+    }
+
     /**
      * Remove a view from the DashCanvas
      * @param id - DashCanvasViewModel id to remove from the container
@@ -386,6 +421,8 @@ export class DashCanvasModel
 
     onRglLayoutChange(rglLayout) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
+        if (rglLayout.some(it => it.i === this.DROPPING_ELEM_ID)) return;
+
         this.setLayout(rglLayout);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1764710211647",
+  "version": "79.0.0-SNAPSHOT.1764713950962",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",