WebSVN – wimsdev – Diff – /trunk/wims/src/Misc/canvasdraw/canvasutils.c

  return math_fun;\
 };");
 break;
 case INTERACTIVE:
+ fprintf(js_include_file,"\n/* add mouse support */\
+var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));\
+var getMouse = function(e, element){\
+   var mx,my;var offsetX = 0,offsetY = 0;\
+   while( ( element = element.offsetParent) ){\
+     offsetX += element.offsetLeft;offsetY += element.offsetTop;\
+   };\
+   /*console.log('===');*/\
+   if(isTouch){\
+      mx = e.pageX - offsetX; my = e.pageY - offsetY;\
+   }else{\
- fprintf(js_include_file,"\n/* add mouse support */ var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));var getMouse = function(e,element){var mx,my;var offsetX = 0,offsetY = 0;while( ( element = element.offsetParent) ){offsetX += element.offsetLeft;offsetY += element.offsetTop;};if(isTouch){mx = e.pageX - offsetX;my = e.pageY - offsetY;}else{mx = e.clientX - offsetX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft);my = e.clientY - offsetY + (document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop);};return {x: mx, y: my};};");
+      mx = e.clientX - offsetX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft:document.body.scrollLeft);\
+      my = e.clientY - offsetY + (document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop);\
+   };\
+   /* test if canvas_div is inside a scrollable */\
+   const scroll_parent = canvas_div.closest('.wims_scrollable');\
+   if (scroll_parent){\
+      mx = mx + scroll_parent.scrollLeft;\
+      my = my + scroll_parent.scrollTop;\
+   }\
+   /* If canvas had been resized,, we have to convert these coordinates to original grid*/\
+   /*console.log('mx before=' + mx);\
+   console.log('xsize='+xsize);\
+   console.log('canvas_div.offsetHeight='+canvas_div.offsetWidth);*/\
+   mx = (mx * xsize / canvas_div.offsetWidth);\
+   /*console.log('mx after='+mx);*/\
+   my = (my * ysize / canvas_div.offsetHeight);\
+   return {x: mx, y: my};\
+};");
 break;
 case USERDRAW_AND_ZOOM:
 fprintf(js_include_file,"\n/* add zoom support for multidraw */\
 function recalculate_userdraw(xmin0,ymin0,xmax0,ymax0){\
  function x_zoom(px){\
 =xyoffset
 =centered
 */
 fprintf(js_include_file,"\n/* draw sub sup imitation in canvas */\
 function draw_subsup(ctx,x,y,txt,use_offset){\
- var fnt = ctx.font;\
- var S = fnt.replace(/[A-Za-z]/g, '');\
- var s = 0.8*S;\
- var px;if(fnt.indexOf('px')>0){px = 'px';}else{if(fnt.indexOf('em')>0){px = 'em';}else{px = 'pt';}};\
  var C;var c;var len = txt.length;var baseline = 'middle';var space = 0;ctx.save();var subsup=0;\
  var m = 0.4*(ctx.measureText(txt).width);\
  var h = ctx.measureText('M').width;\
  switch(use_offset){\
   case 0:break;\
   case 2:x=x+h;break;\
   case 3:x=x+h;y=y-h;;break;\
   case 4:x=x-m;break;\
   default:break;\
  };\
+ var S = parseInt(ctx.font) || 10;var s = 0.8*(parseInt(ctx.font)) || 8;\
- ctx.font = S+px+' Helvetica';ctx.textBaseline = baseline;\
+ ctx.font = S+'px Helvetica';ctx.textBaseline = baseline;\
  for( c = 0 ; c < len ;c++){\
   C = txt.charAt(c);space = 0;\
-  if(C == '_'){ctx.font = s+px+' Helvetica';subsup = 1;c++;space = 3;baseline='top';C = txt.charAt(c);}\
+  if(C == '_'){ctx.font = s+'px Helvetica';subsup = 1;c++;space = 3;baseline='top';C = txt.charAt(c);}\
   else\
-  if(C == '^'){ctx.font = s+px+' Helvetica';subsup = 1;c++;space = 3;baseline='bottom';C = txt.charAt(c);}\
+  if(C == '^'){ctx.font = s+'px Helvetica';subsup = 1;c++;space = 3;baseline='bottom';C = txt.charAt(c);}\
   else\
-  if(C == ' '){ctx.font = S+px+' Helvetica';if(subsup == 1){space = 0.6*s - (ctx.measureText('M').width);subsup = 0;};baseline = 'middle';}\
+  if(C == ' '){ctx.font = S+'px Helvetica';if(subsup == 1){space = 0.6*s - (ctx.measureText('M').width);subsup = 0;};baseline = 'middle';}\
   else\
   if(C >= '0' && C <= '9'){ctx.font = s+'px Helvetica';}\
-  else{ctx.font = S+px+' Helvetica';};\
+  else{ctx.font = S+'px Helvetica';};\
   ctx.textBaseline = baseline;ctx.fillText(C,x,y);x = space + x + ctx.measureText(C).width;\
  };\
  ctx.stroke();\
  ctx.restore();\
  return;\
 fprintf(js_include_file,"\n/* draw xml */\
 function centered(xml_div,obj){\
  var ww = 0.5*(parseFloat(window.getComputedStyle(xml_div).width));\
  var hh = 0.5*(parseFloat(window.getComputedStyle(xml_div).height));\
  obj.offset = [ ww , hh ];\
+ /*xml_div.style.left = obj.x[0] - obj.offset[0] +'px';\
+ xml_div.style.top  = obj.y[0] - obj.offset[1] +'px';*/\
- xml_div.style.left = obj.x[0] - obj.offset[0] +'px';xml_div.style.top  = obj.y[0] - obj.offset[1] +'px';\
+ xml_div.style.left = (obj.x[0] - obj.offset[0])/xsize*100 +'%%';\
+ xml_div.style.top  = (obj.y[0] - obj.offset[1])/ysize*100 +'%%';\
 };\
 function rad2deg(rad){return rad*180/(Math.PI);};\
 if( typeof(slidergroup) !== 'object' ){ var slidergroup = [];};\
 function draw_xml(obj){\
  var mouse;var xy = [obj.x[0],obj.y[0]];\
   xml_div = document.createElement('DIV');\
   canvas_div.appendChild(xml_div);\
   if( obj.type == 'katex' ){ obj.mathml = LoadKaTeX('html',obj.mathml);};\
   xml_div.id = 'xml_div'+obj.id;\
   xml_div.innerHTML = obj.mathml;\
-  xml_div.style.position = \"absolute\";\
+  xml_div.classList.add('canvasdraw_xml');\
   xml_div.style.color = \"rgba(\"+obj.stroke_color+\",\"+obj.stroke_opacity+\")\";\
   xml_div.style.font = obj.fontfamily;\
   if( ! obj.rotation_center){obj.rotation_center = [obj.x[0],obj.y[0]];}else{obj.rotation_center=[x2px(obj.rotation_center[0]) ,y2px(obj.rotation_center[1]) ];};\
   if( obj.use_center == 1 ){if( obj.type == 'image' ){xml_div.addEventListener('load',function(e){centered(xml_div,obj);},true);}else{%s};};\
  } else {\
   xml_div = document.getElementById('xml_div'+obj.id );\
  };\
- if( typeof(xml_div) === 'undefined' ){console.log('hmmmmm'); return;};\
+ if( typeof(xml_div) === 'undefined' ){console.log('[canvasutil] xml_div undefined'); return;};\
- xml_div.style.left = parseInt(obj.x[0] - obj.offset[0]) +'px';\
+ /*xml_div.style.left = parseInt(obj.x[0] - obj.offset[0]) +'px';\
- xml_div.style.top  = parseInt(obj.y[0] - obj.offset[1]) +'px';\
+ xml_div.style.top  = parseInt(obj.y[0] - obj.offset[1]) +'px';*/\
+ xml_div.style.left = parseInt((obj.x[0] - obj.offset[0])/xsize*100) +'%%';\
+ xml_div.style.top  = parseInt((obj.y[0] - obj.offset[1])/ysize*100) +'%%';\
  var back_color = 'rgba('+obj.fill_color+','+obj.fill_opacity+')';\
  var no_color = 'rgba(255,255,255,0)';var dragging = false;\
  if( obj.use_affine != 0 || obj.angle != 0 ){\
   xml_div.style.transform = 'matrix('+obj.transform[0]+','+obj.transform[1]+','+obj.transform[2]+','+obj.transform[3]+','+obj.transform[4]+','+obj.transform[5]+') rotate('+rad2deg(obj.angle)+'deg)';\
  };\

Subversion Repositories wimsdev

(root)/trunk/wims/src/Misc/canvasdraw/canvasutils.c – Rev 16844 → 16845