UNPKG

react-vtk-js

Version:

React based declarative vtk.js visualization pipeline

2 lines (1 loc) 14 kB
import e from"../node_modules/@babel/runtime/helpers/esm/slicedToArray.js";import t from"../node_modules/@babel/runtime/helpers/esm/defineProperty.js";import r from"../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js";import o from"../node_modules/@babel/runtime/helpers/esm/classCallCheck.js";import n from"../node_modules/@babel/runtime/helpers/esm/createClass.js";import i from"../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js";import s from"../node_modules/@babel/runtime/helpers/esm/inherits.js";import a from"../node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js";import l from"../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js";import c,{Component as d}from"react";import u from"prop-types";import{debounce as p}from"../node_modules/@kitware/vtk.js/macros.js";import m from"../node_modules/@kitware/vtk.js/Rendering/OpenGL/RenderWindow.js";import h from"../node_modules/@kitware/vtk.js/Rendering/Core/RenderWindow.js";import f from"../node_modules/@kitware/vtk.js/Rendering/Core/RenderWindowInteractor.js";import v from"../node_modules/@kitware/vtk.js/Rendering/Core/Renderer.js";import b from"../node_modules/@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator.js";import g from"../node_modules/@kitware/vtk.js/Common/DataModel/BoundingBox.js";import w from"../node_modules/@kitware/vtk.js/Rendering/Core/CubeAxesActor.js";import y from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballMultiRotateManipulator.js";import k from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator.js";import C from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballRollManipulator.js";import R from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballRotateManipulator.js";import M from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomManipulator.js";import j from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator.js";import P from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/GestureCameraManipulator.js";import S from"../node_modules/@kitware/vtk.js/Interaction/Manipulators/MouseBoxSelectorManipulator.js";import W from"../node_modules/@kitware/vtk.js/Rendering/OpenGL/HardwareSelector.js";import{FieldAssociations as A}from"../node_modules/@kitware/vtk.js/Common/DataModel/DataSet/Constants.js";function I(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function O(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?I(Object(o),!0).forEach((function(r){t(e,r,o[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):I(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function T(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=l(e);if(t){var n=l(this).constructor;r=Reflect.construct(o,arguments,n)}else r=o.apply(this,arguments);return a(this,r)}}var x=c.createContext(null),E=c.createContext(null),B=c.createContext(null),_=c.createContext(null),D=c.createContext(null),V={None:null,Pan:k,Zoom:M,Roll:C,Rotate:R,MultiRotate:y,ZoomToMouse:j,Select:S};var U={position:"absolute",width:"100%",height:"100%",overflow:"hidden"},z=function(a){s(u,d);var l=T(u);function u(n){var s;o(this,u),(s=l.call(this,n)).containerRef=c.createRef(),s.renderWindow=h.newInstance(),s.renderer=v.newInstance(),s.renderWindow.addRenderer(s.renderer),s.camera=s.renderer.getActiveCamera(),s.openglRenderWindow=m.newInstance(),s.renderWindow.addView(s.openglRenderWindow),n.interactive&&(s.interactor=f.newInstance(),s.interactor.setView(s.openglRenderWindow),s.interactor.initialize(),s.style=b.newInstance(),s.interactor.setInteractorStyle(s.style)),s.selector=W.newInstance({captureZValues:!0}),s.selector.setFieldAssociation(A.FIELD_ASSOCIATION_POINTS),s.selector.attach(s.openglRenderWindow,s.renderer),s.resizeObserver=new ResizeObserver((function(){return s.onResize()})),s.renderView=function(){s.updateCubeBounds(),s.renderWindow.render()},s.resetCamera=s.resetCamera.bind(i(s));var a=g.newInstance({bounds:[0,0,0,0,0,0]});s.updateCubeBounds=function(){if(s.props.showCubeAxes){a.reset();for(var e=s.renderer.get("props").props,t=0;t<e.length;t++){var o=e[t];o.getVisibility()&&o.getUseBounds()&&o!==s.cubeAxes&&a.addBounds.apply(a,r(o.getBounds()))}s.cubeAxes.setDataBounds(a.getBounds())}},s.debouncedCubeBounds=p(s.updateCubeBounds,50),s.hasFocus=!1,s.handleKey=function(e){if(s.hasFocus&&"KeyR"===e.code)s.resetCamera()},s.onEnter=function(){s.hasFocus=!0},s.onLeave=function(){s.hasFocus=!1};var d=function(e,r,o,n){var i=o.x,a=o.y;if(-1!==s.props.pickingModes.indexOf(r)){var l=s.getPointerSizeTolerance(),c=s.pick(Math.floor(i-l),Math.floor(a-l),Math.ceil(i+l),Math.ceil(a+l),!1);e&&e(c[0],n),"setProps"in s.props&&s.props.setProps(t({},"".concat(r,"Info"),c[0]))}};s.hover=p((function(e,t){var r=e.x,o=e.y;if(-1!==s.props.pickingModes.indexOf("hover")){var n=s.getPointerSizeTolerance(),i=s.pick(Math.floor(r-n),Math.floor(o-n),Math.ceil(r+n),Math.ceil(o+n),!1);0===s.lastSelection.length&&0===i.length||(s.lastSelection=i,s.props.onHover&&s.props.onHover(i[0],t),"setProps"in s.props&&s.props.setProps({hoverInfo:i[0]}))}}),10);return s.onClick=function(e){return d(s.props.onClick,"click",s.getScreenEventPositionFor(e),e)},s.onMouseDown=function(e){return d(s.props.onMouseDown,"mouseDown",s.getScreenEventPositionFor(e),e)},s.onMouseUp=function(e){return d(s.props.onMouseUp,"mouseUp",s.getScreenEventPositionFor(e),e)},s.onMouseMove=function(e){return s.hover(s.getScreenEventPositionFor(e),e)},s.lastSelection=[],s.onBoxSelectChange=function(t){var r=t.selection;if(-1!==s.props.pickingModes.indexOf("select")){var o=e(r,4),n=o[0],i=o[1],a=o[2],l=o[3],c=s.pick(n,a,i,l,!0);s.props.onSelect&&s.props.onSelect(c,event),"setProps"in s.props&&s.props.setProps({selectInfo:c})}},s.cubeAxes=w.newInstance({visibility:!1,dataBounds:[-1,1,-1,1,-1,1]}),s.cubeAxes.getActors().forEach((function(e){return(0,e.setVisibility)(!1)})),s.cubeAxes.setCamera(s.camera),s.renderer.addActor(s.cubeAxes),s.subscriptions=[],s.subscriptions.push(s.renderer.onEvent((function(e){var t=e.type;e.renderer&&"ComputeVisiblePropBoundsEvent"===t&&s.debouncedCubeBounds()}))),s}return n(u,[{key:"getPointerSizeTolerance",value:function(){return this.props.pointerSize/2}},{key:"getScreenEventPositionFor",value:function(t){var r=this.containerRef.current.getBoundingClientRect(),o=this.openglRenderWindow.getSize(),n=e(o,2),i=n[0],s=n[1],a=i/r.width,l=s/r.height;return{x:a*(t.clientX-r.left),y:l*(r.height-t.clientY+r.top),z:0}}},{key:"render",value:function(){var e=this.props,t=e.id,r=e.children,o=e.style,n=e.className;return c.createElement("div",{key:t,id:t,className:n,style:O({position:"relative"},o),onMouseEnter:this.onEnter,onMouseLeave:this.onLeave,onClick:this.onClick,onMouseUp:this.onMouseUp,onMouseMove:this.onMouseMove},c.createElement("div",{style:U,ref:this.containerRef}),c.createElement("div",null,c.createElement(x.Provider,{value:this},r)))}},{key:"onResize",value:function(){var e=this.containerRef.current;if(e){var t=window.devicePixelRatio||1,r=e.getBoundingClientRect(),o=r.width,n=r.height,i=Math.floor(o*t),s=Math.floor(n*t);this.openglRenderWindow.setSize(Math.max(i,10),Math.max(s,10)),this.renderWindow.render()}}},{key:"componentDidMount",value:function(){var e=this,t=this.containerRef.current;this.openglRenderWindow.setContainer(t),this.props.interactive&&this.interactor.bindEvents(t),this.onResize(),this.resizeObserver.observe(t),this.update(this.props),document.addEventListener("keyup",this.handleKey),this.resetCamera(),this.firstResetTimeout=setTimeout((function(){return e.resetCamera()}),100)}},{key:"componentDidUpdate",value:function(e,t,r){this.update(this.props,e)}},{key:"componentWillUnmount",value:function(){for(this.debouncedCubeBounds&&this.debouncedCubeBounds.cancel(),this.hover&&this.hover.cancel(),clearTimeout(this.resetCameraTimeout),clearTimeout(this.renderViewTimeout),clearTimeout(this.firstResetTimeout);this.subscriptions.length;)this.subscriptions.pop().unsubscribe();document.removeEventListener("keyup",this.handleKey),this.resizeObserver.disconnect(),this.resizeObserver=null,this.interactor&&this.interactor.unbindEvents(),this.openglRenderWindow.setContainer(null),this.renderWindow.removeRenderer(this.renderer),this.renderWindow.removeView(this.openglRenderWindow),this.interactor&&(this.interactor.delete(),this.interactor=null),this.renderer.delete(),this.renderer=null,this.renderWindow.delete(),this.renderWindow=null,this.openglRenderWindow.delete(),this.openglRenderWindow=null}},{key:"update",value:function(e,t){var r,o,n,i=e.background,s=e.interactorSettings,a=e.interactive,l=e.cameraPosition,c=e.cameraViewUp,d=e.cameraParallelProjection,u=e.triggerRender,p=e.triggerResetCamera,m=e.showCubeAxes,h=e.cubeAxesStyle;(!i||t&&i===t.background||this.renderer.setBackground(i),!a||!s||t&&s===t.interactorSettings||(r=this.style,o=s,n=this,r.removeAllMouseManipulators(),o.forEach((function(e){var t=V[e.action];if(t){var o=e.button,i=e.shift,s=e.control,a=e.alt,l=e.scrollEnabled,c=e.dragEnabled,d=e.useWorldUpVec,u=e.worldUpVec,p=e.useFocalPointAsCenterOfRotation,m=e.zoomScale,h=t.newInstance();h.setButton(o),h.setShift(!!i),h.setControl(!!s),h.setAlt(!!a),void 0!==l&&h.setScrollEnabled(l),void 0!==c&&h.setDragEnabled(c),r.addMouseManipulator(h),h.onBoxSelectChange&&n.onBoxSelectChange&&h.onBoxSelectChange(n.onBoxSelectChange),void 0!==d&&h.setUseWorldUpVec(d),void 0!==u&&h.setWorldUpVec(u),void 0!==p&&h.setUseFocalPointAsCenterOfRotation(p),void 0!==m&&h.setZoomScale(m)}})),r.addGestureManipulator(P.newInstance())),!d||t&&d===t.cameraParallelProjection)||(this.renderer.getActiveCamera().setParallelProjection(d),t&&this.resetCamera());!l||t&&JSON.stringify(l)===JSON.stringify(t.cameraPosition)||(this.renderer.getActiveCamera().set({position:l,viewUp:c,focalPoint:[0,0,0]}),t&&this.resetCamera());this.cubeAxes.setVisibility(m)&&(this.cubeAxes.getActors().forEach((function(e){return(0,e.setVisibility)(m)})),this.renderView()),this.cubeAxes.set(h||{})&&this.renderView(),t&&u!==t.triggerRender&&(this.renderViewTimeout=setTimeout(this.renderView,0)),t&&p!==t.triggerResetCamera&&(this.resetCameraTimeout=setTimeout(this.resetCamera,0)),this.openglRenderWindow.getCanvas().addEventListener("mousedown",this.onMouseDown)}},{key:"resetCamera",value:function(){this.renderer.resetCamera(),this.props.interactive&&this.style.setCenterOfRotation(this.renderer.getActiveCamera().getFocalPoint()),this.renderWindow.render()}},{key:"pick",value:function(e,t,r,o){var n=this,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];if(this.selector.setArea(e,t,r,o),this.previousSelectedData=null,this.selector.captureBuffers()){if(this.selections=this.selector.generateSelection(e,t,r,o)||[],i){var s=[Array.from(this.openglRenderWindow.displayToWorld(e,t,0,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(r,t,0,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(r,o,0,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(e,o,0,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(e,t,1,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(r,t,1,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(r,o,1,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(e,o,1,this.renderer))],a=[];return this.selections.forEach((function(e){var t=e.getProperties().prop,r=null==t?void 0:t.get("representationId").representationId;r&&a.push(r)})),{frustrum:s,representationIds:a}}var l=[Array.from(this.openglRenderWindow.displayToWorld(Math.round((e+r)/2),Math.round((t+o)/2),0,this.renderer)),Array.from(this.openglRenderWindow.displayToWorld(Math.round((e+r)/2),Math.round((t+o)/2),1,this.renderer))];return this.selections.map((function(e){var t=e.getProperties(),r=t.prop,o=t.compositeID,i=t.displayPosition;return null!=r&&O(O({worldPosition:Array.from(n.openglRenderWindow.displayToWorld(i[0],i[1],i[2],n.renderer)),displayPosition:i,compositeID:o},r.get("representationId")),{},{ray:l})})).filter(Boolean)}return[]}}]),u}();z.defaultProps={style:{width:"100%",height:"100%"},background:[.2,.3,.4],cameraPosition:[0,0,1],cameraViewUp:[0,1,0],cameraParallelProjection:!1,triggerRender:0,triggerResetCamera:0,interactorSettings:[{button:1,action:"Rotate"},{button:2,action:"Pan"},{button:3,action:"Zoom",scrollEnabled:!0},{button:1,action:"Pan",alt:!0},{button:1,action:"Zoom",control:!0},{button:1,action:"Select",shift:!0},{button:1,action:"Roll",alt:!0,shift:!0}],interactive:!0,pickingModes:[],showCubeAxes:!1,pointerSize:0},z.propTypes={id:u.string,style:u.object,className:u.string,background:u.array,interactorSettings:u.array,interactive:u.bool,cameraPosition:u.array,cameraViewUp:u.array,cameraParallelProjection:u.bool,triggerRender:u.number,triggerResetCamera:u.number,children:u.oneOfType([u.arrayOf(u.node),u.node]),pickingModes:u.arrayOf(u.oneOf(["click","hover","select","mouseDown","mouseUp"])),onClick:u.func,clickInfo:u.object,onMouseDown:u.func,mouseDownInfo:u.object,onMouseUp:u.func,mouseUpInfo:u.object,onHover:u.func,hoverInfo:u.object,onSelect:u.func,selectInfo:u.object,pointerSize:u.number,showCubeAxes:u.bool,cubeAxesStyle:u.object};export{B as DataSetContext,D as DownstreamContext,_ as FieldsContext,E as RepresentationContext,x as ViewContext,z as default};