@vitrosoftware/common-ui-ts 1.1.121 → 1.1.123

package/src/controls/DxfViewer/js/dxf-viewer.js

@@ -0,0 +1,3541 @@
+import * as three from '/resource/dxfViewer/js/three/three.module.js?version=1.1.123';
+import { Matrix3, Vector2 } from '/resource/dxfViewer/js/three/three.module.js?version=1.1.123';
+import { Batch, DxfViewer, Layer } from '/resource/dxfViewer/js/viewer/DxfViewer.js?version=1.1.123';
+import { Block as SceneBlock } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.123';
+import { Block } from '/resource/dxfViewer/js/viewer/DxfViewer.js?version=1.1.123';
+import { DxfScene, Entity, ColorCode } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.123';
+import { TextRenderer, ParseSpecialChars, HAlign, VAlign } from '/resource/dxfViewer/js/viewer/TextRenderer.js?version=1.1.123';
+import { DxfWorker } from '/resource/dxfViewer/js/viewer/DxfWorker.js?version=1.1.123';
+import { DxfFetcher } from '/resource/dxfViewer/js/viewer/DxfFetcher.js?version=1.1.123';
+import DxfParser from '/resource/dxfViewer/js/viewer/parser/DxfParser.js?version=1.1.123';
+import { RenderBatch } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.123';
+import { DynamicBuffer, NativeType } from '/resource/dxfViewer/js/viewer/DynamicBuffer.js?version=1.1.123';
+import { OrbitControls } from '/resource/dxfViewer/js/viewer/OrbitControls.js?version=1.1.123';
+import { CSS2DRenderer, CSS2DObject } from '/resource/dxfViewer/js/three/three.module.js?version=1.1.123';
+
+let treeViewData = [];
+let notes = [];
+let customMeta = {};
+const InstanceType = Object.freeze({
+    /** Not instanced. */
+    NONE: 0,
+    /** Full affine transform per instance. */
+    FULL: 1,
+    /** Point instances, 2D-translation vector per instance. */
+    POINT: 2,
+
+    /** Number of types. */
+    MAX: 3
+})
+
+
+export class VitroBatch {
+    /**
+     * @param viewer {DxfViewer}
+     * @param scene Serialized scene.
+     * @param batch Serialized scene batch.
+     */
+    constructor(viewer, scene, batch) {
+        this.viewer = viewer
+        this.key = batch.key
+
+        if (batch.hasOwnProperty("verticesOffset")) {
+            const verticesArray =
+                new Float32Array(scene.vertices,
+                    batch.verticesOffset * Float32Array.BYTES_PER_ELEMENT,
+                    batch.verticesSize)
+            if (this.key.geometryType !== BatchingKey.GeometryType.POINT_INSTANCE ||
+                scene.pointShapeHasDot) {
+                this.vertices = new three.BufferAttribute(verticesArray, 3)//vitro 2 => 3
+            }
+            if (this.key.geometryType === BatchingKey.GeometryType.POINT_INSTANCE) {
+                this.transforms = new three.InstancedBufferAttribute(verticesArray, 3)//vitro 2 => 3
+            }
+        }
+
+        if (batch.hasOwnProperty("chunks")) {
+            this.chunks = []
+            for (const rawChunk of batch.chunks) {
+
+                const verticesArray =
+                    new Float32Array(scene.vertices,
+                        rawChunk.verticesOffset * Float32Array.BYTES_PER_ELEMENT,
+                        rawChunk.verticesSize)
+                const indicesArray =
+                    new Uint16Array(scene.indices,
+                        rawChunk.indicesOffset * Uint16Array.BYTES_PER_ELEMENT,
+                        rawChunk.indicesSize)
+                this.chunks.push({
+                    vertices: new three.BufferAttribute(verticesArray, 3),//vitro 2 => 3
+                    indices: new three.BufferAttribute(indicesArray, 1),
+                    handle: rawChunk.handle//vitro
+                })
+            }
+        }
+
+        if (batch.hasOwnProperty("transformsOffset")) {
+            const transformsArray =
+                new Float32Array(scene.transforms,
+                    batch.transformsOffset * Float32Array.BYTES_PER_ELEMENT,
+                    batch.transformsSize)
+            /* Each transform is 3x2 matrix which is split into two 3D vectors which will occupy two
+             * attribute slots.
+             */
+            const buf = new three.InstancedInterleavedBuffer(transformsArray, 6)
+            this.transforms0 = new three.InterleavedBufferAttribute(buf, 3, 0)
+            this.transforms1 = new three.InterleavedBufferAttribute(buf, 3, 3)
+        }
+
+        if (this.key.geometryType === BatchingKey.GeometryType.BLOCK_INSTANCE ||
+            this.key.geometryType === BatchingKey.GeometryType.POINT_INSTANCE) {
+
+            const layer = this.viewer.layers.get(this.key.layerName)
+            if (layer) {
+                this.layerColor = layer.color
+            } else {
+                this.layerColor = 0
+            }
+        }
+    }
+
+    GetInstanceType() {
+        switch (this.key.geometryType) {
+            case BatchingKey.GeometryType.BLOCK_INSTANCE:
+                return InstanceType.FULL
+            case BatchingKey.GeometryType.POINT_INSTANCE:
+                return InstanceType.POINT
+            default:
+                return InstanceType.NONE
+        }
+    }
+
+    /** Create scene objects corresponding to batch data.
+     * @param instanceBatch {?Batch} Batch with instance transform. Null for non-instanced object.
+     */
+    *CreateObjects(instanceBatch = null) {
+        if (this.key.geometryType === BatchingKey.GeometryType.BLOCK_INSTANCE ||
+            this.key.geometryType === BatchingKey.GeometryType.POINT_INSTANCE) {
+
+            if (instanceBatch !== null) {
+                throw new Error("Unexpected instance batch specified for instance batch")
+            }
+            yield* this._CreateBlockInstanceObjects()
+            return
+        }
+        yield* this._CreateObjects(instanceBatch)
+    }
+
+    *_CreateObjects(instanceBatch) {
+        const color = instanceBatch ?
+            instanceBatch._GetInstanceColor(this.key.color) : this.key.color
+
+        //XXX line type
+        const materialFactory =
+            this.key.geometryType === BatchingKey.GeometryType.POINTS ||
+                this.key.geometryType === BatchingKey.GeometryType.POINT_INSTANCE ?
+                this.viewer._GetSimplePointMaterial : this.viewer._GetSimpleColorMaterial
+
+        const material = materialFactory.call(this.viewer, this.viewer._TransformColor(color),
+            instanceBatch?.GetInstanceType() ?? InstanceType.NONE)
+
+        let objConstructor
+        switch (this.key.geometryType) {
+            case BatchingKey.GeometryType.POINTS:
+            /* This method also called for creating dots for shaped point instances. */
+            case BatchingKey.GeometryType.POINT_INSTANCE:
+                objConstructor = three.Points
+                break
+            case BatchingKey.GeometryType.LINES:
+            case BatchingKey.GeometryType.INDEXED_LINES:
+                objConstructor = three.LineSegments
+                break
+            case BatchingKey.GeometryType.TRIANGLES:
+            case BatchingKey.GeometryType.INDEXED_TRIANGLES:
+                objConstructor = three.Mesh
+                break
+            default:
+                throw new Error("Unexpected geometry type:" + this.key.geometryType)
+        }
+
+        function CreateObject(vertices, chunk) {
+            const geometry = instanceBatch ?
+                new three.InstancedBufferGeometry() : new three.BufferGeometry()
+            geometry.setAttribute("position", vertices)
+            instanceBatch?._SetInstanceTransformAttribute(geometry)
+            if (chunk.indices) {
+                geometry.setIndex(chunk.indices)
+            }
+            const obj = new objConstructor(geometry, material)
+            obj.frustumCulled = false
+            obj.matrixAutoUpdate = false
+            obj.name = chunk.handle
+            return obj
+        }
+
+        if (this.chunks) {
+            for (const chunk of this.chunks) {
+                yield CreateObject(chunk.vertices, chunk)
+            }
+        } else {
+            yield CreateObject(this.vertices)
+        }
+    }
+
+    /**
+     * @param geometry {InstancedBufferGeometry}
+     */
+    _SetInstanceTransformAttribute(geometry) {
+        if (!geometry.isInstancedBufferGeometry) {
+            throw new Error("InstancedBufferGeometry expected")
+        }
+        if (this.key.geometryType === BatchingKey.GeometryType.POINT_INSTANCE) {
+            geometry.setAttribute("instanceTransform", this.transforms)
+        } else {
+            geometry.setAttribute("instanceTransform0", this.transforms0)
+            geometry.setAttribute("instanceTransform1", this.transforms1)
+        }
+    }
+
+    *_CreateBlockInstanceObjects() {
+        const blockName = this.key.instanceName ? this.key.instanceName : this.key.blockName
+        const block = this.viewer.blocks.get(blockName)
+        if (!block) {
+            return
+        }
+        for (const batch of block.batches) {
+            yield* batch.CreateObjects(this)
+        }
+        if (this.hasOwnProperty("vertices")) {
+            /* Dots for point shapes. */
+            yield* this._CreateObjects()
+        }
+    }
+
+    /**
+     * @param defColor {number} Color value for block definition batch.
+     * @return {number} RGB color value for a block instance.
+     */
+    _GetInstanceColor(defColor) {
+        if (defColor === ColorCode.BY_BLOCK) {
+            return this.key.color
+        } else if (defColor === ColorCode.BY_LAYER) {
+            return this.layerColor
+        } else {
+            return defColor
+        }
+    }
+}
+/** Key for render batches. */
+export class BatchingKey {
+    /**
+     * Components order matters for lookup by prefix.
+     * @param layerName {?String} Layer name, null if not bound to a layer (e.g. block definition).
+     * @param blockName {?String} Block name if applicable. If specified and geometryType is not
+     *  BLOCK_INSTANCE, the batch is part of block definition. Otherwise it is block instance.
+     * @param geometryType {?number} One of BatchingKey.GeometryType.
+     * @param color {number} Color ARGB value.
+     * @param lineType {?number} Line type ID, null for non-lines. Zero is default type (solid
+     *  line).
+     */
+    constructor(layerName, blockName, geometryType, color, lineType) {
+        this.layerName = layerName ?? null
+        this.blockName = blockName ?? null
+        this.geometryType = geometryType ?? null
+        this.color = color
+        this.lineType = lineType ?? null
+    }
+
+    /** Comparator function. Fields lexical order corresponds to the constructor arguments order.
+     * Null values are always first.
+     */
+    Compare(other) {
+        let c = CompareValues(this.layerName, other.layerName)
+        if (c !== 0) {
+            return c
+        }
+        c = CompareValues(this.blockName, other.blockName)
+        if (c !== 0) {
+            return c
+        }
+        c = CompareValues(this.instanceName, other.instanceName)
+        if (c !== 0) {
+            return c
+        }
+        c = CompareValues(this.geometryType, other.geometryType)
+        if (c !== 0) {
+            return c
+        }
+        c = CompareValues(this.color, other.color)
+        if (c !== 0) {
+            return c
+        }
+        return CompareValues(this.lineType, other.lineType)
+    }
+
+    IsIndexed() {
+        return this.geometryType === BatchingKey.GeometryType.INDEXED_LINES ||
+            this.geometryType === BatchingKey.GeometryType.INDEXED_TRIANGLES ||
+            this.geometryType === BatchingKey.GeometryType.POINTS
+    }
+
+    IsInstanced() {
+        return this.geometryType === BatchingKey.GeometryType.BLOCK_INSTANCE ||
+               this.geometryType === BatchingKey.GeometryType.POINT_INSTANCE
+    }
+}
+
+BatchingKey.GeometryType = Object.freeze({
+    POINTS: 0,
+    LINES: 1,
+    INDEXED_LINES: 2,
+    TRIANGLES: 3,
+    INDEXED_TRIANGLES: 4,
+    BLOCK_INSTANCE: 5,
+    /** Shaped point instances. */
+    POINT_INSTANCE: 6
+})
+
+/** Comparator function for arbitrary types. Null is always first. This is used just to make some
+ * ordering for keys in tree structures, so no locale-aware string comparison.
+ */
+export function CompareValues(v1, v2) {
+    if (v1 === null) {
+        if (v2 === null) {
+            return 0
+        }
+        return -1
+    }
+    if (v2 === null) {
+        return 1
+    }
+    if (v1 < v2) {
+        return -1
+    }
+    if (v1 > v2) {
+        return 1
+    }
+    return 0
+}
+
+const MODEL_SPACE = "*Model_Space"
+const PAPER_SPACE = "*Paper_Space"
+
+export function IsSpace(name) {
+    return name && (name.indexOf(MODEL_SPACE) == 0 || name.indexOf(PAPER_SPACE) == 0)
+}
+
+export function IsModelSpace(name) {
+    return name && name.indexOf(MODEL_SPACE) == 0
+}
+
+// JavaScript source code
+//export class VitroBlock extends Block {
+export class VitroBlock extends SceneBlock {
+    /** @param data {{}} Raw DXF entity. */
+    constructor(data) {
+        super(data)
+        if (!this.HasEntities()) {
+            this.GetEntitiesFromXref(data)
+        }
+    }
+
+    /** Set block flattening flag based on usage statistics.
+     * @return {Boolean} New flatten flag state.
+     */
+    SetFlatten() {
+        if (!this.HasGeometry()) {
+            return false
+        }
+        /* Flatten if a block is used once (pure optimization if shares its layer with other
+         * geometry) or if total instanced vertices number is less than a threshold (trade some
+         * space for draw calls number).
+         */
+        this.flatten = true;//vitro
+        return this.flatten
+    }
+
+
+    HasEntities() {
+        return this.data.hasOwnProperty("entities")
+    }
+
+    IsSpace() {
+        return IsSpace(this.data.name)
+    }
+
+    async GetEntitiesFromXref(data) {
+        if (data.xrefPath) {
+            const url = data.xrefPath.replace('.dwg', '.dxf').replace('\\', '/')
+            var filename = url.substring(url.lastIndexOf('/') + 1)
+            const dxf = window.dxfViewer.xrefMap[filename]
+            this.data.entities = []
+            for (const entity of dxf.entities) {
+                if (!entity.inPaperSpace) {
+                    this.data.entities.push(entity)
+                }
+            }
+        }
+    }
+}
+export class VitroDxfScene extends DxfScene {
+
+    constructor(options) {
+        super(options)
+
+        this.origins = new Map()
+        /* Indexed by block referense handle, value is Insert. */
+        this.inserts = new Map()
+        this.bounds = new Map()
+        this.overlays = new Map()
+    }
+
+    async Build(dxf, xrefMap, fontFetchers) {
+        const header = dxf.header || {}
+
+        for (const [name, value] of Object.entries(header)) {
+            if (name.startsWith("$")) {
+                this.vars.set(name.slice(1), value)
+            }
+        }
+
+        /* Zero angle direction, 0 is +X. */
+        this.angBase = this.vars.get("ANGBASE") ?? 0
+        /* 0 - CCW, 1 - CW */
+        this.angDir = this.vars.get("ANGDIR") ?? 0
+        this.pdSize = this.vars.get("PDSIZE") ?? 0
+        this.isMetric = (this.vars.get("MEASUREMENT") ?? 1) == 1
+
+        this._ProcessLayers(dxf, xrefMap)
+
+        if (dxf.tables && dxf.tables.dimstyle) {
+            for (const [, style] of Object.entries(dxf.tables.dimstyle.dimStyles)) {
+                this.dimStyles.set(style.name, style)
+            }
+        }
+
+        if (dxf.tables && dxf.tables.style) {
+            for (const [, style] of Object.entries(dxf.tables.style.styles)) {
+                this.fontStyles.set(style.styleName, style);
+            }
+        }
+
+        this._ProcessBlocks(dxf, xrefMap)
+
+        this.textRenderer = new TextRenderer(fontFetchers, this.options.textOptions)
+        this.hasMissingChars = false
+        await this._FetchFonts(dxf)
+
+        /* Scan all entities to analyze block usage statistics and create viewport vertices. */
+        this.layouts = []
+        this.viewports = []
+        this._ProcessInserts(dxf)
+        this._ProcessEntities(dxf)
+        this._ProcessLayouts(dxf)
+
+        this.scene = this._BuildScene()
+        this.scene.layouts = this.layouts
+        this.scene.tileMode = dxf.header["$TILEMODE"] || 0
+
+        delete this.batches
+        delete this.layers
+        delete this.blocks
+        delete this.textRenderer
+        delete this.layouts
+        delete this.viewports
+        delete this.origins
+        delete this.bounds
+        delete this.overlays
+    }
+
+    _ProcessLayers(dxf, xrefMap) {
+        if (xrefMap) {
+            for (const [, xref] of Object.entries(xrefMap)) {
+                if (xref.tables && xref.tables.layer) {
+                    this._ProcessLayersMap(xref.tables.layer.layers)
+                }
+            }
+        }
+        if (dxf.tables && dxf.tables.layer) {
+            this._ProcessLayersMap(dxf.tables.layer.layers)
+        }
+    }
+
+    _ProcessLayersMap(layers) {
+        for (const [, layer] of Object.entries(layers)) {
+            const ind1 = layer.name.indexOf('|')
+            const ind2 = layer.name.lastIndexOf('|')
+            if (ind1 === ind2) {
+                layer.displayName = ParseSpecialChars(layer.name)
+                this.layers.set(layer.name, layer)
+            }
+        }
+    }
+
+    _ProcessBlocks(dxf, xrefMap) {
+        if (xrefMap) {
+            for (const [name, xref] of Object.entries(xrefMap)) {
+                if (xref.blocks) {
+                    this._ProcessBlocksMap(xref.blocks, name)
+                }
+            }
+        }
+
+        if (dxf.blocks) {
+            this._ProcessBlocksMap(dxf.blocks)
+        }
+    }
+
+    _ProcessBlocksMap(blocks, xrefName) {
+        const prefix = xrefName ? xrefName.substring(0, xrefName.lastIndexOf('.')) : null
+        for (const [, block] of Object.entries(blocks)) {
+            this.blocks.set(block.name, new VitroBlock(block))
+            if (prefix && this._IsOverlay(block)) {
+                this.overlays.set(prefix + "|" + block.name, new VitroBlock(block.name))//register overlay
+            }
+        }
+    }
+
+    _IsOverlay(block) {
+        return block.type & 8
+    }
+
+
+    _ProcessLayouts(dxf) {
+        for (const layout of this.layouts) {
+            layout.origin = this.origins.get(layout.spaceHandle)
+            layout.bounds = this.bounds.get(layout.spaceHandle)
+            for (const viewport of this.viewports) {
+                if (layout.spaceHandle === viewport.ownerHandle) {
+                    layout.viewports.set(viewport.status, viewport)
+                }
+            }
+
+            const blockCtx = layout.block.DefinitionContext()
+            const entities = layout.block.data.entities ? layout.block.data.entities : dxf.entities
+            for (const viewport of layout.viewports.values()) {
+                this._CreateViewportVertices(viewport, entities)
+                this._ProcessDxfEntity(viewport, blockCtx)
+            }
+        }
+    }
+
+    _ProcessEntities(dxf) {
+        for (const block of this.blocks.values()) {
+            if (block.IsSpace() && block.HasEntities()) {//Process only Spaces next
+                const blockCtx = block.DefinitionContext()
+                for (const entity of block.data.entities) {
+                    this._ProcessDxfEntity(entity, blockCtx)
+                }
+            }
+            this._CreateLayout(dxf, block)
+        }
+        console.log(`${this.numBlocksFlattened} blocks flattened`)
+
+        for (const entity of dxf.entities) {
+            const blockCtx = this._CreateSpaceBlockConext(entity)
+            this._ProcessDxfEntity(entity, blockCtx)
+        }
+    }
+
+    _ProcessInserts(dxf) {
+        /* Scan all entities to analyze block usage statistics. */
+        for (const entity of dxf.entities) {
+            if (entity.type === "INSERT") {
+                this.inserts.set(entity.handle, entity)
+                const block = this.blocks.get(entity.name)
+                block?.RegisterInsert(entity)
+
+            } else if (entity.type == "DIMENSION") {
+                if ((entity.block ?? null) !== null) {
+                    const block = this.blocks.get(entity.block)
+                    block?.RegisterInsert(entity)
+                }
+            }
+        }
+
+        for (const block of this.blocks.values()) {
+            if (block.HasEntities()) {
+                const blockCtx = block.DefinitionContext()
+                for (const entity of block.data.entities) {
+                    if (block.IsSpace()) {
+                        if (entity.type === "INSERT") {//analyze block usage statistics
+                            this.inserts.set(entity.handle, entity)
+                            const blkDef = this.blocks.get(entity.name)
+                            blkDef?.RegisterInsert(entity)
+                        }
+                    }
+                    else {//Process only BlockDefinition first
+                        this._ProcessDxfEntity(entity, blockCtx, block.data)
+                    }
+                }
+            }
+            if (block.SetFlatten()) {
+                this.numBlocksFlattened++
+            }
+        }
+    }
+
+
+    _CreateViewportVertices(viewport, entities) {
+        if (viewport.id === 1)//exlude main viewports
+            return;
+        if (viewport.boundaryHandle) {
+            for (const entity of entities) {
+                if (entity.handle === viewport.boundaryHandle) {
+                    viewport.vertices = entity.vertices
+                    break
+                }
+            }
+            return
+        }
+
+        const vertex0 = { x: viewport.center.x - viewport.width / 2, y: viewport.center.y - viewport.height / 2, z: viewport.center.z }
+        viewport.vertices.push(vertex0)
+        const vertex1 = Object.assign({}, vertex0)
+        vertex1.y += viewport.height
+        viewport.vertices.push(vertex1)
+        const vertex2 = Object.assign({}, vertex1)
+        vertex2.x += viewport.width
+        viewport.vertices.push(vertex2)
+        const vertex3 = Object.assign({}, vertex2)
+        vertex3.y -= viewport.height
+        viewport.vertices.push(vertex3)
+        const vertex4 = Object.assign({}, vertex3)
+        vertex4.x -= viewport.width
+        viewport.vertices.push(vertex4)
+    };
+
+    _CreateLayout(dxf, block) {
+        for (const object of dxf.objects) {
+            if (object.type === "LAYOUT" && object.spaceHandle === block.data.ownerHandle) {
+                const layout = {
+                    block: block,
+                    name: object.name,
+                    space: block.data.name,
+                    tabOrder: object.tabOrder,
+                    spaceHandle: object.spaceHandle,
+                    viewports: new Map()
+                }
+                for (let i = 1; i < this.layouts.length; i++) {
+                    if (this.layouts[i].tabOrder > layout.tabOrder) {
+                        this.layouts.splice(i, 0, layout)
+                        return
+                    }
+                }
+                this.layouts.push(layout)
+                return
+            }
+        }
+    }
+
+    _CreateSpaceBlockConext(entity) {
+        const block = this._FindSpaceBlock(entity.ownerHandle)
+        if (block) {
+            return block.DefinitionContext()
+        }
+
+        return this.layouts[0].block.DefinitionContext()//if not found -> to Model Space
+    }
+
+    _FindSpaceBlock(ownerHandle) {
+        for (const block of this.blocks.values()) {
+            if (block.IsSpace() && block.data.ownerHandle === ownerHandle) {
+                return block
+            }
+        }
+
+        const insert = this.inserts.get(ownerHandle)
+        if (insert) {
+            return this._FindSpaceBlock(insert.ownerHandle)
+        }
+    }
+
+    _IsSpaceContext(blockCtx) {
+        return !blockCtx || blockCtx.block.IsSpace()
+    }
+
+
+    _CreatePointShapeBlock() {//to override to new VitroBlock
+        if (this.pointShapeBlock) {
+            return
+        }
+        /* This mimics DXF block entity. */
+        this.pointShapeBlock = new VitroBlock({
+            name: POINT_SHAPE_BLOCK_NAME,
+            position: { x: 0, y: 0 }
+        })
+        /* Fix block origin at zero. */
+        this.pointShapeBlock.offset = new Vector2(0, 0)
+        const blockCtx = this.pointShapeBlock.DefinitionContext()
+
+        const markType = this.pdMode & PdMode.MARK_MASK
+        if (markType !== PdMode.DOT && markType !== PdMode.NONE) {
+            const vertices = []
+            this._CreatePointMarker(vertices, markType)
+            const entity = new Entity({
+                type: Entity.Type.LINE_SEGMENTS,
+                vertices,
+                color: ColorCode.BY_BLOCK
+            })
+            this._ProcessEntity(entity, blockCtx)
+        }
+
+        if (this.pdMode & PdMode.SQUARE) {
+            const r = this.pdSize * 0.5
+            const vertices = [
+                { x: -r, y: r },
+                { x: r, y: r },
+                { x: r, y: -r },
+                { x: -r, y: -r }
+            ]
+            const entity = new Entity({
+                type: Entity.Type.POLYLINE, vertices,
+                color: ColorCode.BY_BLOCK,
+                shape: true
+            })
+            this._ProcessEntity(entity, blockCtx)
+        }
+        if (this.pdMode & PdMode.CIRCLE) {
+            const vertices = []
+            this._GenerateArcVertices({
+                vertices, center: { x: 0, y: 0 },
+                radius: this.pdSize * 0.5,
+                tessellationAngle: POINT_CIRCLE_TESSELLATION_ANGLE
+            })
+            const entity = new Entity({
+                type: Entity.Type.POLYLINE, vertices,
+                color: ColorCode.BY_BLOCK,
+                shape: true
+            })
+            this._ProcessEntity(entity, blockCtx)
+        }
+    }
+
+    _ProcessDxfEntity(entity, blockCtx = null, mainEntity = null) {
+        let renderEntities
+        switch (entity.type) {
+            case "LINE":
+                renderEntities = this._DecomposeLine(entity, blockCtx)
+                break
+            case "POLYLINE":
+            case "LWPOLYLINE":
+            case "LEADER":
+                renderEntities = this._DecomposePolyline(entity, blockCtx)
+                break
+            case "VIEWPORT":
+                if (entity.vertices && entity.vertices.length > 0) {
+                    renderEntities = this._DecomposePolyline(entity, blockCtx)
+                }
+                else {
+                    this.viewports.push(entity)//to process later
+                    return
+                }
+                break
+            case "ARC":
+                renderEntities = this._DecomposeArc(entity, blockCtx)
+                break
+            case "CIRCLE":
+                renderEntities = this._DecomposeCircle(entity, blockCtx)
+                break
+            case "ELLIPSE":
+                renderEntities = this._DecomposeEllipse(entity, blockCtx)
+                break
+            case "POINT":
+                renderEntities = this._DecomposePoint(entity, blockCtx)
+                break
+            case "SPLINE":
+                renderEntities = this._DecomposeSpline(entity, blockCtx)
+                break
+            case "INSERT":
+                /* Works with rendering batches without intermediate entities. */
+                this._ProcessInsert(entity, blockCtx, mainEntity)
+                return
+            case "ATTRIB":
+                renderEntities = this._DecomposeAttribute(entity, blockCtx)
+                break
+            case "TEXT":
+                renderEntities = this._DecomposeText(entity, blockCtx)
+                break
+            case "MTEXT":
+                renderEntities = this._DecomposeMText(entity, blockCtx)
+                break
+            case "3DFACE":
+                renderEntities = this._Decompose3DFace(entity, blockCtx)
+                break
+            case "SOLID":
+                renderEntities = this._DecomposeSolid(entity, blockCtx)
+                break
+            case "DIMENSION":
+                renderEntities = this._DecomposeDimension(entity, blockCtx)
+                break
+            default:
+                console.log("Unhandled entity type: " + entity.type)
+                return
+        }
+        for (const renderEntity of renderEntities) {
+            this._ProcessEntity(renderEntity, blockCtx, mainEntity ? mainEntity : entity)
+        }
+    }
+
+    /**
+ * @param entity {Entity}
+ * @param blockCtx {?BlockContext}
+ */
+    _ProcessEntity(entity, blockCtx, mainEntity) {//vitro: add @param mainEntity {Entity}
+        this._CheckBlockColor(entity, mainEntity)
+        switch (entity.type) {
+            case Entity.Type.POINTS:
+                this._ProcessPoints(entity, blockCtx, mainEntity)
+                break
+            case Entity.Type.LINE_SEGMENTS:
+                this._ProcessPolyline(entity, blockCtx, mainEntity)//vitro: process line as polyline
+                break
+            case Entity.Type.POLYLINE:
+                this._ProcessPolyline(entity, blockCtx, mainEntity)
+                break
+            case Entity.Type.TRIANGLES:
+                this._ProcessTriangles(entity, blockCtx, mainEntity)
+                break
+            default:
+                throw new Error("Unhandled entity type: " + entity.type)
+        }
+    }
+    /**
+      * @param entity {Entity}
+      * @param blockCtx {?BlockContext}
+      */
+    _ProcessPoints(entity, blockCtx, mainEntity) {//vitro: add @param mainEntity {Entity}
+        const key = new BatchingKey(entity.layer, blockCtx?.name,
+            BatchingKey.GeometryType.POINTS, entity.color, 0)
+        const batch = this._GetBatch(key)
+        const chunk = batch.PushChunk(entity.vertices.length, mainEntity)//vitro
+        for (const v of entity.vertices) {
+            chunk.PushVertex(this._TransformVertex(v, blockCtx))
+        }
+        for (let i = 0; i < entity.vertices.length; i++) {
+            chunk.PushIndex(i)
+        }
+        chunk.Finish()
+    }
+
+    /**
+ * @param entity {Entity}
+ * @param blockCtx {?BlockContext}
+ */
+    _ProcessPolyline(entity, blockCtx, mainEntity) {//vitro: add @param mainEntity {Entity}
+        if (entity.vertices.length < 2) {
+            return
+        }
+        /* It is more optimal to render short polylines un-indexed. Also DXF often contains
+         * polylines with just two points.
+         */
+        const verticesCount = entity.vertices.length
+        if (verticesCount == 3 && entity.shape) {//vitro == instead <= and entity.shape (only shapes with 3 vertex - will never work)
+            const key = new BatchingKey(entity.layer, blockCtx?.name,
+                BatchingKey.GeometryType.LINES, entity.color,
+                entity.lineType)
+            const batch = this._GetBatch(key)
+            let prev = null
+            for (const v of entity.vertices) {
+                if (prev !== null) {
+                    batch.PushVertex(this._TransformVertex(prev, blockCtx))
+                    batch.PushVertex(this._TransformVertex(v, blockCtx))
+                }
+                prev = v
+            }
+            if (entity.shape && verticesCount > 2) {
+                batch.PushVertex(this._TransformVertex(entity.vertices[verticesCount - 1], blockCtx))
+                batch.PushVertex(this._TransformVertex(entity.vertices[0], blockCtx))
+            }
+            return
+        }
+
+        const key = new BatchingKey(entity.layer, blockCtx?.name,
+            BatchingKey.GeometryType.INDEXED_LINES,
+            entity.color, entity.lineType)
+        const batch = this._GetBatch(key)
+        /* Line may be split if exceeds chunk limit. */
+        for (const lineChunk of entity._IterateLineChunks()) {
+            const chunk = batch.PushChunk(lineChunk.verticesCount, mainEntity)//vitro
+            for (const v of lineChunk.vertices) {
+                chunk.PushVertex(this._TransformVertex(v, blockCtx))
+            }
+            for (const idx of lineChunk.indices) {
+                chunk.PushIndex(idx)
+            }
+            chunk.Finish()
+        }
+    }
+
+    /**
+ * @param entity {Entity}
+ * @param blockCtx {?BlockContext}
+ */
+    _ProcessTriangles(entity, blockCtx = null, mainEntity = null) {//vitro add mainEntity
+        if (entity.vertices.length < 3) {
+            return
+        }
+        if (entity.indices.length % 3 !== 0) {
+            console.error("Unexpected size of indices array: " + entity.indices.length)
+            return
+        }
+        const key = new BatchingKey(entity.layer, blockCtx?.name,
+            BatchingKey.GeometryType.INDEXED_TRIANGLES,
+            entity.color, 0)
+        const batch = this._GetBatch(key)
+        //XXX splitting into chunks is not yet implemented. Currently used only for text glyphs so
+        // should fit into one chunk
+        const chunk = batch.PushChunk(entity.vertices.length, mainEntity)
+        for (const v of entity.vertices) {
+            chunk.PushVertex(this._TransformVertex(v, blockCtx))
+        }
+        for (const idx of entity.indices) {
+            chunk.PushIndex(idx)
+        }
+        chunk.Finish()
+    }
+
+    _CheckBlockColor(entity, mainEntity) {
+        if (entity.color === ColorCode.BY_BLOCK) {
+            if (mainEntity && mainEntity.type === "INSERT") {
+                const layer = this.layers.get(mainEntity.layer)
+                entity.color = layer.color
+            }
+        }
+        else if (entity.color === ColorCode.BY_LAYER){
+            if (mainEntity && this._IsSystemLayer(entity.layer)) {
+                const blockLayer = this.layers.get(mainEntity.layer)
+                entity.color = blockLayer?.color ?? 0
+            } else {
+                const layer = this.layers.get(entity.layer)
+                entity.color = layer?.color ?? 0
+            }
+        }
+    }
+
+
+    *_DecomposeDimension(entity, blockCtx) {
+        if ((entity.block ?? null) !== null && this.blocks.has(entity.block)) {
+            const name = entity.name
+            entity.name = entity.block
+            entity.position = { x: 0, y:0, z: 0 }
+            this._ProcessInsert(entity, blockCtx)
+            entity.name = name
+            return
+        }
+        super._DecomposeDimension(entity, blockCtx)
+    }
+
+    *_DecomposeAttr(entity, blockCtx) {
+        if (entity.invisible) {
+            return
+        }
+        yield* this._DecomposeText(entity, blockCtx)
+    }
+
+    /**
+ * Updates batches directly.
+ * @param entity
+ * @param blockCtx {?BlockContext} Nested block insert when non-null.
+ */
+    _ProcessInsert(entity, blockCtx, mainEntity) {
+        if (blockCtx && !blockCtx.block.IsSpace() && blockCtx.block.HasEntities()) {
+            //XXX handle indirect recursion
+            if (blockCtx.name === entity.name) {
+                console.warn("Recursive block reference: " + blockCtx.name)
+                return
+            }
+            /* Flatten nested blocks definition. */
+            var name = entity.name ? entity.name : entity.block
+            const block = this.blocks.get(name)
+            if (!block) {
+                console.warn("Unresolved nested block reference: " + entity.name)
+            }
+
+            var isOverlay = false
+            if (mainEntity && mainEntity.name) {
+                const fullName = mainEntity.name + "|" + name
+                isOverlay = this.overlays.has(fullName)
+            }
+
+            const nestedCtx = blockCtx.NestedBlockContext(block, entity)
+            if (!isOverlay && block.data.entities) {
+                for (const subEntity of block.data.entities) {
+                    this._ProcessDxfEntity(subEntity, nestedCtx, entity)
+                }
+            }
+            return
+        }
+
+        var name = entity.name ? entity.name : entity.block//vitro
+        const block = this.blocks.get(name)
+        if (block === null) {
+            console.warn("Unresolved block reference in INSERT: " + name)
+            return
+        }
+        if (!block.HasGeometry()) {
+            return
+        }
+
+        const layer = this._GetEntityLayer(entity, null)
+        const color = this._GetEntityColor(entity, null)
+        const lineType = this._GetLineType(entity, null, null)
+        //XXX apply extrusion direction
+        const transform = block.InstantiationContext().GetInsertionTransform(entity)
+
+        /* Update bounding box and origin with transformed block bounds corner points. */
+        const bounds = block.bounds
+        const origin = this._UpdateBounds(new Vector2(bounds.minX, bounds.minY).applyMatrix3(transform), blockCtx)
+        this._UpdateBounds(new Vector2(bounds.maxX, bounds.maxY).applyMatrix3(transform), blockCtx)
+        this._UpdateBounds(new Vector2(bounds.minX, bounds.maxY).applyMatrix3(transform), blockCtx)
+        this._UpdateBounds(new Vector2(bounds.maxX, bounds.minY).applyMatrix3(transform), blockCtx)
+
+        transform.translate(-origin.x, -origin.y)
+        //XXX grid instancing not supported yet
+        if (block.flatten) {
+            for (const batch of block.batches) {
+                this._FlattenBatch(batch, layer, blockCtx.block.data.name, color, lineType, transform, entity)//vitro add entity
+            }
+        } else {
+            const key = new BatchingKey(layer, blockCtx.block.data.name, BatchingKey.GeometryType.BLOCK_INSTANCE,
+                color, lineType)
+            key.instanceName = entity.name
+            const batch = this._GetBatch(key)
+            batch.PushInstanceTransform(transform)
+        }
+    }
+
+    _IsSystemLayer(name) {
+        return name === "0" || name === "Defpoints"
+    }
+
+    /** Flatten block definition batch. It is merged into suitable instant rendering batch. */
+    _FlattenBatch(blockBatch, layerName, blockName, blockColor, blockLineType, transform, entity) {//vitro add entity
+        const layer = this.layers.get(layerName)
+        let color, lineType = 0
+        if (blockBatch.key.color === ColorCode.BY_BLOCK) {
+            color = blockColor
+        } else if (blockBatch.key.color === ColorCode.BY_LAYER) {
+            color = layer?.color ?? 0
+        } else {
+            color = blockBatch.key.color
+        }
+        //XXX line type
+        const key = new BatchingKey(layerName, blockName, blockBatch.key.geometryType, color, lineType)
+        const batch = this._GetBatch(key)
+        batch.Merge(blockBatch, transform, entity)//vitro add entity
+    }
+
+    /** @return {RenderBatch} */
+    _GetBatch(key) {
+        let batch = this.batches.find({ key })
+        if (batch !== null) {
+            return batch
+        }
+        batch = new VitroRenderBatch(key)
+        this.batches.insert(batch)
+        if (key.blockName !== null && !key.IsInstanced()) {
+            /* Block definition batch. */
+            const block = this.blocks.get(key.blockName)
+            if (block) {
+                block.batches.push(batch)
+            }
+        }
+        return batch
+    }
+
+    /** Resolve entity color.
+     *
+     * @param entity
+     * @param blockCtx {?BlockContext}
+     * @return {number} RGB color value. For block entity it also may be one of ColorCode values
+     *  which are resolved on block instantiation.
+     */
+    _GetEntityColor(entity, blockCtx = null) {
+        let color = ColorCode.BY_LAYER
+        if (entity.colorIndex === 0) {
+            color = ColorCode.BY_BLOCK
+        } else if (entity.colorIndex === 256) {
+            color = ColorCode.BY_LAYER
+        } else if (entity.hasOwnProperty("color")) {
+            color = entity.color
+        }
+
+        if (!this._IsSpaceContext(blockCtx)) {//vitro
+            return color
+        }
+        if (color === ColorCode.BY_LAYER || color === ColorCode.BY_BLOCK) {
+            /* BY_BLOCK is not useful when not in block so replace it by layer as well. */
+            if (entity.hasOwnProperty("layer")) {
+                const layer = this.layers.get(entity.layer)
+                if (layer) {
+                    return layer.color
+                }
+            }
+        } else {
+            return color
+        }
+        /* Fallback to black. */
+        return 0
+    }
+
+    /** @return {?string} Layer name, null for block entity. */
+    _GetEntityLayer(entity, blockCtx = null) {
+        if (entity.hasOwnProperty("layer")) {
+            return entity.layer
+        }
+        return "0"
+    }
+
+    /**
+ * Apply all necessary final transforms to a vertex before just before storing it in a rendering
+ * batch.
+ * @param v {{x: number, y: number}}
+ * @param blockCtx {BlockContext}
+ * @return {{x: number, y: number}}
+ */
+    _TransformVertex(v, blockCtx = null) {
+        if (!this._IsSpaceContext(blockCtx)) {
+            /* Block definition in block coordinates. So it should not touch bounds and origin. */
+            return blockCtx.TransformVertex(v)
+        }
+        const origin = this._UpdateBounds(v, blockCtx)
+        return { x: v.x - origin.x, y: v.y - origin.y }
+    }
+
+    /*
+    * @param blockCtx {BlockContext}
+    * @param v {{x,y}} Vertex to extend bounding box with and set origin. 
+    */
+    _UpdateBounds(v, blockCtx) {
+        const handle = blockCtx.block.data.ownerHandle
+        var bounds = this.bounds.get(handle)
+        if (!bounds) {
+            bounds = { minX: v.x, maxX: v.x, minY: v.y, maxY: v.y }
+            this.bounds.set(handle, bounds)
+        } else {
+            if (v.x < bounds.minX) {
+                bounds.minX = v.x
+            } else if (v.x > bounds.maxX) {
+                bounds.maxX = v.x
+            }
+            if (v.y < bounds.minY) {
+                bounds.minY = v.y
+            } else if (v.y > bounds.maxY) {
+                bounds.maxY = v.y
+            }
+        }
+        var origin = this.origins.get(handle)
+        if (!origin) {
+            origin = { x: v.x, y: v.y }
+            //origin = { x: 0, y: 0 }//vitro
+            this.origins.set(handle, origin)
+        }
+        return origin
+    }
+
+}
+export class VitroDxfWorker extends DxfWorker {
+
+    /** @return {Object} DxfScene serialized scene. */
+    async _Load(url, fonts, options, progressCbk) {
+        let fontFetchers
+        if (fonts) {
+            fontFetchers = this._CreateFontFetchers(fonts, progressCbk)
+        } else {
+            fontFetchers = []
+        }
+        const dxf = await new DxfFetcher(url).Fetch(progressCbk)
+        if (progressCbk) {
+            progressCbk("prepare", 0, null)
+        }
+        const dxfScene = new VitroDxfScene(options)
+        if (options.buildScene === true) {
+            await dxfScene.Build(dxf, options.xrefMap, fontFetchers)
+        }
+        return {
+            scene: options.buildScene === true ? dxfScene.scene : undefined,
+            dxf: options.retainParsedDxf === true ? dxf : undefined
+        }
+    }
+
+}
+export const DrawMode = {
+	ANNOTATIONS: 1
+}
+
+const MessageLevel = Object.freeze({
+	INFO: "info",
+	WARN: "warn",
+	ERROR: "error"
+})
+
+
+export class Viewer extends DxfViewer {
+
+	constructor(domContainer, options = null) {
+
+		if (!options) {
+			options = DxfViewer.DefaultOptions
+			options.autoResize = true
+			options.colorCorrection = true
+			options.clearColor = new three.Color("#fff")
+			options.buildScene = true
+			options.retainParsedDxf = true
+		}
+
+		super(domContainer, options)
+		this.canvas.addEventListener("mousemove", this._OnPointerEvent.bind(this))
+		document.addEventListener("keydown", this.OnKeyDown)
+
+		/* Indexed by space name, value is scene instance. */
+		this.spaces = new Map();
+
+		this.objects = []
+		this.objectMap = new Map()
+		this.selectedObjects = []
+		this.drawMode = null
+		this.drawables = []
+		this.drawablePlugins = []
+		this.xrefMap = new Map()
+
+		var mainFont = "/resource/dxfViewer/assets/fonts/Roboto-LightItalic.ttf";
+		var aux1Font = "/resource/dxfViewer/assets/fonts/NotoSansDisplay-SemiCondensedLightItalic.ttf";
+		var aux2Font = "/resource/dxfViewer/assets/fonts/HanaMinA.ttf";
+		var aux3Font = "/resource/dxfViewer/assets/fonts/NanumGothic-Regular.ttf";
+		window.fonts = [mainFont, aux1Font, aux2Font, aux3Font]
+
+		const Subscribe = eventName => {
+			this.Subscribe(eventName, e => this.Emit("dxf-" + eventName, e))
+		}
+		for (const eventName of ["loaded", "cleared", "destroyed", "resized", "pointerdown",
+			"pointerup", "viewChanged", "message", "added"]) {
+			Subscribe(eventName)
+		}
+	}
+
+	Destroy() {
+		super.Destroy();
+
+		this.objects = null
+		this.objectMap = null
+		this.selectedObjects = null
+		this.drawables = null
+		this.drawablePlugins = null
+		this.xrefMap = null
+
+		window.dxfViewer = null
+	}
+
+
+	async Load(url, xrefList) {
+		window.isLoading = true
+		window.error = null
+		try {
+			if (xrefList) {
+				await this.loadXrefList(xrefList)
+			}
+			await this.LoadInternal({
+				url,
+				xrefList: xrefList,
+				fonts: window.fonts,
+				progressCbk: this.OnProgress.bind(window),
+				workerFactory: null
+			})
+		} catch (error) {
+			console.warn(error)
+			window.error = error.toString()
+		} finally {
+			window.isLoading = false
+			window.progressText = null
+			window.progress = null
+			window.curProgressPhase = null
+		}
+	}
+
+	async loadXrefList(xrefList) {
+		for (const xref of xrefList) {
+			var fileName = xref.substring(xref.lastIndexOf('/') + 1)
+			const prefix = fileName.substring(0, fileName.lastIndexOf('.'))
+
+			const worker = new VitroDxfWorker()
+			const { scene, dxf } = await worker.Load(xref, window.fonts, { retainParsedDxf: true, buildScene: false })
+			//add file prefix to layers
+			if (dxf.tables && dxf.tables.layer) {
+				for (const [, layer] of Object.entries(dxf.tables.layer.layers)) {
+					layer.name = this._GetXrefLayerName(layer.name, prefix)
+				}
+			}
+			//add file prefix to entities layer name
+			if (dxf.entities) {
+				this._ProcessXrefEntities(dxf.entities, prefix)
+			}
+			if (dxf.blocks) {
+				for (const [, block] of Object.entries(dxf.blocks)) {
+					if (block.entities) {
+						this._ProcessXrefEntities(block.entities, prefix)
+					}
+				}
+			}
+
+			this.xrefMap[fileName] = dxf
+			await worker.Destroy()
+		}
+	}
+
+	_ProcessXrefEntities(entities, prefix) {
+		for (const entity of entities) {
+			entity.layer = this._GetXrefLayerName(entity.layer, prefix)
+		}
+	}
+
+	_GetXrefLayerName(name, prefix) {
+		if (name != "Defpoints" && name != "0") {
+			return prefix + "|" + name
+		}
+		return name
+	}
+
+
+	async LoadInternal({ url, fonts = null, progressCbk = null, workerFactory = null }) {
+		if (url === null || url === undefined) {
+			throw new Error("`url` parameter is not specified")
+		}
+
+		this._EnsureRenderer()
+
+		this.Clear()
+
+		this.worker = this.CreateDxfWorker(workerFactory)// new DxfWorker(workerFactory ? workerFactory() : null)
+		this.options.xrefMap = this.xrefMap
+		const { scene, dxf } = await this.worker.Load(url, fonts, this.options, progressCbk)
+		this.scene = scene
+		this.dxf = dxf
+		await this.worker.Destroy()
+		this.worker = null
+
+		this.hasMissingChars = scene.hasMissingChars
+
+		for (const layer of scene.layers) {
+			this.layers.set(layer.name, new Layer(layer.name, layer.displayName, layer.color))
+		}
+
+		/* Load all blocks on the first pass. */
+		for (const batch of scene.batches) {
+			if (batch.key.blockName !== null &&
+				batch.key.geometryType !== BatchingKey.GeometryType.BLOCK_INSTANCE &&
+				batch.key.geometryType !== BatchingKey.GeometryType.POINT_INSTANCE) {
+
+				let block = this.blocks.get(batch.key.blockName)
+				if (!block) {
+					block = new Block()
+					this.blocks.set(batch.key.blockName, block)
+				}
+				block.PushBatch(new VitroBatch(this, scene, batch))
+			}
+		}
+
+		console.log(`DXF scene:
+                     ${scene.batches.length} batches,
+                     ${this.layers.size} layers,
+                     ${this.blocks.size} blocks,
+                     vertices ${scene.vertices.byteLength} B,
+                     indices ${scene.indices.byteLength} B
+                     transforms ${scene.transforms.byteLength} B`);
+
+		for (const layout of scene.layouts) {
+			const space = this.CreateSpace(layout);
+			this.LoadBatches();
+			this.Render();
+			this._Emit("loaded", { space });
+		}
+
+		this.SwitchSpace(scene.layouts[0]);
+
+		if (this.hasMissingChars) {
+			this._Message("Some characters cannot be properly displayed due to missing fonts",
+				MessageLevel.WARN)
+		}
+
+		if (!scene.tileMode) {
+			this.SwitchSpace(scene.layouts[1])
+			return
+		}
+	}
+
+	Render() {
+		if (!this.spaceName)
+			return
+
+		this._EnsureRenderer()
+		const isPaperSpace = !IsModelSpace(this.spaceName)
+		this.renderer.clear()
+		this.renderer.autoClear = false
+		this.renderer.setScissorTest(isPaperSpace)
+
+		const space = this.GetSpace()
+		if (!space || !space.camera || !space.controls)
+			return
+		this.camera = space.camera
+
+		if (this.controls)
+			this.controls.enabled = false
+		this.controls = space.controls
+		this.controls.enabled = true
+
+		let isFirstRenderVieports = false;
+		if (isPaperSpace)//render viewports for current space (layout)
+		{
+			isFirstRenderVieports = this.RenderVieports(space);
+		}
+
+		//render current space entities (viewport borders (for layouts) and etc.)
+		this.renderer.setViewport(0, 0, this.canvasWidth, this.canvasHeight);
+		this.renderer.setScissor(0, 0, this.canvasWidth, this.canvasHeight);
+		this.renderer.render(space.scene, this.camera)
+
+		if (isFirstRenderVieports) {
+			this.DoFakeZoomToRedrawScene()
+		}
+	}
+
+	CreateDxfWorker(workerFactory) {
+		return new VitroDxfWorker(workerFactory ? workerFactory() : null)
+	}
+
+	_LoadBatch(scene, batch) {
+		if (!IsSpace(batch.key.blockName) &&
+			batch.key.geometryType !== BatchingKey.GeometryType.BLOCK_INSTANCE &&
+			batch.key.geometryType !== BatchingKey.GeometryType.POINT_INSTANCE) {
+			/* Block definition. */
+			return
+		}
+		if (batch.key.blockName !== this.spaceName)
+			return;
+		const objects = new VitroBatch(this, scene, batch).CreateObjects()
+
+		const layer = this.layers.get(batch.key.layerName)
+
+		const space = this.GetSpace()
+		for (const obj of objects) {
+			space.scene.add(obj)
+			this._Emit("added", { obj })
+			if (layer) {
+				layer.PushObject(obj)
+			}
+		}
+	}
+
+	OnProgress(phase, size, totalSize) {
+		if (phase !== window.curProgressPhase) {
+			switch (phase) {
+				case "font":
+					window.progressText = "Fetching fonts..."
+					break
+				case "fetch":
+					window.progressText = "Fetching file..."
+					break
+				case "parse":
+					window.progressText = "Parsing file..."
+					break
+				case "prepare":
+					window.progressText = "Preparing rendering data..."
+					break
+			}
+			window.curProgressPhase = phase
+		}
+		if (totalSize === null) {
+			window.progress = -1
+		} else {
+			window.progress = size / totalSize
+		}
+	}
+
+    Emit(eventName, event) {
+		if (eventName == "dxf-added") {
+			this.AddObject(event.detail.obj)
+		}
+		else if (eventName == "dxf-destroyed") {
+			this.Destroy()
+		}
+	}
+
+	SetSize(width, height) {
+		if (!this.camera) {
+			this.camera = this.CreateCamera();
+		}
+
+		super.SetSize(width, height)
+	}
+
+	LoadBatches() {
+		for (const batch of this.scene.batches) {
+			this._LoadBatch(this.scene, batch)
+		}
+	}
+
+	SceneToCanvasCoord(v) {
+		var width = this.canvasWidth, height = this.canvasHeight;
+		var widthHalf = width / 2, heightHalf = height / 2;
+		var pos = v.clone();
+		pos.project(this.camera);
+
+		pos.x = (pos.x + 1) * widthHalf;
+		pos.y = (pos.y + 1) * heightHalf;
+		pos.z = 0;
+		return pos
+	}
+
+	SwitchSpace(layout) {
+		this.Cancel()
+		this.spaceName = layout.space
+		var space = this.GetSpace()
+		if (!space) {
+			space = this.CreateSpace(layout)
+
+			this.LoadBatches()
+			this._Emit("loaded", { space })
+		}
+		this.Render()
+	}
+
+	CreateSpace(layout, camera) {
+		var scene = new three.Scene()
+		if (!camera) {
+			camera = this.CreateCamera();
+		}
+
+		this.camera = camera
+		if (layout.bounds) {
+			this.FitView(layout.bounds.minX - layout.origin.x, layout.bounds.maxX - layout.origin.x,
+				layout.bounds.minY - layout.origin.y, layout.bounds.maxY - layout.origin.y)
+		} else {
+			this._Message("Empty document space", MessageLevel.WARN)
+		}
+		const controls = this.CreateControls()
+
+		const space = { scene: scene, camera: camera, controls: controls, layout: layout }
+		this.spaces.set(layout.space, space)
+		this.spaceName = layout.space
+		return space
+	}
+
+	CreateCamera() {
+		const camera = new three.OrthographicCamera(-1, 1, 1, -1, 0.1, 2);
+		camera.position.z = 1
+		camera.position.x = 0
+		camera.position.y = 0
+		return camera
+	}
+
+	Clear() {
+		this._EnsureRenderer()
+		if (this.worker) {
+			this.worker.Destroy(true)
+			this.worker = null
+		}
+		if (this.controls) {
+			this.controls.dispose()
+			this.controls = null
+		}
+		for (const space of this.spaces.values()) {
+			space.scene.clear()
+		}
+		for (const layer of this.layers.values()) {
+			layer.Dispose()
+		}
+		this.spaces.clear()
+		this.layers.clear()
+		this.blocks.clear()
+		this.materials.each(e => e.material.dispose())
+		this.materials.clear()
+		this.SetView({ x: 0, y: 0 }, 2)
+		this._Emit("cleared")
+		this.Render()
+	}
+
+	DoFakeZoomToRedrawScene() {//todo to refactor
+		let wheelEvent = new WheelEvent('wheel', {
+			deltaY: 1,
+			deltaMode: 0
+		})
+		this.canvas.dispatchEvent(wheelEvent)
+		wheelEvent = new WheelEvent('wheel', {
+			deltaY: -1,
+			deltaMode: 0,
+			position: [0, 0, 0]
+		})
+		this.canvas.dispatchEvent(wheelEvent)
+	}
+
+	RenderVieports(space) {
+		var modelSpace = this.GetSpace("*Model_Space")
+		const modelScene = modelSpace.scene
+		let isFirstRender = false;
+		//create temporary scenes with viewport borders to calculate viewport position and size
+		for (var viewport of space.layout.viewports.values()) {
+			var tmpScene = new three.Scene()
+			const points = [];
+			for (const vertex of viewport.vertices) {
+				points.push(this.TransformVertex(vertex, space));
+			}
+			var geom = new three.BufferGeometry().setFromPoints(points);
+			var line = new three.LineSegments(geom, new three.LineBasicMaterial({ color: 0xff00ff }));
+			tmpScene.add(line);//viewport border
+
+			if (!viewport.camera) {
+				isFirstRender = true;
+				viewport.camera = this.CreateCamera();
+				const center = this.TransformVertex(viewport.viewCenter, modelSpace)
+				center.x += viewport.viewTarget.x
+				center.y += viewport.viewTarget.y
+				center.z += viewport.viewTarget.z
+				const width = viewport.viewHeight * viewport.width / viewport.height
+				this.SetView(center, width, viewport.viewHeight, viewport.camera)
+				viewport.camera.rotation.set(0, 0, -viewport.twist / 180 * Math.PI)
+			}
+			this.renderer.render(tmpScene, viewport.camera)
+
+			//calculate viewport position and size
+			var box = new three.Box3().setFromObject(line)
+			var vmin = this.SceneToCanvasCoord(box.min)
+			var vmax = this.SceneToCanvasCoord(box.max)
+
+			viewport.x = vmin.x
+			viewport.y = vmin.y
+			viewport.width = vmax.x - vmin.x
+			viewport.height = Math.abs(vmax.y - vmin.y)
+		}
+		this.renderer.clear()//clear temporary scenes
+
+		for (var viewport of space.layout.viewports.values()) //render each viewport - clipped modelScene (main scene) using viewport position and size and his camera
+		{
+			if (viewport.camera) {
+				this.renderer.setViewport(viewport.x, viewport.y, viewport.width, viewport.height)
+				this.renderer.setScissor(viewport.x, viewport.y, viewport.width, viewport.height)
+				this.renderer.render(modelScene, viewport.camera)
+			}
+		}
+
+		return isFirstRender
+	}
+
+	GetSpace(name) {
+		name = name || this.spaceName
+		return this.spaces.get(name)
+	}
+
+	GetSpaceByHandle(handle) {
+		for (const space of this.spaces.values()) {
+			if (space.layout.spaceHandle === handle) {
+				return space
+			}
+		}
+		
+		return null
+	}
+
+
+	GetLayoutBySpaceHandle(spaceHandle) {
+		for (const layout of this.scene.layouts) {
+			if (spaceHandle === layout.spaceHandle) {
+				return layout;
+			}
+		}
+		
+		return null
+	}
+
+
+	GetOrigin(layout) {
+		return layout.origin
+	}
+
+	CreateControls() {
+		if (this.controls)
+			this.controls.enabled = false
+		const controls = this.controls = new OrbitControls(this.camera, this.canvas)
+		controls.enableRotate = false
+		controls.mouseButtons = {
+			RIGHT: three.MOUSE.PAN,
+			MIDDLE: three.MOUSE.DOLLY
+		}
+		controls.touches = {
+			ONE: three.TOUCH.PAN,
+			TWO: three.TOUCH.DOLLY_PAN
+		}
+		controls.zoomSpeed = 3
+		controls.mouseZoomSpeedFactor = 0.05
+		controls.target = new three.Vector3(this.camera.position.x, this.camera.position.y, 0)
+		controls.addEventListener("change", () => {
+			this._Emit("viewChanged")
+			this.Render()
+		})
+		controls.update()
+		return controls
+	}
+
+	SetView(center, width, height = null, camera = null) {
+		const cam = camera ? camera : this.camera
+		if (!cam) {
+			return;
+		}
+		if (!height) {
+			const aspect = this.canvasWidth / this.canvasHeight
+			height = width / aspect
+		}
+		cam.left = -width / 2
+		cam.right = width / 2
+		cam.top = height / 2
+		cam.bottom = -height / 2
+		cam.zoom = 1
+		cam.position.set(center.x, center.y, 1)
+		cam.rotation.set(0, 0, 0)
+		cam.updateMatrix()
+		cam.updateProjectionMatrix()
+		this._Emit("viewChanged")
+	}
+
+	TransformVertex(v, space) {
+		return new three.Vector3(v.x - space.layout.origin.x, v.y - space.layout.origin.y, v.z)
+	}
+
+	SelectObj(event) {
+		var raycaster = new three.Raycaster();
+		raycaster.params.Line.threshold = 15;
+
+		var mouse = new three.Vector2();
+		var e = event.detail.domEvent
+		const canvasRect = event.target.getBoundingClientRect()
+		const canvasCoord = { x: e.clientX - canvasRect.left, y: e.clientY - canvasRect.top }
+		mouse.x = (canvasCoord.x / this.renderer.domElement.clientWidth) * 2 - 1;
+		mouse.y = - (canvasCoord.y / this.renderer.domElement.clientHeight) * 2 + 1;
+		mouse.z = 0;
+
+		raycaster.setFromCamera(mouse, this.camera);
+		var intersects = raycaster.intersectObjects(this.objects, true);
+		if (intersects && intersects.length > 0) {
+			let selectedIndex = 0
+			if (intersects[selectedIndex].object.name) {
+				const name = intersects[selectedIndex].object.name
+				const objectList = this.objectMap.get(name)
+				if (objectList) {
+					this.SetSelected(objectList)
+					return name
+				}
+			}
+		}
+		return null
+	}
+
+	GetSelectHandle() {
+		if (this.selectedObjects && this.selectedObjects.length > 0) {
+			return selectedObjects[0].name
+		}
+		return null
+	}
+
+	HighlightColor(color, factor = 0.3) {
+		color.r += factor;
+		if (color.r > 1)
+			color.r -= 1;
+		if (color.r < 0)
+			color.r += 1;
+		color.g += factor;
+		if (color.g > 1)
+			color.g -= 1;
+		if (color.g < 0)
+			color.g += 1;
+		color.b += factor;
+		if (color.b > 1)
+			color.b -= 1;
+		if (color.b < 0)
+			color.b += 1;
+	}
+
+
+	SetSelected(objectList) {
+		if (this.selectedObjects && this.selectedObjects.length > 0) {
+			for (const object of this.selectedObjects) {
+				const drawable = this.GetDrawable(object.name);
+				if (!(drawable && drawable.drawMode === DrawMode.ANNOTATIONS)) {
+					if (object.material.uniforms) {
+						object.material.uniforms.color.value = object.color;
+					}
+					else {
+						object.material.color = object.color;
+					}
+				}
+			}
+		}
+
+		this.selectedObjects = objectList
+		if (this.selectedObjects && this.selectedObjects.length > 0) {
+			for (const object of this.selectedObjects) {
+				const drawable = this.GetDrawable(object.name);
+				if (!(drawable && drawable.drawMode === DrawMode.ANNOTATIONS)) {
+					let mat_wire = object.material.clone();
+					if (object.material.uniforms) {
+						object.color = object.material.uniforms.color.value;
+						this.HighlightColor(mat_wire.uniforms.color.value);
+					}
+					else {
+						object.color = object.material.color;
+						this.HighlightColor(mat_wire.color);
+					}
+					object.material = mat_wire;
+				}
+			}
+		}
+		this.Render()
+		const id = this.GetSelectedHandle()
+		this._Emit("selected", { id })
+	}
+
+	GetSelectedHandle() {
+		if (this.selectedObjects && this.selectedObjects.length > 0) {
+			return this.selectedObjects[0].name
+		}
+
+		return null
+	}
+
+	AddObject(obj) {
+		this.objects.push(obj)
+		const name = obj.name
+		if (name) {
+			let objectList = this.objectMap.get(name)
+			if (!objectList) {
+				objectList = []
+				this.objectMap.set(name, objectList)
+			}
+			objectList.push(obj)
+		}
+	}
+
+	ZoomTo(input, offset) {
+		const object = Array.isArray(input) ? input[0] : input //todo to calc boundingBox of all objects
+		offset = offset || 1.25;
+
+		const boundingBox = new three.Box3();
+		// get bounding box of object - this will be used to setup controls and camera
+		boundingBox.setFromObject(object);
+
+		const center = boundingBox.getCenter(new three.Vector3());
+		const size = boundingBox.getSize(new three.Vector3());
+		this.FitView(boundingBox.min.x, boundingBox.max.x, boundingBox.min.y, boundingBox.max.y)
+		this.controls.target.copy(center);
+
+		this.controls.update()
+	}
+
+	ZoomToDrawable(spaceHandle, id) {
+		const space = this.GetSpaceByHandle(spaceHandle)
+		var layout = null
+		if (!space) {//space has not been loaded yet
+			layout = this.GetLayoutBySpaceHandle(spaceHandle)
+		}
+		else {
+			layout = space.layout
+		}
+		if (layout) {
+			if (this.spaceName != layout.space) {
+				this.SwitchSpace(layout)
+			}
+			const drawable = this.GetDrawable(id)
+			if (drawable?.drawMode === DrawMode.ANNOTATIONS) {//this is annotation
+				this.ZoomTo(drawable.objects)
+				return drawable
+			}
+		}
+		return null
+	}
+
+	RemoveFromScene(scene, objects) {
+		for (const object of objects) {
+			scene.remove(object);
+		}
+	}
+
+	GetDrawable(id) {
+		for (const drawable of this.drawables) {
+			if (drawable.id == id) {
+				return drawable
+			}
+		}
+		return null
+	}
+
+	VisibleDrawable(drawMode, visible) {
+		var isDirty = false
+		for (const drawable of this.drawables) {
+			if (drawable.drawMode === drawMode) {
+				for (const object of drawable.objects) {
+					object.visible = visible;
+					isDirty = true
+				}
+			}
+		}
+		if (isDirty) {
+			this.Render()
+		}
+	}
+
+	DeleteDrawable(id) {
+		const drawable = this.GetDrawable(id)
+		if (drawable) {
+			const space = drawable.space
+			this.RemoveFromScene(space.scene, drawable.objects)
+			const index = this.drawables.indexOf(drawable);
+
+			if (index !== - 1) {
+				this.drawables.splice(index, 1)
+			}
+			const currentSpace = this.GetSpace()
+			if (space === currentSpace) {
+				this.Render()
+			}
+		}
+	}
+
+	Cancel() {
+		this.SetSelected(null)
+		for (const plugin of this.drawablePlugins) {
+			plugin.Cancel()
+		}
+	}
+
+	RegisterDrawablePlugin(plugin) {
+		this.drawablePlugins.push(plugin)
+	}
+
+	OnKeyDown = event => {
+		this.DoKeyDown(event)
+	}
+
+	DoKeyDown(event) {
+		if (event.keyCode == 27) {//ESC
+			this.Cancel()
+		}
+	}
+
+	FindDxfEntity(id) {
+		if (!this.dxf) {
+			return null
+		}
+
+		let entity = this.FindEntityInList(id, this.dxf.entities)
+		if (!entity && this.dxf.blocks) {
+			for (const [, block] of Object.entries(this.dxf.blocks)) {
+				entity = this.FindEntityInList(id, block.entities)
+				if (entity) {
+					break
+				}
+			}
+		}
+
+		return entity
+	}
+
+	FindEntityInList(id, entities) {
+		if (entities) {
+			for (const entity of entities) {
+				if (id === entity.handle) {
+					return entity
+				}
+			}
+		}
+
+		return null
+	}
+
+	ZoomIn(scale) {
+		const centerX = this.canvasWidth / 2 * window.devicePixelRatio;
+		const centerY = this.canvasHeight / 2 * window.devicePixelRatio;
+		scale = scale ? scale : Math.pow(0.95, 3);
+		this.controls.zoomIn(scale, new three.Vector2(centerX, centerY));
+		this.controls.update();
+	}
+
+	ZoomOut(scale) {
+		const centerX = this.canvasWidth / 2 * window.devicePixelRatio;
+		const centerY = this.canvasHeight / 2 * window.devicePixelRatio;
+		scale = scale ? scale : Math.pow(0.95, 3);
+		this.controls.zoomOut(scale, new three.Vector2(centerX, centerY));
+		this.controls.update();
+	}
+}
+export class Drawable {
+    constructor(options) {
+
+        this.viewer = options.viewer
+        this.drawMode = null
+        this.idPrefix = ""
+    }
+
+    Create() {
+        this.viewer.Cancel()
+
+        this.objects = []
+        this.viewer.drawableSpace = this.viewer.GetSpace()
+
+        this.id = this.CreateId()
+        this.viewer.drawMode = this.drawMode
+        this.viewer.Subscribe("pointerdown", this.OnPointerDown)
+        this.viewer.Subscribe("mousemove", this.OnMouseMove)
+    }
+
+    Add(spaceHandle, id) {
+        const space = this.viewer.GetSpaceByHandle(spaceHandle)
+        if (!space) {
+            return false
+        }
+        this.viewer.drawableSpace = space
+        this.objects = []
+        this.id = id || this.CreateId()
+        this.viewer.drawMode = this.drawMode
+        return true
+    }
+
+    Cancel() {
+        this.CancelDraw()
+        this.Finish()
+    }
+
+
+    OnPointerDown = event => {
+        if (event.detail.domEvent.button == 0) {
+            this.DoLeftPointerDown(event)
+        }
+    }
+
+    DoLeftPointerDown(event) {
+        if (!this.IsValidDrawMode()) {
+            return false
+        }
+
+        return true
+    }
+
+    OnMouseMove = event => {
+        this.DoMouseMove(event)
+    }
+
+    DoMouseMove(event) {
+    }
+
+    CancelDraw(){
+        if (this.RemoveCancelledObjects()) {
+            const drawMode = this.drawMode
+            this.viewer._Emit("drawCancelled", { drawMode })
+        }
+        if (this.IsValidDrawMode()) {
+            this.viewer.drawMode = null
+        }
+    }
+
+    RemoveCancelledObjects() {
+        if (!this.IsValidDrawMode()) {
+            return false
+        }
+        if (!this.objects || this.objects.length == 0) {
+            return false
+        }
+
+        this.viewer.RemoveFromScene(this.viewer.drawableSpace.scene, this.objects)
+        this.objects = []
+
+        this.RenderIfNeeded()
+        this.viewer.drawableSpace = null
+
+        return true
+    }
+
+    RenderIfNeeded() {
+        const currentSpace = this.viewer.GetSpace()
+        if (this.viewer.drawableSpace == currentSpace) {
+            this.viewer.Render()
+        }
+    }
+
+    CreateId() {
+        const uuid = self.crypto.randomUUID();
+        return this.idPrefix + uuid
+    }
+
+    IsValidDrawMode() {
+        return this.viewer.drawMode === this.drawMode
+    }
+
+
+    Finish() {
+        this.viewer.Unsubscribe("mousemove", this.OnMouseMove)
+        this.viewer.Unsubscribe("pointerdown", this.OnPointerDown)
+        document.removeEventListener("keydown", this.OnKeyDown)
+        if (this.IsValidDrawMode()) {
+            this.viewer.drawMode = null
+        }
+        this.objects = []
+    }
+
+    CreateVector(pt) {
+        return new three.Vector3(pt.x, pt.y, 0)
+    }
+
+    AddDrawableObjectToScene(object) {
+        const space = this.viewer.GetSpace()
+        space.scene.add(object);
+        this.objects.push(object)
+    }
+
+    AddToAllViewerObjects() {
+        for (const object of this.objects) {
+            this.viewer.AddObject(object)
+        }
+    }
+
+    AddAndFinish(drawable) {
+        this.viewer.drawables.push(drawable)
+        this.viewer._Emit("drawableCreated", drawable)
+
+        this.AddToAllViewerObjects()
+        this.Finish()
+    }
+}
+
+const ID_PREFIX = "anno_"
+
+export class Annotation extends Drawable {
+    constructor(options) {
+
+        super(options);
+        this.idPrefix = ID_PREFIX;
+        this.color = options.color;
+        this.drawMode = DrawMode.ANNOTATIONS;
+        this.labelRenderer = this.InitLabelRenderer();
+    }
+
+    Create() {
+        super.Create();
+        this.FirstPoint = this.SecondPoint = null;
+    }
+
+    Add(spaceHandle, firstPoint, secondPoint, id, color) {
+        if (!super.Add(spaceHandle, id)) {
+            return null;
+        }
+
+        this.FirstPoint = firstPoint;
+        this.SecondPoint = secondPoint;
+        this.color = color;
+        return this.UpdateAndAdd();
+    }
+
+    DoLeftPointerDown(event) {
+        if (!super.DoLeftPointerDown()) {
+            return;
+        }
+
+        if (!this.FirstPoint) {
+            this.FirstPoint = this.SecondPoint = this.CreateVector(event.detail.position);
+            this.Update();
+        }
+        else {
+            this.SecondPoint = this.CreateVector(event.detail.position);
+            this.UpdateAndAdd();
+        }
+    }
+
+    UpdateAndAdd() {
+        this.Update();
+
+        const firstPoint = this.FirstPoint;
+        const secondPoint = this.SecondPoint;
+        const space = this.viewer.drawableSpace;
+        const id = this.id;
+        const objects = this.objects;
+        const drawMode = this.drawMode;
+        var annotation = { drawMode, id, firstPoint, secondPoint, space, objects };
+
+        this.AddAndFinish(annotation);
+        return annotation;
+    }
+
+    DoMouseMove(event) {
+        this.SecondPoint = this.CreateVector(event.detail.position);
+        this.Update();
+    }
+
+    Update() {
+        if (!this.FirstPoint || !this.SecondPoint) {
+            return
+        }
+        const points = [];
+        points.push(this.FirstPoint)
+        let pt = this.FirstPoint.clone()
+        pt.x = this.SecondPoint.x
+        points.push(pt)
+        points.push(pt)
+        points.push(this.SecondPoint)
+        points.push(this.SecondPoint)
+        pt = this.FirstPoint.clone()
+        pt.y = this.SecondPoint.y
+        points.push(pt)
+        points.push(pt)
+        points.push(this.FirstPoint)
+        var geom = new three.BufferGeometry().setFromPoints(points);
+        if (this.objects.length > 0) {
+            this.objects[0].geometry.dispose()
+            this.objects[0].geometry = geom
+        }
+        else {
+            const material = new three.LineBasicMaterial({ color: this.color })
+            const object = new three.LineSegments(geom, material);
+            object.name = this.id
+
+            if (!this.id.includes(this.idPrefix)) {
+                this.InitLabel(object);
+            }
+
+            this.AddDrawableObjectToScene(object)
+        }
+
+        this.RenderIfNeeded()
+    }
+
+    InitLabel(annotation) {
+        const id = this.id;
+        const labelDiv = document.createElement('div');
+        labelDiv.className = 'vitro-marker-label';
+        labelDiv.textContent = id;
+        labelDiv.style.backgroundColor = this.color;
+        labelDiv.style.backgroundColor = this.color;
+        if (this.onLabelClick) {
+            labelDiv.onclick = () => this.onLabelClick(id);
+        }
+
+        const label = new CSS2DObject(labelDiv);
+        label.position.copy(this.FirstPoint);
+        label.center.set(0.5, 0.5);
+        annotation.add(label);
+    }
+
+    UpdateLabelPosition() {
+        if (this.labelRenderer && window.dxfViewer.GetSpace()) {
+            this.labelRenderer.render(window.dxfViewer.GetSpace().scene, window.dxfViewer.GetSpace().camera);
+        }
+    }
+
+    RemoveLabels() {
+        if (this.labelRenderer) {
+            $(this.labelRenderer.domElement).html(null);
+        }
+    }
+
+    InitLabelRenderer() {
+        const labelRenderer = new CSS2DRenderer();
+        labelRenderer.setSize($('#canvasContainer').innerWidth(), $('#canvasContainer').innerHeight());
+        labelRenderer.domElement.style.position = 'absolute';
+        labelRenderer.domElement.style.top = '0px';
+        labelRenderer.domElement.style.pointerEvents = 'none';
+        document.getElementById('canvasContainer').appendChild(labelRenderer.domElement);
+
+        return labelRenderer;
+    }
+
+    UpdateLabelRendererSize() {
+        this.labelRenderer.setSize(this.viewer.canvasWidth, this.viewer.canvasHeight);
+    }
+}
+
+/** Fetches and parses DXF file. */
+export class VitroDxfFetcher extends DxfFetcher {
+
+    async SyncFetch() {
+        //const response = fetch(this.url)
+        const dxf = await SyncFetchDxf(this.url)
+        /*
+        const reader = response.body.getReader()
+        //XXX streaming parsing is not supported in dxf-parser for now (its parseStream() method
+        // just accumulates chunks in a string buffer before parsing. Fix it later.
+        let buffer = ""
+        let decoder = new TextDecoder("utf-8")
+        while(true) {
+            const {done, value} = reader.read()
+            if (done) {
+                buffer += decoder.decode(new ArrayBuffer(0), {stream: false})
+                break
+            }
+            buffer += decoder.decode(value, {stream: true})
+         }
+         */
+        const parser = new DxfParser()
+        return parser.parseSync(buffer)
+    }
+
+    async SyncFetchDxf(url) {
+        const response = await fetch(url)
+        const txt = await response.json()
+        return txt
+    }
+}
+const INDEXED_CHUNK_SIZE = 0x10000
+
+export class VitroRenderBatch extends RenderBatch {
+    constructor(key) {
+        super(key)
+    }
+
+    PushVertex(v) {
+        const idx = this.vertices.Push(v.x)
+        this.vertices.Push(v.y)
+        this.vertices.Push(0)//vitro
+        return idx
+    }
+
+    PushChunk(verticesCount, entity = null) {
+        if (verticesCount > INDEXED_CHUNK_SIZE) {
+            throw new Error("Vertices count exceeds chunk limit: " + verticesCount)
+        }
+        /* Find suitable chunk with minimal remaining space to fill them as fully as possible. */
+        let curChunk = null
+        //vitro - always create new chunk
+        let curSpace = 0
+        for (const chunk of this.chunks) {
+            const space = INDEXED_CHUNK_SIZE - chunk.vertices.GetSize() / 3 //vitro 3 instead 2
+            if (space < verticesCount) {
+                continue
+            }
+            if (entity && entity.handle && chunk.handle != entity.handle) {//vitro
+                continue
+            }
+            if (curChunk === null || space < curSpace) {
+                curChunk = chunk
+                curSpace = space
+            }
+        }
+
+        if (curChunk === null) {
+            curChunk = this._NewChunk(verticesCount)
+            if (entity && entity.handle) {//vitro
+                curChunk.handle = entity.handle
+            }
+        }
+        return new IndexedChunkWriter(curChunk, verticesCount)
+    }
+
+    /** Merge other batch into this one. They should have the same geometry type. Instanced batches
+     * are disallowed.
+     *
+     * @param batch {RenderBatch}
+     * @param transform {?Matrix3} Optional transform to apply for merged vertices.
+     */
+    Merge(batch, transform = null, entity = null) {//vitro add entity
+        if (this.key.geometryType !== batch.key.geometryType) {
+            throw new Error("Rendering batch merging geometry type mismatch: " +
+                `${this.key.geometryType} !== ${batch.key.geometryType}`)
+        }
+        if (this.key.IsInstanced()) {
+            throw new Error("Attempted to merge instanced batch")
+        }
+        if (this.key.IsIndexed()) {
+            /* Merge chunks. */
+            for (const chunk of batch.chunks) {
+                const verticesSize = chunk.vertices.size
+                const chunkWriter = this.PushChunk(verticesSize / 3, entity)//vitro 2 => 3
+                for (let i = 0; i < verticesSize; i += 3) {//vitro 2 => 3
+                    const v = new Vector2(chunk.vertices.Get(i), chunk.vertices.Get(i + 1))
+                    if (transform) {
+                        v.applyMatrix3(transform)
+                    }
+                    chunkWriter.PushVertex(v)
+                }
+                const numIndices = chunk.indices.size
+                for (let i = 0; i < numIndices; i++) {
+                    chunkWriter.PushIndex(chunk.indices.Get(i))
+                }
+                chunkWriter.Finish()
+            }
+        } else {
+            const n = batch.vertices.size
+            for (let i = 0; i < n; i += 3) {//vitro 2 => 3
+                const v = new Vector2(batch.vertices.Get(i), batch.vertices.Get(i + 1))
+                if (transform) {
+                    v.applyMatrix3(transform)
+                }
+                this.PushVertex(v)
+            }
+        }
+    }
+
+    _NewChunk(initialCapacity) {
+        const chunk = new IndexedChunk(initialCapacity)
+        this.chunks.push(chunk)
+        return chunk
+    }
+}
+
+class IndexedChunk {
+    constructor(initialCapacity) {
+        if (initialCapacity < 16) {
+            initialCapacity = 16
+        }
+        /* Average two indices per vertex. */
+        this.indices = new DynamicBuffer(NativeType.UINT16, initialCapacity * 2)
+        /* Two components per vertex. */
+        this.vertices = new DynamicBuffer(NativeType.FLOAT32, initialCapacity * 2)
+    }
+
+    Serialize(buffers) {
+        const chunk = {}
+        {
+            const size = this.vertices.GetSize()
+            chunk.verticesOffset = buffers.verticesOffset
+            chunk.verticesSize = size
+            this.vertices.CopyTo(buffers.vertices, buffers.verticesOffset)
+            buffers.verticesOffset += size
+        }
+        {
+            const size = this.indices.GetSize()
+            chunk.indicesOffset = buffers.indicesOffset
+            chunk.indicesSize = size
+            this.indices.CopyTo(buffers.indices, buffers.indicesOffset)
+            buffers.indicesOffset += size
+        }
+        chunk.handle = this.handle
+        return chunk
+    }
+}
+
+
+class IndexedChunkWriter {
+    constructor(chunk, verticesCount) {
+        this.chunk = chunk
+        this.verticesCount = verticesCount
+        this.verticesOffset = this.chunk.vertices.GetSize() / 3 //vitro 2 => 3
+        this.numVerticesPushed = 0
+    }
+
+    PushVertex(v) {
+        if (this.numVerticesPushed === this.verticesCount) {
+            throw new Error()
+        }
+        this.chunk.vertices.Push(v.x)
+        this.chunk.vertices.Push(v.y)
+        this.chunk.vertices.Push(0)//vitro
+        this.numVerticesPushed++
+    }
+
+    PushIndex(idx) {
+        if (idx < 0 || idx >= this.verticesCount) {
+            throw new Error(`Index out of range: ${idx}/${this.verticesCount}`)
+        }
+        this.chunk.indices.Push(idx + this.verticesOffset)
+    }
+
+    Finish() {
+        if (this.numVerticesPushed !== this.verticesCount) {
+            throw new Error(`Not all vertices pushed: ${this.numVerticesPushed}/${this.verticesCount}`)
+        }
+    }
+}window.initDxfViewer = function(context) {var labelDlgAddNote = 'Add Note';
+var labelExpand = 'Развернуть';
+var labelCollapse = 'Свернуть';
+var labelBtnDelete = 'Удалить';
+function initPropertySetsResizable() {
+    $('#propInspector').resizable({
+        handles: "w",
+        minWidth: 150
+    });
+}
+
+
+function showPropertyInspector(pickResult) {
+    // var objectId = pickResult.entity.id;
+    // TODO - only for Test
+    var objectId = '0K1IpmnK10iuhGzDjMLoJt';
+
+    var metaObject = customMeta[objectId];
+
+    if(metaObject) {
+        setPropertySets(metaObject);
+    } else {
+        console.log('No object meta-data');
+        return false;
+    }
+}
+
+function setPropertySets(metaObject) {
+    const html = [];
+    var propertySets = metaObject.propertySets;
+
+    html.push('<div class="element-attributes">');
+    if (!metaObject) {
+        html.push('<p class="subsubtitle">No object selected</p>');
+    } else {
+        html.push('<table class="xeokit-table">');
+        html.push('<tr><td class="td1">Name:</td><td class="td2">' + metaObject.name + '</td></tr>');
+        if (metaObject.type) {
+            html.push('<tr><td class="td1">Class:</td><td class="td2">' + metaObject.type + '</td></tr>');
+        }
+        html.push('<tr><td class="td1">UUID:</td><td class="td2">' + metaObject.id + '</td></tr>');
+        html.push('</table>');
+        if (!propertySets || propertySets.length === 0) {
+            html.push('<p class="subtitle xeokit-no-prop-set-warning">No properties sets found for this object.</p>');
+            html.push('</div>');
+        } else {
+            html.push('</div>');
+            html.push('<div class="xeokit-accordion">');
+            for (let i = 0, len = propertySets.length; i < len; i++) {
+                const propertySet = propertySets[i];
+                const properties = propertySet.properties || [];
+                if (properties.length > 0) {
+                    html.push('<div class="xeokit-accordion-container">' +
+                        '<h3><span>'+ (propertySet.name ? propertySet.name : propertySet.propertySetName) + '</span></h3>' +
+                        '<div class="xeokit-accordion-panel">' +
+                        '<table class="xeokit-table"><tbody>'
+                    );
+                    for (let i = 0, len = properties.length; i < len; i++) {
+                        const property = properties[i];
+                        html.push('<tr><td class="td1">' + (property.name || property.Name || property.label) + ':</td><td class="td2">' + (property.value || property.Value) + '</td></tr>');
+                    }
+                    html.push('</tbody></table>'+
+                        '</div>'+
+                        '</div>');
+                } else {
+                    html.push('<p class="subtitle">No properties sets found.</p>');
+                }
+            }
+            html.push('</div>');
+        }
+    }
+    $('#propInspector .prop-inspector-content')[0].innerHTML = html.join("");
+    $('.xeokit-accordion-container').accordion({
+        collapsible: true,
+        heightStyle: "content"
+    });
+    $('#propInspector').show();
+
+    // Hide all right-side positioned panels
+    $('.sidebar').hide();
+    $('#btnToggleSidebarNotes').removeClass('toggled');
+}
+
+function bindPropInspectorClose() {
+    $('.prop-inspector-close').on('click', function() {
+        $('#propInspector').hide();
+    })
+}
+//------------------------------------------------------------------------------------------------------------------
+// Sidebar Notes
+//------------------------------------------------------------------------------------------------------------------
+
+function initSidebarNotes() {
+    clearSidebarNotes();
+    createSidebarNotes();
+}
+
+function clearSidebarNotes() {
+    $('.sidebar-note-wrap').remove();
+}
+
+function createSidebarNotes() {
+    $.each(notes, function(index, note) {
+        var noteElm = createSidebarNotesItem(note);
+        $('.sidebar-content').append(noteElm);
+    });
+}
+
+function createSidebarNotesItem(noteData) {
+    var noteWrap = $('<div class="sidebar-note-wrap" id="noteWrap-'+noteData.id+'" />');
+
+    var noteHeader = createSidebarNotesItemHeader(noteData);
+    var noteBody = createSidebarNotesItemBody(noteData);
+
+    noteWrap.append(noteHeader);
+    noteWrap.append(noteBody);
+
+    return noteWrap;
+}
+
+function createSidebarNotesItemBody(noteData) {
+    var noteContent = noteData;
+
+    var noteBody = $('<div class="sidebar-note-body" />');
+    var noteTextarea = $('<textarea data-id="' + noteData.id + '"></textarea>');
+    bindTextareaHandlers(noteTextarea);
+    noteTextarea.val(noteContent.values.description);
+
+    var expandBtnWrap = $('<div class="sidebar-note-expand-wrap"/>');
+    var expandBtnWrapInner = $('<div class="sidebar-note-expand-btn collapsed"/>');
+    var expandBtnExpand = $('<a class="btn-expand">' + labelExpand + '</a>');
+    var expandBtnCollapse = $('<a class="btn-collapse">'+ labelCollapse + '</a>');
+    bindOnClickTextareaExpand(expandBtnExpand);
+    bindOnClickTextareaCollapse(expandBtnCollapse);
+    expandBtnWrapInner.append(expandBtnExpand);
+    expandBtnWrapInner.append(expandBtnCollapse);
+
+
+    expandBtnWrap.append(expandBtnWrapInner);
+    noteBody.append(noteTextarea);
+    noteBody.append(expandBtnWrap);
+
+    if(noteContent.values.imageSrc) {
+        var noteImage = $('<div class="sidebar-note-img-wrap"><img src="' + noteContent.values.imageSrc + '" /><div>');
+        noteBody.append(noteImage);
+    }
+
+    return noteBody;
+}
+
+function bindTextareaHandlers(textarea) {
+    textarea.on('focus', function() {
+        doTextareaOnFocus($(this));
+    });
+
+    textarea.on('change', function() {
+        doNoteOnChange($(this));
+    });
+}
+
+function doTextareaOnFocus(textarea) {
+    $('.sidebar-note-wrap').removeClass('active');
+    var wrap = textarea.closest('.sidebar-note-wrap');
+    wrap.addClass('active');
+    autosize(textarea);
+    wrap.find('.sidebar-note-expand-btn').removeClass('collapsed');
+}
+
+function doNoteOnChange(textarea) {
+    // TODO - Ajax -> save data
+
+    var noteId = textarea.data('id');
+    var noteDesc = textarea.val();
+    var date = new Date(Date.now()).toLocaleDateString("ru-RU"); // TODO
+    var user = '';  // TODO
+
+    $.each(notes, function(index, val) {
+        if(val.id == noteId) {
+            // notes[index]['values']['glyph'] = noteGlyph; // ?
+            // notes[index]['values']['title'] = noteTitle; // ?
+            // notes[index]['creator'] = user;
+            notes[index]['values']['description'] = noteDesc;
+            notes[index]['date'] = date;
+        }
+    });
+
+    alert('noteId=' + noteId + ' | Data changed: \r\n' + noteDesc);
+}
+
+function bindOnClickTextareaExpand(btnElm) {
+    btnElm.on('click', function() {
+        doTextareaExpand(btnElm);
+        $(this).closest('.sidebar-note-expand-btn').removeClass('collapsed');
+    });
+}
+
+function doTextareaExpand(btnElm) {
+    var textarea = btnElm.closest('.sidebar-note-body').find('textarea');
+    autosize(textarea);
+}
+
+function bindOnClickTextareaCollapse(btnElm) {
+    btnElm.on('click', function() {
+        doTextareaCollapse(btnElm);
+        $(this).closest('.sidebar-note-expand-btn').addClass('collapsed');
+    });
+}
+
+function doTextareaCollapse(btnElm) {
+    var textarea = btnElm.closest('.sidebar-note-body').find('textarea');
+    autosize.destroy(textarea);
+}
+
+function createSidebarNotesItemHeader(noteData) {
+    var noteContent = noteData;
+
+    var noteHeader = $('<div class="sidebar-note-header" />');
+    var noteName = $('<div class="sidebar-note-name" />');
+    noteName.html(noteContent.creator);
+    var noteDate = $('<div class="sidebar-note-date" />');
+    noteDate.html(noteContent.date);
+
+    var noteTitle = $('<div class="sidebar-note-title">' + noteData.values.glyph + ' - ' + noteData.values.title + '</div>'); // TODO
+    noteTitle.on('click', function() {
+        goToNoteMarker($(this));
+    });
+
+    var deleteBtn = $('<a title="' + labelBtnDelete + '" class="sidebar-note-btn-delete"><span>' + labelBtnDelete + '</span></a>');
+    deleteBtn.data('id', noteData.id);
+    bindSidebarNotesBtnDelete(deleteBtn);
+
+    noteHeader.append(noteName);
+    noteHeader.append(noteDate);
+    noteHeader.append(noteTitle);
+    noteHeader.append(deleteBtn);
+
+    return noteHeader;
+}
+
+// TODO
+function goToNoteMarker(noteTitle) {
+    var sidebarNoteWrap = noteTitle.closest('.sidebar-note-wrap');
+    var sidebarNoteWrapId = sidebarNoteWrap.attr('id');
+    var noteId = sidebarNoteWrapId.replace("noteWrap-", "");
+    //console.log('noteId', noteId);
+
+    // TODO - go to marker
+    // Highlight annotation object
+    // Go to annotation...
+    // ...
+    alert('Go to note ' + noteId);
+}
+
+function bindSidebarNotesBtnDelete(btn) {
+    btn.on('click', function(e) {
+        $(document).trigger('deleteNote', [$(this)]);
+    });
+}
+
+function bindDeleteNoteEventHandler() {
+    $(document).on('deleteNote', function(e, item) {
+        var id = item.attr('id') ? item.attr('id') : item.data('id');
+
+        // TODO -> Ajax -> send data to server
+        // ...
+        // on success -> deleteNote
+
+        deleteNote(id);
+    });
+}
+
+// TODO
+function deleteNote(id) {
+    notes = jQuery.grep(notes, function(elm, index) {
+        return (elm.id != id);
+    });
+
+    // TODO
+    // Delete annotation
+    // ...
+    alert('Delete annotation ' + id);
+
+
+    if($('.sidebar').is(':visible')) {
+        initSidebarNotes();
+    }
+}
+
+function fixNotesTextareaBlur() {
+    $('#xeokitCanvas').on('click', function() {
+        //console.log('click - xeokitCanvas');
+        if($('.sidebar-content').is(':visible')) {
+            var textareas = $('.sidebar-content').find('textarea');
+            if(textareas.length) {
+                textareas.trigger('blur');
+            }
+        }
+    });
+}
+
+function highlightSidebarNote(noteId) {
+    $('.sidebar-note-wrap').removeClass('active');
+    var notetWrap = $('#noteWrap-' + noteId);
+    notetWrap.addClass('active');
+    autosize(notetWrap.find('textarea'));
+    notetWrap.find('.sidebar-note-expand-btn').removeClass('collapsed');
+    var sidebarContent = $('.sidebar-content');
+    var sidebarOffsetTop = parseInt(sidebarContent[0].offsetTop);
+    var sidebarScrollTop = parseInt(sidebarContent[0].scrollTop);
+    sidebarContent.animate({
+        scrollTop: notetWrap.position().top - sidebarOffsetTop + sidebarScrollTop
+    }, 1000);
+}
+
+function showNoteDesc(noteId) {
+    if(!$('.sidebar').is(':visible')) {
+        $('#btnToggleSidebarNotes').addClass('toggled');
+        initSidebarNotes();
+        expandSidebarNotes();
+    }
+    highlightSidebarNote(noteId);
+}
+//------------------------------------------------------------------------------------------------------------------
+// Toolbar
+//------------------------------------------------------------------------------------------------------------------
+
+// btnToggleNotes
+function bindToggleNotes() {
+    $(document).on('click', '#btnToggleNotes', function() {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            showAnnotationMarkers();
+        } else {
+            hideAnnotationMarkers();
+        }
+    });
+}
+
+function hideAnnotationMarkers() {
+    $('body').addClass('hide-annotations');
+    $('.vitro-marker-label').hide();
+    window.dxfViewer.VisibleDrawable(DrawMode.ANNOTATIONS, false);
+}
+
+function showAnnotationMarkers() {
+    $('body').removeClass('hide-annotations');
+    $('.vitro-marker-label').show()
+    window.dxfViewer.VisibleDrawable(DrawMode.ANNOTATIONS, true);
+}
+
+// btnToggleSidebarNotes
+function bindBtnToggleSidebarNotes() {
+    $(document).on('click', '#btnToggleSidebarNotes', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            if(!$('.sidebar').is(':visible')) {
+                expandSidebarNotes();
+                $('body').addClass('vitro-sidebar-notes-expanded');
+            }
+        } else {
+            collapseSidebarNotes();
+        }
+        updateCanvasContainerWidth();
+    });
+}
+
+function expandSidebarNotes() {
+    context.initIssueList();
+
+    if ($('#btnCreateNotes').hasClass('toggled')) {
+        $('#btnCreateNotes').removeClass('toggled');
+        removeNewAnnotations();
+        window.dxfViewer.Cancel();
+    }
+
+    collapseSidebarIssueDetail();
+
+    var body = $('body');
+    var bodyScrollWidth = body[0].offsetWidth - body[0].scrollWidth;
+    var vScrollWidth = bodyScrollWidth ? bodyScrollWidth : 0;
+    $('.sidebar').css('right', (vScrollWidth + 'px')).show("slide", { direction: "right" }, 200);
+    body.addClass('vitro-sidebar-notes-expanded');
+}
+
+function bindSidebarNotesClose() {
+    $('.sidebar-close').on('click', function() {
+        collapseSidebarNotes();
+        updateCanvasContainerWidth();
+    });
+}
+
+// btnToggleSidebarTreeView
+function bindBtnToggleSidebarTreeView() {
+    $(document).on('click', '#btnToggleSidebarTreeView', function() {
+        $(this).toggleClass('toggled');
+
+        if($(this).hasClass('toggled')) {
+            $('body').addClass('treeview-expanded');
+            $('#treeViewContainerWrap').show();
+        } else {
+            $('#treeViewContainerWrap').hide();
+            $('body').removeClass('treeview-expanded');
+        }
+    });
+}
+
+// btnCreateNotes
+function bindBtnToggleCreateNotes() {
+    $(document).on('click', '#btnCreateNotes', function () {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            showAnnotationMarkers();
+            $('#btnToggleNotes').addClass('toggled');
+            collapseSidebarNotes();
+            anno.Create();
+        } else {
+            collapseSidebarIssueDetail();
+            removeNewAnnotations();
+            window.dxfViewer.Cancel();
+        }
+        updateCanvasContainerWidth();
+    });
+}
+
+function collapseSidebarNotes() {
+    $('.sidebar').hide();
+    $('body').removeClass('vitro-sidebar-notes-expanded');
+    $('#btnToggleSidebarNotes').removeClass('toggled');
+}
+
+function collapseSidebarIssueDetail() {
+    $('#issueDetail').hide();
+    $('body').removeClass('vitro-sidebar-notes-expanded');
+}
+
+function expandSidebarIssueDetail() {
+    $('#issueDetail').show();
+    $('body').addClass('vitro-sidebar-notes-expanded');
+}
+
+// btnToggleSidebarLayers
+function bindBtnToggleSidebarLayers() {
+    $(document).on('click', '#btnToggleSidebarLayers', function () {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            $('body').addClass('vitro-sidebar-layers-expanded');
+            $('#layersContainer').show();
+            collapseSidebarSheets();
+        } else {
+            $('#layersContainer').hide();
+            $('body').removeClass('vitro-sidebar-layers-expanded');
+        }
+        updateCanvasContainerWidth();
+    });
+}
+
+function collapseSidebarLayers() {
+    $('body').removeClass('vitro-sidebar-layers-expanded');
+    $('#layersContainer').hide();
+    $('#btnToggleSidebarLayers').removeClass('toggled');
+}
+
+// btnToggleSidebarSheets
+function bindBtnToggleSidebarSheets() {
+    $(document).on('click', '#btnToggleSidebarSheets', function () {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            $('#sidebarContainer').show();
+            $('body').addClass('vitro-sidebar-sheets-expanded');
+            collapseSidebarLayers();
+        } else {
+            $('#sidebarContainer').hide();
+            $('body').removeClass('vitro-sidebar-sheets-expanded');
+        }
+
+        updateCanvasContainerWidth();
+    });
+}
+
+function collapseSidebarSheets() {
+    $('#sidebarContainer').hide();
+    $('body').removeClass('vitro-sidebar-sheets-expanded');
+    $('#btnToggleSidebarSheets').removeClass('toggled');
+}
+
+function bindBtnZoomIn() {
+    $(document).on('click', '#zoomIn', function () {
+        window.dxfViewer.ZoomIn();
+    });
+}
+
+function bindBtnZoomOut() {
+    $(document).on('click', '#zoomOut', function () {
+        window.dxfViewer.ZoomOut();
+    });
+}
+
+
+// TODO
+function bindTreeViewSpanOnClickHandler() {
+    $(document).on('treeViewSpan', function(e, itemId) {
+        // TODO
+        alert('click treeViewSpan, id = ' + itemId);
+        var pickResult = {
+            entity: {
+                id: itemId
+            }
+        };
+        showPropertyInspector(pickResult);
+    });
+}
+
+function isTreeViewItemChecked(id) {
+    return $('#checkbox-'+id).is(':checked');
+}
+
+// TODO
+function bindTreeViewCheckboxOnChangeHandler() {
+    $(document).on('treeViewCheckboxChange', function(e, itemId) {
+        // TODO
+        alert('change treeViewCheckbox | id = ' + itemId + ' | checked = ' + isTreeViewItemChecked(itemId));
+        // Get all children
+        //console.log(getChildren(itemId));
+    });
+}
+// Super Fast Tree View in JavaScript by Chris Smith - like Xeokit
+function orphans() {
+    return treeViewData.filter(function(item) {
+        return item.parent === null;
+    });
+}
+
+function hasChildren(parentId) {
+    return treeViewData.some(function(item) {
+        return item.parent === parentId;
+    });
+}
+
+function getChildren(parentId) {
+    return treeViewData.filter(function(item) {
+        return item.parent === parentId;
+    });
+}
+
+function generateListItem(item) {
+    // console.time('generateListItem');
+    const li = document.createElement('li');
+    li.id = 'item-' + item.id;
+
+    if (hasChildren(item.id)) {
+        const a = document.createElement('a');
+        a.href = '#';
+        a.textContent = '+';
+        a.classList.add('plus');
+        a.addEventListener('click', expand);
+        li.appendChild(a);
+    }
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.id = 'checkbox-' + item.id;
+
+    if(item.parent === null) {
+        $(checkbox).prop('checked', true);
+    }
+
+    $(checkbox).off('change');
+    $(checkbox).on('change', function(){
+        var _t = $(this);
+        var childInputs = _t.parent().find('ul').find('input[type="checkbox"]');
+        childInputs.prop('checked', _t.is(':checked'));
+        $(document).trigger('treeViewCheckboxChange', [item.id]);
+    });
+    li.appendChild(checkbox);
+
+    const span = document.createElement('span');
+    span.textContent = item.name;
+    $(span).off('click');
+    $(span).on('click', function() {
+        $(document).trigger('treeViewSpan', [item.id]);
+    });
+    li.appendChild(span);
+    // console.timeEnd('generateListItem');
+    return li;
+}
+
+function expand(event) {
+    // console.time('expand');
+    event.preventDefault();
+    event.stopPropagation();
+    const et = event.target,
+        parent = et.parentElement,
+        id = parent.id.replace('item-', ''),
+        kids = getChildren(id),
+        items = kids.map(generateListItem),
+        ul = document.createElement('ul');
+    items.forEach(function(li) {
+        if($('#item-'+id + ' > input[type="checkbox"]').length && !$('#item-'+id + ' > input[type="checkbox"]').is(':checked')) {
+            $(li).find('> input[type="checkbox"]').prop('checked', false);
+        } else {
+            $(li).find('> input[type="checkbox"]').prop('checked', true);
+        }
+        ul.appendChild(li);
+    });
+    parent.appendChild(ul);
+    et.classList.remove('plus');
+    et.classList.add('minus');
+    et.textContent = '-';
+    et.removeEventListener('click', expand);
+    et.addEventListener('click', collapse);
+    // console.timeEnd('expand');
+}
+
+function collapse(event) {
+    console.time('collapse');
+    event.preventDefault();
+    event.stopPropagation();
+    const et = event.target,
+        parent = et.parentElement,
+        ul = parent.querySelector('ul');
+    parent.removeChild(ul);
+    et.classList.remove('minus');
+    et.classList.add('plus');
+    et.textContent = '+';
+    et.removeEventListener('click', collapse);
+    et.addEventListener('click', expand);
+    // console.timeEnd('collapse');
+}
+
+function initTreeView(treeViewContainerSelector) {
+    const root = document.querySelector(treeViewContainerSelector),
+        orphansArray = orphans();
+    if (orphansArray.length) {
+        const items = orphansArray.map(generateListItem),
+            ul = document.createElement('ul');
+        items.forEach(function(li) {
+            ul.appendChild(li);
+        });
+        root.appendChild(ul);
+    }
+}
+//------------------------------------------------------------------------------------------------------------------
+// TreeView Panel resizable
+//------------------------------------------------------------------------------------------------------------------
+function initTreeViewPanelResizable() {
+    $('#treeViewContainerWrap').resizable({
+        handles: "e",
+        minWidth: 150
+    });
+}
+var canvas = document.getElementById('canvasContainer');
+window.dxfViewer = new Viewer(canvas, null);
+
+window.dxfViewer.Load('/api/file/getByItemId/' + context.file.id).then(() => {
+    anno.RemoveLabels();
+    anno.UpdateLabelPosition();
+    document.getElementById(window.dxfViewer.spaceName)?.classList.add('vitro-active');
+    bindThumbnailClick();
+    if (context.onLoaded) {
+        context.onLoaded();
+    }
+});
+
+var strokeColorVal = '#2d9cdb';
+
+var anno = new Annotation({
+    viewer: window.dxfViewer,
+    color: strokeColorVal,
+    onLabelClick: onSelectAnnotation
+});
+window.dxfViewer.RegisterDrawablePlugin(anno);
+
+document.addEventListener('keydown', KeyDown);
+
+function KeyDown(event) {
+    const code = event.code;
+    if (code == 'Delete') {
+        const selectedId = window.dxfViewer.GetSelectedHandle();
+        if (selectedId) {initi
+            const drawable = window.dxfViewer.GetDrawable(selectedId);
+            if (drawable?.drawMode === DrawMode.ANNOTATIONS) {
+                window.dxfViewer.DeleteDrawable(selectedId);
+            }
+        }
+    }
+}
+
+const Subscribe = eventName => {
+    window.dxfViewer.Subscribe(eventName, e => emit('dxf-' + eventName, e));
+};
+for (const eventName of ['loaded', 'cleared', 'destroyed', 'resized', 'pointerdown',
+    'pointerup', 'viewChanged', 'message', 'added', 'selected', 'drawableCreated', 'drawCancelled']) {
+    Subscribe(eventName);
+}
+
+function emit(eventName, event) {
+    if (eventName == 'dxf-pointerdown' && event.detail.domEvent.button == 1) {
+        var layout = null;
+        const viewer = window.dxfViewer;
+        const scene = viewer.scene;
+        for (let i = 0; i < scene.layouts.length; i++) {
+            if (window.dxfViewer.spaceName === scene.layouts[i].space) {
+                if (i == scene.layouts.length - 1)
+                    layout = scene.layouts[0];
+                else
+                    layout = scene.layouts[i + 1];
+
+                break;
+            }
+        }
+
+        if (layout) {
+            window.dxfViewer.SwitchSpace(layout);
+        }
+    }
+    else if (eventName == 'dxf-pointerdown' && event.detail.domEvent.button == 0) {
+        if (!window.dxfViewer.drawMode) {
+            const selectedId = window.dxfViewer.SelectObj(event);
+        }
+    }
+    else if (eventName == 'dxf-selected') {
+        const selectedId = window.dxfViewer.GetSelectedHandle();
+        const annotation = window.dxfViewer.GetDrawable(selectedId);
+        if (annotation && annotation.space.layout.space === dxfViewer.spaceName) {
+            onSelectAnnotation(selectedId);
+        }
+    }
+    else if (eventName == 'dxf-loaded') {
+        const spaceHandle = event.detail.space.layout.spaceHandle;
+        createThumbnail(event.detail.space.layout.name, window.dxfViewer.GetSpace());
+        initNotesBySpaceHandle(spaceHandle);
+        initLayers();
+        window.dxfViewer.controls.minZoom = 0.1;
+        window.dxfViewer.controls.maxZoom = 10;
+    }
+    else if (eventName == 'dxf-drawableCreated') {
+        const markupData = event.detail;
+        if (markupData && markupData.id && markupData.id.includes(ID_PREFIX)) {
+            context.onCreateIssue(markupData);
+            expandSidebarIssueDetail();
+        }
+    }
+    else if (eventName == 'dxf-drawCancelled') {
+       
+    }
+    else if (eventName == 'dxf-resized') {
+        anno.UpdateLabelRendererSize();
+        anno.UpdateLabelPosition();
+        if ($('#scaleSelect').data('value') === 'auto') {
+            doZoomAuto();
+        }
+    }
+    else if (eventName == 'dxf-viewChanged') {
+        if (+$('#scaleSelect').data('value') && dxfViewer.camera.zoom !== 1) {
+            updateScaleSelectValue();
+        }
+        anno.UpdateLabelPosition();
+    }
+
+}
+
+function destroyed() {
+    window.dxfViewer.Destroy();
+    window.dxfViewer = null;
+}
+
+function initNotesBySpaceHandle(spaceHandle) {
+    $.each(context.issueList, function (index, note) {
+        initNote(note, spaceHandle);
+    });
+
+    anno.UpdateLabelPosition();
+}
+
+function initLayers() {
+    if (context.initLayers) {
+        context.initLayers(window.dxfViewer.scene.layers);
+    }
+}
+
+function initNote(note, spaceHandle) {
+    const markup = JSON.parse(note.markup);
+    if (markup.space.layout.spaceHandle === spaceHandle) {
+        const firstPoint = new three.Vector3(markup.firstPoint.x, markup.firstPoint.y, markup.firstPoint.z);
+        const secondPoint = new three.Vector3(markup.secondPoint.x, markup.secondPoint.y, markup.secondPoint.z);
+        const color = note.statusColor || strokeColorVal;
+        const id = note.id.toString();
+        anno.Add(spaceHandle, firstPoint, secondPoint, id, color);
+    }
+}
+
+function bindUpdatePage() {
+    if (context.deleteIssueEvent) {
+        window.addEventListener(context.deleteIssueEvent, updatePage);
+    }
+
+    if (context.updateIssueEvent) {
+        window.addEventListener(context.updateIssueEvent, updatePage);
+    }
+}
+
+function updatePage(e) {
+    const item = e.detail.itemList[0];
+    const markup = item.fieldValueMap.markup;
+    context.initIssueList(true);
+    anno.RemoveLabels();
+    removeNewAnnotations();
+
+    if (e.type === context.deleteIssueEvent && markup) {
+        const selectedId = item.fieldValueMap.item_id;
+        deleteNote(selectedId);
+    }
+
+    if (e.type === context.updateIssueEvent && markup) {
+        const newNote = {
+            id: item.fieldValueMap.item_id,
+            markup: markup,
+            statusColor: item.fieldValueMap['task_status']?.fieldValueMap?.color || '',
+        }
+        const spaceHandle = getCurrentSpaceHandle();
+        if (spaceHandle) {
+            deleteNote(newNote.id);
+            initNote(newNote, spaceHandle);
+        }
+
+        if ($('#btnCreateNotes').hasClass('toggled')) {
+            anno.Create();
+        }
+    }
+
+    anno.UpdateLabelPosition();
+}
+
+function removeNewAnnotations() {
+    const drawables = window.dxfViewer.drawables;
+    const newAnnotations = drawables.filter(drawable => drawable.drawMode === DrawMode.ANNOTATIONS && drawable.id.includes(ID_PREFIX));
+    if (newAnnotations && newAnnotations.length) {
+        $.each(newAnnotations, function (index, anno) {
+            window.dxfViewer.DeleteDrawable(anno.id);
+        })
+    }
+}
+
+function deleteNote(id) {
+    if (id) {
+        const drawable = window.dxfViewer.GetDrawable(id);
+        if (drawable?.drawMode === DrawMode.ANNOTATIONS) {//this is annotation
+            window.dxfViewer.DeleteDrawable(id);
+        }
+    }
+}
+
+function getCurrentSpaceHandle() {
+    const spaces = window.dxfViewer.spaces;
+    const currentSpaceName = window.dxfViewer.spaceName;
+    const currentSpace = spaces.get(currentSpaceName);
+    if (currentSpace) {
+        return currentSpace.layout.spaceHandle;
+    }
+
+    return null;
+}
+
+function onSelectAnnotation(id) {
+    if (context.selectIssue) {
+        context.selectIssue(id, true);
+    }
+    zoomToAnnotation(id);
+
+    if (!$('#btnToggleSidebarNotes').hasClass('toggled')) {
+        $('#btnToggleSidebarNotes').addClass('toggled');
+        expandSidebarNotes();
+    }
+    updateCanvasContainerWidth();
+}
+
+function zoomToAnnotation(id) {
+    const drawable = window.dxfViewer.GetDrawable(id);
+    if (drawable?.drawMode === DrawMode.ANNOTATIONS && drawable.space.layout.space === window.dxfViewer.spaceName) {
+        window.dxfViewer.ZoomTo(drawable.objects);
+        updateScaleSelectValue();
+    } else {
+        window.dxfViewer.FindDxfEntity(id);
+    }
+}
+
+function switchSpace(space) {
+    const layout = window.dxfViewer.scene.layouts.find(layout => layout.space === space);
+
+    if (layout) {
+        window.dxfViewer.SwitchSpace(layout);
+        dxfViewer.ZoomTo(dxfViewer.GetSpace(dxfViewer.spaceName).scene);
+        dxfViewer.DoFakeZoomToRedrawScene();
+        anno.RemoveLabels();
+        anno.UpdateLabelPosition();
+    }
+}
+
+function createThumbnail(name, space) {
+    if (context.initThumbnail) {
+        const imgUrl = window.dxfViewer.renderer.domElement.toDataURL();
+        context.initThumbnail(space.layout.space, name, imgUrl);
+    }
+}
+
+function bindThumbnailClick() {
+    $('.vitro-thumbnail').on('click', function () {
+        switchSpace($(this).attr('id'));
+        $('.vitro-thumbnail').removeClass('vitro-active');
+        $(this).addClass('vitro-active');
+    });
+}
+
+function getSpaceImage(space, renderer) {
+    const dataURL = window.dxfViewer.renderer.domElement.toDataURL();
+
+    const img = document.createElement('img');
+    img.src = dataURL;
+
+    return img;
+}
+
+function onChangeLayerVisibility(name, show) {
+    window.dxfViewer.ShowLayer(name, show);
+}
+
+function bindSelect(select) {
+    $(select).click(function (e) {
+        let input = $(select).children()[0];
+        if (e.target.localName == 'li') {
+            let value = $(e.target).attr('value');
+            let text = $(e.target).text();
+            $(input).val(text);
+            $(input).data('value', value);
+            input.dispatchEvent(new CustomEvent('change', { detail: { value: value } }));
+            $(select).removeClass('vitro-active');
+        }
+        else if (e.currentTarget == select && !$(select).hasClass('vitro-active')) {
+            $(select).addClass('vitro-active');
+        } else {
+            $(select).removeClass('vitro-active');
+        }
+    });
+
+    $(document).click(function (e) {
+        if (!Array.from($(select).children()).includes(e.target)) {
+            $(select).removeClass('vitro-active');
+        }
+    });
+}
+
+function bindSelectList() {
+    $('.vitro-select').each(function (i, item) {
+        bindSelect(item);
+    });
+}
+
+function bindScaleSelectChange() {
+    $('#pageAutoOption').text(context.scaleAutoLabel);
+    $('#scaleSelect').data('value', $('#scaleSelect').val());
+    $('#scaleSelect').val(context.scaleAutoLabel);
+    $('#scaleSelect').on('change', function (e) {
+        const scale = e.detail.value;
+        changeZoom(scale);
+    });
+}
+
+function doZoomPageFit() {
+    const space = dxfViewer.GetSpace(dxfViewer.spaceName);
+    if (space) {
+        dxfViewer.ZoomTo(space.scene);
+    }
+}
+
+function doZoomAuto() {
+    doZoomPageFit();
+    window.dxfViewer.DoFakeZoomToRedrawScene();
+}
+
+function changeZoom(scale) {
+    if (scale === 'auto') {
+        doZoomAuto();
+    } else {
+        scale = +scale;
+        if (scale === 1) {
+            doZoomPageFit();
+        } else {
+            doZoomPageFit();
+            window.dxfViewer.ZoomOut(scale);
+        }
+    }
+}
+
+function updateScaleSelectValue() {
+    const cameraZoom = window.dxfViewer.camera.zoom;
+    const cameraZoomVal = Math.round(cameraZoom * 100);
+    const newVal = cameraZoomVal + '%';
+    if ($('#scaleSelect').val() !== newVal) {
+        $('#scaleSelect').val(newVal);
+        $('#scaleSelect').data('value', cameraZoom);
+    }
+}
+
+context.zoomToAnnotation = zoomToAnnotation;
+context.onChangeLayerVisibility = onChangeLayerVisibility;
+context.expandSidebarIssueDetail = () => {
+    expandSidebarIssueDetail();
+    collapseSidebarNotes();
+};
+
+function bindPanelResize() {
+    bindResizerMousedown();
+    bindResizerMouseup();
+    bindResizerMousemove();
+}
+
+function bindResizerMousedown() {
+    $('.vitro-resizer').on('mousedown', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        $(this).addClass('vitro-draggable');
+    });
+}
+
+function bindResizerMouseup() {
+    $(document).on('mouseup', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        $('.vitro-resizer').removeClass('vitro-draggable');
+    });
+}
+
+function bindResizerMousemove() {
+    $(document).on('mousemove', function (e) {
+        if ($('.vitro-draggable').length) {
+            e.preventDefault();
+            e.stopPropagation();
+            if ($('.vitro-draggable').hasClass('vitro-left')) {
+                $('.vitro-draggable').parent().width($(document).width() - e.clientX);
+            } else {
+                $('.vitro-draggable').parent().width(e.clientX);
+            }
+            updateCanvasContainerWidth();
+        }
+    });
+}
+
+function updateCanvasContainerWidth() {
+    let insetStart = 0;
+    let insetEnd = 0;
+    $('.vitro-panel').each((idx, panel) => {
+        const rect = panel.getBoundingClientRect();
+        if (rect.left === 0) {
+            insetStart += panel.clientWidth;
+        } else if (rect.right) {
+            insetEnd += panel.clientWidth;
+        }
+    });
+    $('#canvasContainer').css('width', `calc(100% - ${insetStart + insetEnd}px)`);
+    $('#canvasContainer').css('inset-inline-start', `${insetStart}px`);
+    $('#canvasContainer').css('inset-inline-end', `${insetEnd}px`);
+}
+$(document).ready(function () {
+	bindBtnToggleSidebarNotes();
+	bindSidebarNotesClose();
+	bindDeleteNoteEventHandler();
+
+	fixNotesTextareaBlur();
+
+	bindToggleNotes();
+
+	bindPropInspectorClose();
+	initPropertySetsResizable();
+
+	bindBtnToggleCreateNotes();
+	bindUpdatePage();
+	bindBtnToggleSidebarLayers();
+	bindBtnToggleSidebarSheets();
+
+	bindBtnZoomIn();
+	bindBtnZoomOut();
+
+	bindSelectList();
+	bindScaleSelectChange();
+	bindPanelResize();
+});
+
+var userLocale =
+	navigator.languages && navigator.languages.length
+		? navigator.languages[0]
+		: navigator.language;
+
+document.webL10n.setLanguage(userLocale, function () {
+	document.webL10n.translate();
+});
+}