babylonjs-editcontrol 3.2.5 → 4.0.0

package/README.md

@@ -1,436 +1,478 @@
-# BabylonJS-EditControl
-
-An edit control for use in [BabylonJS](http://www.babylonjs.com/) (a 3D HTML Webgl framework) applications.
-
-## About
-
-All 3d editors provide a widget, also referred to as transform control, to translate, rotate or scale 3d objects in the editor.  
-This EditControl is similar to those widgets.  
-You can embed this in your Babylonjs application to provide those same capabilities.  
-It currently supports
-
-- Translate
-- Translate Snap
-- Rotate
-- Rotate Snap
-- Scale
-- Scale Snap
-- Local or Global Translation and Rotation. (Scaling only in local axis)
-- Create multiple instances in the same scene with each instance attached to a different mesh
-- Scale size of control
-- undo, redo
-
-For a demo, head on over to <a href="https://ssatguru.github.io/BabylonJS-EditControl-Samples/demo/Demo.html" target="_blank"> https://ssatguru.github.io/BabylonJS-EditControl-Samples/demo/Demo.html </a>
-
-For a list of know issues, shortcomings and planned enhancements see <a href="https://github.com/ssatguru/BabylonJS-EditControl/issues" target="_blank"> https://github.com/ssatguru/BabylonJS-EditControl/issues </a>
-
-### Breaking change with 3.2.0
-
-Version 3.2.0 converts the project from a plain vanilla JavaScript project to a module based JavaScript project.  
-With this change, the way to load the application has changed.  
-In JavaScript, instead of
-
-```
-var EditControl = org.ssatguru.babylonjs.component.EditControl;
-editControl = new EditControl(box,camera, canvas, 0.75);
-```
-
-now do
-
-```
-var editControl = new EditControl(box,camera, canvas, 0.75);
-```
-
-In TypeScript, instead of
-
-```
-import EditControl = org.ssatguru.babylonjs.component.EditControl;
-```
-
-now do
-
-```
-import {EditControl} from "babaylonjs-editcontrol";
-```
-
-See below for more details.
-
-## Quick start
-
-1. add the following dependencies
-
-```
-<script src="https://code.jquery.com/pep/0.4.2/pep.js"></script>
-<script src="https://cdn.babylonjs.com/babylon.js"></script>
-<script src="EditControl.js"></script>
-```
-
-See INSTALL below to find where you can get "EditControl.js".
-
-2. a small javascript code snippet to get you up and running
-
-```
-//------------------EDIT CONTROL -------------------------------------------------
-//create edit control (mesh to attach to, active camera, canvas, scale of editcontrol)
-var editControl = new EditControl(box,camera, canvas, 0.75);
-//to show translation controls
-editControl.enableTranslation();
-//set transalation snap value in meters
-editControl.setTransSnapValue(0.5
-```
-
-see sample project here
-[https://github.com/ssatguru/BabylonJS-EditControl-Samples/tree/master/sample-global](https://github.com/ssatguru/BabylonJS-EditControl-Samples/tree/master/sample-global)
-
-## INSTALL
-
-You can find the "EditControl.js" from its git repository "dist" folder or "releases" section  
-[https://github.com/ssatguru/BabylonJS-EditControl/tree/master/dist](https://github.com/ssatguru/BabylonJS-EditControl/tree/master/dist)  
-[https://github.com/ssatguru/BabylonJS-EditControl/releases](https://github.com/ssatguru/BabylonJS-EditControl/releases)
-
-You can also install this from npm
-
-```
-npm install babylonjs-editcontrol
-```
-
-## USAGE
-
-This has been built as an UMD module which means you can use it as a CommonJS/NodeJS module, AMD module or as a global object
-loaded using the script tag.
-
-Project "BabylonJS-EditControl-Samples" [https://github.com/ssatguru/BabylonJS-EditControl-Samples](https://github.com/ssatguru/BabylonJS-EditControl-Samples) has a
-collection of sample projects to show how to use this from TypeScript, NodeJs, AMD or plain vanilla JavaScript applications.
-
-Below is a quick summary of how you can use this as different module types.
-
-CommonJS/NodeJS Module
-
-```
-let BABYLON = require("babylonjs");
-let EditControl = require("babylonjs-editcontrol").EditControl;
-let engine = new BABYLON.Engine(canvas, true);
-...
-let editControl = new EditControl(box,camera, canvas, 0.75);
-...
-
-```
-
-AMD Module
-
-```
-<script src="./lib/require.js"></script>
-<script>
-	require.config({
-		baseUrl: ".",
-		paths: {
-			"babylonjs": "./lib/babylon",
-			"ec": "./lib/EditControl"
-		}
-	});
-
-	require(['babylonjs', 'ec'], function (BABYLON, ec) {
-		let EditControl = ec.EditControl;
-		let engine = new BABYLON.Engine(canvas, true);
-		...
-		let editControl = new EditControl(box,camera, canvas, 0.75);
-		...
-	});
-</script>
-```
-
-Global Module
-
-```
-<script src="./lib/babylon.js"></script>
-<script src="./lib/EditControl.js"></script>
-<script>
-	let engine = new BABYLON.Engine(canvas, true);
-	...
-	let editControl = new EditControl(box,camera, canvas, 0.75);
-	...
-</script>
-```
-
-## DEPENDENCIES
-
-- pepjs
-- babylonjs
-
-The two can be installed from npm
-
-```
-npm install babylonjs pepjs
-```
-
-or via cdn
-
-```
-<script src="https://code.jquery.com/pep/0.4.2/pep.js"></script>
-<script src="https://cdn.babylonjs.com/babylon.js"></script>
-```
-
-## API
-
-#### To Instantiate
-
-```
-// JavaScript
-var editControl = new EditControl(mesh,camera, canvas, 0.75, true);
-```
-
-```
-// TypeScript
-import {EditControl} from "babaylonjs-editcontrol";
-let editControl:EditControl = new EditControl(mesh,camera, canvas, 0.75, true,0.02);
-```
-
-This positions the edit control at the mesh pivot position and displays x,y,z axis.  
-Takes five parms
-
-- mesh - the mesh to control using the editcontrol
-- camera - active camera
-- canvas - the mesh canvas
-- scale - number. Optional. Default 1. Determines how small or large the editcontrol should appear.
-- eulerian - true/false. Optional. Default false. True indicates that rotation of the mesh is in euler.If rotation is unresponsive then it is possible that the rotation may not have been initialized to either a eulerian or quaternion value.
-- pickWidth - number. Optional. Default 0.02. Determines how close to an axis should the pointer get before we can pick it
-
-#### To show Translation, Rotation or Scaling controls
-
-```
-editControl.enableTranslation();
-
-editControl.enableRotation();
-editControl.setRotGuideFull(true/false) //This makes the rotation guides 360 degree(true) or 90 degree(false) .90 degree  looks less cluttered.
-editControl.returnEuler(true); // Optional. This will return rotation in euler instead of quaternion. Quaternion is the default.
-
-editControl.enableScaling();
-```
-
-#### To hide Translation, Rotation or Scaling controls (just displays x,y,z axis)
-
-```
-editControl.disableTranslation();
-editControl.disableRotation();
-editControl.disableScaling();
-```
-
-#### To check if Translation, Rotation or Scaling is enabled
-
-```
-editControl.isTranslationEnabled();
-editControl.isRotationEnabled();
-editControl.isScalingEnabled();
-```
-
-#### To turn on/off local/ global mode
-
-```
-editControl.setLocal(boolean true/false);
-```
-
-#### To check if local/ global mode
-
-```
-editControl.isLocal();
-```
-
-#### To turn on/off translation, rotation or scale snapping
-
-```
-editControl.setTransSnap(boolean true/false);
-editControl.setRotSnap(boolean true/false);
-editControl.setScaleSnap(boolean true/false);
-
-editControl.isTransSnap();
-editControl.isRotSnap();
-editControl.isScaleSnap();
-```
-
-#### To set/get translation, rotation or scale snap values
-
-```
-editControl.setTransSnapValue(number n in meters);
-editControl.setRotSnapValue(number n in radians);
-editControl.setScaleSnapValue(number n a factor by which scale should increase);
-
-editControl.getTransSnapValue();
-editControl.getRotSnapValue();
-editControl.getScaleSnapValue();
-```
-
-#### To bound translation, rotation or scaling
-
-This restricts tranlation, rotation,scaling between a minimum and maximum values
-
-```
-setTransBounds(min?: Vector3,max?: Vector3) ;
-setRotBounds(min?: Vector3,max?: Vector3);
-setScaleBounds(min?: Vector3,max?: Vector3);
-```
-
-```
-removeTransBounds();
-removeRotBounds();
-removeScaleBounds();
-```
-
-Note: rotation bounds has not been implemented. This is on TODO list.
-
-#### To undo or redo
-
-```
-editControl.undo();
-editControl.redo();
-```
-
-#### To set undo count
-
-By default does upto 10 undos
-
-```
-editControl.setUndoCount(number count);
-```
-
-#### To check if user editing (moving,translating or scaling object)
-
-```
-editControl.isEditing();
-```
-
-returns true if the use is in the process of editing
-
-#### To check if the pointer is over the edit control
-
-```
-editControl.isPointeOver();
-```
-
-returns true if the pointer is over the edit control
-
-#### To be called back whenever the user starts, takes or ends an action
-
-```
-editControl.addActionStartListener(function(number actionType));
-editControl.addActionListener(function(number actionType));
-editControl.addActionEndListener(function(number actionType));
-```
-
-Each of these take a function as a parameter.  
-The ActionStartListener would be called when the user starts translating,rotating or scaling a mesh  
-The ActionListener would be called when the user is translating,rotating or scaling a mesh  
-The ActionEndListener would be called when the user ends translating,rotating or scaling a mesh
-
-When called, these listeners would be passed a number which would indicate the action being taken by the user.  
-This number would have one of the following values  
-0 - ActionType.TRANS, Translation  
-1 - ActioneType.ROT, Rotation  
-2 - ActioneType.SCALE, Scaling
-
-To remove the listeners
-
-```
-editControl.removeActionStartListener();
-editControl.removeActionListener();
-editControl.removeActionEndListener();
-editControl.removeAllActionListeners() // to remove all;
-```
-
-#### To refresh mesh Bounding Info.
-
-EditControl uses mesh bounding info to provide the same smooth scaling experience for both small and large mesh. The bounding info changes when a mesh is baked. Use this method to refresh the bounding info if you baked the transform of the mesh.
-
-```
-editControl.refreshBoundingInfo();
-```
-
-#### To get position and rotaion of EditControl
-
-```
-editControl.getPosition();//returns Vector3
-editControl.getRotationQuaternion(): //returns rotation in quaternion
-```
-
-The postion and rotation of EditControl would be the same as that of the mesh to which it is attached
-
-#### To show/hide EditControl
-
-```
-editControl.hide();
-editControl.isHidden(); //turns true or false
-editControl.show();
-```
-
-#### To set visibililty (transparency)
-
-```
-editControl.setVisibility(v:number);
-```
-
-By default the visibility is set to 0.75
-
-#### To switch camera
-
-```
-editControl.switchCamera(camera:Camera);
-```
-
-The edit control uses the camera specified during instantiation to control how it is scaled or picked.  
-Use this to swicth to a different camera after instantiation.  
-You might want to use this for example when the active camera in your scene changes and you want to use the new one for the editcontrol.
-
-#### To switch edit control to another mesh
-
-```
-editControl.switchTo(Mesh mesh, optional boolean isEuler );
-```
-
-This quickly removes the edit control from one mesh and attaches it to another mesh.
-
-The translation, rotation, scaling mode is maintained.
-
-mesh : the mesh to which the control should switch to  
-isEuler : true/false, optional, default false, true indicates that rotation of the mesh is in euler
-
-#### To detach from the mesh and clean up resources.
-
-```
-editControl.detach();
-```
-
-## Build and Test
-
-If not already installed, install node js.  
-Switch to the project folder.  
-Run "npm install", once, to install all the dependencies.
-
-### Build
-
-Run "npm run build" - this will compile the files in "src" and create a development module in the "dist" folder.  
-Run "npm run build-prod" - this will compile and create a minified production module in the "dist" folder.
-
-### To test
-
-Two ways to test.
-
-1. using the webpack-dev-server.  
-   Start the development server  
-   "npm run start"  
-   This will start the live dev server on port 8080 (could be different if this port is already in use) and open the browser with the file http://localhost:8080/tst/test.html.  
-   The dev server will live compile your code any time you make changes.  
-   Note: The dev server does not write the build to disk, instead it serves it from memory. In our case the build, "EditControl.max.js", is served from location http://localhost:8080/dest. (see publicPath in wepack.config.js file).
-
-2. using any other http server.  
-   Start the server , say http-server, from the project root folder (not from within "/tst " folder).  
-   Goto http://localhost:8080/tst/test.html (assuming the server was started on port 8080).  
-   Everytime you make changes you will have to build using "npm start build-dev".
-
-## Note:
-
-The original version was written in Java and then transpiled to TypeScript/JavaScript using JSweet.  
-It was originally written in Java, as at that time I wasn't very comfortable with the TypeScript language and its ecosystem.  
-Over time I have become more comfortable with it.  
-The new version is thus written in TypeScript.  
-It is based on the initial TypeScript code generated by JSweet.  
-Porting to Typescript was easy, as JSweet generates good human readable TypeScript which allows one to switch to TypeScript at any time.  
-For those interested, the old java version is still available at [https://github.com/ssatguru/BabylonJS-EditControl.java](https://github.com/ssatguru/BabylonJS-EditControl.java)
+# BabylonJS-EditControl
+
+An edit control for use in [BabylonJS](http://www.babylonjs.com/) (a 3D HTML Webgl framework) applications.
+
+## About
+
+Many 3d editors provide, what is called, a widget/gizmo/transform control, to help translate, rotate or scale 3d objects in the editor.  
+This EditControl is just that.  
+You can embed this in your Babylonjs application to provide those same capabilities.  
+It currently supports
+
+- Translate
+- Translate Snap
+- Rotate
+- Rotate Snap
+- Scale
+- Scale Snap
+- Local or Global Translation and Rotation. (Scaling only in local axis)
+- Create multiple instances in the same scene with each instance attached to a different mesh
+- Scale size of control
+- undo, redo
+
+For a demo, head on over to <a href="https://ssatguru.github.io/BabylonJS-EditControl-Samples/demo/Demo.html" target="_blank"> https://ssatguru.github.io/BabylonJS-EditControl-Samples/demo/Demo.html </a>
+
+### Limitations/Issues
+
+This currently does not handle properly, a right handed mesh in a left handed system (example gltf mesh in lhs babylon) or a left handed mesh in a right handed system.  
+A right handed mesh in a right handed system or a left handed mesh in a left handed system is handled properly.  
+A gltf mesh in a right handed babylon is handled properly.  
+I would address this in a future release.
+
+For a list of other know issues, shortcomings and planned enhancements see <a href="https://github.com/ssatguru/BabylonJS-EditControl/issues" target="_blank"> https://github.com/ssatguru/BabylonJS-EditControl/issues </a>
+
+### Changes
+
+#### 4.0.0 (Breaking changes )
+
+- Breaking change. Now user does not have to specify if the mesh, to which the edit control is being attached, uses Euler or Quaternion rotation. It figure that out itself. If mesh.rotationQuaternion is not null it assumes quaternion else euler.  
+As such the contructor now has changed from  
+	```
+	constructor(mesh: TransformNode, camera: Camera, canvas: HTMLCanvasElement, scale?: number, eulerian?: boolean, pickWidth?: number) 
+	```
+	to 
+	``` 
+	constructor(mesh: TransformNode, camera: Camera, canvas: HTMLCanvasElement, scale?: number, pickWidth?: number)  
+	```
+- An edit control axes color now changes to yellow rather than white when pointer hovers over it or selects it.  This seems to be the standard practice.
+
+- Upgraded to latest version of babylonjs namely 8.47.0
+- Upgraded other dev dependenices to latest version - typescript, webpack etc.
+
+#### 3.3.0 
+
+- Moved the EditControl to the Babylonjs DefaultUtilityLayer scene.  
+Because this scene is different from the main scene there is less interference with the main scene. Also makes it a bit faster.  
+This is similar to how the native gizmos of Babylonjs work.
+
+- Upgraded to latest version of Babylons js - 5.41.  
+Replaced deprecated methods with new ones.
+- Upgraded other dev dependenices to latest version - typescript, webpack etc.
+
+#### 3.2.0 (Breaking changes)
+
+- Version 3.2.0 converts the project from a plain vanilla JavaScript project to a module based JavaScript project.  
+With this change, the way to load the application has changed.  
+In JavaScript, instead of
+
+	```
+	var EditControl = org.ssatguru.babylonjs.component.EditControl;
+	editControl = new EditControl(box,camera, canvas, 0.75);
+	```
+
+	now do
+
+	```
+	var editControl = new EditControl(box,camera, canvas, 0.75);
+	```
+
+	In TypeScript, instead of
+
+	```
+	import EditControl = org.ssatguru.babylonjs.component.EditControl;
+	```
+
+	now do
+
+	```
+	import {EditControl} from "babaylonjs-editcontrol";
+	```
+
+	See below for more details.
+
+## Quick start
+
+1. add the following dependencies
+
+```
+<!-- pep.js is optional -->
+<script src="https://code.jquery.com/pep/0.4.2/pep.js"></script>
+<script src="https://cdn.babylonjs.com/babylon.js"></script>
+<script src="EditControl.js"></script>
+```
+
+See INSTALL below to find where you can get "EditControl.js".
+
+2. a small javascript code snippet to get you up and running
+
+```
+//------------------EDIT CONTROL -------------------------------------------------
+//create edit control (mesh to attach to, active camera, canvas, scale of editcontrol)
+var editControl = new EditControl(box,camera, canvas, 0.75);
+//to show translation controls
+editControl.enableTranslation();
+//set transalation snap value in meters
+editControl.setTransSnapValue(0.5
+```
+
+see sample project here
+[https://github.com/ssatguru/BabylonJS-EditControl-Samples/tree/master/sample-global](https://github.com/ssatguru/BabylonJS-EditControl-Samples/tree/master/sample-global)
+
+## INSTALL
+
+You can find the "EditControl.js" from its git repository "dist" folder or "releases" section  
+[https://github.com/ssatguru/BabylonJS-EditControl/tree/master/dist](https://github.com/ssatguru/BabylonJS-EditControl/tree/master/dist)  
+[https://github.com/ssatguru/BabylonJS-EditControl/releases](https://github.com/ssatguru/BabylonJS-EditControl/releases)
+
+You can also install this from npm
+
+```
+npm install babylonjs-editcontrol
+```
+
+## USAGE
+
+This has been built as an UMD module which means you can use it as a CommonJS/NodeJS module, AMD module or as a global object
+loaded using the script tag.
+
+Project "BabylonJS-EditControl-Samples" [https://github.com/ssatguru/BabylonJS-EditControl-Samples](https://github.com/ssatguru/BabylonJS-EditControl-Samples) has a
+collection of sample projects to show how to use this from TypeScript, NodeJs, AMD or plain vanilla JavaScript applications.
+
+Below is a quick summary of how you can use this as different module types.
+
+CommonJS/NodeJS Module
+
+```
+let BABYLON = require("babylonjs");
+let EditControl = require("babylonjs-editcontrol").EditControl;
+let engine = new BABYLON.Engine(canvas, true);
+...
+let editControl = new EditControl(box,camera, canvas, 0.75);
+...
+
+```
+
+AMD Module
+
+```
+<script src="./lib/require.js"></script>
+<script>
+	require.config({
+		baseUrl: ".",
+		paths: {
+			"babylonjs": "./lib/babylon",
+			"ec": "./lib/EditControl"
+		}
+	});
+
+	require(['babylonjs', 'ec'], function (BABYLON, ec) {
+		let EditControl = ec.EditControl;
+		let engine = new BABYLON.Engine(canvas, true);
+		...
+		let editControl = new EditControl(box,camera, canvas, 0.75);
+		...
+	});
+</script>
+```
+
+Global Module
+
+```
+<script src="./lib/babylon.js"></script>
+<script src="./lib/EditControl.js"></script>
+<script>
+	let engine = new BABYLON.Engine(canvas, true);
+	...
+	let editControl = new EditControl(box,camera, canvas, 0.75);
+	...
+</script>
+```
+
+## DEPENDENCIES
+
+- pepjs - optional. Its a polyfill needed for pointer support in very old browsers. Not needed if targeting relatively new browsers. 
+- babylonjs
+
+The two can be installed from npm
+
+```
+npm install babylonjs pepjs
+```
+
+or via cdn
+
+```
+<script src="https://code.jquery.com/pep/0.4.2/pep.js"></script>
+<script src="https://cdn.babylonjs.com/babylon.js"></script>
+```
+
+## API
+
+#### To Instantiate
+
+```
+// JavaScript
+var editControl = new EditControl(mesh,camera, canvas, 0.75,0.02);
+```
+
+```
+// TypeScript
+import {EditControl} from "babaylonjs-editcontrol";
+let editControl:EditControl = new EditControl(mesh,camera, canvas, 0.75, 0.02);
+```
+
+This positions the edit control at the mesh pivot position and displays x,y,z axis.  
+Takes four parms
+
+- mesh - the mesh to control using the editcontrol
+- camera - active camera
+- canvas - the mesh canvas
+- scale - number. Optional. Default 1. Determines how small or large the editcontrol should appear.
+- pickWidth - number. Optional. Default 0.02. Determines how close to an axis should the pointer get before we can pick it
+
+#### To show Translation, Rotation or Scaling controls
+
+```
+editControl.enableTranslation();
+
+editControl.enableRotation();
+editControl.setRotGuideFull(true/false) //This makes the rotation guides 360 degree(true) or 90 degree(false) .90 degree  looks less cluttered.
+editControl.returnEuler(true); // Optional. This will return rotation in euler instead of quaternion. Quaternion is the default.
+
+editControl.enableScaling();
+```
+
+#### To hide Translation, Rotation or Scaling controls (just displays x,y,z axis)
+
+```
+editControl.disableTranslation();
+editControl.disableRotation();
+editControl.disableScaling();
+```
+
+#### To check if Translation, Rotation or Scaling is enabled
+
+```
+editControl.isTranslationEnabled();
+editControl.isRotationEnabled();
+editControl.isScalingEnabled();
+```
+
+#### To turn on/off local/ global mode
+
+```
+editControl.setLocal(boolean true/false);
+```
+
+#### To check if local/ global mode
+
+```
+editControl.isLocal();
+```
+
+#### To turn on/off translation, rotation or scale snapping
+
+```
+editControl.setTransSnap(boolean true/false);
+editControl.setRotSnap(boolean true/false);
+editControl.setScaleSnap(boolean true/false);
+
+editControl.isTransSnap();
+editControl.isRotSnap();
+editControl.isScaleSnap();
+```
+
+#### To set/get translation, rotation or scale snap values
+
+```
+editControl.setTransSnapValue(number n in meters);
+editControl.setRotSnapValue(number n in radians);
+editControl.setScaleSnapValue(number n a factor by which scale should increase);
+
+editControl.getTransSnapValue();
+editControl.getRotSnapValue();
+editControl.getScaleSnapValue();
+```
+
+#### To bound translation, rotation or scaling
+
+This restricts tranlation, rotation,scaling between a minimum and maximum values
+
+```
+setTransBounds(min?: Vector3,max?: Vector3) ;
+setRotBounds(min?: Vector3,max?: Vector3);
+setScaleBounds(min?: Vector3,max?: Vector3);
+```
+
+```
+removeTransBounds();
+removeRotBounds();
+removeScaleBounds();
+```
+
+Note: rotation bounds has not been implemented. This is on TODO list.
+
+#### To undo or redo
+
+```
+editControl.undo();
+editControl.redo();
+```
+
+#### To set undo count
+
+By default does upto 10 undos
+
+```
+editControl.setUndoCount(number count);
+```
+
+#### To check if user editing (moving,translating or scaling object)
+
+```
+editControl.isEditing();
+```
+
+returns true if the use is in the process of editing
+
+#### To check if the pointer is over the edit control
+
+```
+editControl.isPointeOver();
+```
+
+returns true if the pointer is over the edit control
+
+#### To be called back whenever the user starts, takes or ends an action
+
+```
+editControl.addActionStartListener(function(number actionType));
+editControl.addActionListener(function(number actionType));
+editControl.addActionEndListener(function(number actionType));
+```
+
+Each of these take a function as a parameter.  
+The ActionStartListener would be called when the user starts translating,rotating or scaling a mesh  
+The ActionListener would be called when the user is translating,rotating or scaling a mesh  
+The ActionEndListener would be called when the user ends translating,rotating or scaling a mesh
+
+When called, these listeners would be passed a number which would indicate the action being taken by the user.  
+This number would have one of the following values  
+0 - ActionType.TRANS, Translation  
+1 - ActioneType.ROT, Rotation  
+2 - ActioneType.SCALE, Scaling
+
+To remove the listeners
+
+```
+editControl.removeActionStartListener();
+editControl.removeActionListener();
+editControl.removeActionEndListener();
+editControl.removeAllActionListeners() // to remove all;
+```
+
+#### To refresh mesh Bounding Info.
+
+EditControl uses mesh bounding info to provide the same smooth scaling experience for both small and large mesh. The bounding info changes when a mesh is baked. Use this method to refresh the bounding info if you baked the transform of the mesh.
+
+```
+editControl.refreshBoundingInfo();
+```
+
+#### To get position and rotaion of EditControl
+
+```
+editControl.getPosition();//returns Vector3
+editControl.getRotationQuaternion(): //returns rotation in quaternion
+```
+
+The postion and rotation of EditControl would be the same as that of the mesh to which it is attached
+
+#### To show/hide EditControl
+
+```
+editControl.hide();
+editControl.isHidden(); //turns true or false
+editControl.show();
+```
+
+#### To set visibililty (transparency)
+
+```
+editControl.setVisibility(v:number);
+```
+
+By default the visibility is set to 0.75
+
+#### To switch camera
+
+```
+editControl.switchCamera(camera:Camera);
+```
+
+The edit control uses the camera specified during instantiation to control how it is scaled or picked.  
+Use this to swicth to a different camera after instantiation.  
+You might want to use this for example when the active camera in your scene changes and you want to use the new one for the editcontrol.
+
+#### To switch edit control to another mesh
+
+```
+editControl.switchTo(Mesh mesh, optional boolean isEuler );
+```
+
+This quickly removes the edit control from one mesh and attaches it to another mesh.
+
+The translation, rotation, scaling mode is maintained.
+
+mesh : the mesh to which the control should switch to  
+isEuler : true/false, optional, default false, true indicates that rotation of the mesh is in euler
+
+#### To detach from the mesh and clean up resources.
+
+```
+editControl.detach();
+```
+
+## Build and Test
+
+If not already installed, install node js.  
+Switch to the project folder.  
+Run "npm install", once, to install all the dependencies.
+
+### Build
+
+Run "npm run build" - this will compile the files in "src" and create a development module in the "dist" folder.  
+Run "npm run build-prod" - this will compile and create a minified production module in the "dist" folder.  
+  
+The project uses webpack which compiles using typescipt compiler and then optmize and packages the module.  
+The typescript compiler has been configured to output es6 code.  
+The webpack has been configured to output a UMD module.  
+In development mode it outputs a unoptmized  UMD module, that is a human readable, properly formatted javascript UMD module. This file ends in ".max.js".  
+In production mode it outputs a optmized UMD module. The module is minified and its variables are mangled.
+
+
+### To test
+
+Two ways to test.
+
+1. using the webpack-dev-server.  
+   Start the development server  
+   "npm run start"  
+   This will start the live dev server on port 8080 (could be different if this port is already in use) and open the browser with the file http://localhost:8080/tst/test.html.  
+   The dev server will live compile your code any time you make changes.  
+   Note: The dev server does not write the build to disk, instead it serves it from memory. In our case the build, "EditControl.max.js", is served from location http://localhost:8080/dist. (see publicPath in wepack.config.js file).
+
+2. using any other http server.  
+   Start the server , say http-server, from the project root folder (not from within "/tst " folder).  
+   Goto http://localhost:8080/tst/test.html (assuming the server was started on port 8080).  
+   Everytime you make changes you will have to build using "npm start build-dev".
+
+## Note:
+
+The original version was written in Java and then transpiled to TypeScript/JavaScript using JSweet.  
+It was originally written in Java, as at that time I wasn't very comfortable with the TypeScript language and its ecosystem.  
+Over time I have become more comfortable with it.  
+The new version is thus written in TypeScript.  
+It is based on the initial TypeScript code generated by JSweet.  
+Porting to Typescript was easy, as JSweet generates good human readable TypeScript which allows one to switch to TypeScript at any time.  
+For those interested, the old java version is still available at [https://github.com/ssatguru/BabylonJS-EditControl.java](https://github.com/ssatguru/BabylonJS-EditControl.java)