fix(demo-free-layout): auto close panel when sidebar disabled (#941)

apps/demo-free-layout/src/components/sidebar/node-form-panel.tsx

@@ -31,6 +31,7 @@ export const NodeFormPanel: React.FC<NodeFormPanelProps> = ({ nodeId }) => {
     });
   }, []);
   const node = document.getNode(nodeId);
+  const sidebarDisabled = node?.getNodeMeta<FlowNodeMeta>()?.sidebarDisabled === true;
   /**
    * Listen readonly
    */
@@ -57,7 +58,7 @@ export const NodeFormPanel: React.FC<NodeFormPanelProps> = ({ nodeId }) => {
       }
     });
     return () => toDispose.dispose();
-  }, [selection, handleClose, node]);
+  }, [selection, node, handleClose]);
   /**
    * Close when node disposed
    */
@@ -69,13 +70,17 @@ export const NodeFormPanel: React.FC<NodeFormPanelProps> = ({ nodeId }) => {
       return () => toDispose.dispose();
     }
     return () => {};
-  }, [node]);
-
-  if (!node || node.getNodeMeta<FlowNodeMeta>().sidebarDisabled === true) {
-    return null;
-  }
+  }, [node, sidebarDisabled, handleClose]);
+  /**
+   * Cloze when sidebar disabled
+   */
+  useEffect(() => {
+    if (!node || sidebarDisabled || playground.config.readonly) {
+      handleClose();
+    }
+  }, [node, sidebarDisabled, playground.config.readonly]);
 
-  if (playground.config.readonly) {
+  if (!node || sidebarDisabled || playground.config.readonly) {
     return null;
   }
 

packages/plugins/panel-manager-plugin/src/components/panel-layer/float-panel.tsx

@@ -45,7 +45,7 @@ export const FloatPanel: React.FC<{ area: Area }> = ({ area }) => {
         ...sizeStyle,
       }}
     >
-      {panelManager.config.autoResize && (
+      {panelManager.config.autoResize && panel.current.elements.length > 0 && (
         <ResizeBar size={size} isVertical={area === 'right'} onResize={onResize} />
       )}
       {node.current}