d2coreui 23.0.13 → 23.0.15

package/components/clipboard/clipboardUtils.ts

@@ -0,0 +1,53 @@
+import {ModalDialog, ModalDialogMode} from "../modal/modalDialog";
+import i18n from "d2core/i18n/i18n";
+
+export class ClipboardUtils {
+    // Copies a string to the clipboard. Must be called from within an
+    // event handler such as click. May return false if it failed, but
+    // this is not always possible. Browser support for Chrome 43+,
+    // Firefox 42+, Safari 10+, Edge and IE 10+.
+    // IE: The clipboard feature may be disabled by an administrator. By
+    // default a prompt is shown the first time the clipboard is
+    // used (per session).
+    static copyToClipboard(text: string): boolean {
+        if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
+            var textarea = document.createElement("textarea");
+            textarea.textContent = text;
+            textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
+            document.body.appendChild(textarea);
+            textarea.select();
+            try {
+                return document.execCommand("copy");  // Security exception may be thrown by some browsers.
+            } catch (ex) {
+                console.warn("Copy to clipboard failed.", ex);
+                return false;
+            } finally {
+                document.body.removeChild(textarea);
+            }
+        }
+        return false;
+    }
+
+    static async readFromClipboard(): Promise<string | undefined> {
+        if (navigator.clipboard && window.isSecureContext) {
+            // @ts-ignore
+            const permission = await navigator.permissions.query({ name: "clipboard-read" });
+            if (permission.state === "granted" || permission.state === "prompt") {
+                return await navigator.clipboard.readText();
+            } else {
+                ModalDialog.error({
+                    mode: ModalDialogMode.OK,
+                    title: i18n("Error reading data from clipboard"),
+                    content: i18n("Clipboard not permitted")
+                })
+            }
+        } else {
+            ModalDialog.error({
+                mode: ModalDialogMode.OK,
+                title: i18n("Error reading data from clipboard"),
+                content: i18n("Secure context not available")
+            })
+        }
+        return undefined;
+    }
+}

package/components/codemirror/SyntaxHighlighter.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import CodeMirror from 'codemirror';
+import 'codemirror/addon/runmode/runmode'
+import 'codemirror/mode/meta'
+
+interface SyntaxHighlighterProps {
+    // codeMirror: typeof CodeMirror
+    className?: string
+    theme?: string
+    inline?: boolean
+    mode: string
+    prefix?: string
+    value: string
+    tooltip?:boolean
+}
+
+export default class SyntaxHighlighter extends React.Component<SyntaxHighlighterProps> {
+    static defaultProps = {
+        className: '',
+        prefix: 'cm-'
+    }
+
+    constructor(props: Readonly<SyntaxHighlighterProps>) {
+        super(props);
+    }
+
+    render() {
+        const {inline, value, mode, className, prefix, theme, tooltip} = this.props
+        const elements: React.ReactNode[] = []
+        let index = 0
+        let lastStyle: string | null | undefined = null
+        let tokenBuf = ''
+        let trimmedValue = value;
+        if( tooltip && value.length > 100) {
+            trimmedValue = value.substring(0, 100) + " ...";
+        }
+        CodeMirror.runMode(trimmedValue, mode, (token, style) => {
+            if (lastStyle === style) {
+                tokenBuf += token
+                lastStyle = style
+            } else {
+                if (tokenBuf) {
+                    elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);
+                }
+                tokenBuf = token
+                lastStyle = style
+            }
+        })
+        elements.push(<span className={lastStyle ? prefix + lastStyle : ''} key={++index}>{tokenBuf}</span>);
+
+        let tooltipText: undefined | string = undefined;
+        if(tooltip && trimmedValue !== value) {
+            tooltipText = value;//.replace("\t","&#009;").replace("\n","&#013;&#010;");
+        }
+        const code = (<code title={tooltipText} className={inline ? `inline ${prefix}s-${theme}` : ''}>{elements}</code>);
+        return inline ? (code) : (<pre className={`${className} ${prefix}s-${theme}`}>{code}</pre>);
+    }
+}

