@splice-cad/embed

v0.1.0-beta.2

Published

5 months ago

Embed Splice harness diagrams on your website

Downloads

0High
0Medium
0Low

splice-cad-info

cable harness wiring diagram embed splice

@splice-cad/embed

Embed Splice harness diagrams on your website with a simple JavaScript library.

Installation

CDN (Recommended)

<script src="https://cdn.jsdelivr.net/npm/@splice-cad/[email protected]/dist/splice-embed.iife.js"></script>

NPM

npm install @splice-cad/embed

Quick Start

Simple Usage (Public Harness)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@splice-cad/[email protected]/dist/splice-embed.iife.js"></script>
</head>
<body>
  <div id="harness-container"></div>

  <script>
    Splice.embed('harness-container', 'your-harness-id', {
      width: '800px',
      height: '600px',
      showBOM: true
    });
  </script>
</body>
</html>

Private Harness

Splice.embed('harness-container', 'your-harness-id', {
  token: 'your-share-token', // Get from harness settings
  theme: 'dark',
  showBOM: true
});

With Custom Styling

Splice.embed('harness-container', 'your-harness-id', {
  styles: {
    backgroundColor: '#1e1e1e',
    textColor: '#e0e0e0',
    connectorFill: '#2a2a2a'
  }
});

Features

🚀 Simple CDN-based loading
🎨 Fully customizable styling (CSS variables, JS options, web component attributes)
📱 Responsive and mobile-friendly
🔍 Interactive pan and zoom
📋 Optional BOM table display
🌓 Built-in theme presets (light, dark, high-contrast, blueprint)
🔒 Secure with share tokens
📦 Tiny bundle size (<100KB gzipped)

API Reference

`Splice.embed(containerId, harnessId, options)`

Creates an embedded harness viewer.

Parameters:

containerId (string): ID of the container element
harnessId (string): UUID of the harness to display
options (object): Configuration options

Options:

token (string): Share token for private harnesses
width (string): Width of the container (default: '100%')
height (string): Height of the container (default: '600px')
theme ('light' | 'dark' | 'auto'): Theme preset
showBOM (boolean): Display BOM table
showTitle (boolean): Display harness title
interactive (boolean): Enable pan/zoom controls
styles (object): Custom style overrides
onLoad (function): Callback when harness loads
onError (function): Callback on error

Returns: Controller object with methods:

zoomIn(): Zoom in
zoomOut(): Zoom out
fitToView(): Fit harness to viewport
destroy(): Remove the embed
update(options): Update options dynamically

Documentation

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run build

# Type check
npm run type-check

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@splice-cad/embed

Installation

CDN (Recommended)

NPM

Quick Start

Simple Usage (Public Harness)

Private Harness

With Custom Styling

Features

API Reference

Splice.embed(containerId, harnessId, options)

Documentation

Development

License

Support

`Splice.embed(containerId, harnessId, options)`