@idraw/core 0.4.0-beta.24 → 0.4.0-beta.26

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.
@@ -1,6 +1,6 @@
1
1
  import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEventMap, ViewScaleInfo, LoadItemMap, ModifyOptions } from '@idraw/types';
2
2
  export { eventChange } from './config';
3
- export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup } from './middleware/selector';
3
+ export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid } from './middleware/selector';
4
4
  export { MiddlewareScroller } from './middleware/scroller';
5
5
  export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
6
6
  export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
package/dist/esm/index.js CHANGED
@@ -14,7 +14,7 @@ import { Board } from '@idraw/board';
14
14
  import { createBoardContent, validateElements } from '@idraw/util';
15
15
  import { Cursor } from './lib/cursor';
16
16
  export { eventChange } from './config';
17
- export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup } from './middleware/selector';
17
+ export { MiddlewareSelector, middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid } from './middleware/selector';
18
18
  export { MiddlewareScroller } from './middleware/scroller';
19
19
  export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
20
20
  export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
@@ -15,6 +15,7 @@ export declare const keyGroupQueue: unique symbol;
15
15
  export declare const keyGroupQueueVertexesList: unique symbol;
16
16
  export declare const keyIsMoving: unique symbol;
17
17
  export declare const keyEnableSelectInGroup: unique symbol;
18
+ export declare const keyEnableSnapToGrid: unique symbol;
18
19
  export declare const keyDebugElemCenter: unique symbol;
19
20
  export declare const keyDebugStartVertical: unique symbol;
20
21
  export declare const keyDebugEndVertical: unique symbol;
@@ -32,3 +33,4 @@ export declare const referenceColor = "#f7276e";
32
33
  export declare const middlewareEventSelect: string;
33
34
  export declare const middlewareEventSelectClear: string;
34
35
  export declare const middlewareEventSelectInGroup: string;
