ARTS 第一周

/**
 * @param {string} s
 * @return {boolean}
 */
const isValid = function( str ) {
    const arr = [];
    const map = {
        "}" : 1,
        ")" : 2,
        "]" : 3,
    }
    for(let item of str){
        if(item === "{"){
            arr.push(1);
        }else if(item === "("){
            arr.push(2);
        }else if(item === "["){
            arr.push(3);
        }else {
            if(arr.pop() !== map[item]){
                return false;
            }
        }
    }
    return arr.length === 0;
};

// 超过块元素时，hidden
overflow: hidden
// 调用renderer library
// renderer.js
const renderer = ({ minScale, maxScale, element, scaleSensitivity = 10 }) => {
    const state = {
        element,
        minScale,
        maxScale,
        scaleSensitivity,
        transformation: {
            originX: 0,
            originY: 0,
            translateX: 0,
            translateY: 0,
            scale: 1
        },
    };
    return Object.assign({}, canZoom(state), canPan(state));
};
// index.js
import './index.css';
import { renderer } from './renderer';
  const container = document.getElementById("container");
    const instance = renderer({ scaleSensitivity: 50, minScale: .1, maxScale: 30, element: container.children[0] });
    container.addEventListener("wheel", (event) => {
        if (!event.ctrlKey) {
            return;
        }
        event.preventDefault();
        instance.zoom({
            deltaScale: Math.sign(event.deltaY) > 0 ? -1 : 1,
            x: event.pageX,
            y: event.pageY
        });
    });
    container.addEventListener("dblclick", () => {
        instance.panTo({
            originX: 0,
            originY: 0,
            scale: 1,
        });
    });
    container.addEventListener("mousemove", (event) => {
        if (!event.shiftKey) {
            return;
        }
        event.preventDefault();
        instance.panBy({
            originX: event.movementX,
            originY: event.movementY
        });
    })