Commit b5048aee authored by rockyl's avatar rockyl

init

parent 659c4e39
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<script src="//yun.duiba.com.cn/js-libs/psd.js/3.2.0/psd.min.js"></script> <script src="//yun.duiba.com.cn/js-libs/psd.js/3.2.0/psd.min.js"></script>
<!--<script src="http://0.0.0.0:4002/debug/engine.js"></script>--> <!--<script src="http://0.0.0.0:4002/debug/engine.js"></script>-->
<script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.da36f120e2f6937ed9812bb9538770e4505478d9.js"></script> <script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.05f3077c3940b59dd921a937fbc7ff93018d02dc.js"></script>
<script src="//yun.duiba.com.cn/editor/zeroing/libs/svga.469e6ae1d98c9017953cf9375559c2575b293b59.js"></script> <script src="//yun.duiba.com.cn/editor/zeroing/libs/svga.469e6ae1d98c9017953cf9375559c2575b293b59.js"></script>
</head> </head>
<body> <body>
......
...@@ -6,8 +6,7 @@ export let API_HOST; ...@@ -6,8 +6,7 @@ export let API_HOST;
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
//API_HOST = '//10.10.95.74:7777'; //API_HOST = '//10.10.95.74:7777';
//API_HOST = '//192.168.1.16:7777'; //API_HOST = '//192.168.1.16:7777';
API_HOST = '//0.0.0.0:3000'; API_HOST = '//10.10.92.233:3000';
//API_HOST = '//192.168.0.105:7777';
//API_HOST = '//localhost:8080'; //API_HOST = '//localhost:8080';
//API_HOST = window.__data.apiHost; //API_HOST = window.__data.apiHost;
//API_HOST = 'http://beacon.duiba.com.cn'; //API_HOST = 'http://beacon.duiba.com.cn';
......
.zero-playground-body-center{ .pane-playground {
position: relative; flex: 1;
width: 750px; display: flex;
height: 1624px; flex-direction: column;
margin: 10px auto;
// max-height: 1200px;
background-color: transparent;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
//overflow-x: hidden;
//overflow-y: auto;
/*transform: scale(.5, .5);
transform-origin: 50% 0%;*/
//zoom: 0.5;
background: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiUlEQVQ4jZ1TSxLFIAhLOp7C+19NjyFvlQ7lUUvLRgXzgVGOMQyb6L3/5cwMJAEAxw6sy3FP8tw/EkhJqp7klQMBtKpWcpC1oVp7IoiqviXg4xBFRPL7EM/6WsviYDxwzrkVaBHsz5U4MlWfKxHEySpXIdk6qLRzcXBHVnKQfZRKCy1Ty979XfwApOBe0rB0KiIAAAAASUVORK5CYII=);
background-repeat: repeat;
&::-webkit-scrollbar { .playground-ctrl {
display: none; width: 100%;
} border-bottom: 1px solid $--border-color-base;
.active { .stage-set-label {
border: 2px dashed rgb(20, 100, 206); white-space: nowrap;
padding-left: 10px;
}
} }
}
// .zero-playground-draw-panel{
// min-height: 1200px;
// height: 100%;
// /*overflow-y: auto;
// overflow-x: hidden;*/
// }
.zero-draw-panel-container {
position: relative;
width: 100%;
height: 100%;
}
.zero-draw-panel-container.scroll {
height: 1200px;
}
/* 重置background相关属性*/
.zero-draw-panel-container * {
background-repeat: no-repeat;
}
.zero-draw-panel-body { .draw-body {
position: absolute; width: 100%;
top: 0; flex: 1;
left: 0; overflow: auto;
right: 0; padding: 5px 0;
bottom: 0;
z-index: 1; .zero-playground-body-center{
background: transparent; position: relative;
} width: 750px;
.zero-components-container { height: 1624px;
width: 100%; margin: 10px auto;
height: 100%; // max-height: 1200px;
} background-color: transparent;
.zero-components-container.playingAnime { box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
position: absolute; //overflow-x: hidden;
z-index: 2; //overflow-y: auto;
} /*transform: scale(.5, .5);
transform-origin: 50% 0%;*/
//zoom: 0.5;
background: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiUlEQVQ4jZ1TSxLFIAhLOp7C+19NjyFvlQ7lUUvLRgXzgVGOMQyb6L3/5cwMJAEAxw6sy3FP8tw/EkhJqp7klQMBtKpWcpC1oVp7IoiqviXg4xBFRPL7EM/6WsviYDxwzrkVaBHsz5U4MlWfKxHEySpXIdk6qLRzcXBHVnKQfZRKCy1Ty979XfwApOBe0rB0KiIAAAAASUVORK5CYII=);
background-repeat: repeat;
&::-webkit-scrollbar {
display: none;
}
.active {
border: 2px dashed rgb(20, 100, 206);
}
}
// .zero-playground-draw-panel{
// min-height: 1200px;
// height: 100%;
// /*overflow-y: auto;
// overflow-x: hidden;*/
// }
.zero-draw-panel-container {
position: relative;
width: 100%;
height: 100%;
}
.zero-draw-panel-container.scroll {
height: 1200px;
}
/* 重置background相关属性*/
.zero-draw-panel-container * {
background-repeat: no-repeat;
}
.zero-custom-wrapper { .zero-draw-panel-body {
position: absolute; position: absolute;
cursor: default; top: 0;
user-select: none; left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: transparent;
}
.zero-components-container {
width: 100%;
height: 100%;
}
.zero-components-container.playingAnime {
position: absolute;
z-index: 2;
}
.zero-custom-wrapper {
position: absolute;
cursor: default;
user-select: none;
}
}
} }
...@@ -142,7 +142,7 @@ export async function packImages(assets, options = {}) { ...@@ -142,7 +142,7 @@ export async function packImages(assets, options = {}) {
async function deal(assets, urls, getSheetUrlByUUID, name, blob, frames) { async function deal(assets, urls, getSheetUrlByUUID, name, blob, frames) {
//const sheetUUID = sha256(urls.sort().join()).toString(); //const sheetUUID = sha256(urls.sort().join()).toString();
const sheetUUID = sha256(Object.keys(frames).sort().join()).toString(); const sheetUUID = sha256(urls.sort().join() + Object.keys(frames).sort().join()).toString();
let url; let url;
if (getSheetUrlByUUID) { if (getSheetUrlByUUID) {
......
...@@ -208,7 +208,7 @@ ...@@ -208,7 +208,7 @@
localStorage.panesConfig = JSON.stringify(this.panesConfig); localStorage.panesConfig = JSON.stringify(this.panesConfig);
}, },
async saveProject(closeLoading, data) { async saveProject(closeLoading, data) {
let remark, cancel; let remark, cancel;
await this.$prompt(this.$t('Input version remark'), this.$t('Alert'), { await this.$prompt(this.$t('Input version remark'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'), confirmButtonText: this.$t('Confirm'),
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
cancelButtonText: i18n.t('Cancel'), cancelButtonText: i18n.t('Cancel'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$refs.projectConflictResolveDialog.show(resp.remoteData, resp.localData); this.$refs.projectConflictResolveDialog.show(resp.remoteData, resp.localData);
}).catch((e) => { }).catch((e) => {
this.$loading({}).close(); this.$loading({}).close();
...@@ -389,7 +389,11 @@ ...@@ -389,7 +389,11 @@
previewUrl.hash = '#/preview/' + projectID; previewUrl.hash = '#/preview/' + projectID;
setTimeout(() => { setTimeout(() => {
window.open(previewUrl.href, 'blank'); if(this.previewWindow && this.previewWindow.reloadPreview && this.previewWindow.reloadPreview()){
this.previewWindow.reloadPreview();
}else{
this.previewWindow = open(previewUrl.href, 'blank');
}
}, 300); }, 300);
}, },
showMissingPackages(missingPackages) { showMissingPackages(missingPackages) {
...@@ -464,4 +468,4 @@ ...@@ -464,4 +468,4 @@
</script> </script>
<style lang="scss"> <style lang="scss">
</style> </style>
\ No newline at end of file
<template> <template>
<pane icon="el-icon-s-open" class="pane-playground" :title="$t('panes.Playground')"> <pane icon="el-icon-s-open" :title="$t('panes.Playground')">
<div class="pane-playground">
<div class="draw-body"> <div class="playground-ctrl">
<div class="playground-con">
<!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> --> <!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> -->
<el-form :inline="true" class="filter-bar" style="padding:3px 6px;" size="mini" @submit.native.prevent>
<el-form :inline="true" class="filter-bar" style="padding:10px 10px;" size="mini" @submit.native.prevent>
<!-- <el-form-item> <!-- <el-form-item>
<el-checkbox <el-checkbox
v-model="overFlowState" v-model="overFlowState"
...@@ -21,182 +17,163 @@ ...@@ -21,182 +17,163 @@
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<span class="stage-set-label">舞台宽度(只读):</span> <span class="stage-set-label">宽度:</span>
<el-input class="el-input el-input--mini" v-model="designWidth" style="width:60px" readonly=""/> <el-input class="el-input el-input--mini" v-model="designWidth" style="width:50px" readonly=""/>
<span class="stage-set-label">舞台高度:</span> <span class="stage-set-label">高度:</span>
<el-input class="el-input el-input--mini" v-model="designHeight" style="width:60px"/> <el-input class="el-input el-input--mini" v-model="designHeight" style="width:50px"/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<span class="stage-set-label">舞台缩放:</span> <span class="stage-set-label">缩放:</span>
<el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button> <el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button>
<el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/> <el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/>
<el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button> <el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="draw-body">
<div class="zero-playground-body-center" :style="playgroundStyle"> <div class="zero-playground-body-center" :style="playgroundStyle">
<!-- <div class="zero-playground-draw-panel"> --> <!-- <div class="zero-playground-draw-panel"> -->
<draw-canvas-panel></draw-canvas-panel> <draw-canvas-panel></draw-canvas-panel>
<!-- </div> --> <!-- </div> -->
</div>
</div> </div>
</div> </div>
</pane> </pane>
</template> </template>
<script> <script>
import Pane from '../../components/Pane'; import Pane from '../../components/Pane';
import DrawPanel from './components/drawPanel'; import DrawPanel from './components/drawPanel';
import DrawCanvasPanel from './components/drawCanvasPanel'; import DrawCanvasPanel from './components/drawCanvasPanel';
import events from "@/global-events.js" import events from "@/global-events.js"
export default { export default {
name: 'Playground', name: 'Playground',
components: { Pane, DrawPanel,DrawCanvasPanel}, components: {Pane, DrawPanel, DrawCanvasPanel},
props: { props: {},
}, data() {
return {
data () { zoom: 0.5,
return { hasCtrlState: false,
zoom:0.5, overFlowState: false,
hasCtrlState:false, autoSelectState: true,
overFlowState:false, designWidth: 750,
autoSelectState:true, designHeight: 1624
designWidth:750, }
designHeight:1624 },
} methods: {
},
methods: { mouseWheel(e) {
if (!this.hasCtrlState) {
mouseWheel(e){ return;
if(!this.hasCtrlState){ }
return; if (e.deltaY > 0) {
} this.setZoom(false)
if(e.deltaY>0){ } else if (e.deltaY < 0) {
this.setZoom(false) this.setZoom(true)
}else if(e.deltaY<0){ }
this.setZoom(true) //console.log(this.zoom)
} },
//console.log(this.zoom) setZoom(state) {
}, if (state) {
setZoom(state){ if (this.zoom >= 1.4) {
if(state){ this.zoom = 1.4
if(this.zoom>=1.4){ } else {
this.zoom=1.4 this.zoom += 0.05
}else{ }
this.zoom+=0.05 } else {
if (this.zoom <= 0.2) {
this.zoom = 0.2
} else {
this.zoom -= 0.05
}
}
// this.zoom=this.zoom.toFixed(2)
events.$emit('setPlaygroundZoom', {zoom: this.zoom});
},
keyDo(state) {
//console.log(state)
this.hasCtrlState = state;
},
overFlowCon() {
}
},
computed: {
playgroundStyle() {
//this.zoom=0.5;
let style = {
zoom: `${this.zoom}`,
width: `${this.designWidth}px`,
height: `${this.designHeight}px`
}
if (this.overFlowState) {
style.overflow = "hidden"
} else {
style.overflow = "initial"
}
// console.log(1213,style)
return style
},
},
created() {
//alert()
this.zoom = 0.5;
events.$emit('autoSelectState', this.autoSelectState)
if (localStorage.designHeight) {
this.designHeight = parseInt(localStorage.designHeight)
} }
}else{
if(this.zoom<=0.2){ if (localStorage.designWidth) {
this.zoom=0.2 this.designWidth = parseInt(localStorage.designWidth)
}else{ }
this.zoom-=0.05
events.$emit('designWidth', this.designWidth);
events.$emit('designHeight', this.designHeight);
document.body.addEventListener('mousewheel', (e) => {
this.mouseWheel(e)
}, false)
document.onkeydown = (e) => {
let key = window.event.keyCode;
if (key == 18) {
this.keyDo(true);
}
};
document.onkeyup = (e) => {
let key = window.event.keyCode;
if (key == 18) {
this.keyDo(false);
}
};
},
mounted() {
events.$emit('setPlaygroundZoom', {zoom: this.zoom});
//console.log(123)
},
watch: {
autoSelectState() {
events.$emit('autoSelectState', this.autoSelectState);
},
designWidth() {
localStorage.designWidth = this.designWidth
events.$emit('designWidth', this.designWidth);
},
designHeight() {
localStorage.designHeight = this.designHeight
events.$emit('designHeight', this.designHeight);
} }
} },
// this.zoom=this.zoom.toFixed(2) };
events.$emit('setPlaygroundZoom', {zoom:this.zoom});
},
keyDo(state){
//console.log(state)
this.hasCtrlState=state;
},
overFlowCon(){}
},
computed: {
playgroundStyle(){
//this.zoom=0.5;
let style={
zoom:`${this.zoom}`,
width:`${this.designWidth}px`,
height:`${this.designHeight}px`
}
if(this.overFlowState){
style.overflow="hidden"
}else{
style.overflow="initial"
}
// console.log(1213,style)
return style
},
},
created(){
//alert()
this.zoom=0.5;
events.$emit('autoSelectState', this.autoSelectState)
if(localStorage.designHeight){
this.designHeight=parseInt(localStorage.designHeight)
}
if(localStorage.designWidth){
this.designWidth=parseInt(localStorage.designWidth)
}
events.$emit('designWidth', this.designWidth);
events.$emit('designHeight', this.designHeight);
document.body.addEventListener('mousewheel',(e)=>{
this.mouseWheel(e)
},false)
document.onkeydown = (e)=>{
let key = window.event.keyCode;
if (key == 18) {
this.keyDo(true);
}
};
document.onkeyup = (e)=>{
let key = window.event.keyCode;
if (key == 18) {
this.keyDo(false);
}
};
},
mounted(){
events.$emit('setPlaygroundZoom', {zoom:this.zoom});
//console.log(123)
},
watch: {
autoSelectState() {
events.$emit('autoSelectState', this.autoSelectState);
},
designWidth(){
localStorage.designWidth=this.designWidth
events.$emit('designWidth', this.designWidth);
},
designHeight(){
localStorage.designHeight= this.designHeight
events.$emit('designHeight', this.designHeight);
}
},
};
</script> </script>
<style scoped>
</style>
<style lang="scss"> <style lang="scss">
.pane-playground{
</style>
}
.draw-body{
width:100%;
height: 100%;
overflow: auto;
}
.playground-con{
width: 100%;
height: 50px;
}
.stage-set-label{
color: #606266;
white-space: nowrap;
font-weight: 500;
padding-left:10px ;
}
</style>
\ No newline at end of file
...@@ -22,6 +22,10 @@ ...@@ -22,6 +22,10 @@
computed: { computed: {
transPath() { transPath() {
const {prev, next, outputType, outputIndex} = this.data; const {prev, next, outputType, outputIndex} = this.data;
let t = prev.design.output[outputType];
if(!t){
debugger
}
const from = prev.design.output[outputType][outputIndex]; const from = prev.design.output[outputType][outputIndex];
const to = next.design.input['default'][0]; const to = next.design.input['default'][0];
const fromPos = { const fromPos = {
......
...@@ -155,4 +155,4 @@ ...@@ -155,4 +155,4 @@
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
...@@ -38,6 +38,9 @@ ...@@ -38,6 +38,9 @@
this.ts = localStorage.getItem('preview-ts'); this.ts = localStorage.getItem('preview-ts');
} }
window.reloadPreview = ()=>{
this.reload();
};
document.addEventListener("visibilitychange", this.onVisibilityChange); document.addEventListener("visibilitychange", this.onVisibilityChange);
await db.open(); await db.open();
...@@ -65,7 +68,7 @@ ...@@ -65,7 +68,7 @@
setTimeout(() => { setTimeout(() => {
this.flag = true; this.flag = true;
this.buildPage(); this.buildPage();
}, 300); }, 500);
}, },
onCommand(command) { onCommand(command) {
switch (command) { switch (command) {
...@@ -156,4 +159,4 @@ ...@@ -156,4 +159,4 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment