Is it possible to customize the toolbar?

[starker-xp]

Yes, you can modify the "toolbar" slot by overriding it. You'll find the default code at: https://github.com/newcat/baklavajs/blob/master/packages/renderer-vue/src/toolbar/Toolbar.vue

If you'd like to remove the toolbar until the next release (>2.3.0) , which will allow you to disable it via an option, you can use this hack:

<EditorComponent :view-model="baklava">
  <template #toolbar>{{ '' }}</template>
</EditorComponent>

[chuteany]

Thank you, your explanation has given me great inspiration. However, I want to add or remove several features on the existing toolbar. How can I achieve this?

[starker-xp]

The easiest way is to copy the Toolbar.vue file into a MyToolbar.vue file in your project and add the desired behavior.

MyToolbar.vue

<template>
    <div class="baklava-toolbar">
        <toolbar-button v-for="c in commands" :key="c.command" :command="c.command" :title="c.title" :icon="c.icon" />
        <!-- Add your code here -->
        <template v-if="isSubgraph">
            <toolbar-button
                v-for="c in subgraphCommands"
                :key="c.command"
                :command="c.command"
                :title="c.title"
                :icon="c.icon"
            />
            <!-- Add your code here -->
        </template>
        <!-- Add your code here -->
    </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { useViewModel } from "../utility";
import {
    COPY_COMMAND,
    PASTE_COMMAND,
    UNDO_COMMAND,
    REDO_COMMAND,
    CREATE_SUBGRAPH_COMMAND,
    SAVE_SUBGRAPH_COMMAND,
} from "../commandList";
import { SWITCH_TO_MAIN_GRAPH_COMMAND } from "../graph";
import * as Icons from "../icons";
import ToolbarButton from "./ToolbarButton.vue";

export default defineComponent({
    components: { ToolbarButton },
    setup() {
        const { viewModel } = useViewModel();

        const isSubgraph = computed(() => viewModel.value.displayedGraph !== viewModel.value.editor.graph);

        const commands = [
            { command: COPY_COMMAND, title: "Copy", icon: Icons.Copy },
            { command: PASTE_COMMAND, title: "Paste", icon: Icons.Clipboard },
            { command: UNDO_COMMAND, title: "Undo", icon: Icons.ArrowBackUp },
            { command: REDO_COMMAND, title: "Redo", icon: Icons.ArrowForwardUp },
            { command: CREATE_SUBGRAPH_COMMAND, title: "Create Subgraph", icon: Icons.Hierarchy2 },
        ];

        const subgraphCommands = [
            { command: SAVE_SUBGRAPH_COMMAND, title: "Save Subgraph", icon: Icons.DeviceFloppy },
            { command: SWITCH_TO_MAIN_GRAPH_COMMAND, title: "Back to Main Graph", icon: Icons.ArrowLeft },
        ];
        <!-- Add your code here -->
        return { isSubgraph, commands, subgraphCommands };
    },
});
</script>

App.vue

<EditorComponent :view-model="baklava">
  <template #toolbar><MyToolbar /></template>
</EditorComponent>

[chuteany]

Oh, thank you. This is a viable method, but I'm wondering if there's a way to add a method to baklavaView.settings.toolbar or some other way to more efficiently meet this requirement.

[starker-xp]

In the next version, we'll be able to activate and deactivate all parts of the editor. But what else do you want to be able to manage?

[chuteany]

Thank you, not at the moment.