From a3a4a2deb43445b5c0882b225b56ebc478c60b1d Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 24 Oct 2021 16:09:41 +0800 Subject: [PATCH] feat: add operation.disableScale and operation.disableRotate to Element --- .../core/examples/features/lib/data/rect.js | 4 +++ packages/core/src/lib/draw/wrapper.ts | 29 ++++++++------- packages/core/src/lib/helper.ts | 35 +++++++++++-------- packages/types/src/lib/element.ts | 2 ++ 4 files changed, 43 insertions(+), 27 deletions(-) diff --git a/packages/core/examples/features/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js index 141967b..de3a42f 100644 --- a/packages/core/examples/features/lib/data/rect.js +++ b/packages/core/examples/features/lib/data/rect.js @@ -61,6 +61,10 @@ const data = { borderWidth: 10, borderColor: "#bd0b64", }, + operation: { + disbaleScale: true, + disbaleRotate: true, + } }, ], }; diff --git a/packages/core/src/lib/draw/wrapper.ts b/packages/core/src/lib/draw/wrapper.ts index dd9f36f..ead4b4a 100644 --- a/packages/core/src/lib/draw/wrapper.ts +++ b/packages/core/src/lib/draw/wrapper.ts @@ -26,20 +26,23 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) { ctx.closePath(); if (wrapper.lock !== true) { - // draw wrapper's rotate line - ctx.beginPath(); - ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y); - ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize); - ctx.stroke(); - ctx.closePath(); + if (wrapper.controllers.rotate.invisible !== true) { + // draw wrapper's rotate line + ctx.beginPath(); + ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y); + ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize); + ctx.stroke(); + ctx.closePath(); - // draw wrapper's rotate - ctx.beginPath(); - ctx.setLineDash([]); - ctx.setLineWidth(wrapper.controllerSize / 2); - ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2); - ctx.stroke(); - ctx.closePath(); + // draw wrapper's rotate + ctx.beginPath(); + ctx.setLineDash([]); + ctx.setLineWidth(wrapper.controllerSize / 2); + ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2); + ctx.stroke(); + ctx.closePath(); + } + // draw wrapper's controllers ctx.setFillStyle(wrapper.color); diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index feaa930..4a5cd11 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -142,16 +142,18 @@ export class Helper implements TypeHelper { } }); if (selectedControllerDirection === null) { - rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { - const controller = wrapper.controllers.rotate; - ctx.beginPath(); - ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2); - ctx.closePath(); - if (ctx.isPointInPath(p.x, p.y)) { - selectedControllerDirection = 'rotate'; - hoverControllerDirection = 'rotate'; - } - }); + const controller = wrapper.controllers.rotate; + if (controller.invisible !== true) { + rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { + ctx.beginPath(); + ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2); + ctx.closePath(); + if (ctx.isPointInPath(p.x, p.y)) { + selectedControllerDirection = 'rotate'; + hoverControllerDirection = 'rotate'; + } + }); + } } return {uuid, selectedControllerDirection, hoverControllerDirection, directIndex}; } @@ -329,42 +331,47 @@ export class Helper implements TypeHelper { topLeft: { x: elem.x - controllerSize - bw, y: elem.y - controllerSize - bw, - invisible: hideObliqueDirection, + invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true, }, top: { x: elem.x + elem.w / 2, y: elem.y - controllerSize - bw, + invisible: elem?.operation?.disbaleScale === true, }, topRight: { x: elem.x + elem.w + controllerSize + bw, y: elem.y - controllerSize - bw, - invisible: hideObliqueDirection, + invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true, }, right: { x: elem.x + elem.w + controllerSize + bw, y: elem.y + elem.h / 2, + invisible: elem?.operation?.disbaleScale === true }, bottomRight: { x: elem.x + elem.w + controllerSize + bw, y: elem.y + elem.h + controllerSize + bw, - invisible: hideObliqueDirection, + invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true, }, bottom: { x: elem.x + elem.w / 2, y: elem.y + elem.h + controllerSize + bw, + invisible: elem?.operation?.disbaleScale === true, }, bottomLeft: { x: elem.x - controllerSize - bw, y: elem.y + elem.h + controllerSize + bw, - invisible: hideObliqueDirection, + invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true, }, left: { x: elem.x - controllerSize - bw, y: elem.y + elem.h / 2, + invisible: elem?.operation?.disbaleScale === true }, rotate: { x: elem.x + elem.w / 2, y: elem.y - controllerSize - (controllerSize * 2 + rotateLimit) - bw, + invisible: elem?.operation?.disbaleRotate === true } }, lineWidth: lineWidth, diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index 8e82d08..53498e7 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -9,6 +9,8 @@ type TypeElementAttrs = { operation?: { lock?: boolean, invisible?: boolean, + disbaleScale?: boolean, + disbaleRotate?: boolean, } extension?: {[key: string]: any} | any; }