Allow the demo text to be changed by double-clicking
This commit is contained in:
Patrick Walton
parent
9f6f10deca
commit
a43a09b9d3
|
|
@ -10,6 +10,12 @@
|
|||
transition: opacity 300ms, transform 300ms, visibility 300ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
#pf-settings:not(.pf-invisible) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
#pf-settings-button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
#pf-settings-button:not(:hover) {
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
|
@ -29,6 +35,9 @@ button > svg {
|
|||
button > svg path {
|
||||
fill: currentColor;
|
||||
}
|
||||
.pf-pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
#pf-rendering-options-group {
|
||||
right: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
<body>
|
||||
{{>partials/navbar.html isDemo=true}}
|
||||
<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="ml-3">
|
||||
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
|
||||
<div class="ml-3 pf-pointer-events-none">
|
||||
<div id="pf-settings" class="card mb-4 pf-invisible">
|
||||
<div class="card-body">
|
||||
<button id="pf-settings-close-button" type="button" class="close"
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
{{>partials/navbar.html isDemo=true}}
|
||||
<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>
|
||||
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end">
|
||||
<div class="ml-3">
|
||||
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
|
||||
<div class="ml-3 pf-pointer-events-none">
|
||||
<div id="pf-settings" class="card mb-4 pf-invisible">
|
||||
<div class="card-body">
|
||||
<button id="pf-settings-close-button" type="button" class="close"
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
<body>
|
||||
{{>partials/navbar.html isDemo=true}}
|
||||
<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="ml-3">
|
||||
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
|
||||
<div class="ml-3 pf-pointer-events-none">
|
||||
<div id="pf-settings" class="card mb-4 pf-invisible">
|
||||
<div class="card-body">
|
||||
<button id="pf-settings-close-button" type="button" class="close"
|
||||
|
|
@ -48,5 +48,31 @@
|
|||
</div>
|
||||
<div class="rounded py-1 px-3 mr-3" id="pf-fps-label">0 ms</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">×</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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
// option. This file may not be copied, modified, or distributed
|
||||
// except according to those terms.
|
||||
|
||||
import {Font} from "opentype.js";
|
||||
import {Font} from 'opentype.js';
|
||||
import * as _ from 'lodash';
|
||||
import * as base64js from 'base64-js';
|
||||
import * as glmatrix from 'gl-matrix';
|
||||
|
|
@ -28,7 +28,7 @@ import AppController from './app-controller';
|
|||
import PathfinderBufferTexture from './buffer-texture';
|
||||
import SSAAStrategy from './ssaa-strategy';
|
||||
|
||||
const TEXT: string =
|
||||
const DEFAULT_TEXT: string =
|
||||
`’Twas brillig, and the slithy toves
|
||||
Did gyre and gimble in the wabe;
|
||||
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);
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
jQuery(element: HTMLElement): JQuerySubset;
|
||||
}
|
||||
}
|
||||
|
||||
interface JQuerySubset {
|
||||
modal(options?: any): void;
|
||||
}
|
||||
|
||||
type Matrix4D = Float32Array;
|
||||
|
||||
type Rect = glmatrix.vec4;
|
||||
|
|
@ -108,6 +118,7 @@ function rectsIntersect(a: glmatrix.vec4, b: glmatrix.vec4): boolean {
|
|||
class TextDemoController extends AppController<TextDemoView> {
|
||||
constructor() {
|
||||
super();
|
||||
this.text = DEFAULT_TEXT;
|
||||
this._atlas = new Atlas;
|
||||
}
|
||||
|
||||
|
|
@ -115,10 +126,31 @@ class TextDemoController extends AppController<TextDemoView> {
|
|||
super.start();
|
||||
|
||||
this._fontSize = INITIAL_FONT_SIZE;
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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,
|
||||
commonShaderSource: string,
|
||||
shaderSources: ShaderMap<ShaderProgramSource>) {
|
||||
|
|
@ -126,7 +158,11 @@ class TextDemoController extends AppController<TextDemoView> {
|
|||
}
|
||||
|
||||
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.meshes = meshes;
|
||||
this.view.then(view => {
|
||||
|
|
@ -170,6 +206,8 @@ class TextDemoController extends AppController<TextDemoView> {
|
|||
}
|
||||
|
||||
private fpsLabel: HTMLElement;
|
||||
private editTextModal: HTMLElement;
|
||||
private editTextArea: HTMLTextAreaElement;
|
||||
|
||||
private _atlas: Atlas;
|
||||
atlasGlyphs: AtlasGlyph[];
|
||||
|
|
@ -178,6 +216,8 @@ class TextDemoController extends AppController<TextDemoView> {
|
|||
|
||||
private _fontSize: number;
|
||||
|
||||
private text: string;
|
||||
|
||||
layout: TextLayout<GlyphInstance>;
|
||||
}
|
||||
|
||||
|
|
@ -189,6 +229,8 @@ class TextDemoView extends MonochromePathfinderView {
|
|||
super(canvas, commonShaderSource, shaderSources);
|
||||
|
||||
this.appController = appController;
|
||||
|
||||
this.canvas.addEventListener('dblclick', () => this.appController.showTextEditor(), false);
|
||||
}
|
||||
|
||||
protected initContext() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue