STOM - Sign Template Object Model

A TypeScript library providing a comprehensive object model for sign templates and rendering. STOM enables developers to create, manipulate, and render sign templates with a clean, type-safe API.

What is this repository for?

• Purpose: STOM (Sign Template Object Model) provides a structured framework for defining, manipulating, and rendering sign templates. It offers a full object model with classes like Template, Side, Layer, Item, and more to represent all aspects of sign design.
• Version: 0.1.1 (Beta)
• License: Proprietary

Features

• Complete object model for sign templates (Template, Side, Layer, Item)
• Support for geometric shapes (Rect, Ellipse)
• Text handling with font management
• Measurement units conversion (px, in, pt, cm, etc.)
• SVG-based rendering
• CSS styling integration
• Comprehensive unit testing

Installation

From Bitbucket Git Repository

# Install directly from the repository
npm install [email protected]:signagent/stom.git

# Or with a specific version tag
npm install [email protected]:signagent/stom.git#v0.1.1

Via package.json

{
  "dependencies": {
    "stom": "[email protected]:signagent/stom.git#master"
  }
}

Getting Started

// Import the necessary classes
import { Template, Side, SAValueUnit, Rect } from 'stom';

// Create a template (e.g., business card)
const businessCard = new Template(
  'BC-001',                         // Template ID
  new SAValueUnit(3.5, 'in'),       // Width
  new SAValueUnit(2, 'in')          // Height
);

// Add a front side
const front = new Side('front');
businessCard.sides.add(front);

// Create a rectangle for the background
const background = new Rect(
  new SAValueUnit(0, 'in'),
  new SAValueUnit(0, 'in'),
  new SAValueUnit(3.5, 'in'),
  new SAValueUnit(2, 'in')
);

background.fill = '#ffffff';
background.corners = [8, 8, 8, 8]; // Rounded corners

// Add the rectangle to the front side
front.items.add(background);

Core Classes

• Template: The root container for sign templates
• Side: Represents a side of a sign (e.g., front, back)
• Layer: Groups related items together
• Item: Base class for all visual elements
• Rect, Ellipse: Geometric shapes
• SAValueUnit: Handles measurements with different units
• Font: Represents font resources and properties

How to Get Set Up

Development Environment

# Clone the repository
git clone https://bitbucket.org/signagent/stom.git
cd stom

# Install dependencies
npm install

# Build the library
npm run build

Run Tests

# Run all tests
npm test

# Run browser-based tests
npm run test:browser

Build Documentation

# Generate TypeDoc documentation
npm run docs

Dependencies

• @svgdotjs/svg.js: SVG manipulation and rendering
• opentype.js: Font handling
• TypeScript: Static typing and compilation

Code Structure

stom/
├── src/              # Source code
├── tests/            # Test cases
├── dist/             # Compiled output
│   ├── cjs/          # CommonJS modules
│   ├── esm/          # ES modules
│   └── types/        # TypeScript declarations
└── docs/             # Generated documentation

Contribution Guidelines

• Coding Style: Follow TypeScript best practices and the project's linting rules
• Testing: Write unit tests for all new features
• Documentation: Document public APIs with JSDoc comments
• Pull Requests: Submit PRs with comprehensive descriptions of changes

Versioning

Versioning follows the format v{major}.{minor}.{patch} with tags on the master branch.

Contact

• Repository Owner: Bill McLean
• Issues and Feature Requests: Please use the Bitbucket issue tracker