UnderlineAnnotation.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.sketch.UnderlineAnnotation"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.sketch.UnderlineAnnotation"] = true;
  8. dojo.provide("dojox.sketch.UnderlineAnnotation");
  9. dojo.require("dojox.sketch.Annotation");
  10. dojo.require("dojox.sketch.Anchor");
  11. (function(){
  12. var ta=dojox.sketch;
  13. ta.UnderlineAnnotation=function(figure, id){
  14. ta.Annotation.call(this, figure, id);
  15. this.transform={dx:0, dy:0};
  16. this.start={x:0, y:0};
  17. this.property('label','#');
  18. this.labelShape=null;
  19. this.lineShape=null;
  20. //this.anchors.start=new ta.Anchor(this, "start");
  21. };
  22. ta.UnderlineAnnotation.prototype=new ta.Annotation;
  23. var p=ta.UnderlineAnnotation.prototype;
  24. p.constructor=ta.UnderlineAnnotation;
  25. p.type=function(){ return 'Underline'; };
  26. p.getType=function(){ return ta.UnderlineAnnotation; };
  27. p.apply=function(obj){
  28. if(!obj){ return; }
  29. if(obj.documentElement){ obj=obj.documentElement; }
  30. this.readCommonAttrs(obj);
  31. for(var i=0; i<obj.childNodes.length; i++){
  32. var c=obj.childNodes[i];
  33. if(c.localName=="text"){
  34. this.property('label',c.childNodes[0].nodeValue);
  35. var style=c.getAttribute('style');
  36. var m=style.match(/fill:([^;]+);/);
  37. if(m){
  38. var stroke=this.property('stroke');
  39. stroke.collor=m[1];
  40. this.property('stroke',stroke);
  41. this.property('fill',stroke.collor);
  42. }
  43. }/*else if(c.localName=="line"){
  44. var stroke=this.property('stroke');
  45. var style=c.getAttribute('style');
  46. var m=style.match(/stroke:([^;]+);/)[1];
  47. if(m){
  48. stroke.color=m;
  49. this.property('fill',m);
  50. }
  51. m=style.match(/stroke-width:([^;]+);/)[1];
  52. if(m){
  53. stroke.width=m;
  54. }
  55. this.property('stroke',stroke);
  56. }*/
  57. }
  58. };
  59. p.initialize=function(obj){
  60. //var font=(ta.Annotation.labelFont)?ta.Annotation.labelFont:{family:"Times", size:"16px"};
  61. this.apply(obj);
  62. // create either from scratch or based on the passed node
  63. this.shape=this.figure.group.createGroup();
  64. this.shape.getEventSource().setAttribute("id", this.id);
  65. //if(this.transform.dx || this.transform.dy){ this.shape.setTransform(this.transform); }
  66. this.labelShape=this.shape.createText({
  67. x:0,
  68. y:0,
  69. text:this.property('label'),
  70. decoration:"underline",
  71. align:"start"
  72. })
  73. //.setFont(font)
  74. //.setFill(this.property('fill'));
  75. this.labelShape.getEventSource().setAttribute('id',this.id+"-labelShape");
  76. this.lineShape=this.shape.createLine({
  77. x1:1,
  78. x2:this.labelShape.getTextWidth(),
  79. y1:2,
  80. y2:2
  81. })
  82. //.setStroke({ color:this.property('fill'), width:1 });
  83. this.lineShape.getEventSource().setAttribute("shape-rendering","crispEdges");
  84. this.draw();
  85. };
  86. p.destroy=function(){
  87. if(!this.shape){ return; }
  88. this.shape.remove(this.labelShape);
  89. this.shape.remove(this.lineShape);
  90. this.figure.group.remove(this.shape);
  91. this.shape=this.lineShape=this.labelShape=null;
  92. };
  93. p.getBBox=function(){
  94. var b=this.getTextBox();
  95. var z=this.figure.zoomFactor;
  96. return { x:0, y:(b.h*-1+4)/z, width:(b.w+2)/z, height:b.h/z };
  97. };
  98. p.draw=function(obj){
  99. this.apply(obj);
  100. this.shape.setTransform(this.transform);
  101. this.labelShape.setShape({ x:0, y:0, text:this.property('label') })
  102. .setFill(this.property('fill'));
  103. this.zoom();
  104. };
  105. p.zoom=function(pct){
  106. if(this.labelShape){
  107. pct = pct || this.figure.zoomFactor;
  108. var textwidthadj=dojox.gfx.renderer=='vml'?0:2/pct;
  109. ta.Annotation.prototype.zoom.call(this,pct);
  110. pct = dojox.gfx.renderer=='vml'?1:pct;
  111. this.lineShape.setShape({ x1:0, x2:this.getBBox().width-textwidthadj, y1:2, y2:2 })
  112. .setStroke({ color:this.property('fill'), width:1/pct });
  113. if(this.mode==ta.Annotation.Modes.Edit){
  114. this.drawBBox(); //the bbox is dependent on the size of the text, so need to update it here
  115. }
  116. }
  117. };
  118. p.serialize=function(){
  119. var s=this.property('stroke');
  120. return '<g '+this.writeCommonAttrs()+'>'
  121. //+ '<line x1="1" x2="'+this.labelShape.getTextWidth()+1+'" y1="5" y2="5" style="stroke:'+s.color+';stroke-width:'+s.width+';" />'
  122. + '<text style="fill:'+this.property('fill')+';" font-weight="bold" text-decoration="underline" '
  123. + 'x="0" y="0">'
  124. + this.property('label')
  125. + '</text>'
  126. + '</g>';
  127. };
  128. //customize AnnotationTool to place a underlilne shape onmouseup, no need
  129. //to drag a box (like other shapes)
  130. dojo.declare("dojox.sketch.UnderlineAnnotationTool", ta.AnnotationTool, {
  131. onMouseDown: function(){},
  132. onMouseUp: function(){
  133. var f=this.figure;
  134. if(!f._start){
  135. return;
  136. }
  137. //zero out end so that the clickover is shown at the right pos
  138. f._end={x:0,y:0};
  139. this._create(f._start,{x:f._start.x+10,y:f._start.y+10});
  140. },
  141. onMouseMove: function(){}
  142. });
  143. ta.Annotation.register("Underline", ta.UnderlineAnnotationTool);
  144. })();
  145. }