@dartcom/ui-kit 3.5.3 → 3.6.0

package/dist/index.cjs

@@ -43373,6 +43373,8 @@ const {
   mergeConfig
 } = axios;
 
+const _backendUrl = 'https://dalganmap.ru/api';
+
 class ApiService {
     client;
     constructor(baseURL) {
@@ -43408,7 +43410,7 @@ class ApiService {
         return response.data;
     }
 }
-const apiService = new ApiService('https://dalganmap.ru/api');
+const apiService = new ApiService(_backendUrl);
 
 class GlobalConfig {
     static _instance = null;
@@ -43473,6 +43475,411 @@ const _testApiKeys = {
     invalid: 'abcdefghijklmnopqrstuvwxyz0123456789',
 };
 
+/**
+A function that returns a universally unique identifier (uuid).  
+example: 1b83fd69-abe7-468c-bea1-306a8aa1c81d
+@returns `string` : 32 character uuid (see example)
+*/
+
+var uuid_1;
+var hasRequiredUuid;
+
+function requireUuid () {
+	if (hasRequiredUuid) return uuid_1;
+	hasRequiredUuid = 1;
+	function uuid() {
+		const hashTable = [
+			"a",
+			"b",
+			"c",
+			"d",
+			"e",
+			"f",
+			"0",
+			"1",
+			"2",
+			"3",
+			"4",
+			"5",
+			"6",
+			"7",
+			"8",
+			"9",
+		];
+		let uuid = [];
+		for (let i = 0; i < 36; i++) {
+			if (i === 8 || i === 13 || i === 18 || i === 23) {
+				uuid[i] = "-";
+			} else {
+				uuid[i] = hashTable[Math.ceil(Math.random() * hashTable.length - 1)];
+			}
+		}
+		return uuid.join("");
+	}
+
+	uuid_1 = uuid;
+	return uuid_1;
+}
+
+var uuidExports = requireUuid();
+var uuid = /*@__PURE__*/getDefaultExportFromCjs(uuidExports);
+
+exports.API_METHODS = void 0;
+(function (API_METHODS) {
+    API_METHODS["GET"] = "GET";
+    API_METHODS["DELETE"] = "DELETE";
+    API_METHODS["PUT"] = "PUT";
+    API_METHODS["POST"] = "POST";
+})(exports.API_METHODS || (exports.API_METHODS = {}));
+
+exports.PanelsNames = void 0;
+(function (PanelsNames) {
+    PanelsNames["TOP_RIGHT"] = "top-right";
+    PanelsNames["BOTTOM_RIGHT"] = "bottom-right";
+    PanelsNames["BOTTOM_LEFT"] = "bottom-left";
+    PanelsNames["TOP_LEFT"] = "top-left";
+})(exports.PanelsNames || (exports.PanelsNames = {}));
+
+exports.TangramSourceNames = void 0;
+(function (TangramSourceNames) {
+    TangramSourceNames["TILE"] = "tile";
+    TangramSourceNames["NATURE_TILE"] = "nature_tile";
+    TangramSourceNames["MSK"] = "msk";
+})(exports.TangramSourceNames || (exports.TangramSourceNames = {}));
+
+const tile_size = 256;
+const sourceUrl = {
+    [exports.TangramSourceNames.TILE]: `${_backendUrl}/tiles/get_tile/{z}/{x}/{y}.mvt`,
+    [exports.TangramSourceNames.NATURE_TILE]: `${_backendUrl}/tiles/get_nature_tile/{z}/{x}/{y}.mvt`,
+    [exports.TangramSourceNames.MSK]: 'http://89.108.118.23:3070/tiles/get_tile/{z}/{x}/{y}.mvt',
+};
+const getRoadPolyLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: '"RoadPoly"',
+    };
+    const roadLayer = {
+        id: uuid(),
+        data,
+        filter: `function() {
+      const { type } = feature;
+
+      const isFilter = type === 'Road';
+
+      return isFilter;
+    }`,
+        draw: {
+            polygons: {
+                color: '#B3BDCF',
+            },
+        },
+    };
+    const tramLayer = {
+        id: uuid(),
+        data,
+        filter: `function() {
+      const { type } = feature;
+
+      const isFilter = type === 'Tram';
+
+      return isFilter;
+    }`,
+        draw: {
+            polygons: {
+                color: '#ADA8A8',
+            },
+        },
+    };
+    const curbLayer = {
+        id: uuid(),
+        data,
+        filter: `function() {
+      const { type } = feature;
+
+      const isFilter = type === 'Curb';
+
+      return isFilter;
+    }`,
+        draw: {
+            polygons: {
+                color: '#D2D9E6',
+            },
+        },
+    };
+    const bridgeLayer = {
+        id: uuid(),
+        data,
+        filter: `function() {
+      const { type } = feature;
+
+      const isFilter = type === 'Bridge';
+
+      return isFilter;
+    }`,
+        draw: {
+            polygons: {
+                color: '#E1DFDD',
+            },
+        },
+    };
+    layers.push(roadLayer, tramLayer, curbLayer, bridgeLayer);
+    return layers;
+};
+const getLaneMarkingPolyLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: '"LaneMarkingPoly"',
+    };
+    const layer__1_26 = {
+        id: uuid(),
+        data,
+        filter: `function() {
+      const { poly_number } = feature;
+
+      const isFilter = poly_number === '1.26';
+
+      return isFilter;
+    }`,
+        draw: {
+            styles: {
+                'diagonal-grid': {
+                    color: 'yellow',
+                },
+            },
+        },
+    };
+    layers.push(layer__1_26);
+    return layers;
+};
+const getLaneMarkingLineLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: '"LaneMarkingLine"',
+    };
+    const layer = {
+        id: uuid(),
+        data,
+        sublayers: {
+            '1.1': {
+                filter: `function () {
+          const { lane_number } = feature;
+
+          const isFilter = lane_number === '1.1';
+
+          return isFilter;
+        }`,
+                draw: {
+                    lines: {
+                        color: 'white',
+                        width: 1,
+                    },
+                },
+            },
+            '1.6': {
+                filter: `function () {
+          const { lane_number } = feature;
+
+          const isFilter = lane_number === '1.6';
+
+          return isFilter;
+        }`,
+                draw: {
+                    lines: {
+                        color: 'white',
+                        width: 1,
+                        dash: [5, 5],
+                    },
+                },
+            },
+            '1.7': {
+                filter: `function () {
+          const { lane_number } = feature;
+
+          const isFilter = lane_number === '1.7';
+
+          return isFilter;
+        }`,
+                draw: {
+                    lines: {
+                        color: 'white',
+                        width: 0.5,
+                        dash: [4, 10],
+                    },
+                },
+            },
+            '1.7-blue': {
+                filter: `function () {
+          const { lane_number } = feature;
+
+          const isFilter = lane_number === '1.7blue';
+
+          return isFilter;
+        }`,
+                draw: {
+                    lines: {
+                        color: 'blue',
+                        width: 0.5,
+                        dash: [4, 10],
+                    },
+                },
+            },
+            '1.14.3': {
+                filter: `function () {
+          const { lane_number } = feature;
+
+          const isFilter = lane_number === '1.14.3';
+
+          return isFilter;
+        }`,
+                draw: {
+                    lines: {
+                        color: 'white',
+                        width: 0.5,
+                        dash: [4, 10],
+                    },
+                },
+            },
+            '1.12': {
+                filter: `function () {
+          const { lane_number } = feature;
+
+          const isFilter = lane_number === '1.12';
+
+          return isFilter;
+        }`,
+                draw: {
+                    lines: {
+                        color: 'white',
+                        width: 2,
+                    },
+                },
+            },
+        },
+    };
+    layers.push(layer);
+    return layers;
+};
+const getLaneMarkingPointLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: '"LaneMarkingPoint"',
+    };
+    const layer = {
+        id: uuid(),
+        data,
+        draw: {
+            points: {
+                texture: 'lane-marking',
+                sprite: 'base',
+                angle: `function() {
+          const { angle } = feature;
+          
+          return angle;
+        }
+        `,
+                placement: 'midpoint',
+            },
+        },
+    };
+    layers.push(layer);
+    return layers;
+};
+const getParkingLineLayers = (source) => {
+    const layers = [];
+    const data = {
+        source,
+        layer: '"ParkingLine"',
+    };
+    const layer = {
+        id: uuid(),
+        data,
+        draw: {
+            lines: {
+                color: 'white',
+                width: 1,
+            },
+        },
+    };
+    layers.push(layer);
+    return layers;
+};
+
+const getLayerName = ({ id, data: { source, layer }, }) => {
+    const layerName = `${id}-${source}-${layer}`;
+    return layerName;
+};
+const setLayerOrder = ({ layer, order, }) => {
+    const cloneLayer = structuredClone(layer);
+    const { draw, sublayers } = cloneLayer;
+    if (draw) {
+        const { points, lines, polygons, text, styles } = draw;
+        if (points) {
+            draw.points = {
+                ...structuredClone(points),
+                order,
+            };
+        }
+        if (lines) {
+            draw.lines = {
+                ...structuredClone(lines),
+                order,
+            };
+        }
+        if (polygons) {
+            draw.polygons = {
+                ...structuredClone(polygons),
+                order,
+            };
+        }
+        if (text) {
+            draw.text = {
+                ...structuredClone(text),
+                order,
+            };
+        }
+        if (styles) {
+            draw.styles = Object.entries(styles).reduce((accum, [name, style]) => ({
+                ...accum,
+                [name]: {
+                    ...structuredClone(style),
+                    order,
+                },
+            }), {});
+        }
+        cloneLayer.draw = structuredClone(draw);
+    }
+    if (sublayers) {
+        Object.entries(sublayers).forEach(([name, sublayer]) => {
+            if (sublayer) {
+                const { draw } = sublayer;
+                if (draw) {
+                    const { points, lines, polygons } = draw;
+                    if (points) {
+                        points.order = order;
+                        draw.points = points;
+                    }
+                    if (lines) {
+                        lines.order = order;
+                        draw.lines = lines;
+                    }
+                    if (polygons) {
+                        polygons.order = order;
+                        draw.polygons = polygons;
+                    }
+                    sublayer.draw = structuredClone(draw);
+                }
+                sublayers[name] = structuredClone(sublayer);
+            }
+        });
+        cloneLayer.sublayers = structuredClone(sublayers);
+    }
+    return cloneLayer;
+};
+
 const useGetLeafletLayer = () => {
     const { instance: { isValidApiKey }, } = GlobalConfig;
     const [layer, setLayer] = React__namespace.useState(null);
@@ -43490,6 +43897,141 @@ const useGetLeafletLayer = () => {
             }
         });
     };
