@alisaitteke/seatmap-canvas 2.1.0 → 2.4.1

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

@@ -1,57 +0,0 @@
-/*
- * $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

@@ -1,92 +0,0 @@
-/*
- * $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

@@ -1,35 +0,0 @@
-/*
- * $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

@@ -1,440 +0,0 @@
-/*
- * $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

@@ -1,40 +0,0 @@
-/*
- * 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

@@ -1,10 +0,0 @@
-@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;
-}