### Object Model Viewer

This page demonstrates rendering object models using Giraffe.js. The example below loads and visualizes the `example-object-model.json` file.
PaperScape Integration

Drag the link onto the PaperScape canvas to embed this viewer as a reusable scene component.

Object Model View PaperScape App (.giraffe.js) Send via PaperScape Queue

### Models

- /OpenForum/AddOn/PaperScape/ObjectModelView/example-object-model.omv.json

Inside PaperScape, click any entity card to open the new editing panel where you can rename the entity and manage its fields and methods.

Drop `.omv.json` files or URLs directly onto the PaperScape canvas to load models; you will be prompted to import or replace the current scene.

## PaperScape Controls

- Save Model – persists the current scene to the configured server file path (and browser autosave).
- Open Model – launches a file picker for `.omv.json` files; choose _Import_ to merge or _Replace_ to overwrite the current model.
- Download – saves the current model JSON to the desktop using the suggested `.omv.json` name.
- New Model – creates a blank model with optional title and storage path; the path helper will suggest a valid `.omv.json` name.

- All file operations expect filenames ending in `.omv.json`; PaperScape shows a confirmation dialog if a different suffix is supplied.

  *

## PaperScape Editing Roadmap

Goal: turn the Object Model app into an interactive editor that complements PaperScape's drag-and-drop workflow.

1. Phase 1 – Entity Editing Foundations

- Add an overlay control panel (styled akin to `/HomeLab/ClaudeDragon` overlays but recoloured for the PaperScape palette) that links to the selected entity.
- Surface form fields bound via OpenForum to edit an entity's display name, add/remove fields, and add/remove methods.
- Persist edits immediately into the component state (`paperScape.toJson()` output) so Save/Load restores modifications.

2. Phase 2 – Object Management

- Extend the overlay with actions to rename an entity and to spawn a new entity at the current pointer position.
- Reuse the existing layout helpers to position new entities while still allowing manual drag adjustments.
- Introduce validation to guard against duplicate IDs/names when creating or renaming entities.

3. Phase 3 – Relationship Authoring

- Provide UI affordances to choose a source and target entity, then select a relationship type (inheritance/association/etc.).
- Render a live preview arrow while the user is choosing endpoints, and persist the relationship metadata with the scene.
- Add controls to remove or retarget existing relationships.

4. Phase 4 – UX Polish and Styling

- Finalise the overlay style (shadows, typography, and colour accents inspired by ClaudeDragon but matched to PaperScape).
- Add contextual tooltips and inline help describing keyboard/mouse shortcuts.
- Document the editor workflow on this page and link directly within the PaperScape documentation set.

## Roadmap Additions

- - - Reusable Modal Loader UI** – Build a PaperScape-level dialog (Giraffe-styled buttons like `+ New Entity`) for load/save/import so ObjectModelView and other `.giraffe.js` apps share the same experience; mimic editors such as `/OpenForum/Editor/Editors/JavascriptEditor`.

- - Smart Field Types** – Replace plain text field types with `` elements backed by common primitives plus entity IDs detected in the current model.

- - Field Relationship Arrows** – When a field references another entity type (even within arrays/collections), draw a contextual arrow from the field row to the target entity card.

- - Model Import Flow** – Alongside load/save, expose an import button that merges external models into the active scene.

- - Undo/Redo Stack** – Implement reusable history helpers so ObjectModelView (and future Giraffe apps) can undo/redo all edits, relationship changes, and layout moves.

The canvas renders an entity relationship diagram generated from `example-object-model.json`. Each entity becomes a card showing fields and methods (rendered with Giraffe `TextBlock` objects), while relationships (e.g. inheritance) are drawn as connectors between the nearest card edges. Update the JSON file and refresh the page to see the changes—no manual edits to the markup are required.

### Interactive Features

- Automatic Layout: Entities are positioned automatically with proper spacing
- Visual Hierarchy: Clear distinction between entity names, fields, and methods
- Relationship Arrows: Inheritance relationships shown with proper UML-style arrows
- Responsive Design: Canvas adapts to different model sizes
- Error Handling: Graceful fallback when JSON loading fails

### Model Definition

The visualization above renders the following object model structure from `example-object-model.json`:

    {
      "entities": [
        {
          "id": "Person",
          "name": "Person",
          "fields": [
            { "name": "name", "type": "String" },
            { "name": "age", "type": "Integer" }
          ],
          "methods": [
            { "name": "greet", "parameters": [], "returnType": "String" }
          ],
          "extensions": {
            "giraffe": {}
          }
        },
        {
          "id": "Student",
          "name": "Student",
          "fields": [
            { "name": "studentId", "type": "String" }
          ]
        }
      ],
      "relationships": [
        {
          "type": "inheritance",
          "source": "Student",
          "target": "Person",
          "extensions": {
            "giraffe": {}
          }
        }
      ]
    }

### Object Model Schema

The viewer supports the following JSON schema:

## Entities

- `id` - Unique identifier for the entity
- `name` - Display name of the entity
- `fields` - Array of field objects with `name` and `type`
- `methods` - Array of method objects with `name`, `parameters`, and `returnType`
- `extensions` - Additional metadata (including Giraffe.js specific properties)

## Relationships

- `type` - Relationship type ("inheritance", "association", "composition", etc.)
- `source` - Source entity ID
- `target` - Target entity ID
- `extensions` - Additional relationship metadata

### Application Architecture

