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 Blame History

title	description
Primeros pasos con el SDK	Configura @open-pencil/vue con createEditor, provideEditor y un canvas.

Primeros pasos con el SDK

Instalación

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

El SDK vive en el monorepo hoy en día y también se publica como @open-pencil/vue.

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

Modelo mental

Hay tres capas:

@open-pencil/core — motor del editor independiente del framework
@open-pencil/vue — composables de Vue y primitivos headless
tu app — estilos, enrutamiento, flujos de archivos, UI específica del producto

Configuración mínima

1. Crear un editor

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

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

2. Proporcionarlo a 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>

Puedes pensar en esto como la capa proveedora del árbol del editor. La documentación prefiere usar provideEditor() directamente porque esa es la superficie de API real actual.

3. Adjuntar 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>

Usar composables

Una vez que el editor está disponible, los componentes hijo pueden leer la selección y emitir comandos:

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

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

Ejemplo básico

<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 ready')
  },
})
</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">
      Seleccionados: {{ selectedCount }}
    </div>
  </div>
</template>

2.8 KiB Raw Blame History