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.

Installation

Browser

Download the most recent release from here.

<script src="tweakpane.min.js"></script>
<script src="tweakpane-plugin-infodump.min.js"></script>
<script>
  const pane = new Tweakpane.Pane();
  pane.registerPlugin(TweakpaneInfodumpPlugin);
</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.",
  border: false,
  markdown: false,
});

Both the border and markdown switches are false by default, so you wouldn't need to specify them 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
  

• Open test/browser.html to see the result.

• 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