js/utils.js - master - diloytd/rectangle

js/utils.js
101 строка3 KB
diloytd
add modal window
09 июл 2026, 11:48
09 июл 2026, 11:4885687f2
/**
 * Creates a collision-resistant id with a readable prefix.
 * Used for rectangle identifiers that remain stable between render passes.
 * @param {string} prefix - Prefix describing the entity type.
 * @returns {string} Unique identifier.
 */
export const createId = (prefix = "id") => {
  const randomPart = crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`;

  return `${prefix}-${randomPart}`;
};

/**
 * Returns the current timestamp in ISO format.
 * Stored on rectangles to keep created entities serializable.
 * @returns {string} Current ISO timestamp.
 */
export const getIsoTimestamp = () => new Date().toISOString();

/**
 * Converts form input to a finite number.
 * Empty strings and non-numeric values are normalized to NaN for validation.
 * @param {string | number} value - Raw user input.
 * @returns {number} Parsed number or NaN.
 */
export const toFiniteNumber = (value) => {
  const numberValue = Number(value);

  if (!Number.isFinite(numberValue)) {
    return Number.NaN;
  }

  return numberValue;
};

/**
 * Formats a millimeter value for UI labels without losing fractional precision.
 * Integer values are shown without a decimal part.
 * @param {number} value - Millimeter value.
 * @returns {string} Formatted millimeter text.
 */
export const formatMillimeters = (value) => {
  if (Number.isInteger(value)) {
    return `${value}`;
  }

  return `${Number(value.toFixed(2))}`;
};

/**
 * Builds the standard size label for a rectangle.
 * @param {number} width - Rectangle width in millimeters.
 * @param {number} height - Rectangle height in millimeters.
 * @returns {string} Human-readable size label.
 */
export const formatSize = (width, height) => `${formatMillimeters(width)} × ${formatMillimeters(height)}`;

/**
 * Creates a deep clone for plain serializable application state.
 * Used by history so undo and redo never share mutable rectangle objects.
 * @template T
 * @param {T} value - Serializable value to clone.
 * @returns {T} Cloned value.
 */
export const clonePlain = (value) => JSON.parse(JSON.stringify(value));

/**
 * Removes every child from a DOM node.
 * Keeps rendering code deterministic by rebuilding SVG content from state.
 * @param {Element} element - DOM element to clear.
 * @returns {void}
 */
export const clearElement = (element) => {
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
};

/**
 * Creates an SVG element with optional attributes.
 * @param {string} tagName - SVG tag name.
 * @param {Record<string, string | number>} [attributes={}] - Attributes to assign.
 * @returns {SVGElement} Created SVG element.
 */
export const createSvgElement = (tagName, attributes = {}) => {
  const element = document.createElementNS("http://www.w3.org/2000/svg", tagName);

  Object.entries(attributes).forEach(([name, value]) => {
    element.setAttribute(name, String(value));
  });

  return element;
};

/**
 * Checks whether a keyboard event represents an activation key.
 * Used to make SVG rectangles selectable from the keyboard.
 * @param {KeyboardEvent} event - Keyboard event from an interactive element.
 * @returns {boolean} True when Enter or Space was pressed.
 */
export const isActivationKey = (event) => event.key === "Enter" || event.key === " ";