36
+ export declare const middlewareEventSnapToGrid: string;
@@ -14,7 +14,8 @@ export const keySelectedReferenceYLines = Symbol(`${key}_selectedReferenceYLines
14
14
  export const keyGroupQueue = Symbol(`${key}_groupQueue`);
15
15
  export const keyGroupQueueVertexesList = Symbol(`${key}_groupQueueVertexesList`);
16
16
  export const keyIsMoving = Symbol(`${key}_isMoving`);
17
- export const keyEnableSelectInGroup = Symbol(`${key}_canSelectInGroup`);
17
+ export const keyEnableSelectInGroup = Symbol(`${key}_enableSelectInGroup`);
18
+ export const keyEnableSnapToGrid = Symbol(`${key}_enableSnapToGrid`);
18
19
  export const keyDebugElemCenter = Symbol(`${key}_debug_elemCenter`);
19
20
  export const keyDebugStartVertical = Symbol(`${key}_debug_startVertical`);
20
21
  export const keyDebugEndVertical = Symbol(`${key}_debug_endVertical`);
@@ -32,3 +33,4 @@ export const referenceColor = '#f7276e';
32
33
  export const middlewareEventSelect = '@middleware/select';
33
34
  export const middlewareEventSelectClear = '@middleware/select-clear';
34
35
  export const middlewareEventSelectInGroup = '@middleware/select-in-group';
36
+ export const middlewareEventSnapToGrid = '@middleware/snap-to-grid';
@@ -1,7 +1,7 @@
1
1
  import type { CoreEventMap } from '@idraw/types';
2
2
  import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
3
- import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
3
+ import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyGroupQueue, keySelectedElementList } from './config';
4
4
  export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
5
5
  export type { DeepSelectorSharedStorage, ActionType };
6
- export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup };
6
+ export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
7
7
  export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap>;
@@ -2,18 +2,19 @@ import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueV
2
2
  import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
3
3
  import { drawReferenceLines } from './draw-reference';
4
4
  import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
5
- import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, controllerSize } from './config';
5
+ import { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize } from './config';
6
6
  import { calcReferenceInfo } from './reference';
7
7
  import { middlewareEventTextEdit } from '../text-editor';
8
8
  import { eventChange } from '../../config';
9
9
  export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
10
- export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup };
10
+ export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup, middlewareEventSnapToGrid };
11
11
  export const MiddlewareSelector = (opts) => {
12
12
  const { viewer, sharer, boardContent, calculator, eventHub } = opts;
13
13
  const { overlayContext } = boardContent;
14
14
  let prevPoint = null;
15
15
  let inBusyMode = null;
16
16
  sharer.setSharedStorage(keyActionType, null);
17
+ sharer.setSharedStorage(keyEnableSnapToGrid, true);
17
18
  const getActiveElements = () => {
18
19
  return sharer.getSharedStorage(keySelectedElementList);
19
20
  };
@@ -131,6 +132,9 @@ export const MiddlewareSelector = (opts) => {
131
132
  clear();
132
133
  viewer.drawFrame();
133
134
  };
135
+ const setSnapToSnapCallback = (e) => {
136
+ sharer.setSharedStorage(keyEnableSnapToGrid, !!e.enable);
137
+ };
134
138
  const selectInGroupCallback = (e) => {
135
139
  sharer.setSharedStorage(keyEnableSelectInGroup, !!e.enable);
136
140
  };
@@ -140,11 +144,13 @@ export const MiddlewareSelector = (opts) => {
140
144
  eventHub.on(middlewareEventSelect, selectCallback);
141
145
  eventHub.on(middlewareEventSelectClear, selectClearCallback);
142
146
  eventHub.on(middlewareEventSelectInGroup, selectInGroupCallback);
147
+ eventHub.on(middlewareEventSnapToGrid, setSnapToSnapCallback);
143
148
  },
144
149
  disuse() {
145
150
  eventHub.off(middlewareEventSelect, selectCallback);
146
151
  eventHub.off(middlewareEventSelectClear, selectClearCallback);
147
152
  eventHub.off(middlewareEventSelectInGroup, selectInGroupCallback);
153
+ eventHub.off(middlewareEventSnapToGrid, setSnapToSnapCallback);
148
154
  },
149
155
  hover: (e) => {
150
156
  var _a, _b, _c, _d, _e;
@@ -319,33 +325,36 @@ export const MiddlewareSelector = (opts) => {
319
325
  const resizeType = sharer.getSharedStorage(keyResizeType);
320
326
  const actionType = sharer.getSharedStorage(keyActionType);
321
327
  const groupQueue = sharer.getSharedStorage(keyGroupQueue);
328
+ const enableSnapToGrid = sharer.getSharedStorage(keyEnableSnapToGrid);
322
329
  if (actionType === 'drag') {
323
330
  inBusyMode = 'drag';
324
331
  if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) !== true) {
325
332
  const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
326
333
  let totalMoveX = calculator.toGridNum(moveX / scale);
327
334
  let totalMoveY = calculator.toGridNum(moveY / scale);
328
- const referenceInfo = calcReferenceInfo(elems[0].uuid, {
329
- calculator,
330
- data,
331
- groupQueue,
332
- viewScaleInfo,
333
- viewSizeInfo
334
- });
335
- try {
336
- if (referenceInfo) {
337
- if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
338
- totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
339
- }
340
- if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
341
- totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
335
+ if (enableSnapToGrid === true) {
336
+ const referenceInfo = calcReferenceInfo(elems[0].uuid, {
337
+ calculator,
338
+ data,
339
+ groupQueue,
340
+ viewScaleInfo,
341
+ viewSizeInfo
342
+ });
343
+ try {
344
+ if (referenceInfo) {
345
+ if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
346
+ totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
347
+ }
348
+ if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
349
+ totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
350
+ }
351
+ sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
352
+ sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
342
353
  }
343
- sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
344
- sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
345
354
  }
346
- }
347
- catch (err) {
348
- console.error(err);
355
+ catch (err) {
356
+ console.error(err);
357
+ }
349
358
  }
350
359
  elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
351
360
  elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
@@ -553,7 +562,7 @@ export const MiddlewareSelector = (opts) => {
553
562
  viewer.drawFrame();
554
563
  },
555
564
  doubleClick(e) {
556
- var _a, _b, _c, _d, _e, _f;
565
+ var _a, _b, _c, _d, _e, _f, _g, _h;
557
566
  if (sharer.getSharedStorage(keyEnableSelectInGroup) === false) {
558
567
  return;
559
568
  }
@@ -571,11 +580,11 @@ export const MiddlewareSelector = (opts) => {
571
580
  return;
572
581
  }
573
582
  }
574
- else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text') {
583
+ else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text' && !((_f = (_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.operations) === null || _f === void 0 ? void 0 : _f.invisible)) {
575
584
  eventHub.trigger(middlewareEventTextEdit, {
576
585
  element: target.elements[0],
577
586
  groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
578
- position: getElementPositionFromList((_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.uuid, ((_f = sharer.getActiveStorage('data')) === null || _f === void 0 ? void 0 : _f.elements) || []),
587
+ position: getElementPositionFromList((_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage('data')) === null || _h === void 0 ? void 0 : _h.elements) || []),
579
588
  viewScaleInfo: sharer.getActiveViewScaleInfo()
580
589
  });
581
590
  }
@@ -598,6 +607,7 @@ export const MiddlewareSelector = (opts) => {
598
607
  const groupQueue = sharedStore[keyGroupQueue];
599
608
  const groupQueueVertexesList = sharedStore[keyGroupQueueVertexesList];
600
609
  const isMoving = sharedStore[keyIsMoving];
610
+ const enableSnapToGrid = sharedStore[keyEnableSnapToGrid];
601
611
  const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo };
602
612
  const selectedElementController = elem
603
613
  ? calcElementSizeController(elem, {
@@ -626,10 +636,12 @@ export const MiddlewareSelector = (opts) => {
626
636
  if (actionType === 'drag') {
627
637
  const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
628
638
  const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
629
- drawReferenceLines(overlayContext, {
630
- xLines,
631
- yLines
632
- });
639
+ if (enableSnapToGrid === true) {
640
+ drawReferenceLines(overlayContext, {
641
+ xLines,
642
+ yLines
643
+ });
644
+ }
633
645
  }
634
646
  }
635
647
  }
@@ -651,10 +663,12 @@ export const MiddlewareSelector = (opts) => {
651
663
  if (actionType === 'drag') {
652
664
  const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
653
665
  const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
654
- drawReferenceLines(overlayContext, {
655
- xLines,
656
- yLines
657
- });
666
+ if (enableSnapToGrid === true) {
667
+ drawReferenceLines(overlayContext, {
668
+ xLines,
669
+ yLines
670
+ });
671
+ }
658
672
  }
659
673
  }
660
674
  else if (actionType === 'area' && areaStart && areaEnd) {
@@ -1,5 +1,5 @@
1
1
  import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware, ViewRectVertexes, ElementSizeController, ElementPosition } from '@idraw/types';
2
- import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
2
+ import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
3
3
  export { Data, ElementType, Element, ElementSize, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware };
4
4
  export type ControllerStyle = ElementSize & {
5
5
  borderWidth: number;
@@ -35,6 +35,7 @@ export type DeepSelectorSharedStorage = {
35
35
  [keySelectedReferenceYLines]: Array<PointSize[]>;
36
36
  [keyIsMoving]: boolean | null;
37
37
  [keyEnableSelectInGroup]: boolean | null;
38
+ [keyEnableSnapToGrid]: boolean | null;
38
39
  [keyDebugElemCenter]: PointSize | null;
39
40
  [keyDebugEnd0]: PointSize | null;
40
41
  [keyDebugEndHorizontal]: PointSize | null;
@@ -1 +1 @@
1
- import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
1
+ import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
@@ -1,9 +1,9 @@
1
- import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
1
+ import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy } from '@idraw/util';
2
2
  export const middlewareEventTextEdit = '@middleware/text-edit';
3
3
  export const middlewareEventTextChange = '@middleware/text-change';
4
4
  const defaultElementDetail = getDefaultElementDetailConfig();
5
5
  export const MiddlewareTextEditor = (opts) => {
6
- const { eventHub, boardContent, viewer } = opts;
6
+ const { eventHub, boardContent, viewer, sharer } = opts;
7
7
  const canvas = boardContent.boardContext.canvas;
8
8
  const textarea = document.createElement('div');
9
9
  textarea.setAttribute('contenteditable', 'true');
@@ -26,8 +26,24 @@ export const MiddlewareTextEditor = (opts) => {
26
26
  resetCanvasWrapper();
27
27
  resetTextArea(e);
28
28
  mask.style.display = 'block';
29
+ if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
30
+ sharer.setActiveOverrideElemenentMap({
31
+ [activeElem.uuid]: {
32
+ operations: { invisible: true }
33
+ }
34
+ });
35
+ viewer.drawFrame();
36
+ }
29
37
  };
30
38
  const hideTextArea = () => {
39
+ if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
40
+ const map = sharer.getActiveOverrideElemenentMap();
41
+ if (map) {
42
+ delete map[activeElem.uuid];
43
+ }
44
+ sharer.setActiveOverrideElemenentMap(map);
45
+ viewer.drawFrame();
46
+ }
31
47
  mask.style.display = 'none';
32
48
  activeElem = null;
33
49
  activePosition = [];
@@ -116,11 +132,11 @@ export const MiddlewareTextEditor = (opts) => {
116
132
  textarea.style.resize = 'none';
117
133
  textarea.style.overflow = 'hidden';
118
134
  textarea.style.wordBreak = 'break-all';
119
- textarea.style.background = '#FFFFFF';
120
- textarea.style.color = '#333333';
135
+ textarea.style.background = 'transparent';
136
+ textarea.style.color = `${detail.color || '#333333'}`;
121
137
  textarea.style.fontSize = `${detail.fontSize * scale}px`;
122
- textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
123
- textarea.style.fontFamily = detail.fontFamily;
138
+ textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
139
+ textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
124
140
  textarea.style.fontWeight = `${detail.fontWeight}`;
125
141
  textarea.style.padding = '0';
126
142
  textarea.style.margin = '0';