Skip to content

Commit 835a1b8

Browse files
amrdrazamrdraz
committed
made path guid update with its animation
1 parent 394ffa2 commit 835a1b8

File tree

10 files changed

+141
-1763
lines changed

10 files changed

+141
-1763
lines changed

‎components/js/CanvasPanel.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ var CanvasPanel = new Class({
9898
},
9999
newLevel: function(el){
100100
if(!el) return;
101-
if(el==="base"){el=false;}
101+
if(el==="base"||el==="path"){el=false;}
102102
if(el && this.isInSet(el)){
103103
el=el.parent;
104104
}
@@ -292,10 +292,10 @@ var CanvasPanel = new Class({
292292
el = this.level.el || this.selected[0];
293293
//console.log(el);
294294
} else {
295-
window.fireEvent("element.deselect");
295+
this.selected.length>0 && window.fireEvent("element.deselect");
296296
el = true; // reuse of el as a vriable
297297
this.elFocus = true;
298-
R = this.newLevel().paper;
298+
R = this.newLevel("path").paper;
299299
c = R.canvas;
300300
}
301301
} else {
@@ -304,7 +304,7 @@ var CanvasPanel = new Class({
304304
R = this.level.paper;
305305
c = R.canvas;
306306
} else {
307-
window.fireEvent("element.deselect");
307+
this.selected.length>0 && window.fireEvent("element.deselect");
308308
}
309309
}
310310
window.fireEvent("tool.state", [state]);
@@ -517,6 +517,7 @@ var CanvasPanel = new Class({
517517
el.groups = {};
518518
el.forEach(function(elm){
519519
elm.parent = el;
520+
elm.setId((typeOf(elm.id)==="number")?elm.type+elm.id:elm.id);
520521
});
521522
gs = this.level[this.level.i===0?"paper":"el"].groups
522523
gs[el.id] = gs[el.id] || el;

‎components/js/ElementsMixin.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,9 @@ var ElementsMixin = new Class({
146146
*/
147147
elementInsert : function(el){
148148
var obj = this.elementCreate(el);
149+
if(!obj) return;
149150
this.els[el.id] = obj;
150-
obj.element.inject(this.elements,"top");
151+
obj.element && obj.element.inject(this.elements,"top");
151152
obj.timeline && obj.timeline.inject(this.timelanes, "top");
152153
// console.log(this, obj);
153154
},
@@ -159,7 +160,7 @@ var ElementsMixin = new Class({
159160
var sel = this.selected;
160161
if(id) {
161162
if(typeOf(id)=="string" && sel[id]) {
162-
sel[id].element.removeClass("selected");
163+
sel[id].element && sel[id].element.removeClass("selected");
163164
sel[id].timeline && sel[id].timeline.removeClass("selected");
164165
delete sel[id];
165166
}
@@ -177,7 +178,7 @@ var ElementsMixin = new Class({
177178
var els = this.els, sel = this.selected;
178179
if(id && els[id] && !sel[id]){
179180
sel[id] = els[id];
180-
sel[id].element.addClass("selected");
181+
sel[id].element && sel[id].element.addClass("selected");
181182
sel[id].timeline && sel[id].timeline.addClass("selected");
182183
}
183184
},

‎components/js/PropMixin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ var PropMixin = new Class({
168168
break;
169169
case "percent":
170170
div = this.slidingLabel.initLabel(p.name,{label:p.label,
171-
value:p.value||100,factor:100,sufix:"%", min:p.min||"", step:1, max:p.max||""
171+
value:p.value||100,factor:100,sufix:"%", min:typeOf(p.min)==="null"?"":p.min, step:1, max:typeOf(p.max)==="null"?"":p.max
172172
});
173173
break;
174174
case "select":

‎components/js/TimePanel.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ var TimePanel = (function(){
4646
ry: {name:"ry", "class":"prop-label",type:"number", anim:true}, // (number)
4747
text: {name:"text", "class":"prop-label",type:"textarea"}, // (string) contents of the text element. Use '\n' for multiline text
4848
"text-anchor":{name:"text-anchor", "class":"prop-label",type:"select", options:["start","middle","end"]}, // (string) ["start", "middle", "end"], default is "middle"
49-
"opacity":{name:"opacity", "class":"prop-label",type:"percent", max:100, anim:true}, // (number)
49+
"opacity":{name:"opacity", "class":"prop-label",type:"percent",min:0, max:100, anim:true}, // (number)
5050
"fill":{name:"fill", label:"fill","class":"prop-label",width:100,wh: 10, colorRight:20, lebelRight:50,type:"color", anim:true}, // (string) colour, gradient or image
5151
//"fill-opacity":{name:"fill-opacity", type:"percent"}, // (number)
5252
"stroke":{name:"stroke", label:"stroke","class":"prop-label", width:100,wh: 10, colorRight:20,lebelRight:50, type:"color", anim:true}, // (string) stroke colour
@@ -416,6 +416,7 @@ var TimePanel = (function(){
416416
b.push(obj.timeline);
417417

418418
Object.each(el.anims, function(p, k){
419+
if(k==="transform"){return;} //skip hidden transform proprety
419420
$$(
420421
obj.tProps[k],
421422
obj.eProps[k].getParent(),
@@ -525,6 +526,7 @@ var TimePanel = (function(){
525526
* @return (div) the div representing the row
526527
*/
527528
elementCreate : function(el){
529+
if(el.type==="set") return {};
528530
var div = this.div, img = this.img, imgSrc = this.imgSrc, msPerpx = this.msPerpx,
529531
color = el.color = el.color || Raphael.getColor(0.9),
530532
type = el.type,
@@ -617,9 +619,12 @@ var TimePanel = (function(){
617619
return;
618620
}
619621
if(prop==="path"){
620-
//TODO
622+
el.drawing && el.plug();
621623
return;
622624
}
625+
if(p.hasClass("percent")){
626+
p.getLast('input').set("value", (val*=100).round());
627+
}
623628
//console.log(p, prop, el.attr(prop));
624629
p.getLast('input').set("value", val);
625630

@@ -785,11 +790,8 @@ var TimePanel = (function(){
785790
*/
786791
setLastMs : function(){
787792
var ms = 0
788-
Object.each(this.els,function(elm){
789-
Object.each(elm.el.anims,function(p){
790-
if (p.length === 0) return;
791-
ms = ms.max(p[p.length-1].ms);
792-
});
793+
Object.each(this.animating,function(elm){
794+
ms = elm.anim.ms;
793795
});
794796
this.lastMs = ms;
795797
},
@@ -892,8 +894,9 @@ var TimePanel = (function(){
892894
clearTimeout(this.timer);
893895
this.playButton.attr("path",this.icon.play);
894896
Object.each(this.animating, function(el){
895-
el.ft.showHandles();
896-
//TODO add path guid hide
897+
!(el.type==="path" && el.drawing) && el.ft.showHandles();
898+
//console.log(el.aimating.contains("path"));
899+
if(el.type==="path" && el.drawing) {el.plug();}
897900
window.fireEvent("panel.element.update",[el.trans(el.animating),el]);
898901
}, this);
899902
},
@@ -916,6 +919,7 @@ var TimePanel = (function(){
916919
//hide elements properties and guid tools
917920
Object.each(this.animating, function(el){
918921
el.ft.hideHandles();
922+
if(el.type=="path" && el.drawing) {el.hideManager();}
919923
window.fireEvent("panel.element.update",['clear',el]);
920924
}, this);
921925
this.playButton.attr("path",this.icon.stop);
@@ -1236,6 +1240,7 @@ var TimePanel = (function(){
12361240
});
12371241

12381242
el.anim = Raphael.animation(nanims, lastMs);
1243+
12391244
console.log("combinAnim", anims, nanims, mss);
12401245
return el;
12411246
},
@@ -1488,10 +1493,10 @@ var TimePanel = (function(){
14881493
el.destroy();
14891494
if(anims.length===0){
14901495
$$(elm.tProps[prop],elm.eProps[prop].getParent()).addClass('empty');
1491-
el.animating.erace(prop);
1496+
el.animating.erase(prop);
14921497
if(Object.every(elm.tProps,function(p){return p.hasClass('empty');})){
14931498
$$(elm.element,elm.timeline).addClass("empty");
1494-
this.animating.erace(el);
1499+
this.animating.erase(el);
14951500
delete elm.el.anim;
14961501
return;
14971502
}
@@ -1633,14 +1638,14 @@ var TimePanel = (function(){
16331638
elm.status(anim,(trackerMs-del)/(anim.ms-del));
16341639
window.fireEvent("panel.element.update",[elm.trans(prop),elm]);
16351640
}
1636-
(!next) && this.fireEvent("timeline.lastMs");
16371641
}.bind(this),
16381642
mouseup = function(){
16391643

16401644
window.removeEvent("mousemove",mousemove);
16411645
window.removeEvent("mouseup",mouseup);
16421646

16431647
this.combineAnim(elm);
1648+
(!next) && this.fireEvent("timeline.lastMs");//update lastMs
16441649
if(isKey){document.body.style.cursor = "default";}
16451650
document.onselectstart = function() {return true;};
16461651
}.bind(this),

‎components/js/ToolPanel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ initialize : function(options){
141141
setState: function(st){
142142
// console.log(st);
143143
if(st==="canvas"){
144-
// console.log("toolpanel setStat",this.getAttr(["fill", "stroke"]));
144+
//console.log("toolpanel setStat",this.getAttr(["fill", "stroke"]));
145145
this.prop(this.getAttr(["fill", "stroke"]));
146146
} else {
147147
this.toolMode = st;

‎components/js/raphael.pathManager.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -532,6 +532,44 @@ Raphael.fn.pathManager = function(patharray, options, callback) {
532532
//console.log(segs);
533533
return path;
534534
},
535+
updateManager = function(p) {
536+
var segs = path.segments,pa = path.patharray = Raphael._path2curve(p),
537+
x,y, seg;
538+
539+
path.attr("path", pa);
540+
541+
for (var i=0, ii = pa.length; i < ii; i++) {
542+
543+
p = pa[i];
544+
x = p[1]; y = p[2];
545+
switch(p[0]){
546+
case "M":
547+
lastM = segs.lastM = i;//mark last start point
548+
segs[i].attr({ax:x,ay:y});
549+
break;
550+
case "C":
551+
seg = segs.last();
552+
seg.attr({"nx":x, "ny":y});
553+
seg.updateHandels();
554+
x = p[5]; y = p[6]; //the point this segment is at
555+
if(x===p[lastM][1] && y===p[lastM][2] && (!pa[i+1] || pa[i+1][0]=="M" )){
556+
//if this segment aligns with last M an the next segment is eith the end or an M
557+
//TODO segs[i](segment(["Z"], i, {"prev":seg, "next":segs[lastM]}));
558+
segs[lastM].attr({"px":p[3],"py":p[4]});
559+
} else {
560+
segs[i].attr({x:x,y:y,px:p[3],py:p[4],nx:x,ny:y});
561+
}
562+
break;
563+
}
564+
//TODO make this method a scanner without adding for when seeking in the timeline
565+
566+
567+
}
568+
569+
//console.log(pa);
570+
//console.log(segs);
571+
return path;
572+
},
535573
parsePath = function (set) {
536574
var arr = [], index = 0, p,p2,p3;
537575
this.handelarray.empty();
@@ -606,11 +644,13 @@ path.unplug = function(){
606644
path.plug = function(){
607645
var pa = path.patharray || path.attr(path);
608646

647+
if(!path.guide.removed) path.guide.remove();
609648
path.guide = r.path().attr(guideattr);
610649
path.guide.noparse = true;
611650
path.guide.click(addSegment);
612651

613652
path.patharray = [];
653+
if(!path.guide.segments) path.segments.remove();
614654
path.segments = r.set();
615655
path.segments.last = function(){return this[this.length-1];};
616656

@@ -620,6 +660,19 @@ path.plug = function(){
620660

621661
parse(pa);
622662
};
663+
path.hideManager = function(){
664+
path.segments.hide();
665+
path.guide.hide();
666+
};
667+
path.showManager = function(){
668+
path.segments.show();
669+
path.guide.show();
670+
};
671+
path.updateManager = function(){
672+
//TODO
673+
//path.unplug();
674+
path.plug();
675+
}
623676
path.hide = function(oldFunc){
624677
return function (){
625678
path.unplug();

‎components/js/raphael.util.js‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,11 @@ Raphael.el.getOffset = Raphael.st.getOffset = function(){
5151
*/
5252
Raphael.el.trans =Raphael.st.trans = function(tr,val) {
5353
//console.log(this);
54-
var el = this, bb, ft = el.ft, at = ft.attrs, is = Raphael.is, offx,offy, bb = el.getBBox(), m =el.matrix.split();
54+
//if(this.type==="path" && !el.ft ) return;
55+
var el = this, bb, ft = el.ft, at = ft.attrs, is = Raphael.is, offx,offy, bb = el.getBBox(), m;
56+
if((el.type==="set"?el[0]:el).matrix){
57+
m = (el.type==="set"?el[0]:el).matrix.split()
58+
}
5559
if(!tr){
5660
return Object.append(el.attr(), el.trans(['tx','ty','sx','sy','rotate', 'bwidth', 'bheight']));;
5761
} else {
@@ -90,20 +94,6 @@ Raphael.el.trans =Raphael.st.trans = function(tr,val) {
9094
at.scale.y = val/at.size.y;
9195
//el.attr({height:at.size.y, y:at.y});
9296
break;
93-
case 'r':
94-
if(el.type!=='rect'){
95-
at.size.y = at.size.x = at.size.x + val*2 - at.size.x;
96-
}
97-
el.attr({r:val});
98-
break;
99-
case 'rx':
100-
at.size.x += val*2 - at.size.x;
101-
el.attr({rx:val});
102-
break;
103-
case 'ry':
104-
at.size.y += val*2 - at.size.y;
105-
el.attr({ry:val});
106-
break;
10797
case 'sx':
10898

10999
at.scale.x = val;

‎external/raphael.export.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@
213213
}
214214
}
215215

216-
//svg += '<' + node.type + ' transform="matrix(' + node.matrix.toString().replace(/^matrix\(|\)$/g, '') + ')"' + attrs + '></' + node.type + '>';
216+
svg += '<' + node.type + ' transform="matrix(' + node.matrix.toString().replace(/^matrix\(|\)$/g, '') + ')"' + attrs + '></' + node.type + '>';
217217
}
218218

219219
svg += '</svg>';

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114

115115
//auto generate
116116

117-
var bool=false,i,j,jj,x,step=1000,el,att,elc = 1,ntimes=3, bb,
117+
var bool=false,i,j,jj,x,step=1000,el,att,elc = 0,ntimes=3, bb,
118118
els=["rect", "text"],
119119
attr=[ "sx"];
120120
for(var k=0;k<elc;k++){
@@ -162,7 +162,7 @@
162162
}
163163
}
164164

165-
window.fireEvent("tool.state", ["select"]);
165+
//window.fireEvent("tool.state", ["select"]);
166166
//select last
167167

168168
//window.fireEvent("element.select", [el]);

0 commit comments

Comments
 (0)