@idraw/core 0.4.0-beta.10 → 0.4.0-beta.11

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.
Files changed (8) hide show
  1. package/dist/esm/index.d.ts +3 -0
  2. package/dist/esm/index.js +9 -0
  3. package/dist/esm/lib/cursor.d.ts +1 -10
  4. package/dist/esm/lib/cursor.js +126 -110
  5. package/dist/esm/middleware/text-editor/index.js +7 -4
  6. package/dist/index.global.js +228 -148
  7. package/dist/index.global.min.js +1 -1
  8. package/package.json +5 -5
package/dist/esm/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export { MiddlewareDragger } from './middleware/dragger';
8
8
  export declare class Core<E extends CoreEvent = CoreEvent> {
9
9
  #private;
10
10
  constructor(container: HTMLDivElement, opts: CoreOptions);
11
+ isDestroyed(): boolean;
11
12
  destroy(): void;
12
13
  use(middleware: BoardMiddleware<any, any>): void;
13
14
  disuse(middleware: BoardMiddleware<any, any>): void;
@@ -33,4 +34,6 @@ export declare class Core<E extends CoreEvent = CoreEvent> {
33
34
  offsetY: number;
34
35
  }): void;
35
36
  getLoadItemMap(): LoadItemMap;
37
+ onBoardWatcherEvents(): void;
38
+ offBoardWatcherEvents(): void;
36
39
  }
package/dist/esm/index.js CHANGED
@@ -48,6 +48,9 @@ export class Core {
48
48
  eventHub
49
49
  });
50
50
  }
