fix: remove invalid scale constraint

tangtan · Mar 5, 2021 · 70e9dc8 · 70e9dc8
1 parent 814b290
commit 70e9dc8
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 41 deletions.
diff --git a/app/js/app.js b/app/js/app.js
@@ -2,34 +2,18 @@ import { logStoryInfo } from '../../src/js/utils/logger'
 import { drawStorylinePath } from '../../src/js/utils/drawer'
 import iStoryline from '../../src/js'
 
-const filePath = '../../data/json/'
-const fileName = 'Redcap.json'
-
-async function main() {
+async function main(fileName) {
   const iStorylineInstance = new iStoryline()
-  const fileUrl = filePath + fileName
+  const fileUrl = `../../data/${fileName.split('.')[1]}/${fileName}`
   let graph = await iStorylineInstance.load(fileUrl)
-  // graph = iStorylineInstance.sort(['Red cap', 'Mother'], [1, 10])
-  // graph = iStorylineInstance.bend(['Mother'], [10])
-  // graph = iStorylineInstance.straighten(['Red cap'], [1, 20])
-  // graph = iStorylineInstance.compress(['Red cap', 'Wolf'], [1, 20], 0.5)
-  // graph = iStorylineInstance.expand(['Red cap', 'Wolf'], [1, 20], 1.5)
-  // graph = iStorylineInstance.space(10, 20)
-  // graph = iStorylineInstance.adjust(['Red cap'], [1, 20], [[10, 200], [100, 200]])
-  // graph = iStorylineInstance.relate(['Red cap', 'Mother'], [1, 10], 'Merge')
-  // graph = iStorylineInstance.stylish(['Red cap'], [1, 20], 'Zigzag')
-  // graph = iStorylineInstance.reshape([[10, 200], [100, 200]], [[10, 400], [100, 400]])
-  // graph = iStorylineInstance.scale(500, 200)
-  // graph = iStorylineInstance.addCharacter('TT', [[1, 10]])
-  // graph = iStorylineInstance.addCharacter('TT2', [[1, 5], [7, 22]])
-  // graph = iStorylineInstance.addCharacter('TT3', [[7, 30], [65, 80]])
-  // graph = iStorylineInstance.deleteCharacter('TT2')
-  // graph = iStorylineInstance.changeCharacter('TT3', [[1, 5], [7, 22]])
-  // graph = iStorylineInstance.addSession([0, 1, 2, 3], [1, 9])
-  iStorylineInstance.dump(fileName + '.json', 'json')
+  // Scale to window size
+  const containerDom = document.getElementById('mySvg')
+  const windowW = containerDom.clientWidth - 20
+  const windowH = containerDom.clientHeight - 20
+  graph = iStorylineInstance.scale(10, 10, windowW, windowH)
   logStoryInfo(iStorylineInstance._story)
   const storylinePaths = graph.storylinePaths
   storylinePaths.forEach(storylinePath => drawStorylinePath(storylinePath))
 }
 
-main()
+main('Redcap.json')
diff --git a/app/static/index.html b/app/static/index.html
@@ -1,13 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>iStoryline</title>
+    <style>
+      body {
+        margin: 0;
+        overflow: hidden;
+      }
+      .mySvg {
+        width: 98vw;
+        height: 98vh;
+      }
+    </style>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>iStoryline</title>
-</head>
-
-<body>
-  <!-- <canvas width="6000" height="1000" id="myCanvas"></canvas> -->
-  <svg width="100vw" height="100vh" id="mySvg" class="mySvg"></svg>
-</body>
-</html>
+  <body>
+    <svg id="mySvg" class="mySvg"></svg>
+  </body>
+</html>
diff --git a/src/js/data/constraint.js b/src/js/data/constraint.js
@@ -1,6 +1,7 @@
 export class ConstraintStore {
   constructor() {
     this._constraints = []
+    // Default scale constraint
     this.add([], [], 'Scale', {
       x0: 100,
       y0: 100,

diff --git a/src/js/transform/freeTransform.js b/src/js/transform/freeTransform.js
@@ -9,7 +9,7 @@ export function scale(story, constraints) {
   const layout = story.getTable('layout')
   const positions = story.positions
   if (ctrs.length < 1) return position
-  const { x0, y0, width, height, reserveRatio } = ctrs[0].param
+  const { x0, y0, width, height, reserveRatio } = ctrs[ctrs.length - 1].param
   const { minX, maxX, minY, maxY } = getBoundary(story)
   let pos = []
   let ratio = (maxY - minY) / (maxX - minX)
@@ -31,7 +31,6 @@ export function scale(story, constraints) {
       }
     }
   }
-  console.log('oldpos', JSON.stringify(story.positions[0]))
   const newPosition = genNewPosition(story, pos)
   return newPosition
 }
@@ -49,7 +48,6 @@ export function genNewPosition(story, pos) {
         tpos[i][j] = story.addPosition(pos[i][j])
     }
   }
-  console.log('newpos', pos[0][0])
   const newPosition = new Table(tpos)
   return newPosition
 }

diff --git a/src/js/utils/drawer.js b/src/js/utils/drawer.js
@@ -1,26 +1,26 @@
 import Snap from 'snapsvg'
 
-export function drawSegmentPath(pathStr) {
+export function drawSegmentPath(pathStr, defaultWidth = 2, hoverWidth = 4) {
   const svg = Snap('#mySvg')
   const pathSvg = svg.path(pathStr)
   pathSvg.hover(
     () => {
       pathSvg.attr({
         stroke: 'blue',
-        'stroke-width': 4,
+        'stroke-width': hoverWidth,
       })
     },
     () => {
       pathSvg.attr({
         stroke: 'black',
-        'stroke-width': 1,
+        'stroke-width': defaultWidth,
       })
     }
   )
   pathSvg.attr({
     fill: 'none',
     stroke: 'black',
-    'stroke-width': 1,
+    'stroke-width': defaultWidth,
   })
 }