# Angular Map Editor
Angular map editor is a Canvas based interactive editor for 2D maps, like office floor maps etc.
The purpose of creation was a need to defines a set of objects locations on 2D map, that will be then presented on 3D visualization of office floors.

Editor covers whole page when used. To adjust it to own needs, we can use margin that allows us to manipulate the margin.
In the future it will be more flexible.

### Requirements
Library uses the newest version of Angular for the moment of creation - 8.2.11, and this version is required.
- @angular/material (8.2.3+)
- @angular/cdk (8.2.3+)

To install all dependencies at once:
```
npm i @angular/material
npm i @angular/cdk
```

### Installation
Install package
```
npm i angular-map-editor
```

Import MapEditorModule and BrowserAnimationsModule in your main application module, like below
```
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MapEditorModule} from 'angular-map-editor';  // <---- HERE

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, //  <---- HERE
    MapEditorModule  //  <---- HERE
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

**Hint**

If after installation you see grey floating buttons on left, probably you don't have default Material Design styles defined for your application.
To fix that you can try:
- Please then go to `angular.json` file
- paste this line in all styles sections: `"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"`.

Example `angular.json` fragment:
```
"projects": {
    "<application-name>": {
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": []
          },
         ...
        }
        ...
      }
      ...
    }
    ...
}
```


### Usage
##### Default read-only version without any pre-configuration
```
<so-map-editor></so-map-editor>
```
##### Full interface usage
```
<so-map-editor
  [margin]="'60px 0 0 0'"
  (configurationSaved)="onConfigurationSaved($event)"
  [userRoles]="['admin', 'viewer', 'map-editor']"
  [configuration]="editorConfig"
></so-map-editor>
```

* `[margin]` - a string representing CSS margin style, e.g. '10% 0', '60px 0 0 10px', '1em'
* `[configuration]` - an input configuration of editor. Delivers images, icons, backgrounds,
                      menu items, floor maps with objects locations,
                      a set of object types that we can use in editor
* `(configurationSaved)` - an event fired after "Admin" user clicked the "Save configuration" button from Admin menu.
* `[userRoles]` - an array of strings, representing a set of permissions for editor. Currently
                  editor supports following user roles:
  * `viewer` - a default role assigned always, even if no roles provided - allows to view editor in read-only mode
  * `map-editor` - allows to see a toolbar menu to manipulate editor objects and grid
  * `admin` - full control over map editor (includes all roles) + new special menu for importing and exporting floor maps,
              saving and importing whole editor configuration

