fix: IME position error #675
This commit is contained in:
@@ -51,6 +51,12 @@ body:
|
||||
label: What is actually happening?
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: editor-value
|
||||
attributes:
|
||||
label: Editor Value
|
||||
description: Output of `instance.command.getValue()`
|
||||
render: json
|
||||
- type: textarea
|
||||
id: system-info
|
||||
attributes:
|
||||
|
||||
+104
@@ -1,3 +1,107 @@
|
||||
## [0.9.91](https://github.com/Hufe921/canvas-editor/compare/v0.9.90...v0.9.91) (2024-08-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* format different types of line breaks #769 ([f65ff87](https://github.com/Hufe921/canvas-editor/commit/f65ff87e44728322417d235d2347ceca25cc6667)), closes [#769](https://github.com/Hufe921/canvas-editor/issues/769)
|
||||
* format initial data boundary error #771 #784 ([f62a315](https://github.com/Hufe921/canvas-editor/commit/f62a315a7bd04e49e9e17bc7737ccd1f0e751d69)), closes [#771](https://github.com/Hufe921/canvas-editor/issues/771) [#784](https://github.com/Hufe921/canvas-editor/issues/784)
|
||||
* set row margin boundary error ([5285170](https://github.com/Hufe921/canvas-editor/commit/528517094373b5fa9ca2145bb259889db865a588))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add page border ([3f6bdf6](https://github.com/Hufe921/canvas-editor/commit/3f6bdf6fcb583ab370cb5abe3eafebf6100f415e))
|
||||
* hit checkbox/radio control when click on label #651 ([31b76b6](https://github.com/Hufe921/canvas-editor/commit/31b76b6fb6640ea75383569cb16ad1b5a2ccf25f)), closes [#651](https://github.com/Hufe921/canvas-editor/issues/651)
|
||||
|
||||
|
||||
|
||||
## [0.9.90](https://github.com/Hufe921/canvas-editor/compare/v0.9.89...v0.9.90) (2024-08-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* float image position when scaling the page #766 ([c249b9e](https://github.com/Hufe921/canvas-editor/commit/c249b9eec215fe573b325d1430212f5f01c32099)), closes [#766](https://github.com/Hufe921/canvas-editor/issues/766)
|
||||
* get range paragraph info boundary error #758 ([4653fe7](https://github.com/Hufe921/canvas-editor/commit/4653fe7427f4a9ec40700f6a86ff284d1d46088a)), closes [#758](https://github.com/Hufe921/canvas-editor/issues/758)
|
||||
* insert block element row flex error #754 ([136b1ff](https://github.com/Hufe921/canvas-editor/commit/136b1ffa55b7b0b78bf3d114400489e1bbab4f17)), closes [#754](https://github.com/Hufe921/canvas-editor/issues/754)
|
||||
* paper printing size setting #760 ([7a6dd75](https://github.com/Hufe921/canvas-editor/commit/7a6dd753e59bde4cb581ac215b038dd1cd08c96f)), closes [#760](https://github.com/Hufe921/canvas-editor/issues/760)
|
||||
* set editor mode option error #755 ([500cec3](https://github.com/Hufe921/canvas-editor/commit/500cec3e0b63e012f6572dcedb071befa114956e)), closes [#755](https://github.com/Hufe921/canvas-editor/issues/755)
|
||||
* set row flex boundary error when deleting element ([2f272de](https://github.com/Hufe921/canvas-editor/commit/2f272dee58169607783e4cfd1347534f49db0834))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add location property to executeLocationControl api #753 ([d1a1aaa](https://github.com/Hufe921/canvas-editor/commit/d1a1aaa6ae08d8395df1df664d47bfe4fe821869)), closes [#753](https://github.com/Hufe921/canvas-editor/issues/753)
|
||||
* add radio and checkbox vertical align setting ([c375466](https://github.com/Hufe921/canvas-editor/commit/c3754663cee25003a7021a6079dd46e2a3a0abd8))
|
||||
* get context content width ([187498e](https://github.com/Hufe921/canvas-editor/commit/187498ed3dfba4386375d812d41b31c057ac3af8))
|
||||
|
||||
|
||||
|
||||
## [0.9.89](https://github.com/Hufe921/canvas-editor/compare/v0.9.88...v0.9.89) (2024-08-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* three click selection paragraph boundary error #742 ([9dd192f](https://github.com/Hufe921/canvas-editor/commit/9dd192ffd26f9f271efa06c81b6bd5e32557d872)), closes [#742](https://github.com/Hufe921/canvas-editor/issues/742)
|
||||
|
||||
|
||||
### Documentation
|
||||
|
||||
* update plugin markdown ([c2d3e94](https://github.com/Hufe921/canvas-editor/commit/c2d3e941b19a6bc766b0bfa8dac7911578170b6c))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add id property to contextMenu context #737 ([997ecc0](https://github.com/Hufe921/canvas-editor/commit/997ecc03e89afeaaf6b903f9f253c5c5090b3f78)), closes [#737](https://github.com/Hufe921/canvas-editor/issues/737)
|
||||
* add line number option #734 ([d89218a](https://github.com/Hufe921/canvas-editor/commit/d89218a916fce5a7b7b6bf27fa4663ecc4d15cf6)), closes [#734](https://github.com/Hufe921/canvas-editor/issues/734)
|
||||
* control related apis support the control id property ([dd1b53e](https://github.com/Hufe921/canvas-editor/commit/dd1b53ee6297bc72b0064c09522b597118919c50))
|
||||
* set range using the shift shortcut key #728 ([8878fd7](https://github.com/Hufe921/canvas-editor/commit/8878fd7734ae0a566f16ca2db14e64ded5a05f38)), closes [#728](https://github.com/Hufe921/canvas-editor/issues/728)
|
||||
|
||||
|
||||
|
||||
## [0.9.88](https://github.com/Hufe921/canvas-editor/compare/v0.9.87...v0.9.88) (2024-08-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* float image position boundary error #716 ([f5113f5](https://github.com/Hufe921/canvas-editor/commit/f5113f539c5b224fdb9af8cde8e61f632dc7e49f)), closes [#716](https://github.com/Hufe921/canvas-editor/issues/716)
|
||||
|
||||
|
||||
### Chores
|
||||
|
||||
* add touch support to signature component ([c3ef290](https://github.com/Hufe921/canvas-editor/commit/c3ef2907ae31be21cd3bc61a5600ad381230034f))
|
||||
* update issue template ([eea301e](https://github.com/Hufe921/canvas-editor/commit/eea301eb11fdc3d5870da2408abccf4d96d8532f))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add applyPageNumbers attribute to background option #729 ([8d112a8](https://github.com/Hufe921/canvas-editor/commit/8d112a8518656edd14201cb9bd16a417752fcdf9)), closes [#729](https://github.com/Hufe921/canvas-editor/issues/729)
|
||||
* add cursor setting option to executeSetValue api #715 ([3235e5a](https://github.com/Hufe921/canvas-editor/commit/3235e5ae386bd1f48f5f64427e1eb0ed3782838d)), closes [#715](https://github.com/Hufe921/canvas-editor/issues/715)
|
||||
* add title disabled property #680 ([87a8dbe](https://github.com/Hufe921/canvas-editor/commit/87a8dbea1596bcdee28edbb58b02fbe2a36e6c58)), closes [#680](https://github.com/Hufe921/canvas-editor/issues/680)
|
||||
|
||||
|
||||
|
||||
## [0.9.87](https://github.com/Hufe921/canvas-editor/compare/v0.9.86...v0.9.87) (2024-07-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* format of checkbox and radio control value ([72686fd](https://github.com/Hufe921/canvas-editor/commit/72686fda1bf12353699fd57273493d8a9b4caee4))
|
||||
* highlight checkbox and radio control #707 ([d939aa3](https://github.com/Hufe921/canvas-editor/commit/d939aa35ba7b19e5d1b5c4121fb873b2c579cc55)), closes [#707](https://github.com/Hufe921/canvas-editor/issues/707)
|
||||
* set control highlight limit component type ([e14fbd6](https://github.com/Hufe921/canvas-editor/commit/e14fbd622d1076cba5f34bd4fa29530af4f70261))
|
||||
* update punctuation width when scaling the page #712 ([83cb479](https://github.com/Hufe921/canvas-editor/commit/83cb47913195c43cde2b3ae344ff1d89a223e6a6)), closes [#712](https://github.com/Hufe921/canvas-editor/issues/712)
|
||||
* word breaking when scaling the page #666 ([2bd1f34](https://github.com/Hufe921/canvas-editor/commit/2bd1f34c15196968f69d4711613f1c81f1dade68)), closes [#666](https://github.com/Hufe921/canvas-editor/issues/666)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add custom field to getValue api #699 ([67c63f8](https://github.com/Hufe921/canvas-editor/commit/67c63f856f2c0e3e8c0644e39694357639c18d7e)), closes [#699](https://github.com/Hufe921/canvas-editor/issues/699)
|
||||
* delete cell contents when selecting rows and columns #706 ([ccd0627](https://github.com/Hufe921/canvas-editor/commit/ccd0627a6fad975acb43e9f16dda3fa13972c908)), closes [#706](https://github.com/Hufe921/canvas-editor/issues/706)
|
||||
* optimize text selection at the beginning of a line #695 ([97ac2da](https://github.com/Hufe921/canvas-editor/commit/97ac2daaf8f0688b181cb8baea9ba74ae1664361)), closes [#695](https://github.com/Hufe921/canvas-editor/issues/695)
|
||||
* set control properties in read-only mode #679 ([26a3468](https://github.com/Hufe921/canvas-editor/commit/26a3468f66d67bf8249cdc1a679c740d7cf1a9c9)), closes [#679](https://github.com/Hufe921/canvas-editor/issues/679)
|
||||
* set the container scrollbar to automatically scroll #711 ([b226566](https://github.com/Hufe921/canvas-editor/commit/b226566e2bf6f1b4bc3ae11577c7a96ae3cbf2d0)), closes [#711](https://github.com/Hufe921/canvas-editor/issues/711)
|
||||
|
||||
|
||||
|
||||
## [0.9.86](https://github.com/Hufe921/canvas-editor/compare/v0.9.85...v0.9.86) (2024-07-13)
|
||||
|
||||
|
||||
|
||||
@@ -21,6 +21,10 @@ export default defineConfig({
|
||||
{
|
||||
text: 'Demo',
|
||||
link: 'https://hufe.club/canvas-editor'
|
||||
},
|
||||
{
|
||||
text: '官方插件',
|
||||
link: '/guide/plugin-internal.html'
|
||||
}
|
||||
],
|
||||
sidebar: [
|
||||
@@ -71,7 +75,10 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: '插件',
|
||||
items: [{ text: '自定义插件', link: '/guide/plugin' }]
|
||||
items: [
|
||||
{ text: '自定义插件', link: '/guide/plugin-custom' },
|
||||
{ text: '官方插件', link: '/guide/plugin-internal' }
|
||||
]
|
||||
}
|
||||
],
|
||||
socialLinks: [
|
||||
@@ -104,6 +111,10 @@ export default defineConfig({
|
||||
{
|
||||
text: 'Demo',
|
||||
link: 'https://hufe.club/canvas-editor'
|
||||
},
|
||||
{
|
||||
text: 'Official plugin',
|
||||
link: '/en/guide/plugin-internal.html'
|
||||
}
|
||||
],
|
||||
sidebar: [
|
||||
@@ -154,7 +165,10 @@ export default defineConfig({
|
||||
},
|
||||
{
|
||||
text: 'Plugin',
|
||||
items: [{ text: 'plugin', link: '/en/guide/plugin' }]
|
||||
items: [
|
||||
{ text: 'custom', link: '/en/guide/plugin-custom' },
|
||||
{ text: 'official', link: '/en/guide/plugin-internal' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -679,7 +679,7 @@ Feature: Change how image rows are displayed
|
||||
Usage:
|
||||
|
||||
```javascript
|
||||
instance.command.executeSaveAsImageElement(element: IElement, display: ImageDisplay)
|
||||
instance.command.executeChangeImageDisplay(element: IElement, display: ImageDisplay)
|
||||
```
|
||||
|
||||
## executePageMode
|
||||
@@ -789,7 +789,7 @@ Feature: Set the editor data
|
||||
Usage:
|
||||
|
||||
```javascript
|
||||
instance.command.executeSetValue(payload: Partial<IEditorData>)
|
||||
instance.command.executeSetValue(payload: Partial<IEditorData>, options?: ISetValueOption)
|
||||
```
|
||||
|
||||
## executeRemoveControl
|
||||
@@ -929,7 +929,7 @@ Feature: Positioning and activating control
|
||||
Usage:
|
||||
|
||||
```javascript
|
||||
instance.command.executeLocationControl(controlId: string)
|
||||
instance.command.executeLocationControl(controlId: string, options?: ILocationControlOption)
|
||||
```
|
||||
|
||||
## executeInsertControl
|
||||
@@ -961,3 +961,13 @@ Usage:
|
||||
```javascript
|
||||
instance.command.executeInsertTitle(payload: IElement)
|
||||
```
|
||||
|
||||
## executeFocus
|
||||
|
||||
Feature: focus
|
||||
|
||||
Usage:
|
||||
|
||||
```javascript
|
||||
instance.command.executeFocus(payload?: IFocusOption)
|
||||
```
|
||||
|
||||
+42
-16
@@ -60,17 +60,19 @@ interface IEditorOption {
|
||||
wordBreak?: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD
|
||||
watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string;}
|
||||
control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string;}
|
||||
checkbox?: ICheckboxOption // Checkbox {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;}
|
||||
radio?: IRadioOption // Radio {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;}
|
||||
checkbox?: ICheckboxOption // Checkbox {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
|
||||
radio?: IRadioOption // Radio {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
|
||||
cursor?: ICursorOption // Cursor style. {width?: number; color?: string; dragWidth?: number; dragColor?: string;}
|
||||
title?: ITitleOption // Title configuration.{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;}
|
||||
placeholder?: IPlaceholder // Placeholder text
|
||||
group?: IGroup // Group option. {opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean}
|
||||
pageBreak?: IPageBreak // PageBreak option。{font?:string; fontSize?:number; lineDash?:number[];}
|
||||
zone?: IZoneOption // Zone option。{tipDisabled?:boolean;}
|
||||
background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。default: {color: '#FFFFFF'}
|
||||
background?: IBackgroundOption // Background option. {color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。default: {color: '#FFFFFF'}
|
||||
lineBreak?: ILineBreakOption // LineBreak option. {disabled?:boolean; color?:string; lineWidth?:number;}
|
||||
separator?: ISeparatorOption // Separator option. {lineWidth?:number; strokeStyle?:string;}
|
||||
lineNumber?: ILineNumberOption // LineNumber option. {size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
|
||||
pageBorder?: IPageBorderOption // PageBorder option. {color?:string; lineWidth:number; padding?:IPadding; disabled?:boolean;}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -109,11 +111,11 @@ interface IFooter {
|
||||
```typescript
|
||||
interface IPageNumber {
|
||||
bottom?: number // The size from the bottom of the page.default: 60
|
||||
size?: number // font size.default: 12
|
||||
font?: string // font.default: Microsoft YaHei
|
||||
color?: string // font color.default: #000000
|
||||
rowFlex?: RowFlex // Line alignment.default: CENTER
|
||||
format?: string // Page number format.default: {pageNo}。example：{pageNo}/{pageCount}
|
||||
size?: number // font size. default: 12
|
||||
font?: string // font. default: Microsoft YaHei
|
||||
color?: string // font color. default: #000000
|
||||
rowFlex?: RowFlex // Line alignment. default: CENTER
|
||||
format?: string // Page number format. default: {pageNo}。example：{pageNo}/{pageCount}
|
||||
numberType?: NumberType // The numeric type. default: ARABIC
|
||||
disabled?: boolean // Whether to disable
|
||||
startPageNo?: number // Start page number.default: 1
|
||||
@@ -127,10 +129,10 @@ interface IPageNumber {
|
||||
```typescript
|
||||
interface IWatermark {
|
||||
data: string // text.
|
||||
color?: string // color.default: #AEB5C0
|
||||
opacity?: number // transparency.default: 0.3
|
||||
size?: number // font size.default: 200
|
||||
font?: string // font.default: Microsoft YaHei
|
||||
color?: string // color. default: #AEB5C0
|
||||
opacity?: number // transparency. default: 0.3
|
||||
size?: number // font size. default: 200
|
||||
font?: string // font. default: Microsoft YaHei
|
||||
}
|
||||
```
|
||||
|
||||
@@ -139,9 +141,33 @@ interface IWatermark {
|
||||
```typescript
|
||||
interface IPlaceholder {
|
||||
data: string // text.
|
||||
color?: string // color.default: #DCDFE6
|
||||
opacity?: number // transparency.default: 1
|
||||
size?: number // font size.default: 16
|
||||
font?: string // font.default: Microsoft YaHei
|
||||
color?: string // color. default: #DCDFE6
|
||||
opacity?: number // transparency. default: 1
|
||||
size?: number // font size. default: 16
|
||||
font?: string // font. default: Microsoft YaHei
|
||||
}
|
||||
```
|
||||
|
||||
## LineNumber Configuration
|
||||
|
||||
```typescript
|
||||
interface ILineNumberOption {
|
||||
size?: number // font size. default: 12
|
||||
font?: string // font. default: Microsoft YaHei
|
||||
color?: string // color. default: #000000
|
||||
disabled?: boolean // Whether to disable. default: false
|
||||
right?: number // Distance from the main text. default: 20
|
||||
type?: LineNumberType // Number type (renumber each page, consecutive numbering). default: continuity
|
||||
}
|
||||
```
|
||||
|
||||
## PageBorder Configuration
|
||||
|
||||
```typescript
|
||||
interface IPageBorderOption {
|
||||
color?: string // color. default: #000000
|
||||
lineWidth?: number // line width. default: 1
|
||||
padding?: IPadding // padding. default: [0, 0, 0, 0]
|
||||
disabled?: boolean // Whether to disable. default: true
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
# Custom Plugin
|
||||
|
||||
::: tip
|
||||
1. Currently, only methods can be added and modified to the editor instance, and more functions will be extended in the future
|
||||
2. Official maintenance plugin: https://github.com/Hufe921/canvas-editor-plugin
|
||||
Official plugin: https://github.com/Hufe921/canvas-editor-plugin
|
||||
:::
|
||||
|
||||
## Write a Plugin
|
||||
@@ -14,11 +13,13 @@ export function myPlugin(editor: Editor, options?: Option) {
|
||||
|
||||
// 2. add，see more：src/plugins/markdown
|
||||
editor.command.addFunction = () => {}
|
||||
|
||||
// 3. listener, eventbus, shortcut, contextmenu, override...
|
||||
}
|
||||
```
|
||||
|
||||
## Use Plugin
|
||||
|
||||
```javascript
|
||||
instance.add(myPlugin, options?: Option)
|
||||
instance.use(myPlugin, options?: Option)
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
# Official plugin
|
||||
|
||||
::: tip
|
||||
Official plugin: https://github.com/Hufe921/canvas-editor-plugin
|
||||
:::
|
||||
|
||||
## Barcode1d
|
||||
|
||||
```javascript
|
||||
import Editor from "@hufe921/canvas-editor"
|
||||
import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(barcode1DPlugin)
|
||||
|
||||
instance.executeInsertBarcode1D(
|
||||
content: string,
|
||||
width: number,
|
||||
height: number,
|
||||
options?: JsBarcode.Options
|
||||
)
|
||||
```
|
||||
|
||||
## Barcode2d
|
||||
|
||||
```javascript
|
||||
import Editor from "@hufe921/canvas-editor"
|
||||
import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(barcode2DPlugin, options?: IBarcode2DOption)
|
||||
|
||||
instance.executeInsertBarcode2D(
|
||||
content: string,
|
||||
width: number,
|
||||
height: number,
|
||||
hints?: Map<EncodeHintType, any>
|
||||
)
|
||||
```
|
||||
|
||||
## Code block
|
||||
|
||||
```javascript
|
||||
import Editor from "@hufe921/canvas-editor"
|
||||
import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(codeblockPlugin)
|
||||
|
||||
instance.executeInsertCodeblock(content: string)
|
||||
```
|
||||
|
||||
## Word
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(docxPlugin)
|
||||
|
||||
command.executeImportDocx({
|
||||
arrayBuffer: buffer
|
||||
})
|
||||
|
||||
instance.executeExportDocx({
|
||||
fileName: string
|
||||
})
|
||||
```
|
||||
|
||||
## Excel
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import excelPlugin from '@hufe921/canvas-editor-plugin-excel'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(excelPlugin)
|
||||
|
||||
command.executeImportExcel({
|
||||
arrayBuffer: buffer
|
||||
})
|
||||
```
|
||||
|
||||
## Floating toolbar
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(floatingToolbarPlugin)
|
||||
```
|
||||
|
||||
## Diagram
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import diagramPlugin from '@hufe921/canvas-editor-plugin-diagram'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(diagramPlugin)
|
||||
|
||||
command.executeLoadDiagram({
|
||||
lang?: Lang
|
||||
data?: string
|
||||
onDestroy?: (message?: any) => void
|
||||
})
|
||||
```
|
||||
@@ -157,6 +157,7 @@ interface IElement {
|
||||
title?: {
|
||||
conceptId?: string;
|
||||
deletable?: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
// list
|
||||
listType?: ListType;
|
||||
|
||||
@@ -679,7 +679,7 @@ instance.command.executeSaveAsImageElement()
|
||||
用法：
|
||||
|
||||
```javascript
|
||||
instance.command.executeSaveAsImageElement(element: IElement, display: ImageDisplay)
|
||||
instance.command.executeChangeImageDisplay(element: IElement, display: ImageDisplay)
|
||||
```
|
||||
|
||||
## executePageMode
|
||||
@@ -789,7 +789,7 @@ instance.command.executeUpdateElementById(payload: IUpdateElementByIdOption)
|
||||
用法：
|
||||
|
||||
```javascript
|
||||
instance.command.executeSetValue(payload: Partial<IEditorData>)
|
||||
instance.command.executeSetValue(payload: Partial<IEditorData>, options?: ISetValueOption)
|
||||
```
|
||||
|
||||
## executeRemoveControl
|
||||
@@ -929,7 +929,7 @@ instance.command.executeSetControlHighlight(payload: ISetControlHighlightOption)
|
||||
用法：
|
||||
|
||||
```javascript
|
||||
instance.command.executeLocationControl(controlId: string)
|
||||
instance.command.executeLocationControl(controlId: string, options?: ILocationControlOption)
|
||||
```
|
||||
|
||||
## executeInsertControl
|
||||
@@ -961,3 +961,13 @@ instance.command.executeUpdateOptions(payload: IUpdateOption)
|
||||
```javascript
|
||||
instance.command.executeInsertTitle(payload: IElement)
|
||||
```
|
||||
|
||||
## executeFocus
|
||||
|
||||
功能：光标聚焦
|
||||
|
||||
用法：
|
||||
|
||||
```javascript
|
||||
instance.command.executeFocus(payload?: IFocusOption)
|
||||
```
|
||||
|
||||
+29
-3
@@ -60,17 +60,19 @@ interface IEditorOption {
|
||||
wordBreak?: WordBreak // 单词与标点断行：BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认：BREAK_WORD
|
||||
watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
|
||||
control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string;}
|
||||
checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;}
|
||||
radio?: IRadioOption // 单选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;}
|
||||
checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
|
||||
radio?: IRadioOption // 单选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
|
||||
cursor?: ICursorOption // 光标样式。{width?: number; color?: string; dragWidth?: number; dragColor?: string;}
|
||||
title?: ITitleOption // 标题配置。{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;}
|
||||
placeholder?: IPlaceholder // 编辑器空白占位文本
|
||||
group?: IGroup // 成组配置。{opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean}
|
||||
pageBreak?: IPageBreak // 分页符配置。{font?:string; fontSize?:number; lineDash?:number[];}
|
||||
zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;}
|
||||
background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认：{color: '#FFFFFF'}
|
||||
background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。默认：{color: '#FFFFFF'}
|
||||
lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;}
|
||||
separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;}
|
||||
lineNumber?: ILineNumberOption // 行号配置。{size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
|
||||
pageBorder?: IPageBorderOption // 页面边框配置。{color?:string; lineWidth:number; padding?:IPadding; disabled?:boolean;}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -145,3 +147,27 @@ interface IPlaceholder {
|
||||
font?: string // 字体。默认：Microsoft YaHei
|
||||
}
|
||||
```
|
||||
|
||||
## 行号配置
|
||||
|
||||
```typescript
|
||||
interface ILineNumberOption {
|
||||
size?: number // 字体大小。默认：12
|
||||
font?: string // 字体。默认：Microsoft YaHei
|
||||
color?: string // 颜色。默认：#000000
|
||||
disabled?: boolean // 是否禁用。默认：true
|
||||
right?: number // 距离正文距离。默认：20
|
||||
type?: LineNumberType // 编号类型（每页重新编号、连续编号）。默认：连续编号
|
||||
}
|
||||
```
|
||||
|
||||
## 页面边框配置
|
||||
|
||||
```typescript
|
||||
interface IPageBorderOption {
|
||||
color?: string // 颜色。默认：#000000
|
||||
lineWidth?: number // 宽度。默认：1
|
||||
padding?: IPadding // 距离正文内边距。默认：[0, 5, 0, 5]
|
||||
disabled?: boolean // 是否禁用。默认：true
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
# 自定义插件
|
||||
|
||||
::: tip
|
||||
1. 目前仅支持对编辑器实例进行方法的增加及修改，后续扩展更多功能
|
||||
2. 官方维护插件：https://github.com/Hufe921/canvas-editor-plugin
|
||||
官方维护插件仓库：https://github.com/Hufe921/canvas-editor-plugin
|
||||
:::
|
||||
|
||||
## 开发插件
|
||||
@@ -14,11 +13,13 @@ export function myPlugin(editor: Editor, options?: Option) {
|
||||
|
||||
// 2. 增加方法，详见：src/plugins/markdown
|
||||
editor.command.addFunction = () => {}
|
||||
|
||||
// 3. 事件监听、快捷键、右键菜单、重写方法等组合处理
|
||||
}
|
||||
```
|
||||
|
||||
## 使用插件
|
||||
|
||||
```javascript
|
||||
instance.add(myPlugin, options?: Option)
|
||||
instance.use(myPlugin, options?: Option)
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
# 官方插件
|
||||
|
||||
::: tip
|
||||
官方维护插件仓库：https://github.com/Hufe921/canvas-editor-plugin
|
||||
:::
|
||||
|
||||
## 条形码
|
||||
|
||||
```javascript
|
||||
import Editor from "@hufe921/canvas-editor"
|
||||
import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(barcode1DPlugin)
|
||||
|
||||
instance.executeInsertBarcode1D(
|
||||
content: string,
|
||||
width: number,
|
||||
height: number,
|
||||
options?: JsBarcode.Options
|
||||
)
|
||||
```
|
||||
|
||||
## 二维码
|
||||
|
||||
```javascript
|
||||
import Editor from "@hufe921/canvas-editor"
|
||||
import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(barcode2DPlugin, options?: IBarcode2DOption)
|
||||
|
||||
instance.executeInsertBarcode2D(
|
||||
content: string,
|
||||
width: number,
|
||||
height: number,
|
||||
hints?: Map<EncodeHintType, any>
|
||||
)
|
||||
```
|
||||
|
||||
## 代码块
|
||||
|
||||
```javascript
|
||||
import Editor from "@hufe921/canvas-editor"
|
||||
import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(codeblockPlugin)
|
||||
|
||||
instance.executeInsertCodeblock(content: string)
|
||||
```
|
||||
|
||||
## Word
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(docxPlugin)
|
||||
|
||||
command.executeImportDocx({
|
||||
arrayBuffer: buffer
|
||||
})
|
||||
|
||||
instance.executeExportDocx({
|
||||
fileName: string
|
||||
})
|
||||
```
|
||||
|
||||
## Excel
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import excelPlugin from '@hufe921/canvas-editor-plugin-excel'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(excelPlugin)
|
||||
|
||||
command.executeImportExcel({
|
||||
arrayBuffer: buffer
|
||||
})
|
||||
```
|
||||
|
||||
## 悬浮工具
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(floatingToolbarPlugin)
|
||||
```
|
||||
|
||||
## 流程图
|
||||
|
||||
```javascript
|
||||
import Editor from '@hufe921/canvas-editor'
|
||||
import diagramPlugin from '@hufe921/canvas-editor-plugin-diagram'
|
||||
|
||||
const instance = new Editor()
|
||||
instance.use(diagramPlugin)
|
||||
|
||||
command.executeLoadDiagram({
|
||||
lang?: Lang
|
||||
data?: string
|
||||
onDestroy?: (message?: any) => void
|
||||
})
|
||||
```
|
||||
@@ -157,6 +157,7 @@ interface IElement {
|
||||
title?: {
|
||||
conceptId?: string;
|
||||
deletable?: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
// 列表
|
||||
listType?: ListType;
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
"name": "@hufe921/canvas-editor",
|
||||
"author": "Hufe",
|
||||
"license": "MIT",
|
||||
"version": "0.9.86",
|
||||
"version": "0.9.91",
|
||||
"description": "rich text editor by canvas/svg",
|
||||
"publishConfig": {
|
||||
"registry": "https://registry.npmjs.org/",
|
||||
|
||||
@@ -55,6 +55,10 @@ export class Signature {
|
||||
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() {
|
||||
@@ -166,6 +170,9 @@ export class Signature {
|
||||
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() {
|
||||
@@ -302,8 +309,32 @@ export class Signature {
|
||||
}
|
||||
}
|
||||
|
||||
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')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,3 +126,7 @@
|
||||
background: #5b9cf3;
|
||||
border-color: #5b9cf3;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
@@ -95,6 +95,7 @@ export class Command {
|
||||
public executeInsertControl: CommandAdapt['insertControl']
|
||||
public executeUpdateOptions: CommandAdapt['updateOptions']
|
||||
public executeInsertTitle: CommandAdapt['insertTitle']
|
||||
public executeFocus: CommandAdapt['focus']
|
||||
public getCatalog: CommandAdapt['getCatalog']
|
||||
public getImage: CommandAdapt['getImage']
|
||||
public getOptions: CommandAdapt['getOptions']
|
||||
@@ -214,6 +215,7 @@ export class Command {
|
||||
this.executeSetZone = adapt.setZone.bind(adapt)
|
||||
this.executeUpdateOptions = adapt.updateOptions.bind(adapt)
|
||||
this.executeInsertTitle = adapt.insertTitle.bind(adapt)
|
||||
this.executeFocus = adapt.focus.bind(adapt)
|
||||
// 获取
|
||||
this.getImage = adapt.getImage.bind(adapt)
|
||||
this.getOptions = adapt.getOptions.bind(adapt)
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
titleSizeMapping
|
||||
} from '../../dataset/constant/Title'
|
||||
import { defaultWatermarkOption } from '../../dataset/constant/Watermark'
|
||||
import { ImageDisplay } from '../../dataset/enum/Common'
|
||||
import { ImageDisplay, LocationPosition } from '../../dataset/enum/Common'
|
||||
import { ControlComponent } from '../../dataset/enum/Control'
|
||||
import {
|
||||
EditorContext,
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
import { ElementType } from '../../dataset/enum/Element'
|
||||
import { ElementStyleKey } from '../../dataset/enum/ElementStyle'
|
||||
import { ListStyle, ListType } from '../../dataset/enum/List'
|
||||
import { MoveDirection } from '../../dataset/enum/Observer'
|
||||
import { RowFlex } from '../../dataset/enum/Row'
|
||||
import { TableBorder, TdBorder, TdSlash } from '../../dataset/enum/table/Table'
|
||||
import { TitleLevel } from '../../dataset/enum/Title'
|
||||
@@ -31,6 +32,7 @@ import { DeepRequired } from '../../interface/Common'
|
||||
import {
|
||||
IGetControlValueOption,
|
||||
IGetControlValueResult,
|
||||
ILocationControlOption,
|
||||
ISetControlExtensionOption,
|
||||
ISetControlHighlightOption,
|
||||
ISetControlProperties,
|
||||
@@ -51,6 +53,8 @@ import {
|
||||
IEditorOption,
|
||||
IEditorResult,
|
||||
IEditorText,
|
||||
IFocusOption,
|
||||
ISetValueOption,
|
||||
IUpdateOption
|
||||
} from '../../interface/Editor'
|
||||
import {
|
||||
@@ -299,15 +303,13 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public applyPainterStyle() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
this.canvasEvent.applyPainterStyle()
|
||||
}
|
||||
|
||||
public format() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
// 选区设置或设置换行处样式
|
||||
@@ -335,8 +337,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public font(payload: string) {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (selection?.length) {
|
||||
@@ -358,8 +359,7 @@ export class CommandAdapt {
|
||||
public size(payload: number) {
|
||||
const { minSize, maxSize, defaultSize } = this.options
|
||||
if (payload < minSize || payload > maxSize) return
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
// 选区设置或设置换行处样式
|
||||
let renderOption: IDrawOption = {}
|
||||
@@ -395,8 +395,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public sizeAdd() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getTextLikeSelectionElementList()
|
||||
// 选区设置或设置换行处样式
|
||||
@@ -435,8 +434,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public sizeMinus() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getTextLikeSelectionElementList()
|
||||
// 选区设置或设置换行处样式
|
||||
@@ -475,8 +473,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public bold() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (selection?.length) {
|
||||
@@ -497,8 +494,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public italic() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (selection?.length) {
|
||||
@@ -519,8 +515,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public underline(textDecoration?: ITextDecoration) {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (selection?.length) {
|
||||
@@ -558,8 +553,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public strikeout() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (selection?.length) {
|
||||
@@ -583,8 +577,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public superscript() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (!selection) return
|
||||
@@ -613,8 +606,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public subscript() {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (!selection) return
|
||||
@@ -643,8 +635,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public color(payload: string | null) {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (selection?.length) {
|
||||
@@ -675,8 +666,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public highlight(payload: string | null) {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelectionElementList()
|
||||
if (selection?.length) {
|
||||
@@ -801,7 +791,7 @@ export class CommandAdapt {
|
||||
const row = rowList[rowIndex]
|
||||
offsetX = row?.offsetX || 0
|
||||
}
|
||||
const innerWidth = this.draw.getOriginalInnerWidth() - offsetX
|
||||
const innerWidth = this.draw.getContextInnerWidth() - offsetX
|
||||
// colgroup
|
||||
const colgroup: IColgroup[] = []
|
||||
const colWidth = innerWidth / col
|
||||
@@ -822,7 +812,7 @@ export class CommandAdapt {
|
||||
tdList.push({
|
||||
colspan: 1,
|
||||
rowspan: 1,
|
||||
value: [{ value: ZERO, size: 16 }]
|
||||
value: []
|
||||
})
|
||||
}
|
||||
trList.push(tr)
|
||||
@@ -1801,8 +1791,7 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public image(payload: IDrawImagePayload) {
|
||||
const isDisabled =
|
||||
this.draw.isReadonly() || this.control.getIsDisabledControl()
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const { startIndex, endIndex } = this.range.getRange()
|
||||
if (!~startIndex && !~endIndex) return
|
||||
@@ -1962,12 +1951,11 @@ export class CommandAdapt {
|
||||
}
|
||||
|
||||
public async print() {
|
||||
const { scale, printPixelRatio, paperDirection } = this.options
|
||||
const { scale, printPixelRatio, paperDirection, width, height } =
|
||||
this.options
|
||||
if (scale !== 1) {
|
||||
this.draw.setPageScale(1)
|
||||
}
|
||||
const width = this.draw.getOriginalWidth()
|
||||
const height = this.draw.getOriginalHeight()
|
||||
const base64List = await this.draw.getDataURL({
|
||||
pixelRatio: printPixelRatio,
|
||||
mode: EditorMode.PRINT
|
||||
@@ -2301,8 +2289,8 @@ export class CommandAdapt {
|
||||
}
|
||||
}
|
||||
|
||||
public setValue(payload: Partial<IEditorData>) {
|
||||
this.draw.setValue(payload)
|
||||
public setValue(payload: Partial<IEditorData>, options?: ISetValueOption) {
|
||||
this.draw.setValue(payload, options)
|
||||
}
|
||||
|
||||
public removeControl() {
|
||||
@@ -2449,19 +2437,19 @@ export class CommandAdapt {
|
||||
public getControlValue(
|
||||
payload: IGetControlValueOption
|
||||
): IGetControlValueResult | null {
|
||||
return this.draw.getControl().getValueByConceptId(payload)
|
||||
return this.draw.getControl().getValueById(payload)
|
||||
}
|
||||
|
||||
public setControlValue(payload: ISetControlValueOption) {
|
||||
this.draw.getControl().setValueByConceptId(payload)
|
||||
this.draw.getControl().setValueById(payload)
|
||||
}
|
||||
|
||||
public setControlExtension(payload: ISetControlExtensionOption) {
|
||||
this.draw.getControl().setExtensionByConceptId(payload)
|
||||
this.draw.getControl().setExtensionById(payload)
|
||||
}
|
||||
|
||||
public setControlProperties(payload: ISetControlProperties) {
|
||||
this.draw.getControl().setPropertiesByConceptId(payload)
|
||||
this.draw.getControl().setPropertiesById(payload)
|
||||
}
|
||||
|
||||
public setControlHighlight(payload: ISetControlHighlightOption) {
|
||||
@@ -2483,7 +2471,8 @@ export class CommandAdapt {
|
||||
return this.draw.getControl().getList()
|
||||
}
|
||||
|
||||
public locationControl(controlId: string) {
|
||||
public locationControl(controlId: string, options?: ILocationControlOption) {
|
||||
const isLocationAfter = options?.position === LocationPosition.AFTER
|
||||
function location(
|
||||
elementList: IElement[],
|
||||
zone: EditorZone
|
||||
@@ -2517,7 +2506,16 @@ export class CommandAdapt {
|
||||
}
|
||||
}
|
||||
if (element?.controlId !== controlId) continue
|
||||
const curIndex = i - 1
|
||||
let curIndex = i - 1
|
||||
if (isLocationAfter) {
|
||||
curIndex -= 1
|
||||
if (
|
||||
element.controlComponent !== ControlComponent.PLACEHOLDER &&
|
||||
element.controlComponent !== ControlComponent.POSTFIX
|
||||
) {
|
||||
continue
|
||||
}
|
||||
}
|
||||
return {
|
||||
zone,
|
||||
range: {
|
||||
@@ -2730,4 +2728,23 @@ export class CommandAdapt {
|
||||
// 插入标题
|
||||
this.draw.insertElementList([cloneElement])
|
||||
}
|
||||
|
||||
public focus(payload?: IFocusOption) {
|
||||
const { position = LocationPosition.AFTER } = payload || {}
|
||||
const curIndex =
|
||||
position === LocationPosition.BEFORE
|
||||
? 0
|
||||
: this.draw.getOriginalMainElementList().length - 1
|
||||
this.range.setRange(curIndex, curIndex)
|
||||
this.draw.render({
|
||||
curIndex,
|
||||
isCompute: false,
|
||||
isSubmitHistory: false
|
||||
})
|
||||
const positionList = this.draw.getPosition().getPositionList()
|
||||
this.draw.getCursor().moveCursorToVisible({
|
||||
cursorPosition: positionList[curIndex],
|
||||
direction: MoveDirection.DOWN
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,7 +159,9 @@ export class ContextMenu {
|
||||
const originalElementList = this.draw.getOriginalElementList()
|
||||
const originTableElement = originalElementList[index!] || null
|
||||
if (originTableElement) {
|
||||
tableElement = zipElementList([originTableElement])[0]
|
||||
tableElement = zipElementList([originTableElement], {
|
||||
extraPickAttrs: ['id']
|
||||
})[0]
|
||||
}
|
||||
}
|
||||
// 是否存在跨行/列
|
||||
|
||||
@@ -15,7 +15,8 @@ import {
|
||||
import {
|
||||
IEditorData,
|
||||
IEditorOption,
|
||||
IEditorResult
|
||||
IEditorResult,
|
||||
ISetValueOption
|
||||
} from '../../interface/Editor'
|
||||
import {
|
||||
IElement,
|
||||
@@ -100,6 +101,8 @@ import { ImageDisplay } from '../../dataset/enum/Common'
|
||||
import { PUNCTUATION_REG } from '../../dataset/constant/Regular'
|
||||
import { LineBreakParticle } from './particle/LineBreakParticle'
|
||||
import { MouseObserver } from '../observer/MouseObserver'
|
||||
import { LineNumber } from './frame/LineNumber'
|
||||
import { PageBorder } from './frame/PageBorder'
|
||||
|
||||
export class Draw {
|
||||
private container: HTMLDivElement
|
||||
@@ -137,6 +140,7 @@ export class Draw {
|
||||
private tableParticle: TableParticle
|
||||
private tableTool: TableTool
|
||||
private pageNumber: PageNumber
|
||||
private lineNumber: LineNumber
|
||||
private waterMark: Watermark
|
||||
private placeholder: Placeholder
|
||||
private header: Header
|
||||
@@ -153,6 +157,7 @@ export class Draw {
|
||||
private listParticle: ListParticle
|
||||
private lineBreakParticle: LineBreakParticle
|
||||
private control: Control
|
||||
private pageBorder: PageBorder
|
||||
private workerManager: WorkerManager
|
||||
private scrollObserver: ScrollObserver
|
||||
private selectionObserver: SelectionObserver
|
||||
@@ -212,6 +217,7 @@ export class Draw {
|
||||
this.tableParticle = new TableParticle(this)
|
||||
this.tableTool = new TableTool(this)
|
||||
this.pageNumber = new PageNumber(this)
|
||||
this.lineNumber = new LineNumber(this)
|
||||
this.waterMark = new Watermark(this)
|
||||
this.placeholder = new Placeholder(this)
|
||||
this.header = new Header(this, data.header)
|
||||
@@ -228,6 +234,7 @@ export class Draw {
|
||||
this.listParticle = new ListParticle(this)
|
||||
this.lineBreakParticle = new LineBreakParticle(this)
|
||||
this.control = new Control(this)
|
||||
this.pageBorder = new PageBorder(this)
|
||||
|
||||
this.scrollObserver = new ScrollObserver(this)
|
||||
this.selectionObserver = new SelectionObserver(this)
|
||||
@@ -298,6 +305,7 @@ export class Draw {
|
||||
this.clearSideEffect()
|
||||
this.range.clearRange()
|
||||
this.mode = payload
|
||||
this.options.mode = payload
|
||||
this.render({
|
||||
isSetCursor: false,
|
||||
isSubmitHistory: false
|
||||
@@ -316,6 +324,23 @@ export class Draw {
|
||||
}
|
||||
}
|
||||
|
||||
public isDisabled() {
|
||||
const { startIndex, endIndex } = this.range.getRange()
|
||||
const elementList = this.getElementList()
|
||||
if (startIndex === endIndex) {
|
||||
const startElement = elementList[startIndex]
|
||||
const nextElement = elementList[startIndex + 1]
|
||||
return !!(
|
||||
(startElement?.title?.disabled && nextElement?.title?.disabled) ||
|
||||
(startElement?.control?.disabled && nextElement?.control?.disabled)
|
||||
)
|
||||
}
|
||||
const selectionElementList = elementList.slice(startIndex + 1, endIndex + 1)
|
||||
return selectionElementList.some(
|
||||
element => element.title?.disabled || element.control?.disabled
|
||||
)
|
||||
}
|
||||
|
||||
public getOriginalWidth(): number {
|
||||
const { paperDirection, width, height } = this.options
|
||||
return paperDirection === PaperDirection.VERTICAL ? width : height
|
||||
@@ -368,6 +393,18 @@ export class Draw {
|
||||
return width - margins[1] - margins[3]
|
||||
}
|
||||
|
||||
public getContextInnerWidth(): number {
|
||||
const positionContext = this.position.getPositionContext()
|
||||
if (positionContext.isTable) {
|
||||
const { index, trIndex, tdIndex } = positionContext
|
||||
const elementList = this.getOriginalElementList()
|
||||
const td = elementList[index!].trList![trIndex!].tdList[tdIndex!]
|
||||
const tdPadding = this.getTdPadding()
|
||||
return td!.width! - tdPadding[1] - tdPadding[3]
|
||||
}
|
||||
return this.getOriginalInnerWidth()
|
||||
}
|
||||
|
||||
public getMargins(): IMargin {
|
||||
return <IMargin>this.getOriginalMargins().map(m => m * this.options.scale)
|
||||
}
|
||||
@@ -531,6 +568,10 @@ export class Draw {
|
||||
return this.lineBreakParticle
|
||||
}
|
||||
|
||||
public getTextParticle(): TextParticle {
|
||||
return this.textParticle
|
||||
}
|
||||
|
||||
public getHeaderElementList(): IElement[] {
|
||||
return this.header.getElementList()
|
||||
}
|
||||
@@ -1034,14 +1075,16 @@ export class Draw {
|
||||
}
|
||||
}
|
||||
|
||||
public setValue(payload: Partial<IEditorData>) {
|
||||
public setValue(payload: Partial<IEditorData>, options?: ISetValueOption) {
|
||||
const { header, main, footer } = deepClone(payload)
|
||||
if (!header && !main && !footer) return
|
||||
const { isSetCursor = false } = options || {}
|
||||
const pageComponentData = [header, main, footer]
|
||||
pageComponentData.forEach(data => {
|
||||
if (!data) return
|
||||
formatElementList(data, {
|
||||
editorOptions: this.options
|
||||
editorOptions: this.options,
|
||||
isForceCompensation: true
|
||||
})
|
||||
})
|
||||
this.setEditorData({
|
||||
@@ -1051,8 +1094,17 @@ export class Draw {
|
||||
})
|
||||
// 渲染&计算&清空历史记录
|
||||
this.historyManager.recovery()
|
||||
const curIndex = isSetCursor
|
||||
? main?.length
|
||||
? main.length - 1
|
||||
: 0
|
||||
: undefined
|
||||
if (curIndex !== undefined) {
|
||||
this.range.setRange(curIndex, curIndex)
|
||||
}
|
||||
this.render({
|
||||
isSetCursor: false,
|
||||
curIndex,
|
||||
isSetCursor,
|
||||
isFirstRender: true
|
||||
})
|
||||
}
|
||||
@@ -1140,7 +1192,7 @@ export class Draw {
|
||||
const { defaultBasicRowMarginHeight, defaultRowMargin, scale } =
|
||||
this.options
|
||||
return (
|
||||
defaultBasicRowMarginHeight * (el.rowMargin || defaultRowMargin) * scale
|
||||
defaultBasicRowMarginHeight * (el.rowMargin ?? defaultRowMargin) * scale
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1166,6 +1218,7 @@ export class Draw {
|
||||
ascent: 0,
|
||||
elementList: [],
|
||||
startIndex: 0,
|
||||
rowIndex: 0,
|
||||
rowFlex: elementList?.[0]?.rowFlex || elementList?.[1]?.rowFlex
|
||||
})
|
||||
}
|
||||
@@ -1178,7 +1231,7 @@ export class Draw {
|
||||
const curRow: IRow = rowList[rowList.length - 1]
|
||||
const element = elementList[i]
|
||||
const rowMargin =
|
||||
defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin)
|
||||
defaultBasicRowMarginHeight * (element.rowMargin ?? defaultRowMargin)
|
||||
const metrics: IElementMetrics = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
@@ -1682,16 +1735,18 @@ export class Draw {
|
||||
i
|
||||
)
|
||||
// 单词宽度大于行可用宽度，无需折行
|
||||
if (width <= availableWidth) {
|
||||
curRowWidth += width
|
||||
const wordWidth = width * scale
|
||||
if (wordWidth <= availableWidth) {
|
||||
curRowWidth += wordWidth
|
||||
nextElement = endElement
|
||||
}
|
||||
}
|
||||
// 标点符号
|
||||
curRowWidth += this.textParticle.measurePunctuationWidth(
|
||||
const punctuationWidth = this.textParticle.measurePunctuationWidth(
|
||||
ctx,
|
||||
nextElement
|
||||
)
|
||||
curRowWidth += punctuationWidth * scale
|
||||
}
|
||||
}
|
||||
// 列表信息
|
||||
@@ -1724,6 +1779,7 @@ export class Draw {
|
||||
startIndex: i,
|
||||
elementList: [rowElement],
|
||||
ascent,
|
||||
rowIndex: curRow.rowIndex + 1,
|
||||
rowFlex: elementList[i]?.rowFlex || elementList[i + 1]?.rowFlex,
|
||||
isPageBreak: element.type === ElementType.PAGE_BREAK
|
||||
}
|
||||
@@ -1981,13 +2037,25 @@ export class Draw {
|
||||
element.controlComponent === ControlComponent.CHECKBOX
|
||||
) {
|
||||
this.textParticle.complete()
|
||||
this.checkboxParticle.render(ctx, element, x, y + offsetY)
|
||||
this.checkboxParticle.render({
|
||||
ctx,
|
||||
x,
|
||||
y: y + offsetY,
|
||||
index: j,
|
||||
row: curRow
|
||||
})
|
||||
} else if (
|
||||
element.type === ElementType.RADIO ||
|
||||
element.controlComponent === ControlComponent.RADIO
|
||||
) {
|
||||
this.textParticle.complete()
|
||||
this.radioParticle.render(ctx, element, x, y + offsetY)
|
||||
this.radioParticle.render({
|
||||
ctx,
|
||||
x,
|
||||
y: y + offsetY,
|
||||
index: j,
|
||||
row: curRow
|
||||
})
|
||||
} else if (element.type === ElementType.TAB) {
|
||||
this.textParticle.complete()
|
||||
} else if (
|
||||
@@ -2228,6 +2296,7 @@ export class Draw {
|
||||
ctx: CanvasRenderingContext2D,
|
||||
payload: IDrawFloatPayload
|
||||
) {
|
||||
const { scale } = this.options
|
||||
const floatPositionList = this.position.getFloatPositionList()
|
||||
const { imgDisplay, pageNo } = payload
|
||||
for (let e = 0; e < floatPositionList.length; e++) {
|
||||
@@ -2244,8 +2313,8 @@ export class Draw {
|
||||
this.imageParticle.render(
|
||||
ctx,
|
||||
element,
|
||||
imgFloatPosition.x,
|
||||
imgFloatPosition.y
|
||||
imgFloatPosition.x * scale,
|
||||
imgFloatPosition.y * scale
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -2265,7 +2334,15 @@ export class Draw {
|
||||
|
||||
private _drawPage(payload: IDrawPagePayload) {
|
||||
const { elementList, positionList, rowList, pageNo } = payload
|
||||
const { inactiveAlpha, pageMode, header, footer, pageNumber } = this.options
|
||||
const {
|
||||
inactiveAlpha,
|
||||
pageMode,
|
||||
header,
|
||||
footer,
|
||||
pageNumber,
|
||||
lineNumber,
|
||||
pageBorder
|
||||
} = this.options
|
||||
const innerWidth = this.getInnerWidth()
|
||||
const ctx = this.ctxList[pageNo]
|
||||
// 判断当前激活区域-非正文区域时元素透明度降低
|
||||
@@ -2326,6 +2403,14 @@ export class Draw {
|
||||
if (this.elementList.length <= 1 && !this.elementList[0]?.listId) {
|
||||
this.placeholder.render(ctx)
|
||||
}
|
||||
// 渲染行数
|
||||
if (!lineNumber.disabled) {
|
||||
this.lineNumber.render(ctx, pageNo)
|
||||
}
|
||||
// 绘制页面边框
|
||||
if (!pageBorder.disabled) {
|
||||
this.pageBorder.render(ctx)
|
||||
}
|
||||
}
|
||||
|
||||
private _disconnectLazyRender() {
|
||||
|
||||
@@ -207,8 +207,17 @@ export class Control {
|
||||
return prefixCount === postfixCount
|
||||
}
|
||||
|
||||
public getIsDisabledControl(): boolean {
|
||||
return !!this.activeControl?.getElement().control?.disabled
|
||||
public getIsDisabledControl(context: IControlContext = {}): boolean {
|
||||
if (!this.activeControl) return false
|
||||
const { startIndex, endIndex } = context.range || this.range.getRange()
|
||||
if (startIndex === endIndex && ~startIndex && ~endIndex) {
|
||||
const elementList = context.elementList || this.getElementList()
|
||||
const startElement = elementList[startIndex]
|
||||
if (startElement.controlComponent === ControlComponent.POSTFIX) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return !!this.activeControl.getElement()?.control?.disabled
|
||||
}
|
||||
|
||||
public getContainer(): HTMLDivElement {
|
||||
@@ -560,11 +569,10 @@ export class Control {
|
||||
return this.activeControl.cut()
|
||||
}
|
||||
|
||||
public getValueByConceptId(
|
||||
payload: IGetControlValueOption
|
||||
): IGetControlValueResult {
|
||||
const { conceptId } = payload
|
||||
public getValueById(payload: IGetControlValueOption): IGetControlValueResult {
|
||||
const { id, conceptId } = payload
|
||||
const result: IGetControlValueResult = []
|
||||
if (!id && !conceptId) return result
|
||||
const getValue = (elementList: IElement[], zone: EditorZone) => {
|
||||
let i = 0
|
||||
while (i < elementList.length) {
|
||||
@@ -581,8 +589,14 @@ export class Control {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (element?.control?.conceptId !== conceptId) continue
|
||||
const { type, code, valueSets } = element.control!
|
||||
if (
|
||||
!element.control ||
|
||||
(id && element.controlId !== id) ||
|
||||
(conceptId && element.control.conceptId !== conceptId)
|
||||
) {
|
||||
continue
|
||||
}
|
||||
const { type, code, valueSets } = element.control
|
||||
let j = i
|
||||
let textControlValue = ''
|
||||
while (j < elementList.length) {
|
||||
@@ -646,9 +660,10 @@ export class Control {
|
||||
return result
|
||||
}
|
||||
|
||||
public setValueByConceptId(payload: ISetControlValueOption) {
|
||||
public setValueById(payload: ISetControlValueOption) {
|
||||
let isExistSet = false
|
||||
const { conceptId, value } = payload
|
||||
const { id, conceptId, value } = payload
|
||||
if (!id && !conceptId) return
|
||||
// 设置值
|
||||
const setValue = (elementList: IElement[]) => {
|
||||
let i = 0
|
||||
@@ -666,7 +681,13 @@ export class Control {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (element?.control?.conceptId !== conceptId) continue
|
||||
if (
|
||||
!element.control ||
|
||||
(id && element.controlId !== id) ||
|
||||
(conceptId && element.control.conceptId !== conceptId)
|
||||
) {
|
||||
continue
|
||||
}
|
||||
isExistSet = true
|
||||
const { type } = element.control!
|
||||
// 当前控件结束索引
|
||||
@@ -712,7 +733,7 @@ export class Control {
|
||||
} else if (type === ControlType.CHECKBOX) {
|
||||
const checkbox = new CheckboxControl(element, this)
|
||||
this.activeControl = checkbox
|
||||
const codes = value?.split(',') || []
|
||||
const codes = value ? value.split(',') : []
|
||||
checkbox.setSelect(codes, controlContext, controlRule)
|
||||
} else if (type === ControlType.RADIO) {
|
||||
const radio = new RadioControl(element, this)
|
||||
@@ -758,8 +779,9 @@ export class Control {
|
||||
}
|
||||
}
|
||||
|
||||
public setExtensionByConceptId(payload: ISetControlExtensionOption) {
|
||||
const { conceptId, extension } = payload
|
||||
public setExtensionById(payload: ISetControlExtensionOption) {
|
||||
const { id, conceptId, extension } = payload
|
||||
if (!id && !conceptId) return
|
||||
const setExtension = (elementList: IElement[]) => {
|
||||
let i = 0
|
||||
while (i < elementList.length) {
|
||||
@@ -776,7 +798,13 @@ export class Control {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (element?.control?.conceptId !== conceptId) continue
|
||||
if (
|
||||
!element.control ||
|
||||
(id && element.controlId !== id) ||
|
||||
(conceptId && element.control.conceptId !== conceptId)
|
||||
) {
|
||||
continue
|
||||
}
|
||||
element.control.extension = extension
|
||||
// 修改后控件结束索引
|
||||
let newEndIndex = i
|
||||
@@ -798,8 +826,9 @@ export class Control {
|
||||
}
|
||||
}
|
||||
|
||||
public setPropertiesByConceptId(payload: ISetControlProperties) {
|
||||
const { conceptId, properties } = payload
|
||||
public setPropertiesById(payload: ISetControlProperties) {
|
||||
const { id, conceptId, properties } = payload
|
||||
if (!id && !conceptId) return
|
||||
let isExistUpdate = false
|
||||
function setProperties(elementList: IElement[]) {
|
||||
let i = 0
|
||||
@@ -816,7 +845,13 @@ export class Control {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (element?.control?.conceptId !== conceptId) continue
|
||||
if (
|
||||
!element.control ||
|
||||
(id && element.controlId !== id) ||
|
||||
(conceptId && element.control.conceptId !== conceptId)
|
||||
) {
|
||||
continue
|
||||
}
|
||||
isExistUpdate = true
|
||||
element.control = {
|
||||
...element.control,
|
||||
@@ -857,7 +892,8 @@ export class Control {
|
||||
const elementList = zipElementList(pageComponentData[pageComponentKey]!)
|
||||
pageComponentData[pageComponentKey] = elementList
|
||||
formatElementList(elementList, {
|
||||
editorOptions: this.options
|
||||
editorOptions: this.options,
|
||||
isForceCompensation: true
|
||||
})
|
||||
}
|
||||
this.draw.setEditorData(pageComponentData)
|
||||
|
||||
@@ -77,7 +77,10 @@ export class CheckboxControl implements IControlInstance {
|
||||
options: IControlRuleOption = {}
|
||||
) {
|
||||
// 校验是否可以设置
|
||||
if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (
|
||||
!options.isIgnoreDisabledRule &&
|
||||
this.control.getIsDisabledControl(context)
|
||||
) {
|
||||
return
|
||||
}
|
||||
const { control } = this.element
|
||||
|
||||
@@ -99,7 +99,10 @@ export class DateControl implements IControlInstance {
|
||||
options: IControlRuleOption = {}
|
||||
): number {
|
||||
// 校验是否可以设置
|
||||
if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (
|
||||
!options.isIgnoreDisabledRule &&
|
||||
this.control.getIsDisabledControl(context)
|
||||
) {
|
||||
return -1
|
||||
}
|
||||
const elementList = context.elementList || this.control.getElementList()
|
||||
@@ -147,7 +150,7 @@ export class DateControl implements IControlInstance {
|
||||
): number {
|
||||
const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options
|
||||
// 校验是否可以设置
|
||||
if (!isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (!isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
|
||||
return -1
|
||||
}
|
||||
const range = this.getValueRange(context)
|
||||
@@ -171,7 +174,10 @@ export class DateControl implements IControlInstance {
|
||||
options: IControlRuleOption = {}
|
||||
) {
|
||||
// 校验是否可以设置
|
||||
if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (
|
||||
!options.isIgnoreDisabledRule &&
|
||||
this.control.getIsDisabledControl(context)
|
||||
) {
|
||||
return
|
||||
}
|
||||
const elementList = context.elementList || this.control.getElementList()
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { ZERO } from '../../../../dataset/constant/Common'
|
||||
import { ControlComponent } from '../../../../dataset/enum/Control'
|
||||
import { ElementType } from '../../../../dataset/enum/Element'
|
||||
import { DeepRequired } from '../../../../interface/Common'
|
||||
import {
|
||||
@@ -69,10 +71,13 @@ export class ControlSearch {
|
||||
}
|
||||
}
|
||||
}
|
||||
const controlConceptId = element?.control?.conceptId
|
||||
if (!controlConceptId) continue
|
||||
const currentControl = element?.control
|
||||
if (!currentControl) continue
|
||||
const highlightIndex = this.highlightList.findIndex(
|
||||
highlight => highlight.conceptId === controlConceptId
|
||||
highlight =>
|
||||
highlight.id === element.controlId ||
|
||||
(currentControl.conceptId &&
|
||||
currentControl.conceptId === highlight.conceptId)
|
||||
)
|
||||
if (!~highlightIndex) continue
|
||||
// 搜索后控件结束索引
|
||||
@@ -85,7 +90,13 @@ export class ControlSearch {
|
||||
}
|
||||
i = newEndIndex
|
||||
// 高亮信息
|
||||
const controlElementList = elementList.slice(startIndex, newEndIndex)
|
||||
const controlElementList = elementList
|
||||
.slice(startIndex, newEndIndex)
|
||||
.map(element =>
|
||||
element.controlComponent === ControlComponent.VALUE
|
||||
? element
|
||||
: { value: ZERO }
|
||||
)
|
||||
const highlight = this.highlightList[highlightIndex]
|
||||
const { ruleList } = highlight
|
||||
for (let r = 0; r < ruleList.length; r++) {
|
||||
|
||||
@@ -12,7 +12,10 @@ export class RadioControl extends CheckboxControl {
|
||||
options: IControlRuleOption = {}
|
||||
) {
|
||||
// 校验是否可以设置
|
||||
if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (
|
||||
!options.isIgnoreDisabledRule &&
|
||||
this.control.getIsDisabledControl(context)
|
||||
) {
|
||||
return
|
||||
}
|
||||
const { control } = this.element
|
||||
|
||||
@@ -163,7 +163,7 @@ export class SelectControl implements IControlInstance {
|
||||
): number {
|
||||
const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options
|
||||
// 校验是否可以设置
|
||||
if (!isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (!isIgnoreDisabledRule && this.control.getIsDisabledControl(context)) {
|
||||
return -1
|
||||
}
|
||||
const elementList = context.elementList || this.control.getElementList()
|
||||
@@ -215,7 +215,10 @@ export class SelectControl implements IControlInstance {
|
||||
options: IControlRuleOption = {}
|
||||
) {
|
||||
// 校验是否可以设置
|
||||
if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (
|
||||
!options.isIgnoreDisabledRule &&
|
||||
this.control.getIsDisabledControl(context)
|
||||
) {
|
||||
return
|
||||
}
|
||||
const elementList = context.elementList || this.control.getElementList()
|
||||
|
||||
@@ -75,7 +75,10 @@ export class TextControl implements IControlInstance {
|
||||
options: IControlRuleOption = {}
|
||||
): number {
|
||||
// 校验是否可以设置
|
||||
if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (
|
||||
!options.isIgnoreDisabledRule &&
|
||||
this.control.getIsDisabledControl(context)
|
||||
) {
|
||||
return -1
|
||||
}
|
||||
const elementList = context.elementList || this.control.getElementList()
|
||||
@@ -122,7 +125,10 @@ export class TextControl implements IControlInstance {
|
||||
options: IControlRuleOption = {}
|
||||
): number {
|
||||
// 校验是否可以设置
|
||||
if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
|
||||
if (
|
||||
!options.isIgnoreDisabledRule &&
|
||||
this.control.getIsDisabledControl(context)
|
||||
) {
|
||||
return -1
|
||||
}
|
||||
const elementList = context.elementList || this.control.getElementList()
|
||||
|
||||
@@ -99,14 +99,19 @@ export class Background {
|
||||
}
|
||||
|
||||
public render(ctx: CanvasRenderingContext2D, pageNo: number) {
|
||||
const { background } = this.options
|
||||
if (background.image) {
|
||||
const {
|
||||
background: { image, color, applyPageNumbers }
|
||||
} = this.options
|
||||
if (
|
||||
image &&
|
||||
(!applyPageNumbers?.length || applyPageNumbers.includes(pageNo))
|
||||
) {
|
||||
const { width, height } = this.options
|
||||
this._renderBackgroundImage(ctx, width, height)
|
||||
} else {
|
||||
const width = this.draw.getCanvasWidth(pageNo)
|
||||
const height = this.draw.getCanvasHeight(pageNo)
|
||||
this._renderBackgroundColor(ctx, background.color, width, height)
|
||||
this._renderBackgroundColor(ctx, color, width, height)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import { LineNumberType } from '../../../dataset/enum/LineNumber'
|
||||
import { DeepRequired } from '../../../interface/Common'
|
||||
import { IEditorOption } from '../../../interface/Editor'
|
||||
import { Draw } from '../Draw'
|
||||
|
||||
export class LineNumber {
|
||||
private draw: Draw
|
||||
private options: DeepRequired<IEditorOption>
|
||||
|
||||
constructor(draw: Draw) {
|
||||
this.draw = draw
|
||||
this.options = draw.getOptions()
|
||||
}
|
||||
|
||||
public render(ctx: CanvasRenderingContext2D, pageNo: number) {
|
||||
const {
|
||||
scale,
|
||||
lineNumber: { color, size, font, right, type }
|
||||
} = this.options
|
||||
const textParticle = this.draw.getTextParticle()
|
||||
const margins = this.draw.getMargins()
|
||||
const positionList = this.draw.getPosition().getOriginalMainPositionList()
|
||||
const pageRowList = this.draw.getPageRowList()
|
||||
const rowList = pageRowList[pageNo]
|
||||
ctx.save()
|
||||
ctx.fillStyle = color
|
||||
ctx.font = `${size * scale}px ${font}`
|
||||
for (let i = 0; i < rowList.length; i++) {
|
||||
const row = rowList[i]
|
||||
const {
|
||||
coordinate: { leftBottom }
|
||||
} = positionList[row.startIndex]
|
||||
const seq = type === LineNumberType.PAGE ? i + 1 : row.rowIndex + 1
|
||||
const textMetrics = textParticle.measureText(ctx, {
|
||||
value: `${seq}`
|
||||
})
|
||||
const x = margins[3] - (textMetrics.width + right) * scale
|
||||
const y = leftBottom[1] - textMetrics.actualBoundingBoxAscent * scale
|
||||
ctx.fillText(`${seq}`, x, y)
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { DeepRequired } from '../../../interface/Common'
|
||||
import { IEditorOption } from '../../../interface/Editor'
|
||||
import { Draw } from '../Draw'
|
||||
import { Footer } from './Footer'
|
||||
import { Header } from './Header'
|
||||
|
||||
export class PageBorder {
|
||||
private draw: Draw
|
||||
private header: Header
|
||||
private footer: Footer
|
||||
private options: DeepRequired<IEditorOption>
|
||||
|
||||
constructor(draw: Draw) {
|
||||
this.draw = draw
|
||||
this.header = draw.getHeader()
|
||||
this.footer = draw.getFooter()
|
||||
this.options = draw.getOptions()
|
||||
}
|
||||
|
||||
public render(ctx: CanvasRenderingContext2D) {
|
||||
const {
|
||||
scale,
|
||||
pageBorder: { color, lineWidth, padding }
|
||||
} = this.options
|
||||
ctx.save()
|
||||
ctx.translate(0.5, 0.5)
|
||||
ctx.strokeStyle = color
|
||||
ctx.lineWidth = lineWidth * scale
|
||||
const margins = this.draw.getMargins()
|
||||
// x：左边距 - 左距离正文距离
|
||||
const x = margins[3] - padding[3] * scale
|
||||
// y：页眉上边距 + 页眉高度 - 上距离正文距离
|
||||
const y = margins[0] + this.header.getExtraHeight() - padding[0] * scale
|
||||
// width：页面宽度 + 左右距离正文距离
|
||||
const width = this.draw.getInnerWidth() + (padding[1] + padding[3]) * scale
|
||||
// height：页面高度 - 正文起始位置 - 页脚高度 - 下边距 - 下距离正文距离
|
||||
const height =
|
||||
this.draw.getHeight() -
|
||||
y -
|
||||
this.footer.getExtraHeight() -
|
||||
margins[2] +
|
||||
padding[2] * scale
|
||||
ctx.rect(x, y, width, height)
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
@@ -84,7 +84,8 @@ export class Placeholder {
|
||||
}
|
||||
]
|
||||
formatElementList(this.elementList, {
|
||||
editorOptions: this.options
|
||||
editorOptions: this.options,
|
||||
isForceCompensation: true
|
||||
})
|
||||
// 计算
|
||||
this._compute()
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
import { NBSP, ZERO } from '../../../dataset/constant/Common'
|
||||
import { VerticalAlign } from '../../../dataset/enum/VerticalAlign'
|
||||
import { DeepRequired } from '../../../interface/Common'
|
||||
import { IEditorOption } from '../../../interface/Editor'
|
||||
import { IElement } from '../../../interface/Element'
|
||||
import { IRowElement } from '../../../interface/Row'
|
||||
import { IRow, IRowElement } from '../../../interface/Row'
|
||||
import { Draw } from '../Draw'
|
||||
|
||||
interface ICheckboxRenderOption {
|
||||
ctx: CanvasRenderingContext2D
|
||||
x: number
|
||||
y: number
|
||||
row: IRow
|
||||
index: number
|
||||
}
|
||||
|
||||
export class CheckboxParticle {
|
||||
private draw: Draw
|
||||
private options: DeepRequired<IEditorOption>
|
||||
@@ -28,17 +38,41 @@ export class CheckboxParticle {
|
||||
})
|
||||
}
|
||||
|
||||
public render(
|
||||
ctx: CanvasRenderingContext2D,
|
||||
element: IRowElement,
|
||||
x: number,
|
||||
y: number
|
||||
) {
|
||||
public render(payload: ICheckboxRenderOption) {
|
||||
const { ctx, x, index, row } = payload
|
||||
let { y } = payload
|
||||
const {
|
||||
checkbox: { gap, lineWidth, fillStyle, strokeStyle },
|
||||
checkbox: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign },
|
||||
scale
|
||||
} = this.options
|
||||
const { metrics, checkbox } = element
|
||||
const { metrics, checkbox } = row.elementList[index]
|
||||
// 垂直布局设置
|
||||
if (
|
||||
verticalAlign === VerticalAlign.TOP ||
|
||||
verticalAlign === VerticalAlign.MIDDLE
|
||||
) {
|
||||
let nextIndex = index + 1
|
||||
let nextElement: IRowElement | null = null
|
||||
while (nextIndex < row.elementList.length) {
|
||||
nextElement = row.elementList[nextIndex]
|
||||
if (nextElement.value !== ZERO && nextElement.value !== NBSP) break
|
||||
nextIndex++
|
||||
}
|
||||
// 以后一个非空格元素为基准
|
||||
if (nextElement) {
|
||||
const {
|
||||
metrics: { boundingBoxAscent, boundingBoxDescent }
|
||||
} = nextElement
|
||||
const textHeight = boundingBoxAscent + boundingBoxDescent
|
||||
if (textHeight > metrics.height) {
|
||||
if (verticalAlign === VerticalAlign.TOP) {
|
||||
y -= boundingBoxAscent - metrics.height
|
||||
} else if (verticalAlign === VerticalAlign.MIDDLE) {
|
||||
y -= (textHeight - metrics.height) / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// left top 四舍五入避免1像素问题
|
||||
const left = Math.round(x + gap * scale)
|
||||
const top = Math.round(y - metrics.height + lineWidth)
|
||||
|
||||
@@ -199,9 +199,16 @@ export class ListParticle {
|
||||
height: height * scale
|
||||
}
|
||||
}
|
||||
this.draw
|
||||
.getCheckboxParticle()
|
||||
.render(ctx, checkboxRowElement, x - gap * scale, y)
|
||||
this.draw.getCheckboxParticle().render({
|
||||
ctx,
|
||||
x: x - gap * scale,
|
||||
y,
|
||||
index: 0,
|
||||
row: {
|
||||
...row,
|
||||
elementList: [checkboxRowElement, ...row.elementList]
|
||||
}
|
||||
})
|
||||
} else {
|
||||
let text = ''
|
||||
if (startElement.listType === ListType.UL) {
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
import { NBSP, ZERO } from '../../../dataset/constant/Common'
|
||||
import { VerticalAlign } from '../../../dataset/enum/VerticalAlign'
|
||||
import { DeepRequired } from '../../../interface/Common'
|
||||
import { IEditorOption } from '../../../interface/Editor'
|
||||
import { IElement } from '../../../interface/Element'
|
||||
import { IRowElement } from '../../../interface/Row'
|
||||
import { IRow, IRowElement } from '../../../interface/Row'
|
||||
import { Draw } from '../Draw'
|
||||
|
||||
interface IRadioRenderOption {
|
||||
ctx: CanvasRenderingContext2D
|
||||
x: number
|
||||
y: number
|
||||
row: IRow
|
||||
index: number
|
||||
}
|
||||
|
||||
export class RadioParticle {
|
||||
private draw: Draw
|
||||
private options: DeepRequired<IEditorOption>
|
||||
@@ -28,17 +38,41 @@ export class RadioParticle {
|
||||
})
|
||||
}
|
||||
|
||||
public render(
|
||||
ctx: CanvasRenderingContext2D,
|
||||
element: IRowElement,
|
||||
x: number,
|
||||
y: number
|
||||
) {
|
||||
public render(payload: IRadioRenderOption) {
|
||||
const { ctx, x, index, row } = payload
|
||||
let { y } = payload
|
||||
const {
|
||||
radio: { gap, lineWidth, fillStyle, strokeStyle },
|
||||
radio: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign },
|
||||
scale
|
||||
} = this.options
|
||||
const { metrics, radio } = element
|
||||
const { metrics, radio } = row.elementList[index]
|
||||
// 垂直布局设置
|
||||
if (
|
||||
verticalAlign === VerticalAlign.TOP ||
|
||||
verticalAlign === VerticalAlign.MIDDLE
|
||||
) {
|
||||
let nextIndex = index + 1
|
||||
let nextElement: IRowElement | null = null
|
||||
while (nextIndex < row.elementList.length) {
|
||||
nextElement = row.elementList[nextIndex]
|
||||
if (nextElement.value !== ZERO && nextElement.value !== NBSP) break
|
||||
nextIndex++
|
||||
}
|
||||
// 以后一个非空格元素为基准
|
||||
if (nextElement) {
|
||||
const {
|
||||
metrics: { boundingBoxAscent, boundingBoxDescent }
|
||||
} = nextElement
|
||||
const textHeight = boundingBoxAscent + boundingBoxDescent
|
||||
if (textHeight > metrics.height) {
|
||||
if (verticalAlign === VerticalAlign.TOP) {
|
||||
y -= boundingBoxAscent - metrics.height
|
||||
} else if (verticalAlign === VerticalAlign.MIDDLE) {
|
||||
y -= (textHeight - metrics.height) / 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// left top 四舍五入避免1像素问题
|
||||
const left = Math.round(x + gap * scale)
|
||||
const top = Math.round(y - metrics.height + lineWidth)
|
||||
|
||||
@@ -106,6 +106,8 @@ export class CanvasEvent {
|
||||
public applyPainterStyle() {
|
||||
const painterStyle = this.draw.getPainterStyle()
|
||||
if (!painterStyle) return
|
||||
const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
|
||||
if (isDisabled) return
|
||||
const selection = this.range.getSelection()
|
||||
if (!selection) return
|
||||
const painterStyleKeys = Object.keys(painterStyle)
|
||||
|
||||
@@ -195,7 +195,10 @@ function threeClick(host: CanvasEvent) {
|
||||
}
|
||||
if (newStartIndex < 0) return
|
||||
let newEndIndex = index + downCount + 1
|
||||
if (elementList[newEndIndex]?.value === ZERO) {
|
||||
if (
|
||||
elementList[newEndIndex]?.value === ZERO ||
|
||||
newEndIndex > elementList.length - 1
|
||||
) {
|
||||
newEndIndex -= 1
|
||||
}
|
||||
rangeManager.setRange(newStartIndex, newEndIndex)
|
||||
|
||||
@@ -8,7 +8,7 @@ import { CanvasEvent } from '../CanvasEvent'
|
||||
|
||||
export function input(data: string, host: CanvasEvent) {
|
||||
const draw = host.getDraw()
|
||||
if (draw.isReadonly()) return
|
||||
if (draw.isReadonly() || draw.isDisabled()) return
|
||||
const position = draw.getPosition()
|
||||
const cursorPosition = position.getCursorPosition()
|
||||
if (!data || !cursorPosition) return
|
||||
@@ -34,26 +34,28 @@ export function input(data: string, host: CanvasEvent) {
|
||||
const newElement: IElement = {
|
||||
value
|
||||
}
|
||||
const nextElement = elementList[endIndex + 1]
|
||||
if (
|
||||
!copyElement.type ||
|
||||
copyElement.type === TEXT ||
|
||||
(copyElement.type === HYPERLINK && nextElement?.type === HYPERLINK) ||
|
||||
(copyElement.type === DATE && nextElement?.type === DATE) ||
|
||||
(copyElement.type === SUBSCRIPT && nextElement?.type === SUBSCRIPT) ||
|
||||
(copyElement.type === SUPERSCRIPT && nextElement?.type === SUPERSCRIPT)
|
||||
) {
|
||||
EDITOR_ELEMENT_COPY_ATTR.forEach(attr => {
|
||||
// 在分组外无需复制分组信息
|
||||
if (attr === 'groupIds' && !nextElement?.groupIds) return
|
||||
const value = copyElement[attr] as never
|
||||
if (value !== undefined) {
|
||||
newElement[attr] = value
|
||||
}
|
||||
})
|
||||
}
|
||||
if (isComposing) {
|
||||
newElement.underline = true
|
||||
if (!copyElement.title?.disabled && !copyElement.control?.disabled) {
|
||||
const nextElement = elementList[endIndex + 1]
|
||||
if (
|
||||
!copyElement.type ||
|
||||
copyElement.type === TEXT ||
|
||||
(copyElement.type === HYPERLINK && nextElement?.type === HYPERLINK) ||
|
||||
(copyElement.type === DATE && nextElement?.type === DATE) ||
|
||||
(copyElement.type === SUBSCRIPT && nextElement?.type === SUBSCRIPT) ||
|
||||
(copyElement.type === SUPERSCRIPT && nextElement?.type === SUPERSCRIPT)
|
||||
) {
|
||||
EDITOR_ELEMENT_COPY_ATTR.forEach(attr => {
|
||||
// 在分组外无需复制分组信息
|
||||
if (attr === 'groupIds' && !nextElement?.groupIds) return
|
||||
const value = copyElement[attr] as never
|
||||
if (value !== undefined) {
|
||||
newElement[attr] = value
|
||||
}
|
||||
})
|
||||
}
|
||||
if (isComposing) {
|
||||
newElement.underline = true
|
||||
}
|
||||
}
|
||||
return newElement
|
||||
})
|
||||
|
||||
@@ -7,9 +7,30 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
|
||||
// 可输入性验证
|
||||
const rangeManager = draw.getRange()
|
||||
if (!rangeManager.getIsCanInput()) return
|
||||
const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange()
|
||||
const control = draw.getControl()
|
||||
let curIndex: number | null
|
||||
if (control.getActiveControl() && control.getIsRangeCanCaptureEvent()) {
|
||||
if (isCrossRowCol) {
|
||||
// 表格跨行列选中时清空单元格内容
|
||||
const rowCol = draw.getTableParticle().getRangeRowCol()
|
||||
if (!rowCol) return
|
||||
let isDeleted = false
|
||||
for (let r = 0; r < rowCol.length; r++) {
|
||||
const row = rowCol[r]
|
||||
for (let c = 0; c < row.length; c++) {
|
||||
const col = row[c]
|
||||
if (col.value.length > 1) {
|
||||
draw.spliceElementList(col.value, 1, col.value.length - 1)
|
||||
isDeleted = true
|
||||
}
|
||||
}
|
||||
}
|
||||
// 删除成功后定位
|
||||
curIndex = isDeleted ? 0 : null
|
||||
} else if (
|
||||
control.getActiveControl() &&
|
||||
control.getIsRangeCanCaptureEvent()
|
||||
) {
|
||||
// 光标在控件内
|
||||
curIndex = control.keydown(evt)
|
||||
} else {
|
||||
@@ -18,7 +39,6 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
|
||||
const cursorPosition = position.getCursorPosition()
|
||||
if (!cursorPosition) return
|
||||
const { index } = cursorPosition
|
||||
const { startIndex, endIndex } = rangeManager.getRange()
|
||||
const isCollapsed = rangeManager.getIsCollapsed()
|
||||
const elementList = draw.getElementList()
|
||||
// 判断是否允许删除
|
||||
@@ -33,16 +53,16 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
|
||||
return
|
||||
}
|
||||
}
|
||||
// 清空当前行对齐方式
|
||||
// 替换当前行对齐方式
|
||||
const startElement = elementList[startIndex]
|
||||
if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
|
||||
const rowList = draw.getRowList()
|
||||
const positionList = position.getPositionList()
|
||||
const rowNo = positionList[startIndex].rowNo
|
||||
const rowFlexElementList = rowList[rowNo].elementList
|
||||
rowFlexElementList.forEach(element => {
|
||||
delete element.rowFlex
|
||||
})
|
||||
const rowFlexElementList = rangeManager.getRangeRowElementList()
|
||||
if (rowFlexElementList) {
|
||||
const preElement = elementList[startIndex - 1]
|
||||
rowFlexElementList.forEach(element => {
|
||||
element.rowFlex = preElement?.rowFlex
|
||||
})
|
||||
}
|
||||
}
|
||||
if (!isCollapsed) {
|
||||
draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex)
|
||||
@@ -51,8 +71,17 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
|
||||
}
|
||||
curIndex = isCollapsed ? index - 1 : startIndex
|
||||
}
|
||||
if (curIndex === null) return
|
||||
draw.getGlobalEvent().setCanvasEventAbility()
|
||||
rangeManager.setRange(curIndex, curIndex)
|
||||
draw.render({ curIndex })
|
||||
if (curIndex === null) {
|
||||
rangeManager.setRange(startIndex, startIndex)
|
||||
draw.render({
|
||||
curIndex: startIndex,
|
||||
isSubmitHistory: false
|
||||
})
|
||||
} else {
|
||||
rangeManager.setRange(curIndex, curIndex)
|
||||
draw.render({
|
||||
curIndex
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,11 +6,28 @@ export function del(evt: KeyboardEvent, host: CanvasEvent) {
|
||||
// 可输入性验证
|
||||
const rangeManager = draw.getRange()
|
||||
if (!rangeManager.getIsCanInput()) return
|
||||
const { startIndex, endIndex } = rangeManager.getRange()
|
||||
const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange()
|
||||
const elementList = draw.getElementList()
|
||||
const control = draw.getControl()
|
||||
let curIndex: number | null
|
||||
if (control.getActiveControl() && control.getIsRangeWithinControl()) {
|
||||
if (isCrossRowCol) {
|
||||
// 表格跨行列选中时清空单元格内容
|
||||
const rowCol = draw.getTableParticle().getRangeRowCol()
|
||||
if (!rowCol) return
|
||||
let isDeleted = false
|
||||
for (let r = 0; r < rowCol.length; r++) {
|
||||
const row = rowCol[r]
|
||||
for (let c = 0; c < row.length; c++) {
|
||||
const col = row[c]
|
||||
if (col.value.length > 1) {
|
||||
draw.spliceElementList(col.value, 1, col.value.length - 1)
|
||||
isDeleted = true
|
||||
}
|
||||
}
|
||||
}
|
||||
// 删除成功后定位
|
||||
curIndex = isDeleted ? 0 : null
|
||||
} else if (control.getActiveControl() && control.getIsRangeWithinControl()) {
|
||||
// 光标在控件内
|
||||
curIndex = control.keydown(evt)
|
||||
} else if (elementList[endIndex + 1]?.controlId) {
|
||||
@@ -42,8 +59,17 @@ export function del(evt: KeyboardEvent, host: CanvasEvent) {
|
||||
curIndex = isCollapsed ? index : startIndex
|
||||
}
|
||||
}
|
||||
if (curIndex === null) return
|
||||
draw.getGlobalEvent().setCanvasEventAbility()
|
||||
rangeManager.setRange(curIndex, curIndex)
|
||||
draw.render({ curIndex })
|
||||
if (curIndex === null) {
|
||||
rangeManager.setRange(startIndex, startIndex)
|
||||
draw.render({
|
||||
curIndex: startIndex,
|
||||
isSubmitHistory: false
|
||||
})
|
||||
} else {
|
||||
rangeManager.setRange(curIndex, curIndex)
|
||||
draw.render({
|
||||
curIndex
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,12 +2,16 @@ import { ImageDisplay } from '../../../dataset/enum/Common'
|
||||
import { EditorMode } from '../../../dataset/enum/Editor'
|
||||
import { ElementType } from '../../../dataset/enum/Element'
|
||||
import { MouseEventButton } from '../../../dataset/enum/Event'
|
||||
import { ControlComponent } from '../../../dataset/enum/Control'
|
||||
import { ControlType } from '../../../dataset/enum/Control'
|
||||
import { IPreviewerDrawOption } from '../../../interface/Previewer'
|
||||
import { deepClone } from '../../../utils'
|
||||
import { isMod } from '../../../utils/hotkey'
|
||||
import { CheckboxControl } from '../../draw/control/checkbox/CheckboxControl'
|
||||
import { RadioControl } from '../../draw/control/radio/RadioControl'
|
||||
import { CanvasEvent } from '../CanvasEvent'
|
||||
import { IElement } from '../../../interface/Element'
|
||||
import { Draw } from '../../draw/Draw'
|
||||
|
||||
export function setRangeCache(host: CanvasEvent) {
|
||||
const draw = host.getDraw()
|
||||
@@ -21,6 +25,42 @@ export function setRangeCache(host: CanvasEvent) {
|
||||
host.cachePositionContext = position.getPositionContext()
|
||||
}
|
||||
|
||||
export function hitCheckbox(element: IElement, draw: Draw) {
|
||||
const { checkbox, control } = element
|
||||
// 复选框不在控件内独立控制
|
||||
if (!control) {
|
||||
draw.getCheckboxParticle().setSelect(element)
|
||||
} else {
|
||||
const codes = control?.code ? control.code.split(',') : []
|
||||
if (checkbox?.value) {
|
||||
const codeIndex = codes.findIndex(c => c === checkbox.code)
|
||||
codes.splice(codeIndex, 1)
|
||||
} else {
|
||||
if (checkbox?.code) {
|
||||
codes.push(checkbox.code)
|
||||
}
|
||||
}
|
||||
const activeControl = draw.getControl().getActiveControl()
|
||||
if (activeControl instanceof CheckboxControl) {
|
||||
activeControl.setSelect(codes)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function hitRadio(element: IElement, draw: Draw) {
|
||||
const { radio, control } = element
|
||||
// 单选框不在控件内独立控制
|
||||
if (!control) {
|
||||
draw.getRadioParticle().setSelect(element)
|
||||
} else {
|
||||
const codes = radio?.code ? [radio.code] : []
|
||||
const activeControl = draw.getControl().getActiveControl()
|
||||
if (activeControl instanceof RadioControl) {
|
||||
activeControl.setSelect(codes)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function mousedown(evt: MouseEvent, host: CanvasEvent) {
|
||||
if (evt.button === MouseEventButton.RIGHT) return
|
||||
const draw = host.getDraw()
|
||||
@@ -48,6 +88,8 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
|
||||
draw.setPageNo(Number(pageIndex))
|
||||
}
|
||||
host.isAllowSelection = true
|
||||
// 缓存旧上下文信息
|
||||
const oldPositionContext = deepClone(position.getPositionContext())
|
||||
const positionResult = position.adjustPositionContext({
|
||||
x: evt.offsetX,
|
||||
y: evt.offsetY
|
||||
@@ -79,43 +121,46 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
|
||||
const isDirectHitCheckbox = !!(isDirectHit && isCheckbox)
|
||||
const isDirectHitRadio = !!(isDirectHit && isRadio)
|
||||
if (~index) {
|
||||
rangeManager.setRange(curIndex, curIndex)
|
||||
position.setCursorPosition(positionList[curIndex])
|
||||
// 复选框
|
||||
const isSetCheckbox = isDirectHitCheckbox && !isReadonly
|
||||
// 单选框
|
||||
const isSetRadio = isDirectHitRadio && !isReadonly
|
||||
if (isSetCheckbox) {
|
||||
const { checkbox, control } = curElement
|
||||
// 复选框不在控件内独立控制
|
||||
if (!control) {
|
||||
draw.getCheckboxParticle().setSelect(curElement)
|
||||
} else {
|
||||
const codes = control?.code?.split(',') || []
|
||||
if (checkbox?.value) {
|
||||
const codeIndex = codes.findIndex(c => c === checkbox.code)
|
||||
codes.splice(codeIndex, 1)
|
||||
} else {
|
||||
if (checkbox?.code) {
|
||||
codes.push(checkbox.code)
|
||||
let startIndex = curIndex
|
||||
let endIndex = curIndex
|
||||
// shift激活时进行选区处理
|
||||
if (evt.shiftKey) {
|
||||
const { startIndex: oldStartIndex } = rangeManager.getRange()
|
||||
if (~oldStartIndex) {
|
||||
const newPositionContext = position.getPositionContext()
|
||||
if (newPositionContext.tdId === oldPositionContext.tdId) {
|
||||
if (curIndex > oldStartIndex) {
|
||||
startIndex = oldStartIndex
|
||||
} else {
|
||||
endIndex = oldStartIndex
|
||||
}
|
||||
}
|
||||
const activeControl = draw.getControl().getActiveControl()
|
||||
if (activeControl instanceof CheckboxControl) {
|
||||
activeControl.setSelect(codes)
|
||||
}
|
||||
}
|
||||
} else if (isSetRadio) {
|
||||
const { control, radio } = curElement
|
||||
// 单选框不在控件内独立控制
|
||||
if (!control) {
|
||||
draw.getRadioParticle().setSelect(curElement)
|
||||
} else {
|
||||
const codes = radio?.code ? [radio.code] : []
|
||||
const activeControl = draw.getControl().getActiveControl()
|
||||
if (activeControl instanceof RadioControl) {
|
||||
activeControl.setSelect(codes)
|
||||
}
|
||||
rangeManager.setRange(startIndex, endIndex)
|
||||
position.setCursorPosition(positionList[curIndex])
|
||||
// 复选框
|
||||
if (isDirectHitCheckbox && !isReadonly) {
|
||||
hitCheckbox(curElement, draw)
|
||||
} else if (isDirectHitRadio && !isReadonly) {
|
||||
hitRadio(curElement, draw)
|
||||
} else if (
|
||||
curElement.controlComponent === ControlComponent.VALUE &&
|
||||
(curElement.control?.type === ControlType.CHECKBOX ||
|
||||
curElement.control?.type === ControlType.RADIO)
|
||||
) {
|
||||
// 向左查找
|
||||
let preIndex = curIndex
|
||||
while (preIndex > 0) {
|
||||
const preElement = elementList[preIndex]
|
||||
if (preElement.controlComponent === ControlComponent.CHECKBOX) {
|
||||
hitCheckbox(preElement, draw)
|
||||
break
|
||||
} else if (preElement.controlComponent === ControlComponent.RADIO) {
|
||||
hitRadio(preElement, draw)
|
||||
break
|
||||
}
|
||||
preIndex--
|
||||
}
|
||||
} else {
|
||||
draw.render({
|
||||
|
||||
@@ -48,7 +48,10 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
|
||||
// 判断是否允许拖放
|
||||
if (host.isAllowDrop) {
|
||||
const draw = host.getDraw()
|
||||
if (draw.isReadonly()) return
|
||||
if (draw.isReadonly() || draw.isDisabled()) {
|
||||
host.mousedown(evt)
|
||||
return
|
||||
}
|
||||
const position = draw.getPosition()
|
||||
const positionList = position.getPositionList()
|
||||
const positionContext = position.getPositionContext()
|
||||
|
||||
@@ -17,8 +17,7 @@ import { IOverrideResult } from '../../override/Override'
|
||||
|
||||
export function pasteElement(host: CanvasEvent, elementList: IElement[]) {
|
||||
const draw = host.getDraw()
|
||||
const isReadonly = draw.isReadonly()
|
||||
if (isReadonly) return
|
||||
if (draw.isReadonly() || draw.isDisabled()) return
|
||||
const rangeManager = draw.getRange()
|
||||
const { startIndex } = rangeManager.getRange()
|
||||
const originalElementList = draw.getElementList()
|
||||
@@ -59,8 +58,7 @@ export function pasteElement(host: CanvasEvent, elementList: IElement[]) {
|
||||
|
||||
export function pasteHTML(host: CanvasEvent, htmlText: string) {
|
||||
const draw = host.getDraw()
|
||||
const isReadonly = draw.isReadonly()
|
||||
if (isReadonly) return
|
||||
if (draw.isReadonly() || draw.isDisabled()) return
|
||||
const elementList = getElementListByHTML(htmlText, {
|
||||
innerWidth: draw.getOriginalInnerWidth()
|
||||
})
|
||||
@@ -69,8 +67,7 @@ export function pasteHTML(host: CanvasEvent, htmlText: string) {
|
||||
|
||||
export function pasteImage(host: CanvasEvent, file: File | Blob) {
|
||||
const draw = host.getDraw()
|
||||
const isReadonly = draw.isReadonly()
|
||||
if (isReadonly) return
|
||||
if (draw.isReadonly() || draw.isDisabled()) return
|
||||
const rangeManager = draw.getRange()
|
||||
const { startIndex } = rangeManager.getRange()
|
||||
const elementList = draw.getElementList()
|
||||
@@ -99,8 +96,7 @@ export function pasteImage(host: CanvasEvent, file: File | Blob) {
|
||||
|
||||
export function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
|
||||
const draw = host.getDraw()
|
||||
const isReadonly = draw.isReadonly()
|
||||
if (isReadonly) return
|
||||
if (draw.isReadonly() || draw.isDisabled()) return
|
||||
const clipboardData = evt.clipboardData
|
||||
if (!clipboardData) return
|
||||
// 自定义粘贴事件
|
||||
@@ -157,8 +153,7 @@ export function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
|
||||
|
||||
export async function pasteByApi(host: CanvasEvent, options?: IPasteOption) {
|
||||
const draw = host.getDraw()
|
||||
const isReadonly = draw.isReadonly()
|
||||
if (isReadonly) return
|
||||
if (draw.isReadonly() || draw.isDisabled()) return
|
||||
// 自定义粘贴事件
|
||||
const { paste } = draw.getOverride()
|
||||
if (paste) {
|
||||
|
||||
@@ -13,34 +13,65 @@ export class SelectionObserver {
|
||||
right: number
|
||||
] = [70, 40, 10, 20]
|
||||
|
||||
private selectionContainer: Element | Document
|
||||
private rangeManager: RangeManager
|
||||
private requestAnimationFrameId: number | null
|
||||
private isMousedown: boolean
|
||||
private isMoving: boolean
|
||||
private clientWidth: number
|
||||
private clientHeight: number
|
||||
private containerRect: DOMRect | null
|
||||
|
||||
constructor(draw: Draw) {
|
||||
this.rangeManager = draw.getRange()
|
||||
// 优先使用配置的滚动容器dom
|
||||
const { scrollContainerSelector } = draw.getOptions()
|
||||
this.selectionContainer = scrollContainerSelector
|
||||
? document.querySelector(scrollContainerSelector) || document
|
||||
: document
|
||||
this.requestAnimationFrameId = null
|
||||
this.isMousedown = false
|
||||
this.isMoving = false
|
||||
this.rangeManager = draw.getRange()
|
||||
|
||||
// 缓存尺寸
|
||||
this.clientWidth = 0
|
||||
this.clientHeight = 0
|
||||
this.containerRect = null
|
||||
// 添加监听
|
||||
this._addEvent()
|
||||
}
|
||||
|
||||
private _addEvent() {
|
||||
document.addEventListener('mousedown', this._mousedown)
|
||||
document.addEventListener('mousemove', this._mousemove)
|
||||
document.addEventListener('mouseup', this._mouseup)
|
||||
const container = <Document>this.selectionContainer
|
||||
container.addEventListener('mousedown', this._mousedown)
|
||||
container.addEventListener('mousemove', this._mousemove)
|
||||
container.addEventListener('mouseup', this._mouseup)
|
||||
document.addEventListener('mouseleave', this._mouseup)
|
||||
}
|
||||
|
||||
public removeEvent() {
|
||||
document.removeEventListener('mousedown', this._mousedown)
|
||||
document.removeEventListener('mousemove', this._mousemove)
|
||||
document.removeEventListener('mouseup', this._mouseup)
|
||||
const container = <Document>this.selectionContainer
|
||||
container.removeEventListener('mousedown', this._mousedown)
|
||||
container.removeEventListener('mousemove', this._mousemove)
|
||||
container.removeEventListener('mouseup', this._mouseup)
|
||||
document.removeEventListener('mouseleave', this._mouseup)
|
||||
}
|
||||
|
||||
private _mousedown = () => {
|
||||
this.isMousedown = true
|
||||
// 更新容器宽高
|
||||
this.clientWidth =
|
||||
this.selectionContainer instanceof Document
|
||||
? document.documentElement.clientWidth
|
||||
: this.selectionContainer.clientWidth
|
||||
this.clientHeight =
|
||||
this.selectionContainer instanceof Document
|
||||
? document.documentElement.clientHeight
|
||||
: this.selectionContainer.clientHeight
|
||||
// 更新容器位置信息
|
||||
if (!(this.selectionContainer instanceof Document)) {
|
||||
const rect = this.selectionContainer.getBoundingClientRect()
|
||||
this.containerRect = rect
|
||||
}
|
||||
}
|
||||
|
||||
private _mouseup = () => {
|
||||
@@ -50,16 +81,18 @@ export class SelectionObserver {
|
||||
|
||||
private _mousemove = (evt: MouseEvent) => {
|
||||
if (!this.isMousedown || this.rangeManager.getIsCollapsed()) return
|
||||
const { x, y } = evt
|
||||
const clientWidth = document.documentElement.clientWidth
|
||||
const clientHeight = document.documentElement.clientHeight
|
||||
let { x, y } = evt
|
||||
if (this.containerRect) {
|
||||
x = x - this.containerRect.x
|
||||
y = y - this.containerRect.y
|
||||
}
|
||||
if (y < this.thresholdPoints[0]) {
|
||||
this._startMove(MoveDirection.UP)
|
||||
} else if (clientHeight - y <= this.thresholdPoints[1]) {
|
||||
} else if (this.clientHeight - y <= this.thresholdPoints[1]) {
|
||||
this._startMove(MoveDirection.DOWN)
|
||||
} else if (x < this.thresholdPoints[2]) {
|
||||
this._startMove(MoveDirection.LEFT)
|
||||
} else if (clientWidth - x < this.thresholdPoints[3]) {
|
||||
} else if (this.clientWidth - x < this.thresholdPoints[3]) {
|
||||
this._startMove(MoveDirection.RIGHT)
|
||||
} else {
|
||||
this._stopMove()
|
||||
@@ -67,16 +100,27 @@ export class SelectionObserver {
|
||||
}
|
||||
|
||||
private _move(direction: MoveDirection) {
|
||||
const x = window.scrollX
|
||||
const y = window.scrollY
|
||||
// Document使用window
|
||||
const container =
|
||||
this.selectionContainer instanceof Document
|
||||
? window
|
||||
: this.selectionContainer
|
||||
const x =
|
||||
this.selectionContainer instanceof Document
|
||||
? window.scrollX
|
||||
: (<Element>container).scrollLeft
|
||||
const y =
|
||||
this.selectionContainer instanceof Document
|
||||
? window.scrollY
|
||||
: (<Element>container).scrollTop
|
||||
if (direction === MoveDirection.DOWN) {
|
||||
window.scrollTo(x, y + this.step)
|
||||
container.scrollTo(x, y + this.step)
|
||||
} else if (direction === MoveDirection.UP) {
|
||||
window.scrollTo(x, y - this.step)
|
||||
container.scrollTo(x, y - this.step)
|
||||
} else if (direction === MoveDirection.LEFT) {
|
||||
window.scrollTo(x - this.step, y)
|
||||
container.scrollTo(x - this.step, y)
|
||||
} else {
|
||||
window.scrollTo(x + this.step, y)
|
||||
container.scrollTo(x + this.step, y)
|
||||
}
|
||||
this.requestAnimationFrameId = window.requestAnimationFrame(
|
||||
this._move.bind(this, direction)
|
||||
|
||||
@@ -643,6 +643,7 @@ export class Position {
|
||||
payload: IGetFloatPositionByXYPayload
|
||||
): ICurrentPosition | void {
|
||||
const { x, y } = payload
|
||||
const currentPageNo = payload.pageNo ?? this.draw.getPageNo()
|
||||
const currentZone = this.draw.getZone().getZone()
|
||||
for (let f = 0; f < this.floatPositionList.length; f++) {
|
||||
const {
|
||||
@@ -653,9 +654,11 @@ export class Position {
|
||||
trIndex,
|
||||
tdIndex,
|
||||
tdValueIndex,
|
||||
zone: floatElementZone
|
||||
zone: floatElementZone,
|
||||
pageNo
|
||||
} = this.floatPositionList[f]
|
||||
if (
|
||||
currentPageNo === pageNo &&
|
||||
element.type === ElementType.IMAGE &&
|
||||
element.imgDisplay === payload.imgDisplay &&
|
||||
(!floatElementZone || floatElementZone === currentZone)
|
||||
|
||||
@@ -171,8 +171,9 @@ export class RangeManager {
|
||||
}
|
||||
start--
|
||||
}
|
||||
const isCollapsed = startIndex === endIndex
|
||||
// 中间选择
|
||||
if (startIndex !== endIndex) {
|
||||
if (!isCollapsed) {
|
||||
let middle = startIndex + 1
|
||||
while (middle < endIndex) {
|
||||
const { pageNo, rowNo } = positionList[middle]
|
||||
@@ -189,6 +190,10 @@ export class RangeManager {
|
||||
}
|
||||
// 向下查找
|
||||
let end = endIndex
|
||||
// 闭合选区&&首字符为换行符时继续向下查找
|
||||
if (isCollapsed && elementList[startIndex].value === ZERO) {
|
||||
end += 1
|
||||
}
|
||||
while (end < positionList.length) {
|
||||
const element = elementList[end]
|
||||
const nextElement = elementList[end + 1]
|
||||
@@ -425,7 +430,7 @@ export class RangeManager {
|
||||
const color = curElement.color || null
|
||||
const highlight = curElement.highlight || null
|
||||
const rowFlex = curElement.rowFlex || null
|
||||
const rowMargin = curElement.rowMargin || this.options.defaultRowMargin
|
||||
const rowMargin = curElement.rowMargin ?? this.options.defaultRowMargin
|
||||
const dashArray = curElement.dashArray || []
|
||||
const level = curElement.level || null
|
||||
const listType = curElement.listType || null
|
||||
|
||||
@@ -5,5 +5,6 @@ export const defaultBackground: Readonly<Required<IBackgroundOption>> = {
|
||||
color: '#FFFFFF',
|
||||
image: '',
|
||||
size: BackgroundSize.COVER,
|
||||
repeat: BackgroundRepeat.NO_REPEAT
|
||||
repeat: BackgroundRepeat.NO_REPEAT,
|
||||
applyPageNumbers: []
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ICheckboxOption } from '../../interface/Checkbox'
|
||||
import { VerticalAlign } from '../enum/VerticalAlign'
|
||||
|
||||
export const defaultCheckboxOption: Readonly<Required<ICheckboxOption>> = {
|
||||
width: 14,
|
||||
@@ -6,5 +7,6 @@ export const defaultCheckboxOption: Readonly<Required<ICheckboxOption>> = {
|
||||
gap: 5,
|
||||
lineWidth: 1,
|
||||
fillStyle: '#5175f4',
|
||||
strokeStyle: '#ffffff'
|
||||
strokeStyle: '#ffffff',
|
||||
verticalAlign: VerticalAlign.BOTTOM
|
||||
}
|
||||
|
||||
@@ -120,8 +120,7 @@ export const CONTROL_STYLE_ATTR: Array<keyof IControlStyle> = [
|
||||
export const EDITOR_ELEMENT_CONTEXT_ATTR: Array<keyof IElement> = [
|
||||
...TABLE_CONTEXT_ATTR,
|
||||
...TITLE_CONTEXT_ATTR,
|
||||
...LIST_CONTEXT_ATTR,
|
||||
...EDITOR_ROW_ATTR
|
||||
...LIST_CONTEXT_ATTR
|
||||
]
|
||||
|
||||
export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import { ILineNumberOption } from '../../interface/LineNumber'
|
||||
import { LineNumberType } from '../enum/LineNumber'
|
||||
|
||||
export const defaultLineNumberOption: Readonly<Required<ILineNumberOption>> = {
|
||||
size: 12,
|
||||
font: 'Microsoft YaHei',
|
||||
color: '#000000',
|
||||
disabled: true,
|
||||
right: 20,
|
||||
type: LineNumberType.CONTINUITY
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { IPageBorderOption } from '../../interface/PageBorder'
|
||||
|
||||
export const defaultPageBorderOption: Readonly<Required<IPageBorderOption>> = {
|
||||
color: '#000000',
|
||||
lineWidth: 1,
|
||||
padding: [0, 5, 0, 5],
|
||||
disabled: true
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { IRadioOption } from '../../interface/Radio'
|
||||
import { VerticalAlign } from '../enum/VerticalAlign'
|
||||
|
||||
export const defaultRadioOption: Readonly<Required<IRadioOption>> = {
|
||||
width: 14,
|
||||
@@ -6,5 +7,6 @@ export const defaultRadioOption: Readonly<Required<IRadioOption>> = {
|
||||
gap: 5,
|
||||
lineWidth: 1,
|
||||
fillStyle: '#5175f4',
|
||||
strokeStyle: '#000000'
|
||||
strokeStyle: '#000000',
|
||||
verticalAlign: VerticalAlign.BOTTOM
|
||||
}
|
||||
|
||||
@@ -15,3 +15,8 @@ export enum ImageDisplay {
|
||||
FLOAT_TOP = 'float-top',
|
||||
FLOAT_BOTTOM = 'float-bottom'
|
||||
}
|
||||
|
||||
export enum LocationPosition {
|
||||
BEFORE = 'before',
|
||||
AFTER = 'after'
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export enum LineNumberType {
|
||||
PAGE = 'page',
|
||||
CONTINUITY = 'continuity'
|
||||
}
|
||||
+7
-3
@@ -6,7 +6,7 @@ import { Command } from './core/command/Command'
|
||||
import { CommandAdapt } from './core/command/CommandAdapt'
|
||||
import { Listener } from './core/listener/Listener'
|
||||
import { RowFlex } from './dataset/enum/Row'
|
||||
import { ImageDisplay } from './dataset/enum/Common'
|
||||
import { ImageDisplay, LocationPosition } from './dataset/enum/Common'
|
||||
import { ElementType } from './dataset/enum/Element'
|
||||
import { formatElementList } from './utils/element'
|
||||
import { Register } from './core/register/Register'
|
||||
@@ -52,6 +52,7 @@ import { deepClone, splitText } from './utils'
|
||||
import { BackgroundRepeat, BackgroundSize } from './dataset/enum/Background'
|
||||
import { TextDecorationStyle } from './dataset/enum/Text'
|
||||
import { mergeOption } from './utils/option'
|
||||
import { LineNumberType } from './dataset/enum/LineNumber'
|
||||
|
||||
export default class Editor {
|
||||
public command: Command
|
||||
@@ -88,7 +89,8 @@ export default class Editor {
|
||||
]
|
||||
pageComponentData.forEach(elementList => {
|
||||
formatElementList(elementList, {
|
||||
editorOptions
|
||||
editorOptions,
|
||||
isForceCompensation: true
|
||||
})
|
||||
})
|
||||
// 监听
|
||||
@@ -169,7 +171,9 @@ export {
|
||||
ControlIndentation,
|
||||
BackgroundRepeat,
|
||||
BackgroundSize,
|
||||
TextDecorationStyle
|
||||
TextDecorationStyle,
|
||||
LineNumberType,
|
||||
LocationPosition
|
||||
}
|
||||
|
||||
// 对外类型
|
||||
|
||||
@@ -5,4 +5,5 @@ export interface IBackgroundOption {
|
||||
image?: string
|
||||
size?: BackgroundSize
|
||||
repeat?: BackgroundRepeat
|
||||
applyPageNumbers?: number[]
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { VerticalAlign } from '../dataset/enum/VerticalAlign'
|
||||
|
||||
export interface ICheckbox {
|
||||
value: boolean | null
|
||||
code?: string
|
||||
@@ -11,4 +13,5 @@ export interface ICheckboxOption {
|
||||
lineWidth?: number
|
||||
fillStyle?: string
|
||||
strokeStyle?: string
|
||||
verticalAlign?: VerticalAlign
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { LocationPosition } from '../dataset/enum/Common'
|
||||
import { ControlType, ControlIndentation } from '../dataset/enum/Control'
|
||||
import { EditorZone } from '../dataset/enum/Editor'
|
||||
import { MoveDirection } from '../dataset/enum/Observer'
|
||||
@@ -40,7 +41,8 @@ export interface IControlHighlightRule {
|
||||
|
||||
export interface IControlHighlight {
|
||||
ruleList: IControlHighlightRule[]
|
||||
conceptId: string
|
||||
id?: string
|
||||
conceptId?: string
|
||||
}
|
||||
|
||||
export interface IControlRule {
|
||||
@@ -124,7 +126,8 @@ export interface IControlRuleOption {
|
||||
}
|
||||
|
||||
export interface IGetControlValueOption {
|
||||
conceptId: string
|
||||
id?: string
|
||||
conceptId?: string
|
||||
}
|
||||
|
||||
export type IGetControlValueResult = (Omit<IControl, 'value'> & {
|
||||
@@ -134,19 +137,22 @@ export type IGetControlValueResult = (Omit<IControl, 'value'> & {
|
||||
})[]
|
||||
|
||||
export interface ISetControlValueOption {
|
||||
conceptId: string
|
||||
id?: string
|
||||
conceptId?: string
|
||||
value: string
|
||||
}
|
||||
|
||||
export interface ISetControlExtensionOption {
|
||||
conceptId: string
|
||||
id?: string
|
||||
conceptId?: string
|
||||
extension: unknown
|
||||
}
|
||||
|
||||
export type ISetControlHighlightOption = IControlHighlight[]
|
||||
|
||||
export type ISetControlProperties = {
|
||||
conceptId: string
|
||||
id?: string
|
||||
conceptId?: string
|
||||
properties: Partial<Omit<IControl, 'value'>>
|
||||
}
|
||||
|
||||
@@ -163,3 +169,7 @@ export interface INextControlContext {
|
||||
export interface IInitNextControlOption {
|
||||
direction?: MoveDirection
|
||||
}
|
||||
|
||||
export interface ILocationControlOption {
|
||||
position: LocationPosition
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { IElement } from '..'
|
||||
import { IElement, LocationPosition } from '..'
|
||||
import {
|
||||
EditorMode,
|
||||
PageMode,
|
||||
@@ -24,6 +24,8 @@ import { IWatermark } from './Watermark'
|
||||
import { IZoneOption } from './Zone'
|
||||
import { ISeparatorOption } from './Separator'
|
||||
import { ITableOption } from './table/Table'
|
||||
import { ILineNumberOption } from './LineNumber'
|
||||
import { IPageBorderOption } from './PageBorder'
|
||||
|
||||
export interface IEditorData {
|
||||
header?: IElement[]
|
||||
@@ -89,6 +91,8 @@ export interface IEditorOption {
|
||||
background?: IBackgroundOption
|
||||
lineBreak?: ILineBreakOption
|
||||
separator?: ISeparatorOption
|
||||
lineNumber?: ILineNumberOption
|
||||
pageBorder?: IPageBorderOption
|
||||
}
|
||||
|
||||
export interface IEditorResult {
|
||||
@@ -117,3 +121,11 @@ export type IUpdateOption = Omit<
|
||||
| 'historyMaxRecordCount'
|
||||
| 'scrollContainerSelector'
|
||||
>
|
||||
|
||||
export interface ISetValueOption {
|
||||
isSetCursor?: boolean
|
||||
}
|
||||
|
||||
export interface IFocusOption {
|
||||
position?: LocationPosition
|
||||
}
|
||||
|
||||
@@ -177,5 +177,5 @@ export interface IElementFillRect {
|
||||
|
||||
export interface IUpdateElementByIdOption {
|
||||
id: string
|
||||
properties: Omit<IElement, 'id'>
|
||||
properties: Omit<Partial<IElement>, 'id'>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import { LineNumberType } from '../dataset/enum/LineNumber'
|
||||
|
||||
export interface ILineNumberOption {
|
||||
size?: number
|
||||
font?: string
|
||||
color?: string
|
||||
disabled?: boolean
|
||||
right?: number
|
||||
type?: LineNumberType
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { IPadding } from './Common'
|
||||
|
||||
export interface IPageBorderOption {
|
||||
color?: string
|
||||
lineWidth?: number
|
||||
padding?: IPadding
|
||||
disabled?: boolean
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import { VerticalAlign } from '../dataset/enum/VerticalAlign'
|
||||
|
||||
export interface IRadio {
|
||||
value: boolean | null
|
||||
code?: string
|
||||
@@ -11,4 +13,5 @@ export interface IRadioOption {
|
||||
lineWidth?: number
|
||||
fillStyle?: string
|
||||
strokeStyle?: string
|
||||
verticalAlign?: VerticalAlign
|
||||
}
|
||||
|
||||
@@ -19,4 +19,5 @@ export interface IRow {
|
||||
offsetX?: number
|
||||
elementList: IRowElement[]
|
||||
isWidthNotEnough?: boolean
|
||||
rowIndex: number
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ export type ITitleOption = ITitleSizeOption & {}
|
||||
|
||||
export interface ITitleRule {
|
||||
deletable?: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export type ITitle = ITitleRule & {
|
||||
|
||||
+43
-24
@@ -4,6 +4,7 @@ import {
|
||||
deepCloneOmitKeys,
|
||||
getUUID,
|
||||
isArrayEqual,
|
||||
omitObject,
|
||||
pickObject,
|
||||
splitText
|
||||
} from '.'
|
||||
@@ -29,7 +30,8 @@ import {
|
||||
INLINE_NODE_NAME,
|
||||
TABLE_CONTEXT_ATTR,
|
||||
TABLE_TD_ZIP_ATTR,
|
||||
TEXTLIKE_ELEMENT_TYPE
|
||||
TEXTLIKE_ELEMENT_TYPE,
|
||||
TITLE_CONTEXT_ATTR
|
||||
} from '../dataset/constant/Element'
|
||||
import {
|
||||
listStyleCSSMapping,
|
||||
@@ -63,7 +65,8 @@ export function unzipElementList(elementList: IElement[]): IElement[] {
|
||||
}
|
||||
|
||||
interface IFormatElementListOption {
|
||||
isHandleFirstElement?: boolean
|
||||
isHandleFirstElement?: boolean // 根据上下文确定首字符处理逻辑（处理首字符补偿）
|
||||
isForceCompensation?: boolean // 强制补偿字符
|
||||
editorOptions: DeepRequired<IEditorOption>
|
||||
}
|
||||
|
||||
@@ -71,17 +74,19 @@ export function formatElementList(
|
||||
elementList: IElement[],
|
||||
options: IFormatElementListOption
|
||||
) {
|
||||
const { isHandleFirstElement, editorOptions } = <IFormatElementListOption>{
|
||||
isHandleFirstElement: true,
|
||||
...options
|
||||
}
|
||||
const {
|
||||
isHandleFirstElement = true,
|
||||
isForceCompensation = false,
|
||||
editorOptions
|
||||
} = options
|
||||
const startElement = elementList[0]
|
||||
// 非首字符零宽节点文本元素则补偿-列表元素内部会补偿此处忽略
|
||||
if (
|
||||
isHandleFirstElement &&
|
||||
startElement?.type !== ElementType.LIST &&
|
||||
((startElement?.type && startElement.type !== ElementType.TEXT) ||
|
||||
!START_LINE_BREAK_REG.test(startElement?.value))
|
||||
isForceCompensation ||
|
||||
(isHandleFirstElement &&
|
||||
startElement?.type !== ElementType.LIST &&
|
||||
((startElement?.type && startElement.type !== ElementType.TEXT) ||
|
||||
!START_LINE_BREAK_REG.test(startElement?.value)))
|
||||
) {
|
||||
elementList.unshift({
|
||||
value: ZERO
|
||||
@@ -98,7 +103,8 @@ export function formatElementList(
|
||||
const valueList = el.valueList || []
|
||||
formatElementList(valueList, {
|
||||
...options,
|
||||
isHandleFirstElement: false
|
||||
isHandleFirstElement: false,
|
||||
isForceCompensation: false
|
||||
})
|
||||
// 追加节点
|
||||
if (valueList.length) {
|
||||
@@ -132,7 +138,8 @@ export function formatElementList(
|
||||
const valueList = el.valueList || []
|
||||
formatElementList(valueList, {
|
||||
...options,
|
||||
isHandleFirstElement: true
|
||||
isHandleFirstElement: true,
|
||||
isForceCompensation: false
|
||||
})
|
||||
// 追加节点
|
||||
if (valueList.length) {
|
||||
@@ -168,7 +175,8 @@ export function formatElementList(
|
||||
td.id = tdId
|
||||
formatElementList(td.value, {
|
||||
...options,
|
||||
isHandleFirstElement: true
|
||||
isHandleFirstElement: true,
|
||||
isForceCompensation: true
|
||||
})
|
||||
for (let v = 0; v < td.value.length; v++) {
|
||||
const value = td.value[v]
|
||||
@@ -234,7 +242,10 @@ export function formatElementList(
|
||||
// 移除父节点
|
||||
elementList.splice(i, 1)
|
||||
// 控件上下文提取（压缩后的控件上下文无法提取）
|
||||
const controlContext = pickObject(el, EDITOR_ELEMENT_CONTEXT_ATTR)
|
||||
const controlContext = pickObject(el, [
|
||||
...EDITOR_ELEMENT_CONTEXT_ATTR,
|
||||
...EDITOR_ROW_ATTR
|
||||
])
|
||||
// 控件设置的默认样式（以前缀为基准）
|
||||
const controlDefaultStyle = pickObject(
|
||||
<IElement>(<unknown>el.control),
|
||||
@@ -285,6 +296,7 @@ export function formatElementList(
|
||||
// checkbox组件
|
||||
elementList.splice(i, 0, {
|
||||
...controlContext,
|
||||
...controlDefaultStyle,
|
||||
controlId,
|
||||
value: '',
|
||||
type: el.type,
|
||||
@@ -332,6 +344,7 @@ export function formatElementList(
|
||||
// radio组件
|
||||
elementList.splice(i, 0, {
|
||||
...controlContext,
|
||||
...controlDefaultStyle,
|
||||
controlId,
|
||||
value: '',
|
||||
type: el.type,
|
||||
@@ -378,7 +391,8 @@ export function formatElementList(
|
||||
}
|
||||
formatElementList(valueList, {
|
||||
...options,
|
||||
isHandleFirstElement: false
|
||||
isHandleFirstElement: false,
|
||||
isForceCompensation: false
|
||||
})
|
||||
for (let v = 0; v < valueList.length; v++) {
|
||||
const element = valueList[v]
|
||||
@@ -444,7 +458,7 @@ export function formatElementList(
|
||||
}
|
||||
el = elementList[i]
|
||||
}
|
||||
if (el.value === '\n') {
|
||||
if (el.value === '\n' || el.value == '\r\n') {
|
||||
el.value = ZERO
|
||||
}
|
||||
if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
|
||||
@@ -816,8 +830,12 @@ export function formatElementContext(
|
||||
anchorIndex: number,
|
||||
options?: IFormatElementContextOption
|
||||
) {
|
||||
const copyElement = getAnchorElement(sourceElementList, anchorIndex)
|
||||
let copyElement = getAnchorElement(sourceElementList, anchorIndex)
|
||||
if (!copyElement) return
|
||||
// 标题元素禁用时不复制标题属性
|
||||
if (copyElement.title?.disabled) {
|
||||
copyElement = omitObject(copyElement, TITLE_CONTEXT_ATTR)
|
||||
}
|
||||
const { isBreakWhenWrap = false } = options || {}
|
||||
// 是否已经换行
|
||||
let isBreakWarped = false
|
||||
@@ -837,9 +855,9 @@ export function formatElementContext(
|
||||
(!copyElement.listId && targetElement.type === ElementType.LIST)
|
||||
) {
|
||||
const cloneAttr = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR]
|
||||
cloneProperty<IElement>(cloneAttr, copyElement, targetElement)
|
||||
cloneProperty<IElement>(cloneAttr, copyElement!, targetElement)
|
||||
targetElement.valueList?.forEach(valueItem => {
|
||||
cloneProperty<IElement>(cloneAttr, copyElement, valueItem)
|
||||
cloneProperty<IElement>(cloneAttr, copyElement!, valueItem)
|
||||
})
|
||||
continue
|
||||
}
|
||||
@@ -850,11 +868,12 @@ export function formatElementContext(
|
||||
anchorIndex
|
||||
)
|
||||
}
|
||||
cloneProperty<IElement>(
|
||||
EDITOR_ELEMENT_CONTEXT_ATTR,
|
||||
copyElement,
|
||||
targetElement
|
||||
)
|
||||
// 非块类元素，需处理行属性
|
||||
const cloneAttr = [...EDITOR_ELEMENT_CONTEXT_ATTR]
|
||||
if (!getIsBlockElement(targetElement)) {
|
||||
cloneAttr.push(...EDITOR_ROW_ATTR)
|
||||
}
|
||||
cloneProperty<IElement>(cloneAttr, copyElement, targetElement)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ import { defaultTableOption } from '../dataset/constant/Table'
|
||||
import { defaultTitleOption } from '../dataset/constant/Title'
|
||||
import { defaultWatermarkOption } from '../dataset/constant/Watermark'
|
||||
import { defaultZoneOption } from '../dataset/constant/Zone'
|
||||
import { defaultLineNumberOption } from '../dataset/constant/LineNumber'
|
||||
import { IBackgroundOption } from '../interface/Background'
|
||||
import { ICheckboxOption } from '../interface/Checkbox'
|
||||
import { DeepRequired } from '../interface/Common'
|
||||
@@ -35,6 +36,9 @@ import { ITableOption } from '../interface/table/Table'
|
||||
import { ITitleOption } from '../interface/Title'
|
||||
import { IWatermark } from '../interface/Watermark'
|
||||
import { IZoneOption } from '../interface/Zone'
|
||||
import { ILineNumberOption } from '../interface/LineNumber'
|
||||
import { IPageBorderOption } from '../interface/PageBorder'
|
||||
import { defaultPageBorderOption } from '../dataset/constant/PageBorder'
|
||||
import {
|
||||
EditorMode,
|
||||
PageMode,
|
||||
@@ -114,6 +118,14 @@ export function mergeOption(
|
||||
...defaultSeparatorOption,
|
||||
...options.separator
|
||||
}
|
||||
const lineNumberOptions: Required<ILineNumberOption> = {
|
||||
...defaultLineNumberOption,
|
||||
...options.lineNumber
|
||||
}
|
||||
const pageBorderOptions: Required<IPageBorderOption> = {
|
||||
...defaultPageBorderOption,
|
||||
...options.pageBorder
|
||||
}
|
||||
|
||||
return {
|
||||
mode: EditorMode.EDIT,
|
||||
@@ -173,6 +185,8 @@ export function mergeOption(
|
||||
zone: zoneOptions,
|
||||
background: backgroundOptions,
|
||||
lineBreak: lineBreakOptions,
|
||||
separator: separatorOptions
|
||||
separator: separatorOptions,
|
||||
lineNumber: lineNumberOptions,
|
||||
pageBorder: pageBorderOptions
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,35 @@
|
||||
import { PaperDirection } from '../dataset/enum/Editor'
|
||||
|
||||
function convertPxToPaperSize(width: number, height: number) {
|
||||
if (width === 1125 && height === 1593) {
|
||||
return {
|
||||
size: 'a3',
|
||||
width: '297mm',
|
||||
height: '420mm'
|
||||
}
|
||||
}
|
||||
if (width === 794 && height === 1123) {
|
||||
return {
|
||||
size: 'a4',
|
||||
width: '210mm',
|
||||
height: '297mm'
|
||||
}
|
||||
}
|
||||
if (width === 565 && height === 796) {
|
||||
return {
|
||||
size: 'a5',
|
||||
width: '148mm',
|
||||
height: '210mm'
|
||||
}
|
||||
}
|
||||
// 其他默认不转换
|
||||
return {
|
||||
size: '',
|
||||
width: `${width}px`,
|
||||
height: `${height}px`
|
||||
}
|
||||
}
|
||||
|
||||
export interface IPrintImageBase64Option {
|
||||
width: number
|
||||
height: number
|
||||
@@ -24,10 +54,17 @@ export function printImageBase64(
|
||||
const doc = contentWindow.document
|
||||
doc.open()
|
||||
const container = document.createElement('div')
|
||||
const paperSize = convertPxToPaperSize(width, height)
|
||||
base64List.forEach(base64 => {
|
||||
const image = document.createElement('img')
|
||||
image.style.width = `${width}px`
|
||||
image.style.height = `${height}px`
|
||||
image.style.width =
|
||||
direction === PaperDirection.HORIZONTAL
|
||||
? paperSize.height
|
||||
: paperSize.width
|
||||
image.style.height =
|
||||
direction === PaperDirection.HORIZONTAL
|
||||
? paperSize.width
|
||||
: paperSize.height
|
||||
image.src = base64
|
||||
container.append(image)
|
||||
})
|
||||
@@ -39,7 +76,9 @@ export function printImageBase64(
|
||||
}
|
||||
@page {
|
||||
margin: 0;
|
||||
size: ${direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`};
|
||||
size: ${paperSize.size} ${
|
||||
direction === PaperDirection.HORIZONTAL ? `landscape` : `portrait`
|
||||
};
|
||||
}`
|
||||
style.append(document.createTextNode(stylesheet))
|
||||
setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user