mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-09-20 05:29:58 +08:00
124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
/*
|
||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||
*
|
||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||
*
|
||
* 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 { JsEngine } from '@tmagic/schema';
|
||
|
||
export const style2Obj = (style: string) => {
|
||
if (typeof style !== 'string') {
|
||
return style;
|
||
}
|
||
|
||
const obj: Record<string, any> = {};
|
||
style.split(';').forEach((element) => {
|
||
if (!element) {
|
||
return;
|
||
}
|
||
|
||
const items = element.split(':');
|
||
|
||
let key = items.shift();
|
||
let value = items.join(':');
|
||
|
||
if (!key) return;
|
||
|
||
key = key.replace(/^\s*/, '').replace(/\s*$/, '');
|
||
value = value.replace(/^\s*/, '').replace(/\s*$/, '');
|
||
|
||
key = key
|
||
.split('-')
|
||
.map((v, i) => (i > 0 ? `${v[0].toUpperCase()}${v.substr(1)}` : v))
|
||
.join('');
|
||
|
||
obj[key] = value;
|
||
});
|
||
return obj;
|
||
};
|
||
|
||
export const fillBackgroundImage = (value: string) => {
|
||
if (value && !/^url/.test(value) && !/^linear-gradient/.test(value)) {
|
||
return `url(${value})`;
|
||
}
|
||
return value;
|
||
};
|
||
|
||
export const isNumber = (value: string) => /^(-?\d+)(\.\d+)?$/.test(value);
|
||
|
||
export const getTransform = (value: Record<string, string>, jsEngine: JsEngine) => {
|
||
if (!value) return [];
|
||
|
||
const transform = Object.entries(value).map(([transformKey, transformValue]) => {
|
||
if (!transformValue.trim()) return '';
|
||
if (transformKey === 'rotate' && isNumber(transformValue)) {
|
||
transformValue = `${transformValue}deg`;
|
||
}
|
||
|
||
return jsEngine !== 'hippy' ? `${transformKey}(${transformValue})` : { [transformKey]: transformValue };
|
||
});
|
||
|
||
if (jsEngine === 'hippy') {
|
||
return transform;
|
||
}
|
||
const values = transform.join(' ');
|
||
return !values.trim() ? 'none' : values;
|
||
};
|
||
|
||
/**
|
||
* 将dsl中的style配置转换成css，主要是将数值转成rem为单位的样式值，例如100将被转换成1rem
|
||
* @param style Object
|
||
* @returns Object
|
||
*/
|
||
export const transformStyle = (style: Record<string, any> | string, jsEngine: JsEngine) => {
|
||
if (!style) {
|
||
return {};
|
||
}
|
||
|
||
let styleObj: Record<string, any> = {};
|
||
const results: Record<string, any> = {};
|
||
|
||
if (typeof style === 'string') {
|
||
styleObj = style2Obj(style);
|
||
} else {
|
||
styleObj = { ...style };
|
||
}
|
||
|
||
const isHippy = jsEngine === 'hippy';
|
||
|
||
const whiteList = ['zIndex', 'opacity', 'fontWeight'];
|
||
Object.entries(styleObj).forEach(([key, value]) => {
|
||
if (key === 'scale' && !results.transform && isHippy) {
|
||
results.transform = [{ scale: value }];
|
||
} else if (key === 'backgroundImage' && !isHippy) {
|
||
value && (results[key] = fillBackgroundImage(value));
|
||
} else if (key === 'transform' && typeof value !== 'string') {
|
||
results[key] = getTransform(value, jsEngine);
|
||
} else if (!whiteList.includes(key) && value && /^[-]?[0-9]*[.]?[0-9]*$/.test(value)) {
|
||
results[key] = isHippy ? value : `${value / 100}rem`;
|
||
} else {
|
||
results[key] = value;
|
||
}
|
||
});
|
||
|
||
return results;
|
||
};
|
||
|
||
export const calcFontsize = (designWidth: number) => {
|
||
const { width } = document.documentElement.getBoundingClientRect();
|
||
const fontSize = width / (designWidth / 100);
|
||
document.documentElement.style.fontSize = `${fontSize}px`;
|
||
};
|