mirror of
https://github.com/idrawjs/idraw
synced 2026-05-23 09:38:22 +00:00
feat: fix typo disableRotate
This commit is contained in:
chenshenhai
parent
2851c33cd1
commit
94ddcadde7
5 changed files with 123 additions and 88 deletions
|
|
@ -1,65 +1,65 @@
|
|||
const data = {
|
||||
bgColor: "#ffffff",
|
||||
bgColor: '#ffffff',
|
||||
elements: [
|
||||
{
|
||||
name: "rect-001",
|
||||
name: 'rect-001',
|
||||
x: 5,
|
||||
y: 5,
|
||||
w: 100,
|
||||
h: 50,
|
||||
type: "rect",
|
||||
type: 'rect',
|
||||
desc: {
|
||||
bgColor: "#ffeb3b",
|
||||
bgColor: '#ffeb3b',
|
||||
borderRadius: 10,
|
||||
borderWidth: 5,
|
||||
borderColor: "#ffc107",
|
||||
},
|
||||
borderColor: '#ffc107'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "text-002",
|
||||
name: 'text-002',
|
||||
x: 40,
|
||||
y: 40,
|
||||
w: 100,
|
||||
h: 60,
|
||||
// angle: 30,
|
||||
type: "text",
|
||||
type: 'text',
|
||||
desc: {
|
||||
fontSize: 16,
|
||||
text: "Hello Text",
|
||||
text: 'Hello Text',
|
||||
fontWeight: 'bold',
|
||||
color: "#666666",
|
||||
color: '#666666',
|
||||
borderRadius: 30,
|
||||
borderWidth: 4,
|
||||
borderColor: "#ff5722",
|
||||
borderColor: '#ff5722'
|
||||
},
|
||||
operation: {
|
||||
disableScale: true,
|
||||
disbaleRotate: true,
|
||||
disableRotate: true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "image-003",
|
||||
name: 'image-003',
|
||||
x: 80,
|
||||
y: 80,
|
||||
w: 160,
|
||||
h: 80,
|
||||
type: "image",
|
||||
type: 'image',
|
||||
desc: {
|
||||
src: './images/computer.png',
|
||||
},
|
||||
src: './images/computer.png'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "svg-004",
|
||||
name: 'svg-004',
|
||||
x: 200 - 5,
|
||||
y: 150 - 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
type: "svg",
|
||||
type: 'svg',
|
||||
desc: {
|
||||
svg: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>',
|
||||
},
|
||||
},
|
||||
],
|
||||
svg: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export function getData() {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
import {
|
||||
TypeContext,
|
||||
TypePoint,
|
||||
TypeData,
|
||||
TypeHelperWrapperControllerDirection,
|
||||
TypeElement,
|
||||
TypeElemDesc,
|
||||
TypeElemDesc
|
||||
} from '@idraw/types';
|
||||
import { createUUID } from '@idraw/util';
|
||||
import { rotateElement } from './transform';
|
||||
|
|
@ -21,7 +22,7 @@ export class Element {
|
|||
this._ctx = ctx;
|
||||
}
|
||||
|
||||
initData (data: TypeData): TypeData {
|
||||
initData(data: TypeData): TypeData {
|
||||
data.elements.forEach((elem) => {
|
||||
if (!(elem.uuid && typeof elem.uuid === 'string')) {
|
||||
elem.uuid = createUUID();
|
||||
|
|
@ -65,15 +66,21 @@ export class Element {
|
|||
return [idx, uuid];
|
||||
}
|
||||
|
||||
dragElement(data: TypeData, uuid: string, point: TypePoint, prevPoint: TypePoint, scale: number): void {
|
||||
dragElement(
|
||||
data: TypeData,
|
||||
uuid: string,
|
||||
point: TypePoint,
|
||||
prevPoint: TypePoint,
|
||||
scale: number
|
||||
): void {
|
||||
const index = this.getElementIndex(data, uuid);
|
||||
if (!data.elements[index]) {
|
||||
return;
|
||||
}
|
||||
const moveX = point.x - prevPoint.x;
|
||||
const moveY = point.y - prevPoint.y;
|
||||
data.elements[index].x += (moveX / scale);
|
||||
data.elements[index].y += (moveY / scale);
|
||||
data.elements[index].x += moveX / scale;
|
||||
data.elements[index].y += moveY / scale;
|
||||
this.limitElementAttrs(data.elements[index]);
|
||||
}
|
||||
|
||||
|
|
@ -85,9 +92,9 @@ export class Element {
|
|||
scale: number,
|
||||
direction: TypeHelperWrapperControllerDirection
|
||||
): null | {
|
||||
width: number,
|
||||
height: number,
|
||||
angle: number,
|
||||
width: number;
|
||||
height: number;
|
||||
angle: number;
|
||||
} {
|
||||
const index = this.getElementIndex(data, uuid);
|
||||
if (!data.elements[index]) {
|
||||
|
|
@ -96,8 +103,8 @@ export class Element {
|
|||
if (data.elements[index]?.operation?.lock === true) {
|
||||
return null;
|
||||
}
|
||||
let moveX = (point.x - prevPoint.x) / scale;
|
||||
let moveY = (point.y - prevPoint.y) / scale;
|
||||
const moveX = (point.x - prevPoint.x) / scale;
|
||||
const moveY = (point.y - prevPoint.y) / scale;
|
||||
const elem = data.elements[index];
|
||||
// const { devicePixelRatio } = this._ctx.getSize();
|
||||
|
||||
|
|
@ -105,10 +112,18 @@ export class Element {
|
|||
// moveY = (point.y - prevPoint.y) / scale;
|
||||
// }
|
||||
|
||||
if ([
|
||||
'top-left', 'top', 'top-right', 'right',
|
||||
'bottom-right', 'bottom', 'bottom-left', 'left'
|
||||
].includes(direction)) {
|
||||
if (
|
||||
[
|
||||
'top-left',
|
||||
'top',
|
||||
'top-right',
|
||||
'right',
|
||||
'bottom-right',
|
||||
'bottom',
|
||||
'bottom-left',
|
||||
'left'
|
||||
].includes(direction)
|
||||
) {
|
||||
const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale);
|
||||
elem.x = p.x;
|
||||
elem.y = p.y;
|
||||
|
|
@ -125,7 +140,7 @@ export class Element {
|
|||
return {
|
||||
width: limitNum(elem.w),
|
||||
height: limitNum(elem.h),
|
||||
angle: limitAngle(elem.angle || 0),
|
||||
angle: limitAngle(elem.angle || 0)
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -147,25 +162,34 @@ export class Element {
|
|||
elem.h = limitNum(elem.h);
|
||||
elem.angle = limitAngle(elem.angle || 0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function calcuScaleElemPosition(
|
||||
elem: TypeElement<keyof TypeElemDesc>,
|
||||
moveX: number,
|
||||
moveY: number,
|
||||
direction: TypeHelperWrapperControllerDirection,
|
||||
scale: number,
|
||||
): TypePoint & { w: number, h: number } {
|
||||
scale: number
|
||||
): TypePoint & { w: number; h: number } {
|
||||
const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h };
|
||||
let angle = elem.angle;
|
||||
if (angle < 0) {
|
||||
angle = Math.max(0, 360 + angle);
|
||||
}
|
||||
if (elem.operation?.limitRatio === true) {
|
||||
if (
|
||||
['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(
|
||||
direction
|
||||
)
|
||||
) {
|
||||
const maxDist = Math.max(Math.abs(moveX), Math.abs(moveY));
|
||||
moveX = (moveX >= 0 ? 1 : -1) * maxDist;
|
||||
moveY = (((moveY >= 0 ? 1 : -1) * maxDist) / elem.w) * elem.h;
|
||||
}
|
||||
}
|
||||
|
||||
switch (direction) {
|
||||
case 'top-left': {
|
||||
|
||||
// TODO
|
||||
|
||||
// if (elem.angle === 0) {
|
||||
|
|
@ -184,15 +208,14 @@ function calcuScaleElemPosition(
|
|||
// } else {
|
||||
// // TODO
|
||||
// }
|
||||
|
||||
if (elem.w - moveX > 0 && elem.h - moveY > 0) {
|
||||
|
||||
if (elem.w - moveX > 0 && elem.h - moveY > 0) {
|
||||
p.x += moveX;
|
||||
p.y += moveY;
|
||||
p.w -= moveX;
|
||||
p.h -= moveY;
|
||||
}
|
||||
|
||||
|
||||
|
||||
break;
|
||||
}
|
||||
case 'top': {
|
||||
|
|
@ -202,7 +225,8 @@ function calcuScaleElemPosition(
|
|||
p.h -= moveY;
|
||||
}
|
||||
} else if (elem.angle > 0 || elem.angle < 0) {
|
||||
const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
const angle =
|
||||
elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
let moveDist = calcMoveDist(moveX, moveY);
|
||||
let centerX = p.x + elem.w / 2;
|
||||
let centerY = p.y + elem.h / 2;
|
||||
|
|
@ -285,7 +309,7 @@ function calcuScaleElemPosition(
|
|||
// centerX = centerX + centerMoveDist * Math.cos(radian);
|
||||
// centerY = centerY + centerMoveDist * Math.sin(radian);
|
||||
// }
|
||||
|
||||
|
||||
// } else if (angle < 180) {
|
||||
// const radianDist = Math.atan(Math.tan(Math.abs(moveX)/Math.abs(moveY)))
|
||||
// const radian = parseRadian(angle);
|
||||
|
|
@ -334,7 +358,8 @@ function calcuScaleElemPosition(
|
|||
p.w += moveX;
|
||||
}
|
||||
} else if (elem.angle > 0 || elem.angle < 0) {
|
||||
const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
const angle =
|
||||
elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
let moveDist = calcMoveDist(moveX, moveY);
|
||||
let centerX = p.x + elem.w / 2;
|
||||
let centerY = p.y + elem.h / 2;
|
||||
|
|
@ -374,7 +399,7 @@ function calcuScaleElemPosition(
|
|||
p.w += moveX;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
break;
|
||||
}
|
||||
case 'bottom-right': {
|
||||
|
|
@ -406,7 +431,8 @@ function calcuScaleElemPosition(
|
|||
p.h += moveY;
|
||||
}
|
||||
} else if (elem.angle > 0 || elem.angle < 0) {
|
||||
const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
const angle =
|
||||
elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
let moveDist = calcMoveDist(moveX, moveY);
|
||||
let centerX = p.x + elem.w / 2;
|
||||
let centerY = p.y + elem.h / 2;
|
||||
|
|
@ -479,7 +505,8 @@ function calcuScaleElemPosition(
|
|||
p.w -= moveX;
|
||||
}
|
||||
} else if (elem.angle > 0 || elem.angle < 0) {
|
||||
const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
const angle =
|
||||
elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360);
|
||||
let moveDist = calcMoveDist(moveX, moveY);
|
||||
let centerX = p.x + elem.w / 2;
|
||||
let centerY = p.y + elem.h / 2;
|
||||
|
|
@ -529,7 +556,7 @@ function calcuScaleElemPosition(
|
|||
}
|
||||
|
||||
function parseRadian(angle: number) {
|
||||
return angle * Math.PI / 180;
|
||||
return (angle * Math.PI) / 180;
|
||||
}
|
||||
|
||||
function calcMoveDist(moveX: number, moveY: number) {
|
||||
|
|
@ -538,4 +565,4 @@ function calcMoveDist(moveX: number, moveY: number) {
|
|||
|
||||
function changeMoveDistDirect(moveDist: number, moveDirect: number) {
|
||||
return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
import {
|
||||
TypeData,
|
||||
TypeHelper,
|
||||
|
|
@ -89,7 +90,7 @@ export class Helper implements TypeHelper {
|
|||
wrapper.controllers.bottom,
|
||||
wrapper.controllers.bottomRight
|
||||
];
|
||||
let directionNames: TypeHelperWrapperControllerDirection[] = [
|
||||
const directionNames: TypeHelperWrapperControllerDirection[] = [
|
||||
'right',
|
||||
'top-right',
|
||||
'top',
|
||||
|
|
@ -337,7 +338,7 @@ export class Helper implements TypeHelper {
|
|||
) {
|
||||
const { selectedUUIDList } = opts;
|
||||
const wrapperList: TypeHeplerSelectedElementWrapper[] = [];
|
||||
data.elements.forEach((elem, i) => {
|
||||
data.elements.forEach((elem) => {
|
||||
if (selectedUUIDList?.includes(elem.uuid)) {
|
||||
const wrapper = this._createSelectedElementWrapper(elem, opts);
|
||||
wrapperList.push(wrapper);
|
||||
|
|
@ -423,7 +424,7 @@ export class Helper implements TypeHelper {
|
|||
rotate: {
|
||||
x: elem.x + elem.w / 2,
|
||||
y: elem.y - controllerSize - (controllerSize * 2 + rotateLimit) - bw,
|
||||
invisible: elem?.operation?.disbaleRotate === true
|
||||
invisible: elem?.operation?.disableRotate === true
|
||||
}
|
||||
},
|
||||
lineWidth: lineWidth,
|
||||
|
|
|
|||
|
|
@ -53,6 +53,10 @@ const data = {
|
|||
type: 'svg',
|
||||
desc: {
|
||||
svg: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>'
|
||||
},
|
||||
operation: {
|
||||
disableRotate: true,
|
||||
limitRatio: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,31 +7,34 @@ type TypeElementAttrs = {
|
|||
h: number;
|
||||
angle: number;
|
||||
operation?: {
|
||||
lock?: boolean,
|
||||
invisible?: boolean,
|
||||
disableScale?: boolean,
|
||||
disbaleRotate?: boolean,
|
||||
}
|
||||
extension?: {[key: string]: any} | any;
|
||||
}
|
||||
lock?: boolean;
|
||||
invisible?: boolean;
|
||||
disableScale?: boolean;
|
||||
disableRotate?: boolean;
|
||||
limitRatio?: boolean;
|
||||
};
|
||||
extension?: { [key: string]: any } | any;
|
||||
};
|
||||
|
||||
type TypeElementBase <T extends keyof TypeElemDesc | TypeElemType> = TypeElementAttrs & {
|
||||
name?: string;
|
||||
uuid?: string;
|
||||
type: T | TypeElemType;
|
||||
desc: TypeElemDesc[T];
|
||||
}
|
||||
type TypeElementBase<T extends keyof TypeElemDesc | TypeElemType> =
|
||||
TypeElementAttrs & {
|
||||
name?: string;
|
||||
uuid?: string;
|
||||
type: T | TypeElemType;
|
||||
desc: TypeElemDesc[T];
|
||||
};
|
||||
|
||||
type TypeElement<T extends keyof TypeElemDesc | TypeElemType> = TypeElementBase<T> & {
|
||||
uuid: string;
|
||||
}
|
||||
type TypeElement<T extends keyof TypeElemDesc | TypeElemType> =
|
||||
TypeElementBase<T> & {
|
||||
uuid: string;
|
||||
};
|
||||
|
||||
type TypeElemDescBase = {
|
||||
shadowColor?: string;
|
||||
shadowOffsetX?: number;
|
||||
shadowOffsetY?: number;
|
||||
shadowBlur?: number;
|
||||
}
|
||||
};
|
||||
|
||||
type TypeElemBoxDesc = {
|
||||
borderRadius?: number;
|
||||
|
|
@ -40,14 +43,14 @@ type TypeElemBoxDesc = {
|
|||
} & TypeElemDescBase;
|
||||
|
||||
type TypeElemDesc = {
|
||||
'text': TypeElemDescText,
|
||||
'rect': TypeElemDescRect,
|
||||
'circle': TypeElemDescCircle,
|
||||
'image': TypeElemDescImage,
|
||||
'svg': TypeElemDescSVG,
|
||||
'html': TypeElemDescHTML,
|
||||
text: TypeElemDescText;
|
||||
rect: TypeElemDescRect;
|
||||
circle: TypeElemDescCircle;
|
||||
image: TypeElemDescImage;
|
||||
svg: TypeElemDescSVG;
|
||||
html: TypeElemDescHTML;
|
||||
// paint: TypeElemDescPaint,
|
||||
}
|
||||
};
|
||||
|
||||
// enum TypeElemType {
|
||||
// text = 'text',
|
||||
|
|
@ -62,7 +65,7 @@ type TypeElemType = 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html';
|
|||
|
||||
type TypeElemDescRect = {
|
||||
bgColor?: string;
|
||||
} & TypeElemBoxDesc
|
||||
} & TypeElemBoxDesc;
|
||||
|
||||
type TypeElemDescText = {
|
||||
text: string;
|
||||
|
|
@ -79,11 +82,11 @@ type TypeElemDescText = {
|
|||
textShadowOffsetX?: number;
|
||||
textShadowOffsetY?: number;
|
||||
textShadowBlur?: number;
|
||||
} & TypeElemBoxDesc
|
||||
} & TypeElemBoxDesc;
|
||||
|
||||
type TypeElemDescCircle = {
|
||||
bgColor: string;
|
||||
} & TypeElemBoxDesc
|
||||
} & TypeElemBoxDesc;
|
||||
|
||||
type TypeElemDescImage = {
|
||||
src: string;
|
||||
|
|
@ -91,13 +94,13 @@ type TypeElemDescImage = {
|
|||
|
||||
type TypeElemDescSVG = {
|
||||
svg: string;
|
||||
}
|
||||
};
|
||||
|
||||
type TypeElemDescHTML = {
|
||||
html: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
};
|
||||
|
||||
// type TypeElemDescPaint = TypePaintData
|
||||
|
||||
|
|
@ -112,5 +115,5 @@ export {
|
|||
TypeElemDesc,
|
||||
TypeElemType,
|
||||
TypeElement,
|
||||
TypeElementBase,
|
||||
};
|
||||
TypeElementBase
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue