@dashboardity/layout-core 1.0.0

package/README.md

@@ -0,0 +1 @@
+# layout-core

package/dist/layout.d.ts

@@ -0,0 +1,35 @@
+export type GridItem = {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export type LayoutAction = {
+    type: "add";
+    item: GridItem;
+} | {
+    type: "move";
+    id: string;
+    x: number;
+    y: number;
+} | {
+    type: "resize";
+    id: string;
+    w: number;
+    h: number;
+} | {
+    type: "remove";
+    id: string;
+};
+export type ComputeLayoutInput = {
+    items: GridItem[];
+    action: LayoutAction;
+    columns: number;
+};
+export declare const collides: (a: GridItem, b: GridItem) => boolean;
+export declare const getCollidingItems: (item: GridItem, items: GridItem[]) => GridItem[];
+export declare const pushDown: (item: GridItem, items: GridItem[], columns: number) => GridItem[];
+export declare const packUp: (items: GridItem[], removedId: string, columns: number) => GridItem[];
+export declare const computeLayout: (input: ComputeLayoutInput) => GridItem[];
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GACpD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,YAAY,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,GAAG,QAAQ,EAAE,GAAG,QAAQ,KAAG,OAKnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,MAAM,QAAQ,EACd,OAAO,QAAQ,EAAE,KAChB,QAAQ,EAAoD,CAAC;AAYhE,eAAO,MAAM,QAAQ,GACnB,MAAM,QAAQ,EACd,OAAO,QAAQ,EAAE,EACjB,SAAS,MAAM,KACd,QAAQ,EAkCV,CAAC;AAGF,eAAO,MAAM,MAAM,GACjB,OAAO,QAAQ,EAAE,EACjB,WAAW,MAAM,EACjB,SAAS,MAAM,KACd,QAAQ,EAiBV,CAAC;AAcF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,KAAG,QAAQ,EAoCjE,CAAC"}

package/dist/layout.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeLayout = exports.packUp = exports.pushDown = exports.getCollidingItems = exports.collides = void 0;
+// collides: 충돌 여부 확인
+const collides = (a, b) => {
+    if (a.id === b.id)
+        return false;
+    const xOverlap = a.x < b.x + b.w && b.x < a.x + a.w;
+    const yOverlap = a.y < b.y + b.h && b.y < a.y + a.h;
+    return xOverlap && yOverlap;
+};
+exports.collides = collides;
+// getCollidingItems: 충돌 여부 확인
+const getCollidingItems = (item, items) => items.filter((other) => (0, exports.collides)(item, other));
+exports.getCollidingItems = getCollidingItems;
+// clampItem: 그리드 아이템 위치 제한
+const clampItem = (item, columns) => {
+    const x = Math.max(0, Math.min(item.x, columns - 1));
+    const w = Math.max(1, Math.min(item.w, columns - x));
+    const y = Math.max(0, item.y);
+    const h = Math.max(1, item.h);
+    return { ...item, x, y, w, h };
+};
+// pushDown: 그리드 아이템 이동
+const pushDown = (item, items, columns) => {
+    const placed = clampItem(item, columns);
+    const others = items.filter((i) => i.id !== placed.id);
+    const moved = new Map();
+    moved.set(placed.id, placed);
+    const sortedOthers = [...others].sort((a, b) => {
+        if (a.y !== b.y)
+            return a.y - b.y;
+        return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+    });
+    for (const other of sortedOthers) {
+        let current = { ...other };
+        const allPlaced = () => [
+            placed,
+            ...Array.from(moved.values()).filter((i) => i.id !== placed.id),
+        ];
+        for (;;) {
+            const othersPlaced = allPlaced().filter((i) => i.id !== current.id);
+            const collision = othersPlaced.find((p) => (0, exports.collides)(current, p));
+            if (!collision) {
+                moved.set(current.id, current);
+                break;
+            }
+            current = { ...current, y: collision.y + collision.h };
+        }
+    }
+    const result = [placed];
+    for (const o of sortedOthers) {
+        result.push(moved.get(o.id));
+    }
+    return result;
+};
+exports.pushDown = pushDown;
+// packUp: 그리드 아이템 제거
+const packUp = (items, removedId, columns) => {
+    const removed = items.find((i) => i.id === removedId);
+    if (!removed)
+        return items;
+    const rest = items.filter((i) => i.id !== removedId);
+    const removedBottom = removed.y + removed.h;
+    const removedLeft = removed.x;
+    const removedRight = removed.x + removed.w;
+    const overlapsColumn = (item) => item.x < removedRight && item.x + item.w > removedLeft;
+    const isBelowRemoved = (item) => item.y >= removedBottom;
+    return rest.map((item) => {
+        if (!overlapsColumn(item) || !isBelowRemoved(item))
+            return item;
+        return { ...item, y: Math.max(0, item.y - removed.h) };
+    });
+};
+exports.packUp = packUp;
+// findMinNonCollidingY: 충돌 없는 최소 y 찾기
+const findMinNonCollidingY = (item, items) => {
+    let y = item.y;
+    for (;;) {
+        const candidate = { ...item, y };
+        const hits = (0, exports.getCollidingItems)(candidate, items);
+        if (hits.length === 0)
+            return y;
+        y = Math.max(...hits.map((c) => c.y + c.h));
+    }
+};
+// computeLayout: 그리드 레이아웃 계산
+const computeLayout = (input) => {
+    const { items, action, columns } = input;
+    switch (action.type) {
+        case "add": {
+            const added = clampItem(action.item, columns);
+            const existing = items.filter((i) => i.id !== added.id);
+            const y = findMinNonCollidingY(added, existing);
+            return [...existing, { ...added, y }];
+        }
+        case "move": {
+            const target = items.find((i) => i.id === action.id);
+            if (!target)
+                return items;
+            // 위치만 변경, 크기(w,h)는 유지. x는 그리드 밖으로 나가지 않도록 clamp
+            const x = Math.max(0, Math.min(action.x, columns - target.w));
+            const y = Math.max(0, action.y);
+            const moved = { ...target, x, y };
+            const others = items.filter((i) => i.id !== action.id);
+            return (0, exports.pushDown)(moved, others, columns);
+        }
+        case "resize": {
+            const target = items.find((i) => i.id === action.id);
+            if (!target)
+                return items;
+            const w = Math.max(1, Math.min(action.w, columns - target.x));
+            const h = Math.max(1, action.h);
+            const resized = { ...target, w, h };
+            const others = items.filter((i) => i.id !== action.id);
+            return (0, exports.pushDown)(resized, others, columns);
+        }
+        case "remove":
+            return (0, exports.packUp)(items, action.id, columns);
+        default: {
+            const _ = action;
+            return items;
+        }
+    }
+};
+exports.computeLayout = computeLayout;

package/dist/layout.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layout.test.d.ts.map

package/dist/layout.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.test.d.ts","sourceRoot":"","sources":["../src/layout.test.ts"],"names":[],"mappings":""}

package/dist/layout.test.js

@@ -0,0 +1,156 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * layout 엔진 단위 테스트
+ */
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_test_1 = require("node:test");
+const layout_js_1 = require("./layout.js");
+const cols = 12;
+(0, node_test_1.describe)("collides", () => {
+    (0, node_test_1.it)("x만 겹치고 y 안 겹치면 충돌 아님", () => {
+        const a = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+        const b = { id: "b", x: 0, y: 2, w: 6, h: 2 };
+        node_assert_1.default.strictEqual((0, layout_js_1.collides)(a, b), false);
+    });
+    (0, node_test_1.it)("x 겹치고 y 겹치면 충돌", () => {
+        const a = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+        const b = { id: "b", x: 4, y: 1, w: 4, h: 2 };
+        node_assert_1.default.strictEqual((0, layout_js_1.collides)(a, b), true);
+    });
+    (0, node_test_1.it)("x 인접(y만 겹침)이면 충돌 아님", () => {
+        const a = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+        const b = { id: "b", x: 6, y: 0, w: 6, h: 2 };
+        node_assert_1.default.strictEqual((0, layout_js_1.collides)(a, b), false);
+    });
+    (0, node_test_1.it)("같은 id는 충돌 아님", () => {
+        const a = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+        node_assert_1.default.strictEqual((0, layout_js_1.collides)(a, { ...a }), false);
+    });
+});
+(0, node_test_1.describe)("pushDown", () => {
+    (0, node_test_1.it)("충돌 시 한 개 아래로 밀기", () => {
+        const items = [{ id: "a", x: 0, y: 0, w: 6, h: 2 }];
+        const placed = { id: "b", x: 0, y: 0, w: 6, h: 2 };
+        const out = (0, layout_js_1.pushDown)(placed, items, cols);
+        node_assert_1.default.strictEqual(out.length, 2);
+        const a = out.find((i) => i.id === "a");
+        const b = out.find((i) => i.id === "b");
+        node_assert_1.default.strictEqual(b.y, 0);
+        node_assert_1.default.strictEqual(a.y, 2);
+    });
+    (0, node_test_1.it)("연쇄 밀기", () => {
+        const items = [
+            { id: "a", x: 0, y: 0, w: 6, h: 2 },
+            { id: "b", x: 0, y: 2, w: 6, h: 2 },
+        ];
+        const placed = { id: "c", x: 0, y: 2, w: 6, h: 2 };
+        const out = (0, layout_js_1.pushDown)(placed, items, cols);
+        const a = out.find((i) => i.id === "a");
+        const b = out.find((i) => i.id === "b");
+        const c = out.find((i) => i.id === "c");
+        node_assert_1.default.strictEqual(a.y, 0);
+        node_assert_1.default.strictEqual(c.y, 2);
+        node_assert_1.default.strictEqual(b.y, 4);
+    });
+});
+(0, node_test_1.describe)("packUp", () => {
+    (0, node_test_1.it)("제거 후 같은 열 아래 아이템만 위로 당김", () => {
+        const items = [
+            { id: "a", x: 0, y: 0, w: 6, h: 2 },
+            { id: "b", x: 0, y: 2, w: 6, h: 2 },
+            { id: "c", x: 0, y: 4, w: 6, h: 2 },
+        ];
+        const out = (0, layout_js_1.packUp)(items, "b", cols);
+        node_assert_1.default.strictEqual(out.length, 2);
+        const a = out.find((i) => i.id === "a");
+        const c = out.find((i) => i.id === "c");
+        node_assert_1.default.strictEqual(a.y, 0);
+        node_assert_1.default.strictEqual(c.y, 2); // 4 - 2 = 2
+    });
+    (0, node_test_1.it)("열이 안 겹치면 이동 없음", () => {
+        const items = [
+            { id: "a", x: 0, y: 0, w: 6, h: 2 },
+            { id: "b", x: 6, y: 2, w: 6, h: 2 },
+        ];
+        const out = (0, layout_js_1.packUp)(items, "a", cols);
+        const b = out.find((i) => i.id === "b");
+        node_assert_1.default.strictEqual(b.y, 2);
+    });
+});
+(0, node_test_1.describe)("computeLayout", () => {
+    (0, node_test_1.it)("add: 기존 아이템 안 움직이고 새 아이템만 최소 y에 배치", () => {
+        const items = [{ id: "a", x: 0, y: 0, w: 6, h: 2 }];
+        const out = (0, layout_js_1.computeLayout)({
+            items,
+            action: { type: "add", item: { id: "b", x: 0, y: 0, w: 6, h: 2 } },
+            columns: cols,
+        });
+        node_assert_1.default.strictEqual(out.length, 2);
+        const a = out.find((i) => i.id === "a");
+        const b = out.find((i) => i.id === "b");
+        node_assert_1.default.strictEqual(a.y, 0);
+        node_assert_1.default.strictEqual(b.y, 2);
+    });
+    (0, node_test_1.it)("move: 대상만 이동, 충돌 시 아래로 밀기", () => {
+        const items = [
+            { id: "a", x: 0, y: 0, w: 6, h: 2 },
+            { id: "b", x: 0, y: 2, w: 6, h: 2 },
+        ];
+        const out = (0, layout_js_1.computeLayout)({
+            items,
+            action: { type: "move", id: "b", x: 0, y: 0 },
+            columns: cols,
+        });
+        const a = out.find((i) => i.id === "a");
+        const b = out.find((i) => i.id === "b");
+        node_assert_1.default.strictEqual(b.y, 0);
+        node_assert_1.default.strictEqual(a.y, 2);
+    });
+    (0, node_test_1.it)("resize: w/h 변경, 충돌 시 아래로 밀기", () => {
+        const items = [
+            { id: "a", x: 0, y: 0, w: 6, h: 2 },
+            { id: "b", x: 0, y: 2, w: 6, h: 2 },
+        ];
+        const out = (0, layout_js_1.computeLayout)({
+            items,
+            action: { type: "resize", id: "b", w: 6, h: 4 },
+            columns: cols,
+        });
+        const b = out.find((i) => i.id === "b");
+        node_assert_1.default.strictEqual(b.h, 4);
+    });
+    (0, node_test_1.it)("remove: 제거 후 pack-up", () => {
+        const items = [
+            { id: "a", x: 0, y: 0, w: 6, h: 2 },
+            { id: "b", x: 0, y: 2, w: 6, h: 2 },
+        ];
+        const out = (0, layout_js_1.computeLayout)({
+            items,
+            action: { type: "remove", id: "b" },
+            columns: cols,
+        });
+        node_assert_1.default.strictEqual(out.length, 1);
+        node_assert_1.default.strictEqual(out[0].id, "a");
+    });
+    (0, node_test_1.it)("동일 입력 → 동일 출력 (deterministic)", () => {
+        const items = [
+            { id: "a", x: 0, y: 0, w: 6, h: 2 },
+            { id: "b", x: 0, y: 2, w: 6, h: 2 },
+        ];
+        const out1 = (0, layout_js_1.computeLayout)({
+            items,
+            action: { type: "move", id: "a", x: 0, y: 2 },
+            columns: cols,
+        });
+        const out2 = (0, layout_js_1.computeLayout)({
+            items,
+            action: { type: "move", id: "a", x: 0, y: 2 },
+            columns: cols,
+        });
+        node_assert_1.default.deepStrictEqual(out1, out2);
+    });
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@dashboardity/layout-core",
+  "version": "1.0.0",
+  "author": "Kim. MinHyuck <kimminhyug29@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "grid",
+    "layout",
+    "engine",
+    "pure",
+    "coordinate",
+    "computation"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kimminhyug/layout-core"
+  },
+  "description": "Grafana-style grid layout engine (pure coordinate computation)",
+  "main": "dist/layout.js",
+  "types": "dist/layout.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "node --test dist/layout.test.js"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "typescript": "^5.3.0"
+  }
+}

