Skip to content

Commit 3bfb4f0

Browse files
hansonrhansonr
hansonr
authored and
hansonr
committed
better button/label text positioning
1 parent 6673024 commit 3bfb4f0

File tree

2 files changed

+103
-73
lines changed

2 files changed

+103
-73
lines changed

‎sources/net.sf.j2s.java.core/src/swingjs/plaf/JSComponentUI.java‎

Lines changed: 94 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
import swingjs.api.js.J2SInterface;
6363
import swingjs.api.js.JQuery;
6464
import swingjs.api.js.JQueryObject;
65+
import swingjs.api.js.JSInterface;
6566

6667
/**
6768
* The JSComponentUI subclasses are where all the detailed HTML5 implementation
@@ -858,6 +859,8 @@ protected void setJ2sMouseHandler() {
858859
// The DOM attributes applet and _frameViewer are necessary for proper
859860
// direction to the target
860861
J2S.unsetMouse(domNode);
862+
if (domNode == null);
863+
updateDOMNode();
861864
DOMNode.setAttrs(domNode, "applet", applet, "_frameViewer", jc.getFrameViewer());
862865
J2S.setMouse(domNode, true);
863866
}
@@ -1217,8 +1220,10 @@ public void propertyChange(PropertyChangeEvent e) {
12171220
// domNode null could be a new table component
12181221
if (isUIDisabled || domNode == null)
12191222
return;
1220-
Object value = e.getNewValue();
12211223
String prop = e.getPropertyName();
1224+
Object value = e.getNewValue();
1225+
1226+
12221227
if (prop == "ancestor") {
12231228
if (isAWT)
12241229
setAWTFontAndColor((Container) value);
@@ -1282,6 +1287,10 @@ protected void propertyChangedCUI(PropertyChangeEvent e, String prop) {
12821287
// and we know it is not a JMenuBar menu
12831288
if (!isMenu && cellComponent == null)
12841289
getDOMNode();
1290+
1291+
1292+
if (id.indexOf("66_")>=0)System.err.println(this.id + " prop " + prop);
1293+
12851294
switch (prop) {
12861295
case "preferredSize":
12871296
// size has been set by JComponent layout
@@ -1299,7 +1308,6 @@ protected void propertyChangedCUI(PropertyChangeEvent e, String prop) {
12991308
return;
13001309
case "opaque":
13011310
setBackground(c.getBackground());// BH was CUI??
1302-
System.err.println("prop opaque " + c.isOpaque() + " " + this.id);
13031311
return;
13041312
case "inverted":
13051313
updateDOMNode();
@@ -1427,6 +1435,8 @@ protected boolean setUIDisabled(boolean b) {
14271435

14281436
protected DOMNode embeddingNode;
14291437

1438+
private DOMNode fontNode;
1439+
14301440
private static DOMNode tempDiv;
14311441

14321442
/**
@@ -1514,6 +1524,7 @@ protected void setWaitImage(boolean doShow) {
15141524
else
15151525
$(waitImage).hide();
15161526
}
1527+
15171528
protected DOMNode setCssFont(DOMNode obj, Font font) {
15181529
if (font != null) {
15191530
int istyle = font.getStyle();
@@ -1579,6 +1590,7 @@ private Dimension getIconSize(AbstractButton b) {
15791590
private Dimension getTextSize(AbstractButton b) {
15801591
if (textNode == null)
15811592
return null;
1593+
DOMNode.setStyles(textNode, "padding", "0");
15821594
String t = b.getText();
15831595
if (isAWT && t == "")
15841596
t = "\u00A0"; // AWT labels do not hide if ""
@@ -1597,6 +1609,7 @@ private Dimension getTextSize(AbstractButton b) {
15971609
protected Dimension setHTMLSize1(DOMNode node, boolean addCSS, boolean usePreferred) {
15981610
if (node == null)
15991611
return null;
1612+
if (id.indexOf("66_")>=0)System.err.println(this.id + " sethtmlsize1 " + (this.jc.getParent() != null));
16001613
addCSS &= !isMenuItem;
16011614
int h, w;
16021615
String w0 = null, h0 = null, w0i = null, h0i = null, position = null;
@@ -1758,6 +1771,9 @@ protected DOMNode setHTMLElementCUI() {
17581771
isTainted = false;
17591772
return (outerNode = DOMNode.createElement("div", "dummyFrame"));
17601773
}
1774+
1775+
if (id.indexOf("66_")>=0)System.err.println(this.id + " sethtmlelement ");
1776+
17611777
updateDOMNode();
17621778
checkTransparent();
17631779
Component[] children = getChildren();
@@ -2349,6 +2365,11 @@ protected void setIconAndText(String prop, Icon icon, int gap, String text) {
23492365
if (textNode != null) {
23502366
prop = "innerHTML";
23512367
obj = textNode;
2368+
// IT TURNS OUT...
2369+
// that for a <button> element to properly align vertically,
2370+
// the font must be set for the button element, not in a child element.
2371+
2372+
setCssFont(domNode, getFont()); // for vertical centering
23522373
setCssFont(textNode, getFont());
23532374
if (!isHTML)
23542375
text = PT.rep(text, "<", "&lt;").replace(' ', '\u00A0');
@@ -2390,7 +2411,7 @@ protected int getDefaultIconTextGap() {
23902411

23912412
protected void getJSInsets() {
23922413
if (insets == null)
2393-
insets = zeroInsets;
2414+
insets = new Insets(0, 0, 0, 0);
23942415
insets = jc.getInsets(insets);
23952416
}
23962417

@@ -2465,7 +2486,7 @@ protected void setAlignments(AbstractButton b, boolean justGetPreferred) {
24652486
Insets margins = (isLabel ? (isAWT ? b.getInsets() : insets) : getButtonMargins(b, justGetPreferred));
24662487
if (margins == null)
24672488
margins = zeroInsets;
2468-
Insets insets = (isLabel || !isSimpleButton || justGetPreferred ? zeroInsets : getButtonOuterInsets(b));
2489+
Insets myInsets = (isLabel || !isSimpleButton || justGetPreferred ? zeroInsets : getButtonOuterInsets(b));
24692490
int h = (dimText == null ? 0 : dimText.height);
24702491
int ih = (dimIcon == null ? 0 : dimIcon.height);
24712492
int hCtr = Math.max(h, ih);
@@ -2571,29 +2592,26 @@ protected void setAlignments(AbstractButton b, boolean justGetPreferred) {
25712592
return;
25722593
}
25732594
preferredDim = null;
2574-
Object cssCtr = getJSObject();
2595+
Object cssCtr = getJSObject(); // {...}
25752596
Object cssTxt = getJSObject();
25762597
Object cssIcon = getJSObject();
25772598

2578-
2579-
DOMNode.setStyles(centeringNode, "position", "absolute", "top", null, "left", null, "transform", null, "width", wCtr + "px", "height", hCtr + "px");
2599+
addJSKeyVal(cssCtr, "position", "absolute", "top", null, "left", null, "transform", null, "width", wCtr + "px", "height", hCtr + "px");
2600+
addJSKeyVal(cssIcon, "position", "absolute", "top", null, "left", null, "transform", null);
2601+
addJSKeyVal(cssTxt, "position", "absolute", "top", null, "left", null, "transform", null);
25802602

2581-
// horizontal
2582-
2583-
isFullyCentered = false;
2584-
if (alignHCenter && alignVCenter && wIcon == 0 || wText == 0 && margins.left == margins.right
2585-
&& margins.top == margins.bottom && insets.left == insets.right && insets.top == insets.bottom)
2586-
isFullyCentered = true;//!isLabel;
2603+
isFullyCentered = (alignHCenter && alignVCenter && wIcon == 0 || wText == 0 && margins.left == margins.right
2604+
&& margins.top == margins.bottom && myInsets.left == myInsets.right && myInsets.top == myInsets.bottom);
25872605
if (isFullyCentered) {
25882606
// simple totally centered label or button
25892607
// can't have width or height here --- let the browser figure that out
2590-
fullyCenter(cssCtr, true);
2591-
fullyCenter(cssIcon, false);
2592-
fullyCenter(cssTxt, false);
2608+
fullyCenter(cssCtr);
2609+
fullyCenter(cssIcon);
2610+
fullyCenter(cssTxt);
25932611
} else {
2594-
addCSS(cssIcon, "position", "absolute", "top", null, "left", null, "transform", null);
2595-
addCSS(cssTxt, "position", "absolute", "top", null, "left", null, "transform", null);
2596-
2612+
2613+
// horizontal
2614+
25972615
int left = -1;
25982616

25992617
if (menuAnchorNode == null) {
@@ -2602,53 +2620,53 @@ protected void setAlignments(AbstractButton b, boolean justGetPreferred) {
26022620
case SwingConstants.TOP:
26032621
case SwingConstants.BOTTOM:
26042622
case SwingConstants.CENTER:
2605-
addCSS(cssTxt, "left", ((wCtr - wText) / 2) + "px");
2606-
addCSS(cssIcon, "left", ((wCtr - wIcon) / 2) + "px");
2623+
addJSKeyVal(cssTxt, "left", ((wCtr - wText) / 2) + "px");
2624+
addJSKeyVal(cssIcon, "left", ((wCtr - wIcon) / 2) + "px");
26072625
break;
26082626
default:
26092627
int off = wCtr / 2;
26102628
if (textRight) {
2611-
addCSS(cssIcon, "left", "0px");
2612-
addCSS(cssTxt, "left", (gap + wIcon) + "px");
2629+
addJSKeyVal(cssIcon, "left", "0px");
2630+
addJSKeyVal(cssTxt, "left", (gap + wIcon) + "px");
26132631
} else {
2614-
addCSS(cssTxt, "left", off + "px");
2615-
addCSS(cssIcon, "left", (gap + wText) + "px");
2632+
addJSKeyVal(cssTxt, "left", off + "px");
2633+
addJSKeyVal(cssIcon, "left", (gap + wText) + "px");
26162634
}
26172635
break;
26182636
}
2619-
left = (w - wCtr + margins.left - margins.right - insets.left - insets.right) / 2;
2637+
left = (w - wCtr + margins.left - margins.right + myInsets.left - myInsets.right) / 2;
26202638
} else if (alignRight) {
2621-
left = w - wCtr - margins.right - insets.right - (cellComponent == null ? 0 : 2);// table fudge
2639+
left = w - wCtr - margins.right - myInsets.right - (cellComponent == null ? 0 : 2);// table fudge
26222640
if (textRight) {
2623-
addCSS(cssTxt, "left", (wCtr - wText) + "px");
2624-
addCSS(cssIcon, "left", "0px");
2641+
addJSKeyVal(cssTxt, "left", (wCtr - wText) + "px");
2642+
addJSKeyVal(cssIcon, "left", "0px");
26252643
} else {
2626-
addCSS(cssTxt, "left", "0px");
2627-
addCSS(cssIcon, "left", (wCtr - wIcon) + "px");
2644+
addJSKeyVal(cssTxt, "left", "0px");
2645+
addJSKeyVal(cssIcon, "left", (wCtr - wIcon) + "px");
26282646
}
26292647
} else {
2630-
left = margins.left + insets.left - (cellComponent == null ? 0 : 1);
2648+
left = margins.left + myInsets.left - (cellComponent == null ? 0 : 1);
26312649
if (textRight) {
26322650
int off = (!isMenuItem || ltr || actionNode != null ? 0 : actionItemOffset);
2633-
addCSS(cssIcon, "left", off + "px");
2634-
addCSS(cssTxt, "left", (wIcon + gap) + "px");
2651+
addJSKeyVal(cssIcon, "left", off + "px");
2652+
addJSKeyVal(cssTxt, "left", (wIcon + gap) + "px");
26352653
} else {
2636-
addCSS(cssTxt, "left", (!isMenuItem ? 0 : ltr ? actionItemOffset : -3) + "px");
2637-
addCSS(cssIcon, "left", (wText + gap) + "px");
2654+
addJSKeyVal(cssTxt, "left", (!isMenuItem ? 0 : ltr ? actionItemOffset : -3) + "px");
2655+
addJSKeyVal(cssIcon, "left", (wText + gap) + "px");
26382656
}
26392657
}
2640-
addCSS(cssCtr, "left", left + "px");
2658+
addJSKeyVal(cssCtr, "left", left + "px");
26412659
} else {
26422660
if (alignRight) {
26432661
DOMNode.setStyles(itemNode, "text-align", "right");
2644-
addCSS(cssCtr, "right", "0px");
2645-
addCSS(cssTxt, "right", "23px");
2646-
addCSS(cssIcon, "right", "0px"); // was 3
2662+
addJSKeyVal(cssCtr, "right", "0px");
2663+
addJSKeyVal(cssTxt, "right", "23px");
2664+
addJSKeyVal(cssIcon, "right", "0px"); // was 3
26472665
} else {
26482666
DOMNode.setStyles(itemNode, "text-align", "left");
2649-
addCSS(cssCtr, "left", "0px");
2650-
addCSS(cssIcon, "left", "0px"); // was 3
2651-
addCSS(cssTxt, "left", "23px");
2667+
addJSKeyVal(cssCtr, "left", "0px");
2668+
addJSKeyVal(cssIcon, "left", "0px"); // was 3
2669+
addJSKeyVal(cssTxt, "left", "23px");
26522670
}
26532671
}
26542672

@@ -2665,20 +2683,20 @@ protected void setAlignments(AbstractButton b, boolean justGetPreferred) {
26652683

26662684
switch (vAlign) {
26672685
case SwingConstants.TOP:
2668-
top = margins.top;
2686+
top = margins.top + myInsets.top;
26692687
break;
26702688
case SwingConstants.BOTTOM:
2671-
top = h - margins.bottom - hCtr;
2689+
top = h - margins.bottom - myInsets.bottom - hCtr;
26722690
break;
26732691
default:
26742692
case SwingConstants.CENTER:
2675-
top = (h - hCtr + margins.top - margins.bottom) / 2;
2693+
top = (h - hCtr + margins.top - margins.bottom + myInsets.top - myInsets.bottom) / 2;
26762694
break;
26772695
}
26782696

26792697
//System.out.println("jscui.setAlignments " + b.getText() + " " + vAlign + " " + top + " " + h + " " + hCtr + " " + jc.getClass().getName() + " " + b.getFont() + " " + margins + " " + insets + " " + top);
26802698

2681-
addCSS(cssCtr, "top", top + "px");
2699+
addJSKeyVal(cssCtr, "top", top + "px");
26822700
int itop;
26832701
String yoff = null;
26842702
String iscale = null;
@@ -2699,14 +2717,14 @@ protected void setAlignments(AbstractButton b, boolean justGetPreferred) {
26992717
yoff = "-50%";
27002718
break;
27012719
}
2702-
addCSS(cssTxt, "top", top + "%", "transform",
2720+
addJSKeyVal(cssTxt, "top", top + "%", "transform",
27032721
"translateY(" + (yoff == null ? "-" + top + "%" : yoff + ")"));
2704-
addCSS(cssIcon, "top", top + "%", "transform",
2722+
addJSKeyVal(cssIcon, "top", top + "%", "transform",
27052723
"translateY(-" + itop + "%)" + (iscale == null ? "" : iscale));
27062724
} else {
27072725
DOMNode.setStyles(menuAnchorNode, "height", h + "px");
27082726
//addCSS(cssTxt, "top", "50%", "transform", "translateY(-50%)");
2709-
addCSS(cssIcon, "top", "50%", "transform", "translateY(-65%) scale(0.6,0.6)");
2727+
addJSKeyVal(cssIcon, "top", "50%", "transform", "translateY(-65%) scale(0.6,0.6)");
27102728
}
27112729

27122730
}
@@ -2718,11 +2736,23 @@ protected void setAlignments(AbstractButton b, boolean justGetPreferred) {
27182736
updateCellNode();
27192737
}
27202738

2721-
private void addCSS(Object css, String... kv) {
2739+
private void fullyCenter(Object css) {
2740+
if (isSimpleButton)
2741+
addJSKeyVal(css, "width", null, "position", null, "padding", "0", "margin", "0 auto");
2742+
else
2743+
addJSKeyVal(css, "width", null, "top", "50%", "left", "50%", "transform",
2744+
"translateX(-50%)translateY(-50%)translateY(0.5px)translateX(0.5px)", "position", "absolute");
2745+
}
2746+
2747+
public static Object getJSObject() {
2748+
return /** @j2sNative {} || */ null;
2749+
}
2750+
2751+
public static void addJSKeyVal(Object o, String... kv) {
27222752
for (int i = 0, n = kv.length; i < n; i++) {
27232753
/** @j2sNative
27242754
*
2725-
* css[kv[i++]] = kv[i];
2755+
* o[kv[i++]] = kv[i];
27262756
*
27272757
*/
27282758
}
@@ -2739,21 +2769,6 @@ private void setCSS(Object css, DOMNode node) {
27392769
*/
27402770
}
27412771

2742-
2743-
private Object getJSObject() {
2744-
return /** @j2sNative {} || */ null;
2745-
}
2746-
2747-
2748-
protected void fullyCenter(Object css, boolean isCtr) {
2749-
// if (isLabel)
2750-
addCSS(css, "width", null, "top", "50%", "left", "50%", "transform",
2751-
"translateX(-50%)translateY(-50%)translateY(0.5px)translateX(0.5px)", "position", "absolute");
2752-
// no, this causes the label to be offset too much
2753-
// addCSS(node, "width", null, "top", null, "left", null, "transform", null, "position", null, "height", null);
2754-
}
2755-
2756-
27572772
protected void updateCellNode() {
27582773
// could be editor or cell
27592774
if (cellWidth == 0 || cellHeight == 0) {
@@ -2794,7 +2809,12 @@ protected void updateCellNode() {
27942809

27952810
}
27962811

2797-
2812+
/**
2813+
*
2814+
* @param b
2815+
* @param includeOuter only if getting preferred settings only
2816+
* @return
2817+
*/
27982818
private Insets getButtonMargins(AbstractButton b, boolean includeOuter) {
27992819
return (includeOuter ? b.getInsets() // will include margins
28002820
: b.getBorder() instanceof CompoundBorder
@@ -2930,8 +2950,11 @@ protected void setForegroundFor(DOMNode node, Color color) {
29302950

29312951
@Override
29322952
public void setFont(Font f) {
2933-
if (domNode != null && !isUIDisabled)
2934-
setCssFont((textNode == null ? domNode : textNode), f);
2953+
// if (domNode != null && !isUIDisabled) {
2954+
// if (textNode != null)
2955+
// setCssFont(textNode, f);
2956+
// setCssFont(domNode, f);
2957+
// }
29352958
}
29362959

29372960
@Override
@@ -3345,7 +3368,7 @@ private void setTransparent() {
33453368
public void paintBackground(JSGraphics2D g) {
33463369
boolean isOpaque = c.isOpaque();
33473370
boolean paintsSelf = jc.秘paintsSelf();
3348-
System.out.println("paintback " + this.id + " " + (/** @j2sNative this.jc.text||*/"")+ " " + isOpaque + " " + paintsSelf + " " + g);
3371+
//System.out.println("paintback " + this.id + " " + (/** @j2sNative this.jc.text||*/"")+ " " + isOpaque + " " + paintsSelf + " " + g);
33493372
Color color = (this.backgroundColor == null ? getBackground() : this.backgroundColor);
33503373
if (g == null) {
33513374
if (!paintsSelf)

0 commit comments

Comments
 (0)