@pdfme/ui 1.0.0-beta.7 → 1.0.0

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;

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

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  closestCorners,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensors,
+  useSensor,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { SchemaForUI } from '@pdfme/common';
+import Item from './Item';
+import SelectableSortableItem from './SelectableSortableItem';
+import { SidebarProps } from '../';
+
+const SelectableSortableContainer = (
+  props: Pick<
+    SidebarProps,
+    'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
+  >
+) => {
+  const { schemas, onEdit, onSortEnd, height, hoveringSchemaId, onChangeHoveringSchemaId } = props;
+  const [selectedSchemas, setSelectedSchemas] = useState<SchemaForUI[]>([]);
+  const [dragOverlaydItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 15 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const isItemSelected = (itemId: string): boolean =>
+    selectedSchemas.map((i) => i.id).includes(itemId);
+
+  const onSelectionChanged = (id: string, isShiftSelect: boolean) => {
+    if (isShiftSelect) {
+      if (isItemSelected(id)) {
+        const newSelectedSchemas = selectedSchemas.filter((item) => item.id !== id);
+        setSelectedSchemas(newSelectedSchemas);
+      } else {
+        const newSelectedItem = schemas.find((schema) => schema.id === id)!;
+        const newSelectedSchemas = selectedSchemas.concat(newSelectedItem);
+        setSelectedSchemas(newSelectedSchemas);
+      }
+    } else {
+      setSelectedSchemas([]);
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={({ active }) => {
+        setActiveId(active.id);
+        setClonedItems(schemas);
+
+        if (!isItemSelected(active.id)) {
+          const newSelectedSchemas: SchemaForUI[] = [];
+          setSelectedSchemas(newSelectedSchemas);
+        } else if (selectedSchemas.length > 0) {
+          onSortEnd(
+            selectedSchemas.reduce((ret, selectedItem) => {
+              if (selectedItem.id === active.id) {
+                return ret;
+              }
+              return ret.filter((schema) => schema !== selectedItem);
+            }, schemas)
+          );
+        }
+      }}
+      onDragEnd={({ active, over }) => {
+        const overId = over?.id || '';
+
+        const activeIndex = schemas.map((i) => i.id).indexOf(active.id);
+        const overIndex = schemas.map((i) => i.id).indexOf(overId);
+
+        if (selectedSchemas.length) {
+          let newSchemas = [...schemas];
+          newSchemas = arrayMove(newSchemas, activeIndex, overIndex);
+          newSchemas.splice(
+            overIndex + 1,
+            0,
+            ...selectedSchemas.filter((item) => item.id !== activeId)
+          );
+          onSortEnd(newSchemas);
+          setSelectedSchemas([]);
+        } else if (activeIndex !== overIndex) {
+          onSortEnd(arrayMove(schemas, activeIndex, overIndex));
+        }
+
+        setActiveId(null);
+      }}
+      onDragCancel={() => {
+        if (dragOverlaydItems) {
+          onSortEnd(dragOverlaydItems);
+        }
+
+        setActiveId(null);
+        setClonedItems(null);
+      }}
+    >
+      <div style={{ height, overflowY: 'auto' }}>
+        <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
+          <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
+            {schemas.map((schema) => (
+              <SelectableSortableItem
+                key={schema.id}
+                style={{
+                  border: `1px solid ${schema.id === hoveringSchemaId ? '#18a0fb' : 'transparent'}`,
+                }}
+                schema={schema}
+                schemas={schemas}
+                isSelected={isItemSelected(schema.id) || activeId === schema.id}
+                onEdit={onEdit}
+                onSelect={onSelectionChanged}
+                onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
+                onMouseLeave={() => onChangeHoveringSchemaId(null)}
+              />
+            ))}
+          </ul>
+        </SortableContext>
+      </div>
+      {createPortal(
+        <DragOverlay adjustScale>
+          {activeId ? (
+            <>
+              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                <Item
+                  value={schemas.find((schema) => schema.id === activeId)!.key}
+                  style={{ color: '#fff', background: '#18a0fb' }}
+                  dragOverlay
+                />
+              </ul>
+              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                {selectedSchemas
+                  .filter((item) => item.id !== activeId)
+                  .map((item) => (
+                    <Item
+                      key={item.id}
+                      value={item.key}
+                      style={{ color: '#fff', background: '#18a0fb' }}
+                      dragOverlay
+                    />
+                  ))}
+              </ul>
+            </>
+          ) : null}
+        </DragOverlay>,
+        document.body
+      )}
+    </DndContext>
+  );
+};
+
+export default SelectableSortableContainer;