disaster_web3/src/control/vtkModel.js

import * as d3 from "d3-scale";
import { formatDefaultLocale } from "d3-format";
import "@kitware/vtk.js/Rendering/Profiles/Geometry";
import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";
import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';

import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants";
import vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData";
import vtkLight from "@kitware/vtk.js/Rendering/Core/Light";
import { throttle } from '@kitware/vtk.js/macros';
import {
  FieldDataTypes,
  FieldAssociations,
} from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';


import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
import vtkLineSource from '@kitware/vtk.js/Filters/Sources/LineSource';
import vtkSphereMapper from '@kitware/vtk.js/Rendering/Core/SphereMapper';

import vtk2DShape from '@kitware/vtk.js/Filters/Sources/Arrow2DSource';
import vtkArrowSource from '@kitware/vtk.js/Filters/Sources/ArrowSource';
import vtkArrow2DSource from '@kitware/vtk.js/Filters/Sources/Arrow2DSource';
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor';

import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor';
import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';

import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';

import vtkPLYReader from '@kitware/vtk.js/IO/Geometry/PLYReader';
import vtkTexture from '@kitware/vtk.js/Rendering/Core/Texture';
import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';

import axios from 'axios';


export class VtkModel {
  constructor() {

    //当前显示 模版 还是结果
    this.isJg = false;

    /**
     * 选择点线 
     */
    this.isSelectNode = false;
    /**
     * 选择管道 
     */
    this.isSelectPipe = false;
    //管道节点选择对象
    this.selectObj = null;
    //X，Y
      this.epageX=null;
      this.epageY=null;
    //结果选择的点数据
    this.selectJgPointId = 0;
    this.validNodes = [];//节点数据
    this.pipes = [];//管道数据

    this.renderWindowWith = null;
    this.renderer = null;
    this.renderWindow = null;


    //选取
    this.lastActor = null;
    this.nodeActors = []; //节点actor 数据
    this.pipeActors = []; //管道actor 数据
    this.interactor = null;
    this.apiSpecificRenderWindow = null;
    this.hardwareSelector = null;

    //模板数据
    this.polyData = vtkPolyData.newInstance();
    this.mapper = vtkMapper.newInstance();
    this.actor = vtkActor.newInstance();
    this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
    this.actor.getProperty().setColor(WHITE);
    this.mapper.setInputData(this.polyData);
    this.actor.setMapper(this.mapper);

   

    //点数据
    this.actor2 = vtkActor.newInstance();
    this.actor2.getProperty().setRepresentation(Representation.POINTS); //点   
    this.actor2.getProperty().setColor(WHITE);
    this.actor2.getProperty().setPointSize(2);
    this.actor2.setMapper(this.mapper);


    //结果数据渲染
    this.jgActor = vtkActor.newInstance();
    this.jgMapper = vtkMapper.newInstance();
    this.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面    
    this.scalarBarActor = vtkScalarBarActor.newInstance();
    this.scalarBarActor.setGenerateTicks(this.generateTicks(10));
    this.scalarBarActor.setDrawAboveRangeSwatch(true);
    this.scalarBarActor.setDrawNanAnnotation(false);
    this.scalarBarActor.setDrawAboveRangeSwatch(false);
    this.scalarBarActor.setBoxPosition([1, 0]);
    // 修改设条颜色
    const ctf = vtkColorTransferFunction.newInstance();
    ctf.addRGBPoint(0.0,0, 1, 154/255.0);
    ctf.addRGBPoint(1.0, 1.0, 165.0/255.0, 0.0);
    ctf.addRGBPoint(2.0, 230/255.0, 0.0, 92.0/225.0);

    // ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
    // ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
    // ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
    // ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
    // ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);

    this.jgMapper.setLookupTable(ctf);
    this.jgActor.setMapper(this.jgMapper);
    const lut = this.jgMapper.getLookupTable();
    this.scalarBarActor.setScalarsToColors(lut);


    //告警数据渲染
    this.gjActor = vtkActor.newInstance();
    this.gjMapper = vtkMapper.newInstance();
    this.gjActor.getProperty().setRepresentation(Representation.SURFACE); //面    
    this.gjscalarBarActor = vtkScalarBarActor.newInstance();
    this.gjscalarBarActor.setGenerateTicks(this.generateTicks(2));
    this.gjscalarBarActor.setDrawAboveRangeSwatch(true);
    this.gjscalarBarActor.setDrawNanAnnotation(false);
    this.gjscalarBarActor.setDrawAboveRangeSwatch(false);
    this.gjscalarBarActor.setBoxPosition([1, 0]);
    this.gjMapper.setLookupTable(vtkLookupTable.newInstance());  
    const gjlut = this.gjMapper.getLookupTable();
    gjlut.setNumberOfColors(parseInt(2, 10));
    // hueRange: [0.0, 0.66667],  //色调范围
    // saturationRange: [1.0, 1.0],//饱和度
    // valueRange: [1.0, 1.0], 
    // alphaRange: [1.0, 1.0], //透明度
    gjlut.setAlphaRange([1,1]);
    gjlut.setValueRange([0.5,1]);
    // gjlut.setHueRange([0.66667,0.0]);//蓝色到红色
    gjlut.setHueRange([0.3375,0.0]);//绿色到红色
    // this.gjscalarBarActor.setScalarsToColors(gjlut);
    this.gjMapper.setInterpolateScalarsBeforeMapping(true);//有无渐变
    this.gjActor.setMapper(this.gjMapper);

    this.ways = [];
    this.wayActors = [];


    //管道位置数据
    const sphereSource = vtkSphereSource.newInstance({
      center: [0, 0, 0],
      radius: 4.0,
    });
    const pipsiteMapper = vtkMapper.newInstance();
    this.actorpipsite = vtkActor.newInstance();
    pipsiteMapper.setInputConnection(sphereSource.getOutputPort());
    this.actorpipsite.setMapper(pipsiteMapper);
    // this.actorpipsite.setPosition(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
    this.actorpipsite.getProperty().setColor(WHITE);

    this.jcdActors = []; //检测点数据
    this.jcreader = vtkPLYReader.newInstance();
    fetchJSFileAsArrayBuffer('src/assets/3d/jiancd.ply').then(arrayBuffer => {
        // 读取PLY数据
        this.jcreader.parseAsArrayBuffer(arrayBuffer);
    });
    this.pnameActors =[];
  
    this.soureActors =[];
    this.soureReader = vtkPLYReader.newInstance();
    fetchJSFileAsArrayBuffer('src/assets/3d/fire.ply').then(arrayBuffer => {
        // 读取PLY数据
        this.soureReader.parseAsArrayBuffer(arrayBuffer);
    });
  }
  
