Skip to content

Commit 7a30d07

Browse files
worksofliamworksofliam
committed
Support window keyword reference
1 parent 75843f6 commit 7a30d07

File tree

2 files changed

+119
-89
lines changed

2 files changed

+119
-89
lines changed

‎src/extension.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function activate(context) {
3939

4040
const render = new Render(dspf);
4141

42-
const html = render.getHTML(format);
42+
const html = render.generate(format);
4343

4444
Window.create();
4545
Window.update(html);
@@ -77,7 +77,7 @@ function activate(context) {
7777
const format = dspf.formats.find(f => line >= f.range.start && line < f.range.end);
7878

7979
if (format) {
80-
const html = render.getHTML(format.name);
80+
const html = render.generate(format.name);
8181

8282
Window.update(html);
8383
}

‎src/render.js‎

Lines changed: 117 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -36,32 +36,15 @@ module.exports = class Render {
3636
this.display = display;
3737
}
3838

39-
/**
40-
* @param {string} format
41-
*/
42-
getHTML(format) {
43-
const globalFormat = this.display.formats.find(currentFormat => currentFormat.name === `GLOBAL`);
44-
39+
generate(format) {
4540
let size = {
4641
width: 880,
4742
height: 480
4843
};
4944

50-
let parts;
51-
52-
/** @type {{baseX: number, baseY: number, baseWidth: number, baseHeight: number, x: number, y: number, width: number, height: number, color?: string}} */
53-
let window;
54-
55-
/** @type {FieldInfo} */
56-
let windowTitle;
45+
const globalFormat = this.display.formats.find(currentFormat => currentFormat.name === `GLOBAL`);
5746

58-
/** @type {RecordInfo} */
59-
let topMostFormat;
60-
if (format) {
61-
topMostFormat = this.display.formats.find(currentFormat => currentFormat.name === format);
62-
} else {
63-
topMostFormat = globalFormat;
64-
}
47+
let parts;
6548

6649
if (globalFormat) {
6750
const displaySize = globalFormat.keywords.find(keyword => keyword.name === `DSPSIZ`);
@@ -80,10 +63,77 @@ module.exports = class Render {
8063
}
8164
}
8265

83-
if (topMostFormat) {
84-
if (topMostFormat.isWindow) {
85-
const { x, y, width, height } = topMostFormat.windowSize;
86-
window = {
66+
let css = [
67+
`#container {`,
68+
` font-family: monospace;`,
69+
` font-size: 18px;`,
70+
` border: solid black 1px;`,
71+
` width: ${size.width}px;`,
72+
` height: ${size.height}px;`,
73+
` position: absolute;`,
74+
` --g: transparent calc(100% - 1px), #ebebeb 0;`,
75+
` letter-spacing: 0.15px;`,
76+
` color: ${colors.GRN};`,
77+
` background:`,
78+
// ` linear-gradient(to right, var(--g)),`,
79+
// ` linear-gradient(to bottom, var(--g)), `,
80+
` black;`,
81+
` background-size:`,
82+
` 11px 100%,`,
83+
` 100% 20px;`,
84+
`}`,
85+
`@keyframes blinker {`,
86+
` 50% {`,
87+
` opacity: 0;`,
88+
` }`,
89+
`}`,
90+
].join(` `);
91+
92+
let body = `<div id="container">`;
93+
94+
const content = this.getHTML(format);
95+
css += content.css;
96+
body += content.body;
97+
98+
return [
99+
`<html>`,
100+
`<style>${css}</style>`,
101+
`<body>${body}</body>`,
102+
`</html>`
103+
].join(``);
104+
}
105+
106+
/**
107+
* @param {string} format
108+
*/
109+
getHTML(format) {
110+
let parts;
111+
112+
/** @type {RecordInfo} */
113+
let windowFormat;
114+
115+
/** @type {{baseX: number, baseY: number, baseWidth: number, baseHeight: number, x: number, y: number, width: number, height: number, color?: string}} */
116+
let windowConfig;
117+
118+
/** @type {FieldInfo} */
119+
let windowTitle;
120+
121+
/** @type {RecordInfo} */
122+
let recordFormat;
123+
if (format) {
124+
recordFormat = this.display.formats.find(currentFormat => currentFormat.name === format);
125+
}
126+
127+
if (recordFormat) {
128+
if (recordFormat.isWindow) {
129+
if (recordFormat.windowReference) {
130+
windowFormat = this.display.formats.find(currentFormat => currentFormat.name === recordFormat.windowReference);
131+
} else {
132+
windowFormat = recordFormat;
133+
}
134+
135+
const { x, y, width, height } = windowFormat.windowSize;
136+
windowConfig = {
87137
baseX: x,
88138
baseY: y,
89139
baseWidth: width,
@@ -94,20 +144,20 @@ module.exports = class Render {
94144
height: (height-1) * 20
95145
};
96146

97-
const borderInfo = topMostFormat.keywords.find(keyword => keyword.name === `WDWBORDER`);
147+
const borderInfo = windowFormat.keywords.find(keyword => keyword.name === `WDWBORDER`);
98148
if (borderInfo) {
99149
parts = Render.parseParms(borderInfo.value);
100150

101151
parts.forEach((part, index) => {
102152
switch (part.toUpperCase()) {
103153
case `*COLOR`:
104-
window.color = parts[index + 1];
154+
windowConfig.color = parts[index + 1];
105155
break;
106156
}
107157
});
108158
}
109159

110-
const windowInfo = topMostFormat.keywords.find(keyword => keyword.name === `WDWTITLE`);
160+
const windowInfo = windowFormat.keywords.find(keyword => keyword.name === `WDWTITLE`);
111161
if (windowInfo) {
112162
windowTitle = new FieldInfo(`WINDOWTITLE`);
113163
windowTitle.type = `char`;
@@ -158,18 +208,18 @@ module.exports = class Render {
158208

159209
const txtLength = windowTitle.value.length;
160210

161-
const yPosition = (window.baseY) + (yPositionValue === `top` ? 0 : window.baseHeight);
162-
let xPosition = (window.baseX + 1);
211+
const yPosition = (windowConfig.baseY) + (yPositionValue === `top` ? 0 : windowConfig.baseHeight);
212+
let xPosition = (windowConfig.baseX + 1);
163213

164214
switch (xPositionValue) {
165215
case `center`:
166-
xPosition = (window.baseX + 1) + Math.floor((window.baseWidth / 2) - (txtLength / 2));
216+
xPosition = (windowConfig.baseX + 1) + Math.floor((windowConfig.baseWidth / 2) - (txtLength / 2));
167217
break;
168218
case `right`:
169-
xPosition = (window.baseX + 1) + window.baseWidth - txtLength;
219+
xPosition = (windowConfig.baseX + 1) + windowConfig.baseWidth - txtLength;
170220
break;
171221
case `left`:
172-
xPosition = (window.baseX + 1);
222+
xPosition = (windowConfig.baseX + 1);
173223
break;
174224
}
175225

@@ -183,58 +233,42 @@ module.exports = class Render {
183233
}
184234
}
185235

186-
let css = [
187-
`#container {`,
188-
` font-family: monospace;`,
189-
` font-size: 18px;`,
190-
` border: solid black 1px;`,
191-
` width: ${size.width}px;`,
192-
` height: ${size.height}px;`,
193-
` position: absolute;`,
194-
` --g: transparent calc(100% - 1px), #ebebeb 0;`,
195-
` letter-spacing: 0.15px;`,
196-
` color: ${colors.GRN};`,
197-
` background:`,
198-
// ` linear-gradient(to right, var(--g)),`,
199-
// ` linear-gradient(to bottom, var(--g)), `,
200-
` black;`,
201-
` background-size:`,
202-
` 11px 100%,`,
203-
` 100% 20px;`,
204-
`}`,
205-
`@keyframes blinker {`,
206-
` 50% {`,
207-
` opacity: 0;`,
208-
` }`,
209-
`}`,
210-
].join(` `);
236+
let css = ``;
237+
let body = ``;
211238

239+
if (windowFormat) {
212240
// If this is a window, add the window CSS
213-
if (window) {
214-
const windowColor = colors[window.color] || colors.BLU;
215-
css += [
216-
`#window {`,
217-
` position: absolute;`,
218-
` width: ${window.width}px;`,
219-
` height: ${window.height}px;`,
220-
` top: ${window.y}px;`,
221-
` left: ${window.x}px;`,
222-
` border: solid ${windowColor} 2px;`,
223-
`}`,
224-
].join(` `);
225-
}
241+
if (windowConfig) {
242+
const windowColor = colors[windowConfig.color] || colors.BLU;
243+
css += [
244+
`#${windowFormat.name} {`,
245+
` position: absolute;`,
246+
` width: ${windowConfig.width}px;`,
247+
` height: ${windowConfig.height}px;`,
248+
` top: ${windowConfig.y}px;`,
249+
` left: ${windowConfig.x}px;`,
250+
` border: solid ${windowColor} 2px;`,
251+
`}`,
252+
].join(` `);
253+
}
226254

227-
let body = `<div id="container">`;
255+
if (windowTitle) {
256+
const windowContent = Render.getContent(windowTitle);
228257

229-
if (windowTitle) {
230-
const windowContent = Render.getContent(windowTitle);
258+
css += windowContent.css;
259+
body += windowContent.body;
260+
}
231261

232-
css += windowContent.css;
233-
body += windowContent.body;
234-
}
262+
if (windowConfig) {
263+
body += `<div id="${windowFormat.name}">`;
264+
}
235265

236-
if (window) {
237-
body += `<div id="window">`;
266+
if (windowFormat.name !== format) {
267+
const windowContent = this.getFormatContent(windowFormat.name);
268+
269+
css += windowContent.css;
270+
body += windowContent.body;
271+
}
238272
}
239273

240274
if (format) {
@@ -257,18 +291,14 @@ module.exports = class Render {
257291
});
258292
}
259293

260-
if (window) {
294+
if (windowFormat && windowConfig) {
261295
body += `</div>`;
262296
}
263297

264-
body += `</div>`;
265-
266-
return [
267-
`<html>`,
268-
`<style>${css}</style>`,
269-
`<body>${body}</body>`,
270-
`</html>`
271-
].join(``);
298+
return {
299+
css,
300+
body
301+
}
272302
}
273303

274304
/**

0 commit comments

Comments
 (0)