Question: Is there an example for a custom option in a node?

Hi @newcat

I am testing your framework and I really like it. I am wondering if you have an example of a custom Option somewhere. I have seen somewhere screenshots of a node showing an image or a color selector, but do not know how one would go about building such a custom option. Is there maybe a codesandbox example or the like?

Btw, I also tried to build the baklavajs playground in search for a custom option, but when running yarn run serve it resulted in the following errors. What am I doing wrong?

 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 ERROR  Failed to compile with 7 errors                                                                                                                                           9:50:01 PM

This dependency was not found:

* @baklavajs/events in ../baklavajs-core/src/connection.ts, ../baklavajs-core/src/editor.ts and 5 others

To install it, you can run: npm install --save @baklavajs/events
Type checking and linting in progress...
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-core/src/connection.ts(3,30):
3:30 Cannot find module '@baklavajs/events' or its corresponding type declarations.
    1 | import { NodeInterface } from "./nodeInterface";
    2 | import generateId from "./idGenerator";
  > 3 | import { BaklavaEvent } from "@baklavajs/events";
      |                              ^
    4 | import { IConnection, ITransferConnection } from "../types/connection";
    5 | 
    6 | export class Connection implements ITransferConnection {
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-core/src/editor.ts(5,71):
5:71 Cannot find module '@baklavajs/events' or its corresponding type declarations.
    3 | import { Connection, DummyConnection } from "./connection";
    4 | import { IState } from "../types/state";
  > 5 | import { PreventableBaklavaEvent, BaklavaEvent, SequentialHook } from "@baklavajs/events";
      |                                                                       ^
    6 | import { IEditor, IPlugin, IConnection, NodeConstructor, INode, IAddConnectionEventData, IAddNodeTypeEventData } from "../types";
    7 | import generateId from "./idGenerator";
    8 | 
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-core/src/node.ts(5,71):
5:71 Cannot find module '@baklavajs/events' or its corresponding type declarations.
    3 | import { INodeState } from "../types/state";
    4 | import { Editor } from "./editor";
  > 5 | import { PreventableBaklavaEvent, BaklavaEvent, SequentialHook } from "@baklavajs/events";
      |                                                                       ^
    6 | import { NodeOption } from "./nodeOption";
    7 | import { INode, IAddInterfaceEventData, IAddOptionEventData, IOptionEventData, INodeUpdateEventData } from "../types";
    8 | 
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-core/src/nodeInterface.ts(3,71):
3:71 Cannot find module '@baklavajs/events' or its corresponding type declarations.
    1 | import generateId from "./idGenerator";
    2 | import { IInterfaceState } from "../types/state";
  > 3 | import { BaklavaEvent, PreventableBaklavaEvent, SequentialHook } from "@baklavajs/events";
      |                                                                       ^
    4 | import { INodeInterface, INode } from "../types";
    5 | 
    6 | export class NodeInterface implements INodeInterface {
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-core/src/nodeOption.ts(2,55):
2:55 Cannot find module '@baklavajs/events' or its corresponding type declarations.
    1 | import { INodeOption } from "../types/nodeOption";
  > 2 | import { PreventableBaklavaEvent, BaklavaEvent } from "@baklavajs/events";
      |                                                       ^
    3 | 
    4 | export class NodeOption implements INodeOption {
    5 |     /** Name of the component that should be displayed for the option */
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-playground/src/App.vue(58,58):
58:58 Parameter 'r' implicitly has an 'any' type.
    56 | 
    57 |         this.engine = new Engine(true);
  > 58 |         this.engine.events.calculated.addListener(this, (r) => {
       |                                                          ^
    59 |             for (const v of r.values()) {
    60 |                 // tslint:disable-next-line:no-console
    61 |                 console.log(v);
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-playground/src/App.vue(72,53):
72:53 Parameter 'node' implicitly has an 'any' type.
    70 |         this.editor.use(new OptionPlugin());
    71 | 
  > 72 |         this.viewPlugin.hooks.renderNode.tap(this, (node) => {
       |                                                     ^
    73 |             if (node.data.type === "TestNode") {
    74 |                 (node.$el as HTMLElement).style.backgroundColor = "red";
    75 |             }
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-plugin-engine/src/engine.ts(1,71):
1:71 Cannot find module '@baklavajs/events' or its corresponding type declarations.
  > 1 | import { BaklavaEvent, PreventableBaklavaEvent, SequentialHook } from "@baklavajs/events";
      |                                                                       ^
    2 | import { IEditor, INode, IPlugin, INodeInterface, IConnection } from "../../baklavajs-core/types";
    3 | import { IInterfaceTypePlugin } from "../../baklavajs-plugin-interface-types/types";
    4 | import { calculateOrder, containsCycle } from "./nodeTreeBuilder";
ERROR in /Users/jakob/Downloads/baklavajs-master/packages/baklavajs-plugin-renderer-vue/src/viewPlugin.ts(3,32):
3:32 Cannot find module '@baklavajs/events' or its corresponding type declarations.
    1 | import Vue, { VueConstructor } from "vue";
    2 | import { IPlugin, IEditor } from "../../baklavajs-core/types";
  > 3 | import { SequentialHook } from "@baklavajs/events";
      |                                ^
    4 | import { IViewNode, IViewPlugin } from "../types";
    5 | 
    6 | import NodeView from "./components/node/Node.vue";
No lint errors found
Version: typescript 3.9.3, tslint 5.20.1
Time: 9952ms

[newcat]

I see. You don’t need to create another ViewPlugin instance, the createBaklava function does that for you (in fact, the plugin that is being returned is the ViewPlugin instance). So just remove const viewPlugin = new ViewPlugin(); and editor.use(viewPlugin);. Then you can change viewPlugin.registerOption('MyOption', MyOption); to plugin.registerOption('MyOption', MyOption); and you should be good to go.

I created a CodeSandbox for this. Note, that I import Vue from "vue/dist/vue", because for some reason it imports the runtime-only build when doing import Vue from "vue". This runtime-only build can’t compile template strings. However, that leads to two Vue instances being created, since the createBaklava function does import Vue from "vue", which in turn can lead to issues. So when using more advanced stuff like creating custom components for node options, I suggest switching to a Vue build setup and using Single File Components, like @LukasLoeffler did in his CodeSandbox.

[LukasLoeffler]

I have not confirmed yet, but I think you missed to register the option in the viewplugin. Maybe try: viewPlugin.registerOption("MyOption", option);

Edit: I forked the official codesandbox and created you example: Example Codesandbox Note: I moved the option to a seperate file.