@symbo.ls/scratch 2.11.226 → 2.11.228

package/src/utils/sequence.js

@@ -34,50 +34,88 @@ export const numToLetterMap = {
 }
 
 const setSequenceValue = (props, sequenceProps) => {
-  const { key, variable, value, scaling, index } = props
+  const { key, variable, value, scaling, index, scalingVariable } = props
   sequenceProps.sequence[key] = {
     key,
     decimal: ~~(value * 100) / 100,
     val: ~~(value),
     scaling,
     index,
+    scalingVariable,
     variable
   }
   sequenceProps.scales[key] = scaling
   sequenceProps.vars[variable] = scaling + sequenceProps.unit
 }
 
+export const setScalingVar = (key, sequenceProps) => {
+  const { type } = sequenceProps
+  if (key === 0) return '1em'
+
+  const prefix = '--' + (type && type.replace('.', '-'))
+  const ratioVar = `${prefix}-ratio`
+
+  if (key > 0) {
+    const prevLetterKey = numToLetterMap[key - 1]
+    return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`
+  }
+  if (key < 0) {
+    const nextLetterKey = numToLetterMap[key + 1]
+    return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`
+  }
+}
+
+export const setSubScalingVar = (index, arr, variable, sequenceProps) => {
+  const { type } = sequenceProps
+  const skipMiddle = index === 2 && arr.length === 2
+  const indexMapWithLength = skipMiddle ? index + 1 : index
+
+  const prefix = '--' + (type && type.replace('.', '-'))
+  const subRatioVarPrefix = `${prefix}-sub-ratio-`
+
+  return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`
+}
+
+export const getSubratioDifference = (base, ratio) => {
+  const diff = (base * ratio - base)
+  const subRatio = diff / 1.618
+  const first = (base * ratio - subRatio)
+  const second = base + subRatio
+  const middle = (first + second) / 2
+  return [first, middle, second]
+}
+
+export const getSubratio = (base, ratio) => {
+  return getSubratioDifference(base, ratio).map(v => v / base)
+}
+
 export const generateSubSequence = (props, sequenceProps) => {
   const { key, base, value, ratio, variable, index } = props
 
   const next = value * ratio
-  const diff = next - value
-  const smallscale = diff / 1.618
-
-  const valueRounded = ~~(value)
-  const nextRounded = ~~(next)
-  const diffRounded = nextRounded - valueRounded
+  const diffRounded = ~~next - ~~value
 
-  let arr = []
-  const first = next - smallscale
-  const second = value + smallscale
-  const middle = (first + second) / 2
+  let arr
+  const [first, middle, second] = getSubratioDifference(value, ratio)
   if (diffRounded > 16) arr = [first, middle, second]
   else arr = [first, second]
 
-  arr.map((v, k) => {
+  arr.forEach((v, k) => {
     const scaling = ~~(v / base * 1000) / 1000
     const newVar = variable + (k + 1)
+    const newIndex = index + (k + 1) / 10
+    const scalingVariable = setSubScalingVar(k + 1, arr, variable, sequenceProps)
 
     const props = {
       key: key + (k + 1),
       variable: newVar,
       value: v,
       scaling,
-      index: index + (k + 1) / 10
+      scalingVariable,
+      index: newIndex
     }
 
-    return setSequenceValue(props, sequenceProps)
+    setSequenceValue(props, sequenceProps)
   })
 }
 
@@ -106,6 +144,7 @@ export const generateSequence = (sequenceProps) => {
     const value = switchSequenceOnNegative(key, base, ratio)
     const scaling = ~~(value / base * 100) / 100
     const variable = prefix + letterKey
+    const scalingVariable = setScalingVar(key, sequenceProps)
 
     const props = {
       key: letterKey,
@@ -113,6 +152,7 @@ export const generateSequence = (sequenceProps) => {
       value,
       base,
       scaling,
+      scalingVariable,
       ratio,
       index: key
     }

package/src/utils/var.js

@@ -2,6 +2,7 @@
 
 import { isObjectLike } from '@domql/utils'
 import { getActiveConfig } from '../factory.js'
+import { getSubratio } from './sequence.js'
 
 export const setVariables = (result, key) => {
   const CONFIG = getActiveConfig()
@@ -14,33 +15,95 @@ export const setVariables = (result, key) => {
   }
 }
 
-export const applySequenceVars = (props, mediaName, options = {}) => {
+export const applyGlobalVars = (vars, obj, options) => {
   const CONFIG = getActiveConfig()
-  const { UNIT, MEDIA, TIMING, CSS_VARS } = CONFIG
+  const { UNIT } = CONFIG
+  const unit = obj.unit || UNIT.default
+  const { base, ratio, type } = obj
+  const prefix = '--' + (type && type.replace('.', '-'))
+  vars[`${prefix}-base`] = base
+  vars[`${prefix}-unit`] = unit
+  const ratioVar = `${prefix}-ratio`
+  vars[ratioVar] = ratio
+
+  const [first, middle, second] = getSubratio(base, ratio)
+  vars[`${prefix}-sub-ratio-1`] = first
+  vars[`${prefix}-sub-ratio-2`] = middle
+  vars[`${prefix}-sub-ratio-3`] = second
+}
+
+export const applySequenceVars = (FACTORY, options = {}) => {
+  const CONFIG = getActiveConfig()
+  const { UNIT, TIMING, CSS_VARS } = CONFIG
+
+  const unit = FACTORY.unit || UNIT.default
+  const { mediaRegenerate, sequence, scales } = FACTORY
 
-  const unit = props.unit || UNIT.default
-  const { sequence, scales } = props
+  if (!mediaRegenerate) {
+    applyGlobalVars(CSS_VARS, FACTORY, options)
+  }
 
   for (const key in sequence) {
     const item = sequence[key]
-    const value = (props.type === TIMING.type ? sequence[key].val : scales[key]) + unit
-
-    if (mediaName) {
-      const query = MEDIA[mediaName]
-      if (!query) {
-        if (CONFIG.verbose) console.warn('Can\'t find query ', query)
-      }
-      let underMediaQuery = CSS_VARS[`@media ${query}`]
-      if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
-      underMediaQuery[item.variable] = `var(${item.variable + '_' + mediaName})`
-      CSS_VARS[item.variable + '_' + mediaName] = value
+
+    const value = (FACTORY.type === TIMING.type
+      ? sequence[key].val
+      : scales[key]
+    ) + unit
+
+    if (!mediaRegenerate) {
+      CSS_VARS[item.variable + '_default'] = value
+      CSS_VARS[item.variable] = item.scalingVariable
+      continue
+    }
+
+    if (options.useDefault === false) {
+      CSS_VARS[item.variable] = value
     } else {
-      if (options.useDefault === false) {
-        CSS_VARS[item.variable] = value
-      } else {
-        CSS_VARS[item.variable + '_default'] = value
-        CSS_VARS[item.variable] = `var(${item.variable + '_default'})`
-      }
+      CSS_VARS[item.variable + '_default'] = value
+      CSS_VARS[item.variable] = `var(${item.variable + '_default'})`
     }
   }
 }
+
+export const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
+  const CONFIG = getActiveConfig()
+  const { UNIT, MEDIA, TIMING, CSS_VARS } = CONFIG
+
+  const mediaName = media.slice(1)
+
+  const unit = FACTORY.unit || UNIT.default
+  const { mediaRegenerate } = FACTORY
+  const { sequence, scales } = FACTORY[media]
+
+  const query = MEDIA[mediaName]
+  if (!query && CONFIG.verbose) console.warn('Can\'t find media query ', query)
+
+  // if mediaRegenerate is not applied ratio and and sequence sizes
+  // will be applied using CSS vars
+  if (!mediaRegenerate) {
+    let underMediaQuery = CSS_VARS[`@media ${query}`]
+    if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
+    applyGlobalVars(underMediaQuery, FACTORY[media], options)
+    return
+  }
+
+  for (const key in sequence) {
+    const item = sequence[key]
+
+    const value = (FACTORY.type === TIMING.type
+      ? sequence[key].val
+      : scales[key]
+    ) + unit
+
+    if (!query && CONFIG.verbose) console.warn('Can\'t find query ', query)
+
+    let underMediaQuery = CSS_VARS[`@media ${query}`]
+    if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {}
+
+    underMediaQuery[item.variable] = `var(${item.variable + '_' + mediaName})`
+    CSS_VARS[item.variable + '_' + mediaName] = value
+  }
+
+  console.log(CSS_VARS)
+}