Updates

- Improve in-wall-items and in-wall-floor-items move performance
- Adding dimensional units configuration to the UI

.gitignore

@@ -9,6 +9,7 @@ dist/*
 app/*
 .cache/*
 3D-Models-Internet/
+TextureSources/*
 
 __pycache__
 package-lock.json

TextureSources/TextureToJSONMapper.py

@@ -9,6 +9,7 @@
 OUTPUT_JSON_FILE = read_write_walls_data[1]
 
 TEXTURE_SUB_TYPES = ['basecolor', 'normal', 'roughness', 'ambientOcclusion', 'height']
+TEXTURE_SUB_POLYHAVE_TYPES = ['diff', 'nor', 'rough', 'ambientOcclusion', 'disp']
 TEXTURE_SUB_KEY_NAMES = ['colormap', 'normalmap', 'roughnessmap', 'ambientmap', 'bumpmap']
 def getFilesFromDirectory(directorypath, extension=['.obj'], *, exclusions=[], recursive=False):
     found_files = []
@@ -37,7 +38,7 @@ def groupTexturesByDirectory(texturefilesmap):
 
         for i, texture_identifier_name in enumerate(TEXTURE_SUB_TYPES):
             if(texture_identifier_name.lower() in texturefilename.lower()):
-                relative_path = os.path.relpath(tmap['filepath'], start=USE_RELATIVE_PATH_FROM)
+                relative_path = os.path.relpath(tmap['filepath'], start = USE_RELATIVE_PATH_FROM)
                 texture_directories[texturename][TEXTURE_SUB_KEY_NAMES[i]] = relative_path        
 
     return texture_directories;

src/index.js

@@ -7,7 +7,7 @@ import { EVENT_LOADED, EVENT_NOTHING_2D_SELECTED, EVENT_CORNER_2D_CLICKED, EVENT
     EVENT_ROOM_2D_CLICKED, EVENT_WALL_CLICKED, EVENT_ROOM_CLICKED, EVENT_NO_ITEM_SELECTED, 
     EVENT_ITEM_SELECTED, EVENT_GLTF_READY } from './scripts/core/events.js';
 import { Configuration, configDimUnit, viewBounds, itemStatistics } from './scripts/core/configuration.js';
-import { dimMeter, TEXTURE_NO_PREVIEW } from './scripts/core/constants.js';
+import { availableDimUnits, dimMeter, TEXTURE_NO_PREVIEW } from './scripts/core/constants.js';
 import QuickSettings from 'quicksettings';
 
 import { Dimensioning } from './scripts/core/dimensioning.js';
@@ -450,14 +450,15 @@ if (!opts.widget) {
     uxInterface.addButton('Switch Viewer', switchViewer);
     uxInterface.addHTML('Current View', 'Floorplanning');
 
+    uxInterface.bindDropDown('configDimUnit', availableDimUnits, configurationHelper);
+
+
     uxInterface.addFileChooser("Load Design", "Load Design", ".blueprint3d", loadBlueprint3DDesign);
     uxInterface.addButton('Save Design', saveBlueprint3DDesign);
     uxInterface.addButton('Export as GLTF', saveBlueprint3D);
     uxInterface.addButton('Export Project (blueprint-py)', exportDesignAsPackage);
     uxInterface.addButton('Reset', blueprint3d.model.reset.bind(blueprint3d.model));
 
-    uxInterface.addFileChooser("Load Locked Design", "Load Locked Design", ".blueprint3d", loadLockedBlueprint3DDesign);
-
     settingsViewer2d.addButton('Draw Mode', switchViewer2DToDraw);
     settingsViewer2d.addButton('Move Mode', switchViewer2DToMove);
     settingsViewer2d.addButton('Transform Mode', switchViewer2DToTransform);

src/scripts/blueprint.js

@@ -66,7 +66,7 @@ class BlueprintJS {
             this.floorplanningHelper = new FloorPlannerHelper(this.model.floorplan, this.floorplanner);
         }
 
-        this.view_now = 2;
+        this.view_now = 3;
         this.switchView();
     }
 

src/scripts/core/configuration.js

@@ -1,4 +1,4 @@
-import { dimCentiMeter,dimMeter } from './constants.js';
+import { availableDimUnits, dimCentiMeter } from './constants.js';
 import { EventDispatcher } from 'three';
 import { EVENT_CHANGED } from './events.js';
 
@@ -74,7 +74,11 @@ export class Configuration extends EventDispatcher {
 
     /** Set a configuration parameter. */
     static setValue(key, value) {
-        //		this.data[key] = value;
+        if(key == configDimUnit){
+            if(!availableDimUnits.includes(value)){
+                throw new Error(`Unknown dimensional units option: ${value}. Possible values are ${availableDimUnits}`);
+            }
+        }
         config[key] = value;
         Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value });
     }

