@ -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 |