ty-element 1.1.1

package/dist/components/map/gis-maplibre/custom-layers/satellite-layer/clock.d.ts

@@ -0,0 +1,17 @@
+declare class Clock {
+    _date: Date;
+    _timer: number;
+    _speed: number;
+    _lastTimestamp: number;
+    constructor(date?: Date);
+    setSpeed(speed: number): void;
+    getDate(): Date;
+    setDate(date: Date): this;
+    start(): void;
+    stop(): void;
+    addSeconds(s: number): this;
+    addMinutes(m: number): this;
+    addHours(h: number): this;
+    addDays(d: number): this;
+}
+export default Clock;

package/dist/components/map/gis-maplibre/custom-layers/satellite-layer/index.d.ts

@@ -0,0 +1,135 @@
+import { CustomRenderMethodInput, Map, MapMouseEvent, MapProjectionEvent } from 'maplibre-gl';
+import { default as CustomLayer } from '..';
+import { default as SatelliteSource } from './source';
+import { PointData, SatelliteLayerOptions } from './type';
+import { LineMaterial, LineMaterialParameters } from 'three/examples/jsm/lines/LineMaterial';
+import { AmbientLight, DirectionalLight, Group, Mesh, MeshBasicMaterial, MeshBasicMaterialParameters, PlaneGeometry, Quaternion } from 'three';
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry';
+import { Line2 } from 'three/examples/jsm/lines/Line2';
+/**
+ * @description 卫星轨道2、3维度一体图层
+ * @author tiancheng.xia
+ * @since 2025-04-22
+ */
+declare class SatelliteLayer extends CustomLayer {
+    _source?: SatelliteSource;
+    _options: SatelliteLayerOptions;
+    _light?: AmbientLight;
+    _geometry: LineGeometry;
+    _line?: Line2;
+    _realTime: boolean;
+    _optionPaint: SatelliteLayerOptions["paint"];
+    _optionLayout: SatelliteLayerOptions["layout"];
+    _dirLight: DirectionalLight;
+    _originColors: Record<string, string>;
+    _groundLine: Line2 | null;
+    _groundGeometry: LineGeometry | null;
+    _groundMaterial: LineMaterial | null;
+    _groundLineHeight: number;
+    _dirLine2Ground: Line2 | null;
+    _dirLine2GroundGeometry: LineGeometry | null;
+    _dirLine2GroundMaterial: LineMaterial | null;
+    _groundPlane: Mesh | null;
+    _groundPlaneGeometry: PlaneGeometry | null;
+    _groundPlaneMaterial: MeshBasicMaterial | null;
+    _isMouseEnter: boolean;
+    constructor(options: SatelliteLayerOptions);
+    get _paint(): {
+        "line-color"?: import('react').CSSProperties["color"] | import('react').CSSProperties["color"][];
+        "line-width"?: number;
+        "line-dasharray"?: [number, number];
+        "line-opacity"?: number;
+        "object-light-color"?: import('react').CSSProperties["color"];
+        "object-light-intensity"?: number;
+    };
+    interpolateColors(color0: string, color1: string, t: number): number[];
+    get _vertexColors(): number[];
+    get _visible(): any;
+    get _trackPaint(): LineMaterial;
+    get _layout(): {
+        "object-heading"?: number;
+        "object-pitch"?: number;
+        "object-roll"?: number;
+        "object-size"?: import('../type').InterpolateExpression<number>;
+        "image-follow-bearing"?: boolean;
+    };
+    get _currentXYZ(): {
+        x: number;
+        y: number;
+        z: number;
+    };
+    get _nextXYZ(): {
+        x: number;
+        y: number;
+        z: number;
+    };
+    get _originOrentation(): Quaternion;
+    get _object(): Group<import('three').Object3DEventMap> | undefined;
+    get _objectSize(): number;
+    get _objectHeading(): number;
+    get _objectPitch(): number;
+    get _objectRoll(): number;
+    get _2dLineLayerId(): string;
+    get _2dModelLayerId(): string;
+    get _shouldRender3D(): boolean;
+    get _isBackFace(): boolean | 0 | undefined;
+    static disposeDRACOLoader(): void;
+    static createDRACOLoader(): void;
+    static getDRACOLoader(): import('three/examples/jsm/loaders/DRACOLoader').DRACOLoader | null;
+    getSource(): SatelliteSource | undefined;
+    getTrack2dPaint(): any;
+    _onObjectLoaded: () => void;
+    getPointData(point: {
+        x: number;
+        y: number;
+    }): PointData;
+    _onObjectMousemove: (e: MapMouseEvent) => void;
+    _onObjectClick: (e: MapMouseEvent) => void;
+    _onProjChanged: (e: MapProjectionEvent) => void;
+    get2dLayerIds(): {
+        line: string;
+        model: string;
+    };
+    _removeLayerAndSource(id: string): void;
+    get _groundCoords(): number[] | undefined;
+    get _dirLine2GroundCoords(): number[];
+    setGroundLine(options: LineMaterialParameters & {
+        height?: number;
+    }): this;
+    setDirLine2Ground(paint: LineMaterialParameters): this;
+    setGroundPlane(size: number, paint: MeshBasicMaterialParameters): this;
+    removeGroundPlane(): this;
+    removeDirLine2Ground(): this;
+    removeGroundLine(): this;
+    addDirLight(): void;
+    removeDirLight(): void;
+    setRealTime(realTime: boolean): this;
+    getRealTime(): boolean;
+    setPaint(paint: SatelliteLayerOptions["paint"]): this;
+    getPaint(): {
+        "line-color"?: import('react').CSSProperties["color"] | import('react').CSSProperties["color"][];
+        "line-width"?: number;
+        "line-dasharray"?: [number, number];
+        "line-opacity"?: number;
+        "object-light-color"?: import('react').CSSProperties["color"];
+        "object-light-intensity"?: number;
+    };
+    setLayout(layout: SatelliteLayerOptions["layout"]): this;
+    getLayout(): {
+        "object-heading"?: number;
+        "object-pitch"?: number;
+        "object-roll"?: number;
+        "object-size"?: import('../type').InterpolateExpression<number>;
+        "image-follow-bearing"?: boolean;
+    };
+    getClock(): import('./clock').default | undefined;
+    updateTrack(): this;
+    remove(): void;
+    onRemove(): void;
+    addAxesHelper(tree?: boolean): void;
+    _update2d(): void;
+    _onMapMove: () => void;
+    onAdd(map: Map, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
+    render(gl: WebGLRenderingContext | WebGL2RenderingContext, args: CustomRenderMethodInput): void;
+}
+export default SatelliteLayer;

package/dist/components/map/gis-maplibre/custom-layers/satellite-layer/source.d.ts

@@ -0,0 +1,65 @@
+import { SatelliteSourceOptions } from './type';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { Group } from 'three';
+import { Map } from 'maplibre-gl';
+import { default as Clock } from './clock';
+declare class SatelliteSource {
+    private _tle;
+    private _modelUrl?;
+    private _imageUrl?;
+    private _imageId?;
+    private _pointNumber;
+    private _dracoPath;
+    private _map;
+    private _userData;
+    private _clock;
+    private _times;
+    private _object?;
+    constructor(options: SatelliteSourceOptions & {
+        map: Map;
+    });
+    _loadModel(): void;
+    _loadImage: () => Promise<void>;
+    getImageId(): string | undefined;
+    get _lngLatAlt(): import('../../../../../utils/sat/type').Position[];
+    getLngLatAltCoords(): import('../../../../../utils/sat/type').Position[];
+    get _XYZ(): number[];
+    getUserData(): Record<string, any>;
+    setUserData(userData: Record<string, any>): void;
+    getXYZCoords(height?: number | null): number[];
+    getLineFeature(properties?: Record<string, any>): {
+        type: string;
+        properties: {
+            [x: string]: any;
+        };
+        geometry: {
+            type: string;
+            coordinates: any;
+        };
+    };
+    getPointFeature(properties?: Record<string, any>): {
+        type: string;
+        properties: {
+            bearing: number;
+        };
+        geometry: {
+            type: string;
+            coordinates: number[];
+        };
+    };
+    setTLE(tle: [string, string] | string[]): void;
+    getTLE(): string[] | [string, string];
+    getClock(): Clock;
+    setPointNumber(pointNumber: number): void;
+    getPointNumber(): number;
+    dispose(): void;
+    static getGLTFLoader(): GLTFLoader;
+    static getDRACOLoader(): DRACOLoader | null;
+    static createDRACOLoader(): void;
+    static disposeDRACOLoader(): void;
+    getObject(): Group<import('three').Object3DEventMap> | undefined;
+    isLoaded(): boolean;
+    _calcCoords(coordinates: number[][]): any;
+}
+export default SatelliteSource;

package/dist/components/map/gis-maplibre/custom-layers/satellite-layer/type.d.ts

@@ -0,0 +1,75 @@
+import { CSSProperties } from 'react';
+import { InterpolateExpression } from '../type';
+import { default as Clock } from './clock';
+import { Group } from 'three';
+import { Position } from '../../../../../utils/sat/type';
+import { default as SatelliteLayer } from '.';
+export type SatelliteSourceOptions = {
+    /**
+     * @description TLE两行轨道数据
+     */
+    tle: [string, string] | string[];
+    /**
+     * @description 卫星的三维模型,glb或者gltf其他的不支持
+     */
+    modelUrl?: string;
+    /**
+     * @description 卫星的二维图片
+     */
+    imageUrl?: string;
+    /**
+     * @description 如果是glb文件的话需要解压缩文件路径
+     */
+    dracoPath?: string;
+    /**
+     * @description 轨道插值点的数量
+     */
+    pointNumber?: number;
+    /**
+     * @description 用户自定义数据，用在和卫星模型交互的时候
+     */
+    userData?: Record<string, any>;
+    /**
+     * @description 用户定义的时刻类
+     */
+    clock?: Clock;
+    times?: number;
+};
+export type PointData = {
+    point: {
+        x: number;
+        y: number;
+    };
+    data: Group;
+    lnglatalt: Position;
+    userData: Record<string, string>;
+    origin: SatelliteLayer;
+};
+export type SatelliteLayerOptions = {
+    id: string;
+    source: SatelliteSourceOptions;
+    paint?: {
+        "line-color"?: CSSProperties["color"] | CSSProperties["color"][];
+        "line-width"?: number;
+        "line-dasharray"?: [number, number];
+        "line-opacity"?: number;
+        "object-light-color"?: CSSProperties["color"];
+        "object-light-intensity"?: number;
+    };
+    layout?: {
+        "object-heading"?: number;
+        "object-pitch"?: number;
+        "object-roll"?: number;
+        "object-size"?: InterpolateExpression<number>;
+        "image-follow-bearing"?: boolean;
+    };
+    realTime?: boolean;
+};
+export declare const SatelliteEvents: {
+    readonly OBJECT_LOAD: "object.load";
+    readonly OBJECT_MOUSEENTER: "object.mouseenter";
+    readonly OBJECT_MOUSELEAVE: "object.mouseleave";
+    readonly OBJECT_CLICK: "object.click";
+};
+export declare const DEFAULT_PAINT: SatelliteLayerOptions["paint"];
+export declare const DEFAULT_LAYOUT: SatelliteLayerOptions["layout"];

package/dist/components/map/gis-maplibre/custom-layers/star-layer/index.d.ts

@@ -0,0 +1,6 @@
+import { StarOptions, StarRenderPrepares } from './type';
+import { CustomLayer } from '../type';
+export declare const createSkyCanvas: (width: number, height: number, maxStars?: number, starColor?: string, starScale?: number) => HTMLCanvasElement;
+export declare const STAR_LAYER_ID = "sv-cps-star-layer";
+declare const getStarLayer: (starOptions?: StarOptions) => CustomLayer<StarRenderPrepares>;
+export default getStarLayer;

package/dist/components/map/gis-maplibre/custom-layers/star-layer/type.d.ts

@@ -0,0 +1,14 @@
+import { default as Program } from '../../../../../shaders/program';
+import { CSSProperties } from 'react';
+export type StarOptions = {
+    color?: CSSProperties["color"];
+    maxCount?: number;
+    scale?: number;
+};
+export type StarRenderPrepares = {
+    aLocations: {
+        [k: string]: number;
+    };
+    programInstance: Program;
+    positionBuffer: WebGLBuffer;
+};

package/dist/components/map/gis-maplibre/custom-layers/sync-camera.d.ts

@@ -0,0 +1,2 @@
+import { Matrix4Tuple, PerspectiveCamera } from 'three';
+export declare function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple): void;