+    const addSource = React__namespace.useCallback((sourceConfig) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        const { name } = sourceConfig;
+        config.sources[name] = structuredClone(sourceConfig);
+        scene.updateConfig({ rebuild: true });
+        return getSources();
+    }, [scene, config]);
+    const getSource = React__namespace.useCallback((sourceName) => {
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        return structuredClone(config.sources[sourceName]);
+    }, [config]);
+    const updateSource = React__namespace.useCallback((sourceName, newUrl) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        config.sources[sourceName].url = newUrl;
+        scene.updateConfig({ rebuild: true });
+        return getSources();
+    }, [config, scene]);
+    const addLayer = React__namespace.useCallback((layer) => {
+        if (!scene) {
+            console.warn('Scene не инициализирован');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирован');
+            return;
+        }
+        const order = getLayers().length + 1;
+        const layerWithOrder = setLayerOrder({
+            layer,
+            order,
+        });
+        const layerName = getLayerName(layerWithOrder);
+        const { sublayers = {}, draw } = layerWithOrder;
+        if (draw) {
+            const { styles = {} } = draw;
+            if (styles) {
+                layerWithOrder.draw = {
+                    ...structuredClone(draw),
+                    ...structuredClone(styles),
+                };
+            }
+        }
+        config.layers[layerName] = {
+            ...structuredClone(layerWithOrder),
+            ...structuredClone(sublayers),
+        };
+        scene.updateConfig({ rebuild: true });
+        return getLayers();
+    }, [config, scene]);
+    const removeLayer = React__namespace.useCallback((layer) => {
+        if (!scene) {
+            console.warn('Scene не инициализирован');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирован');
+            return;
+        }
+        const layerName = getLayerName(layer);
+        if (config.layers[layerName]) {
+            delete config.layers[layerName];
+        }
+        scene.updateConfig({ rebuild: true });
+        return getLayers();
+    }, [config, scene]);
+    const addStyle = React__namespace.useCallback(({ name, style }) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        config.styles[name] = structuredClone(style);
+        scene.updateConfig({ rebuild: true });
+    }, [config, scene]);
+    const getLayerVisibility = React__namespace.useCallback((layer) => {
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        const layerName = getLayerName(layer);
+        const { visible: layerVisibility } = config.layers[layerName];
+        return layerVisibility;
+    }, [config]);
+    const toggleLayerVisibility = React__namespace.useCallback(({ layer, visible }) => {
+        if (!scene) {
+            console.warn('Scene не инициализирована');
+            return;
+        }
+        if (!config) {
+            console.warn('Config не инициализирована');
+            return;
+        }
+        const layerName = getLayerName(layer);
+        config.layers[layerName].visible = visible;
+        scene.updateConfig();
+        return getLayerVisibility(layer);
+    }, [config, scene]);
+    const getLayers = React__namespace.useCallback(() => {
+        if (!config)
+            return [];
+        const { layers } = config;
+        return Object.keys(layers);
+    }, [config]);
+    const removeLayers = React__namespace.useCallback(() => {
+        if (!config)
+            return [];
+        const { layers } = config;
+        Object.values(layers).forEach(removeLayer);
+    }, [config]);
+    const getSources = React__namespace.useCallback(() => {
+        if (!config)
+            return [];
+        const { sources } = config;
+        return Object.keys(sources);
+    }, [config]);
     React__namespace.useEffect(() => {
         if (isValidApiKey) {
             getLeafletLayer();
@@ -43509,10 +44051,120 @@ const useGetLeafletLayer = () => {
             });
         }
     }, [scene]);
