Igor Kulikov
2 years ago
18 changed files with 970 additions and 1216 deletions
@ -1,26 +0,0 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<ng-container [formGroup]="scadaTestWidgetConfigForm"> |
|||
<tb-target-device formControlName="targetDevice"></tb-target-device> |
|||
<tb-scada-object-settings |
|||
formControlName="scadaObject" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType"> |
|||
</tb-scada-object-settings> |
|||
</ng-container> |
|||
@ -0,0 +1,48 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<ng-container [formGroup]="iotSvgWidgetConfigForm"> |
|||
<tb-target-device formControlName="targetDevice"></tb-target-device> |
|||
<tb-iot-svg-object-settings |
|||
formControlName="iotSvgObject" |
|||
[svgPath]="iotSvgWidgetConfigForm.get('iotSvg').value" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
[callbacks]="callbacks"> |
|||
</tb-iot-svg-object-settings> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.background.background' | translate }}</div> |
|||
<tb-background-settings formControlName="background"> |
|||
</tb-background-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between column-lt-md"> |
|||
<div translate>widget-config.show-card-buttons</div> |
|||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|||
</mat-chip-listbox> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
@ -1,797 +0,0 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { Box, Element, Runner, Svg, SVG, Timeline, Text } from '@svgdotjs/svg.js'; |
|||
import { |
|||
DataToValueType, |
|||
GetValueAction, |
|||
GetValueSettings, SetValueAction, |
|||
SetValueSettings, ValueToDataType |
|||
} from '@shared/models/action-widget-settings.models'; |
|||
import { |
|||
formatValue, |
|||
insertVariable, |
|||
isDefinedAndNotNull, |
|||
isNumber, |
|||
isNumeric, |
|||
isUndefinedOrNull, |
|||
mergeDeep, |
|||
parseFunction |
|||
} from '@core/utils'; |
|||
import { BehaviorSubject, forkJoin, Observable } from 'rxjs'; |
|||
import { map, share } from 'rxjs/operators'; |
|||
import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models'; |
|||
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|||
|
|||
export type ScadaObjectValueType = 'input' | 'constant' | 'property' | 'function' | 'valueFormat'; |
|||
|
|||
export interface ScadaObjectValueBase { |
|||
type: ScadaObjectValueType; |
|||
} |
|||
|
|||
export interface ScadaObjectValueConstant extends ScadaObjectValueBase { |
|||
constantValue?: any; |
|||
} |
|||
|
|||
export interface ScadaObjectValueProperty extends ScadaObjectValueBase { |
|||
propertyId?: string; |
|||
computedPropertyValue?: any; |
|||
} |
|||
|
|||
export interface ScadaObjectValueFunction extends ScadaObjectValueBase { |
|||
valueConvertFunction?: string; |
|||
valueConverter?: (val: any) => any; |
|||
} |
|||
|
|||
export interface ScadaObjectValueFormat extends ScadaObjectValueBase { |
|||
units?: ScadaObjectValue; |
|||
decimals?: ScadaObjectValue; |
|||
computedUnits?: string; |
|||
computedDecimals?: number; |
|||
} |
|||
|
|||
export type ScadaObjectValue = ScadaObjectValueProperty & ScadaObjectValueConstant & ScadaObjectValueFunction & ScadaObjectValueFormat; |
|||
|
|||
export interface ScadaObjectAttribute { |
|||
name: string; |
|||
value: ScadaObjectValue; |
|||
} |
|||
|
|||
export interface ScadaObjectText { |
|||
content?: ScadaObjectValue; |
|||
font?: ScadaObjectValue; |
|||
color?: ScadaObjectValue; |
|||
} |
|||
|
|||
export interface ScadaObjectElementState { |
|||
tag: string; |
|||
inputValue?: string; |
|||
show?: ScadaObjectValue; |
|||
text?: ScadaObjectText; |
|||
attributes?: ScadaObjectAttribute[]; |
|||
animate?: number; |
|||
addClass?: string; |
|||
removeClass?: string; |
|||
animationTimeline?: Timeline; |
|||
} |
|||
|
|||
export interface ScadaObjectState { |
|||
initial?: boolean; |
|||
triggerValues?: string[]; |
|||
conditionFunction?: string; |
|||
condition?: (values: {[key: string]: any}) => boolean; |
|||
state: ScadaObjectElementState[]; |
|||
} |
|||
|
|||
export interface ScadaObjectUpdateState { |
|||
updateValue: string; |
|||
} |
|||
|
|||
export enum ScadaObjectBehaviorType { |
|||
setValue = 'setValue', |
|||
getValue = 'getValue' |
|||
} |
|||
|
|||
export interface ScadaObjectBehaviorBase { |
|||
id: string; |
|||
name: string; |
|||
type: ScadaObjectBehaviorType; |
|||
} |
|||
|
|||
export interface ScadaObjectBehaviorGet extends ScadaObjectBehaviorBase { |
|||
valueType: ValueType; |
|||
defaultValue: any; |
|||
onUpdate: ScadaObjectUpdateState[]; |
|||
} |
|||
|
|||
export interface ScadaObjectBehaviorSet extends ScadaObjectBehaviorBase { |
|||
valueToDataType: ValueToDataType; |
|||
constantValue: any; |
|||
valueToDataFunction: string; |
|||
} |
|||
|
|||
export type ScadaObjectBehavior = ScadaObjectBehaviorGet | ScadaObjectBehaviorSet; |
|||
|
|||
export type ScadaObjectPropertyType = 'string' | 'number' | 'color' | 'color-settings' | 'font' | 'units' | 'switch'; |
|||
|
|||
export interface ScadaObjectPropertyBase { |
|||
id: string; |
|||
name: string; |
|||
type: ScadaObjectPropertyType; |
|||
default: any; |
|||
required?: boolean; |
|||
subLabel?: string; |
|||
divider?: boolean; |
|||
fieldSuffix?: string; |
|||
disableOnProperty?: string; |
|||
rowClass?: string; |
|||
fieldClass?: string; |
|||
} |
|||
|
|||
export interface ScadaObjectNumberProperty extends ScadaObjectPropertyBase { |
|||
min?: number; |
|||
max?: number; |
|||
step?: number; |
|||
} |
|||
|
|||
export type ScadaObjectProperty = ScadaObjectPropertyBase & ScadaObjectNumberProperty; |
|||
|
|||
export interface ScadaObjectCallBehavior { |
|||
behaviorId: string; |
|||
conditionFunction?: string; |
|||
condition?: (value: any) => boolean; |
|||
} |
|||
|
|||
export interface ScadaObjectStateValue { |
|||
initialValue: any; |
|||
callBehavior?: ScadaObjectCallBehavior[]; |
|||
} |
|||
|
|||
export type ScadaObjectElementActionTrigger = 'click'; |
|||
|
|||
export type ScadaObjectActionType = 'updateValue'; |
|||
export type ScadaObjectActionUpdateValueType = 'toggle' | 'increment' | 'constant'; |
|||
|
|||
export interface ScadaObjectElementAction { |
|||
trigger: ScadaObjectElementActionTrigger; |
|||
enabledTriggerValues?: string[]; |
|||
enabledConditionFunction?: string; |
|||
enabledCondition?: (values: {[key: string]: any}) => boolean; |
|||
actionType: ScadaObjectActionType; |
|||
updateValueId?: string; |
|||
updateValueType?: ScadaObjectActionUpdateValueType; |
|||
updateValueConstant?: any; |
|||
updateValueInc?: number; |
|||
} |
|||
|
|||
export interface ScadaObjectMetadata { |
|||
title: string; |
|||
stateValues: {[id: string]: ScadaObjectStateValue}; |
|||
actions: {[tag: string]: ScadaObjectElementAction}; |
|||
states: {[id: string]: ScadaObjectState}; |
|||
behavior: ScadaObjectBehavior[]; |
|||
properties: ScadaObjectProperty[]; |
|||
} |
|||
|
|||
export const emptyMetadata: ScadaObjectMetadata = { |
|||
title: '', |
|||
stateValues: {}, |
|||
actions: {}, |
|||
states: {}, |
|||
behavior: [], |
|||
properties: [] |
|||
}; |
|||
|
|||
|
|||
export const parseScadaObjectMetadataFromContent = (svgContent: string): ScadaObjectMetadata => { |
|||
try { |
|||
const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); |
|||
return parseScadaObjectMetadataFromDom(svgDoc); |
|||
} catch (_e) { |
|||
return emptyMetadata; |
|||
} |
|||
}; |
|||
|
|||
const parseScadaObjectMetadataFromDom = (svgDoc: Document): ScadaObjectMetadata => { |
|||
try { |
|||
const elements = svgDoc.getElementsByTagName('tb:metadata'); |
|||
if (elements.length) { |
|||
return JSON.parse(elements[0].innerHTML); |
|||
} else { |
|||
return emptyMetadata; |
|||
} |
|||
} catch (_e) { |
|||
console.error(_e); |
|||
return emptyMetadata; |
|||
} |
|||
}; |
|||
|
|||
const defaultGetValueSettings = (get: ScadaObjectBehaviorGet): GetValueSettings<any> => ({ |
|||
action: GetValueAction.DO_NOTHING, |
|||
defaultValue: get.defaultValue, |
|||
executeRpc: { |
|||
method: 'getState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return boolean value */\nreturn data;' |
|||
} |
|||
}); |
|||
|
|||
const defaultSetValueSettings = (set: ScadaObjectBehaviorSet): SetValueSettings => ({ |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SERVER_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: set.valueToDataType, |
|||
constantValue: set.constantValue, |
|||
valueToDataFunction: set.valueToDataFunction ? set.valueToDataFunction : |
|||
'/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;' |
|||
} |
|||
}); |
|||
|
|||
export const defaultScadaObjectSettings = (metadata: ScadaObjectMetadata): ScadaObjectSettings => { |
|||
const settings: ScadaObjectSettings = {}; |
|||
for (const behavior of metadata.behavior) { |
|||
if (behavior.type === ScadaObjectBehaviorType.getValue) { |
|||
settings[behavior.id] = defaultGetValueSettings(behavior as ScadaObjectBehaviorGet); |
|||
} else if (behavior.type === ScadaObjectBehaviorType.setValue) { |
|||
settings[behavior.id] = defaultSetValueSettings(behavior as ScadaObjectBehaviorSet); |
|||
} |
|||
} |
|||
for (const property of metadata.properties) { |
|||
settings[property.id] = property.default; |
|||
} |
|||
return settings; |
|||
}; |
|||
|
|||
export type ScadaObjectSettings = {[id: string]: any}; |
|||
|
|||
export class ScadaObject { |
|||
|
|||
private metadata: ScadaObjectMetadata; |
|||
private settings: ScadaObjectSettings; |
|||
|
|||
private rootElement: HTMLElement; |
|||
private svgShape: Svg; |
|||
private box: Box; |
|||
private targetWidth: number; |
|||
private targetHeight: number; |
|||
|
|||
private loadingSubject = new BehaviorSubject(false); |
|||
private valueGetters: ValueGetter<any>[] = []; |
|||
private valueActions: ValueAction[] = []; |
|||
private valueSetters: {[behaviorId: string]: ValueSetter<any>} = {}; |
|||
|
|||
private stateValueSubjects: {[id: string]: BehaviorSubject<any>} = {}; |
|||
private stateValues: {[id: string]: any} = {}; |
|||
|
|||
loading$ = this.loadingSubject.asObservable().pipe(share()); |
|||
|
|||
constructor(private ctx: WidgetContext, |
|||
private svgPath: string, |
|||
private inputSettings: ScadaObjectSettings) {} |
|||
|
|||
public init(): Observable<any> { |
|||
return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe( |
|||
map((inputSvgContent) => { |
|||
const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml'); |
|||
this.metadata = parseScadaObjectMetadataFromDom(doc); |
|||
const defaults = defaultScadaObjectSettings(this.metadata); |
|||
this.settings = mergeDeep<ScadaObjectSettings>({}, defaults, this.inputSettings || {}); |
|||
this.prepareMetadata(); |
|||
this.prepareSvgShape(doc); |
|||
this.initStates(); |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public addTo(element: HTMLElement) { |
|||
this.rootElement = element; |
|||
if (this.svgShape) { |
|||
this.svgShape.addTo(element); |
|||
} |
|||
} |
|||
|
|||
public destroy() { |
|||
for (const stateValueId of Object.keys(this.stateValueSubjects)) { |
|||
this.stateValueSubjects[stateValueId].complete(); |
|||
this.stateValueSubjects[stateValueId].unsubscribe(); |
|||
} |
|||
this.valueActions.forEach(v => v.destroy()); |
|||
this.loadingSubject.complete(); |
|||
this.loadingSubject.unsubscribe(); |
|||
} |
|||
|
|||
public setSize(targetWidth: number, targetHeight: number) { |
|||
this.targetWidth = targetWidth; |
|||
this.targetHeight = targetHeight; |
|||
if (this.svgShape) { |
|||
this.resize(); |
|||
} |
|||
} |
|||
|
|||
private prepareMetadata() { |
|||
for (const stateValueId of Object.keys(this.metadata.stateValues)) { |
|||
const stateValue = this.metadata.stateValues[stateValueId]; |
|||
if (stateValue.callBehavior) { |
|||
stateValue.callBehavior.forEach(callBehavior => { |
|||
let condition = () => true; |
|||
if (callBehavior.conditionFunction) { |
|||
try { |
|||
condition = parseFunction(this.insertVariables(callBehavior.conditionFunction), ['value']); |
|||
} catch (e) { |
|||
condition = () => false; |
|||
} |
|||
} |
|||
callBehavior.condition = condition; |
|||
}); |
|||
} |
|||
} |
|||
for (const stateId of Object.keys(this.metadata.states)) { |
|||
const state = this.metadata.states[stateId]; |
|||
let condition = () => true; |
|||
if (state.conditionFunction) { |
|||
try { |
|||
condition = parseFunction(this.insertVariables(state.conditionFunction), ['values']); |
|||
} catch (e) { |
|||
condition = () => false; |
|||
} |
|||
} |
|||
state.condition = condition; |
|||
for (const elementState of state.state) { |
|||
this.prepareValue(elementState.show); |
|||
this.prepareValue(elementState.text?.content); |
|||
this.prepareValue(elementState.text?.font); |
|||
this.prepareValue(elementState.text?.color); |
|||
if (elementState.attributes) { |
|||
for (const attribute of elementState.attributes) { |
|||
this.prepareValue(attribute.value); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private prepareValue(value: ScadaObjectValue) { |
|||
if (value) { |
|||
if (value.type === 'function' && value.valueConvertFunction) { |
|||
try { |
|||
value.valueConverter = parseFunction(this.insertVariables(value.valueConvertFunction), ['value']); |
|||
} catch (e) { |
|||
value.valueConverter = (v) => v; |
|||
} |
|||
} else if (value.type === 'property') { |
|||
value.computedPropertyValue = this.getPropertyValue(value.propertyId); |
|||
} else if (value.type === 'valueFormat') { |
|||
if (value.units) { |
|||
this.prepareValue(value.units); |
|||
} |
|||
if (value.decimals) { |
|||
this.prepareValue(value.decimals); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private insertVariables(content: string): string { |
|||
for (const property of this.metadata.properties) { |
|||
const value = this.getPropertyValue(property.id); |
|||
content = insertVariable(content, property.id, value); |
|||
} |
|||
return content; |
|||
} |
|||
|
|||
private prepareSvgShape(doc: XMLDocument) { |
|||
const elements = doc.getElementsByTagName('tb:metadata'); |
|||
for (let i=0;i<elements.length;i++) { |
|||
elements.item(i).remove(); |
|||
} |
|||
this.svgShape = SVG().svg(doc.documentElement.innerHTML); |
|||
this.svgShape.node.style.overflow = 'visible'; |
|||
this.svgShape.node.style['user-select'] = 'none'; |
|||
this.box = this.svgShape.bbox(); |
|||
this.svgShape.size(this.box.width, this.box.height); |
|||
if (this.rootElement) { |
|||
this.svgShape.addTo(this.rootElement); |
|||
} |
|||
if (this.targetWidth && this.targetHeight) { |
|||
this.resize(); |
|||
} |
|||
} |
|||
|
|||
private initStates() { |
|||
for (const stateValueId of Object.keys(this.metadata.stateValues)) { |
|||
const stateValue = this.metadata.stateValues[stateValueId]; |
|||
this.stateValueSubjects[stateValueId] = new BehaviorSubject<any>(stateValue.initialValue); |
|||
this.stateValues[stateValueId] = stateValue.initialValue; |
|||
this.stateValueSubjects[stateValueId].subscribe(val => { |
|||
this.stateValues[stateValueId] = val; |
|||
const states = Object.values(this.metadata.states); |
|||
const triggerStates = states.filter(s => s.triggerValues && s.triggerValues.includes(stateValueId)); |
|||
for (const state of triggerStates) { |
|||
if (state.condition(this.stateValues)) { |
|||
this.updateState(state); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
for (const tag of Object.keys(this.metadata.actions)) { |
|||
const action = this.metadata.actions[tag]; |
|||
const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); |
|||
switch (action.trigger) { |
|||
case 'click': |
|||
elements.forEach(e => { |
|||
e.attr('cursor', 'pointer'); |
|||
e.on('click', () => { |
|||
this.triggerAction(action); |
|||
}); |
|||
}); |
|||
break; |
|||
} |
|||
} |
|||
for (const behavior of this.metadata.behavior) { |
|||
if (behavior.type === ScadaObjectBehaviorType.getValue) { |
|||
const getBehavior = behavior as ScadaObjectBehaviorGet; |
|||
let getValueSettings: GetValueSettings<any> = this.settings[getBehavior.id]; |
|||
getValueSettings = {...getValueSettings, actionLabel: getBehavior.name}; |
|||
const valueGetter = |
|||
ValueGetter.fromSettings(this.ctx, getValueSettings, getBehavior.valueType, { |
|||
next: (val) => {this.onValue(getBehavior.id, val);}, |
|||
error: (e) => {} |
|||
}); |
|||
this.valueGetters.push(valueGetter); |
|||
this.valueActions.push(valueGetter); |
|||
} else if (behavior.type === ScadaObjectBehaviorType.setValue) { |
|||
const setBehavior = behavior as ScadaObjectBehaviorSet; |
|||
let setValueSettings: SetValueSettings = this.settings[setBehavior.id]; |
|||
setValueSettings = {...setValueSettings, actionLabel: setBehavior.name}; |
|||
const valueSetter = ValueSetter.fromSettings<any>(this.ctx, setValueSettings); |
|||
this.valueSetters[setBehavior.id] = valueSetter; |
|||
this.valueActions.push(valueSetter); |
|||
} |
|||
} |
|||
const initialState = Object.values(this.metadata.states).find(s => s.initial); |
|||
if (initialState) { |
|||
this.updateState(initialState); |
|||
} |
|||
if (this.valueGetters.length) { |
|||
const getValueObservables: Array<Observable<any>> = []; |
|||
this.valueGetters.forEach(valueGetter => { |
|||
getValueObservables.push(valueGetter.getValue()); |
|||
}); |
|||
this.loadingSubject.next(true); |
|||
forkJoin(getValueObservables).subscribe( |
|||
{ |
|||
next: () => { |
|||
this.loadingSubject.next(false); |
|||
}, |
|||
error: () => { |
|||
this.loadingSubject.next(false); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
} |
|||
|
|||
private triggerAction(action: ScadaObjectElementAction) { |
|||
switch (action.actionType) { |
|||
case 'updateValue': |
|||
const targetValue = action.updateValueId; |
|||
const valueSubject = this.stateValueSubjects[targetValue]; |
|||
if (valueSubject) { |
|||
const currentVal = valueSubject.value; |
|||
let newValue: any; |
|||
switch (action.updateValueType) { |
|||
case 'toggle': |
|||
newValue = !currentVal; |
|||
break; |
|||
case 'increment': |
|||
if (isNumber(currentVal)) { |
|||
newValue = currentVal + action.updateValueInc; |
|||
} |
|||
break; |
|||
case 'constant': |
|||
newValue = action.updateValueConstant; |
|||
break; |
|||
} |
|||
if (isDefinedAndNotNull(newValue)) { |
|||
valueSubject.next(newValue); |
|||
const stateValue = this.metadata.stateValues[targetValue]; |
|||
if (stateValue.callBehavior) { |
|||
const observables: Observable<any>[] = []; |
|||
for (const behavior of stateValue.callBehavior) { |
|||
if (behavior.condition(newValue)) { |
|||
const valueSetter = this.valueSetters[behavior.behaviorId]; |
|||
observables.push(valueSetter.setValue(newValue)); |
|||
} |
|||
} |
|||
if (observables.length) { |
|||
this.loadingSubject.next(true); |
|||
forkJoin(observables).subscribe( |
|||
{ |
|||
next: () => { |
|||
this.loadingSubject.next(false); |
|||
}, |
|||
error: (err) => { |
|||
this.loadingSubject.next(false); |
|||
valueSubject.next(currentVal); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
break; |
|||
} |
|||
} |
|||
|
|||
private resize() { |
|||
let scale: number; |
|||
if (this.targetWidth < this.targetHeight) { |
|||
scale = this.targetWidth / this.box.width; |
|||
} else { |
|||
scale = this.targetHeight / this.box.height; |
|||
} |
|||
this.svgShape.node.style.transform = `scale(${scale})`; |
|||
} |
|||
|
|||
private onValue(id: string, value: any) { |
|||
const getBehavior = this.metadata.behavior.find(b => b.id === id) as ScadaObjectBehaviorGet; |
|||
value = this.normalizeValue(value, getBehavior.valueType); |
|||
for (const onUpdate of getBehavior.onUpdate) { |
|||
const targetStateValueId = onUpdate.updateValue; |
|||
this.stateValueSubjects[targetStateValueId].next(value); |
|||
} |
|||
} |
|||
|
|||
private updateState(state: ScadaObjectState) { |
|||
if (state) { |
|||
for (const elementState of state.state) { |
|||
const tag = elementState.tag; |
|||
let value; |
|||
if (elementState.inputValue) { |
|||
value = this.stateValues[elementState.inputValue]; |
|||
} |
|||
if (elementState.animationTimeline) { |
|||
elementState.animationTimeline.finish(); |
|||
} |
|||
const elements = this.svgShape.find(`[tb\\:tag="${tag}"]`); |
|||
if (elements.length) { |
|||
if (elementState.show) { |
|||
const show: boolean = this.computeValue(elementState.show, value); |
|||
elements.forEach(e => { |
|||
if (show) { |
|||
e.show(); |
|||
} else { |
|||
e.hide(); |
|||
} |
|||
}); |
|||
} |
|||
if (elementState.addClass) { |
|||
elements.forEach(e => { |
|||
e.addClass(elementState.addClass); |
|||
}); |
|||
} |
|||
if (elementState.removeClass) { |
|||
elements.forEach(e => { |
|||
e.removeClass(elementState.removeClass); |
|||
}); |
|||
} |
|||
if (elementState.attributes) { |
|||
const attrs = this.computeAttributes(elementState.attributes, value); |
|||
elements.forEach(e => { |
|||
this.setElementAttributes(elementState, e, attrs, elementState.animate); |
|||
}); |
|||
} |
|||
if (elementState.text) { |
|||
if (elementState.text.content) { |
|||
const text: string = this.computeValue(elementState.text.content, value); |
|||
elements.forEach(e => { |
|||
this.setElementText(e, text); |
|||
}); |
|||
} |
|||
if (elementState.text.font || elementState.text.color) { |
|||
let font: Font = this.computeValue(elementState.text.font, value); |
|||
if (typeof font !== 'object') { |
|||
font = undefined; |
|||
} |
|||
let color: string = this.computeValue(elementState.text.color, value); |
|||
if (typeof color !== 'string') { |
|||
color = undefined; |
|||
} |
|||
elements.forEach(e => { |
|||
this.setElementFont(e, font, color); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private normalizeValue(value: any, type: ValueType): any { |
|||
if (isUndefinedOrNull(value)) { |
|||
switch (type) { |
|||
case ValueType.STRING: |
|||
return ''; |
|||
case ValueType.INTEGER: |
|||
case ValueType.DOUBLE: |
|||
return 0; |
|||
case ValueType.BOOLEAN: |
|||
return false; |
|||
case ValueType.JSON: |
|||
return {}; |
|||
} |
|||
} else { |
|||
return value; |
|||
} |
|||
} |
|||
|
|||
private computeAttributes(attributes: ScadaObjectAttribute[], value: any): {[attr: string]: any} { |
|||
const res: {[attr: string]: any} = {}; |
|||
for (const attribute of attributes) { |
|||
const attr = attribute.name; |
|||
res[attr] = this.computeValue(attribute.value, value); |
|||
} |
|||
return res; |
|||
} |
|||
|
|||
private setElementAttributes(elementState: ScadaObjectElementState, element: Element, attrs: {[attr: string]: any}, animate?: number) { |
|||
if (isDefinedAndNotNull(animate)) { |
|||
this.animation(elementState, element, animate).attr(attrs); |
|||
} else { |
|||
element.attr(attrs); |
|||
} |
|||
} |
|||
|
|||
private setElementText(element: Element, text: string) { |
|||
let textElement: Text; |
|||
if (element.type === 'text') { |
|||
const children = element.children(); |
|||
if (children.length && children[0].type === 'tspan') { |
|||
textElement = children[0] as Text; |
|||
} else { |
|||
textElement = element as Text; |
|||
} |
|||
} else if (element.type === 'tspan') { |
|||
textElement = element as Text; |
|||
} |
|||
if (textElement) { |
|||
textElement.text(text); |
|||
} |
|||
} |
|||
|
|||
private setElementFont(element: Element, font: Font, color: string) { |
|||
if (element.type === 'text') { |
|||
const textElement = element as Text; |
|||
if (font) { |
|||
textElement.font({ |
|||
family: font.family, |
|||
size: (isDefinedAndNotNull(font.size) && isDefinedAndNotNull(font.sizeUnit)) ? |
|||
font.size + font.sizeUnit : null, |
|||
weight: font.weight, |
|||
style: font.style |
|||
}); |
|||
} |
|||
if (color) { |
|||
textElement.fill(color); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private animation(elementState: ScadaObjectElementState, element: Element, duration: number): Runner { |
|||
if (!elementState.animationTimeline) { |
|||
elementState.animationTimeline = new Timeline(); |
|||
} |
|||
element.timeline(elementState.animationTimeline); |
|||
return element.animate(duration, 0, 'now'); |
|||
} |
|||
|
|||
private computeValue(objectValue: ScadaObjectValue, value: any): any { |
|||
if (objectValue) { |
|||
switch (objectValue.type) { |
|||
case 'input': |
|||
return value; |
|||
case 'constant': |
|||
return objectValue.constantValue; |
|||
case 'property': |
|||
const property = this.getProperty(objectValue.propertyId); |
|||
if (property.type === 'color-settings') { |
|||
const colorProcessor: ColorProcessor = objectValue.computedPropertyValue; |
|||
colorProcessor.update(value); |
|||
return colorProcessor.color; |
|||
} else { |
|||
return objectValue.computedPropertyValue; |
|||
} |
|||
case 'function': |
|||
try { |
|||
return objectValue.valueConverter(value); |
|||
} catch (_e) { |
|||
return value; |
|||
} |
|||
case 'valueFormat': |
|||
let units = ''; |
|||
let decimals = 0; |
|||
if (objectValue.units) { |
|||
units = this.computeValue(objectValue.units, value); |
|||
} |
|||
if (objectValue.decimals) { |
|||
decimals = this.computeValue(objectValue.decimals, value); |
|||
} |
|||
return formatValue(value, decimals, units, false); |
|||
} |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
|
|||
private getProperty(id: string): ScadaObjectProperty { |
|||
return this.metadata.properties.find(p => p.id === id); |
|||
} |
|||
|
|||
private getPropertyValue(id: string): any { |
|||
const property = this.getProperty(id); |
|||
if (property) { |
|||
const value = this.settings[id]; |
|||
if (isDefinedAndNotNull(value)) { |
|||
if (property.type === 'color-settings') { |
|||
return ColorProcessor.fromSettings(value); |
|||
} |
|||
return value; |
|||
} else { |
|||
switch (property.type) { |
|||
case 'string': |
|||
return ''; |
|||
case 'number': |
|||
return 0; |
|||
case 'color': |
|||
return '#000'; |
|||
case 'color-settings': |
|||
return constantColor('#000'); |
|||
} |
|||
} |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,634 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { Box, Element, Runner, Svg, SVG, Text } from '@svgdotjs/svg.js'; |
|||
import { |
|||
DataToValueType, |
|||
GetValueAction, |
|||
GetValueSettings, |
|||
SetValueAction, |
|||
SetValueSettings, |
|||
ValueToDataType |
|||
} from '@shared/models/action-widget-settings.models'; |
|||
import { formatValue, isDefinedAndNotNull, isUndefinedOrNull, mergeDeep, parseFunction } from '@core/utils'; |
|||
import { BehaviorSubject, forkJoin, Observable, Observer } from 'rxjs'; |
|||
import { map, share } from 'rxjs/operators'; |
|||
import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models'; |
|||
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { WidgetAction, WidgetActionType } from '@shared/models/widget.models'; |
|||
|
|||
export interface IotSvgApi { |
|||
formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined; |
|||
text: (element: Element | Element[], text: string) => void; |
|||
font: (element: Element | Element[], font: Font, color: string) => void; |
|||
animate: (element: Element, duration: number) => Runner; |
|||
disable: (element: Element | Element[]) => void; |
|||
enable: (element: Element | Element[]) => void; |
|||
callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial<Observer<void>>) => void; |
|||
setValue: (valueId: string, value: any) => void; |
|||
} |
|||
|
|||
export interface IotSvgContext { |
|||
api: IotSvgApi; |
|||
tags: {[id: string]: Element[]}; |
|||
values: {[id: string]: any}; |
|||
properties: {[id: string]: any}; |
|||
} |
|||
|
|||
export type IotSvgStateRenderFunction = (svg: Svg, ctx: IotSvgContext) => void; |
|||
|
|||
export type IotSvgTagStateRenderFunction = (element: Element, ctx: IotSvgContext) => void; |
|||
|
|||
export type IotSvgActionTrigger = 'click'; |
|||
|
|||
export type IotSvgActionFunction = (event: Event, ctx: IotSvgContext) => void; |
|||
export interface IotSvgAction { |
|||
actionFunction?: string; |
|||
action?: IotSvgActionFunction; |
|||
} |
|||
|
|||
export interface IotSvgTag { |
|||
tag: string; |
|||
stateRenderFunction?: string; |
|||
stateRender?: IotSvgTagStateRenderFunction; |
|||
actions?: {[trigger: string]: IotSvgAction}; |
|||
} |
|||
|
|||
export enum IotSvgBehaviorType { |
|||
value = 'value', |
|||
action = 'action', |
|||
widgetAction = 'widgetAction' |
|||
} |
|||
|
|||
export interface IotSvgBehaviorBase { |
|||
id: string; |
|||
name: string; |
|||
type: IotSvgBehaviorType; |
|||
} |
|||
|
|||
export interface IotSvgBehaviorValue extends IotSvgBehaviorBase { |
|||
valueType: ValueType; |
|||
defaultValue: any; |
|||
valueId: string; |
|||
} |
|||
|
|||
export interface IotSvgBehaviorAction extends IotSvgBehaviorBase { |
|||
valueToDataType: ValueToDataType; |
|||
constantValue: any; |
|||
valueToDataFunction: string; |
|||
} |
|||
|
|||
export type IotSvgBehavior = IotSvgBehaviorValue | IotSvgBehaviorAction; |
|||
|
|||
export type IotSvgPropertyType = 'string' | 'number' | 'color' | 'color-settings' | 'font' | 'units' | 'switch'; |
|||
|
|||
export interface IotSvgPropertyBase { |
|||
id: string; |
|||
name: string; |
|||
type: IotSvgPropertyType; |
|||
default: any; |
|||
required?: boolean; |
|||
subLabel?: string; |
|||
divider?: boolean; |
|||
fieldSuffix?: string; |
|||
disableOnProperty?: string; |
|||
rowClass?: string; |
|||
fieldClass?: string; |
|||
} |
|||
|
|||
export interface IotSvgNumberProperty extends IotSvgPropertyBase { |
|||
min?: number; |
|||
max?: number; |
|||
step?: number; |
|||
} |
|||
|
|||
export type IotSvgProperty = IotSvgPropertyBase & IotSvgNumberProperty; |
|||
|
|||
export type ScadaObjectElementActionTrigger = 'click'; |
|||
|
|||
export type ScadaObjectActionType = 'updateValue'; |
|||
export type ScadaObjectActionUpdateValueType = 'toggle' | 'increment' | 'constant'; |
|||
|
|||
export interface ScadaObjectElementAction { |
|||
trigger: ScadaObjectElementActionTrigger; |
|||
enabledTriggerValues?: string[]; |
|||
enabledConditionFunction?: string; |
|||
enabledCondition?: (values: {[key: string]: any}) => boolean; |
|||
actionType: ScadaObjectActionType; |
|||
updateValueId?: string; |
|||
updateValueType?: ScadaObjectActionUpdateValueType; |
|||
updateValueConstant?: any; |
|||
updateValueInc?: number; |
|||
} |
|||
|
|||
export interface IotSvgMetadata { |
|||
title: string; |
|||
stateRenderFunction?: string; |
|||
stateRender?: IotSvgStateRenderFunction; |
|||
tags: IotSvgTag[]; |
|||
behavior: IotSvgBehavior[]; |
|||
properties: IotSvgProperty[]; |
|||
} |
|||
|
|||
export const emptyMetadata: IotSvgMetadata = { |
|||
title: '', |
|||
tags: [], |
|||
behavior: [], |
|||
properties: [] |
|||
}; |
|||
|
|||
|
|||
export const parseScadaObjectMetadataFromContent = (svgContent: string): IotSvgMetadata => { |
|||
try { |
|||
const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml'); |
|||
return parseScadaObjectMetadataFromDom(svgDoc); |
|||
} catch (_e) { |
|||
return emptyMetadata; |
|||
} |
|||
}; |
|||
|
|||
const parseScadaObjectMetadataFromDom = (svgDoc: Document): IotSvgMetadata => { |
|||
try { |
|||
const elements = svgDoc.getElementsByTagName('tb:metadata'); |
|||
if (elements.length) { |
|||
return JSON.parse(elements[0].textContent); |
|||
} else { |
|||
return emptyMetadata; |
|||
} |
|||
} catch (_e) { |
|||
console.error(_e); |
|||
return emptyMetadata; |
|||
} |
|||
}; |
|||
|
|||
const defaultGetValueSettings = (get: IotSvgBehaviorValue): GetValueSettings<any> => ({ |
|||
action: GetValueAction.DO_NOTHING, |
|||
defaultValue: get.defaultValue, |
|||
executeRpc: { |
|||
method: 'getState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return boolean value */\nreturn data;' |
|||
} |
|||
}); |
|||
|
|||
const defaultSetValueSettings = (set: IotSvgBehaviorAction): SetValueSettings => ({ |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SERVER_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: set.valueToDataType, |
|||
constantValue: set.constantValue, |
|||
valueToDataFunction: set.valueToDataFunction ? set.valueToDataFunction : |
|||
'/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;' |
|||
} |
|||
}); |
|||
|
|||
const defaultWidgetActionSettings = (widgetAction: IotSvgBehavior): WidgetAction => ({ |
|||
type: WidgetActionType.updateDashboardState, |
|||
targetDashboardStateId: null, |
|||
openRightLayout: false, |
|||
setEntityId: true, |
|||
stateEntityParamName: null |
|||
}); |
|||
|
|||
export const defaultScadaObjectSettings = (metadata: IotSvgMetadata): IotSvgObjectSettings => { |
|||
const settings: IotSvgObjectSettings = {}; |
|||
for (const behavior of metadata.behavior) { |
|||
if (behavior.type === IotSvgBehaviorType.value) { |
|||
settings[behavior.id] = defaultGetValueSettings(behavior as IotSvgBehaviorValue); |
|||
} else if (behavior.type === IotSvgBehaviorType.action) { |
|||
settings[behavior.id] = defaultSetValueSettings(behavior as IotSvgBehaviorAction); |
|||
} else if (behavior.type === IotSvgBehaviorType.widgetAction) { |
|||
settings[behavior.id] = defaultWidgetActionSettings(behavior); |
|||
} |
|||
} |
|||
for (const property of metadata.properties) { |
|||
settings[property.id] = property.default; |
|||
} |
|||
return settings; |
|||
}; |
|||
|
|||
export type IotSvgObjectSettings = {[id: string]: any}; |
|||
|
|||
const parseError = (ctx: WidgetContext, err: any): string => |
|||
ctx.$injector.get(UtilsService).parseException(err).message || 'Unknown Error'; |
|||
|
|||
export class IotSvgObject { |
|||
|
|||
private metadata: IotSvgMetadata; |
|||
private settings: IotSvgObjectSettings; |
|||
private context: IotSvgContext; |
|||
|
|||
private rootElement: HTMLElement; |
|||
private svgShape: Svg; |
|||
private box: Box; |
|||
private targetWidth: number; |
|||
private targetHeight: number; |
|||
|
|||
private loadingSubject = new BehaviorSubject(false); |
|||
private valueGetters: ValueGetter<any>[] = []; |
|||
private valueActions: ValueAction[] = []; |
|||
private valueSetters: {[behaviorId: string]: ValueSetter<any>} = {}; |
|||
|
|||
private stateValueSubjects: {[id: string]: BehaviorSubject<any>} = {}; |
|||
|
|||
loading$ = this.loadingSubject.asObservable().pipe(share()); |
|||
|
|||
private _onError: (error: string) => void = () => {}; |
|||
|
|||
constructor(private ctx: WidgetContext, |
|||
private svgPath: string, |
|||
private inputSettings: IotSvgObjectSettings) {} |
|||
|
|||
public init(): Observable<any> { |
|||
return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe( |
|||
map((inputSvgContent) => { |
|||
const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml'); |
|||
this.metadata = parseScadaObjectMetadataFromDom(doc); |
|||
const defaults = defaultScadaObjectSettings(this.metadata); |
|||
this.settings = mergeDeep<IotSvgObjectSettings>({}, defaults, this.inputSettings || {}); |
|||
this.prepareMetadata(); |
|||
this.prepareSvgShape(doc); |
|||
this.initialize(); |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public onError(onError: (error: string) => void) { |
|||
this._onError = onError; |
|||
} |
|||
|
|||
public addTo(element: HTMLElement) { |
|||
this.rootElement = element; |
|||
if (this.svgShape) { |
|||
this.svgShape.addTo(element); |
|||
} |
|||
} |
|||
|
|||
public destroy() { |
|||
for (const stateValueId of Object.keys(this.stateValueSubjects)) { |
|||
this.stateValueSubjects[stateValueId].complete(); |
|||
this.stateValueSubjects[stateValueId].unsubscribe(); |
|||
} |
|||
this.valueActions.forEach(v => v.destroy()); |
|||
this.loadingSubject.complete(); |
|||
this.loadingSubject.unsubscribe(); |
|||
} |
|||
|
|||
public setSize(targetWidth: number, targetHeight: number) { |
|||
this.targetWidth = targetWidth; |
|||
this.targetHeight = targetHeight; |
|||
if (this.svgShape) { |
|||
this.resize(); |
|||
} |
|||
} |
|||
|
|||
private prepareMetadata() { |
|||
this.metadata.stateRender = parseFunction(this.metadata.stateRenderFunction, ['svg', 'ctx']) || (() => {}); |
|||
for (const tag of this.metadata.tags) { |
|||
tag.stateRender = parseFunction(tag.stateRenderFunction, ['element', 'ctx']) || (() => {}); |
|||
if (tag.actions) { |
|||
for (const trigger of Object.keys(tag.actions)) { |
|||
const action = tag.actions[trigger]; |
|||
action.action = parseFunction(action.actionFunction, ['event', 'ctx']) || (() => {}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private prepareSvgShape(doc: XMLDocument) { |
|||
const elements = doc.getElementsByTagName('tb:metadata'); |
|||
for (let i=0;i<elements.length;i++) { |
|||
elements.item(i).remove(); |
|||
} |
|||
this.svgShape = SVG().svg(doc.documentElement.innerHTML); |
|||
this.svgShape.node.style.overflow = 'visible'; |
|||
this.svgShape.node.style['user-select'] = 'none'; |
|||
this.box = this.svgShape.bbox(); |
|||
this.svgShape.size(this.box.width, this.box.height); |
|||
if (this.rootElement) { |
|||
this.svgShape.addTo(this.rootElement); |
|||
} |
|||
if (this.targetWidth && this.targetHeight) { |
|||
this.resize(); |
|||
} |
|||
} |
|||
|
|||
private initialize() { |
|||
this.context = { |
|||
api: { |
|||
formatValue, |
|||
text: this.setElementText.bind(this), |
|||
font: this.setElementFont.bind(this), |
|||
animate: this.animate.bind(this), |
|||
disable: this.disableElement.bind(this), |
|||
enable: this.enableElement.bind(this), |
|||
callAction: this.callAction.bind(this), |
|||
setValue: this.setValue.bind(this) |
|||
}, |
|||
tags: {}, |
|||
properties: {}, |
|||
values: {} |
|||
}; |
|||
const taggedElements = this.svgShape.find(`[tb\\:tag]`); |
|||
for (const element of taggedElements) { |
|||
const tag = element.attr('tb:tag'); |
|||
let elements = this.context.tags[tag]; |
|||
if (!elements) { |
|||
elements = []; |
|||
this.context.tags[tag] = elements; |
|||
} |
|||
elements.push(element); |
|||
} |
|||
for (const property of this.metadata.properties) { |
|||
this.context.properties[property.id] = this.getPropertyValue(property.id); |
|||
} |
|||
for (const tag of this.metadata.tags) { |
|||
if (tag.actions) { |
|||
const elements = this.svgShape.find(`[tb\\:tag="${tag.tag}"]`); |
|||
for (const trigger of Object.keys(tag.actions)) { |
|||
const action = tag.actions[trigger]; |
|||
elements.forEach(element => { |
|||
element.attr('cursor', 'pointer'); |
|||
element.on(trigger, (event) => { |
|||
action.action(event, this.context); |
|||
}); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
for (const behavior of this.metadata.behavior) { |
|||
if (behavior.type === IotSvgBehaviorType.value) { |
|||
const getBehavior = behavior as IotSvgBehaviorValue; |
|||
let getValueSettings: GetValueSettings<any> = this.settings[getBehavior.id]; |
|||
getValueSettings = {...getValueSettings, actionLabel: getBehavior.name}; |
|||
const stateValueSubject = new BehaviorSubject<any>(getValueSettings.defaultValue); |
|||
this.stateValueSubjects[getBehavior.valueId] = stateValueSubject; |
|||
this.context.values[getBehavior.valueId] = getValueSettings.defaultValue; |
|||
stateValueSubject.subscribe((value) => { |
|||
this.onStateValueChanged(getBehavior.valueId, value); |
|||
}); |
|||
const valueGetter = |
|||
ValueGetter.fromSettings(this.ctx, getValueSettings, getBehavior.valueType, { |
|||
next: (val) => {this.onValue(getBehavior.id, val);}, |
|||
error: (err) => { |
|||
const message = parseError(this.ctx, err); |
|||
this._onError(message); |
|||
} |
|||
}); |
|||
this.valueGetters.push(valueGetter); |
|||
this.valueActions.push(valueGetter); |
|||
} else if (behavior.type === IotSvgBehaviorType.action) { |
|||
const setBehavior = behavior as IotSvgBehaviorAction; |
|||
let setValueSettings: SetValueSettings = this.settings[setBehavior.id]; |
|||
setValueSettings = {...setValueSettings, actionLabel: setBehavior.name}; |
|||
const valueSetter = ValueSetter.fromSettings<any>(this.ctx, setValueSettings); |
|||
this.valueSetters[setBehavior.id] = valueSetter; |
|||
this.valueActions.push(valueSetter); |
|||
} else if (behavior.type === IotSvgBehaviorType.widgetAction) { |
|||
// TODO:
|
|||
} |
|||
} |
|||
this.renderState(); |
|||
if (this.valueGetters.length) { |
|||
const getValueObservables: Array<Observable<any>> = []; |
|||
this.valueGetters.forEach(valueGetter => { |
|||
getValueObservables.push(valueGetter.getValue()); |
|||
}); |
|||
this.loadingSubject.next(true); |
|||
forkJoin(getValueObservables).subscribe( |
|||
{ |
|||
next: () => { |
|||
this.loadingSubject.next(false); |
|||
}, |
|||
error: () => { |
|||
this.loadingSubject.next(false); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
} |
|||
|
|||
private callAction(event: Event, behaviorId: string, value?: any, observer?: Partial<Observer<void>>) { |
|||
const behavior = this.metadata.behavior.find(b => b.id === behaviorId); |
|||
if (behavior) { |
|||
if (behavior.type === IotSvgBehaviorType.action) { |
|||
const valueSetter = this.valueSetters[behaviorId]; |
|||
if (valueSetter) { |
|||
this.loadingSubject.next(true); |
|||
valueSetter.setValue(value).subscribe( |
|||
{ |
|||
next: () => { |
|||
if (observer?.next) { |
|||
observer.next(); |
|||
} |
|||
this.loadingSubject.next(false); |
|||
}, |
|||
error: (err) => { |
|||
this.loadingSubject.next(false); |
|||
if (observer?.error) { |
|||
observer.error(err); |
|||
} |
|||
const message = parseError(this.ctx, err); |
|||
this._onError(message); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
} else if (behavior.type === IotSvgBehaviorType.widgetAction) { |
|||
const widgetAction: WidgetAction = this.settings[behavior.id]; |
|||
this.ctx.actionsApi.onWidgetAction(event, widgetAction); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private resize() { |
|||
let scale: number; |
|||
if (this.targetWidth < this.targetHeight) { |
|||
scale = this.targetWidth / this.box.width; |
|||
} else { |
|||
scale = this.targetHeight / this.box.height; |
|||
} |
|||
this.svgShape.node.style.transform = `scale(${scale})`; |
|||
} |
|||
|
|||
private onValue(id: string, value: any) { |
|||
const valueBehavior = this.metadata.behavior.find(b => b.id === id) as IotSvgBehaviorValue; |
|||
value = this.normalizeValue(value, valueBehavior.valueType); |
|||
const valueId = valueBehavior.valueId; |
|||
this.setValue(valueId, value); |
|||
} |
|||
|
|||
private setValue(valueId: string, value: any) { |
|||
const stateValueSubject = this.stateValueSubjects[valueId]; |
|||
if (stateValueSubject && stateValueSubject.value !== value) { |
|||
stateValueSubject.next(value); |
|||
} |
|||
} |
|||
|
|||
private onStateValueChanged(id: string, value: any) { |
|||
if (this.context.values[id] !== value) { |
|||
this.context.values[id] = value; |
|||
this.renderState(); |
|||
} |
|||
} |
|||
|
|||
private renderState(): void { |
|||
this.metadata.stateRender(this.svgShape, this.context); |
|||
for (const tag of this.metadata.tags) { |
|||
const elements = this.svgShape.find(`[tb\\:tag="${tag.tag}"]`); |
|||
elements.forEach(element => { |
|||
tag.stateRender(element, this.context); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private normalizeValue(value: any, type: ValueType): any { |
|||
if (isUndefinedOrNull(value)) { |
|||
switch (type) { |
|||
case ValueType.STRING: |
|||
return ''; |
|||
case ValueType.INTEGER: |
|||
case ValueType.DOUBLE: |
|||
return 0; |
|||
case ValueType.BOOLEAN: |
|||
return false; |
|||
case ValueType.JSON: |
|||
return {}; |
|||
} |
|||
} else { |
|||
return value; |
|||
} |
|||
} |
|||
|
|||
private setElementText(e: Element | Element[], text: string) { |
|||
this.elements(e).forEach(element => { |
|||
let textElement: Text; |
|||
if (element.type === 'text') { |
|||
const children = element.children(); |
|||
if (children.length && children[0].type === 'tspan') { |
|||
textElement = children[0] as Text; |
|||
} else { |
|||
textElement = element as Text; |
|||
} |
|||
} else if (element.type === 'tspan') { |
|||
textElement = element as Text; |
|||
} |
|||
if (textElement) { |
|||
textElement.text(text); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private setElementFont(e: Element | Element[], font: Font, color: string) { |
|||
this.elements(e).forEach(element => { |
|||
if (element.type === 'text') { |
|||
const textElement = element as Text; |
|||
if (font) { |
|||
textElement.font({ |
|||
family: font.family, |
|||
size: (isDefinedAndNotNull(font.size) && isDefinedAndNotNull(font.sizeUnit)) ? |
|||
font.size + font.sizeUnit : null, |
|||
weight: font.weight, |
|||
style: font.style |
|||
}); |
|||
} |
|||
if (color) { |
|||
textElement.fill(color); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private animate(element: Element, duration: number): Runner { |
|||
element.timeline().finish(); |
|||
return element.animate(duration, 0, 'now'); |
|||
} |
|||
|
|||
private disableElement(e: Element | Element[]) { |
|||
this.elements(e).forEach(element => { |
|||
element.attr({'pointer-events': 'none'}); |
|||
}); |
|||
} |
|||
|
|||
private enableElement(e: Element | Element[]) { |
|||
this.elements(e).forEach(element => { |
|||
element.attr({'pointer-events': null}); |
|||
}); |
|||
} |
|||
|
|||
private elements(element: Element | Element[]): Element[] { |
|||
return Array.isArray(element) ? element : [element]; |
|||
} |
|||
|
|||
private getProperty(id: string): IotSvgProperty { |
|||
return this.metadata.properties.find(p => p.id === id); |
|||
} |
|||
|
|||
private getPropertyValue(id: string): any { |
|||
const property = this.getProperty(id); |
|||
if (property) { |
|||
const value = this.settings[id]; |
|||
if (isDefinedAndNotNull(value)) { |
|||
if (property.type === 'color-settings') { |
|||
return ColorProcessor.fromSettings(value); |
|||
} |
|||
return value; |
|||
} else { |
|||
switch (property.type) { |
|||
case 'string': |
|||
return ''; |
|||
case 'number': |
|||
return 0; |
|||
case 'color': |
|||
return '#000'; |
|||
case 'color-settings': |
|||
return constantColor('#000'); |
|||
} |
|||
} |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 17 KiB |
Loading…
Reference in new issue