1 | 'use strict'
|
2 |
|
3 | document.body.style.margin = '0'
|
4 |
|
5 |
|
6 | const t = require('tape')
|
7 | const Text = require('./')
|
8 | const fps = require('fps-indicator')()
|
9 | const gl = require('gl-util/context')()
|
10 | const panzoom = require('pan-zoom')
|
11 |
|
12 |
|
13 |
|
14 | let canvas = document.body.appendChild(
|
15 | document.createElement('canvas')
|
16 | )
|
17 | canvas.style.position = 'absolute'
|
18 | canvas.style.left = 0
|
19 | canvas.style.top = 0
|
20 | canvas.width = window.innerWidth
|
21 | canvas.height = window.innerHeight
|
22 | let ctx = canvas.getContext('2d')
|
23 |
|
24 |
|
25 | ctx.fillStyle = 'blue'
|
26 | ctx.fillRect(canvas.width / 2 - 25, canvas.height / 2, 100, 1)
|
27 | ctx.fillRect(canvas.width / 2, canvas.height / 2 - 25, 1, 50)
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | let q = []
|
36 |
|
37 |
|
38 | t('font', t => {
|
39 | let matrix = []
|
40 |
|
41 | let family = ['Roboto', 'sans-serif']
|
42 | let weights = require('css-font-weight-keywords')
|
43 | let stretches = require('css-font-stretch-keywords')
|
44 |
|
45 | for (let i = 4; i < weights.length; i++) {
|
46 | let weight = weights[i]
|
47 |
|
48 | for (let j = 1; j < stretches.length; j++) {
|
49 | let stretch = stretches[j]
|
50 | let normal = new Text(gl)
|
51 | normal.update({
|
52 | font: { family, weight, stretch },
|
53 | position: [j * 40, i*20],
|
54 | text: weight
|
55 | })
|
56 |
|
57 | q.push(normal)
|
58 |
|
59 |
|
60 | }
|
61 |
|
62 | for (let j = 1; j < stretches.length; j++) {
|
63 | let stretch = stretches[j]
|
64 | let italic = new Text(gl)
|
65 | italic.update({
|
66 | font: { family, weight, stretch, style: 'italic' },
|
67 | position: [(stretches.length - 1 + j) * 40, i*20],
|
68 | text: weight
|
69 | })
|
70 |
|
71 | q.push(italic)
|
72 | }
|
73 | }
|
74 |
|
75 | t.end()
|
76 | })
|
77 |
|
78 | t('alignment', t => {
|
79 | q.push(new Text({
|
80 | gl,
|
81 | offset: .5,
|
82 | baseline: 'top',
|
83 | align: 'left',
|
84 | color: 'black',
|
85 | font: 'Minion Pro',
|
86 | position: [1, 1],
|
87 | range: [0,0,2,2],
|
88 | text: 'Middle',
|
89 | kerning: true
|
90 | }))
|
91 | t.end()
|
92 | })
|
93 |
|
94 | t.skip('1e6 letters', t => {
|
95 | let chars = 'abc'
|
96 |
|
97 | for (let i = 0; i < 1e2; i++) {
|
98 | for (let j = 0; j < 1e2; j++) {
|
99 | q.push(new Text({
|
100 | gl,
|
101 | text: chars,
|
102 | position: [i * 10, j * 10]
|
103 | }))
|
104 | }
|
105 | }
|
106 | })
|
107 |
|
108 | t('changing font-size does not trigger text offsets recalc')
|
109 |
|
110 | t('spacing', t => {
|
111 | t.end()
|
112 | })
|
113 |
|
114 | t('color')
|
115 |
|
116 | t('baseline')
|
117 |
|
118 | t.skip('kerning', t => {
|
119 | q.push(new Text({
|
120 | gl,
|
121 | offset: .5,
|
122 | baseline: 'top',
|
123 | align: 'left',
|
124 | color: 'black',
|
125 | font: 'Minion Pro',
|
126 | position: [1, 1],
|
127 | range: [0,0,2,2],
|
128 | text: 'Middle',
|
129 | kerning: true
|
130 | }))
|
131 | })
|
132 |
|
133 | t('tracking (spacing)')
|
134 |
|
135 | t('viewport')
|
136 |
|
137 | t('range')
|
138 |
|
139 | t('offset', t => {
|
140 |
|
141 | q.push(new Text({
|
142 | gl,
|
143 | text: 'Offset',
|
144 | range: [0,0,1,1],
|
145 | position: [.5,.5],
|
146 | fontSize: 24,
|
147 | offset: 0
|
148 | }))
|
149 |
|
150 |
|
151 | q.push(new Text({
|
152 | gl,
|
153 | text: 'Line2',
|
154 | range: [0,0,1,1],
|
155 | position: [.5,.5],
|
156 | fontSize: 24,
|
157 | offset: [0, 1]
|
158 | }))
|
159 | })
|
160 |
|
161 | t('ignore spaces')
|
162 |
|
163 | t('canvas2d performance')
|
164 |
|
165 | t.skip('Augment chars', t => {
|
166 | q.push(new Text({
|
167 | gl,
|
168 | font: {
|
169 | family: 'Minion Pro',
|
170 | weight: 200,
|
171 | size: 24
|
172 | },
|
173 | text: 'ABC',
|
174 | position: [0, 100]
|
175 | }))
|
176 |
|
177 | q.push(new Text({
|
178 | gl,
|
179 | font: {
|
180 | family: 'Minion Pro',
|
181 | weight: 200,
|
182 | size: 24
|
183 | },
|
184 | text: 'DEFG',
|
185 | position: [0, 200]
|
186 | }))
|
187 |
|
188 | q.push(new Text({
|
189 | gl,
|
190 | font: {
|
191 | family: 'Minion Pro',
|
192 | weight: 200,
|
193 | size: 32
|
194 | },
|
195 | text: 'HIJK',
|
196 | position: [0, 300]
|
197 | }))
|
198 |
|
199 | t.end()
|
200 | })
|
201 |
|
202 |
|
203 |
|
204 | q.render = function (opts) {
|
205 | if (opts) q.forEach(text => text.update(opts))
|
206 | q.forEach(text => text.render())
|
207 | }
|
208 |
|
209 | setTimeout(() => {
|
210 | let vp = q[0].viewport
|
211 | let range = q[0].range || [vp.x, vp.y, vp.x + vp.width, vp.y + vp.height]
|
212 | q.render()
|
213 |
|
214 | panzoom(document.body, e => {
|
215 | let canvas = gl.canvas
|
216 |
|
217 | let w = canvas.offsetWidth
|
218 | let h = canvas.offsetHeight
|
219 |
|
220 | let rx = e.x / w
|
221 | let ry = e.y / h
|
222 |
|
223 | let xrange = range[2] - range[0],
|
224 | yrange = range[3] - range[1]
|
225 |
|
226 | if (e.dz) {
|
227 | let dz = e.dz / w
|
228 | range[0] -= rx * xrange * dz
|
229 | range[2] += (1 - rx) * xrange * dz
|
230 |
|
231 |
|
232 |
|
233 |
|
234 | range[1] -= (1 - ry) * yrange * dz
|
235 | range[3] += ry * yrange * dz
|
236 | }
|
237 |
|
238 | range[0] -= xrange * e.dx / w
|
239 | range[2] -= xrange * e.dx / w
|
240 |
|
241 |
|
242 | range[1] += yrange * e.dy / h
|
243 | range[3] += yrange * e.dy / h
|
244 |
|
245 | q.render({ range })
|
246 | })
|
247 | }, 50)
|