From b6ce86145a3cddaafd9047329a43f1413b0e9ab0 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Fri, 9 Jul 2021 19:22:55 +0800 Subject: [PATCH] feat: @idraw/core add element lock logic --- packages/core/examples/features/css/index.css | 10 ++-- .../core/examples/features/lib/data/rect.js | 2 +- packages/core/src/index.ts | 7 ++- packages/core/src/lib/config.ts | 1 + packages/core/src/lib/draw/wrapper.ts | 52 +++++++++---------- packages/core/src/lib/helper.ts | 11 ++-- packages/types/src/lib/config.ts | 1 + packages/types/src/lib/element.ts | 1 + packages/types/src/lib/helper.ts | 1 + packages/util/src/lib/data.ts | 2 +- 10 files changed, 50 insertions(+), 38 deletions(-) diff --git a/packages/core/examples/features/css/index.css b/packages/core/examples/features/css/index.css index 8a18b74..a49784e 100644 --- a/packages/core/examples/features/css/index.css +++ b/packages/core/examples/features/css/index.css @@ -9,12 +9,12 @@ html, body { #mount canvas { /* border-right: 1px solid #aaaaaa40; */ - border: 1px solid #aaaaaa40; + border: 1px solid #aaaaaa2a; background-image: - linear-gradient(#aaaaaa40 1px, transparent 0), - linear-gradient(90deg, #aaaaaa40 1px, transparent 0), - linear-gradient(#aaa 1px, transparent 0), - linear-gradient(90deg, #aaa 1px, transparent 0); + linear-gradient(#aaaaaa2a 1px, transparent 0), + linear-gradient(90deg, #aaaaaa2a 1px, transparent 0), + linear-gradient(#aaaaaa1a 1px, transparent 0), + linear-gradient(90deg, #aaaaaa1a 1px, transparent 0); background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px; } diff --git a/packages/core/examples/features/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js index 2da69f4..a3b6bb4 100644 --- a/packages/core/examples/features/lib/data/rect.js +++ b/packages/core/examples/features/lib/data/rect.js @@ -8,7 +8,6 @@ const data = { w: 200, h: 100, type: "rect", - lock: true, desc: { color: "#f0f0f0", borderRadius: 20, @@ -24,6 +23,7 @@ const data = { h: 120, // angle: 30, type: "rect", + lock: true, desc: { color: "#cccccc", borderRadius: 60, diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 47f1bf1..2fb4675 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -385,7 +385,12 @@ class Core { return; } uuids.forEach((uuid) => { - this[_element].dragElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale); + const idx = this[_helper].getElementIndexByUUID(uuid); + if (idx === null) return; + const elem = this[_data].elements[idx]; + if (elem.lock !== true) { + this[_element].dragElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale); + } }); this.draw(); } diff --git a/packages/core/src/lib/config.ts b/packages/core/src/lib/config.ts index d392be5..66d5199 100644 --- a/packages/core/src/lib/config.ts +++ b/packages/core/src/lib/config.ts @@ -3,6 +3,7 @@ import { TypeConfig, TypeConfigStrict } from '@idraw/types'; const defaultConfig: TypeConfigStrict = { elementWrapper: { color: '#2ab6f1', + lockColor: '#aaaaaa', dotSize: 8, lineWidth: 1, lineDash: [4, 3], diff --git a/packages/core/src/lib/draw/wrapper.ts b/packages/core/src/lib/draw/wrapper.ts index 4f79942..c382c77 100644 --- a/packages/core/src/lib/draw/wrapper.ts +++ b/packages/core/src/lib/draw/wrapper.ts @@ -24,35 +24,35 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) { ctx.lineTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y - wrapper.lineWidth / 2); ctx.stroke(); ctx.closePath(); - - - // draw wrapper's rotate line - ctx.beginPath(); - ctx.moveTo(wrapper.dots.top.x, wrapper.dots.top.y); - ctx.lineTo(wrapper.dots.rotate.x, wrapper.dots.rotate.y + wrapper.dotSize); - ctx.stroke(); - ctx.closePath(); - - // draw wrapper's rotate - ctx.beginPath(); - ctx.setLineDash([]); - ctx.setLineWidth(wrapper.dotSize / 2); - ctx.arc(wrapper.dots.rotate.x, wrapper.dots.rotate.y, wrapper.dotSize * 0.8, Math.PI / 6, Math.PI * 2); - ctx.stroke(); - ctx.closePath(); - - // draw wrapper's dots - ctx.setFillStyle(wrapper.color); - [ - wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right, - wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left, - ].forEach((dot) => { + + if (wrapper.lock !== true) { + // draw wrapper's rotate line ctx.beginPath(); - ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); - ctx.fill(); + ctx.moveTo(wrapper.dots.top.x, wrapper.dots.top.y); + ctx.lineTo(wrapper.dots.rotate.x, wrapper.dots.rotate.y + wrapper.dotSize); + ctx.stroke(); ctx.closePath(); - }); + // draw wrapper's rotate + ctx.beginPath(); + ctx.setLineDash([]); + ctx.setLineWidth(wrapper.dotSize / 2); + ctx.arc(wrapper.dots.rotate.x, wrapper.dots.rotate.y, wrapper.dotSize * 0.8, Math.PI / 6, Math.PI * 2); + ctx.stroke(); + ctx.closePath(); + + // draw wrapper's dots + ctx.setFillStyle(wrapper.color); + [ + wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right, + wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left, + ].forEach((dot) => { + ctx.beginPath(); + ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); + ctx.fill(); + ctx.closePath(); + }); + } }); } diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index bf15cb4..a174225 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -233,9 +233,11 @@ export class Helper implements TypeHelper { opts: TypeHelperUpdateOpts ): TypeHeplerSelectedElementWrapper { const { scale } = opts; - const dotSize = this._coreConfig.elementWrapper.dotSize / scale; - const lineWidth = this._coreConfig.elementWrapper.lineWidth / scale; - const lineDash = this._coreConfig.elementWrapper.lineDash.map(n => (n / scale)); + const elemWrapper = this._coreConfig.elementWrapper; + const dotSize = elemWrapper.dotSize / scale; + const lineWidth = elemWrapper.lineWidth / scale; + const lineDash = elemWrapper.lineDash.map(n => (n / scale)); + const rotateLimit = 12; // @ts-ignore const bw = elem.desc?.borderWidth || 0; @@ -243,6 +245,7 @@ export class Helper implements TypeHelper { const wrapper: TypeHeplerSelectedElementWrapper = { uuid: elem.uuid, dotSize: dotSize, + lock: elem.lock === true, dots: { topLeft: { x: elem.x - dotSize - bw, @@ -283,7 +286,7 @@ export class Helper implements TypeHelper { }, lineWidth: lineWidth, lineDash: lineDash, - color: '#2ab6f1', + color: elem.lock === true ? elemWrapper.lockColor : elemWrapper.color, }; if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) { diff --git a/packages/types/src/lib/config.ts b/packages/types/src/lib/config.ts index 10bfbf1..2e538a5 100644 --- a/packages/types/src/lib/config.ts +++ b/packages/types/src/lib/config.ts @@ -15,6 +15,7 @@ type TypeConfig = { type TypeConfigStrict = TypeConfig & { elementWrapper: { color: string, + lockColor: string, dotSize: number, lineWidth: number, lineDash: number[], diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index 9eab9f8..a2926e9 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -12,6 +12,7 @@ type TypeElement = TypeElementAttrs & { name?: string; uuid: string; type: T; + lock?: boolean; desc: TypeElemDesc[T]; } diff --git a/packages/types/src/lib/helper.ts b/packages/types/src/lib/helper.ts index 512250f..9a725eb 100644 --- a/packages/types/src/lib/helper.ts +++ b/packages/types/src/lib/helper.ts @@ -6,6 +6,7 @@ import { TypePoint } from './board'; type TypeHeplerSelectedElementWrapper = { uuid: string; dotSize: number; + lock: boolean; dots: { topLeft: TypePoint, top: TypePoint, diff --git a/packages/util/src/lib/data.ts b/packages/util/src/lib/data.ts index c51a9bb..1442061 100644 --- a/packages/util/src/lib/data.ts +++ b/packages/util/src/lib/data.ts @@ -2,7 +2,7 @@ export function deepClone(target: any): any { function _clone(t: any) { const type = is(t); - if (['Null', 'Number', 'String', 'Undefined'].indexOf(type) >= 0) { + if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) { return t; } else if (type === 'Array') { const arr: any[] = [];