x-star-design 0.0.10 → 0.0.12

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

@@ -0,0 +1,38 @@
+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;
+    /**
+     * @description canvas卸载时的回调
+     */
+    onFinish?: () => void;
+}

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,184 @@
+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,
+    onFinish = _ref.onFinish;
+  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)
+        }
+      });
+    }
+  };
+  var shutDownCanvas = function shutDownCanvas() {
+    canvas.remove();
+    window.cancelAnimationFrame(AnimationID);
+    onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+  };
+
+  //---------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) {
+      shutDownCanvas();
+      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() {
+      shutDownCanvas();
+    }
+  }));
+};
+export default AcAnimation;

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/package.json

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