From 2adcdac5bea393ee381993f75408c72c61b6b82b Mon Sep 17 00:00:00 2001
From: KaWaite <kyle.waite@outlook.com>
Date: Thu, 21 Jul 2022 11:30:12 +0900
Subject: [PATCH 1/4] fix pointer events issues

---
 .../Visualizer/Widget/BuiltinWrapper.tsx          | 10 ++++++++++
 .../Visualizer/Widget/Storytelling/index.tsx      | 15 +++++----------
 .../molecules/Visualizer/Widget/index.tsx         | 10 ++++++----
 .../Visualizer/WidgetAlignSystem/Area.tsx         | 10 ++--------
 .../Visualizer/WidgetAlignSystem/Zone.tsx         |  3 ---
 .../Visualizer/WidgetAlignSystem/index.tsx        |  5 +----
 6 files changed, 24 insertions(+), 29 deletions(-)
 create mode 100644 src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx

diff --git a/src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx b/src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx
new file mode 100644
index 000000000..7e63595d1
--- /dev/null
+++ b/src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+const BuiltinWrapper: React.FC<{ editing?: boolean; children?: ReactNode }> = ({
+  editing,
+  children,
+}) => {
+  return <div style={{ pointerEvents: editing ? "none" : "auto" }}>{children}</div>;
+};
+
+export default BuiltinWrapper;
diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx b/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
index d08235177..6fd27694b 100644
--- a/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
@@ -25,7 +25,7 @@ export type Property = {
   stories?: StoryType[];
 };
 
-const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element | null => {
+const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
   const publishedTheme = usePublishTheme(sceneProperty.theme);
 
   const isExtraSmallWindow = useMedia("(max-width: 420px)");
@@ -49,7 +49,7 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
   });
 
   return (
-    <div>
+    <>
       <Menu
         publishedTheme={publishedTheme}
         ref={wrapperRef}
@@ -98,9 +98,7 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={!selected?.index}
-          onClick={handlePrev}
-          // sometimes react-align goes wrong
-          style={editing ? { pointerEvents: "none" } : undefined}>
+          onClick={handlePrev}>
           <Icon icon="arrowLeft" size={24} />
         </ArrowButton>
         <Current align="center" justify="space-between">
@@ -125,13 +123,11 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={selected?.index === stories.length - 1}
-          onClick={handleNext}
-          // sometimes react-align goes wrong
-          style={editing ? { pointerEvents: "none" } : undefined}>
+          onClick={handleNext}>
           <Icon icon="arrowRight" size={24} />
         </ArrowButton>
       </Widget>
-    </div>
+    </>
   );
 };
 
