From 0452740cdd62f61440a8c9173ebc5b6f08916a60 Mon Sep 17 00:00:00 2001
From: keiya sasaki <keiya.s.0210@gmail.com>
Date: Thu, 2 Feb 2023 16:19:38 +0900
Subject: [PATCH] fix: WAS bug on reearth/core (#416)

fix: was bug
---
 .../Widgets/WidgetAlignSystem/MobileZone.tsx  |  9 +----
 .../Crust/Widgets/WidgetAlignSystem/index.tsx | 12 +++++-
 .../Crust/Widgets/WidgetAlignSystem/utils.ts  | 16 ++++++++
 .../Crust/Widgets/useWidgetAlignSystem.ts     | 37 ++++++++++---------
 4 files changed, 48 insertions(+), 26 deletions(-)
 create mode 100644 src/core/Crust/Widgets/WidgetAlignSystem/utils.ts

diff --git a/src/core/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx b/src/core/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
index 60eb5b0b2..63a5379a2 100644
--- a/src/core/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
+++ b/src/core/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
@@ -7,6 +7,7 @@ import { styled } from "@reearth/theme";
 
 import Area from "./Area";
 import type { WidgetZone, WidgetLayoutConstraint, Theme, WidgetProps } from "./types";
+import { filterSections } from "./utils";
 
 export type Props = {
   children?: ReactNode;
@@ -18,7 +19,6 @@ export type Props = {
   renderWidget?: (props: WidgetProps) => ReactNode;
 };
 
-const sections = ["left", "center", "right"] as const;
 const areas = ["top", "middle", "bottom"] as const;
 
 export default function MobileZone({
@@ -31,12 +31,7 @@ export default function MobileZone({
   renderWidget,
 }: Props) {
   const filteredSections = useMemo(() => {
-    return sections.filter(
-      s =>
-        areas.filter(a => zone?.[s]?.[a]?.widgets?.find(w => !invisibleWidgetIDs?.includes(w.id)))
-          .length ||
-        (s === "center" && children),
-    );
+    return filterSections(zone, invisibleWidgetIDs, s => s === "center" && children);
   }, [zone, children, invisibleWidgetIDs]);
 
   const initialPos = useMemo(() => (filteredSections.length === 3 ? 1 : 0), [filteredSections]);
diff --git a/src/core/Crust/Widgets/WidgetAlignSystem/index.tsx b/src/core/Crust/Widgets/WidgetAlignSystem/index.tsx
index 3b1ee9775..3f72ab883 100644
--- a/src/core/Crust/Widgets/WidgetAlignSystem/index.tsx
+++ b/src/core/Crust/Widgets/WidgetAlignSystem/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useMemo } from "react";
 import { GridWrapper } from "react-align";
 
 import { styled } from "@reearth/theme";
@@ -13,6 +13,7 @@ import type {
   Theme,
   WidgetProps,
 } from "./types";
+import { filterSections } from "./utils";
 import ZoneComponent from "./Zone";
 
 export type {
@@ -65,6 +66,13 @@ const WidgetAlignSystem: React.FC<Props> = ({
   });
   const Zone = isMobile ? MobileZone : ZoneComponent;
 
+  const hasInner = useMemo(() => {
+    if (!alignSystem?.inner) {
+      return;
+    }
+    return !!filterSections(alignSystem?.inner, invisibleWidgetIDs).length;
+  }, [alignSystem, invisibleWidgetIDs]);
+
   return (
     <WidetAlignSystemWrapper editorMode={editing}>
       <GridWrapper
@@ -79,7 +87,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
           invisibleWidgetIDs={invisibleWidgetIDs}
           theme={theme}
           renderWidget={renderWidget}>
-          {(!isMobile || alignSystem?.inner) && (
+          {(!isMobile || hasInner) && (
             <ZoneComponent
               zoneName="inner"
               invisibleWidgetIDs={invisibleWidgetIDs}
diff --git a/src/core/Crust/Widgets/WidgetAlignSystem/utils.ts b/src/core/Crust/Widgets/WidgetAlignSystem/utils.ts
new file mode 100644
index 000000000..e73aee74a
--- /dev/null
+++ b/src/core/Crust/Widgets/WidgetAlignSystem/utils.ts
@@ -0,0 +1,16 @@
+import { WidgetZone } from "./types";
+
+const sections = ["left", "center", "right"] as const;
+const areas = ["top", "middle", "bottom"] as const;
+
+export const filterSections = (
+  zone?: WidgetZone,
+  invisibleWidgetIDs?: string[],
+  cb?: (s: (typeof sections)[number]) => void,
+) => {
+  return sections.filter(
+    s =>
+      areas.filter(a => zone?.[s]?.[a]?.widgets?.find(w => !invisibleWidgetIDs?.includes(w.id)))
+        .length || cb?.(s),
+  );
+};
diff --git a/src/core/Crust/Widgets/useWidgetAlignSystem.ts b/src/core/Crust/Widgets/useWidgetAlignSystem.ts
index 269b80754..021f1e28d 100644
--- a/src/core/Crust/Widgets/useWidgetAlignSystem.ts
+++ b/src/core/Crust/Widgets/useWidgetAlignSystem.ts
@@ -43,8 +43,7 @@ export default ({ alignSystem }: { alignSystem: WidgetAlignSystem | undefined })
 
     setOverrideAlignSystem(alignSystem => {
       if (!alignSystem) return alignSystem;
-      let next = { ...alignSystem };
-      Object.keys(next).forEach(zoneName_ => {
+      Object.keys(alignSystem).forEach(zoneName_ => {
         const zoneName = zoneName_ as keyof WidgetAlignSystem;
         const zone = alignSystem[zoneName];
         if (zone) {
@@ -59,19 +58,6 @@ export default ({ alignSystem }: { alignSystem: WidgetAlignSystem | undefined })
                   const sourceIndex = area.widgets.findIndex(w => w.id === widgetId);
                   if (sourceIndex !== -1) {
                     [widget] = area.widgets.splice(sourceIndex, 1);
-                    next = {
-                      ...next,
-                      [zoneName]: {
-                        ...next[zoneName],
-                        [sectionName]: {
-                          ...(next[zoneName]?.[sectionName] || {}),
-                          [areaName]: {
-                            ...(next[zoneName]?.[sectionName]?.[areaName] || {}),
-                            ...area,
-                          },
-                        },
-                      },
-                    };
                   }
                 }
               });
@@ -79,7 +65,7 @@ export default ({ alignSystem }: { alignSystem: WidgetAlignSystem | undefined })
           });
         }
       });
-      return { ...next };
+      return { ...alignSystem };
     });
 
     setTimeout(() => {
@@ -118,7 +104,24 @@ export default ({ alignSystem }: { alignSystem: WidgetAlignSystem | undefined })
           targetArea.widgets.push(widget);
         }
 
-        return { ...alignSystem };
+        if (targetArea.widgets.length) {
+          const next = {
+            ...alignSystem,
+            [options.zone]: {
+              ...alignSystem[options.zone],
+              [options.section]: {
+                ...(alignSystem[options.zone]?.[options.section] || {}),
+                [options.area]: {
+                  ...(alignSystem[options.zone]?.[options.section]?.[options.area] || {}),
+                  widgets: [...targetArea.widgets],
+                },
+              },
+            },
+          };
+          return { ...next };
+        }
+
+        return alignSystem;
       });
     }, 0);
   }, []);