From 3d5ab1b4fe22d28d8485206fabc54ba22bd0ae02 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 23 Jun 2024 17:31:59 +0800 Subject: [PATCH] feat: upgrade idraw --- package.json | 2 +- .../index.global.js | 1182 +++++++++-------- src/config.json | 2 +- 3 files changed, 662 insertions(+), 524 deletions(-) rename public/lib/idraw/{0.4.0-beta.29 => 0.4.0-beta.30}/index.global.js (96%) diff --git a/package.json b/package.json index eb3349a..bef4760 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "codemirror": "^5.65.16", - "idraw": "0.4.0-beta.29", + "idraw": "0.4.0-beta.30", "vue": "^3.4.15" }, "devDependencies": { diff --git a/public/lib/idraw/0.4.0-beta.29/index.global.js b/public/lib/idraw/0.4.0-beta.30/index.global.js similarity index 96% rename from public/lib/idraw/0.4.0-beta.29/index.global.js rename to public/lib/idraw/0.4.0-beta.30/index.global.js index c07705c..f1fb75c 100644 --- a/public/lib/idraw/0.4.0-beta.29/index.global.js +++ b/public/lib/idraw/0.4.0-beta.30/index.global.js @@ -2266,6 +2266,10 @@ var __privateMethod = (obj, member, method) => { } return false; } + function isViewPointInElementSize(p, elemSize, opts) { + const vertexes = calcElementVertexes(elemSize); + return isViewPointInVertexes(p, vertexes); + } function isViewPointInVertexes(p, vertexes, opts) { const xList = [vertexes[0].x, vertexes[1].x, vertexes[2].x, vertexes[3].x]; const yList = [vertexes[0].y, vertexes[1].y, vertexes[2].y, vertexes[3].y]; @@ -4258,140 +4262,146 @@ var __privateMethod = (obj, member, method) => { const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calcViewElementSize(elem, { viewScaleInfo }) || elem; const viewElem = Object.assign(Object.assign({}, elem), { x: x2, y: y2, w: w2, h: h2, angle: angle2 }); rotateElement$1(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => { - drawBox(ctx, viewElem, { - originElem: elem, - calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, + drawBoxShadow(ctx, viewElem, { viewScaleInfo, viewSizeInfo, - parentOpacity, renderContent: () => { - const detail = Object.assign(Object.assign({}, detailConfig), elem.detail); - const originFontSize = detail.fontSize || detailConfig.fontSize; - const fontSize2 = originFontSize * viewScaleInfo.scale; - if (fontSize2 < 2) { - return; - } - const originLineHeight = detail.lineHeight || originFontSize; - const lineHeight2 = originLineHeight * viewScaleInfo.scale; - ctx.fillStyle = elem.detail.color || detailConfig.color; - ctx.textBaseline = "top"; - ctx.$setFont({ - fontWeight: detail.fontWeight, - fontSize: fontSize2, - fontFamily: enhanceFontFamliy(detail.fontFamily) + drawBox(ctx, viewElem, { + originElem: elem, + calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, + viewScaleInfo, + viewSizeInfo, + parentOpacity }); - let detailText = detail.text.replace(/\r\n/gi, "\n"); - if (detail.textTransform === "lowercase") { - detailText = detailText.toLowerCase(); - } else if (detail.textTransform === "uppercase") { - detailText = detailText.toUpperCase(); - } - const fontHeight = lineHeight2; - const detailTextList = detailText.split("\n"); - const lines = []; - let lineNum = 0; - detailTextList.forEach((itemText, idx) => { - if (detail.minInlineSize === "maxContent") { + } + }); + { + const detail = Object.assign(Object.assign({}, detailConfig), elem.detail); + const originFontSize = detail.fontSize || detailConfig.fontSize; + const fontSize2 = originFontSize * viewScaleInfo.scale; + if (fontSize2 < 2) { + return; + } + const originLineHeight = detail.lineHeight || originFontSize; + const lineHeight2 = originLineHeight * viewScaleInfo.scale; + ctx.fillStyle = elem.detail.color || detailConfig.color; + ctx.textBaseline = "top"; + ctx.$setFont({ + fontWeight: detail.fontWeight, + fontSize: fontSize2, + fontFamily: enhanceFontFamliy(detail.fontFamily) + }); + let detailText = detail.text.replace(/\r\n/gi, "\n"); + if (detail.textTransform === "lowercase") { + detailText = detailText.toLowerCase(); + } else if (detail.textTransform === "uppercase") { + detailText = detailText.toUpperCase(); + } + const fontHeight = lineHeight2; + const detailTextList = detailText.split("\n"); + const lines = []; + let lineNum = 0; + detailTextList.forEach((itemText, idx) => { + if (detail.minInlineSize === "maxContent") { + lines.push({ + text: itemText, + width: ctx.$undoPixelRatio(ctx.measureText(itemText).width) + }); + } else { + let lineText = ""; + let splitStr = ""; + let tempStrList = itemText.split(splitStr); + if (detail.wordBreak === "normal") { + const splitStr2 = " "; + const wordList = itemText.split(splitStr2); + tempStrList = []; + wordList.forEach((word, idx2) => { + tempStrList.push(word); + if (idx2 < wordList.length - 1) { + tempStrList.push(splitStr2); + } + }); + } + if (tempStrList.length === 1 && detail.overflow === "visible") { lines.push({ - text: itemText, - width: ctx.$undoPixelRatio(ctx.measureText(itemText).width) + text: tempStrList[0], + width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width) }); - } else { - let lineText = ""; - let splitStr = ""; - let tempStrList = itemText.split(splitStr); - if (detail.wordBreak === "normal") { - const splitStr2 = " "; - const wordList = itemText.split(splitStr2); - tempStrList = []; - wordList.forEach((word, idx2) => { - tempStrList.push(word); - if (idx2 < wordList.length - 1) { - tempStrList.push(splitStr2); - } - }); - } - if (tempStrList.length === 1 && detail.overflow === "visible") { - lines.push({ - text: tempStrList[0], - width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width) - }); - } else if (tempStrList.length > 0) { - for (let i = 0; i < tempStrList.length; i++) { - if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) { - lineText += tempStrList[i] || ""; - } else { + } else if (tempStrList.length > 0) { + for (let i = 0; i < tempStrList.length; i++) { + if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w2), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) { + lineText += tempStrList[i] || ""; + } else { + lines.push({ + text: lineText, + width: ctx.$undoPixelRatio(ctx.measureText(lineText).width) + }); + lineText = tempStrList[i] || ""; + lineNum++; + } + if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") { + break; + } + if (tempStrList.length - 1 === i) { + if ((lineNum + 1) * fontHeight <= h2) { lines.push({ text: lineText, width: ctx.$undoPixelRatio(ctx.measureText(lineText).width) }); - lineText = tempStrList[i] || ""; - lineNum++; - } - if ((lineNum + 1) * fontHeight > h2 && detail.overflow === "hidden") { - break; - } - if (tempStrList.length - 1 === i) { - if ((lineNum + 1) * fontHeight <= h2) { - lines.push({ - text: lineText, - width: ctx.$undoPixelRatio(ctx.measureText(lineText).width) - }); - if (idx < detailTextList.length - 1) { - lineNum++; - } - break; + if (idx < detailTextList.length - 1) { + lineNum++; } + break; } } - } else { - lines.push({ - text: "", - width: 0 - }); } - } - }); - let startY = 0; - let eachLineStartY = 0; - if (fontHeight > fontSize2) { - eachLineStartY = (fontHeight - fontSize2) / 2; - } - if (lines.length * fontHeight < h2) { - if (elem.detail.verticalAlign === "top") { - startY = 0; - } else if (elem.detail.verticalAlign === "bottom") { - startY += h2 - lines.length * fontHeight; } else { - startY += (h2 - lines.length * fontHeight) / 2; + lines.push({ + text: "", + width: 0 + }); } } - { - const _y = y2 + startY; - if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) { - ctx.shadowColor = detail.textShadowColor; - } - if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) { - ctx.shadowOffsetX = detail.textShadowOffsetX; - } - if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) { - ctx.shadowOffsetY = detail.textShadowOffsetY; - } - if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) { - ctx.shadowBlur = detail.textShadowBlur; - } - lines.forEach((line, i) => { - let _x = x2; - if (detail.textAlign === "center") { - _x = x2 + (w2 - line.width) / 2; - } else if (detail.textAlign === "right") { - _x = x2 + (w2 - line.width); - } - ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY); - }); + }); + let startY = 0; + let eachLineStartY = 0; + if (fontHeight > fontSize2) { + eachLineStartY = (fontHeight - fontSize2) / 2; + } + if (lines.length * fontHeight < h2) { + if (elem.detail.verticalAlign === "top") { + startY = 0; + } else if (elem.detail.verticalAlign === "bottom") { + startY += h2 - lines.length * fontHeight; + } else { + startY += (h2 - lines.length * fontHeight) / 2; } } - }); + { + const _y = y2 + startY; + if (detail.textShadowColor !== void 0 && isColorStr(detail.textShadowColor)) { + ctx.shadowColor = detail.textShadowColor; + } + if (detail.textShadowOffsetX !== void 0 && is.number(detail.textShadowOffsetX)) { + ctx.shadowOffsetX = detail.textShadowOffsetX; + } + if (detail.textShadowOffsetY !== void 0 && is.number(detail.textShadowOffsetY)) { + ctx.shadowOffsetY = detail.textShadowOffsetY; + } + if (detail.textShadowBlur !== void 0 && is.number(detail.textShadowBlur)) { + ctx.shadowBlur = detail.textShadowBlur; + } + lines.forEach((line, i) => { + let _x = x2; + if (detail.textAlign === "center") { + _x = x2 + (w2 - line.width) / 2; + } else if (detail.textAlign === "right") { + _x = x2 + (w2 - line.width); + } + ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY); + }); + } + } }); } var __rest = function(s, e) { @@ -6165,7 +6175,7 @@ var __privateMethod = (obj, member, method) => { const areaBorderWidth = 1; const wrapperColor = "#1973ba"; const lockColor = "#5b5959b5"; - const controllerSize = 10; + const controllerSize$1 = 10; const referenceColor = "#f7276e"; const middlewareEventSelect = "@middleware/select"; const middlewareEventSelectClear = "@middleware/select-clear"; @@ -6313,7 +6323,7 @@ var __privateMethod = (obj, member, method) => { drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts); drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts); drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts); - drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: controllerSize, borderWidth: 2 })); + drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: controllerSize$1, borderWidth: 2 })); } } function drawArea(ctx, opts) { @@ -7542,7 +7552,8 @@ var __privateMethod = (obj, member, method) => { textarea.style.resize = "none"; textarea.style.overflow = "hidden"; textarea.style.wordBreak = "break-all"; - textarea.style.background = "transparent"; + textarea.style.borderRadius = `${(typeof detail.borderRadius === "number" ? detail.borderRadius : 0) * scale}px`; + textarea.style.background = `${detail.background || "transparent"}`; textarea.style.color = `${detail.color || "#333333"}`; textarea.style.fontSize = `${detail.fontSize * scale}px`; textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`; @@ -7629,73 +7640,494 @@ var __privateMethod = (obj, member, method) => { } }; }; - const MiddlewareSelector = (opts) => { - const { viewer, sharer, boardContent, calculator, eventHub } = opts; + const key$2 = "LAYOUT_SELECT"; + const keyLayoutActionType = Symbol(`${key$2}_layoutActionType`); + const keyLayoutControlType = Symbol(`${key$2}_layoutControlType`); + const keyLayoutController = Symbol(`${key$2}_layoutController`); + const keyLayoutIsHover = Symbol(`${key$2}_layoutIsHover`); + const keyLayoutIsSelected = Symbol(`${key$2}_layoutIsSelected`); + const selectColor = "#b331c9"; + const disableColor = "#5b5959b5"; + const controllerSize = 10; + function drawControllerBox(ctx, boxVertexes) { + ctx.setLineDash([]); + ctx.fillStyle = "#FFFFFF"; + ctx.beginPath(); + ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y); + ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y); + ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y); + ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y); + ctx.closePath(); + ctx.fill(); + ctx.strokeStyle = selectColor; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y); + ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y); + ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y); + ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y); + ctx.closePath(); + ctx.stroke(); + } + function drawControllerCross(ctx, opts) { + const { vertexes, strokeStyle, lineWidth } = opts; + ctx.setLineDash([]); + ctx.strokeStyle = strokeStyle; + ctx.lineWidth = lineWidth; + ctx.beginPath(); + ctx.moveTo(vertexes[0].x, vertexes[0].y); + ctx.lineTo(vertexes[2].x, vertexes[2].y); + ctx.closePath(); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(vertexes[1].x, vertexes[1].y); + ctx.lineTo(vertexes[3].x, vertexes[3].y); + ctx.closePath(); + ctx.stroke(); + } + function drawControllerLine(ctx, opts) { + const { start, end, centerVertexes, disabled } = opts; + const lineWidth = disabled === true ? 1 : 2; + const strokeStyle = disabled === true ? disableColor : selectColor; + ctx.setLineDash([]); + ctx.strokeStyle = strokeStyle; + ctx.lineWidth = lineWidth; + ctx.beginPath(); + ctx.moveTo(start.x, start.y); + ctx.lineTo(end.x, end.y); + ctx.closePath(); + ctx.stroke(); + if (disabled === true) { + drawControllerCross(ctx, { + vertexes: centerVertexes, + lineWidth, + strokeStyle + }); + } + } + function drawLayoutController(ctx, opts) { + const { controller, operations } = opts; + const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller; + drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledTop) }); + drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledRight) }); + drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledBottom) }); + drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledLeft) }); + const disabledOpts = { + lineWidth: 1, + strokeStyle: disableColor + }; + if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopLeft) === true) { + drawControllerCross(ctx, Object.assign({ vertexes: topLeft.vertexes }, disabledOpts)); + } else { + drawControllerBox(ctx, topLeft.vertexes); + } + if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopRight) === true) { + drawControllerCross(ctx, Object.assign({ vertexes: topRight.vertexes }, disabledOpts)); + } else { + drawControllerBox(ctx, topRight.vertexes); + } + if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomRight) === true) { + drawControllerCross(ctx, Object.assign({ vertexes: bottomRight.vertexes }, disabledOpts)); + } else { + drawControllerBox(ctx, bottomRight.vertexes); + } + if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomLeft) === true) { + drawControllerCross(ctx, Object.assign({ vertexes: bottomLeft.vertexes }, disabledOpts)); + } else { + drawControllerBox(ctx, bottomLeft.vertexes); + } + } + function drawLayoutHover(ctx, opts) { + const { layoutSize } = opts; + const { x: x2, y: y2, w: w2, h: h2 } = layoutSize; + ctx.setLineDash([]); + ctx.strokeStyle = selectColor; + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(x2, y2); + ctx.lineTo(x2 + w2, y2); + ctx.lineTo(x2 + w2, y2 + h2); + ctx.lineTo(x2, y2 + h2); + ctx.lineTo(x2, y2); + ctx.closePath(); + ctx.stroke(); + } + const MiddlewareLayoutSelector = (opts) => { + const { sharer, boardContent, calculator, viewer, eventHub } = opts; const { overlayContext } = boardContent; let prevPoint = null; - let inBusyMode = null; - sharer.setSharedStorage(keyActionType, null); - sharer.setSharedStorage(keyEnableSnapToGrid, true); - const getActiveElements = () => { - return sharer.getSharedStorage(keySelectedElementList); + let prevIsHover = null; + let prevIsSelected = null; + let isBusy = null; + const clear = () => { + prevPoint = null; + sharer.setSharedStorage(keyLayoutActionType, null); + sharer.setSharedStorage(keyLayoutControlType, null); + sharer.setSharedStorage(keyLayoutController, null); + sharer.setSharedStorage(keyLayoutIsHover, null); + sharer.setSharedStorage(keyLayoutIsSelected, null); + prevIsHover = null; + prevIsSelected = null; + isBusy = null; }; - const pushGroupQueue = (elem) => { - let groupQueue = sharer.getSharedStorage(keyGroupQueue); - if (!Array.isArray(groupQueue)) { - groupQueue = []; + const isInElementHover = () => { + const hoverElement = sharer.getSharedStorage(keyHoverElement); + if (hoverElement) { + clear(); + return true; } - if (groupQueue.length > 0) { - if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) { - groupQueue.push(elem); - } else { - groupQueue = []; - } - } else if (groupQueue.length === 0) { - groupQueue.push(elem); + return false; + }; + const isInElementAction = () => { + const elementActionType = sharer.getSharedStorage(keyActionType); + if (elementActionType && elementActionType !== "area") { + clear(); + return true; } - const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue); - sharer.setSharedStorage(keyGroupQueue, groupQueue); - sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList); - return groupQueue.length > 0; + return false; }; - const updateHoverElement = (elem) => { - sharer.setSharedStorage(keyHoverElement, elem); - let vertexes = null; - if (elem) { - vertexes = calcElementVertexesInGroup(elem, { - groupQueue: sharer.getSharedStorage(keyGroupQueue) - }); + const getLayoutSize = () => { + const data = sharer.getActiveStorage("data"); + if (data === null || data === void 0 ? void 0 : data.layout) { + const { x: x2, y: y2, w: w2, h: h2 } = data.layout; + return { x: x2, y: y2, w: w2, h: h2 }; } - sharer.setSharedStorage(keyHoverElementVertexes, vertexes); + return null; }; - const updateSelectedElementList = (list, opts2) => { - var _a; - sharer.setSharedStorage(keySelectedElementList, list); - if (list.length === 1) { - const controller = calcElementSizeController(list[0], { - groupQueue: sharer.getSharedStorage(keyGroupQueue), - controllerSize, - viewScaleInfo: sharer.getActiveViewScaleInfo() - }); - sharer.setSharedStorage(keySelectedElementController, controller); - sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage("data")) === null || _a === void 0 ? void 0 : _a.elements) || [])); - } else { - sharer.setSharedStorage(keySelectedElementController, null); - sharer.setSharedStorage(keySelectedElementPosition, []); + const isInLayout = (p) => { + const size = getLayoutSize(); + if (size) { + const { x: x2, y: y2, w: w2, h: h2 } = size; + const viewScaleInfo = sharer.getActiveViewScaleInfo(); + const viewSize = calcViewElementSize({ + x: x2 - controllerSize / 2, + y: y2 - controllerSize / 2, + w: w2 + controllerSize, + h: h2 + controllerSize + }, { viewScaleInfo }); + return isViewPointInElementSize(p, viewSize); } - if ((opts2 === null || opts2 === void 0 ? void 0 : opts2.triggerEvent) === true) { - eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) }); + return false; + }; + const resetController = () => { + const viewScaleInfo = sharer.getActiveViewScaleInfo(); + const size = getLayoutSize(); + if (size) { + const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 }); + sharer.setSharedStorage(keyLayoutController, controller); + } else { + sharer.setSharedStorage(keyLayoutController, null); } }; - const pointTargetBaseOptions = () => { - return { - ctx: overlayContext, - calculator, - data: sharer.getActiveStorage("data"), - selectedElements: getActiveElements(), - viewScaleInfo: sharer.getActiveViewScaleInfo(), - viewSizeInfo: sharer.getActiveViewSizeInfo(), - groupQueue: sharer.getSharedStorage(keyGroupQueue), + const resetControlType = (e) => { + const data = sharer.getActiveStorage("data"); + const controller = sharer.getSharedStorage(keyLayoutController); + if (controller && (data === null || data === void 0 ? void 0 : data.layout) && (e === null || e === void 0 ? void 0 : e.point)) { + let layoutControlType = null; + if (controller) { + const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = controller; + const list = [topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left]; + for (let i = 0; i < list.length; i++) { + const item = list[i]; + if (isViewPointInVertexes(e.point, item.vertexes)) { + layoutControlType = `${item.type}`; + break; + } + } + if (layoutControlType) { + sharer.setSharedStorage(keyLayoutControlType, layoutControlType); + eventHub.trigger(middlewareEventSelectClear, {}); + return layoutControlType; + } + } + } + return null; + }; + const updateCursor = (controlType) => { + if (isBusy === true) { + return; + } + eventHub.trigger("cursor", { + type: controlType ? `resize-${controlType}` : controlType, + groupQueue: [], + element: getLayoutSize() + }); + }; + return { + name: "@middleware/layout-selector", + use: () => { + clear(); + resetController(); + }, + hover: (e) => { + if (isBusy === true) { + return; + } + if (isInElementAction()) { + return; + } + if (isInElementHover()) { + return; + } + if (isInLayout(e.point)) { + sharer.setSharedStorage(keyLayoutIsHover, true); + } else { + sharer.setSharedStorage(keyLayoutIsHover, false); + if (prevIsHover === true) { + viewer.drawFrame(); + prevIsHover = false; + } + } + if (sharer.getSharedStorage(keyLayoutIsSelected) === true) { + const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType); + const data = sharer.getActiveStorage("data"); + if (data === null || data === void 0 ? void 0 : data.layout) { + if (prevLayoutActionType !== "resize") { + resetController(); + const layoutControlType = resetControlType(e); + if (layoutControlType) { + updateCursor(layoutControlType); + } else { + updateCursor(); + sharer.setSharedStorage(keyLayoutActionType, null); + } + } else { + const layoutControlType = resetControlType(e); + updateCursor(layoutControlType); + } + } + return; + } + if (sharer.getSharedStorage(keyLayoutIsHover) && !prevIsHover) { + viewer.drawFrame(); + } + prevIsHover = sharer.getSharedStorage(keyLayoutIsHover); + }, + pointStart: (e) => { + if (isInElementAction()) { + return; + } + if (isInLayout(e.point)) { + sharer.setSharedStorage(keyLayoutIsSelected, true); + } else { + if (prevIsSelected === true) { + clear(); + viewer.drawFrame(); + } + sharer.setSharedStorage(keyLayoutIsSelected, false); + } + resetController(); + const layoutControlType = resetControlType(e); + prevPoint = e.point; + if (layoutControlType) { + sharer.setSharedStorage(keyLayoutActionType, "resize"); + } + if (sharer.getSharedStorage(keyLayoutIsSelected) === true && !prevIsSelected) { + viewer.drawFrame(); + } + prevIsSelected = sharer.getSharedStorage(keyLayoutIsSelected); + }, + pointMove: (e) => { + if (!sharer.getSharedStorage(keyLayoutIsSelected)) { + if (isInElementAction()) { + return; + } + } + const layoutActionType = sharer.getSharedStorage(keyLayoutActionType); + const layoutControlType = sharer.getSharedStorage(keyLayoutControlType); + const data = sharer.getActiveStorage("data"); + if (layoutActionType === "resize" && layoutControlType && (data === null || data === void 0 ? void 0 : data.layout)) { + if (prevPoint) { + isBusy = true; + const scale = sharer.getActiveStorage("scale"); + const viewMoveX = e.point.x - prevPoint.x; + const viewMoveY = e.point.y - prevPoint.y; + const moveX = viewMoveX / scale; + const moveY = viewMoveY / scale; + const { x: x2, y: y2, w: w2, h: h2, operations = {} } = data.layout; + const { position = "absolute" } = operations; + if (layoutControlType === "top") { + if (position === "relative") { + data.layout.h = calculator.toGridNum(h2 - moveY); + viewer.scroll({ moveY: viewMoveY }); + } else { + data.layout.y = calculator.toGridNum(y2 + moveY); + data.layout.h = calculator.toGridNum(h2 - moveY); + } + } else if (layoutControlType === "right") { + data.layout.w = calculator.toGridNum(w2 + moveX); + } else if (layoutControlType === "bottom") { + data.layout.h = calculator.toGridNum(h2 + moveY); + } else if (layoutControlType === "left") { + if (position === "relative") { + data.layout.w = calculator.toGridNum(w2 - moveX); + viewer.scroll({ moveX: viewMoveX }); + } else { + data.layout.x = calculator.toGridNum(x2 + moveX); + data.layout.w = calculator.toGridNum(w2 - moveX); + } + } else if (layoutControlType === "top-left") { + if (position === "relative") { + data.layout.w = calculator.toGridNum(w2 - moveX); + data.layout.h = calculator.toGridNum(h2 - moveY); + viewer.scroll({ moveX: viewMoveX, moveY: viewMoveY }); + } else { + data.layout.x = calculator.toGridNum(x2 + moveX); + data.layout.y = calculator.toGridNum(y2 + moveY); + data.layout.w = calculator.toGridNum(w2 - moveX); + data.layout.h = calculator.toGridNum(h2 - moveY); + } + } else if (layoutControlType === "top-right") { + if (position === "relative") { + viewer.scroll({ + moveY: viewMoveY + }); + data.layout.w = calculator.toGridNum(w2 + moveX); + data.layout.h = calculator.toGridNum(h2 - moveY); + } else { + data.layout.y = calculator.toGridNum(y2 + moveY); + data.layout.w = calculator.toGridNum(w2 + moveX); + data.layout.h = calculator.toGridNum(h2 - moveY); + } + } else if (layoutControlType === "bottom-right") { + data.layout.w = calculator.toGridNum(w2 + moveX); + data.layout.h = calculator.toGridNum(h2 + moveY); + } else if (layoutControlType === "bottom-left") { + if (position === "relative") { + viewer.scroll({ + moveX: viewMoveX + }); + data.layout.w = calculator.toGridNum(w2 - moveX); + data.layout.h = calculator.toGridNum(h2 + moveY); + } else { + data.layout.x = calculator.toGridNum(x2 + moveX); + data.layout.w = calculator.toGridNum(w2 - moveX); + data.layout.h = calculator.toGridNum(h2 + moveY); + } + } + } + prevPoint = e.point; + resetController(); + viewer.drawFrame(); + return false; + } + if (["resize"].includes(layoutActionType)) { + return false; + } + }, + pointEnd: () => { + isBusy = false; + const layoutActionType = sharer.getSharedStorage(keyLayoutActionType); + const layoutControlType = sharer.getSharedStorage(keyLayoutControlType); + const data = sharer.getActiveStorage("data"); + if (data && layoutActionType === "resize" && layoutControlType) { + eventHub.trigger(eventChange, { + type: "changeLayout", + data + }); + } + }, + beforeDrawFrame: ({ snapshot }) => { + var _a; + if (isInElementAction()) { + return; + } + const { sharedStore, activeStore } = snapshot; + const layoutActionType = sharedStore[keyLayoutActionType]; + const layoutIsHover = sharedStore[keyLayoutIsHover]; + const layoutIsSelected = sharedStore[keyLayoutIsSelected]; + if ((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout) { + const { x: x2, y: y2, w: w2, h: h2 } = activeStore.data.layout; + const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot); + const size = { x: x2, y: y2, w: w2, h: h2 }; + const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize }); + if (layoutIsHover === true) { + const viewSize = calcViewElementSize(size, { viewScaleInfo }); + drawLayoutHover(overlayContext, { layoutSize: viewSize }); + } + if (layoutActionType && ["resize"].includes(layoutActionType) || layoutIsSelected === true) { + drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} }); + } + } + }, + scrollX: () => { + clear(); + }, + scrollY: () => { + clear(); + }, + wheelScale: () => { + clear(); + } + }; + }; + const MiddlewareSelector = (opts) => { + const { viewer, sharer, boardContent, calculator, eventHub } = opts; + const { overlayContext } = boardContent; + let prevPoint = null; + let inBusyMode = null; + sharer.setSharedStorage(keyActionType, null); + sharer.setSharedStorage(keyEnableSnapToGrid, true); + const getActiveElements = () => { + return sharer.getSharedStorage(keySelectedElementList); + }; + const pushGroupQueue = (elem) => { + let groupQueue = sharer.getSharedStorage(keyGroupQueue); + if (!Array.isArray(groupQueue)) { + groupQueue = []; + } + if (groupQueue.length > 0) { + if (isElementInGroup(elem, groupQueue[groupQueue.length - 1])) { + groupQueue.push(elem); + } else { + groupQueue = []; + } + } else if (groupQueue.length === 0) { + groupQueue.push(elem); + } + const vertexesList = calcElementQueueVertexesQueueInGroup(groupQueue); + sharer.setSharedStorage(keyGroupQueue, groupQueue); + sharer.setSharedStorage(keyGroupQueueVertexesList, vertexesList); + return groupQueue.length > 0; + }; + const updateHoverElement = (elem) => { + sharer.setSharedStorage(keyHoverElement, elem); + let vertexes = null; + if (elem) { + vertexes = calcElementVertexesInGroup(elem, { + groupQueue: sharer.getSharedStorage(keyGroupQueue) + }); + } + sharer.setSharedStorage(keyHoverElementVertexes, vertexes); + }; + const updateSelectedElementList = (list, opts2) => { + var _a; + sharer.setSharedStorage(keySelectedElementList, list); + if (list.length === 1) { + const controller = calcElementSizeController(list[0], { + groupQueue: sharer.getSharedStorage(keyGroupQueue), + controllerSize: controllerSize$1, + viewScaleInfo: sharer.getActiveViewScaleInfo() + }); + sharer.setSharedStorage(keySelectedElementController, controller); + sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage("data")) === null || _a === void 0 ? void 0 : _a.elements) || [])); + } else { + sharer.setSharedStorage(keySelectedElementController, null); + sharer.setSharedStorage(keySelectedElementPosition, []); + } + if ((opts2 === null || opts2 === void 0 ? void 0 : opts2.triggerEvent) === true) { + eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) }); + } + }; + const pointTargetBaseOptions = () => { + return { + ctx: overlayContext, + calculator, + data: sharer.getActiveStorage("data"), + selectedElements: getActiveElements(), + viewScaleInfo: sharer.getActiveViewScaleInfo(), + viewSizeInfo: sharer.getActiveViewSizeInfo(), + groupQueue: sharer.getSharedStorage(keyGroupQueue), areaSize: null, selectedElementController: sharer.getSharedStorage(keySelectedElementController), selectedElementPosition: sharer.getSharedStorage(keySelectedElementPosition) @@ -7768,10 +8200,14 @@ var __privateMethod = (obj, member, method) => { }, hover: (e) => { var _a, _b, _c, _d, _e; + const layoutIsSelected = sharer.getSharedStorage(keyLayoutIsSelected); const resizeType = sharer.getSharedStorage(keyResizeType); const actionType = sharer.getSharedStorage(keyActionType); const groupQueue = sharer.getSharedStorage(keyGroupQueue); const triggerCursor = (target2) => { + if (layoutIsSelected === true) { + return; + } const cursor = target2.type; if (inBusyMode === null) { eventHub.trigger("cursor", { @@ -8283,18 +8719,21 @@ var __privateMethod = (obj, member, method) => { } }; }; - const key$2 = "SCROLL"; - const keyXThumbRect = Symbol(`${key$2}_xThumbRect`); - const keyYThumbRect = Symbol(`${key$2}_yThumbRect`); - const keyPrevPoint$1 = Symbol(`${key$2}_prevPoint`); - const keyActivePoint = Symbol(`${key$2}_activePoint`); - const keyActiveThumbType = Symbol(`${key$2}_activeThumbType`); + const key$1 = "SCROLL"; + const keyXThumbRect = Symbol(`${key$1}_xThumbRect`); + const keyYThumbRect = Symbol(`${key$1}_yThumbRect`); + const keyHoverXThumbRect = Symbol(`${key$1}_hoverXThumbRect`); + const keyHoverYThumbRect = Symbol(`${key$1}_hoverYThumbRect`); + const keyPrevPoint$1 = Symbol(`${key$1}_prevPoint`); + const keyActivePoint = Symbol(`${key$1}_activePoint`); + const keyActiveThumbType = Symbol(`${key$1}_activeThumbType`); const minScrollerWidth = 12; const scrollerLineWidth = 16; const scrollerThumbAlpha = 0.3; const scrollConfig = { width: minScrollerWidth, - thumbColor: "#000000AA", + thumbColor: "#0000008A", + thumbHoverColor: "#000000EE", scrollBarColor: "#FFFFFF60", showScrollBar: false }; @@ -8326,11 +8765,14 @@ var __privateMethod = (obj, member, method) => { prevPoint: sharedStore[keyPrevPoint$1] || null, activeThumbType: sharedStore[keyActiveThumbType] || null, xThumbRect: sharedStore[keyXThumbRect] || null, - yThumbRect: sharedStore[keyYThumbRect] || null + yThumbRect: sharedStore[keyYThumbRect] || null, + hoverXThumb: sharedStore[keyHoverXThumbRect], + hoverYThumb: sharedStore[keyHoverYThumbRect] }; return info; } - function calcScrollerInfo(viewScaleInfo, viewSizeInfo) { + function calcScrollerInfo(opts) { + const { viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb } = opts; const { width, height } = viewSizeInfo; const { offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo; const sliderMinSize = scrollerLineWidth * 2.5; @@ -8385,7 +8827,8 @@ var __privateMethod = (obj, member, method) => { ySize, translateY, translateX, - thumbColor: scrollConfig.thumbColor, + xThumbColor: hoverXThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor, + yThumbColor: hoverYThumb ? scrollConfig.thumbHoverColor : scrollConfig.thumbColor, scrollBarColor: scrollConfig.scrollBarColor, xThumbRect, yThumbRect @@ -8441,8 +8884,8 @@ var __privateMethod = (obj, member, method) => { function drawScrollerInfo(overlayContext, opts) { const ctx = overlayContext; const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts; - const { activeThumbType, prevPoint, activePoint } = scrollInfo; - const wrapper = calcScrollerInfo(viewScaleInfo, viewSizeInfo); + const { activeThumbType, prevPoint, activePoint, hoverXThumb, hoverYThumb } = scrollInfo; + const wrapper = calcScrollerInfo({ viewScaleInfo, viewSizeInfo, hoverXThumb, hoverYThumb }); let xThumbRect = Object.assign({}, wrapper.xThumbRect); let yThumbRect = Object.assign({}, wrapper.yThumbRect); if (activeThumbType && prevPoint && activePoint) { @@ -8454,8 +8897,8 @@ var __privateMethod = (obj, member, method) => { yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y); } } - drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: "X" }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor })); - drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: "Y" }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor })); + drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: "X" }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.xThumbColor })); + drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: "Y" }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.yThumbColor })); ctx.globalAlpha = 1; return { xThumbRect, @@ -8471,14 +8914,18 @@ var __privateMethod = (obj, member, method) => { return { xThumbRect, yThumbRect }; } const MiddlewareScroller = (opts) => { - const { viewer, boardContent, sharer } = opts; + const { viewer, boardContent, sharer, eventHub } = opts; const { overlayContext } = boardContent; sharer.setSharedStorage(keyXThumbRect, null); sharer.setSharedStorage(keyYThumbRect, null); + let isBusy = false; const clear = () => { sharer.setSharedStorage(keyPrevPoint$1, null); sharer.setSharedStorage(keyActivePoint, null); sharer.setSharedStorage(keyActiveThumbType, null); + sharer.setSharedStorage(keyHoverXThumbRect, null); + sharer.setSharedStorage(keyHoverYThumbRect, null); + isBusy = false; }; clear(); const scrollX = (p) => { @@ -8520,10 +8967,31 @@ var __privateMethod = (obj, member, method) => { }); viewer.drawFrame(); }, + hover: (e) => { + if (isBusy === true) { + return false; + } + const { point } = e; + const thumbType = getThumbType(point); + if (thumbType === "X" || thumbType === "Y") { + if (thumbType === "X") { + sharer.setSharedStorage(keyHoverXThumbRect, true); + sharer.setSharedStorage(keyHoverYThumbRect, false); + } else { + sharer.setSharedStorage(keyHoverXThumbRect, false); + sharer.setSharedStorage(keyHoverYThumbRect, true); + } + eventHub.trigger("cursor", { type: "default" }); + return false; + } + sharer.setSharedStorage(keyHoverXThumbRect, false); + sharer.setSharedStorage(keyHoverYThumbRect, false); + }, pointStart: (e) => { const { point } = e; const thumbType = getThumbType(point); if (thumbType === "X" || thumbType === "Y") { + isBusy = true; sharer.setSharedStorage(keyActiveThumbType, thumbType); sharer.setSharedStorage(keyPrevPoint$1, point); return false; @@ -8544,6 +9012,7 @@ var __privateMethod = (obj, member, method) => { } }, pointEnd: () => { + isBusy = false; const activeThumbType = sharer.getSharedStorage(keyActiveThumbType); clear(); if (activeThumbType === "X" || activeThumbType === "Y") { @@ -8894,8 +9363,8 @@ var __privateMethod = (obj, member, method) => { } }; }; - const key$1 = "DRAG"; - const keyPrevPoint = Symbol(`${key$1}_prevPoint`); + const key = "DRAG"; + const keyPrevPoint = Symbol(`${key}_prevPoint`); const MiddlewareDragger = (opts) => { const { eventHub, sharer, viewer } = opts; let isDragging = false; @@ -9153,337 +9622,6 @@ var __privateMethod = (obj, member, method) => { } }; }; - const key = "LAYOUT_SELECT"; - const keyLayoutActionType = Symbol(`${key}_layoutActionType`); - const keyLayoutControlType = Symbol(`${key}_layoutControlType`); - const keyLayoutController = Symbol(`${key}_layoutController`); - const selectColor = "#1973ba"; - const disableColor = "#5b5959b5"; - function drawControllerBox(ctx, boxVertexes) { - ctx.setLineDash([]); - ctx.fillStyle = "#FFFFFF"; - ctx.beginPath(); - ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y); - ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y); - ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y); - ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y); - ctx.closePath(); - ctx.fill(); - ctx.strokeStyle = selectColor; - ctx.lineWidth = 2; - ctx.beginPath(); - ctx.moveTo(boxVertexes[0].x, boxVertexes[0].y); - ctx.lineTo(boxVertexes[1].x, boxVertexes[1].y); - ctx.lineTo(boxVertexes[2].x, boxVertexes[2].y); - ctx.lineTo(boxVertexes[3].x, boxVertexes[3].y); - ctx.closePath(); - ctx.stroke(); - } - function drawControllerCross(ctx, opts) { - const { vertexes, strokeStyle, lineWidth } = opts; - ctx.setLineDash([]); - ctx.strokeStyle = strokeStyle; - ctx.lineWidth = lineWidth; - ctx.beginPath(); - ctx.moveTo(vertexes[0].x, vertexes[0].y); - ctx.lineTo(vertexes[2].x, vertexes[2].y); - ctx.closePath(); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(vertexes[1].x, vertexes[1].y); - ctx.lineTo(vertexes[3].x, vertexes[3].y); - ctx.closePath(); - ctx.stroke(); - } - function drawControllerLine(ctx, opts) { - const { start, end, centerVertexes, disabled } = opts; - const lineWidth = disabled === true ? 1 : 2; - const strokeStyle = disabled === true ? disableColor : selectColor; - ctx.setLineDash([]); - ctx.strokeStyle = strokeStyle; - ctx.lineWidth = lineWidth; - ctx.beginPath(); - ctx.moveTo(start.x, start.y); - ctx.lineTo(end.x, end.y); - ctx.closePath(); - ctx.stroke(); - if (disabled === true) { - drawControllerCross(ctx, { - vertexes: centerVertexes, - lineWidth, - strokeStyle - }); - } - } - function drawLayoutController(ctx, opts) { - const { controller, operations } = opts; - const { topLeft, topRight, bottomLeft, bottomRight, topMiddle, rightMiddle, bottomMiddle, leftMiddle } = controller; - drawControllerLine(ctx, { start: topLeft.center, end: topRight.center, centerVertexes: topMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledTop) }); - drawControllerLine(ctx, { start: topRight.center, end: bottomRight.center, centerVertexes: rightMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledRight) }); - drawControllerLine(ctx, { start: bottomRight.center, end: bottomLeft.center, centerVertexes: bottomMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledBottom) }); - drawControllerLine(ctx, { start: bottomLeft.center, end: topLeft.center, centerVertexes: leftMiddle.vertexes, disabled: !!(operations === null || operations === void 0 ? void 0 : operations.disabledLeft) }); - const disabledOpts = { - lineWidth: 1, - strokeStyle: disableColor - }; - if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopLeft) === true) { - drawControllerCross(ctx, Object.assign({ vertexes: topLeft.vertexes }, disabledOpts)); - } else { - drawControllerBox(ctx, topLeft.vertexes); - } - if ((operations === null || operations === void 0 ? void 0 : operations.disabledTopRight) === true) { - drawControllerCross(ctx, Object.assign({ vertexes: topRight.vertexes }, disabledOpts)); - } else { - drawControllerBox(ctx, topRight.vertexes); - } - if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomRight) === true) { - drawControllerCross(ctx, Object.assign({ vertexes: bottomRight.vertexes }, disabledOpts)); - } else { - drawControllerBox(ctx, bottomRight.vertexes); - } - if ((operations === null || operations === void 0 ? void 0 : operations.disabledBottomLeft) === true) { - drawControllerCross(ctx, Object.assign({ vertexes: bottomLeft.vertexes }, disabledOpts)); - } else { - drawControllerBox(ctx, bottomLeft.vertexes); - } - } - const MiddlewareLayoutSelector = (opts) => { - const { sharer, boardContent, calculator, viewer, eventHub } = opts; - const { overlayContext } = boardContent; - let prevPoint = null; - const clear = () => { - prevPoint = null; - sharer.setSharedStorage(keyLayoutActionType, null); - sharer.setSharedStorage(keyLayoutControlType, null); - sharer.setSharedStorage(keyLayoutController, null); - }; - const isInElementAction = () => { - const elementType = sharer.getSharedStorage(keyActionType); - if (elementType) { - return true; - } - return false; - }; - const isDisbaledControl = (controlType) => { - var _a; - const data = sharer.getActiveStorage("data"); - if ((_a = data === null || data === void 0 ? void 0 : data.layout) === null || _a === void 0 ? void 0 : _a.operations) { - const operations = data.layout.operations; - if (controlType === "left" && operations.disabledLeft === true) { - return true; - } - if (controlType === "top" && operations.disabledTop === true) { - return true; - } - if (controlType === "right" && operations.disabledRight === true) { - return true; - } - if (controlType === "bottom" && operations.disabledBottom === true) { - return true; - } - if (controlType === "top-left" && operations.disabledTopLeft === true) { - return true; - } - if (controlType === "top-right" && operations.disabledTopRight === true) { - return true; - } - if (controlType === "bottom-left" && operations.disabledBottomLeft === true) { - return true; - } - if (controlType === "bottom-right" && operations.disabledBottomRight === true) { - return true; - } - } - return false; - }; - const getLayoutSize = () => { - const data = sharer.getActiveStorage("data"); - if (data === null || data === void 0 ? void 0 : data.layout) { - const { x: x2, y: y2, w: w2, h: h2 } = data.layout; - return { x: x2, y: y2, w: w2, h: h2 }; - } - return null; - }; - const resetController = () => { - const viewScaleInfo = sharer.getActiveViewScaleInfo(); - const size = getLayoutSize(); - if (size) { - const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 }); - sharer.setSharedStorage(keyLayoutController, controller); - } else { - sharer.setSharedStorage(keyLayoutController, null); - } - }; - const resetControlType = (e) => { - const data = sharer.getActiveStorage("data"); - const controller = sharer.getSharedStorage(keyLayoutController); - if (controller && (data === null || data === void 0 ? void 0 : data.layout) && (e === null || e === void 0 ? void 0 : e.point)) { - let layoutControlType = null; - if (controller) { - const { topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left } = controller; - const list = [topLeft, top, topRight, right, bottomRight, bottom, bottomLeft, left]; - for (let i = 0; i < list.length; i++) { - const item = list[i]; - if (isViewPointInVertexes(e.point, item.vertexes)) { - layoutControlType = `${item.type}`; - break; - } - } - if (layoutControlType) { - sharer.setSharedStorage(keyLayoutControlType, layoutControlType); - eventHub.trigger(middlewareEventSelectClear, {}); - return layoutControlType; - } - } - } - return null; - }; - return { - name: "@middleware/layout-selector", - use: () => { - clear(); - resetController(); - }, - hover: (e) => { - if (isInElementAction()) { - return; - } - const prevLayoutActionType = sharer.getSharedStorage(keyLayoutActionType); - const data = sharer.getActiveStorage("data"); - if ((data === null || data === void 0 ? void 0 : data.layout) && prevLayoutActionType !== "resize") { - resetController(); - const layoutControlType = resetControlType(e); - if (layoutControlType) { - sharer.setSharedStorage(keyLayoutActionType, "hover"); - if (!isDisbaledControl(layoutControlType)) { - eventHub.trigger("cursor", { - type: `resize-${layoutControlType}`, - groupQueue: [], - element: getLayoutSize() - }); - } - viewer.drawFrame(); - } else { - sharer.setSharedStorage(keyLayoutActionType, null); - } - } - if (["hover", "resize"].includes(sharer.getSharedStorage(keyLayoutActionType))) { - return false; - } - if (prevLayoutActionType === "hover" && !sharer.getSharedStorage(keyLayoutActionType)) { - viewer.drawFrame(); - } - }, - pointStart: (e) => { - if (isInElementAction()) { - return; - } - resetController(); - const layoutControlType = resetControlType(e); - prevPoint = e.point; - if (layoutControlType) { - if (isDisbaledControl(layoutControlType)) { - return; - } - sharer.setSharedStorage(keyLayoutActionType, "resize"); - return false; - } - const layoutActionType = sharer.getSharedStorage(keyLayoutActionType); - if (["hover", "resize"].includes(layoutActionType)) { - return false; - } - }, - pointMove: (e) => { - if (isInElementAction()) { - return; - } - const layoutActionType = sharer.getSharedStorage(keyLayoutActionType); - const layoutControlType = sharer.getSharedStorage(keyLayoutControlType); - const data = sharer.getActiveStorage("data"); - if (layoutControlType && isDisbaledControl(layoutControlType)) { - return; - } - if (layoutActionType === "resize" && layoutControlType && (data === null || data === void 0 ? void 0 : data.layout)) { - if (prevPoint) { - const scale = sharer.getActiveStorage("scale"); - const moveX = (e.point.x - prevPoint.x) / scale; - const moveY = (e.point.y - prevPoint.y) / scale; - const { x: x2, y: y2, w: w2, h: h2 } = data.layout; - if (layoutControlType === "top") { - data.layout.y = calculator.toGridNum(y2 + moveY); - data.layout.h = calculator.toGridNum(h2 - moveY); - } else if (layoutControlType === "right") { - data.layout.w = calculator.toGridNum(w2 + moveX); - } else if (layoutControlType === "bottom") { - data.layout.h = calculator.toGridNum(h2 + moveY); - } else if (layoutControlType === "left") { - data.layout.x = calculator.toGridNum(x2 + moveX); - data.layout.w = calculator.toGridNum(w2 - moveX); - } else if (layoutControlType === "top-left") { - data.layout.x = calculator.toGridNum(x2 + moveX); - data.layout.y = calculator.toGridNum(y2 + moveY); - data.layout.w = calculator.toGridNum(w2 - moveX); - data.layout.h = calculator.toGridNum(h2 - moveY); - } else if (layoutControlType === "top-right") { - data.layout.y = calculator.toGridNum(y2 + moveY); - data.layout.w = calculator.toGridNum(w2 + moveX); - data.layout.h = calculator.toGridNum(h2 - moveY); - } else if (layoutControlType === "bottom-right") { - data.layout.w = calculator.toGridNum(w2 + moveX); - data.layout.h = calculator.toGridNum(h2 + moveY); - } else if (layoutControlType === "bottom-left") { - data.layout.x = calculator.toGridNum(x2 + moveX); - data.layout.w = calculator.toGridNum(w2 - moveX); - data.layout.h = calculator.toGridNum(h2 + moveY); - } - } - prevPoint = e.point; - resetController(); - viewer.drawFrame(); - return false; - } - if (["hover", "resize"].includes(layoutActionType)) { - return false; - } - }, - pointEnd: () => { - const layoutActionType = sharer.getSharedStorage(keyLayoutActionType); - const layoutControlType = sharer.getSharedStorage(keyLayoutControlType); - const data = sharer.getActiveStorage("data"); - if (data && layoutActionType === "resize" && layoutControlType && !isDisbaledControl(layoutControlType)) { - eventHub.trigger(eventChange, { - type: "changeLayout", - data - }); - } - clear(); - }, - beforeDrawFrame: ({ snapshot }) => { - var _a; - const { sharedStore, activeStore } = snapshot; - const layoutActionType = sharedStore[keyLayoutActionType]; - const layoutControlType = sharedStore[keyLayoutControlType]; - if (((_a = activeStore.data) === null || _a === void 0 ? void 0 : _a.layout) && layoutActionType && layoutControlType) { - if (["hover", "resize"].includes(layoutActionType)) { - const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot); - const { x: x2, y: y2, w: w2, h: h2 } = activeStore.data.layout; - const size = { x: x2, y: y2, w: w2, h: h2 }; - const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 }); - drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} }); - } - } - }, - scrollX: () => { - clear(); - }, - scrollY: () => { - clear(); - }, - wheelScale: () => { - clear(); - } - }; - }; var __classPrivateFieldSet = function(receiver, state, value, kind, f) { if (kind === "m") throw new TypeError("Private method is not writable"); diff --git a/src/config.json b/src/config.json index b29f7f5..546393d 100644 --- a/src/config.json +++ b/src/config.json @@ -1,3 +1,3 @@ { - "hash": "ca6228c3bdf367e34807013873" + "hash": "53459f5cb8045879d6a92997a6" } \ No newline at end of file