feat: widget align system (#61)

Co-authored-by: rot1024 <aayhrot@gmail.com> Co-authored-by: KaWaite <flippindaisy@gmail.com>
reearth · Sep 26, 2021 · ed29403 · ed29403
1 parent 92cdbb4
commit ed29403
Show file tree

Hide file tree

Showing 60 changed files with 2,784 additions and 202 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
         "build": "webpack --mode production",
         "clean": "del build coverage storybook-static node_modules/.cache",
         "check": "run-p type lint test",
-        "type": "tsc --noEmit",
+        "type": "tsc",
         "lint": "eslint --ext '.js,.jsx,.ts,.tsx,.graphql' .",
         "format": "eslint --fix --ext '.js,.jsx,.ts,.tsx,.graphql' .",
         "storybook": "yarn && start-storybook -p 9001",
@@ -180,6 +180,7 @@
         "rc-slider": "9.7.1",
         "react": "^17.0.2",
         "react-accessible-accordion": "^3.3.4",
+        "react-align": "^1.1.4",
         "react-colorful": "^5.3.0",
         "react-dnd": "^11.1.3",
         "react-dnd-html5-backend": "^11.1.3",
@@ -204,4 +205,4 @@
         "use-debounce": "^5.2.0",
         "use-file-input": "^1.0.0"
     }
-}
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -20,7 +20,6 @@ import { Provider as Auth0Provider } from "./auth";
 import Preview from "./components/pages/Preview";
 import { Provider as GqlProvider } from "./gql";
 import { Provider as ThemeProvider, styled } from "./theme";
-import { Provider as DndProvider } from "./util/use-dnd";
 
 const EarthEditor = React.lazy(() => import("@reearth/components/pages/EarthEditor"));
 const Dashboard = React.lazy(() => import("@reearth/components/pages/Dashboard"));
