123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- "use strict";
- var __extends = (this && this.__extends) || (function () {
- var extendStatics = function (d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
- return extendStatics(d, b);
- };
- return function (d, b) {
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- })();
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.SCanvasView = void 0;
- var base_1 = require("@persagy-web/base");
- var SSvgPaintEngine_1 = require("./engines/SSvgPaintEngine");
- var SPoint_1 = require("./types/SPoint");
- var SPainter_1 = require("./SPainter");
- var SCanvasView = (function (_super) {
- __extends(SCanvasView, _super);
- function SCanvasView(id) {
- var _this = _super.call(this) || this;
- _this._needDraw = true;
- _this._origin = new SPoint_1.SPoint();
- _this.moveable = true;
- _this._scale = 1;
- _this.scalable = true;
- _this.wheelZoom = 1.05;
- _this.minScale = 0.000001;
- _this.maxScale = 1000000;
- _this._lastFrameTime = 0;
- _this._midKeyPos = new SPoint_1.SPoint();
- _this._touchState = base_1.STouchState.None;
- _this._touchPoint = new SPoint_1.SPoint();
- _this._beforeLength = 0;
- _this._afterLength = 0;
- _this.canvasView = document.getElementById(id);
- _this.bindEvent(_this.canvasView);
- _this.requestAnimationFrame(_this.loop.bind(_this));
- return _this;
- }
- Object.defineProperty(SCanvasView.prototype, "canvas", {
- get: function () {
- return this.canvasView.getContext("2d");
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(SCanvasView.prototype, "width", {
- get: function () {
- return this.canvasView.width;
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(SCanvasView.prototype, "height", {
- get: function () {
- return this.canvasView.height;
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(SCanvasView.prototype, "origin", {
- get: function () {
- return this._origin;
- },
- set: function (v) {
- if (!this.moveable) {
- return;
- }
- this._origin.x = v.x;
- this._origin.y = v.y;
- this._needDraw = true;
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(SCanvasView.prototype, "scale", {
- get: function () {
- return this._scale;
- },
- set: function (v) {
- if (!this.scalable) {
- return;
- }
- this._scale = v;
- this._needDraw = true;
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(SCanvasView.prototype, "cursor", {
- set: function (v) {
- this.canvasView.style.cursor = v;
- },
- enumerable: false,
- configurable: true
- });
- SCanvasView.prototype.update = function () {
- this._needDraw = true;
- };
- SCanvasView.prototype.saveImage = function (name, type) {
- var url = this.canvasView.toDataURL("image/" + type);
- base_1.SNetUtil.downLoad(name, url);
- };
- SCanvasView.prototype.imageUrl = function (type) {
- return this.canvasView.toDataURL("image/" + type);
- };
- SCanvasView.prototype.saveSvg = function (name) {
- var url = URL.createObjectURL(new Blob([this.svgData()], { type: "text/xml,charset=UTF-8" }));
- base_1.SNetUtil.downLoad(name, url);
- };
- SCanvasView.prototype.svgData = function () {
- var engine = new SSvgPaintEngine_1.SSvgPaintEngine(this.width, this.height);
- var painter = new SPainter_1.SPainter(engine);
- this.onDraw(painter);
- return engine.toSvg();
- };
- SCanvasView.prototype.scaleByPoint = function (zoom, x0, y0) {
- if (!this.scalable) {
- return;
- }
- var z = zoom;
- if (this.scale * zoom >= this.maxScale) {
- z = this.maxScale / this.scale;
- this.scale = this.maxScale;
- }
- else if (this.scale * zoom <= this.minScale) {
- z = this.minScale / this.scale;
- this.scale = this.minScale;
- }
- else {
- this.scale *= zoom;
- }
- this.origin.x = x0 - (x0 - this.origin.x) * z;
- this.origin.y = y0 - (y0 - this.origin.y) * z;
- };
- SCanvasView.prototype.loop = function () {
- var ctx = this.canvas;
- if (null != ctx && this._needDraw) {
- this._needDraw = false;
- var painter = new SPainter_1.SPainter(this);
- this.onDraw(painter);
- }
- this.requestAnimationFrame(this.loop.bind(this));
- };
- SCanvasView.prototype.onDraw = function (painter) { };
- SCanvasView.prototype.onClick = function (event) { };
- SCanvasView.prototype.onDoubleClick = function (event) { };
- SCanvasView.prototype.onMouseDown = function (event) {
- var se = new base_1.SMouseEvent(event);
- if (se.buttons & base_1.SMouseButton.MidButton) {
- this._midKeyPos.x = se.x;
- this._midKeyPos.y = se.y;
- }
- };
- SCanvasView.prototype.onMouseMove = function (event) {
- if (this.moveable) {
- var se = new base_1.SMouseEvent(event);
- if (se.buttons & base_1.SMouseButton.MidButton) {
- this.origin.x += se.x - this._midKeyPos.x;
- this.origin.y += se.y - this._midKeyPos.y;
- this._midKeyPos.x = se.x;
- this._midKeyPos.y = se.y;
- this.update();
- return;
- }
- }
- };
- SCanvasView.prototype.onMouseUp = function (event) { };
- SCanvasView.prototype.onContextMenu = function (event) { };
- SCanvasView.prototype.onMouseWheel = function (event) {
- if (event.deltaY < 0) {
- this.scaleByPoint(this.wheelZoom, event.offsetX, event.offsetY);
- }
- else {
- this.scaleByPoint(1 / this.wheelZoom, event.offsetX, event.offsetY);
- }
- };
- SCanvasView.prototype.onKeyDown = function (event) { };
- SCanvasView.prototype.onKeyPress = function (event) { };
- SCanvasView.prototype.onKeyUp = function (event) { };
- SCanvasView.prototype.onTouchStart = function (event) {
- var touches = event.touches;
- if (touches.length == 1) {
- this._touchPoint.x = event.touches[0].clientX;
- this._touchPoint.y = event.touches[0].clientY;
- }
- if (touches.length == 2) {
- this._touchState = base_1.STouchState.Zoom;
- this._beforeLength = this.getDistance(event);
- }
- };
- SCanvasView.prototype.onTouchMove = function (event) {
- var touches = event.touches;
- if (touches.length == 1) {
- this.origin.x += event.touches[0].clientX - this._touchPoint.x;
- this.origin.y += event.touches[0].clientY - this._touchPoint.y;
- this._touchPoint.x = event.touches[0].clientX;
- this._touchPoint.y = event.touches[0].clientY;
- }
- if (touches.length == 2) {
- this.viewZoom(event);
- }
- };
- SCanvasView.prototype.onTouchEnd = function (event) {
- this._touchState = base_1.STouchState.None;
- };
- SCanvasView.prototype.onResize = function (event) { };
- SCanvasView.prototype.bindEvent = function (element) {
- element.onclick = this.onClick.bind(this);
- element.ondblclick = this.onDoubleClick.bind(this);
- element.onmousedown = this.onMouseDown.bind(this);
- element.onmousemove = this.onMouseMove.bind(this);
- element.onmouseup = this.onMouseUp.bind(this);
- element.oncontextmenu = this.onContextMenu.bind(this);
- element.onwheel = this.onMouseWheel.bind(this);
- element.onkeydown = this.onKeyDown.bind(this);
- element.onkeypress = this.onKeyPress.bind(this);
- element.onkeyup = this.onKeyUp.bind(this);
- element.ontouchstart = this.onTouchStart.bind(this);
- element.ontouchmove = this.onTouchMove.bind(this);
- element.ontouchend = this.onTouchEnd.bind(this);
- element.onresize = this.onResize.bind(this);
- };
- SCanvasView.prototype.requestAnimationFrame = function (callback) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16 - (currTime - this._lastFrameTime));
- var id = setTimeout(function () {
- callback(currTime + timeToCall);
- }, timeToCall);
- this._lastFrameTime = currTime + timeToCall;
- return id;
- };
- SCanvasView.prototype.viewZoom = function (event) {
- if (this._touchState == base_1.STouchState.Zoom) {
- this._afterLength = this.getDistance(event);
- var gapLenght = this._afterLength - this._beforeLength;
- if (Math.abs(gapLenght) > 5 && this._beforeLength != 0.0) {
- var tempScale = this._afterLength / this._beforeLength;
- var p = this.getMiddlePoint(event);
- this.scaleByPoint(tempScale, p.x, p.y);
- this._beforeLength = this._afterLength;
- }
- }
- return true;
- };
- SCanvasView.prototype.getDistance = function (event) {
- if (event.touches.length < 2) {
- return 0;
- }
- var dx = event.touches[0].clientX - event.touches[1].clientX;
- var dy = event.touches[0].clientY - event.touches[1].clientY;
- return Math.sqrt(dx * dx + dy * dy);
- };
- SCanvasView.prototype.getMiddlePoint = function (event) {
- return new SPoint_1.SPoint((event.touches[0].clientX + event.touches[1].clientX) / 2, (event.touches[0].clientY + event.touches[1].clientY) / 2);
- };
- return SCanvasView;
- }(base_1.SObject));
- exports.SCanvasView = SCanvasView;
|