package/dist/components/map/gis-maplibre/custom-layers/type.d.ts

@@ -0,0 +1,7 @@
+import { CustomLayerInterface, CustomRenderMethodInput } from 'maplibre-gl';
+export type CustomLayer<T> = CustomLayerInterface & {
+    renderPrepares?: T;
+    [k: string]: any;
+};
+export type InterpolateExpression<T> = ["interpolate", ["linear"], ["zoom"], ...T[]] | T;
+export type RenderLoop = (gl: WebGLRenderingContext | WebGL2RenderingContext, args: CustomRenderMethodInput) => boolean | void;

package/dist/components/map/gis-maplibre/index.d.ts

@@ -0,0 +1,8 @@
+import { GISMaplibreProps, GISMaplibreRef } from './type';
+/**
+ * @description GIS maplibre component
+ * @author tiancheng.xia
+ * @since 2025-01-16
+ */
+declare const GISMaplibre: import('react').ForwardRefExoticComponent<GISMaplibreProps & import('react').RefAttributes<GISMaplibreRef>>;
+export default GISMaplibre;

package/dist/components/map/gis-maplibre/type.d.ts

@@ -0,0 +1,236 @@
+import { Feature, FeatureCollection, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from '../../../types/geometry';
+import { default as maplibregl } from 'maplibre-gl';
+import { CSSProperties } from 'react';
+import { StarOptions } from './custom-layers/star-layer/type';
+import { AtmosphereOptions } from './custom-layers/atmosphere-layer/type';
+export type GISMaplibreProps = {
+    /**
+     * @description 地图初始化配置
+     */
+    mapOptions?: Omit<maplibregl.MapOptions, "container"> & {
+        starOptions?: StarOptions;
+        atmosphereOptions?: AtmosphereOptions;
+        projection?: "globe" | "mercator";
+        disabledBaseLayer?: boolean;
+    };
+    /**
+     * @description 地图加载完成回调
+     */
+    onLoad?: (map: maplibregl.Map) => void | Promise<any>;
+    /**
+     * @description 容器的类名
+     */
+    rootClassName?: string;
+    /**
+     * @description 容器的样式
+     */
+    style?: CSSProperties;
+    /**
+     * @description 容器是否禁用
+     */
+    disabled?: boolean;
+};
+export type Bounds = [number, number, number, number];
+export type AddPolygonLayerOptions = Partial<{
+    fill: {
+        color?: string;
+        opacity?: number;
+    };
+    line: {
+        color?: string;
+        width?: number;
+    };
+    beforeId: string;
+}>;
+export type AddCircleLayerOptions = Partial<{
+    color: string;
+    radius: number;
+    outlineColor: string;
+    outlineWidth: number;
+    beforeId: string;
+}>;
+export type MapCursor = "auto" | "pointer" | "grabbing" | "crosshair" | "se-resize" | "sw-resize" | "s-resize" | "w-resize" | "move" | "default" | "text" | "wait" | "help" | "progress" | "not-allowed" | "no-drop" | "alias" | "copy" | "zoom-in" | "zoom-out";
+export type GISMaplibreRef = {
+    /**
+     *
+     * @description 获取地图实例
+     */
+    getMap: () => maplibregl.Map | null;
+    /**
+     *
+     * @description 获取地图是否发光
+     */
+    getLighting: () => boolean;
+    /**
+     * @description 地图自适应
+     */
+    fitBounds: (bounds: maplibregl.LngLatBoundsLike, options?: maplibregl.FitBoundsOptions) => void;
+    /**
+     * @description 设置地图视图
+     */
+    setView: (options: maplibregl.CameraOptions & maplibregl.AnimationOptions) => void;
+    /**
+     * @description 移除地图数据源
+     */
+    removeSource: (sourceId: string) => void;
+    /**
+     * @description 移除图层
+     */
+    removeLayer: (layerId: string) => void;
+    /**
+     * @description 移除地图数据源和图层，前提是数据源与图层是一对一的关系
+     */
+    removeSourceAndLayer: (id: string) => void;
+    /**
+     * @description 添加栅格图层
+     */
+    addRasterLayer: (id: string, tileUrl: string, beforeId?: string) => void;
+    /**
+     * @description 添加图片图层
+     */
+    addImageLayer: (id: string, imageUrl: string, coordinates: maplibregl.ImageSourceSpecification["coordinates"], beforeId?: string) => void;
+    /**
+     * @description 添加 GeoJson面和线图层
+     */
+    addGeoJsonPolygonLayer: (id: string, geojson: FeatureCollection<Polygon | MultiPolygon> | FeatureCollection<LineString | MultiLineString>, options?: AddPolygonLayerOptions) => void;
+    /**
+     * @description 添加 GeoJson点图层
+     */
+    addGeoJsonCircleLayer: (id: string, geojson: FeatureCollection<Point | MultiPoint>, options?: AddCircleLayerOptions) => void;
+    /**
+     * @description 设置 GeoJson数据
+     */
+    setGeoJsonData: <T>(id: string, geojson: FeatureCollection<T>) => void;
+    /**
+     * @description 获取 GeoJson数据
+     */
+    getGeoJsonData: <T>(id: string) => FeatureCollection<T> | Feature<T> | null;
+    /**
+     * @description 变化尺寸
+     */
+    resize: () => void;
+    /**
+     * @description 移除地图
+     */
+    remove: () => void;
+    /**
+     * @description 添加图层
+     */
+    addLayer: (layer: maplibregl.LayerSpecification, beforeId?: string) => void;
+    /**
+     * @description 获取图层
+     */
+    getLayer: maplibregl.Map["getLayer"];
+    /**
+     * @description 添加数据源
+     */
+    addSource: (id: string, source: maplibregl.SourceSpecification) => void;
+    /**
+     * @description 获取数据源
+     */
+    getSource: maplibregl.Map["getSource"];
+    /**
+     *
+     * @description 移除地图底图
+     */
+    removeBaseLayer: () => void;
+    /**
+     *
+     * @description 设置底图
+     */
+    setBaseLayer: (url: string) => void;
+    /**
+     * @description 设置图层可见性
+     */
+    setLayerVisible: (id: string, visible: boolean) => void;
+    /**
+     * @description 设置地图上的鼠标状态
+     */
+    setCursor: (cursor: MapCursor) => void;
+    /**
+     * @description 获取当前地图上的比例尺距离,单位是m
+     */
+    getScale: (domSize: number) => number;
+    /**
+     *
+     * @description 获取当前地图是否加载完毕
+     */
+    loaded: () => boolean;
+    /**
+     * @description 将当前的canvas转为blob流
+     */
+    toBlob: HTMLCanvasElement["toBlob"];
+    /**
+     * @description 下载当前的canvas
+     */
+    download: (format: "png" | "jpg", fileName?: string) => void;
+    /**
+     * @description 设置布局属性
+     */
+    setLayoutProperty: (id: string, property: string, value: any) => void;
+    /**
+     * @description 设置样式属性
+     */
+    setPaintProperty: (id: string, property: string, value: any) => void;
+    /**
+     * @description 为基础地图添加label，可以切换中英文,为空时候移除label
+     */
+    setBaseLayerLabel: (language?: "en" | "cn") => void;
+    /**
+     *
+     * @description 开启大气效果
+     */
+    enableAtmosphere: () => void;
+    /**
+     *
+     * @description 关闭大气效果
+     */
+    disableAtmosphere: () => void;
+    /**
+     *
+     * @description 开启昼夜效果
+     */
+    enableLighting: () => void;
+    /**
+     *
+     * @description 关闭昼夜效果
+     */
+    disableLighting: () => void;
+    /**
+     *
+     * @description date 设置昼夜效果的时间
+     */
+    setLighting: (date: Date) => void;
+    /**
+     *
+     * @description 启用交互
+     */
+    enableInteractive: () => void;
+    /**
+     *
+     * @description 禁用交互
+     */
+    disableInteractive: () => void;
+    /**
+     *
+     * @description 设置大气层
+     */
+    setAtmosphere: (options: AtmosphereOptions) => void;
+};
+export declare const GISMAPLIBRE_INTERACTIVES: string[];
+export declare const GISMAPLIBRE_DISPLAY_NAME = "SV-CPS-GISMAPLIBRE";
+export declare const CrepusculeLayerId = "crepuscule-mercator";
+export declare const getTerminatorGeoJSON: (date?: Date, density?: number) => {
+    type: string;
+    geometry: {
+        type: string;
+        coordinates: [number, number][];
+    };
+};
+export declare const getNightPolygonGeoJSON: (date?: Date, density?: number) => {
+    type: string;
+    geometry: {
+        type: string;
+        coordinates: [number, number][][];
+    };
+};

package/dist/components/map/gis-marker/index.d.ts

@@ -0,0 +1,12 @@
+import { default as maplibregl } from 'maplibre-gl';
+import { GISMarkerRef } from './type';
+/**
+ * @description 地图标记组件
+ * @author tiancheng.xia
+ * @since 2025-02-07
+ */
+declare const GISMarker: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode;
+    rootClassName?: string;
+} & Omit<maplibregl.MarkerOptions, "element"> & import('react').RefAttributes<GISMarkerRef>>;
+export default GISMarker;

