Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font Family Drowpdown #12920

Merged
merged 23 commits into from
Sep 15, 2022
Merged

Font Family Drowpdown #12920

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
85614d3
create dropdown with 4 example fonts
amritanarasimhan Aug 4, 2022
c3a3004
edited font options
amritanarasimhan Aug 8, 2022
aeeb31e
added prop & changed select to datalist
amritanarasimhan Aug 18, 2022
9283a32
dropdown works
amritanarasimhan Aug 18, 2022
8b284ab
user input, correct font changes
amritanarasimhan Aug 20, 2022
41ea8f9
validate fonts
amritanarasimhan Aug 22, 2022
c648d13
added "add custom font" button
amritanarasimhan Aug 24, 2022
c6e4dea
store fonts on refresh/rerender
amritanarasimhan Aug 25, 2022
3d88e58
No remaining errors except 1
amritanarasimhan Aug 29, 2022
582f285
Done with dropdown
amritanarasimhan Aug 30, 2022
7c343a2
edited css
amritanarasimhan Aug 30, 2022
6f90f11
removed unnecessary code
amritanarasimhan Aug 30, 2022
0d5d23b
custom font added on changing focus
amritanarasimhan Aug 30, 2022
29658ca
Fixed requested changes
amritanarasimhan Aug 31, 2022
0ceb21b
not finished - detecting fonts on load
amritanarasimhan Sep 1, 2022
fdcd6ea
Fixed issue of loading custom fonts & code changes
amritanarasimhan Sep 7, 2022
00992ac
Merge branch 'master' into issue47
amritanarasimhan Sep 7, 2022
fd9f06f
update
amritanarasimhan Sep 14, 2022
30591d8
Merge branch 'issue47' of https://github.com/amritanarasimhan/Babylon…
amritanarasimhan Sep 14, 2022
2d4afe7
fixed merge issues
amritanarasimhan Sep 14, 2022
fbe9a23
changed alert & removed repeated code
amritanarasimhan Sep 15, 2022
da82300
formatting
amritanarasimhan Sep 15, 2022
d2b3289
more formatting
amritanarasimhan Sep 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
added "add custom font" button
  • Loading branch information
@amritanarasimhan
amritanarasimhan committed Aug 24, 2022
commit c648d13f235e137b031705e0582186faee60024b
64 changes: 44 additions & 20 deletions packages/dev/sharedUiComponents/src/lines/optionsLineComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ export interface IOptionsLineComponentProps {
addInput?: boolean;
noDirectUpdate?: boolean;
onSelect?: (value: number | string) => void;
onKeyDown?: (value: number | string) => void
extractValue?: (target: any) => number | string;
addVal?: (newVal: {label: string, value: number}) => void;

onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
allowNullValue?: boolean;
icon?: string;
Expand All @@ -26,7 +28,8 @@ export interface IOptionsLineComponentProps {
defaultIfNull?: number;
}

export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number | string, newOptions: IInspectableOptions[] }> {

export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number | string, newOptions: IInspectableOptions[] , addCustom: boolean}> {
ccpgc: CommonControlPropertyGridComponent;
private _localChange = false;
private _remapValueIn(value: number | null): number {
Expand All @@ -47,10 +50,10 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
constructor(props: IOptionsLineComponentProps) {
super(props);

this.state = { value: this._remapValueIn(this._getValue(props)), newOptions: this.props.options };
this.state = { value: this._remapValueIn(this._getValue(props)), newOptions: this.props.options, addCustom: false };
}

shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number, newOptions: IInspectableOptions[] }) {
shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number, newOptions: IInspectableOptions[], addCustom: boolean}) {
if (this._localChange) {
this._localChange = false;
return true;
Expand Down Expand Up @@ -79,21 +82,16 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
}

setValue(value: string | number) {
console.log(this.state.value)
this.setState({ value: value });
console.log(value)
}
// setOptions(label: string, value: number) {
// console.log("before", this.state.newOptions)
// this.state.newOptions.push({label: label, value: value})
// this.setState({ newOptions: this.state.newOptions });
// console.log("after", this.state.newOptions)
// }


updateValue(valueString: string) {
console.log(valueString)
let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);

// onkeydown = (event) => { event.keyCode === 13 ? this.ccpgc.fontFamilyOptions = [{label: valueString, value: this.props.options.length}] : null }
onkeydown = (event) => { event.keyCode === 13 && this.props.addVal != undefined ? (this.props.addVal({label: valueString, value: this.props.options.length}), this.forceUpdate()) : null }
//onkeydown = (event) => { event.keyCode === 13 && this.props.addVal != undefined ? this.forceUpdate() : null }
console.log(value)

if(isNaN(Number(value))){
for(let i = 0; i < this.props.options.length; i++){
Expand All @@ -102,29 +100,53 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
}
}
}

