-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e31952c
commit 1ddfc54
Showing
13 changed files
with
4,062 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
node_modules/ | ||
build/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
// See http://go.microsoft.com/fwlink/?LinkId=827846 | ||
// for the documentation about the extensions.json format | ||
"recommendations": [ | ||
"esbenp.prettier-vscode", | ||
"eg2.tslint" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"prettier.tabWidth": 2, | ||
"editor.tabSize": 2 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2017 Rapal Oy | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,12 @@ | ||
# optimaze-viewer-example | ||
Example application for the `optimaze-viewer` library. Written in TypeScript and using Webpack. | ||
|
||
This is an example application for the [`optimaze-viewer`](https://github.com/rapal/optimaze-viewer) library. | ||
It is written in TypeScript and uses Webpack for bundling. | ||
|
||
Note: The API which this application uses is not yet published but will be published later in 2017. | ||
|
||
## Usage | ||
|
||
1. Run `yarn` to install dependencies | ||
2. Run `yarn start` to start dev server | ||
3. Alternatively, run `yarn build` and open `index.html` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<title>optimaze-viewer-example</title> | ||
<script src="build/bundle.js"></script> | ||
<link rel="stylesheet" href="build/bundle.css" /> | ||
</head> | ||
|
||
<body> | ||
<div id="viewer"></div> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
{ | ||
"name": "@rapal/optimaze-viewer-example", | ||
"version": "0.1.0", | ||
"main": "index.html", | ||
"author": "Rapal Oy", | ||
"license": "MIT", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/rapal/optimaze-viewer-example" | ||
}, | ||
"scripts": { | ||
"build": "yarn run lint && rimraf build && webpack", | ||
"start": "webpack-dev-server", | ||
"lint": "tslint --config tslint.json --project tsconfig.json" | ||
}, | ||
"devDependencies": { | ||
"css-loader": "^0.28.7", | ||
"extract-text-webpack-plugin": "^3.0.0", | ||
"file-loader": "^0.11.2", | ||
"path": "^0.12.7", | ||
"rimraf": "^2.6.2", | ||
"ts-loader": "^2.3.7", | ||
"tslint": "^5.7.0", | ||
"typescript": "^2.5.2", | ||
"webpack": "^3.6.0", | ||
"webpack-dev-server": "^2.8.2" | ||
}, | ||
"dependencies": { | ||
"@rapal/optimaze-viewer": "^0.1.0", | ||
"@types/leaflet": "^1.2.0", | ||
"@types/q": "^1.0.5", | ||
"leaflet": "^1.2.0", | ||
"q": "^1.5.0" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
body { | ||
margin: 0; | ||
} | ||
#viewer { | ||
height: 100vh; | ||
} | ||
.leaflet-container { | ||
background: transparent; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,141 @@ | ||
import * as L from "leaflet"; | ||
import * as Q from "q"; | ||
import { | ||
Viewer, | ||
Space, | ||
Element, | ||
GraphicsLayer, | ||
IDimensions, | ||
IBoundary, | ||
ICoordinate | ||
} from "@rapal/optimaze-viewer"; | ||
|
||
import "leaflet/dist/leaflet.css"; | ||
import "./app.css"; | ||
|
||
// Specify company id | ||
const companyId = 1361; | ||
|
||
// Get floor id from URL params or use default | ||
const params = new URLSearchParams(document.location.search.substring(1)); | ||
const floorId = params.get("floorId") || "m2033625"; | ||
|
||
// TODO: Replace with production URL once API is published | ||
// TODO: Add support for authentication | ||
const baseUrl = "http://localhost/space/api/public/v1/"; | ||
|
||
const graphicsUrl = `${baseUrl}/${companyId}/floors/${floorId}/graphics`; | ||
const seatsUrl = `${baseUrl}/${companyId}/seats?floorId=${floorId}`; | ||
|
||
function getTileUrlTemplate(layer: GraphicsLayer) { | ||
return `${baseUrl}/${companyId}/floors/${floorId}/tiles?layer=${layer}&x={x}&y={y}&z={z}`; | ||
} | ||
|
||
function getJson<TData>(url: string) { | ||
return fetch(url, { credentials: "include" }).then<TData>(r => r.json()); | ||
} | ||
|
||
Q.all([ | ||
getJson<IFloorGraphics>(graphicsUrl), | ||
getJson<IList<ISeat>>(seatsUrl) | ||
]).then(values => { | ||
const floor = values[0]; | ||
const seats = values[1].items; | ||
|
||
const viewer = new Viewer("viewer", floor.dimensions); | ||
|
||
// Add all available tile layers | ||
// floor.graphicsLayers.forEach(l => | ||
// viewer.addTileLayer(getTileUrlTemplate(l)) | ||
// ); | ||
|
||
// Or add specific tile layer | ||
viewer.addTileLayer(getTileUrlTemplate(GraphicsLayer.Architect)); | ||
|
||
// Creating custom panes is not neccessary, but makes sure | ||
// that elements of the same type are shown at the same z-index | ||
viewer.createPane("seats"); | ||
|
||
// Create selectable space layers | ||
const spaceLayers = floor.spaceGraphics.map(s => { | ||
return new Space(s.id, s.boundaries, { | ||
selectable: true | ||
}); | ||
}); | ||
|
||
spaceLayers.forEach(space => { | ||
// Add to map | ||
viewer.addLayer(space); | ||
|
||
// Deselect other spaces and log space id when selected | ||
space.on("select", e => { | ||
const id = e.target.id; | ||
spaceLayers.filter(s => s.id !== id).forEach(s => (s.selected = false)); | ||
console.log("select space " + id); | ||
}); | ||
|
||
// Log space id when deselected | ||
space.on("deselect", e => { | ||
const id = e.target.id; | ||
console.log("deselect space " + id); | ||
}); | ||
}); | ||
|
||
// Create selectable seat layer | ||
// Seats are shown as circles with 500mm radius | ||
// Seat styles are specified using the style function | ||
const seatLayers = seats.map(s => { | ||
const circle = L.circle(L.latLng(s.y, s.x), { radius: 500, pane: "seats" }); | ||
return new Element(s.id.toString(), [circle], { | ||
selectable: true, | ||
styleFunction: e => ({ | ||
color: e.selected ? "#f00" : "#666", | ||
weight: e.selected ? 2 : 1, | ||
opacity: 1, | ||
fillColor: e.selected ? "#faa" : "#ccc", | ||
fillOpacity: 1, | ||
pane: "seats" | ||
}) | ||
}); | ||
}); | ||
|
||
seatLayers.forEach(seat => { | ||
// Add to map | ||
viewer.addLayer(seat); | ||
|
||
// Deselect other seats and log seat id when selected | ||
seat.on("select", e => { | ||
const id = e.target.id; | ||
seatLayers.filter(s => s.id !== id).forEach(s => (s.selected = false)); | ||
console.log("select seat " + id); | ||
}); | ||
|
||
// Log seat id when deselected | ||
seat.on("deselect", e => { | ||
const id = e.target.id; | ||
console.log("deselect seat " + id); | ||
}); | ||
}); | ||
}); | ||
|
||
interface IFloorGraphics { | ||
dimensions: IDimensions; | ||
graphicsLayers: GraphicsLayer[]; | ||
spaceGraphics: ISpaceGraphics[]; | ||
scale: number; | ||
} | ||
|
||
interface ISpaceGraphics { | ||
id: string; | ||
boundaries: IBoundary[]; | ||
} | ||
|
||
interface IList<TItem> { | ||
items: TItem[]; | ||
} | ||
|
||
interface ISeat { | ||
id: number; | ||
x: number; | ||
y: number; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "es5", | ||
"sourceMap": true, | ||
"moduleResolution": "node", | ||
"noImplicitAny": true, | ||
"strictNullChecks": true | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
"defaultSeverity": "error", | ||
"extends": ["tslint:recommended"], | ||
"jsRules": {}, | ||
"rules": { | ||
"arrow-parens": false, | ||
"object-literal-sort-keys": false, | ||
"trailing-comma": false, | ||
"member-ordering": false, | ||
"ordered-imports": false, | ||
"no-console": false | ||
}, | ||
"rulesDirectory": [] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
var path = require("path"); | ||
var ExtractTextPlugin = require("extract-text-webpack-plugin"); | ||
|
||
module.exports = { | ||
devtool: "inline-source-map", | ||
entry: "./src/app.ts", | ||
output: { | ||
path: path.resolve("build"), | ||
filename: "bundle.js" | ||
}, | ||
plugins: [ | ||
new ExtractTextPlugin({ | ||
filename: "bundle.css" | ||
}) | ||
], | ||
resolve: { | ||
modules: [path.resolve("node_modules")], | ||
extensions: [".ts", ".js"] | ||
}, | ||
module: { | ||
loaders: [ | ||
{ | ||
test: /\.ts$/, | ||
include: path.resolve("src"), | ||
loader: "ts-loader" | ||
}, | ||
{ | ||
test: /\.css$/, | ||
loader: ExtractTextPlugin.extract({ | ||
use: "css-loader" | ||
}) | ||
}, | ||
{ | ||
test: /\.png$/, | ||
loader: "file-loader" | ||
} | ||
] | ||
} | ||
}; |
Oops, something went wrong.