@pdfme/ui 1.0.0-beta.5 → 1.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/coverage/clover.xml +6 -0
  2. package/coverage/coverage-final.json +1 -0
  3. package/coverage/lcov-report/base.css +224 -0
  4. package/coverage/lcov-report/block-navigation.js +87 -0
  5. package/coverage/lcov-report/favicon.png +0 -0
  6. package/coverage/lcov-report/index.html +101 -0
  7. package/coverage/lcov-report/prettify.css +1 -0
  8. package/coverage/lcov-report/prettify.js +2 -0
  9. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  10. package/coverage/lcov-report/sorter.js +196 -0
  11. package/coverage/lcov.info +0 -0
  12. package/dist/index.js +1 -1
  13. package/dist/index.js.LICENSE.txt +3 -1
  14. package/dist/index.js.map +1 -1
  15. package/dist/types/{ui/src/Designer.d.ts → Designer.d.ts} +0 -0
  16. package/dist/types/{ui/src/Form.d.ts → Form.d.ts} +0 -0
  17. package/dist/types/{ui/src/Viewer.d.ts → Viewer.d.ts} +0 -0
  18. package/dist/types/{ui/src/class.d.ts → class.d.ts} +1 -1
  19. package/dist/types/{ui/src/components → components}/Designer/Main/Guides.d.ts +0 -0
  20. package/dist/types/{ui/src/components → components}/Designer/Main/Mask.d.ts +0 -0
  21. package/dist/types/{ui/src/components → components}/Designer/Main/Moveable.d.ts +1 -1
  22. package/dist/types/{ui/src/components → components}/Designer/Main/Selecto.d.ts +0 -0
  23. package/dist/types/{ui/src/components → components}/Designer/Main/index.d.ts +0 -0
  24. package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts +4 -1
  25. package/dist/types/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts +6 -0
  26. package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/TextPropEditor.d.ts +4 -1
  27. package/dist/types/{ui/src/components → components}/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts +4 -1
  28. package/dist/types/components/Designer/Sidebar/DetailView/index.d.ts +6 -0
  29. package/dist/types/components/Designer/Sidebar/ListView/Item.d.ts +25 -0
  30. package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts +3 -0
  31. package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableItem.d.ts +14 -0
  32. package/dist/types/{ui/src/components/Designer/Sidebar/ListView.d.ts → components/Designer/Sidebar/ListView/index.d.ts} +2 -2
  33. package/dist/types/{ui/src/components → components}/Designer/Sidebar/index.d.ts +2 -7
  34. package/dist/types/{ui/src/components → components}/Designer/index.d.ts +0 -1
  35. package/dist/types/{ui/src/components → components}/Divider.d.ts +0 -0
  36. package/dist/types/{ui/src/components → components}/Error.d.ts +0 -1
  37. package/dist/types/{ui/src/components → components}/Paper.d.ts +0 -0
  38. package/dist/types/{ui/src/components → components}/Preview/Pager/Page.d.ts +0 -1
  39. package/dist/types/{ui/src/components → components}/Preview/Pager/Unit.d.ts +0 -1
  40. package/dist/types/{ui/src/components → components}/Preview/index.d.ts +0 -1
  41. package/dist/types/{ui/src/components → components}/Root.d.ts +0 -0
  42. package/dist/types/{ui/src/components → components}/Schemas/BarcodeSchema.d.ts +0 -0
  43. package/dist/types/{ui/src/components → components}/Schemas/ImageSchema.d.ts +0 -0
  44. package/dist/types/{ui/src/components → components}/Schemas/SchemaUI.d.ts +0 -0
  45. package/dist/types/{ui/src/components → components}/Schemas/TextSchema.d.ts +0 -0
  46. package/dist/types/{ui/src/components → components}/Spinner.d.ts +0 -0
  47. package/dist/types/{ui/src/constants.d.ts → constants.d.ts} +1 -0
  48. package/dist/types/{ui/src/contexts.d.ts → contexts.d.ts} +1 -1
  49. package/dist/types/{ui/src/helper.d.ts → helper.d.ts} +1 -1
  50. package/dist/types/{ui/src/hooks.d.ts → hooks.d.ts} +1 -0
  51. package/dist/types/{ui/src/i18n.d.ts → i18n.d.ts} +4 -2
  52. package/dist/types/{ui/src/index.d.ts → index.d.ts} +0 -0
  53. package/package.json +13 -11
  54. package/src/Designer.tsx +2 -1
  55. package/src/Form.tsx +1 -0
  56. package/src/Viewer.tsx +1 -0
  57. package/src/assets/icons/align-horizontal-center.svg +1 -0
  58. package/src/assets/icons/align-horizontal-left.svg +1 -0
  59. package/src/assets/icons/align-horizontal-right.svg +1 -0
  60. package/src/assets/icons/align-vertical-bottom.svg +1 -0
  61. package/src/assets/icons/align-vertical-middle.svg +1 -0
  62. package/src/assets/icons/align-vertical-top.svg +1 -0
  63. package/src/assets/icons/close.svg +4 -0
  64. package/src/assets/icons/horizontal-distribute.svg +1 -0
  65. package/src/assets/icons/vertical-distribute.svg +1 -0
  66. package/src/assets/imageExample.png +0 -0
  67. package/src/class.ts +5 -6
  68. package/src/components/Designer/Main/Moveable.tsx +1 -1
  69. package/src/components/Designer/Main/index.tsx +21 -15
  70. package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx +28 -6
  71. package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx +115 -24
  72. package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx +36 -6
  73. package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx +14 -6
  74. package/src/components/Designer/Sidebar/DetailView/index.tsx +19 -14
  75. package/src/components/Designer/Sidebar/ListView/Item.tsx +113 -0
  76. package/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx +162 -0
  77. package/src/components/Designer/Sidebar/ListView/SelectableSortableItem.tsx +78 -0
  78. package/src/components/Designer/Sidebar/ListView/index.tsx +118 -0
  79. package/src/components/Designer/Sidebar/index.tsx +26 -12
  80. package/src/components/Designer/index.tsx +12 -24
  81. package/src/components/Paper.tsx +1 -3
  82. package/src/components/Preview/Pager/Page.tsx +1 -1
  83. package/src/components/Preview/Pager/Unit.tsx +1 -1
  84. package/src/components/Preview/index.tsx +3 -4
  85. package/src/components/Root.tsx +2 -7
  86. package/src/components/Schemas/BarcodeSchema.tsx +37 -22
  87. package/src/components/Schemas/ImageSchema.tsx +71 -66
  88. package/src/components/Schemas/TextSchema.tsx +1 -1
  89. package/src/constants.ts +2 -0
  90. package/src/helper.ts +42 -37
  91. package/src/hooks.ts +11 -0
  92. package/src/i18n.ts +10 -7
  93. package/tsconfig.json +1 -1
  94. package/webpack.config.js +0 -18
  95. package/dist/types/common/src/constants.d.ts +0 -6
  96. package/dist/types/common/src/helper.d.ts +0 -15
  97. package/dist/types/common/src/index.d.ts +0 -6
  98. package/dist/types/common/src/schema.d.ts +0 -3613
  99. package/dist/types/common/src/type.d.ts +0 -64
  100. package/dist/types/ui/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts +0 -3
  101. package/dist/types/ui/src/components/Designer/Sidebar/DetailView/index.d.ts +0 -3
  102. package/src/components/Designer/Sidebar/ListView.tsx +0 -180
