@reearth/core 0.0.7-alpha.7 → 0.0.7-alpha.70

package/src/mantle/evaluator/simple/expression/expression.test.ts

@@ -26,6 +26,14 @@ describe("replaceDefines", () => {
     });
     expect(result).toBe("(value1) + (value2)");
   });
+
+  test("should handle Japanese text with multiple variables", () => {
+    const result = replaceDefines("${住所} (${人数}人)", {
+      住所: "東京都渋谷区",
+      人数: "5",
+    });
+    expect(result).toBe("(東京都渋谷区) ((5)人)");
+  });
 });
 
 describe("removeBackslashes", () => {
@@ -40,6 +48,135 @@ describe("removeBackslashes", () => {
   });
 });
 
+describe("Expression evaluation", () => {
+  test("should evaluate Japanese expression with feature properties as string literal", () => {
+    const expressionString = '"${住所} (${人数}人)"';
+    const feature = {
+      properties: {
+        住所: "緑町",
+        人数: 2,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("緑町 (2人)");
+  });
+
+  test("should evaluate Japanese expression with two spaces - user observation", () => {
+    const expressionString = '"${住所}  (${人数}人)"';
+    const feature = {
+      properties: {
+        住所: "緑町",
+        人数: 2,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("緑町  (2人)");
+  });
+
+  test("should evaluate expression with multiple variables", () => {
+    const expressionString = '"${name}: ${住所} (${人数}人) - ${status}"';
+    const feature = {
+      properties: {
+        name: "太郎",
+        住所: "緑町",
+        人数: 2,
+        status: "完了",
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("太郎: 緑町 (2人) - 完了");
+  });
+
+  test("should evaluate Japanese expression without quotes - shows the issue", () => {
+    const expressionString = "${住所} (${人数}人)";
+    const feature = {
+      properties: {
+        住所: "緑町",
+        人数: 2,
+      },
+    } as Feature;
+
+    expect(() => {
+      const expression = new Expression(expressionString, feature);
+      expression.evaluate();
+    }).toThrow('Unexpected function call "czm_住所"');
+  });
+
+  test("should evaluate expression with quoted property names containing spaces", () => {
+    const expressionString = '${"user name"}';
+    const feature = {
+      properties: {
+        "user name": "Alice",
+        "user age": 25,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe("Alice");
+  });
+
+  test("should evaluate conditional expression with quoted property names", () => {
+    const expressionString = '${"user score"} > 50 ? "Pass" : "Fail"';
+    const feature1 = {
+      properties: {
+        "user score": 75,
+      },
+    } as Feature;
+    const feature2 = {
+      properties: {
+        "user score": 30,
+      },
+    } as Feature;
+
+    const expression1 = new Expression(expressionString, feature1);
+    const expression2 = new Expression(expressionString, feature2);
+
+    expect(expression1.evaluate()).toBe("Pass");
+    expect(expression2.evaluate()).toBe("Fail");
+  });
+
+  test("should evaluate arithmetic expression with quoted property names", () => {
+    const expressionString = '${"item price"} * ${"item quantity"}';
+    const feature = {
+      properties: {
+        "item price": 10.5,
+        "item quantity": 3,
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe(31.5);
+  });
+
+  test("should handle quoted property names with special characters", () => {
+    const expressionString = '${"user-info:name"} === "Bob Smith"';
+    const feature = {
+      properties: {
+        "user-info:name": "Bob Smith",
+        "email@address": "bob@example.com",
+      },
+    } as Feature;
+
+    const expression = new Expression(expressionString, feature);
+    const result = expression.evaluate();
+
+    expect(result).toBe(true);
+  });
+});
+
 describe("expression caches", () => {
   beforeEach(() => {
     EXPRESSION_CACHES.clear();

package/src/mantle/evaluator/simple/expression/node.ts

@@ -175,18 +175,16 @@ export class Node {
   }
   _evaluateVariableString(feature?: Feature) {
     const variableRegex = /\${(.*?)}/g;
-    let result = this._value;
-    let match = variableRegex.exec(result);
-    while (match !== null) {
-      const placeholder = match[0];
-      const variableName = match[1];
-      let property = feature?.properties[variableName];
-      if (typeof property === "undefined") {
-        property = "";
-      }
-      result = result.replace(placeholder, property);
-      match = variableRegex.exec(result);
-    }
+    const result = this._value.replace(
+      variableRegex,
+      (_placeholder: string, variableName: string) => {
+        let property = feature?.properties[variableName];
+        if (typeof property === "undefined") {
+          property = "";
+        }
+        return property;
+      },
+    );
     return result;
   }
   _evaluateVariable(feature?: Feature) {

package/src/mantle/evaluator/simple/expression/variableReplacer.test.ts

@@ -51,4 +51,182 @@ describe("replaceVariables", () => {
     const [result, _] = replaceVariables("${vari-able}");
     expect(result).toBe(`czm_vari$reearth_hyphen_$able`);
   });
+
+  test("should handle property names with spaces using bracket notation with double quotes", () => {
+    const [, res] = replaceVariables('${$["property name"]}', {
+      "property name": "value with space",
+      normalProperty: "normal value",
+    });
+    expect(res[0].literalValue).toBe("value with space");
+  });
+
+  test("should handle property names with spaces using bracket notation with single quotes", () => {
+    const [, res] = replaceVariables("${$['user name']}", {
+      "user name": "John Doe",
+      normalProperty: "normal value",
+    });
+    expect(res[0].literalValue).toBe("John Doe");
+  });
+
+  test("should handle nested property names with spaces", () => {
+    const [, res] = replaceVariables('${$["contact info"]["email address"]}', {
+      "contact info": {
+        "email address": "john@example.com",
+        "phone number": "123-456-7890",
+      },
+    });
+    expect(res[0].literalValue).toBe("john@example.com");
+  });
+
+  test("should handle array elements with property names containing spaces", () => {
+    const [, res] = replaceVariables('${$.items[0]["item name"]}', {
+      items: [
+        { "item name": "Product A", "item price": 100 },
+        { "item name": "Product B", "item price": 200 },
+      ],
+    });
+    expect(res[0].literalValue).toBe("Product A");
+  });
+
+  test("should handle array slice with property names containing spaces", () => {
+    const [, res] = replaceVariables('${$.items[:1]["item price"]}', {
+      items: [
+        { "item name": "Product A", "item price": 100 },
+        { "item name": "Product B", "item price": 200 },
+      ],
+    });
+    expect(res[0].literalValue).toBe(100);
+  });
+
+  test("should handle quoted dot notation for property names with spaces", () => {
+    const [, res] = replaceVariables("${$.'property name'}", {
+      "property name": "value with space",
+    });
+    expect(res[0].literalValue).toBe("value with space");
+  });
+
+  test("should handle multiple property names with spaces in one expression", () => {
+    const [result, res] = replaceVariables('${$["user name"]} - ${$["property name"]}', {
+      "user name": "John Doe",
+      "property name": "value with space",
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("John Doe");
+    expect(res[1].literalValue).toBe("value with space");
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain(res[1].literalName);
+  });
+
+  test("should handle quoted property names with double quotes", () => {
+    const [result, res] = replaceVariables('${"user info"}', {
+      "user info": "John Doe",
+      normalProperty: "normal value",
+    });
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("John Doe");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should handle quoted property names with single quotes", () => {
+    const [result, res] = replaceVariables("${'property name'}", {
+      "property name": "value with space",
+      normalProperty: "normal value",
+    });
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("value with space");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should handle multiple quoted property names in one expression", () => {
+    const [result, res] = replaceVariables('${"user name"} - ${"user age"}', {
+      "user name": "John Doe",
+      "user age": 30,
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("John Doe");
+    expect(res[1].literalValue).toBe(30);
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain("-");
+    expect(result).toContain(res[1].literalName);
+  });
+
+  test("should handle quoted property names with special characters", () => {
+    const [result, res] = replaceVariables('${"user-info:name"}', {
+      "user-info:name": "Jane Smith",
+    });
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("Jane Smith");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should reject mismatched quote types (double to single)", () => {
+    const [result, res] = replaceVariables("${\"user info'}", {
+      "user info": "John Doe",
+    });
+    // Should not match the quoted pattern, should fall back to variable name
+    expect(result).toContain("czm_");
+    expect(res).toHaveLength(0);
+  });
+
+  test("should reject mismatched quote types (single to double)", () => {
+    const [result, res] = replaceVariables("${'user info\"}", {
+      "user info": "Jane Doe",
+    });
+    // Should not match the quoted pattern, should fall back to variable name
+    expect(result).toContain("czm_");
+    expect(res).toHaveLength(0);
+  });
+
+  test("should correctly handle consecutive properties with different quote types", () => {
+    const [result, res] = replaceVariables("${\"prop1\"} + ${'prop2'}", {
+      prop1: "value1",
+      prop2: "value2",
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("value1");
+    expect(res[1].literalValue).toBe("value2");
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain("+");
+    expect(result).toContain(res[1].literalName);
+  });
+
+  test("should return empty string when quoted property is missing (consistent with regular variables)", () => {
+    const [result, res] = replaceVariables('${"missing"}', {
+      existing: "value",
+    });
+    // Returns empty string for missing quoted property (consistent with regular variables)
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should pass through regular variable name when property might be missing", () => {
+    const [result, res] = replaceVariables("${missing}");
+    // Regular variables are passed through as czm_variableName
+    // They will be evaluated later by Node._evaluateVariable
+    expect(result).toBe("czm_missing");
+    expect(res).toHaveLength(0);
+  });
+
+  test("should return empty string for missing JSONPath properties (consistent with regular variables)", () => {
+    const [result, res] = replaceVariables("${$.missingPath}", {
+      existing: "value",
+    });
+    // Returns empty string for missing JSONPath property
+    expect(res).toHaveLength(1);
+    expect(res[0].literalValue).toBe("");
+    expect(result).toBe(res[0].literalName);
+  });
+
+  test("should handle mixed existing and missing properties consistently", () => {
+    const [result, res] = replaceVariables('${"existing"} - ${"missing"}', {
+      existing: "value",
+    });
+    expect(res).toHaveLength(2);
+    expect(res[0].literalValue).toBe("value");
+    expect(res[1].literalValue).toBe(""); // Missing property returns empty string
+    expect(result).toContain(res[0].literalName);
+    expect(result).toContain("-");
+    expect(result).toContain(res[1].literalName);
+  });
 });

package/src/mantle/evaluator/simple/expression/variableReplacer.ts

@@ -14,6 +14,7 @@ export function replaceVariables(expression: string, feature?: any): [string, JP
   const featureDefined = typeof feature !== "undefined";
   const jsonPathCache: Record<string, any[]> = {};
   const varExpRegex = /^\$./;
+  const quotedStringRegex = /^(["'])(.+)\1$/;
   while (i >= 0) {
     if (isInsideQuotes(exp, i)) {
       const closeQuote = findCloseQuote(exp, i);
@@ -24,7 +25,22 @@ export function replaceVariables(expression: string, feature?: any): [string, JP
       result += exp.slice(0, i);
       const j = getCloseBracketIndex(exp, i);
       const varExp = exp.slice(i + 2, j);
-      if (varExpRegex.test(varExp)) {
+      const quotedMatch = varExp.match(quotedStringRegex);
+      if (quotedMatch) {
+        // Handle quoted property names like ${"user info"}
+        if (!featureDefined) {
+          return [result, []];
+        }
+        const propertyName = quotedMatch[2];
+        const propertyValue = feature[propertyName];
+        // Return empty string for missing properties to match regular variable behavior
+        const placeholderLiteral = generateRandomString(10);
+        literalJP.push({
+          literalName: placeholderLiteral,
+          literalValue: typeof propertyValue !== "undefined" ? propertyValue : "",
+        });
+        result += placeholderLiteral;
+      } else if (varExpRegex.test(varExp)) {
         if (!featureDefined) {
           return [result, []];
         }
@@ -37,16 +53,13 @@ export function replaceVariables(expression: string, feature?: any): [string, JP
             return [result, []];
           }
         }
-        if (res.length !== 0) {
-          const placeholderLiteral = generateRandomString(10);
-          literalJP.push({
-            literalName: placeholderLiteral,
-            literalValue: res[0],
-          });
-          result += placeholderLiteral;
-        } else {
-          return ["false", []];
-        }
+        // Return empty string for missing properties to match regular variable behavior
+        const placeholderLiteral = generateRandomString(10);
+        literalJP.push({
+          literalName: placeholderLiteral,
+          literalValue: res.length !== 0 ? res[0] : "",
+        });
+        result += placeholderLiteral;
       } else {
         const replacedVarExp = replaceReservedWord(varExp);
         result += `${VARIABLE_PREFIX}${replacedVarExp}`;

package/src/mantle/types/appearance.ts

@@ -102,6 +102,7 @@ export type PolygonAppearance = {
   stroke?: boolean;
   strokeColor?: string;
   strokeWidth?: number;
+  height?: number;
   heightReference?: "none" | "clamp" | "relative";
   shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
   lineJoin?: CanvasLineJoin;
@@ -156,6 +157,7 @@ export type ModelAppearance = {
   model?: string; // For compat
   url?: string;
   heightReference?: "none" | "clamp" | "relative";
+  height?: number;
   heading?: number;
   pitch?: number;
   roll?: number;
@@ -191,16 +193,16 @@ export type FrustumAppearance = {
 
 export type Cesium3DTilesAppearance = {
   show?: boolean;
+  height?: number;
   color?: string;
   styleUrl?: string;
   shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
-  colorBlendMode?: "highlight" | "replace" | "mix" | "default";
+  colorBlendMode?: "highlight" | "replace" | "mix";
   edgeWidth?: number;
   edgeColor?: string;
   selectedFeatureColor?: string; // This doesn't support expression
   disableIndexingFeature?: boolean;
   tileset?: string;
-  apiKey?: string;
   experimental_clipping?: EXPERIMENTAL_clipping;
   pointSize?: number;
   meta?: unknown;

package/src/mantle/types/index.ts

@@ -76,6 +76,10 @@ export type Data = {
   updateInterval?: number; // milliseconds
   parameters?: Record<string, any>;
   idProperty?: string;
+  provider?: string;
+  serviceTokens?: {
+    googleMapApiKey?: string;
+  };
   time?: {
     property?: string;
     interval?: number; // milliseconds
@@ -104,6 +108,7 @@ export type DataType =
   | "geojson"
   | "3dtiles"
   | "osm-buildings"
+  | "reearth-buildings"
   | "google-photorealistic"
   | "czml"
   | "csv"

package/src/{Visualizer → shared}/interactionMode.ts

@@ -1,6 +1,6 @@
-import { FEATURE_FLAGS } from "./featureFlags";
+import { FEATURE_FLAGS } from "../shared/featureFlags";
 
-export type InteractionModeType = "default" | "move" | "selection" | "sketch";
+export type InteractionModeType = "default" | "move" | "selection" | "sketch" | "spatialId";
 
 // If you would like enable a feature in a specific mode,
 // just set the feature's flag here to that mode.
@@ -22,4 +22,5 @@ export const INTERACTION_MODES: Record<InteractionModeType, number> = {
     FEATURE_FLAGS.CAMERA_ZOOM |
     FEATURE_FLAGS.CAMERA_TILT,
   sketch: FEATURE_FLAGS.SKETCH | FEATURE_FLAGS.CAMERA_ZOOM | FEATURE_FLAGS.CAMERA_TILT,
+  spatialId: FEATURE_FLAGS.CAMERA_ZOOM | FEATURE_FLAGS.CAMERA_TILT,
 };

package/src/test/setup.ts

@@ -5,7 +5,7 @@ import { cleanup } from "@testing-library/react";
 import { afterEach, expect, vi } from "vitest";
 
 // Vitest on GitHub Actions requires TransformStream to run tests with Cesium
-import "web-streams-polyfill/es2018";
+import "web-streams-polyfill/polyfill";
 
 declare global {
   namespace Vi {

package/src/test/utils.tsx

@@ -23,7 +23,7 @@ vitest.mock("react-inlinesvg", () => {
 });
 
 const render = (
-  ui: React.ReactElement,
+  ui: React.ReactElement<any>,
   // queryMocks?: readonly MockedResponse<Record<string, any>>[],
   { ...renderOptions } = {},
 ) => {

package/src/types/modules.d.ts

@@ -0,0 +1,96 @@
+// Type declarations for modules without built-in types
+
+declare module "protomaps" {
+  export interface Zxy {
+    z: number;
+    x: number;
+    y: number;
+  }
+
+  export interface Feature {
+    readonly geomType: number;
+    readonly geometry: number[][];
+    readonly geom: Array<Array<{ x: number; y: number }>>;
+    readonly id?: number | string;
+    readonly props: Record<string, any>;
+  }
+
+  export class TileCache {
+    constructor(cacheFunction?: any, maxCacheEntries?: number);
+    get(coords: Zxy): Promise<any>;
+    readonly tileSize: number;
+  }
+
+  export class ZxySource {
+    constructor(url: string, cache?: boolean);
+  }
+}
+
+declare module "@reearth/cesium-mvt-imagery-provider" {
+  import { ImageryProvider } from "cesium";
+
+  export class MVTImageryProvider implements ImageryProvider {
+    constructor(options: any);
+    readonly ready: boolean;
+    readonly rectangle: any;
+    readonly tileWidth: number;
+    readonly tileHeight: number;
+    readonly maximumLevel: number;
+    readonly minimumLevel: number;
+    readonly tilingScheme: any;
+    readonly tileDiscardPolicy: any;
+    readonly errorEvent: any;
+    readonly credit: any;
+    readonly proxy: any;
+    readonly hasAlphaChannel: boolean;
+    getTileCredits(x: number, y: number, level: number): any[];
+    requestImage(x: number, y: number, level: number, request?: any): Promise<any> | undefined;
+    pickFeatures(
+      x: number,
+      y: number,
+      level: number,
+      longitude: number,
+      latitude: number,
+    ): Promise<any[]> | undefined;
+  }
+}
+
+declare module "cesium-dnd" {
+  import { Viewer } from "cesium";
+
+  export interface CesiumDnDOptions {
+    onDrag?: (e: any, position: any, context: Context) => boolean | void;
+    onDrop?: (e: any, position: any) => boolean | void;
+    onDropError?: (error: Error) => void;
+    dragDelay?: number;
+    initialDisabled?: boolean;
+  }
+
+  export class Context {
+    constructor(viewer: Viewer, options?: CesiumDnDOptions);
+    disable(): void;
+    enable(): void;
+    destroy(): void;
+  }
+
+  const CesiumDnD: typeof Context;
+  export default CesiumDnD;
+  export type { Context };
+}
+
+declare module "@turf/ellipse" {
+  import { Feature, Polygon, Point, Units } from "@turf/helpers";
+
+  export default function ellipse(
+    center: Point | number[],
+    xSemiAxis: number,
+    ySemiAxis: number,
+    options?: {
+      angle?: number;
+      pivot?: Point | number[];
+      steps?: number;
+      units?: Units;
+      properties?: Record<string, any>;
+    },
+  ): Feature<Polygon>;
+}

package/src/utils/StringMatcher.ts

@@ -27,7 +27,7 @@ export class StringMatcher {
       : new RegExp(escapeStringRegexp(search), "g");
 
     const matches = [...source.matchAll(pattern)].filter(
-      (match): match is RegExpMatchArray & { index: number } => match.index != null,
+      (match): match is RegExpExecArray & { index: number } => match.index != null,
     );
     if (matches == null || matches.length === 0) {
       throw new Error(`No matching codes found for: "${search}"`);

package/src/utils/image.ts

@@ -1,7 +1,7 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 
 export const useImage = (src?: string): HTMLImageElement | undefined => {
-  const imgRef = useRef<HTMLImageElement>();
+  const imgRef = useRef<HTMLImageElement>(undefined);
   const [img, setImg] = useState<HTMLImageElement>();
 
   useEffect(() => {
@@ -23,13 +23,3 @@ export const useImage = (src?: string): HTMLImageElement | undefined => {
 
   return img;
 };
-
-export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void): string => {
-  const can = useMemo(() => document.createElement("canvas"), []);
-  const [data, setData] = useState<string>("");
-  useEffect(() => {
-    cb(can);
-    setData(can.toDataURL());
-  }, [can, cb]);
-  return data;
-};

package/src/utils/use-delayed-count.ts

@@ -9,7 +9,7 @@ export const useDelayedCount = (durations: Durations = []) => {
   const [mode, setMode] = useState(0);
   const prevMode = usePreviousDistinct(mode);
   const exit = useRef(false);
-  const timeout = useRef<number>();
+  const timeout = useRef<number>(undefined);
 
   const advanceMode = useCallback(() => {
     setMode(m => Math.max(0, Math.min(durations.length + 1, m + (exit.current ? -1 : 1))));

package/src/utils/use-dnd/drop.ts

@@ -17,7 +17,7 @@ export type DropOptions<T extends ItemType = ItemType, E extends HTMLElement = H
   drop?: (item: Item<T>, context: Context) => Dropper | undefined;
   shallow?: boolean;
   disabled?: boolean;
-  wrapperRef?: React.RefObject<E>;
+  wrapperRef?: React.RefObject<E | null>;
 };
 
 export const useDrop = <T extends ItemType = ItemType, E extends HTMLElement = HTMLElement>({

package/src/utils/util.ts

@@ -73,7 +73,7 @@ export const isEmptyString = function (text: string): boolean {
 };
 
 export function useConstant<T>(callback: () => T): T {
-  const ref = useRef<{ value: T }>();
+  const ref = useRef<{ value: T }>(undefined);
   if (ref.current == null) {
     ref.current = { value: callback() };
   }

package/src/utils/value.ts

@@ -204,8 +204,8 @@ export const toCSSFont = (t?: Typography, d?: Typography) => {
   const ff = getCSSFontFamily(t?.fontFamily ?? d?.fontFamily)
     ?.replace("'", '"')
     .trim();
-  return `${t?.italic ?? d?.italic ? "italic " : ""}${
-    t?.bold ?? d?.bold ? "bold " : (t?.fontWeight ?? d?.fontWeight ?? "") + " "
+  return `${(t?.italic ?? d?.italic) ? "italic " : ""}${
+    (t?.bold ?? d?.bold) ? "bold " : (t?.fontWeight ?? d?.fontWeight ?? "") + " "
   }${t?.fontSize ?? d?.fontSize ?? 16}px ${
     ff ? (ff.includes(`"`) ? ff : `"${ff}"`) : "sans-serif"
   }`;