  xyz_back(){ 
    let cam =this.renderer.getActiveCamera();
    cam.setViewUp([0,1,0]);
    cam.setPosition(495544.15625, 5403554.25, 9989.55990464236);//相机位置;
    this.renderer.resetCamera();
    this.renderWindow.render()
  }
  x_up(){
    let cam =this.renderer.getActiveCamera();
    cam.setViewUp([0,0,1]);
    cam.setPosition(495544.15625+5000, 5403554.25, 467.62999725341797);//相机位置;
    this.renderer.resetCamera();
    this.renderWindow.render();
  }
  x_down(){
    let cam =this.renderer.getActiveCamera();
    cam.setViewUp([0,0,1]);
    cam.setPosition(495544.15625+-5000, 5403554.25, 467.62999725341797);//相机位置
    this.renderer.resetCamera();
    this.renderWindow.render();
  }
  y_up(){
    let cam =this.renderer.getActiveCamera();
    cam.setViewUp([0,0,1]);
    cam.setPosition(495544.15625, 5403554.25+5000, 467.62999725341797);//相机位置
    this.renderer.resetCamera();
    this.renderWindow.render();
  }
  y_down(){
    let cam =this.renderer.getActiveCamera();
    cam.setViewUp([0,0,1]);
    cam.setPosition(495544.15625, 5403554.25-5000, 467.62999725341797);//相机位置
    this.renderer.resetCamera();
    this.renderWindow.render();
  }
  z_up(){
    let cam =this.renderer.getActiveCamera();
    cam.setViewUp([0,1,0]);
    cam.setPosition(495544.15625, 5403554.25, 467.62999725341797+5000);//相机位置
    this.renderer.resetCamera();
    this.renderWindow.render();
  }
  z_down(){
    let cam =this.renderer.getActiveCamera();
    cam.setViewUp([0,1,0]);
    cam.setPosition(495544.15625, 5403554.25, 467.62999725341797-5000);//相机位置
    this.renderer.resetCamera();
    this.renderWindow.render();
  }

