@hkdigital/lib-sveltekit 0.2.6 → 0.2.8

package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte

@@ -1,146 +1,146 @@
-<script>
-  import { onMount } from 'svelte';
-  import { DESIGN, CLAMPING } from '../../../design/design-config.js';
-  import {
-    enableScalingUI,
-    getAllRootScalingVars
-  } from '../../../util/design-system/index.js';
-
-  /**
-   * Holds the current scaling values for the debug panel
-   * @type {Object}
-   */
-  let scalingValues = $state({
-    scaleW: 0,
-    scaleH: 0,
-    scaleViewport: 0,
-    scaleUI: 0,
-    scaleTextBase: 0,
-    scaleTextHeading: 0,
-    scaleTextUI: 0
-  });
-
-  /**
-   * Controls visibility of the debug panel
-   */
-  let showDebugPanel = $state(false);
-
-  /**
-   * Updates scaling values for the debug panel
-   */
-  function updateDebugValues() {
-    // Get scaling values
-    scalingValues = getAllRootScalingVars();
-
-    // Update window size display if in browser context
-    if (typeof window !== 'undefined') {
-      const windowSizeElement = document.getElementById('window-size');
-      if (windowSizeElement) {
-        windowSizeElement.textContent = `${window.innerWidth}×${window.innerHeight}px`;
-      }
-    }
-  }
-
-  onMount(() => {
-    // Initialize the design scaling system
-    //const cleanup = () => {};
-    const cleanup = enableScalingUI(DESIGN, CLAMPING);
-
-    // Update debug values initially
-    updateDebugValues();
-
-    // Set up event listener for updating debug values on resize
-    window.addEventListener('resize', updateDebugValues);
-
-    // Return combined cleanup function
-    return () => {
-      cleanup();
-      window.removeEventListener('resize', updateDebugValues);
-    };
-  });
-
-  /**
-   * Toggle debug panel visibility
-   */
-  function toggleDebugPanel() {
-    showDebugPanel = !showDebugPanel;
-  }
-
-  /**
-   * Format a number to 2 decimal places
-   * @param {number} value - The number to format
-   * @returns {string} Formatted number
-   */
-  function formatNumber(value) {
-    return value.toFixed(2);
-  }
-</script>
-
-<!-- Debug Panel -->
-{#if showDebugPanel}
-  <div
-    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-2 text-ui-md z-50 font-mono"
-  >
-    <div class="flex justify-between items-center mb-1">
-      <h3 class="font-bold">Design System Scaling</h3>
-      <button
-        onclick={toggleDebugPanel}
-        class="ml-2 px-1.5 bg-gray-700 hover:bg-gray-600 rounded"
-      >
-        &times;
-      </button>
-    </div>
-    <div class="grid grid-cols-2 gap-x-2 gap-y-0.5">
-      <div class="text-gray-400">Design Width:</div>
-      <div>{DESIGN.width}px</div>
-
-      <div class="text-gray-400">Design Height:</div>
-      <div>{DESIGN.height}px</div>
-
-      <div class="text-gray-400">Window:</div>
-      <div id="window-size">...</div>
-
-      <div class="text-gray-400">Scale W:</div>
-      <div>{formatNumber(scalingValues.scaleW)}</div>
-
-      <div class="text-gray-400">Scale H:</div>
-      <div>{formatNumber(scalingValues.scaleH)}</div>
-
-      <div class="text-gray-400">Viewport:</div>
-      <div>{formatNumber(scalingValues.scaleViewport)}</div>
-
-      <div class="text-gray-400">UI:</div>
-      <div>{formatNumber(scalingValues.scaleUI)}</div>
-
-      <div class="text-gray-400">Text Content:</div>
-      <div>{formatNumber(scalingValues.scaleTextBase)}</div>
-
-      <div class="text-gray-400">Text Heading:</div>
-      <div>{formatNumber(scalingValues.scaleTextHeading)}</div>
-
-      <div class="text-gray-400">Text UI:</div>
-      <div>{formatNumber(scalingValues.scaleTextUI)}</div>
-    </div>
-
-    <div class="mt-1 pt-1 border-t border-gray-600 text-gray-400">
-      <div>Clamping:</div>
-      <div class="grid grid-cols-3 text-2xs">
-        <div>UI: {CLAMPING.ui.min} - {CLAMPING.ui.max}</div>
-        <div>
-          Content: {CLAMPING.textBase.min} - {CLAMPING.textBase.max}
-        </div>
-        <div>
-          Heading: {CLAMPING.textHeading.min} - {CLAMPING.textHeading.max}
-        </div>
-      </div>
-    </div>
-  </div>
-{:else}
-  <!-- Debug Panel Toggle Button -->
-  <button
-    onclick={toggleDebugPanel}
-    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-16ut py-8ut text-ui-md z-50 font-mono hover:bg-opacity-90"
-  >
-    Show Debug
-  </button>
-{/if}
+<script>
+  import { onMount } from 'svelte';
+  import { DESIGN, CLAMPING } from '../../../design/design-config.js';
+  import {
+    enableScalingUI,
+    getAllRootScalingVars
+  } from '../../../util/design-system/index.js';
+
+  /**
+   * Holds the current scaling values for the debug panel
+   * @type {Object}
+   */
+  let scalingValues = $state({
+    scaleW: 0,
+    scaleH: 0,
+    scaleViewport: 0,
+    scaleUI: 0,
+    scaleTextBase: 0,
+    scaleTextHeading: 0,
+    scaleTextUI: 0
+  });
+
+  /**
+   * Controls visibility of the debug panel
+   */
+  let showDebugPanel = $state(false);
+
+  /**
+   * Updates scaling values for the debug panel
+   */
+  function updateDebugValues() {
+    // Get scaling values
+    scalingValues = getAllRootScalingVars();
+
+    // Update window size display if in browser context
+    if (typeof window !== 'undefined') {
+      const windowSizeElement = document.getElementById('window-size');
+      if (windowSizeElement) {
+        windowSizeElement.textContent = `${window.innerWidth}×${window.innerHeight}px`;
+      }
+    }
+  }
+
+  onMount(() => {
+    // Initialize the design scaling system
+    //const cleanup = () => {};
+    const cleanup = enableScalingUI(DESIGN, CLAMPING);
+
+    // Update debug values initially
+    updateDebugValues();
+
+    // Set up event listener for updating debug values on resize
+    window.addEventListener('resize', updateDebugValues);
+
+    // Return combined cleanup function
+    return () => {
+      cleanup();
+      window.removeEventListener('resize', updateDebugValues);
+    };
+  });
+
+  /**
+   * Toggle debug panel visibility
+   */
+  function toggleDebugPanel() {
+    showDebugPanel = !showDebugPanel;
+  }
+
+  /**
+   * Format a number to 2 decimal places
+   * @param {number} value - The number to format
+   * @returns {string} Formatted number
+   */
+  function formatNumber(value) {
+    return value.toFixed(2);
+  }
+</script>
+
+<!-- Debug Panel -->
+{#if showDebugPanel}
+  <div
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-2 text-ui-md z-50 font-mono"
+  >
+    <div class="flex justify-between items-center mb-1">
+      <h3 class="font-bold">Design System Scaling</h3>
+      <button
+        onclick={toggleDebugPanel}
+        class="ml-2 px-1.5 bg-gray-700 hover:bg-gray-600 rounded"
+      >
+        &times;
+      </button>
+    </div>
+    <div class="grid grid-cols-2 gap-x-2 gap-y-0.5">
+      <div class="text-gray-400">Design Width:</div>
+      <div>{DESIGN.width}px</div>
+
+      <div class="text-gray-400">Design Height:</div>
+      <div>{DESIGN.height}px</div>
+
+      <div class="text-gray-400">Window:</div>
+      <div id="window-size">...</div>
+
+      <div class="text-gray-400">Scale W:</div>
+      <div>{formatNumber(scalingValues.scaleW)}</div>
+
+      <div class="text-gray-400">Scale H:</div>
+      <div>{formatNumber(scalingValues.scaleH)}</div>
+
+      <div class="text-gray-400">Viewport:</div>
+      <div>{formatNumber(scalingValues.scaleViewport)}</div>
+
+      <div class="text-gray-400">UI:</div>
+      <div>{formatNumber(scalingValues.scaleUI)}</div>
+
+      <div class="text-gray-400">Text Content:</div>
+      <div>{formatNumber(scalingValues.scaleTextBase)}</div>
+
+      <div class="text-gray-400">Text Heading:</div>
+      <div>{formatNumber(scalingValues.scaleTextHeading)}</div>
+
+      <div class="text-gray-400">Text UI:</div>
+      <div>{formatNumber(scalingValues.scaleTextUI)}</div>
+    </div>
+
+    <div class="mt-1 pt-1 border-t border-gray-600 text-gray-400">
+      <div>Clamping:</div>
+      <div class="grid grid-cols-3 text-2xs">
+        <div>UI: {CLAMPING.ui.min} - {CLAMPING.ui.max}</div>
+        <div>
+          Content: {CLAMPING.textBase.min} - {CLAMPING.textBase.max}
+        </div>
+        <div>
+          Heading: {CLAMPING.textHeading.min} - {CLAMPING.textHeading.max}
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <!-- Debug Panel Toggle Button -->
+  <button
+    onclick={toggleDebugPanel}
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-16ut py-8ut text-ui-md z-50 font-mono hover:bg-opacity-90"
+  >
+    Show Debug
+  </button>
+{/if}

package/dist/components/debug/index.js

@@ -1 +1 @@
-export { default as DebugPanelDesignScaling } from './debug-panel-design-scaling/DebugPanelDesignScaling.svelte';
+export { default as DebugPanelDesignScaling } from './debug-panel-design-scaling/DebugPanelDesignScaling.svelte';

package/dist/components/drag-drop/DragController.d.ts

@@ -12,26 +12,6 @@ export class DragController {
     targetElement: HTMLElement;
     offsetX: number;
     offsetY: number;
-    _previewSet: boolean;
-    /**
-     * Create a preview image from the current draggable element or a specific child element
-     * @param {string} [selector] - Optional CSS selector to target a specific child element
-     * @returns {HTMLElement} - The created preview element
-     */
-    grabPreviewImage(selector?: string): HTMLElement;
-    /**
-     * Set a custom element as the drag preview image
-     * @param {HTMLElement} element - Element to use as drag preview
-     * @param {number} [offsetX] - Horizontal offset (uses natural offset if omitted)
-     * @param {number} [offsetY] - Vertical offset (uses natural offset if omitted)
-     * @returns {boolean} - Whether setting the preview was successful
-     */
-    setPreviewImage(element: HTMLElement, offsetX?: number, offsetY?: number): boolean;
-    /**
-     * Check if a custom preview has been set
-     * @returns {boolean}
-     */
-    hasCustomPreview(): boolean;
     /**
      * Apply the default preview (uses the draggable element itself)
      * @returns {boolean}

package/dist/components/drag-drop/DragController.js

@@ -1,113 +1,44 @@
-/**
- * Controller for customizing drag
- * E.g. set a custom preview image
- */
-export class DragController {
-  /**
-   * @param {DragEvent} event - The drag event
-   */
-  constructor(event) {
-    this.event = event;
-    this.dataTransfer = event.dataTransfer;
-    this.targetElement = /** @type {HTMLElement} */ (event.currentTarget);
-
-    // Calculate natural offsets by default (to prevent "jumping")
-    const rect = this.targetElement.getBoundingClientRect();
-    this.offsetX = event.clientX - rect.left;
-    this.offsetY = event.clientY - rect.top;
-
-    this._previewSet = false;
-  }
-
-  /**
-   * Create a preview image from the current draggable element or a specific child element
-   * @param {string} [selector] - Optional CSS selector to target a specific child element
-   * @returns {HTMLElement} - The created preview element
-   */
-  grabPreviewImage(selector = null) {
-    // Find the source element (either the whole draggable or a specific child)
-    const sourceElement = selector
-      ? this.targetElement.querySelector(selector)
-      : this.targetElement;
-
-    if (!sourceElement) {
-      console.error(`Element with selector "${selector}" not found`);
-      return this.grabPreviewImage(); // Fallback to the main element
-    }
-
-    // Clone the element to create the preview
-    const previewElement = /** @type {HTMLElement} */ (
-      sourceElement.cloneNode(true)
-    );
-
-    // Position off-screen (needed for setDragImage to work properly)
-    previewElement.style.position = 'absolute';
-    previewElement.style.top = '-9999px';
-    previewElement.style.left = '-9999px';
-
-    // Add to the document temporarily
-    document.body.appendChild(previewElement);
-
-    return previewElement;
-  }
-
-  /**
-   * Set a custom element as the drag preview image
-   * @param {HTMLElement} element - Element to use as drag preview
-   * @param {number} [offsetX] - Horizontal offset (uses natural offset if omitted)
-   * @param {number} [offsetY] - Vertical offset (uses natural offset if omitted)
-   * @returns {boolean} - Whether setting the preview was successful
-   */
-  setPreviewImage(element, offsetX, offsetY) {
-    if (!this.dataTransfer || !this.dataTransfer.setDragImage) {
-      return false;
-    }
-
-    // Use provided offsets or fall back to natural offsets
-    const finalOffsetX = offsetX !== undefined ? offsetX : this.offsetX;
-    const finalOffsetY = offsetY !== undefined ? offsetY : this.offsetY;
-
-    try {
-      this.dataTransfer.setDragImage(element, finalOffsetX, finalOffsetY);
-      this._previewSet = true;
-      return true;
-    } catch (err) {
-      console.error('Failed to set drag preview image:', err);
-      return false;
-    }
-  }
-
-  /**
-   * Check if a custom preview has been set
-   * @returns {boolean}
-   */
-  hasCustomPreview() {
-    return this._previewSet;
-  }
-
-  /**
-   * Apply the default preview (uses the draggable element itself)
-   * @returns {boolean}
-   */
-  applyDefaultPreview() {
-    if (
-      !this.dataTransfer ||
-      !this.dataTransfer.setDragImage ||
-      this._previewSet
-    ) {
-      return false;
-    }
-
-    try {
-      this.dataTransfer.setDragImage(
-        this.targetElement,
-        this.offsetX,
-        this.offsetY
-      );
-      return true;
-    } catch (err) {
-      console.error('Failed to set default drag preview:', err);
-      return false;
-    }
-  }
-}
+/**
+ * Controller for customizing drag
+ * E.g. set a custom preview image
+ */
+export class DragController {
+  /**
+   * @param {DragEvent} event - The drag event
+   */
+  constructor(event) {
+    this.event = event;
+    this.dataTransfer = event.dataTransfer;
+    this.targetElement = /** @type {HTMLElement} */ (event.currentTarget);
+
+    // Calculate natural offsets by default (to prevent "jumping")
+    const rect = this.targetElement.getBoundingClientRect();
+    this.offsetX = event.clientX - rect.left;
+    this.offsetY = event.clientY - rect.top;
+  }
+
+  /**
+   * Apply the default preview (uses the draggable element itself)
+   * @returns {boolean}
+   */
+  applyDefaultPreview() {
+    if (
+      !this.dataTransfer ||
+      !this.dataTransfer.setDragImage
+    ) {
+      return false;
+    }
+
+    try {
+      this.dataTransfer.setDragImage(
+        this.targetElement,
+        this.offsetX,
+        this.offsetY
+      );
+      return true;
+    } catch (err) {
+      console.error('Failed to set default drag preview:', err);
+      return false;
+    }
+  }
+}