├── .parcelrc
├── images
    ├── logo.png
    ├── logo_small.png
    └── screenshot-3dbag.png
├── public
    ├── logo.png
    ├── favicon.ico
    ├── css
    │   └── main.css
    ├── index.html
    ├── logoWhite.svg
    └── logoBlack.svg
├── src
    ├── lib-components
    │   ├── index.js
    │   ├── common
    │   │   ├── GeometryBadge.vue
    │   │   └── ExpandableBadge.vue
    │   ├── CityObjectsTree.vue
    │   ├── CityObjectsTreeItem.vue
    │   ├── CityObjectCard.vue
    │   ├── CityObjectInfo.vue
    │   └── ThreeJsViewer.vue
    ├── components
    │   ├── Versioning
    │   │   ├── BranchSelector.vue
    │   │   ├── VersionList.vue
    │   │   ├── VersionViewer.vue
    │   │   └── VersionListItem.vue
    │   ├── NinjaSidebar.vue
    │   ├── SidebarItem.vue
    │   └── ColorEditor.vue
    ├── main.js
    ├── helpers
    │   ├── icons.js
    │   └── cjseq.js
    └── App.vue
├── .eslintrc.json
├── .gitignore
├── .github
    └── workflows
    │   ├── deploy.yml
    │   └── release.yml
├── README.md
├── package.json
└── LICENSE


/.parcelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["@parcel/config-default", "parcel-config-vue2"]
3 | }


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityjson/ninja/HEAD/images/logo.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityjson/ninja/HEAD/public/logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityjson/ninja/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/images/logo_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityjson/ninja/HEAD/images/logo_small.png


--------------------------------------------------------------------------------
/images/screenshot-3dbag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cityjson/ninja/HEAD/images/screenshot-3dbag.png


--------------------------------------------------------------------------------
/public/css/main.css:
--------------------------------------------------------------------------------
 1 | html{
 2 |   margin: 0px;
 3 |   width: 100%;
 4 |   height: 100%;
 5 |   padding: 0px;
 6 |   overflow-y: hidden; /*important as otherwise size is somehow scrollable which is not desired */
 7 | }
 8 | 
 9 | body{
10 |   margin: 0px;
11 |   padding: 0px;
12 |   height: 100%;
13 | }
14 | 
15 | #main_content {
16 |     height: calc(100% - 56px);
17 | }  


--------------------------------------------------------------------------------
/src/lib-components/index.js:
--------------------------------------------------------------------------------
1 | export { default as CityObjectCard } from './CityObjectCard.vue';
2 | export { default as CityObjectInfo } from './CityObjectInfo.vue';
3 | export { default as CityObjectsTree } from './CityObjectsTree.vue';
4 | export { default as CityObjectsTreeItem } from './CityObjectsTreeItem.vue';
5 | export { default as ThreeJsViewer } from './ThreeJsViewer.vue';
6 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"root": true,
 3 | 	"parserOptions": {
 4 |         "ecmaVersion": 2018
 5 | 	},
 6 | 
 7 | 	"extends": [
 8 | 		"mdcs",
 9 | 		"plugin:vue/recommended"
10 | 	],
11 | 
12 | 	"rules": {
13 | 		"no-unused-vars": [ 1, { "args": "none" } ],
14 | 		"vue/html-self-closing": ["error", {
15 | 			"html": {
16 | 				"normal": "never",
17 | 				"component": "never"
18 | 			}
19 | 		}]
20 | 	}
21 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | #Electron-builder output
24 | /dist_electron
25 | .cache/
26 | 
27 | .parcel-cache/


--------------------------------------------------------------------------------
/src/lib-components/common/GeometryBadge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <small>
 4 |       <a
 5 |         v-if="geometry.type != 'GeometryInstance'"
 6 |         href="#"
 7 |         class="badge badge-pill bg-transparent border border-primary text-primary mr-1"
 8 |         :title="geometry.type"
 9 |       >
10 |         LoD{{ geometry.lod }}
11 |       </a>
12 |       <span
13 |         v-else
14 |         class="badge badge-pill bg-transparent border border-secondary text-secondary mr-1"
15 |       >
16 |         <i class="fas fa-external-link-alt"></i>
17 |       </span>
18 |     </small>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 | 	name: 'GeometryBadge',
25 | 	props: {
26 | 		geometry: Object
27 | 	}
28 | };
29 | </script>
30 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" style="height:100%">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
 7 |     <link rel="icon" href="./favicon.ico">
 8 |     <link rel="stylesheet" href="./css/main.css">
 9 |     <title>CityJSON Ninja</title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but CityJSON Viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |     <script type="module" src="../src/main.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to GitHub Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   build-and-deploy:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - name: Checkout code
14 |         uses: actions/checkout@v4
15 |         
16 |       - name: Set up Node.js
17 |         uses: actions/setup-node@v4
18 |         with:
19 |           node-version: '18'
20 |         
21 |       - name: Install dependencies
22 |         run: npm install
23 |         
24 |       - name: Build the project
25 |         run: npm run build
26 | 
27 |       - name: Deploy to GitHub Pages
28 |         uses: peaceiris/actions-gh-pages@v4
29 |         with:
30 |           github_token: ${{ secrets.GITHUB_TOKEN }}
31 |           publish_dir: ./dist
32 |           cname: ninja.cityjson.org
33 | 


--------------------------------------------------------------------------------
/src/components/Versioning/BranchSelector.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="form-inline input-group my-2 my-lg-0">
 3 |     <div class="input-group-prepend">
 4 |       <label
 5 |         class="input-group-text"
 6 |         for="branchSelect"
 7 |       ><i class="fas fa-code-branch mr-1"></i> Branch</label>
 8 |     </div>
 9 |     <select
10 |       id="branchSelect"
11 |       class="custom-select"
12 |       @change="$emit('input', $event.target.value)"
13 |     >
14 |       <option
15 |         v-for="(version, branch) in versioning.branches"
16 |         :key="branch"
17 |       >
18 |         {{ branch }}
19 |       </option>
20 |     </select>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 | 	name: 'BranchSelector',
27 | 	props: {
28 | 		value: String,
29 | 		versioning: Object
30 | 	}
31 | };
32 | </script>
33 | 


--------------------------------------------------------------------------------
/src/components/NinjaSidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-12 h-100 text-white">
 3 |     <sidebar-item
 4 |       icon="cubes"
 5 |       text="Objects"
 6 |       @click="$emit('input', 'objects')"
 7 |     ></sidebar-item>
 8 |     <sidebar-item
 9 |       v-show="with_versions"
10 |       icon="code-branch"
11 |       text="Versions"
12 |       @click="$emit('input', 'versions')"
13 |     ></sidebar-item>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import SidebarItem from './SidebarItem.vue';
19 | 
20 | export default {
21 | 	name: "NinjaSidebar",
22 | 	components: {
23 | 		SidebarItem
24 | 	},
25 | 	props: {
26 | 		value: {
27 | 			type: String,
28 | 			default: 'objects'
29 | 		},
30 | 		with_versions: {
31 | 			type: Boolean,
32 | 			default: false
33 | 		}
34 | 	},
35 | 	data: function () {
36 | 
37 | 		return {};
38 | 
39 | 	}
40 | };
41 | </script>
42 | 


--------------------------------------------------------------------------------
/src/components/SidebarItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     href="#"
 4 |     class="sidebar-item"
 5 |     @click="optionClicked()"
 6 |   >
 7 |     <i
 8 |       class="fas sidebar-icon"
 9 |       :class="icon_class"
10 |     ></i>
11 |     <span>
12 |       {{ text }}
13 |     </span>
14 |   </a>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 | 	name: "SidebarItem",
20 | 	props: {
21 | 		icon: String,
22 | 		text: String
23 | 	},
24 | 	computed: {
25 | 		icon_class: function () {
26 | 
27 | 			return "fa-" + this.icon;
28 | 
29 | 		}
30 | 	},
31 | 	methods: {
32 | 		optionClicked() {
33 | 
34 | 			this.$emit( 'click' );
35 | 
36 | 		}
37 | 	}
38 | };
39 | </script>
40 | 
41 | <style scoped>
42 | .sidebar-item {
43 |     display: block;
44 |     padding: 6px 5px 6px 10px;
45 |     text-decoration: none;
46 |     color: #ccc;
47 | }
48 | .sidebar-item:hover {
49 |     color: #fff;
50 | }
51 | .sidebar-icon {
52 |     width: 20px;
53 | }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/lib-components/CityObjectsTree.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="list-unstyled overflow-auto px-3">
 3 |     <CityObjectsTreeItem
 4 |       v-for="(cityobject, coid) in cityobjects"
 5 |       v-show="matches(coid, cityobject)"
 6 |       :key="coid"
 7 |       :citymodel="citymodel"
 8 |       :item="cityobject"
 9 |       :cityobject_id="coid"
10 |       :selected_objid="selected_objid"
11 |       @object_clicked="$emit('object_clicked', $event)"
12 |     ></CityObjectsTreeItem>
13 |   </ul>
14 | </template>
15 | 
16 | <script>
17 | import CityObjectsTreeItem from './CityObjectsTreeItem.vue';
18 | 
19 | export default {
20 | 	name: 'CityObjectsTree',
21 | 	components: {
22 | 		CityObjectsTreeItem
23 | 	},
24 | 	props: {
25 | 		cityobjects: Object,
26 | 		selected_objid: String,
27 | 		citymodel: Object,
28 | 		matches: {
29 | 			type: Function,
30 | 			default: function () {
31 | 
32 | 				return true;
33 | 
34 | 			}
35 | 		}
36 | 	},
37 | 	// computed: {
38 | 	//   citymodel: function() {
39 | 	//     return this.$parent.citymodel;
40 | 	//   }
41 | 	// }
42 | };
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/components/ColorEditor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="form-group row">
 3 |     <div class="input-group input-group-sm col">
 4 |       <div class="input-group-prepend">
 5 |         <span
 6 |           class="input-group-text"
 7 |         >{{ name }}</span>
 8 |       </div>
 9 |       <input
