wovvmap-webview-bridge 1.0.4 → 1.0.6

package/README.md

@@ -1,180 +1,213 @@
-# 📱 Native Integration Guide – wovvmap-webview-bridge
-
-This guide explains how to use the `wovvmap-webview-bridge` package **from the React Native side**. This package helps you send data to a WebView and listen for data coming from the WebView.
-
----
-
-## ✅ Installation
-
-```bash
-npm install wovvmap-webview-bridge
-# or
-yarn add wovvmap-webview-bridge
-```
-
----
-
-## 🔌 Setup WebView
-
-Import and use the `<WebViewScreen />` component provided by the package:
-
-```tsx
-import React from 'react';
-import { View } from 'react-native';
-import { WebViewScreen } from 'wovvmap-webview-bridge';
-
-export default function App() {
-  return (
-    <View style={{ flex: 1 }}>
-      <WebViewScreen url="http://localhost:5173/map" />
-    </View>
-  );
-}
-```
-
----
-
-## 📤 Send Data to WebView
-
-You can send navigation data (e.g. from, to, elevator, escalator) using `sendToWeb`:
-
-```ts
-import { sendToWeb } from 'wovvmap-webview-bridge';
-
-sendToWeb({
-  type: "setNavigationData",
-  payload: {
-    from: "store1",
-    to: "store9",
-    elevator: false,
-    escalator: true,
-    floor : 1
-  },
-});
-```
-
----
-
-## 📥 Receive Events from WebView
-
-Use `registerBridgeHandler` to listen for events sent from the web:
-
-```ts
-import { registerBridgeHandler } from 'wovvmap-webview-bridge';
-
-registerBridgeHandler("pathData", (points) => {
-  console.log("📍 Received pathData:", points);
-});
-
-registerBridgeHandler("PathFindingResult", (result) => {
-  console.log("🧭 Path result:", result);
-});
-
-registerBridgeHandler("changeFloor", (floor) => {
-  console.log("🏢 Web requested floor change:", floor);
-});
-```
-
----
-
-## 🧠 Data Types
-
-The bridge handles these types safely:
-
-```ts
-type SendToWebMessage = {
-  type: "setNavigationData";
-  payload: {
-    from?: string;
-    to?: string;
-    elevator?: boolean;
-    escalator?: boolean;
-    floor?: boolean;
-  };
-};
-
-type BridgeMessage =
-  | { type: "event"; key: "floor"; value: number }
-  | { type: "event"; key: "pathData"; value: NodePoint[] }
-  | { type: "event"; key: "PathFindingResult"; value: PathFindingResult }
-  | { type: "event"; key: "searchTextResult"; value: NodePoint[] }
-  | { type: "event"; key: "shapeZoomAndSelect"; value: NodePoint | undefined }
-  | { type: "event"; key: "searchablePoints"; value: NodePoint[] }
-  | { type: "event"; key: "nodePoint"; value: {[key:string]: NodePointOuterFiled} }
-  | { type: "event"; key: "nodeline"; value: {[key:string]: NodeLineOuterFiled} }
-  | { type: "event"; key: "categoryList"; value: { [key: string]: NodePoint } }
-  | {
-    type: "event"; key: "floorInfo"; value: {
-      floors: {
-        index: number;
-        shortName: string;
-        fullName: string;
-        floorNumber: number;
-      }[],
-      defaultFloorIndex: number
-    }
-  }
-  | { type: "event"; key: "to"; value:string}
-  | { type: "event"; key: "from"; value:string}
-  | { type: "event"; key: "elevator"; value:"true" | "false"}
-  | { type: "event"; key: "escalator"; value:"true" | "false"}
-
-
-
-  type EventHandlerMap = {
-    floor?: (floor: number) => void;
-    pathData?: (val: NodePoint[]) => void;
-    PathFindingResult?: (val: PathFindingResult) => void;
-    searchTextResult?: (val: NodePoint[]) => void;
-    shapeZoomAndSelect?: (val: NodePoint | undefined) => void;
-    searchablePoints?: (val: NodePoint[]) => void;
-    nodePoint?: (val: { [key: string]: NodePointOuterFiled }) => void;
-    nodeline?: (val: { [key: string]: NodeLineOuterFiled }) => void;
-    categoryList?: (val: { [key: string]: NodePoint }) => void;
-    floorInfo?: (val: {
-        floors: {
-        index: number;
-        shortName: string;
-        fullName: string;
-        floorNumber: number;
-        }[];
-        defaultFloorIndex: number;
-    }) => void;
-    to?: (val: string) => void;
-    from?: (val: string) => void;
-    elevator?: (val: "true" | "false") => void;
-    escalator?: (val: "true" | "false") => void;
-};
-
-```
-
----
-
-## 💡 Tips
-
-- All bridge messages are serialized using `JSON.stringify`. Avoid non-serializable data like Maps or circular references.
-- WebView must have messaging enabled (already done in `<WebViewScreen />`).
-- You can directly access the `webviewRef` if needed.
-
-```ts
-import { webviewRef } from 'wovvmap-webview-bridge';
-```
-
----
-
-## 📄 Summary of Exports (Native Side)
-
-```ts
-import {
-  WebViewScreen,
-  sendToWeb,
-  webviewRef,
-  registerBridgeHandler,
-} from 'wovvmap-webview-bridge';
-```
-
----
-
-## 📘 Done!
-
-You're now ready to communicate seamlessly between React Native and your WebView 🎉
+
+# React Native WebView Bridge
+
+A tiny bridge layer to communicate between a React Native app (using `react-native-webview`) and a web page. It provides:
+
+- A ready-to-use `<WebViewScreen />` wrapper
+- A simple `sendToWeb(...)` API for posting messages to the webview
+- Typed event handling for messages coming **from** the web page
+- Lightweight in-app state storage (via `koshin`) to keep UI in sync with bridge events
+
+> **Demo idea:** Your message referenced a Snack example. You can adapt this package to the same flow as in your Snack: https://snack.expo.dev/@krushnkant/react-native-webview
+
+---
+
+## Installation
+
+```bash
+# with npm
+npm i react-native-webview 
+
+# or with yarn
+yarn add react-native-webview 
+
+# or with pnpm
+pnpm add react-native-webview 
+```
+
+---
+
+## Quick Start
+
+1) **Render the WebView and hook the bridge handler**
+
+```tsx
+import React from "react";
+import { WebViewScreen } from "<your-package-name>";
+// If you want to register custom event callbacks:
+import { registerBridgeHandler } from "<your-package-name>";
+
+export default function App() {
+  React.useEffect(() => {
+    // Optional handlers for clicks coming from the web scene
+    registerBridgeHandler("isSceneClick", (evt) => {
+      console.log("Scene clicked:", evt);
+    });
+    registerBridgeHandler("isShapClick", (evt) => {
+      console.log("Shape clicked:", evt.value);
+    });
+  }, []);
+
+  return <WebViewScreen url={"https://your-web-app.example.com"} />;
+}
+```
+
+Under the hood, `<WebViewScreen />` wires `onMessage` to the bridge message handler so any `postMessage(...)` coming from your web page is typed and routed correctly.  fileciteturn1file6
+
+2) **Send commands *to* the web app**
+
+```ts
+import {
+  sendActiveFloorToBridge,
+  sendEndPointToBridge,
+  sendPathFinishBtnClick,
+  sendPathNextBtnClick,
+  sendPathPreBtnClick,
+  sendStartPointToBridge,
+} from "<your-package-name>";
+
+// examples:
+sendStartPointToBridge("node_123");
+sendEndPointToBridge("node_999");
+sendActiveFloorToBridge(2);
+sendPathNextBtnClick();
+sendPathPreBtnClick();
+sendPathFinishBtnClick();
+```
+
+These helpers call the shared `sendToWeb(...)` which posts a JSON-serialized message to the underlying `WebView` instance. fileciteturn1file1 fileciteturn1file7
+
+3) **Keep UI in sync with bridge state (optional)**
+
+```ts
+import { bridgeStorage } from "<your-package-name>";
+
+bridgeStorage.subscribe((state) => {
+  // state includes: isBridgeLoaded, isMapLoaded, searchablePoints, activeFloor, etc.
+  console.log(state);
+});
+```
+
+Internally this uses a small `koshin` store with fields like `isBridgeLoaded`, `isMapLoaded`, `searchablePoints`, `activeFloor`, `floorImages`, `stapByStapList`, and `nextPreState`.  fileciteturn1file0
+
+---
+
+## What the Web Page Should Send
+
+Your web page (inside the WebView) should `postMessage(JSON.stringify(...))` with the following **Incoming** event shapes:
+
+```ts
+type IncomingMessage =
+  | { type: "event"; key: "isConnection"; value: boolean; file: string }
+  | { type: "event"; key: "mapLoaded"; value: boolean; file: string }
+  | { type: "event"; key: "_searchablePoints"; value: NodePoint[]; file: string }
+  | { type: "event"; key: "Category"; value: Category[]; file: string }
+  | { type: "event"; key: "_activeFloor"; value: number; file: string }
+  | { type: "event"; key: "FloorImg"; value: FloorImage[]; file: string }
+  | { type: "event"; key: "isSceneClick"; file: string }
+  | { type: "event"; key: "isShapClick"; value: NodePoint; file: string }
+  | { type: "event"; key: "stapByStapList"; value: StepInstruction[]; file: string }
+  | { type: "event"; key: "pathNextPreState"; value: NavState; file: string };
+```
+The built-in handler parses the message, updates store fields, and triggers any registered callbacks for `isSceneClick` / `isShapClick`.  fileciteturn1file3 fileciteturn1file2
+
+---
+
+## What the App Sends to the Web Page
+
+Outgoing commands you can dispatch from React Native:
+
+```ts
+type OutgoingMessage =
+  | { type: "applyCSS"; selector: string; style: Partial<Record<string, string | number>> }
+  | { type: "event"; key: "ping"; value: boolean; file: string }
+  | { type: "event"; key: "setEndPoint"; value: string; file: string }
+  | { type: "event"; key: "setStartPoint"; value: string; file: string }
+  | { type: "event"; key: "setActiveFloor"; value: number; file: string }
+  | { type: "event"; key: "pathNextBtnClick"; file: string }
+  | { type: "event"; key: "pathPreBtnClick"; file: string }
+  | { type: "event"; key: "pathFinishBtnClick"; file: string };
+```
+These go through `sendToWeb(...)` which uses a shared `webviewRef` to `postMessage(...)`.  fileciteturn1file7
+
+---
+
+## API Reference
+
+### Components
+
+#### `<WebViewScreen />`
+A thin wrapper around `react-native-webview` that plugs in the bridge message handler.
+
+**Props**
+- `url: string` – the URL to load inside the WebView.
+
+fileciteturn1file6
+
+### Functions
+
+- `registerBridgeHandler(type, handler)` — Register a callback for `"isSceneClick"` or `"isShapClick"` events.  fileciteturn1file3
+- `sendStartPointToBridge(pointId)` — Ask web map to set the start point.  fileciteturn1file1
+- `sendEndPointToBridge(pointId)` — Ask web map to set the end point.  fileciteturn1file1
+- `sendActiveFloorToBridge(floorIndex)` — Switch active floor on the web map.  fileciteturn1file1
+- `sendPathNextBtnClick()` / `sendPathPreBtnClick()` / `sendPathFinishBtnClick()` — Control path stepper on the web map.  fileciteturn1file1
+- `bridgeStorage` — Reactive store with connection and navigation-related state.  fileciteturn1file0
+
+### Types (partial)
+- `NodePoint`, `Category`, `FloorImage`, `StepInstruction`, `NavState`, `IncomingMessage`, `OutgoingMessage` — TypeScript contracts shared across the bridge.  fileciteturn1file5
+
+---
+
+## Minimal Web Side (Example)
+
+Your web app should listen for messages and respond via `window.ReactNativeWebView.postMessage(...)`:
+
+```js
+// inside the web page
+window.addEventListener("message", (e) => {
+  try {
+    const msg = JSON.parse(e.data);
+    if (msg.type === "event" && msg.key === "setActiveFloor") {
+      // do something in the web app
+      console.log("Active floor requested:", msg.value);
+      // notify RN app that web is connected
+      window.ReactNativeWebView?.postMessage(JSON.stringify({
+        type: "event",
+        key: "isConnection",
+        value: true,
+        file: "web-app",
+      }));
+    }
+  } catch {}
+});
+```
+
+---
+
+## Project Structure (Library)
+
+```
+src/
+├─ index.ts                    # package exports  fileciteturn1file4
+├─ handlers/WebBridgeHandlers  # incoming event router & registration  fileciteturn1file3
+├─ webviewBridge/WebViewBridgeRef.ts  # shared ref + sendToWeb        fileciteturn1file7
+├─ webviewBridge/BridgeService.ts     # convenience sending helpers    fileciteturn1file1
+├─ webviewBridge/BridgeStorage.ts     # tiny state store (koshin)      fileciteturn1file0
+├─ webviewBridge/WebViewScreen.tsx    # ready-to-use WebView wrapper   fileciteturn1file6
+├─ types/types.ts                # shared TS contracts                 fileciteturn1file5
+```
+
+---
+
+## Requirements
+
+- React Native
+- [`react-native-webview`](https://github.com/react-native-webview/react-native-webview)
+- [`koshin`](https://www.npmjs.com/package/koshin)
+- TypeScript recommended
+
+---
+
+## License
+
+MIT © Your Name

package/dist/handlers/WebBridgeHandlers.d.ts

@@ -1,38 +1,18 @@
 import type { WebViewMessageEvent } from "react-native-webview";
-import type { NodeLineOuterFiled, NodePointOuterFiled } from "../types/BridgeMessage";
-import { PathFindingResult } from "../types/PathFindingResult";
-import { SerializableNodePoint as NodePoint } from "../types/NodePoint";
+import { NodePoint } from "../types/types";
 export type EventHandlerMap = {
-    floor?: (floor: number) => void;
-    pathData?: (val: NodePoint[]) => void;
-    PathFindingResult?: (val: PathFindingResult) => void;
-    searchTextResult?: (val: NodePoint[]) => void;
-    shapeZoomAndSelect?: (val: NodePoint | undefined) => void;
-    searchablePoints?: (val: NodePoint[]) => void;
-    nodePoint?: (val: {
-        [key: string]: NodePointOuterFiled;
+    isSceneClick?: (sceneClick: {
+        type: "event";
+        key: "isSceneClick";
+        file: string;
     }) => void;
-    nodeline?: (val: {
-        [key: string]: NodeLineOuterFiled;
+    isShapClick?: (shapClick: {
+        type: "event";
+        key: "isShapClick";
+        value: NodePoint;
+        file: string;
     }) => void;
-    categoryList?: (val: {
-        [key: string]: NodePoint;
-    }) => void;
-    floorInfo?: (val: {
-        floors: {
-            index: number;
-            shortName: string;
-            fullName: string;
-            floorNumber: number;
-        }[];
-        defaultFloorIndex: number;
-    }) => void;
-    to?: (val: string) => void;
-    from?: (val: string) => void;
-    elevator?: (val: "true" | "false") => void;
-    escalator?: (val: "true" | "false") => void;
 };
 export declare const eventHandlers: Partial<EventHandlerMap>;
-export declare const bridgeMessageStore: Partial<Record<keyof EventHandlerMap, any>>;
 export declare const registerBridgeHandler: <K extends keyof EventHandlerMap>(type: K, handler: EventHandlerMap[K]) => void;
 export declare const handleBridgeMessage: (event: WebViewMessageEvent) => void;

package/dist/handlers/WebBridgeHandlers.js

@@ -1,24 +1,33 @@
+import { bridgeStorage } from "../webviewBridge/BridgeStorage";
 // ✅ 2. Global handler storage
 export var eventHandlers = {};
-// ✅ 3. Runtime key-value store for all event data
-export var bridgeMessageStore = {};
 // ✅ 4. Register handler function
 export var registerBridgeHandler = function (type, handler) {
     eventHandlers[type] = handler;
 };
 // ✅ 5. Main bridge handler
 export var handleBridgeMessage = function (event) {
+    var _a, _b;
     try {
-        var data = JSON.parse(event.nativeEvent.data);
-        if (data.type === "event") {
-            var key = data.key;
-            var fn = eventHandlers[key];
-            // ✅ Store latest data in bridgeMessageStore
-            bridgeMessageStore[key] = data.value;
-            // ✅ Call handler if available
-            // @ts-expect-error safe
-            fn === null || fn === void 0 ? void 0 : fn(data.value);
-        }
+        var message = JSON.parse(event.nativeEvent.data);
+        if (message.key === "mapLoaded")
+            bridgeStorage.set("isMapLoaded", message.value);
+        if (message.key === "isConnection")
+            bridgeStorage.set("isBridgeLoaded", message.value);
+        if (message.key === "_searchablePoints")
+            bridgeStorage.set("searchablePoints", message.value);
+        if (message.key === "_activeFloor")
+            bridgeStorage.set("activeFloor", message.value);
+        if (message.key === "FloorImg")
+            bridgeStorage.set("floorImages", message.value);
+        if (message.key === "isSceneClick")
+            (_a = eventHandlers[message.key]) === null || _a === void 0 ? void 0 : _a.call(eventHandlers, message);
+        if (message.key === "isShapClick")
+            (_b = eventHandlers[message.key]) === null || _b === void 0 ? void 0 : _b.call(eventHandlers, message);
+        if (message.key === "stapByStapList")
+            bridgeStorage.set("stapByStapList", message.value);
+        if (message.key === "pathNextPreState")
+            bridgeStorage.set("nextPreState", message.value);
     }
     catch (e) {
         console.error("WebView message error:", e);

package/dist/index.d.ts

@@ -1,7 +1,4 @@
 export { WebViewScreen } from './webviewBridge/WebViewScreen';
-export { sendToWeb, webviewRef } from './webviewBridge/WebViewBridgeRef';
-export { PathFindingResult } from './types/PathFindingResult';
-export { NavigationInstruction, SerializablePoint2D, SerializableNodePoint } from './types/NodePoint';
-export { NodePointOuterFiled, Point3D, NodeLineOuterFiled, SendToWebMessage } from './types/BridgeMessage';
-export { bridgeMessageStore, eventHandlers, handleBridgeMessage, registerBridgeHandler } from './handlers/WebBridgeHandlers';
-export { EventHandlerMap } from './handlers/WebBridgeHandlers';
+export { eventHandlers, registerBridgeHandler } from './handlers/WebBridgeHandlers';
+export { bridgeStorage } from './webviewBridge/BridgeStorage';
+export { sendActiveFloorToBridge, sendEndPointToBridge, sendPathFinishBtnClick, sendPathNextBtnClick, sendPathPreBtnClick, sendStartPointToBridge } from './webviewBridge/BridgeService';

package/dist/index.js

@@ -1,3 +1,4 @@
 export { WebViewScreen } from './webviewBridge/WebViewScreen';
-export { sendToWeb, webviewRef } from './webviewBridge/WebViewBridgeRef';
-export { bridgeMessageStore, eventHandlers, handleBridgeMessage, registerBridgeHandler } from './handlers/WebBridgeHandlers';
+export { eventHandlers, registerBridgeHandler } from './handlers/WebBridgeHandlers';
+export { bridgeStorage } from './webviewBridge/BridgeStorage';
+export { sendActiveFloorToBridge, sendEndPointToBridge, sendPathFinishBtnClick, sendPathNextBtnClick, sendPathPreBtnClick, sendStartPointToBridge } from './webviewBridge/BridgeService';

package/dist/types/types.d.ts

@@ -0,0 +1,178 @@
+export interface LocationArea {
+    x: number;
+    y: number;
+}
+export interface LocationName {
+    text: string;
+    area: LocationArea;
+    rotate: number;
+    textColor: string;
+    textSize: string;
+    textStyle: string;
+    width: string;
+    height: string;
+}
+export interface Logo {
+    show: boolean;
+    url: string;
+    size: number;
+    x: number;
+    y: number;
+    rotate: number;
+}
+export interface ShapePoint {
+    x: number;
+    y: number;
+}
+export interface BrandId {
+    sit: string;
+}
+export interface NodePoint {
+    x: number;
+    y: number;
+    z: number;
+    targetDist: number;
+    previousNode: any;
+    close: boolean;
+    colleague: any[];
+    elementTag: string;
+    LocationName: LocationName;
+    Category: string;
+    type: string;
+    LeaseType: string;
+    logo: Logo;
+    color: string;
+    Description: string;
+    shape: ShapePoint[];
+    up: boolean;
+    down: boolean;
+    depth: number;
+    brand_Id: BrandId;
+    floorBash: boolean;
+    extra: Record<string, any>;
+    key: string;
+    myAngle: number;
+    NavigationInstruction: any;
+    distanceToNextPoint: number;
+    stepsToNextPoint: number;
+}
+export interface Category {
+    name: string;
+    Description: string;
+    color: string;
+}
+export interface FloorImage {
+    FloorName: string;
+    FloorUrl: string;
+    ShortName: string;
+    FloorNumber: number;
+    SubFloor?: boolean;
+    index: number;
+}
+export interface StepInstruction {
+    instruction: string;
+    distance: string;
+    steps?: number;
+    icon: "left" | "right" | "startPoint" | "endPoint" | "Take Elevator" | "Take Escalator" | "Exit Elevator" | "Exit Escalator" | null;
+}
+export type NavState = {
+    currentFloorIndex: number;
+    currentPointIndex: number;
+    totalFloors: number;
+    floorLengths: number[];
+    canPrev: boolean;
+    canNext: boolean;
+    isLastStep: boolean;
+    hasPath: boolean;
+};
+export type IncomingMessage = {
+    type: "event";
+    key: "pong";
+    file: string;
+} | {
+    type: "event";
+    key: "isConnection";
+    value: boolean;
+    file: string;
+} | {
+    type: "event";
+    key: "mapLoaded";
+    value: boolean;
+    file: string;
+} | {
+    type: "event";
+    key: "_searchablePoints";
+    value: NodePoint[];
+    file: string;
+} | {
+    type: "event";
+    key: "Category";
+    value: Category[];
+    file: string;
+} | {
+    type: "event";
+    key: "_activeFloor";
+    value: number;
+    file: string;
+} | {
+    type: "event";
+    key: "FloorImg";
+    value: FloorImage[];
+    file: string;
+} | {
+    type: "event";
+    key: "isSceneClick";
+    file: string;
+} | {
+    type: "event";
+    key: "isShapClick";
+    value: NodePoint;
+    file: string;
+} | {
+    type: "event";
+    key: "stapByStapList";
+    value: StepInstruction[];
+    file: string;
+} | {
+    type: "event";
+    key: "pathNextPreState";
+    value: NavState;
+    file: string;
+};
+export type OutgoingMessage = {
+    type: "applyCSS";
+    selector: string;
+    style: Partial<Record<string, string | number>>;
+} | {
+    type: "event";
+    key: "ping";
+    value: boolean;
+    file: string;
+} | {
+    type: "event";
+    key: "setEndPoint";
+    value: string;
+    file: string;
+} | {
+    type: "event";
+    key: "setStartPoint";
+    value: string;
+    file: string;
+} | {
+    type: "event";
+    key: "setActiveFloor";
+    value: number;
+    file: string;
+} | {
+    type: "event";
+    key: "pathNextBtnClick";
+    file: string;
+} | {
+    type: "event";
+    key: "pathPreBtnClick";
+    file: string;
+} | {
+    type: "event";
+    key: "pathFinishBtnClick";
+    file: string;
+};

package/dist/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/webviewBridge/BridgeService.d.ts

@@ -0,0 +1,6 @@
+export declare const sendEndPointToBridge: (endPointId: string) => void;
+export declare const sendStartPointToBridge: (startPointId: string) => void;
+export declare const sendActiveFloorToBridge: (floorId: number) => void;
+export declare const sendPathNextBtnClick: () => void;
+export declare const sendPathPreBtnClick: () => void;
+export declare const sendPathFinishBtnClick: () => void;

package/dist/webviewBridge/BridgeService.js

@@ -0,0 +1,19 @@
+import { sendToWeb } from "./WebViewBridgeRef";
+export var sendEndPointToBridge = function (endPointId) {
+    sendToWeb({ type: "event", key: "setEndPoint", value: endPointId, file: "BridgeService.ts" });
+};
+export var sendStartPointToBridge = function (startPointId) {
+    sendToWeb({ type: "event", key: "setStartPoint", value: startPointId, file: "BridgeService.ts" });
+};
+export var sendActiveFloorToBridge = function (floorId) {
+    sendToWeb({ type: "event", key: "setActiveFloor", value: floorId, file: "BridgeService.ts" });
+};
+export var sendPathNextBtnClick = function () {
+    sendToWeb({ type: "event", key: "pathNextBtnClick", file: "BridgeService.ts" });
+};
+export var sendPathPreBtnClick = function () {
+    sendToWeb({ type: "event", key: "pathPreBtnClick", file: "BridgeService.ts" });
+};
+export var sendPathFinishBtnClick = function () {
+    sendToWeb({ type: "event", key: "pathFinishBtnClick", file: "BridgeService.ts" });
+};

package/dist/webviewBridge/BridgeStorage.d.ts

@@ -0,0 +1,18 @@
+import type { FloorImage, NavState, NodePoint, StepInstruction } from "../types/types";
+type BridgeStorage = {
+    isBridgeLoaded: boolean;
+    isMapLoaded: boolean;
+    searchablePoints: NodePoint[];
+    activeFloor: number;
+    elevator: "true" | "false";
+    escalator: "true" | "false";
+    floorImages: FloorImage[];
+    stapByStapList: StepInstruction[];
+    nextPreState: NavState | null;
+};
+export declare let bridgeStorage: BridgeStorage & {
+    set<K extends keyof BridgeStorage>(key: K, value: BridgeStorage[K]): void;
+    onChange(callback: <K extends keyof BridgeStorage>(key: K, newValue: BridgeStorage[K], oldValue: BridgeStorage[K]) => void): () => void;
+    signal<K extends keyof BridgeStorage>(key: K): [BridgeStorage[K], (value: BridgeStorage[K]) => void];
+};
+export {};

package/dist/webviewBridge/BridgeStorage.js

@@ -0,0 +1,12 @@
+import { createStore } from "koshin";
+export var bridgeStorage = createStore({
+    isBridgeLoaded: false,
+    isMapLoaded: false,
+    searchablePoints: [],
+    activeFloor: -1,
+    elevator: "false",
+    escalator: "false",
+    floorImages: [],
+    stapByStapList: [],
+    nextPreState: null
+});

package/dist/webviewBridge/WebViewBridgeRef.d.ts

@@ -1,4 +1,4 @@
 import type { WebView } from "react-native-webview";
-import type { SendToWebMessage } from "../types/BridgeMessage";
+import { OutgoingMessage } from "../types/types";
 export declare const webviewRef: import("react").RefObject<WebView<{}> | null>;
-export declare const sendToWeb: (data: SendToWebMessage) => void;
+export declare const sendToWeb: (data: OutgoingMessage) => void;

package/dist/webviewBridge/WebViewBridgeRef.js

@@ -3,7 +3,9 @@ import { createRef } from "react";
 export var webviewRef = createRef();
 // Exported send function
 export var sendToWeb = function (data) {
+    console.log("webviweRef", webviewRef);
     if (webviewRef.current) {
+        console.log("enter current");
         webviewRef.current.postMessage(JSON.stringify(data));
     }
     else {

package/dist/webviewBridge/WebViewScreen.js

@@ -1,12 +1,15 @@
 import React from "react";
-import { WebView } from "react-native-webview";
 import { handleBridgeMessage } from "../handlers/WebBridgeHandlers";
 import { webviewRef } from "./WebViewBridgeRef";
+import { WebView } from 'react-native-webview';
 export var WebViewScreen = function (_a) {
     var url = _a.url;
     var onMessage = function (event) {
         console.log("on message event", event);
         handleBridgeMessage(event);
     };
-    return (React.createElement(WebView, { ref: webviewRef, source: { uri: url }, onMessage: onMessage, style: { flex: 1 } }));
+    return (React.createElement(WebView, { ref: webviewRef, source: { uri: url }, onMessage: onMessage, onLoadStart: function () { return console.log("WebView: load start", url); }, onLoadEnd: function () { return console.log("WebView: load end"); }, onLoadProgress: function (_a) {
+            var nativeEvent = _a.nativeEvent;
+            return console.log("WebView: progress", nativeEvent.progress);
+        }, onError: function (e) { return console.warn("WebView error:", e.nativeEvent); }, style: { flex: 1, width: "100%" } }));
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "wovvmap-webview-bridge",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-     "dist"
+    "dist"
   ],
   "scripts": {
     "build": "tsc "
@@ -12,9 +12,11 @@
   "peerDependencies": {
     "react": "^19.1.0",
     "react-native": "^0.80.1",
-    "react-native-webview": "^13.15.0"
+    "react-native-webview": "^13.15.0",
+    "koshin": "^1.0.5"
   },
   "devDependencies": {
     "@types/react": "^19.1.8"
   }
+  
 }

package/dist/types/BridgeMessage.d.ts

@@ -1,102 +0,0 @@
-import { SerializableNodePoint as NodePoint, SerializablePoint2D as Point2D } from "./NodePoint";
-import { PathFindingResult } from "./PathFindingResult";
-export interface NodePointOuterFiled {
-    point: NodePoint;
-    name: string;
-    x: number;
-    y: number;
-    z: number;
-}
-export interface Point3D extends Point2D {
-    z: number;
-}
-export interface NodeLineOuterFiled {
-    a: Point3D;
-    b: Point3D;
-    distance: number;
-    pointA: NodePoint;
-    pointB: NodePoint;
-}
-export type BridgeMessage = {
-    type: "event";
-    key: "floor";
-    value: number;
-} | {
-    type: "event";
-    key: "pathData";
-    value: NodePoint[];
-} | {
-    type: "event";
-    key: "PathFindingResult";
-    value: PathFindingResult;
-} | {
-    type: "event";
-    key: "searchTextResult";
-    value: NodePoint[];
-} | {
-    type: "event";
-    key: "shapeZoomAndSelect";
-    value: NodePoint | undefined;
-} | {
-    type: "event";
-    key: "searchablePoints";
-    value: NodePoint[];
-} | {
-    type: "event";
-    key: "nodePoint";
-    value: {
-        [key: string]: NodePointOuterFiled;
-    };
-} | {
-    type: "event";
-    key: "nodeline";
-    value: {
-        [key: string]: NodeLineOuterFiled;
-    };
-} | {
-    type: "event";
-    key: "categoryList";
-    value: {
-        [key: string]: NodePoint;
-    };
-} | {
-    type: "event";
-    key: "floorInfo";
-    value: {
-        floors: {
-            index: number;
-            shortName: string;
-            fullName: string;
-            floorNumber: number;
-        }[];
-        defaultFloorIndex: number;
-    };
-} | {
-    type: "event";
-    key: "to";
-    value: string;
-} | {
-    type: "event";
-    key: "from";
-    value: string;
-} | {
-    type: "event";
-    key: "elevator";
-    value: "true" | "false";
-} | {
-    type: "event";
-    key: "escalator";
-    value: "true" | "false";
-};
-export type SendToWebMessage = {
-    type: "setNavigationData";
-    payload: {
-        from?: string;
-        to?: string;
-        elevator?: boolean;
-        escalator?: boolean;
-        floor?: number;
-    };
-} | {
-    type: "condtiotion";
-};

package/dist/types/BridgeMessage.js

@@ -1,2 +0,0 @@
-// Shared types
-export {};

package/dist/types/NodePoint.d.ts

@@ -1,36 +0,0 @@
-export type NavigationInstruction = "left" | "right" | "startPoint" | "endPoint" | "Take Elevator" | "Take Escalator" | "Exit Elevator" | "Exit Escalator" | null;
-export type SerializablePoint2D = {
-    x: number;
-    y: number;
-};
-export type SerializableNodePoint = {
-    x?: number;
-    y?: number;
-    z?: number;
-    targetDist?: number;
-    close?: boolean;
-    elementTag?: string;
-    type?: string;
-    LeaseType?: string;
-    Category?: string;
-    color?: string;
-    Description?: string;
-    shape?: SerializablePoint2D[];
-    key?: string;
-    myAngle?: number;
-    NavigationInstruction?: NavigationInstruction;
-    distanceToNextPoint: number;
-    stepsToNextPoint: number;
-    floorBash?: boolean;
-    brand_Id?: string | null;
-    LocationName?: {
-        text?: string;
-        textColor?: string;
-        textSize?: string;
-        rotate?: number;
-    };
-    colleague?: {
-        name: string;
-        role?: string;
-    }[];
-};

package/dist/types/NodePoint.js

@@ -1,2 +0,0 @@
-// src/types/NodePoint.ts
-export {};

package/dist/types/PathFindingResult.d.ts

@@ -1,6 +0,0 @@
-import { SerializableNodePoint } from "./NodePoint";
-export type PathFindingResult = {
-    path: SerializableNodePoint[];
-    totalCost: number;
-    floor: number;
-};

package/dist/types/PathFindingResult.js

@@ -1,2 +0,0 @@
-// src/types/PathFindingResult.ts
-export {};