ObjectModelView

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) undefined

Models

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.

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.

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.

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.

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

{ "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

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

Build Configuration

{ "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

// 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

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

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