package/components/collapse/expandable.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import {Divider} from "antd";
+import {DoubleRightOutlined} from "@ant-design/icons";
+import {Collapse} from 'react-collapse';
+
+interface ExpandableProps {
+    extraContent?: React.ReactNode
+    expanded?: boolean
+    compact?: boolean
+    children?: React.ReactNode;
+
+    onExpand?(expanded: boolean): void
+}
+
+export default class Expandable extends React.Component<ExpandableProps> {
+    constructor(props: Readonly<ExpandableProps>) {
+        super(props);
+    }
+
+    render(): React.ReactNode {
+        return (
+            <div style={{transition: "height .5s"}}>
+                <header>
+                    {this.props.children}
+                </header>
+                <Collapse isOpened={!!this.props.expanded}>
+                    <section style={{marginTop: 5}}>
+                        {this.props.extraContent}
+                    </section>
+                </Collapse>
+                <Divider
+                    style={{margin: this.props.compact ? "8px 0px" : "20px 0px"}}
+                    className={this.props.extraContent ? "stronger-divider-with-text" : "stronger-divider"}
+                    plain
+                >
+                    {this.props.extraContent && <DoubleRightOutlined
+                        rotate={this.props.expanded ? -90 : 90}
+                        onClick={() => {
+                            const expanded = !this.props.expanded;
+                            this.props.onExpand?.(expanded);
+                        }}
+                    />}
+                </Divider>
+            </div>
+        )
+    }
+
+}

package/components/color/colorPicker.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import i18n from "d2core/i18n/i18n";
+import {Badge, Button, Popover} from "antd";
+import {CloseOutlined, StopOutlined} from "@ant-design/icons";
+import {RGBColor, SketchPicker} from "react-color";
+import {SketchPickerProps} from "react-color/lib/components/sketch/Sketch";
+import {TooltipPlacement} from "antd/lib/tooltip";
+
+const transparentBackgroundStyle = "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\") left center"
+const presetColors = [
+    "#fff1f0", "#ffccc7", "#ffa39e", "#ff7875", "#ff4d4f", "#f5222d", "#cf1322", "#a8071a", "#820014", "#5c0011",
+    "#fff2e8", "#ffd8bf", "#ffbb96", "#ff9c6e", "#ff7a45", "#fa541c", "#d4380d", "#ad2102", "#871400", "#610b00",
+    "#fff7e6", "#ffe7ba", "#ffd591", "#ffc069", "#ffa940", "#fa8c16", "#d46b08", "#ad4e00", "#873800", "#612500",
+    "#feffe6", "#ffffb8", "#fffb8f", "#fff566", "#ffec3d", "#fadb14", "#d4b106", "#ad8b00", "#876800", "#614700",
+    "#f6ffed", "#d9f7be", "#b7eb8f", "#95de64", "#73d13d", "#52c41a", "#389e0d", "#237804", "#135200", "#092b00",
+    "#e6fffb", "#b5f5ec", "#87e8de", "#5cdbd3", "#36cfc9", "#13c2c2", "#08979c", "#006d75", "#00474f", "#002329",
+    "#e6f7ff", "#bae7ff", "#91d5ff", "#69c0ff", "#40a9ff", "#1890ff", "#096dd9", "#0050b3", "#003a8c", "#002766",
+    "#ffffff", "#fafafa", "#f5f5f5", "#e8e8e8", "#d9d9d9", "#bfbfbf", "#8c8c8c", "#595959", "#262626", "#000000",
+];
+
+interface ColorPickerProps extends SketchPickerProps {
+    badgeIcon?: React.ReactNode
+    title: string
+    placement?: TooltipPlacement
+    disabled?: boolean
+    transparentColorAllowed?: boolean
+
+    onResetColor(): void
+}
+
+interface ColorPickerState {
+    popupVisible: boolean
+}
+
+export default class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
+    constructor(props: Readonly<ColorPickerProps>) {
+        super(props);
+
+        this.state = {
+            popupVisible: false,
+        }
+    }
+
+    private getColorString(color: RGBColor | string | undefined): string | undefined {
+        if (typeof color === "object") {
+            return `rgba(${color.r},${color.g},${color.b},${color.a})`;
+        } else {
+            return color;
+        }
+    }
+
+    render() {
+        return (
+            <Popover
+                placement={this.props.placement}
+                trigger={this.props.disabled ? [] : "click"}
+                open={this.state.popupVisible}
+                onOpenChange={(visible) => {
+                    this.setState({popupVisible: visible});
+                }}
+                title={
+                    <div>
+                        {this.props.title}
+                        <Button
+                            style={{float: "right", paddingLeft: 8, border: "none"}}
+                            size="small"
+                            title={i18n("Close")}
+                            onClick={() => {
+                                this.setState({popupVisible: false});
+                            }}
+                        >
+                            <CloseOutlined/>
+                        </Button>
+                        <Button
+                            style={{background: transparentBackgroundStyle, float: "right"}}
+                            size="small"
+                            title={i18n("Set No Color")}
+                            onClick={() => {
+                                this.props.onResetColor();
+                                this.setState({popupVisible: false});
+                            }}
+                        >
+                            <StopOutlined style={{color: "rgba(0,0,0,0.85)"}}/>
+                        </Button>
+                    </div>
+                }
+                content={
+                    <SketchPicker
+                        color={this.props.color}
+                        width={"250px"}
+                        presetColors={this.props.transparentColorAllowed ? [...presetColors, "transparent"] : presetColors}
+                        onChange={this.props.onChange}
+                        onChangeComplete={this.props.onChangeComplete}
+                    />
+                }
+            >
+                <Badge
+                    className={this.props.className}
+                    count={this.props.badgeIcon ?
+                        <span
+                            className="ant-badge-count"
+                            style={{color: "#1890ff", background: "#e6f7ff", borderColor: "#91d5ff"}}
+                        >
+                                {this.props.badgeIcon}
+                            </span>
+                        : undefined
+                    }
+                >
+                    <Button
+                        style={{background: this.getColorString(this.props.color as RGBColor | string | undefined) ?? transparentBackgroundStyle}}
+                        disabled={this.props.disabled}
+                        title={this.props.title}
+                    >
+                        <span role="img" className="anticon"/>
+                    </Button>
+                </Badge>
+            </Popover>
+        );
+    }
+
+}

