tween on positions

This commit is contained in:
STEINNI
2025-09-28 18:28:17 +00:00
parent 34d93cecdb
commit 8be18e8d83
8 changed files with 106 additions and 88 deletions
@@ -9,9 +9,11 @@
"id": "aid",
"assign": {
"position.x": "coords.x",
"position.z": "coords.y"
"position.z": "coords.y",
"position.y": "coords.z"
},
"animate": true
"tween": true,
"tweenDelay": 1000
}
]
},
@@ -23,7 +25,8 @@
"assign": {
"r": "rotangle"
},
"animate": true
"tween": true,
"tweenDelay": 500
}
]
}
@@ -22,11 +22,10 @@ class DashboardsController extends EICController {
grid: true,
})
console.log('===CTRL molecule1==>', this.agentDefs.molecule1)
const m1 = ttb.buildFromJSON('agent42', this.agentDefs.molecule1)
ttb.scene.add(m1)
// setTimeout(() => {
// ttb.smoothRelMove({
// ttb.smoothMove({
// object: m1,
// dX: 5,
// dY:0,
@@ -47,6 +46,7 @@ class DashboardsController extends EICController {
// }
// })
//TODO: eventsMapping: address child by suffix in assignations
this.loadWindow(
'visualisers/SpaceView',
@@ -54,6 +54,7 @@ class DashboardsController extends EICController {
title: '3D view',
static: true,
expanded: false,
withSettings: true,
windowStyle:{
width: '800px',
height: '600px',
@@ -75,6 +76,7 @@ class DashboardsController extends EICController {
title: '2D View',
static: true,
expanded: false,
withSettings: true,
windowStyle:{
width: '600px',
height: '450px',
+6
View File
@@ -95,6 +95,7 @@ class EICController extends Controller {
<header class="cols-2 right">
<h1>${options.title || ''}</h1>
<div class="controls">
${(options.withSettings) ? '<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cog settings" title="settings"></button>' :''}
<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-copy shrink" title="shrink"></button>
<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-square-o expand" title="expand"></button>
<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cancel close" title="close"></button>
@@ -136,6 +137,11 @@ class EICController extends Controller {
content.addEventListener('expanded', this.onFocusRequest.bind(this));
content.addEventListener('shrinked', this.onFocusRequest.bind(this));
if(options.withSettings && (typeof(view.settings) == 'function')){
let settings = content.querySelector('header button.settings');
settings.addEventListener('click', view.settings.bind(view));
}
content.setAttribute('sparc-id', view._sparcId);
let parent = Controller._template.view.find('.app-workspace');
+6
View File
@@ -14,6 +14,9 @@ class EICDomContent extends View {
get expanded() { return this.el.hasAttribute('expanded'); }
//TODO: memorize size & position
/**
*
*/
@@ -28,6 +31,9 @@ class EICDomContent extends View {
this.DOMContentResized()
}
//TODO: restore to previous memorize size & position
/**
*
*/
-2
View File
@@ -271,8 +271,6 @@ class myUser extends app.LoadedClasses.User {
setPreference(path, value) {
if(app.MessageBus) {
let segments = path.split('.');
console.log('=====>',this, this.preferences)
let pointer = this.preferences;
for(let i = 0; i < segments.length - 1; i++) {
+34 -34
View File
@@ -69,60 +69,45 @@ export class Threetobus{
processBusEvent(eventType, chan, payload, userId, x){
console.log('processBusEvent====>',eventType, chan, payload, userId)
const chanObj = this._curEventsMapping.find(item => item.chan==chan)
if(!chanObj) return
console.log('processBusEvent====>chanObj', chanObj)
const eventObj = chanObj.events.find(item => item.eventName==eventType)
if(!eventObj) return
console.log('processBusEvent====>eventObj', eventObj)
for(const mapping of eventObj.mappings){
const id = this.getValueByPath(payload, mapping.id)
console.log('agent ID:', id)
if(id){
const obj3D = this.scene.getObjectByName(id)
this.assignFromConfig(payload, mapping.assign, obj3D)
this.assignFromConfig(payload, mapping, obj3D)
}
// console.log(`found ${mappings.length} mappings`)
// mappings.forEach(snapEl => {
// const newAttr = this.assignFromConfig(payload, mapping.assign)
// if(mapping.animate){
// snapEl.animate(
// newAttr,
// 400,
// mina.linear
// )
// } else {
// snapEl.attr(newAttr)
// }
// })
}
}
assignFromConfig(payload, replaceDef, obj3D) {
console.log('assignFromConfig', payload, replaceDef)
for (const [path, rule] of Object.entries(replaceDef)) {
assignFromConfig(payload, mapping, obj3D) {
const toTween = {}
for (const [path, rule] of Object.entries(mapping.assign)) {
let value
if (typeof rule === 'string') { // plain path
value= this.getValueByPath(payload, rule)
} else if((typeof(rule) == 'object') && (typeof(rule.transformer) == 'function')) { // transformer
const fnargs = (rule.arguments || []).map(arg => this.getValueByPath(payload,arg))
value = rule.transformer(...fnargs)
}
console.log('====>',path ,value)
if (value !== undefined) {
if(mapping.tween && path.startsWith('position.')){ //TODO allow other tweenables
toTween[path.substring(9)] = value
} else {
this.setProp(obj3D, path, value)
}
}
}
if(mapping.tween && (Object.keys(toTween).length>0)){
toTween.object = obj3D
toTween.delay = mapping.tweenDelay
this.smoothMove(toTween)
}
}
setProp(obj3D, path, value) { console.log('====>setProp', path, value)
setProp(obj3D, path, value) {
const parts = path.split('.')
let target = obj3D
for (let i = 0; i < parts.length - 1; i++) {
@@ -194,7 +179,7 @@ export class Threetobus{
}
buildFromJSON(id, desc){ console.log('===buildFromJSON molecule1==>', desc)
buildFromJSON(id, desc){
let obj
if(desc.type === 'Mesh') {
const geom = new THREE[desc.geometry.type](...(desc.geometry.args || []))
@@ -222,8 +207,11 @@ export class Threetobus{
return obj
}
smoothRelMove(options){
smoothMove(options){ console.log('=====>', options)
// options: object, dX, dY, dZ, delay, easing, easingMode
// Absolute: x,y,z
// Relative: dx,dy,dz
// delay: ms
// easings: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, Bounce
// easingMode: In → starts slow, accelerates towards the end.
// Out → starts fast, decelerates smoothly.
@@ -231,10 +219,22 @@ export class Threetobus{
options.easing = options.easing ? options.easing : 'Quadratic'
options.easingMode = options.easingMode ? options.easingMode : 'InOut'
let newX = parseFloat(options.x)
newX = isNaN(newX) ? options.object.position.x : newX
newX += (parseFloat(options.dx) || 0)
let newY = parseFloat(options.y)
newY = isNaN(newY) ? options.object.position.y : newY
newY += (parseFloat(options.dy) || 0)
let newZ = parseFloat(options.z)
newZ = isNaN(newZ) ? options.object.position.z : newZ
newZ += (parseFloat(options.dz) || 0)
new TWEEN.Tween(options.object.position)
.to({ x: options.object.position.x + options.dX,
y: options.object.position.y + options.dY,
z: options.object.position.z + options.dZ,
.to({ x: newX,
y: newY,
z: newZ,
}, options.delay)
.easing(TWEEN.Easing[options.easing][options.easingMode])
.start()
+1 -1
View File
@@ -92,7 +92,7 @@ class EICAppTemplate extends EICDomContent {
this.userIcon = new UserIcon(this.session.querySelector('[eicuser]'));
this.userIcon.showStatus = true;
this.userIcon.uuid = app.User.identity.uuid;
this.userIcon.fullname = app.User.identity.firstname + ' ' + app.User.identity.lastname
this.userIcon.fullname = app.User.identity.username
this.userIcon.online = app.MessageBus.connected;
app.events.channel.addEventListener('MessageBus.Connected', this.onBusConnected.bind(this))
+3
View File
@@ -27,7 +27,10 @@ class SpaceView extends EICDomContent {
}
settings(){
console.log('Settings!')
}
}