wisemapping-frontend/packages/web2d/test/playground/workspace.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
    <link rel="stylesheet" href="styles.css">
</head>
    
<body>

    <h1>Workspace Render Tests </h1>
    <table>
        <tbody>
        <tr>
            <td>
                The Workspace's size defines the visible work area. If an element is outside the workspace, it must not
                be
                visible.
                In this example, The back circle is bigger than the workspace area. A big portion of the circle will not
                be
                displayed.
            </td>
            <td>
                <div id="overflowExample"></div>
            </td>

        </tr>
        <!--**************************************************************************-->
        <tr>
            <td>
                Workspace will be added as child of a div element. That's why, Its parent will define this position.
            </td>
            <td>
                <div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>
            </td>
        </tr>

        <!--**************************************************************************-->
        <tr>
            <td>
                Workspaces size can be defined using standard CSS measures.
                In this example, the first workspace is defined using pixes and the second one
                using inchs.
            </td>
            <td>
                <div id="sizeExampleContainer" style="position:relative;width:400px;">
                    <div id="sizeExamplePixels" style="float:left;margin:20px"></div>

                    <div id="sizeExampleInch" style="float:left;margin:20px"></div>
                </div>
            </td>
        </tr>
        <!--**************************************************************************-->
        <tr>
            <td>
                Workspace coordsize defines how many units there are along the width of the containing block.
                In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
                positioned
                at (0,0),(0,100),(100,0),(100,100)(50,50).<br />
                <br />
                1) Workspace with CoordSize(100,100)<br />
                2) Workspace with CoordSize(100,200)<br />
                3) Workspace with CoordSize(200,100)<br />
                4) Workspace animation changing the coordsize from (30,30) to (100,100)<br />
            </td>
            <td>
                <div style="position:relative;width:100%;">
                    <div id="coordsizeExample100x100" style="float:left;margin:20px;">
                        (1)
                    </div>

                    <div id="coordsizeExample100x200" style="float:left;margin:20px;">
                        (2)
                    </div>

                    <div id="coordsizeExample200x100" style="float:left;margin:20px;">
                        (3)
                    </div>

                    <div id="coordsizeExampleDynamic" style="float:left;margin:20px;">
                        (4)
                    </div>
                </div>
            </td>
        </tr>

        <!--**************************************************************************-->
        <tr>
            <td>
                Workspace coordorigin defines the coordinate at the top left corner of the containing block.
                In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been
                positioned
                at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
                <br />
                1) Workspace with CoordOrigin(0,0)<br />
                2) Workspace with CoordOrigin(0,50)<br />
                3) Workspace with CoordOrigin(50,0)<br />
                4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br />
            </td>
            <td>
                <div style="position:relative;width:100%;">
                    <div id="coordorigin0x0" style="float:left;margin:20px">
                        (1)
                    </div>

                    <div id="coordorigin0x50" style="float:left;margin:20px">
                        (2)
                    </div>

                    <div id="coordorigin50x0" style="float:left;margin:20px">
                        (3)
                    </div>

                    <div id="coordoriginExampleDynamic" style="float:left;margin:20px">
                        (4)
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    
</body>

</html>
Web2d module migration 2021-07-16 16:41:58 +02:00			`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`

			`<html>`
Format test files. 2021-10-03 02:23:32 +02:00
Web2d module migration 2021-07-16 16:41:58 +02:00			`<head>`
Improve tests. 2021-12-12 23:28:32 +01:00			`<link rel="stylesheet" href="styles.css">`
Web2d module migration 2021-07-16 16:41:58 +02:00			`</head>`
Improve tests. 2021-12-12 23:28:32 +01:00
Migration to EE6 of web2d and mindplot 2021-12-05 00:39:20 +01:00			`<body>`
Web2d module migration 2021-07-16 16:41:58 +02:00
Format test files. 2021-10-03 02:23:32 +02:00			`<h1>Workspace Render Tests </h1>`
			`<table>`
Improve tests. 2021-12-12 23:28:32 +01:00			`<tbody>`
Format test files. 2021-10-03 02:23:32 +02:00			`<tr>`
			`<td>`
			`The Workspace's size defines the visible work area. If an element is outside the workspace, it must not`
			`be`
			`visible.`
			`In this example, The back circle is bigger than the workspace area. A big portion of the circle will not`
			`be`
			`displayed.`
			`</td>`
			`<td>`
			`<div id="overflowExample"></div>`
			`</td>`

			`</tr>`
			`<!--**************************************************************************-->`
			`<tr>`
			`<td>`
			`Workspace will be added as child of a div element. That's why, Its parent will define this position.`
			`</td>`
			`<td>`
			`<div id="positionExample" style="position:relative;left:0;top:0;width:100px"></div>`
			`</td>`
			`</tr>`

			`<!--**************************************************************************-->`
			`<tr>`
			`<td>`
			`Workspaces size can be defined using standard CSS measures.`
			`In this example, the first workspace is defined using pixes and the second one`
			`using inchs.`
			`</td>`
			`<td>`
			`<div id="sizeExampleContainer" style="position:relative;width:400px;">`
			`<div id="sizeExamplePixels" style="float:left;margin:20px"></div>`

			`<div id="sizeExampleInch" style="float:left;margin:20px"></div>`
