amis-ui 6.10.0 → 6.11.0-beta.0

package/lib/utils/smoothSignature.d.ts

@@ -0,0 +1,86 @@
+interface IOptions {
+    width?: number;
+    height?: number;
+    color?: string;
+    bgColor?: string;
+    scale?: number;
+    openSmooth?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    minSpeed?: number;
+    maxWidthDiffRate?: number;
+    maxHistoryLength?: number;
+    onStart?: (event: any) => void;
+    onEnd?: (event: any) => void;
+}
+interface IPoint {
+    x: number;
+    y: number;
+    t: number;
+    speed?: number;
+    distance?: number;
+    lineWidth?: number;
+}
+interface IRadianData {
+    val: number;
+    pos: -1 | 1;
+}
+declare class SmoothSignature {
+    constructor(canvas: HTMLCanvasElement, options: IOptions);
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    scale: number;
+    color: string;
+    bgColor: string;
+    canDraw: boolean;
+    openSmooth: boolean;
+    minWidth: number;
+    maxWidth: number;
+    minSpeed: number;
+    maxWidthDiffRate: number;
+    points: IPoint[];
+    canAddHistory: boolean;
+    historyList: string[];
+    maxHistoryLength: number;
+    onStart: any;
+    onEnd: any;
+    init(canvas: HTMLCanvasElement, options?: IOptions): void;
+    addListener: () => void;
+    removeListener: () => void;
+    onDrawStart: (e: any) => void;
+    onDrawMove: (e: any) => void;
+    onDraw: (prePoint: any, point: any) => void;
+    onDrawEnd: (e: any) => void;
+    getLineWidth: (speed: number) => number;
+    getRadianData: (x1: number, y1: number, x2: number, y2: number) => IRadianData;
+    getRadianPoints: (radianData: IRadianData, x: number, y: number, halfLineWidth: number) => {
+        x: number;
+        y: number;
+    }[];
+    initPoint: (event: any) => void;
+    drawSmoothLine: (prePoint: any, point: any) => void;
+    drawNoSmoothLine: (prePoint: any, point: any) => void;
+    drawCurveLine: (x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, lineWidth: number) => void;
+    drawTrapezoid: (point1: any, point2: any, point3: any, point4: any) => void;
+    drawBgColor: () => void;
+    drawByImageUrl: (url: string) => void;
+    addHistory: () => void;
+    clear: () => void;
+    undo: () => void;
+    toDataURL: (type?: string, quality?: number) => string;
+    getPNG: () => string;
+    getJPG: (quality?: number) => string;
+    isEmpty: () => boolean;
+    getRotateCanvas: (degree?: number) => HTMLCanvasElement;
+    /**
+     * drawImage base64
+     * @date 2024-12-02 星期一
+     * @function
+     * @param {}
+     * @return {}
+     */
+    loadFromBase64(base64: string): void;
+}
+export default SmoothSignature;

package/lib/utils/smoothSignature.js

