fix: widget bugs, language (#89)

Co-authored-by: rot1024 <aayhrot@gmail.com> Co-authored-by: KaWaite <flippindaisy@gmail.com>
reearth · Sep 30, 2021 · 9de9dff · 9de9dff
1 parent 06cb14e
commit 9de9dff
Show file tree

Hide file tree

Showing 23 changed files with 233 additions and 163 deletions.
diff --git a/package.json b/package.json
@@ -183,7 +183,7 @@
         "rc-slider": "9.7.2",
         "react": "^17.0.2",
         "react-accessible-accordion": "^3.3.4",
-        "react-align": "^1.1.4",
+        "react-align": "^2.0.2",
         "react-colorful": "^5.3.0",
         "react-dnd": "^14.0.3",
         "react-dnd-html5-backend": "^14.0.1",

diff --git a/src/components/atoms/ConfirmationModal/index.tsx b/src/components/atoms/ConfirmationModal/index.tsx
@@ -5,7 +5,8 @@ import Button from "../Button";
 import Modal from "../Modal";
 
 export type Props = {
-  title: string;
+  title?: string;
+  buttonAction?: string;
   body: React.ReactNode;
   onCancel: () => void;
   onProceed: () => void;
@@ -15,6 +16,7 @@ export type Props = {
 
 const ConfirmationModal: React.FC<Props> = ({
   title,
+  buttonAction,
   body,
   onCancel,
   onProceed,
@@ -30,7 +32,7 @@ const ConfirmationModal: React.FC<Props> = ({
       onClose={onClose}
       button1={
         <Button
-          text={intl.formatMessage({ defaultMessage: "Delete" })}
+          text={buttonAction || intl.formatMessage({ defaultMessage: "Continue" })}
           onClick={onProceed}
           buttonType="danger"
         />

diff --git a/...nts/molecules/Settings/Project/Plugin/PluginAccordion/PluginAccordionItem/deleteModal.tsx b/...nts/molecules/Settings/Project/Plugin/PluginAccordion/PluginAccordionItem/deleteModal.tsx
@@ -19,20 +19,22 @@ const DeleteModal: React.FC<Props> = ({ onCancel, onProceed, onClose, isOpen })
   const theme = useTheme();
   return (
     <ConfirmationModal
-      title=""
+      buttonAction={intl.formatMessage({ defaultMessage: "Uninstall" })}
       body={
         <>
           <Icon icon="alert" size={24} color={theme.main.danger} />
-          <Box mt={"2xl"}>
+          <Box mt={"2xl"} mb={"m"}>
             <Text size="m">
               {intl.formatMessage({
                 defaultMessage:
-                  "You are uninstalling selected plugin. The datas which are used by this plugin may also be deleted .",
+                  "You are uninstalling the selected plugin. The data used by this plugin may also be deleted.",
               })}
             </Text>
           </Box>
           <Text size="m">
-            {intl.formatMessage({ defaultMessage: "please check it before uninstalling." })}
+            {intl.formatMessage({
+              defaultMessage: "Please be sure before uninstalling.",
+            })}
           </Text>
         </>
       }

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/PhotoOverlay/hooks.ts b/src/components/molecules/Visualizer/Engine/Cesium/PhotoOverlay/hooks.ts
@@ -28,8 +28,11 @@ export default function ({ isSelected, camera }: { isSelected?: boolean; camera?
   exitPhotoOverlay: () => void;
 } {
   const ctx = useContext();
-  const flyTo = ctx?.reearth.visualizer.flyTo;
-  const getCamera = useCallback(() => ctx?.reearth.visualizer.camera, [ctx?.reearth.visualizer]);
+  const flyTo = ctx?.reearth.visualizer.camera.flyTo;
+  const getCamera = useCallback(
+    () => ctx?.reearth.visualizer.camera.position,
+    [ctx?.reearth.visualizer],
+  );
 
   // mode 0 = idle, 1 = idle<->fly, 2 = fly<->fov, 3 = fov<->photo, 4 = photo
   const [mode, prevMode, startTransition] = useDelayedCount(durations);

diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -116,29 +116,31 @@ export function commonReearth({
   events: Events<ReearthEventType>;
   layers: () => LayerStore;
   sceneProperty: () => any;
-  camera: () => GlobalThis["reearth"]["visualizer"]["camera"];
+  camera: () => GlobalThis["reearth"]["visualizer"]["camera"]["position"];
   selectedLayer: () => GlobalThis["reearth"]["layers"]["selected"];
   layerSelectionReason: () => GlobalThis["reearth"]["layers"]["selectionReason"];
   layerOverriddenInfobox: () => GlobalThis["reearth"]["layers"]["overriddenInfobox"];
   selectLayer: GlobalThis["reearth"]["layers"]["select"];
   showLayer: GlobalThis["reearth"]["layers"]["show"];
   hideLayer: GlobalThis["reearth"]["layers"]["hide"];
-  flyTo: GlobalThis["reearth"]["visualizer"]["flyTo"];
-  lookAt: GlobalThis["reearth"]["visualizer"]["lookAt"];
-  zoomIn: GlobalThis["reearth"]["visualizer"]["zoomIn"];
-  zoomOut: GlobalThis["reearth"]["visualizer"]["zoomOut"];
+  flyTo: GlobalThis["reearth"]["visualizer"]["camera"]["flyTo"];
+  lookAt: GlobalThis["reearth"]["visualizer"]["camera"]["lookAt"];
+  zoomIn: GlobalThis["reearth"]["visualizer"]["camera"]["zoomIn"];
+  zoomOut: GlobalThis["reearth"]["visualizer"]["camera"]["zoomOut"];
 }): CommonReearth {
   return {
     version: window.REEARTH_CONFIG?.version || "",
     apiVersion: 1,
     visualizer: {
       engine: engineName,
-      flyTo,
-      lookAt,
-      zoomIn,
-      zoomOut,
-      get camera() {
-        return camera();
+      camera: {
+        flyTo,
+        lookAt,
+        zoomIn,
+        zoomOut,
+        get position() {
+          return camera();
+        },
       },
       get property() {
         return sceneProperty();

diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -17,7 +17,7 @@ import type { Component as PrimitiveComponent } from "../Primitive";
 import type { CommonReearth } from "./api";
 import { commonReearth } from "./api";
 import type {
-  Camera,
+  CameraPosition,
   Layer,
   OverriddenInfobox,
   ReearthEventType,
@@ -35,7 +35,7 @@ export type Props = {
   engine: EngineContext;
   engineName: string;
   sceneProperty?: any;
-  camera?: Camera;
+  camera?: CameraPosition;
   layers: LayerStore;
   selectedLayer?: Layer;
   layerSelectionReason?: string;

diff --git a/src/components/molecules/Visualizer/Plugin/index.tsx b/src/components/molecules/Visualizer/Plugin/index.tsx
@@ -63,7 +63,7 @@ export default function Plugin({
       className={className}
       src={src}
       sourceCode={sourceCode}
-      filled={!!widget?.extended}
+      filled={!!widget?.extended?.horizontally || !!widget?.extended?.vertically}
       iFrameProps={iFrameProps}
       canBeVisible={visible}
       isMarshalable={isMarshalable}

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -35,7 +35,7 @@ export type Reearth = {
 export type ReearthEventType = {
   update: [];
   close: [];
-  cameramove: [camera: Camera];
+  cameramove: [camera: CameraPosition];
   select: [layerId: string | undefined];
   message: [message: any];
 };
@@ -159,10 +159,14 @@ export type UI = {
 export type Visualizer = {
   /** Current visualization engine type. Currently only "cesium" is available. */
   readonly engine: string;
-  /** Current camera position and state. */
-  readonly camera: Camera | undefined;
+  readonly camera: Camera;
   /** Current scene property */
   readonly property?: any;
+};
+
+export type Camera = {
+  /** Current camera position */
+  readonly position: CameraPosition | undefined;
   readonly zoomIn: (amount: number) => void;
   readonly zoomOut: (amount: number) => void;
   /** Moves the camera position to the specified destination. */
@@ -172,7 +176,7 @@ export type Visualizer = {
 };
 
 /** Represents the camera position and state */
-export type Camera = {
+export type CameraPosition = {
   /** degrees */
   lat: number;
   /** degrees */

diff --git a/src/components/molecules/Visualizer/Widget/Button/MenuButton.tsx b/src/components/molecules/Visualizer/Widget/Button/MenuButton.tsx
@@ -51,7 +51,7 @@ export default function ({
   const publishedTheme = usePublishTheme(sceneProperty?.theme);
   const theme = useTheme();
   const [visibleMenuButton, setVisibleMenuButton] = useState<string>();
-  const flyTo = ctx?.reearth.visualizer.flyTo;
+  const flyTo = ctx?.reearth.visualizer.camera.flyTo;
 
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
@@ -131,6 +131,7 @@ export default function ({
         ref={popperElement}
         style={{
           zIndex: theme.zIndexes.dropDown,
+          margin: "2.5px auto",
           ...styles.popper,
         }}
         {...attributes.popper}>

diff --git a/src/components/molecules/Visualizer/Widget/Menu/MenuButton.tsx b/src/components/molecules/Visualizer/Widget/Menu/MenuButton.tsx
@@ -47,7 +47,7 @@ export default function ({ button: b, menuItems, pos, sceneProperty }: Props): J
   const ctx = useContext();
   const publishedTheme = usePublishTheme(sceneProperty?.theme);
   const [visibleMenuButton, setVisibleMenuButton] = useState<string>();
-  const flyTo = ctx?.reearth.visualizer.flyTo;
+  const flyTo = ctx?.reearth.visualizer.camera.flyTo;
 
   const referenceElement = useRef<HTMLDivElement>(null);
   const popperElement = useRef<HTMLDivElement>(null);
@@ -155,7 +155,7 @@ export default function ({ button: b, menuItems, pos, sceneProperty }: Props): J
 
 const Wrapper = styled.div`
   position: relative;
-  margin-left: 5px;
+  padding: 2.5px;
   &:first-of-type {
     margin-left: 0;
   }

diff --git a/src/components/molecules/Visualizer/Widget/Menu/index.tsx b/src/components/molecules/Visualizer/Widget/Menu/index.tsx
@@ -1,6 +1,7 @@
 import { groupBy } from "lodash-es";
 import React, { useMemo } from "react";
 
+import Flex from "@reearth/components/atoms/Flex";
 import { styled } from "@reearth/theme";
 
 import { ComponentProps as WidgetProps } from "../../Widget";
@@ -31,7 +32,7 @@ const Menu = ({ widget, sceneProperty }: Props): JSX.Element => {
     <>
       {Object.entries(buttonsByPosition).map(([p, buttons]) =>
         buttons?.length ? (
-          <Wrapper key={p} position={p as Position}>
+          <Wrapper key={p} position={p as Position} wrap="wrap">
             {buttons.map(b =>
               !b.buttonInvisible ? (
                 <MenuButton
@@ -50,15 +51,15 @@ const Menu = ({ widget, sceneProperty }: Props): JSX.Element => {
   );
 };
 
-const Wrapper = styled.div<{ position?: "topleft" | "topright" | "bottomleft" | "bottomright" }>`
+const Wrapper = styled(Flex)<{ position?: "topleft" | "topright" | "bottomleft" | "bottomright" }>`
   position: absolute;
+  max-width: 100vw;
+  padding: 2.5px;
   top: ${({ position }) => (position === "topleft" || position === "topright" ? "0" : null)};
   bottom: ${({ position }) =>
     position === "bottomleft" || position === "bottomright" ? "0" : null};
   left: ${({ position }) => (position === "topleft" || position === "bottomleft" ? "0" : null)};
   right: ${({ position }) => (position === "topright" || position === "bottomright" ? "0" : null)};
-  padding: 5px;
-  display: flex;
 `;
 
 export default Menu;
diff --git a/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx b/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx
@@ -50,7 +50,7 @@ const SplashScreen = ({ widget, isBuilt }: Props): JSX.Element | null => {
   const currentCamera = camera?.[cameraSequence];
   const delayedCurrentCamera = camera?.[delayedCameraSequence];
 
-  const flyTo = ctx?.reearth?.visualizer.flyTo;
+  const flyTo = ctx?.reearth?.visualizer.camera.flyTo;
   useEffect(() => {
     if (!flyTo) return;
     const { cameraPosition, cameraDuration, cameraDelay } = delayedCurrentCamera ?? {};

diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/hooks.ts b/src/components/molecules/Visualizer/Widget/Storytelling/hooks.ts
@@ -53,7 +53,7 @@ export default function ({
   }>();
 
   const { reearth } = useContext() ?? {};
-  const { lookAt, flyTo } = reearth?.visualizer ?? {};
+  const { lookAt, flyTo } = reearth?.visualizer.camera ?? {};
   const {
     findById: findLayerById,
     selected: selectedLayer,

diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx b/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
@@ -25,7 +25,11 @@ export type Property = {
   stories?: StoryType[];
 };
 
-const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
+const Storytelling = ({
+  widget,
+  sceneProperty,
+  widgetAlignSystemState,
+}: Props): JSX.Element | null => {
   const publishedTheme = usePublishTheme(sceneProperty.theme);
 
   const isExtraSmallWindow = useMedia("(max-width: 420px)");
@@ -49,11 +53,12 @@ const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
   });
 
   return stories?.length > 0 ? (
-    <>
+    <div>
       <Menu
         publishedTheme={publishedTheme}
         ref={wrapperRef}
         menuOpen={menuOpen}
+        extended={!!widget?.extended?.horizontally}
         area={widget?.layout?.location?.area}
         align={widget?.layout?.align}>
         {stories.map((story, i) => (
@@ -90,14 +95,16 @@ const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
           </MenuItem>
         ))}
       </Menu>
-      <Wrapper
+      <Widget
         publishedTheme={publishedTheme}
         extended={!!widget.extended?.horizontally}
         floating={!widget.layout}>
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={!selected?.index}
-          onClick={handlePrev}>
+          onClick={handlePrev}
+          // sometimes react-align goes wrong
+          style={widgetAlignSystemState?.editing ? { pointerEvents: "none" } : undefined}>
           <Icon icon="arrowLeft" size={24} />
         </ArrowButton>
         <Current align="center" justify="space-between">
@@ -121,15 +128,17 @@ const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={selected?.index === stories.length - 1}
-          onClick={handleNext}>
+          onClick={handleNext}
+          // sometimes react-align goes wrong
+          style={widgetAlignSystemState?.editing ? { pointerEvents: "none" } : undefined}>
           <Icon icon="arrowRight" size={24} />
         </ArrowButton>
-      </Wrapper>
-    </>
+      </Widget>
+    </div>
   ) : null;
 };
 
-const Wrapper = styled.div<{
+const Widget = styled.div<{
   publishedTheme: PublishTheme;
   extended?: boolean;
   floating?: boolean;
@@ -156,7 +165,7 @@ const Wrapper = styled.div<{
 
   @media (max-width: 560px) {
     display: flex;
-    width: 90vw;
+    width: ${({ extended }) => (extended ? "100%" : "90vw")};
     margin: 0 auto;
     height: 56px;
   }
@@ -225,31 +234,32 @@ const MenuIcon = styled(Icon)<{ menuOpen?: boolean; publishedTheme: PublishTheme
 const Menu = styled.div<{
   menuOpen?: boolean;
   publishedTheme: PublishTheme;
+  extended?: boolean;
   area?: string;
   align?: string;
 }>`
   background-color: ${({ publishedTheme }) => publishedTheme.background};
   z-index: ${props => props.theme.zIndexes.dropDown};
   position: absolute;
+  ${({ area, align }) =>
+    area === "top" || (area === "middle" && align === "start") ? "top: 90px" : "bottom: 90px"};
   width: 324px;
-  max-height: 500px;
+  max-height: ${({ area, align }) =>
+    area === "middle" && align === "centered" ? "200px" : "500px"};
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   border-radius: ${metricsSizes["s"]}px;
   display: ${({ menuOpen }) => (!menuOpen ? "none" : "")};
   padding: ${metricsSizes["m"]}px ${metricsSizes["s"]}px;
-  transform: translate(
-    0,
-    ${({ area, align }) =>
-      area === "top" || (area === "middle" && align === "start") ? "55%" : "-105%"}
-  );
 
   @media (max-width: 560px) {
+    width: ${({ extended }) => (extended ? `calc(100% - 18px)` : "65vw")};
+    max-height: ${({ area, align }) =>
+      area === "middle" && align === "centered" ? "30vh" : "70vh"};
     border: 1px solid ${props => props.theme.main.text};
-  }
-
-  @media (max-width: 420px) {
-    width: auto;
+    top: ${({ area, align }) =>
+      area === "top" || (area === "middle" && align === "start") ? "60px" : null};
+    bottom: ${({ area, align }) => (area !== "top" && align !== "start" ? "60px" : null)};
   }
 `;