Web 0.10.1: Neu-Menü wie Eclipse, Source Folder, Inspektor unter dem Diagramm (#179)

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.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 0.8.0, VisuObject:** a third world next to VisuStruct and VisuBot, for object-oriented programming from year 12 (`?visuobject`, petrol colours). On the left the Java code, on the right the class diagram, both linked: typing classes builds the diagram (attributes, methods, constructors, `static`, `abstract`, inheritance, interfaces, associations with multiplicity from attributes like `ArrayList<Hund>`); adding classes, interfaces, attributes and methods in the diagram, double-clicking to change them in UML notation (`- name: String`, `+ bark(): void`), choosing the superclass or making a class abstract writes Java at exactly that spot, method bodies and comments stay. Plan for the next stages: `docs/visuobject/PLAN.md` (#167).

web/package-lock.json

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

web/package.json

@@ -8,46 +8,107 @@ import { parseClasses, type UmlClass } from './classModel'
 import type { UmlInfo } from './umlRelations'
 
 export interface ProjectFile {
-  /** Pfad unter `src/`, z. B. `tiere/Hund.java`; ohne Ordner im Standard-Package. */
+  /**
+   * Pfad unter `src/`, z. B. `tiere/Hund.java`; ohne Ordner im Standard-Package.
+   * In einem anderen Source Folder steht er davor mit Doppelpunkt: `test:tiere/HundTest.java`.
+   */
   path: string
   text: string
 }
 
 export interface JavaProject {
   name: string
   files: ProjectFile[]
-  /** Auch leere Packages, z. B. gleich nach „+ Package“. */
+  /** Auch leere Packages, z. B. gleich nach „+ Package“ (in anderen Source Folders als `test:tiere`). */
   packages: string[]
+  /** Source Folders außer `src`, z. B. `test`, wie in Eclipse; auch leere. */
+  sourceFolders?: string[]
   /** Was nur UML kennt (Aggregation, Name der Beziehung …), siehe `umlRelations.ts`. */
   uml?: UmlInfo
 }
 
 /** Klasse mit Datei und Package, für Diagramm und Explorer. */
 export interface ProjectClass extends UmlClass {
   path: string
+  /** Java-Package ohne Source Folder (wie in `package …;`). */
   pkg: string
+  /** Source Folder, meist `src`. */
+  root: string
 }
 
-export const packageOf = (path: string) => (path.includes('/') ? path.slice(0, path.lastIndexOf('/')).replace(/\//g, '.') : '')
-export const fileNameOf = (path: string) => path.slice(path.lastIndexOf('/') + 1)
-export const pathFor = (pkg: string, file: string) => (pkg ? `${pkg.replace(/\./g, '/')}/${file}` : file)
+export const defaultRoot = 'src'
+
+/** `test:tiere/X.java` → `test` und `tiere/X.java`; ohne Doppelpunkt `src`. Genauso für Package-Schlüssel. */
+export function splitRoot(key: string): { root: string; rest: string } {
+  const i = key.indexOf(':')
+  return i < 0 ? { root: defaultRoot, rest: key } : { root: key.slice(0, i), rest: key.slice(i + 1) }
+}
+const withRoot = (root: string, rest: string) => (root === defaultRoot ? rest : `${root}:${rest}`)
+
+/** Schlüssel des Packages im Explorer: `tiere`, in anderen Source Folders `test:tiere`. */
+export const packageKey = (root: string, pkg: string) => withRoot(root, pkg)
+/** Java-Package ohne Source Folder. */
+export const barePackage = (key: string) => splitRoot(key).rest
+export const rootOf = (key: string) => splitRoot(key).root
+
+export const packageOf = (path: string) => {
+  const { root, rest } = splitRoot(path)
+  return withRoot(root, rest.includes('/') ? rest.slice(0, rest.lastIndexOf('/')).replace(/\//g, '.') : '')
+}
+export const fileNameOf = (path: string) => {
+  const rest = splitRoot(path).rest
+  return rest.slice(rest.lastIndexOf('/') + 1)
+}
+export const pathFor = (pkg: string, file: string) => {
+  const { root, rest } = splitRoot(pkg)
+  return withRoot(root, rest ? `${rest.replace(/\./g, '/')}/${file}` : file)
+}
+/** Pfad wie auf der Festplatte, z. B. `test/tiere/HundTest.java`. */
+export const diskPath = (path: string) => {
+  const { root, rest } = splitRoot(path)
+  return `${root}/${rest}`
+}
+
+const folderName = /^[\p{L}\p{N}_$-][\p{L}\p{N}_$.-]*$/u
+export const isFolderName = (name: string) => folderName.test(name) && !name.includes('..')
+
+/** Alle Source Folders: `src` zuerst, dann die übrigen (auch leere und solche, die nur aus Dateien bekannt sind). */
+export function sourceFoldersOf(project: JavaProject): string[] {
+  const all = new Set([defaultRoot, ...(project.sourceFolders ?? [])])
+  for (const f of project.files) all.add(rootOf(f.path))
+  for (const p of project.packages) all.add(rootOf(p))
+  return [...all].sort((a, b) => (a === defaultRoot ? -1 : b === defaultRoot ? 1 : a.localeCompare(b)))
+}
 
 const packageName = /^[a-z_$][\p{L}\p{N}_$]*(\.[a-z_$][\p{L}\p{N}_$]*)*$/u
 export const isPackageName = (name: string) => packageName.test(name)
 
-/** Alle Packages: aus den Dateien und die leeren, sortiert; das Standard-Package nur, wenn Dateien darin liegen. */
-export function packagesOf(project: JavaProject): string[] {
+/**
+ * Alle Packages als Schlüssel: aus den Dateien und die leeren, sortiert nach Source Folder;
+ * das Standard-Package nur, wenn Dateien darin liegen. Mit `root` nur die aus diesem Source Folder.
+ */
+export function packagesOf(project: JavaProject, root?: string): string[] {
   const all = new Set(project.packages)
   for (const f of project.files) all.add(packageOf(f.path))
-  return [...all].filter((p) => p !== '' || project.files.some((f) => packageOf(f.path) === '')).sort((a, b) => (a === '' ? 1 : b === '' ? -1 : a.localeCompare(b)))
+  const roots = sourceFoldersOf(project)
+  return [...all]
+    .filter((p) => barePackage(p) !== '' || project.files.some((f) => packageOf(f.path) === p))
+    .filter((p) => root === undefined || rootOf(p) === root)
+    .sort((a, b) => {
+      const ra = roots.indexOf(rootOf(a)) - roots.indexOf(rootOf(b))
+      if (ra) return ra
+      const [x, y] = [barePackage(a), barePackage(b)]
+      return x === '' ? 1 : y === '' ? -1 : x.localeCompare(y)
+    })
 }
 
 export function filesIn(project: JavaProject, pkg: string): ProjectFile[] {
   return project.files.filter((f) => packageOf(f.path) === pkg).sort((a, b) => a.path.localeCompare(b.path))
 }
 
 /** `package …;` am Anfang setzen, ändern oder (Standard-Package) entfernen. */
-export function withPackageLine(text: string, pkg: string): string {
+export function withPackageLine(text: string, key: string): string {
+  const pkg = barePackage(key)
   const line = /^(\s*(?:\/\/[^\n]*\n|\/\*[\s\S]*?\*\/\s*)*)package\s+[\w.]+\s*;[ \t]*\n?/
   const match = line.exec(text)
   if (match) {
@@ -64,7 +125,7 @@ export function declaredPackage(text: string): string {
 }
 
 export function projectClasses(project: JavaProject): ProjectClass[] {
-  return project.files.flatMap((f) => parseClasses(f.text).map((c) => ({ ...c, path: f.path, pkg: packageOf(f.path) })))
+  return project.files.flatMap((f) => parseClasses(f.text).map((c) => ({ ...c, path: f.path, pkg: barePackage(packageOf(f.path)), root: rootOf(f.path) })))
 }
 
 export function updateFile(project: JavaProject, path: string, text: string): JavaProject {
@@ -108,6 +169,33 @@ export function renamePackage(project: JavaProject, from: string, to: string): J
   }
 }
 
+/** Neuer, leerer Source Folder wie `test`. */
+export function addSourceFolder(project: JavaProject, name: string): JavaProject {
+  return sourceFoldersOf(project).includes(name) ? project : { ...project, sourceFolders: [...(project.sourceFolders ?? []), name] }
+}
+
+/** Source Folder umbenennen; Dateien und Packages ziehen mit (`src` bleibt). */
+export function renameSourceFolder(project: JavaProject, from: string, to: string): JavaProject {
+  const move = (key: string) => (rootOf(key) === from ? withRoot(to, barePackage(key)) : key)
+  return {
+    ...project,
+    sourceFolders: (project.sourceFolders ?? []).map((r) => (r === from ? to : r)).filter((r) => r !== defaultRoot),
+    packages: project.packages.map(move),
+    files: project.files.map((f) => (rootOf(f.path) === from ? { ...f, path: withRoot(to, splitRoot(f.path).rest) } : f)),
+  }
+}
+
+/** Source Folder samt Packages und Dateien löschen (`src` nicht). */
+export function removeSourceFolder(project: JavaProject, root: string): JavaProject {
+  if (root === defaultRoot) return project
+  return {
+    ...project,
+    sourceFolders: (project.sourceFolders ?? []).filter((r) => r !== root),
+    packages: project.packages.filter((p) => rootOf(p) !== root),
+    files: project.files.filter((f) => rootOf(f.path) !== root),
+  }
+}
+
 /** Package samt Dateien löschen. */
 export function removePackage(project: JavaProject, pkg: string): JavaProject {
   return { ...project, packages: project.packages.filter((p) => p !== pkg), files: project.files.filter((f) => packageOf(f.path) !== pkg) }
@@ -142,6 +230,8 @@ export function projectFromJSON(json: string): JavaProject | undefined {
     if (!Array.isArray(data.files)) return undefined
     const files = data.files.filter((f): f is ProjectFile => typeof f?.path === 'string' && typeof f?.text === 'string')
     const project: JavaProject = { name: typeof data.name === 'string' && data.name ? data.name : 'Projekt', files, packages: Array.isArray(data.packages) ? data.packages.filter((p) => typeof p === 'string') : [] }
+    const roots = Array.isArray(data.sourceFolders) ? data.sourceFolders.filter((r): r is string => typeof r === 'string' && isFolderName(r) && r !== defaultRoot) : []
+    if (roots.length) project.sourceFolders = roots
     const uml = umlFromJSON(data.uml)
     if (uml) project.uml = uml
     return project