Getting Started

If something isn't working, feel free to open an issue, but don't create an duplicate issue.

Load Blackprint required files

There are styles, template, and scripts that need to be loaded. Blackprint only giving support on modern browser, because it's designed for the future.

<!-- If you're going to use Sketch, the framework need to be loaded before the engine -->
<script src="https://cdn.jsdelivr.net/npm/scarletsframe@0.35.x"></script>
<script src="https://cdn.jsdelivr.net/npm/@blackprint/engine@0.6.x" crossorigin="anonymous"></script>

<!-- Load Sketch after the Engine -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@blackprint/sketch@0.6.x//dist/blackprint.sf.css">
<script src="https://cdn.jsdelivr.net/npm/@blackprint/sketch@0.6.x/dist/blackprint.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@blackprint/sketch@0.6.x/dist/blackprint.sf.js" crossorigin="anonymous"></script>

// Create Blackprint, `sketch` in this documentation will refer to this
var sketch = new Blackprint.Sketch();

// Get the container and attach it into the DOM (If you're not using sf-views for routing)
document.body.appendChild(sketch.cloneContainer());

Import Blackprint nodes

If you have exported Blackprint into JSON, then you can easily import it like below:

// After imported it will automatically appended into the DOM container
var nodes = sketch.importJSON('{...}');
// nodes = [iface, iface, ...]

Create single Blackprint node

To create new node and put it on the DOM you can call sketch.createNode(namespace, options)

Namespace is the registered node handler from sketch.registerNode. Options is a value for the registered node element from sketch.registerInterface.

// Create the node to the view
var iface = sketch.createNode('Math/Multiply', {x:20, y:20});
// iface.node == the node handler

Get created node list

Blackprint does expose model and components through sketch.scope('modelName').

var nodeList = sketch.scope('nodes').list;
var connectionList = sketch.scope('cables').list;

Blackprint options

Currently the available options still limited

name	value
visualizeFlow	true/false

sketch.settings(name, value);

Export Blackprint nodes

The nodes can be exported as JSON, but it's like the node namespace, position, value, and the connections.

var str = sketch.exportJSON();
// {"math/multiply":[...], ...}