origam 2.2.1 → 2.5.0

package/dist/src/composables/Watermark/watermark.composable.cjs

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWatermark = useWatermark;
+var _vue = require("vue");
+var _watermark = require("../../consts/Watermark/watermark.const.cjs");
+function escapeXml(raw) {
+  return raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function buildPatternUrl(options) {
+  const tile = options.gap + Math.max(options.fontSize, 1);
+  const cx = tile / 2;
+  const cy = tile / 2;
+  const opacityAttr = `opacity="${options.opacity}"`;
+  let glyph;
+  if (options.image) {
+    const safeHref = escapeXml(options.image);
+    const imgSize = Math.max(options.fontSize, 16);
+    glyph = `<image href="${safeHref}" x="${cx - imgSize / 2}" y="${cy - imgSize / 2}" width="${imgSize}" height="${imgSize}" preserveAspectRatio="xMidYMid meet" ${opacityAttr}/>`;
+  } else {
+    const safeText = escapeXml(options.text);
+    const safeFamily = escapeXml(options.fontFamily);
+    const safeColor = escapeXml(options.color);
+    const safeWeight = escapeXml(String(options.fontWeight));
+    glyph = `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="middle" fill="${safeColor}" font-size="${options.fontSize}" font-family="${safeFamily}" font-weight="${safeWeight}" ${opacityAttr}>${safeText}</text>`;
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tile}" height="${tile}" viewBox="0 0 ${tile} ${tile}"><g transform="rotate(${options.angle} ${cx} ${cy})">${glyph}</g></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function resolveOptions(raw) {
+  const opts = raw ?? {};
+  return {
+    text: opts.text ?? "",
+    image: opts.image ?? "",
+    opacity: typeof opts.opacity === "number" ? opts.opacity : _watermark.WATERMARK_DEFAULT_OPACITY,
+    angle: typeof opts.angle === "number" ? opts.angle : _watermark.WATERMARK_DEFAULT_ANGLE_DEG,
+    gap: typeof opts.gap === "number" ? opts.gap : _watermark.WATERMARK_DEFAULT_GAP_PX,
+    fontSize: typeof opts.fontSize === "number" ? opts.fontSize : _watermark.WATERMARK_DEFAULT_FONT_SIZE_PX,
+    fontFamily: opts.fontFamily ?? _watermark.WATERMARK_DEFAULT_FONT_FAMILY,
+    color: opts.color ?? _watermark.WATERMARK_DEFAULT_COLOR,
+    fontWeight: opts.fontWeight ?? _watermark.WATERMARK_DEFAULT_FONT_WEIGHT,
+    pointerEvents: opts.pointerEvents ?? _watermark.WATERMARK_DEFAULT_POINTER_EVENTS,
+    zIndex: typeof opts.zIndex === "number" ? opts.zIndex : _watermark.WATERMARK_DEFAULT_Z_INDEX
+  };
+}
+function applyLayerStyles(layer, options, pattern) {
+  layer.style.position = "absolute";
+  layer.style.top = "0";
+  layer.style.right = "0";
+  layer.style.bottom = "0";
+  layer.style.left = "0";
+  layer.style.backgroundImage = pattern;
+  layer.style.backgroundRepeat = "repeat";
+  layer.style.pointerEvents = options.pointerEvents;
+  layer.style.zIndex = String(options.zIndex);
+  layer.style.userSelect = "none";
+  layer.setAttribute("aria-hidden", "true");
+  layer.setAttribute(_watermark.WATERMARK_DATA_ATTR, "");
+}
+function useWatermark(options = {}) {
+  const resolved = (0, _vue.computed)(() => {
+    const raw = (0, _vue.isRef)(options) || typeof options === "function" ? (0, _vue.toValue)(options) : options;
+    return resolveOptions(raw);
+  });
+  const patternUrl = (0, _vue.computed)(() => buildPatternUrl(resolved.value));
+  let layer = null;
+  let host = null;
+  let observer = null;
+  let reinjectScheduled = false;
+  const reinject = () => {
+    if (reinjectScheduled) return;
+    reinjectScheduled = true;
+    Promise.resolve().then(() => {
+      reinjectScheduled = false;
+      if (!host) return;
+      if (layer && host.contains(layer)) {
+        host.removeChild(layer);
+      }
+      layer = document.createElement("div");
+      applyLayerStyles(layer, resolved.value, patternUrl.value);
+      host.appendChild(layer);
+    });
+  };
+  const ensureObserver = () => {
+    if (observer || !host) return;
+    observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          let removed = false;
+          mutation.removedNodes.forEach(node => {
+            if (node === layer) removed = true;
+          });
+          if (removed) {
+            reinject();
+            return;
+          }
+        } else if (mutation.type === "attributes" && mutation.target === layer) {
+          reinject();
+          return;
+        }
+      }
+    });
+    observer.observe(host, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ["style", "class", _watermark.WATERMARK_DATA_ATTR],
+      subtree: false
+    });
+  };
+  const install = target => {
+    if (typeof document === "undefined") return null;
+    host = target ?? document.body;
+    if (!host) return null;
+    const computedPosition = getComputedStyle(host).position;
+    if (!computedPosition || computedPosition === "static") {
+      host.style.position = "relative";
+    }
+    layer = document.createElement("div");
+    applyLayerStyles(layer, resolved.value, patternUrl.value);
+    host.appendChild(layer);
+    if (resolved.value && options?.antiTamper) {
+      ensureObserver();
+    }
+    return layer;
+  };
+  const uninstall = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    if (layer && host && host.contains(layer)) {
+      host.removeChild(layer);
+    }
+    layer = null;
+    host = null;
+  };
+  if ((0, _vue.getCurrentScope)()) {
+    (0, _vue.onScopeDispose)(uninstall);
+  }
+  return {
+    patternUrl,
+    install,
+    uninstall
+  };
+}

