@kokoa/clotho-editor 0.3.0 → 0.4.0

package/dist/{main-DC6D6RNQ.js → main-HDE5SDKM.js}

@@ -1,4 +1,4 @@
-import { updateCanvas, getDef, subscribe, updateMeta, mountEditorPlugins, setSelection, getSelection, setDef, undo, redo, downloadAnimationJson, importAnimation, markClean, updateSettings, isDirty, isDraft, canUndo, canRedo, uniqueChapterId, getCurrentTime, addChapter, uniqueElementId, registerExternalAsset, addElement, registerDataUriAsset, listAnimations, setDraft, saveAnimation, deleteAnimation, duplicateAnimation, createAnimation, getSelectedElementIds, deleteElement, deleteChapter, deleteEffect, updateChapter, isGroup, ungroupElement, groupElements, moveElementToEnd, moveElementToFront, reorderElement, loadAnimation, getCurrentSnapshot, setElementValueAtTime, findContainingGroup, isElementSelected, updateElementBase, createLayout, detachFromLayout, addCheckpoint, uniqueCheckpointId, deleteCheckpoint, addCameraFocus, updateCameraFocus, deleteCameraFocus, setCameraKeyframe, removeCameraKeyframe, removeCameraTrack, setCurrentTime, clearCamera, uniqueEffectId, addEffect, removeAppearance, removeTrack, removeTrackKeyframe, setTrackKeyframe, addAppearance, beginTransient, endTransient, getCamera, jumpBack, jumpForward, getHistory, promoteDraftToSaved, toggleSelectionFor, cameraControlAt, moveGroupBy, placeholderImageUrl, groupBbox, hasCamera, layoutIdsFor, findLayoutCollisions, updateLocales, updateData, updateResponsive, updateDuration, updateCheckpoint, setCameraStrokeScaling, updateAppearance, updateEffect, moveCameraKeyframe, childIdsOf } from './chunk-N47HF4VB.js';
+import { updateCanvas, getDef, subscribe, updateMeta, mountEditorPlugins, setSelection, getSelection, setDef, undo, redo, downloadAnimationJson, importAnimation, markClean, updateSettings, isDirty, isDraft, canUndo, canRedo, uniqueChapterId, getCurrentTime, addChapter, uniqueElementId, registerExternalAsset, addElement, registerDataUriAsset, listAnimations, setDraft, saveAnimation, deleteAnimation, duplicateAnimation, createAnimation, getSelectedElementIds, deleteElement, deleteChapter, deleteEffect, updateChapter, isGroup, ungroupElement, groupElements, moveElementToEnd, moveElementToFront, reorderElement, loadAnimation, getCurrentSnapshot, setElementValueAtTime, findContainingGroup, isElementSelected, updateElementBase, createLayout, detachFromLayout, addCheckpoint, uniqueCheckpointId, deleteCheckpoint, addCameraFocus, updateCameraFocus, deleteCameraFocus, setCameraKeyframe, removeCameraKeyframe, removeCameraTrack, setCurrentTime, clearCamera, uniqueEffectId, addEffect, removeAppearance, removeTrack, removeTrackKeyframe, setTrackKeyframe, addAppearance, beginTransient, endTransient, getCamera, jumpBack, jumpForward, getHistory, promoteDraftToSaved, toggleSelectionFor, cameraControlAt, moveGroupBy, placeholderImageUrl, groupBbox, hasCamera, layoutIdsFor, findLayoutCollisions, updateEffect, updateLocales, updateData, updateResponsive, updateDuration, updateCheckpoint, setCameraStrokeScaling, updateAppearance, moveCameraKeyframe, childIdsOf, replaceEffect } from './chunk-WOP52KFW.js';
 import { activeAppearance, animationDocumentSchema, bindablePropertiesFor, computeCamera, resolveAsset, compileDataBindings } from '@kokoa/clotho';
 
 // src/legacy/grid.ts
@@ -2237,6 +2237,8 @@ function render2() {
   }
   const cameraFrame = renderCameraFrame(def);
   if (cameraFrame) canvasEl.appendChild(cameraFrame);
