@mint-ui/map 0.4.6-beta → 0.5.1-beta

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -1,5 +1,6 @@
 import { MapType, MapVendorType } from '../types/CommonTypes';
 import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, PolylineOptions } from '../types/MapDrawables';
+import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from '../types/MapEventTypes';
 import { Bounds, Offset, Position } from '../types/MapTypes';
 import { MintMapProps } from '../types/MintMapProps';
 export declare abstract class MintMapController {
@@ -26,6 +27,11 @@ export declare abstract class MintMapController {
     abstract updatePolyline(polyline: Polyline, options: PolylineOptions): void;
     abstract createPolygon(polygon: Polygon): void;
     abstract updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    protected abstract mapEvent: MapEvent;
+    protected abstract mapUIEvent: MapUIEvent;
+    abstract addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    abstract removeEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    abstract removeAllEventListener(eventName?: MapEventName): void;
     mapProps: MintMapProps;
     mapApiLoaded: boolean;
     mapInitialized: boolean;

package/dist/components/mint-map/core/advanced/index.d.ts

@@ -1,2 +1,3 @@
+export * from './shapes';
 export * from './MapBuildingProjection';
 export * from './MapLoadingComponents';

package/dist/components/mint-map/core/advanced/shapes/CircleMarker.d.ts

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from "react";
+import { Position } from "../../../types";
+export interface CircleMarkerProps {
+    center: Position;
+    radius: number;
+    radiusUnit?: 'PIXEL' | 'METER';
+    background?: string;
+    visible?: boolean;
+    zIndex?: number;
+    svgProperties?: React.SVGProps<SVGSVGElement>;
+    shapeProperties?: React.SVGProps<SVGCircleElement>;
+}
+/**
+ * CircleMarker
+ *
+ * @param {CircleMarkerProps} CircleMarkerProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function CircleMarker({ children, center, radius, radiusUnit, background, svgProperties, shapeProperties, visible, zIndex, }: PropsWithChildren<CircleMarkerProps>): JSX.Element;

package/dist/components/mint-map/core/advanced/shapes/CircleMarker.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var MapMarkerWrapper = require('../../wrapper/MapMarkerWrapper.js');
+require('../../../types/MapDrawables.js');
+var MapTypes = require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+var SVGCircle = require('./base/SVGCircle.js');
+require('../../util/animation.js');
+var calculate = require('../../util/calculate.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * CircleMarker
+ *
+ * @param {CircleMarkerProps} CircleMarkerProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
+function CircleMarker(_a) {
+  var children = _a.children,
+      center = _a.center,
+      radius = _a.radius,
+      _b = _a.radiusUnit,
+      radiusUnit = _b === void 0 ? 'PIXEL' : _b,
+      _c = _a.background,
+      background = _c === void 0 ? 'lightgreen' : _c,
+      _d = _a.svgProperties,
+      svgProperties = _d === void 0 ? {} : _d,
+      _e = _a.shapeProperties,
+      shapeProperties = _e === void 0 ? {} : _e,
+      _f = _a.visible,
+      visible = _f === void 0 ? true : _f,
+      zIndex = _a.zIndex; //controller
+
+  var controller = MintMapProvider.useMintMapController(); //zoom start event
+
+  var onZoomStart = React.useCallback(function () {
+    setMapVisible(false);
+  }, []); //idle event
+
+  var onIdle = React.useCallback(function () {
+    var newZoomLevel = controller.getZoomLevel();
+
+    if (zoomLevel.current !== newZoomLevel) {
+      zoomLevel.current = newZoomLevel;
+      renderCircleBase();
+      setTimeout(function () {
+        setMapVisible(true);
+      });
+    }
+  }, []);
+  var zoomLevel = React.useRef(controller.getZoomLevel());
+  React.useEffect(function () {
+    controller.addEventListener("ZOOMSTART", onZoomStart);
+    controller.addEventListener("IDLE", onIdle);
+    return function () {
+      controller.removeEventListener("ZOOMSTART", onZoomStart);
+      controller.removeEventListener("IDLE", onIdle);
+    };
+  }, []); //offsets
+
+  var _g = React.useState(),
+      computedRadius = _g[0],
+      setComputedRadius = _g[1];
+
+  var _h = React.useState(new MapTypes.Offset(0, 0)),
+      anchor = _h[0],
+      setAnchor = _h[1]; //circle props ref
+
+
+  var circlePropsRef = React.useRef({
+    center: center,
+    radius: radius,
+    radiusUnit: radiusUnit
+  }); //circle 생성 effect
+
+  React.useEffect(function () {
+    circlePropsRef.current = {
+      center: center,
+      radius: radius,
+      radiusUnit: radiusUnit
+    };
+    renderCircleBase();
+  }, [center, radius, radiusUnit]); //render
+
+  var _j = React.useState(true),
+      mapVisible = _j[0],
+      setMapVisible = _j[1];
+
+  var renderCircleBase = React.useCallback(function () {
+    var _a = circlePropsRef.current,
+        center = _a.center,
+        radius = _a.radius,
+        radiusUnit = _a.radiusUnit;
+
+    if (radiusUnit === 'METER') {
+      var latMargin = calculate.GeoCalulator.convertMeterToLatitudeValue(radius);
+      var targetPos = new MapTypes.Position(center.lat + latMargin, center.lng);
+      var tempComputedRadius = calcRadius(center, targetPos);
+      setComputedRadius(tempComputedRadius);
+      setAnchor(new MapTypes.Offset(tempComputedRadius, tempComputedRadius)); // console.log(`${radius} meter => `, tempComputedRadius);
+    } else {
+      setComputedRadius(radius);
+      setAnchor(new MapTypes.Offset(radius, radius)); // console.log(`${radius} pixel => `, radius);
+    }
+  }, []);
+  var calcRadius = React.useCallback(function (center, targetPos) {
+    var c = controller.positionToOffset(center);
+    var t = controller.positionToOffset(targetPos);
+    return Math.round(Math.sqrt(Math.pow(Math.abs(c.x - t.x), 2) + Math.pow(Math.abs(c.y - t.y), 2)));
+  }, []);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, computedRadius && React__default["default"].createElement(MapMarkerWrapper.MapMarkerWrapper, {
+    position: center,
+    anchor: anchor,
+    visible: visible,
+    disablePointerEvent: true,
+    zIndex: zIndex
+  }, mapVisible && React__default["default"].createElement(SVGCircle.SVGCircle, {
+    radius: computedRadius,
+    background: background,
+    shapeProperties: tslib.__assign({
+      pointerEvents: 'none'
+    }, shapeProperties),
+    svgProperties: svgProperties
+  }, children)));
+}
+
+exports.CircleMarker = CircleMarker;

package/dist/components/mint-map/core/advanced/shapes/PolygonMarker.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from "react";
+import { Position } from "../../../types";
+export interface PolygonMarkerProps {
+    position: Position[];
+    innerPositions?: Position[][];
+    background?: string;
+    visible?: boolean;
+    zIndex?: number;
+    simplifyPath?: boolean;
+    simplifyTolerance?: number;
+    lastReapeated?: boolean;
+    mode?: 'POLYGON' | 'POLYLINE';
+    svgProperties?: React.SVGProps<SVGSVGElement>;
+    shapeProperties?: React.SVGProps<SVGPathElement>;
+}
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function PolygonMarker({ children, position, background, innerPositions, simplifyPath, simplifyTolerance, lastReapeated, svgProperties, shapeProperties, visible, zIndex, mode, }: PropsWithChildren<PolygonMarkerProps>): JSX.Element;

package/dist/components/mint-map/core/advanced/shapes/PolygonMarker.js

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var MapMarkerWrapper = require('../../wrapper/MapMarkerWrapper.js');
+var SVGPolygon = require('./base/SVGPolygon.js');
+require('../../../types/MapDrawables.js');
+var MapTypes = require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+require('../../util/animation.js');
+var calculate = require('../../util/calculate.js');
+require('tslib');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
+function PolygonMarker(_a) {
+  var children = _a.children,
+      position = _a.position,
+      _b = _a.background,
+      background = _b === void 0 ? 'lightgreen' : _b,
+      innerPositions = _a.innerPositions,
+      _c = _a.simplifyPath,
+      simplifyPath = _c === void 0 ? true : _c,
+      simplifyTolerance = _a.simplifyTolerance,
+      _d = _a.lastReapeated,
+      lastReapeated = _d === void 0 ? false : _d,
+      _e = _a.svgProperties,
+      svgProperties = _e === void 0 ? {} : _e,
+      _f = _a.shapeProperties,
+      shapeProperties = _f === void 0 ? {} : _f,
+      _g = _a.visible,
+      visible = _g === void 0 ? true : _g,
+      zIndex = _a.zIndex,
+      _h = _a.mode,
+      mode = _h === void 0 ? 'POLYGON' : _h; //controller
+
+  var controller = MintMapProvider.useMintMapController(); //zoom start event
+
+  var onZoomStart = React.useCallback(function () {
+    setMapVisible(false);
+  }, []); //idle event
+
+  var onIdle = React.useCallback(function () {
+    var newZoomLevel = controller.getZoomLevel();
+
+    if (zoomLevel.current !== newZoomLevel) {
+      zoomLevel.current = newZoomLevel;
+      renderPolygonBase();
+      setTimeout(function () {
+        setMapVisible(true);
+      });
+    }
+  }, []);
+  var zoomLevel = React.useRef(controller.getZoomLevel());
+  React.useEffect(function () {
+    controller.addEventListener("ZOOMSTART", onZoomStart);
+    controller.addEventListener("IDLE", onIdle);
+    return function () {
+      controller.removeEventListener("ZOOMSTART", onZoomStart);
+      controller.removeEventListener("IDLE", onIdle);
+    };
+  }, []); //center
+
+  var _j = React.useState(),
+      polygonStart = _j[0],
+      setPolygonStart = _j[1]; //offsets
+
+
+  var _k = React.useState([]),
+      offsets = _k[0],
+      setOffsets = _k[1]; //inner offsets
+
+
+  var _l = React.useState([]),
+      innerOffsets = _l[0],
+      setInnerOffsets = _l[1]; //offset cache
+
+
+  var offsetCache = React.useRef(new Map()); //polygon props ref
+
+  var polygonPropsRef = React.useRef({
+    position: position,
+    innerPositions: innerPositions,
+    simplifyPath: simplifyPath,
+    simplifyTolerance: simplifyTolerance,
+    lastReapeated: lastReapeated
+  }); //polygon 생성 effect
+
+  React.useEffect(function () {
+    // console.log('polygon changed');
+    offsetCache.current.clear();
+    polygonPropsRef.current = {
+      position: position,
+      innerPositions: innerPositions,
+      simplifyPath: simplifyPath,
+      simplifyTolerance: simplifyTolerance,
+      lastReapeated: lastReapeated
+    };
+    renderPolygonBase();
+  }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
+
+  var _m = React.useState(true),
+      mapVisible = _m[0],
+      setMapVisible = _m[1];
+
+  var renderPolygonBase = React.useCallback(function () {
+    // console.log('renderPolygonBase');
+    var _a = polygonPropsRef.current,
+        position = _a.position,
+        innerPositions = _a.innerPositions,
+        simplifyPath = _a.simplifyPath,
+        simplifyTolerance = _a.simplifyTolerance,
+        lastReapeated = _a.lastReapeated;
+    var prevCache = offsetCache.current.get(zoomLevel.current);
+
+    if (prevCache) {
+      var offsets_1 = [];
+      offsets_1.push.apply(offsets_1, prevCache.offsets);
+      setOffsets(offsets_1);
+      var innerOffsets_1 = [];
+      innerOffsets_1.push.apply(innerOffsets_1, prevCache.innerOffsets);
+      setInnerOffsets(innerOffsets_1);
+      setPolygonStart(prevCache.start);
+    } else {
+      // path
+      var simplified = simplifyPath ? calculate.PolygonCalculator.simplifyPoints(position, simplifyTolerance, lastReapeated) : position;
+      var offsets_2 = simplified.map(function (pos) {
+        var off = controller.positionToOffset(pos);
+        return new MapTypes.Offset(Math.floor(off.x), Math.floor(off.y));
+      });
+      setOffsets(offsets_2); //inner path
+
+      var innerPath = [];
+
+      if (innerPositions) {
+        for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
+          var innerPosition = innerPositions_1[_i];
+          var simplified_1 = simplifyPath ? calculate.PolygonCalculator.simplifyPoints(innerPosition, simplifyTolerance, lastReapeated) : innerPosition;
+          var offsets_3 = simplified_1.map(function (pos) {
+            var off = controller.positionToOffset(pos);
+            return new MapTypes.Offset(Math.floor(off.x), Math.floor(off.y));
+          });
+          innerPath.push(offsets_3);
+        }
+
+        setInnerOffsets(innerPath);
+      } //start point
+
+
+      var regionInfo = calculate.PolygonCalculator.getRegionInfo(simplified);
+      var startPosition = regionInfo.maxLat && regionInfo.minLng ? new MapTypes.Position(regionInfo.maxLat, regionInfo.minLng) : undefined;
+      setPolygonStart(startPosition); //cache set
+
+      offsetCache.current.set(zoomLevel.current, {
+        start: startPosition,
+        offsets: offsets_2,
+        innerOffsets: innerPath
+      });
+    }
+  }, []);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper.MapMarkerWrapper, {
+    position: polygonStart,
+    visible: visible,
+    disablePointerEvent: true,
+    zIndex: zIndex
+  }, mapVisible && React__default["default"].createElement(SVGPolygon.SVGPolygon, {
+    path: offsets,
+    innerPath: innerOffsets,
+    mode: mode,
+    background: background,
+    shapeProperties: shapeProperties,
+    svgProperties: svgProperties
+  }, children)));
+}
+
+exports.PolygonMarker = PolygonMarker;

package/dist/components/mint-map/core/advanced/shapes/base/SVGCircle.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+export interface SVGCircleProps {
+    radius?: number;
+    background?: string;
+    svgProperties?: React.SVGProps<SVGSVGElement>;
+    shapeProperties?: React.SVGProps<SVGCircleElement>;
+}
+export declare function SVGCircle({ radius, background, children, svgProperties, shapeProperties, }: PropsWithChildren<SVGCircleProps>): JSX.Element;

package/dist/components/mint-map/core/advanced/shapes/base/SVGCircle.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function SVGCircle(_a) {
+  var _b = _a.radius,
+      radius = _b === void 0 ? 100 : _b,
+      _c = _a.background,
+      background = _c === void 0 ? 'lightgreen' : _c,
+      children = _a.children,
+      _d = _a.svgProperties,
+      svgProperties = _d === void 0 ? {} : _d,
+      _e = _a.shapeProperties,
+      shapeProperties = _e === void 0 ? {} : _e;
+
+  var _f = React.useState(radius * 2),
+      boxSize = _f[0],
+      setBoxSize = _f[1];
+
+  React.useEffect(function () {
+    // console.log('SVGCircle radius', radius);
+    setBoxSize(radius * 2);
+  }, [radius]);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+    pointerEvents: "none",
+    width: boxSize,
+    height: boxSize,
+    viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize)
+  }, svgProperties), React__default["default"].createElement("circle", tslib.__assign({
+    pointerEvents: "visiblepainted",
+    cx: radius,
+    cy: radius,
+    r: radius,
+    fill: background
+  }, shapeProperties))), React__default["default"].createElement("div", {
+    style: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      left: '0px',
+      top: '0px',
+      width: "".concat(boxSize, "px"),
+      height: "".concat(boxSize, "px")
+    }
+  }, children));
+}
+
+exports.SVGCircle = SVGCircle;

package/dist/components/mint-map/core/advanced/shapes/base/SVGPolygon.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { PropsWithChildren } from "react";
+import { Offset } from "../../../../types";
+export interface SVGPolygonProps {
+    path: Offset[];
+    innerPath?: Offset[][];
+    background?: string;
+    mode?: 'POLYGON' | 'POLYLINE';
+    svgProperties?: React.SVGProps<SVGSVGElement>;
+    shapeProperties?: React.SVGProps<SVGPathElement>;
+}
+export declare function SVGPolygon({ path, innerPath, background, svgProperties, shapeProperties, mode, children, }: PropsWithChildren<SVGPolygonProps>): JSX.Element;

package/dist/components/mint-map/core/advanced/shapes/base/SVGPolygon.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function SVGPolygon(_a) {
+  var path = _a.path,
+      _b = _a.innerPath,
+      innerPath = _b === void 0 ? [] : _b,
+      _c = _a.background,
+      background = _c === void 0 ? 'lightblue' : _c,
+      _d = _a.svgProperties,
+      svgProperties = _d === void 0 ? {} : _d,
+      _e = _a.shapeProperties,
+      shapeProperties = _e === void 0 ? {} : _e,
+      _f = _a.mode,
+      mode = _f === void 0 ? 'POLYGON' : _f,
+      children = _a.children;
+  var getPolygonInfo = React.useCallback(function (path) {
+    var maxX, minX, maxY, minY;
+
+    for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {
+      var offset = path_1[_i];
+
+      if (maxX === undefined || offset.x > maxX) {
+        maxX = offset.x;
+      }
+
+      if (minX === undefined || offset.x < minX) {
+        minX = offset.x;
+      }
+
+      if (maxY === undefined || offset.y > maxY) {
+        maxY = offset.y;
+      }
+
+      if (minY === undefined || offset.y < minY) {
+        minY = offset.y;
+      }
+    }
+
+    if (!maxX || !minX || !maxY || !minY) {
+      return {
+        containerLeft: 0,
+        containerTop: 0,
+        containerWidth: 0,
+        containerHeight: 0
+      };
+    }
+
+    var width = maxX - minX;
+    var height = maxY - minY;
+    return {
+      containerLeft: Math.floor(minX),
+      containerTop: Math.floor(minY),
+      containerWidth: Math.floor(width),
+      containerHeight: Math.floor(height)
+    };
+  }, []);
+  var getD = React.useCallback(function (_a) {
+    var path = _a.path,
+        containerLeft = _a.containerLeft,
+        containerTop = _a.containerTop,
+        mode = _a.mode;
+    var left = containerLeft;
+    var top = containerTop;
+    var isPolygon = mode === 'POLYGON';
+    var out = ''; //path
+
+    out += getLine(path, left, top, isPolygon); //inner path
+
+    for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
+      var inner = innerPath_1[_i];
+      out += ' ' + getLine(inner, left, top, isPolygon);
+    }
+
+    return out;
+  }, []);
+  var getLine = React.useCallback(function (path, offsetLeft, offsetTop, closePath) {
+    return path.map(function (offset, idx) {
+      if (idx === 0) {
+        return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+      } else if (idx === 1) {
+        return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+      } else {
+        if (offset.equals(path[idx - 1])) {
+          return '';
+        } else {
+          return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        }
+      }
+    }).join(' ') + " ".concat(closePath ? 'Z' : '');
+  }, []);
+
+  var _g = React.useState(0),
+      width = _g[0],
+      setWidth = _g[1];
+
+  var _h = React.useState(0),
+      height = _h[0],
+      setHeight = _h[1];
+
+  var _j = React.useState('M0 0'),
+      d = _j[0],
+      setD = _j[1];
+
+  React.useEffect(function () {
+    var info = getPolygonInfo(path);
+    setWidth(info.containerWidth);
+    setHeight(info.containerHeight);
+    setD(getD(tslib.__assign(tslib.__assign({}, info), {
+      path: path,
+      innerPath: innerPath,
+      mode: mode
+    })));
+  }, [path, innerPath]);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+    pointerEvents: "none",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height)
+  }, svgProperties), React__default["default"].createElement("path", tslib.__assign({
+    fillRule: "evenodd",
+    pointerEvents: "visiblepainted",
+    x: "0",
+    y: "0",
+    width: width,
+    height: height,
+    fill: mode === 'POLYLINE' ? 'none' : background,
+    stroke: mode === 'POLYLINE' ? 'black' : 'green',
+    strokeLinejoin: "round",
+    strokeLinecap: "butt",
+    d: d
+  }, shapeProperties))), React__default["default"].createElement("div", {
+    style: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      left: '0px',
+      top: '0px',
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    }
+  }, children));
+}
+
+exports.SVGPolygon = SVGPolygon;

package/dist/components/mint-map/core/advanced/shapes/base/SVGRect.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { PropsWithChildren } from "react";
+export interface SVGRectProps {
+    width?: number;
+    height?: number;
+    background?: string;
+    svgProperties?: React.SVGProps<SVGSVGElement>;
+    shapeProperties?: React.SVGProps<SVGRectElement>;
+}
+export declare function SVGRect({ width, height, background, svgProperties, shapeProperties, children }: PropsWithChildren<SVGRectProps>): JSX.Element;