From 4aa742ea78533efbe00be4870cc1fbd3f76a1a12 Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Thu, 18 Feb 2021 17:00:11 -0500 Subject: [PATCH 1/9] cube not appearing in autocomplete bugfix --- src/components/editor/customCompleter.js | 1 + src/myr/reference.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/editor/customCompleter.js b/src/components/editor/customCompleter.js index 85c1454d..ceaf8fb7 100644 --- a/src/components/editor/customCompleter.js +++ b/src/components/editor/customCompleter.js @@ -36,6 +36,7 @@ export const customCompleter = { let reference = myrReference(); let keyWords = [...reference.geometry.map(obj => obj.name + "()"), + ...reference.geometry.map(obj => obj.byname + "()"), ...reference.transformations.map(obj => obj.name + "()"), ...reference.animations.map(obj => obj.name + "()"), "group()" diff --git a/src/myr/reference.js b/src/myr/reference.js index 854bca81..14fc1e58 100644 --- a/src/myr/reference.js +++ b/src/myr/reference.js @@ -128,6 +128,7 @@ export const dataText = (text) => { let geometry = [ { name: "box", + byname: "cube", parameters: [], description: The box function makes a 3D quadrilateral using the current cursor attributes. This function returns an {stringText("elementID")}., example: "box" From 570a4d978fecf69328d1c807be1afaa026727cba Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Sun, 3 Oct 2021 12:56:05 -0400 Subject: [PATCH 2/9] texture description update --- src/myr/reference.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/myr/reference.js b/src/myr/reference.js index daf2c4f9..267c4e4d 100644 --- a/src/myr/reference.js +++ b/src/myr/reference.js @@ -271,7 +271,7 @@ let transformations = [ { name: "setTexture", parameters: [{type: "string", name: "texture"}, {type: "number", name: "widthRepeat"}, {type: "number", name: "heightRepeat"}], - description: The setTexture function changes the texture of the cursor. The texture's normal color is displayed when setTextureColoring() is false, otherwise the texture will be affected by the current color. Textures can be applied either by using the name of one of or by inserting a valid url (e.g. "bricks" or "https://learnmyr.org/img/MYR-Logo.png"). WidthRepeat and heightRepeat will change how many times the texture is displayed on the object in each direction. If widthRepeat and heightRepeat are not declared they will be set to default settings. Depending on the policy of the website they’re from, image URLs may not be usable, which will result in a blank Texture and Color. An empty setTexture() or setTexture("") statement will remove the current texture., + description: The setTexture function changes the texture of the cursor. Textures can be applied either by using the name of one of these textures or by using a valid url (e.g. "bricks" or "https://learnmyr.org/img/MYR-Logo.png"). WidthRepeat and heightRepeat decide how many times the texture is repeated on the object in each direction. If widthRepeat or heightRepeat are not declared they will be set to 1. Depending on the policy of the website they’re from, image URLs may not be usable, which will result in a blank Texture and Color. An empty setTexture() or setTexture("") statement will remove the current texture., example: "setTexture" }, { From c2feb81f53de305beda40494cdf9a35f95c94505 Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Fri, 25 Mar 2022 18:17:21 -0400 Subject: [PATCH 3/9] icons and header moved --- src/components/editor/Editor.js | 2 +- src/components/layouts/Ide.js | 42 +++++++++---------- src/components/structural/header/Header.js | 6 +-- src/components/structural/header/MyrTour.js | 12 ++++-- .../structural/header/ProjectView.js | 19 ++++++++- src/css/App.css | 2 +- src/myr/reference.js | 4 +- 7 files changed, 54 insertions(+), 33 deletions(-) diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js index 3107eadd..e98a9bb5 100644 --- a/src/components/editor/Editor.js +++ b/src/components/editor/Editor.js @@ -8,7 +8,7 @@ import customCompleter from "./customCompleter.js"; import "brace/ext/searchbox"; /** - * Editor is a React Component that creat the Ace Editor in the DOM. + * Editor is a React Component that creates the Ace Editor in the DOM. */ class Editor extends Component { diff --git a/src/components/layouts/Ide.js b/src/components/layouts/Ide.js index a3a01542..934b6276 100644 --- a/src/components/layouts/Ide.js +++ b/src/components/layouts/Ide.js @@ -15,25 +15,6 @@ export const Ide = ({ editor, editorActions, user, authActions, scene, sceneActi new URLSearchParams(window.location.search).get("redirected") === "true" } /> -
{ scene.settings.viewOnly @@ -43,10 +24,29 @@ export const Ide = ({ editor, editorActions, user, authActions, scene, sceneActi
: <> -
+
+
-
+
diff --git a/src/components/structural/header/Header.js b/src/components/structural/header/Header.js index fcc06c05..4b6da329 100644 --- a/src/components/structural/header/Header.js +++ b/src/components/structural/header/Header.js @@ -680,7 +680,7 @@ class Header extends Component { Show Welcome Screen -

{ window.location.assign(window.origin); }} > MYR @@ -729,6 +729,7 @@ class Header extends Component { id="new-btn" onClick={() => { window.location.assign(window.origin); }} style={style.default} + size= "small" className="header-btn d-none d-md-block" > add_circle_outline @@ -737,6 +738,7 @@ class Header extends Component { @@ -759,8 +761,6 @@ class Header extends Component { layoutType={this.props.layoutType} referenceOpen={this.state.referenceOpen} handleReferenceToggle={this.handleReferenceToggle} /> -

-
-
} + {this.state.value === "c" && +
+
+ { // Sort the users projects in alphabetical order + userProjs.sort(function (a, b) { + return a.name < b.name ? -1 : a.name > b.name ? 1 : a.updateTime > b.updateTime ? -1 : a.updateTime < b.updateTime ? 1 : 0; + }).map(proj => { + return this.helper(proj, true); + }) + } +
+
} ({ }, }))(Tooltip); -const handleTextureOpen = () => { +/*const handleTextureOpen = () => { window.open(window.origin + "/textureReference"); -}; +};*/ export const stringText = (text) => { return ( From f5598542c0a4337df1eb30fe80fdc295e2639f19 Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Fri, 25 Mar 2022 18:52:51 -0400 Subject: [PATCH 4/9] error corrections --- src/components/editor/Editor.js | 4 ---- src/myr/reference.js | 11 ----------- 2 files changed, 15 deletions(-) diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js index b9a7d3f3..517d9eee 100644 --- a/src/components/editor/Editor.js +++ b/src/components/editor/Editor.js @@ -11,11 +11,7 @@ import { browserType } from "../../utils/browserType"; import FontSize from "./FontSize.js"; /** -<<<<<<< HEAD * Editor is a React Component that creates the Ace Editor in the DOM. -======= - * Editor is a React Component that create the Ace Editor in the DOM. ->>>>>>> 47f4a1c6a8606e286410ea5c55a04ed32a46dcea */ class Editor extends Component { /** diff --git a/src/myr/reference.js b/src/myr/reference.js index 000b9e74..62de4f2f 100644 --- a/src/myr/reference.js +++ b/src/myr/reference.js @@ -18,15 +18,9 @@ const HtmlTooltip = withStyles(theme => ({ }, }))(Tooltip); -<<<<<<< HEAD -/*const handleTextureOpen = () => { - window.open(window.origin + "/textureReference"); -};*/ -======= const handleAssetReferenceOpen = (isTexture = false) => { window.open(window.origin + "/asset-reference" + (isTexture ? "?tab=textures" : "")); }; ->>>>>>> 47f4a1c6a8606e286410ea5c55a04ed32a46dcea /** * Return a react elements contain a cue-card for String data type @@ -314,13 +308,8 @@ const transformations = [ }, { name: "setTexture", -<<<<<<< HEAD - parameters: [{type: "string", name: "texture"}, {type: "number", name: "widthRepeat"}, {type: "number", name: "heightRepeat"}], - description: The setTexture function changes the texture of the cursor. Textures can be applied either by using the name of one of these textures or by using a valid url (e.g. "bricks" or "https://learnmyr.org/img/MYR-Logo.png"). WidthRepeat and heightRepeat decide how many times the texture is repeated on the object in each direction. If widthRepeat or heightRepeat are not declared they will be set to 1. Depending on the policy of the website they’re from, image URLs may not be usable, which will result in a blank Texture and Color. An empty setTexture() or setTexture("") statement will remove the current texture., -======= parameters: [{ type: "string", name: "texture" }, { type: "number", name: "widthRepeat" }, { type: "number", name: "heightRepeat" }], description: The setTexture function changes the texture of the cursor. The texture's normal color is displayed when setTextureColoring() is false, otherwise the texture will be affected by the current color. Textures can be applied either by using the name of one of or by inserting a valid url (e.g. "bricks" or "https://learnmyr.org/img/MYR-Logo.png"). widthRepeat and heightRepeat will change how many times the texture is displayed on the object in each direction. If widthRepeat and heightRepeat are not declared they will be set to default settings. Depending on the policy of the website they’re from, image URLs may not be usable, which will result in a blank Texture and Color. An empty setTexture() or setTexture("") statement will remove the current texture., ->>>>>>> 47f4a1c6a8606e286410ea5c55a04ed32a46dcea example: "setTexture" }, { From 58f5f51b2765473be273496c5b3d7833c58a7f52 Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Fri, 25 Mar 2022 19:13:52 -0400 Subject: [PATCH 5/9] error testing --- src/components/editor/customCompleter.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/editor/customCompleter.js b/src/components/editor/customCompleter.js index 323059c3..b30fecb0 100644 --- a/src/components/editor/customCompleter.js +++ b/src/components/editor/customCompleter.js @@ -45,14 +45,8 @@ export const customCompleter = { const model = myrModels(); const Model = [...model.ModelPack.keys()]; -<<<<<<< HEAD - let reference = myrReference(); - let keyWords = [...reference.geometry.map(obj => obj.name + "()"), - ...reference.geometry.map(obj => obj.byname + "()"), -======= const reference = myrReference(); const MYRKeyWords = [...reference.geometry.map(obj => obj.name + "()"), ->>>>>>> 47f4a1c6a8606e286410ea5c55a04ed32a46dcea ...reference.transformations.map(obj => obj.name + "()"), ...reference.animations.map(obj => obj.name + "()"), ...reference.lights.map(obj=>obj.name+"()"), From 90bf02510aac75363cfbc51c1e0608e5cdd964bd Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Wed, 13 Apr 2022 14:57:39 -0400 Subject: [PATCH 6/9] UI redesign in-process --- src/components/courses/CourseSelect.js | 17 +- src/components/editor/Editor.js | 247 ++++++++- src/components/editor/FontSize.js | 47 +- src/components/editor/KeyboardShortcut.js | 34 +- src/components/layouts/Ide.js | 71 ++- src/components/reference/.Reference.js.swp | Bin 0 -> 16384 bytes .../reference/AssetReferencePage.js | 2 +- src/components/reference/Reference.js | 478 +++++++++++++----- src/components/structural/header/Header.js | 47 +- src/components/structural/header/MyrTour.js | 33 +- .../structural/header/ProjectView.js | 16 +- .../structural/header/SceneConfigMenu.js | 37 +- src/css/App.css | 97 +++- src/myr/textureReference.js | 159 +++++- 14 files changed, 1021 insertions(+), 264 deletions(-) create mode 100644 src/components/reference/.Reference.js.swp diff --git a/src/components/courses/CourseSelect.js b/src/components/courses/CourseSelect.js index af1eb9e8..055f8695 100644 --- a/src/components/courses/CourseSelect.js +++ b/src/components/courses/CourseSelect.js @@ -95,19 +95,24 @@ class CourseSelectModal extends Component { render() { const { classes } = this.props; const courses = [].concat(this.props.courses); + const style = { + default: { + margin: 1, + marginTop: 8, + color: "#fff", + } + }; return (
{ !this.props.hideTooltip ? - + + size="small" + style={style.default} + className="header-btn d-none d-sm-block"> school diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js index f3a2e440..26b515b4 100644 --- a/src/components/editor/Editor.js +++ b/src/components/editor/Editor.js @@ -9,11 +9,56 @@ import customCompleter from "./customCompleter.js"; import KeyboardShortcut from "./KeyboardShortcut.js"; import { browserType } from "../../utils/browserType"; import FontSize from "./FontSize.js"; +import Reference from "../reference/Reference.js"; +import SceneConfigMenu from "../structural/header/SceneConfigMenu.js"; +import { save } from "../../actions/projectActions.js"; + + +import sockets from "socket.io-client"; + + + +import "../../css/App.css"; + +import { + createTheme, + ThemeProvider, +} from "@material-ui/core"; /** - * Editor is a React Component that create the Ace Editor in the DOM. + * Editor is a React Component that creates the Ace Editor in the DOM. */ class Editor extends Component { + constructor(props) { + super(props); + this.state = { + referenceOpen: false, + assetReferenceOpen: false, + savedSettings: [], + + + logMenuOpen: false, + availProj: [], + sampleProj: [], + collectionOpen: false, + projectsOpen: false, + projectTab: "a", + snackOpen: false, + lastMsgTime: 0, + anchorEl: null, + navAwayModal: false, + needsNewId: false, // this explicitly tells us to make a new id + spinnerOpen: false, + coursesOpen: false, + tourOpen: false, + welcomeOpen: false, + updateCollection: false, + fetchCollection: false, + socket: sockets(), + googleUser: undefined + }; + } + /** * Called when the Edtior is unmounting (Being removed from the DOM) * @@ -43,6 +88,9 @@ class Editor extends Component { console.error("Unable to attach custom completers"); } + if (this.props.refExName) { + this.props.referenceExampleActions.fetchReferenceExample(this.props.refExName); + } // Warn the issue before refreshing the page window.addEventListener("beforeunload", (event) => { let text; @@ -79,19 +127,177 @@ class Editor extends Component { this.props.userActions.updateUserSettings(this.props.user.uid,this.props.settings); this.setState({"previousSettings":this.props.settings}); } + /*if (this.state.savedSettings.length === 0 && this.props.scene.id !== 0) { + this.setState({ savedSettings: this.buildSettingsArr() }); + + window.addEventListener("beforeunload", (event) => { + let finalSettings = this.buildSettingsArr(); + + if (!this.settingsEqual(finalSettings)) { + event.preventDefault(); + event.returnValue = "You may have unsaved changes!"; + } + }); + } */ } + + /** + * Flatten the sceneSettings from props (object) into an array for comparason + * @returns {array} Array of the scene settings + */ + buildSettingsArr = () => { + const sceneSettings = this.props.scene.settings; + return [sceneSettings.floorColor, + sceneSettings.showCoordHelper, sceneSettings.showFloor, + sceneSettings.skyColor, sceneSettings.viewOnly]; + }; + /** + * Compare two arrays of setting and determine whether is the settings are equal or not + * @param {array} newSettings Settings to compare + * @returns {boolean} If settings are equal or not + */ + settingsEqual = (newSettings) => { + for (let i = 0; i < newSettings.length; ++i) { + if (newSettings[i] !== this.state.savedSettings[i]) { + return false; + } + } + return true; + } + + handleReferenceToggle = () => { + this.setState({ referenceOpen: !this.state.referenceOpen }); + }; + + handleAssetReferenceToggle = () => { + this.setState({ assetReferenceOpen: !this.state.assetReferenceOpen }); + }; + + /** + * handeRender gets the information from Ace Editor and calls the action: render() + */ + handleRender = () => { + try { + let editor = window.ace.edit("ace-editor"); + this.props.actions.render(editor.getSession().getValue(), this.props.user ? this.props.user.uid : "anon"); + } catch (error) { + this.props.actions.render(this.props.text, this.props.user ? this.props.user.uid : "anon"); + } + } + + /** + * When the user clicks save it will upload the information to Firebase + */ + handleSave = (newCollectionID = undefined) => { + let editor, text; + if (!this.props.viewOnly) { + //If in editor mode, gets text directly from editor + editor = window.ace.edit("ace-editor"); + text = editor.getSession().getValue(); + } else { + //Otherwise, gets text from state (should be up to date since it is refreshed on editor unmount) + text = this.props.text; + } + + if (this.props.user && this.props.user.uid && text) { + this.setState({ spinnerOpen: true }); + let scene = document.querySelector("a-scene"); + // Access the scene and screen shot, with perspective view in a lossy jpeg format + let img = scene.components.screenshot.getCanvas("perspective").toDataURL("image/jpeg", 0.1); + + let newScene = { + name: (this.props.scene.name ? this.props.scene.name : "Untitled Scene"), + desc: this.props.scene.desc, + code: text, + uid: this.props.user.uid, + settings: { + ...this.props.scene.settings, + collectionID: newCollectionID || this.props.scene.settings.collectionID + }, + updateTime: Date.now(), + createTime: (this.props.scene.createTime ? this.props.scene.createTime : Date.now()) + }; + + save(this.props.user.uid, newScene, img, this.props.projectId).then((projectId) => { + if (!projectId) { + console.error("Could not save the scene"); + } + + this.props.actions.updateSavedText(text); + // If we have a new projectId reload page with it + if (projectId !== this.props.projectId) { + this.setState({ spinnerOpen: false }); + window.location.assign(`${window.origin}/scene/${projectId}`); + this.props.projectActions.asyncUserProj(this.props.user.uid); + } + if (!this.state.viewOnly) { + this.props.actions.refresh(text, this.props.user ? this.props.user.uid : "anon"); + } + this.setState({ spinnerOpen: false, saveOpen: false }); + this.state.socket.emit("save"); + return true; + }); + } else if (!text) { + alert("There is no code to save for this scene. Try adding some in the editor!"); + } else { + // TODO: Don't use alert + alert("We were unable to save your project. Are you currently logged in?"); + } + + if (!this.state.viewOnly) { + this.props.actions.refresh(text, this.props.user ? this.props.user.uid : "anon"); + } + this.setState({ savedSettings: this.buildSettingsArr() }); + } + + /** + * toggles the save drawer + */ + handleSaveToggle = () => this.setState({ saveOpen: !this.state.saveOpen }); + + /** + * forces save drawer closed + */ + handleSaveClose = () => this.setState({ saveOpen: false }); + + /** + * forces save drawer closed + */ + handleSaveOpen = () => this.setState({ saveOpen: true }); + + /** * Creates the editor in the DOM */ render() { + const keyTheme = createTheme({ + palette: { + primary: { + main: "#ffeb3b", + }, + secondary: { + main: "#9c27b0", + } + }, + }); + const refTheme = createTheme({ + palette: { + primary: { + main: "#a31545", + }, + secondary: { + main: "#4caf50" + }, + }, + }); return ( -
+
- { browserType() === "desktop" ?
-
: null } + { browserType() === "desktop" ?
+ + + + + + + + + + + + + + +
: null }
); } diff --git a/src/components/editor/FontSize.js b/src/components/editor/FontSize.js index 0ff83424..3059fa9f 100644 --- a/src/components/editor/FontSize.js +++ b/src/components/editor/FontSize.js @@ -3,10 +3,25 @@ import { Select, Button, Tooltip, + createTheme, + ThemeProvider, Icon } from "@material-ui/core"; + import "../../css/KeyboardShortcut.css"; + +const fontTheme = createTheme({ + palette: { + primary: { + main: "#9c27b0", + }, + secondary: { + main: "#9c27b0", + } + }, +}); + const options=[12, 14, 18, 24, 30, 36, 48]; class FontSize extends React.Component { @@ -17,21 +32,23 @@ class FontSize extends React.Component { render(){ return(
- - - + + + + +
); } diff --git a/src/components/editor/KeyboardShortcut.js b/src/components/editor/KeyboardShortcut.js index 1e4079bb..062c7ed0 100644 --- a/src/components/editor/KeyboardShortcut.js +++ b/src/components/editor/KeyboardShortcut.js @@ -5,6 +5,8 @@ import { Icon, Tooltip, Popover, + createTheme, + ThemeProvider, } from "@material-ui/core"; import "../../css/KeyboardShortcut.css"; @@ -69,6 +71,17 @@ const scene = [ }, ]; +const keyboardTheme = createTheme({ + palette: { + primary: { + main: "#1769aa", + }, + secondary: { + main: "#9c27b0", + } + }, +}); + /** * React components create the button with KeyboardShortcut window */ @@ -125,15 +138,18 @@ class KeyboardShortcut extends React.Component { render(){ return(
- - - + + + + + -
{ scene.settings.viewOnly @@ -50,11 +29,53 @@ export const Ide = ({ editor, editorActions, user, usersettings, userActions, au
: <> -
- +
+
+
-
- +
+
} diff --git a/src/components/reference/.Reference.js.swp b/src/components/reference/.Reference.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..7d6846fbd9c0fa9478d9844af9c1dd25b227ae03 GIT binary patch literal 16384 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 TJ>7SF7BBE(k&9+yyiEQB1HHbH literal 0 HcmV?d00001 diff --git a/src/components/reference/AssetReferencePage.js b/src/components/reference/AssetReferencePage.js index 186807f1..3d179c82 100644 --- a/src/components/reference/AssetReferencePage.js +++ b/src/components/reference/AssetReferencePage.js @@ -36,7 +36,7 @@ export default class AssetReference extends React.Component { return (
diff --git a/src/components/reference/Reference.js b/src/components/reference/Reference.js index c4e44723..420fcc51 100644 --- a/src/components/reference/Reference.js +++ b/src/components/reference/Reference.js @@ -1,9 +1,15 @@ import React, { Component } from "react"; + import myrReference from "../../myr/reference"; +import assetReference from "../../myr/textureReference"; import * as refFunctions from "../../myr/reference"; +import * as assetFunctions from "../../myr/reference"; +import ModelTab from "./ModelReferenceTab"; +import TextureTab from "./TextureReferenceTab"; import * as layoutTypes from "../../constants/LayoutTypes"; + import { Tabs, Tab, @@ -16,9 +22,17 @@ import { TableRow, TableCell, Tooltip, + Button, + //Select, Hidden } from "@material-ui/core"; +import "../../css/KeyboardShortcut.css"; + +//import { Popup, Card, Image, Rating } from "semantic-ui-react" +//import Draggable from 'react-draggable'; // The default + + const exitBtnStyle = { //paddingbottom: 100, position: "absolute", @@ -26,13 +40,13 @@ const exitBtnStyle = { right: 10, }; const newTabStyle = { - position: "fixed", + position: "absolute", top: 0, right: 50, }; const assetReferenceBtn = { - position: "fixed", + position: "absolute", top: 0, right: 95, }; @@ -43,14 +57,29 @@ const assetReferenceBtn = { class Reference extends Component { /** * Constructor - * value represents the current tab that's opened + * value represents the current reference tab that's opened + * assetValue represents the current asset reference tab that's opened */ constructor(props) { super(props); this.state = { value: "a", + assetValue: "a", }; + this.assetTableData = assetReference(); this.tableData = myrReference(); + + } + + componentDidMount() { + //document.querySelector(".referenceDrawer-slider").addEventListener("mousemove", e => this.handleMousemove(e)); + document.addEventListener("mousemove", e => this.handleMousemove(e)); + + //document.querySelector(".referenceDrawer-slider").addEventListener("mouseup", e => this.handleMousemove(e)); + document.addEventListener("mouseup", e => this.handleMouseup(e)); + + //document.querySelector(".font").addEventListener("mousedown", e => this.handleMousemove(e)); + document.addEventListener("mousedown", e => this.handleMousedown(e)); } /** @@ -58,11 +87,17 @@ class Reference extends Component { * * @param {Event} event * @param {string} value tab to be changed to. It should be an alphabet +* @param {string} assetValue tab to be changed to in asset drawer. It should be an alphabet + */ handleChange = (event, value) => { this.setState({ value }); }; + handleAssetChange = (event, assetValue) => { + this.setState({ assetValue }); + }; + /** * Handler for opening the reference page */ @@ -73,9 +108,33 @@ class Reference extends Component { assetHandleOpen = () => { window.open(window.origin + "/asset-reference"); - this.setState({ value: "a" }); + this.setState({ assetValue: "a" }); + }; + + state = { + isResizing: false, + lastDownX: 0, + newWidth: {}, + newHeight: {} + }; + + handleMousedown = e => { + this.setState({ isResizing: true, lastDownX: e.clientX }); }; + + handleMousemove = e => { + if (!this.state.isResizing) { + return; + } + this.setState({ newWidth: { width: e.clientX} }); + this.setState({ newHeight: { height: (648 - e.clientY)} }); + console.log("e.clientX:", e.clientX, " e.clientY:", e.clientY); + }; + + handleMouseup = () => { + this.setState({ isResizing: false }); + }; nameHelper = (name, parameters) => { return ( @@ -99,6 +158,28 @@ class Reference extends Component { ); }; + assetNameHelper = (name, parameters) => { + return ( + {name}({(parameters.map((element, i, params) => { + let comma = i < params.length - 1 ? ", " : ""; + switch (element.type) { + case "number": + return {assetFunctions.numberText(element.name)}{comma}; + case "string": + return {assetFunctions.stringText(element.name)}{comma}; + case "bool": + return {assetFunctions.boolText(element.name)}{comma}; + case "array": + return {assetFunctions.arrayText(element.name)}{comma}; + case "data": + return {assetFunctions.dataText(element.name)}{comma}; + default: + return null; + } + }))}); + ); + }; + /** * Create a button that will link to the example scene * @param {string} example name of the API @@ -128,20 +209,43 @@ class Reference extends Component { */ TableEx = (category) => { return ( - - +
+ - Name - Description - Example + Name + Description + Example {this.tableData[category].map((row, index) => ( - {this.nameHelper(row.name, row.parameters)} - {row.description} - {this.exampleHelper(row.example)} + {this.nameHelper(row.name, row.parameters)} + {row.description} + {this.exampleHelper(row.example)} + + ))} + +
+ ); + }; + + assetTableEx = (category) => { + return ( + + + + Name + Description + Example + + + + {this.assetTableData[category].map((row, index) => ( + + {this.assetNameHelper(row.name, row.creator)} + + {this.exampleHelper(row.image)} ))} @@ -153,136 +257,238 @@ class Reference extends Component { * Reneter Button that will open Drawer of reference with different categories */ render() { - const style = { - margin: 2, - color: "#fff", - }; - const isDisabled = this.props.layoutType === layoutTypes.REFERENCE; + const isDisabled = this.props.layoutType === layoutTypes.REFERENCE; + + let tempHeight = this.state.newHeight; + let tempWidth = this.state.newWidth; + + //const { classes } = this.props; return ( -
+
{!isDisabled ? - - help - + - - -
-

MYR API - Reference

- { - this.props.handleReferenceToggle(); - this.setState({ value: "a" }); - }}> - close - - - menu_book - - - settings_system_daydream - -
-
- - category} - label={ - -
GEOMETRY
- - } - value='a' /> - bubble_chart} - label={ - -
TRANSFORMATIONS
- - } - value='b' /> - zoom_out_map} //swap_horiz control_camera category - label={ - -
ANIMATIONS
- - } - value='c' /> - widgets} - label={ - -
GROUPS
- - } - value='d' /> - highlight} - label={ - -
LIGHT
- - } - value='e' /> - -
- {
-

Key: array - bool - number - string - group - data

-
} - {this.state.value === "a" && -
- {this.TableEx("geometry")} -
} - {this.state.value === "b" && -
- {this.TableEx("transformations")} -
} - {this.state.value === "c" && -
- {this.TableEx("animations")} -
} - {this.state.value === "d" && -
- {this.TableEx("groups")} -
} - {this.state.value === "e" && -
- {this.TableEx("lights")} + + + +
+ +
+

MYR API - Reference

+ { + this.props.handleReferenceToggle(); + this.setState({ newHeight: 80}); + this.setState({ newWidth: 81}); + this.setState({ value: "a" }); + }}> + close + + + menu_book + + + settings_system_daydream + +
+
+ + variant="scrollable"> + category} + label={ + +
GEOMETRY
+ + } + value='a' /> + bubble_chart} + label={ + +
TRANSFORMATIONS
+ + } + value='b' /> + zoom_out_map} //swap_horiz control_camera category + label={ + +
ANIMATIONS
+ + } + value='c' /> + widgets} + label={ + +
GROUPS
+ + } + value='d' /> + highlight} + label={ + +
LIGHT
+ + } + value='e' /> + +
+ {
+

Key: array + bool + number + string + group + data

} - + {this.state.value === "a" && +
+ {this.TableEx("geometry")} +
} + {this.state.value === "b" && +
+ {this.TableEx("transformations")} +
} + {this.state.value === "c" && +
+ {this.TableEx("animations")} +
} + {this.state.value === "d" && +
+ {this.TableEx("groups")} +
} + {this.state.value === "e" && +
+ {this.TableEx("lights")} +
} + +
+ +
+ +
+

MYR API - Asset Reference

+ { + this.props.handleAssetReferenceToggle(); + this.setState({ newHeight: 80}); + this.setState({ newWidth: 81}); + this.setState({ assetValue: "a" }); + }}> + close + + + settings_system_daydream + +
+
+ + model} + label={ + +
MODEL
+ + } + assetValue='a' /> + texture} + label={ + +
TEXTURE
+ + } + assetValue='b' /> + + {this.state.assetValue === "a" && +
+ +
} + {this.state.assetValue === "b" && +
+ +
} +
+ +
+ : null}
); diff --git a/src/components/structural/header/Header.js b/src/components/structural/header/Header.js index 00dee71a..d47248f4 100644 --- a/src/components/structural/header/Header.js +++ b/src/components/structural/header/Header.js @@ -1,7 +1,5 @@ import React, { Component, Fragment } from "react"; -import Reference from "../../reference/Reference.js"; import Collection from "../../collection/Collection.js"; -import SceneConfigMenu from "./SceneConfigMenu.js"; import Sidebar from "./Sidebar.js"; import MyrTour from "./MyrTour.js"; import ProjectView from "./ProjectView.js"; @@ -24,7 +22,7 @@ import { Snackbar, Popover, Avatar, - createMuiTheme, + createTheme, MuiThemeProvider } from "@material-ui/core"; import { save } from "../../../actions/projectActions.js"; @@ -666,7 +664,7 @@ class Header extends Component { color: "#777", }, }; - const theme = createMuiTheme({ + const theme = createTheme({ palette: { primary: { main: "#3f51b5", @@ -729,7 +727,7 @@ class Header extends Component { Show Welcome Screen -

{ window.location.assign(window.origin); }} > MYR @@ -778,6 +776,7 @@ class Header extends Component { id="new-btn" onClick={() => { window.location.assign(window.origin); }} style={style.default} + size= "small" className="header-btn d-none d-md-block" > add_circle_outline @@ -786,6 +785,7 @@ class Header extends Component { @@ -800,33 +800,16 @@ class Header extends Component { handleProjectToggle={this.handleProjectToggle} tab={this.state.projectTab} user={this.props.user} /> - -

-
- - + + + -
} + {this.state.value === "c" && +
+
+ { // Sort the users projects in alphabetical order + userProjs.sort(function (a, b) { + return a.name < b.name ? -1 : a.name > b.name ? 1 : a.updateTime > b.updateTime ? -1 : a.updateTime < b.updateTime ? 1 : 0; + }).map(proj => { + return this.helper(proj, true); + }) + } +
+
} +
{!isDisabled ?
- - - settings - - + + + + + div { justify-content: left !important; } +.keyboard-button { + color: #673ab7; + background-color: #673ab7; + margin-left:2px; +} + +.reference-button { + display: inline-block; + margin-left:2px; +} + +.asset-button { + display: inline-block; + margin-left:2px; +} + .MuiTabs-root-76 { overflow: unset !important; } @@ -271,6 +289,41 @@ div.side-drawer>div { #ace-editor { border-bottom: 1px solid; border-top: 1px solid; + z-index: 5; + position: "absolute" +} + +.leftConsole { + position: "absolute"; + background-color: red; +} + +.console { + resize: both; + overflow: auto; +} + +.console-footer { + background-color: black; + z-index: 2000; +} + +#dragger { + width: 5px; + cursor: "ew-resize"; + padding: 4px 0 0; + border-top: "1px solid #ddd"; + position: absolute; + top: 0; + left: 0; + bottom: 0; + z-index: 100; + background-color: #f4f7f9; +} + +.config { + display: inline-block; + margin-left:2px; } .guided div#ace-editor { @@ -299,6 +352,20 @@ div#reference-tabs { min-height: unset !important; } +div#assetReference-tabs { + overflow: unset !important; + min-height: unset !important; +} + +.reference-drawer-header { + padding-bottom: 0px; + margin-bottom: 0px; +} + +#refTableHead { + margin-bottom: 20px; +} + .sidebar-btn .material-icons { margin: 0 .7em; } @@ -314,8 +381,22 @@ span.user-name { } div#reference-drawer>div { - width: 67%; + width: 81vh; + height: 80vh; + resize: both; + z-index: 10; + position: "absolute" +} + +div#textureReference-drawer>div { + width: 81vh; + height: 80vh; + resize: both; + z-index: 10; + position: "absolute" } + + .refExample { margin-right: 10px; } @@ -410,9 +491,13 @@ div#projectDrawer>div { } footer { - background-color: #222; + background-color: black; color: #fff; - margin-top: 20px; + margin-top: 0px; + padding-top: 1px; + padding-bottom: 1px; + z-index: 2000; + position: "absolute" } footer a { @@ -432,6 +517,6 @@ footer a:hover { z-index: 200; display: flex; bottom: 4px; - right: 18px; + right: 10px; } } diff --git a/src/myr/textureReference.js b/src/myr/textureReference.js index eeefe3b5..18b0abcd 100644 --- a/src/myr/textureReference.js +++ b/src/myr/textureReference.js @@ -1,3 +1,150 @@ +import React from "react"; +import { + Tooltip, + Typography, + withStyles +} from "@material-ui/core"; + +/** + * Custom styles that inject to the cue cards + */ +const HtmlTooltip = withStyles(theme => ({ + tooltip: { + maxWidth: 300, + fontSize: theme.typography.pxToRem(14), + "& b": { + fontWeight: "inherit", + }, + }, +}))(Tooltip); + +/** + * Return a react elements contain a cue-card for String data type + */ +export const stringText = (text) => { + return ( + + String +

+ In computer science a string is any finite sequence of characters + (i.e., letters, numerals, symbols and punctuation marks).
+

+ {text === "elementID" && +

An elementID is a special type of string returned by geometries and groups.

} + + } + > + + {text} + + ); +}; + +/** + * Return a react elements contain a cue-card for Number data type + */ +export const numberText = (text) => { + return ( + + Number +

+ A number is any real number, or an expression that evaluates to a real number + (e.g., -2, 3.14, 1/3). +

+ + } + > + + {text} + + ); +}; + +/** + * Return a react elements contain a cue-card for Boolean data type + */ +export const boolText = (text) => { + return ( + + Bool +

+ In computer science, the bool data type has one of two possible Boolean values: true or false. +

+ + } + > + + {text} + + ); +}; + +/** + * Return a react elements contain a cue-card for Array data type + */ +export const arrayText = (text) => { + return ( + + Array +

+ In computer science, an array is a data structure that consists of a number of indexable elements. +

+

+ This code sets the color of the cursor to blue: +

+

+ let colors = ["blue", "green", "red"];
+ setColor(colors[0]);
+ box();
+

+ + } + > + + {text} + + ); +}; + +/** + * Return a react elements contain a cue-card for dynamic data type + */ +export const dataText = (text) => { + return ( + + Data +

+ Data can be of any valid JS datatype. This includes a strings, numbers, booleans, and objects among other datatypes.
+

+ + } + > + + {text} + + ); +}; + /** * List of texture reference */ @@ -97,7 +244,15 @@ const texture = [ image: "wood", creator: "Webtreats", }, - ]; + -export default texture; +const assets = { + texture: texture, + //model: model, +}; + +export default function r(asset = assets) { + return asset; +} + From ff4152577b52fd66c501199b8ba96e80bc6c7f7d Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Fri, 15 Apr 2022 15:43:13 -0400 Subject: [PATCH 7/9] UI changes --- src/components/editor/Editor.js | 4 +- src/components/reference/.Reference.js.swp | Bin 16384 -> 0 bytes src/components/reference/Reference.js | 144 +++++------------- src/components/structural/header/Header.js | 4 +- .../structural/header/SceneConfigMenu.js | 3 +- src/myr/textureReference.js | 11 +- 6 files changed, 45 insertions(+), 121 deletions(-) delete mode 100644 src/components/reference/.Reference.js.swp diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js index 26b515b4..19a6622c 100644 --- a/src/components/editor/Editor.js +++ b/src/components/editor/Editor.js @@ -285,9 +285,11 @@ class Editor extends Component { palette: { primary: { main: "#a31545", + contrastText: "#FFFFFF" }, secondary: { - main: "#4caf50" + main: "#4caf50", + contrastText: "#FFFFFF" }, }, }); diff --git a/src/components/reference/.Reference.js.swp b/src/components/reference/.Reference.js.swp deleted file mode 100644 index 7d6846fbd9c0fa9478d9844af9c1dd25b227ae03..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16384 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 TJ>7SF7BBE(k&9+yyiEQB1HHbH diff --git a/src/components/reference/Reference.js b/src/components/reference/Reference.js index 420fcc51..7062b049 100644 --- a/src/components/reference/Reference.js +++ b/src/components/reference/Reference.js @@ -1,9 +1,7 @@ import React, { Component } from "react"; import myrReference from "../../myr/reference"; -import assetReference from "../../myr/textureReference"; import * as refFunctions from "../../myr/reference"; -import * as assetFunctions from "../../myr/reference"; import ModelTab from "./ModelReferenceTab"; import TextureTab from "./TextureReferenceTab"; @@ -29,12 +27,7 @@ import { import "../../css/KeyboardShortcut.css"; -//import { Popup, Card, Image, Rating } from "semantic-ui-react" -//import Draggable from 'react-draggable'; // The default - - const exitBtnStyle = { - //paddingbottom: 100, position: "absolute", top: 0, right: 10, @@ -48,7 +41,7 @@ const newTabStyle = { const assetReferenceBtn = { position: "absolute", top: 0, - right: 95, + right: 50, }; /** @@ -65,21 +58,25 @@ class Reference extends Component { this.state = { value: "a", assetValue: "a", + isResizing: false, + lastDownX: 0, + lastDownY: 0, + newWidth: {}, + newHeight: {height: 0}, }; - this.assetTableData = assetReference(); this.tableData = myrReference(); } componentDidMount() { - //document.querySelector(".referenceDrawer-slider").addEventListener("mousemove", e => this.handleMousemove(e)); document.addEventListener("mousemove", e => this.handleMousemove(e)); - - //document.querySelector(".referenceDrawer-slider").addEventListener("mouseup", e => this.handleMousemove(e)); document.addEventListener("mouseup", e => this.handleMouseup(e)); - - //document.querySelector(".font").addEventListener("mousedown", e => this.handleMousemove(e)); document.addEventListener("mousedown", e => this.handleMousedown(e)); + + const qsa = new URLSearchParams(window.location.search); + if (qsa.has("tab") && qsa.get("tab").toLowerCase() === "textures") { + this.setState({ assetValue: "b" }); + } } /** @@ -111,15 +108,14 @@ class Reference extends Component { this.setState({ assetValue: "a" }); }; - state = { - isResizing: false, - lastDownX: 0, - newWidth: {}, - newHeight: {} - }; - handleMousedown = e => { - this.setState({ isResizing: true, lastDownX: e.clientX }); + if(this.state.newHeight === undefined) { + this.setState({newHeight: {height: 1}}); + } + + if(((648-e.clientY) < (this.state.newHeight.height))) { + this.setState({ isResizing: true}); + } }; handleMousemove = e => { @@ -129,7 +125,6 @@ class Reference extends Component { this.setState({ newWidth: { width: e.clientX} }); this.setState({ newHeight: { height: (648 - e.clientY)} }); - console.log("e.clientX:", e.clientX, " e.clientY:", e.clientY); }; handleMouseup = () => { @@ -158,28 +153,6 @@ class Reference extends Component { ); }; - assetNameHelper = (name, parameters) => { - return ( - {name}({(parameters.map((element, i, params) => { - let comma = i < params.length - 1 ? ", " : ""; - switch (element.type) { - case "number": - return {assetFunctions.numberText(element.name)}{comma}; - case "string": - return {assetFunctions.stringText(element.name)}{comma}; - case "bool": - return {assetFunctions.boolText(element.name)}{comma}; - case "array": - return {assetFunctions.arrayText(element.name)}{comma}; - case "data": - return {assetFunctions.dataText(element.name)}{comma}; - default: - return null; - } - }))}); - ); - }; - /** * Create a button that will link to the example scene * @param {string} example name of the API @@ -230,29 +203,6 @@ class Reference extends Component { ); }; - assetTableEx = (category) => { - return ( -
- - - Name - Description - Example - - - - {this.assetTableData[category].map((row, index) => ( - - {this.assetNameHelper(row.name, row.creator)} - - {this.exampleHelper(row.image)} - - ))} - -
- ); - }; - /** * Reneter Button that will open Drawer of reference with different categories */ @@ -262,7 +212,6 @@ class Reference extends Component { let tempHeight = this.state.newHeight; let tempWidth = this.state.newWidth; - //const { classes } = this.props; return (
{!isDisabled ? @@ -272,8 +221,12 @@ class Reference extends Component { id="reference-button" variant="contained" size="small" + style={{marginRight: 2}} color="primary" - onClick={this.props.handleReferenceToggle}> + onClick={() => { + this.props.handleReferenceToggle(); + this.setState({ newHeight: {height: 518}}); + }}> help @@ -283,40 +236,25 @@ class Reference extends Component { variant="contained" size="small" color="secondary" - onClick={this.props.handleAssetReferenceToggle}> - texture + onClick= {() => { + this.props.handleAssetReferenceToggle(); + this.setState({ newHeight: {height: 518}}); + }}> + photo
-

MYR API - Reference

+

MYR API - Reference

menu_book - - settings_system_daydream -
variant="scrollable"> category} @@ -392,7 +322,7 @@ class Reference extends Component { value='e' />
- {
+ {

Key: array bool number @@ -451,15 +381,15 @@ class Reference extends Component { color="default" style={assetReferenceBtn} onClick={this.assetHandleOpen}> - settings_system_daydream + menu_book

+ onChange={this.handleAssetChange} + value={this.state.assetValue} + variant="scrollable"> model} label={ @@ -467,7 +397,7 @@ class Reference extends Component {
MODEL
} - assetValue='a' /> + value='a' /> texture} label={ @@ -475,7 +405,7 @@ class Reference extends Component {
TEXTURE
} - assetValue='b' /> + value='b' /> {this.state.assetValue === "a" &&
diff --git a/src/components/structural/header/Header.js b/src/components/structural/header/Header.js index d47248f4..10e3bcf6 100644 --- a/src/components/structural/header/Header.js +++ b/src/components/structural/header/Header.js @@ -643,13 +643,13 @@ class Header extends Component { }, clear: { margin: 5, - marginRight: 10, + marginRight: 8, padding: 0, background: "linear-gradient(45deg, #FE3B3B 30%, #FF3B3B 90%)", }, clear_disabled: { margin: 5, - marginRight: 10, + marginRight: 8, padding: 0, background: "#222", border: "2px solid", diff --git a/src/components/structural/header/SceneConfigMenu.js b/src/components/structural/header/SceneConfigMenu.js index f67738d0..42bfa9e6 100644 --- a/src/components/structural/header/SceneConfigMenu.js +++ b/src/components/structural/header/SceneConfigMenu.js @@ -41,7 +41,8 @@ function getModalStyle() { const configTheme = createTheme({ palette: { primary: { - main: "#fdd835", + main: "#ffb300", + contrastText: "#FFFFFF" }, }, }); diff --git a/src/myr/textureReference.js b/src/myr/textureReference.js index 18b0abcd..ccad1fbe 100644 --- a/src/myr/textureReference.js +++ b/src/myr/textureReference.js @@ -245,14 +245,5 @@ const texture = [ creator: "Webtreats", }, ]; - -const assets = { - texture: texture, - //model: model, -}; - -export default function r(asset = assets) { - return asset; -} - +export default texture; \ No newline at end of file From 0ba454510d2aff726008886b4a316e4263f484fb Mon Sep 17 00:00:00 2001 From: Joshua119 Date: Fri, 15 Apr 2022 19:56:40 -0400 Subject: [PATCH 8/9] user Avatar shifted right --- src/components/structural/header/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structural/header/Header.js b/src/components/structural/header/Header.js index 10e3bcf6..2cd55b74 100644 --- a/src/components/structural/header/Header.js +++ b/src/components/structural/header/Header.js @@ -264,7 +264,7 @@ class Header extends Component { open={this.state.logMenuOpen} onClick={() => this.setState({ logMenuOpen: !this.state.logMenuOpen })} label="logout" - style={{ marginTop: 5 }} /> + style={{ marginTop: 5, marginLeft: 10 }} /> Date: Mon, 18 Apr 2022 02:34:52 -0400 Subject: [PATCH 9/9] bugfixing --- src/components/editor/Editor.js | 20 +-- src/components/reference/Reference.js | 147 +++++++++++++----- src/components/structural/header/Header.js | 4 +- .../structural/header/ProjectView.js | 16 -- 4 files changed, 112 insertions(+), 75 deletions(-) diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js index 19a6622c..b98a8a38 100644 --- a/src/components/editor/Editor.js +++ b/src/components/editor/Editor.js @@ -32,11 +32,7 @@ class Editor extends Component { constructor(props) { super(props); this.state = { - referenceOpen: false, - assetReferenceOpen: false, savedSettings: [], - - logMenuOpen: false, availProj: [], sampleProj: [], @@ -166,14 +162,6 @@ class Editor extends Component { return true; } - handleReferenceToggle = () => { - this.setState({ referenceOpen: !this.state.referenceOpen }); - }; - - handleAssetReferenceToggle = () => { - this.setState({ assetReferenceOpen: !this.state.assetReferenceOpen }); - }; - /** * handeRender gets the information from Ace Editor and calls the action: render() */ @@ -266,7 +254,6 @@ class Editor extends Component { */ handleSaveOpen = () => this.setState({ saveOpen: true }); - /** * Creates the editor in the DOM */ @@ -322,13 +309,8 @@ class Editor extends Component { + layoutType={this.props.layoutType}/> -