Skip to content

Commit

Permalink
fix(TS): 修复 TS 语法错误
Browse files Browse the repository at this point in the history
  • Loading branch information
@nihaojob
nihaojob committed Jul 22, 2024
1 parent 4026a71 commit 258879e
Show file tree
Hide file tree
Showing 11 changed files with 149 additions and 133 deletions.
77 changes: 76 additions & 1 deletion packages/core/Instance.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,81 @@
* @Author: 秦少卫
* @Date: 2024-04-10 15:38:47
* @LastEditors: 秦少卫
* @LastEditTime: 2024-04-10 15:38:48
* @LastEditTime: 2024-07-22 11:56:28
* @Description: 类型文件
*/
import Editor from './Editor';
import DringPlugin from './plugin/DringPlugin';
import AlignGuidLinePlugin from './plugin/AlignGuidLinePlugin';
import ControlsPlugin from './plugin/ControlsPlugin';
import ControlsRotatePlugin from './plugin/ControlsRotatePlugin';
import CenterAlignPlugin from './plugin/CenterAlignPlugin';
import LayerPlugin from './plugin/LayerPlugin';
import CopyPlugin from './plugin/CopyPlugin';
import MoveHotKeyPlugin from './plugin/MoveHotKeyPlugin';
import DeleteHotKeyPlugin from './plugin/DeleteHotKeyPlugin';
import GroupPlugin from './plugin/GroupPlugin';
import DrawLinePlugin from './plugin/DrawLinePlugin';
import GroupTextEditorPlugin from './plugin/GroupTextEditorPlugin';
import GroupAlignPlugin from './plugin/GroupAlignPlugin';
import WorkspacePlugin from './plugin/WorkspacePlugin';
import MaskPlugin from './plugin/MaskPlugin';
import HistoryPlugin from './plugin/HistoryPlugin';
import FlipPlugin from './plugin/FlipPlugin';
import RulerPlugin from './plugin/RulerPlugin';
import MaterialPlugin from './plugin/MaterialPlugin';
import WaterMarkPlugin from './plugin/WaterMarkPlugin';
import FontPlugin from './plugin/FontPlugin';
import PolygonModifyPlugin from './plugin/PolygonModifyPlugin';
import DrawPolygonPlugin from './plugin/DrawPolygonPlugin';
import FreeDrawPlugin from './plugin/FreeDrawPlugin';
import PathTextPlugin from './plugin/PathTextPlugin';
import PsdPlugin from './plugin/PsdPlugin';
import SimpleClipImagePlugin from './plugin/SimpleClipImagePlugin';
import BarCodePlugin from './plugin/BarCodePlugin';
import QrCodePlugin from './plugin/QrCodePlugin';
import ImageStroke from './plugin/ImageStroke';
import ResizePlugin from './plugin/ResizePlugin';
import LockPlugin from './plugin/LockPlugin';
import AddBaseTypePlugin from './plugin/AddBaseTypePlugin';

const AllEditor = {
Editor,
DringPlugin,
AlignGuidLinePlugin,
ControlsPlugin,
ControlsRotatePlugin,
CenterAlignPlugin,
LayerPlugin,
CopyPlugin,
MoveHotKeyPlugin,
DeleteHotKeyPlugin,
GroupPlugin,
DrawLinePlugin,
GroupTextEditorPlugin,
GroupAlignPlugin,
WorkspacePlugin,
MaskPlugin,
HistoryPlugin,
FlipPlugin,
RulerPlugin,
MaterialPlugin,
WaterMarkPlugin,
FontPlugin,
PolygonModifyPlugin,
DrawPolygonPlugin,
FreeDrawPlugin,
PathTextPlugin,
PsdPlugin,
SimpleClipImagePlugin,
BarCodePlugin,
QrCodePlugin,
ImageStroke,
ResizePlugin,
LockPlugin,
AddBaseTypePlugin,
};

declare type KuaituEditor = typeof AllEditor;

export default KuaituEditor;
3 changes: 2 additions & 1 deletion packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"license": "ISC",
"devDependencies": {
"@types/jsdom": "^21.1.6",
"@types/qs": "^6.9.15",
"jsdom": "^24.0.0",
"vitest": "^1.6.0"
}
}
}
97 changes: 15 additions & 82 deletions packages/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: 2024-04-10 17:33:17
* @LastEditTime: 2024-07-22 10:21:05
* @Description: 组对齐插件
*/

