@pdfme/ui 1.0.0-beta.1

package/src/components/Designer/Main/Moveable.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef, Ref } from 'react';
+import Moveable, {
+  OnDrag,
+  OnResize,
+  OnDragEnd,
+  OnDragGroupEnd,
+  OnResizeEnd,
+  OnResizeGroupEnd,
+  OnClick,
+} from 'react-moveable';
+
+type Props = {
+  target: HTMLElement[];
+  bounds: { left: number; top: number; bottom: number; right: number };
+  horizontalGuidelines: number[];
+  verticalGuidelines: number[];
+  keepRatio: boolean;
+  onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
+  onDragEnd: ((e: OnDragEnd) => void) &
+    (({ target }: { target: HTMLElement | SVGElement }) => void);
+  onDragGroupEnd: ((e: OnDragGroupEnd) => void) &
+    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
+  onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
+  onResizeEnd: ((e: OnResizeEnd) => void) &
+    (({ target }: { target: HTMLElement | SVGElement }) => void);
+  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) &
+    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
+  onClick: ((e: OnClick) => void) & (() => void);
+};
+
+const _Moveable = (
+  {
+    target,
+    bounds,
+    horizontalGuidelines,
+    verticalGuidelines,
+    keepRatio,
+    onDrag,
+    onDragEnd,
+    onDragGroupEnd,
+    onResize,
+    onResizeEnd,
+    onResizeGroupEnd,
+    onClick,
+  }: Props,
+  ref: Ref<any>
+) => (
+  <Moveable
+    style={{ zIndex: 1 }}
+    rootContainer={document ? document.body : undefined}
+    snappable
+    snapCenter
+    draggable
+    resizable
+    throttleDrag={1}
+    throttleResize={1}
+    ref={ref}
+    target={target}
+    bounds={bounds}
+    horizontalGuidelines={horizontalGuidelines}
+    verticalGuidelines={verticalGuidelines}
+    keepRatio={keepRatio}
+    onDrag={onDrag}
+    onDragGroup={({ events }) => {
+      events.forEach(onDrag);
+    }}
+    onDragEnd={onDragEnd}
+    onDragGroupEnd={onDragGroupEnd}
+    onResize={onResize}
+    onResizeGroup={({ events }) => {
+      events.forEach(onResize);
+    }}
+    onResizeEnd={onResizeEnd}
+    onResizeGroupEnd={onResizeGroupEnd}
+    onClick={onClick}
+  />
+);
+
+export default forwardRef<any, Props>(_Moveable);

package/src/components/Designer/Main/Selecto.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
+import { SELECTABLE_CLASSNAME } from '../../../constants';
+
+const _Selecto = ({
+  container,
+  continueSelect,
+  onDragStart,
+  onSelect,
+}: {
+  container: HTMLElement | null;
+  continueSelect: boolean;
+  onDragStart: (e: _OnDragStart) => void;
+  onSelect: (e: _OnSelect) => void;
+}) => (
+  <Selecto
+    selectFromInside={false}
+    selectByClick
+    preventDefault
+    hitRate={0}
+    selectableTargets={[`.${SELECTABLE_CLASSNAME}`]}
+    container={container}
+    continueSelect={continueSelect}
+    onDragStart={onDragStart}
+    onSelect={onSelect}
+  />
+);
+
+export default _Selecto;

package/src/components/Designer/Main/index.tsx