   //巷道名称
 initPname() {
  fetch('src/assets/3d/pipname.json')
  .then(response => response.json()).then(data => {
      let pipnames  =  data;
        pipnames.forEach((pipname)=>{
          let pnameReader = vtkPLYReader.newInstance();
          fetchJSFileAsArrayBuffer('src/assets/3d/'+pipname.name+'.ply').then(arrayBuffer => {
              // 读取PLY数据
              pnameReader.parseAsArrayBuffer(arrayBuffer);
          });
          const mapper = vtkMapper.newInstance();
          mapper.setInputConnection(pnameReader.getOutputPort());
          const actor = vtkActor.newInstance();
          actor.setPosition(pipname.x,pipname.y,pipname.z);
          actor.getProperty().setColor(TEXTCOLOR);
          actor.setMapper(mapper);
          actor.setScale(20,20,20);//放大
          this.pnameActors.push(actor);
          // this.renderer.addActor(actor);
      });
  }).catch(error => {
    console.error('Error fetching JSON:', error);
  });
}
//显示巷道名称
showPname(){
  this.pnameActors.forEach((actor)=>{
    this.renderer.addActor(actor);
  });
  this.renderWindow.render();
}
//隐藏巷道名称
removePname(){
  this.pnameActors.forEach((actor)=>{
    this.renderer.removeActor(actor);
  });
  this.renderWindow.render();
}

//清空灾源
delSoures(){
  this.removeSoure();
  this.soureActors=[];
}
 //添加一个灾源点
 addSoures(pid,site){
  let pipe =this.pipeByPid(pid);
  let point1 = this.pointByPipeNodeId(pipe.snId);
  let point2 = this.pointByPipeNodeId(pipe.enId);
  let py = site/(1-site);
  let pipsite_point=[
    (point1[0]+py*point2[0])/(1+py),
    (point1[1]+py*point2[1])/(1+py),
    (point1[2]+py*point2[2])/(1+py),
    ] 
    this.initSoure(pipsite_point[0],pipsite_point[1],pipsite_point[2]);
 }
 initSoure(x,y,z) {
  const mapper = vtkMapper.newInstance();
  mapper.setInputConnection(this.soureReader.getOutputPort());
  const actor = vtkActor.newInstance();
  actor.setPosition(x,y,z);
  actor.getProperty().setColor(SOURECOLOR);
  actor.setMapper(mapper);
    // 旋转actor
  actor.rotateY(45);// 绕y轴旋转
  actor.setScale(20,20,20);//放大
  this.soureActors.push(actor);
  // this.renderer.addActor(actor);
 }
 //显示灾源点
showSoure(){
  this.soureActors.forEach((actor)=>{
    this.renderer.addActor(actor);
  });
  this.renderWindow.render();
}
//隐藏灾源点
removeSoure(){
  this.soureActors.forEach((actor)=>{
    this.renderer.removeActor(actor);
  });
  this.renderWindow.render();
}

//初始化监测点
initCheckNodes(checkNodes){
  checkNodes.forEach((checkNode) => {
    let pipe =this.pipeByPid(checkNode.pid);
    let site =checkNode.site;
    let point1 = this.pointByPipeNodeId(pipe.snId);
    let point2 = this.pointByPipeNodeId(pipe.enId);
    let py = site/(1-site);
    let pipsite_point=[
      (point1[0]+py*point2[0])/(1+py),
      (point1[1]+py*point2[1])/(1+py),
      (point1[2]+py*point2[2])/(1+py),
      ] 
      this.initjc(pipsite_point[0],pipsite_point[1],pipsite_point[2]);
  });
}
initjc(x,y,z) {
  const mapper = vtkMapper.newInstance();
  mapper.setInputConnection(this.jcreader.getOutputPort());
  const actor = vtkActor.newInstance();
  actor.setPosition(x,y,z);
  actor.getProperty().setColor(WHITE);
  actor.setMapper(mapper);
  actor.setScale(5,5,5);//放大
  this.jcdActors.push(actor);
}
//显示监测点
showjc(){
  this.jcdActors.forEach((actor)=>{
    
    this.renderer.addActor(actor);
  });
  this.renderWindow.render();
}
//隐藏监测点
removejc(){
  this.jcdActors.forEach((actor)=>{
    this.renderer.removeActor(actor);
  });
  this.renderWindow.render();
}

  //显示所选择巷道位置
  addpipsite(pipe,site){
    let point1 = this.pointByPipeNodeId(pipe.snId);
    let point2 = this.pointByPipeNodeId(pipe.enId);

    let py = site/(1-site);
    let pipsite_point=[
      (point1[0]+py*point2[0])/(1+py),
      (point1[1]+py*point2[1])/(1+py),
      (point1[2]+py*point2[2])/(1+py),
      ] 
    this.actorpipsite.setPosition(pipsite_point);
    this.renderer.addActor(this.actorpipsite);
    this.renderWindow.render();
  }
  
  //移除所选择的巷道位置
  clearpipsite(){
    this.renderer.removeActor(this.actorpipsite);
  }

