editor-svg 1.0.0

package/src/components/dialog/dialog.css

@@ -0,0 +1,131 @@
+.dialog-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: .5;
+  background: #000000;
+  z-index: 99;
+}
+
+.dialog-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 999;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog {
+  position: absolute;
+  padding: 0 30px 30px;
+  background: #ffffff;
+  box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%);
+  border: 1px solid #e2e6ed;
+  border-radius: 2px;
+}
+
+.dialog-title {
+  position: relative;
+  border-bottom: 1px solid #e2e6ed;
+  margin-bottom: 30px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dialog-title i {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  display: inline-block;
+  background: url(../../assets/images/close.svg);
+}
+
+.dialog-option__item {
+  margin-bottom: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dialog-option__item span {
+  margin-right: 12px;
+  font-size: 14px;
+  color: #3d4757;
+  position: relative;
+}
+
+.dialog-option__item input,
+.dialog-option__item textarea,
+.dialog-option__item select {
+  width: 276px;
+  height: 30px;
+  border-radius: 2px;
+  border: 1px solid #d3d3d3;
+  min-height: 30px;
+  padding: 5px;
+  box-sizing: border-box;
+  outline: none;
+  appearance: none;
+  user-select: none;
+  font-family: inherit;
+}
+
+.dialog-option__item input:focus,
+.dialog-option__item textarea:focus {
+  border-color: #4991f2;
+}
+
+.dialog-option__item--require::before {
+  content: "*";
+  color: #f56c6c;
+  margin-right: 4px;
+  position: absolute;
+  left: -8px;
+}
+
+.dialog-menu {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.dialog-menu button {
+  position: relative;
+  display: inline-block;
+  border: 1px solid #e2e6ed;
+  border-radius: 2px;
+  background: #ffffff;
+  line-height: 22px;
+  padding: 0 16px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.dialog-menu button:hover {
+  background: rgba(25, 55, 88, .04);
+}
+
+.dialog-menu__cancel {
+  margin-right: 16px;
+}
+
+.dialog-menu button[type='submit'] {
+  color: #ffffff;
+  background: #4991f2;
+  border-color: #4991f2;
+}
+
+.dialog-menu button[type='submit']:hover {
+  background: #5b9cf3;
+  border-color: #5b9cf3;
+}

package/src/components/signature/Signature.ts

@@ -0,0 +1,340 @@
+import { EditorComponent, EDITOR_COMPONENT } from '../../editor'
+import './signature.css'
+
+export interface ISignatureResult {
+  value: string
+  width: number
+  height: number
+}
+
+export interface ISignatureOptions {
+  width?: number
+  height?: number
+  onClose?: () => void
+  onCancel?: () => void
+  onConfirm?: (payload: ISignatureResult | null) => void
+}
+
+export class Signature {
+  private readonly MAX_RECORD_COUNT = 1000
+  private readonly DEFAULT_WIDTH = 390
+  private readonly DEFAULT_HEIGHT = 180
+  private undoStack: Array<Function> = []
+  private x = 0
+  private y = 0
+  private isDrawing = false
+  private isDrawn = false
+  private linePoints: [number, number][] = []
+  private canvasWidth: number
+  private canvasHeight: number
+  private options: ISignatureOptions
+  private mask: HTMLDivElement
+  private container: HTMLDivElement
+  private trashContainer: HTMLDivElement
+  private undoContainer: HTMLDivElement
+  private canvas: HTMLCanvasElement
+  private ctx: CanvasRenderingContext2D
+  private preTimeStamp: number
+  private dpr: number
+
+  constructor(options: ISignatureOptions) {
+    this.options = options
+    this.preTimeStamp = 0
+    this.dpr = window.devicePixelRatio
+    this.canvasWidth = (options.width || this.DEFAULT_WIDTH) * this.dpr
+    this.canvasHeight = (options.height || this.DEFAULT_HEIGHT) * this.dpr
+    const { mask, container, trashContainer, undoContainer, canvas } =
+      this._render()
+    this.mask = mask
+    this.container = container
+    this.trashContainer = trashContainer
+    this.undoContainer = undoContainer
+    this.canvas = canvas
+    this.ctx = <CanvasRenderingContext2D>canvas.getContext('2d')
+    this.ctx.scale(this.dpr, this.dpr)
+    this.ctx.lineCap = 'round'
+    this._bindEvent()
+    this._clearUndoFn()
+    // this is necessary so that the screen does not move when moving - it is removed when closing the modal
+    document.documentElement.classList.add('overflow-hidden')
+    document.body.classList.add('overflow-hidden')
+    this.container.classList.add('overflow-hidden')
+  }
+
+  private _render() {
+    const { onClose, onCancel, onConfirm } = this.options
+    // 渲染遮罩层
+    const mask = document.createElement('div')
+    mask.classList.add('signature-mask')
+    mask.setAttribute(EDITOR_COMPONENT, EditorComponent.COMPONENT)
+    document.body.append(mask)
+    // 渲染容器
+    const container = document.createElement('div')
+    container.classList.add('signature-container')
+    container.setAttribute(EDITOR_COMPONENT, EditorComponent.COMPONENT)
+    // 弹窗
+    const signatureContainer = document.createElement('div')
+    signatureContainer.classList.add('signature')
+    container.append(signatureContainer)
+    // 标题容器
+    const titleContainer = document.createElement('div')
+    titleContainer.classList.add('signature-title')
+    // 标题&关闭按钮
+    const titleSpan = document.createElement('span')
+    titleSpan.append(document.createTextNode('插入签名'))
+    const titleClose = document.createElement('i')
+    titleClose.onclick = () => {
+      if (onClose) {
+        onClose()
+      }
+      this._dispose()
+    }
+    titleContainer.append(titleSpan)
+    titleContainer.append(titleClose)
+    signatureContainer.append(titleContainer)
+    // 操作区
+    const operationContainer = document.createElement('div')
+    operationContainer.classList.add('signature-operation')
+    // 撤销
+    const undoContainer = document.createElement('div')
+    undoContainer.classList.add('signature-operation__undo')
+    const undoIcon = document.createElement('i')
+    const undoLabel = document.createElement('span')
+    undoLabel.innerText = '撤销'
+    undoContainer.append(undoIcon)
+    undoContainer.append(undoLabel)
+    operationContainer.append(undoContainer)
+    // 清空画布
+    const trashContainer = document.createElement('div')
+    trashContainer.classList.add('signature-operation__trash')
+    const trashIcon = document.createElement('i')
+    const trashLabel = document.createElement('span')
+    trashLabel.innerText = '清空'
+    trashContainer.append(trashIcon)
+    trashContainer.append(trashLabel)
+    operationContainer.append(trashContainer)
+    signatureContainer.append(operationContainer)
+    // 绘图区
+    const canvasContainer = document.createElement('div')
+    canvasContainer.classList.add('signature-canvas')
+    const canvas = document.createElement('canvas')
+    canvas.width = this.canvasWidth
+    canvas.height = this.canvasHeight
+    canvas.style.width = `${this.canvasWidth / this.dpr}px`
+    canvas.style.height = `${this.canvasHeight / this.dpr}px`
+    canvasContainer.append(canvas)
+    signatureContainer.append(canvasContainer)
+    // 按钮容器
+    const menuContainer = document.createElement('div')
+    menuContainer.classList.add('signature-menu')
+    // 取消按钮
+    const cancelBtn = document.createElement('button')
+    cancelBtn.classList.add('signature-menu__cancel')
+    cancelBtn.append(document.createTextNode('取消'))
+    cancelBtn.type = 'button'
+    cancelBtn.onclick = () => {
+      if (onCancel) {
+        onCancel()
+      }
+      this._dispose()
+    }
+    menuContainer.append(cancelBtn)
+    // 确认按钮
+    const confirmBtn = document.createElement('button')
+    confirmBtn.append(document.createTextNode('确定'))
+    confirmBtn.type = 'submit'
+    confirmBtn.onclick = () => {
+      if (onConfirm) {
+        onConfirm(this._toData())
+      }
+      this._dispose()
+    }
+    menuContainer.append(confirmBtn)
+    signatureContainer.append(menuContainer)
+    // 渲染
+    document.body.append(container)
+    this.container = container
+    this.mask = mask
+    return {
+      mask,
+      canvas,
+      container,
+      trashContainer,
+      undoContainer
+    }
+  }
+
+  private _bindEvent() {
+    this.trashContainer.onclick = this._clearCanvas.bind(this)
+    this.undoContainer.onclick = this._undo.bind(this)
+    this.canvas.onmousedown = this._startDraw.bind(this)
+    this.canvas.onmousemove = this._draw.bind(this)
+    this.container.onmouseup = this._stopDraw.bind(this)
+    this.container.ontouchmove = this.registerTouchmove.bind(this)
+    this.container.ontouchstart = this.registerTouchstart.bind(this)
+    this.container.ontouchend = this.registerTouchend.bind(this)
+  }
+
+  private _undo() {
+    if (this.undoStack.length > 1) {
+      this.undoStack.pop()
+      if (this.undoStack.length) {
+        this.undoStack[this.undoStack.length - 1]()
+      }
+    }
+  }
+
+  private _saveUndoFn(fn: Function) {
+    this.undoStack.push(fn)
+    while (this.undoStack.length > this.MAX_RECORD_COUNT) {
+      this.undoStack.shift()
+    }
+  }
+
+  private _clearUndoFn() {
+    const clearFn = () => {
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+    }
+    this.undoStack = [clearFn]
+  }
+
+  private _clearCanvas() {
+    this._clearUndoFn()
+    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+  }
+
+  private _startDraw(evt: MouseEvent) {
+    this.isDrawing = true
+    this.x = evt.offsetX
+    this.y = evt.offsetY
+    this.ctx.lineWidth = 1
+  }
+
+  private _draw(evt: MouseEvent) {
+    if (!this.isDrawing) return
+    // 计算鼠标移动速度
+    const curTimestamp = performance.now()
+    const distance = Math.sqrt(evt.movementX ** 2 + evt.movementY ** 2)
+    const speed = distance / (curTimestamp - this.preTimeStamp)
+    // 目标线宽：最小速度1，最大速度5，系数3
+    const SPEED_FACTOR = 3
+    const targetLineWidth = Math.min(5, Math.max(1, 5 - speed * SPEED_FACTOR))
+    // 平滑过渡算法（20%的变化比例）调整线条粗细：系数0.2
+    const SMOOTH_FACTOR = 0.2
+    this.ctx.lineWidth =
+      this.ctx.lineWidth * (1 - SMOOTH_FACTOR) + targetLineWidth * SMOOTH_FACTOR
+    // 绘制
+    const { offsetX, offsetY } = evt
+    this.ctx.beginPath()
+    this.ctx.moveTo(this.x, this.y)
+    this.ctx.lineTo(offsetX, offsetY)
+    this.ctx.stroke()
+    this.x = offsetX
+    this.y = offsetY
+    this.linePoints.push([offsetX, offsetY])
+    this.isDrawn = true
+    // 缓存之前时间戳
+    this.preTimeStamp = curTimestamp
+  }
+
+  private _stopDraw() {
+    this.isDrawing = false
+    if (this.isDrawn) {
+      const imageData = this.ctx.getImageData(
+        0,
+        0,
+        this.canvasWidth,
+        this.canvasHeight
+      )
+      const self = this
+      this._saveUndoFn(function () {
+        self.ctx.clearRect(0, 0, self.canvasWidth, self.canvasHeight)
+        self.ctx.putImageData(imageData, 0, 0)
+      })
+      this.isDrawn = false
+    }
+  }
+
+  private _toData(): ISignatureResult | null {
+    if (!this.linePoints.length) return null
+    // 查找矩形四角坐标
+    const startX = this.linePoints[0][0]
+    const startY = this.linePoints[0][1]
+    let minX = startX
+    let minY = startY
+    let maxX = startX
+    let maxY = startY
+    for (let p = 0; p < this.linePoints.length; p++) {
+      const point = this.linePoints[p]
+      if (minX > point[0]) {
+        minX = point[0]
+      }
+      if (maxX < point[0]) {
+        maxX = point[0]
+      }
+      if (minY > point[1]) {
+        minY = point[1]
+      }
+      if (maxY < point[1]) {
+        maxY = point[1]
+      }
+    }
+    // 增加边框宽度
+    const lineWidth = this.ctx.lineWidth
+    minX = minX < lineWidth ? 0 : minX - lineWidth
+    minY = minY < lineWidth ? 0 : minY - lineWidth
+    maxX = maxX + lineWidth
+    maxY = maxY + lineWidth
+    const sw = maxX - minX
+    const sh = maxY - minY
+    // 裁剪图像
+    const imageData = this.ctx.getImageData(
+      minX * this.dpr,
+      minY * this.dpr,
+      sw * this.dpr,
+      sh * this.dpr
+    )
+    const canvas = document.createElement('canvas')
+    canvas.style.width = `${sw}px`
+    canvas.style.height = `${sh}px`
+    canvas.width = sw * this.dpr
+    canvas.height = sh * this.dpr
+    const ctx = <CanvasRenderingContext2D>canvas.getContext('2d')!
+    ctx.putImageData(imageData, 0, 0)
+    const value = canvas.toDataURL()
+    return {
+      value,
+      width: sw,
+      height: sh
+    }
+  }
+
+  private registerTouchmove(evt: TouchEvent) {
+    this.registerTouchEvent(evt, 'mousemove')
+  }
+
+  private registerTouchstart(evt: TouchEvent) {
+    this.registerTouchEvent(evt, 'mousedown')
+  }
+
+  private registerTouchend() {
+    const me = new MouseEvent('mouseup', {})
+    this.canvas.dispatchEvent(me)
+  }
+
+  private registerTouchEvent(evt: TouchEvent, eventName: string) {
+    const touch = evt.touches[0]
+    const me = new MouseEvent(eventName, {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    })
+    this.canvas.dispatchEvent(me)
+  }
+
+  private _dispose() {
+    this.mask.remove()
+    this.container.remove()
+    document.documentElement.classList.remove('overflow-hidden')
+    document.body.classList.remove('overflow-hidden')
+  }
+}

package/src/components/signature/signature.css

@@ -0,0 +1,132 @@
+.signature-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: .5;
+  background: #000000;
+  z-index: 99;
+}
+
+.signature-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 999;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.signature {
+  position: absolute;
+  padding: 0 30px 30px;
+  background: #ffffff;
+  box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%);
+  border: 1px solid #e2e6ed;
+  border-radius: 2px;
+}
+
+.signature-title {
+  position: relative;
+  border-bottom: 1px solid #e2e6ed;
+  margin-bottom: 15px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.signature-title i {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  display: inline-block;
+  background: url(../../assets/images/close.svg);
+}
+
+.signature-operation>div {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  color: #3d4757;
+  user-select: none;
+}
+
+.signature-operation>div:hover {
+  color: #6e7175;
+}
+
+.signature-operation>div i {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+}
+
+.signature-operation__undo {
+  background: url(../../assets/images/signature-undo.svg) no-repeat;
+}
+
+.signature-operation__trash {
+  background: url(../../assets/images/trash.svg) no-repeat;
+}
+
+.signature-operation>div span {
+  font-size: 12px;
+  margin: 0 5px;
+}
+
+.signature-canvas {
+  margin: 15px 0;
+  user-select: none;
+}
+
+.signature-canvas canvas {
+  background: #f3f5f7;
+}
+
+.signature-menu {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.signature-menu button {
+  position: relative;
+  display: inline-block;
+  border: 1px solid #e2e6ed;
+  border-radius: 2px;
+  background: #ffffff;
+  line-height: 22px;
+  padding: 0 16px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.signature-menu button:hover {
+  background: rgba(25, 55, 88, .04);
+}
+
+.signature-menu__cancel {
+  margin-right: 16px;
+}
+
+.signature-menu button[type='submit'] {
+  color: #ffffff;
+  background: #4991f2;
+  border-color: #4991f2;
+}
+
+.signature-menu button[type='submit']:hover {
+  background: #5b9cf3;
+  border-color: #5b9cf3;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}

package/src/editor/assets/css/block/block.css

@@ -0,0 +1,21 @@
+.ce-block-item {
+  position: absolute;
+  z-index: 0;
+  background-color: #ffffff;
+  border: 1px solid rgb(235 236 240);
+}
+
+.ce-block-item .ce-resizer-selection {
+  width: 100%;
+  height: 100%;
+}
+
+.ce-block-item .ce-resizer-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background-color: transparent;
+}