Songyou commited on
Commit
485dfe6
·
verified ·
1 Parent(s): 8cc1e9d

Upload 11 files

Browse files
ketcher/apple-touch-icon.png ADDED
ketcher/asset-manifest.json ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "files": {
3
+ "main.css": "./static/css/main.c3d3c37d.css",
4
+ "main.js": "./static/js/main.c5aad90e.js",
5
+ "static/js/58.d4158b49.chunk.js": "./static/js/58.d4158b49.chunk.js",
6
+ "indigo-ketcher-1.25.0.wasm": "./indigo-ketcher-1.25.0.wasm",
7
+ "indigo-ketcher-norender-1.25.0.wasm": "./indigo-ketcher-norender-1.25.0.wasm",
8
+ "index.html": "./index.html"
9
+ },
10
+ "entrypoints": [
11
+ "static/css/main.c3d3c37d.css",
12
+ "static/js/main.c5aad90e.js"
13
+ ]
14
+ }
ketcher/favicon-16x16.png ADDED
ketcher/favicon-32x32.png ADDED
ketcher/favicon.ico ADDED
ketcher/iframe.html ADDED
@@ -0,0 +1,149 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Document</title>
8
+ <style>
9
+ .modal {
10
+ display: block;
11
+ position: fixed;
12
+ z-index: 1;
13
+ left: 0;
14
+ top: 0;
15
+ width: 100%;
16
+ height: 100%;
17
+ overflow: auto;
18
+ background-color: rgb(0, 0, 0);
19
+ background-color: rgba(0, 0, 0, 0.4);
20
+ }
21
+
22
+ .modal-content {
23
+ background-color: #fefefe;
24
+ margin: 0% auto;
25
+ padding: 20px;
26
+ border: 1px solid #888;
27
+ width: 80%;
28
+ }
29
+
30
+ .close {
31
+ color: #aaa;
32
+ float: right;
33
+ font-size: 28px;
34
+ font-weight: bold;
35
+ }
36
+
37
+ .close:hover,
38
+ .close:focus {
39
+ color: black;
40
+ text-decoration: none;
41
+ cursor: pointer;
42
+ }
43
+
44
+ .inputs {
45
+ display: flex;
46
+ flex-direction: column;
47
+ }
48
+
49
+ .columns {
50
+ width: 100%;
51
+ display: flex;
52
+ gap: 40px;
53
+ }
54
+
55
+ .columns > div:nth-child(2) {
56
+ width: 80%;
57
+ }
58
+
59
+ textarea {
60
+ width: 100%;
61
+ height: 500px;
62
+ }
63
+
64
+ input {
65
+ margin: 5px 0;
66
+ }
67
+
68
+ label {
69
+ margin-right: 20px;
70
+ }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <div class="columns">
75
+ <div>
76
+ <button>Open Modal</button>
77
+ <div class="inputs">
78
+ <div>
79
+ <label>Height</label>
80
+ <input placeholder="height" class="height" />
81
+ </div>
82
+ <div>
83
+ <label>Width</label>
84
+ <input placeholder="width" class="width" />
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <div>
89
+ <textarea
90
+ class="molecule"
91
+ placeholder="Insert a molecule here..."
92
+ ></textarea>
93
+ </div>
94
+ </div>
95
+ <script defer>
96
+ const button = document.querySelector('button')
97
+ const textarea = document.querySelector('.molecule')
98
+ const width = document.querySelector('.width')
99
+ const height = document.querySelector('.height')
100
+ const modalContent = `
101
+ <div class="modal-content">
102
+ <span class="close">&times;</span>
103
+ <iframe
104
+ width="784"
105
+ height="624"
106
+ id="iframe"
107
+ src="env_url"
108
+ sandbox="allow-scripts allow-same-origin"
109
+ ></iframe>
110
+ </div>
111
+ `
112
+ let modal
113
+ let closeIcon;
114
+ let iframe;
115
+
116
+ function closeModal() {
117
+ closeIcon.removeEventListener('click', closeModal)
118
+ modal.remove()
119
+ }
120
+
121
+ function createModal() {
122
+ modal = document.createElement('div')
123
+ modal.classList.add('modal')
124
+ modal.innerHTML = modalContent
125
+ document.body.appendChild(modal)
126
+
127
+ closeIcon = document.querySelector('.close')
128
+ iframe = document.getElementById('iframe')
129
+ iframe.style.height = height.value + 'px'
130
+ iframe.style.width = width.value + 'px'
131
+
132
+ closeIcon.addEventListener('click', closeModal)
133
+ }
134
+
135
+ button.onclick = createModal
136
+ window.onclick = function (event) {
137
+ if (event.target == modal) {
138
+ closeModal()
139
+ }
140
+ }
141
+
142
+ window.addEventListener('message', (event) => {
143
+ if (event.data.eventType === 'init') {
144
+ iframe.contentWindow.ketcher.setMolecule(textarea.value)
145
+ }
146
+ })
147
+ </script>
148
+ </body>
149
+ </html>
ketcher/index.html ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <!-- 原始的 Meta 标签和 Favicon 链接 -->
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
7
+ <meta name="theme-color" content="#000000" />
8
+ <meta name="description" content="Ketcher is a web-based chemical structure editor" />
9
+ <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
10
+ <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
11
+ <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png" />
12
+ <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png" />
13
+ <link rel="manifest" href="./manifest.json" />
14
+
15
+ <!-- 页面标题 -->
16
+ <title>Ketcher</title>
17
+
18
+ <!-- 引入原始的 CSS 文件 -->
19
+ <link href="./static/css/main.c3d3c37d.css" rel="stylesheet">
20
+
21
+ <!-- 引入您的自定义 CSS(如果有) -->
22
+ <link rel="stylesheet" href="./ketcher.css" />
23
+ </head>
24
+ <body>
25
+ <!-- 当 JavaScript 被禁用时显示的消息 -->
26
+ <noscript>You need to enable JavaScript to run this app.</noscript>
27
+
28
+ <!-- Ketcher 编辑器的根容器 -->
29
+ <div id="root" style="width:100%; height:100vh; box-sizing:border-box;"></div>
30
+
31
+ <!-- 引入原始的 JS 文件 -->
32
+ <script defer="defer" src="./static/js/main.c5aad90e.js"></script>
33
+
34
+ <!-- 引入您的自定义 Ketcher JS 文件 -->
35
+ <script src="./ketcher.min.js"></script>
36
+
37
+ <!-- 初始化 Ketcher 的自定义脚本 -->
38
+ <script>
39
+ document.addEventListener('DOMContentLoaded', () => {
40
+ // 检查原始的 Ketcher 实例是否已创建
41
+ if (window.ketcher) {
42
+ console.log("[Ketcher index.html] Ketcher instance already exists.");
43
+ } else {
44
+ // 手动初始化 Ketcher
45
+ const ketcher = new Ketcher(document.getElementById('root'), {
46
+ // 根据需要填写 Ketcher 的配置参数
47
+ // 例如:width: '100%', height: '600px'
48
+ });
49
+ window.ketcher = ketcher;
50
+ console.log("[Ketcher index.html] Ketcher instance created and assigned to window.ketcher");
51
+ }
52
+ });
53
+ </script>
54
+ </body>
55
+ </html>
ketcher/indigo-ketcher-1.25.0.wasm ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:463ef891592f6c8959b71ec410799c017923280a174793b8e575f39a9af2d8cd
3
+ size 8199044
ketcher/indigo-ketcher-norender-1.25.0.wasm ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:5398921dd9ce7547d0361d5c5eb12689b75f31c4ea4f371abe2cd962ae04b0d2
3
+ size 4504600
ketcher/logo.svg ADDED
ketcher/manifest.json ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "short_name": "Ketcher",
3
+ "name": "Ketcher",
4
+ "icons": [
5
+ {
6
+ "src": "favicon.ico",
7
+ "sizes": "64x64 32x32 24x24 16x16",
8
+ "type": "image/x-icon"
9
+ }
10
+ ],
11
+ "start_url": ".",
12
+ "display": "standalone",
13
+ "theme_color": "#000000",
14
+ "background_color": "#ffffff"
15
+ }