package/src/layout.test.ts

@@ -0,0 +1,171 @@
+/**
+ * layout 엔진 단위 테스트
+ */
+import assert from "node:assert";
+import { describe, it } from "node:test";
+import {
+  collides,
+  computeLayout,
+  packUp,
+  pushDown,
+  type GridItem,
+} from "./layout.js";
+
+const cols = 12;
+
+describe("collides", () => {
+  it("x만 겹치고 y 안 겹치면 충돌 아님", () => {
+    const a: GridItem = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+    const b: GridItem = { id: "b", x: 0, y: 2, w: 6, h: 2 };
+    assert.strictEqual(collides(a, b), false);
+  });
+
+  it("x 겹치고 y 겹치면 충돌", () => {
+    const a: GridItem = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+    const b: GridItem = { id: "b", x: 4, y: 1, w: 4, h: 2 };
+    assert.strictEqual(collides(a, b), true);
+  });
+
+  it("x 인접(y만 겹침)이면 충돌 아님", () => {
+    const a: GridItem = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+    const b: GridItem = { id: "b", x: 6, y: 0, w: 6, h: 2 };
+    assert.strictEqual(collides(a, b), false);
+  });
+
+  it("같은 id는 충돌 아님", () => {
+    const a: GridItem = { id: "a", x: 0, y: 0, w: 6, h: 2 };
+    assert.strictEqual(collides(a, { ...a }), false);
+  });
+});
+
+describe("pushDown", () => {
+  it("충돌 시 한 개 아래로 밀기", () => {
+    const items: GridItem[] = [{ id: "a", x: 0, y: 0, w: 6, h: 2 }];
+    const placed: GridItem = { id: "b", x: 0, y: 0, w: 6, h: 2 };
+    const out = pushDown(placed, items, cols);
+    assert.strictEqual(out.length, 2);
+    const a = out.find((i) => i.id === "a")!;
+    const b = out.find((i) => i.id === "b")!;
+    assert.strictEqual(b.y, 0);
+    assert.strictEqual(a.y, 2);
+  });
+
+  it("연쇄 밀기", () => {
+    const items: GridItem[] = [
+      { id: "a", x: 0, y: 0, w: 6, h: 2 },
+      { id: "b", x: 0, y: 2, w: 6, h: 2 },
+    ];
+    const placed: GridItem = { id: "c", x: 0, y: 2, w: 6, h: 2 };
+    const out = pushDown(placed, items, cols);
+    const a = out.find((i) => i.id === "a")!;
+    const b = out.find((i) => i.id === "b")!;
+    const c = out.find((i) => i.id === "c")!;
+    assert.strictEqual(a.y, 0);
+    assert.strictEqual(c.y, 2);
+    assert.strictEqual(b.y, 4);
+  });
+});
+
+describe("packUp", () => {
+  it("제거 후 같은 열 아래 아이템만 위로 당김", () => {
+    const items: GridItem[] = [
+      { id: "a", x: 0, y: 0, w: 6, h: 2 },
+      { id: "b", x: 0, y: 2, w: 6, h: 2 },
+      { id: "c", x: 0, y: 4, w: 6, h: 2 },
+    ];
+    const out = packUp(items, "b", cols);
+    assert.strictEqual(out.length, 2);
+    const a = out.find((i) => i.id === "a")!;
+    const c = out.find((i) => i.id === "c")!;
+    assert.strictEqual(a.y, 0);
+    assert.strictEqual(c.y, 2); // 4 - 2 = 2
+  });
+
+  it("열이 안 겹치면 이동 없음", () => {
+    const items: GridItem[] = [
+      { id: "a", x: 0, y: 0, w: 6, h: 2 },
+      { id: "b", x: 6, y: 2, w: 6, h: 2 },
+    ];
+    const out = packUp(items, "a", cols);
+    const b = out.find((i) => i.id === "b")!;
+    assert.strictEqual(b.y, 2);
+  });
+});
+
+describe("computeLayout", () => {
+  it("add: 기존 아이템 안 움직이고 새 아이템만 최소 y에 배치", () => {
+    const items: GridItem[] = [{ id: "a", x: 0, y: 0, w: 6, h: 2 }];
+    const out = computeLayout({
+      items,
+      action: { type: "add", item: { id: "b", x: 0, y: 0, w: 6, h: 2 } },
+      columns: cols,
+    });
+    assert.strictEqual(out.length, 2);
+    const a = out.find((i) => i.id === "a")!;
+    const b = out.find((i) => i.id === "b")!;
+    assert.strictEqual(a.y, 0);
+    assert.strictEqual(b.y, 2);
+  });
+
+  it("move: 대상만 이동, 충돌 시 아래로 밀기", () => {
+    const items: GridItem[] = [
+      { id: "a", x: 0, y: 0, w: 6, h: 2 },
+      { id: "b", x: 0, y: 2, w: 6, h: 2 },
+    ];
+    const out = computeLayout({
+      items,
+      action: { type: "move", id: "b", x: 0, y: 0 },
+      columns: cols,
+    });
+    const a = out.find((i) => i.id === "a")!;
+    const b = out.find((i) => i.id === "b")!;
+    assert.strictEqual(b.y, 0);
+    assert.strictEqual(a.y, 2);
+  });
+
+  it("resize: w/h 변경, 충돌 시 아래로 밀기", () => {
+    const items: GridItem[] = [
+      { id: "a", x: 0, y: 0, w: 6, h: 2 },
+      { id: "b", x: 0, y: 2, w: 6, h: 2 },
+    ];
+    const out = computeLayout({
+      items,
+      action: { type: "resize", id: "b", w: 6, h: 4 },
+      columns: cols,
+    });
+    const b = out.find((i) => i.id === "b")!;
+    assert.strictEqual(b.h, 4);
+  });
+
+  it("remove: 제거 후 pack-up", () => {
+    const items: GridItem[] = [
+      { id: "a", x: 0, y: 0, w: 6, h: 2 },
+      { id: "b", x: 0, y: 2, w: 6, h: 2 },
+    ];
+    const out = computeLayout({
+      items,
+      action: { type: "remove", id: "b" },
+      columns: cols,
+    });
+    assert.strictEqual(out.length, 1);
+    assert.strictEqual(out[0].id, "a");
+  });
+
+  it("동일 입력 → 동일 출력 (deterministic)", () => {
+    const items: GridItem[] = [
+      { id: "a", x: 0, y: 0, w: 6, h: 2 },
+      { id: "b", x: 0, y: 2, w: 6, h: 2 },
+    ];
+    const out1 = computeLayout({
+      items,
+      action: { type: "move", id: "a", x: 0, y: 2 },
+      columns: cols,
+    });
+    const out2 = computeLayout({
+      items,
+      action: { type: "move", id: "a", x: 0, y: 2 },
+      columns: cols,
+    });
+    assert.deepStrictEqual(out1, out2);
+  });
+});

