@alisaitteke/seatmap-canvas 2.0.0

package/src/lib/svg/tooltip/title.ts

@@ -0,0 +1,57 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../decorators";
+import SvgBase from "../svg.base";
+import Tooltip from "../tooltip";
+
+@dom({
+    tag: "text",
+    class: "tooltip-title",
+    autoGenerate: false
+})
+export default class TooltipTitle extends SvgBase {
+
+    private _title: Array<string>;
+
+    constructor(public parent: Tooltip) {
+        super(parent);
+        this.attr("x", 6);
+        this.attr("y", 21);
+        this.attr("fill", this.global.config.tooltip_style.color);
+        return this;
+    }
+
+    update(): this {
+        this.updateChilds();
+        return this;
+    }
+
+    afterGenerate() {
+
+        this.node.style("pointer-events", "none");
+        this.node.style("font-size", "12px");
+    }
+
+    generateTitle() {
+        this.node.selectAll("tspan").remove()
+            .data(this.title).enter()
+            .append("tspan")
+            .text((item: string) => item)
+            .attr("x", 6)
+            .attr("y", (line: any, index: number) => (index * 16) + 16);
+    }
+
+
+    get title(): Array<string> {
+        return this._title;
+    }
+
+    set title(value: Array<string>) {
+        this._title = value;
+        //this.generateTitle();
+    }
+}

package/src/lib/svg/tooltip.ts

@@ -0,0 +1,92 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../decorators";
+import SvgBase from "./svg.base";
+
+import TooltipRect from "./tooltip/rect";
+import {EventType, ZoomLevel} from "../enums/global";
+
+
+import Svg from "./svg.index";
+import {SeatItem} from "./stage/blocks/block-item/seat/seat-item.index";
+
+import {mouse as d3Mouse} from 'd3-selection'
+import TooltipTitle from "./tooltip/title";
+
+@dom({
+    tag: "g",
+    class: "seatmap-tooltip",
+    autoGenerate: false
+})
+export default class Tooltip extends SvgBase {
+
+
+    public rect: TooltipRect;
+    public title: TooltipTitle;
+
+    public activeSeat: SeatItem;
+
+    constructor(public parent: Svg) {
+        super(parent);
+        this.attr("transform", "translate(0,0)");
+        this.attr("opacity", 0);
+
+        this.activeSeat = null;
+
+
+        this.global.eventManager.addEventListener([EventType.MOUSEMOVE_SEAT], (seat: SeatItem) => {
+            if (this.global.multi_select) return;
+            if (this.activeSeat !== seat) {
+                this.activeSeat = seat;
+                this.setTitle(seat.item.title.split("\n"));
+                this.title.generateTitle();
+            }
+        });
+        this.global.eventManager.addEventListener([EventType.MOUSEOUT_SEAT], (seat: SeatItem) => {
+            this.node.attr("opacity", 0);
+            this.activeSeat = null;
+            this.title.title = [];
+            this.title.generateTitle();
+        });
+        this.global.eventManager.addEventListener([EventType.TOUCHSTART_BLOCK], (seat: SeatItem) => {
+            this.node.attr("opacity", 0);
+        });
+        return this;
+    }
+
+    public setTitle(title: Array<string>): this {
+        this.title.title = title;
+        return this;
+    }
+
+    update(): this {
+        this.rect = new TooltipRect(this).addTo(this);
+        this.title = new TooltipTitle(this).addTo(this);
+
+
+        this.updateChilds();
+        return this;
+    }
+
+    afterGenerate() {
+
+        let _self = this;
+
+        this.parent.node.on("mousemove.seat", function () {
+            if (_self.global.multi_select) return;
+            if (_self.global.zoomManager.zoomLevel === ZoomLevel.SEAT && _self.activeSeat !== null) {
+                let cor = d3Mouse(this);
+
+                let x = cor[0] - (_self.global.config.tooltip_style.width / 2);
+                let y = cor[1] - (_self.global.config.tooltip_style.height + (_self.global.config.seat_style.radius) + 2);
+                _self.node.attr("transform", "translate(" + [x, y] + ")").attr("opacity", 1);
+            } else {
+                _self.node.attr("opacity", 0);
+            }
+        })
+    }
+}