10 |         ref="colorValue"
11 |         type="color"
12 |         class="form-control"
13 |         :aria-describedby="name"
14 |         :value="color"
15 |         @input="updateColor"
16 |       >
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 | 	name: 'ColorEditor',
24 | 	props: {
25 | 		value: {
26 | 			type: Number,
27 | 			default: 0xffffff
28 | 		},
29 | 		name: {
30 | 			type: String,
31 | 			default: "Color"
32 | 		}
33 | 	},
34 | 	computed: {
35 | 		color() {
36 | 
37 | 			return '#' + this.value.toString( 16 ).padStart( 6, '0' );
38 | 
39 | 		}
40 | 	},
41 | 	methods: {
42 | 		updateColor() {
43 | 
44 | 			var new_color = parseInt( this.$refs.colorValue.value.substring( 1 ), 16 );
45 | 			this.$emit( 'input', new_color );
46 | 
47 | 		}
48 | 	}
49 | };
50 | </script>
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ![ninja logo](images/logo_small.png) ninja
 2 | 
 3 | ![](images/screenshot-3dbag.png)
 4 | 
 5 | *ninja* is a web viewer for [CityJSON](http://www.cityjson.org) files. It supports most features as described by the CityJSON specification.
 6 | 
 7 | *ninja* stands for "**n**inja **i**s **n**ot **j**ust **a**zul" to tease [azul](https://github.com/tudelft3d/azul), the best macOS CityJSON viewer!
 8 | 
 9 | # Use
10 | 
11 | ## Public version
12 | 
13 | You can run `ninja` without installation by visiting [ninja.cityjson.org](https://ninja.cityjson.org).
14 | 
15 | ## Installation
16 | 
17 | Install all dependencies:
18 | 
19 | ```
20 | npm install
21 | ```
22 | 
23 | ### Compile and run for development
24 | 
25 | ```
26 | npm start
27 | ```
28 | 
29 | You can visit the local version at: [http://localhost:1234/](http://localhost:1234).
30 | 
31 | ### Compile and run for production
32 | 
33 | ```
34 | npm run build
35 | ```
36 | 
37 | # Dependencies
38 | 
39 | *ninja* uses [cityjson-threejs-loader](https://github.com/cityjson/cityjson-threejs-loader) to handle things.
40 | 
41 | Other frameworks used:
42 | - [three.js](https://threejs.org/)
43 | - [Vue.js](https://vuejs.org/)
44 | - [Bootstrap](https://getbootstrap.com/)
45 | - [Parcel.js](https://parceljs.org/)


--------------------------------------------------------------------------------
/src/lib-components/common/ExpandableBadge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="badge badge-pill mr-2"
 4 |     :class="bootstrapColorClass"
 5 |   >
 6 |     <a
 7 |       href="#"
 8 |       class="text-decoration-none"
 9 |       :class="bootstrapTextClass"
10 |       @click="$emit('click')"
11 |     ><slot></slot> <i
12 |       class="fas ml-1"
13 |       :class="[ expanded ? 'fa-chevron-up' : 'fa-chevron-down' ]"
14 |     ></i></a>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 | 	name: 'ExpandableBadge',
21 | 	props: {
22 | 		expanded: Boolean,
23 | 		color: {
24 | 			type: String,
25 | 			default: 'danger'
26 | 		},
27 | 		outline: {
28 | 			type: Boolean,
29 | 			default: true,
30 | 		}
31 | 	},
32 | 	computed: {
33 | 		bootstrapColorClass: function () {
34 | 
35 | 			if ( this.outline && ! this.expanded ) {
36 | 
37 | 				return [ 'bg-white', 'border', 'border-' + this.color ];
38 | 
39 | 			}
40 | 
41 | 			return [ 'border', 'border-' + this.color, 'badge-' + this.color ];
42 | 
43 | 		},
44 | 		bootstrapTextClass: function () {
45 | 
46 | 			if ( this.outline && ! this.expanded ) {
47 | 
48 | 				return 'text-' + this.color;
49 | 
50 | 			}
51 | 
52 | 			return 'text-white';
53 | 
54 | 		}
55 | 	}
56 | };
57 | </script>
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@cityjson/ninja",
 3 |   "version": "0.9.4",
 4 |   "scripts": {
 5 |     "start": "parcel public/index.html",
 6 |     "build": "parcel build public/index.html --public-url . --no-cache"
 7 |   },
 8 |   "dependencies": {
 9 |     "@cityjson/cjseq": "^0.0.1",
10 |     "@fortawesome/fontawesome-free": "^5.15.4",
11 |     "cityjson-threejs-loader": "github:cityjson/cityjson-threejs-loader#develop",
12 |     "bootstrap": "^4.6.1",
13 |     "earcut": "^2.2.2",
14 |     "jquery": "^3.4.1",
15 |     "lodash": "^4.17.15",
16 |     "moment": "^2.24.0",
17 |     "three": "^0.165.0",
18 |     "vue": "^2.6.11",
19 |     "vue2-filters": "^0.12.0"
20 |   },
21 |   "devDependencies": {
22 |     "@parcel/transformer-vue": "^2.12.0",
23 |     "@vue/component-compiler-utils": "^3.3.0",
24 |     "autoprefixer": "^10.4.4",
25 |     "babel-eslint": "^10.1.0",
26 |     "buffer": "^6.0.3",
27 |     "concurrently": "^6.5.1",
28 |     "eslint": "^7.24.0",
29 |     "eslint-config-mdcs": "^5.0.0",
30 |     "eslint-plugin-vue": "^7.9.0",
31 |     "parcel": "^2.12.0",
32 |     "parcel-config-vue2": "^0.1.3",
33 |     "parcel-transformer-vue2": "^0.1.7",
34 |     "postcss": "^8.1.0",
35 |     "static-server": "^2.2.1",
36 |     "vue-hot-reload-api": "^2.3.4",
37 |     "vue-template-compiler": "^2.6.11"
38 |   },
39 |   "@parcel/resolver-default": {
40 |     "packageExports": true
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/Versioning/VersionList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="list-group py-md-2">
 3 |     <version-list-item
 4 |       v-for="(item, hash) in orderedVersions"
 5 |       :key="hash"
 6 |       :version="item"
 7 |       :vid="hash"
 8 |       :active="isActive(hash)"
 9 |       @select="$emit('update:active_version', hash)"
10 |     ></version-list-item>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import VersionListItem from './VersionListItem.vue';
16 | 
17 | export default {
18 | 	name: 'VersionList',
19 | 	components: {
20 | 		VersionListItem
21 | 	},
22 | 	props: {
23 | 		versioning: Object,
24 | 		active_version: String,
25 | 		active_branch: String
26 | 	},
27 | 	computed: {
28 | 		orderedVersions: function () {
29 | 
30 | 			var result = {};
31 | 
32 | 			var current_vid = this.versioning.branches[ this.active_branch ];
33 | 			result[ current_vid ] = this.versioning.versions[ current_vid ];
34 | 
35 | 			var new_parents = [];
36 | 
37 | 			if ( "parents" in result[ current_vid ] ) {
38 | 
39 | 				new_parents = new_parents.concat( result[ current_vid ].parents );
40 | 
41 | 			}
42 | 
43 | 			while ( new_parents.length > 0 ) {
44 | 
45 | 				current_vid = new_parents.pop();
46 | 
47 | 				result[ current_vid ] = this.versioning.versions[ current_vid ];
48 | 
49 | 				if ( "parents" in result[ current_vid ] ) {
50 | 
51 | 					new_parents = result[ current_vid ].parents.concat( new_parents );
52 | 
53 | 				}
54 | 
55 | 			}
56 | 
57 | 			return result;
58 | 
59 | 		},
60 | 	},
61 | 	methods: {
62 | 		isActive( vid ) {
63 | 
64 | 			return this.active_version == vid;
65 | 
66 | 		},
67 | 	}
68 | };
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/components/Versioning/VersionViewer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="d-flex justify-content-between align-items-center">
 4 |       <h3>{{ version.message }}</h3>
 5 |       <a
 6 |         href="#"
 7 |         class="btn btn-sm btn-danger"
 8 |         @click="select(null)"
 9 |       ><i class="fas fa-times mr-1"></i> Close</a>
10 |     </div>
11 |     <hr class="my-2">
12 |     <p class="text-muted">
13 |       Version <a
14 |         href="#"
15 |         class="text-monospace"
16 |         data-toggle="tooltip"
17 |         data-placement="top"
18 |       ><small>{{ vid | truncate(6) }}</small></a> authored {{ version.date | moment_from }} by <span class="font-weight-bold">{{ version.author }}</span>
19 |     </p>
20 |     <p
21 |       v-show="'parents' in version && version.parents.length"
22 |       class="my-2"
23 |     >
24 |       <small>Parents:
25 |         <a
26 |           v-for="parent in version.parents"
27 |           :key="parent"
28 |           href="#"
29 |           class="card-link text-monospace"
30 |           @click="select(parent)"
31 |         >{{ parent | truncate(7) }}</a>
32 |       </small>
33 |     </p>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | import $ from 'jquery';
39 | import moment from 'moment';
40 | 
41 | export default {
42 | 	name: 'VersionViewer',
43 | 	filters: {
44 | 		moment_from: function ( date ) {
45 | 
46 | 			return moment( date ).fromNow();
47 | 
48 | 		}
49 | 	},
50 | 	props: {
51 | 		version: Object,
52 | 		vid: String
53 | 	},
54 | 	beforeUpdate() {
55 | 
56 | 		$( '[data-toggle="tooltip"]' ).tooltip( 'dispose' );
57 | 		$( '[data-toggle="tooltip"]' ).tooltip( { title: this.vid } );
58 | 
59 | 	},
60 | 	methods: {
61 | 		select( vid ) {
62 | 
63 | 			this.$root.$emit( 'select_version', vid );
64 | 
65 | 		}
66 | 	}
67 | };
68 | </script>
69 | 


--------------------------------------------------------------------------------
/src/components/Versioning/VersionListItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     class="list-group-item list-group-item-action flex-column align-items-start"
 4 |     :class="{ 'text-white' : active, active : active }"
 5 |     @click="$emit('select')"
 6 |   >
 7 |     <div class="d-flex justify-content-between">
 8 |       <div class="col-8 pl-0">
 9 |         <h6 class="mb-1">{{ version.message }} <span
10 |           class="badge"
11 |           :class="[ active ? 'badge-light' : 'badge-success' ]"
12 |         >{{ Object.keys(version.objects).length }} objects</span></h6>
13 |         <small :class="[ active ? 'text-white' : 'text-muted' ]"><b>{{ version.author }}</b> committed {{ version.date | moment_from }}.</small>
14 |       </div>
15 |       <div class="col-4 pr-0 align-self-center">
16 |         <div class="input-group input-group-sm justify-content-end">
17 |           <span
18 |             id="basic-addon1"
19 |             class="input-group-text text-monospace"
20 |           ><small>{{ vid | truncate(7) }}</small></span>
21 |           <div class="input-group-append">
22 |             <button
23 |               class="btn"
24 |               :class="[ active ? 'btn-outline-light' : 'btn-outline-primary' ]"
25 |               type="button"
26 |               @click="$emit('download')"
27 |             ><i class="fas fa-download"></i></button>
28 |           </div>
29 |         </div>
30 |       </div>
31 |     </div>
32 |   </a>
33 | </template>
34 | 
35 | <script>
36 | import moment from 'moment';
37 | 
38 | export default {
39 | 	name: 'VersionListItem',
40 | 	filters: {
41 | 		moment_from: function ( date ) {
42 | 
43 | 			return moment( date ).fromNow();
44 | 
45 | 		}
46 | 	},
47 | 	props: {
48 | 		version: Object,
49 | 		vid: String,
50 | 		active: {
51 | 			type: Boolean,
52 | 			default: false
53 | 		}
54 | 	},
55 | 	methods: {
56 | 		download_this() {
57 | 
58 | 			this.$emit( 'download' );
59 | 
60 | 		},
61 | 		select_this() {
62 | 
63 | 			this.$emit( 'select' );
64 | 
65 | 		},
66 | 		moment: function () {
67 | 
68 | 			return moment();
69 | 
70 | 		}
71 | 	}
72 | };
73 | </script>
74 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import Vue2Filters from 'vue2-filters';
 4 | 
 5 | import '@fortawesome/fontawesome-free/css/all.css';
 6 | 
 7 | import 'bootstrap/dist/css/bootstrap.css';
 8 | import 'bootstrap';
 9 | 
10 | // Vue.config.productionTip = false;
11 | 
12 | Vue.use( Vue2Filters );
13 | 
14 | new Vue( {
15 | 	render: h => h( App ),
16 | } ).$mount( '#app' );
17 | 
18 | if ( ! Element.prototype.scrollIntoViewIfNeeded ) {
19 | 
20 | 	Element.prototype.scrollIntoViewIfNeeded = function ( centerIfNeeded ) {
21 | 
22 | 		centerIfNeeded = arguments.length === 0 ? true : !! centerIfNeeded;
23 | 
24 | 		const parent = getParent( this );
25 | 		const parentComputedStyle = window.getComputedStyle( parent, null );
26 | 		const parentBorderTopWidth = parseInt( parentComputedStyle.getPropertyValue( 'border-top-width' ) );
27 | 		const parentBorderLeftWidth = parseInt( parentComputedStyle.getPropertyValue( 'border-left-width' ) );
28 | 		const overTop = this.offsetTop - parent.offsetTop < parent.scrollTop;
29 | 		const overBottom = ( this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth ) > ( parent.scrollTop + parent.clientHeight );
30 | 		const overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft;
31 | 		const overRight = ( this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth ) > ( parent.scrollLeft + parent.clientWidth );
32 | 		const alignWithTop = overTop && ! overBottom;
33 | 
34 | 		if ( ( overTop || overBottom ) && centerIfNeeded ) {
35 | 
36 | 			parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
37 | 
38 | 		}
39 | 
40 | 		if ( ( overLeft || overRight ) && centerIfNeeded ) {
41 | 
42 | 			parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
43 | 
44 | 		}
45 | 
46 | 		if ( ( overTop || overBottom || overLeft || overRight ) && ! centerIfNeeded ) {
47 | 
48 | 			this.scrollIntoView( alignWithTop );
49 | 
50 | 		}
51 | 
52 | 	};
53 | 
54 | }
55 | 
56 | function getParent( el ) {
57 | 
58 | 	var parent = el.parentNode;
59 | 
60 | 	if ( parent === document ) {
61 | 
62 | 		return document;
63 | 
64 | 	} else if ( parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth ) {
65 | 
66 | 		return parent;
67 | 
68 | 	} else {
69 | 
70 | 		return getParent( parent );
71 | 
72 | 	}
73 | 
74 | }
75 | 


--------------------------------------------------------------------------------
/src/helpers/icons.js:
--------------------------------------------------------------------------------
 1 | export function getIconStyle( cityobj, with_colour = true ) {
 2 | 
 3 | 	var type_icons = {
 4 | 		"Building": [ 'fas', 'fa-building', 'text-danger', 'mr-1' ],
 5 | 		"BuildingPart": [ 'far', 'fa-building', 'text-danger', 'mr-1' ],
 6 | 		"BuildingInstallation": [ 'fas', 'fa-city', 'text-danger', 'mr-1' ],
 7 | 		"BuildingConstructiveElement": [ 'fas', 'fa-city', 'text-danger', 'mr-1' ],
 8 | 		"BuildingFurniture": [ 'fas', 'fa-couch', 'text-danger', 'mr-1' ],
 9 | 		"BuildingStorey": [ 'fas', 'fa-store', 'text-danger', 'mr-1' ],
10 | 		"BuildingRoom": [ 'fas', 'fa-door-open', 'text-danger', 'mr-1' ],
11 | 		"BuildingUnit": [ 'far', 'fa-building', 'text-danger', 'mr-1' ],
12 | 		"Bridge": [ 'fas', 'fa-archway', 'text-dark', 'mr-1' ],
13 | 		"BridgePart": [ 'fas', 'fa-archway', 'text-secondary', 'mr-1' ],
14 | 		"BridgeInstallation": [ 'fas', 'fa-archway', 'text-primary', 'mr-1' ],
15 | 		"BridgeConstructionElement": [ 'fas', 'fa-archway', 'text-warning', 'mr-1' ],
16 | 		"BridgeRoom": [ 'fas', 'fa-door-open', 'text-warning', 'mr-1' ],
17 | 		"BridgeFurniture": [ 'far', 'fa-couch', 'text-warning', 'mr-1' ],
18 | 		"CityObjectGroup": [ 'fas', 'fa-cubes', 'text-dark', 'mr-1' ],
19 | 		"CityFurniture": [ 'fas', 'fa-store-alt', 'text-danger', 'mr-1' ],
20 | 		"GenericCityObject": [ 'fas', 'fa-cube', 'text-danger', 'mr-1' ],
21 | 		"LandUse": [ 'fas', 'fa-chart-area', 'text-success', 'mr-1' ],
22 | 		"PlantCover": [ 'fas', 'fa-leaf', 'text-success', 'mr-1' ],
23 | 		"Railway": [ 'fas', 'fa-train', 'text-primary', 'mr-1' ],
24 | 		"Road": [ 'fas', 'fa-road', 'text-dark', 'mr-1' ],
25 | 		"SolitaryVegetationObject": [ 'fas', 'fa-tree', 'text-success', 'mr-1' ],
26 | 		"TINRelief": [ 'fas', 'fa-mountain', 'text-success', 'mr-1' ],
27 | 		"TransportSquare": [ 'fas', 'fa-circle-notch', 'text-dark', 'mr-1' ],
28 | 		"Tunnel": [ 'fas', 'fa-dot-circle', 'text-dark', 'mr-1' ],
29 | 		"TunnelPart": [ 'fas', 'fa-dot-circle', 'text-dark', 'mr-1' ],
30 | 		"TunnelInstallation": [ 'fas', 'fa-dot-circle', 'text-dark', 'mr-1' ],
31 | 		"TunnelFurniture": [ 'far', 'fa-couch', 'text-dark', 'mr-1' ],
32 | 		"WaterBody": [ 'fas', 'fa-water', 'text-primary', 'mr-1' ]
33 | 	};
34 | 
35 | 	if ( cityobj.type in type_icons ) {
36 | 
37 | 		var icon_style = type_icons[ cityobj.type ];
38 | 		if ( ! with_colour ) {
39 | 
40 | 			icon_style.splice( 2, 1 );
41 | 
42 | 		}
43 | 
44 | 		return icon_style;
45 | 
46 | 	} else if ( cityobj.type.startsWith( '+' ) ) {
47 | 
48 | 		return [ 'fas', 'fa-plus', 'text-primary', 'mr-1' ];
49 | 
50 | 	} else {
51 | 
52 | 		return [ 'fas', 'fa-question', 'text-secondary', 'mr-1' ];
53 | 
54 | 	}
55 | 
56 | }
57 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |     inputs:
 6 |       version:
 7 |         description: "Version type"
 8 |         required: true
 9 |         default: "patch"
10 |         type: choice
11 |         options:
12 |           - patch
13 |           - minor
14 |           - major
15 | 
16 | jobs:
17 |   release:
18 |     runs-on: ubuntu-latest
19 |     outputs:
20 |       version: ${{ steps.version.outputs.version }}
21 |       tag: ${{ steps.version.outputs.tag }}
22 |     steps:
23 |       - name: Checkout code
24 |         uses: actions/checkout@v4
25 |         with:
26 |           token: ${{ secrets.GITHUB_TOKEN }}
27 | 
28 |       - name: Setup Node.js
29 |         uses: actions/setup-node@v4
30 |         with:
31 |           node-version: "22.x"
32 |           cache: "npm"
33 | 
34 |       - name: Install dependencies
35 |         run: npm ci
36 | 
37 |       - name: Build project
38 |         run: npm run build
39 | 
40 |       - name: Configure Git
41 |         run: |
42 |           git config user.name "github-actions[bot]"
43 |           git config user.email "actions@github.com"
44 | 
45 |       - name: Bump version
46 |         id: version
47 |         run: |
48 |           NEW_VERSION=$(npm version ${{ github.event.inputs.version }} --no-git-tag-version)
49 |           echo "version=${NEW_VERSION}" >> $GITHUB_OUTPUT
50 |           echo "tag=v${NEW_VERSION#v}" >> $GITHUB_OUTPUT
51 |           git add package.json package-lock.json
52 |           git commit -m "Bump version to ${NEW_VERSION}"
53 |           git push
54 | 
55 |       - name: Create GitHub Release
56 |         uses: actions/create-release@v1
57 |         env:
58 |           GITHUB_TOKEN: ${{ secrets.GA_TOKEN }}
59 |         with:
60 |           tag_name: ${{ steps.version.outputs.tag }}
61 |           release_name: Release ${{ steps.version.outputs.tag }}
62 |           draft: false
63 |           prerelease: false
64 | 
65 |   publish:
66 |     runs-on: ubuntu-latest
67 |     needs: release
68 |     steps:
69 |       - name: Checkout code
70 |         uses: actions/checkout@v4
71 |         with:
72 |           ref: main
73 | 
74 |       - name: Setup Node.js
75 |         uses: actions/setup-node@v4
76 |         with:
77 |           node-version: "22.x"
78 |           registry-url: "https://registry.npmjs.org"
79 |           cache: "npm"
80 | 
81 |       - name: Install dependencies
82 |         run: npm ci
83 | 
84 |       - name: Build project
85 |         run: npm run build
86 | 
87 |       - name: Publish to npm
88 |         run: npm publish --access public
89 |         env:
90 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
91 | 


--------------------------------------------------------------------------------
/public/logoWhite.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg width="100%" height="100%" viewBox="0 0 566 427" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
 4 |     <g>
 5 |         <g transform="matrix(0.505466,-0.421967,0.640852,0.767664,-36.6097,125.636)">
 6 |             <path d="M457.681,225.745C457.681,219.271 449.697,214.014 439.864,214.014L112.577,214.014C102.744,214.014 94.761,219.271 94.761,225.745L94.761,249.208C94.761,255.682 102.744,260.939 112.577,260.939L439.864,260.939C449.697,260.939 457.681,255.682 457.681,249.208L457.681,225.745Z" style="fill:white;stroke:white;stroke-width:1.18px;"/>
 7 |         </g>
 8 |         <g transform="matrix(1,0,0,1,-53.9136,33.3464)">
 9 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908" style="fill:white;stroke:white;stroke-width:1px;"/>
10 |         </g>
11 |         <g transform="matrix(1.01134,0,0,1.01415,-224.491,171.198)">
12 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908" style="fill:white;stroke:white;stroke-width:0.99px;"/>
13 |         </g>
14 |         <g transform="matrix(1.08347,0.183521,-0.169367,0.99991,-189.998,192.919)">
15 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908" style="fill:white;stroke:white;stroke-width:0.95px;"/>
16 |         </g>
17 |         <g transform="matrix(0.985956,0.167004,-0.167004,0.985956,39.6172,-53.8108)">
18 |             <path d="M399.957,123.231C426.706,123.488 436.364,158.296 417.676,166.428C393.753,176.838 343.427,221.719 318.729,257.046C294.032,292.373 269.491,378.392 269.491,378.392C270.439,379.521 222.136,375.075 221.679,369.967C219.307,343.506 253.62,260.716 283.333,219.593C312.867,178.718 375.878,122.999 399.957,123.231Z" style="fill:white;stroke:white;stroke-width:1px;"/>
19 |         </g>
20 |         <g transform="matrix(11.1695,-5.19003,5.19003,11.1695,-519.973,-25.6313)">
21 |             <g transform="matrix(0.70156,0.509017,-0.364221,0.501994,26.373,-7.91932)">
22 |                 <path d="M43.292,30.965L41.398,29.384L38.344,28.862L39.602,32.404L40.524,33.777L42.355,33.668L43.292,30.965Z" style="fill:white;stroke:white;stroke-width:0.11px;"/>
23 |             </g>
24 |             <g transform="matrix(0.70156,0.509017,0.364221,-0.501994,1.84741,25.8649)">
25 |                 <path d="M43.292,30.965L41.398,29.384L38.344,28.862L39.602,32.404L40.524,33.777L42.355,33.668L43.292,30.965Z" style="fill:white;stroke:white;stroke-width:0.11px;"/>
26 |             </g>
27 |         </g>
28 |         <g transform="matrix(0.990334,0.138706,-0.138706,0.990334,17.8133,-24.2925)">
29 |             <path d="M204.271,33.435C249.651,33.435 286.494,70.278 286.494,115.658C286.494,161.038 249.651,197.881 204.271,197.881C158.891,197.881 122.048,161.038 122.048,115.658C122.048,70.278 158.891,33.435 204.271,33.435ZM230.275,69.807C227.358,66.822 222.566,66.768 219.581,69.685L158.91,128.987C155.925,131.904 155.87,136.696 158.787,139.681L169.359,150.497C172.277,153.482 177.069,153.536 180.053,150.619L240.725,91.317C243.71,88.4 243.765,83.608 240.847,80.623L230.275,69.807Z" style="fill:white;stroke:white;stroke-width:1px;"/>
30 |         </g>
31 |         <g transform="matrix(6.01888,-5.13631,5.13631,6.01888,-146.927,203.323)">
32 |             <g transform="matrix(0.0595426,-9.66757e-18,1.18127e-17,0.126381,15.389,12.4586)">
33 |                 <path d="M362.135,180.617L496.607,180.617" style="fill:none;stroke:white;stroke-width:5.12px;"/>
34 |             </g>
35 |             <g transform="matrix(1.56444,0,0,1.56444,-12.5191,-36.3035)">
36 |                 <circle cx="31.849" cy="45.803" r="0.744" style="fill:rgb(43,94,191);stroke:black;stroke-width:0.02px;"/>
37 |             </g>
38 |             <g transform="matrix(1.56444,0,0,1.56444,-8.67469,-36.3035)">
39 |                 <circle cx="31.849" cy="45.803" r="0.744" style="fill:rgb(43,94,191);stroke:black;stroke-width:0.02px;"/>
40 |             </g>
41 |             <g transform="matrix(1.56444,0,0,1.56444,-4.83029,-36.3035)">
42 |                 <circle cx="31.849" cy="45.803" r="0.744" style="fill:rgb(43,94,191);stroke:black;stroke-width:0.02px;"/>
43 |             </g>
44 |         </g>
45 |     </g>
46 | </svg>
47 | 


--------------------------------------------------------------------------------
/src/lib-components/CityObjectsTreeItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <li :id="cityobject_id">
  3 |     <div class="d-flex flex-inline align-items-center">
  4 |       <div
  5 |         class="d-flex justify-content-center"
  6 |         style="width: 20px"
  7 |       >
  8 |         <a
  9 |           v-if="isFolder"
 10 |           href="#"
 11 |           class="mr-1"
 12 |           @click="toggle"
 13 |         >
 14 |           <i
 15 |             class="fas text-dark text-decoration-none"
 16 |             :class="[ isOpen ? 'fa-chevron-down' : 'fa-chevron-right' ]"
 17 |           ></i>
 18 |         </a>
 19 |       </div>
 20 |       <div class="object-icon d-flex justify-content-center">
 21 |         <a
 22 |           id="objicon"
 23 |           href="#"
 24 |           :title="item.type"
 25 |         ><i :class="iconType"></i></a>
 26 |       </div>
 27 |       <a
 28 |         href="#"
 29 |         class="text-dark text-decoration-none mr-1"
 30 |         @click="select_this"
 31 |       ><span :class="{ 'text-primary' : selected }">{{ cityobject_id }}</span></a>
 32 |       <geometry-badge
 33 |         v-for="(geom, i) in item.geometry"
 34 |         :key="i"
 35 |         :geometry="geom"
 36 |       ></geometry-badge>
 37 |     </div>
 38 |     <ul
 39 |       v-show="isOpen"
 40 |       v-if="isFolder"
 41 |       class="list-unstyled ml-4 mb-0"
 42 |     >
 43 |       <CityObjectsTreeItem
 44 |         v-for="child_id in allChildren"
 45 |         :key="child_id"
 46 |         class="item"
 47 |         :citymodel="citymodel"
 48 |         :item="getObject(child_id)"
 49 |         :cityobject_id="child_id"
 50 |         :selected_objid="selected_objid"
 51 |         @object_clicked="$emit('object_clicked', $event)"
 52 |       ></CityObjectsTreeItem>
 53 |     </ul>
 54 |   </li>
 55 | </template>
 56 | 
 57 | <script>
 58 | import _ from 'lodash';
 59 | import { getIconStyle } from '../helpers/icons';
 60 | 
 61 | import GeometryBadge from './common/GeometryBadge.vue';
 62 | 
 63 | export default {
 64 | 	name: 'CityObjectsTreeItem',
 65 | 	components: {
 66 | 		GeometryBadge
 67 | 	},
 68 | 	props: {
 69 | 		item: Object,
 70 | 		cityobject_id: String,
 71 | 		selected_objid: String,
 72 | 		citymodel: Object
 73 | 	},
 74 | 	data: function () {
 75 | 
 76 | 		return {
 77 | 			isOpen: false
 78 | 		};
 79 | 
 80 | 	},
 81 | 	computed: {
 82 | 		selected: function () {
 83 | 
 84 | 			return this.cityobject_id == this.selected_objid;
 85 | 
 86 | 		},
 87 | 		singleGeometries: function () {
 88 | 
 89 | 			return _.pickBy( this.item.geometry, function ( geometry ) {
 90 | 
 91 | 				return geometry.lod;
 92 | 
 93 | 			} );
 94 | 
 95 | 		},
 96 | 		geometryInstances: function () {
 97 | 
 98 | 			return _.pickBy( this.item.geometry, function ( geom ) {
 99 | 
100 | 				return geom.type == "GeometryInstance";
101 | 
102 | 			} );
103 | 
104 | 		},
105 | 		isFolder: function () {
106 | 
107 | 			return ( this.item.children && this.item.children.length )
108 | 				   || ( this.item.members && this.item.members.length );
109 | 
110 | 		},
111 | 		allChildren: function () {
112 | 
113 | 			if ( this.item.type == "CityObjectGroup" ) {
114 | 
115 | 				return this.item.members;
116 | 
117 | 			}
118 | 
119 | 			return this.item.children;
120 | 
121 | 		},
122 | 		iconType: function () {
123 | 
124 | 			return getIconStyle( this.item );
125 | 
126 | 		}
127 | 	},
128 | 	methods: {
129 | 		select_this() {
130 | 
131 | 			this.$emit( 'object_clicked', this.cityobject_id );
132 | 
133 | 		},
134 | 		toggle: function () {
135 | 
136 | 			if ( this.isFolder ) {
137 | 
138 | 				this.isOpen = ! this.isOpen;
139 | 
140 | 			}
141 | 
142 | 		},
143 | 		makeFolder: function () {
144 | 
145 | 			if ( ! this.isFolder ) {
146 | 
147 | 				this.$emit( 'make-folder', this.item );
148 | 				this.isOpen = true;
149 | 
150 | 			}
151 | 
152 | 		},
153 | 		getObject( objid ) {
154 | 
155 | 			return this.citymodel.CityObjects[ objid ];
156 | 
157 | 		},
158 | 		getGeometryIcon( geom_type ) {
159 | 
160 | 			var geometry_icons = {
161 | 				"MultiSurface": [ 'fas', 'fa-map' ],
162 | 				"Solid": [ 'fas', 'fa-cube' ],
163 | 				"MultiSolid": [ 'fas', 'fa-cubes' ]
164 | 			};
165 | 
166 | 			if ( geom_type in geometry_icons ) {
167 | 
168 | 				return geometry_icons[ geom_type ];
169 | 
170 | 			} else {
171 | 
172 | 				return [ 'fas', 'fa-question' ];
173 | 
174 | 			}
175 | 
176 | 		}
177 | 	}
178 | };
179 | </script>
180 | 
181 | <style>
182 | .object-icon {
183 |   width: 24px;
184 | }
185 | </style>
186 | 


--------------------------------------------------------------------------------
/src/lib-components/CityObjectCard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     :id="cityobject_id"
  4 |     class="card mb-2"
  5 |     :class="{ 'border-primary' : selected }"
  6 |   >
  7 |     <div
  8 |       class="card-body"
  9 |       style="overflow: auto; max-height: 600px"
 10 |     >
 11 |       <CityObjectInfo
 12 |         :citymodel="citymodel"
 13 |         :cityobject="cityobject"
 14 |         :cityobject_id="cityobject_id"
 15 |         :geometry-id="geometryId"
 16 |         :boundary-id="boundaryId"
 17 |         :editable="editable"
 18 |         @input="saveChanges"
 19 |         @close="$emit('close')"
 20 |       ></CityObjectInfo>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import CityObjectInfo from './CityObjectInfo.vue';
 27 | 
 28 | export default {
 29 | 	name: "CityObjectCard",
 30 | 	components: {
 31 | 		CityObjectInfo
 32 | 	},
 33 | 	props: {
 34 | 		citymodel: Object,
 35 | 		cityobject: Object,
 36 | 		cityobject_id: String,
 37 | 		geometryId: {
 38 | 			type: Number,
 39 | 			default: - 1
 40 | 		},
 41 | 		boundaryId: {
 42 | 			type: Number,
 43 | 			default: - 1
 44 | 		},
 45 | 		selected: {
 46 | 			type: Boolean,
 47 | 			default: false
 48 | 		},
 49 | 		expanded: {
 50 | 			type: Number,
 51 | 			default: 0
 52 | 		},
 53 | 		editable: {
 54 | 			type: Boolean,
 55 | 			default: true
 56 | 		}
 57 | 	},
 58 | 	data() {
 59 | 
 60 | 		return {
 61 | 			edit_mode: false,
 62 | 		};
 63 | 
 64 | 	},
 65 | 	computed: {
 66 | 		attributesCount: function () {
 67 | 
 68 | 			return Object.keys( this.cityobject.attributes ).length;
 69 | 
 70 | 		},
 71 | 		hasAttributes: function () {
 72 | 
 73 | 			return "attributes" in this.cityobject && this.attributesCount > 0;
 74 | 
 75 | 		},
 76 | 		hasGeometries: function () {
 77 | 
 78 | 			return this.cityobject.geometry;
 79 | 
 80 | 		},
 81 | 		iconType: function () {
 82 | 
 83 | 			return this.getIconStyle( this.cityobject );
 84 | 
 85 | 		},
 86 | 		jsonString: {
 87 | 			get: function () {
 88 | 
 89 | 				return JSON.stringify( this.cityobject, undefined, 4 );
 90 | 
 91 | 			}
 92 | 		}
 93 | 	},
 94 | 	methods: {
 95 | 		is_mode( mode ) {
 96 | 
 97 | 			return this.expanded == mode;
 98 | 
 99 | 		},
100 | 		select_this() {
101 | 
102 | 			this.$emit( 'object_clicked', this.cityobject_id );
103 | 
104 | 		},
105 | 		getObject( objid ) {
106 | 
107 | 			if ( this.citymodel ) {
108 | 
109 | 				return this.citymodel.CityObjects[ objid ];
110 | 
111 | 			} else {
112 | 
113 | 				return {};
114 | 
115 | 			}
116 | 
117 | 		},
118 | 		getIconStyle( cityobj, with_colour = true ) {
119 | 
120 | 			var type_icons = {
121 | 				"Building": [ 'fas', 'fa-building', 'text-danger', 'mr-1' ],
122 | 				"BuildingPart": [ 'far', 'fa-building', 'text-danger', 'mr-1' ],
123 | 				"BuildingInstallation": [ 'fas', 'fa-city', 'text-danger', 'mr-1' ],
124 | 				"Bridge": [ 'fas', 'fa-archway', 'text-dark', 'mr-1' ],
125 | 				"BridgePart": [ 'fas', 'fa-archway', 'text-secondary', 'mr-1' ],
126 | 				"BridgeInstallation": [ 'fas', 'fa-archway', 'text-primary', 'mr-1' ],
127 | 				"BridgeConstructionElement": [ 'fas', 'fa-archway', 'text-warning', 'mr-1' ],
128 | 				"CityObjectGroup": [ 'fas', 'fa-cubes', 'text-dark', 'mr-1' ],
129 | 				"CityFurniture": [ 'fas', 'fa-store-alt', 'text-danger', 'mr-1' ],
130 | 				"GenericCityObject": [ 'fas', 'fa-cube', 'text-danger', 'mr-1' ],
131 | 				"LandUse": [ 'fas', 'fa-chart-area', 'text-success', 'mr-1' ],
132 | 				"PlantCover": [ 'fas', 'fa-leaf', 'text-success', 'mr-1' ],
133 | 				"Railway": [ 'fas', 'fa-train', 'text-primary', 'mr-1' ],
134 | 				"Road": [ 'fas', 'fa-road', 'text-dark', 'mr-1' ],
135 | 				"SolitaryVegetationObject": [ 'fas', 'fa-tree', 'text-success', 'mr-1' ],
136 | 				"TINRelief": [ 'fas', 'fa-mountain', 'text-success', 'mr-1' ],
137 | 				"TransportSquare": [ 'fas', 'fa-circle-notch', 'text-dark', 'mr-1' ],
138 | 				"Tunnel": [ 'fas', 'fa-dot-circle', 'text-dark', 'mr-1' ],
139 | 				"TunnelPart": [ 'fas', 'fa-dot-circle', 'text-dark', 'mr-1' ],
140 | 				"TunnelInstallation": [ 'fas', 'fa-dot-circle', 'text-warning', 'mr-1' ],
141 | 				"WaterBody": [ 'fas', 'fa-water', 'text-primary', 'mr-1' ]
142 | 			};
143 | 
144 | 			if ( cityobj.type in type_icons ) {
145 | 
146 | 				var icon_style = type_icons[ cityobj.type ];
147 | 				if ( ! with_colour ) {
148 | 
149 | 					icon_style.splice( 2, 1 );
150 | 
151 | 				}
152 | 
153 | 				return icon_style;
154 | 
155 | 			} else {
156 | 
157 | 				return [ 'fas', 'fa-question', 'text-secondary', 'mr-1' ];
158 | 
159 | 			}
160 | 
161 | 		},
162 | 		saveChanges( newCityObject ) {
163 | 
164 | 			console.log( newCityObject );
165 | 
166 | 			this.$emit( 'input', newCityObject );
167 | 
168 | 		}
169 | 	}
170 | };
171 | </script>
172 | 


--------------------------------------------------------------------------------
/src/helpers/cjseq.js:
--------------------------------------------------------------------------------
  1 | import init, { cjseqToCj } from '@cityjson/cjseq';
  2 | 
  3 | 
  4 | export class CityJSONSeqUtils {
  5 | 
  6 |   constructor() {
  7 | 
  8 |     this._wasmInitialized = false;
  9 | 
 10 |   }
 11 | 
 12 |   static validateCityJSONSeq(data) {
 13 | 
 14 |     // Split the content into lines and get the first non-empty line
 15 |     const lines = data.split('\n');
 16 |     let firstLine = null;
 17 | 
 18 |     for (const line of lines) {
 19 | 
 20 |       const trimmedLine = line.trim();
 21 |       if (trimmedLine.length > 0) {
 22 | 
 23 |         firstLine = trimmedLine;
 24 |         break;
 25 | 
 26 |       }
 27 | 
 28 |     }
 29 | 
 30 |     if (!firstLine) {
 31 | 
 32 |       this.error_message = "The file appears to be empty!";
 33 |       return false;
 34 | 
 35 |     }
 36 | 
 37 |     try {
 38 | 
 39 |       const firstObject = JSON.parse(firstLine);
 40 | 
 41 |       if (firstObject.type !== "CityJSON") {
 42 | 
 43 |         this.error_message = "This is not a CityJSONSeq file! First line must contain a CityJSON header.";
 44 |         return false;
 45 | 
 46 |       }
 47 | 
 48 |       return true;
 49 | 
 50 |     } catch (error) {
 51 | 
 52 |       this.error_message = "Invalid JSON format in the first line of the file!";
 53 |       return false;
 54 | 
 55 |     }
 56 | 
 57 |   }
 58 | 
 59 | 
 60 |   /**
 61 |  * Convert Map objects to plain JSON objects recursively
 62 |  * @param {*} obj - Object that may contain Maps
 63 |  * @returns {*} Object with Maps converted to plain objects
 64 |  * @private
 65 |  */
 66 |   _convertMapToJson(obj) {
 67 | 
 68 |     if (obj instanceof Map) {
 69 | 
 70 |       const result = {};
 71 |       for (const [key, value] of obj) {
 72 | 
 73 |         result[key] = this._convertMapToJson(value);
 74 | 
 75 |       }
 76 | 
 77 |       return result;
 78 | 
 79 |     } else if (Array.isArray(obj)) {
 80 | 
 81 |       return obj.map(item => this._convertMapToJson(item));
 82 | 
 83 |     } else if (obj !== null && typeof obj === 'object') {
 84 | 
 85 |       const result = {};
 86 |       for (const [key, value] of Object.entries(obj)) {
 87 | 
 88 |         result[key] = this._convertMapToJson(value);
 89 | 
 90 |       }
 91 | 
 92 |       return result;
 93 | 
 94 |     }
 95 | 
 96 |     return obj;
 97 | 
 98 |   }
 99 | 
100 |   /**
101 |    * Initialize WASM module if not already initialized
102 |    * @private
103 |    */
104 |   async _initWasm() {
105 | 
106 |     if (!this._wasmInitialized) {
107 | 
108 |       await init();
109 |       this._wasmInitialized = true;
110 | 
111 |     }
112 | 
113 |   }
114 | 
115 |   /**
116 |    * Load CityJSONSeq data
117 |    * @param {string|Array} data - CityJSONSeq data as string (newline-delimited JSON) or array of parsed objects
118 |    */
119 |   async toCityJSON(data) {
120 | 
121 | 
122 |     // Initialize WASM module
123 |     await this._initWasm();
124 | 
125 |     let parsedLines;
126 | 
127 |     // If data is a string, parse it as newline-delimited JSON
128 |     if (typeof data === 'string') {
129 | 
130 |       parsedLines = this.parseCityJSONSeq(data);
131 | 
132 |     } else if (Array.isArray(data)) {
133 | 
134 |       // If data is already an array of parsed objects, use it directly
135 |       parsedLines = data;
136 | 
137 |     } else {
138 | 
139 |       throw new Error('CityJSONSeq data must be either a string or an array of objects');
140 | 
141 |     }
142 | 
143 |     if (parsedLines.length === 0) {
144 | 
145 |       throw new Error('CityJSONSeq data is empty');
146 | 
147 |     }
148 | 
149 |     // First line should be the base CityJSON metadata
150 |     const baseCityJSON = parsedLines[0];
151 | 
152 |     // Remaining lines are CityJSONFeature objects
153 |     const features = parsedLines.slice(1);
154 | 
155 | 
156 | 
157 |     // Convert CityJSONSeq to CityJSON using the cjseq package
158 |     const rawCityJSONData = cjseqToCj(baseCityJSON, features);
159 | 
160 |     // Convert any Map objects to plain JSON objects
161 |     const cityJSONData = this._convertMapToJson(rawCityJSONData);
162 | 
163 |     return cityJSONData;
164 | 
165 |   }
166 | 
167 |   /**
168 |  * Parse CityJSONSeq string into array of JSON objects
169 |  * @param {string} data - CityJSONSeq data as newline-delimited JSON string
170 |  * @returns {Array} Array of parsed JSON objects
171 |  */
172 |   parseCityJSONSeq(data) {
173 | 
174 |     const lines = data.trim().split('\n');
175 |     const parsedLines = [];
176 | 
177 |     for (let i = 0; i < lines.length; i++) {
178 | 
179 |       const line = lines[i].trim();
180 | 
181 |       // Skip empty lines
182 |       if (line === '') continue;
183 | 
184 |       try {
185 | 
186 |         const parsed = JSON.parse(line);
187 |         parsedLines.push(parsed);
188 | 
189 |       } catch (error) {
190 | 
191 |         throw new Error(`Failed to parse line ${i + 1} of CityJSONSeq: ${error.message}`);
192 | 
193 |       }
194 | 
195 |     }
196 | 
197 |     return parsedLines;
198 | 
199 |   }
200 | 
201 |   /**
202 |    * Load CityJSONSeq from a URL
203 |    * @param {string} url - URL to fetch CityJSONSeq data from
204 |    * @returns {Promise} Promise that resolves when loading is complete
205 |    */
206 |   async loadFromURL(url) {
207 | 
208 |     try {
209 | 
210 |       const response = await fetch(url);
211 | 
212 |       if (!response.ok) {
213 | 
214 |         throw new Error(`Failed to fetch CityJSONSeq from ${url}: ${response.statusText}`);
215 | 
216 |       }
217 | 
218 |       const text = await response.text();
219 |       await this.load(text);
220 | 
221 |     } catch (error) {
222 | 
223 |       throw new Error(`Error loading CityJSONSeq from URL: ${error.message}`);
224 | 
225 |     }
226 | 
227 |   }
228 | 
229 | }
230 | 


--------------------------------------------------------------------------------
/public/logoBlack.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg width="100%" height="100%" viewBox="0 0 566 427" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
 4 |     <g>
 5 |         <g transform="matrix(0.505466,-0.421967,0.640852,0.767664,-36.6097,125.636)">
 6 |             <path d="M457.681,225.745C457.681,219.271 449.697,214.014 439.864,214.014L112.577,214.014C102.744,214.014 94.761,219.271 94.761,225.745L94.761,249.208C94.761,255.682 102.744,260.939 112.577,260.939L439.864,260.939C449.697,260.939 457.681,255.682 457.681,249.208L457.681,225.745Z" style="stroke:white;stroke-width:5.91px;"/>
 7 |         </g>
 8 |         <g transform="matrix(1,0,0,1,-53.9136,33.3464)">
 9 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908" style="stroke:white;stroke-width:5px;"/>
10 |         </g>
11 |         <g transform="matrix(1.01134,0,0,1.01415,-224.491,171.198)">
12 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908" style="stroke:white;stroke-width:4.94px;"/>
13 |         </g>
14 |         <g transform="matrix(1.08347,0.183521,-0.169367,0.99991,-189.998,192.919)">
15 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908" style="stroke:white;stroke-width:4.73px;"/>
16 |         </g>
17 |         <g transform="matrix(0.985956,0.167004,-0.167004,0.985956,39.6172,-53.8108)">
18 |             <path d="M399.957,123.231C426.706,123.488 436.364,158.296 417.676,166.428C393.753,176.838 343.427,221.719 318.729,257.046C294.032,292.373 269.491,378.392 269.491,378.392C270.439,379.521 222.136,375.075 221.679,369.967C219.307,343.506 253.62,260.716 283.333,219.593C312.867,178.718 375.878,122.999 399.957,123.231Z" style="stroke:white;stroke-width:5px;"/>
19 |         </g>
20 |         <g transform="matrix(11.1695,-5.19003,5.19003,11.1695,-519.973,-25.6313)">
21 |             <g transform="matrix(0.70156,0.509017,-0.364221,0.501994,26.373,-7.91932)">
22 |                 <path d="M43.292,30.965L41.398,29.384L38.344,28.862L39.602,32.404L40.524,33.777L42.355,33.668L43.292,30.965Z" style="stroke:white;stroke-width:0.54px;"/>
23 |             </g>
24 |             <g transform="matrix(0.70156,0.509017,0.364221,-0.501994,1.84741,25.8649)">
25 |                 <path d="M43.292,30.965L41.398,29.384L38.344,28.862L39.602,32.404L40.524,33.777L42.355,33.668L43.292,30.965Z" style="stroke:white;stroke-width:0.54px;"/>
26 |             </g>
27 |         </g>
28 |         <g transform="matrix(0.990334,0.138706,-0.138706,0.990334,17.8133,-24.2925)">
29 |             <path d="M204.271,33.435C249.651,33.435 286.494,70.278 286.494,115.658C286.494,161.038 249.651,197.881 204.271,197.881C158.891,197.881 122.048,161.038 122.048,115.658C122.048,70.278 158.891,33.435 204.271,33.435ZM230.275,69.807C227.358,66.822 222.566,66.768 219.581,69.685L158.91,128.987C155.925,131.904 155.87,136.696 158.787,139.681L169.359,150.497C172.277,153.482 177.069,153.536 180.053,150.619L240.725,91.317C243.71,88.4 243.765,83.608 240.847,80.623L230.275,69.807Z" style="stroke:white;stroke-width:5px;"/>
30 |         </g>
31 |     </g>
32 |     <g>
33 |         <g transform="matrix(0.505466,-0.421967,0.640852,0.767664,-36.6097,125.636)">
34 |             <path d="M457.681,225.745C457.681,219.271 449.697,214.014 439.864,214.014L112.577,214.014C102.744,214.014 94.761,219.271 94.761,225.745L94.761,249.208C94.761,255.682 102.744,260.939 112.577,260.939L439.864,260.939C449.697,260.939 457.681,255.682 457.681,249.208L457.681,225.745Z"/>
35 |         </g>
36 |         <g transform="matrix(1,0,0,1,-53.9136,33.3464)">
37 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908"/>
38 |         </g>
39 |         <g transform="matrix(1.01134,0,0,1.01415,-224.491,171.198)">
40 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908"/>
41 |         </g>
42 |         <g transform="matrix(1.08347,0.183521,-0.169367,0.99991,-189.998,192.919)">
43 |             <ellipse cx="392.618" cy="88.048" rx="22.867" ry="22.908"/>
44 |         </g>
45 |         <g transform="matrix(0.985956,0.167004,-0.167004,0.985956,39.6172,-53.8108)">
46 |             <path d="M399.957,123.231C426.706,123.488 436.364,158.296 417.676,166.428C393.753,176.838 343.427,221.719 318.729,257.046C294.032,292.373 269.491,378.392 269.491,378.392C270.439,379.521 222.136,375.075 221.679,369.967C219.307,343.506 253.62,260.716 283.333,219.593C312.867,178.718 375.878,122.999 399.957,123.231Z" style="stroke:black;stroke-width:1px;"/>
47 |         </g>
48 |         <g transform="matrix(11.1695,-5.19003,5.19003,11.1695,-519.973,-25.6313)">
49 |             <g transform="matrix(0.70156,0.509017,-0.364221,0.501994,26.373,-7.91932)">
50 |                 <path d="M43.292,30.965L41.398,29.384L38.344,28.862L39.602,32.404L40.524,33.777L42.355,33.668L43.292,30.965Z" style="stroke:black;stroke-width:0.11px;"/>
51 |             </g>
52 |             <g transform="matrix(0.70156,0.509017,0.364221,-0.501994,1.84741,25.8649)">
53 |                 <path d="M43.292,30.965L41.398,29.384L38.344,28.862L39.602,32.404L40.524,33.777L42.355,33.668L43.292,30.965Z" style="stroke:black;stroke-width:0.11px;"/>
54 |             </g>
55 |         </g>
56 |         <g transform="matrix(0.990334,0.138706,-0.138706,0.990334,17.8133,-24.2925)">
57 |             <path d="M204.271,33.435C249.651,33.435 286.494,70.278 286.494,115.658C286.494,161.038 249.651,197.881 204.271,197.881C158.891,197.881 122.048,161.038 122.048,115.658C122.048,70.278 158.891,33.435 204.271,33.435ZM230.275,69.807C227.358,66.822 222.566,66.768 219.581,69.685L158.91,128.987C155.925,131.904 155.87,136.696 158.787,139.681L169.359,150.497C172.277,153.482 177.069,153.536 180.053,150.619L240.725,91.317C243.71,88.4 243.765,83.608 240.847,80.623L230.275,69.807Z"/>
58 |         </g>
59 |         <g transform="matrix(6.01888,-5.13631,5.13631,6.01888,-146.927,203.323)">
60 |             <g>
61 |                 <g transform="matrix(1.56444,0,0,1.56444,-12.5191,-36.3035)">
62 |                     <circle cx="31.849" cy="45.803" r="0.744" style="fill:none;stroke:white;stroke-width:0.4px;"/>
63 |                 </g>
64 |                 <g transform="matrix(1.56444,0,0,1.56444,-8.67469,-36.3035)">
65 |                     <circle cx="31.849" cy="45.803" r="0.744" style="fill:none;stroke:white;stroke-width:0.4px;"/>
66 |                 </g>
67 |                 <g transform="matrix(1.56444,0,0,1.56444,-4.83029,-36.3035)">
68 |                     <circle cx="31.849" cy="45.803" r="0.744" style="fill:none;stroke:white;stroke-width:0.4px;"/>
69 |                 </g>
70 |             </g>
71 |             <g transform="matrix(1.56444,0,0,1.56444,-12.5191,-36.3035)">
72 |                 <circle cx="31.849" cy="45.803" r="0.744" style="fill:rgb(43,94,191);stroke:black;stroke-width:0.02px;"/>
73 |             </g>
74 |             <g transform="matrix(1.56444,0,0,1.56444,-8.67469,-36.3035)">
75 |                 <circle cx="31.849" cy="45.803" r="0.744" style="fill:rgb(43,94,191);stroke:black;stroke-width:0.02px;"/>
76 |             </g>
77 |             <g transform="matrix(1.56444,0,0,1.56444,-4.83029,-36.3035)">
78 |                 <circle cx="31.849" cy="45.803" r="0.744" style="fill:rgb(43,94,191);stroke:black;stroke-width:0.02px;"/>
79 |             </g>
80 |         </g>
81 |     </g>
82 | </svg>
83 | 


--------------------------------------------------------------------------------
/src/lib-components/CityObjectInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="d-flex justify-content-between align-items-center">
  4 |       <div class="text-secondary">
  5 |         <small><i :class="getIconStyle(cityobject)"></i>
  6 |           {{ cityobject.type }}</small>
  7 |       </div>
  8 |       <div
  9 |         v-if="editable"
 10 |         class="col-auto p-0"
 11 |       >
 12 |         <button
 13 |           class="btn btn-sm"
 14 |           :class="[edit_mode ? 'btn-warning' : 'btn-outline-warning']"
 15 |           @click="edit_mode = !edit_mode"
 16 |         >
 17 |           <i class="fas fa-pen mr-1"></i>
 18 |           {{ edit_mode ? "Close edit" : "Edit" }}
 19 |         </button>
 20 |         <button
 21 |           type="button"
 22 |           class="close ml-2"
 23 |           aria-label="Close"
 24 |           @click="$emit('close')"
 25 |         >
 26 |           <span
 27 |             aria-hidden="true"
 28 |             class="small"
 29 |           ><i class="fas fa-times"></i></span>
 30 |         </button>
 31 |       </div>
 32 |     </div>
 33 |     <h5 class="card-title text-truncate">
 34 |       {{ cityobject_id }}
 35 |     </h5>
 36 |     <div v-if="citymodel != null">
 37 |       <small v-show="'parents' in cityobject">
 38 |         Parents:
 39 |         <a
 40 |           v-for="parent_id in cityobject.parents"
 41 |           :key="parent_id"
 42 |           :href="'#' + parent_id"
 43 |           :title="parent_id"
 44 |         >
 45 |           <i
 46 |             class="text-danger"
 47 |             :class="getIconStyle(getObject(parent_id), false)"
 48 |           ></i>
 49 |         </a>
 50 |       </small>
 51 |       <small v-show="'children' in cityobject">
 52 |         Children:
 53 |         <a
 54 |           v-for="child_id in cityobject.children"
 55 |           :key="child_id"
 56 |           :href="'#' + child_id"
 57 |           :title="child_id"
 58 |         >
 59 |           <i
 60 |             class="text-success"
 61 |             :class="getIconStyle(getObject(child_id), false)"
 62 |           ></i>
 63 |         </a>
 64 |       </small>
 65 |     </div>
 66 |     <div class="d-flex mt-2">
 67 |       <expandable-badge
 68 |         v-if="hasAttributes"
 69 |         color="info"
 70 |         :expanded="!edit_mode && is_mode(1)"
 71 |         @click="toggle_mode(1)"
 72 |       >
 73 |         {{ attributesCount }} Attributes
 74 |       </expandable-badge>
 75 |       <expandable-badge
 76 |         v-if="hasGeometries"
 77 |         color="danger"
 78 |         :expanded="!edit_mode && is_mode(2)"
 79 |         @click="toggle_mode(2)"
 80 |       >
 81 |         {{ cityobject.geometry.length }} Geometries
 82 |       </expandable-badge>
 83 |     </div>
 84 |     <div v-show="expanded || edit_mode">
 85 |       <hr>
 86 |       <div v-show="edit_mode == false && is_mode(1)">
 87 |         <div v-show="cityobjectAttributesCount > 0">
 88 |           <table class="table table-striped table-borderless overflow-auto">
 89 |             <tbody>
 90 |               <tr
 91 |                 v-for="(value, key) in cityobject.attributes"
 92 |                 :key="key"
 93 |               >
 94 |                 <th
 95 |                   scope="row"
 96 |                   class="py-1"
 97 |                 >
 98 |                   <small class="font-weight-bold">{{ key }}</small>
 99 |                 </th>
100 |                 <td class="py-1">
101 |                   <small>{{ value }}</small>
102 |                 </td>
103 |               </tr>
104 |             </tbody>
105 |           </table>
106 |           <hr>
107 |         </div>
108 |         <div v-if="parent.attributes">
109 |           <p class="h5">
110 |             Parent attributes
111 |           </p>
112 |           <table
113 |             class="table table-striped table-borderless overflow-auto"
114 |           >
115 |             <tbody>
116 |               <tr
117 |                 v-for="(value, key) in parent.attributes"
118 |                 :key="key"
119 |               >
120 |                 <th
121 |                   scope="row"
122 |                   class="py-1"
123 |                 >
124 |                   <small class="font-weight-bold">{{ key }}</small>
125 |                 </th>
126 |                 <td class="py-1">
127 |                   <small>{{ value }}</small>
128 |                 </td>
129 |               </tr>
130 |             </tbody>
131 |           </table>
132 |         </div>
133 |         <div v-if="Object.keys(surface).length > 0">
134 |           <p class="h5">
135 |             Active surface
136 |           </p>
137 |           <table
138 |             class="table table-striped table-borderless overflow-auto"
139 |           >
140 |             <tbody>
141 |               <tr
142 |                 v-for="(value, key) in surface"
143 |                 :key="key"
144 |               >
145 |                 <th
146 |                   scope="row"
147 |                   class="py-1"
148 |                 >
149 |                   <small class="font-weight-bold">{{ key }}</small>
150 |                 </th>
151 |                 <td class="py-1">
152 |                   <small>{{ value }}</small>
153 |                 </td>
154 |               </tr>
155 |             </tbody>
156 |           </table>
157 |         </div>
158 |       </div>
159 |       <div v-show="edit_mode == false && is_mode(2)">
160 |         <ul class="list-unstyled">
161 |           <li
162 |             v-for="(geom, i) in cityobject.geometry"
163 |             :key="i"
164 |           >
165 |             <div class="d-flex flex-inline align-items-center">
166 |               <span class="pr-1">{{ geom.type }}</span>
167 |               <geometry-badge :geometry="geom"></geometry-badge>
168 |             </div>
169 |           </li>
170 |         </ul>
171 |       </div>
172 |       <div v-show="edit_mode">
173 |         <textarea
174 |           id="json_data"
175 |           v-model="jsonString"
176 |           class="form-control"
177 |         ></textarea>
178 |         <div class="d-flex justify-content-end mt-2">
179 |           <button
180 |             type="button"
181 |             class="btn btn-success btn-sm"
182 |             @click="saveChanges"
183 |           >
184 |             <i class="fas fa-save mr-1"></i> Save
185 |           </button>
186 |         </div>
187 |       </div>
188 |     </div>
189 |   </div>
190 | </template>
191 | 
192 | <script>
193 | import $ from "jquery";
194 | import { getIconStyle } from '../helpers/icons';
195 | 
196 | import ExpandableBadge from "./common/ExpandableBadge.vue";
197 | import GeometryBadge from "./common/GeometryBadge.vue";
198 | 
199 | export default {
200 | 	name: "CityObjectInfo",
201 | 	components: {
202 | 		ExpandableBadge,
203 | 		GeometryBadge,
204 | 	},
205 | 	props: {
206 | 		citymodel: Object,
207 | 		cityobject: Object,
208 | 		cityobject_id: String,
209 | 		geometryId: {
210 | 			type: Number,
211 | 			default: - 1
212 | 		},
213 | 		boundaryId: {
214 | 			type: Number,
215 | 			default: - 1
216 | 		},
217 | 		selected: {
218 | 			type: Boolean,
219 | 			default: false,
220 | 		},
221 | 		editable: {
222 | 			type: Boolean,
223 | 			default: false,
224 | 		},
225 | 		showParentAttributes: {
226 | 			type: Boolean,
227 | 			default: true
228 | 		}
229 | 	},
230 | 	data() {
231 | 
232 | 		return {
233 | 			edit_mode: false,
234 | 			expanded: 0,
235 | 		};
236 | 
237 | 	},
238 | 	computed: {
239 | 		attributesCount: function () {
240 | 
241 | 			const parentAttributes = this.parent.attributes ? Object.keys( this.parent.attributes ).length : 0;
242 | 
243 | 			return this.cityobjectAttributesCount + Object.keys( this.surface ).length + parentAttributes;
244 | 
245 | 		},
246 | 		cityobjectAttributesCount: function () {
247 | 
248 | 			if ( "attributes" in this.cityobject ) {
249 | 
250 | 				return Object.keys( this.cityobject.attributes ).length;
251 | 
252 | 			}
253 | 
254 | 			return 0;
255 | 
256 | 		},
257 | 		hasAttributes: function () {
258 | 
259 | 			return ( "attributes" in this.cityobject && this.attributesCount > 0 )
260 | 				     || Object.keys( this.surface ).length > 0;
261 | 
262 | 		},
263 | 		parent: function () {
264 | 
265 | 			if ( this.showParentAttributes ) {
266 | 
267 | 				if ( this.cityobject.parents ) {
268 | 
269 | 					return this.getObject( this.cityobject.parents[ 0 ] );
270 | 
271 | 				}
272 | 
273 | 			}
274 | 
275 | 			return {};
276 | 
277 | 		},
278 | 		surface: function () {
279 | 
280 | 			if ( this.cityobject.geometry === undefined ) {
281 | 
282 | 				return {};
283 | 
284 | 			}
285 | 
286 | 			const geometry = this.cityobject.geometry[ this.geometryId ];
287 | 
288 | 			if ( geometry === undefined ) {
289 | 
290 | 				return {};
291 | 
292 | 			}
293 | 
294 | 			const geomType = geometry.type;
295 | 
296 | 			if ( geometry.semantics ) {
297 | 
298 | 				if ( geomType == "Solid" ) {
299 | 
300 | 					const shells = geometry.boundaries;
301 | 
302 | 					let boundaryCount = 0;
303 | 
304 | 					for ( let i = 0; i < shells.length; i ++ ) {
305 | 
306 | 						if ( this.boundaryId > boundaryCount + shells[ i ].length ) {
307 | 
308 | 							continue;
309 | 
310 | 						}
311 | 
312 | 						const idx = geometry.semantics.values[ i ][ this.boundaryId - boundaryCount ];
313 | 
314 | 						if ( idx != undefined ) {
315 | 
316 | 							return geometry.semantics.surfaces[ idx ];
317 | 
318 | 						} else {
319 | 
320 | 							return {};
321 | 
322 | 						}
323 | 
324 | 					}
325 | 
326 | 				} else if ( geomType == "MultiSurface" || geomType == "CompositeSurface" ) {
327 | 
328 | 					const surfaceIdx = geometry.semantics.values[ this.boundaryId ];
329 | 
330 | 					if ( surfaceIdx != undefined ) {
331 | 
332 | 						return geometry.semantics.surfaces[ surfaceIdx ];
333 | 
334 | 					}
335 | 
336 | 				} else if ( geomType == "MultiSolid" || geomType == "CompositeSolid" ) {
337 | 
338 | 					const solids = geometry.boundaries;
339 | 
340 | 					for ( let i = 0; i < solids.length; i ++ ) {
341 | 
342 | 						for ( let j = 0; j < solids[ i ].length; j ++ ) {
343 | 
344 | 							const semantics = geometry.semantics ? geometry.semantics.values[ i ][ j ] : [];
345 | 
346 | 							this.parseShell( solids[ i ][ j ], objectId, geomIdx, semantics, semanticSurfaces );
347 | 
348 | 						}
349 | 
350 | 					}
351 | 
352 | 				}
353 | 
354 | 			}
355 | 
356 | 			return {};
357 | 
358 | 		},
359 | 		hasGeometries: function () {
360 | 
361 | 			return this.cityobject.geometry;
362 | 
363 | 		},
364 | 		iconType: function () {
365 | 
366 | 			return getIconStyle( this.cityobject );
367 | 
368 | 		},
369 | 		jsonString: {
370 | 			get: function () {
371 | 
372 | 				return JSON.stringify( this.cityobject, undefined, 4 );
373 | 
374 | 			},
375 | 		},
376 | 	},
377 | 	methods: {
378 | 		toggle_mode( mode ) {
379 | 
380 | 			if ( this.expanded == mode ) {
381 | 
382 | 				this.expanded = 0;
383 | 
384 | 			} else {
385 | 
386 | 				this.expanded = mode;
387 | 
388 | 			}
389 | 
390 | 		},
391 | 		is_mode( mode ) {
392 | 
393 | 			return this.expanded == mode;
394 | 
395 | 		},
396 | 		getObject( objid ) {
397 | 
398 | 			if ( this.citymodel ) {
399 | 
400 | 				return this.citymodel.CityObjects[ objid ];
401 | 
402 | 			} else {
403 | 
404 | 				return {};
405 | 
406 | 			}
407 | 
408 | 		},
409 | 		saveChanges() {
410 | 
411 | 			const card_id = $.escapeSelector( this.cityobject_id );
412 | 			const new_json = document.querySelector( `#${card_id} #json_data` ).value;
413 | 			const new_cityobject = JSON.parse( new_json );
414 | 
415 | 			this.$emit( "input", new_cityobject );
416 | 
417 | 		},
418 | 		getIconStyle( cityobj, with_colours ) {
419 | 
420 | 			return getIconStyle( cityobj, with_colours );
421 | 
422 | 		}
423 | 	},
424 | };
425 | </script>
426 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright 2019 Delft University of Technology
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/src/lib-components/ThreeJsViewer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     id="viewer"
  4 |     class="col-12 px-0 h-100"
  5 |   ></div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import * as THREE from 'three';
 10 | import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 11 | import { AttributeEvaluator, CityJSONLoader, CityJSONWorkerParser, CityObjectsMaterial, TextureManager } from 'cityjson-threejs-loader';
 12 | import { SRGBColorSpace } from 'three';
 13 | import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 14 | import { GTAOPass, OutputPass, RenderPass } from 'three/examples/jsm/Addons.js';
 15 | import GUI from 'three/examples/jsm/libs/lil-gui.module.min.js';
 16 | 
 17 | export default {
 18 | 	name: 'ThreeJsViewer',
 19 | 	props: {
 20 | 		citymodel: {
 21 | 			type: Object,
 22 | 			default: function () {
 23 | 
 24 | 				return {};
 25 | 
 26 | 			}
 27 | 		},
 28 | 		selectedObjid: {
 29 | 			type: String,
 30 | 			default: null
 31 | 		},
 32 | 		selectedGeomIdx: {
 33 | 			type: Number,
 34 | 			default: - 1,
 35 | 		},
 36 | 		selectedBoundaryIdx: {
 37 | 			type: Number,
 38 | 			default: - 1
 39 | 		},
 40 | 		highlightSelectedSurface: {
 41 | 			type: Boolean,
 42 | 			default: false
 43 | 		},
 44 | 		selectionColor: {
 45 | 			type: Number,
 46 | 			default: 0xffc107
 47 | 		},
 48 | 		objectColors: {
 49 | 			type: Object,
 50 | 			default: function () {
 51 | 
 52 | 				return {
 53 | 					"Building": 0x7497df,
 54 | 					"BuildingPart": 0x7497df,
 55 | 					"BuildingInstallation": 0x7497df,
 56 | 					"Bridge": 0x999999,
 57 | 					"BridgePart": 0x999999,
 58 | 					"BridgeInstallation": 0x999999,
 59 | 					"BridgeConstructionElement": 0x999999,
 60 | 					"CityObjectGroup": 0xffffb3,
 61 | 					"CityFurniture": 0xcc0000,
 62 | 					"GenericCityObject": 0xcc0000,
 63 | 					"LandUse": 0xffffb3,
 64 | 					"PlantCover": 0x39ac39,
 65 | 					"Railway": 0x000000,
 66 | 					"Road": 0x999999,
 67 | 					"SolitaryVegetationObject": 0x39ac39,
 68 | 					"TINRelief": 0xffdb99,
 69 | 					"TransportSquare": 0x999999,
 70 | 					"Tunnel": 0x999999,
 71 | 					"TunnelPart": 0x999999,
 72 | 					"TunnelInstallation": 0x999999,
 73 | 					"WaterBody": 0x4da6ff
 74 | 				};
 75 | 
 76 | 			}
 77 | 		},
 78 | 		surfaceColors: {
 79 | 			type: Object,
 80 | 			default: function () {
 81 | 
 82 | 				return {
 83 | 					"GroundSurface": 0x999999,
 84 | 					"WallSurface": 0xffffff,
 85 | 					"RoofSurface": 0xff0000,
 86 | 					"TrafficArea": 0x6e6e6e,
 87 | 					"AuxiliaryTrafficArea": 0x2c8200,
 88 | 					"Window": 0x0059ff,
 89 | 					"Door": 0x640000
 90 | 				};
 91 | 
 92 | 			}
 93 | 		},
 94 | 		backgroundColor: {
 95 | 			type: Number,
 96 | 			default: 0xd9eefc
 97 | 		},
 98 | 		showSemantics: {
 99 | 			type: Boolean,
100 | 			default: true
101 | 		},
102 | 		doubleSide: {
103 | 			type: Boolean,
104 | 			default: true
105 | 		},
106 | 		ambientOcclusion: {
107 | 			type: Boolean,
108 | 			default: true
109 | 		},
110 | 		activeLod: {
111 | 			type: Number,
112 | 			default: - 1
113 | 		},
114 | 		cameraSpotlight: {
115 | 			type: Boolean,
116 | 			default: true
117 | 		},
118 | 		conditionalFormatting: {
119 | 			type: Boolean,
120 | 			default: false
121 | 		},
122 | 		conditionalAttribute: {
123 | 			type: String,
124 | 			default: null
125 | 		},
126 | 		attributeColors: {
127 | 			type: Object,
128 | 			default: () => {}
129 | 		},
130 | 		activeMaterialTheme: {
131 | 			type: String,
132 | 			default: "undefined"
133 | 		},
134 | 		textureManager: {
135 | 			type: TextureManager,
136 | 			default: undefined
137 | 		},
138 | 		activeTextureTheme: {
139 | 			type: String,
140 | 			default: "undefined"
141 | 		},
142 | 	},
143 | 	data() {
144 | 
145 | 		return {
146 | 
147 | 			camera_init: true,
148 | 			lods: [],
149 | 			previousPos: {
150 | 				x: - 1,
151 | 				y: - 1
152 | 			},
153 | 			parser: null,
154 | 
155 | 		};
156 | 
157 | 	},
158 | 	watch: {
159 | 		backgroundColor: function ( newVal ) {
160 | 
161 | 			this.renderer.setClearColor( newVal );
162 | 
163 | 			this.updateScene();
164 | 
165 | 		},
166 | 		objectColors: {
167 | 			handler: function () {
168 | 
169 | 				this.refreshColors();
170 | 				this.updateScene();
171 | 
172 | 			},
173 | 			deep: true
174 | 		},
175 | 		surfaceColors: {
176 | 			handler: function () {
177 | 
178 | 				this.refreshColors();
179 | 				this.updateScene();
180 | 
181 | 			},
182 | 			deep: true
183 | 		},
184 | 		selectionColor: function () {
185 | 
186 | 			this.refreshColors();
187 | 			this.updateScene();
188 | 
189 | 		},
190 | 		citymodel: {
191 | 			handler: function ( newCitymodel ) {
192 | 
193 | 				this.clearScene();
194 | 
195 | 				this.loadCitymodel( newCitymodel );
196 | 
197 | 				this.updateScene();
198 | 
199 | 			},
200 | 			deep: true
201 | 		},
202 | 		selectedObjid: function () {
203 | 
204 | 			this.updateScene();
205 | 
206 | 		},
207 | 		selectedGeomIdx: function () {
208 | 
209 | 			this.updateScene();
210 | 
211 | 		},
212 | 		selectedBoundaryIdx: function () {
213 | 
214 | 			this.updateScene();
215 | 
216 | 		},
217 | 		doubleSide: function () {
218 | 
219 | 			this.scene.traverse( c => {
220 | 
221 | 				if ( c.material && c.material.isCityObjectsMaterial ) {
222 | 
223 | 					c.material.side = this.doubleSide ? THREE.DoubleSide : THREE.FrontSide;
224 | 
225 | 				}
226 | 
227 | 			} );
228 | 
229 | 			this.updateScene();
230 | 
231 | 		},
232 | 		ambientOcclusion: function () {
233 | 
234 | 			if ( this.ambientOcclusion ) {
235 | 
236 | 				this.composer.addPass( this.gtaoPass );
237 | 
238 | 			} else {
239 | 
240 | 				this.composer.removePass( this.gtaoPass );
241 | 
242 | 			}
243 | 
244 | 			this.updateScene();
245 | 
246 | 		},
247 | 		highlightSelectedSurface: function () {
248 | 
249 | 			this.scene.traverse( c => {
250 | 
251 | 				if ( c.material && c.material.isCityObjectsMaterial ) {
252 | 
253 | 					c.material.selectSurface = this.highlightSelectedSurface;
254 | 
255 | 				}
256 | 
257 | 			} );
258 | 
259 | 			this.updateScene();
260 | 
261 | 		},
262 | 		showSemantics: function ( value ) {
263 | 
264 | 			this.scene.traverse( c => {
265 | 
266 | 				if ( c.material && c.material.isCityObjectsMaterial ) {
267 | 
268 | 					c.material.showSemantics = value;
269 | 
270 | 				}
271 | 
272 | 			} );
273 | 
274 | 			this.updateScene();
275 | 
276 | 		},
277 | 		activeLod: function ( lodIdx ) {
278 | 
279 | 			this.scene.traverse( c => {
280 | 
281 | 				if ( c.material && c.material.isCityObjectsMaterial ) {
282 | 
283 | 					c.material.showLod = lodIdx;
284 | 
285 | 				}
286 | 
287 | 			} );
288 | 
289 | 			this.updateScene();
290 | 
291 | 		},
292 | 		cameraSpotlight: function () {
293 | 
294 | 			this.updateScene();
295 | 
296 | 		},
297 | 		conditionalFormatting: function ( value ) {
298 | 
299 | 			if ( this.conditionalAttribute == '' || this.conditionalAttribute === null ) {
300 | 
301 | 				return;
302 | 
303 | 			}
304 | 
305 | 			this.scene.traverse( c => {
306 | 
307 | 				if ( c.isCityObject ) {
308 | 
309 | 					c.material.conditionalFormatting = value;
310 | 
311 | 				}
312 | 
313 | 			} );
314 | 
315 | 			this.updateScene();
316 | 
317 | 		},
318 | 		conditionalAttribute: function ( value ) {
319 | 
320 | 			this.updateConditionalInfo();
321 | 
322 | 			this.updateScene();
323 | 
324 | 		},
325 | 		activeMaterialTheme: function ( theme ) {
326 | 
327 | 			this.scene.traverse( c => {
328 | 
329 | 				if ( c.supportsMaterials ) {
330 | 
331 | 					c.material.materialTheme = theme;
332 | 
333 | 				}
334 | 
335 | 			} );
336 | 
337 | 			this.updateScene();
338 | 
339 | 		},
340 | 		activeTextureTheme: function ( theme ) {
341 | 
342 | 			const scope = this;
343 | 
344 | 			this.scene.traverse( c => {
345 | 
346 | 				if ( c.supportsMaterials ) {
347 | 
348 | 					c.setTextureTheme( theme, scope.textureManager );
349 | 
350 | 				}
351 | 
352 | 			} );
353 | 
354 | 			this.updateScene();
355 | 
356 | 		},
357 | 		attributeColors: {
358 | 			handler: function () {
359 | 
360 | 				this.scene.traverse( c => {
361 | 
362 | 					if ( c.isCityObject ) {
363 | 
364 | 						c.material.attributeColors = this.attributeColors;
365 | 
366 | 					}
367 | 
368 | 				} );
369 | 
370 | 				this.updateScene();
371 | 
372 | 			},
373 | 			deep: true
374 | 		}
375 | 	},
376 | 	beforeCreate() {
377 | 
378 | 		this.scene = null;
379 | 		this.camera = null;
380 | 		this.renderer = null;
381 | 		this.controls = null;
382 | 		this.raycaster = null;
383 | 		this.mouse = null;
384 | 		this.spotLight = null;
385 | 		this.gtaoPass = null;
386 | 		this.composer = null;
387 | 
388 | 	},
389 | 	mounted() {
390 | 
391 | 		this.initScene();
392 | 
393 | 		this.loadCitymodel( this.citymodel );
394 | 
395 | 		this.updateScene();
396 | 
397 | 		this.renderer.domElement.addEventListener( 'pointerdown', this.pointerDown, false );
398 | 		this.renderer.domElement.addEventListener( 'pointermove', this.pointerMove, false );
399 | 		this.renderer.domElement.addEventListener( 'pointerup', this.pointerUp, false );
400 | 
401 | 	},
402 | 	methods: {
403 | 		loadCitymodel( citymodel ) {
404 | 
405 | 			this.$emit( 'rendering', true );
406 | 
407 | 			if ( Object.keys( citymodel ).length > 0 ) {
408 | 
409 | 				this.parser = new CityJSONWorkerParser();
410 | 				this.parser.chunkSize = 2000;
411 | 
412 | 				const scope = this;
413 | 				this.parser.onChunkLoad = () => {
414 | 
415 | 					scope.lods = scope.parser.lods;
416 | 
417 | 					this.$emit( 'objectColorsChanged', scope.parser.objectColors );
418 | 					this.$emit( 'surfaceColorsChanged', scope.parser.surfaceColors );
419 | 
420 | 					scope.refreshColors();
421 | 
422 | 					scope.updateScene();
423 | 
424 | 					scope.$emit( 'chunkLoaded' );
425 | 
426 | 				};
427 | 
428 | 				this.parser.onComplete = () => {
429 | 
430 | 					scope.$emit( 'rendering', false );
431 | 					scope.$emit( 'loadCompleted' );
432 | 
433 | 					scope.scene.traverse( c => {
434 | 
435 | 						if ( c.isCityObject ) {
436 | 
437 | 							c.material.side = this.doubleSide ? THREE.DoubleSide : THREE.FrontSide;
438 | 
439 | 						}
440 | 
441 | 					} );
442 | 
443 | 				};
444 | 
445 | 				const loader = new CityJSONLoader( this.parser );
446 | 				loader.load( citymodel );
447 | 
448 | 				const bbox = loader.boundingBox.clone();
449 | 				bbox.applyMatrix4( loader.matrix );
450 | 
451 | 				this.fitCameraToSelection( this.camera, this.controls, bbox );
452 | 
453 | 				this.scene.add( loader.scene );
454 | 
455 | 			}
456 | 
457 | 		},
458 | 		fitCameraToSelection( camera, controls, box, fitOffset = 1.2 ) {
459 | 
460 | 			// From https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
461 | 
462 | 			// const box.makeEmpty();
463 | 			// for ( const object of selection ) {
464 | 
465 | 			//   box.expandByObject( object );
466 | 
467 | 			// }
468 | 			const size = new THREE.Vector3();
469 | 			const center = new THREE.Vector3();
470 | 
471 | 			box.getSize( size );
472 | 			box.getCenter( center );
473 | 
474 | 			const maxSize = Math.max( size.x, size.y, size.z );
475 | 			const fitHeightDistance = maxSize / ( 2 * Math.atan( Math.PI * camera.fov / 360 ) );
476 | 			const fitWidthDistance = fitHeightDistance / camera.aspect;
477 | 			const distance = fitOffset * Math.max( fitHeightDistance, fitWidthDistance );
478 | 
479 | 			const direction = controls.target.clone()
480 | 				.sub( camera.position )
481 | 				.normalize()
482 | 				.multiplyScalar( distance );
483 | 
484 | 			controls.maxDistance = distance * 10;
485 | 			controls.target.copy( center );
486 | 
487 | 			camera.near = distance / 100;
488 | 			camera.far = distance * 100;
489 | 			camera.updateProjectionMatrix();
490 | 
491 | 			camera.position.copy( controls.target ).sub( direction );
492 | 
493 | 			controls.update();
494 | 
495 | 		},
496 | 		updateScene() {
497 | 
498 | 			if ( this.cameraSpotlight ) {
499 | 
500 | 				this.spotLight.position.copy( this.camera.position );
501 | 
502 | 			}
503 | 
504 | 			const idx = Object.keys( this.citymodel.CityObjects ).indexOf( this.selectedObjid );
505 | 
506 | 			this.scene.traverse( c => {
507 | 
508 | 				if ( c.material ) {
509 | 
510 | 					const mats = Array.isArray( c.material ) ? c.material : [ c.material ];
511 | 
512 | 					for ( const mat of mats ) {
513 | 
514 | 						if ( mat.isCityObjectsMaterial ) {
515 | 
516 | 							mat.selectSurface = this.highlightSelectedSurface;
517 | 
518 | 							mat.highlightedObject = {
519 | 
520 | 								objectIndex: idx,
521 | 								geometryIndex: this.selectedGeomIdx,
522 | 								boundaryIndex: this.selectedBoundaryIdx
523 | 
524 | 							};
525 | 
526 | 						}
527 | 
528 | 					}
529 | 
530 | 				}
531 | 
532 | 			} );
533 | 
534 | 			// this.renderer.render( this.scene, this.camera );
535 | 			this.composer.render();
536 | 
537 | 		},
538 | 		refreshColors() {
539 | 
540 | 			const scope = this;
541 | 
542 | 			this.scene.traverse( mesh => {
543 | 
544 | 				if ( mesh.material && mesh.material.isCityObjectsMaterial ) {
545 | 
546 | 					mesh.material.objectColors = this.objectColors;
547 | 					mesh.material.surfaceColors = this.surfaceColors;
548 | 
549 | 					mesh.material.highlightColor = scope.selectionColor;
550 | 
551 | 				}
552 | 
553 | 			} );
554 | 
555 | 		},
556 | 		updateConditionalInfo() {
557 | 
558 | 			if ( this.conditionalAttribute ) {
559 | 
560 | 				const evaluator = new AttributeEvaluator( this.citymodel, this.conditionalAttribute );
561 | 				const colors = evaluator.createColors();
562 | 
563 | 				this.$emit( 'attributeColorsChanged', colors );
564 | 
565 | 				this.scene.traverse( c => {
566 | 
567 | 					if ( c.isCityObject ) {
568 | 
569 | 						c.addAttributeByProperty( evaluator );
570 | 						c.material.attributeColors = colors;
571 | 
572 | 					}
573 | 
574 | 				} );
575 | 
576 | 			}
577 | 
578 | 		},
579 | 		pointerDown( e ) {
580 | 
581 | 			this.previousPos.x = e.clientX;
582 | 			this.previousPos.y = e.clientY;
583 | 
584 | 		},
585 | 		pointerUp( e ) {
586 | 
587 | 			if ( this.previousPos.x == e.clientX && this.previousPos.y == e.clientY ) {
588 | 
589 | 				this.handleClick( e );
590 | 
591 | 			}
592 | 
593 | 		},
594 | 		pointerMove( e ) {
595 | 
596 | 			if ( e.ctrlKey ) {
597 | 
598 | 				this.handleClick( e );
599 | 
600 | 			}
601 | 
602 | 		},
603 | 		getActiveIntersection( results ) {
604 | 
605 | 			// Filters through the results to find the first one for the active LoD
606 | 
607 | 			if ( this.activeLod > - 1 ) {
608 | 
609 | 				for ( let i = 0; i < results.length; i ++ ) {
610 | 
611 | 					const lodIdx = results[ i ].object.resolveIntersectionInfo( results[ i ], this.citymodel ).lodIndex;
612 | 
613 | 					if ( lodIdx == this.activeLod ) {
614 | 
615 | 						return results[ i ];
616 | 
617 | 					}
618 | 
619 | 				}
620 | 
621 | 			}
622 | 
623 | 			return results[ 0 ];
624 | 
625 | 		},
626 | 		handleClick( e ) {
627 | 
628 | 			var rect = this.renderer.domElement.getBoundingClientRect();
629 | 			this.mouse.x = ( ( e.clientX - rect.left ) / this.renderer.domElement.clientWidth ) * 2 - 1;
630 | 			this.mouse.y = - ( ( e.clientY - rect.top ) / this.renderer.domElement.clientHeight ) * 2 + 1;
631 | 
632 | 			//get cameraposition
633 | 			this.raycaster.setFromCamera( this.mouse, this.camera );
634 | 
635 | 			//calculate intersects
636 | 			var intersects = this.raycaster.intersectObject( this.scene, true );
637 | 
638 | 			//if clicked on nothing return
639 | 			if ( intersects.length == 0 ) {
640 | 
641 | 				this.$emit( 'object_clicked', null );
642 | 				return;
643 | 
644 | 			}
645 | 
646 | 			const intersection = this.getActiveIntersection( intersects );
647 | 
648 | 			if ( intersection.object.isCityObject ) {
649 | 
650 | 				const info = intersection.object.resolveIntersectionInfo( intersection, this.citymodel );
651 | 
652 | 				this.$emit( 'object_clicked', [ info.objectId, info.geometryIndex, info.boundaryIndex ] );
653 | 
654 | 			}
655 | 
656 | 		},
657 | 		getParams() {
658 | 
659 | 			const hash = window.location.hash;
660 | 
661 | 			if ( hash ) {
662 | 
663 | 				const params = new URLSearchParams( hash.substring( 1 ) );
664 | 				return Object.fromEntries( params );
665 | 
666 | 			} else {
667 | 
668 | 				return {};
669 | 
670 | 			}
671 | 
672 | 		},
673 | 		initScene() {
674 | 
675 | 			const viewer = document.getElementById( "viewer" );
676 | 			const ratio = viewer.clientWidth / viewer.clientHeight;
677 | 
678 | 			this.scene = new THREE.Scene();
679 | 			this.camera = new THREE.PerspectiveCamera( 60, ratio, 0.0001, 4000 );
680 | 			this.camera.position.set( 0, - 1, 1 );
681 | 			this.camera.up.set( 0, 0, 1 );
682 | 
683 | 			this.renderer = new THREE.WebGLRenderer( {
684 | 				antialias: window.devicePixelRatio > 1 ? false : true,
685 | 				powerPreference: "high-performance"
686 | 			} );
687 | 			this.renderer.outputEncoding = SRGBColorSpace;
688 | 			viewer.appendChild( this.renderer.domElement );
689 | 			this.renderer.setSize( viewer.clientWidth, viewer.clientHeight );
690 | 			this.renderer.setClearColor( this.backgroundColor );
691 | 			this.renderer.setPixelRatio( window.devicePixelRatio );
692 | 
693 | 			const composer = new EffectComposer( this.renderer );
694 | 			this.composer = composer;
695 | 
696 | 			const renderPass = new RenderPass( this.scene, this.camera );
697 | 			composer.addPass( renderPass );
698 | 
699 | 			this.gtaoPass = new GTAOPass( this.scene, this.camera, viewer.clientWidth, viewer.clientHeight );
700 | 
701 | 			const aoParameters = {
702 | 				radius: 2.4,
703 | 				distanceExponent: 1.,
704 | 				thickness: 10.,
705 | 				scale: 1.3,
706 | 				samples: 16,
707 | 				distanceFallOff: 1.,
708 | 				screenSpaceRadius: false,
709 | 			};
710 | 
711 | 			this.gtaoPass.updateGtaoMaterial( aoParameters );
712 | 
713 | 			if ( this.ambientOcclusion ) {
714 | 
715 | 				composer.addPass( this.gtaoPass );
716 | 
717 | 			}
718 | 
719 | 			const outputPass = new OutputPass();
720 | 			composer.addPass( outputPass );
721 | 
722 | 			const updateGtaoMaterial = () => {
723 | 
724 | 				gtaoPass.updateGtaoMaterial( aoParameters );
725 | 				this.updateScene();
726 | 
727 | 			};
728 | 
729 | 			if ( "debug" in this.getParams() ) {
730 | 
731 | 				const gui = new GUI();
732 | 
733 | 				gui.add( gtaoPass, 'blendIntensity' ).min( 0 ).max( 1 ).step( 0.01 );
734 | 				gui.add( aoParameters, 'radius' ).min( 0.01 ).max( 10 ).step( 0.1 ).onChange( updateGtaoMaterial );
735 | 				gui.add( aoParameters, 'distanceExponent' ).min( 1 ).max( 4 ).step( 0.01 ).onChange( updateGtaoMaterial );
736 | 				gui.add( aoParameters, 'thickness' ).min( 0.01 ).max( 10 ).step( 0.1 ).onChange( updateGtaoMaterial );
737 | 				gui.add( aoParameters, 'distanceFallOff' ).min( 0 ).max( 1 ).step( 0.01 ).onChange( updateGtaoMaterial );
738 | 				gui.add( aoParameters, 'scale' ).min( 0.01 ).max( 2.0 ).step( 0.1 ).onChange( updateGtaoMaterial );
739 | 				gui.add( aoParameters, 'samples' ).min( 2 ).max( 32 ).step( 1 ).onChange( updateGtaoMaterial );
740 | 				gui.add( aoParameters, 'screenSpaceRadius' ).onChange( updateGtaoMaterial );
741 | 
742 | 			}
743 | 
744 | 			let self = this;
745 | 
746 | 			this.raycaster = new THREE.Raycaster();
747 | 			this.mouse = new THREE.Vector2();
748 | 
749 | 			const ambientLight = new THREE.AmbientLight( 0x999999, 0.7 * Math.PI ); // soft white light
750 | 			this.scene.add( ambientLight );
751 | 
752 | 			this.spotLight = new THREE.DirectionalLight( 0xDDDDDD, Math.PI );
753 | 			this.spotLight.position.set( 1, 2, 3 );
754 | 
755 | 			this.scene.add( this.spotLight );
756 | 
757 | 			this.controls = new OrbitControls( this.camera, this.renderer.domElement );
758 | 			this.controls.addEventListener( 'change', function () {
759 | 
760 | 				self.updateScene();
761 | 
762 | 			} );
763 | 			this.controls.target.set( 0, 0, 0 );
764 | 
765 | 			const scope = this;
766 | 			window.addEventListener( 'resize', _ => {
767 | 
768 | 				scope.camera.aspect = viewer.clientWidth / viewer.clientHeight;
769 | 				scope.camera.updateProjectionMatrix();
770 | 
771 | 				scope.renderer.setSize( viewer.clientWidth, viewer.clientHeight );
772 | 
773 | 				scope.updateScene();
774 | 
775 | 			}, false );
776 | 
777 | 		},
778 | 		clearScene() {
779 | 
780 | 			while ( this.scene.children.length > 0 ) {
781 | 
782 | 				this.scene.remove( this.scene.children[ 0 ] );
783 | 
784 | 			}
785 | 
786 | 			var am_light = new THREE.AmbientLight( 0xFFFFFF, 0.7 ); // soft white light
787 | 			this.scene.add( am_light );
788 | 
789 | 			// Add directional light
790 | 			var spot_light = new THREE.SpotLight( 0xDDDDDD );
791 | 			spot_light.position.set( 84616, - 1, 447422 );
792 | 			spot_light.target = this.scene;
793 | 			spot_light.castShadow = true;
794 | 			spot_light.intensity = 0.4;
795 | 			spot_light.position.normalize();
796 | 			this.scene.add( spot_light );
797 | 
798 | 		},
799 | 		getLods() {
800 | 
801 | 			return this.lods;
802 | 
803 | 		}
804 | 	}
805 | };
806 | </script>
807 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div class="h-100">
   3 |     <div
   4 |       id="helpModal"
   5 |       class="modal fade"
   6 |       tabindex="-1"
   7 |       role="dialog"
   8 |       aria-labelledby="helpModelLabel"
   9 |       aria-hidden="true"
  10 |     >
  11 |       <div
  12 |         class="modal-dialog"
  13 |         role="document"
  14 |       >
  15 |         <div class="modal-content">
  16 |           <div class="modal-header bg-info text-white">
  17 |             <h5
  18 |               id="helpModelLabel"
  19 |               class="modal-title"
  20 |             >
  21 |               <i class="far fa-question-circle mr-1"></i> Help
  22 |             </h5>
  23 |             <button
  24 |               type="button"
  25 |               class="close"
  26 |               data-dismiss="modal"
  27 |               aria-label="Close"
  28 |             >
  29 |               <span aria-hidden="true">&times;</span>
  30 |             </button>
  31 |           </div>
  32 |           <div class="modal-body">
  33 |             <p>This is ninja, our viewer for CityJSON.</p>
  34 |             <p>The source code is available in <a href="https://github.com/cityjson/ninja">GitHub</a>. Have fun and, please, report any issues found <a href="https://github.com/cityjson/ninja/issues">here</a>.</p>
  35 |             <p>Here is what you can do:</p>
  36 |             <ul>
  37 |               <li>Click on an object ID in the tree view on the left to select it.</li>
  38 |               <li>Click or tap on an object in the 3D view to select it.</li>
  39 |               <li>When an object is selected you see a card with it's information (oh, wow)! If you click on a surface with semantics, its information will also be accessible.</li>
  40 |               <li>Toggle between different LoDs by clicking on the corresponding buttons on the bottom left corner of the viewer.</li>
  41 |               <li>Toggle the editing mode with the <i class="fas fa-pen mx-1 text-muted"></i> icon to edit it. Then save the changes.</li>
  42 |               <li>Download the city model with your changes by clicking on <b>Download</b>.</li>
  43 |             </ul>
  44 |           </div>
  45 |         </div>
  46 |       </div>
  47 |     </div>
  48 |     <div
  49 |       id="configModal"
  50 |       class="modal fade"
  51 |       tabindex="-1"
  52 |       role="dialog"
  53 |       aria-labelledby="helpModelLabel"
  54 |       aria-hidden="true"
  55 |     >
  56 |       <div
  57 |         class="modal-dialog"
  58 |         role="document"
  59 |       >
  60 |         <div class="modal-content">
  61 |           <div class="modal-header text-info">
  62 |             <h5
  63 |               id="helpModelLabel"
  64 |               class="modal-title"
  65 |             >
  66 |               <i class="fas fa-sliders-h mr-1"></i> Settings
  67 |             </h5>
  68 |             <button
  69 |               type="button"
  70 |               class="close"
  71 |               data-dismiss="modal"
  72 |               aria-label="Close"
  73 |             >
  74 |               <span aria-hidden="true">&times;</span>
  75 |             </button>
  76 |           </div>
  77 |           <div class="modal-body">
  78 |             <div class="form-group row custom-control custom-switch ml-1">
  79 |               <input
  80 |                 id="cameraLightSwitch"
  81 |                 v-model="cameraLight"
  82 |                 type="checkbox"
  83 |                 class="custom-control-input"
  84 |               >
  85 |               <label
  86 |                 class="custom-control-label"
  87 |                 for="cameraLightSwitch"
  88 |               >Camera light</label>
  89 |             </div>
  90 |             <div class="form-group row custom-control custom-switch ml-1">
  91 |               <input
  92 |                 id="doubleSideSwitch"
  93 |                 v-model="doubleSide"
  94 |                 type="checkbox"
  95 |                 class="custom-control-input"
  96 |               >
  97 |               <label
  98 |                 class="custom-control-label"
  99 |                 for="doubleSideSwitch"
 100 |               >Double side</label>
 101 |             </div>
 102 |             <div class="form-group row custom-control custom-switch ml-1">
 103 |               <input
 104 |                 id="performanceModeSwitch"
 105 |                 v-model="performanceMode"
 106 |                 type="checkbox"
 107 |                 class="custom-control-input"
 108 |               >
 109 |               <label
 110 |                 class="custom-control-label"
 111 |                 for="performanceModeSwitch"
 112 |               >Performance mode</label>
 113 |             </div>
 114 |             <ColorEditor
 115 |               v-model="background_color"
 116 |               name="Background"
 117 |             ></ColorEditor>
 118 |             <ColorEditor
 119 |               v-model="selectionColor"
 120 |               name="Selection"
 121 |             ></ColorEditor>
 122 |             <div
 123 |               id="accordionExample"
 124 |               class="accordion"
 125 |             >
 126 |               <div class="card">
 127 |                 <div
 128 |                   id="headingOne"
 129 |                   class="card-header"
 130 |                 >
 131 |                   <h4 class="mb-0">
 132 |                     <button
 133 |                       class="btn btn-link btn-block text-left collapsed"
 134 |                       type="button"
 135 |                       data-toggle="collapse"
 136 |                       data-target="#collapseOne"
 137 |                       aria-expanded="true"
 138 |                       aria-controls="collapseOne"
 139 |                     >
 140 |                       Object Colours
 141 |                     </button>
 142 |                   </h4>
 143 |                 </div>
 144 | 
 145 |                 <div
 146 |                   id="collapseOne"
 147 |                   class="collapse"
 148 |                   aria-labelledby="headingOne"
 149 |                   data-parent="#accordionExample"
 150 |                 >
 151 |                   <div class="card-body">
 152 |                     <ColorEditor
 153 |                       v-for="(color, type) in object_colors"
 154 |                       :key="type"
 155 |                       v-model="object_colors[type]"
 156 |                       :name="type"
 157 |                     ></ColorEditor>
 158 |                   </div>
 159 |                 </div>
 160 |               </div>
 161 |               <div class="card">
 162 |                 <div
 163 |                   id="headingTwo"
 164 |                   class="card-header"
 165 |                 >
 166 |                   <h4 class="mb-0">
 167 |                     <button
 168 |                       class="btn btn-link btn-block text-left collapsed"
 169 |                       type="button"
 170 |                       data-toggle="collapse"
 171 |                       data-target="#collapseTwo"
 172 |                       aria-expanded="false"
 173 |                       aria-controls="collapseTwo"
 174 |                     >
 175 |                       Surface Colours
 176 |                     </button>
 177 |                   </h4>
 178 |                 </div>
 179 |                 <div
 180 |                   id="collapseTwo"
 181 |                   class="collapse"
 182 |                   aria-labelledby="headingTwo"
 183 |                   data-parent="#accordionExample"
 184 |                 >
 185 |                   <div class="card-body">
 186 |                     <ColorEditor
 187 |                       v-for="(color, type) in surface_colors"
 188 |                       :key="type"
 189 |                       v-model="surface_colors[type]"
 190 |                       :name="type"
 191 |                     ></ColorEditor>
 192 |                   </div>
 193 |                 </div>
 194 |               </div>
 195 |               <div class="card">
 196 |                 <div
 197 |                   id="headingThree"
 198 |                   class="card-header"
 199 |                 >
 200 |                   <h5 class="mb-0">
 201 |                     <button
 202 |                       class="btn btn-link btn-block text-left collapsed"
 203 |                       type="button"
 204 |                       data-toggle="collapse"
 205 |                       data-target="#collapseThree"
 206 |                       aria-expanded="false"
 207 |                       aria-controls="collapseThree"
 208 |                     >
 209 |                       Conditional formatting
 210 |                     </button>
 211 |                   </h5>
 212 |                 </div>
 213 |                 <div
 214 |                   id="collapseThree"
 215 |                   class="collapse"
 216 |                   aria-labelledby="headingThree"
 217 |                   data-parent="#accordionExample"
 218 |                 >
 219 |                   <div class="card-body">
 220 |                     <div class="form-group row custom-control custom-switch ml-1">
 221 |                       <input
 222 |                         id="conditionalFormattingSwitch"
 223 |                         v-model="conditionalFormatting"
 224 |                         type="checkbox"
 225 |                         class="custom-control-input"
 226 |                       >
 227 |                       <label
 228 |                         class="custom-control-label"
 229 |                         for="conditionalFormattingSwitch"
 230 |                       >Show</label>
 231 |                     </div>
 232 |                     <div class="form-group">
 233 |                       <label for="conditionalAttributeSelect">Attribute</label>
 234 |                       <select
 235 |                         id="conditionalAttributeSelect"
 236 |                         class="form-control"
 237 |                         @change="conditionalAttribute = $event.target.value"
 238 |                       >
 239 |                         <option value=""></option>
 240 |                         <option
 241 |                           v-for="attribute in conditionalAttributes"
 242 |                           :key="attribute"
 243 |                         >
 244 |                           {{ attribute }}
 245 |                         </option>
 246 |                       </select>
 247 |                     </div>
 248 |                     <ColorEditor
 249 |                       v-for="(color, type) in attributeColors"
 250 |                       :key="type"
 251 |                       v-model="attributeColors[type]"
 252 |                       :name="type"
 253 |                     ></ColorEditor>
 254 |                   </div>
 255 |                 </div>
 256 |               </div>
 257 |               <div class="card">
 258 |                 <div
 259 |                   id="headingAppearance"
 260 |                   class="card-header"
 261 |                 >
 262 |                   <h5 class="mb-0">
 263 |                     <button
 264 |                       class="btn btn-link btn-block text-left collapsed"
 265 |                       type="button"
 266 |                       data-toggle="collapse"
 267 |                       data-target="#collapseAppearance"
 268 |                       aria-expanded="false"
 269 |                       aria-controls="collapseAppearance"
 270 |                     >
 271 |                       Appearance
 272 |                     </button>
 273 |                   </h5>
 274 |                 </div>
 275 |                 <div
 276 |                   id="collapseAppearance"
 277 |                   class="collapse"
 278 |                   aria-labelledby="headingAppearance"
 279 |                   data-parent="#accordionExample"
 280 |                 >
 281 |                   <div class="card-body">
 282 |                     <div class="form-group">
 283 |                       <label for="materialThemeSelect">Material theme</label>
 284 |                       <select
 285 |                         id="materialThemeSelect"
 286 |                         class="form-control"
 287 |                         @change="activeMaterialTheme = $event.target.value"
 288 |                       >
 289 |                         <option value="undefined"></option>
 290 |                         <option
 291 |                           v-for="theme of materialThemes"
 292 |                           :key="theme"
 293 |                         >
 294 |                           {{ theme }}
 295 |                         </option>
 296 |                       </select>
 297 |                     </div>
 298 |                     <div class="form-group">
 299 |                       <label for="textureThemeSelect">Texture theme</label>
 300 |                       <select
 301 |                         id="textureThemeSelect"
 302 |                         class="form-control"
 303 |                         @change="activeTextureTheme = $event.target.value"
 304 |                       >
 305 |                         <option value="undefined"></option>
 306 |                         <option
 307 |                           v-for="theme of textureThemes"
 308 |                           :key="theme"
 309 |                         >
 310 |                           {{ theme }}
 311 |                         </option>
 312 |                       </select>
 313 |                     </div>
 314 |                     <div class="form-group">
 315 |                       <label for="textureThemeSelect">Textures ({{ resolvedTextures }} / {{ totalTextures }})</label>
 316 |                       <div class="input-group mb-3">
 317 |                         <div class="input-group-prepend">
 318 |                           <span class="input-group-text"><i class="fas fa-image mr-1"></i> Textures</span>
 319 |                         </div>
 320 |                         <div class="custom-file">
 321 |                           <input
 322 |                             id="inputGroupFile01"
 323 |                             ref="textureFile"
 324 |                             type="file"
 325 |                             class="custom-file-input"
 326 |                             multiple="multiple"
 327 |                             @change="uploadTexture"
 328 |                           >
 329 |                           <label
 330 |                             class="custom-file-label"
 331 |                             for="inputGroupFile01"
 332 |                           >Choose file or drop it here...</label>
 333 |                         </div>
 334 |                       </div>
 335 |                     </div>
 336 |                   </div>
 337 |                 </div>
 338 |               </div>
 339 |             </div>
 340 |           </div>
 341 |         </div>
 342 |       </div>
 343 |     </div>
 344 |     <div
 345 |       id="performanceModal"
 346 |       class="modal fade"
 347 |       tabindex="-1"
 348 |       role="dialog"
 349 |       aria-labelledby="performanceModalLabel"
 350 |       aria-hidden="true"
 351 |     >
 352 |       <div
 353 |         class="modal-dialog"
 354 |         role="document"
 355 |       >
 356 |         <div class="modal-content">
 357 |           <div class="modal-header bg-warning text-white">
 358 |             <h5
 359 |               id="performanceModalLabel"
 360 |               class="modal-title"
 361 |             >
 362 |               <i class="fas fa-exclamation-triangle mr-1"></i> Performance mode
 363 |             </h5>
 364 |             <button
 365 |               type="button"
 366 |               class="close"
 367 |               data-dismiss="modal"
 368 |               aria-label="Close"
 369 |             >
 370 |               <span aria-hidden="true">&times;</span>
 371 |             </button>
 372 |           </div>
 373 |           <div class="modal-header">
 374 |             <h5 class="modal-title"></h5>
 375 |           </div>
 376 |           <div class="modal-body">
 377 |             You are about to disable performance mode. This might temporarily
 378 |             make your browser unresponsive while the object list is populated.
 379 |             Depending on your model's size, this might take a few seconds.
 380 | 
 381 |             Are you sure you want to disable performance mode?
 382 |           </div>
 383 |           <div class="modal-footer">
 384 |             <button
 385 |               type="button"
 386 |               class="btn btn-danger"
 387 |               data-dismiss="modal"
 388 |               @click="performanceMode = false"
 389 |             >
 390 |               Go ahead, I am prepared!
 391 |             </button>
 392 |           </div>
 393 |         </div>
 394 |       </div>
 395 |     </div>
 396 |     <nav
 397 |       class="navbar navbar-dark"
 398 |       :class="[ file_loaded ? 'bg-dark' : 'bg-white' ]"
 399 |     >
 400 |       <a
 401 |         class="navbar-brand"
 402 |         :class="[ file_loaded ? 'text-white' : 'text-dark' ]"
 403 |         href="#"
 404 |       ><img
 405 |          v-if=" !file_loaded "
 406 |          :src="require('url:../public/logoBlack.svg')"
 407 |          class="logo-big"
 408 |        >
 409 |         <img
 410 |           v-else
 411 |           :src="require('url:../public/logoWhite.svg')"
 412 |           class="logo-regular"
 413 |         >
 414 |         <span :class="{ 'text-big' : !file_loaded }">ninja</span></a>
 415 |       <div class="d-flex justify-content-end align-items-center col-auto p-0">
 416 |         <div
 417 |           v-show="loading"
 418 |           class="spinner-border text-warning mr-2"
 419 |           role="status"
 420 |         >
 421 |           <span class="sr-only">Loading...</span>
 422 |         </div>
 423 |         <button
 424 |           type="button"
 425 |           class="btn btn-outline-info mr-1"
 426 |           data-toggle="modal"
 427 |           data-target="#configModal"
 428 |         >
 429 |           <i class="fas fa-sliders-h mr-1"></i> Settings
 430 |         </button>
 431 |         <button
 432 |           type="button"
 433 |           class="btn"
 434 |           :class="[ file_loaded ? 'btn-outline-light' : 'btn-outline-dark' ]"
 435 |           data-toggle="modal"
 436 |           data-target="#helpModal"
 437 |         >
 438 |           <i class="far fa-question-circle mr-1"></i> Help
 439 |         </button>
 440 |       </div>
 441 |     </nav>
 442 |     <div
 443 |       v-if="file_loaded"
 444 |       id="main_content"
 445 |     >
 446 |       <div class="container-fluid h-100">
 447 |         <div class="row h-100">
 448 |           <div class="d-sm-none d-lg-block col-lg-1 bg-dark p-0">
 449 |             <ninja-sidebar
 450 |               v-model="active_sidebar"
 451 |               :with_versions="has_versions"
 452 |             ></ninja-sidebar>
 453 |           </div>
 454 |           <div class="col-4 p-0 h-100">
 455 |             <div
 456 |               v-show="active_sidebar == 'objects'"
 457 |               class="h-100"
 458 |             >
 459 |               <div class="h-100 d-flex flex-column">
 460 |                 <div class="p-3 shadow-sm">
 461 |                   <h5>
 462 |                     City Objects
 463 |                     <span
 464 |                       v-if="active_version != null"
 465 |                       class="badge badge-primary mr-1"
 466 |                     >
 467 |                       Version: {{ active_version | truncate(7) }}
 468 |                     </span>
 469 |                     <span class="badge badge-secondary">
 470 |                       {{ (activeCityModel && activeCityModel.CityObjects) ? Object.keys(activeCityModel.CityObjects).length : 0 }} total
 471 |                     </span>
 472 |                   </h5>
 473 |                   <input
 474 |                     v-model="search_term"
 475 |                     type="search"
 476 |                     class="form-control col mb-2 shadow-sm"
 477 |                     placeholder="Search for IDs, object type or attributes..."
 478 |                   >
 479 |                   <div
 480 |                     v-show="file_loaded"
 481 |                     class="d-flex justify-content-end col-auto p-0"
 482 |                   >
 483 |                     <button
 484 |                       class="btn btn-primary col-auto"
 485 |                       @click="downloadModel()"
 486 |                     >
 487 |                       <i class="fas fa-download mr-1"></i> Download
 488 |                     </button>
 489 |                     <button
 490 |                       class="btn btn-danger col-auto ml-2"
 491 |                       @click="reset()"
 492 |                     >
 493 |                       <i class="fas fa-times mr-1"></i> Close
 494 |                     </button>
 495 |                   </div>
 496 |                 </div>
 497 |                 <CityObjectsTree
 498 |                   v-if="! performanceMode"
 499 |                   :citymodel="activeCityModel"
 500 |                   :cityobjects="firstLevelObjects"
 501 |                   :selected_objid="selected_objid"
 502 |                   :matches="matches"
 503 |                   @object_clicked="move_to_object( [ $event, - 1, - 1 ] )"
 504 |                 ></CityObjectsTree>
 505 |                 <div
 506 |                   v-else
 507 |                   class="p-2"
 508 |                 >
 509 |                   <div
 510 |                     class="alert alert-warning"
 511 |                     role="alert"
 512 |                   >
 513 |                     <h4 class="alert-heading">
 514 |                       Performance mode!
 515 |                     </h4>
 516 | 
 517 |                     ninja detected that you have a large number of objects,
 518 |                     therefore you are currently in performance mode. In this
 519 |                     mode, the object list is disabled and certain features may
 520 |                     not work properly. You can still use the 3D view and select
 521 |                     objects.
 522 |                     <hr>
 523 |                     You can choose to disable performance mode at your own risk by
 524 |                     clicking on the button below!
 525 |                   </div>
 526 |                   <button
 527 |                     type="button"
 528 |                     class="btn btn-warning"
 529 |                     data-toggle="modal"
 530 |                     data-target="#performanceModal"
 531 |                   >
 532 |                     Disable performance mode
 533 |                   </button>
 534 |                 </div>
 535 |               </div>
 536 |             </div>
 537 |           </div>
 538 |           <div class="col-7 p-0 h-100">
 539 |             <div
 540 |               class="col-auto m-2"
 541 |               style="position: absolute; z-index: 1"
 542 |             >
 543 |               <CityObjectCard
 544 |                 v-if="existsSelected"
 545 |                 :citymodel="activeCityModel"
 546 |                 :cityobject="activeCityModel.CityObjects[selected_objid]"
 547 |                 :cityobject_id="selected_objid"
 548 |                 :geometry-id="selectedGeometryId"
 549 |                 :boundary-id="selectedBoundaryId"
 550 |                 :expanded="0"
 551 |                 :editable="true"
 552 |                 @input="activeCityModel.CityObjects[selected_objid] = $event"
 553 |                 @close="selected_objid = null"
 554 |               ></CityObjectCard>
 555 |             </div>
 556 |             <ThreeJsViewer
 557 |               ref="viewer"
 558 |               :citymodel="activeCityModel"
 559 |               :selected-objid="selected_objid"
 560 |               :selected-geom-idx="selectedGeometryId"
 561 |               :selected-boundary-idx="selectedBoundaryId"
 562 |               :object-colors="object_colors"
 563 |               :surface-colors="surface_colors"
 564 |               :background-color="background_color"
 565 |               :selection-color="selectionColor"
 566 |               :show-semantics="showSemantics"
 567 |               :active-lod="activeLoD"
 568 |               :camera-spotlight="cameraLight"
 569 |               :highlight-selected-surface="highlightSurface"
 570 |               :conditional-formatting="conditionalFormatting"
 571 |               :conditional-attribute="conditionalAttribute"
 572 |               :attribute-colors="attributeColors"
 573 |               :active-material-theme="activeMaterialTheme"
 574 |               :texture-manager="textureManager"
 575 |               :active-texture-theme="activeTextureTheme"
 576 |               :double-side="doubleSide"
 577 |               :ambient-occlusion="ambientOcclusion"
 578 |               :file-type="file_type"
 579 |               @object_clicked="move_to_object($event)"
 580 |               @rendering="loading = $event"
 581 |               @loadCompleted="onLoadComplete()"
 582 |               @chunkLoaded="availableLoDs = $refs.viewer.getLods()"
 583 |               @objectColorsChanged="object_colors = $event"
 584 |               @surfaceColorsChanged="surface_colors = $event"
 585 |               @attributeColorsChanged="attributeColors = $event"
 586 |             ></ThreeJsViewer>
 587 |             <div
 588 |               style="position: absolute; z-index: 1; bottom: 0px; left: 0px"
 589 |             >
 590 |               <div class="custom-control custom-switch ml-1">
 591 |                 <input
 592 |                   id="surfaceSwitch"
 593 |                   v-model="highlightSurface"
 594 |                   type="checkbox"
 595 |                   class="custom-control-input"
 596 |                 >
 597 |                 <label
 598 |                   class="custom-control-label"
 599 |                   for="surfaceSwitch"
 600 |                 >Select surface</label>
 601 |               </div>
 602 |               <div class="custom-control custom-switch ml-1">
 603 |                 <input
 604 |                   id="semanticsSwitch"
 605 |                   v-model="showSemantics"
 606 |                   type="checkbox"
 607 |                   class="custom-control-input"
 608 |                 >
 609 |                 <label
 610 |                   class="custom-control-label"
 611 |                   for="semanticsSwitch"
 612 |                 >Semantics</label>
 613 |               </div>
 614 |               <div class="custom-control custom-switch ml-1">
 615 |                 <input
 616 |                   id="ambientOcclussionSwitch"
 617 |                   v-model="ambientOcclusion"
 618 |                   type="checkbox"
 619 |                   class="custom-control-input"
 620 |                 >
 621 |                 <label
 622 |                   class="custom-control-label"
 623 |                   for="ambientOcclussionSwitch"
 624 |                 >Ambient Occlusion</label>
 625 |               </div>
 626 |               <div
 627 |                 class="btn-group ml-1 mb-1 bg-white"
 628 |                 role="group"
 629 |                 aria-label="Basic example"
 630 |               >
 631 |                 <button
 632 |                   type="button"
 633 |                   :class="['btn', activeLoD == - 1 ? 'btn-primary' : 'btn-outline-primary']"
 634 |                   @click="activeLoD = - 1"
 635 |                 >
 636 |                   All
 637 |                 </button>
 638 |                 <button
 639 |                   v-for="( lod, idx ) in availableLoDs"
 640 |                   :key="lod"
 641 |                   type="button"
 642 |                   :class="['btn', activeLoD == idx ? 'btn-primary' : 'btn-outline-primary']"
 643 |                   @click="activeLoD = idx"
 644 |                 >
 645 |                   LoD{{ lod }}
 646 |                 </button>
 647 |               </div>
 648 |             </div>
 649 |             <div
 650 |               class="card"
 651 |               style="position: absolute; z-index: 1; bottom: 0px; right: 0px"
 652 |             >
 653 |               <div class="m-1 px-2">
 654 |                 <a
 655 |                   href="https://cityjson.org"
 656 |                   target="_blank"
 657 |                 ><img
 658 |                   src="https://www.cityjson.org/assets/images/cityjson_logo.svg"
 659 |                   alt=""
 660 |                 ></a>
 661 |               </div>
 662 |               <div class="m-1 px-2">
 663 |                 <a
 664 |                   class="card-link"
 665 |                   href="https://github.com/cityjson/ninja"
 666 |                   target="_blank"
 667 |                 ><i class="fab fa-github"></i> ninja v0.8.2</a>
 668 |               </div>
 669 |             </div>
 670 |           </div>
 671 |         </div>
 672 |       </div>
 673 |     </div>
 674 |     <div v-else>
 675 |       <div
 676 |         class="container"
 677 |         style="width:75%; max-width: 680px"
 678 |       >
 679 |         <div class="row">
 680 |           <main class="col-12 py-md-3 pl-md-5">
 681 |             <h2>File upload</h2>
 682 |             <p>Upload a CityJSON (.json) or CityJSONSeq (.jsonl) file to have fun!</p>
 683 |             <div class="input-group mb-3">
 684 |               <div class="input-group-prepend">
 685 |                 <span class="input-group-text"><i class="fas fa-upload mr-1"></i> Upload</span>
 686 |               </div>
 687 |               <div class="custom-file">
 688 |                 <input
 689 |                   id="inputGroupFile01"
 690 |                   ref="cityJSONFile"
 691 |                   type="file"
 692 |                   class="custom-file-input"
 693 |                   accept=".json,.jsonl"
 694 |                   @change="selectedFile"
 695 |                 >
 696 |                 <label
 697 |                   class="custom-file-label"
 698 |                   for="inputGroupFile01"
 699 |                 >Choose file or drop it here...</label>
 700 |               </div>
 701 |             </div>
 702 |             <div
 703 |               v-show="error_message"
 704 |               class="alert alert-danger"
 705 |               role="alert"
 706 |             >
 707 |               {{ error_message }}
 708 |               <button
 709 |                 type="button"
 710 |                 class="close"
 711 |                 data-dismiss="alert"
 712 |                 aria-label="Close"
 713 |               >
 714 |                 <span aria-hidden="true">&times;</span>
 715 |               </button>
 716 |             </div>
 717 |           </main>
 718 |         </div>
 719 |       </div>
 720 |     </div>
 721 |   </div>
 722 | </template>
 723 | 
 724 | <script>
 725 | import ColorEditor from './components/ColorEditor.vue';
 726 | import NinjaSidebar from './components/NinjaSidebar.vue';
 727 | import { AttributeEvaluator, TextureManager } from 'cityjson-threejs-loader';
 728 | import CityObjectCard from './lib-components/CityObjectCard.vue';
 729 | import CityObjectsTree from './lib-components/CityObjectsTree.vue';
 730 | import ThreeJsViewer from './lib-components/ThreeJsViewer.vue';
 731 | import { CityJSONSeqUtils } from './helpers/cjseq';
 732 | import $ from 'jquery';
 733 | import _ from 'lodash';
 734 | 
 735 | export default {
 736 | 	name: 'App',
 737 | 	components: {
 738 | 		ColorEditor,
 739 | 		NinjaSidebar,
 740 | 		ThreeJsViewer,
 741 | 		CityObjectsTree,
 742 | 		CityObjectCard
 743 | 	},
 744 | 	data: function () {
 745 | 
 746 | 		return {
 747 | 			file_loaded: false,
 748 | 			search_term: "",
 749 | 			citymodel: {},
 750 | 			selected_objid: null,
 751 | 			selectedGeometryId: - 1,
 752 | 			selectedBoundaryId: - 1,
 753 | 			loading: false,
 754 | 			error_message: null,
 755 | 			file_type: "json",
 756 | 			active_sidebar: 'objects', // objects/versions
 757 | 			has_versions: false,
 758 | 			active_branch: 'master',
 759 | 			active_version: null,
 760 | 			object_colors: {
 761 | 				"Building": 0x7497df,
 762 | 				"BuildingPart": 0x7497df,
 763 | 				"BuildingInstallation": 0x7497df,
 764 | 				"Bridge": 0x999999,
 765 | 				"BridgePart": 0x999999,
 766 | 				"BridgeInstallation": 0x999999,
 767 | 				"BridgeConstructionElement": 0x999999,
 768 | 				"CityObjectGroup": 0xffffb3,
 769 | 				"CityFurniture": 0xcc0000,
 770 | 				"GenericCityObject": 0xcc0000,
 771 | 				"LandUse": 0xffffb3,
 772 | 				"PlantCover": 0x39ac39,
 773 | 				"Railway": 0x000000,
 774 | 				"Road": 0x999999,
 775 | 				"SolitaryVegetationObject": 0x39ac39,
 776 | 				"TINRelief": 0xffdb99,
 777 | 				"TransportSquare": 0x999999,
 778 | 				"Tunnel": 0x999999,
 779 | 				"TunnelPart": 0x999999,
 780 | 				"TunnelInstallation": 0x999999,
 781 | 				"WaterBody": 0x4da6ff
 782 | 			},
 783 | 			surface_colors: {
 784 | 				"GroundSurface": 0x999999,
 785 | 				"WallSurface": 0xffffff,
 786 | 				"RoofSurface": 0xff0000,
 787 | 				"TrafficArea": 0x6e6e6e,
 788 | 				"AuxiliaryTrafficArea": 0x2c8200,
 789 | 				"Window": 0x0059ff,
 790 | 				"Door": 0x640000
 791 | 			},
 792 | 			background_color: 0xd9eefc,
 793 | 			selectionColor: 0xffc107,
 794 | 			showSemantics: true,
 795 | 			highlightSurface: false,
 796 | 			availableLoDs: [],
 797 | 			activeLoD: - 1,
 798 | 			cameraLight: false,
 799 | 			doubleSide: true,
 800 | 			ambientOcclusion: false,
 801 | 			performanceMode: false,
 802 | 			conditionalFormatting: false,
 803 | 			conditionalAttribute: '',
 804 | 			attributeColors: {},
 805 | 			materialThemes: [],
 806 | 			activeMaterialTheme: 'undefined',
 807 | 			textureManager: null,
 808 | 			textureThemes: [],
 809 | 			activeTextureTheme: 'undefined'
 810 | 		};
 811 | 
 812 | 	},
 813 | 	computed: {
 814 | 		activeCityModel: function () {
 815 | 
 816 | 			if ( this.active_version != null ) {
 817 | 
 818 | 				return this.extract_citymodel( this.active_version );
 819 | 
 820 | 			} else {
 821 | 
 822 | 				return this.citymodel;
 823 | 
 824 | 			}
 825 | 
 826 | 		},
 827 | 		logoUrl: function () {
 828 | 
 829 | 			if ( this.file_loaded ) {
 830 | 
 831 | 				return "logoWhite.svg";
 832 | 
 833 | 			}
 834 | 
 835 | 			return "logoBlack.svg";
 836 | 
 837 | 		},
 838 | 		firstLevelObjects: function () {
 839 | 
 840 | 			return _.pickBy( this.activeCityModel.CityObjects, function ( cityobject ) {
 841 | 
 842 | 				return ! ( cityobject.parents && cityobject.parents.length > 0 );
 843 | 
 844 | 			} );
 845 | 
 846 | 		},
 847 | 		filteredCityObjects: function () {
 848 | 
 849 | 			var result = _.pickBy( this.activeCityModel.CityObjects, function ( value, key ) {
 850 | 
 851 | 				var regex = RegExp( this.search_term, "i" );
 852 | 				var obj_json = JSON.stringify( value );
 853 | 				return regex.test( key ) | regex.test( obj_json );
 854 | 
 855 | 			} );
 856 | 
 857 | 			return result;
 858 | 
 859 | 		},
 860 | 		existsSelected: function () {
 861 | 
 862 | 			return this.selected_objid != null;
 863 | 
 864 | 		},
 865 | 		conditionalAttributes: function () {
 866 | 
 867 | 			if ( ! this.citymodel || ! this.citymodel.CityObjects ) {
 868 | 
 869 | 				return [];
 870 | 
 871 | 			}
 872 | 
 873 | 			const attributes = new Set( Object.keys( this.citymodel.CityObjects ).map( objId => {
 874 | 
 875 | 				const cityobject = this.citymodel.CityObjects[ objId ];
 876 | 
 877 | 				if ( cityobject && cityobject.attributes && typeof cityobject.attributes === 'object' && cityobject.attributes !== null ) {
 878 | 
 879 | 					return Object.keys( cityobject.attributes );
 880 | 
 881 | 				}
 882 | 
 883 | 				return [];
 884 | 
 885 | 			} ).flat() );
 886 | 
 887 | 			const atts = [ ...attributes ].filter( a => {
 888 | 
 889 | 				const evaluator = new AttributeEvaluator( this.citymodel, a, false );
 890 | 
 891 | 				return evaluator.getUniqueValues().length > 1 && evaluator.getUniqueValues().length < 20;
 892 | 
 893 | 			} );
 894 | 
 895 | 			return atts;
 896 | 
 897 | 		},
 898 | 		totalTextures: function () {
 899 | 
 900 | 			if ( this.textureManager ) {
 901 | 
 902 | 				return this.textureManager.totalTextures;
 903 | 
 904 | 			}
 905 | 
 906 | 			return 0;
 907 | 
 908 | 		},
 909 | 		resolvedTextures: function () {
 910 | 
 911 | 			if ( this.textureManager ) {
 912 | 
 913 | 				return this.textureManager.resolvedTextures;
 914 | 
 915 | 			}
 916 | 
 917 | 			return 0;
 918 | 
 919 | 		}
 920 | 	},
 921 | 	methods: {
 922 | 		extract_citymodel( vid ) {
 923 | 
 924 | 			var object_dict = this.citymodel.versioning.versions[ vid ].objects;
 925 | 			var original_objects = this.citymodel.CityObjects;
 926 | 
 927 | 			var result = $.extend( {}, this.citymodel );
 928 | 
 929 | 			result[ "CityObjects" ] = {};
 930 | 
 931 | 			delete result[ "versioning" ];
 932 | 
 933 | 			Object.keys( object_dict ).forEach( ( key ) => {
 934 | 
 935 | 				result[ "CityObjects" ][ key ] = $.extend( {}, original_objects[ object_dict[ key ] ] );
 936 | 
 937 | 			} );
 938 | 
 939 | 			return result;
 940 | 
 941 | 		},
 942 | 		move_to_object( ids ) {
 943 | 
 944 | 			if ( ids ) {
 945 | 
 946 | 				// `ids` is in the form of [ objectId, geometryId, boudnaryId ]
 947 | 				this.selected_objid = ids[ 0 ];
 948 | 				this.selectedGeometryId = ids[ 1 ];
 949 | 				this.selectedBoundaryId = ids[ 2 ];
 950 | 
 951 | 			} else {
 952 | 
 953 | 				this.selected_objid = null;
 954 | 				this.selectedGeometryId = - 1;
 955 | 				this.selectedBoundaryId = - 1;
 956 | 
 957 | 			}
 958 | 
 959 | 		},
 960 | 		reset() {
 961 | 
 962 | 			this.citymodel = {};
 963 | 			this.search_term = "";
 964 | 			this.file_loaded = false;
 965 | 			this.file_type = "json";
 966 | 
 967 | 		},
 968 | 		matches( coid, cityobject ) {
 969 | 
 970 | 			var regex = RegExp( this.search_term, "i" );
 971 | 			var obj_json = JSON.stringify( cityobject );
 972 | 			if ( cityobject.children && cityobject.children.length > 0 ) {
 973 | 
 974 | 				return regex.test( coid ) || regex.test( obj_json ) || cityobject.children.some( obj_id => {
 975 | 
 976 | 					return this.matches( obj_id, this.citymodel.CityObjects[ obj_id ] );
 977 | 
 978 | 				} );
 979 | 
 980 | 			} else {
 981 | 
 982 | 				return regex.test( coid ) || regex.test( obj_json );
 983 | 
 984 | 			}
 985 | 
 986 | 		},
 987 | 		validateCityJSON( cm ) {
 988 | 
 989 | 			if ( cm.type !== "CityJSON" ) {
 990 | 
 991 | 				this.error_message = "This is not a CityJSON file!";
 992 | 
 993 | 				return false;
 994 | 
 995 | 			}
 996 | 
 997 | 			return true;
 998 | 
 999 | 		},
1000 | 		uploadTexture() {
1001 | 
1002 | 			const files = this.$refs.textureFile.files;
1003 | 
1004 | 			for ( const file in files ) {
1005 | 
1006 | 				this.textureManager.setTextureFromFile( files[ file ] );
1007 | 
1008 | 			}
1009 | 
1010 | 		},
1011 | 		 selectedFile() {
1012 | 
1013 | 			this.loading = true;
1014 | 			let cm;
1015 | 
1016 | 			let file = this.$refs.cityJSONFile.files[ 0 ];
1017 | 			if ( ! file ) {
1018 | 
1019 | 				this.error_message = "No file selected!";
1020 | 				this.loading = false;
1021 | 				return;
1022 | 
1023 | 			}
1024 | 
1025 | 			// Determine file type based on extension
1026 | 			const fileName = file.name.toLowerCase();
1027 | 			if ( fileName.endsWith( '.json' ) ) {
1028 | 
1029 | 				this.file_type = "json";
1030 | 
1031 | 			} else if ( fileName.endsWith( '.jsonl' ) ) {
1032 | 
1033 | 				this.file_type = "jsonl";
1034 | 
1035 | 			} else {
1036 | 
1037 | 				this.error_message = "Please select a .json or .jsonl file!";
1038 | 				this.loading = false;
1039 | 				return;
1040 | 
1041 | 			}
1042 | 
1043 | 			let reader = new FileReader();
1044 | 			reader.readAsText( file, "UTF-8" );
1045 | 			reader.onload = async evt => {
1046 | 
1047 | 				const fileContent = evt.target.result;
1048 | 
1049 | 				if ( this.file_type === "jsonl" ) {
1050 | 
1051 | 					// For CityJSONSeq files, validate the first line
1052 | 					if ( CityJSONSeqUtils.validateCityJSONSeq( fileContent ) === false ) {
1053 | 
1054 | 						this.error_message = 'Invalid CityJSONSeq file';
1055 | 						this.loading = false;
1056 | 						return;
1057 | 
1058 | 					}
1059 | 
1060 | 					const util = new CityJSONSeqUtils();
1061 | 					cm = await util.toCityJSON( fileContent );
1062 | 
1063 | 				} else {
1064 | 
1065 | 					// For regular CityJSON files, parse and validate
1066 | 					cm = JSON.parse( fileContent );
1067 | 
1068 | 					if ( this.validateCityJSON( cm ) === false ) {
1069 | 
1070 | 						this.loading = false;
1071 | 						return;
1072 | 
1073 | 					}
1074 | 
1075 | 				}
1076 | 
1077 | 
1078 | 				this.performanceMode = Object.keys( cm.CityObjects ).length > 10000;
1079 | 				this.citymodel = this.performanceMode ? Object.freeze( cm ) : cm;
1080 | 				this.has_versions = "versioning" in cm;
1081 | 
1082 | 				this.file_loaded = true;
1083 | 				this.loading = false;
1084 | 
1085 | 			};
1086 | 
1087 | 		},
1088 | 		download( filename, text ) {
1089 | 
1090 | 			var element = document.createElement( 'a' );
1091 | 			element.setAttribute( 'href', 'data:application/json;charset=utf-8,' + encodeURIComponent( text ) );
1092 | 			element.setAttribute( 'download', filename );
1093 | 
1094 | 			element.style.display = 'none';
1095 | 			document.body.appendChild( element );
1096 | 
1097 | 			element.click();
1098 | 
1099 | 			document.body.removeChild( element );
1100 | 
1101 | 		},
1102 | 		downloadModel() {
1103 | 
1104 | 			var text = JSON.stringify( this.citymodel );
1105 | 
1106 | 			this.download( "citymodel.json", text );
1107 | 
1108 | 		},
1109 | 		getMaterialThemes( citymodel ) {
1110 | 
1111 | 			if ( ! citymodel || ! citymodel.CityObjects ) {
1112 | 
1113 | 				return [];
1114 | 
1115 | 			}
1116 | 
1117 | 			const themes = Object.entries( citymodel.CityObjects ).map( cityobject => {
1118 | 
1119 | 				const [ , obj ] = cityobject;
1120 | 
1121 | 				if ( obj && obj.geometry && Array.isArray( obj.geometry ) ) {
1122 | 
1123 | 					return obj.geometry.map( geom => {
1124 | 
1125 | 						if ( geom && geom.material ) {
1126 | 
1127 | 							return Object.keys( geom.material );
1128 | 
1129 | 						} else {
1130 | 
1131 | 							return [];
1132 | 
1133 | 						}
1134 | 
1135 | 					} );
1136 | 
1137 | 				} else {
1138 | 
1139 | 					return [];
1140 | 
1141 | 				}
1142 | 
1143 | 
1144 | 			} ).flat( 2 );
1145 | 
1146 | 			return [ ... new Set( themes ) ];
1147 | 
1148 | 		},
1149 | 		getTextureThemes( citymodel ) {
1150 | 
1151 | 			if ( ! citymodel || ! citymodel.CityObjects ) {
1152 | 
1153 | 				return [];
1154 | 
1155 | 			}
1156 | 
1157 | 			const themes = Object.entries( citymodel.CityObjects ).map( cityobject => {
1158 | 
1159 | 				const [ , obj ] = cityobject;
1160 | 
1161 | 				if ( obj && obj.geometry && Array.isArray( obj.geometry ) ) {
1162 | 
1163 | 					return obj.geometry.map( geom => {
1164 | 
1165 | 						if ( geom && geom.texture ) {
1166 | 
1167 | 							return Object.keys( geom.texture );
1168 | 
1169 | 						} else {
1170 | 
1171 | 							return [];
1172 | 
1173 | 						}
1174 | 
1175 | 					} );
1176 | 
1177 | 				} else {
1178 | 
1179 | 					return [];
1180 | 
1181 | 				}
1182 | 
1183 | 
1184 | 			} ).flat( 2 );
1185 | 
1186 | 			return [ ... new Set( themes ) ];
1187 | 
1188 | 		},
1189 | 		onLoadComplete() {
1190 | 
1191 | 			this.materialThemes = this.getMaterialThemes( this.citymodel );
1192 | 			this.textureThemes = this.getTextureThemes( this.citymodel );
1193 | 			this.textureManager = new TextureManager( this.citymodel );
1194 | 
1195 | 		}
1196 | 	}
1197 | };
1198 | </script>
1199 | 
1200 | <style scoped>
1201 | .logo-big {
1202 |   position: absolute;
1203 |   height: 120px;
1204 | }
1205 | 
1206 | .logo-regular {
1207 |   height: 24px;
1208 | }
1209 | 
1210 | .text-big {
1211 |   padding-left: 140px;
1212 | }
1213 | </style>
1214 | 


--------------------------------------------------------------------------------