Commit 7f3c8458 authored by Dave Cooper's avatar Dave Cooper
Browse files

started viewport div

parent d64a8194
Loading
Loading
Loading
Loading
Loading
+2 −2
Original line number Diff line number Diff line
@@ -4,13 +4,13 @@
 "The Gendl® GWL embedded graphics support" :author
 "Genworks International" :license
 "Affero Gnu Public License (http://www.gnu.org/licenses/)" :serial t
 :version "20210427" :depends-on (:geom-base :gwl)
 :defsystem-depends-on nil :components
 :version "20250708" :depends-on (:geom-base :gwl) :components
 ((:file "gwl/source/application-mixin")
  (:file "gwl/source/base-ajax-graphics-sheet")
  (:file "gwl/source/base-html-graphics-sheet")
  (:file "gwl/source/layout-mixin")
  (:file "gwl/source/process-graphics-fields")
  (:file "gwl/source/viewport-html-div")
  (:file "gwl/source/web-drawing") (:file "gwl/source/x3d-try")
  (:file "raphael/source/package") (:file "raphael/source/formats")
  (:file "raphael/source/lenses") (:file "source/parameters")
+138 −0
Original line number Diff line number Diff line
# GWL Graphics - Viewport Modularization Project

## Overview

This document summarizes the ongoing work to modularize Gendl's viewport functionality for easier reuse in custom web UIs. The goal is to extract the sophisticated viewport capabilities from Geysr into reusable components.

## Project Context

**Original Problem**: Geysr's viewport (in `/projects/gendl/apps/geysr/source/viewport.gdl`) is a complex, feature-rich component that handles:
- Multiple rendering formats (SVG, X3DOM, PNG, JPEG, A-Frame)
- Display list management via hash tables
- Interactive features (zoom, pan, selection)
- JavaScript integration for client-side behavior

**Goal**: Create modular viewport components that can be easily embedded in any custom web UI using modern naming conventions.

## Architecture - New Web UI Components

### Base Components (Implemented)

1. **`base-html-page`** - Modern replacement for `base-ajax-sheet`
   - Located in `/projects/gendl/gwl/ajax/source/base-ajax-sheet.lisp` (line 498+)
   - Cleaner API with sensible defaults
   - Integrated CSS/JS library management

2. **`base-html-div`** - Modern replacement for `sheet-section`
   - Simple wrapper with `div` computed-slot

3. **`viewport-html-div`** - Modular viewport component
   - Located in `/projects/gendl/gwl-graphics/gwl/source/viewport-html-div.lisp`
   - Inherits from `base-html-div`
   - Accepts `display-list-objects`, `display-list-object-roots`, `width`, `height`
   - Creates internal `web-drawing` object for rendering

### Usage Pattern

```lisp
(define-object my-page (base-html-page)
  :input-slots ((object-roots nil))
  :computed-slots
  ((body (with-lhtml-string ()
          ;; header content
          (str (the view-1 div))
          ;; footer content)))
  :objects 
  ((view-1 :type 'viewport-html-div
           :display-list-object-roots (the object-roots))))
```

## Current Implementation Status

### ✅ Completed
- `viewport-html-div` class with basic structure
- Internal `web-drawing` object creation and configuration
- Proper HTML div generation with unique IDs
- Test page demonstrating usage pattern
- Integration with cl-lite build system

### 🚧 Current State
- **Placeholder rendering**: `svg-content` returns "Graphics not implemented yet"
- **Ready for SVG implementation**: All plumbing in place for next development phase

### 🎯 Next Steps
1. Implement `svg-content` computed-slot to render actual SVG from `web-drawing`
2. Add CSS styling and JavaScript integration for interactivity
3. Gradually expose more customization options (view controls, formats, etc.)

## Development Patterns Learned

### 1. Build System Management
- **Never edit .asd files manually**
- Use `(cl-lite "/path/to/directory/" :create-asd-file? t)` to regenerate
- Control via .isc files: `depends-on.isc`, `file-ordering.isc`, `ignore-list.isc`, etc.

### 2. Package Usage for Testing
- Use `:gwl-user` package for test/scratch code
- Reference with double-colon: `'gwl-user::test-class`
- No need to export test symbols
- Can switch packages mid-file with `(in-package :different-package)`

### 3. Incremental Development
- Start with minimal working implementation
- Use placeholder content ("Graphics not implemented yet")
- Build on solid foundation rather than attempting everything at once

## File Organization

```
/projects/gendl/gwl-graphics/gwl/
├── source/
│   ├── viewport-html-div.lisp     # New modular viewport (✅ implemented)
│   ├── base-ajax-graphics-sheet.lisp  # Original graphics base class
│   ├── web-drawing.lisp           # Core rendering engine
│   └── ...
└── CLAUDE.md                      # This documentation file
```

## Testing

```lisp
;; Load the system
(cl-lite "/projects/gendl/gwl-graphics/" :create-asd-file? t)

;; Create test instance
(setq *test-page* (make-object 'gwl-user::test-viewport-page))

;; Check output
(the-object *test-page* body)
(the-object *test-page* main-sheet)

;; Test with geometry
(setq *box* (make-object 'box :width 10 :height 5 :length 15))
(setq *test-with-geom* (make-object 'gwl-user::test-viewport-page 
                                    :object-roots (list *box*)))
```

## MCP Integration Notes

This project leverages both Gendl and Emacs MCP services:

- **Gendl MCP** (`mcp__gendl__*`) for Lisp evaluation and system management
- **Emacs MCP** (`mcp__skewed-emacs__*`) for file editing and manipulation

**When starting a fresh session**, read the MCP documentation:
- `mcp__gendl__gendl__get_docs` with doc_id "claude-md" and "main-claude-md"
- `mcp__skewed-emacs__skewed-emacs__get_docs` with doc_id "claude-md" and "main-claude-md"

This provides comprehensive context for development workflow and available tools.

## Future Modularization Targets

1. **Display List Management**: Extract hash table operations from Geysr
2. **Multi-format Rendering**: Modular format selection (SVG, X3DOM, etc.)
3. **Interactive Controls**: Zoom, pan, view direction controls
4. **JavaScript Integration**: Client-side viewport behavior
5. **Theme/Styling System**: CSS customization capabilities

The current `viewport-html-div` provides the foundation for these future enhancements.
+110 −0
Original line number Diff line number Diff line
;;;; -*- coding: utf-8 -*-
;;
;; Copyright 2020 Genworks International
;;
;; This source file is part of the General-purpose Declarative
;; Language project (Gendl).
;;
;; This source file contains free software: you can redistribute it
;; and/or modify it under the terms of the GNU Affero General Public
;; License as published by the Free Software Foundation, either
;; version 3 of the License, or (at your option) any later version.
;; 
;; This source file is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
;; Affero General Public License for more details.
;; 
;; You should have received a copy of the GNU Affero General Public
;; License along with this source file.  If not, see
;; <http://www.gnu.org/licenses/>.
;; 

(in-package :gwl)

;; Create viewport-html-div for 3D visualization in a page section
(define-object viewport-html-div (base-html-div)
  :input-slots 
  ((display-list-objects nil) 
   (display-list-object-roots nil)
   (width 400)
   (height 300)
   (image-format-default :svg)
   (vector-graphics-onclick? nil)
   (projection-vector (getf *standard-views* :trimetric)))
   
  :computed-slots
  (;; FLAG drive this with a UI form-control
   (image-format (the image-format-default))

   (inner-html (ecase (the image-format)
		 (:svg (the svg-content))
		 (:png (the png-content))
		 (:jpeg (the jpeg-content))
		 (:x3dom (the x3dom-content))
		 (:a-frame (the a-frame-content))))
   
   (svg-content (if (the no-graphics?)
                    (with-cl-who-string ()
                      ((:div :id "empty-viewport" :class "empty-viewport")
                       (:p "No graphics objects specified")))
                    (with-error-handling ()
                      (with-cl-who-string ()
                        ((:div :id (format nil "svg-viewport-~a" (the base64-encoded-root-path))
                               :style (format nil "width: ~apx; height: ~apx;" (the width) (the height)))
                         (str (with-output-to-string (ss)
                                (with-format (svg ss 
                                                  :background-color (the background-color)
                                                  :foreground-color (the foreground-color))
                                  (write-the view-object cad-output)))))))))


   (png-content  "<p>PNG graphics not implemented yet</p>")
   (jpeg-content "<p>JPEG graphics not implemented yet</p>")
   (x3dom-content "<p>X3DOM graphics not implemented yet</p>")
   (a-frame-content "<p>A-Frame graphics not implemented yet</p>")
   
   

   (no-graphics? (and (null (the display-list-objects))
                      (null (the display-list-object-roots))))

   (background-color (lookup-color (getf *colors-default* :background) :format :decimal))
   (foreground-color (lookup-color (getf *colors-default* :foreground) :format :decimal)))
   
  :objects 
  ((view-object :type 'web-drawing
                :page-width (the width)
                :page-length (the height)
                :objects (the display-list-objects)
                :object-roots (the display-list-object-roots)
                :pass-down (projection-vector))))


;; Switch to gwl-user package for test code
(in-package :gwl-user)

;; Test page using the new viewport-html-div
(define-object test-viewport-page (base-html-page)
  :input-slots 
  ((title "Test Viewport Page")
   (objects (list (the box-1))))
   
  :computed-slots
  ((body (with-lhtml-string ()
          (:h1 "Test Page with Viewport")
          (:p "This page demonstrates the new viewport-html-div component:")
          (str (the view-1 div))
          (:p "End of test page."))))
          
  :objects 
  ((box-1 :type 'box :display-controls (list :color :blue :line-thickness 2)
	  :length 20 :width (* +phi+ (the-child length)) :height (* +phi+ (the-child width)))
   (view-1 :type 'viewport-html-div
           :width 500
           :height 400
	   :display-list-objects (the objects))))



(publish-gwl-app "/test-view" 'test-viewport-page)
+6 −5
Original line number Diff line number Diff line
@@ -593,6 +593,7 @@ in the applicable lens for html-format."
(define-object base-html-div (sheet-section)
  :computed-slots ((div (the main-div))))

#+nil
;; Create viewport-html-div for 3D visualization in a page section
  (define-object viewport-html-div (base-html-div)
    :input-slots ((display-list-objects nil) (display-list-object-roots nil))