@@ -0,0 +1,314 @@
+import React, {
+  Ref,
+  MutableRefObject,
+  useRef,
+  useState,
+  useEffect,
+  forwardRef,
+  useCallback,
+} from 'react';
+import { OnDrag, OnResize } from 'react-moveable';
+import { SchemaForUI, Size } from '@pdfme/common';
+import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { usePrevious } from '../../../hooks';
+import { uuid, round, flatten } from '../../../helper';
+import Paper from '../../Paper';
+import SchemaUI from '../../Schemas/SchemaUI';
+import Selecto from './Selecto';
+import Moveable from './Moveable';
+import Guides from './Guides';
+import Mask from './Mask';
+
+const DELETE_BTN_ID = uuid();
+const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
+const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
+const isTopLeftResize = (d: string) => d === '-1,-1' || d === '-1,0' || d === '0,-1';
+
+const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }) => {
+  const top = Math.min(...aes.map(({ style }) => fmt4Num(style.top)));
+  const left = Math.max(...aes.map(({ style }) => fmt4Num(style.left) + fmt4Num(style.width))) + 10;
+
+  return (
+    <button
+      id={DELETE_BTN_ID}
+      style={{
+        position: 'absolute',
+        top,
+        left,
+        cursor: 'pointer',
+        color: 'white',
+        border: 'none',
+        fontWeight: 'bold',
+        borderRadius: 3,
+        background: 'rgb(68, 170, 255)',
+      }}
+    >
+      x
+    </button>
+  );
+};
+
+interface GuidesInterface {
+  getGuides(): number[];
+  scroll(pos: number): void;
+  scrollGuides(pos: number): void;
+  loadGuides(guides: number[]): void;
+  resize(): void;
+}
+
+interface Props {
+  height: number;
+  hoveringSchemaId: string | null;
+  onChangeHoveringSchemaId: (id: string | null) => void;
+  pageCursor: number;
+  schemasList: SchemaForUI[][];
+  scale: number;
+  backgrounds: string[];
+  pageSizes: Size[];
+  size: Size;
+  activeElements: HTMLElement[];
+  onEdit: (targets: HTMLElement[]) => void;
+  changeSchemas: (objs: { key: string; value: string | number; schemaId: string }[]) => void;
+  removeSchemas: (ids: string[]) => void;
+  paperRefs: MutableRefObject<HTMLDivElement[]>;
+}
+
+const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
+  const {
+    pageCursor,
+    scale,
+    backgrounds,
+    pageSizes,
+    size,
+    activeElements,
+    schemasList,
+    hoveringSchemaId,
+  } = props;
+  const { onEdit, changeSchemas, removeSchemas, onChangeHoveringSchemaId, paperRefs } = props;
+
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const verticalGuides = useRef<GuidesInterface[]>([]);
+  const horizontalGuides = useRef<GuidesInterface[]>([]);
+  const moveable = useRef<any>(null);
+
+  const [isPressShiftKey, setIsPressShiftKey] = useState(false);
+  const [editing, setEditing] = useState(false);
+
+  const prevSchemas = usePrevious(schemasList[pageCursor]);
+
+  const onKeydown = (e: KeyboardEvent) => {
+    if (e.shiftKey) setIsPressShiftKey(true);
+  };
+  const onKeyup = (e: KeyboardEvent) => {
+    if (e.key === 'Shift') setIsPressShiftKey(false);
+    if (e.key === 'Escape' || e.key === 'Esc') setEditing(false);
+  };
+
+  const initEvents = useCallback(() => {
+    window.addEventListener('keydown', onKeydown);
+    window.addEventListener('keyup', onKeyup);
+  }, []);
+
+  const destroyEvents = useCallback(() => {
+    window.removeEventListener('keydown', onKeydown);
+    window.removeEventListener('keyup', onKeyup);
+  }, []);
+
+  useEffect(() => {
+    initEvents();
+
+    return destroyEvents;
+  }, [initEvents, destroyEvents]);
+
+  useEffect(() => {
+    if (prevSchemas === null) {
+      moveable.current?.updateRect();
+
+      return;
+    }
+
+    const prevSchemaKeys = Object.keys(prevSchemas[pageCursor] || {});
+    const schemaKeys = Object.keys(schemasList[pageCursor] || {});
+
+    if (prevSchemaKeys.join() === schemaKeys.join()) {
+      moveable.current?.updateRect();
+    }
+  }, [pageCursor, schemasList, prevSchemas]);
+
+  const onDrag = ({ target, left, top }: OnDrag) => {
+    target.style.left = `${left < 0 ? 0 : left}px`;
+    target.style.top = `${top < 0 ? 0 : top}px`;
+  };
+
+  const onDragEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
+    const { top, left } = target.style;
+    changeSchemas([
+      { key: 'position.y', value: fmt(top), schemaId: target.id },
+      { key: 'position.x', value: fmt(left), schemaId: target.id },
+    ]);
+  };
+
+  const onDragEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
+    const arg = targets.map(({ style: { top, left }, id }) => [
+      { key: 'position.y', value: fmt(top), schemaId: id },
+      { key: 'position.x', value: fmt(left), schemaId: id },
+    ]);
+    changeSchemas(flatten(arg));
+  };
+
+  const onResizeEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
+    const { id, style } = target;
+    const { width, height, top, left } = style;
+    changeSchemas([
+      { key: 'width', value: fmt(width), schemaId: id },
+      { key: 'height', value: fmt(height), schemaId: id },
+      { key: 'position.y', value: fmt(top), schemaId: id },
+      { key: 'position.x', value: fmt(left), schemaId: id },
+    ]);
+  };
+
+  const onResizeEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
+    const arg = targets.map(({ style: { width, height, top, left }, id }) => [
+      { key: 'width', value: fmt(width), schemaId: id },
+      { key: 'height', value: fmt(height), schemaId: id },
+      { key: 'position.y', value: fmt(top), schemaId: id },
+      { key: 'position.x', value: fmt(left), schemaId: id },
+    ]);
+    changeSchemas(flatten(arg));
+  };
+
+  const onResize = ({ target, width, height, direction }: OnResize) => {
+    if (!target) return;
+    const s = target.style;
+    const newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
+    const newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
+    const obj: { top?: string; left?: string; width: string; height: string } = {
+      width: `${width}px`,
+      height: `${height}px`,
+    };
+    const d = direction.toString();
+    if (isTopLeftResize(d)) {
+      obj.top = `${newTop}px`;
+      obj.left = `${newLeft}px`;
+    } else if (d === '1,-1') {
+      obj.top = `${newTop}px`;
+    } else if (d === '-1,1') {
+      obj.left = `${newLeft}px`;
+    }
+    Object.assign(s, obj);
+  };
+
+  const getGuideLines = (guides: GuidesInterface[], index: number) =>
+    guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
+
+  const onClickMoveable = () => {
+    setEditing(true);
+    const ic = inputRef.current;
+    if (!ic) return;
+    ic.disabled = false;
+    ic.focus();
+    if (ic.type === 'file') {
+      ic.click();
+    } else {
+      ic.setSelectionRange(ic.value.length, ic.value.length);
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      onClick={(e) => {
+        e.stopPropagation();
+        setEditing(false);
+      }}
+      style={{ height: props.height }}
+    >
+      <Selecto
+        container={paperRefs.current[pageCursor]}
+        continueSelect={isPressShiftKey}
+        onDragStart={(e) => {
+          const { inputEvent } = e;
+          const isMoveableElement = moveable.current?.isMoveableElement(inputEvent.target);
+          if ((inputEvent.type === 'touchstart' && e.isTrusted) || isMoveableElement) {
+            e.stop();
+          }
+
+          if (paperRefs.current[pageCursor] === inputEvent.target) {
+            onEdit([]);
+          }
+
+          if (inputEvent.target.id === DELETE_BTN_ID) {
+            removeSchemas(activeElements.map((ae) => ae.id));
+          }
+        }}
+        onSelect={(e) => {
+          onEdit(e.selected as HTMLElement[]);
+        }}
+      />
+      <Paper
+        paperRefs={paperRefs}
+        scale={scale}
+        size={size}
+        schemasList={schemasList}
+        pageSizes={pageSizes}
+        backgrounds={backgrounds}
+        renderPaper={({ index, paperSize }) => (
+          <>
+            {!editing && activeElements.length > 0 && (
+              <DeleteButton activeElements={activeElements} />
+            )}
+            <Guides
+              paperSize={paperSize}
+              horizontalRef={(e) => {
+                if (e) {
+                  horizontalGuides.current[index] = e;
+                }
+              }}
+              verticalRef={(e) => {
+                if (e) {
+                  verticalGuides.current[index] = e;
+                }
+              }}
+            />
+            {pageCursor !== index ? (
+              <Mask
+                width={paperSize.width + RULER_HEIGHT}
+                height={paperSize.height + RULER_HEIGHT}
+              />
+            ) : (
+              !editing && (
+                <Moveable
+                  ref={moveable}
+                  target={activeElements}
+                  bounds={{ left: 0, top: 0, bottom: paperSize.height, right: paperSize.width }}
+                  horizontalGuidelines={getGuideLines(horizontalGuides.current, index)}
+                  verticalGuidelines={getGuideLines(verticalGuides.current, index)}
+                  keepRatio={isPressShiftKey}
+                  onDrag={onDrag}
+                  onDragEnd={onDragEnd}
+                  onDragGroupEnd={onDragEnds}
+                  onResize={onResize}
+                  onResizeEnd={onResizeEnd}
+                  onResizeGroupEnd={onResizeEnds}
+                  onClick={onClickMoveable}
+                />
+              )
+            )}
+          </>
+        )}
+        renderSchema={({ schema }) => (
+          <SchemaUI
+            key={schema.key}
+            schema={schema}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
+            onChange={(value) => changeSchemas([{ key: 'data', value, schemaId: schema.id }])}
+            border={hoveringSchemaId === schema.id ? '2px solid #18a0fb' : '1px dashed #4af'}
+            ref={inputRef}
+          />
+        )}
+      />
+    </div>
+  );
+};
+export default forwardRef<HTMLDivElement, Props>(Main);

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

