perf: 【文件】流程图新组件添加切换皮肤主题功能
This commit is contained in:
韦荣超
parent
251f4ca4ac
commit
ae527a78ef
@ -2,20 +2,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Flowchart Maker & Online Diagram Software</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="Description" content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
|
||||
<meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
|
||||
<meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
|
||||
<meta itemprop="description" content="diagrams.net is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
|
||||
org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
|
||||
circuit and social network diagrams.">
|
||||
<meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
|
||||
<title>Grapheditor</title>
|
||||
<!--[if IE]>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9">
|
||||
<![endif]-->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="msapplication-config" content="images/browserconfig.xml">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#d89000">
|
||||
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* URL Parameters and protocol description are here:
|
||||
@ -342,16 +335,6 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
|
||||
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
||||
<link rel="preconnect" href="https://storage.googleapis.com">
|
||||
<link rel="canonical" href="https://app.diagrams.net">
|
||||
<link rel="manifest" href="images/manifest.json">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<style type="text/css">
|
||||
body { overflow:hidden; }
|
||||
div.picker { z-index: 10007; }
|
||||
@ -423,7 +406,7 @@
|
||||
<div id="geInfo">
|
||||
<div class="geBlock"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="./js/grapheditor/Dark.js"></script>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* Main
|
||||
|
||||
1
public/js/drawio/js/diagramly/Init.js
vendored
1
public/js/drawio/js/diagramly/Init.js
vendored
@ -11,6 +11,7 @@ window.isLocalStorage = window.isLocalStorage || false;
|
||||
|
||||
// Disables loading settings in configured mode
|
||||
window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
|
||||
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||
|
||||
// Checks for SVG support
|
||||
window.isSvgBrowser = true;
|
||||
|
||||
165
public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
165
public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
@ -0,0 +1,165 @@
|
||||
var Dark = {
|
||||
utils: {
|
||||
filter: '-webkit-filter: url(#dark-mode-filter) !important; filter: url(#dark-mode-filter) !important;',
|
||||
reverseFilter: '-webkit-filter: url(#dark-mode-reverse-filter) !important; filter: url(#dark-mode-reverse-filter) !important;',
|
||||
noneFilter: '-webkit-filter: none !important; filter: none !important;',
|
||||
|
||||
addExtraStyle() {
|
||||
try {
|
||||
return '';
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
addStyle(id, tag, css) {
|
||||
tag = tag || 'style';
|
||||
let doc = document, styleDom = doc.getElementById(id);
|
||||
if (styleDom) return;
|
||||
let style = doc.createElement(tag);
|
||||
style.rel = 'stylesheet';
|
||||
style.id = id;
|
||||
tag === 'style' ? style.innerHTML = css : style.href = css;
|
||||
document.head.appendChild(style);
|
||||
},
|
||||
|
||||
getClassList(node) {
|
||||
return node.classList || [];
|
||||
},
|
||||
|
||||
addClass(node, name) {
|
||||
this.getClassList(node).add(name);
|
||||
return this;
|
||||
},
|
||||
|
||||
removeClass(node, name) {
|
||||
this.getClassList(node).remove(name);
|
||||
return this;
|
||||
},
|
||||
|
||||
hasClass(node, name) {
|
||||
return this.getClassList(node).contains(name);
|
||||
},
|
||||
|
||||
hasElementById(eleId) {
|
||||
return document.getElementById(eleId);
|
||||
},
|
||||
|
||||
removeElementById(eleId) {
|
||||
let ele = document.getElementById(eleId);
|
||||
ele && ele.parentNode.removeChild(ele);
|
||||
},
|
||||
},
|
||||
|
||||
createDarkFilter() {
|
||||
if (this.utils.hasElementById('dark-mode-svg')) return;
|
||||
let svgDom = '<svg id="dark-mode-svg" style="height: 0; width: 0;"><filter id="dark-mode-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.283 -0.567 -0.567 0.000 0.925 -0.567 0.283 -0.567 0.000 0.925 -0.567 -0.567 0.283 0.000 0.925 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter><filter id="dark-mode-reverse-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.333 -0.667 -0.667 0.000 1.000 -0.667 0.333 -0.667 0.000 1.000 -0.667 -0.667 0.333 0.000 1.000 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter></svg>';
|
||||
let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
|
||||
div.innerHTML = svgDom;
|
||||
let frag = document.createDocumentFragment();
|
||||
while (div.firstChild)
|
||||
frag.appendChild(div.firstChild);
|
||||
document.head.appendChild(frag);
|
||||
},
|
||||
|
||||
createDarkStyle() {
|
||||
this.utils.addStyle('dark-mode-style', 'style', `
|
||||
@media screen {
|
||||
html {
|
||||
${this.utils.filter}
|
||||
}
|
||||
|
||||
/* Default Reverse rule */
|
||||
img,
|
||||
video,
|
||||
iframe,
|
||||
canvas,
|
||||
:not(object):not(body) > embed,
|
||||
object,
|
||||
svg image {
|
||||
${this.utils.reverseFilter}
|
||||
}
|
||||
|
||||
[style*="background:url"] *,
|
||||
[style*="background-image:url"] *,
|
||||
[style*="background: url"] *,
|
||||
[style*="background-image: url"] *,
|
||||
input,
|
||||
[background] *,
|
||||
twitterwidget .NaturalImage-image {
|
||||
${this.utils.noneFilter}
|
||||
}
|
||||
|
||||
/* Text contrast */
|
||||
html {
|
||||
text-shadow: 0 0 0 !important;
|
||||
}
|
||||
|
||||
/* Full screen */
|
||||
.no-filter,
|
||||
:-webkit-full-screen,
|
||||
:-webkit-full-screen *,
|
||||
:-moz-full-screen,
|
||||
:-moz-full-screen *,
|
||||
:fullscreen,
|
||||
:fullscreen * {
|
||||
${this.utils.noneFilter}
|
||||
}
|
||||
|
||||
/* Page background */
|
||||
html {
|
||||
background: #fff !important;
|
||||
}
|
||||
${this.utils.addExtraStyle()}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}`);
|
||||
},
|
||||
|
||||
enableDarkMode() {
|
||||
if (this.isDarkEnabled()) {
|
||||
return
|
||||
}
|
||||
this.createDarkFilter();
|
||||
this.createDarkStyle();
|
||||
this.utils.addClass(document.body, "dark-mode-reverse")
|
||||
},
|
||||
|
||||
disableDarkMode() {
|
||||
if (!this.isDarkEnabled()) {
|
||||
return
|
||||
}
|
||||
this.utils.removeElementById('dark-mode-svg');
|
||||
this.utils.removeElementById('dark-mode-style');
|
||||
this.utils.removeClass(document.body, "dark-mode-reverse")
|
||||
},
|
||||
|
||||
autoDarkMode() {
|
||||
let darkScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
if (darkScheme) {
|
||||
this.enableDarkMode()
|
||||
} else {
|
||||
this.disableDarkMode()
|
||||
}
|
||||
},
|
||||
|
||||
isDarkEnabled() {
|
||||
return this.utils.hasClass(document.body, "dark-mode-reverse")
|
||||
},
|
||||
};
|
||||
|
||||
switch (window.mxTheme) {
|
||||
case 'dark':
|
||||
Dark.enableDarkMode();
|
||||
break;
|
||||
case 'light':
|
||||
Dark.disableDarkMode();
|
||||
break;
|
||||
default:
|
||||
Dark.autoDarkMode();
|
||||
break;
|
||||
}
|
||||
1
public/js/drawio/js/grapheditor/Init.js
vendored
1
public/js/drawio/js/grapheditor/Init.js
vendored
@ -33,3 +33,4 @@ window.mxBasePath = window.mxBasePath || 'mxgraph';
|
||||
window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
|
||||
window.mxLanguage = window.mxLanguage || urlParams['lang'];
|
||||
window.mxLanguages = window.mxLanguages || ['de', 'se'];
|
||||
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.0 KiB |
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "diagrams.net",
|
||||
"name": "",
|
||||
"short_name": "Diagrams",
|
||||
"description": "diagrams.net is a completely free diagram editor",
|
||||
"icons": [
|
||||
|
||||
@ -2,20 +2,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Flowchart Maker & Online Diagram Software</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="Description" content="diagrams.net is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
|
||||
<meta name="Keywords" content="diagram, online, flow chart, flowchart maker, uml, erd">
|
||||
<meta itemprop="name" content="diagrams.net - free flowchart maker and diagrams online">
|
||||
<meta itemprop="description" content="diagrams.net is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
|
||||
org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
|
||||
circuit and social network diagrams.">
|
||||
<meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
|
||||
<title>Grapheditor</title>
|
||||
<!--[if IE]>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9">
|
||||
<![endif]-->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="msapplication-config" content="images/browserconfig.xml">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#d89000">
|
||||
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* URL Parameters and protocol description are here:
|
||||
@ -342,16 +335,6 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/plgmlhohecdddhbmmkncjdmlhcmaachm">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
|
||||
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
||||
<link rel="preconnect" href="https://storage.googleapis.com">
|
||||
<link rel="canonical" href="https://app.diagrams.net">
|
||||
<link rel="manifest" href="images/manifest.json">
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<style type="text/css">
|
||||
body { overflow:hidden; }
|
||||
div.picker { z-index: 10007; }
|
||||
@ -423,7 +406,7 @@
|
||||
<div id="geInfo">
|
||||
<div class="geBlock"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="./js/grapheditor/Dark.js"></script>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* Main
|
||||
|
||||
@ -11,6 +11,7 @@ window.isLocalStorage = window.isLocalStorage || false;
|
||||
|
||||
// Disables loading settings in configured mode
|
||||
window.mxLoadSettings = window.mxLoadSettings || urlParams['configure'] != '1';
|
||||
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||
|
||||
// Checks for SVG support
|
||||
window.isSvgBrowser = true;
|
||||
|
||||
165
resources/assets/statics/public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
165
resources/assets/statics/public/js/drawio/js/grapheditor/Dark.js
vendored
Normal file
@ -0,0 +1,165 @@
|
||||
var Dark = {
|
||||
utils: {
|
||||
filter: '-webkit-filter: url(#dark-mode-filter) !important; filter: url(#dark-mode-filter) !important;',
|
||||
reverseFilter: '-webkit-filter: url(#dark-mode-reverse-filter) !important; filter: url(#dark-mode-reverse-filter) !important;',
|
||||
noneFilter: '-webkit-filter: none !important; filter: none !important;',
|
||||
|
||||
addExtraStyle() {
|
||||
try {
|
||||
return '';
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
addStyle(id, tag, css) {
|
||||
tag = tag || 'style';
|
||||
let doc = document, styleDom = doc.getElementById(id);
|
||||
if (styleDom) return;
|
||||
let style = doc.createElement(tag);
|
||||
style.rel = 'stylesheet';
|
||||
style.id = id;
|
||||
tag === 'style' ? style.innerHTML = css : style.href = css;
|
||||
document.head.appendChild(style);
|
||||
},
|
||||
|
||||
getClassList(node) {
|
||||
return node.classList || [];
|
||||
},
|
||||
|
||||
addClass(node, name) {
|
||||
this.getClassList(node).add(name);
|
||||
return this;
|
||||
},
|
||||
|
||||
removeClass(node, name) {
|
||||
this.getClassList(node).remove(name);
|
||||
return this;
|
||||
},
|
||||
|
||||
hasClass(node, name) {
|
||||
return this.getClassList(node).contains(name);
|
||||
},
|
||||
|
||||
hasElementById(eleId) {
|
||||
return document.getElementById(eleId);
|
||||
},
|
||||
|
||||
removeElementById(eleId) {
|
||||
let ele = document.getElementById(eleId);
|
||||
ele && ele.parentNode.removeChild(ele);
|
||||
},
|
||||
},
|
||||
|
||||
createDarkFilter() {
|
||||
if (this.utils.hasElementById('dark-mode-svg')) return;
|
||||
let svgDom = '<svg id="dark-mode-svg" style="height: 0; width: 0;"><filter id="dark-mode-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.283 -0.567 -0.567 0.000 0.925 -0.567 0.283 -0.567 0.000 0.925 -0.567 -0.567 0.283 0.000 0.925 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter><filter id="dark-mode-reverse-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.333 -0.667 -0.667 0.000 1.000 -0.667 0.333 -0.667 0.000 1.000 -0.667 -0.667 0.333 0.000 1.000 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter></svg>';
|
||||
let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
|
||||
div.innerHTML = svgDom;
|
||||
let frag = document.createDocumentFragment();
|
||||
while (div.firstChild)
|
||||
frag.appendChild(div.firstChild);
|
||||
document.head.appendChild(frag);
|
||||
},
|
||||
|
||||
createDarkStyle() {
|
||||
this.utils.addStyle('dark-mode-style', 'style', `
|
||||
@media screen {
|
||||
html {
|
||||
${this.utils.filter}
|
||||
}
|
||||
|
||||
/* Default Reverse rule */
|
||||
img,
|
||||
video,
|
||||
iframe,
|
||||
canvas,
|
||||
:not(object):not(body) > embed,
|
||||
object,
|
||||
svg image {
|
||||
${this.utils.reverseFilter}
|
||||
}
|
||||
|
||||
[style*="background:url"] *,
|
||||
[style*="background-image:url"] *,
|
||||
[style*="background: url"] *,
|
||||
[style*="background-image: url"] *,
|
||||
input,
|
||||
[background] *,
|
||||
twitterwidget .NaturalImage-image {
|
||||
${this.utils.noneFilter}
|
||||
}
|
||||
|
||||
/* Text contrast */
|
||||
html {
|
||||
text-shadow: 0 0 0 !important;
|
||||
}
|
||||
|
||||
/* Full screen */
|
||||
.no-filter,
|
||||
:-webkit-full-screen,
|
||||
:-webkit-full-screen *,
|
||||
:-moz-full-screen,
|
||||
:-moz-full-screen *,
|
||||
:fullscreen,
|
||||
:fullscreen * {
|
||||
${this.utils.noneFilter}
|
||||
}
|
||||
|
||||
/* Page background */
|
||||
html {
|
||||
background: #fff !important;
|
||||
}
|
||||
${this.utils.addExtraStyle()}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}`);
|
||||
},
|
||||
|
||||
enableDarkMode() {
|
||||
if (this.isDarkEnabled()) {
|
||||
return
|
||||
}
|
||||
this.createDarkFilter();
|
||||
this.createDarkStyle();
|
||||
this.utils.addClass(document.body, "dark-mode-reverse")
|
||||
},
|
||||
|
||||
disableDarkMode() {
|
||||
if (!this.isDarkEnabled()) {
|
||||
return
|
||||
}
|
||||
this.utils.removeElementById('dark-mode-svg');
|
||||
this.utils.removeElementById('dark-mode-style');
|
||||
this.utils.removeClass(document.body, "dark-mode-reverse")
|
||||
},
|
||||
|
||||
autoDarkMode() {
|
||||
let darkScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
if (darkScheme) {
|
||||
this.enableDarkMode()
|
||||
} else {
|
||||
this.disableDarkMode()
|
||||
}
|
||||
},
|
||||
|
||||
isDarkEnabled() {
|
||||
return this.utils.hasClass(document.body, "dark-mode-reverse")
|
||||
},
|
||||
};
|
||||
|
||||
switch (window.mxTheme) {
|
||||
case 'dark':
|
||||
Dark.enableDarkMode();
|
||||
break;
|
||||
case 'light':
|
||||
Dark.disableDarkMode();
|
||||
break;
|
||||
default:
|
||||
Dark.autoDarkMode();
|
||||
break;
|
||||
}
|
||||
@ -33,3 +33,4 @@ window.mxBasePath = window.mxBasePath || 'mxgraph';
|
||||
window.mxImageBasePath = window.mxImageBasePath || 'mxgraph/images';
|
||||
window.mxLanguage = window.mxLanguage || urlParams['lang'];
|
||||
window.mxLanguages = window.mxLanguages || ['de', 'se'];
|
||||
window.mxTheme = window.mxTheme || urlParams['theme'] || 'light';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user