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 follow the Tweakpane versioning (e.g., v4.0.0 is compatible with Tweakpane 4.0.0 and subsequent minor releases).

Installation

Browser

Download the most recent release from here.

<script type="module">
  import {Pane} from 'tweakpane.js';
    import * as InfodumpPlugin from 'tweakpane-plugin-infodump.js';

  const pane = new Pane();
  pane.registerPlugin(InfodumpPlugin);
</script>

Package

import {Pane} from 'tweakpane';
import * as InfodumpPlugin from 'doersino/tweakpane-plugin-infodump';

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

Usage

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

Quick start

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 upload the resulting ZIP file to GitHub.

File structure

|- 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