The Object Model Viewer uses a modular component-based architecture assembled via ServiceBuilder:

## Build Configuration

The application is built from multiple source files using `script.build.json`:

    {
      "version": "0.0.2",
      "targetFile": "/HomeLab/ObjectModelView/object-model-view.giraffe.js",
      "versionFile": "/HomeLab/ObjectModelView/Version/object-model-view.giraffe.js",
      "steps": [
        { "action": "append", "file": "/HomeLab/ObjectModelView/object-model-view-core.giraffe.js" },
        { "action": "insert", "searchFor": "// insert EntityBox", "file": "/HomeLab/ObjectModelView/EntityBox.js" },
        { "action": "insert", "searchFor": "// insert RelationshipArrow", "file": "/HomeLab/ObjectModelView/RelationshipArrow.js" },
        { "action": "insert", "searchFor": "// insert FieldReferenceArrow", "file": "/HomeLab/ObjectModelView/FieldReferenceArrow.js" }
      ]
    }

## Component Files

Core Application (`object-model-view-core.giraffe.js`)

- Contains the main `ObjectModelViewApp` constructor
- Defines the Integration module for drag-and-drop support
- Provides application state management and file I/O
- Includes placeholder comments for component insertion

Entity Rendering (`EntityBox.js`)

- Renders individual entity cards with fields and methods
- Self-contained with embedded color constants for standalone use
- Can be used independently on pages outside PaperScape
- Uses `typeof` guards to avoid conflicts when assembled

Relationship Rendering (`RelationshipArrow.js`)

- Draws arrows between entities for inheritance/association/composition
- Includes inline drawing helper functions (`drawArrowHead`, `drawRelationshipLabel`)
- Supports interactive type cycling and editing
- Self-contained for standalone usage

Field Reference Rendering (`FieldReferenceArrow.js`)

- Draws arrows from fields to referenced entity types
- Detects entity references in field types
- Shares drawing utilities with RelationshipArrow

## Standalone Component Pattern

Each component file is designed to work both standalone and as part of the built application:

    // Color constants defined with guards in EntityBox.js
    if (typeof ENTITY_COLOR_OPTIONS === "undefined") {
      var ENTITY_COLOR_OPTIONS = [
        { id: "blue", headerFill: "#2563eb", ... },
        // ... more colors
      ];
    }
    // Component can now be used on any page independently

This pattern allows:

- - - Standalone Use** - Components work when included directly in `page.js`

- - Assembled Use** - ServiceBuilder combines them into `object-model-view.giraffe.js`

- - No Conflicts** - `typeof` guards prevent duplicate definitions

- - Shared Dependencies** - Common utilities defined once, available to all

## Building the Application

To rebuild after modifying source files:

    http://localhost:8888/OpenForum/AddOn/ServiceBuilder?action=buildJavascript&pageName=/HomeLab/ObjectModelView&fileName=script.build.json

The build process: 1. **Appends** the core file as the base 2. **Inserts** EntityBox at `// insert EntityBox` marker 3. **Inserts** RelationshipArrow at `// insert RelationshipArrow` marker 4. **Inserts** FieldReferenceArrow at `// insert FieldReferenceArrow` marker 5. **Outputs** the complete `.giraffe.js` file ready for PaperScape

### Extending the Viewer

The viewer can be extended to support additional features:

## Custom Styling

Modify the rendering functions to change colors, fonts, and layout styles based on entity properties or extensions.

## Additional Relationship Types

Add support for associations, compositions, and aggregations with different arrow styles and labels.

## Interactive Features

Implement click handlers, hover effects, and drag-and-drop functionality using Giraffe.js interaction capabilities.

## Export Capabilities

Add buttons to export the rendered diagram as PNG, SVG, or PDF using canvas.toDataURL() or similar methods.

### Child Pages

- ObjectModelViewEditor
- Version

### Attachments

- /OpenForum/AddOn/PaperScape/ObjectModelView/page.content
- /OpenForum/AddOn/PaperScape/ObjectModelView/EntityBox.js
- /OpenForum/AddOn/PaperScape/ObjectModelView/script.build.json
- /OpenForum/AddOn/PaperScape/ObjectModelView/object-model-schema.json
- /OpenForum/AddOn/PaperScape/ObjectModelView/data.json
- /OpenForum/AddOn/PaperScape/ObjectModelView/editor-config.json
- /OpenForum/AddOn/PaperScape/ObjectModelView/object-model-view.giraffe.js
- /OpenForum/AddOn/PaperScape/ObjectModelView/FieldReferenceArrow.js
- /OpenForum/AddOn/PaperScape/ObjectModelView/example-object-model.omv.json
- /OpenForum/AddOn/PaperScape/ObjectModelView/page.js
- /OpenForum/AddOn/PaperScape/ObjectModelView/object-model-view-state.json
- /OpenForum/AddOn/PaperScape/ObjectModelView/page.html.template.link
- /OpenForum/AddOn/PaperScape/ObjectModelView/page.html.fragment
- /OpenForum/AddOn/PaperScape/ObjectModelView/RelationshipArrow.js
- /OpenForum/AddOn/PaperScape/ObjectModelView/object-model-view-core.giraffe.js
- /OpenForum/AddOn/PaperScape/ObjectModelView/page.html

## An error has occurred.

{{OpenForum.errorMessage}}

See technical details

×

## Error details.

{{OpenForum.error}}

×

## {{OpenForum.alert.title}}

{{OpenForum.alert.message}}

×