Web 0.10.2: Abhängigkeiten «create»/«use», Klasse im Objektinspektor (#180)

Claude-Session: https://claude.ai/code/session_01Ugz28SuLhbcLydch8nbzdQ

Co-authored-by: Claude <noreply@anthropic.com>

Author: code4teaching

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.10.2, VisuObject dependencies and class inspector:** `new X()` in a method draws a dashed arrow «create» to X, a type used only inside a method (parameter, local variable) a dashed «use» arrow; none where an attribute or inheritance already connects the classes. The inspector explains why it is not an association and can turn it into an attribute. Clicking a class shows its name, modifier, abstract, final, superclass and interfaces in the object inspector (abstract is no longer set in the class box). The border between class diagram and object inspector can be dragged. The add line in a class box reads “new attribute …” without a “+”, which looked like public (#180).
 - **Web 0.10.1, VisuObject “New” like Eclipse:** a “+ New ▾” menu in the Package Explorer for Java project, source folder, package, class and interface, each with its own window; the class window works like Eclipse's New Java Class (source folder, package, name, modifier public/package, abstract/final, superclass, interfaces, stubs for `main`, superclass constructors and inherited abstract methods, Javadoc with @author). Several source folders per project (e.g. `test`), read from and written to `.classpath` in the workspace and kept in the ZIP. New toolbar tool “Association” as a plain line without navigation next to the directed association. The object inspector has a fixed place below the class diagram and collapses with “–”; it shows end A (where the line starts) and end B (where it ends) with role, multiplicity and navigability. Like in Astah, clicking a role or multiplicity at a selected line (or right-clicking near an end) opens a small editor right there. Renaming a class in the code renames its tab and file (#179).
 - **Web 0.10.0, VisuObject like Eclipse and Astah:** an Astah-style toolbar above the class diagram to drag classes and interfaces onto the canvas and draw association, aggregation, composition, inheritance and realization between two classes. Attributes whose type is another class are shown only as a role on the line (with visibility, e.g. `-meineKatzen`), not inside the class box. Object inspector for a relationship: name with reading direction taken from the drag direction (“reverse” button), navigability at each end (navigable = arrowhead, non-navigable = ×, unspecified = open), role and multiplicity at both ends; making the other end navigable adds an attribute named after the role. Inheritance only via the arrow (no “inherits from” choice in the class box). The left area is called “Package Explorer”. Workspace folder like Eclipse (Chrome/Edge, File System Access API): create “VisuObject-Workspace” or open an existing one, one folder per project with `src/package/Class.java`, `visuobject.json` (UML extras and box positions), `.project` and `.classpath` for importing into Eclipse; all projects listed in the Package Explorer, Ctrl+S saves, unsaved tabs show ● instead of × like VS Code, ZIP download stays (#175, #176, #177, #178).
 - **Web 0.9.0, VisuObject projects and relationships:** a project with packages like in Eclipse: a package explorer on the left (project › src › packages › files › classes › attributes/methods), every level collapsible, one file per class, `package` line follows the folder, UML package frames in the class diagram, open and save as ZIP (`Name/src/package/Class.java`, fflate, MIT). Layout like WebGoatCode: flat areas with a grey header bar, “–” collapses an area to a strip with its name, splitters between the areas, file tabs above the code. Relationships are drawn by dragging from a handle on the selected class to another class (association, aggregation, composition, inheritance, realization); an object inspector sets kind, name with reading direction, navigability (one way, both ways, no arrow), role and multiplicity at both ends. Java parts go into the code (attribute, list type, imports, `extends`/`implements`), UML-only details into `visuobject.json` in the ZIP. Hollow inheritance triangle; roles at the same distance as multiplicities. The website's VisuStruct links always open VisuStruct (#171, #172, #173).

web/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "visustruct-web",
   "private": true,
-  "version": "0.10.1",
+  "version": "0.10.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/package.json

@@ -560,6 +560,27 @@ export function setAbstract(source: string, cls: UmlClass, abstract: boolean): s
   return splice(source, cls.headerFrom, cls.headerTo, changed)
 }
 
+/** Modifier im Kopf der Klasse lesen (das Modell kennt nur `abstract`). */
+export function classModifiers(source: string, cls: UmlClass): { isPublic: boolean; isFinal: boolean } {
+  const head = source.slice(cls.headerFrom, cls.nameFrom)
+  return { isPublic: /\bpublic\b/.test(head), isFinal: /\bfinal\b/.test(head) }
+}
+
+/** `public` setzen oder weglassen (dann nur im Package sichtbar). */
+export function setPublic(source: string, cls: UmlClass, on: boolean): string {
+  const head = source.slice(cls.headerFrom, cls.headerTo)
+  const has = /\bpublic\s+/.test(head.slice(0, cls.nameFrom - cls.headerFrom))
+  const changed = on ? (has ? head : `public ${head}`) : head.replace(/\bpublic\s+/, '')
+  return splice(source, cls.headerFrom, cls.headerTo, changed)
+}
+
+/** `final` setzen (nimmt `abstract` weg, beides zusammen geht in Java nicht) oder entfernen. */
+export function setFinal(source: string, cls: UmlClass, on: boolean): string {
+  const head = source.slice(cls.headerFrom, cls.headerTo)
+  const changed = on ? (/\bfinal\b/.test(head) ? head : head.replace(/\babstract\s+/, '').replace(/\bclass\b/, 'final class')) : head.replace(/\bfinal\s+/, '')
+  return splice(source, cls.headerFrom, cls.headerTo, changed)
+}
+
 /** Neues Attribut (hinter dem letzten Attribut) oder neue Methode (vor der schließenden Klammer). */
 export function addMember(source: string, cls: UmlClass, text: string): string {
   const line = parseUmlLine(text)

web/src/core/classModel.ts

@@ -58,6 +58,50 @@ export interface Generalization {
   to: string
 }
 
+/** Abhängigkeit: Eine Methode erzeugt (`new X()`) oder benutzt eine Klasse, ohne sie in einem Attribut zu merken. */
+export interface Dependency {
+  from: string
+  to: string
+  kind: 'create' | 'use'
+  /** Methoden bzw. Konstruktoren, in denen das vorkommt. */
+  methods: string[]
+}
+
+/** Kommentare und Texte in Anführungszeichen ausblenden, damit `new Hund` im Kommentar nicht zählt. */
+const codeOnly = (text: string) => text.replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*|"(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'/g, (m) => ' '.repeat(m.length))
+
+/**
+ * Abhängigkeiten aus den Methoden: gestrichelter Pfeil «create» bei `new X(…)`, sonst «use», wenn der Typ vorkommt.
+ * Keine, wo schon eine Assoziation (Attribut) oder Vererbung von `from` zu `to` besteht.
+ */
+export function dependencies(classes: UmlClass[], textOf: (cls: UmlClass) => string | undefined): Dependency[] {
+  const names = classes.map((c) => c.name)
+  const out = new Map<string, Dependency>()
+  for (const cls of classes) {
+    const text = textOf(cls)
+    if (!text) continue
+    const code = codeOnly(text)
+    const known = new Set([cls.superclass, ...cls.interfaces, ...cls.members.filter((m) => m.kind === 'field' && !m.isStatic).map((m) => associationTarget(m.type).name)])
+    for (const m of cls.members) {
+      if (m.kind === 'field') continue
+      const body = code.slice(m.from, m.to)
+      for (const other of names) {
+        if (other === cls.name || known.has(other)) continue
+        const word = new RegExp(`\\b${other}\\b`)
+        if (!word.test(body)) continue
+        const kind = new RegExp(`\\bnew\\s+${other}\\s*[(<\\[{]`).test(body) ? 'create' : 'use'
+        const key = `${cls.name}>${other}`
+        const dep = out.get(key) ?? { from: cls.name, to: other, kind, methods: [] }
+        if (kind === 'create') dep.kind = 'create'
+        const label = m.kind === 'constructor' ? `${m.name}()` : `${m.name}()`
+        if (!dep.methods.includes(label)) dep.methods.push(label)
+        out.set(key, dep)
+      }
+    }
+  }
+  return [...out.values()]
+}
+
 export const multiplicities = ['1', '0..1', '0..*', '1..*', '*']
 
 /** Obergrenze größer als 1: Dann gehört eine Liste in den Code. */

web/src/core/umlRelations.ts

@@ -407,9 +407,8 @@
 "web_visuobject_add_interface_tip" = "Neues Interface ins Diagramm und in den Code";
 "web_visuobject_layout" = "Neu anordnen";
 "web_visuobject_layout_tip" = "Alle Klassen automatisch anordnen: Oberklassen oben";
-"web_visuobject_add_field" = "Attribut";
-"web_visuobject_add_method" = "Methode";
-"web_visuobject_abstract" = "abstrakt";
+"web_visuobject_add_field" = "neues Attribut …";
+"web_visuobject_add_method" = "neue Methode …";
 "web_visuobject_delete_class" = "Klasse löschen";
 "web_visuobject_new_class_name" = "NeueKlasse";
 "web_visuobject_new_interface_name" = "NeuesInterface";
@@ -424,6 +423,13 @@
 "web_visuobject_bad_line" = "„%@“ verstehe ich nicht. Beispiel: - name: String oder + bellen(): void";
 "web_visuobject_open_failed" = "Die Datei konnte nicht gelesen werden.";
 "web_visuobject_field_ph" = "- name: String";
+"web_visuobject_inspector_resize" = "Größe ändern: Grenze zwischen Klassendiagramm und Objektinspektor nach oben oder unten ziehen (Doppelklick = Standard)";
+"web_visuobject_class_inspector_hint" = "Änderungen hier schreiben sofort in %@. Attribute und Methoden bearbeitest du mit Doppelklick im Kasten.";
+"web_visuobject_dep_title" = "Abhängigkeit «%@»";
+"web_visuobject_dep_create_text" = "%1$@ erzeugt in %3$@ ein Objekt der Klasse %2$@ (new).";
+"web_visuobject_dep_use_text" = "%1$@ benutzt die Klasse %2$@ in %3$@.";
+"web_visuobject_dep_hint" = "Das ist keine Assoziation: %@ merkt sich das %@-Objekt nicht in einem Attribut, es lebt nur in der Methode. Darum gestrichelt.";
+"web_visuobject_dep_to_assoc" = "Als Attribut merken (Assoziation zu %@)";
 "web_visuobject_end_mult_ph" = "Mult.";
 "web_visuobject_end_tip" = "Klick (Linie markiert) oder Rechtsklick: Rolle, Multiplizität und Navigierbarkeit an diesem Ende";
 "web_visuobject_end_role_ph" = "z. B. meineKatzen";

web/src/i18n/de.strings

@@ -407,9 +407,8 @@
 "web_visuobject_add_interface_tip" = "Add a new interface to the diagram and the code";
 "web_visuobject_layout" = "Arrange again";
 "web_visuobject_layout_tip" = "Arrange all classes automatically: superclasses at the top";
-"web_visuobject_add_field" = "Attribute";
-"web_visuobject_add_method" = "Method";
-"web_visuobject_abstract" = "abstract";
+"web_visuobject_add_field" = "new attribute …";
+"web_visuobject_add_method" = "new method …";
 "web_visuobject_delete_class" = "Delete class";
 "web_visuobject_new_class_name" = "NewClass";
 "web_visuobject_new_interface_name" = "NewInterface";
@@ -424,6 +423,13 @@
 "web_visuobject_bad_line" = "I don’t understand “%@”. Example: - name: String or + bark(): void";
 "web_visuobject_open_failed" = "The file could not be read.";
 "web_visuobject_field_ph" = "- name: String";
+"web_visuobject_inspector_resize" = "Resize: drag the border between class diagram and object inspector up or down (double-click = default)";
+"web_visuobject_class_inspector_hint" = "Changes here are written straight into %@. Edit attributes and methods by double-clicking in the box.";
+"web_visuobject_dep_title" = "Dependency «%@»";
+"web_visuobject_dep_create_text" = "%1$@ creates an object of class %2$@ in %3$@ (new).";
+"web_visuobject_dep_use_text" = "%1$@ uses the class %2$@ in %3$@.";
+"web_visuobject_dep_hint" = "This is not an association: %@ does not keep the %@ object in an attribute, it only lives inside the method. That is why the line is dashed.";
+"web_visuobject_dep_to_assoc" = "Keep as attribute (association to %@)";
 "web_visuobject_end_mult_ph" = "mult.";
 "web_visuobject_end_tip" = "Click (line selected) or right-click: role, multiplicity and navigability at this end";
 "web_visuobject_end_role_ph" = "e.g. myCats";

web/src/i18n/en.strings

@@ -405,9 +405,8 @@
 "web_visuobject_add_interface_tip" = "Nova interface no diagrama e no código";
 "web_visuobject_layout" = "Reorganizar";
 "web_visuobject_layout_tip" = "Organizar todas as classes automaticamente: superclasses em cima";
-"web_visuobject_add_field" = "Atributo";
-"web_visuobject_add_method" = "Método";
-"web_visuobject_abstract" = "abstrata";
+"web_visuobject_add_field" = "novo atributo …";
+"web_visuobject_add_method" = "novo método …";
 "web_visuobject_delete_class" = "Apagar classe";
 "web_visuobject_new_class_name" = "NovaClasse";
 "web_visuobject_new_interface_name" = "NovaInterface";
@@ -422,6 +421,13 @@
 "web_visuobject_bad_line" = "Não percebo «%@». Exemplo: - nome: String ou + ladrar(): void";
 "web_visuobject_open_failed" = "Não foi possível ler o ficheiro.";
 "web_visuobject_field_ph" = "- nome: String";
+"web_visuobject_inspector_resize" = "Redimensionar: arrasta a fronteira entre o diagrama de classes e o inspetor para cima ou para baixo (duplo clique = padrão)";
+"web_visuobject_class_inspector_hint" = "As alterações aqui são escritas logo em %@. Edita atributos e métodos com duplo clique na caixa.";
+"web_visuobject_dep_title" = "Dependência «%@»";
+"web_visuobject_dep_create_text" = "%1$@ cria um objeto da classe %2$@ em %3$@ (new).";
+"web_visuobject_dep_use_text" = "%1$@ usa a classe %2$@ em %3$@.";
+"web_visuobject_dep_hint" = "Isto não é uma associação: %@ não guarda o objeto %@ num atributo, ele só existe dentro do método. Por isso a linha é tracejada.";
+"web_visuobject_dep_to_assoc" = "Guardar como atributo (associação a %@)";
 "web_visuobject_end_mult_ph" = "mult.";
 "web_visuobject_end_tip" = "Clique (linha selecionada) ou clique direito: papel, multiplicidade e navegabilidade nesta extremidade";
 "web_visuobject_end_role_ph" = "p. ex. osMeusGatos";