Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: @idraw/core add element lock logic

Browse source
This commit is contained in:
chenshenhai 2021-07-09 19:22:55 +08:00
parent ad8eb94df4
commit b6ce86145a
10 changed files with 50 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/core/examples/features/css/index.css
View file

@ -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;
}

2
packages/core/examples/features/lib/data/rect.js
View file

@ -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,

7
packages/core/src/index.ts
View file

@ -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();
}

1
packages/core/src/lib/config.ts
View file

@ -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],

52
packages/core/src/lib/draw/wrapper.ts
View file

@ -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();
});
}
});
}

11
packages/core/src/lib/helper.ts
View file

@ -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)) {

1
packages/types/src/lib/config.ts
View file

@ -15,6 +15,7 @@ type TypeConfig = {
type TypeConfigStrict = TypeConfig & {
elementWrapper: {
color: string,
lockColor: string,
dotSize: number,
lineWidth: number,
lineDash: number[],

1
packages/types/src/lib/element.ts
View file

@ -12,6 +12,7 @@ type TypeElement<T extends keyof TypeElemDesc> = TypeElementAttrs & {
name?: string;
uuid: string;
type: T;
lock?: boolean;
desc: TypeElemDesc[T];
}

1
packages/types/src/lib/helper.ts
View file

@ -6,6 +6,7 @@ import { TypePoint } from './board';
type TypeHeplerSelectedElementWrapper = {
uuid: string;
dotSize: number;
lock: boolean;
dots: {
topLeft: TypePoint,
top: TypePoint,

2
packages/util/src/lib/data.ts
View file

@ -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[] = [];