@reearth/core 0.0.7-alpha.5 → 0.0.7-alpha.51

package/src/engines/Cesium/Feature/index.tsx

@@ -1,5 +1,5 @@
 import LRUCache from "lru-cache";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, type JSX } from "react";
 
 import type { AppearanceTypes, FeatureComponentProps, ComputedLayer } from "../..";
 import { ComputedFeature, DataType, guessType } from "../../../mantle";
@@ -96,6 +96,7 @@ const FEATURE_DELEGATE_THRESHOLD = 6000;
 export default function Feature({
   layer,
   isHidden,
+  sketchEditingFeature,
   ...props
 }: FeatureComponentProps): JSX.Element | null {
   const data = extractSimpleLayerData(layer);
@@ -131,7 +132,10 @@ export default function Feature({
     const useSceneSpecularEnvironmentMaps =
       !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
 
-    const isVisible = layer.layer.visible !== false && !isHidden;
+    const isVisible =
+      layer.layer.visible !== false &&
+      !isHidden &&
+      !(sketchEditingFeature?.layerId === layer.id && sketchEditingFeature?.feature?.id === f?.id);
 
     const componentId =
       urlMD5 +
@@ -140,7 +144,7 @@ export default function Feature({
           f?.id ?? ""
         }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
           JSON.stringify(f?.[k]) ?? ""
-        }_${JSON.stringify(layer.transition) ?? ""}`,
+        }_${JSON.stringify(layer.transition) ?? ""}_${JSON.stringify(f?.geometry) ?? ""}`,
       );
 
     if (cacheable) {

package/src/engines/Cesium/Feature/utils.tsx

@@ -17,15 +17,16 @@ import {
   GroundPrimitive,
 } from "cesium";
 import md5 from "js-md5";
-import { pick } from "lodash-es";
+import { cloneDeep, pick } from "lodash-es";
 import {
   ComponentProps,
   ComponentType,
   ForwardedRef,
   forwardRef,
+  useCallback,
   useLayoutEffect,
   useMemo,
-  useRef,
+  useState,
 } from "react";
 import { type CesiumComponentRef, Entity } from "resium";
 
@@ -86,10 +87,11 @@ function EntityExtComponent(
   }: ComponentProps<typeof Entity> & Tag,
   ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
 ) {
-  const r = useRef<CesiumComponentRef<CesiumEntity>>(null);
+  const [entity, setEntity] = useState<CesiumComponentRef<CesiumEntity> | null>(null);
 
   useLayoutEffect(() => {
-    attachTag(r.current?.cesiumElement, {
+    if (!entity?.cesiumElement) return;
+    attachTag(entity.cesiumElement, {
       layerId: layerId || props.id,
       featureId,
       draggable,
@@ -105,10 +107,12 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
-    r.current?.cesiumElement,
+    entity,
   ]);
 
-  return <Entity ref={composeRefs(ref, r)} {...props} />;
+  const handleRef = useCallback((r: CesiumComponentRef<CesiumEntity>) => setEntity(r), []);
+
+  return <Entity ref={composeRefs(ref, handleRef)} {...props} />;
 }
 
 export function attachTag(
@@ -232,13 +236,20 @@ export const extractSimpleLayer = (
   if (l?.type !== "simple") {
     return;
   }
-  return l;
+  // Proxy object lead to issues when creating mvt imagery provider, so convert to plain object
+  // Not sure for other types, but to keep consistency, convert all simple layers here
+  // It should be okey since simple layer data is supposed to be simple enough and computed data should not be included
+  return toPlainObject(l);
 };
 
 export const extractSimpleLayerData = (layer: ComputedLayer | undefined): Data | undefined => {
   return extractSimpleLayer(layer)?.data;
 };
 
+export const toPlainObject = <T,>(obj: T): T => {
+  return cloneDeep(obj);
+};
+
 export const toColor = (c?: string) => {
   if (!c || typeof c !== "string") return undefined;
 

package/src/engines/Cesium/Shaders/OverriddenShaders/GlobeFS/IBL.glsl

@@ -6,8 +6,7 @@
 // https://github.com/CesiumGS/cesium/blob/1.106/packages/engine/Source/Shaders/Model/ImageBasedLightingStageFS.glsl
 // Specular term was removed, as I never apply it on terrain.
 vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
-                                     vec3 lightDirectionEC, vec3 lightColorHdr,
-                                     czm_pbrParameters pbrParameters) {
+                                     vec3 lightDirectionEC, czm_modelMaterial material) {
   vec3 v = -positionEC;
   vec3 n = normalEC;
   vec3 l = normalize(lightDirectionEC);
@@ -24,21 +23,18 @@ vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
   vec3 diffuseIrradiance =
       czm_sphericalHarmonics(cubeDir, u_reearth_sphericalHarmonicCoefficients);
 
-  return pbrParameters.diffuseColor * diffuseIrradiance;
+  return material.diffuse * diffuseIrradiance;
 }
 
 vec4 reearth_computeImageBasedLightingColor(vec4 color) {
   if (u_reearth_globeImageBasedLighting) {
-    czm_pbrParameters pbrParameters;
-    pbrParameters.diffuseColor = color.rgb;
+    czm_modelMaterial material;
+    material.diffuse = color.rgb;
 
     vec3 normalEC = normalize(v_normalEC);
     vec3 lighting =
-        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC,
-                        czm_lightColorHdr, pbrParameters);
-    lighting += reearth_imageBasedLightingStage(
-                    v_positionEC, normalEC, czm_lightDirectionEC,
-                    czm_lightColorHdr, pbrParameters) *
+        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC, material) * czm_lightColorHdr;
+    lighting += reearth_imageBasedLightingStage(v_positionEC, normalEC, czm_lightDirectionEC, material) *
                 u_vertexShadowDarkness;
 
 #ifndef HDR

package/src/engines/Cesium/Sketch/ControlPoint.tsx

@@ -5,37 +5,42 @@ import {
   type PositionProperty,
   type Property,
 } from "@cesium/engine";
-import { useMemo, useRef, type FC } from "react";
+import { useCallback, useMemo, useRef, type FC } from "react";
 import { Entity } from "resium";
 import invariant from "tiny-invariant";
 
 import { useConstant } from "../../../utils";
 
-let image: HTMLCanvasElement | undefined;
+import { ADDING_POINT_COLOR, DEFAULT_EDIT_COLOR, SELECTED_EDIT_COLOR } from "./constants";
 
-function getImage(): HTMLCanvasElement {
-  if (image != null) {
-    return image;
-  }
-  image = document.createElement("canvas");
-  image.width = 16;
-  image.height = 16;
-  const context = image.getContext("2d");
-  invariant(context != null);
-  context.fillStyle = "white";
-  context.fillRect(3, 3, 10, 10);
-  context.strokeStyle = "black";
-  context.lineWidth = 2;
-  context.strokeRect(3, 3, 10, 10);
-  return image;
-}
+import { ControlPointMouseEventHandler } from ".";
+
+let drawPointImage: HTMLCanvasElement | undefined;
+let editPointImage: HTMLCanvasElement | undefined;
+let selectedPointImage: HTMLCanvasElement | undefined;
+let addingPointImage: HTMLCanvasElement | undefined;
 
 export interface ControlPointProps {
   position: Property | Cartesian3;
   clampToGround?: boolean;
+  index: number;
+  isEditing?: boolean;
+  isSelected?: boolean;
+  isAddingPoint?: boolean;
+  isExtrudedControlPoint?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround = false }) => {
+export const ControlPoint: FC<ControlPointProps> = ({
+  position,
+  clampToGround = false,
+  index,
+  isEditing,
+  isSelected,
+  isAddingPoint,
+  isExtrudedControlPoint,
+  handleControlPointMouseEvent,
+}) => {
   const positionRef = useRef(position);
   positionRef.current = position;
   const positionProperty = useConstant(
@@ -53,15 +58,114 @@ export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround =
     () => ({
       position: positionProperty,
       billboard: {
-        image: getImage(),
-        width: 8,
-        height: 8,
+        image: isEditing
+          ? isAddingPoint
+            ? getAddingPointImage()
+            : isSelected
+              ? getSelectedPointImage()
+              : getEditPointImage()
+          : getDrawPointImage(),
+        width: isEditing ? 16 : 8,
+        height: isEditing ? 16 : 8,
         heightReference: clampToGround ? HeightReference.CLAMP_TO_GROUND : HeightReference.NONE,
         disableDepthTestDistance: Infinity,
       },
     }),
-    [clampToGround, positionProperty],
+    [clampToGround, positionProperty, isAddingPoint, isEditing, isSelected],
   );
 
-  return <Entity {...options} />;
+  const handleMouseDown = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "mousedown");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  const handleMouseClick = useCallback(() => {
+    handleControlPointMouseEvent?.(index, !!isExtrudedControlPoint, "click");
+  }, [index, isExtrudedControlPoint, handleControlPointMouseEvent]);
+
+  return <Entity {...options} onMouseDown={handleMouseDown} onClick={handleMouseClick} />;
 };
+
+function getDrawPointImage(): HTMLCanvasElement {
+  if (drawPointImage != null) {
+    return drawPointImage;
+  }
+  drawPointImage = document.createElement("canvas");
+  drawPointImage.width = 16;
+  drawPointImage.height = 16;
+  const ctx = drawPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.fillStyle = "white";
+  ctx.fillRect(3, 3, 10, 10);
+  ctx.strokeStyle = "black";
+  ctx.lineWidth = 2;
+  ctx.strokeRect(3, 3, 10, 10);
+  return drawPointImage;
+}
+
+function getEditPointImage(): HTMLCanvasElement {
+  return getImage(editPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: DEFAULT_EDIT_COLOR,
+  });
+}
+
+function getSelectedPointImage(): HTMLCanvasElement {
+  return getImage(selectedPointImage, {
+    size: 32,
+    color: "white",
+    strokeColor: SELECTED_EDIT_COLOR,
+  });
+}
+
+function getAddingPointImage(): HTMLCanvasElement {
+  if (addingPointImage != null) {
+    return addingPointImage;
+  }
+  addingPointImage = document.createElement("canvas");
+  addingPointImage.width = 32;
+  addingPointImage.height = 32;
+  const ctx = addingPointImage.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(16, 16, 12, 0, 2 * Math.PI);
+  ctx.fillStyle = "white";
+  ctx.fill();
+  ctx.strokeStyle = ADDING_POINT_COLOR;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(16, 8);
+  ctx.lineTo(16, 24);
+  ctx.stroke();
+  ctx.moveTo(8, 16);
+  ctx.lineTo(24, 16);
+  ctx.stroke();
+  return addingPointImage;
+}
+
+function getImage(
+  canvas: HTMLCanvasElement | undefined,
+  options: {
+    size: number;
+    color: string;
+    strokeColor: string;
+  },
+): HTMLCanvasElement {
+  if (canvas != null) {
+    return canvas;
+  }
+  canvas = document.createElement("canvas");
+  canvas.width = options.size;
+  canvas.height = options.size;
+  const ctx = canvas.getContext("2d");
+  invariant(ctx != null);
+  ctx.beginPath();
+  ctx.arc(options.size / 2, options.size / 2, options.size / 2 - 4, 0, 2 * Math.PI);
+  ctx.fillStyle = options.color;
+  ctx.fill();
+  ctx.strokeStyle = options.strokeColor;
+  ctx.lineWidth = 4;
+  ctx.stroke();
+  return canvas;
+}

package/src/engines/Cesium/Sketch/ExtrudedControlPoints.tsx

@@ -1,46 +1,91 @@
-import { Cartesian3, type Color } from "@cesium/engine";
+import { Cartesian3, Color } from "@cesium/engine";
 import { memo, type FC } from "react";
-import { useCesium } from "resium";
-import invariant from "tiny-invariant";
 
+import { Position3d } from "../../../types";
+
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { ControlPoint } from "./ControlPoint";
 import { type GeometryOptions } from "./createGeometry";
 import { ExtrudedMeasurement } from "./ExtrudedMeasurement";
 
+import { ControlPointMouseEventHandler } from ".";
+
 export interface ExtrudedControlPointsProps {
   geometryOptions: GeometryOptions;
   extrudedHeight: number;
+  extrudedPoint?: Position3d;
+  centroidBasePoint?: Position3d;
+  centroidExtrudedPoint?: Position3d;
+  catchedExtrudedPoint?: boolean;
   color?: Color;
+  isEditing?: boolean;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
-const cartesianScratch = new Cartesian3();
-
 const ExtrudedControlPoints: FC<ExtrudedControlPointsProps> = memo(
-  ({ geometryOptions: { controlPoints }, extrudedHeight, color }) => {
-    const { viewer } = useCesium();
+  ({
+    geometryOptions: { controlPoints, type },
+    extrudedHeight,
+    color,
+    isEditing,
+    extrudedPoint: extrudedPointPosition,
+    centroidBasePoint: extrudeBasePointPosition,
+    centroidExtrudedPoint: extrudeControlPointPosition,
+    catchedExtrudedPoint,
+    handleControlPointMouseEvent,
+  }) => {
     const controlPoint = controlPoints[controlPoints.length - 1];
-    const normal = viewer?.scene?.globe.ellipsoid.geodeticSurfaceNormal(
-      controlPoint,
-      cartesianScratch,
-    );
 
-    invariant(normal !== undefined);
-    const extrudedPoint = Cartesian3.add(
-      controlPoint,
-      Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
-      cartesianScratch,
-    );
+    const extrudedPoint = extrudedPointPosition
+      ? new Cartesian3(...extrudedPointPosition)
+      : undefined;
+
+    const heightBasePoint = extrudeBasePointPosition
+      ? new Cartesian3(...extrudeBasePointPosition)
+      : undefined;
+
+    const centroidExtrudedPoint = extrudeControlPointPosition
+      ? new Cartesian3(...extrudeControlPointPosition)
+      : undefined;
 
     return (
       <>
-        <ControlPoint position={controlPoint} clampToGround />
-        <ControlPoint position={extrudedPoint} />
-        <ExtrudedMeasurement
-          a={controlPoint}
-          b={extrudedPoint}
-          extrudedHeight={extrudedHeight}
-          color={color}
-        />
+        {extrudedPoint && (
+          <>
+            <ControlPoint
+              index={-1}
+              position={extrudedPoint}
+              isEditing={isEditing}
+              isExtrudedControlPoint
+              handleControlPointMouseEvent={handleControlPointMouseEvent}
+            />
+            {(!isEditing || catchedExtrudedPoint) && (
+              <ExtrudedMeasurement
+                a={controlPoint}
+                b={extrudedPoint}
+                extrudedHeight={extrudedHeight}
+                color={isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color}
+                showLine={type !== "extrudedPolygon"}
+              />
+            )}
+          </>
+        )}
+        {heightBasePoint && (
+          <ControlPoint
+            index={-1}
+            position={heightBasePoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
+        {centroidExtrudedPoint && (
+          <ControlPoint
+            index={-1}
+            position={centroidExtrudedPoint}
+            isEditing={isEditing}
+            isExtrudedControlPoint
+          />
+        )}
       </>
     );
   },

package/src/engines/Cesium/Sketch/ExtrudedMeasurement.tsx

@@ -46,6 +46,7 @@ export interface ExtrudedMeasurementProps {
   b: Cartesian3;
   extrudedHeight: number;
   color?: Color;
+  showLine?: boolean;
 }
 
 export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
@@ -53,6 +54,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
   b,
   extrudedHeight,
   color,
+  showLine,
 }) => {
   const position = useConstant(() => new Cartesian3());
   return (
@@ -64,7 +66,7 @@ export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
             : `${(extrudedHeight / 1000).toFixed(1)} km`}
         </MeasurementText>
       </ScreenSpaceElement>
-      <MeasurementLine a={a} b={b} color={color} />
+      {showLine && <MeasurementLine a={a} b={b} color={color} />}
     </>
   );
 };

package/src/engines/Cesium/Sketch/ExtrudedPolygonEntity.tsx

@@ -1,10 +1,10 @@
 import {
   CallbackProperty,
   ClassificationType,
+  Color,
   ColorMaterialProperty,
   HeightReference,
   ShadowMode,
-  type Color,
   type PolygonHierarchy,
 } from "@cesium/engine";
 import { useMemo, useRef, type FC } from "react";
@@ -12,60 +12,60 @@ import { useMemo, useRef, type FC } from "react";
 import { useConstant } from "../../../utils";
 import { useContext } from "../Feature/context";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { Entity, type EntityProps } from "./Entity";
 
 export interface ExtrudedPolygonEntityProps {
-  dynamic?: boolean;
   id?: string;
   hierarchy: PolygonHierarchy;
   extrudedHeight: number;
   color?: Color;
   disableShadow?: boolean;
-  enableRelativeHeight?: boolean;
+  isEditing?: boolean;
 }
 
 export const ExtrudedPolygonEntity: FC<ExtrudedPolygonEntityProps> = ({
-  dynamic = false,
   id,
   hierarchy: hierarchyProp,
   extrudedHeight: extrudedHeightProp,
   color,
   disableShadow = false,
-  enableRelativeHeight = false,
+  isEditing,
 }) => {
   const hierarchyRef = useRef(hierarchyProp);
   hierarchyRef.current = hierarchyProp;
   const hierarchyProperty = useConstant(
     () => new CallbackProperty(() => hierarchyRef.current, false),
   );
-  const hierarchy = dynamic ? hierarchyProperty : hierarchyProp;
+  const hierarchy = hierarchyProperty;
 
   const extrudedHeightRef = useRef(extrudedHeightProp);
   extrudedHeightRef.current = extrudedHeightProp;
   const extrudedHeightProperty = useConstant(
     () => new CallbackProperty(() => extrudedHeightRef.current, false),
   );
-  const extrudedHeight = dynamic ? extrudedHeightProperty : extrudedHeightProp;
+  const extrudedHeight = extrudedHeightProperty;
 
   const options = useMemo(
     (): EntityProps => ({
       polygon: {
         hierarchy,
+        heightReference: HeightReference.RELATIVE_TO_TERRAIN,
         extrudedHeight,
-        extrudedHeightReference: HeightReference.RELATIVE_TO_GROUND,
+        extrudedHeightReference: HeightReference.RELATIVE_TO_TERRAIN,
+        // extrudedHeightReference: HeightReference.NONE,
         fill: true,
         outline: true,
         outlineWidth: 1,
-        outlineColor: color?.withAlpha(1),
-        material: new ColorMaterialProperty(color),
+        outlineColor: isEditing
+          ? Color.fromCssColorString(DEFAULT_EDIT_COLOR)
+          : color?.withAlpha(1),
+        material: new ColorMaterialProperty(isEditing ? color?.withAlpha(0.2) : color),
         classificationType: ClassificationType.TERRAIN,
         shadows: disableShadow ? ShadowMode.DISABLED : ShadowMode.ENABLED,
-        ...(enableRelativeHeight
-          ? { height: 0, heightReference: HeightReference.RELATIVE_TO_GROUND }
-          : undefined),
       },
     }),
-    [extrudedHeight, disableShadow, hierarchy, color, enableRelativeHeight],
+    [extrudedHeight, disableShadow, hierarchy, color, isEditing],
   );
 
   const { requestRender } = useContext();

package/src/engines/Cesium/Sketch/PolylineEntity.tsx

@@ -1,21 +1,24 @@
-import { CallbackProperty, ClassificationType, type Cartesian3, type Color } from "@cesium/engine";
+import { CallbackProperty, ClassificationType, Color, type Cartesian3 } from "@cesium/engine";
 import { useMemo, useRef, type FC } from "react";
 
 import { useConstant } from "../../../utils";
 import { useContext } from "../Feature/context";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { Entity, type EntityProps } from "./Entity";
 
 export interface PolylineEntityProps {
   dynamic?: boolean;
   positions: Cartesian3[];
   color?: Color;
+  isEditing?: boolean;
 }
 
 export const PolylineEntity: FC<PolylineEntityProps> = ({
   dynamic = false,
   positions: positionsProp,
   color,
+  isEditing,
 }) => {
   const positionsRef = useRef(positionsProp);
   positionsRef.current = positionsProp;
@@ -28,13 +31,13 @@ export const PolylineEntity: FC<PolylineEntityProps> = ({
     (): EntityProps => ({
       polyline: {
         positions,
-        width: 1.5,
-        material: color,
+        width: isEditing ? 1.5 : 1.5,
+        material: isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color,
         classificationType: ClassificationType.TERRAIN,
         clampToGround: true,
       },
     }),
-    [color, positions],
+    [color, positions, isEditing],
   );
 
   const { requestRender } = useContext();

package/src/engines/Cesium/Sketch/SurfaceAddingPoints.tsx

@@ -0,0 +1,60 @@
+import { Cartesian3 } from "@cesium/engine";
+import { memo, type FC } from "react";
+
+import { Position3d } from "../../../types";
+
+import { ControlPoint } from "./ControlPoint";
+import { type GeometryOptions } from "./createGeometry";
+
+export interface SurfaceAddingPointsProps {
+  geometryOptions: GeometryOptions;
+  isEditing?: boolean;
+  handleAddControlPoint?: (position: Position3d, index: number) => void;
+}
+
+const cartesianScratch1 = new Cartesian3();
+
+const SurfaceAddingPoints: FC<SurfaceAddingPointsProps> = memo(
+  ({ geometryOptions: { type, controlPoints }, isEditing, handleAddControlPoint }) => {
+    if (!["polyline", "polygon", "extrudedPolygon"].includes(type)) return null;
+
+    const addingPoints = [];
+
+    for (let i = 0; i < controlPoints.length - 1; i++) {
+      const nextPoint = controlPoints[i + 1];
+      const midPoint = Cartesian3.midpoint(controlPoints[i], nextPoint, cartesianScratch1);
+      addingPoints.push(midPoint.clone());
+    }
+
+    if (type === "polygon" || type === "extrudedPolygon") {
+      const midPoint = Cartesian3.midpoint(
+        controlPoints[controlPoints.length - 1],
+        controlPoints[0],
+        cartesianScratch1,
+      );
+      addingPoints.push(midPoint.clone());
+    }
+
+    return (
+      <>
+        {addingPoints.map((addingPoint, index) => (
+          <ControlPoint
+            key={index}
+            position={addingPoint}
+            isAddingPoint
+            index={index}
+            clampToGround
+            isEditing={isEditing}
+            handleControlPointMouseEvent={() =>
+              handleAddControlPoint?.([addingPoint.x, addingPoint.y, addingPoint.z], index)
+            }
+          />
+        ))}
+      </>
+    );
+  },
+);
+
+SurfaceAddingPoints.displayName = "SurfaceAddingPoints";
+
+export default SurfaceAddingPoints;