Expand All @@ -18,18 +18,6 @@ class GroupAlignPlugin implements IPluginTempl {

left() {
const { canvas } = this;
// const activeObject = canvas.getActiveObject();
// if (activeObject && activeObject.type === 'activeSelection') {
// const activeSelection = activeObject;
// const activeObjectLeft = -(activeObject.width / 2);
// activeSelection.forEachObject((item) => {
// item.set({
// left: activeObjectLeft,
// });
// item.setCoords();
// canvas.renderAll();
// });
// }

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
Expand All @@ -53,18 +41,6 @@ class GroupAlignPlugin implements IPluginTempl {

right() {
const { canvas } = this;
// const activeObject = canvas.getActiveObject();
// if (activeObject && activeObject.type === 'activeSelection') {
// const activeSelection = activeObject;
// const activeObjectLeft = activeObject.width / 2;
// activeSelection.forEachObject((item) => {
// item.set({
// left: activeObjectLeft - item.width * item.scaleX,
// });
// item.setCoords();
// canvas.renderAll();
// });
// }

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
Expand All @@ -87,17 +63,6 @@ class GroupAlignPlugin implements IPluginTempl {

xcenter() {
const { canvas } = this;
// const activeObject = canvas.getActiveObject();
// if (activeObject && activeObject.type === 'activeSelection') {
// const activeSelection = activeObject;
// activeSelection.forEachObject((item) => {
// item.set({
// left: 0 - (item.width * item.scaleX) / 2,
// });
// item.setCoords();
// canvas.renderAll();
// });
// }

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
Expand All @@ -120,17 +85,6 @@ class GroupAlignPlugin implements IPluginTempl {

ycenter() {
const { canvas } = this;
// const activeObject = canvas.getActiveObject();
// if (activeObject && activeObject.type === 'activeSelection') {
// const activeSelection = activeObject;
// activeSelection.forEachObject((item) => {
// item.set({
// top: 0 - (item.height * item.scaleY) / 2,
// });
// item.setCoords();
// canvas.renderAll();
// });
// }

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
Expand All @@ -153,18 +107,6 @@ class GroupAlignPlugin implements IPluginTempl {

top() {
const { canvas } = this;
// const activeObject = canvas.getActiveObject();
// if (activeObject && activeObject.type === 'activeSelection') {
// const activeSelection = activeObject;
// const activeObjectTop = -(activeObject.height / 2);
// activeSelection.forEachObject((item) => {
// item.set({
// top: activeObjectTop,
// });
// item.setCoords();
// canvas.renderAll();
// });
// }

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
Expand All @@ -187,18 +129,6 @@ class GroupAlignPlugin implements IPluginTempl {

bottom() {
const { canvas } = this;
// const activeObject = canvas.getActiveObject();
// if (activeObject && activeObject.type === 'activeSelection') {
// const activeSelection = activeObject;
// const activeObjectTop = activeObject.height / 2;
// activeSelection.forEachObject((item) => {
// item.set({
// top: activeObjectTop - item.height * item.scaleY,
// });
// item.setCoords();
// canvas.renderAll();
// });
// }

const activeObject = canvas.getActiveObject();
const selectObjects = canvas.getActiveObjects();
Expand All @@ -221,9 +151,9 @@ class GroupAlignPlugin implements IPluginTempl {

xequation() {
const { canvas } = this;
const activeObject = canvas.getActiveObject();
const activeObject = canvas.getActiveObject() as fabric.ActiveSelection;
// width属性不准确，需要坐标换算
function getItemWidth(item) {
function getItemWidth(item: fabric.Object) {
let x1 = Infinity,
x2 = -Infinity;
for (const key in item.aCoords) {
Expand All @@ -241,7 +171,7 @@ class GroupAlignPlugin implements IPluginTempl {
function getAllItemHeight() {
let count = 0;
if (activeObject) {
activeObject.forEachObject((item) => {
activeObject.forEachObject((item: fabric.Object) => {
count += getItemWidth(item);
});
}
Expand All @@ -258,7 +188,7 @@ class GroupAlignPlugin implements IPluginTempl {
}

// 获取当前元素之前所有元素的高度
function getItemLeft(i) {
function getItemLeft(i: number) {
if (i === 0) return 0;
let width = 0;
if (activeObject) {
Expand All @@ -275,11 +205,11 @@ class GroupAlignPlugin implements IPluginTempl {
activeSelection._objects.sort((a, b) => a.left - b.left);

// 平均间距计算
const itemSpac = spacWidth();
const itemSpac = spacWidth() as number;
// 组原点高度
const yHeight = Number(activeObject.width) / 2;

activeObject.forEachObject((item, i) => {
activeObject.forEachObject((item: fabric.Object, i: number) => {
// 获取当前元素之前所有元素的高度
const preHeight = getItemLeft(i);
// 顶部距离 间距 * 索引 + 之前元素高度 - 原点高度
Expand All @@ -290,7 +220,7 @@ class GroupAlignPlugin implements IPluginTempl {

const objecs = canvas.getActiveObjects();
canvas.discardActiveObject();
objecs.forEach((item) => {
objecs.forEach((item: fabric.Object) => {
let x = Infinity;
for (const key in item.aCoords) {
if (item.aCoords[key].x < x) {
Expand All @@ -309,9 +239,12 @@ class GroupAlignPlugin implements IPluginTempl {

yequation() {
const { canvas } = this;
const activeObject = canvas.getActiveObject() || { top: 0, height: 0 };
const activeObject = (canvas.getActiveObject() as fabric.ActiveSelection) || {
top: 0,
height: 0,
};
// width属性不准确，需要坐标换算
function getItemHeight(item) {
function getItemHeight(item: fabric.Object) {
let y1 = Infinity,
y2 = -Infinity;
for (const key in item.aCoords) {
Expand All @@ -327,7 +260,7 @@ class GroupAlignPlugin implements IPluginTempl {
// 获取所有元素高度
function getAllItemHeight() {
let count = 0;
activeObject.forEachObject((item) => {
activeObject.forEachObject((item: fabric.Object) => {
count += getItemHeight(item);
});
return count;
Expand All @@ -340,7 +273,7 @@ class GroupAlignPlugin implements IPluginTempl {
}

// 获取当前元素之前所有元素的高度
function getItemTop(i) {
function getItemTop(i: number) {
if (i === 0) return 0;
let height = 0;
for (let index = 0; index < i; index++) {
Expand Down
29 changes: 14 additions & 15 deletions packages/core/plugin/LockPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,25 @@
* @Author: 秦少卫
* @Date: 2024-07-04 14:27:05
* @LastEditors: 秦少卫
* @LastEditTime: 2024-07-06 17:49:01
* @LastEditTime: 2024-07-22 10:11:29
* @Description: 锁定文件
*/
import { fabric } from 'fabric';
import type Editor from '../Editor';
import { SelectMode } from '../eventType';

enum ItypeKey {
lockMovementX = 'lockMovementX',
lockMovementY = 'lockMovementY',
lockRotation = 'lockRotation',
lockScalingX = 'lockScalingX',
lockScalingY = 'lockScalingY',
}

export default class LockPlugin implements IPluginTempl {
static pluginName = 'LockPlugin';
static apis = ['lock', 'unLock'];
lockAttrs: string[];
constructor(public canvas: fabric.Canvas, public editor: Editor) {
this.lockAttrs = [
'lockMovementX',
'lockMovementY',
'lockRotation',
'lockScalingX',
'lockScalingY',
];
}
constructor(public canvas: fabric.Canvas, public editor: Editor) {}

hookImportAfter() {
this.canvas.forEachObject((obj) => {
Expand All @@ -34,27 +33,27 @@ export default class LockPlugin implements IPluginTempl {
}

lock() {
const activeObject = this.canvas.getActiveObject();
const activeObject = this.canvas.getActiveObject() as fabric.Object;
if (activeObject) {
activeObject.hasControls = false;
activeObject.selectable = false;
activeObject.evented = false;
// 修改默认属性
this.lockAttrs.forEach((key) => {
Object.values(ItypeKey).forEach((key: ItypeKey) => {
activeObject[key] = true;
});
this.canvas.discardActiveObject().renderAll();
}
}

unLock() {
const activeObject = this.canvas.getActiveObject();
const activeObject = this.canvas.getActiveObject() as fabric.Object;
if (activeObject) {
activeObject.hasControls = true;
activeObject.selectable = true;
activeObject.evented = true;
// 修改默认属性
this.lockAttrs.forEach((key) => {
Object.values(ItypeKey).forEach((key: ItypeKey) => {
activeObject[key] = false;
});
this.canvas.discardActiveObject().renderAll();
Expand Down
6 changes: 3 additions & 3 deletions packages/core/plugin/QrCodePlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Author: 秦少卫
* @Date: 2024-06-06 19:58:26
* @LastEditors: 秦少卫
* @LastEditTime: 2024-06-15 09:34:36
* @LastEditTime: 2024-07-22 10:26:59
* @Description: 二维码生成工具
*/

Expand Down Expand Up @@ -55,11 +55,11 @@ class QrCodePlugin implements IPluginTempl {
}
}

async _getBase64Str(options: any) {
async _getBase64Str(options: any): Promise<string> {
const qrCode = new QRCodeStyling(options);
const blob = await qrCode.getRawData('png');
if (!blob) return '';
const base64Str = await blobToBase64(blob);
const base64Str = (await blobToBase64(blob)) as string;
return base64Str || '';
}

Expand Down
Loading

0 comments on commit 258879e

Please sign in to comment.