@@ -0,0 +1,390 @@
+/**
+ * amis-ui v6.11.0-beta.0
+ * Copyright 2018-2024 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isMobile = /Android|iPhone|iPad|Mobile/i.test(navigator.userAgent);
+var SmoothSignature = /** @class */ (function () {
+    function SmoothSignature(canvas, options) {
+        var _this = this;
+        this.canvas = {};
+        this.ctx = {};
+        this.width = 320;
+        this.height = 200;
+        this.scale = window.devicePixelRatio || 1;
+        this.color = 'black';
+        this.bgColor = '';
+        this.canDraw = false;
+        this.openSmooth = true;
+        this.minWidth = 2;
+        this.maxWidth = 6;
+        this.minSpeed = 1.5;
+        this.maxWidthDiffRate = 20;
+        this.points = [];
+        this.canAddHistory = true;
+        this.historyList = [];
+        this.maxHistoryLength = 20;
+        this.onStart = function () { };
+        this.onEnd = function () { };
+        this.addListener = function () {
+            _this.removeListener();
+            _this.canvas.style.touchAction = 'none';
+            if (isMobile && ('ontouchstart' in window || navigator.maxTouchPoints)) {
+                _this.canvas.addEventListener('touchstart', _this.onDrawStart, {
+                    passive: false
+                });
+                _this.canvas.addEventListener('touchmove', _this.onDrawMove, {
+                    passive: false
+                });
+                document.addEventListener('touchcancel', _this.onDrawEnd, {
+                    passive: false
+                });
+                document.addEventListener('touchend', _this.onDrawEnd, { passive: false });
+            }
+            else {
+                _this.canvas.addEventListener('mousedown', _this.onDrawStart);
+                _this.canvas.addEventListener('mousemove', _this.onDrawMove);
+                document.addEventListener('mouseup', _this.onDrawEnd);
+            }
+        };
+        this.removeListener = function () {
+            _this.canvas.style.touchAction = 'auto';
+            _this.canvas.removeEventListener('touchstart', _this.onDrawStart);
+            _this.canvas.removeEventListener('touchmove', _this.onDrawMove);
+            document.removeEventListener('touchend', _this.onDrawEnd);
+            document.removeEventListener('touchcancel', _this.onDrawEnd);
+            _this.canvas.removeEventListener('mousedown', _this.onDrawStart);
+            _this.canvas.removeEventListener('mousemove', _this.onDrawMove);
+            document.removeEventListener('mouseup', _this.onDrawEnd);
+        };
+        this.onDrawStart = function (e) {
+            e.preventDefault();
+            _this.canDraw = true;
+            _this.canAddHistory = true;
+            _this.ctx.strokeStyle = _this.color;
+            _this.initPoint(e);
+            _this.onStart && _this.onStart(e);
+        };
+        this.onDrawMove = function (e) {
+            e.preventDefault();
+            if (!_this.canDraw)
+                return;
+            _this.initPoint(e);
+            if (_this.points.length < 2)
+                return;
+            _this.addHistory();
+            var point = _this.points.slice(-1)[0];
+            var prePoint = _this.points.slice(-2, -1)[0];
+            if (window.requestAnimationFrame) {
+                window.requestAnimationFrame(function () { return _this.onDraw(prePoint, point); });
+            }
+            else {
+                _this.onDraw(prePoint, point);
+            }
+        };
+        this.onDraw = function (prePoint, point) {
+            if (_this.openSmooth) {
+                _this.drawSmoothLine(prePoint, point);
+            }
+            else {
+                _this.drawNoSmoothLine(prePoint, point);
+            }
+        };
+        this.onDrawEnd = function (e) {
+            if (!_this.canDraw)
+                return;
+            _this.canDraw = false;
+            _this.canAddHistory = true;
+            _this.points = [];
+            _this.onEnd && _this.onEnd(e);
+        };
+        this.getLineWidth = function (speed) {
+            var minSpeed = _this.minSpeed > 10 ? 10 : _this.minSpeed < 1 ? 1 : _this.minSpeed;
+            var addWidth = ((_this.maxWidth - _this.minWidth) * speed) / minSpeed;
+            var lineWidth = Math.max(_this.maxWidth - addWidth, _this.minWidth);
+            return Math.min(lineWidth, _this.maxWidth);
+        };
+        this.getRadianData = function (x1, y1, x2, y2) {
+            var dis_x = x2 - x1;
+            var dis_y = y2 - y1;
+            if (dis_x === 0) {
+                return { val: 0, pos: -1 };
+            }
+            if (dis_y === 0) {
+                return { val: 0, pos: 1 };
+            }
+            var val = Math.abs(Math.atan(dis_y / dis_x));
+            if ((x2 > x1 && y2 < y1) || (x2 < x1 && y2 > y1)) {
+                return { val: val, pos: 1 };
+            }
+            return { val: val, pos: -1 };
+        };
+        this.getRadianPoints = function (radianData, x, y, halfLineWidth) {
+            if (radianData.val === 0) {
+                if (radianData.pos === 1) {
+                    return [
+                        { x: x, y: y + halfLineWidth },
+                        { x: x, y: y - halfLineWidth }
+                    ];
+                }
+                return [
+                    { y: y, x: x + halfLineWidth },
+                    { y: y, x: x - halfLineWidth }
+                ];
+            }
+            var dis_x = Math.sin(radianData.val) * halfLineWidth;
+            var dis_y = Math.cos(radianData.val) * halfLineWidth;
+            if (radianData.pos === 1) {
+                return [
+                    { x: x + dis_x, y: y + dis_y },
+                    { x: x - dis_x, y: y - dis_y }
+                ];
+            }
+            return [
+                { x: x + dis_x, y: y - dis_y },
+                { x: x - dis_x, y: y + dis_y }
+            ];
+        };
+        this.initPoint = function (event) {
+            var t = Date.now();
+            var prePoint = _this.points.slice(-1)[0];
+            if (prePoint && prePoint.t === t) {
+                return;
+            }
+            var rect = _this.canvas.getBoundingClientRect();
+            var e = (event.touches && event.touches[0]) || event;
+            var x = e.clientX - rect.left;
+            var y = e.clientY - rect.top;
+            if (prePoint && prePoint.x === x && prePoint.y === y) {
+                return;
+            }
+            var point = { x: x, y: y, t: t };
+            if (_this.openSmooth && prePoint) {
+                var prePoint2 = _this.points.slice(-2, -1)[0];
+                point.distance = Math.sqrt(Math.pow(point.x - prePoint.x, 2) + Math.pow(point.y - prePoint.y, 2));
+                point.speed = point.distance / (point.t - prePoint.t || 0.1);
+                point.lineWidth = _this.getLineWidth(point.speed);
+                if (prePoint2 && prePoint2.lineWidth && prePoint.lineWidth) {
+                    var rate = (point.lineWidth - prePoint.lineWidth) / prePoint.lineWidth;
+                    var maxRate = _this.maxWidthDiffRate / 100;
+                    maxRate = maxRate > 1 ? 1 : maxRate < 0.01 ? 0.01 : maxRate;
+                    if (Math.abs(rate) > maxRate) {
+                        var per = rate > 0 ? maxRate : -maxRate;
+                        point.lineWidth = prePoint.lineWidth * (1 + per);
+                    }
+                }
+            }
+            _this.points.push(point);
+            _this.points = _this.points.slice(-3);
+        };
+        this.drawSmoothLine = function (prePoint, point) {
+            var dis_x = point.x - prePoint.x;
+            var dis_y = point.y - prePoint.y;
+            if (Math.abs(dis_x) + Math.abs(dis_y) <= _this.scale) {
+                point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5;
+                point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5;
+            }
+            else {
+                point.lastX1 = prePoint.x + dis_x * 0.3;
+                point.lastY1 = prePoint.y + dis_y * 0.3;
+                point.lastX2 = prePoint.x + dis_x * 0.7;
+                point.lastY2 = prePoint.y + dis_y * 0.7;
+            }
+            point.perLineWidth = (prePoint.lineWidth + point.lineWidth) / 2;
+            if (typeof prePoint.lastX1 === 'number') {
+                _this.drawCurveLine(prePoint.lastX2, prePoint.lastY2, prePoint.x, prePoint.y, point.lastX1, point.lastY1, point.perLineWidth);
+                if (prePoint.isFirstPoint)
+                    return;
+                if (prePoint.lastX1 === prePoint.lastX2 &&
+                    prePoint.lastY1 === prePoint.lastY2)
+                    return;
+                var data = _this.getRadianData(prePoint.lastX1, prePoint.lastY1, prePoint.lastX2, prePoint.lastY2);
+                var points1 = _this.getRadianPoints(data, prePoint.lastX1, prePoint.lastY1, prePoint.perLineWidth / 2);
+                var points2 = _this.getRadianPoints(data, prePoint.lastX2, prePoint.lastY2, point.perLineWidth / 2);
+                _this.drawTrapezoid(points1[0], points2[0], points2[1], points1[1]);
+            }
+            else {
+                point.isFirstPoint = true;
+            }
+        };
+        this.drawNoSmoothLine = function (prePoint, point) {
+            point.lastX = prePoint.x + (point.x - prePoint.x) * 0.5;
+            point.lastY = prePoint.y + (point.y - prePoint.y) * 0.5;
+            if (typeof prePoint.lastX === 'number') {
+                _this.drawCurveLine(prePoint.lastX, prePoint.lastY, prePoint.x, prePoint.y, point.lastX, point.lastY, _this.maxWidth);
+            }
+        };
+        this.drawCurveLine = function (x1, y1, x2, y2, x3, y3, lineWidth) {
+            _this.ctx.lineWidth = Number(lineWidth.toFixed(1));
+            _this.ctx.beginPath();
+            _this.ctx.moveTo(Number(x1.toFixed(1)), Number(y1.toFixed(1)));
+            _this.ctx.quadraticCurveTo(Number(x2.toFixed(1)), Number(y2.toFixed(1)), Number(x3.toFixed(1)), Number(y3.toFixed(1)));
+            _this.ctx.stroke();
+        };
+        this.drawTrapezoid = function (point1, point2, point3, point4) {
+            _this.ctx.beginPath();
+            _this.ctx.moveTo(Number(point1.x.toFixed(1)), Number(point1.y.toFixed(1)));
+            _this.ctx.lineTo(Number(point2.x.toFixed(1)), Number(point2.y.toFixed(1)));
+            _this.ctx.lineTo(Number(point3.x.toFixed(1)), Number(point3.y.toFixed(1)));
+            _this.ctx.lineTo(Number(point4.x.toFixed(1)), Number(point4.y.toFixed(1)));
+            _this.ctx.fillStyle = _this.color;
+            _this.ctx.fill();
+        };
+        this.drawBgColor = function () {
+            if (!_this.bgColor)
+                return;
+            _this.ctx.fillStyle = _this.bgColor;
+            _this.ctx.fillRect(0, 0, _this.width, _this.height);
+        };
+        this.drawByImageUrl = function (url) {
+            var image = new Image();
+            image.onload = function () {
+                _this.ctx.clearRect(0, 0, _this.width, _this.height);
+                _this.ctx.drawImage(image, 0, 0, _this.width, _this.height);
+            };
+            image.crossOrigin = 'anonymous';
+            image.src = url;
+        };
+        this.addHistory = function () {
+            if (!_this.maxHistoryLength || !_this.canAddHistory)
+                return;
+            _this.canAddHistory = false;
+            _this.historyList.push(_this.canvas.toDataURL());
+            _this.historyList = _this.historyList.slice(-_this.maxHistoryLength);
+        };
+        this.clear = function () {
+            _this.ctx.clearRect(0, 0, _this.width, _this.height);
+            _this.drawBgColor();
+            _this.historyList.length = 0;
+        };
+        this.undo = function () {
+            var dataUrl = _this.historyList.splice(-1)[0];
+            dataUrl && _this.drawByImageUrl(dataUrl);
+        };
+        this.toDataURL = function (type, quality) {
+            if (type === void 0) { type = 'image/png'; }
+            if (quality === void 0) { quality = 1; }
+            if (_this.canvas.width === _this.width) {
+                return _this.canvas.toDataURL(type, quality);
+            }
+            var canvas = document.createElement('canvas');
+            canvas.width = _this.width;
+            canvas.height = _this.height;
+            var ctx = canvas.getContext('2d');
+            ctx.drawImage(_this.canvas, 0, 0, canvas.width, canvas.height);
+            return canvas.toDataURL(type, quality);
+        };
+        this.getPNG = function () {
+            return _this.toDataURL();
+        };
+        this.getJPG = function (quality) {
+            if (quality === void 0) { quality = 0.8; }
+            return _this.toDataURL('image/jpeg', quality);
+        };
+        this.isEmpty = function () {
+            var canvas = document.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            canvas.width = _this.canvas.width;
+            canvas.height = _this.canvas.height;
+            if (_this.bgColor) {
+                ctx.fillStyle = _this.bgColor;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            else if (_this.scale !== 1) {
+                ctx.scale(_this.scale, _this.scale);
+            }
+            return canvas.toDataURL() === _this.canvas.toDataURL();
+        };
+        this.getRotateCanvas = function (degree) {
+            if (degree === void 0) { degree = 90; }
+            if (degree > 0) {
+                degree = degree > 90 ? 180 : 90;
+            }
+            else {
+                degree = degree < -90 ? 180 : -90;
+            }
+            var canvas = document.createElement('canvas');
+            var w = _this.width;
+            var h = _this.height;
+            if (degree === 180) {
+                canvas.width = w;
+                canvas.height = h;
+            }
+            else {
+                canvas.width = h;
+                canvas.height = w;
+            }
+            var ctx = canvas.getContext('2d');
+            ctx.rotate((degree * Math.PI) / 180);
+            if (degree === 90) {
+                // 顺时针90度
+                ctx.drawImage(_this.canvas, 0, -h, w, h);
+            }
+            else if (degree === -90) {
+                // 逆时针90度
+                ctx.drawImage(_this.canvas, -w, 0, w, h);
+            }
+            else if (degree === 180) {
+                ctx.drawImage(_this.canvas, -w, -h, w, h);
+            }
+            return canvas;
+        };
+        this.init(canvas, options);
+    }
+    SmoothSignature.prototype.init = function (canvas, options) {
+        if (options === void 0) { options = {}; }
+        if (!canvas)
+            return;
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.width = options.width || canvas.clientWidth || this.width;
+        this.height = options.height || canvas.clientHeight || this.height;
+        this.scale = options.scale || this.scale;
+        this.color = options.color || this.color;
+        this.bgColor = options.bgColor || this.bgColor;
+        this.openSmooth =
+            options.openSmooth === undefined ? this.openSmooth : !!options.openSmooth;
+        this.minWidth = options.minWidth || this.minWidth;
+        this.maxWidth = options.maxWidth || this.maxWidth;
+        this.minSpeed = options.minSpeed || this.minSpeed;
+        this.maxWidthDiffRate = options.maxWidthDiffRate || this.maxWidthDiffRate;
+        this.maxHistoryLength = options.maxHistoryLength || this.maxHistoryLength;
+        this.onStart = options.onStart;
+        this.onEnd = options.onEnd;
+        if (this.scale > 0) {
+            this.canvas.height = this.height * this.scale;
+            this.canvas.width = this.width * this.scale;
+            if (this.scale !== 1) {
+                this.canvas.style.width = this.width + 'px';
+                this.canvas.style.height = this.height + 'px';
+                this.ctx.scale(this.scale, this.scale);
+            }
+        }
+        this.ctx.lineCap = 'round';
+        this.drawBgColor();
+        this.addListener();
+    };
+    /**
+     * drawImage base64
+     * @date 2024-12-02 星期一
+     * @function
+     * @param {}
+     * @return {}
+     */
+    SmoothSignature.prototype.loadFromBase64 = function (base64) {
+        var _this = this;
+        var image = new Image();
+        image.onload = function () {
+            _this.ctx.clearRect(0, 0, _this.width, _this.height);
+            _this.ctx.drawImage(image, 0, 0, _this.width, _this.height);
+        };
+        image.src = base64;
+    };
+    return SmoothSignature;
+}());
+
+exports["default"] = SmoothSignature;

package/lib/withRemoteConfig.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.10.0
+ * amis-ui v6.11.0-beta.0
  * Copyright 2018-2024 fex
  */
 

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.10.0
+ * amis-ui v6.11.0-beta.0
  * Copyright 2018-2024 fex
  */
 

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.10.0",
+  "version": "6.11.0-beta.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c ",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.10.0",
-    "amis-formula": "^6.10.0",
+    "amis-core": "^6.11.0-beta.0",
+    "amis-formula": "^6.11.0-beta.0",
     "animate.css": "4.1.1",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
@@ -70,7 +70,6 @@
     "react-textarea-autosize": "8.3.3",
     "react-transition-group": "4.4.2",
     "react-visibility-sensor": "5.1.1",
-    "smooth-signature": "^1.0.15",
     "sortablejs": "1.15.0",
     "tinymce": "^6.1.2",
     "tslib": "^2.3.1",

package/scss/_components.scss

@@ -1907,9 +1907,9 @@
   --radio-default-default-distance: var(--sizes-size-5);
   @include margin(
     --radio-default-default,
-    var(--sizes-size-0),
-    var(--sizes-size-9),
     var(--sizes-size-4),
+    var(--sizes-size-9),
+    var(--sizes-size-0),
     var(--sizes-size-0)
   );
 
@@ -1931,9 +1931,9 @@
 
   @include margin(
     --radio-default-vertical,
-    var(--sizes-size-0),
-    var(--sizes-size-5),
     var(--sizes-size-4),
+    var(--sizes-size-5),
+    var(--sizes-size-0),
     var(--sizes-size-0)
   );
 

package/scss/components/_crud.scss

@@ -13,7 +13,7 @@
     &-overflow {
       &-wrapper {
         display: flex;
-        flex-flow: column nowrap;
+        flex-wrap: wrap;
         justify-content: flex-start;
         align-items: flex-start;
         overflow-x: hidden;

package/scss/components/_table.scss

@@ -1018,8 +1018,9 @@
     margin-bottom: 0;
 
     > .#{$ns}Table-contentWrap {
-      > .#{$ns}Table-content table {
+      > .#{$ns}Table-content > table {
         border-top: none; // 不然会导致拖动时顶部露出内容
+        min-height: 100%; // 为了让表格占满高度
       }
 
       > .#{$ns}Table-content table thead {

package/scss/components/form/_checks.scss

@@ -1,5 +1,5 @@
 .#{$ns}Checkbox {
-  margin: 0 var(--gap-sm) 0 0;
+  margin: var(--Form-label-paddingTop) var(--gap-sm) 0 0;
   font-weight: var(--fontWeightNormal);
   display: inline-block;
   cursor: pointer;
@@ -376,7 +376,6 @@
 .#{$ns}CheckboxesControl {
   .#{$ns}Checkbox {
     display: block;
-    margin-bottom: var(--Form-label-paddingTop);
   }
 
   &.is-inline .#{$ns}Checkbox {

package/scss/components/form/_picker.scss

@@ -97,6 +97,10 @@
 
   .#{$ns}Picker-values {
     display: inline;
+
+    .#{$ns}Picker-valueLabel {
+      pointer-events: auto;
+    }
   }
 
   &-valueWrap {
@@ -158,7 +162,7 @@
   &-overflow {
     &-wrapper {
       display: flex;
-      flex-flow: column nowrap;
+      flex-wrap: wrap;
       justify-content: flex-start;
       align-items: flex-start;
       overflow-x: hidden;