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

Refactor: rename dot to controller

Browse source
This commit is contained in:
chenshenhai 2021-10-24 15:35:12 +08:00
parent 705fdb3a43
commit 82c3d45b98
16 changed files with 136 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/core/examples/features/lib/main.js
View file

@ -32,7 +32,7 @@ const core = new Core(mount, {
elementWrapper: { elementWrapper: {
lockColor: '#009688', lockColor: '#009688',
color: '#e91e63', color: '#e91e63',
dotSize: 6, controllerSize: 6,
lineWidth: 1, lineWidth: 1,
// lineDash: [12, 12], // lineDash: [12, 12],
}, },

4
packages/core/examples/test/api.html
View file

@ -111,7 +111,7 @@
} }
var config = { var config = {
elementWrapper: { elementWrapper: {
dotSize: 4, controllerSize: 4,
}, },
}; };
var elemText1 = { var elemText1 = {
@ -197,7 +197,7 @@
}, },
elementWrapper: { elementWrapper: {
color: '#e91e63', color: '#e91e63',
dotSize: 4, controllerSize: 4,
lineWidth: 1, lineWidth: 1,
lineDash: [12, 12], lineDash: [12, 12],
}, },

2
packages/core/examples/test/elements.html
View file

@ -84,7 +84,7 @@
} }
var config = { var config = {
elementWrapper: { elementWrapper: {
dotSize: 4, controllerSize: 4,
} }
} }
</script> </script>

2
packages/core/examples/test/event.html
View file

@ -60,7 +60,7 @@
} }
var config = { var config = {
elementWrapper: { elementWrapper: {
dotSize: 4, controllerSize: 4,
}, },
}; };
var elemText1 = { var elemText1 = {

2
packages/core/examples/test/resource.html
View file

@ -77,7 +77,7 @@
} }
var config = { var config = {
elementWrapper: { elementWrapper: {
dotSize: 4, controllerSize: 4,
} }
} }
</script> </script>

2
packages/core/src/constant/static.ts
View file

@ -2,7 +2,7 @@ export enum Mode {
NULL = 'null', NULL = 'null',
SELECT_ELEMENT = 'select-element', SELECT_ELEMENT = 'select-element',
SELECT_ELEMENT_LIST = 'select-element-list', SELECT_ELEMENT_LIST = 'select-element-list',
SELECT_ELEMENT_WRAPPER_DOT = 'select-element-wrapper-dot', SELECT_ELEMENT_WRAPPER_CONTROLLER = 'select-element-wrapper-controller',
SELECT_AREA = 'select-area', SELECT_AREA = 'select-area',
} }

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

