diff --git a/src/declaration.d.ts b/declaration.d.ts similarity index 100% rename from src/declaration.d.ts rename to declaration.d.ts diff --git a/public/index.html b/public/index.html index c62451b0..15786647 100644 --- a/public/index.html +++ b/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(); } diff --git a/src/Form.tsx b/src/Form.tsx new file mode 100644 index 00000000..337fae44 --- /dev/null +++ b/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; +}) => ; + +export default Form; diff --git a/src/components/Editor/Header/index.module.scss b/src/TemplateDesigner/Header/index.module.scss similarity index 100% rename from src/components/Editor/Header/index.module.scss rename to src/TemplateDesigner/Header/index.module.scss diff --git a/src/components/Editor/Header/index.tsx b/src/TemplateDesigner/Header/index.tsx similarity index 88% rename from src/components/Editor/Header/index.tsx rename to src/TemplateDesigner/Header/index.tsx index 190c80fd..8869fd1e 100644 --- a/src/components/Editor/Header/index.tsx +++ b/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()) { diff --git a/src/components/Editor/Main/index.module.scss b/src/TemplateDesigner/Main/index.module.scss similarity index 100% rename from src/components/Editor/Main/index.module.scss rename to src/TemplateDesigner/Main/index.module.scss diff --git a/src/components/Editor/Main/index.tsx b/src/TemplateDesigner/Main/index.tsx similarity index 96% rename from src/components/Editor/Main/index.tsx rename to src/TemplateDesigner/Main/index.tsx index e8c28c44..f9565896 100644 --- a/src/components/Editor/Main/index.tsx +++ b/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'; }; diff --git a/src/components/Editor/Sidebar/index.module.scss b/src/TemplateDesigner/Sidebar/index.module.scss similarity index 100% rename from src/components/Editor/Sidebar/index.module.scss rename to src/TemplateDesigner/Sidebar/index.module.scss diff --git a/src/components/Editor/Sidebar/index.tsx b/src/TemplateDesigner/Sidebar/index.tsx similarity index 97% rename from src/components/Editor/Sidebar/index.tsx rename to src/TemplateDesigner/Sidebar/index.tsx index 0fb2952a..d3bbc4cb 100644 --- a/src/components/Editor/Sidebar/index.tsx +++ b/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, diff --git a/src/components/Editor/index.module.scss b/src/TemplateDesigner/index.module.scss similarity index 100% rename from src/components/Editor/index.module.scss rename to src/TemplateDesigner/index.module.scss diff --git a/src/components/Editor/index.tsx b/src/TemplateDesigner/index.tsx similarity index 97% rename from src/components/Editor/index.tsx rename to src/TemplateDesigner/index.tsx index 20b7aafc..7f2f9632 100644 --- a/src/components/Editor/index.tsx +++ b/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']; diff --git a/src/Viewer.tsx b/src/Viewer.tsx new file mode 100644 index 00000000..337fae44 --- /dev/null +++ b/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; +}) => ; + +export default Form; diff --git a/src/images/back.svg b/src/assets/back.svg similarity index 100% rename from src/images/back.svg rename to src/assets/back.svg diff --git a/src/images/barcodeExamples/code128.png b/src/assets/barcodeExamples/code128.png similarity index 100% rename from src/images/barcodeExamples/code128.png rename to src/assets/barcodeExamples/code128.png diff --git a/src/images/barcodeExamples/code39.png b/src/assets/barcodeExamples/code39.png similarity index 100% rename from src/images/barcodeExamples/code39.png rename to src/assets/barcodeExamples/code39.png diff --git a/src/images/barcodeExamples/ean13.png b/src/assets/barcodeExamples/ean13.png similarity index 100% rename from src/images/barcodeExamples/ean13.png rename to src/assets/barcodeExamples/ean13.png diff --git a/src/images/barcodeExamples/ean8.png b/src/assets/barcodeExamples/ean8.png similarity index 100% rename from src/images/barcodeExamples/ean8.png rename to src/assets/barcodeExamples/ean8.png diff --git a/src/images/barcodeExamples/itf14.png b/src/assets/barcodeExamples/itf14.png similarity index 100% rename from src/images/barcodeExamples/itf14.png rename to src/assets/barcodeExamples/itf14.png diff --git a/src/images/barcodeExamples/japanpost.png b/src/assets/barcodeExamples/japanpost.png similarity index 100% rename from src/images/barcodeExamples/japanpost.png rename to src/assets/barcodeExamples/japanpost.png diff --git a/src/images/barcodeExamples/nw7.png b/src/assets/barcodeExamples/nw7.png similarity index 100% rename from src/images/barcodeExamples/nw7.png rename to src/assets/barcodeExamples/nw7.png diff --git a/src/images/barcodeExamples/qrcode.png b/src/assets/barcodeExamples/qrcode.png similarity index 100% rename from src/images/barcodeExamples/qrcode.png rename to src/assets/barcodeExamples/qrcode.png diff --git a/src/images/barcodeExamples/upca.png b/src/assets/barcodeExamples/upca.png similarity index 100% rename from src/images/barcodeExamples/upca.png rename to src/assets/barcodeExamples/upca.png diff --git a/src/images/barcodeExamples/upce.png b/src/assets/barcodeExamples/upce.png similarity index 100% rename from src/images/barcodeExamples/upce.png rename to src/assets/barcodeExamples/upce.png diff --git a/src/images/create.svg b/src/assets/create.svg similarity index 100% rename from src/images/create.svg rename to src/assets/create.svg diff --git a/src/images/delete.svg b/src/assets/delete.svg similarity index 100% rename from src/images/delete.svg rename to src/assets/delete.svg diff --git a/src/images/double-left.svg b/src/assets/double-left.svg similarity index 100% rename from src/images/double-left.svg rename to src/assets/double-left.svg diff --git a/src/images/double-right.svg b/src/assets/double-right.svg similarity index 100% rename from src/images/double-right.svg rename to src/assets/double-right.svg diff --git a/src/images/download_bk.svg b/src/assets/download_bk.svg similarity index 100% rename from src/images/download_bk.svg rename to src/assets/download_bk.svg diff --git a/src/images/drag.svg b/src/assets/drag.svg similarity index 100% rename from src/images/drag.svg rename to src/assets/drag.svg diff --git a/src/images/forward.svg b/src/assets/forward.svg similarity index 100% rename from src/images/forward.svg rename to src/assets/forward.svg diff --git a/src/images/info.svg b/src/assets/info.svg similarity index 100% rename from src/images/info.svg rename to src/assets/info.svg diff --git a/src/images/left.svg b/src/assets/left.svg similarity index 100% rename from src/images/left.svg rename to src/assets/left.svg diff --git a/src/images/pdf.svg b/src/assets/pdf.svg similarity index 100% rename from src/images/pdf.svg rename to src/assets/pdf.svg diff --git a/src/images/right.svg b/src/assets/right.svg similarity index 100% rename from src/images/right.svg rename to src/assets/right.svg diff --git a/src/images/save.svg b/src/assets/save.svg similarity index 100% rename from src/images/save.svg rename to src/assets/save.svg diff --git a/src/images/visibility.svg b/src/assets/visibility.svg similarity index 100% rename from src/images/visibility.svg rename to src/assets/visibility.svg diff --git a/src/images/warning.svg b/src/assets/warning.svg similarity index 100% rename from src/images/warning.svg rename to src/assets/warning.svg diff --git a/src/components/Preview/Pager/index.tsx b/src/components/Preview/Pager/index.tsx index fc05bef3..c7233ddc 100644 --- a/src/components/Preview/Pager/index.tsx +++ b/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, diff --git a/src/components/Preview/index.tsx b/src/components/Preview/index.tsx index 32e0440a..c7c6d6ad 100644 --- a/src/components/Preview/index.tsx +++ b/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; diff --git a/src/components/BarcodeSchema/index.module.scss b/src/components/Schemas/BarcodeSchema/index.module.scss similarity index 100% rename from src/components/BarcodeSchema/index.module.scss rename to src/components/Schemas/BarcodeSchema/index.module.scss diff --git a/src/components/BarcodeSchema/index.tsx b/src/components/Schemas/BarcodeSchema/index.tsx similarity index 89% rename from src/components/BarcodeSchema/index.tsx rename to src/components/Schemas/BarcodeSchema/index.tsx index c1047928..5768cfd7 100644 --- a/src/components/BarcodeSchema/index.tsx +++ b/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 }) => ( ( ({ schema, value, editable, placeholder, tabIndex, onChange }, ref) => { diff --git a/src/components/TextSchema/index.module.scss b/src/components/Schemas/TextSchema/index.module.scss similarity index 100% rename from src/components/TextSchema/index.module.scss rename to src/components/Schemas/TextSchema/index.module.scss diff --git a/src/components/TextSchema/index.tsx b/src/components/Schemas/TextSchema/index.tsx similarity index 92% rename from src/components/TextSchema/index.tsx rename to src/components/Schemas/TextSchema/index.tsx index d867e006..742a65dd 100644 --- a/src/components/TextSchema/index.tsx +++ b/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( ({ schema, value, editable, placeholder, tabIndex, onChange }, ref) => ( diff --git a/src/index.tsx b/src/index.tsx index d47fbd87..f64ba11d 100644 --- a/src/index.tsx +++ b/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