"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 lib_1 = require("@saga-web/base/lib/"); 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 = lib_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); lib_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" })); lib_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 lib_1.SMouseEvent(event); if (se.buttons & lib_1.SMouseButton.MidButton) { this._midKeyPos.x = se.x; this._midKeyPos.y = se.y; } }; SCanvasView.prototype.onMouseMove = function (event) { if (this.moveable) { var se = new lib_1.SMouseEvent(event); if (se.buttons & lib_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 = lib_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 = lib_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 == lib_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; }(lib_1.SObject)); exports.SCanvasView = SCanvasView;