package/dist/components/map/gis-marker/type.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { default as maplibregl } from 'maplibre-gl';
+export type GISMarkerProps = {
+    children?: ReactNode;
+    rootClassName?: string;
+} & Omit<maplibregl.MarkerOptions, "element">;
+export type GISMarkerRef = {
+    addClassName: maplibregl.Marker["addClassName"];
+    addTo: maplibregl.Marker["addTo"];
+    getElement: maplibregl.Marker["getElement"];
+    getLngLat: maplibregl.Marker["getLngLat"];
+    getOffset: maplibregl.Marker["getOffset"];
+    getPitchAlignment: maplibregl.Marker["getPitchAlignment"];
+    getPopup: maplibregl.Marker["getPopup"];
+    getRotation: maplibregl.Marker["getRotation"];
+    getRotationAlignment: maplibregl.Marker["getRotationAlignment"];
+    isDraggable: maplibregl.Marker["isDraggable"];
+    listens: maplibregl.Marker["listens"];
+    off: maplibregl.Marker["off"];
+    on: maplibregl.Marker["on"];
+    once: maplibregl.Marker["once"];
+    remove: maplibregl.Marker["remove"];
+    removeClassName: maplibregl.Marker["removeClassName"];
+    setDraggable: maplibregl.Marker["setDraggable"];
+    setEventedParent: maplibregl.Marker["setEventedParent"];
+    setLngLat: maplibregl.Marker["setLngLat"];
+    setOffset: maplibregl.Marker["setOffset"];
+    setOpacity: maplibregl.Marker["setOpacity"];
+    setPitchAlignment: maplibregl.Marker["setPitchAlignment"];
+    setPopup: maplibregl.Marker["setPopup"];
+    setRotation: maplibregl.Marker["setRotation"];
+    setRotationAlignment: maplibregl.Marker["setRotationAlignment"];
+    setSubpixelPositioning: maplibregl.Marker["setSubpixelPositioning"];
+    toggleClassName: maplibregl.Marker["toggleClassName"];
+    togglePopup: maplibregl.Marker["togglePopup"];
+};

package/dist/components/map/multi-map/index.d.ts

@@ -0,0 +1,8 @@
+import { MultiMapProps } from './type';
+/**
+ * @description 多地图组件
+ * @author tiancheng.xia
+ * @since 2025-02-08
+ */
+declare const MultiMap: (props: MultiMapProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiMap;

package/dist/components/map/multi-map/syncMaps.d.ts

@@ -0,0 +1,3 @@
+import { default as maplibregl } from 'maplibre-gl';
+declare function syncMaps(...maps: maplibregl.Map[]): () => void;
+export default syncMaps;

package/dist/components/map/multi-map/type.d.ts

@@ -0,0 +1,2 @@
+import { AnimateContainerProps } from '../../animate-container/type';
+export type MultiMapProps = AnimateContainerProps;