Interfaccia di editing personalizzata

Un’applicazione 4B Pen con Vue comprende normalmente tre livelli:

1. @open-pencil/core crea l’editor;
2. @open-pencil/vue lo collega a composable e componenti Vue senza stile;
3. l’applicazione definisce disposizione, stile e comportamento specifico del prodotto.

Casi d’uso

L’applicazione 4B Pen è solo una possibile interfaccia. Il SDK permette di creare un editor integrato in un altro prodotto, uno strumento interno per risorse, un editor di modelli, un’interfaccia di annotazione o un editor specializzato assistito dall’AI.

Struttura consigliata

Un’interfaccia tipica:

• esegue provideEditor() in alto nell’albero dei componenti;
• posiziona il canvas al centro;
• mostra pagine e livelli in un pannello laterale;
• mostra le proprietà nel pannello opposto;
• controlla menu e barre degli strumenti tramite composable.

Esempio

<script setup lang="ts">
import { createEditor } from '@open-pencil/core/editor'
import {
  provideEditor,
  CanvasRoot,
  CanvasSurface,
  ToolbarRoot,
  PageListRoot,
} from '@open-pencil/vue'

const editor = createEditor({ width: 1440, height: 900 })
provideEditor(editor)
</script>

<template>
  <div class="grid h-screen grid-cols-[240px_1fr_320px] grid-rows-[48px_1fr]">
    <ToolbarRoot v-slot="{ tools, activeTool, setTool }">
      <header class="col-span-3">
        <button v-for="tool in tools" :key="tool.id" @click="setTool(tool.id)">
          {{ tool.label }}
        </button>
      </header>
    </ToolbarRoot>

    <aside><PageListRoot /></aside>
    <main><CanvasRoot><CanvasSurface class="size-full" /></CanvasRoot></main>
    <aside>Pannello proprietà</aside>
  </div>
</template>

Responsabilità

• Il SDK gestisce l’integrazione con l’editor e la logica riutilizzabile.
• L’applicazione controlla disposizione, stile e azioni proprie.
• I composable forniscono i dati di menu e pannelli senza imporre ulteriori componenti contenitore.