@logicflow/extension 2.2.0-alpha.0 → 2.2.0-alpha.1
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/.turbo/turbo-build.log +7 -7
- package/CHANGELOG.md +12 -2
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/es/insert-node-in-polyline/index.js +11 -35
- package/es/tools/label/LabelOverlay.js +3 -3
- package/es/tools/label/mediumEditor.d.ts +1 -1
- package/es/tools/label/mediumEditor.js +89 -52
- package/es/tools/snapshot/index.js +26 -13
- package/lib/insert-node-in-polyline/index.js +10 -34
- package/lib/tools/label/LabelOverlay.js +2 -2
- package/lib/tools/label/mediumEditor.d.ts +1 -1
- package/lib/tools/label/mediumEditor.js +91 -53
- package/lib/tools/snapshot/index.js +26 -13
- package/package.json +5 -5
- package/src/insert-node-in-polyline/index.ts +17 -11
- package/src/tools/label/LabelOverlay.tsx +7 -3
- package/src/tools/label/mediumEditor.ts +78 -51
- package/src/tools/snapshot/index.ts +12 -0
- package/stats.html +1 -1
|
@@ -1,29 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
-
if (!m) return o;
|
|
4
|
-
var i = m.call(o), r, ar = [], e;
|
|
5
|
-
try {
|
|
6
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
-
}
|
|
8
|
-
catch (error) { e = { error: error }; }
|
|
9
|
-
finally {
|
|
10
|
-
try {
|
|
11
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
-
}
|
|
13
|
-
finally { if (e) throw e.error; }
|
|
14
|
-
}
|
|
15
|
-
return ar;
|
|
16
|
-
};
|
|
17
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
18
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
19
|
-
if (ar || !(i in from)) {
|
|
20
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
21
|
-
ar[i] = from[i];
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
25
|
-
};
|
|
26
|
-
import { EventType, formatAnchorConnectValidateData, } from '@logicflow/core';
|
|
1
|
+
import { EventType, formatAnchorConnectValidateData, getClosestAnchor, } from '@logicflow/core';
|
|
27
2
|
import { cloneDeep } from 'lodash-es';
|
|
28
3
|
import { isNodeInSegment } from './edge';
|
|
29
4
|
var InsertNodeInPolyline = /** @class */ (function () {
|
|
@@ -113,28 +88,29 @@ var InsertNodeInPolyline = /** @class */ (function () {
|
|
|
113
88
|
var _b = edges[i], sourceNodeId = _b.sourceNodeId, targetNodeId = _b.targetNodeId, id = _b.id, type = _b.type, pointsList = _b.pointsList, sourceAnchorId = _b.sourceAnchorId, targetAnchorId = _b.targetAnchorId;
|
|
114
89
|
// fix https://github.com/didi/LogicFlow/issues/996
|
|
115
90
|
var startPoint = cloneDeep(pointsList[0]);
|
|
116
|
-
var endPoint = cloneDeep(crossPoints.startCrossPoint);
|
|
117
91
|
this._lf.deleteEdge(id);
|
|
118
92
|
var checkResult = this.checkRuleBeforeInsetNode(sourceNodeId, targetNodeId, sourceAnchorId, targetAnchorId, nodeData);
|
|
93
|
+
// 基于插入节点的进入交点计算出最近的“进入锚点”，用于重连原边的前半段
|
|
94
|
+
var entryAnchorInfo = getClosestAnchor(crossPoints.startCrossPoint, nodeModel);
|
|
95
|
+
var entryAnchor = entryAnchorInfo.anchor;
|
|
96
|
+
// 构造第一条边：原 source → 插入节点（终点为进入锚点）
|
|
119
97
|
this._lf.addEdge({
|
|
120
98
|
type: type,
|
|
121
99
|
sourceNodeId: sourceNodeId,
|
|
122
100
|
targetNodeId: nodeData.id,
|
|
123
101
|
startPoint: startPoint,
|
|
124
|
-
endPoint:
|
|
125
|
-
pointsList: __spreadArray(__spreadArray([], __read(pointsList.slice(0, crossIndex)), false), [
|
|
126
|
-
crossPoints.startCrossPoint,
|
|
127
|
-
], false),
|
|
102
|
+
endPoint: entryAnchor,
|
|
128
103
|
});
|
|
104
|
+
// 基于插入节点的离开交点计算出最近的“离开锚点”，用于重连原边的后半段
|
|
105
|
+
var exitAnchorInfo = getClosestAnchor(crossPoints.endCrossPoint, nodeModel);
|
|
106
|
+
var exitAnchor = exitAnchorInfo.anchor;
|
|
107
|
+
// 构造第二条边：插入节点 → 原 target（起点为离开锚点）
|
|
129
108
|
this._lf.addEdge({
|
|
130
109
|
type: type,
|
|
131
110
|
sourceNodeId: nodeData.id,
|
|
132
111
|
targetNodeId: targetNodeId,
|
|
133
|
-
startPoint: cloneDeep(
|
|
112
|
+
startPoint: cloneDeep(exitAnchor),
|
|
134
113
|
endPoint: cloneDeep(pointsList[pointsList.length - 1]),
|
|
135
|
-
pointsList: __spreadArray([
|
|
136
|
-
crossPoints.endCrossPoint
|
|
137
|
-
], __read(pointsList.slice(crossIndex)), false),
|
|
138
114
|
});
|
|
139
115
|
if (!checkResult.isPass) {
|
|
140
116
|
this._lf.graphModel.eventCenter.emit(EventType.CONNECTION_NOT_ALLOWED, {
|
|
@@ -49,7 +49,7 @@ import { Component, observer } from '@logicflow/core';
|
|
|
49
49
|
import { forEach, merge } from 'lodash-es';
|
|
50
50
|
import Label from './Label';
|
|
51
51
|
import LabelModel from './LabelModel';
|
|
52
|
-
import { MediumEditor, defaultOptions,
|
|
52
|
+
import { MediumEditor, defaultOptions, createColorPickerButtonClass, } from './mediumEditor';
|
|
53
53
|
// const { createUuid } = LogicFlowUtil
|
|
54
54
|
// DONE: 解决问题，如果 LabelOverlay 设置为 Observer，拖拽 Label 时会导致 LabelOverlay 组件重新渲染，不知道为何
|
|
55
55
|
// 目前解决了。流程是 拖动 -> 更新 label 的数据信息到 element model -> 重新渲染 LabelOverlay
|
|
@@ -74,7 +74,7 @@ var LabelOverlay = /** @class */ (function (_super) {
|
|
|
74
74
|
this.editor = new MediumEditor('.lf-label-editor', merge(defaultOptions, {
|
|
75
75
|
autoLink: true,
|
|
76
76
|
extensions: {
|
|
77
|
-
colorPicker: new
|
|
77
|
+
colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
|
|
78
78
|
},
|
|
79
79
|
}));
|
|
80
80
|
// TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
|
|
@@ -99,7 +99,7 @@ var LabelOverlay = /** @class */ (function (_super) {
|
|
|
99
99
|
this.editor = new MediumEditor('.lf-label-editor', merge(defaultOptions, {
|
|
100
100
|
autoLink: true,
|
|
101
101
|
extensions: {
|
|
102
|
-
colorPicker: new
|
|
102
|
+
colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
|
|
103
103
|
},
|
|
104
104
|
}));
|
|
105
105
|
}
|
|
@@ -36,56 +36,93 @@ export var defaultOptions = {
|
|
|
36
36
|
},
|
|
37
37
|
disableEditing: true,
|
|
38
38
|
};
|
|
39
|
-
export
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
39
|
+
export function createColorPickerButtonClass(MediumEditor) {
|
|
40
|
+
var _a, _b;
|
|
41
|
+
var ButtonBase = ((_a = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _a === void 0 ? void 0 : _a.button) || ((_b = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _b === void 0 ? void 0 : _b.button);
|
|
42
|
+
var ExtensionBase = (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension) || (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension);
|
|
43
|
+
// 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
|
|
44
|
+
var Base = ButtonBase || ExtensionBase;
|
|
45
|
+
if (!Base) {
|
|
46
|
+
console.warn('MediumEditor button/extension base not available; using noop extension');
|
|
47
|
+
return /** @class */ (function () {
|
|
48
|
+
function class_1() {
|
|
49
|
+
}
|
|
50
|
+
return class_1;
|
|
51
|
+
}());
|
|
52
|
+
}
|
|
53
|
+
return Base.extend({
|
|
54
|
+
name: 'colorpicker',
|
|
55
|
+
tagNames: ['mark'],
|
|
56
|
+
contentDefault: '<b>Color</b>',
|
|
57
|
+
aria: 'Color Picker',
|
|
58
|
+
action: 'colorPicker',
|
|
59
|
+
init: function () {
|
|
60
|
+
var _this = this;
|
|
61
|
+
var _a, _b;
|
|
62
|
+
try {
|
|
63
|
+
rangy.init();
|
|
64
|
+
}
|
|
65
|
+
catch (_c) {
|
|
66
|
+
console.error('rangy.init failed');
|
|
67
|
+
}
|
|
68
|
+
// 初始化按钮（ButtonBase 才有 prototype.init）
|
|
69
|
+
try {
|
|
70
|
+
;
|
|
71
|
+
(_b = (_a = ButtonBase === null || ButtonBase === void 0 ? void 0 : ButtonBase.prototype) === null || _a === void 0 ? void 0 : _a.init) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
72
|
+
}
|
|
73
|
+
catch (_d) {
|
|
74
|
+
console.error('ButtonBase.init failed');
|
|
75
|
+
}
|
|
76
|
+
this.colorPicker = new Picker({
|
|
77
|
+
parent: this.button || undefined,
|
|
78
|
+
color: '#000',
|
|
79
|
+
onDone: function (res) {
|
|
80
|
+
var _a, _b, _c, _d, _e;
|
|
81
|
+
try {
|
|
82
|
+
if (_this.coloredText && ((_b = (_a = _this.coloredText).isAppliedToSelection) === null || _b === void 0 ? void 0 : _b.call(_a))) {
|
|
83
|
+
_this.coloredText.undoToSelection();
|
|
84
|
+
}
|
|
85
|
+
_this.coloredText = rangy.createClassApplier('colored', {
|
|
86
|
+
elementTagName: 'span',
|
|
87
|
+
elementProperties: { style: { color: res.hex } },
|
|
88
|
+
normalize: true,
|
|
89
|
+
});
|
|
90
|
+
_this.coloredText.toggleSelection();
|
|
91
|
+
(_d = (_c = _this.base) === null || _c === void 0 ? void 0 : _c.checkContentChanged) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
92
|
+
(_e = _this.setInactive) === null || _e === void 0 ? void 0 : _e.call(_this);
|
|
93
|
+
}
|
|
94
|
+
catch (_f) {
|
|
95
|
+
console.error('Picker.onDone failed');
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
});
|
|
99
|
+
},
|
|
100
|
+
getButton: function () {
|
|
101
|
+
return this.button;
|
|
102
|
+
},
|
|
103
|
+
handleClick: function () {
|
|
104
|
+
var _a, _b, _c;
|
|
105
|
+
(_a = this.setActive) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
106
|
+
(_c = (_b = this.colorPicker) === null || _b === void 0 ? void 0 : _b.show) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
107
|
+
},
|
|
108
|
+
isAlreadyApplied: function (node) {
|
|
109
|
+
var _a, _b;
|
|
110
|
+
return ((_b = (_a = node === null || node === void 0 ? void 0 : node.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === 'mark';
|
|
111
|
+
},
|
|
112
|
+
isActive: function () {
|
|
113
|
+
var _a, _b;
|
|
114
|
+
return (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('medium-editor-button-active');
|
|
115
|
+
},
|
|
116
|
+
setInactive: function () {
|
|
117
|
+
var _a, _b;
|
|
118
|
+
;
|
|
119
|
+
(_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('medium-editor-button-active');
|
|
120
|
+
},
|
|
121
|
+
setActive: function () {
|
|
122
|
+
var _a, _b;
|
|
123
|
+
;
|
|
124
|
+
(_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('medium-editor-button-active');
|
|
125
|
+
},
|
|
126
|
+
});
|
|
127
|
+
}
|
|
91
128
|
export { MediumEditor };
|
|
@@ -666,7 +666,7 @@ var Snapshot = /** @class */ (function () {
|
|
|
666
666
|
// 内部方法处理blob转换
|
|
667
667
|
Snapshot.prototype.snapshotBlob = function (toImageOptions, baseFileType, backgroundColor) {
|
|
668
668
|
return __awaiter(this, void 0, void 0, function () {
|
|
669
|
-
var _a, fileType, svg;
|
|
669
|
+
var _a, fileType, svg, copy, svgString, blob;
|
|
670
670
|
var _this = this;
|
|
671
671
|
return __generator(this, function (_b) {
|
|
672
672
|
switch (_b.label) {
|
|
@@ -676,18 +676,31 @@ var Snapshot = /** @class */ (function () {
|
|
|
676
676
|
return [4 /*yield*/, updateImageSource(svg)];
|
|
677
677
|
case 1:
|
|
678
678
|
_b.sent();
|
|
679
|
-
return [
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
679
|
+
if (!(fileType === 'svg')) return [3 /*break*/, 3];
|
|
680
|
+
return [4 /*yield*/, this.cloneSvg(svg)];
|
|
681
|
+
case 2:
|
|
682
|
+
copy = _b.sent();
|
|
683
|
+
svgString = new XMLSerializer().serializeToString(copy);
|
|
684
|
+
blob = new Blob([svgString], {
|
|
685
|
+
type: 'image/svg+xml;charset=utf-8',
|
|
686
|
+
});
|
|
687
|
+
return [2 /*return*/, {
|
|
688
|
+
data: blob,
|
|
689
|
+
width: 0,
|
|
690
|
+
height: 0,
|
|
691
|
+
}];
|
|
692
|
+
case 3: return [2 /*return*/, new Promise(function (resolve) {
|
|
693
|
+
_this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
|
|
694
|
+
canvas.toBlob(function (blob) {
|
|
695
|
+
// 输出图片数据以及图片宽高
|
|
696
|
+
resolve({
|
|
697
|
+
data: blob,
|
|
698
|
+
width: canvas.width,
|
|
699
|
+
height: canvas.height,
|
|
700
|
+
});
|
|
701
|
+
}, "image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
|
|
702
|
+
});
|
|
703
|
+
})];
|
|
691
704
|
}
|
|
692
705
|
});
|
|
693
706
|
});
|
|
@@ -1,29 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
3
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
4
|
-
if (!m) return o;
|
|
5
|
-
var i = m.call(o), r, ar = [], e;
|
|
6
|
-
try {
|
|
7
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
8
|
-
}
|
|
9
|
-
catch (error) { e = { error: error }; }
|
|
10
|
-
finally {
|
|
11
|
-
try {
|
|
12
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
13
|
-
}
|
|
14
|
-
finally { if (e) throw e.error; }
|
|
15
|
-
}
|
|
16
|
-
return ar;
|
|
17
|
-
};
|
|
18
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
19
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
20
|
-
if (ar || !(i in from)) {
|
|
21
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
22
|
-
ar[i] = from[i];
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
26
|
-
};
|
|
27
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
3
|
exports.InsertNodeInPolyline = void 0;
|
|
29
4
|
var core_1 = require("@logicflow/core");
|
|
@@ -116,28 +91,29 @@ var InsertNodeInPolyline = /** @class */ (function () {
|
|
|
116
91
|
var _b = edges[i], sourceNodeId = _b.sourceNodeId, targetNodeId = _b.targetNodeId, id = _b.id, type = _b.type, pointsList = _b.pointsList, sourceAnchorId = _b.sourceAnchorId, targetAnchorId = _b.targetAnchorId;
|
|
117
92
|
// fix https://github.com/didi/LogicFlow/issues/996
|
|
118
93
|
var startPoint = (0, lodash_es_1.cloneDeep)(pointsList[0]);
|
|
119
|
-
var endPoint = (0, lodash_es_1.cloneDeep)(crossPoints.startCrossPoint);
|
|
120
94
|
this._lf.deleteEdge(id);
|
|
121
95
|
var checkResult = this.checkRuleBeforeInsetNode(sourceNodeId, targetNodeId, sourceAnchorId, targetAnchorId, nodeData);
|
|
96
|
+
// 基于插入节点的进入交点计算出最近的“进入锚点”，用于重连原边的前半段
|
|
97
|
+
var entryAnchorInfo = (0, core_1.getClosestAnchor)(crossPoints.startCrossPoint, nodeModel);
|
|
98
|
+
var entryAnchor = entryAnchorInfo.anchor;
|
|
99
|
+
// 构造第一条边：原 source → 插入节点（终点为进入锚点）
|
|
122
100
|
this._lf.addEdge({
|
|
123
101
|
type: type,
|
|
124
102
|
sourceNodeId: sourceNodeId,
|
|
125
103
|
targetNodeId: nodeData.id,
|
|
126
104
|
startPoint: startPoint,
|
|
127
|
-
endPoint:
|
|
128
|
-
pointsList: __spreadArray(__spreadArray([], __read(pointsList.slice(0, crossIndex)), false), [
|
|
129
|
-
crossPoints.startCrossPoint,
|
|
130
|
-
], false),
|
|
105
|
+
endPoint: entryAnchor,
|
|
131
106
|
});
|
|
107
|
+
// 基于插入节点的离开交点计算出最近的“离开锚点”，用于重连原边的后半段
|
|
108
|
+
var exitAnchorInfo = (0, core_1.getClosestAnchor)(crossPoints.endCrossPoint, nodeModel);
|
|
109
|
+
var exitAnchor = exitAnchorInfo.anchor;
|
|
110
|
+
// 构造第二条边：插入节点 → 原 target（起点为离开锚点）
|
|
132
111
|
this._lf.addEdge({
|
|
133
112
|
type: type,
|
|
134
113
|
sourceNodeId: nodeData.id,
|
|
135
114
|
targetNodeId: targetNodeId,
|
|
136
|
-
startPoint: (0, lodash_es_1.cloneDeep)(
|
|
115
|
+
startPoint: (0, lodash_es_1.cloneDeep)(exitAnchor),
|
|
137
116
|
endPoint: (0, lodash_es_1.cloneDeep)(pointsList[pointsList.length - 1]),
|
|
138
|
-
pointsList: __spreadArray([
|
|
139
|
-
crossPoints.endCrossPoint
|
|
140
|
-
], __read(pointsList.slice(crossIndex)), false),
|
|
141
117
|
});
|
|
142
118
|
if (!checkResult.isPass) {
|
|
143
119
|
this._lf.graphModel.eventCenter.emit(core_1.EventType.CONNECTION_NOT_ALLOWED, {
|
|
@@ -80,7 +80,7 @@ var LabelOverlay = /** @class */ (function (_super) {
|
|
|
80
80
|
this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
|
|
81
81
|
autoLink: true,
|
|
82
82
|
extensions: {
|
|
83
|
-
colorPicker: new mediumEditor_1.
|
|
83
|
+
colorPicker: new ((0, mediumEditor_1.createColorPickerButtonClass)(mediumEditor_1.MediumEditor))(),
|
|
84
84
|
},
|
|
85
85
|
}));
|
|
86
86
|
// TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
|
|
@@ -105,7 +105,7 @@ var LabelOverlay = /** @class */ (function (_super) {
|
|
|
105
105
|
this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
|
|
106
106
|
autoLink: true,
|
|
107
107
|
extensions: {
|
|
108
|
-
colorPicker: new mediumEditor_1.
|
|
108
|
+
colorPicker: new ((0, mediumEditor_1.createColorPickerButtonClass)(mediumEditor_1.MediumEditor))(),
|
|
109
109
|
},
|
|
110
110
|
}));
|
|
111
111
|
}
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.MediumEditor = exports.
|
|
6
|
+
exports.MediumEditor = exports.createColorPickerButtonClass = exports.defaultOptions = void 0;
|
|
7
7
|
var medium_editor_1 = __importDefault(require("medium-editor"));
|
|
8
8
|
exports.MediumEditor = medium_editor_1.default;
|
|
9
9
|
var vanilla_picker_1 = __importDefault(require("vanilla-picker"));
|
|
@@ -43,55 +43,93 @@ exports.defaultOptions = {
|
|
|
43
43
|
},
|
|
44
44
|
disableEditing: true,
|
|
45
45
|
};
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
46
|
+
function createColorPickerButtonClass(MediumEditor) {
|
|
47
|
+
var _a, _b;
|
|
48
|
+
var ButtonBase = ((_a = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _a === void 0 ? void 0 : _a.button) || ((_b = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _b === void 0 ? void 0 : _b.button);
|
|
49
|
+
var ExtensionBase = (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension) || (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension);
|
|
50
|
+
// 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
|
|
51
|
+
var Base = ButtonBase || ExtensionBase;
|
|
52
|
+
if (!Base) {
|
|
53
|
+
console.warn('MediumEditor button/extension base not available; using noop extension');
|
|
54
|
+
return /** @class */ (function () {
|
|
55
|
+
function class_1() {
|
|
56
|
+
}
|
|
57
|
+
return class_1;
|
|
58
|
+
}());
|
|
59
|
+
}
|
|
60
|
+
return Base.extend({
|
|
61
|
+
name: 'colorpicker',
|
|
62
|
+
tagNames: ['mark'],
|
|
63
|
+
contentDefault: '<b>Color</b>',
|
|
64
|
+
aria: 'Color Picker',
|
|
65
|
+
action: 'colorPicker',
|
|
66
|
+
init: function () {
|
|
67
|
+
var _this = this;
|
|
68
|
+
var _a, _b;
|
|
69
|
+
try {
|
|
70
|
+
rangy_1.default.init();
|
|
71
|
+
}
|
|
72
|
+
catch (_c) {
|
|
73
|
+
console.error('rangy.init failed');
|
|
74
|
+
}
|
|
75
|
+
// 初始化按钮（ButtonBase 才有 prototype.init）
|
|
76
|
+
try {
|
|
77
|
+
;
|
|
78
|
+
(_b = (_a = ButtonBase === null || ButtonBase === void 0 ? void 0 : ButtonBase.prototype) === null || _a === void 0 ? void 0 : _a.init) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
79
|
+
}
|
|
80
|
+
catch (_d) {
|
|
81
|
+
console.error('ButtonBase.init failed');
|
|
82
|
+
}
|
|
83
|
+
this.colorPicker = new vanilla_picker_1.default({
|
|
84
|
+
parent: this.button || undefined,
|
|
85
|
+
color: '#000',
|
|
86
|
+
onDone: function (res) {
|
|
87
|
+
var _a, _b, _c, _d, _e;
|
|
88
|
+
try {
|
|
89
|
+
if (_this.coloredText && ((_b = (_a = _this.coloredText).isAppliedToSelection) === null || _b === void 0 ? void 0 : _b.call(_a))) {
|
|
90
|
+
_this.coloredText.undoToSelection();
|
|
91
|
+
}
|
|
92
|
+
_this.coloredText = rangy_1.default.createClassApplier('colored', {
|
|
93
|
+
elementTagName: 'span',
|
|
94
|
+
elementProperties: { style: { color: res.hex } },
|
|
95
|
+
normalize: true,
|
|
96
|
+
});
|
|
97
|
+
_this.coloredText.toggleSelection();
|
|
98
|
+
(_d = (_c = _this.base) === null || _c === void 0 ? void 0 : _c.checkContentChanged) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
99
|
+
(_e = _this.setInactive) === null || _e === void 0 ? void 0 : _e.call(_this);
|
|
100
|
+
}
|
|
101
|
+
catch (_f) {
|
|
102
|
+
console.error('Picker.onDone failed');
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
});
|
|
106
|
+
},
|
|
107
|
+
getButton: function () {
|
|
108
|
+
return this.button;
|
|
109
|
+
},
|
|
110
|
+
handleClick: function () {
|
|
111
|
+
var _a, _b, _c;
|
|
112
|
+
(_a = this.setActive) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
113
|
+
(_c = (_b = this.colorPicker) === null || _b === void 0 ? void 0 : _b.show) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
114
|
+
},
|
|
115
|
+
isAlreadyApplied: function (node) {
|
|
116
|
+
var _a, _b;
|
|
117
|
+
return ((_b = (_a = node === null || node === void 0 ? void 0 : node.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === 'mark';
|
|
118
|
+
},
|
|
119
|
+
isActive: function () {
|
|
120
|
+
var _a, _b;
|
|
121
|
+
return (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('medium-editor-button-active');
|
|
122
|
+
},
|
|
123
|
+
setInactive: function () {
|
|
124
|
+
var _a, _b;
|
|
125
|
+
;
|
|
126
|
+
(_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('medium-editor-button-active');
|
|
127
|
+
},
|
|
128
|
+
setActive: function () {
|
|
129
|
+
var _a, _b;
|
|
130
|
+
;
|
|
131
|
+
(_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('medium-editor-button-active');
|
|
132
|
+
},
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
exports.createColorPickerButtonClass = createColorPickerButtonClass;
|
|
@@ -669,7 +669,7 @@ var Snapshot = /** @class */ (function () {
|
|
|
669
669
|
// 内部方法处理blob转换
|
|
670
670
|
Snapshot.prototype.snapshotBlob = function (toImageOptions, baseFileType, backgroundColor) {
|
|
671
671
|
return __awaiter(this, void 0, void 0, function () {
|
|
672
|
-
var _a, fileType, svg;
|
|
672
|
+
var _a, fileType, svg, copy, svgString, blob;
|
|
673
673
|
var _this = this;
|
|
674
674
|
return __generator(this, function (_b) {
|
|
675
675
|
switch (_b.label) {
|
|
@@ -679,18 +679,31 @@ var Snapshot = /** @class */ (function () {
|
|
|
679
679
|
return [4 /*yield*/, (0, utils_1.updateImageSource)(svg)];
|
|
680
680
|
case 1:
|
|
681
681
|
_b.sent();
|
|
682
|
-
return [
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
682
|
+
if (!(fileType === 'svg')) return [3 /*break*/, 3];
|
|
683
|
+
return [4 /*yield*/, this.cloneSvg(svg)];
|
|
684
|
+
case 2:
|
|
685
|
+
copy = _b.sent();
|
|
686
|
+
svgString = new XMLSerializer().serializeToString(copy);
|
|
687
|
+
blob = new Blob([svgString], {
|
|
688
|
+
type: 'image/svg+xml;charset=utf-8',
|
|
689
|
+
});
|
|
690
|
+
return [2 /*return*/, {
|
|
691
|
+
data: blob,
|
|
692
|
+
width: 0,
|
|
693
|
+
height: 0,
|
|
694
|
+
}];
|
|
695
|
+
case 3: return [2 /*return*/, new Promise(function (resolve) {
|
|
696
|
+
_this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
|
|
697
|
+
canvas.toBlob(function (blob) {
|
|
698
|
+
// 输出图片数据以及图片宽高
|
|
699
|
+
resolve({
|
|
700
|
+
data: blob,
|
|
701
|
+
width: canvas.width,
|
|
702
|
+
height: canvas.height,
|
|
703
|
+
});
|
|
704
|
+
}, "image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
|
|
705
|
+
});
|
|
706
|
+
})];
|
|
694
707
|
}
|
|
695
708
|
});
|
|
696
709
|
});
|