Skip to content

Commit

Permalink
Merge pull request #10 from miyanokomiya/feat/dropdown_tree
Browse files Browse the repository at this point in the history 
Dropdown tree
  • Loading branch information
@miyanokomiya
miyanokomiya authored Feb 16, 2024
2 parents 6e07f0f + d33dc83 commit ec65164
Show file tree
Hide file tree
Showing 9 changed files with 952 additions and 88 deletions.
311 changes: 311 additions & 0 deletions src/composables/shapeHandlers/treeHandler.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,285 @@ describe("newTreeNodeMovingHandler", () => {
expect(target2.hitTest({ x: 0, y: -50 }, 1)).toEqual(undefined);
});
});

describe("hitTest: dropdown 2", () => {
const shapeComposite = newShapeComposite({
shapes: [root, ...[a, aa, b, bb, ia].map((s) => ({ ...s, dropdown: 2 }))],
getStruct: getCommonStruct,
});

test("should return node moving result: move inside the siblings", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 80, y: -10 }, 1)).toEqual(undefined);
expect(target.hitTest({ x: 50, y: 40 }, 1)).toEqual(undefined);
expect(target.hitTest({ x: 50, y: 60 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(b.findex, null),
});
});

test("should return node moving result: move to other parent", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 110, y: 50 }, 1)).toEqual({
treeParentId: "b",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(null, bb.findex),
});
expect(target.hitTest({ x: 110, y: 60 }, 1)).toEqual({
treeParentId: "b",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(bb.findex, null),
});
});

test("should return node moving result: become the first child", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 150, y: 50 }, 1)).toEqual({
treeParentId: "bb",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(bb.findex, null),
});
});

test("should return node moving result: should not move to own children", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 110, y: -50 }, 1)).toEqual({
treeParentId: "b",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(null, bb.findex),
});
});

test("should return node moving result: switch direction", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: -50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 2,
findex: generateKeyBetween(ia.findex, null),
});
expect(target.hitTest({ x: -50, y: 2 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 2,
findex: generateKeyBetween(null, ia.findex),
});
expect(target.hitTest({ x: -60, y: 0 }, 1)).toEqual({
treeParentId: "ia",
direction: 3,
dropdown: 2,
findex: generateKeyBetween(ia.findex, null),
});
});

test("should return node moving result: switch direction & no siblings", () => {
const target1 = newTreeNodeMovingHandler({
getShapeComposite: () =>
newShapeComposite({
shapes: [root, ...[a].map((s) => ({ ...s, dropdown: 2 }))],
getStruct: getCommonStruct,
}),
targetId: "a",
});
expect(target1.hitTest({ x: -50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 2,
findex: generateKeyBetween(root.findex, null),
});
expect(target1.hitTest({ x: 50, y: 10 }, 1)).toEqual(undefined);

expect(target1.hitTest({ x: -50, y: -10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 0,
findex: generateKeyBetween(root.findex, null),
});
expect(target1.hitTest({ x: 50, y: -10 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(root.findex, null),
});

const target2 = newTreeNodeMovingHandler({
getShapeComposite: () =>
newShapeComposite({
shapes: [root, ...[ia].map((s) => ({ ...s, dropdown: 2 }))],
getStruct: getCommonStruct,
}),
targetId: "ia",
});
expect(target2.hitTest({ x: 50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(root.findex, null),
});
expect(target2.hitTest({ x: -50, y: 10 }, 1)).toEqual(undefined);

expect(target2.hitTest({ x: 50, y: -10 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(root.findex, null),
});
expect(target2.hitTest({ x: -50, y: -10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 0,
findex: generateKeyBetween(root.findex, null),
});
});
});

describe("hitTest: dropdown 0", () => {
const shapeComposite = newShapeComposite({
shapes: [root, ...[a, aa, b, bb, ia].map((s) => ({ ...s, dropdown: 0 }))],
getStruct: getCommonStruct,
});

test("should return node moving result: move inside the siblings", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 80, y: -10 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(b.findex, null),
});
expect(target.hitTest({ x: 50, y: 40 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(b.findex, null),
});
expect(target.hitTest({ x: 50, y: 60 }, 1)).toEqual(undefined);
});

test("should return node moving result: move to other parent", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 110, y: 50 }, 1)).toEqual({
treeParentId: "b",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(bb.findex, null),
});
expect(target.hitTest({ x: 110, y: 60 }, 1)).toEqual({
treeParentId: "b",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(null, bb.findex),
});
});

