@alisaitteke/seatmap-canvas 2.0.0

package/src/lib/enums/global.ts

@@ -0,0 +1,67 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+enum BLOCK_EVENT {
+
+}
+
+
+export enum EventType {
+    ADD_BLOCK = "BLOCK.ADD",
+    REMOVE_BLOCK = "BLOCK.REMOVE",
+    CLICK_BLOCK = "BLOCK.CLICK",
+    MOUSEENTER_BLOCK = "BLOCK.MOUSEENTER",
+    TOUCHSTART_BLOCK = "BLOCK.TOUCHSTART",
+    MOUSEDOWN_BLOCK = "BLOCK.MOUSEDOWN",
+    MOUSEUP_BLOCK = "BLOCK.MOUSEUP",
+    MOUSEMOVE_BLOCK = "BLOCK.MOUSEMOVE",
+    MOUSELEAVE_BLOCK = "BLOCK.MOUSELEAVE",
+    UPDATE_BLOCK = "BLOCK.UPDATE",
+    CLICK_SEAT = "SEAT.CLICK",
+    TOUCHSTART_SEAT = "SEAT.TOUCHSTART",
+    MOUSEMOVE_SEAT = "SEAT.MOUSEMOVE",
+    MOUSEDOWN_SEAT = "SEAT.MOUSEDOWN",
+    MOUSEENTER_SEAT = "SEAT.MOUSEENTER",
+    MOUSELEAVE_SEAT = "SEAT.MOUSELEAVE",
+    MOUSEOUT_SEAT = "SEAT.MOUSEOUT",
+    ADD_SEAT = "SEAT.ADD",
+    REMOVE_SEAT = "SEAT.REMOVE",
+    ZOOM_LEVEL_CHANGE = "ZOOM_LEVEL_CHANGE",
+    BOUND_CLICK = "BOUND.CLICK",
+
+    MOUSE_MOVE = "MOUSE.MOVE",
+
+    RESIZE_WINDOW = "WINDOW.RESIZE",
+
+    CLICK_ZOOMOUT = "ZOOM-OUT-BG.CLICK",
+    MOUSEMOVE_ZOOMOUT = "ZOOM-OUT-BG.MOUSEMOVE",
+
+    KEYDOWN_SVG = "KEYDOWN.SEATMAP-SVG",
+    KEYUP_SVG = "KEYUP.SEATMAP-SVG",
+
+    MULTI_SELECT_ENABLE = "MULTI_SELECT_ENABLE",
+    MULTI_SELECT_DISABLE = "MULTI_SELECT_DISABLE",
+
+    BEST_AVAILABLE_ENABLE = "BEST_AVAILABLE_ENABLE",
+    MBEST_AVAILABLE_DISABLE = "MBEST_AVAILABLE_DISABLE",
+
+    READY = "READY"
+
+}
+
+export enum ZoomLevel {
+    VENUE = "VENUE",
+    BLOCK = "BLOCK",
+    SEAT = "SEAT"
+}
+
+export enum SeatAction {
+    HOVER = "hover",
+    FOCUS = "focus",
+    LEAVE = "leave",
+    SELECT = "select",
+    NORMAL = "normal"
+
+}

package/src/lib/models/block.model.ts

