API tools faq
paste
IWBH_01

CAP_01.html part old

IWBH_01
Jun 29th, 2020
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.60 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.     <!-- modify 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="fill" title="fill (with solid color)"><sub>&#128167;</sub>&#128319;</button>
  189.         <button name="n0t" class="slct">nothing</button>
  190.         </span>
  191.        
  192.     </span>
  193.    
  194.    
  195.     <span id="vid_mod" class="hid">
  196.         <button title="Add (load) new video source file">+ New Vid Src</button>
  197.     </span>
  198.    
  199.    
  200.     <span id="ani_mod" class="hid">
  201.        
  202.     </span>
  203.   </span>
  204. </div>
  205.  
  206. <div id="dbx2">
  207. <div id="dtbx">
  208. <canvas id="Canvas1" width="800" height="500"></canvas>
  209. <canvas id="CnvsTop" width="800" height="500"></canvas>
  210. </div>
  211. </div>
  212.  
  213. <div id="sWdh" class="hid">
  214.     Adjust slider or type # of pixels:<input type="range"><input type="number"><button >Done</button>
  215. </div>
  216.  
  217. <div id="ctx_mnu" class="hid">
  218.     <button>Copy (Ctrl+C)</button>
  219.     <button>Cut (Ctrl+X)</button>
  220.     <button>Paste (Ctrl+V)</button>
  221.     <button title="Delete Selected" >Delete (Ctrl+D)</button>
  222.     <button title="Merge Stacked dots at clicked location" >Merge (Ctrl+M)</button>
  223.     <button title="Show the real Context (right click) Menu" >Real ContextMenu</button>
  224. </div>
  225.  
  226. <div id="fib_1" class="hid">
  227.     <button title="upload a file from your computer" >Upload file</button>
  228.     or enter url below:<br>
  229.     <input><button title="Load the URL typed in the input box" >Load URL</button>
  230. </div>
  231.  
  232. <script type="text/javascript">
  233.  
  234. /*
  235. note, for all triginometric systems, be sure to correct cos error with: ang=+(xi<0?Math.PI:0);
  236. xo=cos(ang)*r, yo=sin(ang)*r;
  237. where "xi" is x-input, "ang" is angle mesure, "r" is radius, "xo" is x-output, "yo" is y-output;
  238.  
  239. when addition or subtraction is performed on ang (theta) with another cartiesian originating angle measure ("ang2"), use this
  240.  ang+ang2+(((xi<0)^(xi2<0))?Math.PI:0);
  241.  where xi2 is the source x input of ang2. "^" is the javascript binary XOR, you know
  242.  
  243.  NOTE: Math.arctan2(x,y) automatically corrects this
  244. */
  245.  
  246. HTMLCollection.prototype.forEach=Array.prototype.forEach;//  << temp
  247.  
  248. var d=document,cE="createElement",aC="appendChild",cTN="createTextNode",cN="cloneNode",gI="getElementById",gT="getElementsByTagName",qS="querySelector",qSA="querySelectorAll",aEL="addEventListener",
  249.  
  250. frms_sec,res=[800,500],
  251. tlbx=d[gI]("toolbox"),dtbx=d[gI]("dtbx"), //dtbx= dot-box (for click point circles)
  252.  
  253. Canvs1=d[gI]("Canvas1"),ctx=Canvs1.getContext('2d'),
  254. Cnvs2=d[gI]("CnvsTop"),ctx2=Cnvs2.getContext('2d'),
  255. IDB=ctx.createImageData(800,500), //rgba
  256. tIDB=ctx.createImageData(800,500), //tmp
  257.  
  258. ldfrm=function(){
  259. ctx.putImageData(IDB,0,0);
  260. },
  261.  
  262. Dps=function(x,y){
  263. if(x>res[0]||x<0||y>res[1]||y<1) return -1;
  264. y=res[1]-y;
  265. return ((y*res[0])+x)*4;
  266. },
  267.  
  268. dTPM=function(){
  269. var i=0;
  270. while(i<IDB.data.length){
  271. if(tIDB.data[i]>0){
  272.     IDB.data[i]=tIDB.data[i];
  273.     tIDB.data[i]=0;
  274. }
  275. i++;
  276. }},
  277.  
  278. pxC=function(D,b,c){ //set a pixel value (c) in an image data object (D) at data array index (b)
  279. if(b+1&&b<D.data.length){D.data[b]=c[0];
  280. D.data[b+1]=c[1];
  281. D.data[b+2]=c[2];
  282. D.data[b+3]=c[3];}
  283. },
  284.  
  285.  
  286. sqr=function(x){return x*x;}, //number x to the 2nd power
  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.  
  328. /* //this comment is old code for toolbox rendering
  329. nwBtn=function(t,f,c,s,h){
  330. var B=d[cE]("button");h?B.title=h:0;
  331. B.innerHTML=t;B.onclick=f;B.className=c||"";typeof s=="object"?Object.assign(B.style,s):0;
  332. return B;
  333. },
  334. nwSlc=function(L,f,opt,h){
  335. var S=d[cE]("select");h?S.title=h:0;S.onchange=f;L?S.L=L:0;
  336. opt.forEach(function(op){var oe=d[cE]("option");typeof op=="string"?op=[op]:0;oe.value=op[0];oe.innerHTML=op[1]||op[0];S[aC](oe);});
  337. return S;
  338. }, */
  339.  
  340.  
  341.  
  342. eAePt=function ElementAddEventPassThru(elm,evn,evf,b){
  343.    elm[aEL](evn,evf.bind(elm),b);
  344.    if(!elm["LF_"+evn])elm["LF_"+evn]=[]; //temp debug?
  345.    elm["LF_"+evn].push([evf,b]);
  346.    return elm;
  347. },
  348.  
  349.  
  350.  
  351. dotRp=function(x,y,S){ //dot RePosition
  352.    x=x||this.co[0]; y=y||this.co[1];
  353.    S=this.style; S.left=(((x+xp))+Canvs1.cx)+"px";
  354.    S.top=(Canvs1.cy-((y+yp)))+"px"; this.lc=this.co; this.co=[x,y];
  355.    if(typeof this.om=="function") this.om();
  356. }, //remember y is negated (HTML5 Canvas y is top down counting #s up)
  357.  
  358. nwDot=function(x,y,om,rp){
  359. var D=d[cE]("dot");D.co=[x,y];(D.rps=(rp||dotRp).bind(D))(x,y);if(typeof om=="function")D.om=om.bind(D);
  360. dtbx[aC](D);
  361. return D;
  362. },
  363.  
  364.  
  365. avgCo=function(ca){//average an array of coordinates
  366. var i=ca.length,j=i/2,ac0=0,ac1=0;
  367. while(i-=2){ac0+=ca[i];ac1+=ca[i+1];}
  368. return [ac0/j,ac1/j];
  369. },
  370.  
  371. PyThg=function(x,y){//pythagorean theorem 2 short sides input (do not use sqr because that would increase function calls)
  372. return Math.sqrt((x*x)+(y*y));
  373. },
  374.  
  375. 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
  376. var i=coa.length,coa2=[],y;
  377. while(i--){y=i%2;coa2[i]=fC[y]+((y?-1:1)*(coa[i]+(y?yp:xp)));}//add x, subtract y
  378. return coa2;
  379. },
  380.  
  381. Clr=function(c,C){ //clear the canvas given by its ctx object (c)
  382. c.clearRect(0,0,(C=c.canvas).width,C.height);
  383. },
  384.  
  385.  
  386. P2mO=function(oa,pn,pv){//property to multiple objects
  387. oa.forEach(function(O){O[pn]=pv;});
  388. },
  389.  
  390. 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)
  391. var _F=function(v){return v?so[pn]=v:so[pn];};
  392. Object.defineProperty(DO,dpn||pn,{"get":_F,"set":_F});
  393. return DO;
  394. },
  395.  
  396. dotSlct=function(shp,slc,v){ //toggle selection of all the dots in a shape (shp)
  397.    v=slc?"slct":"";for(var i=0;i<shp.dots.length;i++)shp.dots[i].className=v;
  398. },
  399.  
  400.  
  401. $B={"bc":[ctx2,ctx],"ef":function(){},
  402.    //mtf is supposed to be for saving drawing tool options
  403.    "mtf":{"lineWidth":1,"lineCap":"round","lineJoin":"miter","strokeStyle":"#000000","fillStyle":"#000000","doFill":!1},
  404.    "kdc":function(sy){/*keep draw customization (line & fill options etc.)*/Object.assign($B.bc[0],sy);Object.assign($B.bc[1],sy); }
  405. };
  406. $B.mtf2=Object.assign({},$B.mtf);//buffer variable (use to store temp data & save html file bytes)
  407.  
  408.  
  409. Object.defineProperties(HTMLCanvasElement.prototype,{
  410. "cx":{"get":function(){return (this.width/2);}},
  411. "cy":{"get":function(){return (this.height/2);}}
  412. });
  413.  
  414.  
  415.  
  416. var hdAll=function(nL){
  417.    var i=nL.length;
  418.    while(i--)nL[i].className="hid";
  419. },
  420. dbx2=d[gI]("dbx2");
  421. self.onresize=function(){
  422.    var tlbh=tlbx.clientHeight+20,
  423.    wkw=d.body.clientWidth-20,
  424.    wkh=d.documentElement.clientHeight-tlbh-50;
  425.    
  426.    dbx2.style.top=tlbh+"px";
  427.    dbx2.style.width=wkw+"px";
  428.    dbx2.style.height=wkh+"px";
  429. };
  430.  
  431.  
  432. //main toolbox handler functions
  433.  
  434. Object.assign(tlbx,
  435.    {"emod":d[gI]("emod"),"slcT":!1, //slcT = selcted Tool
  436. "sClr":Object.assign(d[cE]("input"),{"type":"color"}), //color select dialog
  437. "sWdh":(function(){ //set Width
  438.     var sWdh=d[gI]("sWdh"),n1=sWdh[qS]("input[type=range]"),
  439.     n2=sWdh[qS]("input[type=number]"),
  440.     cls=function(){ sWdh.className="hid"; },
  441.    F=function(n){
  442.         if(!isNaN(n)){ $B.mtf.lineWidth=n;dtbx.slctS?dtbx.slctS.mtf.lineWidth=n:0;}
  443.    };
  444.    n1[aEL]("mousemove",function(){F(n2.value=n1.value/2);});
  445.    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);});
  446.     n1.value=2;n2.value=1;
  447.  
  448.     sWdh[gT]("button")[0][aEL]("click",cls);
  449.     sWdh[aEL]("mouseleave",cls);
  450.     return sWdh;
  451.  })(),
  452.  "uslo":function(){tlbx.emdT[tlbx.emod.value].cntnr[qS]("[name=atool]").geta("button").forEach(function(b){b.className="";});},//unselect buttons
  453.  
  454.  "cbx":d[gI]("cbx"),
  455.  
  456.  
  457.  "emdT":{ //emod (edit mode) Tools
  458.  
  459.   "draw":$B.ted={
  460.     "cntnr":$B.dbc=d[gI]("draw_mod"),
  461.     "btns":{
  462.      "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;}),
  463.      "lnJnSty":eAePt($B.dbc_s[1],"change",function(){$B.mtf.lineJoin=this.value;dtbx.slctS?dtbx.slctS.mtf.lineJoin=this.value:0;}),
  464.      
  465.      "SpFlSty":eAePt($B.sfc=$B.dbc_s[2],"change",function(){var v=this.value,btn=$B.ted.btns.SpFlBtn;
  466.       hdAll(btn.children);
  467.       if(v=="none"){ $B.mtf.doFill=!1; }else{ $B.mtf.doFill=!0; }
  468.           btn[qS]("[name="+v+"]").className="";
  469.         if(v=="color")btn[gT]("c")[0].backgroundColor=$B.mtf.fillStyle;
  470.       }), //end SpFlSty
  471.      "SpFlBtn":Object.assign(NpGs(eAePt(($B.dbc_b=$B.dbc[gT]("button"))[0],"click",$B.sty_d=function(){
  472.          var v=this.sle.value;
  473.          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();}
  474.          else if(v=="gradient"){}
  475.          else if(v=="pattern"){}
  476.      }),
  477.      $B.mtf,"fillStyle","put"),{"nm":"fillStyle","sle":$B.sfc}),
  478.      
  479.      "lnSty":eAePt($B.lsy=$B.dbc_s[3],"change",function(){var v=this.value,btn=$B.ted.btns.lnSyBtn;
  480.       hdAll(btn.children); btn[qS]("[name="+v+"]").className="";
  481.       if(v=="color")btn[gT]("c")[0].backgroundColor=$B.mtf.fillStyle;
  482.      }), //end lnSty
  483.      "lnSyBtn":Object.assign(NpGs(eAePt($B.dbc_b[1],"click",$B.sty_d),
  484.      $B.mtf,"strokeStyle","put"),{"nm":"strokeStyle","sle":$B.lsy}),
  485.      
  486.      "lnWdh":eAePt($B.dbc_b[2],"click",function(){tlbx.sWdh.className="";}),
  487.      
  488.      "line":eAePt($B.dbc_b[3],"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.line;this.className="slct";}),
  489.      "bezierCurve":eAePt($B.dbc_b[4],"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.bezierCurve;this.className="slct";}),
  490.      "arc":eAePt($B.dbc_b[5],"click",function(){tlbx.uslo();tlbx.slcT=$B.ted.arc;this.className="slct";}),
  491.       "nothing":eAePt($B.dbc[qS]("button[name=n0t]"),"click",function(){tlbx.uslo();tlbx.slcT=!1;this.className="slct";})
  492.     },
  493.    
  494.    
  495.     //end buttons, begin shape maker objects with drawer functions
  496.    
  497.     "line":{"type":"line",
  498.      "nw":function newLine(co){ /*draw new line*/
  499.       var lnArg=co.length==4?co:co.concat(co),c0=lnArg, drawr=function(M,nB,nS,_F){ //M = Boolean (draw on main canvas), true=yes,false=no;
  500.        lnArg.splice.apply(lnArg,([0,4]).concat(D1.co,D2.co));
  501.        Clr(ctx2);
  502.        var cx_=M?ctx:ctx2, coa2=Cnv_Coa(lnArg,[Canvs1.cx,Canvs1.cy]);
  503.        dtbx.slctS==sho?Object.assign(sho.mtf,$B.mtf):0;
  504.        if(!nB){cx_.beginPath();
  505.        $B.kdc(sho.mtf);
  506.        cx_.moveTo(coa2[0],coa2[1]);}
  507.        cx_.lineTo(coa2[2],coa2[3]);
  508.        nS?0:cx_.stroke();
  509.        _F?cx_.fill():0;
  510.       },
  511.       D1=nwDot(c0[0],c0[1],drawr),
  512.       D2=(dtbx.slctD=nwDot(c0[2],c0[3],drawr)),
  513.       sho={"type":this.type,"points":lnArg,"dots":[D1,D2],"drawr":drawr,"mtf":Object.assign({},$B.mtf)}; D2.oS=(D1.oS=sho); AllShps.push(sho); dotSlct(dtbx.slctS=sho);//.oS = owning Shape
  514.      }
  515.     },
  516.    
  517.     "bezierCurve":{"type":"bezierCurve",
  518.      "nw":function newBezierCurve(co){/*draw new bezierCurve*/
  519.        var Uths=this, curvArg=co.length>=8?co:co.concat.apply(co,(new Array(4-(co.length/2))).fill(co)),c0=curvArg, dD=!1,drawr=function(M,nB,nS,_F){if(!dD){dD=!0;//did Draw (recently within 1/200th of a second)
  520.         /*dot on-move function (re-draw the whole curve in Cnvs2)*/
  521.  
  522.         Clr(ctx2);
  523.         var cx_=M?ctx:ctx2, coa2=Cnv_Coa(curvArg,[Canvs1.cx,Canvs1.cy]),i_S=dtbx.slctS==sho;
  524.         i_S?Object.assign(sho.mtf,$B.mtf):0;
  525.         if(!nB){cx_.beginPath(); //nB==no Begin (use for drawing fill-inable shapes)
  526.         $B.kdc(sho.mtf);
  527.        
  528.         cx_.moveTo(coa2[0],coa2[1]);}
  529.         cx_.bezierCurveTo.apply(cx_,coa2.slice(2));
  530.        
  531.         nS?0:cx_.stroke();
  532.         _F?cx_.fill():0;
  533.         setTimeout(function(){dD=!1;},5);
  534.        }},
  535.        itm=function(){if(Uths.mmwe){
  536.         //in the middle: (move D2 & D3 when either D1 or D4 moves)
  537.        var ev,ev2,mvD={1:[D1.co[0]-D1.lc[0],D1.co[1]-D1.lc[1]],4:[D4.co[0]-D4.lc[0],D4.co[1]-D4.lc[1]]},
  538.        oc=[(D1.lc[0]+D4.lc[0])/2,(D1.lc[1]+D4.lc[1])/2], oma=Math.atan2((D4.lc[1]-D1.lc[1]),(D4.lc[0]-D1.lc[0])),
  539.        nc=[(D1.co[0]+D4.co[0])/2,(D1.co[1]+D4.co[1])/2], or=PyThg(D1.lc[0]-oc[0],D1.lc[1]-oc[1]), nr=PyThg(D1.co[0]-nc[0],D1.co[1]-nc[1]), rc=or?nr/or:1, n1,n2,
  540.        ops={2:{'r':PyThg(n1=D2.co[0]-oc[0],D2.co[1]-oc[1],1),'a':Math.atan2((D2.co[1]-oc[1]),(D2.co[0]-oc[0]))}, 3:{'r':PyThg(n2=D3.co[0]-oc[0],D3.co[1]-oc[1],1),'a':Math.atan((D3.co[1]-oc[1])/(ev=D3.co[0]-oc[0]))+(ev<0?(Math.PI):0)}};
  541.         mvD.a=Math.atan2((D4.co[1]-D1.co[1]),(ev=D4.co[0]-D1.co[0]))-oma;
  542.         var r_=ops[2].r*rc,a_=mvD.a+ops[2].a;
  543.         D2.rps((Math.cos(a_)*r_)+nc[0],(Math.sin(a_)*r_)+nc[1]);
  544.        
  545.         D3.rps((Math.cos(a_=mvD.a+ops[3].a)*(r_=ops[3].r*rc))+nc[0],(Math.sin(a_)*r_)+nc[1]);
  546.        
  547.         //D2 & D3 by a line between D1 & D4, & move parallel to that line keeping relative distances between points the same along the line; AKA make D2 and D3 move about the same axis, and same angle degrees as D1 & D4 movements, changing their distance to the axis based on the change of D1 and D4 axis distance change and their coordinate closeness to each
  548.       }else drawr();},
  549.        D1=nwDot(c0[0],c0[1],function(){curvArg.splice(0,2,D1.co[0],D1.co[1]);itm();}), //beggining dot
  550.        D2=nwDot(c0[2],c0[3],function(){curvArg.splice(2,2,D2.co[0],D2.co[1]);drawr();}), //1st control point dot
  551.        D3=nwDot(c0[4],c0[5],function(){curvArg.splice(4,2,D3.co[0],D3.co[1]);drawr();}), //2nd control point dot
  552.        D4=(dtbx.slctD=nwDot(c0[6],c0[7],function(){curvArg.splice(6,2,D4.co[0],D4.co[1]);itm();})), //ending dot (select it so you can streatch the curve out)
  553.        //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;
  554.        sho={"type":this.type,"points":curvArg,"dots":[D1,D2,D3,D4],"drawr":drawr,"mtf":Object.assign({},$B.mtf)}; P2mO([D1,D2,D3,D4],"oS",sho); AllShps.push(sho); dotSlct(dtbx.slctS=sho);
  555.      },
  556.      "mmwe":!0 //move middle with ends (see line 160ish in function 'itm' in bezierCurve.nw)
  557.     },
  558.    
  559.     "arc":{"type":"arc",
  560.      "nw":function newArc(co){
  561.       var Uths=this,arcG=co.length>=6?co:co.concat.apply(co,(new Array(3-(co.length/2))).fill(co)),c0=arcG,drawr=function(M,nB,nS,_F){
  562.        //ctx.arcTo(x1,y1,x2,y2,radius);
  563.        Clr(ctx2);
  564.        var cx_=M?ctx:ctx2, coa2=Cnv_Coa(arcG,[Canvs1.cx,Canvs1.cy]);
  565.        dtbx.slctS==sho?Object.assign(sho.mtf,$B.mtf):0;
  566.        if(!nB){cx_.beginPath();
  567.        $B.kdc(sho.mtf);
  568.        cx_.moveTo(coa2[0],coa2[1]);}
  569.        cx_.arcTo.apply(cx_,coa2.slice(2).concat([sho.R]));
  570.        nS?0:cx_.stroke();
  571.        _F?cx_.fill():0;
  572.       },
  573.       itm=function(){if(Uths.mmwe){
  574.         //in the middle: (move D2 & D3 when either D1 or D4 moves)
  575.        var mvD={1:[D1.co[0]-D1.lc[0],D1.co[1]-D1.lc[1]],3:[D3.co[0]-D3.lc[0],D3.co[1]-D3.lc[1]]},
  576.        oc=[(D1.lc[0]+D3.lc[0])/2,(D1.lc[1]+D3.lc[1])/2], oma=Math.atan2((D3.lc[1]-D1.lc[1]),(D3.lc[0]-D1.lc[0])),
  577.        nc=[(D1.co[0]+D3.co[0])/2,(D1.co[1]+D3.co[1])/2], or=PyThg(D1.lc[0]-oc[0],D1.lc[1]-oc[1]), nr=PyThg(D1.co[0]-nc[0],D1.co[1]-nc[1]), rc=or?nr/or:1, n1,n2,
  578.        ops={'r':PyThg(n1=D2.co[0]-oc[0],D2.co[1]-oc[1],1),'a':Math.atan2((D2.co[1]-oc[1]),(D2.co[0]-oc[0]))};
  579.         mvD.a=Math.atan2((D3.co[1]-D1.co[1]),(D3.co[0]-D1.co[0]))-oma;
  580.         var r_=ops.r*rc,a_=mvD.a+ops.a;
  581.         D2.rps((Math.cos(a_)*r_)+nc[0],(Math.sin(a_)*r_)+nc[1]);
  582.        
  583.        
  584.         //D2 by a line between D1 & D3, & move parallel to that line keeping relative distances between points the same along the line; AKA make D2 move about the same axis, and same angle degrees as D1 & D3 movements, changing it's distance to the axis based on the change of D1 and D3 axis distance change and it's coordinate closeness to each
  585.       }else drawr();},
  586.      
  587.       //DR is not needed. D2 makes 2 mirrored right triangles with a combined hypotonoose, 1 with D1 at the right angle & 1 with D3 at the right angle, the hypotonose is not the radius, it's a side other than the one(s) made by lines D2-D1, D2-D3, the hypotonoose is always perpendicular to a line D1-D3, D2 is always the same distance from D1 as from D3, the hypotonoose is always lined up along D1-D3 with D2
  588.      crft=function crft(){ //ClacRadiusFromTangent
  589.       var d1_3x=D1.co[0]-D3.co[0],d1_3y=D1.co[1]-D3.co[1],d1_3d=PyThg(d1_3x,d1_3y), d1_2x=D1.co[0]-D2.co[0],d1_2y=D1.co[1]-D2.co[1],
  590.       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)));
  591.        if(crft.caller==D2.om){
  592.         var d3_2x=D3.co[0]-D2.co[0],d3_2y=D3.co[1]-D2.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(?);
  593.        }
  594.       },
  595.       D1=nwDot(c0[0],c0[1],function(){arcG.splice(0,2,D1.co[0],D1.co[1]);crft();itm();}),
  596.       D2=nwDot(c0[2],c0[3],function(){arcG.splice(2,2,D2.co[0],D2.co[1]);crft();drawr();}),
  597.       D3=(dtbx.slctD=nwDot(c0[4],c0[5],function(){arcG.splice(4,2,D3.co[0],D3.co[1]);crft();itm();})),
  598.      
  599.       D2_rps=function tf(x,y,S){ /*confine x & y:
  600.       need to find point of intersection the x & y axis of this point have with a the line bisecting and perpendicular to line D1-D2,
  601.       choose the point of intersection that is closest to this point and move this point there
  602.      
  603.       use a point on the line that I know (middle of D1-D2), use rise/run to find intersection point of coordinate using other coordinate
  604.      
  605.       wait actually, make imaginary line paralel to D1-D2 with one end at x,y and the other on the line perpendicular to D1-D2,
  606.       move x,y to where this imag line is on perpendicular line,
  607.      
  608.       could do this by averaging x_i_y & y_i_x ?*/
  609.      
  610.       x==null?x=this.co[0]:0;y==null?y=this.co[1]:0;//keep
  611.        
  612.        var ctr=[(D1.co[0]+D3.co[0])/2,(D1.co[1]+D3.co[1])/2],cx,cy,rise=D3.co[1]-D1.co[1],run=D3.co[0]-D1.co[0],ang=Math.atan2(rise,run)+(Math.PI/2);
  613.        
  614.        var x_i_y=((x-ctr[0])*Math.tan(ang))+ctr[1]; //y coord of x-intercept ?
  615.        var y_i_x=((y-ctr[1])/Math.tan(ang))+ctr[0]; //x coord of y-intercept ?
  616.        
  617.        var x_i_dis=PyThg(x-ctr[0],x_i_y-ctr[1]); //inefficient code, fix later, works, but needs improving
  618.        var y_i_dis=PyThg(y_i_x-ctr[0],y-ctr[1]);
  619.        
  620.        //test:
  621.        //self.to1=function(a,b){return (a/(a+b))+(b/(a+b));}
  622.        var y_i_m,x_i_m,both=y_i_dis+x_i_dis;
  623.        if(x_i_dis==0){y_i_m=1;x_i_m=0;}
  624.        else if(y_i_dis==0){x_i_m=1;y_i_m=0;}
  625.        else{x_i_m=y_i_dis/both;y_i_m=x_i_dis/both;}
  626.        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 D2 increases, works mostly the way I want at realy close range
  627.        
  628.        //if(x_i_dis>y_i_dis){x=y_i_x;}else{y=x_i_y;} //uncomment this if test fail
  629.        
  630.        
  631.        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
  632.          
  633.       },
  634.       sho={"type":this.type,"points":arcG,"R":0,"dots":[D1,D2,D3],"drawr":drawr,"mtf":Object.assign({},$B.mtf)};
  635.       D2.rps=D2_rps.bind(D2);P2mO([D1,D2,D3],"oS",sho); AllShps.push(sho); crft(); dotSlct(dtbx.slctS=sho); D1.title="D1";D2.title="D2";D3.title="D3";
  636.      },
  637.      "mmwe":!0
  638.     },
  639.    
  640.    
  641.     //end simple shapes, begin combo shapes
  642.    
  643.     "ellipse":{ //2 bezier curves?
  644.     },
  645.    
  646.     "rectangle":{
  647.         //4 lines
  648.     },
  649.    
  650.     "triangle":{
  651.         //3 lines
  652.     }
  653.    
  654.     //end shape maker objects
  655.   },
  656.  
  657.   "ani":{
  658.       "cntnr":$B.anc=d[gI]("ani_mod")
  659.   },
  660.  
  661.   "vid":{
  662.      "cntnr":$B.vbc=d[gI]("vid_mod"),
  663.      "doon":function(){if(!self.v_edity)TJA.require("https://docs.google.com/uc?id=0Bxb5iFgmM3V6TXVsakNTYV9hZVU");},
  664.      "btns":{
  665.         "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_); },0,0,"Add (load) new video source file")
  666.      }
  667.   }
  668.  }
  669. });
  670.  
  671. //main toolbox handler functions END
  672.  
  673.  
  674. tlbx.emod.onchange=function(){
  675.   hdAll(tlbx.cbx.children);
  676.  (mo=tlbx.emdT[this.value]).cntnr.className="";
  677.  if(typeof mo.doon=="function")mo.doon();
  678.  self.onresize();
  679. };
  680. tlbx.emod.onchange();
  681.  
  682.  
  683. /*dtbx.oca=[]; //on click array (probably won't use this now)
  684. dtbx.onclick=function(e){
  685.     var co=[e.clientX,e.ClientY],t2=this;
  686.     t2.oca.forEach(function(v){v.call(t2,co,t2.lc);});
  687.     t2.lc=co;
  688. };*/
  689.  
  690. self.onmousemove=function(e){let b;
  691.  if(dtbx.md){ var tar=e.target||e.srcElement,co=[(((e.clientX-(dtbx.offsetLeft+dbx2.offsetLeft))-Canvs1.cx)/zm)-xp,((Canvs1.cy-(e.clientY-(dtbx.offsetTop+dbx2.offsetTop)))/zm)-yp];
  692.   if(dtbx.slctD){
  693.    dtbx.slctD.rps(co[0],co[1]);
  694.   }
  695.   dtbx.lc=co;
  696.  }else if(b=dtbx.dc_){ xp=-(b[0]-e.clientX);yp=b[1]-e.clientY; Clr(ctx);Render(!0); }
  697. };
  698.  
  699. var Render=function(dd){ //do dot
  700.  var i=AllShps.length,L=i,j,S;
  701.  while(i--){ if((S=AllShps[i])!=dtbx.slctS)S.drawr(!0);}
  702.  if(dd){i=L;while(i--){(S=AllShps[i].dots)[0].rps();S[S.length-1].rps();}}
  703.  if(dtbx.slctS)dtbx.slctS.drawr();
  704. };
  705.  
  706. dtbx.onmousedown=function(e){
  707.  if(e.button==2)return 0;
  708.  else if(e.button==1){ dtbx.dc_=[e.clientX,e.clientY]; return 0;}
  709.  var tar=e.target||e.srcElement,co=[((e.clientX-(dtbx.offsetLeft+dbx2.offsetLeft)-Canvs1.cx)/zm)-xp,((Canvs1.cy-(e.clientY-
  710. (dtbx.offsetTop+dbx2.offsetTop)))/zm)-yp],T=this; T.md=!0;T.fc=co;
  711.  if(tar.nodeName=="DOT"){T.slctD=tar; //selected Dot
  712.   Clr(ctx);
  713.   if(T.slctD.oS){if(T.slctS)dotSlct(T.slctS);Object.assign($B.mtf,(T.slctS=T.slctD.oS).mtf);dotSlct(T.slctS,!0);} //selected Shape
  714.   Render();
  715.  }else if(tar==Canvs1||tar==Cnvs2){
  716.   if(dtbx.slctS){dtbx.slctS.drawr(!0);dotSlct(dtbx.slctS,!1);}dtbx.slctS=!1;Object.assign($B.mtf,$B.mtf2);
  717.   if(typeof tlbx.slcT.nw=="function"){tlbx.slcT.nw(co); dotSlct(dtbx.slctS,!0);} //"new" function for SeLecTed tool (this might only be for draw mode)
  718.  }
  719. };
  720.  
  721. self.onmouseup=function(e){ var tar=e.target||e.srcElement,co=[(((e.clientX-(dtbx.offsetLeft+dbx2.offsetLeft))-Canvs1.cx)/zm)-xp,((Canvs1.cy-(e.clientY-(dtbx.offsetTop+dbx2.offsetTop)))/zm)-yp];
  722.  if(dtbx.md){
  723.   if(dtbx.slctD){
  724.    dtbx.slctD.rps(co[0],co[1]);
  725.   }
  726.  }
  727.  dtbx.md=!1;dtbx.slctD=!1;dtbx.lc=co; if(dtbx.dc_){Clr(ctx);Render(!0);dtbx.dc_=!1;}
  728. };
  729. self.ondrag=function(e){e.preventDefault();};
  730.  
  731.  
  732. /*dtbx.onwheel=function(e){
  733.     if(e.deltaY>0){ zm*=1.02; Clr(ctx);Render(!0); }else if(zm>0.2&&e.deltaY<0){ zm*=0.98; Clr(ctx); Render(!0); }
  734.    
  735.     dtbx.style.transform="scale("+zm+")";
  736. }; */
  737.  
  738.  
  739. dtbx.onmouseover=function(e){ var tar=e.target||e.srcElement;
  740.  if(tar.nodeName=="DOT"){
  741.   var dts=tar.oS.dots,i=dts.length;
  742.   while(i--)dts[i].classList.add("hovr");
  743.  }
  744. };
  745.  
  746. dtbx.onmouseout=function(e){ var tar=e.target||e.srcElement;
  747.  if(tar.nodeName=="DOT"){
  748.   var dts=tar.oS.dots,i=dts.length;
  749.   while(i--)dts[i].classList.remove("hovr");
  750.  }
  751. };
  752.  
  753.  
  754.  
  755.  
  756.  
  757. //ctx mnu
  758. var ctx_mnu=dtbx.ctx_mnu=d[gI]("ctx_mnu"),$n=null;
  759.  
  760. ctx_mnu.onclick=(self.onclick=function(e){ if(e.button!=2)ctx_mnu.className="hid";});
  761.  
  762. 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;}};
  763.  
  764. ctx_mnu.copy=eAePt(($B.ctxmB=ctx_mnu[gT]("button"))[0],"click",function Copy(){});
  765. ctx_mnu.cut=eAePt($B.ctxmB[1],"click",function Cut(){});
  766. ctx_mnu.paste=eAePt($B.ctxmB[2],"click",function Paste(){});
  767. 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(); }});
  768. 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";  });
  769.  
  770. 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); */});
  771.  
  772.  
  773. //File Input Box
  774. self.FIB_=d[gI]("fib_1");
  775. (FIB_.b=FIB_[gT]("button"))[0][aEL]("click",function(){if(typeof FIB_.cb=="function")TJA.openf(FIB_.cb);FIB_.remove();});
  776.  
  777. var hACAO=(self.location.host+",ve.media.tumblr.com,media.tumblr.com,a.tumblr.com,cors-anywhere.herokuapp.com").split(",");
  778.  
  779. FIB_.ub=FIB_[gT]("input")[0];
  780. $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";};
  781. FIB_.ub.onkeydown=function(e){if(e.keyCode==13)$B.lfu_();};
  782. FIB_.b[1][aEL]("click",$B.lfu_);
  783.  
  784.  
  785.  
  786.  
  787. //convert drawing to a save-able string
  788.  
  789. 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("|"); };
  790.  
  791. 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;}));} Render(); dotSlct(dtbx.slctS,!0);dtbx.slctS.drawr(); };
  792. /*
  793.  make multiplier vars for x and y and radius, panning (scrolling vertical or horizontal) vars for x and y,
  794.  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
  795.  
  796.  
  797.  self.hidd="data:text/css;base64,"+btoa("dot{ display:none; }");
  798.  self.l2=Object.assign(d[cE]("link"),{type:"text/css",rel:"stylesheet",href:hidd});
  799.  d.head[aC](l2); //append for hide dots,
  800. */
  801. </script>
  802. </body>
  803. </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!