@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/pdf-object/index.d.ts

@@ -0,0 +1,63 @@
+import type { MaybeRef } from '@vueuse/core';
+import type { InjectionKey, Ref } from 'vue';
+import type { PdfViewerContext } from '../pdf-viewer';
+import { focus as focus_ } from '../tour/utils/focus';
+export interface PdfObject {
+    id: symbol;
+    x?: number;
+    y?: number;
+    page?: number;
+    width: number;
+    height: number;
+}
+export interface PdfObjects extends PdfViewerContext {
+    root: Ref<HTMLDivElement>;
+    objects: Map<symbol, PdfObject>;
+}
+export interface PdfObjectSize {
+    width: number;
+    height: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}
+export type PdfObjectProp = PdfObjectSize & Omit<PdfObject, 'id'>;
+export declare const PDF_OBJECTS_CONTEXT: InjectionKey<PdfObjects>;
+export declare const PDF_OBJECT_CONTEXT: InjectionKey<ReturnType<typeof useObjectModel>>;
+export declare function useSizeModel(props: PdfObjectSize): {
+    ratio: import("vue").ComputedRef<number>;
+    width: Ref<number, number>;
+    height: Ref<number, number>;
+    minWidth: Ref<number, number>;
+    maxWidth: Ref<number, number>;
+    minHeight: Ref<number, number>;
+    maxHeight: Ref<number, number>;
+};
+/**
+ * V-model for PDF Object
+ * @param props PDF Object props
+ */
+export declare function useObjectModel(props: PdfObjectProp): {
+    id: symbol;
+    x: Ref<number | undefined, number | undefined>;
+    y: Ref<number | undefined, number | undefined>;
+    page: any;
+    width: Ref<number, number>;
+    height: Ref<number, number>;
+    minWidth: Ref<number, number>;
+    minHeight: Ref<number, number>;
+    maxWidth: Ref<number, number>;
+    maxHeight: Ref<number, number>;
+    ratio: import("vue").ComputedRef<number>;
+};
+/**
+ * Reactive page element
+ * @param page page number
+ */
+export declare function usePage(page: MaybeRef<number>): Readonly<Ref<HTMLElement, HTMLElement>>;
+/**
+ * focus with debounce
+ */
+export declare const focus: import("lodash").DebouncedFunc<typeof focus_>;
+export type AddonPositionVariant = 'top' | 'left' | 'right' | 'bottom';

package/dist/components/pdf-object/index.mjs

@@ -0,0 +1,110 @@
+import {
+  tryOnBeforeMount,
+  tryOnBeforeUnmount,
+  until
+} from "@vueuse/core";
+import {
+  computed,
+  inject,
+  reactive,
+  unref,
+  ref,
+  watch
+} from "vue";
+import { useSelector } from "./utils/use-selector.mjs";
+import { focus as focus_ } from "../tour/utils/focus.mjs";
+import { useClamp } from "@vueuse/math";
+import { debounce, round } from "lodash-es";
+export const PDF_OBJECTS_CONTEXT = Symbol("PDFObjects");
+export const PDF_OBJECT_CONTEXT = Symbol("PDFObjects");
+export function useSizeModel(props) {
+  const ratio = computed(() => round(props.width / props.height, 2));
+  const minWidth = ref(props.minWidth ?? props.width * 0.5);
+  const maxWidth = ref(props.maxWidth ?? props.width * 2);
+  const minHeight = ref(props.minHeight ?? props.height * 0.5);
+  const maxHeight = ref(props.maxHeight ?? props.height * 2);
+  const width = useClamp(props.width, minWidth, maxWidth);
+  const height = useClamp(props.height, minHeight, maxHeight);
+  watch(() => props.minWidth, (value) => {
+    if (Number.isFinite(value))
+      minWidth.value = value;
+  });
+  watch(() => props.minHeight, (value) => {
+    if (Number.isFinite(value))
+      minHeight.value = value;
+  });
+  watch(() => props.maxWidth, (value) => {
+    if (Number.isFinite(value))
+      maxWidth.value = value;
+  });
+  watch(() => props.maxHeight, (value) => {
+    if (Number.isFinite(value))
+      maxHeight.value = value;
+  });
+  return {
+    ratio,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  };
+}
+export function useObjectModel(props) {
+  const {
+    objects,
+    page: currentPage
+  } = inject(PDF_OBJECTS_CONTEXT);
+  const page = ref(props.page ?? currentPage.value);
+  const x = ref(props.x);
+  const y = ref(props.y);
+  const id = Symbol("PDFObject");
+  const {
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    ratio
+  } = useSizeModel(props);
+  objects.set(id, reactive({
+    id,
+    page,
+    x,
+    y,
+    width,
+    height
+  }));
+  tryOnBeforeMount(() => {
+    if (!Number.isFinite(page.value)) {
+      until(currentPage).toBeTruthy().then(() => {
+        page.value = currentPage.value;
+      });
+    }
+  });
+  tryOnBeforeUnmount(() => {
+    objects.delete(id);
+  });
+  return {
+    id,
+    x,
+    y,
+    page,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    ratio
+  };
+}
+export function usePage(page) {
+  const { root } = inject(PDF_OBJECTS_CONTEXT);
+  const pageSelector = computed(() => `.page[data-page-number="${unref(page)}"]`);
+  const pageEl = useSelector(pageSelector, root);
+  return pageEl;
+}
+export const focus = debounce(focus_, 100);

