├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── src ├── Autodesk.ADN.Viewing.Extension.Basic │ └── Autodesk.ADN.Viewing.Extension.Basic.js ├── Autodesk.ADN.Viewing.Extension.BasicES2015 │ └── Autodesk.ADN.Viewing.Extension.BasicES2015.js ├── Autodesk.ADN.Viewing.Extension.BootstrapPanel │ ├── Autodesk.ADN.Viewing.Extension.BootstrapPanel.js │ └── bs-export │ │ ├── assets │ │ ├── bootstrap │ │ │ ├── css │ │ │ │ └── bootstrap.min.css │ │ │ ├── fonts │ │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ │ ├── glyphicons-halflings-regular.woff2 │ │ │ │ └── glyphicons.css │ │ │ └── js │ │ │ │ └── bootstrap.min.js │ │ ├── css │ │ │ └── user.css │ │ └── js │ │ │ └── jquery.min.js │ │ └── index.html ├── Autodesk.ADN.Viewing.Extension.BoundingBox │ └── Autodesk.ADN.Viewing.Extension.BoundingBox.js ├── Autodesk.ADN.Viewing.Extension.CSSRenderer │ ├── Autodesk.ADN.Viewing.Extension.CSSRenderer.js │ ├── Autodesk.ADN.Viewing.Tool.Snapper.js │ └── CSS3DRenderer.js ├── Autodesk.ADN.Viewing.Extension.CamSnapshot │ └── Autodesk.ADN.Viewing.Extension.CamSnapshot.js ├── Autodesk.ADN.Viewing.Extension.Chart │ ├── Autodesk.ADN.Viewing.Extension.Chart.js │ ├── Chart.min.js │ └── async.min.js ├── Autodesk.ADN.Viewing.Extension.ContextMenu │ └── Autodesk.ADN.Viewing.Extension.ContextMenu.js ├── Autodesk.ADN.Viewing.Extension.ControlSelector │ └── Autodesk.ADN.Viewing.Extension.ControlSelector.js ├── Autodesk.ADN.Viewing.Extension.CustomTool │ └── Autodesk.ADN.Viewing.Extension.CustomTool.js ├── Autodesk.ADN.Viewing.Extension.DockingPanel │ └── Autodesk.ADN.Viewing.Extension.DockingPanel.js ├── Autodesk.ADN.Viewing.Extension.ES7Async │ └── Autodesk.ADN.Viewing.Extension.ES7Async.js ├── Autodesk.ADN.Viewing.Extension.EventWatcher │ ├── Autodesk.ADN.Viewing.Extension.EventWatcher.js │ ├── circular-json.min.js │ ├── jquery.jsonview.css │ └── jquery.jsonview.js ├── Autodesk.ADN.Viewing.Extension.Explorer │ └── Autodesk.ADN.Viewing.Extension.Explorer.js ├── Autodesk.ADN.Viewing.Extension.GeometrySelector │ ├── Autodesk.ADN.Viewing.Extension.GeometrySelector.js │ └── Autodesk.ADN.Viewing.Tool.Snapper.js ├── Autodesk.ADN.Viewing.Extension.Hotkeys │ └── Autodesk.ADN.Viewing.Extension.Hotkeys.js ├── Autodesk.ADN.Viewing.Extension.IFramePanel │ └── Autodesk.ADN.Viewing.Extension.IFramePanel.js ├── Autodesk.ADN.Viewing.Extension.Layers │ └── Autodesk.ADN.Viewing.Extension.Layers.js ├── Autodesk.ADN.Viewing.Extension.Material │ ├── Autodesk.ADN.Viewing.Extension.Material.js │ ├── brick.jpg │ ├── spectrum.css │ ├── spectrum.js │ ├── steel.jpg │ └── wood.jpg ├── Autodesk.ADN.Viewing.Extension.MeshData │ └── Autodesk.ADN.Viewing.Extension.MeshData.js ├── Autodesk.ADN.Viewing.Extension.MeshImporter │ ├── Arbor Press.json │ └── Autodesk.ADN.Viewing.Extension.MeshImporter.js ├── Autodesk.ADN.Viewing.Extension.MetaProperties │ └── Autodesk.ADN.Viewing.Extension.MetaProperties.js ├── Autodesk.ADN.Viewing.Extension.ModelStructure │ └── Autodesk.ADN.Viewing.Extension.ModelStructure.js ├── Autodesk.ADN.Viewing.Extension.ModelStructurePanel │ └── Autodesk.ADN.Viewing.Extension.ModelStructurePanel.js ├── Autodesk.ADN.Viewing.Extension.PropertyDump │ └── Autodesk.ADN.Viewing.Extension.PropertyDump.js ├── Autodesk.ADN.Viewing.Extension.PropertyListPanel │ └── Autodesk.ADN.Viewing.Extension.PropertyListPanel.js ├── Autodesk.ADN.Viewing.Extension.PropertyPanel │ └── Autodesk.ADN.Viewing.Extension.PropertyPanel.js ├── Autodesk.ADN.Viewing.Extension.PropertyTranslator │ └── Autodesk.ADN.Viewing.Extension.PropertyTranslator.js ├── Autodesk.ADN.Viewing.Extension.RadialMenu │ └── Autodesk.ADN.Viewing.Extension.RadialMenu.js ├── Autodesk.ADN.Viewing.Extension.Riot │ ├── Autodesk.ADN.Viewing.Extension.Riot.js │ └── riot.min.js ├── Autodesk.ADN.Viewing.Extension.ScreenShotManager │ └── Autodesk.ADN.Viewing.Extension.ScreenShotManager.js ├── Autodesk.ADN.Viewing.Extension.Toolbar │ └── Autodesk.ADN.Viewing.Extension.Toolbar.js ├── Autodesk.ADN.Viewing.Extension.UIComponent │ └── Autodesk.ADN.Viewing.Extension.UIComponent.js ├── Autodesk.ADN.Viewing.Extension.Workshop │ └── Autodesk.ADN.Viewing.Extension.Workshop.js ├── Forge.ConnectedData │ ├── ConnectedData.css │ └── ConnectedData.js ├── Viewing.Extension.CSSTV │ ├── CSS3DRenderer.js │ ├── Viewing.Extension.CSSTV.js │ └── scenes │ │ ├── BrowserScene.js │ │ ├── IFrameScene.js │ │ ├── WeatherScene.js │ │ └── styles.css ├── Viewing.Extension.ContextMenu │ ├── Viewing.Extension.ContextMenu.Handler.js │ ├── Viewing.Extension.ContextMenu.js │ └── index.js ├── Viewing.Extension.ControlSelector │ └── Viewing.Extension.ControlSelector.js ├── Viewing.Extension.CustomModelStructure │ ├── Viewing.Extension.CustomModelStructure.Panel.js │ └── Viewing.Extension.CustomModelStructure.js ├── Viewing.Extension.CustomTree │ ├── Viewing.Extension.CustomTree.Panel.js │ ├── Viewing.Extension.CustomTree.css │ └── Viewing.Extension.CustomTree.js ├── Viewing.Extension.DynamicTexture │ └── Viewing.Extension.DynamicTexture.js ├── Viewing.Extension.ExtensionManager │ ├── Viewing.Extension.ExtensionManager.Panel.js │ └── Viewing.Extension.ExtensionManager.js ├── Viewing.Extension.Markup2D │ ├── MarkupsCore.js │ ├── MarkupsCore.min.js │ ├── Viewing.Extension.Markup2D.Panel.js │ ├── Viewing.Extension.Markup2D.css │ ├── Viewing.Extension.Markup2D.js │ ├── spectrum.css │ └── spectrum.js ├── Viewing.Extension.Markup3D │ ├── Markup3D │ │ ├── Markup3D.Label.js │ │ ├── Markup3D.Leader.js │ │ ├── Markup3D.PinPoint.js │ │ └── Markup3D.js │ ├── Viewing.Extension.Markup3D.Tool.js │ ├── Viewing.Extension.Markup3D.js │ ├── Viewing.Extension.Markup3D.scss │ └── index.js ├── Viewing.Extension.MetaProperty │ ├── Viewing.Extension.MetaProperty.Panel.js │ ├── Viewing.Extension.MetaProperty.js │ ├── Viewing.Extension.MetaProperty.scss │ └── index.js ├── Viewing.Extension.ModelTransformer │ ├── TransformGizmos.js │ ├── Viewing.Extension.ModelTransformer.Panel.js │ ├── Viewing.Extension.ModelTransformer.js │ ├── Viewing.Extension.ModelTransformer.scss │ ├── Viewing.Tool.Rotate.js │ ├── Viewing.Tool.Translate.js │ └── index.js ├── Viewing.Extension.Particle │ ├── ParticleSystem │ │ ├── BaseObject.js │ │ ├── Field.js │ │ ├── MagneticField.js │ │ ├── Particle.js │ │ ├── ParticleEmitter.js │ │ ├── ParticleSystem.js │ │ └── Vector.js │ ├── TransformGizmos.js │ ├── Viewing.Extension.Particle.LHC.css │ ├── Viewing.Extension.Particle.LHC.js │ ├── Viewing.Extension.Particle.Panel.js │ ├── Viewing.Extension.Particle.Tool.js │ ├── Viewing.Extension.Particle.css │ ├── Viewing.Extension.Particle.js │ ├── Viewing.Tool.Particle.Translate.js │ ├── fpsmeter.js │ └── scenes │ │ ├── LHC │ │ ├── LHC.iam │ │ ├── emitter-1.ipt │ │ ├── emitter-2.ipt │ │ ├── field-inner.ipt │ │ ├── field-outer.ipt │ │ ├── ring - down.ipt │ │ └── ring - up.ipt │ │ └── Simple │ │ ├── emitter.ipt │ │ ├── field-1.ipt │ │ ├── field-2.ipt │ │ └── particle.iam ├── Viewing.Extension.PointCloud │ ├── Viewing.Extension.PointCloud.js │ └── test │ │ ├── TrackballControls.js │ │ ├── test.html │ │ ├── text.jpg │ │ └── three.js ├── Viewing.Extension.StateManager │ ├── Viewing.Extension.StateManager.API.js │ ├── Viewing.Extension.StateManager.Panel.js │ ├── Viewing.Extension.StateManager.js │ ├── Viewing.Extension.StateManager.scss │ └── index.js ├── Viewing.Extension.Transform │ ├── TransformGizmos.js │ ├── Viewing.Extension.Transform.js │ ├── Viewing.Tool.Rotate.js │ └── Viewing.Tool.Translate.js ├── Viewing.Extension.TypeScript │ ├── Viewing.Extension.TypeScript.js │ └── Viewing.Extension.TypeScriptExtension.ts ├── Viewing.Extension.VisualReport │ ├── BarChart │ │ ├── BarChart.js │ │ └── BarChart.scss │ ├── CircleGraph │ │ ├── CircleGraph.css │ │ └── CircleGraph.js │ ├── ForceGraph │ │ ├── ForceGraph.css │ │ └── ForceGraph.js │ ├── PieChart │ │ └── PieChart.js │ ├── Viewing.Extension.VisualReport.Panel.js │ ├── Viewing.Extension.VisualReport.js │ ├── Viewing.Extension.VisualReport.scss │ └── index.js └── components │ ├── ClientAPI │ ├── ClientAPI.js │ └── index.js │ ├── Dropdown │ ├── Dropdown.js │ ├── Dropdown.scss │ └── index.js │ ├── EventsEmitter │ ├── EventsEmitter.js │ └── index.js │ ├── GraphicMarker │ ├── GraphicMarker.js │ └── index.js │ ├── RadialMenu.js │ ├── Stopwatch │ ├── Stopwatch.js │ └── index.js │ ├── SwitchButton │ ├── SwitchButton.js │ └── index.js │ ├── TabManager │ ├── TabManager.js │ ├── TabManager.scss │ └── index.js │ ├── ToggleButton │ ├── ToggleButton.js │ └── index.js │ ├── ToolPanelBase │ ├── ToolPanelBase.js │ ├── ToolPanelBase.scss │ └── index.js │ ├── ToolPanelModal │ ├── ToolPanelModal.js │ ├── ToolPanelModal.scss │ └── index.js │ ├── TreeView │ ├── TreeView.js │ └── index.js │ ├── UIComponent │ ├── UIComponent.js │ └── index.js │ ├── Viewer.Combo │ ├── Viewer.Combo.js │ ├── Viewer.Combo.scss │ └── index.js │ ├── Viewer.ExtensionBase │ ├── Viewer.ExtensionBase.js │ └── index.js │ ├── Viewer.PointTracker │ ├── Viewer.PointTracker.js │ └── index.js │ ├── Viewer.Toolkit │ ├── Viewer.Toolkit.js │ └── index.js │ └── Viewer.Tooltip │ ├── Viewer.Tooltip.js │ ├── Viewer.Tooltip.scss │ └── index.js ├── thumbnail.png └── webpack ├── webpack.config.development.js └── webpack.config.production.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | dist 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Autodesk, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lmv-viewing-extensions", 3 | "version": "2.0.0", 4 | "description": "UMD Extensions for View & Data API", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "postinstall": "npm run build-prod", 8 | "build-dev": "webpack --watch --progress --colors --config ./webpack/webpack.config.development.js", 9 | "build-prod": "webpack --progress --colors --config ./webpack/webpack.config.production.js" 10 | }, 11 | "author": "Philippe Leefsma", 12 | "dependencies": { 13 | "babel-core": "^6.5.2", 14 | "babel-loader": "^6.2.2", 15 | "babel-polyfill": "^6.5.0", 16 | "babel-preset-es2015": "^6.5.0", 17 | "babel-preset-react": "^6.0.15", 18 | "babel-preset-stage-0": "^6.5.0", 19 | "babel-plugin-transform-runtime": "^6.15.0", 20 | "backbone": "1.3.1", 21 | "css-loader": "^0.23.1", 22 | "d3": "^3.5.16", 23 | "d3pie": "^0.1.9", 24 | "dat-gui": "0.5.0", 25 | "debug": "2.2.0", 26 | "dragula": "^3.6.8", 27 | "file-loader": "^0.8.5", 28 | "image-webpack-loader": "^1.6.3", 29 | "imports-loader": "0.6.5", 30 | "inspire-tree": "^1.2.6", 31 | "jquery": "^3.0.0", 32 | "less": "^2.7.1", 33 | "less-loader": "^2.2.3", 34 | "lodash": "^4.11.1", 35 | "node-sass": "^3.12.1", 36 | "postcss-loader": "^1.1.1", 37 | "randomcolor": "^0.4.4", 38 | "raw-loader": "^0.5.1", 39 | "react": "^0.14.8", 40 | "react-dom": "^0.14.8", 41 | "sass": "^0.5.0", 42 | "sass-loader": "^4.0.2", 43 | "smoothie": "^1.27.0", 44 | "snapsvg": "^0.4.0", 45 | "socket.io-client": "1.4.5", 46 | "style-loader": "^0.13.1", 47 | "systemjs": "0.19.22", 48 | "traceur": "0.0.104", 49 | "ts-loader": "^0.8.1", 50 | "typescript": "^1.8.7", 51 | "url-loader": "^0.5.7", 52 | "velocity-animate": "^1.3.1", 53 | "webpack": "^1.12.13" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.Basic/Autodesk.ADN.Viewing.Extension.Basic.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // Basic viewer extension 3 | // by Philippe Leefsma, October 2014 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | Autodesk.ADN.Viewing.Extension.Basic = function (viewer, options) { 9 | 10 | Autodesk.Viewing.Extension.call(this, viewer, options); 11 | 12 | var _self = this; 13 | 14 | _self.load = function () { 15 | 16 | alert('Autodesk.ADN.Viewing.Extension.Basic loaded'); 17 | 18 | return true; 19 | }; 20 | 21 | _self.unload = function () { 22 | 23 | alert('Autodesk.ADN.Viewing.Extension.Basic unloaded'); 24 | 25 | return true; 26 | }; 27 | }; 28 | 29 | Autodesk.ADN.Viewing.Extension.Basic.prototype = 30 | Object.create(Autodesk.Viewing.Extension.prototype); 31 | 32 | Autodesk.ADN.Viewing.Extension.Basic.prototype.constructor = 33 | Autodesk.ADN.Viewing.Extension.Basic; 34 | 35 | Autodesk.Viewing.theExtensionManager.registerExtension( 36 | 'Autodesk.ADN.Viewing.Extension.Basic', 37 | Autodesk.ADN.Viewing.Extension.Basic); 38 | 39 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.BasicES2015/Autodesk.ADN.Viewing.Extension.BasicES2015.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // Basic viewer extension written in ES2015 3 | // by Philippe Leefsma, July 2015 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | 7 | class BasicES2015 extends Autodesk.Viewing.Extension { 8 | 9 | ///////////////////////////////////////////////////////////////// 10 | // Class constructor 11 | // 12 | ///////////////////////////////////////////////////////////////// 13 | constructor(viewer, options) { 14 | 15 | super(viewer, options); 16 | 17 | console.log(BasicES2015.ExtensionId + ' Constructor'); 18 | 19 | this.viewer = viewer; 20 | } 21 | 22 | ///////////////////////////////////////////////////////////////// 23 | // Extension Id 24 | // 25 | ///////////////////////////////////////////////////////////////// 26 | static get ExtensionId() { 27 | 28 | return 'Autodesk.ADN.Viewing.Extension.BasicES2015'; 29 | } 30 | 31 | ///////////////////////////////////////////////////////////////// 32 | // Load callback 33 | // 34 | ///////////////////////////////////////////////////////////////// 35 | load() { 36 | 37 | alert("BasicES2015 extension Loaded"); 38 | 39 | this.viewer.setBackgroundColor( 40 | 255,0,0, 41 | 255,255, 255); 42 | 43 | return true; 44 | } 45 | 46 | ///////////////////////////////////////////////////////////////// 47 | // Unload callback 48 | // 49 | ///////////////////////////////////////////////////////////////// 50 | unload() { 51 | 52 | this.viewer.setBackgroundColor( 53 | 160, 176, 184, 54 | 190,207,216); 55 | 56 | alert("BasicES2015 Unloaded"); 57 | 58 | return true; 59 | } 60 | } 61 | 62 | Autodesk.Viewing.theExtensionManager.registerExtension( 63 | 'Autodesk.ADN.Viewing.Extension.BasicES2015', 64 | BasicES2015); 65 | 66 | 67 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/bootstrap/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.BootstrapPanel/bs-export/assets/css/user.css: -------------------------------------------------------------------------------- 1 | .panel-container{ 2 | max-width:580px; 3 | margin:50px; 4 | padding:10px; 5 | background-color:#F1F1F1; 6 | border-style:solid; 7 | border-width:1px; 8 | border-radius:25px; 9 | border-color:#1A1FC1; 10 | } 11 | 12 | @media (max-width:480px) { 13 | .input-row-spacer{ 14 | float:left; 15 | width:1px; 16 | min-height:1px; 17 | } 18 | } 19 | 20 | @media (min-width:481px) { 21 | .input-row-spacer{ 22 | float:left; 23 | width:10px; 24 | min-height:1px; 25 | } 26 | } 27 | 28 | .btn-gallery-home{ 29 | min-width:160px; 30 | } 31 | 32 | .input-row-label-container{ 33 | float:left; 34 | width:54px; 35 | } 36 | 37 | .input-row-label{ 38 | vertical-align:bottom; 39 | background-color:#F1F1F1; 40 | color:black; 41 | } 42 | 43 | .input-input-row{ 44 | border-radius:4px; 45 | height:24px; 46 | } 47 | 48 | .btn-input-row{ 49 | width:80px; 50 | height:24px; 51 | padding:0; 52 | top:0; 53 | vertical-align:top; 54 | line-height:0; 55 | } 56 | 57 | .span-input-row{ 58 | top:-1px; 59 | vertical-align:middle; 60 | } 61 | 62 | hr.hr-panel{ 63 | border-top:1px solid #1A1FC1; 64 | margin-right:5px; 65 | margin-left:5px; 66 | } 67 | 68 | hr.panel-vertical-spacer{ 69 | margin:10px; 70 | border-top:1px; 71 | } 72 | 73 | div.panel-validation-controls-container{ 74 | position:relative; 75 | float:right; 76 | right:20px; 77 | } 78 | 79 | @media (max-width:480px) { 80 | .btn-sign-in{ 81 | margin-top:8px; 82 | } 83 | } 84 | 85 | @media (min-width:481px) { 86 | .btn-sign-in{ 87 | float:right; 88 | margin-top:8px; 89 | margin-right:184px; 90 | } 91 | } 92 | 93 | input.input-sign-in{ 94 | width:100%; 95 | } 96 | 97 | .radio-input-row{ 98 | margin-top:0px; 99 | margin-bottom:0px; 100 | } 101 | 102 | .radio + .radio{ 103 | margin-top:0px; 104 | } 105 | 106 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.ContextMenu/Autodesk.ADN.Viewing.Extension.ContextMenu.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // ContextMenu viewer extension 3 | // by Philippe Leefsma, October 2014 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | 9 | Autodesk.ADN.Viewing.Extension.ContextMenu = function (viewer, options) { 10 | 11 | Autodesk.Viewing.Extension.call(this, viewer, options); 12 | 13 | var _self = this; 14 | 15 | var _viewer = viewer; 16 | 17 | var _selectedId = null; 18 | 19 | _self.load = function () { 20 | 21 | Autodesk.ADN.Viewing.Extension.AdnContextMenu = function (viewer) { 22 | Autodesk.Viewing.Extensions.ViewerObjectContextMenu.call(this, viewer); 23 | }; 24 | 25 | Autodesk.ADN.Viewing.Extension.AdnContextMenu.prototype = 26 | Object.create(Autodesk.Viewing.Extensions.ViewerObjectContextMenu.prototype); 27 | 28 | Autodesk.ADN.Viewing.Extension.AdnContextMenu.prototype.constructor = 29 | Autodesk.ADN.Viewing.Extension.AdnContextMenu; 30 | 31 | Autodesk.ADN.Viewing.Extension.AdnContextMenu.prototype.buildMenu = 32 | 33 | function (event, status) { 34 | 35 | var menu = Autodesk.Viewing.Extensions.ViewerObjectContextMenu.prototype.buildMenu.call( 36 | this, event, status); 37 | 38 | if(_selectedId) { 39 | menu.push({ 40 | title: "Node-specific Menu Item [dbId: " + _selectedId + "]", 41 | target: function () { 42 | alert('Awesome node [' + _selectedId + '] was selected!'); 43 | } 44 | }); 45 | } 46 | else { 47 | 48 | menu.push({ 49 | title: "Zero-selection Menu Item", 50 | target: function () { 51 | alert('Awesome no node selected!'); 52 | } 53 | }); 54 | } 55 | 56 | return menu; 57 | }; 58 | 59 | _viewer.setContextMenu( 60 | new Autodesk.ADN.Viewing.Extension.AdnContextMenu(_viewer)); 61 | 62 | _viewer.addEventListener( 63 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 64 | _self.onItemSelected); 65 | 66 | console.log('Autodesk.ADN.Viewing.Extension.ContextMenu loaded'); 67 | 68 | return true; 69 | }; 70 | 71 | _self.unload = function () { 72 | 73 | _viewer.setContextMenu( 74 | new Autodesk.Viewing.Extensions.ViewerObjectContextMenu(viewer) 75 | ); 76 | 77 | _viewer.removeEventListener( 78 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 79 | _self.onItemSelected); 80 | 81 | console.log('Autodesk.ADN.Viewing.Extension.ContextMenu unloaded'); 82 | 83 | return true; 84 | }; 85 | 86 | /////////////////////////////////////////////////////////////////////////// 87 | // item selected callback 88 | // 89 | /////////////////////////////////////////////////////////////////////////// 90 | _self.onItemSelected = function (event) { 91 | 92 | var dbId = event.dbIdArray[0]; 93 | 94 | if (typeof dbId !== 'undefined') { 95 | 96 | _selectedId = dbId; 97 | } 98 | else _selectedId = null; 99 | } 100 | }; 101 | 102 | Autodesk.ADN.Viewing.Extension.ContextMenu.prototype = 103 | Object.create(Autodesk.Viewing.Extension.prototype); 104 | 105 | Autodesk.ADN.Viewing.Extension.ContextMenu.prototype.constructor = 106 | Autodesk.ADN.Viewing.Extension.ContextMenu; 107 | 108 | Autodesk.Viewing.theExtensionManager.registerExtension( 109 | 'Autodesk.ADN.Viewing.Extension.ContextMenu', 110 | Autodesk.ADN.Viewing.Extension.ContextMenu); -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.ES7Async/Autodesk.ADN.Viewing.Extension.ES7Async.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // ES7Async viewer extension 3 | // by Philippe Leefsma, November 2015 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | Autodesk.ADN.Viewing.Extension.ES7Async = function (viewer, options) { 9 | 10 | Autodesk.Viewing.Extension.call(this, viewer, options); 11 | 12 | var _self = this; 13 | 14 | ///////////////////////////////////////////////////////////// 15 | // Async wrapper for viewer.getProperties 16 | // 17 | ///////////////////////////////////////////////////////////// 18 | viewer.getPropertiesAsync = function(dbId) { 19 | 20 | return new Promise(function(resolve, reject) { 21 | 22 | viewer.getProperties(dbId, function(result){ 23 | 24 | if (result.properties) { 25 | 26 | resolve(result.properties); 27 | } 28 | else { 29 | 30 | reject(new Error('Error getting properties')); 31 | } 32 | }); 33 | }); 34 | } 35 | 36 | ///////////////////////////////////////////////////////////// 37 | // Load callback 38 | // 39 | ///////////////////////////////////////////////////////////// 40 | _self.load = function () { 41 | 42 | viewer.addEventListener( 43 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 44 | onSelectionChanged); 45 | 46 | console.log('Autodesk.ADN.Viewing.Extension.ES7Async loaded'); 47 | 48 | return true; 49 | } 50 | 51 | ///////////////////////////////////////////////////////////// 52 | // Unload callback 53 | // 54 | ///////////////////////////////////////////////////////////// 55 | _self.unload = function () { 56 | 57 | viewer.removeEventListener( 58 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 59 | onSelectionChanged); 60 | 61 | console.log('Autodesk.ADN.Viewing.Extension.ES7Async unloaded'); 62 | 63 | return true; 64 | } 65 | 66 | ///////////////////////////////////////////////////////////// 67 | // async method 68 | // 69 | ///////////////////////////////////////////////////////////// 70 | async function dumpProperties(dbId) { 71 | 72 | try { 73 | 74 | let properties = await viewer.getPropertiesAsync(dbId); 75 | 76 | properties.map((prop) => { 77 | console.log(prop) 78 | }); 79 | } 80 | catch(ex){ 81 | 82 | console.log(ex); 83 | } 84 | } 85 | 86 | ///////////////////////////////////////////////////////////// 87 | // selection changed handler 88 | // 89 | ///////////////////////////////////////////////////////////// 90 | function onSelectionChanged(event) { 91 | 92 | event.dbIdArray.map((dbId) => { 93 | dumpProperties(dbId) 94 | }); 95 | 96 | return true; 97 | }; 98 | }; 99 | 100 | Autodesk.ADN.Viewing.Extension.ES7Async.prototype = 101 | Object.create(Autodesk.Viewing.Extension.prototype); 102 | 103 | Autodesk.ADN.Viewing.Extension.ES7Async.prototype.constructor = 104 | Autodesk.ADN.Viewing.Extension.ES7Async; 105 | 106 | Autodesk.Viewing.theExtensionManager.registerExtension( 107 | 'Autodesk.ADN.Viewing.Extension.ES7Async', 108 | Autodesk.ADN.Viewing.Extension.ES7Async); 109 | 110 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.EventWatcher/circular-json.min.js: -------------------------------------------------------------------------------- 1 | /*! (C) WebReflection Mit Style License */ 2 | var CircularJSON=function(e,t){function l(e,t,o){var u=[],f=[e],l=[e],c=[o?n:"[Circular]"],h=e,p=1,d;return function(e,v){return t&&(v=t.call(this,e,v)),e!==""&&(h!==this&&(d=p-a.call(f,this)-1,p-=d,f.splice(p,f.length),u.splice(p-1,u.length),h=this),typeof v=="object"&&v?(v!==this&&f.push(h=v),p=f.length,d=a.call(l,v),d<0?(d=l.push(v)-1,o?(u.push((""+e).replace(s,r)),c[d]=n+u.join(n)):c[d]=c[0]):v=c[d]):typeof v=="string"&&o&&(v=v.replace(r,i).replace(n,r))),v}}function c(e,t){for(var r=0,i=t.length;r', 52 | '', 53 | ].join('\n'); 54 | 55 | $(this.scrollContainer).append(html); 56 | }; 57 | 58 | Autodesk.ADN.Viewing.Extension.IFramePanel.Panel.prototype = 59 | Object.create(Autodesk.Viewing.UI.DockingPanel.prototype); 60 | 61 | Autodesk.ADN.Viewing.Extension.IFramePanel.Panel.prototype.constructor = 62 | Autodesk.ADN.Viewing.Extension.IFramePanel.Panel; 63 | 64 | Autodesk.ADN.Viewing.Extension.IFramePanel.Panel.prototype. 65 | initialize = function() { 66 | 67 | this.title = this.createTitleBar( 68 | this.titleLabel || 69 | this.container.id); 70 | 71 | this.closer = this.createCloseButton(); 72 | 73 | this.container.appendChild(this.title); 74 | this.title.appendChild(this.closer); 75 | this.container.appendChild(this.content); 76 | 77 | this.initializeMoveHandlers(this.container); 78 | this.initializeCloseHandler(this.closer); 79 | }; 80 | 81 | _panel = new Autodesk.ADN.Viewing.Extension.IFramePanel.Panel( 82 | viewer.container, 83 | guid(), 84 | 'IFrame Panel', 85 | 0, 0); 86 | 87 | _panel.setVisible(true); 88 | 89 | console.log('Autodesk.ADN.Viewing.Extension.IFramePanel loaded'); 90 | 91 | return true; 92 | }; 93 | 94 | ///////////////////////////////////////////////////////// 95 | // 96 | // 97 | ///////////////////////////////////////////////////////// 98 | _self.unload = function () { 99 | 100 | _panel.setVisible(false); 101 | 102 | _panel.uninitialize(); 103 | 104 | console.log('Autodesk.ADN.Viewing.Extension.IFramePanel unloaded'); 105 | 106 | return true; 107 | }; 108 | 109 | ///////////////////////////////////////////////////////// 110 | // Generates random guid 111 | // 112 | ///////////////////////////////////////////////////////// 113 | function guid() { 114 | 115 | var d = new Date().getTime(); 116 | 117 | var guid = 'xxxx-xxxx-xxxx-xxxx-xxxx'.replace( 118 | /[xy]/g, 119 | function (c) { 120 | var r = (d + Math.random() * 16) % 16 | 0; 121 | d = Math.floor(d / 16); 122 | return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16); 123 | }); 124 | 125 | return guid; 126 | }; 127 | 128 | 129 | var css = [ 130 | 131 | 'iframe.iframe-panel {', 132 | 'width: 100%;', 133 | 'height: 1000px;', 134 | '}', 135 | 136 | ].join('\n'); 137 | 138 | $('').appendTo('head'); 139 | }; 140 | 141 | Autodesk.ADN.Viewing.Extension.IFramePanel.prototype = 142 | Object.create(Autodesk.Viewing.Extension.prototype); 143 | 144 | Autodesk.ADN.Viewing.Extension.IFramePanel.prototype.constructor = 145 | Autodesk.ADN.Viewing.Extension.IFramePanel; 146 | 147 | Autodesk.Viewing.theExtensionManager.registerExtension( 148 | 'Autodesk.ADN.Viewing.Extension.IFramePanel', 149 | Autodesk.ADN.Viewing.Extension.IFramePanel); 150 | 151 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.Layers/Autodesk.ADN.Viewing.Extension.Layers.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // Layers viewer extension 3 | // by Philippe Leefsma, January 2015 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | Autodesk.ADN.Viewing.Extension.Layers = function ( 9 | viewer, 10 | options) { 11 | 12 | Autodesk.Viewing.Extension.call( 13 | this, 14 | viewer, 15 | options); 16 | 17 | var _self = this; 18 | 19 | var _viewer = viewer; 20 | 21 | _self.load = function () { 22 | 23 | var root = _viewer.model.getLayersRoot(); 24 | 25 | if(root == null) { 26 | 27 | console.log("No layer information..."); 28 | return; 29 | } 30 | 31 | console.log(root); 32 | 33 | for (var i = 0; i < root.childCount; i++) { 34 | 35 | var group = root.children[i]; 36 | 37 | console.log(group); 38 | 39 | for (var j = 0; j < group.childCount; j++) { 40 | 41 | var layer = group.children[j]; 42 | 43 | if (layer.name === 44 | "ORN-A-B-01-BDYGRD-XX-XXXX-MAS|A-Cols") { 45 | 46 | _viewer.setLayerVisible( 47 | [layer], 48 | true, 49 | true); 50 | } 51 | } 52 | } 53 | 54 | console.log( 55 | 'Autodesk.ADN.Viewing.Extension.Layers loaded'); 56 | 57 | return true; 58 | }; 59 | 60 | _self.unload = function () { 61 | 62 | console.log( 63 | 'Autodesk.ADN.Viewing.Extension.Layers unloaded'); 64 | 65 | return true; 66 | }; 67 | }; 68 | 69 | Autodesk.ADN.Viewing.Extension.Layers.prototype = 70 | Object.create(Autodesk.Viewing.Extension.prototype); 71 | 72 | Autodesk.ADN.Viewing.Extension.Layers.prototype.constructor = 73 | Autodesk.ADN.Viewing.Extension.Layers; 74 | 75 | Autodesk.Viewing.theExtensionManager.registerExtension( 76 | 'Autodesk.ADN.Viewing.Extension.Layers', 77 | Autodesk.ADN.Viewing.Extension.Layers); 78 | 79 | 80 | /** 81 | * Set visibility for a single layer, or for all layers. 82 | * 83 | * Not yet implemented for 3D. 84 | * 85 | * @param {?Array} nodes - An array of layer nodes, 86 | * or a single layer node, or null for all layers 87 | * 88 | * @param {boolean} visible - true to show the layer, false to hide it 89 | * 90 | * @param {boolean=} [isolate] - true to isolate the layer 91 | 92 | Autodesk.Viewing.Viewer3D.prototype.setLayerVisible = 93 | function (nodes, visible, isolate)*/ -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.Material/brick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Autodesk.ADN.Viewing.Extension.Material/brick.jpg -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.Material/steel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Autodesk.ADN.Viewing.Extension.Material/steel.jpg -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.Material/wood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Autodesk.ADN.Viewing.Extension.Material/wood.jpg -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.ModelStructure/Autodesk.ADN.Viewing.Extension.ModelStructure.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // ModelStructure viewer extension 3 | // by Philippe Leefsma, March 2016 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | Autodesk.ADN.Viewing.Extension.ModelStructure = function (viewer, options) { 9 | 10 | Autodesk.Viewing.Extension.call(this, viewer, options); 11 | 12 | var _self = this; 13 | 14 | /////////////////////////////////////////////////////////////////// 15 | // 16 | // 17 | /////////////////////////////////////////////////////////////////// 18 | _self.load = function() { 19 | 20 | console.log('Autodesk.ADN.Viewing.Extension.ModelStructure loaded'); 21 | 22 | var modelTree = buildModelTree(viewer.model); 23 | 24 | console.log(modelTree); 25 | 26 | 27 | var matches = []; 28 | 29 | // Creates a thunk for our task 30 | // We look for all components which have a 31 | // property named 'Material' and returns a list 32 | // of matches containing dbId and the prop value 33 | var taskThunk = function(model, dbId) { 34 | 35 | return hasPropertyTask( 36 | model, dbId, 'Material', matches); 37 | } 38 | 39 | var taskResults = executeTaskOnModelTree( 40 | viewer.model, taskThunk); 41 | 42 | Promise.all(taskResults).then(function(){ 43 | 44 | console.log('Found ' + matches.length + ' matches'); 45 | console.log(matches); 46 | }); 47 | 48 | return true; 49 | } 50 | 51 | /////////////////////////////////////////////////////////////////// 52 | // A demo task 53 | // 54 | /////////////////////////////////////////////////////////////////// 55 | function hasPropertyTask(model, dbId, propName, matches) { 56 | 57 | return new Promise(function(resolve, reject){ 58 | 59 | model.getProperties(dbId, function(result) { 60 | 61 | if(result.properties) { 62 | 63 | for (var i = 0; i < result.properties.length; ++i) { 64 | 65 | var prop = result.properties[i]; 66 | 67 | //check if we have a match 68 | if (prop.displayName == propName) { 69 | 70 | var match = { 71 | dbId: dbId 72 | } 73 | 74 | match[propName] = prop.displayValue; 75 | 76 | matches.push(match); 77 | } 78 | } 79 | } 80 | 81 | return resolve(); 82 | 83 | }, function() { 84 | 85 | return reject(); 86 | }); 87 | }); 88 | } 89 | 90 | /////////////////////////////////////////////////////////////////// 91 | // 92 | // 93 | /////////////////////////////////////////////////////////////////// 94 | _self.unload = function () { 95 | 96 | console.log('Autodesk.ADN.Viewing.Extension.ModelStructure unloaded'); 97 | return true; 98 | }; 99 | 100 | /////////////////////////////////////////////////////////////////// 101 | // Recursively builds the model tree 102 | // 103 | /////////////////////////////////////////////////////////////////// 104 | function buildModelTree(model){ 105 | 106 | //builds model tree recursively 107 | function _buildModelTreeRec(node){ 108 | 109 | instanceTree.enumNodeChildren(node.dbId, 110 | function(childId) { 111 | 112 | node.children = node.children || []; 113 | 114 | var childNode = { 115 | dbId: childId, 116 | name: instanceTree.getNodeName(childId) 117 | }; 118 | 119 | node.children.push(childNode); 120 | 121 | _buildModelTreeRec(childNode); 122 | }); 123 | } 124 | 125 | //get model instance tree and root component 126 | var instanceTree = model.getData().instanceTree; 127 | 128 | var rootId = instanceTree.getRootId(); 129 | 130 | var rootNode = { 131 | dbId: rootId, 132 | name: instanceTree.getNodeName(rootId) 133 | }; 134 | 135 | _buildModelTreeRec(rootNode); 136 | 137 | return rootNode; 138 | } 139 | 140 | /////////////////////////////////////////////////////////////////// 141 | // Recursively execute task on model tree 142 | // 143 | /////////////////////////////////////////////////////////////////// 144 | function executeTaskOnModelTree(model, task) { 145 | 146 | var taskResults = []; 147 | 148 | function _executeTaskOnModelTreeRec(dbId){ 149 | 150 | instanceTree.enumNodeChildren(dbId, 151 | function(childId) { 152 | 153 | taskResults.push(task(model, childId)); 154 | 155 | _executeTaskOnModelTreeRec(childId); 156 | }); 157 | } 158 | 159 | //get model instance tree and root component 160 | var instanceTree = model.getData().instanceTree; 161 | 162 | var rootId = instanceTree.getRootId(); 163 | 164 | _executeTaskOnModelTreeRec(rootId); 165 | 166 | return taskResults; 167 | } 168 | } 169 | 170 | Autodesk.ADN.Viewing.Extension.ModelStructure.prototype = 171 | Object.create(Autodesk.Viewing.Extension.prototype); 172 | 173 | Autodesk.ADN.Viewing.Extension.ModelStructure.prototype.constructor = 174 | Autodesk.ADN.Viewing.Extension.ModelStructure; 175 | 176 | Autodesk.Viewing.theExtensionManager.registerExtension( 177 | 'Autodesk.ADN.Viewing.Extension.ModelStructure', 178 | Autodesk.ADN.Viewing.Extension.ModelStructure); 179 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.ModelStructurePanel/Autodesk.ADN.Viewing.Extension.ModelStructurePanel.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // PropertyPanel viewer Extension 3 | // by Philippe Leefsma, October 2014 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | /** 9 | * SampleModelStructurePanel is a simple model structure panel that on click, selects 10 | * the node, and on control-modifier + hover, isolates the node. 11 | */ 12 | 13 | Autodesk.ADN.Viewing.Extension.ModelStructurePanel = function (viewer, options) { 14 | 15 | // base constructor 16 | Autodesk.Viewing.Extension.call(this, viewer, options); 17 | 18 | var _self = this; 19 | 20 | var _panel = null; 21 | 22 | var _initialModelStructurePanel = null; 23 | 24 | /////////////////////////////////////////////////////////////////////////// 25 | // load callback 26 | // 27 | /////////////////////////////////////////////////////////////////////////// 28 | _self.load = function () { 29 | 30 | Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel = 31 | function (viewer, title, options) { 32 | 33 | _self = this; 34 | 35 | Autodesk.Viewing.UI.ModelStructurePanel.call( 36 | _self, 37 | viewer.container, 38 | 'AdnModelStructurePanel', 39 | title, 40 | options); 41 | }; 42 | 43 | Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel.prototype = 44 | Object.create(Autodesk.Viewing.UI.ModelStructurePanel.prototype); 45 | 46 | Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel.prototype.constructor = 47 | Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel; 48 | 49 | /** 50 | * Override initialize to listen for the selection 51 | * changed event to update this panel automatically 52 | */ 53 | Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel.prototype. 54 | initialize = function () { 55 | 56 | Autodesk.Viewing.UI.ModelStructurePanel.prototype.initialize.call(_self); 57 | 58 | viewer.addEventListener( 59 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 60 | function (event) { 61 | _self.setSelection(event.nodeArray); 62 | }); 63 | } 64 | 65 | Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel.prototype. 66 | ctrlDown = function (event) { 67 | 68 | return (_self.isMac && event.metaKey) || 69 | (!_self.isMac && event.ctrlKey); 70 | } 71 | 72 | /** 73 | * Override onClick to select the given node 74 | */ 75 | Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel.prototype. 76 | onClick = function (nodeId, event) { 77 | 78 | viewer.isolate(); 79 | 80 | viewer.select(nodeId); 81 | } 82 | 83 | _panel = new Autodesk.ADN.Viewing.Extension.AdnModelStructurePanel( 84 | viewer); 85 | 86 | viewer.setModelStructurePanel(_panel); 87 | 88 | console.log("Autodesk.ADN.Viewing.Extension.ModelStructurePanel loaded"); 89 | 90 | return true; 91 | }; 92 | 93 | /////////////////////////////////////////////////////////////////////////// 94 | // unload callback 95 | // 96 | /////////////////////////////////////////////////////////////////////////// 97 | _self.unload = function () { 98 | 99 | //TODO: cannot unload properly ... 100 | //viewer.showModelStructurePanel(false); 101 | // 102 | //var options = { 103 | // docStructureConfig: viewer.config.docStructureConfig 104 | //}; 105 | // 106 | //var panel = new Autodesk.Viewing.UI.ModelStructurePanel( 107 | // viewer, 'Browser', options); 108 | // 109 | //viewer.setModelStructurePanel(panel); 110 | 111 | console.log("Autodesk.ADN.Viewing.Extension.ModelStructurePanel unloaded"); 112 | 113 | return true; 114 | }; 115 | }; 116 | 117 | Autodesk.ADN.Viewing.Extension.ModelStructurePanel.prototype = 118 | Object.create(Autodesk.Viewing.Extension.prototype); 119 | 120 | Autodesk.ADN.Viewing.Extension.ModelStructurePanel.prototype.constructor = 121 | Autodesk.ADN.Viewing.Extension.ModelStructurePanel; 122 | 123 | Autodesk.Viewing.theExtensionManager.registerExtension( 124 | 'Autodesk.ADN.Viewing.Extension.ModelStructurePanel', 125 | Autodesk.ADN.Viewing.Extension.ModelStructurePanel); -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.PropertyDump/Autodesk.ADN.Viewing.Extension.PropertyDump.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // PropertyDump viewer extension 3 | // by Philippe Leefsma, October 2015 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | Autodesk.ADN.Viewing.Extension.PropertyDump = function (viewer, options) { 9 | 10 | Autodesk.Viewing.Extension.call(this, viewer, options); 11 | 12 | var _self = this; 13 | 14 | ///////////////////////////////////////////////////////////////// 15 | // 16 | // 17 | ///////////////////////////////////////////////////////////////// 18 | _self.load = function () { 19 | 20 | viewer.addEventListener( 21 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 22 | onSelectionChanged); 23 | 24 | console.log('Autodesk.ADN.Viewing.Extension.PropertyDump loaded'); 25 | 26 | return true; 27 | }; 28 | 29 | ///////////////////////////////////////////////////////////////// 30 | // 31 | // 32 | ///////////////////////////////////////////////////////////////// 33 | _self.unload = function () { 34 | 35 | viewer.removeEventListener( 36 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 37 | onSelectionChanged); 38 | 39 | console.log('Autodesk.ADN.Viewing.Extension.PropertyDump unloaded'); 40 | 41 | return true; 42 | }; 43 | 44 | ///////////////////////////////////////////////////////////////// 45 | // 46 | // 47 | ///////////////////////////////////////////////////////////////// 48 | function onSelectionChanged(event) { 49 | 50 | var viewer = event.target; 51 | 52 | event.dbIdArray.forEach(function(dbId) { 53 | 54 | dumpProperties(dbId); 55 | }); 56 | } 57 | 58 | ///////////////////////////////////////////////////////////////// 59 | // 60 | // 61 | ///////////////////////////////////////////////////////////////// 62 | function dumpProperties(dbId) { 63 | 64 | function _cb(result) { 65 | 66 | if (result.properties) { 67 | 68 | for (var i = 0; i < result.properties.length; i++) { 69 | 70 | var prop = result.properties[i]; 71 | 72 | console.log(prop); 73 | } 74 | } 75 | } 76 | 77 | viewer.getProperties(dbId, _cb); 78 | } 79 | }; 80 | 81 | Autodesk.ADN.Viewing.Extension.PropertyDump.prototype = 82 | Object.create(Autodesk.Viewing.Extension.prototype); 83 | 84 | Autodesk.ADN.Viewing.Extension.PropertyDump.prototype.constructor = 85 | Autodesk.ADN.Viewing.Extension.PropertyDump; 86 | 87 | Autodesk.Viewing.theExtensionManager.registerExtension( 88 | 'Autodesk.ADN.Viewing.Extension.PropertyDump', 89 | Autodesk.ADN.Viewing.Extension.PropertyDump); 90 | 91 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.PropertyListPanel/Autodesk.ADN.Viewing.Extension.PropertyListPanel.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // Property List Panel viewer extension 3 | // by Philippe Leefsma, October 2014 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | Autodesk.ADN.Viewing.Extension.PropertyListPanel = function (viewer, options) { 9 | 10 | Autodesk.Viewing.Extension.call(this, viewer, options); 11 | 12 | var _self = this; 13 | 14 | var _panel = null; 15 | 16 | var _viewer = viewer; 17 | 18 | _self.load = function () { 19 | 20 | Autodesk.ADN.AdnPanel = function( 21 | parentContainer, 22 | id, 23 | title, 24 | options) 25 | { 26 | Autodesk.Viewing.UI.PropertyPanel.call( 27 | this, 28 | parentContainer, 29 | id, title); 30 | }; 31 | 32 | Autodesk.ADN.AdnPanel.prototype = Object.create( 33 | Autodesk.Viewing.UI.PropertyPanel.prototype); 34 | 35 | Autodesk.ADN.AdnPanel.prototype.constructor = 36 | Autodesk.ADN.AdnPanel; 37 | 38 | _panel = new Autodesk.ADN.AdnPanel( 39 | _viewer.container, 40 | 'AdnPropStockPanelId', 41 | 'Property List Panel'); 42 | 43 | _self.GetQuoteData(function(response){ 44 | 45 | var properties = []; 46 | 47 | response.quotes.forEach(function(quote){ 48 | 49 | properties.push({ 50 | 51 | displayCategory: "Stocks", 52 | displayName: quote.symbol, 53 | displayValue: quote.LastTradePriceOnly, 54 | hidden: 0, 55 | type: 20, 56 | units: null 57 | }); 58 | }); 59 | 60 | _panel.setProperties(properties); 61 | }); 62 | 63 | _panel.setVisible(true); 64 | 65 | console.log('Autodesk.ADN.Viewing.Extension.PropertyListPanel loaded'); 66 | 67 | return true; 68 | }; 69 | 70 | _self.unload = function () { 71 | 72 | _panel.setVisible(false); 73 | 74 | _panel.uninitialize(); 75 | 76 | console.log('Autodesk.ADN.Viewing.Extension.PropertyListPanel unloaded'); 77 | 78 | return true; 79 | }; 80 | 81 | _self.GetQuoteData = function(onSuccess) { 82 | 83 | var url = 'http://query.yahooapis.com/v1/public/yql' + 84 | '?format=json' + 85 | '&env=http://datatables.org/alltables.env' + 86 | '&q=' 87 | 88 | var query = 'select * from yahoo.finance.quotes where symbol in ' + 89 | '("AAPL", "ADSK","FB", "GOOG", "MSFT")'; 90 | 91 | url += encodeURIComponent(query); 92 | 93 | $.getJSON(url, function(data){ 94 | 95 | var response = { 96 | quotes : data.query.results.quote 97 | } 98 | 99 | onSuccess(response); 100 | }); 101 | } 102 | }; 103 | 104 | Autodesk.ADN.Viewing.Extension.PropertyListPanel.prototype = 105 | Object.create(Autodesk.Viewing.Extension.prototype); 106 | 107 | Autodesk.ADN.Viewing.Extension.PropertyListPanel.prototype.constructor = 108 | Autodesk.ADN.Viewing.Extension.PropertyListPanel; 109 | 110 | Autodesk.Viewing.theExtensionManager.registerExtension( 111 | 'Autodesk.ADN.Viewing.Extension.PropertyListPanel', 112 | Autodesk.ADN.Viewing.Extension.PropertyListPanel); 113 | 114 | -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.PropertyPanel/Autodesk.ADN.Viewing.Extension.PropertyPanel.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // PropertyPanel viewer Extension 3 | // by Philippe Leefsma, October 2014 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | 9 | Autodesk.ADN.Viewing.Extension.PropertyPanel = function (viewer, options) { 10 | 11 | // base constructor 12 | Autodesk.Viewing.Extension.call(this, viewer, options); 13 | 14 | var _viewer = viewer; 15 | 16 | var _self = this; 17 | 18 | /////////////////////////////////////////////////////////////////////////// 19 | // load callback 20 | // 21 | /////////////////////////////////////////////////////////////////////////// 22 | _self.load = function () { 23 | 24 | Autodesk.ADN.Viewing.Extension.AdnPropertyPanel = function (viewer) { 25 | 26 | var _panel = this; 27 | 28 | var _viewer = viewer; 29 | 30 | var _selectedNodeId = ''; 31 | 32 | Autodesk.Viewing.Extensions.ViewerPropertyPanel.call( 33 | _panel, 34 | _viewer); 35 | 36 | _panel.setNodeProperties = function(nodeId) { 37 | 38 | Autodesk.Viewing.Extensions.ViewerPropertyPanel. 39 | prototype.setNodeProperties.call( 40 | _panel, 41 | nodeId); 42 | 43 | _selectedNodeId = nodeId; 44 | }; 45 | 46 | _panel.setProperties = function (properties) { 47 | 48 | Autodesk.Viewing.Extensions.ViewerPropertyPanel. 49 | prototype.setProperties.call( 50 | _panel, properties); 51 | 52 | _panel.addProperty( 53 | "Node Id", //property name 54 | _selectedNodeId, //property value 55 | "Customization"); //group name 56 | 57 | _self.GetQuoteData(function(response){ 58 | 59 | response.quotes.forEach(function(quote){ 60 | 61 | _panel.addProperty( 62 | quote.symbol, 63 | '$' + quote.LastTradePriceOnly, 64 | "Stocks"); 65 | }) 66 | }) 67 | }; 68 | }; 69 | 70 | Autodesk.ADN.Viewing.Extension.AdnPropertyPanel.prototype = 71 | Object.create( 72 | Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype); 73 | 74 | Autodesk.ADN.Viewing.Extension.AdnPropertyPanel.prototype.constructor = 75 | Autodesk.ADN.Viewing.Extension.AdnPropertyPanel; 76 | 77 | var panel = new Autodesk.ADN.Viewing.Extension.AdnPropertyPanel( 78 | _viewer); 79 | 80 | _viewer.setPropertyPanel(panel); 81 | 82 | console.log("Autodesk.ADN.Viewing.Extension.PropertyPanel loaded"); 83 | 84 | return true; 85 | }; 86 | 87 | /////////////////////////////////////////////////////////////////////////// 88 | // unload callback 89 | // 90 | /////////////////////////////////////////////////////////////////////////// 91 | _self.unload = function () { 92 | 93 | _viewer.setPropertyPanel(null); 94 | 95 | console.log("Autodesk.ADN.Viewing.Extension.PropertyPanel unloaded"); 96 | 97 | return true; 98 | }; 99 | 100 | /////////////////////////////////////////////////////////////////////////// 101 | // get stock market quotes from Yahoo 102 | // 103 | /////////////////////////////////////////////////////////////////////////// 104 | _self.GetQuoteData = function(onSuccess) { 105 | 106 | var url = 'http://query.yahooapis.com/v1/public/yql' + 107 | '?format=json' + 108 | '&env=http://datatables.org/alltables.env' + 109 | '&q=' 110 | 111 | var query = 'select * from yahoo.finance.quotes where symbol in ' + 112 | '("AAPL", "ADSK","FB", "GOOG", "MSFT")'; 113 | 114 | url += encodeURIComponent(query); 115 | 116 | $.getJSON(url, function(data){ 117 | 118 | var response = { 119 | quotes : data.query.results.quote 120 | } 121 | 122 | onSuccess(response); 123 | }); 124 | } 125 | }; 126 | 127 | Autodesk.ADN.Viewing.Extension.PropertyPanel.prototype = 128 | Object.create(Autodesk.Viewing.Extension.prototype); 129 | 130 | Autodesk.ADN.Viewing.Extension.PropertyPanel.prototype.constructor = 131 | Autodesk.ADN.Viewing.Extension.PropertyPanel; 132 | 133 | Autodesk.Viewing.theExtensionManager.registerExtension( 134 | 'Autodesk.ADN.Viewing.Extension.PropertyPanel', 135 | Autodesk.ADN.Viewing.Extension.PropertyPanel); -------------------------------------------------------------------------------- /src/Autodesk.ADN.Viewing.Extension.Workshop/Autodesk.ADN.Viewing.Extension.Workshop.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // Demo Workshop Viewer Extension 3 | // by Philippe Leefsma, April 2015 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | AutodeskNamespace("Autodesk.ADN.Viewing.Extension"); 7 | 8 | Autodesk.ADN.Viewing.Extension.Workshop = function (viewer, options) { 9 | 10 | ///////////////////////////////////////////////////////////////// 11 | // base class constructor 12 | // 13 | ///////////////////////////////////////////////////////////////// 14 | Autodesk.Viewing.Extension.call(this, viewer, options); 15 | 16 | var _self = this; 17 | 18 | var _panel = null; 19 | 20 | var _interval = null; 21 | 22 | ///////////////////////////////////////////////////////////////// 23 | // load callback: invoked when viewer.loadExtension is called 24 | // 25 | ///////////////////////////////////////////////////////////////// 26 | _self.load = function () { 27 | 28 | viewer.addEventListener( 29 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 30 | onSelectionChanged); 31 | 32 | _panel = new Autodesk.ADN.WorkshopPanel( 33 | viewer.container, 34 | 'WorkshopPanelId', 35 | 'Workshop Panel'); 36 | 37 | _interval = 0; 38 | 39 | console.log('Autodesk.ADN.Viewing.Extension.Workshop loaded'); 40 | 41 | return true; 42 | }; 43 | 44 | ///////////////////////////////////////////////////////////////// 45 | // unload callback: invoked when viewer.unloadExtension is called 46 | // 47 | ///////////////////////////////////////////////////////////////// 48 | _self.unload = function () { 49 | 50 | viewer.removeEventListener( 51 | Autodesk.Viewing.SELECTION_CHANGED_EVENT, 52 | onSelectionChanged); 53 | 54 | _panel.setVisible(false); 55 | 56 | _panel.uninitialize(); 57 | 58 | clearInterval(_interval); 59 | 60 | console.log('Autodesk.ADN.Viewing.Extension.Workshop unloaded'); 61 | 62 | return true; 63 | }; 64 | 65 | ///////////////////////////////////////////////////////////////// 66 | // selection changed callback 67 | // 68 | ///////////////////////////////////////////////////////////////// 69 | function onSelectionChanged(event) { 70 | 71 | function propertiesHandler(result) { 72 | 73 | if (result.properties) { 74 | 75 | _panel.setProperties( 76 | result.properties); 77 | 78 | _panel.setVisible(true); 79 | } 80 | } 81 | 82 | if(event.dbIdArray.length) { 83 | 84 | var dbId = event.dbIdArray[0]; 85 | 86 | viewer.getProperties( 87 | dbId, 88 | propertiesHandler); 89 | 90 | viewer.fitToView(dbId); 91 | 92 | viewer.isolate(dbId); 93 | 94 | startRotation(); 95 | } 96 | else { 97 | 98 | clearInterval(_interval); 99 | 100 | viewer.isolate([]); 101 | 102 | viewer.fitToView(); 103 | 104 | _panel.setVisible(false); 105 | } 106 | } 107 | 108 | ///////////////////////////////////////////////////////////////// 109 | // rotates camera around axis with center origin 110 | // 111 | ///////////////////////////////////////////////////////////////// 112 | function rotateCamera(angle, axis) { 113 | 114 | var pos = viewer.navigation.getPosition(); 115 | 116 | var position = new THREE.Vector3( 117 | pos.x, pos.y, pos.z); 118 | 119 | var rAxis = new THREE.Vector3( 120 | axis.x, axis.y, axis.z); 121 | 122 | var matrix = new THREE.Matrix4().makeRotationAxis( 123 | rAxis, 124 | angle); 125 | 126 | position.applyMatrix4(matrix); 127 | 128 | viewer.navigation.setPosition(position); 129 | }; 130 | 131 | ///////////////////////////////////////////////////////////////// 132 | // start rotation effect 133 | // 134 | ///////////////////////////////////////////////////////////////// 135 | function startRotation() { 136 | 137 | clearInterval(_interval); 138 | 139 | setTimeout(function() { 140 | 141 | _interval = setInterval(function () { 142 | 143 | rotateCamera(0.05, {x:0, y:1, z:0}); 144 | 145 | }, 100)}, 500); 146 | }; 147 | 148 | ///////////////////////////////////////////////////////////////// 149 | // creates panel and sets up inheritance 150 | // 151 | ///////////////////////////////////////////////////////////////// 152 | Autodesk.ADN.WorkshopPanel = function( 153 | parentContainer, 154 | id, 155 | title, 156 | options) 157 | { 158 | Autodesk.Viewing.UI.PropertyPanel.call( 159 | this, 160 | parentContainer, 161 | id, title); 162 | }; 163 | 164 | Autodesk.ADN.WorkshopPanel.prototype = Object.create( 165 | Autodesk.Viewing.UI.PropertyPanel.prototype); 166 | 167 | Autodesk.ADN.WorkshopPanel.prototype.constructor = 168 | Autodesk.ADN.WorkshopPanel; 169 | }; 170 | 171 | ///////////////////////////////////////////////////////////////// 172 | // sets up inheritance for extension and register 173 | // 174 | ///////////////////////////////////////////////////////////////// 175 | Autodesk.ADN.Viewing.Extension.Workshop.prototype = 176 | Object.create(Autodesk.Viewing.Extension.prototype); 177 | 178 | Autodesk.ADN.Viewing.Extension.Workshop.prototype.constructor = 179 | Autodesk.ADN.Viewing.Extension.Workshop; 180 | 181 | Autodesk.Viewing.theExtensionManager.registerExtension( 182 | 'Autodesk.ADN.Viewing.Extension.Workshop', 183 | Autodesk.ADN.Viewing.Extension.Workshop); 184 | 185 | -------------------------------------------------------------------------------- /src/Forge.ConnectedData/ConnectedData.css: -------------------------------------------------------------------------------- 1 | 2 | .connected-data { 3 | position: absolute; 4 | width: 100%; 5 | height: 100%; 6 | z-index: 1; 7 | } 8 | 9 | .connected-connector { 10 | position: absolute; 11 | width: 100%; 12 | height: 100%; 13 | z-index: 0; 14 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.CSSTV/scenes/BrowserScene.js: -------------------------------------------------------------------------------- 1 | import ViewerToolkit from 'Viewer.Toolkit' 2 | import './styles.css' 3 | 4 | export default class BrowserScene { 5 | 6 | constructor (defaultUrl) { 7 | 8 | this.sceneId = ViewerToolkit.guid() 9 | 10 | this.iFrameId = ViewerToolkit.guid() 11 | 12 | this.inputId = ViewerToolkit.guid() 13 | 14 | this.glScene = new THREE.Scene() 15 | 16 | var html = ` 17 |
18 |
19 | 20 |
21 | 26 |
27 | ` 28 | 29 | var $html = $(html) 30 | 31 | var cssObj = new THREE.CSS3DObject($html[0]) 32 | 33 | cssObj.position.set( 34 | -16.63 + 22.35, 35 | 15.25 - 12.5, 36 | 7.90) 37 | 38 | cssObj.scale.set( 39 | 0.03, 0.03, 0.03) 40 | 41 | this.glScene.add(cssObj) 42 | 43 | setTimeout(() => { 44 | 45 | $('#' + this.inputId).keyup((e) => { 46 | 47 | if(e.keyCode === 13) { 48 | 49 | var url = $('#' + this.inputId).val() 50 | 51 | $('#' + this.iFrameId).attr('src', url) 52 | } 53 | }) 54 | }, 1000) 55 | } 56 | 57 | clear () { 58 | 59 | $(`#${this.sceneId}`).remove() 60 | } 61 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.CSSTV/scenes/IFrameScene.js: -------------------------------------------------------------------------------- 1 | import ViewerToolkit from 'Viewer.Toolkit' 2 | 3 | export default class IFrameScene { 4 | 5 | constructor (url) { 6 | 7 | this.glScene = new THREE.Scene() 8 | 9 | this.sceneId = ViewerToolkit.guid() 10 | 11 | //Vertex: [-16.63, 15.25, 7.90] 12 | //Vertex: [28.11, 15.25, 7.90] 13 | //Vertex: [28.11, -9.69, 7.90] 14 | //Vertex: [-16.63, -9.69, 7.90] 15 | 16 | var $iframe = $(document.createElement('iframe')) 17 | .attr('id', this.sceneId) 18 | .attr('src', url) 19 | .attr('class', 'css-render') 20 | .attr('width', '1430px') 21 | .attr('height', '800px') 22 | .attr('frameBorder', '0') 23 | .css('display', 'block') 24 | .css('display', 'block') 25 | .css('pointer-events', 'auto') // not none 26 | 27 | var cssObj = new THREE.CSS3DObject($iframe[0]) 28 | 29 | cssObj.position.set( 30 | -16.63 + 22.35, 31 | 15.25 - 12.5, 32 | 7.90) 33 | 34 | cssObj.scale.set( 35 | 0.03, 0.03, 0.03) 36 | 37 | this.glScene.add(cssObj) 38 | } 39 | 40 | clear () { 41 | 42 | $(`#${this.sceneId}`).remove() 43 | } 44 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.CSSTV/scenes/WeatherScene.js: -------------------------------------------------------------------------------- 1 | import { TimeSeries, SmoothieChart } from 'smoothie' 2 | import ViewerToolkit from 'Viewer.Toolkit' 3 | import './styles.css' 4 | 5 | export default class WeatherScene { 6 | 7 | constructor () { 8 | 9 | this.clientId = '9a34a8feb31aa9d90cbc674273ae3905' 10 | 11 | this.forecastUrl = `https://api.forecast.io/forecast/${this.clientId}/37.8267,-122.423` 12 | 13 | this.sceneId = ViewerToolkit.guid() 14 | 15 | this.inputId = ViewerToolkit.guid() 16 | 17 | this.chartId = ViewerToolkit.guid() 18 | 19 | this.btnId = ViewerToolkit.guid() 20 | 21 | this.glScene = new THREE.Scene() 22 | 23 | var html = ` 24 |
25 |
26 |
27 |
28 | 33 | 34 |
35 | 36 | 37 |
38 | ` 39 | 40 | var $html = $(html) 41 | 42 | var cssObj = new THREE.CSS3DObject($html[0]) 43 | 44 | cssObj.position.set( 45 | -16.63 + 22.35, 46 | 15.25 - 12.5, 47 | 7.90) 48 | 49 | cssObj.scale.set( 50 | 0.03, 0.03, 0.03) 51 | 52 | this.glScene.add(cssObj) 53 | 54 | setTimeout(() => { 55 | this.createChart() 56 | }, 1000) 57 | } 58 | 59 | createChart () { 60 | 61 | var ts = new TimeSeries() 62 | 63 | this.intervalId = setInterval(() => { 64 | 65 | //$.get(this.forecastUrl, (response) => { 66 | // 67 | // console.log(response) 68 | //}) 69 | 70 | ts.append(new Date().getTime(), Math.random() * 10000) 71 | 72 | }, 5000) 73 | 74 | var chart = new SmoothieChart() 75 | 76 | ts.append(new Date().getTime(), Math.random() * 10000) 77 | 78 | chart.addTimeSeries(ts, { 79 | strokeStyle: 'rgba(0, 255, 0, 1)', 80 | fillStyle: 'rgba(0, 255, 0, 0.2)', 81 | lineWidth: 3 82 | }) 83 | 84 | chart.streamTo($(`#${this.chartId}`)[0], 100) 85 | } 86 | 87 | clear () { 88 | 89 | $(`#${this.sceneId}`).remove() 90 | } 91 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.CSSTV/scenes/styles.css: -------------------------------------------------------------------------------- 1 | 2 | .browser-scene { 3 | width: 1430px; 4 | height: 800px; 5 | pointer-events: auto; 6 | } 7 | 8 | .browser-scene iframe{ 9 | display: block; 10 | } 11 | 12 | .browser-scene .address-bar{ 13 | height: 30px; 14 | } 15 | 16 | .browser-scene .input-url { 17 | width: calc(100% - 10px); 18 | padding: 3px; 19 | } 20 | 21 | .weather-scene { 22 | width: 1430px; 23 | height: 800px; 24 | } 25 | 26 | .weather-scene .title { 27 | pointer-events: auto; 28 | height: 30px; 29 | } 30 | 31 | .weather-scene .controls { 32 | pointer-events: auto; 33 | margin-bottom: 10px; 34 | height: 30px; 35 | } 36 | 37 | .weather-scene .btn-location { 38 | height: 17px; 39 | vertical-align: top; 40 | } 41 | 42 | .weather-scene .input-latlong { 43 | width: calc(100% - 143px); 44 | background-color: white; 45 | border-radius: 4px; 46 | padding: 3px; 47 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.ContextMenu/Viewing.Extension.ContextMenu.Handler.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.ContextMenu 3 | // by Philippe Leefsma, September 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | 7 | export default class ContextMenuHandler extends 8 | Autodesk.Viewing.Extensions.ViewerObjectContextMenu { 9 | 10 | ///////////////////////////////////////////////////////////////// 11 | // Class constructor 12 | // 13 | ///////////////////////////////////////////////////////////////// 14 | constructor (viewer, options = {}) { 15 | 16 | super (viewer, options) 17 | 18 | this.options = options 19 | } 20 | 21 | ///////////////////////////////////////////////////////////////// 22 | // 23 | // 24 | ///////////////////////////////////////////////////////////////// 25 | buildMenu (event, status) { 26 | 27 | var menu = super.buildMenu(event, status) 28 | 29 | return this.options.buildMenu ? 30 | this.options.buildMenu(menu) : 31 | menu 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/Viewing.Extension.ContextMenu/Viewing.Extension.ContextMenu.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.ContextMenu 3 | // by Philippe Leefsma, September 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import ContextMenuHandler from './Viewing.Extension.ContextMenu.Handler.js' 7 | import ExtensionBase from 'Viewer.ExtensionBase' 8 | 9 | class ContextMenuExtension extends ExtensionBase { 10 | 11 | ///////////////////////////////////////////////////////////////// 12 | // Class constructor 13 | // 14 | ///////////////////////////////////////////////////////////////// 15 | constructor (viewer, options = {}) { 16 | 17 | super (viewer, options) 18 | 19 | this.onSelectionChangedHandler = (e) => { 20 | 21 | return this.onSelectionChanged(e) 22 | } 23 | 24 | this.contextMenuHandler = new ContextMenuHandler( 25 | viewer, Object.assign({}, options, { 26 | buildMenu: (menu) => { 27 | 28 | return options.buildMenu ? 29 | options.buildMenu(menu, this.selectedDbId): 30 | menu 31 | } 32 | })) 33 | 34 | this.selectedDbId = null 35 | } 36 | 37 | ///////////////////////////////////////////////////////////////// 38 | // Extension Id 39 | // 40 | ///////////////////////////////////////////////////////////////// 41 | static get ExtensionId() { 42 | 43 | return 'Viewing.Extension.ContextMenu' 44 | } 45 | 46 | ///////////////////////////////////////////////////////////////// 47 | // Load callback 48 | // 49 | ///////////////////////////////////////////////////////////////// 50 | async load() { 51 | 52 | this._viewer.setContextMenu(this.contextMenuHandler) 53 | 54 | this._viewer.addEventListener( 55 | Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, 56 | this.onSelectionChangedHandler) 57 | 58 | console.log('Viewing.Extension.ContextMenu loaded') 59 | 60 | return true; 61 | } 62 | 63 | ///////////////////////////////////////////////////////// 64 | // 65 | // 66 | ///////////////////////////////////////////////////////// 67 | onSelectionChanged (e) { 68 | 69 | if (e.selections && e.selections.length) { 70 | 71 | const selection = e.selections[0] 72 | 73 | this.selectedDbId = selection.dbIdArray[0] 74 | 75 | } else { 76 | 77 | this.selectedDbId = null 78 | } 79 | } 80 | 81 | ///////////////////////////////////////////////////////////////// 82 | // Unload callback 83 | // 84 | ///////////////////////////////////////////////////////////////// 85 | unload() { 86 | 87 | this._viewer.removeEventListener( 88 | Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, 89 | this.onSelectionChangedHandler) 90 | 91 | this._viewer.setContextMenu( 92 | new Autodesk.Viewing.Extensions.ViewerObjectContextMenu( 93 | this._viewer) 94 | ) 95 | 96 | console.log('Viewing.Extension.ContextMenu unloaded'); 97 | 98 | return true; 99 | } 100 | } 101 | 102 | Autodesk.Viewing.theExtensionManager.registerExtension( 103 | ContextMenuExtension.ExtensionId, 104 | ContextMenuExtension) 105 | -------------------------------------------------------------------------------- /src/Viewing.Extension.ContextMenu/index.js: -------------------------------------------------------------------------------- 1 | import './Viewing.Extension.ContextMenu' 2 | 3 | export default 'Viewing.Extension.ContextMenu' 4 | -------------------------------------------------------------------------------- /src/Viewing.Extension.CustomModelStructure/Viewing.Extension.CustomModelStructure.Panel.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.CustomTreeExtension 3 | // by Philippe Leefsma, April 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import ViewerToolkit from 'Viewer.Toolkit' 7 | 8 | export default class CustomModelStructurePanel 9 | extends Autodesk.Viewing.UI.ModelStructurePanel { 10 | 11 | ///////////////////////////////////////////////////////////////// 12 | // Class constructor 13 | // 14 | ///////////////////////////////////////////////////////////////// 15 | constructor (viewer, id, title, options) { 16 | 17 | super(viewer.container, id, title, options) 18 | 19 | this.viewer = viewer 20 | 21 | this.instanceTree = 22 | viewer.model.getData().instanceTree 23 | 24 | var rootId = this.instanceTree.getRootId() 25 | 26 | var name = this.instanceTree.getNodeName(rootId) 27 | 28 | this.setModel(this.instanceTree, name) 29 | } 30 | 31 | shouldInclude (nodeId) { 32 | 33 | return true 34 | } 35 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.CustomModelStructure/Viewing.Extension.CustomModelStructure.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.CustomTreeExtension 3 | // by Philippe Leefsma, April 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import CustomModelStructurePanel from './Viewing.Extension.CustomModelStructure.Panel' 7 | import ExtensionBase from 'Viewer.ExtensionBase' 8 | import ViewerToolkit from 'Viewer.Toolkit' 9 | 10 | class CustomModelStructure extends ExtensionBase { 11 | 12 | ///////////////////////////////////////////////////////////////// 13 | // Class constructor 14 | // 15 | ///////////////////////////////////////////////////////////////// 16 | constructor(viewer, options) { 17 | 18 | super(viewer, options) 19 | } 20 | 21 | ///////////////////////////////////////////////////////////////// 22 | // Extension Id 23 | // 24 | ///////////////////////////////////////////////////////////////// 25 | static get ExtensionId() { 26 | 27 | return 'Viewing.Extension.CustomModelStructure' 28 | } 29 | 30 | ///////////////////////////////////////////////////////////////// 31 | // Load callback 32 | // 33 | ///////////////////////////////////////////////////////////////// 34 | async load() { 35 | 36 | this.panel = new CustomModelStructurePanel( 37 | this._viewer, 38 | 'CustomModelStructure', 39 | 'Custom Panel') 40 | 41 | this.panel.setVisible(true) 42 | 43 | console.log('Viewing.Extension.CustomModelStructure loaded') 44 | 45 | return true 46 | } 47 | 48 | ///////////////////////////////////////////////////////////////// 49 | // Unload callback 50 | // 51 | ///////////////////////////////////////////////////////////////// 52 | unload() { 53 | 54 | console.log('Viewing.Extension.CustomModelStructure unloaded') 55 | 56 | return true 57 | } 58 | } 59 | 60 | Autodesk.Viewing.theExtensionManager.registerExtension( 61 | CustomModelStructure.ExtensionId, 62 | CustomModelStructure) -------------------------------------------------------------------------------- /src/Viewing.Extension.CustomTree/Viewing.Extension.CustomTree.Panel.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.StateManager.Panel 3 | // by Philippe Leefsma, June 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import './Viewing.Extension.CustomTree.css' 7 | import ToolPanelBase from 'ToolPanelBase' 8 | 9 | export default class CustomTreePanel extends ToolPanelBase { 10 | 11 | constructor (viewer, btnElement, rootNode) { 12 | 13 | super (viewer.container, 'Custom Tree', { 14 | buttonElement: btnElement, 15 | shadow: true 16 | }) 17 | 18 | $(this.container).addClass('custom-tree') 19 | 20 | var treeContainer = $(`#${this.container.id}-tree-container`)[0] 21 | 22 | this.treeDelegate = new CustomTreeDelegate(viewer) 23 | 24 | this.tree = new Autodesk.Viewing.UI.Tree( 25 | this.treeDelegate, rootNode, treeContainer, { 26 | excludeRoot: false, 27 | localize: true 28 | }) 29 | } 30 | 31 | ///////////////////////////////////////////////////////////// 32 | // 33 | // 34 | ///////////////////////////////////////////////////////////// 35 | htmlContent (id) { 36 | 37 | return ` 38 |
39 |
40 | ` 41 | } 42 | } 43 | 44 | class CustomTreeDelegate extends Autodesk.Viewing.UI.TreeDelegate { 45 | 46 | constructor (viewer) { 47 | 48 | super() 49 | 50 | this.viewer = viewer 51 | } 52 | 53 | getTreeNodeId (node) { 54 | 55 | return node.dbId 56 | } 57 | 58 | isTreeNodeGroup (node) { 59 | 60 | if (!node.children || !node.children.length) { 61 | 62 | return false 63 | } 64 | 65 | return true 66 | } 67 | 68 | onTreeNodeDoubleClick (tree, node, event) { 69 | 70 | console.log(node) 71 | 72 | this.viewer.select([node.dbId]) 73 | this.viewer.isolate([node.dbId]) 74 | } 75 | 76 | forEachChild (node, callback) { 77 | 78 | if (node.children) { 79 | 80 | node.children.forEach((child) => { 81 | 82 | //if(child === 'some condition') mode.getProperties(child.dbId, ()=>{ decide if node or not}) 83 | 84 | callback(child) 85 | }) 86 | } 87 | } 88 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.CustomTree/Viewing.Extension.CustomTree.css: -------------------------------------------------------------------------------- 1 | 2 | .custom-tree { 3 | top: 10px; 4 | right: 10px; 5 | width: 370px; 6 | height: 350px; 7 | resize: auto; 8 | } 9 | 10 | .custom-tree .container { 11 | overflow-y: auto; 12 | overflow-x: hidden; 13 | height: calc(100% - 45px); 14 | } 15 | 16 | .custom-tree .treeview label { 17 | color: aliceblue; 18 | } 19 | 20 | .custom-tree .treeview group.collapsed > header > icon { 21 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAEHRSTlMAzMmxNiAMA8K+mpJ/dltN+nADFwAAACpJREFUCNdjwAS8BRCacRuUFg6A0IJToLTQByj9AEK3oKpbBtHHU4DFcABnMAZ0F9EX7QAAAABJRU5ErkJggg==); 22 | } 23 | 24 | .custom-tree .treeview group.expanded > header > icon { 25 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAgMAAABiJsVCAAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAzGWg4clLAAAAI0lEQVQI12PAABwgQgVETAFiphAgwQkiVEHEVCDBFBqCrgcAZhoDgXsV370AAAAASUVORK5CYII=); 26 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.CustomTree/Viewing.Extension.CustomTree.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.CustomTreeExtension 3 | // by Philippe Leefsma, April 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import CustomTreePanel from './Viewing.Extension.CustomTree.Panel' 7 | import ExtensionBase from 'Viewer.ExtensionBase' 8 | import ViewerToolkit from 'Viewer.Toolkit' 9 | 10 | class CustomTreeExtension extends ExtensionBase { 11 | 12 | ///////////////////////////////////////////////////////////////// 13 | // Class constructor 14 | // 15 | ///////////////////////////////////////////////////////////////// 16 | constructor(viewer, options) { 17 | 18 | super(viewer, options) 19 | } 20 | 21 | ///////////////////////////////////////////////////////////////// 22 | // Extension Id 23 | // 24 | ///////////////////////////////////////////////////////////////// 25 | static get ExtensionId() { 26 | 27 | return 'Viewing.Extension.CustomTree' 28 | } 29 | 30 | ///////////////////////////////////////////////////////////////// 31 | // Load callback 32 | // 33 | ///////////////////////////////////////////////////////////////// 34 | async load() { 35 | 36 | this._viewer.search('Levels: 1/4" Head', (dbIdArray) => { 37 | 38 | //var rootNode = await ViewerToolkit.buildModelTree( 39 | // this._viewer.model) 40 | 41 | var instanceTree = 42 | this._viewer.model.getData().instanceTree 43 | 44 | var rootId = instanceTree.getRootId() 45 | 46 | var rootNode = { 47 | dbId: rootId, 48 | name: instanceTree.getNodeName(rootId), 49 | children: [] 50 | } 51 | 52 | dbIdArray.forEach((dbId) => { 53 | 54 | var node = { 55 | dbId: dbId, 56 | name: instanceTree.getNodeName(dbId) 57 | } 58 | 59 | this.buildNodeTreeRec(instanceTree, node) 60 | 61 | rootNode.children.push(node) 62 | }) 63 | 64 | this.panel = new CustomTreePanel( 65 | this._viewer, null, rootNode) 66 | 67 | this.panel.setVisible(true) 68 | }) 69 | 70 | console.log('Viewing.Extension.CustomTree loaded') 71 | 72 | return true 73 | } 74 | 75 | ///////////////////////////////////////////////////////////////// 76 | // Unload callback 77 | // 78 | ///////////////////////////////////////////////////////////////// 79 | unload() { 80 | 81 | console.log('Viewing.Extension.CustomTree unloaded') 82 | 83 | return true 84 | } 85 | 86 | buildNodeTreeRec(instanceTree, node) { 87 | 88 | instanceTree.enumNodeChildren(node.dbId, 89 | (childId) => { 90 | 91 | var childNode = null; 92 | 93 | node.children = node.children || []; 94 | 95 | childNode = { 96 | dbId: childId, 97 | name: instanceTree.getNodeName(childId) 98 | } 99 | 100 | node.children.push(childNode); 101 | 102 | this.buildNodeTreeRec(instanceTree, childNode); 103 | }); 104 | } 105 | } 106 | 107 | Autodesk.Viewing.theExtensionManager.registerExtension( 108 | CustomTreeExtension.ExtensionId, 109 | CustomTreeExtension) -------------------------------------------------------------------------------- /src/Viewing.Extension.DynamicTexture/Viewing.Extension.DynamicTexture.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.DynamicTextureExtension 3 | // by Philippe Leefsma, April 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import ViewerToolkit from 'ViewerToolkit' 7 | import ExtensionBase from 'ExtensionBase' 8 | 9 | class DynamicTextureExtension extends ExtensionBase { 10 | 11 | 12 | // simpleheat private variables 13 | var _heat, _data = []; 14 | 15 | // Configurable heatmap variables: 16 | // MAX-the maximum amplitude of data input 17 | // VAL-the value of a data input, in this case, it's constant 18 | // RESOLUTION-the size of the circles, high res -> smaller circles 19 | // FALLOFF-the rate a datapoint disappears 20 | // Z_POS-vertical displacement of plane 21 | var MAX = 2000, VAL = 1500, RESOLUTION = 20, FALLOFF = 30, Z_POS = 0.1; 22 | 23 | ///////////////////////////////////////////////////////////////// 24 | // Class constructor 25 | // 26 | ///////////////////////////////////////////////////////////////// 27 | constructor(viewer, options) { 28 | 29 | super (viewer, options) 30 | } 31 | 32 | ///////////////////////////////////////////////////////////////// 33 | // Extension Id 34 | // 35 | ///////////////////////////////////////////////////////////////// 36 | static get ExtensionId() { 37 | 38 | return 'Viewing.Extension.DynamicTexture' 39 | } 40 | 41 | ///////////////////////////////////////////////////////////////// 42 | // Load Callback 43 | // 44 | ///////////////////////////////////////////////////////////////// 45 | load() { 46 | 47 | this._viewer.setProgressiveRendering(false); 48 | 49 | //_viewer.prefs.set("ambientShadows", false); 50 | 51 | var bounds = this.getBounds(1) 52 | this.heat = this.createHeatMap(bounds) 53 | this.texture = this.createCanvasTexture('canvas') 54 | this.material = this.createMaterial(this.texture) 55 | 56 | var plane = this.clonePlane(); 57 | 58 | this.animate(); 59 | 60 | console.log("Heat Map Floor loaded."); 61 | return true; 62 | } 63 | 64 | ///////////////////////////////////////////////////////////////// 65 | // Load Callback 66 | // 67 | ///////////////////////////////////////////////////////////////// 68 | unload() { 69 | 70 | delete _viewer.impl.matman().materials.heatmap; 71 | _viewer.impl.scene.remove(_plane); 72 | 73 | console.log("Heat Map Floor unloaded."); 74 | return true; 75 | } 76 | 77 | // Animation loop for checking for new points and drawing them on texture 78 | animate() { 79 | 80 | requestAnimationFrame(this.animate); 81 | 82 | this.heat.add(this.receivedData()); 83 | this.heat.add(this.receivedData()); 84 | this.heat.add(this.receivedData()); 85 | this.heat._data = this.decay(this.heat._data); 86 | this.heat.draw(); 87 | 88 | this.texture.needsUpdate = true; 89 | 90 | // setting var 3 to true enables invalidation even without changing scene 91 | this._viewer.impl.invalidate(true, false, true); 92 | } 93 | 94 | getBounds(fragId) { 95 | 96 | var bBox = new THREE.Box3(); 97 | 98 | this._viewer.model.getFragmentList().getWorldBounds( 99 | fragId, bBox) 100 | 101 | var width = Math.abs(bBox.max.x - bBox.min.x); 102 | var height = Math.abs(bBox.max.y - bBox.min.y); 103 | var depth = Math.abs(bBox.max.z - bBox.min.z); 104 | 105 | // min is used to shift for the shader, the others are roof dimensions 106 | return {width: width, height: height, depth: depth, min: bBox.min}; 107 | } 108 | 109 | createHeatMap(bounds) { 110 | 111 | var canvas = document.createElement("canvas"); 112 | canvas.id = "texture"; 113 | canvas.width = bounds.width * RESOLUTION; 114 | canvas.height = bounds.height * RESOLUTION; 115 | this._viewer.container.appendChild(canvas); 116 | 117 | return simpleheat("texture").max(MAX); 118 | } 119 | 120 | receivedData() { 121 | 122 | return [Math.random() * $("#texture").width(), 123 | Math.random() * $("#texture").height(), 124 | Math.random() * VAL]; 125 | } 126 | 127 | // decrements the amplitude of a signal by FALLOFF for decay over time 128 | decay(data) { 129 | 130 | // removes elements whose amlitude is < 1 131 | return data.filter(function(d) { 132 | d[2] -= FALLOFF; 133 | return d[2] > 1; 134 | }); 135 | } 136 | 137 | createCanvasTexture(canvasId) { 138 | 139 | var canvas = document.getElementById(canvasId) 140 | 141 | var texture = new THREE.Texture(canvas) 142 | 143 | return texture; 144 | } 145 | 146 | createMaterial(texture) { 147 | 148 | var material = new THREE.MeshBasicMaterial({ 149 | map: texture, 150 | side: THREE.DoubleSide 151 | //alphaMap: THREE.ImageUtils.loadTexture("mask.png") 152 | }); 153 | 154 | material.transparent = true; 155 | 156 | this._viewer.impl.matman().addMaterial( 157 | 'heatmap', material, true); 158 | 159 | return material; 160 | } 161 | 162 | clonePlane(material, bounds) { 163 | 164 | // To use native three.js plane, use the following mesh constructor 165 | var geom = new THREE.PlaneGeometry(bounds.width, _bounds.height); 166 | var plane = new THREE.Mesh(geom, material); 167 | plane.position.set(0, 0, bounds.min.z + Z_POS); 168 | 169 | this._viewer.impl.addOverlay("pivot", plane); 170 | 171 | return plane; 172 | } 173 | } 174 | 175 | Autodesk.Viewing.theExtensionManager.registerExtension( 176 | DynamicTextureExtension.ExtensionId, 177 | DynamicTextureExtension) 178 | -------------------------------------------------------------------------------- /src/Viewing.Extension.ExtensionManager/Viewing.Extension.ExtensionManager.Panel.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.ExtensionManager.Panel 3 | // by Philippe Leefsma, Feb 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import ToolPanelBase from 'ToolPanelBase'; 7 | 8 | export default class ExtensionManagerPanel extends ToolPanelBase { 9 | 10 | constructor(container, btnElement) { 11 | 12 | super(container, 'Extension Manager', { 13 | buttonElement: btnElement, 14 | shadow: true 15 | }); 16 | 17 | $(this.container).addClass('extension-manager'); 18 | 19 | $('#' + this.container.id + '-filter').on('input',()=> { 20 | 21 | this.filterItems(); 22 | }); 23 | } 24 | 25 | ///////////////////////////////////////////////////////////// 26 | // 27 | // 28 | ///////////////////////////////////////////////////////////// 29 | htmlContent(id) { 30 | 31 | return ` 32 | 33 |
34 | 36 |
37 |
38 |
`; 39 | } 40 | 41 | ///////////////////////////////////////////////////////////// 42 | // 43 | // 44 | ///////////////////////////////////////////////////////////// 45 | loadItems(items) { 46 | 47 | $('.extension-manager .list-group-item').remove(); 48 | 49 | items.forEach((item)=> { 50 | 51 | this.addItem(item); 52 | }); 53 | } 54 | 55 | ///////////////////////////////////////////////////////////// 56 | // 57 | // 58 | ///////////////////////////////////////////////////////////// 59 | addItem(extension) { 60 | 61 | const itemId = extension._id 62 | 63 | var itemHtml = ` 64 |
65 | ${extension.name} 66 |
67 | `; 68 | 69 | $(`#${this.container.id}-item-list`).append(itemHtml); 70 | 71 | var $item = $(`#${itemId}`); 72 | 73 | $item.addClass(extension.enabled ? 'enabled' : ''); 74 | 75 | $item.click((e)=> { 76 | 77 | e.preventDefault(); 78 | 79 | extension.enabled ? 80 | this.emit('unload-request', extension) : 81 | this.emit('load-request', extension) 82 | }); 83 | } 84 | 85 | ///////////////////////////////////////////////////////////// 86 | // 87 | // 88 | ///////////////////////////////////////////////////////////// 89 | updateItem(extension) { 90 | 91 | var $item = $(`#${extension._id}`); 92 | 93 | extension.enabled ? 94 | $item.addClass('enabled') : 95 | $item.removeClass('enabled') 96 | } 97 | 98 | ///////////////////////////////////////////////////////////// 99 | // 100 | // 101 | ///////////////////////////////////////////////////////////// 102 | filterItems() { 103 | 104 | var filter = $('#' + this.container.id + '-filter').val(); 105 | 106 | $(".extension-manager .list-group-item").each(function() { 107 | 108 | var $item = $(this); 109 | 110 | if(!filter.length || 111 | $item.text().toLowerCase().indexOf( 112 | filter.toLowerCase()) > 0) { 113 | 114 | $item.css({ 115 | 'display':'block' 116 | }); 117 | } 118 | else { 119 | 120 | $item.css({ 121 | 'display':'none' 122 | }); 123 | } 124 | }); 125 | } 126 | } 127 | 128 | ///////////////////////////////////////////////////////////////////// 129 | // 130 | // 131 | ///////////////////////////////////////////////////////////////////// 132 | var css = ` 133 | 134 | .extension-manager { 135 | top: 10px; 136 | right: 10px; 137 | width: 250px; 138 | height: 350px; 139 | resize: auto; 140 | } 141 | 142 | .extension-manager .container { 143 | height: calc(100% - 55px); 144 | width: calc(100% - 18px); 145 | padding-top: 10px; 146 | padding-left: 10px; 147 | padding-right: 10px; 148 | margin: 0; 149 | overflow: auto; 150 | } 151 | 152 | .extension-manager .item-list { 153 | height: calc(100% - 30px); 154 | overflow: auto; 155 | } 156 | 157 | .extension-manager .v-spacer { 158 | border-width: 0px; 159 | margin: 2px; 160 | } 161 | 162 | .extension-manager .v-spacer-large { 163 | border-width: 0px; 164 | margin: 5px; 165 | } 166 | 167 | .extension-manager .list-group-item { 168 | width: calc(100% - 20px); 169 | height: 4px; 170 | line-height: 0.3; 171 | border-radius: 4px; 172 | margin-top: 0px; 173 | margin-bottom: 2px; 174 | padding-right: 2px; 175 | background-color: #E8E8E8; 176 | border: 1px solid #000; 177 | cursor: pointer; 178 | } 179 | 180 | .extension-manager .list-group-item.enabled { 181 | background-color: #4FEA5B; 182 | } 183 | 184 | .extension-manager .filter { 185 | background-color: #DEDEDE; 186 | width: calc(100% - 8px); 187 | border-radius: 4px; 188 | margin-bottom: 6px; 189 | } 190 | 191 | `; 192 | 193 | $('').appendTo('head'); -------------------------------------------------------------------------------- /src/Viewing.Extension.Markup2D/Viewing.Extension.Markup2D.css: -------------------------------------------------------------------------------- 1 | 2 | .markup { 3 | top: 10px; 4 | left: 10px; 5 | width: 300px; 6 | height: 350px; 7 | resize: auto; 8 | } 9 | 10 | .markup .container { 11 | height: calc(100% - 50px); 12 | width: calc(100% - 24px); 13 | padding-top: 10px; 14 | padding-left: 10px; 15 | padding-right: 10px; 16 | margin: 0; 17 | } 18 | 19 | .markup .switch-container { 20 | float: left; 21 | margin-right: 28px; 22 | } 23 | 24 | .markup .dropdown-mode-container { 25 | float: left; 26 | margin-top: 1px; 27 | margin-bottom: 10px; 28 | } 29 | 30 | .markup .input { 31 | height: 14px; 32 | margin-left: 2px; 33 | margin-top: 0px; 34 | border-radius:5px; 35 | vertical-align: top; 36 | width: calc(100% - 88px); 37 | } 38 | 39 | .markup .styles { 40 | width: calc(100% - 84px); 41 | margin-left: 6px; 42 | height: 20px; 43 | } 44 | 45 | .markup .btn { 46 | height: 6px; 47 | line-height: 0; 48 | vertical-align: top; 49 | } 50 | 51 | .markup .btn-dropdown { 52 | width: 170px; 53 | height: 10px; 54 | } 55 | 56 | .markup .btn-span { 57 | margin-right: 0px; 58 | line-height: 0.3; 59 | top: 1px; 60 | } 61 | 62 | .markup .btn-row { 63 | width: 63px; 64 | } 65 | 66 | .markup .btn-span-list { 67 | margin-right: 0px; 68 | line-height: 0.3; 69 | top: 1px; 70 | } 71 | .markup .btn-list { 72 | margin-top: -8px; 73 | float: right; 74 | } 75 | .minimized { 76 | height: 34px; 77 | min-height: 34px 78 | } 79 | 80 | .markup .v-spacer { 81 | border-width: 0px; 82 | margin: 2px; 83 | } 84 | 85 | .markup .v-spacer-large { 86 | border-width: 0px; 87 | margin: 10px; 88 | } 89 | 90 | .markup .list-group-item { 91 | width: calc(100% - 20px); 92 | height: 4px; 93 | line-height: 0.3; 94 | border-radius: 4px; 95 | margin-top: 0px; 96 | margin-bottom: 2px; 97 | padding-right: 2px; 98 | background-color: #F0F0F0; 99 | } 100 | 101 | .markup .view-mode .list-group-item { 102 | 103 | cursor: pointer; 104 | } 105 | 106 | .markup .view-mode .list-group-item.enabled { 107 | 108 | border: 1px solid #42C542; 109 | background-color: #42C542; 110 | } 111 | 112 | .markup .view-mode .list-group-item.enabled:hover{ 113 | 114 | border: 1px solid #42C542; 115 | background-color: #41E641; 116 | } 117 | 118 | .markup .view-mode .list-group-item:hover { 119 | 120 | border: 1px solid #34AFD4; 121 | background-color: #34AFD4; 122 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.Markup2D/Viewing.Extension.Markup2D.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Autodesk.ADN.Viewing.Extension.Markup 3 | // by Philippe Leefsma, Feb 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import Markup2DPanel from './Viewing.Extension.Markup2D.Panel' 7 | import ExtensionBase from 'Viewer.ExtensionBase' 8 | import ViewerToolkit from 'Viewer.Toolkit' 9 | import './Viewing.Extension.Markup2D.css' 10 | import './MarkupsCore.js' 11 | import './spectrum.css' 12 | import './spectrum' 13 | 14 | class Markup2DExtension extends ExtensionBase { 15 | 16 | ///////////////////////////////////////////////////////////////// 17 | // Class constructor 18 | // 19 | ///////////////////////////////////////////////////////////////// 20 | constructor (viewer, options) { 21 | 22 | super(viewer, options) 23 | } 24 | 25 | ///////////////////////////////////////////////////////////////// 26 | // Extension Id 27 | // 28 | ///////////////////////////////////////////////////////////////// 29 | static get ExtensionId () { 30 | 31 | return 'Viewing.Extension.Markup2D' 32 | } 33 | 34 | ///////////////////////////////////////////////////////////////// 35 | // Load callback 36 | // 37 | ///////////////////////////////////////////////////////////////// 38 | load () { 39 | 40 | this._control = ViewerToolkit.createButton( 41 | 'toolbar-markup2D', 42 | 'glyphicon glyphicon-edit', 43 | 'Markup 2D Panel', () => { 44 | 45 | this._panel.toggleVisibility() 46 | }) 47 | 48 | this._panel = new Markup2DPanel( 49 | this._viewer, 50 | 'markup2d', 51 | this._control.container) 52 | 53 | this.parentControl = this._options.parentControl 54 | 55 | if (!this.parentControl) { 56 | 57 | var viewerToolbar = this._viewer.getToolbar(true) 58 | 59 | this.parentControl = new Autodesk.Viewing.UI.ControlGroup( 60 | 'markup') 61 | 62 | viewerToolbar.addControl(this.parentControl) 63 | } 64 | 65 | this.parentControl.addControl( 66 | this._control) 67 | 68 | this._panel.setVisible( 69 | this._options.showPanel) 70 | 71 | console.log('Viewing.Extension.Markup2D loaded') 72 | 73 | return true 74 | } 75 | 76 | ///////////////////////////////////////////////////////////////// 77 | // Unload callback 78 | // 79 | ///////////////////////////////////////////////////////////////// 80 | unload () { 81 | 82 | this.parentControl.removeControl( 83 | this._control) 84 | 85 | console.log('Viewing.Extension.Markup2D unloaded') 86 | } 87 | } 88 | 89 | Autodesk.Viewing.theExtensionManager.registerExtension( 90 | Markup2DExtension.ExtensionId, 91 | Markup2DExtension) -------------------------------------------------------------------------------- /src/Viewing.Extension.Markup3D/Markup3D/Markup3D.Leader.js: -------------------------------------------------------------------------------- 1 | import Stopwatch from 'Stopwatch' 2 | 3 | export default class Leader { 4 | 5 | ///////////////////////////////////////////////////////////////// 6 | // 7 | // 8 | ///////////////////////////////////////////////////////////////// 9 | constructor(container, startPoint) { 10 | 11 | var snap = Snap(container) 12 | 13 | this.line = snap.paper.line( 14 | startPoint.x, startPoint.y, 15 | startPoint.x, startPoint.y) 16 | 17 | this.line.attr({ 18 | fill: 'none', 19 | strokeWidth: 1, 20 | stroke: '#000000', 21 | strokeLinecap: "round", 22 | strokeDasharray: "1 5 1 5" 23 | }) 24 | 25 | var pts = [startPoint.x, startPoint.y] 26 | 27 | this.arrow = snap.paper.polygon(pts) 28 | 29 | this.arrow.attr({ 30 | fill:"#B80000" 31 | }) 32 | 33 | this.leader = snap.group( 34 | this.line, 35 | this.arrow 36 | ) 37 | 38 | this.leader.attr({ 39 | visibility: 'hidden' 40 | }) 41 | 42 | this.timer = new Stopwatch() 43 | 44 | this.scaleFactor = 1.0 45 | this.animationId = 0 46 | } 47 | 48 | ///////////////////////////////////////////////////////////////// 49 | // 50 | // 51 | ///////////////////////////////////////////////////////////////// 52 | setVisible (show) { 53 | 54 | return new Promise((resolve, reject)=> { 55 | 56 | if (show) { 57 | 58 | this.leader.attr({ 59 | visibility: 'visible' 60 | }) 61 | } 62 | 63 | cancelAnimationFrame( 64 | this.animationId) 65 | 66 | var step = (show ? 0.002 : -0.002) 67 | 68 | const _animation = ()=> { 69 | 70 | this.scaleFactor += step * Math.max( 71 | this.timer.getElapsedMs(), 1) 72 | 73 | if (this.scaleFactor >= 1.0) { 74 | 75 | this.scaleFactor = 1.0 76 | this.draw() 77 | return resolve() 78 | } 79 | else if (this.scaleFactor <= 0.0) { 80 | 81 | this.scaleFactor = 0.0 82 | 83 | this.leader.attr({ 84 | visibility: 'hidden' 85 | }) 86 | 87 | this.draw() 88 | return resolve() 89 | } 90 | 91 | this.draw() 92 | 93 | this.animationId = requestAnimationFrame( 94 | _animation) 95 | } 96 | 97 | this.timer.getElapsedMs() 98 | 99 | _animation() 100 | }) 101 | } 102 | 103 | ///////////////////////////////////////////////////////////////// 104 | // 105 | // 106 | ///////////////////////////////////////////////////////////////// 107 | update (startPoint, endPoint) { 108 | 109 | this.startPoint = startPoint 110 | this.endPoint = endPoint 111 | 112 | this.dir = { 113 | x: endPoint.x - startPoint.x, 114 | y: endPoint.y - startPoint.y 115 | } 116 | 117 | this.draw() 118 | } 119 | 120 | ///////////////////////////////////////////////////////////////// 121 | // 122 | // 123 | ///////////////////////////////////////////////////////////////// 124 | draw () { 125 | 126 | var startPoint = { 127 | x: this.endPoint.x - this.scaleFactor * this.dir.x, 128 | y: this.endPoint.y - this.scaleFactor * this.dir.y 129 | } 130 | 131 | var norm = Math.sqrt( 132 | this.dir.x * this.dir.x + 133 | this.dir.y * this.dir.y) 134 | 135 | var nDir = { 136 | x: this.dir.x, 137 | y: this.dir.y 138 | } 139 | 140 | if(norm > 0){ 141 | nDir.x /= norm 142 | nDir.y /= norm 143 | } 144 | 145 | this.line.attr({ 146 | 147 | x1: startPoint.x, 148 | y1: startPoint.y, 149 | 150 | x2: this.endPoint.x, 151 | y2: this.endPoint.y 152 | }) 153 | 154 | var orthoDir = { 155 | x: nDir.y * this.scaleFactor, 156 | y: -nDir.x * this.scaleFactor 157 | } 158 | 159 | var pts = [ 160 | startPoint.x - 3 * nDir.x, 161 | startPoint.y - 3 * nDir.y, 162 | startPoint.x + 20 * nDir.x + 5 * orthoDir.x, 163 | startPoint.y + 20 * nDir.y + 5 * orthoDir.y, 164 | startPoint.x + 20 * nDir.x - 5 * orthoDir.x, 165 | startPoint.y + 20 * nDir.y - 5 * orthoDir.y 166 | ] 167 | 168 | this.arrow.attr({ 169 | points: pts 170 | }) 171 | } 172 | 173 | ///////////////////////////////////////////////////////////////// 174 | // 175 | // 176 | ///////////////////////////////////////////////////////////////// 177 | remove() { 178 | 179 | this.leader.remove() 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Markup3D/Markup3D/Markup3D.PinPoint.js: -------------------------------------------------------------------------------- 1 | import GraphicMarker from 'GraphicMarker'; 2 | 3 | export default class PinMarker extends GraphicMarker { 4 | 5 | ///////////////////////////////////////////////////////////////// 6 | // 7 | // 8 | ///////////////////////////////////////////////////////////////// 9 | constructor(viewer, worldPoint) { 10 | 11 | super(viewer.container, {x: 28, y: 28}); 12 | 13 | this.svgId = this.guid(); 14 | 15 | this.setContent( 16 | `` 17 | ); 18 | 19 | var snap = Snap($(`#${this.svgId}`)[0]); 20 | 21 | var circle = snap.paper.circle(14, 14, 12); 22 | 23 | circle.attr({ 24 | fill: "#FF8888", 25 | fillOpacity: 0.6, 26 | stroke: "#FF0000", 27 | strokeWidth: 3 28 | }); 29 | 30 | this.activateLock3d(viewer); 31 | this.setWorldPoint(worldPoint); 32 | 33 | this.timeoutId = 0; 34 | } 35 | 36 | ///////////////////////////////////////////////////////////////// 37 | // 38 | // 39 | ///////////////////////////////////////////////////////////////// 40 | setVisible (show) { 41 | 42 | if (show) { 43 | 44 | clearTimeout(this.timeoutId) 45 | this.timeoutId = setTimeout(()=>{ 46 | super.setVisible(true) 47 | }, 400) 48 | 49 | } else { 50 | 51 | clearTimeout(this.timeoutId) 52 | this.timeoutId = 0 53 | super.setVisible(false) 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Markup3D/Viewing.Extension.Markup3D.scss: -------------------------------------------------------------------------------- 1 | 2 | .markup3D.leader-container{ 3 | pointer-events: none; 4 | position: absolute; 5 | height: 100%; 6 | width: 100%; 7 | left: 0px; 8 | top: 0px; 9 | } 10 | 11 | svg.markup3D { 12 | width: 100%; 13 | height: 100%; 14 | } 15 | 16 | div.markup3D { 17 | width: 150px; 18 | } 19 | 20 | .markup3D .btn-ctrl { 21 | width: 46px; 22 | height: 6px; 23 | line-height: 0; 24 | vertical-align: top; 25 | } 26 | 27 | .markup3D .btn-span { 28 | margin-right: 0px; 29 | line-height: 0.3; 30 | top: 1px; 31 | } 32 | 33 | 34 | .markup3D .lmv-dropdown .label { 35 | color: black; 36 | } 37 | 38 | .markup3D .lmv-dropdown .btn { 39 | background-color: #d6d6d6; 40 | border: 1px solid #636363; 41 | } 42 | 43 | .markup3D .lmv-dropdown .dropdown-menu>li>a { 44 | line-height: 20px; 45 | padding: 3px 20px; 46 | height: 20px; 47 | } 48 | 49 | .markup3D .lmv-dropdown .caret { 50 | border-top: 4px solid #000000; 51 | position: absolute; 52 | top: 45%; 53 | right: -10px; 54 | } 55 | 56 | .markup3D .dropdown-menu { 57 | background-color: #ccc; 58 | } 59 | 60 | .markup3D-label { 61 | height: 20px; 62 | } 63 | 64 | .markup3D-tooltip { 65 | position: absolute; 66 | display: none; 67 | } 68 | 69 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Markup3D/index.js: -------------------------------------------------------------------------------- 1 | import './Viewing.Extension.Markup3D' 2 | 3 | export default 'Viewing.Extension.Markup3D' 4 | -------------------------------------------------------------------------------- /src/Viewing.Extension.MetaProperty/Viewing.Extension.MetaProperty.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.CustomPropertyExtension 3 | // by Philippe Leefsma, September 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import MetaPropertyPanel from './Viewing.Extension.MetaProperty.Panel' 7 | import ExtensionBase from 'Viewer.ExtensionBase' 8 | import ViewerToolkit from 'Viewer.Toolkit' 9 | 10 | class MetaPropertyExtension extends ExtensionBase { 11 | 12 | ///////////////////////////////////////////////////////////////// 13 | // Class constructor 14 | // 15 | ///////////////////////////////////////////////////////////////// 16 | constructor (viewer, options = {}) { 17 | 18 | super (viewer, options) 19 | } 20 | 21 | ///////////////////////////////////////////////////////////////// 22 | // Extension Id 23 | // 24 | ///////////////////////////////////////////////////////////////// 25 | static get ExtensionId() { 26 | 27 | return 'Viewing.Extension.MetaProperty'; 28 | } 29 | 30 | ///////////////////////////////////////////////////////////////// 31 | // Load callback 32 | // 33 | ///////////////////////////////////////////////////////////////// 34 | load() { 35 | 36 | this._panel = new MetaPropertyPanel( 37 | this._viewer, 38 | this._options) 39 | 40 | this._panel.on('setProperties', (data) => { 41 | 42 | return this.emit('setProperties', data) 43 | }) 44 | 45 | this._viewer.setPropertyPanel( 46 | this._panel) 47 | 48 | console.log('Viewing.Extension.MetaProperty loaded'); 49 | 50 | return true; 51 | } 52 | 53 | ///////////////////////////////////////////////////////////////// 54 | // Unload callback 55 | // 56 | ///////////////////////////////////////////////////////////////// 57 | unload() { 58 | 59 | console.log('Viewing.Extension.MetaProperty unloaded'); 60 | 61 | return true; 62 | } 63 | 64 | ///////////////////////////////////////////////////////////////// 65 | // 66 | // 67 | ///////////////////////////////////////////////////////////////// 68 | addProperties (properties) { 69 | 70 | //suppress "no properties" in panel 71 | if(properties.length) { 72 | 73 | $('div.noProperties', this._panel.container).remove() 74 | } 75 | 76 | properties.forEach((property) => { 77 | 78 | this._panel.addProperty(property) 79 | }) 80 | 81 | this._panel.resizeToContent() 82 | } 83 | 84 | ///////////////////////////////////////////////////////////////// 85 | // 86 | // 87 | ///////////////////////////////////////////////////////////////// 88 | updateProperties (properties) { 89 | 90 | properties.forEach((property) => { 91 | 92 | this._panel.updateProperty(property) 93 | }) 94 | 95 | return true; 96 | } 97 | } 98 | 99 | Autodesk.Viewing.theExtensionManager.registerExtension( 100 | MetaPropertyExtension.ExtensionId, 101 | MetaPropertyExtension) 102 | -------------------------------------------------------------------------------- /src/Viewing.Extension.MetaProperty/Viewing.Extension.MetaProperty.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.MetaProperty/Viewing.Extension.MetaProperty.scss -------------------------------------------------------------------------------- /src/Viewing.Extension.MetaProperty/index.js: -------------------------------------------------------------------------------- 1 | import './Viewing.Extension.MetaProperty' 2 | 3 | export default 'Viewing.Extension.MetaProperty' 4 | -------------------------------------------------------------------------------- /src/Viewing.Extension.ModelTransformer/index.js: -------------------------------------------------------------------------------- 1 | import './Viewing.Extension.ModelTransformer' 2 | 3 | export default 'Viewing.Extension.ModelTransformer' -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/ParticleSystem/BaseObject.js: -------------------------------------------------------------------------------- 1 | import Vector from './Vector' 2 | 3 | export default class BaseObject { 4 | 5 | constructor (id, type = 'object') { 6 | 7 | this.offset = new Vector() 8 | this.position = new Vector() 9 | this.selectable = true 10 | this.transformable = true 11 | this.type = type 12 | this.id = id 13 | } 14 | 15 | setPosition (position) { 16 | 17 | this.position = position.add(this.offset) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/ParticleSystem/Field.js: -------------------------------------------------------------------------------- 1 | import BaseObject from './BaseObject' 2 | import Vector from './Vector' 3 | 4 | export default class Field extends BaseObject { 5 | 6 | constructor (id, type) { 7 | 8 | super(id, type) 9 | } 10 | 11 | computeAcceleration (particle) { 12 | 13 | return new Vector() 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/ParticleSystem/MagneticField.js: -------------------------------------------------------------------------------- 1 | 2 | import Field from './Field' 3 | 4 | export default class MagneticField extends Field { 5 | 6 | constructor (id) { 7 | 8 | super(id, 'field.magnetic') 9 | 10 | this.force = 0 11 | } 12 | 13 | applyForce (particle) { 14 | 15 | var dX = this.position.x - particle.position.x 16 | var dY = this.position.y - particle.position.y 17 | var dZ = this.position.z - particle.position.z 18 | 19 | var force = particle.charge * this.force / Math.pow(( 20 | dX * dX + 21 | dY * dY + 22 | dZ * dZ), 1.5) 23 | 24 | if (Math.abs(force) > 0.001) { 25 | 26 | particle.acceleration.x += dX * force 27 | particle.acceleration.y += dY * force 28 | particle.acceleration.z += dZ * force 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/ParticleSystem/Particle.js: -------------------------------------------------------------------------------- 1 | import Vector from './Vector' 2 | 3 | export default class Particle { 4 | 5 | constructor (dof) { 6 | this.velocity = new Vector() 7 | this.position = new Vector() 8 | this.acceleration = new Vector() 9 | this.recycled = false 10 | this.radius = 0.03 11 | this.dof = dof 12 | this.lifeTime = 30 13 | this.charge = 1 14 | } 15 | 16 | reset () { 17 | this.recycled = false 18 | this.lifeTime = 30 19 | } 20 | 21 | submitToFields (fields) { 22 | 23 | this.acceleration.x = 0 24 | this.acceleration.y = 0 25 | this.acceleration.z = 0 26 | 27 | fields.forEach((field) => { 28 | 29 | field.applyForce(this) 30 | }) 31 | } 32 | 33 | step (dt) { 34 | 35 | this.lifeTime -= dt 36 | 37 | if (this.dof.x) { 38 | this.velocity.x += this.acceleration.x * dt 39 | this.position.x += this.velocity.x * dt 40 | } 41 | 42 | if (this.dof.y) { 43 | this.velocity.y += this.acceleration.y * dt 44 | this.position.y += this.velocity.y * dt 45 | } 46 | 47 | if (this.dof.z) { 48 | this.velocity.z += this.acceleration.z * dt 49 | this.position.z += this.velocity.z * dt 50 | } 51 | } 52 | } 53 | 54 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/ParticleSystem/ParticleEmitter.js: -------------------------------------------------------------------------------- 1 | import BaseObject from './BaseObject' 2 | import Vector from './Vector' 3 | 4 | export default class ParticleEmitter extends BaseObject { 5 | 6 | constructor (id) { 7 | 8 | super(id, 'emitter') 9 | 10 | this.spread = 2 * Math.PI / 180 11 | this.emissionRate = 500 12 | this.velocity = 10 13 | this.charge = 1 14 | } 15 | 16 | emitNumber (dt) { 17 | 18 | return Math.floor(this.emissionRate * dt) 19 | } 20 | 21 | emitParticle (particle) { 22 | 23 | //inlining for perf 24 | 25 | //particle.velocity = this.ramdomVelocity() 26 | 27 | var angle1 = this.spread * (2 * Math.random() - 1) 28 | var angle2 = this.spread * (2 * Math.random() - 1) 29 | 30 | particle.velocity.x = this.velocity * 31 | Math.cos(angle1) * Math.cos(angle2) 32 | 33 | particle.velocity.y = this.velocity * 34 | Math.sin(angle1) * Math.cos(angle2) 35 | 36 | particle.velocity.z = this.velocity * 37 | Math.sin(angle2) 38 | 39 | particle.position.x = this.position.x 40 | particle.position.y = this.position.y 41 | particle.position.z = this.position.z 42 | 43 | particle.charge = this.charge 44 | } 45 | 46 | ramdomVelocity () { 47 | 48 | //random angles in [-spread, spread] 49 | var angle1 = this.spread * (2 * Math.random() - 1) 50 | var angle2 = this.spread * (2 * Math.random() - 1) 51 | 52 | return new Vector( 53 | this.velocity * Math.cos(angle1) * Math.cos(angle2), 54 | this.velocity * Math.sin(angle1) * Math.cos(angle2), 55 | this.velocity * Math.sin(angle2)) 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/ParticleSystem/Vector.js: -------------------------------------------------------------------------------- 1 | 2 | export default class Vector { 3 | 4 | constructor (x, y, z) { 5 | this.x = x || 0 6 | this.y = y || 0 7 | this.z = z || 0 8 | } 9 | 10 | magnitude () { 11 | 12 | return Math.sqrt( 13 | this.x * this.x + 14 | this.y * this.y + 15 | this.z * this.z) 16 | } 17 | 18 | asUnitVector () { 19 | 20 | var m = this.magnitude() 21 | 22 | return new Vector( 23 | this.x / m, 24 | this.y / m, 25 | this.z / m) 26 | } 27 | 28 | scaled (scaleFactor) { 29 | 30 | var m = this.magnitude() 31 | 32 | return new Vector( 33 | this.x * scaleFactor / m, 34 | this.y * scaleFactor / m, 35 | this.z * scaleFactor / m) 36 | } 37 | 38 | multiply (scaleFactor) { 39 | 40 | this.x *= scaleFactor 41 | this.y *= scaleFactor 42 | this.z *= scaleFactor 43 | 44 | return this 45 | } 46 | 47 | add (vector) { 48 | 49 | this.x += vector.x 50 | this.y += vector.y 51 | this.z += vector.z 52 | 53 | return this 54 | } 55 | 56 | vectorTo (vector) { 57 | 58 | return new Vector( 59 | vector.x - this.x, 60 | vector.y - this.y, 61 | vector.z - this.z 62 | ) 63 | } 64 | 65 | withinSphere (center, radius) { 66 | 67 | var magnitudeSqr = 68 | (this.x - center.x) * (this.x - center.x) + 69 | (this.y - center.y) * (this.y - center.y) + 70 | (this.z - center.z) * (this.z - center.z) 71 | 72 | return magnitudeSqr < radius * radius 73 | } 74 | 75 | withinBox (center, size) { 76 | 77 | //TODO 78 | 79 | return true 80 | } 81 | 82 | copy () { 83 | 84 | return new Vector(this.x, this.y, this.z) 85 | } 86 | 87 | static fromArray (data) { 88 | 89 | return new Vector(data[0], data[1], data[2]) 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/Viewing.Extension.Particle.LHC.css: -------------------------------------------------------------------------------- 1 | .LHC{ 2 | top: 102px; 3 | left: 10px; 4 | width: 202px; 5 | height: 178px; 6 | resize: none; 7 | } 8 | 9 | .LHC .container { 10 | width: 100%; 11 | padding: 2px 0 0 0; 12 | width: calc(100% - 2px); 13 | } 14 | 15 | .LHC .dockingPanelTitle { 16 | cursor: auto; 17 | } 18 | 19 | .LHC .list-group-item { 20 | width: calc(100% - 20px); 21 | height: 4px; 22 | line-height: 0.3; 23 | border-radius: 4px; 24 | margin-top: 0px; 25 | margin-bottom: 2px; 26 | padding-right: 2px; 27 | background-color: #E8E8E8; 28 | border: 1px solid #000; 29 | cursor: pointer; 30 | } 31 | 32 | .LHC .list-group-item:hover { 33 | background-color: #5BC0DE; 34 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/Viewing.Extension.Particle.Panel.js: -------------------------------------------------------------------------------- 1 | 2 | import ToolPanelBase from 'ToolPanelBase' 3 | import './Viewing.Extension.Particle.css' 4 | import dat from 'dat-gui' 5 | 6 | export default class ParticlePanel extends ToolPanelBase { 7 | 8 | ///////////////////////////////////////////////////////////// 9 | // 10 | // 11 | ///////////////////////////////////////////////////////////// 12 | constructor (particleTool, viewer, btnElement) { 13 | 14 | super(viewer.container, 'Particle Controls', { 15 | buttonElement: btnElement, 16 | closable: false 17 | }) 18 | 19 | this._viewer = viewer 20 | 21 | $(this.container).addClass('particle') 22 | 23 | var gui = new dat.GUI({ 24 | autoPlace: false 25 | }) 26 | 27 | var guiContainer = document.getElementById( 28 | this.container.id + '-gui') 29 | 30 | guiContainer.appendChild( 31 | gui.domElement) 32 | 33 | var folder = gui.addFolder('Particle System Properties') 34 | 35 | this.maxParticleCtrl = folder.add( 36 | particleTool.particleSystem, 37 | 'maxParticles', 0, 10000).name( 38 | 'Max Particles') 39 | 40 | this.maxParticleCtrl.onFinishChange((value) => { 41 | 42 | this.emit('maxParticles.changed', value) 43 | }) 44 | 45 | var nbParticleTypes = folder.add(particleTool, 46 | 'nbParticleTypes', 1, 200).name( 47 | 'Particle Types') 48 | 49 | nbParticleTypes.onFinishChange(function (nbTypes) { 50 | particleTool.setParticleTypes( 51 | Math.max(1, Math.floor(nbTypes))) 52 | }) 53 | 54 | folder.open() 55 | 56 | setTimeout(() => { 57 | gui.domElement.style.width = '100%' 58 | }, 0) 59 | } 60 | 61 | ///////////////////////////////////////////////////////////// 62 | // 63 | // 64 | ///////////////////////////////////////////////////////////// 65 | htmlContent (id) { 66 | 67 | return ` 68 |
69 |
70 |
71 |
` 72 | } 73 | 74 | ///////////////////////////////////////////////////////////// 75 | // 76 | // 77 | ///////////////////////////////////////////////////////////// 78 | loadObjectGUI (obj) { 79 | 80 | $('#' + this.container.id + '-obj-gui').remove() 81 | 82 | if (!obj || !obj.selectable) { 83 | return 84 | } 85 | 86 | var gui = new dat.GUI({ 87 | autoPlace: false 88 | }) 89 | 90 | $('#' + this.container.id + '-gui').append( 91 | `
` 92 | ) 93 | 94 | var guiContainer = document.getElementById( 95 | this.container.id + '-obj-gui') 96 | 97 | guiContainer.appendChild( 98 | gui.domElement) 99 | 100 | switch (obj.type) { 101 | 102 | case 'field.magnetic': 103 | 104 | var fieldFolder = gui.addFolder('Selected Field Properties') 105 | 106 | var forceCtrl = fieldFolder.add( 107 | obj, 'force', -100, 100).name('Force') 108 | 109 | forceCtrl.onChange((value) => { 110 | 111 | this.emit('objectModified', { 112 | property: 'force', 113 | value: value, 114 | object: obj 115 | }) 116 | }) 117 | 118 | fieldFolder.open() 119 | break 120 | 121 | case 'emitter': 122 | 123 | var emitterFolder = gui.addFolder('Selected Emitter Properties') 124 | 125 | emitterFolder.add(obj, 'emissionRate', 10, 1000).name('Emission Rate') 126 | emitterFolder.add(obj, 'spread', 0.0, 6 * Math.PI / 180).name('Spread') 127 | emitterFolder.add(obj, 'velocity', 1, 10).name('Particles Velocity') 128 | 129 | var chargeCtrl = emitterFolder.add( 130 | obj, 'charge', -10, 10).name('Particles Charge') 131 | 132 | chargeCtrl.onChange((value) => { 133 | 134 | this.emit('objectModified', { 135 | property: 'charge', 136 | value: value, 137 | object: obj 138 | }) 139 | }) 140 | 141 | emitterFolder.open() 142 | break 143 | 144 | default: 145 | break 146 | } 147 | 148 | window.setTimeout(() => { 149 | gui.domElement.style.width = '100%' 150 | }, 0) 151 | 152 | this.setVisible(true) 153 | } 154 | 155 | ///////////////////////////////////////////////////////////// 156 | // 157 | // 158 | ///////////////////////////////////////////////////////////// 159 | setSelected (obj) { 160 | 161 | this.loadObjectGUI(obj) 162 | } 163 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/Viewing.Extension.Particle.css: -------------------------------------------------------------------------------- 1 | .particle{ 2 | top: 10px; 3 | right: 10px; 4 | width: 265px; 5 | height: 350px; 6 | resize: auto; 7 | } 8 | 9 | .particle .container { 10 | width: 100%; 11 | padding: 0; 12 | } 13 | 14 | .particle .btn { 15 | height: 6px; 16 | line-height: 0; 17 | vertical-align: top; 18 | } 19 | 20 | .particle .btn-span { 21 | margin-right: 0px; 22 | line-height: 0.3; 23 | top: 1px; 24 | } 25 | 26 | .particle .dg.main { 27 | width: 100% 28 | } 29 | 30 | .particle .dg.main.taller-than-window .close-button { 31 | border-top: 1px solid #ddd; 32 | } 33 | 34 | .particle .dg.main .close-button { 35 | background-color: #ccc; 36 | display: none; 37 | } 38 | 39 | .particle .dg.main .close-button:hover { 40 | background-color: #ddd; 41 | } 42 | 43 | .particle .dg { 44 | color: #555; 45 | text-shadow: none !important; 46 | } 47 | 48 | .particle .dg.main::-webkit-scrollbar { 49 | background: #fafafa; 50 | } 51 | 52 | .particle .dg.main::-webkit-scrollbar-thumb { 53 | background: #bbb; 54 | } 55 | 56 | .particle .dg li:not(.folder) { 57 | background: #fafafa; 58 | border-bottom: 1px solid #ddd; 59 | } 60 | 61 | .particle .dg li.save-row .button { 62 | text-shadow: none !important; 63 | } 64 | 65 | .particle .dg li.title { 66 | background: #e8e8e8 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat; 67 | } 68 | 69 | .particle .dg .cr.function:hover,.dg .cr.boolean:hover { 70 | background: #fff; 71 | } 72 | 73 | .particle .dg .c input[type=text] { 74 | background: #e9e9e9; 75 | border: 0; 76 | margin-top: 0px; 77 | padding: 0px; 78 | float: right; 79 | } 80 | 81 | .particle .dg .c input[type=text]:hover { 82 | background: #eee; 83 | } 84 | 85 | .particle .dg .c input[type=text]:focus { 86 | background: #eee; 87 | color: #555; 88 | } 89 | 90 | .particle .dg .c .slider { 91 | background: #e9e9e9; 92 | height: 28px; 93 | margin-top: 0px; 94 | } 95 | 96 | .particle .dg .c .slider:hover { 97 | background: #eee; 98 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/LHC/LHC.iam: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/LHC/LHC.iam -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/LHC/emitter-1.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/LHC/emitter-1.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/LHC/emitter-2.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/LHC/emitter-2.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/LHC/field-inner.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/LHC/field-inner.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/LHC/field-outer.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/LHC/field-outer.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/LHC/ring - down.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/LHC/ring - down.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/LHC/ring - up.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/LHC/ring - up.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/Simple/emitter.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/Simple/emitter.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/Simple/field-1.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/Simple/field-1.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/Simple/field-2.ipt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/Simple/field-2.ipt -------------------------------------------------------------------------------- /src/Viewing.Extension.Particle/scenes/Simple/particle.iam: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.Particle/scenes/Simple/particle.iam -------------------------------------------------------------------------------- /src/Viewing.Extension.PointCloud/Viewing.Extension.PointCloud.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // PointCloud viewer extension 3 | // by Philippe Leefsma, March 2016 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | import ExtensionBase from 'Viewer.ExtensionBase' 7 | 8 | class PointCloud extends ExtensionBase { 9 | 10 | ///////////////////////////////////////////////////////////////// 11 | // Class constructor 12 | // 13 | ///////////////////////////////////////////////////////////////// 14 | constructor(viewer, options) { 15 | 16 | super (viewer, options) 17 | } 18 | 19 | ///////////////////////////////////////////////////////////////// 20 | // Load callback 21 | // 22 | ///////////////////////////////////////////////////////////////// 23 | load() { 24 | 25 | var particles = 100; 26 | var n = 200, n2 = n / 2; 27 | var geometry = new THREE.Geometry(); 28 | 29 | for (var i = 0; i < particles; i++) { 30 | 31 | var x = Math.random() * n - n2; 32 | var y = Math.random() * n - n2; 33 | var z = Math.random() * n - n2; 34 | 35 | geometry.vertices.push( 36 | new THREE.Vector3(x, y, z) 37 | ) 38 | 39 | geometry.colors.push( 40 | new THREE.Color( 41 | Math.random(), 42 | Math.random(), 43 | Math.random())); 44 | } 45 | 46 | THREE.ImageUtils.crossOrigin = ''; 47 | 48 | var material = new THREE.PointCloudMaterial({ 49 | //map : THREE.ImageUtils.loadTexture('text.jpg'), 50 | vertexColors: THREE.VertexColors, 51 | size : 150 52 | //sizeAttenuation : true, 53 | //transparent : true, 54 | //opacity : 0.6 55 | }); 56 | 57 | this.pointCloud = new THREE.PointCloud( 58 | geometry, 59 | material); 60 | 61 | this.pointCloud.sortParticles = true; 62 | 63 | this._viewer.impl.scene.add( 64 | this.pointCloud); 65 | 66 | this._viewer.impl.invalidate( 67 | true, false, false); 68 | 69 | console.log('Viewing.Extension.PointCloud Loaded'); 70 | 71 | return true; 72 | } 73 | 74 | ///////////////////////////////////////////////////////////////// 75 | // Unload callback 76 | // 77 | ///////////////////////////////////////////////////////////////// 78 | unload() { 79 | 80 | console.log('Viewing.Extension.PointCloud Unloaded'); 81 | 82 | return true; 83 | } 84 | } 85 | 86 | Autodesk.Viewing.theExtensionManager.registerExtension( 87 | 'Viewing.Extension.PointCloud', 88 | PointCloud); 89 | 90 | 91 | -------------------------------------------------------------------------------- /src/Viewing.Extension.PointCloud/test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | three.js webgl - trackball controls 5 | 6 | 7 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | 183 | 184 | 185 | 186 | -------------------------------------------------------------------------------- /src/Viewing.Extension.PointCloud/test/text.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/src/Viewing.Extension.PointCloud/test/text.jpg -------------------------------------------------------------------------------- /src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.API.js: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////////////////////// 2 | // StateManager API 3 | // 4 | ///////////////////////////////////////////////////////////////// 5 | import ClientAPI from 'ClientAPI' 6 | 7 | export default class StatesAPI extends ClientAPI { 8 | 9 | /////////////////////////////////////////////////////////////// 10 | // Class constructor 11 | // 12 | /////////////////////////////////////////////////////////////// 13 | constructor (apiUrl) { 14 | 15 | super(apiUrl) 16 | } 17 | 18 | /////////////////////////////////////////////////////////////// 19 | // 20 | // 21 | /////////////////////////////////////////////////////////////// 22 | async getSequence(modelId) { 23 | 24 | var url = this.apiUrl + `/models/${modelId}/states/sequence` 25 | 26 | return this.ajax(url) 27 | } 28 | 29 | /////////////////////////////////////////////////////////////// 30 | // 31 | // 32 | /////////////////////////////////////////////////////////////// 33 | getStates(modelId) { 34 | 35 | var url = this.apiUrl + `/models/${modelId}/states` 36 | 37 | return this.ajax(url) 38 | } 39 | 40 | /////////////////////////////////////////////////////////////// 41 | // 42 | // 43 | /////////////////////////////////////////////////////////////// 44 | saveSequence(modelId, sequence) { 45 | 46 | var payload = { 47 | sequence: sequence 48 | } 49 | 50 | var url = this.apiUrl + `/models/${modelId}/states/sequence` 51 | 52 | return this.ajax({ 53 | url: url, 54 | method: 'POST', 55 | headers: { 56 | 'Accept': 'application/json', 57 | 'Content-Type': 'application/json' 58 | }, 59 | data: JSON.stringify(payload) 60 | }) 61 | } 62 | 63 | /////////////////////////////////////////////////////////////// 64 | // 65 | // 66 | /////////////////////////////////////////////////////////////// 67 | addState(modelId, state) { 68 | 69 | var payload = { 70 | state: state 71 | } 72 | 73 | var url = this.apiUrl + `/models/${modelId}/states` 74 | 75 | return this.ajax({ 76 | url: url, 77 | method: 'POST', 78 | headers: { 79 | 'Accept': 'application/json', 80 | 'Content-Type': 'application/json' 81 | }, 82 | data: JSON.stringify(payload) 83 | }) 84 | } 85 | 86 | /////////////////////////////////////////////////////////////// 87 | // 88 | // 89 | /////////////////////////////////////////////////////////////// 90 | removeState(modelId, stateId) { 91 | 92 | var url = this.apiUrl + `/models/${modelId}/states/${stateId}/remove` 93 | 94 | return this.ajax({ 95 | url: url, 96 | method: 'POST' 97 | }) 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.Panel.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.StateManager.Panel 3 | // by Philippe Leefsma, Feb 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import './Viewing.Extension.StateManager.scss' 7 | import ToolPanelBase from 'ToolPanelBase' 8 | import 'dragula/dist/dragula.min.css' 9 | import dragula from 'dragula' 10 | 11 | export default class StateManagerPanel extends ToolPanelBase{ 12 | 13 | constructor(container, btnElement) { 14 | 15 | super(container, 'States Manager', { 16 | buttonElement: btnElement, 17 | shadow: true 18 | }); 19 | 20 | $(this.container).addClass('state-manager'); 21 | 22 | $(`#${this.container.id}-save-btn`).click((e)=>{ 23 | 24 | var $name = $(`#${this.container.id}-name`); 25 | 26 | var state = this.emit('state.add', {name: $name.val()}); 27 | 28 | this.addItem(state); 29 | 30 | $name.val(''); 31 | }); 32 | 33 | this.drake = dragula( 34 | [$(`#${this.container.id}-item-list`)[0]], 35 | {removeOnSpill: false}); 36 | 37 | this.drake.on('drop', ()=> { 38 | 39 | var sequence = []; 40 | 41 | $(`#${this.container.id}-item-list > div`).each( 42 | (idx, child)=> { 43 | sequence.push(child.id); 44 | }); 45 | 46 | this.emit('sequence.update', sequence); 47 | }); 48 | 49 | this.drake.on('drag', (el)=> { 50 | 51 | }); 52 | } 53 | 54 | ///////////////////////////////////////////////////////////// 55 | // 56 | // 57 | ///////////////////////////////////////////////////////////// 58 | htmlContent (id) { 59 | 60 | return ` 61 | 62 |
63 |
64 | 69 |
70 | 72 |
73 |
74 |
`; 75 | } 76 | 77 | ///////////////////////////////////////////////////////////// 78 | // 79 | // 80 | ///////////////////////////////////////////////////////////// 81 | addItem (item) { 82 | 83 | var itemHtml = ` 84 | 85 |
87 | 90 | 95 |
96 | `; 97 | 98 | $(`#${this.container.id}-item-list`).append(itemHtml) 99 | 100 | if(item.readonly){ 101 | 102 | $(`#${item.guid}-delete-btn`).css({display:'none'}) 103 | } 104 | 105 | var $item = $(`#${item.guid}`) 106 | 107 | $(`#${item.guid}-delete-btn`).click((e)=>{ 108 | 109 | this.emit('state.remove', item) 110 | 111 | $item.remove() 112 | }); 113 | 114 | $item.click((e)=> { 115 | 116 | e.preventDefault(); 117 | 118 | var element = document.elementFromPoint( 119 | e.pageX, e.pageY) 120 | 121 | if (element.className.indexOf('state-restore') > -1) { 122 | 123 | this.emit('state.restore', item) 124 | } 125 | }); 126 | } 127 | 128 | ///////////////////////////////////////////////////////////// 129 | // 130 | // 131 | ///////////////////////////////////////////////////////////// 132 | clearItems () { 133 | 134 | $(`#${this.container.id}-item-list`).empty() 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.scss: -------------------------------------------------------------------------------- 1 | 2 | .state-manager{ 3 | top: 10px; 4 | left: 10px; 5 | width: 370px; 6 | height: 350px; 7 | resize: auto; 8 | } 9 | 10 | .state-manager .container { 11 | height: calc(100% - 55px); 12 | width: calc(100% - 20px); 13 | padding-top: 10px; 14 | padding-left: 10px; 15 | padding-right: 10px; 16 | margin: 0; 17 | } 18 | 19 | .state-manager .item-list { 20 | height: calc(100% - 24px); 21 | overflow: auto; 22 | margin-top: 6px; 23 | } 24 | 25 | 26 | .state-btn-list { 27 | line-height: 0; 28 | vertical-align: top; 29 | margin-top: -1px; 30 | float: right; 31 | margin-right: 0px; 32 | height: 8px; 33 | } 34 | 35 | .state-manager .btn-save { 36 | border: 1px solid #aeaeae; 37 | float: left; 38 | height: 16px; 39 | margin-right: 4px; 40 | padding-top: 0; 41 | } 42 | 43 | .state-manager .input-name { 44 | border: 1px solid #aeaeae; 45 | border-radius: 4px; 46 | width: calc(100% - 122px); 47 | height: 20px; 48 | } 49 | 50 | .state-manager .btn-dropdown { 51 | width: 170px; 52 | height: 10px; 53 | } 54 | 55 | .state-manager .btn-span { 56 | margin-right: 0; 57 | top: 3px; 58 | } 59 | 60 | .state-btn-span-list { 61 | margin-right: 0; 62 | line-height: 0.3; 63 | top: 1px; 64 | } 65 | 66 | .minimized { 67 | height: 34px; 68 | min-height: 34px 69 | } 70 | 71 | .state-manager .v-spacer { 72 | border-width: 0; 73 | margin: 2px; 74 | } 75 | 76 | .state-manager .v-spacer-large { 77 | border-width: 0; 78 | margin: 10px; 79 | } 80 | 81 | .state-list-group-item { 82 | width: calc(100% - 12px); 83 | height: 19px; 84 | line-height: .3; 85 | border-radius: 4px; 86 | margin-top: 1px; 87 | margin-bottom: 0; 88 | background-color: #e8e8e8; 89 | border: 1px solid #aeaeae; 90 | cursor: pointer; 91 | position: relative; 92 | display: block; 93 | padding: 4px; 94 | } 95 | 96 | .state-list-group-item label { 97 | overflow-x: hidden; 98 | margin-top: 4px; 99 | position: relative; 100 | height: 20px; 101 | line-height: .9; 102 | font-weight: inherit; 103 | font-size: 13px; 104 | white-space: nowrap; 105 | cursor: pointer; 106 | } 107 | 108 | .state-list-group-item:hover { 109 | border: 1px solid #1547de; 110 | background-color: #5BC0DE; 111 | } 112 | -------------------------------------------------------------------------------- /src/Viewing.Extension.StateManager/index.js: -------------------------------------------------------------------------------- 1 | import './Viewing.Extension.StateManager' 2 | 3 | export default 'Viewing.Extension.StateManager' 4 | -------------------------------------------------------------------------------- /src/Viewing.Extension.TypeScript/Viewing.Extension.TypeScript.js: -------------------------------------------------------------------------------- 1 | 2 | import TypeScriptExtension from './Viewing.Extension.TypeScriptExtension.ts' 3 | 4 | Autodesk.Viewing.theExtensionManager.registerExtension( 5 | 'Viewing.Extension.TypeScript', 6 | TypeScriptExtension); -------------------------------------------------------------------------------- /src/Viewing.Extension.TypeScript/Viewing.Extension.TypeScriptExtension.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export = class TypeScriptExtension { 4 | 5 | constructor(viewer, options) { 6 | 7 | } 8 | 9 | load(): boolean { 10 | 11 | console.log('Viewing.Extension.TypeScript loaded'); 12 | 13 | return true; 14 | } 15 | 16 | unload(): boolean { 17 | 18 | console.log('Viewing.Extension.TypeScript unloaded'); 19 | 20 | return true; 21 | } 22 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/BarChart/BarChart.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // BarChart 3 | // by Philippe Leefsma, April 2016 4 | // 5 | // Simple BarChart using d3 API 6 | // 7 | ///////////////////////////////////////////////////////////////////// 8 | import EventsEmitter from 'EventsEmitter' 9 | import './BarChart.scss' 10 | import d3 from 'd3' 11 | 12 | 13 | 14 | 15 | export default class BarChart extends EventsEmitter { 16 | 17 | ///////////////////////////////////////////////////////////////// 18 | // Class constructor 19 | // 20 | ///////////////////////////////////////////////////////////////// 21 | constructor(selector, data) { 22 | 23 | super(); 24 | 25 | var container = $(selector)[0]; 26 | 27 | var margin = { 28 | top: 40, 29 | right: 40, 30 | bottom: 100, 31 | left: 80 32 | }; 33 | 34 | var width = Math.min(Math.max( 35 | $('.tabs-container').width() - 40, 36 | 30 * data.length), 100 * data.length); 37 | 38 | var height = $('.tabs-container').height() - margin.top - margin.bottom; 39 | 40 | var x = d3.scale.ordinal().rangeRoundBands( 41 | [0, width], .1); 42 | 43 | var y = d3.scale.linear() 44 | .range([height, 0]); 45 | 46 | var xAxis = d3.svg.axis() 47 | .scale(x) 48 | .orient("bottom"); 49 | 50 | var yAxis = d3.svg.axis() 51 | .scale(y) 52 | .orient("left") 53 | .ticks(10, "%"); 54 | 55 | var d3Container = d3.select(selector); 56 | 57 | var svg = d3Container.append("svg") 58 | .attr("width", width + margin.left + margin.right) 59 | .attr("height", height + margin.top + margin.bottom) 60 | .append("g") 61 | .attr("transform", `translate(${margin.left}, ${margin.top})`); 62 | 63 | x.domain(data.map(function(d) { return d.label; })); 64 | 65 | y.domain([0, d3.max(data, function(d) { 66 | return d.value / 1000; 67 | })]); 68 | 69 | svg.append("g") 70 | .attr("class", "x axis") 71 | .attr("transform", `translate(0, ${height})`) 72 | .call(xAxis) 73 | .selectAll("text") 74 | .style("text-anchor", "end") 75 | .attr("dx", "-.8em") 76 | .attr("dy", ".15em") 77 | .attr("transform", function(d) { 78 | return "rotate(-20)" 79 | }); 80 | 81 | svg.append("g") 82 | .attr("class", "y axis") 83 | .call(yAxis) 84 | .append("text") 85 | .attr("transform", "translate(60, -30)") 86 | .attr("y", 6) 87 | .attr("dy", ".71em") 88 | .style("text-anchor", "end") 89 | .text("Components (% Total)"); 90 | 91 | var tooltip = d3.select(selector) 92 | .append('div') 93 | .style('display', 'none') 94 | .style('height', '20px') 95 | .style('position','absolute') 96 | .style('padding','0 10px') 97 | .style('background','white') 98 | .style('opacity',0); 99 | 100 | var tempcolor = null; 101 | 102 | svg.selectAll(".bar-item") 103 | .data(data) 104 | .enter().append("rect") 105 | .attr("class", "bar-item") 106 | .attr("x", function(d) { 107 | return x(d.label); 108 | }) 109 | .attr("width", x.rangeBand()) 110 | .attr("y", function(d) { 111 | return y(d.value / 1000); 112 | }) 113 | .attr("height", function(d) { 114 | return height - y(d.value / 1000); 115 | }) 116 | .style('fill',function(d, i){ 117 | return data[i].color; 118 | }) 119 | .on('click', (item)=>{ 120 | this.emit('bar.click', { 121 | dbIds: item.dbIds 122 | }); 123 | }) 124 | .on('mouseover',function(props){ 125 | 126 | tooltip.transition() 127 | .style('opacity',.9); 128 | 129 | var offset = $(container).offset(); 130 | 131 | var x = d3.event.pageX - offset.left; 132 | var y = d3.event.pageY - offset.top; 133 | 134 | tooltip.html(props.label + ': ' + props.value) 135 | .style('left', x - 20 + 'px') 136 | .style('top', y - 40 + 'px') 137 | .style('display', 'block') 138 | 139 | tempcolor = this.style.fill; 140 | 141 | d3.select(this) 142 | .style('fill','#6AB8E3') 143 | .style('opacity',.5); 144 | }) 145 | .on('mouseout',function(d){ 146 | 147 | d3.select(this) 148 | .style('opacity',1) 149 | .style('fill',tempcolor); 150 | 151 | tooltip.style('display', 'none'); 152 | }); 153 | 154 | function type(d) { 155 | d.value = +d.value; 156 | return d; 157 | } 158 | 159 | //$('.d3 > svg').css('transform', 'translate(0px, 42px)'); 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/BarChart/BarChart.scss: -------------------------------------------------------------------------------- 1 | .visual-report .d3.d3-bar { 2 | overflow-x: auto; 3 | } 4 | 5 | .bar-item:hover { 6 | fill: brown; 7 | } 8 | 9 | .axis { 10 | font: 10px sans-serif; 11 | } 12 | 13 | .axis path { 14 | fill: none; 15 | stroke: #000; 16 | shape-rendering: crispEdges; 17 | } 18 | 19 | .axis line { 20 | fill: none; 21 | stroke: #000; 22 | shape-rendering: crispEdges; 23 | } 24 | 25 | .x.axis path { 26 | display: none; 27 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/CircleGraph/CircleGraph.css: -------------------------------------------------------------------------------- 1 | .visual-report .d3.d3-circle { 2 | width: 567px; 3 | height: 567px; 4 | border: 1px solid #000000; 5 | } 6 | 7 | .d3-circle .node { 8 | cursor: pointer; 9 | } 10 | 11 | .d3-circle .node:hover { 12 | stroke: #000; 13 | stroke-width: 1.5px; 14 | } 15 | 16 | .d3-circle .node--leaf { 17 | fill: white; 18 | } 19 | 20 | .d3-circle .label { 21 | font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; 22 | text-anchor: middle; 23 | text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; 24 | } 25 | 26 | .d3-circle .label, 27 | .d3-circle .node--root, 28 | .d3-circle .node--leaf { 29 | pointer-events: none; 30 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/CircleGraph/CircleGraph.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // ForceGraph 3 | // by Philippe Leefsma, April 2016 4 | // 5 | // Simple ForceGraph using d3 API 6 | // 7 | ///////////////////////////////////////////////////////////////////// 8 | import EventsEmitter from 'EventsEmitter' 9 | import './CircleGraph.css' 10 | import d3 from 'd3' 11 | 12 | export default class CircleGraph extends EventsEmitter { 13 | 14 | ///////////////////////////////////////////////////////////////// 15 | // Class constructor 16 | // 17 | ///////////////////////////////////////////////////////////////// 18 | constructor(selector, root) { 19 | 20 | super(); 21 | 22 | var width = "567", height = "567"; 23 | 24 | var margin = 5, diameter = height; 25 | 26 | var color = d3.scale.linear() 27 | .domain([-1, 5]) 28 | .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) 29 | .interpolate(d3.interpolateHcl); 30 | 31 | var pack = d3.layout.pack() 32 | .padding(2) 33 | .size([width - margin, height - margin]) 34 | .value(function(d) { 35 | var size = Math.max(d.size, 300); 36 | size = Math.min(size, 10); 37 | return size; 38 | }) 39 | 40 | var svg = d3.select(selector).append("svg") 41 | .attr("width", width) 42 | .attr("height", height) 43 | .append("g") 44 | .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); 45 | 46 | var focus = root, 47 | nodes = pack.nodes(root), 48 | view; 49 | 50 | var circle = svg.selectAll("circle") 51 | .data(nodes) 52 | .enter().append("circle") 53 | .attr("class", function(d) { 54 | return d.parent ? (d.children && d.children.length) ? 55 | "node" : "node node--leaf" : "node node--root"; 56 | }) 57 | .style("fill", function(d) { 58 | 59 | if(!d){ 60 | return null; 61 | } 62 | 63 | return (d.children && d.children.length) ? color(d.depth) : null; 64 | }) 65 | .on("click", function(d) { 66 | 67 | if (d && focus !== d) { 68 | zoom(d); 69 | d3.event.stopPropagation(); 70 | } 71 | }); 72 | 73 | var text = svg.selectAll("text") 74 | .data(nodes) 75 | .enter().append("text") 76 | .attr("class", "label") 77 | .style("fill-opacity", function(d) { 78 | return d.parent === root ? 1 : 0; 79 | }) 80 | .style("display", function(d) { 81 | return d.parent === root ? "inline" : "none"; 82 | }) 83 | .text(function(d) { return d.name; }); 84 | 85 | var node = svg.selectAll("circle,text"); 86 | 87 | d3.select(selector).on("click", ()=> { 88 | 89 | zoom(root); 90 | }); 91 | 92 | zoomTo([root.x, root.y, root.r * 2 + margin]); 93 | 94 | function zoom(d) { 95 | 96 | if(!d){ 97 | return; 98 | } 99 | 100 | focus = d; 101 | 102 | var transition = d3.transition() 103 | .duration(d3.event.altKey ? 7500 : 750) 104 | .tween("zoom", function(d) { 105 | var i = d3.interpolateZoom(view, [ 106 | focus.x, focus.y, focus.r * 2 + margin 107 | ]); 108 | return function(t) { zoomTo(i(t)); }; 109 | }); 110 | 111 | transition.selectAll("text") 112 | .filter(function(d) { 113 | if(!d){ 114 | return false; 115 | } 116 | return d.parent === focus || this.style.display === "inline"; 117 | }) 118 | .style("fill-opacity", function(d) { 119 | return d.parent === focus ? 1 : 0; 120 | }) 121 | .each("start", function(d) { 122 | if (d.parent === focus) this.style.display = "inline"; 123 | }) 124 | .each("end", function(d) { 125 | if (d.parent !== focus) this.style.display = "none"; 126 | }); 127 | } 128 | 129 | function zoomTo(v) { 130 | 131 | var k = diameter / v[2]; 132 | view = v; 133 | node.attr("transform", function(d) { 134 | return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; 135 | }); 136 | circle.attr("r", function(d) { return d.r * k; }); 137 | } 138 | } 139 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/ForceGraph/ForceGraph.css: -------------------------------------------------------------------------------- 1 | .visual-report .d3.d3-force { 2 | width: 567px; 3 | height: 415px; 4 | border: 1px solid #000000; 5 | } 6 | 7 | .d3-force .node { 8 | cursor: pointer; 9 | stroke: #3182bd; 10 | stroke-width: 1.5px; 11 | } 12 | 13 | .d3-force .link { 14 | fill: none; 15 | stroke: #9ecae1; 16 | stroke-width: 1.5px; 17 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/ForceGraph/ForceGraph.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // ForceGraph 3 | // by Philippe Leefsma, April 2016 4 | // 5 | // Simple ForceGraph using d3 API 6 | // 7 | ///////////////////////////////////////////////////////////////////// 8 | import EventsEmitter from 'EventsEmitter' 9 | import './ForceGraph.css' 10 | import d3 from 'd3' 11 | 12 | export default class ForceGraph extends EventsEmitter { 13 | 14 | ///////////////////////////////////////////////////////////////// 15 | // Class constructor 16 | // 17 | ///////////////////////////////////////////////////////////////// 18 | constructor(selector, root) { 19 | 20 | super(); 21 | 22 | var width = "567", height = "415"; 23 | 24 | var force = d3.layout.force() 25 | .size([width, height]) 26 | //.linkDistance((link)=> { 27 | // //link.source 28 | // //link.target 29 | // var dist = Math.max(link.source.size * 100, 100) 30 | // return dist; 31 | //}) 32 | //.charge((d)=>{ 33 | // return 1; 34 | //}) 35 | .on("tick", tick); 36 | 37 | var svg = d3.select(selector) 38 | .append("svg") 39 | .attr("width", width) 40 | .attr("height", height); 41 | 42 | var link = svg.selectAll(".link"); 43 | var node = svg.selectAll(".node"); 44 | 45 | function update() { 46 | 47 | var nodes = flatten(root), 48 | links = d3.layout.tree().links(nodes); 49 | 50 | // Restart the force layout. 51 | force.nodes(nodes) 52 | .links(links) 53 | .start(); 54 | 55 | // Update the links… 56 | link = link.data(links, function(d) { 57 | return d.target.id; 58 | }); 59 | 60 | // Exit any old links. 61 | link.exit().remove(); 62 | 63 | // Enter any new links. 64 | link.enter().insert("line", ".node") 65 | .attr("class", "link") 66 | .attr("x1", function(d) { return d.source.x; }) 67 | .attr("y1", function(d) { return d.source.y; }) 68 | .attr("x2", function(d) { return d.target.x; }) 69 | .attr("y2", function(d) { return d.target.y; }); 70 | 71 | // Update the nodes… 72 | node = node.data(nodes, (d)=> { 73 | return d.id; 74 | }) 75 | .style("fill", color); 76 | 77 | // Exit any old nodes. 78 | node.exit().remove(); 79 | 80 | // Enter any new nodes. 81 | node.enter().append("circle") 82 | .attr("class", "node") 83 | .attr("cx", function(d) { return d.x }) 84 | .attr("cy", function(d) { return d.y }) 85 | .attr("r", function(d) { 86 | var size = d.size * 80; 87 | size = Math.max(size, 2.5); 88 | size = Math.min(size, 8); 89 | return size; 90 | }) 91 | .style("fill", color) 92 | .on("dblclick", onDoubleClick) 93 | .on("click", onClick) 94 | .call(force.drag); 95 | } 96 | 97 | function tick() { 98 | 99 | link.attr("x1", function(d) { return d.source.x; }) 100 | .attr("y1", function(d) { return d.source.y; }) 101 | .attr("x2", function(d) { return d.target.x; }) 102 | .attr("y2", function(d) { return d.target.y; }); 103 | 104 | node.attr("cx", function(d) { return d.x; }) 105 | .attr("cy", function(d) { return d.y; }); 106 | } 107 | 108 | // Color leaf nodes orange, and packages white or blue. 109 | function color(d) { 110 | return d._children ? 111 | "#3182bd" : 112 | d.children ? "#c6dbef" : "#fd8d3c"; 113 | } 114 | 115 | // Toggle children on double-click. 116 | function onDoubleClick(d) { 117 | 118 | if (!d3.event.defaultPrevented) { 119 | if (d.children) { 120 | d._children = d.children; 121 | d.children = null; 122 | } else { 123 | d.children = d._children; 124 | d._children = null; 125 | } 126 | update(); 127 | } 128 | } 129 | 130 | // fire event on click 131 | var onClick = (d)=> { 132 | 133 | this.emit('node.click', d); 134 | } 135 | 136 | // Returns a list of all nodes under parent 137 | function flatten(parent) { 138 | 139 | var nodes = [], i = 0; 140 | 141 | function recurse(node) { 142 | if (node.children) node.children.forEach(recurse); 143 | if (!node.id) node.id = ++i; 144 | nodes.push(node); 145 | } 146 | 147 | recurse(parent); 148 | return nodes; 149 | } 150 | 151 | update(); 152 | } 153 | } -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/PieChart/PieChart.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // PieChart 3 | // by Philippe Leefsma, April 2016 4 | // 5 | // Simple PieChart using d3Pie API 6 | // 7 | ///////////////////////////////////////////////////////////////////// 8 | import EventsEmitter from 'EventsEmitter' 9 | import d3pie from 'd3pie' 10 | import d3 from 'd3' 11 | 12 | export default class PieChart extends EventsEmitter { 13 | 14 | ///////////////////////////////////////////////////////////////// 15 | // Class constructor 16 | // 17 | ///////////////////////////////////////////////////////////////// 18 | constructor(selector, data) { 19 | 20 | super(); 21 | 22 | let $container = $(selector) 23 | 24 | this.chart = new d3pie($container[0], { 25 | 26 | //header: { 27 | // title: { 28 | // text: "Title" 29 | // } 30 | //}, 31 | 32 | effects: { 33 | load: { 34 | //effect: "none" 35 | } 36 | }, 37 | 38 | labels: { 39 | inner: { 40 | hideWhenLessThanPercentage: 5 41 | } 42 | }, 43 | 44 | size: { 45 | canvasHeight: $('.tabs-container').height(), 46 | canvasWidth: $('.tabs-container').width(), 47 | "pieInnerRadius": "39%", 48 | "pieOuterRadius": "80%" 49 | }, 50 | 51 | data: { 52 | content: data 53 | //sortOrder: "label-asc" 54 | //smallSegmentGrouping: { 55 | // valueType: "percentage", 56 | // label: "Other", 57 | // enabled: true, 58 | // value: 3 59 | //} 60 | }, 61 | 62 | tooltips: { 63 | enabled: true, 64 | type: "placeholder", 65 | string: "{label}: {percentage}%", 66 | styles: { 67 | fadeInSpeed: 250, 68 | backgroundColor: "#000000", 69 | backgroundOpacity: 0.5, 70 | color: "#efefef", 71 | borderRadius: 2, 72 | font: "arial", 73 | fontSize: 10, 74 | padding: 4 75 | } 76 | }, 77 | 78 | callbacks: { 79 | onClickSegment: (event)=> { 80 | this.emit('segment.click', { 81 | dbIds: event.expanded? [] : event.data.dbIds 82 | }); 83 | } 84 | } 85 | }); 86 | 87 | $(`${selector} > svg`).css('transform', `translate(15px, -30px)`); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/Viewing.Extension.VisualReport.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // Viewing.Extension.VisualReport 3 | // by Philippe Leefsma, April 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import VisualReportPanel from './Viewing.Extension.VisualReport.Panel' 7 | import ExtensionBase from 'Viewer.ExtensionBase' 8 | import ViewerToolkit from 'Viewer.Toolkit' 9 | 10 | class VisualReportExtension extends ExtensionBase { 11 | 12 | ///////////////////////////////////////////////////////////////// 13 | // Class constructor 14 | // 15 | ///////////////////////////////////////////////////////////////// 16 | constructor(viewer, options) { 17 | 18 | super (viewer, options) 19 | } 20 | 21 | ///////////////////////////////////////////////////////////////// 22 | // Extension Id 23 | // 24 | ///////////////////////////////////////////////////////////////// 25 | static get ExtensionId() { 26 | 27 | return 'Viewing.Extension.VisualReport' 28 | } 29 | 30 | ///////////////////////////////////////////////////////////////// 31 | // Load callback 32 | // 33 | ///////////////////////////////////////////////////////////////// 34 | async load() { 35 | 36 | this._viewer.setQualityLevel(false, true) 37 | 38 | var componentIds = await ViewerToolkit.getLeafNodes( 39 | this._viewer.model); 40 | 41 | var fragIdToMaterial = {} 42 | 43 | componentIds.forEach(async(dbId) => { 44 | 45 | var fragIds = await ViewerToolkit.getFragIds( 46 | this._viewer.model, dbId) 47 | 48 | fragIds.forEach((fragId) => { 49 | 50 | let fragList = this._viewer.model.getFragmentList() 51 | 52 | let material = fragList.getMaterial(fragId) 53 | 54 | if(material) { 55 | 56 | fragIdToMaterial[fragId] = material 57 | } 58 | }) 59 | }) 60 | 61 | let properties = this._options.properties 62 | 63 | if (!properties) { 64 | 65 | properties = await ViewerToolkit.getPropertyList( 66 | this._viewer.model, 67 | componentIds) 68 | } 69 | 70 | this._control = ViewerToolkit.createButton( 71 | 'toolbar-visual-report', 72 | 'glyphicon glyphicon-tasks', 73 | 'Visual Report', () => { 74 | 75 | this._panel.toggleVisibility() 76 | }) 77 | 78 | this._panel = new VisualReportPanel( 79 | this._viewer, 80 | properties, 81 | componentIds, 82 | this._control.container) 83 | 84 | this.parentControl = this._options.parentControl 85 | 86 | if (!this.parentControl) { 87 | 88 | var viewerToolbar = this._viewer.getToolbar(true) 89 | 90 | this.parentControl = new Autodesk.Viewing.UI.ControlGroup( 91 | 'visual-report') 92 | 93 | viewerToolbar.addControl(this.parentControl) 94 | } 95 | 96 | this._panel.on('close', () => { 97 | 98 | for(let fragId in fragIdToMaterial) { 99 | 100 | let material = fragIdToMaterial[fragId] 101 | 102 | let fragList = this._viewer.model.getFragmentList() 103 | 104 | fragList.setMaterial(fragId, material) 105 | } 106 | 107 | ViewerToolkit.isolateFull( 108 | this._viewer) 109 | 110 | this._viewer.impl.invalidate( 111 | true, false, false); 112 | }) 113 | 114 | this.parentControl.addControl( 115 | this._control) 116 | 117 | console.log('Viewing.Extension.VisualReport loaded'); 118 | 119 | return true; 120 | } 121 | 122 | ///////////////////////////////////////////////////////////////// 123 | // Unload callback 124 | // 125 | ///////////////////////////////////////////////////////////////// 126 | unload() { 127 | 128 | this._panel.setVisible(false); 129 | 130 | this.parentControl.removeControl( 131 | this._control) 132 | 133 | console.log('Viewing.Extension.VisualReport unloaded'); 134 | 135 | return true; 136 | } 137 | } 138 | 139 | Autodesk.Viewing.theExtensionManager.registerExtension( 140 | VisualReportExtension.ExtensionId, 141 | VisualReportExtension); 142 | -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/Viewing.Extension.VisualReport.scss: -------------------------------------------------------------------------------- 1 | 2 | .visual-report { 3 | top: 10px; 4 | left: 10px; 5 | width: 400px; 6 | height: 450px; 7 | resize: auto; 8 | } 9 | 10 | .visual-report .container { 11 | transition: opacity 1.5s ease-in-out; 12 | opacity: 0.2; 13 | height: calc(100% - 40px); 14 | width: 100%; 15 | padding-top: 10px; 16 | padding-left: 10px; 17 | padding-right: 10px; 18 | margin: 0; 19 | } 20 | 21 | .visual-report .container:hover { 22 | opacity: 1; 23 | } 24 | 25 | .visual-report .btn { 26 | height: 6px; 27 | line-height: 0; 28 | vertical-align: top; 29 | } 30 | 31 | .visual-report .btn-save { 32 | float: left; 33 | height: 14px; 34 | margin-right: 4px; 35 | padding-top: 1px; 36 | } 37 | 38 | .visual-report .input-name { 39 | border-radius: 4px; 40 | width: calc(100% - 123px); 41 | height: 17px; 42 | } 43 | 44 | .visual-report .btn-dropdown { 45 | width: 170px; 46 | height: 10px; 47 | } 48 | 49 | .visual-report .lmv-dropdown .dropdown-menu>li>a { 50 | height: 30px; 51 | line-height: 24px; 52 | padding: 3px 20px; 53 | } 54 | 55 | .visual-report .btn-span { 56 | margin-right: 0px; 57 | top: 3px; 58 | } 59 | 60 | .visual-report .btn-span-list { 61 | margin-right: 0px; 62 | line-height: 0.3; 63 | top: 1px; 64 | } 65 | 66 | .visual-report .v-spacer { 67 | border-width: 0px; 68 | margin: 2px; 69 | } 70 | 71 | .visual-report .v-spacer-large { 72 | border-width: 0px; 73 | margin: 10px; 74 | } 75 | 76 | .visual-report .props-container { 77 | border: 1px solid #aeaeae; 78 | margin-bottom: 10px; 79 | border-radius: 4px; 80 | } 81 | 82 | .visual-report .tabs-container { 83 | height: calc(100% - 42px); 84 | } 85 | 86 | .visual-report .lmv-dropdown .btn { 87 | width: 100%; 88 | background-color: #E8E8E8; 89 | } 90 | 91 | .visual-report .lmv-dropdown .label { 92 | color: rgb(71, 72, 72);; 93 | } 94 | 95 | .visual-report .lmv-dropdown .caret{ 96 | border-top:4px solid #aeaeae; 97 | } 98 | 99 | .visual-report .d3 { 100 | height: 100%; 101 | } 102 | 103 | .visual-report .tabs div { 104 | max-height: 569px; 105 | } 106 | -------------------------------------------------------------------------------- /src/Viewing.Extension.VisualReport/index.js: -------------------------------------------------------------------------------- 1 | import './Viewing.Extension.VisualReport' 2 | 3 | export default 'Viewing.Extension.VisualReport' 4 | -------------------------------------------------------------------------------- /src/components/ClientAPI/ClientAPI.js: -------------------------------------------------------------------------------- 1 | 2 | export default class ClientAPI { 3 | 4 | ///////////////////////////////////////////////////////////// 5 | // constructor 6 | // 7 | ///////////////////////////////////////////////////////////// 8 | constructor (apiUrl) { 9 | 10 | this.apiUrl = apiUrl 11 | } 12 | 13 | ///////////////////////////////////////////////////////////// 14 | // fetch wrapper 15 | // 16 | ///////////////////////////////////////////////////////////// 17 | fetch(url, params) { 18 | 19 | return fetch(url, params).then(response => { 20 | 21 | return response.json().then(json => { 22 | 23 | return response.ok ? json : Promise.reject(json); 24 | }) 25 | }) 26 | } 27 | 28 | ///////////////////////////////////////////////////////////// 29 | // $.ajax wrapper 30 | // 31 | ///////////////////////////////////////////////////////////// 32 | ajax(paramsOrUrl) { 33 | 34 | var params = { 35 | url: paramsOrUrl, 36 | type: 'GET', 37 | data: null 38 | } 39 | 40 | if (typeof paramsOrUrl === 'object') { 41 | 42 | Object.assign(params, paramsOrUrl) 43 | } 44 | 45 | return new Promise((resolve, reject) => { 46 | 47 | Object.assign(params, { 48 | success: (response) => { 49 | 50 | resolve(response) 51 | }, 52 | error: function (error) { 53 | 54 | reject(error) 55 | } 56 | }) 57 | 58 | $.ajax(params) 59 | }) 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/ClientAPI/index.js: -------------------------------------------------------------------------------- 1 | import ClientAPI from './ClientAPI' 2 | 3 | export default ClientAPI 4 | -------------------------------------------------------------------------------- /src/components/Dropdown/Dropdown.scss: -------------------------------------------------------------------------------- 1 | .lmv-dropdown .btn { 2 | background-color: #3C3F40; 3 | vertical-align: top; 4 | line-height: 0; 5 | height: 28px; 6 | width: 100%; 7 | } 8 | 9 | .lmv-dropdown .label { 10 | font: normal 14px Times New Roman; 11 | } 12 | 13 | .scrollable-menu { 14 | height: auto; 15 | max-height: 250px; 16 | overflow-x: hidden; 17 | overflow-y: scroll; 18 | } 19 | 20 | .lmv-dropdown .label-container { 21 | width: calc(100% - 18px); 22 | white-space: nowrap; 23 | overflow: hidden; 24 | } 25 | 26 | .lmv-dropdown .caret { 27 | border-top: 4px solid #fff; 28 | position: absolute; 29 | top: 45%; 30 | right: 10px; 31 | } 32 | 33 | .lmv-dropdown .dropdown-menu>li>a { 34 | padding: 0px 20px; 35 | line-height: 24px; 36 | height: 24px; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /src/components/Dropdown/index.js: -------------------------------------------------------------------------------- 1 | import Dropdown from './Dropdown' 2 | 3 | export default Dropdown 4 | -------------------------------------------------------------------------------- /src/components/EventsEmitter/EventsEmitter.js: -------------------------------------------------------------------------------- 1 | 2 | export default class EventsEmitter { 3 | 4 | /////////////////////////////////////////////////////////////////// 5 | // 6 | // 7 | /////////////////////////////////////////////////////////////////// 8 | constructor () { 9 | 10 | this._events = {} 11 | } 12 | 13 | /////////////////////////////////////////////////////////////////// 14 | // Supports multiple events space-separated 15 | // 16 | /////////////////////////////////////////////////////////////////// 17 | on (events, fct) { 18 | 19 | events.split(' ').forEach((event) => { 20 | 21 | this._events[event] = this._events[event] || []; 22 | this._events[event].push(fct); 23 | }) 24 | 25 | return this 26 | } 27 | 28 | /////////////////////////////////////////////////////////////////// 29 | // Supports multiple events space-separated 30 | // 31 | /////////////////////////////////////////////////////////////////// 32 | off (events, fct) { 33 | 34 | if(events == undefined){ 35 | this._events = {}; 36 | return; 37 | } 38 | 39 | events.split(' ').forEach((event) => { 40 | 41 | if (event in this._events === false) 42 | return; 43 | 44 | if (fct) { 45 | 46 | this._events[event].splice( 47 | this._events[event].indexOf(fct), 1) 48 | 49 | } else { 50 | 51 | this._events[event] = [] 52 | } 53 | }) 54 | 55 | return this 56 | } 57 | 58 | /////////////////////////////////////////////////////////////////// 59 | // 60 | // 61 | /////////////////////////////////////////////////////////////////// 62 | emit (event /* , args... */) { 63 | 64 | if(this._events[event] === undefined) 65 | return; 66 | 67 | var tmpArray = this._events[event].slice(); 68 | 69 | for(var i = 0; i < tmpArray.length; ++i) { 70 | 71 | var result = tmpArray[i].apply(this, 72 | Array.prototype.slice.call(arguments, 1)); 73 | 74 | if(result !== undefined ) 75 | return result; 76 | } 77 | 78 | return undefined; 79 | } 80 | 81 | /////////////////////////////////////////////////////////////////// 82 | // 83 | // 84 | /////////////////////////////////////////////////////////////////// 85 | guid(format='xxxxxxxxxxxx') { 86 | 87 | var d = new Date().getTime(); 88 | 89 | var guid = format.replace( 90 | /[xy]/g, 91 | function (c) { 92 | var r = (d + Math.random() * 16) % 16 | 0; 93 | d = Math.floor(d / 16); 94 | return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16); 95 | }); 96 | 97 | return guid; 98 | } 99 | } 100 | 101 | 102 | /////////////////////////////////////////////////////////////////// 103 | // 104 | // 105 | /////////////////////////////////////////////////////////////////// 106 | export const EventsEmitterComposer = 107 | (BaseClass) => class extends BaseClass { 108 | 109 | /////////////////////////////////////////////////////////////////// 110 | // 111 | // 112 | /////////////////////////////////////////////////////////////////// 113 | constructor (arg1, arg2, arg3, arg4, arg5) { 114 | 115 | super (arg1, arg2, arg3, arg4, arg5) 116 | 117 | this._events = {}; 118 | } 119 | 120 | /////////////////////////////////////////////////////////////////// 121 | // Supports multiple events space-separated 122 | // 123 | /////////////////////////////////////////////////////////////////// 124 | on (events, fct) { 125 | 126 | events.split(' ').forEach((event) => { 127 | 128 | this._events[event] = this._events[event] || []; 129 | this._events[event].push(fct); 130 | }) 131 | 132 | return this 133 | } 134 | 135 | /////////////////////////////////////////////////////////////////// 136 | // Supports multiple events space-separated 137 | // 138 | /////////////////////////////////////////////////////////////////// 139 | off (events, fct) { 140 | 141 | if(events == undefined){ 142 | this._events = {}; 143 | return; 144 | } 145 | 146 | events.split(' ').forEach((event) => { 147 | 148 | if (event in this._events === false) 149 | return; 150 | 151 | if (fct) { 152 | 153 | this._events[event].splice( 154 | this._events[event].indexOf(fct), 1) 155 | 156 | } else { 157 | 158 | this._events[event] = [] 159 | } 160 | }) 161 | 162 | return this 163 | } 164 | 165 | /////////////////////////////////////////////////////////////////// 166 | // 167 | // 168 | /////////////////////////////////////////////////////////////////// 169 | emit (event /* , args... */) { 170 | 171 | if(this._events[event] === undefined) 172 | return; 173 | 174 | var tmpArray = this._events[event].slice(); 175 | 176 | for(var i = 0; i < tmpArray.length; ++i) { 177 | 178 | var result = tmpArray[i].apply(this, 179 | Array.prototype.slice.call(arguments, 1)); 180 | 181 | if(result !== undefined ) 182 | return result; 183 | } 184 | 185 | return undefined; 186 | } 187 | 188 | /////////////////////////////////////////////////////////////////// 189 | // 190 | // 191 | /////////////////////////////////////////////////////////////////// 192 | guid(format='xxxxxxxxxxxx') { 193 | 194 | var d = new Date().getTime(); 195 | 196 | var guid = format.replace( 197 | /[xy]/g, 198 | function (c) { 199 | var r = (d + Math.random() * 16) % 16 | 0; 200 | d = Math.floor(d / 16); 201 | return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16); 202 | }); 203 | 204 | return guid 205 | } 206 | } 207 | 208 | 209 | -------------------------------------------------------------------------------- /src/components/EventsEmitter/index.js: -------------------------------------------------------------------------------- 1 | import {EventsEmitterComposer} from './EventsEmitter' 2 | import EventsEmitter from './EventsEmitter' 3 | 4 | EventsEmitter.Composer = EventsEmitterComposer 5 | 6 | export default EventsEmitter 7 | -------------------------------------------------------------------------------- /src/components/GraphicMarker/index.js: -------------------------------------------------------------------------------- 1 | import GraphicMarker from './GraphicMarker' 2 | 3 | export default GraphicMarker 4 | -------------------------------------------------------------------------------- /src/components/Stopwatch/Stopwatch.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////// 2 | // A stopwatch 3 | // 4 | /////////////////////////////////////////////////////////////////////////// 5 | export default class Stopwatch { 6 | 7 | constructor(){ 8 | 9 | this._lastTime = performance.now(); 10 | } 11 | 12 | start(){ 13 | 14 | this._lastTime = performance.now(); 15 | } 16 | 17 | getElapsedMs(){ 18 | 19 | var time = performance.now(); 20 | 21 | var elapsedMs = time - this._lastTime; 22 | 23 | this._lastTime = time; 24 | 25 | return elapsedMs; 26 | } 27 | } -------------------------------------------------------------------------------- /src/components/Stopwatch/index.js: -------------------------------------------------------------------------------- 1 | import Stopwatch from './Stopwatch' 2 | 3 | export default Stopwatch 4 | -------------------------------------------------------------------------------- /src/components/SwitchButton/SwitchButton.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////// 2 | // switch button 3 | // 4 | ///////////////////////////////////////////////////////////// 5 | import EventsEmitter from 'EventsEmitter'; 6 | 7 | export default class SwitchButton extends EventsEmitter { 8 | 9 | /////////////////////////////////////////////////////////////////// 10 | // 11 | // 12 | /////////////////////////////////////////////////////////////////// 13 | constructor(container, checked = true){ 14 | 15 | super(); 16 | 17 | var _this = this; 18 | 19 | var labelId = guid(); 20 | 21 | this._inputId = guid(); 22 | 23 | var html = ` 24 |

