> This was actually in controller.ts in given link but i changed it into (angular component class) angualar4.
app.component.ts:
-------------------------------
import { Component, OnInit} from '@angular/core';
//Services
// import { ColorboxService } from './colorbox.service';
import { AnnotoriousService } from './annotorious.service';
import { AnnotoriousLocalstorageService } from './annotorious-localstorage.service';
//Ends Services
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
approot: any;
zoomModel1: any;
zoomModel2: any;
zoomModelGallery01 : any;
zoomModelGallery04: any;
zoomModelGallery05: any;
annotateColorbox01: any;
//Constructor
constructor( private annotorious: AnnotoriousService){
//default
// this.setApproot('');
}
ngOnInit(){
let appRoot: string = '';
this.setApproot(appRoot);
}
setApproot(appRoot){
//only change when needed.
// var appRoot: any;
if (this.approot && appRoot === this.approot) {
return;
}
this.approot = appRoot;
Object.assign(this.annotateColorbox01, {
href: appRoot + 'images/large/image4.jpg',
className: 'colorbox-to-annotate',
onComplete() {
let $ : any;
let photo = $("#cboxLoadedContent .cboxPhoto")[0];
if (photo.src) {
// console.log('annotateColorbox01 ' + photo.src);
this.Annotorious.makeAnnotatable(photo);
let annotations = this.Annotorious.getAnnotations(photo.src);
// console.log(annotations);
if (this.annotations && this.annotations.length > 0) {
this.Annotorious.showAnnotations(photo.src);
}
}
},
onCleanup() {
//alert('onCleanupa ');
this.annotatableImage();
}
});
};
}
> This is annotorious service i changed it fom angular1.x to 4
Annotorious.service.ts:
--------------------------
import { Component, OnInit} from '@angular/core';
//Services
// import { ColorboxService } from './colorbox.service';
import { AnnotoriousService } from './annotorious.service';
import { AnnotoriousLocalstorageService } from './annotorious-localstorage.service';
//Ends Services
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
approot: any;
zoomModel1: any;
zoomModel2: any;
zoomModelGallery01 : any;
zoomModelGallery04: any;
zoomModelGallery05: any;
annotateColorbox01: any;
//Constructor
constructor( private annotorious: AnnotoriousService){
//default
// this.setApproot('');
}
ngOnInit(){
let appRoot: string = '';
this.setApproot(appRoot);
}
setApproot(appRoot){
//only change when needed.
// var appRoot: any;
if (this.approot && appRoot === this.approot) {
return;
}
this.approot = appRoot;
Object.assign(this.annotateColorbox01, {
href: appRoot + 'images/large/image4.jpg',
className: 'colorbox-to-annotate',
onComplete() {
let $ : any;
let photo = $("#cboxLoadedContent .cboxPhoto")[0];
if (photo.src) {
// console.log('annotateColorbox01 ' + photo.src);
this.Annotorious.makeAnnotatable(photo);
let annotations = this.Annotorious.getAnnotations(photo.src);
// console.log(annotations);
if (this.annotations && this.annotations.length > 0) {
this.Annotorious.showAnnotations(photo.src);
}
}
},
onCleanup() {
//alert('onCleanupa ');
this.annotatableImage();
}
});
};
}
> This is angular annotorious service which is in angular 4
annotorious.localstorage.ts:
-----------------------------------
import { Injectable } from '@angular/core';
import { AnnotoriousService } from './annotorious.service';
@Injectable()
export class AnnotoriousLocalstorageService {
annotorious : any;
constructor(private annotoriousSer: AnnotoriousService) {
this.annotorious.plugin.Parse.prototype.initPlugin = this.initPlugin;
this.annotorious.plugin.Parse.prototype.onInitAnnotator = this.onInitAnnotator;
//private methods
this.annotorious.plugin.Parse.prototype._newLoadIndicator = this._newLoadIndicator;
this.annotorious.plugin.Parse.prototype._loadAnnotations = this._loadAnnotations;
this.annotorious.plugin.Parse.prototype._create = this._create;
this.annotorious.plugin.Parse.prototype._update = this._update;
this.annotorious.plugin.Parse.prototype._delete = this._delete;
this.annotoriousSer.getAnnotorious().addPlugin('Parse', {debug: true});
}
DEBUG = false;
found: any;
uuid4: any;**strong text**
getAnnotations() {
/* jshint validthis: true */
var localStorageService : any;
var self = this;
var annotationsCache = localStorageService.get('annotationsCache');
//if not existing, use an array
if (!annotationsCache) {
annotationsCache = [];
localStorageService.set('annotationsCache', annotationsCache);
}
if (this.DEBUG) {
console.log('annotorious-storage:getAnnotations:' + annotationsCache.length);
}
return annotationsCache;
}
saveAnnotations(annotationsCache) {
/* jshint validthis: true */
var self = this;
var localStorageService: any;
//if not existing, use an array
if (annotationsCache) {
var result = localStorageService.set('annotationsCache', annotationsCache);
}
if (this.DEBUG) {
console.log('annotorious-storage:setAnnotations:' + annotationsCache.length);
}
return annotationsCache;
}
initPlugin(anno) {
/* jshint validthis: true */
var self = this;
var _create : any;
var _update : any;
var _delete : any;
if (this.DEBUG) {
console.log('annotorious-storage:initPlugin');
}
anno.addHandler('onAnnotationCreated', (annotation) => {
_create(annotation);
});
anno.addHandler('onAnnotationUpdated', (annotation) => {
_update(annotation);
});
anno.addHandler('onAnnotationRemoved', (annotation) => {
_delete(annotation);
});
}
onInitAnnotator(annotator) {
/* jshint validthis: true */
var self = this;
var _loadAnnotations : any;
var _loadIndicators : any;
if (self.DEBUG) {
console.log('annotorious-storage:onInitAnnotator');
}
_loadAnnotations(this.annotoriousSer.getAnnotorious());
var spinner = self._newLoadIndicator();
annotator.element.appendChild(spinner);
_loadIndicators.push(spinner);
}
_newLoadIndicator() {
var outerDIV = document.createElement('div');
outerDIV.className = 'annotorious-parse-plugin-load-outer';
var innerDIV = document.createElement('div');
innerDIV.className = 'annotorious-parse-plugin-load-inner';
outerDIV.appendChild(innerDIV);
return outerDIV;
}
_loadAnnotations(anno) {
/* jshint validthis: true */
var self = this;
var lodash : any;
var annotations = self.getAnnotations();
lodash.forEach(annotations, (annotation) => {
if (annotation.shapes && annotation.shapes.length > 0 && annotation.shapes[0].geometry) {
anno.addAnnotation(annotation);
}
});
}
_create(annotationData) {
/* jshint validthis: true */
var self = this;
var annotations = self.getAnnotations();
annotationData.objectId = this.uuid4.generate();
annotations.push(annotationData);
self.saveAnnotations(annotations);
}
_update(annotationData) {
/* jshint validthis: true */
var self = this;
var _create : any;
var annotations = self.getAnnotations();
var found = true;
for (var j = 0; j < annotations.length; j++) {
if (annotationData.objectId === annotations[j].objectId) {
annotations[j] = annotationData;
found = true;
break;
}
}
if (!found) {
_create(annotationData);
}
this.saveAnnotations(annotations);
}
_delete(annotationData) {
/* jshint validthis: true */
var self = this;
var annotations = this.getAnnotations();
var found = null;
for (var j = 0; j < annotations.length; j++) {
if (annotationData.objectId === annotations[j].objectId) {
annotations[j] = annotationData;
found = j;
break;
}
}
if (found != null) {
annotations.splice(j, 1);
this.saveAnnotations(annotations);
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Igor Lino">
<title>Angular Annotorious Demo</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://rawgit.com/igorlino/elevatezoom-plus/master/css/jquery.ez-plus.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src='https://rawgit.com/igorlino/elevatezoom-plus/master/src/jquery.ez-plus.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<!-- <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" /> -->
<!-- <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script> -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/igorlino/annotorious-bower/master/css/annotorious.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://rawgit.com/igorlino/angular-colorbox/master/themes/dark/colorbox-darktheme.css" media="screen" />
<script src='https://rawgit.com/igorlino/annotorious-bower/master/annotorious.min.js'></script>
<script src='https://rawgit.com/igorlino/angular-colorbox/master/js/angular-colorbox.js'></script>
<script src='https://rawgit.com/igorlino/angular-elevatezoom-plus/master/js/angular-ezplus.js'></script>
<!--
<script src='https://rawgit.com/igorlino/angular-annotorious/master/js/angular-annotorious.js'></script>
-->
<!-- <script src='../js/angular-annotorious.js'></script> -->
<!--
<script src='https://rawgit.com/igorlino/angular-annotorious/master/demo/controller.js'></script>
<script src='https://rawgit.com/igorlino/angular-annotorious/master/demo/app.js'></script>
-->
<script src='controller.js'></script>
<script src='app.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js'></script>
<!-- latest includes-->
<link rel="stylesheet" type="text/css" href="http://annotorious.github.com/latest/annotorious.css" media="screen" />
<script src="http://annotorious.github.com/latest/annotorious.min.js"></script>
<script src="angular-annotorious.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- ends latest includes-->
</head>
<body ng-init="setApproot('')">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Angular Annotorious</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<img
width="500px"
src="{{approot}}../assets/images/large/image5.jpg"
annotorious-annotate
/>
</div>
</div>
<!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
