@contrail/documents 1.0.72 → 1.0.74
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/lib/components/components.d.ts +269 -0
- package/lib/components/components.js +86 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.js +17 -0
- package/lib/document-action.d.ts +7 -0
- package/lib/document-action.js +10 -0
- package/lib/document-element-component-size-handler.d.ts +4 -0
- package/lib/document-element-component-size-handler.js +55 -0
- package/lib/document-element-factory.d.ts +12 -0
- package/lib/document-element-factory.js +76 -0
- package/lib/document-element-property-binding-handler.d.ts +5 -0
- package/lib/document-element-property-binding-handler.js +57 -0
- package/lib/index.d.ts +6 -0
- package/lib/index.js +22 -0
- package/lib/types/common.d.ts +69 -0
- package/lib/types/common.js +8 -0
- package/lib/types/data-object.d.ts +6 -0
- package/lib/types/data-object.js +2 -0
- package/lib/types/document-change.d.ts +13 -0
- package/lib/types/document-change.js +10 -0
- package/lib/types/document-element-event.d.ts +22 -0
- package/lib/types/document-element-event.js +2 -0
- package/lib/types/document-element-holder.d.ts +8 -0
- package/lib/types/document-element-holder.js +2 -0
- package/lib/types/document-element.d.ts +27 -0
- package/lib/types/document-element.js +2 -0
- package/lib/types/document.d.ts +23 -0
- package/lib/types/document.js +2 -0
- package/lib/types/element-transformation.d.ts +18 -0
- package/lib/types/element-transformation.js +2 -0
- package/lib/types/index.d.ts +8 -0
- package/lib/types/index.js +24 -0
- package/package.json +1 -1
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
import { BackgroundSizeType } from '../types';
|
|
2
|
+
import { Document } from '../types/document';
|
|
3
|
+
export interface ComponentDefinition {
|
|
4
|
+
slug?: string;
|
|
5
|
+
defaultTemplate: Document;
|
|
6
|
+
}
|
|
7
|
+
export declare const ITEM_VIEW_TEMPLATE: {
|
|
8
|
+
elements: ({
|
|
9
|
+
type: string;
|
|
10
|
+
size: {
|
|
11
|
+
width: number;
|
|
12
|
+
height: number;
|
|
13
|
+
};
|
|
14
|
+
style: {
|
|
15
|
+
background: {
|
|
16
|
+
size: BackgroundSizeType;
|
|
17
|
+
};
|
|
18
|
+
font?: undefined;
|
|
19
|
+
color?: undefined;
|
|
20
|
+
};
|
|
21
|
+
propertyBindings: {
|
|
22
|
+
url: string;
|
|
23
|
+
text?: undefined;
|
|
24
|
+
};
|
|
25
|
+
position?: undefined;
|
|
26
|
+
} | {
|
|
27
|
+
type: string;
|
|
28
|
+
position: {
|
|
29
|
+
x: number;
|
|
30
|
+
y: number;
|
|
31
|
+
};
|
|
32
|
+
size: {
|
|
33
|
+
height: number;
|
|
34
|
+
width: number;
|
|
35
|
+
};
|
|
36
|
+
style: {
|
|
37
|
+
font: {
|
|
38
|
+
size: number;
|
|
39
|
+
};
|
|
40
|
+
background?: undefined;
|
|
41
|
+
color?: undefined;
|
|
42
|
+
};
|
|
43
|
+
propertyBindings: {
|
|
44
|
+
text: string;
|
|
45
|
+
url?: undefined;
|
|
46
|
+
};
|
|
47
|
+
} | {
|
|
48
|
+
type: string;
|
|
49
|
+
position: {
|
|
50
|
+
x: number;
|
|
51
|
+
y: number;
|
|
52
|
+
};
|
|
53
|
+
size: {
|
|
54
|
+
height: number;
|
|
55
|
+
width: number;
|
|
56
|
+
};
|
|
57
|
+
style: {
|
|
58
|
+
font: {
|
|
59
|
+
size: number;
|
|
60
|
+
};
|
|
61
|
+
color: string;
|
|
62
|
+
background?: undefined;
|
|
63
|
+
};
|
|
64
|
+
propertyBindings: {
|
|
65
|
+
text: string;
|
|
66
|
+
url?: undefined;
|
|
67
|
+
};
|
|
68
|
+
})[];
|
|
69
|
+
};
|
|
70
|
+
export declare const ITEM_VIEW_TEMPLATE_V2: {
|
|
71
|
+
elements: ({
|
|
72
|
+
type: string;
|
|
73
|
+
size: {
|
|
74
|
+
width: number;
|
|
75
|
+
height: number;
|
|
76
|
+
};
|
|
77
|
+
style: {
|
|
78
|
+
background: {
|
|
79
|
+
size: BackgroundSizeType;
|
|
80
|
+
};
|
|
81
|
+
font?: undefined;
|
|
82
|
+
color?: undefined;
|
|
83
|
+
};
|
|
84
|
+
propertyBindings: {
|
|
85
|
+
url: string;
|
|
86
|
+
text?: undefined;
|
|
87
|
+
};
|
|
88
|
+
position?: undefined;
|
|
89
|
+
} | {
|
|
90
|
+
type: string;
|
|
91
|
+
position: {
|
|
92
|
+
x: number;
|
|
93
|
+
y: number;
|
|
94
|
+
};
|
|
95
|
+
size: {
|
|
96
|
+
height: number;
|
|
97
|
+
width: number;
|
|
98
|
+
};
|
|
99
|
+
style: {
|
|
100
|
+
font: {
|
|
101
|
+
size: number;
|
|
102
|
+
};
|
|
103
|
+
background?: undefined;
|
|
104
|
+
color?: undefined;
|
|
105
|
+
};
|
|
106
|
+
propertyBindings: {
|
|
107
|
+
text: string;
|
|
108
|
+
url?: undefined;
|
|
109
|
+
};
|
|
110
|
+
} | {
|
|
111
|
+
type: string;
|
|
112
|
+
position: {
|
|
113
|
+
x: number;
|
|
114
|
+
y: number;
|
|
115
|
+
};
|
|
116
|
+
size: {
|
|
117
|
+
height: number;
|
|
118
|
+
width: number;
|
|
119
|
+
};
|
|
120
|
+
style: {
|
|
121
|
+
font: {
|
|
122
|
+
size: number;
|
|
123
|
+
};
|
|
124
|
+
color: string;
|
|
125
|
+
background?: undefined;
|
|
126
|
+
};
|
|
127
|
+
propertyBindings: {
|
|
128
|
+
text: string;
|
|
129
|
+
url?: undefined;
|
|
130
|
+
};
|
|
131
|
+
})[];
|
|
132
|
+
};
|
|
133
|
+
export declare const ITEM_VIEW: {
|
|
134
|
+
slug: string;
|
|
135
|
+
defaultTemplate: {
|
|
136
|
+
elements: ({
|
|
137
|
+
type: string;
|
|
138
|
+
size: {
|
|
139
|
+
width: number;
|
|
140
|
+
height: number;
|
|
141
|
+
};
|
|
142
|
+
style: {
|
|
143
|
+
background: {
|
|
144
|
+
size: BackgroundSizeType;
|
|
145
|
+
};
|
|
146
|
+
font?: undefined;
|
|
147
|
+
color?: undefined;
|
|
148
|
+
};
|
|
149
|
+
propertyBindings: {
|
|
150
|
+
url: string;
|
|
151
|
+
text?: undefined;
|
|
152
|
+
};
|
|
153
|
+
position?: undefined;
|
|
154
|
+
} | {
|
|
155
|
+
type: string;
|
|
156
|
+
position: {
|
|
157
|
+
x: number;
|
|
158
|
+
y: number;
|
|
159
|
+
};
|
|
160
|
+
size: {
|
|
161
|
+
height: number;
|
|
162
|
+
width: number;
|
|
163
|
+
};
|
|
164
|
+
style: {
|
|
165
|
+
font: {
|
|
166
|
+
size: number;
|
|
167
|
+
};
|
|
168
|
+
background?: undefined;
|
|
169
|
+
color?: undefined;
|
|
170
|
+
};
|
|
171
|
+
propertyBindings: {
|
|
172
|
+
text: string;
|
|
173
|
+
url?: undefined;
|
|
174
|
+
};
|
|
175
|
+
} | {
|
|
176
|
+
type: string;
|
|
177
|
+
position: {
|
|
178
|
+
x: number;
|
|
179
|
+
y: number;
|
|
180
|
+
};
|
|
181
|
+
size: {
|
|
182
|
+
height: number;
|
|
183
|
+
width: number;
|
|
184
|
+
};
|
|
185
|
+
style: {
|
|
186
|
+
font: {
|
|
187
|
+
size: number;
|
|
188
|
+
};
|
|
189
|
+
color: string;
|
|
190
|
+
background?: undefined;
|
|
191
|
+
};
|
|
192
|
+
propertyBindings: {
|
|
193
|
+
text: string;
|
|
194
|
+
url?: undefined;
|
|
195
|
+
};
|
|
196
|
+
})[];
|
|
197
|
+
};
|
|
198
|
+
};
|
|
199
|
+
export declare const ITEM_VIEW_V2: {
|
|
200
|
+
slug: string;
|
|
201
|
+
defaultTemplate: {
|
|
202
|
+
elements: ({
|
|
203
|
+
type: string;
|
|
204
|
+
size: {
|
|
205
|
+
width: number;
|
|
206
|
+
height: number;
|
|
207
|
+
};
|
|
208
|
+
style: {
|
|
209
|
+
background: {
|
|
210
|
+
size: BackgroundSizeType;
|
|
211
|
+
};
|
|
212
|
+
font?: undefined;
|
|
213
|
+
color?: undefined;
|
|
214
|
+
};
|
|
215
|
+
propertyBindings: {
|
|
216
|
+
url: string;
|
|
217
|
+
text?: undefined;
|
|
218
|
+
};
|
|
219
|
+
position?: undefined;
|
|
220
|
+
} | {
|
|
221
|
+
type: string;
|
|
222
|
+
position: {
|
|
223
|
+
x: number;
|
|
224
|
+
y: number;
|
|
225
|
+
};
|
|
226
|
+
size: {
|
|
227
|
+
height: number;
|
|
228
|
+
width: number;
|
|
229
|
+
};
|
|
230
|
+
style: {
|
|
231
|
+
font: {
|
|
232
|
+
size: number;
|
|
233
|
+
};
|
|
234
|
+
background?: undefined;
|
|
235
|
+
color?: undefined;
|
|
236
|
+
};
|
|
237
|
+
propertyBindings: {
|
|
238
|
+
text: string;
|
|
239
|
+
url?: undefined;
|
|
240
|
+
};
|
|
241
|
+
} | {
|
|
242
|
+
type: string;
|
|
243
|
+
position: {
|
|
244
|
+
x: number;
|
|
245
|
+
y: number;
|
|
246
|
+
};
|
|
247
|
+
size: {
|
|
248
|
+
height: number;
|
|
249
|
+
width: number;
|
|
250
|
+
};
|
|
251
|
+
style: {
|
|
252
|
+
font: {
|
|
253
|
+
size: number;
|
|
254
|
+
};
|
|
255
|
+
color: string;
|
|
256
|
+
background?: undefined;
|
|
257
|
+
};
|
|
258
|
+
propertyBindings: {
|
|
259
|
+
text: string;
|
|
260
|
+
url?: undefined;
|
|
261
|
+
};
|
|
262
|
+
})[];
|
|
263
|
+
};
|
|
264
|
+
};
|
|
265
|
+
export declare class ComponentRegistry {
|
|
266
|
+
private static componentDefinitionMap;
|
|
267
|
+
static getComponentDefinition(slug: string): ComponentDefinition;
|
|
268
|
+
private static initMap;
|
|
269
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ComponentRegistry = exports.ITEM_VIEW_V2 = exports.ITEM_VIEW = exports.ITEM_VIEW_TEMPLATE_V2 = exports.ITEM_VIEW_TEMPLATE = void 0;
|
|
4
|
+
const types_1 = require("../types");
|
|
5
|
+
exports.ITEM_VIEW_TEMPLATE = {
|
|
6
|
+
elements: [{
|
|
7
|
+
type: "image",
|
|
8
|
+
size: { width: 125, height: 125 },
|
|
9
|
+
style: { background: { size: types_1.BackgroundSizeType.CONTAIN } },
|
|
10
|
+
propertyBindings: { url: 'thumbnail.downloadUrl' }
|
|
11
|
+
}, {
|
|
12
|
+
type: "text",
|
|
13
|
+
position: { x: 0, y: 126 },
|
|
14
|
+
size: { height: 25, width: 125 },
|
|
15
|
+
style: {
|
|
16
|
+
font: {
|
|
17
|
+
size: 8,
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
propertyBindings: { text: 'item.name' }
|
|
21
|
+
}, {
|
|
22
|
+
type: "text",
|
|
23
|
+
position: { x: 0, y: 151 },
|
|
24
|
+
size: { height: 25, width: 125 },
|
|
25
|
+
style: {
|
|
26
|
+
font: {
|
|
27
|
+
size: 8,
|
|
28
|
+
},
|
|
29
|
+
color: 'rgba(0,0,0,.5)',
|
|
30
|
+
},
|
|
31
|
+
propertyBindings: { text: 'item.optionName' }
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
};
|
|
35
|
+
exports.ITEM_VIEW_TEMPLATE_V2 = {
|
|
36
|
+
elements: [{
|
|
37
|
+
type: "image",
|
|
38
|
+
size: { width: 125, height: 125 },
|
|
39
|
+
style: { background: { size: types_1.BackgroundSizeType.CONTAIN } },
|
|
40
|
+
propertyBindings: { url: 'viewable.mediumViewableDownloadUrl' }
|
|
41
|
+
}, {
|
|
42
|
+
type: "text",
|
|
43
|
+
position: { x: 0, y: 126 },
|
|
44
|
+
size: { height: 25, width: 125 },
|
|
45
|
+
style: {
|
|
46
|
+
font: {
|
|
47
|
+
size: 8,
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
propertyBindings: { text: 'item.name' }
|
|
51
|
+
}, {
|
|
52
|
+
type: "text",
|
|
53
|
+
position: { x: 0, y: 151 },
|
|
54
|
+
size: { height: 25, width: 125 },
|
|
55
|
+
style: {
|
|
56
|
+
font: {
|
|
57
|
+
size: 8,
|
|
58
|
+
},
|
|
59
|
+
color: 'rgba(0,0,0,.5)',
|
|
60
|
+
},
|
|
61
|
+
propertyBindings: { text: 'item.optionName' }
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
};
|
|
65
|
+
exports.ITEM_VIEW = {
|
|
66
|
+
slug: 'item-view',
|
|
67
|
+
defaultTemplate: exports.ITEM_VIEW_TEMPLATE,
|
|
68
|
+
};
|
|
69
|
+
exports.ITEM_VIEW_V2 = {
|
|
70
|
+
slug: 'item-view-v2',
|
|
71
|
+
defaultTemplate: exports.ITEM_VIEW_TEMPLATE_V2,
|
|
72
|
+
};
|
|
73
|
+
class ComponentRegistry {
|
|
74
|
+
static getComponentDefinition(slug) {
|
|
75
|
+
if (!this.componentDefinitionMap) {
|
|
76
|
+
this.initMap();
|
|
77
|
+
}
|
|
78
|
+
return this.componentDefinitionMap.get(slug);
|
|
79
|
+
}
|
|
80
|
+
static initMap() {
|
|
81
|
+
this.componentDefinitionMap = new Map();
|
|
82
|
+
this.componentDefinitionMap.set('item-view', exports.ITEM_VIEW);
|
|
83
|
+
this.componentDefinitionMap.set('item-view-v2', exports.ITEM_VIEW_V2);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
exports.ComponentRegistry = ComponentRegistry;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./components"), exports);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Action } from '@contrail/actions';
|
|
2
|
+
import { DocumentChange } from './types';
|
|
3
|
+
export declare class DocumentAction extends Action {
|
|
4
|
+
changeDefinition: DocumentChange;
|
|
5
|
+
undoChangeDefinition: DocumentChange;
|
|
6
|
+
constructor(change: any, undoChange?: any);
|
|
7
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DocumentAction = void 0;
|
|
4
|
+
const actions_1 = require("@contrail/actions");
|
|
5
|
+
class DocumentAction extends actions_1.Action {
|
|
6
|
+
constructor(change, undoChange = null) {
|
|
7
|
+
super('document', change, undoChange);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
exports.DocumentAction = DocumentAction;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DocumentElementComponentSizeHandler = void 0;
|
|
4
|
+
class DocumentElementComponentSizeHandler {
|
|
5
|
+
static updateSizeAndPositionForPropertyElements(propertyElements) {
|
|
6
|
+
const newElements = [];
|
|
7
|
+
let lastYPosition = 0;
|
|
8
|
+
let width = 200;
|
|
9
|
+
const imageElements = propertyElements.filter(element => {
|
|
10
|
+
return element.type === 'image';
|
|
11
|
+
});
|
|
12
|
+
if (imageElements.length > 0) {
|
|
13
|
+
width = imageElements[0].size.width;
|
|
14
|
+
}
|
|
15
|
+
propertyElements.forEach((element) => {
|
|
16
|
+
var _a;
|
|
17
|
+
if (element.enabled === false) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
element.position = {
|
|
21
|
+
x: 0,
|
|
22
|
+
y: lastYPosition
|
|
23
|
+
};
|
|
24
|
+
lastYPosition = lastYPosition + this.getYMargin(element);
|
|
25
|
+
if (element.type === 'text') {
|
|
26
|
+
if (!((_a = element.style) === null || _a === void 0 ? void 0 : _a.font)) {
|
|
27
|
+
element.style = Object.assign(Object.assign({}, element.style), { font: { size: 8 } });
|
|
28
|
+
}
|
|
29
|
+
if (!(element === null || element === void 0 ? void 0 : element.size)) {
|
|
30
|
+
element.size = {};
|
|
31
|
+
}
|
|
32
|
+
element.size.height = element.style.font.size + 6;
|
|
33
|
+
}
|
|
34
|
+
element.size.width = width;
|
|
35
|
+
newElements.push(element);
|
|
36
|
+
});
|
|
37
|
+
return newElements;
|
|
38
|
+
}
|
|
39
|
+
static getYMargin(element) {
|
|
40
|
+
let marginY = 11;
|
|
41
|
+
if (element.type === 'image') {
|
|
42
|
+
marginY = element.size.height;
|
|
43
|
+
}
|
|
44
|
+
else if (element.type === 'text') {
|
|
45
|
+
if (element.size && element.size.height) {
|
|
46
|
+
marginY = element.size.height;
|
|
47
|
+
}
|
|
48
|
+
else if (element.style && element.style.font) {
|
|
49
|
+
marginY = element.style.font.size + 6;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
return marginY;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
exports.DocumentElementComponentSizeHandler = DocumentElementComponentSizeHandler;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ComponentDefinition } from './components/components';
|
|
2
|
+
import { DocumentElement } from './types/document-element';
|
|
3
|
+
export declare class DocumentElementFactory {
|
|
4
|
+
static initNewElement(type: string): DocumentElement;
|
|
5
|
+
static createTextElement(text: string, options?: DocumentElement): DocumentElement;
|
|
6
|
+
static createShapeElement(type: string, options?: DocumentElement): DocumentElement;
|
|
7
|
+
static createElement(type: string, options?: DocumentElement): DocumentElement;
|
|
8
|
+
static createImageElement(options: DocumentElement): DocumentElement;
|
|
9
|
+
static createFrameElement(options: DocumentElement): DocumentElement;
|
|
10
|
+
static createComponent(componentType: string, model: any, modelBindings: any, options?: DocumentElement): DocumentElement;
|
|
11
|
+
static createComponentFromComponentDefinition(componentDefinition: ComponentDefinition, model: any, modelBindings: any, options?: DocumentElement): DocumentElement;
|
|
12
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DocumentElementFactory = void 0;
|
|
4
|
+
const nanoid_1 = require("nanoid");
|
|
5
|
+
const components_1 = require("./components/components");
|
|
6
|
+
const document_element_property_binding_handler_1 = require("./document-element-property-binding-handler");
|
|
7
|
+
class DocumentElementFactory {
|
|
8
|
+
static initNewElement(type) {
|
|
9
|
+
const element = {
|
|
10
|
+
id: (0, nanoid_1.nanoid)(16),
|
|
11
|
+
position: { x: 300, y: 300 },
|
|
12
|
+
type,
|
|
13
|
+
};
|
|
14
|
+
return element;
|
|
15
|
+
}
|
|
16
|
+
static createTextElement(text, options = {}) {
|
|
17
|
+
let element = this.initNewElement('text');
|
|
18
|
+
element.text = text;
|
|
19
|
+
element.size = { width: 65, height: 20 };
|
|
20
|
+
element.style = {
|
|
21
|
+
color: '#000000'
|
|
22
|
+
};
|
|
23
|
+
element = Object.assign(element, options);
|
|
24
|
+
return element;
|
|
25
|
+
}
|
|
26
|
+
static createShapeElement(type, options = {}) {
|
|
27
|
+
let element = this.initNewElement(type);
|
|
28
|
+
element = Object.assign(element, options);
|
|
29
|
+
return element;
|
|
30
|
+
}
|
|
31
|
+
static createElement(type, options = {}) {
|
|
32
|
+
var _a;
|
|
33
|
+
let element = this.initNewElement(type);
|
|
34
|
+
element = Object.assign(element, options);
|
|
35
|
+
if (((_a = element === null || element === void 0 ? void 0 : element.elements) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
36
|
+
element.elements = element.elements.map((e) => {
|
|
37
|
+
e.id = (0, nanoid_1.nanoid)(16);
|
|
38
|
+
return e;
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
return element;
|
|
42
|
+
}
|
|
43
|
+
static createImageElement(options) {
|
|
44
|
+
let element = this.initNewElement('image');
|
|
45
|
+
element = Object.assign(element, options);
|
|
46
|
+
return element;
|
|
47
|
+
}
|
|
48
|
+
static createFrameElement(options) {
|
|
49
|
+
let element = this.initNewElement('frame');
|
|
50
|
+
element = Object.assign(element, options);
|
|
51
|
+
return element;
|
|
52
|
+
}
|
|
53
|
+
static createComponent(componentType, model, modelBindings, options) {
|
|
54
|
+
const componentDefinition = components_1.ComponentRegistry.getComponentDefinition(componentType);
|
|
55
|
+
return this.createComponentFromComponentDefinition(componentDefinition, model, modelBindings, options);
|
|
56
|
+
}
|
|
57
|
+
static createComponentFromComponentDefinition(componentDefinition, model, modelBindings, options) {
|
|
58
|
+
var _a;
|
|
59
|
+
let element = this.initNewElement('component');
|
|
60
|
+
if (options) {
|
|
61
|
+
element = Object.assign(element, options);
|
|
62
|
+
}
|
|
63
|
+
const elements = JSON.parse(JSON.stringify(componentDefinition.defaultTemplate.elements));
|
|
64
|
+
document_element_property_binding_handler_1.DocumentElementPropertyBindingHandler.bindPropertiesToElements(elements, model);
|
|
65
|
+
element.elements = elements;
|
|
66
|
+
element.modelBindings = modelBindings;
|
|
67
|
+
if (((_a = element === null || element === void 0 ? void 0 : element.elements) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
68
|
+
element.elements = element.elements.map((e) => {
|
|
69
|
+
e.id = (0, nanoid_1.nanoid)(16);
|
|
70
|
+
return e;
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
return element;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
exports.DocumentElementFactory = DocumentElementFactory;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { DocumentElement } from './types/document-element';
|
|
2
|
+
export declare class DocumentElementPropertyBindingHandler {
|
|
3
|
+
static bindPropertiesToElements(elements: Array<DocumentElement>, model: any): void;
|
|
4
|
+
static bindPropertiesToElement(element: DocumentElement, model: any): void;
|
|
5
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DocumentElementPropertyBindingHandler = void 0;
|
|
4
|
+
const util_1 = require("@contrail/util");
|
|
5
|
+
class DocumentElementPropertyBindingHandler {
|
|
6
|
+
static bindPropertiesToElements(elements, model) {
|
|
7
|
+
elements.map(el => {
|
|
8
|
+
this.bindPropertiesToElement(el, model);
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
static bindPropertiesToElement(element, model) {
|
|
12
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
13
|
+
const localModel = Object.assign({}, model);
|
|
14
|
+
if (!element.propertyBindings) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (element.modelBindings) {
|
|
18
|
+
}
|
|
19
|
+
for (const propertyKey of Object.keys(element.propertyBindings)) {
|
|
20
|
+
const modelIndex = element.propertyBindings[propertyKey];
|
|
21
|
+
const propertyValue = util_1.ObjectUtil.getByPath(localModel, modelIndex) || '';
|
|
22
|
+
util_1.ObjectUtil.setByPath(element, propertyKey, propertyValue);
|
|
23
|
+
}
|
|
24
|
+
if (((_b = (_a = element.propertyBindings) === null || _a === void 0 ? void 0 : _a.url) === null || _b === void 0 ? void 0 : _b.indexOf("viewable")) !== -1) {
|
|
25
|
+
element.alternateUrls = {};
|
|
26
|
+
let highResUrl = ((_c = model === null || model === void 0 ? void 0 : model.viewable) === null || _c === void 0 ? void 0 : _c.largeViewableDownloadUrl) || ((_d = model === null || model === void 0 ? void 0 : model.viewable) === null || _d === void 0 ? void 0 : _d.largeViewableUrl);
|
|
27
|
+
let originalFile = (_e = model === null || model === void 0 ? void 0 : model.viewable) === null || _e === void 0 ? void 0 : _e.primaryFileUrl;
|
|
28
|
+
const content = (_f = model === null || model === void 0 ? void 0 : model.viewable) === null || _f === void 0 ? void 0 : _f.content;
|
|
29
|
+
if ((content === null || content === void 0 ? void 0 : content.length) > 0) {
|
|
30
|
+
const primaryContent = content.find((c) => { var _a; return (c === null || c === void 0 ? void 0 : c.id) === ((_a = model === null || model === void 0 ? void 0 : model.viewable) === null || _a === void 0 ? void 0 : _a.primaryViewableId); });
|
|
31
|
+
if ((primaryContent === null || primaryContent === void 0 ? void 0 : primaryContent.contentType) === 'image/svg+xml') {
|
|
32
|
+
highResUrl = primaryContent.primaryFileUrl;
|
|
33
|
+
}
|
|
34
|
+
if (primaryContent === null || primaryContent === void 0 ? void 0 : primaryContent.primaryFileUrl) {
|
|
35
|
+
originalFile = primaryContent === null || primaryContent === void 0 ? void 0 : primaryContent.primaryFileUrl;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
else if (((_g = model === null || model === void 0 ? void 0 : model.viewable) === null || _g === void 0 ? void 0 : _g.contentType) === 'image/svg+xml') {
|
|
39
|
+
highResUrl = (_h = model === null || model === void 0 ? void 0 : model.viewable) === null || _h === void 0 ? void 0 : _h.primaryFileUrl;
|
|
40
|
+
}
|
|
41
|
+
if (highResUrl) {
|
|
42
|
+
element.alternateUrls.highResolution = highResUrl;
|
|
43
|
+
}
|
|
44
|
+
if (originalFile) {
|
|
45
|
+
element.alternateUrls.originalFile = originalFile;
|
|
46
|
+
}
|
|
47
|
+
let lowResUrl = ((_j = model === null || model === void 0 ? void 0 : model.viewable) === null || _j === void 0 ? void 0 : _j.smallViewableDownloadUrl) || ((_k = model === null || model === void 0 ? void 0 : model.viewable) === null || _k === void 0 ? void 0 : _k.smallViewableUrl);
|
|
48
|
+
if (lowResUrl) {
|
|
49
|
+
element.alternateUrls.lowResolution = lowResUrl;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
if (element.elements) {
|
|
53
|
+
this.bindPropertiesToElements(element.elements, localModel);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
exports.DocumentElementPropertyBindingHandler = DocumentElementPropertyBindingHandler;
|
package/lib/index.d.ts
ADDED
package/lib/index.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./types"), exports);
|
|
18
|
+
__exportStar(require("./components"), exports);
|
|
19
|
+
__exportStar(require("./document-element-factory"), exports);
|
|
20
|
+
__exportStar(require("./document-element-property-binding-handler"), exports);
|
|
21
|
+
__exportStar(require("./document-element-component-size-handler"), exports);
|
|
22
|
+
__exportStar(require("./document-action"), exports);
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
export interface TextStyleDefinition {
|
|
2
|
+
valign?: string;
|
|
3
|
+
align?: string;
|
|
4
|
+
decoration?: string;
|
|
5
|
+
}
|
|
6
|
+
export interface FontStyleDefinition {
|
|
7
|
+
family?: string;
|
|
8
|
+
size?: number;
|
|
9
|
+
sizeMode?: 'auto' | 'custom';
|
|
10
|
+
weight?: string;
|
|
11
|
+
style?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface BorderStyleDefinition {
|
|
14
|
+
style?: string;
|
|
15
|
+
color?: string;
|
|
16
|
+
width?: number;
|
|
17
|
+
radius?: number;
|
|
18
|
+
}
|
|
19
|
+
export interface BackgroundStyleDefinition {
|
|
20
|
+
color?: string;
|
|
21
|
+
size?: BackgroundSizeType;
|
|
22
|
+
}
|
|
23
|
+
export declare enum BackgroundSizeType {
|
|
24
|
+
CONTAIN = "CONTAIN",
|
|
25
|
+
COVER = "COVER"
|
|
26
|
+
}
|
|
27
|
+
export interface StyleDefinition {
|
|
28
|
+
background?: BackgroundStyleDefinition;
|
|
29
|
+
text?: TextStyleDefinition;
|
|
30
|
+
font?: FontStyleDefinition;
|
|
31
|
+
border?: BorderStyleDefinition;
|
|
32
|
+
color?: string;
|
|
33
|
+
backgroundColor?: string;
|
|
34
|
+
opacity?: number;
|
|
35
|
+
}
|
|
36
|
+
export interface SizeDefinition {
|
|
37
|
+
width?: number;
|
|
38
|
+
height?: number;
|
|
39
|
+
}
|
|
40
|
+
export interface ViewBox {
|
|
41
|
+
width?: number;
|
|
42
|
+
height?: number;
|
|
43
|
+
x?: number;
|
|
44
|
+
y?: number;
|
|
45
|
+
}
|
|
46
|
+
export interface PositionDefinition {
|
|
47
|
+
x?: number;
|
|
48
|
+
y?: number;
|
|
49
|
+
z?: number;
|
|
50
|
+
}
|
|
51
|
+
export interface RotationDefinition {
|
|
52
|
+
angle?: number;
|
|
53
|
+
}
|
|
54
|
+
export interface LineDefinition {
|
|
55
|
+
x1?: number;
|
|
56
|
+
x2?: number;
|
|
57
|
+
y1?: number;
|
|
58
|
+
y2?: number;
|
|
59
|
+
markerStart?: string;
|
|
60
|
+
markerEnd?: string;
|
|
61
|
+
}
|
|
62
|
+
export interface CropDefinition {
|
|
63
|
+
x1?: number;
|
|
64
|
+
x2?: number;
|
|
65
|
+
y1?: number;
|
|
66
|
+
y2?: number;
|
|
67
|
+
width?: number;
|
|
68
|
+
height?: number;
|
|
69
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BackgroundSizeType = void 0;
|
|
4
|
+
var BackgroundSizeType;
|
|
5
|
+
(function (BackgroundSizeType) {
|
|
6
|
+
BackgroundSizeType["CONTAIN"] = "CONTAIN";
|
|
7
|
+
BackgroundSizeType["COVER"] = "COVER";
|
|
8
|
+
})(BackgroundSizeType = exports.BackgroundSizeType || (exports.BackgroundSizeType = {}));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { DocumentElement } from './document-element';
|
|
2
|
+
export declare enum DocumentChangeType {
|
|
3
|
+
ADD_ELEMENT = "ADD_ELEMENT",
|
|
4
|
+
DELETE_ELEMENT = "DELETE_ELEMENT",
|
|
5
|
+
MODIFY_ELEMENT = "MODIFY_ELEMENT",
|
|
6
|
+
REORDER_ELEMENT = "REORDER_ELEMENT"
|
|
7
|
+
}
|
|
8
|
+
export interface DocumentChange {
|
|
9
|
+
changeType: DocumentChangeType;
|
|
10
|
+
documentId?: string;
|
|
11
|
+
elementData?: DocumentElement;
|
|
12
|
+
elementId?: string;
|
|
13
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DocumentChangeType = void 0;
|
|
4
|
+
var DocumentChangeType;
|
|
5
|
+
(function (DocumentChangeType) {
|
|
6
|
+
DocumentChangeType["ADD_ELEMENT"] = "ADD_ELEMENT";
|
|
7
|
+
DocumentChangeType["DELETE_ELEMENT"] = "DELETE_ELEMENT";
|
|
8
|
+
DocumentChangeType["MODIFY_ELEMENT"] = "MODIFY_ELEMENT";
|
|
9
|
+
DocumentChangeType["REORDER_ELEMENT"] = "REORDER_ELEMENT";
|
|
10
|
+
})(DocumentChangeType = exports.DocumentChangeType || (exports.DocumentChangeType = {}));
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { PositionDefinition, SizeDefinition } from "./common";
|
|
2
|
+
import { DocumentElement } from "./document-element";
|
|
3
|
+
export interface DocumentElementEvent {
|
|
4
|
+
element: DocumentElement;
|
|
5
|
+
selectedElements?: Array<DocumentElement>;
|
|
6
|
+
renderedElementPosition?: PositionDefinition;
|
|
7
|
+
renderedElementSize?: SizeDefinition;
|
|
8
|
+
eventType?: string;
|
|
9
|
+
sourceMouseEvent?: MouseEvent;
|
|
10
|
+
relativeMousePosition?: PositionDefinition;
|
|
11
|
+
data?: any;
|
|
12
|
+
}
|
|
13
|
+
export interface DocumentTextElementEvent {
|
|
14
|
+
element: DocumentElement;
|
|
15
|
+
textFormat: any;
|
|
16
|
+
}
|
|
17
|
+
export interface DocumentSVGElementEvent {
|
|
18
|
+
element: DocumentElement;
|
|
19
|
+
svgRootElement?: SVGElement;
|
|
20
|
+
selectedComponents?: SVGElement[];
|
|
21
|
+
eventType?: string;
|
|
22
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { CropDefinition, LineDefinition, PositionDefinition, RotationDefinition } from './common';
|
|
2
|
+
import { Document } from './document';
|
|
3
|
+
import { ScaleTransformation } from './element-transformation';
|
|
4
|
+
export interface AlternateUrls {
|
|
5
|
+
highResolution?: string;
|
|
6
|
+
lowResolution?: string;
|
|
7
|
+
originalFile?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface DocumentElement extends Document {
|
|
10
|
+
id?: string;
|
|
11
|
+
type?: string;
|
|
12
|
+
position?: PositionDefinition;
|
|
13
|
+
rotate?: RotationDefinition;
|
|
14
|
+
scale?: ScaleTransformation;
|
|
15
|
+
text?: string;
|
|
16
|
+
url?: string;
|
|
17
|
+
alternateUrls?: AlternateUrls;
|
|
18
|
+
propertyBindings?: any;
|
|
19
|
+
lineDefinition?: LineDefinition;
|
|
20
|
+
label?: string;
|
|
21
|
+
annotations?: any;
|
|
22
|
+
isLocked?: boolean;
|
|
23
|
+
cropDefinition?: CropDefinition;
|
|
24
|
+
embedInfo?: any;
|
|
25
|
+
isHidden?: boolean;
|
|
26
|
+
elementIds?: Array<string>;
|
|
27
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { PositionDefinition, SizeDefinition, StyleDefinition, ViewBox } from "./common";
|
|
2
|
+
import { DocumentElement } from "./document-element";
|
|
3
|
+
export interface ImportReferenceDetail {
|
|
4
|
+
importedSlideReference?: string;
|
|
5
|
+
importedFileReference?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface Document {
|
|
8
|
+
id?: string;
|
|
9
|
+
name?: string;
|
|
10
|
+
elements?: Array<DocumentElement>;
|
|
11
|
+
size?: SizeDefinition;
|
|
12
|
+
style?: StyleDefinition;
|
|
13
|
+
model?: any;
|
|
14
|
+
modelBindings?: any;
|
|
15
|
+
background?: Array<DocumentElement>;
|
|
16
|
+
importedFrom?: ImportReferenceDetail;
|
|
17
|
+
startingViewBox?: ViewBox;
|
|
18
|
+
startingLocation?: {
|
|
19
|
+
position: PositionDefinition;
|
|
20
|
+
zoom: number;
|
|
21
|
+
};
|
|
22
|
+
clipContent?: boolean;
|
|
23
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface ScaleTransformation {
|
|
2
|
+
x?: number;
|
|
3
|
+
y?: number;
|
|
4
|
+
}
|
|
5
|
+
export interface TranslateTransformation {
|
|
6
|
+
x?: number;
|
|
7
|
+
y?: number;
|
|
8
|
+
}
|
|
9
|
+
export interface RotationTransformation {
|
|
10
|
+
angle?: number;
|
|
11
|
+
cx?: number;
|
|
12
|
+
cy?: number;
|
|
13
|
+
}
|
|
14
|
+
export interface ElementTransformation {
|
|
15
|
+
translate?: TranslateTransformation;
|
|
16
|
+
scale?: ScaleTransformation;
|
|
17
|
+
rotate?: RotationTransformation;
|
|
18
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export * from './common';
|
|
2
|
+
export * from './data-object';
|
|
3
|
+
export * from './document-change';
|
|
4
|
+
export * from './document-element-event';
|
|
5
|
+
export * from './document-element-holder';
|
|
6
|
+
export * from './document-element';
|
|
7
|
+
export * from './document';
|
|
8
|
+
export * from './element-transformation';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./common"), exports);
|
|
18
|
+
__exportStar(require("./data-object"), exports);
|
|
19
|
+
__exportStar(require("./document-change"), exports);
|
|
20
|
+
__exportStar(require("./document-element-event"), exports);
|
|
21
|
+
__exportStar(require("./document-element-holder"), exports);
|
|
22
|
+
__exportStar(require("./document-element"), exports);
|
|
23
|
+
__exportStar(require("./document"), exports);
|
|
24
|
+
__exportStar(require("./element-transformation"), exports);
|