@ -5,7 +5,7 @@ const defaultConfig: TypeConfigStrict = {
elementWrapper: { elementWrapper: {
color: '#2ab6f1', color: '#2ab6f1',
lockColor: '#aaaaaa', lockColor: '#aaaaaa',
dotSize: 6, controllerSize: 6,
lineWidth: 1, lineWidth: 1,
lineDash: [4, 3], lineDash: [4, 3],
} }

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

@ -17,67 +17,67 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
ctx.setLineDash(wrapper.lineDash); ctx.setLineDash(wrapper.lineDash);
ctx.setLineWidth(wrapper.lineWidth); ctx.setLineWidth(wrapper.lineWidth);
ctx.setStrokeStyle(wrapper.color); ctx.setStrokeStyle(wrapper.color);
ctx.moveTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y); ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
ctx.lineTo(wrapper.dots.topRight.x, wrapper.dots.topRight.y); ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
ctx.lineTo(wrapper.dots.bottomRight.x, wrapper.dots.bottomRight.y); ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
ctx.lineTo(wrapper.dots.bottomLeft.x, wrapper.dots.bottomLeft.y); ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
ctx.lineTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y - wrapper.lineWidth / 2); ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
if (wrapper.lock !== true) { if (wrapper.lock !== true) {
// draw wrapper's rotate line // draw wrapper's rotate line
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(wrapper.dots.top.x, wrapper.dots.top.y); ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
ctx.lineTo(wrapper.dots.rotate.x, wrapper.dots.rotate.y + wrapper.dotSize); ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
// draw wrapper's rotate // draw wrapper's rotate
ctx.beginPath(); ctx.beginPath();
ctx.setLineDash([]); ctx.setLineDash([]);
ctx.setLineWidth(wrapper.dotSize / 2); ctx.setLineWidth(wrapper.controllerSize / 2);
ctx.arc(wrapper.dots.rotate.x, wrapper.dots.rotate.y, wrapper.dotSize * 0.8, Math.PI / 6, Math.PI * 2); ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
// draw wrapper's dots // draw wrapper's controllers
ctx.setFillStyle(wrapper.color); ctx.setFillStyle(wrapper.color);
[ [
wrapper.dots.topLeft, wrapper.controllers.topLeft,
wrapper.dots.top, wrapper.controllers.top,
wrapper.dots.topRight, wrapper.controllers.topRight,
wrapper.dots.right, wrapper.controllers.right,
wrapper.dots.bottomRight, wrapper.controllers.bottomRight,
wrapper.dots.bottom, wrapper.controllers.bottom,
wrapper.dots.bottomLeft, wrapper.controllers.bottomLeft,
wrapper.dots.left, wrapper.controllers.left,
].forEach((dot) => { ].forEach((controller) => {
if (dot.invisible !== true) { if (controller.invisible !== true) {
ctx.beginPath(); ctx.beginPath();
ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
ctx.fill(); ctx.fill();
ctx.closePath(); ctx.closePath();
} }
}); });
} else { } else {
// draw wrapper's lock dots, // draw wrapper's lock controllers,
clearContext(ctx); clearContext(ctx);
ctx.setStrokeStyle(wrapper.color); ctx.setStrokeStyle(wrapper.color);
[ [
wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right, wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left, wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
].forEach((dot) => { ].forEach((controller) => {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(dot.x - wrapper.dotSize / 2, dot.y - wrapper.dotSize / 2); ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
ctx.lineTo(dot.x + wrapper.dotSize / 2, dot.y + wrapper.dotSize / 2); ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(dot.x + wrapper.dotSize / 2, dot.y - wrapper.dotSize / 2); ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
ctx.lineTo(dot.x - wrapper.dotSize / 2, dot.y + wrapper.dotSize / 2); ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
}); });
@ -126,10 +126,10 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf
ctx.setGlobalAlpha(0.05); ctx.setGlobalAlpha(0.05);
ctx.setFillStyle(wrapper.color); ctx.setFillStyle(wrapper.color);
ctx.fillRect( ctx.fillRect(
wrapper.dots.topLeft.x, wrapper.controllers.topLeft.x,
wrapper.dots.topLeft.y, wrapper.controllers.topLeft.y,
wrapper.dots.bottomRight.x - wrapper.dots.topLeft.x, wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x,
wrapper.dots.bottomRight.y - wrapper.dots.topLeft.y, wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y,
); );
clearContext(ctx); clearContext(ctx);
@ -137,32 +137,32 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf
ctx.setLineDash(wrapper.lineDash); ctx.setLineDash(wrapper.lineDash);
ctx.setLineWidth(wrapper.lineWidth); ctx.setLineWidth(wrapper.lineWidth);
ctx.setStrokeStyle(wrapper.color); ctx.setStrokeStyle(wrapper.color);
ctx.moveTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y); ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
ctx.lineTo(wrapper.dots.topRight.x, wrapper.dots.topRight.y); ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
ctx.lineTo(wrapper.dots.bottomRight.x, wrapper.dots.bottomRight.y); ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
ctx.lineTo(wrapper.dots.bottomLeft.x, wrapper.dots.bottomLeft.y); ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
ctx.lineTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y - wrapper.lineWidth / 2); ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
if (wrapper.lock === true) { if (wrapper.lock === true) {
// draw wrapper's lock dots, // draw wrapper's lock controllers,
clearContext(ctx); clearContext(ctx);
// ctx.setFillStyle(wrapper.color); // ctx.setFillStyle(wrapper.color);
ctx.setStrokeStyle(wrapper.color); ctx.setStrokeStyle(wrapper.color);
[ [
wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right, wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left, wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
].forEach((dot) => { ].forEach((controller) => {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(dot.x - wrapper.dotSize / 2, dot.y - wrapper.dotSize / 2); ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
ctx.lineTo(dot.x + wrapper.dotSize / 2, dot.y + wrapper.dotSize / 2); ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(dot.x + wrapper.dotSize / 2, dot.y - wrapper.dotSize / 2); ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
ctx.lineTo(dot.x - wrapper.dotSize / 2, dot.y + wrapper.dotSize / 2); ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
}); });

6
packages/core/src/lib/element.ts
View file

@ -2,7 +2,7 @@ import {
TypeContext, TypeContext,
TypePoint, TypePoint,
TypeData, TypeData,
TypeHelperWrapperDotDirection, TypeHelperWrapperControllerDirection,
TypeElement, TypeElement,
TypeElemDesc, TypeElemDesc,
} from '@idraw/types'; } from '@idraw/types';
@ -84,7 +84,7 @@ export class Element {
point: TypePoint, point: TypePoint,
prevPoint: TypePoint, prevPoint: TypePoint,
scale: number, scale: number,
direction: TypeHelperWrapperDotDirection direction: TypeHelperWrapperControllerDirection
): null | { ): null | {
width: number, width: number,
height: number, height: number,
@ -156,7 +156,7 @@ function calcuScaleElemPosition(
elem: TypeElement<keyof TypeElemDesc>, elem: TypeElement<keyof TypeElemDesc>,
moveX: number, moveX: number,
moveY: number, moveY: number,
direction: TypeHelperWrapperDotDirection, direction: TypeHelperWrapperControllerDirection,
scale: number, scale: number,
): TypePoint & { w: number, h: number } { ): TypePoint & { w: number, h: number } {
const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h }; const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h };

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

@ -1,6 +1,6 @@
import { import {
TypeData, TypeHelper, TypeHelperConfig, TypeHelperUpdateOpts, TypeData, TypeHelper, TypeHelperConfig, TypeHelperUpdateOpts,
TypeHelperWrapperDotDirection, TypeElement, TypeHelperWrapperControllerDirection, TypeElement,
TypeElemDesc, TypeContext, TypePoint, TypeConfigStrict, TypeElemDesc, TypeContext, TypePoint, TypeConfigStrict,
TypeHeplerSelectedElementWrapper TypeHeplerSelectedElementWrapper
} from '@idraw/types'; } from '@idraw/types';
@ -53,33 +53,33 @@ export class Helper implements TypeHelper {
return null; return null;
} }
isPointInElementWrapperDot(p: TypePoint, data?: TypeData): isPointInElementWrapperController(p: TypePoint, data?: TypeData):
{ {
uuid: string | null | undefined, uuid: string | null | undefined,
selectedDotDirection: TypeHelperWrapperDotDirection | null, selectedControllerDirection: TypeHelperWrapperControllerDirection | null,
hoverDotDirection: TypeHelperWrapperDotDirection | null, hoverControllerDirection: TypeHelperWrapperControllerDirection | null,
directIndex: number | null, directIndex: number | null,
} { } {
const ctx = this._ctx; const ctx = this._ctx;
const uuid = this._helperConfig?.selectedElementWrapper?.uuid || null; const uuid = this._helperConfig?.selectedElementWrapper?.uuid || null;
let directIndex = null; let directIndex = null;
let selectedDotDirection: TypeHelperWrapperDotDirection | null = null; let selectedControllerDirection: TypeHelperWrapperControllerDirection | null = null;
let hoverDotDirection: TypeHelperWrapperDotDirection | null = null; let hoverControllerDirection: TypeHelperWrapperControllerDirection | null = null;
if (!this._helperConfig.selectedElementWrapper) { if (!this._helperConfig.selectedElementWrapper) {
return {uuid, selectedDotDirection, directIndex, hoverDotDirection}; return {uuid, selectedControllerDirection, directIndex, hoverControllerDirection};
} }
const wrapper = this._helperConfig.selectedElementWrapper; const wrapper = this._helperConfig.selectedElementWrapper;
const dots = [ const controllers = [
wrapper.dots.right, wrapper.controllers.right,
wrapper.dots.topRight, wrapper.controllers.topRight,
wrapper.dots.top, wrapper.controllers.top,
wrapper.dots.topLeft, wrapper.controllers.topLeft,
wrapper.dots.left, wrapper.controllers.left,
wrapper.dots.bottomLeft, wrapper.controllers.bottomLeft,
wrapper.dots.bottom, wrapper.controllers.bottom,
wrapper.dots.bottomRight, wrapper.controllers.bottomRight,
]; ];
let directionNames: TypeHelperWrapperDotDirection[] = [ let directionNames: TypeHelperWrapperControllerDirection[] = [
'right', 'right',
'top-right', 'top-right',
'top', 'top',
@ -123,37 +123,37 @@ export class Helper implements TypeHelper {
rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
for (let i = 0; i < dots.length; i ++) { for (let i = 0; i < controllers.length; i ++) {
const dot = dots[i]; const controller = controllers[i];
if (dot.invisible === true) { if (controller.invisible === true) {
continue; continue;
} }
ctx.beginPath(); ctx.beginPath();
ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
ctx.closePath(); ctx.closePath();
if (ctx.isPointInPath(p.x, p.y)) { if (ctx.isPointInPath(p.x, p.y)) {
selectedDotDirection = directionNames[i]; selectedControllerDirection = directionNames[i];
hoverDotDirection = hoverDirectionNames[i]; hoverControllerDirection = hoverDirectionNames[i];
} }
if (selectedDotDirection) { if (selectedControllerDirection) {
directIndex = i; directIndex = i;
break; break;
} }
} }
}); });
if (selectedDotDirection === null) { if (selectedControllerDirection === null) {
rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
const dot = wrapper.dots.rotate; const controller = wrapper.controllers.rotate;
ctx.beginPath(); ctx.beginPath();
ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
ctx.closePath(); ctx.closePath();
if (ctx.isPointInPath(p.x, p.y)) { if (ctx.isPointInPath(p.x, p.y)) {
selectedDotDirection = 'rotate'; selectedControllerDirection = 'rotate';
hoverDotDirection = 'rotate'; hoverControllerDirection = 'rotate';
} }
}); });
} }
return {uuid, selectedDotDirection, hoverDotDirection, directIndex}; return {uuid, selectedControllerDirection, hoverControllerDirection, directIndex};
} }
isPointInElementList(p: TypePoint, data: TypeData): boolean { isPointInElementList(p: TypePoint, data: TypeData): boolean {
@ -309,7 +309,7 @@ export class Helper implements TypeHelper {
): TypeHeplerSelectedElementWrapper { ): TypeHeplerSelectedElementWrapper {
const { scale } = opts; const { scale } = opts;
const elemWrapper = this._coreConfig.elementWrapper; const elemWrapper = this._coreConfig.elementWrapper;
const dotSize = elemWrapper.dotSize / scale; const controllerSize = elemWrapper.controllerSize / scale;
const lineWidth = elemWrapper.lineWidth / scale; const lineWidth = elemWrapper.lineWidth / scale;
const lineDash = elemWrapper.lineDash.map(n => (n / scale)); const lineDash = elemWrapper.lineDash.map(n => (n / scale));
@ -323,48 +323,48 @@ export class Helper implements TypeHelper {
const wrapper: TypeHeplerSelectedElementWrapper = { const wrapper: TypeHeplerSelectedElementWrapper = {
uuid: elem.uuid, uuid: elem.uuid,
dotSize: dotSize, controllerSize: controllerSize,
lock: elem?.operation?.lock === true, lock: elem?.operation?.lock === true,
dots: { controllers: {
topLeft: { topLeft: {
x: elem.x - dotSize - bw, x: elem.x - controllerSize - bw,
y: elem.y - dotSize - bw, y: elem.y - controllerSize - bw,
invisible: hideObliqueDirection, invisible: hideObliqueDirection,
}, },
top: { top: {
x: elem.x + elem.w / 2, x: elem.x + elem.w / 2,
y: elem.y - dotSize - bw, y: elem.y - controllerSize - bw,
}, },
topRight: { topRight: {
x: elem.x + elem.w + dotSize + bw, x: elem.x + elem.w + controllerSize + bw,
y: elem.y - dotSize - bw, y: elem.y - controllerSize - bw,
invisible: hideObliqueDirection, invisible: hideObliqueDirection,
}, },
right: { right: {
x: elem.x + elem.w + dotSize + bw, x: elem.x + elem.w + controllerSize + bw,
y: elem.y + elem.h / 2, y: elem.y + elem.h / 2,
}, },
bottomRight: { bottomRight: {
x: elem.x + elem.w + dotSize + bw, x: elem.x + elem.w + controllerSize + bw,
y: elem.y + elem.h + dotSize + bw, y: elem.y + elem.h + controllerSize + bw,
invisible: hideObliqueDirection, invisible: hideObliqueDirection,
}, },
bottom: { bottom: {
x: elem.x + elem.w / 2, x: elem.x + elem.w / 2,
y: elem.y + elem.h + dotSize + bw, y: elem.y + elem.h + controllerSize + bw,
}, },
bottomLeft: { bottomLeft: {
x: elem.x - dotSize - bw, x: elem.x - controllerSize - bw,
y: elem.y + elem.h + dotSize + bw, y: elem.y + elem.h + controllerSize + bw,
invisible: hideObliqueDirection, invisible: hideObliqueDirection,
}, },
left: { left: {
x: elem.x - dotSize - bw, x: elem.x - controllerSize - bw,
y: elem.y + elem.h / 2, y: elem.y + elem.h / 2,
}, },
rotate: { rotate: {
x: elem.x + elem.w / 2, x: elem.x + elem.w / 2,
y: elem.y - dotSize - (dotSize * 2 + rotateLimit) - bw, y: elem.y - controllerSize - (controllerSize * 2 + rotateLimit) - bw,
} }
}, },
lineWidth: lineWidth, lineWidth: lineWidth,

4
packages/core/src/lib/mapper.ts
View file

@ -46,9 +46,9 @@ export class Mapper {
if (!this.isEffectivePoint(p)) { if (!this.isEffectivePoint(p)) {
return { cursor, elementUUID}; return { cursor, elementUUID};
} }
const { uuid, hoverDotDirection } = this[_helper].isPointInElementWrapperDot(p, data); const { uuid, hoverControllerDirection } = this[_helper].isPointInElementWrapperController(p, data);
const direction = hoverDotDirection; const direction = hoverControllerDirection;
if (uuid && direction) { if (uuid && direction) {
switch (direction) { switch (direction) {
case 'top-right' : { case 'top-right' : {

10
packages/core/src/lib/temp.ts
View file

@ -1,4 +1,4 @@
import { TypeHelperWrapperDotDirection, TypePoint } from '@idraw/types'; import { TypeHelperWrapperControllerDirection, TypePoint } from '@idraw/types';
import { Mode, CursorStatus } from './../constant/static'; import { Mode, CursorStatus } from './../constant/static';
type TempDataDesc = { type TempDataDesc = {
@ -9,8 +9,8 @@ type TempDataDesc = {
selectedUUID: string | null, selectedUUID: string | null,
selectedUUIDList: string[], selectedUUIDList: string[],
hoverUUID: string | null, hoverUUID: string | null,
selectedDotDirection: TypeHelperWrapperDotDirection | null, selectedControllerDirection: TypeHelperWrapperControllerDirection | null,
hoverDotDirection: TypeHelperWrapperDotDirection | null, hoverControllerDirection: TypeHelperWrapperControllerDirection | null,
prevPoint: TypePoint | null, prevPoint: TypePoint | null,
} }
@ -23,8 +23,8 @@ function createData(): TempDataDesc {
selectedUUID: null, selectedUUID: null,
selectedUUIDList: [], selectedUUIDList: [],
hoverUUID: null, hoverUUID: null,
selectedDotDirection: null, selectedControllerDirection: null,
hoverDotDirection: null, hoverControllerDirection: null,
prevPoint: null, prevPoint: null,
} }
} }

18
packages/core/src/mixins/event.ts
View file

@ -1,4 +1,4 @@
import { TypePoint, TypeHelperWrapperDotDirection } from '@idraw/types'; import { TypePoint, TypeHelperWrapperControllerDirection } from '@idraw/types';
import util from '@idraw/util'; import util from '@idraw/util';
import Core from './../index'; import Core from './../index';
import { import {
@ -67,12 +67,12 @@ function handlePoint(core: Core) {
core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST); core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST);
} else { } else {
const { const {
uuid, selectedDotDirection uuid, selectedControllerDirection
} = core[_helper].isPointInElementWrapperDot(point, core[_data]); } = core[_helper].isPointInElementWrapperController(point, core[_data]);
if (uuid && selectedDotDirection) { if (uuid && selectedControllerDirection) {
// Controll Element-Wrapper // Controll Element-Wrapper
core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_DOT); core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
core[_tempData].set('selectedDotDirection', selectedDotDirection); core[_tempData].set('selectedControllerDirection', selectedControllerDirection);
core[_tempData].set('selectedUUID', uuid); core[_tempData].set('selectedUUID', uuid);
} else { } else {
const [index, uuid] = core[_element].isPointInElement(point, core[_data]); const [index, uuid] = core[_element].isPointInElement(point, core[_data]);
@ -148,13 +148,13 @@ function handleMove(core: Core) {
dragElements(core, [core[_tempData].get('selectedUUID') as string], point, core[_tempData].get('prevPoint')); dragElements(core, [core[_tempData].get('selectedUUID') as string], point, core[_tempData].get('prevPoint'));
core[_draw](); core[_draw]();
core[_tempData].set('cursorStatus', CursorStatus.DRAGGING); core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
} else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_DOT && core[_tempData].get('selectedDotDirection')) { } else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && core[_tempData].get('selectedControllerDirection')) {
transfromElement( transfromElement(
core, core,
core[_tempData].get('selectedUUID') as string, core[_tempData].get('selectedUUID') as string,
point, point,
core[_tempData].get('prevPoint'), core[_tempData].get('prevPoint'),
core[_tempData].get('selectedDotDirection') as TypeHelperWrapperDotDirection core[_tempData].get('selectedControllerDirection') as TypeHelperWrapperControllerDirection
); );
core[_tempData].set('cursorStatus', CursorStatus.DRAGGING) core[_tempData].set('cursorStatus', CursorStatus.DRAGGING)
} }
@ -283,7 +283,7 @@ function handleLeave(core: Core) {
function transfromElement( function transfromElement(
core: Core, core: Core,
uuid: string, point: TypePoint, prevPoint: TypePoint|null, direction: TypeHelperWrapperDotDirection uuid: string, point: TypePoint, prevPoint: TypePoint|null, direction: TypeHelperWrapperControllerDirection
): null | { ): null | {
width: number, width: number,
height: number, height: number,

2
packages/idraw/examples/test/api.html
View file

@ -129,7 +129,7 @@
} }
var config = { var config = {
elementWrapper: { elementWrapper: {
dotSize: 4, controllerSize: 4,
} }
} }
</script> </script>

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

@ -1,7 +1,7 @@
type TypeConfig = { type TypeConfig = {
elementWrapper?: { elementWrapper?: {
color?: string, color?: string,
dotSize?: number, controllerSize?: number,
lineWidth?: number, lineWidth?: number,
lineDash?: number[], lineDash?: number[],
}, },
@ -16,7 +16,7 @@ type TypeConfigStrict = TypeConfig & {
elementWrapper: { elementWrapper: {
color: string, color: string,
lockColor: string, lockColor: string,
dotSize: number, controllerSize: number,
lineWidth: number, lineWidth: number,
lineDash: number[], lineDash: number[],
}, },

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

@ -3,24 +3,24 @@ import { TypePoint } from './board';
// type test = {[uuid string]: TypeElement} // type test = {[uuid string]: TypeElement}
type TypeDot = TypePoint & { type TypeController = TypePoint & {
invisible?: boolean; invisible?: boolean;
}; };
type TypeHeplerSelectedElementWrapper = { type TypeHeplerSelectedElementWrapper = {
uuid: string; uuid: string;
dotSize: number; controllerSize: number;
lock: boolean; lock: boolean;
dots: { controllers: {
topLeft: TypeDot, topLeft: TypeController,
top: TypeDot, top: TypeController,
topRight: TypeDot, topRight: TypeController,
right: TypeDot, right: TypeController,
bottomRight: TypeDot, bottomRight: TypeController,
bottom: TypeDot, bottom: TypeController,
bottomLeft: TypeDot, bottomLeft: TypeController,
left: TypeDot, left: TypeController,
rotate: TypeDot, rotate: TypeController,
}, },
lineDash: number[]; lineDash: number[];
lineWidth: number; lineWidth: number;
@ -69,7 +69,7 @@ interface TypeHelper {
getConfig(): TypeHelperConfig; getConfig(): TypeHelperConfig;
} }
type TypeHelperWrapperDotDirection type TypeHelperWrapperControllerDirection
= 'top-left' | 'top' | 'top-right' | 'right' = 'top-left' | 'top' | 'top-right' | 'right'
| 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left'
| 'rotate'; | 'rotate';
@ -78,7 +78,7 @@ export {
TypeHelper, TypeHelper,
TypeHelperConfig, TypeHelperConfig,
TypeHelperUpdateOpts, TypeHelperUpdateOpts,
TypeHelperWrapperDotDirection, TypeHelperWrapperControllerDirection,
TypeHeplerSelectedElementWrapper, TypeHeplerSelectedElementWrapper,
TypeHeplerSelectedAreaWrapper, TypeHeplerSelectedAreaWrapper,
}; };