Indroduce Shell

lib/pages/webview_page/view.dart

@@ -4,7 +4,7 @@ import 'dart:html';
 import 'dart:math';
 import 'dart:typed_data';
 import 'dart:ui';
-
+import 'dart:js' as js;
 import 'package:flutter/material.dart' hide Image;
 import 'package:flutter/services.dart';
 import 'package:webview_demo/utils/helper.dart';
@@ -27,6 +27,11 @@ class _WebViewXPageState extends State<WebViewXPage> {
   List<String> scriptsFromAssets = [];
   Size get screenSize => MediaQuery.of(context).size;
 
+  int width = 0;
+  int height = 0;
+  int depth = 0;
+  List<String> images = [];
+
   String _loadRandomImage(int width, int height) {
     CanvasElement canvas = CanvasElement(width: width, height: height);
     var ctx = canvas.context2D
@@ -45,6 +50,7 @@ class _WebViewXPageState extends State<WebViewXPage> {
 
   @override
   Widget build(BuildContext context) {
+    _setPlatForm();
     return Scaffold(
       appBar: AppBar(
         title: const Text('WebViewX Demo Page'),
@@ -115,24 +121,8 @@ class _WebViewXPageState extends State<WebViewXPage> {
         DartCallback(
           name: 'Dart_GetClipPlaneData',
           callBack: (msg) {
-            final data = jsonDecode(msg);
-
-            ///random color
-            final imageData = _loadRandomImage(300, 300);
-
-            /// result 需要传入 WorldPoints 列表（切面端点的三维坐标）、ImagePoints 列表（切面端点的二维坐标）、ImageData 图像路径(Base64)
-            final result = {
-              "ErrorCode": 1000,
-              "WorldPoints": data["PointsList"],
-              "ImagePoints": [
-                {"X": 0.0, "Y": 1.0},
-                {"X": 1.0, "Y": 1.0},
-                {"X": 1.0, "Y": 0.0},
-                {"X": 0.0, "Y": 0.0}
-              ],
-              "ImageData": imageData
-            };
-            return jsonEncode(result);
+            var api = _getApiHost();
+            return api!.callMethod('getClipPlaneData', [msg]);
           },
         ),
         DartCallback(
@@ -213,7 +203,7 @@ class _WebViewXPageState extends State<WebViewXPage> {
       buildSpace(direction: Axis.vertical, flex: false, amount: 20.0),
       createButton(
         text: '切换模型 changeSurface （iframe 中）',
-        onTap: _changeSurface,
+        onTap: _changeSurfaceFromShell,
       ),
     ];
   }
@@ -351,4 +341,39 @@ class _WebViewXPageState extends State<WebViewXPage> {
             height: direction == Axis.vertical ? amount : null,
           );
   }
+
+  void _setPlatForm() async {
+    js.context['invokeJs'] = (a, b) {
+      var datas = b.split("\$");
+
+      width = int.parse(datas[0]);
+
+      height = int.parse(datas[1]);
+
+      depth = int.parse(datas[2]);
+
+      var imageStr = datas[3];
+      images = imageStr.split("surface");
+      print(images);
+    };
+  }
+
+  js.JsObject? _getApiHost() {
+    if (js.context.hasProperty('FisShellApi')) {
+      final api = js.context['FisShellApi'] as js.JsObject;
+      return api;
+    }
+  }
+
+  Future<void> _changeSurfaceFromShell() async {
+    try {
+      await webviewController
+          .callJsMethod('changeSurface', [width, height, depth, ...images]);
+    } catch (e) {
+      showAlertDialog(
+        executeJsErrorMessage,
+        context,
+      );
+    }
+  }
 }

web/3DWeb/js/customScript/clipWorkflow/ClipMeshUpgrader.js

@@ -3,7 +3,7 @@ var lineBC = new THREE.Vector3(0, 0, 0);
 var crossResult = new THREE.Vector3(0, 0, 0);
 
 // update view
-function refreshClipMesh(plane, mesh, imageName, callback) {
+async function refreshClipMesh(plane, mesh, imageName, callback) {
   let points = LineIntersectionHelper.getLineIntersectionPoints(
     EdgesManager.getCubeEdges(),
     plane
@@ -13,7 +13,7 @@ function refreshClipMesh(plane, mesh, imageName, callback) {
   }
 
   //get clipPlaneData From WPF
-  var clipPlaneData = getClipPlaneData();
+  var clipPlaneData = await getClipPlaneData();
   if (clipPlaneData.ErrorCode != 1000) {
     console.error("get data error :" + clipPlaneData.ErrorCode);
     return false;
@@ -22,7 +22,7 @@ function refreshClipMesh(plane, mesh, imageName, callback) {
     return true;
   }
 
-  function getClipPlaneData() {
+  async function getClipPlaneData() {
     //convert points
     convertToVTKPoints(points);
     let mappingPoints = [];
@@ -41,8 +41,9 @@ function refreshClipMesh(plane, mesh, imageName, callback) {
     };
     // let json = jsObj.GetClipPlaneData(
     //     OSHelper.convertCefParameter(inputData));
-    let json = Dart_GetClipPlaneData(JSON.stringify(inputData));
-    return JSON.parse(json);
+    let json = await Dart_GetClipPlaneData(JSON.stringify(inputData));
+    var clipPlaneData=JSON.parse(json)
+    return  clipPlaneData;
   }
 
   function updateMesh() {

web/index.html

@@ -50,6 +50,12 @@
       document.body.append(scriptTag);
     }
 
+   ///外部通知
+   function externalNotification(a, b) {
+    console.log("externalNotification arrvied");
+    window.invokeJs(a, b);
+   }
+
     if ('serviceWorker' in navigator) {
       // Service workers are supported. Use them.
       window.addEventListener('load', function () {