feat: allowing widget and block plugins to resize when they are expandable

src/components/atoms/Plugin/IFrame/hooks.ts

@@ -139,12 +139,12 @@ export default function useHook({
         display: visible ? undefined : "none",
         // TODO: width iFrameSize?.[0]
         width: visible
-          ? autoResize == "width-only" || autoResize == "both"
+          ? autoResize == "height-only" || autoResize == "both"
             ? "100%"
             : iFrameSize?.[0]
           : "0px",
         height: visible
-          ? autoResize == "height-only" || autoResize == "both"
+          ? autoResize == "width-only" || autoResize == "both"
             ? "100%"
             : iFrameSize?.[1]
           : "0px",

src/components/molecules/Visualizer/Block/index.tsx

@@ -44,6 +44,7 @@ export default function BlockComponent<P = any, PP = any>({
   ) : (
     <Wrapper editable={props?.isEditable} onClick={props?.onClick} selected={props?.isSelected}>
       <Plugin
+        autoResize="height-only"
         pluginId={props.block?.pluginId}
         extensionId={props.block?.extensionId}
         sourceCode={(props.block as any)?.__REEARTH_SOURCECODE} // for debugging

src/components/molecules/Visualizer/Plugin/hooks.ts

@@ -13,6 +13,7 @@ export default function ({
   pluginId,
   extensionId,
   pluginBaseUrl,
+  autoResize,
   extensionType,
   block,
   layer,
@@ -22,6 +23,7 @@ export default function ({
   pluginId?: string;
   extensionId?: string;
   pluginBaseUrl?: string;
+  autoResize?: "both" | "width-only" | "height-only";
   extensionType?: string;
   layer?: Layer;
   widget?: Widget;
@@ -51,12 +53,14 @@ export default function ({
       ? `${pluginBaseUrl}/${`${pluginId}/${extensionId}`.replace(/\.\./g, "")}.js`
       : undefined;
 
-  const autoResize = useMemo((): "both" | "width-only" | "height-only" | undefined => {
-    if (!!widget?.extended?.horizontally && !!widget?.extended?.vertically) return "both";
-    if (widget?.extended?.horizontally) return "width-only";
-    if (widget?.extended?.vertically) return "height-only";
+  const autoResizeDirection = useMemo((): "both" | "width-only" | "height-only" | undefined => {
+    if (autoResize) return autoResize;
+    const { horizontally, vertically } = widget?.extended ?? {};
+    if (horizontally && vertically) return "both";
+    if (vertically) return "width-only";
+    if (horizontally) return "height-only";
     return undefined;
-  }, [widget?.extended?.horizontally, widget?.extended?.vertically]);
+  }, [widget?.extended, autoResize]);
 
   return {
     skip: !staticExposed,
@@ -67,7 +71,7 @@ export default function ({
     onMessage,
     onPreInit,
     onDispose,
-    autoResize,
+    autoResizeDirection,
   };
 }
 

src/components/molecules/Visualizer/Plugin/index.tsx

@@ -23,6 +23,7 @@ export type Props = {
   pluginId?: string;
   extensionId?: string;
   extensionType?: string;
+  autoResize?: "both" | "width-only" | "height-only";
   visible?: boolean;
   iFrameProps?: PluginProps["iFrameProps"];
   property?: any;
@@ -40,6 +41,7 @@ export default function Plugin({
   pluginId,
   extensionId,
   extensionType,
+  autoResize,
   iFrameProps,
   visible,
   pluginBaseUrl = "/plugins",
@@ -53,7 +55,7 @@ export default function Plugin({
     skip,
     src,
     isMarshalable,
-    autoResize,
+    autoResizeDirection,
     onPreInit,
     onDispose,
     exposed,
@@ -64,6 +66,7 @@ export default function Plugin({
     extensionId,
     extensionType,
     pluginBaseUrl,
+    autoResize,
     layer,
     widget,
     block,
@@ -75,7 +78,7 @@ export default function Plugin({
       className={className}
       src={src}
       sourceCode={sourceCode}
-      autoResize={autoResize}
+      autoResize={autoResizeDirection}
       iFrameProps={iFrameProps}
       canBeVisible={visible}
       isMarshalable={isMarshalable}