SPainter.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = function (d, b) {
  4. extendStatics = Object.setPrototypeOf ||
  5. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  6. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  7. return extendStatics(d, b);
  8. };
  9. return function (d, b) {
  10. extendStatics(d, b);
  11. function __() { this.constructor = d; }
  12. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  13. };
  14. })();
  15. Object.defineProperty(exports, "__esModule", { value: true });
  16. exports.SPainter = void 0;
  17. var lib_1 = require("@persagy-web/base/lib");
  18. var _1 = require("./");
  19. var SCompositeType_1 = require("./enums/SCompositeType");
  20. var SArrowStyleType_1 = require("./enums/SArrowStyleType");
  21. var SShadow_1 = require("./SShadow");
  22. var SPainter = (function (_super) {
  23. __extends(SPainter, _super);
  24. function SPainter(engine) {
  25. var _this = _super.call(this) || this;
  26. if (engine instanceof _1.SCanvasView) {
  27. _this.engine = new _1.SCanvasPaintEngine(engine.canvas);
  28. }
  29. else {
  30. _this.engine = engine;
  31. }
  32. _this.pen = new _1.SPen();
  33. _this.brush = new _1.SBrush();
  34. _this.font = new _1.SFont();
  35. _this.composite = SCompositeType_1.SCompositeType.SourceOver;
  36. _this.shadow = new SShadow_1.SShadow();
  37. return _this;
  38. }
  39. Object.defineProperty(SPainter.prototype, "pen", {
  40. get: function () {
  41. return this.engine.state.pen;
  42. },
  43. set: function (value) {
  44. this.engine.state.pen = value;
  45. },
  46. enumerable: false,
  47. configurable: true
  48. });
  49. Object.defineProperty(SPainter.prototype, "brush", {
  50. get: function () {
  51. return this.engine.state.brush;
  52. },
  53. set: function (value) {
  54. this.engine.state.brush = value;
  55. },
  56. enumerable: false,
  57. configurable: true
  58. });
  59. Object.defineProperty(SPainter.prototype, "font", {
  60. get: function () {
  61. return this.engine.state.font;
  62. },
  63. set: function (value) {
  64. this.engine.state.font = value;
  65. this.engine.changeFont(value);
  66. },
  67. enumerable: false,
  68. configurable: true
  69. });
  70. Object.defineProperty(SPainter.prototype, "composite", {
  71. get: function () {
  72. return this.engine.state._composite;
  73. },
  74. set: function (value) {
  75. this.engine.state._composite = value;
  76. },
  77. enumerable: false,
  78. configurable: true
  79. });
  80. Object.defineProperty(SPainter.prototype, "shadow", {
  81. get: function () {
  82. return this.engine.state.shadow;
  83. },
  84. set: function (value) {
  85. this.engine.state.shadow = value;
  86. },
  87. enumerable: false,
  88. configurable: true
  89. });
  90. Object.defineProperty(SPainter.prototype, "worldTransform", {
  91. get: function () {
  92. return this.engine.state.matrix;
  93. },
  94. enumerable: false,
  95. configurable: true
  96. });
  97. SPainter.prototype.save = function () {
  98. this.engine.save();
  99. };
  100. SPainter.prototype.restore = function () {
  101. this.engine.restore();
  102. };
  103. SPainter.prototype.translate = function (x, y) {
  104. this.engine.translate(x, y);
  105. };
  106. SPainter.prototype.scale = function (x, y) {
  107. this.engine.scale(x, y);
  108. };
  109. SPainter.prototype.rotate = function (angle) {
  110. this.engine.rotate(angle);
  111. };
  112. SPainter.prototype.transform = function (m11, m12, m21, m22, dx, dy) {
  113. this.engine.transform(m11, m12, m21, m22, dx, dy);
  114. };
  115. SPainter.prototype.setTransform = function (m11, m12, m21, m22, dx, dy) {
  116. this.engine.setTransform(m11, m12, m21, m22, dx, dy);
  117. };
  118. SPainter.prototype.resetTransform = function () {
  119. this.engine.resetTransform();
  120. };
  121. SPainter.prototype.setClip = function (path) {
  122. this.engine.setClip(path);
  123. };
  124. SPainter.prototype.clearRect = function (x, y, w, h) {
  125. if (x instanceof _1.SRect) {
  126. this.engine.clearRect(x);
  127. }
  128. else if (x instanceof _1.SPoint && y instanceof _1.SPoint) {
  129. this.engine.clearRect(new _1.SRect(x, y));
  130. }
  131. else if (x instanceof _1.SPoint && y instanceof _1.SSize) {
  132. this.engine.clearRect(new _1.SRect(x, y));
  133. }
  134. else {
  135. this.engine.clearRect(new _1.SRect(x, y, w, h));
  136. }
  137. };
  138. SPainter.prototype.drawRect = function (x, y, w, h) {
  139. if (x instanceof _1.SRect) {
  140. this.engine.drawRect(x);
  141. }
  142. else if (x instanceof _1.SPoint && y instanceof _1.SPoint) {
  143. this.engine.drawRect(new _1.SRect(x, y));
  144. }
  145. else if (x instanceof _1.SPoint && y instanceof _1.SSize) {
  146. this.engine.drawRect(new _1.SRect(x, y));
  147. }
  148. else {
  149. this.engine.drawRect(new _1.SRect(x, y, w, h));
  150. }
  151. };
  152. SPainter.prototype.drawCircle = function (cx, cy, r) {
  153. this.engine.drawCircle(cx, cy, r);
  154. };
  155. SPainter.prototype.drawEllipse = function (cx, cy, rx, ry) {
  156. this.engine.drawEllipse(cx, cy, rx, ry);
  157. };
  158. SPainter.prototype.drawArc = function (x, y, width, height, startAngle, endAngle) {
  159. if (x instanceof _1.SRect) {
  160. this.engine.drawArc(x.x, x.y, x.width, x.height, y, width);
  161. }
  162. else {
  163. this.engine.drawArc(x, y, width, height, startAngle, endAngle);
  164. }
  165. };
  166. SPainter.prototype.drawChord = function (x, y, width, height, startAngle, endAngle) {
  167. if (x instanceof _1.SRect) {
  168. this.engine.drawChord(x.x, x.y, x.width, x.height, y, width);
  169. }
  170. else {
  171. this.engine.drawChord(x, y, width, height, startAngle, endAngle);
  172. }
  173. };
  174. SPainter.prototype.drawPie = function (x, y, width, height, startAngle, endAngle) {
  175. if (x instanceof _1.SRect) {
  176. this.engine.drawPie(x.x, x.y, x.width, x.height, y, width);
  177. }
  178. else {
  179. this.engine.drawPie(x, y, width, height, startAngle, endAngle);
  180. }
  181. };
  182. SPainter.prototype.drawLine = function (x1, y1, x2, y2) {
  183. if (x1 instanceof _1.SLine) {
  184. this.engine.drawLine(x1);
  185. }
  186. else if (x1 instanceof _1.SPoint && y1 instanceof _1.SPoint) {
  187. this.engine.drawLine(new _1.SLine(x1, y1));
  188. }
  189. else {
  190. this.engine.drawLine(new _1.SLine(x1, y1, x2, y2));
  191. }
  192. };
  193. SPainter.prototype.drawPolyline = function (points) {
  194. this.engine.drawPolyline(points);
  195. };
  196. SPainter.prototype.drawPolygon = function (points) {
  197. this.engine.drawPolygon(points);
  198. };
  199. SPainter.prototype.drawPath = function (path) {
  200. this.engine.drawPath(path);
  201. };
  202. SPainter.prototype.drawText = function (text, x, y, maxWidth) {
  203. this.engine.drawText(text, x, y, maxWidth);
  204. };
  205. SPainter.prototype.drawImage = function (img, x, y, width, height) {
  206. this.engine.drawImage(img, x, y, width, height);
  207. };
  208. SPainter.prototype.toPx = function (p) {
  209. return p / this.engine.state.matrix.a;
  210. };
  211. SPainter.prototype.textWidth = function (text) {
  212. return this.engine.textWidth(text);
  213. };
  214. SPainter.prototype.drawArrowLine = function (x1, y1, x2, y2, st) {
  215. var line, style;
  216. if (x1 instanceof _1.SLine) {
  217. line = x1;
  218. style = y1;
  219. }
  220. else if (x1 instanceof _1.SPoint && y1 instanceof _1.SPoint) {
  221. line = new _1.SLine(x1, y1);
  222. style = x2;
  223. }
  224. else {
  225. line = new _1.SLine(x1, y1, x2, y2);
  226. style = st;
  227. }
  228. this.engine.drawLine(line);
  229. if (style) {
  230. if (style.begin) {
  231. if (style.begin == SArrowStyleType_1.SArrowStyleType.Basic) {
  232. this.drawBasicArrow(line, false);
  233. }
  234. else if (style.begin == SArrowStyleType_1.SArrowStyleType.Triangle) {
  235. this.drawTriangleArrow(line, false);
  236. }
  237. else if (style.begin == SArrowStyleType_1.SArrowStyleType.Diamond) {
  238. this.drawDiamondArrow(line, false);
  239. }
  240. else if (style.begin == SArrowStyleType_1.SArrowStyleType.Square) {
  241. this.drawSquareArrow(line, false);
  242. }
  243. else if (style.begin == SArrowStyleType_1.SArrowStyleType.Circle) {
  244. this.drawCircleArrow(line, false);
  245. }
  246. }
  247. if (style.end) {
  248. if (style.end == SArrowStyleType_1.SArrowStyleType.Basic) {
  249. this.drawBasicArrow(line, true);
  250. }
  251. else if (style.end == SArrowStyleType_1.SArrowStyleType.Triangle) {
  252. this.drawTriangleArrow(line, true);
  253. }
  254. else if (style.end == SArrowStyleType_1.SArrowStyleType.Diamond) {
  255. this.drawDiamondArrow(line, true);
  256. }
  257. else if (style.end == SArrowStyleType_1.SArrowStyleType.Square) {
  258. this.drawSquareArrow(line, true);
  259. }
  260. else if (style.end == SArrowStyleType_1.SArrowStyleType.Circle) {
  261. this.drawCircleArrow(line, true);
  262. }
  263. }
  264. }
  265. };
  266. SPainter.prototype.drawBasicArrow = function (line, isEnd) {
  267. if (isEnd === void 0) { isEnd = true; }
  268. var d = 5;
  269. var x1 = d * Math.cos(Math.PI / 4);
  270. var y1 = d * Math.sin(Math.PI / 4);
  271. var fo = Math.atan(line.dy / line.dx);
  272. var ang = line.dx >= 0 ? fo : fo + Math.PI;
  273. if (isEnd) {
  274. this.save();
  275. this.translate(line.x2, line.y2);
  276. this.rotate(ang);
  277. this.engine.drawPolyline([
  278. new _1.SPoint(-x1, y1),
  279. new _1.SPoint(0, 0),
  280. new _1.SPoint(-x1, -y1)
  281. ]);
  282. this.restore();
  283. }
  284. else {
  285. this.save();
  286. this.translate(line.x1, line.y1);
  287. this.rotate(ang);
  288. this.engine.drawPolyline([
  289. new _1.SPoint(x1, y1),
  290. new _1.SPoint(0, 0),
  291. new _1.SPoint(x1, -y1)
  292. ]);
  293. this.restore();
  294. }
  295. };
  296. SPainter.prototype.drawTriangleArrow = function (line, isEnd) {
  297. if (isEnd === void 0) { isEnd = true; }
  298. var d = 5;
  299. var x1 = d * Math.cos(Math.PI / 12);
  300. var y1 = d * Math.sin(Math.PI / 12);
  301. var fo = Math.atan(line.dy / line.dx);
  302. var ang = line.dx >= 0 ? fo : fo + Math.PI;
  303. if (isEnd) {
  304. this.save();
  305. this.translate(line.x2, line.y2);
  306. this.rotate(ang);
  307. this.engine.drawPolygon([
  308. new _1.SPoint(-x1, y1),
  309. new _1.SPoint(0, 0),
  310. new _1.SPoint(-x1, -y1)
  311. ]);
  312. this.restore();
  313. }
  314. else {
  315. this.save();
  316. this.translate(line.x1, line.y1);
  317. this.rotate(ang);
  318. this.engine.drawPolygon([
  319. new _1.SPoint(x1, y1),
  320. new _1.SPoint(0, 0),
  321. new _1.SPoint(x1, -y1)
  322. ]);
  323. this.restore();
  324. }
  325. };
  326. SPainter.prototype.drawDiamondArrow = function (line, isEnd) {
  327. if (isEnd === void 0) { isEnd = true; }
  328. var d = 2;
  329. var x1 = d * Math.cos(Math.PI / 4);
  330. var y1 = d * Math.sin(Math.PI / 4);
  331. var fo = Math.atan(line.dy / line.dx);
  332. var ang = line.dx >= 0 ? fo : fo + Math.PI;
  333. if (isEnd) {
  334. this.save();
  335. this.translate(line.x2, line.y2);
  336. this.rotate(ang);
  337. this.engine.drawPolygon([
  338. new _1.SPoint(-x1, y1),
  339. new _1.SPoint(0, 0),
  340. new _1.SPoint(-x1, -y1),
  341. new _1.SPoint(-Math.sqrt(2) * d, 0)
  342. ]);
  343. this.restore();
  344. }
  345. else {
  346. this.save();
  347. this.translate(line.x1, line.y1);
  348. this.rotate(ang);
  349. this.engine.drawPolygon([
  350. new _1.SPoint(x1, y1),
  351. new _1.SPoint(0, 0),
  352. new _1.SPoint(x1, -y1),
  353. new _1.SPoint(Math.sqrt(2) * d, 0)
  354. ]);
  355. this.restore();
  356. }
  357. };
  358. SPainter.prototype.drawSquareArrow = function (line, isEnd) {
  359. if (isEnd === void 0) { isEnd = true; }
  360. var d = 2;
  361. var fo = Math.atan(line.dy / line.dx);
  362. var ang = line.dx >= 0 ? fo : fo + Math.PI;
  363. if (isEnd) {
  364. this.save();
  365. this.translate(line.x2, line.y2);
  366. this.rotate(ang);
  367. this.engine.drawPolygon([
  368. new _1.SPoint(-d, d / 2),
  369. new _1.SPoint(0, d / 2),
  370. new _1.SPoint(0, -d / 2),
  371. new _1.SPoint(-d, -d / 2)
  372. ]);
  373. this.restore();
  374. }
  375. else {
  376. this.save();
  377. this.translate(line.x1, line.y1);
  378. this.rotate(ang);
  379. this.engine.drawPolygon([
  380. new _1.SPoint(0, d / 2),
  381. new _1.SPoint(d, d / 2),
  382. new _1.SPoint(d, -d / 2),
  383. new _1.SPoint(0, -d / 2)
  384. ]);
  385. this.restore();
  386. }
  387. };
  388. SPainter.prototype.drawCircleArrow = function (line, isEnd) {
  389. if (isEnd === void 0) { isEnd = true; }
  390. var d = 2;
  391. var fo = Math.atan(line.dy / line.dx);
  392. var ang = line.dx >= 0 ? fo : fo + Math.PI;
  393. if (isEnd) {
  394. this.save();
  395. this.translate(line.x2, line.y2);
  396. this.rotate(ang);
  397. this.engine.drawCircle(-d / 2, 0, d / 2);
  398. this.restore();
  399. }
  400. else {
  401. this.save();
  402. this.translate(line.x1, line.y1);
  403. this.rotate(ang);
  404. this.engine.drawCircle(d / 2, 0, d / 2);
  405. this.restore();
  406. }
  407. };
  408. return SPainter;
  409. }(lib_1.SObject));
  410. exports.SPainter = SPainter;