
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
non-layered-tidy-tree-layout
Advanced tools
Draw non-layered tidy trees in linear time.
This a JavaScript port from the project cwi-swat/non-layered-tidy-trees, which is written in Java. The algorithm used in that project is from the paper by A.J. van der Ploeg, Drawing Non-layered Tidy Trees in Linear Time. There is another JavaScript port from that project d3-flextree, which depends on d3-hierarchy. This project is dependency free.
npm install non-layered-tidy-tree-layout
Or
yarn add non-layered-tidy-tree-layout
There's also a built verison: dist/non-layered-tidy-tree-layout.js
for use with browser <script>
tag, or as a Javascript module.
import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout'
// BoundingBox(gap, bottomPadding)
const bb = new BoundingBox(10, 20)
const layout = new Layout(bb)
const treeData = {
id: 0,
width: 40,
height: 40,
children: [
{
id: 1,
width: 40,
height: 40,
children: [{ id: 6, width: 400, height: 40 }]
},
{ id: 2, width: 40, height: 40 },
{ id: 3, width: 40, height: 40 },
{ id: 4, width: 40, height: 40 },
{ id: 5, width: 40, height: 80 }
]
}
const { result, boundingBox } = layout.layout(treeData)
// result:
// {
// id: 0,
// x: 300,
// y: 0,
// width: 40,
// height: 40,
// children: [
// {
// id: 1,
// x: 185,
// y: 60,
// width: 40,
// height: 40,
// children: [
// { id: 6, x: 5, y: 120, width: 400, height: 40 }
// ]
// },
// { id: 2, x: 242.5, y: 60, width: 40, height: 40 },
// { id: 3, x: 300, y: 60, width: 40, height: 40 },
// { id: 4, x: 357.5, y: 60, width: 40, height: 40 },
// { id: 5, x: 415, y: 60, width: 40, height: 80 }
// ]
// }
//
// boundingBox:
// {
// left: 5,
// right: 455,
// top: 0,
// bottom: 160
// }
The method Layout.layout
modifies treeData
inplace. It returns an object like { result: treeData, boundingBox: {left: num, right: num, top: num, bottom: num} }
. result
is the same object treeData
with calculated coordinates, boundingBox
are the coordinates for the whole tree:
The red dashed lines are the bounding boxes for each node. Layout.layout()
produces coordinates to draw nodes, which are the grey boxes with black border.
The library also provides a class Tree
and a method layout
.
/**
* Constructor for Tree.
* @param {number} width - width of bounding box
* @param {number} height - height of bounding box
* @param {number} y - veritcal coordinate of bounding box
* @param {array} children - a list of Tree instances
*/
new Tree(width, height, y, children)
/**
* Calculate x, y coordindates and assign them to tree.
* @param {Object} tree - a Tree object
*/
layout(tree)
In case your data structure are not the same as provided by the example above, you can refer to src/helpers.js
to implement a Layout
class that converts your data to a Tree
, then call layout
to calculate the coordinates for drawing.
Layout.getSize
and Layout.assignLayout
and Layout.layout
Layout.layout
Layout.layoutTreeData
Layout
, BoundingBox
, layout
, Tree
FAQs
Draw non-layered tidy trees in linear time
The npm package non-layered-tidy-tree-layout receives a total of 333,188 weekly downloads. As such, non-layered-tidy-tree-layout popularity was classified as popular.
We found that non-layered-tidy-tree-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.