+    React__namespace.useEffect(() => {
+        addStyle({
+            name: 'space-tile',
+            style: {
+                shaders: {
+                    defines: {
+                        TILE_SCALE: 0.0002445,
+                        'NORMALIZED_SHORT(x)': '(x * 32767.)',
+                    },
+                    blocks: {
+                        global: `
+              varying vec3 v_pos;
+              vec2 getTileCoords() {
+                return fract(v_pos.xy);
+              }
+            `,
+                        position: `
+              v_pos = modelPosition().xyz;
+            `,
+                    },
+                },
+            },
+        });
+        addStyle({
+            name: 'tools-aastep',
+            style: {
+                shaders: {
+                    extensions: 'OES_standard_derivatives',
+                    blocks: {
+                        global: `
+              float aastep(float threshold, float value) {
+                #ifdef TANGRAM_FRAGMENT_SHADER
+                  #ifdef TANGRAM_EXTENSION_OES_standard_derivatives
+                    float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
+                      return smoothstep(threshold-afwidth, threshold+afwidth, value);
+                  #else
+                    return step(threshold, value);
+                  #endif
+                #else
+                  return step(threshold, value);
+                #endif
+              }
+            `,
+                    },
+                },
+            },
+        });
+        addStyle({
+            name: 'pattern-diagonal-grid',
+            style: {
+                mix: ['space-tile', 'tools-aastep'],
+                shaders: {
+                    blocks: {
+                        global: `
+              float DiagonalGrid(float scale, float lineWidth) {
+                vec2 st = getTileCoords() * scale;
+
+                float d1 = mod(st.x + st.y, 1.0);
+                float line1 = aastep(lineWidth, d1) * aastep(1.0 - lineWidth, d1);
+
+                float d2 = mod(st.x - st.y, 1.0);
+                float line2 = aastep(lineWidth, d2) * aastep(1.0 - lineWidth, d2);
+
+                return max(line1, line2);
+              } 
+            `,
+                    },
+                },
+            },
+        });
+        addStyle({
+            name: 'diagonal-grid',
+            style: {
+                mix: 'pattern-diagonal-grid',
+                blend: 'screen',
+                base: 'polygons',
+                shaders: {
+                    blocks: {
+                        color: `
+              float grid = DiagonalGrid(12.0, 0.08);
+
+              color.a = grid;
+            `,
+                    },
+                },
+            },
+        });
+    }, [addStyle]);
+    React__namespace.useEffect(() => {
+        Object.values(exports.TangramSourceNames).forEach((name) => {
+            const url = sourceUrl[name];
+            addSource({
+                tile_size,
+                name,
+                url,
+                type: 'MVT',
+            });
+        });
+    }, [addSource]);
     return {
         layer,
         scene,
         config,
+        addSource,
+        getSource,
+        updateSource,
+        addLayer,
+        removeLayer,
+        addStyle,
+        getLayerVisibility,
+        toggleLayerVisibility,
+        getSources,
+        getLayers,
+        removeLayers,
     };
 };
 
