refactor(dia.LinkView)!: remove support for legacy link view (#2446)

clientIO · Dec 19, 2023 · 72b070b · 72b070b
1 parent 5e5d06c
commit 72b070b
Show file tree

Hide file tree

Showing 52 changed files with 3,109 additions and 1,574 deletions.
diff --git a/packages/joint-core/css/layout.css b/packages/joint-core/css/layout.css
@@ -64,85 +64,11 @@ the whole group of elements. Each plugin can provide its own stylesheet.
    /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */
    vector-effect: non-scaling-stroke;
 }
-/*
-
-connection-wrap is a <path> element of the joint.dia.Link that follows the .connection <path> of that link.
-In other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the
-.connection <path>. The advantage of using .connection-wrap is to be able to catch pointer events
-in the neighborhood of the .connection <path>. This is especially handy if the .connection <path> is
-very thin.
-
-*/
-
-.marker-source,
-.marker-target {
-   /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */
-   vector-effect: non-scaling-stroke;
-}
 
 /* Paper */
 .joint-paper {
     position: relative;
 }
 /* Paper */
 
-/*
-
-Vertex markers are `<circle>` elements that appear at connection vertex positions.
-
-*/
-
-.joint-link .connection-wrap,
-.joint-link .connection {
-   fill: none;
-}
 
-/* <g> element wrapping .marker-vertex-group. */
-.marker-vertices {
-   opacity: 0;
-   cursor: move;
-}
-.marker-arrowheads {
-   opacity: 0;
-   cursor: move;
-   cursor: -webkit-grab;
-   cursor: -moz-grab;
-/*   display: none;   */   /* setting `display: none` on .marker-arrowheads effectivelly switches of links reconnecting */
-}
-.link-tools {
-   opacity: 0;
-   cursor: pointer;
-}
-.link-tools .tool-options {
-   display: none;       /* by default, we don't display link options tool */
-}
-.joint-link:hover .marker-vertices,
-.joint-link:hover .marker-arrowheads,
-.joint-link:hover .link-tools {
-   opacity: 1;
-}
-
-/* <circle> element used to remove a vertex */
-.marker-vertex-remove {
-   cursor: pointer;
-   opacity: .1;
-}
-
-.marker-vertex-group:hover .marker-vertex-remove {
-   opacity: 1;
-}
-
-.marker-vertex-remove-area {
-   opacity: .1;
-   cursor: pointer;
-}
-.marker-vertex-group:hover .marker-vertex-remove-area {
-   opacity: 1;
-}
-
-/*
-Example of custom changes (in pure CSS only!):
-
-Do not show marker vertices at all:  .marker-vertices { display: none; }
-Do not allow adding new vertices: .connection-wrap { pointer-events: none; }
-*/
diff --git a/packages/joint-core/demo/archive/erd/index.html b/packages/joint-core/demo/archive/erd/index.html
@@ -8,12 +8,14 @@
         <title>ER Diagrams | JointJS</title>
 
         <link rel="stylesheet" type="text/css" href="../../../build/joint.css" />
+        <link rel="stylesheet" type="text/css" href="../joint.dia.LegacyLinkView.css" />
         <link rel="stylesheet" type="text/css" href="css/erd.css" />
     </head>
     <body>
         <div id="paper"></div>
 
         <script src="../../../build/joint.js"></script>
+        <script src="../joint.dia.LegacyLinkView.js"></script>
         <script src="src/erd.js"></script>
 
     </body>

diff --git a/packages/joint-core/demo/archive/erd/src/erd.js b/packages/joint-core/demo/archive/erd/src/erd.js
@@ -162,6 +162,7 @@ var paper = new joint.dia.Paper({
     cellViewNamespace: shapes,
     linkPinning: false,
     highlighting: false,
+    linkView: joint.dia.LegacyLinkView,
     defaultConnectionPoint: function(line, view) {
         var element = view.model;
         return element.getConnectionPoint(line.start) || element.getBBox().center();

diff --git a/packages/joint-core/demo/archive/joint.dia.LegacyLinkView.css b/packages/joint-core/demo/archive/joint.dia.LegacyLinkView.css
@@ -0,0 +1,60 @@
+/*
+
+Vertex markers are `<circle>` elements that appear at connection vertex positions.
+
+*/
+
+.joint-link .connection-wrap,
+.joint-link .connection {
+   fill: none;
+}
+
+/* <g> element wrapping .marker-vertex-group. */
+.marker-vertices {
+   opacity: 0;
+   cursor: move;
+}
+.marker-arrowheads {
+   opacity: 0;
+   cursor: move;
+   cursor: -webkit-grab;
+   cursor: -moz-grab;
+/*   display: none;   */   /* setting `display: none` on .marker-arrowheads effectively switches of links reconnecting */
+}
+.link-tools {
+   opacity: 0;
+   cursor: pointer;
+}
+.link-tools .tool-options {
+   display: none;       /* by default, we don't display link options tool */
+}
+.joint-link:hover .marker-vertices,
+.joint-link:hover .marker-arrowheads,
+.joint-link:hover .link-tools {
+   opacity: 1;
+}
+
+/* <circle> element used to remove a vertex */
+.marker-vertex-remove {
+   cursor: pointer;
+   opacity: .1;
+}
+
+.marker-vertex-group:hover .marker-vertex-remove {
+   opacity: 1;
+}
+
+.marker-vertex-remove-area {
+   opacity: .1;
+   cursor: pointer;
+}
+.marker-vertex-group:hover .marker-vertex-remove-area {
+   opacity: 1;
+}
+
+/*
+Example of custom changes (in pure CSS only!):
+
+Do not show marker vertices at all:  .marker-vertices { display: none; }
+Do not allow adding new vertices: .connection-wrap { pointer-events: none; }
+*/