aglinxinyuan commented on issue #5366: URL: https://github.com/apache/texera/issues/5366#issuecomment-4628676966
## Migration recipe — ground-truthed against `@joint/core` v4 Captured while scoping the work. The verification harness and the exact v4 API deltas are confirmed below so this is execution-ready. ### Verification harness (confirmed working) | Suite | Command | Baseline result (jointjs 3.5.4) | |---|---|---| | jsdom joint specs | `npx ng test --include="**/joint-ui.service.spec.ts"` (also `joint-graph-wrapper.spec`, `sync-texera-model.spec`) | ✅ **56 tests pass** | | browser spec (real Chromium) | `npx ng run gui:test-browser` (Playwright, runs `workflow-editor.component.spec.ts`) | to baseline before migrating | | type-check | `npx ng build` (default config) | green on `main` | > Note: jsdom lacks `HTMLCanvasElement.getContext`, so `JointUIService.getMeasureContext()` returns `null` and the name-width measurement falls back to an approximation. Pre-existing, harmless, unrelated to v4. ### Confirmed v4 API deltas **1. `ref*` attributes → `calc()` native attributes** (used heavily in operator markup, port styles, comment attrs): | v3 | v4 | |---|---| | `refX` / `ref-x` | `x: 'calc(w)'` (fraction → `calc(0.5*w)`) or numeric | | `refY` / `ref-y` | `y: 'calc(h)'` | | `refWidth: '100%'` | `width: 'calc(w)'` | | `refHeight: '100%'` | `height: 'calc(h)'` | | `x-alignment` | `textAnchor` (`start`/`middle`/`end`) | | `y-alignment` | `textVerticalAnchor` (`top`/`middle`/`bottom`) | | `ref: 'rect.body'` | `ref: 'rect.body'` still supported; positioning now via `calc()` relative to ref bbox | **2. `shapes.devs.Model` removed** → `dia.Element.define()` with explicit ports config. The in/out port groups that `devs.Model` provided by default must be declared on the element (`ports.groups.in` / `ports.groups.out` with `position` + port `markup`/`attrs`). Reference implementation: [joint-core `demo/devs`](https://github.com/clientIO/joint/tree/master/packages/joint-core/demo/devs). Affects `TexeraCustomJointElement`, `TexeraCustomCommentElement`, and the `as joint.shapes.devs.Model` casts + `devs.ModelSelectors` types in `joint-ui.service.ts`. **3. `dia.Link` markup/tools rewrite** — `.connection`, `.connection-wrap`, `.marker-source`, `.marker-target`, `.marker-arrowheads`, and `toolMarkup` no longer drive rendering/interactivity. Migrate `getDefaultLinkCell()` to `shapes.standard.Link` and attach tools dynamically: ```js const lv = paper.findViewByModel(link); lv.addTools(new linkTools.Remove({ ... })); // replaces the toolMarkup "tool-remove" ``` Custom arrowheads (`sourceOperatorHandle`/`targetOperatorHandle`) move to `attrs.line.sourceMarker`/`targetMarker`. **4. Port markup** — `.port-body` / `.port-label` styling moves to native attributes; verify against v4 port `markup` defaults. **5. String SVG markup → JSON markup** — recommended `util.svg\`<rect @selector="body"/>\`` with `attrs: { body: {...} }`. Class selectors still resolve, but `ref*` positioning inside them must be converted (see #1). ### Build wiring (besides deps) - `angular.json` `styles[]`: repoint `node_modules/jointjs/css/{layout,themes/material,themes/default}.css` → the CSS shipped by `@joint/core` (verify file layout in the installed package). - `allowedCommonJsDependencies` already lists `dagre`, `graphlib` (needed by `@joint/layout-directed-graph`). - deps: `[email protected]` → `@joint/[email protected]`; add `@joint/[email protected]`; drop `@types/[email protected]`. ### Effort This is a multi-day rewrite of behavior-critical canvas internals (operator/comment element markup + ports, link rendering + tools, every `ref*` attribute), not a mechanical bump. Type-check-green is necessary but **not** sufficient — the `ref*`/markup/link changes fail at *render time*, so each milestone needs the editor running for visual QA (operators, ports, dynamic add/remove-port buttons, link draw + validation, delete/chat tools, highlighters, drag-drop, auto-layout, mini-map). -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