@@ -13,8 +13,6 @@ import qrcode from '../../assets/barcodeExamples/qrcode.png';
13
13
  import upca from '../../assets/barcodeExamples/upca.png';
14
14
  import upce from '../../assets/barcodeExamples/upce.png';
15
15
 
16
- type Props = SchemaUIProps & { schema: BarcodeSchema };
17
-
18
16
  const barcodeExampleImageObj: { [key: string]: string } = {
19
17
  qrcode,
20
18
  japanpost,
@@ -50,7 +48,7 @@ const ErrorBarcode = () => (
50
48
  padding: '0.25rem',
51
49
  fontSize: '12pt',
52
50
  fontWeight: 'bold',
53
- borderRadius: 3,
51
+ borderRadius: 2,
54
52
  }}
55
53
  >
56
54
  ERROR
@@ -65,12 +63,30 @@ const ErrorOrSampleBarcode = ({ schema, value }: { schema: BarcodeSchema; value:
65
63
  <ErrorBarcode />
66
64
  );
67
65
 
66
+ type Props = SchemaUIProps & { schema: BarcodeSchema };
67
+
68
68
  const BarcodeSchemaUI = (
69
69
  { schema, editable, placeholder, tabIndex, onChange }: Props,
70
70
  ref: Ref<HTMLInputElement>
71
71
  ) => {
72
72
  const value = schema.data;
73
73
 
74
+ const style: React.CSSProperties = {
75
+ textAlign: 'center',
76
+ position: 'absolute',
77
+ zIndex: 2,
78
+ fontSize: '1rem',
79
+ color: '#000',
80
+ height: Number(schema.height) * ZOOM,
81
+ width: Number(schema.width) * ZOOM,
82
+ background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
83
+ border: 'none',
84
+ display: 'flex',
85
+ alignItems: 'center',
86
+ justifyContent: 'center',
87
+ overflow: 'auto',
88
+ };
89
+
74
90
  return (
75
91
  <div
76
92
  style={{
@@ -81,28 +97,27 @@ const BarcodeSchemaUI = (
81
97
  justifyContent: 'center',
82
98
  }}
83
99
  >
84
- <input
85
- ref={ref}
86
- disabled={!editable}
87
- tabIndex={tabIndex}
88
- placeholder={placeholder}
89
- style={{
90
- textAlign: 'center',
91
- position: 'absolute',
92
- zIndex: 2,
93
- fontSize: 'inherit',
94
- height: Number(schema.height) * ZOOM,
95
- width: Number(schema.width) * ZOOM,
96
- background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
97
- border: 'none',
98
- }}
99
- value={value}
100
- onChange={(e) => onChange(e.target.value)}
101
- />
100
+ {editable ? (
101
+ <input
102
+ ref={ref}
103
+ tabIndex={tabIndex}
104
+ placeholder={placeholder}
105
+ style={style}
106
+ value={value}
107
+ onChange={(e) => onChange(e.target.value)}
108
+ />
109
+ ) : (
110
+ <div style={style}>
111
+ <span>{value}</span>
112
+ </div>
113
+ )}
114
+
102
115
  {value ? (
103
116
  <ErrorOrSampleBarcode value={value} schema={schema} />
104
- ) : (
117
+ ) : editable ? (
105
118
  <SampleBarcode schema={schema} />
119
+ ) : (
120
+ <ErrorBarcode />
106
121
  )}
107
122
  </div>
108
123
  );
@@ -1,81 +1,86 @@
1
- import React, { forwardRef, ChangeEvent, useContext, Ref } from 'react';
1
+ import React, { useState, forwardRef, ChangeEvent, useContext, Ref } from 'react';
2
2
  import { ImageSchema } from '@pdfme/common';
3
3
  import { SchemaUIProps } from './SchemaUI';
4
4
  import { readFiles } from '../../helper';
5
- import { I18nContext } from '../../contexts';
6
5
  import { ZOOM } from '../../constants';
7
- import imageExample from '../../assets/imageExample.png';
6
+ import closeIcon from '../../assets/icons/close.svg';
8
7
 
9
8
  type Props = SchemaUIProps & { schema: ImageSchema };
10
9
 
11
- const FilledImage = ({ editable, tabIndex, schema, onChange }: Omit<Props, 'placeholder'>) => (
12
- <div style={{ margin: '0 auto' }}>
13
- {editable && (
14
- <button
15
- tabIndex={tabIndex}
10
+ const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
11
+ const { editable, placeholder, tabIndex, schema, onChange } = props;
12
+ const [fileName, setFileName] = useState<string>('');
13
+ const hasData = Boolean(schema.data);
14
+
15
+ const size: React.CSSProperties = { width: schema.width * ZOOM, height: schema.height * ZOOM };
16
+
17
+ return (
18
+ <>
19
+ <div
16
20
  style={{
17
- position: 'absolute',
18
- left: 0,
19
- top: 0,
21
+ ...size,
22
+ opacity: hasData ? 1 : 0.5,
23
+ backgroundImage: hasData || !editable ? 'none' : `url(${placeholder})`,
24
+ backgroundSize: `${size.width}px ${size.height}px`,
25
+ }}
26
+ onClick={(e) => {
27
+ if (editable) {
28
+ e.stopPropagation();
29
+ }
20
30
  }}
21
- onClick={() => onChange('')}
22
31
  >
23
- x
24
- </button>
25
- )}
26
- <img
27
- style={{ width: schema.width * ZOOM, height: schema.height * ZOOM, borderRadius: 0 }}
28
- src={schema.data}
29
- />
30
- </div>
31
- );
32
-
33
- const BlankImage = (props: Props & { inputRef: Ref<HTMLInputElement> }) => {
34
- const { editable, placeholder, tabIndex, schema, onChange, inputRef } = props;
35
- const i18n = useContext(I18nContext);
36
-
37
- return editable ? (
38
- <label
39
- style={{
40
- height: Number(schema.height) * ZOOM,
41
- width: Number(schema.width) * ZOOM,
42
- display: 'flex',
43
- justifyContent: 'center',
44
- alignItems: 'center',
45
- }}
46
- >
47
- <input
48
- ref={inputRef}
49
- tabIndex={tabIndex}
50
- style={{ display: 'none' }}
51
- onChange={(event: ChangeEvent<HTMLInputElement>) => {
52
- const { files } = event.target;
53
- readFiles(files, 'dataURL').then((result) => onChange(result as string));
32
+ {hasData && <img style={{ ...size, borderRadius: 0 }} src={schema.data} />}
33
+ {hasData && editable && (
34
+ <button
35
+ tabIndex={tabIndex}
36
+ style={{
37
+ position: 'absolute',
38
+ top: 0,
39
+ left: 0,
40
+ zIndex: 1,
41
+ display: 'flex',
42
+ justifyContent: 'center',
43
+ alignItems: 'center',
44
+ color: '#333',
45
+ background: '#f2f2f2',
46
+ borderRadius: 2,
47
+ border: '1px solid #767676',
48
+ cursor: 'pointer',
49
+ height: 20,
50
+ width: 20,
51
+ }}
52
+ aria-label="close"
53
+ onClick={() => {
54
+ setFileName('');
55
+ onChange('');
56
+ }}
57
+ >
58
+ <img src={closeIcon} alt="Close icon" width={10} />
59
+ </button>
60
+ )}
61
+ </div>
62
+ <label
63
+ style={{
64
+ display: editable ? 'flex' : 'none',
65
+ position: 'absolute',
66
+ top: '50%',
67
+ width: '100%',
68
+ cursor: 'pointer',
54
69
  }}
55
- type="file"
56
- accept="image/jpeg, image/png"
57
- />
58
- <span style={{ zIndex: 1 }}>{i18n('select')}</span>
59
- </label>
60
- ) : (
61
- <div
62
- style={{
63
- position: 'absolute',
64
- opacity: 0.5,
65
- top: 0,
66
- left: 0,
67
- width: schema.width * ZOOM,
68
- height: schema.height * ZOOM,
69
- backgroundImage: `url(${placeholder || imageExample})`,
70
- backgroundSize: 'cover',
71
- backgroundPosition: 'center',
72
- backgroundRepeat: 'no-repeat',
73
- }}
74
- ></div>
70
+ >
71
+ <input
72
+ ref={ref}
73
+ tabIndex={tabIndex}
74
+ value={fileName}
75
+ onChange={(event: ChangeEvent<HTMLInputElement>) =>
76
+ readFiles(event.target.files, 'dataURL').then((result) => onChange(result as string))
77
+ }
78
+ type="file"
79
+ accept="image/jpeg, image/png"
80
+ />
81
+ </label>
82
+ </>
75
83
  );
76
84
  };
77
85
 
78
- const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) =>
79
- props.schema.data ? <FilledImage {...props} /> : <BlankImage {...props} inputRef={ref} />;
80
-
81
86
  export default forwardRef<HTMLInputElement, Props>(ImageSchemaUI);
@@ -30,7 +30,7 @@ const TextSchemaUI = (
30
30
  wordBreak: 'break-all',
31
31
  background: 'transparent',
32
32
  border: 'none',
33
- color: schema.fontColor ?? DEFAULT_FONT_COLOR,
33
+ color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
34
34
  };
35
35
 
36
36
  return editable ? (
package/src/constants.ts CHANGED
@@ -7,3 +7,5 @@ export const ZOOM = 3.7795275591;
7
7
  export const SELECTABLE_CLASSNAME = 'selectable';
8
8
 
9
9
  export const RULER_HEIGHT = 30;
10
+
11
+ export const SIDEBAR_WIDTH = 300;
package/src/helper.ts CHANGED
@@ -61,15 +61,6 @@ export const round = (number: number, precision: number) => {
61
61
  return shift(Math.round(shift(number, precision, false)), precision, true);
62
62
  };
63
63
 
64
- export const arrayMove = <T>(array: T[], from: number, to: number): T[] => {
65
- array = array.slice();
66
- const startIndex = to < 0 ? array.length + to : to;
67
- const [item] = array.splice(from, 1);
68
- array.splice(startIndex, 0, item);
69
-
70
- return array;
71
- };
72
-
73
64
  export const cloneDeep = <T>(value: T): T => JSON.parse(JSON.stringify(value));
74
65
 
75
66
  export const flatten = <T>(arr: T[][]): T[] => ([] as T[]).concat(...arr);
@@ -96,6 +87,8 @@ const undoWin = 'ctrl+z';
96
87
  const undoMac = 'command+z';
97
88
  const saveWin = 'ctrl+s';
98
89
  const saveMac = 'command+s';
90
+ const selectAllWin = 'ctrl+a';
91
+ const selectAllMac = 'command+a';
99
92
 
100
93
  const keys = [
101
94
  up,
@@ -119,6 +112,8 @@ const keys = [
119
112
  undoMac,
120
113
  saveWin,
121
114
  saveMac,
115
+ selectAllWin,
116
+ selectAllMac,
122
117
  ];
123
118
 
124
119
  export const initShortCuts = (arg: {
@@ -130,6 +125,7 @@ export const initShortCuts = (arg: {
130
125
  redo: () => void;
131
126
  undo: () => void;
132
127
  save: () => void;
128
+ selectAll: () => void;
133
129
  }) => {
134
130
  hotkeys(keys.join(), (e, handler) => {
135
131
  switch (handler.shortcut) {
@@ -181,6 +177,11 @@ export const initShortCuts = (arg: {
181
177
  e.preventDefault();
182
178
  arg.save();
183
179
  break;
180
+ case selectAllWin:
181
+ case selectAllMac:
182
+ e.preventDefault();
183
+ arg.selectAll();
184
+ break;
184
185
  default:
185
186
  break;
186
187
  }
@@ -225,33 +226,6 @@ export const readFiles = (files: FileList | null, type: 'text' | 'dataURL' | 'ar
225
226
  });
226
227
  };
227
228
 
228
- const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =>
229
- new Array(pageNum).fill('').reduce((acc, _, i) => {
230
- acc.push(
231
- template.schemas[i]
232
- ? Object.entries(template.schemas[i])
233
- .sort((a, b) => {
234
- const aIndex = (template.columns ?? []).findIndex((c) => c === a[0]);
235
- const bIndex = (template.columns ?? []).findIndex((c) => c === b[0]);
236
-
237
- return aIndex > bIndex ? 1 : -1;
238
- })
239
- .map((e) => {
240
- const [key, value] = e;
241
- const data = template.sampledata ? template.sampledata[0][key] : '';
242
-
243
- return Object.assign(value, {
244
- key,
245
- data,
246
- id: uuid(),
247
- });
248
- })
249
- : []
250
- );
251
-
252
- return acc;
253
- }, [] as SchemaForUI[][]);
254
-
255
229
  const pt2mm = (pt: number) => {
256
230
  // https://www.ddc.co.jp/words/archives/20090701114500.html
257
231
  const mmRatio = 0.3527;
@@ -316,6 +290,33 @@ export const b64toBlob = (base64: string) => {
316
290
  return new Blob([uniy8Array.buffer], { type: mimeType });
317
291
  };
318
292
 
293
+ const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =>
294
+ new Array(pageNum).fill('').reduce((acc, _, i) => {
295
+ acc.push(
296
+ template.schemas[i]
297
+ ? Object.entries(template.schemas[i])
298
+ .sort((a, b) => {
299
+ const aIndex = (template.columns ?? []).findIndex((c) => c === a[0]);
300
+ const bIndex = (template.columns ?? []).findIndex((c) => c === b[0]);
301
+
302
+ return aIndex > bIndex ? 1 : -1;
303
+ })
304
+ .map((e) => {
305
+ const [key, value] = e;
306
+ const data = template.sampledata ? template.sampledata[0][key] : '';
307
+
308
+ return Object.assign(value, {
309
+ key,
310
+ data,
311
+ id: uuid(),
312
+ });
313
+ })
314
+ : []
315
+ );
316
+
317
+ return acc;
318
+ }, [] as SchemaForUI[][]);
319
+
319
320
  export const templateSchemas2SchemasList = async (_template: Template) => {
320
321
  const template = cloneDeep(_template);
321
322
  const sortedSchemasList = sortSchemasList(template, template.schemas.length);
@@ -400,6 +401,9 @@ export const getInitialSchema = (): SchemaForUI => ({
400
401
 
401
402
  export const getSampleByType = (type: string) => {
402
403
  const defaultValue: { [key: string]: string } = {
404
+ text: 'text',
405
+ image:
406
+ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAALuAQMAAADL0wGJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURbzAw+rv8fKruy0AAAPoSURBVHja7dwxbtwwEEBRCkKwRQodYftcYk+ROkcJz5NTsEuZK/AIKlIQAUEnke0VqQ0pA5zxWvFnZcD2s0CNuENxPOZBc0QDDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD/+P8bkxvnTzzjTG0M2b5rh08rHNT518aPOnTt63+aGTd23edPJ2h//ax+/oO6Gzx6c78+cuPu7x01vmwx5/6uLnO/PjO+b/rGifvtWH3VnT9vmh/e3eqx/bc9d79af2YwEPDw8P/6r8r1GVt5VcUoZPtXxGhp9rGYEM72vbEBne1hJ5Gb6ayIvwqZppi/CxmgqL8KGaTIrwc3WDfATeV/ffIryr7r+PwNvq/vsIfH17D5/qbw/gb/mLKp/OqnycFPj14yqcJPm4vfp5VJ0cP6jyzqjy9rr2q/Dr4qzBp3V5E1wxp/V3rl8LXn32qF6fAY31Psv2NXi/5lQaH+Vuzak0eLsmPRppVPa3FPiU3QiFFDZmD4FCAh6yxV+Bn7O9isLmx2d/TGHr5rI7obDxtFkcKWyb89M2+U1/sX7Kv7Io8gaxFy5l2D/faRk++3x6PgsalV52+fwUW4j/+eGhDPuneyH/otHmp9jyfHHMLM6n4phZnI/FObA4H4qDWnF+Lo46xXlflG+I864o3xDnbVG+Ic6X9RXSfCrrK6T5WBZASPOhrFCQ5ufyjF+a92XdkjTvyrolad6WdUvS/KawSI7/sQn7JfDl+O+bsF8CX44fN2FvHnNnIT4Nm7BfAl+ON5uwXwJfjA/LCuk2BXvCvN0U7InxflmAtxV1gvx0U2N3luPtdZOlwj/FoR5vbuq85Pi48F6LD0scOk3+sq1cleP9ohlNfkpq/N9pGaMuH7T4ZVqGWYt/nBavyxstftblfaVIWJU/y72yODCfzJH5oMvPh+adLm+PzCdzZD5U/61ClT9Lnvyo8e7QvFHlE3ydj0zOu5ucickhcpgcJofJedUVk8j5b/nGgIeHh4d/I3x/RwLlhgfNH3DavSwGXf7YjT76uqCEQ/P37p9z7uKVmwspd17S7hul3PXK6fbsmnvWhO6GZlMnn3ri8gXN5GzHnX0B35ydj91814CHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHl+d/A9cKjmiL040TAAAAAElFTkSuQmCC',
403
407
  qrcode: 'https://pdfme.com/',
404
408
  japanpost: '6540123789-A-K-Z',
405
409
  ean13: '2112345678900',
@@ -417,6 +421,7 @@ export const getSampleByType = (type: string) => {
417
421
 
418
422
  export const getKeepRatioHeightByWidth = (type: string, width: number) => {
419
423
  const raito: { [key: string]: number } = {
424
+ image: 1,
420
425
  qrcode: 1,
421
426
  japanpost: 0.09,
422
427
  ean13: 0.4,
@@ -499,7 +504,7 @@ export const moveCommandToChangeSchemasArg = (props: {
499
504
  break;
500
505
  }
501
506
 
502
- return value;
507
+ return value > 0 ? value : 0;
503
508
  };
504
509
 
505
510
  return activeSchemas.map((as) => {
package/src/hooks.ts CHANGED
@@ -105,3 +105,14 @@ export const useScrollPageCursor = ({
105
105
  };
106
106
  }, [rootRef, onScroll]);
107
107
  };
108
+
109
+ export const useMountStatus = () => {
110
+ const [isMounted, setIsMounted] = useState(false);
111
+
112
+ useEffect(() => {
113
+ const timeout = setTimeout(() => setIsMounted(true), 500);
114
+ return () => clearTimeout(timeout);
115
+ }, []);
116
+
117
+ return isMounted;
118
+ };
package/src/i18n.ts CHANGED
@@ -4,6 +4,7 @@ import { DEFAULT_LANG } from './constants';
4
4
  type DictEn = typeof dictEn;
5
5
 
6
6
  const dictEn = {
7
+ cancel: 'Cancel',
7
8
  field: 'field',
8
9
  fieldName: 'Name',
9
10
  require: 'Required',
@@ -20,18 +21,20 @@ const dictEn = {
20
21
  addNewField: 'Add new field',
21
22
  editField: 'Edit Field',
22
23
  type: 'Type',
23
- previewWarnMsg: 'Preview is not available on iOS devices.',
24
- previewErrMsg:
25
- 'An error occurred during the PDF creation process. (Characters that are not in the Helvetica font are not available)',
26
24
  goToFirst: 'Go to first',
27
25
  goToPrevious: 'Back',
28
26
  goToNext: 'Next',
29
27
  goToEnd: 'Go to end',
30
28
  select: 'Select',
31
- errorOccurred: 'An error occurred.',
29
+ errorOccurred: 'An error occurred',
30
+ errorBulkUpdateFieldName:
31
+ 'Cannot commit the change because the number of items has been changed.',
32
+ commitBulkUpdateFieldName: 'Commit Changes',
33
+ bulkUpdateFieldName: 'Bulk update field names',
32
34
  };
33
35
 
34
36
  const dictJa: { [key in keyof DictEn]: string } = {
37
+ cancel: 'キャンセル',
35
38
  field: '入力項目',
36
39
  fieldName: '項目名',
37
40
  require: '必須',
@@ -48,15 +51,15 @@ const dictJa: { [key in keyof DictEn]: string } = {
48
51
  addNewField: '入力項目を追加',
49
52
  editField: '入力項目を編集',
50
53
  type: 'タイプ',
51
- previewWarnMsg: 'iOS端末ではプレビューができません。',
52
- previewErrMsg:
53
- 'PDF作成処理でエラーが発生しました。お手数ですがコンタクトからお問い合わせください。',
54
54
  goToFirst: '最初に戻る',
55
55
  goToPrevious: '1つ戻る',
56
56
  goToNext: '1つ進む',
57
57
  goToEnd: '最後に進む',
58
58
  select: '選択',
59
59
  errorOccurred: 'エラーが発生しました',
60
+ errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
61
+ commitBulkUpdateFieldName: '変更を反映',
62
+ bulkUpdateFieldName: '項目名を一括変更',
60
63
  };
61
64
 
62
65
  const i18n = (lang: Lang, key: keyof DictEn) => (lang === DEFAULT_LANG ? dictEn[key] : dictJa[key]);
package/tsconfig.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "noImplicitAny": true,
4
- "target": "es5",
4
+ "target": "ES2015",
5
5
  "jsx": "react",
6
6
  "esModuleInterop": true,
7
7
  "isolatedModules": true,
package/webpack.config.js CHANGED
@@ -1,7 +1,6 @@
1
1
  const path = require('path');
2
2
  const webpack = require('webpack');
3
3
  // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
4
- const HtmlWebpackPlugin = require('html-webpack-plugin');
5
4
  const pkg = require('./package.json');
6
5
 
7
6
  const isProduction = process.env.NODE_ENV === 'production';
@@ -28,31 +27,14 @@ const config = {
28
27
  banner: BANNER,
29
28
  entryOnly: true,
30
29
  }),
31
- new HtmlWebpackPlugin({
32
- template: './public/Designer.html',
33
- filename: 'Designer.html',
34
- }),
35
- new HtmlWebpackPlugin({
36
- template: './public/Viewer.html',
37
- filename: 'Viewer.html',
38
- }),
39
- new HtmlWebpackPlugin({
40
- template: './public/Form.html',
41
- filename: 'Form.html',
42
- }),
43
30
  ],
44
31
  devtool: 'source-map',
45
- devServer: {
46
- historyApiFallback: false,
47
- host: '0.0.0.0',
48
- },
49
32
  entry: './src/index.ts',
50
33
  output: {
51
34
  path: path.resolve(__dirname, 'dist'),
52
35
  filename: 'index.js',
53
36
  globalObject: 'this',
54
37
  library: {
55
- name: pkg.name,
56
38
  type: 'umd',
57
39
  },
58
40
  },
@@ -1,6 +0,0 @@
1
- export declare const DEFAULT_FONT_SIZE = 13;
2
- export declare const DEFAULT_ALIGNMENT = "left";
3
- export declare const DEFAULT_LINE_HEIGHT = 1;
4
- export declare const DEFAULT_CHARACTER_SPACING = 0;
5
- export declare const DEFAULT_FONT_COLOR = "#000";
6
- export declare const BLANK_PDF = "data:application/pdf;base64,JVBERi0xLjcKJeLjz9MKNSAwIG9iago8PAovRmlsdGVyIC9GbGF0ZURlY29kZQovTGVuZ3RoIDM4Cj4+CnN0cmVhbQp4nCvkMlAwUDC1NNUzMVGwMDHUszRSKErlCtfiyuMK5AIAXQ8GCgplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL01lZGlhQm94IFswIDAgNTk1LjQ0IDg0MS45Ml0KL1Jlc291cmNlcyA8PAo+PgovQ29udGVudHMgNSAwIFIKL1BhcmVudCAyIDAgUgo+PgplbmRvYmoKMiAwIG9iago8PAovVHlwZSAvUGFnZXMKL0tpZHMgWzQgMCBSXQovQ291bnQgMQo+PgplbmRvYmoKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMiAwIFIKPj4KZW5kb2JqCjMgMCBvYmoKPDwKL3RyYXBwZWQgKGZhbHNlKQovQ3JlYXRvciAoU2VyaWYgQWZmaW5pdHkgRGVzaWduZXIgMS4xMC40KQovVGl0bGUgKFVudGl0bGVkLnBkZikKL0NyZWF0aW9uRGF0ZSAoRDoyMDIyMDEwNjE0MDg1OCswOScwMCcpCi9Qcm9kdWNlciAoaUxvdmVQREYpCi9Nb2REYXRlIChEOjIwMjIwMTA2MDUwOTA5WikKPj4KZW5kb2JqCjYgMCBvYmoKPDwKL1NpemUgNwovUm9vdCAxIDAgUgovSW5mbyAzIDAgUgovSUQgWzwyODhCM0VENTAyOEU0MDcyNERBNzNCOUE0Nzk4OUEwQT4gPEY1RkJGNjg4NkVERDZBQUNBNDRCNEZDRjBBRDUxRDlDPl0KL1R5cGUgL1hSZWYKL1cgWzEgMiAyXQovRmlsdGVyIC9GbGF0ZURlY29kZQovSW5kZXggWzAgN10KL0xlbmd0aCAzNgo+PgpzdHJlYW0KeJxjYGD4/5+RUZmBgZHhFZBgDAGxakAEP5BgEmFgAABlRwQJCmVuZHN0cmVhbQplbmRvYmoKc3RhcnR4cmVmCjUzMgolJUVPRgo=";
@@ -1,15 +0,0 @@
1
- import { Template, BasePdf, Font, BarCodeType } from './type';
2
- export declare const getB64BasePdf: (basePdf: BasePdf) => string | Promise<string>;
3
- export declare const b64toUint8Array: (base64: string) => Uint8Array;
4
- export declare const getFallbackFontName: (font: Font) => string;
5
- export declare const getDefaultFont: () => Font;
6
- export declare const checkFont: (arg: {
7
- font: Font;
8
- template: Template;
9
- }) => void;
10
- export declare const checkTemplate: (data: unknown) => void;
11
- export declare const checkUIProps: (data: unknown) => void;
12
- export declare const checkPreviewProps: (data: unknown) => void;
13
- export declare const checkDesignerProps: (data: unknown) => void;
14
- export declare const checkGenerateProps: (data: unknown) => void;
15
- export declare const validateBarcodeInput: (type: BarCodeType, input: string) => boolean;
@@ -1,6 +0,0 @@
1
- import { DEFAULT_FONT_SIZE, DEFAULT_ALIGNMENT, DEFAULT_LINE_HEIGHT, DEFAULT_CHARACTER_SPACING, DEFAULT_FONT_COLOR, BLANK_PDF } from './constants';
2
- import { schemaTypes, isImageSchema, isBarcodeSchema, isTextSchema } from './type';
3
- import type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, PreviewReactProps, DesignerProps, DesignerReactProps } from './type';
4
- import { getB64BasePdf, b64toUint8Array, getFallbackFontName, getDefaultFont, checkFont, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput } from './helper';
5
- export { DEFAULT_FONT_SIZE, DEFAULT_ALIGNMENT, DEFAULT_LINE_HEIGHT, DEFAULT_CHARACTER_SPACING, DEFAULT_FONT_COLOR, BLANK_PDF, schemaTypes, isTextSchema, isImageSchema, isBarcodeSchema, getB64BasePdf, b64toUint8Array, getFallbackFontName, getDefaultFont, checkFont, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, };
6
- export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, PreviewReactProps, DesignerProps, DesignerReactProps, };