@wcardinal/wcardinal-ui 0.431.0 → 0.433.0

package/dist/wcardinal-ui.cjs.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.431.0
+ Winter Cardinal UI v0.433.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -47852,7 +47852,7 @@ var ESnapperGrid = /** @class */ (function (_super) {
             this.size = serialized[2];
         }
         else {
-            this.visible = false;
+            this.visible = this._isVisibleDefault;
             this.size = serialized[1];
         }
     };
@@ -56317,9 +56317,21 @@ var loadThemeWhiteEnUsDiagram = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var toGridSize$1 = function (grid, width, height) {
+var toGridScale$1 = function (scale) {
+    if (scale <= 0 || 1 <= scale) {
+        return 1;
+    }
+    var target = 1 / scale;
+    var result = 1;
+    while (result < target && result < Number.MAX_SAFE_INTEGER) {
+        result <<= 1;
+    }
+    return result;
+};
+var toGridSize$1 = function (grid, width, height, scale) {
     var canvas = Math.max(width, height);
     if (0 < grid) {
+        grid *= toGridScale$1(scale);
         var minimum = canvas / 1000;
         for (var i = 0; i < 10 && grid < minimum; ++i) {
             grid *= 10;
@@ -66850,9 +66862,21 @@ var loadThemeDarkEnUsDiagram = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var toGridSize = function (grid, width, height) {
+var toGridScale = function (scale) {
+    if (scale <= 0 || 1 <= scale) {
+        return 1;
+    }
+    var target = 1 / scale;
+    var result = 1;
+    while (result < target && result < Number.MAX_SAFE_INTEGER) {
+        result <<= 1;
+    }
+    return result;
+};
+var toGridSize = function (grid, width, height, scale) {
     var canvas = Math.max(width, height);
     if (0 < grid) {
+        grid *= toGridScale(scale);
         var minimum = canvas / 1000;
         for (var i = 0; i < 10 && grid < minimum; ++i) {
             grid *= 10;
@@ -83814,7 +83838,8 @@ var DChartSelectionGridlineX = /** @class */ (function (_super) {
             var bounds = container.plotArea.getSelectionBoundsX();
             shape.transform.position.set(mappedX, bounds.y + bounds.height * 0.5);
             shape.size.set(0, bounds.height);
-            shape.visible = bounds.x <= mappedX && mappedX <= bounds.x + bounds.width;
+            var hw = shape.stroke.width * 0.5;
+            shape.visible = bounds.x <= mappedX + hw && mappedX - hw <= bounds.x + bounds.width;
             return true;
         }
         return false;
@@ -83841,7 +83866,8 @@ var DChartSelectionGridlineY = /** @class */ (function (_super) {
             var bounds = container.plotArea.getSelectionBoundsY();
             shape.transform.position.set(bounds.x + bounds.width * 0.5, mappedY);
             shape.size.set(bounds.width, 0);
-            shape.visible = bounds.y <= mappedY && mappedY <= bounds.y + bounds.height;
+            var hw = shape.stroke.width * 0.5;
+            shape.visible = bounds.y <= mappedY + hw && mappedY - hw <= bounds.y + bounds.height;
             return true;
         }
         return false;
@@ -87300,6 +87326,7 @@ var DDiagramCanvasEditorSnap = /** @class */ (function () {
     function DDiagramCanvasEditorSnap(parent, theme, options) {
         var _this = this;
         this._parent = parent;
+        this._isDirty = true;
         // Controller
         var controller = options.controller;
         this._controller = controller;
@@ -87315,49 +87342,84 @@ var DDiagramCanvasEditorSnap = /** @class */ (function () {
         parent.addChildAt(container, parent.children.length - 1);
         // Grid
         this._grid = this.toGrid(theme, options.grid);
+        this._gridParentWidth = parent.width;
+        this._gridParentHeight = parent.height;
+        this._gridParentScale = parent.scale.x;
+        this._gridSize = this.newGridSize();
         // Target
         this._target = this.toTarget(theme, options.target);
     }
     DDiagramCanvasEditorSnap.prototype.toGrid = function (theme, options) {
         var _a;
+        if (options != null) {
+            return {
+                major: this.toGridMajor(theme, options.major),
+                minor: this.toGridMinor(theme, options.minor),
+                size: (_a = options.size) !== null && _a !== void 0 ? _a : theme.getSnapGridSize()
+            };
+        }
         return {
-            major: this.toGridMajor(theme, options === null || options === void 0 ? void 0 : options.major),
-            minor: this.toGridMinor(theme, options === null || options === void 0 ? void 0 : options.minor),
-            size: (_a = options === null || options === void 0 ? void 0 : options.size) !== null && _a !== void 0 ? _a : theme.getSnapGridSize()
+            major: this.toGridMajor(theme),
+            minor: this.toGridMinor(theme),
+            size: theme.getSnapGridSize()
         };
     };
     DDiagramCanvasEditorSnap.prototype.toGridMajor = function (theme, options) {
         var _a, _b, _c, _d, _e;
+        if (options != null) {
+            return {
+                interval: (_a = options.interval) !== null && _a !== void 0 ? _a : theme.getSnapGridMajorInterval(),
+                color: (_b = options.color) !== null && _b !== void 0 ? _b : theme.getSnapGridMajorColor(),
+                alpha: (_c = options.alpha) !== null && _c !== void 0 ? _c : theme.getSnapGridMajorAlpha(),
+                width: (_d = options.width) !== null && _d !== void 0 ? _d : theme.getSnapGridMajorWidth(),
+                style: (_e = options.style) !== null && _e !== void 0 ? _e : theme.getSnapGridMajorStyle()
+            };
+        }
         return {
-            interval: (_a = options === null || options === void 0 ? void 0 : options.interval) !== null && _a !== void 0 ? _a : theme.getSnapGridMajorInterval(),
-            color: (_b = options === null || options === void 0 ? void 0 : options.color) !== null && _b !== void 0 ? _b : theme.getSnapGridMajorColor(),
-            alpha: (_c = options === null || options === void 0 ? void 0 : options.alpha) !== null && _c !== void 0 ? _c : theme.getSnapGridMajorAlpha(),
-            width: (_d = options === null || options === void 0 ? void 0 : options.width) !== null && _d !== void 0 ? _d : theme.getSnapGridMajorWidth(),
-            style: (_e = options === null || options === void 0 ? void 0 : options.style) !== null && _e !== void 0 ? _e : theme.getSnapGridMajorStyle()
+            interval: theme.getSnapGridMajorInterval(),
+            color: theme.getSnapGridMajorColor(),
+            alpha: theme.getSnapGridMajorAlpha(),
+            width: theme.getSnapGridMajorWidth(),
+            style: theme.getSnapGridMajorStyle()
         };
     };
     DDiagramCanvasEditorSnap.prototype.toGridMinor = function (theme, options) {
         var _a, _b, _c, _d;
+        if (options != null) {
+            return {
+                color: (_a = options.color) !== null && _a !== void 0 ? _a : theme.getSnapGridMinorColor(),
+                alpha: (_b = options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapGridMinorAlpha(),
+                width: (_c = options.width) !== null && _c !== void 0 ? _c : theme.getSnapGridMinorWidth(),
+                style: (_d = options.style) !== null && _d !== void 0 ? _d : theme.getSnapGridMinorStyle()
+            };
+        }
         return {
-            color: (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : theme.getSnapGridMinorColor(),
-            alpha: (_b = options === null || options === void 0 ? void 0 : options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapGridMinorAlpha(),
-            width: (_c = options === null || options === void 0 ? void 0 : options.width) !== null && _c !== void 0 ? _c : theme.getSnapGridMinorWidth(),
-            style: (_d = options === null || options === void 0 ? void 0 : options.style) !== null && _d !== void 0 ? _d : theme.getSnapGridMinorStyle()
+            color: theme.getSnapGridMinorColor(),
+            alpha: theme.getSnapGridMinorAlpha(),
+            width: theme.getSnapGridMinorWidth(),
+            style: theme.getSnapGridMinorStyle()
         };
     };
     DDiagramCanvasEditorSnap.prototype.toTarget = function (theme, options) {
         var _a, _b, _c, _d;
+        if (options != null) {
+            return {
+                color: (_a = options.color) !== null && _a !== void 0 ? _a : theme.getSnapTargetColor(),
+                alpha: (_b = options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapTargetAlpha(),
+                width: (_c = options.width) !== null && _c !== void 0 ? _c : theme.getSnapTargetWidth(),
+                style: (_d = options.style) !== null && _d !== void 0 ? _d : theme.getSnapTargetStyle()
+            };
+        }
         return {
-            color: (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : theme.getSnapTargetColor(),
-            alpha: (_b = options === null || options === void 0 ? void 0 : options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapTargetAlpha(),
-            width: (_c = options === null || options === void 0 ? void 0 : options.width) !== null && _c !== void 0 ? _c : theme.getSnapTargetWidth(),
-            style: (_d = options === null || options === void 0 ? void 0 : options.style) !== null && _d !== void 0 ? _d : theme.getSnapTargetStyle()
+            color: theme.getSnapTargetColor(),
+            alpha: theme.getSnapTargetAlpha(),
+            width: theme.getSnapTargetWidth(),
+            style: theme.getSnapTargetStyle()
         };
     };
     DDiagramCanvasEditorSnap.prototype.onChange = function () {
-        var parent = this._parent;
-        parent.toDirty();
-        DApplications.update(parent);
+        this._isDirty = true;
+        DApplications.update(this._parent);
     };
     Object.defineProperty(DDiagramCanvasEditorSnap.prototype, "container", {
         get: function () {
@@ -87369,15 +87431,39 @@ var DDiagramCanvasEditorSnap = /** @class */ (function () {
     DDiagramCanvasEditorSnap.prototype.serialize = function () {
         return this._controller.serialize();
     };
-    DDiagramCanvasEditorSnap.prototype.onReflow = function () {
-        var parent = this._parent;
+    DDiagramCanvasEditorSnap.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
+        this._gridParentWidth = newWidth;
+        this._gridParentHeight = newHeight;
+        this.updateGridSize();
+    };
+    DDiagramCanvasEditorSnap.prototype.onScale = function (newX, newY, oldX, oldY) {
+        this._gridParentScale = newX;
+        this.updateGridSize();
+    };
+    DDiagramCanvasEditorSnap.prototype.updateGridSize = function () {
+        var gridSize = this.newGridSize();
+        if (this._gridSize !== gridSize) {
+            this._gridSize = gridSize;
+            this._isDirty = true;
+        }
+    };
+    DDiagramCanvasEditorSnap.prototype.newGridSize = function () {
+        return this._grid.size(this._controller.grid.size, this._gridParentWidth, this._gridParentHeight, this._gridParentScale);
+    };
+    DDiagramCanvasEditorSnap.prototype.onRender = function () {
+        if (this._isDirty) {
+            this._isDirty = false;
+            this.updateAll();
+        }
+    };
+    DDiagramCanvasEditorSnap.prototype.updateAll = function () {
         var container = this._container;
         var controller = this._controller;
         var isGridVisible = controller.grid.visible;
         var isTargetVisible = controller.target.visible;
         if (isGridVisible || isTargetVisible) {
-            var w = parent.width;
-            var h = parent.height;
+            var w = this._gridParentWidth;
+            var h = this._gridParentHeight;
             var wh = 0.5 * w;
             var hh = 0.5 * h;
             var TOP = EShapeBarPosition.TOP;
@@ -87390,7 +87476,7 @@ var DDiagramCanvasEditorSnap = /** @class */ (function () {
                 var major = grid.major;
                 var minor = grid.minor;
                 var interval = major.interval;
-                var size = grid.size(controller.grid.size, w, h);
+                var size = this._gridSize;
                 for (var x = size, ix = 1; x < w; x += size, ix += 1, index += 1) {
                     var style = ix % interval === 0 ? major : minor;
                     this.update(container, shapes, index, x, hh, TOP, w, h, style);
@@ -87483,12 +87569,8 @@ var DDiagramCanvasEditor = /** @class */ (function (_super) {
     });
     Object.defineProperty(DDiagramCanvasEditor.prototype, "shape", {
         get: function () {
-            var result = this._shape;
-            if (result == null) {
-                result = this.newShape();
-                this._shape = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._shape) !== null && _a !== void 0 ? _a : (this._shape = this.newShape()));
         },
         enumerable: false,
         configurable: true
@@ -87527,10 +87609,26 @@ var DDiagramCanvasEditor = /** @class */ (function (_super) {
             thumbnail: thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.serialize()
         };
     };
-    DDiagramCanvasEditor.prototype.onReflow = function () {
-        var _a;
-        _super.prototype.onReflow.call(this);
-        (_a = this._snap) === null || _a === void 0 ? void 0 : _a.onReflow();
+    DDiagramCanvasEditor.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
+        var snap = this._snap;
+        if (snap != null) {
+            snap.onResize(newWidth, newHeight, oldWidth, oldHeight);
+        }
+        _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
+    };
+    DDiagramCanvasEditor.prototype.onScale = function (newX, newY, oldX, oldY) {
+        var snap = this._snap;
+        if (snap != null) {
+            snap.onScale(newX, newY, oldX, oldY);
+        }
+        _super.prototype.onScale.call(this, newX, newY, oldX, oldY);
+    };
+    DDiagramCanvasEditor.prototype.render = function (renderer) {
+        var snap = this._snap;
+        if (snap != null) {
+            snap.onRender();
+        }
+        _super.prototype.render.call(this, renderer);
     };
     DDiagramCanvasEditor.prototype.getType = function () {
         return "DDiagramCanvasEditor";

package/dist/wcardinal-ui.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.431.0
+ Winter Cardinal UI v0.433.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -47849,7 +47849,7 @@
                 this.size = serialized[2];
             }
             else {
-                this.visible = false;
+                this.visible = this._isVisibleDefault;
                 this.size = serialized[1];
             }
         };
@@ -62653,7 +62653,8 @@
                 var bounds = container.plotArea.getSelectionBoundsX();
                 shape.transform.position.set(mappedX, bounds.y + bounds.height * 0.5);
                 shape.size.set(0, bounds.height);
-                shape.visible = bounds.x <= mappedX && mappedX <= bounds.x + bounds.width;
+                var hw = shape.stroke.width * 0.5;
+                shape.visible = bounds.x <= mappedX + hw && mappedX - hw <= bounds.x + bounds.width;
                 return true;
             }
             return false;
@@ -62680,7 +62681,8 @@
                 var bounds = container.plotArea.getSelectionBoundsY();
                 shape.transform.position.set(bounds.x + bounds.width * 0.5, mappedY);
                 shape.size.set(bounds.width, 0);
-                shape.visible = bounds.y <= mappedY && mappedY <= bounds.y + bounds.height;
+                var hw = shape.stroke.width * 0.5;
+                shape.visible = bounds.y <= mappedY + hw && mappedY - hw <= bounds.y + bounds.height;
                 return true;
             }
             return false;
@@ -66139,6 +66141,7 @@
         function DDiagramCanvasEditorSnap(parent, theme, options) {
             var _this = this;
             this._parent = parent;
+            this._isDirty = true;
             // Controller
             var controller = options.controller;
             this._controller = controller;
@@ -66154,49 +66157,84 @@
             parent.addChildAt(container, parent.children.length - 1);
             // Grid
             this._grid = this.toGrid(theme, options.grid);
+            this._gridParentWidth = parent.width;
+            this._gridParentHeight = parent.height;
+            this._gridParentScale = parent.scale.x;
+            this._gridSize = this.newGridSize();
             // Target
             this._target = this.toTarget(theme, options.target);
         }
         DDiagramCanvasEditorSnap.prototype.toGrid = function (theme, options) {
             var _a;
+            if (options != null) {
+                return {
+                    major: this.toGridMajor(theme, options.major),
+                    minor: this.toGridMinor(theme, options.minor),
+                    size: (_a = options.size) !== null && _a !== void 0 ? _a : theme.getSnapGridSize()
+                };
+            }
             return {
-                major: this.toGridMajor(theme, options === null || options === void 0 ? void 0 : options.major),
-                minor: this.toGridMinor(theme, options === null || options === void 0 ? void 0 : options.minor),
-                size: (_a = options === null || options === void 0 ? void 0 : options.size) !== null && _a !== void 0 ? _a : theme.getSnapGridSize()
+                major: this.toGridMajor(theme),
+                minor: this.toGridMinor(theme),
+                size: theme.getSnapGridSize()
             };
         };
         DDiagramCanvasEditorSnap.prototype.toGridMajor = function (theme, options) {
             var _a, _b, _c, _d, _e;
+            if (options != null) {
+                return {
+                    interval: (_a = options.interval) !== null && _a !== void 0 ? _a : theme.getSnapGridMajorInterval(),
+                    color: (_b = options.color) !== null && _b !== void 0 ? _b : theme.getSnapGridMajorColor(),
+                    alpha: (_c = options.alpha) !== null && _c !== void 0 ? _c : theme.getSnapGridMajorAlpha(),
+                    width: (_d = options.width) !== null && _d !== void 0 ? _d : theme.getSnapGridMajorWidth(),
+                    style: (_e = options.style) !== null && _e !== void 0 ? _e : theme.getSnapGridMajorStyle()
+                };
+            }
             return {
-                interval: (_a = options === null || options === void 0 ? void 0 : options.interval) !== null && _a !== void 0 ? _a : theme.getSnapGridMajorInterval(),
-                color: (_b = options === null || options === void 0 ? void 0 : options.color) !== null && _b !== void 0 ? _b : theme.getSnapGridMajorColor(),
-                alpha: (_c = options === null || options === void 0 ? void 0 : options.alpha) !== null && _c !== void 0 ? _c : theme.getSnapGridMajorAlpha(),
-                width: (_d = options === null || options === void 0 ? void 0 : options.width) !== null && _d !== void 0 ? _d : theme.getSnapGridMajorWidth(),
-                style: (_e = options === null || options === void 0 ? void 0 : options.style) !== null && _e !== void 0 ? _e : theme.getSnapGridMajorStyle()
+                interval: theme.getSnapGridMajorInterval(),
+                color: theme.getSnapGridMajorColor(),
+                alpha: theme.getSnapGridMajorAlpha(),
+                width: theme.getSnapGridMajorWidth(),
+                style: theme.getSnapGridMajorStyle()
             };
         };
         DDiagramCanvasEditorSnap.prototype.toGridMinor = function (theme, options) {
             var _a, _b, _c, _d;
+            if (options != null) {
+                return {
+                    color: (_a = options.color) !== null && _a !== void 0 ? _a : theme.getSnapGridMinorColor(),
+                    alpha: (_b = options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapGridMinorAlpha(),
+                    width: (_c = options.width) !== null && _c !== void 0 ? _c : theme.getSnapGridMinorWidth(),
+                    style: (_d = options.style) !== null && _d !== void 0 ? _d : theme.getSnapGridMinorStyle()
+                };
+            }
             return {
-                color: (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : theme.getSnapGridMinorColor(),
-                alpha: (_b = options === null || options === void 0 ? void 0 : options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapGridMinorAlpha(),
-                width: (_c = options === null || options === void 0 ? void 0 : options.width) !== null && _c !== void 0 ? _c : theme.getSnapGridMinorWidth(),
-                style: (_d = options === null || options === void 0 ? void 0 : options.style) !== null && _d !== void 0 ? _d : theme.getSnapGridMinorStyle()
+                color: theme.getSnapGridMinorColor(),
+                alpha: theme.getSnapGridMinorAlpha(),
+                width: theme.getSnapGridMinorWidth(),
+                style: theme.getSnapGridMinorStyle()
             };
         };
         DDiagramCanvasEditorSnap.prototype.toTarget = function (theme, options) {
             var _a, _b, _c, _d;
+            if (options != null) {
+                return {
+                    color: (_a = options.color) !== null && _a !== void 0 ? _a : theme.getSnapTargetColor(),
+                    alpha: (_b = options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapTargetAlpha(),
+                    width: (_c = options.width) !== null && _c !== void 0 ? _c : theme.getSnapTargetWidth(),
+                    style: (_d = options.style) !== null && _d !== void 0 ? _d : theme.getSnapTargetStyle()
+                };
+            }
             return {
-                color: (_a = options === null || options === void 0 ? void 0 : options.color) !== null && _a !== void 0 ? _a : theme.getSnapTargetColor(),
-                alpha: (_b = options === null || options === void 0 ? void 0 : options.alpha) !== null && _b !== void 0 ? _b : theme.getSnapTargetAlpha(),
-                width: (_c = options === null || options === void 0 ? void 0 : options.width) !== null && _c !== void 0 ? _c : theme.getSnapTargetWidth(),
-                style: (_d = options === null || options === void 0 ? void 0 : options.style) !== null && _d !== void 0 ? _d : theme.getSnapTargetStyle()
+                color: theme.getSnapTargetColor(),
+                alpha: theme.getSnapTargetAlpha(),
+                width: theme.getSnapTargetWidth(),
+                style: theme.getSnapTargetStyle()
             };
         };
         DDiagramCanvasEditorSnap.prototype.onChange = function () {
-            var parent = this._parent;
-            parent.toDirty();
-            DApplications.update(parent);
+            this._isDirty = true;
+            DApplications.update(this._parent);
         };
         Object.defineProperty(DDiagramCanvasEditorSnap.prototype, "container", {
             get: function () {
@@ -66208,15 +66246,39 @@
         DDiagramCanvasEditorSnap.prototype.serialize = function () {
             return this._controller.serialize();
         };
-        DDiagramCanvasEditorSnap.prototype.onReflow = function () {
-            var parent = this._parent;
+        DDiagramCanvasEditorSnap.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
+            this._gridParentWidth = newWidth;
+            this._gridParentHeight = newHeight;
+            this.updateGridSize();
+        };
+        DDiagramCanvasEditorSnap.prototype.onScale = function (newX, newY, oldX, oldY) {
+            this._gridParentScale = newX;
+            this.updateGridSize();
+        };
+        DDiagramCanvasEditorSnap.prototype.updateGridSize = function () {
+            var gridSize = this.newGridSize();
+            if (this._gridSize !== gridSize) {
+                this._gridSize = gridSize;
+                this._isDirty = true;
+            }
+        };
+        DDiagramCanvasEditorSnap.prototype.newGridSize = function () {
+            return this._grid.size(this._controller.grid.size, this._gridParentWidth, this._gridParentHeight, this._gridParentScale);
+        };
+        DDiagramCanvasEditorSnap.prototype.onRender = function () {
+            if (this._isDirty) {
+                this._isDirty = false;
+                this.updateAll();
+            }
+        };
+        DDiagramCanvasEditorSnap.prototype.updateAll = function () {
             var container = this._container;
             var controller = this._controller;
             var isGridVisible = controller.grid.visible;
             var isTargetVisible = controller.target.visible;
             if (isGridVisible || isTargetVisible) {
-                var w = parent.width;
-                var h = parent.height;
+                var w = this._gridParentWidth;
+                var h = this._gridParentHeight;
                 var wh = 0.5 * w;
                 var hh = 0.5 * h;
                 var TOP = EShapeBarPosition.TOP;
@@ -66229,7 +66291,7 @@
                     var major = grid.major;
                     var minor = grid.minor;
                     var interval = major.interval;
-                    var size = grid.size(controller.grid.size, w, h);
+                    var size = this._gridSize;
                     for (var x = size, ix = 1; x < w; x += size, ix += 1, index += 1) {
                         var style = ix % interval === 0 ? major : minor;
                         this.update(container, shapes, index, x, hh, TOP, w, h, style);
@@ -66322,12 +66384,8 @@
         });
         Object.defineProperty(DDiagramCanvasEditor.prototype, "shape", {
             get: function () {
-                var result = this._shape;
-                if (result == null) {
-                    result = this.newShape();
-                    this._shape = result;
-                }
-                return result;
+                var _a;
+                return ((_a = this._shape) !== null && _a !== void 0 ? _a : (this._shape = this.newShape()));
             },
             enumerable: false,
             configurable: true
@@ -66366,10 +66424,26 @@
                 thumbnail: thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.serialize()
             };
         };
-        DDiagramCanvasEditor.prototype.onReflow = function () {
-            var _a;
-            _super.prototype.onReflow.call(this);
-            (_a = this._snap) === null || _a === void 0 ? void 0 : _a.onReflow();
+        DDiagramCanvasEditor.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
+            var snap = this._snap;
+            if (snap != null) {
+                snap.onResize(newWidth, newHeight, oldWidth, oldHeight);
+            }
+            _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
+        };
+        DDiagramCanvasEditor.prototype.onScale = function (newX, newY, oldX, oldY) {
+            var snap = this._snap;
+            if (snap != null) {
+                snap.onScale(newX, newY, oldX, oldY);
+            }
+            _super.prototype.onScale.call(this, newX, newY, oldX, oldY);
+        };
+        DDiagramCanvasEditor.prototype.render = function (renderer) {
+            var snap = this._snap;
+            if (snap != null) {
+                snap.onRender();
+            }
+            _super.prototype.render.call(this, renderer);
         };
         DDiagramCanvasEditor.prototype.getType = function () {
             return "DDiagramCanvasEditor";