|
|
@@ -0,0 +1,4814 @@
|
|
|
+var __defProp = Object.defineProperty;
|
|
|
+var __defProps = Object.defineProperties;
|
|
|
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
|
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
|
+var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
|
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
|
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
|
+var __spreadValues = (a, b) => {
|
|
|
+ for (var prop in b || (b = {}))
|
|
|
+ if (__hasOwnProp.call(b, prop))
|
|
|
+ __defNormalProp(a, prop, b[prop]);
|
|
|
+ if (__getOwnPropSymbols)
|
|
|
+ for (var prop of __getOwnPropSymbols(b)) {
|
|
|
+ if (__propIsEnum.call(b, prop))
|
|
|
+ __defNormalProp(a, prop, b[prop]);
|
|
|
+ }
|
|
|
+ return a;
|
|
|
+};
|
|
|
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
+var __async = (__this, __arguments, generator) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ var fulfilled = (value) => {
|
|
|
+ try {
|
|
|
+ step(generator.next(value));
|
|
|
+ } catch (e) {
|
|
|
+ reject(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var rejected = (value) => {
|
|
|
+ try {
|
|
|
+ step(generator.throw(value));
|
|
|
+ } catch (e) {
|
|
|
+ reject(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
|
+ step((generator = generator.apply(__this, __arguments)).next());
|
|
|
+ });
|
|
|
+};
|
|
|
+var eventemitter3 = { exports: {} };
|
|
|
+(function(module) {
|
|
|
+ var has = Object.prototype.hasOwnProperty, prefix = "~";
|
|
|
+ function Events() {
|
|
|
+ }
|
|
|
+ if (Object.create) {
|
|
|
+ Events.prototype = /* @__PURE__ */ Object.create(null);
|
|
|
+ if (!new Events().__proto__)
|
|
|
+ prefix = false;
|
|
|
+ }
|
|
|
+ function EE(fn, context, once) {
|
|
|
+ this.fn = fn;
|
|
|
+ this.context = context;
|
|
|
+ this.once = once || false;
|
|
|
+ }
|
|
|
+ function addListener(emitter, event, fn, context, once) {
|
|
|
+ if (typeof fn !== "function") {
|
|
|
+ throw new TypeError("The listener must be a function");
|
|
|
+ }
|
|
|
+ var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
|
|
|
+ if (!emitter._events[evt])
|
|
|
+ emitter._events[evt] = listener, emitter._eventsCount++;
|
|
|
+ else if (!emitter._events[evt].fn)
|
|
|
+ emitter._events[evt].push(listener);
|
|
|
+ else
|
|
|
+ emitter._events[evt] = [emitter._events[evt], listener];
|
|
|
+ return emitter;
|
|
|
+ }
|
|
|
+ function clearEvent(emitter, evt) {
|
|
|
+ if (--emitter._eventsCount === 0)
|
|
|
+ emitter._events = new Events();
|
|
|
+ else
|
|
|
+ delete emitter._events[evt];
|
|
|
+ }
|
|
|
+ function EventEmitter2() {
|
|
|
+ this._events = new Events();
|
|
|
+ this._eventsCount = 0;
|
|
|
+ }
|
|
|
+ EventEmitter2.prototype.eventNames = function eventNames() {
|
|
|
+ var names = [], events, name;
|
|
|
+ if (this._eventsCount === 0)
|
|
|
+ return names;
|
|
|
+ for (name in events = this._events) {
|
|
|
+ if (has.call(events, name))
|
|
|
+ names.push(prefix ? name.slice(1) : name);
|
|
|
+ }
|
|
|
+ if (Object.getOwnPropertySymbols) {
|
|
|
+ return names.concat(Object.getOwnPropertySymbols(events));
|
|
|
+ }
|
|
|
+ return names;
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.listeners = function listeners(event) {
|
|
|
+ var evt = prefix ? prefix + event : event, handlers = this._events[evt];
|
|
|
+ if (!handlers)
|
|
|
+ return [];
|
|
|
+ if (handlers.fn)
|
|
|
+ return [handlers.fn];
|
|
|
+ for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
|
|
|
+ ee[i] = handlers[i].fn;
|
|
|
+ }
|
|
|
+ return ee;
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.listenerCount = function listenerCount(event) {
|
|
|
+ var evt = prefix ? prefix + event : event, listeners = this._events[evt];
|
|
|
+ if (!listeners)
|
|
|
+ return 0;
|
|
|
+ if (listeners.fn)
|
|
|
+ return 1;
|
|
|
+ return listeners.length;
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
|
|
|
+ var evt = prefix ? prefix + event : event;
|
|
|
+ if (!this._events[evt])
|
|
|
+ return false;
|
|
|
+ var listeners = this._events[evt], len = arguments.length, args, i;
|
|
|
+ if (listeners.fn) {
|
|
|
+ if (listeners.once)
|
|
|
+ this.removeListener(event, listeners.fn, void 0, true);
|
|
|
+ switch (len) {
|
|
|
+ case 1:
|
|
|
+ return listeners.fn.call(listeners.context), true;
|
|
|
+ case 2:
|
|
|
+ return listeners.fn.call(listeners.context, a1), true;
|
|
|
+ case 3:
|
|
|
+ return listeners.fn.call(listeners.context, a1, a2), true;
|
|
|
+ case 4:
|
|
|
+ return listeners.fn.call(listeners.context, a1, a2, a3), true;
|
|
|
+ case 5:
|
|
|
+ return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
|
|
|
+ case 6:
|
|
|
+ return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
|
|
|
+ }
|
|
|
+ for (i = 1, args = new Array(len - 1); i < len; i++) {
|
|
|
+ args[i - 1] = arguments[i];
|
|
|
+ }
|
|
|
+ listeners.fn.apply(listeners.context, args);
|
|
|
+ } else {
|
|
|
+ var length = listeners.length, j;
|
|
|
+ for (i = 0; i < length; i++) {
|
|
|
+ if (listeners[i].once)
|
|
|
+ this.removeListener(event, listeners[i].fn, void 0, true);
|
|
|
+ switch (len) {
|
|
|
+ case 1:
|
|
|
+ listeners[i].fn.call(listeners[i].context);
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ listeners[i].fn.call(listeners[i].context, a1);
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ listeners[i].fn.call(listeners[i].context, a1, a2);
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ listeners[i].fn.call(listeners[i].context, a1, a2, a3);
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ if (!args)
|
|
|
+ for (j = 1, args = new Array(len - 1); j < len; j++) {
|
|
|
+ args[j - 1] = arguments[j];
|
|
|
+ }
|
|
|
+ listeners[i].fn.apply(listeners[i].context, args);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.on = function on(event, fn, context) {
|
|
|
+ return addListener(this, event, fn, context, false);
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.once = function once(event, fn, context) {
|
|
|
+ return addListener(this, event, fn, context, true);
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.removeListener = function removeListener(event, fn, context, once) {
|
|
|
+ var evt = prefix ? prefix + event : event;
|
|
|
+ if (!this._events[evt])
|
|
|
+ return this;
|
|
|
+ if (!fn) {
|
|
|
+ clearEvent(this, evt);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ var listeners = this._events[evt];
|
|
|
+ if (listeners.fn) {
|
|
|
+ if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
|
|
|
+ clearEvent(this, evt);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (var i = 0, events = [], length = listeners.length; i < length; i++) {
|
|
|
+ if (listeners[i].fn !== fn || once && !listeners[i].once || context && listeners[i].context !== context) {
|
|
|
+ events.push(listeners[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (events.length)
|
|
|
+ this._events[evt] = events.length === 1 ? events[0] : events;
|
|
|
+ else
|
|
|
+ clearEvent(this, evt);
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.removeAllListeners = function removeAllListeners(event) {
|
|
|
+ var evt;
|
|
|
+ if (event) {
|
|
|
+ evt = prefix ? prefix + event : event;
|
|
|
+ if (this._events[evt])
|
|
|
+ clearEvent(this, evt);
|
|
|
+ } else {
|
|
|
+ this._events = new Events();
|
|
|
+ this._eventsCount = 0;
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ };
|
|
|
+ EventEmitter2.prototype.off = EventEmitter2.prototype.removeListener;
|
|
|
+ EventEmitter2.prototype.addListener = EventEmitter2.prototype.on;
|
|
|
+ EventEmitter2.prefixed = prefix;
|
|
|
+ EventEmitter2.EventEmitter = EventEmitter2;
|
|
|
+ {
|
|
|
+ module.exports = EventEmitter2;
|
|
|
+ }
|
|
|
+})(eventemitter3);
|
|
|
+var EventEmitter = eventemitter3.exports;
|
|
|
+const createCanvas = (width, height, opt = { noStyle: false, noTranslate: false, className: "" }) => {
|
|
|
+ let canvas = document.createElement("canvas");
|
|
|
+ if (!opt.noStyle) {
|
|
|
+ canvas.style.cssText = `
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ `;
|
|
|
+ }
|
|
|
+ if (opt.className) {
|
|
|
+ canvas.className = opt.className;
|
|
|
+ }
|
|
|
+ let ctx = canvas.getContext("2d");
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+ if (!opt.noTranslate) {
|
|
|
+ ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ canvas,
|
|
|
+ ctx
|
|
|
+ };
|
|
|
+};
|
|
|
+const getTowPointDistance = (x1, y1, x2, y2) => {
|
|
|
+ return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
|
|
|
+};
|
|
|
+const getPointToLineDistance = (x, y, x1, y1, x2, y2) => {
|
|
|
+ if (x1 === x2) {
|
|
|
+ return Math.abs(x - x1);
|
|
|
+ } else {
|
|
|
+ let B = 1;
|
|
|
+ let A, C;
|
|
|
+ A = (y1 - y2) / (x2 - x1);
|
|
|
+ C = 0 - B * y1 - A * x1;
|
|
|
+ return Math.abs((A * x + B * y + C) / Math.sqrt(A * A + B * B));
|
|
|
+ }
|
|
|
+};
|
|
|
+const checkIsAtSegment = (x, y, x1, y1, x2, y2, dis = 10) => {
|
|
|
+ if (getPointToLineDistance(x, y, x1, y1, x2, y2) > dis) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let dis1 = getTowPointDistance(x, y, x1, y1);
|
|
|
+ let dis2 = getTowPointDistance(x, y, x2, y2);
|
|
|
+ let dis3 = getTowPointDistance(x1, y1, x2, y2);
|
|
|
+ let max = Math.sqrt(dis * dis + dis3 * dis3);
|
|
|
+ if (dis1 <= max && dis2 <= max) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+};
|
|
|
+const radToDeg = (rad) => {
|
|
|
+ return rad * (180 / Math.PI);
|
|
|
+};
|
|
|
+const degToRad = (deg) => {
|
|
|
+ return deg * (Math.PI / 180);
|
|
|
+};
|
|
|
+const getTowPointRotate = (cx, cy, tx, ty, fx, fy) => {
|
|
|
+ return radToDeg(Math.atan2(ty - cy, tx - cx) - Math.atan2(fy - cy, fx - cx));
|
|
|
+};
|
|
|
+const getRotatedPoint = (x, y, cx, cy, rotate) => {
|
|
|
+ let deg = radToDeg(Math.atan2(y - cy, x - cx));
|
|
|
+ let del = deg + rotate;
|
|
|
+ let dis = getTowPointDistance(x, y, cx, cy);
|
|
|
+ return {
|
|
|
+ x: Math.cos(degToRad(del)) * dis + cx,
|
|
|
+ y: Math.sin(degToRad(del)) * dis + cy
|
|
|
+ };
|
|
|
+};
|
|
|
+const getElementCenterPoint = (element) => {
|
|
|
+ let { x, y, width, height } = element;
|
|
|
+ return {
|
|
|
+ x: x + width / 2,
|
|
|
+ y: y + height / 2
|
|
|
+ };
|
|
|
+};
|
|
|
+const transformPointReverseRotate = (x, y, cx, cy, rotate) => {
|
|
|
+ if (rotate !== 0) {
|
|
|
+ let rp = getRotatedPoint(x, y, cx, cy, -rotate);
|
|
|
+ x = rp.x;
|
|
|
+ y = rp.y;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+};
|
|
|
+const transformPointOnElement = (x, y, element) => {
|
|
|
+ let center = getElementCenterPoint(element);
|
|
|
+ return transformPointReverseRotate(x, y, center.x, center.y, element.rotate);
|
|
|
+};
|
|
|
+const getElementCornerPoint = (element, dir) => {
|
|
|
+ let { x, y, width, height } = element;
|
|
|
+ switch (dir) {
|
|
|
+ case "topLeft":
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ case "topRight":
|
|
|
+ return {
|
|
|
+ x: x + width,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ case "bottomRight":
|
|
|
+ return {
|
|
|
+ x: x + width,
|
|
|
+ y: y + height
|
|
|
+ };
|
|
|
+ case "bottomLeft":
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y: y + height
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+const getElementRotatedCornerPoint = (element, dir) => {
|
|
|
+ let center = getElementCenterPoint(element);
|
|
|
+ let dirPos = getElementCornerPoint(element, dir);
|
|
|
+ return getRotatedPoint(dirPos.x, dirPos.y, center.x, center.y, element.rotate);
|
|
|
+};
|
|
|
+const checkPointIsInRectangle = (x, y, rx, ry, rw, rh) => {
|
|
|
+ if (typeof rx === "object") {
|
|
|
+ let element = rx;
|
|
|
+ rx = element.x;
|
|
|
+ ry = element.y;
|
|
|
+ rw = element.width;
|
|
|
+ rh = element.height;
|
|
|
+ }
|
|
|
+ return x >= rx && x <= rx + rw && y >= ry && y <= ry + rh;
|
|
|
+};
|
|
|
+const getBoundingRect = (pointArr = [], returnCorners = false) => {
|
|
|
+ let minX = Infinity;
|
|
|
+ let maxX = -Infinity;
|
|
|
+ let minY = Infinity;
|
|
|
+ let maxY = -Infinity;
|
|
|
+ pointArr.forEach((point) => {
|
|
|
+ let [x2, y2] = point;
|
|
|
+ if (x2 < minX) {
|
|
|
+ minX = x2;
|
|
|
+ }
|
|
|
+ if (x2 > maxX) {
|
|
|
+ maxX = x2;
|
|
|
+ }
|
|
|
+ if (y2 < minY) {
|
|
|
+ minY = y2;
|
|
|
+ }
|
|
|
+ if (y2 > maxY) {
|
|
|
+ maxY = y2;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let x = minX;
|
|
|
+ let y = minY;
|
|
|
+ let width = maxX - minX;
|
|
|
+ let height = maxY - minY;
|
|
|
+ if (returnCorners) {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: x + width,
|
|
|
+ y
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: x + width,
|
|
|
+ y: y + height
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x,
|
|
|
+ y: y + height
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ width,
|
|
|
+ height
|
|
|
+ };
|
|
|
+};
|
|
|
+const deepCopy = (obj) => {
|
|
|
+ return JSON.parse(JSON.stringify(obj));
|
|
|
+};
|
|
|
+const getFontString = (fontSize, fontFamily) => {
|
|
|
+ return `${fontSize}px ${fontFamily}`;
|
|
|
+};
|
|
|
+const splitTextLines = (text) => {
|
|
|
+ return text.replace(/\r\n?/g, "\n").split("\n");
|
|
|
+};
|
|
|
+let textCheckEl = null;
|
|
|
+const getTextActWidth = (text, style) => {
|
|
|
+ if (!textCheckEl) {
|
|
|
+ textCheckEl = document.createElement("div");
|
|
|
+ textCheckEl.style.position = "fixed";
|
|
|
+ textCheckEl.style.left = "-99999px";
|
|
|
+ document.body.appendChild(textCheckEl);
|
|
|
+ }
|
|
|
+ let { fontSize, fontFamily } = style;
|
|
|
+ textCheckEl.innerText = text;
|
|
|
+ textCheckEl.style.fontSize = fontSize + "px";
|
|
|
+ textCheckEl.style.fontFamily = fontFamily;
|
|
|
+ let { width } = textCheckEl.getBoundingClientRect();
|
|
|
+ return width;
|
|
|
+};
|
|
|
+const getMaxFontSizeInWidth = (text, width, style) => {
|
|
|
+ let fontSize = 12;
|
|
|
+ while (getTextActWidth(text, __spreadProps(__spreadValues({}, style), {
|
|
|
+ fontSize: fontSize + 1
|
|
|
+ })) < width) {
|
|
|
+ fontSize++;
|
|
|
+ }
|
|
|
+ return fontSize;
|
|
|
+};
|
|
|
+const getWrapTextActWidth = (element) => {
|
|
|
+ let { text } = element;
|
|
|
+ let textArr = splitTextLines(text);
|
|
|
+ let maxWidth = -Infinity;
|
|
|
+ textArr.forEach((textRow) => {
|
|
|
+ let width = getTextActWidth(textRow, element.style);
|
|
|
+ if (width > maxWidth) {
|
|
|
+ maxWidth = width;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return maxWidth;
|
|
|
+};
|
|
|
+const getWrapTextMaxRowTextNumber = (text) => {
|
|
|
+ let textArr = splitTextLines(text);
|
|
|
+ let maxNumber = -Infinity;
|
|
|
+ textArr.forEach((textRow) => {
|
|
|
+ if (textRow.length > maxNumber) {
|
|
|
+ maxNumber = textRow.length;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return maxNumber;
|
|
|
+};
|
|
|
+const getTextElementSize = (element) => {
|
|
|
+ let { text, style } = element;
|
|
|
+ let width = getWrapTextActWidth(element);
|
|
|
+ const lines = Math.max(splitTextLines(text).length, 1);
|
|
|
+ let lineHeight = style.fontSize * style.lineHeightRatio;
|
|
|
+ let height = lines * lineHeight;
|
|
|
+ return {
|
|
|
+ width,
|
|
|
+ height
|
|
|
+ };
|
|
|
+};
|
|
|
+const throttle = (fn, ctx, time = 100) => {
|
|
|
+ let timer = null;
|
|
|
+ return (...args) => {
|
|
|
+ if (timer) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ fn.call(ctx, ...args);
|
|
|
+ timer = null;
|
|
|
+ }, time);
|
|
|
+ };
|
|
|
+};
|
|
|
+const computedLineWidthBySpeed = (speed, lastLineWidth, baseLineWidth = 2) => {
|
|
|
+ let lineWidth = 0;
|
|
|
+ let maxLineWidth = baseLineWidth;
|
|
|
+ let maxSpeed = 10;
|
|
|
+ let minSpeed = 0.5;
|
|
|
+ if (speed >= maxSpeed) {
|
|
|
+ lineWidth = baseLineWidth;
|
|
|
+ } else if (speed <= minSpeed) {
|
|
|
+ lineWidth = maxLineWidth + 1;
|
|
|
+ } else {
|
|
|
+ lineWidth = maxLineWidth - (speed - minSpeed) / (maxSpeed - minSpeed) * maxLineWidth;
|
|
|
+ }
|
|
|
+ if (lastLineWidth === -1) {
|
|
|
+ lastLineWidth = maxLineWidth;
|
|
|
+ }
|
|
|
+ return lineWidth * (1 / 2) + lastLineWidth * (1 / 2);
|
|
|
+};
|
|
|
+const downloadFile = (file, fileName) => {
|
|
|
+ let a = document.createElement("a");
|
|
|
+ a.href = file;
|
|
|
+ a.download = fileName;
|
|
|
+ a.click();
|
|
|
+};
|
|
|
+const getElementCorners = (element) => {
|
|
|
+ let topLeft = getElementRotatedCornerPoint(element, "topLeft");
|
|
|
+ let topRight = getElementRotatedCornerPoint(element, "topRight");
|
|
|
+ let bottomLeft = getElementRotatedCornerPoint(element, "bottomLeft");
|
|
|
+ let bottomRight = getElementRotatedCornerPoint(element, "bottomRight");
|
|
|
+ return [topLeft, topRight, bottomLeft, bottomRight];
|
|
|
+};
|
|
|
+const getMultiElementRectInfo = (elementList = []) => {
|
|
|
+ if (elementList.length <= 0) {
|
|
|
+ return {
|
|
|
+ minx: 0,
|
|
|
+ maxx: 0,
|
|
|
+ miny: 0,
|
|
|
+ maxy: 0
|
|
|
+ };
|
|
|
+ }
|
|
|
+ let minx = Infinity;
|
|
|
+ let maxx = -Infinity;
|
|
|
+ let miny = Infinity;
|
|
|
+ let maxy = -Infinity;
|
|
|
+ elementList.forEach((element) => {
|
|
|
+ let pointList = element.getEndpointList();
|
|
|
+ pointList.forEach(({ x, y }) => {
|
|
|
+ if (x < minx) {
|
|
|
+ minx = x;
|
|
|
+ }
|
|
|
+ if (x > maxx) {
|
|
|
+ maxx = x;
|
|
|
+ }
|
|
|
+ if (y < miny) {
|
|
|
+ miny = y;
|
|
|
+ }
|
|
|
+ if (y > maxy) {
|
|
|
+ maxy = y;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ minx,
|
|
|
+ maxx,
|
|
|
+ miny,
|
|
|
+ maxy
|
|
|
+ };
|
|
|
+};
|
|
|
+const createImageObj = (url) => {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let img = new Image();
|
|
|
+ img.setAttribute("crossOrigin", "anonymous");
|
|
|
+ img.onload = () => {
|
|
|
+ resolve(img);
|
|
|
+ };
|
|
|
+ img.onerror = () => {
|
|
|
+ resolve(null);
|
|
|
+ };
|
|
|
+ img.src = url;
|
|
|
+ });
|
|
|
+};
|
|
|
+let nodeKeyIndex = 0;
|
|
|
+const createNodeKey = () => {
|
|
|
+ return nodeKeyIndex++;
|
|
|
+};
|
|
|
+var utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
+ __proto__: null,
|
|
|
+ createCanvas,
|
|
|
+ getTowPointDistance,
|
|
|
+ getPointToLineDistance,
|
|
|
+ checkIsAtSegment,
|
|
|
+ radToDeg,
|
|
|
+ degToRad,
|
|
|
+ getTowPointRotate,
|
|
|
+ getRotatedPoint,
|
|
|
+ getElementCenterPoint,
|
|
|
+ transformPointReverseRotate,
|
|
|
+ transformPointOnElement,
|
|
|
+ getElementCornerPoint,
|
|
|
+ getElementRotatedCornerPoint,
|
|
|
+ checkPointIsInRectangle,
|
|
|
+ getBoundingRect,
|
|
|
+ deepCopy,
|
|
|
+ getFontString,
|
|
|
+ splitTextLines,
|
|
|
+ getTextActWidth,
|
|
|
+ getMaxFontSizeInWidth,
|
|
|
+ getWrapTextActWidth,
|
|
|
+ getWrapTextMaxRowTextNumber,
|
|
|
+ getTextElementSize,
|
|
|
+ throttle,
|
|
|
+ computedLineWidthBySpeed,
|
|
|
+ downloadFile,
|
|
|
+ getElementCorners,
|
|
|
+ getMultiElementRectInfo,
|
|
|
+ createImageObj,
|
|
|
+ createNodeKey
|
|
|
+}, Symbol.toStringTag, { value: "Module" }));
|
|
|
+const CORNERS = {
|
|
|
+ TOP_LEFT: "topLeft",
|
|
|
+ TOP_RIGHT: "topRight",
|
|
|
+ BOTTOM_RIGHT: "bottomRight",
|
|
|
+ BOTTOM_LEFT: "bottomLeft"
|
|
|
+};
|
|
|
+const DRAG_ELEMENT_PARTS = {
|
|
|
+ BODY: "body",
|
|
|
+ ROTATE: "rotate",
|
|
|
+ TOP_LEFT_BTN: "topLeftBtn",
|
|
|
+ TOP_RIGHT_BTN: "topRightBtn",
|
|
|
+ BOTTOM_RIGHT_BTN: "bottomRightBtn",
|
|
|
+ BOTTOM_LEFT_BTN: "bottomLeftBtn"
|
|
|
+};
|
|
|
+const HIT_DISTANCE = 10;
|
|
|
+const checkIsAtMultiSegment = (segments, rp) => {
|
|
|
+ let res = false;
|
|
|
+ segments.forEach((seg) => {
|
|
|
+ if (res)
|
|
|
+ return;
|
|
|
+ if (checkIsAtSegment(rp.x, rp.y, ...seg, HIT_DISTANCE)) {
|
|
|
+ res = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return res;
|
|
|
+};
|
|
|
+const checkIsAtRectangleEdge = (element, rp) => {
|
|
|
+ let { x, y, width, height } = element;
|
|
|
+ let segments = [
|
|
|
+ [x, y, x + width, y],
|
|
|
+ [x + width, y, x + width, y + height],
|
|
|
+ [x + width, y + height, x, y + height],
|
|
|
+ [x, y + height, x, y]
|
|
|
+ ];
|
|
|
+ return checkIsAtMultiSegment(segments, rp) ? element : null;
|
|
|
+};
|
|
|
+const checkIsAtRectangleInner = (element, rp) => {
|
|
|
+ return checkPointIsInRectangle(rp.x, rp.y, element) ? element : null;
|
|
|
+};
|
|
|
+const getCircleRadius = (width, height) => {
|
|
|
+ return Math.min(Math.abs(width), Math.abs(height)) / 2;
|
|
|
+};
|
|
|
+const checkIsAtCircleEdge = (element, rp) => {
|
|
|
+ let { width, height, x, y } = element;
|
|
|
+ let radius = getCircleRadius(width, height);
|
|
|
+ let dis = getTowPointDistance(rp.x, rp.y, x + radius, y + radius);
|
|
|
+ let onCircle = dis >= radius - HIT_DISTANCE && dis <= radius + HIT_DISTANCE;
|
|
|
+ return onCircle ? element : null;
|
|
|
+};
|
|
|
+const checkIsAtLineEdge = (element, rp) => {
|
|
|
+ let segments = [];
|
|
|
+ let len = element.pointArr.length;
|
|
|
+ let arr = element.pointArr;
|
|
|
+ for (let i = 0; i < len - 1; i++) {
|
|
|
+ segments.push([...arr[i], ...arr[i + 1]]);
|
|
|
+ }
|
|
|
+ return checkIsAtMultiSegment(segments, rp) ? element : null;
|
|
|
+};
|
|
|
+const checkIsAtFreedrawLineEdge = (element, rp) => {
|
|
|
+ let res = null;
|
|
|
+ element.pointArr.forEach((point) => {
|
|
|
+ if (res)
|
|
|
+ return;
|
|
|
+ let dis = getTowPointDistance(rp.x, rp.y, point[0], point[1]);
|
|
|
+ if (dis <= HIT_DISTANCE) {
|
|
|
+ res = element;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return res;
|
|
|
+};
|
|
|
+const checkIsAtDiamondEdge = (element, rp) => {
|
|
|
+ let { x, y, width, height } = element;
|
|
|
+ let segments = [
|
|
|
+ [x + width / 2, y, x + width, y + height / 2],
|
|
|
+ [x + width, y + height / 2, x + width / 2, y + height],
|
|
|
+ [x + width / 2, y + height, x, y + height / 2],
|
|
|
+ [x, y + height / 2, x + width / 2, y]
|
|
|
+ ];
|
|
|
+ return checkIsAtMultiSegment(segments, rp) ? element : null;
|
|
|
+};
|
|
|
+const checkIsAtTriangleEdge = (element, rp) => {
|
|
|
+ let { x, y, width, height } = element;
|
|
|
+ let segments = [
|
|
|
+ [x + width / 2, y, x + width, y + height],
|
|
|
+ [x + width, y + height, x, y + height],
|
|
|
+ [x, y + height, x + width / 2, y]
|
|
|
+ ];
|
|
|
+ return checkIsAtMultiSegment(segments, rp) ? element : null;
|
|
|
+};
|
|
|
+const checkIsAtArrowEdge = (element, rp) => {
|
|
|
+ let pointArr = element.pointArr;
|
|
|
+ let x = pointArr[0][0];
|
|
|
+ let y = pointArr[0][1];
|
|
|
+ let tx = pointArr[pointArr.length - 1][0];
|
|
|
+ let ty = pointArr[pointArr.length - 1][1];
|
|
|
+ let segments = [[x, y, tx, ty]];
|
|
|
+ return checkIsAtMultiSegment(segments, rp) ? element : null;
|
|
|
+};
|
|
|
+var checkHit = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
+ __proto__: null,
|
|
|
+ checkIsAtMultiSegment,
|
|
|
+ checkIsAtRectangleEdge,
|
|
|
+ checkIsAtRectangleInner,
|
|
|
+ getCircleRadius,
|
|
|
+ checkIsAtCircleEdge,
|
|
|
+ checkIsAtLineEdge,
|
|
|
+ checkIsAtFreedrawLineEdge,
|
|
|
+ checkIsAtDiamondEdge,
|
|
|
+ checkIsAtTriangleEdge,
|
|
|
+ checkIsAtArrowEdge
|
|
|
+}, Symbol.toStringTag, { value: "Module" }));
|
|
|
+const drawWrap = (ctx, fn, fill = false) => {
|
|
|
+ ctx.beginPath();
|
|
|
+ fn();
|
|
|
+ ctx.stroke();
|
|
|
+ if (fill) {
|
|
|
+ ctx.fill();
|
|
|
+ }
|
|
|
+};
|
|
|
+const drawRect = (ctx, x, y, width, height, fill = false) => {
|
|
|
+ drawWrap(ctx, () => {
|
|
|
+ ctx.rect(x, y, width, height);
|
|
|
+ if (fill) {
|
|
|
+ ctx.fillRect(x, y, width, height);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const drawDiamond = (ctx, x, y, width, height, fill = false) => {
|
|
|
+ drawWrap(
|
|
|
+ ctx,
|
|
|
+ () => {
|
|
|
+ ctx.moveTo(x + width / 2, y);
|
|
|
+ ctx.lineTo(x + width, y + height / 2);
|
|
|
+ ctx.lineTo(x + width / 2, y + height);
|
|
|
+ ctx.lineTo(x, y + height / 2);
|
|
|
+ ctx.closePath();
|
|
|
+ },
|
|
|
+ fill
|
|
|
+ );
|
|
|
+};
|
|
|
+const drawTriangle = (ctx, x, y, width, height, fill = false) => {
|
|
|
+ drawWrap(
|
|
|
+ ctx,
|
|
|
+ () => {
|
|
|
+ ctx.moveTo(x + width / 2, y);
|
|
|
+ ctx.lineTo(x + width, y + height);
|
|
|
+ ctx.lineTo(x, y + height);
|
|
|
+ ctx.closePath();
|
|
|
+ },
|
|
|
+ fill
|
|
|
+ );
|
|
|
+};
|
|
|
+const drawCircle = (ctx, x, y, r, fill = false) => {
|
|
|
+ drawWrap(
|
|
|
+ ctx,
|
|
|
+ () => {
|
|
|
+ ctx.arc(x, y, r, 0, 2 * Math.PI);
|
|
|
+ },
|
|
|
+ fill
|
|
|
+ );
|
|
|
+};
|
|
|
+const drawLine = (ctx, points) => {
|
|
|
+ drawWrap(ctx, () => {
|
|
|
+ let first = true;
|
|
|
+ points.forEach((point) => {
|
|
|
+ if (first) {
|
|
|
+ first = false;
|
|
|
+ ctx.moveTo(point[0], point[1]);
|
|
|
+ } else {
|
|
|
+ ctx.lineTo(point[0], point[1]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+const drawArrow = (ctx, pointArr) => {
|
|
|
+ let x = pointArr[0][0];
|
|
|
+ let y = pointArr[0][1];
|
|
|
+ let tx = pointArr[pointArr.length - 1][0];
|
|
|
+ let ty = pointArr[pointArr.length - 1][1];
|
|
|
+ drawWrap(
|
|
|
+ ctx,
|
|
|
+ () => {
|
|
|
+ ctx.moveTo(x, y);
|
|
|
+ ctx.lineTo(tx, ty);
|
|
|
+ },
|
|
|
+ true
|
|
|
+ );
|
|
|
+ let l = 30;
|
|
|
+ let deg = 30;
|
|
|
+ let lineDeg = radToDeg(Math.atan2(ty - y, tx - x));
|
|
|
+ drawWrap(
|
|
|
+ ctx,
|
|
|
+ () => {
|
|
|
+ let plusDeg = deg - lineDeg;
|
|
|
+ let _x = tx - l * Math.cos(degToRad(plusDeg));
|
|
|
+ let _y = ty + l * Math.sin(degToRad(plusDeg));
|
|
|
+ ctx.moveTo(_x, _y);
|
|
|
+ ctx.lineTo(tx, ty);
|
|
|
+ },
|
|
|
+ true
|
|
|
+ );
|
|
|
+ drawWrap(ctx, () => {
|
|
|
+ let plusDeg = 90 - lineDeg - deg;
|
|
|
+ let _x = tx - l * Math.sin(degToRad(plusDeg));
|
|
|
+ let _y = ty - l * Math.cos(degToRad(plusDeg));
|
|
|
+ ctx.moveTo(_x, _y);
|
|
|
+ ctx.lineTo(tx, ty);
|
|
|
+ });
|
|
|
+};
|
|
|
+const transformFreeLinePoint = (point, opt) => {
|
|
|
+ let { x, y } = opt.app.coordinate.transform(point[0], point[1]);
|
|
|
+ return [x - opt.cx, y - opt.cy, ...point.slice(2)];
|
|
|
+};
|
|
|
+const drawFreeLine = (ctx, points, opt) => {
|
|
|
+ for (let i = 0; i < points.length - 1; i++) {
|
|
|
+ drawWrap(
|
|
|
+ ctx,
|
|
|
+ () => {
|
|
|
+ let point = transformFreeLinePoint(points[i], opt);
|
|
|
+ let nextPoint = transformFreeLinePoint(points[i + 1], opt);
|
|
|
+ drawLineSegment(
|
|
|
+ ctx,
|
|
|
+ point[0],
|
|
|
+ point[1],
|
|
|
+ nextPoint[0],
|
|
|
+ nextPoint[1],
|
|
|
+ nextPoint[2]
|
|
|
+ );
|
|
|
+ },
|
|
|
+ true
|
|
|
+ );
|
|
|
+ }
|
|
|
+};
|
|
|
+const drawLineSegment = (ctx, mx, my, tx, ty, lineWidth = 0) => {
|
|
|
+ drawWrap(ctx, () => {
|
|
|
+ if (lineWidth > 0) {
|
|
|
+ ctx.lineWidth = lineWidth;
|
|
|
+ }
|
|
|
+ ctx.moveTo(mx, my);
|
|
|
+ ctx.lineTo(tx, ty);
|
|
|
+ ctx.lineCap = "round";
|
|
|
+ ctx.lineJoin = "round";
|
|
|
+ });
|
|
|
+};
|
|
|
+const drawText = (ctx, textObj, x, y, width, height) => {
|
|
|
+ let { text, style } = textObj;
|
|
|
+ let lineHeight = style.fontSize * style.lineHeightRatio;
|
|
|
+ drawWrap(ctx, () => {
|
|
|
+ ctx.font = getFontString(style.fontSize, style.fontFamily);
|
|
|
+ ctx.textBaseline = "middle";
|
|
|
+ let textArr = splitTextLines(text);
|
|
|
+ textArr.forEach((textRow, index) => {
|
|
|
+ ctx.fillText(textRow, x, y + (index * lineHeight + lineHeight / 2));
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+const drawImage = (ctx, element, x, y, width, height) => {
|
|
|
+ drawWrap(ctx, () => {
|
|
|
+ let ratio = width / height;
|
|
|
+ let showWidth = 0;
|
|
|
+ let showHeight = 0;
|
|
|
+ if (ratio > element.ratio) {
|
|
|
+ showHeight = height;
|
|
|
+ showWidth = element.ratio * height;
|
|
|
+ } else {
|
|
|
+ showWidth = width;
|
|
|
+ showHeight = width / element.ratio;
|
|
|
+ }
|
|
|
+ ctx.drawImage(element.imageObj, x, y, showWidth, showHeight);
|
|
|
+ });
|
|
|
+};
|
|
|
+var draw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
|
+ __proto__: null,
|
|
|
+ drawWrap,
|
|
|
+ drawRect,
|
|
|
+ drawDiamond,
|
|
|
+ drawTriangle,
|
|
|
+ drawCircle,
|
|
|
+ drawLine,
|
|
|
+ drawArrow,
|
|
|
+ drawFreeLine,
|
|
|
+ drawLineSegment,
|
|
|
+ drawText,
|
|
|
+ drawImage
|
|
|
+}, Symbol.toStringTag, { value: "Module" }));
|
|
|
+class Coordinate {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ }
|
|
|
+ addScrollY(y) {
|
|
|
+ return y + this.app.state.scrollY;
|
|
|
+ }
|
|
|
+ addScrollX(x) {
|
|
|
+ return x + this.app.state.scrollX;
|
|
|
+ }
|
|
|
+ subScrollY(y) {
|
|
|
+ return y - this.app.state.scrollY;
|
|
|
+ }
|
|
|
+ subScrollX(x) {
|
|
|
+ return x - this.app.state.scrollX;
|
|
|
+ }
|
|
|
+ transformToCanvasCoordinate(x, y) {
|
|
|
+ x -= this.app.width / 2;
|
|
|
+ y -= this.app.height / 2;
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ transformToScreenCoordinate(x, y) {
|
|
|
+ x += this.app.width / 2;
|
|
|
+ y += this.app.height / 2;
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ transform(x, y) {
|
|
|
+ let t = this.transformToCanvasCoordinate(x, y);
|
|
|
+ return {
|
|
|
+ x: this.subScrollX(t.x),
|
|
|
+ y: this.subScrollY(t.y)
|
|
|
+ };
|
|
|
+ }
|
|
|
+ windowToContainer(x, y) {
|
|
|
+ return {
|
|
|
+ x: x - this.app.left,
|
|
|
+ y: y - this.app.top
|
|
|
+ };
|
|
|
+ }
|
|
|
+ containerToWindow(x, y) {
|
|
|
+ return {
|
|
|
+ x: x + this.app.left,
|
|
|
+ y: y + this.app.top
|
|
|
+ };
|
|
|
+ }
|
|
|
+ scale(x, y) {
|
|
|
+ let { state } = this.app;
|
|
|
+ let wp = this.transformToCanvasCoordinate(x, y);
|
|
|
+ let sp = this.transformToScreenCoordinate(
|
|
|
+ wp.x * state.scale,
|
|
|
+ wp.y * state.scale
|
|
|
+ );
|
|
|
+ return {
|
|
|
+ x: sp.x,
|
|
|
+ y: sp.y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ reverseScale(x, y) {
|
|
|
+ let { state } = this.app;
|
|
|
+ let tp = this.transformToCanvasCoordinate(x, y);
|
|
|
+ let sp = this.transformToScreenCoordinate(
|
|
|
+ tp.x / state.scale,
|
|
|
+ tp.y / state.scale
|
|
|
+ );
|
|
|
+ return {
|
|
|
+ x: sp.x,
|
|
|
+ y: sp.y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ gridAdsorbent(x, y) {
|
|
|
+ let { gridConfig, showGrid } = this.app.state;
|
|
|
+ if (!showGrid) {
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ let gridSize = gridConfig.size;
|
|
|
+ return {
|
|
|
+ x: x - x % gridSize,
|
|
|
+ y: y - y % gridSize
|
|
|
+ };
|
|
|
+ }
|
|
|
+}
|
|
|
+class Event extends EventEmitter {
|
|
|
+ constructor(app) {
|
|
|
+ super();
|
|
|
+ this.app = app;
|
|
|
+ this.coordinate = app.coordinate;
|
|
|
+ this.isMousedown = false;
|
|
|
+ this.mousedownPos = {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ unGridClientX: 0,
|
|
|
+ unGridClientY: 0,
|
|
|
+ originClientX: 0,
|
|
|
+ originClientY: 0
|
|
|
+ };
|
|
|
+ this.mouseOffset = {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ originX: 0,
|
|
|
+ originY: 0
|
|
|
+ };
|
|
|
+ this.lastMousePos = {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ };
|
|
|
+ this.mouseDistance = 0;
|
|
|
+ this.lastMouseTime = Date.now();
|
|
|
+ this.mouseDuration = 0;
|
|
|
+ this.mouseSpeed = 0;
|
|
|
+ this.onMousedown = this.onMousedown.bind(this);
|
|
|
+ this.onMousemove = this.onMousemove.bind(this);
|
|
|
+ this.onMouseup = this.onMouseup.bind(this);
|
|
|
+ this.onDblclick = this.onDblclick.bind(this);
|
|
|
+ this.onMousewheel = this.onMousewheel.bind(this);
|
|
|
+ this.onKeydown = this.onKeydown.bind(this);
|
|
|
+ this.onKeyup = this.onKeyup.bind(this);
|
|
|
+ this.onContextmenu = this.onContextmenu.bind(this);
|
|
|
+ this.bindEvent();
|
|
|
+ }
|
|
|
+ bindEvent() {
|
|
|
+ this.app.container.addEventListener("mousedown", this.onMousedown);
|
|
|
+ this.app.container.addEventListener("mousemove", this.onMousemove);
|
|
|
+ this.app.container.addEventListener("mouseup", this.onMouseup);
|
|
|
+ this.app.container.addEventListener("dblclick", this.onDblclick);
|
|
|
+ this.app.container.addEventListener("mousewheel", this.onMousewheel);
|
|
|
+ this.app.container.addEventListener("contextmenu", this.onContextmenu);
|
|
|
+ window.addEventListener("keydown", this.onKeydown);
|
|
|
+ window.addEventListener("keyup", this.onKeyup);
|
|
|
+ }
|
|
|
+ unbindEvent() {
|
|
|
+ this.app.container.removeEventListener("mousedown", this.onMousedown);
|
|
|
+ this.app.container.removeEventListener("mousemove", this.onMousemove);
|
|
|
+ this.app.container.removeEventListener("mouseup", this.onMouseup);
|
|
|
+ this.app.container.removeEventListener("dblclick", this.onDblclick);
|
|
|
+ this.app.container.removeEventListener("mousewheel", this.onMousewheel);
|
|
|
+ this.app.container.removeEventListener("contextmenu", this.onContextmenu);
|
|
|
+ window.removeEventListener("keydown", this.onKeydown);
|
|
|
+ window.removeEventListener("keyup", this.onKeyup);
|
|
|
+ }
|
|
|
+ transformEvent(e) {
|
|
|
+ let { coordinate } = this.app;
|
|
|
+ let wp = coordinate.windowToContainer(e.clientX, e.clientY);
|
|
|
+ let { x, y } = coordinate.reverseScale(wp.x, wp.y);
|
|
|
+ x = coordinate.addScrollX(x);
|
|
|
+ y = coordinate.addScrollY(y);
|
|
|
+ let unGridClientX = x;
|
|
|
+ let unGridClientY = y;
|
|
|
+ let gp = coordinate.gridAdsorbent(x, y);
|
|
|
+ let newEvent = {
|
|
|
+ originEvent: e,
|
|
|
+ unGridClientX,
|
|
|
+ unGridClientY,
|
|
|
+ clientX: gp.x,
|
|
|
+ clientY: gp.y
|
|
|
+ };
|
|
|
+ return newEvent;
|
|
|
+ }
|
|
|
+ onMousedown(e) {
|
|
|
+ e = this.transformEvent(e);
|
|
|
+ this.isMousedown = true;
|
|
|
+ this.mousedownPos.x = e.clientX;
|
|
|
+ this.mousedownPos.y = e.clientY;
|
|
|
+ this.mousedownPos.unGridClientX = e.unGridClientX;
|
|
|
+ this.mousedownPos.unGridClientY = e.unGridClientY;
|
|
|
+ this.mousedownPos.originClientX = e.originEvent.clientX;
|
|
|
+ this.mousedownPos.originClientY = e.originEvent.clientY;
|
|
|
+ this.emit("mousedown", e, this);
|
|
|
+ }
|
|
|
+ onMousemove(e) {
|
|
|
+ e = this.transformEvent(e);
|
|
|
+ let x = e.clientX;
|
|
|
+ let y = e.clientY;
|
|
|
+ if (this.isMousedown) {
|
|
|
+ this.mouseOffset.x = x - this.mousedownPos.x;
|
|
|
+ this.mouseOffset.y = y - this.mousedownPos.y;
|
|
|
+ this.mouseOffset.originX = e.originEvent.clientX - this.mousedownPos.originClientX;
|
|
|
+ this.mouseOffset.originY = e.originEvent.clientY - this.mousedownPos.originClientY;
|
|
|
+ }
|
|
|
+ let curTime = Date.now();
|
|
|
+ this.mouseDuration = curTime - this.lastMouseTime;
|
|
|
+ this.mouseDistance = getTowPointDistance(
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ this.lastMousePos.x,
|
|
|
+ this.lastMousePos.y
|
|
|
+ );
|
|
|
+ this.mouseSpeed = this.mouseDistance / this.mouseDuration;
|
|
|
+ this.emit("mousemove", e, this);
|
|
|
+ this.lastMouseTime = curTime;
|
|
|
+ this.lastMousePos.x = x;
|
|
|
+ this.lastMousePos.y = y;
|
|
|
+ }
|
|
|
+ onMouseup(e) {
|
|
|
+ e = this.transformEvent(e);
|
|
|
+ this.isMousedown = false;
|
|
|
+ this.mousedownPos.x = 0;
|
|
|
+ this.mousedownPos.y = 0;
|
|
|
+ this.emit("mouseup", e, this);
|
|
|
+ }
|
|
|
+ onDblclick(e) {
|
|
|
+ e = this.transformEvent(e);
|
|
|
+ this.emit("dblclick", e, this);
|
|
|
+ }
|
|
|
+ onMousewheel(e) {
|
|
|
+ e = this.transformEvent(e);
|
|
|
+ this.emit("mousewheel", e.originEvent.wheelDelta < 0 ? "down" : "up");
|
|
|
+ }
|
|
|
+ onContextmenu(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ e.preventDefault();
|
|
|
+ e = this.transformEvent(e);
|
|
|
+ this.emit("contextmenu", e, this);
|
|
|
+ }
|
|
|
+ onKeydown(e) {
|
|
|
+ this.emit("keydown", e, this);
|
|
|
+ }
|
|
|
+ onKeyup(e) {
|
|
|
+ this.emit("keyup", e, this);
|
|
|
+ }
|
|
|
+}
|
|
|
+class BaseElement extends EventEmitter {
|
|
|
+ constructor(opts = {}, app) {
|
|
|
+ super();
|
|
|
+ this.app = app;
|
|
|
+ this.groupId = opts.groupId || "";
|
|
|
+ this.type = opts.type || "";
|
|
|
+ this.key = createNodeKey();
|
|
|
+ this.isCreating = true;
|
|
|
+ this.isActive = true;
|
|
|
+ this.isSelected = false;
|
|
|
+ this.startX = 0;
|
|
|
+ this.startY = 0;
|
|
|
+ this.x = opts.x || 0;
|
|
|
+ this.y = opts.y || 0;
|
|
|
+ this.width = opts.width || 0;
|
|
|
+ this.height = opts.height || 0;
|
|
|
+ this.startRotate = 0;
|
|
|
+ this.rotate = opts.rotate || 0;
|
|
|
+ this.noRender = false;
|
|
|
+ this.style = __spreadValues({
|
|
|
+ strokeStyle: "",
|
|
|
+ fillStyle: "",
|
|
|
+ lineWidth: "small",
|
|
|
+ lineDash: 0,
|
|
|
+ globalAlpha: 1
|
|
|
+ }, opts.style || {});
|
|
|
+ this.dragElement = null;
|
|
|
+ }
|
|
|
+ serialize() {
|
|
|
+ return {
|
|
|
+ groupId: this.groupId,
|
|
|
+ type: this.type,
|
|
|
+ width: this.width,
|
|
|
+ height: this.height,
|
|
|
+ x: this.x,
|
|
|
+ y: this.y,
|
|
|
+ rotate: this.rotate,
|
|
|
+ style: __spreadValues({}, this.style)
|
|
|
+ };
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ throw new Error("\u5B50\u7C7B\u9700\u8981\u5B9E\u73B0\u8BE5\u65B9\u6CD5\uFF01");
|
|
|
+ }
|
|
|
+ setGroupId(groupId) {
|
|
|
+ this.groupId = groupId;
|
|
|
+ }
|
|
|
+ getGroupId() {
|
|
|
+ return this.groupId;
|
|
|
+ }
|
|
|
+ removeGroupId() {
|
|
|
+ this.groupId = "";
|
|
|
+ }
|
|
|
+ hasGroup() {
|
|
|
+ return !!this.groupId;
|
|
|
+ }
|
|
|
+ renderDragElement() {
|
|
|
+ if (this.isActive && !this.isCreating) {
|
|
|
+ this.dragElement.showAll();
|
|
|
+ this.dragElement.render();
|
|
|
+ } else if (this.isSelected) {
|
|
|
+ this.dragElement.onlyShowBody();
|
|
|
+ this.dragElement.render();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ handleStyle(style) {
|
|
|
+ Object.keys(style).forEach((key) => {
|
|
|
+ if (key === "lineWidth") {
|
|
|
+ if (style[key] === "small") {
|
|
|
+ style[key] = 2;
|
|
|
+ } else if (style[key] === "middle") {
|
|
|
+ style[key] = 4;
|
|
|
+ } else if (style[key] === "large") {
|
|
|
+ style[key] = 6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (style[key] === "") {
|
|
|
+ if (this.app.state[key] !== void 0 && this.app.state[key] !== null && this.app.state[key] !== "") {
|
|
|
+ style[key] = this.app.state[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return style;
|
|
|
+ }
|
|
|
+ setStyle(style = {}) {
|
|
|
+ let _style = this.handleStyle(style);
|
|
|
+ Object.keys(_style).forEach((key) => {
|
|
|
+ if (key === "lineDash") {
|
|
|
+ if (_style.lineDash > 0) {
|
|
|
+ this.app.ctx.setLineDash([_style.lineDash]);
|
|
|
+ }
|
|
|
+ } else if (_style[key] !== void 0 && _style[key] !== "" && _style[key] !== null) {
|
|
|
+ this.app.ctx[key] = _style[key];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ warpRender(renderFn) {
|
|
|
+ let { x, y, width, height, rotate, style } = this;
|
|
|
+ let { x: tx, y: ty } = this.app.coordinate.transform(x, y);
|
|
|
+ let halfWidth = width / 2;
|
|
|
+ let halfHeight = height / 2;
|
|
|
+ let cx = tx + halfWidth;
|
|
|
+ let cy = ty + halfHeight;
|
|
|
+ this.app.ctx.save();
|
|
|
+ this.app.ctx.translate(cx, cy);
|
|
|
+ this.app.ctx.rotate(degToRad(rotate));
|
|
|
+ this.setStyle(style);
|
|
|
+ renderFn({
|
|
|
+ halfWidth,
|
|
|
+ halfHeight,
|
|
|
+ tx,
|
|
|
+ ty,
|
|
|
+ cx,
|
|
|
+ cy
|
|
|
+ });
|
|
|
+ this.app.ctx.restore();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ saveState() {
|
|
|
+ let { rotate, x, y } = this;
|
|
|
+ this.startRotate = rotate;
|
|
|
+ this.startX = x;
|
|
|
+ this.startY = y;
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ move(ox, oy) {
|
|
|
+ let { startX, startY } = this;
|
|
|
+ this.x = startX + ox;
|
|
|
+ this.y = startY + oy;
|
|
|
+ this.emit("elementPositionChange", this.x, this.y);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateRect(x, y, width, height) {
|
|
|
+ this.updatePos(x, y);
|
|
|
+ this.updateSize(width, height);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateSize(width, height) {
|
|
|
+ this.width = width;
|
|
|
+ this.height = height;
|
|
|
+ this.emit("elementSizeChange", this.width, this.height);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updatePos(x, y) {
|
|
|
+ this.x = x;
|
|
|
+ this.y = y;
|
|
|
+ this.emit("elementPositionChange", this.x, this.y);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ offsetRotate(or) {
|
|
|
+ this.updateRotate(this.startRotate + or);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateRotate(rotate) {
|
|
|
+ rotate = rotate % 360;
|
|
|
+ if (rotate < 0) {
|
|
|
+ rotate = 360 + rotate;
|
|
|
+ }
|
|
|
+ this.rotate = parseInt(rotate);
|
|
|
+ this.emit("elementRotateChange", this.rotate);
|
|
|
+ }
|
|
|
+ rotateByCenter(rotate, cx, cy) {
|
|
|
+ this.offsetRotate(rotate);
|
|
|
+ let np = getRotatedPoint(this.startX, this.startY, cx, cy, rotate);
|
|
|
+ this.updatePos(np.x, np.y);
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ throw new Error("\u5B50\u7C7B\u9700\u8981\u5B9E\u73B0\u8BE5\u65B9\u6CD5!");
|
|
|
+ }
|
|
|
+ startResize(resizeType, e) {
|
|
|
+ this.dragElement.startResize(resizeType, e);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ endResize() {
|
|
|
+ this.dragElement.endResize();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ resize(...args) {
|
|
|
+ this.dragElement.handleResizeElement(...args);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ getEndpointList() {
|
|
|
+ return getElementCorners(this);
|
|
|
+ }
|
|
|
+}
|
|
|
+class DragElement extends BaseElement {
|
|
|
+ constructor(element, app, opts = {}) {
|
|
|
+ super(
|
|
|
+ {
|
|
|
+ type: "dragElement",
|
|
|
+ notNeedDragElement: true
|
|
|
+ },
|
|
|
+ app
|
|
|
+ );
|
|
|
+ this.opts = __spreadValues({
|
|
|
+ lockRatio: false
|
|
|
+ }, opts);
|
|
|
+ this.style = {
|
|
|
+ strokeStyle: this.app.state.dragStrokeStyle,
|
|
|
+ fillStyle: "transparent",
|
|
|
+ lineWidth: "small",
|
|
|
+ lineDash: 0,
|
|
|
+ globalAlpha: 1
|
|
|
+ };
|
|
|
+ this.element = element;
|
|
|
+ this.offset = 5;
|
|
|
+ this.size = 10;
|
|
|
+ this.resizeType = "";
|
|
|
+ this.diagonalPoint = {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ };
|
|
|
+ this.mousedownPosAndElementPosOffset = {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ };
|
|
|
+ this.elementRatio = 0;
|
|
|
+ this.hideParts = [];
|
|
|
+ }
|
|
|
+ setHideParts(parts = []) {
|
|
|
+ this.hideParts = parts;
|
|
|
+ }
|
|
|
+ showAll() {
|
|
|
+ this.setHideParts([]);
|
|
|
+ }
|
|
|
+ onlyShowBody() {
|
|
|
+ this.setHideParts([
|
|
|
+ DRAG_ELEMENT_PARTS.ROTATE,
|
|
|
+ DRAG_ELEMENT_PARTS.TOP_LEFT_BTN,
|
|
|
+ DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN,
|
|
|
+ DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN,
|
|
|
+ DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ update() {
|
|
|
+ this.x = this.element.x - this.offset;
|
|
|
+ this.y = this.element.y - this.offset;
|
|
|
+ this.width = this.element.width + this.offset * 2;
|
|
|
+ this.height = this.element.height + this.offset * 2;
|
|
|
+ this.rotate = this.element.rotate;
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ if (this.element.hasGroup())
|
|
|
+ return;
|
|
|
+ this.update();
|
|
|
+ let { width, height } = this;
|
|
|
+ this.warpRender(({ halfWidth, halfHeight }) => {
|
|
|
+ this.app.ctx.save();
|
|
|
+ if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.BODY)) {
|
|
|
+ this.app.ctx.setLineDash([5]);
|
|
|
+ drawRect(this.app.ctx, -halfWidth, -halfHeight, width, height);
|
|
|
+ this.app.ctx.restore();
|
|
|
+ }
|
|
|
+ if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.TOP_LEFT_BTN)) {
|
|
|
+ drawRect(
|
|
|
+ this.app.ctx,
|
|
|
+ -halfWidth - this.size,
|
|
|
+ -halfHeight - this.size,
|
|
|
+ this.size,
|
|
|
+ this.size
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN)) {
|
|
|
+ drawRect(
|
|
|
+ this.app.ctx,
|
|
|
+ -halfWidth + this.element.width + this.size,
|
|
|
+ -halfHeight - this.size,
|
|
|
+ this.size,
|
|
|
+ this.size
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN)) {
|
|
|
+ drawRect(
|
|
|
+ this.app.ctx,
|
|
|
+ -halfWidth + this.element.width + this.size,
|
|
|
+ -halfHeight + this.element.height + this.size,
|
|
|
+ this.size,
|
|
|
+ this.size
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN)) {
|
|
|
+ drawRect(
|
|
|
+ this.app.ctx,
|
|
|
+ -halfWidth - this.size,
|
|
|
+ -halfHeight + this.element.height + this.size,
|
|
|
+ this.size,
|
|
|
+ this.size
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (!this.hideParts.includes(DRAG_ELEMENT_PARTS.ROTATE)) {
|
|
|
+ drawCircle(
|
|
|
+ this.app.ctx,
|
|
|
+ -halfWidth + this.element.width / 2 + this.size / 2,
|
|
|
+ -halfHeight - this.size * 2,
|
|
|
+ this.size
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ checkPointInDragElementWhere(x, y) {
|
|
|
+ let part = "";
|
|
|
+ let rp = transformPointOnElement(x, y, this.element);
|
|
|
+ if (checkPointIsInRectangle(rp.x, rp.y, this)) {
|
|
|
+ part = DRAG_ELEMENT_PARTS.BODY;
|
|
|
+ } else if (getTowPointDistance(
|
|
|
+ rp.x,
|
|
|
+ rp.y,
|
|
|
+ this.x + this.width / 2,
|
|
|
+ this.y - this.size * 2
|
|
|
+ ) <= this.size) {
|
|
|
+ part = DRAG_ELEMENT_PARTS.ROTATE;
|
|
|
+ } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.TOP_LEFT)) {
|
|
|
+ part = DRAG_ELEMENT_PARTS.TOP_LEFT_BTN;
|
|
|
+ } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.TOP_RIGHT)) {
|
|
|
+ part = DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN;
|
|
|
+ } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.BOTTOM_RIGHT)) {
|
|
|
+ part = DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN;
|
|
|
+ } else if (this._checkPointIsInBtn(rp.x, rp.y, CORNERS.BOTTOM_LEFT)) {
|
|
|
+ part = DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN;
|
|
|
+ }
|
|
|
+ if (this.hideParts.includes(part)) {
|
|
|
+ part = "";
|
|
|
+ }
|
|
|
+ return part;
|
|
|
+ }
|
|
|
+ _checkPointIsInBtn(x, y, dir) {
|
|
|
+ let _x = 0;
|
|
|
+ let _y = 0;
|
|
|
+ switch (dir) {
|
|
|
+ case CORNERS.TOP_LEFT:
|
|
|
+ _x = this.x - this.size;
|
|
|
+ _y = this.y - this.size;
|
|
|
+ break;
|
|
|
+ case CORNERS.TOP_RIGHT:
|
|
|
+ _x = this.x + this.width;
|
|
|
+ _y = this.y - this.size;
|
|
|
+ break;
|
|
|
+ case CORNERS.BOTTOM_RIGHT:
|
|
|
+ _x = this.x + this.width;
|
|
|
+ _y = this.y + this.height;
|
|
|
+ break;
|
|
|
+ case CORNERS.BOTTOM_LEFT:
|
|
|
+ _x = this.x - this.size;
|
|
|
+ _y = this.y + this.height;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return checkPointIsInRectangle(x, y, _x, _y, this.size, this.size);
|
|
|
+ }
|
|
|
+ startResize(resizeType, e) {
|
|
|
+ this.resizeType = resizeType;
|
|
|
+ if (this.opts.lockRatio) {
|
|
|
+ this.elementRatio = this.element.width / this.element.height;
|
|
|
+ }
|
|
|
+ if (resizeType === DRAG_ELEMENT_PARTS.BODY) {
|
|
|
+ this.element.saveState();
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.ROTATE) {
|
|
|
+ this.element.saveState();
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_LEFT_BTN) {
|
|
|
+ this.handleDragMousedown(e, CORNERS.TOP_LEFT);
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN) {
|
|
|
+ this.handleDragMousedown(e, CORNERS.TOP_RIGHT);
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN) {
|
|
|
+ this.handleDragMousedown(e, CORNERS.BOTTOM_RIGHT);
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN) {
|
|
|
+ this.handleDragMousedown(e, CORNERS.BOTTOM_LEFT);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ endResize() {
|
|
|
+ this.resizeType = "";
|
|
|
+ this.diagonalPoint = {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ };
|
|
|
+ this.mousedownPosAndElementPosOffset = {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ };
|
|
|
+ this.elementRatio = 0;
|
|
|
+ }
|
|
|
+ handleDragMousedown(e, corner) {
|
|
|
+ let centerPos = getElementCenterPoint(this.element);
|
|
|
+ let pos = getElementRotatedCornerPoint(this.element, corner);
|
|
|
+ this.diagonalPoint.x = 2 * centerPos.x - pos.x;
|
|
|
+ this.diagonalPoint.y = 2 * centerPos.y - pos.y;
|
|
|
+ this.mousedownPosAndElementPosOffset.x = e.clientX - pos.x;
|
|
|
+ this.mousedownPosAndElementPosOffset.y = e.clientY - pos.y;
|
|
|
+ this.element.saveState();
|
|
|
+ }
|
|
|
+ handleResizeElement(e, mx, my, offsetX, offsetY) {
|
|
|
+ let resizeType = this.resizeType;
|
|
|
+ if (resizeType === DRAG_ELEMENT_PARTS.BODY) {
|
|
|
+ this.handleMoveElement(offsetX, offsetY);
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.ROTATE) {
|
|
|
+ this.handleRotateElement(e, mx, my);
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_LEFT_BTN) {
|
|
|
+ this.handleStretchElement(
|
|
|
+ e,
|
|
|
+ (newCenter, rp) => {
|
|
|
+ return {
|
|
|
+ width: (newCenter.x - rp.x) * 2,
|
|
|
+ height: (newCenter.y - rp.y) * 2
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (rp) => {
|
|
|
+ return {
|
|
|
+ x: rp.x,
|
|
|
+ y: rp.y
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (newRatio, newRect) => {
|
|
|
+ let x = newRect.x;
|
|
|
+ let y = newRect.y;
|
|
|
+ if (newRatio > this.elementRatio) {
|
|
|
+ x = newRect.x + newRect.width - this.elementRatio * newRect.height;
|
|
|
+ } else if (newRatio < this.elementRatio) {
|
|
|
+ y = newRect.y + (newRect.height - newRect.width / this.elementRatio);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN) {
|
|
|
+ this.handleStretchElement(
|
|
|
+ e,
|
|
|
+ (newCenter, rp) => {
|
|
|
+ return {
|
|
|
+ width: (rp.x - newCenter.x) * 2,
|
|
|
+ height: (newCenter.y - rp.y) * 2
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (rp, newSize) => {
|
|
|
+ return {
|
|
|
+ x: rp.x - newSize.width,
|
|
|
+ y: rp.y
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (newRatio, newRect) => {
|
|
|
+ let x = newRect.x;
|
|
|
+ let y = newRect.y;
|
|
|
+ if (newRatio > this.elementRatio) {
|
|
|
+ x = newRect.x + this.elementRatio * newRect.height;
|
|
|
+ } else if (newRatio < this.elementRatio) {
|
|
|
+ x = newRect.x + newRect.width;
|
|
|
+ y = newRect.y + (newRect.height - newRect.width / this.elementRatio);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN) {
|
|
|
+ this.handleStretchElement(
|
|
|
+ e,
|
|
|
+ (newCenter, rp) => {
|
|
|
+ return {
|
|
|
+ width: (rp.x - newCenter.x) * 2,
|
|
|
+ height: (rp.y - newCenter.y) * 2
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (rp, newSize) => {
|
|
|
+ return {
|
|
|
+ x: rp.x - newSize.width,
|
|
|
+ y: rp.y - newSize.height
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (newRatio, newRect) => {
|
|
|
+ let x = newRect.x;
|
|
|
+ let y = newRect.y;
|
|
|
+ if (newRatio > this.elementRatio) {
|
|
|
+ x = newRect.x + this.elementRatio * newRect.height;
|
|
|
+ y = newRect.y + newRect.height;
|
|
|
+ } else if (newRatio < this.elementRatio) {
|
|
|
+ x = newRect.x + newRect.width;
|
|
|
+ y = newRect.y + newRect.width / this.elementRatio;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else if (resizeType === DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN) {
|
|
|
+ this.handleStretchElement(
|
|
|
+ e,
|
|
|
+ (newCenter, rp) => {
|
|
|
+ return {
|
|
|
+ width: (newCenter.x - rp.x) * 2,
|
|
|
+ height: (rp.y - newCenter.y) * 2
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (rp, newSize) => {
|
|
|
+ return {
|
|
|
+ x: rp.x,
|
|
|
+ y: rp.y - newSize.height
|
|
|
+ };
|
|
|
+ },
|
|
|
+ (newRatio, newRect) => {
|
|
|
+ let x = newRect.x;
|
|
|
+ let y = newRect.y;
|
|
|
+ if (newRatio > this.elementRatio) {
|
|
|
+ x = newRect.x + newRect.width - this.elementRatio * newRect.height;
|
|
|
+ y = newRect.y + newRect.height;
|
|
|
+ } else if (newRatio < this.elementRatio) {
|
|
|
+ y = newRect.y + newRect.width / this.elementRatio;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ handleMoveElement(offsetX, offsetY) {
|
|
|
+ this.element.move(offsetX, offsetY);
|
|
|
+ }
|
|
|
+ handleRotateElement(e, mx, my) {
|
|
|
+ let centerPos = getElementCenterPoint(this.element);
|
|
|
+ let rotate = getTowPointRotate(
|
|
|
+ centerPos.x,
|
|
|
+ centerPos.y,
|
|
|
+ e.clientX,
|
|
|
+ e.clientY,
|
|
|
+ mx,
|
|
|
+ my
|
|
|
+ );
|
|
|
+ this.element.offsetRotate(rotate);
|
|
|
+ }
|
|
|
+ stretchCalc(x, y, calcSize, calcPos) {
|
|
|
+ let newCenter = {
|
|
|
+ x: (x + this.diagonalPoint.x) / 2,
|
|
|
+ y: (y + this.diagonalPoint.y) / 2
|
|
|
+ };
|
|
|
+ let rp = transformPointReverseRotate(
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ newCenter.x,
|
|
|
+ newCenter.y,
|
|
|
+ this.element.rotate
|
|
|
+ );
|
|
|
+ let newSize = calcSize(newCenter, rp);
|
|
|
+ let isWidthReverse = false;
|
|
|
+ if (newSize.width < 0) {
|
|
|
+ newSize.width = 0;
|
|
|
+ isWidthReverse = true;
|
|
|
+ }
|
|
|
+ let isHeightReverse = false;
|
|
|
+ if (newSize.height < 0) {
|
|
|
+ newSize.height = 0;
|
|
|
+ isHeightReverse = true;
|
|
|
+ }
|
|
|
+ let newPos = calcPos(rp, newSize);
|
|
|
+ let newRect = {
|
|
|
+ x: newPos.x,
|
|
|
+ y: newPos.y,
|
|
|
+ width: newSize.width,
|
|
|
+ height: newSize.height
|
|
|
+ };
|
|
|
+ if (isWidthReverse || isHeightReverse) {
|
|
|
+ newRect.x = this.element.x;
|
|
|
+ newRect.y = this.element.y;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ newRect,
|
|
|
+ newCenter
|
|
|
+ };
|
|
|
+ }
|
|
|
+ handleStretchElement(e, calcSize, calcPos, fixPos) {
|
|
|
+ let actClientX = e.clientX - this.mousedownPosAndElementPosOffset.x;
|
|
|
+ let actClientY = e.clientY - this.mousedownPosAndElementPosOffset.y;
|
|
|
+ let { newRect, newCenter } = this.stretchCalc(
|
|
|
+ actClientX,
|
|
|
+ actClientY,
|
|
|
+ calcSize,
|
|
|
+ calcPos
|
|
|
+ );
|
|
|
+ if (this.opts.lockRatio) {
|
|
|
+ this.fixStretch(newRect, newCenter, calcSize, calcPos, fixPos);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.element.updateRect(newRect.x, newRect.y, newRect.width, newRect.height);
|
|
|
+ }
|
|
|
+ fixStretch(newRect, newCenter, calcSize, calcPos, fixPos) {
|
|
|
+ let newRatio = newRect.width / newRect.height;
|
|
|
+ let fp = fixPos(newRatio, newRect);
|
|
|
+ let rp = getRotatedPoint(
|
|
|
+ fp.x,
|
|
|
+ fp.y,
|
|
|
+ newCenter.x,
|
|
|
+ newCenter.y,
|
|
|
+ this.element.rotate
|
|
|
+ );
|
|
|
+ let fixNewRect = this.stretchCalc(rp.x, rp.y, calcSize, calcPos).newRect;
|
|
|
+ if (fixNewRect.width === 0 && fixNewRect.height === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.element.updateRect(
|
|
|
+ fixNewRect.x,
|
|
|
+ fixNewRect.y,
|
|
|
+ fixNewRect.width,
|
|
|
+ fixNewRect.height
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+class Rectangle extends BaseElement {
|
|
|
+ constructor(...args) {
|
|
|
+ super(...args);
|
|
|
+ this.dragElement = new DragElement(this, this.app);
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { width, height } = this;
|
|
|
+ this.warpRender(({ halfWidth, halfHeight }) => {
|
|
|
+ drawRect(this.app.ctx, -halfWidth, -halfHeight, width, height, true);
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtRectangleEdge(this, rp);
|
|
|
+ }
|
|
|
+}
|
|
|
+class Circle extends BaseElement {
|
|
|
+ constructor(...args) {
|
|
|
+ super(...args);
|
|
|
+ this.dragElement = new DragElement(this, this.app, {
|
|
|
+ lockRatio: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { width, height } = this;
|
|
|
+ this.warpRender(({ halfWidth, halfHeight }) => {
|
|
|
+ drawCircle(this.app.ctx, 0, 0, getCircleRadius(width, height), true);
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtCircleEdge(this, rp);
|
|
|
+ }
|
|
|
+}
|
|
|
+class Diamond extends BaseElement {
|
|
|
+ constructor(...args) {
|
|
|
+ super(...args);
|
|
|
+ this.dragElement = new DragElement(this, this.app);
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { width, height } = this;
|
|
|
+ this.warpRender(({ halfWidth, halfHeight }) => {
|
|
|
+ drawDiamond(this.app.ctx, -halfWidth, -halfHeight, width, height, true);
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtDiamondEdge(this, rp);
|
|
|
+ }
|
|
|
+ getEndpointList() {
|
|
|
+ let { x, y, width, height, rotate } = this;
|
|
|
+ let points = [
|
|
|
+ [x + width / 2, y],
|
|
|
+ [x + width, y + height / 2],
|
|
|
+ [x + width / 2, y + height],
|
|
|
+ [x, y + height / 2]
|
|
|
+ ];
|
|
|
+ let center = getElementCenterPoint(this);
|
|
|
+ return points.map((point) => {
|
|
|
+ return getRotatedPoint(point[0], point[1], center.x, center.y, rotate);
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+class Triangle extends BaseElement {
|
|
|
+ constructor(...args) {
|
|
|
+ super(...args);
|
|
|
+ this.dragElement = new DragElement(this, this.app);
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { width, height } = this;
|
|
|
+ this.warpRender(({ halfWidth, halfHeight }) => {
|
|
|
+ drawTriangle(this.app.ctx, -halfWidth, -halfHeight, width, height, true);
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtTriangleEdge(this, rp);
|
|
|
+ }
|
|
|
+ getEndpointList() {
|
|
|
+ let { x, y, width, height, rotate } = this;
|
|
|
+ let points = [
|
|
|
+ [x + width / 2, y],
|
|
|
+ [x + width, y + height],
|
|
|
+ [x, y + height]
|
|
|
+ ];
|
|
|
+ let center = getElementCenterPoint(this);
|
|
|
+ return points.map((point) => {
|
|
|
+ return getRotatedPoint(point[0], point[1], center.x, center.y, rotate);
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+class BaseMultiPointElement extends BaseElement {
|
|
|
+ constructor(opts = {}, app) {
|
|
|
+ super(opts, app);
|
|
|
+ this.startPointArr = [];
|
|
|
+ this.pointArr = opts.pointArr || [];
|
|
|
+ this.startWidth = 0;
|
|
|
+ this.startHeight = 0;
|
|
|
+ this.fictitiousPoint = {
|
|
|
+ x: 0,
|
|
|
+ y: 0
|
|
|
+ };
|
|
|
+ }
|
|
|
+ serialize() {
|
|
|
+ let base = super.serialize();
|
|
|
+ return __spreadProps(__spreadValues({}, base), {
|
|
|
+ pointArr: [...this.pointArr]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ addPoint(x, y, ...args) {
|
|
|
+ if (!Array.isArray(this.pointArr)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.pointArr.push([x, y, ...args]);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateMultiPointBoundingRect() {
|
|
|
+ let rect = getBoundingRect(this.pointArr);
|
|
|
+ this.x = rect.x;
|
|
|
+ this.y = rect.y;
|
|
|
+ this.width = rect.width;
|
|
|
+ this.height = rect.height;
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateFictitiousPoint(x, y) {
|
|
|
+ this.fictitiousPoint.x = x;
|
|
|
+ this.fictitiousPoint.y = y;
|
|
|
+ }
|
|
|
+ saveState() {
|
|
|
+ let { rotate, x, y, width, height, pointArr } = this;
|
|
|
+ this.startRotate = rotate;
|
|
|
+ this.startX = x;
|
|
|
+ this.startY = y;
|
|
|
+ this.startPointArr = deepCopy(pointArr);
|
|
|
+ this.startWidth = width;
|
|
|
+ this.startHeight = height;
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ move(ox, oy) {
|
|
|
+ this.pointArr = this.startPointArr.map((point) => {
|
|
|
+ return [point[0] + ox, point[1] + oy, ...point.slice(2)];
|
|
|
+ });
|
|
|
+ let { startX, startY } = this;
|
|
|
+ this.x = startX + ox;
|
|
|
+ this.y = startY + oy;
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateRect(x, y, width, height) {
|
|
|
+ let { startWidth, startHeight, startPointArr } = this;
|
|
|
+ let scaleX = width / startWidth;
|
|
|
+ let scaleY = height / startHeight;
|
|
|
+ this.pointArr = startPointArr.map((point) => {
|
|
|
+ let nx = point[0] * scaleX;
|
|
|
+ let ny = point[1] * scaleY;
|
|
|
+ return [nx, ny, ...point.slice(2)];
|
|
|
+ });
|
|
|
+ let rect = getBoundingRect(this.pointArr);
|
|
|
+ let offsetX = rect.x - x;
|
|
|
+ let offsetY = rect.y - y;
|
|
|
+ this.pointArr = this.pointArr.map((point) => {
|
|
|
+ return [point[0] - offsetX, point[1] - offsetY, ...point.slice(2)];
|
|
|
+ });
|
|
|
+ this.updatePos(x, y);
|
|
|
+ this.updateSize(width, height);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ rotateByCenter(rotate, cx, cy) {
|
|
|
+ this.pointArr = this.startPointArr.map((point) => {
|
|
|
+ let np = getRotatedPoint(point[0], point[1], cx, cy, rotate);
|
|
|
+ return [np.x, np.y, ...point.slice(2)];
|
|
|
+ });
|
|
|
+ this.updateMultiPointBoundingRect();
|
|
|
+ }
|
|
|
+ getEndpointList() {
|
|
|
+ return this.pointArr.map((point) => {
|
|
|
+ let center = getElementCenterPoint(this);
|
|
|
+ let np = getRotatedPoint(
|
|
|
+ point[0],
|
|
|
+ point[1],
|
|
|
+ center.x,
|
|
|
+ center.y,
|
|
|
+ this.rotate
|
|
|
+ );
|
|
|
+ return {
|
|
|
+ x: np.x,
|
|
|
+ y: np.y
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+class Freedraw extends BaseMultiPointElement {
|
|
|
+ constructor(...args) {
|
|
|
+ super(...args);
|
|
|
+ this.dragElement = new DragElement(this, this.app);
|
|
|
+ this.lastLineWidth = -1;
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { pointArr } = this;
|
|
|
+ this.warpRender(({ cx, cy }) => {
|
|
|
+ drawFreeLine(this.app.ctx, pointArr, {
|
|
|
+ app: this.app,
|
|
|
+ cx,
|
|
|
+ cy
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtFreedrawLineEdge(this, rp);
|
|
|
+ }
|
|
|
+ singleRender(mx, my, tx, ty, lineWidth) {
|
|
|
+ this.app.ctx.save();
|
|
|
+ this.setStyle(this.style);
|
|
|
+ drawLineSegment(this.app.ctx, mx, my, tx, ty, lineWidth);
|
|
|
+ this.app.ctx.restore();
|
|
|
+ }
|
|
|
+}
|
|
|
+class Arrow extends BaseMultiPointElement {
|
|
|
+ constructor(...args) {
|
|
|
+ super(...args);
|
|
|
+ this.dragElement = new DragElement(this, this.app);
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { pointArr, fictitiousPoint } = this;
|
|
|
+ this.warpRender(({ cx, cy }) => {
|
|
|
+ let realtimePoint = [];
|
|
|
+ if (pointArr.length > 0 && this.isCreating) {
|
|
|
+ let { x: fx, y: fy } = this.app.coordinate.transform(
|
|
|
+ fictitiousPoint.x - cx,
|
|
|
+ fictitiousPoint.y - cy
|
|
|
+ );
|
|
|
+ realtimePoint = [[fx, fy]];
|
|
|
+ }
|
|
|
+ drawArrow(
|
|
|
+ this.app.ctx,
|
|
|
+ pointArr.map((point) => {
|
|
|
+ let { x, y } = this.app.coordinate.transform(point[0], point[1]);
|
|
|
+ return [x - cx, y - cy];
|
|
|
+ }).concat(realtimePoint)
|
|
|
+ );
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtArrowEdge(this, rp);
|
|
|
+ }
|
|
|
+}
|
|
|
+class Image$1 extends BaseElement {
|
|
|
+ constructor(opts = {}, app) {
|
|
|
+ super(opts, app);
|
|
|
+ this.dragElement = new DragElement(this, this.app, {
|
|
|
+ lockRatio: true
|
|
|
+ });
|
|
|
+ this.url = opts.url || "";
|
|
|
+ this.imageObj = opts.imageObj || null;
|
|
|
+ this.ratio = opts.ratio || 1;
|
|
|
+ }
|
|
|
+ serialize() {
|
|
|
+ let base = super.serialize();
|
|
|
+ return __spreadProps(__spreadValues({}, base), {
|
|
|
+ url: this.url,
|
|
|
+ ratio: this.ratio
|
|
|
+ });
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { width, height } = this;
|
|
|
+ this.warpRender(({ halfWidth, halfHeight }) => {
|
|
|
+ drawImage(this.app.ctx, this, -halfWidth, -halfHeight, width, height);
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtRectangleInner(this, rp);
|
|
|
+ }
|
|
|
+}
|
|
|
+class Line extends BaseMultiPointElement {
|
|
|
+ constructor(opts = {}, app) {
|
|
|
+ super(opts, app);
|
|
|
+ this.dragElement = new DragElement(this, this.app);
|
|
|
+ this.isSingle = opts.isSingle;
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { pointArr, fictitiousPoint } = this;
|
|
|
+ this.warpRender(({ cx, cy }) => {
|
|
|
+ let realtimePoint = [];
|
|
|
+ if (pointArr.length > 0 && this.isCreating) {
|
|
|
+ let { x: fx, y: fy } = this.app.coordinate.transform(
|
|
|
+ fictitiousPoint.x - cx,
|
|
|
+ fictitiousPoint.y - cy
|
|
|
+ );
|
|
|
+ realtimePoint = [[fx, fy]];
|
|
|
+ }
|
|
|
+ drawLine(
|
|
|
+ this.app.ctx,
|
|
|
+ pointArr.map((point) => {
|
|
|
+ let { x, y } = this.app.coordinate.transform(point[0], point[1]);
|
|
|
+ return [x - cx, y - cy];
|
|
|
+ }).concat(realtimePoint)
|
|
|
+ );
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtLineEdge(this, rp);
|
|
|
+ }
|
|
|
+}
|
|
|
+class Text extends BaseElement {
|
|
|
+ constructor(opts = {}, app) {
|
|
|
+ var _a, _b, _c, _d;
|
|
|
+ super(opts, app);
|
|
|
+ this.dragElement = new DragElement(this, this.app, {
|
|
|
+ lockRatio: true
|
|
|
+ });
|
|
|
+ this.text = opts.text || "";
|
|
|
+ this.style.fillStyle = ((_a = opts.style) == null ? void 0 : _a.fillStyle) || this.app.state.strokeStyle || "#000";
|
|
|
+ this.style.fontSize = ((_b = opts.style) == null ? void 0 : _b.fontSize) || this.app.state.fontSize || 18;
|
|
|
+ this.style.lineHeightRatio = ((_c = opts.style) == null ? void 0 : _c.lineHeightRatio) || 1.5;
|
|
|
+ this.style.fontFamily = ((_d = opts.style) == null ? void 0 : _d.fontFamily) || this.app.state.fontFamily || "\u5FAE\u8F6F\u96C5\u9ED1, Microsoft YaHei";
|
|
|
+ }
|
|
|
+ serialize() {
|
|
|
+ let base = super.serialize();
|
|
|
+ return __spreadProps(__spreadValues({}, base), {
|
|
|
+ text: this.text
|
|
|
+ });
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ this.warpRender(({ halfWidth, halfHeight }) => {
|
|
|
+ drawText(this.app.ctx, this, -halfWidth, -halfHeight);
|
|
|
+ });
|
|
|
+ this.renderDragElement();
|
|
|
+ }
|
|
|
+ isHit(x, y) {
|
|
|
+ let rp = transformPointOnElement(x, y, this);
|
|
|
+ return checkIsAtRectangleInner(this, rp);
|
|
|
+ }
|
|
|
+ updateRect(x, y, width, height) {
|
|
|
+ let { text, style } = this;
|
|
|
+ let fontSize = Math.floor(
|
|
|
+ height / splitTextLines(text).length / style.lineHeightRatio
|
|
|
+ );
|
|
|
+ this.style.fontSize = fontSize;
|
|
|
+ super.updateRect(x, y, width, height);
|
|
|
+ }
|
|
|
+ updateTextSize() {
|
|
|
+ let { width, height } = getTextElementSize(this);
|
|
|
+ this.width = width;
|
|
|
+ this.height = height;
|
|
|
+ }
|
|
|
+}
|
|
|
+class Elements$1 {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.elementList = [];
|
|
|
+ this.activeElement = null;
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ this.isResizing = false;
|
|
|
+ this.resizingElement = null;
|
|
|
+ this.handleResize = throttle(this.handleResize, this, 16);
|
|
|
+ }
|
|
|
+ serialize(stringify = false) {
|
|
|
+ let data = this.elementList.map((element) => {
|
|
|
+ return element.serialize();
|
|
|
+ });
|
|
|
+ return stringify ? JSON.stringify(data) : data;
|
|
|
+ }
|
|
|
+ getElementsNum() {
|
|
|
+ return this.elementList.length;
|
|
|
+ }
|
|
|
+ hasElements() {
|
|
|
+ return this.elementList.length > 0;
|
|
|
+ }
|
|
|
+ addElement(element) {
|
|
|
+ this.elementList.push(element);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ unshiftElement(element) {
|
|
|
+ this.elementList.unshift(element);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ insertElement(element, index) {
|
|
|
+ this.elementList.splice(index, 0, element);
|
|
|
+ }
|
|
|
+ deleteElement(element) {
|
|
|
+ let index = this.getElementIndex(element);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.elementList.splice(index, 1);
|
|
|
+ if (element.isActive) {
|
|
|
+ this.cancelActiveElement(element);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ deleteAllElements() {
|
|
|
+ this.activeElement = null;
|
|
|
+ this.elementList = [];
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ this.isResizing = false;
|
|
|
+ this.resizingElement = null;
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ getElementIndex(element) {
|
|
|
+ return this.elementList.findIndex((item) => {
|
|
|
+ return item === element;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ createElementsFromData(data) {
|
|
|
+ data.forEach((item) => {
|
|
|
+ let element = this.pureCreateElement(item);
|
|
|
+ element.isActive = false;
|
|
|
+ element.isCreating = false;
|
|
|
+ this.addElement(element);
|
|
|
+ });
|
|
|
+ this.app.group.initIdToElementList(this.elementList);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ hasActiveElement() {
|
|
|
+ return !!this.activeElement;
|
|
|
+ }
|
|
|
+ setActiveElement(element) {
|
|
|
+ this.cancelActiveElement();
|
|
|
+ this.activeElement = element;
|
|
|
+ if (element) {
|
|
|
+ element.isActive = true;
|
|
|
+ }
|
|
|
+ this.app.emit("activeElementChange", this.activeElement);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ cancelActiveElement() {
|
|
|
+ if (!this.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.activeElement.isActive = false;
|
|
|
+ this.activeElement = null;
|
|
|
+ this.app.emit("activeElementChange", this.activeElement);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ checkIsHitElement(e) {
|
|
|
+ let x = e.unGridClientX;
|
|
|
+ let y = e.unGridClientY;
|
|
|
+ for (let i = this.elementList.length - 1; i >= 0; i--) {
|
|
|
+ let element = this.elementList[i];
|
|
|
+ if (element.isHit(x, y)) {
|
|
|
+ return element;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ pureCreateElement(opts = {}) {
|
|
|
+ switch (opts.type) {
|
|
|
+ case "rectangle":
|
|
|
+ return new Rectangle(opts, this.app);
|
|
|
+ case "diamond":
|
|
|
+ return new Diamond(opts, this.app);
|
|
|
+ case "triangle":
|
|
|
+ return new Triangle(opts, this.app);
|
|
|
+ case "circle":
|
|
|
+ return new Circle(opts, this.app);
|
|
|
+ case "freedraw":
|
|
|
+ return new Freedraw(opts, this.app);
|
|
|
+ case "image":
|
|
|
+ return new Image$1(opts, this.app);
|
|
|
+ case "arrow":
|
|
|
+ return new Arrow(opts, this.app);
|
|
|
+ case "line":
|
|
|
+ return new Line(opts, this.app);
|
|
|
+ case "text":
|
|
|
+ return new Text(opts, this.app);
|
|
|
+ default:
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ createElement(opts = {}, callback = () => {
|
|
|
+ }, ctx = null, notActive) {
|
|
|
+ if (this.hasActiveElement() || this.isCreatingElement) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ let element = this.pureCreateElement(opts);
|
|
|
+ if (!element) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.addElement(element);
|
|
|
+ if (!notActive) {
|
|
|
+ this.setActiveElement(element);
|
|
|
+ }
|
|
|
+ this.isCreatingElement = true;
|
|
|
+ callback.call(ctx, element);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ copyElement(element, notActive = false, pos) {
|
|
|
+ return new Promise((resolve) => __async(this, null, function* () {
|
|
|
+ if (!element) {
|
|
|
+ return resolve();
|
|
|
+ }
|
|
|
+ let data = this.app.group.handleCopyElementData(element.serialize());
|
|
|
+ if (data.type === "image") {
|
|
|
+ data.imageObj = yield createImageObj(data.url);
|
|
|
+ }
|
|
|
+ this.createElement(
|
|
|
+ data,
|
|
|
+ (element2) => {
|
|
|
+ this.app.group.handleCopyElement(element2);
|
|
|
+ element2.startResize(DRAG_ELEMENT_PARTS.BODY);
|
|
|
+ let ox = 20;
|
|
|
+ let oy = 20;
|
|
|
+ if (pos) {
|
|
|
+ ox = pos.x - element2.x - element2.width / 2;
|
|
|
+ oy = pos.y - element2.y - element2.height / 2;
|
|
|
+ }
|
|
|
+ let gridAdsorbentPos = this.app.coordinate.gridAdsorbent(ox, oy);
|
|
|
+ element2.resize(
|
|
|
+ null,
|
|
|
+ null,
|
|
|
+ null,
|
|
|
+ gridAdsorbentPos.x,
|
|
|
+ gridAdsorbentPos.y
|
|
|
+ );
|
|
|
+ element2.isCreating = false;
|
|
|
+ if (notActive) {
|
|
|
+ element2.isActive = false;
|
|
|
+ }
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ resolve(element2);
|
|
|
+ },
|
|
|
+ this,
|
|
|
+ notActive
|
|
|
+ );
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ creatingRectangleLikeElement(type, x, y, offsetX, offsetY) {
|
|
|
+ this.createElement({
|
|
|
+ type,
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ width: offsetX,
|
|
|
+ height: offsetY
|
|
|
+ });
|
|
|
+ this.activeElement.updateSize(offsetX, offsetY);
|
|
|
+ }
|
|
|
+ creatingCircle(x, y, e) {
|
|
|
+ this.createElement({
|
|
|
+ type: "circle",
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ });
|
|
|
+ let radius = getTowPointDistance(e.clientX, e.clientY, x, y);
|
|
|
+ this.activeElement.updateSize(radius, radius);
|
|
|
+ }
|
|
|
+ creatingFreedraw(e, event) {
|
|
|
+ this.createElement({
|
|
|
+ type: "freedraw"
|
|
|
+ });
|
|
|
+ let element = this.activeElement;
|
|
|
+ let lineWidth = computedLineWidthBySpeed(
|
|
|
+ event.mouseSpeed,
|
|
|
+ element.lastLineWidth
|
|
|
+ );
|
|
|
+ element.lastLineWidth = lineWidth;
|
|
|
+ element.addPoint(e.clientX, e.clientY, lineWidth);
|
|
|
+ let { coordinate, ctx, state } = this.app;
|
|
|
+ let tfp = coordinate.transformToCanvasCoordinate(
|
|
|
+ coordinate.subScrollX(event.lastMousePos.x),
|
|
|
+ coordinate.subScrollY(event.lastMousePos.y)
|
|
|
+ );
|
|
|
+ let ttp = coordinate.transformToCanvasCoordinate(
|
|
|
+ coordinate.subScrollX(e.clientX),
|
|
|
+ coordinate.subScrollY(e.clientY)
|
|
|
+ );
|
|
|
+ ctx.save();
|
|
|
+ ctx.scale(state.scale, state.scale);
|
|
|
+ element.singleRender(tfp.x, tfp.y, ttp.x, ttp.y, lineWidth);
|
|
|
+ ctx.restore();
|
|
|
+ }
|
|
|
+ creatingImage(e, { width, height, imageObj, url, ratio }) {
|
|
|
+ let gp = this.app.coordinate.gridAdsorbent(
|
|
|
+ e.unGridClientX - width / 2,
|
|
|
+ e.unGridClientY - height / 2
|
|
|
+ );
|
|
|
+ this.createElement({
|
|
|
+ type: "image",
|
|
|
+ x: gp.x,
|
|
|
+ y: gp.y,
|
|
|
+ url,
|
|
|
+ imageObj,
|
|
|
+ width,
|
|
|
+ height,
|
|
|
+ ratio
|
|
|
+ });
|
|
|
+ }
|
|
|
+ editingText(element) {
|
|
|
+ if (element.type !== "text") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ element.noRender = true;
|
|
|
+ this.setActiveElement(element);
|
|
|
+ }
|
|
|
+ completeEditingText() {
|
|
|
+ let element = this.activeElement;
|
|
|
+ if (!element || element.type !== "text") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!element.text.trim()) {
|
|
|
+ this.deleteElement(element);
|
|
|
+ this.setActiveElement(null);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ element.noRender = false;
|
|
|
+ }
|
|
|
+ completeCreateArrow(e) {
|
|
|
+ this.activeElement.addPoint(e.clientX, e.clientY);
|
|
|
+ }
|
|
|
+ creatingArrow(x, y, e) {
|
|
|
+ this.createElement(
|
|
|
+ {
|
|
|
+ type: "arrow",
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ },
|
|
|
+ (element) => {
|
|
|
+ element.addPoint(x, y);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.activeElement.updateFictitiousPoint(e.clientX, e.clientY);
|
|
|
+ }
|
|
|
+ creatingLine(x, y, e, isSingle = false, notCreate = false) {
|
|
|
+ if (!notCreate) {
|
|
|
+ this.createElement(
|
|
|
+ {
|
|
|
+ type: "line",
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ isSingle
|
|
|
+ },
|
|
|
+ (element2) => {
|
|
|
+ element2.addPoint(x, y);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ let element = this.activeElement;
|
|
|
+ if (element) {
|
|
|
+ element.updateFictitiousPoint(e.clientX, e.clientY);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ completeCreateLine(e, completeCallback = () => {
|
|
|
+ }) {
|
|
|
+ let element = this.activeElement;
|
|
|
+ let x = e.clientX;
|
|
|
+ let y = e.clientY;
|
|
|
+ if (element && element.isSingle) {
|
|
|
+ element.addPoint(x, y);
|
|
|
+ completeCallback();
|
|
|
+ } else {
|
|
|
+ this.createElement({
|
|
|
+ type: "line",
|
|
|
+ isSingle: false
|
|
|
+ });
|
|
|
+ element = this.activeElement;
|
|
|
+ element.addPoint(x, y);
|
|
|
+ element.updateFictitiousPoint(x, y);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ completeCreateElement() {
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ let element = this.activeElement;
|
|
|
+ if (!element) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ if (["freedraw", "arrow", "line"].includes(element.type)) {
|
|
|
+ element.updateMultiPointBoundingRect();
|
|
|
+ }
|
|
|
+ element.isCreating = false;
|
|
|
+ this.app.emitChange();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ setActiveElementStyle(style = {}) {
|
|
|
+ if (!this.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ Object.keys(style).forEach((key) => {
|
|
|
+ this.activeElement.style[key] = style[key];
|
|
|
+ if (key === "fontSize" && this.activeElement.type === "text") {
|
|
|
+ this.activeElement.updateTextSize();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ checkInResizeHand(x, y) {
|
|
|
+ let element = this.activeElement;
|
|
|
+ let hand = element.dragElement.checkPointInDragElementWhere(x, y);
|
|
|
+ if (hand) {
|
|
|
+ return {
|
|
|
+ element,
|
|
|
+ hand
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ checkIsResize(x, y, e) {
|
|
|
+ if (!this.hasActiveElement()) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let res = this.checkInResizeHand(x, y);
|
|
|
+ if (res) {
|
|
|
+ this.isResizing = true;
|
|
|
+ this.resizingElement = res.element;
|
|
|
+ this.resizingElement.startResize(res.hand, e);
|
|
|
+ this.app.cursor.setResize(res.hand);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ handleResize(...args) {
|
|
|
+ if (!this.isResizing) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.resizingElement.resize(...args);
|
|
|
+ this.app.render.render();
|
|
|
+ }
|
|
|
+ endResize() {
|
|
|
+ this.isResizing = false;
|
|
|
+ this.resizingElement.endResize();
|
|
|
+ this.resizingElement = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+class ImageEdit extends EventEmitter {
|
|
|
+ constructor(app) {
|
|
|
+ super();
|
|
|
+ this.app = app;
|
|
|
+ this.el = null;
|
|
|
+ this.isReady = false;
|
|
|
+ this.previewEl = null;
|
|
|
+ this.imageData = null;
|
|
|
+ this.maxWidth = 750;
|
|
|
+ this.maxHeight = 450;
|
|
|
+ this.maxRatio = this.maxWidth / this.maxHeight;
|
|
|
+ this.onImageSelectChange = this.onImageSelectChange.bind(this);
|
|
|
+ }
|
|
|
+ reset() {
|
|
|
+ this.el.value = "";
|
|
|
+ this.isReady = false;
|
|
|
+ document.body.removeChild(this.previewEl);
|
|
|
+ this.previewEl = null;
|
|
|
+ this.imageData = null;
|
|
|
+ }
|
|
|
+ selectImage() {
|
|
|
+ if (!this.el) {
|
|
|
+ this.el = document.createElement("input");
|
|
|
+ this.el.type = "file";
|
|
|
+ this.el.accept = "image/*";
|
|
|
+ this.el.style.position = "fixed";
|
|
|
+ this.el.style.left = "-999999px";
|
|
|
+ this.el.addEventListener("change", this.onImageSelectChange);
|
|
|
+ document.body.appendChild(this.el);
|
|
|
+ }
|
|
|
+ this.el.click();
|
|
|
+ }
|
|
|
+ updatePreviewElPos(x, y) {
|
|
|
+ let width = 100;
|
|
|
+ let height = width / this.imageData.ratio;
|
|
|
+ if (!this.previewEl) {
|
|
|
+ this.previewEl = document.createElement("div");
|
|
|
+ this.previewEl.style.position = "fixed";
|
|
|
+ this.previewEl.style.width = width + "px";
|
|
|
+ this.previewEl.style.height = height + "px";
|
|
|
+ this.previewEl.style.backgroundImage = `url('${this.imageData.url}')`;
|
|
|
+ this.previewEl.style.backgroundSize = "cover";
|
|
|
+ this.previewEl.style.pointerEvents = "none";
|
|
|
+ document.body.appendChild(this.previewEl);
|
|
|
+ }
|
|
|
+ let tp = this.app.coordinate.containerToWindow(x, y);
|
|
|
+ this.previewEl.style.left = tp.x - width / 2 + "px";
|
|
|
+ this.previewEl.style.top = tp.y - height / 2 + "px";
|
|
|
+ }
|
|
|
+ getImageSize(url) {
|
|
|
+ return __async(this, null, function* () {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let img = new Image();
|
|
|
+ img.setAttribute("crossOrigin", "anonymous");
|
|
|
+ img.onload = () => {
|
|
|
+ let width = img.width;
|
|
|
+ let height = img.height;
|
|
|
+ let ratio = img.width / img.height;
|
|
|
+ if (img.width > this.maxWidth || img.height > this.maxHeight) {
|
|
|
+ if (ratio > this.maxRatio) {
|
|
|
+ width = this.maxWidth;
|
|
|
+ height = this.maxWidth / ratio;
|
|
|
+ } else {
|
|
|
+ height = this.maxHeight;
|
|
|
+ width = this.maxHeight * ratio;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ resolve({
|
|
|
+ imageObj: img,
|
|
|
+ size: {
|
|
|
+ width,
|
|
|
+ height
|
|
|
+ },
|
|
|
+ ratio
|
|
|
+ });
|
|
|
+ };
|
|
|
+ img.onerror = () => {
|
|
|
+ reject();
|
|
|
+ };
|
|
|
+ img.src = url;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ onImageSelectChange(e) {
|
|
|
+ return __async(this, null, function* () {
|
|
|
+ let url = yield this.getImageUrl(e.target.files[0]);
|
|
|
+ let { imageObj, size, ratio } = yield this.getImageSize(url);
|
|
|
+ this.isReady = true;
|
|
|
+ this.imageData = __spreadProps(__spreadValues({
|
|
|
+ url
|
|
|
+ }, size), {
|
|
|
+ ratio,
|
|
|
+ imageObj
|
|
|
+ });
|
|
|
+ this.emit("imageSelectChange", this.imageData);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ getImageUrl(file) {
|
|
|
+ return __async(this, null, function* () {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let reader = new FileReader();
|
|
|
+ reader.onloadend = () => {
|
|
|
+ resolve(reader.result);
|
|
|
+ };
|
|
|
+ reader.onerror = () => {
|
|
|
+ reject();
|
|
|
+ };
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+class Cursor {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.currentType = "default";
|
|
|
+ }
|
|
|
+ set(type = "default") {
|
|
|
+ this.currentType = type;
|
|
|
+ let style = type;
|
|
|
+ if (type === "eraser") {
|
|
|
+ style = `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAARRJREFUOE/dlDFLxEAQhd+BVouFZ3vlQuwSyI+5a7PBRkk6k9KzTOwStJFsWv0xgaQzkNLWszim0kL2OOFc9oKRYHFTz37Lm/dmJhi5JiPzcBjAOYDz7WheADz3jalP8oIxds85P3Zd90RBqqpad133SUSXAJ5M4H3AhWVZd1EUzYQQP96VZYkkSV7btr02QY1Axtgqz/NTz/OM6qSUCMNwRURneoMJOLdt+7Gu643MfeU4zrppmgt9pibgjRBiWRRFb0R934eUcgngdrfxX4CjSwZj7C3Lsqnu8Lc05XQQBO9ENP2NKapnE5s4jme608rhNE2HxWb7qwr2A+f8SAv2BxFdDQ32rpLRVu9Pl+0wztcg6V/VPW4Vw1FsawAAAABJRU5ErkJggg==) 10 10, auto`;
|
|
|
+ }
|
|
|
+ this.app.container.style.cursor = style;
|
|
|
+ }
|
|
|
+ hide() {
|
|
|
+ this.set("none");
|
|
|
+ }
|
|
|
+ reset() {
|
|
|
+ this.set();
|
|
|
+ }
|
|
|
+ setCrosshair() {
|
|
|
+ this.set("crosshair");
|
|
|
+ }
|
|
|
+ setMove() {
|
|
|
+ this.set("move");
|
|
|
+ }
|
|
|
+ setResize(dir) {
|
|
|
+ let type = "";
|
|
|
+ switch (dir) {
|
|
|
+ case DRAG_ELEMENT_PARTS.BODY:
|
|
|
+ type = "move";
|
|
|
+ break;
|
|
|
+ case DRAG_ELEMENT_PARTS.ROTATE:
|
|
|
+ type = "grab";
|
|
|
+ break;
|
|
|
+ case DRAG_ELEMENT_PARTS.TOP_LEFT_BTN:
|
|
|
+ type = "nw-resize";
|
|
|
+ break;
|
|
|
+ case DRAG_ELEMENT_PARTS.TOP_RIGHT_BTN:
|
|
|
+ type = "ne-resize";
|
|
|
+ break;
|
|
|
+ case DRAG_ELEMENT_PARTS.BOTTOM_RIGHT_BTN:
|
|
|
+ type = "se-resize";
|
|
|
+ break;
|
|
|
+ case DRAG_ELEMENT_PARTS.BOTTOM_LEFT_BTN:
|
|
|
+ type = "sw-resize";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.set(type);
|
|
|
+ }
|
|
|
+ setEraser() {
|
|
|
+ this.set("eraser");
|
|
|
+ }
|
|
|
+}
|
|
|
+class TextEdit extends EventEmitter {
|
|
|
+ constructor(app) {
|
|
|
+ super();
|
|
|
+ this.app = app;
|
|
|
+ this.editable = null;
|
|
|
+ this.isEditing = false;
|
|
|
+ this.onTextInput = this.onTextInput.bind(this);
|
|
|
+ this.onTextBlur = this.onTextBlur.bind(this);
|
|
|
+ }
|
|
|
+ crateTextInputEl() {
|
|
|
+ this.editable = document.createElement("textarea");
|
|
|
+ this.editable.dir = "auto";
|
|
|
+ this.editable.tabIndex = 0;
|
|
|
+ this.editable.wrap = "off";
|
|
|
+ this.editable.className = "textInput";
|
|
|
+ Object.assign(this.editable.style, {
|
|
|
+ position: "fixed",
|
|
|
+ display: "block",
|
|
|
+ minHeight: "1em",
|
|
|
+ backfaceVisibility: "hidden",
|
|
|
+ margin: 0,
|
|
|
+ padding: 0,
|
|
|
+ border: 0,
|
|
|
+ outline: 0,
|
|
|
+ resize: "none",
|
|
|
+ background: "transparent",
|
|
|
+ overflow: "hidden",
|
|
|
+ whiteSpace: "pre"
|
|
|
+ });
|
|
|
+ this.editable.addEventListener("input", this.onTextInput);
|
|
|
+ this.editable.addEventListener("blur", this.onTextBlur);
|
|
|
+ document.body.appendChild(this.editable);
|
|
|
+ }
|
|
|
+ updateTextInputStyle() {
|
|
|
+ let activeElement = this.app.elements.activeElement;
|
|
|
+ if (!activeElement) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let { x, y, width, height, style, text, rotate } = activeElement;
|
|
|
+ let { coordinate, state } = this.app;
|
|
|
+ this.editable.value = text;
|
|
|
+ x = coordinate.subScrollX(x);
|
|
|
+ y = coordinate.subScrollY(y);
|
|
|
+ let sp = coordinate.scale(x, y);
|
|
|
+ let tp = coordinate.containerToWindow(sp.x, sp.y);
|
|
|
+ let fontSize = style.fontSize * state.scale;
|
|
|
+ let styles = {
|
|
|
+ font: getFontString(fontSize, style.fontFamily),
|
|
|
+ lineHeight: `${fontSize * style.lineHeightRatio}px`,
|
|
|
+ left: `${tp.x}px`,
|
|
|
+ top: `${tp.y}px`,
|
|
|
+ color: style.fillStyle,
|
|
|
+ width: Math.max(width, 100) * state.scale + "px",
|
|
|
+ height: height * state.scale + "px",
|
|
|
+ transform: `rotate(${rotate}deg)`,
|
|
|
+ opacity: style.globalAlpha
|
|
|
+ };
|
|
|
+ Object.assign(this.editable.style, styles);
|
|
|
+ }
|
|
|
+ onTextInput() {
|
|
|
+ let activeElement = this.app.elements.activeElement;
|
|
|
+ if (!activeElement) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ activeElement.text = this.editable.value;
|
|
|
+ let { width, height } = getTextElementSize(activeElement);
|
|
|
+ activeElement.width = width;
|
|
|
+ activeElement.height = height;
|
|
|
+ this.updateTextInputStyle();
|
|
|
+ }
|
|
|
+ onTextBlur() {
|
|
|
+ this.editable.style.display = "none";
|
|
|
+ this.editable.value = "";
|
|
|
+ this.emit("blur");
|
|
|
+ this.isEditing = false;
|
|
|
+ }
|
|
|
+ showTextEdit() {
|
|
|
+ if (!this.editable) {
|
|
|
+ this.crateTextInputEl();
|
|
|
+ } else {
|
|
|
+ this.editable.style.display = "block";
|
|
|
+ }
|
|
|
+ this.updateTextInputStyle();
|
|
|
+ this.editable.focus();
|
|
|
+ this.editable.select();
|
|
|
+ this.isEditing = true;
|
|
|
+ }
|
|
|
+}
|
|
|
+class History {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.historyStack = [];
|
|
|
+ this.length = 0;
|
|
|
+ this.index = -1;
|
|
|
+ }
|
|
|
+ add(data) {
|
|
|
+ let prev = this.length > 0 ? this.historyStack[this.length - 1] : null;
|
|
|
+ let copyData = deepCopy(data);
|
|
|
+ if (copyData === prev) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.historyStack.push(copyData);
|
|
|
+ this.length++;
|
|
|
+ this.index = this.length - 1;
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ undo() {
|
|
|
+ if (this.index <= 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.index--;
|
|
|
+ this.shuttle();
|
|
|
+ }
|
|
|
+ redo() {
|
|
|
+ if (this.index >= this.length - 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.index++;
|
|
|
+ this.shuttle();
|
|
|
+ }
|
|
|
+ shuttle() {
|
|
|
+ return __async(this, null, function* () {
|
|
|
+ let data = this.historyStack[this.index];
|
|
|
+ yield this.app.setData(data, true);
|
|
|
+ this.emitChange();
|
|
|
+ this.app.emit("change", data);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ clear() {
|
|
|
+ this.index = -1;
|
|
|
+ this.length = 0;
|
|
|
+ this.historyStack = [];
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ emitChange() {
|
|
|
+ this.app.emit("shuttle", this.index, this.length);
|
|
|
+ }
|
|
|
+}
|
|
|
+class Export {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.openTest = false;
|
|
|
+ this.saveState = {
|
|
|
+ scale: 0,
|
|
|
+ scrollX: 0,
|
|
|
+ scrollY: 0,
|
|
|
+ width: 0,
|
|
|
+ height: 0
|
|
|
+ };
|
|
|
+ }
|
|
|
+ show(canvas) {
|
|
|
+ if (this.openTest) {
|
|
|
+ canvas.style.cssText = `
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ `;
|
|
|
+ document.body.appendChild(canvas);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getElementList(onlySelected = true) {
|
|
|
+ if (!onlySelected) {
|
|
|
+ return this.app.elements.elementList;
|
|
|
+ } else {
|
|
|
+ let selectedElements = [];
|
|
|
+ if (this.app.elements.activeElement) {
|
|
|
+ selectedElements.push(this.app.elements.activeElement);
|
|
|
+ } else if (this.app.selection.hasSelectionElements()) {
|
|
|
+ selectedElements = this.app.selection.getSelectionElements();
|
|
|
+ }
|
|
|
+ let res = this.app.elements.elementList.filter((element) => {
|
|
|
+ return selectedElements.includes(element);
|
|
|
+ });
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ exportImage({
|
|
|
+ type = "image/png",
|
|
|
+ renderBg = true,
|
|
|
+ useBlob = false,
|
|
|
+ paddingX = 10,
|
|
|
+ paddingY = 10,
|
|
|
+ onlySelected
|
|
|
+ } = {}) {
|
|
|
+ let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
|
|
|
+ this.getElementList(onlySelected)
|
|
|
+ );
|
|
|
+ let width = maxx - minx + paddingX * 2;
|
|
|
+ let height = maxy - miny + paddingY * 2;
|
|
|
+ let { canvas, ctx } = createCanvas(width, height, {
|
|
|
+ noStyle: true,
|
|
|
+ noTranslate: true
|
|
|
+ });
|
|
|
+ this.show(canvas);
|
|
|
+ this.saveAppState();
|
|
|
+ this.changeAppState(minx - paddingX, miny - paddingY, ctx);
|
|
|
+ if (renderBg && this.app.state.backgroundColor) {
|
|
|
+ this.app.background.canvasAddBackgroundColor(
|
|
|
+ ctx,
|
|
|
+ width,
|
|
|
+ height,
|
|
|
+ this.app.state.backgroundColor
|
|
|
+ );
|
|
|
+ }
|
|
|
+ this.render(ctx, onlySelected);
|
|
|
+ this.recoveryAppState();
|
|
|
+ if (useBlob) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ canvas.toBlob((blob) => {
|
|
|
+ if (blob) {
|
|
|
+ resolve(blob);
|
|
|
+ } else {
|
|
|
+ reject();
|
|
|
+ }
|
|
|
+ }, type);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return canvas.toDataURL(type);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ saveAppState() {
|
|
|
+ let { width, height, state, ctx } = this.app;
|
|
|
+ this.saveState.width = width;
|
|
|
+ this.saveState.height = height;
|
|
|
+ this.saveState.scale = state.scale;
|
|
|
+ this.saveState.scrollX = state.scrollX;
|
|
|
+ this.saveState.scrollY = state.scrollY;
|
|
|
+ this.saveState.ctx = ctx;
|
|
|
+ }
|
|
|
+ changeAppState(minx, miny, ctx) {
|
|
|
+ this.app.ctx = ctx;
|
|
|
+ this.app.state.scale = 1;
|
|
|
+ this.app.state.scrollX = 0;
|
|
|
+ this.app.state.scrollY = 0;
|
|
|
+ this.app.width = minx * 2;
|
|
|
+ this.app.height = miny * 2;
|
|
|
+ }
|
|
|
+ recoveryAppState() {
|
|
|
+ let { width, height, scale, scrollX, scrollY, ctx } = this.saveState;
|
|
|
+ this.app.state.scale = scale;
|
|
|
+ this.app.state.scrollX = scrollX;
|
|
|
+ this.app.state.scrollY = scrollY;
|
|
|
+ this.app.width = width;
|
|
|
+ this.app.height = height;
|
|
|
+ this.app.ctx = ctx;
|
|
|
+ }
|
|
|
+ render(ctx, onlySelected) {
|
|
|
+ ctx.save();
|
|
|
+ this.getElementList(onlySelected).forEach((element) => {
|
|
|
+ if (element.noRender) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let cacheActive = element.isActive;
|
|
|
+ let cacheSelected = element.isSelected;
|
|
|
+ element.isActive = false;
|
|
|
+ element.isSelected = false;
|
|
|
+ element.render();
|
|
|
+ element.isActive = cacheActive;
|
|
|
+ element.isSelected = cacheSelected;
|
|
|
+ });
|
|
|
+ ctx.restore();
|
|
|
+ }
|
|
|
+ exportJson() {
|
|
|
+ return this.app.getData();
|
|
|
+ }
|
|
|
+}
|
|
|
+class Background {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ }
|
|
|
+ set() {
|
|
|
+ if (this.app.state.backgroundColor) {
|
|
|
+ this.addBackgroundColor();
|
|
|
+ } else {
|
|
|
+ this.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ addBackgroundColor() {
|
|
|
+ this.app.container.style.backgroundColor = this.app.state.backgroundColor;
|
|
|
+ }
|
|
|
+ remove() {
|
|
|
+ this.app.container.style.backgroundColor = "";
|
|
|
+ }
|
|
|
+ canvasAddBackgroundColor(ctx, width, height, backgroundColor) {
|
|
|
+ ctx.save();
|
|
|
+ ctx.rect(0, 0, width, height);
|
|
|
+ ctx.fillStyle = backgroundColor;
|
|
|
+ ctx.fill();
|
|
|
+ ctx.restore();
|
|
|
+ }
|
|
|
+}
|
|
|
+class Canvas {
|
|
|
+ constructor(width, height, opt) {
|
|
|
+ this.width = width;
|
|
|
+ this.height = height;
|
|
|
+ let { canvas, ctx } = createCanvas(width, height, opt);
|
|
|
+ this.el = canvas;
|
|
|
+ this.ctx = ctx;
|
|
|
+ }
|
|
|
+ clearCanvas() {
|
|
|
+ let { width, height } = this;
|
|
|
+ this.ctx.clearRect(-width / 2, -height / 2, width, height);
|
|
|
+ }
|
|
|
+}
|
|
|
+class MultiSelectElement extends BaseElement {
|
|
|
+ constructor(opts = {}, app) {
|
|
|
+ super(opts, app);
|
|
|
+ this.dragElement = new DragElement(this, this.app);
|
|
|
+ this.selectedElementList = [];
|
|
|
+ this.wholeCenterPos = { x: 0, y: 0 };
|
|
|
+ }
|
|
|
+ setSelectedElementList(list) {
|
|
|
+ this.selectedElementList.forEach((element) => {
|
|
|
+ element.isSelected = false;
|
|
|
+ });
|
|
|
+ this.selectedElementList = list;
|
|
|
+ this.selectedElementList.forEach((element) => {
|
|
|
+ element.isSelected = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ updateElements(elements) {
|
|
|
+ let exists = [];
|
|
|
+ this.selectedElementList.forEach((element) => {
|
|
|
+ if (elements.includes(element)) {
|
|
|
+ exists.push(element);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.setSelectedElementList(exists);
|
|
|
+ }
|
|
|
+ updateRect() {
|
|
|
+ if (this.selectedElementList.length <= 0) {
|
|
|
+ super.updateRect(0, 0, 0, 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
|
|
|
+ this.selectedElementList
|
|
|
+ );
|
|
|
+ super.updateRect(minx, miny, maxx - minx, maxy - miny);
|
|
|
+ }
|
|
|
+ startResize(...args) {
|
|
|
+ this.selectedElementList.forEach((element) => {
|
|
|
+ if (args[0] === "rotate") {
|
|
|
+ this.wholeCenterPos = getElementCenterPoint(this);
|
|
|
+ }
|
|
|
+ element.startResize(...args);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ resize(...args) {
|
|
|
+ this.selectedElementList.forEach((element) => {
|
|
|
+ if (element.dragElement.resizeType === "rotate") {
|
|
|
+ this.handleRotate(element, ...args);
|
|
|
+ } else {
|
|
|
+ element.resize(...args);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handleRotate(element, e, mx, my, offsetX, offsetY) {
|
|
|
+ let rotate = getTowPointRotate(
|
|
|
+ this.wholeCenterPos.x,
|
|
|
+ this.wholeCenterPos.y,
|
|
|
+ e.clientX,
|
|
|
+ e.clientY,
|
|
|
+ mx,
|
|
|
+ my
|
|
|
+ );
|
|
|
+ element.rotateByCenter(rotate, this.wholeCenterPos.x, this.wholeCenterPos.y);
|
|
|
+ }
|
|
|
+ endResize() {
|
|
|
+ this.selectedElementList.forEach((element) => {
|
|
|
+ element.endResize();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ if (this.selectedElementList.length > 0) {
|
|
|
+ if (this.width <= 0 || this.height <= 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.dragElement.render();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+class Selection {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.canvas = null;
|
|
|
+ this.ctx = null;
|
|
|
+ this.creatingSelection = false;
|
|
|
+ this.hasSelection = false;
|
|
|
+ this.isResizing = false;
|
|
|
+ this.state = this.app.state;
|
|
|
+ this.width = this.app.width;
|
|
|
+ this.height = this.app.height;
|
|
|
+ this.coordinate = new Coordinate(this);
|
|
|
+ this.rectangle = new Rectangle(
|
|
|
+ {
|
|
|
+ type: "rectangle",
|
|
|
+ style: {
|
|
|
+ strokeStyle: "rgba(9,132,227,0.3)",
|
|
|
+ fillStyle: "rgba(9,132,227,0.3)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ this
|
|
|
+ );
|
|
|
+ this.multiSelectElement = new MultiSelectElement(
|
|
|
+ {
|
|
|
+ type: "multiSelectElement"
|
|
|
+ },
|
|
|
+ this
|
|
|
+ );
|
|
|
+ this.checkInNodes = throttle(this.checkInNodes, this, 500);
|
|
|
+ this.handleResize = throttle(this.handleResize, this, 16);
|
|
|
+ this.init();
|
|
|
+ this.bindEvent();
|
|
|
+ }
|
|
|
+ init() {
|
|
|
+ if (this.canvas) {
|
|
|
+ this.app.container.removeChild(this.canvas.el);
|
|
|
+ }
|
|
|
+ this.width = this.app.width;
|
|
|
+ this.height = this.app.height;
|
|
|
+ this.canvas = new Canvas(this.width, this.height, {
|
|
|
+ className: "selection"
|
|
|
+ });
|
|
|
+ this.ctx = this.canvas.ctx;
|
|
|
+ this.app.container.appendChild(this.canvas.el);
|
|
|
+ }
|
|
|
+ bindEvent() {
|
|
|
+ this.app.on("change", () => {
|
|
|
+ this.state = this.app.state;
|
|
|
+ this.multiSelectElement.updateElements(this.app.elements.elementList);
|
|
|
+ this.renderSelection();
|
|
|
+ });
|
|
|
+ this.app.on("scrollChange", () => {
|
|
|
+ this.renderSelection();
|
|
|
+ });
|
|
|
+ this.app.on("zoomChange", () => {
|
|
|
+ this.renderSelection();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ onMousedown(e, event) {
|
|
|
+ if (e.originEvent.which !== 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.creatingSelection = true;
|
|
|
+ this.rectangle.updatePos(event.mousedownPos.x, event.mousedownPos.y);
|
|
|
+ }
|
|
|
+ onMousemove(e, event) {
|
|
|
+ if (Math.abs(event.mouseOffset.x) <= 10 && Math.abs(event.mouseOffset.y) <= 10) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.onMove(e, event);
|
|
|
+ }
|
|
|
+ onMouseup() {
|
|
|
+ this.creatingSelection = false;
|
|
|
+ this.rectangle.updateRect(0, 0, 0, 0);
|
|
|
+ this.hasSelection = this.hasSelectionElements();
|
|
|
+ this.multiSelectElement.updateRect();
|
|
|
+ this.renderSelection();
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ reset() {
|
|
|
+ this.setMultiSelectElements([]);
|
|
|
+ this.hasSelection = false;
|
|
|
+ this.renderSelection();
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ renderSelection() {
|
|
|
+ this.canvas.clearCanvas();
|
|
|
+ this.ctx.save();
|
|
|
+ this.ctx.scale(this.app.state.scale, this.app.state.scale);
|
|
|
+ this.rectangle.render();
|
|
|
+ this.multiSelectElement.render();
|
|
|
+ this.ctx.restore();
|
|
|
+ }
|
|
|
+ onMove(e, event) {
|
|
|
+ this.rectangle.updateSize(event.mouseOffset.x, event.mouseOffset.y);
|
|
|
+ this.renderSelection();
|
|
|
+ this.checkInElements(e, event);
|
|
|
+ }
|
|
|
+ checkInElements(e, event) {
|
|
|
+ let minx = Math.min(event.mousedownPos.x, e.clientX);
|
|
|
+ let miny = Math.min(event.mousedownPos.y, e.clientY);
|
|
|
+ let maxx = Math.max(event.mousedownPos.x, e.clientX);
|
|
|
+ let maxy = Math.max(event.mousedownPos.y, e.clientY);
|
|
|
+ let selectedElementList = [];
|
|
|
+ this.app.elements.elementList.forEach((element) => {
|
|
|
+ let _minx = Infinity;
|
|
|
+ let _maxx = -Infinity;
|
|
|
+ let _miny = Infinity;
|
|
|
+ let _maxy = -Infinity;
|
|
|
+ let endPointList = element.getEndpointList();
|
|
|
+ let rect = getBoundingRect(
|
|
|
+ endPointList.map((point) => {
|
|
|
+ return [point.x, point.y];
|
|
|
+ }),
|
|
|
+ true
|
|
|
+ );
|
|
|
+ rect.forEach(({ x, y }) => {
|
|
|
+ if (x < _minx) {
|
|
|
+ _minx = x;
|
|
|
+ }
|
|
|
+ if (x > _maxx) {
|
|
|
+ _maxx = x;
|
|
|
+ }
|
|
|
+ if (y < _miny) {
|
|
|
+ _miny = y;
|
|
|
+ }
|
|
|
+ if (y > _maxy) {
|
|
|
+ _maxy = y;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (_minx >= minx && _maxx <= maxx && _miny >= miny && _maxy <= maxy) {
|
|
|
+ selectedElementList.push(element);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let finalList = [...selectedElementList];
|
|
|
+ selectedElementList.forEach((item) => {
|
|
|
+ if (item.hasGroup()) {
|
|
|
+ finalList.push(...this.app.group.getGroupElements(item));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ finalList = new Set(finalList);
|
|
|
+ finalList = Array.from(finalList);
|
|
|
+ this.setMultiSelectElements(finalList, true);
|
|
|
+ this.app.render.render();
|
|
|
+ }
|
|
|
+ checkInResizeHand(x, y) {
|
|
|
+ return this.multiSelectElement.dragElement.checkPointInDragElementWhere(
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ );
|
|
|
+ }
|
|
|
+ checkIsResize(x, y, e) {
|
|
|
+ if (!this.hasSelection) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let hand = this.multiSelectElement.dragElement.checkPointInDragElementWhere(
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ );
|
|
|
+ if (hand) {
|
|
|
+ this.isResizing = true;
|
|
|
+ this.multiSelectElement.startResize(hand, e);
|
|
|
+ this.app.cursor.setResize(hand);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ handleResize(...args) {
|
|
|
+ if (!this.isResizing) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.multiSelectElement.resize(...args);
|
|
|
+ this.app.render.render();
|
|
|
+ this.multiSelectElement.updateRect();
|
|
|
+ this.renderSelection();
|
|
|
+ }
|
|
|
+ endResize() {
|
|
|
+ this.isResizing = false;
|
|
|
+ this.multiSelectElement.endResize();
|
|
|
+ }
|
|
|
+ setSelectedElementStyle(style = {}) {
|
|
|
+ if (!this.hasSelectionElements()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ Object.keys(style).forEach((key) => {
|
|
|
+ this.getSelectionElements().forEach((element) => {
|
|
|
+ element.style[key] = style[key];
|
|
|
+ if (key === "fontSize" && element.type === "text") {
|
|
|
+ element.updateTextSize();
|
|
|
+ this.multiSelectElement.updateRect();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.app.render.render();
|
|
|
+ this.app.emitChange();
|
|
|
+ }
|
|
|
+ deleteSelectedElements() {
|
|
|
+ this.getSelectionElements().forEach((element) => {
|
|
|
+ this.app.elements.deleteElement(element);
|
|
|
+ });
|
|
|
+ this.selectElements([]);
|
|
|
+ this.app.emitChange();
|
|
|
+ }
|
|
|
+ hasSelectionElements() {
|
|
|
+ return this.getSelectionElements().length > 0;
|
|
|
+ }
|
|
|
+ getSelectionElements() {
|
|
|
+ return this.multiSelectElement.selectedElementList;
|
|
|
+ }
|
|
|
+ copySelectionElements(pos) {
|
|
|
+ return __async(this, null, function* () {
|
|
|
+ let task = this.getSelectionElements().map((element) => {
|
|
|
+ return this.app.elements.copyElement(element, true);
|
|
|
+ });
|
|
|
+ this.app.group.clearCopyMap();
|
|
|
+ let elements = yield Promise.all(task);
|
|
|
+ this.setMultiSelectElements(elements);
|
|
|
+ if (pos) {
|
|
|
+ this.multiSelectElement.startResize(DRAG_ELEMENT_PARTS.BODY);
|
|
|
+ let ox = pos.x - this.multiSelectElement.x - this.multiSelectElement.width / 2;
|
|
|
+ let oy = pos.y - this.multiSelectElement.y - this.multiSelectElement.height / 2;
|
|
|
+ let gridAdsorbentPos = this.app.coordinate.gridAdsorbent(ox, oy);
|
|
|
+ this.multiSelectElement.resize(
|
|
|
+ null,
|
|
|
+ null,
|
|
|
+ null,
|
|
|
+ gridAdsorbentPos.x,
|
|
|
+ gridAdsorbentPos.y
|
|
|
+ );
|
|
|
+ this.multiSelectElement.endResize();
|
|
|
+ this.multiSelectElement.updateRect();
|
|
|
+ }
|
|
|
+ this.app.render.render();
|
|
|
+ this.renderSelection();
|
|
|
+ this.app.emitChange();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ selectElements(elements = []) {
|
|
|
+ this.hasSelection = elements.length > 0;
|
|
|
+ this.setMultiSelectElements(elements);
|
|
|
+ this.app.render.render();
|
|
|
+ this.renderSelection();
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ setMultiSelectElements(elements = [], notUpdateRect) {
|
|
|
+ this.multiSelectElement.setSelectedElementList(elements);
|
|
|
+ if (!notUpdateRect) {
|
|
|
+ this.multiSelectElement.updateRect();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ emitChange() {
|
|
|
+ this.app.emit("multiSelectChange", this.getSelectionElements());
|
|
|
+ }
|
|
|
+}
|
|
|
+class Grid {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.canvas = null;
|
|
|
+ this.ctx = null;
|
|
|
+ this.init();
|
|
|
+ this.app.on("zoomChange", this.renderGrid, this);
|
|
|
+ this.app.on("scrollChange", this.renderGrid, this);
|
|
|
+ }
|
|
|
+ init() {
|
|
|
+ if (this.canvas) {
|
|
|
+ this.app.container.removeChild(this.canvas.el);
|
|
|
+ }
|
|
|
+ let { width, height } = this.app;
|
|
|
+ this.canvas = new Canvas(width, height, {
|
|
|
+ className: "grid"
|
|
|
+ });
|
|
|
+ this.ctx = this.canvas.ctx;
|
|
|
+ this.app.container.insertBefore(
|
|
|
+ this.canvas.el,
|
|
|
+ this.app.container.children[0]
|
|
|
+ );
|
|
|
+ }
|
|
|
+ drawHorizontalLine(i) {
|
|
|
+ let { coordinate, width, state } = this.app;
|
|
|
+ let _i = coordinate.subScrollY(i);
|
|
|
+ this.ctx.beginPath();
|
|
|
+ this.ctx.moveTo(-width / state.scale / 2, _i);
|
|
|
+ this.ctx.lineTo(width / state.scale / 2, _i);
|
|
|
+ this.ctx.stroke();
|
|
|
+ }
|
|
|
+ renderHorizontalLines() {
|
|
|
+ let { coordinate, height, state } = this.app;
|
|
|
+ let { gridConfig, scale } = state;
|
|
|
+ let maxBottom = 0;
|
|
|
+ for (let i = -height / 2; i < height / 2; i += gridConfig.size) {
|
|
|
+ this.drawHorizontalLine(i);
|
|
|
+ maxBottom = i;
|
|
|
+ }
|
|
|
+ for (let i = -height / 2 - gridConfig.size; i > -coordinate.subScrollY(height / scale / 2); i -= gridConfig.size) {
|
|
|
+ this.drawHorizontalLine(i);
|
|
|
+ }
|
|
|
+ for (let i = maxBottom + gridConfig.size; i < coordinate.addScrollY(height / scale / 2); i += gridConfig.size) {
|
|
|
+ this.drawHorizontalLine(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ drawVerticalLine(i) {
|
|
|
+ let { coordinate, height, state } = this.app;
|
|
|
+ let _i = coordinate.subScrollX(i);
|
|
|
+ this.ctx.beginPath();
|
|
|
+ this.ctx.moveTo(_i, -height / state.scale / 2);
|
|
|
+ this.ctx.lineTo(_i, height / state.scale / 2);
|
|
|
+ this.ctx.stroke();
|
|
|
+ }
|
|
|
+ renderVerticalLines() {
|
|
|
+ let { coordinate, width, state } = this.app;
|
|
|
+ let { gridConfig, scale } = state;
|
|
|
+ let maxRight = 0;
|
|
|
+ for (let i = -width / 2; i < width / 2; i += gridConfig.size) {
|
|
|
+ this.drawVerticalLine(i);
|
|
|
+ maxRight = i;
|
|
|
+ }
|
|
|
+ for (let i = -width / 2 - gridConfig.size; i > -coordinate.subScrollX(width / scale / 2); i -= gridConfig.size) {
|
|
|
+ this.drawVerticalLine(i);
|
|
|
+ }
|
|
|
+ for (let i = maxRight + gridConfig.size; i < coordinate.addScrollX(width / scale / 2); i += gridConfig.size) {
|
|
|
+ this.drawVerticalLine(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ renderGrid() {
|
|
|
+ this.canvas.clearCanvas();
|
|
|
+ let { gridConfig, scale, showGrid } = this.app.state;
|
|
|
+ if (!showGrid) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.ctx.save();
|
|
|
+ this.ctx.scale(scale, scale);
|
|
|
+ this.ctx.strokeStyle = gridConfig.strokeStyle;
|
|
|
+ this.ctx.lineWidth = gridConfig.lineWidth;
|
|
|
+ this.renderHorizontalLines();
|
|
|
+ this.renderVerticalLines();
|
|
|
+ this.ctx.restore();
|
|
|
+ }
|
|
|
+ showGrid() {
|
|
|
+ this.app.updateState({
|
|
|
+ showGrid: true
|
|
|
+ });
|
|
|
+ this.renderGrid();
|
|
|
+ }
|
|
|
+ hideGrid() {
|
|
|
+ this.app.updateState({
|
|
|
+ showGrid: false
|
|
|
+ });
|
|
|
+ this.canvas.clearCanvas();
|
|
|
+ }
|
|
|
+ updateGrid(config = {}) {
|
|
|
+ this.app.updateState({
|
|
|
+ gridConfig: __spreadValues(__spreadValues({}, this.app.state.gridConfig), config)
|
|
|
+ });
|
|
|
+ if (this.app.state.showGrid) {
|
|
|
+ this.hideGrid();
|
|
|
+ this.showGrid();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const map = {
|
|
|
+ Tab: 9,
|
|
|
+ Enter: 13,
|
|
|
+ Shift: 16,
|
|
|
+ Control: 17,
|
|
|
+ Alt: 18,
|
|
|
+ CapsLock: 20,
|
|
|
+ Esc: 27,
|
|
|
+ Space: 32,
|
|
|
+ PageUp: 33,
|
|
|
+ PageDown: 34,
|
|
|
+ End: 35,
|
|
|
+ Home: 36,
|
|
|
+ Insert: 45,
|
|
|
+ Left: 37,
|
|
|
+ Up: 38,
|
|
|
+ Right: 39,
|
|
|
+ Down: 40,
|
|
|
+ Del: 46,
|
|
|
+ NumLock: 144,
|
|
|
+ Cmd: 91,
|
|
|
+ CmdFF: 224,
|
|
|
+ F1: 112,
|
|
|
+ F2: 113,
|
|
|
+ F3: 114,
|
|
|
+ F4: 115,
|
|
|
+ F5: 116,
|
|
|
+ F6: 117,
|
|
|
+ F7: 118,
|
|
|
+ F8: 119,
|
|
|
+ F9: 120,
|
|
|
+ F10: 121,
|
|
|
+ F11: 122,
|
|
|
+ F12: 123,
|
|
|
+ "`": 192,
|
|
|
+ "=": 187,
|
|
|
+ "+": 187,
|
|
|
+ "-": 189,
|
|
|
+ "'": 222,
|
|
|
+ "/": 191,
|
|
|
+ ".": 190
|
|
|
+};
|
|
|
+for (let i = 0; i <= 9; i++) {
|
|
|
+ map[i] = i + 48;
|
|
|
+}
|
|
|
+"abcdefghijklmnopqrstuvwxyz".split("").forEach((n, index) => {
|
|
|
+ map[n] = index + 65;
|
|
|
+});
|
|
|
+const keyMap = map;
|
|
|
+class Mode {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.startScrollX = 0;
|
|
|
+ this.startScrollY = 0;
|
|
|
+ this.isDragMode = false;
|
|
|
+ this.onMove = throttle(this.onMove, this, 16);
|
|
|
+ this.bindEvent();
|
|
|
+ }
|
|
|
+ bindEvent() {
|
|
|
+ this.app.event.on("keydown", (e) => {
|
|
|
+ if (e.keyCode === keyMap.Space) {
|
|
|
+ this.isDragMode = true;
|
|
|
+ this.app.cursor.set("grab");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.app.event.on("keyup", (e) => {
|
|
|
+ if (this.isDragMode) {
|
|
|
+ this.isDragMode = false;
|
|
|
+ this.app.cursor.set("default");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ setEditMode() {
|
|
|
+ this.app.cursor.set("default");
|
|
|
+ this.app.updateState({
|
|
|
+ readonly: false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ setReadonlyMode() {
|
|
|
+ this.app.cursor.set("grab");
|
|
|
+ this.app.updateState({
|
|
|
+ readonly: true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ onStart() {
|
|
|
+ this.startScrollX = this.app.state.scrollX;
|
|
|
+ this.startScrollY = this.app.state.scrollY;
|
|
|
+ }
|
|
|
+ onMove(e, event) {
|
|
|
+ this.app.scrollTo(
|
|
|
+ this.startScrollX - event.mouseOffset.originX / this.app.state.scale,
|
|
|
+ this.startScrollY - event.mouseOffset.originY / this.app.state.scale
|
|
|
+ );
|
|
|
+ }
|
|
|
+ onEnd() {
|
|
|
+ this.startScrollX = 0;
|
|
|
+ this.startScrollY = 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+class KeyCommand {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.keyMap = keyMap;
|
|
|
+ this.shortcutMap = {};
|
|
|
+ this.bindEvent();
|
|
|
+ }
|
|
|
+ bindEvent() {
|
|
|
+ this.app.event.on("keydown", this.onKeydown, this);
|
|
|
+ }
|
|
|
+ unBindEvent() {
|
|
|
+ this.app.event.off("keydown", this.onKeydown);
|
|
|
+ }
|
|
|
+ onKeydown(e) {
|
|
|
+ Object.keys(this.shortcutMap).forEach((key) => {
|
|
|
+ if (this.checkKey(e, key)) {
|
|
|
+ e.stopPropagation();
|
|
|
+ e.preventDefault();
|
|
|
+ this.shortcutMap[key].forEach((f) => {
|
|
|
+ f.fn.call(f.ctx);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ checkKey(e, key) {
|
|
|
+ let o = this.getOriginEventCodeArr(e);
|
|
|
+ let k = this.getKeyCodeArr(key);
|
|
|
+ if (o.length !== k.length) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ for (let i = 0; i < o.length; i++) {
|
|
|
+ let index = k.findIndex((item) => {
|
|
|
+ return item === o[i];
|
|
|
+ });
|
|
|
+ if (index === -1) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ k.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ getOriginEventCodeArr(e) {
|
|
|
+ let arr = [];
|
|
|
+ if (e.ctrlKey || e.metaKey) {
|
|
|
+ arr.push(keyMap["Control"]);
|
|
|
+ }
|
|
|
+ if (e.altKey) {
|
|
|
+ arr.push(keyMap["Alt"]);
|
|
|
+ }
|
|
|
+ if (e.shiftKey) {
|
|
|
+ arr.push(keyMap["Shift"]);
|
|
|
+ }
|
|
|
+ if (!arr.includes(e.keyCode)) {
|
|
|
+ arr.push(e.keyCode);
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+ getKeyCodeArr(key) {
|
|
|
+ key = key.replace(/\+\+/, "+add");
|
|
|
+ let keyArr = key.split(/\s*\+\s*/).map((item) => {
|
|
|
+ return item === "add" ? "+" : item;
|
|
|
+ });
|
|
|
+ let arr = [];
|
|
|
+ keyArr.forEach((item) => {
|
|
|
+ arr.push(keyMap[item]);
|
|
|
+ });
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+ addShortcut(key, fn, ctx) {
|
|
|
+ key.split(/\s*\|\s*/).forEach((item) => {
|
|
|
+ if (this.shortcutMap[item]) {
|
|
|
+ this.shortcutMap[item].push({
|
|
|
+ fn,
|
|
|
+ ctx
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.shortcutMap[item] = [
|
|
|
+ {
|
|
|
+ fn,
|
|
|
+ ctx
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ removeShortcut(key, fn) {
|
|
|
+ key.split(/\s*\|\s*/).forEach((item) => {
|
|
|
+ if (this.shortcutMap[item]) {
|
|
|
+ if (fn) {
|
|
|
+ let index = this.shortcutMap[item].findIndex((f) => {
|
|
|
+ return f.fn === fn;
|
|
|
+ });
|
|
|
+ if (index !== -1) {
|
|
|
+ this.shortcutMap[item].splice(index, 1);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.shortcutMap[item] = [];
|
|
|
+ delete this.shortcutMap[item];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+class Render {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.beingCopyActiveElement = null;
|
|
|
+ this.beingCopySelectedElements = [];
|
|
|
+ this.registerShortcutKeys();
|
|
|
+ }
|
|
|
+ clearCanvas() {
|
|
|
+ let { width, height } = this.app;
|
|
|
+ this.app.ctx.clearRect(-width / 2, -height / 2, width, height);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ let { state } = this.app;
|
|
|
+ this.clearCanvas();
|
|
|
+ this.app.ctx.save();
|
|
|
+ this.app.ctx.scale(state.scale, state.scale);
|
|
|
+ this.app.elements.elementList.forEach((element) => {
|
|
|
+ if (element.noRender) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ element.render();
|
|
|
+ });
|
|
|
+ this.app.group.render();
|
|
|
+ this.app.ctx.restore();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ registerShortcutKeys() {
|
|
|
+ this.app.keyCommand.addShortcut("Del|Backspace", () => {
|
|
|
+ this.deleteCurrentElements();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+c", () => {
|
|
|
+ this.copyCurrentElement();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+x", () => {
|
|
|
+ this.cutCurrentElement();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+z", () => {
|
|
|
+ this.app.history.undo();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+y", () => {
|
|
|
+ this.app.history.redo();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+v", () => {
|
|
|
+ this.pasteCurrentElement(true);
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control++", () => {
|
|
|
+ this.zoomIn();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+-", () => {
|
|
|
+ this.zoomOut();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Shift+1", () => {
|
|
|
+ this.fit();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+a", () => {
|
|
|
+ this.selectAll();
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+0", () => {
|
|
|
+ this.setZoom(1);
|
|
|
+ });
|
|
|
+ this.app.keyCommand.addShortcut("Control+'", () => {
|
|
|
+ if (this.app.state.showGrid) {
|
|
|
+ this.app.grid.hideGrid();
|
|
|
+ } else {
|
|
|
+ this.app.grid.showGrid();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ copyCurrentElement() {
|
|
|
+ if (this.app.elements.activeElement) {
|
|
|
+ this.beingCopySelectedElements = [];
|
|
|
+ this.beingCopyElement = this.app.elements.activeElement;
|
|
|
+ } else if (this.app.selection.hasSelectionElements()) {
|
|
|
+ this.beingCopyElement = null;
|
|
|
+ this.beingCopySelectedElements = this.app.selection.getSelectionElements();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ cutCurrentElement() {
|
|
|
+ if (this.app.elements.activeElement) {
|
|
|
+ this.copyCurrentElement();
|
|
|
+ this.deleteCurrentElements();
|
|
|
+ } else if (this.app.selection.hasSelectionElements()) {
|
|
|
+ this.copyCurrentElement();
|
|
|
+ this.deleteCurrentElements();
|
|
|
+ this.app.selection.setMultiSelectElements(this.beingCopySelectedElements);
|
|
|
+ this.app.selection.emitChange();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ pasteCurrentElement(useCurrentEventPos = false) {
|
|
|
+ let pos = null;
|
|
|
+ if (useCurrentEventPos) {
|
|
|
+ let x = this.app.event.lastMousePos.x;
|
|
|
+ let y = this.app.event.lastMousePos.y;
|
|
|
+ pos = {
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (this.beingCopyElement) {
|
|
|
+ this.copyElement(this.beingCopyElement, false, pos);
|
|
|
+ } else if (this.beingCopySelectedElements.length > 0) {
|
|
|
+ this.app.selection.selectElements(this.beingCopySelectedElements);
|
|
|
+ this.app.selection.copySelectionElements(useCurrentEventPos ? pos : null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ deleteElement(element) {
|
|
|
+ this.app.elements.deleteElement(element);
|
|
|
+ this.render();
|
|
|
+ this.app.emitChange();
|
|
|
+ }
|
|
|
+ copyElement(element, notActive = false, pos) {
|
|
|
+ return __async(this, null, function* () {
|
|
|
+ this.app.elements.cancelActiveElement();
|
|
|
+ yield this.app.elements.copyElement(element, notActive, pos);
|
|
|
+ this.app.group.clearCopyMap();
|
|
|
+ this.render();
|
|
|
+ this.app.emitChange();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ deleteActiveElement() {
|
|
|
+ if (!this.app.elements.hasActiveElement()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.deleteElement(this.app.elements.activeElement);
|
|
|
+ }
|
|
|
+ deleteCurrentElements() {
|
|
|
+ this.deleteActiveElement();
|
|
|
+ this.app.selection.deleteSelectedElements();
|
|
|
+ }
|
|
|
+ moveUpCurrentElement() {
|
|
|
+ this.moveLevelCurrentElement("up");
|
|
|
+ }
|
|
|
+ moveDownCurrentElement() {
|
|
|
+ this.moveLevelCurrentElement("down");
|
|
|
+ }
|
|
|
+ moveTopCurrentElement() {
|
|
|
+ this.moveLevelCurrentElement("top");
|
|
|
+ }
|
|
|
+ moveBottomCurrentElement() {
|
|
|
+ this.moveLevelCurrentElement("bottom");
|
|
|
+ }
|
|
|
+ moveLevelCurrentElement(level) {
|
|
|
+ let element = null;
|
|
|
+ if (this.app.elements.hasActiveElement()) {
|
|
|
+ element = this.app.elements.activeElement;
|
|
|
+ } else if (this.app.selection.getSelectionElements().length === 1) {
|
|
|
+ element = this.app.selection.getSelectionElements()[0];
|
|
|
+ }
|
|
|
+ if (!element) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let index = this.app.elements.getElementIndex(element);
|
|
|
+ this.app.elements.elementList.splice(index, 1);
|
|
|
+ if (level === "up") {
|
|
|
+ this.app.elements.insertElement(element, index + 1);
|
|
|
+ } else if (level === "down") {
|
|
|
+ this.app.elements.insertElement(element, index - 1);
|
|
|
+ } else if (level === "top") {
|
|
|
+ this.app.elements.addElement(element);
|
|
|
+ } else if (level === "bottom") {
|
|
|
+ this.app.elements.unshiftElement(element);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setActiveElementStyle(style = {}) {
|
|
|
+ if (!this.app.elements.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.app.elements.setActiveElementStyle(style);
|
|
|
+ this.render();
|
|
|
+ if (!this.app.elements.isCreatingElement) {
|
|
|
+ this.app.emitChange();
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ setCurrentElementsStyle(style = {}) {
|
|
|
+ this.setActiveElementStyle(style);
|
|
|
+ this.app.selection.setSelectedElementStyle(style);
|
|
|
+ }
|
|
|
+ cancelActiveElement() {
|
|
|
+ if (!this.app.elements.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.app.elements.cancelActiveElement();
|
|
|
+ this.render();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateActiveElementPosition(x, y) {
|
|
|
+ if (!this.app.elements.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.app.elements.activeElement.updatePos(x, y);
|
|
|
+ this.render();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateActiveElementSize(width, height) {
|
|
|
+ if (!this.app.elements.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.app.elements.activeElement.updateSize(width, height);
|
|
|
+ this.render();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ updateActiveElementRotate(rotate) {
|
|
|
+ if (!this.app.elements.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.app.elements.activeElement.updateRotate(rotate);
|
|
|
+ this.render();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ empty() {
|
|
|
+ this.app.elements.deleteAllElements();
|
|
|
+ this.render();
|
|
|
+ this.app.history.clear();
|
|
|
+ this.app.emitChange();
|
|
|
+ }
|
|
|
+ zoomIn(num = 0.1) {
|
|
|
+ this.app.updateState({
|
|
|
+ scale: this.app.state.scale + num
|
|
|
+ });
|
|
|
+ this.render();
|
|
|
+ this.app.emit("zoomChange", this.app.state.scale);
|
|
|
+ }
|
|
|
+ zoomOut(num = 0.1) {
|
|
|
+ this.app.updateState({
|
|
|
+ scale: this.app.state.scale - num > 0 ? this.app.state.scale - num : 0
|
|
|
+ });
|
|
|
+ this.render();
|
|
|
+ this.app.emit("zoomChange", this.app.state.scale);
|
|
|
+ }
|
|
|
+ setZoom(zoom) {
|
|
|
+ if (zoom < 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.app.updateState({
|
|
|
+ scale: zoom
|
|
|
+ });
|
|
|
+ this.render();
|
|
|
+ this.app.emit("zoomChange", this.app.state.scale);
|
|
|
+ }
|
|
|
+ fit() {
|
|
|
+ if (!this.app.elements.hasElements()) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.scrollToCenter();
|
|
|
+ let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
|
|
|
+ this.app.elements.elementList
|
|
|
+ );
|
|
|
+ let width = maxx - minx;
|
|
|
+ let height = maxy - miny;
|
|
|
+ let maxScale = Math.min(this.app.width / width, this.app.height / height);
|
|
|
+ console.log(maxScale);
|
|
|
+ this.setZoom(maxScale);
|
|
|
+ }
|
|
|
+ scrollTo(scrollX, scrollY) {
|
|
|
+ this.app.updateState({
|
|
|
+ scrollX,
|
|
|
+ scrollY
|
|
|
+ });
|
|
|
+ this.render();
|
|
|
+ this.app.emit(
|
|
|
+ "scrollChange",
|
|
|
+ this.app.state.scrollX,
|
|
|
+ this.app.state.scrollY
|
|
|
+ );
|
|
|
+ }
|
|
|
+ scrollToCenter() {
|
|
|
+ if (!this.app.elements.hasElements()) {
|
|
|
+ this.scrollTo(0, 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
|
|
|
+ this.app.elements.elementList
|
|
|
+ );
|
|
|
+ let width = maxx - minx;
|
|
|
+ let height = maxy - miny;
|
|
|
+ this.scrollTo(
|
|
|
+ minx - (this.app.width - width) / 2,
|
|
|
+ miny - (this.app.height - height) / 2
|
|
|
+ );
|
|
|
+ }
|
|
|
+ copyPasteCurrentElements() {
|
|
|
+ this.copyCurrentElement();
|
|
|
+ this.pasteCurrentElement();
|
|
|
+ }
|
|
|
+ setBackgroundColor(color) {
|
|
|
+ this.app.updateState({
|
|
|
+ backgroundColor: color
|
|
|
+ });
|
|
|
+ this.app.background.set();
|
|
|
+ }
|
|
|
+ selectAll() {
|
|
|
+ this.app.selection.selectElements(this.app.elements.elementList);
|
|
|
+ }
|
|
|
+}
|
|
|
+class Elements {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.elementList = [];
|
|
|
+ this.activeElement = null;
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ this.isResizing = false;
|
|
|
+ this.resizingElement = null;
|
|
|
+ this.handleResize = throttle(this.handleResize, this, 16);
|
|
|
+ }
|
|
|
+ serialize(stringify = false) {
|
|
|
+ let data = this.elementList.map((element) => {
|
|
|
+ return element.serialize();
|
|
|
+ });
|
|
|
+ return stringify ? JSON.stringify(data) : data;
|
|
|
+ }
|
|
|
+ getElementsNum() {
|
|
|
+ return this.elementList.length;
|
|
|
+ }
|
|
|
+ hasElements() {
|
|
|
+ return this.elementList.length > 0;
|
|
|
+ }
|
|
|
+ addElement(element) {
|
|
|
+ this.elementList.push(element);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ unshiftElement(element) {
|
|
|
+ this.elementList.unshift(element);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ insertElement(element, index) {
|
|
|
+ this.elementList.splice(index, 0, element);
|
|
|
+ }
|
|
|
+ deleteElement(element) {
|
|
|
+ let index = this.getElementIndex(element);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.elementList.splice(index, 1);
|
|
|
+ if (element.isActive) {
|
|
|
+ this.cancelActiveElement(element);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ deleteAllElements() {
|
|
|
+ this.activeElement = null;
|
|
|
+ this.elementList = [];
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ this.isResizing = false;
|
|
|
+ this.resizingElement = null;
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ getElementIndex(element) {
|
|
|
+ return this.elementList.findIndex((item) => {
|
|
|
+ return item === element;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ createElementsFromData(data) {
|
|
|
+ data.forEach((item) => {
|
|
|
+ let element = this.pureCreateElement(item);
|
|
|
+ element.isActive = false;
|
|
|
+ element.isCreating = false;
|
|
|
+ this.addElement(element);
|
|
|
+ });
|
|
|
+ this.app.group.initIdToElementList(this.elementList);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ hasActiveElement() {
|
|
|
+ return !!this.activeElement;
|
|
|
+ }
|
|
|
+ setActiveElement(element) {
|
|
|
+ this.cancelActiveElement();
|
|
|
+ this.activeElement = element;
|
|
|
+ if (element) {
|
|
|
+ element.isActive = true;
|
|
|
+ }
|
|
|
+ this.app.emit("activeElementChange", this.activeElement);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ cancelActiveElement() {
|
|
|
+ if (!this.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.activeElement.isActive = false;
|
|
|
+ this.activeElement = null;
|
|
|
+ this.app.emit("activeElementChange", this.activeElement);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ checkIsHitElement(e) {
|
|
|
+ let x = e.unGridClientX;
|
|
|
+ let y = e.unGridClientY;
|
|
|
+ for (let i = this.elementList.length - 1; i >= 0; i--) {
|
|
|
+ let element = this.elementList[i];
|
|
|
+ if (element.isHit(x, y)) {
|
|
|
+ return element;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ pureCreateElement(opts = {}) {
|
|
|
+ switch (opts.type) {
|
|
|
+ case "rectangle":
|
|
|
+ return new Rectangle(opts, this.app);
|
|
|
+ case "diamond":
|
|
|
+ return new Diamond(opts, this.app);
|
|
|
+ case "triangle":
|
|
|
+ return new Triangle(opts, this.app);
|
|
|
+ case "circle":
|
|
|
+ return new Circle(opts, this.app);
|
|
|
+ case "freedraw":
|
|
|
+ return new Freedraw(opts, this.app);
|
|
|
+ case "image":
|
|
|
+ return new Image$1(opts, this.app);
|
|
|
+ case "arrow":
|
|
|
+ return new Arrow(opts, this.app);
|
|
|
+ case "line":
|
|
|
+ return new Line(opts, this.app);
|
|
|
+ case "text":
|
|
|
+ return new Text(opts, this.app);
|
|
|
+ default:
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ createElement(opts = {}, callback = () => {
|
|
|
+ }, ctx = null, notActive) {
|
|
|
+ if (this.hasActiveElement() || this.isCreatingElement) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ let element = this.pureCreateElement(opts);
|
|
|
+ if (!element) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ this.addElement(element);
|
|
|
+ if (!notActive) {
|
|
|
+ this.setActiveElement(element);
|
|
|
+ }
|
|
|
+ this.isCreatingElement = true;
|
|
|
+ callback.call(ctx, element);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ copyElement(element, notActive = false, pos) {
|
|
|
+ return new Promise((resolve) => __async(this, null, function* () {
|
|
|
+ if (!element) {
|
|
|
+ return resolve();
|
|
|
+ }
|
|
|
+ let data = this.app.group.handleCopyElementData(element.serialize());
|
|
|
+ if (data.type === "image") {
|
|
|
+ data.imageObj = yield createImageObj(data.url);
|
|
|
+ }
|
|
|
+ this.createElement(
|
|
|
+ data,
|
|
|
+ (element2) => {
|
|
|
+ this.app.group.handleCopyElement(element2);
|
|
|
+ element2.startResize(DRAG_ELEMENT_PARTS.BODY);
|
|
|
+ let ox = 20;
|
|
|
+ let oy = 20;
|
|
|
+ if (pos) {
|
|
|
+ ox = pos.x - element2.x - element2.width / 2;
|
|
|
+ oy = pos.y - element2.y - element2.height / 2;
|
|
|
+ }
|
|
|
+ let gridAdsorbentPos = this.app.coordinate.gridAdsorbent(ox, oy);
|
|
|
+ element2.resize(
|
|
|
+ null,
|
|
|
+ null,
|
|
|
+ null,
|
|
|
+ gridAdsorbentPos.x,
|
|
|
+ gridAdsorbentPos.y
|
|
|
+ );
|
|
|
+ element2.isCreating = false;
|
|
|
+ if (notActive) {
|
|
|
+ element2.isActive = false;
|
|
|
+ }
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ resolve(element2);
|
|
|
+ },
|
|
|
+ this,
|
|
|
+ notActive
|
|
|
+ );
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ creatingRectangleLikeElement(type, x, y, offsetX, offsetY) {
|
|
|
+ this.createElement({
|
|
|
+ type,
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ width: offsetX,
|
|
|
+ height: offsetY
|
|
|
+ });
|
|
|
+ this.activeElement.updateSize(offsetX, offsetY);
|
|
|
+ }
|
|
|
+ creatingCircle(x, y, e) {
|
|
|
+ this.createElement({
|
|
|
+ type: "circle",
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ });
|
|
|
+ let radius = getTowPointDistance(e.clientX, e.clientY, x, y);
|
|
|
+ this.activeElement.updateSize(radius, radius);
|
|
|
+ }
|
|
|
+ creatingFreedraw(e, event) {
|
|
|
+ this.createElement({
|
|
|
+ type: "freedraw"
|
|
|
+ });
|
|
|
+ let element = this.activeElement;
|
|
|
+ let lineWidth = computedLineWidthBySpeed(
|
|
|
+ event.mouseSpeed,
|
|
|
+ element.lastLineWidth
|
|
|
+ );
|
|
|
+ element.lastLineWidth = lineWidth;
|
|
|
+ element.addPoint(e.clientX, e.clientY, lineWidth);
|
|
|
+ let { coordinate, ctx, state } = this.app;
|
|
|
+ let tfp = coordinate.transformToCanvasCoordinate(
|
|
|
+ coordinate.subScrollX(event.lastMousePos.x),
|
|
|
+ coordinate.subScrollY(event.lastMousePos.y)
|
|
|
+ );
|
|
|
+ let ttp = coordinate.transformToCanvasCoordinate(
|
|
|
+ coordinate.subScrollX(e.clientX),
|
|
|
+ coordinate.subScrollY(e.clientY)
|
|
|
+ );
|
|
|
+ ctx.save();
|
|
|
+ ctx.scale(state.scale, state.scale);
|
|
|
+ element.singleRender(tfp.x, tfp.y, ttp.x, ttp.y, lineWidth);
|
|
|
+ ctx.restore();
|
|
|
+ }
|
|
|
+ creatingImage(e, { width, height, imageObj, url, ratio }) {
|
|
|
+ let gp = this.app.coordinate.gridAdsorbent(
|
|
|
+ e.unGridClientX - width / 2,
|
|
|
+ e.unGridClientY - height / 2
|
|
|
+ );
|
|
|
+ this.createElement({
|
|
|
+ type: "image",
|
|
|
+ x: gp.x,
|
|
|
+ y: gp.y,
|
|
|
+ url,
|
|
|
+ imageObj,
|
|
|
+ width,
|
|
|
+ height,
|
|
|
+ ratio
|
|
|
+ });
|
|
|
+ }
|
|
|
+ editingText(element) {
|
|
|
+ if (element.type !== "text") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ element.noRender = true;
|
|
|
+ this.setActiveElement(element);
|
|
|
+ }
|
|
|
+ completeEditingText() {
|
|
|
+ let element = this.activeElement;
|
|
|
+ if (!element || element.type !== "text") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!element.text.trim()) {
|
|
|
+ this.deleteElement(element);
|
|
|
+ this.setActiveElement(null);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ element.noRender = false;
|
|
|
+ }
|
|
|
+ completeCreateArrow(e) {
|
|
|
+ this.activeElement.addPoint(e.clientX, e.clientY);
|
|
|
+ }
|
|
|
+ creatingArrow(x, y, e) {
|
|
|
+ this.createElement(
|
|
|
+ {
|
|
|
+ type: "arrow",
|
|
|
+ x,
|
|
|
+ y
|
|
|
+ },
|
|
|
+ (element) => {
|
|
|
+ element.addPoint(x, y);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.activeElement.updateFictitiousPoint(e.clientX, e.clientY);
|
|
|
+ }
|
|
|
+ creatingLine(x, y, e, isSingle = false, notCreate = false) {
|
|
|
+ if (!notCreate) {
|
|
|
+ this.createElement(
|
|
|
+ {
|
|
|
+ type: "line",
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ isSingle
|
|
|
+ },
|
|
|
+ (element2) => {
|
|
|
+ element2.addPoint(x, y);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ let element = this.activeElement;
|
|
|
+ if (element) {
|
|
|
+ element.updateFictitiousPoint(e.clientX, e.clientY);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ completeCreateLine(e, completeCallback = () => {
|
|
|
+ }) {
|
|
|
+ let element = this.activeElement;
|
|
|
+ let x = e.clientX;
|
|
|
+ let y = e.clientY;
|
|
|
+ if (element && element.isSingle) {
|
|
|
+ element.addPoint(x, y);
|
|
|
+ completeCallback();
|
|
|
+ } else {
|
|
|
+ this.createElement({
|
|
|
+ type: "line",
|
|
|
+ isSingle: false
|
|
|
+ });
|
|
|
+ element = this.activeElement;
|
|
|
+ element.addPoint(x, y);
|
|
|
+ element.updateFictitiousPoint(x, y);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ completeCreateElement() {
|
|
|
+ this.isCreatingElement = false;
|
|
|
+ let element = this.activeElement;
|
|
|
+ if (!element) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ if (["freedraw", "arrow", "line"].includes(element.type)) {
|
|
|
+ element.updateMultiPointBoundingRect();
|
|
|
+ }
|
|
|
+ element.isCreating = false;
|
|
|
+ this.app.emitChange();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ setActiveElementStyle(style = {}) {
|
|
|
+ if (!this.hasActiveElement()) {
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ Object.keys(style).forEach((key) => {
|
|
|
+ this.activeElement.style[key] = style[key];
|
|
|
+ if (key === "fontSize" && this.activeElement.type === "text") {
|
|
|
+ this.activeElement.updateTextSize();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ checkInResizeHand(x, y) {
|
|
|
+ let element = this.activeElement;
|
|
|
+ let hand = element.dragElement.checkPointInDragElementWhere(x, y);
|
|
|
+ if (hand) {
|
|
|
+ return {
|
|
|
+ element,
|
|
|
+ hand
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ checkIsResize(x, y, e) {
|
|
|
+ if (!this.hasActiveElement()) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let res = this.checkInResizeHand(x, y);
|
|
|
+ if (res) {
|
|
|
+ this.isResizing = true;
|
|
|
+ this.resizingElement = res.element;
|
|
|
+ this.resizingElement.startResize(res.hand, e);
|
|
|
+ this.app.cursor.setResize(res.hand);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ handleResize(...args) {
|
|
|
+ if (!this.isResizing) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.resizingElement.resize(...args);
|
|
|
+ this.app.render.render();
|
|
|
+ }
|
|
|
+ endResize() {
|
|
|
+ this.isResizing = false;
|
|
|
+ this.resizingElement.endResize();
|
|
|
+ this.resizingElement = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+let getRandomValues;
|
|
|
+const rnds8 = new Uint8Array(16);
|
|
|
+function rng() {
|
|
|
+ if (!getRandomValues) {
|
|
|
+ getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
|
|
|
+ if (!getRandomValues) {
|
|
|
+ throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return getRandomValues(rnds8);
|
|
|
+}
|
|
|
+const byteToHex = [];
|
|
|
+for (let i = 0; i < 256; ++i) {
|
|
|
+ byteToHex.push((i + 256).toString(16).slice(1));
|
|
|
+}
|
|
|
+function unsafeStringify(arr, offset = 0) {
|
|
|
+ return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
|
|
|
+}
|
|
|
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
|
|
|
+var native = {
|
|
|
+ randomUUID
|
|
|
+};
|
|
|
+function v4(options, buf, offset) {
|
|
|
+ if (native.randomUUID && !buf && !options) {
|
|
|
+ return native.randomUUID();
|
|
|
+ }
|
|
|
+ options = options || {};
|
|
|
+ const rnds = options.random || (options.rng || rng)();
|
|
|
+ rnds[6] = rnds[6] & 15 | 64;
|
|
|
+ rnds[8] = rnds[8] & 63 | 128;
|
|
|
+ if (buf) {
|
|
|
+ offset = offset || 0;
|
|
|
+ for (let i = 0; i < 16; ++i) {
|
|
|
+ buf[offset + i] = rnds[i];
|
|
|
+ }
|
|
|
+ return buf;
|
|
|
+ }
|
|
|
+ return unsafeStringify(rnds);
|
|
|
+}
|
|
|
+class Group {
|
|
|
+ constructor(app) {
|
|
|
+ this.app = app;
|
|
|
+ this.groupIdToElementList = {};
|
|
|
+ this.newGroupIdMap = {};
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ Object.keys(this.groupIdToElementList).forEach((groupId) => {
|
|
|
+ let group = this.groupIdToElementList[groupId];
|
|
|
+ let selected = group[0].isSelected;
|
|
|
+ if (selected) {
|
|
|
+ let mElement = new MultiSelectElement(
|
|
|
+ {
|
|
|
+ type: "multiSelectElement"
|
|
|
+ },
|
|
|
+ this.app
|
|
|
+ );
|
|
|
+ mElement.setSelectedElementList(group);
|
|
|
+ mElement.updateRect();
|
|
|
+ mElement.dragElement.onlyShowBody();
|
|
|
+ mElement.render();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ setToMap(element) {
|
|
|
+ let groupId = element.getGroupId();
|
|
|
+ if (groupId) {
|
|
|
+ if (!this.groupIdToElementList[groupId]) {
|
|
|
+ this.groupIdToElementList[groupId] = [];
|
|
|
+ }
|
|
|
+ this.groupIdToElementList[groupId].push(element);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ initIdToElementList(elementList) {
|
|
|
+ this.groupIdToElementList = {};
|
|
|
+ elementList.forEach((element) => {
|
|
|
+ this.setToMap(element);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handleCopyElementData(data) {
|
|
|
+ if (data.groupId) {
|
|
|
+ if (this.newGroupIdMap[data.groupId]) {
|
|
|
+ data.groupId = this.newGroupIdMap[data.groupId];
|
|
|
+ } else {
|
|
|
+ data.groupId = this.newGroupIdMap[data.groupId] = v4();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ }
|
|
|
+ clearCopyMap() {
|
|
|
+ this.newGroupIdMap = {};
|
|
|
+ }
|
|
|
+ handleCopyElement(element) {
|
|
|
+ this.setToMap(element);
|
|
|
+ }
|
|
|
+ dogroup() {
|
|
|
+ if (!this.app.selection.hasSelection || this.app.selection.multiSelectElement.selectedElementList.length <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let groupElement = this.app.selection.multiSelectElement.selectedElementList;
|
|
|
+ let groupId = v4();
|
|
|
+ this.groupIdToElementList[groupId] = groupElement;
|
|
|
+ groupElement.forEach((element) => {
|
|
|
+ element.setGroupId(groupId);
|
|
|
+ });
|
|
|
+ this.app.render.render();
|
|
|
+ this.app.emitChange();
|
|
|
+ }
|
|
|
+ ungroup() {
|
|
|
+ if (!this.app.selection.hasSelection || this.app.selection.multiSelectElement.selectedElementList.length <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let groupElement = this.app.selection.multiSelectElement.selectedElementList;
|
|
|
+ let groupId = groupElement[0].getGroupId();
|
|
|
+ this.groupIdToElementList[groupId] = [];
|
|
|
+ delete this.groupIdToElementList[groupId];
|
|
|
+ groupElement.forEach((element) => {
|
|
|
+ element.removeGroupId(groupId);
|
|
|
+ });
|
|
|
+ this.app.render.render();
|
|
|
+ this.app.emitChange();
|
|
|
+ }
|
|
|
+ setSelection(element) {
|
|
|
+ let groupId = element.getGroupId();
|
|
|
+ if (this.groupIdToElementList[groupId]) {
|
|
|
+ this.app.selection.selectElements(this.groupIdToElementList[groupId]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getGroupElements(element) {
|
|
|
+ let groupId = element.getGroupId();
|
|
|
+ return this.groupIdToElementList[groupId] || [];
|
|
|
+ }
|
|
|
+}
|
|
|
+class TinyWhiteboard extends EventEmitter {
|
|
|
+ constructor(opts = {}) {
|
|
|
+ super();
|
|
|
+ this.opts = opts;
|
|
|
+ this.container = opts.container;
|
|
|
+ this.drawType = opts.drawType || "selection";
|
|
|
+ if (!this.container) {
|
|
|
+ throw new Error("\u7F3A\u5C11 container \u53C2\u6570\uFF01");
|
|
|
+ }
|
|
|
+ if (!["absolute", "fixed", "relative"].includes(
|
|
|
+ window.getComputedStyle(this.container).position
|
|
|
+ )) {
|
|
|
+ throw new Error("container\u5143\u7D20\u9700\u8981\u8BBE\u7F6E\u5B9A\u4F4D\uFF01");
|
|
|
+ }
|
|
|
+ this.width = 0;
|
|
|
+ this.height = 0;
|
|
|
+ this.left = 0;
|
|
|
+ this.top = 0;
|
|
|
+ this.canvas = null;
|
|
|
+ this.ctx = null;
|
|
|
+ this.state = __spreadValues({
|
|
|
+ scale: 1,
|
|
|
+ scrollX: 0,
|
|
|
+ scrollY: 0,
|
|
|
+ scrollStep: 50,
|
|
|
+ backgroundColor: "",
|
|
|
+ strokeStyle: "#000000",
|
|
|
+ fillStyle: "transparent",
|
|
|
+ fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Microsoft YaHei",
|
|
|
+ fontSize: 18,
|
|
|
+ dragStrokeStyle: "#666",
|
|
|
+ showGrid: false,
|
|
|
+ readonly: false,
|
|
|
+ gridConfig: {
|
|
|
+ size: 20,
|
|
|
+ strokeStyle: "#dfe0e1",
|
|
|
+ lineWidth: 1
|
|
|
+ }
|
|
|
+ }, opts.state || {});
|
|
|
+ this.initCanvas();
|
|
|
+ this.coordinate = new Coordinate(this);
|
|
|
+ this.event = new Event(this);
|
|
|
+ this.event.on("mousedown", this.onMousedown, this);
|
|
|
+ this.event.on("mousemove", this.onMousemove, this);
|
|
|
+ this.event.on("mouseup", this.onMouseup, this);
|
|
|
+ this.event.on("dblclick", this.onDblclick, this);
|
|
|
+ this.event.on("mousewheel", this.onMousewheel, this);
|
|
|
+ this.event.on("contextmenu", this.onContextmenu, this);
|
|
|
+ this.keyCommand = new KeyCommand(this);
|
|
|
+ this.imageEdit = new ImageEdit(this);
|
|
|
+ this.imageEdit.on("imageSelectChange", this.onImageSelectChange, this);
|
|
|
+ this.textEdit = new TextEdit(this);
|
|
|
+ this.textEdit.on("blur", this.onTextInputBlur, this);
|
|
|
+ this.cursor = new Cursor(this);
|
|
|
+ this.history = new History(this);
|
|
|
+ this.export = new Export(this);
|
|
|
+ this.background = new Background(this);
|
|
|
+ this.selection = new Selection(this);
|
|
|
+ this.group = new Group(this);
|
|
|
+ this.grid = new Grid(this);
|
|
|
+ this.mode = new Mode(this);
|
|
|
+ this.elements = new Elements$1(this);
|
|
|
+ this.render = new Render(this);
|
|
|
+ this.proxy();
|
|
|
+ this.checkIsOnElement = throttle(this.checkIsOnElement, this);
|
|
|
+ this.emitChange();
|
|
|
+ this.helpUpdate();
|
|
|
+ }
|
|
|
+ proxy() {
|
|
|
+ ["undo", "redo"].forEach((method) => {
|
|
|
+ this[method] = this.history[method].bind(this.history);
|
|
|
+ });
|
|
|
+ [].forEach((method) => {
|
|
|
+ this[method] = this.elements[method].bind(this.elements);
|
|
|
+ });
|
|
|
+ [
|
|
|
+ "deleteElement",
|
|
|
+ "setActiveElementStyle",
|
|
|
+ "setCurrentElementsStyle",
|
|
|
+ "cancelActiveElement",
|
|
|
+ "deleteActiveElement",
|
|
|
+ "deleteCurrentElements",
|
|
|
+ "empty",
|
|
|
+ "zoomIn",
|
|
|
+ "zoomOut",
|
|
|
+ "setZoom",
|
|
|
+ "scrollTo",
|
|
|
+ "scrollToCenter",
|
|
|
+ "copyPasteCurrentElements",
|
|
|
+ "setBackgroundColor",
|
|
|
+ "copyElement",
|
|
|
+ "copyCurrentElement",
|
|
|
+ "cutCurrentElement",
|
|
|
+ "pasteCurrentElement",
|
|
|
+ "updateActiveElementRotate",
|
|
|
+ "updateActiveElementSize",
|
|
|
+ "updateActiveElementPosition",
|
|
|
+ "moveBottomCurrentElement",
|
|
|
+ "moveTopCurrentElement",
|
|
|
+ "moveUpCurrentElement",
|
|
|
+ "moveDownCurrentElement",
|
|
|
+ "selectAll",
|
|
|
+ "fit"
|
|
|
+ ].forEach((method) => {
|
|
|
+ this[method] = this.render[method].bind(this.render);
|
|
|
+ });
|
|
|
+ ["exportImage", "exportJson"].forEach((method) => {
|
|
|
+ this[method] = this.export[method].bind(this.export);
|
|
|
+ });
|
|
|
+ ["setSelectedElementStyle"].forEach((method) => {
|
|
|
+ this[method] = this.selection[method].bind(this.selection);
|
|
|
+ });
|
|
|
+ ["dogroup", "ungroup"].forEach((method) => {
|
|
|
+ this[method] = this.group[method].bind(this.group);
|
|
|
+ });
|
|
|
+ ["showGrid", "hideGrid", "updateGrid"].forEach((method) => {
|
|
|
+ this[method] = this.grid[method].bind(this.grid);
|
|
|
+ });
|
|
|
+ ["setEditMode", "setReadonlyMode"].forEach((method) => {
|
|
|
+ this[method] = this.mode[method].bind(this.mode);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ getContainerRectInfo() {
|
|
|
+ let { width, height, left, top } = this.container.getBoundingClientRect();
|
|
|
+ this.width = width;
|
|
|
+ this.height = height;
|
|
|
+ this.left = left;
|
|
|
+ this.top = top;
|
|
|
+ }
|
|
|
+ helpUpdate() {
|
|
|
+ this.background.set();
|
|
|
+ if (this.state.showGrid) {
|
|
|
+ this.grid.showGrid();
|
|
|
+ }
|
|
|
+ if (this.state.readonly) {
|
|
|
+ this.setReadonlyMode();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setData(_0, _1) {
|
|
|
+ return __async(this, arguments, function* ({ state = {}, elements = [] }, noEmitChange) {
|
|
|
+ this.state = state;
|
|
|
+ for (let i = 0; i < elements.length; i++) {
|
|
|
+ if (elements[i].type === "image") {
|
|
|
+ elements[i].imageObj = yield createImageObj(elements[i].url);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.helpUpdate();
|
|
|
+ this.elements.deleteAllElements().createElementsFromData(elements);
|
|
|
+ this.render.render();
|
|
|
+ if (!noEmitChange) {
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ initCanvas() {
|
|
|
+ this.getContainerRectInfo();
|
|
|
+ if (this.canvas) {
|
|
|
+ this.container.removeChild(this.canvas);
|
|
|
+ }
|
|
|
+ let { canvas, ctx } = createCanvas(this.width, this.height, {
|
|
|
+ className: "main"
|
|
|
+ });
|
|
|
+ this.canvas = canvas;
|
|
|
+ this.ctx = ctx;
|
|
|
+ this.container.appendChild(this.canvas);
|
|
|
+ }
|
|
|
+ resize() {
|
|
|
+ this.initCanvas();
|
|
|
+ this.render.render();
|
|
|
+ this.selection.init();
|
|
|
+ this.grid.init();
|
|
|
+ this.grid.renderGrid();
|
|
|
+ }
|
|
|
+ updateState(data = {}) {
|
|
|
+ this.state = __spreadValues(__spreadValues({}, this.state), data);
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ updateCurrentType(drawType) {
|
|
|
+ this.drawType = drawType;
|
|
|
+ if (this.drawType === "image") {
|
|
|
+ this.imageEdit.selectImage();
|
|
|
+ }
|
|
|
+ if (this.drawType === "eraser") {
|
|
|
+ this.cursor.setEraser();
|
|
|
+ this.cancelActiveElement();
|
|
|
+ } else if (this.drawType !== "selection") {
|
|
|
+ this.cursor.setCrosshair();
|
|
|
+ } else {
|
|
|
+ this.cursor.reset();
|
|
|
+ }
|
|
|
+ this.emit("currentTypeChange", this.drawType);
|
|
|
+ }
|
|
|
+ getData() {
|
|
|
+ return {
|
|
|
+ state: __spreadValues({}, this.state),
|
|
|
+ elements: this.elements.serialize()
|
|
|
+ };
|
|
|
+ }
|
|
|
+ onImageSelectChange() {
|
|
|
+ this.cursor.hide();
|
|
|
+ }
|
|
|
+ onMousedown(e, event) {
|
|
|
+ if (this.state.readonly || this.mode.isDragMode) {
|
|
|
+ this.mode.onStart();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.elements.isCreatingElement && !this.textEdit.isEditing) {
|
|
|
+ let hitElement = this.elements.checkIsHitElement(e);
|
|
|
+ if (this.drawType === "selection") {
|
|
|
+ if (this.elements.hasActiveElement()) {
|
|
|
+ let isResizing = this.elements.checkIsResize(
|
|
|
+ event.mousedownPos.unGridClientX,
|
|
|
+ event.mousedownPos.unGridClientY,
|
|
|
+ e
|
|
|
+ );
|
|
|
+ if (!isResizing) {
|
|
|
+ this.elements.setActiveElement(hitElement);
|
|
|
+ this.render.render();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.selection.hasSelection) {
|
|
|
+ let isResizing = this.selection.checkIsResize(
|
|
|
+ event.mousedownPos.unGridClientX,
|
|
|
+ event.mousedownPos.unGridClientY,
|
|
|
+ e
|
|
|
+ );
|
|
|
+ if (!isResizing) {
|
|
|
+ this.selection.reset();
|
|
|
+ this.elements.setActiveElement(hitElement);
|
|
|
+ this.render.render();
|
|
|
+ }
|
|
|
+ } else if (hitElement) {
|
|
|
+ if (hitElement.hasGroup()) {
|
|
|
+ this.group.setSelection(hitElement);
|
|
|
+ this.onMousedown(e, event);
|
|
|
+ } else {
|
|
|
+ this.elements.setActiveElement(hitElement);
|
|
|
+ this.render.render();
|
|
|
+ this.onMousedown(e, event);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.selection.onMousedown(e, event);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (this.drawType === "eraser") {
|
|
|
+ this.deleteElement(hitElement);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onMousemove(e, event) {
|
|
|
+ if (this.state.readonly || this.mode.isDragMode) {
|
|
|
+ if (event.isMousedown) {
|
|
|
+ this.mode.onMove(e, event);
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (event.isMousedown) {
|
|
|
+ let mx = event.mousedownPos.x;
|
|
|
+ let my = event.mousedownPos.y;
|
|
|
+ let offsetX = Math.max(event.mouseOffset.x, 0);
|
|
|
+ let offsetY = Math.max(event.mouseOffset.y, 0);
|
|
|
+ if (this.drawType === "selection") {
|
|
|
+ if (this.selection.isResizing) {
|
|
|
+ this.selection.handleResize(
|
|
|
+ e,
|
|
|
+ mx,
|
|
|
+ my,
|
|
|
+ event.mouseOffset.x,
|
|
|
+ event.mouseOffset.y
|
|
|
+ );
|
|
|
+ } else if (this.selection.creatingSelection) {
|
|
|
+ this.selection.onMousemove(e, event);
|
|
|
+ } else {
|
|
|
+ this.elements.handleResize(
|
|
|
+ e,
|
|
|
+ mx,
|
|
|
+ my,
|
|
|
+ event.mouseOffset.x,
|
|
|
+ event.mouseOffset.y
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else if (["rectangle", "diamond", "triangle"].includes(this.drawType)) {
|
|
|
+ this.elements.creatingRectangleLikeElement(
|
|
|
+ this.drawType,
|
|
|
+ mx,
|
|
|
+ my,
|
|
|
+ offsetX,
|
|
|
+ offsetY
|
|
|
+ );
|
|
|
+ this.render.render();
|
|
|
+ } else if (this.drawType === "circle") {
|
|
|
+ this.elements.creatingCircle(mx, my, e);
|
|
|
+ this.render.render();
|
|
|
+ } else if (this.drawType === "freedraw") {
|
|
|
+ this.elements.creatingFreedraw(e, event);
|
|
|
+ } else if (this.drawType === "arrow") {
|
|
|
+ this.elements.creatingArrow(mx, my, e);
|
|
|
+ this.render.render();
|
|
|
+ } else if (this.drawType === "line") {
|
|
|
+ if (getTowPointDistance(mx, my, e.clientX, e.clientY) > 3) {
|
|
|
+ this.elements.creatingLine(mx, my, e, true);
|
|
|
+ this.render.render();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.imageEdit.isReady) {
|
|
|
+ this.cursor.hide();
|
|
|
+ this.imageEdit.updatePreviewElPos(
|
|
|
+ e.originEvent.clientX,
|
|
|
+ e.originEvent.clientY
|
|
|
+ );
|
|
|
+ } else if (this.drawType === "selection") {
|
|
|
+ if (this.elements.hasActiveElement()) {
|
|
|
+ let handData = "";
|
|
|
+ if (handData = this.elements.checkInResizeHand(
|
|
|
+ e.unGridClientX,
|
|
|
+ e.unGridClientY
|
|
|
+ )) {
|
|
|
+ this.cursor.setResize(handData.hand);
|
|
|
+ } else {
|
|
|
+ this.checkIsOnElement(e);
|
|
|
+ }
|
|
|
+ } else if (this.selection.hasSelection) {
|
|
|
+ let hand = this.selection.checkInResizeHand(
|
|
|
+ e.unGridClientX,
|
|
|
+ e.unGridClientY
|
|
|
+ );
|
|
|
+ if (hand) {
|
|
|
+ this.cursor.setResize(hand);
|
|
|
+ } else {
|
|
|
+ this.checkIsOnElement(e);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.checkIsOnElement(e);
|
|
|
+ }
|
|
|
+ } else if (this.drawType === "line") {
|
|
|
+ this.elements.creatingLine(null, null, e, false, true);
|
|
|
+ this.render.render();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ checkIsOnElement(e) {
|
|
|
+ let hitElement = this.elements.checkIsHitElement(e);
|
|
|
+ if (hitElement) {
|
|
|
+ this.cursor.setMove();
|
|
|
+ } else {
|
|
|
+ this.cursor.reset();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ resetCurrentType() {
|
|
|
+ if (this.drawType !== "selection") {
|
|
|
+ this.drawType = "selection";
|
|
|
+ this.emit("currentTypeChange", "selection");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ completeCreateNewElement() {
|
|
|
+ this.resetCurrentType();
|
|
|
+ this.elements.completeCreateElement();
|
|
|
+ this.render.render();
|
|
|
+ }
|
|
|
+ onMouseup(e) {
|
|
|
+ if (this.state.readonly || this.mode.isDragMode) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.drawType === "text") {
|
|
|
+ if (!this.textEdit.isEditing) {
|
|
|
+ this.createTextElement(e);
|
|
|
+ this.resetCurrentType();
|
|
|
+ }
|
|
|
+ } else if (this.imageEdit.isReady) {
|
|
|
+ this.elements.creatingImage(e, this.imageEdit.imageData);
|
|
|
+ this.completeCreateNewElement();
|
|
|
+ this.cursor.reset();
|
|
|
+ this.imageEdit.reset();
|
|
|
+ } else if (this.drawType === "arrow") {
|
|
|
+ this.elements.completeCreateArrow(e);
|
|
|
+ this.completeCreateNewElement();
|
|
|
+ } else if (this.drawType === "line") {
|
|
|
+ this.elements.completeCreateLine(e, () => {
|
|
|
+ this.completeCreateNewElement();
|
|
|
+ });
|
|
|
+ this.render.render();
|
|
|
+ } else if (this.elements.isCreatingElement) {
|
|
|
+ if (this.drawType === "freedraw") {
|
|
|
+ this.elements.completeCreateElement();
|
|
|
+ this.elements.setActiveElement();
|
|
|
+ } else {
|
|
|
+ this.completeCreateNewElement();
|
|
|
+ }
|
|
|
+ } else if (this.elements.isResizing) {
|
|
|
+ this.elements.endResize();
|
|
|
+ this.emitChange();
|
|
|
+ } else if (this.selection.creatingSelection) {
|
|
|
+ this.selection.onMouseup(e);
|
|
|
+ } else if (this.selection.isResizing) {
|
|
|
+ this.selection.endResize();
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onDblclick(e) {
|
|
|
+ if (this.drawType === "line") {
|
|
|
+ this.completeCreateNewElement();
|
|
|
+ } else {
|
|
|
+ let hitElement = this.elements.checkIsHitElement(e);
|
|
|
+ if (hitElement) {
|
|
|
+ if (hitElement.type === "text") {
|
|
|
+ this.elements.editingText(hitElement);
|
|
|
+ this.render.render();
|
|
|
+ this.keyCommand.unBindEvent();
|
|
|
+ this.textEdit.showTextEdit();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!this.textEdit.isEditing) {
|
|
|
+ this.createTextElement(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onTextInputBlur() {
|
|
|
+ this.keyCommand.bindEvent();
|
|
|
+ this.elements.completeEditingText();
|
|
|
+ this.render.render();
|
|
|
+ this.emitChange();
|
|
|
+ }
|
|
|
+ createTextElement(e) {
|
|
|
+ this.elements.createElement({
|
|
|
+ type: "text",
|
|
|
+ x: e.clientX,
|
|
|
+ y: e.clientY
|
|
|
+ });
|
|
|
+ this.keyCommand.unBindEvent();
|
|
|
+ this.textEdit.showTextEdit();
|
|
|
+ }
|
|
|
+ onMousewheel(dir) {
|
|
|
+ let stepNum = this.state.scrollStep / this.state.scale;
|
|
|
+ let step = dir === "down" ? stepNum : -stepNum;
|
|
|
+ this.scrollTo(this.state.scrollX, this.state.scrollY + step);
|
|
|
+ }
|
|
|
+ onContextmenu(e) {
|
|
|
+ let elements = [];
|
|
|
+ if (this.elements.hasActiveElement()) {
|
|
|
+ elements = [this.elements.activeElement];
|
|
|
+ } else if (this.selection.hasSelectionElements()) {
|
|
|
+ elements = this.selection.getSelectionElements();
|
|
|
+ }
|
|
|
+ this.emit("contextmenu", e.originEvent, elements);
|
|
|
+ }
|
|
|
+ emitChange() {
|
|
|
+ let data = this.getData();
|
|
|
+ this.history.add(data);
|
|
|
+ this.emit("change", data);
|
|
|
+ }
|
|
|
+}
|
|
|
+TinyWhiteboard.utils = utils;
|
|
|
+TinyWhiteboard.checkHit = checkHit;
|
|
|
+TinyWhiteboard.draw = draw;
|
|
|
+TinyWhiteboard.elements = Elements;
|
|
|
+export { TinyWhiteboard as default };
|