package/dist/src/composables/Watermark/watermark.composable.d.ts

@@ -0,0 +1,28 @@
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { IUseWatermarkOptions } from '../../interfaces';
+/**
+ * Headless watermark composable. Returns the data-URL pattern (for
+ * consumers who want to bind it manually via `:style`) plus
+ * `install()` / `uninstall()` helpers for programmatic use without
+ * mounting `<OrigamWatermark>`.
+ *
+ * The composable is SSR-safe — pure-string SVG construction, no DOM
+ * access. `install()` short-circuits when `document` is undefined.
+ *
+ * @example
+ * ```ts
+ * const { patternUrl, install, uninstall } = useWatermark({
+ *     text: 'CONFIDENTIAL — john.doe@example.com',
+ *     opacity: 0.08,
+ *     angle: -30,
+ *     gap: 120
+ * })
+ * onMounted(() => install(document.body))
+ * onBeforeUnmount(() => uninstall())
+ * ```
+ */
+export declare function useWatermark(options?: MaybeRefOrGetter<IUseWatermarkOptions>): {
+    patternUrl: ComputedRef<string>;
+    install: (target?: HTMLElement) => HTMLElement | null;
+    uninstall: () => void;
+};

package/dist/src/composables/Watermark/watermark.composable.js

@@ -0,0 +1,158 @@
+import {
+  computed,
+  getCurrentScope,
+  isRef,
+  onScopeDispose,
+  toValue
+} from "vue";
+import {
+  WATERMARK_DATA_ATTR,
+  WATERMARK_DEFAULT_ANGLE_DEG,
+  WATERMARK_DEFAULT_COLOR,
+  WATERMARK_DEFAULT_FONT_FAMILY,
+  WATERMARK_DEFAULT_FONT_SIZE_PX,
+  WATERMARK_DEFAULT_FONT_WEIGHT,
+  WATERMARK_DEFAULT_GAP_PX,
+  WATERMARK_DEFAULT_OPACITY,
+  WATERMARK_DEFAULT_POINTER_EVENTS,
+  WATERMARK_DEFAULT_Z_INDEX
+} from "../../consts/Watermark/watermark.const.js";
+function escapeXml(raw) {
+  return raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function buildPatternUrl(options) {
+  const tile = options.gap + Math.max(options.fontSize, 1);
+  const cx = tile / 2;
+  const cy = tile / 2;
+  const opacityAttr = `opacity="${options.opacity}"`;
+  let glyph;
+  if (options.image) {
+    const safeHref = escapeXml(options.image);
+    const imgSize = Math.max(options.fontSize, 16);
+    glyph = `<image href="${safeHref}" x="${cx - imgSize / 2}" y="${cy - imgSize / 2}" width="${imgSize}" height="${imgSize}" preserveAspectRatio="xMidYMid meet" ${opacityAttr}/>`;
+  } else {
+    const safeText = escapeXml(options.text);
+    const safeFamily = escapeXml(options.fontFamily);
+    const safeColor = escapeXml(options.color);
+    const safeWeight = escapeXml(String(options.fontWeight));
+    glyph = `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="middle" fill="${safeColor}" font-size="${options.fontSize}" font-family="${safeFamily}" font-weight="${safeWeight}" ${opacityAttr}>${safeText}</text>`;
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tile}" height="${tile}" viewBox="0 0 ${tile} ${tile}"><g transform="rotate(${options.angle} ${cx} ${cy})">${glyph}</g></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function resolveOptions(raw) {
+  const opts = raw ?? {};
+  return {
+    text: opts.text ?? "",
+    image: opts.image ?? "",
+    opacity: typeof opts.opacity === "number" ? opts.opacity : WATERMARK_DEFAULT_OPACITY,
+    angle: typeof opts.angle === "number" ? opts.angle : WATERMARK_DEFAULT_ANGLE_DEG,
+    gap: typeof opts.gap === "number" ? opts.gap : WATERMARK_DEFAULT_GAP_PX,
+    fontSize: typeof opts.fontSize === "number" ? opts.fontSize : WATERMARK_DEFAULT_FONT_SIZE_PX,
+    fontFamily: opts.fontFamily ?? WATERMARK_DEFAULT_FONT_FAMILY,
+    color: opts.color ?? WATERMARK_DEFAULT_COLOR,
+    fontWeight: opts.fontWeight ?? WATERMARK_DEFAULT_FONT_WEIGHT,
+    pointerEvents: opts.pointerEvents ?? WATERMARK_DEFAULT_POINTER_EVENTS,
+    zIndex: typeof opts.zIndex === "number" ? opts.zIndex : WATERMARK_DEFAULT_Z_INDEX
+  };
+}
+function applyLayerStyles(layer, options, pattern) {
+  layer.style.position = "absolute";
+  layer.style.top = "0";
+  layer.style.right = "0";
+  layer.style.bottom = "0";
+  layer.style.left = "0";
+  layer.style.backgroundImage = pattern;
+  layer.style.backgroundRepeat = "repeat";
+  layer.style.pointerEvents = options.pointerEvents;
+  layer.style.zIndex = String(options.zIndex);
+  layer.style.userSelect = "none";
+  layer.setAttribute("aria-hidden", "true");
+  layer.setAttribute(WATERMARK_DATA_ATTR, "");
+}
+export function useWatermark(options = {}) {
+  const resolved = computed(() => {
+    const raw = isRef(options) || typeof options === "function" ? toValue(options) : options;
+    return resolveOptions(raw);
+  });
+  const patternUrl = computed(() => buildPatternUrl(resolved.value));
+  let layer = null;
+  let host = null;
+  let observer = null;
+  let reinjectScheduled = false;
+  const reinject = () => {
+    if (reinjectScheduled) return;
+    reinjectScheduled = true;
+    Promise.resolve().then(() => {
+      reinjectScheduled = false;
+      if (!host) return;
+      if (layer && host.contains(layer)) {
+        host.removeChild(layer);
+      }
+      layer = document.createElement("div");
+      applyLayerStyles(layer, resolved.value, patternUrl.value);
+      host.appendChild(layer);
+    });
+  };
+  const ensureObserver = () => {
+    if (observer || !host) return;
+    observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          let removed = false;
+          mutation.removedNodes.forEach((node) => {
+            if (node === layer) removed = true;
+          });
+          if (removed) {
+            reinject();
+            return;
+          }
+        } else if (mutation.type === "attributes" && mutation.target === layer) {
+          reinject();
+          return;
+        }
+      }
+    });
+    observer.observe(host, {
+      childList: true,
+      attributes: true,
+      attributeFilter: ["style", "class", WATERMARK_DATA_ATTR],
+      subtree: false
+    });
+  };
+  const install = (target) => {
+    if (typeof document === "undefined") return null;
+    host = target ?? document.body;
+    if (!host) return null;
+    const computedPosition = getComputedStyle(host).position;
+    if (!computedPosition || computedPosition === "static") {
+      host.style.position = "relative";
+    }
+    layer = document.createElement("div");
+    applyLayerStyles(layer, resolved.value, patternUrl.value);
+    host.appendChild(layer);
+    if (resolved.value && options?.antiTamper) {
+      ensureObserver();
+    }
+    return layer;
+  };
+  const uninstall = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    if (layer && host && host.contains(layer)) {
+      host.removeChild(layer);
+    }
+    layer = null;
+    host = null;
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(uninstall);
+  }
+  return {
+    patternUrl,
+    install,
+    uninstall
+  };
+}