Skip to content

Z
zeroing-editor
Commit b5048aee authored by rockyl's avatar rockyl
Browse files
Options

init

parent 659c4e39
Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 239 deletions
public/index.html
View file @ b5048aee
......@@ -9,7 +9,7 @@
<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="//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>
</head>
<body>
......
src/config.js
View file @ b5048aee
......@@ -6,8 +6,7 @@ export let API_HOST;
if (process.env.NODE_ENV === 'development') {
//API_HOST = '//10.10.95.74:7777';
//API_HOST = '//192.168.1.16:7777';
API_HOST = '//0.0.0.0:3000';
//API_HOST = '//192.168.0.105:7777';
API_HOST = '//10.10.92.233:3000';
//API_HOST = '//localhost:8080';
//API_HOST = window.__data.apiHost;
//API_HOST = 'http://beacon.duiba.com.cn';
......
src/themes/light/playground.scss
View file @ b5048aee
.zero-playground-body-center{
position: relative;
width: 750px;
height: 1624px;
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;
.pane-playground {
flex: 1;
display: flex;
flex-direction: column;
&::-webkit-scrollbar {
display: none;
}
.playground-ctrl {
width: 100%;
border-bottom: 1px solid $--border-color-base;
.active {
border: 2px dashed rgb(20, 100, 206);
.stage-set-label {
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 {
position: absolute;
top: 0;
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;
}
.draw-body {
width: 100%;
flex: 1;
overflow: auto;
padding: 5px 0;
.zero-playground-body-center{
position: relative;
width: 750px;
height: 1624px;
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 {
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 {
position: absolute;
cursor: default;
user-select: none;
.zero-draw-panel-body {
position: absolute;
top: 0;
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;
}
}
}
src/utils/sheet-pack.js
View file @ b5048aee
......@@ -142,7 +142,7 @@ export async function packImages(assets, options = {}) {
async function deal(assets, urls, getSheetUrlByUUID, name, blob, frames) {
//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;
if (getSheetUrlByUUID) {
......
src/views/Editor.vue
View file @ b5048aee
......@@ -208,7 +208,7 @@
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading, data) {
let remark, cancel;
await this.$prompt(this.$t('Input version remark'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
......@@ -236,7 +236,7 @@
cancelButtonText: i18n.t('Cancel'),
type: 'warning'
}).then(() => {
this.$refs.projectConflictResolveDialog.show(resp.remoteData, resp.localData);
}).catch((e) => {
this.$loading({}).close();
......@@ -389,7 +389,11 @@
previewUrl.hash = '#/preview/' + projectID;
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);
},
showMissingPackages(missingPackages) {
......@@ -464,4 +468,4 @@
</script>
<style lang="scss">
</style>
\ No newline at end of file
</style>
src/views/Editor/Playground.vue
View file @ b5048aee
<template>
<pane icon="el-icon-s-open" class="pane-playground" :title="$t('panes.Playground')">
<div class="draw-body">
<div class="playground-con">
<pane icon="el-icon-s-open" :title="$t('panes.Playground')">
<div class="pane-playground">
<div class="playground-ctrl">
<!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> -->
<el-form :inline="true" class="filter-bar" style="padding:10px 10px;" size="mini" @submit.native.prevent>
<el-form :inline="true" class="filter-bar" style="padding:3px 6px;" size="mini" @submit.native.prevent>
<!-- <el-form-item>
<el-checkbox
v-model="overFlowState"
......@@ -21,182 +17,163 @@
</el-checkbox>
</el-form-item>
<el-form-item>
<span class="stage-set-label">舞台宽度(只读):</span>
<el-input class="el-input el-input--mini" v-model="designWidth" style="width:60px" readonly=""/>
<span class="stage-set-label">舞台高度:</span>
<el-input class="el-input el-input--mini" v-model="designHeight" style="width:60px"/>
<span class="stage-set-label">宽度:</span>
<el-input class="el-input el-input--mini" v-model="designWidth" style="width:50px" readonly=""/>
<span class="stage-set-label">高度:</span>
<el-input class="el-input el-input--mini" v-model="designHeight" style="width:50px"/>
</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-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-form-item>
</el-form>
</div>
<div class="zero-playground-body-center" :style="playgroundStyle">
<!-- <div class="zero-playground-draw-panel"> -->
<draw-canvas-panel></draw-canvas-panel>
<!-- </div> -->
<div class="draw-body">
<div class="zero-playground-body-center" :style="playgroundStyle">
<!-- <div class="zero-playground-draw-panel"> -->
<draw-canvas-panel></draw-canvas-panel>
<!-- </div> -->
</div>
</div>
</div>
</pane>
</template>
<script>
import Pane from '../../components/Pane';
import DrawPanel from './components/drawPanel';
import DrawCanvasPanel from './components/drawCanvasPanel';
import events from "@/global-events.js"
export default {
name: 'Playground',
components: { Pane, DrawPanel,DrawCanvasPanel},
props: {
},
data () {
return {
zoom:0.5,
hasCtrlState:false,
overFlowState:false,
autoSelectState:true,
designWidth:750,
designHeight:1624
}
},
methods: {
mouseWheel(e){
if(!this.hasCtrlState){
return;
}
if(e.deltaY>0){
this.setZoom(false)
}else if(e.deltaY<0){
this.setZoom(true)
}
//console.log(this.zoom)
},
setZoom(state){
if(state){
if(this.zoom>=1.4){
this.zoom=1.4
}else{
this.zoom+=0.05
import Pane from '../../components/Pane';
import DrawPanel from './components/drawPanel';
import DrawCanvasPanel from './components/drawCanvasPanel';
import events from "@/global-events.js"
export default {
name: 'Playground',
components: {Pane, DrawPanel, DrawCanvasPanel},
props: {},
data() {
return {
zoom: 0.5,
hasCtrlState: false,
overFlowState: false,
autoSelectState: true,
designWidth: 750,
designHeight: 1624
}
},
methods: {
mouseWheel(e) {
if (!this.hasCtrlState) {
return;
}
if (e.deltaY > 0) {
this.setZoom(false)
} else if (e.deltaY < 0) {
this.setZoom(true)
}
//console.log(this.zoom)
},
setZoom(state) {
if (state) {
if (this.zoom >= 1.4) {
this.zoom = 1.4
} 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){
this.zoom=0.2
}else{
this.zoom-=0.05
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);
}
}
// 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>
<style scoped>
</style>
<style lang="scss">
.pane-playground{
}
.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
</style>
src/views/Editor/behavior-editor/Board/LinkLine.vue
View file @ b5048aee
......@@ -22,6 +22,10 @@
computed: {
transPath() {
const {prev, next, outputType, outputIndex} = this.data;
let t = prev.design.output[outputType];
if(!t){
debugger
}
const from = prev.design.output[outputType][outputIndex];
const to = next.design.input['default'][0];
const fromPos = {
......
src/views/Editor/dialogs/editors/CustomModuleEditor.vue
View file @ b5048aee
......@@ -155,4 +155,4 @@
<style scoped>
</style>
\ No newline at end of file
</style>
src/views/Preview.vue
View file @ b5048aee
......@@ -38,6 +38,9 @@
this.ts = localStorage.getItem('preview-ts');
}
window.reloadPreview = ()=>{
this.reload();
};
document.addEventListener("visibilitychange", this.onVisibilityChange);
await db.open();
......@@ -65,7 +68,7 @@
setTimeout(() => {
this.flag = true;
this.buildPage();
}, 300);
}, 500);
},
onCommand(command) {
switch (command) {
......@@ -156,4 +159,4 @@
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
</style>
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