  waysInit(ways) {
    this.renderWindowWith.resize();
    this.ways = ways;

    this.ways.forEach((way) => {
      let nodes1 = [];
      let nodes2 = [];
      for (let index = 0; index < way.nrows.length - 1; index++) {
        nodes1.push(way.nrows[index]);
      }
      for (let index = 1; index < way.nrows.length; index++) {
        nodes2.push(way.nrows[index]);
      }
      for (let index = 0; index < nodes2.length; index++) {
        const lineSource = vtkLineSource.newInstance();
        let snode = nodes1[index];
        let enode = nodes2[index];
        let point1 = [parseFloat(snode.x), parseFloat(snode.y), parseFloat(snode.z)];
        let point2 = [parseFloat(enode.x), parseFloat(enode.y), parseFloat(enode.z)];
        lineSource.setPoint1(point1);
        lineSource.setPoint2(point2);
        lineSource.setResolution(12);
        const actor = vtkActor.newInstance();
        const mapper = vtkMapper.newInstance();
        actor.setMapper(mapper);
        actor.getProperty().setLineWidth(3);//设置线宽
        if(way.safety=="safety"){
          actor.getProperty().setColor(GREEN);
        }else if(way.safety=="danger"){
          actor.getProperty().setColor(REA);
        }
        const initialValues = {
          base: 0,
          center: point2,
          height: 9,
          radius: 5,
          resolution: 8,
          direction: [
            point2[0]-point1[0],
            point2[1]-point1[1],
            point2[2]-point1[2],
          ]
        };
        const vtk2d = vtkConeSource.newInstance(initialValues);
        const mapper2 = vtkMapper.newInstance();
        mapper2.setInputConnection(vtk2d.getOutputPort());
        const actor2 = vtkActor.newInstance();
        actor2.setMapper(mapper2);
        if(way.safety=="safety"){
          actor2.getProperty().setColor(GREEN);
        }else if(way.safety=="danger"){
          actor2.getProperty().setColor(REA);
        }
        this.wayActors.push(actor2);

        mapper.setInputConnection(lineSource.getOutputPort());
        this.wayActors.push(actor);
      }
    });
    this.wayActors.forEach((wayAcotor) => {
      this.renderer.addActor(wayAcotor);
    });
      // vtkmodel.renderer.resetCamera();
    vtkmodel.renderWindow.render();
  }

  initMode(rootContainer) {
    this.renderWindowWith = vtkGenericRenderWindow.newInstance();
    this.renderWindowWith.setContainer(rootContainer);
    this.renderer = this.renderWindowWith.getRenderer();
    this.renderer.setBackground(0.0, 0.0, 0.0, 0.0)
    this.renderWindow = this.renderWindowWith.getRenderWindow();

    //选取
    this.lastActor = null;
    this.nodeActors = []; //节点actor 数据
    this.pipeActors = []; //管道actor 数据
    this.interactor = this.renderer.getRenderWindow().getInteractor();
    this.apiSpecificRenderWindow = this.interactor.getView();
    this.hardwareSelector = this.apiSpecificRenderWindow.getSelector();
    this.hardwareSelector.setCaptureZValues(true);
    // this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_POINTS);
    this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_CELLS);

    // document.addEventListener("mousemove", throttleMouseHandler);
   
      document.addEventListener('contextmenu', throttleMouseHandler,function(e){
        e.preventDefault();
        // throttleMouseHandler
      })
 
 
   


    // //箭头
    this.arrowActors = []; 
    // const viewColors = [
    //   [1, 0, 0], // sagittal
    //   [0, 1, 0], // coronal
    //   [0, 0, 1], // axial
    //   [0.5, 0.5, 0.5], // 3D
    // ];
    // // create axes
    // const axes = vtkAnnotatedCubeActor.newInstance();
    // axes.setDefaultStyle({
    //   text: '+X',
    //   fontStyle: 'bold',
    //   fontFamily: 'Arial',
    //   fontColor: 'black',
    //   fontSizeScale: (res) => res / 2,
    //   faceColor: createRGBStringFromRGBValues(viewColors[0]),
    //   faceRotation: 0,
    //   edgeThickness: 0.1,
    //   edgeColor: 'black',
    //   resolution: 400,
    // });
    // // axes.setXPlusFaceProperty({ text: '+X' });
    // axes.setXMinusFaceProperty({
    //   text: '-X',
    //   faceColor: createRGBStringFromRGBValues(viewColors[0]),
    //   faceRotation: 90,
    //   fontStyle: 'italic',
    // });
    // axes.setYPlusFaceProperty({
    //   text: '+Y',
    //   faceColor: createRGBStringFromRGBValues(viewColors[1]),
    //   fontSizeScale: (res) => res / 4,
    // });
    // axes.setYMinusFaceProperty({
    //   text: '-Y',
    //   faceColor: createRGBStringFromRGBValues(viewColors[1]),
    //   fontColor: 'white',
    // });
    // axes.setZPlusFaceProperty({
    //   text: '+Z',
    //   faceColor: createRGBStringFromRGBValues(viewColors[2]),
    // });
    // axes.setZMinusFaceProperty({
    //   text: '-Z',
    //   faceColor: createRGBStringFromRGBValues(viewColors[2]),
    //   faceRotation: 45,
    // });


