@aglyn/shared-ui-jsx 1.0.0-beta.143

package/src/lib/components/variable-text-field.component.js

@@ -0,0 +1,188 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * 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.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { mdiPlus } from "@aglyn/shared-data-mdi";
+import { IconButton, InputAdornment, ListItemText, Menu, MenuItem, TextField, Tooltip, Typography } from "@mui/material";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { MdiIcon } from "./mdi-icon/mdi-icon.js";
+/** `{{` plus the partial name after it, at the very end of what was typed. */ const OPEN_TOKEN = /\{\{([a-zA-Z][\w.]*)?$/;
+export function VariableTextField(props) {
+    var _ref;
+    const { value, onChange, variables, insertLabel = 'Insert a variable', slotProps } = props, rest = _object_without_properties_loose(props, [
+        "value",
+        "onChange",
+        "variables",
+        "insertLabel",
+        "slotProps"
+    ]);
+    const inputRef = useRef(null);
+    /**
+   * The two ways the list opens, held APART.
+   *
+   * They insert differently — the `+` adds a variable at the caret, while
+   * autocomplete REPLACES the `{{` and the partial name under it — and one
+   * state for both got that wrong in the direction that is easy to miss: a
+   * `+` insert also ate the two characters after the caret, which on a title
+   * being edited in the middle silently deleted whatever was there.
+   *
+   * Both carry the caret as it was when the list opened, because opening a
+   * menu moves focus off the input and a caret read afterwards is 0.
+   */ const [picker, setPicker] = useState(null);
+    const [typing, setTyping] = useState(null);
+    const matches = useMemo(()=>{
+        var _ref;
+        var _typing_partial;
+        const partial = (_ref = typing == null ? void 0 : (_typing_partial = typing.partial) == null ? void 0 : _typing_partial.toLowerCase()) != null ? _ref : '';
+        if (!partial) return variables;
+        return variables.filter((variable)=>variable.name.toLowerCase().includes(partial) || variable.label.toLowerCase().includes(partial));
+    }, [
+        typing,
+        variables
+    ]);
+    /** Where the caret is, or the end of the value when there is no input yet. */ const caret = useCallback(()=>{
+        var _ref;
+        var _inputRef_current;
+        return (_ref = (_inputRef_current = inputRef.current) == null ? void 0 : _inputRef_current.selectionStart) != null ? _ref : value.length;
+    }, [
+        value.length
+    ]);
+    const insertAt = useCallback((name, from, to)=>{
+        const token = `{{${name}}}`;
+        onChange(`${value.slice(0, from)}${token}${value.slice(to)}`);
+        // After the paint that renders the new value, or the browser puts the
+        // caret back where the old value ended.
+        requestAnimationFrame(()=>{
+            const input = inputRef.current;
+            if (!input) return;
+            input.focus();
+            input.setSelectionRange(from + token.length, from + token.length);
+        });
+    }, [
+        onChange,
+        value
+    ]);
+    const handleChange = useCallback((event)=>{
+        var _event_target_selectionStart, _open_;
+        const next = event.target.value;
+        onChange(next);
+        // `{{` at the caret opens the list; anything else closes it. Read from
+        // the text BEFORE the caret only, so typing `{{` in the middle of a
+        // title offers the list for that position rather than for the end.
+        const before = next.slice(0, (_event_target_selectionStart = event.target.selectionStart) != null ? _event_target_selectionStart : next.length);
+        const open = OPEN_TOKEN.exec(before);
+        setTyping(open ? {
+            at: before.length - open[0].length,
+            partial: (_open_ = open[1]) != null ? _open_ : ''
+        } : null);
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(TextField, _extends({}, rest, {
+                value: value,
+                onChange: handleChange,
+                onBlur: (event)=>{
+                    setTyping(null);
+                    rest.onBlur == null ? void 0 : rest.onBlur.call(rest, event);
+                },
+                /*
+         * `inputRef`, not `slotProps.htmlInput.ref`. The slot's `ref` reaches
+         * the native input only on some of MUI's input variants, and a null
+         * ref here does not fail loudly — it silently makes `caret()` return
+         * the END of the value, so every insert lands after the title instead
+         * of where the author was typing. This is the prop `InputBase` forks
+         * into the input on every variant.
+         */ inputRef: inputRef,
+                slotProps: _extends({}, slotProps, {
+                    input: _extends({}, slotProps == null ? void 0 : slotProps.input, {
+                        endAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "end",
+                            children: /*#__PURE__*/ _jsx(Tooltip, {
+                                title: insertLabel,
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    size: "small",
+                                    "aria-label": insertLabel,
+                                    onClick: (event)=>{
+                                        // The caret is read HERE, while the input still has it.
+                                        setTyping(null);
+                                        setPicker({
+                                            anchor: event.currentTarget,
+                                            at: caret()
+                                        });
+                                    },
+                                    children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                        fontSize: "small",
+                                        path: mdiPlus.path
+                                    })
+                                })
+                            })
+                        })
+                    })
+                })
+            })),
+            /*#__PURE__*/ _jsx(Menu, {
+                open: Boolean(picker) || Boolean(typing) && matches.length > 0,
+                anchorEl: (_ref = picker == null ? void 0 : picker.anchor) != null ? _ref : inputRef.current,
+                onClose: ()=>{
+                    setPicker(null);
+                    setTyping(null);
+                },
+                // The menu must not steal the caret while somebody is mid-word: an
+                // autocomplete that focused itself would end the typing run it exists
+                // to complete.
+                disableAutoFocus: !picker,
+                disableEnforceFocus: !picker,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                },
+                children: matches.map((variable)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>{
+                            if (typing) {
+                                // Autocomplete REPLACES the `{{` and the partial under it.
+                                const to = Math.min(typing.at + 2 + typing.partial.length, value.length);
+                                insertAt(variable.name, typing.at, to);
+                            } else {
+                                var _ref;
+                                // The `+` INSERTS, replacing nothing.
+                                const at = (_ref = picker == null ? void 0 : picker.at) != null ? _ref : caret();
+                                insertAt(variable.name, at, at);
+                            }
+                            setPicker(null);
+                            setTyping(null);
+                        },
+                        children: /*#__PURE__*/ _jsx(ListItemText, {
+                            primary: variable.label,
+                            secondary: /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                component: "span",
+                                children: `{{${variable.name}}}${variable.description ? ` — ${variable.description}` : ''}`
+                            })
+                        })
+                    }, variable.name))
+            })
+        ]
+    });
+}
+VariableTextField.displayName = 'VariableTextField';
+export default VariableTextField;
+
+//# sourceMappingURL=variable-text-field.component.js.map

