@hprint/core 0.0.1-alpha.3 → 0.0.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/dist/ServersPlugin.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +2 -0
- package/package.json +2 -2
- package/src/ContextMenu.js +277 -277
- package/src/Instance.ts +79 -79
- package/src/ServersPlugin.ts +411 -409
- package/src/index.ts +11 -11
- package/src/interface/Editor.ts +58 -58
- package/src/objects/CustomRect.js +21 -21
- package/src/objects/CustomTextbox.js +165 -165
- package/src/plugin.ts +88 -88
- package/src/styles/contextMenu.css +60 -60
- package/src/utils/fabric-history.js +232 -232
- package/src/utils/utils.ts +165 -165
- package/tsconfig.json +10 -10
- package/vite.config.ts +29 -29
package/src/plugin.ts
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
import Editor from './Editor';
|
|
2
|
-
type IEditor = Editor;
|
|
3
|
-
|
|
4
|
-
class FontPlugin {
|
|
5
|
-
public canvas: fabric.Canvas;
|
|
6
|
-
public editor: IEditor;
|
|
7
|
-
// 插件名称
|
|
8
|
-
static pluginName = 'FontPlugin';
|
|
9
|
-
// 挂载API名称
|
|
10
|
-
static apis = ['downFontByJSON'];
|
|
11
|
-
// 发布事件
|
|
12
|
-
static events = ['textEvent1', 'textEvent2'];
|
|
13
|
-
// 快捷键 keyCode hotkeys-js
|
|
14
|
-
public hotkeys: string[] = ['backspace', 'space'];
|
|
15
|
-
// 私有属性
|
|
16
|
-
repoSrc: string;
|
|
17
|
-
|
|
18
|
-
constructor(
|
|
19
|
-
canvas: fabric.Canvas,
|
|
20
|
-
editor: IEditor,
|
|
21
|
-
config: { repoSrc: string }
|
|
22
|
-
) {
|
|
23
|
-
// 初始化
|
|
24
|
-
this.canvas = canvas;
|
|
25
|
-
this.editor = editor;
|
|
26
|
-
// 可插入外部配置
|
|
27
|
-
this.repoSrc = config.repoSrc;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// 钩子函数 hookImportAfter/hookSaveBefore/hookSaveAfter Promise
|
|
31
|
-
hookImportBefore(json: string) {
|
|
32
|
-
return this.downFontByJSON(json);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// 挂载API方法
|
|
36
|
-
downFontByJSON() {
|
|
37
|
-
//
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// 私有方法 + 发布事件
|
|
41
|
-
_createFontCSS() {
|
|
42
|
-
const params = [];
|
|
43
|
-
this.editor.emit('textEvent1', params);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// 右键菜单
|
|
47
|
-
contextMenu() {
|
|
48
|
-
const selectedMode = this.editor.getSelectMode();
|
|
49
|
-
if (selectedMode === SelectMode.ONE) {
|
|
50
|
-
return [
|
|
51
|
-
null, // 分割线
|
|
52
|
-
{
|
|
53
|
-
text: '翻转',
|
|
54
|
-
hotkey: '❯',
|
|
55
|
-
subitems: [
|
|
56
|
-
{
|
|
57
|
-
text: '水平翻转',
|
|
58
|
-
hotkey: '|',
|
|
59
|
-
onclick: () => this.flip('X'),
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
text: '垂直翻转',
|
|
63
|
-
hotkey: '-',
|
|
64
|
-
onclick: () => this.flip('Y'),
|
|
65
|
-
},
|
|
66
|
-
],
|
|
67
|
-
},
|
|
68
|
-
];
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// 快捷键
|
|
73
|
-
hotkeyEvent(eventName: string, { type }: KeyboardEvent) {
|
|
74
|
-
// eventName：hotkeys中的属性 backspace、space
|
|
75
|
-
// type：keyUp keyDown
|
|
76
|
-
// code：hotkeys-js Code
|
|
77
|
-
if (eventName === 'backspace' && type === 'keydown') {
|
|
78
|
-
this.del();
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// 注销
|
|
83
|
-
destroy() {
|
|
84
|
-
console.log('pluginDestroy');
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
export default FontPlugin;
|
|
1
|
+
import Editor from './Editor';
|
|
2
|
+
type IEditor = Editor;
|
|
3
|
+
|
|
4
|
+
class FontPlugin {
|
|
5
|
+
public canvas: fabric.Canvas;
|
|
6
|
+
public editor: IEditor;
|
|
7
|
+
// 插件名称
|
|
8
|
+
static pluginName = 'FontPlugin';
|
|
9
|
+
// 挂载API名称
|
|
10
|
+
static apis = ['downFontByJSON'];
|
|
11
|
+
// 发布事件
|
|
12
|
+
static events = ['textEvent1', 'textEvent2'];
|
|
13
|
+
// 快捷键 keyCode hotkeys-js
|
|
14
|
+
public hotkeys: string[] = ['backspace', 'space'];
|
|
15
|
+
// 私有属性
|
|
16
|
+
repoSrc: string;
|
|
17
|
+
|
|
18
|
+
constructor(
|
|
19
|
+
canvas: fabric.Canvas,
|
|
20
|
+
editor: IEditor,
|
|
21
|
+
config: { repoSrc: string }
|
|
22
|
+
) {
|
|
23
|
+
// 初始化
|
|
24
|
+
this.canvas = canvas;
|
|
25
|
+
this.editor = editor;
|
|
26
|
+
// 可插入外部配置
|
|
27
|
+
this.repoSrc = config.repoSrc;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// 钩子函数 hookImportAfter/hookSaveBefore/hookSaveAfter Promise
|
|
31
|
+
hookImportBefore(json: string) {
|
|
32
|
+
return this.downFontByJSON(json);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// 挂载API方法
|
|
36
|
+
downFontByJSON() {
|
|
37
|
+
//
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// 私有方法 + 发布事件
|
|
41
|
+
_createFontCSS() {
|
|
42
|
+
const params = [];
|
|
43
|
+
this.editor.emit('textEvent1', params);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// 右键菜单
|
|
47
|
+
contextMenu() {
|
|
48
|
+
const selectedMode = this.editor.getSelectMode();
|
|
49
|
+
if (selectedMode === SelectMode.ONE) {
|
|
50
|
+
return [
|
|
51
|
+
null, // 分割线
|
|
52
|
+
{
|
|
53
|
+
text: '翻转',
|
|
54
|
+
hotkey: '❯',
|
|
55
|
+
subitems: [
|
|
56
|
+
{
|
|
57
|
+
text: '水平翻转',
|
|
58
|
+
hotkey: '|',
|
|
59
|
+
onclick: () => this.flip('X'),
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
text: '垂直翻转',
|
|
63
|
+
hotkey: '-',
|
|
64
|
+
onclick: () => this.flip('Y'),
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
];
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// 快捷键
|
|
73
|
+
hotkeyEvent(eventName: string, { type }: KeyboardEvent) {
|
|
74
|
+
// eventName：hotkeys中的属性 backspace、space
|
|
75
|
+
// type：keyUp keyDown
|
|
76
|
+
// code：hotkeys-js Code
|
|
77
|
+
if (eventName === 'backspace' && type === 'keydown') {
|
|
78
|
+
this.del();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// 注销
|
|
83
|
+
destroy() {
|
|
84
|
+
console.log('pluginDestroy');
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default FontPlugin;
|
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
.context {
|
|
2
|
-
display: inline-block;
|
|
3
|
-
position: fixed;
|
|
4
|
-
top: 0px;
|
|
5
|
-
left: 0px;
|
|
6
|
-
min-width: 270px;
|
|
7
|
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
8
|
-
color: #fff;
|
|
9
|
-
background: #262933;
|
|
10
|
-
font-size: 9pt;
|
|
11
|
-
border: 1px solid #333333;
|
|
12
|
-
border-radius: 6px;
|
|
13
|
-
box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.5);
|
|
14
|
-
padding: 3px 0px;
|
|
15
|
-
-webkit-touch-callout: none;
|
|
16
|
-
-webkit-user-select: none;
|
|
17
|
-
-khtml-user-select: none;
|
|
18
|
-
-moz-user-select: none;
|
|
19
|
-
-ms-user-select: none;
|
|
20
|
-
user-select: none;
|
|
21
|
-
z-index: 999;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.context .item {
|
|
25
|
-
padding: 4px 19px;
|
|
26
|
-
cursor: default;
|
|
27
|
-
color: inherit;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.context .item:hover {
|
|
31
|
-
background: #2777ff;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.context .item:hover .hotkey {
|
|
35
|
-
color: #fff;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.context .disabled {
|
|
39
|
-
color: #878b90;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.context .disabled:hover {
|
|
43
|
-
background: inherit;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.context .disabled:hover .hotkey {
|
|
47
|
-
color: #878b90;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.context .separator {
|
|
51
|
-
margin: 4px 0px;
|
|
52
|
-
height: 0;
|
|
53
|
-
padding: 0;
|
|
54
|
-
border-top: 1px solid #454545;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.hotkey {
|
|
58
|
-
color: #878b90;
|
|
59
|
-
float: right;
|
|
60
|
-
}
|
|
1
|
+
.context {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0px;
|
|
5
|
+
left: 0px;
|
|
6
|
+
min-width: 270px;
|
|
7
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
8
|
+
color: #fff;
|
|
9
|
+
background: #262933;
|
|
10
|
+
font-size: 9pt;
|
|
11
|
+
border: 1px solid #333333;
|
|
12
|
+
border-radius: 6px;
|
|
13
|
+
box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.5);
|
|
14
|
+
padding: 3px 0px;
|
|
15
|
+
-webkit-touch-callout: none;
|
|
16
|
+
-webkit-user-select: none;
|
|
17
|
+
-khtml-user-select: none;
|
|
18
|
+
-moz-user-select: none;
|
|
19
|
+
-ms-user-select: none;
|
|
20
|
+
user-select: none;
|
|
21
|
+
z-index: 999;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.context .item {
|
|
25
|
+
padding: 4px 19px;
|
|
26
|
+
cursor: default;
|
|
27
|
+
color: inherit;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.context .item:hover {
|
|
31
|
+
background: #2777ff;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.context .item:hover .hotkey {
|
|
35
|
+
color: #fff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.context .disabled {
|
|
39
|
+
color: #878b90;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.context .disabled:hover {
|
|
43
|
+
background: inherit;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.context .disabled:hover .hotkey {
|
|
47
|
+
color: #878b90;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.context .separator {
|
|
51
|
+
margin: 4px 0px;
|
|
52
|
+
height: 0;
|
|
53
|
+
padding: 0;
|
|
54
|
+
border-top: 1px solid #454545;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.hotkey {
|
|
58
|
+
color: #878b90;
|
|
59
|
+
float: right;
|
|
60
|
+
}
|