@flexem/fc-gui 3.0.0-alpha.162 → 3.0.0-alpha.164

package/elements/numerical-display/numerical-display-element.js

@@ -245,7 +245,7 @@ export class NumericalDisplayElement extends ReadableElement {
         }
         const args = new WriteValueModalArgs(this.writeVariableName, this.model.dataType, this.model.fBoxDataType, this.model.integerDigits, this.model.fractionDigits, numericalOperation, this.model.version, this.enableDataParsed, this.releasedVariableService, this.guiContext);
         this.writeValueMmodalRef = this.modalService.show(WriteValueModalComponent, {
-            initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position', animated: false
+            initialState: { args: args }, backdrop: 'static', class: 'gui-modal-dialog-position gui-modal-write', animated: false
         });
         this.writeValueMmodalRef.content.onClosed = (result) => {
             if (result) {

package/elements/shared/text/text-element.js

@@ -77,7 +77,7 @@ export class TextElementModal {
             lineHeight = parseInt(font.fontSize, 10) + 5;
             fontString += font.fontSize + '/' + lineHeight.toString() + 'px ' + font.fontFamily;
             textDiv.style.cssText = `color: ${font.color};word-break: break-all;font: ${fontString};text-align: ${textAlign};`;
-            if (font.isUnderline) {
+            if (font.isUnderline && content.length > 0) {
                 textDiv.style.textDecoration = 'underline';
             }
             const spanText = document.createElement('span');

package/elements/shared/text/text-state-element.d.ts

@@ -45,6 +45,8 @@ export declare class TextStateElement {
     private clearFlickerInterval;
     /**
      * 获取指定状态在当前语种下的字体样式
+     * fontStyleCultures 中保存的对象含 fontStyle 字符串但无 isBold/isItalic/fontFamily，
+     * 此处从 fontStyle 解析这三个字段后返回
      */
     private getFontForState;
     /**

package/elements/shared/text/text-state-element.js

@@ -44,10 +44,23 @@ export class TextStateElement {
             return;
         }
         const textElement = this.getforeignObjectElement();
-        // 设置 text-anchor 和 dominant-baseline
-        textElement.setAttribute('text-anchor', 'middle');
-        textElement.setAttribute('dominant-baseline', 'middle');
         textElement.setAttribute('pointer-events', 'auto');
+        // 根据 textAlign 计算 SVG text-anchor 和 x 坐标
+        const textAlign = font.textAlign || 'center';
+        let textAnchor;
+        let anchorX;
+        if (textAlign === 'left') {
+            textAnchor = 'start';
+            anchorX = 0;
+        }
+        else if (textAlign === 'right') {
+            textAnchor = 'end';
+            anchorX = this.width;
+        }
+        else {
+            textAnchor = 'middle';
+            anchorX = this.width / 2;
+        }
         // 拆分换行
         const lines = content.split('\n');
         const fontSize = parseInt(font.fontSize, 10);
@@ -65,16 +78,16 @@ export class TextStateElement {
                 textElement.appendChild(tspan);
             }
             tspan.setAttribute('display', 'inline');
-            tspan.setAttribute('x', (this.width / 2).toString());
+            tspan.setAttribute('x', anchorX.toString());
             tspan.setAttribute('y', startY + i * lineHeight + 'px');
-            tspan.textContent = lines[i].replace(/ /g, '\u00A0');
+            tspan.textContent = lines[i].replace(/ /g, ' ');
             tspan.setAttribute('font-size', font.fontSize);
             tspan.setAttribute('fill', font.color);
             tspan.setAttribute('font-family', font.fontFamily);
             tspan.setAttribute('font-weight', font.isBold ? 'bold' : 'normal');
             tspan.setAttribute('font-style', font.isItalic ? 'italic' : 'normal');
             tspan.setAttribute('text-decoration', font.isUnderline ? 'underline' : 'none');
-            tspan.setAttribute('text-anchor', 'middle');
+            tspan.setAttribute('text-anchor', textAnchor);
             tspan.setAttribute('dominant-baseline', 'middle');
         }
         // 隐藏多余的 tspan（不删除）
@@ -132,7 +145,7 @@ export class TextStateElement {
         }
     }
     doFaultFlicker(textElement, stateId) {
-        if (this.version > 3 && this.faultFlickers) {
+        if (this.version != null && this.version > 3 && this.faultFlickers) {
             this.clearFlickerInterval(textElement);
             const faultFlicker = this.faultFlickers.find(t => t.id === stateId);
             if (faultFlicker && faultFlicker.faultFlicker) {
@@ -161,6 +174,8 @@ export class TextStateElement {
     }
     /**
      * 获取指定状态在当前语种下的字体样式
+     * fontStyleCultures 中保存的对象含 fontStyle 字符串但无 isBold/isItalic/fontFamily，
+     * 此处从 fontStyle 解析这三个字段后返回
      */
     getFontForState(stateId, defaultFont) {
         if (!this.fontStyleCultures) {
@@ -181,7 +196,17 @@ export class TextStateElement {
         };
         const targetLanguage = getTargetLanguage();
         if (this.fontStyleCultures[stateKey][targetLanguage]) {
-            return this.fontStyleCultures[stateKey][targetLanguage];
+            const culturedFont = this.fontStyleCultures[stateKey][targetLanguage];
+            if (culturedFont.fontStyle) {
+                const fs = culturedFont.fontStyle;
+                const isBold = fs.indexOf('bold') !== -1;
+                const isItalic = fs.indexOf('Italic') !== -1;
+                const parts = fs.split(' ');
+                const familyIndex = (isBold ? 1 : 0) + (isItalic ? 1 : 0) + 1;
+                const fontFamily = parts.length > familyIndex ? parts[familyIndex] : null;
+                return Object.assign(Object.assign({}, culturedFont), { isBold, isItalic, fontFamily });
+            }
+            return culturedFont;
         }
         return defaultFont;
     }

package/elements/view-operation/view-operation.element.js

@@ -233,14 +233,19 @@ export class ViewOperationElement extends ConditionalEnableElement {
         const targetLanguage = getTargetLanguage();
         if (this.model.fontStyleCultures && this.model.fontStyleCultures[targetLanguage]) {
             const style = this.model.fontStyleCultures[targetLanguage];
+            const fs = style.fontStyle || '';
+            const isBold = fs.indexOf('bold') !== -1;
+            const isItalic = fs.indexOf('Italic') !== -1;
+            const parts = fs.split(' ');
+            const familyIndex = (isBold ? 1 : 0) + (isItalic ? 1 : 0) + 1;
+            const fontFamily = parts.length > familyIndex ? parts[familyIndex] : null;
             return {
                 isUnderline: style.isUnderline,
-                isBold: style.isBold,
-                isItalic: style.isItalic,
+                isBold,
+                isItalic,
                 fontSize: style.fontSize,
-                fontFamily: style.fontFamily || 'msyh',
-                color: style.color,
-                textAlign: style.textAlign
+                fontFamily: fontFamily || 'msyh',
+                color: style.color
             };
         }
         return Object.assign(Object.assign({}, this.model.label.font), { fontFamily: this.model.label.font.fontFamily || 'msyh' });

package/modal/write-value/write-value-modal.component.html

@@ -10,15 +10,15 @@
   </div>
   <div class="modal-body">
     <span class="write-value-range">{{localization.writeValueRange}}：</span>
-    <div class="write-value-range">
+    <span>
       {{writeValueRangeText}}
       <span *ngIf="valueType">({{valueType}})</span>
-    </div>
-    <input type="text" name="valueInput" autoFocus class="form-control write-value" [(ngModel)]="value" (keyup)="validate($event)" autocomplete="off">
+    </span>
+    <input type="text" name="valueInput" autoFocus class="form-control form-control-write write-value" [(ngModel)]="value" (keyup)="validate($event)" autocomplete="off">
     <span class="help-block text-danger" [hidden]="!validationError">{{validationErrorText}}</span>
   </div>
-  <div class="modal-footer">
-    <button type="submit" class="btn md-skip btn-primary btn-block" [disabled]="validationError || isSubmitting">
+  <div class="modal-footer modal-footer-write">
+    <button type="submit" class="btn md-skip btn-primary btn-primary-write btn-block" [disabled]="validationError || isSubmitting">
       <ng-container *ngIf="!isSubmitting">{{localization.submit}}</ng-container>
       <ng-container *ngIf="isSubmitting">{{localization.submitting}}</ng-container>
     </button>

package/modal/write-value/write-value-modal.component.js

@@ -267,8 +267,8 @@ __decorate([
 WriteValueModalComponent = __decorate([
     Component({
         selector: 'writeValueModal',
-        template: "<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{displayVariableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <div class=\"write-value-range\"> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </div> <input type=\"text\" name=\"valueInput\" autoFocus class=\"form-control write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ",
-        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]
+        template: "<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{displayVariableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <span> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </span> <input type=\"text\" name=\"valueInput\" autoFocus class=\"form-control form-control-write write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer modal-footer-write\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-primary-write btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ",
+        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .form-control-write { margin: 0 20px; width: 410px; } .modal-footer { padding: 10px 5px 20px 5px !important; text-align: right; border-color: transparent; } .modal-footer-write { padding: 10px 5px 20px 5px !important; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .btn-primary-write { width: 410px; margin: 0 15px; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]
     }),
     __param(0, Inject(LOCALIZATION)),
     __metadata("design:paramtypes", [Object, DataTypeService,

package/modal/write-value/write-value-modal.component.less

@@ -21,12 +21,21 @@
   width: 90%;
 }
 
+.form-control-write {
+  margin: 0 20px;
+  width: 410px;
+}
+
 .modal-footer {
-  padding: 10px 4px 20px 5px !important;
+  padding: 10px 5px 20px 5px !important;
   text-align: right;
   border-color: transparent;
 }
 
+.modal-footer-write {
+  padding: 10px 5px 20px 5px !important;
+}
+
 .text-danger {
   display: block;
   color: #ed6b75;
@@ -43,6 +52,11 @@
   height: 32px;
 }
 
+.btn-primary-write {
+  width: 410px;
+  margin: 0 15px;
+}
+
 .write-value-range {
   color: #7f939e;
   font-size: 14px;

package/modal/write-value/write-value-modal.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"WriteValueModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"writeValueModal","template":"<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{displayVariableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <div class=\"write-value-range\"> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </div> <input type=\"text\" name=\"valueInput\" autoFocus class=\"form-control write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]}]}],"members":{"invalidErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":51,"character":9},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":51,"character":16}]}],null,null,null,null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":51,"character":51},{"__symbolic":"reference","module":"../../utils/data-type/data-type.service","name":"DataTypeService","line":52,"character":42},{"__symbolic":"reference","module":"../../utils/fraction-digit.service","name":"FractionDigitService","line":53,"character":47},{"__symbolic":"reference","module":"../../utils/numerical-operation.service","name":"NumericalOperationService","line":54,"character":52},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":55,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"setValueRangeAccordToDataParsed":[{"__symbolic":"method"}],"getWriteValueRangeText":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"handleCurrentLanguageIdSave":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"showValidationErrorInfo":[{"__symbolic":"method"}],"hideValidationErrorInfo":[{"__symbolic":"method"}],"getFractionDigits":[{"__symbolic":"method"}],"formatWriteValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"WriteValueModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"writeValueModal","template":"<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{displayVariableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <span> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </span> <input type=\"text\" name=\"valueInput\" autoFocus class=\"form-control form-control-write write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer modal-footer-write\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-primary-write btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ","styles":[".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .form-control-write { margin: 0 20px; width: 410px; } .modal-footer { padding: 10px 5px 20px 5px !important; text-align: right; border-color: transparent; } .modal-footer-write { padding: 10px 5px 20px 5px !important; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .btn-primary-write { width: 410px; margin: 0 15px; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]}]}],"members":{"invalidErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":51,"character":9},"arguments":[{"__symbolic":"reference","module":"../../localization","name":"LOCALIZATION","line":51,"character":16}]}],null,null,null,null],"parameters":[{"__symbolic":"reference","module":"../../localization","name":"Localization","line":51,"character":51},{"__symbolic":"reference","module":"../../utils/data-type/data-type.service","name":"DataTypeService","line":52,"character":42},{"__symbolic":"reference","module":"../../utils/fraction-digit.service","name":"FractionDigitService","line":53,"character":47},{"__symbolic":"reference","module":"../../utils/numerical-operation.service","name":"NumericalOperationService","line":54,"character":52},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":55,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"initData":[{"__symbolic":"method"}],"setValueRangeAccordToDataParsed":[{"__symbolic":"method"}],"getWriteValueRangeText":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"handleCurrentLanguageIdSave":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"showValidationErrorInfo":[{"__symbolic":"method"}],"hideValidationErrorInfo":[{"__symbolic":"method"}],"getFractionDigits":[{"__symbolic":"method"}],"formatWriteValue":[{"__symbolic":"method"}]}}}}]

package/model/shared/text/font.d.ts

@@ -5,6 +5,6 @@ export interface Font {
     readonly fontSize: string;
     fontFamily?: string;
     readonly color: string;
-    readonly textAlign: string;
+    readonly textAlign?: string;
     readonly fontStyle?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.162",
+	"version": "3.0.0-alpha.164",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",