Skip to content

Commit dfcdb4b

Browse files
benfrybenfry
committed
new interface built in for tabs, etc
1 parent 296729b commit dfcdb4b

File tree

7 files changed

+151
-42
lines changed

7 files changed

+151
-42
lines changed

‎app/src/processing/app/EditorHeader.java‎

Lines changed: 96 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
/*
44
Part of the Processing project - http://processing.org
55
6-
Copyright (c) 2004-11 Ben Fry and Casey Reas
6+
Copyright (c) 2004-13 Ben Fry and Casey Reas
77
Copyright (c) 2001-04 Massachusetts Institute of Technology
88
99
This program is free software; you can redistribute it and/or modify
@@ -25,6 +25,7 @@
2525

2626
import java.awt.*;
2727
import java.awt.event.*;
28+
import java.awt.geom.GeneralPath;
2829
import java.util.Arrays;
2930

3031
import javax.swing.*;
@@ -34,8 +35,25 @@
3435
* Sketch tabs at the top of the editor window.
3536
*/
3637
public class EditorHeader extends JComponent {
38+
// standard UI sizing (OS-specific, but generally consistent)
39+
static final int SCROLLBAR_WIDTH = 16;
40+
// amount of space on the left edge before the tabs start
41+
static final int MARGIN_WIDTH = 6;
42+
// distance from the righthand side of a tab to the drop-down arrow
43+
static final int ARROW_GAP_WIDTH = 8;
44+
// indent x/y for notch on the tab
45+
static final int NOTCH = 4;
46+
// how far to raise the tab from the bottom of this Component
47+
static final int TAB_HEIGHT = 27;
48+
// amount of margin on the left/right for the text on the tab
49+
static final int TEXT_MARGIN = 5;
50+
// width of the tab when no text visible
51+
// (total tab width will be this plus TEXT_MARGIN*2)
52+
static final int NO_TEXT_WIDTH = 10;
53+
3754
Color backgroundColor;
3855
Color textColor[] = new Color[2];
56+
Color tabColor[] = new Color[2];
3957

4058
Editor editor;
4159

@@ -68,8 +86,8 @@ public class EditorHeader extends JComponent {
6886
static final int PIECE_HEIGHT = 33;
6987
Image[][] pieces;
7088

71-
static final int ARROW_WIDTH = 6;
72-
static final int ARROW_HEIGHT = 6;
89+
static final int ARROW_WIDTH = 14;
90+
static final int ARROW_HEIGHT = 14;
7391
Image tabArrow;
7492

7593
//
@@ -167,12 +185,15 @@ public void updateMode() {
167185
}
168186
}
169187

170-
tabArrow = mode.loadImage("theme/tab-arrow");
188+
tabArrow = mode.loadImage("theme/tab-arrow" + suffix);
171189

172190
backgroundColor = mode.getColor("header.bgcolor");
173191
textColor[SELECTED] = mode.getColor("header.text.selected.color");
174192
textColor[UNSELECTED] = mode.getColor("header.text.unselected.color");
175193
font = mode.getFont("header.text.font");
194+
195+
tabColor[SELECTED] = mode.getColor("header.tab.selected.color");
196+
tabColor[UNSELECTED] = mode.getColor("header.tab.unselected.color");
176197
}
177198

178199

