Skip to content

Commit

Permalink
yFiles for HTML 2.6.0.2 demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@michabaur
michabaur committed Oct 13, 2023
1 parent 5f2fd95 commit 84208e2
Show file tree
Hide file tree
Showing 1,083 changed files with 19,072 additions and 17,003 deletions.
20 changes: 9 additions & 11 deletions demos/README.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ <h2>Your browser does not support modern CSS</h2>
<div class="content-wide">
<div id="general-intro">
<p class="first-paragraph">
The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.6.0.1</a> demo applications are available in
The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.6.0.2</a> demo applications are available in
both JavaScript and TypeScript.
<span class="js-only"
>Show <a href="../demos-ts/README.html">TypeScript Demos</a>.</span
Expand All @@ -126,9 +126,7 @@ <h2>Your browser does not support modern CSS</h2>

<p id="online-notice">
All of these demos are also hosted at the
<a href="https://live.yworks.com/demos/" target="_blank"
>yFiles for HTML Online Demos page</a
>.
<a href="https://www.yworks.com/demos" target="_blank">yWorks homepage</a>.
</p>

<div class="important" id="no-ecmascript6" style="display: none">
Expand Down Expand Up @@ -194,7 +192,7 @@ <h2>Your browser does not support modern CSS</h2>
</div>
</div>
<div id="non-tutorial-grid"></div>
<div class="tutorial-header" id="tutorial-basic-features-header">
<div class="tutorial-header hidden" id="tutorial-basic-features-header">
Tutorial: Basic Features
</div>
<div id="tutorial-basic-features" class="hidden">
Expand All @@ -217,7 +215,7 @@ <h2>Your browser does not support modern CSS</h2>
</p>
</div>
<div id="tutorial-basic-features-grid"></div>
<div class="tutorial-header" id="tutorial-node-style-implementation-header">
<div class="tutorial-header hidden" id="tutorial-node-style-implementation-header">
Tutorial: Node Style Implementation
</div>
<div id="tutorial-node-style-implementation" class="hidden">
Expand All @@ -236,7 +234,7 @@ <h2>Your browser does not support modern CSS</h2>
</p>
</div>
<div id="tutorial-node-style-implementation-grid"></div>
<div class="tutorial-header" id="tutorial-label-style-implementation-header">
<div class="tutorial-header hidden" id="tutorial-label-style-implementation-header">
Tutorial: Label Style Implementation
</div>
<div id="tutorial-label-style-implementation" class="hidden">
Expand All @@ -257,7 +255,7 @@ <h2>Your browser does not support modern CSS</h2>
</p>
</div>
<div id="tutorial-label-style-implementation-grid"></div>
<div class="tutorial-header" id="tutorial-edge-style-implementation-header">
<div class="tutorial-header hidden" id="tutorial-edge-style-implementation-header">
Tutorial: Edge Style Implementation
</div>
<div id="tutorial-edge-style-implementation" class="hidden">
Expand All @@ -278,7 +276,7 @@ <h2>Your browser does not support modern CSS</h2>
</p>
</div>
<div id="tutorial-edge-style-implementation-grid"></div>
<div class="tutorial-header" id="tutorial-port-style-implementation-header">
<div class="tutorial-header hidden" id="tutorial-port-style-implementation-header">
Tutorial: Port Style Implementation
</div>
<div id="tutorial-port-style-implementation" class="hidden">
Expand All @@ -299,7 +297,7 @@ <h2>Your browser does not support modern CSS</h2>
</p>
</div>
<div id="tutorial-port-style-implementation-grid"></div>
<div class="tutorial-header" id="tutorial-graph-builder-header">
<div class="tutorial-header hidden" id="tutorial-graph-builder-header">
Tutorial: Graph Builder
</div>
<div id="tutorial-graph-builder" class="hidden">
Expand All @@ -316,7 +314,7 @@ <h2>Your browser does not support modern CSS</h2>
</p>
</div>
<div id="tutorial-graph-builder-grid"></div>
<div class="tutorial-header" id="unavailable-header" style="display: none">
<div class="tutorial-header hidden" id="unavailable-header" style="display: none">
Demos Available in Complete Package
</div>