@@ -0,0 +1,170 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import SeatModel from "./seat.model";
+import LabelModel from "./label.model";
+import ModelBase from "./model.base";
+
+
+export default class BlockModel extends ModelBase {
+    private _id: string;
+    private _seats: Array<SeatModel>;
+    private _labels: Array<LabelModel>;
+    private _title: String;
+    private _bounds: any;
+    private _width: number;
+    private _height: number;
+    private _x: number;
+    private _y: number;
+    private _color: string;
+    private _border_color: string;
+    private _bbox: any;
+    private _zoom_bbox: any;
+
+    constructor(item: any) {
+        super();
+        this.id = item.id ? item.id : (Math.random() * 1000).toString();
+        this.width = item.width || null;
+        this.height = item.height || null;
+        this.x = item.x || null;
+        this.y = item.y || null;
+        this.bounds = item._bounds || [];
+        this.color = item.color || "#f1f1f1";
+        this.border_color = item.border_color || "#f1f1f1";
+        this.title = item.title;
+
+        this.labels = item.labels.map((item: any) => {
+                item.block = this;
+                return new LabelModel(item);
+            }) || [];
+
+        this.seats = item.seats.map((item: any) => {
+                item.block = this;
+                let seat:SeatModel = new SeatModel(item);
+                return seat;
+            }) || [];
+    }
+
+    get seats(): Array<SeatModel> {
+        return this._seats;
+    }
+
+    set seats(value: Array<SeatModel>) {
+        this._seats = value;
+    }
+
+    get labels(): Array<LabelModel> {
+        return this._labels;
+    }
+
+    set labels(value: Array<LabelModel>) {
+        this._labels = value;
+    }
+
+    get title(): String {
+        return this._title;
+    }
+
+    set title(value: String) {
+        this._title = value;
+    }
+
+    get bounds(): any {
+        return this._bounds;
+    }
+
+    set bounds(value: any) {
+        this._bounds = value;
+    }
+
+    get width(): number {
+        return this._width;
+    }
+
+    set width(value: number) {
+        this._width = value;
+    }
+
+    get height(): number {
+        return this._height;
+    }
+
+    set height(value: number) {
+        this._height = value;
+    }
+
+    get x(): number {
+        return this._x;
+    }
+
+    set x(value: number) {
+        this._x = value;
+    }
+
+    get y(): number {
+        return this._y;
+    }
+
+    set y(value: number) {
+        this._y = value;
+    }
+
+    get id(): string {
+        return this._id;
+    }
+
+    set id(value: string) {
+        this._id = value;
+    }
+
+    get color(): string {
+        return this._color;
+    }
+
+    set color(value: string) {
+        this._color = value;
+    }
+
+
+    get border_color(): string {
+        return this._border_color;
+    }
+
+    set border_color(value: string) {
+        this._border_color = value;
+    }
+
+
+    get bbox(): any {
+        return this._bbox;
+    }
+
+    set bbox(value: any) {
+        this._bbox = value;
+    }
+
+
+    get zoom_bbox(): any {
+        return this._zoom_bbox;
+    }
+
+    set zoom_bbox(value: any) {
+        this._zoom_bbox = value;
+    }
+
+    toJson() {
+        return {
+            id: this.id,
+            title: this.title,
+            x: this.x,
+            y: this.y,
+            color: this.color,
+            width: this.width,
+            height: this.height
+
+        }
+    }
+}

package/src/lib/models/coordinate.model.ts

@@ -0,0 +1,43 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+export class CoordinateModel {
+
+    private _x: number;
+    private _y: number;
+
+    constructor(item?: any) {
+        this.x = item.x || 0;
+        this.y = item.y || 0;
+    }
+
+    toArray() {
+        return [this.x, this.y];
+    }
+
+
+    get x(): number {
+        return this._x;
+    }
+
+    set x(value: number) {
+        this._x = value;
+    }
+
+    get y(): number {
+        return this._y;
+    }
+
+    set y(value: number) {
+        this._y = value;
+    }
+
+    toJson() {
+        return {}
+    }
+}
+
+

package/src/lib/models/data.model.ts

@@ -0,0 +1,105 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import BlockModel from "./block.model";
+import {EventType} from "../enums/global";
+import EventManager from "../svg/event.manager";
+import {SeatMapCanvas} from "../canvas.index";
+import {SeatItem} from "../svg/stage/blocks/block-item/seat/seat-item.index";
+import SeatModel from "./seat.model";
+
+interface BlockQuery {
+    id?: number | string
+}
+
+export default class DataModel {
+    private blocks: Array<BlockModel>;
+
+
+    private eventManager: EventManager;
+    public addEventListener: any;
+
+    constructor(private _self: SeatMapCanvas) {
+        this.blocks = [];
+        this.eventManager = _self.eventManager;
+        this.addEventListener = _self.eventManager.addEventListener;
+    }
+
+    public addBlock(block_data: any): this {
+        this.blocks.push(new BlockModel(block_data));
+        this.eventManager.dispatch(EventType.ADD_BLOCK, [block_data]);
+        this.eventManager.dispatch(EventType.UPDATE_BLOCK, this.blocks);
+        return this;
+    }
+
+    public addBulkBlock(block_data: Array<BlockModel>): this {
+        block_data.map((item: any) => {
+            this.blocks.push(new BlockModel(item));
+        });
+        this.eventManager.dispatch(EventType.ADD_BLOCK, [block_data]);
+        this.eventManager.dispatch(EventType.UPDATE_BLOCK, this.blocks);
+        return this;
+    }
+
+    public replaceData(block_data: Array<any>): this {
+        this.blocks = [];
+        this.addBulkBlock(block_data);
+        return this;
+    }
+
+    public getBlock(id: string | number): BlockModel {
+        return this.blocks.find((item: BlockModel) => item.id === id);
+    }
+
+    public getBlocks(blockId?: string): Array<BlockModel> {
+        if (blockId)
+            return [this.getBlock(blockId)];
+        return this.blocks;
+    }
+
+    public removeBlock(id: string | number): this {
+        this.filterBlock({id: id}).map((item: BlockModel, index: number) => {
+            this.blocks.splice(index, 1);
+        });
+        this.eventManager.dispatch(EventType.REMOVE_BLOCK, id);
+        this.eventManager.dispatch(EventType.UPDATE_BLOCK, this.blocks);
+        return this;
+    }
+
+    public getSeat(seatId: string | number, blockId: string | number): SeatModel {
+        let block: BlockModel = this.getBlock(blockId);
+        if (block) {
+            return block.seats.find(seat => seat.id == seatId)
+        } else {
+            console.error(new Error('Block not found!'));
+            new Error('Block not found')
+        }
+
+    }
+
+    public getSelectedSeats(blockId?: string): Array<SeatModel> {
+        let blocks = this.getBlocks(blockId);
+        let selectedSeats: Array<SeatModel> = [];
+        blocks.forEach((item: BlockModel) => {
+            item.seats.forEach(seatItem => {
+                if (seatItem.selected)
+                    selectedSeats.push(seatItem)
+            })
+        });
+        return selectedSeats;
+    }
+
+    public filterBlock(query: BlockQuery): Array<BlockModel> {
+        return this.blocks.filter((item: BlockModel) => item.id === query.id)
+    }
+
+
+    toJson() {
+        return {
+            blocks: this.blocks
+        }
+    }
+}