// onkeydown = (event) => { event.keyCode === 13 && this.props.addVal != undefined ? (this.props.addVal({label: valueString, value: this.props.options.length}), this.setState({addCustom : false}), this.setValue(this.props.options.length)) : null }
this.forceUpdate()

console.log(value)
if(value === 0){
this.setState({addCustom : true,


})
}
console.log("val", value)

this._localChange = true;

const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];

if (!this.props.noDirectUpdate) {
this.props.target[this.props.propertyName] = this._remapValueOut(value as number);
}
this.setState({ value: value });
console.log("value", this.state.value)

if (this.props.onSelect) {
console.log("we select?" + value)
this.props.onSelect(value);
}



const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];

this.raiseOnPropertyChanged(newValue, store);
}

updateCustomValue(){
//console.log("called", valueString)
//console.log("the value", val)
// this.setValue(val)
if (this.props.onSelect) {
console.log("we selectttttt?" + this.state.value)
this.props.onSelect(this.props.options.length - 1);
}

}

render() {
if(this.props.addInput){

if(this.state.addCustom){
return (
<div className={"listLine" + (this.props.className ? " " + this.props.className : "")}>
{this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color="black" className="icon" />}
Expand All @@ -133,7 +155,7 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
</div>
<div className="options">

<input type="text" list = "dropdown" onChange={(evt) => this.updateValue(evt.target.value)} />
{/* <input type="text" list = "dropdown" onChange={(evt) => this.updateValue(evt.target.value)} />
<datalist id="dropdown">
{this.props.options.map((option, i) => {
return (
Expand All @@ -144,10 +166,11 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
);
})}




</datalist>
</datalist> */}
<input type = "text" placeholder = "Enter a custom font here" id = "customFont" onKeyDown = {(event) => { event.keyCode === 13 && this.props.addVal != undefined ? (this.props.addVal({label: (document.getElementById("customFont") as HTMLInputElement).value, value: this.props.options.length}), this.setState({addCustom : false}), this.updateCustomValue()) : null }} />

</div>

Expand All @@ -167,6 +190,7 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
{this.props.options.map((option, i) => {
return (
<option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>
{console.log("here", this.props.options)}
{option.label}
</option>
);
Expand Down
125 changes: 72 additions & 53 deletions ...ditor/src/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,25 +58,32 @@ interface ICommonControlPropertyGridComponentProps {
onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
hideDimensions?: boolean;
}
interface ICommonControlPropertyGridComponentState {
fontFamilyOptions: IInspectableOptions[];
}

type ControlProperty = keyof Control | "_paddingLeft" | "_paddingRight" | "_paddingTop" | "_paddingBottom" | "_fontSize";

export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps, ICommonControlPropertyGridComponentState> {
private _onPropertyChangedObserver: Nullable<Observer<PropertyChangedEvent>> | undefined;
private _fontFamilyOptions: IInspectableOptions[] = [
{ label: "Arial", value: 0 },
{ label: "Verdana", value: 1 },
{ label: "Helvetica", value: 2 },
{ label: "Trebuchet MS", value: 3 },
{ label: "Times New Roman", value: 4 },
{ label: "Georgia", value: 5 },
{ label: "Garamond", value: 6 },
{ label: "Courier New", value: 7 },
{ label: "Brush Script MT", value: 8 },
];


constructor(props: ICommonControlPropertyGridComponentProps) {
super(props);
this.state = {
fontFamilyOptions : [
{ label: "Custom Font", value: 0},
{ label: "Arial", value: 1 },
{ label: "Verdana", value: 2 },
{ label: "Helvetica", value: 3 },
{ label: "Trebuchet MS", value: 4 },
{ label: "Times New Roman", value: 5 },
{ label: "Georgia", value: 6 },
{ label: "Garamond", value: 7 },
{ label: "Courier New", value: 8 },
{ label: "Brush Script MT", value: 9 },
],
}
this.addVal = this.addVal.bind(this);
const controls = this.props.controls;
for (const control of controls) {
Expand Down Expand Up @@ -108,30 +115,37 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
}
}
});
(async () => {
let reassignVals = false;
await document.fonts.ready;
for (const font of this._fontFamilyOptions.values()) {
if (!document.fonts.check(`12px "${font.label}"`)) {
this._fontFamilyOptions.splice(Number(font.value), 1);
reassignVals = true
}

}

componentWillMount(){
let reassignVals = false;
//await document.fonts.ready;
const correctFonts: IInspectableOptions[] = []
correctFonts.push({label: "Custom Font", value: 0})
for (const font of this.state.fontFamilyOptions.values()) {
if (document.fonts.check(`12px "${font.label}"`) && font.label != "Custom Font") {
console.log(font)
//this.state.fontFamilyOptions.splice(Number(font.value), 1);
correctFonts.push(font)
reassignVals = true
}
//need to reassign values if removing an element
if(reassignVals){
let val = 0
for (const font of this._fontFamilyOptions.values()) {
this._fontFamilyOptions.push({label: font.label, value: val})
// const index = this._fontFamilyOptions.indexOf(font)
// this._fontFamilyOptions.splice(index, 1)
val++
}
//this._fontFamilyOptions.splice(this._fontFamilyOptions.length / 2)

}
console.log("cf", correctFonts)
if(reassignVals){
let val = 0
for (const font of correctFonts) {
font.value = val
val++
}
console.log("in render Available Fonts:", [...this._fontFamilyOptions.values()]);
})();


}
this.setState({
fontFamilyOptions: correctFonts
});
//need to reassign values if removing an element

console.log("in render Available Fonts:", this.state.fontFamilyOptions);
}

private _getTransformedReferenceCoordinate(control: Control) {
Expand All @@ -149,7 +163,7 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
(control as any)[alignment] = value;
}
}
this.forceUpdate();

}

private _checkAndUpdateValues(propertyName: string, value: string) {
Expand Down Expand Up @@ -198,26 +212,33 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
}

public addVal(newVal: { label: string; value: number }) {
console.log("newval", newVal);

(async () => {
await document.fonts.ready;
if (!(this._fontFamilyOptions.find((element) => element.label.toLowerCase() === newVal.label.toLowerCase()) === undefined)) {
if (!(this.state.fontFamilyOptions.find((element) => element.label.toLowerCase() === newVal.label.toLowerCase()) === undefined)) {
alert("that font is already available");
} else {
this._fontFamilyOptions.push(newVal);
}

for (const font of this._fontFamilyOptions.values()) {
//if the font is supported in the browser
if (!document.fonts.check(`12px "${font.label}"`)) {
this._fontFamilyOptions.splice(Number(newVal.value), 1);
if (!document.fonts.check(`12px "${newVal.label}"`)) {
alert("this font is not supported in the browser");
}
else{
this.state.fontFamilyOptions.push(newVal)
this.setState({
fontFamilyOptions: [...this.state.fontFamilyOptions]
});
}

}

console.log("Available Fonts:", [...this._fontFamilyOptions.values()]);

//this.state.fontFamilyOptions.push(newVal);
console.log("Available Fonts:", [...this.state.fontFamilyOptions.values()]);

})();

}

componentWillUnmount() {
if (this._onPropertyChangedObserver) {
this.props.onPropertyChangedObservable?.remove(this._onPropertyChangedObserver);
Expand Down Expand Up @@ -310,8 +331,8 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
];

const proxyFontFamily: (string | undefined)[] = [];
for (let i = 0; i < this._fontFamilyOptions.length; i++) {
proxyFontFamily.push(this._fontFamilyOptions.at(i)?.label);
for (let i = 0; i < this.state.fontFamilyOptions.length; i++) {
proxyFontFamily.push(this.state.fontFamilyOptions.at(i)?.label);
}

let horizontalDisabled = false,
Expand Down Expand Up @@ -631,23 +652,21 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
label=""
target={proxy}
propertyName="fontFamily"
options={this._fontFamilyOptions}
addInput={true}
options={this.state.fontFamilyOptions}
addVal={this.addVal}
onSelect={(newValue) => {
proxy.fontFamily = proxyFontFamily[newValue as number];
console.log(proxyFontFamily)
console.log("proxy", proxy.fontFamily);
}}
//why do we need extract value?
extractValue={() => {
switch (proxy.fontFamily) {
case "Arial":
return 0;
case "Verdana":
return 1;
case "Helvetica":
case "Verdana":
return 2;
case "Tahoma":
case "Helvetica":
return 3;
case "Trebuchet MS":
return 4;
Expand Down
3 changes: 3 additions & 0 deletions packages/tools/guiEditor/src/components/propertyTab/propertyTab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
--buttonHoverBackground: #afafaf;
}


#ge-propertyTab {
user-select: none;
$line-padding-left: 5px;
Expand Down Expand Up @@ -159,6 +160,8 @@
transition: outline-color 0.2s;
border: transparent;
padding-left: 5px;


&:focus {
outline-width: 1px;
outline-color: black;
Expand Down