react-dialogger 1.1.59 → 1.1.65

package/components/Actions.js

@@ -18,13 +18,14 @@ var Actions = function (_a) {
     var actions = _a.actions, dialog = _a.dialog;
     var dialogOptions = dialog.dialogOptions;
     return (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: actions.map(function (action, index) {
-            console.log('Actions_action', __assign(__assign({}, action.options), action.getIntent()));
+            console.log('Actions_action', __assign(__assign({}, action.options), action.intent));
             var referencedAction = dialog.initializeActionRef(action.name);
+            action._actionComponent = referencedAction;
             return (0, jsx_runtime_1.jsx)(_components_1.DialogActionBase, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, 
                 //onClick={ action.onClickHandler() }
                 onClick: action._onCLick, 
                 // inProcess={action.isInProcess()}
-                style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener, options: action.options, intent: action.getIntent() }, index.toString());
+                style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener, options: action.options, intent: action.intent() }, index.toString());
         }) });
 };
 exports.Actions = Actions;

package/components/DialogActionBase.d.ts

@@ -1,6 +1,20 @@
 import { Component } from "react";
 import { DialogBase } from "./index.js";
 import { ActionProps, ActionState, DialogActionType, TBVariant, TBColor, DialogActionOptionsType, TDialogStateListenerForActionCallbackType, ActionIntent } from "../types/index.js";