Expand Down
8 changes: 4 additions & 4 deletions demos/analysis/clustering/ClusteringDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,12 +211,12 @@ function configureUserInteraction(graphComponent) {

// when an edge is created, run the algorithm again except for the k-means and hierarchical
// because these two are independent of the edges of the graph
mode.createEdgeInputMode.addEdgeCreatedListener((_, args) => {
mode.createEdgeInputMode.addEdgeCreatedListener((_, evt) => {
if (
selectedAlgorithm === ClusteringAlgorithm.EDGE_BETWEENNESS &&
document.querySelector(`#directed`).checked
) {
graphComponent.graph.setStyle(args.item, directedEdgeStyle)
graphComponent.graph.setStyle(evt.item, directedEdgeStyle)
}
if (
selectedAlgorithm != ClusteringAlgorithm.kMEANS &&
Expand Down Expand Up @@ -247,10 +247,10 @@ function configureUserInteraction(graphComponent) {
// add the hover listener
mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
mode.itemHoverInputMode.discardInvalidItems = false
mode.itemHoverInputMode.addHoveredItemChangedListener((_, event) => {
mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
// if a node is hovered and the algorithm is HIERARCHICAL clustering, hover the corresponding dendrogram node
if (selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL) {
const node = event.item
const node = evt.item
graphComponent.highlightIndicatorManager.clearHighlights()
if (node && result) {
graphComponent.highlightIndicatorManager.addHighlight(node)
Expand Down
8 changes: 4 additions & 4 deletions demos/analysis/clustering/ClusteringDemo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,12 +204,12 @@ function configureUserInteraction(graphComponent: GraphComponent): void {

// when an edge is created, run the algorithm again except for the k-means and hierarchical
// because these two are independent of the edges of the graph
mode.createEdgeInputMode.addEdgeCreatedListener((_, args) => {
mode.createEdgeInputMode.addEdgeCreatedListener((_, evt) => {
if (
selectedAlgorithm === ClusteringAlgorithm.EDGE_BETWEENNESS &&
document.querySelector<HTMLInputElement>(`#directed`)!.checked
) {
graphComponent.graph.setStyle(args.item, directedEdgeStyle)
graphComponent.graph.setStyle(evt.item, directedEdgeStyle)
}
if (
selectedAlgorithm != ClusteringAlgorithm.kMEANS &&
Expand Down Expand Up @@ -240,10 +240,10 @@ function configureUserInteraction(graphComponent: GraphComponent): void {
// add the hover listener
mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
mode.itemHoverInputMode.discardInvalidItems = false
mode.itemHoverInputMode.addHoveredItemChangedListener((_, event) => {
mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
// if a node is hovered and the algorithm is HIERARCHICAL clustering, hover the corresponding dendrogram node
if (selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL) {
const node = event.item
const node = evt.item
graphComponent.highlightIndicatorManager.clearHighlights()
if (node && result) {
graphComponent.highlightIndicatorManager.addHighlight(node)
Expand Down
2 changes: 1 addition & 1 deletion demos/analysis/clustering/DendrogramSupport.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export class DendrogramComponent {
})
mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
mode.itemHoverInputMode.discardInvalidItems = false
mode.itemHoverInputMode.addHoveredItemChangedListener((sender, evt) =>
mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) =>
this.onHoveredItemChanged(evt.item)
)
mode.marqueeSelectionInputMode.enabled = false
Expand Down
2 changes: 1 addition & 1 deletion demos/analysis/clustering/DendrogramSupport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export class DendrogramComponent {
})
mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
mode.itemHoverInputMode.discardInvalidItems = false
mode.itemHoverInputMode.addHoveredItemChangedListener((sender, evt) =>
mode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) =>
this.onHoveredItemChanged(evt.item)
)
mode.marqueeSelectionInputMode.enabled = false
Expand Down
3 changes: 1 addition & 2 deletions demos/analysis/clustering/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,10 @@
////////////////////////////////////////////////////////////////////////-->

<title>Clustering Demo [yFiles for HTML]</title>
<script type="module" src="../../resources/demo-page-init.ts" async></script>

<link rel="stylesheet" href="../../resources/style/demo.css" />

<script type="module" src="../../resources/demo-page-init.ts" async></script>

<style>
.vertical-stack {
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion demos/analysis/criticalpathanalysis/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@
////////////////////////////////////////////////////////////////////////-->

<title>Critical Path Analysis (CPA) Demo [yFiles for HTML]</title>
<script type="module" src="../../resources/demo-page-init.ts" async></script>

<link rel="stylesheet" href="../../resources/style/demo.css" />

<script type="module" src="../../resources/demo-page-init.ts" async></script>
<style>
.critical-node-style {
fill: #c1c1c1;
Expand Down
46 changes: 23 additions & 23 deletions demos/analysis/intersection-detection/IntersectionDetectionDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,23 +79,23 @@ let graphComponent
*/
let intersectionVisualCreator

const considerSourceTargetIntersectionsBox = document.getElementById(
'consider-source-target-node-intersections'
const considerSourceTargetIntersectionsBox = document.querySelector(
'#consider-source-target-node-intersections'
)
const considerGroupContentIntersectionsBox = document.getElementById(
'consider-group-content-intersections'
const considerGroupContentIntersectionsBox = document.querySelector(
'#consider-group-content-intersections'
)
const considerLabelOwnerIntersectionsBox = document.getElementById(
'consider-label-owner-intersections'
const considerLabelOwnerIntersectionsBox = document.querySelector(
'#consider-label-owner-intersections'
)
const considerItemGeometryBox = document.getElementById('consider-item-geometry')
const considerSelectionBox = document.getElementById('consider-only-selection')
const intersectionCountLabel = document.getElementById('intersection-count')
const nodeNodeCountLabel = document.getElementById('node-node-count')
const nodeEdgeCountLabel = document.getElementById('node-edge-count')
const edgeEdgeCountLabel = document.getElementById('edge-edge-count')
const labelCountLabel = document.getElementById('label-count')
const consideredItemsSelect = document.getElementById('considered-items-select')
const considerItemGeometryBox = document.querySelector('#consider-item-geometry')
const considerSelectionBox = document.querySelector('#consider-only-selection')
const intersectionCountLabel = document.querySelector('#intersection-count')
const nodeNodeCountLabel = document.querySelector('#node-node-count')
const nodeEdgeCountLabel = document.querySelector('#node-edge-count')
const edgeEdgeCountLabel = document.querySelector('#edge-edge-count')
const labelCountLabel = document.querySelector('#label-count')
const consideredItemsSelect = document.querySelector('#considered-items-select')
/** @type {Array} */
let intersectionInfoArray = []

Expand Down Expand Up @@ -255,7 +255,7 @@ function loadSampleGraph(graph) {
layout: 'layout',
parentId: dataItem => dataItem.parent
})
ns.nodeCreator.addNodeCreatedListener((sender, evt) => {
ns.nodeCreator.addNodeCreatedListener((_, evt) => {
if (evt.dataItem.isEllipse) {
const defaultStyle = graph.nodeDefaults.style
graph.setStyle(
Expand All @@ -270,7 +270,7 @@ function loadSampleGraph(graph) {
})
const nodeLabelCreator = ns.nodeCreator.createLabelsSource(data => data.labels || []).labelCreator
nodeLabelCreator.textProvider = data => data.text || ''
nodeLabelCreator.addLabelAddedListener((sender, evt) => {
nodeLabelCreator.addLabelAddedListener((_, evt) => {
const label = evt.item
const data = evt.dataItem
graph.setLabelLayoutParameter(
Expand Down Expand Up @@ -302,7 +302,7 @@ function loadSampleGraph(graph) {
})
const edgeLabelCreator = es.edgeCreator.createLabelsSource(data => data.labels || []).labelCreator
edgeLabelCreator.textProvider = data => data.text || ''
edgeLabelCreator.addLabelAddedListener((sender, evt) => {
edgeLabelCreator.addLabelAddedListener((_, evt) => {
const label = evt.item
const data = evt.dataItem
graph.setLabelLayoutParameter(
Expand Down Expand Up @@ -425,8 +425,8 @@ function initializeInputMode() {

inputMode.itemHoverInputMode.hoverItems =
GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.LABEL
inputMode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
const item = args.item
inputMode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
const item = evt.item
const highlightIndicatorManager = graphComponent.highlightIndicatorManager
highlightIndicatorManager.clearHighlights()

Expand Down Expand Up @@ -486,16 +486,16 @@ function configureToolTips(inputMode) {
mouseHoverInputMode.duration = TimeSpan.fromSeconds(10)

// Register a listener for when a tool tip should be shown.
inputMode.addQueryItemToolTipListener((src, eventArgs) => {
if (eventArgs.handled) {
inputMode.addQueryItemToolTipListener((_, evt) => {
if (evt.handled) {
// Tool tip content has already been assigned -> nothing to do.
return
}

// Use a rich HTML element as tool tip content. Alternatively, a plain string would do as well.
eventArgs.toolTip = createToolTipContent(eventArgs.item, intersectionInfoArray)
evt.toolTip = createToolTipContent(evt.item, intersectionInfoArray)
// Indicate that the tool tip content has been set.
eventArgs.handled = true
evt.handled = true
})
}

Expand Down
70 changes: 32 additions & 38 deletions demos/analysis/intersection-detection/IntersectionDetectionDemo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,27 +77,23 @@ let graphComponent: GraphComponent
*/
let intersectionVisualCreator: IntersectionVisualCreator

const considerSourceTargetIntersectionsBox = document.getElementById(
'consider-source-target-node-intersections'
) as HTMLInputElement
const considerGroupContentIntersectionsBox = document.getElementById(
'consider-group-content-intersections'
) as HTMLInputElement
const considerLabelOwnerIntersectionsBox = document.getElementById(
'consider-label-owner-intersections'
) as HTMLInputElement
const considerItemGeometryBox = document.getElementById(
'consider-item-geometry'
) as HTMLInputElement
const considerSelectionBox = document.getElementById('consider-only-selection') as HTMLInputElement
const intersectionCountLabel = document.getElementById('intersection-count') as HTMLLabelElement
const nodeNodeCountLabel = document.getElementById('node-node-count') as HTMLLabelElement
const nodeEdgeCountLabel = document.getElementById('node-edge-count') as HTMLLabelElement
const edgeEdgeCountLabel = document.getElementById('edge-edge-count') as HTMLLabelElement
const labelCountLabel = document.getElementById('label-count') as HTMLLabelElement
const consideredItemsSelect = document.getElementById(
'considered-items-select'
) as HTMLSelectElement
const considerSourceTargetIntersectionsBox = document.querySelector<HTMLInputElement>(
'#consider-source-target-node-intersections'
)!
const considerGroupContentIntersectionsBox = document.querySelector<HTMLInputElement>(
'#consider-group-content-intersections'
)!
const considerLabelOwnerIntersectionsBox = document.querySelector<HTMLInputElement>(
'#consider-label-owner-intersections'
)!
const considerItemGeometryBox = document.querySelector<HTMLInputElement>('#consider-item-geometry')!
const considerSelectionBox = document.querySelector<HTMLInputElement>('#consider-only-selection')!
const intersectionCountLabel = document.querySelector<HTMLInputElement>('#intersection-count')!
const nodeNodeCountLabel = document.querySelector<HTMLInputElement>('#node-node-count')!
const nodeEdgeCountLabel = document.querySelector<HTMLInputElement>('#node-edge-count')!
const edgeEdgeCountLabel = document.querySelector<HTMLInputElement>('#edge-edge-count')!
const labelCountLabel = document.querySelector<HTMLInputElement>('#label-count')!
const consideredItemsSelect = document.querySelector<HTMLInputElement>('#considered-items-select')!
let intersectionInfoArray: Intersection[] = []

/**
Expand Down Expand Up @@ -252,7 +248,7 @@ function loadSampleGraph(graph: IGraph): void {
layout: 'layout',
parentId: dataItem => dataItem.parent
})
ns.nodeCreator.addNodeCreatedListener((sender, evt) => {
ns.nodeCreator.addNodeCreatedListener((_, evt) => {
if (evt.dataItem.isEllipse) {
const defaultStyle = graph.nodeDefaults.style as ShapeNodeStyle
graph.setStyle(
Expand All @@ -267,7 +263,7 @@ function loadSampleGraph(graph: IGraph): void {
})
const nodeLabelCreator = ns.nodeCreator.createLabelsSource(data => data.labels || []).labelCreator
nodeLabelCreator.textProvider = data => data.text || ''
nodeLabelCreator.addLabelAddedListener((sender, evt) => {
nodeLabelCreator.addLabelAddedListener((_, evt) => {
const label = evt.item
const data = evt.dataItem
graph.setLabelLayoutParameter(
Expand Down Expand Up @@ -299,7 +295,7 @@ function loadSampleGraph(graph: IGraph): void {
})
const edgeLabelCreator = es.edgeCreator.createLabelsSource(data => data.labels || []).labelCreator
edgeLabelCreator.textProvider = data => data.text || ''
edgeLabelCreator.addLabelAddedListener((sender, evt) => {
edgeLabelCreator.addLabelAddedListener((_, evt) => {
const label = evt.item
const data = evt.dataItem
graph.setLabelLayoutParameter(
Expand Down Expand Up @@ -421,8 +417,8 @@ function initializeInputMode(): void {

inputMode.itemHoverInputMode.hoverItems =
GraphItemTypes.NODE | GraphItemTypes.EDGE | GraphItemTypes.LABEL
inputMode.itemHoverInputMode.addHoveredItemChangedListener((sender, args) => {
const item = args.item
inputMode.itemHoverInputMode.addHoveredItemChangedListener((_, evt) => {
const item = evt.item
const highlightIndicatorManager = graphComponent.highlightIndicatorManager
highlightIndicatorManager.clearHighlights()

Expand Down Expand Up @@ -481,19 +477,17 @@ function configureToolTips(inputMode: GraphEditorInputMode): void {
mouseHoverInputMode.duration = TimeSpan.fromSeconds(10)

// Register a listener for when a tool tip should be shown.
inputMode.addQueryItemToolTipListener(
(src: object, eventArgs: QueryItemToolTipEventArgs<IModelItem>): void => {
if (eventArgs.handled) {
// Tool tip content has already been assigned -> nothing to do.
return
}

// Use a rich HTML element as tool tip content. Alternatively, a plain string would do as well.
eventArgs.toolTip = createToolTipContent(eventArgs.item!, intersectionInfoArray)
// Indicate that the tool tip content has been set.
eventArgs.handled = true
inputMode.addQueryItemToolTipListener((_, evt): void => {
if (evt.handled) {
// Tool tip content has already been assigned -> nothing to do.
return
}
)

// Use a rich HTML element as tool tip content. Alternatively, a plain string would do as well.
evt.toolTip = createToolTipContent(evt.item!, intersectionInfoArray)
// Indicate that the tool tip content has been set.
evt.handled = true
})
}

run().then(finishLoading)
Loading

0 comments on commit 84208e2

Please sign in to comment.