    // // const vtkAxesActor = vtkAxesActor.newInstance();
    //   // create orientation widget
    // this.orientationWidget = vtkOrientationMarkerWidget.newInstance({
    //   actor: axes,
    //   interactor: this.renderWindow.getInteractor(),
    // });
    // this.orientationWidget.setEnabled(true);
    // this.orientationWidget.setViewportCorner(
    //   vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT
    // );
    // this.orientationWidget.setViewportSize(0.15);
    // this.orientationWidget.setMinPixelSize(100);
    // this.orientationWidget.setMaxPixelSize(300);
  }
  generateTicks(numberOfTicks) {
    return (helper) => {
      const lastTickBounds = helper.getLastTickBounds();
      // compute tick marks for axes
      const scale = d3
        .scaleLinear()
        .domain([0.0, 1.0])
        .range([lastTickBounds[0], lastTickBounds[1]]);
      const samples = scale.ticks(numberOfTicks);
      const ticks = samples.map((tick) => scale(tick));
      // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
      formatDefaultLocale({ minus: "\u002D" });
      const format = scale.tickFormat(ticks[0], ticks[ticks.length - 1], numberOfTicks);
      const tickStrings = ticks
        .map(format)
        .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
      helper.setTicks(ticks);
      helper.setTickStrings(tickStrings);
    };
  }


  //添加箭头
  addArrow(velocitys) {
    this.clearArrow();
    this.arrowActors = [];
    velocitys.forEach(velocity => {
      velocity.points.forEach(point => {
        // const initialValues = { 
        //   base:0,
        //   shape: 'arrow4points',
        //   center: [point.x,point.y,point.z],
        //   direction:[
        //     velocity.vector[2],
        //     velocity.vector[0],
        //     velocity.vector[1]
        //   ],
        //   height: 10.0,
        //   thickness: 1.5,
        //   width: 3,
        //  };
        // const vtk2d = vtk2DShape.newInstance(initialValues);

        const initialValues = {
          // base: 0,
          center: [point.x, point.y, point.z],
          // height: 10,
          // radius: 3,
          // resolution: 6,
          height: 10.0,
          radius:2,
          resolution: 6,
          direction: [
            // velocity.vector[2],
            // velocity.vector[0],
            // velocity.vector[1]
            velocity.vector[0],
            velocity.vector[1],
            velocity.vector[2]
          ],
          capping: true,

        };
        const vtk2d = vtkConeSource.newInstance(initialValues);

        const mapper = vtkMapper.newInstance();
        mapper.setInputConnection(vtk2d.getOutputPort());
        const actor = vtkActor.newInstance();
        actor.setMapper(mapper);
        actor.getProperty().setColor(REA);
        this.arrowActors.push(actor);
        // this.renderer.addActor(actor);
      })
    });
    for (let index = 0; index < this.arrowActors.length; index=index+30) {
      let actor =this.arrowActors[index];
      this.renderer.addActor(actor);
     };
    this.renderWindow.render();
  }
  clearArrow() {
    if (this.arrowActors) {
      this.arrowActors.forEach(actor => {
        this.renderer.removeActor(actor);
      });
    }
  }




  modelInit(validNodes, pipes) {
    this.renderWindowWith.resize();
    this.validNodes = validNodes;
    this.pipes = pipes;
    this.modelCreate();
  }
  modelCreate() {
    console.log("modelInit..");
    
    const points = this.polyData.getPoints();
    const lines = this.polyData.getLines();

    //无节点actor
    this.validNodes.forEach((node) => {
      points.insertNextPoint(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
    });
    //无管道actor
    this.pipes.forEach((pipe) => {
      let sid = this.indexIdByPipeNodeId(pipe.snId);
      let eid = this.indexIdByPipeNodeId(pipe.enId);
      lines.insertNextCell([sid, eid]);
    });

    //有节点actors
    const sphereSource = vtkSphereSource.newInstance({
      center: [0, 0, 0],
      radius: 4.0,
    });
    const mapper = vtkMapper.newInstance();
    mapper.setInputConnection(sphereSource.getOutputPort());
    this.validNodes.forEach((node) => {
      const actor = vtkActor.newInstance();
      actor.setMapper(mapper);
      actor.setPosition(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
      actor.getProperty().setColor(WHITE);
      const nodeActor = {};
      nodeActor.node = node;
      nodeActor.actor = actor;
      this.nodeActors.push(nodeActor);
    });

    //有管道actors
    this.pipes.forEach((pipe) => {
      const lineSource = vtkLineSource.newInstance();
      let point1 = this.pointByPipeNodeId(pipe.snId);
      let point2 = this.pointByPipeNodeId(pipe.enId);
      lineSource.setPoint1(point1);
      lineSource.setPoint2(point2);
      lineSource.setResolution(12);
      const actor = vtkActor.newInstance();
      const mapper = vtkMapper.newInstance();
      actor.setMapper(mapper);
      actor.getProperty().setLineWidth(3);//设置线宽
      actor.getProperty().setColor(WHITE);
      mapper.setInputConnection(lineSource.getOutputPort());
      const pipeActor = {};
      pipeActor.pipe = pipe;
      pipeActor.actor = actor;
      this.pipeActors.push(pipeActor);
    });

    this.modelShow();
    this.renderer.resetCamera();
    const cam = this.renderer.getActiveCamera();


    console.log("透视或平行相机", cam.getParallelProjection());
    // cam.setParallelProjection(true);
    //  console.log("透视或平行相机",cam.getParallelProjection());
    console.log("水平视角使用", cam.getUseHorizontalViewAngle());
    // cam.setUseHorizontalViewAngle(true);
    console.log("平行位置投影比例", cam.getParallelScale());
    // cam.setParallelScale(600);
    console.log("窗口中心位置", cam.getWindowCenter());//[0, 0]
    //  cam.setWindowCenter([1,-1]);
    console.log("相机视角", cam.getViewAngle());//30
    // cam.setViewAngle(90);

    console.log("摄像头位置", cam.getPosition());//[495544.15625, 5403554.25, 9989.55990464236]
    // cam.setPosition(495544.15625, 5403554.25, 9989.55990464236);
    console.log("相机焦点", cam.getFocalPoint());// [495544.15625, 5403554.25, 467.62999725341797]
    // cam.setFocalPoint(495544.15625, 5403554.25, 467.62999725341797);
    console.log("相机方向", cam.getViewUp());//[0,1,0]
    // cam.setViewUp([0,1,1]);
    console.log("近远平面", cam.getClippingRange());// [9141.491986233214, 9913.53967078369]
    // cam.setClippingRange(9241.491986233214,9300.53967078369);
  
    //设置环境光和光照
    const light = vtkLight.newInstance();
    light.setColor(1.0, 1.0, 1.0); // 白色环境光
    light.setIntensity(3.0); // 强度为1.0
    this.renderer.addLight(light);

    // this.renderer.resetCamera();
    // cam.setPosition(0, 0, 9989); 
    //相机焦点 495544.15625  5403554.25  467.62999725341797
    // cam.setPosition( 495544.15625+500, 5403554.25, 467.62999725341797); 
    // cam.setPosition( 495544.15625-500, 5403554.25, 467.62999725341797); 
    // cam.setViewUp([0,0,1]);
    // this.renderer.updateCamera();
  }



  modelClearShow() {
    this.renderer.removeActor(this.actor);
    this.renderer.removeActor(this.actor2);
    this.nodeActors.forEach((nodeActor) => {
      this.renderer.removeActor(nodeActor.actor);
    });
    this.pipeActors.forEach((pipeActor) => {
      this.renderer.removeActor(pipeActor.actor);
    });
  }
  wayClearShow(){
    this.wayActors.forEach((wayAcotor) => {
      this.renderer.removeActor(wayAcotor);
    });
  }
  modelShow() {
    this.modelClearShow();
  
    if (!this.isSelectNode) {//不选择节点
      this.renderer.addActor(this.actor2);
    }
    if (!this.isSelectPipe) {//不选择管道
      this.renderer.addActor(this.actor);
    }
    if (this.isSelectNode) {//选择节点
      this.nodeActors.forEach((nodeActor) => {
        this.renderer.addActor(nodeActor.actor);
      });
    }
    if (this.isSelectPipe) {//选择管道
      this.pipeActors.forEach((pipeActor) => {
        this.renderer.addActor(pipeActor.actor);
      });
    }
    // this.addjc(495530.903,5403828.821,432.40);
    // this.addpname(495530.903,5403829.821,432.40);
    // this.addSoure(495530.903,5403829.821,432.40);
    // this.addpname(495530.903,5403829.821,432.40);
    this.initPname();
    this.renderer.addActor(this.axesActor);
    // this.rotateY();
  }


  selectNodes() {
    this.isSelectNode = true;
    this.isSelectPipe = false;
    this.modelShow();
    document.addEventListener("mousemove", throttleMouseHandler);
    this.renderWindow.render();
  }
  selectPipes() {
    this.isSelectNode = false;
    this.isSelectPipe = true;
     document.addEventListener("mousemove", throttleMouseHandler);
    this.modelShow();
    this.renderWindow.render();
  }
  selectNoting() {
    this.isSelectNode = false;
    this.isSelectPipe = false;
    this.modelShow();
    this.renderWindow.render();
  }
  /**
 * 根据id 获取对应的编号
 */
  indexIdByPipeNodeId(nid) {
    for (let index = 0; index < this.validNodes.length; index++) {
      const node = this.validNodes[index];
      if (node.id == nid) {
        return index;
      }
    }
    return 0;
  }
  pipeByPid(pid) {
    console.log("pipeByPid",this.pipes.length)
    for (let index = 0; index < this.pipes.length; index++) {
      const pipe = this.pipes[index];
      if (pipe.id == pid) {
       return pipe;
      }
    }
  }
  pointByPipeNodeId(nid) {
    for (let index = 0; index < this.validNodes.length; index++) {
      const node = this.validNodes[index];
      if (node.id == nid) {
        return [parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)];
      }
    }
    return 0;
  }

  clearAllShowGj() {
    this.renderer.addActor(this.gjActor);
    this.renderer.addActor(this.gjscalarBarActor);
    this.renderer.removeActor(this.jgActor);
    this.renderer.removeActor(this.scalarBarActor);
    this.isSelectNode = false;
    this.isSelectPipe = false;
    this.wayClearShow();
    this.modelClearShow();
    this.isJg = true; //显示结果
    document.removeEventListener("mousemove", throttleMouseHandler);
  }

  clearModeAddJg() {
    this.renderer.addActor(this.jgActor);
    this.renderer.addActor(this.scalarBarActor);
    this.isSelectNode = false;
    this.isSelectPipe = false;
    this.renderer.removeActor(this.gjActor);
    this.renderer.removeActor(this.gjscalarBarActor)
    this.wayClearShow();
    this.modelClearShow();
    this.isJg = true; //显示结果
    document.removeEventListener("mousemove", throttleMouseHandler);
  }
  clearJgAddMode() {
    this.renderer.removeActor(this.scalarBarActor);
    this.renderer.removeActor(this.jgActor);
    this.renderer.removeActor(this.gjActor);
    this.renderer.removeActor(this.gjscalarBarActor)
    this.clearArrow();
    this.modelShow();
    this.wayClearShow();
    this.isJg = false; //不显示结果
  }
  clearAll() {
    this.renderer.removeActor(this.jgActor);
    this.renderer.removeActor(this.scalarBarActor);
    this.renderer.removeActor(this.gjActor);
    this.renderer.removeActor(this.gjscalarBarActor)
    this.clearArrow();
    this.modelClearShow();
    this.wayClearShow();
    this.renderWindow.render();
  }


  //选中指定点
  selectByNodeId(nid) {
    console.log("selectByNodeId", nid);
    if (this.isSelectNode) {
      if (this.lastActor != null) {
        this.lastActor.getProperty().setColor(WHITE);
      }
      this.nodeActors.forEach(nodeActor => {
        if (nid == nodeActor.node.id) {
          nodeActor.actor.getProperty().setColor(GREEN);

          this.renderWindow.render();
          this.lastActor = nodeActor.actor;
          this.selectObj = nodeActor.node;
          return;
        }
      });
    }
  }
  //选中指定管道
  selectByPipeId(pid) {
    console.log("selectByPipeId", pid);
    if (this.isSelectPipe) {
      if (this.lastActor != null) {
        this.lastActor.getProperty().setColor(WHITE);
      }
      this.pipeActors.forEach(pipeActor => {
        if (pid == pipeActor.pipe.id) {
          pipeActor.actor.getProperty().setColor(GREEN);
          this.renderWindow.render();
          this.lastActor = pipeActor.actor;
          this.selectObj = pipeActor.node;
          return;
        }
      });
    }
  }
}
function createRGBStringFromRGBValues(rgb) {
  if (rgb.length !== 3) {
    return 'rgb(0, 0, 0)';
  }
  return `rgb(${(rgb[0] * 255).toString()}, ${(rgb[1] * 255).toString()}, ${(
    rgb[2] * 255
  ).toString()})`;
}
function pickOnMouseEvent(event) {
  if (vtkmodel.interactor.isAnimating()) {
    // We should not do picking when interacting with the scene
    return;
  }
  const [x, y] = eventToWindowXY(event);
  // console.log([x,y]);
  // if(!vtkmodel.getPointData){//没有数据
  //   return ;
  // }
  // console.log(vtkmodel.hardwareSelector.getPointData());
  // if(!vtkmodel.renderer.getActors().size==0){
  //   return;
  // }
  vtkmodel.hardwareSelector
    .getSourceDataAsync(vtkmodel.renderer, x, y, x, y)
    .then((result) => {
      if (result) {
        processSelections(result.generateSelection(x, y, x, y));
        // processSelections(result.generateSelection(x, y, x, y));
      } else {
        // processSelections(null);
      }
    });
}
function eventToWindowXY(event) {
  // We know we are full screen => window.innerXXX
  // Otherwise we can use pixel device ratio or else...
  var left = event.pageX ;
  var top = event.pageY ;
  vtkmodel.epageX=left;
  vtkmodel.epageY=top;
  const { clientX, clientY } = event;

  const [width, height] = vtkmodel.apiSpecificRenderWindow.getSize();
  const x = Math.round((width * clientX) / window.innerWidth);
  const y = Math.round(height * (1 - clientY / window.innerHeight)); // Need to flip Y
 // console.log(x,y)
  return [x, y];


}
function processSelections(selections) {
  if (!selections || selections.length === 0) {//没有选择
    if (vtkmodel.lastActor == null) {

    } else {
      // vtkmodel.lastActor.getProperty().setColor(WHITE);
      // vtkmodel.renderWindow.render();
    }
    // vtkmodel.lastActor = null;
    return;
  }

  const {
    worldPosition: rayHitWorldPosition,
    compositeID,
    prop,
    propID,
    attributeID,
  } = selections[0].getProperties();
  if (vtkmodel.lastActor != null) {
    vtkmodel.lastActor.getProperty().setColor(WHITE);
    vtkmodel.renderWindow.render();
  }
  vtkmodel.nodeActors.forEach((nodeActor) => {
    if (prop == nodeActor.actor) {
      vtkmodel.selectObj = nodeActor.node;
      prop.getProperty().setColor(GREEN);
      vtkmodel.lastActor = prop;
      // console.log(vtkmodel.selectObj );
    }
  });
  vtkmodel.pipeActors.forEach((pipeActor) => {
    if (prop == pipeActor.actor) {
      vtkmodel.selectObj = pipeActor.pipe;
      prop.getProperty().setColor(GREEN);
      vtkmodel.lastActor = prop;
      // console.log(vtkmodel.selectObj );
    }
  });

  if (vtkmodel.isJg) {//结果数据选择cell
    if (vtkmodel.hardwareSelector.getFieldAssociation() ===
      FieldAssociations.FIELD_ASSOCIATION_POINTS) {//选择点

    } else {
      //选择Cell
      const input = prop.getMapper().getInputData();
      if (!input.getCells()) {
        input.buildCells();
        // return;
      }
      const cellPoints = input.getCellPoints(attributeID);
      if (cellPoints) {
        const pointIds = cellPoints.cellPointIds;
        // Find the closest cell point, and use that as cursor position
        const points = Array.from(pointIds).map((pointId) =>
          input.getPoints().getPoint(pointId)
        );
        const scalarDataArray = input.getPointData().getScalars().getData();
        console.log(scalarDataArray[pointIds[0]]);//节点标量数据
        
        // pointIds.forEach(pointId=>{
        //   console.log(input.getPointData().getScalars().getName());
        //   console.log(scalarDataArray[pointId]);//节点标量数据
        // });
        vtkmodel.selectJgPointId = pointIds[0];
      }
    }

  } else {
    vtkmodel.renderWindow.render();
  }



}

