Skip to content

Commit

Permalink
graph inside graph renders children inside parent graph (Doenet#2007)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dqnykamp
dqnykamp authored Apr 4, 2023
1 parent 541f71f commit 8c19893
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 9 deletions.
41 changes: 40 additions & 1 deletion cypress/e2e/DoenetML/tagSpecific/graph.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2008,4 +2008,43 @@ describe('Graph Tag Tests', function () {

});

});
it('graph inside graph renders children in parent graph', () => {
cy.window().then(async (win) => {
win.postMessage({
doenetML: `
<text>a</text>
<graph name="g1">
<vector tail="(3,4)">(4,-5)</vector>
<graph name="g1inner" xmin="-2" xmax="5" ymin="-3" ymax="4">
<point>(6,9)
<constraints>
<constrainToGraph />
</constraints>
</point>
</graph
</graph>
<graph xmin="-15" xmax="15" ymin="-15" ymax="15" name="g2">
<circle center="(-5,-4)" />
$g1
</graph>
`}, "*");

cy.get('#\\/_text1').should('have.text', 'a') //wait for page to load

// Not sure what to test as the interesting part is the graph renderer
// The only new part from core is that the inner graph ignores its xmin, etc. attributes
cy.window().then(async (win) => {
let stateVariables = await win.returnAllStateVariables1();
expect(stateVariables["/g1inner"].stateValues.xmin).eq(-10);
expect(stateVariables["/g1inner"].stateValues.xmax).eq(10);
expect(stateVariables["/g1inner"].stateValues.ymin).eq(-10);
expect(stateVariables["/g1inner"].stateValues.ymax).eq(10);
})

});

});

})
103 changes: 95 additions & 8 deletions src/Core/components/Graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,10 @@ export default class Graph extends BlockComponent {
group: "graphical",
componentTypes: ["_graphical", "text", "image", "math", "m", "md", "label"]
},
{
group: "graphs",
componentTypes: ["graph"]
},
{
group: "childrenThatShouldNotBeHere",
componentTypes: ["_base"],
Expand Down Expand Up @@ -473,19 +477,19 @@ export default class Graph extends BlockComponent {

stateVariableDefinitions.childIndicesToRender = {
returnDependencies: () => ({
graphicalChildren: {
graphicalOrGraphChildren: {
dependencyType: "child",
childGroups: ["graphical"],
childGroups: ["graphical", "graphs"],
},
allChildren: {
dependencyType: "child",
childGroups: ["graphical", "xlabels", "ylabels", "childrenThatShouldNotBeHere"],
childGroups: ["graphical", "xlabels", "ylabels", "graphs", "childrenThatShouldNotBeHere"],
},
}),
definition({ dependencyValues }) {
let childIndicesToRender = [];

let graphicalChildNames = dependencyValues.graphicalChildren.map(x => x.componentName);
let graphicalChildNames = dependencyValues.graphicalOrGraphChildren.map(x => x.componentName);

for (let [ind, child] of dependencyValues.allChildren.entries()) {
if (graphicalChildNames.includes(child.componentName)) {
Expand Down Expand Up @@ -713,6 +717,21 @@ export default class Graph extends BlockComponent {
}
}

stateVariableDefinitions.haveGraphParent = {
forRenderer: true,
returnDependencies: () => ({
graphParent: {
dependencyType: "parentIdentity",
parentComponentType: "graph"
}
}),
definition({ dependencyValues }) {
return {
setValue: { haveGraphParent: dependencyValues.graphParent !== null }
}
}
}

stateVariableDefinitions.xmin = {
stateVariablesDeterminingDependencies: ["identicalAxisScales", "aspectRatioFromAxisScales"],
public: true,
Expand All @@ -734,6 +753,11 @@ export default class Graph extends BlockComponent {
xminPrelim: {
dependencyType: "stateVariable",
variableName: "xminPrelim"
},
graphParentXmin: {
dependencyType: "parentStateVariable",
parentComponentType: "graph",
variableName: "xmin"
}
}

Expand All @@ -758,6 +782,9 @@ export default class Graph extends BlockComponent {
return dependencies;
},
definition({ dependencyValues, usedDefault }) {
if (dependencyValues.graphParentXmin !== null) {
return { setValue: { xmin: dependencyValues.graphParentXmin } }
}
if (!dependencyValues.identicalAxisScales || dependencyValues.aspectRatioFromAxisScales) {
return { setValue: { xmin: dependencyValues.xminPrelim } }
}
Expand Down Expand Up @@ -794,7 +821,16 @@ export default class Graph extends BlockComponent {
}

},
async inverseDefinition({ desiredStateVariableValues, stateValues }) {
async inverseDefinition({ desiredStateVariableValues, dependencyValues, stateValues }) {
if (dependencyValues.graphParentXmin !== null) {
return {
success: true,
instructions: [{
setDependency: "graphParentXmin",
desiredValue: desiredStateVariableValues.xmin
}]
}
}
if (await stateValues.fixAxes) {
return { success: false }
}
Expand Down Expand Up @@ -829,6 +865,11 @@ export default class Graph extends BlockComponent {
xmaxPrelim: {
dependencyType: "stateVariable",
variableName: "xmaxPrelim"
},
graphParentXmax: {
dependencyType: "parentStateVariable",
parentComponentType: "graph",
variableName: "xmax"
}
}

Expand All @@ -853,6 +894,9 @@ export default class Graph extends BlockComponent {
return dependencies;
},
definition({ dependencyValues, usedDefault }) {
if (dependencyValues.graphParentXmax !== null) {
return { setValue: { xmax: dependencyValues.graphParentXmax } }
}
if (!dependencyValues.identicalAxisScales || dependencyValues.aspectRatioFromAxisScales) {
return { setValue: { xmax: dependencyValues.xmaxPrelim } }
}
Expand Down Expand Up @@ -900,7 +944,16 @@ export default class Graph extends BlockComponent {
}

},
async inverseDefinition({ desiredStateVariableValues, stateValues }) {
async inverseDefinition({ desiredStateVariableValues, dependencyValues, stateValues }) {
if (dependencyValues.graphParentXmax !== null) {
return {
success: true,
instructions: [{
setDependency: "graphParentXmax",
desiredValue: desiredStateVariableValues.xmax
}]
}
}
if (await stateValues.fixAxes) {
return { success: false }
}
Expand Down Expand Up @@ -936,6 +989,11 @@ export default class Graph extends BlockComponent {
yminPrelim: {
dependencyType: "stateVariable",
variableName: "yminPrelim"
},
graphParentYmin: {
dependencyType: "parentStateVariable",
parentComponentType: "graph",
variableName: "ymin"
}
}

Expand All @@ -960,6 +1018,9 @@ export default class Graph extends BlockComponent {
return dependencies;
},
definition({ dependencyValues, usedDefault }) {
if (dependencyValues.graphParentYmin !== null) {
return { setValue: { ymin: dependencyValues.graphParentYmin } }
}
if (!dependencyValues.identicalAxisScales || dependencyValues.aspectRatioFromAxisScales) {
return { setValue: { ymin: dependencyValues.yminPrelim } }
}
Expand Down Expand Up @@ -996,7 +1057,16 @@ export default class Graph extends BlockComponent {
}

},
async inverseDefinition({ desiredStateVariableValues, stateValues }) {
async inverseDefinition({ desiredStateVariableValues, dependencyValues, stateValues }) {
if (dependencyValues.graphParentYmin !== null) {
return {
success: true,
instructions: [{
setDependency: "graphParentYmin",
desiredValue: desiredStateVariableValues.ymin
}]
}
}
if (await stateValues.fixAxes) {
return { success: false }
}
Expand Down Expand Up @@ -1031,6 +1101,11 @@ export default class Graph extends BlockComponent {
ymaxPrelim: {
dependencyType: "stateVariable",
variableName: "ymaxPrelim"
},
graphParentYmax: {
dependencyType: "parentStateVariable",
parentComponentType: "graph",
variableName: "ymax"
}
}

Expand All @@ -1055,6 +1130,9 @@ export default class Graph extends BlockComponent {
return dependencies;
},
definition({ dependencyValues, usedDefault }) {
if (dependencyValues.graphParentYmax !== null) {
return { setValue: { ymax: dependencyValues.graphParentYmax } }
}
if (!dependencyValues.identicalAxisScales || dependencyValues.aspectRatioFromAxisScales) {
return { setValue: { ymax: dependencyValues.ymaxPrelim } }
}
Expand Down Expand Up @@ -1105,7 +1183,16 @@ export default class Graph extends BlockComponent {


},
async inverseDefinition({ desiredStateVariableValues, stateValues }) {
async inverseDefinition({ desiredStateVariableValues, dependencyValues, stateValues }) {
if (dependencyValues.graphParentYmax !== null) {
return {
success: true,
instructions: [{
setDependency: "graphParentYmax",
desiredValue: desiredStateVariableValues.ymax
}]
}
}
if (await stateValues.fixAxes) {
return { success: false }
}
Expand Down
15 changes: 15 additions & 0 deletions src/Viewer/renderers/graph.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ export default React.memo(function Graph(props) {
}

useEffect(() => {
if (SVs.haveGraphParent) {
return;
}
return () => {
callAction({
action: actions.recordVisibilityChange,
Expand All @@ -55,6 +58,10 @@ export default React.memo(function Graph(props) {

//Draw Board after mounting component
useEffect(() => {
if (SVs.haveGraphParent) {
return;
}

let boundingbox = [SVs.xmin, SVs.ymax, SVs.xmax, SVs.ymin];
previousBoundingbox.current = boundingbox;

Expand Down Expand Up @@ -139,6 +146,14 @@ export default React.memo(function Graph(props) {
}
}, [board])

if (SVs.haveGraphParent) {
// have have graph parent, then don't render graph
// but just render children so that will be inside parent graph
return <>
<a name={id} />
{children}
</>
}

const divStyle = {
width: sizeToCSS(SVs.width),
Expand Down

0 comments on commit 8c19893

Please sign in to comment.