x-star-design 0.0.9 → 0.0.11

package/dist/ac-animation/define.d.ts

@@ -0,0 +1,34 @@
+export interface ImgShowProps {
+    /**
+     * @description 缩放比例
+     */
+    scale?: number;
+    offsetX?: number;
+    offsetY?: number;
+}
+export interface titleShowProps {
+    offsetX?: number;
+    offsetY?: number;
+    fontSize?: number;
+    fontFamily?: string;
+    shadowColor?: string;
+    color?: string;
+}
+export interface AcAnimationProps {
+    /**
+     * @description 文本内容
+     */
+    title?: string;
+    /**
+     * @description 图片地址
+     */
+    imgUrl?: string;
+    /**
+     * @default scale: 1, offsetX: 0, offsetY: 0 相对canvas水平垂直居中
+     */
+    imgSizeAndPosition?: ImgShowProps;
+    /**
+     * @default offsetX: 0, offsetY: 0, fontSize: 36, fontFamily: 'Arial', shadowColor: 'rgba(2,38,121,0.2)', color: '#022679' 相对canvas水平垂直居中
+     */
+    titleStyle?: titleShowProps;
+}

package/dist/ac-animation/define.js

@@ -0,0 +1 @@
+export {};

package/dist/ac-animation/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AcAnimationProps } from './define';
+declare const AcAnimation: React.FC<AcAnimationProps>;
+export default AcAnimation;

package/dist/ac-animation/index.js