@@ -228,6 +249,15 @@ public void paintComponent(Graphics screen) {
228249
// set the background for the offscreen
229250
g.setColor(backgroundColor);
230251
g.fillRect(0, 0, imageW, imageH);
252+
253+
// EditorToolbar toolbar = editor.toolbar;
254+
// if (toolbar != null && toolbar.backgroundImage != null) {
255+
// g.drawImage(toolbar.backgroundImage,
256+
// 0, -toolbar.getHeight(),
257+
// EditorToolbar.BACKGROUND_WIDTH,
258+
// EditorToolbar.BACKGROUND_HEIGHT, null);
259+
// }
260+
editor.getMode().drawBackground(g, EditorToolbar.BUTTON_HEIGHT);
231261

232262
// int codeCount = sketch.getCodeCount();
233263
// if ((tabLeft == null) || (tabLeft.length < codeCount)) {
@@ -242,11 +272,10 @@ public void paintComponent(Graphics screen) {
242272
visitOrder = new Tab[sketch.getCodeCount() - 1];
243273
}
244274

245-
menuRight = sizeW - 16;
275+
// menuRight = sizeW - 16;
246276
// menuLeft = menuRight - pieces[0][MENU].getWidth(this);
247-
menuLeft = menuRight - 50; // FIXME!!
248-
int tabLeft = 6;
249-
int tabMax = menuLeft - tabLeft;
277+
// menuLeft = menuRight - 50; // FIXME!!
278+
int tabMax = menuLeft - (MARGIN_WIDTH + SCROLLBAR_WIDTH);
250279

251280
// reset all tab positions
252281
for (Tab tab : tabs) {
@@ -265,7 +294,7 @@ public void paintComponent(Graphics screen) {
265294
}
266295

267296
// make sure everything can fit
268-
if (!placeTabs(tabLeft, tabMax, null)) {
297+
if (!placeTabs(MARGIN_WIDTH, tabMax, null)) {
269298
//System.arraycopy(tabs, 0, visitOrder, 0, tabs.length);
270299
// always show the tab with the sketch's name
271300
// System.arraycopy(tabs, 1, visitOrder, 0, tabs.length - 1);
@@ -280,69 +309,103 @@ public void paintComponent(Graphics screen) {
280309
// }
281310
// System.out.println();
282311

312+
// Keep shrinking the tabs one-by-one until things fit properly
283313
for (int i = 0; i < visitOrder.length; i++) {
284314
tabs[visitOrder[i].index].textVisible = false;
285-
if (placeTabs(tabLeft, tabMax, null)) {
315+
if (placeTabs(MARGIN_WIDTH, tabMax, null)) {
286316
break;
287317
}
288318
}
289319
}
290320

291321
// now actually draw the tabs
292-
placeTabs(tabLeft, tabMax, g);
322+
placeTabs(MARGIN_WIDTH, tabMax, g2);
293323

294324
// draw the dropdown menu target
325+
menuLeft = tabs[tabs.length - 1].right + ARROW_GAP_WIDTH;
326+
menuRight = menuLeft + ARROW_WIDTH;
327+
int arrowY = (getHeight() - TAB_HEIGHT) + (TAB_HEIGHT - ARROW_HEIGHT)/2;
328+
g.drawImage(tabArrow, menuLeft, arrowY,
329+
ARROW_WIDTH, ARROW_HEIGHT, null);
295330
// g.drawImage(pieces[popup.isVisible() ? SELECTED : UNSELECTED][MENU],
296331
// menuLeft, 0, null);
297332

298333
screen.drawImage(offscreen, 0, 0, imageW, imageH, null);
299334
}
300335

301336

302-
private boolean placeTabs(int left, int right, Graphics g) {
337+
private boolean placeTabs(int left, int right, Graphics2D g) {
303338
Sketch sketch = editor.getSketch();
304339
int x = left;
305340

341+
final int bottom = getHeight();
342+
final int top = bottom - TAB_HEIGHT;
343+
GeneralPath path = null;
344+
306345
for (int i = 0; i < sketch.getCodeCount(); i++) {
307346
SketchCode code = sketch.getCode(i);
308347
Tab tab = tabs[i];
309348

310-
int pieceCount = 2 + (tab.textWidth / PIECE_WIDTH);
311-
if (tab.textVisible == false) {
312-
pieceCount = 4;
313-
}
314-
int pieceWidth = pieceCount * PIECE_WIDTH;
349+
// int pieceCount = 2 + (tab.textWidth / PIECE_WIDTH);
350+
// if (tab.textVisible == false) {
351+
// pieceCount = 4;
352+
// }
353+
// int pieceWidth = pieceCount * PIECE_WIDTH;
315354

316355
int state = (code == sketch.getCurrentCode()) ? SELECTED : UNSELECTED;
317356
if (g != null) {
318-
g.drawImage(pieces[state][LEFT], x, 0, PIECE_WIDTH, PIECE_HEIGHT, null);
357+
//g.drawImage(pieces[state][LEFT], x, 0, PIECE_WIDTH, PIECE_HEIGHT, null);
358+
path = new GeneralPath();
359+
path.moveTo(x, bottom);
360+
path.lineTo(x, top + NOTCH);
361+
path.lineTo(x + NOTCH, top);
319362
}
320-
x += PIECE_WIDTH;
321-
322-
int contentLeft = x;
323363
tab.left = x;
324-
for (int j = 0; j < pieceCount; j++) {
325-
if (g != null) {
326-
g.drawImage(pieces[state][MIDDLE], x, 0, PIECE_WIDTH, PIECE_HEIGHT, null);
327-
}
328-
x += PIECE_WIDTH;
329-
}
364+
x += TEXT_MARGIN;
365+
// x += PIECE_WIDTH;
366+
367+
// int contentLeft = x;
368+
// for (int j = 0; j < pieceCount; j++) {
369+
// if (g != null) {
370+
// g.drawImage(pieces[state][MIDDLE], x, 0, PIECE_WIDTH, PIECE_HEIGHT, null);
371+
// }
372+
// x += PIECE_WIDTH;
373+
// }
374+
// if (g != null) {
375+
int drawWidth = tab.textVisible ? tab.textWidth : NO_TEXT_WIDTH;
376+
x += drawWidth + TEXT_MARGIN;
377+
// path.moveTo(x, top);
378+
// }
330379
tab.right = x;
331380

381+
if (g != null) {
382+
path.lineTo(x - NOTCH, top);
383+
path.lineTo(x, top + NOTCH);
384+
path.lineTo(x, bottom);
385+
path.closePath();
386+
g.setColor(tabColor[state]);
387+
g.fill(path);
388+
//g.drawImage(pieces[state][RIGHT], x, 0, PIECE_WIDTH, PIECE_HEIGHT, null);
389+
}
390+
332391
if (tab.textVisible) {
333-
int textLeft = contentLeft + (pieceWidth - tab.textWidth) / 2;
392+
// int textLeft = contentLeft + (pieceWidth - tab.textWidth) / 2;
334393
if (g != null) {
394+
int textLeft = tab.left + ((tab.right - tab.left) - tab.textWidth) / 2;
335395
g.setColor(textColor[state]);
336-
int baseline = (sizeH + fontAscent) / 2;
396+
// int baseline = (int) Math.ceil((sizeH + fontAscent) / 2.0);
397+
int baseline = bottom - (TAB_HEIGHT - fontAscent)/2 - 1;
337398
//g.drawString(sketch.code[i].name, textLeft, baseline);
338399
g.drawString(tab.text, textLeft, baseline);
400+
// g.drawLine(tab.left, baseline-fontAscent, tab.right, baseline-fontAscent);
339401
}
340402
}
341403

342-
if (g != null) {
343-
g.drawImage(pieces[state][RIGHT], x, 0, PIECE_WIDTH, PIECE_HEIGHT, null);
344-
}
345-
x += PIECE_WIDTH - 1; // overlap by 1 pixel
404+
// if (g != null) {
405+
// g.drawImage(pieces[state][RIGHT], x, 0, PIECE_WIDTH, PIECE_HEIGHT, null);
406+
// }
407+
// x += PIECE_WIDTH - 1; // overlap by 1 pixel
408+
x += 1;
346409
}
347410
return x <= right;
348411
}

‎app/src/processing/app/EditorToolbar.java‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ public abstract class EditorToolbar extends JComponent implements MouseInputList
7070
// int which[]; // mapping indices to implementation
7171

7272
// int x1[], x2[];
73-
static final int TOP = 0;
73+
static final int TOP = 2;
7474
static final int BOTTOM = BUTTON_HEIGHT;
7575

7676
Font statusFont;
@@ -94,8 +94,6 @@ public abstract class EditorToolbar extends JComponent implements MouseInputList
9494
static final int ARROW_HEIGHT = 6;
9595
Image modeArrow;
9696

97-
protected Image backgroundImage;
98-
9997

10098
public EditorToolbar(Editor editor, Base base) { //, JMenu menu) {
10199
this.editor = editor;
@@ -168,6 +166,8 @@ public Image[][] loadImages() {
168166

169167
// Load the dropdown arrow, based on all the work done above
170168
modeArrow = mode.loadImage("theme/mode-arrow" + suffix);
169+
// And the background image
170+
// backgroundImage = mode.loadImage("theme/mode" + suffix);
171171

172172
return buttonImages;
173173
}
@@ -224,6 +224,10 @@ public void paintComponent(Graphics screen) {
224224

225225
g.setColor(bgcolor); //getBackground());
226226
g.fillRect(0, 0, width, height);
227+
// if (backgroundImage != null) {
228+
// g.drawImage(backgroundImage, 0, 0, BACKGROUND_WIDTH, BACKGROUND_HEIGHT, null);
229+
// }
230+
mode.drawBackground(g, 0);
227231

228232
// for (int i = 0; i < buttonCount; i++) {
229233
// g.drawImage(stateImage[i], x1[i], y1, null);
@@ -254,11 +258,11 @@ public void paintComponent(Graphics screen) {
254258
FontMetrics metrics = g.getFontMetrics();
255259
int modeTextHeight = metrics.getAscent();
256260
int modeTextWidth = metrics.stringWidth(modeTitle);
257-
final int modeGapWidth = 6;
261+
final int modeGapWidth = 8;
258262
final int modeBoxHeight = 20;
259263
modeX2 = getWidth() - 16;
260264
modeX1 = modeX2 - (modeGapWidth + modeTextWidth + modeGapWidth + ARROW_WIDTH + modeGapWidth);
261-
modeY1 = (getHeight() - modeBoxHeight) / 2;
265+
modeY1 = 8; //(getHeight() - modeBoxHeight) / 2;
262266
modeY2 = modeY1 + modeBoxHeight; //modeY1 + modeH + modeGapV*2;
263267
g.setColor(modeButtonColor);
264268
g.drawRect(modeX1, modeY1, modeX2 - modeX1, modeY2 - modeY1);
@@ -268,7 +272,7 @@ public void paintComponent(Graphics screen) {
268272
g.drawImage(modeArrow,
269273
modeX2 - ARROW_WIDTH - modeGapWidth,
270274
modeY1 + (modeBoxHeight - ARROW_HEIGHT) / 2,
271-
ARROW_WIDTH, ARROW_HEIGHT, this);
275+
ARROW_WIDTH, ARROW_HEIGHT, null);
272276

273277
screen.drawImage(offscreen, 0, 0, size.width, size.height, null);
274278

‎app/src/processing/app/Mode.java‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
/* -*- mode: java; c-basic-offset: 2; indent-tabs-mode: nil -*- */
2+
3+
/*
4+
Part of the Processing project - http://processing.org
5+
6+
Copyright (c) 2013 The Processing Foundation
7+
Copyright (c) 2010-13 Ben Fry and Casey Reas
8+
9+
This program is free software; you can redistribute it and/or modify
10+
it under the terms of the GNU General Public License as published by
11+
the Free Software Foundation; either version 2 of the License, or
12+
(at your option) any later version.
13+
14+
This program is distributed in the hope that it will be useful,
15+
but WITHOUT ANY WARRANTY; without even the implied warranty of
16+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
17+
GNU General Public License for more details.
18+
19+
You should have received a copy of the GNU General Public License
20+
along with this program; if not, write to the Free Software Foundation,
21+
Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
22+
*/
23+
124
package processing.app;
225

326
import java.awt.*;
@@ -59,6 +82,10 @@ public abstract class Mode {
5982
*/
6083
protected ClassLoader classLoader;
6184

85+
static final int BACKGROUND_WIDTH = 580;
86+
static final int BACKGROUND_HEIGHT = 250;
87+
protected Image backgroundImage;
88+
6289

6390
// public Mode(Base base, File folder) {
6491
// this(base, folder, base.getSketchbookLibrariesFolder());
@@ -149,11 +176,22 @@ public void setupGUI() {
149176
// other things that have to be set explicitly for the defaults
150177
theme.setColor("run.window.bgcolor", SystemColor.control);
151178

179+
String suffix = Toolkit.isRetina() ? "-2x.png" : ".png";
180+
backgroundImage = loadImage("theme/mode" + suffix);
181+
152182
} catch (IOException e) {
153183
Base.showError("Problem loading theme.txt",
154184
"Could not load theme.txt, please re-install Processing", e);
155185
}
156186
}
187+
188+
189+
public void drawBackground(Graphics g, int offset) {
190+
if (backgroundImage != null) {
191+
g.drawImage(backgroundImage, 0, -offset,
192+
BACKGROUND_WIDTH, BACKGROUND_HEIGHT, null);
193+
}
194+
}
157195

158196

159197
public File getContentFile(String path) {

java/theme/mode.png renamed to java/theme/mode-2x.png

File renamed without changes.

‎java/theme/tab-arrow-2x.png‎

2.64 KB
Loading

‎java/theme/tab-arrow.png‎

2.64 KB
Loading

‎java/theme/theme.txt‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,15 @@ status.font = SansSerif,plain,12
1111
# GUI - TABS
1212
# settings for the tabs at the top
1313
# (tab images are stored in the lib/theme folder)
14-
header.bgcolor = #818b95
15-
header.text.selected.color = #1a1a00
14+
#header.bgcolor = #818b95
15+
header.bgcolor = #000000
16+
#header.text.selected.color = #1a1a00
17+
header.text.selected.color = #000000
1618
header.text.unselected.color = #ffffff
17-
header.text.font = SansSerif,plain,12
19+
header.text.font = SansSerif,plain,11
1820
#header.text.font.macosx = Helvetica,plain,12
21+
header.tab.selected.color = #a2afba
22+
header.tab.unselected.color = #2a4159
1923

2024
# GUI - CONSOLE
2125
# font is handled by preferences, since size/etc is modifiable

0 commit comments

Comments
 (0)