API tools faq
paste
IWBH_01

CAP_01.html

IWBH_01
Aug 30th, 2020
202
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 37.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>CAP</title>
  7. <style>
  8.  
  9. body{
  10. margin:0;
  11. padding:0;
  12. }
  13.  
  14. #toolbox{
  15. position:fixed;
  16. margin:0;
  17. padding:7px;
  18. left:0;
  19. right:0;
  20. background-color:#aaccff;
  21. }
  22. canvas{
  23. position:absolute;
  24. top:0;
  25. left:0;
  26. border:2px solid black;
  27. }
  28. dot{
  29.  position:absolute;
  30.  width:10px;
  31.  height:10px;
  32.  margin-left:-5px;
  33.  margin-top:-5px;
  34.  z-index:99999;
  35.  background-color:black;
  36.  opacity:0.25;
  37.  border-radius:15px;
  38. }
  39. dot.slct{
  40.  background-color:#c000c0;
  41. }
  42. dot:hover, dot.slct:hover, dot.hovr{
  43.  background-color:#00ff10;
  44. }
  45. #dtbx{
  46.  position:absolute;
  47.  left:5px;
  48.  padding:0;
  49. }
  50. #dbx2{
  51.  position:fixed;
  52.  padding:5pt;
  53. }
  54. button.slct{
  55.  border-style:inset;
  56. }
  57. #toolbox button{
  58.   font-size:12pt;
  59.   border: 1px solid #d0d0d0;
  60. }
  61. #toolbox button.slct{
  62.   border:2px solid black;
  63. }
  64. #toolbox button:hover{
  65.   background-color:#808080;
  66. }
  67. button c{
  68.  display: inline-block;
  69.  position: relative;
  70.  top: 2px;
  71.  width:20px;
  72.  height:11px;
  73.  background-color:black;
  74. }
  75. #sWdh{
  76.  position:fixed;
  77.  top:50px;
  78.  left:50%;
  79.  width:300px;
  80.  height:100px;
  81.  background-color:white;
  82.  border:2px solid black;
  83.  padding:5px;
  84.  margin-left:-205px;
  85. }
  86. dot div{
  87.  top:5px;left:5px;width:0;height:0;margin:0;position:absolute;z-index:-200;
  88. }
  89. dot div div{
  90.  margin:-2px 0px 0px;height:4px;background-color:black;top:0;left:0;z-index:-20;pointer-events:none;
  91. }
  92.  
  93.  
  94.  
  95. #ctx_mnu{
  96.  background-color: white;
  97.  border: 1px solid grey;
  98.  z-index: 9999999;
  99.  position: fixed;
  100.  margin: 3px;
  101.  padding: 7px;
  102. }
  103. #ctx_mnu button {
  104.  border: none;
  105.  border-bottom: 1px solid gray;
  106.  background-color: inherit;
  107.  flex-wrap: wrap;
  108.  flex-direction: column;
  109.  display: block;
  110.  width: 100%;
  111.  text-align: left;
  112.  padding: 3px;
  113. }
  114. #ctx_mnu button:hover {
  115.   background-color: #3072FF;
  116.   color:white;
  117. }
  118.  
  119.  
  120. #fib_1{
  121.     position:fixed;
  122.     z-index:9999999;
  123.     padding:10px;
  124.     margin-left:-150px;
  125.     top:150px;
  126.     left:50%;
  127.     width:300px;
  128.     height:150px;
  129.     border:; 2px solid black;
  130.     background-color:white;
  131. }
  132.  
  133.  
  134. .hid{
  135.     display:none;
  136. }
  137.  
  138. button.tlsy{
  139.     width: 145pt;
  140. }
  141. </style>
  142. </head>
  143. <body>
  144. <script type="text/javascript" src="https://docs.google.com/uc?id=0Bxb5iFgmM3V6eTRINGZ0Zm1zMkk"></script>
  145. <div id="toolbox">
  146.     Edit Mode:
  147.     <select id="emod" title="Select an Edit Mode">
  148.         <option value="draw">Draw</option>
  149.         <option value="ani">Animate</option>
  150.         <option value="vid">Video edit</option>
  151.     </select>
  152.    
  153.     <!-- modified change box (cbx) span with a different span for each mode -->
  154.   <span id="cbx">
  155.     <span id="draw_mod">
  156.         Line Cap Style: <select title="Select a Line Cap Style"><option value="butt">flat</option><option value="round">round</option><option value="square">square</option></select>
  157.        
  158.         Line Join Style: <select title="Select a Line Join Style (very most corner)"><option value="miter">sharp</option><option value="bevel">flat</option><option value="round">round</option></select>
  159.        
  160.         Shape Fill Style: <select title="Select a shape fill-in style"><option value="none">none (no fill)</option><option value="color">solid color</option><option value="gradient">gradient</option><option value="pattern">pattern</option></select>
  161.        
  162.         <button class="tlsy">
  163.             <span name="none">---</span>
  164.             <span name="color" class="hid">choose a color <c></c></span>
  165.             <span name="gradient" class="hid">configure a gradient</span>
  166.             <span name="pattern" class="hid">choose a pattern</span>
  167.         </button>
  168.        
  169.         Line Style: <select title="Select a Line Style"><option value="color">solid color</option><option value="gradient">gradient</option><option value="pattern">pattern</option></select>
  170.        
  171.         <button class="tlsy">
  172.             <span name="color">choose a color <c></c></span>
  173.             <span name="gradient" class="hid">configure a gradient</span>
  174.             <span name="pattern" class="hid">choose a pattern</span>
  175.         </button>
  176.        
  177.         <button title="Set Line width">Line Width</button>
  178.        
  179.         <!-- paintbrush &#128396; -->
  180.        
  181.         <span name="atool">
  182.         Shape/Draw tools:
  183.         <button name="line" title="line"> \ </button>
  184.         <button name="bezi" title="bezier curve"> S </button>
  185.         <button name="arc" title="arc">&#9693;</button>
  186.         <button name="elps" title="ellipse / circle">&#9711;</button>
  187.         <button name="rect" title="rectangle">&#9645;</button>
  188.         <button name="trig" title="triangle">&#9651;</button>
  189.         <button name="poly" title="polygon" disabled>\_/|_\</button>
  190.         <button name="fill" title="fill (with solid color)" disabled><sub>&#128167;</sub>&#128319;</button>
  191.         <button name="n0t" class="slct">nothing</button>
  192.         </span>
  193.        
  194.     </span>
  195.    
  196.    
  197.     <span id="vid_mod" class="hid">
  198.         <button title="Add (load) new video source file">+ New Vid Src</button>
  199.     </span>
  200.    
  201.    
  202.     <span id="ani_mod" class="hid">
  203.        
  204.     </span>
  205.   </span>
  206. </div>
  207.  
  208. <div id="dbx2">
  209. <div id="dtbx">
  210. <canvas id="Canvas1" width="800" height="500"></canvas>
  211. <canvas id="CnvsTop" width="800" height="500"></canvas>
  212. </div>
  213. </div>
  214.  
  215. <div id="sWdh" class="hid">
  216.     Adjust slider or type # of pixels:<input type="range"><input type="number"><button >Done</button>
  217. </div>
  218.  
  219. <div id="ctx_mnu" class="hid">
  220.     <button>Copy (Ctrl+C)</button>
  221.     <button>Cut (Ctrl+X)</button>
  222.     <button>Paste (Ctrl+V)</button>
  223.     <button title="Delete Selected" >Delete (Ctrl+D)</button>
  224.     <button title="Merge Stacked dots at clicked location" >Merge (Ctrl+M)</button>
  225.     <button title="Show the real Context (right click) Menu" >Real ContextMenu</button>
  226. </div>
  227.  
  228. <div id="fib_1" class="hid">
  229.     <button title="upload a file from your computer" >Upload file</button>
  230.     or enter url below:<br>
  231.     <input><button title="Load the URL typed in the input box" >Load URL</button>
  232. </div>
  233.  
  234. <script type="text/javascript">
  235.  
  236. /*
  237. note, for all triginometric systems, be sure to correct cos error with: ang=+(xi<0?Math.PI:0);
  238. xo=cos(ang)*r, yo=sin(ang)*r;
  239. where "xi" is x-input, "ang" is angle mesure, "r" is radius, "xo" is x-output, "yo" is y-output;
  240.  
  241. when addition or subtraction is performed on ang (theta) with another cartiesian originating angle measure ("ang2"), use this
  242.  ang+ang2+(((xi<0)^(xi2<0))?Math.PI:0);
  243.  where xi2 is the source x input of ang2. "^" is the javascript binary XOR, you know
  244.  
  245.  NOTE: Math.arctan2(x,y) automatically corrects this
  246. */
  247.  
  248. HTMLCollection.prototype.forEach=Array.prototype.forEach;//  << temp
  249.  
  250. var d=document,cE="createElement",aC="appendChild",cTN="createTextNode",cN="cloneNode",gI="getElementById",gT="getElementsByTagName",qS="querySelector",qSA="querySelectorAll",aEL="addEventListener",
  251.  
  252. frms_sec,res=[800,500],
  253. tlbx=d[gI]("toolbox"),dtbx=d[gI]("dtbx"), //dtbx= dot-box (for click point circles)
  254.  
  255. Canvs1=d[gI]("Canvas1"),ctx=Canvs1.getContext('2d'),
  256. Cnvs2=d[gI]("CnvsTop"),ctx2=Cnvs2.getContext('2d'),
  257. IDB=ctx.createImageData(800,500), //rgba
  258. tIDB=ctx.createImageData(800,500), //tmp
  259.  
  260. ldfrm=function(){
  261. ctx.putImageData(IDB,0,0);
  262. },
  263.  
  264. Dps=function(x,y){ //Determine? PoSition (in ImageData.data array)
  265. if(x>res[0]||x<0||y>res[1]||y<1) return -1;
  266. y=res[1]-y;
  267. return ((y*res[0])+x)*4;
  268. },
  269.  
  270. dTPM=function(){
  271. var i=0;
  272. while(i<IDB.data.length){
  273. if(tIDB.data[i]>0){
  274.     IDB.data[i]=tIDB.data[i];
  275.     tIDB.data[i]=0;
  276. }
  277. i++;
  278. }},
  279.  
  280. pxC=function(D,b,c){ //set a pixel value (c) in an image data object (D) at data array index (b)
  281. if(b+1&&b<D.data.length){D.data[b]=c[0];
  282. D.data[b+1]=c[1];
  283. D.data[b+2]=c[2];
  284. D.data[b+3]=c[3];}
  285. },
  286.  
  287.  
  288.  
  289. VGBI2=(function(){
  290.     var pt="prototype",is_=function VectorGraphicBoxInstance2D(w,h,cs,shp){//use this to create 2D boxes for orientations of segments of animatable characters; cs=centers (joints/attach points); shp=all the lines and curves; later, make function to average several boxes together: seemingly differant shapes and centers, properties of different VGBI2s, with the same name where the said VGBI2s are part of the same VGBI3: the shapes are actually the same shapes seen from differant angles
  291.     var rt={'constructor':is_,'__proto__':is_p,'width':w||is_p.width,'height':h||is_p.height,'centers':cs||[],'shapes':shp||{}};
  292.     return rt;},
  293.     is_p=is_[pt]?is_[pt]:{};
  294.     Object.assign(is_p,{"width":0,"height":0,"centers":[],"shapes":{}});
  295. return is_;}()),
  296.  
  297. VGBI3=(function(){
  298.     var pt="prototype",get2Pweight=function(ar,ro){
  299.         var gots=[[361,-1],[361,-1]]; //[lesser angle,greater angle] than ro
  300.         ar.forEach(function(v,i){var dif=Math.abs(i-ro);if(i==ro)gots=[[0,i]];else
  301.         if(i>ro&&dif<gots[1][0])gots[1]=[dif,i];else
  302.         if(i<ro&&dif<gots[0][0])gots[0]=[dif,i];});
  303.        var gi_=gots[0][0]+gots[1][0];
  304.        gots[0][2]=gi_/gots[0][0];//get weight (multiply each value by its weight, add weights & put in denominator);
  305.        gots[1][2]=gi_/gots[1][0];
  306.    return gots;},
  307.    is_=function VectorGraphicBoxInstance3D(arg/*arg=xr[yr[zr]] is a 3d array of all x-rotations (available viewing angles used to compute 3d apperance), containing all y rotations containing all z rotations*/){
  308.    var rt={'constructor':is_,'__proto__':is_p,'arg':arg?arg:is_p.arg};
  309.    return rt;}, //14 viewing angle 2D boxes by default (cube); include x & y mirroring functions
  310.    is_p=is_[pt]?is_[pt]:{};
  311.    is_p.arg=[];
  312.    is_p.Get2DBox=function(xr,yr,zr){/*the arguments declare the viewing angle;round to the nearest degree;take averages (usually weighted) of nearest existing 2D boxes of the angle ceilinged and floord on all axies.*/};
  313. return is_;}()),
  314.  
  315. //2020Jun15 edit note: I might not use the VectorGraphicBoxInstance system after all; I might invent a system that uses 3d shapes converted to 2d shapes.
  316.  
  317.  
  318.  
  319. //  new:
  320.  
  321. AllShps=[], //all shapes (for save)
  322.  
  323. AllVids=[], //all video sources
  324.  
  325. xp=0,yp=0,zm=1, //x pan, y pan, zoom (global)
  326.  
  327. hPI=Math.PI/2,
  328.  
  329.  
  330.  
  331. eAePt=function ElementAddEventPassThru(elm,evn,evf,b){
  332.    elm[aEL](evn,evf.bind(elm),b);
  333.    if(!elm["LF_"+evn])elm["LF_"+evn]=[]; //temp debug?
  334.    elm["LF_"+evn].push([evf,b]);
  335.    return elm;
  336. },
  337.  
  338.  
  339. nwDot=function(p){
  340. var D=d[cE]("dot");
  341. if(typeof p=="number")D.p=p;
  342. dtbx[aC](D);
  343. return D;
  344. },
  345.  
  346.  
  347. avgCo=function(ca){//average an array of coordinates
  348. var i=ca.length,j=i/2,ac0=0,ac1=0;
  349. while(i-=2){ac0+=ca[i];ac1+=ca[i+1];}
  350. return [ac0/j,ac1/j];
  351. },
  352.  
  353. PyThg=function(x,y){//pythagorean theorem 2 short sides input
  354. return Math.sqrt((x*x)+(y*y));
  355. },
  356.  
  357. /*
  358. Cnv_Coa=function(coa,fC){//convert coordinate array; use the center coordinate given in fC to convert from standard carteseian to HTML5 canvas coordinate values
  359. var i=coa.length,coa2=[],y;
  360. while(i--){y=i%2;coa2[i]=fC[y]+((y?-1:1)*(coa[i]+(y?yp:xp)));}//add x, subtract y
  361. return coa2;
  362. },
  363. */
  364.  
  365. Clr=function(c,C){ //clear the canvas given by its ctx object (c)
  366. c.clearRect(0,0,(C=c.canvas).width,C.height);
  367. },
  368.  
  369.  
  370. P2mO=function(oa,pn,pv){//property to multiple objects
  371. oa.forEach(function(O){O[pn]=pv;});
  372. },
  373.  
  374. NpGs=function(DO,so,pn,dpn){ //new property get/set (make a new object property (dpn)(destination property name) of destination object (DO) that is a link to another object property (pn) of source object (so)
  375. var _F=function(v){return v?so[pn]=v:so[pn];};
  376. Object.defineProperty(DO,dpn||pn,{"get":_F,"set":_F});
  377. return DO;
  378. },
  379.  
  380. dotSlct=function(shp,slc,v){ //toggle selection of all the dots in a shape (shp)
  381.    v=slc?"slct":"";for(var i=0;i<shp.dots.length;i++)shp.dots[i].className=v;
  382. },
  383.  
  384.  
  385. $B={"bc":[ctx2,ctx],"ef":function(){},
  386.    //mtf is supposed to be for saving drawing tool options
  387.    "mtf":{"lineWidth":1,"lineCap":"round","lineJoin":"miter","strokeStyle":"#000000","fillStyle":"#000000","doFill":!1},
  388.    "kdc":function(sy){/*keep draw customization (line & fill options etc.)*/Object.assign($B.bc[0],sy);Object.assign($B.bc[1],sy); }
  389. };
  390. $B.mtf2=Object.assign({},$B.mtf);//buffer variable (use to store temp data & save html file bytes)
  391.  
  392.  
  393. Object.defineProperties(HTMLCanvasElement.prototype,{
  394. "cx":{"get":function(){return (this.width/2);}},
  395. "cy":{"get":function(){return (this.height/2);}}
  396. });
  397.  
  398.  
  399.  
  400. var hdAll=function(nL){
  401.    var i=nL.length;
  402.    while(i--)nL[i].className="hid";
  403. },
  404. dbx2=d[gI]("dbx2");
  405. self.onresize=function(){
  406.    var tlbh=tlbx.clientHeight+20,
  407.    wkw=d.body.clientWidth-20,
  408.    wkh=d.documentElement.clientHeight-tlbh-50;
  409.    
  410.    dbx2.style.top=tlbh+"px";
  411.    dbx2.style.width=wkw+"px";
  412.    dbx2.style.height=wkh+"px";
  413. };
  414.  
  415.  
  416.  
  417. var shapD={}; //shape draw
  418.  
  419. //main toolbox handler functions
  420.  
  421. Object.assign(tlbx,
  422.    {"emod":d[gI]("emod"),"slcT":!1, //slcT = selcted Tool
  423. "sClr":Object.assign(d[cE]("input"),{"type":"color"}), //color select dialog
  424. "sWdh":(function(){ //set Width
  425.     var sWdh=d[gI]("sWdh"),n1=sWdh[qS]("input[type=range]"),
  426.     n2=sWdh[qS]("input[type=number]"),
  427.     cls=function(){ sWdh.className="hid"; },
  428.    F=function(n){
  429.         if(!isNaN(n)){ $B.mtf.lineWidth=n;dtbx.slctS?dtbx.slctS.mtf.lineWidth=n:0;}
  430.    };
  431.    n1[aEL]("mousemove",function(){F(n2.value=n1.value/2);});
  432.    n2[aEL]("keyup",function(){var n=n2.value*1;isNaN(n)?0:(n>50?n2.value=(n=50):0)+F(n)+(n1.value=n*2);});
  433.     n1.value=2;n2.value=1;
  434.  
  435.     sWdh[gT]("button")[0][aEL]("click",cls);
  436.     sWdh[aEL]("mouseleave",cls);
  437.     return sWdh;
  438.  })(),
  439.  "uslo":function(){tlbx.emdT[tlbx.emod.value].cntnr[qS]("[name=atool]").geta("button").forEach(function(b){b.className="";});},//unselect buttons
  440.  
  441.  "cbx":d[gI]("cbx"),
  442.  
  443.  
  444.  "emdT":{ //emod (edit mode) Tools
  445.  
  446.   "draw":$B.ted={
  447.     "cntnr":$B.dbc=d[gI]("draw_mod"),
  448.     "btns":{
  449.      "lnCpSty":eAePt(($B.dbc_s=$B.dbc[gT]("select"))[0],"change",function(){$B.mtf.lineCap=this.value;dtbx.slctS?dtbx.slctS.mtf.lineCap=this.value:0;}),
  450.      "lnJnSty":eAePt($B.dbc_s[1],"change",function(){$B.mtf.lineJoin=this.value;dtbx.slctS?dtbx.slctS.mtf.lineJoin=this.value:0;}),
  451.      
  452.      "SpFlSty":eAePt($B.sfc=$B.dbc_s[2],"change",function(){var v=this.value,btn=$B.ted.btns.SpFlBtn;
  453.       hdAll(btn.children);
  454.       if(v=="none"){ $B.mtf.doFill=!1; }else{ $B.mtf.doFill=!0; }
  455.           btn[qS]("[name="+v+"]").className="";
  456.         if(v=="color")btn[gT]("c")[0].backgroundColor=$B.mtf.fillStyle;
  457.       }), //end SpFlSty
  458.      "SpFlBtn":Object.assign(NpGs(eAePt(($B.dbc_b=$B.dbc[gT]("button"))[0],"click",$B.sty_d=function(){
  459.          var v=this.sle.value;
  460.          if(v=="color"){var T=this,C=tlbx.sClr,c=T.geta('c')[0].style,bc='backgroundColor';C.onchange=function(){T.put=(c[bc]=this.value);dtbx.slctS?dtbx.slctS.mtf[T.nm]=T.put:0;};c[bc]=(C.value=$B.mtf[T.nm]);C.click();}
  461.          else if(v=="gradient"){}
  462.          else if(v=="pattern"){}
  463.      }),
  464.      $B.mtf,"fillStyle","put"),{"nm":"fillStyle","sle":$B.sfc}),
  465.      
  466.      "lnSty":eAePt($B.lsy=$B.dbc_s[3],"change",function(){var v=this.value,btn=$B.ted.btns.lnSyBtn;
  467.       hdAll(btn.children); btn[qS]("[name="+v+"]").className="";
  468.       if(v=="color")btn[gT]("c")[0].backgroundColor=$B.mtf.fillStyle;
  469.      }), //end lnSty
  470.      "lnSyBtn":Object.assign(NpGs(eAePt($B.dbc_b[1],"click",$B.sty_d),
  471.      $B.mtf,"strokeStyle","put"),{"nm":"strokeStyle","sle":$B.lsy}),
  472.      
  473.      "lnWdh":eAePt($B.dbc_b[2],"click",function(){tlbx.sWdh.className="";}),
  474.      
  475.      "line":eAePt($B.dbc[qS]("button[name=line]"),"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.line;this.className="slct";}),
  476.      "bezierCurve":eAePt($B.dbc[qS]("button[name=bezi]"),"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.bezierCurve;this.className="slct";}),
  477.      "arc":eAePt($B.dbc[qS]("button[name=arc]"),"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.arc;this.className="slct";}),
  478.      "ellipse":eAePt($B.dbc[qS]("button[name=elps]"),"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.ellipse;this.className="slct";}),
  479.      "rectangle":eAePt($B.dbc[qS]("button[name=rect]"),"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.rectangle;this.className="slct";}),
  480.      "triangle":eAePt($B.dbc[qS]("button[name=trig]"),"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.triangle;this.className="slct";}),
  481.      //polygon
  482.      //fill tool
  483.      "nothing":eAePt($B.dbc[qS]("button[name=n0t]"),"click",function(){tlbx.uslo();tlbx.slcT=!1;this.className="slct";})
  484.     },
  485.    
  486.    
  487.     //end buttons, begin shape maker objects with drawer functions
  488.    
  489.     /*
  490.     2020Jun30 edit: try to reduce function calls and instances? : =>    store shape draw instructions as object properties   dont forget Cnv_Coa(c0,[Canvs1.cx,Canvs1.cy]) !
  491.     use the number identifier passed to nwDot to determine which c0 (point array) indexes to move and how. Also use the cxf & cmt properties to determine how to draw each shape inside the onmousemove function that draws shapes & also possible onmousedown. ;         shapD[shapeInstance.type].cxf;   c0 array should always literally be an array of arguments for the ctx shape function minus the 1st two elements if there is moveTo included (cmt==true && not_part_of_complex_path);    Cnv_Coa: Oh that is why I didn't make c0 always be an exact list of arguments
  492.    
  493.     2020July3 : could just use the shapeObj.type property inside the main shape moving function (where the action happens (all besides creating new shape object instances anyway));
  494.     the main func gets called by any user action event on the canvas area, "if" statements inside the main func decide what should be done in response to the action (like move or rotate shape(s));
  495.     the same main func is used for every? user event handler on the canvas.
  496.    
  497.    
  498.     my own efficiency mesure of bezier curve not draw if drawing withing the last 200 milliseconds or something is what caused the flashing bezier curves on zooming and panning the viewport
  499.    
  500.     */
  501.    
  502.     "line":shapD.line={"type":"line",
  503.      "cxf":"lineTo",
  504.      "cmt":!0, // <-- cmt == call moveTo for regular
  505.     "nw":function newLine(co){ /*draw new line*/
  506.      var c0=co.length==4?co:co.concat(co),
  507.      D0=nwDot(0),
  508.      D1=(dtbx.slctD=nwDot(2)),
  509.      sho={"type":this.type,"points":c0,"dots":[D0,D1],"mtf":Object.assign({},$B.mtf)}; D1.oS=(D0.oS=sho); AllShps.push(sho); dotSlct(dtbx.slctS=sho);//.oS = owning Shape
  510.      //replace AllShps.push etc with "return sho;" ?
  511.     }
  512.    },
  513.    
  514.    "bezierCurve":shapD.bezierCurve={"type":"bezierCurve",
  515.     "cxf":"bezierCurveTo",
  516.     "cmt":!0,
  517.    
  518.     //will need itm?
  519.     "itm":function(){if(this.mmwe){
  520.        //in the middle: (move D1 & D2 when either D0 or D3 moves)
  521.        var ev,ev2,mvD={1:[D0.co[0]-D0.lc[0],D0.co[1]-D0.lc[1]],4:[D3.co[0]-D3.lc[0],D3.co[1]-D3.lc[1]]},
  522.        oc=[(D0.lc[0]+D3.lc[0])/2,(D0.lc[1]+D3.lc[1])/2], oma=Math.atan2((D3.lc[1]-D0.lc[1]),(D3.lc[0]-D0.lc[0])),
  523.        nc=[(D0.co[0]+D3.co[0])/2,(D0.co[1]+D3.co[1])/2], or=PyThg(D0.lc[0]-oc[0],D0.lc[1]-oc[1]), nr=PyThg(D0.co[0]-nc[0],D0.co[1]-nc[1]), rc=or?nr/or:1, n1,n2,
  524.        ops={2:{'r':PyThg(n1=D1.co[0]-oc[0],D1.co[1]-oc[1],1),'a':Math.atan2((D1.co[1]-oc[1]),(D1.co[0]-oc[0]))}, 3:{'r':PyThg(n2=D2.co[0]-oc[0],D2.co[1]-oc[1],1),'a':Math.atan((D2.co[1]-oc[1])/(ev=D2.co[0]-oc[0]))+(ev<0?(Math.PI):0)}};
  525.        mvD.a=Math.atan2((D3.co[1]-D0.co[1]),(ev=D3.co[0]-D0.co[0]))-oma;
  526.        var r_=ops[2].r*rc,a_=mvD.a+ops[2].a;
  527.        D1.rps((Math.cos(a_)*r_)+nc[0],(Math.sin(a_)*r_)+nc[1]);
  528.        
  529.        D2.rps((Math.cos(a_=mvD.a+ops[3].a)*(r_=ops[3].r*rc))+nc[0],(Math.sin(a_)*r_)+nc[1]);
  530.        
  531.        //D1 & D2 by a line between D0 & D3, & move parallel to that line keeping relative distances between points the same along the line; AKA make D1 and D2 move about the same axis, and same angle degrees as D0 & D3 movements, changing their distance to the axis based on the change of D0 and D3 axis distance change and their coordinate closeness to each
  532.       } },
  533.      
  534.     "nw":function newBezierCurve(co){/*draw new bezierCurve*/
  535.       var c0=co.length>=8?co:co.concat.apply(co,(new Array(4-(co.length/2))).fill(co)),
  536.        
  537.        D0=nwDot(0), //beggining dot
  538.        D1=nwDot(2), //1st control point dot
  539.        D2=nwDot(4), //2nd control point dot
  540.        D3=(dtbx.slctD=nwDot(6)), //ending dot (select it so you can streatch the curve out)
  541.        //put this whole curve onto Cnvs2 and adjust curve & Cnvs2 as needed when the Dots are moved (simillar process for other draw shapes);   need to add rotation option that rotates the whole shape (use the dot rps functions as part), move whole option also;
  542.        sho={"type":this.type,"points":c0,"dots":[D0,D1,D2,D3],"izNew":!0,"mtf":Object.assign({},$B.mtf)}; P2mO([D0,D1,D2,D3],"oS",sho); AllShps.push(sho); dotSlct(dtbx.slctS=sho);
  543.      },
  544.      "mmwe":!0 //move middle with ends (see line 160ish in function 'itm' in bezierCurve.nw)
  545.     },
  546.    
  547.     "arc":shapD={"type":"arc",
  548.      "cxf":"arcTo",
  549.      "cmt":!0, //could build cxf & cmt into main shape editor func and leave them out here?
  550.    
  551.     "itm":function(){if(this.mmwe){
  552.        //in the middle: (move D1 & D2 when either D0 or D3 moves)
  553.        var mvD={1:[D0.co[0]-D0.lc[0],D0.co[1]-D0.lc[1]],3:[D2.co[0]-D2.lc[0],D2.co[1]-D2.lc[1]]},
  554.        oc=[(D0.lc[0]+D2.lc[0])/2,(D0.lc[1]+D2.lc[1])/2], oma=Math.atan2((D2.lc[1]-D0.lc[1]),(D2.lc[0]-D0.lc[0])),
  555.        nc=[(D0.co[0]+D2.co[0])/2,(D0.co[1]+D2.co[1])/2], or=PyThg(D0.lc[0]-oc[0],D0.lc[1]-oc[1]), nr=PyThg(D0.co[0]-nc[0],D0.co[1]-nc[1]), rc=or?nr/or:1, n1,n2,
  556.        ops={'r':PyThg(n1=D1.co[0]-oc[0],D1.co[1]-oc[1],1),'a':Math.atan2((D1.co[1]-oc[1]),(D1.co[0]-oc[0]))};
  557.         mvD.a=Math.atan2((D2.co[1]-D0.co[1]),(D2.co[0]-D0.co[0]))-oma;
  558.         var r_=ops.r*rc,a_=mvD.a+ops.a;
  559.         D1.rps((Math.cos(a_)*r_)+nc[0],(Math.sin(a_)*r_)+nc[1]);
  560.        
  561.        
  562.         //D1 by a line between D0 & D2, & move parallel to that line keeping relative distances between points the same along the line; AKA make D1 move about the same axis, and same angle degrees as D0 & D2 movements, changing it's distance to the axis based on the change of D0 and D2 axis distance change and it's coordinate closeness to each
  563.      }},
  564.      
  565.      "crft":function crft(){ //ClacRadiusFromTangent
  566.       var d1_3x=D0.co[0]-D2.co[0],d1_3y=D0.co[1]-D2.co[1],d1_3d=PyThg(d1_3x,d1_3y), d1_2x=D0.co[0]-D1.co[0],d1_2y=D0.co[1]-D1.co[1],
  567.       d1_2ang=Math.atan2(d1_2y,d1_2x),d1_3ang=Math.atan2(d1_3y,d1_3x); sho.R=zm*(d1_3d/2)/Math.abs(Math.cos((Math.PI/2)-Math.abs(d1_2ang-d1_3ang)));
  568.        if(crft.caller==D1.om){
  569.         var d3_2x=D2.co[0]-D1.co[0],d3_2y=D2.co[1]-D1.co[1],d3_2d=PyThg(d3_2x,d3_2y),d1_2d=PyThg(d1_2x,d1_2y), aang=(d1_3ang+(Math.PI/2)), ad2=(d3_2d+d1_2d)/2; //Math.tan(?);
  570.        }
  571.       },
  572.      
  573.       "D1_rps":function tf(x,y,S){ /*confine x & y:
  574.       need to find point of intersection the x & y axis of this point have with a the line bisecting and perpendicular to line D0-D1,
  575.       choose the point of intersection that is closest to this point and move this point there
  576.      
  577.       use a point on the line that I know (middle of D0-D1), use rise/run to find intersection point of coordinate using other coordinate
  578.      
  579.       wait actually, make imaginary line paralel to D0-D1 with one end at x,y and the other on the line perpendicular to D0-D1,
  580.       move x,y to where this imag line is on perpendicular line,
  581.      
  582.       could do this by averaging x_i_y & y_i_x ?*/
  583.      
  584.       x==null?x=this.co[0]:0;y==null?y=this.co[1]:0;//keep
  585.        
  586.        var ctr=[(D0.co[0]+D2.co[0])/2,(D0.co[1]+D2.co[1])/2],cx,cy,rise=D2.co[1]-D0.co[1],run=D2.co[0]-D0.co[0],ang=Math.atan2(rise,run)+(Math.PI/2);
  587.        
  588.        var x_i_y=((x-ctr[0])*Math.tan(ang))+ctr[1]; //y coord of x-intercept ?
  589.        var y_i_x=((y-ctr[1])/Math.tan(ang))+ctr[0]; //x coord of y-intercept ?
  590.        
  591.        var x_i_dis=PyThg(x-ctr[0],x_i_y-ctr[1]); //inefficient code, fix later, works, but needs improving
  592.        var y_i_dis=PyThg(y_i_x-ctr[0],y-ctr[1]);
  593.        
  594.        //test:
  595.        //self.to1=function(a,b){return (a/(a+b))+(b/(a+b));}
  596.        var y_i_m,x_i_m,both=y_i_dis+x_i_dis;
  597.        if(x_i_dis==0){y_i_m=1;x_i_m=0;}
  598.        else if(y_i_dis==0){x_i_m=1;y_i_m=0;}
  599.        else{x_i_m=y_i_dis/both;y_i_m=x_i_dis/both;}
  600.        var newcoord=[((y_i_x*y_i_m)+(x*x_i_m)),((x_i_y*x_i_m)+(y*y_i_m))]; x=newcoord[0];y=newcoord[1]; //gets wacky as distance between pointer (mouse) and D1 increases, works mostly the way I want at realy close range
  601.        
  602.        //if(x_i_dis>y_i_dis){x=y_i_x;}else{y=x_i_y;} //uncomment this if test fail
  603.        
  604.        
  605.        S=this.style;S.left=(((x+xp))+Canvs1.cx)+"px";S.top=(Canvs1.cy-((y+yp)))+"px";this.lc=this.co;this.co=[x,y];if(typeof this.om=="function")this.om();//keep
  606.          
  607.       },
  608.        
  609.      "nw":function newArc(co){
  610.       var c0=co.length>=6?co:co.concat.apply(co,(new Array(3-(co.length/2))).fill(co)),
  611.      
  612.      
  613.       //DR is not needed. D1 makes 2 mirrored right triangles with a combined hypotonoose, 1 with D0 at the right angle & 1 with D2 at the right angle, the hypotonose is not the radius, it's a side other than the one(s) made by lines D1-D0, D1-D2, the hypotonoose is always perpendicular to a line D0-D2, D1 is always the same distance from D0 as from D2, the hypotonoose is always lined up along D0-D2 with D1
  614.      
  615.      D0=nwDot(0),
  616.      D1=nwDot(2),
  617.      D2=(dtbx.slctD=nwDot(4)),
  618.      
  619.      
  620.      sho={"type":this.type,"points":c0,"R":0,"dots":[D0,D1,D2],"mtf":Object.assign({},$B.mtf)};
  621.       //D1.rps=D1_rps.bind(D1);
  622.       P2mO([D0,D1,D2],"oS",sho); AllShps.push(sho);
  623.       //crft();
  624.       dotSlct(dtbx.slctS=sho);
  625.      },
  626.      "mmwe":!0
  627.     },
  628.    
  629.    
  630.     //end simple shapes, begin combo shapes
  631.    
  632.     "ellipse":{"type":"ellipse", //2 bezier curves? << NO!
  633.     "cxf":"ellipse",
  634.     "cmt":!1,
  635.     "nw":function newElps(co){
  636.        //there should be a total of at least 4 dots (top,bottom,left,right), possible 8 (corners:top-left,top-right,bottom-left,bottom-right)
  637.        //will need to add a "temporary select all dots in shape and move whole shape without changing it" option to all shapes and a scale(resize) option
  638.        var c0=co.concat(co,co,co),
  639.        D0=nwDot(0),
  640.        D1=nwDot(2),
  641.        D2=nwDot(4),
  642.        D3=(dtbx.slctD=nwDot(6));
  643.        
  644.        sho={"type":this.type,"points":c0,"Rot":0,"dots":[D0,D1,D2,D3],"izNew":!0,"mtf":Object.assign({},$B.mtf)};
  645.       //D1.rps=D1_rps.bind(D1);
  646.        P2mO([D0,D1,D2,D3],"oS",sho); AllShps.push(sho);
  647.       //crft();
  648.       dotSlct(dtbx.slctS=sho);
  649.     }
  650.    },
  651.    
  652.    "rectangle":{"type":"rectangle",
  653.     //4 lines
  654.     "cxf":"lineTo", "cxr":4,
  655.     "cmt":!0,
  656.     "nw":function newTrig(co){
  657.        var c0=co.concat(co,co,co),
  658.        D0=nwDot(0),
  659.        D1=nwDot(2),
  660.        D2=nwDot(4),
  661.        D3=(dtbx.slctD=nwDot(6));
  662.        
  663.        sho={"type":this.type,"points":c0,"dots":[D0,D1,D2,D3],"mtf":Object.assign({},$B.mtf)};
  664.       //D1.rps=D1_rps.bind(D1);
  665.        P2mO([D0,D1,D2,D3],"oS",sho); AllShps.push(sho);
  666.        
  667.        dotSlct(dtbx.slctS=sho);
  668.     }
  669.    },
  670.    
  671.    "triangle":{"type":"triangle",
  672.     //3 lines
  673.     "cxf":"lineTo", "cxr":3,
  674.     "cmt":!0,
  675.     "nw":function newTrig(co){
  676.        var c0=co.concat(co,co),
  677.        D0=nwDot(0),
  678.        D1=nwDot(2),
  679.        D2=(dtbx.slctD=nwDot(4));
  680.        
  681.        sho={"type":this.type,"points":c0,"dots":[D0,D1,D2],"mtf":Object.assign({},$B.mtf)};
  682.       //D1.rps=D1_rps.bind(D1);
  683.        P2mO([D0,D1,D2],"oS",sho); AllShps.push(sho);
  684.        
  685.        dotSlct(dtbx.slctS=sho);
  686.     }
  687.    },
  688.    
  689.    "polygon":{
  690.     //any amount of lines (no curves)
  691.    }
  692.    
  693.    //end shape maker objects
  694.  },
  695.  
  696.  "ani":{
  697.      "cntnr":$B.anc=d[gI]("ani_mod")
  698.  },
  699.  
  700.  "vid":{
  701.     "cntnr":$B.vbc=d[gI]("vid_mod"),
  702.     "doon":function(){if(!self.v_edity)TJA.require("https://docs.google.com/uc?id=0Bxb5iFgmM3V6TXVsakNTYV9hZVU");},
  703.     "btns":{
  704.        "nVidSrc":eAePt(($B.vbc_b=$B.vbc[gT]("button"))[0],"click",function(){ FIB_.cb=function F(dat,inf){ AllVids.push({"dat":dat,"nm":F.nm||inf.name,"type":inf?inf.type:F.xhr.getResponseHeader("Content-Type")});}; d.body[aC](FIB_); })
  705.     }
  706.  }
  707. }
  708. });
  709.  
  710. //main toolbox handler functions END
  711.  
  712.  
  713. tlbx.emod.onchange=function(){
  714.  hdAll(tlbx.cbx.children);
  715. (mo=tlbx.emdT[this.value]).cntnr.className="";
  716. if(typeof mo.doon=="function")mo.doon();
  717. self.onresize();
  718. };
  719. tlbx.emod.onchange();
  720.  
  721.  
  722. /*dtbx.oca=[]; //on click array (probably won't use this now)
  723. dtbx.onclick=function(e){
  724.    var co=[e.clientX,e.ClientY],t2=this;
  725.    t2.oca.forEach(function(v){v.call(t2,co,t2.lc);});
  726.    t2.lc=co;
  727. };*/
  730. //needs some more conversion work, I'm basically changing the whole flow chart to reduce function calls to an absolute minimum
  731.  
  732. //use WeakMap for Dot element to shape object mappings?
  733.  
  734.  
  735. var sacm={"arc":5,"line":2,"bezierCurve":6,"ellipse":8,"rectangle":2,"triangle":2,"arcTo":5,"lineTo":2,"bezierCurveTo":6},
  736.  
  737. Rndr2=function Rndr2(e){
  738.  
  739. var tar=e.target||e.srcElement,
  740. etype=e.type,
  741. co=[
  742.  (((e.clientX-(dtbx.offsetLeft+dbx2.offsetLeft)))/zm)-xp,
  743.  (((e.clientY-(dtbx.offsetTop +dbx2.offsetTop )))/zm)-yp
  744. ],
  745. b,slm,  MMV,
  746.  
  747. Dot,dap,mvDs=!1, shp,spa,ospa,
  748.  
  749. g0=!1,pass=0,Lim=65535; //(1<<144)-1;
  750.  
  751.  MMV=!0;
  752. if(etype=="mousemove"){
  753.  if(slm=(dtbx.md&&dtbx.slctD)){
  754.    //this function will soon be the catch-all event handler function for drawing shapes
  755.  
  756.    Dot=dtbx.slctD; shp=Dot.oS; //selected dot owner shape
  757.    
  758.    spa=shp.points; ospa=spa.slice();
  759.    spa[dap=Dot.p]=co[0]; spa[dap+1]=co[1]; //correct?
  760.    //Clr(ctx2); //duplicate for this run
  761.    if(shp){g0=!0; mvDs=!0; }
  762.   dtbx.lc=co;
  763.  }else if(b=dtbx.dc_){ xp=-(b[0]-e.clientX);yp=b[1]-e.clientY; Clr(ctx);
  764.   g0=!0;
  765.  }
  766.  
  767. }else if(etype=="mousedown"){
  768.  if(e.button==1){ dtbx.dc_=[e.clientX,e.clientY];
  769.  }else if(e.button==0){
  770.   var T=dtbx; T.md=!0;T.fc=co;
  771.   if(tar.nodeName=="DOT"){T.slctD=tar; //selected Dot
  772.    
  773.    Clr(ctx); Clr(ctx2); g0=!0;
  774.    if(T.slctD.oS){
  775.     if(T.slctS)dotSlct(T.slctS);Object.assign($B.mtf,(T.slctS=T.slctD.oS).mtf);dotSlct(T.slctS,!0);
  776.      
  777.    } //selected Shape
  778.   }else if(tar==Canvs1||tar==Cnvs2){
  779.    //g0=!0; // <- need this?
  780.    //for clicking on blank canvas, if there is a shape selected, move from temp canvas to main canvas and disselect
  781.    if(dtbx.slctS){ dotSlct(dtbx.slctS,!1);}
  782.    dtbx.slctS=!1;Object.assign($B.mtf,$B.mtf2);
  783.    if(typeof tlbx.slcT.nw=="function"){
  784.     tlbx.slcT.nw(co);  dotSlct(dtbx.slctS,!0);
  785.    } //"new" function for SeLecTed tool (this might only be for draw mode)
  786.    g0=!0; mvDs=!0;
  787.   }
  788.  
  789.  }
  790. }else if(etype=="mouseup"){
  791.  if(dtbx.md){
  792.   if(dtbx.slctD){ Clr(ctx);
  793.     if(dtbx.slctD.oS.izNew)delete dtbx.slctD.oS.izNew;
  794.     g0=!0;
  795.   }
  796.  }
  797.  dtbx.md=!1;dtbx.slctD=!1;dtbx.lc=co;
  798.  
  799.  if(dtbx.dc_){Clr(ctx);
  800.   g0=!0;
  801.   dtbx.dc_=!1;
  802.  }
  803. }else if(etype=="loadShps"){ MMV=!1;
  804.     g0=!0; mvDs=!0;
  805. }
  806.  
  807. var styp,mt,df,dst,dbp,Slcts,c_x,pa2, //use pa2 set to convert spa from coord array and radius data to plain coord array
  808. dots,di,ds,  j, ac, p2=0, L3;
  809.  
  810. while(g0&&pass^Lim){
  811.    
  812.    if(!slm){
  813.        shp=AllShps[pass];
  814.        spa=shp.points;
  815.    }
  816.    
  817.    dots=shp.dots;di=dots.length;
  818.    
  819.    //do draw all shapes, set g0 to false when done
  820.    styp=shp.type; mt=!0; //mt== moveTo
  821.    df=""; dst=!0; dbp=!0; //df==drawFunc, dst=doSTroke, dbp=doBeginPath;
  822.    
  823.    Slcts=slm||(shp==dtbx.slctS);c_x=Slcts?ctx2:ctx;
  824.   if(styp=="line"){ //handlers begin
  825.    df="lineTo";
  826.    pa2=spa;
  827.   }else if(styp=="bezierCurve"){
  828.    df="bezierCurveTo";
  829.    pa2=spa;
  830.   }else if(styp=="arc"){
  831.    df="arcTo";
  832.    var D0_D2_x=spa[0]-spa[4],D0_D2_y=spa[1]-spa[5],D0_D2_2=Math.sqrt((D0_D2_x*D0_D2_x)+(D0_D2_y*D0_D2_y))/2,
  833.    
  834.    D0_D2_cx=(spa[0]+spa[4])/2,D0_D2_cy=(spa[1]+spa[5])/2,
  835.    
  836.    C_D1_x=D0_D2_cx-spa[2],C_D1_y=D0_D2_cy-spa[3],C_D1=Math.sqrt((C_D1_y*C_D1_y)+(C_D1_x*C_D1_x)),
  837.    
  838.    ang1=Math.atan(C_D1/D0_D2_2);
  839.    
  840.    shp.R=D0_D2_2/Math.cos((Math.PI/2)-ang1);
  841.    
  842.    pa2=spa.concat([shp.R]);
  843.   }else if(styp=="ellipse"){ //left,right,top,bottom
  844.    df="ellipse"; mt=!1;
  845.    var f0s=0;
  846.    if(MMV){
  847.     var di2=dots.indexOf(Dot);
  848.    
  849.     var D0_D1_x=spa[0]-spa[2],D0_D1_y=spa[1]-spa[3],
  850.     D2_D3_x=spa[4]-spa[6],D2_D3_y=spa[5]-spa[7],
  851.     RoRi,RoRu;
  852.     if(di2<2){/*f0s=0;*/ RoRi=D0_D1_y;RoRu=D0_D1_x;
  853.        //needs more code
  854.     }else{ f0s=4; RoRi=D2_D3_y;RoRu=D2_D3_x; }
  855.    
  856.     if(RoRu) shp.Rot=Math.atan(RoRi/RoRu);
  857.    }
  858.    var C_x=(spa[0+f0s]+spa[2+f0s])/2, C_y=(spa[1+f0s]+spa[3+f0s])/2;
  859.    if(MMV){ var fOs
  860.     if(shp.izNew)fOs=0;else fOs=f0s;
  861.     var xcd=spa[4-fOs]-spa[6-fOs],ycd=spa[5-fOs]-spa[7-fOs], dc=Math.sqrt(xcd*xcd+ycd*ycd)/2;
  862.    
  863.     spa[4-f0s]=C_x+(Math.cos(shp.Rot+hPI)*dc); spa[5-f0s]=C_y+(Math.sin(shp.Rot+hPI)*dc);
  864.     spa[6-f0s]=C_x+(Math.cos(shp.Rot-hPI)*dc); spa[7-f0s]=C_y+(Math.sin(shp.Rot-hPI)*dc);
  865.    }
  866.    
  867.    var C_D1_y=C_y-spa[3+f0s], C_D1_x=C_x-spa[2+f0s], C_D3_y=C_y-spa[7-f0s], C_D3_x=C_x-spa[6-f0s],
  868.    x_r=Math.sqrt((C_D1_y*C_D1_y)+(C_D1_x*C_D1_x)), y_r=Math.sqrt((C_D3_y*C_D3_y)+(C_D3_x*C_D3_x)), s_r;
  869.    //if(f0s){ s_r=x_r; x_r=y_r; y_r=s_r; }
  870.    pa2=[
  871.     C_x, C_y,
  872.     x_r, y_r,
  873.     shp.Rot,
  874.     0,
  875.     Math.PI*2,
  876.     !1
  877.    ];
  878.   }else if(styp=="rectangle"){
  879.    df="lineTo";
  880.    pa2=spa;
  881.   }else if(styp=="triangle"){
  882.    df="lineTo";
  883.    pa2=spa;
  884.   }
  885.  
  886.  
  887.   //finally, draw the shape(s)
  888.  
  889.   if(dbp){ if(Slcts)Clr(ctx2); c_x.beginPath(); } //Clr is inside here in case of multi shape paths that are counted as one shape
  890.   if(mt)c_x.moveTo(pa2[0],pa2[1]);
  891.  
  892.   if(L3=(shp.cxr||$B.ted[styp].cxr)){ L3*=(ac=sacm[styp]);
  893.    if(mt){j=2; L3+=2; }else j=0;
  894.    while(j<L3){ p2=pa2.slice(j,j+ac); if(p2.length<ac) p2=p2.concat(pa2.slice(0,ac)); c_x[df].apply(c_x,p2);  j+=ac;}
  895.      
  896.   }else c_x[df].apply(c_x,mt?pa2.slice(2):pa2);
  897.  
  898.   if(dst)c_x.stroke();
  899.  
  900.  
  901.   while(mvDs&&di--){
  902.    Dot=dots[di];
  903.    ds=Dot.style;
  904.    ds.left=spa[dap=Dot.p]+"px"; ds.top=spa[dap+1]+"px";
  905.   }
  906.  
  907.  pass++;
  908.  if(slm||(pass==AllShps.length))g0=!1;
  909. }
  910. };
  911.  
  912.  
  913. self.onmousemove=Rndr2;
  914. dtbx.onmousedown=Rndr2;
  915. self.onmouseup=Rndr2;
  916.  
  917.  
  918.  
  919. self.ondrag=function(e){e.preventDefault();};
  920.  
  921.  
  922. /*dtbx.onwheel=function(e){
  923.    if(e.deltaY>0){ zm*=1.02; Rndr2({"type":"zoom"}); }else if(zm>0.2&&e.deltaY<0){ zm*=0.98; Rndr2({"type":"zoom"}); }
  924.    
  925.     dtbx.style.transform="scale("+zm+")";
  926. }; */
  927.  
  928.  
  929. var sh0wy=function(e){ var tar=e.target||e.srcElement;
  930.  if(tar.nodeName=="DOT"){
  931.   var dts=tar.oS.dots,i=dts.length;
  932.   while(i--)dts[i].classList[e.type=="mouseover"?"add":"remove"]("hovr");
  933.  }
  934. };
  935.  
  936. dtbx.onmouseover=sh0wy;
  937.  
  938. dtbx.onmouseout=sh0wy;
  939.  
  940.  
  941.  
  942.  
  943.  
  944.  
  945.  
  946.  
  947.  
  948.  
  949.  
  950. //ctx mnu
  951. var ctx_mnu=dtbx.ctx_mnu=d[gI]("ctx_mnu"),$n=null;
  952.  
  953. ctx_mnu.onclick=(self.onclick=function(e){ if(e.button!=2)ctx_mnu.className="hid";});
  954.  
  955. dtbx.oncontextmenu=function(e){ if(!ctx_mnu.ldf){ e.preventDefault(); ctx_mnu.le=e; var sy=dtbx.ctx_mnu.style; ctx_mnu.dfm=e.default; ctx_mnu.className=""; sy.top=(e.clientY-7)+"px"; sy.left=(e.clientX-7)+"px"; return !1;}else{ ctx_mnu.ldf--; return !0;}};
  956.  
  957. ctx_mnu.copy=eAePt(($B.ctxmB=ctx_mnu[gT]("button"))[0],"click",function Copy(){});
  958. ctx_mnu.cut=eAePt($B.ctxmB[1],"click",function Cut(){});
  959. ctx_mnu.paste=eAePt($B.ctxmB[2],"click",function Paste(){});
  960. ctx_mnu.delete=eAePt($B.ctxmB[3],"click",function Delete(e,s){ if(s=dtbx.slctS){var i=AllShps.indexOf(s);dtbx.slctD=(dtbx.slctS=!1);AllShps.splice(i,1);ctx2.clearRect(0,0,Cnvs2.width,Cnvs2.height);i=s.dots.length;while(i--)s.dots[i].remove(); }});
  961. ctx_mnu.merge=eAePt($B.ctxmB[4],"click",function Merge(e){ var cd,ec=[ctx_mnu.le.clientX-Canvs1.cx,Canvs1.cy-ctx_mnu.le.ClientY],dts=dtbx.geta("dot"),i=dts.length; while(i--)if(PyThg((cd=dts[i]).co[0]-ec[0],cd.co[1]-ec[1])<5) "merge";  });
  962.  
  963. ctx_mnu.rctxm=eAePt($B.ctxmB[5],"click",function Real_ctxmnu(e){ ctx_mnu.ldf=1; ctx_mnu.className="hid"; /*ctx_mnu.le.initEvent("contextmenu",!0,!1); dtbx.dispatchEvent(ctx_mnu.le); */});
  964.  
  965.  
  966. //File Input Box
  967. self.FIB_=d[gI]("fib_1");
  968. (FIB_.b=FIB_[gT]("button"))[0][aEL]("click",function(){if(typeof FIB_.cb=="function")TJA.openf(FIB_.cb);FIB_.remove();});
  969.  
  970. var hACAO=(self.location.host+",ve.media.tumblr.com,media.tumblr.com,a.tumblr.com,cors-anywhere.herokuapp.com").split(",");
  971.  
  972. FIB_.ub=FIB_[gT]("input")[0];
  973. $B.lfu_=function(){ if(typeof FIB_.cb=="function"){v_edity.load2(FIB_.cb.nm=FIB_.ub.value,FIB_.cb,hACAO.indexOf(TJA.gurl(FIB_.ub.value,"://","/"))>=0);} FIB_.className="hid";};
  974. FIB_.ub.onkeydown=function(e){if(e.keyCode==13)$B.lfu_();};
  975. FIB_.b[1][aEL]("click",$B.lfu_);
  976.  
  977.  
  978.  
  979.  
  980. //convert drawing to a save-able string
  981.  
  982. self.saveShps=function(){ var A=AllShps,i=A.length,L=i,da=[],m,ma=[],j; while(i--){m=JSON.stringify(A[i].mtf); if((j=ma.indexOf(m))+1)m="A"+j;else ma[i]=m; da[i]=(A[i].type+";"+m+";"+A[i].points.join()); } return da.join("|"); };
  983.  
  984. self.loadShps=function(d){ var A=d.split("|"),i=A.length,L=i,b; while(i--)A[i]=A[i].split(";");i=L;while(i--){b=A[i];$B.mtf=JSON.parse(b[1][0]=="A"?(A[b[1].substr(1)*1][1]):b[1]);tlbx.emdT.draw[b[0]].nw(b[2].split(",").map(function(n){return n*1;}));} Rndr2({"type":"loadShps"}); };
  985. /*
  986.  multiplier vars for x and y and radius, panning (scrolling vertical or horizontal) vars for x and y,
  987.  apply to all ctx.draw functions and all onclick or event coordinate functions, so that user can zoom in on shapes at different coords in their drawing without it looking pixelated
  988.  
  989.  
  990.  self.hidd="data:text/css;base64,"+btoa("dot{ display:none; }");
  991.  self.l2=Object.assign(d[cE]("link"),{type:"text/css",rel:"stylesheet",href:hidd});
  992.  d.head[aC](l2); //append for hide dots,
  993. */
  994. </script>
  995. </body>
  996. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!