test("should return node moving result: become the first child", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 150, y: 50 }, 1)).toEqual({
treeParentId: "bb",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(bb.findex, null),
});
});

test("should return node moving result: should not move to own children", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: 110, y: -50 }, 1)).toEqual({
treeParentId: "b",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(bb.findex, null),
});
});

test("should return node moving result: switch direction", () => {
const target = newTreeNodeMovingHandler({ getShapeComposite: () => shapeComposite, targetId: "a" });
expect(target.hitTest({ x: -50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 0,
findex: generateKeyBetween(null, ia.findex),
});
expect(target.hitTest({ x: -50, y: 2 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 0,
findex: generateKeyBetween(ia.findex, null),
});
expect(target.hitTest({ x: -60, y: 0 }, 1)).toEqual({
treeParentId: "ia",
direction: 3,
dropdown: 0,
findex: generateKeyBetween(ia.findex, null),
});
});

test("should return node moving result: switch direction & no siblings", () => {
const target1 = newTreeNodeMovingHandler({
getShapeComposite: () =>
newShapeComposite({
shapes: [root, ...[a].map((s) => ({ ...s, dropdown: 0 }))],
getStruct: getCommonStruct,
}),
targetId: "a",
});
expect(target1.hitTest({ x: -50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 2,
findex: generateKeyBetween(root.findex, null),
});
expect(target1.hitTest({ x: 50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(root.findex, null),
});

expect(target1.hitTest({ x: -50, y: -10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 0,
findex: generateKeyBetween(root.findex, null),
});
expect(target1.hitTest({ x: 50, y: -10 }, 1)).toEqual(undefined);

const target2 = newTreeNodeMovingHandler({
getShapeComposite: () =>
newShapeComposite({
shapes: [root, ...[ia].map((s) => ({ ...s, dropdown: 0 }))],
getStruct: getCommonStruct,
}),
targetId: "ia",
});
expect(target2.hitTest({ x: 50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 2,
findex: generateKeyBetween(root.findex, null),
});
expect(target2.hitTest({ x: -50, y: 10 }, 1)).toEqual({
treeParentId: "root",
direction: 3,
dropdown: 2,
findex: generateKeyBetween(root.findex, null),
});

expect(target2.hitTest({ x: 50, y: -10 }, 1)).toEqual({
treeParentId: "root",
direction: 1,
dropdown: 0,
findex: generateKeyBetween(root.findex, null),
});
expect(target2.hitTest({ x: -50, y: -10 }, 1)).toEqual(undefined);
});
});
});

describe("getTreeBranchIds", () => {
Expand Down Expand Up @@ -440,6 +719,38 @@ describe("getPatchToGraftBranch", () => {
a1: { parentId: "root", direction: 1, vAlign: "center", hAlign: "left" },
});
});

test("should inherit elder sibling's dropdown attribute", () => {
const shapeComposite = newShapeComposite({
shapes: [root, { ...a, dropdown: 2 } as TreeNodeShape, { ...b, dropdown: 2 } as TreeNodeShape, root1, a1],
getStruct: getCommonStruct,
});
expect(getPatchToGraftBranch(shapeComposite, "root1", "root")).toEqual({
root1: {
type: "tree_node",
findex: generateKeyBetween(b.findex, null),
parentId: "root",
treeParentId: "root",
direction: 1,
dropdown: 2,
vAlign: "center",
hAlign: "left",
},
a1: { parentId: "root", direction: 1, dropdown: 2, vAlign: "center", hAlign: "left" },
});
expect(getPatchToGraftBranch(shapeComposite, "root1", "a")).toEqual({
root1: {
type: "tree_node",
parentId: "root",
treeParentId: "a",
direction: 1,
dropdown: 2,
vAlign: "center",
hAlign: "left",
},
a1: { parentId: "root", direction: 1, dropdown: 2, vAlign: "center", hAlign: "left" },
});
});
});

describe("isValidTreeNode", () => {
Expand Down
Loading

0 comments on commit ec65164

Please sign in to comment.