@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/cropper/Cropper.vue

@@ -0,0 +1,382 @@
+<template>
+  <div
+    data-testid="cropper"
+    class="cropper"
+    :class="classNames">
+    <div
+      class="cropper__preview">
+      <canvas
+        ref="canvas"
+        data-testid="cropper-canvas"
+        class="cropper__canvas" />
+      <div
+        ref="parent"
+        data-testid="cropper-container"
+        class="cropper__image-container"
+        @wheel.prevent="onMouseWheel">
+        <img
+          ref="image"
+          data-testid="cropper-preview"
+          alt="cropper-preview"
+          tabindex="0"
+          class="cropper__image"
+          :src="preview"
+          :class="imgClass"
+          :style="imgStyle"
+          :width="imgWidth"
+          :height="imgHeight"
+          @load="onImageLoaded"
+          @keydown.up.prevent="move(0, -1)"
+          @keydown.down.prevent="move(0, 1)"
+          @keydown.left.prevent="move(-1, 0)"
+          @keydown.right.prevent="move(1, 0)">
+      </div>
+      <div
+        v-if="!noCrop"
+        v-p-aspect-ratio.fixed="aspectRatio"
+        data-testid="cropper-mask"
+        class="cropper__mask"
+        :style="maskStyle" />
+    </div>
+    <div class="cropper__control">
+      <div class="cropper__control-bar">
+        <p-button
+          data-testid="cropper-zoom-out"
+          size="xs"
+          variant="link"
+          icon
+          pill
+          @click="zoomOut()">
+          <IconZoomOut />
+        </p-button>
+        <p-input-range
+          v-model="scale"
+          data-testid="cropper-zoom-slider"
+          class="cropper__slider"
+          min="0.5"
+          max="2"
+          step="0.1" />
+        <p-button
+          data-testid="cropper-zoom-in"
+          size="xs"
+          variant="link"
+          icon
+          pill
+          @click="zoomIn()">
+          <IconZoomIn />
+        </p-button>
+        <p-button
+          data-testid="cropper-rotate-left"
+          size="xs"
+          variant="link"
+          icon
+          pill
+          @click="rotate(-90)">
+          <IconRotateLeft />
+        </p-button>
+        <p-button
+          data-testid="cropper-rotate-right"
+          size="xs"
+          variant="link"
+          icon
+          pill
+          @click="rotate(90)">
+          <IconRotateRight />
+        </p-button>
+      </div>
+
+      <p-button
+        data-testid="cropper-reset"
+        class="cropper__control__reset"
+        size="xs"
+        variant="link"
+        @click="reset()">
+        Reset
+      </p-button>
+
+      <slot
+        name="control"
+        :scale="scale"
+        :angle="angle"
+        :crop="crop"
+        :zoom-in="zoomIn"
+        :zoom-out="zoomOut"
+        :fit="fit"
+        :rotate="rotate"
+        :reset="reset" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watchDebounced, useThrottleFn } from "@vueuse/core";
+import { useClamp } from "@vueuse/math";
+import {
+  computed,
+  ref,
+  toRef
+} from "vue";
+import { usePinch } from "./utils/use-pinch";
+import pButton from "../button/Button.vue";
+import pInputRange from "../input-range/InputRange.vue";
+import IconRotateLeft from "@privyid/persona-icon/vue/rotate-left/20.vue";
+import IconRotateRight from "@privyid/persona-icon/vue/rotate-right/20.vue";
+import IconZoomIn from "@privyid/persona-icon/vue/zoom-in/20.vue";
+import IconZoomOut from "@privyid/persona-icon/vue/zoom-out/20.vue";
+import { cropImage } from "./utils/crop-image";
+import { useVModel } from "../input";
+import { fromBase64 } from "../utils/base64";
+import {
+  useRatio,
+  useRatioHeight,
+  useRatioWidth
+} from "./utils/use-ratio";
+import { vPAspectRatio } from "../aspect-ratio";
+import { usePreview } from ".";
+const props = defineProps({
+  modelValue: {
+    type: [String, globalThis.File],
+    default: ""
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  src: {
+    type: [String, globalThis.File],
+    default: void 0
+  },
+  ratio: {
+    type: Number,
+    default: void 0
+  },
+  width: {
+    type: [String, Number],
+    default: void 0
+  },
+  height: {
+    type: [String, Number],
+    default: void 0
+  },
+  imgWidth: {
+    type: [String, Number],
+    default: 512
+  },
+  imgHeight: {
+    type: [String, Number],
+    default: 512
+  },
+  imgClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  rounded: {
+    type: Boolean,
+    default: false
+  },
+  noCrop: {
+    type: Boolean,
+    default: false
+  },
+  noAutocrop: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["update:modelValue", "change", "result", "load"]);
+const model = useVModel(props);
+const x = ref(0);
+const y = ref(0);
+const angle = ref(0);
+const scale = useClamp(1, 0.5, 2);
+const aspectRatio = useRatio(props);
+const width = useRatioWidth(props);
+const height = useRatioHeight(props);
+const rounded = toRef(props, "rounded");
+const src = toRef(props, "src");
+const preview = usePreview(src);
+const canvas = ref();
+const parent = ref();
+const image = ref();
+const classNames = computed(() => {
+  const result = [];
+  if (props.noCrop)
+    result.push("cropper--no-crop");
+  if (props.rounded)
+    result.push("cropper--rounded");
+  return result;
+});
+const imgStyle = computed(() => {
+  return { transform: `rotate(${angle.value}deg) translate(${x.value}px, ${y.value}px) scale(${scale.value})` };
+});
+const maskStyle = computed(() => {
+  return {
+    aspectRatio: `${aspectRatio.value}`,
+    width: width.value ? `${width.value}px` : "66.666667%"
+  };
+});
+function fit() {
+  if (parent.value && image.value) {
+    const w = angle.value % 180 === 0 ? image.value.width : image.value.height;
+    const h = angle.value % 180 === 0 ? image.value.height : image.value.width;
+    scale.value = Math.min(parent.value.clientWidth / w, parent.value.clientHeight / h);
+  }
+  x.value = 0;
+  y.value = 0;
+}
+function zoomIn() {
+  scale.value += 0.1;
+}
+function zoomOut() {
+  scale.value -= 0.1;
+}
+function rotate(degress) {
+  angle.value = (Math.trunc(angle.value / 90) * 90 + degress) % 360;
+  fit();
+}
+function move(dx, dy) {
+  const COS0 = Math.cos(angle.value * Math.PI / 180);
+  const SIN0 = Math.sin(angle.value * Math.PI / 180);
+  const x1 = dx * COS0 + dy * SIN0;
+  const y1 = dy * COS0 - dx * SIN0;
+  x.value += x1;
+  y.value += y1;
+}
+function reset() {
+  angle.value = 0;
+  fit();
+}
+function crop() {
+  if (parent.value && image.value && canvas.value) {
+    const mWidth = parent.value.clientWidth * 2 / 3;
+    const w = width.value ?? mWidth;
+    const h = height.value ?? w / aspectRatio.value;
+    const mScale = mWidth > 0 && w > mWidth ? w / mWidth : 1;
+    const result = cropImage({
+      canvas: canvas.value,
+      image: image.value,
+      width: w,
+      height: h,
+      x: x.value,
+      y: y.value,
+      angle: angle.value,
+      scale: scale.value * mScale,
+      rounded: props.rounded
+    });
+    const value = props.modelModifiers.base64 ? result : fromBase64(result);
+    model.value = value;
+    emit("change", value);
+    emit("result", value);
+    return result;
+  }
+}
+const onMouseWheel = useThrottleFn(
+  (event) => {
+    if (image.value)
+      image.value.focus();
+    scale.value += event.deltaY * 0.01;
+  },
+  1e3 / 30
+  /* Limit 30 Fps */
+);
+function onImageLoaded() {
+  emit("load");
+  fit();
+  if (!props.noCrop && !props.noAutocrop)
+    crop();
+}
+usePinch(image, {
+  onpinch(event) {
+    scale.value = event.scale;
+    move(event.dx, event.dy);
+  },
+  onmove(event) {
+    move(event.dx, event.dy);
+  }
+});
+watchDebounced([
+  src,
+  width,
+  height,
+  aspectRatio,
+  rounded,
+  x,
+  y,
+  scale,
+  angle
+], () => {
+  if (!props.noCrop && !props.noAutocrop)
+    crop();
+}, { debounce: 500 });
+defineExpose({
+  zoomIn,
+  zoomOut,
+  rotate,
+  crop,
+  reset,
+  move,
+  fit,
+  canvas,
+  image,
+  angle,
+  scale
+});
+defineSlots();
+</script>
+
+<style lang="postcss">
+.cropper {
+  @apply bg-default w-full aspect-compat-square;
+  @apply dark:bg-dark-default;
+
+  &__canvas {
+    @apply hidden;
+  }
+
+  &__preview {
+    @apply bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGklEQVR4AWNYJYoK92ihwpGiAF0AXcMIUQAAbIfSgRmCFqkAAAAASUVORK5CYII=)];
+    @apply flex w-full overflow-hidden h-auto relative aspect-compat-square select-none;
+  }
+
+  &__mask {
+    @apply pointer-events-none touch-none select-none border border-default border-dashed box-border shadow-mask absolute inset-0 m-auto max-w-[66.666667%];
+    @apply dark:border-dark-default;
+  }
+
+  &__image {
+    -webkit-touch-callout: none;
+
+    @apply touch-none h-auto origin-center object-contain select-none outline-none;
+
+    &-container {
+      @apply w-full h-full absolute inset-0 flex items-center justify-center;
+    }
+  }
+
+  &__control {
+    @apply p-2 space-x-2 flex justify-between max-w-full overflow-hidden;
+
+    &-bar {
+      @apply flex grow max-w-md space-x-2;
+    }
+
+    &__reset {
+      @apply shrink-0;
+    }
+  }
+
+  &__slider {
+    @apply grow w-full;
+  }
+
+  &--rounded {
+    .cropper__mask {
+      @apply rounded-full
+    }
+  }
+}
+</style>