package/src/layout.ts

@@ -0,0 +1,156 @@
+// GridItem: 그리드 아이템 정보
+export type GridItem = {
+  id: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
+// LayoutAction: 그리드 아이템 추가, 이동, 크기 변경, 제거 등의 작업
+export type LayoutAction =
+  | { type: "add"; item: GridItem }
+  | { type: "move"; id: string; x: number; y: number }
+  | { type: "resize"; id: string; w: number; h: number }
+  | { type: "remove"; id: string };
+
+export type ComputeLayoutInput = {
+  items: GridItem[];
+  action: LayoutAction;
+  columns: number;
+};
+// collides: 충돌 여부 확인
+export const collides = (a: GridItem, b: GridItem): boolean => {
+  if (a.id === b.id) return false;
+  const xOverlap = a.x < b.x + b.w && b.x < a.x + a.w;
+  const yOverlap = a.y < b.y + b.h && b.y < a.y + a.h;
+  return xOverlap && yOverlap;
+};
+// getCollidingItems: 충돌 여부 확인
+export const getCollidingItems = (
+  item: GridItem,
+  items: GridItem[]
+): GridItem[] => items.filter((other) => collides(item, other));
+
+// clampItem: 그리드 아이템 위치 제한
+const clampItem = (item: GridItem, columns: number): GridItem => {
+  const x = Math.max(0, Math.min(item.x, columns - 1));
+  const w = Math.max(1, Math.min(item.w, columns - x));
+  const y = Math.max(0, item.y);
+  const h = Math.max(1, item.h);
+  return { ...item, x, y, w, h };
+};
+
+// pushDown: 그리드 아이템 이동
+export const pushDown = (
+  item: GridItem,
+  items: GridItem[],
+  columns: number
+): GridItem[] => {
+  const placed = clampItem(item, columns);
+  const others = items.filter((i) => i.id !== placed.id);
+  const moved = new Map<string, GridItem>();
+  moved.set(placed.id, placed);
+
+  const sortedOthers = [...others].sort((a, b) => {
+    if (a.y !== b.y) return a.y - b.y;
+    return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+  });
+
+  for (const other of sortedOthers) {
+    let current = { ...other };
+    const allPlaced = (): GridItem[] => [
+      placed,
+      ...Array.from(moved.values()).filter((i) => i.id !== placed.id),
+    ];
+
+    for (;;) {
+      const othersPlaced = allPlaced().filter((i) => i.id !== current.id);
+      const collision = othersPlaced.find((p) => collides(current, p));
+      if (!collision) {
+        moved.set(current.id, current);
+        break;
+      }
+      current = { ...current, y: collision.y + collision.h };
+    }
+  }
+
+  const result: GridItem[] = [placed];
+  for (const o of sortedOthers) {
+    result.push(moved.get(o.id)!);
+  }
+  return result;
+};
+
+// packUp: 그리드 아이템 제거
+export const packUp = (
+  items: GridItem[],
+  removedId: string,
+  columns: number
+): GridItem[] => {
+  const removed = items.find((i) => i.id === removedId);
+  if (!removed) return items;
+
+  const rest = items.filter((i) => i.id !== removedId);
+  const removedBottom = removed.y + removed.h;
+  const removedLeft = removed.x;
+  const removedRight = removed.x + removed.w;
+
+  const overlapsColumn = (item: GridItem): boolean =>
+    item.x < removedRight && item.x + item.w > removedLeft;
+  const isBelowRemoved = (item: GridItem): boolean => item.y >= removedBottom;
+
+  return rest.map((item) => {
+    if (!overlapsColumn(item) || !isBelowRemoved(item)) return item;
+    return { ...item, y: Math.max(0, item.y - removed.h) };
+  });
+};
+
+// findMinNonCollidingY: 충돌 없는 최소 y 찾기
+const findMinNonCollidingY = (item: GridItem, items: GridItem[]): number => {
+  let y = item.y;
+  for (;;) {
+    const candidate = { ...item, y };
+    const hits = getCollidingItems(candidate, items);
+    if (hits.length === 0) return y;
+    y = Math.max(...hits.map((c) => c.y + c.h));
+  }
+};
+
+// computeLayout: 그리드 레이아웃 계산
+export const computeLayout = (input: ComputeLayoutInput): GridItem[] => {
+  const { items, action, columns } = input;
+
+  switch (action.type) {
+    case "add": {
+      const added = clampItem(action.item, columns);
+      const existing = items.filter((i) => i.id !== added.id);
+      const y = findMinNonCollidingY(added, existing);
+      return [...existing, { ...added, y }];
+    }
+    case "move": {
+      const target = items.find((i) => i.id === action.id);
+      if (!target) return items;
+      // 위치만 변경, 크기(w,h)는 유지. x는 그리드 밖으로 나가지 않도록 clamp
+      const x = Math.max(0, Math.min(action.x, columns - target.w));
+      const y = Math.max(0, action.y);
+      const moved = { ...target, x, y };
+      const others = items.filter((i) => i.id !== action.id);
+      return pushDown(moved, others, columns);
+    }
+    case "resize": {
+      const target = items.find((i) => i.id === action.id);
+      if (!target) return items;
+      const w = Math.max(1, Math.min(action.w, columns - target.x));
+      const h = Math.max(1, action.h);
+      const resized = { ...target, w, h };
+      const others = items.filter((i) => i.id !== action.id);
+      return pushDown(resized, others, columns);
+    }
+    case "remove":
+      return packUp(items, action.id, columns);
+    default: {
+      const _: never = action;
+      return items;
+    }
+  }
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020"],
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "declarationMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}