fj-timeline-storyboard

Getting Started

Install via NPM:

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)	-