From ab742b390fab6f55101b7b6bfa76001b4767dca4 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sat, 25 Mar 2023 20:47:15 +0800 Subject: [PATCH] feat: improve wrapper style for selected element --- packages/core/src/lib/config.ts | 14 +-- packages/core/src/lib/draw/wrapper.ts | 168 ++++++++++++++++++++------ packages/core/src/lib/helper.ts | 3 +- 3 files changed, 139 insertions(+), 46 deletions(-) diff --git a/packages/core/src/lib/config.ts b/packages/core/src/lib/config.ts index 476427a..b261e0a 100644 --- a/packages/core/src/lib/config.ts +++ b/packages/core/src/lib/config.ts @@ -3,11 +3,11 @@ import { deepClone } from '@idraw/util'; const defaultConfig: TypeConfigStrict = { elementWrapper: { - color: '#2ab6f1', + color: '#0d85da', lockColor: '#aaaaaa', controllerSize: 6, lineWidth: 1, - lineDash: [4, 3], + lineDash: [4, 3] } }; @@ -15,13 +15,13 @@ function mergeConfig(config?: TypeConfig): TypeConfigStrict { const result = deepClone(defaultConfig); if (config) { if (config.elementWrapper) { - result.elementWrapper = {...result.elementWrapper, ...config.elementWrapper}; + result.elementWrapper = { + ...result.elementWrapper, + ...config.elementWrapper + }; } } return result; } -export { - mergeConfig, -}; - +export { mergeConfig }; diff --git a/packages/core/src/lib/draw/wrapper.ts b/packages/core/src/lib/draw/wrapper.ts index ead4b4a..0bb1b90 100644 --- a/packages/core/src/lib/draw/wrapper.ts +++ b/packages/core/src/lib/draw/wrapper.ts @@ -1,7 +1,4 @@ -import { - TypeContext, - TypeHelperConfig, -} from '@idraw/types'; +import { TypeContext, TypeHelperConfig } from '@idraw/types'; import { rotateContext } from './../transform'; import { clearContext } from './base'; @@ -19,33 +16,63 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) { ctx.setStrokeStyle(wrapper.color); ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y); ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y); - ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y); - ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y); - ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2); + ctx.lineTo( + wrapper.controllers.bottomRight.x, + wrapper.controllers.bottomRight.y + ); + ctx.lineTo( + wrapper.controllers.bottomLeft.x, + wrapper.controllers.bottomLeft.y + ); + ctx.lineTo( + wrapper.controllers.topLeft.x, + wrapper.controllers.topLeft.y - wrapper.lineWidth / 2 + ); ctx.stroke(); ctx.closePath(); - + if (wrapper.lock !== true) { 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.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.setLineWidth(wrapper.controllerSize / 1.2); + ctx.arc( + wrapper.controllers.rotate.x, + wrapper.controllers.rotate.y, + wrapper.controllerSize * 0.8, + 0, + Math.PI * 2 + ); + ctx.stroke(); + ctx.closePath(); + + ctx.setStrokeStyle('#FFFFFF'); + ctx.beginPath(); + ctx.setLineDash([]); + ctx.setLineWidth(wrapper.controllerSize / 2.1); + ctx.arc( + wrapper.controllers.rotate.x, + wrapper.controllers.rotate.y, + wrapper.controllerSize * 0.8, + 0, + Math.PI * 2 + ); ctx.stroke(); ctx.closePath(); } - // draw wrapper's controllers - ctx.setFillStyle(wrapper.color); [ wrapper.controllers.topLeft, wrapper.controllers.top, @@ -54,11 +81,30 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) { wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, - wrapper.controllers.left, + wrapper.controllers.left ].forEach((controller) => { if (controller.invisible !== true) { + ctx.setFillStyle(wrapper.color); ctx.beginPath(); - ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2); + ctx.arc( + controller.x, + controller.y, + wrapper.controllerSize, + 0, + Math.PI * 2 + ); + ctx.fill(); + ctx.closePath(); + + ctx.setFillStyle('#FFFFFF'); + ctx.beginPath(); + ctx.arc( + controller.x, + controller.y, + wrapper.controllerSize - 1, + 0, + Math.PI * 2 + ); ctx.fill(); ctx.closePath(); } @@ -68,19 +114,36 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) { clearContext(ctx); ctx.setStrokeStyle(wrapper.color); [ - wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right, - wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left, + wrapper.controllers.topLeft, + wrapper.controllers.top, + wrapper.controllers.topRight, + wrapper.controllers.right, + wrapper.controllers.bottomRight, + wrapper.controllers.bottom, + wrapper.controllers.bottomLeft, + wrapper.controllers.left ].forEach((controller) => { - ctx.beginPath(); - ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2); - ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2); + ctx.moveTo( + controller.x - wrapper.controllerSize / 2, + controller.y - wrapper.controllerSize / 2 + ); + ctx.lineTo( + controller.x + wrapper.controllerSize / 2, + controller.y + wrapper.controllerSize / 2 + ); ctx.stroke(); ctx.closePath(); ctx.beginPath(); - ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2); - ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2); + ctx.moveTo( + controller.x + wrapper.controllerSize / 2, + controller.y - wrapper.controllerSize / 2 + ); + ctx.lineTo( + controller.x - wrapper.controllerSize / 2, + controller.y + wrapper.controllerSize / 2 + ); ctx.stroke(); ctx.closePath(); }); @@ -112,10 +175,12 @@ export function drawAreaWrapper(ctx: TypeContext, config: TypeHelperConfig) { ctx.stroke(); ctx.closePath(); } - } -export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConfig) { +export function drawElementListWrappers( + ctx: TypeContext, + config: TypeHelperConfig +) { if (!Array.isArray(config?.selectedElementListWrappers)) { return; } @@ -124,7 +189,6 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf wrapperList?.forEach((wrapper) => { clearContext(ctx); rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { - clearContext(ctx); ctx.setGlobalAlpha(0.05); ctx.setFillStyle(wrapper.color); @@ -132,7 +196,7 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y, wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x, - wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y, + wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y ); clearContext(ctx); @@ -141,10 +205,22 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf ctx.setLineWidth(wrapper.lineWidth); ctx.setStrokeStyle(wrapper.color); ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y); - ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y); - ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y); - ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y); - ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2); + ctx.lineTo( + wrapper.controllers.topRight.x, + wrapper.controllers.topRight.y + ); + ctx.lineTo( + wrapper.controllers.bottomRight.x, + wrapper.controllers.bottomRight.y + ); + ctx.lineTo( + wrapper.controllers.bottomLeft.x, + wrapper.controllers.bottomLeft.y + ); + ctx.lineTo( + wrapper.controllers.topLeft.x, + wrapper.controllers.topLeft.y - wrapper.lineWidth / 2 + ); ctx.stroke(); ctx.closePath(); @@ -154,24 +230,40 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf // ctx.setFillStyle(wrapper.color); ctx.setStrokeStyle(wrapper.color); [ - wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right, - wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left, + wrapper.controllers.topLeft, + wrapper.controllers.top, + wrapper.controllers.topRight, + wrapper.controllers.right, + wrapper.controllers.bottomRight, + wrapper.controllers.bottom, + wrapper.controllers.bottomLeft, + wrapper.controllers.left ].forEach((controller) => { ctx.beginPath(); - ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2); - ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2); + ctx.moveTo( + controller.x - wrapper.controllerSize / 2, + controller.y - wrapper.controllerSize / 2 + ); + ctx.lineTo( + controller.x + wrapper.controllerSize / 2, + controller.y + wrapper.controllerSize / 2 + ); ctx.stroke(); ctx.closePath(); ctx.beginPath(); - ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2); - ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2); + ctx.moveTo( + controller.x + wrapper.controllerSize / 2, + controller.y - wrapper.controllerSize / 2 + ); + ctx.lineTo( + controller.x - wrapper.controllerSize / 2, + controller.y + wrapper.controllerSize / 2 + ); ctx.stroke(); ctx.closePath(); }); } - }); }); } - diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 9412375..7d00b17 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -107,7 +107,7 @@ export class Helper implements TypeHelper { const elemIdx = this.getElementIndexByUUID(uuid); if (elemIdx !== null && elemIdx >= 0) { const elem = data.elements[elemIdx]; - let angle = elem.angle; + let angle = elem.angle || 0; if (angle < 0) { angle += 360; } @@ -150,6 +150,7 @@ export class Helper implements TypeHelper { Math.PI * 2 ); ctx.closePath(); + if (ctx.isPointInPath(p.x, p.y)) { selectedControllerDirection = directionNames[i]; hoverControllerDirection = hoverDirectionNames[i];