fix: widget align system issues (#124)

* fix: inner section disappearing * fix published
reearth · Nov 11, 2021 · 3bc9faf · 3bc9faf
1 parent 886302f
commit 3bc9faf
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 deletions.
diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx
@@ -34,10 +34,10 @@ export default function MobileZone({
   children,
 }: PropsWithChildren<Props>) {
   const filteredSections = useMemo(() => {
-    return sections.filter(s => !!zone?.[s]);
-  }, [zone]);
+    return sections.filter(s => !!zone?.[s] || (s === "center" && children));
+  }, [zone, children]);
 
-  const [pos, setPos] = useState(filteredSections.indexOf("center"));
+  const [pos, setPos] = useState(filteredSections.length === 3 ? 1 : 0);
   const publishedTheme = usePublishTheme(sceneProperty.theme);
 
   return (

diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
@@ -81,16 +81,18 @@ const WidgetAlignSystem: React.FC<Props> = ({
             isEditable={isEditable}
             isBuilt={isBuilt}
             layoutConstraint={layoutConstraint}>
-            <ZoneComponent
-              zoneName="inner"
-              zone={alignSystem?.inner}
-              sceneProperty={sceneProperty}
-              pluginProperty={pluginProperty}
-              pluginBaseUrl={pluginBaseUrl}
-              isEditable={isEditable}
-              isBuilt={isBuilt}
-              layoutConstraint={layoutConstraint}
-            />
+            {alignSystem?.inner && (
+              <ZoneComponent
+                zoneName="inner"
+                zone={alignSystem?.inner}
+                sceneProperty={sceneProperty}
+                pluginProperty={pluginProperty}
+                pluginBaseUrl={pluginBaseUrl}
+                isEditable={isEditable}
+                isBuilt={isBuilt}
+                layoutConstraint={layoutConstraint}
+              />
+            )}
           </MobileZone>
         ) : (
           <ZoneComponent

diff --git a/src/components/organisms/EarthEditor/CanvasArea/convert.ts b/src/components/organisms/EarthEditor/CanvasArea/convert.ts
@@ -215,11 +215,15 @@ export const convertWidgets = (
       }),
     );
 
-  const widgetZone = (zone?: Maybe<WidgetZoneType>): WidgetZone => {
+  const widgetZone = (zone?: Maybe<WidgetZoneType>): WidgetZone | undefined => {
+    const left = widgetSection(zone?.left);
+    const center = widgetSection(zone?.center);
+    const right = widgetSection(zone?.right);
+    if (!left && !center && !right) return;
     return {
-      left: widgetSection(zone?.left),
-      center: widgetSection(zone?.center),
-      right: widgetSection(zone?.right),
+      left,
+      center,
+      right,
     };
   };
 

diff --git a/src/components/organisms/Published/hooks.ts b/src/components/organisms/Published/hooks.ts
@@ -93,28 +93,38 @@ export default (alias?: string) => {
       );
 
     const widgetZone = (zone?: WidgetZone | null) => {
+      const left = widgetSection(zone?.left);
+      const center = widgetSection(zone?.center);
+      const right = widgetSection(zone?.right);
+      if (!left && !center && !right) return;
       return {
-        left: widgetSection(zone?.left),
-        center: widgetSection(zone?.center),
-        right: widgetSection(zone?.right),
+        left,
+        center,
+        right,
       };
     };
 
     const widgetSection = (section?: WidgetSection | null) => {
+      const top = widgetArea(section?.top);
+      const middle = widgetArea(section?.middle);
+      const bottom = widgetArea(section?.bottom);
+      if (!top && !middle && !bottom) return;
       return {
-        top: widgetArea(section?.top),
-        middle: widgetArea(section?.middle),
-        bottom: widgetArea(section?.bottom),
+        top,
+        middle,
+        bottom,
       };
     };
 
     const widgetArea = (area?: WidgetArea | null) => {
       const align = area?.align.toLowerCase() as Alignment | undefined;
+      const areaWidgets: Widget[] | undefined = area?.widgetIds
+        .map<Widget | undefined>(w => widgets?.find(w2 => w === w2.id))
+        .filter((w): w is Widget => !!w);
+      if (!areaWidgets || areaWidgets.length < 1) return;
       return {
         align: align ?? "start",
-        widgets: area?.widgetIds
-          .map<Widget | undefined>(w => widgets.find(w2 => w === w2.id))
-          .filter((w): w is Widget => !!w),
+        widgets: areaWidgets,
       };
     };