@ -0,0 +1,33 @@ |
|||
# Logs |
|||
logs |
|||
*.log |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
lerna-debug.log* |
|||
|
|||
node_modules |
|||
.DS_Store |
|||
./dist/ |
|||
dist-ssr |
|||
coverage |
|||
*.local |
|||
|
|||
/cypress/videos/ |
|||
/cypress/screenshots/ |
|||
|
|||
# Editor directories and files |
|||
.vscode/* |
|||
!.vscode/extensions.json |
|||
.idea |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
|
|||
*.tsbuildinfo |
|||
|
|||
pnpm-lock.yaml |
|||
yarn.lock |
@ -0,0 +1,10 @@ |
|||
/* eslint-disable */ |
|||
/* prettier-ignore */ |
|||
// @ts-nocheck
|
|||
// noinspection JSUnusedGlobalSymbols
|
|||
// Generated by unplugin-auto-import
|
|||
// biome-ignore lint: disable
|
|||
export {} |
|||
declare global { |
|||
|
|||
} |
@ -0,0 +1,129 @@ |
|||
/* eslint-disable */ |
|||
// @ts-nocheck
|
|||
// Generated by unplugin-vue-components
|
|||
// Read more: https://github.com/vuejs/core/pull/3399
|
|||
// biome-ignore lint: disable
|
|||
export {} |
|||
|
|||
/* prettier-ignore */ |
|||
declare module 'vue' { |
|||
export interface GlobalComponents { |
|||
AiChatInfo: typeof import('./src/components/aichat/AiChatInfo.vue')['default'] |
|||
AiChatLeft: typeof import('./src/components/aichat/AiChatLeft.vue')['default'] |
|||
AiChatMain: typeof import('./src/components/aichat/AiChatMain.vue')['default'] |
|||
AiChatMessage: typeof import('./src/components/aichat/AiChatMessage.vue')['default'] |
|||
AiSettingApi: typeof import('./src/components/aisetting/AiSettingApi.vue')['default'] |
|||
AiSettingConf: typeof import('./src/components/aisetting/AiSettingConf.vue')['default'] |
|||
AiSettingDef: typeof import('./src/components/aisetting/AiSettingDef.vue')['default'] |
|||
ApplyList: typeof import('./src/components/workbench/worktable/ApplyList.vue')['default'] |
|||
AssistantAdd: typeof import('./src/components/assistant/AssistantAdd.vue')['default'] |
|||
AuthLogin: typeof import('./src/components/auth/AuthLogin.vue')['default'] |
|||
Calendar: typeof import('./src/components/taskbar/Calendar.vue')['default'] |
|||
ChatBoxMain: typeof import('./src/components/workbench/chat/ChatBoxMain.vue')['default'] |
|||
ChatMessage: typeof import('./src/components/workbench/chat/ChatMessage.vue')['default'] |
|||
ChatMsgList: typeof import('./src/components/workbench/chat/ChatMsgList.vue')['default'] |
|||
ChatUserInfo: typeof import('./src/components/workbench/chat/ChatUserInfo.vue')['default'] |
|||
ChatUserList: typeof import('./src/components/workbench/chat/ChatUserList.vue')['default'] |
|||
ChooseUser: typeof import('./src/components/user/ChooseUser.vue')['default'] |
|||
Collaboration: typeof import('./src/components/windows/Collaboration.vue')['default'] |
|||
ComputerContextMenu: typeof import('./src/components/contextmenu/ComputerContextMenu.vue')['default'] |
|||
CopyFromMe: typeof import('./src/components/workbench/worktable/CopyFromMe.vue')['default'] |
|||
CopyToMe: typeof import('./src/components/workbench/worktable/CopyToMe.vue')['default'] |
|||
DesktopIcons: typeof import('./src/components/windows/DesktopIcons.vue')['default'] |
|||
DesktopMobile: typeof import('./src/components/windows/DesktopMobile.vue')['default'] |
|||
Detail: typeof import('./src/components/workbench/worktable/Detail.vue')['default'] |
|||
DownAddbox: typeof import('./src/components/aimodel/DownAddbox.vue')['default'] |
|||
DownLabeleditor: typeof import('./src/components/aimodel/DownLabeleditor.vue')['default'] |
|||
DownModelInfo: typeof import('./src/components/aimodel/DownModelInfo.vue')['default'] |
|||
ElAside: typeof import('element-plus/es')['ElAside'] |
|||
ElAvatar: typeof import('element-plus/es')['ElAvatar'] |
|||
ElButton: typeof import('element-plus/es')['ElButton'] |
|||
ElCard: typeof import('element-plus/es')['ElCard'] |
|||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] |
|||
ElCol: typeof import('element-plus/es')['ElCol'] |
|||
ElCollapse: typeof import('element-plus/es')['ElCollapse'] |
|||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] |
|||
ElContainer: typeof import('element-plus/es')['ElContainer'] |
|||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] |
|||
ElDialog: typeof import('element-plus/es')['ElDialog'] |
|||
ElDrawer: typeof import('element-plus/es')['ElDrawer'] |
|||
ElDropdown: typeof import('element-plus/es')['ElDropdown'] |
|||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] |
|||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] |
|||
ElEmpty: typeof import('element-plus/es')['ElEmpty'] |
|||
ElFooter: typeof import('element-plus/es')['ElFooter'] |
|||
ElForm: typeof import('element-plus/es')['ElForm'] |
|||
ElFormItem: typeof import('element-plus/es')['ElFormItem'] |
|||
ElHeader: typeof import('element-plus/es')['ElHeader'] |
|||
ElIcon: typeof import('element-plus/es')['ElIcon'] |
|||
ElImage: typeof import('element-plus/es')['ElImage'] |
|||
ElInput: typeof import('element-plus/es')['ElInput'] |
|||
ElMain: typeof import('element-plus/es')['ElMain'] |
|||
ElMenu: typeof import('element-plus/es')['ElMenu'] |
|||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] |
|||
ElOption: typeof import('element-plus/es')['ElOption'] |
|||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader'] |
|||
ElPagination: typeof import('element-plus/es')['ElPagination'] |
|||
ElPopover: typeof import('element-plus/es')['ElPopover'] |
|||
ElProgress: typeof import('element-plus/es')['ElProgress'] |
|||
ElRow: typeof import('element-plus/es')['ElRow'] |
|||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] |
|||
ElSelect: typeof import('element-plus/es')['ElSelect'] |
|||
ElSlider: typeof import('element-plus/es')['ElSlider'] |
|||
ElSpace: typeof import('element-plus/es')['ElSpace'] |
|||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] |
|||
ElSwitch: typeof import('element-plus/es')['ElSwitch'] |
|||
ElTable: typeof import('element-plus/es')['ElTable'] |
|||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] |
|||
ElTabPane: typeof import('element-plus/es')['ElTabPane'] |
|||
ElTabs: typeof import('element-plus/es')['ElTabs'] |
|||
ElTag: typeof import('element-plus/es')['ElTag'] |
|||
ElText: typeof import('element-plus/es')['ElText'] |
|||
ElTransfer: typeof import('element-plus/es')['ElTransfer'] |
|||
ElTree: typeof import('element-plus/es')['ElTree'] |
|||
EmailLogin: typeof import('./src/components/auth/EmailLogin.vue')['default'] |
|||
FileContextMenu: typeof import('./src/components/contextmenu/FileContextMenu.vue')['default'] |
|||
FileIcon: typeof import('./src/components/windows/FileIcon.vue')['default'] |
|||
FileTree: typeof import('./src/components/files/FileTree.vue')['default'] |
|||
FileTreeSection: typeof import('./src/components/files/FileTreeSection.vue')['default'] |
|||
Icon: typeof import('./src/components/windows/Icon.vue')['default'] |
|||
IframeApp: typeof import('./src/components/windows/IframeApp.vue')['default'] |
|||
LdapLogin: typeof import('./src/components/auth/LdapLogin.vue')['default'] |
|||
LockScreen: typeof import('./src/components/loading/LockScreen.vue')['default'] |
|||
MyApply: typeof import('./src/components/workbench/worktable/MyApply.vue')['default'] |
|||
MyCard: typeof import('./src/components/workbench/worktable/MyCard.vue')['default'] |
|||
MyCheck: typeof import('./src/components/workbench/worktable/MyCheck.vue')['default'] |
|||
MyTask: typeof import('./src/components/workbench/worktable/MyTask.vue')['default'] |
|||
PasswordLogin: typeof import('./src/components/auth/PasswordLogin.vue')['default'] |
|||
PhoneLogin: typeof import('./src/components/auth/PhoneLogin.vue')['default'] |
|||
RectChosen: typeof import('./src/components/windows/RectChosen.vue')['default'] |
|||
RouterLink: typeof import('vue-router')['RouterLink'] |
|||
RouterView: typeof import('vue-router')['RouterView'] |
|||
SaveFile: typeof import('./src/components/files/SaveFile.vue')['default'] |
|||
ScreenRecorder: typeof import('./src/components/taskbar/ScreenRecorder.vue')['default'] |
|||
Screenshort: typeof import('./src/components/taskbar/Screenshort.vue')['default'] |
|||
ShareFiles: typeof import('./src/components/files/ShareFiles.vue')['default'] |
|||
SlideBackground: typeof import('./src/components/loading/SlideBackground.vue')['default'] |
|||
StartMenu: typeof import('./src/components/taskbar/StartMenu.vue')['default'] |
|||
Taskbar: typeof import('./src/components/taskbar/Taskbar.vue')['default'] |
|||
TaskList: typeof import('./src/components/workbench/worktable/TaskList.vue')['default'] |
|||
TrayDate: typeof import('./src/components/taskbar/TrayDate.vue')['default'] |
|||
UnLock: typeof import('./src/components/auth/UnLock.vue')['default'] |
|||
UserRegister: typeof import('./src/components/auth/UserRegister.vue')['default'] |
|||
ViewExcel: typeof import('./src/components/viewer/excel/ViewExcel.vue')['default'] |
|||
ViewPpt: typeof import('./src/components/viewer/ppt/ViewPpt.vue')['default'] |
|||
WindowFiles: typeof import('./src/components/windows/WindowFiles.vue')['default'] |
|||
WindowLeft: typeof import('./src/components/windows/WindowLeft.vue')['default'] |
|||
WindowManager: typeof import('./src/components/windows/WindowManager.vue')['default'] |
|||
WindowTabs: typeof import('./src/components/windows/WindowTabs.vue')['default'] |
|||
WinLoading: typeof import('./src/components/loading/WinLoading.vue')['default'] |
|||
WinLogo: typeof import('./src/components/loading/WinLogo.vue')['default'] |
|||
WinScreen: typeof import('./src/components/loading/WinScreen.vue')['default'] |
|||
WorkbenchMenu: typeof import('./src/components/workbench/WorkbenchMenu.vue')['default'] |
|||
WorkTableLeft: typeof import('./src/components/workbench/worktable/WorkTableLeft.vue')['default'] |
|||
WorkTableMain: typeof import('./src/components/workbench/worktable/WorkTableMain.vue')['default'] |
|||
} |
|||
export interface ComponentCustomProperties { |
|||
vLoading: typeof import('element-plus/es')['ElLoadingDirective'] |
|||
} |
|||
} |
@ -0,0 +1,22 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" href="/favicon.ico"> |
|||
<meta name="viewport" |
|||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
|||
<title>GodoOS</title> |
|||
<style> |
|||
body { |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.ts"></script> |
|||
</body> |
|||
|
|||
</html> |
@ -0,0 +1,53 @@ |
|||
{ |
|||
"name": "godoos-desktop", |
|||
"private": true, |
|||
"version": "1.0.0", |
|||
"type": "module", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "vite build", |
|||
"preview": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"@element-plus/icons-vue": "^2.1.0", |
|||
"@types/file-saver": "^2.0.7", |
|||
"axios": "^1.7.9", |
|||
"chart.js": "^4.4.7", |
|||
"cherry-markdown": "^0.8.58", |
|||
"dexie": "^4.0.10", |
|||
"element-plus": "^2.3.9", |
|||
"exceljs": "^4.4.0", |
|||
"file-saver": "^2.0.5", |
|||
"js-md5": "^0.8.3", |
|||
"lunar-typescript": "^1.7.6", |
|||
"mitt": "^3.0.1", |
|||
"pinia": "^2.1.6", |
|||
"pinia-plugin-persistedstate": "^4.2.0", |
|||
"pptxtojson": "^1.1.1", |
|||
"svg-pathdata": "^7.1.0", |
|||
"swiper": "^11.2.1", |
|||
"tinycolor2": "^1.6.0", |
|||
"vue": "^3.3.4", |
|||
"vue-i18n": "^11.0.1", |
|||
"vue-monoplasty-slide-verify": "^1.3.1", |
|||
"vue-router": "^4.2.4", |
|||
"vue-slider-captcha": "^0.1.2", |
|||
"vue-web-screen-shot": "^1.5.3", |
|||
"vue3-lottie": "^3.3.1", |
|||
"x-data-spreadsheet": "^1.1.9" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/exceljs": "^1.3.2", |
|||
"@types/node": "^22.10.10", |
|||
"@types/tinycolor2": "^1.4.6", |
|||
"@vitejs/plugin-vue": "^4.2.3", |
|||
"less": "^4.2.2", |
|||
"sass": "^1.83.4", |
|||
"typescript": "^5.0.2", |
|||
"unplugin-auto-import": "^19.0.0", |
|||
"unplugin-vue-components": "^28.0.0", |
|||
"vite": "^4.4.5", |
|||
"vite-plugin-vue-devtools": "^7.7.0", |
|||
"vue-tsc": "^1.8.5" |
|||
} |
|||
} |
@ -0,0 +1,238 @@ |
|||
/*各界面共用部分开始*/ |
|||
* { |
|||
font-family: '微软雅黑'; |
|||
} |
|||
|
|||
.standard-main, |
|||
.science-main, |
|||
.programmer-main { |
|||
margin: 0px; |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
margin: 0px; |
|||
padding: 0px; |
|||
} |
|||
|
|||
li { |
|||
float: left; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
li img { |
|||
height: 14px; |
|||
} |
|||
|
|||
.title { |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.result { |
|||
height: 120px; |
|||
text-align: right; |
|||
} |
|||
|
|||
.second { |
|||
font-size: 40px; |
|||
font-weight: bold; |
|||
padding-right: 10px; |
|||
} |
|||
|
|||
.pre { |
|||
color: #a7a7a7; |
|||
padding-right: 10px; |
|||
} |
|||
|
|||
/*计算器类型*/ |
|||
.type { |
|||
height: 20px; |
|||
text-align: left; |
|||
margin-left: 10px; |
|||
font-weight: bold; |
|||
margin-top: 10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/*类型选择侧边栏*/ |
|||
.type-bar { |
|||
display: none; |
|||
height: 90px; |
|||
width: 100px; |
|||
position: absolute; |
|||
top: 35px; |
|||
background-color: #e6e6e6; |
|||
} |
|||
|
|||
.type-bar li { |
|||
float: left; |
|||
width: 100px; |
|||
text-align: center; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.active { |
|||
background-color: #cfcfcf; |
|||
} |
|||
|
|||
/*数字加粗*/ |
|||
.number { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/*共用部分结束*/ |
|||
|
|||
/*计算器标准版界面开始*/ |
|||
.standard-main { |
|||
width: 350px; |
|||
height: 480px; |
|||
} |
|||
|
|||
#std-top-symbol { |
|||
border-top: 1px #a7a7a7 solid; |
|||
height: 52px; |
|||
} |
|||
|
|||
#std-num-symbol { |
|||
background-color: #e6e6e6; |
|||
height: 270px; |
|||
font-size: 20px; |
|||
} |
|||
|
|||
#std-top-symbol li, |
|||
#std-num-symbol li { |
|||
line-height: 52px; |
|||
width: 87.5px; |
|||
} |
|||
|
|||
/*标准界面结束*/ |
|||
|
|||
/*科学型界面开始*/ |
|||
.science-main { |
|||
display: none; |
|||
width: 350px; |
|||
} |
|||
|
|||
.sci-result { |
|||
height: 120px; |
|||
text-align: right; |
|||
} |
|||
|
|||
#sci-top-symbol { |
|||
border-top: 1px #a7a7a7 solid; |
|||
height: 135px; |
|||
} |
|||
|
|||
#sci-top-symbol li, |
|||
#sci-num-symbol li { |
|||
line-height: 45px; |
|||
width: 70px; |
|||
} |
|||
|
|||
#sci-num-symbol { |
|||
height: 235px; |
|||
background-color: #e6e6e6; |
|||
} |
|||
|
|||
/*科学型界面结束*/ |
|||
|
|||
/*程序员型界面开始*/ |
|||
.programmer-main { |
|||
display: none; |
|||
width: 350px; |
|||
} |
|||
|
|||
.pro-result { |
|||
height: 220px; |
|||
text-align: right; |
|||
} |
|||
|
|||
#pro-top-symbol { |
|||
border-top: 1px #a7a7a7 solid; |
|||
height: 45px; |
|||
} |
|||
|
|||
#pro-top-symbol li { |
|||
line-height: 45px; |
|||
width: 58px; |
|||
} |
|||
|
|||
#pro-num-symbol li { |
|||
line-height: 45px; |
|||
width: 70px; |
|||
} |
|||
|
|||
#pro-num-symbol { |
|||
height: 235px; |
|||
background-color: #e6e6e6; |
|||
} |
|||
|
|||
/*四个进制*/ |
|||
#pro-scales { |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
#pro-scales div { |
|||
text-align: left; |
|||
margin-top: 5px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/*当前使用的进制*/ |
|||
.scale-active { |
|||
color: cornflowerblue; |
|||
} |
|||
|
|||
/*按键不可用*/ |
|||
.disable-btn { |
|||
color: #cacaca; |
|||
} |
|||
|
|||
/*程序员型界面结束*/ |
|||
@media screen and (max-width: 450px) { |
|||
html, |
|||
body { |
|||
height: 100%; |
|||
padding: 0px !important; |
|||
} |
|||
.standard-main, |
|||
.science-main, |
|||
.programmer-main { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.result, |
|||
.sci-result { |
|||
height: 150px; |
|||
} |
|||
#std-top-symbol { |
|||
display: flex; |
|||
justify-content: space-evenly; |
|||
} |
|||
#std-num-symbol { |
|||
height: calc(100% - 150px - 52px); |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
place-items: center; |
|||
} |
|||
#sci-top-symbol, |
|||
#pro-top-symbol { |
|||
display: flex; |
|||
justify-content: space-evenly; |
|||
flex-wrap: wrap; |
|||
} |
|||
#sci-num-symbol { |
|||
height: calc(100% - 150px - 135px); |
|||
} |
|||
#pro-num-symbol { |
|||
height: calc(100% - 220px - 45px); |
|||
} |
|||
#sci-num-symbol, |
|||
#pro-num-symbol { |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
place-items: center; |
|||
} |
|||
} |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,199 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<title>计算器</title> |
|||
<meta charset="UTF-8"> |
|||
<link rel="stylesheet" href="css/cal.css"> |
|||
<script src="js/cal.js"></script> |
|||
</head> |
|||
|
|||
<body> |
|||
<!--标准型--> |
|||
<div class="standard-main" id="std-main"> |
|||
<!--结果显示区域--> |
|||
<div class="result"> |
|||
<!--显示类型信息--> |
|||
<div class="type" id="std-show-bar"> |
|||
☰ 标准 |
|||
</div> |
|||
<!--上一步的结果--> |
|||
<div class="pre" id="std-pre-step"> |
|||
|
|||
</div> |
|||
<!--第二个/运算结果--> |
|||
<div class="second" id="std-show-input">0</div> |
|||
</div> |
|||
<ul id="std-top-symbol"> |
|||
<li value="17">%</li> |
|||
<li value="18">√</li> |
|||
<li value="19"><img src="images/x_2.png" style="height: 18px;" /></li> |
|||
<li value="20"><img src="images/1_x.png" /></li> |
|||
</ul> |
|||
<!--数字和符号--> |
|||
<ul id="std-num-symbol"> |
|||
<li value="37">CE</li> |
|||
<li value="38">C</li> |
|||
<li value="39">Back</li> |
|||
<li value="16">÷</li> |
|||
<li class="number" value="7">7</li> |
|||
<li class="number" value="8">8</li> |
|||
<li class="number" value="9">9</li> |
|||
<li value="15">×</li> |
|||
<li class="number" value="4">4</li> |
|||
<li class="number" value="5">5</li> |
|||
<li class="number" value="6">6</li> |
|||
<li value="14">-</li> |
|||
<li class="number" value="1">1</li> |
|||
<li class="number" value="2">2</li> |
|||
<li class="number" value="3">3</li> |
|||
<li value="13">+</li> |
|||
<li value="11">±</li> |
|||
<li class="number" value="0">0</li> |
|||
<li value="10">.</li> |
|||
<li value="12">=</li> |
|||
</ul> |
|||
<!--侧边栏,选择计算器类型--> |
|||
<ul class="type-bar" id="std-type-bar"> |
|||
<li class="active">标准</li> |
|||
<li value="2">科学</li> |
|||
<li value="3">程序员</li> |
|||
</ul> |
|||
</div> |
|||
<!--科学型--> |
|||
<div class="science-main" id="sci-main"> |
|||
<!--结果显示区域--> |
|||
<div class="sci-result"> |
|||
<!--显示类型信息--> |
|||
<div class="type" id="sci-show-bar"> |
|||
☰ 科学 |
|||
</div> |
|||
<!--上一步的结果--> |
|||
<div class="pre" id="sci-pre-step"> |
|||
|
|||
</div> |
|||
<!--第二个/运算结果--> |
|||
<div class="second" id="sci-show-input">0</div> |
|||
</div> |
|||
<!--上面的3行运算符--> |
|||
<ul id="sci-top-symbol"> |
|||
<li value="21">(</li> |
|||
<li value="22">)</li> |
|||
<li value="23"><img src="images/x_y_sqrt.png" style="height: 18px;width: 22px;" /></li> |
|||
<li value="24">n!</li> |
|||
<li value="25">Exp</li> |
|||
<li value="19"><img src="images/x_2.png" style="height: 18px;" /></li> |
|||
<li value="26"><img src="images/x_y.png" style="height: 18px;" /></li> |
|||
<li value="27">sin</li> |
|||
<li value="28">cos</li> |
|||
<li value="29">tan</li> |
|||
<li value="30"><img src="images/10_x.png" /></li> |
|||
<li value="31">log</li> |
|||
<li value="32">sinh</li> |
|||
<li value="33">cosh</li> |
|||
<li value="34">tanh</li> |
|||
</ul> |
|||
<!--数字和符号--> |
|||
<ul id="sci-num-symbol"> |
|||
<li value="35">π</li> |
|||
<li value="37">CE</li> |
|||
<li value="38">C</li> |
|||
<li value="39">Back</li> |
|||
<li value="16">÷</li> |
|||
<li value="18">√</li> |
|||
<li value="7" class="number">7</li> |
|||
<li value="8" class="number">8</li> |
|||
<li value="9" class="number">9</li> |
|||
<li value="15">×</li> |
|||
<li value="17">%</li> |
|||
<li value="4" class="number">4</li> |
|||
<li value="5" class="number">5</li> |
|||
<li value="6" class="number">6</li> |
|||
<li value="14">-</li> |
|||
<li value="20"><img src="images/1_x.png" /></li> |
|||
<li value="1" class="number">1</li> |
|||
<li value="2" class="number">2</li> |
|||
<li value="3" class="number">3</li> |
|||
<li value="13">+</li> |
|||
<li value="36">↑</li> |
|||
<li value="11">±</li> |
|||
<li value="0" class="number">0</li> |
|||
<li value="10">.</li> |
|||
<li value="12">=</li> |
|||
</ul> |
|||
<!--侧边栏,选择计算器类型--> |
|||
<ul class="type-bar" id="sci-type-bar"> |
|||
<li value="1">标准</li> |
|||
<li class="active">科学</li> |
|||
<li value="3">程序员</li> |
|||
</ul> |
|||
</div> |
|||
<!--程序员型--> |
|||
<div class="programmer-main" id="pro-main"> |
|||
<!--结果显示区域--> |
|||
<div class="pro-result"> |
|||
<!--显示类型信息--> |
|||
<div class="type" id="pro-show-bar"> |
|||
☰ 程序员 |
|||
</div> |
|||
<!--上一步的结果--> |
|||
<div class="pre" id="pro-pre-step"> |
|||
|
|||
</div> |
|||
<!--第二个/运算结果--> |
|||
<div class="second" id="pro-show-input">0</div> |
|||
<!--显示16、10、8、2进制的值--> |
|||
<div id="pro-scales"> |
|||
<div scale="16">HEX <span>0</span></div> |
|||
<div scale="10" class="scale-active">DEC <span>0</span></div> |
|||
<div scale="8">OCT <span>0</span></div> |
|||
<div scale="2">BIN <span>0</span></div> |
|||
</div> |
|||
</div> |
|||
<!--上面的一行十六进制数字,因为默认是10进制,所以这些按钮默认禁用--> |
|||
<ul id="pro-top-symbol"> |
|||
<li class="disable-btn" value="40">A</li> |
|||
<li class="disable-btn" value="41">B</li> |
|||
<li class="disable-btn" value="42">C</li> |
|||
<li class="disable-btn" value="43">D</li> |
|||
<li class="disable-btn" value="44">E</li> |
|||
<li class="disable-btn" value="45">F</li> |
|||
</ul> |
|||
<!--数字和符号--> |
|||
<ul id="pro-num-symbol"> |
|||
<li value="36">↑</li> |
|||
<li value="37">CE</li> |
|||
<li value="38">C</li> |
|||
<li value="39">Back</li> |
|||
<li value="16">÷</li> |
|||
<li value="46">And</li> |
|||
<li value="7" class="number" bin-disable="1">7</li> |
|||
<li value="8" class="number" oct-disable="1" bin-disable="1">8</li> |
|||
<li value="9" class="number" oct-disable="1" bin-disable="1">9</li> |
|||
<li value="15">×</li> |
|||
<li value="47">Or</li> |
|||
<li value="4" class="number" bin-disable="1">4</li> |
|||
<li value="5" class="number" bin-disable="1">5</li> |
|||
<li value="6" class="number" bin-disable="1">6</li> |
|||
<li value="14">-</li> |
|||
<li value="48">Not</li> |
|||
<li value="1" class="number">1</li> |
|||
<li value="2" class="number" bin-disable="1">2</li> |
|||
<li value="3" class="number" bin-disable="1">3</li> |
|||
<li value="13">+</li> |
|||
<li value="21">(</li> |
|||
<li value="22">)</li> |
|||
<li value="0" class="number">0</li> |
|||
<li value="10" class="disable-btn" id="pro-point">.</li> |
|||
<li value="12">=</li> |
|||
</ul> |
|||
<!--侧边栏,选择计算器类型--> |
|||
<ul class="type-bar" id="pro-type-bar"> |
|||
<li value="1">标准</li> |
|||
<li value="2">科学</li> |
|||
<li class="active">程序员</li> |
|||
</ul> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
@ -0,0 +1,990 @@ |
|||
window.onload = function () { |
|||
Calculator.initCache(); |
|||
Calculator.initListeners(); |
|||
}; |
|||
|
|||
//全局计算器对象
|
|||
var Calculator = (function () { |
|||
var cal = { |
|||
//计算器按键编码
|
|||
keyCodes: { |
|||
0: '0', |
|||
1: '1', |
|||
2: '2', |
|||
3: '3', |
|||
4: '4', |
|||
5: '5', |
|||
6: '6', |
|||
7: '7', |
|||
8: '8', |
|||
9: '9', |
|||
10: '.', |
|||
11: '±', |
|||
12: '=', |
|||
13: '+', |
|||
14: '-', |
|||
15: '*', |
|||
16: '/', |
|||
17: '%', |
|||
18: '√', |
|||
19: 'x2', |
|||
20: '1/x', |
|||
21: '(', |
|||
22: ')', |
|||
23: 'yroot', |
|||
24: 'n!', |
|||
25: 'Exp', |
|||
26: '^', |
|||
27: 'sin', |
|||
28: 'cos', |
|||
29: 'tan', |
|||
30: 'powten', |
|||
31: 'log', |
|||
32: 'sinh', |
|||
33: 'cosh', |
|||
34: 'tanh', |
|||
35: 'π', |
|||
36: '↑', |
|||
37: 'CE', |
|||
38: 'C', |
|||
39: 'Back', |
|||
//以下是程序员型特有的按键
|
|||
40: 'A', |
|||
41: 'B', |
|||
42: 'C', |
|||
43: 'D', |
|||
44: 'E', |
|||
45: 'F', |
|||
46: '&', |
|||
47: '|', |
|||
48: '~' |
|||
}, |
|||
//映射用于显示的操作符,比如计算时用*,而显示时x更好
|
|||
operatorFacade: { |
|||
13: '+', |
|||
14: '-', |
|||
15: '×', |
|||
16: '÷', |
|||
17: '%', |
|||
23: 'yroot', |
|||
26: '^', |
|||
46: '&', |
|||
47: '|' |
|||
}, |
|||
//当前计算器的类型1 --> 标准型, 2-->科学型, 3-->程序员型,默认标准型
|
|||
type: 1, |
|||
//计算器类型前缀,用于从页面获取元素
|
|||
typePrefix: { |
|||
1: "std-", |
|||
2: "sci-", |
|||
3: "pro-" |
|||
}, |
|||
//记录每个类型的计算器的事件监听是否已经绑定,key:typpe数值,value:默认标准型是true(已加载)
|
|||
hasInited: { |
|||
1: true, |
|||
2: false, |
|||
3: false |
|||
}, |
|||
//常量
|
|||
constants: { |
|||
//鼠标悬停时的颜色
|
|||
mouseHoverColor: "#CFCFCF", |
|||
//计算器第一行和下面其它行的颜色是不同的,这个是第一行的背景颜色
|
|||
firstMouseOutColor: "#F2F2F2", |
|||
//剩余各行的背景颜色
|
|||
mouseOutColor: "#E6E6E6" |
|||
}, |
|||
cache: { |
|||
//输入内容显示元素
|
|||
showInput: null, |
|||
//上一步计算结果显示区域
|
|||
preStep: null, |
|||
//显示四种进制数值的span,只在程序员型有效
|
|||
scaleSpans: null |
|||
}, |
|||
/** |
|||
* 获取cache.showInput的内容 |
|||
* @return String |
|||
*/ |
|||
getShowInput: function () { |
|||
return cal.cache.showInput.innerHTML; |
|||
}, |
|||
/** |
|||
* 设置showInput的值 |
|||
* @param value |
|||
*/ |
|||
setShowInput: function (value) { |
|||
cal.cache.showInput.innerHTML = value; |
|||
}, |
|||
/** |
|||
* 获取cache.preStep的内容 |
|||
* @return String |
|||
*/ |
|||
getPreStep: function () { |
|||
return cal.cache.preStep.innerHTML; |
|||
}, |
|||
setPreStep: function (value) { |
|||
cal.cache.preStep.innerHTML = value; |
|||
}, |
|||
//操作数栈
|
|||
operandStack: [], |
|||
//运算符栈
|
|||
operatorStack: [], |
|||
//上一次输入是否是二元运算符,如果是并且再次输入二元运算符,那么忽略此次输入
|
|||
isPreInputBinaryOperator: false, |
|||
//上次按键是否是一元操作
|
|||
isPreInputUnaryOperator: false, |
|||
//等号不可以连按
|
|||
isPreInputEquals: false, |
|||
//如果为true,那么接下来输入的数字需要覆盖在showInput上,而不是追加
|
|||
//上一次计算的结果(=)
|
|||
preResult: 0, |
|||
//当前使用的进制(只在程序员中有效),默认10进制(DEC)
|
|||
currentScale: 10, |
|||
isOverride: false, |
|||
//int校验
|
|||
intPattern: /^-?\d+$/, |
|||
//小数校验
|
|||
floatPattern: /^-?\d+\.\d+$/, |
|||
//科学计数法校验
|
|||
scientificPattern: /^\d+\.\d+e(\+|-)\d+$/, |
|||
//校验16进制数字
|
|||
hexPattern: /^[0-9A-F]+$/, |
|||
//辅助判断运算符的优先级
|
|||
operatorPriority: { |
|||
")": 0, |
|||
"|": 1, |
|||
"&": 2, |
|||
"+": 3, |
|||
"-": 3, |
|||
"*": 4, |
|||
"%": 4, |
|||
"/": 4, |
|||
"^": 5, |
|||
"yroot": 5, |
|||
"(": 6 |
|||
}, |
|||
/** |
|||
* 初始化缓存对象(cal.cache) |
|||
*/ |
|||
initCache: function () { |
|||
var prefix = cal.typePrefix[cal.type]; |
|||
cal.cache.showInput = document.getElementById(prefix + "show-input"); |
|||
cal.cache.preStep = document.getElementById(prefix + "pre-step"); |
|||
if (cal.type == 3) { |
|||
cal.cache.scaleSpans = document.getElementById("pro-scales").getElementsByTagName("span"); |
|||
} |
|||
}, |
|||
//各种事件监听函数
|
|||
listeners: { |
|||
/** |
|||
* 鼠标悬停在按键上的变色效果 |
|||
*/ |
|||
mouseHoverListener: function (e) { |
|||
var event = e || window.event; |
|||
event.currentTarget.style.backgroundColor = cal.constants.mouseHoverColor; |
|||
}, |
|||
/** |
|||
* 鼠标从上排符号中移出的变色效果 |
|||
*/ |
|||
firstMouseOutListener: function (e) { |
|||
var event = e || window.event; |
|||
event.currentTarget.style.backgroundColor = cal.constants.firstMouseOutColor; |
|||
}, |
|||
/** |
|||
* 鼠标从下排数字、符号中移出的变色效果 |
|||
*/ |
|||
mouseOutListener: function (e) { |
|||
var event = e || window.event; |
|||
event.currentTarget.style.backgroundColor = cal.constants.mouseOutColor; |
|||
}, |
|||
/** |
|||
* 按键按下事件监听 |
|||
*/ |
|||
keyPressListener: function (e) { |
|||
var event = e || window.event; |
|||
cal.handleKey(event.currentTarget.value); |
|||
}, |
|||
/** |
|||
* 显示/隐藏计算器类型选择栏 |
|||
*/ |
|||
toggleTypeBarListener: function () { |
|||
var bar = document.getElementById(cal.typePrefix[cal.type] + "type-bar"); |
|||
if (bar.style.display === "block") { |
|||
bar.style.display = "none"; |
|||
} else { |
|||
bar.style.display = "block"; |
|||
} |
|||
}, |
|||
/** |
|||
* 切换计算器类型监听器 |
|||
*/ |
|||
switchTypeListener: function (e) { |
|||
var event = e || window.event; |
|||
cal.switchType(parseInt(event.currentTarget.value)); |
|||
}, |
|||
/** |
|||
* 切换进制(程序员专用) |
|||
*/ |
|||
switchScaleListener: function (e) { |
|||
var event = e || window.event; |
|||
var scales = document.getElementById("pro-scales").getElementsByTagName("div"), |
|||
//此处应该使用currentTarget属性,因为target属性在绑定事件的元素有子元素的情况下会返回子元素
|
|||
scale = parseInt(event.currentTarget.getAttribute("scale")), |
|||
oldScale = cal.currentScale; |
|||
//切换选中样式
|
|||
for (var i = 0, l = scales.length; i < l; ++i) { |
|||
scales[i].removeAttribute("class"); |
|||
} |
|||
event.currentTarget.setAttribute("class", "scale-active"); |
|||
var lis, btns; |
|||
if (scale === 16) { |
|||
//处理上排6个16进制数字
|
|||
cal.listeners._initFirstRowListeners(); |
|||
if (oldScale < 10) { |
|||
cal.listeners._initSecondRowListeners(); |
|||
} |
|||
} else if (scale === 10) { |
|||
if (oldScale === 16) { |
|||
lis = document.getElementById("pro-top-symbol").getElementsByTagName("li"); |
|||
cal.disableButtons(lis, cal.listeners.firstMouseOutListener); |
|||
} else { |
|||
cal.listeners._initSecondRowListeners(); |
|||
} |
|||
} else if (scale === 8) { |
|||
if (oldScale > 8) { |
|||
lis = document.getElementById("pro-top-symbol").getElementsByTagName("li"); |
|||
cal.disableButtons(lis, cal.listeners.firstMouseOutListener); |
|||
//禁用8和9
|
|||
btns = cal.getElementsByAttribute("li", "oct-disable", document.getElementById("pro-num-symbol")); |
|||
cal.disableButtons(btns, cal.listeners.mouseOutListener); |
|||
} else { |
|||
cal.listeners._initSecondRowListeners(); |
|||
} |
|||
} else if (scale === 2) { |
|||
if (oldScale === 16) { |
|||
lis = document.getElementById("pro-top-symbol").getElementsByTagName("li"); |
|||
cal.disableButtons(lis, cal.listeners.firstMouseOutListener); |
|||
} |
|||
//禁用2-9
|
|||
btns = cal.getElementsByAttribute("li", "bin-disable", document.getElementById("pro-num-symbol")); |
|||
cal.disableButtons(btns, cal.listeners.mouseOutListener); |
|||
} |
|||
cal.currentScale = scale; |
|||
}, |
|||
/** |
|||
* 初始化第一排操运算符事件监听 |
|||
* @private |
|||
*/ |
|||
_initFirstRowListeners: function () { |
|||
var lis = document.getElementById(cal.typePrefix[cal.type] + "top-symbol").getElementsByTagName("li"); |
|||
cal.rebuildButtons(lis, cal.listeners.firstMouseOutListener); |
|||
}, |
|||
/** |
|||
* 初始化第二排运算符事件监听 |
|||
* @private |
|||
*/ |
|||
_initSecondRowListeners: function () { |
|||
var lis = document.getElementById(cal.typePrefix[cal.type] + "num-symbol").getElementsByTagName("li"); |
|||
cal.rebuildButtons(lis, cal.listeners.mouseOutListener); |
|||
if (cal.type === 3) { |
|||
//程序员型的小数点是禁用的
|
|||
cal.disableButtons([document.getElementById("pro-point")], cal.listeners.mouseOutListener); |
|||
} |
|||
} |
|||
}, |
|||
//初始化事件监听器
|
|||
initListeners: function () { |
|||
var prefix = cal.typePrefix[cal.type]; |
|||
//设置上排运算符事件监听,如果是程序员型,因为默认是10进制,而上排是16进制数字,所以不需要设置事件监听
|
|||
if (cal.type < 3) { |
|||
cal.listeners._initFirstRowListeners(); |
|||
} |
|||
//设置下面一栏数字、四则运算事件监听
|
|||
cal.listeners._initSecondRowListeners(); |
|||
//显示/隐藏计算器类型选择侧边栏
|
|||
cal.addEvent(document.getElementById(prefix + "show-bar"), "click", cal.listeners.toggleTypeBarListener); |
|||
//为侧边栏下的li绑定切换类型事件
|
|||
var bar = document.getElementById(prefix + "type-bar"); |
|||
lis = bar.getElementsByTagName("li"); |
|||
var li; |
|||
for (var i = 0, l = lis.length; i < l; ++i) { |
|||
li = lis[i]; |
|||
//非当前类型才有必要绑定事件
|
|||
if (li.className !== "active") { |
|||
cal.addEvent(li, "click", cal.listeners.switchTypeListener); |
|||
} |
|||
} |
|||
//加载程序员型特有的
|
|||
if (cal.type === 3) { |
|||
var scales = document.getElementById("pro-scales").getElementsByTagName("div"), |
|||
scale; |
|||
for (i = 0, l = scales.length; i < l; ++i) { |
|||
scale = scales[i]; |
|||
cal.addEvent(scale, "click", cal.listeners.switchScaleListener); |
|||
} |
|||
} |
|||
}, |
|||
/** |
|||
* 相应按键按下事件 |
|||
* @param value 按键的value值(即其keyCode) |
|||
*/ |
|||
handleKey: function (value) { |
|||
var keyCode = parseInt(value); |
|||
//如果是一个数字或者小数点,直接显示出来
|
|||
if (keyCode < 11 || (keyCode > 39 && keyCode < 46)) { |
|||
cal.showInput(cal.keyCodes[keyCode]); |
|||
if (cal.type === 3) { |
|||
//如果是程序员型,那么需要同步显示4中进制的值
|
|||
cal.showScales(cal.getShowInput()); |
|||
} |
|||
} else { |
|||
switch (keyCode) { |
|||
//正负号
|
|||
case 11: |
|||
cal.unaryOperate(function (oldValue) { |
|||
oldValue += ""; |
|||
if (oldValue === "0") { |
|||
return [oldValue]; |
|||
} |
|||
if (oldValue.charAt(0) === '-') { |
|||
return [oldValue.substring(1)]; |
|||
} else { |
|||
return ["-" + oldValue]; |
|||
} |
|||
}); |
|||
break; |
|||
//开根下
|
|||
case 18: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.sqrt(si), "sqrt"]; |
|||
}); |
|||
break; |
|||
//平方
|
|||
case 19: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.pow(si, 2), "sqr"]; |
|||
}); |
|||
break; |
|||
//取倒数
|
|||
case 20: |
|||
cal.unaryOperate(function (si) { |
|||
return [si === 0 ? "0不能作为被除数" : 1 / si, "1/"]; |
|||
}); |
|||
break; |
|||
//阶乘
|
|||
case 24: |
|||
cal.unaryOperate(function (si) { |
|||
if (si < 0) { |
|||
si = (0 - si); |
|||
} |
|||
if (cal.isFloat(si + "")) { |
|||
si = Math.floor(si); |
|||
} |
|||
return [cal.fact(si), "fact"]; |
|||
}); |
|||
break; |
|||
//Exp 转为科学计数法表示
|
|||
case 25: |
|||
cal.unaryOperate(function (si) { |
|||
return [si.toExponential(7)]; |
|||
}); |
|||
break; |
|||
//sin
|
|||
case 27: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.sin(si), "sin"]; |
|||
}); |
|||
break; |
|||
//cos
|
|||
case 28: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.cos(si), "cos"]; |
|||
}); |
|||
break; |
|||
//tan
|
|||
case 29: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.tan(si), "tan"]; |
|||
}); |
|||
break; |
|||
//10的x次方
|
|||
case 30: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.pow(10, si), "powten"]; |
|||
}); |
|||
break; |
|||
//log
|
|||
case 31: |
|||
cal.unaryOperate(function (si) { |
|||
//js的Math.log是e的对数,Windows计算器是10的对数,此处参考Windows
|
|||
return [Math.log10(si), "log"]; |
|||
}); |
|||
break; |
|||
//sinh(双曲正弦函数)
|
|||
case 32: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.sinh(si), "sinh"]; |
|||
}); |
|||
break; |
|||
//cosh(双曲余弦函数)
|
|||
case 33: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.cosh(si), "cosh"]; |
|||
}); |
|||
break; |
|||
//tanh(双曲余切函数)
|
|||
case 34: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.tanh(si), "tanh"]; |
|||
}); |
|||
break; |
|||
//π
|
|||
case 35: |
|||
cal.unaryOperate(function (si) { |
|||
return [Math.PI]; |
|||
}); |
|||
break; |
|||
//按位取反(~)
|
|||
case 48: |
|||
cal.unaryOperate(function (si) { |
|||
var result = eval("~" + si); |
|||
//显示四种进制的数值
|
|||
cal.showScales(result); |
|||
return [result]; |
|||
}); |
|||
break; |
|||
//二元运算符开始
|
|||
//加、减、乘、除、取余,运算比较简单,直接利用eval即可求值
|
|||
case 13: |
|||
case 14: |
|||
case 15: |
|||
case 16: |
|||
case 17: |
|||
//x的y次方
|
|||
case 26: |
|||
//开任意次方根
|
|||
case 23: |
|||
//And Or
|
|||
case 46: |
|||
case 47: |
|||
if (cal.isPreInputBinaryOperator) { |
|||
break; |
|||
} |
|||
cal.isPreInputBinaryOperator = true; |
|||
cal.isOverride = true; |
|||
cal.binaryOperate(cal.keyCodes[keyCode], cal.operatorFacade[keyCode]); |
|||
break; |
|||
case 12: |
|||
cal.calculate(); |
|||
break; |
|||
//ce
|
|||
case 37: |
|||
cal.ce(); |
|||
break; |
|||
//c
|
|||
case 38: |
|||
cal.clear(); |
|||
break; |
|||
//back
|
|||
case 39: |
|||
cal.back(); |
|||
break; |
|||
// (
|
|||
case 21: |
|||
cal.setPreStep(cal.getPreStep() + " ("); |
|||
cal.operatorStack.push("("); |
|||
break; |
|||
// )
|
|||
case 22: |
|||
cal.rightTag(); |
|||
break; |
|||
//向上箭头,把上次计算结果显示出来
|
|||
case 36: |
|||
cal.setShowInput(cal.preResult); |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
/** |
|||
* 执行一元运算 比如取倒数、平方 |
|||
* @param operation 具体运算回调函数 |
|||
* 会向operation传递一个参数si,为用户当前的输入,同时operation函数应该返回一个数组,数组的第一个 |
|||
* 元素是计算的结果,第二个元素示例sqrt,第二个参数可选 |
|||
*/ |
|||
unaryOperate: function (operation) { |
|||
var si = cal.getShowInput(), |
|||
result; |
|||
if (cal.isInteger(si)) { |
|||
result = operation(parseInt(si)); |
|||
} else if (cal.isFloat(si) || cal.isScientific(si)) { |
|||
result = operation(parseFloat(si)); |
|||
} |
|||
if (result != null) { |
|||
cal.setShowInput(cal.checkLength(result[0])); |
|||
if (result.length > 1) { |
|||
//显示prestep有两种情况:
|
|||
//第一种就是这是第一次(指连续调用的第一次)调用一元函数,此时直接接在末尾即可
|
|||
if (!cal.isPreInputUnaryOperator) { |
|||
cal.setPreStep(cal.getPreStep() + " " + result[1] + "(" + si + ")"); |
|||
cal.isPreInputUnaryOperator = true; |
|||
} else { |
|||
//第二种就是这不是第一次,那么应该截取最后一个空格之后的内容进行替换
|
|||
//比如1 + 3 + sqrt(100),那么应该从最后一个空格后替换为此次操作的内容
|
|||
var pi = cal.getPreStep(); |
|||
pi = pi.substring(0, pi.lastIndexOf(" ")); |
|||
pi += (" " + result[1] + "(" + si + ")"); |
|||
cal.setPreStep(pi); |
|||
} |
|||
} |
|||
//一元运算结束后应该覆盖
|
|||
cal.isOverride = true; |
|||
} |
|||
cal.isPreInputBinaryOperator = false; |
|||
}, |
|||
/** |
|||
* 二元操作(+ - * / %) |
|||
* @param operator 操作符 |
|||
* @param facade 运算符门面,用于显示在preStep中 |
|||
*/ |
|||
binaryOperate: function (operator, facade) { |
|||
//如果是程序员型,那么需要重置scalesSpan
|
|||
if (cal.type === 3) { |
|||
cal.resetScales(); |
|||
} |
|||
var si = cal.getShowInput(), |
|||
pi = cal.getPreStep(); |
|||
if (cal.isNumber(si)) { |
|||
//压操作数栈
|
|||
cal.operandStack.push(si); |
|||
//设置preStep有三种情况:第一种上一步不是一元操作,那么需要设置si,第二种是一元操作,那么由于一元操作会把
|
|||
//函数表达式(比如sqrt(100))设置到preStep,所以不需要再次设置si
|
|||
//第三种就是如果最后一位是右括号,那么也不需要设置si
|
|||
cal.setPreStep(cal.getPreStep() + ((cal.isPreInputUnaryOperator || pi.charAt(pi.length - 1) === ")") ? |
|||
(" " + facade) : (" " + si + " " + facade))); |
|||
var preOp = cal.operatorStack.pop(); |
|||
if (preOp != null) { |
|||
var op = cal.operatorPriority[operator], |
|||
pp = cal.operatorPriority[preOp]; |
|||
//如果当前运算符优先级更高,那么只需压栈不需要计算
|
|||
if (op > pp) { |
|||
cal.operatorStack.push(preOp); |
|||
} |
|||
//两者的优先级相等并且高于3(加减),那么只需要计算一步
|
|||
else if (op > 3 && op === pp) { |
|||
cal.operatorStack.push(preOp); |
|||
cal.travelStack(1); |
|||
} else { |
|||
cal.operatorStack.push(preOp); |
|||
cal.setShowInput(cal.checkLength(cal.travelStack(null, op))); |
|||
} |
|||
} |
|||
cal.operatorStack.push(operator); |
|||
} |
|||
cal.isPreInputUnaryOperator = false; |
|||
cal.isPreInputEquals = false; |
|||
}, |
|||
/** |
|||
* 按下=时计算最终结果 |
|||
*/ |
|||
calculate: function () { |
|||
if (!cal.isPreInputEquals) { |
|||
var si = cal.getShowInput(), |
|||
result; |
|||
if (cal.isNumber(si)) { |
|||
cal.operandStack.push(si); |
|||
result = cal.checkLength(cal.travelStack()); |
|||
cal.setShowInput(result); |
|||
cal.preResult = result; |
|||
cal.setPreStep(" "); |
|||
//程序员型需要把计算结果的四种进制值显示出来
|
|||
if (cal.type === 3) { |
|||
cal.showScales(result); |
|||
} |
|||
cal.isOverride = true; |
|||
} |
|||
cal._reset(); |
|||
cal.isPreInputEquals = true; |
|||
} |
|||
}, |
|||
/** |
|||
* 访问运算栈,返回计算结果 |
|||
* @param level 计算的层数,如果不指定,那么遍历整个栈 |
|||
* @param minPri(最小/截止优先级) 此参数针对下面的情况: |
|||
* 2 + 2 X 3 X 2 ^ 2 X 2,由于最后一个运算符是X,优先级比^低,所以触发了对操作栈的遍历,但是不能全部遍历,应该遍历到第一个X停止 |
|||
* 如果不停止得到的将是错误的26 X 2 = 52,正确结果是2 + 24 X 2 = 50 |
|||
* @return Number |
|||
* @private |
|||
*/ |
|||
travelStack: function (level, minPri) { |
|||
var op, f, s, |
|||
//result取操作数栈栈顶,因为防止在下列情况9 X (6 + 时出现undefined
|
|||
result = cal.operandStack[cal.operandStack.length - 1], |
|||
l = level || cal.operatorStack.length, |
|||
p = minPri || 0; |
|||
for (var i = 0; i < l; ++i) { |
|||
op = cal.operatorStack.pop(); |
|||
//遇到minPri或左括号立即停止,左括号也需要再次压入,因为只有一个右括号才能抵消一个左括号
|
|||
if (cal.operatorPriority[op] < p || op === "(") { |
|||
cal.operatorStack.push(op); |
|||
break; |
|||
} |
|||
s = cal.operandStack.pop(); |
|||
f = cal.operandStack.pop(); |
|||
result = cal._stackHelper(f, s, op); |
|||
cal.operandStack.push(result); |
|||
} |
|||
return result; |
|||
}, |
|||
/** |
|||
* 输入了一个右括号 |
|||
*/ |
|||
rightTag: function () { |
|||
var si = cal.getShowInput(); |
|||
if (cal.isNumber(si)) { |
|||
cal.setPreStep(cal.getPreStep() + (" " + si + " )")); |
|||
cal.operandStack.push(si); |
|||
//遍历计算操作栈,直至遇到左括号
|
|||
var op = cal.operatorStack.pop(), |
|||
f, s, result; |
|||
while (op !== "(" && op != null) { |
|||
s = cal.operandStack.pop(); |
|||
f = cal.operandStack.pop(); |
|||
result = cal._stackHelper(f, s, op); |
|||
cal.operandStack.push(result); |
|||
op = cal.operatorStack.pop(); |
|||
} |
|||
//此处应该直接把小括号的计算内容弹出,因为此结果显示在了showInput中,而再次执行二元操作时会先有一个压栈的操作,
|
|||
// 并且执行=时也是根据showInput内容计算的
|
|||
cal.setShowInput(cal.checkLength(cal.operandStack.pop())); |
|||
} |
|||
}, |
|||
/** |
|||
* 辅助进行一次栈运算 |
|||
* @param f 第一个操作数 |
|||
* @param s 第二个操作数 |
|||
* @param op 运算符 |
|||
* @return 返回运算结果 |
|||
* @private |
|||
*/ |
|||
_stackHelper: function (f, s, op) { |
|||
var result; |
|||
if (op === "^") { |
|||
result = Math.pow(f, s); |
|||
} else if (op === "yroot") { |
|||
result = Math.pow(f, 1 / s); |
|||
} |
|||
//+ - X / %5中操作
|
|||
else { |
|||
//如果是程序员型,那么需要考虑进制的问题
|
|||
if (cal.type === 3) { |
|||
var scale = cal.currentScale, |
|||
fi, si; |
|||
if (scale === 10) { |
|||
result = eval(f + op + s); |
|||
} else if (scale === 16) { |
|||
fi = parseInt(f, 16); |
|||
si = parseInt(s, 16); |
|||
result = eval(fi + op + si).toString(16); |
|||
} else if (scale === 8) { |
|||
fi = parseInt(f, 8); |
|||
si = parseInt(s, 8); |
|||
result = eval(fi + op + si).toString(8); |
|||
} else { |
|||
fi = parseInt(f, 2); |
|||
si = parseInt(s, 2); |
|||
result = eval(fi + op + si).toString(2); |
|||
} |
|||
} else { |
|||
result = eval(f + op + s); |
|||
} |
|||
} |
|||
return result; |
|||
}, |
|||
/** |
|||
* 确保结果长度不大于13,如果超出,以科学计数法形式显示(小数点后7位) |
|||
* @param value 需要检查的结果 |
|||
*/ |
|||
checkLength: function (value) { |
|||
var valueStr = value + ""; |
|||
if (cal.isFloat(valueStr)) { |
|||
valueStr = valueStr.replace(/0+$/, ""); |
|||
} |
|||
return valueStr.length > 12 ? value.toExponential(7) : valueStr; |
|||
}, |
|||
//CE
|
|||
ce: function () { |
|||
cal.setShowInput("0"); |
|||
if (cal.type === 3) { |
|||
cal.resetScales(); |
|||
} |
|||
}, |
|||
//C
|
|||
clear: function () { |
|||
cal.setShowInput("0"); |
|||
cal.setPreStep(" "); |
|||
cal._reset(); |
|||
if (cal.type === 3) { |
|||
cal.resetScales(); |
|||
} |
|||
}, |
|||
/** |
|||
* 清空四个进制的值 |
|||
* @private |
|||
*/ |
|||
resetScales: function () { |
|||
for (var i = 0; i < 4; i++) { |
|||
cal.cache.scaleSpans[i].innerHTML = "0"; |
|||
} |
|||
}, |
|||
back: function () { |
|||
var oldValue = cal.cache.showInput.innerText; |
|||
cal.setShowInput(oldValue.length < 2 ? "0" : oldValue.substring(0, oldValue.length - 1)); |
|||
}, |
|||
/** |
|||
* 当计算器类型是程序员时,需要同步显示四种进制的值 |
|||
* @param num 需要显示的数字 |
|||
*/ |
|||
showScales: function (num) { |
|||
var result = cal.calculateScales(num), |
|||
spans = cal.cache.scaleSpans; |
|||
for (var i = 0; i < 4; ++i) { |
|||
spans[i].innerHTML = result[i]; |
|||
} |
|||
}, |
|||
/** |
|||
* 根据当前进制分别计算出四种进制的值 |
|||
* @param num 需要计算的值 |
|||
* @return Array 共4个元素,依次为16、10、8、2进制的值 |
|||
*/ |
|||
calculateScales: function (num) { |
|||
var scale = cal.currentScale, |
|||
result = [], |
|||
i; |
|||
if (scale === 10) { |
|||
i = parseInt(num); |
|||
result[0] = i.toString(16); |
|||
result[1] = i; |
|||
result[2] = i.toString(8); |
|||
result[3] = i.toString(2); |
|||
} else if (scale === 16) { |
|||
//先转成10进制,然后再转成其它进制
|
|||
i = parseInt(num, 16); |
|||
result[0] = num; |
|||
result[1] = i; |
|||
result[2] = i.toString(8); |
|||
result[3] = i.toString(2); |
|||
} else if (scale === 8) { |
|||
i = parseInt(num, 8); |
|||
result[0] = i.toString(16); |
|||
result[1] = i; |
|||
result[2] = num; |
|||
result[3] = i.toString(2); |
|||
} else { |
|||
i = parseInt(num, 2); |
|||
result[0] = i.toString(16); |
|||
result[1] = i; |
|||
result[2] = i.toString(8); |
|||
result[3] = num; |
|||
} |
|||
return result; |
|||
}, |
|||
/** |
|||
* 校验字符串是否是数字 |
|||
* @param str |
|||
* @return 是返回true |
|||
*/ |
|||
isNumber: function (str) { |
|||
return cal.isInteger(str) || cal.isFloat(str) || cal.isScientific(str) || cal.isHex(str); |
|||
}, |
|||
/** |
|||
* 校验是否是整数 |
|||
* @param str |
|||
*/ |
|||
isInteger: function (str) { |
|||
return str.match(cal.intPattern); |
|||
}, |
|||
/** |
|||
* 校验是否是小数 |
|||
* @param str |
|||
*/ |
|||
isFloat: function (str) { |
|||
return str.match(cal.floatPattern); |
|||
}, |
|||
/** |
|||
* 是否是科学计数法 |
|||
* @param str |
|||
*/ |
|||
isScientific: function (str) { |
|||
return str.match(cal.scientificPattern); |
|||
}, |
|||
/** |
|||
* 是否是16进制数字 |
|||
* @param str |
|||
*/ |
|||
isHex: function (str) { |
|||
return str.match(cal.hexPattern); |
|||
}, |
|||
/** |
|||
* 显示输入的内容 |
|||
* 用于相应数字/小数点按键 |
|||
* @param value 按键的内容,不是keyCode |
|||
*/ |
|||
showInput: function (value) { |
|||
var oldValue = cal.getShowInput(); |
|||
var newValue = oldValue; |
|||
if (cal.isOverride) { |
|||
//既然是覆盖,那么如果直接输入.那么肯定是0.x
|
|||
if (value === ".") { |
|||
newValue = "0."; |
|||
} else { |
|||
newValue = value; |
|||
} |
|||
} else if (oldValue.length < 13) { |
|||
if (oldValue === "0") { |
|||
if (value === ".") { |
|||
newValue = "0."; |
|||
} else { |
|||
newValue = value; |
|||
} |
|||
} else { |
|||
newValue += value; |
|||
} |
|||
} |
|||
cal.setShowInput(newValue); |
|||
cal.isOverride = false; |
|||
cal.isPreInputBinaryOperator = false; |
|||
cal.isPreInputUnaryOperator = false; |
|||
cal.isPreInputEquals = false; |
|||
}, |
|||
/** |
|||
* 切换计算器类型 |
|||
* @param type int 要切换到的类型 |
|||
*/ |
|||
switchType: function (type) { |
|||
//关闭选择栏
|
|||
var oldPrefix = cal.typePrefix[cal.type]; |
|||
document.getElementById(oldPrefix + "type-bar").style.display = "none"; |
|||
//切换面板
|
|||
document.getElementById(oldPrefix + "main").style.display = "none"; |
|||
document.getElementById(cal.typePrefix[type] + "main").style.display = "block"; |
|||
cal.type = type; |
|||
if (!cal.hasInited[type]) { |
|||
cal.initListeners(); |
|||
cal.hasInited[type] = true; |
|||
} |
|||
cal.initCache(); |
|||
cal._reset(); |
|||
}, |
|||
/** |
|||
* 重置各个标志变量以及操作栈 |
|||
* @private |
|||
*/ |
|||
_reset: function () { |
|||
cal.operandStack = []; |
|||
cal.operatorStack = []; |
|||
cal.isPreInputBinaryOperator = false; |
|||
cal.isPreInputUnaryOperator = false; |
|||
cal.isPreInputEquals = false; |
|||
}, |
|||
/** |
|||
* 工具方法,为element添加事件处理函数 |
|||
* @param element 需要添加事件的dom元素 |
|||
* @param name name事件名称(不含on) |
|||
* @param handler 事件处理函数 |
|||
*/ |
|||
addEvent: function (element, name, handler) { |
|||
if (window.addEventListener) { |
|||
element.addEventListener(name, handler); |
|||
} else if (window.attachEvent) { |
|||
element.attachEvent("on" + name, handler); |
|||
} |
|||
}, |
|||
/** |
|||
* 工具方法,为element移除特定的事件监听 |
|||
* @param element 需要移除事件监听的dom元素 |
|||
* @param name 事件名,没有"on" |
|||
* @param handler 需要移除的处理函数 |
|||
*/ |
|||
removeEvent: function (element, name, handler) { |
|||
if (window.removeEventListener) { |
|||
element.removeEventListener(name, handler); |
|||
} else if (window.detachEvent) { |
|||
element.detachEvent("on" + name, handler); |
|||
} |
|||
}, |
|||
/** |
|||
* 根据元素的属性进行查找,只要存在此属性即可 |
|||
* @param tag 目标标签名 |
|||
* @param attr |
|||
* @param root 开始查找的起始节点,可选,默认document |
|||
*/ |
|||
getElementsByAttribute: function (tag, attr, root) { |
|||
var parent = root || document, |
|||
result = []; |
|||
var arr = parent.getElementsByTagName(tag), |
|||
a; |
|||
for (var i = 0, l = arr.length; i < l; ++i) { |
|||
a = arr[i]; |
|||
if (a.getAttribute(attr) != null) { |
|||
//这个写法...
|
|||
result[result.length] = a; |
|||
} |
|||
} |
|||
return result; |
|||
}, |
|||
/** |
|||
* 阶乘 |
|||
* @param n 操作数 int |
|||
* @return |
|||
*/ |
|||
fact: (function () { |
|||
//缓存
|
|||
var cache = [1]; |
|||
|
|||
function factorial(n) { |
|||
var result = cache[n - 1]; |
|||
if (result == null) { |
|||
result = 1; |
|||
for (var i = 1; i <= n; ++i) { |
|||
result *= i; |
|||
} |
|||
cache[n - 1] = result; |
|||
} |
|||
return result; |
|||
} |
|||
return factorial; |
|||
})(), |
|||
/** |
|||
* 禁用按键,只有程序员型才会用到 |
|||
* @param lis 按钮集合 |
|||
* @param mouseOutListener function 鼠标移出时采用哪个监听函数,取决于按钮的位置(上排/下排) |
|||
*/ |
|||
disableButtons: function (lis, mouseOutListener) { |
|||
var li; |
|||
for (var i = 0, l = lis.length; i < l; ++i) { |
|||
li = lis[i]; |
|||
li.setAttribute("class", "disable-btn"); |
|||
cal.removeEvent(li, "click", cal.listeners.keyPressListener); |
|||
cal.removeEvent(li, "mouseout", mouseOutListener); |
|||
cal.removeEvent(li, "mouseover", cal.listeners.mouseHoverListener); |
|||
} |
|||
}, |
|||
/** |
|||
* 重新设置按键 |
|||
* @param lis 按钮集合 |
|||
* @param mouseOutListener function 鼠标移出时采用哪个监听函数,取决于按钮的位置(上排/下排) |
|||
*/ |
|||
rebuildButtons: function (lis, mouseOutListener) { |
|||
var li; |
|||
for (var i = 0, l = lis.length; i < l; ++i) { |
|||
li = lis[i]; |
|||
li.removeAttribute("class"); |
|||
cal.addEvent(li, "click", cal.listeners.keyPressListener); |
|||
cal.addEvent(li, "mouseout", mouseOutListener); |
|||
cal.addEvent(li, "mouseover", cal.listeners.mouseHoverListener); |
|||
} |
|||
} |
|||
}; |
|||
return cal; |
|||
})(); |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 102 KiB |
After Width: | Height: | Size: 168 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 84 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 209 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 367 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 67 KiB |
@ -0,0 +1,3 @@ |
|||
version https://git-lfs.github.com/spec/v1 |
|||
oid sha256:5cfb95fe683d044dc82b111d735bd25e5509118e6b03b0eb107c9e063c6149c2 |
|||
size 19265455 |
After Width: | Height: | Size: 284 KiB |
@ -0,0 +1,36 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>draw.io demo</title> |
|||
<link rel="stylesheet" href="./drawio/grapheditor.css"> |
|||
<!-- <link rel="stylesheet" href="https://jgraph.github.io/drawio/src/main/webapp/mxgraph/css/common.css"> --> |
|||
</head> |
|||
|
|||
<!-- geEditor 是draw.io需要的class --> |
|||
<body class="geEditor"> |
|||
<!-- 加载draw.io需要的静态资源 begin --> |
|||
<script type="text/javascript" src="./drawio/Init.js"></script> |
|||
<script type="text/javascript" src="./drawio/lib/pako.min.js"></script> |
|||
<script type="text/javascript" src="./drawio/lib/base64.js"></script> |
|||
<script type="text/javascript" src="./drawio/jscolor/jscolor.js"></script> |
|||
<script type="text/javascript" src="./drawio/lib/purify.min.js"></script> |
|||
<script type="text/javascript" src="./mxgraph/mxClient.js"></script> |
|||
<script type="text/javascript" src="./drawio/Editor.js"></script> |
|||
<script type="text/javascript" src="./drawio/EditorUi.js"></script> |
|||
<script type="text/javascript" src="./drawio/Sidebar.js"></script> |
|||
<script type="text/javascript" src="./drawio/Graph.js"></script> |
|||
<script type="text/javascript" src="./drawio/Format.js"></script> |
|||
<script type="text/javascript" src="./drawio/Shapes.js"></script> |
|||
<script type="text/javascript" src="./drawio/Actions.js"></script> |
|||
<script type="text/javascript" src="./drawio/Menus.js"></script> |
|||
<script type="text/javascript" src="./drawio/Toolbar.js"></script> |
|||
<script type="text/javascript" src="./drawio/Dialogs.js"></script> |
|||
<!-- 加载draw.io需要的静态资源 end --> |
|||
|
|||
<script src="./scripts/drawio.js"></script> |
|||
</body> |
|||
|
|||
</html> |
@ -0,0 +1,27 @@ |
|||
// urlParams is null when used for embedding
|
|||
window.urlParams = window.urlParams || {}; |
|||
|
|||
// Public global variables
|
|||
window.DOM_PURIFY_CONFIG = window.DOM_PURIFY_CONFIG || |
|||
{ADD_TAGS: ['use'], FORBID_TAGS: ['form'], |
|||
ALLOWED_URI_REGEXP: /^((?!javascript:).)*$/i, |
|||
ADD_ATTR: ['target', 'content']}; |
|||
// Public global variables
|
|||
window.MAX_REQUEST_SIZE = window.MAX_REQUEST_SIZE || 10485760; |
|||
window.MAX_AREA = window.MAX_AREA || 15000 * 15000; |
|||
|
|||
// URLs for save and export
|
|||
window.EXPORT_URL = window.EXPORT_URL || './drawio_demo'; |
|||
window.SAVE_URL = window.SAVE_URL || './drawio_demo'; |
|||
window.PROXY_URL = window.PROXY_URL || null; |
|||
window.OPEN_URL = window.OPEN_URL || './drawio_demo'; |
|||
window.RESOURCES_PATH = window.RESOURCES_PATH || './drawio/resources'; |
|||
window.STENCIL_PATH = window.STENCIL_PATH || './drawio/image/stencils'; |
|||
window.IMAGE_PATH = window.IMAGE_PATH || './drawio/image'; |
|||
window.STYLE_PATH = window.STYLE_PATH || './drawio/src/css'; |
|||
window.CSS_PATH = window.CSS_PATH || './drawio/src/css'; |
|||
window.OPEN_FORM = window.OPEN_FORM || './drawio_demo'; |
|||
|
|||
window.mxBasePath = window.mxBasePath || './drawio/src'; |
|||
window.mxLanguage = window.mxLanguage || window.RESOURCES_PATH + '/zh'; |
|||
window.mxLanguages = window.mxLanguages || ['zh']; |
@ -0,0 +1,215 @@ |
|||
html body .geToolbarContainer .geButton, html body .geToolbarContainer .geLabel { |
|||
padding:3px 5px 5px 5px; |
|||
position: relative; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
border-radius:3px; |
|||
} |
|||
html body .geMenubarContainer .geBigButton { |
|||
margin-top: 4px; |
|||
} |
|||
html body .geBigStandardButton:active, .geSidebarContainer .geTitle:active { |
|||
background-color: #DEEBFF; |
|||
color: #0052CC; |
|||
} |
|||
body .geToolbarContainer .geButton:active, body .geToolbarContainer .geLabel:active { |
|||
background-color: #DEEBFF; |
|||
color: #0052CC; |
|||
} |
|||
body > .geToolbarContainer .geLabel, body > .geToolbarContainer .geButton { |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
border: 1px solid transparent !important; |
|||
} |
|||
body > .geToolbarContainer { |
|||
background: #f5f5f5 !important; |
|||
border-bottom: 1px solid #ccc !important; |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
} |
|||
body > .geToolbarContainer > .geToolbar { |
|||
padding-top:4px !important; |
|||
} |
|||
body > .geToolbarContainer > .geToolbar .geSeparator { |
|||
width:1px !important; |
|||
background:#cccccc !important; |
|||
margin-top:3px; |
|||
height:24px; |
|||
} |
|||
.geSidebarContainer .geToolbarContainer .geButton { |
|||
padding:0px 2px 4px 2px; |
|||
} |
|||
.geToolbarContainer .geLabel { |
|||
height:18px; |
|||
_height:31px; |
|||
} |
|||
html body .geStatus .geStatusAlert { |
|||
color:#ffffff !important; |
|||
font-size:12px; |
|||
border:none; |
|||
border-radius:6px; |
|||
text-shadow: rgb(41, 89, 137) 0px 1px 0px; |
|||
background-color:#428bca; |
|||
background-image:linear-gradient(rgb(70, 135, 206) 0px, rgb(48, 104, 162) 100%); |
|||
-webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; |
|||
-moz-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; |
|||
box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; |
|||
} |
|||
html body .geStatus .geStatusAlert:hover { |
|||
background-color: #2d6ca2; |
|||
background-image: linear-gradient(rgb(90, 148, 211) 0px, rgb(54, 115, 181) 100%); |
|||
} |
|||
html body .geStatus .geStatusMessage { |
|||
color:#ffffff !important; |
|||
font-size:12px; |
|||
border:none; |
|||
border-radius:6px; |
|||
text-shadow: rgb(41, 89, 137) 0px 1px 0px; |
|||
background-color:#428bca; |
|||
background-image:linear-gradient(rgb(70, 135, 206) 0px, rgb(48, 104, 162) 100%); |
|||
-webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; |
|||
-moz-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; |
|||
box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; |
|||
} |
|||
html body .geStatus .geStatusMessage:hover { |
|||
background-color: #2d6ca2; |
|||
background-image: linear-gradient(rgb(90, 148, 211) 0px, rgb(54, 115, 181) 100%); |
|||
} |
|||
html body div.mxWindow .geToolbarContainer { |
|||
font-size:11px !important; |
|||
color: #000000 !important; |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
border-width: 0px 0px 1px !important; |
|||
border-color: rgb(195, 195, 195) !important; |
|||
border-style: solid !important; |
|||
border-bottom:1px solid #e0e0e0; |
|||
} |
|||
html body div.mxWindow .geButton, .mxWindow .geLabel { |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
background-image: none !important; |
|||
border:1px solid transparent !important; |
|||
} |
|||
div.mxWindow .geButton { |
|||
margin:1px !important; |
|||
} |
|||
div.mxWindow .geLabel { |
|||
padding:3px 5px 3px 5px !important; |
|||
margin:2px; |
|||
} |
|||
div.mxWindow .geButton:hover, .mxWindow .geLabel:hover { |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
background: none !important; |
|||
border:1px solid gray; |
|||
} |
|||
div.mxWindow .geButton:active, .mxWindow .geLabel:active { |
|||
-webkit-box-shadow: none !important; |
|||
-moz-box-shadow: none !important; |
|||
box-shadow: none !important; |
|||
background-image: none !important; |
|||
border:1px solid black; |
|||
} |
|||
body > .geToolbarContainer .geButton { |
|||
margin:0px -1px 0px 0px !important; |
|||
height:20px; |
|||
} |
|||
html body .geSidebarTooltip, .geSidebarTooltipImage { |
|||
z-index:2; |
|||
} |
|||
html body .geSidebarContainer .geTitle { |
|||
font-size:13px; |
|||
padding:8px 0px 8px 16px; |
|||
} |
|||
html body .geMenubarContainer * { |
|||
color: #DEEBFF; |
|||
} |
|||
html body .geMenubarContainer .geStatus { |
|||
color: rgb(179, 179, 179); |
|||
} |
|||
.geMenubarContainer .geItem:hover:not(.geStatus) { |
|||
background-color: rgba(9, 30, 66, 0.48) !important; |
|||
} |
|||
html body .geToolbarContainer .geLabel { |
|||
margin:0px; |
|||
padding:6px 20px 4px 10px !important; |
|||
} |
|||
.geToolbar .geSeparator { |
|||
width:0px !important; |
|||
} |
|||
.geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel, .geSidebar, .geSidebarContainer .geTitle, .geSidebar .geItem, .mxPopupMenuItem { |
|||
-webkit-transition: none; |
|||
-moz-transition: none; |
|||
-o-transition: none; |
|||
-ms-transition: none; |
|||
transition: none; |
|||
} |
|||
html body .geMenubarContainer { |
|||
background-color: #0049B0; |
|||
color: #ffffff; |
|||
font-size: 14px; |
|||
} |
|||
html body .geMenubar > .geItem { |
|||
padding-left:14px; |
|||
padding-right:15px; |
|||
} |
|||
html body .geSidebarContainer .geToolbarContainer { |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
border:none; |
|||
} |
|||
html body .geSidebarContainer .geToolbarContainer .geButton { |
|||
margin:2px !important; |
|||
height:20px !important; |
|||
} |
|||
html body .geSidebarContainer .geToolbarContainer .geLabel { |
|||
margin:2px !important; |
|||
padding:4px !important; |
|||
} |
|||
html body .geToolbar { |
|||
margin:0px; |
|||
padding:8px 10px 0px 10px; |
|||
-webkit-box-shadow:none; |
|||
-moz-box-shadow:none; |
|||
box-shadow:none; |
|||
border:none; |
|||
} |
|||
html body .geMenubarContainer .mxDisabled { |
|||
opacity: 1; |
|||
color: rgb(179, 179, 179); |
|||
} |
|||
html .geButtonContainer { |
|||
padding-right:10px; |
|||
} |
|||
.geDialogTitle { |
|||
box-sizing:border-box; |
|||
white-space:nowrap; |
|||
background:rgb(32, 80, 129); |
|||
border-bottom:1px solid rgb(192, 192, 192); |
|||
font-size:15px; |
|||
font-weight:bold; |
|||
text-align:center; |
|||
color:white; |
|||
} |
|||
.geDialogFooter { |
|||
background:whiteSmoke; |
|||
white-space:nowrap; |
|||
text-align:right; |
|||
box-sizing:border-box; |
|||
border-top:1px solid #e5e5e5; |
|||
color:darkGray; |
|||
} |
|||
html .geNotification-bell { |
|||
opacity: 1; |
|||
} |
|||
html .geNotification-bell * { |
|||
background-color: #DEEBFF; |
|||
box-shadow: 0px 0px 10px #DEEBFF; |
|||
} |
@ -0,0 +1,109 @@ |
|||
<mxStylesheet> |
|||
<add as="defaultVertex"> |
|||
<add as="shape" value="label"/> |
|||
<add as="perimeter" value="rectanglePerimeter"/> |
|||
<add as="fontSize" value="12"/> |
|||
<add as="fontFamily" value="Helvetica"/> |
|||
<add as="align" value="center"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="fillColor" value="default"/> |
|||
<add as="strokeColor" value="default"/> |
|||
<add as="fontColor" value="default"/> |
|||
</add> |
|||
<add as="defaultEdge"> |
|||
<add as="shape" value="connector"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="endArrow" value="classic"/> |
|||
<add as="fontSize" value="11"/> |
|||
<add as="fontFamily" value="Helvetica"/> |
|||
<add as="align" value="center"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="rounded" value="1"/> |
|||
<add as="strokeColor" value="default"/> |
|||
<add as="fontColor" value="default"/> |
|||
</add> |
|||
<add as="text"> |
|||
<add as="fillColor" value="none"/> |
|||
<add as="gradientColor" value="none"/> |
|||
<add as="strokeColor" value="none"/> |
|||
<add as="align" value="left"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
</add> |
|||
<add as="edgeLabel" extend="text"> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="fontSize" value="11"/> |
|||
</add> |
|||
<add as="label"> |
|||
<add as="fontStyle" value="1"/> |
|||
<add as="align" value="left"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="spacing" value="2"/> |
|||
<add as="spacingLeft" value="52"/> |
|||
<add as="imageWidth" value="42"/> |
|||
<add as="imageHeight" value="42"/> |
|||
<add as="rounded" value="1"/> |
|||
</add> |
|||
<add as="icon" extend="label"> |
|||
<add as="align" value="center"/> |
|||
<add as="imageAlign" value="center"/> |
|||
<add as="verticalLabelPosition" value="bottom"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="spacingTop" value="4"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="spacing" value="0"/> |
|||
<add as="spacingLeft" value="0"/> |
|||
<add as="spacingTop" value="6"/> |
|||
<add as="fontStyle" value="0"/> |
|||
<add as="imageWidth" value="48"/> |
|||
<add as="imageHeight" value="48"/> |
|||
</add> |
|||
<add as="swimlane"> |
|||
<add as="shape" value="swimlane"/> |
|||
<add as="fontSize" value="12"/> |
|||
<add as="fontStyle" value="1"/> |
|||
<add as="startSize" value="23"/> |
|||
</add> |
|||
<add as="group"> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="fillColor" value="none"/> |
|||
<add as="strokeColor" value="none"/> |
|||
<add as="gradientColor" value="none"/> |
|||
<add as="pointerEvents" value="0"/> |
|||
</add> |
|||
<add as="ellipse"> |
|||
<add as="shape" value="ellipse"/> |
|||
<add as="perimeter" value="ellipsePerimeter"/> |
|||
</add> |
|||
<add as="rhombus"> |
|||
<add as="shape" value="rhombus"/> |
|||
<add as="perimeter" value="rhombusPerimeter"/> |
|||
</add> |
|||
<add as="triangle"> |
|||
<add as="shape" value="triangle"/> |
|||
<add as="perimeter" value="trianglePerimeter"/> |
|||
</add> |
|||
<add as="line"> |
|||
<add as="shape" value="line"/> |
|||
<add as="strokeWidth" value="4"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="spacingTop" value="8"/> |
|||
</add> |
|||
<add as="image"> |
|||
<add as="shape" value="image"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="verticalLabelPosition" value="bottom"/> |
|||
</add> |
|||
<add as="roundImage" extend="image"> |
|||
<add as="perimeter" value="ellipsePerimeter"/> |
|||
</add> |
|||
<add as="rhombusImage" extend="image"> |
|||
<add as="perimeter" value="rhombusPerimeter"/> |
|||
</add> |
|||
<add as="arrow"> |
|||
<add as="shape" value="arrow"/> |
|||
<add as="edgeStyle" value="none"/> |
|||
<add as="fillColor" value="default"/> |
|||
</add> |
|||
</mxStylesheet> |
@ -0,0 +1,294 @@ |
|||
:root { |
|||
--dark-color: #18141D; |
|||
--header-color: #363238; |
|||
--panel-color: #2A252F; |
|||
--text-color: #888888; |
|||
--border-color: #505759; |
|||
} |
|||
.geEditor * { |
|||
border-color:#000; |
|||
} |
|||
html body .geBackground { |
|||
background:var(--dark-color); |
|||
} |
|||
html body .geStatus > *, html body .geUser { |
|||
color:var(--text-color); |
|||
} |
|||
html body .geDiagramContainer { |
|||
background-color:var(--dark-color); |
|||
} |
|||
html body div.geMenubarContainer, html body .geFormatContainer, |
|||
html body div.geMenubarContainer .geStatus:hover { |
|||
background-color:var(--panel-color); |
|||
border-color:#000000; |
|||
} |
|||
html body .geActiveItem { |
|||
background-color:#e0e0e0; |
|||
} |
|||
html body .mxCellEditor { |
|||
color: #f0f0f0; |
|||
} |
|||
html body.geEditor div.mxPopupMenu { |
|||
border:1px solid var(--border-color); |
|||
background:var(--panel-color); |
|||
box-shadow:none; |
|||
} |
|||
.geEditor .geTabItem { |
|||
background:var(--panel-color); |
|||
border-color:#000000; |
|||
} |
|||
.geTabContainer { |
|||
border-left-color:#000000; |
|||
border-right-color:#000000; |
|||
} |
|||
.geTabContainer div { |
|||
border-color:var(--dark-color); |
|||
} |
|||
html body .geShapePicker { |
|||
box-shadow:none; |
|||
} |
|||
html body .geTabContainer div.geActivePage, html body .geRuler { |
|||
background:var(--dark-color); |
|||
} |
|||
.geSearchSidebar input, .geBtnStepper, .geBtnUp, |
|||
html body a.geStatus .geStatusBox { |
|||
border-color: var(--border-color); |
|||
} |
|||
html body.geEditor div.mxPopupMenu hr { |
|||
background-color:var(--border-color); |
|||
} |
|||
html body .geDragPreview { |
|||
border: 1px dashed #cccccc; |
|||
} |
|||
html body .geMenubarContainer .geItem:active, html .geSidebarContainer button:active { |
|||
opacity: 0.7; |
|||
} |
|||
html body, html body .geFooterContainer, html body #geFooterItem1, html body textarea, |
|||
html body .mxWindowTitle, html body .geDialogTitle, html body .geDialogFooter, |
|||
html .geEditor div.mxTooltip, html .geHint |
|||
{ |
|||
background: var(--panel-color); |
|||
color:#c0c0c0; |
|||
} |
|||
html > body > div > div.geToolbarContainer.geSimpleMainMenu, |
|||
html > body > div > div.geToolbarContainer.geSimpleMainMenu .geToolbarContainer { |
|||
background:var(--header-color); |
|||
} |
|||
html > body > div > div.geToolbarContainer.geSimpleMainMenu, |
|||
html body .mxWindowTitle, .geDialogTitle, .geDialogFooter { |
|||
border-color:black !important; |
|||
} |
|||
html body .geFooterContainer a, html body .geDiagramContainer a, html body .geStatus a { |
|||
color:#337ab7; |
|||
} |
|||
html body div.mxRubberband { |
|||
border:1px dashed #ffffff !important; |
|||
background:var(--border-color) !important; |
|||
} |
|||
html body .geTemplate { |
|||
color:#000000; |
|||
} |
|||
html body .geSidebar { |
|||
opacity:0.7; |
|||
} |
|||
html body.geEditor .geSidebarContainer div.geDropTarget { |
|||
color:#767676; |
|||
border-color:#767676; |
|||
} |
|||
html body.geEditor .gePrimaryBtn:not([disabled]), |
|||
html body.geEditor .geBigButton:not([disabled]) { |
|||
background:var(--header-color); |
|||
border: 1px solid var(--border-color); |
|||
color:#aaaaaa; |
|||
} |
|||
html body.geEditor .geBtn, html body.geEditor button, |
|||
html body.geEditor button:hover:not([disabled]), |
|||
html body.geEditor button:focus, html body.geEditor select, |
|||
html body.geEditor .geColorBtn { |
|||
background:none; |
|||
border: 1px solid var(--border-color); |
|||
color:#aaaaaa; |
|||
} |
|||
html body .geBtn:hover:not([disabled]) { |
|||
color: #c0c0c0; |
|||
} |
|||
html body.geEditor button.geAdaptiveAsset:hover:not([disabled]) { |
|||
background:#fff; |
|||
} |
|||
html body.geEditor button.geAdaptiveAsset:not([disabled]) { |
|||
border-color:#a2a2a2; |
|||
} |
|||
html body.geEditor button:hover:not([disabled]):not(.geAdaptiveAsset), |
|||
html body.geEditor select:hover:not([disabled]), |
|||
html body.geEditor .geColorBtn:hover:not([disabled]) { |
|||
background:var(--dark-color); |
|||
border: 1px solid var(--border-color); |
|||
} |
|||
html body.geEditor .geSidebar, html body.geEditor .geSidebarContainer .geTitle, html body.geEditor input, html body.geEditor textarea, |
|||
html body.geEditor .geBaseButton, html body.geEditor .geSidebarTooltip, html body.geEditor .geBaseButton, html body.geEditor select, |
|||
html body.geEditor .geSidebarContainer .geDropTarget, html body.geEditor .geToolbarContainer { |
|||
background:var(--panel-color); |
|||
border-color:var(--dark-color); |
|||
color:#aaaaaa; |
|||
} |
|||
html body.geEditor .geSidebar, html body.geEditor .geSidebarContainer .geTitle, html body.geEditor input, html body.geEditor textarea, |
|||
html body.geEditor .geBaseButton, html body.geEditor .geSidebarTooltip, html body.geEditor .geBaseButton, html body.geEditor select, |
|||
html body.geEditor .geSidebarContainer .geDropTarget { |
|||
box-shadow:none; |
|||
} |
|||
html body.geEditor button, html body.geEditor input, |
|||
html body.geEditor textarea, html body.geEditor select, |
|||
.geInsertTablePicker, .geInsertTablePicker * { |
|||
border-color:var(--border-color); |
|||
} |
|||
html body .geMenubarContainer .geToolbarContainer, html body div.geToolbarContainer, html body .geToolbar { |
|||
border-color:#000000; |
|||
box-shadow:none; |
|||
} |
|||
html body .geSketch .geToolbarContainer { |
|||
border-style:none; |
|||
} |
|||
html body.geEditor .geColorBtn, html body .geToolbarContainer { |
|||
box-shadow:none; |
|||
} |
|||
html body .geSidebarTooltip { |
|||
border:1px solid var(--border-color); |
|||
} |
|||
html body .geSprite, html body .geSocialFooter img, html body .mxPopupMenuItem>img, .geAdaptiveAsset { |
|||
filter:invert(100%); |
|||
} |
|||
.geAdaptiveAsset { |
|||
color: #333333; |
|||
} |
|||
.geInverseAdaptiveAsset { |
|||
filter:none !important |
|||
} |
|||
html body .geSidebarFooter { |
|||
border-color:var(--dark-color); |
|||
} |
|||
html body .geFormatSection { |
|||
border-bottom:1px solid var(--dark-color); |
|||
border-color:var(--dark-color); |
|||
} |
|||
html body .geDiagramContainer { |
|||
border-color:var(--border-color); |
|||
} |
|||
html body .geSidebarContainer a, html body .geMenubarContainer a, html body .geToolbar a { |
|||
color:#cccccc; |
|||
} |
|||
html body .geMenubarMenu { |
|||
border-color:var(--border-color) !important; |
|||
} |
|||
html body .geToolbarMenu, html body .geFooterContainer, html body .geFooterContainer td { |
|||
border-color:var(--border-color); |
|||
} |
|||
html body .geFooterContainer a { |
|||
background-color:none; |
|||
} |
|||
html body .geBigStandardButton { |
|||
border: 1px solid var(--border-color); |
|||
} |
|||
html body .geFooterContainer td:hover, html body #geFooterItem1:hover, html body .geBigStandardButton:hover { |
|||
background-color:#000000; |
|||
} |
|||
html body .geSidebarContainer, html body .geDiagramBackdrop { |
|||
background:var(--panel-color); |
|||
} |
|||
html body .geBackgroundPage { |
|||
box-shadow:none; |
|||
} |
|||
.gePropHeader, .gePropRow, .gePropRowDark, .gePropRowCell, .gePropRow>.gePropRowCell, .gePropRowAlt>.gePropRowCell, .gePropRowDark>.gePropRowCell, .gePropRowDarkAlt>.gePropRowCell { |
|||
background:var(--panel-color) !important; |
|||
border-color:var(--panel-color) !important; |
|||
color:#cccccc !important; |
|||
font-weight:normal !important; |
|||
} |
|||
html body tr.mxPopupMenuItem { |
|||
color:#cccccc; |
|||
} |
|||
html body.geEditor table.mxPopupMenu tr.mxPopupMenuItemHover { |
|||
background:var(--dark-color); |
|||
color:#cccccc; |
|||
} |
|||
html body .geSidebarContainer .geTitle:hover, html body .geSidebarContainer .geItem:hover, |
|||
html body .geMenubarContainer .geItem:hover, html body.geEditor .geBaseButton:hover { |
|||
background:var(--dark-color); |
|||
} |
|||
html body .geToolbarContainer .geSeparator { |
|||
background-color:var(--border-color); |
|||
} |
|||
html body .geVsplit, html body table.mxPopupMenu hr { |
|||
border-color:var(--border-color); |
|||
background-color:var(--dark-color); |
|||
} |
|||
html body .geHsplit { |
|||
border-color:#000; |
|||
} |
|||
html body .geHsplit:hover { |
|||
background-color:#000; |
|||
} |
|||
html body .geToolbarContainer .geButton:hover, html body .geToolbarContainer .geButton:active, |
|||
html body .geToolbarContainer .geLabel:hover, html body .geToolbarContainer .geLabel:active, |
|||
html body .geVsplit:hover, html .geSidebarContainer button:active:not([disabled]) { |
|||
background-color:var(--dark-color); |
|||
} |
|||
html body .geToolbarContainer .geButton.geAdaptiveAsset:hover { |
|||
background-color: #fff; |
|||
} |
|||
html body .geDialog, html body div.mxWindow { |
|||
background:var(--panel-color); |
|||
border-color:var(--header-color); |
|||
} |
|||
html body .geDialog { |
|||
box-shadow:none; |
|||
} |
|||
.geHint { |
|||
-webkit-box-shadow: 1px 1px 1px 0px #ccc; |
|||
-moz-box-shadow: 1px 1px 1px 0px #ccc; |
|||
box-shadow: 1px 1px 1px 0px #ccc; |
|||
} |
|||
html .geEditor ::-webkit-scrollbar-thumb { |
|||
background-color: var(--header-color); |
|||
} |
|||
html .geEditor ::-webkit-scrollbar-thumb:hover, .geVsplit:hover { |
|||
background-color:#a0a0a0; |
|||
} |
|||
html body a.geStatus .geStatusAlertOrange { |
|||
background-color:rgb(187, 103, 0); |
|||
border:rgb(240, 135, 5); |
|||
} |
|||
html body a.geStatus .geStatusAlert { |
|||
background-color:#a20025; |
|||
border:1px solid #bd002b; |
|||
color:#fff !important; |
|||
} |
|||
html body a.geStatus .geStatusAlert:hover { |
|||
background-color:#a20025; |
|||
border-color:#bd002b; |
|||
} |
|||
html body .geCommentContainer { |
|||
background-color: transparent; |
|||
border-width: 1px; |
|||
box-shadow: none; |
|||
color: inherit; |
|||
} |
|||
|
|||
html .geNotification-bell * { |
|||
background-color: #aaa; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
html .geNotification-count { |
|||
color: #DEEBFF; |
|||
} |
|||
|
|||
html .geNotifPanel .header { |
|||
height: 30px; |
|||
width: 100%; |
|||
background: #424242; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.geNotifPanel .notifications { |
|||
background-color: #707070; |
|||
} |
@ -0,0 +1,109 @@ |
|||
<mxStylesheet> |
|||
<add as="defaultVertex"> |
|||
<add as="shape" value="label"/> |
|||
<add as="perimeter" value="rectanglePerimeter"/> |
|||
<add as="fontSize" value="12"/> |
|||
<add as="fontFamily" value="Verdana"/> |
|||
<add as="align" value="center"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="fillColor" value="#adc5ff"/> |
|||
<add as="gradientColor" value="#7d85df"/> |
|||
<add as="strokeColor" value="#5d65df"/> |
|||
<add as="fontColor" value="#1d258f"/> |
|||
</add> |
|||
<add as="defaultEdge"> |
|||
<add as="shape" value="connector"/> |
|||
<add as="labelBackgroundColor" value="#FFFFFF"/> |
|||
<add as="endArrow" value="classic"/> |
|||
<add as="fontSize" value="11"/> |
|||
<add as="fontFamily" value="Verdana"/> |
|||
<add as="align" value="center"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="labelBackgroundColor" value="#FFFFFF"/> |
|||
<add as="rounded" value="1"/> |
|||
<add as="strokeColor" value="#5d65df"/> |
|||
<add as="fontColor" value="#1d258f"/> |
|||
</add> |
|||
<add as="text"> |
|||
<add as="fillColor" value="none"/> |
|||
<add as="gradientColor" value="none"/> |
|||
<add as="strokeColor" value="none"/> |
|||
<add as="align" value="left"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
</add> |
|||
<add as="label"> |
|||
<add as="fontStyle" value="1"/> |
|||
<add as="align" value="left"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="spacing" value="2"/> |
|||
<add as="spacingLeft" value="50"/> |
|||
<add as="imageWidth" value="42"/> |
|||
<add as="imageHeight" value="42"/> |
|||
<add as="rounded" value="1"/> |
|||
<add as="shadow" value="1"/> |
|||
<add as="glass" value="1"/> |
|||
</add> |
|||
<add as="icon" extend="label"> |
|||
<add as="align" value="center"/> |
|||
<add as="imageAlign" value="center"/> |
|||
<add as="verticalLabelPosition" value="bottom"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="spacingTop" value="4"/> |
|||
<add as="labelBackgroundColor" value="#FFFFFF"/> |
|||
<add as="spacing" value="0"/> |
|||
<add as="spacingLeft" value="0"/> |
|||
<add as="spacingTop" value="6"/> |
|||
<add as="fontStyle" value="0"/> |
|||
<add as="imageWidth" value="48"/> |
|||
<add as="imageHeight" value="48"/> |
|||
</add> |
|||
<add as="swimlane"> |
|||
<add as="shape" value="swimlane"/> |
|||
<add as="fontSize" value="12"/> |
|||
<add as="fontStyle" value="1"/> |
|||
<add as="startSize" value="23"/> |
|||
</add> |
|||
<add as="group"> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="fillColor" value="none"/> |
|||
<add as="strokeColor" value="none"/> |
|||
<add as="gradientColor" value="none"/> |
|||
</add> |
|||
<add as="ellipse"> |
|||
<add as="shape" value="ellipse"/> |
|||
<add as="perimeter" value="ellipsePerimeter"/> |
|||
</add> |
|||
<add as="rhombus"> |
|||
<add as="shape" value="rhombus"/> |
|||
<add as="perimeter" value="rhombusPerimeter"/> |
|||
</add> |
|||
<add as="triangle"> |
|||
<add as="shape" value="triangle"/> |
|||
<add as="perimeter" value="trianglePerimeter"/> |
|||
</add> |
|||
<add as="line"> |
|||
<add as="shape" value="line"/> |
|||
<add as="strokeWidth" value="4"/> |
|||
<add as="labelBackgroundColor" value="#FFFFFF"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="spacingTop" value="8"/> |
|||
</add> |
|||
<add as="image"> |
|||
<add as="shape" value="image"/> |
|||
<add as="labelBackgroundColor" value="white"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="verticalLabelPosition" value="bottom"/> |
|||
</add> |
|||
<add as="roundImage" extend="image"> |
|||
<add as="perimeter" value="ellipsePerimeter"/> |
|||
</add> |
|||
<add as="rhombusImage" extend="image"> |
|||
<add as="perimeter" value="rhombusPerimeter"/> |
|||
</add> |
|||
<add as="arrow"> |
|||
<add as="shape" value="arrow"/> |
|||
<add as="edgeStyle" value="none"/> |
|||
<add as="fillColor" value="#adc5ff"/> |
|||
<add as="gradientColor" value="#7d85df"/> |
|||
</add> |
|||
</mxStylesheet> |
@ -0,0 +1,203 @@ |
|||
<mxStylesheet> |
|||
<add as="defaultVertex"> |
|||
<add as="shape" value="label"/> |
|||
<add as="perimeter" value="rectanglePerimeter"/> |
|||
<add as="fontSize" value="12"/> |
|||
<add as="fontFamily" value="Helvetica"/> |
|||
<add as="align" value="center"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="fillColor" value="default"/> |
|||
<add as="strokeColor" value="default"/> |
|||
<add as="fontColor" value="default"/> |
|||
</add> |
|||
<add as="defaultEdge"> |
|||
<add as="shape" value="connector"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="endArrow" value="classic"/> |
|||
<add as="fontSize" value="11"/> |
|||
<add as="fontFamily" value="Helvetica"/> |
|||
<add as="align" value="center"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="rounded" value="1"/> |
|||
<add as="strokeColor" value="default"/> |
|||
<add as="fontColor" value="default"/> |
|||
</add> |
|||
<add as="text"> |
|||
<add as="fillColor" value="none"/> |
|||
<add as="gradientColor" value="none"/> |
|||
<add as="strokeColor" value="none"/> |
|||
<add as="align" value="left"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
</add> |
|||
<add as="edgeLabel" extend="text"> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="fontSize" value="11"/> |
|||
</add> |
|||
<add as="label"> |
|||
<add as="fontStyle" value="1"/> |
|||
<add as="align" value="left"/> |
|||
<add as="verticalAlign" value="middle"/> |
|||
<add as="spacing" value="2"/> |
|||
<add as="spacingLeft" value="52"/> |
|||
<add as="imageWidth" value="42"/> |
|||
<add as="imageHeight" value="42"/> |
|||
<add as="rounded" value="1"/> |
|||
</add> |
|||
<add as="icon" extend="label"> |
|||
<add as="align" value="center"/> |
|||
<add as="imageAlign" value="center"/> |
|||
<add as="verticalLabelPosition" value="bottom"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="spacingTop" value="4"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="spacing" value="0"/> |
|||
<add as="spacingLeft" value="0"/> |
|||
<add as="spacingTop" value="6"/> |
|||
<add as="fontStyle" value="0"/> |
|||
<add as="imageWidth" value="48"/> |
|||
<add as="imageHeight" value="48"/> |
|||
</add> |
|||
<add as="swimlane"> |
|||
<add as="shape" value="swimlane"/> |
|||
<add as="fontSize" value="12"/> |
|||
<add as="fontStyle" value="1"/> |
|||
<add as="startSize" value="23"/> |
|||
</add> |
|||
<add as="group"> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="fillColor" value="none"/> |
|||
<add as="strokeColor" value="none"/> |
|||
<add as="gradientColor" value="none"/> |
|||
<add as="pointerEvents" value="0"/> |
|||
</add> |
|||
<add as="ellipse"> |
|||
<add as="shape" value="ellipse"/> |
|||
<add as="perimeter" value="ellipsePerimeter"/> |
|||
</add> |
|||
<add as="rhombus"> |
|||
<add as="shape" value="rhombus"/> |
|||
<add as="perimeter" value="rhombusPerimeter"/> |
|||
</add> |
|||
<add as="triangle"> |
|||
<add as="shape" value="triangle"/> |
|||
<add as="perimeter" value="trianglePerimeter"/> |
|||
</add> |
|||
<add as="line"> |
|||
<add as="shape" value="line"/> |
|||
<add as="strokeWidth" value="4"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="spacingTop" value="8"/> |
|||
</add> |
|||
<add as="image"> |
|||
<add as="shape" value="image"/> |
|||
<add as="labelBackgroundColor" value="default"/> |
|||
<add as="verticalAlign" value="top"/> |
|||
<add as="verticalLabelPosition" value="bottom"/> |
|||
</add> |
|||
<add as="roundImage" extend="image"> |
|||
<add as="perimeter" value="ellipsePerimeter"/> |
|||
</add> |
|||
<add as="rhombusImage" extend="image"> |
|||
<add as="perimeter" value="rhombusPerimeter"/> |
|||
</add> |
|||
<add as="arrow"> |
|||
<add as="shape" value="arrow"/> |
|||
<add as="edgeStyle" value="none"/> |
|||
<add as="fillColor" value="default"/> |
|||
</add> |
|||
<add as="fancy"> |
|||
<add as="shadow" value="1"/> |
|||
<add as="glass" value="1"/> |
|||
</add> |
|||
<add as="gray" extend="fancy"> |
|||
<add as="gradientColor" value="#B3B3B3"/> |
|||
<add as="fillColor" value="#F5F5F5"/> |
|||
<add as="strokeColor" value="#666666"/> |
|||
</add> |
|||
<add as="blue" extend="fancy"> |
|||
<add as="gradientColor" value="#7EA6E0"/> |
|||
<add as="fillColor" value="#DAE8FC"/> |
|||
<add as="strokeColor" value="#6C8EBF"/> |
|||
</add> |
|||
<add as="green" extend="fancy"> |
|||
<add as="gradientColor" value="#97D077"/> |
|||
<add as="fillColor" value="#D5E8D4"/> |
|||
<add as="strokeColor" value="#82B366"/> |
|||
</add> |
|||
<add as="turquoise" extend="fancy"> |
|||
<add as="gradientColor" value="#67AB9F"/> |
|||
<add as="fillColor" value="#D5E8D4"/> |
|||
<add as="strokeColor" value="#6A9153"/> |
|||
</add> |
|||
<add as="yellow" extend="fancy"> |
|||
<add as="gradientColor" value="#FFD966"/> |
|||
<add as="fillColor" value="#FFF2CC"/> |
|||
<add as="strokeColor" value="#D6B656"/> |
|||
</add> |
|||
<add as="orange" extend="fancy"> |
|||
<add as="gradientColor" value="#FFA500"/> |
|||
<add as="fillColor" value="#FFCD28"/> |
|||
<add as="strokeColor" value="#D79B00"/> |
|||
</add> |
|||
<add as="red" extend="fancy"> |
|||
<add as="gradientColor" value="#EA6B66"/> |
|||
<add as="fillColor" value="#F8CECC"/> |
|||
<add as="strokeColor" value="#B85450"/> |
|||
</add> |
|||
<add as="pink" extend="fancy"> |
|||
<add as="gradientColor" value="#B5739D"/> |
|||
<add as="fillColor" value="#E6D0DE"/> |
|||
<add as="strokeColor" value="#996185"/> |
|||
</add> |
|||
<add as="purple" extend="fancy"> |
|||
<add as="gradientColor" value="#8C6C9C"/> |
|||
<add as="fillColor" value="#E1D5E7"/> |
|||
<add as="strokeColor" value="#9673A6"/> |
|||
</add> |
|||
<add as="plain-gray"> |
|||
<add as="gradientColor" value="#B3B3B3"/> |
|||
<add as="fillColor" value="#F5F5F5"/> |
|||
<add as="strokeColor" value="#666666"/> |
|||
</add> |
|||
<add as="plain-blue"> |
|||
<add as="gradientColor" value="#7EA6E0"/> |
|||
<add as="fillColor" value="#DAE8FC"/> |
|||
<add as="strokeColor" value="#6C8EBF"/> |
|||
</add> |
|||
<add as="plain-green"> |
|||
<add as="gradientColor" value="#97D077"/> |
|||
<add as="fillColor" value="#D5E8D4"/> |
|||
<add as="strokeColor" value="#82B366"/> |
|||
</add> |
|||
<add as="plain-turquoise"> |
|||
<add as="gradientColor" value="#67AB9F"/> |
|||
<add as="fillColor" value="#D5E8D4"/> |
|||
<add as="strokeColor" value="#6A9153"/> |
|||
</add> |
|||
<add as="plain-yellow"> |
|||
<add as="gradientColor" value="#FFD966"/> |
|||
<add as="fillColor" value="#FFF2CC"/> |
|||
<add as="strokeColor" value="#D6B656"/> |
|||
</add> |
|||
<add as="plain-orange"> |
|||
<add as="gradientColor" value="#FFA500"/> |
|||
<add as="fillColor" value="#FFCD28"/> |
|||
<add as="strokeColor" value="#D79B00"/> |
|||
</add> |
|||
<add as="plain-red"> |
|||
<add as="gradientColor" value="#EA6B66"/> |
|||
<add as="fillColor" value="#F8CECC"/> |
|||
<add as="strokeColor" value="#B85450"/> |
|||
</add> |
|||
<add as="plain-pink"> |
|||
<add as="gradientColor" value="#B5739D"/> |
|||
<add as="fillColor" value="#E6D0DE"/> |
|||
<add as="strokeColor" value="#996185"/> |
|||
</add> |
|||
<add as="plain-purple"> |
|||
<add as="gradientColor" value="#8C6C9C"/> |
|||
<add as="fillColor" value="#E1D5E7"/> |
|||
<add as="strokeColor" value="#9673A6"/> |
|||
</add> |
|||
</mxStylesheet> |
@ -0,0 +1,78 @@ |
|||
// Extends EditorUi to update I/O action states based on availability of backend
|
|||
(function() |
|||
{ |
|||
var editorUiInit = EditorUi.prototype.init; |
|||
|
|||
EditorUi.prototype.init = function() |
|||
{ |
|||
editorUiInit.apply(this, arguments); |
|||
}; |
|||
|
|||
// Adds required resources (disables loading of fallback properties, this can only
|
|||
// be used if we know that all keys are defined in the language specific file)
|
|||
mxResources.loadDefaultBundle = false; |
|||
var bundle = mxResources.getDefaultBundle(mxLanguage); |
|||
|
|||
// Fixes possible asynchronous requests
|
|||
mxUtils.getAll([bundle, './drawio/theme/default.xml'], function(xhr) |
|||
{ |
|||
// Adds bundle text to resources
|
|||
mxResources.parse(xhr[0].getText()); |
|||
|
|||
// Configures the default graph theme
|
|||
var themes = new Object(); |
|||
themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement(); |
|||
|
|||
// Main
|
|||
window.editorUIInstance = new EditorUi(new Editor(false, themes)); |
|||
|
|||
try { |
|||
addPostMessageListener(editorUIInstance.editor); |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
window.parent.postMessage({eventName: 'ready', value: ''}, '*'); |
|||
|
|||
}, function() |
|||
{ |
|||
document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>'; |
|||
}); |
|||
})(); |
|||
|
|||
function addPostMessageListener(graphEditor) { |
|||
window.addEventListener('message', function(event) { |
|||
if(!event.data || !event.data.eventName) { |
|||
return |
|||
} |
|||
switch (event.data.eventName) { |
|||
case 'setData': |
|||
var value = event.data.value; |
|||
var doc = mxUtils.parseXml(value); |
|||
var documentName = 'cherry-drawio-' + new Date().getTime(); |
|||
editorUIInstance.editor.setGraphXml(null); |
|||
graphEditor.graph.importGraphModel(doc.documentElement); |
|||
graphEditor.setFilename(documentName); |
|||
window.parent.postMessage({eventName: 'setData:success', value: ''}, '*'); |
|||
break; |
|||
case 'getData': |
|||
editorUIInstance.editor.graph.stopEditing(); |
|||
var xmlData = mxUtils.getXml(editorUIInstance.editor.getGraphXml()); |
|||
editorUIInstance.exportImage(1, "#ffffff", true, null, true, 50, null, "png", function(base64, filename){ |
|||
window.parent.postMessage({ |
|||
mceAction: 'getData:success', |
|||
eventName: 'getData:success', |
|||
value: { |
|||
xmlData: xmlData, |
|||
base64: base64, |
|||
} |
|||
}, '*'); |
|||
}) |
|||
break; |
|||
case 'ready?': |
|||
window.parent.postMessage({eventName: 'ready', value: ''}, '*'); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}); |
|||
} |
@ -0,0 +1,100 @@ |
|||
/* |
|||
_____ ____ ____ ____ _______ |
|||
| __ \ / __ \| _ \ / __ \__ __| |
|||
| |__) | | | | |_) | | | | | | |
|||
| _ /| | | | _ <| | | | | | |
|||
| | \ \| |__| | |_) | |__| | | | |
|||
|_| \_\\____/|____/ \____/ |_| |
|||
|
|||
*/ |
|||
@font-face { |
|||
font-family: "graph.iconfont"; |
|||
src: url('@{iconfont-path}iconfont/graph.iconfont.eot'); |
|||
src: url('@{iconfont-path}iconfont/graph.iconfont.eot?#iefix') format('eot'), |
|||
url('@{iconfont-path}iconfont/graph.iconfont.woff') format('woff'), |
|||
url('@{iconfont-path}iconfont/graph.iconfont.ttf') format('truetype'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.font-graph { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.font-graph:after { |
|||
display: inline-block; |
|||
font-family: "graph.iconfont"; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
line-height: 1; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.font-graph-lg { |
|||
font-size: 1.3333333333333333em; |
|||
line-height: 0.75em; |
|||
vertical-align: -15%; |
|||
} |
|||
.font-graph-2x { font-size: 2em; } |
|||
.font-graph-3x { font-size: 3em; } |
|||
.font-graph-4x { font-size: 4em; } |
|||
.font-graph-5x { font-size: 5em; } |
|||
.font-graph-fw { |
|||
width: 1.2857142857142858em; |
|||
text-align: center; |
|||
} |
|||
|
|||
.font-graph-geSprite-arrow:after { content: "\EA01" } |
|||
.font-graph-geSprite-bold:after { content: "\EA02" } |
|||
.font-graph-geSprite-bottom:after { content: "\EA03" } |
|||
.font-graph-geSprite-center:after { content: "\EA04" } |
|||
.font-graph-geSprite-code:after { content: "\EA05" } |
|||
.font-graph-geSprite-connection:after { content: "\EA06" } |
|||
.font-graph-geSprite-curved:after { content: "\EA07" } |
|||
.font-graph-geSprite-delete:after { content: "\EA08" } |
|||
.font-graph-geSprite-dots:after { content: "\EA09" } |
|||
.font-graph-geSprite-entity:after { content: "\EA0A" } |
|||
.font-graph-geSprite-fit:after { content: "\EA0B" } |
|||
.font-graph-geSprite-fontbackground:after { content: "\EA0C" } |
|||
.font-graph-geSprite-fontcolor:after { content: "\EA0D" } |
|||
.font-graph-geSprite-formatpanel:after { content: "\EA0E" } |
|||
.font-graph-geSprite-horizontalelbow:after { content: "\EA0F" } |
|||
.font-graph-geSprite-horizontalisometric:after { content: "\EA10" } |
|||
.font-graph-geSprite-horizontalrule:after { content: "\EA11" } |
|||
.font-graph-geSprite-indent:after { content: "\EA12" } |
|||
.font-graph-geSprite-italic:after { content: "\EA13" } |
|||
.font-graph-geSprite-justifyfull:after { content: "\EA14" } |
|||
.font-graph-geSprite-left:after { content: "\EA15" } |
|||
.font-graph-geSprite-link:after { content: "\EA16" } |
|||
.font-graph-geSprite-linkedge:after { content: "\EA17" } |
|||
.font-graph-geSprite-middle:after { content: "\EA18" } |
|||
.font-graph-geSprite-orderedlist:after { content: "\EA19" } |
|||
.font-graph-geSprite-orthogonal:after { content: "\EA1A" } |
|||
.font-graph-geSprite-outdent:after { content: "\EA1B" } |
|||
.font-graph-geSprite-plus:after { content: "\EA1C" } |
|||
.font-graph-geSprite-redo:after { content: "\EA1D" } |
|||
.font-graph-geSprite-removeformat:after { content: "\EA1E" } |
|||
.font-graph-geSprite-right:after { content: "\EA1F" } |
|||
.font-graph-geSprite-shadow:after { content: "\EA20" } |
|||
.font-graph-geSprite-simplearrow:after { content: "\EA21" } |
|||
.font-graph-geSprite-straight:after { content: "\EA22" } |
|||
.font-graph-geSprite-strokecolor:after { content: "\EA23" } |
|||
.font-graph-geSprite-subscript:after { content: "\EA24" } |
|||
.font-graph-geSprite-superscript:after { content: "\EA25" } |
|||
.font-graph-geSprite-table:after { content: "\EA26" } |
|||
.font-graph-geSprite-toback:after { content: "\EA27" } |
|||
.font-graph-geSprite-tofront:after { content: "\EA28" } |
|||
.font-graph-geSprite-top:after { content: "\EA29" } |
|||
.font-graph-geSprite-underline:after { content: "\EA2A" } |
|||
.font-graph-geSprite-undo:after { content: "\EA2B" } |
|||
.font-graph-geSprite-unorderedlist:after { content: "\EA2C" } |
|||
.font-graph-geSprite-vertical:after { content: "\EA2D" } |
|||
.font-graph-geSprite-verticalelbow:after { content: "\EA2E" } |
|||
.font-graph-geSprite-verticalisometric:after { content: "\EA2F" } |
|||
.font-graph-geSprite-zoomin:after { content: "\EA30" } |
|||
.font-graph-geSprite-zoomout:after { content: "\EA31" } |
|||
.font-graph-geSprite-zz-填充色_icon:after { content: "\EA32" } |
|||
.font-graph-geSprite-zz-复选框:after { content: "\EA33" } |
|||
.font-graph-geSprite-zz-查看画图2:after { content: "\EA34" } |
|||
.font-graph-geSprite-zz-线条颜色_icon:after { content: "\EA35" } |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 824 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 777 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 971 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 743 B |
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 1016 B |
After Width: | Height: | Size: 545 B |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 671 B |
After Width: | Height: | Size: 838 B |
After Width: | Height: | Size: 839 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 690 B |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 953 B |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 662 B |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 955 B |
After Width: | Height: | Size: 839 B |