@@ -43527,22 +44179,6 @@ const LeafletLayer = () => {
     return null;
 };
 
-exports.API_METHODS = void 0;
-(function (API_METHODS) {
-    API_METHODS["GET"] = "GET";
-    API_METHODS["DELETE"] = "DELETE";
-    API_METHODS["PUT"] = "PUT";
-    API_METHODS["POST"] = "POST";
-})(exports.API_METHODS || (exports.API_METHODS = {}));
-
-exports.PanelsNames = void 0;
-(function (PanelsNames) {
-    PanelsNames["TOP_RIGHT"] = "top-right";
-    PanelsNames["BOTTOM_RIGHT"] = "bottom-right";
-    PanelsNames["BOTTOM_LEFT"] = "bottom-left";
-    PanelsNames["TOP_LEFT"] = "top-left";
-})(exports.PanelsNames || (exports.PanelsNames = {}));
-
 // define() gets called for each chunk generated by the first Rollup pass.
             // The order the chunks are called in is controlled by the imports in bundle.js:
             //
@@ -43608,7 +44244,15 @@ exports.LeafletLayer = LeafletLayer;
 exports.List = CustomList;
 exports.NoData = NoData;
 exports.Select = CustomSelect;
+exports._backendUrl = _backendUrl;
 exports._testApiKeys = _testApiKeys;
+exports.getLaneMarkingLineLayers = getLaneMarkingLineLayers;
+exports.getLaneMarkingPointLayers = getLaneMarkingPointLayers;
+exports.getLaneMarkingPolyLayers = getLaneMarkingPolyLayers;
+exports.getParkingLineLayers = getParkingLineLayers;
+exports.getRoadPolyLayers = getRoadPolyLayers;
+exports.sourceUrl = sourceUrl;
+exports.tile_size = tile_size;
 exports.useFormContext = useFormContext;
 exports.useGetLeafletLayer = useGetLeafletLayer;
 //# sourceMappingURL=index.cjs.map