feat [org]: Wrote Editor docs
This commit is contained in:
joostdecock
parent
3d01c0136c
commit
0c1d886e94
53 changed files with 1054 additions and 496 deletions
|
|
@ -3,7 +3,7 @@ import { copyToClipboard } from '@freesewing/utils'
|
|||
import { CopyIcon, OkIcon } from '@freesewing/react/components/Icon'
|
||||
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
|
||||
|
||||
const handleCopied = (content, setCopied, setLoadingStatus, label) => {
|
||||
const handleCopied = (content, setCopied, setLoadingStatus, label, handler=false) => {
|
||||
copyToClipboard(content)
|
||||
setCopied(true)
|
||||
setLoadingStatus([
|
||||
|
|
@ -13,6 +13,7 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => {
|
|||
true,
|
||||
])
|
||||
setTimeout(() => setCopied(false), 1000)
|
||||
if (typeof handler === 'function') handler(content, label)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -21,12 +22,14 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => {
|
|||
* @component
|
||||
* @param {object} props - All component props
|
||||
* @param {JSX.element} props.children - The component children
|
||||
* @param {string} [props.btnClasses = 'tw:daisy-btn tw:daisy-btn-ghost tw:hover:border-transparent w:hover:border-transparent tw:hover:shadow-none'] - The content that should be copied to the clipboard
|
||||
* @param {string} props.content - The content that should be copied to the clipboard
|
||||
* @param {string} props.label - The label to show when the content is copied
|
||||
* @param {function} [props.onCopy=false] - An optional handler to call after copying to the clipboard, receives content, label as parameters
|
||||
* @param {boolean} props.sup - Set this to true to render as superscript (above the line)
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
export const CopyToClipboardButton = ({ children, content, label = false, sup = false }) => {
|
||||
export const CopyToClipboardButton = ({ children, content, label = false, sup = false, btnClasses="tw:daisy-btn tw:daisy-btn-ghost tw:hover:border-transparent w:hover:border-transparent tw:hover:shadow-none", onCopy=false }) => {
|
||||
const [copied, setCopied] = useState(false)
|
||||
const { setLoadingStatus } = useContext(LoadingStatusContext)
|
||||
|
||||
|
|
@ -36,9 +39,10 @@ export const CopyToClipboardButton = ({ children, content, label = false, sup =
|
|||
<button
|
||||
className={
|
||||
(copied ? 'tw:text-success ' : '') +
|
||||
'tw:daisy-btn tw:w-full tw:daisy-btn-ghost tw:lg:w-auto tw:hover:bg-transparent tw:hover:border-transparent tw:group tw:hover:shadow-none'
|
||||
btnClasses +
|
||||
' tw:w-full tw:lg:w-auto tw:group tw:flex tw:flex-row tw:justify-between'
|
||||
}
|
||||
onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)}
|
||||
onClick={() => handleCopied(content, setCopied, setLoadingStatus, label, onCopy)}
|
||||
>
|
||||
{sup ? children : null}
|
||||
{copied ? (
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export const Collection = ({ Link = false, linkTo = 'about', editor = false, onC
|
|||
onClick={() => setFilter({ ld: 1 })}
|
||||
>
|
||||
<ResetIcon />
|
||||
Clear Filter
|
||||
Clear Filters
|
||||
</button>
|
||||
<button
|
||||
className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
ExportIcon,
|
||||
FixmeIcon,
|
||||
FlagIcon,
|
||||
MeasurementsIcon,
|
||||
OptionsIcon,
|
||||
PaperlessIcon,
|
||||
PrintIcon,
|
||||
|
|
@ -52,6 +53,7 @@ const headerMenuIcons = {
|
|||
settings: SettingsIcon,
|
||||
ui: UiIcon,
|
||||
layout: PrintIcon,
|
||||
measurements: MeasurementsIcon,
|
||||
}
|
||||
|
||||
export const HeaderMenuIcon = (props) => {
|
||||
|
|
@ -121,7 +123,7 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => {
|
|||
tooltip="See how changes to a measurement influence the pattern being generated."
|
||||
toggle={
|
||||
<>
|
||||
<HeaderMenuIcon name="options" extraClasses="tw:text-secondary" />
|
||||
<HeaderMenuIcon name="measurements" extraClasses="tw:text-secondary" />
|
||||
<span className="tw:hidden tw:lg:inline">Test Measurements</span>
|
||||
</>
|
||||
}
|
||||
|
|
@ -463,12 +465,12 @@ export const HeaderMenuTestIcons = (props) => {
|
|||
const Button = HeaderMenuButton
|
||||
|
||||
return (
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:justify-center tw:px-0.5 tw:lg:px-1">
|
||||
<div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:justify-center tw:px-0.5 tw:lg:px-1 tw:items-center">
|
||||
<Button
|
||||
updateHandler={() => update.settings('sample', undefined)}
|
||||
tooltip="Clear the test so you can select another"
|
||||
>
|
||||
Clear Test
|
||||
<ResetIcon /> <span className="tw:hidden tw:lg:inline">Clear Test</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -528,7 +530,7 @@ export const HeaderMenuButton = ({
|
|||
}) => (
|
||||
<Tooltip tip={tooltip}>
|
||||
<button
|
||||
className={`${lgOnly ? 'tw:hidden tw:lg:inline' : ''} tw:daisy-btn tw:daisy-btn-ghost tw:daisy-btn-sm tw:px-1 tw:disabled:bg-transparent`}
|
||||
className={`${lgOnly ? 'tw:hidden tw:lg:inline' : ''} tw:daisy-btn tw:daisy-btn-ghost tw:my-1 tw:px-1 tw:disabled:bg-transparent`}
|
||||
onClick={updateHandler}
|
||||
disabled={disabled}
|
||||
>
|
||||
|
|
@ -604,7 +606,7 @@ export const HeaderMenuViewMenu = (props) => {
|
|||
}
|
||||
|
||||
export const HeaderMenuLayoutView = (props) => (
|
||||
<>
|
||||
<div className="tw:flex tw:flex-row tw:items-center">
|
||||
<HeaderMenuDropdown
|
||||
{...props}
|
||||
id="layoutOptions"
|
||||
|
|
@ -619,7 +621,7 @@ export const HeaderMenuLayoutView = (props) => (
|
|||
<LayoutSettingsMenu {...props} />
|
||||
</HeaderMenuDropdown>
|
||||
<HeaderMenuLayoutViewIcons {...props} />
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
|
||||
export const HeaderMenuLayoutViewIcons = (props) => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React, { useRef, useState, useEffect, useCallback } from 'react'
|
|||
import { ZoomablePattern } from './ZoomablePattern.mjs'
|
||||
import { generateStackTransform, getTransformedBounds } from '@freesewing/core'
|
||||
import { getProps } from '@freesewing/react/components/Pattern'
|
||||
import { FlipIcon, RotateIcon, ResetIcon } from '@freesewing/react/components/Icon'
|
||||
import { drag } from 'd3-drag'
|
||||
import { select } from 'd3-selection'
|
||||
//import { Buttons } from './transform-buttons.mjs'
|
||||
|
|
@ -413,6 +412,26 @@ const Button = ({ onClickCb, transform, Icon, title = '' }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const InnerFlipIcon = () => (
|
||||
<path
|
||||
strokeLinkecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
|
||||
/>
|
||||
)
|
||||
const InnerRotateIcon = ({ props }) => (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M 19.5,12 C 19.5,10.768 19.454,9.547 19.362,8.338 19.21576,6.3582806 17.641719,4.7842398 15.662,4.638 14.504476,4.5506731 13.344609,4.5048098 12.184624,4.5004103 M 19.5,12 l 3,-3 m -3,3 -3,-3 m -12,3 c 0,1.232 0.046,2.453 0.138,3.662 0.1462398,1.979719 1.7202806,3.55376 3.7,3.7 1.295324,0.09777 2.593584,0.143587 3.891661,0.13746 M 4.5,12 l 3,3 m -3,-3 -3,3"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
const InnerResetIcon = () => (
|
||||
<path d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z" />
|
||||
)
|
||||
|
||||
|
||||
/** buttons for manipulating the part */
|
||||
export const Buttons = ({ transform, flip, rotate, resetPart, rotate90, iconSize }) => {
|
||||
return (
|
||||
|
|
@ -438,31 +457,31 @@ export const Buttons = ({ transform, flip, rotate, resetPart, rotate90, iconSize
|
|||
<Button
|
||||
onClickCb={resetPart}
|
||||
transform={`translate(${rectSize / -2}, ${rectSize / -2})`}
|
||||
Icon={() => <ResetIcon wrapped={0} />}
|
||||
Icon={() => <InnerResetIcon />}
|
||||
title="Reset part orientation"
|
||||
/>
|
||||
<Button
|
||||
onClickCb={() => rotate90()}
|
||||
transform={`translate(${rectSize * -2.7}, ${rectSize / -2})`}
|
||||
Icon={() => <RotateIcon wrapped={0} style={{}} />}
|
||||
Icon={() => <InnerRotateIcon />}
|
||||
title="Rotate part clockwise"
|
||||
/>
|
||||
<Button
|
||||
onClickCb={() => flip('y')}
|
||||
transform={`rotate(90) translate(${rectSize / -2}, ${rectSize * -1.6})`}
|
||||
Icon={() => <FlipIcon wrapped={0} />}
|
||||
Icon={() => <InnerFlipIcon />}
|
||||
title="Flip part top/bottom"
|
||||
/>
|
||||
<Button
|
||||
onClickCb={() => flip('x')}
|
||||
transform={`translate(${rectSize * -1.6}, ${rectSize / -2})`}
|
||||
Icon={() => <FlipIcon style={{}} wrapped={0} />}
|
||||
Icon={() => <InnerFlipIcon />}
|
||||
title="Flip part left/right"
|
||||
/>
|
||||
<Button
|
||||
onClickCb={() => rotate90(-1)}
|
||||
transform={`translate(${rectSize * 1.7}, ${rectSize / -2})`}
|
||||
Icon={() => <RotateIcon transform="scale(-1,1), translate(-24,0)" wrapped={0} />}
|
||||
Icon={() => <InnerRotateIcon transform="scale(-1,1), translate(-24,0)" />}
|
||||
title="Rotate part counter-clockwise"
|
||||
/>
|
||||
</g>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import { HeaderMenu } from './HeaderMenu.mjs'
|
|||
import { DesignOptionsMenu } from './menus/DesignOptionsMenu.mjs'
|
||||
import { CoreSettingsMenu } from './menus/CoreSettingsMenu.mjs'
|
||||
import { UiPreferencesMenu } from './menus/UiPreferencesMenu.mjs'
|
||||
import { LayoutSettingsMenu } from './menus/LayoutMenu.mjs'
|
||||
import { TestOptionsMenu, TestMeasurementsMenu } from './menus/TestMenu.mjs'
|
||||
import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation'
|
||||
|
||||
/**
|
||||
* A layout for views that include a drafted pattern
|
||||
|
|
@ -17,6 +20,7 @@ import { UiPreferencesMenu } from './menus/UiPreferencesMenu.mjs'
|
|||
*/
|
||||
export const PatternLayout = (props) => {
|
||||
const { Design, pattern, update, config, state } = props
|
||||
const i18n = useDesignTranslation(Design.designConfig.data.id)
|
||||
|
||||
return (
|
||||
<ZoomContextProvider>
|
||||
|
|
@ -29,30 +33,63 @@ export const PatternLayout = (props) => {
|
|||
<div className="tw:lg:w-2/3 tw:flex tw:flex-col tw:h-full tw:grow tw:p-2 tw:shadow tw:mx-2">
|
||||
{props.output}
|
||||
</div>
|
||||
{state.ui?.aside ? (
|
||||
<div
|
||||
className={`tw:hidden tw:md:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`}
|
||||
>
|
||||
<h5 className="tw:capitalize">{pattern.designConfig.data.id} Options</h5>
|
||||
<SideMenuUl>
|
||||
<DesignOptionsMenu {...props} />
|
||||
</SideMenuUl>
|
||||
<h5>Core Settings</h5>
|
||||
<SideMenuUl>
|
||||
<CoreSettingsMenu {...props} />
|
||||
</SideMenuUl>
|
||||
<h5>UI Preferences</h5>
|
||||
<SideMenuUl>
|
||||
<UiPreferencesMenu {...props} />
|
||||
</SideMenuUl>
|
||||
</div>
|
||||
) : null}
|
||||
<PatternAsideMenu {...props} i18n={i18n} />
|
||||
</div>
|
||||
</div>
|
||||
</ZoomContextProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const PatternAsideMenu = (props) => {
|
||||
if (!props.state.ui?.aside) return null
|
||||
if (props.state.view === 'draft') return (
|
||||
<PatternAsideWrapper>
|
||||
<h5 className="tw:capitalize">{props.pattern.designConfig.data.id} Options</h5>
|
||||
<SideMenuUl>
|
||||
<DesignOptionsMenu {...props} />
|
||||
</SideMenuUl>
|
||||
<h5>Core Settings</h5>
|
||||
<SideMenuUl>
|
||||
<CoreSettingsMenu {...props} />
|
||||
</SideMenuUl>
|
||||
<h5>UI Preferences</h5>
|
||||
<SideMenuUl>
|
||||
<UiPreferencesMenu {...props} />
|
||||
</SideMenuUl>
|
||||
</PatternAsideWrapper>
|
||||
)
|
||||
if (props.state.view === 'layout') return (
|
||||
<PatternAsideWrapper>
|
||||
<h5>Layout Settings</h5>
|
||||
<SideMenuUl>
|
||||
<LayoutSettingsMenu {...props} />
|
||||
</SideMenuUl>
|
||||
</PatternAsideWrapper>
|
||||
)
|
||||
if (props.state.view === 'test') return (
|
||||
<PatternAsideWrapper>
|
||||
<h5>Test Design Options</h5>
|
||||
<SideMenuUl>
|
||||
<TestOptionsMenu {...props} />
|
||||
</SideMenuUl>
|
||||
<h5>Test Measurements</h5>
|
||||
<SideMenuUl>
|
||||
<TestMeasurementsMenu {...props} />
|
||||
</SideMenuUl>
|
||||
</PatternAsideWrapper>
|
||||
)
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
const PatternAsideWrapper = ({ children }) => (
|
||||
<div
|
||||
className={`tw:hidden tw:md:block tw:w-1/3 tw:shrink tw:grow-0 tw:lg:p-4 tw:max-w-2xl tw:h-full tw:overflow-scroll`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
export const SideMenuUl = ({ children }) => (
|
||||
<ul
|
||||
className="tw:daisy-menu tw:daisy-dropdown-content tw:flex-nowrap tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-full tw:p-0 tw:pl-0"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { measurements as measurementsTranslations } from '@freesewing/i18n'
|
|||
import React, { useMemo } from 'react'
|
||||
// Components
|
||||
import { MenuButtonGroup } from './Container.mjs'
|
||||
import { BeakerIcon, OptionsIcon } from '@freesewing/react/components/Icon'
|
||||
import { MeasurementsIcon, OptionsIcon } from '@freesewing/react/components/Icon'
|
||||
|
||||
/**
|
||||
* The test design options menu
|
||||
|
|
@ -87,7 +87,7 @@ const SampleOptionButton = ({ name, i18n, update }) => (
|
|||
}
|
||||
onClick={() => update.settings('sample', { type: 'option', option: name })}
|
||||
>
|
||||
<BeakerIcon className="tw:w-5 tw:h-5" />
|
||||
<OptionsIcon className="tw:w-5 tw:h-5" />
|
||||
<span>{i18n.en?.o[name]?.t ?? name}</span>
|
||||
</button>
|
||||
)
|
||||
|
|
@ -100,7 +100,7 @@ const SampleMeasurementButton = ({ name, update }) => (
|
|||
}
|
||||
onClick={() => update.settings('sample', { type: 'measurement', measurement: name })}
|
||||
>
|
||||
<BeakerIcon className="tw:w-5 tw:h-5" />
|
||||
<MeasurementsIcon className="tw:w-5 tw:h-5" />
|
||||
<span>{measurementsTranslations[name]}</span>
|
||||
</button>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
// Dependencies
|
||||
import { linkClasses, capitalize } from '@freesewing/utils'
|
||||
// Context
|
||||
import { ModalContext } from '@freesewing/react/context/Modal'
|
||||
// Hooks
|
||||
import React from 'react'
|
||||
import React, { useContext } from 'react'
|
||||
// Components
|
||||
import { H1, H5 } from '@freesewing/react/components/Heading'
|
||||
import { Popout } from '@freesewing/react/components/Popout'
|
||||
import { H1, H2 } from '@freesewing/react/components/Heading'
|
||||
import { modalDocsHelp } from '@freesewing/react/components/Help'
|
||||
import { HeaderMenu } from '../HeaderMenu.mjs'
|
||||
import { Popout } from '@freesewing/react/components/Popout'
|
||||
|
||||
|
||||
/**
|
||||
* This is the docs view, it just shows content
|
||||
|
|
@ -16,51 +20,51 @@ import { HeaderMenu } from '../HeaderMenu.mjs'
|
|||
* @param {Object} props.update - Helper object for updating the editor state
|
||||
*/
|
||||
export const DocsView = ({ state, config, update }) => {
|
||||
const { setModal, modalContent } = useContext(ModalContext)
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderMenu state={state} {...{ config, update }} />
|
||||
<div className="tw:m-auto tw:mt-8 tw:max-w-2xl tw:px-4 tw:mb-8">
|
||||
<H1>Documentation</H1>
|
||||
{state?.design ? (
|
||||
<Popout type="link">
|
||||
<H5>Design Documentation</H5>
|
||||
<p className="tw:text-lg">
|
||||
You can find documentation for the {capitalize(state.design)} design at:
|
||||
<br />
|
||||
<b>
|
||||
<>
|
||||
<H2>Design Documentation</H2>
|
||||
<Popout type="link" compact dense>
|
||||
<div className="tw:font-bold tw:py-1">
|
||||
<a
|
||||
className={linkClasses}
|
||||
href={`https://freesewing.eu/docs/designs/${state.design}`}
|
||||
>{`FreeSewing.eu/docs/designs/${state.design}`}</a>
|
||||
</b>
|
||||
</p>
|
||||
</Popout>
|
||||
</div>
|
||||
</Popout>
|
||||
<button
|
||||
className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline tw:mt-4"
|
||||
onClick={() => modalDocsHelp(`docs/designs/${state.design}`, setModal)}
|
||||
>Open without leaving the Editor</button>
|
||||
</>
|
||||
) : null}
|
||||
<Popout type="link">
|
||||
<H5>Understanding the FreeSewing Pattern Editor</H5>
|
||||
<p className="tw:text-lg">
|
||||
Please refer to the pattern editor documentation at:
|
||||
<br />
|
||||
<b>
|
||||
<a
|
||||
className={linkClasses}
|
||||
href="https://freesewing.eu/docs/about/editor"
|
||||
>{`FreeSewing.eu/docs/about/editor`}</a>
|
||||
</b>
|
||||
</p>
|
||||
<H2>Editor Documentation</H2>
|
||||
<Popout type="link" compact dense>
|
||||
<div className="tw:font-bold tw:py-1">
|
||||
<a
|
||||
className={linkClasses}
|
||||
href="https://freesewing.eu/docs/editor"
|
||||
>{`FreeSewing.eu/docs/editor`}</a>
|
||||
</div>
|
||||
</Popout>
|
||||
<Popout type="tip">
|
||||
<H5>
|
||||
Looking for info on how it <em>really</em> works?
|
||||
</H5>
|
||||
<p>
|
||||
Documentation for developers and contributors is available at{' '}
|
||||
<b>
|
||||
<a className={linkClasses} href="https://freesewing.dev/">{`FreeSewing.dev`}</a>
|
||||
</b>
|
||||
</p>
|
||||
<button
|
||||
className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline tw:mt-4"
|
||||
onClick={() => modalDocsHelp(`docs/editor`, setModal)}
|
||||
>Open without leaving the Editor</button>
|
||||
<H2>Developer Documentation</H2>
|
||||
<Popout type="link" compact>
|
||||
<b>
|
||||
<a className={linkClasses} href="https://freesewing.dev/">{`FreeSewing.dev`}</a>
|
||||
</b>
|
||||
</Popout>
|
||||
</div>
|
||||
{modalContent}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,10 +58,26 @@ export const ExportView = (props) => {
|
|||
<H2>Share your pattern</H2>
|
||||
<p>If you merely want to share your pattern with others, you can copy these URLs:</p>
|
||||
<div className="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-2 tw:mt-2 ">
|
||||
<CopyToClipboardButton content={urls.a} update={update}>
|
||||
<CopyToClipboardButton
|
||||
content={urls.a}
|
||||
btnClasses="tw:daisy-btn tw-daisy-btn-neutral tw:daisy-btn-outline"
|
||||
label="Pattern and Measurements URL"
|
||||
onCopy={() => {
|
||||
console.log('handler called')
|
||||
update.notifySuccess('Pattern and Measurements URL copied to clipboard')
|
||||
}}
|
||||
>
|
||||
Pattern and Measurements
|
||||
</CopyToClipboardButton>
|
||||
<CopyToClipboardButton content={urls.b} update={update}>
|
||||
<CopyToClipboardButton
|
||||
content={urls.b}
|
||||
btnClasses="tw:daisy-btn tw-daisy-btn-neutral tw:daisy-btn-outline"
|
||||
label="Pattern URL"
|
||||
onCopy={() => {
|
||||
console.log('handler called')
|
||||
update.notifySuccess('Pattern URL copied to clipboard')
|
||||
}}
|
||||
>
|
||||
Pattern only
|
||||
</CopyToClipboardButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export const SaveView = ({ config, state, update }) => {
|
|||
To access your saved patterns, go to:
|
||||
<b>
|
||||
{' '}
|
||||
<Link href="/account/patterns">/account/patterns</Link>
|
||||
<Link href="/account/data/patterns/">/account/data/patterns</Link>
|
||||
</b>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { ZoomablePattern } from '../ZoomablePattern.mjs'
|
|||
import { PatternLayout } from '../PatternLayout.mjs'
|
||||
import { HeaderMenu } from '../HeaderMenu.mjs'
|
||||
import { H1, H3, H4, H5 } from '@freesewing/react/components/Heading'
|
||||
import { OptionsIcon, MeasurementsIcon } from '@freesewing/react/components/Icon'
|
||||
|
||||
/**
|
||||
* The test view allows users to test options and measurements
|
||||
|
|
@ -87,6 +88,7 @@ export const TestView = ({ Design, state, update, config }) => {
|
|||
't',
|
||||
'ASC'
|
||||
)
|
||||
const btnClasses = "tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs tw:flex tw:flex-row tw:items-center tw:justify-between tw:w-full tw:max-w-64"
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -106,12 +108,13 @@ export const TestView = ({ Design, state, update, config }) => {
|
|||
{trm.map(({ t, m }) => (
|
||||
<button
|
||||
key={m}
|
||||
className="tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs"
|
||||
className={btnClasses}
|
||||
onClick={() =>
|
||||
update.settings(['sample'], { type: 'measurement', measurement: m })
|
||||
}
|
||||
>
|
||||
{t}
|
||||
<MeasurementsIcon className="tw:w-4 tw:h-4" />
|
||||
<span>{t}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -122,12 +125,13 @@ export const TestView = ({ Design, state, update, config }) => {
|
|||
{tom.map(({ t, m }) => (
|
||||
<button
|
||||
key={m}
|
||||
className="tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs"
|
||||
className={btnClasses}
|
||||
onClick={() =>
|
||||
update.settings(['sample'], { type: 'measurement', measurement: m })
|
||||
}
|
||||
>
|
||||
{t}
|
||||
<MeasurementsIcon className="tw:w-4 tw:h-4" />
|
||||
<span>{t}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -158,6 +162,7 @@ const SampleOptionsMenu = ({ Design, state, update }) => {
|
|||
|
||||
const SampleOptionsSubMenu = ({ structure, update, level = 1 }) => {
|
||||
const output = []
|
||||
const btnClasses = "tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs tw:flex tw:flex-row tw:items-center tw:justify-between tw:w-full tw:max-w-64"
|
||||
/*
|
||||
* Show entries alphabetic, but force groups last, and advanced last among them
|
||||
*/
|
||||
|
|
@ -175,10 +180,11 @@ const SampleOptionsSubMenu = ({ structure, update, level = 1 }) => {
|
|||
output.push(
|
||||
<button
|
||||
key={name}
|
||||
className="tw:my-0.5 tw:block tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline tw:daisy-btn-xs"
|
||||
className={btnClasses}
|
||||
onClick={() => update.settings(['sample'], { type: 'option', option: name })}
|
||||
>
|
||||
{struct.title}
|
||||
<OptionsIcon className="tw:w-4 tw:h-4" />
|
||||
<span>{struct.title}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,33 +108,33 @@ export const UndoStep = ({ update, state, step, Design, compact = false, index =
|
|||
|
||||
return (
|
||||
<>
|
||||
<p className="tw:text-sm tw:italic tw:font-medium tw:opacity-70 tw:text-right tw:p-0 tw:tw:m-0 tw:-mb-2 tw:pr-2">
|
||||
<UndoStepTimeAgo step={step} />
|
||||
</p>
|
||||
<ButtonFrame onClick={() => update.restore(index, state._)}>
|
||||
<div className="tw:flex tw:flex-row tw:items-center tw:justify-between tw:gap-2 tw:w-full tw:m-0 tw:p-0 tw:-mt-2 tw:text-lg">
|
||||
<span className="tw:flex tw:flex-row tw:gap-2 tw:items-center">
|
||||
{data.fieldIcon || null}
|
||||
{data.title}
|
||||
</span>
|
||||
<span className="tw:opacity-70 tw:flex tw:flex-row tw:gap-1 tw:items-center tw:text-base">
|
||||
{data.icon || null} {data.menu}
|
||||
</span>
|
||||
</div>
|
||||
<div className="tw:flex tw:flex-row tw:gap-1 tw:items-center tw:align-start tw:w-full">
|
||||
{data.msg ? (
|
||||
data.msg
|
||||
) : (
|
||||
<>
|
||||
<span className="">
|
||||
{Array.isArray(data.newVal) ? data.newVal.join(', ') : data.newVal}
|
||||
</span>
|
||||
<LeftIcon className="tw:w-4 tw:h-4 tw:text-secondary tw:shrink-0" stroke={4} />
|
||||
<span className="tw:line-through tw:decoration-1 tw:opacity-70">
|
||||
{Array.isArray(data.oldVal) ? data.oldVal.join(', ') : data.oldVal}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<div className="tw:flex tw:flex-col tw:font-medium tw:items-end tw:w-full tw:-mb-2">
|
||||
<div className="tw:text-sm tw:-mt-2 tw:italic"><UndoStepTimeAgo step={step} /></div>
|
||||
<div className="tw:flex tw:flex-row tw:items-center tw:justify-start tw:gap-2 tw:w-full tw:text-lg tw:-mt-2">
|
||||
<span className="tw:opacity-70 tw:flex tw:flex-row tw:gap-1 tw:items-center tw:text-base">
|
||||
{data.menu}
|
||||
</span>
|
||||
<span>»</span>
|
||||
<span className="tw:flex tw:flex-row tw:gap-2 tw:items-center">
|
||||
{data.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="tw:flex tw:flex-row tw:gap-1 tw:items-center tw:align-start tw:w-full">
|
||||
{data.msg ? (
|
||||
data.msg
|
||||
) : (
|
||||
<>
|
||||
<span className="">
|
||||
{Array.isArray(data.newVal) ? data.newVal.join(', ') : data.newVal}
|
||||
</span>
|
||||
<LeftIcon className="tw:w-4 tw:h-4 tw:text-secondary tw:shrink-0" stroke={4} />
|
||||
<span className="tw:line-through tw:decoration-1 tw:opacity-70">
|
||||
{Array.isArray(data.oldVal) ? data.oldVal.join(', ') : data.oldVal}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ButtonFrame>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,26 @@ import React from 'react'
|
|||
// Components
|
||||
import { ModalWrapper } from '@freesewing/react/components/Modal'
|
||||
|
||||
const Iframe = (props) => <iframe {...props} style={{ height: '90vh', width: '90vh' }} />
|
||||
/*
|
||||
* A component to display an iframe intended for a modal window.
|
||||
*
|
||||
* All props are passed down to the iframe tag.
|
||||
*
|
||||
* @component
|
||||
* @param {object} props - All component props
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
const Iframe = (props) => <iframe {...props} style={{ height: '90vh', width: '90vw' }} className="tw:w-full tw:mx-auto tw:max-w-4xl" />
|
||||
|
||||
/*
|
||||
* A component to display an iframe with FreeSewing.eu docs content intended for a modal window.
|
||||
*
|
||||
* @component
|
||||
* @param {object} props - All component props
|
||||
* @param {string} props.path - The (relative) URL path of the page to load
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
const DocsHelp = ({ path }) => <Iframe src={`https://freesewing.eu/${path}/?docusaurus-data-fs-embed=true`} />
|
||||
|
||||
/*
|
||||
* A component to display inline help for a design option
|
||||
|
|
@ -19,7 +38,7 @@ const DesignOptionHelp = ({ design, o }) =>
|
|||
design && o ? (
|
||||
<Iframe
|
||||
src={`https://freesewing.eu/docs/designs/${design.toLowerCase()}/options/${o.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
|
||||
title="Design Option Help"
|
||||
title="Design Options Help"
|
||||
/>
|
||||
) : (
|
||||
<p>Invalid props provided to DesignOptionHelp.</p>
|
||||
|
|
@ -38,7 +57,7 @@ const DesignOptionHelp = ({ design, o }) =>
|
|||
const CoreSettingHelp = ({ name }) =>
|
||||
name ? (
|
||||
<Iframe
|
||||
src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
|
||||
src={`https://freesewing.eu/docs/editor/menus/settings/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
|
||||
title="Core Setting Help"
|
||||
/>
|
||||
) : (
|
||||
|
|
@ -58,8 +77,8 @@ const CoreSettingHelp = ({ name }) =>
|
|||
const UiPreferenceHelp = ({ name }) =>
|
||||
name ? (
|
||||
<Iframe
|
||||
src={`https://freesewing.eu/docs/about/site/draft/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
|
||||
title="UI Preference Help"
|
||||
src={`https://freesewing.eu/docs/editor/menus/preferences/${name.toLowerCase()}/index.html?docusaurus-data-fs-embed=true`}
|
||||
title="UI Preferences Help"
|
||||
/>
|
||||
) : (
|
||||
<p>Invalid props provided to UiPreferenceHelp.</p>
|
||||
|
|
@ -111,10 +130,17 @@ export function modalDesignOptionHelp(design, o, setModal) {
|
|||
}
|
||||
|
||||
export function modalMeasurementHelp(m, setModal) {
|
||||
console.log('in modalMeasurmentHelp', { m, setModal })
|
||||
setModal(
|
||||
<ModalWrapper fullWidth keepOpenOnClick>
|
||||
<MeasurementHelp m={m} />
|
||||
</ModalWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export function modalDocsHelp(path, setModal) {
|
||||
setModal(
|
||||
<ModalWrapper wide keepOpenOnClick>
|
||||
<DocsHelp path={path} />
|
||||
</ModalWrapper>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ const slideClasses = {
|
|||
* @param {bool} [keepOpenOnClick = false] - Set to true to prevent a click in the modal content from closing the modal
|
||||
* @param {string} [slideFrom = left] - Direction to slide in from on mobile
|
||||
* @param {bool} [fullWidth = false] - Set to true to not constrain the width
|
||||
* @param {bool} [wide = false] - Set to true to not set a wide max width
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
export const ModalWrapper = ({
|
||||
|
|
@ -37,6 +38,7 @@ export const ModalWrapper = ({
|
|||
keepOpenOnClick = false,
|
||||
slideFrom = 'left',
|
||||
fullWidth = false,
|
||||
wide = false,
|
||||
}) => {
|
||||
const { clearModal } = useContext(ModalContext)
|
||||
const [animate, setAnimate] = useState('in')
|
||||
|
|
@ -82,7 +84,8 @@ export const ModalWrapper = ({
|
|||
onClick={keepOpenOnClick ? stopClick : null}
|
||||
className={`tw:z-30 tw:bg-base-100 tw:p-4 tw:lg:px-8 tw:lg:rounded-lg tw:lg:shadow-lg tw:max-h-full tw:overflow-auto tw:hover:cursor-default ${
|
||||
fullWidth ? 'tw:w-full' : ''
|
||||
}`}
|
||||
|
||||
} ${wide ? 'tw:max-w-5xl tw:w-full' : ''} `}
|
||||
>
|
||||
{children}
|
||||
<button
|
||||
|
|
|
|||
22
sites/org/docs/docs/editor/menus/flags/readme.mdx
Normal file
22
sites/org/docs/docs/editor/menus/flags/readme.mdx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: Flags Menu
|
||||
---
|
||||
|
||||
The **Flags Menu** holds messages that were _flagged_ by the designer.
|
||||
|
||||
In other words, this menu facilitates communication between the original
|
||||
designer and you, the person using their design.
|
||||
|
||||
Sometimes a flag is merely informative, sometimes they indicate there's a
|
||||
potential problem with your pattern.
|
||||
|
||||
:::tip
|
||||
The UI preferences menu is accessible in the [ribbon area](#areas) in the
|
||||
[draft view](#draft) and other views that show the pattern.
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Before printing a pattern, let alone cutting into any fabric, make sure to
|
||||
check all of the messages in this menu.
|
||||
:::
|
||||
|
||||
11
sites/org/docs/docs/editor/menus/layout/readme.mdx
Normal file
11
sites/org/docs/docs/editor/menus/layout/readme.mdx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Layout Menu
|
||||
---
|
||||
|
||||
The layout menu holds settings for the (print) layout. It is shown only on the
|
||||
[layout view](#layout).
|
||||
|
||||
:::tip
|
||||
The test menu is accessible in the [ribbon area](#areas) in the [layout view](#layout) only.
|
||||
:::
|
||||
|
||||
16
sites/org/docs/docs/editor/menus/options/readme.mdx
Normal file
16
sites/org/docs/docs/editor/menus/options/readme.mdx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Design Options Menu
|
||||
---
|
||||
|
||||
Each FreeSewing design can define a list of options that allow you to further
|
||||
customize your pattern. You can find them in the **Design Options** menu.
|
||||
|
||||
Since each design has its own options, the contents of the menu will be
|
||||
different for each design, but you typically find options to adjust the fit --
|
||||
such as changing the amount of ease -- as well options to change the style of
|
||||
the pattern.
|
||||
|
||||
:::tip
|
||||
The design options menu is accessible in the [ribbon area](#areas) in the
|
||||
[draft view](#draft) and other views that show the pattern.
|
||||
:::
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Show Side Menu
|
||||
---
|
||||
|
||||
This toggles the aside area on or off. The aside area can hold menus that are
|
||||
also accessible via the [ribbon area](#areas).
|
||||
|
||||
:::note
|
||||
That the aside area is not available on mobile.
|
||||
:::
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: User Experience
|
||||
---
|
||||
|
||||
This is a Editor-specific way to configure the [control
|
||||
setting](/docs/about/site/account/#control).
|
||||
31
sites/org/docs/docs/editor/menus/preferences/readme.mdx
Normal file
31
sites/org/docs/docs/editor/menus/preferences/readme.mdx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: UI Preferences Menu
|
||||
---
|
||||
import Aside from '@site/docs/docs/editor/menus/preferences/aside/readme.mdx'
|
||||
import Control from '@site/docs/docs/editor/menus/preferences/control/readme.mdx'
|
||||
import Renderer from '@site/docs/docs/editor/menus/preferences/renderer/readme.mdx'
|
||||
import Rotate from '@site/docs/docs/editor/menus/preferences/rotate/readme.mdx'
|
||||
|
||||
The **UI Preferences** menu allows you to tweak certain aspects of the user
|
||||
interface (UI).
|
||||
These preferences are ephemeral, which means they are not kept in the URL.
|
||||
|
||||
:::tip
|
||||
The UI preferences menu is accessible in the [ribbon area](#areas) in the
|
||||
[draft view](#draft) and other views that show the pattern.
|
||||
:::
|
||||
|
||||
The UI preferences includes in this menu are:
|
||||
|
||||
#### Show Side Menu {#aside}
|
||||
<Aside />
|
||||
|
||||
#### User Experience {#control}
|
||||
<Control />
|
||||
|
||||
#### Pattern Render Engine {#renderer}
|
||||
<Renderer />
|
||||
|
||||
#### Rotate Pattern {#rotate}
|
||||
<Rotate />
|
||||
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Pattern Render Engine
|
||||
---
|
||||
|
||||
### Render Engine {#renderer}
|
||||
|
||||
This setting allows you to choose how your pattern will be rendered. In other
|
||||
words, how it will be drawn on the screen. There are two options:
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Rotate Pattern
|
||||
---
|
||||
|
||||
This allows you to rotate your pattern 90 degrees in the Editor.
|
||||
|
||||
This is useful for patterns that are very tall as patterns are constrained by
|
||||
width in the Editor.
|
||||
3
sites/org/docs/docs/editor/menus/readme.md
Normal file
3
sites/org/docs/docs/editor/menus/readme.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: Editor Menus
|
||||
---
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Pattern Details
|
||||
---
|
||||
|
||||
# Pattern Details {#complete}
|
||||
|
||||
This setting -- which is enabled by default -- will give you a pattern with all
|
||||
details included.
|
||||
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Pattern expansion
|
||||
---
|
||||
|
||||
### Pattern expansion {#expand}
|
||||
|
||||
This option suppresses all efforts to make the pattern consume less
|
||||
space/paper.
|
||||
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Included parts
|
||||
---
|
||||
|
||||
### Included Parts {#include}
|
||||
|
||||
This setting allows you to specify which patterns parts you want to generate.
|
||||
|
||||
This can be useful if you want to only use a specific part. For example perhaps
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Margin
|
||||
---
|
||||
|
||||
### Margin {#margin}
|
||||
|
||||
The margin setting controls how much space will be added around each pattern
|
||||
part when calculating the pattern layout.
|
||||
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Paperless Patterns
|
||||
---
|
||||
|
||||
### Paperless Patterns {#paperless}
|
||||
|
||||
The paperless setting lets you generate a sewing pattern that includes extra
|
||||
dimensions as well as a grid (in either metric or imperial, based on your
|
||||
choice of units).
|
||||
57
sites/org/docs/docs/editor/menus/settings/readme.mdx
Normal file
57
sites/org/docs/docs/editor/menus/settings/readme.mdx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
title: Core Settings Menu
|
||||
---
|
||||
import Complete from '@site/docs/docs/editor/menus/settings/complete/readme.mdx'
|
||||
import Expand from '@site/docs/docs/editor/menus/settings/expand/readme.mdx'
|
||||
import Include from '@site/docs/docs/editor/menus/settings/include/readme.mdx'
|
||||
import Margin from '@site/docs/docs/editor/menus/settings/margin/readme.mdx'
|
||||
import Paperless from '@site/docs/docs/editor/menus/settings/paperless/readme.mdx'
|
||||
import Sabool from '@site/docs/docs/editor/menus/settings/sabool/readme.mdx'
|
||||
import Samm from '@site/docs/docs/editor/menus/settings/samm/readme.mdx'
|
||||
import Scale from '@site/docs/docs/editor/menus/settings/scale/readme.mdx'
|
||||
import Units from '@site/docs/docs/editor/menus/settings/units/readme.mdx'
|
||||
|
||||
The editor's **Core Settings** menu allows you to tweak various aspects of the
|
||||
FreeSewing Core library, which -- under the hood -- generates your pattern for
|
||||
you.
|
||||
|
||||
In contrast to Design options which are
|
||||
specific for a given design, these **Core Settings are the same for every design**.
|
||||
|
||||
So you will find this menu always provides the same settings, regardless of
|
||||
what design you are generating a pattern for.
|
||||
|
||||
:::tip
|
||||
The core settings menu is accessible in the [ribbon area](#areas) in the
|
||||
[draft view](#draft) and other views that show the pattern.
|
||||
:::
|
||||
|
||||
The following core settings are available:
|
||||
|
||||
#### Pattern Details {#complete}
|
||||
<Complete />
|
||||
|
||||
#### Pattern Expansion {#expand}
|
||||
<Expand />
|
||||
|
||||
#### Included parts {#include}
|
||||
<Include />
|
||||
|
||||
#### Margin {#margin}
|
||||
<Margin />
|
||||
|
||||
#### Paperless Patterns {#paperless}
|
||||
<Paperless />
|
||||
|
||||
#### Include Seam Allowance {#sabool}
|
||||
<Sabool />
|
||||
|
||||
#### Seam Allowance Size {#samm}
|
||||
<Samm />
|
||||
|
||||
#### Scale {#scale}
|
||||
<Scale />
|
||||
|
||||
#### Units {#units}
|
||||
<Units />
|
||||
|
||||
|
|
@ -2,10 +2,7 @@
|
|||
title: Include Seam Allowance
|
||||
---
|
||||
|
||||
### Include Seam Allowance {#sabool}
|
||||
|
||||
This [Core Setting][#core-settings] controls whether or not to include seam
|
||||
allowance on your pattern.
|
||||
This controls whether or not to include seam allowance on your pattern.
|
||||
|
||||
By default, seam allowance is not included. To generate a pattern with seam
|
||||
allowance, you should enable it by changing this option to **Yes**.
|
||||
|
|
@ -15,9 +12,9 @@ FreeSewing's core library only takes a single setting to handle seam allowance:
|
|||
`sa`. However, for convenience, we've split this up into two different
|
||||
settings on the website:
|
||||
|
||||
- **[Include Seam Allowance](/docs/about/site/draft#sabool)**: Controls whether
|
||||
- **[Include Seam Allowance](#sabool)**: Controls whether
|
||||
or not to include seam allowance
|
||||
- **[Seam Allowance Size](/docs/about/site/draft/#samm)**: Controls how big to
|
||||
- **[Seam Allowance Size](#samm)**: Controls how big to
|
||||
make the seam allowance, if it is included
|
||||
|
||||
The latter will only be shown if you've enabled the former.
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Seam Allowance Size
|
||||
---
|
||||
|
||||
### Seam Allowance Size {#samm}
|
||||
|
||||
This Core Setting controls the base size of your seam
|
||||
allowance. In other words, the default seam allowance will be this size. Other
|
||||
allowance that is intended to be wider, like hem allowance, will be a multiple
|
||||
|
|
@ -16,7 +14,7 @@ settings on the website:
|
|||
|
||||
- **[Include Seam Allowance](#sabool)**:
|
||||
Controls whether or not to include seam allowance
|
||||
- **[Seam Allowance Size](/docs/about/site/draft/#samm)**:
|
||||
- **[Seam Allowance Size](#samm)**:
|
||||
Controls how big to make the seam allowance, if it is included
|
||||
|
||||
The latter will only be shown if you've enabled the former.
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Scale
|
||||
---
|
||||
|
||||
### Scale {#scale}
|
||||
|
||||
The scale settings allow you to scale those parts of a pattern that do not
|
||||
scale with measurements. Things like logos, line widths, font sizes, and so
|
||||
on.
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
title: Units
|
||||
---
|
||||
|
||||
### Units {#units}
|
||||
|
||||
This controls the units used on your pattern. FreeSewing supports both metric
|
||||
and imperial units.
|
||||
|
||||
18
sites/org/docs/docs/editor/menus/test/readme.mdx
Normal file
18
sites/org/docs/docs/editor/menus/test/readme.mdx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Test Menu
|
||||
---
|
||||
|
||||
The test menu allows you to run tests on the design, making sure the influence
|
||||
of design options or measurements is as expected.
|
||||
|
||||
The menu will include buttons to test:
|
||||
|
||||
- All Design Options
|
||||
- All Measurements
|
||||
- All required measurments
|
||||
- Any optional measurements
|
||||
|
||||
:::tip
|
||||
The test menu is accessible in the [ribbon area](#areas) in the [test view](#test) only.
|
||||
:::
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: Show Side Menu
|
||||
---
|
||||
|
||||
# Show Side Menu {#aside}
|
||||
|
||||
FIXME
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: User Experience
|
||||
---
|
||||
|
||||
### User Experience {#control}
|
||||
|
||||
FIXME. See [/docs/about/site/account/#control](/docs/about/site/account/#control).
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: Rotate Pattern
|
||||
---
|
||||
|
||||
# Rotate Pattern {#rotate}
|
||||
|
||||
FIXME
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
title: User Experience
|
||||
---
|
||||
|
||||
# User Experience {#ux}
|
||||
|
||||
FIXME
|
||||
9
sites/org/docs/docs/editor/menus/view/readme.mdx
Normal file
9
sites/org/docs/docs/editor/menus/view/readme.mdx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: View Menu
|
||||
---
|
||||
|
||||
The **View menu** allows you to set the Editor view.
|
||||
|
||||
:::tip
|
||||
Refer to [Editor Views](#editor-views) for more details.
|
||||
:::
|
||||
|
|
@ -33,6 +33,14 @@ import TestView from '@site/docs/docs/editor/views/test/readme.mdx'
|
|||
import TimingView from '@site/docs/docs/editor/views/timing/readme.mdx'
|
||||
import PickerView from '@site/docs/docs/editor/views/picker/readme.mdx'
|
||||
|
||||
import PreferencesMenu from '@site/docs/docs/editor/menus/preferences/readme.mdx'
|
||||
import OptionsMenu from '@site/docs/docs/editor/menus/options/readme.mdx'
|
||||
import SettingsMenu from '@site/docs/docs/editor/menus/settings/readme.mdx'
|
||||
import ViewMenu from '@site/docs/docs/editor/menus/view/readme.mdx'
|
||||
import FlagsMenu from '@site/docs/docs/editor/menus/flags/readme.mdx'
|
||||
import TestMenu from '@site/docs/docs/editor/menus/test/readme.mdx'
|
||||
import LayoutMenu from '@site/docs/docs/editor/menus/layout/readme.mdx'
|
||||
|
||||
Generating custom sewing patterns based on your measurements is the flagship
|
||||
feature of our website. As a user, the way to tap into that feature is by
|
||||
using the **FreeSewing Editor**.
|
||||
|
|
@ -45,18 +53,14 @@ Before we dive in, you should know that:
|
|||
|
||||
- The home of the FreeSewing Editor is
|
||||
[freesewing.eu/editor](https://freesewing.eu/editor/).
|
||||
- By default, some of the more advanced features of the Editor are hidden to not overwhelm new users.
|
||||
<br />
|
||||
<small className="tw:pl-4">
|
||||
To gain access to all Editor features, set your [User Experience](/account/preferences/control/)
|
||||
to level **4** which is what we used in our examples.
|
||||
</small>
|
||||
- The editor stores your pattern settings in the URL, so you can bookmark or share the URL with others.
|
||||
- The editor has different areas, views, and menus which are all explained here.<br />
|
||||
<small className="tw:pl-4">
|
||||
Knowing where to find them and what they do is key to getting the most out of the FreeSewing
|
||||
Editor.
|
||||
</small>
|
||||
- By default, some of the more advanced features of the Editor are hidden to not overwhelm new users.
|
||||
|
||||
:::tip
|
||||
To gain access to all Editor features, set your [User Experience](/account/preferences/control/)
|
||||
to level **4** which is what we used in our examples.
|
||||
:::
|
||||
|
||||
## Quick start guide
|
||||
|
||||
|
|
@ -73,30 +77,6 @@ not picked a design yet, then opening the editor will automatically load [the
|
|||
designs view](#designs) which lets you select a design from [the FreeSewing
|
||||
collection](/designs/).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in draft view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in draft view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in designs view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### 2. Provide measurements
|
||||
|
||||
Assuming the design you chose requires measurements -- almost all designs do,
|
||||
|
|
@ -108,59 +88,11 @@ choose a different design.
|
|||
|
||||
Refer to [the measurements view](#measurements) for all details on how you can provide measurements, but there's one thing to note about this view: The drop-down at the top that says **Pattern Measurements**. This is [the view menu](#views) and it is present on every view except [the designs view](#designs) since all other views require a design to be chosen first.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### 3. Get to work
|
||||
|
||||
Once you have provided all required measurments, you are ready to go to work,
|
||||
which typically starts with loading [the draft view](#draft).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## Editor Areas {#areas}
|
||||
|
||||
The Editor has different areas, which are colorized in the screenshots below:
|
||||
|
|
@ -360,7 +292,7 @@ The following views are available:
|
|||
|
||||
<TestView />
|
||||
|
||||
### Time Design <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>timing</b> view</span>
|
||||
### Time Design <span className="tw:pl-4 tw:text-sm tw:text-base-content">aka <b>timing</b> view</span> {#timing)
|
||||
|
||||
<TimingView />
|
||||
|
||||
|
|
@ -373,242 +305,32 @@ The following views are available:
|
|||
Depending on the view you have selected, different menus will be available.
|
||||
The full list of menus is:
|
||||
|
||||
- View Menu
|
||||
- Design Options Menu
|
||||
- Core Settings Menu
|
||||
- UI Preferences Menu
|
||||
- Flags Menu
|
||||
- Print Settings Menu
|
||||
- Test Options Menu
|
||||
- Test Measurements Menu
|
||||
- [View Menu](#view-menu)
|
||||
- [Design Options Menu](#options-menu)
|
||||
- [Core Settings Menu](#settings-menu)
|
||||
- [UI Preferences Menu](#preferences-menu)
|
||||
- [Flags Menu](#flags-menu)
|
||||
- [Test Menu](#test-menu)
|
||||
- [Layout Menu](#layout-menu)
|
||||
|
||||
## The editor
|
||||
### View Menu {#view-menu}
|
||||
<ViewMenu />
|
||||
|
||||
Below is a screenshot of FreeSewing's pattern editor in **kiosk mode** which
|
||||
hides the site header and footer and lets the editor take up the entire screen.
|
||||
It also has the **View menu** (on the left) expanded. By default you will only
|
||||
see the icons, and not the text of the menu on the left.
|
||||
### Design Options Menu {#options-menu}
|
||||
<OptionsMenu />
|
||||
|
||||
Freesewing's pattern editor")
|
||||
### Core Settings Menu {#settings-menu}
|
||||
<SettingsMenu />
|
||||
|
||||
### The view menu
|
||||
### UI Preferences Menu {#preferences-menu}
|
||||
<PreferencesMenu />
|
||||
|
||||
The **View menu** on the left allows you to select the view. Each view serves a
|
||||
different purpose. The different views are:
|
||||
### Flags Menu {#flags-menu}
|
||||
<FlagsMenu />
|
||||
|
||||
- **Pattern editor**: This is where you can tweak your pattern
|
||||
- **Pattern measurements**: This is where you can choose which measurements set
|
||||
to use to generate the pattern, or tweak measurements manually
|
||||
- **Pattern tests**: Allows you to test the pattern. This is an advanced
|
||||
feature.
|
||||
- **Print layout**: Allows you to manually arrange the pattern parts to
|
||||
optimize the layout for printing
|
||||
- **Save pattern as...**: Allows you to save the pattern to your account
|
||||
- **Export pattern**: Allows you to export the pattern as PDF or SVG
|
||||
- **Edit settings by hand**: Allows you to -- you guessed it -- edit the
|
||||
settings to generate the pattern by hand. This is an advanced feature.
|
||||
- **Pattern logs**: This shows the logs generated when drafting the pattern.
|
||||
This is an advanced feature.
|
||||
- **Pattern inspector**: Allows pattern designer to inspect various aspects of
|
||||
the pattern. This is an advanced feature.
|
||||
- **Documentation**: Provides links to the documentation.
|
||||
### Test Menu {#test-menu}
|
||||
<TestMenu />
|
||||
|
||||
Feel free to check out the other views, but our focus here is on the **Pattern
|
||||
editor**.
|
||||
### Layout Menu {#layout-menu}
|
||||
<LayoutMenu />
|
||||
|
||||
### The settings menu
|
||||
|
||||
On the right side of the screen is the **Settings menu** which in turn is made
|
||||
up of four sections:
|
||||
|
||||
- **Messages from the designer**: Holds information the designer of the pattern
|
||||
flagged for your attention. Note that these are not generic remarks about the
|
||||
design in general (those go in the documentation), but rather information
|
||||
specific to this very pattern. Make sure to check them out. As such, these
|
||||
messages will be different for every user, measurements set, or even
|
||||
combination of design options.
|
||||
- **Design options**: Holds all the different options the designer has added
|
||||
that allow you to tweak your pattern. These options will be different for
|
||||
each design. Refer to the design documentation for a list of all available
|
||||
options, or check the inline documentation.
|
||||
- **Core settings**: These are settings that are not provided by the design(er)
|
||||
but rather by FreeSewing's core library. As such, the settings you'll find
|
||||
here are the same accross all designs as they all use the same core library.
|
||||
Refer to [Core Settings](#core-settings) for all
|
||||
details, or check the inline documentation.
|
||||
- **UI preferences**: And finally, these settings do not control the pattern as
|
||||
such, but rather the user interface. For example, here you can enable kiosk
|
||||
mode or tweak the user experience setting to see more or less features. Like
|
||||
the core settings, the UI preferences are the same for every design. Refer to
|
||||
[UI preferences](/docs/about/site/draft/#ui-preferences) or check the inline
|
||||
documentation.
|
||||
|
||||
### The header menu
|
||||
|
||||
At the top is a header with icons to give you quick access to both Core
|
||||
settings and UI preferences. There is also an icon to clear your settings, clear
|
||||
both settings and measurements, or to bookmark the current pattern.
|
||||
|
||||
## Design Options Menu
|
||||
|
||||
Each FreeSewing design can define a list of options that allow you to further
|
||||
customize your pattern. You can find them in the **Design Options** menu.
|
||||
|
||||
Since each design has its own options, the contents of the menu will be
|
||||
different for each design, but you typically find options to adjust the fit --
|
||||
such as changing the amount of ease -- as well options to change the style of
|
||||
the pattern.
|
||||
|
||||
## Core Settings Menu {#core-settings}
|
||||
|
||||
The editor's **Core Settings** menu allows you to tweak various aspects of the
|
||||
FreeSewing Core library, which -- under the hood -- generates your pattern for
|
||||
you.
|
||||
|
||||
In contrast to Design options which are
|
||||
specific for a given design, these Core Settings are the same for every design.
|
||||
So you will find this menu always provides the same settings, regardless of
|
||||
what design you are generating a pattern for.
|
||||
|
||||
The following core settings are available:
|
||||
|
||||
### Pattern Details {#complete}
|
||||
|
||||
This setting -- which is enabled by default -- will give you a pattern with all
|
||||
details included.
|
||||
|
||||
If you disable it, you will instead get a pattern that does not include any
|
||||
details such as text or annotations, and only include the seamlines.
|
||||
|
||||
### Pattern expansion {#expand}
|
||||
|
||||
This option suppresses all efforts to make the pattern consume less
|
||||
space/paper.
|
||||
|
||||
Designers will often take steps to reduce the amount of paper consumed by a
|
||||
pattern. For example, a strip of fabric used for binding, or a simple
|
||||
rectangular part may not be included, or only partially.
|
||||
|
||||
This option -- which is disabled by default -- allows you to suppress the space
|
||||
saving and indicate you rather want to get full-sized views on all pattern
|
||||
parts.
|
||||
|
||||
### Margin {#margin}
|
||||
|
||||
The margin setting controls how much space will be added around each pattern
|
||||
part when calculating the pattern layout.
|
||||
|
||||
Each pattern part is laid out as a rectangle on the page. The spacing around
|
||||
(and between) these rectangles is controlled by this setting.
|
||||
|
||||
### Included Parts {#include}
|
||||
|
||||
This setting allows you to specify which patterns parts you want to generate.
|
||||
|
||||
This can be useful if you want to only use a specific part. For example perhaps
|
||||
you have a shirt pattern and you only want to generate a different collar
|
||||
style.
|
||||
|
||||
It can also be used to include pattern parts that -- for whatever reason -- are
|
||||
hidden by default.
|
||||
|
||||
### Paperless Patterns {#paperless}
|
||||
|
||||
The paperless setting lets you generate a sewing pattern that includes extra
|
||||
dimensions as well as a grid (in either metric or imperial, based on your
|
||||
choice of units).
|
||||
|
||||
This allows you to skip printing the pattern altogether. Instead you can
|
||||
transfer it directly onto the fabric, or an intermediate medium such as pattern
|
||||
paper.
|
||||
|
||||
### Render Engine {#renderer}
|
||||
|
||||
This setting allows you to choose how your pattern will be rendered. In other
|
||||
words, how it will be drawn on the screen. There are two options:
|
||||
|
||||
- `React` allows for more interactivity, and is optimized for displaying
|
||||
patterns on-screen
|
||||
- `SVG` does not allow interactivity like the `React` option does. Instead it
|
||||
is optimized for printing
|
||||
|
||||
By default, this website only uses SVG when you are exporting your pattern.
|
||||
While you are generating and tweaking your pattern, we use React, unless you
|
||||
use this setting to change that to SVG.
|
||||
|
||||
### Include Seam Allowance {#sabool}
|
||||
|
||||
This [Core Setting][#core-settings] controls whether or not to include seam
|
||||
allowance on your pattern.
|
||||
|
||||
By default, seam allowance is not included. To generate a pattern with seam
|
||||
allowance, you should enable it by changing this option to **Yes**.
|
||||
|
||||
:::note
|
||||
FreeSewing's core library only takes a single setting to handle seam allowance:
|
||||
`sa`. However, for convenience, we've split this up into two different
|
||||
settings on the website:
|
||||
|
||||
- **[Include Seam Allowance](/docs/about/site/draft#sabool)**: Controls whether
|
||||
or not to include seam allowance
|
||||
- **[Seam Allowance Size](/docs/about/site/draft/#samm)**: Controls how big to
|
||||
make the seam allowance, if it is included
|
||||
|
||||
The latter will only be shown if you've enabled the former.
|
||||
:::
|
||||
|
||||
### Seam Allowance Size {#samm}
|
||||
|
||||
This Core Setting controls the base size of your seam
|
||||
allowance. In other words, the default seam allowance will be this size. Other
|
||||
allowance that is intended to be wider, like hem allowance, will be a multiple
|
||||
of this size.
|
||||
|
||||
:::note
|
||||
FreeSewing's core library only takes a single setting to handle seam allowance:
|
||||
`sa`. However, for convenience, we've split this up into two different
|
||||
settings on the website:
|
||||
|
||||
- **[Include Seam Allowance](#sabool)**:
|
||||
Controls whether or not to include seam allowance
|
||||
- **[Seam Allowance Size](/docs/about/site/draft/#samm)**:
|
||||
Controls how big to make the seam allowance, if it is included
|
||||
|
||||
The latter will only be shown if you've enabled the former.
|
||||
:::
|
||||
|
||||
### Scale {#scale}
|
||||
|
||||
The scale settings allow you to scale those parts of a pattern that do not
|
||||
scale with measurements. Things like logos, line widths, font sizes, and so
|
||||
on.
|
||||
|
||||
This setting was added at the requests of people who like to use our patterns
|
||||
to make doll clothes. When generating such a small pattern, the arrowheads,
|
||||
titles, and so on tend to obscure much of the pattern. This setting allows you
|
||||
to scale them down or -- if you so wish -- scale them up.
|
||||
|
||||
### Units {#units}
|
||||
|
||||
This controls the units used on your pattern. FreeSewing supports both metric
|
||||
and imperial units.
|
||||
|
||||
Note that as a FreeSewing user, you can configure your units in your account,
|
||||
and those are the units that will be used by default. However, if you want to
|
||||
override those settings on an individual basis -- perhaps you are generating a
|
||||
pattern on behalf of someone else -- this setting allows you to do that.
|
||||
|
||||
## UI Preferences
|
||||
|
||||
The **UI Preferences** menu allows you to tweak certain aspects of the user
|
||||
interface (UI).
|
||||
|
||||
### User Experience {#control}
|
||||
|
||||
FIXME. See [/docs/about/site/account/#control](/docs/about/site/account/#control).
|
||||
|
||||
### Rotate Pattern {#rotate}
|
||||
|
||||
FIXME
|
||||
|
||||
### Pattern Render Engine
|
||||
|
|
|
|||
|
|
@ -1,5 +1,71 @@
|
|||
---
|
||||
title: Choose a different design (designs view)
|
||||
---
|
||||
import { CisFemaleIcon, ResetIcon, FilterIcon, ShowcaseIcon } from '@freesewing/react/components/Icon'
|
||||
|
||||
#### Purpose of the designs view
|
||||
|
||||
The _designs_ view allows you to chose the design you want to generate a pattern from.
|
||||
It is the first thing the Editor will present you with.
|
||||
|
||||
#### Layout of the designs view
|
||||
|
||||
This view does not have a [ribbon area](#areas). The entire editor real-estate
|
||||
is used for letting you choose a design.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in designs view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in designs view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in designs view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
#### Controlling the design grid
|
||||
|
||||
By default, you will get a grid of pictures showcasing the available designs,
|
||||
as well as a list of design names at the top for quick access in case you
|
||||
already know which design you want.
|
||||
|
||||
You can control the way the designs are displayed with the buttons between the
|
||||
list of names and the grid of pictures:
|
||||
|
||||
| Button | Description |
|
||||
| ------ | ----------- |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><CisFemaleIcon /> Show Line Drawings</button> | Display a line drawing for each design<br /><small>This button won't be shown when pictures are currently displayed</small> |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><ShowcaseIcon /> Show Examples</button> | Display a picture for each design<br /><small>This button won't be shown when line drawings are currently displayed</small> |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><FilterIcon /> Show Filters</button> | Display filters for the list of designs<br /><small>See [Design filters](#filters)</small> |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><FilterIcon /> Hide Filters</button> | Display filters for the list of designs<br /><small>This button won't be shown unless filters are currently displayed</small> |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline"><ResetIcon /> Clear Filters</button> | Display filters for the list of designs<br /><small>This button won't be shown unless filters are currently displayed</small> |
|
||||
|
||||
##### Design filters {#filters}
|
||||
|
||||
When you click the **Show Filters** button, it will bring up these filters:
|
||||
|
||||
|
||||
|
||||
They allow you to filter on:
|
||||
|
||||
- **Tags**: These designate different departments
|
||||
- **Techniques**: These let you filter based on the techniques that you are comfortable with
|
||||
- **Difficulty**: These let you filter based on the difficulty level of making the design
|
||||
|
||||
You can click on any of them to select/deselect, and can also combine filters.
|
||||
|
||||
FIXME
|
||||
|
|
|
|||
|
|
@ -2,4 +2,43 @@
|
|||
title: Documentation (docs view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the docs view
|
||||
|
||||
The _docs_ view holds links to the documentation of the desing you are
|
||||
currently using, as well as documentation about the FreeSewing editor itself,
|
||||
and even documentation for developers.
|
||||
|
||||
#### Layout of the docs view
|
||||
|
||||
This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::tip Reading documenation without leaving the Editor
|
||||
|
||||
If you want to check something in the documenation but do not want to leave the Editor, look for this button:
|
||||
<br /><button className="tw:daisy-btn tw:daisy-btn-secondary tw:daisy-btn-outline tw:mt-4">Open without leaving the Editor</button>
|
||||
<br/>It will load the documentation in a modal window floating on top of the Editor.
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,5 +1,66 @@
|
|||
---
|
||||
title: Edit settings by hand (editSettings view)
|
||||
---
|
||||
import { OkIcon, ResetIcon, FilterIcon, ShowcaseIcon } from '@freesewing/react/components/Icon'
|
||||
|
||||
#### Purpose of the editSettings view
|
||||
|
||||
The _editSettings view allows you to manually tweak all of the inputs of your pattern, accept the design.
|
||||
That includes:
|
||||
|
||||
- The measurements
|
||||
- The design options
|
||||
- The core settings
|
||||
|
||||
:::warning
|
||||
This is an advanced feature that does provide any guardrails.
|
||||
:::
|
||||
|
||||
#### Layout of the editSettings view
|
||||
|
||||
This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
|
||||
|
||||
The rest of the [main working area](#areas) is taken up by a YAML editor that allows you to make changes.
|
||||
|
||||
:::tip
|
||||
We use [YAML](https://en.wikipedia.org/wiki/YAML) here as a format to edit the
|
||||
settings. If you are not familiar, hopefully the syntax is self-explanatory.
|
||||
If not, there's plenty of information online about how it works.
|
||||
:::
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
#### Saving or reverting changes
|
||||
|
||||
Changes you make here are not immeadiate. Instead, once you introduce a change,
|
||||
and number of extra buttons will appear below the YAML editor:
|
||||
|
||||
| Button | Description |
|
||||
| ------ | ----------- |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-primary tw:daisy-btn-outline">Show Changes</button> | Shows the unsaved changes you have made<br /><small>This button won't show until you make a change</small> |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-primary"><OkIcon /> Save Settings</button> | Applies the changes you have made (this does not save your pattern)<br /><small>This button won't show until you make a change</small> |
|
||||
| <button className="tw:flex tw:flex-row tw:gap-2 tw:daisy-btn tw:daisy-btn-error tw:daisy-btn-outline"><ResetIcon /> Revert Settings</button> | Discard any changes you have made<br /><small>This button won't show until you make a change</small> |
|
||||
|
||||
|
||||
FIXME
|
||||
|
|
|
|||
|
|
@ -2,4 +2,60 @@
|
|||
title: Export Pattern (export view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the export view
|
||||
|
||||
The _export_ view allows you to export your pattern in a variety of formats.
|
||||
|
||||
#### Layout of the export view
|
||||
|
||||
This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in export view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in export view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in export view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
#### Available export formats
|
||||
|
||||
The page lists the following export formats:
|
||||
|
||||
- **Share your pattern**: These are URLs that you can copy that include the Editor state
|
||||
- **Pattern and Measurements**: This URL includes all patterns settings plus the measurements used<br /><small>With this URL anyone can create the exact same pattern.</small>
|
||||
- **Pattern only**: This URL includes all patterns settings, but no measurements<br /><small>With this URL anyone can create the same pattern style with their own measurements.</small>
|
||||
- **Export for printing**: Export formats intended for printing your pattern
|
||||
- **ISO paper sizes**: Standard paper sizes
|
||||
- **A4 PDF**: Export to PDF, tiled to A4-sized pages
|
||||
- **A3 PDF**: Export to PDF, tiled to A3-sized pages
|
||||
- **A2 PDF**: Export to PDF, tiled to A2-sized pages
|
||||
- **A1 PDF**: Export to PDF, tiled to A1-sized pages
|
||||
- **A0 PDF**: Export to PDF, tiled to A0-sized pages
|
||||
- **Other paper sizes**: Local paper sizes used in the US and Canada
|
||||
- **Letter PDF**: Export to PDF, tiles to Letter-sized pages
|
||||
- **Legal PDF**: Export to PDF, tiles to Legal-sized pages
|
||||
- **Tabloid PDF**: Export to PDF, tiles to Tabloid-sized pages
|
||||
- **Export for editing**: Export formats intended for further editing
|
||||
- **SVG**: Export to SVG<br /><small>This is the native FreeSewing format</small>
|
||||
- **SVG**: Export to (untiled) PDF
|
||||
- **Export as code**: Export formats for developers
|
||||
- **JSON**: Export pattern settings as JSON
|
||||
- **YAML**: Export pattern settings as YAML
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,40 @@
|
|||
title: Pattern inspector (inspect view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the inspect view
|
||||
|
||||
The _inspect_ view is a version of the [draft view](#draft) with extra features
|
||||
for pattern designers that allows them to _inspect_ the various points and
|
||||
paths that make up a pattern.
|
||||
|
||||
This is an advanced feature that is of little value to regular users of the
|
||||
site and intended for designers and developers.
|
||||
|
||||
#### Layout of the inspect view
|
||||
|
||||
This view shares the same layout as the [draft view](#draft).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in inspect view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in inspect view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in inspect view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,70 @@
|
|||
---
|
||||
title: Pattern Layout (layout view)
|
||||
---
|
||||
import { PrintIcon, ResetIcon } from '@freesewing/react/components/Icon'
|
||||
|
||||
#### Purpose of the layout view
|
||||
|
||||
The _layout_ view allows you to customize the way the individual patterns parts
|
||||
are laid out on the page(s).
|
||||
|
||||
:::tip
|
||||
Placing pattern parts on page to use as little paper as possible -- aka
|
||||
[the bin packing problem](https://en.wikipedia.org/wiki/Bin_packing_problem) -- is
|
||||
one of those challenges where humans are (still) much better at than computers.
|
||||
|
||||
Every time you tweak your pattern, FreeSewing needs to re-draft it, calculate
|
||||
the new layout, and render it on screen. For this reason, we wrote a packing
|
||||
algorithm that prioritizes speed.<br />
|
||||
As a result, it is often trivial for a human to come up with a more optimized layout.
|
||||
This view lets you accomplish this without requiring any additional software.
|
||||
|
||||
If you want more control over your pattern, you can also [export it as SVG](#export)
|
||||
and use [Inkscape](https://inkscape.org/) to edit it locally.
|
||||
:::
|
||||
|
||||
#### Layout of the layout view
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in inspect view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in inspect view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in inspect view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
- The layout view has the [ribbon area](#areas) at the top where we will find:
|
||||
- [The **view** menu](#view-menu) (not view-specific, it is the one with the **Pattern Layout** label)
|
||||
- The view-specific menus, including:
|
||||
- The [**layout** menu](#layout-menu) (highlighted in yellow)
|
||||
- The [**layout** icons](#layout-menu) (highlighted in green)
|
||||
- In [the **main working area**](#areas), we have:
|
||||
- [The pattern area](#areas) on the left (highlighted in yellow)
|
||||
- [The **aside** area](#areas) on the right, holding:
|
||||
- The [Layout menu](#layout-menu) (highlighted in yellow, same as in [the ribbon area](#areas))
|
||||
|
||||
#### Layout icons
|
||||
|
||||
The _layout icons_ in the ribbon area hold:
|
||||
|
||||
- A **summary** about the numbner of pages required for the current layout
|
||||
- A **Apply Layout** button to apply the current layout
|
||||
- A <PrintIcon className="tw:w-5 tw:h-5 tw:inline" /> icon that takes you to the [export view](#export)
|
||||
- A <ResetIcon className="tw:w-5 tw:h-5 tw:inline" /> icon the resets the layout changes
|
||||
|
||||
FIXME
|
||||
|
|
|
|||
|
|
@ -2,4 +2,38 @@
|
|||
title: Pattern Logs (logs view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the logs view
|
||||
|
||||
The _logs_ view show the logs generated by the FreeSewing core library.
|
||||
|
||||
This is an advanced feature that is of little value to regular users of the
|
||||
site and intended for designers and developers.
|
||||
|
||||
#### Layout of the logs view
|
||||
|
||||
This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in logs view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in logs view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in logs view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,56 @@
|
|||
title: Pattern Measurements (measurements view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the measurements view
|
||||
|
||||
The _measurements_ view is where you should provide the measurements to be used
|
||||
for your pattern.
|
||||
|
||||
:::tip
|
||||
If you are lacking any required measurements, this view will be automatically loaded.
|
||||
:::
|
||||
|
||||
#### Layout of the measurements view
|
||||
|
||||
This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in measurements view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
#### Ways to provide measurements
|
||||
|
||||
This view has different ways that you can provide measurements:
|
||||
|
||||
- **Choose one of your own measurements set**<br />
|
||||
Use this to select one of the measurements sets stored in your own FreeSewing account.
|
||||
- **Choose one of the measurements sets you have bookmarked**<br />
|
||||
Choose this to use a measurement set you have bookmarked, which can be either
|
||||
one of your own, or a public measurements set from another FreeSewing user.
|
||||
- **Choose one of Freesewing's curated measurments sets**<br />
|
||||
Choose one of the measurements sets from the list we curate.
|
||||
- **Load a measurements set by ID**<br />
|
||||
If you know the ID of the measurements set you want to use, you can load it this way.
|
||||
If it's not one of your own measurements sets, it needs to be a public set for this to work.
|
||||
- **Edit measurements by hand**<br />
|
||||
Regardless of what option you choose, this allows you to edit all measurments by hand.
|
||||
|
|
|
|||
3
sites/org/docs/docs/editor/views/readme.md
Normal file
3
sites/org/docs/docs/editor/views/readme.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: Editor views
|
||||
---
|
||||
|
|
@ -1,5 +1,48 @@
|
|||
---
|
||||
title: Save pattern as... (save view)
|
||||
---
|
||||
import { UploadIcon } from '@freesewing/react/components/Icon'
|
||||
|
||||
FIXME
|
||||
#### Purpose of the save view
|
||||
|
||||
The _save_ view allows you to save your current work as a (new) pattern in your
|
||||
FreeSewing account.
|
||||
|
||||
:::tip
|
||||
Once a pattern has been stored in your account you can use the
|
||||
<UploadIcon className="tw:w-6 tw:h-6 tw:inline" /> in the ribbon area
|
||||
to save your changes.
|
||||
:::
|
||||
|
||||
#### Layout of the save view
|
||||
|
||||
This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
|
||||
|
||||
The save view itself takes a **title** and optional **notes** to store along the pattern.
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in docs view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::tip
|
||||
To access your saved patterns, go to [/account/data/patterns](/account/data/patterns/)
|
||||
|
|
|
|||
|
|
@ -2,4 +2,49 @@
|
|||
title: Test Design (test view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the test view
|
||||
|
||||
The _test_ view is a version of the [draft view](#draft) with extra features
|
||||
for pattern designers that allows them to _test_ the impact of the various
|
||||
design options and measurements on their design.
|
||||
|
||||
This is an advanced feature that is of little value to regular users of the
|
||||
site and intended for designers and developers.
|
||||
|
||||
#### Layout of the test view
|
||||
|
||||
This view shares the same layout as the [draft view](#draft).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in test view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in test view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in test view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
- The layout view has the [ribbon area](#areas) at the top where we will find:
|
||||
- [The **view** menu](#view-menu) (not view-specific, it is the one with the **Pattern Layout** label)
|
||||
- The view-specific menus, including:
|
||||
- The [**test** menu](**test-menu) (highlighted in yellow)
|
||||
- In [the **main working area**](#areas), we have:
|
||||
- [The pattern area](#areas) on the left which shows the effect of the test
|
||||
- [The **aside** area](#areas) on the right, holding:
|
||||
- The [Test menu](#test-menu) (highlighted in yellow, same as in [the ribbon area](#areas))
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,42 @@
|
|||
title: Time Design (timing view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the timing view
|
||||
|
||||
The _timing_ view is a version of the [draft view](#draft) with extra features
|
||||
for pattern designers that allows them to _time_ the impact of the various
|
||||
design options and measurements on the the design.
|
||||
|
||||
This is an advanced feature that is of little value to regular users of the
|
||||
site and intended for designers and developers.
|
||||
|
||||
#### Layout of the timing view
|
||||
|
||||
This view shares the same layout as the [draft view](#draft). However, it has
|
||||
an extra area that sits below the [ribbon area](#areas) that generates a
|
||||
timeseries graph of the subsequent draft operations (marked in yellow).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in timing view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in timing view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in timing view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,41 @@
|
|||
title: Undo History (undos view)
|
||||
---
|
||||
|
||||
FIXME
|
||||
#### Purpose of the undos view
|
||||
|
||||
The _undos_ view allows you to revert recent changes to your pattern.
|
||||
It lists the recent changes you made, and clicking on any changes will
|
||||
roll back all changes up to (and including) that change.
|
||||
|
||||
:::tip
|
||||
This functionality is available in the [draft view](#draft) via the icons in the [ribbon area](#areas).
|
||||
:::
|
||||
|
||||
#### Layout of the undos view
|
||||
|
||||
This view only has the [view menu](#view-menu) in the [ribbon area](#areas).
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="desktop" label="On Desktop">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in undos view, on a desktop._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="tablet" label="On Tablet">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in undos view, on a tablet._
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem value="mobile" label="On Mobile">
|
||||
|
||||
<div className="tw:text-center">
|
||||
_A screenshot of the FreeSewing editor in undos view, on mobile._
|
||||
</div>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@ import smartypants from 'remark-smartypants'
|
|||
* - We hide certain dynamic pages (like for measurements sets, patterns, and so on)
|
||||
*/
|
||||
function customizeSidebar(items) {
|
||||
// Filter out design options
|
||||
// Filter out docs
|
||||
const docs = items.filter((entry) => entry.label === 'Docs').pop().items
|
||||
for (const item in docs) {
|
||||
// Filter out design options
|
||||
if (docs[item].label === 'FreeSewing Designs') {
|
||||
for (const design in docs[item].items) {
|
||||
for (const subpage in docs[item].items[design].items) {
|
||||
|
|
@ -20,8 +21,9 @@ function customizeSidebar(items) {
|
|||
}
|
||||
}
|
||||
}
|
||||
if (docs[item].label === 'hidden') {
|
||||
console.log(docs[item])
|
||||
// Filter out submenus in Editor docs
|
||||
if (docs[item].label === 'FreeSewing Editor') {
|
||||
docs[item].items = []
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue