Skip to content

Commit

Permalink
fix: Save Property Settings (#43)
Browse files Browse the repository at this point in the history 
Manage settings by key pass
Manage layer components independently
  • Loading branch information
@asm9677
asm9677 authored Oct 2, 2020
1 parent a3e7a50 commit 25bf779
Show file tree
Hide file tree
Showing 8 changed files with 409 additions and 328 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.vscode
50 changes: 42 additions & 8 deletions components/detailMenus/StrokeProperty.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,49 +92,83 @@ module.exports = {
return {
picker: null,
setFlag: false,
setFlag2: false,
width: 0,
stack: [],
interval: '',
layerProperty: [],
}
},
mounted(){
var self = this
EventBus.$on("changeKeypath", ({keypath}) => {
this.layerProperty = RLottieModule.layers.layerList[keypath]
this.setFlag2 = false
this.setColor(this.layerProperty)
this.setStrokeColor(this.layerProperty)
})
this.layerProperty = RLottieModule.layers.layerList[RLottieModule.originKeypath]
this.setColor(this.layerProperty)
this.setStrokeColor(this.layerProperty)
this.interval = setInterval(() => {
self.clearStack()
}, 500);
},
beforeDestroy(){
EventBus.$off("changeKeypath")
clearInterval(this.interval);
},
watch: {
picker(){
if(this.setFlag){
this.layerProperty.r = this.picker.rgba.r;
this.layerProperty.g = this.picker.rgba.g;
this.layerProperty.b = this.picker.rgba.b;
this.layerProperty.a = this.picker.rgba.a;
const r = this.picker.rgba.r / 255;
const g = this.picker.rgba.g / 255;
const b = this.picker.rgba.b / 255;
const a = this.picker.rgba.a * 100;
RLottieModule.strokeColors(RLottieModule.keypath, r, g, b, a);
RLottieModule.fillColors(RLottieModule.keypath, r, g, b, a);
this.stack.push({
'property': 'StrokeColor',
'args': [r,g,b,a]
'property': 'ShapeColor',
'args': {r,g,b,a}
})
}else{
this.setFlag = true;
}
},
width(width){
RLottieModule.strokeWidth(RLottieModule.keypath, Number(this.width));
this.stack.push({
'property': 'StrokeWidth',
'args': [Number(this.width)]
})
if(this.setFlag2){
RLottieModule.strokeWidth(RLottieModule.keypath, Number(this.width));
this.layerProperty.strokeWidth = Number(this.width);
this.stack.push({
'property': 'StrokeWidth',
'args': {'strokeWidth': Number(this.width)}
})
}else{
this.setFlag2 = true
}
}
},
methods: {
setColor({r,g,b,a,strokeWidth}) {
this.picker.rgba.r = r;
this.picker.rgba.g = g;
this.picker.rgba.b = b;
this.picker.rgba.a = a;
},
setStrokeColor({strokeWidth}) {
this.width = strokeWidth
},
closeSidebar(){
this.$emit("call-close-menu-parent");
},
Expand All @@ -144,7 +178,7 @@ module.exports = {
return
let top = this.stack.pop()
RLottieModule.history.insert(RLottieModule.keypath, top.property, top.args)
RLottieModule.layers.insert(RLottieModule.keypath, top.property, top.args)
this.stack = []
}
},
Expand Down
147 changes: 105 additions & 42 deletions components/detailMenus/TransformProperty.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,9 +205,28 @@ module.exports = {
degree: 0,
opacity: 0,
stack: [],
layerProperty: [],
anchorFlag: false,
positionFlag: false,
scaleFlag: false,
degreeFlag: false,
opacityFlag: false,
};
},
mounted(){
EventBus.$on("changeKeypath", ({keypath}) => {
this.layerProperty = RLottieModule.layers.layerList[keypath]
this.anchorFlag = false;
this.positionFlag = false;
this.scaleFlag = false;
this.degreeFlag = false;
this.opacityFlag = false;
this.setTransform(this.layerProperty)
})
this.layerProperty = RLottieModule.layers.layerList[RLottieModule.originKeypath]
this.setTransform(this.layerProperty)
var self = this
this.interval = setInterval(() => {
self.clearStack()
Expand All @@ -219,71 +238,115 @@ module.exports = {
watch: {
anchor:{
deep: true,
handler(){
RLottieModule.trAnchor(RLottieModule.keypath,Number(this.anchor.x),Number(this.anchor.y))
this.stack.push({
'property': 'TrAnchor',
'args': [Number(this.anchor.x),Number(this.anchor.y)]
})
handler(){
if(this.anchorFlag){
this.layerProperty.anchorX = this.anchor.x
this.layerProperty.anchorY = this.anchor.y
RLottieModule.trAnchor(RLottieModule.keypath,Number(this.anchor.x),Number(this.anchor.y))
this.stack.push({
'property': 'TrAnchor',
'args': {anchorX: Number(this.anchor.x),anchorY: Number(this.anchor.y)}
})
}
else{
this.anchorFlag = true;
}
}
},
position: {
deep: true,
handler(){
RLottieModule.trPosition(RLottieModule.keypath,Number(this.position.x),Number(this.position.y))
this.stack.push({
'property': 'TrPosition',
'args': [Number(this.position.x),Number(this.position.y)]
})
if(this.positionFlag){
this.layerProperty.positionX = this.position.x
this.layerProperty.positionY = this.position.y
RLottieModule.trPosition(RLottieModule.keypath,Number(this.position.x),Number(this.position.y))
this.stack.push({
'property': 'TrPosition',
'args': {positionX: Number(this.position.x), positionY: Number(this.position.y)}
})
}
else {
this.positionFlag = true;
}
}
},
scale: {
deep: true,
handler(){
if(Number(this.scale.w)>=1000) this.scale.w = 1000;
else if(Number(this.scale.w)<=0) this.scale.w = 0;
if(Number(this.scale.h)>=1000) this.scale.h = 1000;
else if(Number(this.scale.h)<=0) this.scale.h = 0;
if(this.scaleFlag){
if(Number(this.scale.w)>=1000) this.scale.w = 1000;
else if(Number(this.scale.w)<=0) this.scale.w = 0;
if(Number(this.scale.h)>=1000) this.scale.h = 1000;
else if(Number(this.scale.h)<=0) this.scale.h = 0;
RLottieModule.trScale(RLottieModule.keypath,Number(this.scale.w),Number(this.scale.h))
this.stack.push({
'property': 'TrScale',
'args': [Number(this.scale.w),Number(this.scale.h)]
})
this.layerProperty.scaleWidth = this.scale.w
this.layerProperty.scaleHeight = this.scale.h
RLottieModule.trScale(RLottieModule.keypath,Number(this.scale.w),Number(this.scale.h))
this.stack.push({
'property': 'TrScale',
'args': {scaleWidth: Number(this.scale.w),scaleHeight: Number(this.scale.h)}
})
}
else {
this.scaleFlag = true;
}
}
},
degree: function (val) {
RLottieModule.trRotation(RLottieModule.keypath,Number(this.degree))
this.stack.push({
'property': 'TrRotation',
'args': [Number(this.degree)]
})
if(this.degreeFlag){
this.layerProperty.rotation = this.degree
RLottieModule.trRotation(RLottieModule.keypath,Number(this.degree))
this.stack.push({
'property': 'TrRotation',
'args': {rotation: Number(this.degree)}
})
}
else{
this.degreeFlag = true;
}
},
opacity: function (val) {
RLottieModule.trOpacity(RLottieModule.keypath,Number(this.opacity))
this.stack.push({
'property': 'TrOpacity',
'args': [Number(this.opacity)]
})
if(this.opacityFlag){
this.layerProperty.opacity = this.opacity
RLottieModule.trOpacity(RLottieModule.keypath,Number(this.opacity))
this.stack.push({
'property': 'TrOpacity',
'args': {opacity: Number(this.opacity)}
})
}
else {
this.opacityFlag = true;
}
},
},
computed: {
},
methods: {
closeSidebar(){
this.$emit("call-close-menu-parent");
},
clearStack() {
let len = this.stack.length;
if(!len)
return
let top = this.stack.pop()
RLottieModule.history.insert(RLottieModule.keypath, top.property, top.args)
this.stack = []
}
setTransform({strokeWidth,anchorX,anchorY,positionX,positionY,scaleWidth,scaleHeight,rotation,opacity}) {
this.anchor.x = anchorX
this.anchor.y = anchorY
this.position.x = positionX
this.position.y = positionY
this.scale.w = scaleWidth
this.scale.h = scaleHeight
this.degree = rotation
this.opacity = opacity
},
closeSidebar(){
this.$emit("call-close-menu-parent");
},
clearStack() {
let len = this.stack.length;
if(!len)
return
let top = this.stack.pop()
RLottieModule.layers.insert(RLottieModule.keypath, top.property, top.args)
this.stack = []
}
},
}
</script>

Expand Down
0 components/detailMenus/ShapeProperty.vue → components/detailMenus/~ShapeProperty.vue
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions components/loading-bar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,10 +323,10 @@ module.exports = {
this.isNext = e.isNext;
},
movePrev() {
RLottieModule.history.movePrev();
RLottieModule.layers.movePrev();
},
moveNext() {
RLottieModule.history.moveNext();
RLottieModule.layers.moveNext();
},
changeCanvasBorderColor(){
if (!this.borderOn){
Expand All @@ -337,7 +337,7 @@ module.exports = {
}
},
exportJson() {
RLottieModule.export.exportLayers(RLottieModule.history);
RLottieModule.export.exportLayers(RLottieModule.layers);
}
},
};
Expand Down
18 changes: 10 additions & 8 deletions components/right-bar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ module.exports = {
},
watch: {
isSelectAll() {
RLottieModule.isSelectAll = this.isSelectAll
RLottieModule.keypath = this.isSelectAll ? (this.keypath ? this.keypath + '.**' : '**') : (this.keypath ? this.keypath : '');
}
},
Expand All @@ -106,7 +107,6 @@ module.exports = {
EventBus.$on('initLayers', function(data) {
setLayers(data.layers)
// console.dir(self.$refs.test)
});
// Shortcut key function binding
document.addEventListener('keydown', function(e){
Expand All @@ -118,19 +118,21 @@ module.exports = {
},
methods: {
setLayers(layers) {
this.layers = [layers];
this.layers = layers;
},
changeFocus(e){
this.keypath = e[0]
RLottieModule.keypath = this.isSelectAll ? (this.keypath ? this.keypath + '.**' : '**') : (this.keypath ? this.keypath : '');
this.keypath = e[0] ? e[0] : '';
RLottieModule.originKeypath = this.keypath;
RLottieModule.keypath = this.isSelectAll ? (this.keypath ? this.keypath + '.**' : '**') : this.keypath;
EventBus.$emit('changeKeypath', {'keypath': this.keypath});
if(!e[0]) {
RLottieModule.reload(RLottieModule.history.originJson);
RLottieModule.history.reload()
RLottieModule.layers.reload()
RLottieModule.layers.highlighting('**')
return;
}
RLottieModule.history.highlighting((this.keypath ? this.keypath + '.**' : '**'))
RLottieModule.layers.highlighting((this.keypath ? this.keypath + '.**' : '**'))
},
inputKeypath(e) {
Expand Down
Loading

0 comments on commit 25bf779

Please sign in to comment.