feat: show field in appearances of reearth/core (#469)

Co-authored-by: keiya sasaki <keiya.s.0210@gmail.com>
reearth · Mar 7, 2023 · 819eb63 · 819eb63
1 parent e172186
commit 819eb63
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 66 deletions.
diff --git a/src/core/engines/Cesium/Feature/Box/index.tsx b/src/core/engines/Cesium/Feature/Box/index.tsx
@@ -26,6 +26,7 @@ const Box: React.FC<Props> = memo(function BoxPresenter({
   onLayerEdit,
 }) {
   const {
+    show = true,
     height = 100,
     width = 100,
     length = 100,
@@ -52,10 +53,9 @@ const Box: React.FC<Props> = memo(function BoxPresenter({
   } = useHooks({ property, geometry, feature, onLayerEdit });
 
   const scalePointDimension = ((width + height + length) / 3) * 0.05;
-
   const [layerId, featureId] = [layer?.id, feature?.id];
 
-  return !isVisible ? null : (
+  return !isVisible || !show ? null : (
     <>
       {SIDE_PLANES.map((plane, i) => (
         <Side

diff --git a/src/core/engines/Cesium/Feature/Ellipsoid/index.tsx b/src/core/engines/Cesium/Feature/Ellipsoid/index.tsx
@@ -25,6 +25,7 @@ export type Property = EllipsoidAppearance & {
 };
 
 export default function Ellipsoid({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const { show = true } = property ?? {};
   const coordinates = useMemo(
     () =>
       geometry?.type === "Point"
@@ -58,7 +59,7 @@ export default function Ellipsoid({ id, isVisible, property, geometry, layer, fe
     [property?.near, property?.far],
   );
 
-  return !isVisible || !pos ? null : (
+  return !isVisible || !pos || !show ? null : (
     <EntityExt
       id={id}
       position={pos}

diff --git a/src/core/engines/Cesium/Feature/Marker/index.tsx b/src/core/engines/Cesium/Feature/Marker/index.tsx
@@ -36,6 +36,7 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
   );
 
   const {
+    show = true,
     extrude,
     pointSize = 10,
     style,
@@ -131,7 +132,7 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     [property?.near, property?.far],
   );
 
-  return !pos || !isVisible ? null : (
+  return !pos || !isVisible || !show ? null : (
     <>
       {extrudePoints && (
         <EntityExt

diff --git a/src/core/engines/Cesium/Feature/Model/index.tsx b/src/core/engines/Cesium/Feature/Model/index.tsx
@@ -33,6 +33,7 @@ export default function Model({ id, isVisible, property, geometry, layer, featur
   );
 
   const {
+    show = true,
     model,
     url,
     heightReference: hr,
@@ -87,7 +88,7 @@ export default function Model({ id, isVisible, property, geometry, layer, featur
     [property?.near, property?.far],
   );
 
-  return !isVisible || (!model && !url) || !position ? null : (
+  return !isVisible || !show || (!model && !url) || !position ? null : (
     <EntityExt
       id={id}
       position={position}

diff --git a/src/core/engines/Cesium/Feature/PhotoOverlay/index.tsx b/src/core/engines/Cesium/Feature/PhotoOverlay/index.tsx
@@ -43,6 +43,7 @@ export default function PhotoOverlay({
   );
 
   const {
+    show = true,
     image,
     imageSize,
     imageHorizontalOrigin,
@@ -91,7 +92,7 @@ export default function PhotoOverlay({
     [property?.near, property?.far],
   );
 
-  return !isVisible || !pos ? null : (
+  return !isVisible || !show || !pos ? null : (
     <>
       <EntityExt
         id={id}

diff --git a/src/core/engines/Cesium/Feature/Polygon/index.tsx b/src/core/engines/Cesium/Feature/Polygon/index.tsx
@@ -35,6 +35,7 @@ export default function Polygon({ id, isVisible, property, geometry, layer, feat
   );
 
   const {
+    show = true,
     fill = true,
     stroke,
     fillColor,
@@ -70,7 +71,7 @@ export default function Polygon({ id, isVisible, property, geometry, layer, feat
     [property?.near, property?.far],
   );
 
-  return !isVisible || !coordiantes ? null : (
+  return !isVisible || !coordiantes || !show ? null : (
     <EntityExt id={id} layerId={layer?.id} featureId={feature?.id} availability={availability}>
       <PolygonGraphics
         hierarchy={hierarchy}

diff --git a/src/core/engines/Cesium/Feature/Polyline/index.tsx b/src/core/engines/Cesium/Feature/Polyline/index.tsx
@@ -23,6 +23,7 @@ export type Property = PolylineAppearance & {
 };
 
 export default function Polyline({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const { show = true } = property || {};
   const coordinates = useMemo(
     () =>
       geometry?.type === "LineString"
@@ -47,7 +48,7 @@ export default function Polyline({ id, isVisible, property, geometry, layer, fea
     [property?.near, property?.far],
   );
 
-  return !isVisible || !coordinates ? null : (
+  return !isVisible || !coordinates || !show ? null : (
     <EntityExt id={id} layerId={layer?.id} featureId={feature?.id} availability={availability}>
       <PolylineGraphics
         positions={positions}

diff --git a/src/core/engines/Cesium/Feature/Raster/hooks.test.tsx b/src/core/engines/Cesium/Feature/Raster/hooks.test.tsx
@@ -0,0 +1,30 @@
+import { expect, test } from "vitest";
+
+import { renderHook } from "@reearth/test/utils";
+
+import { usePick } from "./hooks";
+
+test("usePick", () => {
+  const f = ["a", "b"] as const;
+  const p: { a?: number; b?: number; c?: number } = { a: 1, b: 2, c: 3 };
+  const { result, rerender } = renderHook(({ p }) => usePick(p, f), { initialProps: { p: p } });
+
+  expect(result.current).toEqual({ a: 1, b: 2 });
+  const first = result.current;
+
+  rerender({ p: { a: p.a, b: p.b, c: p.c } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { c: p.c, b: p.b, a: p.a } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { b: p.b, a: p.a } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { a: 10 } });
+  expect(result.current).not.toBe(first);
+  expect(result.current).toEqual({ a: 10 });
+});
diff --git a/src/core/engines/Cesium/Feature/Raster/hooks.ts b/src/core/engines/Cesium/Feature/Raster/hooks.ts
@@ -7,10 +7,11 @@ import {
 } from "cesium";
 import { MVTImageryProvider } from "cesium-mvt-imagery-provider";
 import md5 from "js-md5";
+import { isEqual, pick } from "lodash-es";
 import { useEffect, useMemo, useRef } from "react";
 import { useCesium } from "resium";
 
-import type { ComputedFeature, ComputedLayer, Feature } from "../../..";
+import type { ComputedFeature, ComputedLayer, Feature, PolygonAppearance } from "../../..";
 import { extractSimpleLayer, extractSimpleLayerData } from "../utils";
 
 import { Props } from "./types";
@@ -47,19 +48,19 @@ export const useWMS = ({
   property,
   layer,
 }: Pick<Props, "isVisible" | "property" | "layer">) => {
-  const { minimumLevel, maximumLevel, credit } = property ?? {};
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
   const { type, url, layers } = useData(layer);
 
   const imageryProvider = useMemo(() => {
-    if (!isVisible || !url || !layers || type !== "wms") return;
+    if (!isVisible || !show || !url || !layers || type !== "wms") return;
     return new WebMapServiceImageryProvider({
       url,
       layers,
       minimumLevel,
       maximumLevel,
       credit,
     });
-  }, [isVisible, type, url, minimumLevel, maximumLevel, credit, layers]);
+  }, [isVisible, show, url, layers, type, minimumLevel, maximumLevel, credit]);
 
   useImageryProvider(imageryProvider);
 };
@@ -114,7 +115,7 @@ export const useMVT = ({
   Props,
   "isVisible" | "property" | "layer" | "onComputedFeatureFetch" | "evalFeature" | "onFeatureDelete"
 >) => {
-  const { minimumLevel, maximumLevel, credit } = property ?? {};
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
   const { type, url, layers } = useData(layer);
 
   const cachedFeaturesRef = useRef<Map<Feature["id"], Feature>>(new Map());
@@ -125,15 +126,12 @@ export const useMVT = ({
   const shouldSyncFeatureRef = useRef(false);
 
   const layerSimple = extractSimpleLayer(layer);
-  const polygonAppearanceFillStyle = layerSimple?.polygon?.fillColor;
-  const polygonAppearanceStrokeStyle = layerSimple?.polygon?.strokeColor;
-  const polygonAppearanceLineWidth = layerSimple?.polygon?.strokeWidth;
-  const polygonAppearanceLineJoin = layerSimple?.polygon?.lineJoin;
+  const layerPolygonAppearance = usePick(layerSimple?.polygon, polygonAppearanceFields);
 
   const tempFeaturesRef = useRef<Feature[]>([]);
   const tempComputedFeaturesRef = useRef<ComputedFeature[]>([]);
   const imageryProvider = useMemo(() => {
-    if (!isVisible || !url || !layers || type !== "mvt") return;
+    if (!isVisible || !show || !url || !layers || type !== "mvt") return;
     return new MVTImageryProvider({
       minimumLevel,
       maximumLevel,
@@ -183,16 +181,11 @@ export const useMVT = ({
                   return;
                 }
 
-                if (
-                  polygonAppearanceFillStyle !== feature?.properties.fillColor ||
-                  polygonAppearanceStrokeStyle !== feature?.properties.strokeStyle ||
-                  polygonAppearanceLineWidth !== feature?.properties.lineWidth ||
-                  polygonAppearanceLineJoin !== feature?.properties.lineJoin
-                ) {
-                  feature.properties.fillColor = polygonAppearanceFillStyle;
-                  feature.properties.strokeStyle = polygonAppearanceStrokeStyle;
-                  feature.properties.lineWidth = polygonAppearanceLineWidth;
-                  feature.properties.lineJoin = polygonAppearanceLineJoin;
+                const featurePolygonAppearance = pick(feature?.properties, polygonAppearanceFields);
+                if (!isEqual(layerPolygonAppearance, featurePolygonAppearance)) {
+                  Object.entries(layerPolygonAppearance ?? {}).forEach(([k, v]) => {
+                    feature.properties[k] = v;
+                  });
 
                   const computedFeature = evalFeature?.(layer, feature);
                   if (computedFeature) {
@@ -214,11 +207,16 @@ export const useMVT = ({
           tempComputedFeaturesRef.current.push(computedFeature);
         }
 
+        const polygon = computedFeature?.polygon;
         return {
-          fillStyle: computedFeature?.polygon?.fillColor,
-          strokeStyle: computedFeature?.polygon?.strokeColor,
-          lineWidth: computedFeature?.polygon?.strokeWidth,
-          lineJoin: computedFeature?.polygon?.lineJoin,
+          fillStyle:
+            (polygon?.fill ?? true) && (polygon?.show ?? true)
+              ? polygon?.fillColor
+              : "rgba(0,0,0,0)", // hide the feature
+          strokeStyle:
+            polygon?.stroke && (polygon?.show ?? true) ? polygon?.strokeColor : "rgba(0,0,0,0)", // hide the feature
+          lineWidth: polygon?.strokeWidth,
+          lineJoin: polygon?.lineJoin,
         };
       },
       onSelectFeature: (mvtFeature, tile) => {
@@ -234,18 +232,16 @@ export const useMVT = ({
     });
   }, [
     isVisible,
-    type,
+    show,
     url,
+    layers,
+    type,
     minimumLevel,
     maximumLevel,
     credit,
-    layers,
-    evalFeature,
     onComputedFeatureFetch,
-    polygonAppearanceFillStyle,
-    polygonAppearanceStrokeStyle,
-    polygonAppearanceLineWidth,
-    polygonAppearanceLineJoin,
+    evalFeature,
+    layerPolygonAppearance,
   ]);
 
   useEffect(() => {
@@ -261,3 +257,22 @@ export const useMVT = ({
 
   useImageryProvider(imageryProvider);
 };
+
+export const usePick = <T extends object, U extends keyof T>(
+  o: T | undefined | null,
+  fields: readonly U[],
+): Pick<T, U> | undefined => {
+  const p = useMemo(() => (o ? pick(o, fields) : undefined), [o, fields]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => p, [JSON.stringify(p)]);
+};
+
+const polygonAppearanceFields: (keyof PolygonAppearance)[] = [
+  "show",
+  "fill",
+  "fillColor",
+  "stroke",
+  "strokeColor",
+  "strokeWidth",
+  "lineJoin",
+];
diff --git a/src/core/engines/Cesium/Feature/Resource/index.tsx b/src/core/engines/Cesium/Feature/Resource/index.tsx
@@ -42,7 +42,7 @@ type CachedFeature = {
 };
 
 export default function Resource({ isVisible, property, layer, onComputedFeatureFetch }: Props) {
-  const { clampToGround } = property ?? {};
+  const { show = true, clampToGround } = property ?? {};
   const [type, url] = useMemo((): [ResourceAppearance["type"], string | undefined] => {
     const data = extractSimpleLayerData(layer);
     const type = property?.type;
@@ -92,7 +92,7 @@ export default function Resource({ isVisible, property, layer, onComputedFeature
     });
   }, [layer, viewer]);
 
-  if (!isVisible || !Component || !url) return null;
+  if (!isVisible || !show || !Component || !url) return null;
 
   return (
     <Component data={url} show={true} clampToGround={clampToGround} onChange={handleOnChange} />