src/scripts/core/constants.js

@@ -18,6 +18,8 @@ export const dimCentiMeter = 'cm';
 /** Dimensioning in Milli Meter. */
 export const dimMilliMeter = 'mm';
 
+export const availableDimUnits = [dimInch, dimFeetAndInch, dimFeet, dimMeter, dimCentiMeter, dimMilliMeter];
+
 export const VIEW_TOP = 'topview';
 export const VIEW_FRONT = 'frontview';
 export const VIEW_RIGHT = 'rightview';

src/scripts/core/dimensioning.js

@@ -1,6 +1,6 @@
 import { Vector2, Vector3 } from 'three';
 import { Configuration, configDimUnit } from './configuration.js';
-import { dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter } from './constants.js';
+import { dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter, dimFeet } from './constants.js';
 
 export const decimals = 1000;
 
@@ -59,6 +59,7 @@ export class Dimensioning {
          */
     static cmFromMeasureRaw(measure) {
         switch (Configuration.getStringValue(configDimUnit)) {
+            case dimFeet:
             case dimFeetAndInch:
                 return Math.round(decimals * (measure * 30.480016459203095991)) / decimals;
             case dimInch:
@@ -76,24 +77,33 @@ export class Dimensioning {
     static cmToMeasureUnit(cm, power = 1,unit) {
 
         switch (Configuration.getStringValue(unit)) {
+            case dimFeet:
+                var allInFeet = (cm * Math.pow(0.032808416666669996953, power));
+                allInFeet = Dimensioning.roundOff(allInFeet,2);
+                return `${allInFeet}"`;
             case dimFeetAndInch:
                 var allInFeet = (cm * Math.pow(0.032808416666669996953, power));
                 var floorFeet = Math.floor(allInFeet);
                 var remainingFeet = allInFeet - floorFeet;
                 var remainingInches = Math.round(remainingFeet * 12);
-                return floorFeet + '\'' + remainingInches + '';
+                return `${floorFeet}" ${remainingInches}'`;
+                // return floorFeet + '\'' + remainingInches + '';
             case dimInch:
                 var inches = Math.round(decimals * (cm * Math.pow(0.393700, power))) / decimals;
-                return inches + '\'';
+                return `${inches}'`
+                // return inches + '\'';
             case dimMilliMeter:
                 var mm = Math.round(decimals * (cm * Math.pow(10, power))) / decimals;
-                return '' + mm + 'mm';
+                return `${mm} mm`
+                // return '' + mm + 'mm';
             case dimCentiMeter:
-                return '' + Math.round(decimals * cm) / decimals + 'cm';
+                return `${(Math.round(decimals * cm) / decimals)} cm`
+                // return '' + Math.round(decimals * cm) / decimals + 'cm';
             case dimMeter:
             default:
                 var m = Math.round(decimals * (cm * Math.pow(0.01, power))) / decimals;
-                return '' + m + 'm';
+                return `${m} m`;
+                // return '' + m + 'm';
         }
     }
 
@@ -103,6 +113,7 @@ export class Dimensioning {
      */
     static cmFromMeasure(measure) {
         switch (Configuration.getStringValue(configDimUnit)) {
+            case dimFeet:
             case dimFeetAndInch:
                 return Math.round(decimals * (measure * 30.480016459203095991)) / decimals + 'cm';
             case dimInch:
@@ -123,6 +134,7 @@ export class Dimensioning {
      */
     static cmToMeasureRaw(cm, power = 1) {
         switch (Configuration.getStringValue(configDimUnit)) {
+            case dimFeet:
             case dimFeetAndInch: // dimFeetAndInch returns only the feet
                 var allInFeet = (cm * Math.pow(0.032808416666669996953, power));
                 return allInFeet;
@@ -147,6 +159,10 @@ export class Dimensioning {
      */
     static cmToMeasure(cm, power = 1) {
         switch (Configuration.getStringValue(configDimUnit)) {
+            case dimFeet:
+                var allInFeet = (cm * Math.pow(0.032808416666669996953, power));
+                allInFeet = Dimensioning.roundOff(allInFeet,2);
+                return `${allInFeet}"`;
             case dimFeetAndInch:
                 var allInFeet = (cm * Math.pow(0.032808416666669996953, power));
                 var floorFeet = Math.floor(allInFeet);

src/scripts/core/events.js

@@ -37,8 +37,6 @@ export const EVENT_ITEM_HOVERON = 'ITEM_HOVERON_EVENT';
 export const EVENT_ITEM_HOVEROFF = 'ITEM_HOVEROFF_EVENT';
 export const EVENT_NO_ITEM_SELECTED = 'ITEM_NO_SELECTED_EVENT';
 
-export const EVENT_ITEM_OPT = 'ITEM_OPTION_EVENT';
-
 export const EVENT_MODE_RESET = 'MODE_RESET_EVENT';
 export const EVENT_CAMERA_MOVED = 'CAMERA_MOVED_EVENT';
 export const EVENT_CAMERA_ACTIVE_STATUS = 'CAMERA_ACTIVE_STATUS_EVENT';

src/scripts/helpers/ConfigurationHelper.js

@@ -1,4 +1,4 @@
-const { Configuration, gridSpacing, snapTolerance, boundsY, boundsX, dragOnlyY, dragOnlyX, directionalDrag, snapToGrid, itemStatistics } = require("../core/configuration");
+const { Configuration, gridSpacing, snapTolerance, boundsY, boundsX, dragOnlyY, dragOnlyX, directionalDrag, snapToGrid, itemStatistics, configDimUnit } = require("../core/configuration");
 
 export class ConfigurationHelper {
     constructor() {
@@ -11,6 +11,7 @@ export class ConfigurationHelper {
         this.__snapTolerance = Configuration.getNumericValue(snapTolerance);
         this.__gridSpacing = Configuration.getNumericValue(gridSpacing);
         this.__itemStatistics = Configuration.getBooleanValue(itemStatistics);
+        this.__configDimUnit = Configuration.getStringValue(configDimUnit);
     }
 
     get snapToGrid() {
@@ -89,4 +90,13 @@ export class ConfigurationHelper {
         this.__itemStatistics = flag;
         Configuration.setValue(itemStatistics, flag);
     }
+
+    get configDimUnit(){
+        return this.__configDimUnit;
+    }
+
+    set configDimUnit(dimUnitValue){
+        console.info('SET UNITS TO ', dimUnitValue);
+        Configuration.setValue(configDimUnit, dimUnitValue);
+    }
 }

src/scripts/model/half_edge.js

@@ -1,5 +1,5 @@
 import { EventDispatcher, Vector2, Vector3, Matrix4, Mesh, MeshStandardMaterial, Box3, BufferGeometry, Plane } from 'three';
-import { EVENT_REDRAW, EVENT_MOVED, EVENT_UPDATED, EVENT_UPDATE_TEXTURES, EVENT_DELETED, EVENT_MODIFY_TEXTURE_ATTRIBUTE, EVENT_CHANGED } from '../core/events.js';
+import { EVENT_REDRAW, EVENT_MOVED, EVENT_UPDATED, EVENT_UPDATE_TEXTURES, EVENT_DELETED, EVENT_MODIFY_TEXTURE_ATTRIBUTE, EVENT_CHANGED, EVENT_NEW_ITEM, EVENT_ITEM_REMOVED, EVENT_ITEM_MOVE } from '../core/events.js';
 import { Utils } from '../core/utils.js';
 import { WallTypes, TEXTURE_DEFAULT_REPEAT, TEXTURE_PROPERTY_REPEAT, TEXTURE_PROPERTY_COLOR, TEXTURE_PROPERTY_ROTATE, TEXTURE_PROPERTY_REFLECTIVE, TEXTURE_PROPERTY_SHININESS } from '../core/constants.js';
 
@@ -165,11 +165,15 @@ export class HalfEdge extends EventDispatcher {
         this.offset = wall.thickness / 2.0;
         this.height = wall.height;
 
+        this.__wallItemChangesEvent = this.__wallItemChanges.bind(this);
         this.__wallMovedEvent = this.__wallMoved.bind(this);
         this.__wallUpdatedEvent = this.__wallUpdated.bind(this);
 
         this.wall.addEventListener(EVENT_MOVED, this.__wallMovedEvent);
         this.wall.addEventListener(EVENT_UPDATED, this.__wallUpdatedEvent);
+        this.wall.addEventListener(EVENT_NEW_ITEM, this.__wallItemChangesEvent);
+        this.wall.addEventListener(EVENT_ITEM_REMOVED, this.__wallItemChangesEvent);
+
         if (this.room) {
             this.room.addEventListener(EVENT_CHANGED, this.__wallMovedEvent);
         }
@@ -193,14 +197,28 @@ export class HalfEdge extends EventDispatcher {
         this.__eDistance = this.__exteriorDistance();
     }
 
+    __wallItemChanges(evt){
+        let keys = Object.keys(evt);
+        /**
+         * Ensure to copy the evt object and dispatch that event object. 
+         * Otherwise changing the values of the original evt object will affect 
+         * the evt object parameter being listened by other object to original firing instance
+         */
+        let myEvt = {};
+        keys.forEach((key) =>{
+            myEvt[key] = evt[key];
+        });
+        myEvt.item = this;
+
+        this.dispatchEvent(myEvt);
+    }
+
     __wallMoved(evt) {
-        let scope = this;
         this.__updateInteriorsExteriors();
         // scope.computeTransforms(scope.interiorTransform, scope.invInteriorTransform, scope.interiorStart(), scope.interiorEnd());
         // scope.computeTransforms(scope.exteriorTransform, scope.invExteriorTransform, scope.exteriorStart(), scope.exteriorEnd());
         this.generatePlane();
-        scope.dispatchEvent({ type: EVENT_REDRAW, item: scope });
-
+        this.dispatchRedrawEvent();
     }
 
     __wallUpdated(evt) {
@@ -210,7 +228,7 @@ export class HalfEdge extends EventDispatcher {
         // scope.computeTransforms(scope.interiorTransform, scope.invInteriorTransform, scope.interiorStart(), scope.interiorEnd());
         // scope.computeTransforms(scope.exteriorTransform, scope.invExteriorTransform, scope.exteriorStart(), scope.exteriorEnd());
         this.generatePlane();
-        scope.dispatchEvent({ type: EVENT_REDRAW, item: scope });
+        this.dispatchRedrawEvent();
     }
 
     /**
@@ -993,7 +1011,7 @@ export class HalfEdge extends EventDispatcher {
         }
 
         //this.redrawCallbacks.fire();
-        this.dispatchEvent({ type: EVENT_REDRAW, item: this });
+        this.dispatchRedrawEvent();
     }
 
     /**
@@ -1029,6 +1047,8 @@ export class HalfEdge extends EventDispatcher {
         this.__plane = null;
         // this.wall = null;
         this.__isOrphan = true;
+        this.wall.removeEventListener(EVENT_NEW_ITEM, this.__wallItemChangesEvent);
+        this.wall.removeEventListener(EVENT_ITEM_REMOVED, this.__wallItemChangesEvent);
         this.wall.removeEventListener(EVENT_MOVED, this.__wallMovedEvent);
         this.wall.removeEventListener(EVENT_UPDATED, this.__wallUpdatedEvent);
         this.dispatchEvent({ type: EVENT_DELETED, edge: this });

src/scripts/model/wall.js

@@ -1,7 +1,10 @@
 import { EventDispatcher, Vector2, Vector3, Plane } from 'three';
 import Bezier from 'bezier-js';
 import { WallTypes, defaultWallTexture } from '../core/constants.js';
-import { EVENT_ACTION, EVENT_MOVED, EVENT_DELETED, EVENT_UPDATED, EVENT_CORNER_ATTRIBUTES_CHANGED } from '../core/events.js';
+import { 
+    EVENT_ACTION, EVENT_MOVED, EVENT_DELETED, 
+    EVENT_UPDATED, EVENT_CORNER_ATTRIBUTES_CHANGED, 
+    EVENT_NEW_ITEM, EVENT_ITEM_REMOVED } from '../core/events.js';
 import { Configuration, configWallThickness, configWallHeight } from '../core/configuration.js';
 import { Utils } from '../core/utils.js';
 import { InWallItem } from '../items/in_wall_item.js';
@@ -165,37 +168,51 @@ export class Wall extends EventDispatcher {
         this.remove();
     }
 
+    /** 
+     * @param {Item} item 
+     * @returns {null}
+     * @description It is not plausible to track an item movement by adding their move listeners.
+     * This happens because of the reason that in-wall-items and in-wall-floor-items are moved by users
+     * in real-time a lot. Due to this factor adding and removing listeners to monitor item movements will 
+     * be a pain in the a**. Instead just keeping adding the item repeatedly to a wall whenever it is moved. 
+     * This will trigger only the item added event.
+     */
+
     addItem(item) {
         if (item instanceof InWallItem || item instanceof InWallFloorItem) {
             if (!Utils.hasValue(this.__inWallItems, item)) {
                 this.__inWallItems.push(item);
-            }
-            this.dispatchEvent({ type: EVENT_MOVED, item: this, position: null });
+            }            
         }
-
         if (item instanceof WallItem || item instanceof WallFloorItem) {
             if (!Utils.hasValue(this.__onWallItems, item)) {
                 this.__onWallItems.push(item);
-            }
-            this.dispatchEvent({ type: EVENT_MOVED, item: this, position: null });
+            }            
         }
+        this.dispatchEvent({ type: EVENT_NEW_ITEM, item: this, position: null, added: item });
     }
 
+    /** 
+     * @param {Item} item 
+     * @returns {null}
+     * @description It is not plausible to track an item movement by adding their move listeners.
+     * This happens because of the reason that in-wall-items and in-wall-floor-items are moved by users
+     * in real-time a lot. Due to this factor adding and removing listeners to monitor item movements will 
+     * be a pain in the a**. Instead just keeping removing the item repeatedly to a wall whenever it is moved. 
+     * This will trigger only the item remove event.
+     */
     removeItem(item) {
         if (item instanceof InWallItem || item instanceof InWallFloorItem) {
             if (Utils.hasValue(this.__inWallItems, item)) {
                 Utils.removeValue(this.__inWallItems, item);
             }
-
-            this.dispatchEvent({ type: EVENT_MOVED, item: this, position: null });
         }
         if (item instanceof WallItem || item instanceof WallFloorItem) {
             if (Utils.hasValue(this.__onWallItems, item)) {
                 Utils.removeValue(this.__onWallItems, item);
             }
-
-            this.dispatchEvent({ type: EVENT_MOVED, item: this, position: null });
         }
+        this.dispatchEvent({ type: EVENT_ITEM_REMOVED, item: this, position: null, removed: item });
     }
 
     addCornerMoveListener(corner, remove = false) {
@@ -319,14 +336,10 @@ export class Wall extends EventDispatcher {
 
     fireRedraw() {
         if (this.frontEdge) {
-            //			this.frontEdge.dispatchEvent({type: EVENT_REDRAW});
             this.frontEdge.dispatchRedrawEvent();
-            //this.frontEdge.redrawCallbacks.fire();
         }
         if (this.backEdge) {
-            //			this.backEdge.dispatchEvent({type: EVENT_REDRAW});
             this.backEdge.dispatchRedrawEvent();
-            //this.backEdge.redrawCallbacks.fire();
         }
     }