197 lines
8.0 KiB
JavaScript
197 lines
8.0 KiB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
||
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
||
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
||
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
||
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
||
//@ts-nocheck
|
||
import { isNumber, get, addEventListenerWrapper } from '@zhst/func';
|
||
import { addClass, removeClass } from 'rc-util/lib/Dom/class.js';
|
||
import guid from 'rc-util/lib/guid';
|
||
import warn from 'rc-util/lib/warn';
|
||
import { getPointer, dispatchEvent } from "../utils";
|
||
import { CLASS_MOVE, ACTION_DRAG,
|
||
// event
|
||
EVENT_CLICK, EVENT_WHEEL, EVENT_POINTER_DOWN, EVENT_POINTER_MOVE, EVENT_POINTER_UP, EVENT_EYE_DONE,
|
||
//正则
|
||
REGEXP_SPACES, SHAPE_TYPE_CIRCLE } from "./constants";
|
||
export default {
|
||
//store
|
||
disabled: false,
|
||
eventHandleList: [],
|
||
wheeling: false,
|
||
pointer: null,
|
||
action: null,
|
||
//method
|
||
bind: function bind() {
|
||
var _this = this;
|
||
var canvas = this.canvas,
|
||
element = this.element,
|
||
_this$eventHandleList = this.eventHandleList,
|
||
eventHandleList = _this$eventHandleList === void 0 ? [] : _this$eventHandleList,
|
||
options = this.options;
|
||
//图片事件
|
||
var scaleAble = get(options, 'scaleAble', true);
|
||
if (scaleAble) {
|
||
var handleWhele = addEventListenerWrapper(canvas, EVENT_WHEEL, this.onWheel.bind(this));
|
||
eventHandleList.push(handleWhele);
|
||
}
|
||
var dragAble = get(options, 'dragAble', true);
|
||
if (dragAble) {
|
||
var handleDragStart = addEventListenerWrapper(canvas, EVENT_POINTER_DOWN, this.onDragStart.bind(this));
|
||
eventHandleList.push(addEventListenerWrapper);
|
||
var handleDragMove = addEventListenerWrapper(element.ownerDocument, EVENT_POINTER_MOVE, this.onDragMove.bind(this));
|
||
eventHandleList.push(handleDragMove);
|
||
EVENT_POINTER_UP.trim().split(REGEXP_SPACES).forEach(function (eventName) {
|
||
var handleDragEnd = addEventListenerWrapper(element.ownerDocument, eventName, _this.onDragEnd.bind(_this));
|
||
eventHandleList.push(handleDragEnd);
|
||
});
|
||
}
|
||
|
||
//rect事件
|
||
var handleClick = addEventListenerWrapper(canvas, EVENT_CLICK, this.onClick.bind(this));
|
||
eventHandleList.push(handleClick);
|
||
// const handleLeveal = addEventListenerWrapper(canvas, EVENT_LEAVEL, this.onLeavel.bind(this));
|
||
// eventHandleList.push(handleLeveal);
|
||
// const handleEnter = addEventListenerWrapper(canvas, EVENT_ENTER, this.onEnter.bind(this));
|
||
// eventHandleList.push(handleEnter);
|
||
},
|
||
unbind: function unbind() {
|
||
var eventHandleList = this.eventHandleList;
|
||
for (var index = eventHandleList.length; index > 0; index--) {
|
||
var handler = eventHandleList[index - 1];
|
||
try {
|
||
handler.remove();
|
||
} catch (error) {
|
||
warn('VIEWER:REMOVE_EVENT_FAIL,', error);
|
||
}
|
||
}
|
||
},
|
||
/* 图片事件 */onWheel: function onWheel(event, cropBox) {
|
||
var _this2 = this;
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
|
||
// Limit wheel speed to prevent zoom too fast
|
||
if (this.wheeling || !this.zoomable) {
|
||
return;
|
||
}
|
||
this.wheeling = true;
|
||
setTimeout(function () {
|
||
_this2.wheeling = false;
|
||
}, 16);
|
||
var ratio = Number(this.options.zoomRatio) || 0.1;
|
||
var delta = 1;
|
||
if (event.deltaY) {
|
||
delta = event.deltaY > 0 ? 1 : -1;
|
||
} else if (event.wheelDelta) {
|
||
delta = -event.wheelDelta / 120;
|
||
} else if (event.detail) {
|
||
delta = event.detail > 0 ? 1 : -1;
|
||
}
|
||
var step = -delta * ratio;
|
||
var pos = this.windowToCanvasAxis(event);
|
||
this.calcTransform({
|
||
scaleCenter: _objectSpread(_objectSpread({}, pos), {}, {
|
||
step: step
|
||
})
|
||
}, cropBox);
|
||
},
|
||
onDragStart: function onDragStart(event) {
|
||
event.stopPropagation();
|
||
// This line is required for preventing page zooming in iOS browsers
|
||
event.preventDefault();
|
||
var buttons = event.buttons,
|
||
button = event.button;
|
||
if (!this.movable) {
|
||
return;
|
||
}
|
||
if (this.disabled ||
|
||
// Handle mouse event and pointer event and ignore touch event
|
||
(event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && (
|
||
// No primary button (Usually the left button)
|
||
isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 ||
|
||
// Open context menu
|
||
event.ctrlKey)) {
|
||
return;
|
||
}
|
||
this.pointer = getPointer(event);
|
||
this.action = ACTION_DRAG;
|
||
addClass(this.canvas, CLASS_MOVE);
|
||
},
|
||
onDragMove: function onDragMove(event) {
|
||
event.stopPropagation();
|
||
|
||
/***************************************************/
|
||
//todo:看下怎么拆shape 事件
|
||
var pointerCenter = this.windowToCanvasAxis(event);
|
||
var id = this.calcSelectShape(pointerCenter);
|
||
this.hoverShapId = id;
|
||
/***************************************************/
|
||
|
||
var action = this.action;
|
||
if (!action) {
|
||
return;
|
||
}
|
||
this.pointer = Object.assign({}, this.pointer, getPointer(event, true));
|
||
event.preventDefault();
|
||
var range = {
|
||
x: this.pointer.endX - this.pointer.startX,
|
||
y: this.pointer.endY - this.pointer.startY
|
||
};
|
||
this.calcTransform({
|
||
translateX: range.x,
|
||
translateY: range.y
|
||
});
|
||
// Override
|
||
this.pointer.startX = this.pointer.endX;
|
||
this.pointer.startY = this.pointer.endY;
|
||
},
|
||
onDragEnd: function onDragEnd(event) {
|
||
event.stopPropagation();
|
||
var action = this.action;
|
||
if (!action) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
this.action = null;
|
||
this.point = null;
|
||
removeClass(this.canvas, CLASS_MOVE);
|
||
},
|
||
/* rect事件 */
|
||
// onLeavel(event) {
|
||
// const pointerCenter = this.windowToCanvasAxis(event);
|
||
// this.highlightShape(pointerCenter);
|
||
// },
|
||
// onEnter(event) {
|
||
// this.highlightShape(null);
|
||
// },
|
||
onClick: function onClick(event) {
|
||
event.stopPropagation();
|
||
var pointerCenter = this.windowToCanvasAxis(event);
|
||
if (!this.isEyeOpen) {
|
||
var id = this.calcSelectShape(pointerCenter);
|
||
this.setSelectShapId(id);
|
||
} else {
|
||
//双目
|
||
//先直接写在这里
|
||
//过滤掉框，只有point
|
||
var pointShapeList = this.shapeList.filter(function (v) {
|
||
return !v['w'];
|
||
});
|
||
if (pointShapeList.length === 5) return;
|
||
var originAxis = this.canvasAxisToOriginAxis(pointerCenter);
|
||
var imageAxis = this.originAxisToImgAxis(originAxis);
|
||
this.addShape(_objectSpread({
|
||
id: "pointer_".concat(guid()),
|
||
selectAble: false
|
||
}, imageAxis), SHAPE_TYPE_CIRCLE);
|
||
pointShapeList = this.shapeList.filter(function (v) {
|
||
return !v['w'];
|
||
});
|
||
if (pointShapeList.length === 5) {
|
||
dispatchEvent(this.element, EVENT_EYE_DONE);
|
||
}
|
||
}
|
||
}
|
||
}; |