Merge pull request Hufe921#32 from Hufe921/feature/control

Feature/control

cypress/integration/control/select.spec.ts

@@ -0,0 +1,54 @@
+import Editor, { ControlType, ElementType } from '../../../src/editor'
+
+describe('控件-列举型', () => {
+
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = `有`
+  const elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'select'
+
+  it('列举型', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.listener.saved = function (payload) {
+        const data = payload.data[0]
+
+        expect(data.control!.value![0].value).to.be.eq(text)
+
+        expect(data.control!.code).to.be.eq('98175')
+      }
+
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([{
+        type: elementType,
+        value: '',
+        control: {
+          type: controlType,
+          value: null,
+          placeholder: '列举型',
+          valueSets: [{
+            value: '有',
+            code: '98175'
+          }, {
+            value: '无',
+            code: '98176'
+          }]
+        }
+      }])
+
+      cy.get('@canvas').type(`{leftArrow}`)
+
+      cy.get('.select-control-popup li').eq(0).click()
+
+      cy.get('@canvas').type('{ctrl}s')
+    })
+  })
+
+})

cypress/integration/control/text.spec.ts

@@ -0,0 +1,45 @@
+import Editor, { ControlType, ElementType } 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 elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'text'
+
+  it('文本型', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.listener.saved = function (payload) {
+        const data = payload.data[0]
+
+        expect(data.control!.value![0].value).to.be.eq(text)
+      }
+
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([{
+        type: elementType,
+        value: '',
+        control: {
+          type: controlType,
+          value: null,
+          placeholder: '文本型'
+        }
+      }])
+
+      cy.get('@canvas').type(`{leftArrow}`)
+
+      cy.get('.inputarea').type(text)
+
+      cy.get('@canvas').type('{ctrl}s')
+    })
+  })
+
+})

src/editor/assets/css/control/select.css

@@ -0,0 +1,44 @@
+.select-control-popup {
+  max-width: 160px;
+  min-width: 69px;
+  max-height: 225px;
+  position: absolute;
+  z-index: 1;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+  box-sizing: border-box;
+  margin: 5px 0;
+  overflow-y: auto;
+}
+
+.select-control-popup ul {
+  list-style: none;
+  padding: 3px 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.select-control-popup ul li {
+  font-size: 13px;
+  padding: 0 20px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #666;
+  height: 36px;
+  line-height: 36px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.select-control-popup ul li:hover {
+  background-color: #EEF2FD;
+}
+
+.select-control-popup ul li.active {
+  color: var(--COLOR-HOVER, #5175f4);
+  font-weight: 700;
+}

src/editor/assets/css/index.css

@@ -1,3 +1,5 @@
+@import './control/select.css';
+
 .inputarea {
   width: 0;
   height: 12px;

src/editor/core/command/CommandAdapt.ts

@@ -1236,7 +1236,10 @@ export class CommandAdapt {
     const { startIndex, endIndex } = this.range.getRange()
     if (!~startIndex && !~endIndex) return
     // 格式化element
-    formatElementList(payload, false)
+    formatElementList(payload, {
+      isHandleFirstElement: false,
+      editorOptions: this.options
+    })
     const elementList = this.draw.getElementList()
     const isCollapsed = startIndex === endIndex
     const start = startIndex + 1

src/editor/core/draw/Draw.ts

@@ -34,6 +34,7 @@ import { SeparatorParticle } from './particle/Separator'
 import { PageBreakParticle } from './particle/PageBreak'
 import { Watermark } from './frame/Watermark'
 import { EditorMode } from '../../dataset/enum/Editor'
+import { Control } from './control/Control'
 
 export class Draw {
 
@@ -70,6 +71,7 @@ export class Draw {
   private pageBreakParticle: PageBreakParticle
   private superscriptParticle: SuperscriptParticle
   private subscriptParticle: SubscriptParticle
+  private control: Control
 
   private rowList: IRow[]
   private painterStyle: IElementStyle | null
@@ -116,6 +118,7 @@ export class Draw {
     this.pageBreakParticle = new PageBreakParticle(this)
     this.superscriptParticle = new SuperscriptParticle()
     this.subscriptParticle = new SubscriptParticle()
+    this.control = new Control(this)
 
     new ScrollObserver(this)
     new SelectionObserver()
@@ -301,6 +304,10 @@ export class Draw {
     return this.hyperlinkParticle
   }
 
+  public getControl(): Control {
+    return this.control
+  }
+
   public getRowCount(): number {
     return this.rowList.length
   }
@@ -880,8 +887,8 @@ export class Draw {
       this.historyManager.execute(function () {
         self.setPageNo(pageNo)
         self.position.setPositionContext(oldPositionContext)
-        self.range.setRange(startIndex, endIndex)
         self.elementList = deepClone(oldElementList)
+        self.range.setRange(startIndex, endIndex)
         self.render({ curIndex, isSubmitHistory: false })
       })
     }