Danila Poyarkov 14325280d9 docs(i18n): translate all missing pages to 6 languages

- 78 SDK pages per language (components, composables, advanced API,
  guides, architecture, getting-started)
- vector-edit.md user guide page (5 languages)
- Update stale ru/programmable/cli/inspecting.md
- Fix YAML frontmatter quoting for colons in descriptions

474 files, 0 missing pages across de/es/fr/it/pl/ru.
VitePress build verified — all 546 SDK pages render.

2026-04-22 18:35:22 +03:00

2.8 KiB

Raw Permalink Blame History

title	description
Démarrage rapide SDK	Configurez @open-pencil/vue avec createEditor, provideEditor et un canvas.

Démarrage rapide SDK

Installation

bun add @open-pencil/core @open-pencil/vue canvaskit-wasm

Le SDK est hébergé dans le monorepo et également publié sous le nom @open-pencil/vue.

import { createEditor } from '@open-pencil/core/editor'
import { provideEditor, useCanvas } from '@open-pencil/vue'

Modèle mental

Il y a trois couches :

@open-pencil/core — moteur d'édition indépendant du framework
@open-pencil/vue — composables Vue et primitives headless
votre application — styles, routage, flux de fichiers, UI spécifique au produit

Configuration minimale

1. Créer un éditeur

import { createEditor } from '@open-pencil/core/editor'

const editor = createEditor({
  width: 1200,
  height: 800,
})

2. Le fournir à Vue

<script setup lang="ts">
import { provideEditor } from '@open-pencil/vue'

import type { Editor } from '@open-pencil/core/editor'

const props = defineProps<{
  editor: Editor
}>()

provideEditor(props.editor)
</script>

<template>
  <slot />
</template>

Vous pouvez voir ceci comme la couche provider de l'arbre éditeur. La documentation préfère provideEditor() directement car c'est la vraie surface d'API actuelle.

3. Attacher un canvas

<script setup lang="ts">
import { ref } from 'vue'

import { useCanvas, useEditor } from '@open-pencil/vue'

const canvasRef = ref<HTMLCanvasElement | null>(null)
const editor = useEditor()

useCanvas(canvasRef, editor)
</script>

<template>
  <canvas ref="canvasRef" class="size-full" />
</template>

Utiliser les composables

Une fois l'éditeur fourni, les composants enfants peuvent lire la sélection et émettre des commandes :

import { useEditorCommands, useSelectionState } from '@open-pencil/vue'

const selection = useSelectionState()
const commands = useEditorCommands()

Exemple de base

<script setup lang="ts">
import { ref } from 'vue'

import { useCanvas, useEditor, useSelectionState } from '@open-pencil/vue'

const canvasRef = ref<HTMLCanvasElement | null>(null)
const editor = useEditor()
const { selectedCount } = useSelectionState()

useCanvas(canvasRef, editor, {
  onReady: () => {
    console.log('Canvas prêt')
  },
})
</script>

<template>
  <div class="grid h-full grid-rows-[1fr_auto]">
    <canvas ref="canvasRef" class="size-full" />
    <div class="border-t px-3 py-2 text-xs text-muted">
      Sélectionné : {{ selectedCount }}
    </div>
  </div>
</template>

2.8 KiB Raw Permalink Blame History