diff --git a/packages/chili-core/src/base/asyncController.ts b/packages/chili-core/src/base/asyncController.ts
index 4ae385de..d6d71677 100644
--- a/packages/chili-core/src/base/asyncController.ts
+++ b/packages/chili-core/src/base/asyncController.ts
@@ -8,28 +8,28 @@ export interface AsyncResult {
 }
 
 export class AsyncController implements IDisposable {
-    readonly #failHandles: ((state: AsyncResult) => void)[] = [];
-    readonly #successHandles: ((state: AsyncResult) => void)[] = [];
+    private readonly _failHandles: ((state: AsyncResult) => void)[] = [];
+    private readonly _successHandles: ((state: AsyncResult) => void)[] = [];
 
-    #result: AsyncResult | undefined;
+    private _result: AsyncResult | undefined;
     get result() {
-        return this.#result;
+        return this._result;
     }
 
     reset() {
-        this.#result = undefined;
+        this._result = undefined;
     }
 
     fail = (message?: string) => {
-        this.handle(this.#failHandles, "fail", message);
+        this.handle(this._failHandles, "fail", message);
     };
 
     cancel = (message?: string) => {
-        this.handle(this.#failHandles, "cancel", message);
+        this.handle(this._failHandles, "cancel", message);
     };
 
     success = (message?: string) => {
-        this.handle(this.#successHandles, "success", message);
+        this.handle(this._successHandles, "success", message);
     };
 
     private handle(
@@ -37,22 +37,22 @@ export class AsyncController implements IDisposable {
         status: "success" | "cancel" | "fail",
         message?: string,
     ) {
-        if (this.#result === undefined) {
-            this.#result = { status, message };
-            handlers.forEach((x) => x(this.#result!));
+        if (this._result === undefined) {
+            this._result = { status, message };
+            handlers.forEach((x) => x(this._result!));
         }
     }
 
     onCancelled(listener: (result: AsyncResult) => void): void {
-        this.#failHandles.push(listener);
+        this._failHandles.push(listener);
     }
 
     onCompleted(listener: (result: AsyncResult) => void): void {
-        this.#successHandles.push(listener);
+        this._successHandles.push(listener);
     }
 
     dispose() {
-        this.#failHandles.length = 0;
-        this.#successHandles.length = 0;
+        this._failHandles.length = 0;
+        this._successHandles.length = 0;
     }
 }
diff --git a/packages/chili-core/src/base/collection.ts b/packages/chili-core/src/base/collection.ts
index 6392d9ba..10a00b89 100644
--- a/packages/chili-core/src/base/collection.ts
+++ b/packages/chili-core/src/base/collection.ts
@@ -35,16 +35,16 @@ export interface ICollectionChanged {
 }
 
 export class ObservableCollection<T> implements ICollectionChanged, IDisposable {
-    #callbacks: Set<(args: CollectionChangedArgs) => void> = new Set();
-    #items: T[];
+    private _callbacks: Set<(args: CollectionChangedArgs) => void> = new Set();
+    private _items: T[];
 
     constructor(...items: T[]) {
-        this.#items = [...items];
+        this._items = [...items];
     }
 
     add(...items: T[]) {
-        this.#items.push(...items);
-        this.#callbacks.forEach((callback) =>
+        this._items.push(...items);
+        this._callbacks.forEach((callback) =>
             callback({
                 action: CollectionAction.add,
                 items,
@@ -53,8 +53,8 @@ export class ObservableCollection<T> implements ICollectionChanged, IDisposable
     }
 
     remove(...items: T[]) {
-        this.#items = this.#items.filter((item) => !items.includes(item));
-        this.#callbacks.forEach((callback) =>
+        this._items = this._items.filter((item) => !items.includes(item));
+        this._callbacks.forEach((callback) =>
             callback({
                 action: CollectionAction.remove,
                 items,
@@ -64,10 +64,10 @@ export class ObservableCollection<T> implements ICollectionChanged, IDisposable
 
     move(from: number, to: number) {
         if (from === to) return;
-        if (from >= 0 && from < this.#items.length && to >= 0 && to < this.#items.length) {
-            let items = this.#items.splice(from, 1);
-            this.#items.splice(from < to ? to - 1 : to, 0, ...items);
-            this.#callbacks.forEach((callback) =>
+        if (from >= 0 && from < this._items.length && to >= 0 && to < this._items.length) {
+            let items = this._items.splice(from, 1);
+            this._items.splice(from < to ? to - 1 : to, 0, ...items);
+            this._callbacks.forEach((callback) =>
                 callback({
                     action: CollectionAction.move,
                     from,
@@ -78,9 +78,9 @@ export class ObservableCollection<T> implements ICollectionChanged, IDisposable
     }
 
     clear() {
-        let items = this.#items;
-        this.#items = [];
-        this.#callbacks.forEach((callback) =>
+        let items = this._items;
+        this._items = [];
+        this._callbacks.forEach((callback) =>
             callback({
                 action: CollectionAction.remove,
                 items,
@@ -89,14 +89,14 @@ export class ObservableCollection<T> implements ICollectionChanged, IDisposable
     }
 
     get length() {
-        return this.#items.length;
+        return this._items.length;
     }
 
     replace(index: number, ...items: T[]) {
-        if (index >= 0 && index < this.#items.length) {
-            let item = this.#items[index];
-            this.#items.splice(index, 1, ...items);
-            this.#callbacks.forEach((callback) =>
+        if (index >= 0 && index < this._items.length) {
+            let item = this._items[index];
+            this._items.splice(index, 1, ...items);
+            this._callbacks.forEach((callback) =>
                 callback({
                     action: CollectionAction.replace,
                     item,
@@ -115,7 +115,7 @@ export class ObservableCollection<T> implements ICollectionChanged, IDisposable
     }
 
     get items() {
-        return [...this.#items];
+        return [...this._items];
     }
 
     [Symbol.iterator]() {
@@ -123,36 +123,36 @@ export class ObservableCollection<T> implements ICollectionChanged, IDisposable
     }
 
     item(index: number) {
-        return this.#items[index];
+        return this._items[index];
     }
 
     at(index: number) {
-        return this.#items.at(index);
+        return this._items.at(index);
     }
 
     indexOf(item: T, fromIndex: number | undefined) {
-        return this.#items.indexOf(item, fromIndex);
+        return this._items.indexOf(item, fromIndex);
     }
 
     contains(item: T) {
-        return this.#items.indexOf(item) !== -1;
+        return this._items.indexOf(item) !== -1;
     }
 
     get count() {
-        return this.#items.length;
+        return this._items.length;
     }
 
     onCollectionChanged(callback: (args: CollectionChangedArgs) => void): void {
-        this.#callbacks.add(callback);
+        this._callbacks.add(callback);
     }
 
     removeCollectionChanged(callback: (args: CollectionChangedArgs) => void): void {
-        this.#callbacks.delete(callback);
+        this._callbacks.delete(callback);
     }
 
     dispose() {
-        this.#callbacks.clear();
-        this.#items.length = 0;
+        this._callbacks.clear();
+        this._items.length = 0;
     }
 }
 
diff --git a/packages/chili-core/src/base/history.ts b/packages/chili-core/src/base/history.ts
index ad9503ef..983652d0 100644
--- a/packages/chili-core/src/base/history.ts
+++ b/packages/chili-core/src/base/history.ts
@@ -10,48 +10,48 @@ export interface IHistoryRecord {
 }
 
 export class History implements IDisposable {
-    #undos: IHistoryRecord[] = [];
-    #redos: IHistoryRecord[] = [];
+    private _undos: IHistoryRecord[] = [];
+    private _redos: IHistoryRecord[] = [];
 
     disabled: boolean = false;
     undoLimits: number = 50;
 
     dispose(): void {
-        this.#undos.length = 0;
-        this.#redos.length = 0;
+        this._undos.length = 0;
+        this._redos.length = 0;
     }
 
     add(record: IHistoryRecord) {
-        this.#redos.length = 0;
-        this.#undos.push(record);
-        if (this.#undos.length > this.undoLimits) {
-            this.#undos = this.#undos.slice(this.#undos.length - this.undoLimits);
+        this._redos.length = 0;
+        this._undos.push(record);
+        if (this._undos.length > this.undoLimits) {
+            this._undos = this._undos.slice(this._undos.length - this.undoLimits);
         }
     }
 
     undoCount() {
-        return this.#undos.length;
+        return this._undos.length;
     }
 
     redoCount() {
-        return this.#redos.length;
+        return this._redos.length;
     }
 
     undo() {
         this.tryOperate(() => {
-            let records = this.#undos.pop();
+            let records = this._undos.pop();
             if (records === undefined) return;
             records.undo();
-            this.#redos.push(records);
+            this._redos.push(records);
         });
     }
 
     redo() {
         this.tryOperate(() => {
-            let records = this.#redos.pop();
+            let records = this._redos.pop();
             if (records === undefined) return;
             records.redo();
-            this.#undos.push(records);
+            this._undos.push(records);
         });
     }
 
diff --git a/packages/chili-core/src/base/linkedList.ts b/packages/chili-core/src/base/linkedList.ts
index 7d38b5dd..edcaf87c 100644
--- a/packages/chili-core/src/base/linkedList.ts
+++ b/packages/chili-core/src/base/linkedList.ts
@@ -7,32 +7,32 @@ interface LinkedListNode<T> {
 }
 
 export class LinkedList<T> {
-    #head: LinkedListNode<T> | undefined;
+    private _head: LinkedListNode<T> | undefined;
     get head() {
-        return this.#head?.data;
+        return this._head?.data;
     }
 
-    #tail: LinkedListNode<T> | undefined;
+    private _tail: LinkedListNode<T> | undefined;
     get tail() {
-        return this.#tail?.data;
+        return this._tail?.data;
     }
 
-    #size: number = 0;
+    private _size: number = 0;
     get size() {
-        return this.#size;
+        return this._size;
     }
 
     push(...items: T[]) {
         items.forEach((item) => {
             const node: LinkedListNode<T> = { data: item };
-            if (this.#head === undefined) {
-                this.#head = node;
+            if (this._head === undefined) {
+                this._head = node;
             } else {
-                this.#tail!.next = node;
-                node.prev = this.#tail;
+                this._tail!.next = node;
+                node.prev = this._tail;
             }
-            this.#tail = node;
-            this.#size++;
+            this._tail = node;
+            this._size++;
         });
     }
 
@@ -47,15 +47,15 @@ export class LinkedList<T> {
             if (node.prev) {
                 node.prev.next = newNode;
             } else {
-                this.#head = newNode;
+                this._head = newNode;
             }
             node.prev = newNode;
-            this.#size++;
+            this._size++;
         }
     }
 
     remove(item: T) {
-        let current = this.#head;
+        let current = this._head;
         while (current) {
             if (current.data === item) {
                 this.removeNode(current);
@@ -74,23 +74,22 @@ export class LinkedList<T> {
         if (node.prev) {
             node.prev.next = node.next;
         } else {
-            this.#head = node.next;
+            this._head = node.next;
         }
         if (node.next) {
             node.next.prev = node.prev;
         } else {
-            this.#tail = node.prev;
+            this._tail = node.prev;
         }
-        this.#size--;
-        return;
+        this._size--;
     }
 
     private nodeAt(index: number) {
-        if (index < 0 || index >= this.#size) {
+        if (index < 0 || index >= this._size) {
             return undefined;
         }
-        if (index === this.#size - 1) return this.#tail;
-        let [current, currentIndex] = [this.#head, 0];
+        if (index === this._size - 1) return this._tail;
+        let [current, currentIndex] = [this._head, 0];
         while (current) {
             if (currentIndex === index) {
                 break;
@@ -102,26 +101,26 @@ export class LinkedList<T> {
     }
 
     clear() {
-        this.#head = undefined;
-        this.#tail = undefined;
-        this.#size = 0;
+        this._head = undefined;
+        this._tail = undefined;
+        this._size = 0;
     }
 
     reverse() {
-        let currentNode = this.#head;
+        let currentNode = this._head;
         while (currentNode) {
             const next = currentNode.next;
             currentNode.next = currentNode.prev;
             currentNode.prev = next;
             currentNode = currentNode.prev;
         }
-        const tail = this.#tail;
-        this.#tail = this.#head;
-        this.#head = tail;
+        const tail = this._tail;
+        this._tail = this._head;
+        this._head = tail;
     }
 
     *[Symbol.iterator](): IterableIterator<T> {
-        let current = this.#head;
+        let current = this._head;
         while (current) {
             yield current.data;
             current = current.next;
diff --git a/packages/chili-core/src/command/command.ts b/packages/chili-core/src/command/command.ts
index 1b700e46..732e0af7 100644
--- a/packages/chili-core/src/command/command.ts
+++ b/packages/chili-core/src/command/command.ts
@@ -19,33 +19,33 @@ export namespace ICommand {
 }
 
 export abstract class CancelableCommand extends Observable implements ICanclableCommand {
-    static readonly #propertiesCache: Map<string, any> = new Map(); // 所有命令共享
+    private static readonly _propertiesCache: Map<string, any> = new Map(); // 所有命令共享
 
-    #complete: boolean = false;
+    private _complete: boolean = false;
     get complete() {
-        return this.#complete;
+        return this._complete;
     }
 
-    #application: IApplication | undefined;
+    private _application: IApplication | undefined;
     get application() {
-        if (!this.#application) {
+        if (!this._application) {
             throw new Error("application is not set");
         }
-        return this.#application;
+        return this._application;
     }
 
     get document() {
-        return this.#application!.activeDocument!;
+        return this._application!.activeDocument!;
     }
 
-    #controller?: AsyncController;
+    private _controller?: AsyncController;
     protected get controller() {
-        return this.#controller;
+        return this._controller;
     }
     protected set controller(value: AsyncController | undefined) {
-        if (this.#controller === value) return;
-        this.#controller?.dispose();
-        this.#controller = value;
+        if (this._controller === value) return;
+        this._controller?.dispose();
+        this._controller = value;
     }
 
     @Property.define("common.cancel")
@@ -53,7 +53,7 @@ export abstract class CancelableCommand extends Observable implements ICanclable
         this.controller?.cancel();
         await new Promise(async (resolve) => {
             while (true) {
-                if (this.#complete) {
+                if (this._complete) {
                     break;
                 }
                 await new Promise((r) => setTimeout(r, 50));
@@ -64,7 +64,7 @@ export abstract class CancelableCommand extends Observable implements ICanclable
 
     async execute(application: IApplication): Promise<void> {
         if (!application.activeDocument) return;
-        this.#application = application;
+        this._application = application;
         try {
             let canExcute = await this.beforeExecute();
             if (canExcute) {
@@ -87,15 +87,15 @@ export abstract class CancelableCommand extends Observable implements ICanclable
         this.saveProperties();
         PubSub.default.pub("closeCommandContext");
         this.controller?.dispose();
-        this.#complete = true;
+        this._complete = true;
         return Promise.resolve();
     }
 
     private readProperties() {
         Property.getProperties(this).forEach((x) => {
             let key = this.cacheKeyOfProperty(x);
-            if (CancelableCommand.#propertiesCache.has(key)) {
-                (this as any)[key] = CancelableCommand.#propertiesCache.get(key);
+            if (CancelableCommand._propertiesCache.has(key)) {
+                (this as any)[key] = CancelableCommand._propertiesCache.get(key);
             }
         });
     }
@@ -105,7 +105,7 @@ export abstract class CancelableCommand extends Observable implements ICanclable
             let key = this.cacheKeyOfProperty(x);
             let prop = (this as any)[key];
             if (typeof prop === "function") return;
-            CancelableCommand.#propertiesCache.set(key, prop);
+            CancelableCommand._propertiesCache.set(key, prop);
         });
     }
 
diff --git a/packages/chili-core/src/math/planeAngle.ts b/packages/chili-core/src/math/planeAngle.ts
index cbadd31c..2c5f6d2b 100644
--- a/packages/chili-core/src/math/planeAngle.ts
+++ b/packages/chili-core/src/math/planeAngle.ts
@@ -5,12 +5,12 @@ import { Plane } from "./plane";
 import { XYZ } from "./xyz";
 
 export class PlaneAngle {
-    #preDotX: number = 1;
-    #preDotY: number = 0;
-    #reverse: boolean = false;
-    #angle: number = 0;
+    private _preDotX: number = 1;
+    private _preDotY: number = 0;
+    private _reverse: boolean = false;
+    private _angle: number = 0;
     get angle() {
-        return this.#angle;
+        return this._angle;
     }
 
     constructor(readonly plane: Plane) {}
@@ -21,22 +21,22 @@ export class PlaneAngle {
         let dotY = vec.dot(this.plane.yvec);
 
         if (
-            ((this.#preDotY < -Precision.Distance &&
+            ((this._preDotY < -Precision.Distance &&
                 dotY > Precision.Distance &&
-                this.#angle < Precision.Distance) ||
-                (this.#preDotY > -Precision.Distance &&
+                this._angle < Precision.Distance) ||
+                (this._preDotY > -Precision.Distance &&
                     dotY < -Precision.Distance &&
-                    this.#angle > -Precision.Distance)) && // 确保穿过 0
-            this.#preDotX > 0 &&
+                    this._angle > -Precision.Distance)) && // 确保穿过 0
+            this._preDotX > 0 &&
             dotX > 0
         ) {
-            this.#reverse = !this.#reverse;
+            this._reverse = !this._reverse;
         }
-        this.#angle = (this.plane.xvec.angleOnPlaneTo(vec, this.plane.normal)! * 180) / Math.PI;
-        if (this.#reverse) {
-            this.#angle -= 360;
+        this._angle = (this.plane.xvec.angleOnPlaneTo(vec, this.plane.normal)! * 180) / Math.PI;
+        if (this._reverse) {
+            this._angle -= 360;
         }
-        if (Math.abs(dotX) > Precision.Distance) this.#preDotX = dotX;
-        if (Math.abs(dotY) > Precision.Distance) this.#preDotY = dotY;
+        if (Math.abs(dotX) > Precision.Distance) this._preDotX = dotX;
+        if (Math.abs(dotY) > Precision.Distance) this._preDotY = dotY;
     }
 }
diff --git a/packages/chili-core/src/model/entity.ts b/packages/chili-core/src/model/entity.ts
index e211b5df..b25aa5d9 100644
--- a/packages/chili-core/src/model/entity.ts
+++ b/packages/chili-core/src/model/entity.ts
@@ -7,16 +7,16 @@ import { I18nKeys } from "../i18n";
 const ShapeChangedEvent = "ShapeChangedEvent";
 
 export abstract class Entity extends HistoryObservable {
-    #retryCount: number = 0;
+    private _retryCount: number = 0;
     protected shouldRegenerate: boolean = true;
     abstract name: I18nKeys;
 
     private _shape: Result<IShape> = Result.error("Not initialised");
 
     get shape(): Result<IShape> {
-        if (this.shouldRegenerate || (!this._shape.success && this.#retryCount < 3)) {
+        if (this.shouldRegenerate || (!this._shape.success && this._retryCount < 3)) {
             this._shape = this.generateShape();
-            this.#retryCount = this._shape.success ? 0 : this.#retryCount + 1;
+            this._retryCount = this._shape.success ? 0 : this._retryCount + 1;
             this.shouldRegenerate = false;
         }
         return this._shape;
diff --git a/packages/chili-three/src/cameraController.ts b/packages/chili-three/src/cameraController.ts
index b7c66cb4..0ced9a49 100644
--- a/packages/chili-three/src/cameraController.ts
+++ b/packages/chili-three/src/cameraController.ts
@@ -12,103 +12,103 @@ const DegRad = Math.PI / 180.0;
 export class CameraController implements ICameraController {
     zoomSpeed: number = 0.05;
     rotateSpeed: number = 0.01;
-    #up: Vector3 = new Vector3(0, 0, 1);
-    #target: Vector3 = new Vector3();
-    #position: Vector3 = new Vector3(1500, 1500, 1500);
-    #fov: number = 50;
-    #rotateCenter: Vector3 | undefined;
-    #camera: PerspectiveCamera | OrthographicCamera;
-
-    #cameraType: "perspective" | "orthographic" = "orthographic";
+    private _up: Vector3 = new Vector3(0, 0, 1);
+    private _target: Vector3 = new Vector3();
+    private _position: Vector3 = new Vector3(1500, 1500, 1500);
+    private _fov: number = 50;
+    private _rotateCenter: Vector3 | undefined;
+    private _camera: PerspectiveCamera | OrthographicCamera;
+
+    private _cameraType: "perspective" | "orthographic" = "orthographic";
     get cameraType(): "perspective" | "orthographic" {
-        return this.#cameraType;
+        return this._cameraType;
     }
     set cameraType(value: "perspective" | "orthographic") {
-        if (this.#cameraType === value) {
+        if (this._cameraType === value) {
             return;
         }
-        this.#cameraType = value;
-        this.#camera = this.newCamera();
+        this._cameraType = value;
+        this._camera = this.newCamera();
     }
 
     get target() {
-        return this.#target;
+        return this._target;
     }
 
     set target(value: Vector3) {
-        this.#target.copy(value);
+        this._target.copy(value);
     }
 
     get camera(): PerspectiveCamera | OrthographicCamera {
-        return this.#camera;
+        return this._camera;
     }
 
     constructor(readonly view: ThreeView) {
-        this.#camera = this.newCamera();
+        this._camera = this.newCamera();
     }
 
     private newCamera() {
-        return this.#cameraType === "perspective"
-            ? new PerspectiveCamera(this.#fov, 1, 0.0001, 1e6)
+        return this._cameraType === "perspective"
+            ? new PerspectiveCamera(this._fov, 1, 0.0001, 1e6)
             : new OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0.0001, 1e6);
     }
 
     pan(dx: number, dy: number): void {
-        let ratio = 0.002 * this.#target.distanceTo(this.#position);
-        let direction = this.#target.clone().sub(this.#position).normalize();
-        let hor = direction.clone().cross(this.#up).normalize();
+        let ratio = 0.002 * this._target.distanceTo(this._position);
+        let direction = this._target.clone().sub(this._position).normalize();
+        let hor = direction.clone().cross(this._up).normalize();
         let ver = hor.clone().cross(direction).normalize();
         let vector = hor.multiplyScalar(-dx).add(ver.multiplyScalar(dy)).multiplyScalar(ratio);
-        this.#target.add(vector);
-        this.#position.add(vector);
+        this._target.add(vector);
+        this._position.add(vector);
 
         this.update();
     }
 
     update() {
-        this.#camera.position.copy(this.#position);
-        this.#camera.up.copy(this.#up);
-        this.#camera.lookAt(this.#target);
+        this._camera.position.copy(this._position);
+        this._camera.up.copy(this._up);
+        this._camera.lookAt(this._target);
 
-        if (this.#camera instanceof OrthographicCamera) {
+        if (this._camera instanceof OrthographicCamera) {
             let aspect = this.view.width! / this.view.height!;
-            let length = this.#position.distanceTo(this.#target);
-            let frustumHalfHeight = length * Math.tan((this.#fov * DegRad) / 2);
-            this.#camera.left = -frustumHalfHeight * aspect;
-            this.#camera.right = frustumHalfHeight * aspect;
-            this.#camera.top = frustumHalfHeight;
-            this.#camera.bottom = -frustumHalfHeight;
+            let length = this._position.distanceTo(this._target);
+            let frustumHalfHeight = length * Math.tan((this._fov * DegRad) / 2);
+            this._camera.left = -frustumHalfHeight * aspect;
+            this._camera.right = frustumHalfHeight * aspect;
+            this._camera.top = frustumHalfHeight;
+            this._camera.bottom = -frustumHalfHeight;
         }
 
-        this.#camera.updateProjectionMatrix();
+        this._camera.updateProjectionMatrix();
     }
 
     startRotate(x: number, y: number): void {
         let shape = this.view.detected(ShapeType.Shape, x, y).at(0)?.owner;
         if (shape instanceof ThreeShape) {
-            this.#rotateCenter = new Vector3();
+            this._rotateCenter = new Vector3();
             let box = new Box3();
             box.setFromObject(shape);
-            box.getCenter(this.#rotateCenter);
+            box.getCenter(this._rotateCenter);
         } else {
-            this.#rotateCenter = undefined;
+            this._rotateCenter = undefined;
         }
     }
 
     rotate(dx: number, dy: number): void {
-        let center = this.#rotateCenter ?? this.#target;
-        let direction = this.#position.clone().sub(center);
-        let hor = this.#up.clone().cross(direction).normalize();
+        let center = this._rotateCenter ?? this._target;
+        let direction = this._position.clone().sub(center);
+        let hor = this._up.clone().cross(direction).normalize();
         let matrixX = new Matrix4().makeRotationAxis(hor, -dy * this.rotateSpeed);
         let matrixY = new Matrix4().makeRotationAxis(new Vector3(0, 0, 1), -dx * this.rotateSpeed);
         let matrix = new Matrix4().multiplyMatrices(matrixY, matrixX);
-        this.#position = ThreeHelper.transformVector(matrix, direction).add(center);
-        if (this.#rotateCenter) {
-            let vecTrt = this.#target.clone().sub(this.#camera.position);
-            this.#target = ThreeHelper.transformVector(matrix, vecTrt).add(this.#position);
+        this._position = ThreeHelper.transformVector(matrix, direction).add(center);
+        if (this._rotateCenter) {
+            let vecTrt = this._target.clone().sub(this._camera.position);
+            this._target = ThreeHelper.transformVector(matrix, vecTrt).add(this._position);
         }
 
-        this.#up.transformDirection(matrix);
+        this._up.transformDirection(matrix);
 
         this.update();
     }
@@ -118,52 +118,52 @@ export class CameraController implements ICameraController {
         let sphere = new Sphere();
         new Box3().setFromObject(context.visualShapes).getBoundingSphere(sphere);
 
-        let fieldOfView = this.#fov / 2.0;
+        let fieldOfView = this._fov / 2.0;
         if (this.view.width! < this.view.height!) {
             fieldOfView = (fieldOfView * this.view.width!) / this.view.height!;
         }
         let distance = sphere.radius / Math.sin(fieldOfView * DegRad);
-        let direction = this.#target.clone().sub(this.#position).normalize();
+        let direction = this._target.clone().sub(this._position).normalize();
 
-        this.#target.copy(sphere.center);
-        this.#position.copy(this.#target.clone().sub(direction.clone().multiplyScalar(distance)));
+        this._target.copy(sphere.center);
+        this._position.copy(this._target.clone().sub(direction.clone().multiplyScalar(distance)));
         this.update();
     }
 
     zoom(x: number, y: number, delta: number): void {
         let scale = delta > 0 ? this.zoomSpeed : -this.zoomSpeed;
-        let direction = this.#target.clone().sub(this.#position);
+        let direction = this._target.clone().sub(this._position);
         let mouse = this.mouseToWorld(x, y);
-        if (this.#camera instanceof PerspectiveCamera) {
+        if (this._camera instanceof PerspectiveCamera) {
             let directionNormal = direction.clone().normalize();
-            let dot = mouse.clone().sub(this.#position).dot(directionNormal);
-            let project = this.#position.clone().add(directionNormal.clone().multiplyScalar(dot));
+            let dot = mouse.clone().sub(this._position).dot(directionNormal);
+            let project = this._position.clone().add(directionNormal.clone().multiplyScalar(dot));
             let length =
-                (project.distanceTo(mouse) * direction.length()) / project.distanceTo(this.#position);
+                (project.distanceTo(mouse) * direction.length()) / project.distanceTo(this._position);
             let v = mouse.clone().sub(project).normalize().multiplyScalar(length);
-            mouse = this.#target.clone().add(v);
+            mouse = this._target.clone().add(v);
         }
-        let vector = this.#target.clone().sub(mouse).multiplyScalar(scale);
+        let vector = this._target.clone().sub(mouse).multiplyScalar(scale);
 
-        this.#target.add(vector);
-        this.#position.copy(this.#target.clone().sub(direction.clone().multiplyScalar(1 + scale)));
+        this._target.add(vector);
+        this._position.copy(this._target.clone().sub(direction.clone().multiplyScalar(1 + scale)));
 
         this.update();
     }
 
     lookAt(eye: Point, target: Point, up: Point): void {
-        this.#position.set(eye.x, eye.y, eye.z);
-        this.#target.set(target.x, target.y, target.z);
-        this.#up.set(up.x, up.y, up.z);
+        this._position.set(eye.x, eye.y, eye.z);
+        this._target.set(target.x, target.y, target.z);
+        this._up.set(up.x, up.y, up.z);
         this.update();
     }
 
     private mouseToWorld(mx: number, my: number) {
         let x = (2.0 * mx) / this.view.width! - 1;
         let y = (-2.0 * my) / this.view.height! + 1;
-        let dist = this.#position.distanceTo(this.#target);
-        let z = (this.#camera.far + this.#camera.near - 2 * dist) / (this.#camera.near - this.#camera.far);
+        let dist = this._position.distanceTo(this._target);
+        let z = (this._camera.far + this._camera.near - 2 * dist) / (this._camera.near - this._camera.far);
 
-        return new Vector3(x, y, z).unproject(this.#camera);
+        return new Vector3(x, y, z).unproject(this._camera);
     }
 }
diff --git a/packages/chili-three/src/threeHighlighter.ts b/packages/chili-three/src/threeHighlighter.ts
index 68c7735e..550afa36 100644
--- a/packages/chili-three/src/threeHighlighter.ts
+++ b/packages/chili-three/src/threeHighlighter.ts
@@ -3,19 +3,19 @@
 import { IHighlighter, IVisualShape, ShapeType, VisualState } from "chili-core";
 
 export class ThreeHighlighter implements IHighlighter {
-    readonly #stateMap = new Map<IVisualShape, Map<string, VisualState>>();
+    private readonly _stateMap = new Map<IVisualShape, Map<string, VisualState>>();
 
     clear(): void {
-        this.#stateMap.forEach((v, k) => {
+        this._stateMap.forEach((v, k) => {
             this.removeAllStates(k, true);
         });
-        this.#stateMap.clear();
+        this._stateMap.clear();
     }
 
     removeAllStates(shape: IVisualShape, resetState: boolean): void {
-        if (!this.#stateMap.has(shape)) return;
-        this.#stateMap.get(shape)!.clear();
-        this.#stateMap.delete(shape);
+        if (!this._stateMap.has(shape)) return;
+        this._stateMap.get(shape)!.clear();
+        this._stateMap.delete(shape);
         if (resetState) shape.resetState();
     }
 
@@ -26,10 +26,10 @@ export class ThreeHighlighter implements IHighlighter {
         type: ShapeType,
         index?: number,
     ) {
-        let map = this.#stateMap.get(shape);
+        let map = this._stateMap.get(shape);
         if (!map) {
             map = new Map();
-            this.#stateMap.set(shape, map);
+            this._stateMap.set(shape, map);
         }
 
         const key = `${type}_${index}`;
diff --git a/packages/chili-three/src/threeShape.ts b/packages/chili-three/src/threeShape.ts
index 8e27a87b..9f766f95 100644
--- a/packages/chili-three/src/threeShape.ts
+++ b/packages/chili-three/src/threeShape.ts
@@ -62,8 +62,8 @@ const selectedFaceMaterial = new MeshStandardMaterial({
 });
 
 export class ThreeShape extends Object3D implements IVisualShape {
-    readonly #highlightedFaces: Map<number, Mesh> = new Map();
-    readonly #highlightedEdges: Map<number, LineSegments> = new Map();
+    private readonly _highlightedFaces: Map<number, Mesh> = new Map();
+    private readonly _highlightedEdges: Map<number, LineSegments> = new Map();
 
     private _faceMaterial = new MeshStandardMaterial({
         side: DoubleSide,
@@ -210,27 +210,27 @@ export class ThreeShape extends Object3D implements IVisualShape {
         this.highlighter.removeAllStates(this, false);
         if (this._edges) this._edges.material = this._edgeMaterial;
         if (this._faces) this._faces.material = this._faceMaterial;
-        this.#highlightedEdges.forEach((_, index) => this.removeEdge(index));
-        this.#highlightedFaces.forEach((_, index) => this.removeFace(index));
-        this.#highlightedEdges.clear();
-        this.#highlightedFaces.clear();
+        this._highlightedEdges.forEach((_, index) => this.removeEdge(index));
+        this._highlightedFaces.forEach((_, index) => this.removeFace(index));
+        this._highlightedEdges.clear();
+        this._highlightedFaces.clear();
     }
 
     private removeEdge(index: number) {
-        let edge = this.#highlightedEdges.get(index);
+        let edge = this._highlightedEdges.get(index);
         if (edge) {
             this.remove(edge);
             edge.geometry.dispose();
-            this.#highlightedEdges.delete(index);
+            this._highlightedEdges.delete(index);
         }
     }
 
     private removeFace(index: number) {
-        let face = this.#highlightedFaces.get(index);
+        let face = this._highlightedFaces.get(index);
         if (face) {
             this.remove(face);
             face.geometry.dispose();
-            this.#highlightedFaces.delete(index);
+            this._highlightedFaces.delete(index);
         }
     }
 
@@ -245,12 +245,12 @@ export class ThreeShape extends Object3D implements IVisualShape {
         let material = VisualState.hasState(state, VisualState.selected)
             ? selectedEdgeMaterial
             : hilightEdgeMaterial;
-        if (this.#highlightedEdges.has(index)) {
-            this.#highlightedEdges.get(index)!.material = material;
+        if (this._highlightedEdges.has(index)) {
+            this._highlightedEdges.get(index)!.material = material;
         } else {
             let edge = this.cloneSubEdge(index, material);
             this.add(edge);
-            this.#highlightedEdges.set(index, edge);
+            this._highlightedEdges.set(index, edge);
         }
     }
 
@@ -276,13 +276,13 @@ export class ThreeShape extends Object3D implements IVisualShape {
         let material = VisualState.hasState(state, VisualState.selected)
             ? selectedFaceMaterial
             : highlightFaceMaterial;
-        if (this.#highlightedFaces.has(index)) {
-            this.#highlightedFaces.get(index)!.material = material;
+        if (this._highlightedFaces.has(index)) {
+            this._highlightedFaces.get(index)!.material = material;
         } else {
             let face = this.cloneSubFace(index, material);
             if (face) {
                 this.add(face);
-                this.#highlightedFaces.set(index, face);
+                this._highlightedFaces.set(index, face);
             }
         }
     }
diff --git a/packages/chili-three/src/threeTextGenerator.ts b/packages/chili-three/src/threeTextGenerator.ts
index 468c9a48..3ae81949 100644
--- a/packages/chili-three/src/threeTextGenerator.ts
+++ b/packages/chili-three/src/threeTextGenerator.ts
@@ -7,10 +7,10 @@ import { ThreeHelper } from "./threeHelper";
 import { ThreeMeshObject } from "./threeMeshObject";
 
 export class ThreeTextGenerator implements ITextGenerator {
-    readonly #fonts: Map<string, Font> = new Map();
+    private readonly _fonts: Map<string, Font> = new Map();
 
     async generate(text: string, size: number, color: Color, fontName = "fzhei") {
-        let font = await this.#getFont(fontName);
+        let font = await this._getFont(fontName);
         let shapes = font.generateShapes(text, size);
         const geometry = new ShapeGeometry(shapes);
         let material = new MeshBasicMaterial({
@@ -20,12 +20,12 @@ export class ThreeTextGenerator implements ITextGenerator {
         return new ThreeMeshObject(geometry, material);
     }
 
-    async #getFont(fontName: string) {
-        let font = this.#fonts.get(fontName);
+    private async _getFont(fontName: string) {
+        let font = this._fonts.get(fontName);
         if (!font) {
             const loader = new FontLoader();
             font = await loader.loadAsync(`fonts/${fontName}.json`);
-            this.#fonts.set(fontName, font);
+            this._fonts.set(fontName, font);
         }
         return font;
     }
diff --git a/packages/chili-three/src/threeView.ts b/packages/chili-three/src/threeView.ts
index d71dc8a0..7b54b952 100644
--- a/packages/chili-three/src/threeView.ts
+++ b/packages/chili-three/src/threeView.ts
@@ -40,14 +40,14 @@ import { ThreeVisualContext } from "./threeVisualContext";
 import { ViewGizmo } from "./viewGizmo";
 
 export class ThreeView extends Observable implements IView {
-    #dom?: HTMLElement;
-    #resizeObserver: ResizeObserver;
+    private _dom?: HTMLElement;
+    private _resizeObserver: ResizeObserver;
 
     private _scene: Scene;
     private _renderer: Renderer;
     private _workplane: Plane;
     private _needsUpdate: boolean = false;
-    readonly #gizmo: ViewGizmo;
+    private readonly _gizmo: ViewGizmo;
     readonly cameraController: CameraController;
     readonly dynamicLight = new DirectionalLight(0xffffff, 1.5);
 
@@ -79,17 +79,17 @@ export class ThreeView extends Observable implements IView {
         this._scene = content.scene;
         this._workplane = workplane;
         this._renderer = this.initRender();
-        let resizerObserverCallback = debounce(this.#resizerObserverCallback, 100);
-        this.#resizeObserver = new ResizeObserver(resizerObserverCallback);
+        let resizerObserverCallback = debounce(this._resizerObserverCallback, 100);
+        this._resizeObserver = new ResizeObserver(resizerObserverCallback);
         this.cameraController = new CameraController(this);
         this._scene.add(this.dynamicLight);
-        this.#gizmo = new ViewGizmo(this);
+        this._gizmo = new ViewGizmo(this);
         this.animate();
     }
 
     override dispose(): void {
         super.dispose();
-        this.#resizeObserver.disconnect();
+        this._resizeObserver.disconnect();
     }
 
     close(): void {
@@ -100,9 +100,9 @@ export class ThreeView extends Observable implements IView {
         this.dispose();
     }
 
-    #resizerObserverCallback = (entries: ResizeObserverEntry[]) => {
+    private _resizerObserverCallback = (entries: ResizeObserverEntry[]) => {
         for (const entry of entries) {
-            if (entry.target === this.#dom) {
+            if (entry.target === this._dom) {
                 this.resize(entry.contentRect.width, entry.contentRect.height);
                 return;
             }
@@ -124,16 +124,16 @@ export class ThreeView extends Observable implements IView {
     }
 
     setDom(element: HTMLElement) {
-        if (this.#dom) {
-            this.#resizeObserver.unobserve(this.#dom);
+        if (this._dom) {
+            this._resizeObserver.unobserve(this._dom);
         }
-        this.#dom = element;
-        this.#gizmo.remove();
-        element.appendChild(this.#gizmo);
+        this._dom = element;
+        this._gizmo.remove();
+        element.appendChild(this._gizmo);
         this._renderer.domElement.remove();
         element.appendChild(this._renderer.domElement);
         this.resize(element.clientWidth, element.clientHeight);
-        this.#resizeObserver.observe(element);
+        this._resizeObserver.observe(element);
         this.cameraController.update();
     }
 
@@ -153,14 +153,14 @@ export class ThreeView extends Observable implements IView {
     setCursor(cursorType: CursorType): void {
         if (cursorType === CursorType.Default) {
             let classes = new Array<string>();
-            this.#dom?.classList.forEach((x) => {
+            this._dom?.classList.forEach((x) => {
                 if (x.includes("Cursor")) {
                     classes.push(x);
                 }
             });
-            this.#dom?.classList.remove(...classes);
+            this._dom?.classList.remove(...classes);
         }
-        if (CursorType.Drawing === cursorType) this.#dom?.classList.add("drawingCursor");
+        if (CursorType.Drawing === cursorType) this._dom?.classList.add("drawingCursor");
     }
 
     update() {
@@ -174,7 +174,7 @@ export class ThreeView extends Observable implements IView {
         if (this._needsUpdate) {
             this._renderer.render(this._scene, this.camera);
             this.dynamicLight.position.copy(this.camera.position);
-            this.#gizmo.update();
+            this._gizmo.update();
             this._needsUpdate = false;
         }
     }
@@ -191,11 +191,11 @@ export class ThreeView extends Observable implements IView {
     }
 
     get width() {
-        return this.#dom?.clientWidth;
+        return this._dom?.clientWidth;
     }
 
     get height() {
-        return this.#dom?.clientHeight;
+        return this._dom?.clientHeight;
     }
 
     screenToCameraRect(mx: number, my: number) {
diff --git a/packages/chili-three/src/threeVisual.ts b/packages/chili-three/src/threeVisual.ts
index 88fc801d..90d1e2c2 100644
--- a/packages/chili-three/src/threeVisual.ts
+++ b/packages/chili-three/src/threeVisual.ts
@@ -11,7 +11,7 @@ import {
     Logger,
 } from "chili-core";
 import { ModelSelectionHandler } from "chili-vis";
-import { AmbientLight, AxesHelper, Color, DirectionalLight, Light, Object3D, Scene } from "three";
+import { AmbientLight, AxesHelper, Color, DirectionalLight, Object3D, Scene } from "three";
 import { ThreeHighlighter } from "./threeHighlighter";
 import { ThreeTextGenerator } from "./threeTextGenerator";
 import { ThreeViewHandler } from "./threeViewEventHandler";
@@ -29,15 +29,15 @@ export class ThreeVisual implements IVisual {
     readonly highlighter: IHighlighter;
     readonly textGenerator: ITextGenerator;
 
-    #eventHandler: IEventHandler;
+    private _eventHandler: IEventHandler;
 
     get eventHandler() {
-        return this.#eventHandler;
+        return this._eventHandler;
     }
 
     set eventHandler(value: IEventHandler) {
-        if (this.#eventHandler === value) return;
-        this.#eventHandler = value;
+        if (this._eventHandler === value) return;
+        this._eventHandler = value;
         Logger.info(`Changed EventHandler to ${Object.getPrototypeOf(value).constructor.name}`);
     }
 
@@ -49,7 +49,7 @@ export class ThreeVisual implements IVisual {
         this.viewHandler = new ThreeViewHandler();
         this.highlighter = new ThreeHighlighter();
         this.textGenerator = new ThreeTextGenerator();
-        this.#eventHandler = this.defaultEventHandler;
+        this._eventHandler = this.defaultEventHandler;
     }
 
     initScene() {
@@ -75,7 +75,7 @@ export class ThreeVisual implements IVisual {
         this.viewer.dispose();
         this.defaultEventHandler.dispose();
         this.viewHandler.dispose();
-        this.#eventHandler.dispose();
+        this._eventHandler.dispose();
         this.scene.traverse((x) => {
             if (IDisposable.isDisposable(x)) x.dispose();
         });
diff --git a/packages/chili-three/src/viewGizmo.ts b/packages/chili-three/src/viewGizmo.ts
index c43298c2..5e8260e9 100644
--- a/packages/chili-three/src/viewGizmo.ts
+++ b/packages/chili-three/src/viewGizmo.ts
@@ -1,9 +1,9 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
+import { XYZ } from "chili-core";
 import { Matrix4, Vector3 } from "three";
 import { CameraController } from "./cameraController";
 import { ThreeView } from "./threeView";
-import { XYZ } from "chili-core";
 
 const options = {
     size: 200,
@@ -34,26 +34,26 @@ export interface Axis {
 }
 
 export class ViewGizmo extends HTMLElement {
-    readonly #axes: Axis[];
-    readonly #center: Vector3;
-    readonly #canvas: HTMLCanvasElement;
-    readonly #context: CanvasRenderingContext2D;
+    private readonly _axes: Axis[];
+    private readonly _center: Vector3;
+    private readonly _canvas: HTMLCanvasElement;
+    private readonly _context: CanvasRenderingContext2D;
     readonly cameraController: CameraController;
-    #canClick: boolean = true;
-    #selectedAxis?: Axis;
-    #mouse?: Vector3;
+    private _canClick: boolean = true;
+    private _selectedAxis?: Axis;
+    private _mouse?: Vector3;
 
     constructor(readonly view: ThreeView) {
         super();
         this.cameraController = view.cameraController;
-        this.#axes = this.#initAxes();
-        this.#center = new Vector3(options.size * 0.5, options.size * 0.5, 0);
-        this.#canvas = this.#initCanvas();
-        this.#context = this.#canvas.getContext("2d")!;
-        this.#initStyle();
+        this._axes = this._initAxes();
+        this._center = new Vector3(options.size * 0.5, options.size * 0.5, 0);
+        this._canvas = this._initCanvas();
+        this._context = this._canvas.getContext("2d")!;
+        this._initStyle();
     }
 
-    #initStyle() {
+    private _initStyle() {
         this.style.position = "absolute";
         this.style.top = "20px";
         this.style.right = "20px";
@@ -61,7 +61,7 @@ export class ViewGizmo extends HTMLElement {
         this.style.cursor = "pointer";
     }
 
-    #initCanvas() {
+    private _initCanvas() {
         let canvas = document.createElement("canvas");
         canvas.width = options.size;
         canvas.height = options.size;
@@ -71,7 +71,7 @@ export class ViewGizmo extends HTMLElement {
         return canvas;
     }
 
-    #initAxes() {
+    private _initAxes() {
         return [
             {
                 axis: "x",
@@ -125,54 +125,54 @@ export class ViewGizmo extends HTMLElement {
     }
 
     connectedCallback() {
-        this.#canvas.addEventListener("pointermove", this.#onPointerMove, false);
-        this.#canvas.addEventListener("pointerenter", this.#onPointerEnter, false);
-        this.#canvas.addEventListener("pointerout", this.#onPointerOut, false);
-        this.#canvas.addEventListener("click", this.#onClick, false);
+        this._canvas.addEventListener("pointermove", this._onPointerMove, false);
+        this._canvas.addEventListener("pointerenter", this._onPointerEnter, false);
+        this._canvas.addEventListener("pointerout", this._onPointerOut, false);
+        this._canvas.addEventListener("click", this._onClick, false);
     }
 
     disconnectedCallback() {
-        this.#canvas.removeEventListener("pointermove", this.#onPointerMove, false);
-        this.#canvas.removeEventListener("pointerenter", this.#onPointerEnter, false);
-        this.#canvas.removeEventListener("pointerout", this.#onPointerOut, false);
-        this.#canvas.removeEventListener("click", this.#onClick, false);
+        this._canvas.removeEventListener("pointermove", this._onPointerMove, false);
+        this._canvas.removeEventListener("pointerenter", this._onPointerEnter, false);
+        this._canvas.removeEventListener("pointerout", this._onPointerOut, false);
+        this._canvas.removeEventListener("click", this._onClick, false);
     }
 
-    #onPointerMove = (e: PointerEvent) => {
+    private _onPointerMove = (e: PointerEvent) => {
         e.stopPropagation();
         if (e.buttons === 1 && !(e.movementX === 0 && e.movementY === 0)) {
             this.cameraController.rotate(e.movementX * 4, e.movementY * 4);
-            this.#canClick = false;
+            this._canClick = false;
         }
-        const rect = this.#canvas.getBoundingClientRect();
-        this.#mouse = new Vector3(e.clientX - rect.left, e.clientY - rect.top, 0).multiplyScalar(2);
+        const rect = this._canvas.getBoundingClientRect();
+        this._mouse = new Vector3(e.clientX - rect.left, e.clientY - rect.top, 0).multiplyScalar(2);
         this.view.update();
     };
 
-    #onPointerOut = (e: PointerEvent) => {
-        this.#mouse = undefined;
+    private _onPointerOut = (e: PointerEvent) => {
+        this._mouse = undefined;
         this.style.backgroundColor = "transparent";
     };
 
-    #onPointerEnter = (e: PointerEvent) => {
+    private _onPointerEnter = (e: PointerEvent) => {
         this.style.backgroundColor = "rgba(255, 255, 255, .2)";
     };
 
-    #onClick = (e: MouseEvent) => {
-        if (!this.#canClick) {
-            this.#canClick = true;
+    private _onClick = (e: MouseEvent) => {
+        if (!this._canClick) {
+            this._canClick = true;
             return;
         }
-        if (this.#selectedAxis) {
+        if (this._selectedAxis) {
             let distance = this.cameraController.camera.position.distanceTo(this.cameraController.target);
-            let position = this.#selectedAxis.direction
+            let position = this._selectedAxis.direction
                 .clone()
                 .multiplyScalar(distance)
                 .add(this.cameraController.target);
             this.cameraController.camera.position.copy(position);
             let up = new XYZ(0, 0, 1);
-            if (this.#selectedAxis.axis === "z") up = new XYZ(0, 1, 0);
-            else if (this.#selectedAxis.axis === "-z") up = new XYZ(0, -1, 0);
+            if (this._selectedAxis.axis === "z") up = new XYZ(0, 1, 0);
+            else if (this._selectedAxis.axis === "-z") up = new XYZ(0, -1, 0);
             this.cameraController.lookAt(
                 this.cameraController.camera.position,
                 this.cameraController.target,
@@ -182,30 +182,30 @@ export class ViewGizmo extends HTMLElement {
     };
 
     clear() {
-        this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
+        this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
     }
 
     update() {
         this.clear();
         let invRotMat = new Matrix4().makeRotationFromEuler(this.cameraController.camera.rotation).invert();
-        this.#axes.forEach(
+        this._axes.forEach(
             (axis) =>
                 (axis.position = this.getBubblePosition(axis.direction.clone().applyMatrix4(invRotMat))),
         );
-        this.#axes.sort((a, b) => a.position.z - b.position.z);
-        this.setSelectedAxis(this.#axes);
-        this.drawAxes(this.#axes);
+        this._axes.sort((a, b) => a.position.z - b.position.z);
+        this.setSelectedAxis(this._axes);
+        this.drawAxes(this._axes);
     }
 
     private setSelectedAxis(axes: Axis[]) {
-        this.#selectedAxis = undefined;
-        if (this.#mouse && this.#canClick) {
+        this._selectedAxis = undefined;
+        if (this._mouse && this._canClick) {
             let closestDist = Infinity;
             for (let axis of axes) {
-                const distance = this.#mouse.distanceTo(axis.position);
+                const distance = this._mouse.distanceTo(axis.position);
                 if (distance < closestDist && distance < axis.size) {
                     closestDist = distance;
-                    this.#selectedAxis = axis;
+                    this._selectedAxis = axis;
                 }
             }
         }
@@ -215,14 +215,14 @@ export class ViewGizmo extends HTMLElement {
         for (let axis of axes) {
             let color = this.getAxisColor(axis);
             this.drawCircle(axis.position, axis.size, color);
-            this.drawLine(this.#center, axis.position, color, axis.line);
+            this.drawLine(this._center, axis.position, color, axis.line);
             this.drawLabel(axis);
         }
     }
 
     private getAxisColor(axis: Axis) {
         let color;
-        if (this.#selectedAxis === axis) {
+        if (this._selectedAxis === axis) {
             color = "#FFFFFF";
         } else if (axis.position.z >= -0.01) {
             color = axis.color[0];
@@ -233,39 +233,39 @@ export class ViewGizmo extends HTMLElement {
     }
 
     private drawCircle(p: Vector3, radius = 10, color = "#FF0000") {
-        this.#context.beginPath();
-        this.#context.arc(p.x, p.y, radius, 0, 2 * Math.PI, false);
-        this.#context.fillStyle = color;
-        this.#context.fill();
-        this.#context.closePath();
+        this._context.beginPath();
+        this._context.arc(p.x, p.y, radius, 0, 2 * Math.PI, false);
+        this._context.fillStyle = color;
+        this._context.fill();
+        this._context.closePath();
     }
 
     private drawLine(p1: Vector3, p2: Vector3, color: string, width?: number) {
         if (width) {
-            this.#context.beginPath();
-            this.#context.moveTo(p1.x, p1.y);
-            this.#context.lineTo(p2.x, p2.y);
-            this.#context.lineWidth = width;
-            this.#context.strokeStyle = color;
-            this.#context.stroke();
-            this.#context.closePath();
+            this._context.beginPath();
+            this._context.moveTo(p1.x, p1.y);
+            this._context.lineTo(p2.x, p2.y);
+            this._context.lineWidth = width;
+            this._context.strokeStyle = color;
+            this._context.stroke();
+            this._context.closePath();
         }
     }
 
     private drawLabel(axis: Axis) {
         if (axis.label) {
-            this.#context.font = [options.fontSize, options.fontFamily].join(" ");
-            this.#context.fillStyle = options.fontColor;
-            this.#context.textBaseline = "middle";
-            this.#context.textAlign = "center";
-            this.#context.fillText(axis.label, axis.position.x, axis.position.y + options.fontYAdjust);
+            this._context.font = [options.fontSize, options.fontFamily].join(" ");
+            this._context.fillStyle = options.fontColor;
+            this._context.textBaseline = "middle";
+            this._context.textAlign = "center";
+            this._context.fillText(axis.label, axis.position.x, axis.position.y + options.fontYAdjust);
         }
     }
 
     private getBubblePosition(vector: Vector3) {
         return new Vector3(
-            vector.x * (this.#center.x - options.bubbleSizePrimary / 2 - options.padding) + this.#center.x,
-            this.#center.y - vector.y * (this.#center.y - options.bubbleSizePrimary / 2 - options.padding),
+            vector.x * (this._center.x - options.bubbleSizePrimary / 2 - options.padding) + this._center.x,
+            this._center.y - vector.y * (this._center.y - options.bubbleSizePrimary / 2 - options.padding),
             vector.z,
         );
     }
diff --git a/packages/chili-ui/src/components/items.ts b/packages/chili-ui/src/components/items.ts
index 41be29ee..c0cb1fa3 100644
--- a/packages/chili-ui/src/components/items.ts
+++ b/packages/chili-ui/src/components/items.ts
@@ -9,74 +9,74 @@ export type ItemsConfig<T> = HTMLConfig<ItemsElement<T>> & {
 };
 
 export class ItemsElement<T> extends HTMLElement {
-    #itemMap = new Map<T, HTMLElement | SVGSVGElement>();
+    private _itemMap = new Map<T, HTMLElement | SVGSVGElement>();
     constructor(readonly props: ItemsConfig<T>) {
         super();
         setProperties(this, props as any);
         const items = Array.isArray(props.sources) ? props.sources : props.sources.items;
-        this.append(...this.#mapItems(items));
+        this.append(...this._mapItems(items));
     }
 
     getItem(item: any): HTMLElement | SVGSVGElement | undefined {
-        return this.#itemMap.get(item);
+        return this._itemMap.get(item);
     }
 
     connectedCallback() {
         if (this.props.sources instanceof ObservableCollection)
-            this.props.sources.onCollectionChanged(this.#onCollectionChanged);
+            this.props.sources.onCollectionChanged(this._onCollectionChanged);
     }
 
     disconnectedCallback() {
         if (this.props.sources instanceof ObservableCollection)
-            this.props.sources.removeCollectionChanged(this.#onCollectionChanged);
+            this.props.sources.removeCollectionChanged(this._onCollectionChanged);
     }
 
-    #onCollectionChanged = (args: CollectionChangedArgs) => {
+    private _onCollectionChanged = (args: CollectionChangedArgs) => {
         if (args.action === CollectionAction.add) {
-            this.append(...this.#mapItems(args.items));
+            this.append(...this._mapItems(args.items));
         } else if (args.action === CollectionAction.remove) {
-            this.#removeItem(args.items);
+            this._removeItem(args.items);
         } else if (args.action === CollectionAction.move) {
-            this.#moveItem(args.from, args.to);
+            this._moveItem(args.from, args.to);
         } else if (args.action === CollectionAction.replace) {
-            this.#replaceItem(args.item, args.items);
+            this._replaceItem(args.item, args.items);
         } else {
             throw new Error("Unknown collection action");
         }
     };
 
-    #moveItem(from: number, to: number) {
+    private _moveItem(from: number, to: number) {
         let item1 = this.children.item(from);
         let item2 = this.children.item(to);
         if (item1 && item2) this.insertBefore(item1, item2);
     }
 
-    #replaceItem(item: any, items: any[]) {
-        let child = this.#itemMap.get(item);
+    private _replaceItem(item: any, items: any[]) {
+        let child = this._itemMap.get(item);
         if (child) {
             items.forEach((item) => {
                 let e = this.props.template(item);
-                this.#itemMap.set(item, e);
+                this._itemMap.set(item, e);
                 this.insertBefore(e, child!);
             });
-            this.#removeItem([item]);
+            this._removeItem([item]);
         }
     }
 
-    #mapItems(items: any[]) {
+    private _mapItems(items: any[]) {
         return items.map((item) => {
-            if (this.#itemMap.has(item)) return this.#itemMap.get(item)!;
+            if (this._itemMap.has(item)) return this._itemMap.get(item)!;
             let e = this.props.template(item);
-            this.#itemMap.set(item, e);
+            this._itemMap.set(item, e);
             return e;
         });
     }
 
-    #removeItem(items: any[]) {
+    private _removeItem(items: any[]) {
         items.forEach((item) => {
-            if (this.#itemMap.has(item)) {
-                this.removeChild(this.#itemMap.get(item)!);
-                this.#itemMap.delete(item);
+            if (this._itemMap.has(item)) {
+                this.removeChild(this._itemMap.get(item)!);
+                this._itemMap.delete(item);
             }
         });
     }
diff --git a/packages/chili-ui/src/components/okCancel.ts b/packages/chili-ui/src/components/okCancel.ts
index 8aae5a10..59ec1e9f 100644
--- a/packages/chili-ui/src/components/okCancel.ts
+++ b/packages/chili-ui/src/components/okCancel.ts
@@ -22,7 +22,7 @@ export class OKCancel extends BindableElement {
                     div(
                         {
                             className: style.icon,
-                            onclick: this.#onConfirm,
+                            onclick: this._onConfirm,
                         },
                         svg({ icon: "icon-confirm" }),
                         span({ textContent: I18n.translate("common.confirm") }),
@@ -30,7 +30,7 @@ export class OKCancel extends BindableElement {
                     div(
                         {
                             className: style.icon,
-                            onclick: this.#onCancel,
+                            onclick: this._onCancel,
                         },
                         svg({ icon: "icon-cancel" }),
                         span({ textContent: I18n.translate("common.cancel") }),
@@ -44,11 +44,11 @@ export class OKCancel extends BindableElement {
         this.control = control;
     }
 
-    #onConfirm = () => {
+    private _onConfirm = () => {
         this.control?.success();
     };
 
-    #onCancel = () => {
+    private _onCancel = () => {
         this.control?.cancel();
     };
 }
diff --git a/packages/chili-ui/src/controls/binding.ts b/packages/chili-ui/src/controls/binding.ts
index 7fa192aa..14709092 100644
--- a/packages/chili-ui/src/controls/binding.ts
+++ b/packages/chili-ui/src/controls/binding.ts
@@ -3,7 +3,7 @@
 import { IConverter, IDisposable, IPropertyChanged } from "chili-core";
 
 export class Binding<T extends IPropertyChanged = IPropertyChanged> implements IDisposable {
-    #targets: [element: WeakRef<object>, property: any][] = [];
+    private _targets: [element: WeakRef<object>, property: any][] = [];
 
     constructor(
         public readonly source: T,
@@ -12,23 +12,23 @@ export class Binding<T extends IPropertyChanged = IPropertyChanged> implements I
     ) {}
 
     setBinding<U extends object>(element: U, property: keyof U) {
-        this.#targets.push([new WeakRef(element), property]);
+        this._targets.push([new WeakRef(element), property]);
         this.setValue<U>(element, property);
     }
 
     startObserver() {
-        this.source.onPropertyChanged(this.#onPropertyChanged);
+        this.source.onPropertyChanged(this._onPropertyChanged);
     }
 
     stopObserver() {
-        this.source.removePropertyChanged(this.#onPropertyChanged);
+        this.source.removePropertyChanged(this._onPropertyChanged);
     }
 
-    #onPropertyChanged = (property: keyof T) => {
+    private _onPropertyChanged = (property: keyof T) => {
         if (property === this.path) {
             let newItems = [],
                 changed = false;
-            for (let item of this.#targets) {
+            for (let item of this._targets) {
                 let element = item[0].deref();
                 if (element) {
                     this.setValue(element, item[1]);
@@ -37,7 +37,7 @@ export class Binding<T extends IPropertyChanged = IPropertyChanged> implements I
                     changed = true;
                 }
             }
-            if (changed) this.#targets = newItems;
+            if (changed) this._targets = newItems;
         }
     };
 
@@ -55,6 +55,6 @@ export class Binding<T extends IPropertyChanged = IPropertyChanged> implements I
 
     dispose(): void {
         this.stopObserver();
-        this.#targets.length = 0;
+        this._targets.length = 0;
     }
 }
diff --git a/packages/chili-ui/src/controls/element.ts b/packages/chili-ui/src/controls/element.ts
index 4ed88c0e..fed0519d 100644
--- a/packages/chili-ui/src/controls/element.ts
+++ b/packages/chili-ui/src/controls/element.ts
@@ -4,24 +4,24 @@ import { IConverter, IDisposable, IPropertyChanged } from "chili-core";
 import { Binding } from "./binding";
 
 export abstract class BindableElement extends HTMLElement implements IDisposable {
-    readonly #bindings: Binding<any>[] = [];
+    private readonly _bindings: Binding<any>[] = [];
 
     bind<T extends IPropertyChanged>(dataContext: T, path: keyof T, converter?: IConverter): Binding {
         let binding = new Binding(dataContext, path, converter);
-        this.#bindings.push(binding);
+        this._bindings.push(binding);
         return binding as any;
     }
 
     connectedCallback() {
-        this.#bindings.forEach((binding) => binding.startObserver());
+        this._bindings.forEach((binding) => binding.startObserver());
     }
 
     disconnectedCallback() {
-        this.#bindings.forEach((binding) => binding.stopObserver());
+        this._bindings.forEach((binding) => binding.stopObserver());
     }
 
     dispose(): void {
-        this.#bindings.forEach((binding) => binding.dispose());
-        this.#bindings.length = 0;
+        this._bindings.forEach((binding) => binding.dispose());
+        this._bindings.length = 0;
     }
 }
diff --git a/packages/chili-ui/src/controls/itemsControl.ts b/packages/chili-ui/src/controls/itemsControl.ts
index 9029920d..2771a3ed 100644
--- a/packages/chili-ui/src/controls/itemsControl.ts
+++ b/packages/chili-ui/src/controls/itemsControl.ts
@@ -1,8 +1,8 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
 import { SelectableItems } from "chili-core";
-import style from "./itemsControl.module.css";
 import { div, input, li, span, ul } from "./controls";
+import style from "./itemsControl.module.css";
 
 export class RadioGroup extends HTMLElement {
     constructor(
@@ -29,14 +29,14 @@ export class RadioGroup extends HTMLElement {
     }
 
     connectedCallback() {
-        this.addEventListener("click", this.#onClick);
+        this.addEventListener("click", this._onClick);
     }
 
     disconnectedCallback() {
-        this.removeEventListener("click", this.#onClick);
+        this.removeEventListener("click", this._onClick);
     }
 
-    #onClick = (e: MouseEvent) => {
+    private _onClick = (e: MouseEvent) => {
         const target = e.target as HTMLInputElement;
         if (target?.type === "radio") {
             this.querySelectorAll("input").forEach((x) => {
diff --git a/packages/chili-ui/src/mainWindow.ts b/packages/chili-ui/src/mainWindow.ts
index c0ec768b..fb11d2e8 100644
--- a/packages/chili-ui/src/mainWindow.ts
+++ b/packages/chili-ui/src/mainWindow.ts
@@ -9,12 +9,12 @@ import { Toast } from "./toast";
 document.oncontextmenu = (e) => e.preventDefault();
 
 export class MainWindow {
-    static readonly #instance = new MainWindow();
+    private static readonly _instance = new MainWindow();
     static get instance() {
-        return this.#instance;
+        return this._instance;
     }
 
-    #home?: HTMLElement;
+    private _home?: HTMLElement;
 
     private constructor() {
         this.setTheme("light");
@@ -31,9 +31,9 @@ export class MainWindow {
     }
 
     private displayHome = (app: IApplication, displayHome: boolean) => {
-        if (this.#home) {
-            this.#home.remove();
-            this.#home = undefined;
+        if (this._home) {
+            this._home.remove();
+            this._home = undefined;
         }
         if (displayHome) {
             this._initHome(app);
@@ -41,8 +41,8 @@ export class MainWindow {
     };
 
     private async _initHome(app: IApplication) {
-        this.#home = await Home(app);
-        document.body.append(this.#home);
+        this._home = await Home(app);
+        document.body.append(this._home);
     }
 
     setTheme(theme: "light" | "dark") {
diff --git a/packages/chili-ui/src/project/projectView.ts b/packages/chili-ui/src/project/projectView.ts
index 0f45e3c4..c268fd36 100644
--- a/packages/chili-ui/src/project/projectView.ts
+++ b/packages/chili-ui/src/project/projectView.ts
@@ -8,11 +8,11 @@ import { BindableElement, div, localize, span } from "../controls";
 import style from "./projectView.module.css";
 
 export class ProjectView extends BindableElement {
-    readonly #documentTreeMap = new WeakMap<IDocument, Tree>();
+    private readonly _documentTreeMap = new WeakMap<IDocument, Tree>();
 
-    #activeDocument: IDocument | undefined;
+    private _activeDocument: IDocument | undefined;
     get activeDocument() {
-        return this.#activeDocument;
+        return this._activeDocument;
     }
 
     private panel: HTMLDivElement;
@@ -39,29 +39,29 @@ export class ProjectView extends BindableElement {
     }
 
     activeTree() {
-        if (!this.#activeDocument) return undefined;
-        return this.#documentTreeMap.get(this.#activeDocument);
+        if (!this._activeDocument) return undefined;
+        return this._documentTreeMap.get(this._activeDocument);
     }
 
     private handleDocumentClosed = (document: IDocument) => {
-        let tree = this.#documentTreeMap.get(document);
+        let tree = this._documentTreeMap.get(document);
         if (tree) this.panel.removeChild(tree);
-        this.#documentTreeMap.delete(document);
-        this.#activeDocument = undefined;
+        this._documentTreeMap.delete(document);
+        this._activeDocument = undefined;
     };
 
     private handleactiveDocumentChanged = (document: IDocument | undefined) => {
-        if (this.#activeDocument !== undefined && this.#documentTreeMap.has(this.#activeDocument)) {
-            let tree = this.#documentTreeMap.get(this.#activeDocument)!;
+        if (this._activeDocument !== undefined && this._documentTreeMap.has(this._activeDocument)) {
+            let tree = this._documentTreeMap.get(this._activeDocument)!;
             this.panel.removeChild(tree);
         }
-        this.#activeDocument = document;
+        this._activeDocument = document;
         if (document === undefined) return;
 
-        let tree = this.#documentTreeMap.get(document);
+        let tree = this._documentTreeMap.get(document);
         if (tree === undefined) {
             tree = new Tree(document);
-            this.#documentTreeMap.set(document, tree);
+            this._documentTreeMap.set(document, tree);
         }
         this.panel.append(tree);
     };
diff --git a/packages/chili-ui/src/ribbon/ribbon.ts b/packages/chili-ui/src/ribbon/ribbon.ts
index 40100362..10df34ab 100644
--- a/packages/chili-ui/src/ribbon/ribbon.ts
+++ b/packages/chili-ui/src/ribbon/ribbon.ts
@@ -19,7 +19,7 @@ import { RibbonGroupData, RibbonTabData } from "./ribbonData";
 import { RibbonGroup } from "./ribbonGroup";
 
 export class RibbonDataContent extends Observable {
-    #document: IDocument | undefined;
+    private _document: IDocument | undefined;
     readonly quickCommands = new ObservableCollection<CommandKeys>();
     readonly ribbonTabs = new ObservableCollection<RibbonTabData>();
 
@@ -44,29 +44,29 @@ export class RibbonDataContent extends Observable {
         this.quickCommands.add(...quickCommands);
         this.ribbonTabs.add(...ribbonTabs);
         this._activeTab = ribbonTabs[0];
-        PubSub.default.sub("activeDocumentChanged", this.#documentChanged);
+        PubSub.default.sub("activeDocumentChanged", this._documentChanged);
     }
 
-    #documentChanged = (document: IDocument | undefined) => {
-        if (this.#document === document) return;
-        if (this.#document) {
-            this.#document.removePropertyChanged(this.#onDocumentPropertyChanged);
+    private _documentChanged = (document: IDocument | undefined) => {
+        if (this._document === document) return;
+        if (this._document) {
+            this._document.removePropertyChanged(this._onDocumentPropertyChanged);
         }
-        this.#document = document;
+        this._document = document;
         this.documentName = document?.name;
-        this.#document?.onPropertyChanged(this.#onDocumentPropertyChanged);
+        this._document?.onPropertyChanged(this._onDocumentPropertyChanged);
     };
 
-    #onDocumentPropertyChanged = (property: keyof IDocument) => {
+    private _onDocumentPropertyChanged = (property: keyof IDocument) => {
         if (property === "name") {
-            this.documentName = this.#document?.name ?? "undefined";
+            this.documentName = this._document?.name ?? "undefined";
         }
     };
 
     override dispose(): void {
         super.dispose();
-        PubSub.default.remove("activeDocumentChanged", this.#documentChanged);
-        this.#document?.removePropertyChanged(this.#onDocumentPropertyChanged);
+        PubSub.default.remove("activeDocumentChanged", this._documentChanged);
+        this._document?.removePropertyChanged(this._onDocumentPropertyChanged);
     }
 }
 
@@ -113,7 +113,7 @@ class DisplayConverter implements IConverter<RibbonTabData> {
 }
 
 export class Ribbon extends BindableElement {
-    #commandContextContainer = div({ className: style.commandContextPanel });
+    private _commandContextContainer = div({ className: style.commandContextPanel });
 
     constructor(readonly dataContent: RibbonDataContent) {
         super();
@@ -180,7 +180,7 @@ export class Ribbon extends BindableElement {
                     });
                 },
             }),
-            this.#commandContextContainer,
+            this._commandContextContainer,
         );
     }
 
@@ -197,11 +197,11 @@ export class Ribbon extends BindableElement {
     }
 
     private openContext = (command: ICommand) => {
-        this.#commandContextContainer.append(new CommandContext(command));
+        this._commandContextContainer.append(new CommandContext(command));
     };
 
     private closeContext = () => {
-        this.#commandContextContainer.innerHTML = "";
+        this._commandContextContainer.innerHTML = "";
     };
 }
 
diff --git a/packages/chili-ui/src/toast/toast.ts b/packages/chili-ui/src/toast/toast.ts
index cffb2e2d..223c3f7c 100644
--- a/packages/chili-ui/src/toast/toast.ts
+++ b/packages/chili-ui/src/toast/toast.ts
@@ -1,24 +1,24 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
 import { I18n, I18nKeys } from "chili-core";
-import style from "./toast.module.css";
 import { label } from "../controls";
+import style from "./toast.module.css";
 
 export class Toast {
-    static #lastToast: [number, HTMLElement] | undefined;
+    private static _lastToast: [number, HTMLElement] | undefined;
 
     static show = (message: I18nKeys, ...args: any[]) => {
-        if (this.#lastToast) {
-            clearTimeout(this.#lastToast[0]);
-            this.#lastToast[1].remove();
+        if (this._lastToast) {
+            clearTimeout(this._lastToast[0]);
+            this._lastToast[1].remove();
         }
 
         const toast = label({ className: style.toast, textContent: I18n.translate(message, ...args) });
         document.body.appendChild(toast);
-        this.#lastToast = [
+        this._lastToast = [
             window.setTimeout(() => {
                 toast.remove();
-                this.#lastToast = undefined;
+                this._lastToast = undefined;
             }, 2000),
             toast,
         ];
diff --git a/packages/chili-ui/src/viewport/layoutViewport.ts b/packages/chili-ui/src/viewport/layoutViewport.ts
index 6f703543..f99d1ae1 100644
--- a/packages/chili-ui/src/viewport/layoutViewport.ts
+++ b/packages/chili-ui/src/viewport/layoutViewport.ts
@@ -7,44 +7,44 @@ import style from "./layoutViewport.module.css";
 import { Viewport } from "./viewport";
 
 export class LayoutViewport extends BindableElement {
-    readonly #selectionController: OKCancel;
-    readonly #viewports: Viewport[] = [];
+    private readonly _selectionController: OKCancel;
+    private readonly _viewports: Viewport[] = [];
 
     constructor() {
         super();
         this.className = style.root;
-        this.#selectionController = new OKCancel();
-        this.append(this.#selectionController);
+        this._selectionController = new OKCancel();
+        this.append(this._selectionController);
         this.clearSelectionControl();
     }
 
     override connectedCallback(): void {
         super.connectedCallback();
-        PubSub.default.sub("activeViewChanged", this.#handleActiveViewChanged);
-        PubSub.default.sub("activeDocumentChanged", this.#handleActiveDocumentChanged);
-        PubSub.default.sub("documentClosed", this.#handleDocumentClosed);
+        PubSub.default.sub("activeViewChanged", this._handleActiveViewChanged);
+        PubSub.default.sub("activeDocumentChanged", this._handleActiveDocumentChanged);
+        PubSub.default.sub("documentClosed", this._handleDocumentClosed);
         PubSub.default.sub("showSelectionControl", this.showSelectionControl);
         PubSub.default.sub("clearSelectionControl", this.clearSelectionControl);
     }
 
     override disconnectedCallback(): void {
         super.disconnectedCallback();
-        PubSub.default.remove("activeViewChanged", this.#handleActiveViewChanged);
-        PubSub.default.remove("activeDocumentChanged", this.#handleActiveDocumentChanged);
-        PubSub.default.remove("documentClosed", this.#handleDocumentClosed);
+        PubSub.default.remove("activeViewChanged", this._handleActiveViewChanged);
+        PubSub.default.remove("activeDocumentChanged", this._handleActiveDocumentChanged);
+        PubSub.default.remove("documentClosed", this._handleDocumentClosed);
         PubSub.default.remove("showSelectionControl", this.showSelectionControl);
         PubSub.default.remove("clearSelectionControl", this.clearSelectionControl);
     }
 
-    #handleDocumentClosed = (document: IDocument) => {
+    private _handleDocumentClosed = (document: IDocument) => {
         this.clearViewports();
     };
 
     private clearViewports() {
-        this.#viewports.forEach((v) => {
+        this._viewports.forEach((v) => {
             v.view.close();
         });
-        this.#viewports.length = 0;
+        this._viewports.length = 0;
     }
 
     private createView(document: IDocument) {
@@ -53,33 +53,33 @@ export class LayoutViewport extends BindableElement {
         let viewport = new Viewport(view);
         viewport.classList.add(style.viewport);
         this.appendChild(viewport);
-        this.#viewports.push(viewport);
+        this._viewports.push(viewport);
         view.setDom(viewport);
         document.visual.viewer.update();
     }
 
-    #handleActiveViewChanged = (view: IView | undefined) => {
-        this.#viewports.forEach((v) => {
+    private _handleActiveViewChanged = (view: IView | undefined) => {
+        this._viewports.forEach((v) => {
             v.setActive(v.view === view);
         });
     };
 
-    #handleActiveDocumentChanged = (document: IDocument | undefined) => {
+    private _handleActiveDocumentChanged = (document: IDocument | undefined) => {
         this.clearViewports();
         if (document !== undefined) {
             this.createView(document);
-            document.visual.viewer.activeView = this.#viewports.at(-1)?.view;
+            document.visual.viewer.activeView = this._viewports.at(-1)?.view;
         }
     };
 
     private showSelectionControl = (controller: AsyncController) => {
-        this.#selectionController.setControl(controller);
-        this.#selectionController.style.visibility = "visible";
+        this._selectionController.setControl(controller);
+        this._selectionController.style.visibility = "visible";
     };
 
     private clearSelectionControl = () => {
-        this.#selectionController.setControl(undefined);
-        this.#selectionController.style.visibility = "hidden";
+        this._selectionController.setControl(undefined);
+        this._selectionController.style.visibility = "hidden";
     };
 }
 
diff --git a/packages/chili-ui/src/viewport/viewport.ts b/packages/chili-ui/src/viewport/viewport.ts
index c09640fa..f55d3a19 100644
--- a/packages/chili-ui/src/viewport/viewport.ts
+++ b/packages/chili-ui/src/viewport/viewport.ts
@@ -5,34 +5,34 @@ import { Flyout } from "../components";
 import { BindableElement } from "../controls";
 
 export class Viewport extends BindableElement {
-    #flyout?: Flyout;
-    readonly #eventCaches: [keyof HTMLElementEventMap, (e: any) => void][] = [];
+    private _flyout?: Flyout;
+    private readonly _eventCaches: [keyof HTMLElementEventMap, (e: any) => void][] = [];
 
     constructor(readonly view: IView) {
         super();
         this.initEvent();
-        view.onPropertyChanged(this.#onViewClosed);
-        this.addEventListener("mousemove", this.#handleFlyoutMove);
+        view.onPropertyChanged(this._onViewClosed);
+        this.addEventListener("mousemove", this._handleFlyoutMove);
     }
 
     setActive(actived: boolean) {
-        this.#flyout?.remove();
-        this.#flyout = undefined;
+        this._flyout?.remove();
+        this._flyout = undefined;
 
         if (actived) {
-            this.#flyout = new Flyout();
-            document.body.appendChild(this.#flyout);
+            this._flyout = new Flyout();
+            document.body.appendChild(this._flyout);
         }
     }
 
-    #handleFlyoutMove(e: MouseEvent) {
-        if (this.#flyout) {
-            this.#flyout.style.top = e.clientY + "px";
-            this.#flyout.style.left = e.clientX + "px";
+    private _handleFlyoutMove(e: MouseEvent) {
+        if (this._flyout) {
+            this._flyout.style.top = e.clientY + "px";
+            this._flyout.style.left = e.clientX + "px";
         }
     }
 
-    #onViewClosed = (prop: keyof IView) => {
+    private _onViewClosed = (prop: keyof IView) => {
         if (prop === "isClosed") {
             this.remove();
             this.dispose();
@@ -63,14 +63,14 @@ export class Viewport extends BindableElement {
             handler(this.view, e);
         };
         this.addEventListener(type, listener);
-        this.#eventCaches.push([type, listener]);
+        this._eventCaches.push([type, listener]);
     }
 
     private removeEvents() {
-        this.#eventCaches.forEach((x) => {
+        this._eventCaches.forEach((x) => {
             this.removeEventListener(x[0], x[1]);
         });
-        this.#eventCaches.length = 0;
+        this._eventCaches.length = 0;
     }
 
     private pointerMove = (view: IView, event: PointerEvent) => {
diff --git a/packages/chili-vis/src/viewer.ts b/packages/chili-vis/src/viewer.ts
index 36550ba6..63d5f42a 100644
--- a/packages/chili-vis/src/viewer.ts
+++ b/packages/chili-vis/src/viewer.ts
@@ -3,53 +3,53 @@
 import { CursorType, IView, IViewer, IVisual, Plane, PubSub } from "chili-core";
 
 export abstract class Viewer implements IViewer {
-    readonly #views: Set<IView>;
+    private readonly _views: Set<IView>;
 
-    #activeView?: IView;
+    private _activeView?: IView;
     get activeView(): IView | undefined {
-        return this.#activeView;
+        return this._activeView;
     }
     set activeView(value: IView | undefined) {
-        if (this.#activeView === value) return;
-        this.#activeView = value;
+        if (this._activeView === value) return;
+        this._activeView = value;
         PubSub.default.pub("activeViewChanged", value);
     }
 
     constructor(readonly visual: IVisual) {
-        this.#views = new Set<IView>();
+        this._views = new Set<IView>();
     }
 
     createView(name: string, workplane: Plane): IView {
         let view = this.handleCreateView(name, workplane);
-        this.#views.add(view);
+        this._views.add(view);
         return view;
     }
 
     protected abstract handleCreateView(name: string, workplane: Plane): IView;
 
     removeView(view: IView) {
-        this.#views.delete(view);
+        this._views.delete(view);
         if (this.activeView === view) {
-            this.activeView = [...this.#views].at(0);
+            this.activeView = [...this._views].at(0);
         }
     }
 
     views(): readonly IView[] {
-        return [...this.#views];
+        return [...this._views];
     }
 
     setCursor(cursor: CursorType) {
-        this.#views.forEach((x) => x.setCursor(cursor));
+        this._views.forEach((x) => x.setCursor(cursor));
     }
 
     update() {
-        this.#views.forEach((v) => {
+        this._views.forEach((v) => {
             v.update();
         });
     }
 
     dispose() {
         this.activeView = undefined;
-        this.#views.clear();
+        this._views.clear();
     }
 }
diff --git a/packages/chili-web/src/appBuilder.ts b/packages/chili-web/src/appBuilder.ts
index a7a7ddd5..487a20ef 100644
--- a/packages/chili-web/src/appBuilder.ts
+++ b/packages/chili-web/src/appBuilder.ts
@@ -6,59 +6,59 @@ import { IShapeFactory } from "chili-geo";
 import { IVisualFactory } from "chili-vis";
 
 export class AppBuilder {
-    #useUI: boolean = false;
-    #inits: (() => Promise<void>)[] = [];
-    #storage?: IStorage;
-    #visualFactory?: IVisualFactory;
-    #shapeFactory?: IShapeFactory;
+    private _useUI: boolean = false;
+    private _inits: (() => Promise<void>)[] = [];
+    private _storage?: IStorage;
+    private _visualFactory?: IVisualFactory;
+    private _shapeFactory?: IShapeFactory;
 
     useIndexedDB() {
-        this.#inits.push(async () => {
+        this._inits.push(async () => {
             Logger.info("initializing IndexedDBStorage");
 
             let db = await import("chili-storage");
-            this.#storage = new db.IndexedDBStorage();
+            this._storage = new db.IndexedDBStorage();
         });
         return this;
     }
 
     useOcc(): this {
-        this.#inits.push(async () => {
+        this._inits.push(async () => {
             Logger.info("initializing occ");
 
             let occ = await import("chili-occ");
             await occ.initMyOcc();
-            this.#shapeFactory = new occ.ShapeFactory();
+            this._shapeFactory = new occ.ShapeFactory();
         });
         return this;
     }
 
     useThree(): this {
-        this.#inits.push(async () => {
+        this._inits.push(async () => {
             Logger.info("initializing three");
 
             let three = await import("chili-three");
-            this.#visualFactory = new three.ThreeVisulFactory();
+            this._visualFactory = new three.ThreeVisulFactory();
         });
         return this;
     }
 
     useUI(): this {
-        this.#useUI = true;
+        this._useUI = true;
         return this;
     }
 
     async build(): Promise<void> {
-        for (const init of this.#inits) {
+        for (const init of this._inits) {
             await init();
         }
         this.ensureNecessary();
 
         let app = Application.build(
-            this.#visualFactory!,
-            this.#shapeFactory!,
+            this._visualFactory!,
+            this._shapeFactory!,
             this.getServices(),
-            this.#storage!,
+            this._storage!,
         );
         await this.loadUI(app);
 
@@ -66,19 +66,19 @@ export class AppBuilder {
     }
 
     private ensureNecessary() {
-        if (this.#shapeFactory === undefined) {
+        if (this._shapeFactory === undefined) {
             throw new Error("ShapeFactory not set");
         }
-        if (this.#visualFactory === undefined) {
+        if (this._visualFactory === undefined) {
             throw new Error("VisualFactory not set");
         }
-        if (this.#storage === undefined) {
+        if (this._storage === undefined) {
             throw new Error("storage has not been initialized");
         }
     }
 
     private async loadUI(app: Application) {
-        if (this.#useUI) {
+        if (this._useUI) {
             let ui = await import("chili-ui");
             ui.MainWindow.instance.init(app);
         }
diff --git a/packages/chili/src/application.ts b/packages/chili/src/application.ts
index 7417ddb4..ff1254bb 100644
--- a/packages/chili/src/application.ts
+++ b/packages/chili/src/application.ts
@@ -6,12 +6,12 @@ import { IVisualFactory } from "chili-vis";
 import { Document } from "./document";
 
 export class Application implements IApplication {
-    static #instance: Application | undefined;
+    private static _instance: Application | undefined;
     static get instance() {
-        if (Application.#instance === undefined) {
+        if (Application._instance === undefined) {
             throw new Error("Application is not build");
         }
-        return Application.#instance;
+        return Application._instance;
     }
 
     static build(
@@ -20,12 +20,12 @@ export class Application implements IApplication {
         services: IService[],
         storage: IStorage,
     ): Application {
-        if (this.#instance) {
+        if (this._instance) {
             Logger.warn("Application has been built");
         } else {
-            this.#instance = new Application(visualFactory, shapeFactory, services, storage);
+            this._instance = new Application(visualFactory, shapeFactory, services, storage);
         }
-        return this.#instance;
+        return this._instance;
     }
 
     private _activeDocument: IDocument | undefined;
@@ -51,20 +51,20 @@ export class Application implements IApplication {
     async openDocument(id: string): Promise<IDocument | undefined> {
         let document = await Document.open(this, id);
         if (document === undefined) return;
-        return await this.#changeDocument(document);
+        return await this._changeDocument(document);
     }
 
     async newDocument(name: string): Promise<IDocument> {
         let document = new Document(this, name);
-        return await this.#changeDocument(document);
+        return await this._changeDocument(document);
     }
 
     async loadDocument(data: Serialized): Promise<IDocument> {
         let document = Document.load(this, data);
-        return await this.#changeDocument(document);
+        return await this._changeDocument(document);
     }
 
-    async #changeDocument(newDocument: IDocument) {
+    private async _changeDocument(newDocument: IDocument) {
         if (this.activeDocument) {
             await this.activeDocument.close();
         }
diff --git a/packages/chili/src/commands/create/arc.ts b/packages/chili/src/commands/create/arc.ts
index f74f8e71..d90b10a7 100644
--- a/packages/chili/src/commands/create/arc.ts
+++ b/packages/chili/src/commands/create/arc.ts
@@ -23,7 +23,7 @@ import { CreateCommand } from "./createCommand";
 })
 export class Arc extends CreateCommand {
     private static count: number = 1;
-    #planeAngle: PlaneAngle | undefined;
+    private _planeAngle: PlaneAngle | undefined;
 
     getSteps(): IStep[] {
         let centerStep = new PointStep("operate.pickCircleCenter");
@@ -59,16 +59,16 @@ export class Arc extends CreateCommand {
             VertexMeshData.from(center, 5, Colors.Red),
             VertexMeshData.from(p1, 5, Colors.Red),
         ];
-        this.#planeAngle = new PlaneAngle(plane);
+        this._planeAngle = new PlaneAngle(plane);
         return {
             dimension: Dimension.D1D2,
             preview: (point: XYZ) => {
-                this.#planeAngle!.movePoint(point);
+                this._planeAngle!.movePoint(point);
                 let result = [...points];
-                if (Math.abs(this.#planeAngle!.angle) > Precision.Angle) {
+                if (Math.abs(this._planeAngle!.angle) > Precision.Angle) {
                     result.push(
                         this.application.shapeFactory
-                            .arc(plane.normal, center, p1, this.#planeAngle!.angle)
+                            .arc(plane.normal, center, p1, this._planeAngle!.angle)
                             .unwrap().mesh.edges!,
                     );
                 }
@@ -87,8 +87,8 @@ export class Arc extends CreateCommand {
     create(): GeometryModel {
         let [p0, p1] = [this.stepDatas[0].point!, this.stepDatas[1].point!];
         let plane = this.stepDatas[0].view.workplane;
-        this.#planeAngle?.movePoint(this.stepDatas[2].point!);
-        let body = new ArcBody(this.document, plane.normal, p0, p1, this.#planeAngle!.angle);
+        this._planeAngle?.movePoint(this.stepDatas[2].point!);
+        let body = new ArcBody(this.document, plane.normal, p0, p1, this._planeAngle!.angle);
         return new GeometryModel(this.document, `Arc ${Arc.count++}`, body);
     }
 
diff --git a/packages/chili/src/commands/create/converter.ts b/packages/chili/src/commands/create/converter.ts
index c01a5bb0..adec8869 100644
--- a/packages/chili/src/commands/create/converter.ts
+++ b/packages/chili/src/commands/create/converter.ts
@@ -37,7 +37,7 @@ abstract class ConvertCommand extends CancelableCommand {
                 return shape.shapeType === ShapeType.Edge || shape.shapeType === ShapeType.Wire;
             },
         };
-        let models = this.#getSelectedModels(document, filter);
+        let models = this._getSelectedModels(document, filter);
         if (models.length > 0) return models;
         document.selection.clearSelected();
         let step = new SelectModelStep("prompt.select.models", true);
@@ -46,7 +46,7 @@ abstract class ConvertCommand extends CancelableCommand {
         return data?.models;
     }
 
-    #getSelectedModels(document: IDocument, filter?: IShapeFilter) {
+    private _getSelectedModels(document: IDocument, filter?: IShapeFilter) {
         return document.selection
             .getSelectedNodes()
             .map((x) => x as GeometryModel)
diff --git a/packages/chili/src/document.ts b/packages/chili/src/document.ts
index 86904184..6bbe7500 100644
--- a/packages/chili/src/document.ts
+++ b/packages/chili/src/document.ts
@@ -37,23 +37,23 @@ export class Document extends Observable implements IDocument {
     set name(name: string) {
         if (this.name === name) return;
         this.setProperty("name", name);
-        if (this.#rootNode) this.#rootNode.name = name;
+        if (this._rootNode) this._rootNode.name = name;
     }
 
-    #rootNode: INodeLinkedList | undefined;
+    private _rootNode: INodeLinkedList | undefined;
     @Serializer.serialze()
     get rootNode(): INodeLinkedList {
-        if (this.#rootNode === undefined) {
+        if (this._rootNode === undefined) {
             this.setRootNode(new NodeLinkedList(this, this._name));
         }
-        return this.#rootNode!;
+        return this._rootNode!;
     }
 
     private setRootNode(value?: INodeLinkedList) {
-        if (this.#rootNode === value) return;
-        this.#rootNode?.removePropertyChanged(this.handleRootNodeNameChanged);
-        this.#rootNode = value ?? new NodeLinkedList(this, this._name);
-        this.#rootNode.onPropertyChanged(this.handleRootNodeNameChanged);
+        if (this._rootNode === value) return;
+        this._rootNode?.removePropertyChanged(this.handleRootNodeNameChanged);
+        this._rootNode = value ?? new NodeLinkedList(this, this._name);
+        this._rootNode.onPropertyChanged(this.handleRootNodeNameChanged);
     }
 
     private _currentNode?: INodeLinkedList;
@@ -102,9 +102,9 @@ export class Document extends Observable implements IDocument {
         this.visual.dispose();
         this.history.dispose();
         this.selection.dispose();
-        this.#rootNode?.removePropertyChanged(this.handleRootNodeNameChanged);
-        this.#rootNode?.dispose();
-        this.#rootNode = undefined;
+        this._rootNode?.removePropertyChanged(this.handleRootNodeNameChanged);
+        this._rootNode?.dispose();
+        this._rootNode = undefined;
         this._currentNode = undefined;
     }
 
diff --git a/packages/chili/src/editors/eventHandler.ts b/packages/chili/src/editors/eventHandler.ts
index cccda65d..d03574ea 100644
--- a/packages/chili/src/editors/eventHandler.ts
+++ b/packages/chili/src/editors/eventHandler.ts
@@ -25,12 +25,12 @@ export interface FeaturePoint {
 export abstract class EditorEventHandler implements IEventHandler, IDisposable {
     private snaped?: FeaturePoint;
 
-    #points?: FeaturePoint[];
+    private _points?: FeaturePoint[];
     protected get points() {
-        if (this.#points === undefined) {
-            this.#points = this.featurePoints();
+        if (this._points === undefined) {
+            this._points = this.featurePoints();
         }
-        return this.#points;
+        return this._points;
     }
 
     constructor(readonly document: IDocument) {}
diff --git a/packages/chili/src/snap/snapEventHandler/snapEventHandler.ts b/packages/chili/src/snap/snapEventHandler/snapEventHandler.ts
index 259deb5b..383dcbb7 100644
--- a/packages/chili/src/snap/snapEventHandler/snapEventHandler.ts
+++ b/packages/chili/src/snap/snapEventHandler/snapEventHandler.ts
@@ -51,10 +51,10 @@ export abstract class SnapEventHandler implements IEventHandler {
         this.clean();
     }
 
-    #cancelled: boolean = false;
+    private _cancelled: boolean = false;
     private cancel() {
-        if (this.#cancelled) return;
-        this.#cancelled = true;
+        if (this._cancelled) return;
+        this._cancelled = true;
         this.controller.cancel();
         this.clean();
     }