Skip to content

PROPERTY_EDITOR.md

Latest commit

 

History

History
192 lines (157 loc) · 6.2 KB

PROPERTY_EDITOR.md

File metadata and controls

192 lines (157 loc) · 6.2 KB

Property Editor - TreeView Implementation

Visão Geral

Implementação completa de um Property Editor robusto usando TreeView nativo do VSCode, preparado para oferecer uma experiência rica de edição de propriedades conforme demonstrado nas imagens de referência.

Arquitetura

1. PropertyEditorProvider (Views/PropertyEditorProvider.ts)

  • TreeDataProvider nativo do VSCode
  • Organização hierárquica por grupos (Ordinary Properties, etc.)
  • Suporte para múltiplos tipos de itens:
    • Group: grupos de propriedades
    • Property: propriedades editáveis
    • Separator: separadores visuais
  • Tooltips ricos com MarkdownString
  • Formatação inteligente de valores (boolean, string, number)
  • Integração com comandos para edição inline

2. PropertyEditorService (Services/PropertyEditorService.ts)

  • Gerenciamento do TreeView
  • Integração com SelectionService para reagir à seleção
  • Editores modais especializados:
    • Boolean: Quick Pick com ✓ True / ✗ False
    • Number: InputBox com validação numérica
    • Enum: Quick Pick com opções configuráveis
    • String: InputBox simples
  • Atualização automática do modelo TFX
  • Sincronização com o designer visual

3. PropertyEditorCommands (Commands/PropertyEditorCommands.ts)

  • Dase.EditProperty: abre editor modal para propriedade
  • Dase.RefreshProperties: força refresh do painel

4. Modelos

  • XPropertyTreeItem: item do TreeView com metadados ricos
  • IPropertyTreeItem: interface para criação de itens
  • XPropertyItemType: enum para tipos de itens

Funcionalidades Implementadas

✅ Hierarquia de Grupos

  • Organização automática de propriedades por grupos
  • Grupo padrão "Ordinary Properties" para propriedades sem grupo
  • Ordenação alfabética com "Ordinary Properties" sempre por último
  • Expansão/colapso de grupos

✅ Tipos de Editores

  • Boolean (checkbox simulado via Quick Pick)
  • Number (validação numérica)
  • Enum (lista de opções)
  • String (texto livre)

✅ Recursos de UI

  • Tooltips informativos com:
    • Descrição da propriedade
    • Tipo de dados
    • Key da propriedade
    • Valor atual
    • Indicadores de read-only
  • Formatação visual de valores:
    • Boolean: ✓ (true) ou vazio (false)
    • String: truncamento com "..." após 40 caracteres
    • Number: formatação numérica
  • Propriedades read-only (ID) não clicáveis
  • Comandos inline para propriedades editáveis

✅ Integração TFX

  • Uso de XProperty para metadados
  • Suporte a Group em XPropertyItem
  • Integração com TFXBridge.GetElementInfo()
  • Atualização automática do modelo via TFXBridge

✅ Sincronização

  • Reação automática à mudança de seleção
  • Atualização do designer visual após edição
  • Persistência automática (save) após mudanças

Preparação para Funcionalidades Futuras

O editor está preparado para suportar (nas imagens):

🔜 Color Picker (Aquamarine, Azure, etc.)

  • Interface: Options já suporta array de strings
  • Implementação futura: detectar tipo "Color" e abrir color picker nativo do VSCode

🔜 Tree Selector (hierarquia TFX.Core.Data...)

  • Interface: Options pode conter IDs de elementos
  • Implementação futura: modal com TreeView para seleção de elementos relacionados

🔜 Advanced Dropdowns (PK Type: XGuid, XInt16, XInt32, XInt64)

  • Interface: Options com tipos TFX
  • Implementação futura: Quick Pick com ícones e descrições

🔜 Validação e Regras

  • XPropertyDefault expõe:
    • IsRequired: obrigatoriedade
    • MaxLength: validação de tamanho
    • MinValue: validação numérica
    • Scale: precisão decimal
    • HasError: indicador de erro
  • Implementação futura: validação antes de confirmar edição

🔜 Metadados Ricos

  • XPropertyDefault expõe:
    • Title: título localizado
    • Group: agrupamento
    • Order: ordenação customizada
    • CultureSensitive: propriedades localizáveis
    • IsLinked: propriedades com referências

Registro no VSCode

package.json

{
  "views": {
    "dasePanel": [
      {
        "id": "Dase.PropertyEditor",
        "name": "Property Editor",
        "icon": "$(symbol-property)"
      }
    ]
  },
  "commands": [
    {
      "command": "Dase.EditProperty",
      "title": "Edit Property"
    },
    {
      "command": "Dase.RefreshProperties",
      "title": "Refresh Properties"
    }
  ]
}

ExtensionMain.ts

InitializePropertyEditorService(pContext, designerProvider);

pContext.subscriptions.push(
    vscode.commands.registerCommand("Dase.EditProperty", EditPropertyCommand),
    vscode.commands.registerCommand("Dase.RefreshProperties", RefreshPropertiesCommand)
);

Uso

  1. Seleção de elemento: O painel reage automaticamente ao SelectionService
  2. Edição: Clicar em uma propriedade abre o editor modal apropriado
  3. Atualização: Após confirmar, o modelo é atualizado e o designer visual é sincronizado
  4. Persistência: O documento é salvo automaticamente

Testes

✅ PropertyEditorProvider

  • Inicialização
  • SetProperties (com grupos)
  • Clear
  • UpdatePropertyValue
  • GetParent
  • Formatação de valores

✅ PropertyEditorCommands

  • EditPropertyCommand
  • RefreshPropertiesCommand
  • Tratamento de erros

Próximos Passos

  1. Teste manual no VSCode para validar UX
  2. Color Picker para propriedades de cor
  3. Tree Selector para referências entre elementos
  4. Validação inline usando metadados de XPropertyDefault
  5. Edição inline (sem modal) para strings e numbers
  6. Undo/Redo integrado com XChangeTracker

Observações Técnicas

  • Context: DASE (VS Code Extension), não TFX
  • Dependency direction: DASE → TFX (nunca o contrário)
  • Property System: usa XProperty e XPropertyDefault do TFX
  • Coverage: testes cobrem lógica core; runtime UI requer teste manual
  • Standards: segue rigorosamente os coding standards do repositório

Status: ✅ Implementação completa e funcional
Coverage impactado: PropertyEditorProvider e PropertyEditorService (requerem testes de runtime)
Compilação: ✅ Sem erros