aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/Tile.vue4
-rw-r--r--src/components/TileTree.vue21
-rw-r--r--src/layout.ts87
-rw-r--r--src/types.ts88
4 files changed, 112 insertions, 88 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 76d08a8..19c9838 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,6 +1,6 @@
<script lang="ts">
import {defineComponent, PropType} from 'vue';
-import {TreeNode} from '../layout';
+import {TreeNode} from '../types';
const TRANSITION_DURATION = 300;
export default defineComponent({
@@ -13,7 +13,7 @@ export default defineComponent({
}
},
props: {
- tree: {type: Object as PropType<TreeNode>, required:true},
+ tree: {type: Object as PropType<TreeNode>, required: true},
},
computed: {
name(){return this.tree.tolNode.name.replaceAll('\'', '\\\'')}
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index e8c0013..73959ee 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -6,7 +6,7 @@ import {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks} f
//for importing f1.ts:
//using 'import f1.ts' makes vue-tsc complain, and 'import f1.js' makes vite complain
//using 'import f1' might cause problems with build systems other than vite
-import type {TolNode, TreeNode, LayoutNode} from '../layout';
+import {TolNode, TreeNode, LayoutNode} from '../types';
let LAYOUT_FUNC = sweepToSideLayout;
import tol from '../tol.json';
@@ -30,18 +30,11 @@ export default defineComponent({
},
methods: {
initTree(tol: TolNode, lvl: number): TreeNode {
- let tree = {
- tolNode:tol, children:[],
- x:0, y:0, w:0, h:0, headerSz:0,
- sideArea:null, tileCount:0,
- };
+ let tree = new TreeNode(tol, []);
function initTreeRec(tree: TreeNode, lvl: number){
if (lvl > 0)
- tree.children = tree.tolNode.children.map((tNode: TolNode) => initTreeRec({
- tolNode: tNode, children: [],
- x:0, y:0, w:0, h:0, headerSz:0,
- sideArea:null, tileCount:0,
- }, lvl-1));
+ tree.children = tree.tolNode.children.map(
+ (n: TolNode) => initTreeRec(new TreeNode(n, []), lvl-1));
return tree;
}
initTreeRec(tree, lvl);
@@ -66,11 +59,7 @@ export default defineComponent({
return;
}
//add children
- nodeList[0].children = nodeList[0].tolNode.children.map((tNode: TolNode) => ({
- tolNode: tNode, children: [],
- x:0, y:0, w:0, h:0, headerSz:0,
- sideArea: null, tileCount:0,
- }));
+ nodeList[0].children = nodeList[0].tolNode.children.map((n: TolNode) => new TreeNode(n, []));
layoutInfoHooks.updateLayoutInfoOnExpand(nodeList);
//try to layout tree
if (!this.tryLayout())
diff --git a/src/layout.ts b/src/layout.ts
index ab0a886..be30bc4 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -1,5 +1,5 @@
export {staticSqrLayout, staticRectLayout, sweepToSideLayout, layoutInfoHooks};
-export type {TolNode, TreeNode, LayoutNode};
+import {TolNode, TreeNode, LayoutNode, SideArea, LeftoverArea} from './types';
let TILE_SPACING = 5;
let HEADER_SZ = 20;
@@ -10,50 +10,6 @@ let SWEEP_MODE = 'left'; //'left', 'top', 'shorter', 'auto'
let ALLOW_SWEEP_TO_PARENT = true;
let RECT_SPC_SHIFTING = true;
-interface TolNode {
- name: string;
- children: TolNode[];
-}
-interface TreeNode {
- tolNode: TolNode;
- children: TreeNode[];
- x: number;
- y: number;
- w: number;
- h: number;
- headerSz: number;
- sideArea: SideArea | null;
- tileCount: number;
-}
-interface LayoutNode {
- name: string;
- x: number;
- y: number;
- w: number;
- h: number;
- headerSz: number;
- children: LayoutNode[];
- contentW: number;
- contentH: number;
- empSpc: number;
- sideArea: SideArea | null;
-}
-interface SideArea {
- x: number;
- y: number;
- w: number;
- h: number;
- sweptLeft: boolean;
- extraSz: number;
-}
-interface LeftoverArea {
- parentX: number;
- parentY: number;
- w: number;
- h: number;
- sweptLeft: boolean;
-}
-
const layoutInfoHooks = { //made common-across-layout-types for layout inter-usability
initLayoutInfo(tree: TreeNode){
if (tree.children.length > 0){
@@ -129,15 +85,12 @@ function staticSqrLayout(node: TreeNode, x: number, y: number, w: number, h: num
lowestEmp += childLayouts[i].empSpc;
}
}
- return {
- name: node.tolNode.name,
- x: x, y: y, w: w, h: h, headerSz: headerSz,
- children: childLayouts,
+ return new LayoutNode(node.tolNode.name, childLayouts, x, y, w, h, {
+ headerSz,
contentW: numCols * (tileSize + TILE_SPACING) + TILE_SPACING,
contentH: numRows * (tileSize + TILE_SPACING) + TILE_SPACING + headerSz,
empSpc: lowestEmp,
- sideArea: null,
- };
+ });
}
//lays out nodes as rectangles organised into rows, partially using other layouts for children
function staticRectLayout(node: TreeNode, x: number, y: number, w: number, h: number, hideHeader: boolean,
@@ -304,15 +257,9 @@ function staticRectLayout(node: TreeNode, x: number, y: number, w: number, h: nu
//make no-child tiles have width/height fitting their content
childLayouts.filter(l => l.children.length == 0).forEach(l => {l.w = l.contentW; l.h = l.contentH;});
//determine layout
- return {
- name: node.tolNode.name,
- x: x, y: y, w: w, h: h, headerSz: headerSz,
- children: childLayouts,
- contentW: w, //trying to shrink this causes problems with swept-to-parent-area div-alignment
- contentH: h,
- empSpc: lowestEmp,
- sideArea: null,
- };
+ return new LayoutNode(node.tolNode.name, childLayouts, x, y, w, h,
+ {headerSz, contentW: w, contentH: h, empSpc: lowestEmp});
+ //trying to shrink contentW and contentH causes problems with swept-to-parent-area div-alignment
}
//lays out nodes by pushing leaves to one side, partially using other layouts for children
function sweepToSideLayout(node: TreeNode, x: number, y: number, w: number, h: number, hideHeader: boolean,
@@ -443,10 +390,8 @@ function sweepToSideLayout(node: TreeNode, x: number, y: number, w: number, h: n
let layoutsInOldOrder = seq(node.children.length)
.map(i => children.findIndex(n => n == node.children[i]))
.map(i => layouts[i]);
- return {
- name: node.tolNode.name,
- x: x, y: y, w: w, h: h, headerSz: headerSz,
- children: layoutsInOldOrder,
+ return new LayoutNode(node.tolNode.name, layoutsInOldOrder, x, y, w, h, {
+ headerSz,
contentW: usingParentArea ? nonLeavesLayout.contentW : (sweptLeft ?
sweptLayout.contentW + nonLeavesLayout.contentW - TILE_SPACING :
Math.max(sweptLayout.contentW, nonLeavesLayout.contentW)),
@@ -454,12 +399,14 @@ function sweepToSideLayout(node: TreeNode, x: number, y: number, w: number, h: n
Math.max(sweptLayout.contentH, nonLeavesLayout.contentH) + headerSz :
sweptLayout.contentH + nonLeavesLayout.contentH - TILE_SPACING + headerSz),
empSpc: sweptLayout.empSpc + nonLeavesLayout.empSpc,
- sideArea: usingParentArea && parentArea != null ? {
- x: parentArea.parentX, y: parentArea.parentY,
- w: parentArea.w, h: parentArea.h,
- sweptLeft: sweptLeft, extraSz: TILE_SPACING+1,
- }: null,
- };
+ sideArea: (usingParentArea && parentArea != null) ?
+ {
+ x: parentArea.parentX, y: parentArea.parentY,
+ w: parentArea.w, h: parentArea.h,
+ sweptLeft: sweptLeft, extraSz: TILE_SPACING+1,
+ }:
+ null,
+ });
}
}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..8a42ca0
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,88 @@
+export class TolNode {
+ name: string;
+ children: TolNode[];
+ constructor(name: string, children: TolNode[]){
+ this.name = name;
+ this.children = children;
+ }
+}
+export class TreeNode {
+ tolNode: TolNode;
+ children: TreeNode[];
+ x: number;
+ y: number;
+ w: number;
+ h: number;
+ headerSz: number;
+ sideArea: SideArea | null;
+ tileCount: number;
+ constructor(tolNode: TolNode, children: TreeNode[], x=0, y=0, w=0, h=0,
+ {headerSz=0, sideArea=null, tileCount=1} = {}){
+ this.tolNode = tolNode;
+ this.children = children;
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ this.headerSz = headerSz;
+ this.sideArea = sideArea;
+ this.tileCount = tileCount;
+ }
+}
+export class LayoutNode {
+ name: string;
+ children: LayoutNode[];
+ x: number;
+ y: number;
+ w: number;
+ h: number;
+ headerSz: number;
+ contentW: number;
+ contentH: number;
+ empSpc: number;
+ sideArea: SideArea | null;
+ constructor(name: string, children: LayoutNode[], x=0, y=0, w=0, h=0,
+ {headerSz=0, contentW=0, contentH=0, empSpc=0, sideArea=null as SideArea|null} = {}){
+ this.name = name;
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ this.headerSz = headerSz;
+ this.children = children;
+ this.contentW = contentW;
+ this.contentH = contentH;
+ this.empSpc = empSpc;
+ this.sideArea = sideArea;
+ }
+}
+export class SideArea {
+ x: number;
+ y: number;
+ w: number;
+ h: number;
+ sweptLeft: boolean;
+ extraSz: number;
+ constructor(x: number, y: number, w: number, h: number, sweptLeft: boolean, extraSz: number){
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ this.sweptLeft = sweptLeft;
+ this.extraSz = extraSz;
+ }
+}
+export class LeftoverArea {
+ parentX: number;
+ parentY: number;
+ w: number;
+ h: number;
+ sweptLeft: boolean;
+ constructor(parentX: number, parentY: number, w: number, h: number, sweptLeft: boolean){
+ this.parentX = parentX;
+ this.parentY = parentY;
+ this.w = w;
+ this.h = h;
+ this.sweptLeft = sweptLeft;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 00:16:01 +0000