Block.js

"use strict";function getElementCenter(t){const e=t.getBoundingClientRect(),s=t.parentElement.parentElement.parentElement.parentElement.getBoundingClientRect();return{x:e.x-s.x+e.width/2,y:e.y-s.y+e.height/2}}function getElementRelativeCenter(t){const e=t.getBoundingClientRect();return{x:e.width/2,y:e.height/2}}class Block extends preact.Component{constructor(t){super();t.getTypeInfo(t.type);this.state={const_id:t.const_id,id:t.id,type:t.type,x:t.x,y:t.y,scale:t.scale,handleMouseDown:t.handleMouseDown,handleMouseMove:t.handleMouseMove,dragging:t.dragging||!1,initital_dragging:t.dragging||!1,gripX:void 0,gripY:void 0,inputs:t.inputs||t.type_info.inputs,outputs:t.outputs||t.type_info.outputs,inputs_groups:[...t.inputs_groups||t.type_info.inputs_groups],outputs_groups:[...t.outputs_groups||t.type_info.outputs_groups],onStateChange:t.onStateChange,onMount:t.onMount,onStopInitialDragging:t.onStopInitialDragging,removeBlock:t.removeBlock,startAddingWire:t.startAddingWire,handleMouseUpOnInputOutput:t.handleMouseUpOnInputOutput,removeWires:t.removeWires,wireHere:t.wireHere,updateInputsOutputsNames:t.updateInputsOutputsNames},this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDownOnInputOutput=this.handleMouseDownOnInputOutput.bind(this),this._ref=preact.createRef(),this.input_connectors_refs=Array(Object.keys(this.state.inputs).length).fill(void 0).map((t=>preact.createRef())),this.output_connectors_refs=Array(this.state.outputs.length).fill(void 0).map((t=>preact.createRef()))}getInfo(t){return null==t&&(t=this.state),{getInputsGroups:(()=>this.state.inputs_groups).bind(this),getOutputsGroups:(()=>this.state.outputs_groups).bind(this),setId:(t=>this.state.id=t).bind(this),getInfo:this.getInfo.bind(this),type:t.type,id:t.id,const_id:t.const_id,x:t.x,y:t.y,inputs:t.inputs,outputs:t.outputs,outputs_groups:t.outputs_groups,inputs_groups:t.inputs_groups,input_connectors_coordinates:this.input_connectors_refs.slice(0,this.state.inputs_groups.length).map((t=>getElementCenter(t.current))),output_connectors_coordinates:this.output_connectors_refs.slice(0,this.state.outputs_groups.length).map((t=>getElementCenter(t.current)))}}componentDidMount(){this._ref.current.children[0],this._ref.current.children[0].children[1];this.state.event_listeners=[[this._ref.current.parentElement.parentElement,"mousemove",this.handleMouseMove],[this._ref.current,"mousedown",t=>t.preventDefault()]];for(const t of this.state.event_listeners)t[0].addEventListener(t[1],t[2]);if(this.state.dragging){const t=this.state.x,e=this.state.y,s=this.state.scale,n=this._ref.current.getBoundingClientRect(),i=this._ref.current.parentElement.getBoundingClientRect(),o={x:(this.state.x-n.width/2-i.x)/s,y:(this.state.y-n.height/2-i.y)/s};this.setState((t=>(t.x=o.x,t.y=o.y,t)),(()=>this.handleMouseDown({clientX:t,clientY:e,button:0},(()=>{const t=this.getInfo();this.state.onMount(t),this.state.onStateChange(t)}))))}else{const t=this.getInfo();this.state.onMount(t),this.state.onStateChange(t)}}componentWillUnmount(){for(const t of this.state.event_listeners)t[0].removeEventListener(t[1],t[2])}handleMouseDown(t,e){this.state.handleMouseDown(this,t.clientX,t.clientY,t.button,e)}handleMouseUp(t){this.state.initital_dragging&&this.state.onStopInitialDragging(this.state.const_id),this.state.dragging&&this.setState({dragging:!1,initital_dragging:!1})}handleMouseMove(t){this.state.handleMouseMove(this,t.clientX,t.clientY)}handleMouseLeave(t){this.handleMouseMove(t)}handleMouseDownOnInputOutput(t,e,s){const n=this._ref.current.parentElement.getBoundingClientRect();"input"==t?0==s.button?this.state.startAddingWire({group_size:this.state.inputs_groups[e],to_block_const_id:this.state.const_id,to_input_id:e,from_point:{x:s.clientX-n.x,y:s.clientY-n.y},to_point:getElementCenter(this.input_connectors_refs[e].current)}):2==s.button&&this.state.removeWires({to_block_const_id:this.state.const_id,to_input_id:e}):"output"==t&&(0==s.button?this.state.startAddingWire({group_size:this.state.outputs_groups[e],from_block_const_id:this.state.const_id,from_output_id:e,from_point:getElementCenter(this.output_connectors_refs[e].current),to_point:{x:s.clientX-n.x,y:s.clientY-n.y}}):2==s.button&&this.state.removeWires({from_block_const_id:this.state.const_id,from_output_id:e}))}handleMouseWheelOnInputOutput(t,e){if("INPUT"!=this.state.type&&"OUTPUT"!=this.state.type)return;const s="INPUT"==this.state.type?"output":"input";if(this.state.wireHere(this.state.const_id,s,t))return;e.stopPropagation();const n=-Math.sign(e.deltaY),i={INPUT:"outputs_groups",OUTPUT:"inputs_groups"}[this.state.type];null!=i&&this.setState((t=>{const e=t[i][0]+n;return e<1||(t[i][0]=e,t.updateInputsOutputsNames(this.state.type,this.state.const_id,n)),t}))}render(){const t=this.state.x,e=this.state.y,s=(this.state.type,this.state.id);Math.max(this.state.inputs.length,this.state.outputs.length);return h("div",{ref:this._ref,className:"block",onMouseUp:t=>0==t.button?this.handleMouseUp(t):null,onContextMenu:t=>t.preventDefault(),style:{position:"absolute",left:t,top:e,zIndex:this.state.dragging?101:0}},h("div",{className:"content",onMouseDown:t=>{(t.target.classList.contains("content")||t.target.classList.contains("name"))&&this.handleMouseDown(t)}},h("div",{className:"inputs"},this.state.inputs_groups.map(((t,e)=>h("div",{ref:this.input_connectors_refs[e],key:e,className:"input",onMouseDown:t=>this.handleMouseDownOnInputOutput("input",e,t),onMouseUp:s=>0==s.button?this.state.handleMouseUpOnInputOutput({group_size:t,to_block_const_id:this.state.const_id,to_input_id:e}):null,onWheel:t=>this.handleMouseWheelOnInputOutput(e,t)},h("div",{className:"groupSize unselectable"},t))))),h("div",{className:"name unselectable"},s),h("div",{className:"outputs"},this.state.outputs_groups.map(((t,e)=>h("div",{ref:this.output_connectors_refs[e],key:e,className:"output",onMouseDown:t=>this.handleMouseDownOnInputOutput("output",e,t),onMouseUp:s=>0==s.button?this.state.handleMouseUpOnInputOutput({group_size:t,from_block_const_id:this.state.const_id,from_output_id:e}):null,onWheel:t=>this.handleMouseWheelOnInputOutput(e,t)},h("div",{className:"groupSize unselectable"},t)))))))}}