[29896] | 1 | // Raphael JS SVG Group 0.1
|
---|
| 2 | // Copyright (c) George I. 2011-2015
|
---|
| 3 | (function() {
|
---|
| 4 | "use strict";
|
---|
| 5 | Raphael.fn.group = function(f, g) {
|
---|
| 6 | if(Raphael.svg == true) {
|
---|
| 7 | this.svg = "http://www.w3.org/2000/svg";
|
---|
| 8 | this.dv = document.getElementById(f);
|
---|
| 9 | this.defs = this.dv.getElementsByTagName("defs")[0];
|
---|
| 10 | var defs = this.defs;
|
---|
| 11 | var svgHead = this.svg;
|
---|
| 12 | this.svgcanv = this.dv.getElementsByTagName("svg")[0];
|
---|
| 13 | this.svgcanv.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
|
---|
| 14 | var countGroups = this.svgcanv.getElementsByTagName("g").length;
|
---|
| 15 | var createUUID=function(b,a){return function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(b,a).toUpperCase()}}(/[xy]/g,function(b){var a=16*Math.random()|0;return("x"==b?a:a&3|8).toString(16)});
|
---|
| 16 | if(countGroups == 0) {
|
---|
| 17 | this.masterGroup = document.createElementNS(this.svg, "g");
|
---|
| 18 | this.svgcanv.appendChild(this.masterGroup)
|
---|
| 19 | }else {
|
---|
| 20 | this.masterGroup = this.svgcanv.getElementsByTagName("g")[0]
|
---|
| 21 | }
|
---|
| 22 | this.group = document.createElementNS(this.svg, "g");
|
---|
| 23 | for(var i = 0;i < g.length;i++) {
|
---|
| 24 | this.group.appendChild(g[i].node)
|
---|
| 25 | }
|
---|
| 26 | this.masterGroup.appendChild(this.group);
|
---|
| 27 | this.group.set = [];
|
---|
| 28 | var _mg = this.masterGroup;
|
---|
| 29 | this.group.getMaster = function() {
|
---|
| 30 | return _mg
|
---|
| 31 | };
|
---|
| 32 | this.group.remove = function() {
|
---|
| 33 | this.parentNode.removeChild(this)
|
---|
| 34 | };
|
---|
| 35 | var thisTransform = {translate:{x:0, y:0}, scale:{x:1, y:1}, rotate:{x:0, y:0, z:0}};
|
---|
| 36 | var transformString = function() {
|
---|
| 37 | return"translate(" + thisTransform.translate.x + "," + thisTransform.translate.y + ") scale(" + thisTransform.scale.x + "," + thisTransform.scale.y + ") rotate(" + thisTransform.rotate.x + "," + thisTransform.rotate.y + "," + thisTransform.rotate.z + ")"
|
---|
| 38 | };
|
---|
| 39 | this.group.translate = function(c, a) {
|
---|
| 40 | thisTransform.translate.x = c;
|
---|
| 41 | thisTransform.translate.y = a;
|
---|
| 42 | this.setAttribute("transform", transformString())
|
---|
| 43 | };
|
---|
| 44 | this.group.rotate = function(c, a, e) {
|
---|
| 45 | thisTransform.rotate.x = c;
|
---|
| 46 | thisTransform.rotate.y = a;
|
---|
| 47 | thisTransform.rotate.z = e;
|
---|
| 48 | this.setAttribute("transform", transformString())
|
---|
| 49 | };
|
---|
| 50 | this.group.scale = function(c, a) {
|
---|
| 51 | thisTransform.scale.x = c;
|
---|
| 52 | thisTransform.scale.y = a;
|
---|
| 53 | this.setAttribute("transform", transformString())
|
---|
| 54 | };
|
---|
| 55 | this.group.push = function() {
|
---|
| 56 | for(i = 0;i < arguments.length;i++) {
|
---|
| 57 | this.appendChild(arguments[i].node)
|
---|
| 58 | }
|
---|
| 59 | };
|
---|
| 60 | this.group.addElement = function() {
|
---|
| 61 | for(i = 0;i < arguments.length;i++) {
|
---|
| 62 | this.appendChild(arguments[i])
|
---|
| 63 | }
|
---|
| 64 | };
|
---|
| 65 | this.group.getAttr = function(c) {
|
---|
| 66 | return thisTransform[c]
|
---|
| 67 | };
|
---|
| 68 | this.group.copy = function(el) {
|
---|
| 69 | this.copy = el.node.cloneNode(true);
|
---|
| 70 | this.appendChild(this.copy)
|
---|
| 71 | };
|
---|
| 72 | this.group.toFront = function(){
|
---|
| 73 | this.getMaster().appendChild(this);
|
---|
| 74 | };
|
---|
| 75 | this.group.clipPath = function(c){
|
---|
| 76 | var cp = document.createElementNS(svgHead, "clipPath");
|
---|
| 77 | var cpID = createUUID();
|
---|
| 78 | cp.setAttribute("id",cpID);
|
---|
| 79 | cp.appendChild(c.node);
|
---|
| 80 | defs.appendChild(cp);
|
---|
| 81 | this.setAttribute("clip-path","url(#"+cpID+")")
|
---|
| 82 | };
|
---|
| 83 |
|
---|
| 84 | this.group.animate = function(){
|
---|
| 85 | var el = this;
|
---|
| 86 | var args = arguments;
|
---|
| 87 | var attrToAnimate = args[0];
|
---|
| 88 | var duration = args[1];
|
---|
| 89 | var callback = args[2];
|
---|
| 90 | var timerx;
|
---|
| 91 | if(typeof(timerx) !== 'undefined'){
|
---|
| 92 | clearInterval(timerx);
|
---|
| 93 | }
|
---|
| 94 | var newPosx = attrToAnimate['x'];
|
---|
| 95 | var original = el.getAttr('translate').x;
|
---|
| 96 | var stepLen;
|
---|
| 97 | timerx = setInterval(function(){if(original>newPosx){stepLen = (original - newPosx)/10;moveLeft()}else{stepLen = (newPosx - original)/10;moveRight()}},10);
|
---|
| 98 | var currpos = original;
|
---|
| 99 | function moveLeft(){
|
---|
| 100 | if(el.getAttr('translate').x-stepLen>newPosx){
|
---|
| 101 | el.translate(el.getAttr('translate').x-stepLen,0);
|
---|
| 102 | }else{
|
---|
| 103 | el.translate(newPosx,0);
|
---|
| 104 | clearInterval(timerx);
|
---|
| 105 | callback()
|
---|
| 106 | }
|
---|
| 107 | };
|
---|
| 108 | function moveRight(){
|
---|
| 109 | if(el.getAttr('translate').x+stepLen<newPosx){
|
---|
| 110 | el.translate(el.getAttr('translate').x+stepLen,0);
|
---|
| 111 | }else{
|
---|
| 112 | el.translate(newPosx,0);
|
---|
| 113 | clearInterval(timerx);
|
---|
| 114 | callback()
|
---|
| 115 | }
|
---|
| 116 | }
|
---|
| 117 | };
|
---|
| 118 | return this.group
|
---|
| 119 | }
|
---|
| 120 | };
|
---|
| 121 | })();
|
---|