@@ -40,31 +39,29 @@ const App: React.FC = () => {
     <Auth0Provider>
       <GqlProvider>
         <ThemeProvider>
-          <DndProvider>
-            <IntlProvider>
-              <Suspense fallback={<Loading />}>
-                <NotificationBanner />
-                <StyledRouter>
-                  <TopPage path="/" />
-                  <Dashboard path="/dashboard/:teamId" />
-                  <EarthEditor path="/edit/:sceneId" />
-                  <Preview path="/edit/:sceneId/preview" />
-                  <Redirect from="/settings" to="/settings/account" />
-                  <AccountSettings path="/settings/account" />
-                  <WorkspaceList path="/settings/workspaces" />
-                  <WorkspaceSettings path="/settings/workspace/:teamId" />
-                  <SettingsProjectList path="/settings/workspace/:teamId/projects" />
-                  <AssetSettings path="/settings/workspace/:teamId/asset" />
-                  <ProjectSettings path="/settings/project/:projectId" />
-                  <PublicSettings path="/settings/project/:projectId/public" />
-                  <DatasetSettings path="/settings/project/:projectId/dataset" />
-                  <PluginSettings path="/settings/project/:projectId/plugins" />
-                  {process.env.NODE_ENV !== "production" && <GraphQLPlayground path="/graphql" />}
-                  <NotFound default />
-                </StyledRouter>
-              </Suspense>
-            </IntlProvider>
-          </DndProvider>
+          <IntlProvider>
+            <Suspense fallback={<Loading />}>
+              <NotificationBanner />
+              <StyledRouter>
+                <TopPage path="/" />
+                <Dashboard path="/dashboard/:teamId" />
+                <EarthEditor path="/edit/:sceneId" />
+                <Preview path="/edit/:sceneId/preview" />
+                <Redirect from="/settings" to="/settings/account" />
+                <AccountSettings path="/settings/account" />
+                <WorkspaceList path="/settings/workspaces" />
+                <WorkspaceSettings path="/settings/workspace/:teamId" />
+                <SettingsProjectList path="/settings/workspace/:teamId/projects" />
+                <AssetSettings path="/settings/workspace/:teamId/asset" />
+                <ProjectSettings path="/settings/project/:projectId" />
+                <PublicSettings path="/settings/project/:projectId/public" />
+                <DatasetSettings path="/settings/project/:projectId/dataset" />
+                <PluginSettings path="/settings/project/:projectId/plugins" />
+                {process.env.NODE_ENV !== "production" && <GraphQLPlayground path="/graphql" />}
+                <NotFound default />
+              </StyledRouter>
+            </Suspense>
+          </IntlProvider>
         </ThemeProvider>
       </GqlProvider>
     </Auth0Provider>

diff --git a/src/components/atoms/Icon/Icons/widgetButton.svg b/src/components/atoms/Icon/Icons/widgetButton.svg
diff --git a/src/components/atoms/Icon/icons.ts b/src/components/atoms/Icon/icons.ts
@@ -14,6 +14,7 @@ import PrimTileset from "./Icons/primTileset.svg";
 // Built-in Widgets
 import Widgets from "./Icons/widgetsIcon.svg";
 import WidgetMenu from "./Icons/widgetMenu.svg";
+import WidgetButton from "./Icons/widgetButton.svg";
 import WidgetStory from "./Icons/widgetStorytelling.svg";
 import StorytellingMenu from "./Icons/storytellingMenu.svg";
 import WidgetSplash from "./Icons/widgetSplashscreen.svg";
@@ -134,7 +135,9 @@ export default {
   model: PrimModel,
   tileset: PrimTileset,
   widget: Widgets,
+  widgets: Widgets,
   menu: WidgetMenu,
+  button: WidgetButton,
   storytelling: WidgetStory,
   storytellingMenu: StorytellingMenu,
   splashscreen: WidgetSplash,

diff --git a/src/components/molecules/Dashboard/QuickStart.tsx b/src/components/molecules/Dashboard/QuickStart.tsx
@@ -186,7 +186,6 @@ const HeroBannerButton = styled(Flex)`
   &:hover: :before {
     transform: translateY(-50%);
   }
-
   @media only screen and (max-width: 1024px) {
     height: 60px;
   }

diff --git a/src/components/molecules/EarthEditor/LayerTreeViewItem/Layer/index.tsx b/src/components/molecules/EarthEditor/LayerTreeViewItem/Layer/index.tsx
@@ -307,11 +307,9 @@ const LayerName = styled(Text)<{ disabled?: boolean; selected?: boolean }>`
 
 const LayerCount = styled(Text)<{ selected?: boolean }>`
   margin-right: 10px;
-
   &::before {
     content: "(";
   }
-
   &::after {
     content: ")";
   }

diff --git a/src/components/molecules/EarthEditor/OutlinePane/hooks.tsx b/src/components/molecules/EarthEditor/OutlinePane/hooks.tsx
@@ -51,6 +51,7 @@ export default ({
   selectedType,
   onLayerSelect,
   onSceneSelect,
+  onWidgetsSelect,
   onWidgetSelect,
   onLayerMove,
   onLayerRemove,
@@ -72,6 +73,7 @@ export default ({
   onLayerImport?: (file: File, format: Format) => void;
   onLayerRemove?: (id: string) => void;
   onSceneSelect?: () => void;
+  onWidgetsSelect?: () => void;
   onWidgetSelect?: (widgetId: string | undefined, pluginId: string, extensionId: string) => void;
   onLayerMove?: (
     src: string,
@@ -98,6 +100,8 @@ export default ({
 
       if (item.content.type === "scene") {
         onSceneSelect?.();
+      } else if (item.id === "widgets") {
+        onWidgetsSelect?.();
       } else if (item.content.type === "widget") {
         onWidgetSelect?.(item.content.widgetId, item.content.pluginId, item.content.extensionId);
       } else if (item.content.type === "layer") {
@@ -108,7 +112,7 @@ export default ({
         );
       }
     },
-    [onLayerSelect, onSceneSelect, onWidgetSelect],
+    [onLayerSelect, onSceneSelect, onWidgetsSelect, onWidgetSelect],
   );
 
   const drop = useCallback(
@@ -181,7 +185,7 @@ export default ({
           droppable: false,
           droppableIntoChildren: false,
           expandable: true,
-          selectable: false,
+          selectable: true,
           children: widgets?.map(w => ({
             id: `${w.pluginId}/${w.extensionId}`,
             content: {
@@ -206,6 +210,7 @@ export default ({
     }),
     [sceneTitle, sceneDescription, widgetTitle, widgets],
   );
+
   const layersItem = useMemo<TreeViewItemType<TreeViewItem> | undefined>(
     () =>
       rootLayerId
@@ -266,6 +271,8 @@ export default ({
     const newState =
       selectedType === "scene"
         ? ["scene"]
+        : selectedType === "widgets"
+        ? ["widgets"]
         : selectedType === "layer" && selectedLayerId
         ? [selectedLayerId]
         : selectedType === "widget" && selectedWidgetId

diff --git a/src/components/molecules/EarthEditor/OutlinePane/index.tsx b/src/components/molecules/EarthEditor/OutlinePane/index.tsx
@@ -24,13 +24,14 @@ export type Props = {
   layers?: Layer[];
   widgets?: Widget[];
   sceneDescription?: string;
-  selectedType?: "scene" | "layer" | "widget";
+  selectedType?: "scene" | "layer" | "widgets" | "widget";
   loading?: boolean;
   onLayerRename?: (id: string, name: string) => void;
   onLayerVisibilityChange?: (id: string, visibility: boolean) => void;
   onLayerRemove?: (id: string) => void;
   onLayerSelect?: (layerId: string, ...i: number[]) => void;
   onSceneSelect?: () => void;
+  onWidgetsSelect?: () => void;
   onWidgetSelect?: (widgetId: string | undefined, pluginId: string, extensionId: string) => void;
   onLayerMove?: (
     layer: string,
@@ -58,6 +59,7 @@ const OutlinePane: React.FC<Props> = ({
   onLayerRemove,
   onLayerSelect,
   onSceneSelect,
+  onWidgetsSelect,
   onWidgetSelect,
   onLayerMove,
   onLayerImport,
@@ -86,6 +88,7 @@ const OutlinePane: React.FC<Props> = ({
     onLayerImport,
     onLayerRemove,
     onSceneSelect,
+    onWidgetsSelect,
     onWidgetSelect,
     onLayerMove,
     onLayerRename,

diff --git a/src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx
@@ -24,7 +24,7 @@ import PropertyField, {
 import GroupWrapper from "../PropertyGroup";
 import PropertyList, { Item as PropertyListItem } from "../PropertyList";
 
-export type Mode = "infobox" | "scene" | "layer" | "block" | "widget";
+export type Mode = "infobox" | "scene" | "layer" | "block" | "widgets" | "widget";
 
 export type {
   Dataset,

diff --git a/src/components/molecules/EarthEditor/PropertyPane/WidgetToggleSwitch/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/WidgetToggleSwitch/index.tsx
@@ -6,16 +6,21 @@ import ToggleButton from "@reearth/components/atoms/ToggleButton";
 import { styled } from "@reearth/theme";
 
 export type Props = {
+  mode?: "widgets" | "widget";
   checked?: boolean;
-  onChange?: () => Promise<void> | undefined;
+  onChange?: () => Promise<void> | void;
 };
 
-const WidgetToggleButton: React.FC<Props> = props => {
+const WidgetToggleButton: React.FC<Props> = ({ mode, checked, onChange }) => {
   const intl = useIntl();
   return (
     <ToggleWrapper>
-      <Text size="xs">{intl.formatMessage({ defaultMessage: "Enable" })}</Text>
-      <ToggleButton {...props} />
+      <Text size="xs" otherProperties={{ userSelect: "none" }}>
+        {mode === "widgets"
+          ? intl.formatMessage({ defaultMessage: "Enable Editor Mode" })
+          : intl.formatMessage({ defaultMessage: "Enable" })}
+      </Text>
+      <ToggleButton checked={checked} onChange={onChange} />
     </ToggleWrapper>
   );
 };

diff --git a/src/components/molecules/EarthEditor/PropertyPane/index.tsx b/src/components/molecules/EarthEditor/PropertyPane/index.tsx
@@ -62,6 +62,8 @@ export type Props = {
   assets?: Asset[];
   selectedWidget?: Widget;
   onWidgetActivate?: (enabled: boolean) => Promise<void>;
+  onWidgetAlignEditorActivate?: (enabled: boolean) => void;
+  widgetAlignEditorActivated?: boolean;
 } & Pick<
   PropertyItemProps,
   | "datasetSchemas"
@@ -102,6 +104,8 @@ const PropertyPane: React.FC<Props> = ({
   onRemovePane,
   selectedWidget,
   onWidgetActivate,
+  onWidgetAlignEditorActivate,
+  widgetAlignEditorActivated,
   onChange,
   onRemove,
   onLink,
@@ -151,10 +155,15 @@ const PropertyPane: React.FC<Props> = ({
 
   return (
     <>
-      {mode === "widget" && (
+      {(mode === "widget" || mode === "widgets") && (
         <WidgetToggleButton
-          checked={!!selectedWidget?.enabled}
-          onChange={() => onWidgetActivate?.(!selectedWidget?.enabled)}
+          mode={mode}
+          checked={mode === "widgets" ? widgetAlignEditorActivated : !!selectedWidget?.enabled}
+          onChange={() =>
+            mode === "widgets"
+              ? onWidgetAlignEditorActivate?.(!widgetAlignEditorActivated)
+              : onWidgetActivate?.(!selectedWidget?.enabled)
+          }
         />
       )}
       {((mode === "widget" && !!selectedWidget?.enabled) ||

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/index.tsx
@@ -15,8 +15,6 @@ import {
   ScreenSpaceEvent,
 } from "resium";
 
-import Loading from "@reearth/components/atoms/Loading";
-
 import type { EngineProps, Ref as EngineRef } from "..";
 
 import CameraFlyTo from "./CameraFlyTo";
@@ -118,7 +116,6 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         ))}
         {ready ? children : null}
       </Viewer>
-      {!ready && <Loading />}
     </>
   );
 };

diff --git a/src/components/molecules/Visualizer/Plugin/index.tsx b/src/components/molecules/Visualizer/Plugin/index.tsx
@@ -1,11 +1,17 @@
 import React, { CSSProperties } from "react";
 
 import P, { Props as PluginProps } from "@reearth/components/atoms/Plugin";
-import { Primitive, Widget, Block } from "@reearth/plugin";
+import { Primitive, Widget, Block, WidgetLocation, WidgetAlignment } from "@reearth/plugin";
 
 import useHooks from "./hooks";
 
-export type { Primitive, Block, Widget } from "@reearth/plugin";
+export type { Primitive, Block, Widget, WidgetLocation, WidgetAlignment } from "@reearth/plugin";
+
+export type WidgetLayout = {
+  floating: boolean;
+  location?: WidgetLocation;
+  align?: WidgetAlignment;
+};
 
 export type Props = {
   className?: string;
@@ -22,6 +28,7 @@ export type Props = {
   primitive?: Primitive;
   widget?: Widget;
   block?: Block;
+  widgetLayout?: WidgetLayout; // TODO
 };
 
 export default function Plugin({
@@ -70,6 +77,4 @@ export default function Plugin({
       onMessage={handleMessage}
     />
   ) : null;
-
-  return null;
 }