Skip to content

Commit c0d2d01

Browse files
author
webbery
committed
🚧修改本地js脚本载入功能;引入3D视图
1 parent 741f336 commit c0d2d01

13 files changed

Lines changed: 101 additions & 49 deletions

File tree

‎extensions/meta3d/content.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
6+
</head>
7+
<body>
8+
<model-viewer id="_cv_ext_obj_" auto-rotate="" camera-controls="" style="width: 100%;height: 90vh;" background-color="#455A64"></model-obj>
9+
<script>
10+
// Meta3DContentView = (function() {
11+
acquireCivetApi().ContentView.on('load', (data) => {
12+
const elem = document.getElementById('_cv_ext_obj_')
13+
elem.setAttribute('src', 'file://' + data)
14+
console.info('load 3D data', data)
15+
})
16+
// })()
17+
</script>
18+
</body>
19+
</html>

‎extensions/meta3d/index.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IResource, ResourceProperty, PropertyType } from 'civet'
1+
import { IResource, ResourceProperty, PropertyType, window, utility } from 'civet'
22

33
function convert2ValidDate(str: string): string {
44
if (str.match(/[0-9]{4}:[0-9]{2}:[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}/g)) {
@@ -11,6 +11,14 @@ function convert2ValidDate(str: string): string {
1111
return str
1212
}
1313

14+
let contentView = window.createContentView('3dContentView',
15+
['glb', 'gltf']);
16+
contentView.onViewInitialize(():string => {
17+
const fs = require('fs')
18+
const html = fs.readFileSync(utility.extensionPath + '/meta3d/content.html', 'utf-8')
19+
return html
20+
});
21+
1422
class MetaParser {
1523
constructor() {}
1624

‎extensions/meta3d/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@
99
"main": "./index.js",
1010
"civet": {
1111
"activeEvents": [
12-
"onContentType: obj,json,stl,dae,ply,fbx,gltf",
12+
"onContentType: glb,gltf",
13+
"onView: ContentView",
1314
"onSave:"
1415
]
1516
},
1617
"dependencies": {
18+
"vue-3d-model": "^1.4.0"
1719
}
1820
}

‎package-lock.json‎

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@
126126
"tinycolor2": "^1.4.2",
127127
"uuid": "^8.3.1",
128128
"v-hotkey": "^0.9.0",
129-
"vue": "^2.6.12",
130129
"vue-electron": "^1.0.6",
131130
"vue-lazyload": "^1.3.3",
132131
"vue-multiselect": "^2.1.6",
@@ -222,10 +221,11 @@
222221
"tweetnacl": "^1.0.3",
223222
"typescript": "^4.1.5",
224223
"url-loader": "^2.0.1",
224+
"vue": "^2.6.14",
225225
"vue-html-loader": "^1.2.4",
226226
"vue-loader": "^15.9.6",
227227
"vue-style-loader": "^4.1.0",
228-
"vue-template-compiler": "^2.6.12",
228+
"vue-template-compiler": "^2.6.14",
229229
"webpack": "^4.15.1",
230230
"webpack-cli": "^4.5.0",
231231
"webpack-dev-server": "^3.1.4",

‎src/public/Resource.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { IResource, ExtensionContext, ResourceProperty } from 'civet'
22
import { PropertyType } from './ExtensionHostType'
3-
3+
import path from 'path'
44

55
export class DisplayProperty{
66
name: string;
@@ -73,7 +73,7 @@ export class Resource implements IResource {
7373
}
7474
}
7575
if (!this.thumbnail) this.thumbnail = property.thumbnail
76-
if (!this._path) this._path = property.path || ''
76+
if (!this._path) this._path = path.normalize(property.path) || ''
7777
if (!this._remote) this._remote = property.remote || undefined
7878
if (!this.name) this.name = property.filename || ''
7979
}
@@ -153,7 +153,7 @@ export class Resource implements IResource {
153153
let serialize = {
154154
id: this.id,
155155
filename: this.name,
156-
path: this._path,
156+
path: path.normalize(this._path),
157157
thumbnail: this.thumbnail,
158158
filetype: this.filetype,
159159
keyword: this.keyword,

‎src/public/Utility.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,19 @@ export function text2PNG(text: string, width: number, height: number): string {
114114
if (!canvas) return ''
115115
const ctx = canvas.getContext('2d')
116116
if (!ctx) return ''
117-
ctx.fillStyle = background[text.length % 4];
117+
let index = 0
118+
for(let idx = 0; idx < text.length; ++idx) {
119+
index += text.charCodeAt(idx)
120+
}
121+
ctx.fillStyle = background[index % 4];
118122
ctx.fillRect(0, 0, width, height)
119123
ctx.font = '20px Impact'
120-
ctx.fillStyle = 'white'
124+
ctx.fillStyle = 'black'
121125
console.debug('height:', height / 2)
122126
ctx.fillText(text, (width - text.length * 10) / 2, height / 2 + 5)
123127
return canvas.toDataURL()
128+
}
129+
130+
export function hasProtocol(url: string) {
131+
return url.startsWith('//') || url.startsWith('http://') || url.startsWith('https://')
124132
}

‎src/renderer/App.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ export default {
6767
if (!resource.thumbnail) {
6868
const width = 300
6969
const height = 600
70-
const png = text2PNG(resource.type(), width, height)
71-
console.info('image output:', png)
70+
const type = resource.type || resource.filetype
71+
const png = text2PNG(type, width, height)
7272
resource.thumbnail = png
7373
resource['meta'].push(
7474
{
@@ -110,7 +110,7 @@ export default {
110110
console.error(info)
111111
const h = this.$createElement
112112
this.$notify.error({
113-
title: info.msg,
113+
title: info.msg || info,
114114
dangerouslyUseHTMLString: true,
115115
message: h('div', {style: 'color: white; font-size: 12px;'}, info.path),
116116
// duration: 0,

‎src/renderer/common/ScriptLoader.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
// import vm from 'vm'
22
import crypto from 'crypto'
3+
import path from 'path'
4+
import { hasProtocol } from '@/../public/Utility'
5+
import { events } from './RendererService'
36

47
export default (function() {
58
let groupQueue
@@ -52,12 +55,18 @@ export default (function() {
5255
resolve(true)
5356
}
5457
s.onerror = function(oError) {
55-
console.error('The script ' + oError.target.src + ' is not accessible.')
58+
const err = 'The script ' + oError.target.src + ' is not accessible.'
59+
events.emit('civet', 'onErrorMessage', {msg: err})
5660
reject(oError)
5761
}
58-
console.info('src script')
5962
s.async = true
60-
s.src = script
63+
if (hasProtocol(script)) {
64+
s.src = script
65+
} else {
66+
s.src = path.join(__static, '/' + script)
67+
}
68+
s.type = 'module'
69+
console.info('src script:', s.src)
6170
document.head.appendChild(s)
6271
}
6372
})

‎src/renderer/components/Panel/ContentPanel.vue‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,16 @@
33
<el-scrollbar style="height: 93vh;" wrap-style="overflow-x:hidden;">
44
<div class="image-panel">
55
<div class="prev" @click="onClickPrev"></div>
6-
<!-- <div class="viewer">
7-
<img :src="candidates[index].path">
8-
</div> -->
9-
<div style="height: 100%" v-html="html" id="_cv_content_view"></div>
6+
<!-- <div v-if="!isParsed">
7+
<div class="_cv_content_loading">
8+
<svg class="_cv_circular" viewBox="25 25 50 50">
9+
<circle class="_cv_path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
10+
</svg>
11+
</div>
12+
</div>
13+
<div v-else style="height: 100%"> -->
14+
<div style="height: 100%" v-html="html" id="_cv_content_view"></div>
15+
<!-- </div> -->
1016
<div class="next" @click="onClickNext"></div>
1117
</div>
1218
</el-scrollbar>
@@ -31,16 +37,14 @@ export default {
3137
viewer: null,
3238
html: '',
3339
script: '',
34-
isUpdated: true
40+
isUpdated: false,
41+
isParsed: false
3542
}
3643
},
3744
computed: mapState({
3845
candidates: state => state.Cache.viewItems
3946
}),
4047
mounted() {
41-
this.html = '<div class="_cv_content_loading"><svg class="_cv_circular" viewBox="25 25 50 50">' +
42-
'<circle class="_cv_path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>' +
43-
'</svg></div>'
4448
this.resource = this.$route.params
4549
console.info('content panel mounted:', this.resource, this.candidates)
4650
if (this.resource.type) {
@@ -71,8 +75,8 @@ export default {
7175
this.isUpdated = true
7276
return
7377
}
74-
// console.debug('viewname: ', contentView)
75-
events.emit('ContentView:' + contentView, 'load', this.resource._path)
78+
const path = require('path')
79+
events.emit('ContentView:' + contentView, 'load', path.normalize(this.resource._path))
7680
this.isUpdated = true
7781
},
7882
methods: {
@@ -103,6 +107,7 @@ export default {
103107
this.html = HtmlLoader.load(value.body)
104108
this.script = value.script
105109
this.isUpdated = false
110+
this.isParsed = true
106111
}
107112
}
108113
}
@@ -173,5 +178,8 @@ export default {
173178
left: 16px;
174179
position: absolute;
175180
content: "\E604";
181+
}
182+
.__cv_transition_content{
183+
176184
}
177185
</style>

0 commit comments

Comments
 (0)