420 lines
14 KiB
JavaScript
420 lines
14 KiB
JavaScript
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/ImageEditor/cropper/event.ts
|
|
var event_exports = {};
|
|
__export(event_exports, {
|
|
default: () => event_default
|
|
});
|
|
module.exports = __toCommonJS(event_exports);
|
|
var import_class = require("rc-util/lib/Dom/class");
|
|
var import_func = require("@zhst/func");
|
|
var import_warn = __toESM(require("rc-util/lib/warn"));
|
|
var import_utils = require("../utils");
|
|
var import_constants = require("./constants");
|
|
var event_default = {
|
|
bind() {
|
|
const { container, element, eventHandleList = [], option } = this;
|
|
const handleCropStart = (0, import_func.addEventListenerWrapper)(
|
|
container,
|
|
import_constants.EVENT_POINTER_DOWN,
|
|
this.onCropStart.bind(this)
|
|
);
|
|
eventHandleList.push(handleCropStart);
|
|
const handleCropMove = (0, import_func.addEventListenerWrapper)(
|
|
element.ownerDocument,
|
|
import_constants.EVENT_POINTER_MOVE,
|
|
this.onCropMove.bind(this)
|
|
);
|
|
eventHandleList.push(handleCropMove);
|
|
import_constants.EVENT_POINTER_UP.trim().split(import_constants.REGEXP_SPACES).forEach((eventName) => {
|
|
const handleCropEnd = (0, import_func.addEventListenerWrapper)(
|
|
element.ownerDocument,
|
|
eventName,
|
|
this.onCropEnd.bind(this)
|
|
);
|
|
eventHandleList.push(handleCropEnd);
|
|
});
|
|
},
|
|
unbind() {
|
|
const { eventHandleList } = this;
|
|
for (let index = eventHandleList.length; index > 0; index--) {
|
|
const handler = eventHandleList.shift;
|
|
try {
|
|
handler.remove();
|
|
} catch (error) {
|
|
(0, import_warn.default)("CROP:REMOVE_EVENT_FAIL,", error);
|
|
}
|
|
}
|
|
},
|
|
onCropStart(event) {
|
|
const { buttons, button } = event;
|
|
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)
|
|
((0, import_func.isNumber)(buttons) && buttons !== 1 || (0, import_func.isNumber)(button) && button !== 0 || // Open context menu
|
|
event.ctrlKey)) {
|
|
return;
|
|
}
|
|
const action = (0, import_utils.getData)(event.target, import_constants.DATA_ACTION);
|
|
this.pointer = (0, import_utils.getPointer)(event);
|
|
if (!import_constants.REGEXP_ACTIONS.test(action)) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
this.action = action;
|
|
this.cropping = false;
|
|
if (action === import_constants.ACTION_CROP) {
|
|
this.cropping = true;
|
|
const { showMask } = this.options;
|
|
if (showMask) {
|
|
(0, import_class.addClass)(this.dragBox, import_constants.CLASS_MASK);
|
|
}
|
|
}
|
|
const hasCrop = (0, import_func.get)(this, "cropBoxData.width", 0) !== 0 && (0, import_func.get)(this, "cropBoxData.height", 0) !== 0;
|
|
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_START, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
|
|
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_CHANGE, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
|
|
},
|
|
onCropMove(event) {
|
|
const { action } = this;
|
|
if (!action) {
|
|
return;
|
|
}
|
|
this.pointer = Object.assign({}, this.pointer, (0, import_utils.getPointer)(event, true));
|
|
event.preventDefault();
|
|
this.change(event);
|
|
},
|
|
onCropEnd(event) {
|
|
const { action } = this;
|
|
if (!action) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
this.action = null;
|
|
this.point = null;
|
|
if (this.cropping) {
|
|
this.cropping = false;
|
|
}
|
|
const hasCrop = (0, import_func.get)(this, "cropBoxData.width", 0) !== 0 && (0, import_func.get)(this, "cropBoxData.height", 0) !== 0;
|
|
(0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_CHANGE, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
|
|
hasCrop && (0, import_utils.dispatchEvent)(this.element, import_constants.EVENT_CROP_END, hasCrop ? this == null ? void 0 : this.cropBoxData : null);
|
|
},
|
|
change(event) {
|
|
const { options, containerData, cropBoxData = {}, pointer = {}, wrapper } = this;
|
|
let { action } = this;
|
|
let { left, top, width, height } = cropBoxData;
|
|
const right = left + width;
|
|
const bottom = top + height;
|
|
const minLeft = 0;
|
|
const minTop = 0;
|
|
const maxWidth = containerData.width;
|
|
const maxHeight = containerData.height;
|
|
let renderable = true;
|
|
let offset;
|
|
const range = {
|
|
x: pointer.endX - pointer.startX,
|
|
y: pointer.endY - pointer.startY
|
|
};
|
|
const check = (side) => {
|
|
switch (side) {
|
|
case import_constants.ACTION_EAST:
|
|
if (right + range.x > maxWidth) {
|
|
range.x = maxWidth - right;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_WEST:
|
|
if (left + range.x < minLeft) {
|
|
range.x = minLeft - left;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_NORTH:
|
|
if (top + range.y < minTop) {
|
|
range.y = minTop - top;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_SOUTH:
|
|
if (bottom + range.y > maxHeight) {
|
|
range.y = maxHeight - bottom;
|
|
}
|
|
break;
|
|
default:
|
|
}
|
|
};
|
|
switch (action) {
|
|
case import_constants.ACTION_CROP:
|
|
if (!range.x || !range.y) {
|
|
renderable = false;
|
|
break;
|
|
}
|
|
offset = (0, import_utils.getOffset)(this.container);
|
|
left = pointer.startX - offset.left;
|
|
top = pointer.startY - offset.top;
|
|
width = cropBoxData.minWidth;
|
|
height = cropBoxData.minHeight;
|
|
if (!left) {
|
|
debugger;
|
|
}
|
|
if (range.x > 0) {
|
|
action = range.y > 0 ? import_constants.ACTION_SOUTH_EAST : import_constants.ACTION_NORTH_EAST;
|
|
} else if (range.x < 0) {
|
|
left -= width;
|
|
action = range.y > 0 ? import_constants.ACTION_SOUTH_WEST : import_constants.ACTION_NORTH_WEST;
|
|
}
|
|
if (range.y < 0) {
|
|
top -= height;
|
|
}
|
|
if (!this.cropped) {
|
|
(0, import_class.removeClass)(this.cropBox, import_constants.CLASS_HIDDEN);
|
|
this.cropped = true;
|
|
if (this.limited) {
|
|
this.limitCropBox(true, true);
|
|
}
|
|
}
|
|
break;
|
|
case import_constants.ACTION_MOVE:
|
|
left += range.x;
|
|
top += range.y;
|
|
break;
|
|
case import_constants.ACTION_EAST:
|
|
if (range.x >= 0 && right >= maxWidth) {
|
|
renderable = false;
|
|
break;
|
|
}
|
|
check(import_constants.ACTION_EAST);
|
|
width += range.x;
|
|
if (width < 0) {
|
|
action = import_constants.ACTION_WEST;
|
|
width = -width;
|
|
left -= width;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_NORTH:
|
|
if (range.y <= 0 && top <= minTop) {
|
|
renderable = false;
|
|
break;
|
|
}
|
|
check(import_constants.ACTION_NORTH);
|
|
height -= range.y;
|
|
top += range.y;
|
|
if (height < 0) {
|
|
action = import_constants.ACTION_SOUTH;
|
|
height = -height;
|
|
top -= height;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_WEST:
|
|
if (range.x <= 0 && left <= minLeft) {
|
|
renderable = false;
|
|
break;
|
|
}
|
|
check(import_constants.ACTION_WEST);
|
|
width -= range.x;
|
|
left += range.x;
|
|
if (width < 0) {
|
|
action = import_constants.ACTION_EAST;
|
|
width = -width;
|
|
left -= width;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_SOUTH:
|
|
if (range.y >= 0 && bottom >= maxHeight) {
|
|
renderable = false;
|
|
break;
|
|
}
|
|
check(import_constants.ACTION_SOUTH);
|
|
height += range.y;
|
|
if (height < 0) {
|
|
action = import_constants.ACTION_NORTH;
|
|
height = -height;
|
|
top -= height;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_NORTH_EAST:
|
|
check(import_constants.ACTION_NORTH);
|
|
check(import_constants.ACTION_EAST);
|
|
if (range.x >= 0) {
|
|
if (right < maxWidth) {
|
|
width += range.x;
|
|
} else if (range.y <= 0 && top <= minTop) {
|
|
renderable = false;
|
|
}
|
|
} else {
|
|
width += range.x;
|
|
}
|
|
if (range.y <= 0) {
|
|
if (top > minTop) {
|
|
height -= range.y;
|
|
top += range.y;
|
|
}
|
|
} else {
|
|
height -= range.y;
|
|
top += range.y;
|
|
}
|
|
if (width < 0 && height < 0) {
|
|
action = import_constants.ACTION_SOUTH_WEST;
|
|
height = -height;
|
|
width = -width;
|
|
top -= height;
|
|
left -= width;
|
|
} else if (width < 0) {
|
|
action = import_constants.ACTION_NORTH_WEST;
|
|
width = -width;
|
|
left -= width;
|
|
} else if (height < 0) {
|
|
action = import_constants.ACTION_SOUTH_EAST;
|
|
height = -height;
|
|
top -= height;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_NORTH_WEST:
|
|
check(import_constants.ACTION_NORTH);
|
|
check(import_constants.ACTION_WEST);
|
|
if (range.x <= 0) {
|
|
if (left > minLeft) {
|
|
width -= range.x;
|
|
left += range.x;
|
|
} else if (range.y <= 0 && top <= minTop) {
|
|
renderable = false;
|
|
}
|
|
} else {
|
|
width -= range.x;
|
|
left += range.x;
|
|
}
|
|
if (range.y <= 0) {
|
|
if (top > minTop) {
|
|
height -= range.y;
|
|
top += range.y;
|
|
}
|
|
} else {
|
|
height -= range.y;
|
|
top += range.y;
|
|
}
|
|
if (width < 0 && height < 0) {
|
|
action = import_constants.ACTION_SOUTH_EAST;
|
|
height = -height;
|
|
width = -width;
|
|
top -= height;
|
|
left -= width;
|
|
} else if (width < 0) {
|
|
action = import_constants.ACTION_NORTH_EAST;
|
|
width = -width;
|
|
left -= width;
|
|
} else if (height < 0) {
|
|
action = import_constants.ACTION_SOUTH_WEST;
|
|
height = -height;
|
|
top -= height;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_SOUTH_WEST:
|
|
check(import_constants.ACTION_SOUTH);
|
|
check(import_constants.ACTION_WEST);
|
|
if (range.x <= 0) {
|
|
if (left > minLeft) {
|
|
width -= range.x;
|
|
left += range.x;
|
|
} else if (range.y >= 0 && bottom >= maxHeight) {
|
|
renderable = false;
|
|
}
|
|
} else {
|
|
width -= range.x;
|
|
left += range.x;
|
|
}
|
|
if (range.y >= 0) {
|
|
if (bottom < maxHeight) {
|
|
height += range.y;
|
|
}
|
|
} else {
|
|
height += range.y;
|
|
}
|
|
if (width < 0 && height < 0) {
|
|
action = import_constants.ACTION_NORTH_EAST;
|
|
height = -height;
|
|
width = -width;
|
|
top -= height;
|
|
left -= width;
|
|
} else if (width < 0) {
|
|
action = import_constants.ACTION_SOUTH_EAST;
|
|
width = -width;
|
|
left -= width;
|
|
} else if (height < 0) {
|
|
action = import_constants.ACTION_NORTH_WEST;
|
|
height = -height;
|
|
top -= height;
|
|
}
|
|
break;
|
|
case import_constants.ACTION_SOUTH_EAST:
|
|
check(import_constants.ACTION_SOUTH);
|
|
check(import_constants.ACTION_EAST);
|
|
if (range.x >= 0) {
|
|
if (right < maxWidth) {
|
|
width += range.x;
|
|
} else if (range.y >= 0 && bottom >= maxHeight) {
|
|
renderable = false;
|
|
}
|
|
} else {
|
|
width += range.x;
|
|
}
|
|
if (range.y >= 0) {
|
|
if (bottom < maxHeight) {
|
|
height += range.y;
|
|
}
|
|
} else {
|
|
height += range.y;
|
|
}
|
|
if (width < 0 && height < 0) {
|
|
action = import_constants.ACTION_NORTH_WEST;
|
|
height = -height;
|
|
width = -width;
|
|
top -= height;
|
|
left -= width;
|
|
} else if (width < 0) {
|
|
action = import_constants.ACTION_SOUTH_WEST;
|
|
width = -width;
|
|
left -= width;
|
|
} else if (height < 0) {
|
|
action = import_constants.ACTION_NORTH_EAST;
|
|
height = -height;
|
|
top -= height;
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
if (renderable) {
|
|
cropBoxData.width = width;
|
|
cropBoxData.height = height;
|
|
cropBoxData.left = left;
|
|
cropBoxData.top = top;
|
|
this.action = action;
|
|
this.cropBoxData = cropBoxData;
|
|
this.renderCropBox();
|
|
}
|
|
this.pointer.startX = this.pointer.endX;
|
|
this.pointer.startY = this.pointer.endY;
|
|
}
|
|
};
|