michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use ES6 templates to reduce duplication in the demo HTML

This commit is contained in:
Patrick Walton 2017-08-29 16:04:40 -07:00
parent cd3c1c996c
commit 40c0e9b8c5
10 changed files with 67 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
/font-renderer/target /font-renderer/target
/partitioner/target /partitioner/target
/demo/client/target /demo/client/target
/demo/client/*.html
/demo/client/*.js /demo/client/*.js
/demo/client/src/*.js /demo/client/src/*.js
/demo/client/src/*.js.map /demo/client/src/*.js.map

5
demo/client/html/include/header.html Normal file
View File

@ -0,0 +1,5 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/css/pathfinder.css">
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>

15
demo/client/html/include/navbar.html Normal file
View File

@ -0,0 +1,15 @@
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<a class="navbar-brand" href="#">Pathfinder</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" id="pf-demos-menu" data-toggle="dropdown"
ref="/" aria-haspopup="true" aria-expanded="false">Demos</a>
<div class="dropdown-menu" aria-labelledby="pf-demos-menu">
<a class="dropdown-item" href="/">Text</a>
<a class="dropdown-item" href="/svg">SVG</a>
</div>
</li>
</ul>
</div>
</nav>

23
demo/client/html/svg.html
View File

@ -3,30 +3,11 @@
<head> <head>
<title>SVG &mdash; Pathfinder Demo</title> <title>SVG &mdash; Pathfinder Demo</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ${require('./include/header.html')}
<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/css/pathfinder.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/svg.js"></script> <script type="text/javascript" src="js/pathfinder/svg.js"></script>
</head> </head>
<body> <body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> ${require('./include/navbar.html')}
<a class="navbar-brand" href="#">Pathfinder</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" id="pf-demos-menu"
data-toggle="dropdown" ref="/" aria-haspopup="true"
aria-expanded="false">Demos</a>
<div class="dropdown-menu" aria-labelledby="pf-demos-menu">
<a class="dropdown-item" href="/">Text</a>
<a class="dropdown-item" href="/svg">SVG</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div> <div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div>
<canvas id="pf-canvas" width="400" height="300"></canvas> <canvas id="pf-canvas" width="400" height="300"></canvas>
<svg id="pf-svg" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg> <svg id="pf-svg" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>

23
demo/client/html/text.html
View File

@ -3,30 +3,11 @@
<head> <head>
<title>Text &mdash; Pathfinder Demo</title> <title>Text &mdash; Pathfinder Demo</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ${require('./include/header.html')}
<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/css/pathfinder.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/text.js"></script> <script type="text/javascript" src="js/pathfinder/text.js"></script>
</head> </head>
<body> <body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> ${require('./include/navbar.html')}
<a class="navbar-brand" href="#">Pathfinder</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" id="pf-demos-menu"
data-toggle="dropdown" ref="/" aria-haspopup="true"
aria-expanded="false">Demos</a>
<div class="dropdown-menu" aria-labelledby="pf-demos-menu">
<a class="dropdown-item" href="/">Text</a>
<a class="dropdown-item" href="/svg">SVG</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div> <div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div>
<canvas id="pf-canvas" width="400" height="300"></canvas> <canvas id="pf-canvas" width="400" height="300"></canvas>
<label class="btn btn-secondary btn-file pf-bottom-control" id="pf-load-font-button-label"> <label class="btn btn-secondary btn-file pf-bottom-control" id="pf-load-font-button-label">

3
demo/client/package.json
View File

@ -16,7 +16,10 @@
"@types/opentype.js": "0.0.0", "@types/opentype.js": "0.0.0",
"base64-js": "^1.2.1", "base64-js": "^1.2.1",
"bootstrap": "^4.0.0-alpha.6", "bootstrap": "^4.0.0-alpha.6",
"extract-loader": "^1.0.1",
"file-loader": "^0.11.2",
"gl-matrix": "^2.4.0", "gl-matrix": "^2.4.0",
"html-loader": "^0.5.1",
"lodash": "^4.17.4", "lodash": "^4.17.4",
"opentype.js": "^0.7.3", "opentype.js": "^0.7.3",
"parse-color": "^1.0.0", "parse-color": "^1.0.0",

2
demo/client/src/svg.ts
View File

@ -21,6 +21,8 @@ import {PathfinderView, Timings} from './view';
import AppController from './app-controller'; import AppController from './app-controller';
import SSAAStrategy from "./ssaa-strategy"; import SSAAStrategy from "./ssaa-strategy";
require('../html/svg.html');
const parseColor = require('parse-color'); const parseColor = require('parse-color');
const SVG_NS: string = "http://www.w3.org/2000/svg"; const SVG_NS: string = "http://www.w3.org/2000/svg";

2
demo/client/src/text.ts
View File

@ -26,6 +26,8 @@ import AppController from './app-controller';
import PathfinderBufferTexture from './buffer-texture'; import PathfinderBufferTexture from './buffer-texture';
import SSAAStrategy from './ssaa-strategy'; import SSAAStrategy from './ssaa-strategy';
require('../html/text.html');
const TEXT: string = const TEXT: string =
`’Twas brillig, and the slithy toves `’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe; Did gyre and gimble in the wabe;

35
demo/client/webpack.config.js
View File

@ -1,3 +1,5 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = { module.exports = {
devtool: 'inline-source-map', devtool: 'inline-source-map',
entry: { entry: {
@ -10,11 +12,40 @@ module.exports = {
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: 'ts-loader',
exclude: /node_modules/, exclude: /node_modules/,
} },
{
test: /html\/[a-zA-Z0-9_-]+\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].html",
},
},
'extract-loader',
{
loader: 'html-loader',
options: {
interpolate: true,
},
},
],
},
{
test: /html\/include\/[a-zA-Z0-9_-]+\.html$/,
use: [
{
loader: 'html-loader',
options: {
interpolate: true,
},
},
],
},
] ]
}, },
resolve: { resolve: {
extensions: [".tsx", ".ts", ".js"], extensions: [".tsx", ".ts", ".html", ".js"],
}, },
output: { output: {
filename: "[name].js", filename: "[name].js",

4
demo/server/src/main.rs
View File

@ -38,8 +38,8 @@ use std::mem;
use std::path::{Path, PathBuf}; use std::path::{Path, PathBuf};
use std::u32; use std::u32;
static STATIC_TEXT_DEMO_PATH: &'static str = "../client/html/text.html"; static STATIC_TEXT_DEMO_PATH: &'static str = "../client/text.html";
static STATIC_SVG_DEMO_PATH: &'static str = "../client/html/svg.html"; static STATIC_SVG_DEMO_PATH: &'static str = "../client/svg.html";
static STATIC_CSS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/css"; static STATIC_CSS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/css";
static STATIC_CSS_PATHFINDER_PATH: &'static str = "../client/css/pathfinder.css"; static STATIC_CSS_PATHFINDER_PATH: &'static str = "../client/css/pathfinder.css";
static STATIC_JS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/js"; static STATIC_JS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/js";