feat: connect reearth/core with existence pages (#401)

* fix: cache ComputedFeature on reearth/core * fix: cache normal feature * type: improve feature types * feat: support selected feature and computed feature * fix: ci * chore: rename * feat: support mvt * fix: pass selection reason * feat: support plugin system on reearth/core * fix: use InternalWidget type for floatingWidgets * fix: add inEditor props * refactor: export/import * feat: connect reearth/core with existence pages * fix: some plugin bugs * fix: type * fix: layer edit event * fix: layer edit event * fix: layer plugin * chore: fix type * fix: import * fix: merge * type: fix * fix: use overrideProperties * fix: update feature geometry * feat: optimize overrideProperty * fix: plugin-editor placeholder * fix: prevent unnecessary render photo overlay * perf: optimize Feature component to prevent unnecessary render depends on features * fix: 3dtiles as pickable * feat: add runTimes property to PluginInstance on reearth/core (#402) feat: add runTimes property to PluginInstance * fix: runTimes * fix: freeze bug when invoking overrideProperty * fix: add compat for resource url * test: add box test for forward compat * fix: tick event on reearth/core (#407) * fix: widget align system on mobile * fix: timeline * fix: runTimes property * fix: navigator home button * fix: flyTo when changing scene property * fix: overrideProperty * fix: widget align system pages on mobile * fix: make widget to be invisible when ui is closed (#411) * fix: make widget to be invisile when ui is closed * onVisible => onVisibilityChange * invisibleWidgets => invisibleWidgetIDs --------- Co-authored-by: KaWaite <kyle.waite@outlook.com> * fix: unnecessary render --------- Co-authored-by: KaWaite <kyle.waite@outlook.com>
reearth · Jan 31, 2023 · 0735c0d · 0735c0d
1 parent fce1ad7
commit 0735c0d
Show file tree

Hide file tree

Showing 67 changed files with 2,754 additions and 366 deletions.
diff --git a/src/components/molecules/PluginEditor/core/hooks.ts b/src/components/molecules/PluginEditor/core/hooks.ts
@@ -0,0 +1,219 @@
+import fileDownload from "js-file-download";
+import { useState, useMemo, useCallback } from "react";
+import useFileInput from "use-file-input";
+
+import type { WidgetSection, WidgetZone } from "@reearth/core/Crust";
+import type { Layer } from "@reearth/core/mantle";
+
+export type Position = { section: string; area: string };
+
+const defaultSourceCode = `
+reearth.ui.show(\`
+  <style>
+    body {
+      margin: 0;
+    }
+    #wrapper {
+      background: #232226;
+      height: 100%;
+      color: white;
+      border: 3px dotted red;
+      border-radius: 5px;
+      padding: 20px 0;
+    }
+  </style>
+  <div id="wrapper">
+    <h2 style="text-align: center; margin: 0;">Hello World</h2>
+  </div>
+\`);
+`.trim();
+
+const defaultPosition = {
+  section: "left",
+  area: "top",
+};
+
+const defaultFileName = "untitled.js";
+
+export default () => {
+  const [mode, setMode] = useState("widget");
+  const [showInfobox, setShowInfobox] = useState(false);
+  const [infoboxSize, setInfoboxSize] = useState<"small" | "medium" | "large">("small");
+  const [showAlignSystem, setShowAlignSystem] = useState(false);
+  const [currentPosition, setCurrentPosition] = useState<Position>(defaultPosition);
+  const [executableSourceCode, setExecutableSourceCode] = useState(defaultSourceCode);
+  const [fileName, setFileName] = useState(defaultFileName);
+  const [sourceCode, setSourceCode] = useState<string | undefined>(defaultSourceCode);
+
+  const layers: Layer[] = useMemo(
+    () => [
+      {
+        id: "pluginprimitive",
+        pluginId: "reearth",
+        compat: {
+          extensionId: "marker",
+        },
+        type: "simple",
+        isVisible: true,
+        data: {
+          type: "geojson",
+          value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 139, 0] } },
+        },
+        marker: {
+          imageColor: "green",
+        },
+        infobox: showInfobox
+          ? {
+              property: {
+                default: {
+                  title: "Cool info",
+                  bgcolor: "#56051f",
+                  size: infoboxSize,
+                },
+              },
+              blocks: [
+                ...(mode === "block"
+                  ? [
+                      {
+                        id: "reearth-plugineditor-block",
+                        __REEARTH_SOURCECODE: executableSourceCode,
+                      } as any,
+                    ]
+                  : []),
+                {
+                  id: "reearth-plugineditor-locationblock",
+                  pluginId: "reearth",
+                  extensionId: "locationblock",
+                  property: {
+                    location: { lat: 0, lng: 139 },
+                  },
+                },
+              ],
+            }
+          : undefined,
+      },
+    ],
+    [infoboxSize, mode, showInfobox, executableSourceCode],
+  );
+
+  const widgets = useMemo(() => {
+    if (mode !== "widget") return {};
+
+    const widget = [
+      {
+        id: "reearth-plugineditor-widget",
+        // extended: true,
+        __REEARTH_SOURCECODE: executableSourceCode,
+      },
+    ];
+    const alignment =
+      currentPosition.section === "center" || currentPosition.area === "middle"
+        ? "centered"
+        : "start";
+    const newSection: WidgetSection = {
+      top: {
+        widgets: currentPosition.area === "top" ? widget : undefined,
+        align: alignment,
+      },
+      middle: {
+        widgets: currentPosition.area === "middle" ? widget : undefined,
+        align: alignment,
+      },
+      bottom: {
+        widgets: currentPosition.area === "bottom" ? widget : undefined,
+        align: alignment,
+      },
+    };
+
+    const newZone: WidgetZone = {
+      left: {
+        ...(currentPosition.section === "left" ? newSection : undefined),
+      },
+      center: {
+        ...(currentPosition.section === "center" ? newSection : undefined),
+      },
+      right: {
+        ...(currentPosition.section === "right" ? newSection : undefined),
+      },
+    };
+    return { alignSystem: { outer: newZone } };
+  }, [currentPosition.area, currentPosition.section, executableSourceCode, mode]);
+
+  const handleRun = useCallback(() => {
+    setExecutableSourceCode(sourceCode ?? "");
+  }, [setExecutableSourceCode, sourceCode]);
+
+  const handleDownload = () => {
+    if (!sourceCode) return;
+    fileDownload(sourceCode, fileName);
+  };
+
+  const handleAlignSystemToggle = useCallback(() => {
+    setShowAlignSystem(s => !s);
+  }, []);
+
+  const handleInfoboxToggle = () => {
+    setShowInfobox(!showInfobox);
+  };
+
+  const handleOpen = useFileInput(files => {
+    const file = files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+
+    reader.onload = async e2 => {
+      const body = e2?.target?.result;
+      if (typeof body != "string") return;
+      setFileName(file.name);
+      setSourceCode(body);
+    };
+    reader.readAsText(file);
+  });
+
+  const handleReset = useCallback(() => {
+    if (confirm("Are you sure you want to reset?")) {
+      setFileName(defaultFileName);
+      setCurrentPosition(defaultPosition);
+      setSourceCode(defaultSourceCode);
+      setExecutableSourceCode(defaultSourceCode);
+    }
+  }, []);
+
+  return {
+    sourceCode,
+    layers,
+    currentPosition,
+    mode,
+    widgets,
+    infoboxSize,
+    showAlignSystem,
+    showInfobox,
+    setSourceCode,
+    setMode,
+    setInfoboxSize,
+    handleOpen,
+    handleDownload,
+    handleReset,
+    handleAlignSystemToggle,
+    setCurrentPosition,
+    handleInfoboxToggle,
+    handleRun,
+  };
+};
+
+export const positions: { [key: string]: Position }[] = [
+  {
+    LeftTop: { section: "left", area: "top" },
+    LeftMiddle: { section: "left", area: "middle" },
+    LeftBottom: { section: "left", area: "bottom" },
+  },
+  {
+    CenterTop: { section: "center", area: "top" },
+    CenterBottom: { section: "center", area: "bottom" },
+  },
+  {
+    RightTop: { section: "right", area: "top" },
+    RightMiddle: { section: "right", area: "middle" },
+    RightBottom: { section: "right", area: "bottom" },
+  },
+];