@meta2d/core - npm Package Compare versions

Comparing version 1.0.67 to 1.0.68

index.d.ts

@@ -10,1 +10,2 @@ export * from './src/core';
 export * from './src/store';
+export * from './src/theme';

index.js

@@ -10,2 +10,3 @@ export * from './src/core';
 export * from './src/store';
+export * from './src/theme';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@meta2d/core",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .",
@@ -5,0 +5,0 @@ "main": "index.js",

src/diagrams/gif.js

@@ -16,3 +16,5 @@ import { setElemPosition } from '../pen';
     }
-    if (!gifsList[pen.id]) {
+    const meta2dId = pen.calculative.canvas.store.id;
+    const id = meta2dId + '-' + pen.id;
+    if (!gifsList[id]) {
         const img = new Image();
@@ -27,5 +29,5 @@ img.crossOrigin = 'anonymous';
         }
-        gifsList[pen.id] = img; // 提前赋值，避免重复创建
+        gifsList[id] = img; // 提前赋值，避免重复创建
         img.onload = () => {
-            if (gifsList[pen.id] !== img) {
+            if (gifsList[id] !== img) {
                 return;
@@ -41,4 +43,4 @@ }
     }
-    if (pen.calculative.patchFlags && gifsList[pen.id]) {
-        setImagePosition(pen, gifsList[pen.id]);
+    if (pen.calculative.patchFlags && gifsList[id]) {
+        setImagePosition(pen, gifsList[id]);
     }
@@ -48,34 +50,43 @@ return path;
 function destory(pen) {
-    if (gifsList[pen.id]) {
-        gifsList[pen.id].remove();
-        gifsList[pen.id] = undefined;
+    const meta2dId = pen.calculative.canvas.store.id;
+    const id = meta2dId + '-' + pen.id;
+    if (gifsList[id]) {
+        gifsList[id].remove();
+        gifsList[id] = undefined;
     }
 }
 function move(pen) {
-    if (!gifsList[pen.id]) {
+    const meta2dId = pen.calculative.canvas.store.id;
+    const id = meta2dId + '-' + pen.id;
+    if (!gifsList[id]) {
         return;
     }
-    setImagePosition(pen, gifsList[pen.id]);
+    setImagePosition(pen, gifsList[id]);
 }
 function resize(pen) {
-    if (!gifsList[pen.id]) {
+    const meta2dId = pen.calculative.canvas.store.id;
+    const id = meta2dId + '-' + pen.id;
+    if (!gifsList[id]) {
         return;
     }
-    setImagePosition(pen, gifsList[pen.id]);
+    setImagePosition(pen, gifsList[id]);
 }
 function value(pen) {
-    if (!gifsList[pen.id]) {
+    const meta2dId = pen.calculative.canvas.store.id;
+    const id = meta2dId + '-' + pen.id;
+    if (!gifsList[id]) {
         return;
     }
-    setImagePosition(pen, gifsList[pen.id]);
-    if (gifsList[pen.id].getAttribute('src') !== pen.image) {
-        gifsList[pen.id].src = pen.image;
+    setImagePosition(pen, gifsList[id]);
+    if (gifsList[id].getAttribute('src') !== pen.image) {
+        gifsList[id].src = pen.image;
     }
 }
 function changeId(pen, oldId, newId) {
-    if (!gifsList[oldId]) {
+    const meta2dId = pen.calculative.canvas.store.id;
+    if (!gifsList[meta2dId + '-' + oldId]) {
         return;
     }
-    gifsList[newId] = gifsList[oldId];
-    delete gifsList[oldId];
+    gifsList[meta2dId + '-' + newId] = gifsList[meta2dId + '-' + oldId];
+    delete gifsList[meta2dId + '-' + oldId];
 }
@@ -82,0 +93,0 @@ /**

src/diagrams/index.d.ts

@@ -18,3 +18,3 @@ export * from './rectangle';
 export * from './video';
-export * from './panel';
+export * from './form';
 import { rectangle } from './rectangle';
@@ -39,3 +39,3 @@ import { circle } from './circle';
 import { mindLine, mindLineAnchors } from './mindLine';
-import { panel } from './panel';
+import { form } from './form';
 export declare function commonPens(): {
@@ -65,3 +65,3 @@ rectangle: typeof rectangle;
     mindNode2: typeof rectangle;
-    panel: typeof panel;
+    form: typeof form;
     combine: typeof rectangle;
@@ -68,0 +68,0 @@ };

src/diagrams/index.js

@@ -18,3 +18,3 @@ export * from './rectangle';
 export * from './video';
-export * from './panel';
+export * from './form';
 import { rectangle, square } from './rectangle';
@@ -40,3 +40,3 @@ import { circle } from './circle';
 import { mindLine, mindLineAnchors } from './mindLine';
-import { panel } from './panel';
+import { form } from './form';
 export function commonPens() {
@@ -67,3 +67,3 @@ return {
         mindNode2: rectangle,
-        panel,
+        form,
         combine: rectangle,
@@ -70,0 +70,0 @@ };

src/event/event.d.ts

@@ -5,3 +5,3 @@ import { Meta2d } from '../core';
 export type EventValue = string | IValue | undefined | null;
-export type EventName = 'enter' | 'leave' | 'active' | 'inactive' | 'click' | 'mousedown' | 'mouseup' | 'dblclick' | 'valueUpdate' | 'message' | 'contextmenu' | 'input' | 'change';
+export type EventName = 'enter' | 'leave' | 'active' | 'inactive' | 'click' | 'mousedown' | 'mouseup' | 'dblclick' | 'valueUpdate' | 'message' | 'contextmenu' | 'input' | 'change' | 'submit' | 'reset';
 export interface Event {
@@ -8,0 +8,0 @@ name: EventName;

src/pen/model.d.ts

@@ -287,2 +287,7 @@ import { Point } from '../point';
     copyIndex?: number;
+    formId?: string;
+    formData?: any;
+    formKey?: string;
+    formValue?: string;
+    formType?: string;
     calculative?: {
@@ -289,0 +294,0 @@ x?: number;

src/theme.d.ts

@@ -13,2 +13,57 @@ export interface Theme {
 }
+export declare const themeKeys: string[];
 export declare const defaultTheme: Theme;
+export declare const le5leTheme: {
+    cssRuleSelector: string;
+    style_prefix: string;
+    vendor_css_prefix: string;
+    dark: string[];
+    light: string[];
+    /**
+     * @description 添加厂商前缀，如：--le-text-color-primary: #7f838c
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} theme
+     * @returns {*}
+     */
+    _addVendorCssPrefix(themeList: any): any;
+    /**
+     * @description 创建主题css变量样式表
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} theme 主题名
+     * @param {*} id 样式表id，用于查找样式表，确保唯一
+     */
+    createThemeSheet(theme: any, id: any): void;
+    /**
+     * @description 销毁主题样式表，根据id查找样式表并删除，释放内存空间，避免内存泄漏
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} id
+     */
+    destroyThemeSheet(id: any): void;
+    /**
+     * @description 根据主题名称获取主题变量
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} theme
+     * @returns {*}
+     */
+    getTheme(theme: any): any;
+    /**
+     * @description 根据id查找样式表
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} id
+     * @returns {*}
+     */
+    findStyleSheet(id: any): CSSStyleSheet;
+    /**
+     * @description 更新样式表的主题变量
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} id
+     * @param {*} theme
+     */
+    updateCssRule(id: any, themeName: any): void;
+};

src/theme.js

@@ -0,1 +1,21 @@
+export const themeKeys = [
+    'color',
+    'hoverColor',
+    'activeColor',
+    'disabledColor',
+    'background',
+    'activeBackground', //有无必要
+    'hoverBackground',
+    'disabledBackground',
+    'anchorColor',
+    'hoverAnchorColor',
+    'anchorBackground',
+    'animateColor',
+    'textColor',
+    'ruleColor',
+    'ruleLineColor',
+    'gridColor',
+    'lineColor',
+    // "ruleOptions"
+];
 export const defaultTheme = {
@@ -23,2 +43,165 @@ dark: {
 };
+// le5le主题对象
+export const le5leTheme = {
+    "cssRuleSelector": ":root",
+    "style_prefix": "le5le_",
+    "vendor_css_prefix": "--le-",
+    "dark": [
+        'text-color-primary: #7f838c',
+        'text-color-second: rgba(255,255,255,0.90)',
+        'text-color-disabled: rgba(255,255,255,0.40)',
+        'container-bg: rgba(21,24,28,0.95)',
+        'form-bg: #2a2f36',
+        'date-picker-cell-active-with-range-bg: #2c4475',
+        'component-disabled-bg-color: #252b37',
+        'data-picker-cell-active-bg: #4583ff',
+        'active-bg: #25375b',
+        'popcontent-bg: #252b37',
+        'bdcolor-outside: #4583ff',
+        'bdcolor-form: #424b61',
+        'bdcolor-inside: rgba(255,255,255,0.40)',
+        'shadow: 0px 1px 10px 0px rgba(0,0,0,0.05), 0px 4px 5px 0px rgba(0,0,0,0.08), 0px 2px 4px -1px rgba(0,0,0,0.12)',
+        'radius: 4px',
+    ],
+    "light": [
+        'text-color-primary: #7f838c',
+        'text-color-second: #171B27',
+        'text-color-disabled: rgba(0, 0, 0, 0.6)',
+        'container-bg: #ffffff',
+        'form-bg: #EFF1F4',
+        'date-picker-cell-active-with-range-bg: #f2f3ff',
+        'component-disabled-bg-color: #eee',
+        'data-picker-cell-active-bg: #0052d9',
+        'active-bg: #f2f3ff',
+        'popcontent-bg: #ffffff',
+        'bdcolor-outside: transparent',
+        'bdcolor-form: #d4d6d9',
+        'bdcolor-inside: #e7e7e7',
+        'shadow: 0px 2px 4px 0px rgba(107,113,121,0.25)',
+        'radius: 4px',
+    ],
+    /**
+     * @description 添加厂商前缀，如：--le-text-color-primary: #7f838c
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} theme
+     * @returns {*}
+     */
+    _addVendorCssPrefix(themeList) {
+        return themeList.map(item => {
+            const [key, value] = item.split(':');
+            return `${this.vendor_css_prefix}${key.trim()}:${value.trim()}`;
+        });
+    },
+    /**
+     * @description 创建主题css变量样式表
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} theme 主题名
+     * @param {*} id 样式表id，用于查找样式表，确保唯一
+     */
+    createThemeSheet(theme, id) {
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.id = this.style_prefix + id;
+        document.head.appendChild(style);
+        // 设置初始样式变量
+        const _theme = theme || 'light';
+        const cssDeclarations = this.getTheme(_theme);
+        const newRuleText = `${this.cssRuleSelector} { ${cssDeclarations.join(';')} }`;
+        style.innerHTML = newRuleText;
+    },
+    /**
+     * @description 销毁主题样式表，根据id查找样式表并删除，释放内存空间，避免内存泄漏
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} id
+     */
+    destroyThemeSheet(id) {
+        const styleSheet = this.findStyleSheet(this.style_prefix + id);
+        if (styleSheet) {
+            document.head.removeChild(styleSheet.ownerNode);
+        }
+    },
+    /**
+     * @description 根据主题名称获取主题变量
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} theme
+     * @returns {*}
+     */
+    getTheme(theme) {
+        return this._addVendorCssPrefix(this[theme] || this.light);
+    },
+    /**
+     * @description 根据id查找样式表
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} id
+     * @returns {*}
+     */
+    findStyleSheet(id) {
+        const styleSheets = document.styleSheets;
+        for (let i = 0; i < styleSheets.length; i++) {
+            const styleSheet = styleSheets[i];
+            if (styleSheet.ownerNode && styleSheet.ownerNode.id === id) {
+                return styleSheet;
+            }
+        }
+        return null;
+    },
+    /**
+     * @description 更新样式表的主题变量
+     * @author Joseph Ho
+     * @date 26/12/2024
+     * @param {*} id
+     * @param {*} theme
+     */
+    updateCssRule(id, themeName) {
+        const theme = this.getTheme(themeName);
+        const newCssDeclarations = theme;
+        const styleSheet = this.findStyleSheet(this.style_prefix + id);
+        let ruleExists = false;
+        for (let i = 0; i < styleSheet.cssRules.length; i++) {
+            const rule = styleSheet.cssRules[i];
+            if (rule.selectorText === this.cssRuleSelector) {
+                ruleExists = true;
+                break;
+            }
+        }
+        if (ruleExists) {
+            // 先删除旧规则，再插入新规则
+            for (let i = 0; i < styleSheet.cssRules.length; i++) {
+                const rule = styleSheet.cssRules[i];
+                if (rule.selectorText === this.cssRuleSelector) {
+                    if (styleSheet.insertRule) {
+                        styleSheet.deleteRule(i);
+                        const newRuleText = `${this.cssRuleSelector} { ${newCssDeclarations.join(';')} }`;
+                        styleSheet.insertRule(newRuleText, i);
+                    }
+                    else if (styleSheet.addRule) {
+                        rule.style.cssText = newCssDeclarations.join(';');
+                    }
+                }
+            }
+        }
+        else {
+            // 插入新规则
+            if (styleSheet.insertRule) {
+                const newRuleText = `${this.cssRuleSelector} { ${newCssDeclarations.join(';')} }`;
+                styleSheet.insertRule(newRuleText, styleSheet.cssRules.length);
+            }
+            else if (styleSheet.addRule) {
+                const existingRootRule = styleSheet.cssRules.find(rule => rule.selectorText === this.cssRuleSelector);
+                if (existingRootRule) {
+                    const declarationsToAdd = newCssDeclarations.join(';');
+                    existingRootRule.style.cssText += `; ${declarationsToAdd}`;
+                }
+                else {
+                    styleSheet.addRule(this.cssRuleSelector, newCssDeclarations.join(';'));
+                }
+            }
+        }
+    }
+};
 //# sourceMappingURL=theme.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1940319

increased by1.34%

Lines of code

27400

increased by1.52%

No dependency changes