Skip to content

Z
zeroing-editor
Commit ef24bbd3 authored by 任建锋's avatar 任建锋
Browse files
Options

--

parent bd0e0b80
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 21 deletions
public/index.html
View file @ ef24bbd3
......@@ -8,6 +8,8 @@
<title>烽火台</title>
<script src="//yun.duiba.com.cn/js-libs/psd.js/3.2.0/psd.min.js"></script>
<script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.50767b1fe652a3daf7f557e5cfb9eaa6090fc805.js"></script>
</head>
<body>
<noscript>
......
src/views/Editor/Playground.vue
View file @ ef24bbd3
......@@ -52,8 +52,6 @@ export default {
},
methods: {
mouseWheel(e){
console.log(e)
console.log(this.hasCtrlState)
if(!this.hasCtrlState){
return;
}
......@@ -63,7 +61,6 @@ export default {
this.setZoom(true)
}
console.log(this.zoom)
// this.$set(this.zoom, this.zoomj)
},
setZoom(state){
if(state){
......
src/views/Editor/components/RuntimeLayer.vue 0 → 100644
View file @ ef24bbd3
<template>
<div class="wrapper" :style="wrapperStyle">
<div ref="runtimeLayer" id="runtimeLayer" class="runtime-layer" style="line-height:0;font-size:0"></div>
</div>
</template>
<script>
const engine = window.engine;
export default {
name: "RuntimeLayer",
props: {
designWidth: {
type: Number,
default: 375,
},
designHeight: {
type: Number,
default: 667,
},
assetResolver: {
type: Function,
},
},
data() {
return {}
},
mounted() {
this.$nextTick(this.launch);
},
computed: {
wrapperStyle() {
return {
width: this.designWidth + 'px',
height: this.designHeight + 'px',
}
}
},
watch: {
designWidth() {
this.resize();
},
designHeight() {
this.resize();
},
},
methods: {
launch() {
engine.launchWithConfig({
options: {
containerId: 'runtimeLayer',
entrySceneView: 'entry',
editorMode: true,
assetResolver: this.assetResolver,
frameRate: 10,
},
}, null, () => {
this.onLaunched();
});
},
onLaunched() {
//engine.editorStage.stage.addEventListener('onMouseClick', this.onStageClick, this);
this.$emit('launched');
},
onStageClick(e) {
let node = e.currentTarget;
let view = this.getNode('', true);
this.$emit('select-node', node.getIndexPath(view));
},
resize() {
this.$nextTick(() => {
engine.editorStage.resizeStage();
});
},
showView(viewConfig) {
engine.editorStage.showView(viewConfig);
},
getNode(nodePath, origin = false) {
return engine.editorStage.getNode(nodePath, origin);
},
modifyProps(nodePath, props, callback) {
let result = engine.editorStage.modifyProps(nodePath, props);
if (result) {
setTimeout(callback, 100);
}
return result;
},
getNodePathWithPos(pos) {
let node = engine.editorStage.getNodeWithPos(pos);
let view = this.getNode('', true);
return node.getIndexPath(view);
},
}
}
</script>
<style scoped lang="scss">
.runtime-layer {
background-color: lightgray;
//border: 1px solid lightgray;
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/Editor/components/SInput.vue 0 → 100644
View file @ ef24bbd3
<template>
<div class="wrapper">
<span v-if="label">{{label}}: </span>
<input v-model="editValue" @change="onChange"></input>
</div>
</template>
<script>
export default {
name: "SInput",
props: {
label: String,
value: String | Number,
type: {
type: String,
default: 'string',
}
},
data() {
return {
editValue: this.value,
}
},
watch: {
value(v) {
this.editValue = v;
}
},
methods: {
onChange() {
let v = this.editValue;
if(this.type === 'number'){
v = parseInt(v);
}
this.$emit('input', v);
}
}
}
</script>
<style scoped>
.wrapper{
margin-right: 5px;
display: flex;
align-items: center;
}
</style>
\ No newline at end of file
src/views/Editor/components/drawCanvasPanel.vue
View file @ ef24bbd3
......@@ -3,30 +3,113 @@
<div class="zero-draw-panel-container" >
<div class="zero-components-container" >
<views-canvas-tree :views="views"></views-canvas-tree>
<div class="playground-wrapper">
<runtime-layer ref="runtimeLayer"
:design-width="parseInt(options.designWidth)"
:design-height="parseInt(options.designHeight)"
:assetResolver="url=>assetResolver(url)"
@launched="onRuntimeLayerLaunched"
@select-node="onSelectNode"
/>
<div class="touch-layer" @click="onClickTouchLayer"></div>
</div>
</div>
</div>
</template>
<script>
import events from "@/global-events.js"
import { mapGetters } from 'vuex';
import viewsCanvasTree from './viewsCanvasTree';
import viewsCanvasTree from './viewsCanvasTree';
import { mapState, mapGetters } from 'vuex';
import RuntimeLayer from "./RuntimeLayer";
import SInput from "./SInput";
export default {
components: { viewsCanvasTree },
methods: {
moveEdit(e,type){
events.$emit('setMoveEdit', {e,type});
export default {
data() {
return {
zoom:0.5,
options: {
designWidth: 750,
designHeight: 1624,
},
nodePath: '',
targetNode: null,
props: {
x: {},
y: {},
width: {},
height: {},
left: {},
top: {},
right: {},
bottom: {},
horizonCenter: {},
verticalCenter: {},
source: {type: 'string'},
},
}
},
components: { viewsCanvasTree,SInput,
RuntimeLayer,},
methods: {
moveEdit(e,type){
events.$emit('setMoveEdit', {e,type});
},
onRuntimeLayerLaunched() {
console.log(this.views[0])
console.log(this.project)
// this.$refs.runtimeLayer.showView(viewConfig);
this.$refs.runtimeLayer.showView(this.views[0]);
},
onSelectNode(nodePath) {
if (!nodePath) {
return;
}
this.nodePath = nodePath;
},
assetResolver(uuid) {
console.log(uuid)
let asset = this.project.data.assets.find(a => a.uuid === uuid);
let url = asset ? asset.url : '';
console.log(url)
return url
},
getNode() {
this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
},
onModifyProp(key, value) {
this.$refs.runtimeLayer.modifyProps(this.nodePath, {
[key]: value,
}, () => {
this.getNode();
})
},
onClickTouchLayer(e){
const {offsetX: x, offsetY: y} = e;
console.log("sdsd",x/this.zoom,y/this.zoom)
this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom});
console.log(this.nodePath)
console.log(this.targetNode)
}
},
},
computed: {
...mapGetters(['views']),
//
},
created(){
}
};
computed: {
...mapGetters(['views']),
...mapState(['project']),
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList', 'activeComponentId']),
//
},
created(){
events.$on("setPlaygroundZoom", data => {
this.zoom=data.zoom;
});
},
watch: {
nodePath() {
this.getNode();
}
},
};
</script>
<style lang="scss">
......@@ -92,3 +175,50 @@ export default {
cursor: se-resize;
}
</style>
<style lang="scss">
* {
padding: 0;
margin: 0;
}
html, body, #app {
width: 100%;
height: 100%;
}
input {
width: 100px;
}
.operate-bar {
padding: 5px;
margin-bottom: 5px;
.line {
padding: 3px;
display: flex;
flex-wrap: wrap;
}
.line + .line {
border-top: 1px solid lightgray;
}
}
.playground-wrapper {
position: relative;
display: inline-block;
margin-left: 10px;
}
.touch-layer {
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
yarn.lock
View file @ ef24bbd3
......@@ -3125,9 +3125,9 @@ electron-to-chromium@^1.3.322:
resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.326.tgz?cache=0&sync_timestamp=1578285906184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.326.tgz#71715aca9afd328ea208a3bc4651c15b869f0d1b"
integrity sha1-cXFaypr9Mo6iCKO8RlHBW4afDRs=
element-ui@^2.4.5:
element-ui@^2.13.1:
version "2.13.1"
resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz#0cb1a45cf27aa61c601defbe192740ac5cb9df7c"
resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.13.1.tgz#0cb1a45cf27aa61c601defbe192740ac5cb9df7c"
integrity sha1-DLGkXPJ6phxgHe++GSdArFy533w=
dependencies:
async-validator "~1.8.1"
......
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