@@ -0,0 +1,62 @@
+import React, { useContext } from 'react';
+import { readFiles } from '../../../../helper';
+import { I18nContext } from '../../../../contexts';
+import { SidebarProps } from '..';
+
+const ExampleInputEditor = (props: Pick<SidebarProps, 'changeSchemas' | 'activeSchema'>) => {
+  const { changeSchemas, activeSchema } = props;
+  const i18n = useContext(I18nContext);
+
+  return (
+    <div>
+      <label style={{ marginBottom: 0 }}>{i18n('inputExample')}</label>
+      {activeSchema.type === 'image' ? (
+        <div style={{ position: 'relative', textAlign: 'center' }}>
+          {activeSchema.data ? (
+            <div style={{ margin: '0 auto' }}>
+              <button
+                style={{ position: 'absolute', top: 0, left: 0 }}
+                aria-label="close"
+                onClick={() =>
+                  changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
+                }
+              >
+                x
+              </button>
+              <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
+            </div>
+          ) : (
+            <label>
+              <input
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const { files } = e.target;
+                  readFiles(files, 'dataURL').then((result) => {
+                    changeSchemas([
+                      { key: 'data', value: result as string, schemaId: activeSchema.id },
+                    ]);
+                  });
+                }}
+                type="file"
+                accept="image/jpeg, image/png"
+              />
+            </label>
+          )}
+        </div>
+      ) : (
+        <textarea
+          rows={6}
+          onChange={(e) =>
+            changeSchemas([{ key: 'data', value: e.target.value, schemaId: activeSchema.id }])
+          }
+          style={{
+            width: '100%',
+            backgroundColor: activeSchema.data ? '#fff' : '#ffa19b',
+          }}
+          value={activeSchema.data}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ExampleInputEditor;

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { SidebarProps } from '..';
+
+const inputSetStyle: React.CSSProperties = {
+  marginRight: '1rem',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const PositionAndSizeEditor = (
+  props: Pick<SidebarProps, 'pageSize' | 'changeSchemas' | 'activeSchema'>
+) => {
+  const { changeSchemas, activeSchema, pageSize } = props;
+
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div style={inputSetStyle}>
+          <label style={{ width: 17 }}>X</label>
+          <input
+            style={{ width: 70 }}
+            type="number"
+            onChange={(e) => {
+              const value = Number(e.target.value);
+              if (value >= 0 && activeSchema.width + value < pageSize.width) {
+                changeSchemas([{ key: 'position.x', value, schemaId: activeSchema.id }]);
+              }
+            }}
+            value={activeSchema.position.x}
+          />
+          <span style={{ fontSize: '0.6rem' }}>mm</span>
+        </div>
+        <div style={inputSetStyle}>
+          <label style={{ width: 17 }}>Y</label>
+          <input
+            style={{ width: 70 }}
+            type="number"
+            onChange={(e) => {
+              const value = Number(e.target.value);
+              if (value >= 0 && activeSchema.height + value < pageSize.height) {
+                changeSchemas([{ key: 'position.y', value, schemaId: activeSchema.id }]);
+              }
+            }}
+            value={activeSchema.position.y}
+          />
+          <span style={{ fontSize: '0.6rem' }}>mm</span>
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginTop: '0.25rem',
+        }}
+      >
+        <div style={inputSetStyle}>
+          <label style={{ width: 17 }}>W</label>
+          <input
+            style={{ width: 70 }}
+            type="number"
+            onChange={(e) => {
+              const value = Number(e.target.value);
+              if (value >= 0 && activeSchema.position.x + value < pageSize.width) {
+                changeSchemas([{ key: 'width', value, schemaId: activeSchema.id }]);
+              }
+            }}
+            value={activeSchema.width}
+          />
+          <span style={{ fontSize: '0.6rem' }}>mm</span>
+        </div>
+        <div style={inputSetStyle}>
+          <label style={{ width: 17 }}>H</label>
+          <input
+            style={{ width: 70 }}
+            type="number"
+            onChange={(e) => {
+              const value = Number(e.target.value);
+              if (value >= 0 && activeSchema.position.y + value < pageSize.height) {
+                changeSchemas([{ key: 'height', value, schemaId: activeSchema.id }]);
+              }
+            }}
+            value={activeSchema.height}
+          />
+          <span style={{ fontSize: '0.6rem' }}>mm</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PositionAndSizeEditor;