// 异步函数，用于读取JS文件并转换为ArrayBuffer
async function fetchJSFileAsArrayBuffer(url) {
  try {
      // 使用fetch API异步加载JS文件
      const response = await fetch(url, {
          method: 'GET',
          responseType: 'arraybuffer'  // 指定响应类型为arraybuffer
      });

      // 确保响应成功
      if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
      }

      // 获取ArrayBuffer对象
      const arrayBuffer = await response.arrayBuffer();

      // 可选：验证转换后的ArrayBuffer内容
      const decoder = new TextDecoder();  // 使用TextDecoder将ArrayBuffer解码为字符串
      const content = decoder.decode(arrayBuffer);
      // console.log('File content:', content);

      return arrayBuffer;
  } catch (error) {
      console.error('Error fetching the file:', error);
      throw error;  // 重新抛出错误以便上层处理
  }
}

const throttleMouseHandler = throttle(pickOnMouseEvent, 20);
const WHITE = [1, 0.2, 1];
const GREEN = [0.1, 0.8, 0.1];
const REA = [1, 0, 0];

const JCDCOLOR = [0.5, 0, 0];
const SOURECOLOR = [0.5, 0.5, 0];
const TEXTCOLOR = [1, 1, 1];

const vtkmodel = new VtkModel();
export { vtkmodel };