!!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) [{PaperScapeQueueButton url="/HomeLab/ObjectModelView/object-model-view.giraffe.js" text="Send via PaperScape Queue" name="Object Model View"}]

!!Models [{AttachmentsList pageName="&pageName;" matching=".*\.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.)) # 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.)) !!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 [{ChildPagesList pageName="&pageName;"}] ---- !!Attachments [{AttachmentsList pageName="&pageName;" matching=".*"}]