+export declare const BASE_INTENTS: {
+    readonly positive: {
+        readonly color: "primary";
+        readonly variant: "contained";
+    };
+    readonly negative: {
+        readonly color: "error";
+        readonly variant: "contained";
+    };
+    readonly neutral: {
+        readonly variant: "text";
+        readonly color: "primary";
+    };
+};
 declare class DialogActionBase extends Component<ActionProps, ActionState> {
     get dialogBaseComponent(): DialogBase<any>;
     protected _options: DialogActionOptionsType;

package/components/DialogActionBase.js

@@ -59,10 +59,25 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BASE_INTENTS = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var React = __importStar(require("react"));
 var _components_1 = require("./index.js");
+exports.BASE_INTENTS = {
+    positive: {
+        color: 'primary',
+        variant: 'contained',
+    },
+    negative: {
+        color: 'error',
+        variant: 'contained',
+    },
+    neutral: {
+        variant: 'text',
+        color: 'primary',
+    },
+};
 var DialogActionBase = /** @class */ (function (_super) {
     __extends(DialogActionBase, _super);
     function DialogActionBase(props) {
@@ -203,11 +218,13 @@ var DialogActionBase = /** @class */ (function (_super) {
         _this._inProcess = props.inProcess;
         var converted = (_b = (_a = props.name) === null || _a === void 0 ? void 0 : _a.replace(/action/i, '')) !== null && _b !== void 0 ? _b : props.name;
         var label = (_g = ((_f = (_e = (_d = (_c = _this.props.dialogBaseComponent) === null || _c === void 0 ? void 0 : _c.dialogOptions) === null || _d === void 0 ? void 0 : _d.localText) === null || _e === void 0 ? void 0 : _e[converted]) !== null && _f !== void 0 ? _f : converted)) !== null && _g !== void 0 ? _g : 'Button';
+        var initialIntents = props.dialogBaseComponent.dialogOptions.base.actions.initialIntents;
+        var mergedIntents = __assign(__assign({}, exports.BASE_INTENTS), initialIntents);
         _this.state = {
             coords: { x: -1, y: -1 },
             isRippling: false,
             // intent: props.intent,
-            options: __assign(__assign(__assign({}, props.options), props.intent), { label: label }),
+            options: __assign(__assign(__assign({}, props.options), mergedIntents[props.intent]), { label: label }),
             inProcess: false
         };
         _this._buttonRef = React.createRef();
@@ -245,7 +262,7 @@ var DialogActionBase = /** @class */ (function (_super) {
         configurable: true
     });
     DialogActionBase.prototype.updateOptions = function (options) {
-        this.setState(function (prevState) { return (__assign(__assign({}, prevState), { options: options })); });
+        this.setState(function (prevState) { return (__assign(__assign({}, prevState), { options: __assign(__assign({}, prevState.options), options) })); });
         // this._options = {...this._options, ...options};
         // this.forceUpdate();
         return this;

package/components/DialogWithBackdropWrapper.js

@@ -9,7 +9,7 @@ var _context_1 = require("../context/index.js");
 var DialogWithBackdropWrapper = function () {
     var _a = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _a.dialog, backdropRef = _a.backdropRef, baseZoomEffect = _a.baseZoomEffect;
     var _b = dialog.dialogOptions.backdrop, backgroundColor = _b.backgroundColor, opacity = _b.opacity;
-    var bgCl = (0, _helpers_1.hexToRgb)(backgroundColor, opacity);
+    var bgCl = (0, _helpers_1.hexToRGB)(backgroundColor, opacity);
     return (0, jsx_runtime_1.jsx)("div", { className: "dialog-backdrop dialog-backdrop-show", ref: backdropRef, style: {
             justifyContent: dialog.dialogOptions.base.initialAnchor.horizontal,
             // alignItems: dialogOptions.base.initialAnchor.vertical,

package/components/RippleButton.js

@@ -47,8 +47,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 var react_1 = require("react");
-var _helpers_1 = require("../helpers/index.js");
-var hexToRgb_1 = require("../helpers/hexToRgb");
+var Colorify_1 = require("../helpers/Colorify");
 exports.default = React.forwardRef(function (_a, ref) {
     var variant = _a.variant, color = _a.color, children = _a.children, disabled = _a.disabled, onClick = _a.onClick, style = _a.style, baseStyle = _a.baseStyle, innerRef = _a.innerRef, fontFamily = _a.fontFamily;
     var _b = React.useState({ x: -1, y: -1 }), coords = _b[0], setCoords = _b[1];
@@ -80,16 +79,25 @@ exports.default = React.forwardRef(function (_a, ref) {
     }); });
     var namedColors = ["primary", "success", "error", "warning", "info", "secondary", "default"];
     var isNamedColor = namedColors.includes(color);
-    var localColor = null;
+    var hexedColor = null;
+    var exclusive = {};
     if (!isNamedColor) {
         // Like Yellow
-        localColor = color;
-        if (!(0, hexToRgb_1.isHexColor)(localColor)) {
-            localColor = (0, hexToRgb_1.colorNameToHex)(localColor);
+        hexedColor = color;
+        if (!(0, Colorify_1.isHexColor)(hexedColor)) {
+            hexedColor = (0, Colorify_1.colorNameToHex)(hexedColor);
         }
-        localColor = (0, _helpers_1.hexToRgb)(localColor, disabled ? .5 : 1);
+        exclusive = (0, Colorify_1.getButtonColors)(hexedColor);
+        // textColor   = getLuminance(hexedColor);
+        // bgColor     = hexToRGB(hexedColor, disabled ? .5 : 1);
+        //
+        // exclusive.color             = textColor;
+        // exclusive.backgroundColor   = bgColor;
+        console.log('Button_exclusive', exclusive, hexedColor);
+    }
+    else {
+        exclusive = null;
     }
-    console.log('Ripple_button_style', localColor);
     return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, disabled: disabled, className: "ripple-button ripple-button-".concat(variant, " ripple-button-").concat(color, " ").concat(disabled ? 'ripple-button-disabled' : ''), onClick: function (e) {
             //@ts-ignore
             var rect = e.target.getBoundingClientRect();
@@ -97,5 +105,5 @@ exports.default = React.forwardRef(function (_a, ref) {
             setTimeout(function () {
                 onClick && onClick(e);
             }, 200);
-        }, style: __assign(__assign(__assign(__assign(__assign({}, baseStyle), style), { fontFamily: fontFamily }), localColor ? { backgroundColor: localColor } : null), variant === 'text' ? { border: "none" } : null), children: [isRippling && (0, jsx_runtime_1.jsx)("span", { className: "ripple", style: { left: coords.x, top: coords.y } }), (0, jsx_runtime_1.jsx)("span", { className: "content", children: children(ref.current) })] }));
+        }, style: __assign(__assign(__assign(__assign(__assign({}, baseStyle), style), { fontFamily: fontFamily }), exclusive), variant === 'text' ? { border: "none" } : null), children: [isRippling && (0, jsx_runtime_1.jsx)("span", { className: "ripple", style: { left: coords.x, top: coords.y } }), (0, jsx_runtime_1.jsx)("span", { className: "content", children: children(ref.current) })] }));
 });

package/helpers/Colorify.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from "react";
+declare const hexToRGB: (hex: string, opacity: number) => string;
+export type HexColor = `#${string}`;
+declare function isHexColor(color: string): color is HexColor;
+declare function colorNameToHex(colorName: string): string | null;
+declare function getLuminance(hex: string): number;
+declare const getButtonColors: (hex: string) => Pick<CSSProperties, "color" | "backgroundColor">;
+export { hexToRGB, colorNameToHex, isHexColor, getLuminance, getButtonColors };

package/helpers/Colorify.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getButtonColors = exports.hexToRGB = void 0;
+exports.colorNameToHex = colorNameToHex;
+exports.isHexColor = isHexColor;
+exports.getLuminance = getLuminance;
+var hexToRGB = function (hex, opacity) {
+    try {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        var colors = {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        };
+        return "rgba(".concat(colors.r, ", ").concat(colors.g, ", ").concat(colors.b, ", ").concat(opacity, ")");
+    }
+    catch (e) {
+        console.warn('Color should be hex string', e.message);
+    }
+    return '';
+};
+exports.hexToRGB = hexToRGB;
+function isHexColor(color) {
+    return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color);
+}
+function colorNameToHex(colorName) {
+    var ctx = document.createElement("canvas").getContext("2d");
+    if (!ctx)
+        return null;
+    ctx.fillStyle = colorName;
+    return ctx.fillStyle; // canvas, renk ismini hex'e çevirir
+}
+function getLuminance(hex) {
+    var rgb = hex.replace("#", "").match(/.{2}/g).map(function (v) { return parseInt(v, 16) / 255; });
+    var _a = rgb.map(function (c) {
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    }), r = _a[0], g = _a[1], b = _a[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function normalizeHex(hex) {
+    if (hex.length === 4) {
+        // #fff -> #ffffff
+        return "#" + hex.slice(1).split("").map(function (c) { return c + c; }).join("");
+    }
+    return hex;
+}
+function adjustColor(hex, amount) {
+    var rgb = normalizeHex(hex)
+        .replace("#", "")
+        .match(/.{2}/g)
+        .map(function (v) { return parseInt(v, 16); });
+    var adjusted = rgb.map(function (v) {
+        return Math.min(255, Math.max(0, v + amount));
+    });
+    return "#".concat(adjusted.map(function (v) { return v.toString(16).padStart(2, "0"); }).join(""));
+}
+var getButtonColors = function (hex) {
+    if (!isHexColor(hex)) {
+        console.warn("getButtonColors: invalid hex color", hex);
+        return { backgroundColor: "#ccc", color: "#000" };
+    }
+    var normalized = normalizeHex(hex);
+    var lum = getLuminance(normalized);
+    // const backgroundColor =
+    //     lum > 0.5
+    //         ? adjustColor(normalized, -120) // açık → koyu
+    //         : adjustColor(normalized, 120);  // koyu → açık
+    var backgroundColor = normalized;
+    var color = getLuminance(backgroundColor) > 0.5 ? "#000" : "#fff";
+    // const color =
+    //     lum > 0.5
+    //         ? adjustColor(normalized, -120) // açık → koyu
+    //         : adjustColor(normalized, 120);  // koyu → açık
+    return { backgroundColor: backgroundColor, color: color };
+};
+exports.getButtonColors = getButtonColors;

package/helpers/index.d.ts

@@ -3,4 +3,4 @@ export * from "./dialogBoundsMemoize";
 export { formInputKeyListeners } from "./formInputKeyListeners";
 export * from "./Resizeable";
 export { dialogRectAuto } from "./dialogRectAuto";
-export { hexToRgb } from "./hexToRgb";
+export { hexToRGB } from "./Colorify";

package/helpers/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hexToRgb = exports.dialogRectAuto = exports.formInputKeyListeners = exports.registeredDialogs = exports.InitDialogMemoizeBoundsDeclared = exports.InitDialogMemoizeBounds = void 0;
+exports.hexToRGB = exports.dialogRectAuto = exports.formInputKeyListeners = exports.registeredDialogs = exports.InitDialogMemoizeBoundsDeclared = exports.InitDialogMemoizeBounds = void 0;
 var initDialogMemoizeBounds_1 = require("./initDialogMemoizeBounds");
 Object.defineProperty(exports, "InitDialogMemoizeBounds", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBounds; } });
 Object.defineProperty(exports, "InitDialogMemoizeBoundsDeclared", { enumerable: true, get: function () { return initDialogMemoizeBounds_1.InitDialogMemoizeBoundsDeclared; } });
@@ -25,5 +25,5 @@ Object.defineProperty(exports, "formInputKeyListeners", { enumerable: true, get:
 __exportStar(require("./Resizeable"), exports);
 var dialogRectAuto_1 = require("./dialogRectAuto");
 Object.defineProperty(exports, "dialogRectAuto", { enumerable: true, get: function () { return dialogRectAuto_1.dialogRectAuto; } });
-var hexToRgb_1 = require("./hexToRgb");
-Object.defineProperty(exports, "hexToRgb", { enumerable: true, get: function () { return hexToRgb_1.hexToRgb; } });
+var Colorify_1 = require("./Colorify");
+Object.defineProperty(exports, "hexToRGB", { enumerable: true, get: function () { return Colorify_1.hexToRGB; } });

package/models/DialogAction.d.ts

@@ -1,30 +1,22 @@
-import type { TDialogStateListenerForActionCallbackType, DialogActionOptionsType, DialogActionType, ActionIntentType, ActionIntent } from "../types/index.js";
+import type { TDialogStateListenerForActionCallbackType, DialogActionOptionsType, DialogActionType } from "../types/index.js";
+import { DialogActionBase } from "../components/index.js";
+import { RefObject } from "react";
+import { ActionIntentsType } from "../types/index.js";
 declare const ActionProgress: () => import("react/jsx-runtime").JSX.Element;
 export { ActionProgress };
-export declare const ACTION_INTENTS: {
-    readonly positive: {
-        readonly color: "primary";
-        readonly variant: "contained";
-    };
-    readonly negative: {
-        readonly color: "error";
-        readonly variant: "contained";
-    };
-    readonly neutral: {
-        readonly variant: "text";
-        readonly color: "primary";
-    };
-};
 declare class DialogAction {
     private readonly _name;
     private _options;
     private _intent;
     _onCLick: DialogActionType;
     _stateListener: TDialogStateListenerForActionCallbackType;
+    _actionComponent: RefObject<DialogActionBase>;
     constructor(name: string, options?: DialogActionOptionsType);
     get name(): string;
-    setIntent(intent: ActionIntentType): this;
-    getIntent(): ActionIntent;
+    setIntent(intent: ActionIntentsType): this;
+    intent(): ActionIntentsType;
+    setInProcess: (inProcess: boolean) => this;
+    setDisabled: (disabled: boolean) => this;
     setOptions: (options: DialogActionOptionsType) => this;
     get options(): DialogActionOptionsType;
     onClick: (callback: DialogActionType) => this;

package/models/DialogAction.js

@@ -11,31 +11,25 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogAction = exports.ACTION_INTENTS = exports.ActionProgress = void 0;
+exports.DialogAction = exports.ActionProgress = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var _components_1 = require("../components/index.js");
 var ActionProgress = function () {
     return (0, jsx_runtime_1.jsx)(_components_1.CircularProgress, { size: 20, inProcess: { inProcess: true } });
 };
 exports.ActionProgress = ActionProgress;
-exports.ACTION_INTENTS = {
-    positive: {
-        color: 'primary',
-        variant: 'contained',
-    },
-    negative: {
-        color: 'error',
-        variant: 'contained',
-    },
-    neutral: {
-        variant: 'text',
-        color: 'primary',
-    },
-};
 // class DialogAction extends DialogActionBase {
 var DialogAction = /** @class */ (function () {
     function DialogAction(name, options) {
         var _this = this;
+        this.setInProcess = function (inProcess) {
+            _this._actionComponent.current.setInProcess(inProcess);
+            return _this;
+        };
+        this.setDisabled = function (disabled) {
+            _this._actionComponent.current.setDisabled(disabled);
+            return _this;
+        };
         this.setOptions = function (options) {
             _this._options = options;
             return _this;
@@ -71,10 +65,10 @@ var DialogAction = /** @class */ (function () {
         configurable: true
     });
     DialogAction.prototype.setIntent = function (intent) {
-        this._intent = exports.ACTION_INTENTS[intent];
+        this._intent = intent; // ACTION_INTENTS[intent];
         return this;
     };
-    DialogAction.prototype.getIntent = function () {
+    DialogAction.prototype.intent = function () {
         return this._intent;
     };
     Object.defineProperty(DialogAction.prototype, "options", {

package/models/baseDialogOptions.js

@@ -43,7 +43,23 @@ var BASE_DIALOG_OPTIONS = {
         about: false,
         initialAnchor: { vertical: "flex-start", horizontal: "center" },
         draggable: false,
-        size: { width: 'min-content', height: 300 }
+        size: { width: 'min-content', height: 300 },
+        actions: {
+            initialIntents: {
+                positive: {
+                    color: 'primary',
+                    variant: 'contained'
+                },
+                negative: {
+                    color: 'error',
+                    variant: 'contained'
+                },
+                neutral: {
+                    color: 'default',
+                    variant: "text"
+                }
+            }
+        }
     },
     animate: 'none',
     progress: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.59",
+  "version": "1.1.65",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",

package/types/DialogActionTypes.d.ts

@@ -1,7 +1,7 @@
 import { IDialogApiDef, IListenerDialogDef, TValues, ICoords } from "./index.js";
 import { DialogBase, DialogActionBase } from "../components/index.js";
 import * as React from "react";
-import { DialogAction, ACTION_INTENTS } from "../models/index.js";
+import { DialogAction } from "../models/index.js";
 import { CSSProperties } from "react";
 export type ActionDialogDef = Omit<IDialogApiDef, 'switchFullScreen'>;
 export type ActionDef = Pick<DialogAction, 'onClick' | 'setOptions' | 'name'>;
@@ -43,7 +43,7 @@ export interface ActionProps {
     baseStyle?: CSSProperties;
     fontFamily?: string;
     stateListener?: TDialogStateListenerForActionCallbackType;
-    intent: ActionIntent;
+    intent: ActionIntentsType;
 }
 export interface ActionState {
     isRippling: boolean;
@@ -70,7 +70,11 @@ export interface DialogContentFooterReturnType {
     setProcessing: React.Dispatch<React.SetStateAction<boolean>>;
     inProcess: boolean;
 }
-export type ActionIntentType = keyof typeof ACTION_INTENTS;
+export interface IActionIntents {
+    positive?: ActionIntent;
+    negative?: ActionIntent;
+    neutral?: ActionIntent;
+}
 export type ActionIntentsType = "positive" | "negative" | "neutral";
 export interface ActionIntent extends Partial<Pick<DialogActionOptionsType, 'variant' | 'color'>> {
 }

package/types/DialogTypes.d.ts

@@ -5,7 +5,7 @@ import { DialogBase } from "../components/index.js";
 import type { FormikProps } from "formik";
 import type { RefObject } from "react";
 import { Resizeable } from "../helpers/index.js";
-import type { ActionIntentsType, DialogContentFooterReturnType } from "./DialogActionTypes";
+import type { DialogContentFooterReturnType, IActionIntents } from "./DialogActionTypes";
 import { SnackbarKey, VariantType } from "notistack";
 export interface TBaseDialogState {
     [K: string]: any;
@@ -68,9 +68,8 @@ interface IDialogOptionsType {
         busyMessage?: string;
         [k: string]: any;
     };
-    actionsIntents?: ActionIntentsType;
 }
-export type DialogOptionsType = Partial<Pick<IDialogOptionsType, 'base' | 'snackbar' | 'backdrop' | 'slotProps' | 'slot' | 'animate' | 'progress' | 'localText' | 'actionsIntents'>>;
+export type DialogOptionsType = Partial<Pick<IDialogOptionsType, 'base' | 'snackbar' | 'backdrop' | 'slotProps' | 'slot' | 'animate' | 'progress' | 'localText'>>;
 interface kSlot {
     action?: React.JSXElementConstructor<any>;
     footer?: React.JSXElementConstructor<any>;
@@ -108,6 +107,7 @@ export interface IBaseDialogOptions {
     actions?: {
         disabledOnDialogProcessing?: boolean;
         baseStyle?: React.CSSProperties;
+        initialIntents?: IActionIntents;
     };
     headerControllerIcons?: {
         size?: number;

package/helpers/hexToRgb.d.ts

@@ -1,5 +0,0 @@
-declare const hexToRgb: (hex: string, opacity: number) => string;
-export type HexColor = `#${string}`;
-declare function isHexColor(color: string): color is HexColor;
-declare function colorNameToHex(colorName: string): string | null;
-export { hexToRgb, colorNameToHex, isHexColor };

package/helpers/hexToRgb.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hexToRgb = void 0;
-exports.colorNameToHex = colorNameToHex;
-exports.isHexColor = isHexColor;
-var hexToRgb = function (hex, opacity) {
-    try {
-        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        var colors = {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        };
-        return "rgba(".concat(colors.r, ", ").concat(colors.g, ", ").concat(colors.b, ", ").concat(opacity, ")");
-    }
-    catch (e) {
-        console.warn('Color should be hex string', e.message);
-    }
-    return '';
-};
-exports.hexToRgb = hexToRgb;
-function isHexColor(color) {
-    return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color);
-}
-function colorNameToHex(colorName) {
-    var ctx = document.createElement("canvas").getContext("2d");
-    if (!ctx)
-        return null;
-    ctx.fillStyle = colorName;
-    return ctx.fillStyle; // canvas, renk ismini hex'e çevirir
-}