Add support for additional marker colors

Add option to set timeline marker time
This commit is contained in:
JannisX11 2022-06-25 16:43:11 +02:00
parent 4dd8022a88
commit 5ab2662aea
9 changed files with 99 additions and 66 deletions

View File

@ -416,17 +416,19 @@ class Keyframe {
'_',
'keyframe_uniform',
'keyframe_interpolation',
{name: 'menu.cube.color', icon: 'color_lens', children: [
{icon: 'bubble_chart', name: 'generic.unset', click: function(kf) {kf.forSelected(kf2 => {kf2.color = -1}, 'change color')}},
...markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: 'cube.color.'+color.name,
click(kf) {
kf.forSelected(function(kf2){kf2.color = i}, 'change color')
}
}}),
]},
{name: 'menu.cube.color', icon: 'color_lens', children() {
return [
{icon: 'bubble_chart', name: 'generic.unset', click: function(kf) {kf.forSelected(kf2 => {kf2.color = -1}, 'change color')}},
...markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: color.name || 'cube.color.'+color.id,
click(kf) {
kf.forSelected(function(kf2){kf2.color = i}, 'change color')
}
}})
];
}},
'copy',
'delete',
])

View File

@ -27,13 +27,32 @@ class TimelineMarker {
}
}
TimelineMarker.prototype.menu = new Menu([
...markerColors.map((color, i) => {return {
icon: 'flag',
color: color.standard,
name: 'cube.color.'+color.name,
click(marker) {marker.color = i;}
}}),
{name: 'menu.cube.color', icon: 'color_lens', children() {
return [
...markerColors.map((color, i) => {return {
icon: 'flag',
color: color.standard,
name: color.name || 'cube.color.'+color.id,
click(marker) {marker.color = i;}
}})
];
}},
{
name: 'menu.timeline_marker.set_time',
icon: 'schedule',
click(marker) {
new Dialog({
id: 'timeline_marker_set_time',
title: 'menu.timeline_marker.set_time',
form: {
time: {label: 'action.slider_keyframe_time', value: Math.roundTo(marker.time, 4), type: 'number', min: 0}
},
onConfirm(form) {
marker.time = form.time;
}
}).show();
}
},
'_',
{icon: 'delete', name: 'generic.delete', click: function(marker) {
if (Animation.selected) Animation.selected.markers.remove(marker);
@ -759,7 +778,7 @@ Interface.definePanels(() => {
},
getColor(index) {
if (index == -1 || index == undefined) return;
return markerColors[index].standard;
return markerColors[index % markerColors.length].standard;
},
getWaveformPoints(samples, size) {
let height = 23;
@ -979,7 +998,7 @@ Interface.definePanels(() => {
<div
v-for="marker in markers"
class="timeline_marker"
v-bind:style="{left: (marker.time * size) + 'px', 'border-color': markerColors[marker.color].standard}"
v-bind:style="{left: (marker.time * size) + 'px', 'border-color': markerColors[marker.color % markerColors.length].standard}"
@contextmenu.prevent="marker.showContextMenu($event)"
v-on:click="marker.callPlayhead()"
></div>

View File

@ -735,16 +735,18 @@ class Cube extends OutlinerElement {
'rename',
'convert_to_mesh',
'update_autouv',
{name: 'menu.cube.color', icon: 'color_lens', children: markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: 'cube.color.'+color.name,
click(cube) {
cube.forSelected(function(obj){
obj.setColor(i)
}, 'change color')
}
}})},
{name: 'menu.cube.color', icon: 'color_lens', children() {
return markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: color.name || 'cube.color.'+color.id,
click(cube) {
cube.forSelected(function(obj){
obj.setColor(i)
}, 'change color')
}
}});
}},
{name: 'menu.cube.texture', icon: 'collections', condition: () => !Project.single_texture, children: function() {
var arr = [
{icon: 'crop_square', name: 'menu.cube.texture.blank', click: function(cube) {

View File

@ -439,14 +439,16 @@ class Group extends OutlinerNode {
'_',
'rename',
'edit_bedrock_binding',
{name: 'menu.cube.color', icon: 'color_lens', children: markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: 'cube.color.'+color.name,
click() {
setGroupColor(i);
}
}})},
{name: 'menu.cube.color', icon: 'color_lens', children() {
return markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: color.name || 'cube.color.'+color.id,
click() {
setGroupColor(i);
}
}})
}},
{icon: 'sort_by_alpha', name: 'menu.group.sort', condition: {modes: ['edit']}, click: function(group) {group.sortContent()}},
'resolve_group',
'delete'

View File

@ -655,16 +655,18 @@ class Mesh extends OutlinerElement {
...Outliner.control_menu_group,
'_',
'rename',
{name: 'menu.cube.color', icon: 'color_lens', children: markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: 'cube.color.'+color.name,
click(cube) {
cube.forSelected(function(obj){
obj.setColor(i)
}, 'change color')
}
}})},
{name: 'menu.cube.color', icon: 'color_lens', children() {
return markerColors.map((color, i) => {return {
icon: 'bubble_chart',
color: color.standard,
name: color.name || 'cube.color.'+color.id,
click(cube) {
cube.forSelected(function(obj){
obj.setColor(i)
}, 'change color')
}
}})
}},
{name: 'menu.cube.texture', icon: 'collections', condition: () => !Project.single_texture, children: function() {
var arr = [
{icon: 'crop_square', name: 'menu.cube.texture.blank', click: function(cube) {

View File

@ -78,16 +78,16 @@ Object.defineProperty(window, 'selected', {
});
//Colors
var markerColors = [
{pastel: "#A2EBFF", standard: "#58C0FF", name: 'light_blue'},
{pastel: "#FFF899", standard: "#F4D714", name: 'yellow'},
{pastel: "#F1BB75", standard: "#EC9218", name: 'orange'},
{pastel: "#FF9B97", standard: "#FA565D", name: 'red'},
{pastel: "#C5A6E8", standard: "#B55AF8", name: 'purple'},
{pastel: "#A6C8FF", standard: "#4D89FF", name: 'blue'},
{pastel: "#7BFFA3", standard: "#00CE71", name: 'green'},
{pastel: "#BDFFA6", standard: "#AFFF62", name: 'lime'},
{pastel: "#FFA5D5", standard: "#F96BC5", name: 'pink'},
{pastel: "#E0E9FB", standard: "#C7D5F6", name: 'silver'}
{pastel: "#A2EBFF", standard: "#58C0FF", id: 'light_blue'},
{pastel: "#FFF899", standard: "#F4D714", id: 'yellow'},
{pastel: "#F1BB75", standard: "#EC9218", id: 'orange'},
{pastel: "#FF9B97", standard: "#FA565D", id: 'red'},
{pastel: "#C5A6E8", standard: "#B55AF8", id: 'purple'},
{pastel: "#A6C8FF", standard: "#4D89FF", id: 'blue'},
{pastel: "#7BFFA3", standard: "#00CE71", id: 'green'},
{pastel: "#BDFFA6", standard: "#AFFF62", id: 'lime'},
{pastel: "#FFA5D5", standard: "#F96BC5", id: 'pink'},
{pastel: "#E0E9FB", standard: "#C7D5F6", id: 'silver'}
]
class OutlinerNode {
constructor(uuid) {
@ -1024,7 +1024,7 @@ BARS.defineActions(function() {
return {
name: group.name,
icon: 'folder',
color: markerColors[group.color] && markerColors[group.color].standard,
color: markerColors[group.color % markerColors.length] && markerColors[group.color % markerColors.length].standard,
click(event) {
moveOutlinerSelectionTo(element, group, event);
element.showInOutliner();
@ -1078,7 +1078,7 @@ BARS.defineActions(function() {
'-1': 'generic.all'
}
markerColors.forEach((color, i) => {
color_options[i] = 'cube.color.' + color.name;
color_options[i] = color.name || 'cube.color.' + color.id;
})
let type_options = {
all: 'generic.all'
@ -1253,7 +1253,7 @@ Interface.definePanels(function() {
<i v-else class="outliner_opener_placeholder"></i>
<i :class="node.icon.substring(0, 2) == 'fa' ? node.icon : 'material-icons'"
:style="(outliner_colors.value && node.color >= 0) && {color: markerColors[node.color].pastel}"
:style="(outliner_colors.value && node.color >= 0) && {color: markerColors[node.color % markerColors.length].pastel}"
v-on:dblclick.stop="doubleClickIcon(node)"
>{{ node.icon.substring(0, 2) == 'fa' ? '' : node.icon }}</i>
<input type="text" class="cube_name tab_target" :class="{locked: node.locked}" v-model="node.name" disabled>` +

View File

@ -313,7 +313,8 @@ const Canvas = {
side: THREE.DoubleSide,
})
})(),
emptyMaterials: (function() {
emptyMaterials: [],
updateMarkerColorMaterials() {
var img = new Image()
img.src = 'assets/missing.png'
var tex = new THREE.Texture(img)
@ -393,8 +394,10 @@ const Canvas = {
}`
return markerColors.map(function(color, i) {
return new THREE.ShaderMaterial({
markerColors.forEach(function(color, i) {
if (Canvas.emptyMaterials[i]) return;
Canvas.emptyMaterials[i] = new THREE.ShaderMaterial({
uniforms: {
map: {type: 't', value: tex},
SHADE: {type: 'bool', value: settings.shading.value},
@ -406,7 +409,7 @@ const Canvas = {
side: THREE.DoubleSide,
})
})
})(),
},
transparentMaterial: new THREE.MeshBasicMaterial({visible: false, name: 'invisible'}),
gridMaterial: new THREE.LineBasicMaterial({color: gizmo_colors.grid}),
buildGrid() {
@ -562,6 +565,7 @@ const Canvas = {
temp_vectors: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()],
setup() {
Canvas.updateMarkerColorMaterials();
//Light
Sun = new THREE.AmbientLight( 0xffffff );

File diff suppressed because one or more lines are too long

View File

@ -1528,6 +1528,8 @@
"menu.keyframe.quaternion": "Quaternion",
"menu.timeline_marker.set_time": "Set Time...",
"menu.mobile_keyboard.disable_all": "Disable All",
"menu.paste.face": "UV Face",