@@ -0,0 +1,180 @@
+import React, { useEffect } from 'react';
+var AcAnimation = function AcAnimation(_ref) {
+  var title = _ref.title,
+    imgUrl = _ref.imgUrl,
+    _ref$imgSizeAndPositi = _ref.imgSizeAndPosition,
+    imgSizeAndPosition = _ref$imgSizeAndPositi === void 0 ? {
+      scale: 1,
+      offsetX: 0,
+      offsetY: 0
+    } : _ref$imgSizeAndPositi,
+    titleStyle = _ref.titleStyle;
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  var AnimationID = -1;
+  var confetti = [];
+  var confettiCount = 300;
+  var gravity = 0.5;
+  var terminalVelocity = 5;
+  var drag = 0.075;
+  var colors = [{
+    front: 'red',
+    back: 'darkred'
+  }, {
+    front: 'green',
+    back: 'darkgreen'
+  }, {
+    front: 'blue',
+    back: 'darkblue'
+  }, {
+    front: 'yellow',
+    back: 'darkyellow'
+  }, {
+    front: 'orange',
+    back: 'darkorange'
+  }, {
+    front: 'pink',
+    back: 'darkpink'
+  }, {
+    front: 'purple',
+    back: 'darkpurple'
+  }, {
+    front: 'turquoise',
+    back: 'darkturquoise'
+  }];
+  var img = new Image();
+  img.src = imgUrl || '';
+  useEffect(function () {
+    if (canvas) {
+      canvas.style.zIndex = '9999';
+      canvas.style.width = '60vw';
+      canvas.style.height = '60vh';
+      canvas.style.position = 'absolute';
+      canvas.style.top = '50%';
+      canvas.style.left = '50%';
+      canvas.style.transform = 'translate(-50%, -50%)';
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    }
+  }, [canvas]);
+  var resizeCanvas = function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  };
+  var renderImg = function renderImg(imgSizeAndPosition) {
+    ctx.save();
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.drawImage(img, imgSizeAndPosition.offsetX || 0 - img.width * (imgSizeAndPosition.scale || 1) / 2, imgSizeAndPosition.offsetY || 0 - img.height * (imgSizeAndPosition.scale || 1) / 2, img.width * (imgSizeAndPosition.scale || 1), img.height * (imgSizeAndPosition.scale || 1));
+    ctx.restore();
+  };
+  var renderText = function renderText(titleStyle) {
+    ctx.save();
+    ctx.shadowOffsetX = 4;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowBlur = 4;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.font = "bold \n\t\t".concat((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize) || 36, "px \n\t\t").concat((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily) || 'Arial');
+    ctx.fillStyle = (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.color) || '#022679';
+    ctx.shadowColor = (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily) || 'rgba(2,38,121,0.2)';
+    ctx.fillText(title || '', canvas.width / 2 + ((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.offsetX) || 0), canvas.height / 2 + ((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.offsetY) || 0));
+    ctx.restore();
+  };
+  var randomRange = function randomRange(min, max) {
+    return Math.random() * (max - min) + min;
+  };
+  var initConfetti = function initConfetti() {
+    for (var i = 0; i < confettiCount; i++) {
+      confetti.push({
+        color: colors[Math.floor(randomRange(0, colors.length))],
+        dimensions: {
+          x: randomRange(10, 20),
+          y: randomRange(10, 30)
+        },
+        position: {
+          x: randomRange(0, canvas.width),
+          y: canvas.height - 1
+        },
+        rotation: randomRange(0, 2 * Math.PI),
+        scale: {
+          x: 1,
+          y: 1
+        },
+        velocity: {
+          x: randomRange(-25, 25),
+          y: randomRange(0, -50)
+        }
+      });
+    }
+  };
+
+  //---------Render-----------
+  var render = function render() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (title) {
+      renderText(titleStyle);
+    }
+    if (imgUrl) {
+      renderImg(imgSizeAndPosition);
+    }
+    confetti.forEach(function (confetto, index) {
+      var width = confetto.dimensions.x * confetto.scale.x;
+      var height = confetto.dimensions.y * confetto.scale.y;
+
+      // Move canvas to position and rotate
+      ctx.translate(confetto.position.x, confetto.position.y);
+      ctx.rotate(confetto.rotation);
+
+      // Apply forces to velocity
+      confetto.velocity.x -= confetto.velocity.x * drag;
+      confetto.velocity.y = Math.min(confetto.velocity.y + gravity, terminalVelocity);
+      confetto.velocity.x += Math.random() > 0.5 ? Math.random() : -Math.random();
+
+      // Set position
+      confetto.position.x += confetto.velocity.x;
+      confetto.position.y += confetto.velocity.y;
+
+      // Delete confetti when out of frame
+      if (confetto.position.y >= canvas.height) confetti.splice(index, 1);
+
+      // Loop confetto x position
+      if (confetto.position.x > canvas.width) confetto.position.x = 0;
+      if (confetto.position.x < 0) confetto.position.x = canvas.width;
+
+      // Spin confetto by scaling y
+      confetto.scale.y = Math.cos(confetto.position.y * 0.1);
+      ctx.fillStyle = confetto.scale.y > 0 ? confetto.color.front : confetto.color.back;
+
+      // Draw confetti
+      ctx.fillRect(-width / 2, -height / 2, width, height);
+
+      // Reset transform matrix
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+    });
+    if (confetti.length <= 10) {
+      canvas.remove();
+      window.cancelAnimationFrame(AnimationID);
+      return;
+    }
+    AnimationID = window.requestAnimationFrame(render);
+  };
+
+  //----------Resize----------
+  window.addEventListener('resize', function () {
+    resizeCanvas();
+  });
+  useEffect(function () {
+    var _document$getElementB;
+    initConfetti();
+    render();
+    (_document$getElementB = document.getElementById('ac-canvas')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.appendChild(canvas);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: "ac-canvas",
+    onClick: function onClick() {
+      canvas.remove();
+      window.cancelAnimationFrame(AnimationID);
+    }
+  }));
+};
+export default AcAnimation;

package/dist/draggable-layout/index.d.ts

