From 2f3282146344d5637f729dfde8385106bb4190a8 Mon Sep 17 00:00:00 2001
From: Roman Bruckner <roman@jointjs.com>
Date: Fri, 31 May 2024 15:25:30 +0200
Subject: [PATCH] feat(demo): update HTML demo for v4 (#2630)

---
 packages/joint-core/demo/html/css/html.css    | 11 +++++++++++
 packages/joint-core/demo/html/src/html.js     | 11 ++++-------
 .../demo/html/src/joint.shapes.html.js        | 19 +++++++++++++++++++
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/joint-core/demo/html/css/html.css b/packages/joint-core/demo/html/css/html.css
index c71295dc1..91d543328 100644
--- a/packages/joint-core/demo/html/css/html.css
+++ b/packages/joint-core/demo/html/css/html.css
@@ -146,3 +146,14 @@ select.html-element-field.field-empty {
 .toolbar-button:hover {
     background: #F7F8F9;
 }
+
+/* Bring the links above HTML elements */
+/*
+.joint-paper > svg {
+    z-index: 2;
+    pointer-events: none;
+}
+
+.joint-paper > svg .joint-link {
+    pointer-events: all;
+} */
diff --git a/packages/joint-core/demo/html/src/html.js b/packages/joint-core/demo/html/src/html.js
index bae45fb17..1880e9f60 100644
--- a/packages/joint-core/demo/html/src/html.js
+++ b/packages/joint-core/demo/html/src/html.js
@@ -1,8 +1,9 @@
 (function(joint, V) {
 
     // Notes:
-    // - Currently, there is no support for z-indexes on HTML Elements
-    // - It's not possible to export the diagram into PNG/SVG on the client-side
+    // - It's not possible to use SVG/Raster export plugins with HTML shapes
+    // - Links stacking order is limited to be either above or below HTML elements
+    // - Ports are partially hidden below the HTML elements by default
     // - Do not use CSS background on the root HTML element when using ports
 
     var graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
@@ -14,11 +15,7 @@
         cellViewNamespace: joint.shapes,
         async: true,
         frozen: true,
-        sorting: joint.dia.Paper.sorting.NONE,
-        guard: function(evt) {
-            var inputs = ['INPUT', 'SELECT', 'TEXTAREA'];
-            return inputs.indexOf(evt.target.tagName.toUpperCase()) > -1;
-        }
+        sorting: joint.dia.Paper.sorting.NONE
     });
 
     // Container for all HTML views inside paper
diff --git a/packages/joint-core/demo/html/src/joint.shapes.html.js b/packages/joint-core/demo/html/src/joint.shapes.html.js
index fcd9998eb..4811bb694 100644
--- a/packages/joint-core/demo/html/src/joint.shapes.html.js
+++ b/packages/joint-core/demo/html/src/joint.shapes.html.js
@@ -158,6 +158,25 @@
 
         onRemove: function() {
             this.removeHTMLMarkup();
+        },
+
+        // Detach and attach the HTML element to the paper's HTML container
+        // in case the paper `viewport` option is in use.
+
+        onMount(isInitialize) {
+            ElementView.prototype.onMount.apply(this, arguments);
+            var html = this.html;
+            if (!isInitialize && html) {
+                this.paper.htmlContainer.appendChild(html);
+            }
+        },
+
+        onDetach() {
+            ElementView.prototype.onDetach.apply(this, arguments);
+            var html = this.html;
+            if (html && html.isConnected) {
+                this.paper.htmlContainer.removeChild(html);
+            }
         }
     });