paper.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. define(function(require, exports, module) {
  2. var Class = require('../core/class');
  3. var utils = require('../core/utils');
  4. var svg = require('./svg');
  5. var Container = require('./container');
  6. var ShapeContainer = require('./shapecontainer');
  7. var ViewBox = require('./viewbox');
  8. var EventHandler = require('./eventhandler');
  9. var Styled = require('./styled');
  10. var Matrix = require('./matrix');
  11. var Paper = Class.createClass('Paper', {
  12. mixins: [ShapeContainer, EventHandler, Styled, ViewBox],
  13. constructor: function(container) {
  14. this.callBase();
  15. this.node = this.createSVGNode();
  16. this.node.paper = this;
  17. this.node.appendChild(this.resourceNode = svg.createNode('defs'));
  18. this.node.appendChild(this.shapeNode = svg.createNode('g'));
  19. this.resources = new Container();
  20. this.setWidth('100%').setHeight('100%');
  21. if (container) {
  22. this.renderTo(container);
  23. }
  24. this.callMixin();
  25. },
  26. renderTo: function(container) {
  27. if (utils.isString(container)) {
  28. container = document.getElementById(container);
  29. }
  30. this.container = container;
  31. container.appendChild(this.node);
  32. },
  33. createSVGNode: function() {
  34. var node = svg.createNode('svg');
  35. node.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  36. node.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
  37. node.setAttribute('version', '1.1');
  38. return node;
  39. },
  40. getNode: function() {
  41. return this.node;
  42. },
  43. getContainer: function() {
  44. return this.container;
  45. },
  46. getWidth: function() {
  47. return this.node.clientWidth;
  48. },
  49. setWidth: function(width) {
  50. this.node.setAttribute('width', width);
  51. return this;
  52. },
  53. getHeight: function() {
  54. return this.node.clientHeight;
  55. },
  56. setHeight: function(height) {
  57. this.node.setAttribute('height', height);
  58. return this;
  59. },
  60. setViewPort: function(cx, cy, zoom) {
  61. var viewport, box;
  62. if (arguments.length == 1) {
  63. viewport = arguments[0];
  64. cx = viewport.center.x;
  65. cy = viewport.center.y;
  66. zoom = viewport.zoom;
  67. }
  68. zoom = zoom || 1;
  69. box = this.getViewBox();
  70. var matrix = new Matrix();
  71. var dx = (box.x + box.width / 2) - cx,
  72. dy = (box.y + box.height / 2) - cy;
  73. matrix.translate(-cx, -cy);
  74. matrix.scale(zoom);
  75. matrix.translate(cx, cy);
  76. matrix.translate(dx, dy);
  77. this.shapeNode.setAttribute('transform', 'matrix(' + matrix + ')');
  78. this.viewport = {
  79. center: {
  80. x: cx,
  81. y: cy
  82. },
  83. offset: {
  84. x: dx,
  85. y: dy
  86. },
  87. zoom: zoom
  88. };
  89. return this;
  90. },
  91. getViewPort: function() {
  92. if (!this.viewport) {
  93. var box = this.getViewBox();
  94. return {
  95. zoom: 1,
  96. center: {
  97. x: box.x + box.width / 2,
  98. y: box.y + box.height / 2
  99. },
  100. offset: {
  101. x: 0,
  102. y: 0
  103. }
  104. };
  105. }
  106. return this.viewport;
  107. },
  108. getViewPortMatrix: function() {
  109. return Matrix.parse(this.shapeNode.getAttribute('transform'));
  110. },
  111. getViewPortTransform: function() {
  112. var m = this.shapeNode.getCTM();
  113. return new Matrix(m.a, m.b, m.c, m.d, m.e, m.f);
  114. },
  115. getTransform: function() {
  116. return this.getViewPortTransform().reverse();
  117. },
  118. addResource: function(resource) {
  119. this.resources.appendItem(resource);
  120. if (resource.node) {
  121. this.resourceNode.appendChild(resource.node);
  122. }
  123. return this;
  124. },
  125. removeResource: function(resource) {
  126. if (resource.remove) {
  127. resource.remove();
  128. }
  129. if (resource.node) {
  130. this.resourceNode.removeChild(resource.node);
  131. }
  132. return this;
  133. },
  134. getPaper: function() {
  135. return this;
  136. }
  137. });
  138. var Shape = require('./shape');
  139. Class.extendClass(Shape, {
  140. getPaper: function() {
  141. var parent = this.container;
  142. while (parent && parent instanceof Paper === false) {
  143. parent = parent.container;
  144. }
  145. return parent;
  146. },
  147. isAttached: function() {
  148. return !!this.getPaper();
  149. },
  150. whenPaperReady: function(fn) {
  151. var me = this;
  152. function check() {
  153. var paper = me.getPaper();
  154. if (paper && fn) {
  155. fn.call(me, paper);
  156. }
  157. return paper;
  158. }
  159. if (!check()) {
  160. this.on('add treeadd', function listen() {
  161. if (check()) {
  162. me.off('add', listen);
  163. me.off('treeadd', listen);
  164. }
  165. });
  166. }
  167. return this;
  168. }
  169. });
  170. return Paper;
  171. });