package/dist/components/cropper/Cropper.vue.d.ts

@@ -0,0 +1,195 @@
+import type { PropType, VNode } from 'vue';
+import type { ModelModifier } from '../camera/adapter/adapter';
+declare function fit(): void;
+declare function zoomIn(): void;
+declare function zoomOut(): void;
+declare function rotate(degress: number): void;
+declare function move(dx: number, dy: number): void;
+declare function reset(): void;
+declare function crop(): string;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        control(props: {
+            scale: number;
+            angle: number;
+            crop: () => void;
+            zoomIn: () => void;
+            zoomOut: () => void;
+            rotate: (deg: number) => void;
+            fit: () => void;
+            reset: () => void;
+        }): VNode[];
+    }> & {
+        control(props: {
+            scale: number;
+            angle: number;
+            crop: () => void;
+            zoomIn: () => void;
+            zoomOut: () => void;
+            rotate: (deg: number) => void;
+            fit: () => void;
+            reset: () => void;
+        }): VNode[];
+    };
+    refs: {
+        canvas: HTMLCanvasElement;
+        parent: HTMLDivElement;
+        image: HTMLImageElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    src: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    imgWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noAutocrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    zoomIn: typeof zoomIn;
+    zoomOut: typeof zoomOut;
+    rotate: typeof rotate;
+    crop: typeof crop;
+    reset: typeof reset;
+    move: typeof move;
+    fit: typeof fit;
+    canvas: import("vue").Ref<HTMLCanvasElement | undefined, HTMLCanvasElement | undefined>;
+    image: import("vue").Ref<HTMLImageElement | undefined, HTMLImageElement | undefined>;
+    angle: import("vue").Ref<number, number>;
+    scale: import("vue").Ref<number, number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | File) => void;
+    change: (args_0: string | File) => void;
+    load: () => void;
+    result: (args_0: string | File) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: string;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    src: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    imgWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    imgClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noAutocrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | File) => any) | undefined;
+    onChange?: ((args_0: string | File) => any) | undefined;
+    onLoad?: (() => any) | undefined;
+    onResult?: ((args_0: string | File) => any) | undefined;
+}>, {
+    modelValue: string | File;
+    width: string | number;
+    height: string | number;
+    src: string | File;
+    imgClass: string | unknown[] | Record<string, any>;
+    modelModifiers: ModelModifier;
+    rounded: boolean;
+    ratio: number;
+    imgWidth: string | number;
+    imgHeight: string | number;
+    noCrop: boolean;
+    noAutocrop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/cropper/index.d.ts

@@ -0,0 +1 @@
+export { usePreview, } from './utils/use-preview';

package/dist/components/cropper/index.mjs

@@ -0,0 +1,3 @@
+export {
+  usePreview
+} from "./utils/use-preview.mjs";

package/dist/components/cropper/utils/crop-image.d.ts

@@ -0,0 +1,44 @@
+interface CropImage {
+    /**
+     * Canvas's element
+     */
+    canvas?: HTMLCanvasElement;
+    /**
+     * Image's element to crop
+     */
+    image: HTMLImageElement;
+    /**
+     * Crop width
+     */
+    width: number;
+    /**
+     * Crop height
+     */
+    height: number;
+    /**
+     * Zoom factor
+     */
+    scale: number;
+    /**
+     * Rotate angle
+     */
+    angle: number;
+    /**
+     * X offset
+     */
+    x: number;
+    /**
+     * Y offset
+     */
+    y: number;
+    /**
+     * Enable border-radius
+     */
+    rounded: boolean;
+}
+/**
+ * Crop image using canvas
+ * @param options CropOption
+ */
+export declare function cropImage(options: CropImage): string;
+export {};

package/dist/components/cropper/utils/crop-image.mjs

@@ -0,0 +1,43 @@
+import { createCanvas } from "../../signature-draw/utils/canvas.mjs";
+export function cropImage(options) {
+  const {
+    width,
+    height,
+    image,
+    scale,
+    angle,
+    x,
+    y,
+    rounded
+  } = options;
+  const canvas = options.canvas ?? createCanvas(width, height);
+  const ctx = canvas.getContext("2d");
+  const imgW = image.width * scale;
+  const imgH = image.height * scale;
+  canvas.width = width;
+  canvas.height = height;
+  ctx.clearRect(0, 0, width, height);
+  ctx.translate(width / 2, height / 2);
+  ctx.rotate(angle * Math.PI / 180);
+  ctx.translate(width / -2, height / -2);
+  ctx.drawImage(
+    image,
+    (width - imgW) / 2 + x,
+    (height - imgH) / 2 + y,
+    imgW,
+    imgH
+  );
+  if (rounded) {
+    const r = Math.min(width / 2, height / 2);
+    ctx.globalCompositeOperation = "destination-in";
+    ctx.beginPath();
+    ctx.moveTo(r, 0);
+    ctx.arcTo(width, 0, width, height, r);
+    ctx.arcTo(width, height, 0, height, r);
+    ctx.arcTo(0, height, 0, 0, r);
+    ctx.arcTo(0, 0, width, 0, r);
+    ctx.closePath();
+    ctx.fill();
+  }
+  return canvas.toDataURL();
+}

package/dist/components/cropper/utils/use-pinch.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'vue';
+import type { InteractEvent, GestureEvent } from '@interactjs/types';
+export interface EventHooks {
+    onstart?: (event: InteractEvent) => void;
+    onpinch?: (event: GestureEvent) => void;
+    onmove?: (event: InteractEvent) => void;
+}
+export declare function usePinch(target: Ref<HTMLElement>, hooks: EventHooks): void;