package/src/lib/models/defaults.model.ts

@@ -0,0 +1,125 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+// @todo legend show hide function
+
+export default class DefaultsModel {
+    min_zoom: number = 0.1;
+    max_zoom: number = 1.9;
+    animation_speed: number = 600;
+    resizable: boolean = false;
+    container: any = null;
+    zoom_focus_circle_radius: number = 60;
+    click_enable_sold_seats: boolean = false;
+    zoom_out_button: string = null;
+    legend_show: boolean = false;
+    canvas_stageout_control: boolean = true;
+    seat_style: {
+        radius: number,
+        color: string,
+        not_salable: string,
+        selected: string,
+        hover: string,
+        focus: string,
+        focus_out: string,
+        check_color: string
+    };
+    block_style: {
+        fill: string
+        stroke: string,
+        border_width: number,
+        title_color: string,
+        title_font_size: string
+    };
+
+    legend_style: {
+        radius: number,
+        padding: number,
+        font_size: number
+    };
+
+    label_style: {
+        color: string
+        bg: string
+        font_size: number
+        radius: number
+    };
+
+    tooltip_style: {
+        border_width: string,
+        width: number,
+        height: number,
+        color: string,
+        bg: string
+    };
+
+    lang: {
+        selectable: string,
+        non_selectable: string,
+        your_selection: string
+    };
+
+    constructor(config: any) {
+
+        this.zoom_focus_circle_radius = config.zoom_focus_circle_radius ? config.zoom_focus_circle_radius : this.zoom_focus_circle_radius;
+        this.click_enable_sold_seats = config.click_enable_sold_seats ? config.click_enable_sold_seats : this.click_enable_sold_seats;
+        this.max_zoom = config.max_zoom ? config.max_zoom : this.max_zoom;
+
+        this.resizable = config.resizable ? config.resizable : this.resizable;
+        this.zoom_out_button = config.zoom_out_button ? config.zoom_out_button : ".zoom-out-button";
+        this.legend_show = config.legend_show == false ? config.legend_show : true;
+        this.canvas_stageout_control = config.canvas_stageout_control == false ? config.canvas_stageout_control : true;
+
+
+        this.seat_style = {
+            radius: config.seat_style && config.seat_style.radius || 12,
+            color: config.seat_style && config.seat_style.color || "#77b2ff",
+            not_salable: config.seat_style && config.seat_style.not_salable || "#ccc9c9",
+            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",
+            check_color: config.seat_style && config.seat_style.check_color || "#ffffff",
+        };
+        this.block_style = {
+            fill: config.block_style && config.block_style.fill || "#ffffff",
+            stroke: config.block_style && config.block_style.stroke || "#ffffff",
+            border_width: config.block_style && config.block_style.border_width || 4,
+            title_color: config.block_style && config.block_style.title_color || "#000000",
+            title_font_size: config.block_style && config.block_style.title_font_size || 28,
+        };
+        this.label_style = {
+            color: config.label_style && config.label_style.color || "#000000",
+            bg: config.label_style && config.label_style.bg || "#ffffff",
+            font_size: config.label_style && config.label_style.font_size || 12,
+            radius: config.label_style && config.label_style.radius || 12,
+        };
+        this.legend_style = {
+            radius: config.legend_style && config.legend_style.radius || 12,
+            padding: config.legend_style && config.legend_style.padding || 36,
+            font_size: config.legend_style && config.legend_style.font_size || 100,
+        };
+        this.tooltip_style = {
+            border_width: config.tooltip_style && config.tooltip_style.border_width || 1,
+            width: config.tooltip_style && config.tooltip_style.width || 140,
+            height: config.tooltip_style && config.tooltip_style.height || 58,
+            color: config.tooltip_style && config.tooltip_style.color || "#000000",
+            bg: config.tooltip_style && config.tooltip_style.bg || "#ffffff"
+        };
+
+        this.lang = {
+            selectable: config.lang && config.lang.selectable || "Selectable",
+            non_selectable: config.lang && config.lang.non_selectable || "Non Selectable or Rezerved",
+            your_selection: config.lang && config.lang.your_selection || "Your Selection",
+        };
+
+
+    }
+
+    getAll(): this {
+        return this;
+    }
+}

