### Starting Local Development Server (Shell)
Source: https://github.com/vector-js/vector/blob/master/README.md
Command to start a local web server, typically used to view examples or test the built library in a browser. It executes the start script defined in package.json.
```Shell
npm start
```
--------------------------------
### Embedding Vector.js Interactive in HTML
Source: https://github.com/vector-js/vector/blob/master/website/content/tutorials/getting-started/index.md
This HTML snippet sets up the basic page structure to host a Vector.js interactive. It includes the necessary CSS stylesheet, creates a `div` element with a unique ID (`my-interactive`) as the container for the SVG, and loads the main JavaScript file (`script.js`) using a module script type.
```html
Getting Started
```
--------------------------------
### Initializing Vector.js Interactive and Control Point - JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/tutorials/getting-started/index.md
This JavaScript snippet demonstrates how to initialize a Vector.js interactive instance within a specified HTML element using its ID. It imports the `Interactive` class, creates a new interactive object with a border enabled, adds a draggable control point at coordinates (100, 100), and logs both the control and interactive objects to the browser's console for debugging or inspection.
```javascript
import Interactive from "https://vectorjs.org/interactive.js";
// Construct an interactive within the HTML element with the id "my-interactive"
let myInteractive = new Interactive("my-interactive");
myInteractive.border = true;
// Construct a control point at the the location (100, 100)
let control = myInteractive.control(100, 100);
// Print the two objects to the console
console.log( control, myInteractive);
```
--------------------------------
### Installing NPM Dependencies (Shell)
Source: https://github.com/vector-js/vector/blob/master/README.md
Command to install all necessary Node.js package dependencies for the project. This step is crucial after cloning the repository to ensure all required libraries and tools are available for building and development.
```Shell
npm install
```
--------------------------------
### Placeholder for Interactive Event Handling Example in Javascript
Source: https://github.com/vector-js/vector/blob/master/website/content/svg/_index.md
A comment indicating a section intended to provide an interactive example demonstrating different types of JavaScript event handlers (like mouse or keyboard events) applied to basic SVG shapes, potentially changing colors or properties upon interaction.
```javascript
// TODO: interactive that displays types of event handlers being called
// Maybe some basic shapes with colors
```
--------------------------------
### Serving Hugo Website Locally (Shell)
Source: https://github.com/vector-js/vector/blob/master/README.md
Command to start the Hugo development server for the website content located in the current directory. This allows developers to preview website changes locally.
```Shell
hugo server
```
--------------------------------
### Creating and Layouting a Tree Graph with vector.js
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/tidy-algorithm.md
This JavaScript snippet demonstrates how to use the vector.js library to create an interactive graph and apply the `tidy()` algorithm for automatic tree layout. It initializes an interactive canvas, adds nodes and edges to define a specific tree structure, and then calls `graph.tidy()` on the root node to arrange the elements visually. A commented-out section provides an example of generating a larger tree.
```javascript
/**
* @title Tidy Algorithm
* @description Simple example of using the graph.tidy() function to draw a tree.
* @input None
* @tags [graph, tree]
* @weight 1
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 736;
interactive.height = 400;
interactive.border = true;
let graph = interactive.graph({ directed: false });
//Secondary example, creates a larger tree. Comment out this code and comment everything
//below it in order to switch examples.
// let root = graph.addNode(0, 0, "root")
// for(let i = 0; i < 5; i++){
// let parent = graph.addNode(0, 0, i);
// graph.addEdge(root, parent);
// for(let j = 0; j < 5; j++){
// let child = graph.addNode(0, 0, "" + i + " " + j);
// graph.addEdge(parent, child);
// }
// }
//
// graph.tidy(root);
// //
// let rect = (graph.root).getBBox();
//
// if(graph.size() == 1)
// {
// interactive.setViewBox(rect.x-32, rect.y-32, rect.width + 64, rect.height + 64)
// }
// else{
// interactive.setViewBox(rect.x-8, rect.y-8, rect.width + 16, rect.height + 16)
// }
let node1 = graph.addNode(0, 0, "O");
let node2 = graph.addNode(0, 0, "E");
let node3 = graph.addNode(0, 0, "F");
let node4 = graph.addNode(0, 0, "N");
let node5 = graph.addNode(0, 0, "A");
let node6 = graph.addNode(0, 0, "D");
let node7 = graph.addNode(0, 0, "B");
let node8 = graph.addNode(0, 0, "C");
let node9 = graph.addNode(0, 0, "G");
let node10 = graph.addNode(0, 0, "M");
let node11 = graph.addNode(0, 0, "H");
let node12 = graph.addNode(0, 0, "I");
let node13 = graph.addNode(0, 0, "J");
let node14 = graph.addNode(0, 0, "K");
let node15 = graph.addNode(0, 0, "L");
graph.addEdge(node1, node2);
graph.addEdge(node1, node3);
graph.addEdge(node1, node4);
graph.addEdge(node2, node5);
graph.addEdge(node2, node6);
graph.addEdge(node6, node7);
graph.addEdge(node6, node8);
graph.addEdge(node4, node9);
graph.addEdge(node4, node10);
graph.addEdge(node10, node11);
graph.addEdge(node10, node12);
graph.addEdge(node10, node13);
graph.addEdge(node10, node14);
graph.addEdge(node10, node15);
graph.tidy(node1);
//# sourceMappingURL=tidy-algorithm.js.map
```
--------------------------------
### Initializing Vector.js Interactive Element - JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/wumbo.md
This snippet imports the `Interactive` class, creates a new instance linked to an HTML element by ID, sets its border property, and adds a control element at a specific coordinate. It shows the basic steps to set up an interactive Vector.js component.
```javascript
/**
* @title Vector.js Hello World
* @description Hi!
* @tags []
* @ignore true
*/
import Interactive from '../../interactive.js';
let myInteractive = new Interactive('hello-world');
myInteractive.border = true;
myInteractive.control(100, 100);
//# sourceMappingURL=wumbo.js.map
```
--------------------------------
### Placeholder for Preformatted Text and Line Breaks in SVG
Source: https://github.com/vector-js/vector/blob/master/website/content/svg/_index.md
A comment indicating a section intended to cover preformatted text and manual line breaks examples within SVG. This snippet itself does not contain executable code but marks the topic.
```svg
```
--------------------------------
### Placeholder for Superscript and Subscript in SVG
Source: https://github.com/vector-js/vector/blob/master/website/content/svg/_index.md
A comment indicating a section intended to cover superscript and subscript text examples within SVG. This snippet itself does not contain executable code but marks the topic.
```svg
```
--------------------------------
### Placeholder for Auto Wrapping in SVG
Source: https://github.com/vector-js/vector/blob/master/website/content/svg/_index.md
A comment indicating a section intended to cover text auto-wrapping examples within SVG. This snippet itself does not contain executable code but marks the topic.
```svg
```
--------------------------------
### HTML Structure for Hosting Javascript SVG Creation
Source: https://github.com/vector-js/vector/blob/master/website/content/svg/_index.md
Provides the basic HTML boilerplate including a `div` with the ID "container" where the SVG will be appended and a `script` tag that loads the JavaScript file responsible for creating the SVG elements using the DOM API. This demonstrates the typical setup for client-side SVG generation.
```html
Create Element
```
--------------------------------
### Initializing and Rendering Cartesian System Interactive - JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/cartesian-coordinate-system-continuous.md
This JavaScript code initializes an interactive SVG canvas, sets up a Cartesian coordinate system with axes, a movable point, grid lines, and text displaying the point's coordinates. It uses the `@interactive-svg/library` package to manage SVG elements and interactions.
```javascript
/**
* @title Cartesian Coordinate System (Continuous)
* @description This interactive demonstrates the cartesian coordinate system.
* @tags [math]
* @ignore true
*/
// import Interactive from 'https://unpkg.com/@interactive-svg/library/dist/Interactive.js';
import { Interactive } from '../../index.js';
export default function main(id) {
// Initialize the interactive
let margin = 32;
let interactive = new Interactive(id);
// interactive.border = true;
interactive.originX = interactive.width / 2 + margin;
interactive.originY = interactive.height / 2 + margin;
interactive.width += 2 * margin;
interactive.height += 2 * margin;
interactive.style.overflow = 'visible';
// Create three control points
let point = interactive.control(0, 0);
let xAxis = interactive.line(-interactive.width / 2 + margin, 0, interactive.width / 2 - margin, 0);
let yAxis = interactive.line(0, -interactive.height / 2 + margin, 0, interactive.height / 2 - margin);
let rectangle = interactive.rectangle(xAxis.x1, yAxis.y1, xAxis.x2 - xAxis.x1, yAxis.y2 - yAxis.y1);
rectangle.classList.add('default');
point.constrainWithinBox(xAxis.x1, yAxis.y1, xAxis.x2, yAxis.y2);
interactive.circle(0, 0, 3).style.fill = '#404040';
let text = interactive.text(150, 150, "myText");
text.addDependency(point);
text.update = function () {
this.x = point.x + 15;
this.y = point.y - 15;
this.contents = `(${(point.x / 50).toFixed(2)}, ${(-point.y / 50).toFixed(2)})`;
};
text.update();
let marker = interactive.marker(10, 5, 10, 10);
marker.path('M 0 0 L 10 5 L 0 10 z').style.fill = '#404040';
marker.setAttribute('orient', 'auto-start-reverse');
xAxis.setAttribute('marker-end', `url(#${marker.id})`);
xAxis.setAttribute('marker-start', `url(#${marker.id})`);
yAxis.setAttribute('marker-end', `url(#${marker.id})`);
yAxis.setAttribute('marker-start', `url(#${marker.id})`);
let xAxisLabel = interactive.text(xAxis.x2 + 16, xAxis.y2, 'x');
xAxisLabel.setAttribute('alignment-baseline', 'middle');
let yAxisLabel = interactive.text(yAxis.x1, yAxis.y1 - 16, 'y');
yAxisLabel.setAttribute('text-anchor', 'middle');
let xPosition = interactive.line(0, 0, 0, 0);
xPosition.style.stroke = 'cornflowerblue';
xPosition.addDependency(point);
xPosition.update = function () {
this.x1 = point.x;
this.x2 = point.x;
this.y2 = point.y;
};
let yPosition = interactive.line(0, 0, 0, 0);
yPosition.style.stroke = 'cornflowerblue';
yPosition.addDependency(point);
yPosition.update = function () {
this.y1 = point.y;
this.x2 = point.x;
this.y2 = point.y;
};
let w = 50;
let h = 50;
for (let i = -6; i < 6; i++) {
for (let j = -3; j < 3; j++) {
let x = i * w;
let y = j * h;
let rect = interactive.rectangle(x, y, w, h);
rect.style.strokeOpacity = '.2';
rect.classList.add('default');
rect.root.setAttribute('vector-effect', 'non-scaling-stroke');
interactive.background.prependChild(rect);
}
}
point.translate(150, -100);
}
//# sourceMappingURL=cartesian-coordinate-system-continuous.js.map
```
--------------------------------
### Applying Specific viewBox for Zooming
Source: https://github.com/vector-js/vector/blob/master/website/content/svg/_index.md
Provides a concrete example of the viewBox attribute with specific values (130 100 350 200). This demonstrates how to define a smaller internal region of the SVG to be scaled up and displayed within the available viewport, effectively "zooming" into a specific area.
```SVG
```
--------------------------------
### Initializing Interactive and Adding Text Element (JavaScript)
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/text-element.md
This snippet initializes an Interactive canvas using the vector library with predefined dimensions and a border, and then adds a text element displaying "My Text" at the coordinates (50, 75). It requires the vector library to be imported.
```javascript
/**
* @title Text Element
* @description This interactive demonstrates the text element.
* @tags [elements]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 768;
interactive.height = 150;
interactive.root.style.border = "1px solid grey";
let line = interactive.text(50, 75, "My Text");
//# sourceMappingURL=text-element.js.map
```
--------------------------------
### Basic HTML Template with CDN Includes (KaTeX)
Source: https://github.com/vector-js/vector/blob/master/katex/README.md
Provides a minimal HTML5 document structure demonstrating how to include the necessary KaTeX CSS and JavaScript files from a CDN. Includes the core library and the auto-render extension to automatically render math within specified elements.
```HTML
...
```
--------------------------------
### Creating Interactive Control Points
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/svg-path-arc.md
Creates two interactive control points ('start' and 'control') using the 'Interactive' library. These points will serve as the start and end coordinates for the SVG arc command.
```javascript
let start = interactive.control(100, 120);
let control = interactive.control(200, 120);
```
--------------------------------
### Initializing Interactive Keyboard Simulation
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/keyboard.md
This snippet initializes an interactive SVG element using the 'vector' library, defines a virtual keyboard layout, creates button elements for each key, and sets up event listeners to capture real keyboard events (`keydown`, `keyup`). It visually highlights the corresponding virtual key buttons on the screen and updates their labels based on Shift or CapsLock state. Dependencies include the `Interactive` class and `getScriptName` function from the '../../index.js' module.
```javascript
/**
* @title Keyboard
* @description This interactive demonstrates how key board input can be used to add interactivity.
* @tags [input]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 768;
interactive.height = 300;
interactive.border = true;
let buffer = '';
let keys = [['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Backspace'],
['tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
['CapsLock', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'Enter'],
['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift'],
['fn', 'Control', 'Alt', 'Meta', ' ', 'Meta', 'Alt', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight']];
let buttons = [];
let keycodes = { "0": { "Symbol": 0, "Shift": ")" }, "1": { "Symbol": 1, "Shift": "!" }, "2": { "Symbol": 2, "Shift": "@" }, "3": { "Symbol": 3, "Shift": "#" }, "4": { "Symbol": 4, "Shift": "$" }, "5": { "Symbol": 5, "Shift": "%" }, "6": { "Symbol": 6, "Shift": "^" }, "7": { "Symbol": 7, "Shift": "&" }, "8": { "Symbol": 8, "Shift": "*" }, "9": { "Symbol": 9, "Shift": "(" }, "a": { "Symbol": "a", "Shift": "A" }, "b": { "Symbol": "b", "Shift": "B" }, "c": { "Symbol": "c", "Shift": "C" }, "d": { "Symbol": "d", "Shift": "D" }, "e": { "Symbol": "e", "Shift": "E" }, "f": { "Symbol": "f", "Shift": "F" }, "g": { "Symbol": "g", "Shift": "G" }, "h": { "Symbol": "h", "Shift": "H" }, "i": { "Symbol": "i", "Shift": "I" }, "j": { "Symbol": "j", "Shift": "J" }, "k": { "Symbol": "k", "Shift": "K" }, "l": { "Symbol": "l", "Shift": "L" }, "m": { "Symbol": "m", "Shift": "M" }, "n": { "Symbol": "n", "Shift": "N" }, "o": { "Symbol": "o", "Shift": "O" }, "p": { "Symbol": "p", "Shift": "P" }, "q": { "Symbol": "q", "Shift": "Q" }, "r": { "Symbol": "r", "Shift": "R" }, "s": { "Symbol": "s", "Shift": "S" }, "t": { "Symbol": "t", "Shift": "T" }, "u": { "Symbol": "u", "Shift": "U" }, "v": { "Symbol": "v", "Shift": "V" }, "w": { "Symbol": "w", "Shift": "W" }, "x": { "Symbol": "x", "Shift": "X" }, "y": { "Symbol": "y", "Shift": "Y" }, "z": { "Symbol": "z", "Shift": "Z" }, "`": { "Symbol": "`", "Shift": "~" }, "-": { "Symbol": "-", "Shift": "_" }, "=": { "Symbol": "=", "Shift": "+" }, ";": { "Symbol": ";", "Shift": ":" }, "'": { "Symbol": "'", "Shift": "\"" }, "[": { "Symbol": "[", "Shift": "{" }, "]": { "Symbol": "]", "Shift": "}" }, "\\": { "Symbol": "\\", "Shift": "|" }, ",": { "Symbol": ",", "Shift": "<" }, ".": { "Symbol": ".", "Shift": ">" }, "/": { "Symbol": "/", "Shift": "?" }, "Backspace": { "Symbol": "⌫", "Shift": "" }, "tab": { "Symbol": " ", "Shift": "" }, "CapsLock": { "Symbol": "⇪", "Shift": "" }, "Shift": { "Symbol": "⇧", "Shift": "" }, "Enter": { "Symbol": "⏎", "Shift": "" }, "Control": { "Symbol": "⌃", "Shift": "" }, "Alt": { "Symbol": "Alt", "Shift": "" }, "Meta": { "Symbol": "⌘", "Shift": "" }, "ArrowLeft": { "Symbol": "←", "Shift": "" }, "ArrowUp": { "Symbol": "↑", "Shift": "" }, "ArrowDown": { "Symbol": "↓", "Shift": "" }, "ArrowRight": { "Symbol": "→", "Shift": "" }, " ": { "Symbol": " ", "Shift": "" } };
let buttonMap = new Map();
let height = 32;
let margin = 8;
let capslock = interactive.button(0, 0, keycodes['CapsLock'].Symbol);
let shift = interactive.button(0, 0, keycodes['Shift'].Symbol);
for (let row = 0; row < keys.length; row++) {
let x = 32;
let prev;
for (let i = 0; i < keys[row].length; i++) {
let key = keys[row][i];
let width = 32;
let button;
switch (key) {
case 'CapsLock':
button = capslock;
width = 64;
break;
case 'Shift':
if (shift.x === 0) {
button = shift;
}
else {
button = interactive.button(0, 0, keycodes[key] != undefined ? keycodes[key].Symbol : key);
}
width = 90;
break;
case 'tab':
width = 50;
button = interactive.button(0, 0, keycodes[key] != undefined ? keycodes[key].Symbol : key);
break;
case ' ':
width = 176;
button = interactive.button(0, 0, keycodes[key] != undefined ? keycodes[key].Symbol : key);
break;
case 'Meta':
width = 50;
button = interactive.button(0, 0, keycodes[key] != undefined ? keycodes[key].Symbol : key);
break;
default:
button = interactive.button(0, 0, keycodes[key] != undefined ? keycodes[key].Symbol : key);
if (keycodes[key] != undefined) {
if (keycodes[key].Shift != '') {
button.addDependency(shift, capslock);
button.update = () => {
if (shift.active || capslock.active) {
button.label.contents = keycodes[key].Shift;
}
else {
button.label.contents = keycodes[key].Symbol;
}
};
}
}
}
button.x = x;
button.y = 64 + row * (height + margin);
if (button.box.width < width) {
button.box.width = width;
}
let bbox = button.root.getBBox();
x += bbox.width + margin;
buttons.push(button);
prev = button;
buttonMap.set(key, button);
if (key === "ArrowUp") {
button.box.height = 16;
button.label.root.style.display = 'none';
}
else if (key === "ArrowDown") {
button.box.height = 16;
button.x -= (32 + margin);
button.y += 16;
button.label.root.style.display = 'none';
x -= bbox.width + margin;
}
}
let right = prev.x;
if (right < 630) {
prev.box.width = 630 - right;
}
}
// console.log(keycodes["0"], shift, capslock);
let active = [];
window.onkeydown = function (event) {
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i];
if (button.label.contents === event.key || (keycodes[event.key] != undefined && button.label.contents === keycodes[event.key].Symbol)) {
button.box.style.fill = '#f8f8f8';
button.label.style.fill = '#404040';
button.active = true;
active.push(button);
}
}
buffer += `'${event.key}',`;
};
window.onkeyup = function (event) {
let newActive = [];
for (let button of active) {
if (button.label.contents === event.key || (keycodes[event.key] != undefined && button.label.contents === keycodes[event.key].Symbol)) {
button.box.style.fill = '';
button.label.style.fill = '';
button.active = false;
}
else {
newActive.push(button);
}
}
active = newActive;
};
let bbox = interactive.input.root.getBBox();
interactive.setViewBox(bbox.x - margin, bbox.y, bbox.width + 2 * margin, bbox.height);
//# sourceMappingURL=keyboard.js.map
```
--------------------------------
### Setting up Cartesian Coordinate Interactive
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/cartesian-coordinate-system-test.md
Initializes an interactive SVG environment, sets up cartesian axes, grid lines, a draggable control point, and dynamic text labels displaying the point's coordinates. It uses the `Interactive` library and includes custom constraints for the point to snap to a grid and stay within bounds.
```javascript
/**
* @title Cartesian Coordinate System
* @description This interactive demonstrates the cartesian coordinate system.
* @tags [math]
* @ignore true
*/
// import Interactive from 'https://unpkg.com/@interactive-svg/library/dist/Interactive.js';
import { Interactive, getScriptName, download } from '../../index.js';
/**
* A point has an x position and y position
*/
class Point {
}
// Initialize the interactive
let margin = 32;
let width = 600;
let height = 300;
let interactive = new Interactive(getScriptName(), {
width: width + 2 * margin,
height: height + 2 * margin,
originX: margin,
originY: height + margin
});
// interactive.border = true;
interactive.style.overflow = 'visible';
// Create three control points
let point = interactive.control(0, 0);
let xAxis = interactive.line(0, 0, width, 0);
let yAxis = interactive.line(0, 0, 0, -height);
point.constrainWithinBox(0, -height, width, 0);
let boxConstraint = point.constrain;
point.constrain = (o, n) => {
// first snap to grid
let x = 50 * Math.round(n.x / 50);
let y = 50 * Math.round(n.y / 50);
// then constrain within box
let p = boxConstraint({ x: x, y: y }, { x: x, y: y });
return { x: p.x, y: p.y };
};
let text = interactive.text(150, 150, "myText");
text.addDependency(point);
text.update = function () {
this.x = point.x + 15;
this.y = point.y - 15;
this.contents = `(${point.x / 50},${-point.y / 50})`;
};
text.update();
let marker = interactive.marker(10, 5, 10, 10);
marker.path('M 0 0 L 10 5 L 0 10 z').style.fill = '#404040';
marker.setAttribute('orient', 'auto-start-reverse');
xAxis.setAttribute('marker-end', `url(#${marker.id})`);
yAxis.setAttribute('marker-end', `url(#${marker.id})`);
let xAxisLabel = interactive.text(xAxis.x2 + 16, xAxis.y2, 'x');
xAxisLabel.setAttribute('alignment-baseline', 'middle');
let yAxisLabel = interactive.text(yAxis.x1, yAxis.y2 - 16, 'y');
yAxisLabel.setAttribute('text-anchor', 'middle');
let xPosition = interactive.line(0, 0, 0, 0);
xPosition.style.stroke = 'cornflowerblue';
xPosition.addDependency(point);
xPosition.update = function () {
this.x1 = point.x;
this.x2 = point.x;
this.y2 = point.y;
};
let yPosition = interactive.line(0, 0, 0, 0);
yPosition.style.stroke = 'cornflowerblue';
yPosition.addDependency(point);
yPosition.update = function () {
this.y1 = point.y;
this.x2 = point.x;
this.y2 = point.y;
};
let w = 50;
let h = 50;
for (let i = 0; i <= 12; i++) {
let x = i * w;
let vertical = interactive.line(x, 0, x, -height);
let label = interactive.text(x, 25, i.toString());
label.style.textAnchor = 'middle';
label.style.alignmentBaseline = 'middle';
vertical.style.strokeOpacity = '.2';
}
for (let i = 0; i <= 6; i++) {
let y = i * h;
let horizontal = interactive.line(0, -y, width, -y);
let label = interactive.text(-25, -y, i.toString());
label.style.textAnchor = 'middle';
label.style.alignmentBaseline = 'middle';
horizontal.style.strokeOpacity = '.2';
}
point.translate(150, -100);
window.download = download;
interactive.circle(0, 0, 3).style.fill = '#404040';
//# sourceMappingURL=cartesian-coordinate-system-test.js.map
```
--------------------------------
### Creating Interactive SVG Translate Example - JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/svg-translate.md
This JavaScript code initializes an interactive SVG environment using the 'vector-js' library. It creates a group of colored rectangles and a draggable control point. The position of the control point is used to dynamically generate a `translate(x, y)` transform string, which is then applied to the rectangle group, allowing users to visually translate the SVG element.
```javascript
/**
* @title SVG Transform Translate Attribute
* @description This interactive how the translate transformation can be applied to a SVG element.
* @tags [svg]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 736;
interactive.height = 300;
interactive.border = true;
let w = 50;
interactive.originX = interactive.width / 2 - w;
interactive.originY = interactive.height / 2 - w;
let group = interactive.group();
let r1 = interactive.rectangle(0, 0, w, w);
let r2 = interactive.rectangle(w, 0, w, w);
let r3 = interactive.rectangle(0, w, w, w);
let r4 = interactive.rectangle(w, w, w, w);
group.root.appendChild(r1.root);
group.root.appendChild(r2.root);
group.root.appendChild(r3.root);
group.root.appendChild(r4.root);
r4.style.fill = '#d8d8d8';
r3.style.fill = '#aaaaaa';
r2.style.fill = '#555555';
r1.style.fill = '#333333';
group.style.opacity = '.7';
let control = interactive.control(0, 0);
let translateText = interactive.text(75, interactive.maxY - 20, '');
translateText.addDependency(control);
translateText.update = function () {
translateText.contents = `translate(${control.x}, ${control.y})`;
};
translateText.root.setAttribute('alignment-baseline', 'middle');
translateText.root.setAttribute('text-anchor', 'middle');
translateText.update();
group.addDependency(translateText);
group.update = function () {
group.root.setAttribute('transform', translateText.contents);
};
//# sourceMappingURL=svg-translate.js.map
```
--------------------------------
### Including KaTeX via CDN HTML
Source: https://github.com/vector-js/vector/blob/master/docs/katex/README.md
Provides a minimal HTML template demonstrating how to include KaTeX CSS and JavaScript files using CDN links. It includes the core library and the auto-render extension, configured to automatically render math within the document body upon script load using `onload="renderMathInElement(document.body);"`.
```HTML
...
```
--------------------------------
### Initializing Vector.js Interactive Canvas - JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/hello-world.md
This snippet initializes an interactive canvas using the Vector.js library. It imports the `Interactive` class, creates an instance targeting an element with the ID 'hello-world', enables a border for the canvas, and adds a control element at coordinates (100, 100). It requires the Vector.js library, specifically the `interactive.js` module, to be available.
```javascript
/**
* @title Vector.js Hello World
* @description Hi!
* @tags []
* @ignore true
*/
import Interactive from '../interactive.js';
let interactive = new Interactive('hello-world');
interactive.border = true;
interactive.control(100, 100);
//# sourceMappingURL=hello-world.js.map
```
--------------------------------
### Changing Directory to Website (Shell)
Source: https://github.com/vector-js/vector/blob/master/README.md
Command to navigate into the 'website' subdirectory of the repository. This is required before running commands specific to the documentation website.
```Shell
cd website
```
--------------------------------
### Applying Inline Styling to SVG Element
Source: https://github.com/vector-js/vector/blob/master/website/content/svg/_index.md
Shows how to apply styles directly to a single SVG element using the style attribute. This example sets the fill color of a element to purple.
```SVG
```
--------------------------------
### Calling mirrorCircle Function JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/right-triangle.md
Calls the `mirrorCircle` helper function, passing the control point `p2`. This creates a circle that visually tracks the movement of the `p2` control point.
```javascript
mirrorCircle(p2);
```
--------------------------------
### Initializing Trigonometric Functions Interactive
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/trigonometric-functions.md
Initializes the main interactive area and sets up dimensions, scales, and margin for the trigonometric function visualizations. It imports necessary components from the vector.js library and defines a helper class `NumberWrapper` for creating reactive number variables used to track the angle. This setup prepares the stage for drawing the unit circle and function plots.
```javascript
/**
* @title Trigonometric Functions
* @description This interactive shows the connection between the three trigonometric functions and the unit circle.
* @tags [math]
* @ignore true
*/
import { Interactive, getScriptName, download } from '../../index.js';
import Group from '../../elements/svg/group.js';
// Initialize the interactive
let interactive = new Interactive(getScriptName());
let width = 230;
let scale = width / Math.PI;
let radius = scale;
let margin = 2 * radius - width / 2;
// let functions = [Math.cos, Math.sin, Math.tan];
let functions = [Math.cos, Math.sin];
interactive.height = functions.length * width + (functions.length - 1) * margin;
interactive.width = width + margin + 2 * width;
class NumberWrapper extends Group {
constructor(value) {
super();
this._value = value;
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.updateDependents();
}
}
let angle = new NumberWrapper(0);
let y = 0;
for (let f of functions) {
let circleInteractive = interactive.interactive(0, y); // TODO: check this logic
circleInteractive.rectangle(-width / 2, -width / 2, width, width);
circleInteractive.height = width;
circleInteractive.width = width;
circleInteractive.originX = circleInteractive.width / 2;
circleInteractive.originY = circleInteractive.height / 2;
let triangle = circleInteractive.path('');
let circle = circleInteractive.circle(0, 0, radius);
let control = circleInteractive.control(circle.r, 0);
control.constrainTo(circle);
control.addDependency(angle);
control.update = function () {
this.x = circle.r * Math.cos(angle.value);
this.y = -circle.r * Math.sin(angle.value);
};
control.onchange = function () {
if (control.y <= 0) {
angle.value = Math.abs(Math.atan2(control.y, control.x));
}
else {
angle.value = Math.PI * 2 - Math.atan2(control.y, control.x);
}
};
triangle.addDependency(control, angle);
if (f === Math.tan) {
triangle.update = function () {
triangle.d = `M 0 0
L ${Math.sign(control.x) * Math.abs(circle.r)} ${0}
L ${Math.sign(control.x) * Math.abs(circle.r)} ${Math.sign(control.y) * Math.abs(circle.r * Math.tan(angle.value))}
Z`;
};
}
else {
triangle.update = function () {
triangle.d = `M 0 0
L ${control.x} 0
L ${control.x} ${control.y}
Z`;
};
}
triangle.update();
// triangle.style.stroke = 'none';
triangle.style.fill = '#f8f8f8';
let side = circleInteractive.line(0, 0, 0, 0);
switch (f) {
case Math.cos:
side.update = function () {
side.x2 = control.x;
};
break;
case Math.sin:
side.update = function () {
side.x1 = control.x;
side.x2 = control.x;
side.y2 = control.y;
};
break;
case Math.tan:
side = circleInteractive.line(circle.r, 0, circle.r, 0);
side.update = function () {
if (control.x < 0) {
side.x1 = -circle.r;
side.x2 = -circle.r;
}
else {
side.x1 = circle.r;
side.x2 = circle.r;
}
side.y2 = Math.sign(control.y) * Math.abs(circle.r * Math.tan(angle.value));
};
}
side.style.stroke = 'cornflowerblue';
side.style.strokeWidth = '2';
// side.setAttribute('transform', 'scale(1,-1)');
side.addDependency(angle, control);
side.update();
circleInteractive.circle(0, 0, 3).style.fill = '#404040';
let plotInteractive = interactive.interactive(width + margin, y, {
width: 2 * width,
height: width
});
let plot = plotInteractive.plot(f, {
width: 2 * width,
height: width,
scaleX: scale,
scaleY: scale,
originX: 0,
originY: width / 2,
zoomable: false,
displayPoint: false,
border: true
});
let line = plot.staticGroup.line(0, 0, 0, 0);
line.setAttribute('transform', 'scale(1,-1)');
line.style.stroke = 'cornflowerblue';
line.style.strokeWidth = '2';
line.addDependency(angle);
line.update = function () {
line.x1 = scale * angle.value;
line.y1 = 0;
line.x2 = line.x1;
line.y2 = plot.call(line.x1);
};
let chartControl = interactive.control(0, 0);
plot.staticGroup.appendChild(chartControl);
chartControl.addDependency(angle, plot);
chartControl.update = function () {
chartControl.x = scale * angle.value;
chartControl.y = -plot.call(chartControl.x);
};
chartControl.update();
chartControl.constrain = (oldPos, newPos) => {
let x = (plotInteractive.width + newPos.x) % plotInteractive.width;
let y = -plot.call(x);
return { x: x, y: y };
};
chartControl.onchange = function () {
angle.value = chartControl.x / scale;
};
// draw gridlines
for (let i = -5; i <= 10; i++) {
for (let j = -5; j <= 5; j++) {
let rect1 = plot.viewPort.rectangle(i, j, 1, 1);
let rect2 = circleInteractive.rectangle(i * circle.r, j * circle.r, circle.r, circle.r);
circleInteractive.background.prependChild(rect2);
rect1.root.setAttribute('vector-effect', 'non-scaling-stroke');
rect2.root.setAttribute('vector-effect', 'non-scaling-stroke');
rect1.style.strokeOpacity = '.25';
rect2.style.strokeOpacity = '.25';
}
}
y += width + margin;
}
angle.value = 1;
window.download = download;
//# sourceMappingURL=trigonometric-functions.js.map
```
--------------------------------
### Creating Control Points JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/right-triangle.md
Creates two draggable control points, `p1` and `p2`, using the `interactive.control()` method. These points serve as input for defining the geometry of the right triangle and other associated shapes.
```javascript
// Create two control points
let p1 = interactive.control(100, -80);
let p2 = interactive.control(-100, 80);
```
--------------------------------
### Handling Keyboard Input and Updating UI
Source: https://github.com/vector-js/vector/blob/master/website/content/examples/key-board-input.md
This JavaScript code initializes an interactive canvas using the `Interactive` library, creates five numbered rectangles and text labels, and adds event listeners to the window. The `onkeydown` listener changes the appearance of the corresponding rectangle and text when keys '1' through '5' are pressed, while the `onkeyup` listener restores their original appearance when the keys are released. It requires the `Interactive` class from the local `vector` library.
```javascript
/**
* @title Keyboard Input
* @description This interactive demonstrates how key board input can be used to add interactivity.
* @tags [input]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 768;
interactive.height = 150;
interactive.border = true;
let keys = [];
let textKeys = [];
for (let i = 0; i < 5; i++) {
let x = i * 100 + 25;
let y = 75 - 32;
let rectangle = interactive.rectangle(x, y, 64, 64);
rectangle.root.setAttribute('rx', '3px');
12341;
let text = interactive.text(x + 32, y + 32, (i + 1).toString());
text.root.setAttribute('alignment-baseline', 'middle');
text.root.setAttribute('text-anchor', 'middle');
keys.push(rectangle);
textKeys.push(text);
}
window.onkeydown = function (event) {
let index = parseInt(event.key) - 1;
if (index >= 0 && index < 5) {
keys[index].root.style.fill = '#404040';
textKeys[index].root.style.fill = '#ffffff';
}
};
window.onkeyup = function (event) {
let index = parseInt(event.key) - 1;
if (index >= 0 && index < 5) {
keys[index].root.style.fill = 'none';
textKeys[index].root.style.fill = '';
}
};
//# sourceMappingURL=key-board-input.js.map
```
--------------------------------
### Creating Rectangle Element JavaScript
Source: https://github.com/vector-js/vector/blob/master/website/content/_index.md
Creates a rectangle element starting at position (50, 50) with a width of 100 and a height of 50 using the `interactive` object. This is a basic visual element corresponding to the SVG element.
```javascript
let rectangle = interactive.rectangle( 50, 50, 100, 50);
```