@umbraci/jsmind 0.10.18 → 1.0.0-beta
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/README.md +7 -7
- package/dist/jsmind.draggable-node.js +7 -472
- package/dist/jsmind.draggable-node.js.map +1 -1
- package/dist/jsmind.history.js +7 -980
- package/dist/jsmind.history.js.map +1 -1
- package/dist/jsmind.js +7 -2624
- package/dist/jsmind.js.map +1 -1
- package/dist/jsmind.multi-select.js +7 -671
- package/dist/jsmind.multi-select.js.map +1 -1
- package/dist/jsmind.multiline-text.js +7 -156
- package/dist/jsmind.multiline-text.js.map +1 -1
- package/dist/jsmind.screenshot.js +7 -156
- package/dist/jsmind.screenshot.js.map +1 -1
- package/es/jsmind.draggable-node.js +7 -443
- package/es/jsmind.draggable-node.js.map +1 -1
- package/es/jsmind.history.js +7 -944
- package/es/jsmind.history.js.map +1 -1
- package/es/jsmind.js +7 -2570
- package/es/jsmind.js.map +1 -1
- package/es/jsmind.multi-select.js +7 -621
- package/es/jsmind.multi-select.js.map +1 -1
- package/es/jsmind.multiline-text.js +7 -136
- package/es/jsmind.multiline-text.js.map +1 -1
- package/es/jsmind.screenshot.js +7 -136
- package/es/jsmind.screenshot.js.map +1 -1
- package/lib/jsmind.draggable-node.js +7 -450
- package/lib/jsmind.draggable-node.js.map +1 -1
- package/lib/jsmind.history.js +7 -946
- package/lib/jsmind.history.js.map +1 -1
- package/lib/jsmind.js +7 -2571
- package/lib/jsmind.js.map +1 -1
- package/lib/jsmind.multi-select.js +7 -623
- package/lib/jsmind.multi-select.js.map +1 -1
- package/lib/jsmind.multiline-text.js +7 -141
- package/lib/jsmind.multiline-text.js.map +1 -1
- package/lib/jsmind.screenshot.js +7 -145
- package/lib/jsmind.screenshot.js.map +1 -1
- package/package.json +26 -25
- package/types/generated/jsmind.d.ts +21 -24
- package/types/generated/jsmind.mind.d.ts +7 -0
- package/types/generated/{jsmind.enhanced-plugin.d.ts → jsmind.plugin-system.d.ts} +10 -10
- package/types/generated/jsmind.plugin.d.ts +93 -13
- package/types/generated/jsmind.view_provider.d.ts +1 -1
- package/types/generated/plugins/history/history-diff.d.ts +10 -0
- package/types/generated/plugins/history/jsmind.history.d.ts +2 -2
- package/types/generated/plugins/jsmind.draggable-node.d.ts +13 -3
- package/types/generated/plugins/jsmind.multi-select.d.ts +3 -3
- package/types/generated/plugins/jsmind.multiline-text.d.ts +67 -21
- package/types/generated/plugins/jsmind.screenshot.d.ts +12 -3
- package/types/tsconfig.declaration.json +6 -1
- package/dist/jsmind.copy-paste.js +0 -283
- package/dist/jsmind.copy-paste.js.map +0 -1
- package/es/jsmind.copy-paste.js +0 -260
- package/es/jsmind.copy-paste.js.map +0 -1
- package/types/generated/plugins/jsmind.multiline-text-v2.d.ts +0 -58
package/README.md
CHANGED
|
@@ -7,9 +7,9 @@ jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 ht
|
|
|
7
7
|
|
|
8
8
|
jsMind is mind map library built by javascript, it base on html5 canvas and svg. jsMind is released under [the BSD license](LICENSE), you can embed it in any project as long as you abide by the license.
|
|
9
9
|
|
|
10
|
-
## ✨ New Feature:
|
|
10
|
+
## ✨ New Feature: Plugin System
|
|
11
11
|
|
|
12
|
-
jsMind now supports a new
|
|
12
|
+
jsMind now supports a new plugin system with:
|
|
13
13
|
|
|
14
14
|
- **Synchronous Initialization**: Plugins initialize before rendering, allowing them to affect the initial render
|
|
15
15
|
- **Preload Support**: Control plugin initialization order (before or after core modules)
|
|
@@ -17,16 +17,16 @@ jsMind now supports a new enhanced plugin system with:
|
|
|
17
17
|
- **Dynamic Plugin Management**: Add or remove plugins at runtime
|
|
18
18
|
- **Backward Compatibility**: Works alongside the existing plugin system
|
|
19
19
|
|
|
20
|
-
See [
|
|
20
|
+
See [Plugin System Documentation](docs/plugin-system.md) for more information.
|
|
21
21
|
|
|
22
22
|
### Quick Example
|
|
23
23
|
|
|
24
24
|
```javascript
|
|
25
25
|
import jsMind from './jsmind.js';
|
|
26
|
-
import
|
|
26
|
+
import { MultilineTextPlugin } from './plugins/jsmind.multiline-text.js';
|
|
27
27
|
|
|
28
28
|
// Register plugin (before creating instance)
|
|
29
|
-
jsMind.usePlugin(
|
|
29
|
+
jsMind.usePlugin(MultilineTextPlugin, {
|
|
30
30
|
text_width: 250,
|
|
31
31
|
min_height: 40,
|
|
32
32
|
});
|
|
@@ -62,11 +62,11 @@ jm.show({
|
|
|
62
62
|
<link
|
|
63
63
|
type="text/css"
|
|
64
64
|
rel="stylesheet"
|
|
65
|
-
href="//cdn.jsdelivr.net/npm/jsmind@0.9.
|
|
65
|
+
href="//cdn.jsdelivr.net/npm/jsmind@0.9.1/style/jsmind.css"
|
|
66
66
|
/>
|
|
67
67
|
<script
|
|
68
68
|
type="text/javascript"
|
|
69
|
-
src="//cdn.jsdelivr.net/npm/jsmind@0.9.
|
|
69
|
+
src="//cdn.jsdelivr.net/npm/jsmind@0.9.1/es6/jsmind.js"
|
|
70
70
|
></script>
|
|
71
71
|
</head>
|
|
72
72
|
<body>
|
|
@@ -1,474 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
!(function (t, e) {
|
|
9
|
-
'object' == typeof exports && 'undefined' != typeof module
|
|
10
|
-
? e(exports, require('@umbraci/jsmind'))
|
|
11
|
-
: 'function' == typeof define && define.amd
|
|
12
|
-
? define(['exports', '@umbraci/jsmind'], e)
|
|
13
|
-
: e(
|
|
14
|
-
((t = 'undefined' != typeof globalThis ? globalThis : t || self).jsMindDraggableNode =
|
|
15
|
-
{}),
|
|
16
|
-
t.jsMind
|
|
17
|
-
);
|
|
18
|
-
})(this, function (t, e) {
|
|
19
|
-
'use strict';
|
|
20
|
-
function i(t) {
|
|
21
|
-
return t && 'object' == typeof t && 'default' in t ? t : { default: t };
|
|
22
|
-
}
|
|
23
|
-
var s = i(e);
|
|
24
|
-
if (!s.default) throw new Error('jsMind is not defined');
|
|
25
|
-
const o = s.default.$,
|
|
26
|
-
n =
|
|
27
|
-
'getSelection' in o.w
|
|
28
|
-
? function () {
|
|
29
|
-
o.w.getSelection().removeAllRanges();
|
|
30
|
-
}
|
|
31
|
-
: function () {
|
|
32
|
-
o.d.selection.empty();
|
|
33
|
-
},
|
|
34
|
-
h = {
|
|
35
|
-
line_width: 5,
|
|
36
|
-
line_color: 'rgba(0,0,0,0.3)',
|
|
37
|
-
line_color_invalid: 'rgba(255,51,51,0.6)',
|
|
38
|
-
lookup_delay: 200,
|
|
39
|
-
lookup_interval: 100,
|
|
40
|
-
scrolling_trigger_width: 20,
|
|
41
|
-
scrolling_step_length: 10,
|
|
42
|
-
shadow_node_class_name: 'jsmind-draggable-shadow-node',
|
|
43
|
-
};
|
|
44
|
-
class l {
|
|
45
|
-
constructor(t, e) {
|
|
46
|
-
var i = {};
|
|
47
|
-
s.default.util.json.merge(i, h),
|
|
48
|
-
s.default.util.json.merge(i, e),
|
|
49
|
-
(this.version = '0.4.0'),
|
|
50
|
-
(this.jm = t),
|
|
51
|
-
(this.options = i),
|
|
52
|
-
(this.is_svg_engine = 'svg' === t.view.opts.engine),
|
|
53
|
-
(this.e_canvas = null),
|
|
54
|
-
(this.canvas_ctx = null),
|
|
55
|
-
(this.helper_line = null),
|
|
56
|
-
(this.shadow = null),
|
|
57
|
-
(this.shadow_p_x = 0),
|
|
58
|
-
(this.shadow_p_y = 0),
|
|
59
|
-
(this.shadow_w = 0),
|
|
60
|
-
(this.shadow_h = 0),
|
|
61
|
-
(this.active_node = null),
|
|
62
|
-
(this.target_node = null),
|
|
63
|
-
(this.target_direct = null),
|
|
64
|
-
(this.client_w = 0),
|
|
65
|
-
(this.client_h = 0),
|
|
66
|
-
(this.offset_x = 0),
|
|
67
|
-
(this.offset_y = 0),
|
|
68
|
-
(this.hlookup_delay = 0),
|
|
69
|
-
(this.hlookup_timer = 0),
|
|
70
|
-
(this.capture = !1),
|
|
71
|
-
(this.moved = !1),
|
|
72
|
-
(this.canvas_draggable = t.get_view_draggable()),
|
|
73
|
-
(this.view_panel = t.view.e_panel),
|
|
74
|
-
(this.view_panel_rect = null);
|
|
75
|
-
}
|
|
76
|
-
init() {
|
|
77
|
-
this.create_canvas(), this.create_shadow(), this.event_bind();
|
|
78
|
-
}
|
|
79
|
-
resize() {
|
|
80
|
-
this.jm.view.e_nodes.appendChild(this.shadow),
|
|
81
|
-
this.is_svg_engine
|
|
82
|
-
? (this.e_canvas.setAttribute('width', this.jm.view.size.w),
|
|
83
|
-
this.e_canvas.setAttribute('height', this.jm.view.size.h))
|
|
84
|
-
: ((this.e_canvas.width = this.jm.view.size.w),
|
|
85
|
-
(this.e_canvas.height = this.jm.view.size.h));
|
|
86
|
-
}
|
|
87
|
-
create_canvas() {
|
|
88
|
-
if (this.is_svg_engine) {
|
|
89
|
-
var t = this._create_svg_element('svg');
|
|
90
|
-
t.setAttribute('class', 'jsmind-draggable-helper'),
|
|
91
|
-
t.setAttribute(
|
|
92
|
-
'style',
|
|
93
|
-
'position: absolute; top: 0; left: 0; pointer-events: none;'
|
|
94
|
-
),
|
|
95
|
-
this.jm.view.e_panel.appendChild(t),
|
|
96
|
-
(this.e_canvas = t);
|
|
97
|
-
} else {
|
|
98
|
-
var e = o.c('canvas');
|
|
99
|
-
this.jm.view.e_panel.appendChild(e);
|
|
100
|
-
var i = e.getContext('2d');
|
|
101
|
-
(this.e_canvas = e), (this.canvas_ctx = i);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
_create_svg_element(t) {
|
|
105
|
-
return o.d.createElementNS('http://www.w3.org/2000/svg', t);
|
|
106
|
-
}
|
|
107
|
-
create_shadow() {
|
|
108
|
-
var t = o.c('jmnode');
|
|
109
|
-
(t.style.visibility = 'hidden'),
|
|
110
|
-
(t.style.zIndex = '3'),
|
|
111
|
-
(t.style.cursor = 'move'),
|
|
112
|
-
(t.style.opacity = '0.7'),
|
|
113
|
-
(t.className = this.options.shadow_node_class_name),
|
|
114
|
-
(this.shadow = t);
|
|
115
|
-
}
|
|
116
|
-
reset_shadow(t) {
|
|
117
|
-
var e = this.shadow.style;
|
|
118
|
-
(this.shadow.innerHTML = t.innerHTML),
|
|
119
|
-
(e.left = t.style.left),
|
|
120
|
-
(e.top = t.style.top),
|
|
121
|
-
(e.width = t.style.width),
|
|
122
|
-
(e.height = t.style.height),
|
|
123
|
-
(e.backgroundImage = t.style.backgroundImage),
|
|
124
|
-
(e.backgroundSize = t.style.backgroundSize),
|
|
125
|
-
(e.transform = t.style.transform),
|
|
126
|
-
(this.shadow_w = this.shadow.clientWidth),
|
|
127
|
-
(this.shadow_h = this.shadow.clientHeight);
|
|
128
|
-
}
|
|
129
|
-
show_shadow() {
|
|
130
|
-
this.moved || (this.shadow.style.visibility = 'visible');
|
|
131
|
-
}
|
|
132
|
-
hide_shadow() {
|
|
133
|
-
this.shadow.style.visibility = 'hidden';
|
|
134
|
-
}
|
|
135
|
-
magnet_shadow(t, e, i) {
|
|
136
|
-
this.clear_lines();
|
|
137
|
-
var s = i ? this.options.line_color_invalid : this.options.line_color;
|
|
138
|
-
this.is_svg_engine
|
|
139
|
-
? this.svg_draw_line(t.x, t.y, e.x, e.y, s)
|
|
140
|
-
: ((this.canvas_ctx.lineWidth = this.options.line_width),
|
|
141
|
-
(this.canvas_ctx.strokeStyle = s),
|
|
142
|
-
(this.canvas_ctx.lineCap = 'round'),
|
|
143
|
-
this.canvas_lineto(t.x, t.y, e.x, e.y));
|
|
144
|
-
}
|
|
145
|
-
clear_lines() {
|
|
146
|
-
this.is_svg_engine
|
|
147
|
-
? this.helper_line &&
|
|
148
|
-
this.helper_line.parentNode &&
|
|
149
|
-
(this.e_canvas.removeChild(this.helper_line), (this.helper_line = null))
|
|
150
|
-
: this.canvas_ctx.clearRect(0, 0, this.jm.view.size.w, this.jm.view.size.h);
|
|
151
|
-
}
|
|
152
|
-
canvas_lineto(t, e, i, s) {
|
|
153
|
-
this.canvas_ctx.beginPath(),
|
|
154
|
-
this.canvas_ctx.moveTo(t, e),
|
|
155
|
-
this.canvas_ctx.lineTo(i, s),
|
|
156
|
-
this.canvas_ctx.stroke();
|
|
157
|
-
}
|
|
158
|
-
svg_draw_line(t, e, i, s, o) {
|
|
159
|
-
(this.helper_line = this._create_svg_element('path')),
|
|
160
|
-
this.helper_line.setAttribute('stroke', o),
|
|
161
|
-
this.helper_line.setAttribute('stroke-width', this.options.line_width),
|
|
162
|
-
this.helper_line.setAttribute('fill', 'transparent'),
|
|
163
|
-
this.helper_line.setAttribute('stroke-linecap', 'round'),
|
|
164
|
-
this._svg_bezier_to(this.helper_line, t, e, i, s),
|
|
165
|
-
this.e_canvas.appendChild(this.helper_line);
|
|
166
|
-
}
|
|
167
|
-
_svg_bezier_to(t, e, i, s, o) {
|
|
168
|
-
t.setAttribute(
|
|
169
|
-
'd',
|
|
170
|
-
'M ' +
|
|
171
|
-
e +
|
|
172
|
-
' ' +
|
|
173
|
-
i +
|
|
174
|
-
' C ' +
|
|
175
|
-
(e + (2 * (s - e)) / 3) +
|
|
176
|
-
' ' +
|
|
177
|
-
i +
|
|
178
|
-
', ' +
|
|
179
|
-
e +
|
|
180
|
-
' ' +
|
|
181
|
-
o +
|
|
182
|
-
', ' +
|
|
183
|
-
s +
|
|
184
|
-
' ' +
|
|
185
|
-
o
|
|
186
|
-
);
|
|
187
|
-
}
|
|
188
|
-
event_bind() {
|
|
189
|
-
var t = this,
|
|
190
|
-
e = this.jm.view.container;
|
|
191
|
-
o.on(e, 'mousedown', function (e) {
|
|
192
|
-
0 === e.button && t.dragstart.call(t, e);
|
|
193
|
-
}),
|
|
194
|
-
o.on(e, 'mousemove', function (e) {
|
|
195
|
-
(0 === e.movementX && 0 === e.movementY) || t.drag.call(t, e);
|
|
196
|
-
}),
|
|
197
|
-
o.on(e, 'mouseup', function (e) {
|
|
198
|
-
t.dragend.call(t, e);
|
|
199
|
-
}),
|
|
200
|
-
o.on(e, 'touchstart', function (e) {
|
|
201
|
-
t.dragstart.call(t, e);
|
|
202
|
-
}),
|
|
203
|
-
o.on(e, 'touchmove', function (e) {
|
|
204
|
-
t.drag.call(t, e);
|
|
205
|
-
}),
|
|
206
|
-
o.on(e, 'touchend', function (e) {
|
|
207
|
-
t.dragend.call(t, e);
|
|
208
|
-
});
|
|
209
|
-
}
|
|
210
|
-
dragstart(t) {
|
|
211
|
-
if (this.jm.get_editable() && !this.capture) {
|
|
212
|
-
var e = this.jm.view;
|
|
213
|
-
if (!e.is_editing()) {
|
|
214
|
-
(this.active_node = null), (this.view_draggable = this.jm.get_view_draggable());
|
|
215
|
-
var i = this.find_node_element(t.target);
|
|
216
|
-
if (i) {
|
|
217
|
-
this.view_draggable && this.jm.disable_view_draggable();
|
|
218
|
-
var s = e.get_binded_nodeid(i);
|
|
219
|
-
if (s) {
|
|
220
|
-
var n = this.jm.get_node(s);
|
|
221
|
-
if (!n.isroot) {
|
|
222
|
-
if (n.data && !1 === n.data.draggable) return;
|
|
223
|
-
this.reset_shadow(i),
|
|
224
|
-
(this.view_panel_rect =
|
|
225
|
-
this.view_panel.getBoundingClientRect()),
|
|
226
|
-
(this.active_node = n),
|
|
227
|
-
(this.offset_x =
|
|
228
|
-
(t.clientX || t.touches[0].clientX) / e.zoom_current -
|
|
229
|
-
i.offsetLeft),
|
|
230
|
-
(this.offset_y =
|
|
231
|
-
(t.clientY || t.touches[0].clientY) / e.zoom_current -
|
|
232
|
-
i.offsetTop),
|
|
233
|
-
(this.client_hw = Math.floor(i.clientWidth / 2)),
|
|
234
|
-
(this.client_hh = Math.floor(i.clientHeight / 2)),
|
|
235
|
-
0 != this.hlookup_delay && o.w.clearTimeout(this.hlookup_delay),
|
|
236
|
-
0 != this.hlookup_timer &&
|
|
237
|
-
o.w.clearInterval(this.hlookup_timer);
|
|
238
|
-
var h = this;
|
|
239
|
-
(this.hlookup_delay = o.w.setTimeout(function () {
|
|
240
|
-
(h.hlookup_delay = 0),
|
|
241
|
-
(h.hlookup_timer = o.w.setInterval(function () {
|
|
242
|
-
h.lookup_target_node.call(h);
|
|
243
|
-
}, h.options.lookup_interval));
|
|
244
|
-
}, this.options.lookup_delay)),
|
|
245
|
-
(h.capture = !0);
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
drag(t) {
|
|
253
|
-
if (this.jm.get_editable() && this.capture) {
|
|
254
|
-
t.preventDefault(), this.show_shadow(), (this.moved = !0), n();
|
|
255
|
-
var e = this.jm.view,
|
|
256
|
-
i = (t.clientX || t.touches[0].clientX) / e.zoom_current - this.offset_x,
|
|
257
|
-
s = (t.clientY || t.touches[0].clientY) / e.zoom_current - this.offset_y;
|
|
258
|
-
t.clientY - this.view_panel_rect.top < this.options.scrolling_trigger_width &&
|
|
259
|
-
this.view_panel.scrollTop > this.options.scrolling_step_length
|
|
260
|
-
? (this.view_panel.scrollBy(0, -this.options.scrolling_step_length),
|
|
261
|
-
(this.offset_y += this.options.scrolling_step_length / e.zoom_current))
|
|
262
|
-
: this.view_panel_rect.bottom - t.clientY <
|
|
263
|
-
this.options.scrolling_trigger_width &&
|
|
264
|
-
this.view_panel.scrollTop <
|
|
265
|
-
this.view_panel.scrollHeight -
|
|
266
|
-
this.view_panel_rect.height -
|
|
267
|
-
this.options.scrolling_step_length &&
|
|
268
|
-
(this.view_panel.scrollBy(0, this.options.scrolling_step_length),
|
|
269
|
-
(this.offset_y -= this.options.scrolling_step_length / e.zoom_current)),
|
|
270
|
-
t.clientX - this.view_panel_rect.left < this.options.scrolling_trigger_width &&
|
|
271
|
-
this.view_panel.scrollLeft > this.options.scrolling_step_length
|
|
272
|
-
? (this.view_panel.scrollBy(-this.options.scrolling_step_length, 0),
|
|
273
|
-
(this.offset_x += this.options.scrolling_step_length / e.zoom_current))
|
|
274
|
-
: this.view_panel_rect.right - t.clientX <
|
|
275
|
-
this.options.scrolling_trigger_width &&
|
|
276
|
-
this.view_panel.scrollLeft <
|
|
277
|
-
this.view_panel.scrollWidth -
|
|
278
|
-
this.view_panel_rect.width -
|
|
279
|
-
this.options.scrolling_step_length &&
|
|
280
|
-
(this.view_panel.scrollBy(this.options.scrolling_step_length, 0),
|
|
281
|
-
(this.offset_x -= this.options.scrolling_step_length / e.zoom_current)),
|
|
282
|
-
(this.shadow.style.left = i + 'px'),
|
|
283
|
-
(this.shadow.style.top = s + 'px'),
|
|
284
|
-
n();
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
dragend(t) {
|
|
288
|
-
if (this.jm.get_editable()) {
|
|
289
|
-
if ((this.view_draggable && this.jm.enable_view_draggable(), this.capture)) {
|
|
290
|
-
if (
|
|
291
|
-
(0 != this.hlookup_delay &&
|
|
292
|
-
(o.w.clearTimeout(this.hlookup_delay),
|
|
293
|
-
(this.hlookup_delay = 0),
|
|
294
|
-
this.clear_lines()),
|
|
295
|
-
0 != this.hlookup_timer &&
|
|
296
|
-
(o.w.clearInterval(this.hlookup_timer),
|
|
297
|
-
(this.hlookup_timer = 0),
|
|
298
|
-
this.clear_lines()),
|
|
299
|
-
this.moved)
|
|
300
|
-
) {
|
|
301
|
-
var e = this.active_node,
|
|
302
|
-
i = this.target_node,
|
|
303
|
-
s = this.target_direct;
|
|
304
|
-
this.move_node(e, i, s);
|
|
305
|
-
}
|
|
306
|
-
this.hide_shadow();
|
|
307
|
-
}
|
|
308
|
-
(this.view_panel_rect = null), (this.moved = !1), (this.capture = !1);
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
find_node_element(t) {
|
|
312
|
-
return t === this.jm.view.e_nodes ||
|
|
313
|
-
t === this.jm.view.e_panel ||
|
|
314
|
-
t === this.jm.view.container
|
|
315
|
-
? null
|
|
316
|
-
: 'jmnode' === t.tagName.toLowerCase()
|
|
317
|
-
? t
|
|
318
|
-
: this.find_node_element(t.parentNode);
|
|
319
|
-
}
|
|
320
|
-
lookup_target_node() {
|
|
321
|
-
let t = this.shadow.offsetLeft,
|
|
322
|
-
e = this.shadow.offsetTop;
|
|
323
|
-
if (t === this.shadow_p_x && e === this.shadow_p_y) return;
|
|
324
|
-
(this.shadow_p_x = t), (this.shadow_p_y = e);
|
|
325
|
-
let i =
|
|
326
|
-
this.shadow_p_x + this.shadow_w / 2 >= this.get_root_x()
|
|
327
|
-
? s.default.direction.right
|
|
328
|
-
: s.default.direction.left,
|
|
329
|
-
o = this.lookup_overlapping_node_parent(i) || this.lookup_close_node(i);
|
|
330
|
-
if (o) {
|
|
331
|
-
let t = this.calc_point_of_node(o, i),
|
|
332
|
-
e = s.default.node.inherited(this.active_node, o);
|
|
333
|
-
this.magnet_shadow(t.sp, t.np, e), (this.target_node = o), (this.target_direct = i);
|
|
334
|
-
}
|
|
335
|
-
}
|
|
336
|
-
get_root_x() {
|
|
337
|
-
let t = this.jm.get_root(),
|
|
338
|
-
e = t.get_location(),
|
|
339
|
-
i = t.get_size();
|
|
340
|
-
return e.x + i.w / 2;
|
|
341
|
-
}
|
|
342
|
-
lookup_overlapping_node_parent(t) {
|
|
343
|
-
let e = this.shadow.getBoundingClientRect(),
|
|
344
|
-
i = e.x + (e.width * (1 - t)) / 2,
|
|
345
|
-
s = (this.jm.options.layout.hspace + this.jm.options.layout.pspace) * t,
|
|
346
|
-
o = e.height,
|
|
347
|
-
n = [
|
|
348
|
-
[i, e.y],
|
|
349
|
-
[i, e.y + o / 2],
|
|
350
|
-
[i, e.y + o],
|
|
351
|
-
[i + s / 2, e.y],
|
|
352
|
-
[i + s / 2, e.y + o / 2],
|
|
353
|
-
[i + s / 2, e.y + o],
|
|
354
|
-
[i + s, e.y],
|
|
355
|
-
[i + s, e.y + o / 2],
|
|
356
|
-
[i + s, e.y + o],
|
|
357
|
-
];
|
|
358
|
-
for (const t of n) {
|
|
359
|
-
let e = this.lookup_node_parent_by_location(t[0], t[1]);
|
|
360
|
-
if (e) return e;
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
lookup_node_parent_by_location(t, e) {
|
|
364
|
-
return o.d
|
|
365
|
-
.elementsFromPoint(t, e)
|
|
366
|
-
.filter(
|
|
367
|
-
t =>
|
|
368
|
-
'JMNODE' === t.tagName &&
|
|
369
|
-
t.className !== this.options.shadow_node_class_name
|
|
370
|
-
)
|
|
371
|
-
.map(t => this.jm.view.get_binded_nodeid(t))
|
|
372
|
-
.map(t => t && this.jm.mind.nodes[t])
|
|
373
|
-
.map(t => t && t.parent)
|
|
374
|
-
.find(t => t);
|
|
375
|
-
}
|
|
376
|
-
lookup_close_node(t) {
|
|
377
|
-
return Object.values(this.jm.mind.nodes)
|
|
378
|
-
.filter(e => e.direction == t || e.isroot)
|
|
379
|
-
.filter(t => this.jm.layout.is_visible(t))
|
|
380
|
-
.filter(e => this.shadow_on_target_side(e, t))
|
|
381
|
-
.map(e => ({ node: e, distance: this.shadow_to_node(e, t) }))
|
|
382
|
-
.reduce((t, e) => (t.distance < e.distance ? t : e), {
|
|
383
|
-
node: this.jm.get_root(),
|
|
384
|
-
distance: Number.MAX_VALUE,
|
|
385
|
-
}).node;
|
|
386
|
-
}
|
|
387
|
-
shadow_on_target_side(t, e) {
|
|
388
|
-
return (
|
|
389
|
-
(e == s.default.direction.right && this.shadow_to_right_of_node(t) > 0) ||
|
|
390
|
-
(e == s.default.direction.left && this.shadow_to_left_of_node(t) > 0)
|
|
391
|
-
);
|
|
392
|
-
}
|
|
393
|
-
shadow_to_right_of_node(t) {
|
|
394
|
-
return this.shadow_p_x - t.get_location().x - t.get_size().w;
|
|
395
|
-
}
|
|
396
|
-
shadow_to_left_of_node(t) {
|
|
397
|
-
return t.get_location().x - this.shadow_p_x - this.shadow_w;
|
|
398
|
-
}
|
|
399
|
-
shadow_to_base_line_of_node(t) {
|
|
400
|
-
return this.shadow_p_y + this.shadow_h / 2 - t.get_location().y - t.get_size().h / 2;
|
|
401
|
-
}
|
|
402
|
-
shadow_to_node(t, e) {
|
|
403
|
-
return (
|
|
404
|
-
(e === s.default.direction.right
|
|
405
|
-
? Math.abs(this.shadow_to_right_of_node(t))
|
|
406
|
-
: Math.abs(this.shadow_to_left_of_node(t))) +
|
|
407
|
-
Math.abs(this.shadow_to_base_line_of_node(t))
|
|
408
|
-
);
|
|
409
|
-
}
|
|
410
|
-
calc_point_of_node(t, e) {
|
|
411
|
-
let i = t.get_size(),
|
|
412
|
-
s = t.get_location(),
|
|
413
|
-
o = t.isroot
|
|
414
|
-
? s.x + i.w / 2
|
|
415
|
-
: s.x + (i.w * (1 + e)) / 2 + this.options.line_width * e,
|
|
416
|
-
n = s.y + i.h / 2;
|
|
417
|
-
return {
|
|
418
|
-
sp: {
|
|
419
|
-
x:
|
|
420
|
-
this.shadow_p_x +
|
|
421
|
-
(this.shadow_w * (1 - e)) / 2 -
|
|
422
|
-
this.options.line_width * e,
|
|
423
|
-
y: this.shadow_p_y + this.shadow_h / 2,
|
|
424
|
-
},
|
|
425
|
-
np: { x: o, y: n },
|
|
426
|
-
};
|
|
427
|
-
}
|
|
428
|
-
move_node(t, e, i) {
|
|
429
|
-
var o = this.shadow.offsetTop;
|
|
430
|
-
if (e && t && !s.default.node.inherited(t, e)) {
|
|
431
|
-
if (this.options.validate_drag && 'function' == typeof this.options.validate_drag) {
|
|
432
|
-
if (!this.options.validate_drag(t, e))
|
|
433
|
-
return (
|
|
434
|
-
(this.active_node = null),
|
|
435
|
-
(this.target_node = null),
|
|
436
|
-
void (this.target_direct = null)
|
|
437
|
-
);
|
|
438
|
-
}
|
|
439
|
-
for (
|
|
440
|
-
var n = e.children,
|
|
441
|
-
h = n.length,
|
|
442
|
-
l = null,
|
|
443
|
-
a = Number.MAX_VALUE,
|
|
444
|
-
_ = null,
|
|
445
|
-
r = '_last_';
|
|
446
|
-
h--;
|
|
447
|
-
|
|
448
|
-
)
|
|
449
|
-
if ((l = n[h]).direction == i && l.id != t.id) {
|
|
450
|
-
var d = l.get_location().y - o;
|
|
451
|
-
d > 0 && d < a && ((a = d), (_ = l), (r = '_first_'));
|
|
452
|
-
}
|
|
453
|
-
_ && (r = _.id), this.jm.move_node(t.id, r, e.id, i);
|
|
454
|
-
}
|
|
455
|
-
(this.active_node = null), (this.target_node = null), (this.target_direct = null);
|
|
456
|
-
}
|
|
457
|
-
jm_event_handle(t, e) {
|
|
458
|
-
t === s.default.event_type.resize && this.resize();
|
|
459
|
-
}
|
|
460
|
-
}
|
|
461
|
-
const a = new s.default.plugin('draggable_node', function (t, e) {
|
|
462
|
-
var i = new l(t, e);
|
|
463
|
-
i.init(),
|
|
464
|
-
t.add_event_listener(function (t, e) {
|
|
465
|
-
i.jm_event_handle.call(i, t, e);
|
|
466
|
-
});
|
|
467
|
-
});
|
|
468
|
-
s.default.register_plugin(a),
|
|
469
|
-
(t.DraggableNode = l),
|
|
470
|
-
(t.default = l),
|
|
471
|
-
(t.draggable_plugin = a),
|
|
472
|
-
Object.defineProperty(t, '__esModule', { value: !0 });
|
|
473
|
-
});
|
|
2
|
+
* @license BSD-3-Clause
|
|
3
|
+
* @copyright 2014-2025 hizzgdev@163.com
|
|
4
|
+
*
|
|
5
|
+
* Project Home:
|
|
6
|
+
* https://github.com/hizzgdev/jsmind/
|
|
7
|
+
*/
|
|
8
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@umbraci/jsmind")):"function"==typeof define&&define.amd?define(["exports","@umbraci/jsmind"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).jsMindDraggableNode={},t.jsMind)}(this,function(t,e){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=i(e);"function"!=typeof String.prototype.startsWith&&(String.prototype.startsWith=function(t){return this.slice(0,t.length)===t});class o{static instanceName="";static preload=!1;constructor({jm:t,pluginOpt:e}){this.jm=t,this.options=e||{}}beforePluginRemove(){}beforePluginDestroy(){this.beforePluginRemove()}}if(!s.default)throw new Error("jsMind is not defined");const n=s.default.$,h="getSelection"in n.w?function(){n.w.getSelection().removeAllRanges()}:function(){n.d.selection.empty()},l={line_width:5,line_color:"rgba(0,0,0,0.3)",line_color_invalid:"rgba(255,51,51,0.6)",lookup_delay:200,lookup_interval:100,scrolling_trigger_width:20,scrolling_step_length:10,shadow_node_class_name:"jsmind-draggable-shadow-node"};class a{constructor(t,e){var i={};s.default.util.json.merge(i,l),s.default.util.json.merge(i,e),this.version="0.4.0",this.jm=t,this.options=i,this.is_svg_engine="svg"===t.view.opts.engine,this.e_canvas=null,this.canvas_ctx=null,this.helper_line=null,this.shadow=null,this.shadow_p_x=0,this.shadow_p_y=0,this.shadow_w=0,this.shadow_h=0,this.active_node=null,this.target_node=null,this.target_direct=null,this.client_w=0,this.client_h=0,this.offset_x=0,this.offset_y=0,this.hlookup_delay=0,this.hlookup_timer=0,this.capture=!1,this.moved=!1,this.canvas_draggable=t.get_view_draggable(),this.view_panel=t.view.e_panel,this.view_panel_rect=null}init(){this.create_canvas(),this.create_shadow(),this.event_bind()}resize(){this.jm.view.e_nodes.appendChild(this.shadow),this.is_svg_engine?(this.e_canvas.setAttribute("width",this.jm.view.size.w),this.e_canvas.setAttribute("height",this.jm.view.size.h)):(this.e_canvas.width=this.jm.view.size.w,this.e_canvas.height=this.jm.view.size.h)}create_canvas(){if(this.is_svg_engine){var t=this._create_svg_element("svg");t.setAttribute("class","jsmind-draggable-helper"),t.setAttribute("style","position: absolute; top: 0; left: 0; pointer-events: none;"),this.jm.view.e_panel.appendChild(t),this.e_canvas=t}else{var e=n.c("canvas");this.jm.view.e_panel.appendChild(e);var i=e.getContext("2d");this.e_canvas=e,this.canvas_ctx=i}}_create_svg_element(t){return n.d.createElementNS("http://www.w3.org/2000/svg",t)}create_shadow(){var t=n.c("jmnode");t.style.visibility="hidden",t.style.zIndex="3",t.style.cursor="move",t.style.opacity="0.7",t.className=this.options.shadow_node_class_name,this.shadow=t}reset_shadow(t){var e=this.shadow.style,i=t.style,s=n.w.getComputedStyle(t);this.shadow.innerHTML=t.innerHTML;["left","top","width","height","backgroundImage","backgroundSize","transform"].forEach(t=>{e[t]=i[t]});["whiteSpace","wordBreak","overflowWrap","maxWidth"].forEach(t=>{e[t]=i[t]||s[t]}),this.shadow_w=this.shadow.clientWidth,this.shadow_h=this.shadow.clientHeight}show_shadow(){this.moved||(this.shadow.style.visibility="visible")}hide_shadow(){this.shadow.style.visibility="hidden"}magnet_shadow(t,e,i){this.clear_lines();var s=i?this.options.line_color_invalid:this.options.line_color;this.is_svg_engine?this.svg_draw_line(t.x,t.y,e.x,e.y,s):(this.canvas_ctx.lineWidth=this.options.line_width,this.canvas_ctx.strokeStyle=s,this.canvas_ctx.lineCap="round",this.canvas_lineto(t.x,t.y,e.x,e.y))}clear_lines(){this.is_svg_engine?this.helper_line&&this.helper_line.parentNode&&(this.e_canvas.removeChild(this.helper_line),this.helper_line=null):this.canvas_ctx.clearRect(0,0,this.jm.view.size.w,this.jm.view.size.h)}canvas_lineto(t,e,i,s){this.canvas_ctx.beginPath(),this.canvas_ctx.moveTo(t,e),this.canvas_ctx.lineTo(i,s),this.canvas_ctx.stroke()}svg_draw_line(t,e,i,s,o){this.helper_line=this._create_svg_element("path"),this.helper_line.setAttribute("stroke",o),this.helper_line.setAttribute("stroke-width",this.options.line_width),this.helper_line.setAttribute("fill","transparent"),this.helper_line.setAttribute("stroke-linecap","round"),this._svg_bezier_to(this.helper_line,t,e,i,s),this.e_canvas.appendChild(this.helper_line)}_svg_bezier_to(t,e,i,s,o){t.setAttribute("d","M "+e+" "+i+" C "+(e+2*(s-e)/3)+" "+i+", "+e+" "+o+", "+s+" "+o)}event_bind(){var t=this,e=this.jm.view.container;n.on(e,"mousedown",function(e){0===e.button&&t.dragstart.call(t,e)}),n.on(e,"mousemove",function(e){0===e.movementX&&0===e.movementY||t.drag.call(t,e)}),n.on(e,"mouseup",function(e){t.dragend.call(t,e)}),n.on(e,"touchstart",function(e){t.dragstart.call(t,e)}),n.on(e,"touchmove",function(e){t.drag.call(t,e)}),n.on(e,"touchend",function(e){t.dragend.call(t,e)})}dragstart(t){if(this.jm.get_editable()&&!this.capture){var e=this.jm.view;if(!e.is_editing()){this.active_node=null,this.view_draggable=this.jm.get_view_draggable();var i=this.find_node_element(t.target);if(i){this.view_draggable&&this.jm.disable_view_draggable();var s=e.get_binded_nodeid(i);if(s){var o=this.jm.get_node(s);if(!o.isroot){if(o.data&&!1===o.data.draggable)return;this.reset_shadow(i),this.view_panel_rect=this.view_panel.getBoundingClientRect(),this.active_node=o,this.offset_x=(t.clientX||t.touches[0].clientX)/e.zoom_current-i.offsetLeft,this.offset_y=(t.clientY||t.touches[0].clientY)/e.zoom_current-i.offsetTop,this.client_hw=Math.floor(i.clientWidth/2),this.client_hh=Math.floor(i.clientHeight/2),0!=this.hlookup_delay&&n.w.clearTimeout(this.hlookup_delay),0!=this.hlookup_timer&&n.w.clearInterval(this.hlookup_timer);var h=this;this.hlookup_delay=n.w.setTimeout(function(){h.hlookup_delay=0,h.hlookup_timer=n.w.setInterval(function(){h.lookup_target_node.call(h)},h.options.lookup_interval)},this.options.lookup_delay),h.capture=!0}}}}}}drag(t){if(this.jm.get_editable()&&this.capture){t.preventDefault(),this.show_shadow(),this.moved=!0,h();var e=this.jm.view,i=(t.clientX||t.touches[0].clientX)/e.zoom_current-this.offset_x,s=(t.clientY||t.touches[0].clientY)/e.zoom_current-this.offset_y;t.clientY-this.view_panel_rect.top<this.options.scrolling_trigger_width&&this.view_panel.scrollTop>this.options.scrolling_step_length?(this.view_panel.scrollBy(0,-this.options.scrolling_step_length),this.offset_y+=this.options.scrolling_step_length/e.zoom_current):this.view_panel_rect.bottom-t.clientY<this.options.scrolling_trigger_width&&this.view_panel.scrollTop<this.view_panel.scrollHeight-this.view_panel_rect.height-this.options.scrolling_step_length&&(this.view_panel.scrollBy(0,this.options.scrolling_step_length),this.offset_y-=this.options.scrolling_step_length/e.zoom_current),t.clientX-this.view_panel_rect.left<this.options.scrolling_trigger_width&&this.view_panel.scrollLeft>this.options.scrolling_step_length?(this.view_panel.scrollBy(-this.options.scrolling_step_length,0),this.offset_x+=this.options.scrolling_step_length/e.zoom_current):this.view_panel_rect.right-t.clientX<this.options.scrolling_trigger_width&&this.view_panel.scrollLeft<this.view_panel.scrollWidth-this.view_panel_rect.width-this.options.scrolling_step_length&&(this.view_panel.scrollBy(this.options.scrolling_step_length,0),this.offset_x-=this.options.scrolling_step_length/e.zoom_current),this.shadow.style.left=i+"px",this.shadow.style.top=s+"px",h()}}dragend(t){if(this.jm.get_editable()){if(this.view_draggable&&this.jm.enable_view_draggable(),this.capture){if(0!=this.hlookup_delay&&(n.w.clearTimeout(this.hlookup_delay),this.hlookup_delay=0,this.clear_lines()),0!=this.hlookup_timer&&(n.w.clearInterval(this.hlookup_timer),this.hlookup_timer=0,this.clear_lines()),this.moved){var e=this.active_node,i=this.target_node,s=this.target_direct;this.move_node(e,i,s)}this.hide_shadow()}this.view_panel_rect=null,this.moved=!1,this.capture=!1}}find_node_element(t){return t===this.jm.view.e_nodes||t===this.jm.view.e_panel||t===this.jm.view.container?null:"jmnode"===t.tagName.toLowerCase()?t:this.find_node_element(t.parentNode)}lookup_target_node(){let t=this.shadow.offsetLeft,e=this.shadow.offsetTop;if(t===this.shadow_p_x&&e===this.shadow_p_y)return;this.shadow_p_x=t,this.shadow_p_y=e;let i=this.shadow_p_x+this.shadow_w/2>=this.get_root_x()?s.default.direction.right:s.default.direction.left,o=this.lookup_overlapping_node_parent(i)||this.lookup_close_node(i);if(o){let t=this.calc_point_of_node(o,i),e=s.default.node.inherited(this.active_node,o);this.magnet_shadow(t.sp,t.np,e),this.target_node=o,this.target_direct=i}}get_root_x(){let t=this.jm.get_root(),e=t.get_location(),i=t.get_size();return e.x+i.w/2}lookup_overlapping_node_parent(t){let e=this.shadow.getBoundingClientRect(),i=e.x+e.width*(1-t)/2,s=(this.jm.options.layout.hspace+this.jm.options.layout.pspace)*t,o=e.height,n=[[i,e.y],[i,e.y+o/2],[i,e.y+o],[i+s/2,e.y],[i+s/2,e.y+o/2],[i+s/2,e.y+o],[i+s,e.y],[i+s,e.y+o/2],[i+s,e.y+o]];for(const t of n){let e=this.lookup_node_parent_by_location(t[0],t[1]);if(e)return e}}lookup_node_parent_by_location(t,e){return n.d.elementsFromPoint(t,e).filter(t=>"JMNODE"===t.tagName&&t.className!==this.options.shadow_node_class_name).map(t=>this.jm.view.get_binded_nodeid(t)).map(t=>t&&this.jm.mind.nodes[t]).map(t=>t&&t.parent).find(t=>t)}lookup_close_node(t){return Object.values(this.jm.mind.nodes).filter(e=>e.direction==t||e.isroot).filter(t=>this.jm.layout.is_visible(t)).filter(e=>this.shadow_on_target_side(e,t)).map(e=>({node:e,distance:this.shadow_to_node(e,t)})).reduce((t,e)=>t.distance<e.distance?t:e,{node:this.jm.get_root(),distance:Number.MAX_VALUE}).node}shadow_on_target_side(t,e){return e==s.default.direction.right&&this.shadow_to_right_of_node(t)>0||e==s.default.direction.left&&this.shadow_to_left_of_node(t)>0}shadow_to_right_of_node(t){return this.shadow_p_x-t.get_location().x-t.get_size().w}shadow_to_left_of_node(t){return t.get_location().x-this.shadow_p_x-this.shadow_w}shadow_to_base_line_of_node(t){return this.shadow_p_y+this.shadow_h/2-t.get_location().y-t.get_size().h/2}shadow_to_node(t,e){return(e===s.default.direction.right?Math.abs(this.shadow_to_right_of_node(t)):Math.abs(this.shadow_to_left_of_node(t)))+Math.abs(this.shadow_to_base_line_of_node(t))}calc_point_of_node(t,e){let i=t.get_size(),s=t.get_location(),o=t.isroot?s.x+i.w/2:s.x+i.w*(1+e)/2+this.options.line_width*e,n=s.y+i.h/2;return{sp:{x:this.shadow_p_x+this.shadow_w*(1-e)/2-this.options.line_width*e,y:this.shadow_p_y+this.shadow_h/2},np:{x:o,y:n}}}move_node(t,e,i){var o=this.shadow.offsetTop;if(e&&t&&!s.default.node.inherited(t,e)){if(this.options.validate_drag&&"function"==typeof this.options.validate_drag){if(!this.options.validate_drag(t,e))return this.active_node=null,this.target_node=null,void(this.target_direct=null)}for(var n=e.children,h=n.length,l=null,a=Number.MAX_VALUE,_=null,r="_last_";h--;)if((l=n[h]).direction==i&&l.id!=t.id){var d=l.get_location().y-o;d>0&&d<a&&(a=d,_=l,r="_first_")}_&&(r=_.id),this.jm.move_node(t.id,r,e.id,i)}this.active_node=null,this.target_node=null,this.target_direct=null}jm_event_handle(t,e){t===s.default.event_type.resize&&this.resize()}}class _ extends o{static instanceName="draggable";static preload=!1;constructor({jm:t,pluginOpt:e}){super({jm:t,pluginOpt:e}),this.draggable=new a(t,e),this.draggable.init(),this._eventHandle=(t,e)=>{this.draggable.jm_event_handle(t,e)},t.add_event_listener(this._eventHandle),t.draggable=this.draggable}beforePluginRemove(){delete this.jm.draggable}}s.default.usePlugin(_),t.DraggableNode=a,t.DraggableNodePlugin=_,t.default=a,Object.defineProperty(t,"__esModule",{value:!0})});
|
|
474
9
|
//# sourceMappingURL=jsmind.draggable-node.js.map
|