@jsenv/dom 0.1.0

package/src/style/style_parsing.js

@@ -0,0 +1,317 @@
+// Properties that need px units
+const pxProperties = [
+  "width",
+  "height",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "border",
+  "borderWidth",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "fontSize",
+  "lineHeight",
+  "letterSpacing",
+  "wordSpacing",
+  "translateX",
+  "translateY",
+  "translateZ",
+  "borderRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+];
+
+// Properties that need deg units
+const degProperties = [
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "skew",
+  "skewX",
+  "skewY",
+];
+
+// Properties that should remain unitless
+const unitlessProperties = [
+  "opacity",
+  "zIndex",
+  "flexGrow",
+  "flexShrink",
+  "order",
+  "columnCount",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "scaleZ",
+];
+
+// Normalize a single style value
+export const normalizeStyle = (value, propertyName, context = "js") => {
+  if (propertyName === "transform") {
+    if (context === "js") {
+      if (typeof value === "string") {
+        // For js context, prefer objects
+        return parseCSSTransform(value);
+      }
+      // If code does transform: { translateX: "10px" }
+      // we want to store { translateX: 10 }
+      const transformNormalized = {};
+      for (const key of Object.keys(value)) {
+        const partValue = normalizeStyle(value[key], key, "js");
+        transformNormalized[key] = partValue;
+      }
+      return transformNormalized;
+    }
+    if (typeof value === "object" && value !== null) {
+      // For CSS context, ensure transform is a string
+      return stringifyCSSTransform(value);
+    }
+    return value;
+  }
+
+  // Handle transform.* properties (e.g., "transform.translateX")
+  if (propertyName.startsWith("transform.")) {
+    if (context === "css") {
+      console.warn(
+        `normalizeStyle: magic properties like "${propertyName}" are not applicable in "css" context. Returning original value.`,
+      );
+      return value;
+    }
+    const transformProperty = propertyName.slice(10); // Remove "transform." prefix
+    // If value is a CSS transform string, parse it first to extract the specific property
+    if (typeof value === "string") {
+      if (value === "none") {
+        return undefined;
+      }
+      const parsedTransform = parseCSSTransform(value);
+      return parsedTransform?.[transformProperty];
+    }
+    // If value is a transform object, extract the property directly
+    if (typeof value === "object" && value !== null) {
+      return value[transformProperty];
+    }
+    // never supposed to happen, the value given is neither string nor object
+    return undefined;
+  }
+
+  if (pxProperties.includes(propertyName)) {
+    return normalizeNumber(value, context, "px", propertyName);
+  }
+  if (degProperties.includes(propertyName)) {
+    return normalizeNumber(value, context, "deg", propertyName);
+  }
+  if (unitlessProperties.includes(propertyName)) {
+    return normalizeNumber(value, context, "", propertyName);
+  }
+
+  return value;
+};
+const normalizeNumber = (value, context, unit, propertyName) => {
+  if (context === "css") {
+    if (typeof value === "number") {
+      if (isNaN(value)) {
+        console.warn(`NaN found for "${propertyName}"`);
+      }
+      return `${value}${unit}`;
+    }
+    return value;
+  }
+  if (typeof value === "string") {
+    if (value === "auto") {
+      return "auto";
+    }
+    const numericValue = parseFloat(value);
+    if (isNaN(numericValue)) {
+      console.warn(
+        `"${propertyName}": ${value} cannot be converted to number, returning value as-is.`,
+      );
+      return value;
+    }
+    return numericValue;
+  }
+  return value;
+};
+
+// Normalize styles for DOM application
+export const normalizeStyles = (styles, context = "js") => {
+  const normalized = {};
+  for (const [key, value] of Object.entries(styles)) {
+    normalized[key] = normalizeStyle(value, key, context);
+  }
+  return normalized;
+};
+
+// Convert transform object to CSS string
+export const stringifyCSSTransform = (transformObj) => {
+  const transforms = [];
+  for (const key of Object.keys(transformObj)) {
+    const transformPartValue = transformObj[key];
+    const normalizedTransformPartValue = normalizeStyle(
+      transformPartValue,
+      key,
+      "css",
+    );
+    transforms.push(`${key}(${normalizedTransformPartValue})`);
+  }
+  return transforms.join(" ");
+};
+
+// Parse transform CSS string into object
+export const parseCSSTransform = (transformString) => {
+  if (!transformString || transformString === "none") {
+    return undefined;
+  }
+
+  const transformObj = {};
+
+  // Parse transform functions
+  const transformPattern = /(\w+)\(([^)]+)\)/g;
+  let match;
+
+  while ((match = transformPattern.exec(transformString)) !== null) {
+    const [, functionName, value] = match;
+
+    // Handle matrix functions specially
+    if (functionName === "matrix" || functionName === "matrix3d") {
+      const matrixComponents = parseMatrixTransform(match[0]);
+      if (matrixComponents) {
+        // Only add non-default values to preserve original information
+        Object.assign(transformObj, matrixComponents);
+      }
+      // If matrix can't be parsed to simple components, skip it (keep complex transforms as-is)
+      continue;
+    }
+
+    // Handle regular transform functions
+    const normalizedValue = normalizeStyle(value.trim(), functionName, "js");
+    if (normalizedValue !== undefined) {
+      transformObj[functionName] = normalizedValue;
+    }
+  }
+
+  // Return undefined if no properties were extracted (preserves original information)
+  return Object.keys(transformObj).length > 0 ? transformObj : undefined;
+};
+
+// Parse a matrix transform and extract simple transform components when possible
+const parseMatrixTransform = (matrixString) => {
+  // Match matrix() or matrix3d() functions
+  const matrixMatch = matrixString.match(/matrix(?:3d)?\(([^)]+)\)/);
+  if (!matrixMatch) {
+    return null;
+  }
+
+  const values = matrixMatch[1].split(",").map((v) => parseFloat(v.trim()));
+
+  if (matrixString.includes("matrix3d")) {
+    // matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)
+    if (values.length !== 16) {
+      return null;
+    }
+    const [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p] = values;
+    // Check if it's a simple 2D transform (most common case)
+    if (
+      c === 0 &&
+      d === 0 &&
+      g === 0 &&
+      h === 0 &&
+      i === 0 &&
+      j === 0 &&
+      k === 1 &&
+      l === 0 &&
+      o === 0 &&
+      p === 1
+    ) {
+      // This is essentially a 2D transform
+      return parseSimple2DMatrix(a, b, e, f, m, n);
+    }
+    return null; // Complex 3D transform
+  }
+  // matrix(a, b, c, d, e, f)
+  if (values.length !== 6) {
+    return null;
+  }
+  const [a, b, c, d, e, f] = values;
+  return parseSimple2DMatrix(a, b, c, d, e, f);
+};
+
+// Parse a simple 2D matrix into transform components
+const parseSimple2DMatrix = (a, b, c, d, e, f) => {
+  const result = {};
+
+  // Extract translation - only add if not default (0)
+  if (e !== 0) {
+    result.translateX = e;
+  }
+  if (f !== 0) {
+    result.translateY = f;
+  }
+
+  // Check for identity matrix (no transform)
+  if (a === 1 && b === 0 && c === 0 && d === 1) {
+    return result; // Only translation
+  }
+
+  // Decompose the 2D transformation matrix
+  // Based on: https://frederic-wang.fr/decomposition-of-2d-transform-matrices.html
+
+  const det = a * d - b * c;
+  // Degenerate matrix (maps to a line or point)
+  if (det === 0) {
+    return null;
+  }
+
+  // Extract scale and rotation
+  if (c === 0) {
+    // Simple case: no skew
+    if (a !== 1) {
+      result.scaleX = a;
+    }
+    if (d !== 1) {
+      result.scaleY = d;
+    }
+    if (b !== 0) {
+      const angle = Math.atan(b / a) * (180 / Math.PI);
+      if (angle !== 0) {
+        result.rotate = angle;
+      }
+    }
+    return result;
+  }
+
+  // General case: decompose using QR decomposition approach
+  const scaleX = Math.sqrt(a * a + b * b);
+  const scaleY = det / scaleX;
+  const rotation = Math.atan2(b, a) * (180 / Math.PI);
+  const skewX =
+    Math.atan((a * c + b * d) / (scaleX * scaleX)) * (180 / Math.PI);
+  if (scaleX !== 1) {
+    result.scaleX = scaleX;
+  }
+  if (scaleY !== 1) {
+    result.scaleY = scaleY;
+  }
+  if (rotation !== 0) {
+    result.rotate = rotation;
+  }
+  if (skewX !== 0) {
+    result.skewX = skewX;
+  }
+  return result;
+};