stickyflow 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -17,6 +17,12 @@ Two things count as breaking here that are easy to overlook:
 
 ## [Unreleased]
 
+## [0.4.0] - 2026-10-17
+
+### Added
+
+- `applyQuickDuplicateChange(source, event, { shapeId, linkId, gap? })` in `stickyflow/interaction` carries out a quick duplicate. It adds a copy of the object with its look, beyond the edge that was dragged, and a link to it that looks like the other links of the document. For an isometric object it adds a copy and a connection between the touching faces. The ids come from the caller, and `gap` is 200 for a shape and 40 for an isometric object by default.
+
 ## [0.3.0] - 2026-10-17
 
 ### Added

package/README.md

@@ -155,7 +155,7 @@ npm run ci      # lint, typecheck, tests, build, smoke
 npm run build   # tsup
 ```
 
-Adding a new placeable object: [docs/ADDING_CANVAS_OBJECT.md](docs/ADDING_CANVAS_OBJECT.md). Changes: [CHANGELOG.md](CHANGELOG.md).
+How the package and its neighbours fit together: [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md). Adding a new placeable object: [docs/ADDING_CANVAS_OBJECT.md](docs/ADDING_CANVAS_OBJECT.md). Changes: [CHANGELOG.md](CHANGELOG.md).
 
 ## More
 

package/dist/interaction/index.cjs

@@ -7288,6 +7288,257 @@ function shouldQuote(current, quote, indexed) {
   return indexed && trimmed === "none";
 }
 
+// src/runtime/interaction/sflPatch/connectionPatch/blockText.ts
+function buildConnectionBlock(options, baseIndent) {
+  const bodyIndent = `${baseIndent}    `;
+  const block = [
+    `${baseIndent}Connection ${options.id} {`,
+    `${bodyIndent}from: ${options.fromId}`,
+    `${bodyIndent}to: ${options.toId}`,
+    `${bodyIndent}fromFace: "${options.fromFace}"`,
+    `${bodyIndent}toFace: "${options.toFace}"`
+  ];
+  if (options.body) {
+    block.push(...indentBlock(options.body, bodyIndent));
+  }
+  block.push(`${baseIndent}}`);
+  return block;
+}
+
+// src/runtime/interaction/sflPatch/connectionPatch/insertionTarget.ts
+function resolveConnectionInsertionTarget(sfl, lines, options) {
+  if (!VALID_IDENT.test(options.id) || nameExists(lines, options.id)) {
+    return null;
+  }
+  const canvasObjects = chunkCXL254BT_cjs.sflToCanvasState(sfl).canvasObjects;
+  const hasSource = canvasObjects.some((canvasObject) => canvasObject.id === options.fromId);
+  const hasTarget = canvasObjects.some((canvasObject) => canvasObject.id === options.toId);
+  if (!hasSource || !hasTarget) {
+    return null;
+  }
+  return findFirstBlockOfKind(lines, "Model");
+}
+
+// src/runtime/interaction/sflPatch/connectionPatch/insert.ts
+function insertConnection(sfl, options) {
+  const lines = sfl.split("\n");
+  const modelRange = resolveConnectionInsertionTarget(sfl, lines, options);
+  if (!modelRange) {
+    return sfl;
+  }
+  insertBlockLines(lines, modelRange, (baseIndent) => buildConnectionBlock(options, baseIndent));
+  return lines.join("\n");
+}
+
+// src/runtime/interaction/sflPatch/changes/quickDuplicate/styleBlock.ts
+var QUOTED_KEYS = /* @__PURE__ */ new Set(["fill", "stroke", "textColor", "fontFamily", "shadow", "labelBackground"]);
+function styleLine(key, value) {
+  return QUOTED_KEYS.has(key) ? `  ${key}: "${value.replace(/"/g, '\\"')}"` : `  ${key}: ${value}`;
+}
+function styleBlock(props, keys, leading = []) {
+  const copied = keys.flatMap((key) => {
+    const value = props?.[key];
+    return value === void 0 ? [] : [styleLine(key, value)];
+  });
+  const lines = [...leading, ...copied];
+  return lines.length > 0 ? `style {
+${lines.join("\n")}
+}` : void 0;
+}
+
+// src/runtime/interaction/sflPatch/changes/quickDuplicate/isometricDuplicate.ts
+var ISOMETRIC_GAP = 40;
+var ISOMETRIC_STYLE_KEYS = [
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "cornerRadius",
+  "shadow",
+  "labelOffsetX",
+  "labelOffsetY",
+  "labelBackground"
+];
+var TOUCHING_FACES = {
+  "iso-width-pos": { fromFace: "right", toFace: "left" },
+  "iso-width-neg": { fromFace: "left", toFace: "right" },
+  "iso-depth-pos": { fromFace: "front", toFace: "back" },
+  "iso-depth-neg": { fromFace: "back", toFace: "front" },
+  "iso-height-pos": { fromFace: "bottom", toFace: "top" },
+  "iso-height-neg": { fromFace: "top", toFace: "bottom" }
+};
+function isIsometricDirection2(direction) {
+  return direction.startsWith("iso-");
+}
+function isometricOffset(direction, object, gap) {
+  const { width, height } = object;
+  const { depth } = object.isometric;
+  switch (direction) {
+    case "iso-width-pos":
+      return { dx: (width + gap) * chunkCXL254BT_cjs.AXIS_COS, dy: (width + gap) * chunkCXL254BT_cjs.AXIS_SIN };
+    case "iso-width-neg":
+      return { dx: -(width + gap) * chunkCXL254BT_cjs.AXIS_COS, dy: -(width + gap) * chunkCXL254BT_cjs.AXIS_SIN };
+    case "iso-depth-pos":
+      return { dx: -(depth + gap) * chunkCXL254BT_cjs.AXIS_COS, dy: (depth + gap) * chunkCXL254BT_cjs.AXIS_SIN };
+    case "iso-depth-neg":
+      return { dx: (depth + gap) * chunkCXL254BT_cjs.AXIS_COS, dy: -(depth + gap) * chunkCXL254BT_cjs.AXIS_SIN };
+    case "iso-height-pos":
+      return { dx: 0, dy: height + gap };
+    case "iso-height-neg":
+      return { dx: 0, dy: -(height + gap) };
+  }
+}
+function copyStyle(object, direction) {
+  if (!direction.startsWith("iso-height-")) {
+    return styleBlock(object.props, ISOMETRIC_STYLE_KEYS);
+  }
+  return styleBlock(
+    object.props,
+    ISOMETRIC_STYLE_KEYS.filter((key) => key !== "shadow"),
+    ['  shadow: "off"']
+  );
+}
+function copyOf(object, direction, options) {
+  const { dx, dy } = isometricOffset(direction, object, options.gap ?? ISOMETRIC_GAP);
+  return {
+    id: options.shapeId,
+    kind: "isometric",
+    text: object.text ?? "",
+    x: object.x + dx,
+    y: object.y + dy,
+    width: object.width,
+    height: object.height,
+    depth: object.isometric.depth,
+    parentId: object.parentFrameId,
+    body: copyStyle(object, direction)
+  };
+}
+function duplicateIsometricObject(sfl, object, direction, options) {
+  const withCopy = insertCanvasObject(sfl, copyOf(object, direction, options));
+  return insertConnection(withCopy, {
+    id: options.linkId,
+    fromId: object.id,
+    toId: options.shapeId,
+    ...TOUCHING_FACES[direction]
+  });
+}
+
+// src/runtime/interaction/sflPatch/linkPatch/blockText.ts
+function buildLinkBlock(options, baseIndent) {
+  const bodyIndent = `${baseIndent}    `;
+  const from = formatLinkEndpoint({ id: options.fromId, side: options.fromSide, fraction: options.fromFraction });
+  const to = formatLinkEndpoint({ id: options.toId, side: options.toSide, fraction: options.toFraction });
+  const block = [`${baseIndent}Link ${options.id} {`, `${bodyIndent}from: ${from}`, `${bodyIndent}to: ${to}`];
+  if (options.text !== void 0) {
+    block.push(`${bodyIndent}text: "${escapeSflString(options.text)}"`);
+  }
+  if (options.body) {
+    block.push(...indentBlock(options.body, bodyIndent));
+  }
+  block.push(`${baseIndent}}`);
+  return block;
+}
+
+// src/runtime/interaction/sflPatch/linkPatch/insertionTarget.ts
+function resolveLinkInsertionTarget(sfl, lines, options) {
+  if (!VALID_IDENT.test(options.id) || nameExists(lines, options.id)) {
+    return null;
+  }
+  const canvasObjects = chunkCXL254BT_cjs.sflToCanvasState(sfl).canvasObjects;
+  const hasSource = canvasObjects.some((canvasObject) => canvasObject.id === options.fromId);
+  const hasTarget = canvasObjects.some((canvasObject) => canvasObject.id === options.toId);
+  if (!hasSource || !hasTarget) {
+    return null;
+  }
+  return findFirstBlockOfKind(lines, "Model");
+}
+
+// src/runtime/interaction/sflPatch/linkPatch/insert.ts
+function insertLink(sfl, options) {
+  const lines = sfl.split("\n");
+  const modelRange = resolveLinkInsertionTarget(sfl, lines, options);
+  if (!modelRange) {
+    return sfl;
+  }
+  insertBlockLines(lines, modelRange, (baseIndent) => buildLinkBlock(options, baseIndent));
+  return lines.join("\n");
+}
+
+// src/runtime/interaction/sflPatch/changes/quickDuplicate/shapeDuplicate.ts
+var SHAPE_GAP = 200;
+var OPPOSITE_SIDE = { top: "bottom", right: "left", bottom: "top", left: "right" };
+var SHAPE_STYLE_KEYS = [
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "strokeStyle",
+  "textColor",
+  "fontSize",
+  "fontFamily",
+  "cornerRadius",
+  "opacity",
+  "shadow"
+];
+var LINK_STYLE_KEYS = ["stroke", "strokeWidth", "strokeStyle", "markerStart", "markerEnd", "route"];
+function shapeOffset(side, object, gap) {
+  switch (side) {
+    case "top":
+      return { dx: 0, dy: -(object.height + gap) };
+    case "bottom":
+      return { dx: 0, dy: object.height + gap };
+    case "left":
+      return { dx: -(object.width + gap), dy: 0 };
+    case "right":
+      return { dx: object.width + gap, dy: 0 };
+  }
+}
+function copyOf2(object, side, options) {
+  const { dx, dy } = shapeOffset(side, object, options.gap ?? SHAPE_GAP);
+  const shape = object.shapeType ? [`  shape: ${object.shapeType}`] : [];
+  return {
+    id: options.shapeId,
+    kind: "shape",
+    text: object.text ?? "",
+    x: object.x + dx,
+    y: object.y + dy,
+    width: object.width,
+    height: object.height,
+    parentId: object.parentFrameId,
+    body: styleBlock(object.props, SHAPE_STYLE_KEYS, shape)
+  };
+}
+function linkStyleReference(links, objectId) {
+  return links.find((link) => link.fromId === objectId) ?? links[0];
+}
+function linkToCopy(object, links, side, options) {
+  return {
+    id: options.linkId,
+    fromId: object.id,
+    toId: options.shapeId,
+    fromSide: side,
+    toSide: OPPOSITE_SIDE[side],
+    body: styleBlock(linkStyleReference(links, object.id)?.props, LINK_STYLE_KEYS)
+  };
+}
+function duplicateShape(sfl, input) {
+  const { object, links, side, options } = input;
+  const withCopy = insertCanvasObject(sfl, copyOf2(object, side, options));
+  return insertLink(withCopy, linkToCopy(object, links, side, options));
+}
+
+// src/runtime/interaction/sflPatch/changes/quickDuplicateChange.ts
+function applyQuickDuplicateChange(sfl, event, options) {
+  const state = chunkCXL254BT_cjs.sflToCanvasState(sfl);
+  const object = state.canvasObjects.find((candidate) => candidate.id === event.owner.id);
+  if (!object) {
+    return sfl;
+  }
+  const { direction } = event;
+  if (isIsometricDirection2(direction)) {
+    return chunkCXL254BT_cjs.isIsometricObject(object) ? duplicateIsometricObject(sfl, object, direction, options) : sfl;
+  }
+  return chunkCXL254BT_cjs.isIsometricObject(object) ? sfl : duplicateShape(sfl, { object, links: state.links, side: direction, options });
+}
+
 // src/runtime/interaction/sflPatch/changes/resizeChange.ts
 function applyResizeChange(sfl, event) {
   const state = chunkCXL254BT_cjs.sflToCanvasState(sfl);
@@ -7412,89 +7663,6 @@ function applyTextChange(sfl, event) {
   return lines.join("\n");
 }
 
-// src/runtime/interaction/sflPatch/connectionPatch/blockText.ts
-function buildConnectionBlock(options, baseIndent) {
-  const bodyIndent = `${baseIndent}    `;
-  const block = [
-    `${baseIndent}Connection ${options.id} {`,
-    `${bodyIndent}from: ${options.fromId}`,
-    `${bodyIndent}to: ${options.toId}`,
-    `${bodyIndent}fromFace: "${options.fromFace}"`,
-    `${bodyIndent}toFace: "${options.toFace}"`
-  ];
-  if (options.body) {
-    block.push(...indentBlock(options.body, bodyIndent));
-  }
-  block.push(`${baseIndent}}`);
-  return block;
-}
-
-// src/runtime/interaction/sflPatch/connectionPatch/insertionTarget.ts
-function resolveConnectionInsertionTarget(sfl, lines, options) {
-  if (!VALID_IDENT.test(options.id) || nameExists(lines, options.id)) {
-    return null;
-  }
-  const canvasObjects = chunkCXL254BT_cjs.sflToCanvasState(sfl).canvasObjects;
-  const hasSource = canvasObjects.some((canvasObject) => canvasObject.id === options.fromId);
-  const hasTarget = canvasObjects.some((canvasObject) => canvasObject.id === options.toId);
-  if (!hasSource || !hasTarget) {
-    return null;
-  }
-  return findFirstBlockOfKind(lines, "Model");
-}
-
-// src/runtime/interaction/sflPatch/connectionPatch/insert.ts
-function insertConnection(sfl, options) {
-  const lines = sfl.split("\n");
-  const modelRange = resolveConnectionInsertionTarget(sfl, lines, options);
-  if (!modelRange) {
-    return sfl;
-  }
-  insertBlockLines(lines, modelRange, (baseIndent) => buildConnectionBlock(options, baseIndent));
-  return lines.join("\n");
-}
-
-// src/runtime/interaction/sflPatch/linkPatch/blockText.ts
-function buildLinkBlock(options, baseIndent) {
-  const bodyIndent = `${baseIndent}    `;
-  const from = formatLinkEndpoint({ id: options.fromId, side: options.fromSide, fraction: options.fromFraction });
-  const to = formatLinkEndpoint({ id: options.toId, side: options.toSide, fraction: options.toFraction });
-  const block = [`${baseIndent}Link ${options.id} {`, `${bodyIndent}from: ${from}`, `${bodyIndent}to: ${to}`];
-  if (options.text !== void 0) {
-    block.push(`${bodyIndent}text: "${escapeSflString(options.text)}"`);
-  }
-  if (options.body) {
-    block.push(...indentBlock(options.body, bodyIndent));
-  }
-  block.push(`${baseIndent}}`);
-  return block;
-}
-
-// src/runtime/interaction/sflPatch/linkPatch/insertionTarget.ts
-function resolveLinkInsertionTarget(sfl, lines, options) {
-  if (!VALID_IDENT.test(options.id) || nameExists(lines, options.id)) {
-    return null;
-  }
-  const canvasObjects = chunkCXL254BT_cjs.sflToCanvasState(sfl).canvasObjects;
-  const hasSource = canvasObjects.some((canvasObject) => canvasObject.id === options.fromId);
-  const hasTarget = canvasObjects.some((canvasObject) => canvasObject.id === options.toId);
-  if (!hasSource || !hasTarget) {
-    return null;
-  }
-  return findFirstBlockOfKind(lines, "Model");
-}
-
-// src/runtime/interaction/sflPatch/linkPatch/insert.ts
-function insertLink(sfl, options) {
-  const lines = sfl.split("\n");
-  const modelRange = resolveLinkInsertionTarget(sfl, lines, options);
-  if (!modelRange) {
-    return sfl;
-  }
-  insertBlockLines(lines, modelRange, (baseIndent) => buildLinkBlock(options, baseIndent));
-  return lines.join("\n");
-}
-
 // src/runtime/interaction/sflPatch/linkPatch/remove.ts
 function removeLink(sfl, id) {
   const lines = sfl.split("\n");
@@ -7565,6 +7733,7 @@ exports.applyLinkSegmentChange = applyLinkSegmentChange;
 exports.applyMoveChange = applyMoveChange;
 exports.applyPathPointChange = applyPathPointChange;
 exports.applyPropertyChange = applyPropertyChange;
+exports.applyQuickDuplicateChange = applyQuickDuplicateChange;
 exports.applyResizeChange = applyResizeChange;
 exports.applySankeyNodeMoveChange = applySankeyNodeMoveChange;
 exports.applySankeyNodeRenameChange = applySankeyNodeRenameChange;