@roomle/web-sdk 3.7.0 → 3.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/{BufferGeometry-BzmfTBQt.mjs → BufferGeometry-ltw0XkYt.mjs} +7 -4
- package/lib/BufferGeometry-ltw0XkYt.mjs.map +1 -0
- package/lib/ConfiguratorKernel.js +6 -6
- package/lib/ConfiguratorKernel.wasm +0 -0
- package/lib/{GLTFExporter-CyhgWPq0.mjs → GLTFExporter-BqjC9LhS.mjs} +9 -14
- package/lib/GLTFExporter-BqjC9LhS.mjs.map +1 -0
- package/lib/{Object3D-C3wqWk6O.mjs → Object3D-BZaiqQIE.mjs} +24 -12
- package/lib/Object3D-BZaiqQIE.mjs.map +1 -0
- package/lib/{PointLightHelper-DwIXACyT.mjs → PointLightHelper-AxCe6I00.mjs} +4 -4
- package/lib/PointLightHelper-AxCe6I00.mjs.map +1 -0
- package/lib/RoomleCore.js +8 -8
- package/lib/RoomleCore.wasm +0 -0
- package/lib/RoomleToolsCore.wasm +0 -0
- package/lib/{SpotLightHelper-CfLHM7LU.mjs → SpotLightHelper-DpMerFPv.mjs} +3 -3
- package/lib/{SpotLightHelper-CfLHM7LU.mjs.map → SpotLightHelper-DpMerFPv.mjs.map} +1 -1
- package/lib/{USDZExporter-kmxcTvnQ.mjs → USDZExporter-qUD2VgwK.mjs} +2 -2
- package/lib/{USDZExporter-kmxcTvnQ.mjs.map → USDZExporter-qUD2VgwK.mjs.map} +1 -1
- package/lib/{Vector4-DUqY3Egg.mjs → Vector4-BfZH1ecw.mjs} +7 -4
- package/lib/Vector4-BfZH1ecw.mjs.map +1 -0
- package/lib/{api-X1dDTDvL.mjs → api-CbHAzwVm.mjs} +2 -2
- package/lib/{api-X1dDTDvL.mjs.map → api-CbHAzwVm.mjs.map} +1 -1
- package/lib/asset-loader.worker-A7nEeQB4.mjs.map +1 -1
- package/lib/{banana-for-scale-Bpf8RfLi.mjs → banana-for-scale-DiBCpVNM.mjs} +3 -3
- package/lib/{banana-for-scale-Bpf8RfLi.mjs.map → banana-for-scale-DiBCpVNM.mjs.map} +1 -1
- package/lib/budgeteer.sw-CQWYbQSc.mjs.map +1 -1
- package/lib/{common-utils-DMI8Yuhe.mjs → common-utils-AB4Lnet3.mjs} +2 -2
- package/lib/{common-utils-DMI8Yuhe.mjs.map → common-utils-AB4Lnet3.mjs.map} +1 -1
- package/lib/{component-dimensioning-MtS9xiY-.mjs → component-dimensioning-LUnZnpqG.mjs} +5 -5
- package/lib/{component-dimensioning-MtS9xiY-.mjs.map → component-dimensioning-LUnZnpqG.mjs.map} +1 -1
- package/lib/{component-raycast-helper-C1qWqpRH.mjs → component-raycast-helper-Bl0mWPcj.mjs} +4 -4
- package/lib/{component-raycast-helper-C1qWqpRH.mjs.map → component-raycast-helper-Bl0mWPcj.mjs.map} +1 -1
- package/lib/configurator-BmJX0gB5.mjs +2 -0
- package/lib/configurator-CP80d0HI.mjs +45 -0
- package/lib/{configurator-Cg1a9XSL.mjs.map → configurator-CP80d0HI.mjs.map} +1 -1
- package/lib/{continuous-drawing-helper-CQx5Sbns.mjs → continuous-drawing-helper-BlRy7u2t.mjs} +3 -3
- package/lib/{continuous-drawing-helper-CQx5Sbns.mjs.map → continuous-drawing-helper-BlRy7u2t.mjs.map} +1 -1
- package/lib/dimensioning-helper-5xsc6I7Y.mjs +2 -0
- package/lib/{dimensioning-helper-GPn7Z8GE.mjs → dimensioning-helper-vPhGfHd-.mjs} +3 -3
- package/lib/{dimensioning-helper-GPn7Z8GE.mjs.map → dimensioning-helper-vPhGfHd-.mjs.map} +1 -1
- package/lib/{glb-viewer-tgKOPCaI.mjs → glb-viewer-B7pA8K_w.mjs} +71 -54
- package/lib/glb-viewer-B7pA8K_w.mjs.map +1 -0
- package/lib/glb-viewer-XFEP993c.mjs +2 -0
- package/lib/{highlight-coordinator-DRHeEU-E.mjs → highlight-coordinator-DeB46jQq.mjs} +9 -3
- package/lib/highlight-coordinator-DeB46jQq.mjs.map +1 -0
- package/lib/{homag-intelligence-D5mCTWgG.mjs → homag-intelligence-f1JD0An1.mjs} +3 -3
- package/lib/homag-intelligence-f1JD0An1.mjs.map +1 -0
- package/lib/{imos-ix-poc-export-helper-BKFs_Yhm.mjs → imos-ix-poc-export-helper-Vyv-uuNs.mjs} +3 -3
- package/lib/{imos-ix-poc-export-helper-BKFs_Yhm.mjs.map → imos-ix-poc-export-helper-Vyv-uuNs.mjs.map} +1 -1
- package/lib/kernel-C7YDLxq8.mjs.map +1 -1
- package/lib/{kernel-utils-B80amC-l.mjs → kernel-utils-BG1uqfT_.mjs} +2 -2
- package/lib/{kernel-utils-B80amC-l.mjs.map → kernel-utils-BG1uqfT_.mjs.map} +1 -1
- package/lib/{main-CJ5TNhBt.mjs → main-CuqGqemT.mjs} +2916 -2605
- package/lib/main-CuqGqemT.mjs.map +1 -0
- package/lib/{material-viewer-DCqZzMZN.mjs → material-viewer-Cij9aWpI.mjs} +23 -23
- package/lib/{material-viewer-DCqZzMZN.mjs.map → material-viewer-Cij9aWpI.mjs.map} +1 -1
- package/lib/packages-DALvuVA_.mjs +4 -0
- package/lib/planner-CVn2Lls0.mjs +2 -0
- package/lib/planner-DKbmQVSf.mjs +44 -0
- package/lib/{planner-CSboZram.mjs.map → planner-DKbmQVSf.mjs.map} +1 -1
- package/lib/{plugin-system-DD0Z9Jvt.mjs → plugin-system-BEZnFUyT.mjs} +2 -2
- package/lib/{plugin-system-DD0Z9Jvt.mjs.map → plugin-system-BEZnFUyT.mjs.map} +1 -1
- package/lib/{roomle-headless-setup-nsoGENQV.mjs → roomle-headless-setup-CMK-quZI.mjs} +131 -77
- package/lib/roomle-headless-setup-CMK-quZI.mjs.map +1 -0
- package/lib/roomle-headless.d.ts +333 -44
- package/lib/roomle-headless.js +196 -80
- package/lib/roomle-headless.js.map +1 -1
- package/lib/{roomle-renderer-BEJNPCKx.mjs → roomle-renderer-BgT28pfp.mjs} +2 -2
- package/lib/{roomle-renderer-BEJNPCKx.mjs.map → roomle-renderer-BgT28pfp.mjs.map} +1 -1
- package/lib/roomle-sdk.d.ts +168 -37
- package/lib/roomle-sdk.js +7 -7
- package/lib/roomle-webgpu-renderer-BdCItfH1.mjs +2243 -0
- package/lib/roomle-webgpu-renderer-BdCItfH1.mjs.map +1 -0
- package/lib/{scene-renderer-Dm1kij1z.mjs → scene-renderer-Bdl7umAf.mjs} +6 -6
- package/lib/{scene-renderer-Dm1kij1z.mjs.map → scene-renderer-Bdl7umAf.mjs.map} +1 -1
- package/lib/{script-loader-DqaDm1FG.mjs → script-loader-BtWHegD-.mjs} +2 -2
- package/lib/{script-loader-DqaDm1FG.mjs.map → script-loader-BtWHegD-.mjs.map} +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/package.json +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/configuratorCallback.d.ts +2 -2
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/configuratorCallback.js +2 -2
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/configuratorCallback.js.map +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/configuratorCoreInterface.d.ts +12 -3
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/configuratorCoreInterface.js +1 -0
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/configuratorCoreInterface.js.map +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/plannerCoreInterface.d.ts +43 -2
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/plannerCoreInterface.js +20 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/embind/plannerCoreInterface.js.map +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/loader/configurationLoader.d.ts +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/loader/configurationLoader.js +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/src/loader/configurationLoader.js.map +1 -1
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/wasm_modern/ConfiguratorKernel.js +6 -6
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/wasm_modern/ConfiguratorKernel.wasm +0 -0
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/wasm_modern/RoomleCore.js +8 -8
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/wasm_modern/RoomleCore.wasm +0 -0
- package/lib/static/roomle-core-hsc/node_modules/roomle-core-hsc/wasm_modern/RoomleToolsCore.wasm +0 -0
- package/lib/{stats-helper-D7a7oxnj.mjs → stats-helper-BvDfWWfq.mjs} +2 -2
- package/lib/{stats-helper-D7a7oxnj.mjs.map → stats-helper-BvDfWWfq.mjs.map} +1 -1
- package/lib/{three.core-BmQnspOL.mjs → three.core-K1JzUaep.mjs} +748 -706
- package/lib/three.core-K1JzUaep.mjs.map +1 -0
- package/lib/{three.module-DkrZwaid.mjs → three.module-Q2K9uyhi.mjs} +1022 -965
- package/lib/three.module-Q2K9uyhi.mjs.map +1 -0
- package/lib/{three.webgpu-DLZjhIYv.mjs → three.webgpu-7v7o6Pxs.mjs} +3804 -3481
- package/lib/three.webgpu-7v7o6Pxs.mjs.map +1 -0
- package/lib/three.webgpu-ChguPx4k.mjs +3 -0
- package/lib/{threejs-utils-CrK_gp1x.mjs → threejs-utils-BzXU2M3w.mjs} +67 -47
- package/lib/threejs-utils-BzXU2M3w.mjs.map +1 -0
- package/lib/{tools-core-CZWgXTFV.mjs → tools-core-BoxckhTR.mjs} +6 -6
- package/lib/{tools-core-CZWgXTFV.mjs.map → tools-core-BoxckhTR.mjs.map} +1 -1
- package/package.json +4 -4
- package/lib/BufferGeometry-BzmfTBQt.mjs.map +0 -1
- package/lib/GLTFExporter-CyhgWPq0.mjs.map +0 -1
- package/lib/Object3D-C3wqWk6O.mjs.map +0 -1
- package/lib/PointLightHelper-DwIXACyT.mjs.map +0 -1
- package/lib/Vector4-DUqY3Egg.mjs.map +0 -1
- package/lib/configurator-C5t3clCx.mjs +0 -2
- package/lib/configurator-Cg1a9XSL.mjs +0 -45
- package/lib/dimensioning-helper-Bfe0fImX.mjs +0 -2
- package/lib/glb-viewer-DIEpkrvY.mjs +0 -2
- package/lib/glb-viewer-tgKOPCaI.mjs.map +0 -1
- package/lib/highlight-coordinator-DRHeEU-E.mjs.map +0 -1
- package/lib/homag-intelligence-D5mCTWgG.mjs.map +0 -1
- package/lib/main-CJ5TNhBt.mjs.map +0 -1
- package/lib/packages-DuOz6rk6.mjs +0 -4
- package/lib/planner-CSboZram.mjs +0 -44
- package/lib/planner-CWPqJktz.mjs +0 -2
- package/lib/roomle-headless-setup-nsoGENQV.mjs.map +0 -1
- package/lib/roomle-webgpu-renderer-D5flithq.mjs +0 -1502
- package/lib/roomle-webgpu-renderer-D5flithq.mjs.map +0 -1
- package/lib/three.core-BmQnspOL.mjs.map +0 -1
- package/lib/three.module-DkrZwaid.mjs.map +0 -1
- package/lib/three.webgpu-DLZjhIYv.mjs.map +0 -1
- package/lib/three.webgpu-RkQxSIwG.mjs +0 -3
- package/lib/threejs-utils-CrK_gp1x.mjs.map +0 -1
|
@@ -0,0 +1,2243 @@
|
|
|
1
|
+
import { Ar as e, C as t, Cr as n, Dn as r, Gn as i, J as a, K as o, Or as s, Sr as c, Tn as l, Ui as u, Vi as d, Wn as f, Zt as p, _i as m, bi as h, fi as g, gi as _, h as v, hi as y, kr as ee, mi as te, mr as ne, mt as re, nt as b, pi as ie, pr as ae, q as oe, qr as se, si as x, st as ce, t as le, vi as ue, wt as de, yi as fe, zr as pe } from "./three.core-K1JzUaep.mjs";
|
|
2
|
+
import { t as me } from "./scene-renderer-Bdl7umAf.mjs";
|
|
3
|
+
import { n as he, r as ge, t as _e } from "./decorate-Bck1_lG8.mjs";
|
|
4
|
+
import { n as ve } from "./roomle-renderer-BgT28pfp.mjs";
|
|
5
|
+
import { Rt as S, Un as C, Ut as ye, Wn as be, Z as xe, bn as w, fr as T, jn as Se, kt as Ce, lr as we, un as Te, vn as Ee, x as De } from "./three.webgpu-7v7o6Pxs.mjs";
|
|
6
|
+
C.BRDF_GGX, C.BRDF_Lambert, C.BasicPointShadowFilter, C.BasicShadowFilter, C.Break, C.Const, C.Continue, C.DFGLUT, C.D_GGX, C.Discard, C.EPSILON, C.F_Schlick;
|
|
7
|
+
var E = C.Fn;
|
|
8
|
+
C.INFINITY, C.If;
|
|
9
|
+
var Oe = C.Loop;
|
|
10
|
+
C.NodeAccess, C.NodeShaderStage, C.NodeType, C.NodeUpdateType, C.PCFShadowFilter, C.PCFSoftShadowFilter, C.PI, C.PI2, C.TWO_PI, C.HALF_PI, C.PointShadowFilter, C.Return, C.Schlick_to_F0, C.ShaderNode, C.Stack, C.Switch, C.TBNViewMatrix, C.VSMShadowFilter, C.V_GGX_SmithCorrelated, C.Var, C.VarIntent, C.abs, C.acesFilmicToneMapping, C.acos, C.acosh, C.add, C.addMethodChaining, C.addNodeElement, C.agxToneMapping, C.all, C.alphaT, C.and, C.anisotropy, C.anisotropyB, C.anisotropyT, C.any, C.append, C.array, C.arrayBuffer, C.asin, C.asinh, C.assign, C.atan, C.atanh, C.atomicAdd, C.atomicAnd, C.atomicFunc, C.atomicLoad, C.atomicMax, C.atomicMin, C.atomicOr, C.atomicStore, C.atomicSub, C.atomicXor, C.attenuationColor, C.attenuationDistance, C.attribute, C.attributeArray, C.backgroundBlurriness, C.backgroundIntensity, C.backgroundRotation, C.batch, C.bentNormalView, C.billboarding, C.bitAnd, C.bitNot, C.bitOr, C.bitXor, C.bitangentGeometry, C.bitangentLocal, C.bitangentView, C.bitangentWorld, C.bitcast, C.blendBurn, C.blendColor, C.blendDodge, C.blendOverlay, C.blendScreen, C.blur, C.bool, C.buffer, C.bufferAttribute, C.bumpMap, C.builtin, C.builtinAOContext, C.builtinShadowContext, C.bvec2, C.bvec3, C.bvec4, C.bypass, C.cache, C.call, C.cameraFar, C.cameraIndex, C.cameraNear, C.cameraNormalMatrix, C.cameraPosition, C.cameraProjectionMatrix, C.cameraProjectionMatrixInverse, C.cameraViewMatrix, C.cameraViewport, C.cameraWorldMatrix, C.cbrt, C.cdl, C.ceil, C.checker, C.cineonToneMapping, C.clamp, C.clearcoat, C.clearcoatNormalView, C.clearcoatRoughness, C.clipSpace, C.code;
|
|
11
|
+
var ke = C.color;
|
|
12
|
+
C.colorSpaceToWorking, C.colorToDirection, C.compute, C.computeKernel, C.computeSkinning, C.context, C.convert, C.convertColorSpace, C.convertToTexture, C.countLeadingZeros, C.countOneBits, C.countTrailingZeros, C.cos, C.cosh, C.cross, C.cubeTexture, C.cubeTextureBase, C.dFdx, C.dFdy, C.dashSize, C.debug, C.decrement, C.decrementBefore, C.defaultBuildStages, C.defaultShaderStages, C.defined, C.degrees, C.deltaTime, C.densityFog, C.densityFogFactor, C.depth, C.depthPass, C.determinant, C.difference, C.diffuseColor, C.directPointLight, C.directionToColor, C.directionToFaceDirection, C.dispersion, C.distance, C.div, C.dot, C.drawIndex, C.dynamicBufferAttribute, C.element, C.emissive, C.equal, C.equirectUV;
|
|
13
|
+
var Ae = C.exp;
|
|
14
|
+
C.exp2, C.exponentialHeightFogFactor, C.expression, C.faceDirection, C.faceForward, C.faceforward;
|
|
15
|
+
var D = C.float;
|
|
16
|
+
C.floatBitsToInt, C.floatBitsToUint, C.floor, C.fog, C.fract, C.frameGroup, C.frameId, C.frontFacing, C.fwidth, C.gain, C.gapSize, C.getConstNodeType, C.getCurrentStack, C.getDirection, C.getDistanceAttenuation, C.getGeometryRoughness, C.getNormalFromDepth, C.interleavedGradientNoise, C.vogelDiskSample, C.getParallaxCorrectNormal, C.getRoughness, C.getScreenPosition, C.getShIrradianceAt, C.getShadowMaterial, C.getShadowRenderObjectFunction, C.getTextureIndex, C.getViewPosition, C.globalId, C.glsl, C.glslFn, C.grayscale, C.greaterThan, C.greaterThanEqual, C.hash, C.highpModelNormalViewMatrix, C.highpModelViewMatrix, C.hue, C.increment, C.incrementBefore, C.instance, C.instanceIndex, C.instancedArray, C.instancedBufferAttribute, C.instancedDynamicBufferAttribute, C.instancedMesh;
|
|
17
|
+
var je = C.int;
|
|
18
|
+
C.intBitsToFloat, C.inverse, C.inverseSqrt, C.inversesqrt, C.invocationLocalIndex, C.invocationSubgroupIndex, C.ior, C.iridescence, C.iridescenceIOR, C.iridescenceThickness, C.ivec2, C.ivec3, C.ivec4, C.js, C.label, C.length, C.lengthSq, C.lessThan, C.lessThanEqual, C.lightPosition, C.lightProjectionUV, C.lightShadowMatrix, C.lightTargetDirection, C.lightTargetPosition, C.lightViewPosition, C.lightingContext, C.lights, C.linearDepth, C.linearToneMapping, C.localId, C.log, C.log2, C.logarithmicDepthToViewZ, C.luminance, C.mat2, C.mat3, C.mat4, C.matcapUV, C.materialAO, C.materialAlphaTest, C.materialAnisotropy, C.materialAnisotropyVector, C.materialAttenuationColor, C.materialAttenuationDistance, C.materialClearcoat, C.materialClearcoatNormal, C.materialClearcoatRoughness, C.materialColor, C.materialDispersion, C.materialEmissive, C.materialEnvIntensity, C.materialEnvRotation, C.materialIOR, C.materialIridescence, C.materialIridescenceIOR, C.materialIridescenceThickness, C.materialLightMap, C.materialLineDashOffset, C.materialLineDashSize, C.materialLineGapSize, C.materialLineScale, C.materialLineWidth, C.materialMetalness, C.materialNormal, C.materialOpacity, C.materialPointSize, C.materialReference, C.materialReflectivity, C.materialRefractionRatio, C.materialRotation, C.materialRoughness, C.materialSheen, C.materialSheenRoughness, C.materialShininess, C.materialSpecular, C.materialSpecularColor, C.materialSpecularIntensity, C.materialSpecularStrength, C.materialThickness, C.materialTransmission, C.max, C.maxMipLevel, C.mediumpModelViewMatrix, C.metalness;
|
|
19
|
+
var O = C.min;
|
|
20
|
+
C.mix, C.mixElement, C.mod, C.modInt, C.modelDirection, C.modelNormalMatrix, C.modelPosition, C.modelRadius, C.modelScale, C.modelViewMatrix, C.modelViewPosition, C.modelViewProjection, C.modelWorldMatrix, C.modelWorldMatrixInverse, C.morphReference, C.mrt;
|
|
21
|
+
var Me = C.mul;
|
|
22
|
+
C.mx_aastep, C.mx_add, C.mx_atan2, C.mx_cell_noise_float, C.mx_contrast, C.mx_divide, C.mx_fractal_noise_float, C.mx_fractal_noise_vec2, C.mx_fractal_noise_vec3, C.mx_fractal_noise_vec4, C.mx_frame, C.mx_heighttonormal, C.mx_hsvtorgb, C.mx_ifequal, C.mx_ifgreater, C.mx_ifgreatereq, C.mx_invert, C.mx_modulo, C.mx_multiply, C.mx_noise_float, C.mx_noise_vec3, C.mx_noise_vec4, C.mx_place2d, C.mx_power, C.mx_ramp4, C.mx_ramplr, C.mx_ramptb, C.mx_rgbtohsv, C.mx_rotate2d, C.mx_rotate3d, C.mx_safepower, C.mx_separate, C.mx_splitlr, C.mx_splittb, C.mx_srgb_texture_to_lin_rec709, C.mx_subtract, C.mx_timer, C.mx_transform_uv, C.mx_unifiednoise2d, C.mx_unifiednoise3d, C.mx_worley_noise_float, C.mx_worley_noise_vec2, C.mx_worley_noise_vec3, C.negate, C.neutralToneMapping, C.nodeArray, C.nodeImmutable;
|
|
23
|
+
var Ne = C.nodeObject;
|
|
24
|
+
C.nodeObjectIntent, C.nodeObjects, C.nodeProxy, C.nodeProxyIntent, C.normalFlat, C.normalGeometry, C.normalLocal, C.normalMap, C.normalView, C.normalViewGeometry, C.normalWorld, C.normalWorldGeometry, C.normalize, C.not, C.notEqual, C.numWorkgroups, C.objectDirection, C.objectGroup, C.objectPosition, C.objectRadius, C.objectScale, C.objectViewPosition, C.objectWorldMatrix, C.OnBeforeObjectUpdate, C.OnBeforeMaterialUpdate, C.OnObjectUpdate;
|
|
25
|
+
var Pe = C.OnMaterialUpdate;
|
|
26
|
+
C.oneMinus, C.or;
|
|
27
|
+
var Fe = C.orthographicDepthToViewZ;
|
|
28
|
+
C.oscSawtooth, C.oscSine, C.oscSquare, C.oscTriangle, C.output, C.outputStruct, C.overloadingFn, C.packHalf2x16, C.packSnorm2x16, C.packUnorm2x16, C.parabola, C.parallaxDirection, C.parallaxUV, C.parameter;
|
|
29
|
+
var Ie = C.pass, Le = C.passTexture;
|
|
30
|
+
C.pcurve;
|
|
31
|
+
var Re = C.perspectiveDepthToViewZ;
|
|
32
|
+
C.pmremTexture, C.pointShadow, C.pointUV, C.pointWidth, C.positionGeometry, C.positionLocal, C.positionPrevious;
|
|
33
|
+
var ze = C.positionView;
|
|
34
|
+
C.positionViewDirection, C.positionWorld, C.positionWorldDirection, C.posterize, C.pow, C.pow2, C.pow3, C.pow4, C.premultiplyAlpha, C.property, C.radians, C.rand, C.range, C.rangeFog, C.rangeFogFactor, C.reciprocal;
|
|
35
|
+
var k = C.reference;
|
|
36
|
+
C.referenceBuffer, C.reflect, C.reflectVector, C.reflectView, C.reflector, C.refract, C.refractVector, C.refractView, C.reinhardToneMapping, C.remap, C.remapClamp, C.renderGroup;
|
|
37
|
+
var Be = C.renderOutput;
|
|
38
|
+
C.rendererReference, C.replaceDefaultUV, C.rotate, C.rotateUV, C.roughness, C.round, C.rtt, C.sRGBTransferEOTF, C.sRGBTransferOETF, C.sample, C.sampler, C.samplerComparison, C.saturate, C.saturation, C.screen, C.screenCoordinate, C.screenDPR, C.screenSize;
|
|
39
|
+
var A = C.screenUV;
|
|
40
|
+
C.select, C.setCurrentStack, C.setName, C.shaderStages, C.shadow, C.shadowPositionWorld, C.shapeCircle, C.sharedUniformGroup, C.sheen, C.sheenRoughness, C.shiftLeft, C.shiftRight, C.shininess, C.sign, C.sin, C.sinh, C.sinc, C.skinning, C.smoothstep, C.smoothstepElement, C.specularColor, C.specularF90, C.spherizeUV, C.split, C.spritesheetUV, C.sqrt, C.stack;
|
|
41
|
+
var j = C.step;
|
|
42
|
+
C.stepElement, C.storage, C.storageBarrier, C.storageTexture, C.string, C.struct, C.sub, C.subgroupAdd, C.subgroupAll, C.subgroupAnd, C.subgroupAny, C.subgroupBallot, C.subgroupBroadcast, C.subgroupBroadcastFirst, C.subBuild, C.subgroupElect, C.subgroupExclusiveAdd, C.subgroupExclusiveMul, C.subgroupInclusiveAdd, C.subgroupInclusiveMul, C.subgroupIndex, C.subgroupMax, C.subgroupMin, C.subgroupMul, C.subgroupOr, C.subgroupShuffle, C.subgroupShuffleDown, C.subgroupShuffleUp, C.subgroupShuffleXor, C.subgroupSize, C.subgroupXor, C.tan, C.tanh, C.tangentGeometry, C.tangentLocal, C.tangentView, C.tangentWorld;
|
|
43
|
+
var M = C.texture;
|
|
44
|
+
C.texture3D, C.textureBarrier, C.textureBicubic, C.textureBicubicLevel, C.textureCubeUV, C.textureLoad;
|
|
45
|
+
var Ve = C.textureSize;
|
|
46
|
+
C.textureLevel, C.textureStore, C.thickness, C.time, C.toneMapping, C.toneMappingExposure, C.toonOutlinePass, C.transformDirection, C.transformNormal, C.transformNormalToView, C.transformedClearcoatNormalView, C.transformedNormalView, C.transformedNormalWorld, C.transmission, C.transpose, C.triNoise3D, C.triplanarTexture, C.triplanarTextures, C.trunc, C.uint, C.uintBitsToFloat;
|
|
47
|
+
var N = C.uniform;
|
|
48
|
+
C.uniformArray, C.uniformCubeTexture, C.uniformGroup, C.uniformFlow, C.uniformTexture, C.unpackHalf2x16, C.unpackSnorm2x16, C.unpackUnorm2x16, C.unpremultiplyAlpha, C.userData;
|
|
49
|
+
var He = C.uv;
|
|
50
|
+
C.uvec2, C.uvec3, C.uvec4, C.varying, C.varyingProperty;
|
|
51
|
+
var P = C.vec2, F = C.vec3, I = C.vec4;
|
|
52
|
+
C.vectorComponents, C.velocity, C.vertexColor, C.vertexIndex, C.vertexStage, C.vibrance, C.viewZToLogarithmicDepth, C.viewZToOrthographicDepth, C.viewZToPerspectiveDepth, C.viewZToReversedOrthographicDepth, C.viewZToReversedPerspectiveDepth, C.viewport, C.viewportCoordinate, C.viewportDepthTexture, C.viewportLinearDepth, C.viewportMipTexture, C.viewportOpaqueMipTexture, C.viewportResolution, C.viewportSafeUV, C.viewportSharedTexture, C.viewportSize, C.viewportTexture, C.viewportUV, C.wgsl, C.wgslFn, C.workgroupArray, C.workgroupBarrier, C.workgroupId, C.workingToColorSpace, C.xor;
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region ../../node_modules/three/examples/jsm/tsl/display/OutlineNode.js
|
|
55
|
+
var L = /* @__PURE__ */ new Te(), Ue = /* @__PURE__ */ new h(), We = /* @__PURE__ */ new h(1, 0), Ge = /* @__PURE__ */ new h(0, 1), R, Ke = class extends be {
|
|
56
|
+
static get type() {
|
|
57
|
+
return "OutlineNode";
|
|
58
|
+
}
|
|
59
|
+
constructor(t, n, r = {}) {
|
|
60
|
+
super("vec4");
|
|
61
|
+
let { selectedObjects: i = [], edgeThickness: o = D(1), edgeGlow: s = D(0), downSampleRatio: c = 2 } = r;
|
|
62
|
+
this.scene = t, this.camera = n, this.selectedObjects = i, this.edgeThicknessNode = Ne(o), this.edgeGlowNode = Ne(s), this.downSampleRatio = c, this.updateBeforeType = ye.FRAME, this._renderTargetDepthBuffer = new e(), this._renderTargetDepthBuffer.depthTexture = new a(), this._renderTargetDepthBuffer.depthTexture.type = ce, this._renderTargetMaskBuffer = new e(), this._renderTargetMaskDownSampleBuffer = new e(1, 1, { depthBuffer: !1 }), this._renderTargetEdgeBuffer1 = new e(1, 1, { depthBuffer: !1 }), this._renderTargetEdgeBuffer2 = new e(1, 1, { depthBuffer: !1 }), this._renderTargetBlurBuffer1 = new e(1, 1, { depthBuffer: !1 }), this._renderTargetBlurBuffer2 = new e(1, 1, { depthBuffer: !1 }), this._renderTargetComposite = new e(1, 1, { depthBuffer: !1 }), this._cameraNear = k("near", "float", n), this._cameraFar = k("far", "float", n), this._blurDirection = N(new h()), this._depthTextureUniform = M(this._renderTargetDepthBuffer.depthTexture), this._maskTextureUniform = M(this._renderTargetMaskBuffer.texture), this._maskTextureDownsSampleUniform = M(this._renderTargetMaskDownSampleBuffer.texture), this._edge1TextureUniform = M(this._renderTargetEdgeBuffer1.texture), this._edge2TextureUniform = M(this._renderTargetEdgeBuffer2.texture), this._blurColorTextureUniform = M(this._renderTargetEdgeBuffer1.texture), this._visibleEdgeColor = F(1, 0, 0), this._hiddenEdgeColor = F(0, 1, 0), this._depthMaterial = new S(), this._depthMaterial.colorNode = ke(0, 0, 0), this._depthMaterial.name = "OutlineNode.depth", this._depthSpriteMaterial = new Se(), this._depthSpriteMaterial.colorNode = ke(0, 0, 0), this._depthSpriteMaterial.name = "OutlineNode.depthSprite", this._prepareMaskMaterial = new S(), this._prepareMaskMaterial.name = "OutlineNode.prepareMask", this._prepareMaskSpriteMaterial = new Se(), this._prepareMaskSpriteMaterial.name = "OutlineNode.prepareMaskSprite", this._materialCopy = new S(), this._materialCopy.name = "OutlineNode.copy", this._edgeDetectionMaterial = new S(), this._edgeDetectionMaterial.name = "OutlineNode.edgeDetection", this._separableBlurMaterial = new S(), this._separableBlurMaterial.name = "OutlineNode.separableBlur", this._separableBlurMaterial2 = new S(), this._separableBlurMaterial2.name = "OutlineNode.separableBlur2", this._compositeMaterial = new S(), this._compositeMaterial.name = "OutlineNode.composite", this._selectionCache = /* @__PURE__ */ new Set(), this._lastSelectionCount = 0, this._textureNode = Le(this, this._renderTargetComposite.texture);
|
|
63
|
+
}
|
|
64
|
+
get visibleEdge() {
|
|
65
|
+
return this.r;
|
|
66
|
+
}
|
|
67
|
+
get hiddenEdge() {
|
|
68
|
+
return this.g;
|
|
69
|
+
}
|
|
70
|
+
getTextureNode() {
|
|
71
|
+
return this._textureNode;
|
|
72
|
+
}
|
|
73
|
+
setSize(e, t) {
|
|
74
|
+
this._renderTargetDepthBuffer.setSize(e, t), this._renderTargetMaskBuffer.setSize(e, t), this._renderTargetComposite.setSize(e, t);
|
|
75
|
+
let n = Math.round(e / this.downSampleRatio), r = Math.round(t / this.downSampleRatio);
|
|
76
|
+
this._renderTargetMaskDownSampleBuffer.setSize(n, r), this._renderTargetEdgeBuffer1.setSize(n, r), this._renderTargetBlurBuffer1.setSize(n, r), n = Math.round(n / 2), r = Math.round(r / 2), this._renderTargetEdgeBuffer2.setSize(n, r), this._renderTargetBlurBuffer2.setSize(n, r);
|
|
77
|
+
}
|
|
78
|
+
updateBefore(e) {
|
|
79
|
+
let { renderer: t } = e, { camera: n, scene: r } = this;
|
|
80
|
+
if (this._updateSelectionCache(), this._selectionCache.size === 0) {
|
|
81
|
+
this._lastSelectionCount > 0 && (R = w.resetRendererState(t, R), t.setRenderTarget(this._renderTargetComposite), t.setClearColor(0, 0), t.clear(), w.restoreRendererState(t, R), this._lastSelectionCount = 0);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
this._lastSelectionCount = this._selectionCache.size, R = w.resetRendererAndSceneState(t, r, R);
|
|
85
|
+
let i = t.getDrawingBufferSize(Ue);
|
|
86
|
+
this.setSize(i.width, i.height), t.setClearColor(16777215, 1);
|
|
87
|
+
let a = r.name;
|
|
88
|
+
t.setRenderTarget(this._renderTargetDepthBuffer), t.setRenderObjectFunction((e, n, r, i, a, o, s, c) => {
|
|
89
|
+
if (this._selectionCache.has(e) === !1) {
|
|
90
|
+
let a = e.isSprite ? this._depthSpriteMaterial : this._depthMaterial;
|
|
91
|
+
t.renderObject(e, n, r, i, a, o, s, c);
|
|
92
|
+
}
|
|
93
|
+
}), r.name = "Outline [ Non-Selected Objects Pass ]", t.render(r, n), t.setRenderTarget(this._renderTargetMaskBuffer), t.setRenderObjectFunction((e, n, r, i, a, o, s, c) => {
|
|
94
|
+
if (this._selectionCache.has(e) === !0) {
|
|
95
|
+
let a = e.isSprite ? this._prepareMaskSpriteMaterial : this._prepareMaskMaterial;
|
|
96
|
+
t.renderObject(e, n, r, i, a, o, s, c);
|
|
97
|
+
}
|
|
98
|
+
}), r.name = "Outline [ Selected Objects Pass ]", t.render(r, n), t.setRenderObjectFunction(R.renderObjectFunction), this._selectionCache.clear(), r.name = a, L.material = this._materialCopy, L.name = "Outline [ Downsample ]", t.setRenderTarget(this._renderTargetMaskDownSampleBuffer), L.render(t), L.material = this._edgeDetectionMaterial, L.name = "Outline [ Edge Detection ]", t.setRenderTarget(this._renderTargetEdgeBuffer1), L.render(t), this._blurColorTextureUniform.value = this._renderTargetEdgeBuffer1.texture, this._blurDirection.value.copy(We), L.material = this._separableBlurMaterial, L.name = "Outline [ Blur Half Resolution ]", t.setRenderTarget(this._renderTargetBlurBuffer1), L.render(t), this._blurColorTextureUniform.value = this._renderTargetBlurBuffer1.texture, this._blurDirection.value.copy(Ge), t.setRenderTarget(this._renderTargetEdgeBuffer1), L.render(t), this._blurColorTextureUniform.value = this._renderTargetEdgeBuffer1.texture, this._blurDirection.value.copy(We), L.material = this._separableBlurMaterial2, L.name = "Outline [ Blur Quarter Resolution ]", t.setRenderTarget(this._renderTargetBlurBuffer2), L.render(t), this._blurColorTextureUniform.value = this._renderTargetBlurBuffer2.texture, this._blurDirection.value.copy(Ge), t.setRenderTarget(this._renderTargetEdgeBuffer2), L.render(t), L.material = this._compositeMaterial, L.name = "Outline [ Blur Quarter Resolution ]", t.setRenderTarget(this._renderTargetComposite), L.render(t), w.restoreRendererAndSceneState(t, r, R);
|
|
99
|
+
}
|
|
100
|
+
setup() {
|
|
101
|
+
let e = () => {
|
|
102
|
+
let e = this._depthTextureUniform.sample(A), t;
|
|
103
|
+
return t = this.camera.isPerspectiveCamera ? Re(e, this._cameraNear, this._cameraFar) : Fe(e, this._cameraNear, this._cameraFar), F(0, ze.z.lessThanEqual(t).select(1, 0), 1);
|
|
104
|
+
};
|
|
105
|
+
this._prepareMaskMaterial.colorNode = e(), this._prepareMaskMaterial.needsUpdate = !0, this._prepareMaskSpriteMaterial.colorNode = e(), this._prepareMaskSpriteMaterial.needsUpdate = !0, this._materialCopy.fragmentNode = this._maskTextureUniform, this._materialCopy.needsUpdate = !0;
|
|
106
|
+
let t = E(() => {
|
|
107
|
+
let e = Ve(this._maskTextureDownsSampleUniform), t = P(1).div(e).toVar(), n = I(1, 0, 0, 1).mul(I(t, t)), r = He(), i = this._maskTextureDownsSampleUniform.sample(r.add(n.xy)).toVar(), a = this._maskTextureDownsSampleUniform.sample(r.sub(n.xy)).toVar(), o = this._maskTextureDownsSampleUniform.sample(r.add(n.yw)).toVar(), s = this._maskTextureDownsSampleUniform.sample(r.sub(n.yw)).toVar(), c = P(Me(i.r.sub(a.r), .5), Me(o.r.sub(s.r), .5)).length();
|
|
108
|
+
return I(O(O(i.g, a.g), O(o.g, s.g)).oneMinus().greaterThan(.001).select(this._visibleEdgeColor, this._hiddenEdgeColor), 1).mul(c);
|
|
109
|
+
});
|
|
110
|
+
this._edgeDetectionMaterial.fragmentNode = t(), this._edgeDetectionMaterial.needsUpdate = !0;
|
|
111
|
+
let n = E(([e, t]) => D(.39894).mul(Ae(D(-.5).mul(e).mul(e).div(t.mul(t))).div(t))), r = E(([e]) => {
|
|
112
|
+
let t = Ve(this._maskTextureDownsSampleUniform), r = P(1).div(t).toVar(), i = He(), a = e.div(2).toVar(), o = n(0, a).toVar(), s = this._blurColorTextureUniform.sample(i).mul(o).toVar(), c = this._blurDirection.mul(r).mul(e).div(4).toVar(), l = c.toVar();
|
|
113
|
+
return Oe({
|
|
114
|
+
start: je(1),
|
|
115
|
+
end: je(4),
|
|
116
|
+
type: "int",
|
|
117
|
+
condition: "<="
|
|
118
|
+
}, ({ i: t }) => {
|
|
119
|
+
let r = n(e.mul(D(t)).div(4), a), u = this._blurColorTextureUniform.sample(i.add(l)), d = this._blurColorTextureUniform.sample(i.sub(l));
|
|
120
|
+
s.addAssign(u.add(d).mul(r)), o.addAssign(r.mul(2)), l.addAssign(c);
|
|
121
|
+
}), s.div(o);
|
|
122
|
+
});
|
|
123
|
+
this._separableBlurMaterial.fragmentNode = r(this.edgeThicknessNode), this._separableBlurMaterial.needsUpdate = !0, this._separableBlurMaterial2.fragmentNode = r(4), this._separableBlurMaterial2.needsUpdate = !0;
|
|
124
|
+
let i = E(() => {
|
|
125
|
+
let e = this._edge1TextureUniform, t = this._edge2TextureUniform, n = this._maskTextureUniform, r = e.add(t.mul(this.edgeGlowNode));
|
|
126
|
+
return n.r.mul(r);
|
|
127
|
+
});
|
|
128
|
+
return this._compositeMaterial.fragmentNode = i(), this._compositeMaterial.needsUpdate = !0, this._textureNode;
|
|
129
|
+
}
|
|
130
|
+
dispose() {
|
|
131
|
+
this.selectedObjects.length = 0, this._renderTargetDepthBuffer.dispose(), this._renderTargetMaskBuffer.dispose(), this._renderTargetMaskDownSampleBuffer.dispose(), this._renderTargetEdgeBuffer1.dispose(), this._renderTargetEdgeBuffer2.dispose(), this._renderTargetBlurBuffer1.dispose(), this._renderTargetBlurBuffer2.dispose(), this._renderTargetComposite.dispose(), this._depthMaterial.dispose(), this._depthSpriteMaterial.dispose(), this._prepareMaskMaterial.dispose(), this._prepareMaskSpriteMaterial.dispose(), this._materialCopy.dispose(), this._edgeDetectionMaterial.dispose(), this._separableBlurMaterial.dispose(), this._separableBlurMaterial2.dispose(), this._compositeMaterial.dispose();
|
|
132
|
+
}
|
|
133
|
+
_updateSelectionCache() {
|
|
134
|
+
for (let e = 0; e < this.selectedObjects.length; e++) this.selectedObjects[e].traverse((e) => {
|
|
135
|
+
(e.isMesh || e.isSprite) && this._selectionCache.add(e);
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
}, qe = (e, t, n) => new Ke(e, t, n), Je = class {}, z = class e extends Je {
|
|
139
|
+
static {
|
|
140
|
+
this.passId = "OutlineRenderPass";
|
|
141
|
+
}
|
|
142
|
+
constructor(n) {
|
|
143
|
+
super(), this.passId = e.passId, this.selectedObjects = n.selectedObjects, this.edgeStrength = N(n.edgeStrength), this.edgeGlow = N(n.edgeGlow), this.edgeThickness = N(n.edgeThickness), this.visibleEdgeColor = N(new t(n.visibleEdgeColor)), this.hiddenEdgeColor = N(new t(n.hiddenEdgeColor));
|
|
144
|
+
}
|
|
145
|
+
highlightObjects(e) {
|
|
146
|
+
this.selectedObjects.splice(0, this.selectedObjects.length, ...e);
|
|
147
|
+
}
|
|
148
|
+
setOutlineColors(e, n) {
|
|
149
|
+
this.visibleEdgeColor.value = new t(e), this.hiddenEdgeColor.value = new t(n);
|
|
150
|
+
}
|
|
151
|
+
areObjectsSelected() {
|
|
152
|
+
return this.selectedObjects.length !== 0;
|
|
153
|
+
}
|
|
154
|
+
assemble(e, t, n, r) {
|
|
155
|
+
if (!this.areObjectsSelected()) return e;
|
|
156
|
+
let { visibleEdge: i, hiddenEdge: a } = qe(t, n, {
|
|
157
|
+
selectedObjects: this.selectedObjects,
|
|
158
|
+
edgeThickness: this.edgeThickness,
|
|
159
|
+
edgeGlow: this.edgeGlow
|
|
160
|
+
}), o = i.mul(this.visibleEdgeColor).add(a.mul(this.hiddenEdgeColor)).mul(this.edgeStrength);
|
|
161
|
+
return r === "outline" ? I(0, 0, 0, 0).add(o) : e.add(o);
|
|
162
|
+
}
|
|
163
|
+
addParametersToGUI(e, t) {
|
|
164
|
+
let n = e.addFolder("Outline Settings");
|
|
165
|
+
n.add(this.edgeStrength, "value", .01, 10).name("edgeStrength").onChange(() => t()), n.add(this.edgeGlow, "value", 0, 1).name("edgeGlow").onChange(() => t()), n.add(this.edgeThickness, "value", 1, 4).name("edgeThickness").onChange(() => t()), n.addColor({ color: this.visibleEdgeColor.value.getHex(pe) }, "color").name("visibleEdgeColor").onChange((e) => {
|
|
166
|
+
this.visibleEdgeColor.value.set(e), t();
|
|
167
|
+
}), n.addColor({ color: this.hiddenEdgeColor.value.getHex(pe) }, "color").name("hiddenEdgeColor").onChange((e) => {
|
|
168
|
+
this.hiddenEdgeColor.value.set(e), t();
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
}, Ye = class {
|
|
172
|
+
constructor(e, t) {
|
|
173
|
+
this.uid = e, this.cid = e.match(/^(.*):f(\d+)$/)[1], this.name = t, this.timestamp = 0, this.cpu = 0, this.gpu = 0, this.fps = 0, this.children = [], this.parent = null;
|
|
174
|
+
}
|
|
175
|
+
}, Xe = class extends Ye {
|
|
176
|
+
constructor(e, t, n, r) {
|
|
177
|
+
let i = t.name;
|
|
178
|
+
i === "" && (t.isScene ? i = "Scene" : t.isQuadMesh && (i = "QuadMesh")), super(e, i), this.scene = t, this.camera = n, this.renderTarget = r, this.isRenderStats = !0;
|
|
179
|
+
}
|
|
180
|
+
}, Ze = class extends Ye {
|
|
181
|
+
constructor(e, t) {
|
|
182
|
+
super(e, t.name), this.computeNode = t, this.isComputeStats = !0;
|
|
183
|
+
}
|
|
184
|
+
}, Qe = class extends xe {
|
|
185
|
+
constructor() {
|
|
186
|
+
super(), this.currentFrame = null, this.currentRender = null, this.currentNodes = null, this.lastFrame = null, this.frames = [], this.framesLib = {}, this.maxFrames = 512, this._lastFinishTime = 0, this._resolveTimestampPromise = null, this.isRendererInspector = !0;
|
|
187
|
+
}
|
|
188
|
+
getParent() {
|
|
189
|
+
return this.currentRender || this.getFrame();
|
|
190
|
+
}
|
|
191
|
+
begin() {
|
|
192
|
+
this.currentFrame = this._createFrame(), this.currentRender = this.currentFrame, this.currentNodes = [];
|
|
193
|
+
}
|
|
194
|
+
finish() {
|
|
195
|
+
let e = performance.now(), t = this.currentFrame;
|
|
196
|
+
t.finishTime = e, t.deltaTime = e - (this._lastFinishTime > 0 ? this._lastFinishTime : e), this.addFrame(t), this.fps = this._getFPS(), this.lastFrame = t, this.currentFrame = null, this.currentRender = null, this.currentNodes = null, this._lastFinishTime = e;
|
|
197
|
+
}
|
|
198
|
+
_getFPS() {
|
|
199
|
+
let e = 0, t = 0;
|
|
200
|
+
for (let n = this.frames.length - 1; n >= 0; n--) {
|
|
201
|
+
let r = this.frames[n];
|
|
202
|
+
if (e++, t += r.deltaTime, t >= 1e3) break;
|
|
203
|
+
}
|
|
204
|
+
return e * 1e3 / t;
|
|
205
|
+
}
|
|
206
|
+
_createFrame() {
|
|
207
|
+
return {
|
|
208
|
+
frameId: this.nodeFrame.frameId,
|
|
209
|
+
resolvedCompute: !1,
|
|
210
|
+
resolvedRender: !1,
|
|
211
|
+
deltaTime: 0,
|
|
212
|
+
startTime: performance.now(),
|
|
213
|
+
finishTime: 0,
|
|
214
|
+
miscellaneous: 0,
|
|
215
|
+
children: [],
|
|
216
|
+
renders: [],
|
|
217
|
+
computes: []
|
|
218
|
+
};
|
|
219
|
+
}
|
|
220
|
+
getFrame() {
|
|
221
|
+
return this.currentFrame || this.lastFrame;
|
|
222
|
+
}
|
|
223
|
+
getFrameById(e) {
|
|
224
|
+
return this.framesLib[e] || null;
|
|
225
|
+
}
|
|
226
|
+
updateTabs() {}
|
|
227
|
+
resolveFrame() {}
|
|
228
|
+
async resolveTimestamp() {
|
|
229
|
+
return this._resolveTimestampPromise === null && (this._resolveTimestampPromise = new Promise((e) => {
|
|
230
|
+
requestAnimationFrame(async () => {
|
|
231
|
+
let t = this.getRenderer();
|
|
232
|
+
await t.resolveTimestampsAsync(x.COMPUTE), await t.resolveTimestampsAsync(x.RENDER);
|
|
233
|
+
let n = t.backend.getTimestampFrames(x.COMPUTE), r = t.backend.getTimestampFrames(x.RENDER), i = [...new Set([...n, ...r])];
|
|
234
|
+
for (let e of i) {
|
|
235
|
+
let i = this.getFrameById(e);
|
|
236
|
+
if (i !== null) {
|
|
237
|
+
if (i.resolvedCompute === !1) if (i.computes.length > 0) {
|
|
238
|
+
if (n.includes(e)) {
|
|
239
|
+
for (let e of i.computes) t.backend.hasTimestamp(e.uid) ? e.gpu = t.backend.getTimestamp(e.uid) : (e.gpu = 0, e.gpuNotAvailable = !0);
|
|
240
|
+
i.resolvedCompute = !0;
|
|
241
|
+
}
|
|
242
|
+
} else i.resolvedCompute = !0;
|
|
243
|
+
if (i.resolvedRender === !1) if (i.renders.length > 0) {
|
|
244
|
+
if (r.includes(e)) {
|
|
245
|
+
for (let e of i.renders) t.backend.hasTimestamp(e.uid) ? e.gpu = t.backend.getTimestamp(e.uid) : (e.gpu = 0, e.gpuNotAvailable = !0);
|
|
246
|
+
i.resolvedRender = !0;
|
|
247
|
+
}
|
|
248
|
+
} else i.resolvedRender = !0;
|
|
249
|
+
i.resolvedCompute === !0 && i.resolvedRender === !0 && this.resolveFrame(i);
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
this._resolveTimestampPromise = null, e();
|
|
253
|
+
});
|
|
254
|
+
})), this._resolveTimestampPromise;
|
|
255
|
+
}
|
|
256
|
+
get isAvailable() {
|
|
257
|
+
return this.getRenderer() !== null;
|
|
258
|
+
}
|
|
259
|
+
addFrame(e) {
|
|
260
|
+
if (this.frames.length >= this.maxFrames) {
|
|
261
|
+
let e = this.frames.shift();
|
|
262
|
+
delete this.framesLib[e.frameId];
|
|
263
|
+
}
|
|
264
|
+
this.frames.push(e), this.framesLib[e.frameId] = e, this.isAvailable && (this.updateTabs(), this.resolveTimestamp());
|
|
265
|
+
}
|
|
266
|
+
inspect(e) {
|
|
267
|
+
let t = this.currentNodes;
|
|
268
|
+
t === null ? u("RendererInspector: Unable to inspect node outside of frame scope. Use \"renderer.setAnimationLoop()\".") : t.push(e);
|
|
269
|
+
}
|
|
270
|
+
beginCompute(e, t) {
|
|
271
|
+
let n = this.getFrame();
|
|
272
|
+
if (!n) return;
|
|
273
|
+
let r = new Ze(e, t);
|
|
274
|
+
r.timestamp = performance.now(), r.parent = this.currentCompute || this.getParent(), n.computes.push(r), this.currentRender === null ? n.children.push(r) : this.currentRender.children.push(r), this.currentCompute = r;
|
|
275
|
+
}
|
|
276
|
+
finishCompute() {
|
|
277
|
+
if (!this.getFrame()) return;
|
|
278
|
+
let e = this.currentCompute;
|
|
279
|
+
e.cpu = performance.now() - e.timestamp, this.currentCompute = e.parent.isComputeStats ? e.parent : null;
|
|
280
|
+
}
|
|
281
|
+
beginRender(e, t, n, r) {
|
|
282
|
+
let i = this.getFrame();
|
|
283
|
+
if (!i) return;
|
|
284
|
+
let a = new Xe(e, t, n, r);
|
|
285
|
+
a.timestamp = performance.now(), a.parent = this.getParent(), i.renders.push(a), this.currentRender === null ? i.children.push(a) : this.currentRender.children.push(a), this.currentRender = a;
|
|
286
|
+
}
|
|
287
|
+
finishRender() {
|
|
288
|
+
if (!this.getFrame()) return;
|
|
289
|
+
let e = this.currentRender;
|
|
290
|
+
e.cpu = performance.now() - e.timestamp, this.currentRender = e.parent;
|
|
291
|
+
}
|
|
292
|
+
}, $e = class {
|
|
293
|
+
static init() {
|
|
294
|
+
if (document.getElementById("profiler-styles")) return;
|
|
295
|
+
let e = document.createElement("style");
|
|
296
|
+
e.id = "profiler-styles", e.textContent = "\n:root {\n --profiler-bg: #1e1e24f5;\n --profiler-header-bg: #2a2a33aa;\n --profiler-header: #2a2a33;\n --profiler-border: #4a4a5a;\n --text-primary: #e0e0e0;\n --text-secondary: #9a9aab;\n --accent-color: #00aaff;\n --color-green: #4caf50;\n --color-yellow: #ffc107;\n --color-red: #f44336;\n --color-fps: rgb(63, 81, 181);\n --color-call: rgba(255, 185, 34, 1);\n --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n --font-mono: 'Fira Code', 'Courier New', Courier, monospace;\n}\n\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Fira+Code&display=swap');\n\n#profiler-panel *, #profiler-toggle * {\n text-transform: initial;\n line-height: normal;\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n#profiler-toggle {\n position: fixed;\n top: 15px;\n right: 15px;\n background-color: rgba(30, 30, 36, 0.85);\n border: 1px solid #4a4a5a54;\n border-radius: 12px 6px 6px 12px;\n color: var(--text-primary);\n cursor: pointer;\n z-index: 1001;\n transition: all 0.2s ease-in-out;\n /*font-size: 14px;*/\n font-size: 15px;\n backdrop-filter: blur(8px);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n display: flex;\n align-items: stretch;\n padding: 0;\n overflow: hidden;\n font-family: var(--font-family);\n}\n\n#profiler-toggle.position-right.panel-open {\n right: auto;\n left: 15px;\n border-radius: 6px 12px 12px 6px;\n flex-direction: row-reverse;\n}\n\n#profiler-toggle.position-right.panel-open #builtin-tabs-container {\n border-right: none;\n border-left: 1px solid #262636;\n}\n\n#profiler-toggle:hover {\n border-color: var(--accent-color);\n}\n\n#profiler-toggle.panel-open #toggle-icon {\n background-color: rgba(0, 170, 255, 0.2);\n color: var(--accent-color);\n}\n\n#toggle-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n font-size: 20px;\n transition: background-color 0.2s;\n}\n\n#profiler-toggle:hover #toggle-icon {\n background-color: rgba(255, 255, 255, 0.05);\n}\n\n#profiler-toggle.panel-open:hover #toggle-icon {\n background-color: rgba(0, 170, 255, 0.3);\n}\n\n.toggle-separator {\n width: 1px;\n background-color: var(--profiler-border);\n}\n\n#toggle-text {\n display: flex;\n align-items: baseline;\n padding: 8px 14px;\n min-width: 80px;\n justify-content: right;\n}\n\n#toggle-text .fps-label {\n font-size: 0.7em;\n margin-left: 10px;\n color: #999;\n}\n\n#builtin-tabs-container {\n display: flex;\n align-items: stretch;\n gap: 0;\n border-right: 1px solid #262636;\n order: -1;\n}\n\n.builtin-tab-btn {\n background: transparent;\n border: none;\n color: var(--text-secondary);\n cursor: pointer;\n padding: 8px 14px;\n font-family: var(--font-family);\n font-size: 13px;\n font-weight: 600;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 32px;\n position: relative;\n}\n\n.builtin-tab-btn svg {\n width: 20px;\n height: 20px;\n stroke: currentColor;\n}\n\n.builtin-tab-btn:hover {\n background-color: rgba(255, 255, 255, 0.08);\n color: var(--accent-color);\n}\n\n.builtin-tab-btn:active {\n background-color: rgba(255, 255, 255, 0.12);\n}\n\n.builtin-tab-btn.active {\n background-color: rgba(0, 170, 255, 0.2);\n color: var(--accent-color);\n}\n\n.builtin-tab-btn.active:hover {\n background-color: rgba(0, 170, 255, 0.3);\n}\n\n#profiler-mini-panel {\n position: fixed;\n top: 60px;\n right: 15px;\n background-color: rgba(30, 30, 36, 0.85);\n border: 1px solid #4a4a5a54;\n border-radius: 8px;\n color: var(--text-primary);\n z-index: 9999;\n backdrop-filter: blur(8px);\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);\n font-family: var(--font-family);\n font-size: 11px;\n width: 350px;\n max-height: calc(100vh - 100px);\n overflow-y: auto;\n overflow-x: hidden;\n display: none;\n opacity: 0;\n transform: translateY(-10px) scale(0.98);\n transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), \n transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n#profiler-mini-panel.position-right.panel-open {\n right: auto;\n left: 15px;\n}\n\n#profiler-mini-panel.visible {\n display: block;\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n#profiler-mini-panel::-webkit-scrollbar {\n width: 6px;\n}\n\n#profiler-mini-panel::-webkit-scrollbar-track {\n background: transparent;\n}\n\n#profiler-mini-panel::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.15);\n border-radius: 3px;\n transition: background 0.2s;\n}\n\n#profiler-mini-panel::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.25);\n}\n\n.mini-panel-content {\n padding: 0;\n font-size: 11px;\n line-height: 1.5;\n font-family: var(--font-mono);\n letter-spacing: 0.3px;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.mini-panel-content .profiler-content {\n display: block !important;\n background: transparent;\n}\n\n.mini-panel-content .list-scroll-wrapper {\n max-height: calc(100vh - 120px);\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n}\n\n.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar {\n width: 4px;\n}\n\n.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 2px;\n}\n\n.mini-panel-content .list-scroll-wrapper::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.mini-panel-content .parameters {\n background: transparent;\n border: none;\n box-shadow: none;\n padding: 4px;\n}\n\n.mini-panel-content .list-container.parameters {\n padding: 2px 6px 0px 6px !important;\n}\n\n.mini-panel-content .list-header {\n display: none;\n padding: 2px 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.mini-panel-content .list-item {\n border-bottom: 1px solid rgba(74, 74, 90, 0.2);\n transition: background-color 0.15s;\n}\n\n.mini-panel-content .list-item:last-child {\n border-bottom: none;\n}\n\n.mini-panel-content .list-item:hover {\n background-color: rgba(255, 255, 255, 0.04);\n}\n\n.mini-panel-content .list-item.actionable:hover {\n background-color: rgba(255, 255, 255, 0.06);\n cursor: pointer;\n}\n\n/* Style adjustments for lil-gui look */\n.mini-panel-content .item-row {\n padding: 3px 8px;\n min-height: 24px;\n}\n\n.mini-panel-content .list-item-row {\n padding: 1px 4px;\n gap: 8px;\n min-height: 21px;\n align-items: center;\n}\n\n.mini-panel-content input[type=\"checkbox\"] {\n width: 12px;\n height: 12px;\n}\n\n.mini-panel-content input[type=\"range\"] {\n height: 18px;\n}\n\n.mini-panel-content .value-number input,\n.mini-panel-content .value-slider input {\n background-color: rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(74, 74, 90, 0.5);\n font-size: 10px;\n}\n\n.mini-panel-content .value-number input:focus,\n.mini-panel-content .value-slider input:focus {\n border-color: var(--accent-color);\n}\n\n.mini-panel-content .value-slider {\n gap: 6px;\n}\n\n/* Compact nested items */\n.mini-panel-content .list-item .list-item {\n margin-left: 8px;\n}\n\n.mini-panel-content .list-item .list-item .item-row,\n.mini-panel-content .list-item .list-item .list-item-row {\n padding: 2px 6px;\n min-height: 22px;\n}\n\n/* Compact collapsible headers */\n.mini-panel-content .collapsible .item-row,\n.mini-panel-content .list-item-row.collapsible {\n padding: 2px 8px;\n font-weight: 600;\n min-height: 16px;\n display: flex;\n align-items: center;\n}\n\n.mini-panel-content .collapsible-icon {\n font-size: 10px;\n width: 14px;\n height: 14px;\n}\n\n.mini-panel-content .param-control input[type=\"range\"] {\n height: 12px;\n margin-top: 1px;\n padding-top: 5px;\n user-select: none;\n -webkit-user-select: none;\n outline: none;\n}\n\n.mini-panel-content .param-control input[type=\"range\"]::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n margin-top: -5px;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.mini-panel-content .param-control input[type=\"range\"]::-moz-range-thumb {\n width: 14px;\n height: 14px;\n user-select: none;\n -moz-user-select: none;\n}\n\n.mini-panel-content .list-children-container {\n padding-left: 0;\n}\n\n.mini-panel-content .param-control input[type=\"number\"] {\n flex-basis: 60px !important;\n}\n\n.mini-panel-content .param-control {\n align-items: center;\n}\n\n.mini-panel-content .param-control select {\n font-size: 11px;\n}\n\n.mini-panel-content .list-item-wrapper {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n#profiler-panel {\n position: fixed;\n z-index: 1001 !important;\n bottom: 0;\n left: 0;\n right: 0;\n height: 350px;\n background-color: var(--profiler-bg);\n backdrop-filter: blur(8px);\n border-top: 2px solid var(--profiler-border);\n color: var(--text-primary);\n display: flex;\n flex-direction: column;\n z-index: 1000;\n /*box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);*/\n transform: translateY(100%);\n transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s ease-out, width 0.3s ease-out;\n font-family: var(--font-mono);\n}\n\n#profiler-panel.resizing,\n#profiler-panel.dragging {\n transition: none;\n}\n\n#profiler-panel.visible {\n transform: translateY(0);\n}\n\n#profiler-panel.maximized {\n height: 100vh;\n}\n\n/* Position-specific styles */\n#profiler-panel.position-top {\n bottom: auto;\n top: 0;\n border-top: none;\n border-bottom: 2px solid var(--profiler-border);\n transform: translateY(-100%);\n}\n\n#profiler-panel.position-top.visible {\n transform: translateY(0);\n}\n\n#profiler-panel.position-bottom {\n /* Default position - already defined above */\n}\n\n#profiler-panel.position-left {\n top: 0;\n bottom: 0;\n left: 0;\n right: auto;\n width: 350px;\n height: 100%;\n border-top: none;\n border-right: 2px solid var(--profiler-border);\n transform: translateX(-100%);\n}\n\n#profiler-panel.position-left.visible {\n transform: translateX(0);\n}\n\n#profiler-panel.position-right {\n top: 0;\n bottom: 0;\n left: auto;\n right: 0;\n width: 350px;\n height: 100%;\n border-top: none;\n border-left: 2px solid var(--profiler-border);\n transform: translateX(100%);\n}\n\n#profiler-panel.position-right.visible {\n transform: translateX(0);\n}\n\n#profiler-panel.position-floating {\n border: 2px solid var(--profiler-border);\n border-radius: 8px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n transform: none !important;\n overflow: hidden;\n}\n\n#profiler-panel.position-floating.visible {\n transform: none !important;\n}\n\n#profiler-panel.position-floating .profiler-header {\n border-radius: 6px 6px 0 0;\n}\n\n#profiler-panel.position-floating .panel-resizer {\n bottom: 0;\n right: 0;\n top: auto;\n left: auto;\n width: 16px;\n height: 16px;\n cursor: nwse-resize;\n border-radius: 0 0 6px 0;\n}\n\n#profiler-panel.position-floating .panel-resizer::after {\n content: '';\n position: absolute;\n right: 2px;\n bottom: 2px;\n width: 10px;\n height: 10px;\n background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--profiler-border) 45%, var(--profiler-border) 55%, transparent 55%);\n}\n\n\n.panel-resizer {\n position: absolute;\n top: -2px;\n left: 0;\n width: 100%;\n height: 5px;\n cursor: ns-resize;\n z-index: 1001;\n touch-action: none;\n}\n\n#profiler-panel.position-top .panel-resizer {\n top: auto;\n bottom: -2px;\n}\n\n#profiler-panel.position-left .panel-resizer {\n top: 0;\n left: auto;\n right: -2px;\n width: 5px;\n height: 100%;\n cursor: ew-resize;\n}\n\n#profiler-panel.position-right .panel-resizer {\n top: 0;\n left: -2px;\n right: auto;\n width: 5px;\n height: 100%;\n cursor: ew-resize;\n}\n\n.profiler-header {\n display: flex;\n background-color: var(--profiler-header-bg);\n border-bottom: 1px solid var(--profiler-border);\n flex-shrink: 0;\n justify-content: space-between;\n align-items: stretch;\n\n overflow-x: auto;\n overflow-y: hidden;\n width: calc(100% - 134px);\n height: 38px;\n user-select: none;\n -webkit-user-select: none;\n}\n\n/* Adjust header width based on panel position */\n#profiler-panel.position-right .profiler-header,\n#profiler-panel.position-left .profiler-header {\n width: calc(100% - 134px);\n}\n\n#profiler-panel.position-bottom .profiler-header,\n#profiler-panel.position-top .profiler-header {\n width: calc(100% - 134px);\n}\n\n/* Adjust header width when position toggle button is hidden (mobile) */\n#profiler-panel.hide-position-toggle .profiler-header {\n width: calc(100% - 90px);\n}\n\n/* ===== RULES FOR WHEN THERE ARE NO TABS ===== */\n\n/* Horizontal mode (bottom/top) without tabs */\n#profiler-panel.position-bottom.no-tabs:not(.maximized),\n#profiler-panel.position-top.no-tabs:not(.maximized) {\n height: 38px !important;\n min-height: 38px !important;\n}\n\n#profiler-panel.position-bottom.no-tabs .profiler-header,\n#profiler-panel.position-top.no-tabs .profiler-header {\n width: 100%;\n height: 38px;\n border-bottom: none;\n}\n\n#profiler-panel.position-bottom.no-tabs .profiler-content-wrapper,\n#profiler-panel.position-top.no-tabs .profiler-content-wrapper {\n display: none;\n}\n\n#profiler-panel.position-bottom.no-tabs .panel-resizer,\n#profiler-panel.position-top.no-tabs .panel-resizer {\n display: none;\n}\n\n/* Vertical mode (right/left) without tabs */\n#profiler-panel.position-right.no-tabs:not(.maximized),\n#profiler-panel.position-left.no-tabs:not(.maximized) {\n width: 45px !important;\n min-width: 45px !important;\n}\n\n/* Vertical layout for header when no tabs */\n#profiler-panel.position-right.no-tabs .profiler-header,\n#profiler-panel.position-left.no-tabs .profiler-header {\n width: 100%;\n flex-direction: column;\n height: 100%;\n border-bottom: none;\n}\n\n/* Vertical layout for controls when no tabs */\n#profiler-panel.position-right.no-tabs .profiler-controls,\n#profiler-panel.position-left.no-tabs .profiler-controls {\n position: static;\n flex-direction: column-reverse;\n justify-content: flex-end;\n width: 100%;\n height: 100%;\n border-bottom: none;\n border-left: none;\n background: transparent;\n}\n\n#profiler-panel.position-right.no-tabs .profiler-controls button,\n#profiler-panel.position-left.no-tabs .profiler-controls button {\n width: 100%;\n height: 45px;\n border-left: none;\n border-top: none;\n border-bottom: 1px solid var(--profiler-border);\n}\n\n#profiler-panel.position-right.no-tabs .profiler-content-wrapper,\n#profiler-panel.position-left.no-tabs .profiler-content-wrapper {\n display: none;\n}\n\n#profiler-panel.position-right.no-tabs .profiler-tabs,\n#profiler-panel.position-left.no-tabs .profiler-tabs {\n display: none;\n}\n\n#profiler-panel.position-right.no-tabs .panel-resizer,\n#profiler-panel.position-left.no-tabs .panel-resizer {\n display: none;\n}\n\n/* Hide position toggle on mobile without tabs */\n#profiler-panel.hide-position-toggle.position-right.no-tabs:not(.maximized),\n#profiler-panel.hide-position-toggle.position-left.no-tabs:not(.maximized) {\n width: 45px !important;\n min-width: 45px !important;\n}\n\n/* Hide drag indicator on mobile devices */\n#profiler-panel.is-mobile .tab-btn.active::before {\n display: none;\n}\n\n.profiler-header::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.profiler-header::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.profiler-header::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.25);\n border-radius: 10px;\n transition: background 0.3s ease;\n}\n\n.profiler-header::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n}\n\n.profiler-header::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n#profiler-panel.dragging .profiler-header {\n cursor: grabbing !important;\n}\n\n#profiler-panel.dragging {\n opacity: 0.8;\n}\n\n.profiler-tabs {\n display: flex;\n cursor: grab;\n position: relative;\n}\n\n.profiler-tabs:active {\n cursor: grabbing;\n}\n\n.profiler-tabs::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.profiler-tabs::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.profiler-tabs::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.25);\n border-radius: 10px;\n transition: background 0.3s ease;\n}\n\n.profiler-tabs::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n}\n\n.profiler-tabs::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n.profiler-controls {\n display: flex;\n position: absolute;\n right: 0;\n top: 0;\n height: 38px;\n background: var(--profiler-header-bg);\n border-bottom: 1px solid var(--profiler-border);\n}\n\n.tab-btn {\n position: relative;\n background: transparent;\n border: none;\n /*border-right: 1px solid var(--profiler-border);*/\n color: var(--text-secondary);\n padding: 8px 18px;\n cursor: default;\n display: flex;\n align-items: center;\n font-family: var(--font-family);\n font-weight: 600;\n font-size: 14px;\n user-select: none;\n transition: opacity 0.2s, transform 0.2s;\n touch-action: pan-x;\n}\n\n.tab-btn.active {\n border-bottom: 2px solid var(--accent-color);\n color: white;\n}\n\n.tab-btn.active::before {\n content: '⋮⋮';\n position: absolute;\n left: 3px;\n top: calc(50% - .1rem);\n transform: translateY(-50%);\n color: var(--profiler-border);\n font-size: 18px;\n letter-spacing: -2px;\n opacity: 0.6;\n}\n\n.tab-btn.no-detach.active::before {\n display: none;\n}\n\n#floating-btn,\n#maximize-btn,\n#hide-panel-btn {\n background: transparent;\n border: none;\n border-left: 1px solid var(--profiler-border);\n color: var(--text-secondary);\n width: 45px;\n height: 100%;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n/* Disable transitions in vertical mode to avoid broken animations */\n#profiler-panel.position-right #floating-btn,\n#profiler-panel.position-right #maximize-btn,\n#profiler-panel.position-right #hide-panel-btn,\n#profiler-panel.position-left #floating-btn,\n#profiler-panel.position-left #maximize-btn,\n#profiler-panel.position-left #hide-panel-btn {\n transition: background-color 0.2s, color 0.2s;\n}\n\n#floating-btn:hover,\n#maximize-btn:hover,\n#hide-panel-btn:hover {\n background-color: rgba(255, 255, 255, 0.1);\n color: var(--text-primary);\n}\n\n/* Hide maximize button when there are no tabs */\n#profiler-panel.position-right.no-tabs #maximize-btn,\n#profiler-panel.position-left.no-tabs #maximize-btn,\n#profiler-panel.position-bottom.no-tabs #maximize-btn,\n#profiler-panel.position-top.no-tabs #maximize-btn {\n display: none !important;\n}\n\n.profiler-content-wrapper {\n flex-grow: 1;\n overflow: hidden;\n position: relative;\n}\n\n.profiler-content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n font-size: 13px;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.2s, visibility 0.2s;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.profiler-content.active {\n visibility: visible;\n opacity: 1;\n}\n\n.profiler-content {\n overflow: auto; /* make sure scrollbars can appear */\n}\n\n.profiler-content::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.profiler-content::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.profiler-content::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.25);\n border-radius: 10px;\n transition: background 0.3s ease;\n}\n\n.profiler-content::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n}\n\n.profiler-content::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n.profiler-content {\n scrollbar-width: thin; /* \"auto\" | \"thin\" */\n scrollbar-color: rgba(0, 0, 0, 0.25) transparent;\n}\n\n.list-item-row {\n display: grid;\n align-items: center;\n padding: 4px 8px;\n border-radius: 3px;\n transition: background-color 0.2s;\n gap: 10px;\n border-bottom: none;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.parameters .list-item-row {\n min-height: 31px;\n}\n\n.mini-panel-content .parameters .list-item-row {\n min-height: 21px;\n}\n\n.list-item-wrapper {\n margin-top: 2px;\n margin-bottom: 2px;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.list-item-wrapper:first-child {\n /*margin-top: 0;*/\n}\n\n.list-item-wrapper:not(.header-wrapper):nth-child(odd) > .list-item-row {\n background-color: rgba(0,0,0,0.1);\n}\n\n.list-item-wrapper.header-wrapper>.list-item-row {\n color: var(--accent-color);\n background-color: rgba(0, 170, 255, 0.1);\n}\n\n.list-item-wrapper.header-wrapper>.list-item-row>.list-item-cell:first-child {\n font-weight: 600;\n line-height: 1;\n}\n\n.list-item-row.collapsible,\n.list-item-row.actionable {\n cursor: pointer;\n}\n\n.list-item-row.collapsible {\n background-color: rgba(0, 170, 255, 0.15) !important;\n min-height: 23px;\n}\n\n.list-item-row.collapsible.alert,\n.list-item-row.alert {\n background-color: rgba(244, 67, 54, 0.1) !important;\n}\n\n@media (hover: hover) {\n\n .list-item-row:hover:not(.collapsible):not(.no-hover),\n .list-item-row:hover:not(.no-hover),\n .list-item-row.actionable:hover,\n .list-item-row.collapsible.actionable:hover {\n background-color: rgba(255, 255, 255, 0.05) !important;\n }\n\n .list-item-row.collapsible:hover {\n background-color: rgba(0, 170, 255, 0.25) !important;\n }\n\n}\n\n.list-item-cell {\n white-space: pre;\n display: flex;\n align-items: center;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.list-item-cell:not(:first-child) {\n justify-content: flex-end;\n font-weight: 600;\n}\n\n.list-header {\n display: grid;\n align-items: center;\n padding: 4px 8px;\n font-weight: 600;\n color: var(--text-secondary);\n padding-bottom: 6px;\n border-bottom: 1px solid var(--profiler-border);\n margin-bottom: 5px;\n gap: 10px;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.list-item-wrapper.section-start {\n margin-top: 5px;\n margin-bottom: 5px;\n}\n\n.list-header .list-header-cell:not(:first-child) {\n text-align: right;\n}\n\n.list-children-container {\n padding-left: 1.5em;\n overflow: hidden;\n transition: max-height 0.1s ease-out;\n margin-top: 2px;\n}\n\n.list-children-container.closed {\n max-height: 0;\n}\n\n.item-toggler {\n display: inline-block;\n margin-right: 0.8em;\n text-align: left;\n}\n\n.list-item-row.open .item-toggler::before {\n content: '-';\n}\n\n.list-item-row:not(.open) .item-toggler::before {\n content: '+';\n}\n\n.list-item-cell .value.good {\n color: var(--color-green);\n}\n\n.list-item-cell .value.warn {\n color: var(--color-yellow);\n}\n\n.list-item-cell .value.bad {\n color: var(--color-red);\n}\n\n.list-scroll-wrapper {\n width: max-content;\n min-width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100%;\n}\n\n.list-container.parameters .list-item-row:not(.collapsible) {\n}\n\n.graph-container {\n width: 100%;\n box-sizing: border-box;\n padding: 8px 0;\n position: relative;\n}\n\n.graph-svg {\n width: 100%;\n height: 80px;\n background-color: var(--profiler-header);\n border: 1px solid var(--profiler-border);\n border-radius: 4px;\n}\n\n.graph-path {\n stroke-width: 2;\n fill-opacity: 0.4;\n}\n\n.console-header {\n padding: 10px;\n border-bottom: 1px solid var(--profiler-border);\n display: flex;\n gap: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n}\n\n.console-buttons-group {\n display: flex;\n gap: 20px;\n}\n\n.console-filter-input {\n background-color: var(--profiler-bg);\n border: 1px solid var(--profiler-border);\n color: var(--text-primary);\n border-radius: 4px;\n padding: 4px 8px;\n font-family: var(--font-mono);\n flex-grow: 1;\n max-width: 300px;\n border-radius: 15px;\n}\n\n.console-filter-input:focus {\n outline: none;\n border-color: var(--text-secondary);\n}\n\n.console-copy-button {\n background: transparent;\n border: none;\n color: var(--text-secondary);\n cursor: pointer;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: color 0.2s, background-color 0.2s;\n}\n\n.console-copy-button:hover {\n color: var(--text-primary);\n background-color: var(--profiler-hover);\n}\n\n.console-copy-button.copied {\n color: var(--color-green);\n}\n\n#console-log {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 10px;\n overflow-y: auto;\n flex-grow: 1;\n user-select: text;\n -webkit-user-select: text;\n}\n\n.log-message {\n padding: 2px 5px;\n white-space: pre-wrap;\n word-break: break-all;\n border-radius: 3px;\n line-height: 1.5 !important;\n}\n\n.log-message.hidden {\n display: none;\n}\n\n.log-message.info {\n color: var(--text-primary);\n}\n\n.log-message.warn {\n color: var(--color-yellow);\n}\n\n.log-message.error {\n color: #f9dedc;\n background-color: rgba(244, 67, 54, 0.1);\n}\n\n.log-prefix {\n color: var(--text-secondary);\n margin-right: 8px;\n}\n\n.log-code {\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 3px;\n padding: 1px 4px;\n}\n\n.thumbnail-container {\n display: flex;\n align-items: center;\n}\n\n.thumbnail-svg {\n width: 40px;\n height: 22.5px;\n flex-shrink: 0;\n margin-right: 8px;\n}\n\n.param-control {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n width: 100%;\n}\n\n.param-control input,\n.param-control select,\n.param-control button {\n background-color: var(--profiler-bg);\n border: 1px solid var(--profiler-border);\n color: var(--text-primary);\n border-radius: 4px;\n padding: 4px 6px;\n padding-bottom: 2px;\n font-family: var(--font-mono);\n width: 100%;\n box-sizing: border-box;\n}\n\n.param-control input:focus {\n outline: none;\n border-color: var(--accent-color);\n}\n\n.param-control select {\n padding-top: 3px;\n padding-bottom: 1px;\n}\n\n.param-control input[type=\"number\"] {\n cursor: ns-resize;\n}\n\n.param-control input[type=\"color\"] {\n padding: 2px;\n}\n\n.param-control button {\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.param-control button:hover {\n background-color: var(--profiler-header);\n}\n\n.param-control-vector {\n display: flex;\n gap: 5px;\n}\n\n.custom-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 8px;\n will-change: transform;\n}\n\n.custom-checkbox input {\n display: none;\n}\n\n.custom-checkbox .checkmark {\n width: 14px;\n height: 14px;\n border: 1px solid var(--accent-color);\n border-radius: 3px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.2s, border-color 0.2s;\n}\n\n.custom-checkbox .checkmark::after {\n content: '';\n width: 6px;\n height: 6px;\n background-color: var(--accent-color);\n border-radius: 1px;\n display: block;\n transform: scale(0);\n transition: transform 0.2s;\n}\n\n.custom-checkbox input:checked+.checkmark {\n border-color: var(--accent-color);\n}\n\n.custom-checkbox input:checked+.checkmark::after {\n transform: scale(1);\n}\n\n.param-control input[type=\"range\"] {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 16px;\n background: var(--profiler-header);\n border-radius: 5px;\n border: 1px solid var(--profiler-border);\n outline: none;\n padding: 0px;\n padding-top: 8px;\n}\n\n.param-control input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 18px;\n height: 18px;\n background: var(--profiler-bg);\n border: 1px solid var(--accent-color);\n border-radius: 3px;\n cursor: pointer;\n margin-top: -8px;\n}\n\n.param-control input[type=\"range\"]::-moz-range-thumb {\n width: 18px;\n height: 18px;\n background: var(--profiler-bg);\n border: 2px solid var(--accent-color);\n border-radius: 3px;\n cursor: pointer;\n}\n\n.param-control input[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: 16px;\n background: var(--profiler-header);\n border-radius: 5px;\n border: 1px solid var(--profiler-border);\n}\n\n/* Override .param-control styles for mini-panel-content */\n.mini-panel-content input,\n.mini-panel-content select,\n.mini-panel-content button {\n padding: 2px 4px;\n height: 21px;\n line-height: 1.4;\n padding-top: 4px;\n}\n\n.mini-panel-content .param-control input,\n.mini-panel-content .param-control select,\n.mini-panel-content .param-control button {\n background-color: #1e1e24c2;\n line-height: 1.0;\n}\n\n.mini-panel-content .param-control select {\n padding: 2px 2px;\n padding-top: 3px;\n}\n\n.mini-panel-content .param-control input[type=\"number\"]::-webkit-outer-spin-button,\n.mini-panel-content .param-control input[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.mini-panel-content .param-control input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n.mini-panel-content .list-item-cell span {\n position: relative;\n top: 1px;\n margin-left: 2px;\n}\n\n.mini-panel-content .custom-checkbox .checkmark {\n width: 12px;\n height: 12px;\n margin-bottom: 2px;\n will-change: transform;\n}\n\n.mini-panel-content .list-container.parameters .list-item-row:not(.collapsible) {\n margin-bottom: 2px;\n}\n\n@media screen and (max-width: 450px) and (orientation: portrait) {\n\n .console-filter-input {\n max-width: 100px;\n }\n\n}\n\n/* Touch device optimizations */\n@media (hover: none) and (pointer: coarse) {\n\n .panel-resizer {\n top: -10px !important;\n height: 20px !important;\n }\n\n #profiler-panel.position-top .panel-resizer {\n top: auto !important;\n bottom: -10px !important;\n height: 20px !important;\n }\n\n #profiler-panel.position-left .panel-resizer {\n right: -10px !important;\n width: 20px !important;\n height: 100% !important;\n }\n\n #profiler-panel.position-right .panel-resizer {\n left: -10px !important;\n width: 20px !important;\n height: 100% !important;\n }\n\n .detached-tab-resizer-top,\n .detached-tab-resizer-bottom {\n height: 10px !important;\n }\n\n .detached-tab-resizer-left,\n .detached-tab-resizer-right {\n width: 10px !important;\n }\n\n}\n\n.drag-preview-indicator {\n position: fixed;\n background-color: rgba(0, 170, 255, 0.2);\n border: 2px dashed var(--accent-color);\n z-index: 999;\n pointer-events: none;\n transition: all 0.2s ease-out;\n}\n\n/* Detached Tab Windows */\n.detached-tab-panel {\n position: fixed;\n width: 500px;\n height: 400px;\n background: var(--profiler-bg);\n border: 1px solid var(--profiler-border);\n border-radius: 8px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n z-index: 1002;\n display: flex;\n flex-direction: column;\n backdrop-filter: blur(10px);\n overflow: hidden;\n opacity: 1;\n visibility: visible;\n transition: opacity 0.2s, visibility 0.2s;\n}\n\n#profiler-panel:not(.visible) ~ * .detached-tab-panel,\nbody:has(#profiler-panel:not(.visible)) .detached-tab-panel {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}\n\n.detached-tab-header {\n background: var(--profiler-header-bg);\n padding: 0 7px 0 15px;\n font-family: var(--font-family);\n font-size: 14px;\n color: var(--text-primary);\n font-weight: 600;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid var(--profiler-border);\n cursor: grab;\n user-select: none;\n height: 38px;\n flex-shrink: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n touch-action: none;\n}\n\n.detached-tab-header:active {\n cursor: grabbing;\n}\n\n.detached-header-controls {\n display: flex;\n gap: 5px;\n}\n\n.detached-reattach-btn {\n background: transparent;\n border: none;\n color: var(--text-secondary);\n font-family: var(--font-family);\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.detached-reattach-btn:hover {\n background: rgba(0, 170, 255, 0.2);\n color: var(--accent-color);\n}\n\n.detached-tab-content {\n flex: 1;\n overflow: auto;\n position: relative;\n background: var(--profiler-bg);\n}\n\n.detached-tab-content::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.detached-tab-content::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.detached-tab-content::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.25);\n border-radius: 10px;\n transition: background 0.3s ease;\n}\n\n.detached-tab-content::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n}\n\n.detached-tab-content::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n.detached-tab-content .profiler-content {\n display: block !important;\n height: 100%;\n visibility: visible !important;\n opacity: 1 !important;\n position: relative !important;\n}\n\n.detached-tab-content .profiler-content > * {\n font-family: var(--font-mono);\n color: var(--text-primary);\n}\n\n.detached-tab-resizer {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 20px;\n height: 20px;\n cursor: nwse-resize;\n z-index: 10;\n touch-action: none;\n}\n\n.detached-tab-resizer::after {\n content: '';\n position: absolute;\n bottom: 2px;\n right: 2px;\n width: 12px;\n height: 12px;\n border-right: 2px solid var(--profiler-border);\n border-bottom: 2px solid var(--profiler-border);\n border-bottom-right-radius: 6px;\n opacity: 0.5;\n}\n\n.detached-tab-resizer:hover::after {\n opacity: 1;\n border-color: var(--accent-color);\n}\n\n/* Edge resizers */\n.detached-tab-resizer-top {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 5px;\n cursor: ns-resize;\n z-index: 10;\n touch-action: none;\n}\n\n.detached-tab-resizer-right {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 5px;\n cursor: ew-resize;\n z-index: 10;\n touch-action: none;\n}\n\n.detached-tab-resizer-bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 5px;\n cursor: ns-resize;\n z-index: 10;\n touch-action: none;\n}\n\n.detached-tab-resizer-left {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 5px;\n cursor: ew-resize;\n z-index: 10;\n touch-action: none;\n}\n\n/* Input number spin buttons - hide arrows */\n/* Chrome, Safari, Edge, Opera */\n#profiler-panel input[type=\"number\"]::-webkit-outer-spin-button,\n#profiler-panel input[type=\"number\"]::-webkit-inner-spin-button,\n.detached-tab-content input[type=\"number\"]::-webkit-outer-spin-button,\n.detached-tab-content input[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\n#profiler-panel input[type=\"number\"],\n.detached-tab-content input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n.panel-action-btn {\n background: transparent;\n color: var(--text-primary);\n border: 1px solid var(--profiler-border);\n border-radius: 4px;\n padding: 6px 12px;\n cursor: pointer;\n font-family: var(--font-family);\n font-size: 12px;\n transition: background-color 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.panel-action-btn:hover {\n background-color: rgba(255, 255, 255, 0.05);\n}\n", document.head.appendChild(e);
|
|
297
|
+
}
|
|
298
|
+
}, et = class extends b {
|
|
299
|
+
constructor(e) {
|
|
300
|
+
super(), this.inspector = e, this.tabs = {}, this.activeTabId = null, this.isResizing = !1, this.lastHeightBottom = 350, this.lastWidthRight = 450, this.position = "bottom", this.detachedWindows = [], this.maxZIndex = 1002, this.nextTabOriginalIndex = 0, $e.init(), this.setupShell(), this.setupResizing(), this.setupWindowResizeListener(), this.setupOrientationListener();
|
|
301
|
+
}
|
|
302
|
+
getSize() {
|
|
303
|
+
return this.panel.classList.contains("visible") === !1 || this.panel.classList.contains("no-tabs") ? {
|
|
304
|
+
width: 0,
|
|
305
|
+
height: 0
|
|
306
|
+
} : this.position === "right" ? {
|
|
307
|
+
width: this.panel.offsetWidth,
|
|
308
|
+
height: 0
|
|
309
|
+
} : {
|
|
310
|
+
width: 0,
|
|
311
|
+
height: this.panel.offsetHeight
|
|
312
|
+
};
|
|
313
|
+
}
|
|
314
|
+
get isMobile() {
|
|
315
|
+
return this.detectMobile();
|
|
316
|
+
}
|
|
317
|
+
get isSmallScreen() {
|
|
318
|
+
return window.innerWidth <= 768;
|
|
319
|
+
}
|
|
320
|
+
detectMobile() {
|
|
321
|
+
let e = navigator.userAgent || navigator.vendor || window.opera, t = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(e), n = "ontouchstart" in window || navigator.maxTouchPoints > 0;
|
|
322
|
+
return t || n && this.isSmallScreen;
|
|
323
|
+
}
|
|
324
|
+
setupOrientationListener() {
|
|
325
|
+
let e = () => {
|
|
326
|
+
if (!this.isMobile) return;
|
|
327
|
+
let e = window.innerWidth > window.innerHeight ? "right" : "bottom";
|
|
328
|
+
this.position !== e && this.setPosition(e);
|
|
329
|
+
};
|
|
330
|
+
e(), window.addEventListener("orientationchange", e), window.addEventListener("resize", e);
|
|
331
|
+
}
|
|
332
|
+
setupWindowResizeListener() {
|
|
333
|
+
let e = () => {
|
|
334
|
+
this.detachedWindows.forEach((e) => {
|
|
335
|
+
this.constrainWindowToBounds(e.panel);
|
|
336
|
+
});
|
|
337
|
+
}, t = () => {
|
|
338
|
+
if (this.panel.classList.contains("maximized")) return;
|
|
339
|
+
let e = window.innerWidth, t = window.innerHeight;
|
|
340
|
+
if (this.position === "bottom") {
|
|
341
|
+
let e = this.panel.offsetHeight, n = t - 50;
|
|
342
|
+
e > n && (this.panel.style.height = `${n}px`, this.lastHeightBottom = n);
|
|
343
|
+
} else if (this.position === "right") {
|
|
344
|
+
let t = this.panel.offsetWidth, n = e - 50;
|
|
345
|
+
t > n && (this.panel.style.width = `${n}px`, this.lastWidthRight = n);
|
|
346
|
+
}
|
|
347
|
+
};
|
|
348
|
+
window.addEventListener("resize", () => {
|
|
349
|
+
this.isSmallScreen ? (this.floatingBtn.style.display = "none", this.panel.classList.add("hide-position-toggle")) : (this.floatingBtn.style.display = "", this.panel.classList.remove("hide-position-toggle")), this.isMobile ? this.panel.classList.add("is-mobile") : this.panel.classList.remove("is-mobile"), e(), t();
|
|
350
|
+
});
|
|
351
|
+
}
|
|
352
|
+
constrainWindowToBounds(e) {
|
|
353
|
+
let t = window.innerWidth, n = window.innerHeight, r = e.offsetWidth, i = e.offsetHeight, a = parseFloat(e.style.left) || e.offsetLeft || 0, o = parseFloat(e.style.top) || e.offsetTop || 0, s = r / 2, c = i / 2;
|
|
354
|
+
a + r > t + s && (a = t + s - r), a < -s && (a = -s), o + i > n + c && (o = n + c - i), o < -c && (o = -c), e.style.left = `${a}px`, e.style.top = `${o}px`;
|
|
355
|
+
}
|
|
356
|
+
setupShell() {
|
|
357
|
+
this.domElement = document.createElement("div"), this.domElement.id = "profiler-shell", this.toggleButton = document.createElement("button"), this.toggleButton.id = "profiler-toggle", this.toggleButton.innerHTML = "\n<span id=\"builtin-tabs-container\"></span>\n<span id=\"toggle-text\">\n <span id=\"fps-counter\">-</span>\n <span class=\"fps-label\">FPS</span>\n</span>\n<span id=\"toggle-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-device-ipad-horizontal-search\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M11.5 20h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v5.5\" /><path d=\"M9 17h2\" /><path d=\"M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" /><path d=\"M20.2 20.2l1.8 1.8\" /></svg>\n</span>\n", this.toggleButton.onclick = () => this.togglePanel(), this.builtinTabsContainer = this.toggleButton.querySelector("#builtin-tabs-container"), this.miniPanel = document.createElement("div"), this.miniPanel.id = "profiler-mini-panel", this.miniPanel.className = "profiler-mini-panel", this.panel = document.createElement("div"), this.panel.id = "profiler-panel";
|
|
358
|
+
let e = document.createElement("div");
|
|
359
|
+
e.className = "profiler-header", e.addEventListener("wheel", (t) => {
|
|
360
|
+
t.deltaY !== 0 && (t.preventDefault(), e.scrollLeft += t.deltaY * .25);
|
|
361
|
+
}, { passive: !1 }), this.tabsContainer = document.createElement("div"), this.tabsContainer.className = "profiler-tabs";
|
|
362
|
+
let t = document.createElement("div");
|
|
363
|
+
t.className = "profiler-controls", this.floatingBtn = document.createElement("button"), this.floatingBtn.id = "floating-btn", this.floatingBtn.title = "Switch to Right Side", this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"></line></svg>", this.floatingBtn.onclick = () => this.togglePosition(), this.isSmallScreen && (this.floatingBtn.style.display = "none", this.panel.classList.add("hide-position-toggle")), this.isMobile && this.panel.classList.add("is-mobile"), this.maximizeBtn = document.createElement("button"), this.maximizeBtn.id = "maximize-btn", this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>", this.maximizeBtn.onclick = () => this.toggleMaximize();
|
|
364
|
+
let n = document.createElement("button");
|
|
365
|
+
n.id = "hide-panel-btn", n.textContent = "-", n.onclick = () => this.togglePanel(), t.append(this.floatingBtn, this.maximizeBtn, n), e.append(this.tabsContainer, t), this.contentWrapper = document.createElement("div"), this.contentWrapper.className = "profiler-content-wrapper";
|
|
366
|
+
let r = document.createElement("div");
|
|
367
|
+
r.className = "panel-resizer", this.panel.append(r, e, this.contentWrapper), this.domElement.append(this.toggleButton, this.miniPanel, this.panel), this.panel.classList.add(`position-${this.position}`), this.position === "right" && (this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right"));
|
|
368
|
+
}
|
|
369
|
+
setupResizing() {
|
|
370
|
+
let e = this.panel.querySelector(".panel-resizer");
|
|
371
|
+
e.addEventListener("pointerdown", (t) => {
|
|
372
|
+
this.isResizing = !0, this.panel.classList.add("resizing"), e.setPointerCapture(t.pointerId);
|
|
373
|
+
let n = t.clientX, r = t.clientY, i = this.panel.offsetHeight, a = this.panel.offsetWidth, o = (e) => {
|
|
374
|
+
if (!this.isResizing) return;
|
|
375
|
+
e.preventDefault();
|
|
376
|
+
let t = e.clientX, o = e.clientY;
|
|
377
|
+
if (this.position === "bottom") {
|
|
378
|
+
let e = i - (o - r);
|
|
379
|
+
e > 100 && e < window.innerHeight - 50 && (this.panel.style.height = `${e}px`);
|
|
380
|
+
} else if (this.position === "right") {
|
|
381
|
+
let e = a - (t - n);
|
|
382
|
+
e > 200 && e < window.innerWidth - 50 && (this.panel.style.width = `${e}px`);
|
|
383
|
+
}
|
|
384
|
+
this.dispatchEvent({ type: "resize" });
|
|
385
|
+
}, s = () => {
|
|
386
|
+
this.isResizing = !1, this.panel.classList.remove("resizing"), e.removeEventListener("pointermove", o), e.removeEventListener("pointerup", s), e.removeEventListener("pointercancel", s), this.panel.classList.contains("maximized") || (this.position === "bottom" ? this.lastHeightBottom = this.panel.offsetHeight : this.position === "right" && (this.lastWidthRight = this.panel.offsetWidth), this.saveLayout());
|
|
387
|
+
};
|
|
388
|
+
e.addEventListener("pointermove", o), e.addEventListener("pointerup", s), e.addEventListener("pointercancel", s);
|
|
389
|
+
});
|
|
390
|
+
}
|
|
391
|
+
toggleMaximize() {
|
|
392
|
+
this.panel.classList.contains("maximized") ? (this.panel.classList.remove("maximized"), this.position === "bottom" ? (this.panel.style.height = `${this.lastHeightBottom}px`, this.panel.style.width = "100%") : this.position === "right" && (this.panel.style.height = "100%", this.panel.style.width = `${this.lastWidthRight}px`), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>") : (this.position === "bottom" ? this.lastHeightBottom = this.panel.offsetHeight : this.position === "right" && (this.lastWidthRight = this.panel.offsetWidth), this.panel.classList.add("maximized"), this.position === "bottom" ? (this.panel.style.height = "100vh", this.panel.style.width = "100%") : this.position === "right" && (this.panel.style.height = "100%", this.panel.style.width = "100vw"), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\" ry=\"2\"></rect><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path></svg>"), this.dispatchEvent({ type: "resize" });
|
|
393
|
+
}
|
|
394
|
+
hide() {
|
|
395
|
+
this.miniPanel.classList.remove("visible"), this.miniPanel.querySelectorAll(".mini-panel-content").forEach((e) => {
|
|
396
|
+
e.style.display = "none";
|
|
397
|
+
}), this.builtinTabsContainer.querySelectorAll(".builtin-tab-btn").forEach((e) => {
|
|
398
|
+
e.classList.remove("active");
|
|
399
|
+
});
|
|
400
|
+
}
|
|
401
|
+
show(e) {
|
|
402
|
+
if (this.hide(), e.builtinButton.classList.add("active"), !e.miniContent.firstChild) for (; e.content.firstChild;) e.miniContent.appendChild(e.content.firstChild);
|
|
403
|
+
e.miniContent.style.display = "block", this.miniPanel.classList.add("visible");
|
|
404
|
+
}
|
|
405
|
+
addTab(e) {
|
|
406
|
+
this.tabs[e.id] = e, e.originalIndex = this.nextTabOriginalIndex++, e.allowDetach === !1 && e.button.classList.add("no-detach"), e.onVisibilityChange = () => this.updatePanelSize(), this.setupTabDragAndDrop(e), e.builtin || this.tabsContainer.appendChild(e.button), this.contentWrapper.appendChild(e.content), e.isVisible || (e.button.style.display = "none", e.content.style.display = "none"), e.builtin && this.addBuiltinTab(e), this.updatePanelSize(), e.profiler = this;
|
|
407
|
+
}
|
|
408
|
+
addBuiltinTab(e) {
|
|
409
|
+
let t = document.createElement("button");
|
|
410
|
+
t.className = "builtin-tab-btn", e.icon ? t.innerHTML = e.icon : t.textContent = e.button.textContent.charAt(0).toUpperCase(), t.title = e.button.textContent;
|
|
411
|
+
let n = document.createElement("div");
|
|
412
|
+
n.className = "mini-panel-content", n.style.display = "none", e.builtinButton = t, e.miniContent = n, this.miniPanel.appendChild(n), t.onclick = (t) => {
|
|
413
|
+
t.stopPropagation(), n.style.display !== "none" && n.children.length > 0 ? this.hide() : this.show(e);
|
|
414
|
+
}, this.builtinTabsContainer.appendChild(t), e.builtinButton = t, e.miniContent = n, e.isVisible || (t.style.display = "none", n.style.display = "none", Array.from(this.builtinTabsContainer.querySelectorAll(".builtin-tab-btn")).some((e) => e.style.display !== "none") || (this.builtinTabsContainer.style.display = "none"));
|
|
415
|
+
}
|
|
416
|
+
removeTab(e) {
|
|
417
|
+
if (!(!e || this.tabs[e.id] === void 0)) {
|
|
418
|
+
if (delete this.tabs[e.id], e.isDetached && e.detachedWindow) {
|
|
419
|
+
e.detachedWindow.panel && e.detachedWindow.panel.parentNode && e.detachedWindow.panel.parentNode.removeChild(e.detachedWindow.panel);
|
|
420
|
+
let t = this.detachedWindows.indexOf(e.detachedWindow);
|
|
421
|
+
t !== -1 && this.detachedWindows.splice(t, 1);
|
|
422
|
+
}
|
|
423
|
+
if (e.builtin ? (e.builtinButton && e.builtinButton.parentNode && e.builtinButton.parentNode.removeChild(e.builtinButton), e.miniContent && e.miniContent.parentNode && e.miniContent.parentNode.removeChild(e.miniContent), Array.from(this.builtinTabsContainer.querySelectorAll(".builtin-tab-btn")).some((e) => e.style.display !== "none") || (this.builtinTabsContainer.style.display = "none")) : e.button && e.button.parentNode && e.button.parentNode.removeChild(e.button), e.content && e.content.parentNode && e.content.parentNode.removeChild(e.content), this.activeTabId === e.id) {
|
|
424
|
+
this.activeTabId = null;
|
|
425
|
+
let e = Object.values(this.tabs).filter((e) => !e.isDetached && e.isVisible);
|
|
426
|
+
e.length > 0 ? this.setActiveTab(e[0].id) : this.updatePanelSize();
|
|
427
|
+
} else this.updatePanelSize();
|
|
428
|
+
e.onVisibilityChange = null, e.profiler = null;
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
updatePanelSize() {
|
|
432
|
+
Object.values(this.tabs).some((e) => !e.isDetached && e.isVisible) ? (this.panel.classList.remove("no-tabs"), Object.keys(this.tabs).length > 0 && (this.position === "bottom" ? parseInt(this.panel.style.height) === 38 && (this.panel.style.height = `${this.lastHeightBottom}px`) : this.position === "right" && parseInt(this.panel.style.width) === 45 && (this.panel.style.width = `${this.lastWidthRight}px`))) : (this.panel.classList.add("no-tabs"), this.panel.classList.contains("maximized") && (this.panel.classList.remove("maximized"), this.maximizeBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>"), this.position === "bottom" ? this.panel.style.height = "38px" : this.position === "right" && (this.panel.style.width = "45px")), this.dispatchEvent({ type: "resize" });
|
|
433
|
+
}
|
|
434
|
+
setupTabDragAndDrop(e) {
|
|
435
|
+
if (e.button.addEventListener("click", () => {
|
|
436
|
+
t || this.setActiveTab(e.id);
|
|
437
|
+
}), e.allowDetach === !1) {
|
|
438
|
+
e.button.style.cursor = "default";
|
|
439
|
+
return;
|
|
440
|
+
}
|
|
441
|
+
let t = !1, n, r, i = !1, a = null, o = (a) => {
|
|
442
|
+
n = a.clientX, r = a.clientY, t = !1, i = !1, e.button.setPointerCapture(a.pointerId);
|
|
443
|
+
}, s = (o) => {
|
|
444
|
+
let s = o.clientX, c = o.clientY, l = Math.abs(s - n), u = Math.abs(c - r);
|
|
445
|
+
!t && (l > 10 || u > 10) && (t = !0, e.button.style.cursor = "grabbing", e.button.style.opacity = "0.5", e.button.style.transform = "scale(1.05)", a = this.createPreviewWindow(e, s, c), a.style.opacity = "0.8"), t && a && (i = !0, o.preventDefault(), a.style.left = `${s - 200}px`, a.style.top = `${c - 20}px`);
|
|
446
|
+
}, c = () => {
|
|
447
|
+
if (t && i && a) {
|
|
448
|
+
a.parentNode && a.parentNode.removeChild(a);
|
|
449
|
+
let t = parseInt(a.style.left) + 200, n = parseInt(a.style.top) + 20;
|
|
450
|
+
this.detachTab(e, t, n);
|
|
451
|
+
} else i || this.setActiveTab(e.id), a && a.parentNode && a.parentNode.removeChild(a);
|
|
452
|
+
e.button.style.opacity = "", e.button.style.transform = "", e.button.style.cursor = "", t = !1, i = !1, a = null, e.button.removeEventListener("pointermove", s), e.button.removeEventListener("pointerup", c), e.button.removeEventListener("pointercancel", c);
|
|
453
|
+
};
|
|
454
|
+
e.button.addEventListener("pointerdown", (t) => {
|
|
455
|
+
this.isMobile && t.pointerType !== "mouse" || (o(t), e.button.addEventListener("pointermove", s), e.button.addEventListener("pointerup", c), e.button.addEventListener("pointercancel", c));
|
|
456
|
+
}), e.button.style.cursor = "grab";
|
|
457
|
+
}
|
|
458
|
+
createPreviewWindow(e, t, n) {
|
|
459
|
+
let r = document.createElement("div");
|
|
460
|
+
r.className = "detached-tab-panel", r.style.left = `${t - 200}px`, r.style.top = `${n - 20}px`, r.style.pointerEvents = "none", this.maxZIndex++, r.style.setProperty("z-index", this.maxZIndex, "important");
|
|
461
|
+
let i = document.createElement("div");
|
|
462
|
+
i.className = "detached-tab-header";
|
|
463
|
+
let a = document.createElement("span");
|
|
464
|
+
a.textContent = e.button.textContent.replace("⇱", "").trim(), i.appendChild(a);
|
|
465
|
+
let o = document.createElement("div");
|
|
466
|
+
o.className = "detached-header-controls";
|
|
467
|
+
let s = document.createElement("button");
|
|
468
|
+
s.className = "detached-reattach-btn", s.innerHTML = "↩", o.appendChild(s), i.appendChild(o);
|
|
469
|
+
let c = document.createElement("div");
|
|
470
|
+
c.className = "detached-tab-content";
|
|
471
|
+
let l = document.createElement("div");
|
|
472
|
+
return l.className = "detached-tab-resizer", r.appendChild(l), r.appendChild(i), r.appendChild(c), document.body.appendChild(r), r;
|
|
473
|
+
}
|
|
474
|
+
detachTab(e, t, n) {
|
|
475
|
+
if (e.isDetached || e.allowDetach === !1) return;
|
|
476
|
+
let r = Array.from(this.tabsContainer.children).map((e) => Object.keys(this.tabs).find((t) => this.tabs[t].button === e)).filter((e) => e !== void 0), i = r.indexOf(e.id), a = null;
|
|
477
|
+
if (this.activeTabId === e.id) {
|
|
478
|
+
e.setActive(!1);
|
|
479
|
+
let t = r.filter((t) => t !== e.id && !this.tabs[t].isDetached && this.tabs[t].isVisible);
|
|
480
|
+
if (t.length > 0) {
|
|
481
|
+
for (let e = i - 1; e >= 0; e--) if (t.includes(r[e])) {
|
|
482
|
+
a = r[e];
|
|
483
|
+
break;
|
|
484
|
+
}
|
|
485
|
+
if (!a) {
|
|
486
|
+
for (let e = i + 1; e < r.length; e++) if (t.includes(r[e])) {
|
|
487
|
+
a = r[e];
|
|
488
|
+
break;
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
a ||= t[0];
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
e.button.parentNode && e.button.parentNode.removeChild(e.button), e.content.parentNode && e.content.parentNode.removeChild(e.content);
|
|
495
|
+
let o = this.createDetachedWindow(e, t, n);
|
|
496
|
+
this.detachedWindows.push(o), e.isDetached = !0, e.detachedWindow = o, a ? this.setActiveTab(a) : this.activeTabId === e.id && (this.activeTabId = null), this.updatePanelSize(), this.saveLayout();
|
|
497
|
+
}
|
|
498
|
+
createDetachedWindow(e, t, n) {
|
|
499
|
+
let r = window.innerWidth, i = window.innerHeight, a = t - 200, o = n - 20;
|
|
500
|
+
a + 400 > r && (a = r - 400), a < 0 && (a = 0), o + 300 > i && (o = i - 300), o < 0 && (o = 0);
|
|
501
|
+
let s = document.createElement("div");
|
|
502
|
+
s.className = "detached-tab-panel", s.style.left = `${a}px`, s.style.top = `${o}px`, this.panel.classList.contains("visible") || (s.style.opacity = "0", s.style.visibility = "hidden", s.style.pointerEvents = "none"), e.isVisible || (s.style.display = "none");
|
|
503
|
+
let c = document.createElement("div");
|
|
504
|
+
c.className = "detached-tab-header";
|
|
505
|
+
let l = document.createElement("span");
|
|
506
|
+
l.textContent = e.button.textContent.replace("⇱", "").trim(), c.appendChild(l);
|
|
507
|
+
let u = document.createElement("div");
|
|
508
|
+
u.className = "detached-header-controls";
|
|
509
|
+
let d = document.createElement("button");
|
|
510
|
+
d.className = "detached-reattach-btn", d.innerHTML = "↩", d.title = "Reattach to main panel", d.onclick = () => this.reattachTab(e), u.appendChild(d), c.appendChild(u);
|
|
511
|
+
let f = document.createElement("div");
|
|
512
|
+
f.className = "detached-tab-content", f.appendChild(e.content), e.content.style.display = "block", e.content.classList.add("active");
|
|
513
|
+
let p = document.createElement("div");
|
|
514
|
+
p.className = "detached-tab-resizer-top";
|
|
515
|
+
let m = document.createElement("div");
|
|
516
|
+
m.className = "detached-tab-resizer-right";
|
|
517
|
+
let h = document.createElement("div");
|
|
518
|
+
h.className = "detached-tab-resizer-bottom";
|
|
519
|
+
let g = document.createElement("div");
|
|
520
|
+
g.className = "detached-tab-resizer-left";
|
|
521
|
+
let _ = document.createElement("div");
|
|
522
|
+
return _.className = "detached-tab-resizer", s.appendChild(p), s.appendChild(m), s.appendChild(h), s.appendChild(g), s.appendChild(_), s.appendChild(c), s.appendChild(f), document.body.appendChild(s), this.setupDetachedWindowDrag(s, c, e), this.setupDetachedWindowResize(s, p, m, h, g, _), s.style.setProperty("z-index", this.maxZIndex, "important"), {
|
|
523
|
+
panel: s,
|
|
524
|
+
tab: e
|
|
525
|
+
};
|
|
526
|
+
}
|
|
527
|
+
bringWindowToFront(e) {
|
|
528
|
+
this.maxZIndex++, e.style.setProperty("z-index", this.maxZIndex, "important");
|
|
529
|
+
}
|
|
530
|
+
setupDetachedWindowDrag(e, t, n) {
|
|
531
|
+
let r = !1, i, a, o, s;
|
|
532
|
+
e.addEventListener("pointerdown", () => {
|
|
533
|
+
this.bringWindowToFront(e);
|
|
534
|
+
});
|
|
535
|
+
let c = (n) => {
|
|
536
|
+
if (n.target.classList.contains("detached-reattach-btn")) return;
|
|
537
|
+
this.bringWindowToFront(e), r = !0, t.style.cursor = "grabbing", t.setPointerCapture(n.pointerId), i = n.clientX, a = n.clientY;
|
|
538
|
+
let c = e.getBoundingClientRect();
|
|
539
|
+
o = c.left, s = c.top;
|
|
540
|
+
}, l = (t) => {
|
|
541
|
+
if (!r) return;
|
|
542
|
+
t.preventDefault();
|
|
543
|
+
let n = t.clientX, c = t.clientY, l = n - i, u = c - a, d = o + l, f = s + u, p = window.innerWidth, m = window.innerHeight, h = e.offsetWidth, g = e.offsetHeight, _ = h / 2, v = g / 2;
|
|
544
|
+
d + h > p + _ && (d = p + _ - h), d < -_ && (d = -_), f + g > m + v && (f = m + v - g), f < -v && (f = -v), e.style.left = `${d}px`, e.style.top = `${f}px`;
|
|
545
|
+
let y = this.panel.getBoundingClientRect();
|
|
546
|
+
n >= y.left && n <= y.right && c >= y.top && c <= y.bottom ? (e.style.opacity = "0.5", this.panel.style.outline = "2px solid var(--accent-color)") : (e.style.opacity = "", this.panel.style.outline = "");
|
|
547
|
+
}, u = (i) => {
|
|
548
|
+
if (!r) return;
|
|
549
|
+
r = !1, t.style.cursor = "", e.style.opacity = "", this.panel.style.outline = "";
|
|
550
|
+
let a = i.clientX, o = i.clientY;
|
|
551
|
+
if (a !== void 0 && o !== void 0) {
|
|
552
|
+
let e = this.panel.getBoundingClientRect();
|
|
553
|
+
a >= e.left && a <= e.right && o >= e.top && o <= e.bottom && n ? this.reattachTab(n) : this.saveLayout();
|
|
554
|
+
}
|
|
555
|
+
t.removeEventListener("pointermove", l), t.removeEventListener("pointerup", u), t.removeEventListener("pointercancel", u);
|
|
556
|
+
};
|
|
557
|
+
t.addEventListener("pointerdown", (e) => {
|
|
558
|
+
c(e), t.addEventListener("pointermove", l), t.addEventListener("pointerup", u), t.addEventListener("pointercancel", u);
|
|
559
|
+
}), t.style.cursor = "grab";
|
|
560
|
+
}
|
|
561
|
+
setupDetachedWindowResize(e, t, n, r, i, a) {
|
|
562
|
+
let o = (t, n) => {
|
|
563
|
+
let r = !1, i, a, o, s, c, l, u = (n) => {
|
|
564
|
+
n.preventDefault(), n.stopPropagation(), r = !0, this.bringWindowToFront(e), t.setPointerCapture(n.pointerId), i = n.clientX, a = n.clientY, o = e.offsetWidth, s = e.offsetHeight, c = e.offsetLeft, l = e.offsetTop;
|
|
565
|
+
}, d = (t) => {
|
|
566
|
+
if (!r) return;
|
|
567
|
+
t.preventDefault();
|
|
568
|
+
let u = t.clientX, d = t.clientY, f = u - i, p = d - a, m = window.innerWidth, h = window.innerHeight;
|
|
569
|
+
if (n === "right" || n === "corner") {
|
|
570
|
+
let t = o + f, n = m - c;
|
|
571
|
+
t >= 250 && t <= n && (e.style.width = `${t}px`);
|
|
572
|
+
}
|
|
573
|
+
if (n === "bottom" || n === "corner") {
|
|
574
|
+
let t = s + p, n = h - l;
|
|
575
|
+
t >= 150 && t <= n && (e.style.height = `${t}px`);
|
|
576
|
+
}
|
|
577
|
+
if (n === "left") {
|
|
578
|
+
let t = o - f, n = c + o - 250;
|
|
579
|
+
if (t >= 250) {
|
|
580
|
+
let r = c + f;
|
|
581
|
+
r >= 0 && r <= n && (e.style.width = `${t}px`, e.style.left = `${r}px`);
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
if (n === "top") {
|
|
585
|
+
let t = s - p, n = l + s - 150;
|
|
586
|
+
if (t >= 150) {
|
|
587
|
+
let r = l + p;
|
|
588
|
+
r >= 0 && r <= n && (e.style.height = `${t}px`, e.style.top = `${r}px`);
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
}, f = () => {
|
|
592
|
+
r = !1, t.removeEventListener("pointermove", d), t.removeEventListener("pointerup", f), t.removeEventListener("pointercancel", f), this.saveLayout();
|
|
593
|
+
};
|
|
594
|
+
t.addEventListener("pointerdown", (e) => {
|
|
595
|
+
u(e), t.addEventListener("pointermove", d), t.addEventListener("pointerup", f), t.addEventListener("pointercancel", f);
|
|
596
|
+
});
|
|
597
|
+
};
|
|
598
|
+
o(t, "top"), o(n, "right"), o(r, "bottom"), o(i, "left"), o(a, "corner");
|
|
599
|
+
}
|
|
600
|
+
reattachTab(e) {
|
|
601
|
+
if (!e.isDetached) return;
|
|
602
|
+
if (e.detachedWindow) {
|
|
603
|
+
let t = this.detachedWindows.indexOf(e.detachedWindow);
|
|
604
|
+
t > -1 && this.detachedWindows.splice(t, 1), e.detachedWindow.panel.parentNode && e.detachedWindow.panel.parentNode.removeChild(e.detachedWindow.panel), e.detachedWindow = null;
|
|
605
|
+
}
|
|
606
|
+
e.isDetached = !1;
|
|
607
|
+
let t = Object.values(this.tabs).filter((e) => e.originalIndex !== void 0 && e.isVisible).sort((e, t) => e.originalIndex - t.originalIndex), n = Array.from(this.tabsContainer.children), r = 0;
|
|
608
|
+
for (let n of t) {
|
|
609
|
+
if (n.id === e.id) break;
|
|
610
|
+
n.isDetached || r++;
|
|
611
|
+
}
|
|
612
|
+
r >= n.length || n.length === 0 ? this.tabsContainer.appendChild(e.button) : this.tabsContainer.insertBefore(e.button, n[r]), this.contentWrapper.appendChild(e.content), this.setActiveTab(e.id), this.updatePanelSize(), this.saveLayout();
|
|
613
|
+
}
|
|
614
|
+
setActiveTab(e) {
|
|
615
|
+
this.activeTabId && this.tabs[this.activeTabId] && !this.tabs[this.activeTabId].isDetached && this.tabs[this.activeTabId].setActive(!1), this.activeTabId = e, this.tabs[e] && this.tabs[e].setActive(!0), this.saveLayout();
|
|
616
|
+
}
|
|
617
|
+
togglePanel() {
|
|
618
|
+
this.panel.classList.toggle("visible"), this.toggleButton.classList.toggle("panel-open"), this.miniPanel.classList.toggle("panel-open");
|
|
619
|
+
let e = this.panel.classList.contains("visible");
|
|
620
|
+
this.detachedWindows.forEach((t) => {
|
|
621
|
+
e ? (t.panel.style.opacity = "", t.panel.style.visibility = "", t.panel.style.pointerEvents = "") : (t.panel.style.opacity = "0", t.panel.style.visibility = "hidden", t.panel.style.pointerEvents = "none");
|
|
622
|
+
}), this.dispatchEvent({ type: "resize" }), this.saveLayout();
|
|
623
|
+
}
|
|
624
|
+
togglePosition() {
|
|
625
|
+
let e = this.position === "bottom" ? "right" : "bottom";
|
|
626
|
+
this.setPosition(e);
|
|
627
|
+
}
|
|
628
|
+
setPosition(e) {
|
|
629
|
+
if (this.position === e) return;
|
|
630
|
+
this.panel.style.transition = "none";
|
|
631
|
+
let t = this.panel.classList.contains("maximized");
|
|
632
|
+
e === "right" ? (this.position = "right", this.floatingBtn.classList.add("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><path d=\"M3 15h18\"></path></svg>", this.floatingBtn.title = "Switch to Bottom", this.panel.classList.remove("position-bottom"), this.panel.classList.add("position-right"), this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right"), this.panel.style.bottom = "", this.panel.style.top = "0", this.panel.style.right = "0", this.panel.style.left = "", t ? (this.panel.style.width = "100vw", this.panel.style.height = "100%") : (this.panel.style.width = `${this.lastWidthRight}px`, this.panel.style.height = "100%")) : (this.position = "bottom", this.floatingBtn.classList.remove("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"></line></svg>", this.floatingBtn.title = "Switch to Right Side", this.panel.classList.remove("position-right"), this.panel.classList.add("position-bottom"), this.toggleButton.classList.remove("position-right"), this.miniPanel.classList.remove("position-right"), this.panel.style.top = "", this.panel.style.right = "", this.panel.style.bottom = "0", this.panel.style.left = "0", t ? (this.panel.style.width = "100%", this.panel.style.height = "100vh") : (this.panel.style.width = "100%", this.panel.style.height = `${this.lastHeightBottom}px`)), setTimeout(() => {
|
|
633
|
+
this.panel.style.transition = "";
|
|
634
|
+
}, 50), this.updatePanelSize(), this.saveLayout();
|
|
635
|
+
}
|
|
636
|
+
saveLayout() {
|
|
637
|
+
if (this.isLoadingLayout) return;
|
|
638
|
+
let e = {
|
|
639
|
+
position: this.position,
|
|
640
|
+
lastHeightBottom: this.lastHeightBottom,
|
|
641
|
+
lastWidthRight: this.lastWidthRight,
|
|
642
|
+
activeTabId: this.activeTabId,
|
|
643
|
+
detachedTabs: [],
|
|
644
|
+
isVisible: this.panel.classList.contains("visible")
|
|
645
|
+
};
|
|
646
|
+
this.detachedWindows.forEach((t) => {
|
|
647
|
+
let n = t.tab, r = t.panel, i = parseFloat(r.style.left) || r.offsetLeft || 0, a = parseFloat(r.style.top) || r.offsetTop || 0, o = r.offsetWidth, s = r.offsetHeight;
|
|
648
|
+
e.detachedTabs.push({
|
|
649
|
+
tabId: n.id,
|
|
650
|
+
originalIndex: n.originalIndex === void 0 ? 0 : n.originalIndex,
|
|
651
|
+
left: i,
|
|
652
|
+
top: a,
|
|
653
|
+
width: o,
|
|
654
|
+
height: s
|
|
655
|
+
});
|
|
656
|
+
});
|
|
657
|
+
try {
|
|
658
|
+
$("layout", e);
|
|
659
|
+
} catch (e) {
|
|
660
|
+
console.warn("Failed to save profiler layout:", e);
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
loadLayout() {
|
|
664
|
+
this.isLoadingLayout = !0;
|
|
665
|
+
try {
|
|
666
|
+
let e = Q("layout");
|
|
667
|
+
if (Object.keys(e).length === 0) return;
|
|
668
|
+
if (e.detachedTabs && e.detachedTabs.length > 0) {
|
|
669
|
+
let t = window.innerWidth, n = window.innerHeight;
|
|
670
|
+
e.detachedTabs = e.detachedTabs.map((e) => {
|
|
671
|
+
let { left: r, top: i, width: a, height: o } = e;
|
|
672
|
+
a > t && (a = t - 100), o > n && (o = n - 100);
|
|
673
|
+
let s = a / 2, c = o / 2;
|
|
674
|
+
return r + a > t + s && (r = t + s - a), r < -s && (r = -s), i + o > n + c && (i = n + c - o), i < -c && (i = -c), {
|
|
675
|
+
...e,
|
|
676
|
+
left: r,
|
|
677
|
+
top: i,
|
|
678
|
+
width: a,
|
|
679
|
+
height: o
|
|
680
|
+
};
|
|
681
|
+
});
|
|
682
|
+
}
|
|
683
|
+
e.position && (this.position = e.position), e.lastHeightBottom && (this.lastHeightBottom = e.lastHeightBottom), e.lastWidthRight && (this.lastWidthRight = e.lastWidthRight);
|
|
684
|
+
let t = window.innerWidth, n = window.innerHeight;
|
|
685
|
+
this.lastHeightBottom > n - 50 && (this.lastHeightBottom = n - 50), this.lastWidthRight > t - 50 && (this.lastWidthRight = t - 50), this.position === "right" ? (this.floatingBtn.classList.add("active"), this.floatingBtn.innerHTML = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><path d=\"M3 15h18\"></path></svg>", this.floatingBtn.title = "Switch to Bottom", this.panel.classList.remove("position-bottom"), this.panel.classList.add("position-right"), this.toggleButton.classList.add("position-right"), this.miniPanel.classList.add("position-right"), this.panel.style.bottom = "", this.panel.style.top = "0", this.panel.style.right = "0", this.panel.style.left = "", this.panel.style.width = `${this.lastWidthRight}px`, this.panel.style.height = "100%") : this.panel.style.height = `${this.lastHeightBottom}px`, e.isVisible && (this.panel.classList.add("visible"), this.toggleButton.classList.add("panel-open")), e.activeTabId && this.setActiveTab(e.activeTabId), e.detachedTabs && e.detachedTabs.length > 0 && (this.pendingDetachedTabs = e.detachedTabs, this.restoreDetachedTabs()), this.updatePanelSize(), this.panel.classList.contains("visible") && this.miniPanel.classList.add("panel-open");
|
|
686
|
+
} catch (e) {
|
|
687
|
+
console.warn("Failed to load profiler layout:", e);
|
|
688
|
+
} finally {
|
|
689
|
+
this.isLoadingLayout = !1;
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
restoreDetachedTabs() {
|
|
693
|
+
if (!(!this.pendingDetachedTabs || this.pendingDetachedTabs.length === 0)) {
|
|
694
|
+
if (this.pendingDetachedTabs.forEach((e) => {
|
|
695
|
+
let t = this.tabs[e.tabId];
|
|
696
|
+
if (!t || t.isDetached) return;
|
|
697
|
+
e.originalIndex !== void 0 && (t.originalIndex = e.originalIndex), t.button.parentNode && t.button.parentNode.removeChild(t.button), t.content.parentNode && t.content.parentNode.removeChild(t.content);
|
|
698
|
+
let n = this.createDetachedWindow(t, 0, 0);
|
|
699
|
+
n.panel.style.left = `${e.left}px`, n.panel.style.top = `${e.top}px`, n.panel.style.width = `${e.width}px`, n.panel.style.height = `${e.height}px`, this.constrainWindowToBounds(n.panel), this.detachedWindows.push(n), t.isDetached = !0, t.detachedWindow = n;
|
|
700
|
+
}), this.pendingDetachedTabs = null, this.detachedWindows.forEach((e) => {
|
|
701
|
+
let t = parseInt(getComputedStyle(e.panel).zIndex) || 0;
|
|
702
|
+
t > this.maxZIndex && (this.maxZIndex = t);
|
|
703
|
+
}), !this.activeTabId || !this.tabs[this.activeTabId] || this.tabs[this.activeTabId].isDetached || !this.tabs[this.activeTabId].isVisible) {
|
|
704
|
+
let e = Object.keys(this.tabs).filter((e) => !this.tabs[e].isDetached && this.tabs[e].isVisible);
|
|
705
|
+
if (e.length > 0) {
|
|
706
|
+
let t = Array.from(this.tabsContainer.children).map((e) => Object.keys(this.tabs).find((t) => this.tabs[t].button === e)).filter((e) => e !== void 0 && !this.tabs[e].isDetached && this.tabs[e].isVisible);
|
|
707
|
+
this.setActiveTab(t[0] || e[0]);
|
|
708
|
+
} else this.activeTabId = null;
|
|
709
|
+
}
|
|
710
|
+
this.updatePanelSize();
|
|
711
|
+
}
|
|
712
|
+
}
|
|
713
|
+
}, B = class extends b {
|
|
714
|
+
constructor(e, t = {}) {
|
|
715
|
+
super(), this.id = e.toLowerCase(), this.button = document.createElement("button"), this.button.className = "tab-btn", this.button.textContent = e, this.content = document.createElement("div"), this.content.id = `${this.id}-content`, this.content.className = "profiler-content", this._isActive = !1, this.isVisible = !0, this.isDetached = !1, this.detachedWindow = null, this.allowDetach = t.allowDetach === void 0 ? !0 : t.allowDetach, this.builtin = t.builtin === void 0 ? !1 : t.builtin, this.icon = t.icon || null, this.builtinButton = null, this.miniContent = null, this.profiler = null, this.onVisibilityChange = null;
|
|
716
|
+
}
|
|
717
|
+
get inspector() {
|
|
718
|
+
return this.profiler.inspector;
|
|
719
|
+
}
|
|
720
|
+
get isActive() {
|
|
721
|
+
return this.profiler && this.profiler.panel.classList.contains("visible") ? this.isDetached || this._isActive : !1;
|
|
722
|
+
}
|
|
723
|
+
set isActive(e) {
|
|
724
|
+
this._isActive = e;
|
|
725
|
+
}
|
|
726
|
+
init() {}
|
|
727
|
+
update() {}
|
|
728
|
+
setActive(e) {
|
|
729
|
+
this.button.classList.toggle("active", e), this.content.classList.toggle("active", e), this.isActive = e;
|
|
730
|
+
}
|
|
731
|
+
show() {
|
|
732
|
+
this.content.style.display = "", this.button.style.display = "", this.isVisible = !0, this.isDetached && this.detachedWindow && (this.detachedWindow.panel.style.display = ""), this.onVisibilityChange && this.onVisibilityChange(), this.showBuiltin();
|
|
733
|
+
}
|
|
734
|
+
hide() {
|
|
735
|
+
this.content.style.display = "none", this.button.style.display = "none", this.isVisible = !1, this.isDetached && this.detachedWindow && (this.detachedWindow.panel.style.display = "none"), this.onVisibilityChange && this.onVisibilityChange(), this.hideBuiltin();
|
|
736
|
+
}
|
|
737
|
+
showBuiltin() {
|
|
738
|
+
if (this.builtin && (this.profiler && this.profiler.builtinTabsContainer && (this.profiler.builtinTabsContainer.style.display = ""), this.builtinButton && (this.builtinButton.style.display = ""), this.miniContent && this.profiler)) {
|
|
739
|
+
if (this.profiler.miniPanel.querySelectorAll(".mini-panel-content").forEach((e) => {
|
|
740
|
+
e.style.display = "none";
|
|
741
|
+
}), this.profiler.builtinTabsContainer.querySelectorAll(".builtin-tab-btn").forEach((e) => {
|
|
742
|
+
e.classList.remove("active");
|
|
743
|
+
}), this.builtinButton && this.builtinButton.classList.add("active"), !this.miniContent.firstChild) for (; this.content.firstChild;) this.miniContent.appendChild(this.content.firstChild);
|
|
744
|
+
this.miniContent.style.display = "block", this.profiler.miniPanel.classList.add("visible");
|
|
745
|
+
}
|
|
746
|
+
}
|
|
747
|
+
hideBuiltin() {
|
|
748
|
+
if (this.builtin) {
|
|
749
|
+
if (this.builtinButton && (this.builtinButton.style.display = "none"), this.miniContent && (this.miniContent.style.display = "none", this.miniContent.firstChild)) for (; this.miniContent.firstChild;) this.content.appendChild(this.miniContent.firstChild);
|
|
750
|
+
this.builtinButton && this.builtinButton.classList.remove("active"), this.profiler && (Array.from(this.profiler.miniPanel.querySelectorAll(".mini-panel-content")).some((e) => e.style.display !== "none") || this.profiler.miniPanel.classList.remove("visible"), Array.from(this.profiler.builtinTabsContainer.querySelectorAll(".builtin-tab-btn")).some((e) => e.style.display !== "none") || (this.profiler.builtinTabsContainer.style.display = "none"));
|
|
751
|
+
}
|
|
752
|
+
}
|
|
753
|
+
}, V = class {
|
|
754
|
+
constructor(...e) {
|
|
755
|
+
this.headers = e, this.children = [], this.domElement = document.createElement("div"), this.domElement.className = "list-container", this.domElement.style.padding = "10px", this.id = `list-${Math.random().toString(36).slice(2, 11)}`, this.domElement.dataset.listId = this.id, this.gridStyleElement = document.createElement("style"), this.domElement.appendChild(this.gridStyleElement);
|
|
756
|
+
let t = document.createElement("div");
|
|
757
|
+
t.className = "list-header", this.headers.forEach((e) => {
|
|
758
|
+
let n = document.createElement("div");
|
|
759
|
+
n.className = "list-header-cell", n.textContent = e, t.appendChild(n);
|
|
760
|
+
}), this.domElement.appendChild(t);
|
|
761
|
+
}
|
|
762
|
+
setGridStyle(e) {
|
|
763
|
+
this.gridStyleElement.textContent = `
|
|
764
|
+
[data-list-id="${this.id}"] > .list-header,
|
|
765
|
+
[data-list-id="${this.id}"] .list-item-row {
|
|
766
|
+
grid-template-columns: ${e};
|
|
767
|
+
}
|
|
768
|
+
`;
|
|
769
|
+
}
|
|
770
|
+
add(e) {
|
|
771
|
+
e.parent !== null && e.parent.remove(e), e.domElement.classList.add("header-wrapper", "section-start"), e.parent = this, this.children.push(e), this.domElement.appendChild(e.domElement);
|
|
772
|
+
}
|
|
773
|
+
remove(e) {
|
|
774
|
+
let t = this.children.indexOf(e);
|
|
775
|
+
return t !== -1 && (this.children.splice(t, 1), this.domElement.removeChild(e.domElement), e.parent = null), this;
|
|
776
|
+
}
|
|
777
|
+
}, H = class {
|
|
778
|
+
constructor(e = 512) {
|
|
779
|
+
this.maxPoints = e, this.lines = {}, this.limit = 0, this.limitIndex = 0, this.domElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.domElement.setAttribute("class", "graph-svg");
|
|
780
|
+
}
|
|
781
|
+
addLine(e, t) {
|
|
782
|
+
let n = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
783
|
+
n.setAttribute("class", "graph-path"), n.style.stroke = t, n.style.fill = t, this.domElement.appendChild(n), this.lines[e] = {
|
|
784
|
+
path: n,
|
|
785
|
+
color: t,
|
|
786
|
+
points: []
|
|
787
|
+
};
|
|
788
|
+
}
|
|
789
|
+
addPoint(e, t) {
|
|
790
|
+
let n = this.lines[e];
|
|
791
|
+
n && (n.points.push(t), n.points.length > this.maxPoints && n.points.shift(), t > this.limit && (this.limit = t, this.limitIndex = 0));
|
|
792
|
+
}
|
|
793
|
+
resetLimit() {
|
|
794
|
+
this.limit = 0, this.limitIndex = 0;
|
|
795
|
+
}
|
|
796
|
+
update() {
|
|
797
|
+
let e = this.domElement.clientWidth, t = this.domElement.clientHeight;
|
|
798
|
+
if (e === 0) return;
|
|
799
|
+
let n = e / (this.maxPoints - 1);
|
|
800
|
+
for (let r in this.lines) {
|
|
801
|
+
let i = this.lines[r], a = `M 0,${t}`;
|
|
802
|
+
for (let e = 0; e < i.points.length; e++) {
|
|
803
|
+
let r = e * n, o = t - i.points[e] / this.limit * t;
|
|
804
|
+
a += ` L ${r},${o}`;
|
|
805
|
+
}
|
|
806
|
+
a += ` L ${(i.points.length - 1) * n},${t} Z`;
|
|
807
|
+
let o = e - (i.points.length - 1) * n;
|
|
808
|
+
i.path.setAttribute("transform", `translate(${o}, 0)`), i.path.setAttribute("d", a);
|
|
809
|
+
}
|
|
810
|
+
this.limitIndex++ > this.maxPoints && this.resetLimit();
|
|
811
|
+
}
|
|
812
|
+
}, U = class {
|
|
813
|
+
constructor(...e) {
|
|
814
|
+
this.children = [], this.isOpen = !0, this.childrenContainer = null, this.parent = null, this.domElement = document.createElement("div"), this.domElement.className = "list-item-wrapper", this.itemRow = document.createElement("div"), this.itemRow.className = "list-item-row", this.userData = {}, this.data = e, this.data.forEach((e) => {
|
|
815
|
+
let t = document.createElement("div");
|
|
816
|
+
t.className = "list-item-cell", e instanceof HTMLElement ? t.appendChild(e) : t.append(String(e)), this.itemRow.appendChild(t);
|
|
817
|
+
}), this.domElement.appendChild(this.itemRow), this.onItemClick = this.onItemClick.bind(this);
|
|
818
|
+
}
|
|
819
|
+
onItemClick(e) {
|
|
820
|
+
e.target.closest("button, a, input, label") || this.toggle();
|
|
821
|
+
}
|
|
822
|
+
add(e, t = this.children.length) {
|
|
823
|
+
return e.parent !== null && e.parent.remove(e), e.parent = this, this.children.splice(t, 0, e), this.itemRow.classList.add("collapsible"), this.childrenContainer || (this.childrenContainer = document.createElement("div"), this.childrenContainer.className = "list-children-container", this.childrenContainer.classList.toggle("closed", !this.isOpen), this.domElement.appendChild(this.childrenContainer), this.itemRow.addEventListener("click", this.onItemClick)), this.childrenContainer.insertBefore(e.domElement, this.childrenContainer.children[t] || null), this.updateToggler(), this;
|
|
824
|
+
}
|
|
825
|
+
remove(e) {
|
|
826
|
+
let t = this.children.indexOf(e);
|
|
827
|
+
return t !== -1 && (this.children.splice(t, 1), this.childrenContainer.removeChild(e.domElement), e.parent = null, this.children.length === 0 && (this.itemRow.classList.remove("collapsible"), this.itemRow.removeEventListener("click", this.onItemClick), this.childrenContainer.remove(), this.childrenContainer = null), this.updateToggler()), this;
|
|
828
|
+
}
|
|
829
|
+
updateToggler() {
|
|
830
|
+
let e = this.itemRow.querySelector(".list-item-cell:first-child"), t = this.itemRow.querySelector(".item-toggler");
|
|
831
|
+
this.children.length > 0 ? (t || (t = document.createElement("span"), t.className = "item-toggler", e.prepend(t)), this.isOpen && this.itemRow.classList.add("open")) : t && t.remove();
|
|
832
|
+
}
|
|
833
|
+
toggle() {
|
|
834
|
+
return this.isOpen = !this.isOpen, this.itemRow.classList.toggle("open", this.isOpen), this.childrenContainer && this.childrenContainer.classList.toggle("closed", !this.isOpen), this;
|
|
835
|
+
}
|
|
836
|
+
close() {
|
|
837
|
+
return this.isOpen && this.toggle(), this;
|
|
838
|
+
}
|
|
839
|
+
};
|
|
840
|
+
//#endregion
|
|
841
|
+
//#region ../../node_modules/three/examples/jsm/inspector/ui/utils.js
|
|
842
|
+
function W(e = null) {
|
|
843
|
+
let t = document.createElement("span");
|
|
844
|
+
return t.className = "value", e !== null && (t.id = e), t;
|
|
845
|
+
}
|
|
846
|
+
function G(e, t) {
|
|
847
|
+
let n = e instanceof HTMLElement ? e : document.getElementById(e);
|
|
848
|
+
n && n.textContent !== t && (n.textContent = t);
|
|
849
|
+
}
|
|
850
|
+
function tt(e) {
|
|
851
|
+
let t = e.lastIndexOf("/");
|
|
852
|
+
return t === -1 ? {
|
|
853
|
+
path: "",
|
|
854
|
+
name: e.trim()
|
|
855
|
+
} : {
|
|
856
|
+
path: e.substring(0, t).trim(),
|
|
857
|
+
name: e.substring(t + 1).trim()
|
|
858
|
+
};
|
|
859
|
+
}
|
|
860
|
+
function nt(e) {
|
|
861
|
+
return e.replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
|
|
862
|
+
}
|
|
863
|
+
function K(e, t = 2) {
|
|
864
|
+
if (e === 0) return "0 Bytes";
|
|
865
|
+
let n = 1024, r = t < 0 ? 0 : t, i = [
|
|
866
|
+
"Bytes",
|
|
867
|
+
"KB",
|
|
868
|
+
"MB",
|
|
869
|
+
"GB",
|
|
870
|
+
"TB",
|
|
871
|
+
"PB",
|
|
872
|
+
"EB",
|
|
873
|
+
"ZB",
|
|
874
|
+
"YB"
|
|
875
|
+
], a = Math.floor(Math.log(e) / Math.log(n));
|
|
876
|
+
return parseFloat((e / n ** +a).toFixed(r)) + " " + i[a];
|
|
877
|
+
}
|
|
878
|
+
//#endregion
|
|
879
|
+
//#region ../../node_modules/three/examples/jsm/inspector/tabs/Performance.js
|
|
880
|
+
var rt = class extends B {
|
|
881
|
+
constructor(e = {}) {
|
|
882
|
+
super("Performance", e);
|
|
883
|
+
let t = new V("Name", "CPU", "GPU", "Total");
|
|
884
|
+
t.setGridStyle("minmax(200px, 2fr) 80px 80px 80px"), t.domElement.style.minWidth = "600px";
|
|
885
|
+
let n = document.createElement("div");
|
|
886
|
+
n.className = "list-scroll-wrapper", n.appendChild(t.domElement), this.content.appendChild(n);
|
|
887
|
+
let r = document.createElement("div");
|
|
888
|
+
r.className = "graph-container";
|
|
889
|
+
let i = new H();
|
|
890
|
+
i.addLine("fps", "var( --color-fps )"), r.append(i.domElement);
|
|
891
|
+
let a = new U("Graph Stats", W(), W(), W("graph-fps-counter"));
|
|
892
|
+
t.add(a);
|
|
893
|
+
let o = new U(r);
|
|
894
|
+
o.itemRow.childNodes[0].style.gridColumn = "1 / -1", a.add(o);
|
|
895
|
+
let s = new U("Frame Stats", W(), W(), W());
|
|
896
|
+
t.add(s);
|
|
897
|
+
let c = new U("Miscellaneous & Idle", W(), W(), W());
|
|
898
|
+
c.domElement.firstChild.style.backgroundColor = "#00ff0b1a", c.domElement.firstChild.classList.add("no-hover"), s.add(c), this.notInUse = /* @__PURE__ */ new Map(), this.frameStats = s, this.graphStats = a, this.graph = i, this.miscellaneous = c, this.currentRender = null, this.currentItem = null, this.frameItems = /* @__PURE__ */ new Map();
|
|
899
|
+
}
|
|
900
|
+
resolveStats(e, t) {
|
|
901
|
+
let n = e.getStatsData(t.cid), r = n.item;
|
|
902
|
+
if (r === void 0) r = new U(W(), W(), W(), W()), t.name ? t.isComputeStats === !0 && (t.name = `${t.name} [ Compute ]`) : t.name = `Unnamed ${t.cid}`, r.userData.name = t.name, this.currentItem.add(r), n.item = r;
|
|
903
|
+
else {
|
|
904
|
+
r.userData.name = t.name, this.notInUse.has(t.cid) && (r.domElement.firstElementChild.classList.remove("alert"), this.notInUse.delete(t.cid));
|
|
905
|
+
let e = t.parent.children.indexOf(t);
|
|
906
|
+
(r.parent === null || r.parent.children.indexOf(r) !== e) && this.currentItem.add(r, e);
|
|
907
|
+
}
|
|
908
|
+
let i = r.userData.name;
|
|
909
|
+
t.isComputeStats && (i += " [ Compute ]"), G(r.data[0], i), G(r.data[1], n.cpu.toFixed(2)), G(r.data[2], t.gpuNotAvailable === !0 ? "-" : n.gpu.toFixed(2)), G(r.data[3], n.total.toFixed(2));
|
|
910
|
+
let a = this.currentItem;
|
|
911
|
+
this.currentItem = r;
|
|
912
|
+
for (let n of t.children) this.resolveStats(e, n);
|
|
913
|
+
this.currentItem = a, this.frameItems.set(t.cid, r);
|
|
914
|
+
}
|
|
915
|
+
updateGraph(e) {
|
|
916
|
+
this.graph.addPoint("fps", e.fps), this.graph.update();
|
|
917
|
+
}
|
|
918
|
+
addNotInUse(e, t) {
|
|
919
|
+
t.domElement.firstElementChild.classList.add("alert"), this.notInUse.set(e, {
|
|
920
|
+
item: t,
|
|
921
|
+
time: performance.now()
|
|
922
|
+
}), this.updateNotInUse(e);
|
|
923
|
+
}
|
|
924
|
+
updateNotInUse(e) {
|
|
925
|
+
let { item: t, time: n } = this.notInUse.get(e), r = performance.now(), i = 5 - Math.floor((r - n) / 1e3);
|
|
926
|
+
if (i >= 0) {
|
|
927
|
+
let e = "*".repeat(Math.max(0, i));
|
|
928
|
+
G(t.domElement.querySelector(".list-item-cell .value"), t.userData.name + " (not in use) " + e);
|
|
929
|
+
} else t.domElement.firstElementChild.classList.remove("alert"), t.parent.remove(t), this.notInUse.delete(e);
|
|
930
|
+
}
|
|
931
|
+
updateText(e, t) {
|
|
932
|
+
let n = new Map(this.frameItems);
|
|
933
|
+
this.frameItems.clear(), this.currentItem = this.frameStats;
|
|
934
|
+
for (let n of t.children) this.resolveStats(e, n);
|
|
935
|
+
for (let [e, t] of n) this.frameItems.has(e) || (this.addNotInUse(e, t), n.delete(e));
|
|
936
|
+
for (let e of this.notInUse.keys()) this.updateNotInUse(e);
|
|
937
|
+
G("graph-fps-counter", e.fps.toFixed() + " FPS"), G(this.frameStats.data[1], t.cpu.toFixed(2)), G(this.frameStats.data[2], t.gpu.toFixed(2)), G(this.frameStats.data[3], t.total.toFixed(2)), G(this.miscellaneous.data[1], t.miscellaneous.toFixed(2)), G(this.miscellaneous.data[2], "-"), G(this.miscellaneous.data[3], t.miscellaneous.toFixed(2)), this.currentItem = null;
|
|
938
|
+
}
|
|
939
|
+
}, it = class extends B {
|
|
940
|
+
constructor(e = {}) {
|
|
941
|
+
super("Memory", e);
|
|
942
|
+
let t = new V("Name", "Count", "Size");
|
|
943
|
+
t.setGridStyle("minmax(200px, 2fr) 60px 100px"), t.domElement.style.minWidth = "300px";
|
|
944
|
+
let n = document.createElement("div");
|
|
945
|
+
n.className = "list-scroll-wrapper", n.appendChild(t.domElement), this.content.appendChild(n);
|
|
946
|
+
let r = document.createElement("div");
|
|
947
|
+
r.className = "graph-container";
|
|
948
|
+
let i = new H();
|
|
949
|
+
i.addLine("total", "var( --color-yellow )"), r.append(i.domElement);
|
|
950
|
+
let a = new U("Graph Stats", "", "");
|
|
951
|
+
t.add(a);
|
|
952
|
+
let o = new U(r);
|
|
953
|
+
o.itemRow.childNodes[0].style.gridColumn = "1 / -1", a.add(o), this.memoryStats = new U("Renderer Info", "", W()), this.memoryStats.domElement.firstChild.classList.add("no-hover"), t.add(this.memoryStats), this.attributes = new U("Attributes", W(), W()), this.memoryStats.add(this.attributes), this.geometries = new U("Geometries", W(), "N/A"), this.memoryStats.add(this.geometries), this.indexAttributes = new U("Index Attributes", W(), W()), this.memoryStats.add(this.indexAttributes), this.indirectStorageAttributes = new U("Indirect Storage Attributes", W(), W()), this.memoryStats.add(this.indirectStorageAttributes), this.programs = new U("Programs", W(), W()), this.memoryStats.add(this.programs), this.readbackBuffers = new U("Readback Buffers", W(), W()), this.memoryStats.add(this.readbackBuffers), this.renderTargets = new U("Render Targets", W(), "N/A"), this.memoryStats.add(this.renderTargets), this.storageAttributes = new U("Storage Attributes", W(), W()), this.memoryStats.add(this.storageAttributes), this.textures = new U("Textures", W(), W()), this.memoryStats.add(this.textures), this.graph = i;
|
|
954
|
+
}
|
|
955
|
+
updateGraph(e) {
|
|
956
|
+
let t = e.getRenderer();
|
|
957
|
+
if (!t) return;
|
|
958
|
+
let n = t.info.memory;
|
|
959
|
+
this.graph.addPoint("total", n.total), this.graph.limit === 0 && (this.graph.limit = 1), this.graph.update();
|
|
960
|
+
}
|
|
961
|
+
updateText(e) {
|
|
962
|
+
let t = e.getRenderer();
|
|
963
|
+
if (!t) return;
|
|
964
|
+
let n = t.info.memory;
|
|
965
|
+
G(this.memoryStats.data[2], K(n.total)), G(this.attributes.data[1], n.attributes.toString()), G(this.attributes.data[2], K(n.attributesSize)), G(this.geometries.data[1], n.geometries.toString()), G(this.indexAttributes.data[1], n.indexAttributes.toString()), G(this.indexAttributes.data[2], K(n.indexAttributesSize)), G(this.indirectStorageAttributes.data[1], n.indirectStorageAttributes.toString()), G(this.indirectStorageAttributes.data[2], K(n.indirectStorageAttributesSize)), G(this.programs.data[1], n.programs.toString()), G(this.programs.data[2], K(n.programsSize)), G(this.readbackBuffers.data[1], n.readbackBuffers.toString()), G(this.readbackBuffers.data[2], K(n.readbackBuffersSize)), G(this.renderTargets.data[1], n.renderTargets.toString()), G(this.storageAttributes.data[1], n.storageAttributes.toString()), G(this.storageAttributes.data[2], K(n.storageAttributesSize)), G(this.textures.data[1], n.textures.toString()), G(this.textures.data[2], K(n.texturesSize));
|
|
966
|
+
}
|
|
967
|
+
}, at = class extends B {
|
|
968
|
+
constructor(e = {}) {
|
|
969
|
+
super("Console", e), this.filters = {
|
|
970
|
+
info: !0,
|
|
971
|
+
warn: !0,
|
|
972
|
+
error: !0
|
|
973
|
+
}, this.filterText = "", this.buildHeader(), this.logContainer = document.createElement("div"), this.logContainer.id = "console-log", this.content.appendChild(this.logContainer);
|
|
974
|
+
}
|
|
975
|
+
buildHeader() {
|
|
976
|
+
let e = document.createElement("div");
|
|
977
|
+
e.className = "console-header";
|
|
978
|
+
let t = document.createElement("input");
|
|
979
|
+
t.type = "text", t.className = "console-filter-input", t.placeholder = "Filter...", t.addEventListener("input", (e) => {
|
|
980
|
+
this.filterText = e.target.value.toLowerCase(), this.applyFilters();
|
|
981
|
+
});
|
|
982
|
+
let n = document.createElement("button");
|
|
983
|
+
n.className = "console-copy-button", n.title = "Copy all", n.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>", n.addEventListener("click", () => this.copyAll(n));
|
|
984
|
+
let r = document.createElement("div");
|
|
985
|
+
r.className = "console-buttons-group", Object.keys(this.filters).forEach((e) => {
|
|
986
|
+
let t = document.createElement("label");
|
|
987
|
+
t.className = "custom-checkbox", t.style.color = `var(--${e === "info" ? "text-primary" : "color-" + (e === "warn" ? "yellow" : "red")})`;
|
|
988
|
+
let n = document.createElement("input");
|
|
989
|
+
n.type = "checkbox", n.checked = this.filters[e], n.dataset.type = e;
|
|
990
|
+
let i = document.createElement("span");
|
|
991
|
+
i.className = "checkmark", t.appendChild(n), t.appendChild(i), t.append(e.charAt(0).toUpperCase() + e.slice(1)), r.appendChild(t);
|
|
992
|
+
}), r.addEventListener("change", (e) => {
|
|
993
|
+
let t = e.target.dataset.type;
|
|
994
|
+
t in this.filters && (this.filters[t] = e.target.checked, this.applyFilters());
|
|
995
|
+
}), r.appendChild(n), e.appendChild(t), e.appendChild(r), this.content.appendChild(e);
|
|
996
|
+
}
|
|
997
|
+
applyFilters() {
|
|
998
|
+
this.logContainer.querySelectorAll(".log-message").forEach((e) => {
|
|
999
|
+
let t = e.dataset.type, n = e.dataset.rawText.toLowerCase(), r = this.filters[t], i = n.includes(this.filterText);
|
|
1000
|
+
e.classList.toggle("hidden", !(r && i));
|
|
1001
|
+
});
|
|
1002
|
+
}
|
|
1003
|
+
copyAll(e) {
|
|
1004
|
+
let t = this.logContainer.ownerDocument.defaultView.getSelection(), n = t.toString(), r = n && this.logContainer.contains(t.anchorNode), i;
|
|
1005
|
+
if (r) i = n;
|
|
1006
|
+
else {
|
|
1007
|
+
let e = this.logContainer.querySelectorAll(".log-message:not(.hidden)");
|
|
1008
|
+
i = Array.from(e).map((e) => e.dataset.rawText).join("\n");
|
|
1009
|
+
}
|
|
1010
|
+
navigator.clipboard.writeText(i), e.classList.add("copied"), setTimeout(() => e.classList.remove("copied"), 350);
|
|
1011
|
+
}
|
|
1012
|
+
_getIcon(e, t) {
|
|
1013
|
+
let n;
|
|
1014
|
+
return t === "tip" ? n = "💭" : t === "tsl" ? n = "✨" : t === "webgpurenderer" ? n = "🎨" : e === "warn" ? n = "⚠️" : e === "error" ? n = "🔴" : e === "info" && (n = "ℹ️"), n;
|
|
1015
|
+
}
|
|
1016
|
+
_formatMessage(e, t) {
|
|
1017
|
+
let n = document.createDocumentFragment(), r = t.match(/^([\w\.]+:\s)/), i = t;
|
|
1018
|
+
if (r) {
|
|
1019
|
+
let a = r[0], o = a.slice(0, -2).split("."), s = (o.length > 1 ? o[o.length - 1] : o[0]) + ":", c = this._getIcon(e, s.split(":")[0].toLowerCase());
|
|
1020
|
+
n.appendChild(document.createTextNode(c + " "));
|
|
1021
|
+
let l = document.createElement("span");
|
|
1022
|
+
l.className = "log-prefix", l.textContent = s, n.appendChild(l), i = t.substring(a.length);
|
|
1023
|
+
}
|
|
1024
|
+
let a = i.split(/(".*?"|'.*?'|`.*?`)/g).map((e) => e.trim()).filter(Boolean);
|
|
1025
|
+
return a.forEach((e, t) => {
|
|
1026
|
+
if (/^("|'|`)/.test(e)) {
|
|
1027
|
+
let t = document.createElement("span");
|
|
1028
|
+
t.className = "log-code", t.textContent = e.slice(1, -1), n.appendChild(t);
|
|
1029
|
+
} else t > 0 && (e = " " + e), t < a.length - 1 && (e += " "), n.appendChild(document.createTextNode(e));
|
|
1030
|
+
}), n;
|
|
1031
|
+
}
|
|
1032
|
+
addMessage(e, t) {
|
|
1033
|
+
let n = document.createElement("div");
|
|
1034
|
+
n.className = `log-message ${e}`, n.dataset.type = e, n.dataset.rawText = t, n.appendChild(this._formatMessage(e, t));
|
|
1035
|
+
let r = this.filters[e], i = t.toLowerCase().includes(this.filterText);
|
|
1036
|
+
n.classList.toggle("hidden", !(r && i)), this.logContainer.appendChild(n), this.logContainer.scrollTop = this.logContainer.scrollHeight, this.logContainer.children.length > 200 && this.logContainer.removeChild(this.logContainer.firstChild);
|
|
1037
|
+
}
|
|
1038
|
+
}, q = class extends b {
|
|
1039
|
+
constructor() {
|
|
1040
|
+
super(), this.domElement = document.createElement("div"), this.domElement.className = "param-control", this._onChangeFunction = null, this.addEventListener("change", (e) => {
|
|
1041
|
+
requestAnimationFrame(() => {
|
|
1042
|
+
this._onChangeFunction && this._onChangeFunction(e.value);
|
|
1043
|
+
});
|
|
1044
|
+
});
|
|
1045
|
+
}
|
|
1046
|
+
setValue() {
|
|
1047
|
+
return this.dispatchChange(), this;
|
|
1048
|
+
}
|
|
1049
|
+
getValue() {
|
|
1050
|
+
return null;
|
|
1051
|
+
}
|
|
1052
|
+
dispatchChange() {
|
|
1053
|
+
this.dispatchEvent({
|
|
1054
|
+
type: "change",
|
|
1055
|
+
value: this.getValue()
|
|
1056
|
+
});
|
|
1057
|
+
}
|
|
1058
|
+
onChange(e) {
|
|
1059
|
+
return this._onChangeFunction = e, this;
|
|
1060
|
+
}
|
|
1061
|
+
}, ot = class extends q {
|
|
1062
|
+
constructor({ value: e = 0, step: t = .1, min: n = -Infinity, max: r = Infinity }) {
|
|
1063
|
+
super(), this.input = document.createElement("input"), this.input.type = "number", this.input.value = e, this.input.step = t, this.input.min = n, this.input.max = r, this.input.addEventListener("change", this._onChangeValue.bind(this)), this.domElement.appendChild(this.input), this.addDragHandler();
|
|
1064
|
+
}
|
|
1065
|
+
_onChangeValue() {
|
|
1066
|
+
let e = parseFloat(this.input.value), t = parseFloat(this.input.min), n = parseFloat(this.input.max);
|
|
1067
|
+
e > n ? this.input.value = n : (e < t || isNaN(e)) && (this.input.value = t), this.dispatchChange();
|
|
1068
|
+
}
|
|
1069
|
+
addDragHandler() {
|
|
1070
|
+
let e = !1, t, n;
|
|
1071
|
+
this.input.addEventListener("mousedown", (r) => {
|
|
1072
|
+
e = !0, t = r.clientY, n = parseFloat(this.input.value), document.body.style.cursor = "ns-resize";
|
|
1073
|
+
}), document.addEventListener("mousemove", (r) => {
|
|
1074
|
+
if (e) {
|
|
1075
|
+
let e = t - r.clientY, i = parseFloat(this.input.step) || 1, a = parseFloat(this.input.min), o = parseFloat(this.input.max), s = i;
|
|
1076
|
+
!isNaN(o) && isFinite(a) && (s = (o - a) / 100);
|
|
1077
|
+
let c = e * s, l = n + c;
|
|
1078
|
+
l = Math.max(a, Math.min(l, o));
|
|
1079
|
+
let u = (String(i).split(".")[1] || []).length;
|
|
1080
|
+
this.input.value = l.toFixed(u), this.input.dispatchEvent(new Event("input")), this.dispatchChange();
|
|
1081
|
+
}
|
|
1082
|
+
}), document.addEventListener("mouseup", () => {
|
|
1083
|
+
e && (e = !1, document.body.style.cursor = "default");
|
|
1084
|
+
});
|
|
1085
|
+
}
|
|
1086
|
+
setValue(e) {
|
|
1087
|
+
return this.input.value = e, super.setValue(e);
|
|
1088
|
+
}
|
|
1089
|
+
getValue() {
|
|
1090
|
+
return parseFloat(this.input.value);
|
|
1091
|
+
}
|
|
1092
|
+
}, st = class extends q {
|
|
1093
|
+
constructor({ value: e = !1 }) {
|
|
1094
|
+
super();
|
|
1095
|
+
let t = document.createElement("label");
|
|
1096
|
+
t.className = "custom-checkbox";
|
|
1097
|
+
let n = document.createElement("input");
|
|
1098
|
+
n.type = "checkbox", n.checked = e, this.checkbox = n;
|
|
1099
|
+
let r = document.createElement("span");
|
|
1100
|
+
r.className = "checkmark", t.appendChild(n), t.appendChild(r), this.domElement.appendChild(t), n.addEventListener("change", () => {
|
|
1101
|
+
this.dispatchChange();
|
|
1102
|
+
});
|
|
1103
|
+
}
|
|
1104
|
+
setValue(e) {
|
|
1105
|
+
return this.checkbox.checked = e, super.setValue(e);
|
|
1106
|
+
}
|
|
1107
|
+
getValue() {
|
|
1108
|
+
return this.checkbox.checked;
|
|
1109
|
+
}
|
|
1110
|
+
}, ct = class extends q {
|
|
1111
|
+
constructor({ value: e = 0, min: t = 0, max: n = 1, step: r = .01 }) {
|
|
1112
|
+
super(), this.slider = document.createElement("input"), this.slider.type = "range", this.slider.min = t, this.slider.max = n, this.slider.step = r;
|
|
1113
|
+
let i = new ot({
|
|
1114
|
+
value: e,
|
|
1115
|
+
min: t,
|
|
1116
|
+
max: n,
|
|
1117
|
+
step: r
|
|
1118
|
+
});
|
|
1119
|
+
this.numberInput = i.input, this.numberInput.style.flexBasis = "80px", this.numberInput.style.flexShrink = "0", this.slider.value = e, this.domElement.append(this.slider, this.numberInput), this.slider.addEventListener("input", () => {
|
|
1120
|
+
this.numberInput.value = this.slider.value, this.dispatchChange();
|
|
1121
|
+
}), i.addEventListener("change", () => {
|
|
1122
|
+
this.slider.value = parseFloat(this.numberInput.value), this.dispatchChange();
|
|
1123
|
+
});
|
|
1124
|
+
}
|
|
1125
|
+
setValue(e) {
|
|
1126
|
+
return this.slider.value = e, this.numberInput.value = e, super.setValue(e);
|
|
1127
|
+
}
|
|
1128
|
+
getValue() {
|
|
1129
|
+
return parseFloat(this.slider.value);
|
|
1130
|
+
}
|
|
1131
|
+
step(e) {
|
|
1132
|
+
return this.slider.step = e, this.numberInput.step = e, this;
|
|
1133
|
+
}
|
|
1134
|
+
}, lt = class extends q {
|
|
1135
|
+
constructor({ options: e = [], value: t = "" }) {
|
|
1136
|
+
super();
|
|
1137
|
+
let n = document.createElement("select"), r = (e, r) => {
|
|
1138
|
+
let i = document.createElement("option");
|
|
1139
|
+
return i.value = e, i.textContent = e, r == t && (i.selected = !0), n.appendChild(i), i;
|
|
1140
|
+
};
|
|
1141
|
+
Array.isArray(e) ? e.forEach((e) => r(e, e)) : Object.entries(e).forEach(([e, t]) => r(e, t)), this.domElement.appendChild(n), n.addEventListener("change", () => {
|
|
1142
|
+
this.dispatchChange();
|
|
1143
|
+
}), this.options = e, this.select = n;
|
|
1144
|
+
}
|
|
1145
|
+
getValue() {
|
|
1146
|
+
let e = this.options;
|
|
1147
|
+
return Array.isArray(e) ? e[this.select.selectedIndex] : e[this.select.value];
|
|
1148
|
+
}
|
|
1149
|
+
}, ut = class extends q {
|
|
1150
|
+
constructor({ value: e = "#ffffff" }) {
|
|
1151
|
+
super();
|
|
1152
|
+
let t = document.createElement("input");
|
|
1153
|
+
t.type = "color", t.value = this._getColorHex(e), this.colorInput = t, this._value = e, t.addEventListener("input", () => {
|
|
1154
|
+
let e = t.value;
|
|
1155
|
+
this._value.isColor ? this._value.setHex(parseInt(e.slice(1), 16)) : this._value = e, this.dispatchChange();
|
|
1156
|
+
}), this.domElement.appendChild(t);
|
|
1157
|
+
}
|
|
1158
|
+
_getColorHex(e) {
|
|
1159
|
+
return e.isColor && (e = e.getHex()), typeof e == "number" ? e = `#${e.toString(16)}` : e[0] !== "#" && (e = "#" + e), e;
|
|
1160
|
+
}
|
|
1161
|
+
getValue() {
|
|
1162
|
+
let e = this._value;
|
|
1163
|
+
return typeof e == "string" && (e = parseInt(e.slice(1), 16)), e;
|
|
1164
|
+
}
|
|
1165
|
+
}, dt = class extends q {
|
|
1166
|
+
constructor({ text: e = "Button", value: t = () => {} }) {
|
|
1167
|
+
super();
|
|
1168
|
+
let n = document.createElement("button");
|
|
1169
|
+
n.textContent = e, n.onclick = t, this.domElement.appendChild(n);
|
|
1170
|
+
}
|
|
1171
|
+
}, ft = class extends q {
|
|
1172
|
+
constructor({ value: e = "" }) {
|
|
1173
|
+
super();
|
|
1174
|
+
let t = document.createElement("input");
|
|
1175
|
+
t.type = "text", t.value = e, this.input = t, t.addEventListener("input", () => {
|
|
1176
|
+
this.dispatchChange();
|
|
1177
|
+
}), this.domElement.appendChild(t);
|
|
1178
|
+
}
|
|
1179
|
+
setValue(e) {
|
|
1180
|
+
return this.input.value = e, super.setValue(e);
|
|
1181
|
+
}
|
|
1182
|
+
getValue() {
|
|
1183
|
+
return this.input.value;
|
|
1184
|
+
}
|
|
1185
|
+
}, pt = class e {
|
|
1186
|
+
constructor(e, t) {
|
|
1187
|
+
this.parameters = e, this.name = t, this.paramList = new U(t), this.objects = [];
|
|
1188
|
+
}
|
|
1189
|
+
close() {
|
|
1190
|
+
return this.paramList.close(), this;
|
|
1191
|
+
}
|
|
1192
|
+
add(e, t, ...n) {
|
|
1193
|
+
let r = typeof e[t], i = null;
|
|
1194
|
+
return typeof n[0] == "object" ? i = this.addSelect(e, t, n[0]) : r === "number" ? i = n.length >= 2 ? this.addSlider(e, t, ...n) : this.addNumber(e, t, ...n) : r === "boolean" ? i = this.addBoolean(e, t) : r === "string" ? i = this.addString(e, t) : r === "function" && (i = this.addButton(e, t, ...n)), i;
|
|
1195
|
+
}
|
|
1196
|
+
_addParameter(e, t, n, r) {
|
|
1197
|
+
n.name = (e) => (r.data[0].textContent = e, n), n.listen = () => {
|
|
1198
|
+
let r = () => {
|
|
1199
|
+
let i = n.getValue(), a = e[t];
|
|
1200
|
+
i !== a && n.setValue(a), requestAnimationFrame(r);
|
|
1201
|
+
};
|
|
1202
|
+
return requestAnimationFrame(r), n;
|
|
1203
|
+
}, this._registerParameter(e, t, n, r);
|
|
1204
|
+
}
|
|
1205
|
+
_registerParameter(e, t, n, r) {
|
|
1206
|
+
this.objects.push({
|
|
1207
|
+
object: e,
|
|
1208
|
+
key: t,
|
|
1209
|
+
editor: n,
|
|
1210
|
+
subItem: r
|
|
1211
|
+
});
|
|
1212
|
+
}
|
|
1213
|
+
addString(e, t) {
|
|
1214
|
+
let n = e[t], r = new ft({ value: n });
|
|
1215
|
+
r.addEventListener("change", ({ value: n }) => {
|
|
1216
|
+
e[t] = n;
|
|
1217
|
+
});
|
|
1218
|
+
let i = W();
|
|
1219
|
+
i.textContent = t;
|
|
1220
|
+
let a = new U(i, r.domElement);
|
|
1221
|
+
return this.paramList.add(a), a.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, r, a), r;
|
|
1222
|
+
}
|
|
1223
|
+
addFolder(t) {
|
|
1224
|
+
let n = new e(this.parameters, t);
|
|
1225
|
+
return this.paramList.add(n.paramList), n;
|
|
1226
|
+
}
|
|
1227
|
+
addBoolean(e, t) {
|
|
1228
|
+
let n = e[t], r = new st({ value: n });
|
|
1229
|
+
r.addEventListener("change", ({ value: n }) => {
|
|
1230
|
+
e[t] = n;
|
|
1231
|
+
});
|
|
1232
|
+
let i = W();
|
|
1233
|
+
i.textContent = t;
|
|
1234
|
+
let a = new U(i, r.domElement);
|
|
1235
|
+
this.paramList.add(a);
|
|
1236
|
+
let o = a.domElement.firstChild;
|
|
1237
|
+
return o.classList.add("actionable"), o.addEventListener("click", (e) => {
|
|
1238
|
+
if (e.target.closest("label")) return;
|
|
1239
|
+
let t = o.querySelector("input[type=\"checkbox\"]");
|
|
1240
|
+
t && (t.checked = !t.checked, t.dispatchEvent(new Event("change")));
|
|
1241
|
+
}), this._addParameter(e, t, r, a), r;
|
|
1242
|
+
}
|
|
1243
|
+
addSelect(e, t, n) {
|
|
1244
|
+
let r = e[t], i = new lt({
|
|
1245
|
+
options: n,
|
|
1246
|
+
value: r
|
|
1247
|
+
});
|
|
1248
|
+
i.addEventListener("change", ({ value: n }) => {
|
|
1249
|
+
e[t] = n;
|
|
1250
|
+
});
|
|
1251
|
+
let a = W();
|
|
1252
|
+
a.textContent = t;
|
|
1253
|
+
let o = new U(a, i.domElement);
|
|
1254
|
+
return this.paramList.add(o), o.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, i, o), i;
|
|
1255
|
+
}
|
|
1256
|
+
addColor(e, t) {
|
|
1257
|
+
let n = e[t], r = new ut({ value: n });
|
|
1258
|
+
r.addEventListener("change", ({ value: n }) => {
|
|
1259
|
+
e[t] = n;
|
|
1260
|
+
});
|
|
1261
|
+
let i = W();
|
|
1262
|
+
i.textContent = t;
|
|
1263
|
+
let a = new U(i, r.domElement);
|
|
1264
|
+
return this.paramList.add(a), a.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, r, a), r;
|
|
1265
|
+
}
|
|
1266
|
+
addSlider(e, t, n = 0, r = 1, i = .01) {
|
|
1267
|
+
let a = e[t], o = new ct({
|
|
1268
|
+
value: a,
|
|
1269
|
+
min: n,
|
|
1270
|
+
max: r,
|
|
1271
|
+
step: i
|
|
1272
|
+
});
|
|
1273
|
+
o.addEventListener("change", ({ value: n }) => {
|
|
1274
|
+
e[t] = n;
|
|
1275
|
+
});
|
|
1276
|
+
let s = W();
|
|
1277
|
+
s.textContent = t;
|
|
1278
|
+
let c = new U(s, o.domElement);
|
|
1279
|
+
return this.paramList.add(c), c.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, o, c), o;
|
|
1280
|
+
}
|
|
1281
|
+
addNumber(e, t, ...n) {
|
|
1282
|
+
let r = e[t], [i, a] = n, o = new ot({
|
|
1283
|
+
value: r,
|
|
1284
|
+
min: i,
|
|
1285
|
+
max: a
|
|
1286
|
+
});
|
|
1287
|
+
o.addEventListener("change", ({ value: n }) => {
|
|
1288
|
+
e[t] = n;
|
|
1289
|
+
});
|
|
1290
|
+
let s = W();
|
|
1291
|
+
s.textContent = t;
|
|
1292
|
+
let c = new U(s, o.domElement);
|
|
1293
|
+
return this.paramList.add(c), c.domElement.firstChild.classList.add("actionable"), this._addParameter(e, t, o, c), o;
|
|
1294
|
+
}
|
|
1295
|
+
addButton(e, t) {
|
|
1296
|
+
let n = e[t], r = new dt({
|
|
1297
|
+
text: t,
|
|
1298
|
+
value: n
|
|
1299
|
+
});
|
|
1300
|
+
r.addEventListener("change", ({ value: n }) => {
|
|
1301
|
+
e[t] = n;
|
|
1302
|
+
});
|
|
1303
|
+
let i = new U(r.domElement);
|
|
1304
|
+
return i.itemRow.childNodes[0].style.gridColumn = "1 / -1", this.paramList.add(i), i.domElement.firstChild.classList.add("actionable"), r.name = (e) => (r.domElement.childNodes[0].textContent = e, r), this._registerParameter(e, t, r, i), r;
|
|
1305
|
+
}
|
|
1306
|
+
}, mt = class extends B {
|
|
1307
|
+
constructor(e = {}) {
|
|
1308
|
+
super(e.name || "Parameters", e);
|
|
1309
|
+
let t = new V("Property", "Value");
|
|
1310
|
+
t.domElement.classList.add("parameters"), t.setGridStyle(".5fr 1fr"), t.domElement.style.minWidth = "300px";
|
|
1311
|
+
let n = document.createElement("div");
|
|
1312
|
+
n.className = "list-scroll-wrapper", n.appendChild(t.domElement), this.content.appendChild(n), this.paramList = t, this.groups = [];
|
|
1313
|
+
}
|
|
1314
|
+
createGroup(e) {
|
|
1315
|
+
let t = new pt(this, e);
|
|
1316
|
+
return this.paramList.add(t.paramList), this.groups.push(t), t;
|
|
1317
|
+
}
|
|
1318
|
+
}, ht = "../extensions/extensions.json", J = T.prototype.init;
|
|
1319
|
+
function gt(e) {
|
|
1320
|
+
e ? T.prototype.init = async function() {
|
|
1321
|
+
if (this.backend.isWebGLBackend !== !0) {
|
|
1322
|
+
let e = this.backend.parameters;
|
|
1323
|
+
this.backend = new we(e);
|
|
1324
|
+
}
|
|
1325
|
+
return J.call(this);
|
|
1326
|
+
} : T.prototype.init = J;
|
|
1327
|
+
}
|
|
1328
|
+
var Y = null;
|
|
1329
|
+
function _t() {
|
|
1330
|
+
if (Y !== null) return Y;
|
|
1331
|
+
let e = Q("settings");
|
|
1332
|
+
return Y = {
|
|
1333
|
+
forceWebGL: e.forceWebGL === void 0 ? !1 : e.forceWebGL,
|
|
1334
|
+
captureStackTrace: e.captureStackTrace === void 0 ? !1 : e.captureStackTrace,
|
|
1335
|
+
activeExtensions: e.activeExtensions === void 0 ? {} : e.activeExtensions
|
|
1336
|
+
}, Y.forceWebGL && gt(!0), Y.captureStackTrace && (Ce.captureStackTrace = !0), Y;
|
|
1337
|
+
}
|
|
1338
|
+
function X() {
|
|
1339
|
+
$("settings", {
|
|
1340
|
+
forceWebGL: Y.forceWebGL,
|
|
1341
|
+
captureStackTrace: Y.captureStackTrace,
|
|
1342
|
+
activeExtensions: Y.activeExtensions
|
|
1343
|
+
});
|
|
1344
|
+
}
|
|
1345
|
+
_t();
|
|
1346
|
+
var vt = class extends mt {
|
|
1347
|
+
constructor() {
|
|
1348
|
+
super({ name: "Settings" }), this.extensions = {};
|
|
1349
|
+
let e = _t(), t = this.createGroup("Renderer");
|
|
1350
|
+
t.add(e, "forceWebGL").name("Force WebGL").onChange((e) => {
|
|
1351
|
+
gt(e), X(), location.reload();
|
|
1352
|
+
}), t.add(e, "captureStackTrace").name("Capture Stack Trace").onChange((e) => {
|
|
1353
|
+
Ce.captureStackTrace = e, X(), location.reload();
|
|
1354
|
+
});
|
|
1355
|
+
}
|
|
1356
|
+
init() {
|
|
1357
|
+
let e = this.createGroup("Extensions");
|
|
1358
|
+
this._getExtensions().then((t) => {
|
|
1359
|
+
for (let n of t) n.active = !1, n.loaded = !1, n.tab = null, this.extensions[n.name] = n, n.ui = e.add({ [n.name]: !1 }, n.name).onChange(async (e) => {
|
|
1360
|
+
this.setActiveExtension(n.name, e), e ? Y.activeExtensions[n.name] = {
|
|
1361
|
+
name: n.name,
|
|
1362
|
+
url: n.url
|
|
1363
|
+
} : delete Y.activeExtensions[n.name], this._updateExtensionUI(n), X();
|
|
1364
|
+
}), Y.activeExtensions[n.name] !== void 0 && n.ui.setValue(!0);
|
|
1365
|
+
});
|
|
1366
|
+
}
|
|
1367
|
+
async setActiveExtension(e, t) {
|
|
1368
|
+
let n = this.extensions[e], r = this.inspector;
|
|
1369
|
+
n && (t ? await this._loadExtension(r, n) : await this._unloadExtension(r, n));
|
|
1370
|
+
}
|
|
1371
|
+
_updateExtensionUI(e) {
|
|
1372
|
+
e.active && Y.activeExtensions[e.name] === void 0 ? (e.ui.checkbox.checked = !0, e.ui.domElement.style.setProperty("--accent-color", "var(--color-green)")) : e.ui.domElement.style.removeProperty("--accent-color");
|
|
1373
|
+
}
|
|
1374
|
+
async _unloadExtension(e, t) {
|
|
1375
|
+
t.active !== !1 && (e.removeTab(t.tab), t.active = !1, t.loaded = !1, t.tab = null, this._updateExtensionUI(t), this.dispatchEvent({
|
|
1376
|
+
type: "extensionremoved",
|
|
1377
|
+
name: t.name
|
|
1378
|
+
}));
|
|
1379
|
+
}
|
|
1380
|
+
async _loadExtension(e, t) {
|
|
1381
|
+
if (t.active === !0) return;
|
|
1382
|
+
t.active = !0;
|
|
1383
|
+
let n = await import(new URL(t.url, new URL(ht, import.meta.url)).href), r = n[Object.keys(n)[0]], i = new r();
|
|
1384
|
+
e.addTab(i), t.loaded = !0, t.tab = i, this._updateExtensionUI(t), this.dispatchEvent({
|
|
1385
|
+
type: "extensionadded",
|
|
1386
|
+
name: t.name,
|
|
1387
|
+
tab: i
|
|
1388
|
+
});
|
|
1389
|
+
}
|
|
1390
|
+
async _getExtensions() {
|
|
1391
|
+
let e = new URL(ht, import.meta.url);
|
|
1392
|
+
return await fetch(e).then((e) => e.json());
|
|
1393
|
+
}
|
|
1394
|
+
}, yt = /* @__PURE__ */ E(([e, t]) => {
|
|
1395
|
+
let n = N(0);
|
|
1396
|
+
Pe(() => {
|
|
1397
|
+
let { width: e, height: r } = t.value;
|
|
1398
|
+
n.value = e / r;
|
|
1399
|
+
});
|
|
1400
|
+
let r = e.sub(.5), i = P(r.x.div(n), r.y).add(.5);
|
|
1401
|
+
return F(i, j(0, i.x).mul(j(i.x, 1)).mul(j(0, i.y)).mul(j(i.y, 1)));
|
|
1402
|
+
}), bt = class extends B {
|
|
1403
|
+
constructor(e = {}) {
|
|
1404
|
+
super("Viewer", e);
|
|
1405
|
+
let t = new V("Viewer", "Name");
|
|
1406
|
+
t.setGridStyle("150px minmax(200px, 2fr)"), t.domElement.style.minWidth = "400px";
|
|
1407
|
+
let n = document.createElement("div");
|
|
1408
|
+
n.className = "list-scroll-wrapper", n.appendChild(t.domElement), this.content.appendChild(n);
|
|
1409
|
+
let r = new U("Nodes");
|
|
1410
|
+
t.add(r), this.itemLibrary = /* @__PURE__ */ new Map(), this.folderLibrary = /* @__PURE__ */ new Map(), this.canvasNodes = /* @__PURE__ */ new Map(), this.currentDataList = [], this.nodeList = t, this.nodes = r;
|
|
1411
|
+
}
|
|
1412
|
+
getFolder(e) {
|
|
1413
|
+
let t = this.folderLibrary.get(e);
|
|
1414
|
+
return t === void 0 && (t = new U(e), this.folderLibrary.set(e, t), this.nodeList.add(t)), t;
|
|
1415
|
+
}
|
|
1416
|
+
addNodeItem(e) {
|
|
1417
|
+
let t = this.itemLibrary.get(e.id);
|
|
1418
|
+
if (t === void 0) {
|
|
1419
|
+
let n = e.name, r = e.canvasTarget.domElement;
|
|
1420
|
+
t = new U(r, n), t.itemRow.children[1].style["justify-content"] = "flex-start", this.itemLibrary.set(e.id, t);
|
|
1421
|
+
}
|
|
1422
|
+
return t;
|
|
1423
|
+
}
|
|
1424
|
+
getCanvasDataByNode(e, t) {
|
|
1425
|
+
let n = this.canvasNodes.get(t);
|
|
1426
|
+
if (n === void 0) {
|
|
1427
|
+
let r = new De(document.createElement("canvas"));
|
|
1428
|
+
r.setPixelRatio(window.devicePixelRatio), r.setSize(140, 140);
|
|
1429
|
+
let i = t.id, { path: a, name: o } = tt(nt(t.getName() || "(unnamed)")), s = I(F(t.context({ getUV: (e) => {
|
|
1430
|
+
let t = yt(A, e), n = t.xy, r = t.z;
|
|
1431
|
+
return n.mul(r);
|
|
1432
|
+
} })), 1);
|
|
1433
|
+
s = Be(s, 0, e.outputColorSpace), s = s.context({ inspector: !0 });
|
|
1434
|
+
let c = new S();
|
|
1435
|
+
c.outputNode = s;
|
|
1436
|
+
let l = new Te(c);
|
|
1437
|
+
l.name = "Viewer - " + o, n = {
|
|
1438
|
+
id: i,
|
|
1439
|
+
name: o,
|
|
1440
|
+
path: a,
|
|
1441
|
+
node: t,
|
|
1442
|
+
quad: l,
|
|
1443
|
+
canvasTarget: r,
|
|
1444
|
+
material: c
|
|
1445
|
+
}, this.canvasNodes.set(t, n);
|
|
1446
|
+
}
|
|
1447
|
+
return n;
|
|
1448
|
+
}
|
|
1449
|
+
update(e) {
|
|
1450
|
+
let t = e.getRenderer(), n = e.getNodes();
|
|
1451
|
+
if (n.length > 0) {
|
|
1452
|
+
if (!t.backend.isWebGPUBackend) {
|
|
1453
|
+
e.resolveConsoleOnce("warn", "Inspector: Viewer is only available with WebGPU.");
|
|
1454
|
+
return;
|
|
1455
|
+
}
|
|
1456
|
+
this.isVisible || this.show();
|
|
1457
|
+
}
|
|
1458
|
+
if (!this.isActive) return;
|
|
1459
|
+
let r = n.map((e) => this.getCanvasDataByNode(t, e)), i = [...this.currentDataList];
|
|
1460
|
+
for (let e of i) if (this.itemLibrary.has(e.id) && r.indexOf(e) === -1) {
|
|
1461
|
+
let t = this.itemLibrary.get(e.id), n = t.parent;
|
|
1462
|
+
n.remove(t), this.folderLibrary.has(n.data[0]) && n.children.length === 0 && (n.parent.remove(n), this.folderLibrary.delete(n.data[0])), this.itemLibrary.delete(e.id);
|
|
1463
|
+
}
|
|
1464
|
+
let a = {};
|
|
1465
|
+
for (let e of r) {
|
|
1466
|
+
let n = this.addNodeItem(e), i = t.getCanvasTarget(), o = e.path;
|
|
1467
|
+
if (o) {
|
|
1468
|
+
let e = this.getFolder(o);
|
|
1469
|
+
a[o] === void 0 && (a[o] = 0), (e.parent === null || n.parent !== e || e.children.indexOf(n) !== a[o]) && e.add(n), a[o]++;
|
|
1470
|
+
} else n.parent || this.nodes.add(n);
|
|
1471
|
+
this.currentDataList = r;
|
|
1472
|
+
let s = w.resetRendererState(t);
|
|
1473
|
+
t.toneMapping = 0, t.outputColorSpace = p, t.setCanvasTarget(e.canvasTarget), e.quad.render(t), t.setCanvasTarget(i), w.restoreRendererState(t, s);
|
|
1474
|
+
}
|
|
1475
|
+
}
|
|
1476
|
+
}, xt = 500, St = 60, Ct = class extends B {
|
|
1477
|
+
constructor(e = {}) {
|
|
1478
|
+
super("Timeline", e), this.isRecording = !1, this.frames = [], this.baseTriangles = 0, this.currentFrame = null, this.isHierarchicalView = !0, this.callBlocks = /* @__PURE__ */ new WeakMap(), this.fallbackBlocks = [], this.originalBackend = null, this.originalMethods = /* @__PURE__ */ new Map(), this.renderer = null, this.graph = new H(xt), this.graph.addLine("fps", "var( --color-fps )"), this.graph.addLine("calls", "var( --color-call )"), this.graph.addLine("triangles", "var( --color-red )");
|
|
1479
|
+
let t = document.createElement("div");
|
|
1480
|
+
t.className = "list-scroll-wrapper", this.scrollWrapper = t, this.content.appendChild(t), this.buildHeader(), this.buildUI(), window.addEventListener("resize", () => {
|
|
1481
|
+
!this.isRecording && this.frames.length > 0 && this.renderSlider();
|
|
1482
|
+
});
|
|
1483
|
+
}
|
|
1484
|
+
buildHeader() {
|
|
1485
|
+
let e = document.createElement("div");
|
|
1486
|
+
e.className = "console-header", this.recordButton = document.createElement("button"), this.recordButton.className = "console-copy-button", this.recordButton.title = "Record", this.recordButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"currentColor\"></circle></svg>", this.recordButton.style.padding = "0 10px", this.recordButton.style.lineHeight = "24px", this.recordButton.style.display = "flex", this.recordButton.style.alignItems = "center", this.recordButton.addEventListener("click", () => this.toggleRecording());
|
|
1487
|
+
let t = document.createElement("button");
|
|
1488
|
+
t.className = "console-copy-button", t.title = "Clear", t.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line></svg>", t.style.padding = "0 10px", t.style.lineHeight = "24px", t.style.display = "flex", t.style.alignItems = "center", t.addEventListener("click", () => this.clear()), this.viewModeButton = document.createElement("button"), this.viewModeButton.className = "console-copy-button", this.viewModeButton.title = "Toggle View Mode", this.viewModeButton.textContent = "Mode: Hierarchy", this.viewModeButton.style.padding = "0 10px", this.viewModeButton.style.lineHeight = "24px", this.viewModeButton.addEventListener("click", () => {
|
|
1489
|
+
this.isHierarchicalView = !this.isHierarchicalView, this.viewModeButton.textContent = this.isHierarchicalView ? "Mode: Hierarchy" : "Mode: Counts", this.selectedFrameIndex !== void 0 && this.selectedFrameIndex !== -1 && this.selectFrame(this.selectedFrameIndex);
|
|
1490
|
+
}), this.recordRefreshButton = document.createElement("button"), this.recordRefreshButton.className = "console-copy-button", this.recordRefreshButton.title = "Refresh & Record", this.recordRefreshButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"></path><path d=\"M21 3v5h-5\"></path><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"currentColor\"></circle></svg>", this.recordRefreshButton.style.padding = "0 10px", this.recordRefreshButton.style.lineHeight = "24px", this.recordRefreshButton.style.display = "flex", this.recordRefreshButton.style.alignItems = "center", this.recordRefreshButton.addEventListener("click", () => {
|
|
1491
|
+
let e = Q("timeline");
|
|
1492
|
+
e.recording = !0, $("timeline", e), window.location.reload();
|
|
1493
|
+
}), this.exportButton = document.createElement("button"), this.exportButton.className = "console-copy-button", this.exportButton.title = "Export", this.exportButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path><polyline points=\"7 10 12 15 17 10\"></polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line></svg>", this.exportButton.style.padding = "0 10px", this.exportButton.style.lineHeight = "24px", this.exportButton.style.display = "flex", this.exportButton.style.alignItems = "center", this.exportButton.addEventListener("click", () => this.exportData());
|
|
1494
|
+
let n = document.createElement("div");
|
|
1495
|
+
n.className = "console-buttons-group", n.appendChild(this.viewModeButton), n.appendChild(this.recordButton), n.appendChild(this.recordRefreshButton), n.appendChild(this.exportButton), n.appendChild(t), e.style.display = "flex", e.style.justifyContent = "space-between", e.style.padding = "6px", e.style.borderBottom = "1px solid var(--border-color)";
|
|
1496
|
+
let r = document.createElement("div");
|
|
1497
|
+
r.textContent = "Backend Calls", r.style.display = "flex", r.style.alignItems = "center", r.style.color = "var(--text-primary)", r.style.alignSelf = "center", r.style.paddingLeft = "5px", this.frameInfo = document.createElement("span"), this.frameInfo.style.display = "inline-flex", this.frameInfo.style.alignItems = "center", this.frameInfo.style.marginLeft = "15px", this.frameInfo.style.fontFamily = "monospace", this.frameInfo.style.color = "var(--text-secondary)", this.frameInfo.style.fontSize = "12px", r.appendChild(this.frameInfo), e.appendChild(r), e.appendChild(n), this.scrollWrapper.appendChild(e);
|
|
1498
|
+
}
|
|
1499
|
+
buildUI() {
|
|
1500
|
+
let e = document.createElement("div");
|
|
1501
|
+
e.style.display = "flex", e.style.flexDirection = "column", e.style.height = "calc(100% - 37px)", e.style.width = "100%";
|
|
1502
|
+
let t = document.createElement("div");
|
|
1503
|
+
t.style.height = "60px", t.style.minHeight = "60px", t.style.borderBottom = "1px solid var(--border-color)", t.style.backgroundColor = "var(--background-color)", this.graphSlider = document.createElement("div"), this.graphSlider.style.height = "100%", this.graphSlider.style.margin = "0 10px", this.graphSlider.style.position = "relative", this.graphSlider.style.cursor = "crosshair", t.appendChild(this.graphSlider), this.graph.domElement.style.width = "100%", this.graph.domElement.style.height = "100%", this.graphSlider.appendChild(this.graph.domElement), this.hoverIndicator = document.createElement("div"), this.hoverIndicator.style.position = "absolute", this.hoverIndicator.style.top = "0", this.hoverIndicator.style.bottom = "0", this.hoverIndicator.style.width = "1px", this.hoverIndicator.style.backgroundColor = "rgba(255, 255, 255, 0.3)", this.hoverIndicator.style.pointerEvents = "none", this.hoverIndicator.style.display = "none", this.hoverIndicator.style.zIndex = "9", this.hoverIndicator.style.transform = "translateX(-50%)", this.graphSlider.appendChild(this.hoverIndicator), this.playhead = document.createElement("div"), this.playhead.style.position = "absolute", this.playhead.style.top = "0", this.playhead.style.bottom = "0", this.playhead.style.width = "2px", this.playhead.style.backgroundColor = "var(--color-red)", this.playhead.style.boxShadow = "0 0 4px rgba(255,0,0,0.5)", this.playhead.style.pointerEvents = "none", this.playhead.style.display = "none", this.playhead.style.zIndex = "10", this.playhead.style.transform = "translateX(-50%)", this.graphSlider.appendChild(this.playhead);
|
|
1504
|
+
let n = document.createElement("div");
|
|
1505
|
+
n.style.position = "absolute", n.style.top = "0", n.style.left = "50%", n.style.transform = "translate(-50%, 0)", n.style.width = "0", n.style.height = "0", n.style.borderLeft = "6px solid transparent", n.style.borderRight = "6px solid transparent", n.style.borderTop = "8px solid var(--color-red)", this.playhead.appendChild(n), this.graphSlider.tabIndex = 0, this.graphSlider.style.outline = "none";
|
|
1506
|
+
let r = !1, i = (e) => {
|
|
1507
|
+
if (this.frames.length === 0) return;
|
|
1508
|
+
let t = this.graphSlider.getBoundingClientRect(), n = e.clientX - t.left;
|
|
1509
|
+
n = Math.max(0, Math.min(n, t.width)), this.fixedScreenX = n;
|
|
1510
|
+
let r = this.graph.lines.calls.points.length;
|
|
1511
|
+
if (r === 0) return;
|
|
1512
|
+
let i = t.width / (this.graph.maxPoints - 1), a = t.width - (r - 1) * i, o = Math.round((n - a) / i);
|
|
1513
|
+
o = Math.max(0, Math.min(o, r - 1)), o >= r - 2 ? this.isTrackingLatest = !0 : this.isTrackingLatest = !1;
|
|
1514
|
+
let s = o;
|
|
1515
|
+
this.frames.length > r && (s += this.frames.length - r), this.playhead.style.display = "block", this.selectFrame(s);
|
|
1516
|
+
};
|
|
1517
|
+
this.graphSlider.addEventListener("mousedown", (e) => {
|
|
1518
|
+
r = !0, this.isManualScrubbing = !0, this.graphSlider.focus(), i(e);
|
|
1519
|
+
}), this.graphSlider.addEventListener("mouseenter", () => {
|
|
1520
|
+
this.frames.length > 0 && !this.isRecording && (this.hoverIndicator.style.display = "block");
|
|
1521
|
+
}), this.graphSlider.addEventListener("mouseleave", () => {
|
|
1522
|
+
this.hoverIndicator.style.display = "none";
|
|
1523
|
+
}), this.graphSlider.addEventListener("mousemove", (e) => {
|
|
1524
|
+
if (this.frames.length === 0 || this.isRecording) return;
|
|
1525
|
+
let t = this.graphSlider.getBoundingClientRect(), n = e.clientX - t.left;
|
|
1526
|
+
n = Math.max(0, Math.min(n, t.width));
|
|
1527
|
+
let r = this.graph.lines.calls.points.length;
|
|
1528
|
+
if (r > 0) {
|
|
1529
|
+
let e = t.width / (this.graph.maxPoints - 1), i = t.width - (r - 1) * e, a = Math.round((n - i) / e);
|
|
1530
|
+
a = Math.max(0, Math.min(a, r - 1));
|
|
1531
|
+
let o = i + a * e;
|
|
1532
|
+
o = Math.max(1, Math.min(o, t.width - 1)), this.hoverIndicator.style.left = o + "px";
|
|
1533
|
+
} else {
|
|
1534
|
+
let e = Math.max(1, Math.min(n, t.width - 1));
|
|
1535
|
+
this.hoverIndicator.style.left = e + "px";
|
|
1536
|
+
}
|
|
1537
|
+
}), this.graphSlider.addEventListener("keydown", (e) => {
|
|
1538
|
+
if (this.frames.length === 0 || this.isRecording) return;
|
|
1539
|
+
let t = this.selectedFrameIndex;
|
|
1540
|
+
if (e.key === "ArrowLeft" ? (t = Math.max(0, this.selectedFrameIndex - 1), e.preventDefault()) : e.key === "ArrowRight" && (t = Math.min(this.frames.length - 1, this.selectedFrameIndex + 1), e.preventDefault()), t !== this.selectedFrameIndex) {
|
|
1541
|
+
this.selectFrame(t);
|
|
1542
|
+
let e = this.graph.lines.calls.points.length;
|
|
1543
|
+
if (e > 0) {
|
|
1544
|
+
let n = t;
|
|
1545
|
+
this.frames.length > e && (n = t - (this.frames.length - e)), n >= e - 2 ? this.isTrackingLatest = !0 : this.isTrackingLatest = !1;
|
|
1546
|
+
let r = this.graphSlider.getBoundingClientRect(), i = r.width / (this.graph.maxPoints - 1);
|
|
1547
|
+
this.fixedScreenX = r.width - (e - 1) * i + n * i;
|
|
1548
|
+
}
|
|
1549
|
+
}
|
|
1550
|
+
}), window.addEventListener("mousemove", (e) => {
|
|
1551
|
+
if (r) {
|
|
1552
|
+
i(e);
|
|
1553
|
+
let t = this.graphSlider.getBoundingClientRect(), n = e.clientX - t.left;
|
|
1554
|
+
n = Math.max(0, Math.min(n, t.width));
|
|
1555
|
+
let r = this.graph.lines.calls.points.length;
|
|
1556
|
+
if (r > 0) {
|
|
1557
|
+
let e = t.width / (this.graph.maxPoints - 1), i = t.width - (r - 1) * e, a = Math.round((n - i) / e);
|
|
1558
|
+
a = Math.max(0, Math.min(a, r - 1));
|
|
1559
|
+
let o = i + a * e;
|
|
1560
|
+
o = Math.max(1, Math.min(o, t.width - 1)), this.hoverIndicator.style.left = o + "px";
|
|
1561
|
+
} else {
|
|
1562
|
+
let e = Math.max(1, Math.min(n, t.width - 1));
|
|
1563
|
+
this.hoverIndicator.style.left = e + "px";
|
|
1564
|
+
}
|
|
1565
|
+
}
|
|
1566
|
+
}), window.addEventListener("mouseup", () => {
|
|
1567
|
+
r = !1, this.isManualScrubbing = !1;
|
|
1568
|
+
}), e.appendChild(t);
|
|
1569
|
+
let a = document.createElement("div");
|
|
1570
|
+
a.style.flex = "1", a.style.display = "flex", a.style.flexDirection = "column", a.style.overflow = "hidden", this.timelineTrack = document.createElement("div"), this.timelineTrack.style.flex = "1", this.timelineTrack.style.overflowY = "auto", this.timelineTrack.style.margin = "10px", this.timelineTrack.style.backgroundColor = "var(--background-color)", a.appendChild(this.timelineTrack), e.appendChild(a), this.scrollWrapper.appendChild(e);
|
|
1571
|
+
}
|
|
1572
|
+
setRenderer(e) {
|
|
1573
|
+
this.renderer = e;
|
|
1574
|
+
let t = Q("timeline");
|
|
1575
|
+
t.recording && (t.recording = !1, $("timeline", t), this.toggleRecording());
|
|
1576
|
+
}
|
|
1577
|
+
toggleRecording() {
|
|
1578
|
+
if (!this.renderer) {
|
|
1579
|
+
console.warn("Timeline: No renderer defined.");
|
|
1580
|
+
return;
|
|
1581
|
+
}
|
|
1582
|
+
this.isRecording = !this.isRecording, this.isRecording ? (this.recordButton.title = "Stop", this.recordButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect></svg>", this.recordButton.style.color = "var(--color-red)", this.startRecording()) : (this.recordButton.title = "Record", this.recordButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"currentColor\"></circle></svg>", this.recordButton.style.color = "", this.stopRecording(), this.renderSlider());
|
|
1583
|
+
}
|
|
1584
|
+
startRecording() {
|
|
1585
|
+
this.frames = [], this.currentFrame = null, this.selectedFrameIndex = -1, this.fixedScreenX = 0, this.isTrackingLatest = !0, this.isManualScrubbing = !1, this.clear(), this.frameInfo.textContent = "Recording...";
|
|
1586
|
+
let e = this.renderer.backend, t = Object.getOwnPropertyNames(Object.getPrototypeOf(e)).filter((e) => e !== "constructor");
|
|
1587
|
+
for (let n of t) {
|
|
1588
|
+
let t = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e), n);
|
|
1589
|
+
if (t && (t.get || t.set)) continue;
|
|
1590
|
+
let r = e[n];
|
|
1591
|
+
typeof r == "function" && typeof n == "string" && (this.originalMethods.set(n, r), e[n] = (...t) => {
|
|
1592
|
+
if (n.toLowerCase().includes("timestamp") || n.startsWith("get") || n.startsWith("set") || n.startsWith("has") || n.startsWith("_") || n.startsWith("needs")) return r.apply(e, t);
|
|
1593
|
+
let i = this.renderer.info.frame;
|
|
1594
|
+
if (!this.currentFrame || this.currentFrame.id !== i) {
|
|
1595
|
+
if (this.currentFrame) {
|
|
1596
|
+
this.currentFrame.fps = this.renderer.inspector ? this.renderer.inspector.fps : 0, isFinite(this.currentFrame.fps) || (this.currentFrame.fps = 0);
|
|
1597
|
+
let e = this.currentFrame.triangles || 0;
|
|
1598
|
+
if (e > this.baseTriangles) {
|
|
1599
|
+
let t = this.baseTriangles;
|
|
1600
|
+
if (this.baseTriangles = e, t > 0) {
|
|
1601
|
+
let e = t / this.baseTriangles, n = this.graph.lines.triangles.points;
|
|
1602
|
+
for (let t = 0; t < n.length; t++) n[t] *= e;
|
|
1603
|
+
}
|
|
1604
|
+
}
|
|
1605
|
+
let t = this.baseTriangles > 0 ? e / this.baseTriangles * St : 0;
|
|
1606
|
+
this.graph.addPoint("calls", this.currentFrame.calls.length), this.graph.addPoint("fps", this.currentFrame.fps), this.graph.addPoint("triangles", t), this.graph.update();
|
|
1607
|
+
}
|
|
1608
|
+
if (this.currentFrame = {
|
|
1609
|
+
id: i,
|
|
1610
|
+
calls: [],
|
|
1611
|
+
fps: 0,
|
|
1612
|
+
triangles: 0
|
|
1613
|
+
}, this.frames.push(this.currentFrame), this.frames.length > xt && this.frames.shift(), !this.isManualScrubbing) {
|
|
1614
|
+
if (this.isTrackingLatest) {
|
|
1615
|
+
let e = this.frames.length > 1 ? this.frames.length - 2 : 0;
|
|
1616
|
+
this.selectFrame(e);
|
|
1617
|
+
} else if (this.selectedFrameIndex !== -1) {
|
|
1618
|
+
let e = this.graph.lines.calls.points.length;
|
|
1619
|
+
if (e > 0) {
|
|
1620
|
+
let t = this.graphSlider.getBoundingClientRect(), n = t.width / (this.graph.maxPoints - 1), r = t.width - (e - 1) * n, i = Math.round((this.fixedScreenX - r) / n);
|
|
1621
|
+
i = Math.max(0, Math.min(i, e - 1));
|
|
1622
|
+
let a = i;
|
|
1623
|
+
this.frames.length > e && (a += this.frames.length - e), this.selectFrame(a);
|
|
1624
|
+
}
|
|
1625
|
+
}
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1628
|
+
let a = {
|
|
1629
|
+
method: n,
|
|
1630
|
+
target: t[0]
|
|
1631
|
+
}, o = this.getCallDetail(n, t);
|
|
1632
|
+
return o && (a.details = o, o.triangles !== void 0 && (this.currentFrame.triangles += o.triangles)), this.currentFrame.calls.push(a), r.apply(e, t);
|
|
1633
|
+
});
|
|
1634
|
+
}
|
|
1635
|
+
}
|
|
1636
|
+
stopRecording() {
|
|
1637
|
+
if (this.originalMethods.size > 0) {
|
|
1638
|
+
let e = this.renderer.backend;
|
|
1639
|
+
for (let [t, n] of this.originalMethods.entries()) e[t] = n;
|
|
1640
|
+
this.originalMethods.clear(), this.currentFrame && (this.currentFrame.fps = this.renderer.inspector ? this.renderer.inspector.fps : 0);
|
|
1641
|
+
}
|
|
1642
|
+
}
|
|
1643
|
+
clear() {
|
|
1644
|
+
this.frames = [], this.timelineTrack.innerHTML = "", this.playhead.style.display = "none", this.frameInfo.textContent = "", this.baseTriangles = 0, this.graph.lines.calls.points = [], this.graph.lines.fps.points = [], this.graph.lines.triangles.points = [], this.graph.resetLimit(), this.graph.update();
|
|
1645
|
+
}
|
|
1646
|
+
exportData() {
|
|
1647
|
+
if (this.frames.length === 0) return;
|
|
1648
|
+
let e = JSON.stringify(this.frames, null, " "), t = new Blob([e], { type: "application/json" }), n = URL.createObjectURL(t), r = document.createElement("a");
|
|
1649
|
+
r.href = n, r.download = "threejs-timeline.json", r.click(), URL.revokeObjectURL(n);
|
|
1650
|
+
}
|
|
1651
|
+
getRenderTargetDetails(e) {
|
|
1652
|
+
let t = e.textures, r = [], a = (e) => {
|
|
1653
|
+
switch (e.type) {
|
|
1654
|
+
case v:
|
|
1655
|
+
case g: return "8";
|
|
1656
|
+
case se:
|
|
1657
|
+
case fe:
|
|
1658
|
+
case re:
|
|
1659
|
+
case m:
|
|
1660
|
+
case ue: return "16";
|
|
1661
|
+
case de:
|
|
1662
|
+
case _:
|
|
1663
|
+
case ce:
|
|
1664
|
+
case te:
|
|
1665
|
+
case y:
|
|
1666
|
+
case ie: return "32";
|
|
1667
|
+
default: return "?";
|
|
1668
|
+
}
|
|
1669
|
+
}, l = (e) => {
|
|
1670
|
+
switch (e.format) {
|
|
1671
|
+
case le: return "a";
|
|
1672
|
+
case s:
|
|
1673
|
+
case ee: return "r";
|
|
1674
|
+
case c:
|
|
1675
|
+
case n: return "rg";
|
|
1676
|
+
case ae:
|
|
1677
|
+
case ne: return "rgb";
|
|
1678
|
+
case o: return "depth";
|
|
1679
|
+
case oe: return "depth-stencil";
|
|
1680
|
+
case f:
|
|
1681
|
+
case i:
|
|
1682
|
+
default: return "rgba";
|
|
1683
|
+
}
|
|
1684
|
+
};
|
|
1685
|
+
for (let e = 0; e < t.length; e++) {
|
|
1686
|
+
let n = t[e], i = a(n), o = l(n), s = `[${e}]`;
|
|
1687
|
+
n.name && !(n.isDepthTexture && n.name === "depth") && (s += ` ${n.name}`), s += ` ${o} ${i} bpc`, r.push(s);
|
|
1688
|
+
}
|
|
1689
|
+
let u = {
|
|
1690
|
+
target: e.name || "RenderTarget",
|
|
1691
|
+
[`attachments(${t.length})`]: r.join(", ")
|
|
1692
|
+
};
|
|
1693
|
+
return e.depthTexture && (u.depth = `${a(e.depthTexture)} bpc`), u;
|
|
1694
|
+
}
|
|
1695
|
+
getCallDetail(e, t) {
|
|
1696
|
+
switch (e) {
|
|
1697
|
+
case "draw": {
|
|
1698
|
+
let e = t[0], n = {
|
|
1699
|
+
object: e.object.name || e.object.type,
|
|
1700
|
+
material: e.material.name || e.material.type,
|
|
1701
|
+
geometry: e.geometry.name || e.geometry.type
|
|
1702
|
+
};
|
|
1703
|
+
if (e.getDrawParameters) {
|
|
1704
|
+
let t = e.getDrawParameters();
|
|
1705
|
+
t && (e.object.isMesh || e.object.isSprite) && (n.triangles = t.vertexCount / 3, e.object.count > 1 && (n.instance = e.object.count, n["triangles per instance"] = n.triangles, n.triangles *= n.instance));
|
|
1706
|
+
}
|
|
1707
|
+
return n;
|
|
1708
|
+
}
|
|
1709
|
+
case "beginRender": {
|
|
1710
|
+
let e = t[0], n = {
|
|
1711
|
+
scene: this.renderer.inspector.currentRender.name || "unknown",
|
|
1712
|
+
camera: e.camera.name || e.camera.type
|
|
1713
|
+
};
|
|
1714
|
+
return e.renderTarget && !e.renderTarget.isPostProcessingRenderTarget ? Object.assign(n, this.getRenderTargetDetails(e.renderTarget)) : n.target = "CanvasTarget", n;
|
|
1715
|
+
}
|
|
1716
|
+
case "beginCompute": return { compute: this.renderer.inspector.currentCompute.name || "unknown" };
|
|
1717
|
+
case "compute": {
|
|
1718
|
+
let e = t[1], n = t[2], r = t[4] || e.dispatchSize || e.count, i = e.name || e.type || "unknown", a = 0;
|
|
1719
|
+
n && (a = n.length);
|
|
1720
|
+
let o;
|
|
1721
|
+
return o = r.isIndirectStorageBufferAttribute ? "indirect" : Array.isArray(r) ? r.join(", ") : r, {
|
|
1722
|
+
node: i,
|
|
1723
|
+
bindings: a,
|
|
1724
|
+
dispatch: o
|
|
1725
|
+
};
|
|
1726
|
+
}
|
|
1727
|
+
case "updateBinding": return { group: t[0].name || "unknown" };
|
|
1728
|
+
case "clear": {
|
|
1729
|
+
let e = t[3], n = {
|
|
1730
|
+
color: t[0],
|
|
1731
|
+
depth: t[1],
|
|
1732
|
+
stencil: t[2]
|
|
1733
|
+
};
|
|
1734
|
+
if (e.renderTarget && !e.renderTarget.isPostProcessingRenderTarget) {
|
|
1735
|
+
let t = this.getRenderTargetDetails(e.renderTarget);
|
|
1736
|
+
t.depth && (t["depth texture"] = t.depth, delete t.depth), Object.assign(n, t);
|
|
1737
|
+
} else n.target = "CanvasTarget";
|
|
1738
|
+
return n;
|
|
1739
|
+
}
|
|
1740
|
+
case "updateViewport": {
|
|
1741
|
+
let { x: e, y: n, width: r, height: i } = t[0].viewportValue;
|
|
1742
|
+
return {
|
|
1743
|
+
x: e,
|
|
1744
|
+
y: n,
|
|
1745
|
+
width: r,
|
|
1746
|
+
height: i
|
|
1747
|
+
};
|
|
1748
|
+
}
|
|
1749
|
+
case "updateScissor": {
|
|
1750
|
+
let { x: e, y: n, width: r, height: i } = t[0].scissorValue;
|
|
1751
|
+
return {
|
|
1752
|
+
x: e,
|
|
1753
|
+
y: n,
|
|
1754
|
+
width: r,
|
|
1755
|
+
height: i
|
|
1756
|
+
};
|
|
1757
|
+
}
|
|
1758
|
+
case "createProgram":
|
|
1759
|
+
case "destroyProgram": {
|
|
1760
|
+
let e = t[0];
|
|
1761
|
+
return {
|
|
1762
|
+
stage: e.stage,
|
|
1763
|
+
name: e.name || "unknown"
|
|
1764
|
+
};
|
|
1765
|
+
}
|
|
1766
|
+
case "createRenderPipeline": {
|
|
1767
|
+
let e = t[0];
|
|
1768
|
+
return {
|
|
1769
|
+
object: e.object && (e.object.name || e.object.type) || "unknown",
|
|
1770
|
+
material: e.material && (e.material.name || e.material.type) || "unknown"
|
|
1771
|
+
};
|
|
1772
|
+
}
|
|
1773
|
+
case "createComputePipeline":
|
|
1774
|
+
case "destroyComputePipeline": return { name: t[0].name || "unknown" };
|
|
1775
|
+
case "createBindings":
|
|
1776
|
+
case "updateBindings": {
|
|
1777
|
+
let e = t[0], n = { group: e.name || "unknown" };
|
|
1778
|
+
return e.bindings && (n.count = e.bindings.length), n;
|
|
1779
|
+
}
|
|
1780
|
+
case "createNodeBuilder": {
|
|
1781
|
+
let e = t[0], n = { object: e.name || e.type || "unknown" };
|
|
1782
|
+
return e.material && (n.material = e.material.name || e.material.type || "unknown"), n;
|
|
1783
|
+
}
|
|
1784
|
+
case "createAttribute":
|
|
1785
|
+
case "createIndexAttribute":
|
|
1786
|
+
case "createStorageAttribute":
|
|
1787
|
+
case "destroyAttribute":
|
|
1788
|
+
case "destroyIndexAttribute":
|
|
1789
|
+
case "destroyStorageAttribute": {
|
|
1790
|
+
let e = t[0], n = {};
|
|
1791
|
+
return e.name && (n.name = e.name), e.count !== void 0 && (n.count = e.count), e.itemSize !== void 0 && (n.itemSize = e.itemSize), n;
|
|
1792
|
+
}
|
|
1793
|
+
case "copyFramebufferToTexture": {
|
|
1794
|
+
let e = t[0], n = t[2];
|
|
1795
|
+
return {
|
|
1796
|
+
target: this.getTextureName(e),
|
|
1797
|
+
width: n.z,
|
|
1798
|
+
height: n.w
|
|
1799
|
+
};
|
|
1800
|
+
}
|
|
1801
|
+
case "copyTextureToTexture": {
|
|
1802
|
+
let e = t[0], n = t[1];
|
|
1803
|
+
return {
|
|
1804
|
+
source: this.getTextureName(e),
|
|
1805
|
+
destination: this.getTextureName(n)
|
|
1806
|
+
};
|
|
1807
|
+
}
|
|
1808
|
+
case "updateSampler": {
|
|
1809
|
+
let e = t[0];
|
|
1810
|
+
return {
|
|
1811
|
+
magFilter: this.getTextureFilterName(e.magFilter),
|
|
1812
|
+
minFilter: this.getTextureFilterName(e.minFilter),
|
|
1813
|
+
wrapS: this.getTextureWrapName(e.wrapS),
|
|
1814
|
+
wrapT: this.getTextureWrapName(e.wrapT),
|
|
1815
|
+
anisotropy: e.anisotropy
|
|
1816
|
+
};
|
|
1817
|
+
}
|
|
1818
|
+
case "updateTexture":
|
|
1819
|
+
case "generateMipmaps":
|
|
1820
|
+
case "createTexture":
|
|
1821
|
+
case "destroyTexture": {
|
|
1822
|
+
let e = t[0], n = { texture: this.getTextureName(e) };
|
|
1823
|
+
return e.image && (e.image.width !== void 0 && (n.width = e.image.width), e.image.height !== void 0 && (n.height = e.image.height)), n;
|
|
1824
|
+
}
|
|
1825
|
+
}
|
|
1826
|
+
return null;
|
|
1827
|
+
}
|
|
1828
|
+
getTextureName(e) {
|
|
1829
|
+
if (e.name) return e.name;
|
|
1830
|
+
for (let t of [
|
|
1831
|
+
"isFramebufferTexture",
|
|
1832
|
+
"isDepthTexture",
|
|
1833
|
+
"isDataArrayTexture",
|
|
1834
|
+
"isData3DTexture",
|
|
1835
|
+
"isDataTexture",
|
|
1836
|
+
"isCompressedArrayTexture",
|
|
1837
|
+
"isCompressedTexture",
|
|
1838
|
+
"isCubeTexture",
|
|
1839
|
+
"isVideoTexture",
|
|
1840
|
+
"isCanvasTexture",
|
|
1841
|
+
"isTexture"
|
|
1842
|
+
]) if (e[t]) return t.replace("is", "");
|
|
1843
|
+
return "Texture";
|
|
1844
|
+
}
|
|
1845
|
+
getTextureFilterName(e) {
|
|
1846
|
+
return {
|
|
1847
|
+
1003: "Nearest",
|
|
1848
|
+
1004: "NearestMipmapNearest",
|
|
1849
|
+
1005: "NearestMipmapLinear",
|
|
1850
|
+
1006: "Linear",
|
|
1851
|
+
1007: "LinearMipmapNearest",
|
|
1852
|
+
1008: "LinearMipmapLinear"
|
|
1853
|
+
}[e] || e;
|
|
1854
|
+
}
|
|
1855
|
+
getTextureWrapName(e) {
|
|
1856
|
+
return {
|
|
1857
|
+
1e3: "Repeat",
|
|
1858
|
+
1001: "ClampToEdge",
|
|
1859
|
+
1002: "MirroredRepeat"
|
|
1860
|
+
}[e] || e;
|
|
1861
|
+
}
|
|
1862
|
+
formatDetails(e) {
|
|
1863
|
+
let t = [];
|
|
1864
|
+
for (let n in e) e[n] !== void 0 && t.push(`<span style="opacity: 0.5">${n}:</span> <span style="color: var(--text-secondary); opacity: 1">${e[n]}</span>`);
|
|
1865
|
+
return t.length === 0 ? "" : `<span style="font-size: 11px; margin-left: 8px; color: var(--text-secondary); opacity: 1;">{ ${t.join("<span style=\"opacity: 0.5\">, </span>")} }</span>`;
|
|
1866
|
+
}
|
|
1867
|
+
renderSlider() {
|
|
1868
|
+
if (this.frames.length === 0) {
|
|
1869
|
+
this.playhead.style.display = "none", this.frameInfo.textContent = "";
|
|
1870
|
+
return;
|
|
1871
|
+
}
|
|
1872
|
+
this.graph.lines.calls.points = [], this.graph.lines.fps.points = [], this.graph.lines.triangles.points = [], this.graph.resetLimit();
|
|
1873
|
+
let e = this.frames;
|
|
1874
|
+
e.length > this.graph.maxPoints && (e = e.slice(-this.graph.maxPoints), this.frames = e);
|
|
1875
|
+
let t = 0;
|
|
1876
|
+
for (let n = 0; n < e.length; n++) {
|
|
1877
|
+
let r = e[n].triangles || 0;
|
|
1878
|
+
r > t && (t = r);
|
|
1879
|
+
}
|
|
1880
|
+
for (let n = 0; n < e.length; n++) {
|
|
1881
|
+
let r = e[n].triangles || 0, i = t > 0 ? r / t * St : 0;
|
|
1882
|
+
this.graph.addPoint("calls", e[n].calls.length), this.graph.addPoint("fps", e[n].fps || 0), this.graph.addPoint("triangles", i);
|
|
1883
|
+
}
|
|
1884
|
+
this.graph.update(), this.playhead.style.display = "block";
|
|
1885
|
+
let n = 0;
|
|
1886
|
+
this.selectedFrameIndex !== -1 && this.selectedFrameIndex < this.frames.length ? n = this.selectedFrameIndex : this.frames.length > 0 && (n = this.frames.length - 1), this.selectFrame(n);
|
|
1887
|
+
}
|
|
1888
|
+
selectFrame(e) {
|
|
1889
|
+
if (e < 0 || e >= this.frames.length) return;
|
|
1890
|
+
this.selectedFrameIndex = e;
|
|
1891
|
+
let t = this.frames[e];
|
|
1892
|
+
this.renderTimelineTrack(t);
|
|
1893
|
+
let n = (e, t) => `<span style="display:inline-flex;align-items:center;margin-left:12px;"><span style="width:6px;height:6px;border-radius:50%;background-color:${e};margin-right:6px;"></span>${t}</span>`, r = Math.max(this.baseTriangles, t.triangles || 0);
|
|
1894
|
+
this.frameInfo.innerHTML = "Frame: " + t.id + n("var(--color-fps)", (t.fps || 0).toFixed(1) + " FPS") + n("var(--color-call)", t.calls.length + " calls") + n("var(--color-red)", (t.triangles || 0) + " / " + r + " triangles");
|
|
1895
|
+
let i = this.graphSlider.getBoundingClientRect(), a = this.graph.lines.calls.points.length;
|
|
1896
|
+
if (a > 0) {
|
|
1897
|
+
let t = i.width / (this.graph.maxPoints - 1), n = e;
|
|
1898
|
+
this.frames.length > a && (n = e - (this.frames.length - a));
|
|
1899
|
+
let r = i.width - (a - 1) * t + n * t;
|
|
1900
|
+
r = Math.max(1, Math.min(r, i.width - 1)), this.playhead.style.left = r + "px", this.playhead.style.display = "block";
|
|
1901
|
+
}
|
|
1902
|
+
}
|
|
1903
|
+
getCallBlock(e, t, n = 0) {
|
|
1904
|
+
let r = e.target, i;
|
|
1905
|
+
if (r && typeof r == "object") {
|
|
1906
|
+
let e = this.callBlocks.get(r);
|
|
1907
|
+
e || (e = [], this.callBlocks.set(r, e)), i = e[n];
|
|
1908
|
+
} else i = this.fallbackBlocks[t];
|
|
1909
|
+
return i || (i = document.createElement("div"), i.style.padding = "4px 8px", i.style.margin = "2px 0", i.style.backgroundColor = "rgba(255, 255, 255, 0.03)", i.style.fontFamily = "monospace", i.style.fontSize = "12px", i.style.color = "var(--text-primary)", i.style.whiteSpace = "nowrap", i.style.overflow = "hidden", i.style.textOverflow = "ellipsis", i.style.display = "flex", i.style.alignItems = "center", i.arrow = document.createElement("span"), i.arrow.style.fontSize = "10px", i.arrow.style.marginRight = "10px", i.arrow.style.cursor = "pointer", i.arrow.style.width = "26px", i.arrow.style.textAlign = "center", i.appendChild(i.arrow), i.titleSpan = document.createElement("span"), i.appendChild(i.titleSpan), i.addEventListener("click", (e) => {
|
|
1910
|
+
i._groupId && (e.stopPropagation(), this.collapsedGroups.has(i._groupId) ? this.collapsedGroups.delete(i._groupId) : this.collapsedGroups.add(i._groupId), this.renderTimelineTrack(this.frames[this.selectedFrameIndex]));
|
|
1911
|
+
}), r && typeof r == "object" ? this.callBlocks.get(r)[n] = i : this.fallbackBlocks[t] = i), i.style.cursor = "default", i._groupId = null, i.arrow.style.display = "none", i;
|
|
1912
|
+
}
|
|
1913
|
+
renderTimelineTrack(e) {
|
|
1914
|
+
if (!e || e.calls.length === 0) {
|
|
1915
|
+
this.timelineTrack.innerHTML = "";
|
|
1916
|
+
return;
|
|
1917
|
+
}
|
|
1918
|
+
this.collapsedGroups ||= /* @__PURE__ */ new Set();
|
|
1919
|
+
let t = 0, n = this.timelineTrack.children, r = 0, i = /* @__PURE__ */ new WeakMap();
|
|
1920
|
+
if (this.isHierarchicalView) {
|
|
1921
|
+
let a = [], o = null;
|
|
1922
|
+
for (let t = 0; t < e.calls.length; t++) {
|
|
1923
|
+
let n = e.calls[t], r = n.method.startsWith("begin") || n.method.startsWith("finish"), i = n.details ? this.formatDetails(n.details) : "";
|
|
1924
|
+
o && o.method === n.method && o.formatedDetails === i && !r ? o.count++ : (o = {
|
|
1925
|
+
method: n.method,
|
|
1926
|
+
count: 1,
|
|
1927
|
+
formatedDetails: i,
|
|
1928
|
+
target: n.target
|
|
1929
|
+
}, a.push(o));
|
|
1930
|
+
}
|
|
1931
|
+
let s = 0, c = [{
|
|
1932
|
+
element: this.timelineTrack,
|
|
1933
|
+
isCollapsed: !1,
|
|
1934
|
+
id: "",
|
|
1935
|
+
beginCount: 0
|
|
1936
|
+
}];
|
|
1937
|
+
for (let e = 0; e < a.length; e++) {
|
|
1938
|
+
let o = a[e], l = 0;
|
|
1939
|
+
o.target && typeof o.target == "object" && (l = i.get(o.target) || 0, i.set(o.target, l + 1));
|
|
1940
|
+
let u = this.getCallBlock(o, t++, l);
|
|
1941
|
+
u.style.marginLeft = s * 24 + "px", u.style.borderLeft = "4px solid " + this.getColorForMethod(o.method);
|
|
1942
|
+
let d = c[c.length - 1];
|
|
1943
|
+
if (d.isCollapsed || (n[r] !== u && this.timelineTrack.insertBefore(u, n[r]), r++), o.method.startsWith("begin")) {
|
|
1944
|
+
let e = d.beginCount++, t = d.id + "/" + o.method + "-" + e, n = this.collapsedGroups.has(t);
|
|
1945
|
+
u._groupId = t, u.style.cursor = "pointer", u.arrow.style.display = "inline-block", u.arrow.textContent = n ? "[ + ]" : "[ - ]", u.titleSpan.innerHTML = o.method + (o.formatedDetails ? o.formatedDetails : "") + (o.count > 1 ? ` <span style="opacity: 0.5">( ${o.count} )</span>` : ""), s++, c.push({
|
|
1946
|
+
element: u,
|
|
1947
|
+
isCollapsed: d.isCollapsed || n,
|
|
1948
|
+
id: t,
|
|
1949
|
+
beginCount: 0
|
|
1950
|
+
});
|
|
1951
|
+
} else o.method.startsWith("finish") ? (u.titleSpan.innerHTML = o.method + (o.formatedDetails ? o.formatedDetails : "") + (o.count > 1 ? ` <span style="opacity: 0.5">( ${o.count} )</span>` : ""), s = Math.max(0, s - 1), c.pop()) : u.titleSpan.innerHTML = o.method + (o.formatedDetails ? o.formatedDetails : "") + (o.count > 1 ? ` <span style="opacity: 0.5">( ${o.count} )</span>` : "");
|
|
1952
|
+
}
|
|
1953
|
+
} else {
|
|
1954
|
+
let i = {};
|
|
1955
|
+
for (let t = 0; t < e.calls.length; t++) {
|
|
1956
|
+
let n = e.calls[t].method;
|
|
1957
|
+
n.startsWith("finish") || (i[n] = (i[n] || 0) + 1);
|
|
1958
|
+
}
|
|
1959
|
+
let a = Object.keys(i).map((e) => ({
|
|
1960
|
+
method: e,
|
|
1961
|
+
count: i[e]
|
|
1962
|
+
}));
|
|
1963
|
+
a.sort((e, t) => t.count - e.count);
|
|
1964
|
+
for (let e = 0; e < a.length; e++) {
|
|
1965
|
+
let i = a[e], o = this.getCallBlock(i, t++);
|
|
1966
|
+
o.style.marginLeft = "0px", o.style.borderLeft = "4px solid " + this.getColorForMethod(i.method), o.titleSpan.innerHTML = i.method + (i.count > 1 ? ` <span style="opacity: 0.5">( ${i.count} )</span>` : ""), n[r] !== o && this.timelineTrack.insertBefore(o, n[r]), r++;
|
|
1967
|
+
}
|
|
1968
|
+
}
|
|
1969
|
+
for (; this.timelineTrack.children.length > r;) this.timelineTrack.removeChild(this.timelineTrack.lastChild);
|
|
1970
|
+
}
|
|
1971
|
+
getColorForMethod(e) {
|
|
1972
|
+
return e.startsWith("begin") ? "var(--color-green)" : e.startsWith("finish") || e.startsWith("destroy") ? "var(--color-red)" : e.startsWith("draw") || e.startsWith("compute") || e.startsWith("create") || e.startsWith("generate") ? "var(--color-yellow)" : "var(--text-secondary)";
|
|
1973
|
+
}
|
|
1974
|
+
}, Z = class extends Qe {
|
|
1975
|
+
constructor() {
|
|
1976
|
+
super();
|
|
1977
|
+
let e = new et(this);
|
|
1978
|
+
e.addEventListener("resize", (e) => this.dispatchEvent(e));
|
|
1979
|
+
let t = new mt({
|
|
1980
|
+
builtin: !0,
|
|
1981
|
+
icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" /><path d=\"M4 6l8 0\" /><path d=\"M16 6l4 0\" /><path d=\"M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" /><path d=\"M4 12l2 0\" /><path d=\"M10 12l10 0\" /><path d=\"M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" /><path d=\"M4 18l11 0\" /><path d=\"M19 18l1 0\" /></svg>"
|
|
1982
|
+
});
|
|
1983
|
+
t.hide(), e.addTab(t);
|
|
1984
|
+
let n = new bt();
|
|
1985
|
+
n.hide(), e.addTab(n);
|
|
1986
|
+
let r = new rt();
|
|
1987
|
+
e.addTab(r);
|
|
1988
|
+
let i = new it();
|
|
1989
|
+
e.addTab(i);
|
|
1990
|
+
let a = new Ct();
|
|
1991
|
+
e.addTab(a);
|
|
1992
|
+
let o = new at();
|
|
1993
|
+
e.addTab(o);
|
|
1994
|
+
let s = new vt();
|
|
1995
|
+
e.addTab(s), e.loadLayout(), e.activeTabId || e.setActiveTab(r.id), this.statsData = /* @__PURE__ */ new Map(), this.profiler = e, this.performance = r, this.memory = i, this.console = o, this.parameters = t, this.viewer = n, this.timeline = a, this.settings = s, this.once = {}, this.extensionsData = /* @__PURE__ */ new WeakMap(), this.displayCycle = {
|
|
1996
|
+
text: {
|
|
1997
|
+
needsUpdate: !1,
|
|
1998
|
+
duration: .25,
|
|
1999
|
+
time: 0
|
|
2000
|
+
},
|
|
2001
|
+
graph: {
|
|
2002
|
+
needsUpdate: !1,
|
|
2003
|
+
duration: .02,
|
|
2004
|
+
time: 0
|
|
2005
|
+
}
|
|
2006
|
+
};
|
|
2007
|
+
}
|
|
2008
|
+
get domElement() {
|
|
2009
|
+
return this.profiler.domElement;
|
|
2010
|
+
}
|
|
2011
|
+
onExtension(e, t) {
|
|
2012
|
+
let n = (r) => {
|
|
2013
|
+
r.name === e && (t(r.tab), this.settings.removeEventListener("extensionadded", n));
|
|
2014
|
+
};
|
|
2015
|
+
return this.settings.extensions[e] && this.settings.extensions[e].loaded ? t(this.settings.extensions[e]) : this.settings.addEventListener("extensionadded", n), this;
|
|
2016
|
+
}
|
|
2017
|
+
hide() {
|
|
2018
|
+
this.profiler.hide();
|
|
2019
|
+
}
|
|
2020
|
+
show() {
|
|
2021
|
+
this.profiler.show();
|
|
2022
|
+
}
|
|
2023
|
+
getSize() {
|
|
2024
|
+
return this.profiler.getSize();
|
|
2025
|
+
}
|
|
2026
|
+
setActiveTab(e) {
|
|
2027
|
+
return this.profiler.setActiveTab(e.id), this;
|
|
2028
|
+
}
|
|
2029
|
+
addTab(e) {
|
|
2030
|
+
return this.profiler.addTab(e), this;
|
|
2031
|
+
}
|
|
2032
|
+
removeTab(e) {
|
|
2033
|
+
return this.profiler.removeTab(e), this;
|
|
2034
|
+
}
|
|
2035
|
+
setActiveExtension(e, t) {
|
|
2036
|
+
return this.settings.setActiveExtension(e, t), this;
|
|
2037
|
+
}
|
|
2038
|
+
resolveConsoleOnce(e, t) {
|
|
2039
|
+
let n = e + t;
|
|
2040
|
+
this.once[n] !== !0 && (this.resolveConsole(e, t), this.once[n] = !0);
|
|
2041
|
+
}
|
|
2042
|
+
resolveConsole(e, t, n = null) {
|
|
2043
|
+
switch (e) {
|
|
2044
|
+
case "log":
|
|
2045
|
+
this.console.addMessage("info", t), console.log(t);
|
|
2046
|
+
break;
|
|
2047
|
+
case "warn":
|
|
2048
|
+
this.console.addMessage("warn", t), n && n.isStackTrace ? console.warn(n.getError(t)) : console.warn(t);
|
|
2049
|
+
break;
|
|
2050
|
+
case "error":
|
|
2051
|
+
this.console.addMessage("error", t), n && n.isStackTrace ? console.error(n.getError(t)) : console.error(t);
|
|
2052
|
+
break;
|
|
2053
|
+
}
|
|
2054
|
+
}
|
|
2055
|
+
init() {
|
|
2056
|
+
let e = this.getRenderer(), t = "THREE.WebGPURenderer: 184 [ \"";
|
|
2057
|
+
e.backend.isWebGPUBackend ? t += "WebGPU" : e.backend.isWebGLBackend && (t += "WebGL2"), t += "\" ]", this.console.addMessage("info", t), e.inspector.domElement.parentElement === null && e.domElement.parentElement !== null && e.domElement.parentElement.appendChild(e.inspector.domElement);
|
|
2058
|
+
}
|
|
2059
|
+
setRenderer(e) {
|
|
2060
|
+
return super.setRenderer(e), e !== null && (d(this.resolveConsole.bind(this)), this.isAvailable && (e.init().then(() => {
|
|
2061
|
+
e.backend.trackTimestamp = !0, e.hasFeature("timestamp-query") !== !0 && this.console.addMessage("error", "THREE.Inspector: GPU Timestamp Queries not available.");
|
|
2062
|
+
}), this.timeline.setRenderer(e))), this;
|
|
2063
|
+
}
|
|
2064
|
+
createParameters(e) {
|
|
2065
|
+
return this.parameters.isVisible === !1 && this.parameters.show(), this.parameters.createGroup(e);
|
|
2066
|
+
}
|
|
2067
|
+
getStatsData(e) {
|
|
2068
|
+
let t = this.statsData.get(e);
|
|
2069
|
+
return t === void 0 && (t = {}, this.statsData.set(e, t)), t;
|
|
2070
|
+
}
|
|
2071
|
+
resolveStats(e) {
|
|
2072
|
+
let t = this.getStatsData(e.cid);
|
|
2073
|
+
t.initialized !== !0 && (t.cpu = e.cpu, t.gpu = e.gpu, t.stats = [], t.initialized = !0), t.stats.length > this.maxFrames && t.stats.shift(), t.stats.push(e), t.cpu = this.getAverageDeltaTime(t, "cpu"), t.gpu = this.getAverageDeltaTime(t, "gpu"), t.total = t.cpu + t.gpu;
|
|
2074
|
+
for (let n of e.children) {
|
|
2075
|
+
this.resolveStats(n);
|
|
2076
|
+
let e = this.getStatsData(n.cid);
|
|
2077
|
+
t.cpu += e.cpu, t.gpu += e.gpu, t.total += e.total;
|
|
2078
|
+
}
|
|
2079
|
+
}
|
|
2080
|
+
getNodes() {
|
|
2081
|
+
return this.currentNodes;
|
|
2082
|
+
}
|
|
2083
|
+
getAverageDeltaTime(e, t, n = this.fps) {
|
|
2084
|
+
let r = e.stats, i = 0, a = 0;
|
|
2085
|
+
for (let e = r.length - 1; e >= 0 && a < n; e--) {
|
|
2086
|
+
let n = r[e][t];
|
|
2087
|
+
n > 0 && (i += n, a++);
|
|
2088
|
+
}
|
|
2089
|
+
return a > 0 ? i / a : 0;
|
|
2090
|
+
}
|
|
2091
|
+
updateTabs() {
|
|
2092
|
+
let e = Object.values(this.profiler.tabs);
|
|
2093
|
+
for (let t of e) {
|
|
2094
|
+
let e = this.extensionsData.get(t);
|
|
2095
|
+
e === void 0 && (t.init(this), e = {}, this.extensionsData.set(t, e)), t.update(this);
|
|
2096
|
+
}
|
|
2097
|
+
}
|
|
2098
|
+
resolveFrame(e) {
|
|
2099
|
+
let t = this.getFrameById(e.frameId + 1);
|
|
2100
|
+
if (t) {
|
|
2101
|
+
e.cpu = 0, e.gpu = 0, e.total = 0;
|
|
2102
|
+
for (let t of e.children) {
|
|
2103
|
+
this.resolveStats(t);
|
|
2104
|
+
let n = this.getStatsData(t.cid);
|
|
2105
|
+
e.cpu += n.cpu, e.gpu += n.gpu, e.total += n.total;
|
|
2106
|
+
}
|
|
2107
|
+
e.deltaTime = t.startTime - e.startTime, e.miscellaneous = e.deltaTime - e.total, e.miscellaneous < 0 && (e.miscellaneous = 0), this.updateCycle(this.displayCycle.text), this.updateCycle(this.displayCycle.graph), this.displayCycle.text.needsUpdate && (G("fps-counter", this.fps.toFixed()), this.performance.updateText(this, e), this.memory.updateText(this)), this.displayCycle.graph.needsUpdate && (this.performance.updateGraph(this, e), this.memory.updateGraph(this)), this.displayCycle.text.needsUpdate = !1, this.displayCycle.graph.needsUpdate = !1;
|
|
2108
|
+
}
|
|
2109
|
+
}
|
|
2110
|
+
updateCycle(e) {
|
|
2111
|
+
e.time += this.nodeFrame.deltaTime, e.time >= e.duration && (e.needsUpdate = !0, e.time = 0);
|
|
2112
|
+
}
|
|
2113
|
+
static getItem(e) {
|
|
2114
|
+
return console.warn("Inspector.getItem is deprecated. Use getItem directly instead."), Q(e);
|
|
2115
|
+
}
|
|
2116
|
+
static setItem(e, t) {
|
|
2117
|
+
console.warn("Inspector.setItem is deprecated. Use setItem directly instead."), $(e, t);
|
|
2118
|
+
}
|
|
2119
|
+
};
|
|
2120
|
+
function Q(e) {
|
|
2121
|
+
return JSON.parse(localStorage.getItem("threejs-inspector") || "{}")[e] || {};
|
|
2122
|
+
}
|
|
2123
|
+
function $(e, t) {
|
|
2124
|
+
let n = JSON.parse(localStorage.getItem("threejs-inspector") || "{}");
|
|
2125
|
+
t === null ? delete n[e] : n[e] = t, localStorage.setItem("threejs-inspector", JSON.stringify(n));
|
|
2126
|
+
}
|
|
2127
|
+
//#endregion
|
|
2128
|
+
//#region packages/common-core/src/webgpu/roomle-webgpu-renderer.ts
|
|
2129
|
+
var wt = class extends ve {
|
|
2130
|
+
constructor(e, t, n) {
|
|
2131
|
+
super(e, t), this.passNeedsReassembly = !0, this.debugMode = "off", this.renderPasses = /* @__PURE__ */ new Map(), this.guiParameterGroups = /* @__PURE__ */ new Map(), this.renderPipeline = new Ee(t), n && this.enableOutline(n.outlineVisibleEdgeColor, n.outlineHiddenEdgeColor);
|
|
2132
|
+
}
|
|
2133
|
+
addRenderPass(e) {
|
|
2134
|
+
this.renderPasses.set(e.passId, e), this.passNeedsReassembly = !0;
|
|
2135
|
+
}
|
|
2136
|
+
clearCache() {
|
|
2137
|
+
console.error("RoomleWebGPURenderer.clearCache is not implemented yet");
|
|
2138
|
+
}
|
|
2139
|
+
disableUiInteractionMode() {
|
|
2140
|
+
console.error("RoomleWebGPURenderer.disableUiInteractionMode is not implemented yet");
|
|
2141
|
+
}
|
|
2142
|
+
enableUiInteractionMode() {
|
|
2143
|
+
console.error("RoomleWebGPURenderer.enableUiInteractionMode is not implemented yet");
|
|
2144
|
+
}
|
|
2145
|
+
getQualityLevel() {
|
|
2146
|
+
return console.error("RoomleWebGPURenderer.getQualityLevel is not implemented yet"), me.HIGHEST;
|
|
2147
|
+
}
|
|
2148
|
+
setCameraType(e) {
|
|
2149
|
+
super.setCameraType(e), this.passNeedsReassembly = !0;
|
|
2150
|
+
}
|
|
2151
|
+
switchToPlanner(e) {
|
|
2152
|
+
super.switchToPlanner(e), this.passNeedsReassembly = !0;
|
|
2153
|
+
}
|
|
2154
|
+
highlightObjects(e) {
|
|
2155
|
+
let t = this.getOutlinePassOrUndefined();
|
|
2156
|
+
t && (this.passNeedsReassembly = this.passNeedsReassembly || t.areObjectsSelected() && e.length === 0 || !t.areObjectsSelected() && e.length > 0), t?.highlightObjects(e);
|
|
2157
|
+
}
|
|
2158
|
+
loadLutImages(e) {
|
|
2159
|
+
console.error("RoomleWebGPURenderer.loadLutImages is not implemented yet");
|
|
2160
|
+
}
|
|
2161
|
+
render(e, t) {
|
|
2162
|
+
this.updateCameraProjectionMatrix(t), this.passNeedsReassembly &&= (this.renderPipeline.outputNode = this.assembleRenderPasses(e, t), this.renderPipeline.needsUpdate = !0, !1), this.renderPipeline.render();
|
|
2163
|
+
}
|
|
2164
|
+
updateCameraProjectionMatrix(e) {
|
|
2165
|
+
(e instanceof l || e instanceof r) && e.updateProjectionMatrix();
|
|
2166
|
+
}
|
|
2167
|
+
assembleRenderPasses(e, t) {
|
|
2168
|
+
let n = Ie(e, t);
|
|
2169
|
+
for (let r of this.renderPasses.values()) n = r.assemble(n, e, t, this.debugMode);
|
|
2170
|
+
return n;
|
|
2171
|
+
}
|
|
2172
|
+
setAutoQuality(e) {
|
|
2173
|
+
console.error("RoomleWebGPURenderer.setAutoQuality is not implemented yet");
|
|
2174
|
+
}
|
|
2175
|
+
setCustomShadingParameters(e, t) {
|
|
2176
|
+
console.error("RoomleWebGPURenderer.setCustomShadingParameters is not implemented yet");
|
|
2177
|
+
}
|
|
2178
|
+
setCustomOutlineParameters(e) {
|
|
2179
|
+
let t = this.getOutlinePassOrUndefined();
|
|
2180
|
+
t && (t.setOutlineColors(e.outlineVisibleEdgeColor, e.outlineHiddenEdgeColor), this.passNeedsReassembly = !0);
|
|
2181
|
+
}
|
|
2182
|
+
setGroundShadow(e) {
|
|
2183
|
+
console.error("RoomleWebGPURenderer.setGroundShadow is not implemented yet");
|
|
2184
|
+
}
|
|
2185
|
+
setOnQualityLevelChangeCallback(e) {
|
|
2186
|
+
console.error("RoomleWebGPURenderer.setOnQualityLevelChangeCallback is not implemented yet");
|
|
2187
|
+
}
|
|
2188
|
+
enableOutline(e, t) {
|
|
2189
|
+
this.renderPasses.get(z.passId) || this.addRenderPass(new z({
|
|
2190
|
+
selectedObjects: [],
|
|
2191
|
+
visibleEdgeColor: e,
|
|
2192
|
+
hiddenEdgeColor: t,
|
|
2193
|
+
edgeStrength: 3,
|
|
2194
|
+
edgeGlow: 0,
|
|
2195
|
+
edgeThickness: 1
|
|
2196
|
+
}));
|
|
2197
|
+
}
|
|
2198
|
+
getOutlinePassOrUndefined() {
|
|
2199
|
+
let e = this.renderPasses.get(z.passId);
|
|
2200
|
+
if (e && e instanceof z) return e;
|
|
2201
|
+
}
|
|
2202
|
+
setQualityLevel(e) {
|
|
2203
|
+
console.error("RoomleWebGPURenderer.setQualityLevel is not implemented yet");
|
|
2204
|
+
}
|
|
2205
|
+
setQualityMap(e) {
|
|
2206
|
+
console.error("RoomleWebGPURenderer.setQualityMap is not implemented yet");
|
|
2207
|
+
}
|
|
2208
|
+
setShadingType(e) {
|
|
2209
|
+
console.error("RoomleWebGPURenderer.setShadingType is not implemented yet");
|
|
2210
|
+
}
|
|
2211
|
+
showGUI(e) {
|
|
2212
|
+
if (this.renderer.inspector instanceof Z) return;
|
|
2213
|
+
let t = document.createElement("style");
|
|
2214
|
+
t.innerText = "#profiler-toggle,\n #profiler-mini-panel {\n left: 15px;\n right: auto !important;\n }", document.head.appendChild(t);
|
|
2215
|
+
let n = new Z();
|
|
2216
|
+
this.renderer.inspector = n, this._domHelper.element?.appendChild(n.domElement), this.addDebugGUI(n, e);
|
|
2217
|
+
let r = n.createParameters("Render Pass Settings");
|
|
2218
|
+
for (let t of this.renderPasses.values()) t.addParametersToGUI(r, e);
|
|
2219
|
+
}
|
|
2220
|
+
addDebugGUI(e, t) {
|
|
2221
|
+
let n = e.createParameters("Debug Settings"), r = { debugMode: this.debugMode };
|
|
2222
|
+
n.add(r, "debugMode", {
|
|
2223
|
+
Off: "off",
|
|
2224
|
+
Outline: "outline"
|
|
2225
|
+
}).onChange((e) => {
|
|
2226
|
+
this.debugMode = e, this.passNeedsReassembly = !0, t();
|
|
2227
|
+
});
|
|
2228
|
+
}
|
|
2229
|
+
getOrCreateGUIParameters(e) {
|
|
2230
|
+
let t = this.renderer.inspector;
|
|
2231
|
+
if (t instanceof Z) return this.guiParameterGroups.get(e) ?? this.createAndCacheGUIParameters(t, e);
|
|
2232
|
+
throw Error("Inspector GUI is not initialized. Call showGUI() before creating parameter groups.");
|
|
2233
|
+
}
|
|
2234
|
+
createAndCacheGUIParameters(e, t) {
|
|
2235
|
+
let n = e.createParameters(t);
|
|
2236
|
+
return this.guiParameterGroups.set(t, n), n;
|
|
2237
|
+
}
|
|
2238
|
+
};
|
|
2239
|
+
_e([ge, he("design:type", Object)], wt.prototype, "_domHelper", void 0);
|
|
2240
|
+
//#endregion
|
|
2241
|
+
export { wt as RoomleWebGPURenderer };
|
|
2242
|
+
|
|
2243
|
+
//# sourceMappingURL=roomle-webgpu-renderer-BdCItfH1.mjs.map
|