From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001 From: mensonge Date: Thu, 13 Nov 2008 09:49:11 +0000 Subject: New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f --- includes/js/dojox/sketch/Anchor.js | 61 +++ includes/js/dojox/sketch/Annotation.js | 223 ++++++++++ includes/js/dojox/sketch/DoubleArrowAnnotation.js | 200 +++++++++ includes/js/dojox/sketch/Figure.js | 493 +++++++++++++++++++++ includes/js/dojox/sketch/LeadAnnotation.js | 141 ++++++ includes/js/dojox/sketch/PreexistingAnnotation.js | 121 +++++ includes/js/dojox/sketch/README | 58 +++ includes/js/dojox/sketch/SingleArrowAnnotation.js | 183 ++++++++ includes/js/dojox/sketch/Slider.js | 31 ++ includes/js/dojox/sketch/Toolbar.js | 96 ++++ includes/js/dojox/sketch/UnderlineAnnotation.js | 82 ++++ includes/js/dojox/sketch/UndoStack.js | 104 +++++ includes/js/dojox/sketch/_Plugin.js | 83 ++++ .../js/dojox/sketch/resources/images/icons.gif | Bin 0 -> 600 bytes includes/js/dojox/sketch/resources/sketch.css | 17 + .../sketch/resources/sketch.css.commented.css | 17 + includes/js/dojox/sketch/tests/annotation.svg | 1 + includes/js/dojox/sketch/tests/images/figure2.gif | Bin 0 -> 40349 bytes .../js/dojox/sketch/tests/images/testsBodyBg.gif | Bin 0 -> 753 bytes includes/js/dojox/sketch/tests/test_full.html | 66 +++ 20 files changed, 1977 insertions(+) create mode 100644 includes/js/dojox/sketch/Anchor.js create mode 100644 includes/js/dojox/sketch/Annotation.js create mode 100644 includes/js/dojox/sketch/DoubleArrowAnnotation.js create mode 100644 includes/js/dojox/sketch/Figure.js create mode 100644 includes/js/dojox/sketch/LeadAnnotation.js create mode 100644 includes/js/dojox/sketch/PreexistingAnnotation.js create mode 100644 includes/js/dojox/sketch/README create mode 100644 includes/js/dojox/sketch/SingleArrowAnnotation.js create mode 100644 includes/js/dojox/sketch/Slider.js create mode 100644 includes/js/dojox/sketch/Toolbar.js create mode 100644 includes/js/dojox/sketch/UnderlineAnnotation.js create mode 100644 includes/js/dojox/sketch/UndoStack.js create mode 100644 includes/js/dojox/sketch/_Plugin.js create mode 100644 includes/js/dojox/sketch/resources/images/icons.gif create mode 100644 includes/js/dojox/sketch/resources/sketch.css create mode 100644 includes/js/dojox/sketch/resources/sketch.css.commented.css create mode 100644 includes/js/dojox/sketch/tests/annotation.svg create mode 100644 includes/js/dojox/sketch/tests/images/figure2.gif create mode 100644 includes/js/dojox/sketch/tests/images/testsBodyBg.gif create mode 100644 includes/js/dojox/sketch/tests/test_full.html (limited to 'includes/js/dojox/sketch') diff --git a/includes/js/dojox/sketch/Anchor.js b/includes/js/dojox/sketch/Anchor.js new file mode 100644 index 0000000..de72ac0 --- /dev/null +++ b/includes/js/dojox/sketch/Anchor.js @@ -0,0 +1,61 @@ +if(!dojo._hasResource["dojox.sketch.Anchor"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.Anchor"] = true; +dojo.provide("dojox.sketch.Anchor"); +dojo.require("dojox.gfx"); + +(function(){ + var ta=dojox.sketch; + ta.Anchor=function(an, id, isControl){ + var self=this; + var size=4; // .5 * size of anchor. + var rect=null; + + this.type=function(){ return "Anchor"; }; + this.annotation=an; + + this.id=id; + this._key="anchor-" + ta.Anchor.count++; + this.shape=null; + this.isControl=(isControl!=null)?isControl:true; + + this.beginEdit=function(){ + this.annotation.beginEdit(ta.CommandTypes.Modify); + }; + this.endEdit=function(){ + this.annotation.endEdit(); + }; + this.doChange=function(pt){ + if(this.isControl) this.shape.applyTransform(pt); + else{ + an.transform.dx+=pt.dx; + an.transform.dy+=pt.dy; + } + }; + this.setBinding=function(pt){ + an[id]={ x: an[id].x+pt.dx, y:an[id].y+pt.dy }; + an.draw(); + an.drawBBox(); + }; + this.setUndo=function(){ an.setUndo(); }; + + this.enable=function(){ + if(!an.shape) return; + an.figure._add(this); + rect={ x:an[id].x-size, y:an[id].y-size, width:size*2, height:size*2 }; + this.shape=an.shape.createRect(rect) + .setStroke({ color:"black", width:1 }) + .setFill([255,255,255,0.35]); + this.shape.getEventSource().setAttribute("id", self._key); + this.shape.getEventSource().setAttribute("shape-rendering", "crispEdges"); + }; + this.disable=function(){ + an.figure._remove(this); + if(an.shape) an.shape.remove(this.shape); + this.shape=null; + rect=null; + }; + }; + ta.Anchor.count=0; +})(); + +} diff --git a/includes/js/dojox/sketch/Annotation.js b/includes/js/dojox/sketch/Annotation.js new file mode 100644 index 0000000..ea260ca --- /dev/null +++ b/includes/js/dojox/sketch/Annotation.js @@ -0,0 +1,223 @@ +if(!dojo._hasResource["dojox.sketch.Annotation"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.Annotation"] = true; +dojo.provide("dojox.sketch.Annotation"); +dojo.require("dojox.sketch.Anchor"); +dojo.require("dojox.sketch._Plugin"); + +(function(){ + var ta=dojox.sketch; + dojo.declare("dojox.sketch.AnnotationTool", ta._Plugin, { +// constructor: function(){ +//// console.log('this.shape',this.shape); +//// this.annotation=ta.tools[this.shape]; +// }, + onMouseMove: function(e,rect){ + if(this._cshape){ + this._cshape.setShape(rect); + } else { + this._cshape=this.figure.surface.createRect(rect) + .setStroke({color:"#999", width:1, style:"ShortDot"}) + .setFill([255,255,255,0.7]); + this._cshape.getEventSource().setAttribute("shape-rendering","crispEdges"); + } + }, + onMouseUp: function(e){ + var f=this.figure; + if(!(f._startPoint.x==e.pageX&&f._startPoint.y==e.pageY)){ + if(this._cshape){ + // The minimum number of pixels one has to travel before a shape + // gets drawn. + var limit=40; + if(Math.max( + limit, + Math.abs(f._absEnd.x-f._start.x), + Math.abs(f._absEnd.y-f._start.y) + )>limit){ + this._create(f._start, f._end); + } + } + } + if(this._cshape) f.surface.remove(this._cshape); + }, + _create: function(start,end){ + // create a new shape, needs to be accessible from the + // dragging functions. + var f=this.figure; + var _=f.nextKey(); + var a=new (this.annotation)(f, "annotation-"+_); + a.transform={dx:start.x/f.zoomFactor, dy:start.y/f.zoomFactor}; + a.end={ x:end.x/f.zoomFactor, y:end.y/f.zoomFactor }; + if(a.control){ + a.control={ x:Math.round((end.x/2)/f.zoomFactor),y:Math.round((end.y/2)/f.zoomFactor) }; + } + f.onBeforeCreateShape(a); + a.initialize(); + f.select(a); + f.onCreateShape(a); + f.history.add(ta.CommandTypes.Create,a); + } + }); + ta.Annotation=function(figure, id){ + // for editing stuff. + this.id=this._key=id; + this.figure=figure; + this.mode=ta.Annotation.Modes.View; + this.shape=null; // dojox.gfx.Group + this.boundingBox=null; // rect for boundaries + this.hasAnchors=true; + this.anchors={}; // ta.Anchor + this._properties={ + 'stroke':{ color:"blue", width:2 }, + 'fill': "blue", + 'label': "" + }; + + if(this.figure) this.figure.add(this); + }; + var p=ta.Annotation.prototype; + p.constructor=ta.Annotation; + p.type=function(){ return ''; }; + p.getType=function(){ return ta.Annotation; }; + + p.remove=function(){ + this.figure.history.add(ta.CommandTypes.Delete, this, this.serialize()); + }; + p.property=function(name,/*?*/value){ + var r; + name=name.toLowerCase(); + if(this._properties[name]!==undefined){ + r=this._properties[name]; + } + if(arguments.length>1){ + this._properties[name]=value; + } + if(r!=value){ + this.onPropertyChange(name,r); + } + return r; + }; + p.onPropertyChange=function(name,oldvalue){}; + p.onCreate=function(){ + this.figure.history.add(ta.CommandTypes.Create,this); + } + p.onDblClick=function(event){ + var l=prompt('Set new text:',this.property('label')); + if(l!==false){ + this.beginEdit(ta.CommandTypes.Modify); + this.property('label',l); + this.draw(); + this.endEdit(); + } + } + p.initialize=function(){ }; + p.destroy=function(){ }; + p.draw=function(){ }; + p.apply=function(obj){ }; + p.serialize=function(){ }; + p.getBBox=function(){ }; + p.beginEdit=function(type){ + this._type=type||ta.CommandTypes.Move; + this._prevState=this.serialize(); + }; + p.endEdit=function(){ + var newstep=true; + if(this._type==ta.CommandTypes.Move){ + var f=this.figure; + if(f._absEnd.x==f._start.x&&f._absEnd.y==f._start.y){ + newstep=false; + } + } + if(newstep){ + this.figure.history.add(this._type,this,this._prevState); + } + this._type=this._prevState=''; + }; + p.calculate={ + slope:function(p1, p2){ + if(!(p1.x-p2.x)) return 0; + return ((p1.y-p2.y)/(p1.x-p2.x)); + }, + dx:function(p1, p2, dy){ + var s=this.slope(p1,p2); + if(s==0) return s; + return dy/s; + }, + dy:function(p1, p2, dx){ return this.slope(p1,p2)*dx; } + }; + p.drawBBox=function(){ + var r=this.getBBox(); + if(!this.boundingBox){ + this.boundingBox=this.shape.createRect(r) + .moveToBack() + .setStroke({color:"#999", width:1, style:"Dash"}) + .setFill([238,238,238,0.3]); + this.boundingBox.getEventSource().setAttribute("id",this.id+"-boundingBox"); + this.boundingBox.getEventSource().setAttribute("shape-rendering","crispEdges"); + this.figure._add(this); + } else this.boundingBox.setShape(r); + }; + p.setBinding=function(pt){ + this.transform.dx+=pt.dx; + this.transform.dy+=pt.dy; + this.draw(); + }; + p.doChange=function(pt){ }; + p.getTextBox=function(){ + return dojox.gfx._base._getTextBox(this.property('label'),ta.Annotation.labelFont); + }; + p.setMode=function(m){ + if(this.mode==m) return; + this.mode=m; + var method="disable"; + if(m==ta.Annotation.Modes.Edit) method="enable"; + if(method=="enable"){ + // draw the bounding box + this.drawBBox(); + this.figure._add(this); + } else { + if(this.boundingBox){ + if(this.shape) this.shape.remove(this.boundingBox); + this.boundingBox=null; + } + } + for(var p in this.anchors){ this.anchors[p][method](); } + }; +// p.writeProperties=function(){ +// var ps=this._properties; +// return ""; +// }; + p.writeCommonAttrs=function(){ + return 'id="' + this.id + '" dojoxsketch:type="' + this.type() + '"' + + ' transform="translate('+ this.transform.dx + "," + this.transform.dy + ')"' + + (this.data?(' >=this.end.x) rot+=Math.PI; + var endRot=dojox.gfx.matrix.rotateAt(rot, this.end.x, this.end.y); + + // draw the shapes + this.shape=this.figure.group.createGroup(); + this.shape.getEventSource().setAttribute("id", this.id); + if(this.transform.dx||this.transform.dy) this.shape.setTransform(this.transform); + this.pathShape=this.shape.createPath( + "M"+this.start.x+" "+this.start.y+"Q"+this.control.x+" "+this.control.y+" "+this.end.x+" "+this.end.y + " l0,0" + ).setStroke(this.property('stroke')); + + this.startArrowGroup=this.shape.createGroup().setTransform({ dx:this.start.x, dy:this.start.y }); + this.startArrowGroup.applyTransform(startRot); +// console.log('startArrow',this.property('fill')); + this.startArrow=this.startArrowGroup.createPath("M0,0 l20,-5 -3,5 3,5 Z").setFill(this.property('fill')); + + this.endArrowGroup=this.shape.createGroup().setTransform(endRot); + this.endArrow=this.endArrowGroup.createPath( + "M" + this.end.x + "," + this.end.y + " l-20,-5 3,5 -3,5 Z" + ).setFill(this.property('fill')); + this.labelShape=this.shape.createText({ + x:this.textPosition.x, y:this.textPosition.y, text:this.property('label'), align:this.textAlign + }).setFont(font).setFill(this.property('fill')); + }; + p.destroy=function(){ + if(!this.shape) return; + this.startArrowGroup.remove(this.startArrow); + this.endArrowGroup.remove(this.endArrow); + this.shape.remove(this.startArrowGroup); + this.shape.remove(this.endArrowGroup); + this.shape.remove(this.pathShape); + this.shape.remove(this.labelShape); + this.figure.group.remove(this.shape); + this.shape=this.pathShape=this.labelShape=this.startArrowGroup=this.startArrow=this.endArrowGroup=this.endArrow=null; + }; + p.draw=function(obj){ + this.apply(obj); + this._rot(); + this._pos(); + // rotation matrix + var rot=this.startRotation; + if(this.control.x=this.end.x) rot+=Math.PI; + var endRot=dojox.gfx.matrix.rotateAt(rot, this.end.x, this.end.y); + + this.shape.setTransform(this.transform); + this.pathShape.setShape( + "M"+this.start.x+" "+this.start.y+" Q"+this.control.x+" "+this.control.y+" "+this.end.x+" "+this.end.y + " l0,0" + ).setStroke(this.property('stroke')); + this.startArrowGroup.setTransform({ dx:this.start.x, dy:this.start.y }); + this.startArrowGroup.applyTransform(startRot); + this.startArrow.setFill(this.property('fill')); + + this.endArrowGroup.setTransform(endRot); + this.endArrow.setShape( + "M" + this.end.x + "," + this.end.y + " l-20,-5 3,5 -3,5 Z" + ).setFill(this.property('fill')); + this.labelShape.setShape({x:this.textPosition.x, y:this.textPosition.y, text:this.property('label')}).setFill(this.property('fill')); + }; + p.getBBox=function(){ + var x=Math.min(this.start.x, this.control.x, this.end.x); + var y=Math.min(this.start.y, this.control.y, this.end.y); + var w=Math.max(this.start.x, this.control.x, this.end.x)-x; + var h=Math.max(this.start.y, this.control.y, this.end.y)-y; + return { x:x, y:y, width:w, height:h }; + }; + p.serialize=function(){ + var s=this.property('stroke'); + return '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + this.property('label') + + '' + + ''; + }; + + ta.Annotation.register("DoubleArrow"); +})(); + +} diff --git a/includes/js/dojox/sketch/Figure.js b/includes/js/dojox/sketch/Figure.js new file mode 100644 index 0000000..ae573bb --- /dev/null +++ b/includes/js/dojox/sketch/Figure.js @@ -0,0 +1,493 @@ +if(!dojo._hasResource["dojox.sketch.Figure"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.Figure"] = true; +dojo.provide("dojox.sketch.Figure"); +dojo.experimental("dojox.sketch"); + +dojo.require("dojox.gfx"); +dojo.require("dojox.sketch.UndoStack"); + +(function(){ + var ta=dojox.sketch; + ta.tools={}; + ta.registerTool=function(type, fn){ ta.tools[type]=fn; }; + ta.Figure = function(){ + var self=this; + var annCounter=1; + + this.shapes=[]; + this.image=null; + this.imageSrc=null; + this.size={ w:0, h:0 }; + this.surface=null; + this.group=null; + this.node=null; + + this.zoomFactor=1; // multiplier for zooming. + + this.tools=null; // toolbar reference. + this.nextKey=function(){ return annCounter++; }; + + this.obj={}; // lookup table for shapes. Not keen on this solution. + + this.initUndoStack(); + + // what is selected. + this.selected=[]; + this.hasSelections=function(){ return this.selected.length>0 }; + this.isSelected=function(obj){ + for(var i=0; i-1){ + obj.setMode(ta.Annotation.Modes.View); + self.selected.splice(idx,1); + } + return obj; + }; + this.clearSelections=function(){ + for(var i=0; i-1){ + self.selected.splice(idx,1,n); + } + }; + + // for the drag and drop handlers. + this._c=null; // current shape + this._ctr=null; // container measurements + this._lp=null; // last position + this._action=null; + this._prevState=null; + this._startPoint=null; // test to record a move. + + // if an object isn't selected and we're dragging anyways. + this._ctool=null; // hard code it. + this._start=null; + this._end=null; + this._absEnd=null; + this._cshape=null; + + this._click=function(e){ + if(self._c){ + dojo.stopEvent(e); + return; + } + var o=self._fromEvt(e); + if(!o){ + self.clearSelections(); + dojo.stopEvent(e); + } else if(!o.setMode){ + // skip me. + } else self.select(o); + }; + this._dblclick=function(e){ + var o=self._fromEvt(e); + if(o){ + self.onDblClickShape(o,e); + } + }; + + this._keydown=function(e){ + var prevent=false; + if(e.ctrlKey){ + if(e.keyCode==90){ //ctrl+z + self.undo(); + prevent = true; + }else if(e.keyCode==89){ //ctrl+y + self.redo(); + prevent = true; + } + } + + if(e.keyCode==46 || e.keyCode==8){ //delete or backspace + self._delete(self.selected); + prevent = true; + } + + if(prevent){ + dojo.stopEvent(e); + } + }; + + // drag handlers. + this._md=function(e){ + var o=self._fromEvt(e); + self._startPoint={ x:e.pageX, y:e.pageY }; + var win = dijit.getDocumentWindow(self.node.ownerDocument); + // figure out the coordinates within the iframe + self._ctr=dojo._abs(self.node); + var scroll=dojo.withGlobal(win,dojo._docScroll); + self._ctr={x:self._ctr.x-scroll.x, y:self._ctr.y-scroll.y}; + var X=e.clientX-self._ctr.x, Y=e.clientY-self._ctr.y; + self._lp={ x:X, y:Y }; + + // capture it separately + self._start={ x:X, y:Y }; + self._end={ x:X, y:Y }; + self._absEnd={ x:X, y:Y }; + if(!o){ + self.clearSelections(); + self._ctool.onMouseDown(e); + }else{ + if(o.type && o.type()!="Anchor"){ + self.select(o); + } + o.beginEdit(); + self._c=o; + } + }; + this._mm=function(e){ + if(!self._ctr) return; + var x=e.clientX-self._ctr.x; + var y=e.clientY-self._ctr.y; + var dx=x-self._lp.x; + var dy=y-self._lp.y; + self._absEnd={x:x, y:y}; + if(self._c){ + self._c.doChange({dx:Math.round(dx/self.zoomFactor), dy:Math.round(dy/self.zoomFactor)}); + self._c.setBinding({dx:Math.round(dx/self.zoomFactor), dy:Math.round(dy/self.zoomFactor)}); + self._lp={x:x, y:y}; + } + else { + self._end={x:dx, y:dy}; + var rect={ + x:Math.min(self._start.x,self._absEnd.x), + y:Math.min(self._start.y,self._absEnd.y), + width:Math.abs(self._start.x-self._absEnd.x), + height:Math.abs(self._start.y-self._absEnd.y) + } + self._ctool.onMouseMove(e,rect); + } + }; + this._mu=function(e){ + if(self._c){ + // record the event. + self._c.endEdit(); + }else{ + self._ctool.onMouseUp(e); + } + + // clear the stuff out. + self._c=self._ctr=self._lp=self._action=self._prevState=self._startPoint=null; + self._cshape=self._start=self._end=self._absEnd=null; + }; + + this._delete=function(arr,noundo){ + for(var i=0; i + this.group.createRect({ x:0, y:0, width:this.size.w, height:this.size.h }); + this.image=this.group.createImage({ width:this.size.w, height:this.size.h, src:this.imageSrc }); + }; + p.destroy=function(isLoading){ + if(!this.node){ + return; + } + if(!isLoading){ + if(this.history) this.history.destroy(); + if(this._subscribed){ + dojo.unsubscribe(this._subscribed); + delete this._subscribed; + } + } + dojo.forEach(this._cons,dojo.disconnect); + this._cons=[]; + + this.node.removeChild(this.surface.getEventSource()); + this.group=this.surface=null; + this.obj={}; + this.shapes=[]; + }; + p.draw=function(){ }; + p.zoom=function(pct){ + // first get the new dimensions + this.zoomFactor=pct/100; + var w=this.size.w*this.zoomFactor; + var h=this.size.h*this.zoomFactor; + this.surface.setDimensions(w, h); + // then scale it. + this.group.setTransform(dojox.gfx.matrix.scale(this.zoomFactor, this.zoomFactor)); + if(dojo.isIE){ + this.image.rawNode.style.width=Math.max(w,this.size.w); + this.image.rawNode.style.height=Math.max(h,this.size.h); + } + //this.rect.setShape({width:w,height:h}); + }; + p.getFit=function(){ + // assume fitting the parent node. +// var box=dojo.html.getContentBox(this.node.parentNode); + //the following should work under IE and FF, not sure about others though + var wF=(this.node.parentNode.clientWidth-5)/this.size.w; + var hF=(this.node.parentNode.clientHeight-5)/this.size.h; + return Math.min(wF, hF)*100; + }; + p.unzoom=function(){ + // restore original size. + this.zoomFactor=1; + this.surface.setDimensions(this.size.w, this.size.h); + this.group.setTransform(); + }; + + // object registry for drag handling. + p._add=function(obj){ this.obj[obj._key]=obj; }; + p._remove=function(obj){ + if(this.obj[obj._key]){ + delete this.obj[obj._key]; + } + }; + p._get=function(key){ + if(key&&key.indexOf("bounding")>-1) key=key.replace("-boundingBox",""); + return this.obj[key]; + }; + p._fromEvt=function(e){ + var key=e.target.id+""; + if(key.length==0){ + // ancestor tree until you get to the end (meaning this.surface) + var p=e.target.parentNode; + var node=this.surface.getEventSource(); + while(p && p.id.length==0 && p!=node){ + p=p.parentNode; + } + key=p.id; + } + return this._get(key); + }; + + p.add=function(annotation){ + for(var i=0; i-1) this.shapes.splice(idx, 1); + return annotation; + }; + p.get=function(id){ + for(var i=0; i' + + '' + + ''; + for(var i=0; i=1){ + x=this.end.x+this.calculate.dx(this.control, this.end, offset); + if(this.control.y>this.end.y) y=this.end.y-offset; + else y=this.end.y+offset+this.textYOffset; + } else if(slope==0){ + x=this.end.x+offset; + y=this.end.y+this.textYOffset; + } else { + if(this.start.x>this.end.x){ + x=this.end.x-offset; + this.textAlign="end"; + } else { + x=this.end.x+offset; + this.textAlign="start"; + } + if(this.start.y' + + '' + + '' + + this.property('label') + + '' + + ''; + }; + + ta.Annotation.register("Lead"); +})(); + +} diff --git a/includes/js/dojox/sketch/PreexistingAnnotation.js b/includes/js/dojox/sketch/PreexistingAnnotation.js new file mode 100644 index 0000000..a8c123e --- /dev/null +++ b/includes/js/dojox/sketch/PreexistingAnnotation.js @@ -0,0 +1,121 @@ +if(!dojo._hasResource["dojox.sketch.PreexistingAnnotation"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.PreexistingAnnotation"] = true; +dojo.provide("dojox.sketch.PreexistingAnnotation"); + +dojo.require("dojox.sketch.Annotation"); +dojo.require("dojox.sketch.Anchor"); + +(function(){ + var ta=dojox.sketch; + ta.PreexistingAnnotation=function(figure, id){ + ta.Annotation.call(this, figure, id); + this.transform={dx:0, dy:0}; + this.start={ x:0, y:0 }; + this.end={ x:200, y:200 }; + this.radius=8; + this.textPosition={ x:196, y:196 }; + this.textOffset=4; + this.textAlign="end"; + + this.property('label',this.id); + this.rectShape=null; + this.labelShape=null; + + this.anchors.start=new ta.Anchor(this, "start"); + this.anchors.end=new ta.Anchor(this, "end"); + }; + ta.PreexistingAnnotation.prototype=new ta.Annotation; + var p=ta.PreexistingAnnotation.prototype; + p.constructor=ta.PreexistingAnnotation; + + p.type=function(){ return 'Preexisting' }; + p.getType=function(){ return ta.PreexistingAnnotation; }; + + p._pos=function(){ + var x=Math.min(this.start.x, this.end.x); + var y=Math.min(this.start.y, this.end.y); + var w=Math.max(this.start.x, this.end.x); + var h=Math.max(this.start.y, this.end.y); + this.start={ x:x, y:y }; + this.end={ x:w, y:h }; + this.textPosition={ x:this.end.x-this.textOffset, y:this.end.y-this.textOffset }; + }; + p.apply=function(obj){ + if(!obj) return; + if(obj.documentElement) obj=obj.documentElement; + this.readCommonAttrs(obj); + + for(var i=0; i' + + '' + + '' + + this.property('label') + + '' + + ''; + }; + + ta.Annotation.register("Preexisting"); +})(); + +} diff --git a/includes/js/dojox/sketch/README b/includes/js/dojox/sketch/README new file mode 100644 index 0000000..85b2264 --- /dev/null +++ b/includes/js/dojox/sketch/README @@ -0,0 +1,58 @@ +------------------------------------------------------------------------------- +dojox.sketch +------------------------------------------------------------------------------- +Version 0.1 +Release date: 28/01/2008 +------------------------------------------------------------------------------- +Project state: +experimental +------------------------------------------------------------------------------- +Credits + Contributed by TeamPatent (supported by National Science Foundation grant 638334) + Tom Trenka (ttrenka@gmail.com) + Heng Liu/LiuCougar (heng@teampatent.com) +------------------------------------------------------------------------------- +Project description + +A cross-browser drawing editor based on dojox.gfx. +------------------------------------------------------------------------------- +Dependencies: + +dijit (Toolbar, Button, Slider) +dojox.gfx +dojox.xml +------------------------------------------------------------------------------- +Documentation + +Currently, 5 shapes are supported: line, single arrow line, double arrow line, +underline text and text. The first 3 shapes can have optinal text associated. + +Shapes can be added, deleted, moved and modified. All of these operations can +be undo-ed or redo-ed. + +TODO: + * provide UI to change various properties on shapes (fill, stroke, text) and +allow changing of background image + * serialize/unserialize in dojox.gfx to svg (and maybe vml as well?) (or another +simplier format? such as a json based one, which is easier to parse, and then +write a convertor to convert the json format to svg or any other format?) + * Move mousedown/up/move to each shape (to prepare for the following) + * Add shapes for other primitive shapes (needs to decide which primitive +dojox.gfx.shapes are useful), and add in support for user to group any +shapes/groups to form a single "compound shape" (need to add support to set +fill/stroke properties on the entire compound shape, which shallpropagate to +all children shapes) +------------------------------------------------------------------------------- +Installation instructions + +Install dijit, dojox.gfx and dojox.xml first + +Grab the following from the Dojo SVN Repository: +http://svn.dojotoolkit.org/var/src/dojo/dojox/trunk/sketch.js +http://svn.dojotoolkit.org/var/src/dojo/dojox/trunk/sketch/* + +Install into the following directory structure: +/dojox/sketch/ + +...which should be at the same level as your Dojo checkout. +------------------------------------------------------------------------------- diff --git a/includes/js/dojox/sketch/SingleArrowAnnotation.js b/includes/js/dojox/sketch/SingleArrowAnnotation.js new file mode 100644 index 0000000..29ad7f0 --- /dev/null +++ b/includes/js/dojox/sketch/SingleArrowAnnotation.js @@ -0,0 +1,183 @@ +if(!dojo._hasResource["dojox.sketch.SingleArrowAnnotation"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.SingleArrowAnnotation"] = true; +dojo.provide("dojox.sketch.SingleArrowAnnotation"); +dojo.require("dojox.sketch.Annotation"); +dojo.require("dojox.sketch.Anchor"); + +(function(){ + var ta=dojox.sketch; + ta.SingleArrowAnnotation=function(figure, id){ + ta.Annotation.call(this, figure, id); + this.transform={ dx:0, dy:0 }; + this.start={x:0, y:0}; + this.control={x:100, y:-50}; + this.end={x:200, y:0}; + this.textPosition={ x:0, y:0 }; + this.textOffset=4; + this.textAlign="middle"; + this.textYOffset=10; + this.rotation=0; + +// this.property('label',this.id); +// this.label=this.id; + this.pathShape=null; + this.arrowhead=null; + this.arrowheadGroup=null; + this.labelShape=null; + + this.anchors.start=new ta.Anchor(this, "start"); + this.anchors.control=new ta.Anchor(this, "control"); + this.anchors.end=new ta.Anchor(this, "end"); + }; + ta.SingleArrowAnnotation.prototype=new ta.Annotation; + var p=ta.SingleArrowAnnotation.prototype; + p.constructor=ta.SingleArrowAnnotation; + + p.type=function(){ return 'SingleArrow'; }; + p.getType=function(){ return ta.SingleArrowAnnotation; }; + + // helper functions + p._rot=function(){ + // arrowhead rotation + var opp=this.start.y-this.control.y; + var adj=this.start.x-this.control.x; + if(!adj) adj=1; + this.rotation=Math.atan(opp/adj); + }; + p._pos=function(){ + // text position + var offset=this.textOffset, x=0, y=0; + var slope=this.calculate.slope(this.control, this.end); + if(Math.abs(slope)>=1){ + x=this.end.x+this.calculate.dx(this.control, this.end, offset); + if(this.control.y>this.end.y) y=this.end.y-offset; + else y=this.end.y+offset+this.textYOffset; + } else if(slope==0){ + x=this.end.x+offset; + y=this.end.y+this.textYOffset; + } else { + if(this.start.x>this.end.x){ + x=this.end.x-offset; + this.textAlign="end"; + } else { + x=this.end.x+offset; + this.textAlign="start"; + } + if(this.start.y=this.end.x&&this.control.xthis.end.x) r-=180; + r=Math.round(r*Math.pow(10,4))/Math.pow(10,4); + return '' + + '' + + '' + + '' + + '' + + '' + + this.property('label') + + '' + + ''; + }; + + ta.Annotation.register("SingleArrow"); +})(); + +} diff --git a/includes/js/dojox/sketch/Slider.js b/includes/js/dojox/sketch/Slider.js new file mode 100644 index 0000000..e014e78 --- /dev/null +++ b/includes/js/dojox/sketch/Slider.js @@ -0,0 +1,31 @@ +if(!dojo._hasResource["dojox.sketch.Slider"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.Slider"] = true; +dojo.provide("dojox.sketch.Slider"); + +dojo.require("dijit.form.Slider"); +dojo.declare("dojox.sketch.Slider",dojox.sketch._Plugin,{ + _initButton: function(){ + this.slider=new dijit.form.HorizontalSlider({minimum:20,maximum:200,value:20,style:"width:200px;float:right"}); + this.connect(this.slider,'onChange','_setZoom'); + this.connect(this.slider.sliderHandle,'ondblclick','_zoomToFit'); + }, + _zoomToFit: function(){ + this.slider.setValue(this.figure.getFit(),true); + }, + _setZoom: function(v){ + if(this.figure){ + this.figure.zoom(v); + } + }, + setToolbar: function(t){ + t.addChild(this.slider); + if(!t._reset2Zoom){ + t._reset2Zoom=true; + this.connect(t,'reset','_zoomToFit'); + } + } +}); + +dojox.sketch.registerTool("Slider", dojox.sketch.Slider); + +} diff --git a/includes/js/dojox/sketch/Toolbar.js b/includes/js/dojox/sketch/Toolbar.js new file mode 100644 index 0000000..73dc82c --- /dev/null +++ b/includes/js/dojox/sketch/Toolbar.js @@ -0,0 +1,96 @@ +if(!dojo._hasResource["dojox.sketch.Toolbar"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.Toolbar"] = true; +dojo.provide("dojox.sketch.Toolbar"); + +dojo.require("dojox.sketch.Annotation"); +dojo.require("dijit.Toolbar"); +dojo.require("dijit.form.Button"); +dojo.require("dijit.form.Slider"); + +dojo.declare("dojox.sketch.ButtonGroup", null, { + constructor: function(){ + this._childMaps={}; + this._children=[]; + }, + add: function(/*_Plugin*/ plugin){ + this._childMaps[plugin]=plugin.connect(plugin,'onActivate',dojo.hitch(this,'_resetGroup',plugin)); + this._children.push(plugin); + }, +// remove: function(/*_Plugin*/ plugin){ +// widget.disconnect(this._childMaps[widget.id]); +// delete this._childMaps[widget.id]; +// this._children.splice(this._children.indexOf(widget.id),1); +// }, + _resetGroup: function(p){ + var cs=this._children; + dojo.forEach(cs,function(c){ + if(p!=c && c['attr']){ + c.attr('checked',false); + } + }); + } +}); + +dojo.declare("dojox.sketch.Toolbar", dijit.Toolbar, { + figure: null, + plugins: null, + postCreate: function(){ + this.inherited(arguments); + this.shapeGroup=new dojox.sketch.ButtonGroup; + + this.connect(this.figure,'onLoad','reset'); + if(!this.plugins){ + this.plugins=['Slider','Lead','SingleArrow','DoubleArrow','Underline','Preexisting']; + } + this._plugins=[]; + + dojo.forEach(this.plugins,function(obj){ + var name=dojo.isString(obj)?obj:obj.name; + var p=new dojox.sketch.tools[name](obj.args||{}); + this._plugins.push(p); + p.setFigure(this.figure); + p.setToolbar(this); + if(!this._defaultTool && p.button){ + this._defaultTool=p; + } + },this); + }, + destroy: function(){ + dojo.forEach(this._plugins,function(p){ + p.destroy(); + }); + this.inherited(arguments); + delete this._defaultTool; + delete this._plugins; + }, + addGroupItem: function(/*_Plugin*/item,group){ + if(group!='toolsGroup'){ + console.error('not supported group '+group); + return; + } + + this.shapeGroup.add(item); + }, + reset: function(){ + this._defaultTool.activate(); + }, + _setShape: function(s){ + if(!this.figure.surface) return; + // now do the action. + if(this.figure.hasSelections()){ + for(var i=0; i' + + '' + + '' + + this.property('label') + + '' + + ''; + }; + + ta.Annotation.register("Underline"); +})(); + +} diff --git a/includes/js/dojox/sketch/UndoStack.js b/includes/js/dojox/sketch/UndoStack.js new file mode 100644 index 0000000..e711557 --- /dev/null +++ b/includes/js/dojox/sketch/UndoStack.js @@ -0,0 +1,104 @@ +if(!dojo._hasResource["dojox.sketch.UndoStack"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch.UndoStack"] = true; +dojo.provide("dojox.sketch.UndoStack"); +dojo.require("dojox.xml.DomParser"); + +(function(){ + var ta=dojox.sketch; + ta.CommandTypes={ Create:"Create", Move:"Move", Modify:"Modify", Delete:"Delete", Convert:"Convert"}; + + dojo.declare("dojox.sketch.UndoStack",null,{ + constructor: function(figure){ + this.figure=figure; + this._steps=[]; + this._undoedSteps=[]; + }, + apply: function(state, from, to){ + // the key here is to neutrally move from one state to another. + // we let the individual functions (i.e. undo and redo) actually + // determine the from and to; all we do here is implement it. + + // check whether this is a fullText step + if(!from && !to && state.fullText){ + this.figure.setValue(state.fullText); + return; + } + + var fromText=from.shapeText; + var toText=to.shapeText; + + if(fromText.length==0&&toText.length==0){ + // nothing to reapply? + return; + } + if(fromText.length==0){ + // We are creating. + var o=dojox.xml.DomParser.parse(toText).documentElement; + var a=this.figure._loadAnnotation(o); + if(a) this.figure._add(a); + return; + } + if(toText.length==0){ + // we are deleting. + var ann=this.figure.get(from.shapeId); + this.figure._delete([ann],true); + return; + } + + // we can simply reinit and draw from the shape itself, + // regardless of the actual command. + var nann=this.figure.get(to.shapeId); + var no=dojox.xml.DomParser.parse(toText).documentElement; + nann.draw(no); + this.figure.select(nann); + return; + }, + // stack methods. + add: function(/*String*/cmd, /*ta.Annotation?*/ann, /*String?*/before){ + var id=ann?ann.id:''; + //var bbox=ann?ann.getBBox():{}; + var after=ann?ann.serialize():""; + if(cmd==ta.CommandTypes.Delete) after=""; + + /*if(ann){ + // fix the bbox x/y coords + var t=ann.transform; + bbox.x+=t.dx; + bbox.y+=t.dy; + }*/ + var state={ + cmdname:cmd, + //bbox:bbox, +// fullText:fullText, + before:{ + shapeId: id, + shapeText:before||'' + }, + after:{ + shapeId: id, + shapeText:after + } + }; + //console.log('dojox.sketch history add',state); + this._steps.push(state); + this._undoedSteps = []; + }, + destroy: function(){}, + undo: function(){ + var state=this._steps.pop(); + if(state){ + this._undoedSteps.push(state); + this.apply(state,state.after,state.before); + } + }, + redo: function(){ + var state=this._undoedSteps.pop(); + if(state){ + this._steps.push(state); + this.apply(state,state.before,state.after); + } + } + }); +})(); + +} diff --git a/includes/js/dojox/sketch/_Plugin.js b/includes/js/dojox/sketch/_Plugin.js new file mode 100644 index 0000000..fb7cb93 --- /dev/null +++ b/includes/js/dojox/sketch/_Plugin.js @@ -0,0 +1,83 @@ +if(!dojo._hasResource["dojox.sketch._Plugin"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.sketch._Plugin"] = true; +dojo.provide("dojox.sketch._Plugin"); +//dojo.require("dojox.sketch"); +dojo.require("dijit.form.Button"); + +dojo.declare("dojox.sketch._Plugin", null, { + // summary + // This represents a "plugin" to the dojox.sketch.Figure, which is basically + // a single button on the Toolbar and some associated code + constructor: function(/*Object?*/args){ + if(args){ + dojo.mixin(this, args); + } + this._connects=[]; + }, + + figure: null, + iconClassPrefix: "dojoxSketchIcon", + itemGroup: 'toolsGroup', + button: null, + queryCommand: null, + shape: "", + useDefaultCommand: true, + buttonClass: dijit.form.ToggleButton, + _initButton: function(){ + if(this.shape.length){ + //TODO: i18n +// var label = dojox.sketch.shapes[this.shape]; + var className = this.iconClassPrefix+" "+this.iconClassPrefix + this.shape.charAt(0).toUpperCase() + this.shape.substr(1); + if(!this.button){ + var props = { + label: this.shape, + showLabel: false, + iconClass: className, + dropDown: this.dropDown, + tabIndex: "-1" + }; + this.button = new this.buttonClass(props); + this.connect(this.button,'onClick','activate'); + } + } + }, + attr: function(name,/*?*/value){ + if(arguments.length>1){ + this.button.setAttribute(name,value); + }else{ + this.button.getAttribute(name); + } + }, + onActivate: function(){}, + activate: function(/*?*/e){ + this.onActivate(); + this.figure.setTool(this); + this.attr('checked',true); + }, + onMouseDown: function(e){}, + onMouseMove: function(e){}, + onMouseUp: function(e){}, + destroy: function(f){ + dojo.forEach(this._connects,dojo.disconnect); + }, + connect: function(o,f,tf){ + this._connects.push(dojo.connect(o,f,this,tf)); + }, + setFigure: function(/*Widget*/figure){ + // FIXME: detatch from previous figure!! + this.figure = figure; + + // FIXME: prevent creating this if we don't need to (i.e., figure can't handle our command) + this._initButton(); + }, + setToolbar: function(/*Widget*/toolbar){ + if(this.button){ + toolbar.addChild(this.button); + } + if(this.itemGroup){ + toolbar.addGroupItem(this,this.itemGroup); + } + } +}); + +} diff --git a/includes/js/dojox/sketch/resources/images/icons.gif b/includes/js/dojox/sketch/resources/images/icons.gif new file mode 100644 index 0000000..ab33b0a Binary files /dev/null and b/includes/js/dojox/sketch/resources/images/icons.gif differ diff --git a/includes/js/dojox/sketch/resources/sketch.css b/includes/js/dojox/sketch/resources/sketch.css new file mode 100644 index 0000000..7451395 --- /dev/null +++ b/includes/js/dojox/sketch/resources/sketch.css @@ -0,0 +1,17 @@ +.dojoxSketchIcon{ + background-repeat:no-repeat; + height:16px; + min-width:16px; + text-align:center; + width:16px; +} +.dojoxSketchIcon { background-image:url(images/icons.gif); } +.ShowCallouts{ background-position:0px 0px; } +.PreviousCallout{ background-position:0px -16px; } +.NextCallout{ background-position:0px -32px; } +.dojoxSketchIconLead{ background-position:0px -48px; } +.dojoxSketchIconUnderline{ background-position:0px -64px; } +.dojoxSketchIconSingleArrow{ background-position:0px -80px; } +.dojoxSketchIconBrace{ background-position:0px -96px; } +.dojoxSketchIconDoubleArrow{ background-position:0px -112px; } +.dojoxSketchIconPreexisting{ background-position:0px -128px; } diff --git a/includes/js/dojox/sketch/resources/sketch.css.commented.css b/includes/js/dojox/sketch/resources/sketch.css.commented.css new file mode 100644 index 0000000..7451395 --- /dev/null +++ b/includes/js/dojox/sketch/resources/sketch.css.commented.css @@ -0,0 +1,17 @@ +.dojoxSketchIcon{ + background-repeat:no-repeat; + height:16px; + min-width:16px; + text-align:center; + width:16px; +} +.dojoxSketchIcon { background-image:url(images/icons.gif); } +.ShowCallouts{ background-position:0px 0px; } +.PreviousCallout{ background-position:0px -16px; } +.NextCallout{ background-position:0px -32px; } +.dojoxSketchIconLead{ background-position:0px -48px; } +.dojoxSketchIconUnderline{ background-position:0px -64px; } +.dojoxSketchIconSingleArrow{ background-position:0px -80px; } +.dojoxSketchIconBrace{ background-position:0px -96px; } +.dojoxSketchIconDoubleArrow{ background-position:0px -112px; } +.dojoxSketchIconPreexisting{ background-position:0px -128px; } diff --git a/includes/js/dojox/sketch/tests/annotation.svg b/includes/js/dojox/sketch/tests/annotation.svg new file mode 100644 index 0000000..9638588 --- /dev/null +++ b/includes/js/dojox/sketch/tests/annotation.svg @@ -0,0 +1 @@ +12345 \ No newline at end of file diff --git a/includes/js/dojox/sketch/tests/images/figure2.gif b/includes/js/dojox/sketch/tests/images/figure2.gif new file mode 100644 index 0000000..7218a4c Binary files /dev/null and b/includes/js/dojox/sketch/tests/images/figure2.gif differ diff --git a/includes/js/dojox/sketch/tests/images/testsBodyBg.gif b/includes/js/dojox/sketch/tests/images/testsBodyBg.gif new file mode 100644 index 0000000..4e0b4a7 Binary files /dev/null and b/includes/js/dojox/sketch/tests/images/testsBodyBg.gif differ diff --git a/includes/js/dojox/sketch/tests/test_full.html b/includes/js/dojox/sketch/tests/test_full.html new file mode 100644 index 0000000..b78c232 --- /dev/null +++ b/includes/js/dojox/sketch/tests/test_full.html @@ -0,0 +1,66 @@ + + + + Annotator/Figure Testing + + + + + + + + + +

Annotator/Figure Testing Platform

+

This is a generic test to create a figure from an existing SVG file, to edit that figure, and to test the undo stack. Double click a shape to set new text for it.

+
+
+
+
+

Serialized output

+ + + -- cgit v1.2.3