package/src/lib/components/variable-text-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/variable-text-field.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { mdiPlus } from '@aglyn/shared-data-mdi'\nimport {\n  IconButton,\n  InputAdornment,\n  ListItemText,\n  Menu,\n  MenuItem,\n  TextField,\n  type TextFieldProps,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport { MdiIcon } from './mdi-icon/mdi-icon'\n\n/**\n * A text field whose value may name VARIABLES, with the two ways of reaching\n * them that the besigner's attribute fields already taught (AGL-3197).\n *\n * ## What it is, and what it deliberately is not\n *\n * It is a plain MUI `TextField`. The value in it is the value that is stored —\n * `{{site.name}}` reads as `{{site.name}}`, and what makes that legible is the\n * PREVIEW under the field, not a pill drawn over the text.\n *\n * The besigner's `TokenTextField` does draw pills, and this is not that on\n * purpose. That field is a contentEditable surface with its own selection\n * model, DOM/model sync contract, paste handling and undo trade-offs, wired to\n * react-final-form and to the canvas's binding and media pickers. It earns all\n * of that because a node attribute can hold a token referring to any record on\n * the page. Here there are three variables, the field is 60 characters long,\n * and the honest cost of a pill surface — an editor that fights the IME, an\n * undo stack that truncates, a value the author cannot select and retype — is\n * not worth paying for a title. A plain input, a menu and a live preview are.\n *\n * ## Two ways in, because people reach for different ones\n *\n * The `+` opens the list with a description under each name; typing `{{`\n * offers the same list inline, filtered by whatever follows. Either way the\n * insert lands at the caret, and the caret is left after it — not at the end\n * of the value, which is where an insert that rebuilt the string would leave\n * it, and which is wrong whenever somebody is editing the middle of a title.\n */\n\nexport interface VariableOption {\n  /** Written between the braces. */\n  name: string\n  /** What the menu calls it. */\n  label: string\n  /** One line under the label. */\n  description?: string\n}\n\nexport interface VariableTextFieldProps\n  extends Omit<TextFieldProps, 'onChange' | 'value'> {\n  value: string\n  onChange: (value: string) => void\n  /** Every variable this field offers. */\n  variables: readonly VariableOption[]\n  /** The tooltip on the insert control. */\n  insertLabel?: string\n}\n\n/** `{{` plus the partial name after it, at the very end of what was typed. */\nconst OPEN_TOKEN = /\\{\\{([a-zA-Z][\\w.]*)?$/\n\nexport function VariableTextField(props: VariableTextFieldProps) {\n  const {\n    value,\n    onChange,\n    variables,\n    insertLabel = 'Insert a variable',\n    slotProps,\n    ...rest\n  } = props\n\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  /**\n   * The two ways the list opens, held APART.\n   *\n   * They insert differently — the `+` adds a variable at the caret, while\n   * autocomplete REPLACES the `{{` and the partial name under it — and one\n   * state for both got that wrong in the direction that is easy to miss: a\n   * `+` insert also ate the two characters after the caret, which on a title\n   * being edited in the middle silently deleted whatever was there.\n   *\n   * Both carry the caret as it was when the list opened, because opening a\n   * menu moves focus off the input and a caret read afterwards is 0.\n   */\n  const [picker, setPicker] = useState<{ anchor: HTMLElement; at: number } | null>(null)\n  const [typing, setTyping] = useState<{ at: number; partial: string } | null>(null)\n\n  const matches = useMemo(() => {\n    const partial = typing?.partial?.toLowerCase() ?? ''\n    if (!partial) return variables\n    return variables.filter(\n      (variable) =>\n        variable.name.toLowerCase().includes(partial) ||\n        variable.label.toLowerCase().includes(partial),\n    )\n  }, [typing, variables])\n\n  /** Where the caret is, or the end of the value when there is no input yet. */\n  const caret = useCallback(\n    () => inputRef.current?.selectionStart ?? value.length,\n    [value.length],\n  )\n\n  const insertAt = useCallback(\n    (name: string, from: number, to: number) => {\n      const token = `{{${name}}}`\n      onChange(`${value.slice(0, from)}${token}${value.slice(to)}`)\n      // After the paint that renders the new value, or the browser puts the\n      // caret back where the old value ended.\n      requestAnimationFrame(() => {\n        const input = inputRef.current\n        if (!input) return\n        input.focus()\n        input.setSelectionRange(from + token.length, from + token.length)\n      })\n    },\n    [onChange, value],\n  )\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value\n      onChange(next)\n      // `{{` at the caret opens the list; anything else closes it. Read from\n      // the text BEFORE the caret only, so typing `{{` in the middle of a\n      // title offers the list for that position rather than for the end.\n      const before = next.slice(0, event.target.selectionStart ?? next.length)\n      const open = OPEN_TOKEN.exec(before)\n      setTyping(\n        open\n          ? { at: before.length - open[0].length, partial: open[1] ?? '' }\n          : null,\n      )\n    },\n    [onChange],\n  )\n\n  return (\n    <>\n      <TextField\n        {...rest}\n        value={value}\n        onChange={handleChange}\n        onBlur={(event) => {\n          setTyping(null)\n          rest.onBlur?.(event)\n        }}\n        /*\n         * `inputRef`, not `slotProps.htmlInput.ref`. The slot's `ref` reaches\n         * the native input only on some of MUI's input variants, and a null\n         * ref here does not fail loudly — it silently makes `caret()` return\n         * the END of the value, so every insert lands after the title instead\n         * of where the author was typing. This is the prop `InputBase` forks\n         * into the input on every variant.\n         */\n        inputRef={inputRef}\n        slotProps={{\n          ...slotProps,\n          input: {\n            ...(slotProps?.input as object),\n            endAdornment: (\n              <InputAdornment position=\"end\">\n                <Tooltip title={insertLabel}>\n                  <IconButton\n                    size=\"small\"\n                    aria-label={insertLabel}\n                    onClick={(event) => {\n                      // The caret is read HERE, while the input still has it.\n                      setTyping(null)\n                      setPicker({ anchor: event.currentTarget, at: caret() })\n                    }}\n                  >\n                    <MdiIcon fontSize=\"small\" path={mdiPlus.path} />\n                  </IconButton>\n                </Tooltip>\n              </InputAdornment>\n            ),\n          },\n        }}\n      />\n      <Menu\n        open={Boolean(picker) || (Boolean(typing) && matches.length > 0)}\n        anchorEl={picker?.anchor ?? inputRef.current}\n        onClose={() => {\n          setPicker(null)\n          setTyping(null)\n        }}\n        // The menu must not steal the caret while somebody is mid-word: an\n        // autocomplete that focused itself would end the typing run it exists\n        // to complete.\n        disableAutoFocus={!picker}\n        disableEnforceFocus={!picker}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n      >\n        {matches.map((variable) => (\n          <MenuItem\n            key={variable.name}\n            onClick={() => {\n              if (typing) {\n                // Autocomplete REPLACES the `{{` and the partial under it.\n                const to = Math.min(typing.at + 2 + typing.partial.length, value.length)\n                insertAt(variable.name, typing.at, to)\n              } else {\n                // The `+` INSERTS, replacing nothing.\n                const at = picker?.at ?? caret()\n                insertAt(variable.name, at, at)\n              }\n              setPicker(null)\n              setTyping(null)\n            }}\n          >\n            <ListItemText\n              primary={variable.label}\n              secondary={\n                <Typography variant=\"caption\" color=\"text.secondary\" component=\"span\">\n                  {`{{${variable.name}}}${\n                    variable.description ? ` — ${variable.description}` : ''\n                  }`}\n                </Typography>\n              }\n            />\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  )\n}\nVariableTextField.displayName = 'VariableTextField'\n\nexport default VariableTextField\n"],"names":["mdiPlus","IconButton","InputAdornment","ListItemText","Menu","MenuItem","TextField","Tooltip","Typography","useCallback","useMemo","useRef","useState","MdiIcon","OPEN_TOKEN","VariableTextField","props","value","onChange","variables","insertLabel","slotProps","rest","inputRef","picker","setPicker","typing","setTyping","matches","partial","toLowerCase","filter","variable","name","includes","label","caret","current","selectionStart","length","insertAt","from","to","token","slice","requestAnimationFrame","input","focus","setSelectionRange","handleChange","event","open","next","target","before","exec","at","onBlur","endAdornment","position","title","size","aria-label","onClick","anchor","currentTarget","fontSize","path","Boolean","anchorEl","onClose","disableAutoFocus","disableEnforceFocus","anchorOrigin","vertical","horizontal","map","Math","min","primary","secondary","variant","color","component","description","displayName"],"mappings":"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"}

package/src/lib/components/zoomable-panning-component/index.d.ts

@@ -0,0 +1 @@
+export * from './zoomable-panning-component';

package/src/lib/components/zoomable-panning-component/index.js

@@ -0,0 +1,3 @@
+export * from "./zoomable-panning-component.js";
+
+//# sourceMappingURL=index.js.map

package/src/lib/components/zoomable-panning-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/shared/ui/jsx/src/lib/components/zoomable-panning-component/index.ts"],"sourcesContent":["export * from './zoomable-panning-component'\n"],"names":[],"mappings":"AAAA,cAAc,kCAA8B"}

package/src/lib/components/zoomable-panning-component/util.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2022 Aglyn LLC
+ *
+ * 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.
+ */
+export type TransformationMatrix = {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    x: number;
+    y: number;
+};
+export type BoundingBox = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type BoundaryRatio = {
+    vertical: number;
+    horizontal: number;
+};
+export type Coordinates = {
+    x: number;
+    y: number;
+};
+export type BoundCoordinates = {
+    boundX: number;
+    boundY: number;
+    offsetX: number;
+    offsetY: number;
+};
+export type TransformationParameters = {
+    angle: number;
+    scale: number;
+    offsetX: number;
+    offsetY: number;
+};
+export declare const ZOOM_SPEED_MULTIPLIER = 0.065;
+export declare const TransformMatrix: (transformationParameters: TransformationParameters, centerCoordinates: Coordinates) => TransformationMatrix;
+export declare const getTransformedBoundingBox: (transformationParameters: TransformationParameters, boundingBox: BoundingBox) => BoundingBox;
+export declare const getScaleMultiplier: (delta: number, zoomSpeed?: number) => number;
+export declare const boundCoordinates: (x: number, y: number, boundaryRatio: BoundaryRatio, boundingBox: BoundingBox, containerHeight: number, containerWidth: number, offsetX?: number, offsetY?: number) => BoundCoordinates;
+export declare const preventDefault: (e: Event) => void;
+export declare const captureTextSelection: () => void;
+export declare const releaseTextSelection: () => void;

package/src/lib/components/zoomable-panning-component/util.js

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright 2022 Aglyn LLC
+ *
+ * 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.
+ */ export const ZOOM_SPEED_MULTIPLIER = 0.065;
+// Transform matrix use to rotate, zoom and pan
+// Can be written as T(centerX, centerY) * R(theta) * T(-centerX, -centerY) * S(scale, scale) + T(offsetX, offsetY)
+// ( a , c, x )
+// ( b , d, y )
+// ( 0 , 0, 1 )
+export const TransformMatrix = (transformationParameters, centerCoordinates)=>{
+    const { angle, scale, offsetX, offsetY } = transformationParameters;
+    const { x: centerX, y: centerY } = centerCoordinates;
+    const theta = angle * Math.PI / 180;
+    const a = Math.cos(theta) * scale;
+    const b = Math.sin(theta) * scale;
+    const c = -b;
+    const d = a;
+    const transformX = -centerX * a + centerY * b + centerX * scale;
+    const transformY = centerX * c - centerY * d + centerY * scale;
+    return {
+        a,
+        b,
+        c,
+        d,
+        x: transformX + offsetX,
+        y: transformY + offsetY
+    };
+};
+const applyTransformMatrix = (transformationParameters, centerCoordinates)=>(x, y)=>{
+        const { a, b, c, d, x: transformX, y: transformY } = TransformMatrix(transformationParameters, centerCoordinates);
+        return [
+            x * a + y * c + transformX,
+            x * b + y * d + transformY
+        ];
+    };
+export const getTransformedBoundingBox = (transformationParameters, boundingBox)=>{
+    const { top, left, width, height } = boundingBox;
+    const center = {
+        x: width / 2,
+        y: height / 2
+    };
+    const getTransformedCoordinates = applyTransformMatrix(transformationParameters, center);
+    const [x1, y1] = getTransformedCoordinates(left, top);
+    const [x2, y2] = getTransformedCoordinates(left + width, top);
+    const [x3, y3] = getTransformedCoordinates(left + width, top + height);
+    const [x4, y4] = getTransformedCoordinates(left, top + height);
+    return {
+        top: Math.min(y1, y2, y3, y4),
+        left: Math.min(x1, x2, x3, x4),
+        width: Math.max(x1, x2, x3, x4) - Math.min(x1, x2, x3, x4),
+        height: Math.max(y1, y2, y3, y4) - Math.min(y1, y2, y3, y4)
+    };
+};
+export const getScaleMultiplier = (delta, zoomSpeed = 1)=>{
+    const speed = ZOOM_SPEED_MULTIPLIER * zoomSpeed;
+    let scaleMultiplier = 1;
+    if (delta > 0) {
+        scaleMultiplier = 1 - speed;
+    } else if (delta < 0) {
+        scaleMultiplier = 1 + speed;
+    }
+    return scaleMultiplier;
+};
+export const boundCoordinates = (x, y, boundaryRatio, boundingBox, containerHeight, containerWidth, offsetX = 0, offsetY = 0)=>{
+    const { top, left, width, height } = boundingBox;
+    // check that computed are inside boundaries otherwise set to the bounding box limits
+    let boundX = left;
+    let boundY = top;
+    if (boundY < -boundaryRatio.vertical * height) {
+        boundY = -boundaryRatio.vertical * height;
+    } else if (boundY > containerHeight - (1 - boundaryRatio.vertical) * height) {
+        boundY = containerHeight - (1 - boundaryRatio.vertical) * height;
+    }
+    if (boundX < -boundaryRatio.horizontal * width) {
+        boundX = -boundaryRatio.horizontal * width;
+    } else if (boundX > containerWidth - (1 - boundaryRatio.horizontal) * width) {
+        boundX = containerWidth - (1 - boundaryRatio.horizontal) * width;
+    }
+    // return new bounds coordinates for the transform matrix
+    // not the computed x/y coordinates
+    return {
+        boundX: x - (left - boundX),
+        boundY: y - (top - boundY),
+        offsetX: offsetX - (left - boundX),
+        offsetY: offsetY - (top - boundY)
+    };
+};
+export const preventDefault = (e)=>{
+    e.preventDefault();
+};
+export const captureTextSelection = ()=>{
+    if (typeof window !== 'undefined') {
+        window.addEventListener('selectstart', preventDefault);
+    }
+};
+export const releaseTextSelection = ()=>{
+    if (typeof window !== 'undefined') {
+        window.removeEventListener('selectstart', preventDefault);
+    }
+};
+
+//# sourceMappingURL=util.js.map

package/src/lib/components/zoomable-panning-component/util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/shared/ui/jsx/src/lib/components/zoomable-panning-component/util.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2022 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n\nexport type TransformationMatrix = {\n  a: number,\n  b: number,\n  c: number,\n  d: number,\n  x: number,\n  y: number,\n}\n\nexport type BoundingBox = {\n  top: number,\n  left: number,\n  width: number,\n  height: number,\n}\n\nexport type BoundaryRatio = {\n  vertical: number,\n  horizontal: number,\n}\n\nexport type Coordinates = {\n  x: number,\n  y: number,\n}\n\nexport type BoundCoordinates = {boundX: number, boundY: number, offsetX: number, offsetY: number}\n\nexport type TransformationParameters = {\n  angle: number,\n  scale: number,\n  offsetX: number,\n  offsetY: number,\n}\n\nexport const ZOOM_SPEED_MULTIPLIER = 0.065\n\n// Transform matrix use to rotate, zoom and pan\n// Can be written as T(centerX, centerY) * R(theta) * T(-centerX, -centerY) * S(scale, scale) + T(offsetX, offsetY)\n// ( a , c, x )\n// ( b , d, y )\n// ( 0 , 0, 1 )\nexport const TransformMatrix = (transformationParameters: TransformationParameters, centerCoordinates: Coordinates, ): TransformationMatrix => {\n  const {angle, scale, offsetX, offsetY} = transformationParameters\n  const {x: centerX, y: centerY} = centerCoordinates\n  const theta = angle * Math.PI / 180\n  const a = Math.cos(theta) * scale\n  const b = Math.sin(theta) * scale\n  const c = -b\n  const d = a\n  const transformX = -centerX * a + centerY * b + centerX * scale\n  const transformY = centerX * c - centerY * d + centerY * scale\n  return {a, b, c, d, x: transformX + offsetX, y: transformY + offsetY}\n}\n\nconst applyTransformMatrix = (\n  transformationParameters: TransformationParameters,\n  centerCoordinates: Coordinates,\n) => (x: number, y: number): [number, number] => {\n  const {a, b, c, d, x: transformX, y: transformY} = TransformMatrix(transformationParameters, centerCoordinates)\n  return [\n    x * a + y * c + transformX,\n    x * b + y * d + transformY,\n  ]\n}\n\nexport const getTransformedBoundingBox = (\n  transformationParameters: TransformationParameters,\n  boundingBox: BoundingBox,\n): BoundingBox => {\n  const {top, left, width, height} = boundingBox\n  const center = {\n    x: width / 2,\n    y: height / 2,\n  }\n\n  const getTransformedCoordinates = applyTransformMatrix(transformationParameters, center)\n\n  const [x1, y1] = getTransformedCoordinates(left, top)\n  const [x2, y2] = getTransformedCoordinates(left + width, top)\n  const [x3, y3] = getTransformedCoordinates(left + width, top + height)\n  const [x4, y4] = getTransformedCoordinates(left, top + height)\n\n  return {\n    top: Math.min(y1, y2, y3, y4),\n    left: Math.min(x1, x2, x3, x4),\n    width: Math.max(x1, x2, x3, x4) - Math.min(x1, x2, x3, x4),\n    height: Math.max(y1, y2, y3, y4) - Math.min(y1, y2, y3, y4),\n  }\n}\n\nexport const getScaleMultiplier = (\n  delta: number,\n  zoomSpeed = 1,\n): number => {\n  const speed = ZOOM_SPEED_MULTIPLIER * zoomSpeed\n  let scaleMultiplier = 1\n  if (delta > 0) { // zoom out\n    scaleMultiplier = (1 - speed)\n  }\n  else if (delta < 0) { // zoom in\n    scaleMultiplier = (1 + speed)\n  }\n\n  return scaleMultiplier\n}\n\nexport const boundCoordinates = (\n  x: number,\n  y: number,\n  boundaryRatio: BoundaryRatio,\n  boundingBox: BoundingBox,\n  containerHeight: number,\n  containerWidth: number,\n  offsetX = 0,\n  offsetY = 0,\n): BoundCoordinates => {\n\n  const {top, left, width, height} = boundingBox\n  // check that computed are inside boundaries otherwise set to the bounding box limits\n  let boundX = left\n  let boundY = top\n\n  if (boundY < -boundaryRatio.vertical * height) {\n    boundY = -boundaryRatio.vertical * height\n  }\n  else if (boundY > containerHeight - (1 - boundaryRatio.vertical) * height) {\n    boundY = containerHeight - (1 - boundaryRatio.vertical) * height\n  }\n\n  if (boundX < -boundaryRatio.horizontal * width) {\n    boundX = -boundaryRatio.horizontal * width\n  }\n  else if (boundX > containerWidth - (1 - boundaryRatio.horizontal) * width) {\n    boundX = containerWidth - (1 - boundaryRatio.horizontal) * width\n  }\n\n  // return new bounds coordinates for the transform matrix\n  // not the computed x/y coordinates\n  return {\n    boundX: x - (left - boundX),\n    boundY: y - (top - boundY),\n    offsetX: offsetX - (left - boundX),\n    offsetY: offsetY - (top - boundY),\n  }\n}\n\n\nexport const preventDefault = (e: Event) => {\n  e.preventDefault()\n}\n\nexport const captureTextSelection = () => {\n  if (typeof window !== 'undefined') {\n    window.addEventListener('selectstart', preventDefault)\n  }\n}\n\nexport const releaseTextSelection = () => {\n  if (typeof window !== 'undefined') {\n    window.removeEventListener('selectstart', preventDefault)\n  }\n}\n"],"names":["ZOOM_SPEED_MULTIPLIER","TransformMatrix","transformationParameters","centerCoordinates","angle","scale","offsetX","offsetY","x","centerX","y","centerY","theta","Math","PI","a","cos","b","sin","c","d","transformX","transformY","applyTransformMatrix","getTransformedBoundingBox","boundingBox","top","left","width","height","center","getTransformedCoordinates","x1","y1","x2","y2","x3","y3","x4","y4","min","max","getScaleMultiplier","delta","zoomSpeed","speed","scaleMultiplier","boundCoordinates","boundaryRatio","containerHeight","containerWidth","boundX","boundY","vertical","horizontal","preventDefault","e","captureTextSelection","window","addEventListener","releaseTextSelection","removeEventListener"],"mappings":"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"}

package/src/lib/components/zoomable-panning-component/zoomable-panning-component.d.ts

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2021 Aglyn LLC
+ *
+ * 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 { Component, PointerEvent, MouseEvent, KeyboardEvent, TouchEvent, WheelEvent, HTMLAttributes, PropsWithRef } from 'react';
+import { BoundCoordinates, Coordinates, TransformationMatrix, TransformationParameters } from './util';
+type OnStateChangeData = {
+    x: number;
+    y: number;
+    scale: number;
+    angle: number;
+};
+export interface ZoomablePanningComponentProps extends PropsWithRef<HTMLAttributes<HTMLDivElement>> {
+    zoomSpeed: number;
+    doubleZoomSpeed: number;
+    disabled?: boolean;
+    autoCenter?: boolean;
+    autoCenterZoomLevel?: number;
+    disableKeyInteraction?: boolean;
+    disableDoubleClickZoom?: boolean;
+    disableScrollZoom?: boolean;
+    realPinch?: boolean;
+    keyMapping?: Record<string, {
+        x: number;
+        y: number;
+        z: number;
+    }>;
+    minZoom: number;
+    maxZoom: number;
+    preventPan: (event: PointerEvent<HTMLDivElement> | MouseEvent, x: number, y: number) => boolean;
+    noStateUpdate: boolean;
+    boundaryRatioVertical: number;
+    boundaryRatioHorizontal: number;
+    enableBoundingBox?: boolean;
+    onPanStart?: (event: MouseEvent<any> | TouchEvent<any>) => void;
+    onPan?: (event: MouseEvent<any> | TouchEvent<any>) => void;
+    onPanEnd?: (event: MouseEvent<any> | TouchEvent<any>) => void;
+    onStateChange?: (data: OnStateChangeData) => void;
+}
+type State = {
+    x: number;
+    y: number;
+    scale: number;
+    angle: number;
+};
+export declare class ZoomablePanningComponent extends Component<ZoomablePanningComponentProps, State> {
+    static defaultProps: {
+        zoomSpeed: number;
+        doubleZoomSpeed: number;
+        disabled: boolean;
+        minZoom: number;
+        maxZoom: number;
+        noStateUpdate: boolean;
+        boundaryRatioVertical: number;
+        boundaryRatioHorizontal: number;
+        disableDoubleClickZoom: boolean;
+        disableScrollZoom: boolean;
+        preventPan: () => boolean;
+    };
+    container: import("react").RefObject<HTMLDivElement>;
+    dragContainer: import("react").RefObject<HTMLDivElement>;
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    panning: boolean;
+    touchInProgress: boolean;
+    panStartTriggered: boolean;
+    pinchZoomLength: number;
+    prevPanPosition: {
+        x: number;
+        y: number;
+    };
+    frameAnimation: number;
+    intermediateFrameAnimation: number;
+    transformMatrixString: string;
+    intermediateTransformMatrixString: string;
+    state: State;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ZoomablePanningComponentProps, prevState: State): void;
+    componentWillUnmount(): void;
+    onDoubleClick: (e: MouseEvent<any>) => void;
+    onMouseDown: (e: MouseEvent<any>) => void;
+    onMouseMove: (e: MouseEvent<any>) => void;
+    onMouseUp: (e: MouseEvent<any>) => void;
+    onWheel: (e: WheelEvent<any>) => void;
+    onKeyDown: (e: KeyboardEvent<any>) => void;
+    onKeyUp: (e: KeyboardEvent<any>) => void;
+    onTouchStart: (e: TouchEvent<any>) => void;
+    onToucheMove: (e: TouchEvent<any>) => void;
+    onTouchEnd: (e: TouchEvent<any>) => void;
+    setMouseListeners: () => void;
+    cleanMouseListeners: () => void;
+    setTouchListeners: () => void;
+    cleanTouchListeners: () => void;
+    triggerOnPanStart: (e: MouseEvent<any> | TouchEvent<any>) => void;
+    triggerOnPan: (e: MouseEvent<any> | TouchEvent<any>) => void;
+    triggerOnPanEnd: (e: MouseEvent<any> | TouchEvent<any>) => void;
+    getPinchZoomLength: (finger1: Touch, finger2: Touch) => number;
+    getContainer: () => HTMLDivElement;
+    getDragContainer: () => HTMLDivElement;
+    autoCenter: (zoomLevel?: number, animate?: boolean) => void;
+    moveByRatio: (x: number, y: number, moveSpeedRatio?: number) => void;
+    moveBy: (dx: number, dy: number, noStateUpdate?: boolean) => void;
+    rotate: (value: number | ((prevAngle: number) => number)) => void;
+    zoomAbs: (x: number, y: number, zoomLevel: number) => void;
+    zoomTo: (x: number, y: number, ratio: number) => void;
+    centeredZoom: (delta: number, zoomSpeed?: number) => void;
+    zoomIn: (zoomSpeed?: number) => void;
+    zoomOut: (zoomSpeed?: number) => void;
+    reset: () => void;
+    getContainerBoundingRect: () => ClientRect;
+    getOffset: (e: MouseEvent<any> | Touch) => Coordinates;
+    getTransformMatrix: (x: number, y: number, scale: number, angle: number) => TransformationMatrix;
+    applyTransform: () => void;
+    applyIntermediateTransform: () => void;
+    getBoundCoordinates: (coordinates: Coordinates, transformationParameters: TransformationParameters) => BoundCoordinates;
+    render(): import("react").JSX.Element;
+}
+export default ZoomablePanningComponent;