aptechka 0.85.1 → 0.86.0

package/lib/en3/En3View.d.ts

@@ -2,6 +2,7 @@ import { LayoutBox, LayoutBoxOptions } from '../layout-box';
 import { ElementOrSelector } from '../utils';
 import { Object3D, OrthographicCamera, PerspectiveCamera, Scene } from 'three';
 import { En3 } from './En3';
+import { En3Clip } from './objects/En3Clip';
 export interface En3ViewOptions {
     cameraType?: 'perspective' | 'orthographic';
     cameraDistance?: number;
@@ -14,9 +15,12 @@ export interface En3ViewOptions {
 export type En3AttachedObject3D<T extends Object3D> = T & {
     userData: {
         box: LayoutBox;
+        clip?: En3Clip;
     };
 };
-export type En3AttachOptions = Omit<LayoutBoxOptions, 'containerElement' | 'cartesian' | 'scrollStep'>;
+export type En3AttachOptions = Omit<LayoutBoxOptions, 'containerElement' | 'cartesian' | 'scrollStep'> & {
+    clip?: boolean;
+};
 export type En3ViewBeforeRenderCallback = () => void;
 export declare class En3View {
     #private;

package/lib/en3/index.cjs

@@ -1,8 +1,8 @@
-"use strict";var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __typeError=msg=>{throw TypeError(msg)};var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b)),__name=(target,value)=>__defProp(target,"name",{value,configurable:!0});var __accessCheck=(obj,member,msg)=>member.has(obj)||__typeError("Cannot "+msg);var __privateGet=(obj,member,getter)=>(__accessCheck(obj,member,"read from private field"),getter?getter.call(obj):member.get(obj)),__privateAdd=(obj,member,value)=>member.has(obj)?__typeError("Cannot add the same private member more than once"):member instanceof WeakSet?member.add(obj):member.set(obj,value),__privateSet=(obj,member,value,setter)=>(__accessCheck(obj,member,"write to private field"),setter?setter.call(obj,value):member.set(obj,value),value);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const order_index=require("../order/index.cjs"),intersector_index=require("../index-DZ44osDT.cjs"),dom=require("../dom-B40i6NXw.cjs");require("construct-style-sheets-polyfill");const windowResizer_index=require("../window-resizer/index.cjs"),three=require("three"),layoutBox_index=require("../layout-box/index.cjs"),_function=require("../function-H4b_gTg6.cjs");function dispose(object3d){const cleanMaterial=__name(material=>{material.dispose();for(const key of Object.keys(material)){const value=material[key];value&&typeof value=="object"&&"minFilter"in value&&value.dispose()}},"cleanMaterial");object3d.traverse(object=>{if(object instanceof three.Mesh){if(object.geometry.dispose(),!Array.isArray(object.material)&&object.material.isMaterial)cleanMaterial(object.material);else if(Array.isArray(object.material))for(const material of object.material)cleanMaterial(material)}})}__name(dispose,"dispose");var _en3,_name,_camera,_scene,_attachedObjects,_cameraDistance,_cameraFov,_sizeElement,_box,_debouncedResize;const _En3View=class _En3View{constructor(en3,name,options){__privateAdd(this,_en3);__privateAdd(this,_name);__privateAdd(this,_camera);__privateAdd(this,_scene);__privateAdd(this,_attachedObjects);__privateAdd(this,_cameraDistance);__privateAdd(this,_cameraFov);__privateAdd(this,_sizeElement);__privateAdd(this,_box);__privateAdd(this,_debouncedResize,_function.debounce(()=>{this.resize()},0));__privateSet(this,_en3,en3),__privateSet(this,_name,name),__privateSet(this,_camera,(options==null?void 0:options.cameraType)==="orthographic"?new three.OrthographicCamera:new three.PerspectiveCamera),__privateSet(this,_scene,new three.Scene),__privateSet(this,_attachedObjects,[]),__privateSet(this,_cameraDistance,(options==null?void 0:options.cameraDistance)||1e3),__privateGet(this,_camera).near=(options==null?void 0:options.cameraNear)||1,__privateGet(this,_camera).far=(options==null?void 0:options.cameraFar)||11e3,__privateSet(this,_cameraFov,(options==null?void 0:options.cameraFov)||"auto"),__privateGet(this,_camera).position.z=__privateGet(this,_cameraDistance),__privateGet(this,_camera).name=`Cameras.${__privateGet(this,_name)}`,__privateSet(this,_sizeElement,dom.getElement(options==null?void 0:options.sizeElement)||document.documentElement),this.beforeRenderCallback=options==null?void 0:options.beforeRender,__privateSet(this,_box,new layoutBox_index.LayoutBox(__privateGet(this,_sizeElement))),__privateGet(this,_box).onResize(()=>{this.resize()})}get name(){return __privateGet(this,_name)}get camera(){return __privateGet(this,_camera)}get scene(){return __privateGet(this,_scene)}get box(){return __privateGet(this,_box)}get cameraDistance(){return __privateGet(this,_cameraDistance)}set cameraDistance(value){__privateSet(this,_cameraDistance,value),__privateGet(this,_debouncedResize).call(this)}set fov(value){__privateSet(this,_cameraFov,value),__privateGet(this,_debouncedResize).call(this)}get fov(){return __privateGet(this,_cameraFov)}set near(value){__privateGet(this,_camera).near=value,__privateGet(this,_debouncedResize).call(this)}get near(){return __privateGet(this,_camera).near}set far(value){__privateGet(this,_camera).far=value,__privateGet(this,_debouncedResize).call(this)}get far(){return __privateGet(this,_camera).far}get sizeElement(){return __privateGet(this,_sizeElement)}get isClipped(){return __privateGet(this,_sizeElement)!==__privateGet(this,_en3).containerElement}resize(){const{width,height}=__privateGet(this,_box);__privateGet(this,_camera).userData.controlled||(__privateGet(this,_camera).position.z=__privateGet(this,_cameraDistance)),__privateGet(this,_camera)instanceof three.PerspectiveCamera?(__privateGet(this,_camera).aspect=width/height,__privateGet(this,_camera).fov=__privateGet(this,_cameraFov)==="auto"?2*Math.atan(height/2/__privateGet(this,_cameraDistance))*(180/Math.PI):__privateGet(this,_camera).userData.controlled?__privateGet(this,_camera).fov:__privateGet(this,_cameraFov)):__privateGet(this,_camera)instanceof three.OrthographicCamera&&(__privateGet(this,_camera).left=width/-2,__privateGet(this,_camera).right=width/2,__privateGet(this,_camera).top=height/2,__privateGet(this,_camera).bottom=height/-2),__privateGet(this,_camera).updateProjectionMatrix()}destroy(){__privateGet(this,_attachedObjects).forEach(object=>{object.userData.box.destroy()}),__privateGet(this,_scene).clear(),dispose(__privateGet(this,_scene)),__privateGet(this,_en3).destroyView(this.name),__privateGet(this,_box).destroy()}attachToHTMLElement(element,object,options){const box=new layoutBox_index.LayoutBox(element,__spreadProps(__spreadValues({},options),{containerElement:__privateGet(this,_sizeElement),cartesian:!0,scrollStep:!this.isClipped}));return box.bindObject(object),object.userData.box=box,__privateGet(this,_attachedObjects).push(object),object}detachFromHTMLElement(object){__privateSet(this,_attachedObjects,__privateGet(this,_attachedObjects).filter(o=>o===object?(object.userData.box.destroy(),!1):!0))}add(...args){const object=args[0],element=args[1],options=args[2];return element&&this.attachToHTMLElement(element,object,options),this.scene.add(object),object}remove(object,detach){this.scene.remove(object),detach&&this.detachFromHTMLElement(object)}};_en3=new WeakMap,_name=new WeakMap,_camera=new WeakMap,_scene=new WeakMap,_attachedObjects=new WeakMap,_cameraDistance=new WeakMap,_cameraFov=new WeakMap,_sizeElement=new WeakMap,_box=new WeakMap,_debouncedResize=new WeakMap,__name(_En3View,"En3View");let En3View=_En3View;var _CDNVersion,_containerElement,_webglRenderer,_views,_width,_height,_pixelRatio,_maxPixelRatio,_isCreated,_composer,_resizeListener,_tickListener;const _En3=class _En3{constructor(){__privateAdd(this,_CDNVersion,`https://unpkg.com/three@0.${three.REVISION}.x`);__privateAdd(this,_containerElement,null);__privateAdd(this,_webglRenderer,null);__privateAdd(this,_views,new Map);__privateAdd(this,_width,0);__privateAdd(this,_height,0);__privateAdd(this,_pixelRatio,0);__privateAdd(this,_maxPixelRatio,2);__privateAdd(this,_isCreated,!1);__privateAdd(this,_composer,null);__privateAdd(this,_resizeListener,__name(e=>{e instanceof CustomEvent||(__privateSet(this,_width,__privateGet(this,_containerElement).clientWidth),__privateSet(this,_height,__privateGet(this,_containerElement).clientHeight),__privateSet(this,_pixelRatio,Math.min(__privateGet(this,_maxPixelRatio),devicePixelRatio||1)),__privateGet(this,_webglRenderer).setPixelRatio(__privateGet(this,_pixelRatio)),__privateGet(this,_webglRenderer).setSize(__privateGet(this,_width),__privateGet(this,_height)),__privateGet(this,_composer)&&(__privateGet(this,_composer).setPixelRatio(__privateGet(this,_pixelRatio)),__privateGet(this,_composer).setSize(__privateGet(this,_width),__privateGet(this,_height))))},"#resizeListener"));__privateAdd(this,_tickListener,__name(()=>{__privateGet(this,_webglRenderer).setRenderTarget(null),__privateGet(this,_views).forEach(view=>{this.render(view)})},"#tickListener"))}get CDNVersion(){return __privateGet(this,_CDNVersion)}get containerElement(){return __privateGet(this,_containerElement)}get webglRenderer(){return __privateGet(this,_webglRenderer)}get views(){return __privateGet(this,_views)}get view(){return this.getView("default")}get camera(){return this.getView("default").camera}get scene(){return this.getView("default").scene}get width(){return __privateGet(this,_width)}get height(){return __privateGet(this,_height)}get pixelRatio(){return __privateGet(this,_pixelRatio)}get composer(){return __privateGet(this,_composer)}setup(options){if(__privateGet(this,_isCreated))return;__privateSet(this,_containerElement,dom.getElement(options==null?void 0:options.containerElement)||document.body),__privateSet(this,_maxPixelRatio,(options==null?void 0:options.maxPixelRatio)||2),__privateSet(this,_webglRenderer,new three.WebGLRenderer(options==null?void 0:options.webGLRendererParameters)),__privateGet(this,_webglRenderer).domElement.style.cssText=`
+"use strict";var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __typeError=msg=>{throw TypeError(msg)};var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b)),__name=(target,value)=>__defProp(target,"name",{value,configurable:!0});var __accessCheck=(obj,member,msg)=>member.has(obj)||__typeError("Cannot "+msg);var __privateGet=(obj,member,getter)=>(__accessCheck(obj,member,"read from private field"),getter?getter.call(obj):member.get(obj)),__privateAdd=(obj,member,value)=>member.has(obj)?__typeError("Cannot add the same private member more than once"):member instanceof WeakSet?member.add(obj):member.set(obj,value),__privateSet=(obj,member,value,setter)=>(__accessCheck(obj,member,"write to private field"),setter?setter.call(obj,value):member.set(obj,value),value);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const order_index=require("../order/index.cjs"),intersector_index=require("../index-DZ44osDT.cjs"),dom=require("../dom-B40i6NXw.cjs");require("construct-style-sheets-polyfill");const windowResizer_index=require("../window-resizer/index.cjs"),three=require("three"),layoutBox_index=require("../layout-box/index.cjs"),_function=require("../function-H4b_gTg6.cjs");var _layoutBox,_planes,_tickListener;const _En3Clip=class _En3Clip{constructor(material,elementOrSelector){__privateAdd(this,_layoutBox,null);__privateAdd(this,_planes,[]);__privateAdd(this,_tickListener,__name(()=>{const scrollValueX=__privateGet(this,_layoutBox).position.x-__privateGet(this,_layoutBox).left,scrollValueY=__privateGet(this,_layoutBox).position.y-__privateGet(this,_layoutBox).top;__privateGet(this,_planes)[0].constant=__privateGet(this,_layoutBox).scale.y/2+scrollValueY*-1,__privateGet(this,_planes)[1].constant=__privateGet(this,_layoutBox).scale.y/2+scrollValueY,__privateGet(this,_planes)[2].constant=__privateGet(this,_layoutBox).scale.x/2+scrollValueX,__privateGet(this,_planes)[3].constant=__privateGet(this,_layoutBox).scale.x/2+scrollValueX*-1},"#tickListener"));__privateSet(this,_layoutBox,new layoutBox_index.LayoutBox(elementOrSelector,{cartesian:!1})),__privateSet(this,_planes,[new three.Plane(new three.Vector3(0,-1,0)),new three.Plane(new three.Vector3(0,1,0)),new three.Plane(new three.Vector3(-1,0,0)),new three.Plane(new three.Vector3(1,0,0))]),material.clippingPlanes=__privateGet(this,_planes),intersector_index.ticker.subscribe(__privateGet(this,_tickListener),{order:order_index.TICK_ORDER.LAYOUT_BOX})}get planes(){return __privateGet(this,_planes)}get layoutBox(){return __privateGet(this,_layoutBox)}destroy(){intersector_index.ticker.unsubscribe(__privateGet(this,_tickListener)),__privateGet(this,_layoutBox).destroy()}};_layoutBox=new WeakMap,_planes=new WeakMap,_tickListener=new WeakMap,__name(_En3Clip,"En3Clip");let En3Clip=_En3Clip;function dispose(object3d){const cleanMaterial=__name(material=>{material.dispose();for(const key of Object.keys(material)){const value=material[key];value&&typeof value=="object"&&"minFilter"in value&&value.dispose()}},"cleanMaterial");object3d.traverse(object=>{if(object instanceof three.Mesh){if(object.geometry.dispose(),!Array.isArray(object.material)&&object.material.isMaterial)cleanMaterial(object.material);else if(Array.isArray(object.material))for(const material of object.material)cleanMaterial(material)}})}__name(dispose,"dispose");var _en3,_name,_camera,_scene,_attachedObjects,_cameraDistance,_cameraFov,_sizeElement,_box,_debouncedResize;const _En3View=class _En3View{constructor(en3,name,options){__privateAdd(this,_en3);__privateAdd(this,_name);__privateAdd(this,_camera);__privateAdd(this,_scene);__privateAdd(this,_attachedObjects);__privateAdd(this,_cameraDistance);__privateAdd(this,_cameraFov);__privateAdd(this,_sizeElement);__privateAdd(this,_box);__privateAdd(this,_debouncedResize,_function.debounce(()=>{this.resize()},0));__privateSet(this,_en3,en3),__privateSet(this,_name,name),__privateSet(this,_camera,(options==null?void 0:options.cameraType)==="orthographic"?new three.OrthographicCamera:new three.PerspectiveCamera),__privateSet(this,_scene,new three.Scene),__privateSet(this,_attachedObjects,[]),__privateSet(this,_cameraDistance,(options==null?void 0:options.cameraDistance)||1e3),__privateGet(this,_camera).near=(options==null?void 0:options.cameraNear)||1,__privateGet(this,_camera).far=(options==null?void 0:options.cameraFar)||11e3,__privateSet(this,_cameraFov,(options==null?void 0:options.cameraFov)||"auto"),__privateGet(this,_camera).position.z=__privateGet(this,_cameraDistance),__privateGet(this,_camera).name=`Cameras.${__privateGet(this,_name)}`,__privateSet(this,_sizeElement,dom.getElement(options==null?void 0:options.sizeElement)||document.documentElement),this.beforeRenderCallback=options==null?void 0:options.beforeRender,__privateSet(this,_box,new layoutBox_index.LayoutBox(__privateGet(this,_sizeElement))),__privateGet(this,_box).onResize(()=>{this.resize()})}get name(){return __privateGet(this,_name)}get camera(){return __privateGet(this,_camera)}get scene(){return __privateGet(this,_scene)}get box(){return __privateGet(this,_box)}get cameraDistance(){return __privateGet(this,_cameraDistance)}set cameraDistance(value){__privateSet(this,_cameraDistance,value),__privateGet(this,_debouncedResize).call(this)}set fov(value){__privateSet(this,_cameraFov,value),__privateGet(this,_debouncedResize).call(this)}get fov(){return __privateGet(this,_cameraFov)}set near(value){__privateGet(this,_camera).near=value,__privateGet(this,_debouncedResize).call(this)}get near(){return __privateGet(this,_camera).near}set far(value){__privateGet(this,_camera).far=value,__privateGet(this,_debouncedResize).call(this)}get far(){return __privateGet(this,_camera).far}get sizeElement(){return __privateGet(this,_sizeElement)}get isClipped(){return __privateGet(this,_sizeElement)!==__privateGet(this,_en3).containerElement}resize(){const{width,height}=__privateGet(this,_box);__privateGet(this,_camera).userData.controlled||(__privateGet(this,_camera).position.z=__privateGet(this,_cameraDistance)),__privateGet(this,_camera)instanceof three.PerspectiveCamera?(__privateGet(this,_camera).aspect=width/height,__privateGet(this,_camera).fov=__privateGet(this,_cameraFov)==="auto"?2*Math.atan(height/2/__privateGet(this,_cameraDistance))*(180/Math.PI):__privateGet(this,_camera).userData.controlled?__privateGet(this,_camera).fov:__privateGet(this,_cameraFov)):__privateGet(this,_camera)instanceof three.OrthographicCamera&&(__privateGet(this,_camera).left=width/-2,__privateGet(this,_camera).right=width/2,__privateGet(this,_camera).top=height/2,__privateGet(this,_camera).bottom=height/-2),__privateGet(this,_camera).updateProjectionMatrix()}destroy(){__privateGet(this,_attachedObjects).forEach(object=>{object.userData.box.destroy()}),__privateGet(this,_scene).clear(),dispose(__privateGet(this,_scene)),__privateGet(this,_en3).destroyView(this.name),__privateGet(this,_box).destroy()}attachToHTMLElement(element,object,options){const box=new layoutBox_index.LayoutBox(element,__spreadProps(__spreadValues({},options),{containerElement:__privateGet(this,_sizeElement),cartesian:!0,scrollStep:!this.isClipped}));if(box.bindObject(object),object.userData.box=box,options!=null&&options.clip&&"material"in object){const clip=new En3Clip(object.material,element);object.userData.clip=clip}return __privateGet(this,_attachedObjects).push(object),object}detachFromHTMLElement(object){__privateSet(this,_attachedObjects,__privateGet(this,_attachedObjects).filter(o=>{if(o===object){const{box,clip}=object.userData;return box.destroy(),clip==null||clip.destroy(),!1}return!0}))}add(...args){const object=args[0],element=args[1],options=args[2];return element&&this.attachToHTMLElement(element,object,options),this.scene.add(object),object}remove(object,detach){this.scene.remove(object),detach&&this.detachFromHTMLElement(object)}};_en3=new WeakMap,_name=new WeakMap,_camera=new WeakMap,_scene=new WeakMap,_attachedObjects=new WeakMap,_cameraDistance=new WeakMap,_cameraFov=new WeakMap,_sizeElement=new WeakMap,_box=new WeakMap,_debouncedResize=new WeakMap,__name(_En3View,"En3View");let En3View=_En3View;var _CDNVersion,_containerElement,_webglRenderer,_views,_width,_height,_pixelRatio,_maxPixelRatio,_isCreated,_composer,_resizeListener,_tickListener2;const _En3=class _En3{constructor(){__privateAdd(this,_CDNVersion,`https://unpkg.com/three@0.${three.REVISION}.x`);__privateAdd(this,_containerElement,null);__privateAdd(this,_webglRenderer,null);__privateAdd(this,_views,new Map);__privateAdd(this,_width,0);__privateAdd(this,_height,0);__privateAdd(this,_pixelRatio,0);__privateAdd(this,_maxPixelRatio,2);__privateAdd(this,_isCreated,!1);__privateAdd(this,_composer,null);__privateAdd(this,_resizeListener,__name(e=>{e instanceof CustomEvent||(__privateSet(this,_width,__privateGet(this,_containerElement).clientWidth),__privateSet(this,_height,__privateGet(this,_containerElement).clientHeight),__privateSet(this,_pixelRatio,Math.min(__privateGet(this,_maxPixelRatio),devicePixelRatio||1)),__privateGet(this,_webglRenderer).setPixelRatio(__privateGet(this,_pixelRatio)),__privateGet(this,_webglRenderer).setSize(__privateGet(this,_width),__privateGet(this,_height)),__privateGet(this,_composer)&&(__privateGet(this,_composer).setPixelRatio(__privateGet(this,_pixelRatio)),__privateGet(this,_composer).setSize(__privateGet(this,_width),__privateGet(this,_height))))},"#resizeListener"));__privateAdd(this,_tickListener2,__name(()=>{__privateGet(this,_webglRenderer).setRenderTarget(null),__privateGet(this,_views).forEach(view=>{this.render(view)})},"#tickListener"))}get CDNVersion(){return __privateGet(this,_CDNVersion)}get containerElement(){return __privateGet(this,_containerElement)}get webglRenderer(){return __privateGet(this,_webglRenderer)}get views(){return __privateGet(this,_views)}get view(){return this.getView("default")}get camera(){return this.getView("default").camera}get scene(){return this.getView("default").scene}get width(){return __privateGet(this,_width)}get height(){return __privateGet(this,_height)}get pixelRatio(){return __privateGet(this,_pixelRatio)}get composer(){return __privateGet(this,_composer)}setup(options){if(__privateGet(this,_isCreated))return;__privateSet(this,_containerElement,dom.getElement(options==null?void 0:options.containerElement)||document.body),__privateSet(this,_maxPixelRatio,(options==null?void 0:options.maxPixelRatio)||2),__privateSet(this,_webglRenderer,new three.WebGLRenderer(options==null?void 0:options.webGLRendererParameters)),__privateGet(this,_webglRenderer).domElement.style.cssText=`
       position: ${(options==null?void 0:options.position)||"fixed"};
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       z-index: ${(options==null?void 0:options.zIndex)||0};
-    `,(__privateGet(this,_containerElement).shadowRoot||__privateGet(this,_containerElement)).append(__privateGet(this,_webglRenderer).domElement),__privateGet(this,_views).set("default",new En3View(this,"default",__spreadValues({sizeElement:__privateGet(this,_containerElement)},options==null?void 0:options.view))),options!=null&&options.composer&&(__privateSet(this,_composer,new options.composer(__privateGet(this,_webglRenderer))),this.render=()=>{__privateGet(this,_composer).render()}),__privateSet(this,_isCreated,!0),windowResizer_index.windowResizer.subscribe(__privateGet(this,_resizeListener),order_index.RESIZE_ORDER.CANVAS),intersector_index.ticker.subscribe(__privateGet(this,_tickListener),{order:order_index.TICK_ORDER.CANVAS,culling:__privateGet(this,_containerElement)})}destroy(){var _a;__privateGet(this,_isCreated)&&(windowResizer_index.windowResizer.unsubscribe(__privateGet(this,_resizeListener)),intersector_index.ticker.unsubscribe(__privateGet(this,_tickListener)),__privateGet(this,_views).forEach(view=>{view.destroy()}),__privateGet(this,_views).clear(),__privateGet(this,_webglRenderer).dispose(),__privateGet(this,_webglRenderer).domElement.remove(),__privateSet(this,_webglRenderer,null),(_a=__privateGet(this,_composer))==null||_a.dispose(),__privateSet(this,_composer,null),__privateSet(this,_isCreated,!1))}createView(viewName,viewOptions){const size=__privateGet(this,_views).size,view=new En3View(this,viewName,viewOptions);return __privateGet(this,_views).set(viewName,view),size===1&&__privateGet(this,_webglRenderer).setScissorTest(!0),view}getView(viewName){return __privateGet(this,_views).get(viewName)}destroyView(viewName){const view=__privateGet(this,_views).get(viewName);view&&(__privateGet(this,_views).delete(viewName),view.destroy(),__privateGet(this,_views).size<=1&&__privateGet(this,_webglRenderer).setScissorTest(!1))}render(view){var _a;if(__privateGet(this,_views).size>1||this.view.isClipped){const left=view.box.left+view.box.CSSTranslation.x+view.box.scrollValue.x,top=this.height-view.box.height-view.box.top+view.box.CSSTranslation.y+view.box.scrollValue.y*-1;__privateGet(this,_webglRenderer).setScissor(left,top,view.box.width,view.box.height),__privateGet(this,_webglRenderer).setViewport(left,top,view.box.width,view.box.height)}(_a=view.beforeRenderCallback)==null||_a.call(view),__privateGet(this,_webglRenderer).render(view.scene,view.camera)}};_CDNVersion=new WeakMap,_containerElement=new WeakMap,_webglRenderer=new WeakMap,_views=new WeakMap,_width=new WeakMap,_height=new WeakMap,_pixelRatio=new WeakMap,_maxPixelRatio=new WeakMap,_isCreated=new WeakMap,_composer=new WeakMap,_resizeListener=new WeakMap,_tickListener=new WeakMap,__name(_En3,"En3");let En3=_En3;function coverTexture(texture,planeSize,aspect){const width=planeSize.x,height=planeSize.y,_aspect=aspect||texture.image.width/texture.image.height;let sx=0,sy=0,tx=texture.offset.x,ty=texture.offset.y,r=texture.rotation,cx=texture.center.x,cy=texture.center.y;width/height>_aspect?(sx=1,sy=height/width*_aspect):(sy=1,sx=width/height/_aspect),texture.matrix.setUvTransform(tx,ty,sx,sy,r,cx,cy)}__name(coverTexture,"coverTexture");const tempTarget=new three.Vector3,position=new three.Vector3;function getCurrentViewport(en3,target,viewName="default"){const view=en3.getView(viewName),{width,height}=en3,aspect=width/height;target instanceof three.Vector3?tempTarget.copy(target):tempTarget.set(...target);const distance=view.camera.getWorldPosition(position).distanceTo(tempTarget);if(view.camera instanceof three.OrthographicCamera)return{width:width/view.camera.zoom,height:height/view.camera.zoom,factor:1,distance,aspect};{const fov=view.camera.fov*Math.PI/180,h=2*Math.tan(fov/2)*distance,w=h*(width/height);return{width:w,height:h,factor:width/w,distance,aspect}}}__name(getCurrentViewport,"getCurrentViewport");function traverseMaterials(object,callback){object.traverse(node=>{node instanceof three.Mesh&&node.material&&(Array.isArray(node.material)?node.material:[node.material]).forEach(callback)})}__name(traverseMaterials,"traverseMaterials");function traverseMeshes(object,callback){object.traverse(node=>{node instanceof three.Mesh&&callback(node)})}__name(traverseMeshes,"traverseMeshes");exports.En3=En3;exports.En3View=En3View;exports.coverTexture=coverTexture;exports.dispose=dispose;exports.getCurrentViewport=getCurrentViewport;exports.traverseMaterials=traverseMaterials;exports.traverseMeshes=traverseMeshes;
+    `,(__privateGet(this,_containerElement).shadowRoot||__privateGet(this,_containerElement)).append(__privateGet(this,_webglRenderer).domElement),__privateGet(this,_views).set("default",new En3View(this,"default",__spreadValues({sizeElement:__privateGet(this,_containerElement)},options==null?void 0:options.view))),options!=null&&options.composer&&(__privateSet(this,_composer,new options.composer(__privateGet(this,_webglRenderer))),this.render=()=>{__privateGet(this,_composer).render()}),__privateSet(this,_isCreated,!0),windowResizer_index.windowResizer.subscribe(__privateGet(this,_resizeListener),order_index.RESIZE_ORDER.CANVAS),intersector_index.ticker.subscribe(__privateGet(this,_tickListener2),{order:order_index.TICK_ORDER.CANVAS,culling:__privateGet(this,_containerElement)})}destroy(){var _a;__privateGet(this,_isCreated)&&(windowResizer_index.windowResizer.unsubscribe(__privateGet(this,_resizeListener)),intersector_index.ticker.unsubscribe(__privateGet(this,_tickListener2)),__privateGet(this,_views).forEach(view=>{view.destroy()}),__privateGet(this,_views).clear(),__privateGet(this,_webglRenderer).dispose(),__privateGet(this,_webglRenderer).domElement.remove(),__privateSet(this,_webglRenderer,null),(_a=__privateGet(this,_composer))==null||_a.dispose(),__privateSet(this,_composer,null),__privateSet(this,_isCreated,!1))}createView(viewName,viewOptions){const size=__privateGet(this,_views).size,view=new En3View(this,viewName,viewOptions);return __privateGet(this,_views).set(viewName,view),size===1&&__privateGet(this,_webglRenderer).setScissorTest(!0),view}getView(viewName){return __privateGet(this,_views).get(viewName)}destroyView(viewName){const view=__privateGet(this,_views).get(viewName);view&&(__privateGet(this,_views).delete(viewName),view.destroy(),__privateGet(this,_views).size<=1&&__privateGet(this,_webglRenderer).setScissorTest(!1))}render(view){var _a;if(__privateGet(this,_views).size>1||this.view.isClipped){const left=view.box.left+view.box.CSSTranslation.x+view.box.scrollValue.x,top=this.height-view.box.height-view.box.top+view.box.CSSTranslation.y+view.box.scrollValue.y*-1;__privateGet(this,_webglRenderer).setScissor(left,top,view.box.width,view.box.height),__privateGet(this,_webglRenderer).setViewport(left,top,view.box.width,view.box.height)}(_a=view.beforeRenderCallback)==null||_a.call(view),__privateGet(this,_webglRenderer).render(view.scene,view.camera)}};_CDNVersion=new WeakMap,_containerElement=new WeakMap,_webglRenderer=new WeakMap,_views=new WeakMap,_width=new WeakMap,_height=new WeakMap,_pixelRatio=new WeakMap,_maxPixelRatio=new WeakMap,_isCreated=new WeakMap,_composer=new WeakMap,_resizeListener=new WeakMap,_tickListener2=new WeakMap,__name(_En3,"En3");let En3=_En3;function coverTexture(texture,planeSize,aspect){const width=planeSize.x,height=planeSize.y,_aspect=aspect||texture.image.width/texture.image.height;let sx=0,sy=0,tx=texture.offset.x,ty=texture.offset.y,r=texture.rotation,cx=texture.center.x,cy=texture.center.y;width/height>_aspect?(sx=1,sy=height/width*_aspect):(sy=1,sx=width/height/_aspect),texture.matrix.setUvTransform(tx,ty,sx,sy,r,cx,cy)}__name(coverTexture,"coverTexture");const tempTarget=new three.Vector3,position=new three.Vector3;function getCurrentViewport(en3,target,viewName="default"){const view=en3.getView(viewName),{width,height}=en3,aspect=width/height;target instanceof three.Vector3?tempTarget.copy(target):tempTarget.set(...target);const distance=view.camera.getWorldPosition(position).distanceTo(tempTarget);if(view.camera instanceof three.OrthographicCamera)return{width:width/view.camera.zoom,height:height/view.camera.zoom,factor:1,distance,aspect};{const fov=view.camera.fov*Math.PI/180,h=2*Math.tan(fov/2)*distance,w=h*(width/height);return{width:w,height:h,factor:width/w,distance,aspect}}}__name(getCurrentViewport,"getCurrentViewport");function traverseMaterials(object,callback){object.traverse(node=>{node instanceof three.Mesh&&node.material&&(Array.isArray(node.material)?node.material:[node.material]).forEach(callback)})}__name(traverseMaterials,"traverseMaterials");function traverseMeshes(object,callback){object.traverse(node=>{node instanceof three.Mesh&&callback(node)})}__name(traverseMeshes,"traverseMeshes");exports.En3=En3;exports.En3Clip=En3Clip;exports.En3View=En3View;exports.coverTexture=coverTexture;exports.dispose=dispose;exports.getCurrentViewport=getCurrentViewport;exports.traverseMaterials=traverseMaterials;exports.traverseMeshes=traverseMeshes;

package/lib/en3/index.d.ts

@@ -1,5 +1,6 @@
 export { En3, type En3Options } from './En3';
-export { En3View, type En3ViewOptions, type En3AttachedObject3D, type En3AttachOptions, type En3ViewBeforeRenderCallback, } from './En3View';
+export { En3View, type En3AttachOptions, type En3AttachedObject3D, type En3ViewBeforeRenderCallback, type En3ViewOptions, } from './En3View';
+export { En3Clip } from './objects/En3Clip';
 export { coverTexture } from './utils/coverTexture';
 export { dispose } from './utils/dispose';
 export { getCurrentViewport } from './utils/getCurrentViewport';

package/lib/en3/index.js

@@ -15,14 +15,42 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 }, __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)), __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj)), __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value), __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-import { RESIZE_ORDER, TICK_ORDER } from "../order/index.js";
+import { TICK_ORDER, RESIZE_ORDER } from "../order/index.js";
 import { t as ticker } from "../index-ClTMVKJp.js";
 import { g as getElement } from "../dom-D8D-_9ty.js";
 import "construct-style-sheets-polyfill";
 import { windowResizer } from "../window-resizer/index.js";
