iv-3d-lib
Version:
A reusable ThreeJS library providing features for Ivee 3D Editor.
328 lines • 16.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataSourcePlugin = void 0;
const THREE = require("three");
const numeral = require("numeral");
const cfg = require("./wgl-util-cfgs");
const iv_3d_data_source_1 = require("./models/iv-3d-data-source");
const iv_3d_object_1 = require("./models/iv-3d-object");
class DataSourcePlugin {
constructor(dataSource, objHandler, demo, isPublic) {
this.dataSource = dataSource;
this.objHandler = objHandler;
this.demo = demo;
this.isPublic = isPublic;
}
init() {
}
load() {
this.loadDataSource();
}
update(time) {
}
loadDataSource() {
if (this.dataSource && this.dataSource.items) {
/*
if (!this.dataSource.urls || this.dataSource.urls.length === 0) {
this.dataSource.urls = [];
for (let i = 0; i < 3; i++) {
let dsUrl: Iv3dDataSourceUrl = new Iv3dDataSourceUrl();
let urlProp = this.objHandler.getProp(`url${i}`, this.data.dataSourceProps);
if (i === this.currentDataSourceIndex) {
dsUrl.url = this.dataSource.url;
}
else {
dsUrl.url = urlProp ? urlProp.value : '';
}
dsUrl.patternUrl = urlProp ? urlProp.value : '';
let titleProp = this.objHandler.getProp(`title${i}`, this.data.dataSourceProps);
dsUrl.title = titleProp ? titleProp.value : '';
let typeProp = this.objHandler.getProp(`type${i}`, this.data.dataSourceProps);
dsUrl.type = typeProp ? typeProp.value : '';
this.dataSource.urls.push(dsUrl);
}
}
*/
let valueFormatProp = this.objHandler.getProp('valueFormat', this.data.dataSourceProps);
this.dataSource.valueFormat = valueFormatProp ? valueFormatProp.value : '';
let dataItems = this.dataSource.items; //.filter(item => item.value > 1000);
let values = dataItems.map(item => item.value);
let minN = Math.min(...values);
minN = minN < 0 ? 2 * minN : 0;
let maxN = Math.max(...values);
maxN = maxN > 0 ? 2 * maxN : 0;
// let titleProp = this.objHandler.getProp('title', this.data.dataSourceProps);
// this.dataSource.title = titleProp ? titleProp.value : '';
// let dsTypeProp = this.objHandler.getProp('type', this.data.dataSourceProps);
let dsBackgroundColorProp = this.objHandler.getProp('textBackgroundColor', this.data.dataSourceProps);
let dsTransparentBackgroundProp = this.objHandler.getProp('transparentBackground', this.data.dataSourceProps);
if (dsTransparentBackgroundProp && dsTransparentBackgroundProp.value) {
this.dataSource.textBackgroundColor = 'transparent';
}
else {
this.dataSource.textBackgroundColor = dsBackgroundColorProp ? dsBackgroundColorProp.value : '#FFF';
}
let dsTextColorProp = this.objHandler.getProp('textColor', this.data.dataSourceProps);
this.dataSource.textColor = dsTextColorProp ? dsTextColorProp.value : '#000';
this.dataSource.panelCss = this.objHandler.getCssCfg(this.data.dataSourceProps);
let pageProp = this.objHandler.getProp('page', this.data.dataSourceProps);
if (pageProp && pageProp.value) {
this.dataSource.page = pageProp.value;
}
let pageSizeProp = this.objHandler.getProp('pageSize', this.data.dataSourceProps);
if (pageSizeProp && pageSizeProp.value) {
this.dataSource.pageSize = pageSizeProp.value;
}
// let drilldownPatternUrlProp = this.objHandler.getProp('drilldownPatternUrl', this.data.dataSourceProps);
// this.dataSource.drilldownPatternUrl = drilldownPatternUrlProp ? drilldownPatternUrlProp.value : '';
// this.dataSource.dataSourceIndex = this.currentDataSourceIndex;
// let dsType = this.dataSource.urls[this.currentDataSourceIndex] ? this.dataSource.urls[this.currentDataSourceIndex].type : Iv3dObjectType.cube;
let dsType = this.dataSource.type;
for (let dataItem of dataItems) {
switch (dsType) {
case iv_3d_object_1.Iv3dObjectType.sphere:
this.bindDataToSphere(dataItem, '', minN, maxN);
break;
case iv_3d_object_1.Iv3dObjectType.particles:
this.bindDataToParticles(dataItem, '', minN, maxN);
break;
case iv_3d_object_1.Iv3dObjectType.torus:
this.bindDataToTorus(dataItem, '', minN, maxN);
break;
case iv_3d_object_1.Iv3dObjectType.torusKnot:
this.bindDataToTorusKnot(dataItem, '', minN, maxN);
break;
case iv_3d_object_1.Iv3dObjectType.cylinder:
this.bindDataToCylinder(dataItem, '', minN, maxN);
break;
case iv_3d_object_1.Iv3dObjectType.cube:
default:
this.bindDataToCube(dataItem, '', minN, maxN);
break;
}
}
}
}
bindDataToSphere(data, key, minN, maxN) {
let label = data.label;
let value = data.value;
let obj = this.objHandler.createDefaultObject(iv_3d_object_1.Iv3dObjectType.sphere, iv_3d_object_1.Iv3dGeometryType.sphere);
obj.dataSourceItem = data;
obj.script = 'onMeshClick(mesh)';
this.data.container.children.push(obj);
let radiusProp = this.objHandler.getProp('radius', obj.geometryProps);
let v = this.scaleValue(value, minN, maxN);
radiusProp.value = v;
this.bindDataToObject(obj, data, key);
}
bindDataToCube(data, key, minN, maxN) {
let label = data.label;
let value = data.value;
let obj = this.objHandler.createDefaultObject(iv_3d_object_1.Iv3dObjectType.cube, iv_3d_object_1.Iv3dGeometryType.box);
obj.dataSourceItem = data;
obj.script = 'onMeshClick(mesh)';
this.data.container.children.push(obj);
let widthProp = this.objHandler.getProp('width', obj.geometryProps);
let heightProp = this.objHandler.getProp('height', obj.geometryProps);
let depthProp = this.objHandler.getProp('depth', obj.geometryProps);
let v = this.scaleValue(value, minN, maxN);
widthProp.value = v;
heightProp.value = v;
depthProp.value = v;
this.bindDataToObject(obj, data, key);
}
bindDataToTorus(data, key, minN, maxN) {
let label = data.label;
let value = data.value;
let obj = this.objHandler.createDefaultObject(iv_3d_object_1.Iv3dObjectType.torus, iv_3d_object_1.Iv3dGeometryType.torus);
obj.dataSourceItem = data;
obj.script = 'onMeshClick(mesh)';
this.data.container.children.push(obj);
let radiusProp = this.objHandler.getProp('radius', obj.geometryProps);
let tubeProp = this.objHandler.getProp('tube', obj.geometryProps);
let v = this.scaleValue(value, minN, maxN);
radiusProp.value = v;
tubeProp.value = v / 2;
this.bindDataToObject(obj, data, key);
}
bindDataToTorusKnot(data, key, minN, maxN) {
let label = data.label;
let value = data.value;
let obj = this.objHandler.createDefaultObject(iv_3d_object_1.Iv3dObjectType.torusKnot, iv_3d_object_1.Iv3dGeometryType.torusKnot);
obj.dataSourceItem = data;
obj.script = 'onMeshClick(mesh)';
this.data.container.children.push(obj);
let radiusProp = this.objHandler.getProp('radius', obj.geometryProps);
let tubeProp = this.objHandler.getProp('tube', obj.geometryProps);
let v = this.scaleValue(value, minN, maxN);
radiusProp.value = v;
tubeProp.value = v / 4;
this.bindDataToObject(obj, data, key);
}
bindDataToCylinder(data, key, minN, maxN) {
let label = data.label;
let value = data.value;
let obj = this.objHandler.createDefaultObject(iv_3d_object_1.Iv3dObjectType.cylinder, iv_3d_object_1.Iv3dGeometryType.cylinder);
obj.dataSourceItem = data;
obj.script = 'onMeshClick(mesh)';
this.data.container.children.push(obj);
let radiusTopProp = this.objHandler.getProp('radiusTop', obj.geometryProps);
let radiusBottomProp = this.objHandler.getProp('radiusBottom', obj.geometryProps);
let heightProp = this.objHandler.getProp('height', obj.geometryProps);
let v = this.scaleValue(value, minN, maxN);
radiusTopProp.value = v;
radiusBottomProp.value = v;
heightProp.value = v / 2;
this.bindDataToObject(obj, data, key);
}
bindDataToParticles(data, key, minN, maxN) {
let label = data.label;
let value = data.value;
let obj = this.objHandler.createDefaultObject(iv_3d_object_1.Iv3dObjectType.particles, iv_3d_object_1.Iv3dGeometryType.particles);
obj.dataSourceItem = data;
obj.script = 'onMeshClick(mesh)';
this.data.container.children.push(obj);
let countProp = this.objHandler.getProp('count', obj.geometryProps);
let rangeProp = this.objHandler.getProp('range', obj.geometryProps);
let v = this.scaleValue(value, minN, maxN);
let stdCountProp = this.objHandler.getProp('count', this.objHandler.particleGeomProps);
let count = this.scaleValue(value, stdCountProp.min, stdCountProp.max);
countProp.value = value;
rangeProp.value = v;
this.bindDataToObject(obj, data, key);
}
scaleValue(value, minN, maxN) {
let nearProp = this.objHandler.getProp('near', this.data.cameraProps);
let farProp = this.objHandler.getProp('far', this.data.cameraProps);
let fovProp = this.objHandler.getProp('fov', this.data.cameraProps);
if (minN === maxN)
minN = 0;
let min = minN;
let max = maxN;
let a = nearProp.value / fovProp.value;
let b = farProp.value / fovProp.value;
let v = (b - a) * (value - min) / (max - min) + a;
return v;
}
interpolate(x, minN, maxN) {
return minN * (1 - x) + maxN * x;
}
uninterpolate(x, a, b) {
let factor = (b - a) != 0 ? b - a : 1 / b;
return (x - a) / factor;
}
scaleValueXYZ(x, minN, maxN) {
let nearProp = this.objHandler.getProp('near', this.data.cameraProps);
let farProp = this.objHandler.getProp('far', this.data.cameraProps);
let fixMin = 1;
let fixMax = 1000000;
let min = cfg.U.isEmpty(minN) ? fixMin : (minN < fixMin ? minN : fixMin);
let max = cfg.U.isEmpty(maxN) ? fixMax : (maxN > fixMax ? maxN : fixMax);
let a = nearProp.value;
let b = farProp.value;
return this.interpolate(this.uninterpolate(x, a, b), min, max);
}
bindDataToObject(obj, data, key) {
let label = data.label;
let value = data.value;
let useCanvasProp = this.objHandler.getProp('useCanvas', obj.materialProps);
useCanvasProp.value = false;
let textProp = this.objHandler.getProp('text', obj.materialProps);
textProp.value = value;
let colorProp = this.objHandler.getProp('color', obj.materialProps);
colorProp.value = '#' + (Math.random() * 0xFFFFFF).toString(16);
let matTypeProp = this.objHandler.getProp('type', obj.materialProps);
if (obj.meshType === iv_3d_object_1.Iv3dObjectType.particles) {
matTypeProp.value = 'PointsMaterial';
}
else {
matTypeProp.value = 'MeshPhongMaterial';
}
this.objHandler.loadObject(obj, this.w, this.mainGroup, this.demo, this.isPublic, key, (threeObj) => {
var r = Math.random();
var vx = r > 0.5 ? +1 : -1;
r = Math.random();
var vy = r < 0.5 ? +1 : -1;
r = Math.random();
var vz = r > 0.5 ? +1 : -1;
let aspectProp = this.objHandler.getProp('aspect', this.data.cameraProps);
let fovProp = this.objHandler.getProp('fov', this.data.cameraProps);
let q = aspectProp.value * fovProp.value;
var qX = 3 * q, qY = 2 * q, qZ = 3 * q;
var px = Math.random() * qX * vx, py = Math.random() * qY * vy, pz = Math.random() * qZ * vz;
threeObj.position.set(px, py, pz);
//threeObj.geometry.computeBoundingBox();
//let bbox = threeObj.geometry.boundingBox;
//let sy = py < 0 ? bbox.max.y + 10 : bbox.min.y + 10;
let bbox = new THREE.Box3().setFromObject(threeObj);
let sx = bbox.max.x;
let sy = bbox.max.y + 10;
let sz = bbox.max.z;
let spriteCfg = { color: 0x0, position: { x: px, y: sy, z: pz } };
let sValue = '';
if (this.dataSource.valueFormat === iv_3d_data_source_1.Iv3dDataSourceValueFormat.currency)
sValue = `${numeral(data.value).format('($0,0.00)')}`;
else if (this.dataSource.valueFormat === iv_3d_data_source_1.Iv3dDataSourceValueFormat.number)
sValue = `${numeral(data.value).format('(0,0.00)')}`;
else
sValue = `${data.value}`;
let label = `${data.label}: ${sValue}`;
let textWidth = label.length * 10;
let textHeight = 20;
let fontSize = 12;
let textureCfg = {
canvas: {
text: label,
width: textWidth, height: textHeight,
backgroundColor: this.dataSource.textBackgroundColor, textColor: this.dataSource.textColor, fontSize: fontSize, font: `${fontSize}pt Arial`, textAlign: 'center', textBaseline: 'middle'
}
};
let spriteTextObj = this.w.addTextSprite(spriteCfg, textureCfg, this.mainGroup);
spriteTextObj.objectId = threeObj.uuid;
threeObj.spriteId = spriteTextObj.uuid;
threeObj.spriteParentId = spriteTextObj.parent.uuid;
// sprite.scale.set(20, 10, 10);
let attemptsCount = 10;
let attempt = 0;
while (attempt < attemptsCount && this.w.checkObjectOverlap(threeObj, this.mainGroup.children)) {
px = Math.random() * qX * vx;
py = Math.random() * qY * vy;
pz = Math.random() * qZ * vz;
threeObj.position.set(px, py, pz);
//threeObj.geometry.computeBoundingBox();
//let bbox = threeObj.geometry.boundingBox;
//let sy = py < 0 ? bbox.max.y + 10 : bbox.min.y + 10;
let bbox = new THREE.Box3().setFromObject(threeObj);
let sx = bbox.max.x;
let sy = bbox.max.y + 10;
let sz = bbox.max.z;
spriteTextObj.position.set(px, sy, pz);
attempt++;
}
});
}
filterDataSourceItems(event) {
let filterText = event.filterText;
let minVal = event.minVal;
let maxVal = event.maxVal;
let filteredItems = event.filteredItems;
for (let threeObj of this.mainGroup.children) {
let obj = threeObj.userData;
if (obj) {
let item = obj.dataSourceItem;
threeObj.visible = (item && filteredItems.indexOf(item) >= 0);
let spriteParentObj = this.find3dObjectById(threeObj.spriteParentId);
if (spriteParentObj) {
spriteParentObj.visible = threeObj.visible;
spriteParentObj.children[0].visible = threeObj.visible;
}
}
}
}
find3dObjectById(uuid) {
let obj = this.mainGroup.children.find(item => item.uuid === uuid);
return obj;
}
}
exports.DataSourcePlugin = DataSourcePlugin;
//# sourceMappingURL=data-source-plugin.js.map