Skip to content

Architecture SDK

@open-pencil/vue est la couche Vue au-dessus de @open-pencil/core.

Elle ne possède pas le modèle d'éditeur lui-même. Elle adapte l'éditeur core en :

  • injection Vue
  • composables réactifs
  • primitives structurelles headless
  • câblage canvas et input

Structure des dossiers

Ce package est organisé par domaine.

Familles de composants

  • Canvas/
  • ColorPicker/
  • FillPicker/
  • FontPicker/
  • GradientEditor/
  • LayerTree/
  • PageList/
  • PropertyList/
  • ScrubInput/
  • Toolbar/

Ces dossiers contiennent des primitives structurelles/headless et des helpers locaux.

Contrôles

controls/ contient les composables de contrôles pour les panneaux de propriétés et l'éditeur :

  • usePosition
  • useLayout
  • useAppearance
  • useTypography
  • useExport
  • useFillControls
  • useStrokeControls
  • useEffectsControls
  • useNodeProps
  • usePropScrub

Variables

VariablesEditor/ contient les composables du domaine variables et le câblage d'état.

Sélection

selection/ contient l'état de l'éditeur dérivé de la sélection et les capacités associées.

Contexte

context/ contient les helpers d'injection de l'éditeur :

  • EDITOR_KEY
  • provideEditor
  • useEditor

Interne

internal/ contient des utilitaires transversaux non destinés à être des primitives headless principales.

Philosophie d'API publique

Préférer les composables

Si le problème est principalement de la logique de contrôle, de la dérivation d'état ou des actions éditeur, exposer un composable.

Réserver les primitives headless aux structures significatives

Utiliser des racines de composants quand ils coordonnent une structure, des enfants, des slots ou du contexte.

Exemples :

  • PageListRoot
  • PropertyListRoot
  • ToolbarRoot

Éviter les slots fourre-tout de contexte

Préférer des props de slot ciblés ou l'usage direct de composables plutôt que des payloads v-slot="ctx" massifs.

Responsabilités SDK vs Application

Le SDK possède

  • l'intégration éditeur
  • la logique headless réutilisable
  • la structure UI réutilisable sans hypothèses de style
  • l'intégration du rendu canvas

L'application possède

  • les styles
  • les shells de mise en page
  • le routage
  • les flux de fichiers du produit
  • les toasts, menus et UX spécifiques à l'application

Règle pratique

Si un morceau de logique pourrait être réutilisé dans une autre application basée sur OpenPencil sans emporter les styles applicatifs, il appartient probablement à @open-pencil/vue.

Pages associées

Released under the MIT License.