package/components/color/colorSwatch.d.ts

@@ -1,13 +1,18 @@
-export function ColorSwatch({ hover, color, onClick, onSwatchHover, style, title, active, small }: {
-    hover: any;
-    color: any;
-    onClick: any;
-    onSwatchHover: any;
-    style: any;
-    title: any;
-    active: any;
-    small: any;
-}): React.JSX.Element;
-declare const _default: any;
-export default _default;
-import React from 'react';
+import {ClassAttributes, Component} from "react";
+import {Color, ColorResult} from "react-color";
+
+export interface ColorSwatchProps extends ClassAttributes<ColorSwatch> {
+    color?: Color;
+    active?: boolean
+    small?: boolean
+
+    onClick?(color: ColorResult, event: MouseEvent): void;
+
+    onSwatchHover?(color: ColorResult, event: MouseEvent): void;
+
+    title?: string,
+    style?: React.CSSProperties
+}
+
+export default class ColorSwatch extends Component<ColorSwatchProps> {
+}

package/components/color/colorSwatch.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import reactCSS, {handleHover} from 'reactcss'
+import {Swatch} from 'react-color/lib/components/common/Swatch'
+
+function invertColor(hex, bw) {
+    if (hex.indexOf('#') === 0) {
+        hex = hex.slice(1);
+    }
+    // convert 3-digit hex to 6-digits.
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    if (hex.length !== 6) {
+        throw new Error('Invalid HEX color.');
+    }
+    var r = parseInt(hex.slice(0, 2), 16),
+        g = parseInt(hex.slice(2, 4), 16),
+        b = parseInt(hex.slice(4, 6), 16);
+    if (bw) {
+        // http://stackoverflow.com/a/3943023/112731
+        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
+            ? '#000000'
+            : '#FFFFFF';
+    }
+    // invert color components
+    r = (255 - r).toString(16);
+    g = (255 - g).toString(16);
+    b = (255 - b).toString(16);
+    // pad each with zeros and return
+    return "#" + padZero(r) + padZero(g) + padZero(b);
+}
+
+export const ColorSwatch = ({hover, color, onClick, onSwatchHover, style, title, active, small}) => {
+    const hoverSwatch = {
+        transform: "scale(1.5)",
+        position: 'relative',
+        zIndex: '3',
+    }
+    const focusSwatch = {
+        position: 'relative',
+        zIndex: '2',
+        transform: "scale(1.2)",
+        boxShadow: '0 0 5px 2px rgba(0,0,0,0.25)',
+        cursor:"pointer"
+    }
+
+    const styles = reactCSS({
+        'default': {
+            swatch: {
+                display: "inline-block",
+                transform: "scale(1)",
+                width: !!small ? '15px' : '22px',
+                height: !!small ? '15px' : '22px',
+                margin: '2px',
+                marginTop: 0,
+                marginBottom: 0,
+                fontSize: '0',
+            },
+        },
+        'hover': {
+            swatch: small ? {} : hoverSwatch,
+        },
+    }, {hover})
+
+
+    return (
+        <div style={styles.swatch}>
+            {active &&
+            <div style={{fill: invertColor(color, true), position: "absolute", left: 1, top: 1, zIndex: 10,}}>
+                <svg viewBox="0 0 24 24" style={{width: 20, height: 20}}>
+                    <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
+                </svg>
+            </div>}
+            <Swatch
+                color={color}
+                onClick={onClick}
+                onHover={onSwatchHover}
+                focus={active}
+                focusStyle={focusSwatch}
+                style={style}
+                title={title}
+            />
+        </div>
+    )
+}
+
+export default handleHover(ColorSwatch)

