VF
-
I
@@ -55,30 +55,31 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-
+
Size:
-
-
- wght:
-
-
- slnt:
-
-
-
+
opsz:
-
+
+
+ wght:
+
+
+
+ slnt:
+
@@ -378,7 +379,7 @@ class BoundVar {
getValue(ev) {
return this.valueGetter ? this.valueGetter(this.e, this.lastValue, ev)
- : this.isCheckbox ? (this.e.checked || null)
+ : this.isCheckbox ? this.e.checked
: this.isNumber ? this.e.valueAsNumber
: this.e.value
}
@@ -500,7 +501,7 @@ class Vars {
refreshValue(name) {
let v = this.vars.get(name)
- return v ? this._refreshValue(v) : null
+ return v === undefined || v === null ? null : this._refreshValue(v)
}
_refreshValue(v, ev) {
@@ -593,7 +594,9 @@ class Vars {
if (v.isNumber) {
existingValue = parseFloat(existingValue)
} else if (v.isCheckbox) {
- existingValue = existingValue != '0' && existingValue != 'false' && existingValue != 'off'
+ existingValue = existingValue != '0' &&
+ existingValue != 'false' &&
+ existingValue != 'off'
}
v.setValue(existingValue)
} else {
@@ -873,7 +876,7 @@ function main() {
let varState = {
weight: 400, // 400..900
slant: 0, // 0..-10
- opsz: 16, // 16..32
+ opsz: 14, // 14..32
}
function updateVarFont() {
@@ -927,62 +930,59 @@ function main() {
updateVarFont()
})
- let varWeightNum = vars.bind('varWeightNum', (e, v) => {
+ let varWeightNum = vars.bind('_wght', '[name="varWeightNum"]', (e, v) => {
if (varWeightRange && !varWeightSettingValueImpl)
- varWeightRange.setValue(v)
+ vars.setValue("wght", v)
})
- let varSlantNum = vars.bind('varSlantNum', (e, v) => {
+ let varSlantNum = vars.bind('_slnt', '[name="varSlantNum"]', (e, v) => {
if (varSlantRange && !varSlantSettingValueImpl)
- varSlantRange.setValue(v)
+ vars.setValue("slnt", v)
})
- let varOpszNum = vars.bind('varOpszNum', (e, v) => {
+ let varOpszNum = vars.bind('_opsz', '[name="varOpszNum"]', (e, v) => {
if (varOpszRange && !varOpszSettingValueImpl)
- varOpszRange.setValue(v)
+ vars.setValue("opsz", v)
})
- varWeightRange = vars.bind('varWeight', (e, v) => {
+ function snapValue(v, factor) {
+ if (shiftKeyPressed && (keyPressed == "" || keyPressed == "Shift"))
+ v = Math.round(v / factor) * factor
+ return v
+ }
+
+ varWeightRange = vars.bind('wght', '[name="varWeight"]', (e, v) => {
varState.weight = v
varWeightSettingValueImpl = true
varWeightNum.setValue(v)
varWeightSettingValueImpl = false
updateVarFont()
}, (e, prevValue, ev) => {
- if (prevValue === undefined) {
+ if (prevValue === undefined)
return 400
- }
- v = e.valueAsNumber
- if (shiftKeyPressed && (keyPressed == "" || keyPressed == "Shift")) {
- v = Math.round(v / 100) * 100
- }
- return v
+ return snapValue(e.valueAsNumber, 100)
})
- varSlantRange = vars.bind('varSlant', (e, v) => {
+ varSlantRange = vars.bind('slnt', '[name="varSlant"]', (e, v) => {
varState.slant = v
varSlantSettingValueImpl = true
varSlantNum.setValue(v)
varSlantSettingValueImpl = false
updateVarFont()
}, (e, prevValue, ev) => {
- if (prevValue === undefined) {
+ if (prevValue === undefined)
return 0
- }
- return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
+ return snapValue(e.valueAsNumber, 1)
})
- varOpszRange = vars.bind('varOpsz', (e, v) => {
+ varOpszRange = vars.bind('opsz', '[name="varOpsz"]', (e, v) => {
varState.opsz = v
varOpszSettingValueImpl = true
varOpszNum.setValue(v)
varOpszSettingValueImpl = false
updateVarFont()
}, (e, prevValue, ev) => {
- if (prevValue === undefined) {
- return 0
- }
- return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
+ return snapValue(e.valueAsNumber, 1)
})
diff --git a/docs/lab/lab.css b/docs/lab/lab.css
index 833fe83d1..b60c688d4 100644
--- a/docs/lab/lab.css
+++ b/docs/lab/lab.css
@@ -82,10 +82,10 @@
--highlight-bg: #ddd;
--guide-color: rgba(255,0,255,0.15);
- --icon-minimize: url(../res/icons/minimize-black.svg);
- --icon-popup: url(../res/icons/popup-black.svg);
- --icon-reset: url(../res/icons/reset-black.svg);
- --icon-settings: url(../res/icons/settings-black.svg);
+ --icon-minimize: url(icons/minimize-black.svg);
+ --icon-popup: url(icons/popup-black.svg);
+ --icon-reset: url(icons/reset-black.svg);
+ --icon-settings: url(icons/settings-black.svg);
}
:root.color-scheme-dark {
@@ -116,10 +116,10 @@
--highlight-bg: #333;
--guide-color: rgba(255,100,255,0.15);
- --icon-minimize: url(../res/icons/minimize.svg);
- --icon-popup: url(../res/icons/popup.svg);
- --icon-reset: url(../res/icons/reset.svg);
- --icon-settings: url(../res/icons/settings.svg);
+ --icon-minimize: url(icons/minimize.svg);
+ --icon-popup: url(icons/popup.svg);
+ --icon-reset: url(icons/reset.svg);
+ --icon-settings: url(icons/settings.svg);
}
/* document ———————————————————————————————————————————————————————————————————————————— */
@@ -129,7 +129,7 @@ body {
--fgColorMax: var(--fgColor);
background-color: var(--bgColor);
color: var(--fgColor);
- font: 11px var(--font-family), sans-serif;
+ font: 11px var(--font-family),-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
font-weight:400; /*300=light, 400=regular, 500=medium, 600=semibold*/
transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
transition-property: color, background;
@@ -175,6 +175,10 @@ label {
margin: 2px 0;
}
+input[type="number"], input[type="text"] {
+ font: inherit;
+}
+
input[type="number"] {
width:50px;
background: none;
@@ -183,6 +187,8 @@ input[type="number"] {
padding: 4px;
border-radius: 2px;
background: var(--input-color-bg);
+ font-variant-numeric: tabular-nums;
+ font-feature-settings: "tnum";
}
select {
@@ -200,7 +206,9 @@ select {
background-position: right center;
}
/* fix for Firefox issue:; */
-select option { font-family:var(--font-family),Inter; }
+select option {
+ font-family:var(--font-family),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
+}
input[type="number"]:focus,
input[type="text"]:focus,
@@ -444,7 +452,7 @@ body.sidebar-minimized #sidebar-button {
background: var(--bgColor);
padding: 16px 24px 24px 24px;
user-select:none; -moz-user-select: none; -webkit-user-select:none;
- font-family: var(--font-family), sans-serif;
+ font-family: var(--font-family),-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
overflow: auto;
letter-spacing:0.012em;
transform-origin:100% 0%;
@@ -492,9 +500,6 @@ body.sidebar-minimized .options {
overflow: hidden;
text-overflow: ellipsis;
}
- /*.options select[name="sample"] {
- width:225px;
- }*/
.options input::placeholder {
color: var(--fgColor);
opacity: 0.4;
@@ -504,10 +509,11 @@ body.sidebar-minimized .options {
}
.options .label-and-value {
display: flex;
- flex-wrap: nowrap;
+ /*flex-wrap: nowrap;*/
+ flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
- height: var(--fieldHeight);
+ min-height: var(--fieldHeight);
}
.options .label-and-value > *:first-child {
flex: 0 0 auto;
@@ -515,18 +521,26 @@ body.sidebar-minimized .options {
text-align: left;
margin-right:6px;
}
+ .options .label-and-value select {
+ width:90px;
+ }
.options .label-and-value input {
width: 50px;
max-height: var(--fieldHeight);
box-sizing: border-box;
}
+ .options .label-and-value.with-slider input[type="number"] {
+ width: auto;
+ flex: 1 1 auto;
+ border: none;
+ padding: 2px;
+ margin-left: -2px;
+ background: transparent;
+ }
.options label input[type="checkbox"] + * {
display: inline-block;
min-width:50%;
}
- /*.options label input[type="checkbox"] + *:hover {
- color: var(--fgColorMax);
- }*/
.options label.rasterizePhrase {
margin-left:20px;
margin-bottom:20px;
@@ -542,46 +556,39 @@ body.sidebar-minimized .options {
.options input[type="checkbox"] + * {
user-select: none; -moz-user-select: none; -webkit-user-select:none;
}
+ .options .label-and-value.with-slider {
+ display: flex;
+ height: calc(var(--fieldHeight) * 2);
+ margin-bottom: var(--rowBottomMargin);
+ }
.options .varfontControl,
.options .staticfontControl {
transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
transition-property: opacity, height, margin;
}
- .options .varfontControl,
+ .options .label-and-value.with-slider.varfontControl,
body.varfont .options .staticfontControl {
+ display: block;
pointer-events:none;
overflow: hidden;
- opacity:0;
+ opacity: 0;
height: 0;
+ min-height: 0;
margin: 0;
}
- body.varfont .options .varfontControl {
+ body.varfont .options .label-and-value.with-slider.varfontControl {
+ display: flex;
overflow: visible;
pointer-events:all;
opacity:1;
- height: var(--fieldHeight);
+ height: calc(var(--fieldHeight) * 2);
margin-bottom: var(--rowBottomMargin);
}
- /*body.varfont .options .staticfontControl {
- display: none;
- }*/
- .options .varfontControl .label-and-value {
- display: flex;
- }
- /*body.varfont .options select[name="weight"] {
- pointer-events: none;
- opacity: 0.4;
- }*/
.options input[type="range"] {
flex: 1 1 auto;
}
- .options input[type="range"] + input[type="number"] {
- flex: 0 1 auto;
- width: 40px;
- border: none;
- padding: 2px;
- margin-left: 4px;
- background: transparent;
+ .options input[type="number"] + input[type="range"] {
+ flex: 0 0 100%;
}
.options .label-and-value input + note,
.options .label-and-value select + note {