rename files

public/index.html

@@ -148,7 +148,7 @@
             resolve(t);
           });
         };
-        LabelmakeUi.Editor.init(
+        LabelmakeUi.TemplateDesigner.init(
           domContainer,
           JSON.parse(localStorage.getItem('template')) || getSampleTemplate(),
           saveTemplate,
@@ -163,7 +163,7 @@
         previewDestroy();
       }
       function editorDestroy() {
-        LabelmakeUi.Editor.destroy();
+        LabelmakeUi.TemplateDesigner.destroy();
       }
     </script>
   </body>

src/Form.tsx

@@ -0,0 +1,10 @@
+import { PageSize, Template } from './libs/type';
+import Preview from './components/Preview';
+
+const Form = (props: {
+  template: Template;
+  inputs: { [key: string]: string }[];
+  size: PageSize;
+}) => <Preview {...props} />;
+
+export default Form;

src/TemplateDesigner/Header/index.tsx

@@ -1,15 +1,15 @@
 import { useContext } from 'react';
 import * as styles from './index.module.scss';
 import labelmake from 'labelmake';
-import { isIos, fmtTemplate, sortSchemas, readFile, fmtTemplateFromJson } from '../../../utils';
-import visibility from '../../../images/visibility.svg';
-import save from '../../../images/save.svg';
-import pdf from '../../../images/pdf.svg';
-import download from '../../../images/download_bk.svg';
-import { EditorHeaderProp } from '../../../type';
-import { I18nContext } from '../../../i18n';
+import { isIos, fmtTemplate, sortSchemas, readFile, fmtTemplateFromJson } from '../../libs/utils';
+import visibility from '../../assets/visibility.svg';
+import save from '../../assets/save.svg';
+import pdf from '../../assets/pdf.svg';
+import download from '../../assets/download_bk.svg';
+import { TemplateDesignerHeaderProp } from '../../libs/type';
+import { I18nContext } from '../../libs/i18n';
 
-const Header = ({ processing, template, saveTemplate, updateTemplate }: EditorHeaderProp) => {
+const Header = ({ processing, template, saveTemplate, updateTemplate }: TemplateDesignerHeaderProp) => {
   const i18n = useContext(I18nContext);
   const previewPdf = () => {
     if (isIos()) {

src/TemplateDesigner/Main/index.tsx

@@ -5,12 +5,12 @@ import Selecto from 'react-selecto';
 import Moveable, { OnDrag, OnResize } from 'react-moveable';
 import Guides from '@scena/react-guides';
 import * as styles from './index.module.scss';
-import { GuidesInterface, Schema, PageSize } from '../../../type';
-import { round, flatten, getFontFamily } from '../../../utils';
-import { barcodeList, zoom, rulerHeight } from '../../../constants';
-import TextSchema from '../../TextSchema';
-import ImageSchema from '../../ImageSchema';
-import BarcodeSchema from '../../BarcodeSchema';
+import { GuidesInterface, Schema, PageSize } from '../../libs/type';
+import { round, flatten, getFontFamily } from '../../libs/utils';
+import { barcodeList, zoom, rulerHeight } from '../../libs/constants';
+import TextSchema from '../../components/Schemas/TextSchema';
+import ImageSchema from '../../components/Schemas/ImageSchema';
+import BarcodeSchema from '../../components/Schemas/BarcodeSchema';
 
 const SELECTABLE = 'selectable';
 
@@ -82,6 +82,9 @@ const Main = ({
   }, [schemas, activeElements]);
 
   const onDrag = ({ target, left, top }: OnDrag) => {
+    // TODO ドラッグ時にスケールのせいで値がちゃんと設定されない
+    // editorのサイズが小さい時にドラッグで思ったように動かない #1434
+    console.log(scale)
     target!.style.left = (left < 0 ? 0 : left) + 'px';
     target!.style.top = (top < 0 ? 0 : top) + 'px';
   };

src/TemplateDesigner/Sidebar/index.tsx

@@ -1,18 +1,18 @@
 import { useState, useContext } from 'react';
 import * as styles from './index.module.scss';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
-import { Schema } from '../../../type';
-import { readFiles } from '../../../utils';
-import { I18nContext } from '../../../i18n';
-import { inputTypeList } from '../../../constants';
-import Divider from '../../Divider';
-import backIcon from '../../../images/back.svg';
-import forwardIcon from '../../../images/forward.svg';
-import infoIcon from '../../../images/info.svg';
-import createIcon from '../../../images/create.svg';
-import dragIcon from '../../../images/drag.svg';
-import warningIcon from '../../../images/warning.svg';
-import deleteIcon from '../../../images/delete.svg';
+import { Schema } from '../../libs/type';
+import { readFiles } from '../../libs/utils';
+import { I18nContext } from '../../libs/i18n';
+import { inputTypeList } from '../../libs/constants';
+import Divider from '../../components/Divider';
+import backIcon from '../../assets/back.svg';
+import forwardIcon from '../../assets/forward.svg';
+import infoIcon from '../../assets/info.svg';
+import createIcon from '../../assets/create.svg';
+import dragIcon from '../../assets/drag.svg';
+import warningIcon from '../../assets/warning.svg';
+import deleteIcon from '../../assets/delete.svg';
 
 const Sidebar = ({
   pageCursor,

src/TemplateDesigner/index.tsx

@@ -1,10 +1,10 @@
 import { useRef, useState, useEffect, useContext } from 'react';
 import * as styles from './index.module.scss';
-import { Template, Schema, TemplateEditorProp } from '../../type';
+import { Template, Schema, TemplateEditorProp } from '../libs/type';
 import Sidebar from './Sidebar';
 import Main from './Main';
-import { zoom, rulerHeight } from '../../constants';
-import { I18nContext } from '../../i18n';
+import { zoom, rulerHeight } from '../libs/constants';
+import { I18nContext } from '../libs/i18n';
 import {
   uuid,
   set,
@@ -22,8 +22,8 @@ import {
   getSampleByType,
   getKeepRaitoHeightByWidth,
   getB64BasePdf,
-} from '../../utils';
-import { useUiPreProcessor } from '../../hooks';
+} from '../libs/utils';
+import { useUiPreProcessor } from '../libs/hooks';
 
 const fmtValue = (key: string, value: string) => {
   const skip = ['id', 'key', 'type', 'data', 'alignment', 'fontColor', 'backgroundColor'];

src/Viewer.tsx

@@ -0,0 +1,10 @@
+import { PageSize, Template } from './libs/type';
+import Preview from './components/Preview';
+
+const Form = (props: {
+  template: Template;
+  inputs: { [key: string]: string }[];
+  size: PageSize;
+}) => <Preview {...props} />;
+
+export default Form;

src/components/Preview/Pager/index.tsx

@@ -1,10 +1,10 @@
 import * as styles from './index.module.scss';
-import left from '../../../images/left.svg';
-import right from '../../../images/right.svg';
-import doubleLeft from '../../../images/double-left.svg';
-import doubleRight from '../../../images/double-right.svg';
+import left from '../../../assets/left.svg';
+import right from '../../../assets/right.svg';
+import doubleLeft from '../../../assets/double-left.svg';
+import doubleRight from '../../../assets/double-right.svg';
 import { useContext } from 'react';
-import { I18nContext } from '../../../i18n';
+import { I18nContext } from '../../../libs/i18n';
 
 const Pager = ({
   isOpen,

src/components/Preview/index.tsx

@@ -2,14 +2,14 @@ import { useState } from 'react';
 import * as styles from './index.module.scss';
 import Tippy from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
-import { PreviewProp } from '../../type';
-import { barcodeList, zoom, rulerHeight } from '../../constants';
-import { getFontFamily } from '../../utils';
+import { PreviewProp } from '../../libs/type';
+import { barcodeList, zoom, rulerHeight } from '../../libs/constants';
+import { getFontFamily } from '../../libs/utils';
 import Pager from './Pager';
-import TextSchema from '../TextSchema';
-import ImageSchema from '../ImageSchema';
-import BarcodeSchema from '../BarcodeSchema';
-import { useUiPreProcessor } from '../../hooks';
+import TextSchema from '../Schemas/TextSchema';
+import ImageSchema from '../Schemas/ImageSchema';
+import BarcodeSchema from '../Schemas/BarcodeSchema';
+import { useUiPreProcessor } from '../../libs/hooks';
 
 const LabelEditorPreview = ({ template, inputs, size, onChangeInput }: PreviewProp) => {
   const offset = rulerHeight;

src/components/Schemas/BarcodeSchema/index.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import * as styles from './index.module.scss';
-import { zoom, barcodeExampleImageObj } from '../../constants';
-import { validateBarcodeInput } from '../../utils';
-import { SchemaUIProp, TemplateSchema } from '../../type';
+import { zoom, barcodeExampleImageObj } from '../../../libs/constants';
+import { validateBarcodeInput } from '../../../libs/utils';
+import { SchemaUIProp, TemplateSchema } from '../../../libs/type';
 
 const SampleBarcode = ({ schema }: { schema: TemplateSchema }) => (
   <img

src/components/Schemas/ImageSchema/index.tsx

@@ -1,9 +1,9 @@
 import { forwardRef, ChangeEvent, useContext } from 'react';
 import * as styles from './index.module.scss';
-import { zoom } from '../../constants';
-import { readFiles } from '../../utils';
-import { SchemaUIProp } from '../../type';
-import { I18nContext } from '../../i18n';
+import { zoom } from '../../../libs/constants';
+import { readFiles } from '../../../libs/utils';
+import { SchemaUIProp } from '../../../libs/type';
+import { I18nContext } from '../../../libs/i18n';
 
 const ImageSchema = forwardRef<HTMLInputElement, SchemaUIProp>(
   ({ schema, value, editable, placeholder, tabIndex, onChange }, ref) => {

src/components/Schemas/TextSchema/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import * as styles from './index.module.scss';
-import { zoom } from '../../constants';
-import { SchemaUIProp } from '../../type';
+import { zoom } from '../../../libs/constants';
+import { SchemaUIProp } from '../../../libs/type';
 
 const TextSchema = forwardRef<HTMLTextAreaElement, SchemaUIProp>(
   ({ schema, value, editable, placeholder, tabIndex, onChange }, ref) => (

src/index.tsx

@@ -1,33 +1,33 @@
-import EditorComponents from './components/Editor';
+import TemplateDesignerComponent from './TemplateDesigner';
 import PreviewComponents from './components/Preview';
-import EditorHeader from './components/Editor/Header';
+import TemplateDesignerHeader from './TemplateDesigner/Header';
 import ReactDOM from 'react-dom';
-import { PageSize, Template, EditorHeaderProp } from './type';
-import { blankPdf, lang } from './constants';
-import { I18nContext, curriedI18n } from './i18n';
+import { PageSize, Template, TemplateDesignerHeaderProp } from './libs/type';
+import { blankPdf, lang } from './libs/constants';
+import { I18nContext, curriedI18n } from './libs/i18n';
 
 // このように変数にすると1ページ内で複数のeditor,previewインスタンスを作成できない
 let _editorDomContainer: HTMLElement | null = null;
 let _previewDomContainer: HTMLElement | null = null;
 
-const Editor = {
+const TemplateDesigner = {
   init: (
     domContainer: HTMLElement,
     template: Template,
     saveTemplate: (template: Template) => Promise<Template>,
     size: PageSize,
-    customHeader?: React.ComponentType<EditorHeaderProp>
+    customHeader?: React.ComponentType<TemplateDesignerHeaderProp>
   ) => {
     _editorDomContainer = domContainer;
     const i18n = curriedI18n(lang);
 
     ReactDOM.render(
       <I18nContext.Provider value={i18n}>
-        <EditorComponents
+        <TemplateDesignerComponent
           template={template}
           saveTemplate={saveTemplate}
           size={size}
-          Header={customHeader || EditorHeader}
+          Header={customHeader || TemplateDesignerHeader}
         />
       </I18nContext.Provider>,
       domContainer
@@ -72,5 +72,5 @@ const Preview = {
   },
 };
 
-export default { Editor, Preview, blankPdf };
-export { Editor, Preview, blankPdf };
+export default { TemplateDesigner, Preview, blankPdf };
+export { TemplateDesigner, Preview, blankPdf };

src/libs/constants.ts

@@ -1,13 +1,13 @@
-import ean8 from './images/barcodeExamples/ean8.png';
-import ean13 from './images/barcodeExamples/ean13.png';
-import code39 from './images/barcodeExamples/code39.png';
-import code128 from './images/barcodeExamples/code128.png';
-import nw7 from './images/barcodeExamples/nw7.png';
-import itf14 from './images/barcodeExamples/itf14.png';
-import japanpost from './images/barcodeExamples/japanpost.png';
-import qrcode from './images/barcodeExamples/qrcode.png';
-import upca from './images/barcodeExamples/upca.png';
-import upce from './images/barcodeExamples/upce.png';
+import ean8 from '../assets/barcodeExamples/ean8.png';
+import ean13 from '../assets/barcodeExamples/ean13.png';
+import code39 from '../assets/barcodeExamples/code39.png';
+import code128 from '../assets/barcodeExamples/code128.png';
+import nw7 from '../assets/barcodeExamples/nw7.png';
+import itf14 from '../assets/barcodeExamples/itf14.png';
+import japanpost from '../assets/barcodeExamples/japanpost.png';
+import qrcode from '../assets/barcodeExamples/qrcode.png';
+import upca from '../assets/barcodeExamples/upca.png';
+import upce from '../assets/barcodeExamples/upce.png';
 
 export const lang = 'en';
 

src/libs/type.ts

@@ -34,10 +34,10 @@ export interface TemplateEditorProp {
   template: Template;
   saveTemplate: (template: Template) => Promise<Template>;
   size: PageSize;
-  Header: React.ComponentType<EditorHeaderProp>;
+  Header: React.ComponentType<TemplateDesignerHeaderProp>;
 }
 
-export interface EditorHeaderProp {
+export interface TemplateDesignerHeaderProp {
   processing: boolean;
   template: Template;
   saveTemplate: (template: Template) => Promise<Template>;

src/stories/Simple.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { Template } from '../type';
-import { Editor, blankPdf } from '../index';
+import { Template } from '../libs/type';
+import { TemplateDesigner, blankPdf } from '../index';
 
 export const Simple = () => {
   useEffect(() => {
@@ -46,7 +46,7 @@ export const Simple = () => {
       return Promise.resolve(t);
     };
 
-    Editor.init(domContainer, getTemplate(), saveTemplate, { height: 500, width: 500 });
+    TemplateDesigner.init(domContainer, getTemplate(), saveTemplate, { height: 500, width: 500 });
   });
   return (
     <article>

tsconfig.json

@@ -13,6 +13,6 @@
     "sourceMap": true
   },
   "baseUrl": ".",
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx"],
+  "include": ["declaration.d.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]
 }