-import { Mesh, OrthographicCamera, PerspectiveCamera, Scene, REVISION, WebGLRenderer, Vector3 } from "three";
+import { Plane, Vector3, Mesh, OrthographicCamera, PerspectiveCamera, Scene, REVISION, WebGLRenderer } from "three";
 import { LayoutBox } from "../layout-box/index.js";
 import { d as debounce } from "../function-UmbPrOHm.js";
+var _layoutBox, _planes, _tickListener;
+const _En3Clip = class _En3Clip {
+  constructor(material, elementOrSelector) {
+    __privateAdd(this, _layoutBox, null);
+    __privateAdd(this, _planes, []);
+    __privateAdd(this, _tickListener, /* @__PURE__ */ __name(() => {
+      const scrollValueX = __privateGet(this, _layoutBox).position.x - __privateGet(this, _layoutBox).left, scrollValueY = __privateGet(this, _layoutBox).position.y - __privateGet(this, _layoutBox).top;
+      __privateGet(this, _planes)[0].constant = __privateGet(this, _layoutBox).scale.y / 2 + scrollValueY * -1, __privateGet(this, _planes)[1].constant = __privateGet(this, _layoutBox).scale.y / 2 + scrollValueY, __privateGet(this, _planes)[2].constant = __privateGet(this, _layoutBox).scale.x / 2 + scrollValueX, __privateGet(this, _planes)[3].constant = __privateGet(this, _layoutBox).scale.x / 2 + scrollValueX * -1;
+    }, "#tickListener"));
+    __privateSet(this, _layoutBox, new LayoutBox(elementOrSelector, { cartesian: !1 })), __privateSet(this, _planes, [
+      new Plane(new Vector3(0, -1, 0)),
+      new Plane(new Vector3(0, 1, 0)),
+      new Plane(new Vector3(-1, 0, 0)),
+      new Plane(new Vector3(1, 0, 0))
+    ]), material.clippingPlanes = __privateGet(this, _planes), ticker.subscribe(__privateGet(this, _tickListener), { order: TICK_ORDER.LAYOUT_BOX });
+  }
+  get planes() {
+    return __privateGet(this, _planes);
+  }
+  get layoutBox() {
+    return __privateGet(this, _layoutBox);
+  }
+  destroy() {
+    ticker.unsubscribe(__privateGet(this, _tickListener)), __privateGet(this, _layoutBox).destroy();
+  }
+};
+_layoutBox = new WeakMap(), _planes = new WeakMap(), _tickListener = new WeakMap(), __name(_En3Clip, "En3Clip");
+let En3Clip = _En3Clip;
 function dispose(object3d) {
   const cleanMaterial = /* @__PURE__ */ __name((material) => {
     material.dispose();
@@ -117,10 +145,20 @@ const _En3View = class _En3View {
       cartesian: !0,
       scrollStep: !this.isClipped
     }));
-    return box.bindObject(object), object.userData.box = box, __privateGet(this, _attachedObjects).push(object), object;
+    if (box.bindObject(object), object.userData.box = box, options != null && options.clip && "material" in object) {
+      const clip = new En3Clip(object.material, element);
+      object.userData.clip = clip;
+    }
+    return __privateGet(this, _attachedObjects).push(object), object;
   }
   detachFromHTMLElement(object) {
-    __privateSet(this, _attachedObjects, __privateGet(this, _attachedObjects).filter((o) => o === object ? (object.userData.box.destroy(), !1) : !0));
+    __privateSet(this, _attachedObjects, __privateGet(this, _attachedObjects).filter((o) => {
+      if (o === object) {
+        const { box, clip } = object.userData;
+        return box.destroy(), clip == null || clip.destroy(), !1;
+      }
+      return !0;
+    }));
   }
   add(...args) {
     const object = args[0], element = args[1], options = args[2];
@@ -132,7 +170,7 @@ const _En3View = class _En3View {
 };
 _en3 = new WeakMap(), _name = new WeakMap(), _camera = new WeakMap(), _scene = new WeakMap(), _attachedObjects = new WeakMap(), _cameraDistance = new WeakMap(), _cameraFov = new WeakMap(), _sizeElement = new WeakMap(), _box = new WeakMap(), _debouncedResize = new WeakMap(), __name(_En3View, "En3View");
 let En3View = _En3View;
-var _CDNVersion, _containerElement, _webglRenderer, _views, _width, _height, _pixelRatio, _maxPixelRatio, _isCreated, _composer, _resizeListener, _tickListener;
+var _CDNVersion, _containerElement, _webglRenderer, _views, _width, _height, _pixelRatio, _maxPixelRatio, _isCreated, _composer, _resizeListener, _tickListener2;
 const _En3 = class _En3 {
   constructor() {
     __privateAdd(this, _CDNVersion, `https://unpkg.com/three@0.${REVISION}.x`);
@@ -148,7 +186,7 @@ const _En3 = class _En3 {
     __privateAdd(this, _resizeListener, /* @__PURE__ */ __name((e) => {
       e instanceof CustomEvent || (__privateSet(this, _width, __privateGet(this, _containerElement).clientWidth), __privateSet(this, _height, __privateGet(this, _containerElement).clientHeight), __privateSet(this, _pixelRatio, Math.min(__privateGet(this, _maxPixelRatio), devicePixelRatio || 1)), __privateGet(this, _webglRenderer).setPixelRatio(__privateGet(this, _pixelRatio)), __privateGet(this, _webglRenderer).setSize(__privateGet(this, _width), __privateGet(this, _height)), __privateGet(this, _composer) && (__privateGet(this, _composer).setPixelRatio(__privateGet(this, _pixelRatio)), __privateGet(this, _composer).setSize(__privateGet(this, _width), __privateGet(this, _height))));
     }, "#resizeListener"));
-    __privateAdd(this, _tickListener, /* @__PURE__ */ __name(() => {
+    __privateAdd(this, _tickListener2, /* @__PURE__ */ __name(() => {
       __privateGet(this, _webglRenderer).setRenderTarget(null), __privateGet(this, _views).forEach((view) => {
         this.render(view);
       });
@@ -204,14 +242,14 @@ const _En3 = class _En3 {
       }, options == null ? void 0 : options.view))
     ), options != null && options.composer && (__privateSet(this, _composer, new options.composer(__privateGet(this, _webglRenderer))), this.render = () => {
       __privateGet(this, _composer).render();
-    }), __privateSet(this, _isCreated, !0), windowResizer.subscribe(__privateGet(this, _resizeListener), RESIZE_ORDER.CANVAS), ticker.subscribe(__privateGet(this, _tickListener), {
+    }), __privateSet(this, _isCreated, !0), windowResizer.subscribe(__privateGet(this, _resizeListener), RESIZE_ORDER.CANVAS), ticker.subscribe(__privateGet(this, _tickListener2), {
       order: TICK_ORDER.CANVAS,
       culling: __privateGet(this, _containerElement)
     });
   }
   destroy() {
     var _a;
-    __privateGet(this, _isCreated) && (windowResizer.unsubscribe(__privateGet(this, _resizeListener)), ticker.unsubscribe(__privateGet(this, _tickListener)), __privateGet(this, _views).forEach((view) => {
+    __privateGet(this, _isCreated) && (windowResizer.unsubscribe(__privateGet(this, _resizeListener)), ticker.unsubscribe(__privateGet(this, _tickListener2)), __privateGet(this, _views).forEach((view) => {
       view.destroy();
     }), __privateGet(this, _views).clear(), __privateGet(this, _webglRenderer).dispose(), __privateGet(this, _webglRenderer).domElement.remove(), __privateSet(this, _webglRenderer, null), (_a = __privateGet(this, _composer)) == null || _a.dispose(), __privateSet(this, _composer, null), __privateSet(this, _isCreated, !1));
   }
@@ -240,7 +278,7 @@ const _En3 = class _En3 {
     (_a = view.beforeRenderCallback) == null || _a.call(view), __privateGet(this, _webglRenderer).render(view.scene, view.camera);
   }
 };
-_CDNVersion = new WeakMap(), _containerElement = new WeakMap(), _webglRenderer = new WeakMap(), _views = new WeakMap(), _width = new WeakMap(), _height = new WeakMap(), _pixelRatio = new WeakMap(), _maxPixelRatio = new WeakMap(), _isCreated = new WeakMap(), _composer = new WeakMap(), _resizeListener = new WeakMap(), _tickListener = new WeakMap(), __name(_En3, "En3");
+_CDNVersion = new WeakMap(), _containerElement = new WeakMap(), _webglRenderer = new WeakMap(), _views = new WeakMap(), _width = new WeakMap(), _height = new WeakMap(), _pixelRatio = new WeakMap(), _maxPixelRatio = new WeakMap(), _isCreated = new WeakMap(), _composer = new WeakMap(), _resizeListener = new WeakMap(), _tickListener2 = new WeakMap(), __name(_En3, "En3");
 let En3 = _En3;
 function coverTexture(texture, planeSize, aspect) {
   const width = planeSize.x, height = planeSize.y, _aspect = aspect || texture.image.width / texture.image.height;
@@ -281,6 +319,7 @@ function traverseMeshes(object, callback) {
 __name(traverseMeshes, "traverseMeshes");
 export {
   En3,
+  En3Clip,
   En3View,
   coverTexture,
   dispose,

package/lib/en3/objects/En3Clip.d.ts

@@ -0,0 +1,10 @@
+import { LayoutBox } from '../../layout-box';
+import { ElementOrSelector } from '../../utils';
+import { Material, Plane } from 'three';
+export declare class En3Clip {
+    #private;
+    constructor(material: Material, elementOrSelector: ElementOrSelector<HTMLElement>);
+    get planes(): Plane[];
+    get layoutBox(): LayoutBox;
+    destroy(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aptechka",
-  "version": "0.85.1",
+  "version": "0.86.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/denisavitski/aptechka.git"