sprintify-ui 0.12.10 → 0.12.12

package/src/components/BaseSignature.vue

@@ -0,0 +1,544 @@
+<template>
+  <div
+    class="inline-flex max-w-full flex-col gap-2"
+    :style="containerStyle"
+  >
+    <div
+      class="relative w-full overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm transition-colors"
+      :class="{
+        'cursor-crosshair hover:border-slate-400': !disabled,
+        'cursor-not-allowed bg-slate-50 opacity-70': disabled,
+      }"
+      :style="signaturePadStyle"
+    >
+      <canvas
+        ref="canvas"
+        class="absolute inset-0 h-full w-full touch-none select-none"
+        :aria-label="t('sui.signature_pad')"
+        :aria-disabled="disabled"
+        @pointerdown="startDrawing"
+        @pointermove="continueDrawing"
+        @pointerup="finishDrawing"
+        @pointercancel="finishDrawing"
+        @lostpointercapture="finishDrawing"
+      />
+    </div>
+
+    <div
+      v-if="showClearButton || errorMessage"
+      class="flex items-start justify-between gap-3"
+    >
+      <p
+        v-if="errorMessage"
+        role="alert"
+        class="pt-1 text-sm leading-tight text-red-600"
+      >
+        {{ errorMessage }}
+      </p>
+      <span v-else />
+
+      <BaseButton
+        v-if="showClearButton"
+        type="button"
+        size="sm"
+        color="secondary-outline"
+        icon="heroicons:trash"
+        :disabled="disabled || !canClear"
+        @click="clear"
+      >
+        {{ t('sui.clear') }}
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { BaseButton } from '.';
+import { t } from '@/i18n';
+import type { SignatureError, SignatureErrorCode } from '@/types';
+
+type Point = {
+  x: number;
+  y: number;
+  time: number;
+  width: number;
+};
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | null;
+  width?: number;
+  height?: number;
+  disabled?: boolean;
+  showClearButton?: boolean;
+}>(), {
+  modelValue: null,
+  width: 400,
+  height: 180,
+  disabled: false,
+  showClearButton: true,
+});
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | null): void;
+  (event: 'clear'): void;
+  (event: 'error', error: SignatureError): void;
+}>();
+
+const SIGNATURE_PADDING_RATIO = 0.08;
+const MAX_ANALYSIS_SIZE = 2048;
+const PNG_DATA_URL_PATTERN = /^data:image\/png(?:;[^,]*)?;base64,([a-z\d+/=\s]+)$/i;
+const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+const errorMessage = ref<string | null>(null);
+const filled = ref(false);
+
+let context: CanvasRenderingContext2D | null = null;
+let activePointerId: number | null = null;
+let drawing = false;
+let loadRequestId = 0;
+let locallyRenderedValue: string | null | undefined;
+let previousPoint: Point | null = null;
+let previousMidpoint: Pick<Point, 'x' | 'y'> | null = null;
+
+const normalizedWidth = computed(() => Math.max(1, Math.round(props.width)));
+const normalizedHeight = computed(() => Math.max(1, Math.round(props.height)));
+const canClear = computed(() => {
+  return filled.value || Boolean(props.modelValue) || Boolean(errorMessage.value);
+});
+
+const containerStyle = computed(() => ({
+  width: `${normalizedWidth.value}px`,
+}));
+
+const signaturePadStyle = computed(() => ({
+  aspectRatio: `${normalizedWidth.value} / ${normalizedHeight.value}`,
+}));
+
+onMounted(async () => {
+  configureCanvas();
+  await renderModelValue(props.modelValue);
+});
+
+onBeforeUnmount(() => {
+  loadRequestId += 1;
+  cancelDrawing();
+});
+
+watch(
+  () => props.modelValue,
+  async (modelValue) => {
+    if (modelValue === locallyRenderedValue) {
+      return;
+    }
+
+    locallyRenderedValue = undefined;
+    cancelDrawing();
+    await renderModelValue(modelValue);
+  }
+);
+
+watch(
+  [normalizedWidth, normalizedHeight],
+  async () => {
+    const currentSignature = filled.value && canvas.value
+      ? canvas.value.toDataURL('image/png')
+      : props.modelValue;
+
+    cancelDrawing();
+    configureCanvas();
+    await renderModelValue(currentSignature);
+  }
+);
+
+watch(
+  () => props.disabled,
+  (disabled) => {
+    if (disabled) {
+      finishDrawing();
+    }
+  }
+);
+
+function configureCanvas() {
+  if (!canvas.value) return;
+
+  const pixelRatio = Math.max(1, window.devicePixelRatio || 1);
+
+  canvas.value.width = Math.round(normalizedWidth.value * pixelRatio);
+  canvas.value.height = Math.round(normalizedHeight.value * pixelRatio);
+
+  context = canvas.value.getContext('2d');
+
+  if (!context) return;
+
+  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = 'high';
+  resetCanvas();
+}
+
+function resetCanvas() {
+  if (!context) return;
+
+  context.save();
+  context.fillStyle = '#ffffff';
+  context.fillRect(0, 0, normalizedWidth.value, normalizedHeight.value);
+  context.restore();
+  filled.value = false;
+}
+
+async function renderModelValue(modelValue: string | null | undefined) {
+  const requestId = ++loadRequestId;
+  errorMessage.value = null;
+  resetCanvas();
+
+  if (!modelValue) return;
+
+  if (!isPngDataUrl(modelValue)) {
+    reportError('invalid_png');
+    return;
+  }
+
+  try {
+    const image = await loadImage(modelValue);
+
+    if (requestId !== loadRequestId) return;
+
+    drawImageContained(image);
+  } catch {
+    if (requestId !== loadRequestId) return;
+
+    reportError('load_failed');
+  }
+}
+
+function isPngDataUrl(value: string) {
+  const match = value.match(PNG_DATA_URL_PATTERN);
+
+  if (!match) return false;
+
+  try {
+    const bytes = atob(match[1].replace(/\s/g, '').slice(0, 12));
+
+    return PNG_SIGNATURE.every((byte, index) => bytes.charCodeAt(index) === byte);
+  } catch {
+    return false;
+  }
+}
+
+function loadImage(source: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('Unable to load signature image'));
+    image.src = source;
+  });
+}
+
+function drawImageContained(image: HTMLImageElement) {
+  if (!context || image.naturalWidth === 0 || image.naturalHeight === 0) {
+    reportError('load_failed');
+    return;
+  }
+
+  const bounds = findContentBounds(image);
+
+  if (!bounds) {
+    filled.value = false;
+    return;
+  }
+
+  const availableWidth = normalizedWidth.value * (1 - SIGNATURE_PADDING_RATIO * 2);
+  const availableHeight = normalizedHeight.value * (1 - SIGNATURE_PADDING_RATIO * 2);
+  const scale = Math.min(
+    availableWidth / bounds.width,
+    availableHeight / bounds.height
+  );
+  const destinationWidth = bounds.width * scale;
+  const destinationHeight = bounds.height * scale;
+  const destinationX = (normalizedWidth.value - destinationWidth) / 2;
+  const destinationY = (normalizedHeight.value - destinationHeight) / 2;
+
+  context.drawImage(
+    image,
+    bounds.x,
+    bounds.y,
+    bounds.width,
+    bounds.height,
+    destinationX,
+    destinationY,
+    destinationWidth,
+    destinationHeight
+  );
+
+  filled.value = true;
+}
+
+function findContentBounds(image: HTMLImageElement) {
+  const analysisScale = Math.min(
+    1,
+    MAX_ANALYSIS_SIZE / image.naturalWidth,
+    MAX_ANALYSIS_SIZE / image.naturalHeight
+  );
+  const analysisWidth = Math.max(1, Math.round(image.naturalWidth * analysisScale));
+  const analysisHeight = Math.max(1, Math.round(image.naturalHeight * analysisScale));
+  const analysisCanvas = document.createElement('canvas');
+  const analysisContext = analysisCanvas.getContext('2d', { willReadFrequently: true });
+
+  analysisCanvas.width = analysisWidth;
+  analysisCanvas.height = analysisHeight;
+
+  if (!analysisContext) return null;
+
+  analysisContext.drawImage(image, 0, 0, analysisWidth, analysisHeight);
+
+  const pixels = analysisContext.getImageData(0, 0, analysisWidth, analysisHeight).data;
+  let minX = analysisWidth;
+  let minY = analysisHeight;
+  let maxX = -1;
+  let maxY = -1;
+
+  for (let y = 0; y < analysisHeight; y += 1) {
+    for (let x = 0; x < analysisWidth; x += 1) {
+      const index = (y * analysisWidth + x) * 4;
+      const alpha = pixels[index + 3];
+      const isVisible = alpha > 10;
+      const isNotWhite = pixels[index] < 245
+        || pixels[index + 1] < 245
+        || pixels[index + 2] < 245;
+
+      if (!isVisible || !isNotWhite) continue;
+
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x);
+      maxY = Math.max(maxY, y);
+    }
+  }
+
+  if (maxX < minX || maxY < minY) return null;
+
+  const sourceScaleX = image.naturalWidth / analysisWidth;
+  const sourceScaleY = image.naturalHeight / analysisHeight;
+  const x = Math.max(0, (minX - 1) * sourceScaleX);
+  const y = Math.max(0, (minY - 1) * sourceScaleY);
+  const right = Math.min(image.naturalWidth, (maxX + 2) * sourceScaleX);
+  const bottom = Math.min(image.naturalHeight, (maxY + 2) * sourceScaleY);
+
+  return {
+    x,
+    y,
+    width: right - x,
+    height: bottom - y,
+  };
+}
+
+function reportError(code: SignatureErrorCode) {
+  const translationKey = code === 'invalid_png'
+    ? 'sui.signature_must_be_png'
+    : 'sui.signature_load_failed';
+  const error: SignatureError = {
+    code,
+    message: t(translationKey),
+  };
+
+  errorMessage.value = error.message;
+  emit('error', error);
+}
+
+function startDrawing(event: PointerEvent) {
+  if (props.disabled || drawing) return;
+  if (event.pointerType === 'mouse' && event.button !== 0) return;
+  if (!canvas.value || !context) return;
+
+  event.preventDefault();
+  loadRequestId += 1;
+  activePointerId = event.pointerId;
+  drawing = true;
+  errorMessage.value = null;
+  previousPoint = null;
+  previousMidpoint = null;
+  canvas.value.setPointerCapture(event.pointerId);
+
+  addPoint(event);
+  filled.value = true;
+}
+
+function continueDrawing(event: PointerEvent) {
+  if (!drawing || event.pointerId !== activePointerId) return;
+
+  event.preventDefault();
+
+  const events = event.getCoalescedEvents?.() ?? [];
+  const points = events.length > 0 ? events : [event];
+
+  points.forEach(addPoint);
+}
+
+function finishDrawing(event?: PointerEvent) {
+  if (!drawing) return;
+  if (event && event.pointerId !== activePointerId) return;
+
+  event?.preventDefault();
+  finishStroke();
+
+  const pointerId = activePointerId;
+
+  drawing = false;
+  activePointerId = null;
+  previousPoint = null;
+  previousMidpoint = null;
+
+  if (
+    canvas.value
+    && pointerId !== null
+    && canvas.value.hasPointerCapture(pointerId)
+  ) {
+    canvas.value.releasePointerCapture(pointerId);
+  }
+
+  emitSignature();
+}
+
+function cancelDrawing() {
+  const pointerId = activePointerId;
+
+  drawing = false;
+  activePointerId = null;
+  previousPoint = null;
+  previousMidpoint = null;
+
+  if (
+    canvas.value
+    && pointerId !== null
+    && canvas.value.hasPointerCapture(pointerId)
+  ) {
+    canvas.value.releasePointerCapture(pointerId);
+  }
+}
+
+function addPoint(event: PointerEvent) {
+  if (!context) return;
+
+  const point = getPoint(event);
+
+  if (!previousPoint || !previousMidpoint) {
+    drawDot(point);
+    previousPoint = point;
+    previousMidpoint = { x: point.x, y: point.y };
+    return;
+  }
+
+  const midpoint = {
+    x: (previousPoint.x + point.x) / 2,
+    y: (previousPoint.y + point.y) / 2,
+  };
+
+  context.beginPath();
+  context.moveTo(previousMidpoint.x, previousMidpoint.y);
+  context.quadraticCurveTo(
+    previousPoint.x,
+    previousPoint.y,
+    midpoint.x,
+    midpoint.y
+  );
+  context.lineWidth = (previousPoint.width + point.width) / 2;
+  context.lineCap = 'round';
+  context.lineJoin = 'round';
+  context.strokeStyle = '#000000';
+  context.stroke();
+
+  previousPoint = point;
+  previousMidpoint = midpoint;
+}
+
+function finishStroke() {
+  if (!context || !previousPoint || !previousMidpoint) return;
+
+  context.beginPath();
+  context.moveTo(previousMidpoint.x, previousMidpoint.y);
+  context.quadraticCurveTo(
+    previousPoint.x,
+    previousPoint.y,
+    previousPoint.x,
+    previousPoint.y
+  );
+  context.lineWidth = previousPoint.width;
+  context.lineCap = 'round';
+  context.strokeStyle = '#000000';
+  context.stroke();
+}
+
+function drawDot(point: Point) {
+  if (!context) return;
+
+  context.beginPath();
+  context.arc(point.x, point.y, point.width / 2, 0, Math.PI * 2);
+  context.fillStyle = '#000000';
+  context.fill();
+}
+
+function getPoint(event: PointerEvent): Point {
+  const rectangle = canvas.value?.getBoundingClientRect();
+  const scaleX = rectangle ? normalizedWidth.value / rectangle.width : 1;
+  const scaleY = rectangle ? normalizedHeight.value / rectangle.height : 1;
+  const x = rectangle ? (event.clientX - rectangle.left) * scaleX : 0;
+  const y = rectangle ? (event.clientY - rectangle.top) * scaleY : 0;
+  const time = event.timeStamp;
+  const strokeScale = Math.max(
+    0.75,
+    Math.min(2.5, Math.min(normalizedWidth.value, normalizedHeight.value) / 180)
+  );
+  const minimumWidth = 1.15 * strokeScale;
+  const maximumWidth = 3.4 * strokeScale;
+  let width = maximumWidth;
+
+  if (previousPoint) {
+    if (event.pointerType === 'pen' && event.pressure > 0) {
+      width = minimumWidth + (maximumWidth - minimumWidth) * event.pressure;
+    } else {
+      const distance = Math.hypot(x - previousPoint.x, y - previousPoint.y);
+      const elapsed = Math.max(1, time - previousPoint.time);
+      const velocity = distance / elapsed;
+      const velocityWeight = 1 / (1 + velocity * 1.7);
+      const targetWidth = minimumWidth
+        + (maximumWidth - minimumWidth) * velocityWeight;
+
+      width = previousPoint.width * 0.65 + targetWidth * 0.35;
+    }
+  }
+
+  return { x, y, time, width };
+}
+
+function emitSignature() {
+  if (!canvas.value) return;
+
+  const value = canvas.value.toDataURL('image/png');
+
+  locallyRenderedValue = value;
+  emit('update:modelValue', value);
+}
+
+function clear() {
+  loadRequestId += 1;
+  cancelDrawing();
+  errorMessage.value = null;
+  resetCanvas();
+  locallyRenderedValue = null;
+  emit('update:modelValue', null);
+  emit('clear');
+}
+
+function isFilled() {
+  return filled.value;
+}
+
+defineExpose({
+  clear,
+  isFilled,
+});
+</script>

