Merge branch 'release/0.1.8'

Author: alisaitteke

build/seatmap.canvas.css

@@ -24,7 +24,8 @@
     stroke-linejoin: round;
     opacity: 0.5; }
   .seatmap-svg .stage .blocks .block .bounds .block-hull {
-    stroke-linejoin: round; }
+    stroke-linejoin: round;
+    cursor: move; }
   .seatmap-svg .stage .blocks .block .masks .venue-level-mask {
     transition-property: opacity;
     transition-duration: 0.5s;

build/seatmap.canvas.js

@@ -1,6 +1,6 @@
 {
   "name": "@seatmap/canvas",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "tags": "seating, seat, seatmap, seat-selection, seat-booking, booking, ticket, reservation",
   "author": "Ali Sait TEKE <[email protected]>",
   "homepage": "https://github.com/seatmap/canvas",

package.json

@@ -20,6 +20,7 @@ export enum EventType {
     UPDATE_BLOCK = "BLOCK.UPDATE",
     CLICK_SEAT = "SEAT.CLICK",
     MOUSEMOVE_SEAT = "SEAT.MOUSEMOVE",
+    MOUSEDOWN_SEAT = "SEAT.MOUSEDOWN",
     MOUSEENTER_SEAT = "SEAT.MOUSEENTER",
     MOUSELEAVE_SEAT = "SEAT.MOUSELEAVE",
     MOUSEOUT_SEAT = "SEAT.MOUSEOUT",

src/lib/enums/global.ts

@@ -24,7 +24,8 @@ export default class DefaultsModel {
         selected: string,
         hover: string,
         focus: string,
-        focus_out: string
+        focus_out: string,
+        check_color: string
     };
     block_style: {
         fill: string
@@ -80,7 +81,8 @@ export default class DefaultsModel {
             selected: config.seat_style && config.seat_style.selected || "#51ff48",
             hover: config.seat_style && config.seat_style.hover || "#4770ff",
             focus: config.seat_style && config.seat_style.focus || "#6293d2",
-            focus_out: config.seat_style && config.seat_style.focus_out || "#ff001c"
+            focus_out: config.seat_style && config.seat_style.focus_out || "#ff001c",
+            check_color: config.seat_style && config.seat_style.check_color || "#ffffff",
         };
         this.block_style = {
             fill: config.block_style && config.block_style.fill || "#ffffff",

src/lib/models/defaults.model.ts

@@ -26,9 +26,11 @@ export default class Seats extends SvgBase {
         this.global.eventManager.addEventListener(EventType.MOUSEENTER_SEAT, (seat: SeatItem) => {
             if (this.global.multi_select) return;
             seat.setColor(seat.getColor(SeatAction.HOVER));
+            this.global.zoomManager.zoomDisable();
         });
         this.global.eventManager.addEventListener(EventType.MOUSELEAVE_SEAT, (seat: SeatItem) => {
             seat.setColor(seat.getColor());
+            this.global.zoomManager.zoomEnable();
         });
 
         return this;

src/lib/svg/stage/blocks/block-item/block-item.seats.index.ts

@@ -0,0 +1,45 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import {SeatItem} from "./seat-item.index";
+
+@dom({
+    tag: "path",
+    class: "seat-check",
+    autoGenerate: false
+})
+export class SeatItemCheck extends SvgBase {
+
+    constructor(public parent: SeatItem) {
+        super(parent);
+        this.attr("d", "M12.9,953.7l-6.3,6.5l-2.9-2.5l-2.1,2.4l4.1,3.5l1.1,1l1.1-1.1l7.3-7.6L12.9,953.7L12.9,953.7z");
+        this.attr("fill", this.global.config.seat_style.check_color);
+        this.attr("transform", "translate(-8,-959.36218)");
+        this.attr("pointer-events", "none");
+        this.attr("display", "none");
+
+        return this;
+    }
+
+    update(): this {
+        return this;
+    }
+
+    afterGenerate() {
+        this.node.style("pointer-events", "none");
+    }
+
+    show():this {
+        this.node.attr("display", "block");
+        return this;
+    }
+
+    hide():this {
+        this.node.attr("display", "none");
+        return this;
+    }
+}

src/lib/svg/stage/blocks/block-item/seat/seat-item.check.ts

@@ -12,6 +12,7 @@ import {SeatItemCircle} from "./seat-item.circle";
 import {CoordinateModel} from "../../../../../models/coordinate.model";
 import {SeatItemTitle} from "./seat-item.title";
 import {SeatAction} from "../../../../../enums/global";
+import {SeatItemCheck} from "./seat-item.check";
 
 
 @dom({
@@ -24,6 +25,7 @@ export class SeatItem extends SvgBase {
     public circle: SeatItemCircle;
     public title: SeatItemTitle;
     public coordinates: CoordinateModel;
+    public check: SeatItemCheck;
 
     constructor(public parent: Seats, public item: SeatModel) {
         super(parent);
@@ -34,7 +36,7 @@ export class SeatItem extends SvgBase {
 
     public setColor(color: string, animation: boolean = false): this {
         if (animation) {
-            this.circle.node.interrupt().transition().duration(this.global.config.animation_speed).attr("fill", color);
+            this.circle.node.transition().duration(this.global.config.animation_speed).attr("fill", color);
         } else {
             this.circle.node.attr("fill", color);
         }
@@ -51,13 +53,15 @@ export class SeatItem extends SvgBase {
         this.item.selected = true;
         this.node.classed("selected", true);
         this.circle.node.attr("fill", this.global.config.seat_style.selected);
+        this.check.show();
         return this;
     }
 
     public unSelect(): this {
         this.item.selected = false;
         this.node.classed("selected", false);
         this.circle.node.attr("fill", this.global.config.seat_style.color);
+        this.check.hide();
         return this;
     }
 
@@ -127,6 +131,10 @@ export class SeatItem extends SvgBase {
         this.addChild(this.circle);
 
 
+        this.check = new SeatItemCheck(this).addTo(this);
+
+
+
         // this.title = new SeatItemTitle(this);
         // this.addChild(this.title);
 

src/lib/svg/stage/blocks/block-item/seat/seat-item.index.ts

@@ -246,7 +246,7 @@ export default class ZoomManager {
         this.zoomLevels.VENUE = {
             x: x,
             y: y,
-            k: this.scale.k - 0.3
+            k: this.scale.k
         };
 
 

src/lib/svg/zoom.manager.ts

@@ -111,6 +111,7 @@
           }
           .block-hull {
             stroke-linejoin: round;
+            cursor: move;
           }
         }
         .masks {