+  const spotlightPreview = renderSpotlightPreview(def, snap2, elementsById);
+  if (spotlightPreview) canvasEl.appendChild(spotlightPreview);
   const selection = getSelection();
   if (selection.kind === "element") {
     const selEl = elementsById.get(selection.elementId);
@@ -2548,6 +2550,64 @@ function moveCameraDrag(e) {
     updateCameraFocus(drag.focusIndex, { padding: next.padding });
   }
 }
+function renderSpotlightPreview(def, snap2, elementsById) {
+  const selection = getSelection();
+  if (selection.kind !== "effect") return null;
+  const effect = def.effects.find(
+    (candidate) => candidate.id === selection.effectId
+  );
+  if (!effect || effect.type !== "spotlight") return null;
+  const boxes = effect.elementIds.map((id) => {
+    const el = elementsById.get(id);
+    const state = el ? snap2.get(id) : void 0;
+    return el && state ? elementBBox(el, state) : null;
+  }).filter(
+    (box) => box !== null
+  );
+  if (boxes.length === 0) return null;
+  const { width, height } = def.canvas;
+  const pad = effect.padding;
+  const g = document.createElementNS(SVG_NS, "g");
+  g.setAttribute("class", "studio-spotlight-preview");
+  g.setAttribute("pointer-events", "none");
+  const holes = [];
+  if (effect.shape === "elements") {
+    for (const box of boxes) {
+      holes.push(
+        `M${box.x - pad} ${box.y - pad}H${box.x + box.w + pad}V${box.y + box.h + pad}H${box.x - pad}Z`
+      );
+    }
+  } else {
+    const x = Math.min(...boxes.map((box) => box.x)) - pad;
+    const y = Math.min(...boxes.map((box) => box.y)) - pad;
+    const right = Math.max(...boxes.map((box) => box.x + box.w)) + pad;
+    const bottom = Math.max(...boxes.map((box) => box.y + box.h)) + pad;
+    if (effect.shape === "circle") {
+      const cx = (x + right) / 2;
+      const cy = (y + bottom) / 2;
+      const r = Math.hypot(right - x, bottom - y) / 2;
+      holes.push(
+        `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0Z`
+      );
+    } else {
+      holes.push(`M${x} ${y}H${right}V${bottom}H${x}Z`);
+    }
+  }
+  const scrim = document.createElementNS(SVG_NS, "path");
+  scrim.setAttribute("d", `M0 0H${width}V${height}H0Z ${holes.join(" ")}`);
+  scrim.setAttribute("fill-rule", "evenodd");
+  scrim.setAttribute("fill", effect.dimColor ?? "#0b1120");
+  scrim.setAttribute("opacity", String(Math.max(effect.dim, 0.15)));
+  g.appendChild(scrim);
+  const label = document.createElementNS(SVG_NS, "text");
+  label.setAttribute("x", "8");
+  label.setAttribute("y", "18");
+  label.setAttribute("class", "studio-spotlight-preview-label");
+  const approximated = effect.shape === "elements" ? " \xB7 \uC2E4\uB8E8\uC5E3\uC740 \uC0C1\uC790\uB85C \uADFC\uC0AC" : "";
+  label.textContent = `\u{1F526} ${effect.id} \xB7 ${effect.time}\u2013${effect.time + effect.duration}ms${approximated}`;
+  g.appendChild(label);
+  return g;
+}
 function cameraHandles(view, control) {
   const g = document.createElementNS(SVG_NS, "g");
   if (control.kind === "tracks") {
@@ -3192,6 +3252,7 @@ function renderInner() {
           <option value="highlight">highlight</option>
           <option value="pulse">pulse</option>
           <option value="flow">flow</option>
+          <option value="spotlight">spotlight</option>
         </select>
         <button type="button" class="studio-btn" data-add-effect>\uFF0B \uD6A8\uACFC</button>
       </div>
@@ -3283,12 +3344,40 @@ function renderInner() {
       setSelection({ kind: "none" });
       return;
     }
+    const typeOpts = ["highlight", "pulse", "flow", "spotlight"].map(
+      (t) => `<option value="${t}" ${t === eff.type ? "selected" : ""}>${t}</option>`
+    ).join("");
+    if (eff.type === "spotlight") {
+      const shapeOpts = ["bbox", "circle", "elements"].map(
+        (shape) => `<option value="${shape}" ${shape === eff.shape ? "selected" : ""}>${shape}${shape === "bbox" ? " (\uAE30\uBCF8)" : ""}</option>`
+      ).join("");
+      panelEl.innerHTML = `
+        ${timeHint}
+        <div class="studio-props-header"><span class="studio-props-header-title">${escapeHtml2(eff.id)}</span><span class="studio-props-header-type">spotlight</span></div>
+        <label class="studio-field"><span>type</span><select data-prop-key="effect.type">${typeOpts}</select></label>
+        <p class="studio-props-empty" style="margin:0 0 0.4rem">\uB300\uC0C1\uC740 \uADF8\uB300\uB85C \uB450\uACE0 \uB098\uBA38\uC9C0\uB97C \uC5B4\uB461\uAC8C \uD569\uB2C8\uB2E4. \uB300\uC0C1\uC758 \uC0C9\uC774 \uC815\uBCF4\uC778 \uBB38\uC11C\uC5D0\uC11C <code>highlight</code> \uB300\uC2E0 \uC501\uB2C8\uB2E4.</p>
+        ${numberField("time (ms)", "effect.time", eff.time, 50)}
+        ${numberField("duration (ms)", "effect.duration", eff.duration, 50)}
+        ${numberField("fadeIn (ms) \xB7 \uC591 \uB05D\uC5D0 \uC801\uC6A9", "effect.fadeIn", eff.fadeIn, 50)}
+        <div class="studio-camera-field-label">\uB300\uC0C1 \uC694\uC18C (${eff.elementIds.length})</div>
+        ${elementCheckList(def, "data-spotlight-target", eff.id, eff.elementIds)}
+        <label class="studio-field"><span>shape</span><select data-prop-key="effect.shape">${shapeOpts}</select></label>
+        <p class="studio-camera-hint">\uB300\uC0C1\uC774 \uBB34\uB300 \uC5EC\uAE30\uC800\uAE30 \uD769\uC5B4\uC838 \uC788\uC73C\uBA74 <code>elements</code>\uB97C \uC4F0\uC138\uC694. <code>bbox</code>\uB294 \uC14B\uC744 \uB2F4\uB290\uB77C \uADF8 \uC0AC\uC774\uC758 \uAD00\uACC4\uC5C6\uB294 \uC694\uC18C\uAE4C\uC9C0 \uBC1D\uD799\uB2C8\uB2E4.</p>
+        ${rangeField("padding", "effect.padding", eff.padding, 0, 80, 1)}
+        <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uAC00\uB824\uC9C0\uB294 \uCABD</span></div>
+        ${rangeField("dim", "effect.dim", eff.dim, 0, 1, 0.01, "0\uC774\uBA74 \uC5B4\uB461\uAC8C \uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.")}
+        ${colorField("dimColor", "effect.dimColor", eff.dimColor ?? "#0b1120")}
+        <p class="studio-camera-hint">\uBE44\uC6CC \uB450\uBA74 \uD14C\uB9C8 \uD1A0\uD070\uC744 \uC501\uB2C8\uB2E4 \u2014 \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uBAA8\uB450 near-black.</p>
+        <div class="studio-props-header" style="margin-top:0.6rem"><span class="studio-props-header-title">\uBE44\uCD94\uB294 \uCABD</span></div>
+        ${rangeField("lit", "effect.lit", eff.lit, 0, 1, 0.01, "0\uC774\uBA74 \uB300\uC0C1\uC740 \uC790\uAE30 \uC0C9 \uADF8\uB300\uB85C\uC785\uB2C8\uB2E4. \uC870\uBA85\uC758 \uC824\uCC98\uB7FC \uC0C9\uC744 \uC5B9\uC73C\uB824\uBA74 \uC62C\uB9AC\uC138\uC694.")}
+        ${colorField("litColor", "effect.litColor", eff.litColor)}
+        <button type="button" class="studio-btn studio-btn-danger" data-delete-effect style="margin-top:0.6rem">\u{1F5D1} \uD6A8\uACFC \uC0AD\uC81C</button>
+      `;
+      return;
+    }
     const elemOpts = def.elements.map(
       (e) => `<option value="${escapeHtml2(e.id)}" ${e.id === eff.elementId ? "selected" : ""}>${escapeHtml2(e.id)}</option>`
     ).join("");
-    const typeOpts = ["highlight", "pulse", "flow"].map(
-      (t) => `<option value="${t}" ${t === eff.type ? "selected" : ""}>${t}</option>`
-    ).join("");
     const specific = eff.type === "highlight" ? colorField("color", "effect.color", eff.color) : eff.type === "pulse" ? numberField("scale", "effect.scale", eff.scale, 0.05) : colorField("color", "effect.color", eff.color) + numberField("particles", "effect.particles", eff.particles, 1) + numberField("radius", "effect.radius", eff.radius, 0.5);
     panelEl.innerHTML = `
       ${timeHint}
@@ -3313,13 +3402,13 @@ function rangeField(label, key, value, min, max, step, hint) {
     ${hint ? `<p class="studio-camera-hint">${escapeHtml2(hint)}</p>` : ""}
   </div>`;
 }
-function focusTargetPicker(def, index, selected) {
+function elementCheckList(def, attribute, key, selected) {
   const chosen = new Set(selected);
   const rows = def.elements.map((element) => {
     const name = friendlyElementLabel(element);
     const same = name === element.id;
     return `<label class="studio-camera-target ${chosen.has(element.id) ? "is-on" : ""}">
-        <input type="checkbox" data-camera-target="${index}" value="${escapeHtml2(element.id)}" ${chosen.has(element.id) ? "checked" : ""} />
+        <input type="checkbox" ${attribute}="${escapeHtml2(key)}" value="${escapeHtml2(element.id)}" ${chosen.has(element.id) ? "checked" : ""} />
         <span class="studio-camera-target-name">${escapeHtml2(name)}</span>
         ${same ? "" : `<span class="studio-camera-target-id">${escapeHtml2(element.id)}</span>`}
         <span class="studio-camera-target-type">${element.type}</span>
@@ -3366,7 +3455,7 @@ function renderCameraForm(def, focusIndex) {
             </div>
           </div>
           <div class="studio-camera-field-label">\uB300\uC0C1 \uC694\uC18C (${entry.elementIds.length})</div>
-          ${focusTargetPicker(def, index, entry.elementIds)}
+          ${elementCheckList(def, "data-camera-target", String(index), entry.elementIds)}
           ${rangeField("padding", `camera.focus.${index}.padding`, entry.padding, 0, 200, 2, "\uB300\uC0C1 \uC8FC\uBCC0 \uC5EC\uBC31. \uD074\uC218\uB85D \uB113\uAC8C \uC7A1\uC2B5\uB2C8\uB2E4.")}
           ${rangeField("maxZoom", `camera.focus.${index}.maxZoom`, entry.maxZoom, 1, 8, 0.1, "\uD655\uB300 \uC0C1\uD55C. \uC791\uC740 \uC694\uC18C \uD558\uB098\uAC00 \uD654\uBA74\uC744 \uCC44\uC6B0\uB294 \uAC83\uC744 \uB9C9\uC2B5\uB2C8\uB2E4.")}
           <button type="button" class="studio-btn studio-btn-danger" data-delete-camera-focus="${index}">\u{1F5D1} focus \uC0AD\uC81C</button>
@@ -3697,6 +3786,11 @@ function onInput(e) {
     toggleFocusTarget(Number(focusTarget), target.value, target.checked);
     return;
   }
+  const spotTarget = target.dataset.spotlightTarget;
+  if (spotTarget !== void 0 && target instanceof HTMLInputElement) {
+    toggleSpotlightTarget(spotTarget, target.value, target.checked);
+    return;
+  }
   const key = target.dataset.propKey;
   if (!key) return;
   if (target.type === "text" && e.isComposing) return;
@@ -3946,10 +4040,12 @@ function apply(key, value) {
     if (targets) references[token] = targets;
     else delete references[token];
     updateChapter(sel.chapterId, { references });
+  } else if (key === "effect.type" && sel.kind === "effect") {
+    changeEffectType(def, sel.effectId, String(value));
   } else if (key.startsWith("effect.") && sel.kind === "effect") {
     const prop = key.slice(7);
     const patch = {};
-    if (prop === "time" || prop === "duration" || prop === "scale" || prop === "particles" || prop === "radius") {
+    if (prop === "time" || prop === "duration" || prop === "scale" || prop === "particles" || prop === "radius" || prop === "dim" || prop === "lit" || prop === "padding" || prop === "fadeIn") {
       patch[prop] = Number(value);
     } else {
       patch[prop] = value;
@@ -3957,6 +4053,52 @@ function apply(key, value) {
     updateEffect(sel.effectId, patch);
   }
 }
+function changeEffectType(def, effectId, type) {
+  const current = def.effects.find((effect) => effect.id === effectId);
+  if (!current || current.type === type) return;
+  const targets = current.type === "spotlight" ? current.elementIds : [current.elementId];
+  const base = { id: current.id, time: current.time };
+  let next;
+  if (type === "spotlight") {
+    next = {
+      ...base,
+      type: "spotlight",
+      elementIds: targets,
+      duration: Math.max(current.duration, 800),
+      dim: 0.7,
+      lit: 0,
+      litColor: "#fde68a",
+      shape: "bbox",
+      padding: 12,
+      fadeIn: 200
+    };
+  } else {
+    const single = {
+      ...base,
+      elementId: targets[0] ?? "",
+      duration: current.duration
+    };
+    next = type === "pulse" ? { ...single, type: "pulse", scale: 1.12 } : type === "flow" ? {
+      ...single,
+      type: "flow",
+      color: "#facc15",
+      particles: 3,
+      radius: 4
+    } : { ...single, type: "highlight", color: "#facc15" };
+  }
+  replaceEffect(effectId, next);
+}
+function toggleSpotlightTarget(effectId, id, on) {
+  const def = getDef();
+  const effect = def?.effects.find((candidate) => candidate.id === effectId);
+  if (!effect || effect.type !== "spotlight") return;
+  const next = on ? [...effect.elementIds, id] : effect.elementIds.filter((target) => target !== id);
+  if (next.length === 0) {
+    render3();
+    return;
+  }
+  updateEffect(effectId, { elementIds: next });
+}
 function parseBindingFallback(value) {
   if (value === "") return void 0;
   if (value === "true") return true;
@@ -4147,7 +4289,22 @@ function onClick2(e) {
       duration: 500
     };
     let eff;
-    if (type === "highlight")
+    if (type === "spotlight") {
+      const selected = sel.kind === "element" ? [sel.elementId] : sel.kind === "elements" ? [...sel.elementIds] : [firstEl.id];
+      eff = {
+        id,
+        type: "spotlight",
+        elementIds: selected,
+        time: getCurrentTime(),
+        duration: 1200,
+        dim: 0.7,
+        lit: 0,
+        litColor: "#fde68a",
+        shape: "bbox",
+        padding: 12,
+        fadeIn: 200
+      };
+    } else if (type === "highlight")
       eff = { ...base, type: "highlight", color: "#facc15" };
     else if (type === "pulse") eff = { ...base, type: "pulse", scale: 1.12 };
     else
@@ -17939,5 +18096,5 @@ function reflectState(ui) {
 }
 
 export { getVisibleElementIds, initStudio };
-//# sourceMappingURL=main-DC6D6RNQ.js.map
-//# sourceMappingURL=main-DC6D6RNQ.js.map
+//# sourceMappingURL=main-HDE5SDKM.js.map
+//# sourceMappingURL=main-HDE5SDKM.js.map