@@ -3,11 +3,13 @@ interface DraggableLayoutProps {
     className?: string;
     style?: React.CSSProperties;
     dividerClassName?: string;
-    minWidth: [number, number];
-    defaultWidth: number;
+    dividerWidth?: string;
+    dividerChildren?: React.ReactNode;
+    defaultWidth?: string;
+    minWidth?: [string, string];
+    collapsible?: [boolean, boolean];
     left: React.ReactNode;
     right: React.ReactNode;
-    barWidth: number;
 }
 /**
  * 可拖拽布局

package/dist/draggable-layout/index.js

@@ -4,105 +4,155 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useMemoizedFn, useMouse, useSize } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
-import { useDelayedMount } from 'x-star-utils';
+import React, { useRef, useState } from 'react';
 import { prefix } from "../utils/global";
 /**
  * 可拖拽布局
  */
 var DraggableLayout = function DraggableLayout(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
+  var className = _ref.className,
     style = _ref.style,
     dividerClassName = _ref.dividerClassName,
-    minWidth = _ref.minWidth,
-    defaultWidth = _ref.defaultWidth,
+    _ref$dividerWidth = _ref.dividerWidth,
+    dividerWidth = _ref$dividerWidth === void 0 ? '0%' : _ref$dividerWidth,
+    dividerChildren = _ref.dividerChildren,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? '50%' : _ref$defaultWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? ['25%', '25%'] : _ref$minWidth,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? [true, true] : _ref$collapsible,
     left = _ref.left,
-    right = _ref.right,
-    barWidth = _ref.barWidth;
-  var _useState = useState(300),
+    right = _ref.right;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dragging = _useState4[0],
-    setDragging = _useState4[1];
-  var wrapper = useRef(null);
-  var _useMouse = useMouse(wrapper),
-    elementX = _useMouse.elementX;
-  var size = useSize(wrapper);
-  useEffect(function () {
-    if (size) {
-      setWidth(defaultWidth / 100 * size.width);
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
+  var transition = useRef(false);
+  var wrapperRef = useRef(null);
+  var dividerRef = useRef(null);
+  var leftRef = useRef(null);
+  var rightRef = useRef(null);
+  var enableTransition = useMemoizedFn(function () {
+    if (dividerRef.current && leftRef.current && rightRef.current) {
+      dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s, left 0.3s';
+      leftRef.current.style.transition = 'left 0.3s, right 0.3s';
+      rightRef.current.style.transition = 'left 0.3s, right 0.3s';
     }
-  }, [defaultWidth, size]);
-  useEffect(function () {
-    if (dragging && size) {
-      if (elementX < minWidth[0] / 100 * size.width / 2) {
-        setWidth(0);
-      } else if (elementX < minWidth[0] / 100 * size.width) {
-        setWidth(minWidth[0] / 100 * size.width);
-      } else if (elementX < size.width - minWidth[1] / 100 * size.width) {
-        setWidth(elementX);
-      } else if (elementX < size.width - minWidth[1] / 100 * size.width / 2) {
-        setWidth(size.width - minWidth[1] / 100 * size.width);
+  });
+  var disableTransition = useMemoizedFn(function () {
+    if (dividerRef.current && leftRef.current && rightRef.current) {
+      dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s';
+      leftRef.current.style.transition = '';
+      rightRef.current.style.transition = '';
+    }
+  });
+  var dragHandler = useMemoizedFn(function (e) {
+    if (!transition.current && wrapperRef.current && dividerRef.current && leftRef.current && rightRef.current) {
+      if (collapsible[0] && e.offsetX < leftRef.current.offsetWidth / 2) {
+        if (leftRef.current.style.right !== '100%') {
+          // 左侧收起
+          enableTransition();
+          transition.current = true;
+          setTimeout(function () {
+            return transition.current = false;
+          }, 300);
+          dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
+          dividerRef.current.style.left = '0';
+          leftRef.current.style.left = "-".concat(minWidth[0]);
+          leftRef.current.style.right = '100%';
+          rightRef.current.style.left = dividerWidth;
+          rightRef.current.style.right = '0';
+        }
+      } else if (collapsible[1] && e.offsetX > wrapperRef.current.offsetWidth - rightRef.current.offsetWidth / 2) {
+        if (rightRef.current.style.left !== '100%') {
+          // 右侧收起
+          enableTransition();
+          transition.current = true;
+          setTimeout(function () {
+            return transition.current = false;
+          }, 300);
+          dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
+          dividerRef.current.style.left = "calc(100% - ".concat(dividerWidth, ")");
+          leftRef.current.style.left = '0';
+          leftRef.current.style.right = dividerWidth;
+          rightRef.current.style.left = '100%';
+          rightRef.current.style.right = "-".concat(minWidth[1]);
+        }
       } else {
-        setWidth(size.width);
+        // 同时展示
+        if (leftRef.current.style.right === '100%' || rightRef.current.style.left === '100%') {
+          transition.current = true;
+          setTimeout(function () {
+            transition.current = false;
+            disableTransition();
+          }, 300);
+        }
+        var width = "min(max(".concat(e.offsetX, "px, calc(").concat(minWidth[0], " + ").concat(dividerWidth, " / 2)), calc(100% - ").concat(minWidth[1], " - ").concat(dividerWidth, " / 2))");
+        dividerRef.current.classList.remove("".concat(prefix, "draggable-divider-active"));
+        dividerRef.current.style.left = "calc(".concat(width, " - ").concat(dividerWidth, " / 2)");
+        leftRef.current.style.left = '0';
+        leftRef.current.style.right = "calc(100% - ".concat(width, " + ").concat(dividerWidth, " / 2)");
+        rightRef.current.style.left = "calc(".concat(width, " + ").concat(dividerWidth, " / 2)");
+        rightRef.current.style.right = '0';
       }
     }
-  }, [dragging, size, elementX, minWidth]);
-  var dragEnd = useMemoizedFn(function () {
-    setDragging(false);
-    if (wrapper.current) {
-      wrapper.current.style.cursor = 'unset';
-      wrapper.current.removeEventListener('mouseup', dragEnd);
-    }
   });
   var dragStart = useMemoizedFn(function () {
     setDragging(true);
-    if (wrapper.current) {
-      wrapper.current.style.cursor = 'col-resize';
-      wrapper.current.addEventListener('mouseup', dragEnd);
+    if (wrapperRef.current) {
+      wrapperRef.current.style.cursor = 'col-resize';
+      wrapperRef.current.addEventListener('mousemove', dragHandler, {
+        capture: true,
+        passive: true
+      });
+      document.addEventListener('mouseup', function () {
+        setDragging(false);
+        if (wrapperRef.current) {
+          wrapperRef.current.style.cursor = 'unset';
+          wrapperRef.current.removeEventListener('mousemove', dragHandler, {
+            capture: true
+          });
+        }
+      }, {
+        capture: true,
+        passive: true,
+        once: true
+      });
     }
   });
-  var leftHide = width === 0;
-  var rightHide = width === (size === null || size === void 0 ? void 0 : size.width);
-  var _useDelayedMount = useDelayedMount(leftHide || rightHide, 300),
-    _useDelayedMount2 = _slicedToArray(_useDelayedMount, 1),
-    transition = _useDelayedMount2[0];
   return /*#__PURE__*/React.createElement("div", {
-    ref: wrapper,
-    className: classNames("".concat(prefix, "draggableLayout"), className),
+    ref: wrapperRef,
+    className: classNames("".concat(prefix, "draggable-layout"), className),
     style: style
-  }, size && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: dividerClassName || classNames("".concat(prefix, "draggableDivider"), "".concat(leftHide || rightHide ? "".concat(prefix, "draggableDividerActive") : '')),
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: dividerRef,
+    className: dividerClassName !== null && dividerClassName !== void 0 ? dividerClassName : classNames("".concat(prefix, "draggable-divider")),
     style: {
-      left: leftHide ? width : rightHide ? width - barWidth : width - barWidth / 2,
-      transition: transition ? 'all 0.3s' : 'color 0.3s, background-color 0.3s'
+      left: "calc(".concat(defaultWidth, " - ").concat(dividerWidth, " / 2)")
     },
     onDragStart: function onDragStart(e) {
       return e.preventDefault();
     },
     onMouseDown: dragStart
-  }, "\u22EE"), dragging && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefix, "draggableMask")
+  }, dividerChildren), dragging && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "draggable-mask")
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefix, "draggableChildren"),
+    ref: leftRef,
+    className: "".concat(prefix, "draggable-children"),
     style: {
-      right: rightHide ? barWidth : "calc(100% - ".concat(width - barWidth / 2, "px)"),
-      left: leftHide ? "calc(-".concat(minWidth[0], " / 100 * 100%)") : 0,
-      transition: transition ? 'all 0.3s' : ''
+      left: 0,
+      right: "calc(100% - ".concat(defaultWidth, " + ").concat(dividerWidth, " / 2)")
     }
   }, left), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefix, "draggableChildren"),
