Getting Started

npm install fj-modal --registry http://192.168.0.150:4876

basic use

  // 使用当前核心库数据更新时间线数据用于交互计算
  function decodeToTimeline() {
    let {
      mainLayer,
      subLayer,
      subAudioLayer,
      bgmLayer,
    } = canvas.getAllLayer();

    let createLayerData = (layer) => {
      return layer.map(id => {
        let graph = canvas.getGraphById(id);
        return wrapBrickData(graph);
      })
    };

    FJTimelineStore.decode({
      mainLayer: createLayerData(mainLayer),
      subLayer: createLayerData(subLayer),
      subAudioLayer: createLayerData(subAudioLayer),
      bgmLayer: createLayerData(bgmLayer),
    })
  }

  // 返回时间线的交互数据用于更新核心库
  function encodeFromTimeline() {
    let layer = FJTimelineStore.encode();
    let _layer = canvas.getAllLayer();
    let updateLayer = (timelineLayer, canvasLayer) => {
      // 清空当前层
      canvasLayer.length = 0;
      let cache = {};
      timelineLayer.forEach(brick => {
        let copyCacheGraph = FJTimelineStore.getCopyCache() && FJTimelineStore.getCopyCache().cache;
        let graph = cache[brick.id] || canvas.getGraphById(brick.id) || copyCacheGraph;
        if (graph) {
          canvas.remove(graph);
          if (brick.cloned) {
            cache[brick.id] = cache[brick.id] || graph;
            graph = graph.clone();
          }

          graph.decode({
            startTime: brick.startTime,
            endTime: brick.endTime,
            delay: brick.delay,
          });

          if (graph.type === FJCoreConstant.TEXT_ANIMATION) {
            graph.createAni();
          }

          canvas.add(graph);
          canvasLayer.push(graph.id);
        }
      });
    };

    updateLayer(layer.mainLayer, _layer.mainLayer);
    updateLayer(layer.subLayer, _layer.subLayer);
    updateLayer(layer.subAudioLayer, _layer.subAudioLayer);
    updateLayer(layer.bgmLayer, _layer.bgmLayer);
  }

  // 在使用FJTimelineStore的接口时，需要将先就用FJTimelineStore.decode()更新时间线的相关数据
  // 在交互计算完成后获取FJTimelineStore.encode()的返回值更新自身的核心库
  decodeToTimeline();
  let {adsorptionLine, exchangeId} = FJTimelineStore.dragTimeline(id, dragData);
  encodeFromTimeline();

API

| Name | Description | Param | Return | | --- | ----------- | -------- | ------------- | dragTimeline | 拖动时间线 | (id, dragData) | - | newTimeline | 新建时间线 | - | - | deleteTimeline | 删除时间线 | (id, withFollowGraph) | - | splitTimeline | 分割时间线 | (id, progress) | boolean | copyTimeline | 复制时间线 | (cache, brickData, layerType) | - | pasteTimeline | 粘贴时间线 | (time) | boolean, any | hasCopyCache | 是否存在复制缓存 | - | boolean | getCopyCache | 返回复制缓存 | - | null, any | clearCopyCache | 清除复制缓存 | - | - | timeToPixel | 时间转换像素 | (value) | number | pixelToTime | 像素转换时间 | (value) | number | getMaxUnitConversion | 返回最大时间/像素比例 | - | number | getMinUnitConversion | 返回最小时间/像素比例 | - | number | setUnitConversion | 设置时间/像素比例 | (value) | - | getUnitConversion | 返回时间/像素比例 | - | number | flush | 根据当前数据返回视图 | - | - | getIgnores | 返回过滤的时间线 | - | array | setIgnores | 设置过滤的时间线 | (value) | - | clearIgnores | 清除过滤的时间线 | - | - | calcRectWidth | 计算总宽度 | (rects) | number | calcRectHeight | 计算总高度 | (rects) | number | encode | 返回交互后整个时间线数据 | - | object | decode | 更新当前时间线数据用于交互 | (layer) | -