@pdfme/ui 1.0.0-beta.1 → 1.0.0-beta.10

package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

@@ -1,33 +1,52 @@
 import React, { useContext } from 'react';
+import { SchemaForUI } from '@pdfme/common';
 import { readFiles } from '../../../../helper';
 import { I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
+import closeIcon from '../../../../assets/icons/close.svg';
 
-const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+const ExampleInputEditor = (
+  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
+) => {
   const { changeSchemas, activeSchema } = props;
   const i18n = useContext(I18nContext);
 
   return (
     <div>
-      <label style={{ marginBottom: 0 }}>{i18n('inputExample')}</label>
+      <label>{i18n('inputExample')}</label>
       {activeSchema.type === 'image' ? (
-        <div style={{ position: 'relative', textAlign: 'center' }}>
+        <div style={{ position: 'relative' }}>
           {activeSchema.data ? (
             <div style={{ margin: '0 auto' }}>
               <button
-                style={{ position: 'absolute', top: 0, left: 0 }}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  color: '#333',
+                  background: '#f2f2f2',
+                  cursor: 'pointer',
+                  borderRadius: 2,
+                  border: '1px solid #767676',
+                  height: 20,
+                  width: 20,
+                }}
                 aria-label="close"
                 onClick={() =>
                   changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
                 }
               >
-                x
+                <img src={closeIcon} alt="Close icon" width={10} />
               </button>
               <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
             </div>
           ) : (
             <label>
               <input
+                style={{ color: '#333', background: 'none' }}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   const { files } = e.target;
                   readFiles(files, 'dataURL').then((result) => {
@@ -50,7 +69,10 @@ const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeS
           }
           style={{
             width: '100%',
-            backgroundColor: activeSchema.data ? '#fff' : '#ffa19b',
+            border: '1px solid #767676',
+            borderRadius: 2,
+            color: '#333',
+            background: activeSchema.data ? 'none' : '#ffa19b',
           }}
           value={activeSchema.data}
         />

package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx

@@ -1,30 +1,128 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { SchemaForUI } from '@pdfme/common';
+import { round } from '../../../../helper';
 import { SidebarProps } from '..';
+import alignVerticalTop from '../../../../assets/icons/align-vertical-top.svg';
+import alignVerticalMiddle from '../../../../assets/icons/align-vertical-middle.svg';
+import alignVerticalBottom from '../../../../assets/icons/align-vertical-bottom.svg';
+import alignHorizontalRight from '../../../../assets/icons/align-horizontal-right.svg';
+import alignHorizontalLeft from '../../../../assets/icons/align-horizontal-left.svg';
+import alignHorizontalCenter from '../../../../assets/icons/align-horizontal-center.svg';
+import verticalDistribute from '../../../../assets/icons/vertical-distribute.svg';
+import horizontalDistribute from '../../../../assets/icons/horizontal-distribute.svg';
 
-const inputSetStyle: React.CSSProperties = {
-  marginRight: '1rem',
+const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
+
+const inputStyle: CSSProperties = {
+  width: 70,
+  border: '1px solid #767676',
+  borderRadius: 2,
+  color: '#333',
+  background: 'none',
+};
+
+const buttonStyle: CSSProperties = {
   display: 'flex',
+  background: 'none',
   alignItems: 'center',
+  borderRadius: 2,
+  border: '1px solid rgb(118, 118, 118)',
+  cursor: 'pointer',
 };
 
 const PositionAndSizeEditor = (
-  props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+  }
 ) => {
-  const { changeSchemas, activeSchema, pageSize } = props;
+  const { changeSchemas, schemas, activeSchema, activeElements, pageSize } = props;
+
+  const align = (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = ['left', 'center', 'right'].includes(type);
+    const tgtPos = isVertical ? 'x' : 'y';
+    const tgtSize = isVertical ? 'width' : 'height';
+    const isSingle = ass.length === 1;
+    const root = pageSize[tgtSize];
+
+    const min = isSingle ? 0 : Math.min(...ass.map((as) => as.position[tgtPos]));
+    const max = isSingle ? root : Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+
+    let basePos = min;
+    let adjust = (_: number) => 0;
+
+    if (['center', 'middle'].includes(type)) {
+      basePos = (min + max) / 2;
+      adjust = (num: number) => num / 2;
+    } else if (['right', 'bottom'].includes(type)) {
+      basePos = max;
+      adjust = (num: number) => num;
+    }
+
+    changeSchemas(
+      ass.map((as) => ({
+        key: `position.${tgtPos}`,
+        value: round(basePos - adjust(as[tgtSize]), 2),
+        schemaId: as.id,
+      }))
+    );
+  };
+
+  const distribute = (type: 'vertical' | 'horizontal') => {
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id));
+
+    const isVertical = type === 'vertical';
+    const tgtPos = isVertical ? 'y' : 'x';
+    const tgtSize = isVertical ? 'height' : 'width';
+    const min = Math.min(...ass.map((as) => as.position[tgtPos]));
+    const max = Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+
+    if (ass.length < 3) return;
+
+    const boxPos = min;
+    const boxSize = max - min;
+    const sum = ass.reduce((acc, cur) => acc + cur[tgtSize], 0);
+    const remain = boxSize - sum;
+    const unit = remain / (ass.length - 1);
+
+    let prev = 0;
+    changeSchemas(
+      ass.map((as, index) => {
+        prev += index === 0 ? 0 : ass[index - 1][tgtSize] + unit;
+        const value = round(boxPos + prev, 2);
+        return { key: `position.${tgtPos}`, value, schemaId: as.id };
+      })
+    );
+  };
+
+  const layoutBtns: { id: string; icon: any; action: () => void }[] = [
+    { id: 'left', icon: alignHorizontalLeft, action: () => align('left') },
+    { id: 'center', icon: alignHorizontalCenter, action: () => align('center') },
+    { id: 'right', icon: alignHorizontalRight, action: () => align('right') },
+    { id: 'top', icon: alignVerticalTop, action: () => align('top') },
+    { id: 'middle', icon: alignVerticalMiddle, action: () => align('middle') },
+    { id: 'bottom', icon: alignVerticalBottom, action: () => align('bottom') },
+    { id: 'vertical', icon: verticalDistribute, action: () => distribute('vertical') },
+    { id: 'horizontal', icon: horizontalDistribute, action: () => distribute('horizontal') },
+  ];
 
   return (
     <div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
+        {layoutBtns.map((b) => (
+          <button key={b.id} title={b.id} onClick={b.action} style={buttonStyle}>
+            <img width={15} src={b.icon} />
+          </button>
+        ))}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>X</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);
@@ -39,7 +137,7 @@ const PositionAndSizeEditor = (
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>Y</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);
@@ -52,18 +150,11 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
       </div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginTop: '0.25rem',
-        }}
-      >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>W</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);
@@ -78,7 +169,7 @@ const PositionAndSizeEditor = (
         <div style={inputSetStyle}>
           <label style={{ width: 17 }}>H</label>
           <input
-            style={{ width: 70 }}
+            style={inputStyle}
             type="number"
             onChange={(e) => {
               const value = Number(e.target.value);

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -1,12 +1,24 @@
 import React, { useContext } from 'react';
 import {
+  SchemaForUI,
   getFallbackFontName,
   DEFAULT_FONT_SIZE,
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
+  DEFAULT_FONT_COLOR,
 } from '@pdfme/common';
 import { FontContext } from '../../../../contexts';
 import { SidebarProps } from '..';
+import closeIcon from '../../../../assets/icons/close.svg';
+
+const inputStyle = {
+  width: '90%',
+  color: '#333',
+  background: 'none',
+  borderRadius: 2,
+  border: '1px solid #767676',
+};
+const selectStyle = inputStyle;
 
 const NumberInputSet = (props: {
   width: string;
@@ -19,7 +31,7 @@ const NumberInputSet = (props: {
   return (
     <div style={{ width }}>
       <label>{label}</label>
-      <input style={{ width: '100%' }} onChange={onChange} value={value} type="number" />
+      <input style={inputStyle} onChange={onChange} value={value} type="number" />
     </div>
   );
 };
@@ -36,8 +48,20 @@ const ColorInputSet = (props: {
     <div style={{ width: '45%' }}>
       <label>{label}</label>
       <div style={{ display: 'flex' }}>
-        <input onChange={onChange} value={value} type="color" style={{ width: '100%' }} />
-        <button onClick={onClear}>X</button>
+        <input onChange={onChange} value={value || '#ffffff'} type="color" style={inputStyle} />
+        <button
+          onClick={onClear}
+          style={{
+            display: 'flex',
+            background: 'none',
+            alignItems: 'center',
+            borderRadius: 2,
+            border: '1px solid #767676',
+            cursor: 'pointer',
+          }}
+        >
+          <img src={closeIcon} width={10} alt="Close icon" />
+        </button>
       </div>
     </div>
   );
@@ -54,7 +78,7 @@ const SelectSet = (props: {
   return (
     <div style={{ width: '45%' }}>
       <label>{label}:</label>
-      <select style={{ width: '100%' }} onChange={onChange} value={value}>
+      <select style={selectStyle} onChange={onChange} value={value}>
         {options.map((o) => (
           <option key={o} value={o}>
             {o}
@@ -65,7 +89,9 @@ const SelectSet = (props: {
   );
 };
 
-const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+const TextPropEditor = (
+  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
+) => {
   const { changeSchemas, activeSchema } = props;
   const alignments = ['left', 'center', 'right'];
   const font = useContext(FontContext);
@@ -80,6 +106,7 @@ const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchem
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          marginBottom: '0.25rem',
         }}
       >
         <SelectSet
@@ -105,6 +132,7 @@ const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchem
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          marginBottom: '0.25rem',
         }}
       >
         <NumberInputSet
@@ -154,7 +182,9 @@ const TextPropEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchem
             changeSchemas([{ key: 'fontColor', value: e.target.value, schemaId: activeSchema.id }])
           }
           onClear={() =>
-            changeSchemas([{ key: 'fontColor', value: '', schemaId: activeSchema.id }])
+            changeSchemas([
+              { key: 'fontColor', value: DEFAULT_FONT_COLOR, schemaId: activeSchema.id },
+            ])
           }
         />
 

package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useCallback } from 'react';
-import { schemaTypes } from '@pdfme/common';
+import { schemaTypes, SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 import { I18nContext } from '../../../../contexts';
 
@@ -12,7 +12,7 @@ const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
 );
 
 const TypeAndKeyEditor = (
-  props: Pick<SidebarProps, 'schemas' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & { activeSchema: SchemaForUI }
 ) => {
   const { changeSchemas, activeSchema, schemas } = props;
   const i18n = useContext(I18nContext);
@@ -37,7 +37,13 @@ const TypeAndKeyEditor = (
       <div>
         <label style={{ marginBottom: 0 }}>{i18n('type')}</label>
         <select
-          style={{ width: '100%' }}
+          style={{
+            width: '100%',
+            border: '1px solid #767676',
+            borderRadius: 2,
+            color: '#333',
+            background: 'none',
+          }}
           onChange={(e) =>
             changeSchemas([{ key: 'type', value: e.target.value, schemaId: activeSchema.id }])
           }
@@ -50,7 +56,7 @@ const TypeAndKeyEditor = (
           ))}
         </select>
       </div>
-      <div style={{ width: '100%' }}>
+      <div>
         <label style={{ marginBottom: 0 }}>
           {i18n('fieldName')}
           <u style={{ fontSize: '0.7rem' }}>
@@ -65,9 +71,11 @@ const TypeAndKeyEditor = (
             changeSchemas([{ key: 'key', value: e.target.value, schemaId: activeSchema.id }])
           }
           style={{
-            borderRadius: 2,
+            width: '100%',
             border: '1px solid #767676',
-            backgroundColor: hasSameKey || blankKey ? '#ffa19b' : '#fff',
+            borderRadius: 2,
+            color: '#333',
+            background: hasSameKey || blankKey ? '#ffa19b' : 'none',
           }}
           value={activeSchema.key}
         />

package/src/components/Designer/Sidebar/DetailView/index.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { SchemaForUI } from '@pdfme/common';
 import { I18nContext } from '../../../../contexts';
 import Divider from '../../../Divider';
 import { SidebarProps } from '..';
@@ -8,31 +9,35 @@ import PositionAndSizeEditor from './PositionAndSizeEditor';
 import TypeAndKeyEditor from './TypeAndKeyEditor';
 
 const DetailView = (
-  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeSchema'>
+  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+    activeSchema: SchemaForUI;
+  }
 ) => {
   const { activeSchema } = props;
   const i18n = useContext(I18nContext);
 
   return (
-    <aside>
+    <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+        <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('editField')}
-        </p>
+        </span>
       </div>
       <Divider />
-      <TypeAndKeyEditor {...props} />
-      <Divider />
-      <PositionAndSizeEditor {...props} />
-      <Divider />
-      {activeSchema.type === 'text' && (
-        <>
-          <TextPropEditor {...props} />
-          <Divider />
-        </>
-      )}
-      <ExampleInputEditor {...props} />
-    </aside>
+      <div style={{ fontSize: '0.9rem' }}>
+        <TypeAndKeyEditor {...props} />
+        <Divider />
+        <PositionAndSizeEditor {...props} />
+        <Divider />
+        {activeSchema.type === 'text' && (
+          <>
+            <TextPropEditor {...props} />
+            <Divider />
+          </>
+        )}
+        <ExampleInputEditor {...props} />
+      </div>
+    </div>
   );
 };
 

package/src/components/Designer/Sidebar/ListView/Item.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useContext } from 'react';
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+import { I18nContext } from '../../../../contexts';
+import dragIcon from '../../../../assets/icons/drag.svg';
+import warningIcon from '../../../../assets/icons/warning.svg';
+
+interface Props {
+  value: React.ReactNode;
+  style?: React.CSSProperties;
+  status?: 'is-warning' | 'is-danger';
+  title?: string;
+  dragOverlay?: boolean;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  dragging?: boolean;
+  sorting?: boolean;
+  transition?: string;
+  transform?: { x: number; y: number; scaleX: number; scaleY: number } | null;
+  fadeIn?: boolean;
+  listeners?: DraggableSyntheticListeners;
+}
+const Item = React.memo(
+  React.forwardRef<HTMLLIElement, Props>(
+    (
+      {
+        value,
+        status,
+        title,
+        style,
+        dragOverlay,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        dragging,
+        fadeIn,
+        listeners,
+        sorting,
+        transition,
+        transform,
+        ...props
+      },
+      ref
+    ) => {
+      const i18n = useContext(I18nContext);
+
+      useEffect(() => {
+        if (!dragOverlay) {
+          return;
+        }
+
+        document.body.style.cursor = 'grabbing';
+
+        return () => {
+          document.body.style.cursor = '';
+        };
+      }, [dragOverlay]);
+
+      const { x, y, scaleX, scaleY } = transform || { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+
+      return (
+        <li
+          style={{
+            transition,
+            transform: `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`,
+          }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          ref={ref}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', ...style }} {...props}>
+            <button
+              {...listeners}
+              style={{ padding: '0.5rem', background: 'none', border: 'none', display: 'flex' }}
+            >
+              <img style={{ cursor: 'grab' }} src={dragIcon} width={15} alt="Drag icon" />
+            </button>
+            <div
+              style={{
+                width: '100%',
+                padding: '0.5rem',
+                paddingLeft: 0,
+                cursor: 'pointer',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+              }}
+              title={title || ''}
+              onClick={() => onClick && onClick()}
+            >
+              {status === undefined ? (
+                value
+              ) : (
+                <span style={{ display: 'flex', alignItems: 'center' }}>
+                  <img
+                    alt="Warning icon"
+                    src={warningIcon}
+                    width={15}
+                    style={{ marginRight: '0.5rem' }}
+                  />
+                  {status === 'is-warning' ? i18n('noKeyName') : value}
+                  {status === 'is-danger' ? i18n('notUniq') : ''}
+                </span>
+              )}
+            </div>
+          </div>
+        </li>
+      );
+    }
+  )
+);
+
+export default Item;