+    ref: rightRef,
+    className: "".concat(prefix, "draggable-children"),
     style: {
-      left: leftHide ? barWidth : width + barWidth / 2,
-      right: rightHide ? "calc(-".concat(minWidth[1], " / 100 * 100%)") : 0,
-      transition: transition ? 'all 0.3s' : ''
+      left: "calc(".concat(defaultWidth, " + ").concat(dividerWidth, " / 2)"),
+      right: 0
     }
-  }, right)));
+  }, right));
 };
 export default DraggableLayout;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as AcAnimation } from './ac-animation';
 export { default as CodeMirrorWrapper } from './code-mirror-wrapper';
 export { LangId, Language, Theme } from './code-mirror-wrapper/define';
 export { default as DraggableLayout } from './draggable-layout';

package/dist/index.js

@@ -1,3 +1,4 @@
+export { default as AcAnimation } from "./ac-animation";
 export { default as CodeMirrorWrapper } from "./code-mirror-wrapper";
 export { LangId, Language, Theme } from "./code-mirror-wrapper/define";
 export { default as DraggableLayout } from "./draggable-layout";

package/dist/styles/index.css

@@ -44,58 +44,42 @@
   outline: unset;
 }
 
-.x-star-design-divider-test {
-  cursor: col-resize;
-  position: relative;
-  background-color: #fafafa;
-  width: 16px;
-  background-size: cover;
-  background-position: center;
-  font-size: 32px;
-  color: #9f9f9f;
-  user-select: none;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s;
-  z-index: 91;
-}
-
-.x-star-design-draggableLayout {
+.x-star-design-draggable-layout {
   position: relative;
-  height: 100%;
   width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
-.x-star-design-draggableDivider {
+.x-star-design-draggable-divider {
   position: absolute;
   top: 0;
   bottom: 0;
   border-left: 4px transparent solid;
-  z-index: 91;
+  transform: translate(-2px);
+  z-index: 90;
+  transition: color 0.3s, background 0.3s, border 0.3s;
+  cursor: col-resize;
 }
 
-.x-star-design-draggableDivider:hover,
-.x-star-design-draggableDivider:active,
-.x-star-design-draggableDividerActive {
+.x-star-design-draggable-divider:hover,
+.x-star-design-draggable-divider:active,
+.x-star-design-draggable-divider.x-star-design-draggable-divider-active {
   border-left: 4px #1890ff solid;
-  cursor: col-resize;
 }
 
-.x-star-design-draggableMask {
+.x-star-design-draggable-mask {
   position: absolute;
   inset: 0;
-  z-index: 90;
+  z-index: 91;
 }
 
-.x-star-design-draggableChildren {
+.x-star-design-draggable-children {
   position: absolute;
   top: 0;
   bottom: 0;
 }
-.x-star-design-draggableChildren > * {
+.x-star-design-draggable-children > * {
   height: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",