25 | 27 | 31 |

32 | `; 33 | 34 | $(container).append(html); 35 | 36 | $('#' + labelId).click((e)=>{ 37 | 38 | var $input = $('#' + this._inputId)[0]; 39 | 40 | $input.checked = !$input.checked; 41 | 42 | _this.emit('checked', $input.checked); 43 | }); 44 | } 45 | 46 | /////////////////////////////////////////////////////////////////// 47 | // 48 | // 49 | /////////////////////////////////////////////////////////////////// 50 | checked() { 51 | 52 | return $('#' + this._inputId)[0].checked; 53 | } 54 | 55 | /////////////////////////////////////////////////////////////////// 56 | // 57 | // 58 | /////////////////////////////////////////////////////////////////// 59 | setChecked(checked) { 60 | 61 | $('#' + this._inputId).prop( 62 | 'checked', checked); 63 | 64 | this.emit('checked', checked); 65 | } 66 | } 67 | 68 | function guid() { 69 | 70 | var d = new Date().getTime(); 71 | 72 | var guid = 'xxxx-xxxx-xxxx-xxxx'.replace( 73 | /[xy]/g, 74 | function (c) { 75 | var r = (d + Math.random() * 16) % 16 | 0; 76 | d = Math.floor(d / 16); 77 | return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16); 78 | }); 79 | 80 | return guid; 81 | } 82 | 83 | //https://proto.io/freebies/onoff/ 84 | var css = ` 85 | 86 | .onoffswitch { 87 | position: relative; width: 50px; 88 | -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 89 | } 90 | .onoffswitch-checkbox { 91 | display: none; 92 | } 93 | .onoffswitch-label { 94 | display: block; overflow: hidden; cursor: pointer; 95 | border: 2px solid #999999; border-radius: 8px; 96 | } 97 | .onoffswitch-inner { 98 | display: block; width: 200%; margin-left: -100%; 99 | transition: margin 0.3s ease-in 0s; 100 | } 101 | .onoffswitch-inner:before, .onoffswitch-inner:after { 102 | display: block; 103 | float: left; 104 | width: 50%; 105 | height: 15px; 106 | padding: 0; 107 | line-height: 15px; 108 | font-size: 10px; 109 | color: white; 110 | font-family: Trebuchet, Arial, sans-serif; 111 | font-weight: bold; 112 | box-sizing: border-box; 113 | } 114 | .onoffswitch-inner:before { 115 | content: "ON"; 116 | background-color: #0E8200; 117 | color: #FFFFFF; 118 | } 119 | .onoffswitch-inner:after { 120 | content: "OFF"; 121 | padding-right: 10px; 122 | background-color: #d9534f; 123 | color: #FFFFFF; 124 | text-align: right; 125 | } 126 | .onoffswitch-switch { 127 | display: block; 128 | width: 12px; 129 | margin: 2px; 130 | background: #FFFFFF; 131 | position: absolute; 132 | top: 0; 133 | bottom: 0; 134 | right: 31px; 135 | border: 2px solid #999999; 136 | border-radius: 8px; 137 | transition: all 0.3s ease-in 0s; 138 | } 139 | .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 140 | margin-left: 0; 141 | } 142 | .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 143 | right: -1px; 144 | } 145 | `; 146 | 147 | $('').appendTo('head'); 148 | -------------------------------------------------------------------------------- /src/components/SwitchButton/index.js: -------------------------------------------------------------------------------- 1 | import SwitchButton from './SwitchButton' 2 | 3 | export default SwitchButton 4 | -------------------------------------------------------------------------------- /src/components/TabManager/TabManager.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////// 2 | // TabManager 3 | // By Philippe Leefsma, April 2016 4 | // 5 | ///////////////////////////////////////////////////////////// 6 | import UIComponent from 'UIComponent' 7 | import 'dragula/dist/dragula.min.css' 8 | import dragula from 'dragula' 9 | import './TabManager.scss' 10 | 11 | export default class TabManager extends UIComponent { 12 | 13 | /////////////////////////////////////////////////////////////////// 14 | // 15 | // 16 | /////////////////////////////////////////////////////////////////// 17 | constructor (container, opts = {}) { 18 | 19 | super() 20 | 21 | this.tabsHeaderId = this.guid() 22 | this.containerId = this.guid() 23 | this.class = this.guid() 24 | this.nbTabs = 0 25 | 26 | var html = ` 27 |
28 | 30 |
31 | ` 32 | 33 | $(container).append(html) 34 | 35 | if (opts.allowDrag) { 36 | 37 | this.drake = dragula( 38 | [$(`#${this.tabsHeaderId}`)[0]], 39 | {removeOnSpill: false}) 40 | 41 | var drakeEvents = [ 42 | 'drag', 'dragend', 'drop', 'cancel', 'remove' 43 | ] 44 | 45 | drakeEvents.forEach((event) => { 46 | 47 | this.drake.on(event, () => { 48 | 49 | this.emit('drake.' + event, arguments) 50 | }) 51 | }) 52 | } 53 | } 54 | 55 | /////////////////////////////////////////////////////////////////// 56 | // 57 | // 58 | /////////////////////////////////////////////////////////////////// 59 | addTab(tabInfo) { 60 | 61 | this.nbTabs ++ 62 | 63 | var tabHeaderLinkId = this.guid() 64 | var tabHeaderId = this.guid() 65 | 66 | var tabId = this.guid() 67 | 68 | var tabHtml = ` 69 |
  • 70 | 71 | 74 | 75 |
    • 76 | ` 77 | 78 | $('#' + this.tabsHeaderId).append(tabHtml) 79 | 80 | var nbTabs = this.nbTabs 81 | 82 | $(`#${this.tabsHeaderId} > li`).each(function(idx){ 83 | 84 | $(this).css({ 85 | width: `calc(${99/nbTabs}% - 2px)`, 86 | left: `calc(${idx * (99/nbTabs)}% + 2px)` 87 | }) 88 | }) 89 | 90 | var containerHtml = ` 91 | 92 |
    93 | ${tabInfo.html} 94 |
    95 | ` 96 | 97 | $('#' + this.containerId).append(containerHtml) 98 | 99 | if(tabInfo.active) 100 | this.setActiveTab(tabId) 101 | 102 | $('#' + tabHeaderLinkId).click((e)=>{ 103 | 104 | var id = $(e.target).attr('tabId') 105 | 106 | this.setActiveTab(id) 107 | }) 108 | 109 | return tabId 110 | } 111 | 112 | /////////////////////////////////////////////////////////////////// 113 | // 114 | // 115 | /////////////////////////////////////////////////////////////////// 116 | setActiveTab(tabId) { 117 | 118 | var _this = this 119 | 120 | $(`.c${this.class} .tab-link`).each((idx, element)=>{ 121 | 122 | var id = $(element).attr('tabId') 123 | 124 | if(id != tabId) { 125 | 126 | $(element).removeClass('active') 127 | $('#' + id).css('display', 'none') 128 | 129 | _this.emit('tab.visible', { 130 | id: id, 131 | name: $(element).text() 132 | }) 133 | } 134 | else{ 135 | 136 | $(element).addClass('active') 137 | $('#' + id).css('display', 'block') 138 | } 139 | }) 140 | } 141 | 142 | /////////////////////////////////////////////////////////////////// 143 | // 144 | // 145 | /////////////////////////////////////////////////////////////////// 146 | clear() { 147 | 148 | $(`#${this.tabsHeaderId} > li`).remove() 149 | $(`#${this.containerId} > div`).remove() 150 | 151 | this.nbTabs = 0 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /src/components/TabManager/TabManager.scss: -------------------------------------------------------------------------------- 1 | .tabs { 2 | user-select: none; 3 | overflow:hidden; 4 | height: 100%; 5 | clear:both; 6 | } 7 | 8 | .tabs .headers { 9 | list-style-type:none; 10 | position:relative; 11 | bottom: -1px; 12 | width: 100%; 13 | z-index: 0; 14 | padding: 0; 15 | margin: 0; 16 | margin-bottom: 30px; 17 | margin-left: 3px; 18 | } 19 | 20 | .tabs > div { 21 | clear: both; 22 | border:1px solid #CCC; 23 | padding:5px; 24 | font-family:verdana; 25 | font-size:13px; 26 | background-color: #E8E8E8; 27 | display:none; 28 | height: calc(100% - 32px); 29 | border-radius: 5px; 30 | overflow: hidden; 31 | position: relative; 32 | z-index: 1; 33 | border: 1px solid #aeaeae; 34 | } 35 | 36 | .tabs .headers li { 37 | margin-right: 2px; 38 | height: 20px; 39 | float:left; 40 | } 41 | 42 | .tab-link, .tab-link:hover { 43 | cursor: pointer; 44 | display:block; 45 | padding:5px 5px; 46 | background-color: #E8E8E8; 47 | color: rgb(71, 72, 72); 48 | text-decoration: none; 49 | margin: 0; 50 | border-top: 1px solid #a5a5a5; 51 | border-left: 1px solid #a5a5a5; 52 | border-right: 1px solid #a5a5a5; 53 | font:13px/18px verdana,arial,sans-serif; 54 | border-bottom:1px solid #EEE; 55 | border-top-left-radius: 5px; 56 | border-top-right-radius: 5px; 57 | overflow-x: hidden; 58 | } 59 | 60 | .tabs a label { 61 | font-weight: normal; 62 | white-space: nowrap; 63 | overflow-x: hidden; 64 | cursor: pointer; 65 | } 66 | 67 | .tabs a.active { 68 | background-color: #fdfdfd; 69 | border-bottom:1px solid #E8E8E8; 70 | color: rgb(71, 72, 72); 71 | text-decoration: none; 72 | } 73 | -------------------------------------------------------------------------------- /src/components/TabManager/index.js: -------------------------------------------------------------------------------- 1 | import TabManager from './TabManager' 2 | 3 | export default TabManager 4 | -------------------------------------------------------------------------------- /src/components/ToggleButton/ToggleButton.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////// 2 | // Toggle Button 3 | // 4 | ///////////////////////////////////////////////////////////// 5 | import UIComponent from 'UIComponent' 6 | 7 | export default class ToggleButton extends UIComponent { 8 | 9 | ///////////////////////////////////////////////////////////// 10 | // 11 | // 12 | ///////////////////////////////////////////////////////////// 13 | constructor (container, opts) { 14 | 15 | super() 16 | 17 | this.states = opts.states 18 | 19 | this.btnId = this.guid() 20 | 21 | this.stateIdx = 0 22 | 23 | var html = ` 24 | 31 | ` 32 | 33 | $(container).append(html); 34 | 35 | $('#' + this.btnId).click((e)=>{ 36 | 37 | $('#' + this.btnId + ' span').removeClass( 38 | this.states[this.stateIdx].className 39 | ); 40 | 41 | this.emit('btn.toggled', { 42 | state: this.states[this.stateIdx] 43 | }); 44 | 45 | ++this.stateIdx; 46 | 47 | this.stateIdx %= this.states.length; 48 | 49 | $('#' + this.btnId + ' span').addClass( 50 | this.states[this.stateIdx].className 51 | ); 52 | 53 | $('#' + this.btnId + ' label').text( 54 | this.states[this.stateIdx].name); 55 | }); 56 | } 57 | 58 | ///////////////////////////////////////////////////////// 59 | // 60 | // 61 | ///////////////////////////////////////////////////////// 62 | setState(stateIdx){ 63 | 64 | $('#' + this.btnId + ' span').removeClass( 65 | this.states[this.stateIdx].className 66 | ) 67 | 68 | this.stateIdx = stateIdx; 69 | 70 | $('#' + this.btnId + ' span').addClass( 71 | this.states[this.stateIdx].className 72 | ) 73 | 74 | $('#' + this.btnId + ' label').text( 75 | this.states[this.stateIdx].name) 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/components/ToggleButton/index.js: -------------------------------------------------------------------------------- 1 | import ToggleButton from './ToggleButton' 2 | 3 | export default ToggleButton 4 | -------------------------------------------------------------------------------- /src/components/ToolPanelBase/index.js: -------------------------------------------------------------------------------- 1 | import ToolPanelBase from './ToolPanelBase' 2 | 3 | export default ToolPanelBase 4 | -------------------------------------------------------------------------------- /src/components/ToolPanelModal/ToolPanelModal.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////////// 2 | // ToolPanelModal 3 | // by Philippe Leefsma, July 2016 4 | // 5 | ///////////////////////////////////////////////////////////////////// 6 | import ToolPanelBase from 'ToolPanelBase/ToolPanelBase' 7 | import './ToolPanelModal.scss' 8 | 9 | export default class ToolPanelModal extends ToolPanelBase { 10 | 11 | constructor (container, options = {}) { 12 | 13 | super(container, options.title || '', { 14 | closable: true, 15 | movable: false, 16 | shadow: true 17 | }) 18 | 19 | this.options = Object.assign({}, { 20 | showCancel: true, 21 | showOK: true 22 | }, options) 23 | 24 | $(this.container).addClass('tool-panel-modal') 25 | 26 | if(options.height) { 27 | 28 | $(this.container).height(options.height) 29 | } 30 | 31 | if(options.width) { 32 | 33 | $(this.container).width(options.width) 34 | } 35 | 36 | $(window).resize(() => { 37 | 38 | var h = $(this.container).height() 39 | var w = $(this.container).width() 40 | 41 | $(this.container).css({ 42 | left: `calc(50% - ${w/2}px)`, 43 | top: `calc(40% - ${h/2}px)` 44 | }) 45 | }) 46 | 47 | $('#' + this.btnCancelId).css({ 48 | 49 | display: this.options.showCancel ? 'inline-block' : 'none' 50 | }) 51 | 52 | $('#' + this.btnOkId).css({ 53 | 54 | display: this.options.showOK ? 'inline-block' : 'none' 55 | }) 56 | } 57 | 58 | ///////////////////////////////////////////////////////////// 59 | // 60 | // 61 | ///////////////////////////////////////////////////////////// 62 | htmlContent (id) { 63 | 64 | this.btnCancelId = ToolPanelBase.guid() 65 | 66 | this.btnOkId = ToolPanelBase.guid() 67 | 68 | this.bodyId = ToolPanelBase.guid() 69 | 70 | var footer = ` 71 |
    72 |
    73 | 78 | 83 |
    84 |
    85 | ` 86 | 87 | $(this.container).append(footer) 88 | 89 | $('#' + this.btnCancelId).click(() => { 90 | 91 | this.setVisible(false) 92 | }) 93 | 94 | $('#' + this.btnOkId).click(() => { 95 | 96 | this._dialogResult = 'OK' 97 | 98 | this.setVisible(false) 99 | }) 100 | 101 | return ` 102 |
    103 |
    104 |
    105 |
    106 | ` 107 | } 108 | 109 | ///////////////////////////////////////////////////////////// 110 | // 111 | // 112 | ///////////////////////////////////////////////////////////// 113 | bodyContent (bodyContent) { 114 | 115 | $('#' + this.bodyId).append(bodyContent) 116 | } 117 | 118 | ///////////////////////////////////////////////////////////// 119 | // onTitleDoubleClick override 120 | // 121 | ///////////////////////////////////////////////////////////// 122 | onTitleDoubleClick (event) { 123 | 124 | } 125 | 126 | ///////////////////////////////////////////////////////////// 127 | // 128 | // 129 | ///////////////////////////////////////////////////////////// 130 | createBackground () { 131 | 132 | this.backgroundId = ToolPanelBase.guid() 133 | 134 | var html = ` 135 |
    137 |
    138 | ` 139 | 140 | $(html).insertBefore(this.container) 141 | 142 | $('#' + this.backgroundId).click(() => { 143 | 144 | this.setVisible (false) 145 | }) 146 | } 147 | 148 | ///////////////////////////////////////////////////////////// 149 | // setVisible override 150 | // 151 | ///////////////////////////////////////////////////////////// 152 | setVisible (show = false) { 153 | 154 | if (show) { 155 | 156 | var h = $(this.container).height() 157 | var w = $(this.container).width() 158 | 159 | $(this.container).css({ 160 | left: `calc(50% - ${w/2}px)`, 161 | top: `calc(50% - ${h/2}px)` 162 | }) 163 | 164 | this.createBackground() 165 | 166 | } else { 167 | 168 | $('#' + this.backgroundId).remove() 169 | } 170 | 171 | super.setVisible(show) 172 | } 173 | } 174 | 175 | 176 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /src/components/ToolPanelModal/ToolPanelModal.scss: -------------------------------------------------------------------------------- 1 | 2 | .tool-panel-modal { 3 | overflow: visible; 4 | height: 150px; 5 | width: 450px; 6 | resize: none; 7 | z-index: 100; 8 | } 9 | 10 | .tool-panel-modal .dockingPanel, 11 | .tool-panel-modal .dockingPanel:hover { 12 | transition-property: none; 13 | opacity: 1.0; 14 | } 15 | 16 | .tool-panel-modal .dockingPanelTitle { 17 | cursor: auto; 18 | } 19 | 20 | .tool-panel-modal .container { 21 | width: calc(100% - 40px); 22 | padding: 0; 23 | } 24 | 25 | .tool-panel-modal-background { 26 | background-color: black; 27 | position: absolute; 28 | height: 100vh; 29 | width: 100vw; 30 | opacity: 0.5; 31 | z-index: 10; 32 | left: 0px; 33 | top: 0px; 34 | } 35 | 36 | .tool-panel-modal .tool-panel-modal-footer { 37 | border-top: solid 1px #a7a7a7; 38 | position: absolute; 39 | bottom: 0px; 40 | width: 100%; 41 | } 42 | 43 | .tool-panel-modal .tool-panel-modal-footer .btn { 44 | background-color: transparent; 45 | color: #FFFFFF; 46 | } 47 | 48 | .tool-panel-modal .tool-panel-modal-footer .btn:hover { 49 | color:#E2580B 50 | } -------------------------------------------------------------------------------- /src/components/ToolPanelModal/index.js: -------------------------------------------------------------------------------- 1 | import ToolPanelModal from './ToolPanelModal' 2 | 3 | export default ToolPanelModal -------------------------------------------------------------------------------- /src/components/TreeView/TreeView.js: -------------------------------------------------------------------------------- 1 | import EventsEmitter from 'EventsEmitter' 2 | 3 | ///////////////////////////////////////////////////////////////////// 4 | // 5 | // 6 | ///////////////////////////////////////////////////////////////////// 7 | export class BaseTreeDelegate extends 8 | EventsEmitter.Composer (Autodesk.Viewing.UI.TreeDelegate) { 9 | 10 | /////////////////////////////////////////////////////////////////// 11 | // 12 | // 13 | /////////////////////////////////////////////////////////////////// 14 | constructor (container, contextMenu) { 15 | 16 | super() 17 | 18 | this.contextMenu = contextMenu 19 | 20 | this.container = container 21 | 22 | this.clickTimeout = 0 23 | } 24 | 25 | /////////////////////////////////////////////////////////////////// 26 | // 27 | // 28 | /////////////////////////////////////////////////////////////////// 29 | getTreeNodeId (node) { 30 | 31 | return node.id 32 | } 33 | 34 | /////////////////////////////////////////////////////////////////// 35 | // 36 | // 37 | /////////////////////////////////////////////////////////////////// 38 | isTreeNodeGroup (node) { 39 | 40 | return node.group 41 | } 42 | 43 | /////////////////////////////////////////////////////////////////// 44 | // 45 | // 46 | /////////////////////////////////////////////////////////////////// 47 | onTreeNodeIconClick (tree, node, event) { 48 | 49 | clearTimeout(this.clickTimeout) 50 | 51 | this.clickTimeout = setTimeout(() => { 52 | 53 | tree.setCollapsed(node, !tree.isCollapsed(node)) 54 | 55 | this.emit('node.iconClick', node) 56 | 57 | }, 200) 58 | } 59 | 60 | /////////////////////////////////////////////////////////////////// 61 | // 62 | // 63 | /////////////////////////////////////////////////////////////////// 64 | nodeClickSelector (event) { 65 | 66 | const selector = ['HEADER', 'LABEL'] 67 | 68 | return (selector.indexOf(event.target.nodeName) > -1) 69 | } 70 | 71 | /////////////////////////////////////////////////////////////////// 72 | // 73 | // 74 | /////////////////////////////////////////////////////////////////// 75 | onTreeNodeClick (tree, node, event) { 76 | 77 | if (this.nodeClickSelector(event)) { 78 | 79 | clearTimeout(this.clickTimeout) 80 | 81 | this.clickTimeout = setTimeout(() => { 82 | 83 | this.emit('node.click', node) 84 | 85 | tree.setCollapsed(node, !tree.isCollapsed(node)) 86 | 87 | }, 200) 88 | } 89 | } 90 | 91 | /////////////////////////////////////////////////////////////////// 92 | // 93 | // 94 | /////////////////////////////////////////////////////////////////// 95 | onTreeNodeDoubleClick (tree, node, event) { 96 | 97 | if (this.nodeClickSelector(event)) { 98 | 99 | clearTimeout(this.clickTimeout) 100 | 101 | this.emit('node.dblClick', node) 102 | } 103 | } 104 | 105 | /////////////////////////////////////////////////////////////////// 106 | // 107 | // 108 | /////////////////////////////////////////////////////////////////// 109 | onTreeNodeRightClick (tree, node, event) { 110 | 111 | event.stopPropagation() 112 | event.preventDefault() 113 | 114 | if (this.nodeClickSelector(event)) { 115 | 116 | this.contextMenu.show(event, node) 117 | } 118 | } 119 | 120 | /////////////////////////////////////////////////////////////////// 121 | // 122 | // 123 | /////////////////////////////////////////////////////////////////// 124 | getTreeNodeLabel (node) { 125 | 126 | return node.name 127 | } 128 | } 129 | 130 | ///////////////////////////////////////////////////////////////////// 131 | // 132 | // 133 | ///////////////////////////////////////////////////////////////////// 134 | export class TreeNode extends EventsEmitter { 135 | 136 | ///////////////////////////////////////////////////////////// 137 | // 138 | // 139 | ///////////////////////////////////////////////////////////// 140 | constructor (properties) { 141 | 142 | super() 143 | 144 | Object.assign(this, properties) 145 | } 146 | } -------------------------------------------------------------------------------- /src/components/TreeView/index.js: -------------------------------------------------------------------------------- 1 | import { BaseTreeDelegate, TreeNode } from './TreeView' 2 | import TreeView from './TreeView' 3 | 4 | export default TreeView 5 | 6 | module.exports = { 7 | BaseTreeDelegate, 8 | TreeNode 9 | } -------------------------------------------------------------------------------- /src/components/UIComponent/UIComponent.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////// 2 | // 3 | // 4 | ///////////////////////////////////////////////////////////// 5 | import EventsEmitter from 'EventsEmitter'; 6 | 7 | export default class UIComponent extends EventsEmitter { 8 | 9 | /////////////////////////////////////////////////////////////////// 10 | // 11 | // 12 | /////////////////////////////////////////////////////////////////// 13 | constructor () { 14 | 15 | super() 16 | } 17 | 18 | /////////////////////////////////////////////////////////////////// 19 | // 20 | // 21 | /////////////////////////////////////////////////////////////////// 22 | showPayload (uri, target = '_blank') { 23 | 24 | var link = document.createElement('a') 25 | link.target = target 26 | link.href = uri 27 | link.click() 28 | } 29 | 30 | /////////////////////////////////////////////////////////////////// 31 | // 32 | // 33 | /////////////////////////////////////////////////////////////////// 34 | guid (format = 'xxxxxxxxxx') { 35 | 36 | var d = new Date().getTime() 37 | 38 | var guid = format.replace( 39 | /[xy]/g, 40 | function (c) { 41 | var r = (d + Math.random() * 16) % 16 | 0 42 | d = Math.floor(d / 16) 43 | return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16) 44 | }) 45 | 46 | return guid 47 | } 48 | 49 | /////////////////////////////////////////////////////////////////// 50 | // 51 | // 52 | /////////////////////////////////////////////////////////////////// 53 | static guid (format = 'xxxxxxxxxx') { 54 | 55 | var d = new Date().getTime() 56 | 57 | var guid = format.replace( 58 | /[xy]/g, 59 | function (c) { 60 | var r = (d + Math.random() * 16) % 16 | 0 61 | d = Math.floor(d / 16) 62 | return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16) 63 | }) 64 | 65 | return guid 66 | } 67 | } -------------------------------------------------------------------------------- /src/components/UIComponent/index.js: -------------------------------------------------------------------------------- 1 | import UIComponent from './UIComponent' 2 | 3 | export default UIComponent 4 | -------------------------------------------------------------------------------- /src/components/Viewer.Combo/Viewer.Combo.js: -------------------------------------------------------------------------------- 1 | import ViewerToolkit from 'ViewerToolkit' 2 | 3 | class ViewerCombo { 4 | 5 | constructor (options = {}) { 6 | 7 | this._controls = options.controls.map((control) => { 8 | 9 | 10 | }) 11 | } 12 | 13 | this._txControl = ViewerToolkit.createButton( 14 | 'toolbar-translate', 15 | 'fa fa-arrows-alt', 16 | 'Translate Tool', () => { 17 | 18 | var txTool = this.translateTool.getName() 19 | var rxTool = this.rotateTool.getName() 20 | 21 | if (this.translateTool.active) { 22 | 23 | this._viewer.toolController.deactivateTool(txTool) 24 | this._txControl.container.classList.remove('active') 25 | this._comboCtrl.container.classList.remove('active') 26 | 27 | } else { 28 | 29 | this._viewer.toolController.activateTool(txTool) 30 | this._txControl.container.classList.add('active') 31 | 32 | this._viewer.toolController.deactivateTool(rxTool) 33 | this._rxControl.container.classList.remove('active') 34 | 35 | this._comboCtrl.container.classList.add('active') 36 | } 37 | }) 38 | 39 | this._rxControl = ViewerToolkit.createButton( 40 | 'toolbar-rotate', 41 | 'fa fa-refresh', 42 | 'Rotate Tool', () => { 43 | 44 | var txTool = this.translateTool.getName() 45 | var rxTool = this.rotateTool.getName() 46 | 47 | if (this.rotateTool.active) { 48 | 49 | this._viewer.toolController.deactivateTool(rxTool) 50 | this._rxControl.container.classList.remove('active') 51 | this._comboCtrl.container.classList.remove('active') 52 | 53 | } else { 54 | 55 | this._viewer.toolController.activateTool(rxTool) 56 | this._rxControl.container.classList.add('active') 57 | 58 | this._viewer.toolController.deactivateTool(txTool) 59 | this._txControl.container.classList.remove('active') 60 | 61 | this._comboCtrl.container.classList.add('active') 62 | } 63 | }) 64 | 65 | this.parentControl = this._options.parentControl 66 | 67 | if (!this.parentControl) { 68 | 69 | var viewerToolbar = this._viewer.getToolbar(true) 70 | 71 | this.parentControl = new Autodesk.Viewing.UI.ControlGroup( 72 | 'transform') 73 | 74 | viewerToolbar.addControl(this.parentControl) 75 | } 76 | 77 | this._comboCtrl = new Autodesk.Viewing.UI.ComboButton( 78 | 'transform-combo') 79 | 80 | this._comboCtrl.setToolTip('Transform Tools') 81 | 82 | this._comboCtrl.icon.style.fontSize = '24px' 83 | this._comboCtrl.icon.style.transform = 'rotateY(180Deg)' 84 | 85 | this._comboCtrl.icon.className = 86 | 'glyphicon glyphicon-wrench' 87 | 88 | this._comboCtrl.addControl(this._txControl) 89 | this._comboCtrl.addControl(this._rxControl) 90 | 91 | var openCombo = this._comboCtrl.onClick 92 | 93 | this._comboCtrl.onClick = (e) => { 94 | 95 | if(this._comboCtrl.container.classList.contains('active')) { 96 | 97 | this._txControl.container.classList.remove('active') 98 | this._rxControl.container.classList.remove('active') 99 | 100 | this._comboCtrl.container.classList.remove('active') 101 | 102 | var txTool = this.translateTool.getName() 103 | var rxTool = this.rotateTool.getName() 104 | 105 | this._viewer.toolController.deactivateTool(txTool) 106 | this._viewer.toolController.deactivateTool(rxTool) 107 | 108 | } else { 109 | 110 | openCombo() 111 | } 112 | } 113 | 114 | this.parentControl.addControl(this._comboCtrl) 115 | 116 | console.log('Viewing.Extension.Transform loaded') 117 | 118 | return true 119 | } 120 | 121 | export default ViewerCombo 122 | -------------------------------------------------------------------------------- /src/components/Viewer.Combo/Viewer.Combo.scss: -------------------------------------------------------------------------------- 1 | .viewer { 2 | 3 | } 4 | 5 | .tooltip { 6 | position: relative; 7 | display: inline-block; 8 | border-bottom: 1px dotted black; 9 | } 10 | 11 | .tooltip .tooltiptext { 12 | visibility: hidden; 13 | width: 120px; 14 | background-color: black; 15 | color: #fff; 16 | text-align: center; 17 | border-radius: 6px; 18 | padding: 5px 0; 19 | position: absolute; 20 | z-index: 100; 21 | } 22 | 23 | .tooltip:hover .tooltiptext { 24 | visibility: visible; 25 | } 26 | 27 | #forge-rcdb-toolbar{ 28 | background-color: #f5c70a; 29 | border: 1px solid black; 30 | color: black; 31 | } 32 | 33 | .dockingPanel { 34 | text-align: left; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/Viewer.Combo/index.js: -------------------------------------------------------------------------------- 1 | import ViewerCombo from './Viewer.Combo' 2 | import './Viewer.Combo.scss' 3 | 4 | export default ViewerCombo 5 | -------------------------------------------------------------------------------- /src/components/Viewer.ExtensionBase/Viewer.ExtensionBase.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////////////////////////// 2 | // 3 | // 4 | // 5 | /////////////////////////////////////////////////////////////////////////////// 6 | import EventsEmitter from 'EventsEmitter' 7 | 8 | export default class ExtensionBase extends 9 | EventsEmitter.Composer (Autodesk.Viewing.Extension) { 10 | 11 | ///////////////////////////////////////////////////////////////// 12 | // Class constructor 13 | // 14 | ///////////////////////////////////////////////////////////////// 15 | constructor (viewer, options = {}) { 16 | 17 | super(viewer, options) 18 | 19 | this._viewer = viewer 20 | 21 | this._options = options 22 | 23 | this._events = {} 24 | } 25 | 26 | ///////////////////////////////////////////////////////////////// 27 | // Extension Id 28 | // 29 | ///////////////////////////////////////////////////////////////// 30 | static get ExtensionId() { 31 | 32 | return 'Viewing.Extension.Base' 33 | } 34 | 35 | /////////////////////////////////////////////////////////////////// 36 | // 37 | // 38 | /////////////////////////////////////////////////////////////////// 39 | static guid(format = 'xxxxxxxxxx') { 40 | 41 | var d = new Date().getTime() 42 | 43 | var guid = format.replace( 44 | /[xy]/g, 45 | function (c) { 46 | var r = (d + Math.random() * 16) % 16 | 0 47 | d = Math.floor(d / 16) 48 | return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16) 49 | }) 50 | 51 | return guid 52 | } 53 | 54 | ///////////////////////////////////////////////////////////////// 55 | // Load callback 56 | // 57 | ///////////////////////////////////////////////////////////////// 58 | load() { 59 | 60 | return true 61 | } 62 | 63 | ///////////////////////////////////////////////////////////////// 64 | // Unload callback 65 | // 66 | ///////////////////////////////////////////////////////////////// 67 | unload() { 68 | 69 | return true 70 | } 71 | } 72 | 73 | -------------------------------------------------------------------------------- /src/components/Viewer.ExtensionBase/index.js: -------------------------------------------------------------------------------- 1 | import ViewerExtensionBase from './Viewer.ExtensionBase' 2 | 3 | export default ViewerExtensionBase 4 | -------------------------------------------------------------------------------- /src/components/Viewer.PointTracker/Viewer.PointTracker.js: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////////////////////// 2 | // PointTracker: Tracks a 3D point in world coordinates 3 | // and returns 2D screen coordinates 4 | // By Philippe Leefsma, April 2016 5 | ///////////////////////////////////////////////////////////////// 6 | import EventsEmitter from 'EventsEmitter' 7 | 8 | export default class PointTracker extends EventsEmitter { 9 | 10 | constructor(viewer) { 11 | 12 | super(); 13 | 14 | this._viewer = viewer; 15 | 16 | this.worldPoint = new THREE.Vector3(); 17 | 18 | //used to bind 'this' inside event hander 19 | this.cameraChangedHandler = (event)=> 20 | this.onCameraChanged(event); 21 | } 22 | 23 | ///////////////////////////////////////////////////////////////// 24 | // Set screenpoint 25 | // 26 | ///////////////////////////////////////////////////////////////// 27 | setScreenPoint (screenPoint) { 28 | 29 | var n = this.normalize(screenPoint); 30 | 31 | this.worldPoint = this._viewer.utilities.getHitPoint( 32 | n.x, n.y); 33 | } 34 | 35 | ///////////////////////////////////////////////////////////////// 36 | // Get ScreenPoint 37 | // 38 | ///////////////////////////////////////////////////////////////// 39 | getScreenPoint() { 40 | 41 | var screenPoint = this.worldToScreen( 42 | this.worldPoint, 43 | this._viewer.navigation.getCamera()); 44 | 45 | return screenPoint; 46 | } 47 | 48 | ///////////////////////////////////////////////////////////////// 49 | // Set worldpoint 50 | // 51 | ///////////////////////////////////////////////////////////////// 52 | setWorldPoint(worldPoint) { 53 | 54 | this.worldPoint = worldPoint; 55 | 56 | var screenPoint = this.worldToScreen( 57 | this.worldPoint, 58 | this._viewer.navigation.getCamera()); 59 | 60 | this.emit('modified', screenPoint); 61 | } 62 | 63 | ///////////////////////////////////////////////////////////////// 64 | // Get World Point 65 | // 66 | ///////////////////////////////////////////////////////////////// 67 | getWorldPoint() { 68 | 69 | return this.worldPoint; 70 | } 71 | 72 | ///////////////////////////////////////////////////////////////// 73 | // Activate tracking 74 | // 75 | ///////////////////////////////////////////////////////////////// 76 | activate() { 77 | 78 | this._viewer.addEventListener( 79 | Autodesk.Viewing.CAMERA_CHANGE_EVENT, 80 | this.cameraChangedHandler); 81 | } 82 | 83 | ///////////////////////////////////////////////////////////////// 84 | // Deactivate tracking 85 | // 86 | ///////////////////////////////////////////////////////////////// 87 | deactivate() { 88 | 89 | this._viewer.removeEventListener( 90 | Autodesk.Viewing.CAMERA_CHANGE_EVENT, 91 | this.cameraChangedHandler); 92 | } 93 | 94 | ///////////////////////////////////////////////////////////////// 95 | // camera change callback 96 | // 97 | ///////////////////////////////////////////////////////////////// 98 | onCameraChanged(event) { 99 | 100 | var screenPoint = this.worldToScreen( 101 | this.worldPoint, 102 | this._viewer.navigation.getCamera()); 103 | 104 | this.emit('modified', screenPoint); 105 | } 106 | 107 | /////////////////////////////////////////////////////////////////////////// 108 | // Normalize screen coordinates 109 | // 110 | /////////////////////////////////////////////////////////////////////////// 111 | normalize (screenPoint) { 112 | 113 | var viewport = this._viewer.navigation.getScreenViewport() 114 | 115 | return { 116 | 117 | x: (screenPoint.x - viewport.left) / viewport.width, 118 | y: (screenPoint.y - viewport.top) / viewport.height 119 | } 120 | } 121 | 122 | /////////////////////////////////////////////////////////////////////////// 123 | // world -> screen coords conversion 124 | // 125 | /////////////////////////////////////////////////////////////////////////// 126 | worldToScreen (worldPoint, camera) { 127 | 128 | var p = new THREE.Vector4() 129 | 130 | p.x = worldPoint.x 131 | p.y = worldPoint.y 132 | p.z = worldPoint.z 133 | p.w = 1 134 | 135 | p.applyMatrix4(camera.matrixWorldInverse) 136 | p.applyMatrix4(camera.projectionMatrix) 137 | 138 | // Don't want to mirror values with negative z (behind camera) 139 | // if camera is inside the bounding box, 140 | // better to throw markers to the screen sides. 141 | if (p.w > 0) { 142 | 143 | p.x /= p.w; 144 | p.y /= p.w; 145 | p.z /= p.w; 146 | } 147 | 148 | // This one is multiplying by width/2 and height/2, 149 | // and offsetting by canvas location 150 | var point = this._viewer.impl.viewportToClient(p.x, p.y); 151 | 152 | // snap to the center of the pixel 153 | point.x = Math.floor(point.x) + 0.5; 154 | point.y = Math.floor(point.y) + 0.5; 155 | 156 | return point; 157 | } 158 | } -------------------------------------------------------------------------------- /src/components/Viewer.PointTracker/index.js: -------------------------------------------------------------------------------- 1 | import ViewerPointTracker from './Viewer.PointTracker' 2 | 3 | export default ViewerPointTracker 4 | -------------------------------------------------------------------------------- /src/components/Viewer.Toolkit/index.js: -------------------------------------------------------------------------------- 1 | import ViewerToolkit from './Viewer.Toolkit' 2 | 3 | export default ViewerToolkit 4 | -------------------------------------------------------------------------------- /src/components/Viewer.Tooltip/Viewer.Tooltip.scss: -------------------------------------------------------------------------------- 1 | .tooltip-marker { 2 | pointer-events: none; 3 | position: absolute; 4 | display: none; 5 | height: 50px; 6 | width: 50px; 7 | } 8 | 9 | .tooltip-marker svg { 10 | pointer-events: none; 11 | height: 50px; 12 | width: 50px; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Viewer.Tooltip/index.js: -------------------------------------------------------------------------------- 1 | import ViewerTooltip from './Viewer.Tooltip' 2 | import './Viewer.Tooltip.scss' 3 | 4 | export default ViewerTooltip 5 | -------------------------------------------------------------------------------- /thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk-Forge/library-javascript-viewer-extensions/a9e16793e37b5782c26c23c902b256fe14234d96/thumbnail.png -------------------------------------------------------------------------------- /webpack/webpack.config.development.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var path = require('path') 3 | 4 | module.exports = { 5 | 6 | devtool: 'eval-source-map', 7 | 8 | entry: { 9 | 10 | 'Autodesk.ADN.Viewing.Extension.BasicES2015': 11 | './src/Autodesk.ADN.Viewing.Extension.BasicES2015/Autodesk.ADN.Viewing.Extension.BasicES2015.js', 12 | 13 | 'Viewing.Extension.StateManager': 14 | './src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.js', 15 | 16 | 'Viewing.Extension.Markup2D': 17 | './src/Viewing.Extension.Markup2D/Viewing.Extension.Markup2D.js', 18 | 19 | 'Autodesk.ADN.Viewing.Extension.ModelLoader': 20 | './src/Autodesk.ADN.Viewing.Extension.ModelLoader/Autodesk.ADN.Viewing.Extension.ModelLoader.js', 21 | 22 | 'Viewing.Extension.ModelTransformer': 23 | './src/Viewing.Extension.ModelTransformer/Viewing.Extension.ModelTransformer.js', 24 | 25 | 'Autodesk.ADN.Viewing.Extension.PropertyPanel': 26 | './src/Autodesk.ADN.Viewing.Extension.PropertyPanel/Autodesk.ADN.Viewing.Extension.PropertyPanel.js', 27 | 28 | 'Viewing.Extension.CustomTree': 29 | './src/Viewing.Extension.CustomTree/Viewing.Extension.CustomTree.js', 30 | 31 | '_Viewing.Extension.CSSTV': 32 | './src/Viewing.Extension.CSSTV/Viewing.Extension.CSSTV.js', 33 | 34 | '_Viewing.Extension.ControlSelector': 35 | './src/Viewing.Extension.ControlSelector/Viewing.Extension.ControlSelector.js', 36 | 37 | '_Viewing.Extension.ExtensionManager': 38 | './src/Viewing.Extension.ExtensionManager/Viewing.Extension.ExtensionManager.js', 39 | 40 | 'Viewing.Extension.Particle': 41 | './src/Viewing.Extension.Particle/Viewing.Extension.Particle.js', 42 | 43 | '_Viewing.Extension.Particle.LHC': 44 | './src/Viewing.Extension.Particle/Viewing.Extension.Particle.LHC.js', 45 | 46 | 'Viewing.Extension.PointCloud': 47 | './src/Viewing.Extension.PointCloud/Viewing.Extension.PointCloud.js', 48 | 49 | 'Autodesk.ADN.Viewing.Extension.React': 50 | './src/Autodesk.ADN.Viewing.Extension.React/Autodesk.ADN.Viewing.Extension.React.js', 51 | 52 | 'Viewing.Extension.CustomModelStructure': 53 | './src/Viewing.Extension.CustomModelStructure/Viewing.Extension.CustomModelStructure.js', 54 | 55 | 'Viewing.Extension.Transform': 56 | './src/Viewing.Extension.Transform/Viewing.Extension.Transform.js', 57 | 58 | 'Viewing.Extension.InViewerSearchWrapper': 59 | './src/Viewing.Extension.InViewerSearch/Viewing.Extension.InViewerSearch.js', 60 | 61 | 'Viewing.Extension.Markup3D': 62 | './src/Viewing.Extension.Markup3D/Viewing.Extension.Markup3D.js', 63 | 64 | 'Viewing.Extension.VisualReport': 65 | './src/Viewing.Extension.VisualReport/Viewing.Extension.VisualReport.js' 66 | }, 67 | 68 | output: { 69 | path: path.join(__dirname, '../dist'), 70 | filename: "[name]/[name].js", 71 | libraryTarget: "umd", 72 | library: "[name]", 73 | watch: true 74 | }, 75 | 76 | plugins: [ 77 | 78 | new webpack.optimize.UglifyJsPlugin({ 79 | compress: false, 80 | minimize: false, 81 | mangle: false 82 | }), 83 | new webpack.optimize.OccurenceOrderPlugin(), 84 | new webpack.NoErrorsPlugin(), 85 | 86 | new webpack.DefinePlugin({ 87 | 'process.env.NODE_ENV': '"development"' 88 | }), 89 | 90 | new webpack.ProvidePlugin({ 91 | 'window.jQuery': 'jquery', 92 | jQuery: 'jquery', 93 | _: 'lodash', 94 | $: 'jquery' 95 | }) 96 | ], 97 | 98 | resolve: { 99 | extensions: ['', '.js', '.jsx', '.json', '.ts'], 100 | root: [ 101 | path.resolve('./src/components'), 102 | path.resolve('./src/Viewing.Extension.Particle'), 103 | path.resolve('./src/Viewing.Extension.Transform') 104 | ] 105 | }, 106 | 107 | module: { 108 | 109 | loaders: [ 110 | { 111 | test: /\.json$/, 112 | loader: 'json-loader' 113 | }, 114 | { 115 | test: /\.tsx?$/, 116 | loader: 'ts-loader', 117 | exclude: /node_modules/ 118 | }, 119 | { 120 | test: /\.jsx?$/, 121 | exclude: /node_modules/, 122 | loader: 'babel', 123 | query: { 124 | cacheDirectory: true, 125 | presets: ['es2015', 'stage-0', 'react'], 126 | plugins: ['transform-runtime'] 127 | } 128 | }, 129 | { test: /\.scss$/, loaders: ["style", "css", "sass"] }, 130 | { test: /\.less$/, loader: "style!css!less" }, 131 | { test: /\.css$/, loader: "style-loader!css-loader" }, 132 | { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 133 | { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 134 | { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 135 | { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }, 136 | { 137 | test: /\.(jpe?g|png|gif|svg)$/i, 138 | loaders: [ 139 | 'file?hash=sha512&digest=hex&name=[hash].[ext]', 140 | 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 141 | ] 142 | } 143 | ] 144 | } 145 | } --------------------------------------------------------------------------------