editor-svg 1.0.0

package/cypress/e2e/menus/text.cy.ts

@@ -0,0 +1,304 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-文本处理', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const textLength = text.length
+
+  it('字体', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__font').as('font').click()
+
+      cy.get('@font')
+        .find('li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].font).to.eq('华文宋体')
+        })
+    })
+  })
+
+  it('字号设置', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__size').as('size').click()
+
+      cy.get('@size')
+        .find('li')
+        .eq(0)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].size).to.eq(56)
+        })
+    })
+  })
+
+  it('字体增大', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__size-add')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].size).to.eq(18)
+        })
+    })
+  })
+
+  it('字体减小', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__size-minus')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].size).to.eq(14)
+        })
+    })
+  })
+
+  it('加粗', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__bold')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].bold).to.eq(true)
+        })
+    })
+  })
+
+  it('斜体', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__italic')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].italic).to.eq(true)
+        })
+    })
+  })
+
+  it('下划线', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__underline')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].underline).to.eq(true)
+        })
+    })
+  })
+
+  it('删除线', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__strikeout')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].strikeout).to.eq(true)
+        })
+    })
+  })
+
+  it('上标', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__superscript')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('superscript')
+        })
+    })
+  })
+
+  it('下标', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__subscript')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('subscript')
+        })
+    })
+  })
+
+  it('字体颜色', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      editor.command.executeColor('red')
+
+      const data = editor.command.getValue().data.main
+
+      expect(data[0].color).to.eq('red')
+    })
+  })
+
+  it('高亮', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      editor.command.executeHighlight('red')
+
+      const data = editor.command.getValue().data.main
+
+      expect(data[0].highlight).to.eq('red')
+    })
+  })
+})

package/cypress/e2e/menus/title.cy.ts

@@ -0,0 +1,43 @@
+import Editor, { ElementType, TitleLevel } from '../../../src/editor'
+
+describe('菜单-标题', () => {
+  const url = 'http://localhost:3000/canvas-editor/'
+
+  beforeEach(() => {
+    cy.visit(url)
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const elementType = <ElementType>'title'
+  const level = <TitleLevel>'first'
+
+  it('标题', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      cy.get('.menu-item__title').as('title').click()
+
+      cy.get('@title')
+        .find('li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq(elementType)
+
+          expect(data[0].level).to.eq(level)
+        })
+    })
+  })
+})

package/cypress/e2e/menus/undoRedo.cy.ts

@@ -0,0 +1,49 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-撤销&重做', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+
+  it('撤销', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('@canvas').type(`${text}1`)
+
+      cy.get('.menu-item__undo')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].value).to.eq(text)
+        })
+    })
+  })
+
+  it('重做', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('@canvas').type(`${text}1`)
+
+      cy.get('.menu-item__undo').click()
+
+      cy.get('.menu-item__redo')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].value).to.eq(`${text}1`)
+        })
+    })
+  })
+})

package/cypress/e2e/menus/watermark.cy.ts

@@ -0,0 +1,64 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-水印', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const size = 80
+
+  it('添加水印', () => {
+    cy.getEditor().then((editor: Editor) => {
+      cy.get('.menu-item__watermark').click()
+
+      cy.get('.menu-item__watermark li').eq(0).click()
+
+      cy.get('.dialog-option [name="data"]').type(text)
+
+      cy.get('.dialog-option [name="size"]').as('size')
+
+      cy.get('@size').clear()
+
+      cy.get('@size').type(`${size}`)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const payload = editor.command.getValue()
+
+          const {
+            options: { watermark }
+          } = payload
+
+          expect(watermark?.data).to.eq(text)
+
+          expect(watermark?.size).to.eq(size)
+        })
+    })
+  })
+
+  it('删除水印', () => {
+    cy.getEditor().then((editor: Editor) => {
+      cy.get('.menu-item__watermark').click()
+
+      cy.get('.menu-item__watermark li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const payload = editor.command.getValue()
+
+          const {
+            options: { watermark }
+          } = payload
+
+          expect(watermark?.data).to.eq('')
+
+          expect(watermark?.size).to.eq(200)
+        })
+    })
+  })
+})

package/cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "name": "canvas-editor"
+}

package/cypress/global.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+declare namespace Editor {
+  import('../src/editor/index')
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Editor from '../src/editor/index'
+}
+
+declare namespace Cypress {
+  interface Chainable {
+    getEditor(): Chainable<Editor>
+  }
+}

package/cypress/support/commands.ts

@@ -0,0 +1,5 @@
+import 'cypress-file-upload'
+
+Cypress.Commands.add('getEditor', () => {
+  return cy.window().its('editor')
+})

package/cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './commands'

package/cypress/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es2015", "dom", "esnext"],
+    "types": ["cypress", "cypress-file-upload"],
+    "isolatedModules": false,
+    "allowJs": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+  },
+  "include": [
+    "./**/*.ts"
+  ]
+}

package/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  viewportWidth: 1366,
+  viewportHeight: 720,
+  e2e: {
+    experimentalRunAllSpecs: true
+  }
+})