package/src/lib/svg/zoom-out.bg.ts

@@ -0,0 +1,35 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../decorators";
+import SvgBase from "./svg.base";
+import Svg from "./svg.index";
+import {EventType} from "../enums/global";
+
+@dom({
+    tag: "rect",
+    class: "zoom-out-bg",
+    autoGenerate: false
+})
+export default class ZoomOutBg extends SvgBase {
+
+    constructor(public parent: Svg) {
+        super(parent);
+        this.global.eventManager.addEventListener(EventType.RESIZE_WINDOW, (win: any) => {
+
+            this.node
+                .attr("width", win.width)
+                .attr("height", win.height)
+                .on("click.zoomout", () => {
+                    this.global.eventManager.dispatch(EventType.CLICK_ZOOMOUT, this);
+                });
+        })
+    }
+
+    update() {
+
+    }
+}

package/src/lib/svg/zoom.manager.ts

@@ -0,0 +1,440 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import {mouse as d3Mouse, event as d3Event} from 'd3-selection'
+import {zoom as d3Zoom} from 'd3-zoom'
+
+
+import {SeatMapCanvas} from "../canvas.index";
+import {EventType, ZoomLevel} from "../enums/global";
+import SeatModel from "../models/seat.model";
+import BlockModel from "../models/block.model";
+import LabelModel from "../models/label.model";
+
+interface ZoomCoordinate {
+    x: number,
+    y: number,
+    k: number
+}
+
+export interface ZoomLevelObject {
+    level: string,
+    values: {
+        x: number,
+        y: number,
+        k: number
+    }
+}
+
+export default class ZoomManager {
+
+    public zoomTypes: any = {
+        normal: null,
+        animated: null,
+        fastAnimated: null
+    };
+
+    public scale: any = {
+        x: null,
+        y: null,
+        k: null
+    };
+
+    private zoomLevels: any = {
+        VENUE: null,
+        BLOCK: null,
+        SEAT: null
+    };
+
+    public activeBlocks: Array<any>;
+    public minZoom: number = null;
+    private _zoomLevel: ZoomLevel;
+
+
+    constructor(private _self: SeatMapCanvas) {
+
+        this.activeBlocks = [];
+        this.zoomLevel = ZoomLevel.VENUE;
+
+        this.dispatchZoomEvent();
+    }
+
+    public init() {
+
+        this.calculateZoomLevels();
+        this.zoomInit();
+        // this._self.eventManager.addEventListener(EventType.UPDATE_BLOCK, (blocks: Array<BlockModel>) => {
+        //     this.calculateZoomLevels(blocks);
+        // })
+
+        this._self.eventManager.addEventListener(EventType.KEYDOWN_SVG, (e: any) => {
+            if (e.which == 17 || e.which === 91) {
+                this._self.eventManager.dispatch(EventType.MULTI_SELECT_ENABLE, e);
+                d3Event.preventDefault();
+                this.zoomDisable();
+            }
+        });
+        this._self.eventManager.addEventListener(EventType.KEYUP_SVG, (e: any) => {
+            this._self.eventManager.dispatch(EventType.MULTI_SELECT_DISABLE, e);
+            d3Event.preventDefault();
+            this.zoomEnable();
+        });
+
+    }
+
+    zoomInit() {
+        this.zoomTypes.normal = d3Zoom()
+            .scaleExtent([this._self.config.min_zoom, this._self.config.max_zoom])
+            .on("end", this.zoomEnd(this))
+            .on("zoom", this.zoomHand(this));
+
+        this.zoomTypes.animated = d3Zoom()
+            .scaleExtent([this._self.config.min_zoom, this._self.config.max_zoom])
+            .on("end", this.animatedZoomEnd(this))
+            .on("zoom", this.zoomHandAnimated(this));
+
+        this.zoomTypes.fastAnimated = d3Zoom()
+            .scaleExtent([this._self.config.min_zoom, this._self.config.max_zoom])
+            .on("end", this.animatedFastZoomEnd(this))
+            .on("zoom", this.zoomHandFastAnimated(this));
+
+        this._self.svg.node.call(this.zoomTypes.normal);
+    }
+
+    zoomEnd(_self: this): any {
+        return function () {
+            let x = d3Event.transform.x;
+            let y = d3Event.transform.y;
+            let k = d3Event.transform.k;
+            _self._self.svg.stage.node.interrupt().attr("transform", "translate(" + x + "," + y + ")scale(" + k + ")");
+            _self.calculateActiveBlocks();
+            _self.calculateZoomLevel(k);
+            _self.canvasScopeHandler();
+        }
+    }
+
+    animatedZoomEnd(_self: this): any {
+        return function () {
+            let x = d3Event.transform.x;
+            let y = d3Event.transform.y;
+            let k = d3Event.transform.k;
+            _self._self.svg.stage.node.interrupt().transition().duration(_self._self.config.animation_speed).attr("transform", "translate(" + x + "," + y + ")scale(" + k + ")");
+            _self.calculateActiveBlocks();
+            _self.calculateZoomLevel(k);
+        }
+    }
+
+    animatedFastZoomEnd(_self: this): any {
+        return function () {
+            let x = d3Event.transform.x;
+            let y = d3Event.transform.y;
+            let k = d3Event.transform.k;
+            _self._self.svg.stage.node.interrupt().transition().duration(_self._self.config.animation_speed / 2).attr("transform", "translate(" + x + "," + y + ")scale(" + k + ")");
+            _self.calculateActiveBlocks();
+            _self.calculateZoomLevel(k);
+        }
+    }
+
+    zoomHand(_self: this): any {
+        return function () {
+            let x = d3Event.transform.x;
+            let y = d3Event.transform.y;
+            let k = d3Event.transform.k;
+            _self._self.svg.stage.node.interrupt().attr("transform", "translate(" + x + "," + y + ")scale(" + k + ")");
+            _self.calculateZoomLevel(k);
+        }
+    }
+
+    zoomHandAnimated(_self: this): any {
+        return function () {
+            let x = d3Event.transform.x;
+            let y = d3Event.transform.y;
+            let k = d3Event.transform.k;
+
+            _self._self.svg.stage.node.interrupt().transition().duration(_self._self.config.animation_speed).attr("transform", "translate(" + x + "," + y + ")scale(" + k + ")");
+            //_self.calculateZoomLevel(k);
+        }
+    }
+
+    zoomHandFastAnimated(_self: this): any {
+        return function () {
+            let x = d3Event.transform.x;
+            let y = d3Event.transform.y;
+            let k = d3Event.transform.k;
+
+            _self._self.svg.stage.node.interrupt().transition().duration(_self._self.config.animation_speed / 2).attr("transform", "translate(" + x + "," + y + ")scale(" + k + ")");
+            //_self.calculateZoomLevel(k);
+        }
+    }
+
+    calculateZoomLevel(k: number) {
+        let _levels = {
+            seat: this._self.config.max_zoom - 0.2,
+            block: this.zoomLevels.BLOCK.k,
+            venue: this.zoomLevels.VENUE.k
+        };
+
+        let _zoomLevel = null;
+
+        let blocks_count = this._self.data.getBlocks().length;
+
+        if (k >= _levels.seat) {
+            _zoomLevel = ZoomLevel.SEAT;
+
+        } else if (k >= _levels.block) {
+            _zoomLevel = ZoomLevel.BLOCK;
+
+        } else if (k >= _levels.venue && blocks_count > 1) {
+            _zoomLevel = ZoomLevel.VENUE;
+        }
+
+        if (_zoomLevel !== this.zoomLevel) {
+            this.zoomLevel = _zoomLevel;
+            this.dispatchZoomEvent();
+        }
+    }
+
+    canvasScopeHandler() {
+        if (this._self.config.canvas_stageout_control === false) return;
+        let _blocks_values = this._self.svg.stage.blocks.node.node().getBoundingClientRect();
+        let _svg_values = this._self.svg.node.node().getBoundingClientRect();
+
+        if (this.zoomLevel === ZoomLevel.VENUE ||
+            (this.zoomLevel === ZoomLevel.BLOCK && this._self.data.getBlocks().length === 1) ||
+            (this.zoomLevel == ZoomLevel.SEAT && this.zoomLevels.BLOCK && this.zoomLevels.BLOCK.k === this._self.config.max_zoom)) {
+
+            if (_blocks_values.left < _svg_values.left ||
+                _blocks_values.top < _svg_values.top ||
+                _blocks_values.right > _svg_values.right ||
+                _blocks_values.bottom > _svg_values.bottom) {
+                this.zoomToVenue(true, true);
+            }
+        }
+    }
+
+    public calculateZoomLevels(blocks: Array<BlockModel> = this._self.data.getBlocks()): this {
+
+        let _wm = this._self.windowManager;
+        let _stage = _wm.stage;
+
+        blocks.map((block: BlockModel) => {
+
+            block.seats.map((seat: SeatModel) => {
+                if (seat.x < block.x) block.x = seat.x;
+                if (seat.y < block.y) block.y = seat.y;
+
+                if (seat.x > _stage.width) _stage.width = seat.x;
+                if (seat.y > _stage.height) _stage.height = seat.y;
+
+                //this.total_seat_count++;
+            });
+
+            block.labels.map((label: LabelModel) => {
+                if (label.x < block.x) block.x = label.x;
+                if (label.y < block.y) block.y = label.y;
+
+                if (label.x > _stage.width) _stage.width = label.x;
+                if (label.y > _stage.height) _stage.height = label.y;
+            });
+
+        });
+
+        this.scale.x = (_wm.width / _stage.width) - ((_wm.width / _stage.width) / 5);
+        this.scale.y = (_wm.height / _stage.height) - ((_wm.height / _stage.height) / 5);
+        this.scale.k = (this.scale.x < this.scale.y) ? this.scale.x : this.scale.y;
+        this.minZoom = this.scale.k < 1 ? this.scale.k : 1;
+
+        this.scale.k = this.scale.k > this._self.config.max_zoom ? this._self.config.max_zoom : this.scale.k;
+
+
+        let x = _stage.width / 2;
+        let y = _stage.height / 2;
+        this.zoomLevels.VENUE = {
+            x: x,
+            y: y,
+            k: this.scale.k - 0.1
+        };
+
+
+        if (this._self.data.getBlocks().length === 1 && this.zoomLevels.BLOCK) {
+            this.zoomLevels.VENUE = this.zoomLevels.BLOCK;
+        }
+
+        return this;
+    }
+
+    public calculateActiveBlocks(blocks: Array<BlockModel> = this._self.data.getBlocks()): Array<BlockModel> {
+        this.activeBlocks = [];
+
+
+        blocks.map((block: BlockModel) => {
+            let _block_item = this._self.svg.stage.blocks.getBlock(block.id);
+
+
+            let bound = _block_item.node.node().getBoundingClientRect();
+            let bbox = _block_item.node.node().getBBox();
+
+            block.bbox = bbox;
+
+            let x = (this._self.windowManager.width / bbox.width) - ((this._self.windowManager.width / bbox.width) / 3);
+            let y = (this._self.windowManager.height / bbox.height) - ((this._self.windowManager.height / bbox.height) / 3);
+            let k = (x < y) ? x : y;
+
+            x += bbox.x + (bbox.width / 2);
+            y += bbox.y + (bbox.height / 2);
+
+            k = k > this._self.config.max_zoom ? this._self.config.max_zoom : k;
+
+            block.zoom_bbox = {
+                x: x,
+                y: y,
+                k: k
+            };
+
+
+            let x_overlap = Math.max(0, Math.min(this._self.windowManager.width, bound.right) - Math.max(0, bound.left));
+            let y_overlap = Math.max(0, Math.min(this._self.windowManager.height, bound.bottom) - Math.max(0, bound.top));
+            let overlapArea = (x_overlap * y_overlap);
+            let allOverlapArea = this._self.windowManager.width * this._self.windowManager.height;
+            let ratio: number = (overlapArea * 100) / allOverlapArea;
+
+            if (overlapArea > 0) {
+                this.activeBlocks.push({
+                    block: _block_item,
+                    ratio: Number(ratio.toFixed(2))
+                });
+            }
+        });
+
+        this.activeBlocks = this.activeBlocks.sort((a, b) => b.ratio - a.ratio);
+        if (this.activeBlocks.length) {
+            let _activeBlock: BlockModel = this.activeBlocks[0].block.item;
+            this.zoomLevels.BLOCK = _activeBlock.zoom_bbox;
+        }
+
+        return this.activeBlocks;
+    }
+
+    public zoomToSelection(animation: boolean = true) {
+
+        let cor = d3Mouse(this._self.svg.stage.blocks.node.node());
+        let x = cor[0];
+        let y = cor[1];
+        let k = this._self.config.max_zoom;
+
+        this.zoomLevels.SEAT = {
+            x: x,
+            y: y,
+            k: k
+        };
+
+        if (animation) {
+            this._self.svg.node.interrupt().call(this.zoomTypes.animated.translateTo, x, y).call(this.zoomTypes.animated.scaleTo, k);
+        } else {
+            this._self.svg.node.interrupt().call(this.zoomTypes.normal.translateTo, x, y).call(this.zoomTypes.normal.scaleTo, k);
+        }
+        this.zoomLevel = ZoomLevel.SEAT;
+        this.dispatchZoomEvent();
+
+    }
+
+    public zoomToBlock(id: string | number, animation: boolean = true, fastAnimated: boolean = false) {
+        let _block = this._self.data.getBlocks().find((block: BlockModel) => block.id === id);
+
+
+        if (_block) {
+            if (animation) {
+                if (fastAnimated) {
+                    this._self.svg.node.interrupt().call(this.zoomTypes.fastAnimated.translateTo, _block.zoom_bbox.x, _block.zoom_bbox.y).call(this.zoomTypes.fastAnimated.scaleTo, _block.zoom_bbox.k);
+                } else {
+                    this._self.svg.node.interrupt().call(this.zoomTypes.animated.translateTo, _block.zoom_bbox.x, _block.zoom_bbox.y).call(this.zoomTypes.animated.scaleTo, _block.zoom_bbox.k);
+                }
+            } else {
+                this._self.svg.node.interrupt().call(this.zoomTypes.normal.translateTo, _block.zoom_bbox.x, _block.zoom_bbox.y).call(this.zoomTypes.normal.scaleTo, _block.zoom_bbox.k);
+            }
+
+            // let gap = 0.2;
+
+            // if (_block.zoom_bbox.k > this._self.config.max_zoom + gap || _block.zoom_bbox.k < this._self.config.max_zoom - gap) {
+            if (_block.zoom_bbox.k === this._self.config.max_zoom) {
+                this.zoomLevel = ZoomLevel.SEAT;
+            } else {
+                this.zoomLevel = ZoomLevel.BLOCK;
+            }
+
+            this.dispatchZoomEvent();
+        }
+    }
+
+    public zoomToVenue(animation: boolean = true, fastAnimated: boolean = false) {
+
+        let x = this.zoomLevels.VENUE.x;
+        let y = this.zoomLevels.VENUE.y;
+        let k = this.zoomLevels.VENUE.k;
+
+        this._self.config.min_zoom = k;
+        this.zoomInit();
+
+
+        // single mode
+        if (this._self.data.getBlocks().length === 1) {
+            let _block = this._self.data.getBlocks()[0];
+            this.zoomToBlock(_block.id, animation, fastAnimated);
+            return;
+        }
+
+
+        if (x && y && k) {
+            if (animation) {
+                if (fastAnimated) {
+                    this._self.svg.node.interrupt().call(this.zoomTypes.fastAnimated.translateTo, x, y).call(this.zoomTypes.fastAnimated.scaleTo, k);
+                } else {
+                    this._self.svg.node.interrupt().call(this.zoomTypes.animated.translateTo, x, y).call(this.zoomTypes.animated.scaleTo, k);
+                }
+
+            } else {
+                this._self.svg.node.interrupt().call(this.zoomTypes.normal.translateTo, x, y).call(this.zoomTypes.normal.scaleTo, k);
+            }
+            this.zoomLevel = ZoomLevel.VENUE;
+            this.dispatchZoomEvent();
+        }
+
+    }
+
+
+    get zoomLevel(): ZoomLevel {
+        return this._zoomLevel;
+    }
+
+    set zoomLevel(value: ZoomLevel) {
+        this._zoomLevel = value;
+    }
+
+    public zoomEnable(): this {
+        this._self.svg.node.call(this.zoomTypes.normal);
+        //this._self.svg.node.on('.zoom', null);
+        return this;
+    }
+
+    public zoomDisable(): this {
+        this._self.svg.node.on('.zoom', null);
+        return this;
+    }
+
+    public getZoomLevelValues(level: ZoomLevel) {
+        return this.zoomLevels[level];
+    }
+
+    public getActiveZoom() {
+        return this.zoomLevels[this._zoomLevel];
+    }
+
+    private dispatchZoomEvent() {
+        this._self.eventManager.dispatch(EventType.ZOOM_LEVEL_CHANGE, {
+            level: this._zoomLevel,
+            values: this.getZoomLevelValues(this._zoomLevel)
+        });
+    }
+}

