Vue

# 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.

# General Information

CarnacJS contains several JavaScript libraries and uses a HTML5 Canvas 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.

# 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

# 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.

<canvas id="canvas" />

# 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.

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';

# 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

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

# 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.

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
});

# Create a Group to hold Shapes

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

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);

# 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.

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
});

# Full Example

This part contains full source code described above together.

// 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
            });
        }
    }
};

# 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.

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);
      }
    }
};

# References

The Architecture Overview gives information about architecture of the toolkit.
Getting Started with Widgets - Vue contains first steps how to use high-level components like XY Plot.

Vue