placeholder plugin

[Teufeuleu]

Hi, I wanted to make some quite verbose/informative blades (for example to display some instructions about how to use some input blades) and I found that the ones used to illustrate what a blade actually is (in the Quick tour) would be useful to me and that they are created with a placeholder plugin. The thing is, I never had to deal with typescript before and I'm kind of lost. I think I found the plugin source and its compiled version inside of a de-minified bundle.js served with the webpage, but I can't make it work by importing the relevant parts into my code. Sorry to ask for help for such a trivial problem. By the way, why not make this placeholder plugin available as other plugins?

Also, thanks for tweakplane as a whole, I'm already loving it.

[cocopon]

Thank you for using Tweakpane.

This plugin is just for the document and I don't have a plan to publish it as a library.

BTW here is a complete example for porting the placeholder plugin to pure JavaScript:

import { Pane } from "tweakpane";
import {
  BladeController,
  ClassName,
  createBlade,
  ParamsParsers,
  parseParams,
  BladeApi
} from "@tweakpane/core";

const className = ClassName("ph");

class PlaceholderView {
  constructor(doc, config) {
    this.element = doc.createElement("div");
    this.element.classList.add(className());
    this.element.style.height = `calc(${config.lineCount} * var(--bld-us))`;
    config.viewProps.bindClassModifiers(this.element);

    const titleElem = doc.createElement("div");
    titleElem.classList.add(className("t"));
    titleElem.textContent = config.title;
    this.element.appendChild(titleElem);
  }
}

class PlaceholderController extends BladeController {
  constructor(doc, config) {
    super({
      blade: createBlade(),
      view: new PlaceholderView(doc, config),
      viewProps: config.viewProps
    });
  }
}

export const PlaceholderPlugin = {
  id: "placeholder",
  type: "blade",
  css: `.tp-phv {
    align-items: center;
    display: flex;
    height: var(--bld-us);
    position: relative;
}
.tp-phv::before {
    border: var(--mo-fg) dashed 1px;
    border-radius: var(--elm-br);
    bottom: 0;
    content: '';
    left: var(--cnt-v-p);
    opacity: 0.3;
    position: absolute;
    right: var(--cnt-v-p);
    top: 0;
}
.tp-phv_t {
    box-sizing: border-box;
    color: var(--mo-fg);
    flex: 1;
    padding: 4px;
    text-align: center;
}
`,
  accept(params) {
    const p = ParamsParsers;
    const r = parseParams(params, {
      lineCount: p.optional.number,
      title: p.required.string,
      view: p.required.constant("placeholder")
    });
    return r ? { params: r } : null;
  },
  controller(args) {
    return new PlaceholderController(args.document, {
      lineCount: args.params.lineCount ?? 1,
      title: args.params.title,
      viewProps: args.viewProps
    });
  },
  api(args) {
    if (!(args.controller instanceof PlaceholderController)) {
      return null;
    }
    return new BladeApi(args.controller);
  }
};

const pane = new Pane({
  title: "ettings",
  expanded: true
});

pane.registerPlugin({
  plugin: PlaceholderPlugin
});

pane.addBlade({
  view: "placeholder",
  title: "hello",
  lineCount: 3
});

https://codesandbox.io/s/tweakpane-sandbox-forked-nv5djz?file=/src/index.js

[Teufeuleu]

Thanks for the support! Unfortunately I'm not confident enough with node and parcel to do what I'm supposed to do now, not even able to run your example locally... so I guess I will try another way like using custom html and organizing my panes differently. Thanks tho!

[doersino]

Hi! I've been looking for a similar piece of functionality, which I (eventually!) managed to implement based on the placeholder plugin – maybe it'll cover your use case, @Teufeuleu: https://github.com/doersino/tweakpane-plugin-infodump

[cocopon]

Closed. Thank you @doersino for the great plugin!