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 (
-
+ <>
+ >
);
};
@@ -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..e321bab6e 100644
--- a/src/components/molecules/Visualizer/Widget/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/index.tsx
@@ -23,7 +23,6 @@ export type Props = {
pluginBaseUrl?: string;
layout?: WidgetLayout;
editing?: boolean;
- iFrameProps?: PluginProps["iFrameProps"];
onExtend?: (id: string, extended: boolean | undefined) => void;
};
@@ -38,8 +37,8 @@ export default function WidgetComponent({
extended,
pluginBaseUrl,
layout,
- iFrameProps,
onExtend,
+ editing,
...props
}: Props) {
const { align, location } = layout ?? {};
@@ -84,7 +83,9 @@ export default function WidgetComponent({
: "both";
return Builtin ? (
-
+
+
+
) : (
({
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 }) => (
)}
@@ -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/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}
/>
),
)}
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..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 = ({
pluginBaseUrl={pluginBaseUrl}
isEditable={isEditable}
isBuilt={isBuilt}
- layoutConstraint={layoutConstraint}
- editing={editing}>
+ layoutConstraint={layoutConstraint}>
{alignSystem?.inner && (
= ({
isEditable={isEditable}
isBuilt={isBuilt}
layoutConstraint={layoutConstraint}
- editing={editing}
/>
)}
@@ -106,8 +104,7 @@ const WidgetAlignSystem: React.FC = ({
pluginBaseUrl={pluginBaseUrl}
isEditable={isEditable}
isBuilt={isBuilt}
- layoutConstraint={layoutConstraint}
- editing={editing}>
+ layoutConstraint={layoutConstraint}>
= ({
isEditable={isEditable}
isBuilt={isBuilt}
layoutConstraint={layoutConstraint}
- editing={editing}
/>
)}