lsadmin/canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:标识编辑器构件

Browse Source
This commit is contained in:
黄云飞
2021-11-15 19:45:24 +08:00
parent b532c94438
commit 9462ba06fb
7 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -2
View File
@@ -10,7 +10,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="menu"> <div class="menu" editor-component="menu">
<div class="menu-item"> <div class="menu-item">
<div class="menu-item__undo"> <div class="menu-item__undo">
<i></i> <i></i>
@@ -64,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="editor"> <div class="editor" editor-component="main">
<canvas style="width: 794px;height: 1123px;"></canvas> <canvas style="width: 794px;height: 1123px;"></canvas>
</div> </div>
</div> </div>
src/editor/core/draw/Background.ts
+17
View File
@@ -0,0 +1,17 @@
export class Background {
private ctx: CanvasRenderingContext2D
constructor(ctx: CanvasRenderingContext2D) {
this.ctx = ctx
}
render(canvasRect: DOMRect) {
const { width, height } = canvasRect
this.ctx.save()
this.ctx.fillStyle = '#ffffff'
this.ctx.fillRect(0, 0, width, height)
this.ctx.restore()
}
}
src/editor/core/draw/Draw.ts
+9
View File
@@ -10,6 +10,7 @@ import { GlobalEvent } from "../event/GlobalEvent"
import { HistoryManager } from "../history/HistoryManager" import { HistoryManager } from "../history/HistoryManager"
import { Position } from "../position/Position" import { Position } from "../position/Position"
import { RangeManager } from "../range/RangeManager" import { RangeManager } from "../range/RangeManager"
import { Background } from "./Background"
import { Margin } from "./Margin" import { Margin } from "./Margin"
export class Draw { export class Draw {
@@ -23,6 +24,7 @@ export class Draw {
private cursor: Cursor private cursor: Cursor
private range: RangeManager private range: RangeManager
private margin: Margin private margin: Margin
private background: Background
private historyManager: HistoryManager private historyManager: HistoryManager
private rowCount: number private rowCount: number
@@ -37,6 +39,7 @@ export class Draw {
this.position = new Position(this) this.position = new Position(this)
this.range = new RangeManager(ctx, options) this.range = new RangeManager(ctx, options)
this.margin = new Margin(ctx, options) this.margin = new Margin(ctx, options)
this.background = new Background(ctx)
const canvasEvent = new CanvasEvent(canvas, this) const canvasEvent = new CanvasEvent(canvas, this)
this.cursor = new Cursor(canvas, this, canvasEvent) this.cursor = new Cursor(canvas, this, canvasEvent)
@@ -71,6 +74,10 @@ export class Draw {
return this.rowCount return this.rowCount
} }
public getDataURL(): string {
return this.canvas.toDataURL()
}
public render(payload?: IDrawOption) { public render(payload?: IDrawOption) {
let { curIndex, isSubmitHistory = true, isSetCursor = true } = payload || {} let { curIndex, isSubmitHistory = true, isSetCursor = true } = payload || {}
// 清除光标 // 清除光标
@@ -81,6 +88,8 @@ export class Draw {
// 基础信息 // 基础信息
const { defaultSize, defaultFont } = this.options const { defaultSize, defaultFont } = this.options
const canvasRect = this.canvas.getBoundingClientRect() const canvasRect = this.canvas.getBoundingClientRect()
// 绘制背景
this.background.render(canvasRect)
// 绘制页边距 // 绘制页边距
const { width } = canvasRect const { width } = canvasRect
const { margins } = this.options const { margins } = this.options
src/editor/core/event/GlobalEvent.ts
+10 -1
View File
@@ -1,3 +1,5 @@
import { EDITOR_COMPONENT } from "../../dataset/constant/Editor"
import { findParent } from "../../utils"
import { Cursor } from "../cursor/Cursor" import { Cursor } from "../cursor/Cursor"
import { Draw } from "../draw/Draw" import { Draw } from "../draw/Draw"
import { CanvasEvent } from "./CanvasEvent" import { CanvasEvent } from "./CanvasEvent"
@@ -32,8 +34,15 @@ export class GlobalEvent {
if (!this.cursor) return if (!this.cursor) return
const cursorDom = this.cursor.getCursorDom() const cursorDom = this.cursor.getCursorDom()
const agentDom = this.cursor.getAgentDom() const agentDom = this.cursor.getAgentDom()
const innerDoms = [this.canvas, cursorDom, agentDom, this.canvas.parentNode, document.body] const innerDoms = [this.canvas, cursorDom, agentDom, document.body]
if (innerDoms.includes(evt.target as any)) return if (innerDoms.includes(evt.target as any)) return
// 编辑器外部dom
const outerEditorDom = findParent(
evt.target as Element,
(node: Node & Element) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT),
true
)
if (outerEditorDom) return
this.cursor.recoveryCursor() this.cursor.recoveryCursor()
} }
src/editor/dataset/constant/Editor.ts
+1
View File
@@ -0,0 +1 @@
export const EDITOR_COMPONENT = 'editor-component'
src/editor/dataset/enum/Editor.ts
+4
View File
@@ -0,0 +1,4 @@
export enum EditorComponent {
MENU = 'menu',
MAIN = 'main'
}
src/editor/utils/index.ts
+19
View File
@@ -30,3 +30,22 @@ export function deepClone(obj: any) {
} }
return newObj return newObj
} }
export function isBody(node: Element): boolean {
return node && node.nodeType === 1 && node.tagName.toLowerCase() === 'body'
}
export function findParent(node: Element, filterFn: Function, includeSelf: boolean) {
if (node && !isBody(node)) {
node = includeSelf ? node : node.parentNode as Element
while (node) {
if (!filterFn || filterFn(node) || isBody(node)) {
return filterFn && !filterFn(node) && isBody(node)
? null
: node
}
node = node.parentNode as Element
}
}
return null
}