ts-box-drawing

npm package to draw box using unicode characters

Locations

Demo

• https://replit.com/@siakhooi/siakhooibox-drawing-Demo?v=1

Source Code

• https://github.com/siakhooi/ts-box-drawing

Distribution

• https://www.npmjs.com/package/@siakhooi/box-drawing
• https://github.com/siakhooi/ts-box-drawing/pkgs/npm/box-drawing

Code Quality

• https://sonarcloud.io/project/overview?id=siakhooi_ts-box-drawing
• https://codeclimate.com/github/siakhooi/ts-box-drawing

Reference

• https://en.wikipedia.org/wiki/Box_Drawing
• https://www.unicode.org/charts/PDF/U2500.pdf

Usage

See Demo in Replit: https://replit.com/@siakhooi/siakhooibox-drawing-Demo?v=1

Simple Text

see Demo_HelloWorld

const x = require('@siakhooi/box-drawing');

x.drawBoxThin(text);
x.drawBoxThick(text);
x.drawBoxDouble(text);
x.drawBoxThinCurve(text);
x.drawBoxHorizontalThinVerticalThick(text);
x.drawBoxHorizontalThickVerticalThin(text);
x.drawBoxHorizontalThinVerticalDouble(text);
x.drawBoxHorizontalDoubleVerticalThin(text);
x.drawBoxInnerDoubleOuterThin(text);
x.drawBoxInnerThinOuterDouble(text);
x.drawBoxInnerThinOuterThick(text);
x.drawBoxInnerThickOuterThin(text);
x.drawBoxInnerDoubleOuterThinCurve(text);
x.drawBoxInnerThickOuterThinCurve(text);
x.drawBoxVerticalBarPlusMinus(text);
x.drawBoxVerticalBarPlusMinusSlashes(text);
x.drawBoxVerticalBarPlusEquals(text);
x.drawBoxVerticalBarPlusEqualsSlashes(text);

Array

see Demo_Array

const x = require('@siakhooi/box-drawing');

const textInArray = [
  ['Cell 1-1', 'Cell 2-1'],
  ['Cell 1-2', 'Cell 2-2'],
];

x.drawBoxThin(textInArray);
x.drawBoxThick(textInArray);
x.drawBoxDouble(textInArray);
x.drawBoxThinCurve(textInArray);
x.drawBoxHorizontalThinVerticalThick(textInArray);
x.drawBoxHorizontalThickVerticalThin(textInArray);
x.drawBoxHorizontalThinVerticalDouble(textInArray);
x.drawBoxHorizontalDoubleVerticalThin(textInArray);
x.drawBoxInnerDoubleOuterThin(textInArray);
x.drawBoxInnerThinOuterDouble(textInArray);
x.drawBoxInnerThinOuterThick(textInArray);
x.drawBoxInnerThickOuterThin(textInArray);
x.drawBoxInnerDoubleOuterThinCurve(textInArray);
x.drawBoxInnerThickOuterThinCurve(textInArray);
x.drawBoxVerticalBarPlusMinus(textInArray);
x.drawBoxVerticalBarPlusMinusSlashes(textInArray);
x.drawBoxVerticalBarPlusEquals(textInArray);
x.drawBoxVerticalBarPlusEqualsSlashes(textInArray);

BoxDrawingBuilder

see Demo_Builder

• Basic
  • setData(data)
  • setStyle(boxStyle)
  • drawBox()
• Padding
  • padLeft(column, spaces)
  • padRight(column, spaces)
  • padLeftAll(spaces[])
  • padRightAll(spaces[])
  • pad(column, left_spaces, right_spaces)
  • setDefaultPadLeft(spaces)
  • setDefaultPadRight(spaces)
  • setDefaultPad(left_spaces, right_spaces)
• Horizontal Alignment
  • align(column, horizontalAlignment)
  • alignLeft(columns[])
  • alignRight(columns[])
  • alignCenter(columns[])
  • setDefaultAlignment(horizontalAlignment)

Basic

const {BoxDrawingBuilder, THINCURVE} = require('@siakhooi/box-drawing');

const textInArray = [
  ['Cell 1-1', 'Cell 2-1'],
  ['Cell 1-2', 'Cell 2-2'],
];

new BoxDrawingBuilder().setData(textInArray).setStyle(THINCURVE).drawBox();

Padding

const {BoxDrawingBuilder, THINCURVE} = require('@siakhooi/box-drawing');

const textInArray = [
  ['Cell 1-1', 'Cell 2-1'],
  ['Cell 1-2', 'Cell 2-2'],
];

new BoxDrawingBuilder()
  .setData(textInArray)
  .setStyle(THINCURVE)
  .setDefaultPadLeft(1)
  .setDefaultPadRight(2)
  .padLeft(0, 5)
  .padRight(1, 2)
  .pad(3, 1, 2)
  .padLeftAll([1, 2, 3, 4, 5])
  .padRightAll([5, 4, 3, 2, 1])
  .drawBox();

Horizontal Alignment

const {
  BoxDrawingBuilder,
  THINCURVE,
  HorizontalAlignmentEnum,
} = require('@siakhooi/box-drawing');

const textInArray = [
  ['Cell 1-1', 'Cell 2-1'],
  ['Cell 1-2', 'Cell 2-2'],
];

new BoxDrawingBuilder()
  .setData(textInArray)
  .setStyle(THINCURVE)
  .align(0, HorizontalAlignmentEnum.LEFT)
  .align(1, HorizontalAlignmentEnum.RIGHT)
  .drawBox();

Sudoku Board

const x = require('@siakhooi/box-drawing');

const data = [
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
];
x.drawSudokuBoardThick(data);
x.drawSudokuBoardDouble(data);