Skip to content

Latest commit

 

History

History
95 lines (64 loc) · 3.44 KB

packages.md

File metadata and controls

95 lines (64 loc) · 3.44 KB
Raw

daign-2d-graphics packages

The daign-2d-graphics project consists of several libraries that are all written in TypeScript and can be downloaded as npm packages.

List of all my packages on npm.

Foundation

  • @daign/math - The math library for all vector and matrix calculations necessary.

  • @daign/2d-pipeline - Transforms your shapes from world coordinates to screen coordinates.

  • @daign/2d-graphics - Defines shapes and how control points can modify them.

  • @daign/style-sheets - A simple style sheet processor to define the color and style of graphic elements. Because you can't use CSS together with Canvas or TikZ.

Renderers

The renderers that output the graphics to the target format.

  • @daign/2d-graphics-svg - Renders to SVG format for use in interactive web applications.

  • @daign/2d-graphics-tikz - Outputs TikZ code that can be used in LaTeX documents and compiled to PDF.

  • A renderer for the HTML5 canvas element is also planned.

Renderers can be extended or used as a base to write your own renderer for a different output format.

Utils

  • @daign/handle - Defining drag actions for all DOM elements.

  • @daign/schedule - Managing the time-wise execution of functions. Mainly used for limiting the redraw cycle to increase performance.

  • @daign/color - Color utils library.

  • @daign/dom-pool - Helper for reusing DOM nodes to increase performance without relying on garbage collection.

  • @daign/observable - Simple implementation of observable pattern.

  • @daign/mock-dom - Mocking DOM nodes and events for unit tests in Typescript.

graph TD;
    STYLE("@daign/style-sheets") --> GRAPH("@daign/2d-graphics");
    PIPE("@daign/2d-pipeline") --> GRAPH("@daign/2d-graphics");
    HAND("@daign/handle") --> GRAPH("@daign/2d-graphics");

    OBS("@daign/observable") --> PIPE("@daign/2d-pipeline");
    OBS("@daign/observable") --> MATH("@daign/math");

    MATH("@daign/math") --> PIPE("@daign/2d-pipeline");
    MATH("@daign/math") --> HAND("@daign/handle");

    SCHED("@daign/schedule") --> HAND("@daign/handle");

    GRAPH("@daign/2d-graphics") --> SVG("@daign/2d-graphics-svg");
    GRAPH("@daign/2d-graphics") --> TIKZ("@daign/2d-graphics-tikz");

    POOL("@daign/dom-pool") --> SVG("@daign/2d-graphics-svg");