109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
|
|
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
var _dec, _class;
|
|
//@ts-nocheck
|
|
import { isPlainObject } from '@zhst/func';
|
|
import { addClass } from 'rc-util/lib/Dom/class';
|
|
import { Mixin, dispatchEvent } from "../utils";
|
|
import Render from "./render";
|
|
import Event from "./event";
|
|
import Shape from "./shape";
|
|
import Helper from "./helper";
|
|
import { CLASS_CANVAS, EVENT_VIEWER_READY, EVENT_VIEWER_ERROR } from "./constants";
|
|
import "./index.scss";
|
|
var Viewer = (_dec = Mixin(Render, Event, Shape, Helper), _dec(_class = /*#__PURE__*/function () {
|
|
function Viewer(element, options) {
|
|
_classCallCheck(this, Viewer);
|
|
/* 方便访问dom元素 */
|
|
/* 容器:挂在的节点 */
|
|
_defineProperty(this, "element", void 0);
|
|
/* 图片对象 */
|
|
_defineProperty(this, "image", void 0);
|
|
/* canvas对象 */
|
|
_defineProperty(this, "canvas", void 0);
|
|
/* 配置项 */
|
|
_defineProperty(this, "options", void 0);
|
|
/* 是否初始化完成 */
|
|
_defineProperty(this, "ready", void 0);
|
|
this.element = element;
|
|
this.options = Object.assign({}, isPlainObject(options) && options);
|
|
this.ready = false;
|
|
this.init();
|
|
}
|
|
_createClass(Viewer, [{
|
|
key: "init",
|
|
value: function () {
|
|
var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
while (1) switch (_context.prev = _context.next) {
|
|
case 0:
|
|
_context.prev = 0;
|
|
this.build();
|
|
//@ts-ignore
|
|
this.bind();
|
|
//@ts-ignore
|
|
_context.next = 5;
|
|
return this.render();
|
|
case 5:
|
|
this.ready = true;
|
|
dispatchEvent(this.element, EVENT_VIEWER_READY);
|
|
_context.next = 12;
|
|
break;
|
|
case 9:
|
|
_context.prev = 9;
|
|
_context.t0 = _context["catch"](0);
|
|
dispatchEvent(this.element, EVENT_VIEWER_ERROR);
|
|
case 12:
|
|
case "end":
|
|
return _context.stop();
|
|
}
|
|
}, _callee, this, [[0, 9]]);
|
|
}));
|
|
function init() {
|
|
return _init.apply(this, arguments);
|
|
}
|
|
return init;
|
|
}()
|
|
}, {
|
|
key: "build",
|
|
value: function build() {
|
|
var _this$options = this.options,
|
|
_this$options$width = _this$options.width,
|
|
width = _this$options$width === void 0 ? 300 : _this$options$width,
|
|
_this$options$height = _this$options.height,
|
|
height = _this$options$height === void 0 ? 150 : _this$options$height;
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = width || canvas.width;
|
|
canvas.height = height || canvas.height;
|
|
addClass(canvas, CLASS_CANVAS);
|
|
this.element.appendChild(canvas);
|
|
this.canvas = canvas;
|
|
}
|
|
}, {
|
|
key: "refleshImage",
|
|
value: function refleshImage(options) {
|
|
this.options = Object.assign({}, isPlainObject(options) && options);
|
|
this.ready = false;
|
|
this.element.removeChild(this.canvas);
|
|
this.init();
|
|
}
|
|
}, {
|
|
key: "destroy",
|
|
value: function destroy() {
|
|
var _this$element, _this$element$removeC;
|
|
//清理动画
|
|
//@ts-ignore
|
|
window.cancelAnimationFrame(this.animationFrame);
|
|
//清理事件
|
|
//@ts-ignore
|
|
this.unbind();
|
|
//清理dom
|
|
(_this$element = this.element) === null || _this$element === void 0 || (_this$element$removeC = _this$element.removeChild) === null || _this$element$removeC === void 0 || _this$element$removeC.call(_this$element, this.canvas);
|
|
}
|
|
}]);
|
|
return Viewer;
|
|
}()) || _class);
|
|
export default Viewer; |