cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
477 lines (476 loc) • 14.5 kB
JavaScript
import "../../../echarts/lib/echarts.mjs";
import Renderer from "../../../claygl/src/Renderer.mjs";
import RayPicking from "../../../claygl/src/picking/RayPicking.mjs";
import Texture from "../../../claygl/src/Texture.mjs";
import graphicGL from "../util/graphicGL.mjs";
import notifier from "../../../claygl/src/core/mixin/notifier.mjs";
import requestAnimationFrame from "../../../zrender/lib/animation/requestAnimationFrame.mjs";
import Rect from "../../../zrender/lib/graphic/shape/Rect.mjs";
import { getECData } from "../../../echarts/lib/util/innerStore.mjs";
var LayerGL = function(id, zr) {
this.id = id;
this.zr = zr;
try {
this.renderer = new Renderer({
clearBit: 0,
devicePixelRatio: zr.painter.dpr,
preserveDrawingBuffer: true,
premultipliedAlpha: true
});
this.renderer.resize(zr.painter.getWidth(), zr.painter.getHeight());
} catch (e) {
this.renderer = null;
this.dom = document.createElement("div");
this.dom.style.cssText = "position:absolute; left: 0; top: 0; right: 0; bottom: 0;";
this.dom.className = "ecgl-nowebgl";
this.dom.innerHTML = "Sorry, your browser does not support WebGL";
console.error(e);
return;
}
this.onglobalout = this.onglobalout.bind(this);
zr.on("globalout", this.onglobalout);
this.dom = this.renderer.canvas;
var style = this.dom.style;
style.position = "absolute";
style.left = "0";
style.top = "0";
this.views = [];
this._picking = new RayPicking({
renderer: this.renderer
});
this._viewsToDispose = [];
this._accumulatingId = 0;
this._zrEventProxy = new Rect({
shape: {
x: -1,
y: -1,
width: 2,
height: 2
},
__isGLToZRProxy: true
});
this._backgroundColor = null;
this._disposed = false;
};
LayerGL.prototype.setUnpainted = function() {
};
LayerGL.prototype.addView = function(view) {
if (view.layer === this) {
return;
}
var idx = this._viewsToDispose.indexOf(view);
if (idx >= 0) {
this._viewsToDispose.splice(idx, 1);
}
this.views.push(view);
view.layer = this;
var zr = this.zr;
view.scene.traverse(function(node) {
node.__zr = zr;
if (node.addAnimatorsToZr) {
node.addAnimatorsToZr(zr);
}
});
};
function removeFromZr(node) {
var zr = node.__zr;
node.__zr = null;
if (zr && node.removeAnimatorsFromZr) {
node.removeAnimatorsFromZr(zr);
}
}
LayerGL.prototype.removeView = function(view) {
if (view.layer !== this) {
return;
}
var idx = this.views.indexOf(view);
if (idx >= 0) {
this.views.splice(idx, 1);
view.scene.traverse(removeFromZr, this);
view.layer = null;
this._viewsToDispose.push(view);
}
};
LayerGL.prototype.removeViewsAll = function() {
this.views.forEach(function(view) {
view.scene.traverse(removeFromZr, this);
view.layer = null;
this._viewsToDispose.push(view);
}, this);
this.views.length = 0;
};
LayerGL.prototype.resize = function(width, height) {
var renderer = this.renderer;
renderer.resize(width, height);
};
LayerGL.prototype.clear = function() {
var gl = this.renderer.gl;
var clearColor = this._backgroundColor || [0, 0, 0, 0];
gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
gl.depthMask(true);
gl.colorMask(true, true, true, true);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
};
LayerGL.prototype.clearDepth = function() {
var gl = this.renderer.gl;
gl.clear(gl.DEPTH_BUFFER_BIT);
};
LayerGL.prototype.clearColor = function() {
var gl = this.renderer.gl;
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
};
LayerGL.prototype.needsRefresh = function() {
this.zr.refresh();
};
LayerGL.prototype.refresh = function(bgColor) {
this._backgroundColor = bgColor ? graphicGL.parseColor(bgColor) : [0, 0, 0, 0];
this.renderer.clearColor = this._backgroundColor;
for (var i = 0; i < this.views.length; i++) {
this.views[i].prepareRender(this.renderer);
}
this._doRender(false);
this._trackAndClean();
for (var i = 0; i < this._viewsToDispose.length; i++) {
this._viewsToDispose[i].dispose(this.renderer);
}
this._viewsToDispose.length = 0;
this._startAccumulating();
};
LayerGL.prototype.renderToCanvas = function(ctx) {
this._startAccumulating(true);
ctx.drawImage(this.dom, 0, 0, ctx.canvas.width, ctx.canvas.height);
};
LayerGL.prototype._doRender = function(accumulating) {
this.clear();
this.renderer.saveViewport();
for (var i = 0; i < this.views.length; i++) {
this.views[i].render(this.renderer, accumulating);
}
this.renderer.restoreViewport();
};
LayerGL.prototype._stopAccumulating = function() {
this._accumulatingId = 0;
clearTimeout(this._accumulatingTimeout);
};
var accumulatingId = 1;
LayerGL.prototype._startAccumulating = function(immediate) {
var self = this;
this._stopAccumulating();
var needsAccumulate = false;
for (var i = 0; i < this.views.length; i++) {
needsAccumulate = this.views[i].needsAccumulate() || needsAccumulate;
}
if (!needsAccumulate) {
return;
}
function accumulate(id) {
if (!self._accumulatingId || id !== self._accumulatingId) {
return;
}
var isFinished = true;
for (var i2 = 0; i2 < self.views.length; i2++) {
isFinished = self.views[i2].isAccumulateFinished() && needsAccumulate;
}
if (!isFinished) {
self._doRender(true);
if (immediate) {
accumulate(id);
} else {
requestAnimationFrame(function() {
accumulate(id);
});
}
}
}
this._accumulatingId = accumulatingId++;
if (immediate) {
accumulate(self._accumulatingId);
} else {
this._accumulatingTimeout = setTimeout(function() {
accumulate(self._accumulatingId);
}, 50);
}
};
LayerGL.prototype._trackAndClean = function() {
var textureList = [];
var geometriesList = [];
if (this._textureList) {
markUnused(this._textureList);
markUnused(this._geometriesList);
}
for (var i = 0; i < this.views.length; i++) {
collectResources(this.views[i].scene, textureList, geometriesList);
}
if (this._textureList) {
checkAndDispose(this.renderer, this._textureList);
checkAndDispose(this.renderer, this._geometriesList);
}
this._textureList = textureList;
this._geometriesList = geometriesList;
};
function markUnused(resourceList) {
for (var i = 0; i < resourceList.length; i++) {
resourceList[i].__used__ = 0;
}
}
function checkAndDispose(renderer, resourceList) {
for (var i = 0; i < resourceList.length; i++) {
if (!resourceList[i].__used__) {
resourceList[i].dispose(renderer);
}
}
}
function updateUsed(resource, list) {
resource.__used__ = resource.__used__ || 0;
resource.__used__++;
if (resource.__used__ === 1) {
list.push(resource);
}
}
function collectResources(scene, textureResourceList, geometryResourceList) {
var prevMaterial;
var prevGeometry;
scene.traverse(function(renderable) {
if (renderable.isRenderable()) {
var geometry = renderable.geometry;
var material = renderable.material;
if (material !== prevMaterial) {
var textureUniforms = material.getTextureUniforms();
for (var u = 0; u < textureUniforms.length; u++) {
var uniformName = textureUniforms[u];
var val = material.uniforms[uniformName].value;
if (!val) {
continue;
}
if (val instanceof Texture) {
updateUsed(val, textureResourceList);
} else if (val instanceof Array) {
for (var k2 = 0; k2 < val.length; k2++) {
if (val[k2] instanceof Texture) {
updateUsed(val[k2], textureResourceList);
}
}
}
}
}
if (geometry !== prevGeometry) {
updateUsed(geometry, geometryResourceList);
}
prevMaterial = material;
prevGeometry = geometry;
}
});
for (var k = 0; k < scene.lights.length; k++) {
if (scene.lights[k].cubemap) {
updateUsed(scene.lights[k].cubemap, textureResourceList);
}
}
}
LayerGL.prototype.dispose = function() {
if (this._disposed) {
return;
}
this._stopAccumulating();
if (this._textureList) {
markUnused(this._textureList);
markUnused(this._geometriesList);
checkAndDispose(this.renderer, this._textureList);
checkAndDispose(this.renderer, this._geometriesList);
}
this.zr.off("globalout", this.onglobalout);
this._disposed = true;
};
LayerGL.prototype.onmousedown = function(e) {
if (e.target && e.target.__isGLToZRProxy) {
return;
}
e = e.event;
var obj = this.pickObject(e.offsetX, e.offsetY);
if (obj) {
this._dispatchEvent("mousedown", e, obj);
this._dispatchDataEvent("mousedown", e, obj);
}
this._downX = e.offsetX;
this._downY = e.offsetY;
};
LayerGL.prototype.onmousemove = function(e) {
if (e.target && e.target.__isGLToZRProxy) {
return;
}
e = e.event;
var obj = this.pickObject(e.offsetX, e.offsetY);
var target = obj && obj.target;
var lastHovered = this._hovered;
this._hovered = obj;
if (lastHovered && target !== lastHovered.target) {
lastHovered.relatedTarget = target;
this._dispatchEvent("mouseout", e, lastHovered);
this.zr.setCursorStyle("default");
}
this._dispatchEvent("mousemove", e, obj);
if (obj) {
this.zr.setCursorStyle("pointer");
if (!lastHovered || target !== lastHovered.target) {
this._dispatchEvent("mouseover", e, obj);
}
}
this._dispatchDataEvent("mousemove", e, obj);
};
LayerGL.prototype.onmouseup = function(e) {
if (e.target && e.target.__isGLToZRProxy) {
return;
}
e = e.event;
var obj = this.pickObject(e.offsetX, e.offsetY);
if (obj) {
this._dispatchEvent("mouseup", e, obj);
this._dispatchDataEvent("mouseup", e, obj);
}
this._upX = e.offsetX;
this._upY = e.offsetY;
};
LayerGL.prototype.onclick = LayerGL.prototype.dblclick = function(e) {
if (e.target && e.target.__isGLToZRProxy) {
return;
}
var dx = this._upX - this._downX;
var dy = this._upY - this._downY;
if (Math.sqrt(dx * dx + dy * dy) > 20) {
return;
}
e = e.event;
var obj = this.pickObject(e.offsetX, e.offsetY);
if (obj) {
this._dispatchEvent(e.type, e, obj);
this._dispatchDataEvent(e.type, e, obj);
}
var result = this._clickToSetFocusPoint(e);
if (result) {
var success = result.view.setDOFFocusOnPoint(result.distance);
if (success) {
this.zr.refresh();
}
}
};
LayerGL.prototype._clickToSetFocusPoint = function(e) {
var renderer = this.renderer;
var oldViewport = renderer.viewport;
for (var i = this.views.length - 1; i >= 0; i--) {
var viewGL = this.views[i];
if (viewGL.hasDOF() && viewGL.containPoint(e.offsetX, e.offsetY)) {
this._picking.scene = viewGL.scene;
this._picking.camera = viewGL.camera;
renderer.viewport = viewGL.viewport;
var result = this._picking.pick(e.offsetX, e.offsetY, true);
if (result) {
result.view = viewGL;
return result;
}
}
}
renderer.viewport = oldViewport;
};
LayerGL.prototype.onglobalout = function(e) {
var lastHovered = this._hovered;
if (lastHovered) {
this._dispatchEvent("mouseout", e, {
target: lastHovered.target
});
}
};
LayerGL.prototype.pickObject = function(x, y) {
var output = [];
var renderer = this.renderer;
var oldViewport = renderer.viewport;
for (var i = 0; i < this.views.length; i++) {
var viewGL = this.views[i];
if (viewGL.containPoint(x, y)) {
this._picking.scene = viewGL.scene;
this._picking.camera = viewGL.camera;
renderer.viewport = viewGL.viewport;
this._picking.pickAll(x, y, output);
}
}
renderer.viewport = oldViewport;
output.sort(function(a, b) {
return a.distance - b.distance;
});
return output[0];
};
LayerGL.prototype._dispatchEvent = function(eveName, originalEvent, newEvent) {
if (!newEvent) {
newEvent = {};
}
var current = newEvent.target;
newEvent.cancelBubble = false;
newEvent.event = originalEvent;
newEvent.type = eveName;
newEvent.offsetX = originalEvent.offsetX;
newEvent.offsetY = originalEvent.offsetY;
while (current) {
current.trigger(eveName, newEvent);
current = current.getParent();
if (newEvent.cancelBubble) {
break;
}
}
this._dispatchToView(eveName, newEvent);
};
LayerGL.prototype._dispatchDataEvent = function(eveName, originalEvent, newEvent) {
var mesh = newEvent && newEvent.target;
var dataIndex = mesh && mesh.dataIndex;
var seriesIndex = mesh && mesh.seriesIndex;
var eventData = mesh && mesh.eventData;
var elChangedInMouseMove = false;
var eventProxy = this._zrEventProxy;
eventProxy.x = originalEvent.offsetX;
eventProxy.y = originalEvent.offsetY;
eventProxy.update();
var targetInfo = {
target: eventProxy
};
const ecData = getECData(eventProxy);
if (eveName === "mousemove") {
if (dataIndex != null) {
if (dataIndex !== this._lastDataIndex) {
if (parseInt(this._lastDataIndex, 10) >= 0) {
ecData.dataIndex = this._lastDataIndex;
ecData.seriesIndex = this._lastSeriesIndex;
this.zr.handler.dispatchToElement(targetInfo, "mouseout", originalEvent);
}
elChangedInMouseMove = true;
}
} else if (eventData != null) {
if (eventData !== this._lastEventData) {
if (this._lastEventData != null) {
ecData.eventData = this._lastEventData;
this.zr.handler.dispatchToElement(targetInfo, "mouseout", originalEvent);
}
elChangedInMouseMove = true;
}
}
this._lastEventData = eventData;
this._lastDataIndex = dataIndex;
this._lastSeriesIndex = seriesIndex;
}
ecData.eventData = eventData;
ecData.dataIndex = dataIndex;
ecData.seriesIndex = seriesIndex;
if (eventData != null || parseInt(dataIndex, 10) >= 0 && parseInt(seriesIndex, 10) >= 0) {
this.zr.handler.dispatchToElement(targetInfo, eveName, originalEvent);
if (elChangedInMouseMove) {
this.zr.handler.dispatchToElement(targetInfo, "mouseover", originalEvent);
}
}
};
LayerGL.prototype._dispatchToView = function(eventName, e) {
for (var i = 0; i < this.views.length; i++) {
if (this.views[i].containPoint(e.offsetX, e.offsetY)) {
this.views[i].trigger(eventName, e);
}
}
};
Object.assign(LayerGL.prototype, notifier);
var LayerGL$1 = LayerGL;
export { LayerGL$1 as default };