@@ -149,7 +145,6 @@ const Widget = styled.div<{
   height: 80px;
   width: ${({ extended }) => (extended ? "100%" : "500px")};
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-  pointer-events: auto;
 
   ${({ floating }) =>
     floating
diff --git a/src/components/molecules/Visualizer/Widget/index.tsx b/src/components/molecules/Visualizer/Widget/index.tsx
index a07585aea..93687dd28 100644
--- a/src/components/molecules/Visualizer/Widget/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/index.tsx
@@ -8,6 +8,7 @@ import Plugin, {
 } from "../Plugin";
 
 import builtin from "./builtin";
+import BuiltinWrapper from "./BuiltinWrapper";
 
 export type { WidgetLayout } from "../Plugin";
 
@@ -23,7 +24,6 @@ export type Props<PP = any, SP = any> = {
   pluginBaseUrl?: string;
   layout?: WidgetLayout;
   editing?: boolean;
-  iFrameProps?: PluginProps["iFrameProps"];
   onExtend?: (id: string, extended: boolean | undefined) => void;
 };
 
@@ -38,8 +38,8 @@ export default function WidgetComponent<PP = any, SP = any>({
   extended,
   pluginBaseUrl,
   layout,
-  iFrameProps,
   onExtend,
+  editing,
   ...props
 }: Props<PP, SP>) {
   const { align, location } = layout ?? {};
@@ -84,7 +84,9 @@ export default function WidgetComponent<PP = any, SP = any>({
     : "both";
 
   return Builtin ? (
-    <Builtin {...props} widget={w} layout={layout} extended={extended} onExtend={onExtend} />
+    <BuiltinWrapper editing={editing}>
+      <Builtin {...props} widget={w} layout={layout} extended={extended} onExtend={onExtend} />
+    </BuiltinWrapper>
   ) : (
     <Plugin
       autoResize={autoResize}
@@ -96,7 +98,7 @@ export default function WidgetComponent<PP = any, SP = any>({
       pluginBaseUrl={pluginBaseUrl}
       property={props.pluginProperty}
       widget={w}
-      iFrameProps={iFrameProps}
+      iFrameProps={{ style: { pointerEvents: editing ? "none" : "auto" } }}
       onRender={handleRender}
       onResize={handleResize}
     />
diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx
index 2d71e4679..2bff1c5dc 100644
--- a/src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx
+++ b/src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx
@@ -1,5 +1,5 @@
 import { omit, pick } from "lodash-es";
-import { useCallback, useMemo, useState, CSSProperties } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { GridArea, GridItem } from "react-align";
 import { useDeepCompareEffect } from "react-use";
 
@@ -15,7 +15,6 @@ type Props = {
   area: "top" | "middle" | "bottom";
   align: Alignment;
   widgets?: Widget[];
-  editing?: boolean;
   isEditable?: boolean;
   isBuilt?: boolean;
   sceneProperty?: any;
@@ -33,7 +32,6 @@ export default function Area({
   widgets,
   pluginProperty,
   layoutConstraint,
-  editing,
   ...props
 }: Props) {
   const theme = useTheme();
@@ -81,7 +79,7 @@ export default function Area({
             index={i}
             extended={extended ?? widget.extended}
             extendable={extendable2}
-            style={editing ? undefined : pointerEventsAutoStyle}>
+            style={{ pointerEvents: "none" }}>
             {({ editing }) => (
               <W
                 widget={widget}
@@ -94,7 +92,6 @@ export default function Area({
                 extended={extended}
                 editing={editing}
                 onExtend={handleExtend}
-                iFrameProps={editing ? undefined : iFrameProps}
                 {...props}
               />
             )}
@@ -105,9 +102,6 @@ export default function Area({
   ) : null;
 }
 
-const pointerEventsAutoStyle: CSSProperties = { pointerEvents: "auto" };
-const iFrameProps = { style: pointerEventsAutoStyle };
-
 function useOverriddenExtended({
   layout,
   widgets,
diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx
index 68fffefc5..9e0db6219 100644
--- a/src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx
+++ b/src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx
@@ -9,7 +9,6 @@ export type Props = {
   zone?: WidgetZone;
   zoneName: "inner" | "outer";
   layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
-  editing?: boolean;
   isEditable?: boolean;
   isBuilt?: boolean;
   sceneProperty?: any;
@@ -28,7 +27,6 @@ export default function Zone({
   sceneProperty,
   pluginProperty,
   pluginBaseUrl,
-  editing,
   isEditable,
   isBuilt,
   children,
@@ -56,7 +54,6 @@ export default function Zone({
                 pluginBaseUrl={pluginBaseUrl}
                 isEditable={isEditable}
                 isBuilt={isBuilt}
-                editing={editing}
               />
             ),
           )}
diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
index a356b7b49..2891cf190 100644
--- a/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
+++ b/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
@@ -93,7 +93,6 @@ const WidgetAlignSystem: React.FC<Props> = ({
                 isEditable={isEditable}
                 isBuilt={isBuilt}
                 layoutConstraint={layoutConstraint}
-                editing={editing}
               />
             )}
           </MobileZone>
@@ -106,8 +105,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
             pluginBaseUrl={pluginBaseUrl}
             isEditable={isEditable}
             isBuilt={isBuilt}
-            layoutConstraint={layoutConstraint}
-            editing={editing}>
+            layoutConstraint={layoutConstraint}>
             <ZoneComponent
               zoneName="inner"
               zone={alignSystem?.inner}
@@ -117,7 +115,6 @@ const WidgetAlignSystem: React.FC<Props> = ({
               isEditable={isEditable}
               isBuilt={isBuilt}
               layoutConstraint={layoutConstraint}
-              editing={editing}
             />
           </ZoneComponent>
         )}

From d22c2b74f2f913389d25138877e01912bb5010b8 Mon Sep 17 00:00:00 2001
From: KaWaite <kyle.waite@outlook.com>
Date: Thu, 21 Jul 2022 12:13:00 +0900
Subject: [PATCH 2/4] remove unused prop

---
 .../molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx
index 834d09156..79e6149f1 100644
--- a/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx
+++ b/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx
@@ -15,7 +15,6 @@ export type Props = {
   layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
   isEditable?: boolean;
   isBuilt?: boolean;
-  editing?: boolean;
   sceneProperty?: any;
   pluginProperty?: { [key: string]: any };
   pluginBaseUrl?: string;
@@ -33,7 +32,6 @@ export default function MobileZone({
   pluginBaseUrl,
   isEditable,
   isBuilt,
-  editing,
   children,
 }: Props) {
   const filteredSections = useMemo(() => {
@@ -67,7 +65,6 @@ export default function MobileZone({
                   pluginBaseUrl={pluginBaseUrl}
                   isEditable={isEditable}
                   isBuilt={isBuilt}
-                  editing={editing}
                 />
               ),
             )}

From 62667239017dbaed52524c0e833c5e3e5978d303 Mon Sep 17 00:00:00 2001
From: KaWaite <kyle.waite@outlook.com>
Date: Thu, 21 Jul 2022 16:25:33 +0900
Subject: [PATCH 3/4] remove unused prop

---
 .../molecules/Visualizer/WidgetAlignSystem/index.tsx           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
index 2891cf190..de149fcf6 100644
--- a/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
+++ b/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
@@ -81,8 +81,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
             pluginBaseUrl={pluginBaseUrl}
             isEditable={isEditable}
             isBuilt={isBuilt}
-            layoutConstraint={layoutConstraint}
-            editing={editing}>
+            layoutConstraint={layoutConstraint}>
             {alignSystem?.inner && (
               <ZoneComponent
                 zoneName="inner"

From abd91da5db74371a997a45bc8881a47e3e5e19f0 Mon Sep 17 00:00:00 2001
From: KaWaite <kyle.waite@outlook.com>
Date: Thu, 21 Jul 2022 16:27:47 +0900
Subject: [PATCH 4/4] simplify builtin wrapper

---
 .../molecules/Visualizer/Widget/BuiltinWrapper.tsx     | 10 ----------
 src/components/molecules/Visualizer/Widget/index.tsx   |  5 ++---
 2 files changed, 2 insertions(+), 13 deletions(-)
 delete mode 100644 src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx

diff --git a/src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx b/src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx
deleted file mode 100644
index 7e63595d1..000000000
--- a/src/components/molecules/Visualizer/Widget/BuiltinWrapper.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-
-const BuiltinWrapper: React.FC<{ editing?: boolean; children?: ReactNode }> = ({
-  editing,
-  children,
-}) => {
-  return <div style={{ pointerEvents: editing ? "none" : "auto" }}>{children}</div>;
-};
-
-export default BuiltinWrapper;
diff --git a/src/components/molecules/Visualizer/Widget/index.tsx b/src/components/molecules/Visualizer/Widget/index.tsx
index 93687dd28..e321bab6e 100644
--- a/src/components/molecules/Visualizer/Widget/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/index.tsx
@@ -8,7 +8,6 @@ import Plugin, {
 } from "../Plugin";
 
 import builtin from "./builtin";
-import BuiltinWrapper from "./BuiltinWrapper";
 
 export type { WidgetLayout } from "../Plugin";
 
@@ -84,9 +83,9 @@ export default function WidgetComponent<PP = any, SP = any>({
     : "both";
 
   return Builtin ? (
-    <BuiltinWrapper editing={editing}>
+    <div style={{ pointerEvents: editing ? "none" : "auto" }}>
       <Builtin {...props} widget={w} layout={layout} extended={extended} onExtend={onExtend} />
-    </BuiltinWrapper>
+    </div>
   ) : (
     <Plugin
       autoResize={autoResize}