Wire.js

"use strict";function distance(t,e){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}class Wire extends preact.Component{constructor(t){super(t);const e=t.from_point,a=t.to_point;this.state={length:distance(e,a),angle:Math.atan2(a.y-e.y,a.x-e.x),from_point:e,to_point:a}}render(){const t=this.state.from_point,e=(this.state.to_point,this.state.length),a=this.state.angle;return h("div",{className:"wire",style:{left:"calc("+t.x+"px + 0vmin)",top:"calc("+t.y+"px - 7px)",width:e-24+"px",height:"14px",transform:"rotate("+a+"rad) translate(12px, 0)",background:"linear-gradient(90deg, deepskyblue 3px, limegreen calc(100% - 3px))"}})}}function Wire_f(t){const e=t.from_point,a=t.to_point,n=distance(e,a),r=Math.atan2(a.y-e.y,a.x-e.x);return h("div",{className:"wire",style:{left:"calc("+e.x+"px + 0vmin)",top:"calc("+e.y+"px - 7px)",width:n-24+"px",height:"14px",transform:"rotate("+r+"rad) translate(12px, 0)",background:"linear-gradient(90deg, deepskyblue 3px, limegreen calc(100% - 3px))"}})}