@konoui/mjimage 0.0.13 → 0.0.14

package/dist/mjs/lib/constants.d.ts

@@ -2,6 +2,8 @@ export declare const FONT_FAMILY = "MS Gothic, sans-serif";
 export declare const TILE_CONTEXT: {
     WIDTH: number;
     HEIGHT: number;
+    TEXT_SCALE: number;
+    BLOCK_MARGIN_SCALE: number;
 };
 export declare const TABLE_CONTEXT: {
     BASE: number;

package/dist/mjs/lib/constants.js

@@ -3,7 +3,12 @@ var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WIND_MAP = exports.ROUND_MAP = exports.WIND = exports.BLOCK = exports.OPERATOR = exports.TYPE = exports.INPUT_SEPARATOR = exports.TABLE_CONTEXT = exports.TILE_CONTEXT = exports.FONT_FAMILY = void 0;
 exports.FONT_FAMILY = "MS Gothic, sans-serif";
-exports.TILE_CONTEXT = { WIDTH: 66, HEIGHT: 90 };
+exports.TILE_CONTEXT = {
+    WIDTH: 66,
+    HEIGHT: 90,
+    TEXT_SCALE: 0.8,
+    BLOCK_MARGIN_SCALE: 0.3,
+};
 exports.TABLE_CONTEXT = { BASE: 40 };
 exports.INPUT_SEPARATOR = ",";
 exports.TYPE = {

package/dist/mjs/lib/image.d.ts

@@ -9,17 +9,15 @@ export interface ImageHelperConfig {
 declare class BaseHelper {
     readonly tileWidth: number;
     readonly tileHeight: number;
-    readonly diffTileHeightWidth: number;
-    readonly textWidth: number;
     readonly image_host_path: string;
     readonly image_host_url: string;
     readonly scale: number;
     readonly svgSprite: boolean;
     constructor(props?: ImageHelperConfig);
+    protected getDiffTileHeightWidth(t: Tile): number;
     private image;
     createImage(tile: Tile, x: number, y: number): Image | Use;
     createTextImage(tile: Tile, x: number, y: number, t: string): G;
-    createStackImage(baseTile: Tile, upTile: Tile, x: number, y: number): G;
     createRotate90Image(tile: Tile, x: number, y: number, adjustY?: boolean): G;
     createStick(v: 100 | 1000): Image | Use;
     static buildID(tile: Tile | 100 | 1000): string;
@@ -27,7 +25,7 @@ declare class BaseHelper {
 }
 export declare class ImageHelper extends BaseHelper {
     readonly blockMargin: number;
-    createBlockHandDiscard(tiles: Tile[]): G;
+    createBlockHandDiscard(block: Block): G;
     createBlockPonChiKan(block: Block): G;
 }
 export declare const createHand: (helper: ImageHelper, blocks: Block[]) => {
@@ -35,6 +33,8 @@ export declare const createHand: (helper: ImageHelper, blocks: Block[]) => {
     width: number;
     height: number;
 };
-export declare const drawBlocks: (svg: Svg, blocks: Block[], config?: ImageHelperConfig) => void;
+export declare const drawBlocks: (svg: Svg, blocks: Block[], config?: ImageHelperConfig, params?: {
+    responsive: boolean;
+}) => void;
 export declare const optimizeSVG: (draw: Svg) => void;
 export {};

package/dist/mjs/lib/image.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -32,10 +43,12 @@ var BaseHelper = (function () {
         this.image_host_url = (_c = props.imageHostUrl) !== null && _c !== void 0 ? _c : "";
         this.tileWidth = constants_1.TILE_CONTEXT.WIDTH * this.scale;
         this.tileHeight = constants_1.TILE_CONTEXT.HEIGHT * this.scale;
-        this.textWidth = this.tileWidth * 0.8;
-        this.diffTileHeightWidth = (this.tileHeight - this.tileWidth) / 2;
         this.svgSprite = (_d = props.svgSprite) !== null && _d !== void 0 ? _d : false;
     }
+    BaseHelper.prototype.getDiffTileHeightWidth = function (t) {
+        var size = t.imageSize(this.scale);
+        return (size.baseHeight - size.baseWidth) / 2;
+    };
     BaseHelper.prototype.image = function (tile) {
         var img = new svg_js_1.Image().load(this.buildURL(tile));
         if (this.svgSprite) {
@@ -47,21 +60,22 @@ var BaseHelper = (function () {
         return img;
     };
     BaseHelper.prototype.createImage = function (tile, x, y) {
+        var size = tile.imageSize(this.scale);
         var image = this.image(tile)
             .dx(x)
             .dy(y)
-            .size(this.tileWidth, this.tileHeight);
+            .size(size.baseWidth, size.baseHeight);
         return image;
     };
     BaseHelper.prototype.createTextImage = function (tile, x, y, t) {
         var image = this.createImage(tile, x, y);
-        var fontSize = this.tileHeight * 0.2;
-        var textX = this.tileWidth;
-        var textY = this.tileHeight;
+        var size = tile.imageSize(this.scale);
+        var fontSize = size.baseHeight * 0.2;
+        var textX = size.baseWidth;
+        var textY = size.baseHeight;
         var text = new svg_js_1.Text().text(t);
         text
-            .width(this.tileWidth)
-            .height(this.tileHeight)
+            .size(size.baseWidth, size.baseHeight)
             .font({
             family: constants_1.FONT_FAMILY,
             size: fontSize,
@@ -72,19 +86,14 @@ var BaseHelper = (function () {
         g.add(image).add(text).translate(x, y);
         return g;
     };
-    BaseHelper.prototype.createStackImage = function (baseTile, upTile, x, y) {
-        var base = this.createRotate90Image(baseTile, 0, 0, true);
-        var up = this.createRotate90Image(upTile, 0, this.tileWidth, true);
-        var g = new svg_js_1.G().translate(x, y).add(base).add(up);
-        return g;
-    };
     BaseHelper.prototype.createRotate90Image = function (tile, x, y, adjustY) {
         if (adjustY === void 0) { adjustY = false; }
         var image = this.createImage(tile, 0, 0);
-        var centerX = this.tileWidth / 2;
-        var centerY = this.tileHeight / 2;
-        var translatedX = x + this.diffTileHeightWidth;
-        var translatedY = adjustY ? y - this.diffTileHeightWidth : y;
+        var size = tile.imageSize(this.scale);
+        var centerX = size.baseWidth / 2;
+        var centerY = size.baseHeight / 2;
+        var translatedX = x + this.getDiffTileHeightWidth(tile);
+        var translatedY = adjustY ? y - this.getDiffTileHeightWidth(tile) : y;
         var g = new svg_js_1.G();
         g.add(image)
             .translate(translatedX, translatedY)
@@ -114,23 +123,22 @@ var ImageHelper = (function (_super) {
     __extends(ImageHelper, _super);
     function ImageHelper() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.blockMargin = _this.tileWidth * 0.3;
+        _this.blockMargin = constants_1.TILE_CONTEXT.WIDTH * constants_1.TILE_CONTEXT.BLOCK_MARGIN_SCALE * _this.scale;
         return _this;
     }
-    ImageHelper.prototype.createBlockHandDiscard = function (tiles) {
+    ImageHelper.prototype.createBlockHandDiscard = function (block) {
         var g = new svg_js_1.G();
         var pos = 0;
-        for (var _i = 0, tiles_1 = tiles; _i < tiles_1.length; _i++) {
-            var t = tiles_1[_i];
-            if (t.has(constants_1.OPERATOR.HORIZONTAL)) {
-                var img_1 = this.createRotate90Image(t, pos, this.diffTileHeightWidth);
-                g.add(img_1);
-                pos += this.tileHeight;
-                continue;
-            }
-            var img = this.createImage(t, pos, 0);
+        for (var _i = 0, _a = block.tiles; _i < _a.length; _i++) {
+            var t = _a[_i];
+            var size = t.imageSize(this.scale);
+            var f = t.has(constants_1.OPERATOR.HORIZONTAL)
+                ? this.createRotate90Image.bind(this)
+                : this.createImage.bind(this);
+            var y = t.has(constants_1.OPERATOR.HORIZONTAL) ? this.getDiffTileHeightWidth(t) : 0;
+            var img = f(t, pos, y);
             g.add(img);
-            pos += this.tileWidth;
+            pos += size.width;
         }
         return g;
     };
@@ -139,52 +147,53 @@ var ImageHelper = (function (_super) {
         var pos = 0;
         var g = new svg_js_1.G();
         if (block.type == constants_1.BLOCK.SHO_KAN) {
-            var diff = this.tileWidth * 2 - this.tileHeight;
             var lastIdx = idx;
-            var i = 0;
-            for (var _i = 0, _a = block.tiles; _i < _a.length; _i++) {
-                var t = _a[_i];
-                if (t.has(constants_1.OPERATOR.HORIZONTAL))
+            for (var i = 0; i < block.tiles.length; i++)
+                if (block.tiles[i].has(constants_1.OPERATOR.HORIZONTAL))
                     lastIdx = i;
-                i++;
-            }
-            for (var i_1 = 0; i_1 < block.tiles.length; i_1++) {
-                if (i_1 == lastIdx)
+            for (var i = 0; i < block.tiles.length; i++) {
+                var size = block.tiles[i].imageSize(this.scale);
+                if (i == lastIdx)
                     continue;
-                if (i_1 == idx) {
-                    var img_2 = this.createStackImage(block.tiles[idx], block.tiles[lastIdx], pos, 0);
-                    pos += this.tileHeight;
-                    g.add(img_2);
+                if (i == idx) {
+                    var baseTile = block.tiles[idx];
+                    var upperTile = block.tiles[lastIdx];
+                    var size_1 = baseTile.imageSize(this.scale);
+                    var baseImg = this.createRotate90Image(baseTile, 0, 0, true);
+                    var upImg = this.createRotate90Image(upperTile, 0, size_1.height, true);
+                    g.add(new svg_js_1.G().translate(pos, 0).add(baseImg).add(upImg));
+                    pos += size_1.width;
                     continue;
                 }
-                var img = this.createImage(block.tiles[i_1], pos, diff);
-                pos += this.tileWidth;
+                var diff = size.width * 2 - size.height;
+                var img = this.createImage(block.tiles[i], pos, diff);
+                pos += size.width;
                 g.add(img);
             }
             return g;
         }
         if (block.type == constants_1.BLOCK.CHI) {
-            var img = this.createRotate90Image(block.tiles[idx], pos, this.diffTileHeightWidth);
-            pos += this.tileHeight;
+            var img = this.createRotate90Image(block.tiles[idx], pos, this.getDiffTileHeightWidth(block.tiles[idx]));
+            pos += block.tiles[idx].imageSize(this.scale).width;
             g.add(img);
             for (var i = 0; i < block.tiles.length; i++) {
                 if (i == idx)
                     continue;
-                var img_3 = this.createImage(block.tiles[i], pos, 0);
-                pos += this.tileWidth;
-                g.add(img_3);
+                var size = block.tiles[i].imageSize(this.scale);
+                var img_1 = this.createImage(block.tiles[i], pos, 0);
+                pos += size.width;
+                g.add(img_1);
             }
             return g;
         }
         for (var i = 0; i < block.tiles.length; i++) {
-            if (i == idx) {
-                var img_4 = this.createRotate90Image(block.tiles[i], pos, this.diffTileHeightWidth);
-                pos += this.tileHeight;
-                g.add(img_4);
-                continue;
-            }
-            var img = this.createImage(block.tiles[1], pos, 0);
-            pos += this.tileWidth;
+            var f = i == idx
+                ? this.createRotate90Image.bind(this)
+                : this.createImage.bind(this);
+            var y = i == idx ? this.getDiffTileHeightWidth(block.tiles[i]) : 0;
+            var size = block.tiles[i].imageSize(this.scale);
+            var img = f(block.tiles[i], pos, y);
+            pos += size.width;
             g.add(img);
         }
         return g;
@@ -194,80 +203,62 @@ var ImageHelper = (function (_super) {
 exports.ImageHelper = ImageHelper;
 var getBlockCreators = function (h) {
     var _a;
+    var scale = h.scale;
     var lookup = (_a = {},
         _a[constants_1.BLOCK.CHI] = function (block) {
-            var width = h.tileWidth * 2 + h.tileHeight;
-            var height = h.tileHeight;
+            var size = block.imageSize(scale);
             var g = h.createBlockPonChiKan(block);
-            return { width: width, height: height, e: g };
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.PON] = function (block) {
-            var width = h.tileWidth * 2 + h.tileHeight;
-            var height = h.tileHeight;
+            var size = block.imageSize(scale);
             var g = h.createBlockPonChiKan(block);
-            return { width: width, height: height, e: g };
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.DAI_KAN] = function (block) {
-            var width = h.tileWidth * 3 + h.tileHeight;
-            var height = h.tileHeight;
+            var size = block.imageSize(scale);
             var g = h.createBlockPonChiKan(block);
-            return { width: width, height: height, e: g };
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.SHO_KAN] = function (block) {
-            var width = h.tileWidth * 2 + h.tileHeight;
-            var height = h.tileWidth * 2;
+            var size = block.imageSize(scale);
             var g = h.createBlockPonChiKan(block);
-            return { width: width, height: height, e: g };
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.AN_KAN] = function (block) {
-            var width = h.tileWidth * 4;
-            var height = h.tileHeight;
+            var size = block.imageSize(scale);
             var zp = block.tiles.filter(function (v) {
                 return v.t !== constants_1.TYPE.BACK;
             });
             (0, assert_1.default)(zp != null && zp.length == 2);
-            var g = h.createBlockHandDiscard([
-                new parser_1.Tile(constants_1.TYPE.BACK, 0),
-                zp[0],
-                zp[1],
-                new parser_1.Tile(constants_1.TYPE.BACK, 0),
-            ]);
-            return { width: width, height: height, e: g };
+            var g = h.createBlockHandDiscard(new parser_1.BlockAnKan([zp[0], zp[1], zp[0], zp[1]]));
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.DORA] = function (block) {
-            var width = h.tileWidth + h.textWidth;
-            var height = h.tileHeight;
+            var size = block.imageSize(scale);
             var g = new svg_js_1.G();
             var img = h.createTextImage(block.tiles[0], 0, 0, "(ドラ)");
             g.add(img);
-            return { width: width, height: height, e: g };
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.TSUMO] = function (block) {
-            var width = h.tileWidth + h.textWidth;
-            var height = h.tileHeight;
+            var size = block.imageSize(scale);
             var g = new svg_js_1.G();
             var img = h.createTextImage(block.tiles[0], 0, 0, "(ツモ)");
             g.add(img);
-            return { width: width, height: height, e: g };
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.HAND] = function (block) {
-            var width = h.tileWidth * block.tiles.length;
-            var height = h.tileHeight;
-            var g = h.createBlockHandDiscard(block.tiles);
-            return { width: width, height: height, e: g };
+            var size = block.imageSize(scale);
+            var g = h.createBlockHandDiscard(block);
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.DISCARD] = function (block) {
-            var width = block.tiles
-                .map(function (v) { return (v.has(constants_1.OPERATOR.HORIZONTAL) ? h.tileHeight : h.tileWidth); })
-                .reduce(function (prev, v) { return prev + v; });
-            var height = h.tileHeight;
-            var g = h.createBlockHandDiscard(block.tiles);
-            return { width: width, height: height, e: g };
+            var size = block.imageSize(scale);
+            var g = h.createBlockHandDiscard(block);
+            return __assign(__assign({}, size), { e: g });
         },
         _a[constants_1.BLOCK.UNKNOWN] = function (block) {
-            var width = 0;
-            var height = 0;
-            var g = new svg_js_1.G();
             throw new Error("found unknown block");
         },
         _a[constants_1.BLOCK.PAIR] = function (block) {
@@ -283,39 +274,46 @@ var getBlockCreators = function (h) {
     return lookup;
 };
 var createHand = function (helper, blocks) {
+    var _a = blocks.reduce(function (acc, b) {
+        var size = b.imageSize(helper.scale);
+        var v = size.height > acc.maxHeight ? size.height : acc.maxHeight;
+        return { maxHeight: v, sumWidth: acc.sumWidth + size.width };
+    }, { maxHeight: 0, sumWidth: 0 }), maxHeight = _a.maxHeight, sumWidth = _a.sumWidth;
+    var viewBoxHeight = maxHeight;
+    var viewBoxWidth = sumWidth + (blocks.length - 1) * helper.blockMargin;
+    var params = {
+        viewBoxWidth: viewBoxWidth,
+        viewBoxHeight: viewBoxHeight,
+    };
     var creators = getBlockCreators(helper);
-    var baseHeight = helper.tileWidth;
-    var sumOfWidth = 0;
     var elms = [];
     for (var _i = 0, blocks_1 = blocks; _i < blocks_1.length; _i++) {
         var block = blocks_1[_i];
         var fn = creators[block.type];
         var elm = fn(block);
         elms.push(elm);
-        sumOfWidth += elm.width;
-        if (elm.height > baseHeight)
-            baseHeight = elm.height;
     }
-    var sizeHeight = baseHeight;
-    var sizeWidth = sumOfWidth + (blocks.length - 1) * helper.blockMargin;
     var hand = new svg_js_1.G();
     var pos = 0;
-    for (var _a = 0, elms_1 = elms; _a < elms_1.length; _a++) {
-        var elm = elms_1[_a];
-        var diff = baseHeight - elm.height;
+    for (var _b = 0, elms_1 = elms; _b < elms_1.length; _b++) {
+        var elm = elms_1[_b];
+        var diff = viewBoxHeight - elm.height;
         var g = new svg_js_1.G().translate(pos, diff);
         g.add(elm.e);
         hand.add(g);
         pos += elm.width + helper.blockMargin;
     }
-    return { e: hand, width: sizeWidth, height: sizeHeight };
+    return { e: hand, width: viewBoxWidth, height: viewBoxHeight };
 };
 exports.createHand = createHand;
-var drawBlocks = function (svg, blocks, config) {
+var drawBlocks = function (svg, blocks, config, params) {
     if (config === void 0) { config = {}; }
+    if (params === void 0) { params = { responsive: false }; }
     var helper = new ImageHelper(config);
     var hand = (0, exports.createHand)(helper, blocks);
-    svg.size(hand.width, hand.height);
+    if (!params.responsive)
+        svg.size(hand.width, hand.height);
+    svg.viewbox(0, 0, hand.width, hand.height);
     svg.add(hand.e);
 };
 exports.drawBlocks = drawBlocks;

package/dist/mjs/lib/mjimage.d.ts

@@ -3,6 +3,7 @@ interface InitializeConfig extends Omit<ImageHelperConfig, "scale"> {
     querySelector?: string | string[];
     scale?: number;
     tableScale?: number;
+    responsive?: boolean;
 }
 export declare class mjimage {
     static initialize: (props?: InitializeConfig) => void;

package/dist/mjs/lib/mjimage.js

@@ -20,6 +20,7 @@ var constants_1 = require("./constants");
 var svg_js_1 = require("@svgdotjs/svg.js");
 var defaultQuerySelector = ".mjimage";
 var defaultScale = 1.6;
+var defaultResponsive = false;
 var defaultSvgSprite = false;
 var tableRegex = /^\s*table/;
 var minPaiHeight = Math.min(constants_1.TILE_CONTEXT.WIDTH, constants_1.TILE_CONTEXT.HEIGHT);
@@ -30,13 +31,14 @@ var mjimage = (function () {
     function mjimage() {
     }
     mjimage.initialize = function (props) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (props === void 0) { props = {}; }
         console.debug("initializing....");
         var querySelector = (_a = props.querySelector) !== null && _a !== void 0 ? _a : defaultQuerySelector;
         var handScale = (_b = props.scale) !== null && _b !== void 0 ? _b : defaultScale;
         var tableScale = (_c = props.tableScale) !== null && _c !== void 0 ? _c : handScale;
-        var svgSprite = (_d = props.svgSprite) !== null && _d !== void 0 ? _d : defaultSvgSprite;
+        var responsive = (_d = props.responsive) !== null && _d !== void 0 ? _d : defaultResponsive;
+        var svgSprite = (_e = props.svgSprite) !== null && _e !== void 0 ? _e : defaultSvgSprite;
         if (typeof querySelector === "string")
             querySelector = [querySelector];
         var mtext = new measure_text_1.MeasureText();
@@ -60,12 +62,12 @@ var mjimage = (function () {
                     if (tableRegex.test(input)) {
                         var scale = calculateScale(tableScale, textHeight);
                         var fontCtx = mtext.measureTableFontContext(scale);
-                        (0, table_1.drawTable)(svg, input, __assign(__assign({}, props), { svgSprite: svgSprite, scale: scale }), fontCtx);
+                        (0, table_1.drawTable)(svg, input, __assign(__assign({}, props), { svgSprite: svgSprite, scale: scale }), fontCtx, { responsive: responsive });
                     }
                     else {
                         var scale = calculateScale(handScale, textHeight);
                         var blocks = new parser_1.Parser(input).parse();
-                        (0, image_1.drawBlocks)(svg, blocks, __assign(__assign({}, props), { svgSprite: svgSprite, scale: scale }));
+                        (0, image_1.drawBlocks)(svg, blocks, __assign(__assign({}, props), { svgSprite: svgSprite, scale: scale }), { responsive: responsive });
                     }
                     svg.addTo(target);
                 }

package/dist/mjs/lib/parser.d.ts

@@ -16,6 +16,12 @@ export declare class Tile {
     remove(op: Operator): Tile;
     isNum(): boolean;
     equals(t: Tile, ignoreRed?: boolean): boolean;
+    imageSize(scale: number): {
+        width: number;
+        height: number;
+        baseWidth: number;
+        baseHeight: number;
+    };
 }
 type BLOCK = (typeof BLOCK)[keyof typeof BLOCK];
 export declare class Block {
@@ -25,9 +31,12 @@ export declare class Block {
     toString(): string;
     is(type: BLOCK): boolean;
     isCalled(): boolean;
-    equals(b: Block): boolean;
     minTile(): Tile;
     clone(): Block | BlockChi | BlockPon | BlockAnKan | BlockDaiKan | BlockShoKan | BlockPair | BlockSet | BlockIsolated;
+    imageSize(scale: number): {
+        width: number;
+        height: number;
+    };
 }
 export declare class BlockChi extends Block {
     constructor(tiles: [Tile, Tile, Tile]);

package/dist/mjs/lib/parser.js

@@ -97,6 +97,16 @@ var Tile = (function () {
             ok || (ok = (this.n == 5 && t.n == 0) || (this.n == 0 && t.n == 5));
         return this.t == t.t && ok;
     };
+    Tile.prototype.imageSize = function (scale) {
+        var h = parseFloat((constants_1.TILE_CONTEXT.HEIGHT * scale).toPrecision(5));
+        var w = parseFloat((constants_1.TILE_CONTEXT.WIDTH * scale).toPrecision(5));
+        var size = this.has(constants_1.OPERATOR.HORIZONTAL)
+            ? { width: h, height: w, baseWidth: w, baseHeight: h }
+            : { width: w, height: h, w: w, baseWidth: w, baseHeight: h };
+        if (this.has(constants_1.OPERATOR.TSUMO) || this.has(constants_1.OPERATOR.DORA))
+            size.width += w * constants_1.TILE_CONTEXT.TEXT_SCALE;
+        return size;
+    };
     return Tile;
 }());
 exports.Tile = Tile;
@@ -152,21 +162,6 @@ var Block = (function () {
             constants_1.BLOCK.SHO_KAN.toString(),
         ].includes(this.type.toString());
     };
-    Block.prototype.equals = function (b) {
-        if (this.tiles.length != b.tiles.length)
-            return false;
-        var ab = this.tiles;
-        var bb = b.tiles;
-        if (this.is(constants_1.BLOCK.CHI) || b.is(constants_1.BLOCK.CHI)) {
-            ab = b.clone().tiles.sort(exports.tileSortFunc);
-            bb = this.clone().tiles.sort(exports.tileSortFunc);
-        }
-        for (var i = 0; i < b.tiles.length; i++) {
-            if (!ab[i].equals(bb[i], true))
-                return false;
-        }
-        return true;
-    };
     Block.prototype.minTile = function () {
         if (this.is(constants_1.BLOCK.CHI))
             return this.clone().tiles.sort(exports.tileSortFunc)[0];
@@ -177,6 +172,20 @@ var Block = (function () {
         var tiles = this.tiles.map(function (t) { return new Tile(t.t, t.n, __spreadArray([], t.ops, true)); });
         return (0, exports.blockWrapper)(tiles, this.type);
     };
+    Block.prototype.imageSize = function (scale) {
+        var bh = this.tiles[0].imageSize(scale).baseHeight;
+        var bw = this.tiles[0].imageSize(scale).baseWidth;
+        if (this.is(constants_1.BLOCK.SHO_KAN))
+            return { width: bw * 2 + bh, height: Math.max(bw * 2, bh) };
+        var maxHeight = this.tiles.reduce(function (max, t) {
+            var h = t.imageSize(scale).height;
+            return h > max ? h : max;
+        }, 0);
+        var sumWidth = this.tiles.reduce(function (sum, t) {
+            return sum + t.imageSize(scale).width;
+        }, 0);
+        return { width: sumWidth, height: maxHeight };
+    };
     return Block;
 }());
 exports.Block = Block;
@@ -203,8 +212,10 @@ var BlockAnKan = (function (_super) {
     }
     BlockAnKan.prototype.toString = function () {
         var tiles = this.tiles.map(function (t) { return t.clone(); });
-        tiles[1] = new Tile(constants_1.TYPE.BACK, 0);
-        tiles[2] = new Tile(constants_1.TYPE.BACK, 0);
+        if (!tiles.some(function (v) { return v.t == constants_1.TYPE.BACK; })) {
+            tiles[0] = new Tile(constants_1.TYPE.BACK, 0);
+            tiles[3] = new Tile(constants_1.TYPE.BACK, 0);
+        }
         return tiles.reduce(function (s, t) {
             return "".concat(s).concat(t.toString());
         }, "");

package/dist/mjs/lib/table.d.ts

@@ -7,4 +7,6 @@ export declare const createTable: (helper: ImageHelper, fontCtx: FontContext, ha
     width: number;
     height: number;
 };
-export declare const drawTable: (svg: Svg, tableInput: string, config: ImageHelperConfig | undefined, fontCtx: FontContext) => void;
+export declare const drawTable: (svg: Svg, tableInput: string, config: ImageHelperConfig | undefined, fontCtx: FontContext, params?: {
+    responsive: boolean;
+}) => void;

package/dist/mjs/lib/table.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawTable = exports.createTable = void 0;
+var parser_1 = require("./parser");
 var image_1 = require("./image");
 var svg_js_1 = require("@svgdotjs/svg.js");
 var table_parser_1 = require("./table-parser");
+var constants_1 = require("./constants");
 var splitTiles = function (input) {
     var chunkSize = 6;
     var result = [];
@@ -43,7 +45,9 @@ var handleDiscard = function (tiles, helper) {
     for (var i = 0; i < chunks.length; i++) {
         var tiles_1 = chunks[i];
         var posY = i * helper.tileHeight;
-        var e = helper.createBlockHandDiscard(tiles_1).translate(0, posY);
+        var e = helper
+            .createBlockHandDiscard(new parser_1.Block(tiles_1, constants_1.BLOCK.DISCARD))
+            .translate(0, posY);
         g.add(e);
     }
     return {
@@ -230,13 +234,16 @@ var createTable = function (helper, fontCtx, handsProps, discardsProps, scoreBoa
     return { e: g, width: hands.width, height: hands.height };
 };
 exports.createTable = createTable;
-var drawTable = function (svg, tableInput, config, fontCtx) {
+var drawTable = function (svg, tableInput, config, fontCtx, params) {
     if (config === void 0) { config = {}; }
+    if (params === void 0) { params = { responsive: false }; }
     var helper = new image_1.ImageHelper(config);
     var ctx = fontCtx;
     var _a = (0, table_parser_1.parse)(tableInput), discards = _a.discards, hands = _a.hands, scoreBoard = _a.scoreBoard;
     var table = (0, exports.createTable)(helper, ctx, hands, discards, scoreBoard);
-    svg.size(table.width, table.height);
+    if (!params.responsive)
+        svg.size(table.width, table.height);
+    svg.viewbox(0, 0, table.width, table.height);
     svg.add(table.e);
 };
 exports.drawTable = drawTable;

package/dist/mjs/svg/_0.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="66" height="90" baseProfile="tiny" version="1.2"><path fill="#c73" d="M0 0h66v90H0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" version="1.2" viewBox="0 0 66 90"><path fill="#c73" d="M0 0h66v90H0z"/></svg>