<?xml version="1.0" encoding="UTF-16"?>
<!-- This XML file has been created by WebEJS 1.0. Visit http://t.um.es/webejs -->
<!-- Please, open it with WebEJS or save the file to your hard disk on your EJS' user directory and open it with Desktop Ejs 6.01 or later. -->
<Osejs version="7.0" password="">
<Osejs.Information>
<Title><![CDATA[]]></Title>
<Copyright><![CDATA[]]></Copyright>
<Keywords><![CDATA[]]></Keywords>
<Password><![CDATA[unused]]></Password>
<Level><![CDATA[]]></Level>
<Language><![CDATA[]]></Language>
<Abstract><![CDATA[]]></Abstract>
<FixedNavigationBar>false</FixedNavigationBar>
<RunAlways>true</RunAlways>
<UseInterpreter>true</UseInterpreter>
<UseDeltaForODE>false</UseDeltaForODE>
<PreviewFullModel>false</PreviewFullModel>
<ModelTab></ModelTab>
<ModelTabTitle><![CDATA[]]></ModelTabTitle>
<ModelName><![CDATA[]]></ModelName>
<CSSFile></CSSFile>
<HTMLHead><![CDATA[<script 
async="true" src="https://www.googletagmanager.com/gtag/js?id=G-S9EWRY1CPJ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-S9EWRY1CPJ');
</script>]]></HTMLHead>
<SaveInXMLFormat>true</SaveInXMLFormat>
<IncludeSource>true</IncludeSource>
<IncludeLibrary>true</IncludeLibrary>
<UglifyJS>false</UglifyJS>
<Logo></Logo>
<Author><![CDATA[]]></Author>
<AuthorLogo></AuthorLogo>
<DetectedFiles><![CDATA[]]></DetectedFiles>
<AuxiliaryFiles><![CDATA[]]></AuxiliaryFiles>
</Osejs.Information>
<Osejs.Description>
</Osejs.Description>
<Osejs.Model>
<Osejs.Model.FramesPerSecond>20</Osejs.Model.FramesPerSecond>
<Osejs.Model.StepsPerDisplay>1</Osejs.Model.StepsPerDisplay>
<Osejs.Model.RealTimeVariable></Osejs.Model.RealTimeVariable>
<Osejs.Model.Autostart>true</Osejs.Model.Autostart>
<Osejs.Model.Variables>
<Osejs.Model.Variables.Page>
<Type>undefined</Type>
<Name>Var Table 1</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[graphX]]></Name>
<Value><![CDATA[6]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[graphY]]></Name>
<Value><![CDATA[10]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedPointsX]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedPointsY]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedPoints]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedPointIndex]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[selectedPointIndex]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[selectedPlottedPoints]]></Name>
<Value><![CDATA[[]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedLineX]]></Name>
<Value><![CDATA[[undefined]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedLineY]]></Name>
<Value><![CDATA[[undefined]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedSizeX]]></Name>
<Value><![CDATA[[undefined]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[plottedSizeY]]></Name>
<Value><![CDATA[[undefined]]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[]]></Domain>
<Comment><![CDATA[]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
</Osejs.Model.Variables>
<Osejs.Model.Initialization>
<Osejs.Model.Initialization.Page>
<Type>undefined</Type>
<Name>Init Page 1</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
initFunctions();
]]></Code>
</Content>
</Osejs.Model.Initialization.Page>
</Osejs.Model.Initialization>
<Osejs.Model.Evolution>
</Osejs.Model.Evolution>
<Osejs.Model.Constraints>
</Osejs.Model.Constraints>
<Osejs.Model.Library>
<Osejs.Model.Library.Page>
<Type>undefined</Type>
<Name>initFunctions</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function initFunctions() {
    reset();
    initPlottedPoints();
}
]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>reset</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function reset () {
    plottedPointsX = [];
    plottedPointsY = [];
    plottedPoints = [];
    selectedPlottedPoints = [];
    plottedPointIndex = -1;
    selectedPointIndex = -1;
    plottedLineX = [undefined];
    plottedLineY = [undefined];
    plottedSizeX = [undefined];
    plottedSizeY = [undefined];
    
}
]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>initPlottedPoints</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function initPlottedPoints() {
    plottedPointIndex = -1;
    selectedPointIndex = -1;

    const tickSeparation = 1;

    plottedPointsX = [];
    plottedPointsY = [];
    plottedPoints = [];

    for (let x = -graphY; x <= graphX + graphY; x += tickSeparation) {
        for (let y = -graphX; y <= graphY + graphX; y += tickSeparation) {
            let isoX = (x - y) * tickSeparation / Math.sqrt(2);
            let isoY = (x + y) * tickSeparation / Math.sqrt(2);

            isoX = Math.round(isoX * 10) / 10;
            isoY = Math.round(isoY * 10) / 10;

            if (isoX >= 0 && isoY >= 0 && isoX <= graphX && isoY <= graphY) {
                plottedPointsX.push(isoX);
                plottedPointsY.push(isoY);
                plottedPoints.push({
                    x: isoX,
                    y: isoY,
                    connected: []
                });
            }
        }
    }

    selectedPlottedPoints = Array(plottedPointsX.length).fill(0);
    
}

]]></Code>
</Content>
</Osejs.Model.Library.Page>
<Osejs.Model.Library.Page>
<Type>CODE_EDITOR</Type>
<Name>onClickPlottedPoints</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function onClickPlottedPoints (plottedPointIndex) {
    if (selectedPointIndex === -1) {
        selectedPointIndex = plottedPointIndex;
        selectedPlottedPoints[selectedPointIndex] = 2;
    } else if (selectedPointIndex === plottedPointIndex) {
        selectedPointIndex = -1;
        selectedPlottedPoints[plottedPointIndex] = 0;
    } else {
        plottedLineX.push(plottedPointsX[selectedPointIndex]);
        plottedLineY.push(plottedPointsY[selectedPointIndex]);
        plottedLineX.push(plottedPointsX[plottedPointIndex]);
        plottedLineY.push(plottedPointsY[plottedPointIndex]);
        plottedLineX.push(undefined);
        plottedLineY.push(undefined);
        
        plottedSizeX.push(undefined);
        plottedSizeY.push(undefined);
        plottedSizeX.push(plottedPointsX[selectedPointIndex] - plottedPointsX[plottedPointIndex]);
        plottedSizeY.push(plottedPointsY[selectedPointIndex] - plottedPointsY[plottedPointIndex]);
        plottedSizeX.push(undefined);
        plottedSizeY.push(undefined);
        
        
        plottedPoints[selectedPointIndex].connected.push({x: plottedPointsX[plottedPointIndex], y: plottedPointsY[plottedPointIndex]})
        plottedPoints[plottedPointIndex].connected.push({x: plottedPointsX[selectedPointIndex], y: plottedPointsY[selectedPointIndex]})
        
        selectedPlottedPoints[selectedPointIndex] = 0
        selectedPointIndex = -1;
        plottedPointIndex = -1;
        
    }
    
    console.log(plottedPoints);
}
]]></Code>
</Content>
</Osejs.Model.Library.Page>
</Osejs.Model.Library>
<Osejs.Model.Elements>
</Osejs.Model.Elements>
</Osejs.Model>
<Osejs.HtmlView>
<Osejs.HtmlView.Page>
<Type>HTML_VIEW_EDITOR</Type>
<Name>HtmlView</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<SizeOption>0</SizeOption>
<X>0</X>
<Y>0</Y>
<Width>800</Width>
<Height>600</Height>
<KeepHidden>true</KeepHidden>
<RootProperties>
</RootProperties>
<Tree>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[panel]]></Name>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[first_row]]></Name>
<Parent><![CDATA[panel]]></Parent>
<Property name="CSS"><![CDATA["{ margin-bottom: 10px }"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Label</Type>
<Name><![CDATA[label]]></Name>
<Parent><![CDATA[first_row]]></Parent>
<Property name="Text"><![CDATA["This is an isometric grid, try connecting the points to create a figure"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[second_row]]></Name>
<Parent><![CDATA[panel]]></Parent>
<Property name="CSS"><![CDATA["{ margin-bottom: 10px }"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Button</Type>
<Name><![CDATA[clear]]></Name>
<Parent><![CDATA[second_row]]></Parent>
<Property name="Text"><![CDATA["Clear Scnenario"]]></Property>
<Property name="OnPress"><![CDATA[_reset();]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.PlottingPanel</Type>
<Name><![CDATA[plottingPanel]]></Name>
<Parent><![CDATA[panel]]></Parent>
<Property name="AutoScaleX"><![CDATA[false]]></Property>
<Property name="AutoScaleY"><![CDATA[false]]></Property>
<Property name="Width"><![CDATA["500px"]]></Property>
<Property name="Height"><![CDATA["500px"]]></Property>
<Property name="MinimumX"><![CDATA[0]]></Property>
<Property name="MinimumY"><![CDATA[0]]></Property>
<Property name="MaximumX"><![CDATA[graphX]]></Property>
<Property name="MaximumY"><![CDATA[graphY]]></Property>
<Property name="Gutters"><![CDATA[[0,0,0,0]]]></Property>
<Property name="XFixedTick"><![CDATA[0]]></Property>
<Property name="XTickStep"><![CDATA[1]]></Property>
<Property name="YTickStep"><![CDATA[1]]></Property>
<Property name="YFixedTick"><![CDATA[0]]></Property>
<Property name="XAutoTicks"><![CDATA[false]]></Property>
<Property name="YAutoTicks"><![CDATA[false]]></Property>
<Property name="AxisYShow"><![CDATA[false]]></Property>
<Property name="AxisXShow"><![CDATA[false]]></Property>
<Property name="Enabled"><![CDATA[true]]></Property>
<Property name="GridXShow"><![CDATA[false]]></Property>
<Property name="GridYShow"><![CDATA[false]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ShapeSet2D</Type>
<Name><![CDATA[plottedPoints]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="NumberOfElements"><![CDATA[plottedPointsX.length]]></Property>
<Property name="Y"><![CDATA[plottedPointsY]]></Property>
<Property name="X"><![CDATA[plottedPointsX]]></Property>
<Property name="SizeX"><![CDATA[0.2]]></Property>
<Property name="SizeY"><![CDATA[0.2]]></Property>
<Property name="ElementInteracted"><![CDATA[plottedPointIndex]]></Property>
<Property name="EnabledPosition"><![CDATA["ENABLED_NO_MOVE"]]></Property>
<Property name="OnPress"><![CDATA[onClickPlottedPoints(plottedPointIndex)]]></Property>
<Property name="ShapeType"><![CDATA["ELLIPSE"]]></Property>
<Property name="LineWidth"><![CDATA[selectedPlottedPoints]]></Property>
<Property name="FillColor"><![CDATA["LightGray"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.SegmentSet2D</Type>
<Name><![CDATA[plottedLine]]></Name>
<Parent><![CDATA[plottingPanel]]></Parent>
<Property name="NumberOfElements"><![CDATA[plottedLineX.length]]></Property>
<Property name="X"><![CDATA[plottedLineX]]></Property>
<Property name="Y"><![CDATA[plottedLineY]]></Property>
<Property name="SizeX"><![CDATA[plottedSizeX]]></Property>
<Property name="SizeY"><![CDATA[plottedSizeY]]></Property>
<Property name="LineColor"><![CDATA["Black"]]></Property>
<Property name="LineWidth"><![CDATA[5]]></Property>
</HtmlView.Element>
</Tree>
</Content>
</Osejs.HtmlView.Page>
</Osejs.HtmlView>
</Osejs>