Introduce demo skeleton code
This commit is contained in:
parent
f4b8212280
commit
ef040b61bf
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Pathfinder Demo</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
|
||||||
|
<script type="text/javascript" src="js/jquery/jquery.js"></script>
|
||||||
|
<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
|
||||||
|
<script type="text/javascript" src="js/pathfinder.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
#pf-load-font-button-label {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1em;
|
||||||
|
right: 1em;
|
||||||
|
}
|
||||||
|
#pf-canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
|
||||||
|
<a class="navbar-brand" href="#">Pathfinder Demo</a>
|
||||||
|
<div class="collapse navbar-collapse">
|
||||||
|
<ul class="navbar-nav mr-auto">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#">Text</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<canvas id="pf-canvas" width="400" height="300"></canvas>
|
||||||
|
<label class="btn btn-secondary btn-file" id="pf-load-font-button-label">
|
||||||
|
Load Font…
|
||||||
|
<input type="file" style="display: none" id="pf-load-font-button">
|
||||||
|
</label>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,16 @@
|
||||||
|
// pathfinder/demo/index.ts
|
||||||
|
|
||||||
|
const liveServer = require('live-server');
|
||||||
|
|
||||||
|
const serverParams = {
|
||||||
|
open: false,
|
||||||
|
file: "index.html",
|
||||||
|
mount: [
|
||||||
|
["/css/bootstrap", "node_modules/bootstrap/dist/css"],
|
||||||
|
["/js/bootstrap", "node_modules/bootstrap/dist/js"],
|
||||||
|
["/js/jquery", "node_modules/jquery/dist"],
|
||||||
|
["/js/pathfinder.js", "pathfinder.js"]
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
liveServer.start(serverParams);
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"name": "pathfinder-demo",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Demo for Pathfinder 2",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "Patrick Walton <pcwalton@mimiga.net>",
|
||||||
|
"license": "MIT OR Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/node": "^8.0.19",
|
||||||
|
"bootstrap": "^4.0.0-alpha.6",
|
||||||
|
"live-server": "^1.2.0",
|
||||||
|
"opentype.js": "^0.7.3",
|
||||||
|
"ts-loader": "^2.3.2",
|
||||||
|
"typescript": "^2.4.2",
|
||||||
|
"webpack": "^3.4.1"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,43 @@
|
||||||
|
// pathfinder/demo/src/index.ts
|
||||||
|
|
||||||
|
const opentype = require('opentype.js');
|
||||||
|
|
||||||
|
class AppController {
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
this.view = new PathfinderView(document.getElementById('pf-canvas') as HTMLCanvasElement);
|
||||||
|
|
||||||
|
this.loadFontButton = document.getElementById('pf-load-font-button') as HTMLInputElement;
|
||||||
|
this.loadFontButton.addEventListener('change', () => this.loadFont(), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadFont() {
|
||||||
|
const file = this.loadFontButton.files[0];
|
||||||
|
const fileURL = window.URL.createObjectURL(file);
|
||||||
|
opentype.load(fileURL, (err, font) => this.fontLoaded(font));
|
||||||
|
}
|
||||||
|
|
||||||
|
fontLoaded(font) {
|
||||||
|
// TODO(pcwalton)
|
||||||
|
}
|
||||||
|
|
||||||
|
view: PathfinderView;
|
||||||
|
loadFontButton: HTMLInputElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
class PathfinderView {
|
||||||
|
constructor(canvas: HTMLCanvasElement) {
|
||||||
|
this.canvas = canvas;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas: HTMLCanvasElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
const controller = new AppController;
|
||||||
|
window.addEventListener('load', () => controller.start(), false);
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es6",
|
||||||
|
"module": "commonjs",
|
||||||
|
"types": [
|
||||||
|
"node"
|
||||||
|
],
|
||||||
|
"typeRoots": [
|
||||||
|
"node_modules/@types"
|
||||||
|
],
|
||||||
|
"sourceMap": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"index.ts",
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,20 @@
|
||||||
|
module.exports = {
|
||||||
|
devtool: 'inline-source-map',
|
||||||
|
entry: "./src/index.ts",
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.tsx?$/,
|
||||||
|
use: 'ts-loader',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: [".tsx", ".ts", ".js"],
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
filename: "pathfinder.js",
|
||||||
|
path: __dirname,
|
||||||
|
},
|
||||||
|
}
|
Loading…
Reference in New Issue