Page settings in Vue Diagram component
11 Jun 202424 minutes to read
Page settings enable to customize the appearance, width, and height of the diagram page.
Page size and appearance
-
The size and appearance of the diagram pages can be customized with the page settings property.
-
The
width
andheight
properties of page settings define the size of the page and based on the size, theorientation
will be set for the page. In addition to that, the appearance of the page can be customized withsource
and set of appearance specific properties. -
The
color
property is used to customize the background color and border color of the page. -
The
margin
property is used to define the page margin. -
To explore those properties, refer to
Page Settings
.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :getNodeDefaults='getNodeDefaults'
:connectors='connectors' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const connectors = [{
id: 'connector1',
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
sourceID: 'node1',
targetID: 'node2',
}];
const nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node3'
}]
}];
const width = "100%";
const height = "350px";
const getNodeDefaults = (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}
const pageSettings = {
// Sets the PageOrientation for the diagram to page
orientation: 'Landscape',
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey'
},
// Sets the width for the Page
width: 300,
// Sets the height for the Page
height: 300,
// Sets the space to be left between an annotation and its parent node/connector
margin: {
left: 10,
top: 10,
bottom: 10
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :getNodeDefaults='getNodeDefaults'
:connectors='connectors' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [{
id: 'connector1',
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
sourceID: 'node1',
targetID: 'node2',
}];
let nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node3'
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
connectors: connectors,
pageSettings: {
// Sets the PageOrientation for the diagram to page
orientation: 'Landscape',
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey'
},
// Sets the width for the Page
width: 300,
// Sets the height for the Page
height: 300,
// Sets the space to be left between an annotation and its parent node/connector
margin: {
left: 10,
top: 10,
bottom: 10
},
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Set background image
Stretch and align the background image anywhere over the diagram area. The source
property of background
allows you to set the path of the image. The scale
and the align
properties help to stretch/align the background images.
The following code illustrates how to stretch and align the background image.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const width = "100%";
const height = "350px";
const pageSettings = {
orientation: 'Landscape',
showPageBreaks: true,
// Defines the background Image source
background: {
source: 'https://www.w3schools.com/images/w3schools_green.jpg',
// Defines the scale values for the background image
scale: 'Meet',
// Defines the align values for the background image
align: 'XMinYMin'
},
width: 300,
height: 300,
margin: {
left: 10,
top: 10,
bottom: 10
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, PageSettings } from '@syncfusion/ej2-vue-diagrams';
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
pageSettings: {
orientation: 'Landscape',
showPageBreaks: true,
// Defines the background Image source
background: {
source: 'https://www.w3schools.com/images/w3schools_green.jpg',
// Defines the scale values for the background image
scale: 'Meet',
// Defines the align values for the background image
align: 'XMinYMin'
},
width: 300,
height: 300,
margin: {
left: 10,
top: 10,
bottom: 10
},
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Multiple page and page breaks
When multiple page is enabled, the size of the page dynamically increases or decreases in multiples of page width and height and completely fits diagram within the page boundaries. Page breaks is used as a visual guide to see how pages are split into multiple pages.
The multiplePage
and showPageBreak
properties of page settings allow you to enable/disable multiple pages and page breaks respectively.
The following code illustrates how to enable multiple page and page break lines.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :getNodeDefaults='getNodeDefaults'
:connectors='connectors' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
let connectors = [{
id: 'connector1',
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
sourceID: 'node1',
targetID: 'node2',
}];
let nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node3'
}]
}];
const width = "100%";
const height = "350px";
const getNodeDefaults = (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}
const pageSettings = {
orientation: 'Landscape',
// Sets the Multiple page for diagram
multiplePage: true,
// Sets the Page Break for diagram
showPageBreaks: true,
width: 300,
height: 300,
margin: {
left: 10,
top: 10,
bottom: 10
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :getNodeDefaults='getNodeDefaults'
:connectors='connectors' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [{
id: 'connector1',
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
sourceID: 'node1',
targetID: 'node2',
}];
let nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node3'
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
connectors: connectors,
pageSettings: {
orientation: 'Landscape',
// Sets the Multiple page for diagram
multiplePage: true,
// Sets the Page Break for diagram
showPageBreaks: true,
width: 300,
height: 300,
margin: {
left: 10,
top: 10,
bottom: 10
},
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Boundary constraints
The diagram provides support to restrict/customize the interactive region, out of which the elements cannot be dragged, resized, or rotated. The boundaryConstraints
property of page settings allows you to customize the interactive region. To explore the boundary constraints, refer to Boundary Constraints
.
The following code example illustrates how to define boundary constraints with respect to the page.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :getNodeDefaults='getNodeDefaults'
:connectors='connectors' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const connectors = [{
id: 'connector1',
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 100
}
}];
const nodes = [
{
id: 'node1',
width: 150,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 80,
height: 130,
offsetX: 200,
offsetY: 200,
}
]
const width = "100%";
const height = "350px";
const getNodeDefaults = (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
}
const pageSettings = {
// Sets the BoundaryConstraints to page
boundaryConstraints: 'Page',
background: {
color: 'grey'
},
width: 400,
height: 400,
showPageBreaks: true,
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :getNodeDefaults='getNodeDefaults'
:connectors='connectors' :pageSettings='pageSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let connectors = [{
id: 'connector1',
style: { strokeColor: '#6BA5D7', fill: '#6BA5D7', strokeWidth: 2 },
targetDecorator: { style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' } },
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 100
}
}];
let nodes = [
{
id: 'node1',
width: 150,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 80,
height: 130,
offsetX: 200,
offsetY: 200,
}
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
connectors: connectors,
pageSettings: {
// Sets the BoundaryConstraints to page
boundaryConstraints: 'Page',
background: {
color: 'grey'
},
width: 400,
height: 400,
showPageBreaks: true,
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>