@alisaitteke/seatmap-canvas 2.0.0

package/src/scss/style.scss

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

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "outDir": "./buildc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "es2015",
+      "dom"
+    ]
+  },
+  "files": [
+    "src/lib/canvas.index.ts"
+  ]
+}

package/webpack.environments/development.js

@@ -0,0 +1,58 @@
+const path = require('path');
+
+module.exports = {
+    mode: "production",
+    devtool: "inline-source-map",
+    context: __dirname,
+    entry: {
+        "main": path.resolve(__dirname, '../src', "lib", "canvas.index.ts")
+    },
+    resolve: {
+        // Add `.ts` and `.tsx` as a resolvable extension.
+        extensions: [".ts", ".tsx", ".js"]
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        filename: 'seatmap.canvas.js',
+    },
+    module: {
+        rules: [
+            {test: /\.tsx?$/, loader: "ts-loader"},
+            {
+                test: /\.txt$/,
+                use: 'raw-loader'
+            }, {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    // Creates `style` nodes from JS strings
+                    "style-loader",
+                    // Translates CSS into CommonJS
+                    "css-loader",
+                    // Compiles Sass to CSS
+                    "sass-loader",
+                ],
+            },
+        ],
+    },
+    watch: true,
+    watchOptions: {
+        ignored: ['src/**/*.js', 'node_modules', 'dist', 'examples']
+    },
+    devServer: {
+        liveReload: true,
+        client: {
+            reconnect: true,
+            progress: true,
+            overlay: {
+                errors: true,
+                warnings: false,
+            }
+        },
+        static: {
+            directory: path.join(__dirname, '../examples')
+        },
+        open: true,
+        compress: true,
+        port: 1967
+    },
+};

package/webpack.environments/production.js

@@ -0,0 +1,52 @@
+const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const context = path.resolve(__dirname, '../src');
+
+const PACKAGE = require(path.resolve(__dirname, '../package.json'));
+const version = PACKAGE.version;
+
+module.exports = {
+    mode: "production",
+    context: context,
+    entry: {
+        "seatmap.canvas": path.resolve(context, 'lib', 'canvas.index.ts')
+    },
+    resolve: {
+        // Add `.ts` and `.tsx` as a resolvable extension.
+        extensions: [".ts", ".tsx", ".js"]
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        filename: `[name].${version}.js`,
+        clean: true
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: "ts-loader",
+                exclude: /node_modules/,
+            },
+
+            {
+                test: /\.scss$/,
+                exclude: /node_modules/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "postcss-loader",
+                    "sass-loader",
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: `[name].${version}.css`,
+            chunkFilename: "[id].css"
+        })
+    ],
+};