@privyid/persona 1.1.1 → 1.2.0

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

@@ -0,0 +1,241 @@
+import { bench } from "vitest";
+import {
+  times,
+  random,
+  round,
+  has,
+  set,
+  memoize
+} from "lodash-es";
+import {
+  getEmptyPosition
+} from "./overlap.mjs";
+function hashPosition(position) {
+  return BigInt(position.x) << 64n | BigInt(position.y);
+}
+function useLoop() {
+  return (object, objects) => {
+    for (const other of objects) {
+      if (round(object.x, -1) === round(other.x, -1) && round(object.y, -1) === round(other.y, -1))
+        return true;
+    }
+    return false;
+  };
+}
+function useLodashSet(objects) {
+  const cache = {};
+  for (const object of objects) {
+    const x = round(object.x, -1);
+    const y = round(object.y, -1);
+    set(cache, [x, y], object);
+  }
+  return (object) => {
+    const x = round(object.x, -1);
+    const y = round(object.y, -1);
+    return has(object, [x, y]);
+  };
+}
+function useLoopMemoize() {
+  return memoize(useLoop(), (object) => {
+    return object.x << 32 | object.y;
+  });
+}
+function useMap(objects) {
+  const xMap = /* @__PURE__ */ new Map();
+  for (const object of objects) {
+    const x = round(object.x, -1);
+    const y = round(object.y, -1);
+    const yMap = xMap.get(x) ?? /* @__PURE__ */ new Map();
+    yMap.set(y, object);
+    xMap.set(x, yMap);
+  }
+  return (object) => {
+    const x = round(object.x, -1);
+    const y = round(object.y, -1);
+    return xMap.get(x)?.get(y) !== void 0;
+  };
+}
+function useMapMemoize(objects) {
+  const xMap = /* @__PURE__ */ new Map();
+  const mRound = memoize(round);
+  for (const object of objects) {
+    const x = mRound(object.x, -1);
+    const y = mRound(object.y, -1);
+    const yMap = xMap.get(x) ?? /* @__PURE__ */ new Map();
+    yMap.set(y, object);
+    xMap.set(x, yMap);
+  }
+  return (object) => {
+    const x = mRound(object.x, -1);
+    const y = mRound(object.y, -1);
+    return xMap.get(x)?.get(y) !== void 0;
+  };
+}
+function useHash(objects) {
+  const hashes = /* @__PURE__ */ new Set();
+  const mRound = memoize(round);
+  for (const object of objects) {
+    const hash = hashPosition({
+      x: mRound(object.x, -1),
+      y: mRound(object.y, -1)
+    });
+    hashes.add(hash);
+  }
+  return (object) => {
+    const hash = hashPosition({
+      x: mRound(object.x, -1),
+      y: mRound(object.y, -1)
+    });
+    return hashes.has(hash);
+  };
+}
+function useObject(objects) {
+  const xMap = {};
+  const mRound = memoize(round);
+  for (const object of objects) {
+    const x = mRound(object.x, -1);
+    const y = mRound(object.y, -1);
+    const yMap = xMap[x] ?? {};
+    yMap[y] = object;
+    xMap[x] = yMap;
+  }
+  return (object) => {
+    const x = mRound(object.x, -1);
+    const y = mRound(object.y, -1);
+    return xMap[x]?.[y] !== void 0;
+  };
+}
+function useMapMemoizeNoLodash(objects) {
+  const xMap = /* @__PURE__ */ new Map();
+  const mRound = memoize((value) => Math.round(value / 10) * 10);
+  for (const object of objects) {
+    const x = mRound(object.x);
+    const y = mRound(object.y);
+    const yMap = xMap.get(x) ?? /* @__PURE__ */ new Map();
+    yMap.set(y, object);
+    xMap.set(x, yMap);
+  }
+  return (object) => {
+    const x = mRound(object.x);
+    const y = mRound(object.y);
+    return xMap.get(x)?.get(y) !== void 0;
+  };
+}
+describe("checkOverlap", () => {
+  const object = {
+    x: random(0, 1500, false),
+    y: random(0, 1500, false)
+  };
+  const objects = times(100, () => {
+    return {
+      x: random(0, 1500, false),
+      y: random(0, 1500, false)
+    };
+  });
+  bench("using loop", () => {
+    const checkOverlap = useLoop();
+    checkOverlap(object, objects);
+  });
+  bench("using map", () => {
+    const checkOverlap = useMap(objects);
+    checkOverlap(object, objects);
+  });
+  bench("using lodash/set", () => {
+    const checkOverlap = useLodashSet(objects);
+    checkOverlap(object, objects);
+  });
+  bench("using loop + memoize", () => {
+    const checkOverlap = useLoopMemoize();
+    checkOverlap(object, objects);
+  });
+  bench("using map + memoize round", () => {
+    const checkOverlap = useMapMemoize(objects);
+    checkOverlap(object, objects);
+  });
+  bench("using object + memoize round", () => {
+    const checkOverlap = useObject(objects);
+    checkOverlap(object, objects);
+  });
+});
+describe("getEmptyPosition", () => {
+  const offside = {
+    width: 793,
+    height: 1122
+  };
+  const size = {
+    width: 198,
+    height: 106
+  };
+  const objects = [];
+  times(300, () => {
+    objects.push(getEmptyPosition({
+      offside,
+      size,
+      objects
+    }));
+  });
+  bench("using loop", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useLoop()
+    });
+  });
+  bench("using map", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useMap(objects)
+    });
+  });
+  bench("using lodash/set", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useLodashSet(objects)
+    });
+  });
+  bench("using loop + memoize", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useLoopMemoize()
+    });
+  });
+  bench("using map + memoize round", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useMapMemoize(objects)
+    });
+  });
+  bench("using hash + memoize round", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useHash(objects)
+    });
+  });
+  bench("using object + memoize round", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useObject(objects)
+    });
+  });
+  bench("using map + memoize round native", () => {
+    getEmptyPosition({
+      offside,
+      size,
+      objects,
+      checkOverlap: useMapMemoizeNoLodash(objects)
+    });
+  });
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,125 @@
+import {
+  getCenter,
+  getEmptyPosition,
+  isOffside,
+  useMapSnapshot
+} from "./overlap.mjs";
+describe("getCenter", () => {
+  it("should return center position", () => {
+    const result = getCenter({ width: 100, height: 100 }, { width: 500, height: 500 });
+    expect(result.x).toBe(200);
+    expect(result.y).toBe(200);
+  });
+});
+describe("isOffside", () => {
+  it("should able to detect is object offside from boundary", () => {
+    const a = isOffside({
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 50
+    }, { width: 200, height: 200 });
+    const b = isOffside({
+      x: 175,
+      y: 100,
+      width: 150,
+      height: 50
+    }, { width: 200, height: 200 });
+    const c = isOffside({
+      x: 100,
+      y: 100,
+      width: 50,
+      height: 50
+    }, { width: 200, height: 200 });
+    expect(a).toBe(true);
+    expect(b).toBe(true);
+    expect(c).toBe(false);
+  });
+});
+describe("useMapSnapshot", () => {
+  it("should able detect is object overlaping (collision)", () => {
+    const objects = [
+      { x: 100, y: 100 },
+      { x: 115, y: 115 },
+      { x: 130, y: 130 },
+      { x: 145, y: 145 },
+      { x: 160, y: 160 },
+      { x: 175, y: 175 },
+      { x: 190, y: 190 }
+    ];
+    const checkOverlap = useMapSnapshot(objects);
+    const a = checkOverlap({ x: 130, y: 130 }, []);
+    const b = checkOverlap({ x: 135, y: 130 }, []);
+    const c = checkOverlap({ x: 50, y: 50 }, []);
+    expect(a).toBe(true);
+    expect(b).toBe(true);
+    expect(c).toBe(false);
+  });
+});
+describe("getEmptyPosition", () => {
+  it("should return center of offside reference size", () => {
+    const offside = {
+      width: 793,
+      height: 1122
+    };
+    const size = {
+      width: 198,
+      height: 106
+    };
+    const result = getEmptyPosition({
+      offside,
+      size,
+      objects: []
+    });
+    expect(result.x).toBe(297.5);
+    expect(result.y).toBe(508);
+  });
+  it("should return other position if current center position is already taken", () => {
+    const offside = {
+      width: 793,
+      height: 1122
+    };
+    const size = {
+      width: 198,
+      height: 106
+    };
+    const result = getEmptyPosition({
+      offside,
+      size,
+      objects: [
+        {
+          x: 297.5,
+          y: 508
+        }
+      ]
+    });
+    expect(result.x).toBe(297.5 + 15);
+    expect(result.y).toBe(508 + 15);
+  });
+  it("should return no offside position", () => {
+    const offside = {
+      width: 300,
+      height: 300
+    };
+    const size = {
+      width: 100,
+      height: 100
+    };
+    const objects = [
+      { x: 100, y: 100 },
+      { x: 115, y: 115 },
+      { x: 130, y: 130 },
+      { x: 145, y: 145 },
+      { x: 160, y: 160 },
+      { x: 175, y: 175 },
+      { x: 190, y: 190 }
+    ];
+    const result = getEmptyPosition({
+      offside,
+      size,
+      objects
+    });
+    expect(result.x).toBe(100);
+    expect(result.y).toBe(115);
+  });
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,112 @@
+import { queryByTestId } from "@testing-library/dom";
+import { vi } from "vitest";
+import {
+  findRelativeParent,
+  computePosition,
+  getPosition
+} from "./position.mjs";
+beforeEach(() => {
+  document.body.innerHTML = `
+    <div data-testid="container" style="position:relative;">
+      <div data-testid="viewer" style="position:absolute;top:0;left:0;width:500px;height:500px;overflow-y:auto;">
+        <div data-testid="page-1" data-page-number="1" style="width:300px;height:400px;"></div>
+        <div data-testid="page-2" data-page-number="2" style="width:300px;height:400px;"></div>
+      </div>
+      <div data-testid="object"></div>
+    </div>
+  `;
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+describe("findRelativeParent", () => {
+  it("should return nearest relative parent", () => {
+    const container = queryByTestId(document.body, "container");
+    const viewer = queryByTestId(document.body, "viewer");
+    const reference = queryByTestId(document.body, "page-2");
+    const parent = findRelativeParent(reference, container);
+    expect(parent).toBe(viewer);
+  });
+  it("should return the container if cannot be found", () => {
+    const div = document.createElement("div");
+    document.body.append(div);
+    const reference = div;
+    const parent = findRelativeParent(reference, document.body);
+    expect(parent).toBe(document.body);
+  });
+});
+describe("computePosition", () => {
+  it("should render x, y position to top, left position", () => {
+    const container = queryByTestId(document.body, "container");
+    const viewer = queryByTestId(document.body, "viewer");
+    const reference = queryByTestId(document.body, "page-2");
+    vi.spyOn(viewer, "getBoundingClientRect").mockReturnValue({
+      top: 400,
+      y: 400,
+      x: 0,
+      left: 0,
+      width: 500,
+      height: 500,
+      bottom: 0,
+      right: 0,
+      toJSON: vi.fn()
+    });
+    vi.spyOn(reference, "getBoundingClientRect").mockReturnValue({
+      top: 800,
+      y: 800,
+      x: 100,
+      left: 100,
+      width: 791,
+      height: 1122,
+      bottom: 0,
+      right: 0,
+      toJSON: vi.fn()
+    });
+    const { top, left } = computePosition({
+      container,
+      reference,
+      x: 50,
+      y: 50,
+      scale: 1
+    });
+    expect(top).toBe(450);
+    expect(left).toBe(150);
+  });
+});
+describe("getPosition", () => {
+  it("should able to return x, y position of current object", () => {
+    const object = queryByTestId(document.body, "object");
+    const reference = queryByTestId(document.body, "page-2");
+    vi.spyOn(object, "getBoundingClientRect").mockReturnValue({
+      top: 500,
+      y: 500,
+      x: 150,
+      left: 150,
+      width: 500,
+      height: 500,
+      bottom: 0,
+      right: 0,
+      toJSON: vi.fn()
+    });
+    vi.spyOn(reference, "getBoundingClientRect").mockReturnValue({
+      top: 400,
+      y: 400,
+      x: 100,
+      left: 100,
+      width: 791,
+      height: 1122,
+      bottom: 0,
+      right: 0,
+      toJSON: vi.fn()
+    });
+    const { x, y, page } = getPosition({
+      reference,
+      object,
+      scale: 1,
+      container: void 0
+    });
+    expect(page).toBe(2);
+    expect(x).toBe(50);
+    expect(y).toBe(100);
+  });
+});

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,30 @@
+import { queryByTestId } from "@testing-library/dom";
+import { useSelector } from "./use-selector.mjs";
+it("should able to select all element using querySelector", () => {
+  document.body.innerHTML = `
+    <div data-testid="target">
+      <div class="item" data-testid="item-1"/>
+      <div class="item" data-testid="item-2"/>
+      <div class="item" data-testid="item-3"/>
+    </div>
+  `;
+  const items = useSelector('[data-testid="item-1"]', document.body);
+  const item1 = queryByTestId(document.body, "item-1");
+  expect(items.value).toBe(item1);
+});
+it("should able to select all element using querySelector", () => {
+  document.body.innerHTML = `
+    <div data-testid="target">
+      <div class="item" data-testid="item-1"/>
+      <div class="item" data-testid="item-2"/>
+      <div class="item" data-testid="item-3"/>
+    </div>
+  `;
+  const items = useSelector(".item", document.body, true);
+  const item1 = queryByTestId(document.body, "item-1");
+  const item2 = queryByTestId(document.body, "item-2");
+  const item3 = queryByTestId(document.body, "item-3");
+  expect(items.value[0]).toBe(item1);
+  expect(items.value[1]).toBe(item2);
+  expect(items.value[2]).toBe(item3);
+});

package/dist/components/pdf-text/PdfText.vue

@@ -8,96 +8,88 @@
     :alt="text">
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { onMounted, ref } from 'vue-demi'
-import { createSpinner } from '../avatar/utils/create-image'
-import { usePreview } from '../cropper'
-import type { ModelModifier } from '../dropzone'
-import { useVModel } from '../input'
-import { fromBase64 } from '../utils/base64'
-import { watchDebounced } from '@vueuse/core'
-import generate from './utils/text-to-image'
-
+<script setup>
+import { onMounted, ref } from "vue-demi";
+import { createSpinner } from "../avatar/utils/create-image";
+import { usePreview } from "../cropper";
+import { useVModel } from "../input";
+import { fromBase64 } from "../utils/base64";
+import { watchDebounced } from "@vueuse/core";
+import generate from "./utils/text-to-image";
 const props = defineProps({
   modelValue: {
-    type   : [String, globalThis.File],
-    default: undefined,
+    type: [String, globalThis.File],
+    default: void 0
   },
   modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
+    type: Object,
+    default: () => ({})
   },
   text: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   width: {
-    type   : Number,
-    default: 198,
+    type: Number,
+    default: 198
   },
   height: {
-    type   : Number,
-    default: 106,
+    type: Number,
+    default: 106
   },
   color: {
-    type   : String,
-    default: '#4a5362',
+    type: String,
+    default: "#4a5362"
   },
   size: {
-    type   : Number,
-    default: 16,
+    type: Number,
+    default: 16
   },
   minSize: {
-    type   : Number,
-    default: 11,
+    type: Number,
+    default: 11
   },
   maxSize: {
-    type   : Number,
-    default: 72,
+    type: Number,
+    default: 72
   },
   fixedSize: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   font: {
-    type   : String,
-    default: 'DM Sans',
+    type: String,
+    default: "DM Sans"
   },
   lineHeight: {
-    type   : Number,
-    default: 1.5,
+    type: Number,
+    default: 1.5
   },
   padding: {
-    type   : Number,
-    default: 12,
+    type: Number,
+    default: 12
   },
   label: {
-    type   : String,
-    default: '',
+    type: String,
+    default: ""
   },
   labelColor: {
-    type   : String,
-    default: '#9EA0A2',
+    type: String,
+    default: "#9EA0A2"
   },
   labelFont: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   labelSize: {
-    type   : Number,
-    default: 12,
-  },
-})
-
-defineEmits<{
-  'update:modelValue': [unknown],
-}>()
-
-const model   = useVModel(props)
-const preview = usePreview(model, createSpinner(props.width, props.height))
-const srcset  = ref('')
-
+    type: Number,
+    default: 12
+  }
+});
+defineEmits(["update:modelValue"]);
+const model = useVModel(props);
+const preview = usePreview(model, createSpinner(props.width, props.height));
+const srcset = ref("");
 watchDebounced(() => [
   props.text,
   props.width,
@@ -111,23 +103,18 @@ watchDebounced(() => [
   props.label,
   props.labelColor,
   props.labelFont,
-  props.labelSize,
+  props.labelSize
 ], () => {
-  load()
-}, { debounce: 300 })
-
+  load();
+}, { debounce: 300 });
 onMounted(() => {
-  load()
-})
-
-async function load () {
-  const result = await generate(props)
-  const value  = props.modelModifiers.base64
-    ? result
-    : fromBase64(result)
-
-  model.value  = value
-  srcset.value = `${await generate(props, 2)} 2x`
+  load();
+});
+async function load() {
+  const result = await generate(props);
+  const value = props.modelModifiers.base64 ? result : fromBase64(result);
+  model.value = value;
+  srcset.value = `${await generate(props, 2)} 2x`;
 }
 </script>