tweakpane-plugin-infodump

This is an infodump plugin for Tweakpane. Provides a blade that displays text, optionally with a border and/or basic Markdown support. Intended for long descriptions (i.e., infodumps!) that wouldn't neatly fit into labels.

^{That text is, as you might have guessed based on the controls below, a Star Trek reference.}

This implementation is heavily based on the placeholder blade from the Tweakpane docs as mentioned in this issue.

Note: Version v0.3.0 and prior are compatible with Tweakpane 3.x. Newer versions match Tweakpane major versions (e.g., v4.0.0 is compatible with Tweakpane 4.0.0 and subsequent minor releases) but minor/patch versions may differ (due to bug fixes and improvements both here and there).

Installation

$3

Download the most recent release from here.

``html

`

You can also dynamically load the latest...

`js
import * as InfodumpPlugin from 'https://unpkg.com/tweakpane-plugin-infodump';
`

...or a fixed...

`js
import * as InfodumpPlugin from 'https://unpkg.com/tweakpane-plugin-infodump@4.0.1/dist/tweakpane-plugin-infodump.js';
`

...version via UNPKG if you're just quickly testing something (personally, I don't trust services like that for permanent, let alone production, use).

$3

You can install with npm:

`
npm install tweakpane-plugin-file-import
`

And import it like so.

`js
import {Pane} from 'tweakpane';
import * as InfodumpPlugin from 'tweakpane-plugin-infodump';

const pane = new Pane();
pane.registerPlugin(InfodumpPlugin);
`

Usage

`js
pane.addBlade({
view: "infodump",
content: "Major, lark's true pepper. Let birds go further loose maybe. Shout easy play.",
markdown: false,
});
`

The markdown switch is false by default, so you wouldn't need to specify it in this example.

Markdown compilation is provided by the slimdown-js package – a very lightweight and hence not entirely-spec-compliant Markdown parser which may or may not lead to issues when going beyond basic text formatting (for this reason, I haven't included CSS rules covering every possible Markdown construct – file an issue if you'd like improvements here.)

I recommend using backtick-delimited strings (where line breaks are allowed) for multiline Markdown, although you'll need to backslash-escape Markdown's code delimiters if you do so.

Development

$3

Clone this repository, then:

* Install dependencies:

`
$ npm install
`

* Build source codes and watch changes:

`
$ npm start
`

* Alternatively, open test/browser.html to see the result (due to restrictions regarding JavaScript modules when serving directly from the file system, you might need to run http-server in the root directory of your clone, then go to http://localhost:8080/test/browser.html).

* Cutting a release:

`
$ npm run assets
`

Then git push the current state of the code, upload the resulting ZIP file to GitHub (create a release with tag etc., name like "v4.0.0"), and don't forget to run npm publish.

$3

`
|- src
| |- sass ............ Plugin CSS
| |- index.ts ........ Entrypoint
| |- plugin.ts ....... Plugin
| |- controller.ts ... Controller for the custom view
| - view.ts ......... Custom view
|- dist ............... Compiled files
- test
- browser.html .... Plugin lab
```