class RedgeSVG extends RedgeFront{font_size=24;state={states:{},transitions:{}};old_loc="";constructor(t,s,e,i,a,n){super(t,s,e,i),this.state.svg="",this.state.header=n,setTimeout(()=>{console.log("DIAG ?? ",$$$("NHMI").state.sm.fsm.states),this.state.states=$$$("NHMI").state.sm.fsm.states,this.state.transitions=$$$("NHMI").state.sm.fsm.transitions,this.state.events=$$$("NHMI").state.sm.fsm.events;var t,s,e,i=10,a=10,n={};"json_locations_"+window.args.sm in window&&(n=window["json_locations_"+window.args.sm]),console.log("found locations:",JSON5.stringify(n)),this.old_loc=JSON.stringify(n),this.state.panel_inputs={title:"INPUTS",color:"lightgreen",h:10,iy:14,ix:12,vars:{}},this.state.panel_outputs={title:"OUTPUTS",color:"pink",h:10,iy:14,ix:this.dim().w-160,vars:{}};for([s,t]of Object.entries($$$("NHMI").state.sm.v))"input"!=t.domain&&"private"!=t.domain||-1==s.indexOf("__")&&(this.state.panel_inputs.vars[s]={name:s,o:t}),"output"!=t.domain&&"timers"!=t.domain&&"funcsx"!=t.domain||(this.state.panel_outputs.vars[s]={name:s,o:t});for([s,e]of Object.entries(this.state.states))n[s]?(e.x=n[s].x,e.y=n[s].y):(e.x=i,e.y=a,e.color="blue",40<(i+=15)&&(a+=i=10));for([s,e]of Object.entries(this.state.transitions))n[s]?(e.x=n[s].x,e.y=n[s].y):(e.x=i,e.y=a,e.color="yellow",40<(i+=15)&&(a+=i=10));for([s,e]of Object.entries(this.state.events))n[s]?(e.x=n[s].x,e.y=n[s].y):(e.x=i,e.y=a,e.color="yellow",40<(i+=15)&&(a+=i=10));this.render()},200)}destructor(){console.log("SVG destructor "+this.name)}dim(){return{w:$("#"+this.id).width(),h:$("#"+this.id).height()}}getter(t){console.log("SVG getter "+this.name,t)}circle(t,s,e,i,a="black",n="none",o=""){o=`<path class="${o} drag ring" id="${this.id}_${i}" d="M ${t-e}, ${s} a ${e},${e} 0 1,0 ${2*e},0 a ${e},${e} 0 1,0 -${2*e},0" stroke-width="1" fill="${n}" stroke="${a}"/>`;this.state.svg+=o}circletxt(t,s,e,i,a,n,o,r,h="black",d="none",l=""){var c="",c=(c+=`<circle class="${l} drag" id="${this.id}_${r}" cx="${a}" cy="${n}" r="${o}" stroke-width="1" fill="white" stroke="${h}"/>`)+`<circle class="noclick" cx="${a}" cy="${n}" r="${o-14}" stroke-width="1" fill="${d}" stroke="${h}"/>`+`<circle class="noclick ${l}_dash dash" id="${this.id}_${r}_dash" cx="${a}" cy="${n}" r="${o-7}" stroke-width="14" fill="none" stroke="${d}"/>`;o-=2,this.font_size=e,c+=`<path class="noclick ring" id="${this.id}_${r}_inner" d="M ${a-o}, ${n} a ${o},${o} 0 1,0 ${2*o},0 a ${o},${o} 0 1,0 -${2*o},0" stroke-width="0" fill="none" stroke="none"/>`,o/=2,c=(c+=`<text font-size="${this.font_size}" text-anchor="middle"><textPath startOffset="25%" side="left" href="#${this.id}_${r}_inner">${t}</textPath></text>`)+`<text class="noclick" x="${a}" y="${n-(this.font_size=i)/3}" font-size="${this.font_size}" text-anchor="middle"  style="font-family: 'Roboto Mono';">${s}</text>`,this.state.svg+=c+=`<foreignObject x="${a-e}" y="${n}" width="60" height="50" class="noclick"><div xmlns="http://www.w3.org/1999/xhtml"><span class="ki-duotone ki-paper-clip" style="font-size: ${1.5*e}pt;"></span></div></foreignObject>`}ellipse(t,s,e,i,a,n="black",o="none"){a=`<ellipse class="drag" id="${this.id}_${a}" cx="${t}" cy="${s}" rx="${e}" ry="${i}" stroke-width="1" fill="${o}" stroke="${n}"/>`;this.state.svg+=a}txt(t,s,e,i,a="start",n="blue",o=""){var r=this.dim();isNaN(r.w)||(r=`<text class="noclick ${o}" id="${this.id}_${i}" x="${s}" y="${e}" fill="${n}" text-anchor="${a}" dominant-baseline="central" font-size="${this.font_size}" style="font-family: 'Roboto Mono';">${t}</text>
`,this.state.svg+=r)}input(t,s,e,i,a=""){var n=this.dim();isNaN(n.w)||(n=`<foreignObject x="${s+3}" y="${e-1}" width="70" height="150"><div xmlns="http://www.w3.org/1999/xhtml"><input id="${this.id}_${i}" class="${a}" value="${t}"></div></foreignObject>`,this.state.svg+=n)}line(t,s,e,i,a,n="black",o=1,r=""){var h=this.dim();isNaN(h.w)||(h=a?`<line class="${r}" id="${this.id}_${a}" x1="${t}" y1="${s}" x2="${e}" y2="${i}" style="stroke:${n};stroke-width:1" stroke-opacity="${o}" marker-end="url(#arrowhead)" />`:`<line class="${r}" x1="${t}" y1="${s}" x2="${e}" y2="${i}" style="stroke:${n};stroke-width:1" stroke-opacity="${o}" />`,this.state.svg+=h)}rect(t,s,e,i,a,n="black",o="none",r=""){var h=this.dim();isNaN(h.w)||i<1||e<1||(h=`<rect id="${this.id}_${a}" class="${r}" x="${t}" y="${s}" width="${e}" height="${i}" rx="3" ry="3" fill="${o}" stroke="${n}" stroke-width="1" />
`,this.state.svg+=h)}sd=6;td=3;old_vars={};render(){var t=this.dim();if(!isNaN(t.w)){this.state.svg="";for(var s=n=>{var t,s,e=(t,s,e,i,a)=>{this.rect(t-e/2+2,s-e/2-2,15*n.h,e+4,i,"none","white"),this.txt(i,t,s,`v_n_${i}_title`,"","black",`v_n_${i}_title`),"bool"===a.ui_type?this.circle(t+13.5*n.h,s,e/2,i,"none",a.get()?"green":"red","v_b_"+i):this.txt(a.get(),t+14*n.h,s,"v_n_"+i,"end","black","v_n_"+i)},i=n.iy+1.4*n.h;this.font_size=1.4*n.h,this.rect(n.ix-n.h/2,n.iy-n.h/2-4,15*n.h+n.h/2,(Object.keys(n.vars).length+1)*(n.h+5)+4,"xx","black",n.color||"none"),this.txt(n.title,n.ix+7*n.h,n.iy-1,"ii","middle","black","center"),this.font_size=n.h;for([t,s]of Object.entries(n.vars))e(n.ix,i,n.h,t,s.o),i+=n.h+5},e=0;e<=t.w/10;e+=1)this.line(30*e,0,30*e,t.h,void 0,"blue",e%6?.2:.5);for(var i,a,n,o=0;o<=t.h/10;o+=1)this.line(0,30*o,t.w,30*o,void 0,"blue",o%6?.2:.5);s(this.state.panel_inputs),s(this.state.panel_outputs),this.font_size=18;for([a,n]of Object.entries(this.state.events)){var r,h,d=Object.keys(n.args).length,l=(this.font_size=18,this.rect(10*n.x-10*this.sd,10*n.y-10,2*this.sd*10,22+15*d,a,"black",n.color||"white","drag"),this.txt(n.ui_label||a,10*n.x,10*n.y,a,"middle","black"),this.font_size=10,0);for([r,h]of Object.entries(n.args))this.rect(10*n.x-10*this.sd+2,10*n.y+10+15*l,115,14,"","none","white"),this.txt(r,10*n.x-10*this.sd+5,10*n.y+17+15*l,a,"start","black"),this.input(0,10*n.x-5*this.sd+16,10*n.y+10+15*l,a+"_"+r+"_arg"),l+=1;n.clientX=10*n.x,n.clientY=10*n.y}this.font_size=24;for([a,i]of Object.entries(this.state.states))this.font_size=14,this.circletxt(i.descr,a,14,24,10*i.x,10*i.y,10*this.sd,a,"black",i.color||"white","s_"+a),this.font_size=24,i.clientX=10*i.x,i.clientY=10*i.y;this.font_size=15;for([a,n]of Object.entries(this.state.transitions))this.circletxt(n.descr||"",a,10,10,10*n.x,10*n.y,6*this.sd,a,"black",n.color||"white","t_"+a),n.clientX=10*n.x,n.clientY=10*n.y;this.font_size=24;for([a,n]of Object.entries(this.state.transitions))for(var c of n.sources){var $,f,v,g,x,y,_=this.state.states[n.target];"*"!=c&&(g=this.state.states[c],$=Math.atan2(n.y-g.y,n.x-g.x),f=Math.atan2(n.y-g.y,n.x-g.x)+Math.PI,v=g.x+Math.cos($)*this.sd,g=g.y+Math.sin($)*this.sd,x=n.x+Math.cos(f)*(this.td+1.5),y=n.y+Math.sin(f)*(this.td+1.5),this.line(10*v,10*g,10*x,10*y,`${a}_${c}_${n.target}_in`,"black",1,"vec_"+c));try{$=Math.atan2(n.y-_.y,n.x-_.x)+Math.PI,f=Math.atan2(n.y-_.y,n.x-_.x),v=n.x+Math.cos($)*(+this.td+.5),g=n.y+Math.sin($)*(this.td+.5),x=_.x+Math.cos(f)*(this.sd+1),y=_.y+Math.sin(f)*(this.sd+1),this.line(10*v,10*g,10*x,10*y,`${a}_${c}_${n.target}_out`,"black",1,"")}catch(t){}}document.getElementById(this.id).innerHTML=this.state.header+this.state.svg,document.getElementById(this.id).innerHTML+=""}}clear(){var t=this.dim();isNaN(t.w)||(this.state.svg="")}update(t,s){var e,i,a=this.id+"_"+t;console.log("update",a,s);for([e,i]of Object.entries(s)){console.log("up",e,i);try{"html"==e?document.getElementById(a).innerHTML=i:document.getElementById(a).setAttribute(e,i)}catch(t){}}}remove(t){t=this.id+"_"+t;console.log("removin",t);try{document.getElementById(t).remove()}catch(t){}}setter(){console.log(`SVG setter ${this.name} `+this.id)}onEvent(t){var[s,e]=t.target.id.split("_"),e=t.target.id.split("_").slice(1).join("_"),i=$("#"+this.id)[0].getBoundingClientRect().width,a=$("#"+this.id)[0].getBoundingClientRect().height;if("click"==t.e.event)console.log("svg click",t);else if("drag"==t.e.event)if(e in this.state.states){this.state.states[e];if(this.state.states[e].dragX+t.dx/10<0)return void t.e.preventDefault();if(10*this.state.states[e].dragX+t.dx>i)return void t.e.preventDefault();if(this.state.states[e].dragY+t.dy/10<0)return void t.e.preventDefault();if(10*this.state.states[e].dragY+t.dy>a)return void t.e.preventDefault();this.state.states[e].x=Math.round(10*(this.state.states[e].dragX+t.dx/10))/10,this.state.states[e].y=Math.round(10*(this.state.states[e].dragY+t.dy/10))/10,this.state.states[e].x=3*Math.round(this.state.states[e].x/3),this.state.states[e].y=3*Math.round(this.state.states[e].y/3),this.render()}else if(e in this.state.transitions){this.state.transitions[e];if(this.state.transitions[e].dragX+t.dx/10<0)return void t.e.preventDefault();if(10*this.state.transitions[e].dragX+t.dx>i)return void t.e.preventDefault();if(this.state.transitions[e].dragY+t.dy/10<0)return void t.e.preventDefault();if(10*this.state.transitions[e].dragY+t.dy>a)return void t.e.preventDefault();this.state.transitions[e].x=Math.round(10*(this.state.transitions[e].dragX+t.dx/10))/10,this.state.transitions[e].y=Math.round(10*(this.state.transitions[e].dragY+t.dy/10))/10,this.state.transitions[e].x=3*Math.round(this.state.transitions[e].x/3),this.state.transitions[e].y=3*Math.round(this.state.transitions[e].y/3),this.render()}else if(e in this.state.events){this.state.events[e];if(this.state.events[e].dragX+t.dx/10<0)return void t.e.preventDefault();if(10*this.state.events[e].dragX+t.dx>i)return void t.e.preventDefault();if(this.state.events[e].dragY+t.dy/10<0)return void t.e.preventDefault();if(10*this.state.events[e].dragY+t.dy>a)return void t.e.preventDefault();this.state.events[e].x=Math.round(10*(this.state.events[e].dragX+t.dx/10))/10,this.state.events[e].y=Math.round(10*(this.state.events[e].dragY+t.dy/10))/10,this.state.events[e].x=3*Math.round(this.state.events[e].x/3),this.state.events[e].y=3*Math.round(this.state.events[e].y/3),this.render(),$(`#${s}_`+e).addClass("active")}else this.render();else if("mousedown"==t.event)e in this.state.states?(this.state.states[e].dragX=this.state.states[e].x,this.state.states[e].dragY=this.state.states[e].y):e in this.state.transitions?(this.state.transitions[e].dragX=this.state.transitions[e].x,this.state.transitions[e].dragY=this.state.transitions[e].y):e in this.state.events&&(this.state.events[e].dragX=this.state.events[e].x,this.state.events[e].dragY=this.state.events[e].y,console.log("SVG drag start event",e,this.state.events[e]),$(`#${s}_`+e).addClass("active"));else if("mouseup"==t.event){var n,o,r={};console.log("mouze up"),$(`#${s}_`+e).removeClass("active");for([n,o]of Object.entries(this.state.states))r[n]={x:o.x,y:o.y};for([n,o]of Object.entries(this.state.transitions))r[n]={x:o.x,y:o.y};for([n,o]of Object.entries(this.state.events))r[n]={x:o.x,y:o.y};i=JSON.stringify(r);if(i!=this.old_loc)console.log("MOVED",i,this.old_loc),$$(conf.broker_id).saveconf(`locations_${window.args.sm}.json`,{data:r,act:"saveconf",site:conf.site,ip:conf.ip,dns:conf.dns,sid:conf.sid,cid:mq._cid,args:window.args,stamp:stamp()}).then(t=>{console.log("INFOREQ_REQ",t)}),this.old_loc=i;else{console.log("CLICK",e);var h,d,l={},c=[];console.log("ARGG?",this.state.events[e]);for([h,d]of Object.entries(this.state.events[e].args)){s=`#${this.id}_${e}_${h}_arg`;console.log("ARGG",h,s),l[h]=parseInt($(s).val()),c.push(l[h])}console.log("ARGS",l),$$$("NHMI").state.sm.remote?(console.log("SEND_EVENTn",c),$$("X000000")[e](...c)):(console.log("SEND_EVENTa",l),$$$("NHMI").state.sm.push_event(e,l))}}t.e.preventDefault()}}