Skip to content

Commit

Permalink
perf(ts): 语法提示修复
Browse files Browse the repository at this point in the history
  • Loading branch information
@nihaojob
nihaojob committed Feb 20, 2024
1 parent 2596883 commit 343c85d
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 96 deletions.
192 changes: 105 additions & 87 deletions src/core/plugin/GroupAlignPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Author: 秦少卫
* @Date: 2023-06-22 16:19:46
* @LastEditors: 秦少卫
* @LastEditTime: 2023-07-16 12:14:55
* @LastEditTime: 2024-02-20 13:41:29
* @Description: 组对齐插件
*/

Expand Down Expand Up @@ -38,20 +38,22 @@ class GroupAlignPlugin {

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
const { left } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
left: left - bounding.left + item.left,
if (activeObject) {
const { left = 0 } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
left: left - bounding.left + Number(item.left),
});
item.setCoords();
});
item.setCoords();
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
}
}

right() {
Expand All @@ -71,19 +73,21 @@ class GroupAlignPlugin {

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
const { left, width } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
left: left + width - (bounding.left + bounding.width) + item.left,
if (activeObject) {
const { left = 0, width = 0 } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
left: left + width - (bounding.left + bounding.width) + Number(item.left),
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
}
}

xcenter() {
Expand All @@ -102,19 +106,21 @@ class GroupAlignPlugin {

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
const { left, width } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
left: left + width / 2 - (bounding.left + bounding.width / 2) + item.left,
if (activeObject) {
const { left = 0, width = 0 } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
left: left + width / 2 - (bounding.left + bounding.width / 2) + Number(item.left),
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
}
}

ycenter() {
Expand All @@ -133,19 +139,21 @@ class GroupAlignPlugin {

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
const { top, height } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
top: top + height / 2 - (bounding.top + bounding.height / 2) + item.top,
if (activeObject) {
const { top = 0, height = 0 } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
top: top + height / 2 - (bounding.top + bounding.height / 2) + Number(item.top),
});
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
}
}

top() {
Expand All @@ -165,19 +173,21 @@ class GroupAlignPlugin {

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
const { top } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
top: top - bounding.top + item.top,
if (activeObject) {
const { top = 0 } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
top: top - bounding.top + Number(item.top),
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
}
}

bottom() {
Expand All @@ -197,25 +207,26 @@ class GroupAlignPlugin {

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
const { top, height } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
top: top + height - (bounding.top + bounding.height) + item.top,
if (activeObject) {
const { top = 0, height = 0 } = activeObject;
canvas.discardActiveObject();
selectObjects.forEach((item) => {
const bounding = item.getBoundingRect(true);
item.set({
top: top + height - (bounding.top + bounding.height) + Number(item.top),
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
});
const activeSelection = new fabric.ActiveSelection(selectObjects, {
canvas: canvas,
});
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
canvas.setActiveObject(activeSelection);
canvas.requestRenderAll();
}
}

xequation() {
const { canvas } = this;
const activeObject = canvas.getActiveObject();

// width属性不准确，需要坐标换算
function getItemWidth(item) {
return item.aCoords.tr.x - item.aCoords.tl.x;
Expand All @@ -224,28 +235,35 @@ class GroupAlignPlugin {
// 获取所有元素高度
function getAllItemHeight() {
let count = 0;
activeObject.forEachObject((item) => {
count += getItemWidth(item);
});
if (activeObject) {
activeObject.forEachObject((item) => {
count += getItemWidth(item);
});
}

return count;
}
// 获取平均间距
function spacWidth() {
const count = getAllItemHeight();
const allSpac = activeObject.width - count;
return allSpac / (activeObject._objects.length - 1);
if (activeObject) {
const allSpac = Number(activeObject.width) - count;
return allSpac / (activeObject._objects.length - 1);
}
}

// 获取当前元素之前所有元素的高度
function getItemLeft(i) {
if (i === 0) return 0;
let width = 0;
for (let index = 0; index < i; index++) {
width += getItemWidth(activeObject._objects[index]);
if (activeObject) {
for (let index = 0; index < i; index++) {
width += getItemWidth(activeObject._objects[index]);
}
}

return width;
}

if (activeObject && activeObject.type === 'activeSelection') {
const activeSelection = activeObject;
// 排序
Expand All @@ -254,7 +272,7 @@ class GroupAlignPlugin {
// 平均间距计算
const itemSpac = spacWidth();
// 组原点高度
const yHeight = activeObject.width / 2;
const yHeight = Number(activeObject.width) / 2;

activeObject.forEachObject((item, i) => {
// 获取当前元素之前所有元素的高度
Expand All @@ -269,7 +287,7 @@ class GroupAlignPlugin {

yequation() {
const { canvas } = this;
const activeObject = canvas.getActiveObject();
const activeObject = canvas.getActiveObject() || { top: 0, height: 0 };
// width属性不准确，需要坐标换算
function getItemHeight(item) {
return item.aCoords.bl.y - item.aCoords.tl.y;
Expand Down Expand Up @@ -307,9 +325,9 @@ class GroupAlignPlugin {
// 平均间距计算
const itemSpac = spacHeight();
// 组原点高度
const yHeight = activeObject.height / 2;
const yHeight = Number(activeObject.height) / 2;

activeObject.forEachObject((item, i) => {
activeObject.forEachObject((item: fabric.Object, i: number) => {
// 获取当前元素之前所有元素的高度
const preHeight = getItemTop(i);
// 顶部距离 间距 * 索引 + 之前元素高度 - 原点高度
Expand Down
10 changes: 5 additions & 5 deletions src/core/plugin/HistoryPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @Author: 秦少卫
* @Date: 2023-06-20 13:06:31
* @LastEditors: 秦少卫
* @LastEditTime: 2023-07-04 23:37:07
* @LastEditTime: 2024-02-20 13:33:29
* @Description: 历史记录插件
*/

Expand Down Expand Up @@ -33,9 +33,9 @@ class HistoryPlugin {
capacity: 50,
});
this.canvas.on({
'object:added': (event) => this._save(event),
'object:modified': (event) => this._save(event),
'selection:updated': (event) => this._save(event),
'object:added': (event: fabric.IEvent) => this._save(event),
'object:modified': (event: fabric.IEvent) => this._save(event),
'selection:updated': (event: fabric.IEvent) => this._save(event),
});
window.addEventListener('beforeunload', function (e) {
if (history.length > 0) {
Expand All @@ -52,7 +52,7 @@ class HistoryPlugin {
getHistory() {
return this.history;
}
_save(event) {
_save(event: fabric.IEvent) {
// 过滤选择元素事件
const isSelect = event.action === undefined && event.e;
if (isSelect || !this.canvas) return;
Expand Down
8 changes: 4 additions & 4 deletions src/core/plugin/WorkspacePlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Author: 秦少卫
* @Date: 2023-06-27 12:26:41
* @LastEditors: 秦少卫
* @LastEditTime: 2024-02-20 13:04:10
* @LastEditTime: 2024-02-20 13:16:19
* @Description: 画布区域插件
*/

Expand Down Expand Up @@ -30,7 +30,7 @@ class WorkspacePlugin {
});
}

init(option) {
init(option: { width: number; height: number }) {
const workspaceEl = document.querySelector('#workspace') as HTMLElement;
if (!workspaceEl) {
throw new Error('element #workspace is missing, plz check!');
Expand All @@ -53,7 +53,7 @@ class WorkspacePlugin {
this.setSize(workspace.width, workspace.height);
this.editor.emit('sizeChange', workspace.width, workspace.height);
}
resolve();
resolve('');
});
}

Expand Down Expand Up @@ -116,7 +116,7 @@ class WorkspacePlugin {
resizeObserver.observe(this.workspaceEl);
}

setSize(width: number | undefined, height: number) {
setSize(width: number | undefined, height: number | undefined) {
this._initBackground();
this.option.width = width;
this.option.height = height;
Expand Down
1 change: 1 addition & 0 deletions typings/extends.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ declare namespace fabric {
contextTop: CanvasRenderingContext2D;
lowerCanvasEl: HTMLElement;
wrapperEl: HTMLElement;
isDragging: boolean;
_currentTransform: unknown;
_centerObject: (obj: fabric.Object, center: fabric.Point) => fabric.Canvas;
}
Expand Down

0 comments on commit 343c85d

Please sign in to comment.