# Vue

### [#](#/pages/firstSteps#introduction) Introduction

This tutorial introduces CarnacJS, a new JavaScript graphics library. CarnacJS is the foundation for building high level libraries. It requires some familiarity with object-oriented programming and JavaScript. Knowledge of 2D graphics is helpful but not required.

CarnacJS allows developers to model and organize their data in terms of shapes, attributes, and groups in a scene graph. This scene graph is a tree structure of shapes and groups of shapes. A model can be attached to a plot for visualization or printing. The library also provides Tools so the user can select and edit shapes in the built application.

### [#](#/pages/firstSteps#information) General Information

CarnacJS contains several JavaScript libraries and uses a [HTML5 Canvas](http://www.w3schools.com/html/html5_canvas.asp) element to draw graphics. To start, you create an HTML page, add a canvas element, load the necessary JavaScript libraries and initialize the application. The **FirstSteps** application in this page illustrates the steps required to create an application using CarnacJS. The process is very easy. The steps are as follows.

### [#](#/pages/firstSteps#vueStructure) Vue File Structure

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. [Template Syntax](https://vuejs.org/v2/guide/syntax.html)

### [#](#/pages/firstSteps#addcanvas) Add HTML Canvas Element

CarnacJS uses a Canvas element to draw everything. So the next step is to create a canvas and give it an id for the code to reference. Place this below code in the body of your html.

html
```ts
<canvas id="canvas" />
```

### [#](#/pages/firstSteps#import) Import module

To build the application, you need to import the required modules and components if necessary. `@int` - alias for relative path to GeotoolkitJS modules.

main
```ts
import {Plot} from '@int/geotoolkit/plot/Plot';
import {Group} from '@int/geotoolkit/scene/Group';
import {AnchorType} from '@int/geotoolkit/util/AnchorType';
import {Image} from '@int/geotoolkit/scene/shapes/Image';
import intImage from '../assets/images/int.png';
```

### [#](#/pages/firstSteps#vueComponent) Simple Vue component

GeoToolkitJS modules can be loaded into your TypeScript, JavaScript or Vue component files just like any other module or library. Let's create a simple scene inside of a class-based Vue component. Create a shape and define its properties inside of the `mounted()` lifecycle method. [Vue Instance](https://vuejs.org/v2/guide/instance.html)

main
```ts
export default {
    name: "FirstSteps",
    mounted() {
        this.initialize();
    },
    methods: {
        initialize: function () {
            ...
        }
    }
}
```

### [#](#/pages/firstSteps#shape) Create a Shape and define its Properties

After the file structure is created and necessary libraries are loaded, we can create a simple image shape and pass all properties as a javascript object.

main
```ts
import {Image} from '@int/geotoolkit/scene/shapes/Image';
import intImage from '../assets/images/int.png';

// Create a shape and define its properties
const image = new Image({
    'x': 100,
    'y': 100,
    'alignment': AnchorType.Center,
    'url': intImage
});
```

### [#](#/pages/firstSteps#group) Create a Group to hold Shapes

The next step we create a group and add a new shape to this group.

main
```ts
import {Group} from '@int/geotoolkit/scene/Group';

// Create a group to hold nodes
const group = new Group();

// Add the shape to the group
group.addChild(image);
```

### [#](#/pages/firstSteps#plot) Create a Plot

The last step is to create a plot. The `Plot` helps to render all shapes and groups to HTML5 Canvas and receive invalidation from shapes to refresh plot.

main
```ts
import {Plot} from '@int/geotoolkit/plot/Plot';

// Get the canvas as a DOM object
const canvas = document.getElementById("canvas");

// Create a new Plot object from the canvas and group
return new Plot({
    'canvasElement' : canvas,
    'root' : group
});
```

### [#](#/pages/firstSteps#simpleexample) Full Example

This part contains full source code described above together.

main
```ts
// imports modules and image
import {Plot} from '@int/geotoolkit/plot/Plot';
import {Group} from '@int/geotoolkit/scene/Group';
import {AnchorType} from '@int/geotoolkit/util/AnchorType';
import {Image} from '@int/geotoolkit/scene/shapes/Image';
import intImage from '../assets/images/int.png';

export default {
    name: "FirstSteps",

    mounted() {
        this.initialize();
    },

    methods: {
        initialize: function () {
            // Create a shape and define its properties
            const image = new Image({
                'x': 100,
                'y': 100,
                'alignment': AnchorType.Center,
                'url': intImage
            });

            // Create a group to hold nodes
            const group = new Group();

            // Add the shape to the group
            group.addChild(image);

            // Get the canvas as a DOM object
            const canvas = document.getElementById('canvas');

            // Create a new Plot object from the canvas and group
            return new Plot({
                'canvasElement': canvas,
                'root': group
            });
        }
    }
};
```

iframe
### [#](#/pages/firstSteps#plot3d) Create a 3D Plot

Creating a 3D plot is a little different from the 2D plot above. Instead of having a `<canvas>` element, we need a `<div>` as a container.

Depending on the requirement, the user might want either a fixed size plot or a full size plot. For a fixed size plot, the user could style the div element with height and width. For a full size plot, we want it to be resized whenever the browser size changes. The below snippet shows everything needed to create a full size plot.

main
```ts
import {Plot} from '@int/geotoolkit3d/Plot';

export default {
    name: 'app',
    mounted() {
        this.initialize();
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
    },
    methods: {
      initialize: function () {
        // get canvas as a DOM object
        this.canvasDiv = document.getElementById('canvas');

        // create a new 3D Plot and set it to black
        this.plot = new Plot({
            'container': this.canvasDiv,
            'renderer': {
                'clearcolor': 'black'
            }
        });

        // add resize listener
        window.addEventListener('resize', this.resize);
      },

      resize: function () {
          this.plot.setSize(this.canvasDiv.clientWidth, this.canvasDiv.clientHeight);
      }
    }
};
```

html
```ts
<div id="canvas" />
```

css
```css
html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}
#canvas {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
```

### [#](#/pages/firstSteps#references) References

The *[Architecture Overview](#/pages/carnac/overview/carnac)* gives information about architecture of the toolkit.
*[Getting Started with Widgets - Vue](#/pages/widgets)* contains first steps how to use high-level components like XY Plot.