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

Allow the demo text to be changed by double-clicking

This commit is contained in:
Patrick Walton 2017-09-01 16:31:40 -07:00
parent 9f6f10deca
commit a43a09b9d3
5 changed files with 86 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/client/css/pathfinder.css
View File

@ -10,6 +10,12 @@
transition: opacity 300ms, transform 300ms, visibility 300ms; transition: opacity 300ms, transform 300ms, visibility 300ms;
transform: translateY(0); transform: translateY(0);
} }
#pf-settings:not(.pf-invisible) {
pointer-events: auto;
}
#pf-settings-button {
pointer-events: auto;
}
#pf-settings-button:not(:hover) { #pf-settings-button:not(:hover) {
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.75);
} }
@ -29,6 +35,9 @@ button > svg {
button > svg path { button > svg path {
fill: currentColor; fill: currentColor;
} }
.pf-pointer-events-none {
pointer-events: none;
}
#pf-rendering-options-group { #pf-rendering-options-group {
right: 1em; right: 1em;
} }

4
demo/client/html/3d-demo.html.hbs
View File

@ -9,8 +9,8 @@
<body> <body>
{{>partials/navbar.html isDemo=true}} {{>partials/navbar.html isDemo=true}}
<canvas id="pf-canvas" width="400" height="300"></canvas> <canvas id="pf-canvas" width="400" height="300"></canvas>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end"> <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="ml-3"> <div class="ml-3 pf-pointer-events-none">
<div id="pf-settings" class="card mb-4 pf-invisible"> <div id="pf-settings" class="card mb-4 pf-invisible">
<div class="card-body"> <div class="card-body">
<button id="pf-settings-close-button" type="button" class="close" <button id="pf-settings-close-button" type="button" class="close"

4
demo/client/html/svg-demo.html.hbs
View File

@ -10,8 +10,8 @@
{{>partials/navbar.html isDemo=true}} {{>partials/navbar.html isDemo=true}}
<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>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end"> <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="ml-3"> <div class="ml-3 pf-pointer-events-none">
<div id="pf-settings" class="card mb-4 pf-invisible"> <div id="pf-settings" class="card mb-4 pf-invisible">
<div class="card-body"> <div class="card-body">
<button id="pf-settings-close-button" type="button" class="close" <button id="pf-settings-close-button" type="button" class="close"

30
demo/client/html/text-demo.html.hbs
View File

@ -9,8 +9,8 @@
<body> <body>
{{>partials/navbar.html isDemo=true}} {{>partials/navbar.html isDemo=true}}
<canvas id="pf-canvas" width="400" height="300"></canvas> <canvas id="pf-canvas" width="400" height="300"></canvas>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end"> <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="ml-3"> <div class="ml-3 pf-pointer-events-none">
<div id="pf-settings" class="card mb-4 pf-invisible"> <div id="pf-settings" class="card mb-4 pf-invisible">
<div class="card-body"> <div class="card-body">
<button id="pf-settings-close-button" type="button" class="close" <button id="pf-settings-close-button" type="button" class="close"
@ -48,5 +48,31 @@
</div> </div>
<div class="rounded py-1 px-3 mr-3" id="pf-fps-label">0 ms</div> <div class="rounded py-1 px-3 mr-3" id="pf-fps-label">0 ms</div>
</div> </div>
<div class="modal fade" id="pf-edit-text-modal" tabindex="-1" role="dialog"
aria-labelledby="pf-edit-text-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pf-edit-text-label">Edit Text</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<textarea id="pf-edit-text-area" class="form-control" rows="16">
</textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="button"
class="btn btn-primary" id="pf-edit-text-ok-button">OK</button>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

48
demo/client/src/text-demo.ts
View File

