diff --git a/src/components/atoms/BlockField.tsx b/src/components/atoms/BlockField.tsx
index 0069281a..0f263344 100644
--- a/src/components/atoms/BlockField.tsx
+++ b/src/components/atoms/BlockField.tsx
@@ -1,13 +1,16 @@
 interface Props {
   label: string;
+  fullBody?: boolean;
   children?: React.ReactNode;
 }
 
-export const BlockField: React.FC<Props> = ({ label, children }) => {
+export const BlockField: React.FC<Props> = ({ label, fullBody, children }) => {
+  const bodyClass = fullBody ? "ml-2 w-full" : "ml-auto";
+
   return (
     <div className="flex flex-col gap-1">
       <span>{label}:</span>
-      <div className="ml-auto">{children}</div>
+      <div className={bodyClass}>{children}</div>
     </div>
   );
 };
diff --git a/src/components/shapeInspectorPanel/AttachmentInspector.tsx b/src/components/shapeInspectorPanel/AttachmentInspector.tsx
new file mode 100644
index 00000000..ad3093e0
--- /dev/null
+++ b/src/components/shapeInspectorPanel/AttachmentInspector.tsx
@@ -0,0 +1,82 @@
+import { useCallback } from "react";
+import { BlockGroupField } from "../atoms/BlockGroupField";
+import { InlineField } from "../atoms/InlineField";
+import { ToggleInput } from "../atoms/inputs/ToggleInput";
+import { Shape } from "../../models";
+import { SliderInput } from "../atoms/inputs/SliderInput";
+import { BlockField } from "../atoms/BlockField";
+
+interface Props {
+  targetShape: Shape;
+  updateTargetShape: (patch: Partial<Shape>) => void;
+}
+
+export const AttachmentInspector: React.FC<Props> = ({ targetShape, updateTargetShape }) => {
+  const attachment = targetShape.attachment;
+
+  const handleAnchorRateChange = useCallback(
+    (val: number) => {
+      if (!attachment) return;
+      updateTargetShape({ attachment: { ...attachment, to: { x: val, y: attachment.to.y } } });
+    },
+    [attachment, updateTargetShape],
+  );
+
+  const handleRelativeRotationChange = useCallback(
+    (val: boolean) => {
+      if (!attachment) return;
+      updateTargetShape({ attachment: { ...attachment, rotationType: val ? "relative" : "absolute" } });
+    },
+    [attachment, updateTargetShape],
+  );
+
+  const handleAnchorXChange = useCallback(
+    (val: number) => {
+      if (!attachment) return;
+      updateTargetShape({ attachment: { ...attachment, anchor: { x: val, y: attachment.anchor.y } } });
+    },
+    [attachment, updateTargetShape],
+  );
+  const handleAnchorYChange = useCallback(
+    (val: number) => {
+      if (!attachment) return;
+      updateTargetShape({ attachment: { ...attachment, anchor: { x: attachment.anchor.x, y: val } } });
+    },
+    [attachment, updateTargetShape],
+  );
+
+  if (!attachment) return;
+
+  return (
+    <BlockGroupField label="Attachment" accordionKey="attachment-inspector">
+      <InlineField label="Rate" fullBody>
+        <SliderInput value={attachment.to.x} onChanged={handleAnchorRateChange} min={0} max={1} step={0.01} showValue />
+      </InlineField>
+      <InlineField label="Relative rotation">
+        <ToggleInput value={attachment.rotationType === "relative"} onChange={handleRelativeRotationChange} />
+      </InlineField>
+      <BlockField label="Anchor" fullBody>
+        <InlineField label="Left" fullBody>
+          <SliderInput
+            value={attachment.anchor.x}
+            onChanged={handleAnchorXChange}
+            min={0}
+            max={1}
+            step={0.01}
+            showValue
+          />
+        </InlineField>
+        <InlineField label="Top" fullBody>
+          <SliderInput
+            value={attachment.anchor.y}
+            onChanged={handleAnchorYChange}
+            min={0}
+            max={1}
+            step={0.01}
+            showValue
+          />
+        </InlineField>
+      </BlockField>
+    </BlockGroupField>
+  );
+};
diff --git a/src/components/shapeInspectorPanel/ConventionalShapeInspector.tsx b/src/components/shapeInspectorPanel/ConventionalShapeInspector.tsx
index 78cd5e5e..1ab9c77e 100644
--- a/src/components/shapeInspectorPanel/ConventionalShapeInspector.tsx
+++ b/src/components/shapeInspectorPanel/ConventionalShapeInspector.tsx
@@ -9,6 +9,7 @@ import { InlineField } from "../atoms/InlineField";
 import { useShapeComposite, useShapeCompositeWithoutTmpInfo } from "../../hooks/storeHooks";
 import { resizeShapeTrees } from "../../composables/shapeResizing";
 import { BlockGroupField } from "../atoms/BlockGroupField";
+import { getAttachmentByUpdatingRotation } from "../../shapes";
 
 interface Props {
   targetShape: Shape;
@@ -80,9 +81,20 @@ export const ConventionalShapeInspector: React.FC<Props> = ({
   const handleChangeRotation = useCallback(
     (val: number, draft = false) => {
       const affine = getRotateToAffine(subShapeComposite, targetShape, (val * Math.PI) / 180);
-      handleResize(affine, draft);
+      if (draft) {
+        readyState();
+
+        const patch = resizeShapeTrees(shapeComposite, [targetShape.id], affine);
+        const attachment = getAttachmentByUpdatingRotation(targetShape, patch[targetShape.id].rotation);
+        if (attachment) {
+          patch[targetShape.id].attachment = attachment;
+        }
+        updateTmpShapes(patch);
+      } else {
+        commit();
+      }
     },
-    [targetShape, subShapeComposite, handleResize],
+    [targetShape, subShapeComposite, commit, readyState, updateTmpShapes, shapeComposite],
   );
 
   return (
diff --git a/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx b/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx
index c1663134..54185653 100644
--- a/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx
+++ b/src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx
@@ -14,6 +14,7 @@ import { GroupShape, isGroupShape } from "../../shapes/group";
 import { ClipInspector } from "./ClipInspector";
 import { AlphaField } from "./AlphaField";
 import { HighlightShapeMeta } from "../../composables/states/appCanvas/core";
+import { AttachmentInspector } from "./AttachmentInspector";
 
 export const ShapeInspectorPanel: React.FC = () => {
   const targetShape = useSelectedShape();
@@ -147,6 +148,30 @@ const ShapeInspectorPanelWithShape: React.FC<ShapeInspectorPanelWithShapeProps>
     [targetShapes, getShapeComposite, patchShapes],
   );
 
+  // Only shapes already having "attachment" will be updated.
+  const updateAttachmentBySamePatch = useCallback(
+    (patch: Partial<Shape>, draft = false) => {
+      const shapeComposite = getShapeComposite();
+
+      const layoutPatch = getPatchByLayouts(shapeComposite, {
+        update: targetShapes.reduce<{ [id: string]: Partial<Shape> }>((p, s) => {
+          if (s.attachment) {
+            p[s.id] = patch;
+          }
+          return p;
+        }, {}),
+      });
+
+      if (draft) {
+        setTmpShapeMap(layoutPatch);
+      } else {
+        setTmpShapeMap({});
+        patchShapes(layoutPatch);
+      }
+    },
+    [targetShapes, getShapeComposite, patchShapes, setTmpShapeMap],
+  );
+
   const alphaField = <AlphaField targetTmpShape={targetTmpShape} updateTargetShape={updateTargetShapesBySamePatch} />;
 
   return (
@@ -194,6 +219,7 @@ const ShapeInspectorPanelWithShape: React.FC<ShapeInspectorPanelWithShapeProps>
           updateTargetGroupShape={updateGroupShapesBySamePatch}
         />
       ) : undefined}
+      <AttachmentInspector targetShape={targetShape} updateTargetShape={updateAttachmentBySamePatch} />
       <button type="submit" className="hidden" />
     </form>
   );
diff --git a/src/composables/lineAttachmentHandler.spec.ts b/src/composables/lineAttachmentHandler.spec.ts
new file mode 100644
index 00000000..91088c0b
--- /dev/null
+++ b/src/composables/lineAttachmentHandler.spec.ts
@@ -0,0 +1,510 @@
+import { describe, test, expect } from "vitest";
+import {
+  getAffineByMoveToAttachedPoint,
+  getAttachmentAnchorPoint,
+  getEvenlySpacedLineAttachment,
+  getEvenlySpacedLineAttachmentBetweenFixedOnes,
+  getLineAttachmentPatch,
+  getNextAttachmentAnchor,
+} from "./lineAttachmentHandler";
+import { newShapeComposite } from "./shapeComposite";
+import { createShape, getCommonStruct } from "../shapes";
+import { LineShape } from "../shapes/line";
+import { RectangleShape } from "../shapes/rectangle";
+import { Shape } from "../models";
+import { getLineEdgeInfo } from "../shapes/utils/line";
+import { TreeNodeShape } from "../shapes/tree/treeNode";
+
+describe("getLineAttachmentPatch", () => {
+  const line = createShape<LineShape>(getCommonStruct, "line", { id: "line", q: { x: 100, y: 0 } });
+  const shapeA = createShape(getCommonStruct, "rectangle", {
+    id: "a",
+    attachment: {
+      id: line.id,
+      to: { x: 0.2, y: 0 },
+      anchor: { x: 0.5, y: 0.5 },
+      rotationType: "absolute",
+      rotation: Math.PI / 2,
+    },
+  });
+  const shapeB = createShape(getCommonStruct, "rectangle", {
+    id: "b",
+    attachment: {
+      id: line.id,
+      to: { x: 0.2, y: 0 },
+      anchor: { x: 0.5, y: 0.5 },
+      rotationType: "relative",
+      rotation: Math.PI / 2,
+    },
+  });
+
+  test("should return shape patch to move shapes to the attached points", () => {
+    const shapeComposite = newShapeComposite({
+      shapes: [line, shapeA, shapeB],
+      getStruct: getCommonStruct,
+    });
+
+    const result0 = getLineAttachmentPatch(shapeComposite, {
+      update: {
+        [line.id]: { q: { x: 0, y: 100 } } as Partial<LineShape>,
+      },
+    });
+    expect(result0[shapeA.id].p).toEqualPoint({ x: -50, y: -30 });
+    expect(result0[shapeA.id]).not.toHaveProperty("rotation");
+    expect(result0[shapeB.id].p).toEqualPoint({ x: -50, y: -30 });
+    expect(result0[shapeB.id].rotation).toBeCloseTo(Math.PI);
+
+    const result1 = getLineAttachmentPatch(shapeComposite, {
+      update: {
+        [shapeB.id]: { width: 200 } as Partial<RectangleShape>,
+      },
+    });
+    expect(result1).not.toHaveProperty(shapeA.id);
+    expect(result1[shapeB.id].p).toEqualPoint({ x: -30, y: -50 });
+    expect(result1[shapeB.id].rotation).toBeCloseTo(Math.PI / 2);
+  });
+
+  test("should clear attachment when attached line is missing", () => {
+    const shapeComposite = newShapeComposite({
+      shapes: [shapeA, shapeB],
+      getStruct: getCommonStruct,
+    });
+
+    const result1 = getLineAttachmentPatch(shapeComposite, {
+      update: {
+        [shapeB.id]: { width: 200 } as Partial<RectangleShape>,
+      },
+    });
+    expect(result1[shapeB.id]).toHaveProperty("attachment");
+    expect(result1[shapeB.id].attachment).toBe(undefined);
+  });
+
+  test("should detach unattachable shapes", () => {
+    const root = createShape(getCommonStruct, "tree_root", {
+      id: "root",
+    });
+    const nodeA = createShape(getCommonStruct, "tree_node", {
+      id: "nodeA",
+      attachment: {
+        id: line.id,
+        to: { x: 0.2, y: 0 },
+        anchor: { x: 0.5, y: 0 },
+        rotationType: "relative",
+        rotation: 0,
+      },
+    });
+    const shapeComposite = newShapeComposite({
+      shapes: [line, root, nodeA],
+      getStruct: getCommonStruct,
+    });
+
+    const result0 = getLineAttachmentPatch(shapeComposite, {
+      update: {
+        [nodeA.id]: {
+          treeParentId: root.id,
+          parentId: root.id,
+        } as Partial<TreeNodeShape>,
+      },
+    });
+    expect(result0[nodeA.id]).toHaveProperty("attachment");
+    expect(result0[nodeA.id].attachment).toBe(undefined);
+  });
+
+  test("case: rotated group shape", () => {
+    const line = createShape<LineShape>(getCommonStruct, "line", {
+      id: "line",
+      body: [{ p: { x: 100, y: 0 } }],
+      q: { x: 100, y: 100 },
+    });
+    const group = createShape(getCommonStruct, "group", {
+      id: "group",
+      attachment: {
+        id: "line",
+        to: { x: 0.2, y: 0 },
+        anchor: { x: 0.5, y: 0 },
+        rotationType: "relative",
+        rotation: 0,
+      },
+    });
+    const a = createShape(getCommonStruct, "rectangle", {
+      id: "a",
+      parentId: group.id,
+      p: { x: 50, y: 50 },
+    });
+    const b = { ...a, id: "b", p: { x: -50, y: 50 } };
+    const shapeComposite = newShapeComposite({
+      shapes: [line, group, a, b],
+      getStruct: getCommonStruct,
+    });
+
+    const result0 = getLineAttachmentPatch(shapeComposite, {
+      update: {
+        [group.id]: {},
+      },
+    });
+    expect(result0[a.id].p).toEqualPoint({ x: 40, y: 0 });
+    expect(result0[a.id]).not.toHaveProperty("rotation");
+    expect(result0[b.id].p).toEqualPoint({ x: -60, y: 0 });
+    expect(result0[b.id]).not.toHaveProperty("rotation");
+
+    const result1 = getLineAttachmentPatch(shapeComposite, {
+      update: {
+        [group.id]: {
+          attachment: {
+            id: "line",
+            to: { x: 0.8, y: 0 },
+            anchor: { x: 0.5, y: 0 },
+            rotationType: "relative",
+            rotation: 0,
+          },
+        },
+      },
+    });
+    expect(result1[a.id].p).toEqualPoint({ x: 0, y: 60 });
+    expect(result1[a.id].rotation).toBeCloseTo(Math.PI / 2);
+    expect(result1[b.id].p).toEqualPoint({ x: 0, y: -40 });
+    expect(result1[b.id].rotation).toBeCloseTo(Math.PI / 2);
+  });
+});
+
+describe("getAffineByMoveToAttachedPoint", () => {
+  test("should return shape patch to move to the point", () => {
+    const shape = createShape(getCommonStruct, "rectangle", { id: "a" });
+    const shapeComposite = newShapeComposite({
+      shapes: [shape],
+      getStruct: getCommonStruct,
+    });
+
+    const result0 = getAffineByMoveToAttachedPoint(shapeComposite, shape, { x: 0.5, y: 0.5 }, { x: 100, y: 100 });
+    expect(result0).toEqual([1, 0, 0, 1, 50, 50]);
+
+    const result1 = getAffineByMoveToAttachedPoint(shapeComposite, shape, { x: 0.2, y: 0.8 }, { x: 100, y: 100 });
+    expect(result1).toEqual([1, 0, 0, 1, 80, 20]);
+  });
+});
+
+describe("getAttachmentAnchorPoint", () => {
+  test("should return initial anchor point when the shape doesn't have attachment", () => {
+    const shape = createShape(getCommonStruct, "rectangle", { id: "a" });
+    const shapeComposite = newShapeComposite({
+      shapes: [shape],
+      getStruct: getCommonStruct,
+    });
+    expect(getAttachmentAnchorPoint(shapeComposite, shape)).toEqualPoint({ x: 50, y: 50 });
+  });
+
+  test("should return anchor point when the shape have attachment", () => {
+    const shape = createShape(getCommonStruct, "rectangle", {
+      id: "a",
+      attachment: {
+        id: "line",
+        to: { x: 0.2, y: 0 },
+        anchor: { x: 0.3, y: 0.6 },
+        rotationType: "relative",
+        rotation: 0,
+      },
+    });
+    const shapeComposite = newShapeComposite({
+      shapes: [shape],
+      getStruct: getCommonStruct,
+    });
+    expect(getAttachmentAnchorPoint(shapeComposite, shape)).toEqualPoint({ x: 30, y: 60 });
+
+    const rotated = { ...shape, height: 200, rotation: Math.PI / 2 };
+    const shapeComposite1 = newShapeComposite({
+      shapes: [rotated],
+      getStruct: getCommonStruct,
+    });
+    expect(getAttachmentAnchorPoint(shapeComposite1, rotated)).toEqualPoint({
+      x: 30,
+      y: 80,
+    });
+  });
+
+  test("should return anchor point: group shape", () => {
+    const group = createShape(getCommonStruct, "group", {
+      id: "group",
+      attachment: {
+        id: "line",
+        to: { x: 0.2, y: 0 },
+        anchor: { x: 0.5, y: 0 },
+        rotationType: "relative",
+        rotation: 0,
+      },
+    });
+    const a = createShape(getCommonStruct, "rectangle", { id: "a", parentId: group.id });
+    const b = { ...a, id: "b", p: { x: 0, y: 100 } };
+    const shapeComposite = newShapeComposite({
+      shapes: [group, a, b],
+      getStruct: getCommonStruct,
+    });
+    expect(getAttachmentAnchorPoint(shapeComposite, group)).toEqualPoint({ x: 50, y: 0 });
+
+    const rotated = { ...group, rotation: Math.PI / 2 };
+    const shapeComposite1 = newShapeComposite({
+      shapes: [
+        rotated,
+        { ...a, p: { x: 50, y: 50 }, rotation: Math.PI / 2 },
+        { ...b, p: { x: -50, y: 50 }, rotation: Math.PI / 2 },
+      ],
+      getStruct: getCommonStruct,
+    });
+    expect(getAttachmentAnchorPoint(shapeComposite1, rotated)).toEqualPoint({
+      x: 150,
+      y: 100,
+    });
+  });
+});
+
+describe("getNextAttachmentAnchor", () => {
+  test("should return anchor rate for the point", () => {
+    const shape = createShape<RectangleShape>(getCommonStruct, "rectangle", {
+      id: "a",
+      height: 200,
+      rotation: Math.PI / 2,
+    });
+    const shapeComposite = newShapeComposite({
+      shapes: [shape],
+      getStruct: getCommonStruct,
+    });
+    expect(getNextAttachmentAnchor(shapeComposite, shape, { x: 50, y: 100 })).toEqualPoint({ x: 0.5, y: 0.5 });
+    expect(getNextAttachmentAnchor(shapeComposite, shape, { x: 50, y: 50 })).toEqualPoint({ x: 0, y: 0.5 });
+  });
+});
+
+describe("getEvenlySpacedLineAttachmentBetweenFixedOnes", () => {
+  const line = createShape<LineShape>(getCommonStruct, "line", { id: "line", q: { x: 100, y: 0 } });
+  const a = createShape(getCommonStruct, "rectangle", {
+    id: "a",
+    attachment: {
+      id: line.id,
+      to: { x: 0.2, y: 0 },
+      anchor: { x: 0.5, y: 0.5 },
+      rotationType: "relative",
+      rotation: 0,
+    },
+  });
+  const b = {
+    ...a,
+    id: "b",
+    attachment: { ...a.attachment, to: { x: 0.3, y: 0 } },
+  } as Shape;
+  const c = {
+    ...a,
+    id: "c",
+    attachment: { ...a.attachment, to: { x: 0.4, y: 0 } },
+  } as Shape;
+  const d = {
+    ...a,
+    id: "d",
+    attachment: { ...a.attachment, to: { x: 0.8, y: 0 } },
+  } as Shape;
+  const e = {
+    ...a,
+    id: "e",
+    attachment: { ...a.attachment, to: { x: 0.9, y: 0 } },
+  } as Shape;
+
+  test("should slide with perserving distance", () => {
+    const result0 = getEvenlySpacedLineAttachmentBetweenFixedOnes(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      a.id,
+      0.5,
+    );
+    expect(result0.get(b.id)).toEqual([{ x: 0.6, y: 0 }]);
+    expect(result0.get(c.id)).toEqual([{ x: 0.7, y: 0 }]);
+
+    const result1 = getEvenlySpacedLineAttachmentBetweenFixedOnes(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      a.id,
+      0.75,
+    );
+    expect(result1.get(b.id)).toEqual([{ x: 0.85, y: 0 }]);
+    expect(result1.get(c.id)).toEqual([{ x: 0.95, y: 0 }]);
+
+    const result2 = getEvenlySpacedLineAttachmentBetweenFixedOnes(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      a.id,
+      0.85,
+    );
+    expect(result2.get(b.id)).toEqual([{ x: 0.95, y: 0 }]);
+    expect(result2.get(c.id), "should be within 0-1").toEqual([{ x: 1, y: 0 }]);
+  });
+
+  test("should slide with perserving distance: index shape is at middle", () => {
+    const result3 = getEvenlySpacedLineAttachmentBetweenFixedOnes(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      b.id,
+      0.5,
+    );
+    expect(result3.get(a.id)).toEqual([{ x: 0.4, y: 0 }]);
+    expect(result3.get(c.id)?.[0]).toEqualPoint({ x: 0.6, y: 0 });
+  });
+
+  test("should slide with perserving distance: index shape is at the end", () => {
+    const result4 = getEvenlySpacedLineAttachmentBetweenFixedOnes(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      c.id,
+      0.5,
+    );
+    expect(result4.get(a.id)).toEqual([{ x: 0.3, y: 0 }]);
+    expect(result4.get(b.id)?.[0]).toEqualPoint({ x: 0.4, y: 0 });
+  });
+
+  test("should evenly align unattached ones", () => {
+    const ua = { ...a, id: "ua", attachment: undefined };
+    const ub = { ...a, id: "ub", attachment: undefined };
+    const result0 = getEvenlySpacedLineAttachmentBetweenFixedOnes(
+      { line, a, b, c, d, e, ua, ub },
+      line.id,
+      [a.id, b.id, ua.id, ub.id],
+      a.id,
+      0.5,
+    );
+    expect(result0.size).toBe(3);
+    expect(result0.get(b.id)?.[0]).toEqualPoint({ x: 0.6, y: 0 });
+    expect(result0.get(ua.id)?.[0]).toEqualPoint({ x: 0.66666666, y: 0 });
+    expect(result0.get(ub.id)?.[0]).toEqualPoint({ x: 0.73333333, y: 0 });
+  });
+});
+
+describe("getEvenlySpacedLineAttachment", () => {
+  const line = createShape<LineShape>(getCommonStruct, "line", { id: "line", q: { x: 100, y: 0 } });
+  const a = createShape(getCommonStruct, "rectangle", {
+    id: "a",
+    p: { x: -30, y: -50 },
+    attachment: {
+      id: line.id,
+      to: { x: 0.2, y: 0 },
+      anchor: { x: 0.5, y: 0.5 },
+      rotationType: "relative",
+      rotation: 0,
+    },
+  });
+  const b = {
+    ...a,
+    p: { x: -20, y: -50 },
+    id: "b",
+    attachment: { ...a.attachment, to: { x: 0.3, y: 0 } },
+  } as Shape;
+  const c = {
+    ...a,
+    p: { x: -10, y: -50 },
+    id: "c",
+    attachment: { ...a.attachment, to: { x: 0.4, y: 0 } },
+  } as Shape;
+  const d = {
+    ...a,
+    p: { x: 3, y: -50 },
+    id: "d",
+    attachment: { ...a.attachment, to: { x: 0.8, y: 0 } },
+  } as Shape;
+  const e = {
+    ...a,
+    id: "e",
+    p: { x: 40, y: -50 },
+    attachment: { ...a.attachment, to: { x: 0.9, y: 0 } },
+  } as Shape;
+
+  test("should evenly align between other ones", () => {
+    const result0 = getEvenlySpacedLineAttachment(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      a.id,
+      { x: 50, y: 0 },
+      getLineEdgeInfo(line),
+    );
+    expect(result0.attachInfoMap.size).toBe(5);
+    expect(result0.attachInfoMap.get(a.id)?.[0]).toEqualPoint({ x: 0.5, y: 0 });
+    expect(result0.attachInfoMap.get(b.id)?.[0]).toEqualPoint({ x: 0.75, y: 0 });
+    expect(result0.attachInfoMap.get(c.id)?.[0]).toEqualPoint({ x: 1, y: 0 });
+    expect(result0.attachInfoMap.get(d.id)?.[0]).toEqualPoint({ x: 0, y: 0 });
+    expect(result0.attachInfoMap.get(e.id)?.[0]).toEqualPoint({ x: 0.25, y: 0 });
+  });
+
+  test("should evenly align between other ones: preserved the order of selected ones", () => {
+    const result0 = getEvenlySpacedLineAttachment(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      b.id,
+      { x: 50, y: 0 },
+      getLineEdgeInfo(line),
+    );
+    expect(result0.attachInfoMap.size).toBe(5);
+    expect(result0.attachInfoMap.get(a.id)?.[0]).toEqualPoint({ x: 0.25, y: 0 });
+    expect(result0.attachInfoMap.get(b.id)?.[0]).toEqualPoint({ x: 0.5, y: 0 });
+    expect(result0.attachInfoMap.get(c.id)?.[0]).toEqualPoint({ x: 0.75, y: 0 });
+    expect(result0.attachInfoMap.get(d.id)?.[0]).toEqualPoint({ x: 0, y: 0 });
+    expect(result0.attachInfoMap.get(e.id)?.[0]).toEqualPoint({ x: 1, y: 0 });
+  });
+
+  test("should evenly align between other ones: to the last", () => {
+    const result0 = getEvenlySpacedLineAttachment(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      c.id,
+      { x: 100, y: 0 },
+      getLineEdgeInfo(line),
+    );
+    expect(result0.attachInfoMap.size).toBe(5);
+    expect(result0.attachInfoMap.get(a.id)?.[0]).toEqualPoint({ x: 0.5, y: 0 });
+    expect(result0.attachInfoMap.get(b.id)?.[0]).toEqualPoint({ x: 0.75, y: 0 });
+    expect(result0.attachInfoMap.get(c.id)?.[0]).toEqualPoint({ x: 1, y: 0 });
+    expect(result0.attachInfoMap.get(d.id)?.[0]).toEqualPoint({ x: 0, y: 0 });
+    expect(result0.attachInfoMap.get(e.id)?.[0]).toEqualPoint({ x: 0.25, y: 0 });
+
+    const result1 = getEvenlySpacedLineAttachment(
+      { line, a, b, c, d, e },
+      line.id,
+      [a.id, b.id, c.id],
+      a.id,
+      { x: 100, y: 0 },
+      getLineEdgeInfo(line),
+    );
+    expect(result1.attachInfoMap.size).toBe(5);
+    expect(result1.attachInfoMap.get(a.id)?.[0]).toEqualPoint({ x: 0.5, y: 0 });
+    expect(result1.attachInfoMap.get(b.id)?.[0]).toEqualPoint({ x: 0.75, y: 0 });
+    expect(result1.attachInfoMap.get(c.id)?.[0]).toEqualPoint({ x: 1, y: 0 });
+    expect(result1.attachInfoMap.get(d.id)?.[0]).toEqualPoint({ x: 0, y: 0 });
+    expect(result1.attachInfoMap.get(e.id)?.[0]).toEqualPoint({ x: 0.25, y: 0 });
+  });
+
+  test("should evenly align between other ones: 2 items", () => {
+    const result0 = getEvenlySpacedLineAttachment(
+      { line, a, b },
+      line.id,
+      [b.id],
+      b.id,
+      { x: 60, y: 0 },
+      getLineEdgeInfo(line),
+    );
+    expect(result0.attachInfoMap.size).toBe(2);
+    expect(result0.attachInfoMap.get(a.id)?.[0]).toEqualPoint({ x: 0, y: 0 });
+    expect(result0.attachInfoMap.get(b.id)?.[0]).toEqualPoint({ x: 1, y: 0 });
+
+    const result1 = getEvenlySpacedLineAttachment(
+      { line, a, b },
+      line.id,
+      [b.id],
+      b.id,
+      { x: 40, y: 0 },
+      getLineEdgeInfo(line),
+    );
+    expect(result1.attachInfoMap.size).toBe(2);
+    expect(result1.attachInfoMap.get(a.id)?.[0]).toEqualPoint({ x: 1, y: 0 });
+    expect(result1.attachInfoMap.get(b.id)?.[0]).toEqualPoint({ x: 0, y: 0 });
+  });
+});
diff --git a/src/composables/lineAttachmentHandler.ts b/src/composables/lineAttachmentHandler.ts
new file mode 100644
index 00000000..830a02f5
--- /dev/null
+++ b/src/composables/lineAttachmentHandler.ts
@@ -0,0 +1,310 @@
+import { AffineMatrix, clamp, getDistanceSq, getRectCenter, isSame, IVec2, lerpPoint, rotate } from "okageo";
+import { EntityPatchInfo, Shape } from "../models";
+import { isLineShape, LineShape } from "../shapes/line";
+import { getLineEdgeInfo } from "../shapes/utils/line";
+import { getNextShapeComposite, ShapeComposite } from "./shapeComposite";
+import { AppCanvasStateContext } from "./states/appCanvas/core";
+import {
+  fillArray,
+  mapEach,
+  mapReduce,
+  patchPipe,
+  pickMinItem,
+  slideSubArray,
+  splitList,
+  toList,
+  toMap,
+} from "../utils/commons";
+import {
+  getPointLerpSlope,
+  getRelativePointWithinRect,
+  getRelativeRateWithinRect,
+  getRotateFn,
+  getRotationAffine,
+} from "../utils/geometry";
+
+export interface LineAttachmentHandler {
+  onModified(updatedMap: { [id: string]: Partial<Shape> }): { [id: string]: Partial<Shape> };
+}
+
+interface Option {
+  ctx: Pick<AppCanvasStateContext, "getShapeComposite">;
+}
+
+function newLineAttachmentHandler(option: Option): LineAttachmentHandler {
+  function onModified(updatedMap: { [id: string]: Partial<Shape> }): { [id: string]: Partial<Shape> } {
+    const shapeComposite = option.ctx.getShapeComposite();
+    const shapeMap = shapeComposite.shapeMap;
+    const attachedMap = getUpdatedAttachedMap(shapeComposite, updatedMap);
+
+    const ret: { [id: string]: Partial<Shape> } = {};
+    attachedMap.forEach((attachedIdSet, lineId) => {
+      if (attachedIdSet.size === 0) return;
+
+      const line = shapeMap[lineId];
+      if (!line || !isLineShape(line)) {
+        attachedIdSet.forEach((attachedId) => {
+          ret[attachedId] = { attachment: undefined };
+        });
+        return;
+      }
+
+      const nextLine = { ...line, ...updatedMap[lineId] } as LineShape;
+      const nextLineLerpFn = getLineEdgeInfo(nextLine).lerpFn;
+      attachedIdSet.forEach((attachedId) => {
+        const shape = shapeMap[attachedId];
+        const nextAttached = { ...shape, ...updatedMap[attachedId] };
+        if (!shapeComposite.canAttach(nextAttached)) {
+          if (shape.attachment) {
+            ret[attachedId] = { attachment: undefined };
+          }
+          return;
+        }
+
+        const nextAttachment = nextAttached.attachment;
+        if (!nextAttachment) return;
+
+        const t = nextAttachment.to.x;
+        const toP = nextLineLerpFn(t);
+
+        let nextRotation = nextAttached.rotation;
+        if (nextAttachment.rotationType === "relative") {
+          const baseRotation = getPointLerpSlope(nextLineLerpFn, t);
+          nextRotation = nextAttachment.rotation + baseRotation;
+        }
+
+        const allTargetShapes = shapeComposite.getAllTransformTargets([attachedId]);
+
+        const patch = patchPipe(
+          [
+            (src) => {
+              // Apply next rotation at first.
+              const rotateAffine = getRotationAffine(
+                nextRotation - shape.rotation,
+                getRectCenter(shapeComposite.getWrapperRect(shape)),
+              );
+              return mapReduce(src, (s) => shapeComposite.transformShape(s, rotateAffine));
+            },
+            (src, update) => {
+              // Derive translation affine based on the anchors of rotated shapes.
+              const rotatedShapeComposite = getNextShapeComposite(shapeComposite, { update });
+              const translateAffine = getAffineByMoveToAttachedPoint(
+                rotatedShapeComposite,
+                rotatedShapeComposite.shapeMap[attachedId],
+                nextAttachment.anchor,
+                toP,
+              );
+              return mapReduce(src, (s) => shapeComposite.transformShape(s, translateAffine));
+            },
+          ],
+          toMap(allTargetShapes),
+        ).patch;
+
+        for (const id in patch) {
+          ret[id] = patch[id];
+        }
+      });
+    });
+
+    return ret;
+  }
+
+  return { onModified };
+}
+
+/**
+ * Returns Map<line id, Set<attached shape id>>
+ */
+function getUpdatedAttachedMap(
+  shapeComposite: ShapeComposite,
+  updatedMap: { [id: string]: Partial<Shape> },
+): Map<string, Set<string>> {
+  const shapeMap = shapeComposite.shapeMap;
+  const targetLineIdSet = new Set(Object.keys(updatedMap).filter((id) => isLineShape(shapeMap[id])));
+  const attachedMap = new Map<string, Set<string>>();
+
+  mapEach(shapeMap, (s, id) => {
+    const lineId = s.attachment?.id ?? updatedMap[id]?.attachment?.id;
+    if (!lineId || !targetLineIdSet.has(lineId)) return;
+
+    const idSet = attachedMap.get(lineId);
+    if (idSet) {
+      idSet.add(s.id);
+    } else {
+      attachedMap.set(lineId, new Set([s.id]));
+    }
+  });
+
+  mapEach(updatedMap, (patch, id) => {
+    if (targetLineIdSet.has(id)) return;
+
+    const s = { ...shapeMap[id], ...patch };
+    if (!s.attachment) return;
+
+    const lineId = s.attachment.id;
+    if (targetLineIdSet.has(lineId)) return;
+
+    const idSet = attachedMap.get(lineId);
+    if (idSet) {
+      idSet.add(s.id);
+    } else {
+      attachedMap.set(lineId, new Set([s.id]));
+    }
+  });
+
+  return attachedMap;
+}
+
+export function getLineAttachmentPatch(
+  srcComposite: ShapeComposite,
+  patchInfo: EntityPatchInfo<Shape>,
+): { [id: string]: Partial<Shape> } {
+  if (!patchInfo.update) return {};
+
+  const handler = newLineAttachmentHandler({
+    ctx: { getShapeComposite: () => srcComposite },
+  });
+  return handler.onModified(patchInfo.update);
+}
+
+export function getAffineByMoveToAttachedPoint(
+  shapeComposite: ShapeComposite,
+  shape: Shape,
+  anchor: IVec2,
+  attachedPoint: IVec2,
+): AffineMatrix {
+  const anchorP = getNextAttachmentAnchorPoint(shapeComposite, shape, anchor);
+  return [1, 0, 0, 1, attachedPoint.x - anchorP.x, attachedPoint.y - anchorP.y];
+}
+
+export function getAttachmentAnchorPoint(shapeComposite: ShapeComposite, shape: Shape): IVec2 {
+  return getNextAttachmentAnchorPoint(shapeComposite, shape, shape.attachment?.anchor);
+}
+
+export function getNextAttachmentAnchorPoint(shapeComposite: ShapeComposite, shape: Shape, rate?: IVec2): IVec2 {
+  const [localRect, rotation] = shapeComposite.getLocalSpace(shape);
+  const c = getRectCenter(localRect);
+  if (!rate) return c;
+
+  const rotateFn = getRotateFn(rotation, c);
+  const localAnchor = getRelativePointWithinRect(localRect, rate);
+  return rotateFn(localAnchor);
+}
+
+export function getNextAttachmentAnchor(shapeComposite: ShapeComposite, shape: Shape, point: IVec2): IVec2 {
+  const localSpace = shapeComposite.getLocalSpace(shape);
+  const localPoint = rotate(point, -localSpace[1], getRectCenter(localSpace[0]));
+  return getRelativeRateWithinRect(localSpace[0], localPoint, true);
+}
+
+export function getEvenlySpacedLineAttachmentBetweenFixedOnes(
+  shapeMap: { [id: string]: Shape },
+  lineId: string,
+  selectedShapeIds: string[],
+  indexShapeId: string,
+  attachedRate: number,
+): Map<string, [to: IVec2]> {
+  const line = shapeMap[lineId] as LineShape;
+  const movingTargetIdSet = new Set(selectedShapeIds);
+  const allTargetIdSet = new Set(movingTargetIdSet);
+  const fixedTargetIdSet = new Set<string>();
+  toList(shapeMap).forEach((s) => {
+    if (s.attachment?.id === line.id && !movingTargetIdSet.has(s.id)) {
+      allTargetIdSet.add(s.id);
+      fixedTargetIdSet.add(s.id);
+    }
+  });
+
+  const indexShape = shapeMap[indexShapeId];
+  const selectedShapes = selectedShapeIds.map((id) => shapeMap[id]);
+  const [attachedList, otherList] = splitList(
+    selectedShapes.filter((s) => s.id !== indexShapeId),
+    (s) => s.attachment?.id === line.id,
+  );
+
+  const attachInfoMap = new Map<string, [to: IVec2]>();
+
+  attachedList.sort((a, b) => a.attachment!.to.x - b.attachment!.to.x);
+  let lastRate = attachedRate;
+  attachedList.forEach((s) => {
+    const v = s.attachment!.to.x - indexShape.attachment!.to.x;
+    const rate = clamp(0, 1, attachedRate + v);
+    attachInfoMap.set(s.id, [{ x: rate, y: 0 }]);
+    lastRate = rate;
+  });
+
+  if (otherList.length > 0) {
+    let nextRate = 1;
+    fixedTargetIdSet.forEach((id) => {
+      const s = shapeMap[id];
+      const rate = s.attachment!.to.x;
+      if (lastRate < rate) {
+        nextRate = Math.min(rate, nextRate);
+      }
+    });
+
+    const toLerpFn = (t: number) => lerpPoint({ x: lastRate, y: 0 }, { x: nextRate, y: 0 }, t);
+    const step = 1 / (otherList.length + (fixedTargetIdSet.size > 0 ? 1 : 0));
+    otherList.forEach((s, i) => {
+      const to = toLerpFn(step * (i + 1));
+      attachInfoMap.set(s.id, [to]);
+    });
+  }
+
+  return attachInfoMap;
+}
+
+export function getEvenlySpacedLineAttachment(
+  shapeMap: { [id: string]: Shape },
+  lineId: string,
+  selectedShapeIds: string[],
+  indexShapeId: string,
+  anchorP: IVec2,
+  edgeInfo: ReturnType<typeof getLineEdgeInfo>,
+): {
+  attachInfoMap: Map<string, [to: IVec2]>;
+  attachedPoint: IVec2;
+} {
+  const line = shapeMap[lineId] as LineShape;
+  const movingTargetIdSet = new Set(selectedShapeIds);
+  const allTargetIdSet = new Set(movingTargetIdSet);
+  toList(shapeMap).forEach((s) => {
+    if (s.attachment?.id === line.id && !movingTargetIdSet.has(s.id)) {
+      allTargetIdSet.add(s.id);
+    }
+  });
+
+  const closed = isSame(line.p, line.q);
+  const splitSize = closed ? allTargetIdSet.size : Math.max(1, allTargetIdSet.size - 1);
+  const points = fillArray(allTargetIdSet.size, 0).map<[IVec2, rate: number, index: number, distanceSq: number]>(
+    (_, i) => {
+      const t = i / splitSize;
+      const p = edgeInfo.lerpFn(t);
+      const dd = getDistanceSq(p, anchorP);
+      return [p, t, i, dd];
+    },
+  );
+  const closestSplitInfo = pickMinItem(points, (v) => v[3])!;
+
+  // Push newly attached ones to the tail.
+  const sortedAllTargets = Array.from(allTargetIdSet)
+    .map((id) => shapeMap[id])
+    .sort((a, b) => (a.attachment?.to.x ?? 1) - (b.attachment?.to.x ?? 1));
+  const sortedMovingTargets = sortedAllTargets.filter(({ id }) => movingTargetIdSet.has(id));
+  const baseIndexWithinMovingShapes = sortedMovingTargets.findIndex(({ id }) => id === indexShapeId);
+
+  const movingIndexList: number[] = [];
+  sortedAllTargets.forEach((s, i) => {
+    if (movingTargetIdSet.has(s.id)) {
+      movingIndexList.push(i);
+    }
+  });
+  const nextAllTargets = slideSubArray(
+    sortedAllTargets,
+    [Math.min(...movingIndexList), movingIndexList.length],
+    closestSplitInfo[2] - baseIndexWithinMovingShapes,
+  );
+  const attachInfoMap = new Map<string, [to: IVec2]>(nextAllTargets.map((s, i) => [s.id, [{ x: points[i][1], y: 0 }]]));
+
+  return { attachInfoMap, attachedPoint: closestSplitInfo[0] };
+}
diff --git a/src/composables/shapeComposite.spec.ts b/src/composables/shapeComposite.spec.ts
index 6d7094fd..5422d3ca 100644
--- a/src/composables/shapeComposite.spec.ts
+++ b/src/composables/shapeComposite.spec.ts
@@ -22,6 +22,7 @@ import { TreeNodeShape } from "../shapes/tree/treeNode";
 import { getNextTreeLayout } from "./shapeHandlers/treeHandler";
 import { patchPipe, toList, toMap } from "../utils/commons";
 import { generateKeyBetween } from "../utils/findex";
+import { Shape } from "../models";
 
 describe("newShapeComposite", () => {
   test("should compose shape tree", () => {
@@ -84,6 +85,23 @@ describe("newShapeComposite", () => {
     });
   });
 
+  describe("getLocalSpace", () => {
+    test("should return local space of the shape", () => {
+      const shape0 = createShape<RectangleShape>(getCommonStruct, "rectangle", {
+        id: "test0",
+        width: 10,
+        height: 20,
+        rotation: Math.PI / 2,
+      });
+
+      const shapes = [shape0];
+      const target = newShapeComposite({ shapes, getStruct: getCommonStruct });
+      const result0 = target.getLocalSpace(shape0);
+      expect(result0[0]).toEqualRect({ x: 0, y: 0, width: 10, height: 20 });
+      expect(result0[1]).toBeCloseTo(Math.PI / 2);
+    });
+  });
+
   describe("getWrapperRectForShapes", () => {
     test("should return wrapper rectangle for shapes", () => {
       const shape0 = createShape<RectangleShape>(getCommonStruct, "rectangle", { id: "test0", width: 10, height: 20 });
@@ -365,6 +383,22 @@ describe("newShapeComposite", () => {
         card1,
       ]);
     });
+
+    test("should respect shapeType of the scope", () => {
+      const group = createShape(getCommonStruct, "group", { id: "group" });
+      const rect0 = createShape(getCommonStruct, "rectangle", { id: "rect0", parentId: group.id });
+      const line0 = createShape(getCommonStruct, "line", { id: "line0", parentId: group.id });
+      const rect1 = createShape(getCommonStruct, "rectangle", { id: "rect1" });
+
+      const shapes = [group, rect0, line0, rect1];
+      const target = newShapeComposite({
+        shapes,
+        getStruct: getCommonStruct,
+      });
+      expect(target.getMergedShapesInSelectionScope({ shapeType: "rectangle" })).toEqual([rect1]);
+      expect(target.getMergedShapesInSelectionScope({ parentId: group.id, shapeType: "rectangle" })).toEqual([rect0]);
+      expect(target.getMergedShapesInSelectionScope({ shapeType: "line" })).toEqual([]);
+    });
   });
 
   describe("hasParent", () => {
@@ -398,6 +432,69 @@ describe("newShapeComposite", () => {
     });
   });
 
+  describe("attached", () => {
+    test("should return true when a shape has valid attachment", () => {
+      const shape0 = createShape(getCommonStruct, "rectangle", {
+        id: "shape",
+        attachment: {
+          id: "line",
+          to: { x: 0, y: 0 },
+          anchor: { x: 0, y: 0 },
+          rotationType: "relative",
+          rotation: 0,
+        },
+      });
+      const shape1 = { ...shape0, attachment: { ...shape0.attachment, id: "unknown" } } as Shape;
+      const shape2 = { ...shape0, attachment: undefined } as Shape;
+      const line = createShape(getCommonStruct, "line", { id: "line" });
+
+      const shapes = [shape0, shape1, shape2, line];
+      const target = newShapeComposite({
+        shapes,
+        getStruct: getCommonStruct,
+      });
+
+      expect(target.attached(shape0)).toBe(true);
+      expect(target.attached(shape1)).toBe(false);
+      expect(target.attached(shape2)).toBe(false);
+    });
+  });
+
+  describe("canAttach", () => {
+    test("should return true when a shape can attach to other shape", () => {
+      const group = createShape(getCommonStruct, "group", {
+        id: "group",
+      });
+      const align = createShape(getCommonStruct, "align_box", {
+        id: "align",
+      });
+      const a = createShape(getCommonStruct, "rectangle", {
+        id: "a",
+        parentId: group.id,
+      });
+      const b = {
+        id: "b",
+        parentId: align.id,
+      } as Shape;
+      const c = {
+        id: "c",
+        parentId: "unknown",
+      } as Shape;
+
+      const shapes = [group, align, a, b, c];
+      const target = newShapeComposite({
+        shapes,
+        getStruct: getCommonStruct,
+      });
+
+      expect(target.canAttach(group)).toBe(true);
+      expect(target.canAttach(align)).toBe(true);
+      expect(target.canAttach(a)).toBe(true);
+      expect(target.canAttach(b)).toBe(false);
+      expect(target.canAttach(c)).toBe(true);
+    });
+  });
+
   describe("getShapeCompositeWithoutTmpInfo", () => {
     const group0 = createShape(getCommonStruct, "group", { id: "group0" });
     const child0 = createShape(getCommonStruct, "rectangle", {
diff --git a/src/composables/shapeComposite.ts b/src/composables/shapeComposite.ts
index f887480a..2a558c24 100644
--- a/src/composables/shapeComposite.ts
+++ b/src/composables/shapeComposite.ts
@@ -1,4 +1,14 @@
-import { AffineMatrix, IRectangle, IVec2, applyAffine, getOuterRectangle, getRectCenter, multiAffines } from "okageo";
+import {
+  AffineMatrix,
+  IRectangle,
+  IVec2,
+  applyAffine,
+  getCenter,
+  getDistance,
+  getOuterRectangle,
+  getRectCenter,
+  multiAffines,
+} from "okageo";
 import { EntityPatchInfo, Shape } from "../models";
 import * as shapeModule from "../shapes";
 import * as geometry from "../utils/geometry";
@@ -150,6 +160,14 @@ export function newShapeComposite(option: Option) {
     });
   }
 
+  function getLocalSpace(shape: Shape): [IRectangle, rotation: number] {
+    const localRectPolygon = getLocalRectPolygon(shape);
+    const c = getCenter(localRectPolygon[0], localRectPolygon[2]);
+    const width = getDistance(localRectPolygon[0], localRectPolygon[1]);
+    const height = getDistance(localRectPolygon[0], localRectPolygon[3]);
+    return [{ x: c.x - width / 2, y: c.y - height / 2, width, height }, shape.rotation];
+  }
+
   function getLocationRateOnShape(shape: Shape, p: IVec2): IVec2 {
     return geometry.getLocationRateOnRectPath(getLocalRectPolygon(shape), shape.rotation, p);
   }
@@ -204,27 +222,42 @@ export function newShapeComposite(option: Option) {
   }
 
   /**
-   * When scope is undefined, returns root shapes
+   * When scope.parent is undefined, returns root shapes
    */
   function getMergedShapesInSelectionScope(scope?: ShapeSelectionScope, parentScopeCheckOnly = false): Shape[] {
-    if (!scope?.parentId) return mergedShapeTree.map((t) => mergedShapeMap[t.id]);
+    let candidates: Shape[];
+    if (!scope?.parentId) {
+      candidates = mergedShapeTree.map((t) => mergedShapeMap[t.id]);
+    } else {
+      const checkFn = parentScopeCheckOnly ? isSameShapeParentScope : isSameShapeSelectionScope;
+      candidates =
+        mergedShapeTreeMap[scope.parentId]?.children
+          .map((t) => mergedShapeMap[t.id])
+          .filter((s) => checkFn(getSelectionScope(s), scope)) ?? [];
+    }
 
-    const checkFn = parentScopeCheckOnly ? isSameShapeParentScope : isSameShapeSelectionScope;
-    return (
-      mergedShapeTreeMap[scope.parentId]?.children
-        .map((t) => mergedShapeMap[t.id])
-        .filter((s) => checkFn(getSelectionScope(s), scope)) ?? []
-    );
+    return scope?.shapeType ? candidates.filter((s) => s.type === scope.shapeType) : candidates;
   }
 
   function getShapeActualPosition(shape: Shape): IVec2 {
     return getStruct(shape.type).getActualPosition?.(shape, mergedShapeContext) ?? shape.p;
   }
 
-  function hasParent(shape: Shape): boolean {
+  function hasParent(shape: Shape): shape is Shape & Required<Pick<Shape, "parentId">> {
     return !!shapeMap[shape.parentId ?? ""];
   }
 
+  function attached(shape: Shape): shape is Shape & Required<Pick<Shape, "attachment">> {
+    return !!shapeMap[shape.attachment?.id ?? ""];
+  }
+
+  function canAttach(shape: Shape): boolean {
+    if (!hasParent(shape)) return true;
+    // When the parent isn't group shape, it must be special layout shape.
+    // => This shape should follow its layout rule rather than attachment.
+    return isGroupShape(shapeMap[shape.parentId]);
+  }
+
   function setDocCompositeCache(id: string, val: DocCompositionInfo, src: DocOutput) {
     docCompositeCacheMap[id] = [val, src];
   }
@@ -278,6 +311,7 @@ export function newShapeComposite(option: Option) {
     getWrapperRect,
     getWrapperRectForShapes,
     getLocalRectPolygon,
+    getLocalSpace,
     getLocationRateOnShape,
     getShapeTreeLocalRect,
     rotateShapeTree,
@@ -288,6 +322,8 @@ export function newShapeComposite(option: Option) {
     getMergedShapesInSelectionScope,
     getShapeActualPosition,
     hasParent,
+    attached,
+    canAttach,
 
     setDocCompositeCache,
     getDocCompositeCache,
diff --git a/src/composables/shapeLayoutHandler.ts b/src/composables/shapeLayoutHandler.ts
index dea19ad1..a18bae37 100644
--- a/src/composables/shapeLayoutHandler.ts
+++ b/src/composables/shapeLayoutHandler.ts
@@ -5,6 +5,7 @@ import { getAlignLayoutPatchFunctions } from "./alignHandler";
 import { getBoardLayoutPatchFunctions } from "./boardHandler";
 import { getConnectedLinePatch } from "./connectedLineHandler";
 import { getCurveLinePatch } from "./curveLineHandler";
+import { getLineAttachmentPatch } from "./lineAttachmentHandler";
 import { getLineLabelPatch } from "./lineLabelHandler";
 import { ShapeComposite, getNextShapeComposite } from "./shapeComposite";
 import { getTreeLayoutPatchFunctions } from "./shapeHandlers/treeHandler";
@@ -39,6 +40,7 @@ export function getPatchByLayouts(
       (_, patch) => getConnectedLinePatch(updatedComposite, { update: patch }),
       (_, patch) => getCurveLinePatch(updatedComposite, { update: patch }),
       (_, patch) => getLineLabelPatch(updatedComposite, { update: patch }),
+      (_, patch) => getLineAttachmentPatch(updatedComposite, { update: patch }),
     ],
     shapeComposite.shapeMap,
   );
@@ -89,6 +91,7 @@ export function getPatchInfoByLayouts(
       (_, patch) => getConnectedLinePatch(updatedComposite, { update: patch }),
       (_, patch) => getCurveLinePatch(updatedComposite, { update: patch }),
       (_, patch) => getLineLabelPatch(updatedComposite, { update: patch }),
+      (_, patch) => getLineAttachmentPatch(updatedComposite, { update: patch }),
     ],
     shapeComposite.shapeMap,
   );
@@ -117,6 +120,7 @@ export function getPatchAfterLayouts(
       (_, patch) => getConnectedLinePatch(updatedComposite, { update: patch }),
       (_, patch) => getCurveLinePatch(updatedComposite, { update: patch }),
       (_, patch) => getLineLabelPatch(updatedComposite, { update: patch }),
+      (_, patch) => getLineAttachmentPatch(updatedComposite, { update: patch }),
     ],
     shapeComposite.shapeMap,
   );
diff --git a/src/composables/states/appCanvas/align/alignBoxSelectedState.ts b/src/composables/states/appCanvas/align/alignBoxSelectedState.ts
index 28d94aa6..9ed42004 100644
--- a/src/composables/states/appCanvas/align/alignBoxSelectedState.ts
+++ b/src/composables/states/appCanvas/align/alignBoxSelectedState.ts
@@ -18,7 +18,6 @@ import { newAlignBoxPaddingState } from "./alignBoxPaddingState";
 import { newAlignBoxGapState } from "./alignBoxGapState";
 import { defineIntransientState } from "../intransientState";
 import { newPointerDownEmptyState } from "../pointerDownEmptyState";
-import { newMovingHubState } from "../movingHubState";
 
 export const newAlignBoxSelectedState = defineIntransientState(() => {
   let targetId: string;
@@ -139,7 +138,7 @@ export const newAlignBoxSelectedState = defineIntransientState(() => {
                   case "rotation":
                     return () => newRotatingState({ boundingBox });
                   case "move":
-                    return () => newMovingHubState({ boundingBox });
+                    return () => ctx.states.newMovingHubState({ boundingBox });
                 }
               }
 
diff --git a/src/composables/states/appCanvas/board/boardEntitySelectedState.ts b/src/composables/states/appCanvas/board/boardEntitySelectedState.ts
index 64cd1d45..cf750e36 100644
--- a/src/composables/states/appCanvas/board/boardEntitySelectedState.ts
+++ b/src/composables/states/appCanvas/board/boardEntitySelectedState.ts
@@ -21,7 +21,6 @@ import { getPatchByLayouts } from "../../../shapeLayoutHandler";
 import { defineIntransientState } from "../intransientState";
 import { newPointerDownEmptyState } from "../pointerDownEmptyState";
 import { newRotatingState } from "../rotatingState";
-import { newMovingHubState } from "../movingHubState";
 
 /**
  * General selected state for any board entity
@@ -153,7 +152,7 @@ export const newBoardEntitySelectedState = defineIntransientState(() => {
                   case "rotation":
                     return () => newRotatingState({ boundingBox });
                   case "move":
-                    return () => newMovingHubState({ boundingBox });
+                    return () => ctx.states.newMovingHubState({ boundingBox });
                 }
               }
 
diff --git a/src/composables/states/appCanvas/commandExams.ts b/src/composables/states/appCanvas/commandExams.ts
index 77ad7cfb..3a994b8e 100644
--- a/src/composables/states/appCanvas/commandExams.ts
+++ b/src/composables/states/appCanvas/commandExams.ts
@@ -6,6 +6,8 @@ export const COMMAND_EXAM_SRC = {
   DISABLE_SNAP: { command: getCtrlOrMetaStr(), title: "Disable snapping" },
   DISABLE_LINE_VERTEX_SNAP: { command: getCtrlOrMetaStr(), title: "Disable snapping" },
   BEZIER_SYMMETRICALLY: { command: "Shift", title: "Symmetrically" },
+  EVENLY_SPACED: { command: "Shift", title: "Evenly spaced" },
+  SLIDE_ATTACH_ANCHOR: { command: "Shift + Drag", title: "Slide anchor" },
 
   LABEL_ALIGN: { command: "Shift", title: "Adjust label align" },
   LABEL_ALIGN_ACTIVATE: { command: "Shift + Drag", title: "Adjust label align" },
diff --git a/src/composables/states/appCanvas/commons.ts b/src/composables/states/appCanvas/commons.ts
index f0f850b6..3532b8c7 100644
--- a/src/composables/states/appCanvas/commons.ts
+++ b/src/composables/states/appCanvas/commons.ts
@@ -219,6 +219,9 @@ export function getCommonCommandExams(ctx: AppCanvasStateContext): CommandExam[]
 
   const extra: CommandExam[] = [];
   const selectedIds = Object.keys(ctx.getSelectedShapeIdMap());
+  if (selectedIds.length === 1 && shapeComposite.attached(shapeMap[selectedIds[0]])) {
+    extra.push(COMMAND_EXAM_SRC.SLIDE_ATTACH_ANCHOR);
+  }
   if (canGroupShapes(shapeComposite, selectedIds)) {
     extra.push(COMMAND_EXAM_SRC.GROUP);
   }
diff --git a/src/composables/states/appCanvas/index.ts b/src/composables/states/appCanvas/index.ts
index 03541153..3f21070b 100644
--- a/src/composables/states/appCanvas/index.ts
+++ b/src/composables/states/appCanvas/index.ts
@@ -1,7 +1,13 @@
+import { newMovingAnchorOnLineState } from "./lines/movingAnchorOnLineState";
+import { newMovingOnLineState } from "./lines/movingOnLineState";
+import { newMovingHubState } from "./movingHubState";
 import { newSelectionHubState } from "./selectionHubState";
 
 // TODO: Should hoist all states here to avoid circular dependencies.
 export const stateGenerators = {
   newSelectionHubState,
+  newMovingHubState,
+  newMovingOnLineState,
+  newMovingAnchorOnLineState,
 };
 export type StateGenerators = typeof stateGenerators;
diff --git a/src/composables/states/appCanvas/lines/lineSelectedState.ts b/src/composables/states/appCanvas/lines/lineSelectedState.ts
index 2afaedf3..3bd66d67 100644
--- a/src/composables/states/appCanvas/lines/lineSelectedState.ts
+++ b/src/composables/states/appCanvas/lines/lineSelectedState.ts
@@ -22,7 +22,6 @@ import { TextShape, patchPosition } from "../../../../shapes/text";
 import { newTextEditingState } from "../text/textEditingState";
 import { COMMAND_EXAM_SRC } from "../commandExams";
 import { CONTEXT_MENU_ITEM_SRC, getMenuItemsForSelectedShapes } from "../contextMenuItems";
-import { newMovingHubState } from "../movingHubState";
 import { getPatchAfterLayouts, getPatchByLayouts } from "../../../shapeLayoutHandler";
 import { newMovingLineSegmentState } from "./movingLineSegmentState";
 import { newMovingLineArcState } from "./movingLineArcState";
@@ -89,7 +88,7 @@ export const newLineSelectedState = defineIntransientState(() => {
                     return ctx.states.newSelectionHubState;
                   }
                   case "move-anchor":
-                    return newMovingHubState;
+                    return ctx.states.newMovingHubState;
                   case "rotate-anchor": {
                     const shapeComposite = ctx.getShapeComposite();
                     const rectPath = shapeComposite.getLocalRectPolygon(lineShape);
diff --git a/src/composables/states/appCanvas/lines/movingAnchorOnLineState.spec.ts b/src/composables/states/appCanvas/lines/movingAnchorOnLineState.spec.ts
new file mode 100644
index 00000000..04c0a1d2
--- /dev/null
+++ b/src/composables/states/appCanvas/lines/movingAnchorOnLineState.spec.ts
@@ -0,0 +1,91 @@
+import { describe, test, expect, vi } from "vitest";
+import { newMovingAnchorOnLineState } from "./movingAnchorOnLineState";
+import { createShape, getCommonStruct } from "../../../../shapes";
+import { createStyleScheme } from "../../../../models/factories";
+import { createInitialAppCanvasStateContext } from "../../../../contexts/AppCanvasContext";
+import { newShapeComposite } from "../../../shapeComposite";
+import { LineShape } from "../../../../shapes/line";
+import { RectangleShape } from "../../../../shapes/rectangle";
+
+const line = createShape<LineShape>(getCommonStruct, "line", { id: "line", q: { x: 100, y: 0 } });
+const a = createShape<RectangleShape>(getCommonStruct, "rectangle", {
+  id: "a",
+  p: { x: 0, y: -50 },
+  width: 100,
+  height: 100,
+  attachment: {
+    id: line.id,
+    to: { x: 0.5, y: 0 },
+    anchor: { x: 0.5, y: 0.5 },
+    rotationType: "relative",
+    rotation: 0,
+  },
+});
+function getMockCtx() {
+  return {
+    ...createInitialAppCanvasStateContext({
+      getTimestamp: Date.now,
+      generateUuid: () => "id",
+      getStyleScheme: createStyleScheme,
+    }),
+    getCursorPoint: () => ({ x: 50, y: 0 }),
+    setTmpShapeMap: vi.fn(),
+    patchShapes: vi.fn(),
+    getShapeComposite: () =>
+      newShapeComposite({
+        shapes: [line, a],
+        getStruct: getCommonStruct,
+      }),
+  };
+}
+
+describe("newMovingAnchorOnLineState", () => {
+  describe("handleEvent: pointermove", () => {
+    test("should call setTmpShapeMap with updated anchor", () => {
+      const ctx = getMockCtx();
+      ctx.getSelectedShapeIdMap = () => ({ a: true });
+      ctx.getLastSelectedShapeId = () => "a";
+      const target = newMovingAnchorOnLineState({ lineId: "line", shapeId: "a" });
+      target.onStart?.(ctx);
+
+      const result0 = target.handleEvent(ctx, {
+        type: "pointermove",
+        data: { start: { x: 50, y: 0 }, current: { x: 60, y: 0 }, scale: 1, alt: true, ctrl: true },
+      });
+      expect(result0).toBe(undefined);
+      expect(ctx.setTmpShapeMap).toHaveBeenNthCalledWith(1, {
+        a: {
+          p: { x: 10, y: -50 },
+          attachment: {
+            id: line.id,
+            to: { x: 0.5, y: 0 },
+            anchor: { x: 0.4, y: 0.5 },
+            rotationType: "relative",
+            rotation: 0,
+          },
+        },
+      });
+    });
+  });
+
+  describe("handleEvent: pointerup", () => {
+    test("should call patchShapes with temprorary shapes", () => {
+      const ctx = getMockCtx();
+      ctx.getSelectedShapeIdMap = () => ({ a: true });
+      ctx.getLastSelectedShapeId = () => "a";
+      ctx.getTmpShapeMap = () => ({ a: { p: { x: 1, y: 2 } } });
+      const target = newMovingAnchorOnLineState({ lineId: "line", shapeId: "a" });
+      target.onStart?.(ctx);
+
+      const result0 = target.handleEvent(ctx, {
+        type: "pointerup",
+        data: { point: { x: 0, y: 0 }, options: { button: 0 } },
+      });
+      expect(result0).toEqual(ctx.states.newSelectionHubState);
+      expect(ctx.patchShapes).toHaveBeenNthCalledWith(1, ctx.getTmpShapeMap());
+
+      target.onEnd?.(ctx);
+      expect(ctx.setTmpShapeMap).toHaveBeenNthCalledWith(1, {});
+    });
+  });
+});
diff --git a/src/composables/states/appCanvas/lines/movingAnchorOnLineState.ts b/src/composables/states/appCanvas/lines/movingAnchorOnLineState.ts
new file mode 100644
index 00000000..f6f42194
--- /dev/null
+++ b/src/composables/states/appCanvas/lines/movingAnchorOnLineState.ts
@@ -0,0 +1,166 @@
+import type { AppCanvasState } from "../core";
+import { applyFillStyle } from "../../../../utils/fillStyle";
+import { mapReduce, patchPipe } from "../../../../utils/commons";
+import { getLinePath, isLineShape, LineShape } from "../../../../shapes/line";
+import { expandRectByScale, ISegment, TAU } from "../../../../utils/geometry";
+import { getRectCenter, moveRect, sub } from "okageo";
+import { applyCurvePath, applyLocalSpace, applyPath } from "../../../../utils/renderer";
+import { applyStrokeStyle } from "../../../../utils/strokeStyle";
+import { getPatchAfterLayouts } from "../../../shapeLayoutHandler";
+import { newShapeComposite, ShapeComposite } from "../../../shapeComposite";
+import { COMMAND_EXAM_SRC } from "../commandExams";
+import { getLineEdgeInfo } from "../../../../shapes/utils/line";
+import { getNextAttachmentAnchor } from "../../../lineAttachmentHandler";
+
+type Option = {
+  lineId: string;
+  shapeId: string;
+};
+
+export function newMovingAnchorOnLineState(option: Option): AppCanvasState {
+  let line: LineShape;
+  let edgeInfo: ReturnType<typeof getLineEdgeInfo>;
+  let subShapeComposite: ShapeComposite; // for avoid regarding temporary shapes
+
+  return {
+    getLabel: () => "MovingAnchorOnLine",
+    onStart: (ctx) => {
+      ctx.startDragging();
+      ctx.setCommandExams([COMMAND_EXAM_SRC.DISABLE_SNAP]);
+      const shapeComposite = ctx.getShapeComposite();
+      line = shapeComposite.shapeMap[option.lineId] as LineShape;
+      const indexShape = shapeComposite.shapeMap[option.shapeId];
+      if (!isLineShape(line) || !shapeComposite.attached(indexShape)) {
+        return ctx.states.newSelectionHubState;
+      }
+
+      edgeInfo = getLineEdgeInfo(line);
+      const movingAllIdSet = new Set(
+        shapeComposite.getAllBranchMergedShapes(Object.keys(ctx.getSelectedShapeIdMap())).map((s) => s.id),
+      );
+      subShapeComposite = newShapeComposite({
+        shapes: shapeComposite.shapes.filter((s) => movingAllIdSet.has(s.id)),
+        getStruct: shapeComposite.getShapeStruct,
+      });
+    },
+    onEnd: (ctx) => {
+      ctx.stopDragging();
+      ctx.setCommandExams();
+      ctx.setTmpShapeMap({});
+    },
+    handleEvent: (ctx, event) => {
+      switch (event.type) {
+        case "pointermove": {
+          const diff = sub(event.data.current, event.data.start);
+          const shapeComposite = ctx.getShapeComposite();
+          const indexShape = subShapeComposite.shapeMap[option.shapeId];
+          if (!shapeComposite.attached(indexShape)) {
+            return ctx.states.newSelectionHubState;
+          }
+
+          const [localBounds] = subShapeComposite.getLocalSpace(indexShape);
+          const attachedP = edgeInfo.lerpFn(indexShape.attachment.to.x);
+          const nextAnchorP = sub(attachedP, diff);
+          const nextAnchor = getNextAttachmentAnchor(subShapeComposite, indexShape, nextAnchorP);
+
+          let adjustedNextAnchor = nextAnchor;
+          if (!event.data.ctrl) {
+            const threshold = 10 * ctx.getScale();
+            adjustedNextAnchor = {
+              x: Math.abs(nextAnchor.x - 0.5) * localBounds.width < threshold ? 0.5 : nextAnchor.x,
+              y: Math.abs(nextAnchor.y - 0.5) * localBounds.height < threshold ? 0.5 : nextAnchor.y,
+            };
+          }
+
+          const patch = patchPipe(
+            [
+              (src) => {
+                return mapReduce(src, (s) => {
+                  return s.attachment ? { attachment: { ...s.attachment, anchor: adjustedNextAnchor } } : {};
+                });
+              },
+              (_, currentPatch) => {
+                return getPatchAfterLayouts(shapeComposite, { update: currentPatch });
+              },
+            ],
+            mapReduce(ctx.getSelectedShapeIdMap(), (_, id) => shapeComposite.shapeMap[id]),
+          ).patch;
+          ctx.setTmpShapeMap(patch);
+          return;
+        }
+        case "pointerup": {
+          ctx.patchShapes(ctx.getTmpShapeMap());
+          return ctx.states.newSelectionHubState;
+        }
+        case "selection": {
+          return ctx.states.newSelectionHubState;
+        }
+        case "shape-updated": {
+          if (event.data.keys.has(line.id)) {
+            return ctx.states.newSelectionHubState;
+          }
+          break;
+        }
+        default:
+          return;
+      }
+    },
+    render: (ctx, renderCtx) => {
+      const style = ctx.getStyleScheme();
+      const scale = ctx.getScale();
+
+      const indexShape = subShapeComposite.shapeMap[option.shapeId];
+      if (indexShape.attachment) {
+        const lineAnchor = edgeInfo.lerpFn(indexShape.attachment.to.x);
+        applyStrokeStyle(renderCtx, { color: style.selectionPrimary, width: 2 * scale });
+        renderCtx.beginPath();
+        applyCurvePath(renderCtx, getLinePath(line), line.curves);
+        renderCtx.stroke();
+
+        const [localBounds, rotation] = subShapeComposite.getLocalSpace(indexShape);
+        const localC = getRectCenter(localBounds);
+        const localBoundsAtAnchor = moveRect(localBounds, { x: lineAnchor.x - localC.x, y: lineAnchor.y - localC.y });
+        applyLocalSpace(renderCtx, localBoundsAtAnchor, rotation, () => {
+          const toOriginVec = { x: -localBoundsAtAnchor.x, y: -localBoundsAtAnchor.y };
+          const localBoundsAtOrigin = moveRect(localBoundsAtAnchor, toOriginVec);
+          const anchorBounds = expandRectByScale(localBoundsAtOrigin, 2);
+          applyStrokeStyle(renderCtx, { color: style.selectionSecondaly, width: 2 * scale, dash: "long" });
+          renderCtx.beginPath();
+          renderCtx.rect(anchorBounds.x, anchorBounds.y, anchorBounds.width, anchorBounds.height);
+          renderCtx.stroke();
+
+          const latestIndexShape = ctx.getShapeComposite().mergedShapeMap[option.shapeId];
+          const guidlines: ISegment[] = [];
+          if (latestIndexShape.attachment?.anchor.x === 0.5) {
+            guidlines.push([
+              { x: anchorBounds.x + anchorBounds.width / 2, y: anchorBounds.y },
+              { x: anchorBounds.x + anchorBounds.width / 2, y: anchorBounds.y + anchorBounds.height },
+            ]);
+          }
+          if (latestIndexShape.attachment?.anchor.y === 0.5) {
+            guidlines.push([
+              { x: anchorBounds.x, y: anchorBounds.y + anchorBounds.height / 2 },
+              { x: anchorBounds.x + anchorBounds.width, y: anchorBounds.y + anchorBounds.height / 2 },
+            ]);
+          }
+          if (guidlines.length > 0) {
+            applyStrokeStyle(renderCtx, { color: style.selectionSecondaly, width: 2 * scale });
+            renderCtx.beginPath();
+            guidlines.forEach((seg) =>
+              applyPath(renderCtx, [
+                { x: seg[0].x, y: seg[0].y },
+                { x: seg[1].x, y: seg[1].y },
+              ]),
+            );
+            renderCtx.stroke();
+          }
+        });
+
+        applyFillStyle(renderCtx, { color: style.selectionSecondaly });
+        renderCtx.beginPath();
+        renderCtx.arc(lineAnchor.x, lineAnchor.y, 6 * scale, 0, TAU);
+        renderCtx.fill();
+      }
+    },
+  };
+}
diff --git a/src/composables/states/appCanvas/lines/movingOnLineState.ts b/src/composables/states/appCanvas/lines/movingOnLineState.ts
new file mode 100644
index 00000000..5958481d
--- /dev/null
+++ b/src/composables/states/appCanvas/lines/movingOnLineState.ts
@@ -0,0 +1,212 @@
+import type { AppCanvasState, AppCanvasStateContext } from "../core";
+import { applyFillStyle } from "../../../../utils/fillStyle";
+import { mapReduce, patchPipe, toList, toMap } from "../../../../utils/commons";
+import { getLinePath, isLineShape, LineShape } from "../../../../shapes/line";
+import { getClosestOutlineInfoOfLine, getLineEdgeInfo } from "../../../../shapes/utils/line";
+import { getDiagonalLengthOfRect, TAU } from "../../../../utils/geometry";
+import { add, getDistance, IVec2, sub } from "okageo";
+import {
+  getAttachmentAnchorPoint,
+  getEvenlySpacedLineAttachment,
+  getEvenlySpacedLineAttachmentBetweenFixedOnes,
+} from "../../../lineAttachmentHandler";
+import { Shape, ShapeAttachment } from "../../../../models";
+import { applyCurvePath } from "../../../../utils/renderer";
+import { applyStrokeStyle } from "../../../../utils/strokeStyle";
+import { getPatchAfterLayouts } from "../../../shapeLayoutHandler";
+import { COMMAND_EXAM_SRC } from "../commandExams";
+import { getNextShapeComposite } from "../../../shapeComposite";
+
+type Option = {
+  lineId: string;
+  shapeId: string;
+};
+
+/**
+ * This state is intended to be stacked up on "MovingShape" state.
+ */
+export function newMovingOnLineState(option: Option): AppCanvasState {
+  let keepMoving = false;
+  let lineAnchor: IVec2 | undefined;
+  let line: LineShape;
+  let edgeInfo: ReturnType<typeof getLineEdgeInfo>;
+  let anchorPointAtStart: IVec2;
+  let pointAtStart: IVec2;
+  let patchAtStart: { [id: string]: Partial<Shape> };
+  let evenlyAligned = false;
+
+  function storeAtStart(ctx: AppCanvasStateContext) {
+    pointAtStart = ctx.getCursorPoint();
+    patchAtStart = ctx.getTmpShapeMap();
+    const shapeComposite = ctx.getShapeComposite();
+    const nextShapeComposite = getNextShapeComposite(shapeComposite, { update: patchAtStart });
+    anchorPointAtStart = getAttachmentAnchorPoint(nextShapeComposite, nextShapeComposite.shapeMap[option.shapeId]);
+  }
+
+  return {
+    getLabel: () => "MovingOnLine",
+    onStart: (ctx) => {
+      ctx.setCommandExams([COMMAND_EXAM_SRC.DISABLE_SNAP, COMMAND_EXAM_SRC.EVENLY_SPACED]);
+
+      const shapeComposite = ctx.getShapeComposite();
+      const shapeMap = shapeComposite.shapeMap;
+      line = shapeMap[option.lineId] as LineShape;
+      if (!isLineShape(line)) {
+        keepMoving = true;
+        return { type: "break" };
+      }
+
+      edgeInfo = getLineEdgeInfo(line);
+      storeAtStart(ctx);
+    },
+    onEnd: (ctx) => {
+      ctx.setCommandExams();
+
+      if (keepMoving) {
+        ctx.setTmpShapeMap(mapReduce(ctx.getTmpShapeMap(), (patch) => ({ ...patch, attachment: undefined })));
+      } else {
+        ctx.setTmpShapeMap({});
+      }
+    },
+    handleEvent: (ctx, event) => {
+      switch (event.type) {
+        case "pointermove": {
+          if (event.data.ctrl) {
+            keepMoving = true;
+            return { type: "break" };
+          }
+
+          const shapeComposite = ctx.getShapeComposite();
+          const shapeMap = shapeComposite.shapeMap;
+          const latestShape = shapeComposite.mergedShapeMap[option.shapeId];
+
+          if (!event.data.shift) {
+            const latestAnchorP = getAttachmentAnchorPoint(shapeComposite, latestShape);
+            const [localBounds] = shapeComposite.getLocalSpace(latestShape);
+            if (getDistance(event.data.current, latestAnchorP) > getDiagonalLengthOfRect(localBounds)) {
+              keepMoving = true;
+              return { type: "break" };
+            }
+          }
+
+          const movedIndexAnchorP = add(anchorPointAtStart, sub(event.data.current, pointAtStart));
+          const closestInfo = getClosestOutlineInfoOfLine(line, movedIndexAnchorP, Infinity);
+          if (!closestInfo) {
+            keepMoving = true;
+            return { type: "break" };
+          }
+
+          const selectedShapeMap = mapReduce(ctx.getSelectedShapeIdMap(), (_, id) => shapeMap[id]);
+          const selectedShapes = toList(selectedShapeMap);
+          let attachInfoMap: Map<string, [to: IVec2]>;
+
+          if (event.data.shift) {
+            evenlyAligned = true;
+            const attachInfo = getEvenlySpacedLineAttachment(
+              shapeMap,
+              line.id,
+              Object.keys(selectedShapeMap),
+              option.shapeId,
+              movedIndexAnchorP,
+              edgeInfo,
+            );
+            attachInfoMap = attachInfo.attachInfoMap;
+            lineAnchor = attachInfo.attachedPoint;
+          } else {
+            evenlyAligned = false;
+            const baseTo = { x: closestInfo[1], y: 0 };
+            const baseToP = closestInfo[0];
+            lineAnchor = baseToP;
+            attachInfoMap = new Map([[option.shapeId, [baseTo]]]);
+
+            if (selectedShapes.length > 1) {
+              const infoMap = getEvenlySpacedLineAttachmentBetweenFixedOnes(
+                shapeMap,
+                line.id,
+                Object.keys(selectedShapeMap),
+                option.shapeId,
+                baseTo.x,
+              );
+              for (const [k, v] of infoMap) {
+                attachInfoMap.set(k, v);
+              }
+            }
+          }
+
+          const patch = patchPipe(
+            [
+              (src) => {
+                return mapReduce(src, (s) => {
+                  const info = attachInfoMap.get(s.id)!;
+                  const attachment: ShapeAttachment = {
+                    anchor: { x: 0.5, y: 0.5 },
+                    rotationType: "relative",
+                    rotation: 0,
+                    // Inherit both source and temporary attachment to preserve attachment state as much as possible.
+                    // => Attachment can be deleted in temporary data so "mergedShapeMap" doesn't work for this purpose.
+                    ...shapeMap[s.id].attachment,
+                    ...patchAtStart[s.id]?.attachment,
+                    id: line.id,
+                    to: info[0],
+                  };
+                  return { ...patchAtStart[s.id], attachment };
+                });
+              },
+              (_, currentPatch) => {
+                return getPatchAfterLayouts(shapeComposite, { update: currentPatch });
+              },
+            ],
+            toMap(Array.from(attachInfoMap.keys()).map((id) => shapeMap[id])),
+          );
+          ctx.setTmpShapeMap(patch.patch);
+
+          return;
+        }
+        case "pointerup": {
+          if (event.data.options.ctrl) return ctx.states.newSelectionHubState;
+
+          ctx.patchShapes(ctx.getTmpShapeMap());
+          return ctx.states.newSelectionHubState;
+        }
+        case "selection": {
+          return ctx.states.newSelectionHubState;
+        }
+        case "shape-updated": {
+          if (event.data.keys.has(line.id)) {
+            return ctx.states.newSelectionHubState;
+          }
+          break;
+        }
+        default:
+          return;
+      }
+    },
+    render: (ctx, renderCtx) => {
+      const style = ctx.getStyleScheme();
+      const scale = ctx.getScale();
+
+      if (lineAnchor) {
+        applyStrokeStyle(renderCtx, { color: style.selectionPrimary, width: 2 * scale });
+        renderCtx.beginPath();
+        applyCurvePath(renderCtx, getLinePath(line), line.curves);
+        renderCtx.stroke();
+
+        if (!evenlyAligned) {
+          const shapeComposite = ctx.getShapeComposite();
+          const latestShape = shapeComposite.mergedShapeMap[option.shapeId];
+          const latestAnchorP = getAttachmentAnchorPoint(shapeComposite, latestShape);
+          const [localBounds] = shapeComposite.getLocalSpace(latestShape);
+          applyStrokeStyle(renderCtx, { color: style.selectionSecondaly, width: 2 * scale, dash: "long" });
+          renderCtx.beginPath();
+          renderCtx.arc(latestAnchorP.x, latestAnchorP.y, getDiagonalLengthOfRect(localBounds), 0, TAU);
+          renderCtx.stroke();
+        }
+
+        applyFillStyle(renderCtx, { color: style.selectionSecondaly });
+        renderCtx.beginPath();
+        renderCtx.arc(lineAnchor.x, lineAnchor.y, 6 * scale, 0, TAU);
+        renderCtx.fill();
+      }
+    },
+  };
+}
diff --git a/src/composables/states/appCanvas/movingShapeOnLineHandler.ts b/src/composables/states/appCanvas/movingShapeOnLineHandler.ts
new file mode 100644
index 00000000..1a895bf3
--- /dev/null
+++ b/src/composables/states/appCanvas/movingShapeOnLineHandler.ts
@@ -0,0 +1,37 @@
+import { add, sub } from "okageo";
+import { isLineShape } from "../../../shapes/line";
+import { getAttachmentAnchorPoint } from "../../lineAttachmentHandler";
+import { PointerMoveEvent, TransitionValue } from "../core";
+import { AppCanvasStateContext } from "./core";
+import { newShapeComposite } from "../../shapeComposite";
+
+export function handlePointerMoveOnLine(
+  ctx: AppCanvasStateContext,
+  event: PointerMoveEvent,
+  movingIds: string[],
+): TransitionValue<AppCanvasStateContext> {
+  if (event.data.ctrl) return;
+  if (movingIds.length === 0) return;
+
+  const shapeComposite = ctx.getShapeComposite();
+  const movingIdSet = new Set(movingIds);
+  const subShapeComposite = newShapeComposite({
+    shapes: shapeComposite.shapes.filter((s) => movingIdSet.has(s.id)),
+    getStruct: shapeComposite.getShapeStruct,
+  });
+
+  const movingShape = subShapeComposite.findShapeAt(event.data.start, undefined, [], false, ctx.getScale());
+  if (!movingShape) return;
+
+  const anchorP = getAttachmentAnchorPoint(subShapeComposite, movingShape);
+  const diff = sub(event.data.current, event.data.start);
+  const movedAnchorP = add(anchorP, diff);
+
+  const targetLine = shapeComposite.findShapeAt(movedAnchorP, { shapeType: "line" }, movingIds, false, ctx.getScale());
+  if (!targetLine || !isLineShape(targetLine)) return;
+
+  return {
+    type: "stack-resume",
+    getState: () => ctx.states.newMovingOnLineState({ lineId: targetLine.id, shapeId: movingShape.id }),
+  };
+}
diff --git a/src/composables/states/appCanvas/movingShapeState.spec.ts b/src/composables/states/appCanvas/movingShapeState.spec.ts
index 832e67a9..6883a10f 100644
--- a/src/composables/states/appCanvas/movingShapeState.spec.ts
+++ b/src/composables/states/appCanvas/movingShapeState.spec.ts
@@ -72,6 +72,40 @@ describe("newMovingShapeState", () => {
       expect(ctx.setTmpShapeMap).toHaveBeenNthCalledWith(1, { a: { p: { x: 10, y: 0 } } });
       expect(result).toBe(undefined);
     });
+
+    test("should clear attachment when exists", () => {
+      const ctx = getMockCtx();
+      ctx.getShapeComposite = () =>
+        newShapeComposite({
+          shapes: [
+            createShape<RectangleShape>(getCommonStruct, "rectangle", {
+              id: "a",
+              width: 50,
+              height: 50,
+              attachment: {
+                id: "line",
+                to: { x: 0.5, y: 0 },
+                anchor: { x: 0.5, y: 0.5 },
+                rotationType: "relative",
+                rotation: 0,
+              },
+            }),
+          ],
+          getStruct: getCommonStruct,
+        });
+      let tmpMap: any = {};
+      ctx.setTmpShapeMap.mockImplementation((v) => {
+        tmpMap = v;
+      });
+      const target = newMovingShapeState();
+      target.onStart?.(ctx as any);
+      target.handleEvent(ctx as any, {
+        type: "pointermove",
+        data: { start: { x: 0, y: 0 }, current: { x: 10, y: 0 }, scale: 1 },
+      });
+      expect(ctx.setTmpShapeMap).toHaveBeenNthCalledWith(1, { a: { p: { x: 10, y: 0 } } });
+      expect(tmpMap["a"]).toHaveProperty("attachment");
+    });
   });
 
   describe("handle pointerup", () => {
diff --git a/src/composables/states/appCanvas/movingShapeState.ts b/src/composables/states/appCanvas/movingShapeState.ts
index 4199f4dd..5e18df55 100644
--- a/src/composables/states/appCanvas/movingShapeState.ts
+++ b/src/composables/states/appCanvas/movingShapeState.ts
@@ -18,6 +18,7 @@ import { getPatchAfterLayouts } from "../../shapeLayoutHandler";
 import { isLineLabelShape } from "../../../shapes/utils/lineLabel";
 import { mergeMap } from "../../../utils/commons";
 import { applyStrokeStyle } from "../../../utils/strokeStyle";
+import { handlePointerMoveOnLine } from "./movingShapeOnLineHandler";
 
 interface Option {
   boundingBox?: BoundingBox;
@@ -32,6 +33,7 @@ export function newMovingShapeState(option?: Option): AppCanvasState {
   let lineHandler: ConnectedLineDetouchHandler;
   let targetIds: string[];
   let connectionRenderer: ConnectionRenderer;
+  let beforeMove = true;
 
   return {
     getLabel: () => "MovingShape",
@@ -85,6 +87,10 @@ export function newMovingShapeState(option?: Option): AppCanvasState {
         excludeIdSet: new Set(targetIds),
       });
     },
+    onResume(ctx) {
+      beforeMove = true;
+      ctx.setCommandExams([COMMAND_EXAM_SRC.DISABLE_SNAP]);
+    },
     onEnd: (ctx) => {
       ctx.stopDragging();
       ctx.setTmpShapeMap({});
@@ -94,9 +100,13 @@ export function newMovingShapeState(option?: Option): AppCanvasState {
     handleEvent: (ctx, event) => {
       switch (event.type) {
         case "pointermove": {
+          beforeMove = false;
           const onLayoutResult = handlePointerMoveOnLayout(ctx, event, targetIds, option);
           if (onLayoutResult) return onLayoutResult;
 
+          const onLineResult = handlePointerMoveOnLine(ctx, event, targetIds);
+          if (onLineResult) return onLineResult;
+
           const d = sub(event.data.current, event.data.start);
           snappingResult = event.data.ctrl ? undefined : shapeSnapping.test(moveRect(movingRect, d));
           const translate = snappingResult ? add(d, snappingResult.diff) : d;
@@ -106,7 +116,10 @@ export function newMovingShapeState(option?: Option): AppCanvasState {
           const shapeMap = ctx.getShapeComposite().shapeMap;
           let patchMap = targetIds.reduce<{ [id: string]: Partial<Shape> }>((m, id) => {
             const s = shapeMap[id];
-            if (s) m[id] = shapeComposite.transformShape(s, affine);
+            if (s) {
+              m[id] = shapeComposite.transformShape(s, affine);
+              if (s.attachment) m[id].attachment = undefined;
+            }
             return m;
           }, {});
 
@@ -133,8 +146,10 @@ export function newMovingShapeState(option?: Option): AppCanvasState {
       }
     },
     render: (ctx, renderCtx) => {
-      const shapeComposite = ctx.getShapeComposite();
+      // Avoid rendering in this case to prevent flickering
+      if (beforeMove) return;
 
+      const shapeComposite = ctx.getShapeComposite();
       const scale = ctx.getScale();
       const style = ctx.getStyleScheme();
       applyStrokeStyle(renderCtx, { color: style.selectionPrimary, width: style.selectionLineWidth * scale });
diff --git a/src/composables/states/appCanvas/multipleSelectedState.ts b/src/composables/states/appCanvas/multipleSelectedState.ts
index ec0d0021..96b83964 100644
--- a/src/composables/states/appCanvas/multipleSelectedState.ts
+++ b/src/composables/states/appCanvas/multipleSelectedState.ts
@@ -8,7 +8,6 @@ import { newRotatingState } from "./rotatingState";
 import { newDuplicatingShapesState } from "./duplicatingShapesState";
 import { CONTEXT_MENU_ITEM_SRC, getMenuItemsForSelectedShapes } from "./contextMenuItems";
 import { canGroupShapes, findBetterShapeAt, getRotatedTargetBounds } from "../../shapeComposite";
-import { newMovingHubState } from "./movingHubState";
 import { ShapeSelectionScope, isSameShapeSelectionScope } from "../../../shapes/core";
 import { defineIntransientState } from "./intransientState";
 import { newPointerDownEmptyState } from "./pointerDownEmptyState";
@@ -108,7 +107,7 @@ export const newMultipleSelectedState = defineIntransientState((option?: Option)
                   case "rotation":
                     return () => newRotatingState({ boundingBox });
                   case "move":
-                    return () => newMovingHubState({ boundingBox });
+                    return () => ctx.states.newMovingHubState({ boundingBox });
                 }
               }
 
@@ -134,7 +133,7 @@ export const newMultipleSelectedState = defineIntransientState((option?: Option)
                   if (event.data.options.alt) {
                     return newDuplicatingShapesState;
                   } else {
-                    return () => newMovingHubState({ boundingBox });
+                    return () => ctx.states.newMovingHubState({ boundingBox });
                   }
                 } else {
                   ctx.selectShape(shape.id, false);
diff --git a/src/composables/states/appCanvas/rotatingState.spec.ts b/src/composables/states/appCanvas/rotatingState.spec.ts
index 9f6a0fe9..18eb574c 100644
--- a/src/composables/states/appCanvas/rotatingState.spec.ts
+++ b/src/composables/states/appCanvas/rotatingState.spec.ts
@@ -7,6 +7,8 @@ import { newBoundingBox } from "../../boundingBox";
 import { getRectPoints } from "../../../utils/geometry";
 import { newShapeComposite } from "../../shapeComposite";
 import { createInitialAppCanvasStateContext } from "../../../contexts/AppCanvasContext";
+import { Shape } from "../../../models";
+import { LineShape } from "../../../shapes/line";
 
 function getMockCtx() {
   return {
@@ -47,5 +49,46 @@ describe("newRotatingState", () => {
       });
       expect(ctx.setTmpShapeMap).toHaveBeenCalled();
     });
+
+    test("should update attachment.rotation when exists", () => {
+      const ctx = getMockCtx();
+      ctx.getShapeComposite = () =>
+        newShapeComposite({
+          shapes: [
+            createShape<RectangleShape>(getCommonStruct, "rectangle", {
+              id: "a",
+              width: 50,
+              height: 50,
+              attachment: {
+                id: "line",
+                to: { x: 0, y: 0 },
+                anchor: { x: 0, y: 0 },
+                rotationType: "relative",
+                rotation: Math.PI / 2,
+              },
+            }),
+            createShape<LineShape>(getCommonStruct, "line", { id: "line", q: { x: 100, y: 100 } }),
+          ],
+          getStruct: getCommonStruct,
+        });
+      let data: { [id: string]: Partial<Shape> } = {};
+      ctx.setTmpShapeMap.mockImplementation((v) => {
+        data = v;
+      });
+      const boundingBox = newBoundingBox({
+        path: getRectPoints({ x: 0, y: 0, width: 50, height: 50 }),
+      });
+      const target = newRotatingState({
+        boundingBox,
+      });
+
+      target.onStart?.(ctx as any);
+      target.handleEvent(ctx as any, {
+        type: "pointermove",
+        data: { start: { x: 50, y: 25 }, current: { x: 25, y: 50 }, scale: 1 },
+      });
+      expect(data["a"].rotation).toBeCloseTo(-Math.PI * 0.75);
+      expect(data["a"].attachment?.rotation).toBeCloseTo(Math.PI);
+    });
   });
 });
diff --git a/src/composables/states/appCanvas/rotatingState.ts b/src/composables/states/appCanvas/rotatingState.ts
index da602509..0ade8e0b 100644
--- a/src/composables/states/appCanvas/rotatingState.ts
+++ b/src/composables/states/appCanvas/rotatingState.ts
@@ -13,6 +13,7 @@ import { mergeMap } from "../../../utils/commons";
 import { getPatchAfterLayouts } from "../../shapeLayoutHandler";
 import { COMMAND_EXAM_SRC } from "./commandExams";
 import { handleCommonWheel } from "../commons";
+import { getAttachmentByUpdatingRotation } from "../../../shapes";
 
 interface Option {
   boundingBox: BoundingBox;
@@ -63,7 +64,12 @@ export function newRotatingState(option: Option): AppCanvasState {
           let patchMap = targets.reduce<{ [id: string]: Partial<Shape> }>((m, s) => {
             const shape = shapeMap[s.id];
             if (shape) {
-              m[s.id] = shapeComposite.transformShape(shape, resizingAffine);
+              const patch = shapeComposite.transformShape(shape, resizingAffine);
+              m[s.id] = patch;
+              const attachment = getAttachmentByUpdatingRotation(shape, patch.rotation);
+              if (attachment) {
+                m[s.id].attachment = attachment;
+              }
             }
             return m;
           }, {});
diff --git a/src/composables/states/appCanvas/singleSelectedByPointerOnState.spec.ts b/src/composables/states/appCanvas/singleSelectedByPointerOnState.spec.ts
index 95ad4592..832e9447 100644
--- a/src/composables/states/appCanvas/singleSelectedByPointerOnState.spec.ts
+++ b/src/composables/states/appCanvas/singleSelectedByPointerOnState.spec.ts
@@ -78,6 +78,41 @@ describe("newSingleSelectedByPointerOnState", () => {
       }) as any;
       expect(result2?.().getLabel(), "moved within threshold but time passes beyond threshold").toBe("MovingHub");
     });
+
+    test("should move to MovingAnchorOnLine instead of MovingHub state when shift-key held the shape is attached", () => {
+      const ctx = getMockCtx();
+      ctx.getShapeComposite = () =>
+        newShapeComposite({
+          shapes: [
+            createShape(getCommonStruct, "line", { id: "line" }),
+            createShape<RectangleShape>(getCommonStruct, "rectangle", {
+              id: "a",
+              attachment: {
+                id: "line",
+                to: { x: 0.2, y: 0 },
+                anchor: { x: 0.5, y: 0.5 },
+                rotation: 0,
+                rotationType: "relative",
+              },
+            }),
+          ],
+          getStruct: getCommonStruct,
+        });
+      const target = newSingleSelectedByPointerOnState();
+      target.onStart?.(ctx as any);
+
+      const result0 = target.handleEvent(ctx as any, {
+        type: "pointermove",
+        data: { start: { x: 0, y: 0 }, current: { x: 10, y: 0 }, scale: 1 },
+      }) as any;
+      expect(result0?.().getLabel(), "moved beyond threshold").toBe("MovingHub");
+
+      const result1 = target.handleEvent(ctx as any, {
+        type: "pointermove",
+        data: { start: { x: 0, y: 0 }, current: { x: 10, y: 0 }, scale: 1, shift: true },
+      }) as any;
+      expect(result1?.().getLabel(), "moved beyond threshold").toBe("MovingAnchorOnLine");
+    });
   });
 
   describe("handle pointerup", () => {
diff --git a/src/composables/states/appCanvas/singleSelectedByPointerOnState.ts b/src/composables/states/appCanvas/singleSelectedByPointerOnState.ts
index 4249572c..f57b2537 100644
--- a/src/composables/states/appCanvas/singleSelectedByPointerOnState.ts
+++ b/src/composables/states/appCanvas/singleSelectedByPointerOnState.ts
@@ -1,6 +1,5 @@
 import type { AppCanvasState } from "./core";
 import { getDistance } from "okageo";
-import { newMovingHubState } from "./movingHubState";
 import { startTextEditingIfPossible } from "./commons";
 
 interface Option {
@@ -33,7 +32,16 @@ export function newSingleSelectedByPointerOnState(option?: Option): AppCanvasSta
             return ctx.states.newSelectionHubState;
           }
 
-          return newMovingHubState;
+          if (shapeComposite.attached(shape) && event.data.shift) {
+            const lineId = shape.attachment.id;
+            return () =>
+              ctx.states.newMovingAnchorOnLineState({
+                lineId,
+                shapeId: shape.id,
+              });
+          } else {
+            return ctx.states.newMovingHubState;
+          }
         }
         case "pointerup": {
           if (option?.concurrent && Date.now() - timestamp < 200) {
diff --git a/src/composables/states/appCanvas/singleSelectedHandlerState.ts b/src/composables/states/appCanvas/singleSelectedHandlerState.ts
index 3822341e..d92973a1 100644
--- a/src/composables/states/appCanvas/singleSelectedHandlerState.ts
+++ b/src/composables/states/appCanvas/singleSelectedHandlerState.ts
@@ -14,9 +14,12 @@ import { newPointerDownEmptyState } from "./pointerDownEmptyState";
 import { AppCanvasState, AppCanvasStateContext } from "./core";
 import { Shape } from "../../../models";
 import { newDummyHandler, ShapeHandler } from "../../shapeHandlers/core";
-import { newMovingHubState } from "./movingHubState";
 import { newSmartBranchHandler, SmartBranchHandler } from "../../smartBranchHandler";
 import { canAttachSmartBranch } from "../../../shapes";
+import { getAttachmentAnchorPoint } from "../../lineAttachmentHandler";
+import { applyFillStyle } from "../../../utils/fillStyle";
+import { TAU } from "../../../utils/geometry";
+import { scaleGlobalAlpha } from "../../../utils/renderer";
 
 interface SingleSelectedHandlerStateGetters<S extends Shape, H extends ShapeHandler> {
   getTargetShape: () => S;
@@ -62,7 +65,11 @@ export function defineSingleSelectedHandlerState<S extends Shape, H extends Shap
           locked: targetShape.locked,
         });
 
-        if (!shapeComposite.hasParent(targetShape) && canAttachSmartBranch(ctx.getShapeStruct, targetShape)) {
+        if (
+          !shapeComposite.hasParent(targetShape) &&
+          !shapeComposite.attached(targetShape) &&
+          canAttachSmartBranch(ctx.getShapeStruct, targetShape)
+        ) {
           smartBranchHandler = newSmartBranchHandler({
             getShapeComposite: ctx.getShapeComposite,
             targetId: targetShape.id,
@@ -100,7 +107,7 @@ export function defineSingleSelectedHandlerState<S extends Shape, H extends Shap
                     case "rotation":
                       return () => newRotatingState({ boundingBox });
                     case "move":
-                      return () => newMovingHubState({ boundingBox });
+                      return () => ctx.states.newMovingHubState({ boundingBox });
                   }
                 }
 
@@ -193,9 +200,22 @@ export function defineSingleSelectedHandlerState<S extends Shape, H extends Shap
         return src.handleEvent(ctx, event);
       },
       render: (ctx, renderCtx) => {
-        boundingBox.render(renderCtx, ctx.getStyleScheme(), ctx.getScale());
-        smartBranchHandler?.render(renderCtx, ctx.getStyleScheme(), ctx.getScale());
-        shapeHandler.render(renderCtx, ctx.getStyleScheme(), ctx.getScale());
+        const style = ctx.getStyleScheme();
+        const scale = ctx.getScale();
+        boundingBox.render(renderCtx, style, scale);
+        smartBranchHandler?.render(renderCtx, style, scale);
+        shapeHandler.render(renderCtx, style, scale);
+
+        const shapeComposite = ctx.getShapeComposite();
+        if (shapeComposite.attached(targetShape)) {
+          const anchorP = getAttachmentAnchorPoint(shapeComposite, targetShape);
+          scaleGlobalAlpha(renderCtx, 0.7, () => {
+            applyFillStyle(renderCtx, { color: style.selectionSecondaly });
+            renderCtx.beginPath();
+            renderCtx.arc(anchorP.x, anchorP.y, 6 * scale, 0, TAU);
+            renderCtx.fill();
+          });
+        }
 
         src.render?.(ctx, renderCtx);
       },
diff --git a/src/composables/states/appCanvas/tree/treeRootSelectedState.ts b/src/composables/states/appCanvas/tree/treeRootSelectedState.ts
index 1837d1f8..d144c9d3 100644
--- a/src/composables/states/appCanvas/tree/treeRootSelectedState.ts
+++ b/src/composables/states/appCanvas/tree/treeRootSelectedState.ts
@@ -13,7 +13,6 @@ import { applyStrokeStyle } from "../../../../utils/strokeStyle";
 import { BoundingBox, newBoundingBox } from "../../../boundingBox";
 import { newResizingState } from "../resizingState";
 import { newRotatingState } from "../rotatingState";
-import { newMovingHubState } from "../movingHubState";
 import { defineIntransientState } from "../intransientState";
 import { newPointerDownEmptyState } from "../pointerDownEmptyState";
 import { getPatchByLayouts } from "../../../shapeLayoutHandler";
@@ -167,7 +166,7 @@ export const newTreeRootSelectedState = defineIntransientState(() => {
                   case "rotation":
                     return () => newRotatingState({ boundingBox });
                   case "move":
-                    return () => newMovingHubState({ boundingBox });
+                    return () => ctx.states.newMovingHubState({ boundingBox });
                 }
               }
 
diff --git a/src/models/index.ts b/src/models/index.ts
index b8425e6a..0049896f 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -30,6 +30,7 @@ export interface Shape extends Entity {
   clipping?: boolean; // When this is set true, it's prioritized over all child shapes.
   cropClipBorder?: boolean; // This is prioritized over all child shapes.
   alpha?: number; // "undefined" should mean 1.
+  attachment?: ShapeAttachment;
 }
 
 export type ClipRule = "out" | "in";
@@ -100,6 +101,14 @@ export interface ArcCurveControl {
   d: IVec2;
 }
 
+export interface ShapeAttachment {
+  id: string; // id of target shape that is attached to
+  to: IVec2; // relative rete within the bounds of the target
+  anchor: IVec2; // relative rate within the bounds of attaching shape
+  rotationType: "relative" | "absolute";
+  rotation: number; // this value becomes either relative or absolute based on "rotationType"
+}
+
 export interface BoxAlign {
   hAlign?: "left" | "center" | "right"; // "left" should be default
   vAlign?: "top" | "center" | "bottom"; // "top" should be default
diff --git a/src/shapes/core.ts b/src/shapes/core.ts
index 3d42d36a..fb97ed25 100644
--- a/src/shapes/core.ts
+++ b/src/shapes/core.ts
@@ -30,6 +30,7 @@ export interface ShapeContext {
 export interface ShapeSelectionScope {
   parentId?: string; // When undefined, the scope refers strict root scope ignoring transparency
   scopeKey?: string;
+  shapeType?: string;
 }
 
 export interface ShapeStruct<T extends Shape> {
@@ -129,6 +130,7 @@ export function createBaseShape(arg: Partial<Shape> = {}): Shape {
     clipping: arg.clipping,
     cropClipBorder: arg.cropClipBorder,
     alpha: arg.alpha,
+    attachment: arg.attachment,
   };
 }
 
diff --git a/src/shapes/index.spec.ts b/src/shapes/index.spec.ts
index e575b7b5..05cd8cbe 100644
--- a/src/shapes/index.spec.ts
+++ b/src/shapes/index.spec.ts
@@ -4,6 +4,7 @@ import {
   canHaveText,
   canHaveTextPadding,
   createShape,
+  getAttachmentByUpdatingRotation,
   getCommonStruct,
   getShapeTextBounds,
   getTextRangeRect,
@@ -25,6 +26,7 @@ import { struct as unknownStruct } from "./unknown";
 import { EllipseShape } from "./ellipse";
 import { createFillStyle } from "../utils/fillStyle";
 import { COLORS } from "../utils/color";
+import { ShapeAttachment } from "../models";
 
 describe("getCommonStruct", () => {
   test("should return the struct of the type", () => {
@@ -356,6 +358,63 @@ describe("remapShapeIds", () => {
     expect(result.shapes[1].id).toBe("new_1");
     expect(result.shapes[1].parentId).toBe("new_0");
   });
+
+  describe("attachment", () => {
+    const a = createShape(getCommonStruct, "rectangle", {
+      id: "a",
+      attachment: {
+        id: "line",
+        to: { x: 0, y: 0 },
+        anchor: { x: 0, y: 0 },
+        rotationType: "relative",
+        rotation: 0,
+      },
+    });
+    const b = createShape(getCommonStruct, "rectangle", {
+      id: "b",
+      attachment: {
+        id: "line",
+        to: { x: 0, y: 0 },
+        anchor: { x: 0, y: 0 },
+        rotationType: "relative",
+        rotation: 0,
+      },
+    });
+    const line = createShape(getCommonStruct, "line", {
+      id: "line",
+    });
+
+    test("should remap attachment", () => {
+      let count = -1;
+      const result = remapShapeIds(getCommonStruct, [a, b, line], () => {
+        count++;
+        return `new_${count}`;
+      });
+      expect(result.shapes[0].attachment?.id).toBe("new_2");
+      expect(result.shapes[1].attachment?.id).toBe("new_2");
+    });
+
+    test("should remove attachment that aren't found in the new ids when removeNotFound is true", () => {
+      let count = -1;
+      const result0 = remapShapeIds(
+        getCommonStruct,
+        [a, b],
+        () => {
+          count++;
+          return `new_${count}`;
+        },
+        true,
+      );
+      expect(result0.shapes[0].attachment).toBe(undefined);
+      expect(result0.shapes[1].attachment).toBe(undefined);
+
+      const result1 = remapShapeIds(getCommonStruct, [a, b], () => {
+        count++;
+        return `new_${count}`;
+      });
+      expect(result1.shapes[0].attachment?.id).toBe("line");
+    });
+  });
 });
 
 describe("refreshShapeRelations", () => {
@@ -372,6 +431,28 @@ describe("refreshShapeRelations", () => {
     const result1 = refreshShapeRelations(getCommonStruct, [text], new Set(["line"]));
     expect(result1).toEqual({});
   });
+
+  test("should clear attachment when target shapes aren't available", () => {
+    const a = createShape(getCommonStruct, "rectangle", {
+      id: "a",
+      attachment: {
+        id: "line",
+        to: { x: 0, y: 0 },
+        anchor: { x: 0, y: 0 },
+        rotationType: "relative",
+        rotation: 0,
+      },
+    });
+
+    const result0 = refreshShapeRelations(getCommonStruct, [a], new Set([]));
+    expect(result0).toEqual({
+      a: { attachment: undefined },
+    });
+    expect(result0.a).toHaveProperty("attachment");
+
+    const result1 = refreshShapeRelations(getCommonStruct, [a], new Set(["line"]));
+    expect(result1).toEqual({});
+  });
 });
 
 describe("switchShapeType", () => {
@@ -408,14 +489,37 @@ describe("switchShapeType", () => {
     expect(result0.ry).toBeCloseTo(100);
   });
 
-  test("should return switched shape: keep fill and stroke", () => {
+  test("should return switched shape: keep shared properties", () => {
     const rect = createShape<RectangleShape>(getCommonStruct, "rectangle", {
       id: "a",
       fill: createFillStyle({ color: COLORS.GRAY_1 }),
       stroke: createStrokeStyle({ color: COLORS.YELLOW }),
+      alpha: 0.3,
     });
     const result0 = switchShapeType(getCommonStruct, rect, "ellipse") as EllipseShape;
     expect(result0.fill).toEqual(rect.fill);
     expect(result0.stroke).toEqual(rect.stroke);
+    expect(result0.alpha).toBe(0.3);
+  });
+});
+
+describe("getAttachmentByUpdatingRotation", () => {
+  test("should return attachment for new rotation if it's passed", () => {
+    const attachment: ShapeAttachment = {
+      id: "line",
+      to: { x: 0.2, y: 0 },
+      anchor: { x: 0, y: 0 },
+      rotationType: "relative",
+      rotation: 0.2,
+    };
+    const shape = createShape(getCommonStruct, "rectangle", {
+      id: "a",
+      rotation: 0.1,
+      attachment,
+    });
+    expect(getAttachmentByUpdatingRotation(shape)).toEqual(undefined);
+    expect(getAttachmentByUpdatingRotation(shape, 0.1)).toEqual(undefined);
+    expect(getAttachmentByUpdatingRotation(shape, 0.3)).toEqual({ ...attachment, rotation: 0.4 });
+    expect(getAttachmentByUpdatingRotation(shape, -0.1)).toEqual({ ...attachment, rotation: 0 });
   });
 });
diff --git a/src/shapes/index.ts b/src/shapes/index.ts
index d54cc071..0a4ea7ef 100644
--- a/src/shapes/index.ts
+++ b/src/shapes/index.ts
@@ -1,13 +1,6 @@
 import { AffineMatrix, IRectangle, IVec2, getOuterRectangle, getRectCenter, multiAffines } from "okageo";
-import { BoxPadding, CommonStyle, Shape, Size } from "../models";
-import {
-  GetShapeStruct as _GetShapeStruct,
-  hasFillStyle,
-  hasStrokeStyle,
-  ShapeContext,
-  ShapeSnappingLines,
-  TextContainer,
-} from "./core";
+import { BoxPadding, CommonStyle, Shape, ShapeAttachment, Size } from "../models";
+import { GetShapeStruct as _GetShapeStruct, ShapeContext, ShapeSnappingLines, TextContainer } from "./core";
 import { struct as unknownStruct } from "./unknown";
 import * as geometry from "../utils/geometry";
 import { ImageStore } from "../composables/imageStore";
@@ -15,6 +8,7 @@ import { getPaddingRect } from "../utils/boxPadding";
 import { SVGElementInfo } from "../utils/svgElements";
 import { SHAPE_COMMON_STRUCTS } from "./commonStructs";
 import { generateKeyBetween } from "../utils/findex";
+import { isObjectEmpty } from "../utils/commons";
 
 export type GetShapeStruct = _GetShapeStruct;
 
@@ -280,9 +274,16 @@ export function remapShapeIds(
     let patch: Partial<Shape> = {};
     if (s.parentId) {
       if (oldToNewMap[s.parentId]) {
-        patch = { parentId: oldToNewMap[s.parentId] };
+        patch.parentId = oldToNewMap[s.parentId];
       } else if (removeNotFound) {
-        patch = { parentId: undefined };
+        patch.parentId = undefined;
+      }
+    }
+    if (s.attachment?.id) {
+      if (oldToNewMap[s.attachment.id]) {
+        patch.attachment = { ...s.attachment, id: oldToNewMap[s.attachment.id] };
+      } else if (removeNotFound) {
+        patch.attachment = undefined;
       }
     }
 
@@ -305,16 +306,21 @@ export function refreshShapeRelations(
   const ret: { [id: string]: Partial<Shape> } = {};
 
   shapes.forEach((s) => {
+    let patch: Partial<Shape> = {};
     if (s.parentId && !availableIdSet.has(s.parentId)) {
-      ret[s.id] = { parentId: undefined };
+      patch.parentId = undefined;
+    }
+    if (s.attachment && !availableIdSet.has(s.attachment.id)) {
+      patch.attachment = undefined;
     }
 
     const struct = getStruct(s.type);
-    if (!struct.refreshRelation) return;
+    if (struct.refreshRelation) {
+      patch = { ...patch, ...struct.refreshRelation(s, availableIdSet) };
+    }
 
-    const patch = struct.refreshRelation(s, availableIdSet);
-    if (patch) {
-      ret[s.id] = ret[s.id] ? { ...ret[s.id], ...patch } : patch;
+    if (!isObjectEmpty(patch)) {
+      ret[s.id] = patch;
     }
   });
 
@@ -368,21 +374,26 @@ export function isRectangularOptimizedSegment(getStruct: GetShapeStruct, shape:
  * Make sure both src and dist shapes have compatibility before calling this function.
  */
 export function switchShapeType(getStruct: GetShapeStruct, src: Shape, type: string): Shape {
-  const dist = createShape(getStruct, type, { id: src.id, findex: src.findex, parentId: src.parentId });
-  const distRect = getWrapperRect(getStruct, dist);
+  const defaultDist = createShape(getStruct, type, { id: src.id, findex: src.findex, parentId: src.parentId });
+  const defaultDistRect = getWrapperRect(getStruct, defaultDist);
   const srcRect = getWrapperRect(getStruct, { ...src, rotation: 0 });
 
-  const resizePatch = resizeShape(getStruct, dist, [
-    srcRect.width / distRect.width,
+  const resizePatch = resizeShape(getStruct, defaultDist, [
+    srcRect.width / defaultDistRect.width,
     0,
     0,
-    srcRect.height / distRect.height,
+    srcRect.height / defaultDistRect.height,
     srcRect.x,
     srcRect.y,
   ]);
 
-  const fill = hasFillStyle(src) ? { fill: src.fill } : {};
-  const stroke = hasStrokeStyle(src) ? { stroke: src.stroke } : {};
+  const dist = createShape(getStruct, type, src);
+  return { ...dist, ...resizePatch, rotation: src.rotation };
+}
 
-  return { ...dist, ...resizePatch, rotation: src.rotation, ...fill, ...stroke };
+export function getAttachmentByUpdatingRotation(shape: Shape, rotation?: number): ShapeAttachment | undefined {
+  if (rotation === undefined || !shape.attachment) return;
+  const v = rotation - shape.rotation;
+  if (v === 0) return;
+  return { ...shape.attachment, rotation: geometry.normalizeRadian(shape.attachment.rotation + v) };
 }
diff --git a/src/shapes/utils/line.spec.ts b/src/shapes/utils/line.spec.ts
index 1d31fa9b..539d2cca 100644
--- a/src/shapes/utils/line.spec.ts
+++ b/src/shapes/utils/line.spec.ts
@@ -1,8 +1,15 @@
 import { describe, test, expect } from "vitest";
-import { getNakedLineShape, patchByFliplineH, patchByFliplineV } from "./line";
+import {
+  getClosestOutlineInfoOfLine,
+  getLineEdgeInfo,
+  getNakedLineShape,
+  patchByFliplineH,
+  patchByFliplineV,
+} from "./line";
 import { createShape, getCommonStruct } from "..";
 import { LineShape } from "../line";
 import { createLineHead } from "../lineHeads";
+import { struct as lineStruct } from "../line";
 
 describe("getNakedLineShape", () => {
   test("should return the line with minimum styles", () => {
@@ -89,3 +96,36 @@ describe("patchByFliplineV", () => {
     expect(result.q).toEqual({ x: 100, y: 0 });
   });
 });
+
+describe("getClosestOutlineInfoOfLine", () => {
+  test("should return the closest outline info if exists", () => {
+    const line0 = lineStruct.create({ q: { x: 100, y: 0 } });
+    expect(getClosestOutlineInfoOfLine(line0, { x: 40, y: 11 }, 10)).toEqual(undefined);
+    expect(getClosestOutlineInfoOfLine(line0, { x: 40, y: 9 }, 10)).toEqual([{ x: 40, y: 0 }, 0.4]);
+  });
+
+  test("should regard bezier segment", () => {
+    const line0 = lineStruct.create({ q: { x: 100, y: 0 }, curves: [{ c1: { x: 20, y: 20 }, c2: { x: 80, y: 20 } }] });
+    const result0 = getClosestOutlineInfoOfLine(line0, { x: 40, y: 9 }, 10);
+    expect(result0?.[0]).toEqualPoint({ x: 39.70631055859311, y: 14.55409224224895 });
+    expect(result0?.[1]).toBeCloseTo(0.4);
+  });
+
+  test("should regard arc segment", () => {
+    const line0 = lineStruct.create({ q: { x: 100, y: 0 }, curves: [{ d: { x: 0, y: 20 } }] });
+    const result0 = getClosestOutlineInfoOfLine(line0, { x: 40, y: 18 }, 10);
+    expect(result0?.[0]).toEqualPoint({ x: 39.90006665667716, y: 19.293045251336395 });
+    expect(result0?.[1]).toBeCloseTo(0.4081723);
+  });
+});
+
+describe("getLineEdgeInfo", () => {
+  test("should return lerp function based on distance", () => {
+    const line0 = lineStruct.create({
+      q: { x: 200, y: 0 },
+      curves: [{ c1: { x: 50, y: 150 }, c2: { x: 150, y: 150 } }],
+    });
+    const target = getLineEdgeInfo(line0);
+    expect(target.lerpFn(80 / target.totalLength)).toEqualPoint({ x: 34.99598644197986, y: 71.72119092860004 });
+  });
+});
diff --git a/src/shapes/utils/line.ts b/src/shapes/utils/line.ts
index c4b8052d..3c26a9dc 100644
--- a/src/shapes/utils/line.ts
+++ b/src/shapes/utils/line.ts
@@ -1,6 +1,20 @@
-import { getRectCenter, getSymmetry, isSame, IVec2 } from "okageo";
-import { LineShape, struct } from "../line";
+import {
+  getApproPoints,
+  getDistance,
+  getPathPointAtLengthFromStructs,
+  getPedal,
+  getPolylineLength,
+  getRectCenter,
+  getSymmetry,
+  isOnSeg,
+  isSame,
+  IVec2,
+  PathLengthStruct,
+} from "okageo";
+import { getEdges, LineShape, struct } from "../line";
 import { isBezieirControl } from "../../utils/path";
+import { BEZIER_APPROX_SIZE, getCurveLerpFn, getSegments, ISegment } from "../../utils/geometry";
+import { pickMinItem } from "../../utils/commons";
 
 /**
  * Returns the line with minimum styles.
@@ -67,3 +81,74 @@ function patchByFlipline(line: LineShape, flipFn: (v: IVec2) => IVec2): Partial<
 
   return ret;
 }
+
+export function getClosestOutlineInfoOfLine(
+  line: LineShape,
+  p: IVec2,
+  threshold: number,
+): [p: IVec2, rate: number] | undefined {
+  const edgeInfo = getLineEdgeInfo(line);
+  const edges = edgeInfo.edges;
+
+  const values = edges
+    .map<[number, number, IVec2]>((edge, i) => {
+      let pedal = getPedal(p, edge);
+      if (!isOnSeg(pedal, edge)) {
+        pedal = getDistance(edge[0], p) <= getDistance(edge[1], p) ? edge[0] : edge[1];
+      }
+      return [i, getDistance(p, pedal), pedal];
+    })
+    .filter((v) => v[1] < threshold);
+  const closestValue = pickMinItem(values, (v) => v[1]);
+  if (!closestValue) return;
+
+  const closestEdgeIndex = closestValue[0];
+  const closestPedal = closestValue[2];
+
+  let d = 0;
+  for (let i = 0; i < closestEdgeIndex; i++) {
+    d += edgeInfo.edgeLengths[i];
+  }
+  d += getDistance(edges[closestEdgeIndex][0], closestPedal);
+  const rate = d / edgeInfo.totalLength;
+  return [edgeInfo.lerpFn(rate), rate];
+}
+
+function getLinePathStruce(line: LineShape): PathLengthStruct[] {
+  const edges = getEdges(line);
+  return edges.map((edge, i) => {
+    const curve = line.curves?.[i];
+    const lerpFn = getCurveLerpFn(edge, curve);
+    let points: IVec2[] = edge;
+    let approxEdges = [edge];
+    if (curve) {
+      points = getApproPoints(lerpFn, BEZIER_APPROX_SIZE);
+      approxEdges = getSegments(points);
+    }
+    return { lerpFn, length: getPolylineLength(points), curve: !!curve, approxEdges };
+  });
+}
+
+export function getLineEdgeInfo(line: LineShape): {
+  edges: ISegment[];
+  edgeLengths: number[];
+  totalLength: number;
+  lerpFn: (rate: number) => IVec2;
+} {
+  const pathStructs = getLinePathStruce(line);
+  const approxEdges = pathStructs.flatMap<ISegment>((s) => {
+    if (s.curve) {
+      return getSegments(getApproPoints(s.lerpFn, BEZIER_APPROX_SIZE));
+    } else {
+      return [[s.lerpFn(0), s.lerpFn(1)]];
+    }
+  });
+  const edgeLengths = approxEdges.map((edge) => getDistance(edge[0], edge[1]));
+  const totalLength = pathStructs.reduce((n, s) => n + s.length, 0);
+  return {
+    edges: approxEdges,
+    edgeLengths,
+    totalLength,
+    lerpFn: (rate) => getPathPointAtLengthFromStructs(pathStructs, totalLength * rate),
+  };
+}
diff --git a/src/shapes/utils/lineLabel.ts b/src/shapes/utils/lineLabel.ts
index 002b3744..4450a197 100644
--- a/src/shapes/utils/lineLabel.ts
+++ b/src/shapes/utils/lineLabel.ts
@@ -1,70 +1,43 @@
-import {
-  IVec2,
-  getApproPoints,
-  getDistance,
-  getPathPointAtLengthFromStructs,
-  getPedal,
-  getPolylineLength,
-  getRectCenter,
-  isOnSeg,
-} from "okageo";
-import { LineShape, getLinePath, isCurveLine, isLineShape } from "../line";
+import { getRectCenter } from "okageo";
+import { LineShape, isLineShape } from "../line";
 import { TextShape, isTextShape, patchPosition } from "../text";
-import { BEZIER_APPROX_SIZE, ISegment, getCurveLerpFn, getRotateFn, getSegments } from "../../utils/geometry";
-import { pickMinItem } from "../../utils/commons";
+import { getRotateFn } from "../../utils/geometry";
 import { Shape } from "../../models";
 import { ShapeComposite } from "../../composables/shapeComposite";
+import { getClosestOutlineInfoOfLine, getLineEdgeInfo } from "./line";
 
 export function attachLabelToLine(line: LineShape, label: TextShape, margin = 0): Partial<TextShape> {
   const labelBounds = { x: label.p.x, y: label.p.y, width: label.width, height: label.height };
   const labelCenter = getRectCenter(labelBounds);
   const rotateFn = getRotateFn(-label.rotation, labelCenter);
 
-  const edgeInfo = getEdgeInfo(line, rotateFn);
-  // const edges = getEdges(line).map(([a, b]) => [rotateFn(a), rotateFn(b)]);
-  const edges = edgeInfo.edges;
-
-  const values = edges.map<[number, number, IVec2]>((edge, i) => {
-    let pedal = getPedal(labelCenter, edge);
-    if (!isOnSeg(pedal, edge)) {
-      pedal = getDistance(edge[0], labelCenter) <= getDistance(edge[1], labelCenter) ? edge[0] : edge[1];
-    }
-    return [i, getDistance(labelCenter, pedal), pedal];
-  });
-  const closestValue = pickMinItem(values, (v) => v[1])!;
-  const closestEdgeIndex = closestValue[0];
-  const closestPedal = closestValue[2];
+  const closestInfo = getClosestOutlineInfoOfLine(line, labelCenter, Infinity)!;
+  const [closestPedal, rate] = closestInfo;
 
   let patch: Partial<TextShape> = {};
 
-  if (closestPedal.x <= labelBounds.x) {
+  const rotatedClosestPedal = rotateFn(closestPedal);
+  if (rotatedClosestPedal.x <= labelBounds.x) {
     patch.hAlign = "left";
-  } else if (labelBounds.x + labelBounds.width <= closestPedal.x) {
+  } else if (labelBounds.x + labelBounds.width <= rotatedClosestPedal.x) {
     patch.hAlign = "right";
   } else {
     patch.hAlign = "center";
   }
 
-  if (closestPedal.y <= labelBounds.y) {
+  if (rotatedClosestPedal.y <= labelBounds.y) {
     patch.vAlign = "top";
-  } else if (labelBounds.y + labelBounds.height <= closestPedal.y) {
+  } else if (labelBounds.y + labelBounds.height <= rotatedClosestPedal.y) {
     patch.vAlign = "bottom";
   } else {
     patch.vAlign = "center";
   }
 
-  const dList = edgeInfo.edgeLengths;
-  const totalD = edgeInfo.totalLength;
-  let d = 0;
-  for (let i = 0; i < closestEdgeIndex; i++) {
-    d += dList[i];
-  }
-  d += getDistance(edges[closestEdgeIndex][0], closestPedal);
-  const rate = d / totalD;
   patch.lineAttached = rate;
 
+  const edgeInfo = getLineEdgeInfo(line);
   const distP = edgeInfo.lerpFn?.(rate) ?? closestPedal;
-  patch = { ...patch, ...patchPosition({ ...label, ...patch }, rotateFn(distP, true), margin) };
+  patch = { ...patch, ...patchPosition({ ...label, ...patch }, distP, margin) };
 
   const ret = { ...patch };
   if (ret.hAlign === label.hAlign) {
@@ -80,48 +53,6 @@ export function attachLabelToLine(line: LineShape, label: TextShape, margin = 0)
   return ret;
 }
 
-function getEdgeInfo(
-  line: LineShape,
-  rotateFn: ReturnType<typeof getRotateFn>,
-): {
-  edges: ISegment[];
-  edgeLengths: number[];
-  totalLength: number;
-  lerpFn?: (rate: number) => IVec2;
-} {
-  const edges = getSegments(getLinePath(line).map((p) => rotateFn(p)));
-  if (!isCurveLine(line)) {
-    const edgeLengths = edges.map((edge) => getDistance(edge[0], edge[1]));
-    return {
-      edges,
-      edgeLengths,
-      totalLength: edgeLengths.reduce((n, l) => n + l, 0),
-    };
-  }
-
-  const pathStructs = edges.map((edge, i) => {
-    const curve = line.curves[i];
-    const lerpFn = getCurveLerpFn(edge, curve);
-    let points: IVec2[] = edge;
-    let edges = [edge];
-    if (curve) {
-      points = getApproPoints(lerpFn, BEZIER_APPROX_SIZE);
-      edges = getSegments(points);
-    }
-    return { lerpFn, length: getPolylineLength(points), edges };
-  });
-
-  const approxEdges = pathStructs.flatMap((s) => s.edges);
-  const edgeLengths = approxEdges.map((edge) => getDistance(edge[0], edge[1]));
-  const totalLength = pathStructs.reduce((n, s) => n + s.length, 0);
-  return {
-    edges: approxEdges,
-    edgeLengths,
-    totalLength,
-    lerpFn: (rate) => getPathPointAtLengthFromStructs(pathStructs, totalLength * rate),
-  };
-}
-
 export function isLineLabelShape(shapeComposite: ShapeComposite, shape: Shape): shape is TextShape {
   const parent = shapeComposite.shapeMap[shape.parentId ?? ""];
   return !!parent && isLineShape(parent) && isTextShape(shape) && shape.lineAttached !== undefined;
diff --git a/src/utils/commons.spec.ts b/src/utils/commons.spec.ts
index 34d5c1ba..60ff07aa 100644
--- a/src/utils/commons.spec.ts
+++ b/src/utils/commons.spec.ts
@@ -335,3 +335,30 @@ describe("fillArray", () => {
     expect(target.fillArray(2, 0, arr)).not.toBe(arr);
   });
 });
+
+describe("slideSubArray", () => {
+  test("should slide the sub array to the position", () => {
+    const src = [0, 1, 2, 3, 4];
+    expect(target.slideSubArray(src, [0, 2], -1)).toEqual([0, 1, 2, 3, 4]);
+    expect(target.slideSubArray(src, [0, 2], 0)).toEqual([0, 1, 2, 3, 4]);
+    expect(target.slideSubArray(src, [0, 2], 1)).toEqual([2, 0, 1, 3, 4]);
+    expect(target.slideSubArray(src, [0, 2], 2)).toEqual([2, 3, 0, 1, 4]);
+    expect(target.slideSubArray(src, [0, 2], 3)).toEqual([2, 3, 4, 0, 1]);
+    expect(target.slideSubArray(src, [0, 2], 4)).toEqual([2, 3, 4, 0, 1]);
+    expect(target.slideSubArray(src, [0, 2], 5)).toEqual([2, 3, 4, 0, 1]);
+
+    expect(target.slideSubArray(src, [3, 2], -1)).toEqual([3, 4, 0, 1, 2]);
+    expect(target.slideSubArray(src, [3, 2], 0)).toEqual([3, 4, 0, 1, 2]);
+    expect(target.slideSubArray(src, [3, 2], 1)).toEqual([0, 3, 4, 1, 2]);
+    expect(target.slideSubArray(src, [3, 2], 2)).toEqual([0, 1, 3, 4, 2]);
+    expect(target.slideSubArray(src, [3, 2], 3)).toEqual([0, 1, 2, 3, 4]);
+    expect(target.slideSubArray(src, [3, 2], 4)).toEqual([0, 1, 2, 3, 4]);
+    expect(target.slideSubArray(src, [3, 2], 5)).toEqual([0, 1, 2, 3, 4]);
+
+    expect(target.slideSubArray(src, [0, 3], 1)).toEqual([3, 0, 1, 2, 4]);
+    expect(target.slideSubArray(src, [0, 3], 2)).toEqual([3, 4, 0, 1, 2]);
+    expect(target.slideSubArray(src, [0, 3], 3)).toEqual([3, 4, 0, 1, 2]);
+    expect(target.slideSubArray(src, [0, 3], 4)).toEqual([3, 4, 0, 1, 2]);
+    expect(target.slideSubArray(src, [0, 3], 5)).toEqual([3, 4, 0, 1, 2]);
+  });
+});
diff --git a/src/utils/commons.ts b/src/utils/commons.ts
index dd96c3c6..19f680ed 100644
--- a/src/utils/commons.ts
+++ b/src/utils/commons.ts
@@ -1,3 +1,5 @@
+import { clamp } from "okageo";
+
 export function toKeyMap<T extends object>(list: T[], key: string | number): { [key: string]: T } {
   return list.reduce<{ [key: string]: T }>((p, c: any) => {
     const k = c[key];
@@ -150,12 +152,12 @@ export function pickMinItem<T>(src: T[], getValue: (item: T) => number): T | und
 
 export function splitList<T>(
   list: T[],
-  checkfn: (item: T) => boolean = (item) => !!item,
+  checkfn: (item: T, i: number) => boolean = (item) => !!item,
 ): [trueList: T[], falseList: T[]] {
   const t: T[] = [];
   const f: T[] = [];
-  list.forEach((item) => {
-    if (checkfn(item)) {
+  list.forEach((item, i) => {
+    if (checkfn(item, i)) {
       t.push(item);
     } else {
       f.push(item);
@@ -199,3 +201,11 @@ export function fillArray<T>(count: number, initialValue: T, src: T[] = []): T[]
   }
   return ret;
 }
+
+export function slideSubArray<T>(src: T[], range: [from: number, count: number], to: number): T[] {
+  const rangeFrom = range[0];
+  const rangeTo = rangeFrom + range[1] - 1;
+  const [sub, others] = splitList(src, (_, i) => rangeFrom <= i && i <= rangeTo);
+  others.splice(clamp(0, src.length, to), 0, ...sub);
+  return others;
+}
diff --git a/src/utils/geometry.spec.ts b/src/utils/geometry.spec.ts
index d7ae1c45..a4349c8a 100644
--- a/src/utils/geometry.spec.ts
+++ b/src/utils/geometry.spec.ts
@@ -78,6 +78,10 @@ import {
   isSameValue,
   signedCeil,
   getIntRectFromFloatRect,
+  getRelativeRateWithinRect,
+  getRelativePointWithinRect,
+  getPointLerpSlope,
+  getDiagonalLengthOfRect,
 } from "./geometry";
 import { IRectangle, IVec2, applyAffine, getDistance, getPedal, rotate } from "okageo";
 
@@ -1842,3 +1846,73 @@ describe("getIntRectFromFloatRect", () => {
     });
   });
 });
+
+describe("getRelativeRateWithinRect", () => {
+  test("should return relative rate within the rectangle", () => {
+    expect(getRelativeRateWithinRect({ x: 10, y: 20, width: 100, height: 200 }, { x: 50, y: 50 })).toEqualPoint({
+      x: 0.4,
+      y: 0.15,
+    });
+  });
+  test("should regard zero sized rectangle", () => {
+    expect(getRelativeRateWithinRect({ x: 10, y: 20, width: 0, height: 200 }, { x: 50, y: 50 })).toEqualPoint({
+      x: 10,
+      y: 20,
+    });
+    expect(getRelativeRateWithinRect({ x: 10, y: 20, width: 100, height: 0 }, { x: 50, y: 50 })).toEqualPoint({
+      x: 10,
+      y: 20,
+    });
+  });
+  test("should clamp within 0-1 when the flag is set true", () => {
+    expect(getRelativeRateWithinRect({ x: 0, y: 0, width: 100, height: 200 }, { x: -50, y: 250 }, true)).toEqualPoint({
+      x: 0,
+      y: 1,
+    });
+  });
+});
+
+describe("getRelativePointWithinRect", () => {
+  test("should return relative point within the rectangle", () => {
+    expect(getRelativePointWithinRect({ x: 10, y: 20, width: 100, height: 200 }, { x: 0.5, y: 0.5 })).toEqualPoint({
+      x: 60,
+      y: 120,
+    });
+  });
+  test("should clamp within the rect when the flag is set true", () => {
+    expect(
+      getRelativePointWithinRect({ x: 10, y: 20, width: 100, height: 200 }, { x: -0.5, y: 1.5 }, true),
+    ).toEqualPoint({
+      x: 10,
+      y: 220,
+    });
+  });
+});
+
+describe("getPointLerpSlope", () => {
+  test("should return slope of the lerp function", () => {
+    const lerpFn = getCurveLerpFn(
+      [
+        { x: 0, y: 0 },
+        { x: 0, y: 100 },
+      ],
+      { d: { x: 0, y: 50 } },
+    );
+    expect(getPointLerpSlope(lerpFn, 0)).toBeCloseTo(Math.PI);
+    expect(getPointLerpSlope(lerpFn, 0.5)).toBeCloseTo(Math.PI / 2);
+    expect(getPointLerpSlope(lerpFn, 1)).toBeCloseTo(0);
+  });
+
+  test("should evaluate backward and forward points to derive slope", () => {
+    const lerpFn = (t: number) => (t < 0.5 ? { x: 100 * t, y: 0 } : { x: 100, y: 100 * t });
+    expect(getPointLerpSlope(lerpFn, 0.4)).toBeCloseTo(0);
+    expect(getPointLerpSlope(lerpFn, 0.5)).toBeCloseTo(Math.PI / 4);
+    expect(getPointLerpSlope(lerpFn, 0.6)).toBeCloseTo(Math.PI / 2);
+  });
+});
+
+describe("getDiagonalLengthOfRect", () => {
+  test("should return wrapper radisu of the rectangle", () => {
+    expect(getDiagonalLengthOfRect({ x: 0, y: 0, width: 3, height: 4 })).toBeCloseTo(5);
+  });
+});
diff --git a/src/utils/geometry.ts b/src/utils/geometry.ts
index c4532f10..fd479171 100644
--- a/src/utils/geometry.ts
+++ b/src/utils/geometry.ts
@@ -1336,3 +1336,25 @@ export function getIntRectFromFloatRect(src: IRectangle): IRectangle {
   const height = bottom - y;
   return { x, y, width, height };
 }
+
+export function getRelativeRateWithinRect(rect: IRectangle, p: IVec2, shouldClamp = false): IVec2 {
+  if (Math.abs(rect.width * rect.height) < MINVALUE) return { x: rect.x, y: rect.y };
+
+  const rawRate = { x: (p.x - rect.x) / rect.width, y: (p.y - rect.y) / rect.height };
+  return shouldClamp ? { x: clamp(0, 1, rawRate.x), y: clamp(0, 1, rawRate.y) } : rawRate;
+}
+
+export function getRelativePointWithinRect(rect: IRectangle, rate: IVec2, shouldClamp = false): IVec2 {
+  const adjustedRate = shouldClamp ? { x: clamp(0, 1, rate.x), y: clamp(0, 1, rate.y) } : rate;
+  return { x: rect.x + rect.width * adjustedRate.x, y: rect.y + rect.height * adjustedRate.y };
+}
+
+export function getPointLerpSlope(lerpFn: (v: number) => IVec2, t: number, d = 0.0005): number {
+  return getRadian(lerpFn(Math.min(1, t + d)), lerpFn(Math.max(0, t - d)));
+}
+
+export function getDiagonalLengthOfRect(rect: IRectangle): number {
+  const dx = rect.width;
+  const dy = rect.height;
+  return Math.sqrt(dx * dx + dy * dy);
+}