@hufe921/canvas-editor 0.9.37 → 0.9.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -0
- package/README.md +7 -7
- package/dist/canvas-editor.es.js +107 -13
- package/dist/canvas-editor.es.js.map +1 -1
- package/dist/canvas-editor.umd.js +22 -22
- package/dist/canvas-editor.umd.js.map +1 -1
- package/dist/src/editor/core/command/Command.d.ts +2 -0
- package/dist/src/editor/core/command/CommandAdapt.d.ts +6 -4
- package/dist/src/editor/core/draw/Draw.d.ts +5 -4
- package/dist/src/editor/core/draw/particle/TextParticle.d.ts +5 -0
- package/dist/src/editor/dataset/constant/Regular.d.ts +1 -0
- package/dist/src/editor/dataset/enum/Editor.d.ts +4 -0
- package/dist/src/editor/index.d.ts +2 -2
- package/dist/src/editor/interface/Draw.d.ts +7 -1
- package/dist/src/editor/interface/Editor.d.ts +3 -1
- package/dist/src/editor/interface/Range.d.ts +8 -0
- package/package.json +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
## [0.9.39](https://github.com/Hufe921/canvas-editor/compare/v0.9.38...v0.9.39) (2023-07-14)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Documentation
|
|
5
|
+
|
|
6
|
+
* add clean mode remark #214 ([abcc241](https://github.com/Hufe921/canvas-editor/commit/abcc2417966dfa6a43246e3b33dfc39fc65595be)), closes [#214](https://github.com/Hufe921/canvas-editor/issues/214)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* add table row and col size option #214 ([8d1100c](https://github.com/Hufe921/canvas-editor/commit/8d1100cdb1646bf8822112993c00881cf9e39a5e)), closes [#214](https://github.com/Hufe921/canvas-editor/issues/214)
|
|
12
|
+
* get range context info ([09c4d53](https://github.com/Hufe921/canvas-editor/commit/09c4d53bca9744b115b5e7c94a42ebe81da487b8))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## [0.9.38](https://github.com/Hufe921/canvas-editor/compare/v0.9.37...v0.9.38) (2023-07-12)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### Bug Fixes
|
|
20
|
+
|
|
21
|
+
* limit word break element type #212 ([d7424f8](https://github.com/Hufe921/canvas-editor/commit/d7424f8b8798cc889df3b54748523c1367af2776)), closes [#212](https://github.com/Hufe921/canvas-editor/issues/212)
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### Chores
|
|
25
|
+
|
|
26
|
+
* add plugin tip ([8c6eee1](https://github.com/Hufe921/canvas-editor/commit/8c6eee1a57f5130919d1bdfa6a1067615f3a95e3))
|
|
27
|
+
* update README.md ([ccb1aa7](https://github.com/Hufe921/canvas-editor/commit/ccb1aa70abacd9398f9ff0e5b066ad51cfc27274))
|
|
28
|
+
* update release script ([4d1ad65](https://github.com/Hufe921/canvas-editor/commit/4d1ad650746ff2c4aa58dde2b725704ab9e7a639))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
|
|
33
|
+
* add word break option #212 ([d471165](https://github.com/Hufe921/canvas-editor/commit/d471165430e27e5322160e22da5a5f53fc969b0f)), closes [#212](https://github.com/Hufe921/canvas-editor/issues/212)
|
|
34
|
+
* get page value and append element api #211 ([85a9dcb](https://github.com/Hufe921/canvas-editor/commit/85a9dcbcf29a2fc0e1f89293c4f3ecbc976868b7)), closes [#211](https://github.com/Hufe921/canvas-editor/issues/211)
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
1
38
|
## [0.9.37](https://github.com/Hufe921/canvas-editor/compare/v0.9.36...v0.9.37) (2023-07-02)
|
|
2
39
|
|
|
3
40
|
|
package/README.md
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
## tips
|
|
6
6
|
|
|
7
7
|
1. [docs](https://hufe.club/canvas-editor-docs/)
|
|
8
|
-
2.
|
|
9
|
-
3. The
|
|
8
|
+
2. [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin)
|
|
9
|
+
3. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
|
|
10
|
+
4. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
|
|
10
11
|
|
|
11
12
|
## usage
|
|
12
13
|
|
|
@@ -28,11 +29,10 @@ new Editor(document.querySelector(".canvas-editor"), [
|
|
|
28
29
|
|
|
29
30
|
## next features
|
|
30
31
|
|
|
31
|
-
1.
|
|
32
|
-
2.
|
|
33
|
-
3.
|
|
34
|
-
4.
|
|
35
|
-
5. [CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)
|
|
32
|
+
1. improve performance
|
|
33
|
+
2. control rules
|
|
34
|
+
3. table paging
|
|
35
|
+
4. [CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)
|
|
36
36
|
|
|
37
37
|
## snapshot
|
|
38
38
|
|
package/dist/canvas-editor.es.js
CHANGED
|
@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
|
|
|
23
23
|
return value;
|
|
24
24
|
};
|
|
25
25
|
var index = "";
|
|
26
|
-
const version = "0.9.
|
|
26
|
+
const version = "0.9.39";
|
|
27
27
|
var MaxHeightRatio;
|
|
28
28
|
(function(MaxHeightRatio2) {
|
|
29
29
|
MaxHeightRatio2["HALF"] = "half";
|
|
@@ -5464,6 +5464,7 @@ function drop(evt, host) {
|
|
|
5464
5464
|
}
|
|
5465
5465
|
const LETTER_REG = /[a-zA-Z]/;
|
|
5466
5466
|
const NUMBER_LIKE_REG = /[0-9.]/;
|
|
5467
|
+
const WORD_LIKE_REG = /[^a-zA-Z][a-zA-Z]/;
|
|
5467
5468
|
function dblclick(host, evt) {
|
|
5468
5469
|
const draw = host.getDraw();
|
|
5469
5470
|
const position = draw.getPosition();
|
|
@@ -5958,6 +5959,11 @@ var PaperDirection;
|
|
|
5958
5959
|
PaperDirection2["VERTICAL"] = "vertical";
|
|
5959
5960
|
PaperDirection2["HORIZONTAL"] = "horizontal";
|
|
5960
5961
|
})(PaperDirection || (PaperDirection = {}));
|
|
5962
|
+
var WordBreak;
|
|
5963
|
+
(function(WordBreak2) {
|
|
5964
|
+
WordBreak2["BREAK_ALL"] = "break-all";
|
|
5965
|
+
WordBreak2["BREAK_WORD"] = "break-word";
|
|
5966
|
+
})(WordBreak || (WordBreak = {}));
|
|
5961
5967
|
class Position {
|
|
5962
5968
|
constructor(draw) {
|
|
5963
5969
|
__publicField(this, "cursorPosition");
|
|
@@ -7065,6 +7071,24 @@ class TextParticle {
|
|
|
7065
7071
|
this.curStyle = "";
|
|
7066
7072
|
this.cacheMeasureText = new Map();
|
|
7067
7073
|
}
|
|
7074
|
+
measureWord(ctx, elementList, curIndex) {
|
|
7075
|
+
let width = 0;
|
|
7076
|
+
let endElement = elementList[curIndex];
|
|
7077
|
+
let i = curIndex;
|
|
7078
|
+
while (i < elementList.length) {
|
|
7079
|
+
const element = elementList[i];
|
|
7080
|
+
if (!LETTER_REG.test(element.value)) {
|
|
7081
|
+
endElement = element;
|
|
7082
|
+
break;
|
|
7083
|
+
}
|
|
7084
|
+
width += this.measureText(ctx, element).width;
|
|
7085
|
+
i++;
|
|
7086
|
+
}
|
|
7087
|
+
return {
|
|
7088
|
+
width,
|
|
7089
|
+
endElement
|
|
7090
|
+
};
|
|
7091
|
+
}
|
|
7068
7092
|
measurePunctuationWidth(ctx, element) {
|
|
7069
7093
|
if (!element || !PUNCTUATION_LIST.includes(element.value))
|
|
7070
7094
|
return 0;
|
|
@@ -10733,6 +10757,27 @@ class Draw {
|
|
|
10733
10757
|
});
|
|
10734
10758
|
}
|
|
10735
10759
|
}
|
|
10760
|
+
appendElementList(elementList, options = {}) {
|
|
10761
|
+
if (!elementList.length)
|
|
10762
|
+
return;
|
|
10763
|
+
formatElementList(elementList, {
|
|
10764
|
+
isHandleFirstElement: false,
|
|
10765
|
+
editorOptions: this.options
|
|
10766
|
+
});
|
|
10767
|
+
let curIndex;
|
|
10768
|
+
const { isPrepend } = options;
|
|
10769
|
+
if (isPrepend) {
|
|
10770
|
+
this.elementList.splice(1, 0, ...elementList);
|
|
10771
|
+
curIndex = elementList.length;
|
|
10772
|
+
} else {
|
|
10773
|
+
this.elementList.push(...elementList);
|
|
10774
|
+
curIndex = this.elementList.length - 1;
|
|
10775
|
+
}
|
|
10776
|
+
this.range.setRange(curIndex, curIndex);
|
|
10777
|
+
this.render({
|
|
10778
|
+
curIndex
|
|
10779
|
+
});
|
|
10780
|
+
}
|
|
10736
10781
|
spliceElementList(elementList, start, deleteCount, ...items) {
|
|
10737
10782
|
var _a;
|
|
10738
10783
|
if (deleteCount > 0) {
|
|
@@ -10947,11 +10992,16 @@ class Draw {
|
|
|
10947
10992
|
isSetCursor: false
|
|
10948
10993
|
});
|
|
10949
10994
|
}
|
|
10950
|
-
getValue() {
|
|
10995
|
+
getValue(options = {}) {
|
|
10951
10996
|
const { width, height, margins, watermark } = this.options;
|
|
10997
|
+
const { pageNo } = options;
|
|
10998
|
+
let mainElementList = this.elementList;
|
|
10999
|
+
if (Number.isInteger(pageNo) && pageNo >= 0 && pageNo < this.pageRowList.length) {
|
|
11000
|
+
mainElementList = this.pageRowList[pageNo].flatMap((row) => row.elementList);
|
|
11001
|
+
}
|
|
10952
11002
|
const data2 = {
|
|
10953
11003
|
header: zipElementList(this.headerElementList),
|
|
10954
|
-
main: zipElementList(
|
|
11004
|
+
main: zipElementList(mainElementList),
|
|
10955
11005
|
footer: zipElementList(this.footerElementList)
|
|
10956
11006
|
};
|
|
10957
11007
|
return {
|
|
@@ -11265,8 +11315,19 @@ class Draw {
|
|
|
11265
11315
|
style: this._getFont(element, scale)
|
|
11266
11316
|
});
|
|
11267
11317
|
const preElement = elementList[i - 1];
|
|
11268
|
-
|
|
11269
|
-
|
|
11318
|
+
let nextElement = elementList[i + 1];
|
|
11319
|
+
let curRowWidth = curRow.width + metrics.width;
|
|
11320
|
+
if (this.options.wordBreak === WordBreak.BREAK_WORD) {
|
|
11321
|
+
if ((!(preElement == null ? void 0 : preElement.type) || (preElement == null ? void 0 : preElement.type) === ElementType.TEXT) && (!element.type || element.type === ElementType.TEXT)) {
|
|
11322
|
+
const word = `${(preElement == null ? void 0 : preElement.value) || ""}${element.value}`;
|
|
11323
|
+
if (WORD_LIKE_REG.test(word)) {
|
|
11324
|
+
const { width, endElement } = this.textParticle.measureWord(ctx, elementList, i);
|
|
11325
|
+
curRowWidth += width;
|
|
11326
|
+
nextElement = endElement;
|
|
11327
|
+
}
|
|
11328
|
+
curRowWidth += this.textParticle.measurePunctuationWidth(ctx, nextElement);
|
|
11329
|
+
}
|
|
11330
|
+
}
|
|
11270
11331
|
if (element.listId) {
|
|
11271
11332
|
if (element.listId !== listId) {
|
|
11272
11333
|
listIndex = 0;
|
|
@@ -11752,6 +11813,7 @@ class Command {
|
|
|
11752
11813
|
__publicField(this, "executePaperDirection");
|
|
11753
11814
|
__publicField(this, "executeSetPaperMargin");
|
|
11754
11815
|
__publicField(this, "executeInsertElementList");
|
|
11816
|
+
__publicField(this, "executeAppendElementList");
|
|
11755
11817
|
__publicField(this, "executeSetValue");
|
|
11756
11818
|
__publicField(this, "executeRemoveControl");
|
|
11757
11819
|
__publicField(this, "executeSetLocale");
|
|
@@ -11762,6 +11824,7 @@ class Command {
|
|
|
11762
11824
|
__publicField(this, "getValue");
|
|
11763
11825
|
__publicField(this, "getWordCount");
|
|
11764
11826
|
__publicField(this, "getRangeText");
|
|
11827
|
+
__publicField(this, "getRangeContext");
|
|
11765
11828
|
__publicField(this, "getPaperMargin");
|
|
11766
11829
|
__publicField(this, "getSearchNavigateInfo");
|
|
11767
11830
|
this.executeMode = adapt.mode.bind(adapt);
|
|
@@ -11830,6 +11893,7 @@ class Command {
|
|
|
11830
11893
|
this.executePaperDirection = adapt.paperDirection.bind(adapt);
|
|
11831
11894
|
this.executeSetPaperMargin = adapt.setPaperMargin.bind(adapt);
|
|
11832
11895
|
this.executeInsertElementList = adapt.insertElementList.bind(adapt);
|
|
11896
|
+
this.executeAppendElementList = adapt.appendElementList.bind(adapt);
|
|
11833
11897
|
this.executeSetValue = adapt.setValue.bind(adapt);
|
|
11834
11898
|
this.executeRemoveControl = adapt.removeControl.bind(adapt);
|
|
11835
11899
|
this.executeSetLocale = adapt.setLocale.bind(adapt);
|
|
@@ -11839,6 +11903,7 @@ class Command {
|
|
|
11839
11903
|
this.getValue = adapt.getValue.bind(adapt);
|
|
11840
11904
|
this.getWordCount = adapt.getWordCount.bind(adapt);
|
|
11841
11905
|
this.getRangeText = adapt.getRangeText.bind(adapt);
|
|
11906
|
+
this.getRangeContext = adapt.getRangeContext.bind(adapt);
|
|
11842
11907
|
this.getCatalog = adapt.getCatalog.bind(adapt);
|
|
11843
11908
|
this.getPaperMargin = adapt.getPaperMargin.bind(adapt);
|
|
11844
11909
|
this.getSearchNavigateInfo = adapt.getSearchNavigateInfo.bind(adapt);
|
|
@@ -11900,7 +11965,6 @@ function printImageBase64(base64List, width, height) {
|
|
|
11900
11965
|
}
|
|
11901
11966
|
class CommandAdapt {
|
|
11902
11967
|
constructor(draw) {
|
|
11903
|
-
__publicField(this, "defaultWidth", 40);
|
|
11904
11968
|
__publicField(this, "draw");
|
|
11905
11969
|
__publicField(this, "range");
|
|
11906
11970
|
__publicField(this, "position");
|
|
@@ -12401,7 +12465,7 @@ class CommandAdapt {
|
|
|
12401
12465
|
for (let r = 0; r < row; r++) {
|
|
12402
12466
|
const tdList = [];
|
|
12403
12467
|
const tr = {
|
|
12404
|
-
height:
|
|
12468
|
+
height: this.options.defaultTrMinHeight,
|
|
12405
12469
|
tdList
|
|
12406
12470
|
};
|
|
12407
12471
|
for (let c = 0; c < col; c++) {
|
|
@@ -12579,7 +12643,7 @@ class CommandAdapt {
|
|
|
12579
12643
|
}
|
|
12580
12644
|
const colgroup = element.colgroup;
|
|
12581
12645
|
colgroup.splice(curTdIndex, 0, {
|
|
12582
|
-
width: this.
|
|
12646
|
+
width: this.options.defaultColMinWidth
|
|
12583
12647
|
});
|
|
12584
12648
|
const colgroupWidth = colgroup.reduce((pre, cur) => pre + cur.width, 0);
|
|
12585
12649
|
const width = this.draw.getOriginalInnerWidth();
|
|
@@ -12633,7 +12697,7 @@ class CommandAdapt {
|
|
|
12633
12697
|
}
|
|
12634
12698
|
const colgroup = element.colgroup;
|
|
12635
12699
|
colgroup.splice(curTdIndex, 0, {
|
|
12636
|
-
width: this.
|
|
12700
|
+
width: this.options.defaultColMinWidth
|
|
12637
12701
|
});
|
|
12638
12702
|
const colgroupWidth = colgroup.reduce((pre, cur) => pre + cur.width, 0);
|
|
12639
12703
|
const width = this.draw.getOriginalInnerWidth();
|
|
@@ -13388,8 +13452,8 @@ class CommandAdapt {
|
|
|
13388
13452
|
getImage() {
|
|
13389
13453
|
return this.draw.getDataURL();
|
|
13390
13454
|
}
|
|
13391
|
-
getValue() {
|
|
13392
|
-
return this.draw.getValue();
|
|
13455
|
+
getValue(options) {
|
|
13456
|
+
return this.draw.getValue(options);
|
|
13393
13457
|
}
|
|
13394
13458
|
getWordCount() {
|
|
13395
13459
|
return this.workerManager.getWordCount();
|
|
@@ -13397,6 +13461,26 @@ class CommandAdapt {
|
|
|
13397
13461
|
getRangeText() {
|
|
13398
13462
|
return this.range.toString();
|
|
13399
13463
|
}
|
|
13464
|
+
getRangeContext() {
|
|
13465
|
+
const range = this.range.getRange();
|
|
13466
|
+
const { startIndex, endIndex } = range;
|
|
13467
|
+
if (!~startIndex && !~endIndex)
|
|
13468
|
+
return null;
|
|
13469
|
+
const isCollapsed = startIndex === endIndex;
|
|
13470
|
+
const elementList = this.draw.getElementList();
|
|
13471
|
+
const startElement = pickElementAttr(elementList[isCollapsed ? startIndex : startIndex + 1]);
|
|
13472
|
+
const endElement = pickElementAttr(elementList[endIndex]);
|
|
13473
|
+
const positionList = this.position.getPositionList();
|
|
13474
|
+
const startPageNo = positionList[startIndex].pageNo;
|
|
13475
|
+
const endPageNo = positionList[endIndex].pageNo;
|
|
13476
|
+
return deepClone({
|
|
13477
|
+
isCollapsed,
|
|
13478
|
+
startElement,
|
|
13479
|
+
endElement,
|
|
13480
|
+
startPageNo,
|
|
13481
|
+
endPageNo
|
|
13482
|
+
});
|
|
13483
|
+
}
|
|
13400
13484
|
pageMode(payload) {
|
|
13401
13485
|
this.draw.setPageMode(payload);
|
|
13402
13486
|
}
|
|
@@ -13443,6 +13527,14 @@ class CommandAdapt {
|
|
|
13443
13527
|
formatElementContext(elementList, payload, startIndex);
|
|
13444
13528
|
this.draw.insertElementList(payload);
|
|
13445
13529
|
}
|
|
13530
|
+
appendElementList(elementList, options) {
|
|
13531
|
+
if (!elementList.length)
|
|
13532
|
+
return;
|
|
13533
|
+
const isReadonly = this.draw.isReadonly();
|
|
13534
|
+
if (isReadonly)
|
|
13535
|
+
return;
|
|
13536
|
+
this.draw.appendElementList(elementList, options);
|
|
13537
|
+
}
|
|
13446
13538
|
setValue(payload) {
|
|
13447
13539
|
this.draw.setValue(payload);
|
|
13448
13540
|
}
|
|
@@ -14395,10 +14487,12 @@ class Editor {
|
|
|
14395
14487
|
pageMode: PageMode.PAGING,
|
|
14396
14488
|
tdPadding: 5,
|
|
14397
14489
|
defaultTrMinHeight: 40,
|
|
14490
|
+
defaultColMinWidth: 40,
|
|
14398
14491
|
defaultHyperlinkColor: "#0000FF",
|
|
14399
14492
|
paperDirection: PaperDirection.VERTICAL,
|
|
14400
14493
|
inactiveAlpha: 0.6,
|
|
14401
|
-
historyMaxRecordCount: 100
|
|
14494
|
+
historyMaxRecordCount: 100,
|
|
14495
|
+
wordBreak: WordBreak.BREAK_WORD
|
|
14402
14496
|
}, options), {
|
|
14403
14497
|
header: headerOptions,
|
|
14404
14498
|
footer: footerOptions,
|
|
@@ -14448,5 +14542,5 @@ class Editor {
|
|
|
14448
14542
|
this.use = plugin.use.bind(plugin);
|
|
14449
14543
|
}
|
|
14450
14544
|
}
|
|
14451
|
-
export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TitleLevel, VerticalAlign, Editor as default };
|
|
14545
|
+
export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TitleLevel, VerticalAlign, WordBreak, Editor as default };
|
|
14452
14546
|
//# sourceMappingURL=canvas-editor.es.js.map
|