package/src/components/index.ts

@@ -76,6 +76,7 @@ import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseRichText from './BaseRichText.vue';
 import BaseSelect from './BaseSelect.vue';
+import BaseSignature from './BaseSignature.vue';
 import BaseShortcut from './BaseShortcut.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
 import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
@@ -188,6 +189,7 @@ export {
   BaseReadMore,
   BaseRichText,
   BaseSelect,
+  BaseSignature,
   BaseShortcut,
   BaseSideNavigation,
   BaseSideNavigationItem,

package/src/lang/en.json

@@ -75,6 +75,9 @@
     "select_all": "Select all",
     "select_an_item": "Select an item",
     "select_an_option": "Select an option",
+    "signature_load_failed": "The signature image could not be loaded.",
+    "signature_must_be_png": "The signature must be a valid PNG image.",
+    "signature_pad": "Signature pad",
     "success": "Success",
     "the_file_size_must_not_exceed_x": "The file size must not exceed {x}",
     "the_file_type_is_invalid": "The file type is invalid",

package/src/lang/fr.json

@@ -75,6 +75,9 @@
     "select_all": "Sélectionnez tout",
     "select_an_item": "Sélectionner un élément",
     "select_an_option": "Sélectionner une option",
+    "signature_load_failed": "L’image de la signature n’a pas pu être chargée.",
+    "signature_must_be_png": "La signature doit être une image PNG valide.",
+    "signature_pad": "Zone de signature",
     "success": "Succès",
     "the_file_size_must_not_exceed_x": "La taille du fichier ne doit pas dépasser {x}",
     "the_file_type_is_invalid": "Le type de fichier n'est pas valide",

package/src/types/index.ts

@@ -11,6 +11,13 @@ import { ToolbarOption } from './ToolbarOption';
 
 export type Locales = { [locale: string]: string };
 
+export type SignatureErrorCode = 'invalid_png' | 'load_failed';
+
+export interface SignatureError {
+  code: SignatureErrorCode;
+  message: string;
+}
+
 export enum Method {
   post = 'post',
   put = 'put',