package/components/color/colorUtils.ts

@@ -0,0 +1,60 @@
+export default class ColorUtils {
+    static d2IntToRGB(num: number): string {
+        // d2000 posiela farbu vo formate bgr
+        const b = (num & 0xFF0000) >>> 16,
+            g = (num & 0xFF00) >>> 8,
+            r = num & 0xFF;
+        return "rgb(" + [r, g, b].join(",") + ")";
+    }
+
+    static d2IntToHex(num: number): string {
+        // d2000 posiela farbu vo formate bgr
+        const b = (num & 0xFF0000) >>> 16,
+            g = (num & 0xFF00) >>> 8,
+            r = num & 0xFF;
+        return "#" + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
+    }
+
+    static hexToD2Int(hex: string): number {
+        const r = parseInt(hex.slice(1, 1 + 2), 16),
+            g = (parseInt(hex.slice(3, 3 + 2), 16) << 8),
+            b = (parseInt(hex.slice(5, 5 + 2), 16) << 16);
+
+        return r + g + b;
+    }
+
+    private static padZero(s: string, length: number = 2) {
+        while (s.length < length) {
+            s = '0' + s;
+        }
+        return s;
+    }
+
+    static invertColor(hex: string, bw: boolean) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        // convert 3-digit hex to 6-digits.
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (hex.length !== 6) {
+            throw new Error('Invalid HEX color.');
+        }
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        if (bw) {
+            // http://stackoverflow.com/a/3943023/112731
+            return (r * 0.299 + g * 0.587 + b * 0.114) > 186
+                ? '#000000'
+                : '#FFFFFF';
+        }
+        // invert color components
+        const rString = (255 - r).toString(16);
+        const gString = (255 - g).toString(16);
+        const bString = (255 - b).toString(16);
+        // pad each with zeros and return
+        return "#" + this.padZero(rString) + this.padZero(gString) + this.padZero(bString);
+    }
+}