Add C4Context diagram. Compatible with C4-PlantUML syntax.
For an example, see the source code demos/index.html - System Context - Container diagram - Component diagram - Dynamic diagram - Deployment diagram
This commit is contained in:
parent
9ba8e6e491
commit
28ca1420f9
133
demos/index.html
133
demos/index.html
|
@ -23,32 +23,33 @@
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
C4Context
|
C4Context
|
||||||
title System Context diagram for Internet Banking System
|
title System Context diagram for Internet Banking System
|
||||||
|
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||||
Person(customerB, "Banking Customer B")
|
Person(customerB, "Banking Customer B")
|
||||||
Person_Ext(customerC, "Banking Customer C")
|
Person_Ext(customerC, "Banking Customer C", "desc")
|
||||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
|
||||||
|
|
||||||
|
|
||||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||||
|
|
||||||
|
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||||
|
|
||||||
Enterprise_Boundary(b1, "BankBoundary") {
|
Enterprise_Boundary(b1, "BankBoundary") {
|
||||||
|
|
||||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||||
|
|
||||||
System_Boundary(b2, "BankBoundary2") {
|
System_Boundary(b2, "BankBoundary2") {
|
||||||
System(SystemA, "Banking System A")
|
System(SystemA, "Banking System A")
|
||||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
|
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
||||||
}
|
}
|
||||||
|
|
||||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||||
|
|
||||||
Boundary(b3, "BankBoundary3", "boundary") {
|
Boundary(b3, "BankBoundary3", "boundary") {
|
||||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
|
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
||||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
BiRel(customerA, SystemAA, "Uses")
|
BiRel(customerA, SystemAA, "Uses")
|
||||||
BiRel(SystemAA, SystemE, "Uses")
|
BiRel(SystemAA, SystemE, "Uses")
|
||||||
|
@ -56,6 +57,126 @@
|
||||||
Rel(SystemC, customerA, "Sends e-mails to")
|
Rel(SystemC, customerA, "Sends e-mails to")
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="mermaid">
|
||||||
|
C4Container
|
||||||
|
title Container diagram for Internet Banking System
|
||||||
|
|
||||||
|
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system")
|
||||||
|
Person(customer, Customer, "A customer of the bank, with personal bank accounts")
|
||||||
|
|
||||||
|
Container_Boundary(c1, "Internet Banking") {
|
||||||
|
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
|
||||||
|
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
|
||||||
|
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
|
||||||
|
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
|
||||||
|
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||||
|
|
||||||
|
Rel(customer, web_app, "Uses", "HTTPS")
|
||||||
|
Rel(customer, spa, "Uses", "HTTPS")
|
||||||
|
Rel(customer, mobile_app, "Uses")
|
||||||
|
|
||||||
|
Rel(web_app, spa, "Delivers")
|
||||||
|
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
|
||||||
|
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
|
||||||
|
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
|
||||||
|
|
||||||
|
Rel(email_system, customer, "Sends e-mails to")
|
||||||
|
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
|
||||||
|
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mermaid">
|
||||||
|
C4Component
|
||||||
|
title Component diagram for Internet Banking System - API Application
|
||||||
|
|
||||||
|
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||||
|
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
|
||||||
|
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||||
|
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||||
|
|
||||||
|
Container_Boundary(api, "API Application") {
|
||||||
|
Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system")
|
||||||
|
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
|
||||||
|
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
|
||||||
|
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
|
||||||
|
|
||||||
|
Rel(sign, security, "Uses")
|
||||||
|
Rel(accounts, mbsfacade, "Uses")
|
||||||
|
Rel(security, db, "Read & write to", "JDBC")
|
||||||
|
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
|
||||||
|
}
|
||||||
|
|
||||||
|
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
|
||||||
|
Rel(spa, accounts, "Uses", "JSON/HTTPS")
|
||||||
|
|
||||||
|
Rel(ma, sign, "Uses", "JSON/HTTPS")
|
||||||
|
Rel(ma, accounts, "Uses", "JSON/HTTPS")
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mermaid">
|
||||||
|
C4Dynamic
|
||||||
|
title Dynamic diagram for Internet Banking System - API Application
|
||||||
|
|
||||||
|
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||||
|
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
|
||||||
|
Container_Boundary(b, "API Application") {
|
||||||
|
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
|
||||||
|
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
|
||||||
|
}
|
||||||
|
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
|
||||||
|
Rel(c2, c3, "Calls isAuthenticated() on")
|
||||||
|
Rel(c3, c4, "select * from users where username = ?", "JDBC")
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mermaid">
|
||||||
|
C4Deployment
|
||||||
|
title Deployment Diagram for Internet Banking System - Live
|
||||||
|
|
||||||
|
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
|
||||||
|
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
||||||
|
}
|
||||||
|
|
||||||
|
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
|
||||||
|
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
|
||||||
|
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
|
||||||
|
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
|
||||||
|
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||||
|
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
|
||||||
|
Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||||
|
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
|
||||||
|
Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
|
||||||
|
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
|
||||||
|
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
|
||||||
|
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
|
||||||
|
Rel(spa, api, "Makes API calls to", "json/HTTPS")
|
||||||
|
Rel_U(web, spa, "Delivers to the customer's web browser")
|
||||||
|
Rel(api, db, "Reads from and writes to", "JDBC")
|
||||||
|
Rel(api, db2, "Reads from and writes to", "JDBC")
|
||||||
|
Rel_R(db, db2, "Replicates data to")
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
|
|
|
@ -1098,7 +1098,7 @@ const config = {
|
||||||
* | --------- | --------------------- | ------- | -------- | ------------------ |
|
* | --------- | --------------------- | ------- | -------- | ------------------ |
|
||||||
* | width | Width of person boxes | Integer | Required | Any Positive Value |
|
* | width | Width of person boxes | Integer | Required | Any Positive Value |
|
||||||
*
|
*
|
||||||
* **Notes:** Default value: 215
|
* **Notes:** Default value: 216
|
||||||
*/
|
*/
|
||||||
width: 216,
|
width: 216,
|
||||||
|
|
||||||
|
@ -1107,7 +1107,7 @@ const config = {
|
||||||
* | --------- | ---------------------- | ------- | -------- | ------------------ |
|
* | --------- | ---------------------- | ------- | -------- | ------------------ |
|
||||||
* | height | Height of person boxes | Integer | Required | Any Positive Value |
|
* | height | Height of person boxes | Integer | Required | Any Positive Value |
|
||||||
*
|
*
|
||||||
* **Notes:** Default value: 65
|
* **Notes:** Default value: 60
|
||||||
*/
|
*/
|
||||||
height: 60,
|
height: 60,
|
||||||
|
|
||||||
|
@ -1141,10 +1141,34 @@ const config = {
|
||||||
personFontFamily: '"Open Sans", sans-serif',
|
personFontFamily: '"Open Sans", sans-serif',
|
||||||
personFontWeight: 'normal',
|
personFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_personFontSize: 14,
|
||||||
|
external_personFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_personFontWeight: 'normal',
|
||||||
|
|
||||||
systemFontSize: 14,
|
systemFontSize: 14,
|
||||||
systemFontFamily: '"Open Sans", sans-serif',
|
systemFontFamily: '"Open Sans", sans-serif',
|
||||||
systemFontWeight: 'normal',
|
systemFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_systemFontSize: 14,
|
||||||
|
external_systemFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_systemFontWeight: 'normal',
|
||||||
|
|
||||||
|
system_dbFontSize: 14,
|
||||||
|
system_dbFontFamily: '"Open Sans", sans-serif',
|
||||||
|
system_dbFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_system_dbFontSize: 14,
|
||||||
|
external_system_dbFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_system_dbFontWeight: 'normal',
|
||||||
|
|
||||||
|
system_queueFontSize: 14,
|
||||||
|
system_queueFontFamily: '"Open Sans", sans-serif',
|
||||||
|
system_queueFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_system_queueFontSize: 14,
|
||||||
|
external_system_queueFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_system_queueFontWeight: 'normal',
|
||||||
|
|
||||||
boundaryFontSize: 14,
|
boundaryFontSize: 14,
|
||||||
boundaryFontFamily: '"Open Sans", sans-serif',
|
boundaryFontFamily: '"Open Sans", sans-serif',
|
||||||
boundaryFontWeight: 'normal',
|
boundaryFontWeight: 'normal',
|
||||||
|
@ -1153,6 +1177,54 @@ const config = {
|
||||||
messageFontFamily: '"Open Sans", sans-serif',
|
messageFontFamily: '"Open Sans", sans-serif',
|
||||||
messageFontWeight: 'normal',
|
messageFontWeight: 'normal',
|
||||||
|
|
||||||
|
containerFontSize: 14,
|
||||||
|
containerFontFamily: '"Open Sans", sans-serif',
|
||||||
|
containerFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_containerFontSize: 14,
|
||||||
|
external_containerFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_containerFontWeight: 'normal',
|
||||||
|
|
||||||
|
container_dbFontSize: 14,
|
||||||
|
container_dbFontFamily: '"Open Sans", sans-serif',
|
||||||
|
container_dbFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_container_dbFontSize: 14,
|
||||||
|
external_container_dbFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_container_dbFontWeight: 'normal',
|
||||||
|
|
||||||
|
container_queueFontSize: 14,
|
||||||
|
container_queueFontFamily: '"Open Sans", sans-serif',
|
||||||
|
container_queueFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_container_queueFontSize: 14,
|
||||||
|
external_container_queueFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_container_queueFontWeight: 'normal',
|
||||||
|
|
||||||
|
componentFontSize: 14,
|
||||||
|
componentFontFamily: '"Open Sans", sans-serif',
|
||||||
|
componentFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_componentFontSize: 14,
|
||||||
|
external_componentFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_componentFontWeight: 'normal',
|
||||||
|
|
||||||
|
component_dbFontSize: 14,
|
||||||
|
component_dbFontFamily: '"Open Sans", sans-serif',
|
||||||
|
component_dbFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_component_dbFontSize: 14,
|
||||||
|
external_component_dbFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_component_dbFontWeight: 'normal',
|
||||||
|
|
||||||
|
component_queueFontSize: 14,
|
||||||
|
component_queueFontFamily: '"Open Sans", sans-serif',
|
||||||
|
component_queueFontWeight: 'normal',
|
||||||
|
|
||||||
|
external_component_queueFontSize: 14,
|
||||||
|
external_component_queueFontFamily: '"Open Sans", sans-serif',
|
||||||
|
external_component_queueFontWeight: 'normal',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This sets the auto-wrap state for the diagram
|
* This sets the auto-wrap state for the diagram
|
||||||
*
|
*
|
||||||
|
@ -1175,6 +1247,14 @@ const config = {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
external_personFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_personFontFamily,
|
||||||
|
fontSize: this.external_personFontSize,
|
||||||
|
fontWeight: this.external_personFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
systemFont: function () {
|
systemFont: function () {
|
||||||
return {
|
return {
|
||||||
fontFamily: this.systemFontFamily,
|
fontFamily: this.systemFontFamily,
|
||||||
|
@ -1183,6 +1263,142 @@ const config = {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
external_systemFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_systemFontFamily,
|
||||||
|
fontSize: this.external_systemFontSize,
|
||||||
|
fontWeight: this.external_systemFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
system_dbFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.system_dbFontFamily,
|
||||||
|
fontSize: this.system_dbFontSize,
|
||||||
|
fontWeight: this.system_dbFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_system_dbFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_system_dbFontFamily,
|
||||||
|
fontSize: this.external_system_dbFontSize,
|
||||||
|
fontWeight: this.external_system_dbFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
system_queueFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.system_queueFontFamily,
|
||||||
|
fontSize: this.system_queueFontSize,
|
||||||
|
fontWeight: this.system_queueFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_system_queueFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_system_queueFontFamily,
|
||||||
|
fontSize: this.external_system_queueFontSize,
|
||||||
|
fontWeight: this.external_system_queueFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
containerFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.containerFontFamily,
|
||||||
|
fontSize: this.containerFontSize,
|
||||||
|
fontWeight: this.containerFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_containerFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_containerFontFamily,
|
||||||
|
fontSize: this.external_containerFontSize,
|
||||||
|
fontWeight: this.external_containerFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
container_dbFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.container_dbFontFamily,
|
||||||
|
fontSize: this.container_dbFontSize,
|
||||||
|
fontWeight: this.container_dbFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_container_dbFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_container_dbFontFamily,
|
||||||
|
fontSize: this.external_container_dbFontSize,
|
||||||
|
fontWeight: this.external_container_dbFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
container_queueFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.container_queueFontFamily,
|
||||||
|
fontSize: this.container_queueFontSize,
|
||||||
|
fontWeight: this.container_queueFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_container_queueFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_container_queueFontFamily,
|
||||||
|
fontSize: this.external_container_queueFontSize,
|
||||||
|
fontWeight: this.external_container_queueFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
componentFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.componentFontFamily,
|
||||||
|
fontSize: this.componentFontSize,
|
||||||
|
fontWeight: this.componentFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_componentFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_componentFontFamily,
|
||||||
|
fontSize: this.external_componentFontSize,
|
||||||
|
fontWeight: this.external_componentFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
component_dbFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.component_dbFontFamily,
|
||||||
|
fontSize: this.component_dbFontSize,
|
||||||
|
fontWeight: this.component_dbFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_component_dbFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_component_dbFontFamily,
|
||||||
|
fontSize: this.external_component_dbFontSize,
|
||||||
|
fontWeight: this.external_component_dbFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
component_queueFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.component_queueFontFamily,
|
||||||
|
fontSize: this.component_queueFontSize,
|
||||||
|
fontWeight: this.component_queueFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
external_component_queueFont: function () {
|
||||||
|
return {
|
||||||
|
fontFamily: this.external_component_queueFontFamily,
|
||||||
|
fontSize: this.external_component_queueFontSize,
|
||||||
|
fontWeight: this.external_component_queueFontWeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
boundaryFont: function () {
|
boundaryFont: function () {
|
||||||
return {
|
return {
|
||||||
fontFamily: this.boundaryFontFamily,
|
fontFamily: this.boundaryFontFamily,
|
||||||
|
@ -1217,6 +1433,30 @@ const config = {
|
||||||
external_system_db_border_color: '#8A8A8A',
|
external_system_db_border_color: '#8A8A8A',
|
||||||
external_system_queue_bg_color: '#999999',
|
external_system_queue_bg_color: '#999999',
|
||||||
external_system_queue_border_color: '#8A8A8A',
|
external_system_queue_border_color: '#8A8A8A',
|
||||||
|
container_bg_color: '#438DD5',
|
||||||
|
container_border_color: '#3C7FC0',
|
||||||
|
container_db_bg_color: '#438DD5',
|
||||||
|
container_db_border_color: '#3C7FC0',
|
||||||
|
container_queue_bg_color: '#438DD5',
|
||||||
|
container_queue_border_color: '#3C7FC0',
|
||||||
|
external_container_bg_color: '#B3B3B3',
|
||||||
|
external_container_border_color: '#A6A6A6',
|
||||||
|
external_container_db_bg_color: '#B3B3B3',
|
||||||
|
external_container_db_border_color: '#A6A6A6',
|
||||||
|
external_container_queue_bg_color: '#B3B3B3',
|
||||||
|
external_container_queue_border_color: '#A6A6A6',
|
||||||
|
component_bg_color: '#85BBF0',
|
||||||
|
component_border_color: '#78A8D8',
|
||||||
|
component_db_bg_color: '#85BBF0',
|
||||||
|
component_db_border_color: '#78A8D8',
|
||||||
|
component_queue_bg_color: '#85BBF0',
|
||||||
|
component_queue_border_color: '#78A8D8',
|
||||||
|
external_component_bg_color: '#CCCCCC',
|
||||||
|
external_component_border_color: '#BFBFBF',
|
||||||
|
external_component_db_bg_color: '#CCCCCC',
|
||||||
|
external_component_db_border_color: '#BFBFBF',
|
||||||
|
external_component_queue_bg_color: '#CCCCCC',
|
||||||
|
external_component_queue_border_color: '#BFBFBF',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@ import * as configApi from '../../config';
|
||||||
import { log } from '../../logger';
|
import { log } from '../../logger';
|
||||||
import { sanitizeText } from '../common/common';
|
import { sanitizeText } from '../common/common';
|
||||||
|
|
||||||
let personOrSystemArray = [];
|
let c4ShapeArray = [];
|
||||||
let boundaryParseStack = [''];
|
let boundaryParseStack = [''];
|
||||||
let currentBoundaryParse = 'global';
|
let currentBoundaryParse = 'global';
|
||||||
let parentBoundaryParse = '';
|
let parentBoundaryParse = '';
|
||||||
|
@ -11,7 +11,7 @@ let boundarys = [
|
||||||
{
|
{
|
||||||
alias: 'global',
|
alias: 'global',
|
||||||
label: { text: 'global' },
|
label: { text: 'global' },
|
||||||
type: 'global',
|
type: { text: 'global' },
|
||||||
tags: null,
|
tags: null,
|
||||||
link: null,
|
link: null,
|
||||||
parentBoundary: '',
|
parentBoundary: '',
|
||||||
|
@ -21,14 +21,14 @@ let rels = [];
|
||||||
let title = '';
|
let title = '';
|
||||||
let wrapEnabled = false;
|
let wrapEnabled = false;
|
||||||
let description = '';
|
let description = '';
|
||||||
let c4Type = 'C4Context';
|
var c4Type;
|
||||||
|
|
||||||
export const getC4Type = function () {
|
export const getC4Type = function () {
|
||||||
return c4Type;
|
return c4Type;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setC4Type = function (c4Type) {
|
export const setC4Type = function (c4TypeParam) {
|
||||||
let sanitizedText = sanitizeText(c4Type, configApi.getConfig());
|
let sanitizedText = sanitizeText(c4TypeParam, configApi.getConfig());
|
||||||
c4Type = sanitizedText;
|
c4Type = sanitizedText;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -84,17 +84,17 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag
|
||||||
};
|
};
|
||||||
|
|
||||||
//type, alias, label, ?descr, ?sprite, ?tags, $link
|
//type, alias, label, ?descr, ?sprite, ?tags, $link
|
||||||
export const addPersonOrSystem = function (type, alias, label, descr, sprite, tags, link) {
|
export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, sprite, tags, link) {
|
||||||
// Don't allow label nulling
|
// Don't allow label nulling
|
||||||
if (alias === null || label === null) return;
|
if (alias === null || label === null) return;
|
||||||
|
|
||||||
let personOrSystem = {};
|
let personOrSystem = {};
|
||||||
const old = personOrSystemArray.find((personOrSystem) => personOrSystem.alias === alias);
|
const old = c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);
|
||||||
if (old && alias === old.alias) {
|
if (old && alias === old.alias) {
|
||||||
personOrSystem = old;
|
personOrSystem = old;
|
||||||
} else {
|
} else {
|
||||||
personOrSystem.alias = alias;
|
personOrSystem.alias = alias;
|
||||||
personOrSystemArray.push(personOrSystem);
|
c4ShapeArray.push(personOrSystem);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't allow null labels, either
|
// Don't allow null labels, either
|
||||||
|
@ -114,12 +114,94 @@ export const addPersonOrSystem = function (type, alias, label, descr, sprite, ta
|
||||||
personOrSystem.sprite = sprite;
|
personOrSystem.sprite = sprite;
|
||||||
personOrSystem.tags = tags;
|
personOrSystem.tags = tags;
|
||||||
personOrSystem.link = link;
|
personOrSystem.link = link;
|
||||||
personOrSystem.type = type;
|
personOrSystem.typeC4Shape = { text: typeC4Shape };
|
||||||
personOrSystem.parentBoundary = currentBoundaryParse;
|
personOrSystem.parentBoundary = currentBoundaryParse;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//type, alias, label, ?techn, ?descr ?sprite, ?tags, $link
|
||||||
|
export const addContainer = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {
|
||||||
|
// Don't allow label nulling
|
||||||
|
if (alias === null || label === null) return;
|
||||||
|
|
||||||
|
let container = {};
|
||||||
|
const old = c4ShapeArray.find((container) => container.alias === alias);
|
||||||
|
if (old && alias === old.alias) {
|
||||||
|
container = old;
|
||||||
|
} else {
|
||||||
|
container.alias = alias;
|
||||||
|
c4ShapeArray.push(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't allow null labels, either
|
||||||
|
if (label === undefined || label === null) {
|
||||||
|
container.label = { text: '' };
|
||||||
|
} else {
|
||||||
|
container.label = { text: label };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (techn === undefined || techn === null) {
|
||||||
|
container.techn = { text: '' };
|
||||||
|
} else {
|
||||||
|
container.techn = { text: techn };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (descr === undefined || descr === null) {
|
||||||
|
container.descr = { text: '' };
|
||||||
|
} else {
|
||||||
|
container.descr = { text: descr };
|
||||||
|
}
|
||||||
|
|
||||||
|
container.sprite = sprite;
|
||||||
|
container.tags = tags;
|
||||||
|
container.link = link;
|
||||||
|
container.wrap = autoWrap();
|
||||||
|
container.typeC4Shape = { text: typeC4Shape };
|
||||||
|
container.parentBoundary = currentBoundaryParse;
|
||||||
|
};
|
||||||
|
|
||||||
|
//type, alias, label, ?techn, ?descr ?sprite, ?tags, $link
|
||||||
|
export const addComponent = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {
|
||||||
|
// Don't allow label nulling
|
||||||
|
if (alias === null || label === null) return;
|
||||||
|
|
||||||
|
let component = {};
|
||||||
|
const old = c4ShapeArray.find((component) => component.alias === alias);
|
||||||
|
if (old && alias === old.alias) {
|
||||||
|
component = old;
|
||||||
|
} else {
|
||||||
|
component.alias = alias;
|
||||||
|
c4ShapeArray.push(component);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't allow null labels, either
|
||||||
|
if (label === undefined || label === null) {
|
||||||
|
component.label = { text: '' };
|
||||||
|
} else {
|
||||||
|
component.label = { text: label };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (techn === undefined || techn === null) {
|
||||||
|
component.techn = { text: '' };
|
||||||
|
} else {
|
||||||
|
component.techn = { text: techn };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (descr === undefined || descr === null) {
|
||||||
|
component.descr = { text: '' };
|
||||||
|
} else {
|
||||||
|
component.descr = { text: descr };
|
||||||
|
}
|
||||||
|
|
||||||
|
component.sprite = sprite;
|
||||||
|
component.tags = tags;
|
||||||
|
component.link = link;
|
||||||
|
component.wrap = autoWrap();
|
||||||
|
component.typeC4Shape = { text: typeC4Shape };
|
||||||
|
component.parentBoundary = currentBoundaryParse;
|
||||||
|
};
|
||||||
|
|
||||||
//alias, label, ?type, ?tags, $link
|
//alias, label, ?type, ?tags, $link
|
||||||
export const addBoundary = function (alias, label, type, tags, link) {
|
export const addPersonOrSystemBoundary = function (alias, label, type, tags, link) {
|
||||||
// if (parentBoundary === null) return;
|
// if (parentBoundary === null) return;
|
||||||
|
|
||||||
// Don't allow label nulling
|
// Don't allow label nulling
|
||||||
|
@ -147,11 +229,104 @@ export const addBoundary = function (alias, label, type, tags, link) {
|
||||||
boundary.type = { text: type };
|
boundary.type = { text: type };
|
||||||
}
|
}
|
||||||
|
|
||||||
boundary.wrap = autoWrap();
|
|
||||||
boundary.tags = tags;
|
boundary.tags = tags;
|
||||||
boundary.link = link;
|
boundary.link = link;
|
||||||
boundary.type = type;
|
|
||||||
boundary.parentBoundary = currentBoundaryParse;
|
boundary.parentBoundary = currentBoundaryParse;
|
||||||
|
boundary.wrap = autoWrap();
|
||||||
|
|
||||||
|
parentBoundaryParse = currentBoundaryParse;
|
||||||
|
currentBoundaryParse = alias;
|
||||||
|
boundaryParseStack.push(parentBoundaryParse);
|
||||||
|
};
|
||||||
|
|
||||||
|
//alias, label, ?type, ?tags, $link
|
||||||
|
export const addContainerBoundary = function (alias, label, type, tags, link) {
|
||||||
|
// if (parentBoundary === null) return;
|
||||||
|
|
||||||
|
// Don't allow label nulling
|
||||||
|
if (alias === null || label === null) return;
|
||||||
|
|
||||||
|
let boundary = {};
|
||||||
|
const old = boundarys.find((boundary) => boundary.alias === alias);
|
||||||
|
if (old && alias === old.alias) {
|
||||||
|
boundary = old;
|
||||||
|
} else {
|
||||||
|
boundary.alias = alias;
|
||||||
|
boundarys.push(boundary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't allow null labels, either
|
||||||
|
if (label === undefined || label === null) {
|
||||||
|
boundary.label = { text: '' };
|
||||||
|
} else {
|
||||||
|
boundary.label = { text: label };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === undefined || type === null) {
|
||||||
|
boundary.type = { text: 'container' };
|
||||||
|
} else {
|
||||||
|
boundary.type = { text: type };
|
||||||
|
}
|
||||||
|
|
||||||
|
boundary.tags = tags;
|
||||||
|
boundary.link = link;
|
||||||
|
boundary.parentBoundary = currentBoundaryParse;
|
||||||
|
boundary.wrap = autoWrap();
|
||||||
|
|
||||||
|
parentBoundaryParse = currentBoundaryParse;
|
||||||
|
currentBoundaryParse = alias;
|
||||||
|
boundaryParseStack.push(parentBoundaryParse);
|
||||||
|
};
|
||||||
|
|
||||||
|
//alias, label, ?type, ?descr, ?sprite, ?tags, $link
|
||||||
|
export const addDeploymentNode = function (
|
||||||
|
nodeType,
|
||||||
|
alias,
|
||||||
|
label,
|
||||||
|
type,
|
||||||
|
descr,
|
||||||
|
sprite,
|
||||||
|
tags,
|
||||||
|
link
|
||||||
|
) {
|
||||||
|
// if (parentBoundary === null) return;
|
||||||
|
|
||||||
|
// Don't allow label nulling
|
||||||
|
if (alias === null || label === null) return;
|
||||||
|
|
||||||
|
let boundary = {};
|
||||||
|
const old = boundarys.find((boundary) => boundary.alias === alias);
|
||||||
|
if (old && alias === old.alias) {
|
||||||
|
boundary = old;
|
||||||
|
} else {
|
||||||
|
boundary.alias = alias;
|
||||||
|
boundarys.push(boundary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Don't allow null labels, either
|
||||||
|
if (label === undefined || label === null) {
|
||||||
|
boundary.label = { text: '' };
|
||||||
|
} else {
|
||||||
|
boundary.label = { text: label };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === undefined || type === null) {
|
||||||
|
boundary.type = { text: 'node' };
|
||||||
|
} else {
|
||||||
|
boundary.type = { text: type };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (descr === undefined || descr === null) {
|
||||||
|
boundary.descr = { text: '' };
|
||||||
|
} else {
|
||||||
|
boundary.descr = { text: type };
|
||||||
|
}
|
||||||
|
|
||||||
|
boundary.tags = tags;
|
||||||
|
boundary.link = link;
|
||||||
|
boundary.nodeType = nodeType;
|
||||||
|
boundary.parentBoundary = currentBoundaryParse;
|
||||||
|
boundary.wrap = autoWrap();
|
||||||
|
|
||||||
parentBoundaryParse = currentBoundaryParse;
|
parentBoundaryParse = currentBoundaryParse;
|
||||||
currentBoundaryParse = alias;
|
currentBoundaryParse = alias;
|
||||||
|
@ -173,18 +348,18 @@ export const getParentBoundaryParse = function () {
|
||||||
return parentBoundaryParse;
|
return parentBoundaryParse;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getPersonOrSystemArray = function (parentBoundary) {
|
export const getC4ShapeArray = function (parentBoundary) {
|
||||||
if (parentBoundary === undefined || parentBoundary === null) return personOrSystemArray;
|
if (parentBoundary === undefined || parentBoundary === null) return c4ShapeArray;
|
||||||
else
|
else
|
||||||
return personOrSystemArray.filter((personOrSystem) => {
|
return c4ShapeArray.filter((personOrSystem) => {
|
||||||
return personOrSystem.parentBoundary === parentBoundary;
|
return personOrSystem.parentBoundary === parentBoundary;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
export const getPersonOrSystem = function (alias) {
|
export const getC4Shape = function (alias) {
|
||||||
return personOrSystemArray.find((personOrSystem) => personOrSystem.alias === alias);
|
return c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);
|
||||||
};
|
};
|
||||||
export const getPersonOrSystemKeys = function (parentBoundary) {
|
export const getC4ShapeKeys = function (parentBoundary) {
|
||||||
return Object.keys(getPersonOrSystemArray(parentBoundary));
|
return Object.keys(getC4ShapeArray(parentBoundary));
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getBoundarys = function (parentBoundary) {
|
export const getBoundarys = function (parentBoundary) {
|
||||||
|
@ -209,12 +384,12 @@ export const autoWrap = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const clear = function () {
|
export const clear = function () {
|
||||||
personOrSystemArray = [];
|
c4ShapeArray = [];
|
||||||
boundarys = [
|
boundarys = [
|
||||||
{
|
{
|
||||||
alias: 'global',
|
alias: 'global',
|
||||||
label: { text: 'global' },
|
label: { text: 'global' },
|
||||||
type: 'global',
|
type: { text: 'global' },
|
||||||
tags: null,
|
tags: null,
|
||||||
link: null,
|
link: null,
|
||||||
parentBoundary: '',
|
parentBoundary: '',
|
||||||
|
@ -279,14 +454,18 @@ const getAccDescription = function () {
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
addPersonOrSystem,
|
addPersonOrSystem,
|
||||||
addBoundary,
|
addPersonOrSystemBoundary,
|
||||||
|
addContainer,
|
||||||
|
addContainerBoundary,
|
||||||
|
addComponent,
|
||||||
|
addDeploymentNode,
|
||||||
popBoundaryParseStack,
|
popBoundaryParseStack,
|
||||||
addRel,
|
addRel,
|
||||||
autoWrap,
|
autoWrap,
|
||||||
setWrap,
|
setWrap,
|
||||||
getPersonOrSystemArray,
|
getC4ShapeArray,
|
||||||
getPersonOrSystem,
|
getC4Shape,
|
||||||
getPersonOrSystemKeys,
|
getC4ShapeKeys,
|
||||||
getBoundarys,
|
getBoundarys,
|
||||||
getCurrentBoundaryParse,
|
getCurrentBoundaryParse,
|
||||||
getParentBoundaryParse,
|
getParentBoundaryParse,
|
||||||
|
|
|
@ -36,6 +36,7 @@ class Bounds {
|
||||||
this.nextData.stopx = undefined;
|
this.nextData.stopx = undefined;
|
||||||
this.nextData.starty = undefined;
|
this.nextData.starty = undefined;
|
||||||
this.nextData.stopy = undefined;
|
this.nextData.stopy = undefined;
|
||||||
|
this.nextData.cnt = 0;
|
||||||
|
|
||||||
setConf(parser.yy.getConfig());
|
setConf(parser.yy.getConfig());
|
||||||
}
|
}
|
||||||
|
@ -56,17 +57,26 @@ class Bounds {
|
||||||
}
|
}
|
||||||
|
|
||||||
insert(c4Shape) {
|
insert(c4Shape) {
|
||||||
let _startx = this.nextData.stopx + c4Shape.margin * 2;
|
this.nextData.cnt = this.nextData.cnt + 1;
|
||||||
|
let _startx =
|
||||||
|
this.nextData.startx === this.nextData.stopx
|
||||||
|
? this.nextData.stopx + c4Shape.margin
|
||||||
|
: this.nextData.stopx + c4Shape.margin * 2;
|
||||||
let _stopx = _startx + c4Shape.width;
|
let _stopx = _startx + c4Shape.width;
|
||||||
let _starty = this.nextData.starty + c4Shape.margin * 2;
|
let _starty = this.nextData.starty + c4Shape.margin * 2;
|
||||||
let _stopy = _starty + c4Shape.height;
|
let _stopy = _starty + c4Shape.height;
|
||||||
if (_startx >= this.data.widthLimit || _stopx >= this.data.widthLimit) {
|
if (
|
||||||
_startx = this.nextData.startx + c4Shape.margin * 2 + conf.nextLinePaddingX;
|
_startx >= this.data.widthLimit ||
|
||||||
|
_stopx >= this.data.widthLimit ||
|
||||||
|
this.nextData.cnt > conf.c4ShapeInRow
|
||||||
|
) {
|
||||||
|
_startx = this.nextData.startx + c4Shape.margin + conf.nextLinePaddingX;
|
||||||
_starty = this.nextData.stopy + c4Shape.margin * 2;
|
_starty = this.nextData.stopy + c4Shape.margin * 2;
|
||||||
|
|
||||||
this.nextData.stopx = _stopx = _startx + c4Shape.width;
|
this.nextData.stopx = _stopx = _startx + c4Shape.width;
|
||||||
this.nextData.starty = this.nextData.stopy;
|
this.nextData.starty = this.nextData.stopy;
|
||||||
this.nextData.stopy = _stopy = _starty + c4Shape.height;
|
this.nextData.stopy = _stopy = _starty + c4Shape.height;
|
||||||
|
this.nextData.cnt = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
c4Shape.x = _startx;
|
c4Shape.x = _startx;
|
||||||
|
@ -84,6 +94,7 @@ class Bounds {
|
||||||
}
|
}
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
|
this.name = '';
|
||||||
this.data = {
|
this.data = {
|
||||||
startx: undefined,
|
startx: undefined,
|
||||||
stopx: undefined,
|
stopx: undefined,
|
||||||
|
@ -91,6 +102,13 @@ class Bounds {
|
||||||
stopy: undefined,
|
stopy: undefined,
|
||||||
widthLimit: undefined,
|
widthLimit: undefined,
|
||||||
};
|
};
|
||||||
|
this.nextData = {
|
||||||
|
startx: undefined,
|
||||||
|
stopx: undefined,
|
||||||
|
starty: undefined,
|
||||||
|
stopy: undefined,
|
||||||
|
cnt: 0,
|
||||||
|
};
|
||||||
setConf(parser.yy.getConfig());
|
setConf(parser.yy.getConfig());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -100,19 +118,25 @@ class Bounds {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const personFont = (cnf) => {
|
export const setConf = function (cnf) {
|
||||||
return {
|
assignWithDepth(conf, cnf);
|
||||||
fontFamily: cnf.personFontFamily,
|
|
||||||
fontSize: cnf.personFontSize,
|
if (cnf.fontFamily) {
|
||||||
fontWeight: cnf.personFontWeight,
|
conf.personFontFamily = conf.systemFontFamily = conf.messageFontFamily = cnf.fontFamily;
|
||||||
};
|
}
|
||||||
|
if (cnf.fontSize) {
|
||||||
|
conf.personFontSize = conf.systemFontSize = conf.messageFontSize = cnf.fontSize;
|
||||||
|
}
|
||||||
|
if (cnf.fontWeight) {
|
||||||
|
conf.personFontWeight = conf.systemFontWeight = conf.messageFontWeight = cnf.fontWeight;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const systemFont = (cnf) => {
|
const c4ShapeFont = (cnf, typeC4Shape) => {
|
||||||
return {
|
return {
|
||||||
fontFamily: cnf.systemFontFamily,
|
fontFamily: cnf[typeC4Shape + 'FontFamily'],
|
||||||
fontSize: cnf.systemFontSize,
|
fontSize: cnf[typeC4Shape + 'FontSize'],
|
||||||
fontWeight: cnf.systemFontWeight,
|
fontWeight: cnf[typeC4Shape + 'FontWeight'],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -139,16 +163,18 @@ const messageFont = (cnf) => {
|
||||||
* @param textConf
|
* @param textConf
|
||||||
* @param textLimitWidth
|
* @param textLimitWidth
|
||||||
*/
|
*/
|
||||||
function setC4ShapeText(textType, c4Shape, c4ShapeTextWrap, textConf, textLimitWidth) {
|
function calcC4ShapeTextWH(textType, c4Shape, c4ShapeTextWrap, textConf, textLimitWidth) {
|
||||||
if (!c4Shape[textType].width) {
|
if (!c4Shape[textType].width) {
|
||||||
if (c4ShapeTextWrap) {
|
if (c4ShapeTextWrap) {
|
||||||
c4Shape[textType].text = wrapLabel(c4Shape[textType].text, textLimitWidth, textConf);
|
c4Shape[textType].text = wrapLabel(c4Shape[textType].text, textLimitWidth, textConf);
|
||||||
c4Shape[textType].labelLines = c4Shape[textType].text.split(common.lineBreakRegex).length;
|
c4Shape[textType].textLines = c4Shape[textType].text.split(common.lineBreakRegex).length;
|
||||||
|
// c4Shape[textType].width = calculateTextWidth(c4Shape[textType].text, textConf);
|
||||||
c4Shape[textType].width = textLimitWidth;
|
c4Shape[textType].width = textLimitWidth;
|
||||||
c4Shape[textType].height = c4Shape[textType].labelLines * (textConf.fontSize + 2);
|
// c4Shape[textType].height = c4Shape[textType].textLines * textConf.fontSize;
|
||||||
|
c4Shape[textType].height = calculateTextHeight(c4Shape[textType].text, textConf);
|
||||||
} else {
|
} else {
|
||||||
let lines = c4Shape[textType].text.split(common.lineBreakRegex);
|
let lines = c4Shape[textType].text.split(common.lineBreakRegex);
|
||||||
c4Shape[textType].labelLines = lines.length;
|
c4Shape[textType].textLines = lines.length;
|
||||||
let lineHeight = 0;
|
let lineHeight = 0;
|
||||||
c4Shape[textType].height = 0;
|
c4Shape[textType].height = 0;
|
||||||
c4Shape[textType].width = 0;
|
c4Shape[textType].width = 0;
|
||||||
|
@ -160,7 +186,7 @@ function setC4ShapeText(textType, c4Shape, c4ShapeTextWrap, textConf, textLimitW
|
||||||
lineHeight = calculateTextHeight(lines[i], textConf);
|
lineHeight = calculateTextHeight(lines[i], textConf);
|
||||||
c4Shape[textType].height = c4Shape[textType].height + lineHeight;
|
c4Shape[textType].height = c4Shape[textType].height + lineHeight;
|
||||||
}
|
}
|
||||||
// c4Shapes[textType].height = c4Shapes[textType].labelLines * textConf.fontSize;
|
// c4Shapes[textType].height = c4Shapes[textType].textLines * textConf.fontSize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -178,110 +204,102 @@ export const drawBoundary = function (diagram, boundary, bounds) {
|
||||||
boundaryLabelConf.fontSize = boundaryLabelConf.fontSize + 2;
|
boundaryLabelConf.fontSize = boundaryLabelConf.fontSize + 2;
|
||||||
boundaryLabelConf.fontWeight = 'bold';
|
boundaryLabelConf.fontWeight = 'bold';
|
||||||
let textLimitWidth = calculateTextWidth(boundary.label.text, boundaryLabelConf);
|
let textLimitWidth = calculateTextWidth(boundary.label.text, boundaryLabelConf);
|
||||||
setC4ShapeText('label', boundary, boundaryTextWrap, boundaryLabelConf, textLimitWidth);
|
calcC4ShapeTextWH('label', boundary, boundaryTextWrap, boundaryLabelConf, textLimitWidth);
|
||||||
|
|
||||||
svgDraw.drawBoundary(diagram, boundary, conf);
|
svgDraw.drawBoundary(diagram, boundary, conf);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const drawPersonOrSystemArray = function (
|
export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray, c4ShapeKeys) {
|
||||||
currentBounds,
|
// Upper Y is relative point
|
||||||
diagram,
|
let Y = 0;
|
||||||
personOrSystemArray,
|
// Draw the c4ShapeArray
|
||||||
personOrSystemKeys
|
for (let i = 0; i < c4ShapeKeys.length; i++) {
|
||||||
) {
|
Y = 0;
|
||||||
// Draw the personOrSystemArray
|
const c4Shape = c4ShapeArray[c4ShapeKeys[i]];
|
||||||
|
|
||||||
// let prevWidth = currentBounds.data.stopx;
|
// calc c4 shape type width and height
|
||||||
// let prevMarginX = conf.c4ShapeMargin;
|
|
||||||
// let prevMarginY = conf.c4ShapeMargin;
|
|
||||||
// let maxHeight = currentBounds.data.starty;
|
|
||||||
|
|
||||||
for (let i = 0; i < personOrSystemKeys.length; i++) {
|
let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);
|
||||||
const personOrSystem = personOrSystemArray[personOrSystemKeys[i]];
|
c4ShapeTypeConf.fontSize = c4ShapeTypeConf.fontSize - 2;
|
||||||
|
c4Shape.typeC4Shape.width = calculateTextWidth(
|
||||||
|
'<<' + c4Shape.typeC4Shape.text + '>>',
|
||||||
|
c4ShapeTypeConf
|
||||||
|
);
|
||||||
|
c4Shape.typeC4Shape.height = c4ShapeTypeConf.fontSize + 2;
|
||||||
|
c4Shape.typeC4Shape.Y = conf.c4ShapePadding;
|
||||||
|
Y = c4Shape.typeC4Shape.Y + c4Shape.typeC4Shape.height - 4;
|
||||||
|
|
||||||
let imageWidth = 0,
|
// set image width and height c4Shape.x + c4Shape.width / 2 - 24, c4Shape.y + 28
|
||||||
imageHeight = 0;
|
// let imageWidth = 0,
|
||||||
switch (personOrSystem.type) {
|
// imageHeight = 0,
|
||||||
|
// imageY = 0;
|
||||||
|
//
|
||||||
|
c4Shape.image = { width: 0, height: 0, Y: 0 };
|
||||||
|
switch (c4Shape.typeC4Shape.text) {
|
||||||
case 'person':
|
case 'person':
|
||||||
case 'external_person':
|
case 'external_person':
|
||||||
imageWidth = 48;
|
c4Shape.image.width = 48;
|
||||||
imageHeight = 48;
|
c4Shape.image.height = 48;
|
||||||
|
c4Shape.image.Y = Y;
|
||||||
|
Y = c4Shape.image.Y + c4Shape.image.height;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
if (c4Shape.sprite) {
|
||||||
if (!personOrSystem.typeLabelWidth) {
|
c4Shape.image.width = 48;
|
||||||
let personOrSystemTypeConf = personFont(conf);
|
c4Shape.image.height = 48;
|
||||||
personOrSystemTypeConf.fontSize = personOrSystemTypeConf.fontSize - 2;
|
c4Shape.image.Y = Y;
|
||||||
personOrSystem.typeLabelWidth = calculateTextWidth(
|
Y = c4Shape.image.Y + c4Shape.image.height;
|
||||||
'<<' + personOrSystem.type + '>>',
|
|
||||||
personOrSystemTypeConf
|
|
||||||
);
|
|
||||||
personOrSystem.typeLabelHeight = personOrSystemTypeConf.fontSize + 2;
|
|
||||||
|
|
||||||
switch (personOrSystem.type) {
|
|
||||||
case 'system_db':
|
|
||||||
case 'external_system_db':
|
|
||||||
personOrSystem.typeLabelY = conf.c4ShapePadding;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
personOrSystem.typeLabelY = conf.c4ShapePadding - 5;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let personOrSystemTextWrap = personOrSystem.wrap && conf.wrap;
|
// Y = conf.c4ShapePadding + c4Shape.image.height;
|
||||||
|
|
||||||
|
let c4ShapeTextWrap = c4Shape.wrap && conf.wrap;
|
||||||
let textLimitWidth = conf.width - conf.c4ShapePadding * 2;
|
let textLimitWidth = conf.width - conf.c4ShapePadding * 2;
|
||||||
|
|
||||||
let personOrSystemLabelConf = personFont(conf);
|
let c4ShapeLabelConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);
|
||||||
personOrSystemLabelConf.fontSize = personOrSystemLabelConf.fontSize + 2;
|
c4ShapeLabelConf.fontSize = c4ShapeLabelConf.fontSize + 2;
|
||||||
personOrSystemLabelConf.fontWeight = 'bold';
|
c4ShapeLabelConf.fontWeight = 'bold';
|
||||||
|
calcC4ShapeTextWH('label', c4Shape, c4ShapeTextWrap, c4ShapeLabelConf, textLimitWidth);
|
||||||
|
c4Shape['label'].Y = Y + 8;
|
||||||
|
Y = c4Shape['label'].Y + c4Shape['label'].height;
|
||||||
|
|
||||||
setC4ShapeText(
|
if (c4Shape.type && c4Shape.type.text !== '') {
|
||||||
'label',
|
c4Shape.type.text = '[' + c4Shape.type.text + ']';
|
||||||
personOrSystem,
|
let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);
|
||||||
personOrSystemTextWrap,
|
calcC4ShapeTextWH('type', c4Shape, c4ShapeTextWrap, c4ShapeTypeConf, textLimitWidth);
|
||||||
personOrSystemLabelConf,
|
c4Shape['type'].Y = Y + 5;
|
||||||
textLimitWidth
|
Y = c4Shape['type'].Y + c4Shape['type'].height;
|
||||||
);
|
} else if (c4Shape.techn && c4Shape.techn.text !== '') {
|
||||||
personOrSystem['label'].Y =
|
c4Shape.techn.text = '[' + c4Shape.techn.text + ']';
|
||||||
conf.c4ShapePadding + personOrSystem.typeLabelHeight + imageHeight + 10;
|
let c4ShapeTechnConf = c4ShapeFont(conf, c4Shape.techn.text);
|
||||||
|
calcC4ShapeTextWH('techn', c4Shape, c4ShapeTextWrap, c4ShapeTechnConf, textLimitWidth);
|
||||||
|
c4Shape['techn'].Y = Y + 5;
|
||||||
|
Y = c4Shape['techn'].Y + c4Shape['techn'].height;
|
||||||
|
}
|
||||||
|
|
||||||
let personOrSystemDescrConf = personFont(conf);
|
let rectHeight = Y;
|
||||||
setC4ShapeText(
|
let rectWidth = c4Shape.label.width;
|
||||||
'descr',
|
|
||||||
personOrSystem,
|
|
||||||
personOrSystemTextWrap,
|
|
||||||
personOrSystemDescrConf,
|
|
||||||
textLimitWidth
|
|
||||||
);
|
|
||||||
personOrSystem['descr'].Y =
|
|
||||||
conf.c4ShapePadding +
|
|
||||||
personOrSystem.typeLabelHeight +
|
|
||||||
imageHeight +
|
|
||||||
5 +
|
|
||||||
personOrSystem.label.height +
|
|
||||||
conf.personFontSize +
|
|
||||||
2;
|
|
||||||
|
|
||||||
// Add some rendering data to the object
|
if (c4Shape.descr && c4Shape.descr.text !== '') {
|
||||||
let rectWidth =
|
let c4ShapeDescrConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);
|
||||||
Math.max(personOrSystem.label.width, personOrSystem.descr.width) + conf.c4ShapePadding * 2;
|
calcC4ShapeTextWH('descr', c4Shape, c4ShapeTextWrap, c4ShapeDescrConf, textLimitWidth);
|
||||||
let rectHeight =
|
c4Shape['descr'].Y = Y + 20;
|
||||||
conf.c4ShapePadding +
|
Y = c4Shape['descr'].Y + c4Shape['descr'].height;
|
||||||
personOrSystem.typeLabelHeight +
|
|
||||||
imageHeight +
|
|
||||||
personOrSystem.label.height +
|
|
||||||
conf.personFontSize +
|
|
||||||
2 +
|
|
||||||
personOrSystem.descr.height;
|
|
||||||
|
|
||||||
personOrSystem.width = Math.max(personOrSystem.width || conf.width, rectWidth, conf.width);
|
rectWidth = Math.max(c4Shape.label.width, c4Shape.descr.width);
|
||||||
personOrSystem.height = Math.max(personOrSystem.height || conf.height, rectHeight, conf.height);
|
rectHeight = Y - c4Shape['descr'].textLines * 5;
|
||||||
personOrSystem.margin = personOrSystem.margin || conf.c4ShapeMargin;
|
}
|
||||||
|
|
||||||
currentBounds.insert(personOrSystem);
|
rectWidth = rectWidth + conf.c4ShapePadding;
|
||||||
|
// let rectHeight =
|
||||||
|
|
||||||
const height = svgDraw.drawPersonOrSystem(diagram, personOrSystem, conf);
|
c4Shape.width = Math.max(c4Shape.width || conf.width, rectWidth, conf.width);
|
||||||
|
c4Shape.height = Math.max(c4Shape.height || conf.height, rectHeight, conf.height);
|
||||||
|
c4Shape.margin = c4Shape.margin || conf.c4ShapeMargin;
|
||||||
|
|
||||||
|
currentBounds.insert(c4Shape);
|
||||||
|
|
||||||
|
const height = svgDraw.drawC4Shape(diagram, c4Shape, conf);
|
||||||
}
|
}
|
||||||
|
|
||||||
currentBounds.bumpLastMargin(conf.c4ShapeMargin);
|
currentBounds.bumpLastMargin(conf.c4ShapeMargin);
|
||||||
|
@ -391,20 +409,24 @@ let getIntersectPoints = function (fromNode, endNode) {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const drawRels = function (diagram, rels, getC4ShapeObj) {
|
export const drawRels = function (diagram, rels, getC4ShapeObj) {
|
||||||
|
let i = 0;
|
||||||
for (let rel of rels) {
|
for (let rel of rels) {
|
||||||
|
i = i + 1;
|
||||||
let relTextWrap = rel.wrap && conf.wrap;
|
let relTextWrap = rel.wrap && conf.wrap;
|
||||||
let relConf = messageFont(conf);
|
let relConf = messageFont(conf);
|
||||||
|
let diagramType = parser.yy.getC4Type();
|
||||||
|
if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text;
|
||||||
let textLimitWidth = calculateTextWidth(rel.label.text, relConf);
|
let textLimitWidth = calculateTextWidth(rel.label.text, relConf);
|
||||||
setC4ShapeText('label', rel, relTextWrap, relConf, textLimitWidth);
|
calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth);
|
||||||
|
|
||||||
if (rel.techn && rel.techn.text !== '') {
|
if (rel.techn && rel.techn.text !== '') {
|
||||||
textLimitWidth = calculateTextWidth(rel.techn.text, relConf);
|
textLimitWidth = calculateTextWidth(rel.techn.text, relConf);
|
||||||
setC4ShapeText('techn', rel, relTextWrap, relConf, textLimitWidth);
|
calcC4ShapeTextWH('techn', rel, relTextWrap, relConf, textLimitWidth);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (rel.descr && rel.descr.text !== '') {
|
if (rel.descr && rel.descr.text !== '') {
|
||||||
textLimitWidth = calculateTextWidth(rel.descr.text, relConf);
|
textLimitWidth = calculateTextWidth(rel.descr.text, relConf);
|
||||||
setC4ShapeText('descr', rel, relTextWrap, relConf, textLimitWidth);
|
calcC4ShapeTextWH('descr', rel, relTextWrap, relConf, textLimitWidth);
|
||||||
}
|
}
|
||||||
|
|
||||||
let fromNode = getC4ShapeObj(rel.from);
|
let fromNode = getC4ShapeObj(rel.from);
|
||||||
|
@ -416,20 +438,6 @@ export const drawRels = function (diagram, rels, getC4ShapeObj) {
|
||||||
svgDraw.drawRels(diagram, rels, conf);
|
svgDraw.drawRels(diagram, rels, conf);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setConf = function (cnf) {
|
|
||||||
assignWithDepth(conf, cnf);
|
|
||||||
|
|
||||||
if (cnf.fontFamily) {
|
|
||||||
conf.personFontFamily = conf.systemFontFamily = conf.messageFontFamily = cnf.fontFamily;
|
|
||||||
}
|
|
||||||
if (cnf.fontSize) {
|
|
||||||
conf.personFontSize = conf.systemFontSize = conf.messageFontSize = cnf.fontSize;
|
|
||||||
}
|
|
||||||
if (cnf.fontWeight) {
|
|
||||||
conf.personFontWeight = conf.systemFontWeight = conf.messageFontWeight = cnf.fontWeight;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param diagram
|
* @param diagram
|
||||||
* @param parentBoundaryAlias
|
* @param parentBoundaryAlias
|
||||||
|
@ -439,16 +447,70 @@ export const setConf = function (cnf) {
|
||||||
function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys) {
|
function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys) {
|
||||||
let currentBounds = new Bounds();
|
let currentBounds = new Bounds();
|
||||||
// Calculate the width limit of the boundar. label/type 的长度,
|
// Calculate the width limit of the boundar. label/type 的长度,
|
||||||
currentBounds.data.widthLimit = Math.min(
|
currentBounds.data.widthLimit =
|
||||||
conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * (conf.c4ShapeInRow + 1),
|
parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length);
|
||||||
parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length)
|
// Math.min(
|
||||||
);
|
// conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,
|
||||||
|
// parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length)
|
||||||
|
// );
|
||||||
for (let i = 0; i < currentBoundarys.length; i++) {
|
for (let i = 0; i < currentBoundarys.length; i++) {
|
||||||
let currentBoundary = currentBoundarys[i];
|
let currentBoundary = currentBoundarys[i];
|
||||||
if (i == 0) {
|
let Y = 0;
|
||||||
|
currentBoundary.image = { width: 0, height: 0, Y: 0 };
|
||||||
|
if (currentBoundary.sprite) {
|
||||||
|
currentBoundary.image.width = 48;
|
||||||
|
currentBoundary.image.height = 48;
|
||||||
|
currentBoundary.image.Y = Y;
|
||||||
|
Y = currentBoundary.image.Y + currentBoundary.image.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentBoundaryTextWrap = currentBoundary.wrap && conf.wrap;
|
||||||
|
|
||||||
|
let currentBoundaryLabelConf = boundaryFont(conf);
|
||||||
|
currentBoundaryLabelConf.fontSize = currentBoundaryLabelConf.fontSize + 2;
|
||||||
|
currentBoundaryLabelConf.fontWeight = 'bold';
|
||||||
|
calcC4ShapeTextWH(
|
||||||
|
'label',
|
||||||
|
currentBoundary,
|
||||||
|
currentBoundaryTextWrap,
|
||||||
|
currentBoundaryLabelConf,
|
||||||
|
currentBounds.data.widthLimit
|
||||||
|
);
|
||||||
|
currentBoundary['label'].Y = Y + 8;
|
||||||
|
Y = currentBoundary['label'].Y + currentBoundary['label'].height;
|
||||||
|
|
||||||
|
if (currentBoundary.type && currentBoundary.type.text !== '') {
|
||||||
|
currentBoundary.type.text = '[' + currentBoundary.type.text + ']';
|
||||||
|
let currentBoundaryTypeConf = boundaryFont(conf);
|
||||||
|
calcC4ShapeTextWH(
|
||||||
|
'type',
|
||||||
|
currentBoundary,
|
||||||
|
currentBoundaryTextWrap,
|
||||||
|
currentBoundaryTypeConf,
|
||||||
|
currentBounds.data.widthLimit
|
||||||
|
);
|
||||||
|
currentBoundary['type'].Y = Y + 5;
|
||||||
|
Y = currentBoundary['type'].Y + currentBoundary['type'].height;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentBoundary.descr && currentBoundary.descr.text !== '') {
|
||||||
|
let currentBoundaryDescrConf = boundaryFont(conf);
|
||||||
|
currentBoundaryDescrConf.fontSize = currentBoundaryDescrConf.fontSize - 2;
|
||||||
|
calcC4ShapeTextWH(
|
||||||
|
'descr',
|
||||||
|
currentBoundary,
|
||||||
|
currentBoundaryTextWrap,
|
||||||
|
currentBoundaryDescrConf,
|
||||||
|
currentBounds.data.widthLimit
|
||||||
|
);
|
||||||
|
currentBoundary['descr'].Y = Y + 20;
|
||||||
|
Y = currentBoundary['descr'].Y + currentBoundary['descr'].height;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i == 0 || i % conf.c4BoundaryInRow === 0) {
|
||||||
// Calculate the drawing start point of the currentBoundarys.
|
// Calculate the drawing start point of the currentBoundarys.
|
||||||
let _x = parentBounds.data.startx + conf.diagramMarginX;
|
let _x = parentBounds.data.startx + conf.diagramMarginX;
|
||||||
let _y = parentBounds.data.stopy + conf.diagramMarginY;
|
let _y = parentBounds.data.stopy + conf.diagramMarginY + Y;
|
||||||
|
|
||||||
currentBounds.setData(_x, _x, _y, _y);
|
currentBounds.setData(_x, _x, _y, _y);
|
||||||
} else {
|
} else {
|
||||||
|
@ -462,11 +524,11 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
|
||||||
currentBounds.setData(_x, _x, _y, _y);
|
currentBounds.setData(_x, _x, _y, _y);
|
||||||
}
|
}
|
||||||
currentBounds.name = currentBoundary.alias;
|
currentBounds.name = currentBoundary.alias;
|
||||||
let currentPersonOrSystemArray = parser.yy.getPersonOrSystemArray(currentBoundary.alias);
|
let currentPersonOrSystemArray = parser.yy.getC4ShapeArray(currentBoundary.alias);
|
||||||
let currentPersonOrSystemKeys = parser.yy.getPersonOrSystemKeys(currentBoundary.alias);
|
let currentPersonOrSystemKeys = parser.yy.getC4ShapeKeys(currentBoundary.alias);
|
||||||
|
|
||||||
if (currentPersonOrSystemKeys.length > 0) {
|
if (currentPersonOrSystemKeys.length > 0) {
|
||||||
drawPersonOrSystemArray(
|
drawC4ShapeArray(
|
||||||
currentBounds,
|
currentBounds,
|
||||||
diagram,
|
diagram,
|
||||||
currentPersonOrSystemArray,
|
currentPersonOrSystemArray,
|
||||||
|
@ -545,11 +607,11 @@ export const draw = function (text, id) {
|
||||||
const title = parser.yy.getTitle();
|
const title = parser.yy.getTitle();
|
||||||
const c4type = parser.yy.getC4Type();
|
const c4type = parser.yy.getC4Type();
|
||||||
let currentBoundarys = parser.yy.getBoundarys('');
|
let currentBoundarys = parser.yy.getBoundarys('');
|
||||||
switch (c4type) {
|
// switch (c4type) {
|
||||||
case 'C4Context':
|
// case 'C4Context':
|
||||||
drawInsideBoundary(diagram, '', screenBounds, currentBoundarys);
|
drawInsideBoundary(diagram, '', screenBounds, currentBoundarys);
|
||||||
break;
|
// break;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// The arrow head definition is attached to the svg once
|
// The arrow head definition is attached to the svg once
|
||||||
svgDraw.insertArrowHead(diagram);
|
svgDraw.insertArrowHead(diagram);
|
||||||
|
@ -557,7 +619,7 @@ export const draw = function (text, id) {
|
||||||
svgDraw.insertArrowCrossHead(diagram);
|
svgDraw.insertArrowCrossHead(diagram);
|
||||||
svgDraw.insertArrowFilledHead(diagram);
|
svgDraw.insertArrowFilledHead(diagram);
|
||||||
|
|
||||||
drawRels(diagram, parser.yy.getRels(), parser.yy.getPersonOrSystem);
|
drawRels(diagram, parser.yy.getRels(), parser.yy.getC4Shape);
|
||||||
|
|
||||||
screenBounds.data.stopx = globalBoundaryMaxX;
|
screenBounds.data.stopx = globalBoundaryMaxX;
|
||||||
screenBounds.data.stopy = globalBoundaryMaxY;
|
screenBounds.data.stopy = globalBoundaryMaxY;
|
||||||
|
@ -578,7 +640,7 @@ export const draw = function (text, id) {
|
||||||
.append('text')
|
.append('text')
|
||||||
.text(title)
|
.text(title)
|
||||||
.attr('x', (box.stopx - box.startx) / 2 - 4 * conf.diagramMarginX)
|
.attr('x', (box.stopx - box.startx) / 2 - 4 * conf.diagramMarginX)
|
||||||
.attr('y', -25);
|
.attr('y', box.starty + conf.diagramMarginY);
|
||||||
}
|
}
|
||||||
|
|
||||||
configureSvgSize(diagram, height, width, conf.useMaxWidth);
|
configureSvgSize(diagram, height, width, conf.useMaxWidth);
|
||||||
|
@ -601,7 +663,7 @@ export const draw = function (text, id) {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
drawPersonOrSystemArray,
|
drawPersonOrSystemArray: drawC4ShapeArray,
|
||||||
drawBoundary,
|
drawBoundary,
|
||||||
setConf,
|
setConf,
|
||||||
draw,
|
draw,
|
||||||
|
|
|
@ -48,7 +48,6 @@
|
||||||
%x index
|
%x index
|
||||||
|
|
||||||
/* Deployment diagram */
|
/* Deployment diagram */
|
||||||
%x deployment_node
|
|
||||||
%x node
|
%x node
|
||||||
%x node_l
|
%x node_l
|
||||||
%x node_r
|
%x node_r
|
||||||
|
@ -56,10 +55,11 @@
|
||||||
/* Relationship Types */
|
/* Relationship Types */
|
||||||
%x rel
|
%x rel
|
||||||
%x rel_bi
|
%x rel_bi
|
||||||
%x rel_up
|
%x rel_u
|
||||||
%x rel_down
|
%x rel_d
|
||||||
%x rel_left
|
%x rel_l
|
||||||
%x rel_right
|
%x rel_r
|
||||||
|
%x rel_b
|
||||||
|
|
||||||
%x attribute
|
%x attribute
|
||||||
%x string
|
%x string
|
||||||
|
@ -105,18 +105,45 @@
|
||||||
"Enterprise_Boundary" { this.begin("enterprise_boundary"); console.log('begin enterprise_boundary'); return 'ENTERPRISE_BOUNDARY';}
|
"Enterprise_Boundary" { this.begin("enterprise_boundary"); console.log('begin enterprise_boundary'); return 'ENTERPRISE_BOUNDARY';}
|
||||||
"System_Boundary" { this.begin("system_boundary"); console.log('begin system_boundary'); return 'SYSTEM_BOUNDARY';}
|
"System_Boundary" { this.begin("system_boundary"); console.log('begin system_boundary'); return 'SYSTEM_BOUNDARY';}
|
||||||
|
|
||||||
|
"ContainerQueue_Ext" { this.begin("container_ext_queue"); console.log('begin container_ext_queue'); return 'CONTAINER_EXT_QUEUE';}
|
||||||
|
"ContainerDb_Ext" { this.begin("container_ext_db"); console.log('begin container_ext_db'); return 'CONTAINER_EXT_DB';}
|
||||||
|
"Container_Ext" { this.begin("container_ext"); console.log('begin container_ext'); return 'CONTAINER_EXT';}
|
||||||
|
"ContainerQueue" { this.begin("container_queue"); console.log('begin container_queue'); return 'CONTAINER_QUEUE';}
|
||||||
|
"ContainerDb" { this.begin("container_db"); console.log('begin container_db'); return 'CONTAINER_DB';}
|
||||||
|
"Container" { this.begin("container"); console.log('begin container'); return 'CONTAINER';}
|
||||||
|
|
||||||
|
"Container_Boundary" { this.begin("container_boundary"); console.log('begin container_boundary'); return 'CONTAINER_BOUNDARY';}
|
||||||
|
|
||||||
|
"ComponentQueue_Ext" { this.begin("component_ext_queue"); console.log('begin component_ext_queue'); return 'COMPONENT_EXT_QUEUE';}
|
||||||
|
"ComponentDb_Ext" { this.begin("component_ext_db"); console.log('begin component_ext_db'); return 'COMPONENT_EXT_DB';}
|
||||||
|
"Component_Ext" { this.begin("component_ext"); console.log('begin component_ext'); return 'COMPONENT_EXT';}
|
||||||
|
"ComponentQueue" { this.begin("component_queue"); console.log('begin component_queue'); return 'COMPONENT_QUEUE';}
|
||||||
|
"ComponentDb" { this.begin("component_db"); console.log('begin component_db'); return 'COMPONENT_DB';}
|
||||||
|
"Component" { this.begin("component"); console.log('begin component'); return 'COMPONENT';}
|
||||||
|
|
||||||
|
"Deployment_Node" { this.begin("node"); console.log('begin node'); return 'NODE';}
|
||||||
|
"Node" { this.begin("node"); console.log('begin node'); return 'NODE';}
|
||||||
|
"Node_L" { this.begin("node_l"); console.log('begin node_l'); return 'NODE_L';}
|
||||||
|
"Node_R" { this.begin("node_r"); console.log('begin node_r'); return 'NODE_R';}
|
||||||
|
|
||||||
|
|
||||||
"Rel" { this.begin("rel"); console.log('begin rel'); return 'REL';}
|
"Rel" { this.begin("rel"); console.log('begin rel'); return 'REL';}
|
||||||
"BiRel" { this.begin("birel"); console.log('begin birel'); return 'BIREL';}
|
"BiRel" { this.begin("birel"); console.log('begin birel'); return 'BIREL';}
|
||||||
"Rel_U|Rel_Up" { this.begin("rel_u"); console.log('begin rel_u'); return 'REL_U';}
|
"Rel_Up" { this.begin("rel_u"); console.log('begin rel_u'); return 'REL_U';}
|
||||||
"Rel_D|Rel_Down" { this.begin("rel_d"); console.log('begin rel_d'); return 'REL_D';}
|
"Rel_U" { this.begin("rel_u"); console.log('begin rel_u'); return 'REL_U';}
|
||||||
"Rel_L|Rel_Left" { this.begin("rel_l"); console.log('begin rel_l'); return 'REL_L';}
|
"Rel_Down" { this.begin("rel_d"); console.log('begin rel_d'); return 'REL_D';}
|
||||||
"Rel_R|Rel_Right" { this.begin("rel_r"); console.log('begin rel_r'); return 'REL_R';}
|
"Rel_D" { this.begin("rel_d"); console.log('begin rel_d'); return 'REL_D';}
|
||||||
|
"Rel_Left" { this.begin("rel_l"); console.log('begin rel_l'); return 'REL_L';}
|
||||||
|
"Rel_L" { this.begin("rel_l"); console.log('begin rel_l'); return 'REL_L';}
|
||||||
|
"Rel_Right" { this.begin("rel_r"); console.log('begin rel_r'); return 'REL_R';}
|
||||||
|
"Rel_R" { this.begin("rel_r"); console.log('begin rel_r'); return 'REL_R';}
|
||||||
|
"Rel_Back" { this.begin("rel_b"); console.log('begin rel_b'); return 'REL_B';}
|
||||||
|
"RelIndex" { this.begin("rel_index"); console.log('begin rel_index'); return 'REL_INDEX';}
|
||||||
|
|
||||||
|
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index><<EOF>> return "EOF_IN_STRUCT";
|
||||||
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,rel,birel,rel_u,rel_d,rel_l,rel_r><<EOF>> return "EOF_IN_STRUCT";
|
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index>[(][ ]*[,] { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
|
||||||
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,rel,birel,rel_u,rel_d,rel_l,rel_r>[(][ ]*[,] { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
|
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index>[(] { console.log('begin attribute'); this.begin("attribute"); }
|
||||||
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,rel,birel,rel_u,rel_d,rel_l,rel_r>[(] { console.log('begin attribute'); this.begin("attribute"); }
|
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,attribute>[)] { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
|
||||||
<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,rel,birel,rel_u,rel_d,rel_l,rel_r,attribute>[)] { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
|
|
||||||
|
|
||||||
<attribute>",," { console.log(',,'); return 'ATTRIBUTE_EMPTY';}
|
<attribute>",," { console.log(',,'); return 'ATTRIBUTE_EMPTY';}
|
||||||
<attribute>"," { console.log(','); }
|
<attribute>"," { console.log(','); }
|
||||||
|
@ -221,9 +248,13 @@ boundaryStartStatement
|
||||||
;
|
;
|
||||||
|
|
||||||
boundaryStart
|
boundaryStart
|
||||||
: ENTERPRISE_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addBoundary(...$2); $$=$2;}
|
: ENTERPRISE_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
||||||
| SYSTEM_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addBoundary(...$2); $$=$2;}
|
| SYSTEM_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
||||||
| BOUNDARY attributes {console.log($1,JSON.stringify($2)); yy.addBoundary(...$2); $$=$2;}
|
| BOUNDARY attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
|
||||||
|
| CONTAINER_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
|
||||||
|
| NODE attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('node', ...$2); $$=$2;}
|
||||||
|
| NODE_L attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('nodeL', ...$2); $$=$2;}
|
||||||
|
| NODE_R attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('nodeR', ...$2); $$=$2;}
|
||||||
;
|
;
|
||||||
|
|
||||||
boundaryStopStatement
|
boundaryStopStatement
|
||||||
|
@ -245,6 +276,18 @@ diagramStatement
|
||||||
| SYSTEM_EXT attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
|
| SYSTEM_EXT attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
|
||||||
| SYSTEM_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
|
| SYSTEM_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
|
||||||
| SYSTEM_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}
|
| SYSTEM_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}
|
||||||
|
| CONTAINER attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container', ...$2); $$=$2;}
|
||||||
|
| CONTAINER_DB attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container_db', ...$2); $$=$2;}
|
||||||
|
| CONTAINER_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container_queue', ...$2); $$=$2;}
|
||||||
|
| CONTAINER_EXT attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container', ...$2); $$=$2;}
|
||||||
|
| CONTAINER_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container_db', ...$2); $$=$2;}
|
||||||
|
| CONTAINER_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container_queue', ...$2); $$=$2;}
|
||||||
|
| COMPONENT attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component', ...$2); $$=$2;}
|
||||||
|
| COMPONENT_DB attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component_db', ...$2); $$=$2;}
|
||||||
|
| COMPONENT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component_queue', ...$2); $$=$2;}
|
||||||
|
| COMPONENT_EXT attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component', ...$2); $$=$2;}
|
||||||
|
| COMPONENT_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component_db', ...$2); $$=$2;}
|
||||||
|
| COMPONENT_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component_queue', ...$2); $$=$2;}
|
||||||
| boundaryStatement
|
| boundaryStatement
|
||||||
| REL attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel', ...$2); $$=$2;}
|
| REL attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel', ...$2); $$=$2;}
|
||||||
| BIREL attributes {console.log($1,JSON.stringify($2)); yy.addRel('birel', ...$2); $$=$2;}
|
| BIREL attributes {console.log($1,JSON.stringify($2)); yy.addRel('birel', ...$2); $$=$2;}
|
||||||
|
@ -252,6 +295,8 @@ diagramStatement
|
||||||
| REL_D attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_d', ...$2); $$=$2;}
|
| REL_D attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_d', ...$2); $$=$2;}
|
||||||
| REL_L attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_l', ...$2); $$=$2;}
|
| REL_L attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_l', ...$2); $$=$2;}
|
||||||
| REL_R attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_r', ...$2); $$=$2;}
|
| REL_R attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_r', ...$2); $$=$2;}
|
||||||
|
| REL_B attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_b', ...$2); $$=$2;}
|
||||||
|
| REL_INDEX attributes {console.log($1,JSON.stringify($2)); $2.splice(0, 1); yy.addRel('rel', ...$2); $$=$2;}
|
||||||
;
|
;
|
||||||
|
|
||||||
attributes
|
attributes
|
||||||
|
|
|
@ -227,8 +227,9 @@ export const drawRels = (elem, rels, conf) => {
|
||||||
line.attr('stroke-width', '1');
|
line.attr('stroke-width', '1');
|
||||||
line.attr('stroke', '#444444');
|
line.attr('stroke', '#444444');
|
||||||
line.style('fill', 'none');
|
line.style('fill', 'none');
|
||||||
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||||
if (rel.type === 'birel') line.attr('marker-start', 'url(' + url + '#arrowend)');
|
if (rel.type === 'birel' || rel.type === 'rel_b')
|
||||||
|
line.attr('marker-start', 'url(' + url + '#arrowend)');
|
||||||
i = -1;
|
i = -1;
|
||||||
} else {
|
} else {
|
||||||
let line = relsElem.append('path');
|
let line = relsElem.append('path');
|
||||||
|
@ -250,9 +251,10 @@ export const drawRels = (elem, rels, conf) => {
|
||||||
.replaceAll('controly', rel.startPoint.y + (rel.endPoint.y - rel.startPoint.y) / 2)
|
.replaceAll('controly', rel.startPoint.y + (rel.endPoint.y - rel.startPoint.y) / 2)
|
||||||
.replaceAll('stopx', rel.endPoint.x)
|
.replaceAll('stopx', rel.endPoint.x)
|
||||||
.replaceAll('stopy', rel.endPoint.y)
|
.replaceAll('stopy', rel.endPoint.y)
|
||||||
)
|
);
|
||||||
.attr('marker-end', 'url(' + url + '#arrowhead)');
|
if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||||
if (rel.type === 'birel') line.attr('marker-start', 'url(' + url + '#arrowend)');
|
if (rel.type === 'birel' || rel.type === 'rel_b')
|
||||||
|
line.attr('marker-start', 'url(' + url + '#arrowend)');
|
||||||
}
|
}
|
||||||
|
|
||||||
let messageConf = conf.messageFont();
|
let messageConf = conf.messageFont();
|
||||||
|
@ -297,6 +299,8 @@ export const drawRels = (elem, rels, conf) => {
|
||||||
const drawBoundary = function (elem, boundary, conf) {
|
const drawBoundary = function (elem, boundary, conf) {
|
||||||
const boundaryElem = elem.append('g');
|
const boundaryElem = elem.append('g');
|
||||||
|
|
||||||
|
let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' };
|
||||||
|
if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 };
|
||||||
let rectData = {
|
let rectData = {
|
||||||
x: boundary.x,
|
x: boundary.x,
|
||||||
y: boundary.y,
|
y: boundary.y,
|
||||||
|
@ -306,11 +310,12 @@ const drawBoundary = function (elem, boundary, conf) {
|
||||||
height: boundary.height,
|
height: boundary.height,
|
||||||
rx: 2.5,
|
rx: 2.5,
|
||||||
ry: 2.5,
|
ry: 2.5,
|
||||||
attrs: { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' },
|
attrs: attrsValue,
|
||||||
};
|
};
|
||||||
|
|
||||||
drawRect(boundaryElem, rectData);
|
drawRect(boundaryElem, rectData);
|
||||||
|
|
||||||
|
// draw lable
|
||||||
let boundaryConf = conf.boundaryFont();
|
let boundaryConf = conf.boundaryFont();
|
||||||
boundaryConf.fontWeight = 'bold';
|
boundaryConf.fontWeight = 'bold';
|
||||||
boundaryConf.fontSize = boundaryConf.fontSize + 2;
|
boundaryConf.fontSize = boundaryConf.fontSize + 2;
|
||||||
|
@ -318,33 +323,51 @@ const drawBoundary = function (elem, boundary, conf) {
|
||||||
boundary.label.text,
|
boundary.label.text,
|
||||||
boundaryElem,
|
boundaryElem,
|
||||||
boundary.x,
|
boundary.x,
|
||||||
boundary.y + boundary.label.y,
|
boundary.y + boundary.label.Y,
|
||||||
boundary.width,
|
boundary.width,
|
||||||
boundary.height,
|
boundary.height,
|
||||||
{ fill: '#444444' },
|
{ fill: '#444444' },
|
||||||
boundaryConf
|
boundaryConf
|
||||||
);
|
);
|
||||||
|
|
||||||
boundaryConf = conf.boundaryFont();
|
// draw type
|
||||||
boundaryConf.fontSize = boundaryConf.fontSize - 2;
|
if (boundary.type && boundary.type.text !== '') {
|
||||||
_drawTextCandidateFunc(conf)(
|
boundaryConf = conf.boundaryFont();
|
||||||
'[' + boundary.type + ']',
|
_drawTextCandidateFunc(conf)(
|
||||||
boundaryElem,
|
boundary.type.text,
|
||||||
boundary.x,
|
boundaryElem,
|
||||||
boundary.y + boundary.label.y + boundaryConf.fontSize + 8,
|
boundary.x,
|
||||||
boundary.width,
|
boundary.y + boundary.type.Y,
|
||||||
boundary.height,
|
boundary.width,
|
||||||
{ fill: '#444444' },
|
boundary.height,
|
||||||
boundaryConf
|
{ fill: '#444444' },
|
||||||
);
|
boundaryConf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw descr
|
||||||
|
if (boundary.descr && boundary.descr.text !== '') {
|
||||||
|
boundaryConf = conf.boundaryFont();
|
||||||
|
boundaryConf.fontSize = boundaryConf.fontSize - 2;
|
||||||
|
_drawTextCandidateFunc(conf)(
|
||||||
|
boundary.descr.text,
|
||||||
|
boundaryElem,
|
||||||
|
boundary.x,
|
||||||
|
boundary.y + boundary.descr.Y,
|
||||||
|
boundary.width,
|
||||||
|
boundary.height,
|
||||||
|
{ fill: '#444444' },
|
||||||
|
boundaryConf
|
||||||
|
);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const drawPersonOrSystem = function (elem, personOrSystem, conf) {
|
export const drawC4Shape = function (elem, c4Shape, conf) {
|
||||||
let fillColor = conf[personOrSystem.type + '_bg_color'];
|
let fillColor = conf[c4Shape.typeC4Shape.text + '_bg_color'];
|
||||||
let strokeColor = conf[personOrSystem.type + '_border_color'];
|
let strokeColor = conf[c4Shape.typeC4Shape.text + '_border_color'];
|
||||||
let personImg =
|
let personImg =
|
||||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';
|
||||||
switch (personOrSystem.type) {
|
switch (c4Shape.typeC4Shape.text) {
|
||||||
case 'person':
|
case 'person':
|
||||||
personImg =
|
personImg =
|
||||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAACD0lEQVR4Xu2YoU4EMRCGT+4j8Ai8AhaH4QHgAUjQuFMECUgMIUgwJAgMhgQsAYUiJCiQIBBY+EITsjfTdme6V24v4c8vyGbb+ZjOtN0bNcvjQXmkH83WvYBWto6PLm6v7p7uH1/w2fXD+PBycX1Pv2l3IdDm/vn7x+dXQiAubRzoURa7gRZWd0iGRIiJbOnhnfYBQZNJjNbuyY2eJG8fkDE3bbG4ep6MHUAsgYxmE3nVs6VsBWJSGccsOlFPmLIViMzLOB7pCVO2AtHJMohH7Fh6zqitQK7m0rJvAVYgGcEpe//PLdDz65sM4pF9N7ICcXDKIB5Nv6j7tD0NoSdM2QrU9Gg0ewE1LqBhHR3BBdvj2vapnidjHxD/q6vd7Pvhr31AwcY8eXMTXAKECZZJFXuEq27aLgQK5uLMohCenGGuGewOxSjBvYBqeG6B+Nqiblggdjnc+ZXDy+FNFpFzw76O3UBAROuXh6FoiAcf5g9eTvUgzy0nWg6I8cXHRUpg5bOVBCo+KDpFajOf23GgPme7RSQ+lacIENUgJ6gg1k6HjgOlqnLqip4tEuhv0hNEMXUD0clyXE3p6pZA0S2nnvTlXwLJEZWlb7cTQH1+USgTN4VhAenm/wea1OCAOmqo6fE1WCb9WSKBah+rbUWPWAmE2Rvk0ApiB45eOyNAzU8xcTvj8KvkKEoOaIYeHNA3ZuygAvFMUO0AAAAASUVORK5CYII=';
|
||||||
|
@ -355,29 +378,38 @@ export const drawPersonOrSystem = function (elem, personOrSystem, conf) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
const personOrSystemElem = elem.append('g');
|
const c4ShapeElem = elem.append('g');
|
||||||
personOrSystemElem.attr('class', 'person-man');
|
c4ShapeElem.attr('class', 'person-man');
|
||||||
|
|
||||||
// <rect fill="#08427B" height="119.2188" rx="2.5" ry="2.5" style="stroke:#073B6F;stroke-width:0.5;" width="110" x="120" y="7"/>
|
// <rect fill="#08427B" height="119.2188" rx="2.5" ry="2.5" style="stroke:#073B6F;stroke-width:0.5;" width="110" x="120" y="7"/>
|
||||||
|
// draw rect of c4Shape
|
||||||
const rect = getNoteRect();
|
const rect = getNoteRect();
|
||||||
switch (personOrSystem.type) {
|
switch (c4Shape.typeC4Shape.text) {
|
||||||
case 'person':
|
case 'person':
|
||||||
case 'external_person':
|
case 'external_person':
|
||||||
case 'system':
|
case 'system':
|
||||||
case 'external_system':
|
case 'external_system':
|
||||||
rect.x = personOrSystem.x;
|
case 'container':
|
||||||
rect.y = personOrSystem.y;
|
case 'external_container':
|
||||||
|
case 'component':
|
||||||
|
case 'external_component':
|
||||||
|
rect.x = c4Shape.x;
|
||||||
|
rect.y = c4Shape.y;
|
||||||
rect.fill = fillColor;
|
rect.fill = fillColor;
|
||||||
rect.width = personOrSystem.width;
|
rect.width = c4Shape.width;
|
||||||
rect.height = personOrSystem.height;
|
rect.height = c4Shape.height;
|
||||||
rect.style = 'stroke:' + strokeColor + ';stroke-width:0.5;';
|
rect.style = 'stroke:' + strokeColor + ';stroke-width:0.5;';
|
||||||
rect.rx = 2.5;
|
rect.rx = 2.5;
|
||||||
rect.ry = 2.5;
|
rect.ry = 2.5;
|
||||||
drawRect(personOrSystemElem, rect);
|
drawRect(c4ShapeElem, rect);
|
||||||
break;
|
break;
|
||||||
case 'system_db':
|
case 'system_db':
|
||||||
case 'external_system_db':
|
case 'external_system_db':
|
||||||
personOrSystemElem
|
case 'container_db':
|
||||||
|
case 'external_container_db':
|
||||||
|
case 'component_db':
|
||||||
|
case 'external_component_db':
|
||||||
|
c4ShapeElem
|
||||||
.append('path')
|
.append('path')
|
||||||
.attr('fill', fillColor)
|
.attr('fill', fillColor)
|
||||||
.attr('stroke-width', '0.5')
|
.attr('stroke-width', '0.5')
|
||||||
|
@ -385,12 +417,12 @@ export const drawPersonOrSystem = function (elem, personOrSystem, conf) {
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'Mstartx,startyc0,-10 half,-10 half,-10c0,0 half,0 half,10l0,heightc0,10 -half,10 -half,10c0,0 -half,0 -half,-10l0,-height'
|
'Mstartx,startyc0,-10 half,-10 half,-10c0,0 half,0 half,10l0,heightc0,10 -half,10 -half,10c0,0 -half,0 -half,-10l0,-height'
|
||||||
.replaceAll('startx', personOrSystem.x)
|
.replaceAll('startx', c4Shape.x)
|
||||||
.replaceAll('starty', personOrSystem.y)
|
.replaceAll('starty', c4Shape.y)
|
||||||
.replaceAll('half', personOrSystem.width / 2)
|
.replaceAll('half', c4Shape.width / 2)
|
||||||
.replaceAll('height', personOrSystem.height)
|
.replaceAll('height', c4Shape.height)
|
||||||
);
|
);
|
||||||
personOrSystemElem
|
c4ShapeElem
|
||||||
.append('path')
|
.append('path')
|
||||||
.attr('fill', 'none')
|
.attr('fill', 'none')
|
||||||
.attr('stroke-width', '0.5')
|
.attr('stroke-width', '0.5')
|
||||||
|
@ -398,14 +430,18 @@ export const drawPersonOrSystem = function (elem, personOrSystem, conf) {
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'Mstartx,startyc0,10 half,10 half,10c0,0 half,0 half,-10'
|
'Mstartx,startyc0,10 half,10 half,10c0,0 half,0 half,-10'
|
||||||
.replaceAll('startx', personOrSystem.x)
|
.replaceAll('startx', c4Shape.x)
|
||||||
.replaceAll('starty', personOrSystem.y)
|
.replaceAll('starty', c4Shape.y)
|
||||||
.replaceAll('half', personOrSystem.width / 2)
|
.replaceAll('half', c4Shape.width / 2)
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case 'system_queue':
|
case 'system_queue':
|
||||||
case 'external_system_queue':
|
case 'external_system_queue':
|
||||||
personOrSystemElem
|
case 'container_queue':
|
||||||
|
case 'external_container_queue':
|
||||||
|
case 'component_queue':
|
||||||
|
case 'external_component_queue':
|
||||||
|
c4ShapeElem
|
||||||
.append('path')
|
.append('path')
|
||||||
.attr('fill', fillColor)
|
.attr('fill', fillColor)
|
||||||
.attr('stroke-width', '0.5')
|
.attr('stroke-width', '0.5')
|
||||||
|
@ -413,12 +449,12 @@ export const drawPersonOrSystem = function (elem, personOrSystem, conf) {
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'Mstartx,startylwidth,0c5,0 5,half 5,halfc0,0 0,half -5,halfl-width,0c-5,0 -5,-half -5,-halfc0,0 0,-half 5,-half'
|
'Mstartx,startylwidth,0c5,0 5,half 5,halfc0,0 0,half -5,halfl-width,0c-5,0 -5,-half -5,-halfc0,0 0,-half 5,-half'
|
||||||
.replaceAll('startx', personOrSystem.x)
|
.replaceAll('startx', c4Shape.x)
|
||||||
.replaceAll('starty', personOrSystem.y)
|
.replaceAll('starty', c4Shape.y)
|
||||||
.replaceAll('width', personOrSystem.width)
|
.replaceAll('width', c4Shape.width)
|
||||||
.replaceAll('half', personOrSystem.height / 2)
|
.replaceAll('half', c4Shape.height / 2)
|
||||||
);
|
);
|
||||||
personOrSystemElem
|
c4ShapeElem
|
||||||
.append('path')
|
.append('path')
|
||||||
.attr('fill', 'none')
|
.attr('fill', 'none')
|
||||||
.attr('stroke-width', '0.5')
|
.attr('stroke-width', '0.5')
|
||||||
|
@ -426,66 +462,100 @@ export const drawPersonOrSystem = function (elem, personOrSystem, conf) {
|
||||||
.attr(
|
.attr(
|
||||||
'd',
|
'd',
|
||||||
'Mstartx,startyc-5,0 -5,half -5,halfc0,half 5,half 5,half'
|
'Mstartx,startyc-5,0 -5,half -5,halfc0,half 5,half 5,half'
|
||||||
.replaceAll('startx', personOrSystem.x + personOrSystem.width)
|
.replaceAll('startx', c4Shape.x + c4Shape.width)
|
||||||
.replaceAll('starty', personOrSystem.y)
|
.replaceAll('starty', c4Shape.y)
|
||||||
.replaceAll('half', personOrSystem.height / 2)
|
.replaceAll('half', c4Shape.height / 2)
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
personOrSystemElem
|
// draw type of c4Shape
|
||||||
|
let c4ShapeFontConf = getC4ShapeFont(conf, c4Shape.typeC4Shape.text);
|
||||||
|
c4ShapeElem
|
||||||
.append('text')
|
.append('text')
|
||||||
.attr('fill', '#FFFFFF')
|
.attr('fill', '#FFFFFF')
|
||||||
.attr('font-family', conf.personFontFamily)
|
.attr('font-family', c4ShapeFontConf.fontFamily)
|
||||||
.attr('font-size', conf.personFontSize - 2)
|
.attr('font-size', c4ShapeFontConf.fontSize - 2)
|
||||||
.attr('font-style', 'italic')
|
.attr('font-style', 'italic')
|
||||||
.attr('lengthAdjust', 'spacing')
|
.attr('lengthAdjust', 'spacing')
|
||||||
.attr('textLength', personOrSystem.typeLabelWidth)
|
.attr('textLength', c4Shape.typeC4Shape.width)
|
||||||
.attr('x', personOrSystem.x + personOrSystem.width / 2 - personOrSystem.typeLabelWidth / 2)
|
.attr('x', c4Shape.x + c4Shape.width / 2 - c4Shape.typeC4Shape.width / 2)
|
||||||
.attr('y', personOrSystem.y + personOrSystem.typeLabelY)
|
.attr('y', c4Shape.y + c4Shape.typeC4Shape.Y)
|
||||||
.text('<<' + personOrSystem.type + '>>');
|
.text('<<' + c4Shape.typeC4Shape.text + '>>');
|
||||||
|
|
||||||
switch (personOrSystem.type) {
|
// draw image/sprite
|
||||||
|
switch (c4Shape.typeC4Shape.text) {
|
||||||
case 'person':
|
case 'person':
|
||||||
case 'external_person':
|
case 'external_person':
|
||||||
drawImage(
|
drawImage(
|
||||||
personOrSystemElem,
|
c4ShapeElem,
|
||||||
48,
|
48,
|
||||||
48,
|
48,
|
||||||
personOrSystem.x + personOrSystem.width / 2 - 24,
|
c4Shape.x + c4Shape.width / 2 - 24,
|
||||||
personOrSystem.y + 24,
|
c4Shape.y + c4Shape.image.Y,
|
||||||
personImg
|
personImg
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
let personOrSystemConf = conf.personFont();
|
// draw label
|
||||||
personOrSystemConf.fontWeight = 'bold';
|
let textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
|
||||||
personOrSystemConf.fontSize = personOrSystemConf.fontSize + 2;
|
textFontConf.fontWeight = 'bold';
|
||||||
|
textFontConf.fontSize = textFontConf.fontSize + 2;
|
||||||
_drawTextCandidateFunc(conf)(
|
_drawTextCandidateFunc(conf)(
|
||||||
personOrSystem.label.text,
|
c4Shape.label.text,
|
||||||
personOrSystemElem,
|
c4ShapeElem,
|
||||||
personOrSystem.x,
|
c4Shape.x,
|
||||||
personOrSystem.y + personOrSystem.label.Y,
|
c4Shape.y + c4Shape.label.Y,
|
||||||
personOrSystem.width,
|
c4Shape.width,
|
||||||
personOrSystem.height,
|
c4Shape.height,
|
||||||
{ fill: '#FFFFFF' },
|
{ fill: '#FFFFFF' },
|
||||||
personOrSystemConf
|
textFontConf
|
||||||
);
|
);
|
||||||
|
|
||||||
personOrSystemConf = conf.personFont();
|
// draw techn/type
|
||||||
_drawTextCandidateFunc(conf)(
|
textFontConf = conf[c4Shape.typeC4Shape.text + 'Font']();
|
||||||
personOrSystem.descr.text,
|
|
||||||
personOrSystemElem,
|
|
||||||
personOrSystem.x,
|
|
||||||
personOrSystem.y + personOrSystem.descr.Y,
|
|
||||||
personOrSystem.width,
|
|
||||||
personOrSystem.height,
|
|
||||||
{ fill: '#FFFFFF' },
|
|
||||||
personOrSystemConf
|
|
||||||
);
|
|
||||||
|
|
||||||
return personOrSystem.height;
|
if (c4Shape.thchn && c4Shape.thchn.text !== '') {
|
||||||
|
_drawTextCandidateFunc(conf)(
|
||||||
|
c4Shape.thchn.text,
|
||||||
|
c4ShapeElem,
|
||||||
|
c4Shape.x,
|
||||||
|
c4Shape.y + c4Shape.thchn.Y,
|
||||||
|
c4Shape.width,
|
||||||
|
c4Shape.height,
|
||||||
|
{ fill: '#FFFFFF', 'font-style': 'italic' },
|
||||||
|
textFontConf
|
||||||
|
);
|
||||||
|
} else if (c4Shape.type && c4Shape.type.text !== '') {
|
||||||
|
_drawTextCandidateFunc(conf)(
|
||||||
|
c4Shape.type.text,
|
||||||
|
c4ShapeElem,
|
||||||
|
c4Shape.x,
|
||||||
|
c4Shape.y + c4Shape.type.Y,
|
||||||
|
c4Shape.width,
|
||||||
|
c4Shape.height,
|
||||||
|
{ fill: '#FFFFFF', 'font-style': 'italic' },
|
||||||
|
textFontConf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw descr
|
||||||
|
if (c4Shape.descr && c4Shape.descr.text !== '') {
|
||||||
|
textFontConf = conf.personFont();
|
||||||
|
_drawTextCandidateFunc(conf)(
|
||||||
|
c4Shape.descr.text,
|
||||||
|
c4ShapeElem,
|
||||||
|
c4Shape.x,
|
||||||
|
c4Shape.y + c4Shape.descr.Y,
|
||||||
|
c4Shape.width,
|
||||||
|
c4Shape.height,
|
||||||
|
{ fill: '#FFFFFF' },
|
||||||
|
textFontConf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return c4Shape.height;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const insertDatabaseIcon = function (elem) {
|
export const insertDatabaseIcon = function (elem) {
|
||||||
|
@ -672,6 +742,14 @@ export const getNoteRect = function () {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getC4ShapeFont = (cnf, typeC4Shape) => {
|
||||||
|
return {
|
||||||
|
fontFamily: cnf[typeC4Shape + 'FontFamily'],
|
||||||
|
fontSize: cnf[typeC4Shape + 'FontSize'],
|
||||||
|
fontWeight: cnf[typeC4Shape + 'FontWeight'],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const _drawTextCandidateFunc = (function () {
|
const _drawTextCandidateFunc = (function () {
|
||||||
/**
|
/**
|
||||||
* @param {any} content
|
* @param {any} content
|
||||||
|
@ -713,16 +791,17 @@ const _drawTextCandidateFunc = (function () {
|
||||||
.attr('x', x + width / 2)
|
.attr('x', x + width / 2)
|
||||||
.attr('y', y)
|
.attr('y', y)
|
||||||
.style('text-anchor', 'middle')
|
.style('text-anchor', 'middle')
|
||||||
|
.attr('dominant-baseline', 'middle')
|
||||||
.style('font-size', fontSize)
|
.style('font-size', fontSize)
|
||||||
.style('font-weight', fontWeight)
|
.style('font-weight', fontWeight)
|
||||||
.style('font-family', fontFamily);
|
.style('font-family', fontFamily);
|
||||||
text
|
text
|
||||||
.append('tspan')
|
.append('tspan')
|
||||||
.attr('x', x + width / 2)
|
// .attr('x', x + width / 2)
|
||||||
.attr('dy', dy)
|
.attr('dy', dy)
|
||||||
.text(lines[i]);
|
.text(lines[i])
|
||||||
|
// .attr('y', y + height / 2)
|
||||||
text.attr('y', y).attr('dominant-baseline', 'central').attr('alignment-baseline', 'central');
|
.attr('alignment-baseline', 'mathematical');
|
||||||
|
|
||||||
_setTextAttrs(text, textAttrs);
|
_setTextAttrs(text, textAttrs);
|
||||||
}
|
}
|
||||||
|
@ -787,14 +866,14 @@ export default {
|
||||||
drawText,
|
drawText,
|
||||||
drawLabel,
|
drawLabel,
|
||||||
drawBoundary,
|
drawBoundary,
|
||||||
drawPersonOrSystem,
|
drawC4Shape,
|
||||||
drawRels,
|
drawRels,
|
||||||
drawImage,
|
drawImage,
|
||||||
drawEmbeddedImage,
|
drawEmbeddedImage,
|
||||||
insertArrowHead,
|
insertArrowHead,
|
||||||
insertArrowEnd,
|
insertArrowEnd,
|
||||||
insertArrowFilledHead,
|
insertArrowFilledHead,
|
||||||
insertSequenceNumber: insertDynamicNumber,
|
insertDynamicNumber,
|
||||||
insertArrowCrossHead,
|
insertArrowCrossHead,
|
||||||
insertDatabaseIcon,
|
insertDatabaseIcon,
|
||||||
insertComputerIcon,
|
insertComputerIcon,
|
||||||
|
|
Loading…
Reference in New Issue