ngx-rs-ant 2.3.9 → 2.4.0

package/fesm2020/ngx-rs-ant.mjs

@@ -1486,12 +1486,26 @@ class CamundaBpmnEditorComponent {
             }
         });
     }
+    zoom(type) {
+        const zoom = this.canvas.zoom();
+        switch (type) {
+            case 'reset':
+                this.canvas.zoom('fit-viewport');
+                break;
+            case 'zoomIn':
+                this.canvas.zoom(zoom + 0.1);
+                break;
+            case 'zoomOut':
+                this.canvas.zoom(zoom - 0.1);
+                break;
+        }
+    }
 }
 CamundaBpmnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CamundaBpmnEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml", showXmlButton: "showXmlButton", showConfigButton: "showConfigButton" }, outputs: { selectedNodeChanged: "selectedNodeChanged" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer></div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
+CamundaBpmnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CamundaBpmnEditorComponent, selector: "rs-camunda-bpmn-editor", inputs: { xml: "xml", showXmlButton: "showXmlButton", showConfigButton: "showConfigButton" }, outputs: { selectedNodeChanged: "selectedNodeChanged" }, viewQueries: [{ propertyName: "bpmnContainer", first: true, predicate: ["bpmnContainer"], descendants: true }, { propertyName: "bpmnConfig", first: true, predicate: ["bpmnConfig"], descendants: true }], ngImport: i0, template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer>\r\n    <div class=\"zoom-controls\">\r\n      <ul class=\"zoom-reset io-control io-control-list\">\r\n        <li>\r\n          <button title=\"\u8FD8\u539F\" (click)=\"zoom('reset')\">\r\n            <span class=\"coast-icon-refresh\"></span>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <hr class=\"separator\">\r\n        </li>\r\n        <li>\r\n          <button title=\"\u653E\u5927\" (click)=\"zoom('zoomIn')\">\r\n            <span class=\"coast-icon-add\"></span>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <hr class=\"separator\">\r\n        </li>\r\n        <li>\r\n          <button title=\"\u7F29\u5C0F\" (click)=\"zoom('zoomOut')\">\r\n            <span class=\"coast-icon-minus\"></span>\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1;position:relative;z-index:0}:host .main .container .zoom-controls{position:absolute;right:8px;bottom:20px;z-index:1}:host .main .container .zoom-controls ul{list-style:none;padding:4px;margin:0;background:var(--coast-global-bg-color, rgb(245, 245, 245));border:1px solid var(--coast-border-color, rgb(221, 221, 221));border-radius:2px;box-shadow:0 0 2px #0000001f}:host .main .container .zoom-controls ul li button{cursor:pointer;font-size:14px;background:none;border:none}:host .main .container .zoom-controls ul li button:hover{color:var(--coast-default-color, rgb(51, 122, 183))}:host .main .container .zoom-controls ul li hr.separator{margin:4px;padding-top:4px;border:none;border-bottom:solid 1px gray;clear:both}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CodeEditorComponent, selector: "rs-code-editor", inputs: ["code", "language", "readonly", "enableMinimap", "consoleMessage"], outputs: ["codeChange", "onContentReady"] }, { kind: "component", type: i3.DxButtonComponent, selector: "dx-button", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "icon", "rtlEnabled", "stylingMode", "tabIndex", "template", "text", "type", "useSubmitBehavior", "validationGroup", "visible", "width"], outputs: ["onClick", "onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "templateChange", "textChange", "typeChange", "useSubmitBehaviorChange", "validationGroupChange", "visibleChange", "widthChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CamundaBpmnEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer></div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}\n"] }]
+            args: [{ selector: 'rs-camunda-bpmn-editor', template: "<div class=\"main\">\r\n  <div class=\"container\" #bpmnContainer>\r\n    <div class=\"zoom-controls\">\r\n      <ul class=\"zoom-reset io-control io-control-list\">\r\n        <li>\r\n          <button title=\"\u8FD8\u539F\" (click)=\"zoom('reset')\">\r\n            <span class=\"coast-icon-refresh\"></span>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <hr class=\"separator\">\r\n        </li>\r\n        <li>\r\n          <button title=\"\u653E\u5927\" (click)=\"zoom('zoomIn')\">\r\n            <span class=\"coast-icon-add\"></span>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <hr class=\"separator\">\r\n        </li>\r\n        <li>\r\n          <button title=\"\u7F29\u5C0F\" (click)=\"zoom('zoomOut')\">\r\n            <span class=\"coast-icon-minus\"></span>\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n  <div [hidden]=\"!isShowConfig\" class=\"config\" #bpmnConfig></div>\r\n  <div class=\"xml-viewer\" [ngStyle]=\"{display: isShowXml ? 'flex' : 'none'}\">\r\n    <rs-code-editor language=\"xml\" [code]=\"xml\" [readonly]=\"true\" [enableMinimap]=\"true\"></rs-code-editor>\r\n  </div>\r\n</div>\r\n<div class=\"footer\">\r\n  <dx-button [type]=\"isShowXml ? 'default' : 'normal'\" text=\"XML\" [hoverStateEnabled]=\"false\"\r\n             [visible]=\"showXmlButton\" (onClick)=\"showXml()\"></dx-button>\r\n  <dx-button [type]=\"isShowConfig ? 'default' : 'normal'\" icon=\"coast-icon coast-icon-setting\"\r\n             style=\"float: right;\" [visible]=\"showConfigButton\"\r\n             (onClick)=\"isShowConfig = !isShowConfig;\"></dx-button>\r\n</div>\r\n", styles: [":host{flex:1;display:flex;flex-flow:column nowrap}:host .main{flex:1;display:flex;flex-flow:row nowrap;position:relative}:host .main .container{flex:1;position:relative;z-index:0}:host .main .container .zoom-controls{position:absolute;right:8px;bottom:20px;z-index:1}:host .main .container .zoom-controls ul{list-style:none;padding:4px;margin:0;background:var(--coast-global-bg-color, rgb(245, 245, 245));border:1px solid var(--coast-border-color, rgb(221, 221, 221));border-radius:2px;box-shadow:0 0 2px #0000001f}:host .main .container .zoom-controls ul li button{cursor:pointer;font-size:14px;background:none;border:none}:host .main .container .zoom-controls ul li button:hover{color:var(--coast-default-color, rgb(51, 122, 183))}:host .main .container .zoom-controls ul li hr.separator{margin:4px;padding-top:4px;border:none;border-bottom:solid 1px gray;clear:both}:host .main .config{flex:0 0 360px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}:host .main .xml-viewer{position:absolute;width:100%;height:100%;display:flex;flex-flow:column nowrap;z-index:var(--coast-z-index-drawer, 2000)}:host .main .xml-viewer rs-code-editor{flex:1}:host .footer{flex:0 0 24px;border:1px solid var(--coast-border-color, rgb(221, 221, 221))}\n"] }]
         }], propDecorators: { xml: [{
                 type: Input
             }], showXmlButton: [{
@@ -1596,12 +1610,26 @@ class CamundaBpmnViewerComponent {
             }
         });
     }
