Introduce demo skeleton code
This commit is contained in:
Patrick Walton
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