polotno 2.6.2 → 2.6.4
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/model/group-model.d.ts +1 -1
- package/model/page-model.d.ts +1 -1
- package/model/store.d.ts +34 -31
- package/model/store.js +1 -1
- package/package.json +13 -13
- package/polotno-app.d.ts +94 -162
- package/polotno.bundle.js +9 -18
- package/side-panel/side-panel.d.ts +94 -162
- package/toolbar/toolbar.js +5 -1
- package/utils/to-svg.js +1 -1
|
@@ -101,61 +101,11 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
101
101
|
name: string;
|
|
102
102
|
Tab: () => any;
|
|
103
103
|
Panel: (({ store }: {
|
|
104
|
-
store: {
|
|
105
|
-
role: string
|
|
106
|
-
pages: import("mobx-state-tree").
|
|
107
|
-
id: import("mobx-state-tree").ISimpleType<string>;
|
|
108
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
|
|
109
|
-
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
110
|
-
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
111
|
-
background: import("mobx-state-tree").IType<string, string, string>;
|
|
112
|
-
bleed: import("mobx-state-tree").IType<number, number, number>;
|
|
113
|
-
custom: import("mobx-state-tree").IType<any, any, any>;
|
|
114
|
-
duration: import("mobx-state-tree").IType<number, number, number>;
|
|
115
|
-
_exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
116
|
-
_rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
117
|
-
}, {
|
|
118
|
-
readonly store: any;
|
|
119
|
-
readonly startTime: number;
|
|
120
|
-
} & {
|
|
121
|
-
readonly computedWidth: any;
|
|
122
|
-
readonly computedHeight: any;
|
|
123
|
-
} & {
|
|
124
|
-
toJSON(): any;
|
|
125
|
-
_forEachElementUp(ids: string[], callback: Function): void;
|
|
126
|
-
_forEachElementDown(ids: string[], callback: Function): false;
|
|
127
|
-
} & {
|
|
128
|
-
clone(attrs?: {}): any;
|
|
129
|
-
setZIndex(zIndex: any): void;
|
|
130
|
-
set(attrs: any): void;
|
|
131
|
-
select(): void;
|
|
132
|
-
addElement(attrs: any, { skipSelect }?: {
|
|
133
|
-
skipSelect?: boolean;
|
|
134
|
-
}): any;
|
|
135
|
-
canMoveElementsUp(ids: string[]): false;
|
|
136
|
-
moveElementsUp(ids: string[]): void;
|
|
137
|
-
canMoveElementsTop(ids: string[]): any;
|
|
138
|
-
moveElementsTop(ids: string[]): void;
|
|
139
|
-
canMoveElementsDown(ids: string[]): false;
|
|
140
|
-
moveElementsDown(ids: string[]): void;
|
|
141
|
-
canMoveElementsBottom(ids: string[]): any;
|
|
142
|
-
moveElementsBottom(ids: string[]): void;
|
|
143
|
-
setElementZIndex(id: any, zIndex: any): void;
|
|
144
|
-
setSize({ width, height, useMagic, softChange, }: {
|
|
145
|
-
width: number;
|
|
146
|
-
height: number;
|
|
147
|
-
useMagic?: boolean;
|
|
148
|
-
softChange?: boolean;
|
|
149
|
-
}): void;
|
|
150
|
-
} & {
|
|
151
|
-
moveElementUp(id: any): void;
|
|
152
|
-
moveElementDown(id: any): void;
|
|
153
|
-
moveElementTop(id: any): void;
|
|
154
|
-
moveElementBottom(id: any): void;
|
|
155
|
-
play(): void;
|
|
156
|
-
}, import("mobx-state-tree")._NotCustomized, {}>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
104
|
+
store: import("mobx-state-tree").ModelInstanceTypeProps<{
|
|
105
|
+
role: import("mobx-state-tree").IType<string, string, string>;
|
|
106
|
+
pages: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
157
107
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
158
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
108
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
159
109
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
160
110
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
161
111
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -203,52 +153,28 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
203
153
|
moveElementTop(id: any): void;
|
|
204
154
|
moveElementBottom(id: any): void;
|
|
205
155
|
play(): void;
|
|
206
|
-
}, import("mobx-state-tree")._NotCustomized, {}
|
|
207
|
-
fonts: import("mobx-state-tree").
|
|
208
|
-
fontFamily: import("mobx-state-tree").ISimpleType<string>;
|
|
209
|
-
url: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
210
|
-
styles: import("mobx-state-tree").IType<any, any, any>;
|
|
211
|
-
}, {}, any, import("mobx-state-tree")._NotCustomized>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
156
|
+
}, import("mobx-state-tree")._NotCustomized, {}>>;
|
|
157
|
+
fonts: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
212
158
|
fontFamily: import("mobx-state-tree").ISimpleType<string>;
|
|
213
159
|
url: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
|
|
214
160
|
styles: import("mobx-state-tree").IType<any, any, any>;
|
|
215
|
-
}, {}, any, import("mobx-state-tree")._NotCustomized
|
|
216
|
-
width: number
|
|
217
|
-
height: number
|
|
218
|
-
currentTime: number
|
|
219
|
-
isPlaying: boolean
|
|
220
|
-
scale: number
|
|
221
|
-
scaleToFit: number
|
|
222
|
-
unit: string
|
|
223
|
-
dpi: number
|
|
224
|
-
bleedVisible: boolean
|
|
225
|
-
rulesVisible: boolean
|
|
226
|
-
openedSidePanel: string
|
|
227
|
-
previousOpenedSidePanel: string
|
|
228
|
-
custom: any
|
|
229
|
-
selectedElementsIds: import("mobx-state-tree").
|
|
230
|
-
animatedElementsIds: import("mobx-state-tree").
|
|
231
|
-
history: {
|
|
232
|
-
history: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IType<any, any, any>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<any, any, any>>>;
|
|
233
|
-
undoIdx: number;
|
|
234
|
-
targetPath: string;
|
|
235
|
-
} & import("mobx-state-tree/dist/internal").NonEmptyObject & {
|
|
236
|
-
readonly canUndo: boolean;
|
|
237
|
-
readonly canRedo: boolean;
|
|
238
|
-
} & {
|
|
239
|
-
startTransaction(): void;
|
|
240
|
-
endTransaction(skipSave?: boolean): void;
|
|
241
|
-
ignore(func: any, skipStateReplacement?: boolean, delayed?: boolean): Promise<void>;
|
|
242
|
-
transaction(func: any): Promise<void>;
|
|
243
|
-
requestAddState(state: any): void;
|
|
244
|
-
addUndoState(): void;
|
|
245
|
-
afterCreate(): void;
|
|
246
|
-
clear(): void;
|
|
247
|
-
beforeDestroy(): void;
|
|
248
|
-
undo(): void;
|
|
249
|
-
redo(): void;
|
|
250
|
-
replaceState(): void;
|
|
251
|
-
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
|
|
161
|
+
}, {}, any, import("mobx-state-tree")._NotCustomized>>;
|
|
162
|
+
width: import("mobx-state-tree").IType<number, number, number>;
|
|
163
|
+
height: import("mobx-state-tree").IType<number, number, number>;
|
|
164
|
+
currentTime: import("mobx-state-tree").IType<number, number, number>;
|
|
165
|
+
isPlaying: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
166
|
+
scale: import("mobx-state-tree").IType<number, number, number>;
|
|
167
|
+
scaleToFit: import("mobx-state-tree").IType<number, number, number>;
|
|
168
|
+
unit: import("mobx-state-tree").IType<string, string, string>;
|
|
169
|
+
dpi: import("mobx-state-tree").IType<number, number, number>;
|
|
170
|
+
bleedVisible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
171
|
+
rulesVisible: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
172
|
+
openedSidePanel: import("mobx-state-tree").IType<string, string, string>;
|
|
173
|
+
previousOpenedSidePanel: import("mobx-state-tree").IType<string, string, string>;
|
|
174
|
+
custom: import("mobx-state-tree").IType<any, any, any>;
|
|
175
|
+
selectedElementsIds: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>;
|
|
176
|
+
animatedElementsIds: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>;
|
|
177
|
+
history: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
|
|
252
178
|
history: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<any, any, any>>;
|
|
253
179
|
undoIdx: import("mobx-state-tree").IType<number, number, number>;
|
|
254
180
|
targetPath: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -268,15 +194,15 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
268
194
|
undo(): void;
|
|
269
195
|
redo(): void;
|
|
270
196
|
replaceState(): void;
|
|
271
|
-
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]
|
|
272
|
-
_elementsPixelRatio: number
|
|
273
|
-
_activePageId: string
|
|
274
|
-
} &
|
|
197
|
+
}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
|
|
198
|
+
_elementsPixelRatio: import("mobx-state-tree").IType<number, number, number>;
|
|
199
|
+
_activePageId: import("mobx-state-tree").IType<string, string, string>;
|
|
200
|
+
}> & {
|
|
275
201
|
readonly _bleedVisible: boolean;
|
|
276
202
|
readonly selectedElements: any[];
|
|
277
203
|
readonly children: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IModelType<{
|
|
278
204
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
279
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
205
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
280
206
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
281
207
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
282
208
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -326,7 +252,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
326
252
|
play(): void;
|
|
327
253
|
}, import("mobx-state-tree")._NotCustomized, {}>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
328
254
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
329
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
255
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
330
256
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
331
257
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
332
258
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -376,18 +302,18 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
376
302
|
play(): void;
|
|
377
303
|
}, import("mobx-state-tree")._NotCustomized, {}>>>;
|
|
378
304
|
readonly selectedShapes: any[];
|
|
379
|
-
readonly activePage: {
|
|
380
|
-
id: string
|
|
381
|
-
children: import("mobx-state-tree").
|
|
382
|
-
width: number | "auto"
|
|
383
|
-
height: number | "auto"
|
|
384
|
-
background: string
|
|
385
|
-
bleed: number
|
|
386
|
-
custom: any
|
|
387
|
-
duration: number
|
|
388
|
-
_exporting: boolean
|
|
389
|
-
_rendering: boolean
|
|
390
|
-
} &
|
|
305
|
+
readonly activePage: import("mobx-state-tree").ModelInstanceTypeProps<{
|
|
306
|
+
id: import("mobx-state-tree").ISimpleType<string>;
|
|
307
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
308
|
+
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
309
|
+
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
310
|
+
background: import("mobx-state-tree").IType<string, string, string>;
|
|
311
|
+
bleed: import("mobx-state-tree").IType<number, number, number>;
|
|
312
|
+
custom: import("mobx-state-tree").IType<any, any, any>;
|
|
313
|
+
duration: import("mobx-state-tree").IType<number, number, number>;
|
|
314
|
+
_exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
315
|
+
_rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
316
|
+
}> & {
|
|
391
317
|
readonly store: any;
|
|
392
318
|
readonly startTime: number;
|
|
393
319
|
} & {
|
|
@@ -428,7 +354,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
428
354
|
play(): void;
|
|
429
355
|
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
|
|
430
356
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
431
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
357
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
432
358
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
433
359
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
434
360
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -501,18 +427,18 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
501
427
|
dpi: any;
|
|
502
428
|
}): void;
|
|
503
429
|
setRole(role: string): void;
|
|
504
|
-
addPage(attrs?: any): {
|
|
505
|
-
id: string
|
|
506
|
-
children: import("mobx-state-tree").
|
|
507
|
-
width: number | "auto"
|
|
508
|
-
height: number | "auto"
|
|
509
|
-
background: string
|
|
510
|
-
bleed: number
|
|
511
|
-
custom: any
|
|
512
|
-
duration: number
|
|
513
|
-
_exporting: boolean
|
|
514
|
-
_rendering: boolean
|
|
515
|
-
} &
|
|
430
|
+
addPage(attrs?: any): import("mobx-state-tree").ModelInstanceTypeProps<{
|
|
431
|
+
id: import("mobx-state-tree").ISimpleType<string>;
|
|
432
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
433
|
+
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
434
|
+
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
435
|
+
background: import("mobx-state-tree").IType<string, string, string>;
|
|
436
|
+
bleed: import("mobx-state-tree").IType<number, number, number>;
|
|
437
|
+
custom: import("mobx-state-tree").IType<any, any, any>;
|
|
438
|
+
duration: import("mobx-state-tree").IType<number, number, number>;
|
|
439
|
+
_exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
440
|
+
_rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
441
|
+
}> & {
|
|
516
442
|
readonly store: any;
|
|
517
443
|
readonly startTime: number;
|
|
518
444
|
} & {
|
|
@@ -553,7 +479,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
553
479
|
play(): void;
|
|
554
480
|
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
|
|
555
481
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
556
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
482
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
557
483
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
558
484
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
559
485
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -639,9 +565,12 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
639
565
|
saveAsHTML({ fileName }?: {
|
|
640
566
|
fileName?: string;
|
|
641
567
|
}): Promise<void>;
|
|
642
|
-
toSVG(
|
|
643
|
-
|
|
568
|
+
toSVG({ elementHook }?: {
|
|
569
|
+
elementHook: any;
|
|
570
|
+
}): Promise<string>;
|
|
571
|
+
saveAsSVG({ fileName, elementHook, }?: {
|
|
644
572
|
fileName?: string;
|
|
573
|
+
elementHook?: Function;
|
|
645
574
|
}): Promise<void>;
|
|
646
575
|
saveAsPDF({ fileName, ...exportProps }?: import("../model/store").ExportOptions & {
|
|
647
576
|
fileName?: string;
|
|
@@ -678,7 +607,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
678
607
|
role: import("mobx-state-tree").IType<string, string, string>;
|
|
679
608
|
pages: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
680
609
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
681
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
610
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
682
611
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
683
612
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
684
613
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -775,7 +704,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
775
704
|
readonly selectedElements: any[];
|
|
776
705
|
readonly children: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IModelType<{
|
|
777
706
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
778
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
707
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
779
708
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
780
709
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
781
710
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -825,7 +754,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
825
754
|
play(): void;
|
|
826
755
|
}, import("mobx-state-tree")._NotCustomized, {}>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
|
|
827
756
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
828
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
757
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
829
758
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
830
759
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
831
760
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -875,18 +804,18 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
875
804
|
play(): void;
|
|
876
805
|
}, import("mobx-state-tree")._NotCustomized, {}>>>;
|
|
877
806
|
readonly selectedShapes: any[];
|
|
878
|
-
readonly activePage: {
|
|
879
|
-
id: string
|
|
880
|
-
children: import("mobx-state-tree").
|
|
881
|
-
width: number | "auto"
|
|
882
|
-
height: number | "auto"
|
|
883
|
-
background: string
|
|
884
|
-
bleed: number
|
|
885
|
-
custom: any
|
|
886
|
-
duration: number
|
|
887
|
-
_exporting: boolean
|
|
888
|
-
_rendering: boolean
|
|
889
|
-
} &
|
|
807
|
+
readonly activePage: import("mobx-state-tree").ModelInstanceTypeProps<{
|
|
808
|
+
id: import("mobx-state-tree").ISimpleType<string>;
|
|
809
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
810
|
+
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
811
|
+
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
812
|
+
background: import("mobx-state-tree").IType<string, string, string>;
|
|
813
|
+
bleed: import("mobx-state-tree").IType<number, number, number>;
|
|
814
|
+
custom: import("mobx-state-tree").IType<any, any, any>;
|
|
815
|
+
duration: import("mobx-state-tree").IType<number, number, number>;
|
|
816
|
+
_exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
817
|
+
_rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
818
|
+
}> & {
|
|
890
819
|
readonly store: any;
|
|
891
820
|
readonly startTime: number;
|
|
892
821
|
} & {
|
|
@@ -927,7 +856,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
927
856
|
play(): void;
|
|
928
857
|
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
|
|
929
858
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
930
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
859
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
931
860
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
932
861
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
933
862
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -1000,18 +929,18 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
1000
929
|
dpi: any;
|
|
1001
930
|
}): void;
|
|
1002
931
|
setRole(role: string): void;
|
|
1003
|
-
addPage(attrs?: any): {
|
|
1004
|
-
id: string
|
|
1005
|
-
children: import("mobx-state-tree").
|
|
1006
|
-
width: number | "auto"
|
|
1007
|
-
height: number | "auto"
|
|
1008
|
-
background: string
|
|
1009
|
-
bleed: number
|
|
1010
|
-
custom: any
|
|
1011
|
-
duration: number
|
|
1012
|
-
_exporting: boolean
|
|
1013
|
-
_rendering: boolean
|
|
1014
|
-
} &
|
|
932
|
+
addPage(attrs?: any): import("mobx-state-tree").ModelInstanceTypeProps<{
|
|
933
|
+
id: import("mobx-state-tree").ISimpleType<string>;
|
|
934
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
935
|
+
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
936
|
+
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
937
|
+
background: import("mobx-state-tree").IType<string, string, string>;
|
|
938
|
+
bleed: import("mobx-state-tree").IType<number, number, number>;
|
|
939
|
+
custom: import("mobx-state-tree").IType<any, any, any>;
|
|
940
|
+
duration: import("mobx-state-tree").IType<number, number, number>;
|
|
941
|
+
_exporting: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
942
|
+
_rendering: import("mobx-state-tree").IType<boolean, boolean, boolean>;
|
|
943
|
+
}> & {
|
|
1015
944
|
readonly store: any;
|
|
1016
945
|
readonly startTime: number;
|
|
1017
946
|
} & {
|
|
@@ -1052,7 +981,7 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
1052
981
|
play(): void;
|
|
1053
982
|
} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
|
|
1054
983
|
id: import("mobx-state-tree").ISimpleType<string>;
|
|
1055
|
-
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").
|
|
984
|
+
children: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ITypeUnion<any, any, any>>;
|
|
1056
985
|
width: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
1057
986
|
height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ITypeUnion<number | "auto", number | "auto", number | "auto">, [undefined]>;
|
|
1058
987
|
background: import("mobx-state-tree").IType<string, string, string>;
|
|
@@ -1138,9 +1067,12 @@ export declare const INTERNAL_SECTIONS: {
|
|
|
1138
1067
|
saveAsHTML({ fileName }?: {
|
|
1139
1068
|
fileName?: string;
|
|
1140
1069
|
}): Promise<void>;
|
|
1141
|
-
toSVG(
|
|
1142
|
-
|
|
1070
|
+
toSVG({ elementHook }?: {
|
|
1071
|
+
elementHook: any;
|
|
1072
|
+
}): Promise<string>;
|
|
1073
|
+
saveAsSVG({ fileName, elementHook, }?: {
|
|
1143
1074
|
fileName?: string;
|
|
1075
|
+
elementHook?: Function;
|
|
1144
1076
|
}): Promise<void>;
|
|
1145
1077
|
saveAsPDF({ fileName, ...exportProps }?: import("../model/store").ExportOptions & {
|
|
1146
1078
|
fileName?: string;
|
package/toolbar/toolbar.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Toolbar=exports.registerToolbarComponent=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),styled_1=__importDefault(require("../utils/styled")),screen_1=require("../utils/screen"),history_buttons_1=require("./history-buttons"),text_toolbar_1=require("./text-toolbar"),html_toolbar_1=require("./html-toolbar"),image_toolbar_1=require("./image-toolbar"),svg_toolbar_1=require("./svg-toolbar"),line_toolbar_1=require("./line-toolbar"),video_toolbar_1=require("./video-toolbar"),figure_toolbar_1=require("./figure-toolbar"),many_toolbar_1=require("./many-toolbar"),page_toolbar_1=require("./page-toolbar"),download_button_1=require("./download-button"),duplicate_button_1=require("./duplicate-button"),remove_button_1=require("./remove-button"),lock_button_1=require("./lock-button"),position_picker_1=require("./position-picker"),opacity_picker_1=require("./opacity-picker"),admin_button_1=require("./admin-button"),group_button_1=require("./group-button"),flags_1=require("../utils/flags"),ComponentsTypes={text:text_toolbar_1.TextToolbar,image:image_toolbar_1.ImageToolbar,svg:svg_toolbar_1.SvgToolbar,many:many_toolbar_1.ManyToolbar,line:line_toolbar_1.LineToolbar,video:video_toolbar_1.VideoToolbar,figure:figure_toolbar_1.FigureToolbar,page:page_toolbar_1.PageToolbar};function registerToolbarComponent(e,t){ComponentsTypes[e]=t}exports.registerToolbarComponent=registerToolbarComponent;const NavbarContainer=(0,styled_1.default)("div")`
|
|
2
2
|
white-space: nowrap;
|
|
3
3
|
|
|
4
|
+
& .bp5-button {
|
|
5
|
+
min-width: fit-content;
|
|
6
|
+
}
|
|
7
|
+
|
|
4
8
|
${(0,screen_1.mobileStyle)("\n max-width: 100vw;\n overflow-x: auto;\n overflow-y: hidden;\n ")}
|
|
5
9
|
`,NavInner=(0,styled_1.default)("div")`
|
|
6
10
|
width: 100%;
|
|
7
11
|
height: 100%;
|
|
8
12
|
${(0,screen_1.mobileStyle)("\n display: flex;\n ")}
|
|
9
|
-
`;exports.Toolbar=(0,mobx_react_lite_1.observer)((({store:e,downloadButtonEnabled:t,components:o={}})=>{const r=1===new Set(e.selectedElements.map((e=>e.type))).size,l=1===e.selectedElements.length,a=e.selectedElements[0],n=e.selectedElements.every((e=>e.styleEditable));let i=n&&l&&ComponentsTypes[a.type];r&&"text"===(null==a?void 0:a.type)?i=ComponentsTypes[a.type]:e.selectedElements.length>1&&(i=ComponentsTypes.many),0===e.selectedElements.length&&(i=ComponentsTypes.page),l&&"text"===a.type&&flags_1.flags.htmlRenderEnabled&&(i=html_toolbar_1.HtmlToolbar);const
|
|
13
|
+
`;exports.Toolbar=(0,mobx_react_lite_1.observer)((({store:e,downloadButtonEnabled:t,components:o={}})=>{const r=1===new Set(e.selectedElements.map((e=>e.type))).size,l=1===e.selectedElements.length,a=e.selectedElements[0],n=e.selectedElements.every((e=>e.styleEditable));let i=n&&l&&ComponentsTypes[a.type];r&&"text"===(null==a?void 0:a.type)?i=ComponentsTypes[a.type]:e.selectedElements.length>1&&(i=ComponentsTypes.many),0===e.selectedElements.length&&(i=ComponentsTypes.page),l&&"text"===a.type&&flags_1.flags.htmlRenderEnabled&&(i=html_toolbar_1.HtmlToolbar);const u=l&&a._cropModeEnabled,_=(null==o?void 0:o.ActionControls)||(t?download_button_1.DownloadButton:null),s=(null==o?void 0:o.Position)||position_picker_1.PositionPicker,c=(null==o?void 0:o.Opacity)||opacity_picker_1.OpacityPicker,b=(null==o?void 0:o.Lock)||lock_button_1.LockButton,d=(null==o?void 0:o.Duplicate)||duplicate_button_1.DuplicateButton,m=(null==o?void 0:o.Remove)||remove_button_1.RemoveButton,p=(null==o?void 0:o.Group)||group_button_1.GroupButton,g=(null==o?void 0:o.History)||history_buttons_1.HistoryButtons,v=(null==o?void 0:o.Admin)||admin_button_1.AdminButton;return react_1.default.createElement(NavbarContainer,{className:"bp5-navbar"},react_1.default.createElement(NavInner,null,!u&&react_1.default.createElement(g,{store:e}),i&&n&&react_1.default.createElement(i,{store:e,components:o}),!u&&react_1.default.createElement(core_1.Navbar.Group,{align:core_1.Alignment.RIGHT},"admin"===e.role&&react_1.default.createElement(v,{store:e}),react_1.default.createElement(p,{store:e}),react_1.default.createElement(s,{store:e}),n&&react_1.default.createElement(c,{store:e}),react_1.default.createElement(b,{store:e}),react_1.default.createElement(d,{store:e}),react_1.default.createElement(m,{store:e}),_&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(core_1.Divider,{style:{height:"100%",margin:"0 15px"}}),react_1.default.createElement(_,{store:e})))))})),exports.default=exports.Toolbar;
|
package/utils/to-svg.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i
|
|
1
|
+
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,i){void 0===i&&(i=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,i,n)}:function(e,t,o,i){void 0===i&&(i=o),e[i]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var o={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(o[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(e);n<i.length;n++)t.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(o[i[n]]=e[i[n]])}return o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.jsonToSVG=exports.jsonToDOM=exports.fixRatio=void 0;const image_1=require("./image"),svg=__importStar(require("./svg")),image_2=require("./image"),figure_to_svg_1=require("./figure-to-svg"),h=(e,t,...o)=>({type:e,props:t,children:o||[]});function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");t.documentElement.setAttribute("preserveAspectRatio","none");return(new XMLSerializer).serializeToString(t)}exports.fixRatio=fixRatio;const imageToDataURL=async e=>{const t=await(0,image_2.loadImage)(e),o=document.createElement("canvas");o.width=t.width,o.height=t.height;return o.getContext("2d").drawImage(t,0,0),o.toDataURL("image/png")},imageToDOM=async({element:e,page:t,store:o})=>{let{src:i}=e;if("svg"===e.type){const t=await svg.urlToString(i);i=svg.replaceColors(t,new Map(Object.entries(e.colorsReplace)))}let n="";e.flipX&&(n+="scaleX(-1)"),e.flipY&&(n+="scaleY(-1)");const r={};if(e.clipSrc){const t=await svg.urlToBase64(e.clipSrc);r["clip-path"]=`url(${t})`}const a=await(0,image_2.loadImage)(i),s=a.width*e.cropWidth,l=a.height*e.cropHeight,g=e.width/e.height;let c,p;const d=s/l;"svg"===e.type?(c=s,p=l):g>=d?(c=s,p=s/g):(c=l*g,p=l);const m=c/a.width,u=p/a.height,f=c/p>e.width/e.height?e.height/p:e.width/c,y=c*f/m,w=p*f/u,O=e.cropX*a.width*f,b=e.cropY*a.height*f,x=`clip-${e.id}`,$=i.replace(/&/g,"&");return h("g",{style:{transform:n}},h("defs",{},h("clipPath",{id:x},h("rect",{x:0,y:0,width:e.width,height:e.height}))),h("image",{"xlink:href":$,x:-O,y:-b,width:y,height:w,preserveAspectRatio:"none","clip-path":`url(#${x})`}))},textToDOM=async({element:e,page:t,store:o})=>{const i=(e,t,o,i,n)=>{const r=document.createElement("canvas").getContext("2d");return r.font=`${n} ${i} ${t}px ${o}`,r.measureText(e).width},n=((e,t,o,n,r,a)=>{const s=[];return e.split("\n").forEach((e=>{const l=e.split(" ");let h="";for(let e=0;e<l.length;e++){const g=h+l[e]+" ";i(g,o,n,r,a)>t&&e>0?(s.push(h.trim()),h=l[e]+" "):h=g}s.push(h.trim())})),s})(e.text,e.width,e.fontSize,e.fontFamily,e.fontWeight,e.fontStyle),r=e.fontSize*e.lineHeight,a="center"===e.align?"middle":"right"===e.align?"end":"start",s=n.map(((t,o)=>h("tspan",{x:"center"===e.align?e.width/2:"right"===e.align?e.width:0,dy:0===o?0:r,innerHTML:t})));return h("g",{},h("text",{fill:e.fill,y:e.fontSize,"font-size":e.fontSize+"px","text-anchor":a,"font-family":e.fontFamily,"font-style":e.fontStyle,"font-weight":e.fontWeight,"text-decoration":e.textDecoration,"line-height":e.lineHeight,"letter-spacing":e.letterSpacing+"em","stroke-width":e.strokeWidth,stroke:e.stroke},...s))},getLineHead=({element:e,type:t})=>{const o={"stroke-width":e.height,stroke:e.color,"line-cap":"round","stroke-linejoin":"round",opacity:e.opacity};return"arrow"===t||"triangle"===t?h("polyline",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},o)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},o)):"circle"===t?h("circle",Object.assign({r:e.height},o)):"square"===t?h("polyline",Object.assign({points:`${-e.height},${-e.height} ${-e.height},${e.height} ${e.height},${e.height} ${e.height},${-e.height}`},o)):null},lineToDOM=async({element:e,page:t,store:o})=>h("g",{},h("line",{x1:0,y1:e.height/2,x2:e.width,y2:e.height/2,stroke:e.color,"stroke-width":e.height}),h("g",{transform:`translate(0 ${e.height/2})`},getLineHead({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},getLineHead({element:e,type:e.endHead}))),groupToDOM=async({element:e,page:t,store:o,elementHook:i})=>{const n=await Promise.all(e.children.map((e=>elementToDOM({element:e,page:t,store:o,elementHook:i})))),r=h("g",{opacity:e.opacity,transform:`translate(${e.x}, ${e.y}) rotate(${e.rotation})`,style:{"transform-origin":"top left"}},...n);return i&&i({dom:r,element:e})||r};function removeSvgTags(e){let t=e.replace(/<svg[^>]*>/,"");return t=t.replace(/<\/svg>/,""),t}const figureToDOM=async({element:e,page:t,store:o,elementHook:i})=>{const n=removeSvgTags((0,figure_to_svg_1.figureToSvg)(e)),r=h("g",{innerHTML:n});return i&&i({dom:r,element:e})||r},type={image:imageToDOM,svg:imageToDOM,text:textToDOM,line:lineToDOM,figure:figureToDOM,group:groupToDOM};async function elementToDOM({element:e,page:t,store:o,elementHook:i}){let n=await type[e.type];n||(n=()=>h("g",{}),console.error(`SVG export does not support ${e.type} type...`));const r=await n({element:e,page:t,store:o}),a=[];e.blurEnabled&&a.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&a.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&a.push("sepia()"),e.grayscaleEnabled&&a.push("grayscale()"),e.shadowEnabled&&a.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor})`);const s=h("g",{className:"element",id:e.id,transform:`translate(${e.x}, ${e.y}) rotate(${e.rotation})`,display:e.visible?void 0:"none",style:{"transform-origin":"top left",filter:a.join(" ")}},r);return i&&i({dom:s,element:e})||s}async function pageToDOM({page:e,store:t,elementHook:o}){const i=await Promise.all(e.children.map((i=>elementToDOM({element:i,page:e,store:t,elementHook:o}))));let n={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){const o=await(0,image_2.loadImage)(e.background),i=await(0,image_2.cropImage)(e.background,Object.assign({width:t.width,height:t.height,x:0,y:0},(0,image_1.getCrop)({width:t.width,height:t.height},{width:o.width,height:o.height})));n=Object.assign(Object.assign({},n),{"background-image":`url(${i})`})}return h("g",{className:"page",style:Object.assign(Object.assign({},n),{background:e.background})},h("rect",{x:0,y:0,width:t.width,height:t.height,fill:e.background}),...i)}async function jsonToDOM({json:e,elementHook:t}){const o=await Promise.all(e.pages.map((o=>pageToDOM({page:o,store:e,elementHook:t})))),i=[];e.pages.forEach((e=>{e.children.forEach((e=>{"text"===e.type&&-1===i.indexOf(e.fontFamily)&&i.push(e.fontFamily)}))}));const n=i.map((t=>e.fonts.find((e=>e.fontFamily===t))?h("style",{},""):h("defs",{},h("style",{type:"text/css",innerHTML:`@import url('https://fonts.googleapis.com/css?family=${t}:bi,normal,i,b');`.replace(/&/g,"&")}))));return h("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${e.width} ${e.height}`},...n,...o)}exports.jsonToDOM=jsonToDOM;const serializeProp=(e,t)=>"object"==typeof t?`${e}="${Object.keys(t).map((e=>`${e}:${t[e]};`)).join(" ")}"`:null==t||""===t?"":`${e}="${t}"`,domToSVG=({dom:e,nestLevel:t=0})=>{if("string"==typeof e)return e;if(!e)return"";const o=e.props,{innerHTML:i}=o,n=__rest(o,["innerHTML"]),r=" ".repeat(t);return`${r}<${e.type} ${Object.keys(n).map((e=>serializeProp(e,n[e]))).join(" ")}>${i||"\n"+e.children.map((e=>domToSVG({dom:e,nestLevel:t+1}))).join("")}${r}</${e.type}>\n`};async function jsonToSVG({json:e,elementHook:t}){const o=await jsonToDOM({json:e,elementHook:t});return domToSVG({dom:o})}exports.jsonToSVG=jsonToSVG;
|