package/dist/components/pdf-object/utils/overlap.d.ts

@@ -0,0 +1,51 @@
+export interface ObjectSize {
+    width: number;
+    height: number;
+}
+export interface ObjectPosition {
+    x: number;
+    y: number;
+}
+export type CheckOverlapFn = (object: ObjectPosition, objects: Iterable<ObjectPosition>) => boolean;
+export interface GetEmptyPositionOptions {
+    /**
+     * Other objects position
+     */
+    objects: Iterable<ObjectPosition>;
+    /**
+     * Object size
+     */
+    size: ObjectSize;
+    /**
+     * Offside size
+     */
+    offside: ObjectSize;
+    /**
+     * Function to check overlap
+     */
+    checkOverlap?: CheckOverlapFn;
+}
+/**
+ * Check center position of reference
+ * @param object Object which want to place
+ * @param reference Reference place
+ */
+export declare function getCenter(object: ObjectSize, reference: ObjectSize): {
+    x: number;
+    y: number;
+};
+/**
+ * Check object is outside from reference
+ * @param object
+ * @param reference
+ */
+export declare function isOffside(object: ObjectSize & ObjectPosition, reference: ObjectSize): boolean;
+/**
+ * Check Overlap Fn using Map as Cache Keys
+ * @param objects
+ */
+export declare function useMapSnapshot(objects: Iterable<ObjectPosition>): CheckOverlapFn;
+/**
+ * Get empty position which not colide with other objects and not outside the reference place
+ */
+export declare function getEmptyPosition(options: GetEmptyPositionOptions): ObjectPosition;

package/dist/components/pdf-object/utils/overlap.mjs

@@ -0,0 +1,54 @@
+import { memoize } from "lodash-es";
+export function getCenter(object, reference) {
+  return {
+    x: (reference.width - object.width) / 2,
+    y: (reference.height - object.height) / 2
+  };
+}
+export function isOffside(object, reference) {
+  return object.x + object.width > reference.width || object.y + object.height > reference.height;
+}
+export function useMapSnapshot(objects) {
+  const xMap = /* @__PURE__ */ new Map();
+  const round = memoize((value) => Math.round(value / 15) * 15);
+  for (const object of objects) {
+    const x = round(object.x);
+    const y = round(object.y);
+    const yMap = xMap.get(x) ?? /* @__PURE__ */ new Map();
+    yMap.set(y, object);
+    xMap.set(x, yMap);
+  }
+  return (object) => {
+    const x = round(object.x);
+    const y = round(object.y);
+    return xMap.get(x)?.get(y) !== void 0;
+  };
+}
+export function getEmptyPosition(options) {
+  const checkOverlap = options.checkOverlap ?? useMapSnapshot(options.objects);
+  const center = getCenter(options.size, options.offside);
+  const position = {
+    ...options.size,
+    ...center
+  };
+  let found = true;
+  let loop = 0;
+  let deltaY = 0;
+  do {
+    found = true;
+    if (isOffside(position, options.offside)) {
+      position.y = center.y + deltaY;
+      position.x = center.x;
+      deltaY += 15;
+      found = false;
+    }
+    if (checkOverlap(position, options.objects)) {
+      position.x += 15;
+      position.y += 15;
+      found = false;
+    }
+  } while (!found && ++loop <= 500);
+  if (!found)
+    console.warn("Cannot find empty position, max iteration reach");
+  return position;
+}

