Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 14 commits into from
Dec 19, 2023
Merged

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

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c59d7c2
refactor(dia.LinkView)!: remove support for legacy link view
kumilingus Dec 17, 2023
caec2a0
fix tests
kumilingus Dec 18, 2023
e2eebcc
update
kumilingus Dec 18, 2023
c4ce7f8
defaultLink
kumilingus Dec 18, 2023
88185e2
update
kumilingus Dec 18, 2023
24c7c50
fix demos
kumilingus Dec 18, 2023
028b43c
interactivity
kumilingus Dec 19, 2023
514d4f8
update
kumilingus Dec 19, 2023
97ef011
update
kumilingus Dec 19, 2023
d318f64
update
kumilingus Dec 19, 2023
5bfdece
Update intro.html
zbynekstara Dec 19, 2023
ff7d3f4
Update packages/joint-core/docs/src/joint/api/dia/Link/intro.html
zbynekstara Dec 19, 2023
b19e76a
Update packages/joint-core/docs/src/joint/api/dia/Link/intro.html
zbynekstara Dec 19, 2023
7693dad
Update packages/joint-core/src/dia/LinkView.mjs
kumilingus Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 0 additions & 74 deletions packages/joint-core/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
*/
2 changes: 2 additions & 0 deletions packages/joint-core/demo/archive/erd/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/joint-core/demo/archive/erd/src/erd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
60 changes: 60 additions & 0 deletions packages/joint-core/demo/archive/joint.dia.LegacyLinkView.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
*/
Loading