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

Merge pull request #174 from idrawjs/dev-improve-0.3

Browse source 
feat: improve wrapper style for selected element
This commit is contained in:
大深海 2023-03-25 20:50:33 +08:00 committed by GitHub
commit 8bae120003
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 139 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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