package/dist/components/pdf-object/utils/position.d.ts

@@ -0,0 +1,64 @@
+interface ComputePosition {
+    /**
+     * Root container element
+     */
+    container: HTMLElement;
+    /**
+     * Reference element where the object should be placed
+     */
+    reference: HTMLElement;
+    /**
+     * Zoom scale
+     */
+    scale: number;
+    /**
+     * X Position
+     */
+    x: number;
+    /**
+     * Y Position
+     */
+    y: number;
+}
+interface GetPosition {
+    /**
+     * Root container element
+     */
+    container?: HTMLElement;
+    /**
+     * Reference element where the object should be placed
+     */
+    reference: HTMLElement;
+    /**
+     * Object element
+     */
+    object: HTMLElement;
+    /**
+     * Zoom scale
+     */
+    scale: number;
+}
+/**
+ * Find nearest relative parent element
+ * @param element Element to search
+ * @param container Maximum search element
+ */
+export declare function findRelativeParent(element: HTMLElement, container?: HTMLElement): HTMLElement | null;
+/**
+ * Computed X, Y position to Top, Left position
+ * @param context
+ */
+export declare function computePosition(context: ComputePosition): {
+    top: number;
+    left: number;
+};
+/**
+ * Get X, Y position from object
+ * @param context
+ */
+export declare function getPosition(context: GetPosition): {
+    x: number;
+    y: number;
+    page: number;
+};
+export {};

package/dist/components/pdf-object/utils/position.mjs

@@ -0,0 +1,48 @@
+import { clamp } from "lodash-es";
+export function findRelativeParent(element, container = document.body) {
+  let parent = element.parentElement;
+  do {
+    const { position } = window.getComputedStyle(parent);
+    if (position === "relative" || position === "absolute")
+      return parent;
+    parent = parent.parentElement;
+  } while (parent && parent !== container);
+  return container;
+}
+export function computePosition(context) {
+  const {
+    container,
+    reference,
+    x,
+    y,
+    scale
+  } = context;
+  const refBounding = reference.getBoundingClientRect();
+  const parent = findRelativeParent(reference, container);
+  const parentBounding = parent.getBoundingClientRect();
+  const zeroTop = refBounding.top - parentBounding.top + parent.scrollTop;
+  const zeroLeft = refBounding.left - parentBounding.left + parent.scrollLeft;
+  return {
+    top: zeroTop + y * scale,
+    left: zeroLeft + x * scale
+  };
+}
+export function getPosition(context) {
+  const {
+    reference,
+    object,
+    scale
+  } = context;
+  const objectBounding = object.getBoundingClientRect();
+  const refBounding = reference.getBoundingClientRect();
+  const maxX = Math.floor((refBounding.width - objectBounding.width) / scale);
+  const maxY = Math.floor((refBounding.height - objectBounding.height) / scale);
+  const x = (objectBounding.left - refBounding.left) / scale;
+  const y = (objectBounding.top - refBounding.top) / scale;
+  const page = Number.parseInt(reference.dataset.pageNumber);
+  return {
+    x: clamp(x, 1, maxX - 1),
+    y: clamp(y, 1, maxY - 1),
+    page
+  };
+}

package/dist/components/pdf-object/utils/use-drag.d.ts

@@ -0,0 +1,9 @@
+import type { InteractEvent } from '@interactjs/types';
+import type { Ref } from 'vue';
+export interface DragHooks {
+    onstart?: (event: InteractEvent) => void;
+    onmove?: (event: InteractEvent) => void;
+    onend?: (event: InteractEvent) => void;
+    ontap?: (event: InteractEvent) => void;
+}
+export default function useDrag(target: Ref<HTMLElement>, hooks?: DragHooks): import("vue").ShallowRef<boolean, boolean>;

package/dist/components/pdf-object/utils/use-drag.mjs

