@alisaitteke/seatmap-canvas 2.1.0 → 2.3.0

package/src/lib/svg/svg.base.ts

@@ -1,6 +1,6 @@
 /*
  * $project.fileName
- * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
  */
 
 import Block from "./stage/blocks/block-item/block-item.index";
@@ -11,19 +11,21 @@ import {mouse as d3Mouse} from 'd3-selection'
 
 export default class SvgBase {
 
-    public node: any = null;
-    public domClass: string = null;
-    public domTag: string = null;
-    public eventCode: string = null;
+    public node: any | null = null;
+    public domClass: string | null;
+    public domTag: string | null;
+    public eventCode: string | null;
     public autoGenerate: boolean = false;
     public tags: Array<string>;
 
     public child_items: Array<any> | any;
 
     public dom_attrs: Array<any>;
-    public dom_classeds: Array<any>;
+    public dom_classes: Array<any>;
 
-    public child_index: number = null;
+    public child_index: number | null = null;
+
+    public domText: string | null = null;
 
 
     public global: GlobalModel;
@@ -31,7 +33,7 @@ export default class SvgBase {
     constructor(public parent: any) {
         this.child_items = [];
         this.dom_attrs = [];
-        this.dom_classeds = [];
+        this.dom_classes = [];
         this.tags = [];
 
         this.eventCode = null;
@@ -79,14 +81,17 @@ export default class SvgBase {
             let _dom_attr = this.dom_attrs[di];
             this.node.attr(_dom_attr.name, _dom_attr.value)
         }
+        if(this.domText){
+            this.node.text(this.domText)
+        }
 
         if (this.domClass) {
             this.node.classed(this.domClass, true);
         }
 
 
-        for (let ci = 0; ci < this.dom_classeds.length; ci++) {
-            let _dom_class = this.dom_classeds[ci];
+        for (let ci = 0; ci < this.dom_classes.length; ci++) {
+            let _dom_class = this.dom_classes[ci];
             this.node.classed(_dom_class.name, _dom_class.value);
         }
 
@@ -101,6 +106,12 @@ export default class SvgBase {
         return this;
     }
 
+    public text(value: string): this {
+        // this.text(value)
+        this.domText = value;
+        return this;
+    }
+
     public addChild(item: any, attrs?: any, replace: boolean = true): this {
         for (let key in attrs) {
             let value = attrs[key];
@@ -115,7 +126,7 @@ export default class SvgBase {
     }
 
     public classed(className: string, value: boolean = true): this {
-        this.dom_classeds.push({
+        this.dom_classes.push({
             name: className,
             value: value
         });
@@ -143,27 +154,28 @@ export default class SvgBase {
 
     public updateEvents(recursive: boolean = false): this {
         let _self = this;
+        let allowed_event_types: Array<string> = ["click", "mousever", "mouseleave", "mouseout", "mouseenter", "mousemove", "keydown", "keypress", "mousedown", "mouseup", "touchstart"];
+        if (this.eventCode) {
+            for (let i = 0; i < this.global.eventManager.events.length; i++) {
+                let _event = this.global.eventManager.events[i];
+                let _split = _event.type.toString().split(".");
+                if (_split[0].toLowerCase() === this.eventCode.toLowerCase() && allowed_event_types.indexOf(_split[1].toLowerCase()) !== -1 && typeof _split[1] !== "undefined") {
+                    this.node.on(_split[1].toLowerCase() + ".globalevent", function (item: EventObject) {
+                        let _mouse = d3Mouse(_self.parent.node.node());
+                        _event.fn(_self, item, _mouse);
+                    })
+                }
+            }
 
-        let allowed_event_types: Array<string> = ["click", "mousever", "mouseleave", "mouseout", "mouseenter", "mousemove", "keydown", "keypress", "mousedown", "mouseup","touchstart"];
-
-        for (let i = 0; i < this.global.eventManager.events.length; i++) {
-            let _event = this.global.eventManager.events[i];
-            let _split = _event.type.toString().split(".");
-            if (_split[0].toLowerCase() === this.eventCode.toLowerCase() && allowed_event_types.indexOf(_split[1].toLowerCase()) !== -1 && typeof _split[1] !== "undefined") {
-                this.node.on(_split[1].toLowerCase() + ".globalevent", function (item: EventObject) {
-                    let _mouse = d3Mouse(_self.parent.node.node());
-                    _event.fn(_self, item, _mouse);
+            if (recursive && this.child_items.length > 0) {
+                this.child_items.map((child_item: any) => {
+                    if (typeof child_item.updateEvents === "function") {
+                        child_item.updateEvents(true);
+                    }
                 })
             }
         }
 
-        if (recursive && this.child_items.length > 0) {
-            this.child_items.map((child_item: any) => {
-                if (typeof child_item.updateEvents === "function") {
-                    child_item.updateEvents(true);
-                }
-            })
-        }
 
         return this;
     }
@@ -183,7 +195,7 @@ export default class SvgBase {
         return this.tags.indexOf(tag) !== -1
     }
 
-    public getChilds(type: string = null): Array<any> {
+    public getChilds(type: string | null = null): Array<any> {
         if (type === null) {
             return this.child_items.filter((item: any) => item.constructor.name === type);
         } else {

package/src/lib/svg/svg.index.ts

@@ -1,6 +1,6 @@
 /*
  * $project.fileName
- * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
  */
 
 import Stage from "./stage/stage.index";

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

@@ -1,6 +1,6 @@
 /*
  * $project.fileName
- * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
  */
 
 

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

@@ -1,6 +1,6 @@
 /*
  * $project.fileName
- * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
  */
 
 
@@ -15,7 +15,7 @@ import Tooltip from "../tooltip";
 })
 export default class TooltipTitle extends SvgBase {
 
-    private _title: Array<string>;
+    title: Array<string>;
 
     constructor(public parent: Tooltip) {
         super(parent);
@@ -45,13 +45,4 @@ export default class TooltipTitle extends SvgBase {
             .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,6 +1,6 @@
 /*
  * $project.fileName
- * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
  */
 
 
@@ -28,7 +28,7 @@ export default class Tooltip extends SvgBase {
     public rect: TooltipRect;
     public title: TooltipTitle;
 
-    public activeSeat: SeatItem;
+    public activeSeat: SeatItem | null;
 
     constructor(public parent: Svg) {
         super(parent);
@@ -40,7 +40,7 @@ export default class Tooltip extends SvgBase {
 
         this.global.eventManager.addEventListener([EventType.MOUSEMOVE_SEAT], (seat: SeatItem) => {
             if (this.global.multi_select) return;
-            if (this.activeSeat !== seat) {
+            if (this.activeSeat !== seat && seat.item.title) {
                 this.activeSeat = seat;
                 this.setTitle(seat.item.title.split("\n"));
                 this.title.generateTitle();
@@ -79,6 +79,7 @@ export default class Tooltip extends SvgBase {
         this.parent.node.on("mousemove.seat", function () {
             if (_self.global.multi_select) return;
             if (_self.global.zoomManager.zoomLevel === ZoomLevel.SEAT && _self.activeSeat !== null) {
+                // @ts-ignore
                 let cor = d3Mouse(this);
 
                 let x = cor[0] - (_self.global.config.tooltip_style.width / 2);

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

@@ -1,6 +1,6 @@
 /*
  * $project.fileName
- * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
  */
 
 
@@ -24,7 +24,7 @@ export default class ZoomOutBg extends SvgBase {
                 .attr("width", win.width)
                 .attr("height", win.height)
                 .on("click.zoomout", () => {
-                    this.global.eventManager.dispatch(EventType.CLICK_ZOOMOUT, this);
+                    this.global.eventManager.dispatch(EventType.CLICK_ZOOM_OUT, this);
                 });
         })
     }

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

@@ -1,6 +1,6 @@
 /*
  * $project.fileName
- * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
  */
 
 import {mouse as d3Mouse, event as d3Event} from 'd3-selection'
@@ -49,20 +49,19 @@ export default class ZoomManager {
     };
 
     public activeBlocks: Array<any>;
-    public minZoom: number = null;
-    private _zoomLevel: ZoomLevel;
+    public minZoom: number | null = null;
+    public zoomLevel: ZoomLevel;
 
 
     constructor(private _self: SeatMapCanvas) {
-
         this.activeBlocks = [];
         this.zoomLevel = ZoomLevel.VENUE;
-
         this.dispatchZoomEvent();
     }
 
     public init() {
 
+        console.log('zoom init')
         this.calculateZoomLevels();
         this.zoomInit();
         // this._self.eventManager.addEventListener(EventType.UPDATE_BLOCK, (blocks: Array<BlockModel>) => {
@@ -85,6 +84,7 @@ export default class ZoomManager {
     }
 
     zoomInit() {
+        console.info('zoomInit')
         this.zoomTypes.normal = d3Zoom()
             .scaleExtent([this._self.config.min_zoom, this._self.config.max_zoom])
             .on("end", this.zoomEnd(this))
@@ -104,6 +104,7 @@ export default class ZoomManager {
     }
 
     zoomEnd(_self: this): any {
+        console.info('zoomEnd')
         return function () {
             let x = d3Event.transform.x;
             let y = d3Event.transform.y;
@@ -111,11 +112,12 @@ export default class ZoomManager {
             _self._self.svg.stage.node.interrupt().attr("transform", "translate(" + x + "," + y + ")scale(" + k + ")");
             _self.calculateActiveBlocks();
             _self.calculateZoomLevel(k);
-            _self.canvasScopeHandler();
+            // _self.canvasScopeHandler();
         }
     }
 
     animatedZoomEnd(_self: this): any {
+        console.info('animatedZoomEnd')
         return function () {
             let x = d3Event.transform.x;
             let y = d3Event.transform.y;
@@ -127,6 +129,7 @@ export default class ZoomManager {
     }
 
     animatedFastZoomEnd(_self: this): any {
+        console.info('animatedFastZoomEnd')
         return function () {
             let x = d3Event.transform.x;
             let y = d3Event.transform.y;
@@ -138,6 +141,7 @@ export default class ZoomManager {
     }
 
     zoomHand(_self: this): any {
+        console.info('zoomHand')
         return function () {
             let x = d3Event.transform.x;
             let y = d3Event.transform.y;
@@ -148,6 +152,7 @@ export default class ZoomManager {
     }
 
     zoomHandAnimated(_self: this): any {
+        console.info('zoomHandAnimated')
         return function () {
             let x = d3Event.transform.x;
             let y = d3Event.transform.y;
@@ -159,6 +164,7 @@ export default class ZoomManager {
     }
 
     zoomHandFastAnimated(_self: this): any {
+        console.info('zoomHandFastAnimated')
         return function () {
             let x = d3Event.transform.x;
             let y = d3Event.transform.y;
@@ -170,13 +176,14 @@ export default class ZoomManager {
     }
 
     calculateZoomLevel(k: number) {
+        console.info('calculateZoomLevel')
         let _levels = {
             seat: this._self.config.max_zoom - 0.2,
             block: this.zoomLevels.BLOCK.k,
             venue: this.zoomLevels.VENUE.k
         };
 
-        let _zoomLevel = null;
+        let _zoomLevel: ZoomLevel | null = null;
 
         let blocks_count = this._self.data.getBlocks().length;
 
@@ -191,7 +198,7 @@ export default class ZoomManager {
         }
 
         if (_zoomLevel !== this.zoomLevel) {
-            this.zoomLevel = _zoomLevel;
+            this.zoomLevel = _zoomLevel as ZoomLevel;
             this.dispatchZoomEvent();
         }
     }
@@ -216,6 +223,7 @@ export default class ZoomManager {
 
     public calculateZoomLevels(blocks: Array<BlockModel> = this._self.data.getBlocks()): this {
 
+        console.info('calculateZoomLevels')
         let _wm = this._self.windowManager;
         let _stage = _wm.stage;
 
@@ -241,8 +249,11 @@ export default class ZoomManager {
 
         });
 
-        this.scale.x = (_wm.width / _stage.width) - ((_wm.width / _stage.width) / 5);
-        this.scale.y = (_wm.height / _stage.height) - ((_wm.height / _stage.height) / 5);
+        if (_wm.width && _wm.height) {
+            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;
 
@@ -272,40 +283,46 @@ export default class ZoomManager {
         blocks.map((block: BlockModel) => {
             let _block_item = this._self.svg.stage.blocks.getBlock(block.id);
 
+            if (_block_item) {
+                let bound = _block_item.node.node().getBoundingClientRect();
+                let bbox = _block_item.node.node().getBBox();
 
-            let bound = _block_item.node.node().getBoundingClientRect();
-            let bbox = _block_item.node.node().getBBox();
+                block.bbox = bbox;
 
-            block.bbox = bbox;
+                if (this._self.windowManager.width && this._self.windowManager.height) {
+                    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;
 
-            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);
 
-            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;
 
-            k = k > this._self.config.max_zoom ? this._self.config.max_zoom : k;
+                    block.zoom_bbox = {
+                        x: x,
+                        y: y,
+                        k: 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;
 
-            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) {
 
-            if (overlapArea > 0) {
-                this.activeBlocks.push({
-                    block: _block_item,
-                    ratio: Number(ratio.toFixed(2))
-                });
+                        this.activeBlocks.push({
+                            block: _block_item,
+                            ratio: Number(ratio.toFixed(2))
+                        });
+                    }
+                }
             }
+
+
         });
 
         this.activeBlocks = this.activeBlocks.sort((a, b) => b.ratio - a.ratio);
@@ -341,9 +358,7 @@ export default class ZoomManager {
     }
 
     public zoomToBlock(id: string | number, animation: boolean = true, fastAnimated: boolean = false) {
-        let _block = this._self.data.getBlocks().find((block: BlockModel) => block.id === id);
-
-
+        let _block = this._self.data.getBlocks().find((block) => block.id.toString() === id.toString());
         if (_block) {
             if (animation) {
                 if (fastAnimated) {
@@ -370,6 +385,7 @@ export default class ZoomManager {
 
     public zoomToVenue(animation: boolean = true, fastAnimated: boolean = false) {
 
+        console.info('zoomToVenue')
         let x = this.zoomLevels.VENUE.x;
         let y = this.zoomLevels.VENUE.y;
         let k = this.zoomLevels.VENUE.k;
@@ -404,14 +420,6 @@ export default class ZoomManager {
     }
 
 
-    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);
@@ -428,13 +436,13 @@ export default class ZoomManager {
     }
 
     public getActiveZoom() {
-        return this.zoomLevels[this._zoomLevel];
+        return this.zoomLevels[this.zoomLevel];
     }
 
     private dispatchZoomEvent() {
         this._self.eventManager.dispatch(EventType.ZOOM_LEVEL_CHANGE, {
-            level: this._zoomLevel,
-            values: this.getZoomLevelValues(this._zoomLevel)
+            level: this.zoomLevel,
+            values: this.getZoomLevelValues(this.zoomLevel)
         });
     }
 }

package/src/lib/window.manager.ts

@@ -1,6 +1,6 @@
 /*
  * Seatmap-canvas
- * https://github.com/seatmap/canvas Copyright 2022 Ali Sait TEKE
+ * https://github.com/alisaitteke/seatmap-canvas Copyright 2022 Ali Sait TEKE
  */
 import {select as d3Select} from 'd3-selection'
 
@@ -11,8 +11,8 @@ declare var window: any;
 
 export default class WindowManager {
 
-    public width: number = null;
-    public height: number = null;
+    public width: number | null = null;
+    public height: number | null = null;
 
     public stage: any = {
         width: null,

package/tsconfig.json

@@ -1,28 +1,32 @@
 {
-  "compileOnSave": false,
   "compilerOptions": {
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "module": "ESNext",
     "baseUrl": "./",
-    "module": "commonjs",
-    "noImplicitAny": true,
-    "removeComments": true,
-    "preserveConstEnums": true,
-    "outDir": "./buildc",
+    "declarationDir": "types",
     "sourceMap": true,
-    "declaration": false,
+    "outDir": "dist",
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
+    "emitDeclarationOnly": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "emitDecoratorMetadata": true,
+    "strictPropertyInitialization": false,
+    "preserveConstEnums": true,
+    "declaration": true,
+    "noImplicitAny": true,
     "typeRoots": [
       "node_modules/@types"
-    ],
-    "lib": [
-      "es2017",
-      "es2015",
-      "dom"
     ]
   },
-  "files": [
-    "src/lib/canvas.index.ts"
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx"
   ]
-}
+}

package/dist/seatmap.canvas.2.0.1-0.css

@@ -1 +0,0 @@
-.multi-select-enable .seatmap-svg .stage .blocks .block{cursor:crosshair}.multi-select-enable .seatmap-svg .stage .blocks .block .masks .seat-level-mask{cursor:crosshair !important}.multi-select-enable .seatmap-svg .stage .blocks .block .seats .seat{cursor:crosshair}.multi-select-enable .seatmap-svg .stage .blocks .block .seats .seat.selected{cursor:crosshair}.seatmap-svg{position:relative;width:100%;height:100%}.seatmap-svg.zoom-level-SEAT .stage .blocks .block .masks .seat-level-mask{cursor:none}.seatmap-svg.zoom-level-BLOCK .stage .blocks .block .masks .seat-level-mask{cursor:none}.seatmap-svg.zoom-level-VENUE .stage .blocks .block .masks .seat-level-mask{cursor:none}.seatmap-svg .zoom-out-bg{cursor:zoom-out;fill:rgba(0,0,0,0)}.seatmap-svg .stage .blocks .block .bounds .block-hull-border{stroke-linejoin:round;opacity:.5}.seatmap-svg .stage .blocks .block .bounds .block-hull{stroke-linejoin:round;cursor:move}.seatmap-svg .stage .blocks .block .masks .venue-level-mask{transition-property:opacity;transition-duration:.5s;transition-delay:.2s;transition-timing-function:ease-in-out;stroke-linejoin:round;opacity:1}.seatmap-svg .stage .blocks .block .masks .block-level-mask{transition-property:opacity;transition-duration:.5s;transition-delay:.2s;transition-timing-function:ease-in-out;stroke-linejoin:round;opacity:1}.seatmap-svg .stage .blocks .block .masks .seat-level-mask{transition-property:opacity;transition-duration:.5s;transition-delay:.2s;transition-timing-function:ease-in-out;stroke-linejoin:round;opacity:0}.seatmap-svg .stage .blocks .block .masks .bound-hide{transition-property:opacity;transition-duration:.5s;transition-delay:.2s;transition-timing-function:ease-in-out;pointer-events:none;opacity:0}.seatmap-svg .stage .blocks .block .info .title{text-anchor:middle;dominant-baseline:central}.seatmap-svg .stage .blocks .block .seats .seat{cursor:copy}.seatmap-svg .stage .blocks .block .seats .seat.selected{cursor:pointer}.seatmap-svg .stage .blocks .block .seats .seat .label-text{text-anchor:middle;dominant-baseline:central}.seatmap-svg .stage .blocks .block .labels .label circle{stroke:rgba(0,0,0,.2)}.seatmap-svg .stage .blocks .block .labels .label .label-text{text-anchor:middle;dominant-baseline:central}.seatmap-svg .stage .blocks .block .zoom-layers-container .zoom-layer-hull{stroke-width:80px;stroke-linejoin:round}@media(any-pointer: coarse){.seatmap-svg .stage .blocks .search-circle{display:none}}.seatmap-svg .stage .search-circle{opacity:0;transition-property:opacity;transition-duration:.2s;transition-delay:0;transition-timing-function:ease-in-out}.seatmap-svg .stage .search-circle .circle{fill:rgba(0,0,0,0);pointer-events:none;stroke:rgba(0,0,0,.4);stroke-width:4px}.seatmap-svg .stage .search-circle.hide{transition-property:opacity;transition-duration:.2s;transition-delay:0;transition-timing-function:ease-in-out;opacity:0}.seatmap-svg .stage .search-circle.show{transition-property:opacity;transition-duration:.2s;transition-delay:0;transition-timing-function:ease-in-out;opacity:1}.seatmap-svg .legend .legend-item circle{stroke:#adadad;stroke-width:1px}.seatmap-svg .legend .legend-item text{text-anchor:start;dominant-baseline:central}