feat(demo): update HTML demo for v4 (#2630)

clientIO · May 31, 2024 · 2f32821 · 2f32821
1 parent bccc2ef
commit 2f32821
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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);
+ }
  }
  });