@@ -0,0 +1,69 @@
+import {
+  inject,
+  onScopeDispose,
+  shallowRef,
+  watch
+} from "vue";
+import { DROPZONE_CONTEXT_SYMBOL } from "./use-drop.mjs";
+export default function useDrag(target, hooks) {
+  const enable = shallowRef(true);
+  const instance = shallowRef();
+  const { hoverzone } = inject(DROPZONE_CONTEXT_SYMBOL);
+  async function init() {
+    destroy();
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      instance.value = Interact(target.value).draggable({
+        inertia: true,
+        enabled: enable.value,
+        autoScroll: {
+          container: target.value.parentElement,
+          margin: 100,
+          speed: 300
+        },
+        onstart: hooks.onstart,
+        onmove: hooks.onmove,
+        onend: hooks.onend,
+        modifiers: [
+          Interact.modifiers.restrict({
+            restriction: "parent",
+            elementRect: {
+              top: 0,
+              left: 0,
+              bottom: 1,
+              right: 1
+            }
+          }),
+          Interact.modifiers.restrictRect({
+            endOnly: true,
+            restriction: () => {
+              if (hoverzone.value)
+                return Interact.getElementRect(hoverzone.value);
+              return {
+                top: 0,
+                left: 0,
+                bottom: Number.POSITIVE_INFINITY,
+                right: Number.POSITIVE_INFINITY
+              };
+            }
+          })
+        ]
+      }).on("tap", hooks.ontap);
+    }
+  }
+  function destroy() {
+    if (instance.value)
+      instance.value.unset();
+  }
+  watch(target, async () => {
+    await init();
+  });
+  watch(enable, (value) => {
+    if (instance.value)
+      instance.value.draggable(value);
+  });
+  onScopeDispose(() => {
+    destroy();
+  });
+  return enable;
+}

package/dist/components/pdf-object/utils/use-drop.d.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Ref } from 'vue';
+export interface DropzoneContext {
+    dropzone: Ref<HTMLElement>;
+    hoverzone: Ref<HTMLElement>;
+}
+export declare const DROPZONE_CONTEXT_SYMBOL: InjectionKey<DropzoneContext>;
+export default function useDrop(target: Ref<HTMLElement>, dropTarget: Ref<string>): import("vue").ShallowRef<boolean, boolean>;

package/dist/components/pdf-object/utils/use-drop.mjs

@@ -0,0 +1,57 @@
+import { useMutationObserver } from "@vueuse/core";
+import {
+  onScopeDispose,
+  provide,
+  ref,
+  shallowRef
+} from "vue";
+export const DROPZONE_CONTEXT_SYMBOL = Symbol("DropzoneContext");
+export default function useDrop(target, dropTarget) {
+  const enable = shallowRef(true);
+  const instance = shallowRef();
+  const dropzone = ref();
+  const hoverzone = ref();
+  async function init() {
+    destroy();
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      Interact.dynamicDrop(true);
+      instance.value = Interact(dropTarget.value, { context: target.value }).dropzone({
+        accept: ".pdf-object",
+        overlap: 0.95,
+        enabled: enable.value,
+        checker(dragEvent, event, dropped, dropzone2, dropzoneElement, draggable, draggableElement) {
+          return dropped && (target.value?.contains(draggableElement) || draggableElement.classList.contains("pdf-object--external"));
+        },
+        ondragenter(event) {
+          hoverzone.value = event.target;
+          event.target.classList.add("hover");
+        },
+        ondragleave(event) {
+          event.target.classList.remove("hover");
+        },
+        ondrop(event) {
+          hoverzone.value = event.target;
+          dropzone.value = event.target;
+          event.target.classList.remove("hover");
+        }
+      });
+    }
+  }
+  function destroy() {
+    if (instance.value)
+      instance.value.unset();
+  }
+  useMutationObserver(target, (mutations) => {
+    const isChildChanged = mutations.some((mutation) => {
+      return mutation.type === "childList" && mutation.target.matches(dropTarget.value);
+    });
+    if (isChildChanged)
+      void init();
+  }, { subtree: true, childList: true });
+  onScopeDispose(() => {
+    destroy();
+  });
+  provide(DROPZONE_CONTEXT_SYMBOL, { dropzone, hoverzone });
+  return enable;
+}

package/dist/components/pdf-object/utils/use-resize.d.ts

@@ -0,0 +1,17 @@
+import type { InteractEvent } from '@interactjs/types';
+import type { MaybeRef } from '@vueuse/core';
+import type { Ref } from 'vue';
+export interface ResizeOptions {
+    onstart?: (event: InteractEvent) => void;
+    onmove?: (event: InteractEvent) => void;
+    onend?: (event: InteractEvent) => void;
+    handleSelector?: string;
+    reference?: MaybeRef<HTMLElement>;
+    minWidth?: MaybeRef<number>;
+    maxWidth?: MaybeRef<number>;
+    minHeight?: MaybeRef<number>;
+    maxHeight?: MaybeRef<number>;
+    scale?: MaybeRef<number>;
+    ratio?: MaybeRef<number>;
+}
+export default function useResize(target: Ref<HTMLElement>, options?: ResizeOptions): import("vue").ShallowRef<boolean, boolean>;