package/src/lib/window.manager.ts

@@ -0,0 +1,40 @@
+/*
+ * Seatmap-canvas
+ * https://github.com/seatmap/canvas Copyright 2022 Ali Sait TEKE
+ */
+import {select as d3Select} from 'd3-selection'
+
+import {SeatMapCanvas} from "./canvas.index";
+import {EventType} from "./enums/global";
+
+declare var window: any;
+
+export default class WindowManager {
+
+    public width: number = null;
+    public height: number = null;
+
+    public stage: any = {
+        width: null,
+        height: null
+    };
+
+
+    constructor(public parent: SeatMapCanvas) {
+        d3Select(window).on("resize.svg", () => {
+            this.resizeHandler();
+
+        });
+
+    }
+
+    resizeHandler(): this {
+        let _node = d3Select(this.parent.container_selector).node().getBoundingClientRect();
+        this.width = _node.width;
+        this.height = _node.height;
+        this.parent.svg.node.attr("width", _node.width);
+        this.parent.svg.node.attr("height", _node.height);
+        this.parent.global.eventManager.dispatch(EventType.RESIZE_WINDOW, _node);
+        return this;
+    }
+}

package/src/scss/lib.scss

@@ -0,0 +1,10 @@
+@mixin stroke-width($param: 4) {
+  stroke-width: #{$param}px;
+}
+
+@mixin trans($duration:0.5s,$delay:0.2s) {
+  transition-property: opacity;
+  transition-duration: $duration;
+  transition-delay: $delay;
+  transition-timing-function: ease-in-out;
+}