@jxsuite/studio 0.5.0 → 0.5.1

package/src/utils/canvas-media.js

@@ -0,0 +1,151 @@
+/** Canvas media/breakpoint utilities — pure functions extracted for testability. */
+
+/**
+ * Classify $media entries into size breakpoints (get a canvas each) and feature queries (rendered
+ * as toolbar toggles).
+ *
+ * @param {Record<string, string> | null | undefined} mediaDef
+ * @returns {{
+ *   sizeBreakpoints: { name: string; query: string; width: number; type: string }[];
+ *   featureQueries: { name: string; query: string }[];
+ *   baseWidth: number;
+ * }}
+ */
+export function parseMediaEntries(mediaDef) {
+  if (!mediaDef) return { sizeBreakpoints: [], featureQueries: [], baseWidth: 320 };
+  const sizes = [],
+    features = [];
+  let baseWidth = 320;
+  for (const [name, query] of Object.entries(mediaDef)) {
+    if (name === "--") {
+      const wm = String(query).match(/^(\d+)\s*px$/);
+      baseWidth = wm ? parseFloat(wm[1]) : 320;
+      continue;
+    }
+    const minMatch = query.match(/min-width:\s*([\d.]+)px/);
+    const maxMatch = query.match(/max-width:\s*([\d.]+)px/);
+    if (minMatch) sizes.push({ name, query, width: parseFloat(minMatch[1]), type: "min" });
+    else if (maxMatch) sizes.push({ name, query, width: parseFloat(maxMatch[1]), type: "max" });
+    else features.push({ name, query });
+  }
+  sizes.sort((a, b) => (a.type === "min" ? a.width - b.width : b.width - a.width));
+  return { sizeBreakpoints: sizes, featureQueries: features, baseWidth };
+}
+
+/**
+ * Compute which named breakpoints are active at a given canvas width.
+ *
+ * @param {{ name: string; width: number; type: string }[]} sizeBreakpoints
+ * @param {number} canvasWidth
+ * @returns {Set<string>}
+ */
+export function activeBreakpointsForWidth(sizeBreakpoints, canvasWidth) {
+  const active = new Set();
+  for (const bp of sizeBreakpoints) {
+    if (bp.type === "min" && canvasWidth >= bp.width) active.add(bp.name);
+    else if (bp.type === "max" && canvasWidth <= bp.width) active.add(bp.name);
+  }
+  return active;
+}
+
+/**
+ * Apply styles to a canvas element, including active media overrides. Base (flat) styles applied
+ * first, then matching media overrides in source order.
+ *
+ * @param {HTMLElement} el
+ * @param {Record<string, any>} styleDef
+ * @param {Set<string>} activeBreakpoints
+ * @param {Record<string, boolean>} featureToggles
+ */
+export function applyCanvasStyle(el, styleDef, activeBreakpoints, featureToggles) {
+  if (!styleDef || typeof styleDef !== "object") return;
+  for (const [prop, val] of Object.entries(styleDef)) {
+    if (typeof val === "string" || typeof val === "number") {
+      try {
+        if (prop.startsWith("--")) el.style.setProperty(prop, String(val));
+        else /** @type {any} */ (el.style)[prop] = val;
+      } catch {}
+    }
+  }
+  for (const [key, val] of Object.entries(styleDef)) {
+    if (!key.startsWith("@") || typeof val !== "object") continue;
+    const mediaName = key.slice(1);
+    if (mediaName === "--") continue;
+    if (activeBreakpoints.has(mediaName) || featureToggles[mediaName]) {
+      for (const [prop, v] of Object.entries(/** @type {any} */ (val))) {
+        if (typeof v === "string" || typeof v === "number") {
+          try {
+            if (prop.startsWith("--")) el.style.setProperty(prop, String(v));
+            else /** @type {any} */ (el.style)[prop] = v;
+          } catch {}
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Scan stylesheets for @media rules matching active breakpoints, collecting the CSS declarations
+ * that should be applied as inline overrides per data-jx element.
+ *
+ * Returns a Map of data-jx uid → Map of CSS property → value.
+ *
+ * @param {Iterable<CSSStyleSheet>} styleSheets
+ * @param {Set<string>} activeBreakpoints
+ * @returns {Map<string, Map<string, string>>}
+ */
+export function collectMediaOverrides(styleSheets, activeBreakpoints) {
+  /** @type {Map<string, Map<string, string>>} */
+  const overrides = new Map();
+  if (!activeBreakpoints.size) return overrides;
+
+  for (const sheet of styleSheets) {
+    /** @type {CSSRuleList | null} */
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (!rules) continue;
+    for (let ri = 0; ri < rules.length; ri++) {
+      const rule = rules[ri];
+      if (!(rule instanceof CSSMediaRule)) continue;
+      if (!activeBreakpoints.has(rule.conditionText)) continue;
+      for (let mi = 0; mi < rule.cssRules.length; mi++) {
+        const mediaRule = rule.cssRules[mi];
+        if (!(mediaRule instanceof CSSStyleRule)) continue;
+        const selector = mediaRule.selectorText;
+        const jxMatch = selector.match(/\[data-jx="([^"]+)"\]/);
+        if (!jxMatch) continue;
+        const uid = jxMatch[1];
+        if (!overrides.has(uid)) overrides.set(uid, new Map());
+        const props = /** @type {Map<string, string>} */ (overrides.get(uid));
+        for (let i = 0; i < mediaRule.style.length; i++) {
+          const prop = mediaRule.style[i];
+          props.set(prop, mediaRule.style.getPropertyValue(prop));
+        }
+      }
+    }
+  }
+  return overrides;
+}
+
+/**
+ * Apply collected media overrides to elements within a canvas.
+ *
+ * @param {Element} canvasEl
+ * @param {Map<string, Map<string, string>>} overrides
+ */
+export function applyOverridesToCanvas(canvasEl, overrides) {
+  for (const [uid, props] of overrides) {
+    const els = canvasEl.querySelectorAll(`[data-jx="${uid}"]`);
+    for (const el of els) {
+      for (const [prop, val] of props) {
+        try {
+          /** @type {HTMLElement} */ (el).style.setProperty(prop, val);
+        } catch {}
+      }
+    }
+  }
+}

package/src/view.js

@@ -42,4 +42,27 @@ export const view = {
   // Pseudo-state preview
   forcedStyleTag: null,
   forcedAttrEl: null,
+
+  // Left panel / elements UI
+  elementsCollapsed: new Set(),
+  elementsFilter: "",
+
+  // Drag interaction
+  lastDragInput: null,
+  _currentDropTargetRow: null,
+  layerDragSourceHeight: 0,
+
+  // Editor state
+  savedRange: null,
+  _completionRegistered: false,
+
+  // Canvas / stylebook
+  stylebookElToTag: new WeakMap(),
+
+  // Responsive breakpoints UI
+  showAddBreakpointForm: false,
+  addBreakpointPreview: "",
+
+  // Autosave
+  autosaveTimer: null,
 };