51
+ isDestroyed() {
52
+ return __classPrivateFieldGet(this, _Core_board, "f").isDestroyed();
53
+ }
51
54
  destroy() {
52
55
  __classPrivateFieldGet(this, _Core_board, "f").destroy();
53
56
  __classPrivateFieldGet(this, _Core_canvas, "f").remove();
@@ -110,6 +113,12 @@ export class Core {
110
113
  getLoadItemMap() {
111
114
  return __classPrivateFieldGet(this, _Core_board, "f").getRenderer().getLoadItemMap();
112
115
  }
116
+ onBoardWatcherEvents() {
117
+ __classPrivateFieldGet(this, _Core_board, "f").onWatcherEvents();
118
+ }
119
+ offBoardWatcherEvents() {
120
+ __classPrivateFieldGet(this, _Core_board, "f").offWatcherEvents();
121
+ }
113
122
  }
114
123
  _Core_board = new WeakMap(), _Core_canvas = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {
115
124
  const container = __classPrivateFieldGet(this, _Core_container, "f");
package/dist/esm/lib/cursor.d.ts CHANGED
@@ -1,16 +1,7 @@
1
1
  import type { UtilEventEmitter, CoreEvent } from '@idraw/types';
2
2
  export declare class Cursor {
3
- private _eventHub;
4
- private _container;
5
- private _cursorType;
6
- private _resizeCursorBaseImage;
7
- private _cursorImageMap;
3
+ #private;
8
4
  constructor(container: HTMLDivElement, opts: {
9
5
  eventHub: UtilEventEmitter<CoreEvent>;
10
6
  });
11
- private _init;
12
- private _loadResizeCursorBaseImage;
13
- private _resetCursor;
14
- private _setCursorResize;
15
- private _appendRotateResizeImage;
16
7
  }
package/dist/esm/lib/cursor.js CHANGED
@@ -1,129 +1,145 @@
1
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
+ if (kind === "m") throw new TypeError("Private method is not writable");
3
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
+ };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
12
+ var _Cursor_instances, _Cursor_eventHub, _Cursor_container, _Cursor_cursorType, _Cursor_resizeCursorBaseImage, _Cursor_cursorImageMap, _Cursor_init, _Cursor_loadResizeCursorBaseImage, _Cursor_resetCursor, _Cursor_setCursorResize, _Cursor_appendRotateResizeImage;
1
13
  import { limitAngle, loadImage, parseAngleToRadian } from '@idraw/util';
2
14
  import { CURSOR, CURSOR_RESIZE, CURSOR_DRAG_DEFAULT, CURSOR_DRAG_ACTIVE } from './cursor-image';
3
15
  export class Cursor {
4
16
  constructor(container, opts) {
5
- this._cursorType = null;
6
- this._resizeCursorBaseImage = null;
7
- this._cursorImageMap = {
17
+ _Cursor_instances.add(this);
18
+ _Cursor_eventHub.set(this, void 0);
19
+ _Cursor_container.set(this, void 0);
20
+ _Cursor_cursorType.set(this, null);
21
+ _Cursor_resizeCursorBaseImage.set(this, null);
22
+ _Cursor_cursorImageMap.set(this, {
8
23
  auto: CURSOR,
9
24
  'drag-default': CURSOR_DRAG_DEFAULT,
10
25
  'drag-active': CURSOR_DRAG_ACTIVE,
11
26
  'rotate-0': CURSOR_RESIZE
12
- };
13
- this._container = container;
14
- this._eventHub = opts.eventHub;
15
- this._init();
16
- this._loadResizeCursorBaseImage();
17
- }
18
- _init() {
19
- const { _eventHub: eventHub } = this;
20
- this._resetCursor('auto');
21
- eventHub.on('cursor', (e) => {
22
- var _a;
23
- if (e.type === 'over-element' || !e.type) {
24
- this._resetCursor('auto');
25
- }
26
- else if (typeof e.type === 'string' && ((_a = e.type) === null || _a === void 0 ? void 0 : _a.startsWith('resize-'))) {
27
- this._setCursorResize(e);
28
- }
29
- else if (e.type === 'drag-default') {
30
- this._resetCursor('drag-default');
31
- }
32
- else if (e.type === 'drag-active') {
33
- this._resetCursor('drag-active');
34
- }
35
- else {
36
- this._resetCursor('auto');
37
- }
38
- });
39
- }
40
- _loadResizeCursorBaseImage() {
41
- loadImage(CURSOR_RESIZE)
42
- .then((img) => {
43
- this._resizeCursorBaseImage = img;
44
- })
45
- .catch((err) => {
46
- console.error(err);
47
27
  });
28
+ __classPrivateFieldSet(this, _Cursor_container, container, "f");
29
+ __classPrivateFieldSet(this, _Cursor_eventHub, opts.eventHub, "f");
30
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_init).call(this);
31
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_loadResizeCursorBaseImage).call(this);
48
32
  }
49
- _resetCursor(cursorKey) {
50
- if (this._cursorType === cursorKey) {
51
- return;
52
- }
53
- this._cursorType = cursorKey;
54
- const image = this._cursorImageMap[this._cursorType] || this._cursorImageMap['auto'];
55
- let offsetX = 0;
56
- let offsetY = 0;
57
- if (cursorKey.startsWith('rotate-') && this._cursorImageMap[this._cursorType]) {
58
- offsetX = 10;
59
- offsetY = 10;
60
- }
61
- this._container.style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
62
- }
63
- _setCursorResize(e) {
33
+ }
34
+ _Cursor_eventHub = new WeakMap(), _Cursor_container = new WeakMap(), _Cursor_cursorType = new WeakMap(), _Cursor_resizeCursorBaseImage = new WeakMap(), _Cursor_cursorImageMap = new WeakMap(), _Cursor_instances = new WeakSet(), _Cursor_init = function _Cursor_init() {
35
+ const eventHub = __classPrivateFieldGet(this, _Cursor_eventHub, "f");
36
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'default');
37
+ eventHub.on('cursor', (e) => {
64
38
  var _a;
65
- let totalAngle = 0;
66
- if (e.type === 'resize-top') {
67
- totalAngle += 0;
39
+ if (e.type === 'over-element' || !e.type) {
40
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'auto');
68
41
  }
69
- else if (e.type === 'resize-top-right') {
70
- totalAngle += 45;
42
+ else if (typeof e.type === 'string' && ((_a = e.type) === null || _a === void 0 ? void 0 : _a.startsWith('resize-'))) {
43
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_setCursorResize).call(this, e);
71
44
  }
72
- else if (e.type === 'resize-right') {
73
- totalAngle += 90;
45
+ else if (e.type === 'drag-default') {
46
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'drag-default');
74
47
  }
75
- else if (e.type === 'resize-bottom-right') {
76
- totalAngle += 135;
48
+ else if (e.type === 'drag-active') {
49
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'drag-active');
77
50
  }
78
- else if (e.type === 'resize-bottom') {
79
- totalAngle += 180;
51
+ else {
52
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, 'auto');
80
53
  }
81
- else if (e.type === 'resize-bottom-left') {
82
- totalAngle += 225;
83
- }
84
- else if (e.type === 'resize-left') {
85
- totalAngle += 270;
86
- }
87
- else if (e.type === 'resize-top-left') {
88
- totalAngle += 315;
89
- }
90
- totalAngle += limitAngle(((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.angle) || 0);
91
- if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
92
- e.groupQueue.forEach((group) => {
93
- totalAngle += limitAngle(group.angle || 0);
94
- });
95
- }
96
- totalAngle = limitAngle(totalAngle);
97
- const cursorKey = this._appendRotateResizeImage(totalAngle);
98
- this._resetCursor(cursorKey);
54
+ });
55
+ }, _Cursor_loadResizeCursorBaseImage = function _Cursor_loadResizeCursorBaseImage() {
56
+ loadImage(CURSOR_RESIZE)
57
+ .then((img) => {
58
+ __classPrivateFieldSet(this, _Cursor_resizeCursorBaseImage, img, "f");
59
+ })
60
+ .catch((err) => {
61
+ console.error(err);
62
+ });
63
+ }, _Cursor_resetCursor = function _Cursor_resetCursor(cursorKey) {
64
+ if (__classPrivateFieldGet(this, _Cursor_cursorType, "f") === cursorKey) {
65
+ return;
66
+ }
67
+ __classPrivateFieldSet(this, _Cursor_cursorType, cursorKey, "f");
68
+ const image = __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[__classPrivateFieldGet(this, _Cursor_cursorType, "f")] || __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")['auto'];
69
+ let offsetX = 0;
70
+ let offsetY = 0;
71
+ if (cursorKey.startsWith('rotate-') && __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[__classPrivateFieldGet(this, _Cursor_cursorType, "f")]) {
72
+ offsetX = 10;
73
+ offsetY = 10;
74
+ }
75
+ if (cursorKey === 'default') {
76
+ __classPrivateFieldGet(this, _Cursor_container, "f").style.cursor = 'default';
99
77
  }
100
- _appendRotateResizeImage(angle) {
101
- const key = `rotate-${angle}`;
102
- if (!this._cursorImageMap[key]) {
103
- const baseImage = this._resizeCursorBaseImage;
104
- if (baseImage) {
105
- const canvas = document.createElement('canvas');
106
- const w = baseImage.width;
107
- const h = baseImage.height;
108
- const center = {
109
- x: w / 2,
110
- y: h / 2
111
- };
112
- canvas.width = w;
113
- canvas.height = h;
114
- const ctx = canvas.getContext('2d');
115
- const radian = parseAngleToRadian(angle);
116
- ctx.translate(center.x, center.y);
117
- ctx.rotate(radian);
118
- ctx.translate(-center.x, -center.y);
119
- ctx.drawImage(baseImage, 0, 0, w, h);
120
- ctx.translate(center.x, center.y);
121
- ctx.rotate(-radian);
122
- ctx.translate(-center.x, -center.y);
123
- const base = canvas.toDataURL('image/png');
124
- this._cursorImageMap[key] = base;
125
- }
78
+ else {
79
+ __classPrivateFieldGet(this, _Cursor_container, "f").style.cursor = `image-set(url(${image})2x) ${offsetX} ${offsetY}, auto`;
80
+ }
81
+ }, _Cursor_setCursorResize = function _Cursor_setCursorResize(e) {
82
+ var _a;
83
+ let totalAngle = 0;
84
+ if (e.type === 'resize-top') {
85
+ totalAngle += 0;
86
+ }
87
+ else if (e.type === 'resize-top-right') {
88
+ totalAngle += 45;
89
+ }
90
+ else if (e.type === 'resize-right') {
91
+ totalAngle += 90;
92
+ }
93
+ else if (e.type === 'resize-bottom-right') {
94
+ totalAngle += 135;
95
+ }
96
+ else if (e.type === 'resize-bottom') {
97
+ totalAngle += 180;
98
+ }
99
+ else if (e.type === 'resize-bottom-left') {
100
+ totalAngle += 225;
101
+ }
102
+ else if (e.type === 'resize-left') {
103
+ totalAngle += 270;
104
+ }
105
+ else if (e.type === 'resize-top-left') {
106
+ totalAngle += 315;
107
+ }
108
+ totalAngle += limitAngle(((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.angle) || 0);
109
+ if (Array.isArray(e.groupQueue) && e.groupQueue.length > 0) {
110
+ e.groupQueue.forEach((group) => {
111
+ totalAngle += limitAngle(group.angle || 0);
112
+ });
113
+ }
114
+ totalAngle = limitAngle(totalAngle);
115
+ const cursorKey = __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_appendRotateResizeImage).call(this, totalAngle);
116
+ __classPrivateFieldGet(this, _Cursor_instances, "m", _Cursor_resetCursor).call(this, cursorKey);
117
+ }, _Cursor_appendRotateResizeImage = function _Cursor_appendRotateResizeImage(angle) {
118
+ const key = `rotate-${angle}`;
119
+ if (!__classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[key]) {
120
+ const baseImage = __classPrivateFieldGet(this, _Cursor_resizeCursorBaseImage, "f");
121
+ if (baseImage) {
122
+ const canvas = document.createElement('canvas');
123
+ const w = baseImage.width;
124
+ const h = baseImage.height;
125
+ const center = {
126
+ x: w / 2,
127
+ y: h / 2
128
+ };
129
+ canvas.width = w;
130
+ canvas.height = h;
131
+ const ctx = canvas.getContext('2d');
132
+ const radian = parseAngleToRadian(angle);
133
+ ctx.translate(center.x, center.y);
134
+ ctx.rotate(radian);
135
+ ctx.translate(-center.x, -center.y);
136
+ ctx.drawImage(baseImage, 0, 0, w, h);
137
+ ctx.translate(center.x, center.y);
138
+ ctx.rotate(-radian);
139
+ ctx.translate(-center.x, -center.y);
140
+ const base = canvas.toDataURL('image/png');
141
+ __classPrivateFieldGet(this, _Cursor_cursorImageMap, "f")[key] = base;
126
142
  }
127
- return key;
128
143
  }
129
- }
144
+ return key;
145
+ };
package/dist/esm/middleware/text-editor/index.js CHANGED
@@ -85,10 +85,10 @@ export const MiddlewareTextEditor = (opts) => {
85
85
  elemH = element.h * scale;
86
86
  }
87
87
  textarea.style.position = 'absolute';
88
- textarea.style.left = `${elemX}px`;
89
- textarea.style.top = `${elemY}px`;
90
- textarea.style.width = `${elemW}px`;
91
- textarea.style.height = `${elemH}px`;
88
+ textarea.style.left = `${elemX - 1}px`;
89
+ textarea.style.top = `${elemY - 1}px`;
90
+ textarea.style.width = `${elemW + 2}px`;
91
+ textarea.style.height = `${elemH + 2}px`;
92
92
  textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
93
93
  textarea.style.boxSizing = 'border-box';
94
94
  textarea.style.border = '1px solid #1973ba';
@@ -101,6 +101,9 @@ export const MiddlewareTextEditor = (opts) => {
101
101
  textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
102
102
  textarea.style.fontFamily = detail.fontFamily;
103
103
  textarea.style.fontWeight = `${detail.fontWeight}`;
104
+ textarea.style.padding = '0';
105
+ textarea.style.margin = '0';
106
+ textarea.style.outline = 'none';
104
107
  textarea.value = detail.text || '';
105
108
  parent.appendChild(textarea);
106
109
  };