package/src/lib/models/global.model.ts

@@ -0,0 +1,24 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import DefaultsModel from "./defaults.model";
+import DataModel from "./data.model";
+import {SeatMapCanvas} from "../canvas.index";
+import ZoomManager from "../svg/zoom.manager";
+import EventManager from "../svg/event.manager";
+import Svg from "../svg/svg.index";
+import WindowManager from "../window.manager";
+
+export interface GlobalModel {
+    config: DefaultsModel,
+    eventManager: EventManager,
+    windowManager:WindowManager,
+    data: DataModel,
+    root: SeatMapCanvas,
+    zoomManager: ZoomManager,
+    svg:Svg,
+    multi_select:boolean,
+    best_available:boolean
+}

package/src/lib/models/label.model.ts

@@ -0,0 +1,58 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+
+import BlockModel from "./block.model";
+import ModelBase from "./model.base";
+
+export default class LabelModel extends ModelBase {
+    private _x: number;
+    private _y: number;
+    private _title: string;
+
+    private _block: BlockModel;
+
+    constructor(item: any) {
+        super();
+        this.x = item.x;
+        this.y = item.y;
+        this.title = item.title;
+        this.block = item.block;
+    }
+
+
+    get x(): number {
+        return this._x;
+    }
+
+    set x(value: number) {
+        this._x = value;
+    }
+
+    get y(): number {
+        return this._y;
+    }
+
+    set y(value: number) {
+        this._y = value;
+    }
+
+    get title(): string {
+        return this._title;
+    }
+
+    set title(value: string) {
+        this._title = value;
+    }
+
+    get block(): BlockModel {
+        return this._block;
+    }
+
+    set block(value: BlockModel) {
+        this._block = value;
+    }
+}

package/src/lib/models/legend.model.ts

@@ -0,0 +1,56 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+
+import ModelBase from "./model.base";
+
+export default class LegendModel extends ModelBase {
+    private _x: number;
+    private _y: number;
+    private _title: string;
+    private _color:string;
+
+
+    constructor(item: any) {
+        super();
+        this.x = item.x;
+        this.y = item.y;
+        this.title = item.title;
+    }
+
+
+    get x(): number {
+        return this._x;
+    }
+
+    set x(value: number) {
+        this._x = value;
+    }
+
+    get y(): number {
+        return this._y;
+    }
+
+    set y(value: number) {
+        this._y = value;
+    }
+
+    get title(): string {
+        return this._title;
+    }
+
+    set title(value: string) {
+        this._title = value;
+    }
+
+    get color(): string {
+        return this._color;
+    }
+
+    set color(value: string) {
+        this._color = value;
+    }
+}

package/src/lib/models/model.base.ts

@@ -0,0 +1,32 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+export default class ModelBase {
+    private _child_index: number = null;
+    private _item_type: string;
+
+
+    constructor() {
+
+    }
+
+
+    get child_index(): number {
+        return this._child_index;
+    }
+
+    set child_index(value: number) {
+        this._child_index = value;
+    }
+
+
+    get item_type(): string {
+        return this._item_type;
+    }
+
+    set item_type(value: string) {
+        this._item_type = value;
+    }
+}