@ -8,7 +8,7 @@
// option. This file may not be copied, modified, or distributed // option. This file may not be copied, modified, or distributed
// except according to those terms. // except according to those terms.
import {Font} from "opentype.js"; import {Font} from 'opentype.js';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as base64js from 'base64-js'; import * as base64js from 'base64-js';
import * as glmatrix from 'gl-matrix'; import * as glmatrix from 'gl-matrix';
@ -28,7 +28,7 @@ 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';
const TEXT: string = const DEFAULT_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;
All mimsy were the borogoves, All mimsy were the borogoves,
@ -76,6 +76,16 @@ const B_PATH_INDEX_SIZE: number = 2;
const ATLAS_SIZE: glmatrix.vec2 = glmatrix.vec2.fromValues(3072, 3072); const ATLAS_SIZE: glmatrix.vec2 = glmatrix.vec2.fromValues(3072, 3072);
declare global {
interface Window {
jQuery(element: HTMLElement): JQuerySubset;
}
}
interface JQuerySubset {
modal(options?: any): void;
}
type Matrix4D = Float32Array; type Matrix4D = Float32Array;
type Rect = glmatrix.vec4; type Rect = glmatrix.vec4;
@ -108,6 +118,7 @@ function rectsIntersect(a: glmatrix.vec4, b: glmatrix.vec4): boolean {
class TextDemoController extends AppController<TextDemoView> { class TextDemoController extends AppController<TextDemoView> {
constructor() { constructor() {
super(); super();
this.text = DEFAULT_TEXT;
this._atlas = new Atlas; this._atlas = new Atlas;
} }
@ -115,10 +126,31 @@ class TextDemoController extends AppController<TextDemoView> {
super.start(); super.start();
this._fontSize = INITIAL_FONT_SIZE; this._fontSize = INITIAL_FONT_SIZE;
this.fpsLabel = unwrapNull(document.getElementById('pf-fps-label')); this.fpsLabel = unwrapNull(document.getElementById('pf-fps-label'));
this.editTextModal = unwrapNull(document.getElementById('pf-edit-text-modal'));
this.editTextArea = unwrapNull(document.getElementById('pf-edit-text-area')) as
HTMLTextAreaElement;
const editTextOkButton = unwrapNull(document.getElementById('pf-edit-text-ok-button'));
editTextOkButton.addEventListener('click', () => this.updateText(), false);
this.loadInitialFile(); this.loadInitialFile();
} }
showTextEditor() {
this.editTextArea.value = this.text;
window.jQuery(this.editTextModal).modal();
}
private updateText() {
this.text = this.editTextArea.value;
this.recreateLayout();
window.jQuery(this.editTextModal).modal('hide');
}
protected createView(canvas: HTMLCanvasElement, protected createView(canvas: HTMLCanvasElement,
commonShaderSource: string, commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) { shaderSources: ShaderMap<ShaderProgramSource>) {
@ -126,7 +158,11 @@ class TextDemoController extends AppController<TextDemoView> {
} }
protected fileLoaded() { protected fileLoaded() {
this.layout = new TextLayout(this.fileData, TEXT, glyph => new GlyphInstance(glyph)); this.recreateLayout();
}
private recreateLayout() {
this.layout = new TextLayout(this.fileData, this.text, glyph => new GlyphInstance(glyph));
this.layout.partition().then((meshes: PathfinderMeshData) => { this.layout.partition().then((meshes: PathfinderMeshData) => {
this.meshes = meshes; this.meshes = meshes;
this.view.then(view => { this.view.then(view => {
@ -170,6 +206,8 @@ class TextDemoController extends AppController<TextDemoView> {
} }
private fpsLabel: HTMLElement; private fpsLabel: HTMLElement;
private editTextModal: HTMLElement;
private editTextArea: HTMLTextAreaElement;
private _atlas: Atlas; private _atlas: Atlas;
atlasGlyphs: AtlasGlyph[]; atlasGlyphs: AtlasGlyph[];
@ -178,6 +216,8 @@ class TextDemoController extends AppController<TextDemoView> {
private _fontSize: number; private _fontSize: number;
private text: string;
layout: TextLayout<GlyphInstance>; layout: TextLayout<GlyphInstance>;
} }
@ -189,6 +229,8 @@ class TextDemoView extends MonochromePathfinderView {
super(canvas, commonShaderSource, shaderSources); super(canvas, commonShaderSource, shaderSources);
this.appController = appController; this.appController = appController;
this.canvas.addEventListener('dblclick', () => this.appController.showTextEditor(), false);
} }
protected initContext() { protected initContext() {