+    zoom(type) {
+        const zoom = this.canvas.zoom();
+        switch (type) {
+            case 'reset':
+                this.canvas.zoom('fit-viewport');
+                break;
+            case 'zoomIn':
+                this.canvas.zoom(zoom + 0.1);
+                break;
+            case 'zoomOut':
+                this.canvas.zoom(zoom - 0.1);
+                break;
+        }
+    }
 }
 CamundaBpmnViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CamundaBpmnViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBpmnViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CamundaBpmnViewerComponent, selector: "rs-camunda-bpmn-viewer", inputs: { xml: "xml", failedActivities: "failedActivities", activeActivities: "activeActivities" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"container\" #viewerContainer></div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .container{flex:1}\n"] });
+CamundaBpmnViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CamundaBpmnViewerComponent, selector: "rs-camunda-bpmn-viewer", inputs: { xml: "xml", failedActivities: "failedActivities", activeActivities: "activeActivities" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true }], ngImport: i0, template: "<div class=\"container\" #viewerContainer>\r\n  <div class=\"zoom-controls\">\r\n    <ul class=\"zoom-reset io-control io-control-list\">\r\n      <li>\r\n        <button title=\"\u8FD8\u539F\" (click)=\"zoom('reset')\">\r\n          <span class=\"coast-icon-refresh\"></span>\r\n        </button>\r\n      </li>\r\n      <li>\r\n        <hr class=\"separator\">\r\n      </li>\r\n      <li>\r\n        <button title=\"\u653E\u5927\" (click)=\"zoom('zoomIn')\">\r\n          <span class=\"coast-icon-add\"></span>\r\n        </button>\r\n      </li>\r\n      <li>\r\n        <hr class=\"separator\">\r\n      </li>\r\n      <li>\r\n        <button title=\"\u7F29\u5C0F\" (click)=\"zoom('zoomOut')\">\r\n          <span class=\"coast-icon-minus\"></span>\r\n        </button>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .container{flex:1;position:relative;z-index:0}:host .container .zoom-controls{position:absolute;right:8px;bottom:20px;z-index:1}:host .container .zoom-controls ul{list-style:none;padding:4px;margin:0;background:var(--coast-global-bg-color, rgb(245, 245, 245));border:1px solid var(--coast-border-color, rgb(221, 221, 221));border-radius:2px;box-shadow:0 0 2px #0000001f}:host .container .zoom-controls ul li button{cursor:pointer;font-size:14px;background:none;border:none}:host .container .zoom-controls ul li button:hover{color:var(--coast-default-color, rgb(51, 122, 183))}:host .container .zoom-controls ul li hr.separator{margin:4px;padding-top:4px;border:none;border-bottom:solid 1px gray;clear:both}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CamundaBpmnViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rs-camunda-bpmn-viewer', template: "<div class=\"container\" #viewerContainer></div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .container{flex:1}\n"] }]
+            args: [{ selector: 'rs-camunda-bpmn-viewer', template: "<div class=\"container\" #viewerContainer>\r\n  <div class=\"zoom-controls\">\r\n    <ul class=\"zoom-reset io-control io-control-list\">\r\n      <li>\r\n        <button title=\"\u8FD8\u539F\" (click)=\"zoom('reset')\">\r\n          <span class=\"coast-icon-refresh\"></span>\r\n        </button>\r\n      </li>\r\n      <li>\r\n        <hr class=\"separator\">\r\n      </li>\r\n      <li>\r\n        <button title=\"\u653E\u5927\" (click)=\"zoom('zoomIn')\">\r\n          <span class=\"coast-icon-add\"></span>\r\n        </button>\r\n      </li>\r\n      <li>\r\n        <hr class=\"separator\">\r\n      </li>\r\n      <li>\r\n        <button title=\"\u7F29\u5C0F\" (click)=\"zoom('zoomOut')\">\r\n          <span class=\"coast-icon-minus\"></span>\r\n        </button>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-flow:column nowrap}:host .container{flex:1;position:relative;z-index:0}:host .container .zoom-controls{position:absolute;right:8px;bottom:20px;z-index:1}:host .container .zoom-controls ul{list-style:none;padding:4px;margin:0;background:var(--coast-global-bg-color, rgb(245, 245, 245));border:1px solid var(--coast-border-color, rgb(221, 221, 221));border-radius:2px;box-shadow:0 0 2px #0000001f}:host .container .zoom-controls ul li button{cursor:pointer;font-size:14px;background:none;border:none}:host .container .zoom-controls ul li button:hover{color:var(--coast-default-color, rgb(51, 122, 183))}:host .container .zoom-controls ul li hr.separator{margin:4px;padding-top:4px;border:none;border-bottom:solid 1px gray;clear:both}\n"] }]
         }], propDecorators: { xml: [{
                 type: Input
             }], failedActivities: [{