Web2d module migration 2021-07-16 16:41:58 +02:00			`</div>`
Format test files. 2021-10-03 02:23:32 +02:00			`</td>`
			`</tr>`
			`<!--**************************************************************************-->`
			`<tr>`
			`<td>`
			`Workspace coordsize defines how many units there are along the width of the containing block.`
			`In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been`
			`positioned`
			`at (0,0),(0,100),(100,0),(100,100)(50,50).<br />`
			`<br />`
			`1) Workspace with CoordSize(100,100)<br />`
			`2) Workspace with CoordSize(100,200)<br />`
			`3) Workspace with CoordSize(200,100)<br />`
			`4) Workspace animation changing the coordsize from (30,30) to (100,100)<br />`
			`</td>`
			`<td>`
			`<div style="position:relative;width:100%;">`
			`<div id="coordsizeExample100x100" style="float:left;margin:20px;">`
			`(1)`
			`</div>`

			`<div id="coordsizeExample100x200" style="float:left;margin:20px;">`
			`(2)`
			`</div>`

			`<div id="coordsizeExample200x100" style="float:left;margin:20px;">`
			`(3)`
			`</div>`

			`<div id="coordsizeExampleDynamic" style="float:left;margin:20px;">`
			`(4)`
			`</div>`
Web2d module migration 2021-07-16 16:41:58 +02:00			`</div>`
Format test files. 2021-10-03 02:23:32 +02:00			`</td>`
			`</tr>`

			`<!--**************************************************************************-->`
			`<tr>`
			`<td>`
			`Workspace coordorigin defines the coordinate at the top left corner of the containing block.`
			`In all the examples,the coordsize of the workspaces have been set to (100,100) and the circles have been`
			`positioned`
			`at (0,0),(0,100),(100,0),(100,100)(50,50). <br />`
			`<br />`
			`1) Workspace with CoordOrigin(0,0)<br />`
			`2) Workspace with CoordOrigin(0,50)<br />`
			`3) Workspace with CoordOrigin(50,0)<br />`
			`4) Workspace animation changing the coordorigin from (0,0) to (50,50)<br />`
			`</td>`
			`<td>`
			`<div style="position:relative;width:100%;">`
			`<div id="coordorigin0x0" style="float:left;margin:20px">`
			`(1)`
			`</div>`

			`<div id="coordorigin0x50" style="float:left;margin:20px">`
			`(2)`
			`</div>`

			`<div id="coordorigin50x0" style="float:left;margin:20px">`
			`(3)`
			`</div>`

			`<div id="coordoriginExampleDynamic" style="float:left;margin:20px">`
			`(4)`
			`</div>`
Web2d module migration 2021-07-16 16:41:58 +02:00			`</div>`
Format test files. 2021-10-03 02:23:32 +02:00			`</td>`
			`</tr>`
Improve tests. 2021-12-12 23:28:32 +01:00			`</tbody>`
Format test files. 2021-10-03 02:23:32 +02:00			`</table>`
Improve tests. 2021-12-12 23:28:32 +01:00
Web2d module migration 2021-07-16 16:41:58 +02:00			`</body>`
Format test files. 2021-10-03 02:23:32 +02:00
Merged in web2d-coreJS-solutions (pull request #5) Core-js, web2d and mindplot working baseline * fix .eslintignore remove Raphael dependency * Fix to avoid crashes in _plotPrediction whitout Raphael * Fix minplot basic code inspections * Fix last inspections errors * Inital refactor copying files * Clean up. * Fix web2d cyclic dependencies remove only-warn eslint plugin set import/no-extraneous-dependencies to warn (incorrectly complaining about root package) * Fix web2d Point references (no need to assign it to core) Fix web2d imports in mindplot and update Point refs * Merge 'feature/mindplot_tests' into web2d-coreJS-solutions * mindplot fixes and add viewmode.html playground setup playground config to run the map-render examples fix mindplot components export mootools Static was not working so refactored it fix some references to _peer fix messages __bundle undefined add web2d missing export: Image downgrade cypress to avoid SIGSEGV error Approved-by: Paulo Veiga 2021-12-02 01:41:56 +01:00			`</html>`