quickmock/src/pods/canvas/model/transformer.model.ts at 810ebd896a98c36f24b3f712573b41aa049bc1f1 · Lemoncode/quickmock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { ShapeType } from '@/core/model';

// Snap model
export const SNAP_THRESHOLD = 5;

export type SnapLines = {
  vertical: number[];
  horizontal: number[];
};

export type SnapType = 'center' | 'start' | 'end';

export interface SnapEdge {
  guide: number;
  offset: number;
  snapType: SnapType;
}

export type SnapEdges = {
  vertical: SnapEdge[];
  horizontal: SnapEdge[];
};

export type SnapLineSubset = {
  snapLine: number;
  diff: number;
  snap: SnapType;
  offset: number;
};

export type ClosestSnapLines = {
  vertical: SnapLineSubset | null;
  horizontal: SnapLineSubset | null;
};

export interface SelectionRect {
  x: number;
  y: number;
  width: number;
  height: number;
  visible: boolean;
}

export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
  switch (shapeType) {
    case 'label':
    case 'input':
    case 'combobox':
    case 'datepickerinput':
    case 'horizontalLine':
    case 'horizontalLineLow':
    case 'textScribbled':
    case 'listbox':
    case 'checkbox':
    case 'toggleswitch':
    case 'toggleLightDark':
    case 'progressbar':
    case 'timepickerinput':
    case 'radiobutton':
    case 'horizontal-menu':
    case 'breadcrumb':
    case 'heading1':
    case 'heading2':
    case 'heading3':
    case 'normaltext':
    case 'smalltext':
    case 'link':
    case 'horizontalScrollBar':
    case 'appBar':
    case 'loading-indicator':
    case 'buttonBar':
    case 'slider':
    case 'chip':
    case 'inputStepper':
      return ['middle-left', 'middle-right'];
    case 'verticalLine':
    case 'verticalScrollBar':
    case 'verticalLineLow':
      return ['top-center', 'bottom-center'];
    case 'circleLow':
      return [
        'top-left',
        'top-right',
        'bottom-left',
        'bottom-right',
        'top-center',
        'bottom-center',
      ];
    case 'icon':
    case 'multiple':
      return [];
    case 'image':
      return ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
    default:
      return [
        'top-left',
        'top-center',
        'top-right',
        'middle-left',
        'middle-right',
        'bottom-left',
        'bottom-center',
        'bottom-right',
      ];
  }
};