package/dist/components/pdf-object/utils/use-resize.mjs

@@ -0,0 +1,90 @@
+import {
+  onScopeDispose,
+  shallowRef,
+  unref,
+  watch
+} from "vue";
+export default function useResize(target, options = {}) {
+  const enable = shallowRef(true);
+  const instance = shallowRef();
+  async function init() {
+    destroy();
+    if (target.value) {
+      const { default: Interact } = await import("interactjs");
+      instance.value = Interact(target.value).resizable({
+        enabled: enable.value,
+        edges: {
+          left: false,
+          top: false,
+          bottom: options.handleSelector ?? ".resize-handle",
+          right: options.handleSelector ?? ".resize-handle"
+        },
+        onstart: options.onstart,
+        onmove: options.onmove,
+        onend: options.onend,
+        modifiers: [
+          Interact.modifiers.aspectRatio({
+            ratio: unref(options.ratio) ?? "preserve",
+            modifiers: [
+              Interact.modifiers.restrictSize({
+                min: (x, y, element) => {
+                  const scale = unref(options.scale) ?? 1;
+                  return {
+                    ...element.rect,
+                    width: unref(options.minWidth) * scale,
+                    height: unref(options.minHeight) * scale
+                  };
+                },
+                max: (x, y, element) => {
+                  const scale = unref(options.scale) ?? 1;
+                  return {
+                    ...element.rect,
+                    width: unref(options.maxWidth) * scale,
+                    height: unref(options.maxHeight) * scale
+                  };
+                }
+              }),
+              Interact.modifiers.restrictSize({
+                max: (x, y, element) => {
+                  const reference = unref(options.reference);
+                  if (reference) {
+                    const bounding = Interact.getElementRect(reference);
+                    if (bounding) {
+                      const width = bounding.right - element.rect.left;
+                      const height = bounding.bottom - element.rect.top;
+                      return {
+                        ...bounding,
+                        width,
+                        height
+                      };
+                    }
+                  }
+                  return {
+                    ...element.rect,
+                    width: Number.POSITIVE_INFINITY,
+                    height: Number.POSITIVE_INFINITY
+                  };
+                }
+              })
+            ]
+          })
+        ]
+      });
+    }
+  }
+  function destroy() {
+    if (instance.value)
+      instance.value.unset();
+  }
+  watch(target, async () => {
+    await init();
+  });
+  watch(enable, (value) => {
+    if (instance.value)
+      instance.value.draggable(value);
+  }, { immediate: true });
+  onScopeDispose(() => {
+    destroy();
+  });
+  return enable;
+}

package/dist/components/pdf-object/utils/use-selector.d.ts

@@ -0,0 +1,4 @@
+import type { MaybeRef } from '@vueuse/core';
+import type { Ref } from 'vue';
+export declare function useSelector<E extends HTMLElement>(selector: MaybeRef<string>, container?: MaybeRef<HTMLElement>, all?: false): Readonly<Ref<E>>;
+export declare function useSelector<E extends HTMLElement>(selector: MaybeRef<string>, container?: MaybeRef<HTMLElement>, all?: true): Readonly<Ref<NodeListOf<E>>>;

package/dist/components/pdf-object/utils/use-selector.mjs

@@ -0,0 +1,26 @@
+import {
+  tryOnMounted,
+  useMutationObserver
+} from "@vueuse/core";
+import {
+  watch,
+  unref,
+  shallowRef
+} from "vue";
+export function useSelector(selector, container = document.body, all = false) {
+  const element = shallowRef();
+  function getElement() {
+    element.value = all ? unref(container)?.querySelectorAll(unref(selector)) : unref(container)?.querySelector(unref(selector));
+  }
+  watch(() => unref(selector), () => {
+    getElement();
+  });
+  useMutationObserver(container, (mutations) => {
+    if (mutations.some((mutation) => mutation.type === "childList"))
+      getElement();
+  }, { childList: true, subtree: true });
+  tryOnMounted(() => {
+    getElement();
+  });
+  return element;
+}